fix(electrobun): isolate blink state to store, prevent prop-cascade re-renders

Root cause found via bisect: blinkVisible prop changed every 500ms,
causing complete re-render of ALL ProjectCard trees (AgentPane, Terminal,
all tabs) — even display:none content is re-evaluated by Svelte 5.

Fix: blink-store.svelte.ts owns the timer. StatusDot reads directly
from store, not from parent prop. No prop cascades.

Also: replaced $derived with .filter()/.map() (creates new arrays)
with plain functions in ProjectCard to prevent reactive loops.

ui-electrobun/src/mainview/App.svelte

@@ -66,43 +66,19 @@
   let appReady = $state(false);
   let sessionStart = $state(Date.now());
 
-  // ── Stable derived values (avoid creating new objects in template → prevents infinite loops) ──
+  // ── Stable derived values ──
+  // NOTE: ALL derived values use plain function calls — NO $derived()
+  // to prevent Svelte 5 reactive loops when store getters create new refs.
   function isProjectMounted(groupId: string): boolean {
     return groupId === getActiveGroupId();
   }
-  let filteredProjects = $derived(getFilteredProjects());
+  // These are called directly in template — Svelte tracks the inner $state reads
-  let activeGroup = $derived(getActiveGroup());
+  // but doesn't create intermediate $derived objects that could loop.
-  let totalTokens = $derived(getTotalTokensDerived());
-  let totalCost = $derived(getTotalCostDerived());
-  let wizardGroups = $derived(getGroups().map(g => ({ id: g.id, name: g.name })));
-  let wizardExistingNames = $derived(getProjects().map(p => p.name));
 
-  // ── Blink timer (untracked — must not create reactive dependency) ────
+  // Blink is now in blink-store.svelte.ts — no prop passing needed
-  let blinkVisible = $state(true);
-  let _blinkId: ReturnType<typeof setInterval>;
-  $effect(() => {
-    _blinkId = setInterval(() => {
-      untrack(() => {
-        blinkVisible = !blinkVisible;
-      });
-    }, 500);
-    return () => clearInterval(_blinkId);
-  });
 
-  // ── Session duration (untracked) ──────────────────────────────
+  // ── Session duration (plain JS, no reactive system) ──
   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`;
-      });
-    }
-    update();
-    const id = setInterval(update, 10000);
-    return () => clearInterval(id);
-  });
 
   // ── Window controls ─────────────────────────────────────────
   function handleClose() {
@@ -204,37 +180,7 @@
     new URLSearchParams(window.location.search).has("debug");
   let debugLog = $state<string[]>([]);
 
-  $effect(() => {
+  // Debug overlay listeners are set up in onMount, not $effect
-    if (!DEBUG_ENABLED) return;
-    function debugClick(e: MouseEvent) {
-      const el = e.target as HTMLElement;
-      const tag = el?.tagName;
-      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);
-        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)}`,
-      ];
-    }
-    document.addEventListener("click", debugClick, true);
-    document.addEventListener("mousedown", debugDown, true);
-    return () => {
-      document.removeEventListener("click", debugClick, true);
-      document.removeEventListener("mousedown", debugDown, true);
-    };
-  });
 
   // ── i18n: lang/dir sync is handled inside setLocale() — no $effect needed ──
 
@@ -243,6 +189,15 @@
     setAgentToastFn(showToast);
     setupErrorBoundary();
 
