From 085b88107f6448ae50d54b91292c914c3bf5d943 Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Mon, 23 Mar 2026 22:03:12 +0100
Subject: [PATCH] fix(electrobun): replace object-creating store calls in
 template with $derived locals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

getMountedGroupIds()/getFilteredProjects()/getActiveGroup()/getTotalCost/Tokens
all created new objects per render → Svelte 5 saw 'changed' → re-render → new
objects → infinite effect_update_depth_exceeded loop.

Fix: compute once in $derived variables, reference stable locals in template.
---
 ui-electrobun/src/mainview/App.svelte | 582 ++++++++++++++++++--------
 1 file changed, 414 insertions(+), 168 deletions(-)

diff --git a/ui-electrobun/src/mainview/App.svelte b/ui-electrobun/src/mainview/App.svelte
index 2ff5549..d995ff7 100644
--- a/ui-electrobun/src/mainview/App.svelte
+++ b/ui-electrobun/src/mainview/App.svelte
@@ -1,62 +1,101 @@
 <script lang="ts">
-  import { onMount, untrack } from 'svelte';
-  import ProjectCard from './ProjectCard.svelte';
-  import SettingsDrawer from './SettingsDrawer.svelte';
-  import CommandPalette from './CommandPalette.svelte';
-  import ToastContainer from './ToastContainer.svelte';
-  import NotifDrawer from './NotifDrawer.svelte';
-  import StatusBar from './StatusBar.svelte';
-  import SearchOverlay from './SearchOverlay.svelte';
-  import SplashScreen from './SplashScreen.svelte';
-  import ProjectWizard from './ProjectWizard.svelte';
-  import { themeStore } from './theme-store.svelte.ts';
-  import { fontStore } from './font-store.svelte.ts';
-  import { keybindingStore } from './keybinding-store.svelte.ts';
-  import { setAgentToastFn } from './agent-store.svelte.ts';
-  import { appRpc } from './rpc.ts';
-  import { initI18n, getDir, getLocale } from './i18n.svelte.ts';
+  import { onMount, untrack } from "svelte";
+  import ProjectCard from "./ProjectCard.svelte";
+  import SettingsDrawer from "./SettingsDrawer.svelte";
+  import CommandPalette from "./CommandPalette.svelte";
+  import ToastContainer from "./ToastContainer.svelte";
+  import NotifDrawer from "./NotifDrawer.svelte";
+  import StatusBar from "./StatusBar.svelte";
+  import SearchOverlay from "./SearchOverlay.svelte";
+  import SplashScreen from "./SplashScreen.svelte";
+  import ProjectWizard from "./ProjectWizard.svelte";
+  import { themeStore } from "./theme-store.svelte.ts";
+  import { fontStore } from "./font-store.svelte.ts";
+  import { keybindingStore } from "./keybinding-store.svelte.ts";
+  import { setAgentToastFn } from "./agent-store.svelte.ts";
+  import { appRpc } from "./rpc.ts";
+  import { initI18n, getDir, getLocale } from "./i18n.svelte.ts";
   import {
-    getProjects, getGroups, getActiveGroupId,
-    getMountedGroupIds, getActiveGroup, getFilteredProjects,
+    getProjects,
+    getGroups,
+    getActiveGroupId,
+    getActiveGroup, getFilteredProjects,
     getTotalCostDerived, getTotalTokensDerived,
-    setActiveGroup, addProjectFromWizard, deleteProject,
-    cloneCountForProject, handleClone, addGroup as wsAddGroup,
-    loadGroupsFromDb, loadProjectsFromDb, trackAllProjects,
+    setActiveGroup,
+    addProjectFromWizard,
+    deleteProject,
+    cloneCountForProject,
+    handleClone,
+    addGroup as wsAddGroup,
+    loadGroupsFromDb,
+    loadProjectsFromDb,
+    trackAllProjects,
     type WizardResult,
-  } from './workspace-store.svelte.ts';
+  } from "./workspace-store.svelte.ts";
   import {
-    getNotifications, clearAll as clearNotifications, getNotifCount,
-  } from './notifications-store.svelte.ts';
+    getNotifications,
+    clearAll as clearNotifications,
+    getNotifCount,
+  } from "./notifications-store.svelte.ts";
   import {
-    getSettingsOpen, setSettingsOpen, toggleSettings,
-    getPaletteOpen, setPaletteOpen, togglePalette,
-    getSearchOpen, toggleSearch,
-    getNotifDrawerOpen, setNotifDrawerOpen, toggleNotifDrawer,
-    getShowWizard, setShowWizard,
-    getProjectToDelete, setProjectToDelete,
-    getShowAddGroup, setShowAddGroup, toggleAddGroup,
-    getNewGroupName, setNewGroupName, resetAddGroupForm,
+    getSettingsOpen,
+    setSettingsOpen,
+    toggleSettings,
+    getPaletteOpen,
+    setPaletteOpen,
+    togglePalette,
+    getSearchOpen,
+    toggleSearch,
+    getNotifDrawerOpen,
+    setNotifDrawerOpen,
+    toggleNotifDrawer,
+    getShowWizard,
+    setShowWizard,
+    getProjectToDelete,
+    setProjectToDelete,
+    getShowAddGroup,
+    setShowAddGroup,
+    toggleAddGroup,
+    getNewGroupName,
+    setNewGroupName,
+    resetAddGroupForm,
     toggleWizard,
-  } from './ui-store.svelte.ts';
+  } from "./ui-store.svelte.ts";
 
   // ── Local view-only state (not shared across components) ────
