hikari-desktop/src/lib/components/StatsDisplay.svelte

<script lang="ts">
  import { formattedStats } from "$lib/stores/stats";
  import { fade } from "svelte/transition";

  let showToolsBreakdown = false;
</script>

<div class="stats-display" transition:fade={{ duration: 200 }}>
  <div class="stats-row">
    <span class="stat-label">Duration:</span>
    <span class="stat-value">{$formattedStats.sessionDuration}</span>
  </div>

  <div class="stats-row">
    <span class="stat-label">Messages:</span>
    <span class="stat-value">{$formattedStats.messagesSession}</span>
    <span class="stat-secondary">/ {$formattedStats.messagesTotal}</span>
  </div>

  <div class="stats-section">
    <h3>Tokens & Cost</h3>
    <div class="stat-row">
      <span class="stat-label">Session:</span>
      <span class="stat-value">{$formattedStats.sessionTokens}</span>
      <span class="stat-cost">{$formattedStats.sessionCost}</span>
    </div>
    <div class="stat-row stat-detail">
      <span class="stat-label">Input:</span>
      <span class="stat-value">{$formattedStats.sessionInputTokens}</span>
    </div>
    <div class="stat-row stat-detail">
      <span class="stat-label">Output:</span>
      <span class="stat-value">{$formattedStats.sessionOutputTokens}</span>
    </div>
    <div class="stat-row stat-highlight">
      <span class="stat-label">Total:</span>
      <span class="stat-value">{$formattedStats.totalTokens}</span>
      <span class="stat-cost">{$formattedStats.totalCost}</span>
    </div>
  </div>

  <div class="stats-section">
    <h3>Activity</h3>
    <div class="stat-row">
      <span class="stat-label">Code blocks:</span>
      <span class="stat-value">{$formattedStats.codeBlocksSession}</span>
      <span class="stat-secondary">/ {$formattedStats.codeBlocksTotal}</span>
    </div>
    <div class="stat-row">
      <span class="stat-label">Files edited:</span>
      <span class="stat-value">{$formattedStats.filesEditedSession}</span>
      <span class="stat-secondary">/ {$formattedStats.filesEditedTotal}</span>
    </div>
    <div class="stat-row">
      <span class="stat-label">Files created:</span>
      <span class="stat-value">{$formattedStats.filesCreatedSession}</span>
      <span class="stat-secondary">/ {$formattedStats.filesCreatedTotal}</span>
    </div>
  </div>

  {#if Object.keys($formattedStats.sessionToolsUsage).length > 0}
    <div class="stats-section">
      <h3 class="tools-header">
        <button class="tools-toggle" onclick={() => (showToolsBreakdown = !showToolsBreakdown)}>
          Tools Used
          <span class="toggle-icon">{showToolsBreakdown ? "▼" : "▶"}</span>
        </button>
      </h3>
      {#if showToolsBreakdown}
        <div class="tools-breakdown">
          {#each Object.entries($formattedStats.sessionToolsUsage).sort((a, b) => b[1] - a[1]) as [tool, count] (tool)}
            <div class="stat-row stat-detail">
              <span class="stat-label">{tool}:</span>
              <span class="stat-value">{count}</span>
            </div>
          {/each}
        </div>
      {/if}
    </div>
  {/if}

  <div class="model-info">
    <span class="model-label">Model:</span>
    <span class="model-value">{$formattedStats.model}</span>
  </div>
</div>

<style>
  .stats-display {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .stats-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .stats-section h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
  }

  .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.125rem 0;
  }

  .stat-detail {
    margin-left: 1rem;
    font-size: 0.8rem;
    opacity: 0.8;
  }

  .stat-highlight {
    font-weight: 600;
    color: var(--accent-primary);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border-color);
  }

  .stat-label {
    color: var(--text-secondary, #9ca3af);
  }

  .stat-value {
    font-family: var(--font-mono, monospace);
    color: var(--text-primary, #e5e7eb);
  }

  .model-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 0.8rem;
  }

  .model-label {
    color: var(--text-secondary, #9ca3af);
    font-weight: 600;
  }

  .model-value {
    font-family: var(--font-mono, monospace);
    color: var(--text-primary, #e5e7eb);
    font-size: 0.75rem;
  }
</style>