From 27f69cb30827a2d76d1617be267cb42f1cddb4c2 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Mon, 19 Jan 2026 19:51:10 -0800
Subject: [PATCH] chore: fix lints and tests

---
 .../components/AchievementNotification.svelte |  112 +-
 src/lib/components/AchievementsPanel.svelte   |  117 +-
 src/lib/components/StatsDisplay.svelte        |  289 ++--
 src/lib/components/StatusBar.svelte           |   14 +-
 src/lib/components/Terminal.svelte            |    4 +-
 src/lib/sounds/achievement.ts                 |   22 +-
 src/lib/stores/achievements.ts                | 1172 +++++++++--------
 src/lib/stores/stats.ts                       |  208 +--
 src/lib/types/achievements.ts                 |  170 +--
 src/routes/+page.svelte                       |    7 +-
 src/routes/test-achievement/+page.svelte      |   16 +-
 11 files changed, 1128 insertions(+), 1003 deletions(-)

diff --git a/src/lib/components/AchievementNotification.svelte b/src/lib/components/AchievementNotification.svelte
index 50e6cb0..b1c9712 100644
--- a/src/lib/components/AchievementNotification.svelte
+++ b/src/lib/components/AchievementNotification.svelte
@@ -1,23 +1,33 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { fade, fly } from 'svelte/transition';
-  import { cubicOut } from 'svelte/easing';
-  import { listen } from '@tauri-apps/api/event';
-  import type { AchievementUnlockedEvent } from '$lib/types/achievements';
+  import { onMount } from "svelte";
+  import { fade, fly } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { listen } from "@tauri-apps/api/event";
+  import type { AchievementUnlockedEvent } from "$lib/types/achievements";
 
   let achievements = $state<AchievementUnlockedEvent[]>([]);
   let currentAchievement = $state<AchievementUnlockedEvent | null>(null);
   let showNotification = $state(false);
 
-  onMount(async () => {
-    const unlisten = await listen<AchievementUnlockedEvent>('achievement:unlocked', (event) => {
-      achievements.push(event.payload);
-      if (!showNotification) {
-        showNext();
-      }
-    });
+  onMount(() => {
+    let unlisten: (() => void) | undefined;
 
-    return unlisten;
+    const setupListener = async () => {
+      unlisten = await listen<AchievementUnlockedEvent>("achievement:unlocked", (event) => {
+        achievements.push(event.payload);
+        if (!showNotification) {
+          showNext();
+        }
+      });
+    };
+
+    setupListener();
+
+    return () => {
+      if (unlisten) {
+        unlisten();
+      }
+    };
   });
 
   function showNext() {
@@ -42,19 +52,33 @@
 
   function getRarityColor(rarity: string): string {
     switch (rarity) {
-      case 'legendary': return 'from-yellow-400 to-orange-500';
-      case 'epic': return 'from-purple-400 to-pink-500';
-      case 'rare': return 'from-blue-400 to-indigo-500';
-      default: return 'from-green-400 to-emerald-500';
+      case "legendary":
+        return "from-yellow-400 to-orange-500";
+      case "epic":
+        return "from-purple-400 to-pink-500";
+      case "rare":
+        return "from-blue-400 to-indigo-500";
+      default:
+        return "from-green-400 to-emerald-500";
     }
   }
 
   function getAchievementRarity(id: string): string {
     // Determine rarity based on achievement ID
-    if (id === 'TokenMaster') return 'legendary';
-    if (['CodeMachine', 'Unstoppable'].includes(id)) return 'epic';
-    if (['BlossomingCoder', 'CodeWizard', 'MasterBuilder', 'EnduranceChamp', 'DeepDive', 'CreativeCoder'].includes(id)) return 'rare';
-    return 'common';
+    if (id === "TokenMaster") return "legendary";
+    if (["CodeMachine", "Unstoppable"].includes(id)) return "epic";
+    if (
+      [
+        "BlossomingCoder",
+        "CodeWizard",
+        "MasterBuilder",
+        "EnduranceChamp",
+        "DeepDive",
+        "CreativeCoder",
+      ].includes(id)
+    )
+      return "rare";
+    return "common";
   }
 </script>
 
@@ -67,18 +91,27 @@
     <!-- Backdrop with animated gradient border -->
     <div class="relative p-[2px] rounded-lg overflow-hidden">
       <!-- Animated gradient border -->
-      <div class="absolute inset-0 bg-gradient-to-r {getRarityColor(getAchievementRarity(currentAchievement.achievement.id))} animate-pulse"></div>
+      <div
+        class="absolute inset-0 bg-gradient-to-r {getRarityColor(
+          getAchievementRarity(currentAchievement.achievement.id)
+        )} animate-pulse"
+      ></div>
 
       <!-- Main notification content -->
       <div class="relative bg-[var(--bg-primary)] rounded-lg p-4 shadow-2xl backdrop-blur-sm">
         <button
           onclick={dismiss}
-          onkeydown={(e) => e.key === 'Enter' && dismiss()}
+          onkeydown={(e) => e.key === "Enter" && dismiss()}
           class="absolute top-2 right-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
           aria-label="Dismiss notification"
         >
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
           </svg>
         </button>
 
@@ -89,13 +122,21 @@
 
             <!-- Sparkle animations -->
             <div class="absolute -top-1 -right-1 text-yellow-400 animate-ping">✨</div>
-            <div class="absolute -bottom-1 -left-1 text-yellow-400 animate-ping animation-delay-200">✨</div>
-            <div class="absolute top-1/2 -right-2 text-yellow-400 animate-ping animation-delay-400">✨</div>
+            <div
+              class="absolute -bottom-1 -left-1 text-yellow-400 animate-ping animation-delay-200"
+            >
+              ✨
+            </div>
+            <div class="absolute top-1/2 -right-2 text-yellow-400 animate-ping animation-delay-400">
+              ✨
+            </div>
           </div>
 
           <!-- Text content -->
           <div class="flex-1 min-w-0 pt-1">
-            <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+            <h3
+              class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide"
+            >
               Achievement Unlocked!
             </h3>
             <p class="text-lg font-bold text-[var(--text-primary)] mt-1">
@@ -107,7 +148,11 @@
 
             <!-- Rarity badge -->
             <div class="mt-2 inline-flex items-center">
-              <span class="px-2 py-1 text-xs font-medium rounded-full bg-gradient-to-r {getRarityColor(getAchievementRarity(currentAchievement.achievement.id))} text-white capitalize">
+              <span
+                class="px-2 py-1 text-xs font-medium rounded-full bg-gradient-to-r {getRarityColor(
+                  getAchievementRarity(currentAchievement.achievement.id)
+                )} text-white capitalize"
+              >
                 {getAchievementRarity(currentAchievement.achievement.id)}
               </span>
             </div>
@@ -116,10 +161,13 @@
 
         <!-- Celebration confetti effect (CSS only) -->
         <div class="absolute inset-0 pointer-events-none overflow-hidden rounded-lg">
-          {#each Array(10) as _, i}
+          {#each Array(10) as _ (_)}
             <div
-              class="absolute w-2 h-2 bg-gradient-to-br {getRarityColor(getAchievementRarity(currentAchievement.achievement.id))} rounded-full animate-fall"
-              style="left: {Math.random() * 100}%; animation-delay: {Math.random() * 2}s; animation-duration: {2 + Math.random() * 2}s;"
+              class="absolute w-2 h-2 bg-gradient-to-br {getRarityColor(
+                getAchievementRarity(currentAchievement.achievement.id)
+              )} rounded-full animate-fall"
+              style="left: {Math.random() * 100}%; animation-delay: {Math.random() *
+                2}s; animation-duration: {2 + Math.random() * 2}s;"
             ></div>
           {/each}
         </div>
@@ -151,4 +199,4 @@
   .animation-delay-400 {
     animation-delay: 400ms;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/AchievementsPanel.svelte b/src/lib/components/AchievementsPanel.svelte
index f06d610..a2f75c5 100644
--- a/src/lib/components/AchievementsPanel.svelte
+++ b/src/lib/components/AchievementsPanel.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-  import { slide } from 'svelte/transition';
-  import { quintOut } from 'svelte/easing';
+  import { slide } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
   import {
     achievementsStore,
     achievementProgress,
     achievementCategories,
-  } from '$lib/stores/achievements';
-  import type { Achievement } from '$lib/types/achievements';
+  } from "$lib/stores/achievements";
+  import type { Achievement } from "$lib/types/achievements";
 
   interface Props {
     isOpen: boolean;
     onClose?: () => void;
   }
 
-  const { isOpen = $bindable(false), onClose } = $props<Props>();
+  const { isOpen = $bindable(false), onClose }: Props = $props();
   let selectedCategory = $state<string | null>(null);
 
   const achievementsState = $derived($achievementsStore);