-  let appReady      = $state(false);
-  let sessionStart  = $state(Date.now());
+  let appReady = $state(false);
+  let sessionStart = $state(Date.now());
+
+  // ── Stable derived values (avoid creating new objects in template → prevents infinite loops) ──
+  function isProjectMounted(groupId: string): boolean {
+    return groupId === getActiveGroupId();
+  }
+  let filteredProjects = $derived(getFilteredProjects());
+  let activeGroup = $derived(getActiveGroup());
+  let totalTokens = $derived(getTotalTokensDerived());
+  let totalCost = $derived(getTotalCostDerived());
 
   // ── Blink timer (untracked — must not create reactive dependency) ────
   let blinkVisible = $state(true);
   let _blinkId: ReturnType<typeof setInterval>;
   $effect(() => {
-    _blinkId = setInterval(() => { untrack(() => { blinkVisible = !blinkVisible; }); }, 500);
+    _blinkId = setInterval(() => {
+      untrack(() => {
+        blinkVisible = !blinkVisible;
+      });
+    }, 500);
     return () => clearInterval(_blinkId);
   });
 
   // ── Session duration (untracked) ──────────────────────────────
-  let sessionDuration = $state('0m');
+  let sessionDuration = $state("0m");
   $effect(() => {
     function update() {
       const mins = Math.floor((Date.now() - sessionStart) / 60000);
-      untrack(() => { sessionDuration = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`; });
+      untrack(() => {
+        sessionDuration =
+          mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`;
+      });
     }
     update();
     const id = setInterval(update, 10000);
@@ -64,21 +103,41 @@
   });
 
   // ── Window controls ─────────────────────────────────────────
