perf: prevent thread status churn and memoize shell UI

Author: Dimillian

memory/decisions.md

@@ -295,3 +295,10 @@ Type: decision
 Event: Settings reported missing Tailscale CLI even when installed because GUI runtime PATH did not include shell-resolved aliases/paths.
 Action: Added Tailscale binary candidate resolution (`PATH` first, then standard install paths including macOS app bundle path) before status checks.
 Rule: Desktop CLI integrations must not rely on shell aliases or login-shell PATH alone; include deterministic install-path fallbacks.
+
+## 2026-02-07 21:24
+Context: Composer typing lag while non-active threads stream updates
+Type: decision
+Event: Thread status actions (`markProcessing`, `markUnread`, `markReviewing`) were creating new reducer state even when values were unchanged, and composer/sidebar surfaces lacked memo boundaries against unrelated parent re-renders.
+Action: Added no-op guards in `useThreadsReducer` for unchanged thread-status transitions and wrapped `Composer`/`Sidebar` in `React.memo` to prevent unnecessary rerenders on unrelated app-state updates.
+Rule: Streaming/event reducers must return previous state for no-op status transitions, and high-churn UI shells should be memoized to isolate typing/input responsiveness.

src/features/app/components/Sidebar.tsx

@@ -6,7 +6,7 @@ import type {
   WorkspaceInfo,
 } from "../../../types";
 import { createPortal } from "react-dom";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { RefObject } from "react";
 import { FolderOpen } from "lucide-react";
 import Copy from "lucide-react/dist/esm/icons/copy";
@@ -103,7 +103,7 @@ type SidebarProps = {
   onWorkspaceDrop: (event: React.DragEvent<HTMLElement>) => void;
 };
 