@@ -21,33 +21,45 @@
 
   function getRarityColor(rarity: string): string {
     switch (rarity) {
-      case 'legendary': return 'text-yellow-500 dark:text-yellow-400';
-      case 'epic': return 'text-purple-500 dark:text-purple-400';
-      case 'rare': return 'text-blue-500 dark:text-blue-400';
-      default: return 'text-green-500 dark:text-green-400';
+      case "legendary":
+        return "text-yellow-500 dark:text-yellow-400";
+      case "epic":
+        return "text-purple-500 dark:text-purple-400";
+      case "rare":
+        return "text-blue-500 dark:text-blue-400";
+      default:
+        return "text-green-500 dark:text-green-400";
     }
   }
 
   function getRarityBg(rarity: string): string {
     switch (rarity) {
-      case 'legendary': return 'bg-yellow-500/10';
-      case 'epic': return 'bg-purple-500/10';
-      case 'rare': return 'bg-blue-500/10';
-      default: return 'bg-green-500/10';
+      case "legendary":
+        return "bg-yellow-500/10";
+      case "epic":
+        return "bg-purple-500/10";
+      case "rare":
+        return "bg-blue-500/10";
+      default:
+        return "bg-green-500/10";
     }
   }
 
   function formatDate(date: Date | undefined): string {
-    if (!date) return '';
-    return new Date(date).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
+    if (!date) return "";
+    return new Date(date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
     });
   }
 
   function getAchievementsForCategory(categoryIds: string[]): Achievement[] {
-    return categoryIds.map(id => achievementsState.achievements[id as keyof typeof achievementsState.achievements]).filter(Boolean);
+    return categoryIds
+      .map(
+        (id) => achievementsState.achievements[id as keyof typeof achievementsState.achievements]
+      )
+      .filter(Boolean);
   }
 </script>
 
@@ -56,7 +68,7 @@
   <div
     class="fixed inset-0 bg-black/50 z-40"
     onclick={onClose}
-    onkeydown={(e) => e.key === 'Escape' && onClose()}
+    onkeydown={(e) => e.key === "Escape" && onClose?.()}
     role="button"
     tabindex="-1"
     aria-label="Close achievements panel"
@@ -66,7 +78,7 @@
   <div
     class="fixed left-0 top-0 h-full w-96 bg-[var(--bg-primary)] border-r border-[var(--border-color)]
            shadow-2xl z-50 flex flex-col"
-    transition:slide={{ duration: 300, easing: quintOut, axis: 'x' }}
+    transition:slide={{ duration: 300, easing: quintOut, axis: "x" }}
   >
     <!-- Header -->
     <div class="p-6 border-b border-[var(--border-color)]">
@@ -74,18 +86,26 @@
         <h2 class="text-2xl font-bold text-[var(--text-primary)]">Achievements</h2>
         <button
           onclick={onClose}
-          onkeydown={(e) => e.key === 'Enter' && onClose()}
+          onkeydown={(e) => e.key === "Enter" && onClose?.()}
           class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+          aria-label="Close achievements panel"
         >
           <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
           </svg>
         </button>
       </div>
 
       <!-- Overall progress -->
       <div class="mt-4">
-        <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
+        <div
+          class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-2"
+        >
           <span>{progress.unlocked} / {progress.total} Unlocked</span>
           <span>{progress.percentage}%</span>
         </div>
@@ -100,14 +120,17 @@
 
     <!-- Categories -->
     <div class="flex-1 overflow-y-auto">
-      {#each achievementCategories as category}
+      {#each achievementCategories as category (category.name)}
         {@const achievements = getAchievementsForCategory(category.ids)}
-        {@const unlockedCount = achievements.filter(a => a.unlocked).length}
+        {@const unlockedCount = achievements.filter((a) => a.unlocked).length}
 
         <div class="border-b border-[var(--border-color)]">
           <button
-            onclick={() => selectedCategory = selectedCategory === category.name ? null : category.name}
-            onkeydown={(e) => e.key === 'Enter' && (selectedCategory = selectedCategory === category.name ? null : category.name)}
+            onclick={() =>
+              (selectedCategory = selectedCategory === category.name ? null : category.name)}
+            onkeydown={(e) =>
+              e.key === "Enter" &&
+              (selectedCategory = selectedCategory === category.name ? null : category.name)}
             class="w-full p-4 text-left hover:bg-[var(--bg-secondary)] transition-colors"
           >
             <div class="flex items-center justify-between">
@@ -120,12 +143,19 @@
                   {unlockedCount} / {achievements.length}
                 </span>
                 <svg
-                  class="w-5 h-5 transition-transform {selectedCategory === category.name ? 'rotate-180' : ''}"
+                  class="w-5 h-5 transition-transform {selectedCategory === category.name
+                    ? 'rotate-180'
+                    : ''}"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
                 >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 9l-7 7-7-7"
+                  ></path>
                 </svg>
               </div>
             </div>
@@ -133,9 +163,11 @@
 
           {#if selectedCategory === category.name}
             <div class="p-4 space-y-3" transition:slide={{ duration: 200, easing: quintOut }}>
-              {#each achievements as achievement}
+              {#each achievements as achievement (achievement.id)}
                 <div
-                  class="p-3 rounded-lg border {achievement.unlocked ? 'border-[var(--border-color)] bg-[var(--bg-secondary)]' : 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 opacity-50'}"
+                  class="p-3 rounded-lg border {achievement.unlocked
+                    ? 'border-[var(--border-color)] bg-[var(--bg-secondary)]'
+                    : 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 opacity-50'}"
                 >
                   <div class="flex items-start gap-3">
                     <!-- Icon -->
@@ -149,7 +181,11 @@
                         <h4 class="font-semibold text-[var(--text-primary)]">
                           {achievement.name}
                         </h4>
-                        <span class="text-xs px-2 py-0.5 rounded-full {getRarityBg(achievement.rarity)} {getRarityColor(achievement.rarity)} capitalize">
+                        <span
+                          class="text-xs px-2 py-0.5 rounded-full {getRarityBg(
+                            achievement.rarity
+                          )} {getRarityColor(achievement.rarity)} capitalize"
+                        >
                           {achievement.rarity}
                         </span>
                       </div>
@@ -171,7 +207,10 @@
                           <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-1.5">
                             <div
                               class="bg-gray-500 h-1.5 rounded-full transition-all duration-300"
-                              style="width: {Math.min((achievement.progress / achievement.maxProgress) * 100, 100)}%"
+                              style="width: {Math.min(
+                                (achievement.progress / achievement.maxProgress) * 100,
+                                100
+                              )}%"
                             ></div>
                           </div>
                         </div>
@@ -193,8 +232,12 @@
         <div class="flex items-center gap-2">
           <span class="text-xl">{achievementsState.lastUnlocked.icon}</span>
           <div>
-            <p class="font-semibold text-[var(--text-primary)]">{achievementsState.lastUnlocked.name}</p>
-            <p class="text-xs text-gray-500">{formatDate(achievementsState.lastUnlocked.unlockedAt)}</p>
+            <p class="font-semibold text-[var(--text-primary)]">
+              {achievementsState.lastUnlocked.name}
+            </p>
+            <p class="text-xs text-gray-500">
+              {formatDate(achievementsState.lastUnlocked.unlockedAt)}
+            </p>
           </div>
         </div>
       </div>
