feat: stats and achievements (#45)

### Explanation

_No response_

### Issue

Closes #39

### Attestations

- [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [ ] I have run the linter and resolved any errors.
- [ ] My pull request uses an appropriate title, matching the conventional commit standards.
- [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: #45
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/lib/components/StatsDisplay.svelte

@@ -0,0 +1,168 @@
+<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>