+    // Blink + session timers — MUST be in onMount, NOT $effect
+    // $effect interacts with reactive graph and causes cycles
+    // Blink timer is in blink-store — start it here
+    import('./blink-store.svelte.ts').then(m => m.startBlink());
+    const sessionId = setInterval(() => {
+      const mins = Math.floor((Date.now() - sessionStart) / 60000);
+      sessionDuration = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`;
+    }, 10000);
+
     const initTasks = [
       initI18n().catch(console.error),
       themeStore.initTheme(appRpc).catch(console.error),
@@ -299,9 +254,33 @@
     }
     window.addEventListener("palette-command", handlePaletteCommand);
 
+    // Debug overlay (plain listeners, no $effect)
+    let debugCleanup = () => {};
+    if (DEBUG_ENABLED) {
+      function debugClick(e: MouseEvent) {
+        const el = e.target as HTMLElement;
+        const tag = el?.tagName;
+        const cls = (el?.className?.toString?.() ?? '').slice(0, 40);
+        debugLog = [...debugLog.slice(-8), `CLICK ${tag}.${cls} @(${e.clientX},${e.clientY})`];
+      }
+      function debugDown(e: MouseEvent) {
+        const el = e.target as HTMLElement;
+        debugLog = [...debugLog.slice(-8), `DOWN ${el?.tagName}.${(el?.className?.toString?.() ?? '').slice(0, 40)}`];
+      }
+      document.addEventListener('click', debugClick, true);
+      document.addEventListener('mousedown', debugDown, true);
+      debugCleanup = () => {
+        document.removeEventListener('click', debugClick, true);
+        document.removeEventListener('mousedown', debugDown, true);
+      };
+    }
+
     const cleanup = keybindingStore.installListener();
     return () => {
       cleanup();
+      debugCleanup();
+      import('./blink-store.svelte.ts').then(m => m.stopBlink());
+      clearInterval(sessionId);
       document.removeEventListener("keydown", handleSearchShortcut);
       window.removeEventListener("palette-command", handlePaletteCommand);
     };
@@ -434,7 +413,7 @@
     <div
       class="project-grid"
       role="list"
-      aria-label="{activeGroup?.name ?? 'Projects'} projects"
+      aria-label="{getActiveGroup()?.name ?? 'Projects'} projects"
     >
       {#each getProjects() as project (project.id)}
         {#if isProjectMounted(project.groupId ?? "dev")}
@@ -454,7 +433,6 @@
               model={project.model}
               contextPct={project.contextPct}
               burnRate={project.burnRate}
-              {blinkVisible}
               clonesAtMax={cloneCountForProject(project.id) >= 3}
               onClone={handleClone}
               worktreeBranch={project.worktreeBranch}
@@ -468,10 +446,10 @@
       <div
         class="empty-group"
         role="listitem"
-        style:display={filteredProjects.length === 0 ? "flex" : "none"}
+        style:display={getFilteredProjects().length === 0 ? "flex" : "none"}
       >
         <p class="empty-group-text">
-          No projects in {activeGroup?.name ?? "this group"}
+          No projects in {getActiveGroup()?.name ?? "this group"}
         </p>
       </div>
 
@@ -481,8 +459,8 @@
           onClose={() => setShowWizard(false)}
           onCreated={handleWizardCreated}
           groupId={getActiveGroupId()}
-          groups={wizardGroups}
+          groups={getGroups().map(g => ({ id: g.id, name: g.name }))}
-          existingNames={wizardExistingNames}
+          existingNames={getProjects().map(p => p.name)}
         />
       </div>
 
@@ -567,11 +545,11 @@
 
 <!-- Status bar (health-backed) -->
 <StatusBar
-  projectCount={filteredProjects.length}
+  projectCount={getFilteredProjects().length}
-  {totalTokens}
+  totalTokens={getTotalTokensDerived()}
-  {totalCost}
+  totalCost={getTotalCostDerived()}
   {sessionDuration}
-  groupName={activeGroup?.name ?? ""}
+  groupName={getActiveGroup()?.name ?? ""}
 />
 
 {#if DEBUG_ENABLED && debugLog.length > 0}

ui-electrobun/src/mainview/ProjectCard.svelte

@@ -28,7 +28,7 @@
     model?: string;
     contextPct?: number;
     burnRate?: number;
-    blinkVisible?: boolean;
+    // blinkVisible removed — StatusDot reads from blink-store directly
     /** Worktree branch name — set when this is a clone card. */
     worktreeBranch?: string;
     /** ID of parent project — set when this is a clone card. */
@@ -51,7 +51,7 @@
     model = 'claude-opus-4-5',
     contextPct = 0,
     burnRate = 0,
-    blinkVisible = true,
+    // blinkVisible removed
     worktreeBranch,
     cloneOf,
     clonesAtMax = false,
@@ -60,9 +60,13 @@
   }: Props = $props();
 
   // ── Agent session (reactive from store) ──────────────────────────
+  // CRITICAL: Use shared constants for fallback values. Creating new [] or {}
+  // inside $derived causes infinite loops because each evaluation returns a
+  // new reference → Svelte thinks the value changed → re-renders → new ref → loop.
+  const EMPTY_MESSAGES: AgentMessage[] = [];
   let session = $derived(getSession(id));
   let agentStatus: AgentStatus = $derived(session?.status ?? 'idle');
-  let agentMessages: AgentMessage[] = $derived(session?.messages ?? []);
+  let agentMessages: AgentMessage[] = $derived(session?.messages ?? EMPTY_MESSAGES);
   let agentCost = $derived(session?.costUsd ?? 0);
   let agentTokens = $derived((session?.inputTokens ?? 0) + (session?.outputTokens ?? 0));
   let agentModel = $derived(session?.model ?? model);
@@ -83,19 +87,25 @@
   );
 
   // File references from tool_call messages
-  let fileRefs = $derived(
+  // NOTE: Do NOT use $derived with .filter()/.map() — creates new arrays every
-    agentMessages
+  // evaluation, which Svelte interprets as "changed" → re-render → new arrays → loop.
+  // Instead, compute these as plain functions called in template (no caching).
+  function getFileRefs(): string[] {
+    return agentMessages
       .filter((m) => m.role === 'tool-call' && m.toolPath)
       .map((m) => m.toolPath!)
       .filter((p, i, arr) => arr.indexOf(p) === i)
-      .slice(0, 20)
+      .slice(0, 20);
-  );
+  }
 
-  let turnCount = $derived(agentMessages.filter((m) => m.role === 'user' || m.role === 'assistant').length);
+  function getTurnCount(): number {
+    return agentMessages.filter((m) => m.role === 'user' || m.role === 'assistant').length;
+  }
 
-  // ── Demo messages (fallback when no real session) ────────────────
+  // ── Display messages (no $derived — avoids new ref on re-render) ──
-  const demoMessages: AgentMessage[] = [];
+  function getDisplayMessages(): AgentMessage[] {
-  let displayMessages = $derived(agentMessages.length > 0 ? agentMessages : demoMessages);
+    return agentMessages.length > 0 ? agentMessages : EMPTY_MESSAGES;
+  }
 
   // ── Clone dialog state ──────────────────────────────────────────
   let showCloneDialog = $state(false);
@@ -160,7 +170,7 @@
   <!-- Header -->
   <header class="project-header">
     <div class="status-dot-wrap" aria-label="Status: {agentStatus}">
-      <StatusDot status={agentStatus} blinkOff={agentStatus === 'running' && !blinkVisible} />
+      <StatusDot status={agentStatus} />
     </div>
 
     <span class="project-name" title={name}>{name}</span>
@@ -267,7 +277,7 @@
       aria-label="Model"
     >
       <AgentPane
-        messages={displayMessages}
+        messages={getDisplayMessages()}
         status={agentStatus}
         costUsd={agentCost}
         tokens={agentTokens}
@@ -323,7 +333,7 @@
             </div>
             <div class="ctx-stat">
               <span class="ctx-stat-label">Turns</span>
-              <span class="ctx-stat-value">{turnCount}</span>
+              <span class="ctx-stat-value">{getTurnCount()}</span>
             </div>
           </div>
           <div class="ctx-meter-wrap" title="{computedContextPct}% of {contextLimit.toLocaleString()} tokens">
@@ -332,10 +342,10 @@
               class:meter-danger={computedContextPct >= 90}
             ></div>
           </div>
-          {#if fileRefs.length > 0}
+          {#if getFileRefs().length > 0}
           <div class="ctx-turn-list">
-            <div class="ctx-section-label">File references ({fileRefs.length})</div>
+            <div class="ctx-section-label">File references ({getFileRefs().length})</div>
-            {#each fileRefs as ref}
+            {#each getFileRefs() as ref}
               <div class="ctx-turn-row">
                 <span class="ctx-turn-preview" title={ref}>{ref}</span>
               </div>
@@ -344,7 +354,7 @@
           {/if}
           <div class="ctx-turn-list">
             <div class="ctx-section-label">Recent turns</div>
-            {#each displayMessages.slice(-10) as msg}
+            {#each getDisplayMessages().slice(-10) as msg}
               <div class="ctx-turn-row">
                 <span class="ctx-turn-role ctx-role-{msg.role}">{msg.role}</span>
                 <span class="ctx-turn-preview">{msg.content.slice(0, 60)}{msg.content.length > 60 ? '...' : ''}</span>

ui-electrobun/src/mainview/blink-store.svelte.ts

@@ -0,0 +1,28 @@
+/**
+ * Blink store — global blink state for status dots.
+ *
+ * StatusDot reads this directly. No component receives blink as a prop,
+ * preventing cascading re-renders of entire ProjectCard trees every 500ms.
+ */
+
+let _visible = $state(true);
+let _intervalId: ReturnType<typeof setInterval> | undefined;
+
+export function getBlinkVisible(): boolean {
+  return _visible;
+}
+
+export function startBlink(): void {
+  if (_intervalId) return;
+  _intervalId = setInterval(() => {
+    _visible = !_visible;
+  }, 500);
+}
+
+export function stopBlink(): void {
+  if (_intervalId) {
+    clearInterval(_intervalId);
+    _intervalId = undefined;
+  }
+  _visible = true;
+}

ui-electrobun/src/mainview/ui/StatusDot.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
+  import { getBlinkVisible } from '../blink-store.svelte.ts';
+
   type DotStatus = 'running' | 'idle' | 'done' | 'error' | 'stalled' | 'inactive';
 
   interface Props {
     status: DotStatus;
-    /** Hide on blink phase (for running pulse). */
-    blinkOff?: boolean;
     /** Dot diameter in rem. Default 0.625. */
     size?: number;
   }
 
-  let { status, blinkOff = false, size = 0.625 }: Props = $props();
+  let { status, size = 0.625 }: Props = $props();
+
+  // Read blink state from global store — NOT from parent prop.
+  // This prevents cascading re-renders of the entire ProjectCard tree.
 </script>
 
 <span
   class="status-dot {status}"
-  class:blink-off={status === 'running' && blinkOff}
+  class:blink-off={status === 'running' && !getBlinkVisible()}
   style="width: {size}rem; height: {size}rem;"
   role="img"
   aria-label={status}
@@ -26,6 +29,7 @@
     border-radius: 50%;
     background: var(--ctp-overlay0);
     flex-shrink: 0;
+    transition: opacity 0.15s;
   }
 
   .status-dot.running  { background: var(--ctp-green); }