@@ -220,4 +263,4 @@
   :global(.overflow-y-auto::-webkit-scrollbar-thumb:hover) {
     background: var(--accent-primary);
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/components/StatsDisplay.svelte b/src/lib/components/StatsDisplay.svelte
index ad52130..705433d 100644
--- a/src/lib/components/StatsDisplay.svelte
+++ b/src/lib/components/StatsDisplay.svelte
@@ -1,169 +1,168 @@
 <script lang="ts">
-    import { formattedStats } from '$lib/stores/stats';
-    import { fade } from 'svelte/transition';
+  import { formattedStats } from "$lib/stores/stats";
+  import { fade } from "svelte/transition";
 
-    let showToolsBreakdown = false;
+  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">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-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>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>
+      <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="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 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-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 {
+    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);
-    }
+  .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-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-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-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-label {
+    color: var(--text-secondary, #9ca3af);
+  }
 
-    .stat-value {
-        font-family: var(--font-mono, monospace);
-        color: var(--text-primary, #e5e7eb);
-    }
+  .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-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-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>
\ No newline at end of file
+  .model-value {
+    font-family: var(--font-mono, monospace);
+    color: var(--text-primary, #e5e7eb);
+    font-size: 0.75rem;
+  }
+</style>
diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
index 4c0e821..e928349 100644
--- a/src/lib/components/StatusBar.svelte
+++ b/src/lib/components/StatusBar.svelte
@@ -3,7 +3,7 @@
     onToggleAchievements?: () => void;
   }
 
-  const { onToggleAchievements = () => {} } = $props<Props>();
+  const { onToggleAchievements = () => {} }: Props = $props();
 
   import { invoke } from "@tauri-apps/api/core";
   import { getVersion } from "@tauri-apps/api/app";
@@ -188,14 +188,18 @@
     >
       <span class="text-lg">🏆</span>
       {#if progress.unlocked > 0}
-        <span class="absolute -top-1 -right-1 bg-[var(--accent-primary)] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]">
+        <span
+          class="absolute -top-1 -right-1 bg-[var(--accent-primary)] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]"
+        >
           {progress.unlocked}
         </span>
       {/if}
     </button>
     <button
-      onclick={() => showStats = !showStats}
-      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors {showStats ? 'text-[var(--accent-primary)]' : ''}"
+      onclick={() => (showStats = !showStats)}
+      class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors {showStats
+        ? 'text-[var(--accent-primary)]'
+        : ''}"
       title="Usage Stats"
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -269,7 +273,7 @@
 {#if showStats}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="fixed inset-0 z-40" onclick={() => showStats = false}></div>
+  <div class="fixed inset-0 z-40" onclick={() => (showStats = false)}></div>
   <div class="fixed top-14 right-4 z-50">
     <StatsDisplay />
   </div>
diff --git a/src/lib/components/Terminal.svelte b/src/lib/components/Terminal.svelte
index 70be614..cd432f1 100644
--- a/src/lib/components/Terminal.svelte
+++ b/src/lib/components/Terminal.svelte
@@ -84,7 +84,9 @@
     class="terminal-content h-[calc(100%-40px)] overflow-y-auto p-4 font-mono text-sm"
   >
     {#if lines.length === 0}
-      <div class="terminal-waiting italic">Waiting for Claude... Type a message below to start!</div>
+      <div class="terminal-waiting italic">
+        Waiting for Claude... Type a message below to start!
+      </div>
     {:else}
       {#each lines as line (line.id)}
         <div class="terminal-line mb-2 {getLineClass(line.type)}">
diff --git a/src/lib/sounds/achievement.ts b/src/lib/sounds/achievement.ts
index 885c9f3..7826c82 100644
--- a/src/lib/sounds/achievement.ts
+++ b/src/lib/sounds/achievement.ts
@@ -1,19 +1,19 @@
 // Achievement sound player using the notification system
 
-import { soundPlayer } from '$lib/notifications';
-import { NotificationType } from '$lib/notifications/types';
+import { soundPlayer } from "$lib/notifications";
+import { NotificationType } from "$lib/notifications/types";
 
 export function playAchievementSound() {
-    // Use the soundPlayer which respects global notification settings
-    soundPlayer.play(NotificationType.ACHIEVEMENT);
+  // Use the soundPlayer which respects global notification settings
+  soundPlayer.play(NotificationType.ACHIEVEMENT);
 }
 
 // Test function for development
 export function testAchievementSound() {
-    try {
-        playAchievementSound();
-        console.log('Achievement sound played successfully!');
-    } catch (error) {
-        console.error('Error playing achievement sound:', error);
-    }
-}
\ No newline at end of file
+  try {
+    playAchievementSound();
+    console.log("Achievement sound played successfully!");
+  } catch (error) {
+    console.error("Error playing achievement sound:", error);
+  }
+}
diff --git a/src/lib/stores/achievements.ts b/src/lib/stores/achievements.ts
index e0965ea..d749e6c 100644
--- a/src/lib/stores/achievements.ts
+++ b/src/lib/stores/achievements.ts
@@ -1,623 +1,649 @@
-import { writable, derived } from 'svelte/store';
-import { listen } from '@tauri-apps/api/event';
-import { invoke } from '@tauri-apps/api/core';
-import type { Achievement, AchievementUnlockedEvent, AchievementId } from '$lib/types/achievements';
-import { playAchievementSound } from '$lib/sounds/achievement';
+import { writable, derived } from "svelte/store";
+import { listen } from "@tauri-apps/api/event";
+import { invoke } from "@tauri-apps/api/core";
+import type { Achievement, AchievementUnlockedEvent, AchievementId } from "$lib/types/achievements";
+import { playAchievementSound } from "$lib/sounds/achievement";
 
 interface AchievementState {
-    achievements: Record<AchievementId, Achievement>;
-    totalUnlocked: number;
-    lastUnlocked: Achievement | null;
+  achievements: Record<AchievementId, Achievement>;
+  totalUnlocked: number;
+  lastUnlocked: Achievement | null;
 }
 
 // Initial achievement definitions
-const achievementDefinitions: Record<AchievementId, Omit<Achievement, 'unlocked' | 'unlockedAt'>> = {
-    // Token milestones
-    FirstSteps: {
-        id: 'FirstSteps',
-        name: 'First Steps',
-        description: 'Generated your first 1,000 tokens',
-        icon: '👶',
-        rarity: 'common',
-        maxProgress: 1000,
-    },
-    GrowingStrong: {
-        id: 'GrowingStrong',
-        name: 'Growing Strong',
-        description: 'Reached 10,000 tokens total',
-        icon: '🌱',
-        rarity: 'common',
-        maxProgress: 10000,
-    },
-    BlossomingCoder: {
-        id: 'BlossomingCoder',
-        name: 'Blossoming Coder',
-        description: 'Generated 100,000 tokens - you\'re really growing!',
-        icon: '🌸',
-        rarity: 'rare',
-        maxProgress: 100000,
-    },
-    TokenMaster: {
-        id: 'TokenMaster',
-        name: 'Token Master',
-        description: 'One million tokens! You\'re unstoppable!',
-        icon: '👑',
-        rarity: 'legendary',
-        maxProgress: 1000000,
-    },
+const achievementDefinitions: Record<
+  AchievementId,
+  Omit<Achievement, "unlocked" | "unlockedAt">
+> = {
+  // Token milestones
+  FirstSteps: {
+    id: "FirstSteps",
+    name: "First Steps",
+    description: "Generated your first 1,000 tokens",
+    icon: "👶",
+    rarity: "common",
+    maxProgress: 1000,
+  },
+  GrowingStrong: {
+    id: "GrowingStrong",
+    name: "Growing Strong",
+    description: "Reached 10,000 tokens total",
+    icon: "🌱",
+    rarity: "common",
+    maxProgress: 10000,
+  },
+  BlossomingCoder: {
+    id: "BlossomingCoder",
+    name: "Blossoming Coder",
+    description: "Generated 100,000 tokens - you're really growing!",
+    icon: "🌸",
+    rarity: "rare",
+    maxProgress: 100000,
+  },
+  TokenMaster: {
+    id: "TokenMaster",
+    name: "Token Master",
+    description: "One million tokens! You're unstoppable!",
+    icon: "👑",
+    rarity: "legendary",
+    maxProgress: 1000000,
+  },
 
-    // Code generation
-    HelloWorld: {
-        id: 'HelloWorld',
-        name: 'Hello, World!',
-        description: 'Generated your first code block',
-        icon: '👋',
-        rarity: 'common',
-        maxProgress: 1,
-    },
-    CodeWizard: {
-        id: 'CodeWizard',
-        name: 'Code Wizard',
-        description: '100 code blocks generated',
-        icon: '🧙‍♀️',
-        rarity: 'rare',
-        maxProgress: 100,
-    },
-    ThousandBlocks: {
-        id: 'ThousandBlocks',
-        name: 'Thousand Blocks',
-        description: '1,000 code blocks! You\'re a code machine!',
-        icon: '🏗️',
-        rarity: 'epic',
-        maxProgress: 1000,
-    },
+  // Code generation
+  HelloWorld: {
+    id: "HelloWorld",
+    name: "Hello, World!",
+    description: "Generated your first code block",
+    icon: "👋",
+    rarity: "common",
+    maxProgress: 1,
+  },
+  CodeWizard: {
+    id: "CodeWizard",
+    name: "Code Wizard",
+    description: "100 code blocks generated",
+    icon: "🧙‍♀️",
+    rarity: "rare",
+    maxProgress: 100,
+  },
+  ThousandBlocks: {
+    id: "ThousandBlocks",
+    name: "Thousand Blocks",
+    description: "1,000 code blocks! You're a code machine!",
+    icon: "🏗️",
+    rarity: "epic",
+    maxProgress: 1000,
+  },
 
-    // File operations
-    FileManipulator: {
-        id: 'FileManipulator',
-        name: 'File Manipulator',
-        description: 'Edited 10 files',
-        icon: '📝',
-        rarity: 'common',
-        maxProgress: 10,
-    },
-    FileArchitect: {
-        id: 'FileArchitect',
-        name: 'File Architect',
-        description: 'Created or edited 100 files',
-        icon: '🏛️',
-        rarity: 'rare',
-        maxProgress: 100,
-    },
+  // File operations
+  FileManipulator: {
+    id: "FileManipulator",
+    name: "File Manipulator",
+    description: "Edited 10 files",
+    icon: "📝",
+    rarity: "common",
+    maxProgress: 10,
+  },
+  FileArchitect: {
+    id: "FileArchitect",
+    name: "File Architect",
+    description: "Created or edited 100 files",
+    icon: "🏛️",
+    rarity: "rare",
+    maxProgress: 100,
+  },
 
-    // Conversation milestones
-    ConversationStarter: {
-        id: 'ConversationStarter',
-        name: 'Conversation Starter',
-        description: 'Exchanged 10 messages',
-        icon: '💬',
-        rarity: 'common',
-        maxProgress: 10,
-    },
-    ChattyKathy: {
-        id: 'ChattyKathy',
-        name: 'Chatty Kathy',
-        description: '100 messages exchanged',
-        icon: '🗣️',
-        rarity: 'common',
-        maxProgress: 100,
-    },
-    Conversationalist: {
-        id: 'Conversationalist',
-        name: 'Master Conversationalist',
-        description: '1,000 messages! We\'re really connecting!',
-        icon: '💖',
-        rarity: 'rare',
-        maxProgress: 1000,
-    },
+  // Conversation milestones
+  ConversationStarter: {
+    id: "ConversationStarter",
+    name: "Conversation Starter",
+    description: "Exchanged 10 messages",
+    icon: "💬",
+    rarity: "common",
+    maxProgress: 10,
+  },
+  ChattyKathy: {
+    id: "ChattyKathy",
+    name: "Chatty Kathy",
+    description: "100 messages exchanged",
+    icon: "🗣️",
+    rarity: "common",
+    maxProgress: 100,
+  },
+  Conversationalist: {
+    id: "Conversationalist",
+    name: "Master Conversationalist",
+    description: "1,000 messages! We're really connecting!",
+    icon: "💖",
+    rarity: "rare",
+    maxProgress: 1000,
+  },
 
-    // Tool usage
-    Toolsmith: {
-        id: 'Toolsmith',
-        name: 'Toolsmith',
-        description: 'Used 5 different tools',
-        icon: '🔨',
-        rarity: 'common',
-        maxProgress: 5,
-    },
-    ToolMaster: {
-        id: 'ToolMaster',
-        name: 'Tool Master',
-        description: 'Used 10 different tools efficiently',
-        icon: '🛠️',
-        rarity: 'rare',
-        maxProgress: 10,
-    },
+  // Tool usage
+  Toolsmith: {
+    id: "Toolsmith",
+    name: "Toolsmith",
+    description: "Used 5 different tools",
+    icon: "🔨",
+    rarity: "common",
+    maxProgress: 5,
+  },
+  ToolMaster: {
+    id: "ToolMaster",
+    name: "Tool Master",
+    description: "Used 10 different tools efficiently",
+    icon: "🛠️",
+    rarity: "rare",
+    maxProgress: 10,
+  },
 
-    // Time-based achievements
-    EarlyBird: {
-        id: 'EarlyBird',
-        name: 'Early Bird',
-        description: 'Started a session between 5 AM and 7 AM',
-        icon: '🌅',
-        rarity: 'common',
-    },
-    NightOwl: {
-        id: 'NightOwl',
-        name: 'Night Owl',
-        description: 'Coding after midnight',
-        icon: '🦉',
-        rarity: 'common',
-    },
-    AllNighter: {
-        id: 'AllNighter',
-        name: 'All Nighter',
-        description: 'Worked through the night (2 AM - 5 AM)',
-        icon: '🌙',
-        rarity: 'rare',
-    },
-    WeekendWarrior: {
-        id: 'WeekendWarrior',
-        name: 'Weekend Warrior',
-        description: 'Coding on a weekend',
-        icon: '⚔️',
-        rarity: 'common',
-    },
-    DedicatedDeveloper: {
-        id: 'DedicatedDeveloper',
-        name: 'Dedicated Developer',
-        description: 'Coded for 30 days in a row',
-        icon: '🏆',
-        rarity: 'legendary',
-    },
+  // Time-based achievements
+  EarlyBird: {
+    id: "EarlyBird",
+    name: "Early Bird",
+    description: "Started a session between 5 AM and 7 AM",
+    icon: "🌅",
+    rarity: "common",
+  },
+  NightOwl: {
+    id: "NightOwl",
+    name: "Night Owl",
+    description: "Coding after midnight",
+    icon: "🦉",
+    rarity: "common",
+  },
+  AllNighter: {
+    id: "AllNighter",
+    name: "All Nighter",
+    description: "Worked through the night (2 AM - 5 AM)",
+    icon: "🌙",
+    rarity: "rare",
+  },
+  WeekendWarrior: {
+    id: "WeekendWarrior",
+    name: "Weekend Warrior",
+    description: "Coding on a weekend",
+    icon: "⚔️",
+    rarity: "common",
+  },
+  DedicatedDeveloper: {
+    id: "DedicatedDeveloper",
+    name: "Dedicated Developer",
+    description: "Coded for 30 days in a row",
+    icon: "🏆",
+    rarity: "legendary",
+  },
 
-    // Search and exploration
-    Explorer: {
-        id: 'Explorer',
-        name: 'Explorer',
-        description: 'Used search tools 50 times',
-        icon: '🔍',
-        rarity: 'common',
-        maxProgress: 50,
-    },
-    MasterSearcher: {
-        id: 'MasterSearcher',
-        name: 'Master Searcher',
-        description: 'Searched 500 times across files',
-        icon: '🕵️‍♀️',
-        rarity: 'rare',
-        maxProgress: 500,
-    },
+  // Search and exploration
+  Explorer: {
+    id: "Explorer",
+    name: "Explorer",
+    description: "Used search tools 50 times",
+    icon: "🔍",
+    rarity: "common",
+    maxProgress: 50,
+  },
+  MasterSearcher: {
+    id: "MasterSearcher",
+    name: "Master Searcher",
+    description: "Searched 500 times across files",
+    icon: "🕵️‍♀️",
+    rarity: "rare",
+    maxProgress: 500,
+  },
 
-    // Session achievements
-    QuickSession: {
-        id: 'QuickSession',
-        name: 'Quick Session',
-        description: 'Completed a productive session in under 5 minutes',
-        icon: '⚡',
-        rarity: 'common',
-    },
-    FocusedWork: {
-        id: 'FocusedWork',
-        name: 'Focused Work',
-        description: 'Worked for 30 minutes straight',
-        icon: '🎯',
-        rarity: 'common',
-    },
-    DeepDive: {
-        id: 'DeepDive',
-        name: 'Deep Dive',
-        description: 'Worked for 2 hours continuously',
-        icon: '🏊‍♀️',
-        rarity: 'rare',
-    },
-    MarathonSession: {
-        id: 'MarathonSession',
-        name: 'Marathon Session',
-        description: '5+ hour coding session!',
-        icon: '🏃‍♀️',
-        rarity: 'epic',
-    },
+  // Session achievements
+  QuickSession: {
+    id: "QuickSession",
+    name: "Quick Session",
+    description: "Completed a productive session in under 5 minutes",
+    icon: "⚡",
+    rarity: "common",
+  },
+  FocusedWork: {
+    id: "FocusedWork",
+    name: "Focused Work",
+    description: "Worked for 30 minutes straight",
+    icon: "🎯",
+    rarity: "common",
+  },
+  DeepDive: {
+    id: "DeepDive",
+    name: "Deep Dive",
+    description: "Worked for 2 hours continuously",
+    icon: "🏊‍♀️",
+    rarity: "rare",
+  },
+  MarathonSession: {
+    id: "MarathonSession",
+    name: "Marathon Session",
+    description: "5+ hour coding session!",
+    icon: "🏃‍♀️",
+    rarity: "epic",
+  },
 
-    // Special achievements
-    FirstMessage: {
-        id: 'FirstMessage',
-        name: 'First Message',
-        description: 'Sent your first message to Hikari',
-        icon: '✨',
-        rarity: 'common',
-        maxProgress: 1,
-    },
-    FirstTool: {
-        id: 'FirstTool',
-        name: 'First Tool',
-        description: 'Used your first tool',
-        icon: '🔧',
-        rarity: 'common',
-        maxProgress: 1,
-    },
-    FirstCodeBlock: {
-        id: 'FirstCodeBlock',
-        name: 'First Code',
-        description: 'Generated your first code block',
-        icon: '📦',
-        rarity: 'common',
-        maxProgress: 1,
-    },
-    FirstFileEdit: {
-        id: 'FirstFileEdit',
-        name: 'First Edit',
-        description: 'Made your first file edit',
-        icon: '✏️',
-        rarity: 'common',
-        maxProgress: 1,
-    },
-    Polyglot: {
-        id: 'Polyglot',
-        name: 'Polyglot',
-        description: 'Generated code in 5+ languages in one session',
-        icon: '🌍',
-        rarity: 'rare',
-        maxProgress: 5,
-    },
-    SpeedCoder: {
-        id: 'SpeedCoder',
-        name: 'Speed Coder',
-        description: 'Generated 10 code blocks in 10 minutes',
-        icon: '🚀',
-        rarity: 'rare',
-    },
-    ClaudeConnoisseur: {
-        id: 'ClaudeConnoisseur',
-        name: 'Claude Connoisseur',
-        description: 'Used all available Claude models',
-        icon: '🎨',
-        rarity: 'epic',
-        maxProgress: 5, // Adjust based on available models
-    },
-    MarathonCoder: {
-        id: 'MarathonCoder',
-        name: 'Marathon Coder',
-        description: '10,000 tokens in a single session',
-        icon: '🏃‍♂️',
-        rarity: 'epic',
-        maxProgress: 10000,
-    },
+  // Special achievements
+  FirstMessage: {
+    id: "FirstMessage",
+    name: "First Message",
+    description: "Sent your first message to Hikari",
+    icon: "✨",
+    rarity: "common",
+    maxProgress: 1,
+  },
+  FirstTool: {
+    id: "FirstTool",
+    name: "First Tool",
+    description: "Used your first tool",
+    icon: "🔧",
+    rarity: "common",
+    maxProgress: 1,
+  },
+  FirstCodeBlock: {
+    id: "FirstCodeBlock",
+    name: "First Code",
+    description: "Generated your first code block",
+    icon: "📦",
+    rarity: "common",
+    maxProgress: 1,
+  },
+  FirstFileEdit: {
+    id: "FirstFileEdit",
+    name: "First Edit",
+    description: "Made your first file edit",
+    icon: "✏️",
+    rarity: "common",
+    maxProgress: 1,
+  },
+  Polyglot: {
+    id: "Polyglot",
+    name: "Polyglot",
+    description: "Generated code in 5+ languages in one session",
+    icon: "🌍",
+    rarity: "rare",
+    maxProgress: 5,
+  },
+  SpeedCoder: {
+    id: "SpeedCoder",
+    name: "Speed Coder",
+    description: "Generated 10 code blocks in 10 minutes",
+    icon: "🚀",
+    rarity: "rare",
+  },
+  ClaudeConnoisseur: {
+    id: "ClaudeConnoisseur",
+    name: "Claude Connoisseur",
+    description: "Used all available Claude models",
+    icon: "🎨",
+    rarity: "epic",
+    maxProgress: 5, // Adjust based on available models
+  },
+  MarathonCoder: {
+    id: "MarathonCoder",
+    name: "Marathon Coder",
+    description: "10,000 tokens in a single session",
+    icon: "🏃‍♂️",
+    rarity: "epic",
+    maxProgress: 10000,
+  },
 
-    // Relationship & Greetings
-    GoodMorning: {
-        id: 'GoodMorning',
-        name: 'Good Morning!',
-        description: 'Greeted Hikari with a good morning',
-        icon: '🌅',
-        rarity: 'common',
-        maxProgress: 1,
-    },
-    GoodNight: {
-        id: 'GoodNight',
-        name: 'Sweet Dreams',
-        description: 'Said good night to Hikari',
-        icon: '🌙',
-        rarity: 'common',
-        maxProgress: 1,
-    },
-    ThankYou: {
-        id: 'ThankYou',
-        name: 'Grateful Heart',
-        description: 'Thanked Hikari for her help',
-        icon: '🙏',
-        rarity: 'common',
-        maxProgress: 1,
-    },
-    LoveYou: {
-        id: 'LoveYou',
-        name: 'Heartfelt',
-        description: 'Expressed love to Hikari',
-        icon: '💕',
-        rarity: 'rare',
-        maxProgress: 1,
-    },
+  // Relationship & Greetings
+  GoodMorning: {
+    id: "GoodMorning",
+    name: "Good Morning!",
+    description: "Greeted Hikari with a good morning",
+    icon: "🌅",
+    rarity: "common",
+    maxProgress: 1,
+  },
+  GoodNight: {
+    id: "GoodNight",
+    name: "Sweet Dreams",
+    description: "Said good night to Hikari",
+    icon: "🌙",
+    rarity: "common",
+    maxProgress: 1,
+  },
+  ThankYou: {
+    id: "ThankYou",
+    name: "Grateful Heart",
+    description: "Thanked Hikari for her help",
+    icon: "🙏",
+    rarity: "common",
+    maxProgress: 1,
+  },
+  LoveYou: {
+    id: "LoveYou",
+    name: "Heartfelt",
+    description: "Expressed love to Hikari",
+    icon: "💕",
+    rarity: "rare",
+    maxProgress: 1,
+  },
 
-    // Personality & Fun
-    EmojiUser: {
-        id: 'EmojiUser',
-        name: 'Emoji Master',
-        description: 'Used 20+ emojis in messages',
-        icon: '😄',
-        rarity: 'common',
-        maxProgress: 20,
-    },
-    CapsLock: {
-        id: 'CapsLock',
-        name: 'CAPS LOCK',
-        description: 'SENT A MESSAGE IN ALL CAPS',
-        icon: '🔊',
-        rarity: 'common',
-        maxProgress: 1,
-    },
-    QuestionMaster: {
-        id: 'QuestionMaster',
-        name: 'Question Master',
-        description: 'Asked 50 questions',
-        icon: '❓',
-        rarity: 'common',
-        maxProgress: 50,
-    },
-    PleaseAndThankYou: {
-        id: 'PleaseAndThankYou',
-        name: 'Polite Programmer',
-        description: 'Always says please and thank you',
-        icon: '🎩',
-        rarity: 'common',
-        maxProgress: 10,
-    },
+  // Personality & Fun
+  EmojiUser: {
+    id: "EmojiUser",
+    name: "Emoji Master",
+    description: "Used 20+ emojis in messages",
+    icon: "😄",
+    rarity: "common",
+    maxProgress: 20,
+  },
+  CapsLock: {
+    id: "CapsLock",
+    name: "CAPS LOCK",
+    description: "SENT A MESSAGE IN ALL CAPS",
+    icon: "🔊",
+    rarity: "common",
+    maxProgress: 1,
+  },
+  QuestionMaster: {
+    id: "QuestionMaster",
+    name: "Question Master",
+    description: "Asked 50 questions",
+    icon: "❓",
+    rarity: "common",
+    maxProgress: 50,
+  },
+  PleaseAndThankYou: {
+    id: "PleaseAndThankYou",
+    name: "Polite Programmer",
+    description: "Always says please and thank you",
+    icon: "🎩",
+    rarity: "common",
+    maxProgress: 10,
+  },
 
-    // Git & Development
-    CommitMaster: {
-        id: 'CommitMaster',
-        name: 'Commit Master',
-        description: 'Made 100 commits through Hikari',
-        icon: '📝',
-        rarity: 'rare',
-        maxProgress: 100,
-    },
-    PRO: {
-        id: 'PRO',
-        name: 'PRO',
-        description: 'Created 10 pull requests',
-        icon: '🔀',
-        rarity: 'rare',
-        maxProgress: 10,
-    },
-    Reviewer: {
-        id: 'Reviewer',
-        name: 'Code Reviewer',
-        description: 'Reviewed 10 pull requests',
-        icon: '👀',
-        rarity: 'rare',
-        maxProgress: 10,
-    },
-    IssueTracker: {
-        id: 'IssueTracker',
-        name: 'Issue Tracker',
-        description: 'Created 25 issues',
-        icon: '🎯',
-        rarity: 'rare',
-        maxProgress: 25,
-    },
-    GitGuru: {
-        id: 'GitGuru',
-        name: 'Git Guru',
-        description: 'Mastered git operations',
-        icon: '🌲',
-        rarity: 'epic',
-    },
+  // Git & Development
+  CommitMaster: {
+    id: "CommitMaster",
+    name: "Commit Master",
+    description: "Made 100 commits through Hikari",
+    icon: "📝",
+    rarity: "rare",
+    maxProgress: 100,
+  },
+  PRO: {
+    id: "PRO",
+    name: "PRO",
+    description: "Created 10 pull requests",
+    icon: "🔀",
+    rarity: "rare",
+    maxProgress: 10,
+  },
+  Reviewer: {
+    id: "Reviewer",
+    name: "Code Reviewer",
+    description: "Reviewed 10 pull requests",
+    icon: "👀",
+    rarity: "rare",
+    maxProgress: 10,
+  },
+  IssueTracker: {
+    id: "IssueTracker",
+    name: "Issue Tracker",
+    description: "Created 25 issues",
+    icon: "🎯",
+    rarity: "rare",
+    maxProgress: 25,
+  },
+  GitGuru: {
+    id: "GitGuru",
+    name: "Git Guru",
+    description: "Mastered git operations",
+    icon: "🌲",
+    rarity: "epic",
+  },
 
-    // Tool Mastery
-    BashMaster: {
-        id: 'BashMaster',
-        name: 'Bash Master',
-        description: 'Used bash commands 100 times',
-        icon: '💻',
-        rarity: 'rare',
-        maxProgress: 100,
-    },
-    FileExplorer: {
-        id: 'FileExplorer',
-        name: 'File Explorer',
-        description: 'Explored files 100 times',
-        icon: '📂',
-        rarity: 'common',
-        maxProgress: 100,
-    },
-    SearchExpert: {
-        id: 'SearchExpert',
-        name: 'Search Expert',
-        description: 'Mastered advanced search queries',
-        icon: '🔎',
-        rarity: 'rare',
-    },
-    AgentCommander: {
-        id: 'AgentCommander',
-        name: 'Agent Commander',
-        description: 'Used task agents effectively',
-        icon: '🤖',
-        rarity: 'rare',
-    },
-    MCPMaster: {
-        id: 'MCPMaster',
-        name: 'MCP Master',
-        description: 'Mastered MCP tool usage',
-        icon: '🛠️',
-        rarity: 'epic',
-    },
+  // Tool Mastery
+  BashMaster: {
+    id: "BashMaster",
+    name: "Bash Master",
+    description: "Used bash commands 100 times",
+    icon: "💻",
+    rarity: "rare",
+    maxProgress: 100,
+  },
+  FileExplorer: {
+    id: "FileExplorer",
+    name: "File Explorer",
+    description: "Explored files 100 times",
+    icon: "📂",
+    rarity: "common",
+    maxProgress: 100,
+  },
+  SearchExpert: {
+    id: "SearchExpert",
+    name: "Search Expert",
+    description: "Mastered advanced search queries",
+    icon: "🔎",
+    rarity: "rare",
+  },
+  AgentCommander: {
+    id: "AgentCommander",
+    name: "Agent Commander",
+    description: "Used task agents effectively",
+    icon: "🤖",
+    rarity: "rare",
+  },
+  MCPMaster: {
+    id: "MCPMaster",
+    name: "MCP Master",
+    description: "Mastered MCP tool usage",
+    icon: "🛠️",
+    rarity: "epic",
+  },
 };
 
 // Initialize all achievements as locked
-const initialAchievements: Record<AchievementId, Achievement> = {} as Record<AchievementId, Achievement>;
+const initialAchievements: Record<AchievementId, Achievement> = {} as Record<
+  AchievementId,
+  Achievement
+>;
 for (const [id, def] of Object.entries(achievementDefinitions)) {
-    initialAchievements[id as AchievementId] = {
-        ...def,
-        unlocked: false,
-        progress: 0,
-    };
+  initialAchievements[id as AchievementId] = {
+    ...def,
+    unlocked: false,
+    progress: 0,
+  };
 }
 
 // Create the main store
 function createAchievementsStore() {
-    const { subscribe, update } = writable<AchievementState>({
+  const { subscribe, update } = writable<AchievementState>({
+    achievements: initialAchievements,
+    totalUnlocked: 0,
+    lastUnlocked: null,
+  });
+
+  return {
+    subscribe,
+    unlockAchievement: (event: AchievementUnlockedEvent, playSound: boolean = true) => {
+      update((state) => {
+        const achievement = state.achievements[event.achievement.id];
+        if (achievement && !achievement.unlocked) {
+          achievement.unlocked = true;
+          achievement.unlockedAt = event.achievement.unlocked_at
+            ? new Date(event.achievement.unlocked_at)
+            : new Date();
+          state.totalUnlocked++;
+          state.lastUnlocked = achievement;
+
+          // Play achievement sound only for new unlocks, not when loading saved ones
+          if (playSound) {
+            try {
+              playAchievementSound();
+            } catch (error) {
+              console.error("Failed to play achievement sound:", error);
+            }
+          }
+        }
+        return state;
+      });
+    },
+    updateProgress: (id: AchievementId, progress: number) => {
+      update((state) => {
+        const achievement = state.achievements[id];
+        if (achievement) {
+          achievement.progress = progress;
+        }
+        return state;
+      });
+    },
+    reset: () => {
+      update(() => ({
         achievements: initialAchievements,
         totalUnlocked: 0,
         lastUnlocked: null,
-    });
-
-    return {
-        subscribe,
-        unlockAchievement: (event: AchievementUnlockedEvent, playSound: boolean = true) => {
-            update(state => {
-                const achievement = state.achievements[event.achievement.id];
-                if (achievement && !achievement.unlocked) {
-                    achievement.unlocked = true;
-                    achievement.unlockedAt = event.achievement.unlocked_at ? new Date(event.achievement.unlocked_at) : new Date();
-                    state.totalUnlocked++;
-                    state.lastUnlocked = achievement;
-
-                    // Play achievement sound only for new unlocks, not when loading saved ones
-                    if (playSound) {
-                        try {
-                            playAchievementSound();
-                        } catch (error) {
-                            console.error('Failed to play achievement sound:', error);
-                        }
-                    }
-                }
-                return state;
-            });
-        },
-        updateProgress: (id: AchievementId, progress: number) => {
-            update(state => {
-                const achievement = state.achievements[id];
-                if (achievement) {
-                    achievement.progress = progress;
-                }
-                return state;
-            });
-        },
-        reset: () => {
-            update(() => ({
-                achievements: initialAchievements,
-                totalUnlocked: 0,
-                lastUnlocked: null,
-            }));
-        }
-    };
+      }));
+    },
+  };
 }
 
 export const achievementsStore = createAchievementsStore();
 
 // Derived stores for different views
-export const unlockedAchievements = derived(
-    achievementsStore,
-    $store => Object.values($store.achievements).filter(a => a.unlocked)
+export const unlockedAchievements = derived(achievementsStore, ($store) =>
+  Object.values($store.achievements).filter((a) => a.unlocked)
 );
 
-export const lockedAchievements = derived(
-    achievementsStore,
-    $store => Object.values($store.achievements).filter(a => !a.unlocked)
+export const lockedAchievements = derived(achievementsStore, ($store) =>
+  Object.values($store.achievements).filter((a) => !a.unlocked)
 );
 
-export const achievementsByRarity = derived(
-    achievementsStore,
-    $store => {
-        const byRarity: Record<string, Achievement[]> = {
-            common: [],
-            rare: [],
-            epic: [],
-            legendary: [],
-        };
+export const achievementsByRarity = derived(achievementsStore, ($store) => {
+  const byRarity: Record<string, Achievement[]> = {
+    common: [],
+    rare: [],
+    epic: [],
+    legendary: [],
+  };
 
-        for (const achievement of Object.values($store.achievements)) {
-            byRarity[achievement.rarity].push(achievement);
-        }
+  for (const achievement of Object.values($store.achievements)) {
+    byRarity[achievement.rarity].push(achievement);
+  }
 
-        return byRarity;
-    }
-);
+  return byRarity;
+});
 
-export const achievementProgress = derived(
-    achievementsStore,
-    $store => ({
-        unlocked: $store.totalUnlocked,
-        total: Object.keys($store.achievements).length,
-        percentage: Math.round(($store.totalUnlocked / Object.keys($store.achievements).length) * 100),
-    })
-);
+export const achievementProgress = derived(achievementsStore, ($store) => ({
+  unlocked: $store.totalUnlocked,
+  total: Object.keys($store.achievements).length,
+  percentage: Math.round(($store.totalUnlocked / Object.keys($store.achievements).length) * 100),
+}));
 
 // Initialize achievement listener
 export async function initAchievementsListener() {
-    // Listen for achievement unlocked events
-    await listen<AchievementUnlockedEvent>('achievement:unlocked', (event) => {
-        achievementsStore.unlockAchievement(event.payload);
-    });
+  // Listen for achievement unlocked events
+  await listen<AchievementUnlockedEvent>("achievement:unlocked", (event) => {
+    achievementsStore.unlockAchievement(event.payload);
+  });
 
-    // Load saved achievements from persistent storage
-    try {
-        const savedAchievements = await invoke<AchievementUnlockedEvent[]>('load_saved_achievements');
+  // Load saved achievements from persistent storage
+  try {
+    const savedAchievements = await invoke<AchievementUnlockedEvent[]>("load_saved_achievements");
 
-        // Update the store with saved achievements (don't play sounds)
-        for (const event of savedAchievements) {
-            achievementsStore.unlockAchievement(event, false);
-        }
-    } catch (error) {
-        console.error('Failed to load saved achievements:', error);
+    // Update the store with saved achievements (don't play sounds)
+    for (const event of savedAchievements) {
+      achievementsStore.unlockAchievement(event, false);
     }
+  } catch (error) {
+    console.error("Failed to load saved achievements:", error);
+  }
 }
 
 // Export achievement categories for the display panel
 export const achievementCategories = [
-    {
-        name: 'Token Milestones',
-        description: 'Track your token generation progress',
-        ids: ['FirstSteps', 'GrowingStrong', 'BlossomingCoder', 'TokenMaster'] as AchievementId[],
-    },
-    {
-        name: 'Code Generation',
-        description: 'Achievements for generating code',
-        ids: ['HelloWorld', 'CodeWizard', 'ThousandBlocks'] as AchievementId[],
-    },
-    {
-        name: 'File Operations',
-        description: 'Working with files and projects',
-        ids: ['FileManipulator', 'FileArchitect'] as AchievementId[],
-    },
-    {
-        name: 'Conversations',
-        description: 'Building our relationship through chat',
-        ids: ['ConversationStarter', 'ChattyKathy', 'Conversationalist'] as AchievementId[],
-    },
-    {
-        name: 'Tools & Skills',
-        description: 'Mastering different tools',
-        ids: ['Toolsmith', 'ToolMaster'] as AchievementId[],
-    },
-    {
-        name: 'Time-Based',
-        description: 'When you code matters too!',
-        ids: ['EarlyBird', 'NightOwl', 'AllNighter', 'WeekendWarrior', 'DedicatedDeveloper'] as AchievementId[],
-    },
-    {
-        name: 'Search & Explore',
-        description: 'Finding what you need',
-        ids: ['Explorer', 'MasterSearcher'] as AchievementId[],
-    },
-    {
-        name: 'Session Records',
-        description: 'Your coding session achievements',
-        ids: ['QuickSession', 'FocusedWork', 'DeepDive', 'MarathonSession', 'MarathonCoder'] as AchievementId[],
-    },
-    {
-        name: 'Relationship & Greetings',
-        description: 'Our special moments together',
-        ids: ['GoodMorning', 'GoodNight', 'ThankYou', 'LoveYou'] as AchievementId[],
-    },
-    {
-        name: 'Personality & Fun',
-        description: 'Express yourself!',
-        ids: ['EmojiUser', 'CapsLock', 'QuestionMaster', 'PleaseAndThankYou'] as AchievementId[],
-    },
-    {
-        name: 'Git & Development',
-        description: 'Version control mastery',
-        ids: ['CommitMaster', 'PRO', 'Reviewer', 'IssueTracker', 'GitGuru'] as AchievementId[],
-    },
-    {
-        name: 'Tool Mastery',
-        description: 'Master of all tools',
-        ids: ['BashMaster', 'FileExplorer', 'SearchExpert', 'AgentCommander', 'MCPMaster'] as AchievementId[],
-    },
-    {
-        name: 'Special',
-        description: 'Unique accomplishments',
-        ids: ['FirstMessage', 'FirstTool', 'FirstCodeBlock', 'FirstFileEdit', 'Polyglot', 'SpeedCoder', 'ClaudeConnoisseur'] as AchievementId[],
-    },
-];
\ No newline at end of file
+  {
+    name: "Token Milestones",
+    description: "Track your token generation progress",
+    ids: ["FirstSteps", "GrowingStrong", "BlossomingCoder", "TokenMaster"] as AchievementId[],
+  },
+  {
+    name: "Code Generation",
+    description: "Achievements for generating code",
+    ids: ["HelloWorld", "CodeWizard", "ThousandBlocks"] as AchievementId[],
+  },
+  {
+    name: "File Operations",
+    description: "Working with files and projects",
+    ids: ["FileManipulator", "FileArchitect"] as AchievementId[],
+  },
+  {
+    name: "Conversations",
+    description: "Building our relationship through chat",
+    ids: ["ConversationStarter", "ChattyKathy", "Conversationalist"] as AchievementId[],
+  },
+  {
+    name: "Tools & Skills",
+    description: "Mastering different tools",
+    ids: ["Toolsmith", "ToolMaster"] as AchievementId[],
+  },
+  {
+    name: "Time-Based",
+    description: "When you code matters too!",
+    ids: [
+      "EarlyBird",
+      "NightOwl",
+      "AllNighter",
+      "WeekendWarrior",
+      "DedicatedDeveloper",
+    ] as AchievementId[],
+  },
+  {
+    name: "Search & Explore",
+    description: "Finding what you need",
+    ids: ["Explorer", "MasterSearcher"] as AchievementId[],
+  },
+  {
+    name: "Session Records",
+    description: "Your coding session achievements",
+    ids: [
+      "QuickSession",
+      "FocusedWork",
+      "DeepDive",
+      "MarathonSession",
+      "MarathonCoder",
+    ] as AchievementId[],
+  },
+  {
+    name: "Relationship & Greetings",
+    description: "Our special moments together",
+    ids: ["GoodMorning", "GoodNight", "ThankYou", "LoveYou"] as AchievementId[],
+  },
+  {
+    name: "Personality & Fun",
+    description: "Express yourself!",
+    ids: ["EmojiUser", "CapsLock", "QuestionMaster", "PleaseAndThankYou"] as AchievementId[],
+  },
+  {
+    name: "Git & Development",
+    description: "Version control mastery",
+    ids: ["CommitMaster", "PRO", "Reviewer", "IssueTracker", "GitGuru"] as AchievementId[],
+  },
+  {
+    name: "Tool Mastery",
+    description: "Master of all tools",
+    ids: [
+      "BashMaster",
+      "FileExplorer",
+      "SearchExpert",
+      "AgentCommander",
+      "MCPMaster",
+    ] as AchievementId[],
+  },
+  {
+    name: "Special",
+    description: "Unique accomplishments",
+    ids: [
+      "FirstMessage",
+      "FirstTool",
+      "FirstCodeBlock",
+      "FirstFileEdit",
+      "Polyglot",
+      "SpeedCoder",
+      "ClaudeConnoisseur",
+    ] as AchievementId[],
+  },
+];
diff --git a/src/lib/stores/stats.ts b/src/lib/stores/stats.ts
index f456a74..c8ffc58 100644
--- a/src/lib/stores/stats.ts
+++ b/src/lib/stores/stats.ts
@@ -1,130 +1,130 @@
-import { writable, derived } from 'svelte/store';
-import { listen } from '@tauri-apps/api/event';
-import { invoke } from '@tauri-apps/api/core';
+import { writable, derived } from "svelte/store";
+import { listen } from "@tauri-apps/api/event";
+import { invoke } from "@tauri-apps/api/core";
 
 export interface UsageStats {
-    total_input_tokens: number;
-    total_output_tokens: number;
-    total_cost_usd: number;
-    session_input_tokens: number;
-    session_output_tokens: number;
-    session_cost_usd: number;
-    model: string | null;
+  total_input_tokens: number;
+  total_output_tokens: number;
+  total_cost_usd: number;
+  session_input_tokens: number;
+  session_output_tokens: number;
+  session_cost_usd: number;
+  model: string | null;
 
-    // New fields
-    messages_exchanged: number;
-    session_messages_exchanged: number;
-    code_blocks_generated: number;
-    session_code_blocks_generated: number;
-    files_edited: number;
-    session_files_edited: number;
-    files_created: number;
-    session_files_created: number;
-    tools_usage: Record<string, number>;
-    session_tools_usage: Record<string, number>;
-    session_duration_seconds: number;
+  // New fields
+  messages_exchanged: number;
+  session_messages_exchanged: number;
+  code_blocks_generated: number;
+  session_code_blocks_generated: number;
+  files_edited: number;
+  session_files_edited: number;
+  files_created: number;
+  session_files_created: number;
+  tools_usage: Record<string, number>;
+  session_tools_usage: Record<string, number>;
+  session_duration_seconds: number;
 }
 
 // Main stats store
 export const stats = writable<UsageStats>({
-    total_input_tokens: 0,
-    total_output_tokens: 0,
-    total_cost_usd: 0,
-    session_input_tokens: 0,
-    session_output_tokens: 0,
-    session_cost_usd: 0,
-    model: null,
-    messages_exchanged: 0,
-    session_messages_exchanged: 0,
-    code_blocks_generated: 0,
-    session_code_blocks_generated: 0,
-    files_edited: 0,
-    session_files_edited: 0,
-    files_created: 0,
-    session_files_created: 0,
-    tools_usage: {},
-    session_tools_usage: {},
-    session_duration_seconds: 0,
+  total_input_tokens: 0,
+  total_output_tokens: 0,
+  total_cost_usd: 0,
+  session_input_tokens: 0,
+  session_output_tokens: 0,
+  session_cost_usd: 0,
+  model: null,
+  messages_exchanged: 0,
+  session_messages_exchanged: 0,
+  code_blocks_generated: 0,
+  session_code_blocks_generated: 0,
+  files_edited: 0,
+  session_files_edited: 0,
+  files_created: 0,
+  session_files_created: 0,
+  tools_usage: {},
+  session_tools_usage: {},
+  session_duration_seconds: 0,
 });
 
 // Derived store for formatted display values
 export const formattedStats = derived(stats, ($stats) => {
-    const formatNumber = (num: number) => num.toLocaleString();
-    const formatCost = (cost: number) => `$${cost.toFixed(4)}`;
-    const formatDuration = (seconds: number) => {
-        const hours = Math.floor(seconds / 3600);
-        const minutes = Math.floor((seconds % 3600) / 60);
-        const secs = seconds % 60;
+  const formatNumber = (num: number) => num.toLocaleString();
+  const formatCost = (cost: number) => `$${cost.toFixed(4)}`;
+  const formatDuration = (seconds: number) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
 
-        if (hours > 0) {
-            return `${hours}h ${minutes}m ${secs}s`;
-        } else if (minutes > 0) {
-            return `${minutes}m ${secs}s`;
-        } else {
-            return `${secs}s`;
-        }
-    };
+    if (hours > 0) {
+      return `${hours}h ${minutes}m ${secs}s`;
+    } else if (minutes > 0) {
+      return `${minutes}m ${secs}s`;
+    } else {
+      return `${secs}s`;
+    }
+  };
 
-    return {
-        totalTokens: formatNumber($stats.total_input_tokens + $stats.total_output_tokens),
-        totalInputTokens: formatNumber($stats.total_input_tokens),
-        totalOutputTokens: formatNumber($stats.total_output_tokens),
-        totalCost: formatCost($stats.total_cost_usd),
-        sessionTokens: formatNumber($stats.session_input_tokens + $stats.session_output_tokens),
-        sessionInputTokens: formatNumber($stats.session_input_tokens),
-        sessionOutputTokens: formatNumber($stats.session_output_tokens),
-        sessionCost: formatCost($stats.session_cost_usd),
-        model: $stats.model || 'No model selected',
+  return {
+    totalTokens: formatNumber($stats.total_input_tokens + $stats.total_output_tokens),
+    totalInputTokens: formatNumber($stats.total_input_tokens),
+    totalOutputTokens: formatNumber($stats.total_output_tokens),
+    totalCost: formatCost($stats.total_cost_usd),
+    sessionTokens: formatNumber($stats.session_input_tokens + $stats.session_output_tokens),
+    sessionInputTokens: formatNumber($stats.session_input_tokens),
+    sessionOutputTokens: formatNumber($stats.session_output_tokens),
+    sessionCost: formatCost($stats.session_cost_usd),
+    model: $stats.model || "No model selected",
 
-        // New formatted fields
-        messagesTotal: formatNumber($stats.messages_exchanged),
-        messagesSession: formatNumber($stats.session_messages_exchanged),
-        codeBlocksTotal: formatNumber($stats.code_blocks_generated),
-        codeBlocksSession: formatNumber($stats.session_code_blocks_generated),
-        filesEditedTotal: formatNumber($stats.files_edited),
-        filesEditedSession: formatNumber($stats.session_files_edited),
-        filesCreatedTotal: formatNumber($stats.files_created),
-        filesCreatedSession: formatNumber($stats.session_files_created),
-        sessionDuration: formatDuration($stats.session_duration_seconds),
-        toolsUsage: $stats.tools_usage,
-        sessionToolsUsage: $stats.session_tools_usage,
-    };
+    // New formatted fields
+    messagesTotal: formatNumber($stats.messages_exchanged),
+    messagesSession: formatNumber($stats.session_messages_exchanged),
+    codeBlocksTotal: formatNumber($stats.code_blocks_generated),
+    codeBlocksSession: formatNumber($stats.session_code_blocks_generated),
+    filesEditedTotal: formatNumber($stats.files_edited),
+    filesEditedSession: formatNumber($stats.session_files_edited),
+    filesCreatedTotal: formatNumber($stats.files_created),
+    filesCreatedSession: formatNumber($stats.session_files_created),
+    sessionDuration: formatDuration($stats.session_duration_seconds),
+    toolsUsage: $stats.tools_usage,
+    sessionToolsUsage: $stats.session_tools_usage,
+  };
 });
 
 // Note: Cost calculation is now done in the Rust backend
 
 // Initialize stats listener
 export async function initStatsListener() {
-    // Listen for stats updates from the backend
-    await listen('claude:stats', (event) => {
-        const payload = event.payload as { stats: UsageStats };
-        const { stats: newStats } = payload;
+  // Listen for stats updates from the backend
+  await listen("claude:stats", (event) => {
+    const payload = event.payload as { stats: UsageStats };
+    const { stats: newStats } = payload;
 
-        // The backend already tracks all totals - just set the stats directly
-        stats.set(newStats);
-    });
+    // The backend already tracks all totals - just set the stats directly
+    stats.set(newStats);
+  });
 
-    // Load initial stats from backend
-    try {
-        const initialStats = await invoke<UsageStats>('get_usage_stats');
-        stats.set(initialStats);
-    } catch (error) {
-        console.error('Failed to load initial stats:', error);
-    }
+  // Load initial stats from backend
+  try {
+    const initialStats = await invoke<UsageStats>("get_usage_stats");
+    stats.set(initialStats);
+  } catch (error) {
+    console.error("Failed to load initial stats:", error);
+  }
 }
 
 // Reset session stats (call when starting new session)
 export function resetSessionStats() {
-    stats.update(current => ({
-        ...current,
-        session_input_tokens: 0,
-        session_output_tokens: 0,
-        session_cost_usd: 0,
-        session_messages_exchanged: 0,
-        session_code_blocks_generated: 0,
-        session_files_edited: 0,
-        session_files_created: 0,
-        session_tools_usage: {},
-        session_duration_seconds: 0,
-    }));
-}
\ No newline at end of file
+  stats.update((current) => ({
+    ...current,
+    session_input_tokens: 0,
+    session_output_tokens: 0,
+    session_cost_usd: 0,
+    session_messages_exchanged: 0,
+    session_code_blocks_generated: 0,
+    session_files_edited: 0,
+    session_files_created: 0,
+    session_tools_usage: {},
+    session_duration_seconds: 0,
+  }));
+}
diff --git a/src/lib/types/achievements.ts b/src/lib/types/achievements.ts
index 3485491..254ae1a 100644
--- a/src/lib/types/achievements.ts
+++ b/src/lib/types/achievements.ts
@@ -1,93 +1,93 @@
 export interface AchievementUnlockedEvent {
-    achievement: {
-        id: AchievementId;
-        name: string;
-        description: string;
-        icon: string;
-        unlocked_at: string | null;
-    };
-}
-
-export type AchievementId =
-    // Token Milestones
-    | 'FirstSteps'      // 1,000 tokens
-    | 'GrowingStrong'   // 10,000 tokens
-    | 'BlossomingCoder' // 100,000 tokens
-    | 'TokenMaster'     // 1,000,000 tokens
-    // Code Generation
-    | 'HelloWorld'      // First code block
-    | 'CodeWizard'      // 100 code blocks
-    | 'ThousandBlocks'  // 1,000 code blocks
-    // File Operations
-    | 'FileManipulator' // 10 files edited
-    | 'FileArchitect'   // 100 files edited
-    // Conversation milestones
-    | 'ConversationStarter' // 10 messages
-    | 'ChattyKathy'     // 100 messages
-    | 'Conversationalist' // 1,000 messages
-    // Tool usage
-    | 'Toolsmith'       // 5 different tools
-    | 'ToolMaster'      // 10 different tools
-    // Time-based achievements
-    | 'EarlyBird'       // Started session 5-7 AM
-    | 'NightOwl'        // Coding after midnight
-    | 'AllNighter'      // Worked 2-5 AM
-    | 'WeekendWarrior'  // Coding on weekend
-    | 'DedicatedDeveloper' // 30 days in a row
-    // Search and exploration
-    | 'Explorer'        // 50 searches
-    | 'MasterSearcher'  // 500 searches
-    // Session achievements
-    | 'QuickSession'    // Productive session < 5 min
-    | 'FocusedWork'     // 30 min session
-    | 'DeepDive'        // 2 hour session
-    | 'MarathonSession' // 5+ hour session
-    // Special achievements
-    | 'FirstMessage'    // First message sent
-    | 'FirstTool'       // First tool used
-    | 'FirstCodeBlock'  // First code generated
-    | 'FirstFileEdit'   // First file edit
-    | 'Polyglot'        // 5+ languages in one session
-    | 'SpeedCoder'      // 10 code blocks in 10 minutes
-    | 'ClaudeConnoisseur' // Used all Claude models
-    | 'MarathonCoder'   // 10k tokens in one session
-    // Relationship & Greetings
-    | 'GoodMorning'     // Said good morning
-    | 'GoodNight'       // Said good night
-    | 'ThankYou'        // Said thank you
-    | 'LoveYou'         // Said love you
-    // Personality & Fun
-    | 'EmojiUser'       // Used 20+ emojis
-    | 'CapsLock'        // ALL CAPS MESSAGE
-    | 'QuestionMaster'  // Asked 50 questions
-    | 'PleaseAndThankYou' // Polite user
-    // Git & Development
-    | 'CommitMaster'    // 100 commits
-    | 'PRO'             // Created 10 PRs
-    | 'Reviewer'        // Reviewed 10 PRs
-    | 'IssueTracker'    // Created 25 issues
-    | 'GitGuru'         // Used git commands
-    // Tool Mastery
-    | 'BashMaster'      // Used bash 100 times
-    | 'FileExplorer'    // Searched files 100 times
-    | 'SearchExpert'    // Advanced searches
-    | 'AgentCommander'  // Used task agents
-    | 'MCPMaster';      // Used MCP tools
-
-export interface Achievement {
+  achievement: {
     id: AchievementId;
     name: string;
     description: string;
     icon: string;
-    rarity: 'common' | 'rare' | 'epic' | 'legendary';
-    unlocked: boolean;
-    unlockedAt?: Date;
-    progress?: number;
-    maxProgress?: number;
+    unlocked_at: string | null;
+  };
+}
+
+export type AchievementId =
+  // Token Milestones
+  | "FirstSteps" // 1,000 tokens
+  | "GrowingStrong" // 10,000 tokens
+  | "BlossomingCoder" // 100,000 tokens
+  | "TokenMaster" // 1,000,000 tokens
+  // Code Generation
+  | "HelloWorld" // First code block
+  | "CodeWizard" // 100 code blocks
+  | "ThousandBlocks" // 1,000 code blocks
+  // File Operations
+  | "FileManipulator" // 10 files edited
+  | "FileArchitect" // 100 files edited
+  // Conversation milestones
+  | "ConversationStarter" // 10 messages
+  | "ChattyKathy" // 100 messages
+  | "Conversationalist" // 1,000 messages
+  // Tool usage
+  | "Toolsmith" // 5 different tools
+  | "ToolMaster" // 10 different tools
+  // Time-based achievements
+  | "EarlyBird" // Started session 5-7 AM
+  | "NightOwl" // Coding after midnight
+  | "AllNighter" // Worked 2-5 AM
+  | "WeekendWarrior" // Coding on weekend
+  | "DedicatedDeveloper" // 30 days in a row
+  // Search and exploration
+  | "Explorer" // 50 searches
+  | "MasterSearcher" // 500 searches
+  // Session achievements
+  | "QuickSession" // Productive session < 5 min
+  | "FocusedWork" // 30 min session
+  | "DeepDive" // 2 hour session
+  | "MarathonSession" // 5+ hour session
+  // Special achievements
+  | "FirstMessage" // First message sent
+  | "FirstTool" // First tool used
+  | "FirstCodeBlock" // First code generated
+  | "FirstFileEdit" // First file edit
+  | "Polyglot" // 5+ languages in one session
+  | "SpeedCoder" // 10 code blocks in 10 minutes
+  | "ClaudeConnoisseur" // Used all Claude models
+  | "MarathonCoder" // 10k tokens in one session
+  // Relationship & Greetings
+  | "GoodMorning" // Said good morning
+  | "GoodNight" // Said good night
+  | "ThankYou" // Said thank you
+  | "LoveYou" // Said love you
+  // Personality & Fun
+  | "EmojiUser" // Used 20+ emojis
+  | "CapsLock" // ALL CAPS MESSAGE
+  | "QuestionMaster" // Asked 50 questions
+  | "PleaseAndThankYou" // Polite user
+  // Git & Development
+  | "CommitMaster" // 100 commits
+  | "PRO" // Created 10 PRs
+  | "Reviewer" // Reviewed 10 PRs
+  | "IssueTracker" // Created 25 issues
+  | "GitGuru" // Used git commands
+  // Tool Mastery
+  | "BashMaster" // Used bash 100 times
+  | "FileExplorer" // Searched files 100 times
+  | "SearchExpert" // Advanced searches
+  | "AgentCommander" // Used task agents
+  | "MCPMaster"; // Used MCP tools
+
+export interface Achievement {
+  id: AchievementId;
+  name: string;
+  description: string;
+  icon: string;
+  rarity: "common" | "rare" | "epic" | "legendary";
+  unlocked: boolean;
+  unlockedAt?: Date;
+  progress?: number;
+  maxProgress?: number;
 }
 
 export interface AchievementCategory {
-    name: string;
-    description: string;
-    achievements: Achievement[];
-}
\ No newline at end of file
+  name: string;
+  description: string;
+  achievements: Achievement[];
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c7cbaf4..bf80e6e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <div class="app-container h-screen w-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden">
-  <StatusBar onToggleAchievements={() => achievementPanelOpen = !achievementPanelOpen} />
+  <StatusBar onToggleAchievements={() => (achievementPanelOpen = !achievementPanelOpen)} />
 
   <main class="flex-1 flex overflow-hidden">
     <!-- Left panel: Character display -->
@@ -56,7 +56,10 @@
   <PermissionModal />
   <ConfigSidebar />
   <AchievementNotification />
-  <AchievementsPanel bind:isOpen={achievementPanelOpen} onClose={() => achievementPanelOpen = false} />
+  <AchievementsPanel
+    bind:isOpen={achievementPanelOpen}
+    onClose={() => (achievementPanelOpen = false)}
+  />
 </div>
 
 <style>
diff --git a/src/routes/test-achievement/+page.svelte b/src/routes/test-achievement/+page.svelte
index 4dc0b5b..e7800ab 100644
--- a/src/routes/test-achievement/+page.svelte
+++ b/src/routes/test-achievement/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { testAchievementSound } from '$lib/sounds/achievement';
-  import { invoke } from '@tauri-apps/api/core';
+  import { testAchievementSound } from "$lib/sounds/achievement";
+  import { invoke } from "@tauri-apps/api/core";
 
   async function testSound() {
     testAchievementSound();
@@ -9,12 +9,12 @@
   async function triggerAchievement() {
     // This will trigger an achievement that hasn't been unlocked yet
     try {
-      await invoke('check_achievements', {
-        eventType: 'message_sent',
-        data: {}
+      await invoke("check_achievements", {
+        eventType: "message_sent",
+        data: {},
       });
     } catch (error) {
-      console.error('Failed to trigger achievement:', error);
+      console.error("Failed to trigger achievement:", error);
     }
   }
 </script>
@@ -38,8 +38,8 @@
     </button>
 
     <p class="text-sm text-gray-600 dark:text-gray-400 mt-4">
-      Click the first button to test just the sound effect.<br>
+      Click the first button to test just the sound effect.<br />
       Click the second button to trigger a real achievement (if any are available to unlock).
     </p>
   </div>
-</div>
\ No newline at end of file
+</div>