-export function Sidebar({
+export const Sidebar = memo(function Sidebar({
   workspaces,
   groupedWorkspaces,
   hasWorkspaceGroups,
@@ -699,4 +699,6 @@ export function Sidebar({
       />
     </aside>
   );
-}
+});
+
+Sidebar.displayName = "Sidebar";

src/features/composer/components/Composer.tsx

@@ -1,4 +1,5 @@
 import {
+  memo,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -132,7 +133,7 @@ const DEFAULT_EDITOR_SETTINGS: ComposerEditorSettings = {
 };
 const CARET_ANCHOR_GAP = 8;
 
-export function Composer({
+export const Composer = memo(function Composer({
   onSend,
   onQueue,
   onStop,
@@ -725,4 +726,6 @@ export function Composer({
       />
     </footer>
   );
-}
+});
+
+Composer.displayName = "Composer";

src/features/threads/hooks/useThreadsReducer.test.ts

@@ -167,6 +167,67 @@ describe("threadReducer", () => {
     expect(stopped.threadStatusById["thread-1"]?.lastDurationMs).toBe(600);
   });
 
+  it("does not churn state for repeated processing=true updates", () => {
+    const processingState = threadReducer(
+      {
+        ...initialState,
+        threadStatusById: {
+          "thread-1": {
+            isProcessing: true,
+            hasUnread: false,
+            isReviewing: false,
+            processingStartedAt: 1000,
+            lastDurationMs: null,
+          },
+        },
+      },
+      {
+        type: "markProcessing",
+        threadId: "thread-1",
+        isProcessing: true,
+        timestamp: 1200,
+      },
+    );
+
+    expect(processingState).toBe(
+      threadReducer(processingState, {
+        type: "markProcessing",
+        threadId: "thread-1",
+        isProcessing: true,
+        timestamp: 1400,
+      }),
+    );
+  });
+
+  it("does not churn state for unchanged unread/review flags", () => {
+    const base = {
+      ...initialState,
+      threadStatusById: {
+        "thread-1": {
+          isProcessing: false,
+          hasUnread: true,
+          isReviewing: true,
+          processingStartedAt: null,
+          lastDurationMs: 300,
+        },
+      },
+    };
+
+    const unread = threadReducer(base, {
+      type: "markUnread",
+      threadId: "thread-1",
+      hasUnread: true,
+    });
+    expect(unread).toBe(base);
+
+    const reviewing = threadReducer(base, {
+      type: "markReviewing",
+      threadId: "thread-1",
+      isReviewing: true,
+    });
+    expect(reviewing).toBe(base);
+  });
+
   it("tracks request user input queue", () => {
     const request = {
       workspace_id: "ws-1",

src/features/threads/hooks/useThreadsReducer.ts

@@ -528,37 +528,62 @@ export function threadReducer(state: ThreadState, action: ThreadAction): ThreadS
       const wasProcessing = previous?.isProcessing ?? false;
       const startedAt = previous?.processingStartedAt ?? null;
       const lastDurationMs = previous?.lastDurationMs ?? null;
+      const hasUnread = previous?.hasUnread ?? false;
+      const isReviewing = previous?.isReviewing ?? false;
       if (action.isProcessing) {
+        const nextStartedAt =
+          wasProcessing && startedAt ? startedAt : action.timestamp;
+        const nextStatus: ThreadActivityStatus = {
+          isProcessing: true,
+          hasUnread,
+          isReviewing,
+          processingStartedAt: nextStartedAt,
+          lastDurationMs,
+        };
+        if (
+          previous &&
+          previous.isProcessing === nextStatus.isProcessing &&
+          previous.hasUnread === nextStatus.hasUnread &&
+          previous.isReviewing === nextStatus.isReviewing &&
+          previous.processingStartedAt === nextStatus.processingStartedAt &&
+          previous.lastDurationMs === nextStatus.lastDurationMs
+        ) {
+          return state;
+        }
         return {
           ...state,
           threadStatusById: {
             ...state.threadStatusById,
-            [action.threadId]: {
-              isProcessing: true,
-              hasUnread: previous?.hasUnread ?? false,
-              isReviewing: previous?.isReviewing ?? false,
-              processingStartedAt:
-                wasProcessing && startedAt ? startedAt : action.timestamp,
-              lastDurationMs,
-            },
+            [action.threadId]: nextStatus,
           },
         };
       }
       const nextDuration =
         wasProcessing && startedAt
           ? Math.max(0, action.timestamp - startedAt)
           : lastDurationMs ?? null;
+      const nextStatus: ThreadActivityStatus = {
+        isProcessing: false,
+        hasUnread,
+        isReviewing,
+        processingStartedAt: null,
+        lastDurationMs: nextDuration,
+      };
+      if (
+        previous &&
+        previous.isProcessing === nextStatus.isProcessing &&
+        previous.hasUnread === nextStatus.hasUnread &&
+        previous.isReviewing === nextStatus.isReviewing &&
+        previous.processingStartedAt === nextStatus.processingStartedAt &&
+        previous.lastDurationMs === nextStatus.lastDurationMs
+      ) {
+        return state;
+      }
       return {
         ...state,
         threadStatusById: {
           ...state.threadStatusById,
-          [action.threadId]: {
-            isProcessing: false,
-            hasUnread: previous?.hasUnread ?? false,
-            isReviewing: previous?.isReviewing ?? false,
-            processingStartedAt: null,
-            lastDurationMs: nextDuration,
-          },
+          [action.threadId]: nextStatus,
         },
       };
     }
@@ -570,41 +595,60 @@ export function threadReducer(state: ThreadState, action: ThreadAction): ThreadS
           [action.threadId]: action.turnId,
         },
       };
-    case "markReviewing":
+    case "markReviewing": {
+      const previous = state.threadStatusById[action.threadId];
+      const nextStatus: ThreadActivityStatus = {
+        isProcessing: previous?.isProcessing ?? false,
+        hasUnread: previous?.hasUnread ?? false,
+        isReviewing: action.isReviewing,
+        processingStartedAt: previous?.processingStartedAt ?? null,
+        lastDurationMs: previous?.lastDurationMs ?? null,
+      };
+      if (
+        previous &&
+        previous.isProcessing === nextStatus.isProcessing &&
+        previous.hasUnread === nextStatus.hasUnread &&
+        previous.isReviewing === nextStatus.isReviewing &&
+        previous.processingStartedAt === nextStatus.processingStartedAt &&
+        previous.lastDurationMs === nextStatus.lastDurationMs
+      ) {
+        return state;
+      }
       return {
         ...state,
         threadStatusById: {
           ...state.threadStatusById,
-          [action.threadId]: {
-            isProcessing:
-              state.threadStatusById[action.threadId]?.isProcessing ?? false,
-            hasUnread: state.threadStatusById[action.threadId]?.hasUnread ?? false,
-            isReviewing: action.isReviewing,
-            processingStartedAt:
-              state.threadStatusById[action.threadId]?.processingStartedAt ?? null,
-            lastDurationMs:
-              state.threadStatusById[action.threadId]?.lastDurationMs ?? null,
-          },
+          [action.threadId]: nextStatus,
         },
       };
-    case "markUnread":
+    }
+    case "markUnread": {
+      const previous = state.threadStatusById[action.threadId];
+      const nextStatus: ThreadActivityStatus = {
+        isProcessing: previous?.isProcessing ?? false,
+        hasUnread: action.hasUnread,
+        isReviewing: previous?.isReviewing ?? false,
+        processingStartedAt: previous?.processingStartedAt ?? null,
+        lastDurationMs: previous?.lastDurationMs ?? null,
+      };
+      if (
+        previous &&
+        previous.isProcessing === nextStatus.isProcessing &&
+        previous.hasUnread === nextStatus.hasUnread &&
+        previous.isReviewing === nextStatus.isReviewing &&
+        previous.processingStartedAt === nextStatus.processingStartedAt &&
+        previous.lastDurationMs === nextStatus.lastDurationMs
+      ) {
+        return state;
+      }
       return {
         ...state,
         threadStatusById: {
           ...state.threadStatusById,
-          [action.threadId]: {
-            isProcessing:
-              state.threadStatusById[action.threadId]?.isProcessing ?? false,
-            hasUnread: action.hasUnread,
-            isReviewing:
-              state.threadStatusById[action.threadId]?.isReviewing ?? false,
-            processingStartedAt:
-              state.threadStatusById[action.threadId]?.processingStartedAt ?? null,
-            lastDurationMs:
-              state.threadStatusById[action.threadId]?.lastDurationMs ?? null,
-          },
+          [action.threadId]: nextStatus,
         },
       };
+    }
     case "addAssistantMessage": {
       const list = state.itemsByThread[action.threadId] ?? [];
       const message: ConversationItem = {