feat: add statistics

2026-01-19 17:01:26 -08:00
parent a8f98406e1
commit 1ce43dcff8
12 changed files with 687 additions and 17 deletions
@@ -0,0 +1,169 @@
+<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]}
+                        <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>