-  function handleClose()    { appRpc.request["window.close"]({}).catch(console.error); }
-  function handleMaximize() { appRpc.request["window.maximize"]({}).catch(console.error); }
-  function handleMinimize() { appRpc.request["window.minimize"]({}).catch(console.error); }
+  function handleClose() {
+    appRpc.request["window.close"]({}).catch(console.error);
+  }
+  function handleMaximize() {
+    appRpc.request["window.maximize"]({}).catch(console.error);
+  }
+  function handleMinimize() {
+    appRpc.request["window.minimize"]({}).catch(console.error);
+  }
 
   // ── Window frame persistence (debounced 500ms) ──────────────
   let frameSaveTimer: ReturnType<typeof setTimeout> | null = null;
   function saveWindowFrame() {
     if (frameSaveTimer) clearTimeout(frameSaveTimer);
     frameSaveTimer = setTimeout(() => {
-      appRpc.request["window.getFrame"]({}).then((frame) => {
-        appRpc.request["settings.set"]({ key: 'win_x',      value: String(frame.x)      }).catch(console.error);
-        appRpc.request["settings.set"]({ key: 'win_y',      value: String(frame.y)      }).catch(console.error);
-        appRpc.request["settings.set"]({ key: 'win_width',  value: String(frame.width)  }).catch(console.error);
-        appRpc.request["settings.set"]({ key: 'win_height', value: String(frame.height) }).catch(console.error);
-      }).catch(console.error);
+      appRpc.request["window.getFrame"]({})
+        .then((frame) => {
+          appRpc.request["settings.set"]({
+            key: "win_x",
+            value: String(frame.x),
+          }).catch(console.error);
+          appRpc.request["settings.set"]({
+            key: "win_y",
+            value: String(frame.y),
+          }).catch(console.error);
+          appRpc.request["settings.set"]({
+            key: "win_width",
+            value: String(frame.width),
+          }).catch(console.error);
+          appRpc.request["settings.set"]({
+            key: "win_height",
+            value: String(frame.height),
+          }).catch(console.error);
+        })
+        .catch(console.error);
     }, 500);
   }
 
@@ -112,26 +171,35 @@
   // ── Toast ref for agent notifications ───────────────────────
   let toastRef: ToastContainer | undefined;
 
-  function showToast(message: string, variant: 'success' | 'warning' | 'error' | 'info') {
+  function showToast(
+    message: string,
+    variant: "success" | "warning" | "error" | "info",
+  ) {
     toastRef?.addToast(message, variant);
   }
 
   // ── Global error boundary ───────────────────────────────────
   function setupErrorBoundary() {
-    window.addEventListener('unhandledrejection', (e: PromiseRejectionEvent) => {
-      const msg = e.reason instanceof Error ? e.reason.message : String(e.reason);
-      console.error('[unhandled rejection]', e.reason);
-      showToast(`Unhandled error: ${msg.slice(0, 100)}`, 'error');
-      e.preventDefault();
-    });
-    window.addEventListener('error', (e: ErrorEvent) => {
-      console.error('[uncaught error]', e.error);
-      showToast(`Error: ${e.message.slice(0, 100)}`, 'error');
+    window.addEventListener(
+      "unhandledrejection",
+      (e: PromiseRejectionEvent) => {
+        const msg =
+          e.reason instanceof Error ? e.reason.message : String(e.reason);
+        console.error("[unhandled rejection]", e.reason);
+        showToast(`Unhandled error: ${msg.slice(0, 100)}`, "error");
+        e.preventDefault();
+      },
+    );
+    window.addEventListener("error", (e: ErrorEvent) => {
+      console.error("[uncaught error]", e.error);
+      showToast(`Error: ${e.message.slice(0, 100)}`, "error");
     });
   }
 
   // ── DEBUG overlay ───────────────────────────────────────────
-  const DEBUG_ENABLED = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('debug');
+  const DEBUG_ENABLED =
+    typeof window !== "undefined" &&
+    new URLSearchParams(window.location.search).has("debug");
   let debugLog = $state<string[]>([]);
 
   $effect(() => {
@@ -139,25 +207,30 @@
     function debugClick(e: MouseEvent) {
       const el = e.target as HTMLElement;
       const tag = el?.tagName;
-      const cls = (el?.className?.toString?.() ?? '').slice(0, 40);
+      const cls = (el?.className?.toString?.() ?? "").slice(0, 40);
       const elAtPoint = document.elementFromPoint(e.clientX, e.clientY);
       let line = `CLICK ${tag}.${cls} @(${e.clientX},${e.clientY})`;
       if (elAtPoint && elAtPoint !== el) {
         const overTag = (elAtPoint as HTMLElement).tagName;
-        const overCls = ((elAtPoint as HTMLElement).className?.toString?.() ?? '').slice(0, 40);
+        const overCls = (
+          (elAtPoint as HTMLElement).className?.toString?.() ?? ""
+        ).slice(0, 40);
         line += ` OVERLAY: ${overTag}.${overCls}`;
       }
       debugLog = [...debugLog.slice(-8), line];
     }
     function debugDown(e: MouseEvent) {
       const el = e.target as HTMLElement;
-      debugLog = [...debugLog.slice(-8), `DOWN ${el?.tagName}.${(el?.className?.toString?.() ?? '').slice(0, 40)}`];
+      debugLog = [
+        ...debugLog.slice(-8),
+        `DOWN ${el?.tagName}.${(el?.className?.toString?.() ?? "").slice(0, 40)}`,
+      ];
     }
-    document.addEventListener('click', debugClick, true);
-    document.addEventListener('mousedown', debugDown, true);
+    document.addEventListener("click", debugClick, true);
+    document.addEventListener("mousedown", debugDown, true);
     return () => {
-      document.removeEventListener('click', debugClick, true);
-      document.removeEventListener('mousedown', debugDown, true);
+      document.removeEventListener("click", debugClick, true);
+      document.removeEventListener("mousedown", debugDown, true);
     };
   });
 
@@ -177,51 +250,67 @@
       loadProjectsFromDb().catch(console.error),
     ];
 
-    const timeout = new Promise(r => setTimeout(r, 10000));
+    const timeout = new Promise((r) => setTimeout(r, 10000));
     Promise.race([Promise.allSettled(initTasks), timeout]).then(() => {
       appReady = true;
       trackAllProjects();
     });
 
-    keybindingStore.on('palette',  () => { togglePalette(); });
-    keybindingStore.on('settings', () => { toggleSettings(); });
-    keybindingStore.on('group1',   () => setActiveGroup(getGroups()[0]?.id));
-    keybindingStore.on('group2',   () => setActiveGroup(getGroups()[1]?.id));
-    keybindingStore.on('group3',   () => setActiveGroup(getGroups()[2]?.id));
-    keybindingStore.on('group4',   () => setActiveGroup(getGroups()[3]?.id));
-    keybindingStore.on('minimize', () => handleMinimize());
+    keybindingStore.on("palette", () => {
+      togglePalette();
+    });
+    keybindingStore.on("settings", () => {
+      toggleSettings();
+    });
+    keybindingStore.on("group1", () => setActiveGroup(getGroups()[0]?.id));
+    keybindingStore.on("group2", () => setActiveGroup(getGroups()[1]?.id));
+    keybindingStore.on("group3", () => setActiveGroup(getGroups()[2]?.id));
+    keybindingStore.on("group4", () => setActiveGroup(getGroups()[3]?.id));
+    keybindingStore.on("minimize", () => handleMinimize());
 
     function handleSearchShortcut(e: KeyboardEvent) {
-      if (e.ctrlKey && e.shiftKey && e.key === 'F') {
+      if (e.ctrlKey && e.shiftKey && e.key === "F") {
         e.preventDefault();
         toggleSearch();
       }
     }
-    document.addEventListener('keydown', handleSearchShortcut);
+    document.addEventListener("keydown", handleSearchShortcut);
 
     function handlePaletteCommand(e: Event) {
       const detail = (e as CustomEvent).detail;
       switch (detail) {
-        case 'settings': toggleSettings(); break;
-        case 'search': toggleSearch(); break;
-        case 'new-project': setShowWizard(true); break;
-        case 'toggle-sidebar': toggleSettings(); break;
-        default: console.log(`[palette] unhandled command: ${detail}`);
+        case "settings":
+          toggleSettings();
+          break;
+        case "search":
+          toggleSearch();
+          break;
+        case "new-project":
+          setShowWizard(true);
+          break;
+        case "toggle-sidebar":
+          toggleSettings();
+          break;
+        default:
+          console.log(`[palette] unhandled command: ${detail}`);
       }
     }
-    window.addEventListener('palette-command', handlePaletteCommand);
+    window.addEventListener("palette-command", handlePaletteCommand);
 
     const cleanup = keybindingStore.installListener();
     return () => {
       cleanup();
-      document.removeEventListener('keydown', handleSearchShortcut);
-      window.removeEventListener('palette-command', handlePaletteCommand);
+      document.removeEventListener("keydown", handleSearchShortcut);
+      window.removeEventListener("palette-command", handlePaletteCommand);
     };
   });
 </script>
 
 <SplashScreen ready={appReady} />
-<SettingsDrawer open={getSettingsOpen()} onClose={() => setSettingsOpen(false)} />
+<SettingsDrawer
+  open={getSettingsOpen()}
+  onClose={() => setSettingsOpen(false)}
+/>
 <CommandPalette open={getPaletteOpen()} onClose={() => setPaletteOpen(false)} />
 <SearchOverlay open={getSearchOpen()} onClose={() => setSearchOpen(false)} />
 <ToastContainer bind:this={toastRef} />
@@ -232,10 +321,7 @@
   onClose={() => setNotifDrawerOpen(false)}
 />
 
-<div
-  class="app-shell"
-  role="presentation"
->
+<div class="app-shell" role="presentation">
   <!-- Left sidebar icon rail -->
   <aside class="sidebar" role="navigation" aria-label="Primary navigation">
     <!-- AGOR vertical title -->
@@ -278,7 +364,10 @@
           placeholder="Group name"
           value={getNewGroupName()}
           oninput={(e) => setNewGroupName((e.target as HTMLInputElement).value)}
-          onkeydown={(e) => { if (e.key === 'Enter') handleAddGroup(); if (e.key === 'Escape') setShowAddGroup(false); }}
+          onkeydown={(e) => {
+            if (e.key === "Enter") handleAddGroup();
+            if (e.key === "Escape") setShowAddGroup(false);
+          }}
           autofocus
         />
       </div>
@@ -291,8 +380,21 @@
       aria-label="Add project"
       title="Add project"
     >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <line x1="12" y1="5" x2="12" y2="19" /><line
+          x1="5"
+          y1="12"
+          x2="19"
+          y2="12"
+        />
       </svg>
     </button>
 
@@ -307,9 +409,19 @@
       title="Settings (Ctrl+,)"
       data-testid="settings-btn"
     >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <circle cx="12" cy="12" r="3"/>
-        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="3" />
+        <path
+          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+        />
       </svg>
     </button>
   </aside>
@@ -317,54 +429,76 @@
   <!-- Main workspace -->
   <main class="workspace">
     <!-- Project grid -->
-    <div class="project-grid" role="list" aria-label="{getActiveGroup()?.name ?? 'Projects'} projects">
+    <div
+      class="project-grid"
+      role="list"
+      aria-label="{activeGroup?.name ?? 'Projects'} projects"
+    >
       {#each getProjects() as project (project.id)}
-        {#if getMountedGroupIds().has(project.groupId ?? 'dev')}
-        <div role="listitem" style:display={(project.groupId ?? 'dev') === getActiveGroupId() ? 'flex' : 'none'}>
-          <ProjectCard
-            id={project.id}
-            name={project.name}
-            cwd={project.cwd}
-            accent={project.accent}
-            provider={project.provider}
-            profile={project.profile}
-            model={project.model}
-            contextPct={project.contextPct}
-            burnRate={project.burnRate}
-            {blinkVisible}
-            clonesAtMax={cloneCountForProject(project.id) >= 3}
-            onClone={handleClone}
-            worktreeBranch={project.worktreeBranch}
-            cloneOf={project.cloneOf}
-          />
-        </div>
+        {#if isProjectMounted(project.groupId ?? "dev")}
+          <div
+            role="listitem"
+            style:display={(project.groupId ?? "dev") === getActiveGroupId()
+              ? "flex"
+              : "none"}
+          >
+            <ProjectCard
+              id={project.id}
+              name={project.name}
+              cwd={project.cwd}
+              accent={project.accent}
+              provider={project.provider}
+              profile={project.profile}
+              model={project.model}
+              contextPct={project.contextPct}
+              burnRate={project.burnRate}
+              {blinkVisible}
+              clonesAtMax={cloneCountForProject(project.id) >= 3}
+              onClone={handleClone}
+              worktreeBranch={project.worktreeBranch}
+              cloneOf={project.cloneOf}
+            />
+          </div>
         {/if}
       {/each}
 
       <!-- Empty group -->
-      <div class="empty-group" role="listitem"
-        style:display={getFilteredProjects().length === 0 ? 'flex' : 'none'}>
-        <p class="empty-group-text">No projects in {getActiveGroup()?.name ?? 'this group'}</p>
+      <div
+        class="empty-group"
+        role="listitem"
+        style:display={filteredProjects.length === 0 ? "flex" : "none"}
+      >
+        <p class="empty-group-text">
+          No projects in {activeGroup?.name ?? "this group"}
+        </p>
       </div>
 
       <!-- Project wizard overlay (display toggle) -->
-      <div style:display={getShowWizard() ? 'contents' : 'none'}>
+      <div style:display={getShowWizard() ? "contents" : "none"}>
         <ProjectWizard
           onClose={() => setShowWizard(false)}
           onCreated={handleWizardCreated}
           groupId={getActiveGroupId()}
-          groups={getGroups().map(g => ({ id: g.id, name: g.name }))}
-          existingNames={getProjects().map(p => p.name)}
+          groups={getGroups().map((g) => ({ id: g.id, name: g.name }))}
+          existingNames={getProjects().map((p) => p.name)}
         />
       </div>
 
       <!-- Delete project confirmation -->
       {#if getProjectToDelete()}
         <div class="delete-overlay" role="listitem">
-          <p class="delete-text">Delete project "{getProjects().find(p => p.id === getProjectToDelete())?.name}"?</p>
+          <p class="delete-text">
+            Delete project "{getProjects().find(
+              (p) => p.id === getProjectToDelete(),
+            )?.name}"?
+          </p>
           <div class="add-card-actions">
-            <button class="add-cancel" onclick={() => setProjectToDelete(null)}>Cancel</button>
-            <button class="delete-confirm" onclick={confirmDeleteProject}>Delete</button>
+            <button class="add-cancel" onclick={() => setProjectToDelete(null)}
+              >Cancel</button
+            >
+            <button class="delete-confirm" onclick={confirmDeleteProject}
+              >Delete</button
+            >
           </div>
         </div>
       {/if}
@@ -373,10 +507,29 @@
 
   <!-- Right sidebar: window controls + notification bell -->
   <aside class="right-bar" aria-label="Window controls and notifications">
-    <div class="window-controls-vertical" role="toolbar" aria-label="Window controls">
-      <button class="wc-btn close-btn"  onclick={handleClose}    aria-label="Close window"    title="Close">&#10005;</button>
-      <button class="wc-btn"            onclick={handleMaximize} aria-label="Maximize window" title="Maximize">&#9633;</button>
-      <button class="wc-btn"            onclick={handleMinimize} aria-label="Minimize window" title="Minimize">&#9472;</button>
+    <div
+      class="window-controls-vertical"
+      role="toolbar"
+      aria-label="Window controls"
+    >
+      <button
+        class="wc-btn close-btn"
+        onclick={handleClose}
+        aria-label="Close window"
+        title="Close">&#10005;</button
+      >
+      <button
+        class="wc-btn"
+        onclick={handleMaximize}
+        aria-label="Maximize window"
+        title="Maximize">&#9633;</button
+      >
+      <button
+        class="wc-btn"
+        onclick={handleMinimize}
+        aria-label="Minimize window"
+        title="Minimize">&#9472;</button
+      >
     </div>
 
     <div class="right-spacer"></div>
@@ -385,11 +538,23 @@
       class="right-icon notif-btn"
       class:active={getNotifDrawerOpen()}
       onclick={() => toggleNotifDrawer()}
-      aria-label="{getNotifCount() > 0 ? `${getNotifCount()} notifications` : 'Notifications'}"
+      aria-label={getNotifCount() > 0
+        ? `${getNotifCount()} notifications`
+        : "Notifications"}
       title="Notifications"
     >
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path
+          d="M13.73 21a2 2 0 0 1-3.46 0"
+        />
       </svg>
       {#if getNotifCount() > 0}
         <span class="right-badge" aria-hidden="true">{getNotifCount()}</span>
@@ -400,24 +565,32 @@
 
 <!-- Status bar (health-backed) -->
 <StatusBar
-  projectCount={getFilteredProjects().length}
-  totalTokens={getTotalTokensDerived()}
-  totalCost={getTotalCostDerived()}
+  projectCount={filteredProjects.length}
+  {totalTokens}
+  {totalCost}
   {sessionDuration}
-  groupName={getActiveGroup()?.name ?? ''}
+  groupName={activeGroup?.name ?? ""}
 />
 
 {#if DEBUG_ENABLED && debugLog.length > 0}
-<div style="position:fixed;bottom:0;left:0;right:0;background:#000;color:#0f0;font-family:monospace;font-size:10px;padding:4px 8px;z-index:9999;max-height:100px;overflow-y:auto;pointer-events:none;">
-  {#each debugLog as line}
-    <div>{line}</div>
-  {/each}
-</div>
+  <div
+    style="position:fixed;bottom:0;left:0;right:0;background:#000;color:#0f0;font-family:monospace;font-size:10px;padding:4px 8px;z-index:9999;max-height:100px;overflow-y:auto;pointer-events:none;"
+  >
+    {#each debugLog as line}
+      <div>{line}</div>
+    {/each}
+  </div>
 {/if}
 
 <style>
-  :global(body) { overflow: hidden; }
-  :global(#app) { display: flex; flex-direction: column; height: 100vh; }
+  :global(body) {
+    overflow: hidden;
+  }
+  :global(#app) {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
 
   .app-shell {
     flex: 1;
@@ -442,7 +615,7 @@
   .agor-title {
     writing-mode: vertical-rl;
     transform: rotate(180deg);
-    font-family: 'Inter', system-ui, sans-serif;
+    font-family: "Inter", system-ui, sans-serif;
     font-weight: 900;
     font-size: 1.25rem;
     letter-spacing: 0.2em;
@@ -464,7 +637,9 @@
     margin-bottom: 0.125rem;
   }
 
-  .sidebar-spacer { flex: 1; }
+  .sidebar-spacer {
+    flex: 1;
+  }
 
   .group-btn {
     position: relative;
@@ -502,7 +677,11 @@
   .group-btn.active .group-circle {
     border-color: var(--accent, var(--ctp-mauve));
     color: var(--accent, var(--ctp-mauve));
-    background: color-mix(in srgb, var(--accent, var(--ctp-mauve)) 10%, transparent);
+    background: color-mix(
+      in srgb,
+      var(--accent, var(--ctp-mauve)) 10%,
+      transparent
+    );
   }
 
   .group-badge {
@@ -526,13 +705,24 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.15s, color 0.15s;
+    transition:
+      background 0.15s,
+      color 0.15s;
     padding: 0;
   }
 
-  .sidebar-icon:hover  { background: var(--ctp-surface0); color: var(--ctp-text); }
-  .sidebar-icon.active { background: var(--ctp-surface1); color: var(--ctp-text); }
-  .sidebar-icon svg    { width: 1rem; height: 1rem; }
+  .sidebar-icon:hover {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+  }
+  .sidebar-icon.active {
+    background: var(--ctp-surface1);
+    color: var(--ctp-text);
+  }
+  .sidebar-icon svg {
+    width: 1rem;
+    height: 1rem;
+  }
 
   /* ── Main workspace ───────────────────────────────────────── */
   .workspace {
@@ -556,9 +746,16 @@
     align-content: start;
   }
 
-  .project-grid::-webkit-scrollbar { width: 0.375rem; }
-  .project-grid::-webkit-scrollbar-track { background: transparent; }
-  .project-grid::-webkit-scrollbar-thumb { background: var(--ctp-surface1); border-radius: 0.25rem; }
+  .project-grid::-webkit-scrollbar {
+    width: 0.375rem;
+  }
+  .project-grid::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .project-grid::-webkit-scrollbar-thumb {
+    background: var(--ctp-surface1);
+    border-radius: 0.25rem;
+  }
 
   .empty-group {
     grid-column: 1 / -1;
@@ -571,7 +768,10 @@
     color: var(--ctp-overlay0);
   }
 
-  .empty-group-text { font-size: 0.875rem; font-style: italic; }
+  .empty-group-text {
+    font-size: 0.875rem;
+    font-style: italic;
+  }
 
   /* ── Right sidebar ────────────────────────────────────────── */
   .right-bar {
@@ -604,15 +804,25 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.12s, color 0.12s;
+    transition:
+      background 0.12s,
+      color 0.12s;
     padding: 0;
     font-family: var(--ui-font-family);
   }
 
-  .wc-btn:hover      { background: var(--ctp-surface0); color: var(--ctp-text); }
-  .close-btn:hover   { background: var(--ctp-red);      color: var(--ctp-base); }
+  .wc-btn:hover {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+  }
+  .close-btn:hover {
+    background: var(--ctp-red);
+    color: var(--ctp-base);
+  }
 
-  .right-spacer { flex: 1; }
+  .right-spacer {
+    flex: 1;
+  }
 
   .right-icon {
     width: 1.75rem;
@@ -626,13 +836,24 @@
     justify-content: center;
     border-radius: 0.375rem;
     position: relative;
-    transition: color 0.12s, background 0.12s;
+    transition:
+      color 0.12s,
+      background 0.12s;
     padding: 0;
   }
 
-  .right-icon:hover  { background: var(--ctp-surface0); color: var(--ctp-text); }
-  .right-icon.active { background: var(--ctp-surface1); color: var(--ctp-text); }
-  .right-icon svg    { width: 0.875rem; height: 0.875rem; }
+  .right-icon:hover {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+  }
+  .right-icon.active {
+    background: var(--ctp-surface1);
+    color: var(--ctp-text);
+  }
+  .right-icon svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
 
   .right-badge {
     position: absolute;
@@ -669,12 +890,20 @@
     font-family: var(--ui-font-family);
     text-align: center;
   }
-  .add-group-input:focus { outline: none; border-color: var(--ctp-blue); }
+  .add-group-input:focus {
+    outline: none;
+    border-color: var(--ctp-blue);
+  }
 
   /* ── Delete project overlay ──────────────────────────────────── */
-  .add-card-actions { display: flex; gap: 0.375rem; justify-content: flex-end; }
+  .add-card-actions {
+    display: flex;
+    gap: 0.375rem;
+    justify-content: flex-end;
+  }
 
-  .add-cancel, .delete-confirm {
+  .add-cancel,
+  .delete-confirm {
     padding: 0.25rem 0.625rem;
     border-radius: 0.25rem;
     font-size: 0.75rem;
@@ -682,8 +911,15 @@
     font-family: var(--ui-font-family);
   }
 
-  .add-cancel { background: transparent; border: 1px solid var(--ctp-surface1); color: var(--ctp-subtext0); }
-  .add-cancel:hover { background: var(--ctp-surface0); color: var(--ctp-text); }
+  .add-cancel {
+    background: transparent;
+    border: 1px solid var(--ctp-surface1);
+    color: var(--ctp-subtext0);
+  }
+  .add-cancel:hover {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+  }
 
   .delete-overlay {
     grid-column: 1 / -1;
@@ -697,7 +933,17 @@
     border-radius: 0.5rem;
   }
 
-  .delete-text { font-size: 0.875rem; color: var(--ctp-text); margin: 0; }
-  .delete-confirm { background: color-mix(in srgb, var(--ctp-red) 20%, transparent); border: 1px solid var(--ctp-red); color: var(--ctp-red); }
-  .delete-confirm:hover { background: color-mix(in srgb, var(--ctp-red) 35%, transparent); }
+  .delete-text {
+    font-size: 0.875rem;
+    color: var(--ctp-text);
+    margin: 0;
+  }
+  .delete-confirm {
+    background: color-mix(in srgb, var(--ctp-red) 20%, transparent);
+    border: 1px solid var(--ctp-red);
+    color: var(--ctp-red);
+  }
+  .delete-confirm:hover {
+    background: color-mix(in srgb, var(--ctp-red) 35%, transparent);
+  }
 </style>