Refactor web store access to granular Zustand selectors

[juliusmarminge]

Summary

• Replaced broad useStore() reads in core web UI components with granular selector-based subscriptions to reduce unnecessary re-renders.
• Migrated multiple dispatch-style store updates to explicit store action selectors (thread error, branch, terminal, runtime mode, visited state, terminal sizing).
• Updated ChatView command menu highlight handling to local list-based navigation logic (removed hidden CommandInput event forwarding).
• Improved image preview interaction/accessibility by wrapping preview images in buttons and refining expanded-preview overlay click layering.
• Adjusted virtualization wiring in MessagesTimeline to pass a concrete scroll container element instead of a ref object.
• Added local React Doctor skill docs under apps/web/.agents/react-doctor/ for post-change React diagnostics workflow.

Testing

• Not run (not included in provided commit context).
• Suggested concrete checks: run bun lint and bun typecheck in the repo root.
• Suggested concrete checks: verify chat thread interactions in the web app (composer menu navigation, image preview open/close, terminal split/new/close, runtime mode toggle, diff panel turn-strip scrolling).

---

Note

Medium Risk
Broad refactor of core chat UI state management (threads/projects/runtime mode) and terminal UI state extraction/persistence, which can introduce subtle regressions in navigation, terminal behavior, and rendering lifecycles. No auth/security changes, but it touches frequently-used UI paths.

Overview
Replaces the old reducer/context store with a Zustand store exposing explicit actions (e.g. markThreadVisited, setError, setThreadBranch, setRuntimeMode) and updates components to subscribe via granular selectors instead of broad useStore() reads.

Extracts terminal UI state out of Thread into a new persisted useTerminalStateStore (open/height/ids/groups/running activity), wires terminal activity events + orphan cleanup in the root event router, and updates ChatView/Sidebar/ThreadTerminalDrawer to use the new terminal state/actions.

Includes several UX/lifecycle tweaks: composer command-menu highlight navigation no longer relies on hidden input event forwarding, message timeline virtualization now takes a concrete scroll element, image previews are button-wrapped with improved overlay click layering, and DiffPanel turn-strip wheel scrolling is handled via React onWheel with safer scroll-state updates.

^{Written by Cursor Bugbot for commit ae56cd1. This will update automatically on new commits. Configure here.}

Note

Refactor web app state to use granular Zustand selectors and move per-thread terminal UI into a persisted useTerminalStateStore used by Sidebar, ChatView, and routing

Replace context/reducer with a Zustand store exposing selector-based methods for projects/threads and introduce a persisted terminal state store; update Sidebar, ChatView, BranchToolbar, DiffPanel, and routes to consume selectors and terminal actions; remove terminal fields from types.Thread and adjust tests. Key logic lives in store.ts and terminalStateStore.ts.

📍Where to Start

Start with the store migration in store.ts to see selectors and actions, then review terminal state design in terminalStateStore.ts before scanning consumer changes in apps/web/src/components/Sidebar.tsx and apps/web/src/components/ChatView.tsx.

^{Macroscope summarized ae56cd1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/zustand-store-granular-selectors

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 5 issues found in the latest run.

• ✅ Fixed: React onWheel is passive, preventing scroll interception
  • Restored imperative addEventListener with { passive: false } for the wheel handler and removed the React onWheel JSX prop, so event.preventDefault() works correctly for vertical-to-horizontal scroll conversion.
• ✅ Fixed: Arrow key highlight doesn't update Autocomplete visual state
  • Restored the hidden CommandInput element and the original nudgeComposerMenuHighlight implementation that dispatches synthetic KeyboardEvents to drive base-ui's internal highlight state.
• ✅ Fixed: Removed try/finally leaves switching mode flag stuck on error
  • Wrapped the Promise.all call in a try/finally block to guarantee setIsSwitchingRuntimeMode(false) always executes.
• ✅ Fixed: Removed finally blocks risk permanently stuck send state
  • Restored finally blocks in onSend, onRevertUserMessage, and onRespondToApproval to guarantee critical cleanup (sendInFlightRef, setSendPhase, setIsRevertingCheckpoint, setRespondingRequestIds) always executes.
• ✅ Fixed: Unused toggleThreadTerminal action defined in store
  • Removed the unused toggleThreadTerminal action from the AppStore interface, the reducer action type union, the reducer case, and the store implementation.

Or push these changes by commenting:

@cursor push 2cf69ce16e

Preview (2cf69ce16e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -97,7 +97,7 @@
import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
import { Badge } from "./ui/badge";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { Command, CommandItem, CommandList } from "./ui/command";+import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
import {
@@ -389,6 +389,7 @@
triggerKind: ComposerTriggerKind | null;
onHighlightedItemChange: (itemId: string | null) => void;
onSelect: (item: ComposerCommandItem) => void;
+ commandInputRef: React.RefObject<HTMLInputElement | null>;
}) {
return (
<Command
@@ -400,6 +401,9 @@
}}
>
<div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+ <div className="pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0">+ <CommandInput autoFocus={false} ref={props.commandInputRef} />+ </div>
<CommandList className="max-h-64">
{props.items.map((item) => (
<ComposerCommandMenuItem
@@ -504,6 +508,7 @@
const [messagesScrollElement, setMessagesScrollElement] = useState<HTMLDivElement | null>(null);
const shouldAutoScrollRef = useRef(true);
const textareaRef = useRef<HTMLTextAreaElement>(null);
+ const composerCommandInputRef = useRef<HTMLInputElement>(null);
const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
const sendInFlightRef = useRef(false);
const dragDepthRef = useRef(0);
@@ -1128,19 +1133,22 @@
if (runningThreadIds.length === 0) return;
setIsSwitchingRuntimeMode(true);
- await Promise.all(- runningThreadIds.map((threadId) =>- api.orchestration- .dispatchCommand({- type: "thread.session.stop",- commandId: newCommandId(),- threadId,- createdAt: new Date().toISOString(),- })- .catch(() => undefined),- ),- );- setIsSwitchingRuntimeMode(false);+ try {+ await Promise.all(+ runningThreadIds.map((threadId) =>+ api.orchestration+ .dispatchCommand({+ type: "thread.session.stop",+ commandId: newCommandId(),+ threadId,+ createdAt: new Date().toISOString(),+ })+ .catch(() => undefined),+ ),+ );+ } finally {+ setIsSwitchingRuntimeMode(false);+ }
};
useEffect(() => {
@@ -1670,8 +1678,9 @@
activeThread.id,
err instanceof Error ? err.message : "Failed to revert thread state.",
);
+ } finally {+ setIsRevertingCheckpoint(false);
}
- setIsRevertingCheckpoint(false);
},
[activeThread, isConnecting, isRevertingCheckpoint, isSendBusy, phase, setThreadError],
);
@@ -1877,9 +1886,10 @@
threadIdForSend,
err instanceof Error ? err.message : "Failed to send message.",
);
+ } finally {+ sendInFlightRef.current = false;+ setSendPhase("idle");
}
- sendInFlightRef.current = false;- setSendPhase("idle");
};
const onInterrupt = async () => {
@@ -1915,8 +1925,9 @@
activeThreadId,
err instanceof Error ? err.message : "Failed to submit approval decision.",
);
+ } finally {+ setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setThreadErrorAction],
);
@@ -2003,24 +2014,13 @@
const onComposerMenuItemHighlighted = useCallback((itemId: string | null) => {
setComposerHighlightedItemId(itemId);
}, []);
- const nudgeComposerMenuHighlight = useCallback(- (key: "ArrowDown" | "ArrowUp") => {- if (composerMenuItems.length === 0) {- return;- }- const highlightedIndex = composerMenuItems.findIndex(- (item) => item.id === composerHighlightedItemId,- );- const normalizedIndex =- highlightedIndex >= 0 ? highlightedIndex : key === "ArrowDown" ? -1 : 0;- const offset = key === "ArrowDown" ? 1 : -1;- const nextIndex =- (normalizedIndex + offset + composerMenuItems.length) % composerMenuItems.length;- const nextItem = composerMenuItems[nextIndex];- setComposerHighlightedItemId(nextItem?.id ?? null);- },- [composerHighlightedItemId, composerMenuItems],- );+ const nudgeComposerMenuHighlight = useCallback((key: "ArrowDown" | "ArrowUp") => {+ const commandInput = composerCommandInputRef.current;+ if (!commandInput) return;+ commandInput.dispatchEvent(+ new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),+ );+ }, []);
const isComposerMenuLoading =
composerTriggerKind === "path" &&
((pathTriggerQuery.length > 0 && composerPathQueryDebouncer.state.isPending) ||
@@ -2215,6 +2215,7 @@
triggerKind={composerTriggerKind}
onHighlightedItemChange={onComposerMenuItemHighlighted}
onSelect={onSelectComposerItem}
+ commandInputRef={composerCommandInputRef}
/>
</div>
)}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx--- a/apps/web/src/components/DiffPanel.tsx+++ b/apps/web/src/components/DiffPanel.tsx@@ -4,7 +4,7 @@
import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
import { ThreadId, type TurnId } from "@t3tools/contracts";
import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
-import { type WheelEvent as ReactWheelEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
import { cn } from "~/lib/utils";
import { readNativeApi } from "../nativeApi";
@@ -346,7 +346,7 @@
if (!element) return;
element.scrollBy({ left: offset, behavior: "smooth" });
}, []);
- const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {+ const onTurnStripWheel = useCallback((event: WheelEvent) => {
const element = turnStripRef.current;
if (!element) return;
if (element.scrollWidth <= element.clientWidth + 1) return;
@@ -364,6 +364,7 @@
const onScroll = () => updateTurnStripScrollState();
element.addEventListener("scroll", onScroll, { passive: true });
+ element.addEventListener("wheel", onTurnStripWheel, { passive: false });
const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
resizeObserver.observe(element);
@@ -371,9 +372,10 @@
return () => {
window.cancelAnimationFrame(frameId);
element.removeEventListener("scroll", onScroll);
+ element.removeEventListener("wheel", onTurnStripWheel);
resizeObserver.disconnect();
};
- }, [updateTurnStripScrollState]);+ }, [updateTurnStripScrollState, onTurnStripWheel]);
useEffect(() => {
const frameId = window.requestAnimationFrame(() => updateTurnStripScrollState());
@@ -431,7 +433,6 @@
<div
ref={turnStripRef}
className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
- onWheel={onTurnStripWheel}
>
<button
type="button"
diff --git a/apps/web/src/store.ts b/apps/web/src/store.ts--- a/apps/web/src/store.ts+++ b/apps/web/src/store.ts@@ -35,7 +35,6 @@
hasRunningSubprocess: boolean;
}
| { type: "SET_PROJECT_EXPANDED"; projectId: Project["id"]; expanded: boolean }
- | { type: "TOGGLE_THREAD_TERMINAL"; threadId: ThreadId }
| { type: "SET_THREAD_TERMINAL_OPEN"; threadId: ThreadId; open: boolean }
| { type: "SET_THREAD_TERMINAL_HEIGHT"; threadId: ThreadId; height: number }
| { type: "SPLIT_THREAD_TERMINAL"; threadId: ThreadId; terminalId: string }
@@ -71,7 +70,6 @@
hasRunningSubprocess: boolean,
) => void;
setProjectExpanded: (projectId: Project["id"], expanded: boolean) => void;
- toggleThreadTerminal: (threadId: ThreadId) => void;
setThreadTerminalOpen: (threadId: ThreadId, open: boolean) => void;
setThreadTerminalHeight: (threadId: ThreadId, height: number) => void;
splitThreadTerminal: (threadId: ThreadId, terminalId: string) => void;
@@ -621,15 +619,6 @@
),
};
- case "TOGGLE_THREAD_TERMINAL":- return {- ...state,- threads: updateThread(state.threads, action.threadId, (t) => ({- ...t,- terminalOpen: !t.terminalOpen,- })),- };-
case "SET_THREAD_TERMINAL_OPEN":
return {
...state,
@@ -860,7 +849,6 @@
}),
setProjectExpanded: (projectId, expanded) =>
applyAction({ type: "SET_PROJECT_EXPANDED", projectId, expanded }),
- toggleThreadTerminal: (threadId) => applyAction({ type: "TOGGLE_THREAD_TERMINAL", threadId }),
setThreadTerminalOpen: (threadId, open) =>
applyAction({ type: "SET_THREAD_TERMINAL_OPEN", threadId, open }),
setThreadTerminalHeight: (threadId, height) =>

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Sent message not scrolled into view when scrolled up
  • Restored shouldAutoScrollRef.current = true and scrollMessagesToBottom() after setOptimisticUserMessages in onSend, which were accidentally removed during the Zustand refactor in commit c283d2a.

Or push these changes by commenting:

@cursor push 992afef58e

Preview (992afef58e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1735,6 +1735,9 @@
},
]);
+ shouldAutoScrollRef.current = true;+ scrollMessagesToBottom();+
setThreadError(threadIdForSend, null);
promptRef.current = "";
clearComposerDraftContent(threadIdForSend);

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 4 issues found in the latest run.

• ✅ Fixed: Duplicate setRespondingRequestIds cleanup call in approval handler
  • Removed the redundant setRespondingRequestIds call after the try/catch/finally block since the finally block already guarantees cleanup.
• ✅ Fixed: Sidebar terminal status indicators won't live-update
  • Changed Sidebar to subscribe to terminalStateByThreadId (which changes on updates) instead of the stable getTerminalState function reference, and read runningTerminalIds directly from the map.
• ✅ Fixed: Stale terminalState closure in runProjectScript callback
  • Added terminalState to the runProjectScript useCallback dependency array so the callback always uses current terminal state.
• ✅ Fixed: Direct store error setter skips local draft threads
  • Replaced setStoreThreadError with the setThreadError wrapper which handles both server threads and local draft threads.

Or push these changes by commenting:

@cursor push 21ed0a6ca0

Preview (21ed0a6ca0)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1146,6 +1146,7 @@
setThreadError,
storeNewTerminal,
storeSetActiveTerminal,
+ terminalState,
],
);
const persistProjectScripts = useCallback(
@@ -1871,7 +1872,7 @@
const shouldCreateWorktree =
isFirstMessage && envMode === "worktree" && !activeThread.worktreePath;
if (shouldCreateWorktree && !activeThread.branch) {
- setStoreThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");+ setThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");
return;
}
@@ -2091,7 +2092,6 @@
} finally {
setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setStoreThreadError],
);
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -240,7 +240,9 @@
(store) => store.getDraftThreadByProjectId,
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
- const getTerminalState = useTerminalStateStore((state) => state.getTerminalState);+ const terminalStateByThreadId = useTerminalStateStore(+ (state) => state.terminalStateByThreadId,+ );
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -826,7 +828,7 @@
);
const prStatus = prStatusIndicator(prByThreadId.get(thread.id) ?? null);
const terminalStatus = terminalStatusFromRunningIds(
- getTerminalState(thread.id).runningTerminalIds,+ terminalStateByThreadId[thread.id]?.runningTerminalIds ?? [],
);
return (

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Removed memoization defeats memo on MessagesTimeline
  • Restored useMemo for timelineMessages, timelineEntries, and revertTurnCountByUserMessageId, and useCallback for onRevertUserMessage, so that stable references are passed to the memo-wrapped MessagesTimeline and it no longer re-renders on every keystroke.

Or push these changes by commenting:

@cursor push 87361b01eb

Preview (87361b01eb)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -673,7 +673,7 @@
delete attachmentPreviewHandoffTimeoutByMessageIdRef.current[messageId];
}, ATTACHMENT_PREVIEW_HANDOFF_TTL_MS);
}, []);
- const timelineMessages = (() => {+ const timelineMessages = useMemo(() => {
const serverMessages = activeThread?.messages ?? [];
const serverMessagesWithPreviewHandoff =
Object.keys(attachmentPreviewHandoffByMessageId).length === 0
@@ -717,8 +717,11 @@
return serverMessagesWithPreviewHandoff;
}
return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
- })();- const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);+ }, [activeThread?.messages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);+ const timelineEntries = useMemo(+ () => deriveTimelineEntries(timelineMessages, workLogEntries),+ [timelineMessages, workLogEntries],+ );
const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
useTurnDiffSummaries(activeThread);
const turnDiffSummaryByAssistantMessageId = useMemo(() => {
@@ -729,7 +732,7 @@
}
return byMessageId;
}, [turnDiffSummaries]);
- const revertTurnCountByUserMessageId = (() => {+ const revertTurnCountByUserMessageId = useMemo(() => {
const byUserMessageId = new Map<MessageId, number>();
for (let index = 0; index < timelineEntries.length; index += 1) {
const entry = timelineEntries[index];
@@ -760,7 +763,7 @@
}
return byUserMessageId;
- })();+ }, [inferredCheckpointTurnCountByTurnId, timelineEntries, turnDiffSummaryByAssistantMessageId]);
const completionSummary = (() => {
if (!latestTurnSettled) return null;
@@ -2219,13 +2222,16 @@
},
[navigate, threadId],
);
- const onRevertUserMessage = (messageId: MessageId) => {- const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);- if (typeof targetTurnCount !== "number") {- return;- }- void onRevertToTurnCount(targetTurnCount);- };+ const onRevertUserMessage = useCallback(+ (messageId: MessageId) => {+ const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);+ if (typeof targetTurnCount !== "number") {+ return;+ }+ void onRevertToTurnCount(targetTurnCount);+ },+ [revertTurnCountByUserMessageId, onRevertToTurnCount],+ );
// Empty state: no active thread
if (!activeThread) {

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Bugbot Autofix prepared fixes for all 3 issues found in the latest run.

• ✅ Fixed: Terminal toggle no longer auto-focuses terminal panel
  • Added setTerminalFocusRequestId((value) => value + 1) in the !previous && current (opening) branch of the terminal open useEffect, restoring the focus trigger that was lost during the refactor.
• ✅ Fixed: Deleted thread terminal state leaks in localStorage
  • Added clearTerminalState(threadId) call in the Sidebar delete handler and a new removeOrphanedTerminalStates action called after syncServerReadModel to prune stale entries for deleted threads.
• ✅ Fixed: Optimistic message blob URLs leak on unmount
  • Added a ref tracking optimisticUserMessages and revoke their blob URLs via revokeUserMessagePreviewUrls in the existing unmount cleanup effect alongside clearAttachmentPreviewHandoffs.

Or push these changes by commenting:

@cursor push 2a6310194a

Preview (2a6310194a)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -479,6 +479,8 @@
const [isDragOverComposer, setIsDragOverComposer] = useState(false);
const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
+ const optimisticUserMessagesRef = useRef(optimisticUserMessages);+ optimisticUserMessagesRef.current = optimisticUserMessages;
const [localDraftErrorsByThreadId, setLocalDraftErrorsByThreadId] = useState<
Record<ThreadId, string | null>
>({});
@@ -634,6 +636,9 @@
useEffect(() => {
return () => {
clearAttachmentPreviewHandoffs();
+ for (const message of optimisticUserMessagesRef.current) {+ revokeUserMessagePreviewUrls(message);+ }
};
}, [clearAttachmentPreviewHandoffs]);
const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
@@ -1542,6 +1547,7 @@
if (!previous && current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
+ setTerminalFocusRequestId((value) => value + 1);
return;
} else if (previous && !current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -241,6 +241,7 @@
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId);
+ const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState);
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -578,6 +579,7 @@
});
clearComposerDraftForThread(threadId);
clearProjectDraftThreadById(thread.projectId, thread.id);
+ clearTerminalState(threadId);
if (shouldNavigateToFallback) {
if (fallbackThreadId) {
void navigate({
@@ -619,6 +621,7 @@
appSettings.confirmThreadDelete,
clearComposerDraftForThread,
clearProjectDraftThreadById,
+ clearTerminalState,
markThreadUnread,
navigate,
projects,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx--- a/apps/web/src/routes/__root.tsx+++ b/apps/web/src/routes/__root.tsx@@ -145,11 +145,20 @@
let syncing = false;
let pending = false;
+ const removeOrphanedTerminalStates =+ useTerminalStateStore.getState().removeOrphanedTerminalStates;+
const flushSnapshotSync = async (): Promise<void> => {
const snapshot = await api.orchestration.getSnapshot();
if (disposed) return;
latestSequence = Math.max(latestSequence, snapshot.snapshotSequence);
syncServerReadModel(snapshot);
+ const activeThreadIds = new Set(+ snapshot.threads+ .filter((t) => t.deletedAt === null)+ .map((t) => t.id),+ );+ removeOrphanedTerminalStates(activeThreadIds);
if (pending) {
pending = false;
await flushSnapshotSync();
diff --git a/apps/web/src/terminalStateStore.ts b/apps/web/src/terminalStateStore.ts--- a/apps/web/src/terminalStateStore.ts+++ b/apps/web/src/terminalStateStore.ts@@ -461,6 +461,7 @@
hasRunningSubprocess: boolean,
) => void;
clearTerminalState: (threadId: ThreadId) => void;
+ removeOrphanedTerminalStates: (activeThreadIds: Set<ThreadId>) => void;
}
export const useTerminalStateStore = create<TerminalStateStoreState>()(
@@ -505,6 +506,18 @@
),
clearTerminalState: (threadId) =>
updateTerminal(threadId, () => createDefaultThreadTerminalState()),
+ removeOrphanedTerminalStates: (activeThreadIds) =>+ set((state) => {+ const orphanedIds = Object.keys(state.terminalStateByThreadId).filter(+ (id) => !activeThreadIds.has(id as ThreadId),+ );+ if (orphanedIds.length === 0) return state;+ const next = { ...state.terminalStateByThreadId };+ for (const id of orphanedIds) {+ delete next[id as ThreadId];+ }+ return { terminalStateByThreadId: next };+ }),
};
},
{

[juliusmarminge]

@cursor push 2a6310194a

[cursor]

Could not push Autofix changes. The PR branch may have changed since the Autofix ran, or the Autofix commit may no longer exist.

[juliusmarminge]

Summary

• Replaced broad useStore() reads in core web UI components with granular selector-based subscriptions to reduce unnecessary re-renders.
• Migrated multiple dispatch-style store updates to explicit store action selectors (thread error, branch, terminal, runtime mode, visited state, terminal sizing).
• Updated ChatView command menu highlight handling to local list-based navigation logic (removed hidden CommandInput event forwarding).
• Improved image preview interaction/accessibility by wrapping preview images in buttons and refining expanded-preview overlay click layering.
• Adjusted virtualization wiring in MessagesTimeline to pass a concrete scroll container element instead of a ref object.
• Added local React Doctor skill docs under apps/web/.agents/react-doctor/ for post-change React diagnostics workflow.

Testing

• Not run (not included in provided commit context).
• Suggested concrete checks: run bun lint and bun typecheck in the repo root.
• Suggested concrete checks: verify chat thread interactions in the web app (composer menu navigation, image preview open/close, terminal split/new/close, runtime mode toggle, diff panel turn-strip scrolling).

---

Note

Medium Risk
Broad refactor of core chat UI state management (threads/projects/runtime mode) and terminal UI state extraction/persistence, which can introduce subtle regressions in navigation, terminal behavior, and rendering lifecycles. No auth/security changes, but it touches frequently-used UI paths.

Overview
Replaces the old reducer/context store with a Zustand store exposing explicit actions (e.g. markThreadVisited, setError, setThreadBranch, setRuntimeMode) and updates components to subscribe via granular selectors instead of broad useStore() reads.

Extracts terminal UI state out of Thread into a new persisted useTerminalStateStore (open/height/ids/groups/running activity), wires terminal activity events + orphan cleanup in the root event router, and updates ChatView/Sidebar/ThreadTerminalDrawer to use the new terminal state/actions.

Includes several UX/lifecycle tweaks: composer command-menu highlight navigation no longer relies on hidden input event forwarding, message timeline virtualization now takes a concrete scroll element, image previews are button-wrapped with improved overlay click layering, and DiffPanel turn-strip wheel scrolling is handled via React onWheel with safer scroll-state updates.

^{Written by Cursor Bugbot for commit ae56cd1. This will update automatically on new commits. Configure here.}

Note

Refactor web app state to use granular Zustand selectors and move per-thread terminal UI into a persisted useTerminalStateStore used by Sidebar, ChatView, and routing

Replace context/reducer with a Zustand store exposing selector-based methods for projects/threads and introduce a persisted terminal state store; update Sidebar, ChatView, BranchToolbar, DiffPanel, and routes to consume selectors and terminal actions; remove terminal fields from types.Thread and adjust tests. Key logic lives in store.ts and terminalStateStore.ts.

📍Where to Start

Start with the store migration in store.ts to see selectors and actions, then review terminal state design in terminalStateStore.ts before scanning consumer changes in apps/web/src/components/Sidebar.tsx and apps/web/src/components/ChatView.tsx.

^{Macroscope summarized ae56cd1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/zustand-store-granular-selectors

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 5 issues found in the latest run.

• ✅ Fixed: React onWheel is passive, preventing scroll interception
  • Restored imperative addEventListener with { passive: false } for the wheel handler and removed the React onWheel JSX prop, so event.preventDefault() works correctly for vertical-to-horizontal scroll conversion.
• ✅ Fixed: Arrow key highlight doesn't update Autocomplete visual state
  • Restored the hidden CommandInput element and the original nudgeComposerMenuHighlight implementation that dispatches synthetic KeyboardEvents to drive base-ui's internal highlight state.
• ✅ Fixed: Removed try/finally leaves switching mode flag stuck on error
  • Wrapped the Promise.all call in a try/finally block to guarantee setIsSwitchingRuntimeMode(false) always executes.
• ✅ Fixed: Removed finally blocks risk permanently stuck send state
  • Restored finally blocks in onSend, onRevertUserMessage, and onRespondToApproval to guarantee critical cleanup (sendInFlightRef, setSendPhase, setIsRevertingCheckpoint, setRespondingRequestIds) always executes.
• ✅ Fixed: Unused toggleThreadTerminal action defined in store
  • Removed the unused toggleThreadTerminal action from the AppStore interface, the reducer action type union, the reducer case, and the store implementation.

Or push these changes by commenting:

@cursor push 2cf69ce16e

Preview (2cf69ce16e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -97,7 +97,7 @@
import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
import { Badge } from "./ui/badge";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { Command, CommandItem, CommandList } from "./ui/command";+import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
import {
@@ -389,6 +389,7 @@
triggerKind: ComposerTriggerKind | null;
onHighlightedItemChange: (itemId: string | null) => void;
onSelect: (item: ComposerCommandItem) => void;
+ commandInputRef: React.RefObject<HTMLInputElement | null>;
}) {
return (
<Command
@@ -400,6 +401,9 @@
}}
>
<div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+ <div className="pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0">+ <CommandInput autoFocus={false} ref={props.commandInputRef} />+ </div>
<CommandList className="max-h-64">
{props.items.map((item) => (
<ComposerCommandMenuItem
@@ -504,6 +508,7 @@
const [messagesScrollElement, setMessagesScrollElement] = useState<HTMLDivElement | null>(null);
const shouldAutoScrollRef = useRef(true);
const textareaRef = useRef<HTMLTextAreaElement>(null);
+ const composerCommandInputRef = useRef<HTMLInputElement>(null);
const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
const sendInFlightRef = useRef(false);
const dragDepthRef = useRef(0);
@@ -1128,19 +1133,22 @@
if (runningThreadIds.length === 0) return;
setIsSwitchingRuntimeMode(true);
- await Promise.all(- runningThreadIds.map((threadId) =>- api.orchestration- .dispatchCommand({- type: "thread.session.stop",- commandId: newCommandId(),- threadId,- createdAt: new Date().toISOString(),- })- .catch(() => undefined),- ),- );- setIsSwitchingRuntimeMode(false);+ try {+ await Promise.all(+ runningThreadIds.map((threadId) =>+ api.orchestration+ .dispatchCommand({+ type: "thread.session.stop",+ commandId: newCommandId(),+ threadId,+ createdAt: new Date().toISOString(),+ })+ .catch(() => undefined),+ ),+ );+ } finally {+ setIsSwitchingRuntimeMode(false);+ }
};
useEffect(() => {
@@ -1670,8 +1678,9 @@
activeThread.id,
err instanceof Error ? err.message : "Failed to revert thread state.",
);
+ } finally {+ setIsRevertingCheckpoint(false);
}
- setIsRevertingCheckpoint(false);
},
[activeThread, isConnecting, isRevertingCheckpoint, isSendBusy, phase, setThreadError],
);
@@ -1877,9 +1886,10 @@
threadIdForSend,
err instanceof Error ? err.message : "Failed to send message.",
);
+ } finally {+ sendInFlightRef.current = false;+ setSendPhase("idle");
}
- sendInFlightRef.current = false;- setSendPhase("idle");
};
const onInterrupt = async () => {
@@ -1915,8 +1925,9 @@
activeThreadId,
err instanceof Error ? err.message : "Failed to submit approval decision.",
);
+ } finally {+ setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setThreadErrorAction],
);
@@ -2003,24 +2014,13 @@
const onComposerMenuItemHighlighted = useCallback((itemId: string | null) => {
setComposerHighlightedItemId(itemId);
}, []);
- const nudgeComposerMenuHighlight = useCallback(- (key: "ArrowDown" | "ArrowUp") => {- if (composerMenuItems.length === 0) {- return;- }- const highlightedIndex = composerMenuItems.findIndex(- (item) => item.id === composerHighlightedItemId,- );- const normalizedIndex =- highlightedIndex >= 0 ? highlightedIndex : key === "ArrowDown" ? -1 : 0;- const offset = key === "ArrowDown" ? 1 : -1;- const nextIndex =- (normalizedIndex + offset + composerMenuItems.length) % composerMenuItems.length;- const nextItem = composerMenuItems[nextIndex];- setComposerHighlightedItemId(nextItem?.id ?? null);- },- [composerHighlightedItemId, composerMenuItems],- );+ const nudgeComposerMenuHighlight = useCallback((key: "ArrowDown" | "ArrowUp") => {+ const commandInput = composerCommandInputRef.current;+ if (!commandInput) return;+ commandInput.dispatchEvent(+ new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),+ );+ }, []);
const isComposerMenuLoading =
composerTriggerKind === "path" &&
((pathTriggerQuery.length > 0 && composerPathQueryDebouncer.state.isPending) ||
@@ -2215,6 +2215,7 @@
triggerKind={composerTriggerKind}
onHighlightedItemChange={onComposerMenuItemHighlighted}
onSelect={onSelectComposerItem}
+ commandInputRef={composerCommandInputRef}
/>
</div>
)}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx--- a/apps/web/src/components/DiffPanel.tsx+++ b/apps/web/src/components/DiffPanel.tsx@@ -4,7 +4,7 @@
import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
import { ThreadId, type TurnId } from "@t3tools/contracts";
import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
-import { type WheelEvent as ReactWheelEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
import { cn } from "~/lib/utils";
import { readNativeApi } from "../nativeApi";
@@ -346,7 +346,7 @@
if (!element) return;
element.scrollBy({ left: offset, behavior: "smooth" });
}, []);
- const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {+ const onTurnStripWheel = useCallback((event: WheelEvent) => {
const element = turnStripRef.current;
if (!element) return;
if (element.scrollWidth <= element.clientWidth + 1) return;
@@ -364,6 +364,7 @@
const onScroll = () => updateTurnStripScrollState();
element.addEventListener("scroll", onScroll, { passive: true });
+ element.addEventListener("wheel", onTurnStripWheel, { passive: false });
const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
resizeObserver.observe(element);
@@ -371,9 +372,10 @@
return () => {
window.cancelAnimationFrame(frameId);
element.removeEventListener("scroll", onScroll);
+ element.removeEventListener("wheel", onTurnStripWheel);
resizeObserver.disconnect();
};
- }, [updateTurnStripScrollState]);+ }, [updateTurnStripScrollState, onTurnStripWheel]);
useEffect(() => {
const frameId = window.requestAnimationFrame(() => updateTurnStripScrollState());
@@ -431,7 +433,6 @@
<div
ref={turnStripRef}
className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
- onWheel={onTurnStripWheel}
>
<button
type="button"
diff --git a/apps/web/src/store.ts b/apps/web/src/store.ts--- a/apps/web/src/store.ts+++ b/apps/web/src/store.ts@@ -35,7 +35,6 @@
hasRunningSubprocess: boolean;
}
| { type: "SET_PROJECT_EXPANDED"; projectId: Project["id"]; expanded: boolean }
- | { type: "TOGGLE_THREAD_TERMINAL"; threadId: ThreadId }
| { type: "SET_THREAD_TERMINAL_OPEN"; threadId: ThreadId; open: boolean }
| { type: "SET_THREAD_TERMINAL_HEIGHT"; threadId: ThreadId; height: number }
| { type: "SPLIT_THREAD_TERMINAL"; threadId: ThreadId; terminalId: string }
@@ -71,7 +70,6 @@
hasRunningSubprocess: boolean,
) => void;
setProjectExpanded: (projectId: Project["id"], expanded: boolean) => void;
- toggleThreadTerminal: (threadId: ThreadId) => void;
setThreadTerminalOpen: (threadId: ThreadId, open: boolean) => void;
setThreadTerminalHeight: (threadId: ThreadId, height: number) => void;
splitThreadTerminal: (threadId: ThreadId, terminalId: string) => void;
@@ -621,15 +619,6 @@
),
};
- case "TOGGLE_THREAD_TERMINAL":- return {- ...state,- threads: updateThread(state.threads, action.threadId, (t) => ({- ...t,- terminalOpen: !t.terminalOpen,- })),- };-
case "SET_THREAD_TERMINAL_OPEN":
return {
...state,
@@ -860,7 +849,6 @@
}),
setProjectExpanded: (projectId, expanded) =>
applyAction({ type: "SET_PROJECT_EXPANDED", projectId, expanded }),
- toggleThreadTerminal: (threadId) => applyAction({ type: "TOGGLE_THREAD_TERMINAL", threadId }),
setThreadTerminalOpen: (threadId, open) =>
applyAction({ type: "SET_THREAD_TERMINAL_OPEN", threadId, open }),
setThreadTerminalHeight: (threadId, height) =>

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Sent message not scrolled into view when scrolled up
  • Restored shouldAutoScrollRef.current = true and scrollMessagesToBottom() after setOptimisticUserMessages in onSend, which were accidentally removed during the Zustand refactor in commit c283d2a.

Or push these changes by commenting:

@cursor push 992afef58e

Preview (992afef58e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1735,6 +1735,9 @@
},
]);
+ shouldAutoScrollRef.current = true;+ scrollMessagesToBottom();+
setThreadError(threadIdForSend, null);
promptRef.current = "";
clearComposerDraftContent(threadIdForSend);

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 4 issues found in the latest run.

• ✅ Fixed: Duplicate setRespondingRequestIds cleanup call in approval handler
  • Removed the redundant setRespondingRequestIds call after the try/catch/finally block since the finally block already guarantees cleanup.
• ✅ Fixed: Sidebar terminal status indicators won't live-update
  • Changed Sidebar to subscribe to terminalStateByThreadId (which changes on updates) instead of the stable getTerminalState function reference, and read runningTerminalIds directly from the map.
• ✅ Fixed: Stale terminalState closure in runProjectScript callback
  • Added terminalState to the runProjectScript useCallback dependency array so the callback always uses current terminal state.
• ✅ Fixed: Direct store error setter skips local draft threads
  • Replaced setStoreThreadError with the setThreadError wrapper which handles both server threads and local draft threads.

Or push these changes by commenting:

@cursor push 21ed0a6ca0

Preview (21ed0a6ca0)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1146,6 +1146,7 @@
setThreadError,
storeNewTerminal,
storeSetActiveTerminal,
+ terminalState,
],
);
const persistProjectScripts = useCallback(
@@ -1871,7 +1872,7 @@
const shouldCreateWorktree =
isFirstMessage && envMode === "worktree" && !activeThread.worktreePath;
if (shouldCreateWorktree && !activeThread.branch) {
- setStoreThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");+ setThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");
return;
}
@@ -2091,7 +2092,6 @@
} finally {
setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setStoreThreadError],
);
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -240,7 +240,9 @@
(store) => store.getDraftThreadByProjectId,
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
- const getTerminalState = useTerminalStateStore((state) => state.getTerminalState);+ const terminalStateByThreadId = useTerminalStateStore(+ (state) => state.terminalStateByThreadId,+ );
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -826,7 +828,7 @@
);
const prStatus = prStatusIndicator(prByThreadId.get(thread.id) ?? null);
const terminalStatus = terminalStatusFromRunningIds(
- getTerminalState(thread.id).runningTerminalIds,+ terminalStateByThreadId[thread.id]?.runningTerminalIds ?? [],
);
return (

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Removed memoization defeats memo on MessagesTimeline
  • Restored useMemo for timelineMessages, timelineEntries, and revertTurnCountByUserMessageId, and useCallback for onRevertUserMessage, so that stable references are passed to the memo-wrapped MessagesTimeline and it no longer re-renders on every keystroke.

Or push these changes by commenting:

@cursor push 87361b01eb

Preview (87361b01eb)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -673,7 +673,7 @@
delete attachmentPreviewHandoffTimeoutByMessageIdRef.current[messageId];
}, ATTACHMENT_PREVIEW_HANDOFF_TTL_MS);
}, []);
- const timelineMessages = (() => {+ const timelineMessages = useMemo(() => {
const serverMessages = activeThread?.messages ?? [];
const serverMessagesWithPreviewHandoff =
Object.keys(attachmentPreviewHandoffByMessageId).length === 0
@@ -717,8 +717,11 @@
return serverMessagesWithPreviewHandoff;
}
return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
- })();- const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);+ }, [activeThread?.messages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);+ const timelineEntries = useMemo(+ () => deriveTimelineEntries(timelineMessages, workLogEntries),+ [timelineMessages, workLogEntries],+ );
const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
useTurnDiffSummaries(activeThread);
const turnDiffSummaryByAssistantMessageId = useMemo(() => {
@@ -729,7 +732,7 @@
}
return byMessageId;
}, [turnDiffSummaries]);
- const revertTurnCountByUserMessageId = (() => {+ const revertTurnCountByUserMessageId = useMemo(() => {
const byUserMessageId = new Map<MessageId, number>();
for (let index = 0; index < timelineEntries.length; index += 1) {
const entry = timelineEntries[index];
@@ -760,7 +763,7 @@
}
return byUserMessageId;
- })();+ }, [inferredCheckpointTurnCountByTurnId, timelineEntries, turnDiffSummaryByAssistantMessageId]);
const completionSummary = (() => {
if (!latestTurnSettled) return null;
@@ -2219,13 +2222,16 @@
},
[navigate, threadId],
);
- const onRevertUserMessage = (messageId: MessageId) => {- const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);- if (typeof targetTurnCount !== "number") {- return;- }- void onRevertToTurnCount(targetTurnCount);- };+ const onRevertUserMessage = useCallback(+ (messageId: MessageId) => {+ const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);+ if (typeof targetTurnCount !== "number") {+ return;+ }+ void onRevertToTurnCount(targetTurnCount);+ },+ [revertTurnCountByUserMessageId, onRevertToTurnCount],+ );
// Empty state: no active thread
if (!activeThread) {

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Bugbot Autofix prepared fixes for all 3 issues found in the latest run.

• ✅ Fixed: Terminal toggle no longer auto-focuses terminal panel
  • Added setTerminalFocusRequestId((value) => value + 1) in the !previous && current (opening) branch of the terminal open useEffect, restoring the focus trigger that was lost during the refactor.
• ✅ Fixed: Deleted thread terminal state leaks in localStorage
  • Added clearTerminalState(threadId) call in the Sidebar delete handler and a new removeOrphanedTerminalStates action called after syncServerReadModel to prune stale entries for deleted threads.
• ✅ Fixed: Optimistic message blob URLs leak on unmount
  • Added a ref tracking optimisticUserMessages and revoke their blob URLs via revokeUserMessagePreviewUrls in the existing unmount cleanup effect alongside clearAttachmentPreviewHandoffs.

Or push these changes by commenting:

@cursor push 2a6310194a

Preview (2a6310194a)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -479,6 +479,8 @@
const [isDragOverComposer, setIsDragOverComposer] = useState(false);
const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
+ const optimisticUserMessagesRef = useRef(optimisticUserMessages);+ optimisticUserMessagesRef.current = optimisticUserMessages;
const [localDraftErrorsByThreadId, setLocalDraftErrorsByThreadId] = useState<
Record<ThreadId, string | null>
>({});
@@ -634,6 +636,9 @@
useEffect(() => {
return () => {
clearAttachmentPreviewHandoffs();
+ for (const message of optimisticUserMessagesRef.current) {+ revokeUserMessagePreviewUrls(message);+ }
};
}, [clearAttachmentPreviewHandoffs]);
const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
@@ -1542,6 +1547,7 @@
if (!previous && current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
+ setTerminalFocusRequestId((value) => value + 1);
return;
} else if (previous && !current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -241,6 +241,7 @@
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId);
+ const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState);
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -578,6 +579,7 @@
});
clearComposerDraftForThread(threadId);
clearProjectDraftThreadById(thread.projectId, thread.id);
+ clearTerminalState(threadId);
if (shouldNavigateToFallback) {
if (fallbackThreadId) {
void navigate({
@@ -619,6 +621,7 @@
appSettings.confirmThreadDelete,
clearComposerDraftForThread,
clearProjectDraftThreadById,
+ clearTerminalState,
markThreadUnread,
navigate,
projects,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx--- a/apps/web/src/routes/__root.tsx+++ b/apps/web/src/routes/__root.tsx@@ -145,11 +145,20 @@
let syncing = false;
let pending = false;
+ const removeOrphanedTerminalStates =+ useTerminalStateStore.getState().removeOrphanedTerminalStates;+
const flushSnapshotSync = async (): Promise<void> => {
const snapshot = await api.orchestration.getSnapshot();
if (disposed) return;
latestSequence = Math.max(latestSequence, snapshot.snapshotSequence);
syncServerReadModel(snapshot);
+ const activeThreadIds = new Set(+ snapshot.threads+ .filter((t) => t.deletedAt === null)+ .map((t) => t.id),+ );+ removeOrphanedTerminalStates(activeThreadIds);
if (pending) {
pending = false;
await flushSnapshotSync();
diff --git a/apps/web/src/terminalStateStore.ts b/apps/web/src/terminalStateStore.ts--- a/apps/web/src/terminalStateStore.ts+++ b/apps/web/src/terminalStateStore.ts@@ -461,6 +461,7 @@
hasRunningSubprocess: boolean,
) => void;
clearTerminalState: (threadId: ThreadId) => void;
+ removeOrphanedTerminalStates: (activeThreadIds: Set<ThreadId>) => void;
}
export const useTerminalStateStore = create<TerminalStateStoreState>()(
@@ -505,6 +506,18 @@
),
clearTerminalState: (threadId) =>
updateTerminal(threadId, () => createDefaultThreadTerminalState()),
+ removeOrphanedTerminalStates: (activeThreadIds) =>+ set((state) => {+ const orphanedIds = Object.keys(state.terminalStateByThreadId).filter(+ (id) => !activeThreadIds.has(id as ThreadId),+ );+ if (orphanedIds.length === 0) return state;+ const next = { ...state.terminalStateByThreadId };+ for (const id of orphanedIds) {+ delete next[id as ThreadId];+ }+ return { terminalStateByThreadId: next };+ }),
};
},
{

[juliusmarminge]

@cursor push 2a6310194a

[cursor]

Could not push Autofix changes. The PR branch may have changed since the Autofix ran, or the Autofix commit may no longer exist.

[juliusmarminge]

Summary

• Replaced broad useStore() reads in core web UI components with granular selector-based subscriptions to reduce unnecessary re-renders.
• Migrated multiple dispatch-style store updates to explicit store action selectors (thread error, branch, terminal, runtime mode, visited state, terminal sizing).
• Updated ChatView command menu highlight handling to local list-based navigation logic (removed hidden CommandInput event forwarding).
• Improved image preview interaction/accessibility by wrapping preview images in buttons and refining expanded-preview overlay click layering.
• Adjusted virtualization wiring in MessagesTimeline to pass a concrete scroll container element instead of a ref object.
• Added local React Doctor skill docs under apps/web/.agents/react-doctor/ for post-change React diagnostics workflow.

Testing

• Not run (not included in provided commit context).
• Suggested concrete checks: run bun lint and bun typecheck in the repo root.
• Suggested concrete checks: verify chat thread interactions in the web app (composer menu navigation, image preview open/close, terminal split/new/close, runtime mode toggle, diff panel turn-strip scrolling).

---

Note

Medium Risk
Broad refactor of core chat UI state management (threads/projects/runtime mode) and terminal UI state extraction/persistence, which can introduce subtle regressions in navigation, terminal behavior, and rendering lifecycles. No auth/security changes, but it touches frequently-used UI paths.

Overview
Replaces the old reducer/context store with a Zustand store exposing explicit actions (e.g. markThreadVisited, setError, setThreadBranch, setRuntimeMode) and updates components to subscribe via granular selectors instead of broad useStore() reads.

Extracts terminal UI state out of Thread into a new persisted useTerminalStateStore (open/height/ids/groups/running activity), wires terminal activity events + orphan cleanup in the root event router, and updates ChatView/Sidebar/ThreadTerminalDrawer to use the new terminal state/actions.

Includes several UX/lifecycle tweaks: composer command-menu highlight navigation no longer relies on hidden input event forwarding, message timeline virtualization now takes a concrete scroll element, image previews are button-wrapped with improved overlay click layering, and DiffPanel turn-strip wheel scrolling is handled via React onWheel with safer scroll-state updates.

^{Written by Cursor Bugbot for commit ae56cd1. This will update automatically on new commits. Configure here.}

Note

Refactor web app state to use granular Zustand selectors and move per-thread terminal UI into a persisted useTerminalStateStore used by Sidebar, ChatView, and routing

Replace context/reducer with a Zustand store exposing selector-based methods for projects/threads and introduce a persisted terminal state store; update Sidebar, ChatView, BranchToolbar, DiffPanel, and routes to consume selectors and terminal actions; remove terminal fields from types.Thread and adjust tests. Key logic lives in store.ts and terminalStateStore.ts.

📍Where to Start

Start with the store migration in store.ts to see selectors and actions, then review terminal state design in terminalStateStore.ts before scanning consumer changes in apps/web/src/components/Sidebar.tsx and apps/web/src/components/ChatView.tsx.

^{Macroscope summarized ae56cd1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/zustand-store-granular-selectors

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 5 issues found in the latest run.

• ✅ Fixed: React onWheel is passive, preventing scroll interception
  • Restored imperative addEventListener with { passive: false } for the wheel handler and removed the React onWheel JSX prop, so event.preventDefault() works correctly for vertical-to-horizontal scroll conversion.
• ✅ Fixed: Arrow key highlight doesn't update Autocomplete visual state
  • Restored the hidden CommandInput element and the original nudgeComposerMenuHighlight implementation that dispatches synthetic KeyboardEvents to drive base-ui's internal highlight state.
• ✅ Fixed: Removed try/finally leaves switching mode flag stuck on error
  • Wrapped the Promise.all call in a try/finally block to guarantee setIsSwitchingRuntimeMode(false) always executes.
• ✅ Fixed: Removed finally blocks risk permanently stuck send state
  • Restored finally blocks in onSend, onRevertUserMessage, and onRespondToApproval to guarantee critical cleanup (sendInFlightRef, setSendPhase, setIsRevertingCheckpoint, setRespondingRequestIds) always executes.
• ✅ Fixed: Unused toggleThreadTerminal action defined in store
  • Removed the unused toggleThreadTerminal action from the AppStore interface, the reducer action type union, the reducer case, and the store implementation.

Or push these changes by commenting:

@cursor push 2cf69ce16e

Preview (2cf69ce16e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -97,7 +97,7 @@
import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
import { Badge } from "./ui/badge";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { Command, CommandItem, CommandList } from "./ui/command";+import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
import {
@@ -389,6 +389,7 @@
triggerKind: ComposerTriggerKind | null;
onHighlightedItemChange: (itemId: string | null) => void;
onSelect: (item: ComposerCommandItem) => void;
+ commandInputRef: React.RefObject<HTMLInputElement | null>;
}) {
return (
<Command
@@ -400,6 +401,9 @@
}}
>
<div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+ <div className="pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0">+ <CommandInput autoFocus={false} ref={props.commandInputRef} />+ </div>
<CommandList className="max-h-64">
{props.items.map((item) => (
<ComposerCommandMenuItem
@@ -504,6 +508,7 @@
const [messagesScrollElement, setMessagesScrollElement] = useState<HTMLDivElement | null>(null);
const shouldAutoScrollRef = useRef(true);
const textareaRef = useRef<HTMLTextAreaElement>(null);
+ const composerCommandInputRef = useRef<HTMLInputElement>(null);
const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
const sendInFlightRef = useRef(false);
const dragDepthRef = useRef(0);
@@ -1128,19 +1133,22 @@
if (runningThreadIds.length === 0) return;
setIsSwitchingRuntimeMode(true);
- await Promise.all(- runningThreadIds.map((threadId) =>- api.orchestration- .dispatchCommand({- type: "thread.session.stop",- commandId: newCommandId(),- threadId,- createdAt: new Date().toISOString(),- })- .catch(() => undefined),- ),- );- setIsSwitchingRuntimeMode(false);+ try {+ await Promise.all(+ runningThreadIds.map((threadId) =>+ api.orchestration+ .dispatchCommand({+ type: "thread.session.stop",+ commandId: newCommandId(),+ threadId,+ createdAt: new Date().toISOString(),+ })+ .catch(() => undefined),+ ),+ );+ } finally {+ setIsSwitchingRuntimeMode(false);+ }
};
useEffect(() => {
@@ -1670,8 +1678,9 @@
activeThread.id,
err instanceof Error ? err.message : "Failed to revert thread state.",
);
+ } finally {+ setIsRevertingCheckpoint(false);
}
- setIsRevertingCheckpoint(false);
},
[activeThread, isConnecting, isRevertingCheckpoint, isSendBusy, phase, setThreadError],
);
@@ -1877,9 +1886,10 @@
threadIdForSend,
err instanceof Error ? err.message : "Failed to send message.",
);
+ } finally {+ sendInFlightRef.current = false;+ setSendPhase("idle");
}
- sendInFlightRef.current = false;- setSendPhase("idle");
};
const onInterrupt = async () => {
@@ -1915,8 +1925,9 @@
activeThreadId,
err instanceof Error ? err.message : "Failed to submit approval decision.",
);
+ } finally {+ setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setThreadErrorAction],
);
@@ -2003,24 +2014,13 @@
const onComposerMenuItemHighlighted = useCallback((itemId: string | null) => {
setComposerHighlightedItemId(itemId);
}, []);
- const nudgeComposerMenuHighlight = useCallback(- (key: "ArrowDown" | "ArrowUp") => {- if (composerMenuItems.length === 0) {- return;- }- const highlightedIndex = composerMenuItems.findIndex(- (item) => item.id === composerHighlightedItemId,- );- const normalizedIndex =- highlightedIndex >= 0 ? highlightedIndex : key === "ArrowDown" ? -1 : 0;- const offset = key === "ArrowDown" ? 1 : -1;- const nextIndex =- (normalizedIndex + offset + composerMenuItems.length) % composerMenuItems.length;- const nextItem = composerMenuItems[nextIndex];- setComposerHighlightedItemId(nextItem?.id ?? null);- },- [composerHighlightedItemId, composerMenuItems],- );+ const nudgeComposerMenuHighlight = useCallback((key: "ArrowDown" | "ArrowUp") => {+ const commandInput = composerCommandInputRef.current;+ if (!commandInput) return;+ commandInput.dispatchEvent(+ new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),+ );+ }, []);
const isComposerMenuLoading =
composerTriggerKind === "path" &&
((pathTriggerQuery.length > 0 && composerPathQueryDebouncer.state.isPending) ||
@@ -2215,6 +2215,7 @@
triggerKind={composerTriggerKind}
onHighlightedItemChange={onComposerMenuItemHighlighted}
onSelect={onSelectComposerItem}
+ commandInputRef={composerCommandInputRef}
/>
</div>
)}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx--- a/apps/web/src/components/DiffPanel.tsx+++ b/apps/web/src/components/DiffPanel.tsx@@ -4,7 +4,7 @@
import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
import { ThreadId, type TurnId } from "@t3tools/contracts";
import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
-import { type WheelEvent as ReactWheelEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
import { cn } from "~/lib/utils";
import { readNativeApi } from "../nativeApi";
@@ -346,7 +346,7 @@
if (!element) return;
element.scrollBy({ left: offset, behavior: "smooth" });
}, []);
- const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {+ const onTurnStripWheel = useCallback((event: WheelEvent) => {
const element = turnStripRef.current;
if (!element) return;
if (element.scrollWidth <= element.clientWidth + 1) return;
@@ -364,6 +364,7 @@
const onScroll = () => updateTurnStripScrollState();
element.addEventListener("scroll", onScroll, { passive: true });
+ element.addEventListener("wheel", onTurnStripWheel, { passive: false });
const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
resizeObserver.observe(element);
@@ -371,9 +372,10 @@
return () => {
window.cancelAnimationFrame(frameId);
element.removeEventListener("scroll", onScroll);
+ element.removeEventListener("wheel", onTurnStripWheel);
resizeObserver.disconnect();
};
- }, [updateTurnStripScrollState]);+ }, [updateTurnStripScrollState, onTurnStripWheel]);
useEffect(() => {
const frameId = window.requestAnimationFrame(() => updateTurnStripScrollState());
@@ -431,7 +433,6 @@
<div
ref={turnStripRef}
className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
- onWheel={onTurnStripWheel}
>
<button
type="button"
diff --git a/apps/web/src/store.ts b/apps/web/src/store.ts--- a/apps/web/src/store.ts+++ b/apps/web/src/store.ts@@ -35,7 +35,6 @@
hasRunningSubprocess: boolean;
}
| { type: "SET_PROJECT_EXPANDED"; projectId: Project["id"]; expanded: boolean }
- | { type: "TOGGLE_THREAD_TERMINAL"; threadId: ThreadId }
| { type: "SET_THREAD_TERMINAL_OPEN"; threadId: ThreadId; open: boolean }
| { type: "SET_THREAD_TERMINAL_HEIGHT"; threadId: ThreadId; height: number }
| { type: "SPLIT_THREAD_TERMINAL"; threadId: ThreadId; terminalId: string }
@@ -71,7 +70,6 @@
hasRunningSubprocess: boolean,
) => void;
setProjectExpanded: (projectId: Project["id"], expanded: boolean) => void;
- toggleThreadTerminal: (threadId: ThreadId) => void;
setThreadTerminalOpen: (threadId: ThreadId, open: boolean) => void;
setThreadTerminalHeight: (threadId: ThreadId, height: number) => void;
splitThreadTerminal: (threadId: ThreadId, terminalId: string) => void;
@@ -621,15 +619,6 @@
),
};
- case "TOGGLE_THREAD_TERMINAL":- return {- ...state,- threads: updateThread(state.threads, action.threadId, (t) => ({- ...t,- terminalOpen: !t.terminalOpen,- })),- };-
case "SET_THREAD_TERMINAL_OPEN":
return {
...state,
@@ -860,7 +849,6 @@
}),
setProjectExpanded: (projectId, expanded) =>
applyAction({ type: "SET_PROJECT_EXPANDED", projectId, expanded }),
- toggleThreadTerminal: (threadId) => applyAction({ type: "TOGGLE_THREAD_TERMINAL", threadId }),
setThreadTerminalOpen: (threadId, open) =>
applyAction({ type: "SET_THREAD_TERMINAL_OPEN", threadId, open }),
setThreadTerminalHeight: (threadId, height) =>

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Sent message not scrolled into view when scrolled up
  • Restored shouldAutoScrollRef.current = true and scrollMessagesToBottom() after setOptimisticUserMessages in onSend, which were accidentally removed during the Zustand refactor in commit c283d2a.

Or push these changes by commenting:

@cursor push 992afef58e

Preview (992afef58e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1735,6 +1735,9 @@
},
]);
+ shouldAutoScrollRef.current = true;+ scrollMessagesToBottom();+
setThreadError(threadIdForSend, null);
promptRef.current = "";
clearComposerDraftContent(threadIdForSend);

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 4 issues found in the latest run.

• ✅ Fixed: Duplicate setRespondingRequestIds cleanup call in approval handler
  • Removed the redundant setRespondingRequestIds call after the try/catch/finally block since the finally block already guarantees cleanup.
• ✅ Fixed: Sidebar terminal status indicators won't live-update
  • Changed Sidebar to subscribe to terminalStateByThreadId (which changes on updates) instead of the stable getTerminalState function reference, and read runningTerminalIds directly from the map.
• ✅ Fixed: Stale terminalState closure in runProjectScript callback
  • Added terminalState to the runProjectScript useCallback dependency array so the callback always uses current terminal state.
• ✅ Fixed: Direct store error setter skips local draft threads
  • Replaced setStoreThreadError with the setThreadError wrapper which handles both server threads and local draft threads.

Or push these changes by commenting:

@cursor push 21ed0a6ca0

Preview (21ed0a6ca0)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1146,6 +1146,7 @@
setThreadError,
storeNewTerminal,
storeSetActiveTerminal,
+ terminalState,
],
);
const persistProjectScripts = useCallback(
@@ -1871,7 +1872,7 @@
const shouldCreateWorktree =
isFirstMessage && envMode === "worktree" && !activeThread.worktreePath;
if (shouldCreateWorktree && !activeThread.branch) {
- setStoreThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");+ setThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");
return;
}
@@ -2091,7 +2092,6 @@
} finally {
setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setStoreThreadError],
);
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -240,7 +240,9 @@
(store) => store.getDraftThreadByProjectId,
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
- const getTerminalState = useTerminalStateStore((state) => state.getTerminalState);+ const terminalStateByThreadId = useTerminalStateStore(+ (state) => state.terminalStateByThreadId,+ );
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -826,7 +828,7 @@
);
const prStatus = prStatusIndicator(prByThreadId.get(thread.id) ?? null);
const terminalStatus = terminalStatusFromRunningIds(
- getTerminalState(thread.id).runningTerminalIds,+ terminalStateByThreadId[thread.id]?.runningTerminalIds ?? [],
);
return (

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Removed memoization defeats memo on MessagesTimeline
  • Restored useMemo for timelineMessages, timelineEntries, and revertTurnCountByUserMessageId, and useCallback for onRevertUserMessage, so that stable references are passed to the memo-wrapped MessagesTimeline and it no longer re-renders on every keystroke.

Or push these changes by commenting:

@cursor push 87361b01eb

Preview (87361b01eb)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -673,7 +673,7 @@
delete attachmentPreviewHandoffTimeoutByMessageIdRef.current[messageId];
}, ATTACHMENT_PREVIEW_HANDOFF_TTL_MS);
}, []);
- const timelineMessages = (() => {+ const timelineMessages = useMemo(() => {
const serverMessages = activeThread?.messages ?? [];
const serverMessagesWithPreviewHandoff =
Object.keys(attachmentPreviewHandoffByMessageId).length === 0
@@ -717,8 +717,11 @@
return serverMessagesWithPreviewHandoff;
}
return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
- })();- const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);+ }, [activeThread?.messages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);+ const timelineEntries = useMemo(+ () => deriveTimelineEntries(timelineMessages, workLogEntries),+ [timelineMessages, workLogEntries],+ );
const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
useTurnDiffSummaries(activeThread);
const turnDiffSummaryByAssistantMessageId = useMemo(() => {
@@ -729,7 +732,7 @@
}
return byMessageId;
}, [turnDiffSummaries]);
- const revertTurnCountByUserMessageId = (() => {+ const revertTurnCountByUserMessageId = useMemo(() => {
const byUserMessageId = new Map<MessageId, number>();
for (let index = 0; index < timelineEntries.length; index += 1) {
const entry = timelineEntries[index];
@@ -760,7 +763,7 @@
}
return byUserMessageId;
- })();+ }, [inferredCheckpointTurnCountByTurnId, timelineEntries, turnDiffSummaryByAssistantMessageId]);
const completionSummary = (() => {
if (!latestTurnSettled) return null;
@@ -2219,13 +2222,16 @@
},
[navigate, threadId],
);
- const onRevertUserMessage = (messageId: MessageId) => {- const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);- if (typeof targetTurnCount !== "number") {- return;- }- void onRevertToTurnCount(targetTurnCount);- };+ const onRevertUserMessage = useCallback(+ (messageId: MessageId) => {+ const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);+ if (typeof targetTurnCount !== "number") {+ return;+ }+ void onRevertToTurnCount(targetTurnCount);+ },+ [revertTurnCountByUserMessageId, onRevertToTurnCount],+ );
// Empty state: no active thread
if (!activeThread) {

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Bugbot Autofix prepared fixes for all 3 issues found in the latest run.

• ✅ Fixed: Terminal toggle no longer auto-focuses terminal panel
  • Added setTerminalFocusRequestId((value) => value + 1) in the !previous && current (opening) branch of the terminal open useEffect, restoring the focus trigger that was lost during the refactor.
• ✅ Fixed: Deleted thread terminal state leaks in localStorage
  • Added clearTerminalState(threadId) call in the Sidebar delete handler and a new removeOrphanedTerminalStates action called after syncServerReadModel to prune stale entries for deleted threads.
• ✅ Fixed: Optimistic message blob URLs leak on unmount
  • Added a ref tracking optimisticUserMessages and revoke their blob URLs via revokeUserMessagePreviewUrls in the existing unmount cleanup effect alongside clearAttachmentPreviewHandoffs.

Or push these changes by commenting:

@cursor push 2a6310194a

Preview (2a6310194a)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -479,6 +479,8 @@
const [isDragOverComposer, setIsDragOverComposer] = useState(false);
const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
+ const optimisticUserMessagesRef = useRef(optimisticUserMessages);+ optimisticUserMessagesRef.current = optimisticUserMessages;
const [localDraftErrorsByThreadId, setLocalDraftErrorsByThreadId] = useState<
Record<ThreadId, string | null>
>({});
@@ -634,6 +636,9 @@
useEffect(() => {
return () => {
clearAttachmentPreviewHandoffs();
+ for (const message of optimisticUserMessagesRef.current) {+ revokeUserMessagePreviewUrls(message);+ }
};
}, [clearAttachmentPreviewHandoffs]);
const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
@@ -1542,6 +1547,7 @@
if (!previous && current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
+ setTerminalFocusRequestId((value) => value + 1);
return;
} else if (previous && !current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -241,6 +241,7 @@
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId);
+ const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState);
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -578,6 +579,7 @@
});
clearComposerDraftForThread(threadId);
clearProjectDraftThreadById(thread.projectId, thread.id);
+ clearTerminalState(threadId);
if (shouldNavigateToFallback) {
if (fallbackThreadId) {
void navigate({
@@ -619,6 +621,7 @@
appSettings.confirmThreadDelete,
clearComposerDraftForThread,
clearProjectDraftThreadById,
+ clearTerminalState,
markThreadUnread,
navigate,
projects,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx--- a/apps/web/src/routes/__root.tsx+++ b/apps/web/src/routes/__root.tsx@@ -145,11 +145,20 @@
let syncing = false;
let pending = false;
+ const removeOrphanedTerminalStates =+ useTerminalStateStore.getState().removeOrphanedTerminalStates;+
const flushSnapshotSync = async (): Promise<void> => {
const snapshot = await api.orchestration.getSnapshot();
if (disposed) return;
latestSequence = Math.max(latestSequence, snapshot.snapshotSequence);
syncServerReadModel(snapshot);
+ const activeThreadIds = new Set(+ snapshot.threads+ .filter((t) => t.deletedAt === null)+ .map((t) => t.id),+ );+ removeOrphanedTerminalStates(activeThreadIds);
if (pending) {
pending = false;
await flushSnapshotSync();
diff --git a/apps/web/src/terminalStateStore.ts b/apps/web/src/terminalStateStore.ts--- a/apps/web/src/terminalStateStore.ts+++ b/apps/web/src/terminalStateStore.ts@@ -461,6 +461,7 @@
hasRunningSubprocess: boolean,
) => void;
clearTerminalState: (threadId: ThreadId) => void;
+ removeOrphanedTerminalStates: (activeThreadIds: Set<ThreadId>) => void;
}
export const useTerminalStateStore = create<TerminalStateStoreState>()(
@@ -505,6 +506,18 @@
),
clearTerminalState: (threadId) =>
updateTerminal(threadId, () => createDefaultThreadTerminalState()),
+ removeOrphanedTerminalStates: (activeThreadIds) =>+ set((state) => {+ const orphanedIds = Object.keys(state.terminalStateByThreadId).filter(+ (id) => !activeThreadIds.has(id as ThreadId),+ );+ if (orphanedIds.length === 0) return state;+ const next = { ...state.terminalStateByThreadId };+ for (const id of orphanedIds) {+ delete next[id as ThreadId];+ }+ return { terminalStateByThreadId: next };+ }),
};
},
{

[juliusmarminge]

@cursor push 2a6310194a

[cursor]

Could not push Autofix changes. The PR branch may have changed since the Autofix ran, or the Autofix commit may no longer exist.

[juliusmarminge]

Summary

• Replaced broad useStore() reads in core web UI components with granular selector-based subscriptions to reduce unnecessary re-renders.
• Migrated multiple dispatch-style store updates to explicit store action selectors (thread error, branch, terminal, runtime mode, visited state, terminal sizing).
• Updated ChatView command menu highlight handling to local list-based navigation logic (removed hidden CommandInput event forwarding).
• Improved image preview interaction/accessibility by wrapping preview images in buttons and refining expanded-preview overlay click layering.
• Adjusted virtualization wiring in MessagesTimeline to pass a concrete scroll container element instead of a ref object.
• Added local React Doctor skill docs under apps/web/.agents/react-doctor/ for post-change React diagnostics workflow.

Testing

• Not run (not included in provided commit context).
• Suggested concrete checks: run bun lint and bun typecheck in the repo root.
• Suggested concrete checks: verify chat thread interactions in the web app (composer menu navigation, image preview open/close, terminal split/new/close, runtime mode toggle, diff panel turn-strip scrolling).

---

Note

Medium Risk
Broad refactor of core chat UI state management (threads/projects/runtime mode) and terminal UI state extraction/persistence, which can introduce subtle regressions in navigation, terminal behavior, and rendering lifecycles. No auth/security changes, but it touches frequently-used UI paths.

Overview
Replaces the old reducer/context store with a Zustand store exposing explicit actions (e.g. markThreadVisited, setError, setThreadBranch, setRuntimeMode) and updates components to subscribe via granular selectors instead of broad useStore() reads.

Extracts terminal UI state out of Thread into a new persisted useTerminalStateStore (open/height/ids/groups/running activity), wires terminal activity events + orphan cleanup in the root event router, and updates ChatView/Sidebar/ThreadTerminalDrawer to use the new terminal state/actions.

Includes several UX/lifecycle tweaks: composer command-menu highlight navigation no longer relies on hidden input event forwarding, message timeline virtualization now takes a concrete scroll element, image previews are button-wrapped with improved overlay click layering, and DiffPanel turn-strip wheel scrolling is handled via React onWheel with safer scroll-state updates.

^{Written by Cursor Bugbot for commit ae56cd1. This will update automatically on new commits. Configure here.}

Note

Refactor web app state to use granular Zustand selectors and move per-thread terminal UI into a persisted useTerminalStateStore used by Sidebar, ChatView, and routing

Replace context/reducer with a Zustand store exposing selector-based methods for projects/threads and introduce a persisted terminal state store; update Sidebar, ChatView, BranchToolbar, DiffPanel, and routes to consume selectors and terminal actions; remove terminal fields from types.Thread and adjust tests. Key logic lives in store.ts and terminalStateStore.ts.

📍Where to Start

Start with the store migration in store.ts to see selectors and actions, then review terminal state design in terminalStateStore.ts before scanning consumer changes in apps/web/src/components/Sidebar.tsx and apps/web/src/components/ChatView.tsx.

^{Macroscope summarized ae56cd1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/zustand-store-granular-selectors

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 5 issues found in the latest run.

• ✅ Fixed: React onWheel is passive, preventing scroll interception
  • Restored imperative addEventListener with { passive: false } for the wheel handler and removed the React onWheel JSX prop, so event.preventDefault() works correctly for vertical-to-horizontal scroll conversion.
• ✅ Fixed: Arrow key highlight doesn't update Autocomplete visual state
  • Restored the hidden CommandInput element and the original nudgeComposerMenuHighlight implementation that dispatches synthetic KeyboardEvents to drive base-ui's internal highlight state.
• ✅ Fixed: Removed try/finally leaves switching mode flag stuck on error
  • Wrapped the Promise.all call in a try/finally block to guarantee setIsSwitchingRuntimeMode(false) always executes.
• ✅ Fixed: Removed finally blocks risk permanently stuck send state
  • Restored finally blocks in onSend, onRevertUserMessage, and onRespondToApproval to guarantee critical cleanup (sendInFlightRef, setSendPhase, setIsRevertingCheckpoint, setRespondingRequestIds) always executes.
• ✅ Fixed: Unused toggleThreadTerminal action defined in store
  • Removed the unused toggleThreadTerminal action from the AppStore interface, the reducer action type union, the reducer case, and the store implementation.

Or push these changes by commenting:

@cursor push 2cf69ce16e

Preview (2cf69ce16e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -97,7 +97,7 @@
import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
import { Badge } from "./ui/badge";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { Command, CommandItem, CommandList } from "./ui/command";+import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
import {
@@ -389,6 +389,7 @@
triggerKind: ComposerTriggerKind | null;
onHighlightedItemChange: (itemId: string | null) => void;
onSelect: (item: ComposerCommandItem) => void;
+ commandInputRef: React.RefObject<HTMLInputElement | null>;
}) {
return (
<Command
@@ -400,6 +401,9 @@
}}
>
<div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+ <div className="pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0">+ <CommandInput autoFocus={false} ref={props.commandInputRef} />+ </div>
<CommandList className="max-h-64">
{props.items.map((item) => (
<ComposerCommandMenuItem
@@ -504,6 +508,7 @@
const [messagesScrollElement, setMessagesScrollElement] = useState<HTMLDivElement | null>(null);
const shouldAutoScrollRef = useRef(true);
const textareaRef = useRef<HTMLTextAreaElement>(null);
+ const composerCommandInputRef = useRef<HTMLInputElement>(null);
const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
const sendInFlightRef = useRef(false);
const dragDepthRef = useRef(0);
@@ -1128,19 +1133,22 @@
if (runningThreadIds.length === 0) return;
setIsSwitchingRuntimeMode(true);
- await Promise.all(- runningThreadIds.map((threadId) =>- api.orchestration- .dispatchCommand({- type: "thread.session.stop",- commandId: newCommandId(),- threadId,- createdAt: new Date().toISOString(),- })- .catch(() => undefined),- ),- );- setIsSwitchingRuntimeMode(false);+ try {+ await Promise.all(+ runningThreadIds.map((threadId) =>+ api.orchestration+ .dispatchCommand({+ type: "thread.session.stop",+ commandId: newCommandId(),+ threadId,+ createdAt: new Date().toISOString(),+ })+ .catch(() => undefined),+ ),+ );+ } finally {+ setIsSwitchingRuntimeMode(false);+ }
};
useEffect(() => {
@@ -1670,8 +1678,9 @@
activeThread.id,
err instanceof Error ? err.message : "Failed to revert thread state.",
);
+ } finally {+ setIsRevertingCheckpoint(false);
}
- setIsRevertingCheckpoint(false);
},
[activeThread, isConnecting, isRevertingCheckpoint, isSendBusy, phase, setThreadError],
);
@@ -1877,9 +1886,10 @@
threadIdForSend,
err instanceof Error ? err.message : "Failed to send message.",
);
+ } finally {+ sendInFlightRef.current = false;+ setSendPhase("idle");
}
- sendInFlightRef.current = false;- setSendPhase("idle");
};
const onInterrupt = async () => {
@@ -1915,8 +1925,9 @@
activeThreadId,
err instanceof Error ? err.message : "Failed to submit approval decision.",
);
+ } finally {+ setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setThreadErrorAction],
);
@@ -2003,24 +2014,13 @@
const onComposerMenuItemHighlighted = useCallback((itemId: string | null) => {
setComposerHighlightedItemId(itemId);
}, []);
- const nudgeComposerMenuHighlight = useCallback(- (key: "ArrowDown" | "ArrowUp") => {- if (composerMenuItems.length === 0) {- return;- }- const highlightedIndex = composerMenuItems.findIndex(- (item) => item.id === composerHighlightedItemId,- );- const normalizedIndex =- highlightedIndex >= 0 ? highlightedIndex : key === "ArrowDown" ? -1 : 0;- const offset = key === "ArrowDown" ? 1 : -1;- const nextIndex =- (normalizedIndex + offset + composerMenuItems.length) % composerMenuItems.length;- const nextItem = composerMenuItems[nextIndex];- setComposerHighlightedItemId(nextItem?.id ?? null);- },- [composerHighlightedItemId, composerMenuItems],- );+ const nudgeComposerMenuHighlight = useCallback((key: "ArrowDown" | "ArrowUp") => {+ const commandInput = composerCommandInputRef.current;+ if (!commandInput) return;+ commandInput.dispatchEvent(+ new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),+ );+ }, []);
const isComposerMenuLoading =
composerTriggerKind === "path" &&
((pathTriggerQuery.length > 0 && composerPathQueryDebouncer.state.isPending) ||
@@ -2215,6 +2215,7 @@
triggerKind={composerTriggerKind}
onHighlightedItemChange={onComposerMenuItemHighlighted}
onSelect={onSelectComposerItem}
+ commandInputRef={composerCommandInputRef}
/>
</div>
)}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx--- a/apps/web/src/components/DiffPanel.tsx+++ b/apps/web/src/components/DiffPanel.tsx@@ -4,7 +4,7 @@
import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
import { ThreadId, type TurnId } from "@t3tools/contracts";
import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
-import { type WheelEvent as ReactWheelEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
import { cn } from "~/lib/utils";
import { readNativeApi } from "../nativeApi";
@@ -346,7 +346,7 @@
if (!element) return;
element.scrollBy({ left: offset, behavior: "smooth" });
}, []);
- const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {+ const onTurnStripWheel = useCallback((event: WheelEvent) => {
const element = turnStripRef.current;
if (!element) return;
if (element.scrollWidth <= element.clientWidth + 1) return;
@@ -364,6 +364,7 @@
const onScroll = () => updateTurnStripScrollState();
element.addEventListener("scroll", onScroll, { passive: true });
+ element.addEventListener("wheel", onTurnStripWheel, { passive: false });
const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
resizeObserver.observe(element);
@@ -371,9 +372,10 @@
return () => {
window.cancelAnimationFrame(frameId);
element.removeEventListener("scroll", onScroll);
+ element.removeEventListener("wheel", onTurnStripWheel);
resizeObserver.disconnect();
};
- }, [updateTurnStripScrollState]);+ }, [updateTurnStripScrollState, onTurnStripWheel]);
useEffect(() => {
const frameId = window.requestAnimationFrame(() => updateTurnStripScrollState());
@@ -431,7 +433,6 @@
<div
ref={turnStripRef}
className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
- onWheel={onTurnStripWheel}
>
<button
type="button"
diff --git a/apps/web/src/store.ts b/apps/web/src/store.ts--- a/apps/web/src/store.ts+++ b/apps/web/src/store.ts@@ -35,7 +35,6 @@
hasRunningSubprocess: boolean;
}
| { type: "SET_PROJECT_EXPANDED"; projectId: Project["id"]; expanded: boolean }
- | { type: "TOGGLE_THREAD_TERMINAL"; threadId: ThreadId }
| { type: "SET_THREAD_TERMINAL_OPEN"; threadId: ThreadId; open: boolean }
| { type: "SET_THREAD_TERMINAL_HEIGHT"; threadId: ThreadId; height: number }
| { type: "SPLIT_THREAD_TERMINAL"; threadId: ThreadId; terminalId: string }
@@ -71,7 +70,6 @@
hasRunningSubprocess: boolean,
) => void;
setProjectExpanded: (projectId: Project["id"], expanded: boolean) => void;
- toggleThreadTerminal: (threadId: ThreadId) => void;
setThreadTerminalOpen: (threadId: ThreadId, open: boolean) => void;
setThreadTerminalHeight: (threadId: ThreadId, height: number) => void;
splitThreadTerminal: (threadId: ThreadId, terminalId: string) => void;
@@ -621,15 +619,6 @@
),
};
- case "TOGGLE_THREAD_TERMINAL":- return {- ...state,- threads: updateThread(state.threads, action.threadId, (t) => ({- ...t,- terminalOpen: !t.terminalOpen,- })),- };-
case "SET_THREAD_TERMINAL_OPEN":
return {
...state,
@@ -860,7 +849,6 @@
}),
setProjectExpanded: (projectId, expanded) =>
applyAction({ type: "SET_PROJECT_EXPANDED", projectId, expanded }),
- toggleThreadTerminal: (threadId) => applyAction({ type: "TOGGLE_THREAD_TERMINAL", threadId }),
setThreadTerminalOpen: (threadId, open) =>
applyAction({ type: "SET_THREAD_TERMINAL_OPEN", threadId, open }),
setThreadTerminalHeight: (threadId, height) =>

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Sent message not scrolled into view when scrolled up
  • Restored shouldAutoScrollRef.current = true and scrollMessagesToBottom() after setOptimisticUserMessages in onSend, which were accidentally removed during the Zustand refactor in commit c283d2a.

Or push these changes by commenting:

@cursor push 992afef58e

Preview (992afef58e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1735,6 +1735,9 @@
},
]);
+ shouldAutoScrollRef.current = true;+ scrollMessagesToBottom();+
setThreadError(threadIdForSend, null);
promptRef.current = "";
clearComposerDraftContent(threadIdForSend);

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 4 issues found in the latest run.

• ✅ Fixed: Duplicate setRespondingRequestIds cleanup call in approval handler
  • Removed the redundant setRespondingRequestIds call after the try/catch/finally block since the finally block already guarantees cleanup.
• ✅ Fixed: Sidebar terminal status indicators won't live-update
  • Changed Sidebar to subscribe to terminalStateByThreadId (which changes on updates) instead of the stable getTerminalState function reference, and read runningTerminalIds directly from the map.
• ✅ Fixed: Stale terminalState closure in runProjectScript callback
  • Added terminalState to the runProjectScript useCallback dependency array so the callback always uses current terminal state.
• ✅ Fixed: Direct store error setter skips local draft threads
  • Replaced setStoreThreadError with the setThreadError wrapper which handles both server threads and local draft threads.

Or push these changes by commenting:

@cursor push 21ed0a6ca0

Preview (21ed0a6ca0)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1146,6 +1146,7 @@
setThreadError,
storeNewTerminal,
storeSetActiveTerminal,
+ terminalState,
],
);
const persistProjectScripts = useCallback(
@@ -1871,7 +1872,7 @@
const shouldCreateWorktree =
isFirstMessage && envMode === "worktree" && !activeThread.worktreePath;
if (shouldCreateWorktree && !activeThread.branch) {
- setStoreThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");+ setThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");
return;
}
@@ -2091,7 +2092,6 @@
} finally {
setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setStoreThreadError],
);
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -240,7 +240,9 @@
(store) => store.getDraftThreadByProjectId,
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
- const getTerminalState = useTerminalStateStore((state) => state.getTerminalState);+ const terminalStateByThreadId = useTerminalStateStore(+ (state) => state.terminalStateByThreadId,+ );
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -826,7 +828,7 @@
);
const prStatus = prStatusIndicator(prByThreadId.get(thread.id) ?? null);
const terminalStatus = terminalStatusFromRunningIds(
- getTerminalState(thread.id).runningTerminalIds,+ terminalStateByThreadId[thread.id]?.runningTerminalIds ?? [],
);
return (

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Removed memoization defeats memo on MessagesTimeline
  • Restored useMemo for timelineMessages, timelineEntries, and revertTurnCountByUserMessageId, and useCallback for onRevertUserMessage, so that stable references are passed to the memo-wrapped MessagesTimeline and it no longer re-renders on every keystroke.

Or push these changes by commenting:

@cursor push 87361b01eb

Preview (87361b01eb)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -673,7 +673,7 @@
delete attachmentPreviewHandoffTimeoutByMessageIdRef.current[messageId];
}, ATTACHMENT_PREVIEW_HANDOFF_TTL_MS);
}, []);
- const timelineMessages = (() => {+ const timelineMessages = useMemo(() => {
const serverMessages = activeThread?.messages ?? [];
const serverMessagesWithPreviewHandoff =
Object.keys(attachmentPreviewHandoffByMessageId).length === 0
@@ -717,8 +717,11 @@
return serverMessagesWithPreviewHandoff;
}
return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
- })();- const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);+ }, [activeThread?.messages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);+ const timelineEntries = useMemo(+ () => deriveTimelineEntries(timelineMessages, workLogEntries),+ [timelineMessages, workLogEntries],+ );
const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
useTurnDiffSummaries(activeThread);
const turnDiffSummaryByAssistantMessageId = useMemo(() => {
@@ -729,7 +732,7 @@
}
return byMessageId;
}, [turnDiffSummaries]);
- const revertTurnCountByUserMessageId = (() => {+ const revertTurnCountByUserMessageId = useMemo(() => {
const byUserMessageId = new Map<MessageId, number>();
for (let index = 0; index < timelineEntries.length; index += 1) {
const entry = timelineEntries[index];
@@ -760,7 +763,7 @@
}
return byUserMessageId;
- })();+ }, [inferredCheckpointTurnCountByTurnId, timelineEntries, turnDiffSummaryByAssistantMessageId]);
const completionSummary = (() => {
if (!latestTurnSettled) return null;
@@ -2219,13 +2222,16 @@
},
[navigate, threadId],
);
- const onRevertUserMessage = (messageId: MessageId) => {- const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);- if (typeof targetTurnCount !== "number") {- return;- }- void onRevertToTurnCount(targetTurnCount);- };+ const onRevertUserMessage = useCallback(+ (messageId: MessageId) => {+ const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);+ if (typeof targetTurnCount !== "number") {+ return;+ }+ void onRevertToTurnCount(targetTurnCount);+ },+ [revertTurnCountByUserMessageId, onRevertToTurnCount],+ );
// Empty state: no active thread
if (!activeThread) {

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Bugbot Autofix prepared fixes for all 3 issues found in the latest run.

• ✅ Fixed: Terminal toggle no longer auto-focuses terminal panel
  • Added setTerminalFocusRequestId((value) => value + 1) in the !previous && current (opening) branch of the terminal open useEffect, restoring the focus trigger that was lost during the refactor.
• ✅ Fixed: Deleted thread terminal state leaks in localStorage
  • Added clearTerminalState(threadId) call in the Sidebar delete handler and a new removeOrphanedTerminalStates action called after syncServerReadModel to prune stale entries for deleted threads.
• ✅ Fixed: Optimistic message blob URLs leak on unmount
  • Added a ref tracking optimisticUserMessages and revoke their blob URLs via revokeUserMessagePreviewUrls in the existing unmount cleanup effect alongside clearAttachmentPreviewHandoffs.

Or push these changes by commenting:

@cursor push 2a6310194a

Preview (2a6310194a)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -479,6 +479,8 @@
const [isDragOverComposer, setIsDragOverComposer] = useState(false);
const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
+ const optimisticUserMessagesRef = useRef(optimisticUserMessages);+ optimisticUserMessagesRef.current = optimisticUserMessages;
const [localDraftErrorsByThreadId, setLocalDraftErrorsByThreadId] = useState<
Record<ThreadId, string | null>
>({});
@@ -634,6 +636,9 @@
useEffect(() => {
return () => {
clearAttachmentPreviewHandoffs();
+ for (const message of optimisticUserMessagesRef.current) {+ revokeUserMessagePreviewUrls(message);+ }
};
}, [clearAttachmentPreviewHandoffs]);
const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
@@ -1542,6 +1547,7 @@
if (!previous && current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
+ setTerminalFocusRequestId((value) => value + 1);
return;
} else if (previous && !current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -241,6 +241,7 @@
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId);
+ const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState);
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -578,6 +579,7 @@
});
clearComposerDraftForThread(threadId);
clearProjectDraftThreadById(thread.projectId, thread.id);
+ clearTerminalState(threadId);
if (shouldNavigateToFallback) {
if (fallbackThreadId) {
void navigate({
@@ -619,6 +621,7 @@
appSettings.confirmThreadDelete,
clearComposerDraftForThread,
clearProjectDraftThreadById,
+ clearTerminalState,
markThreadUnread,
navigate,
projects,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx--- a/apps/web/src/routes/__root.tsx+++ b/apps/web/src/routes/__root.tsx@@ -145,11 +145,20 @@
let syncing = false;
let pending = false;
+ const removeOrphanedTerminalStates =+ useTerminalStateStore.getState().removeOrphanedTerminalStates;+
const flushSnapshotSync = async (): Promise<void> => {
const snapshot = await api.orchestration.getSnapshot();
if (disposed) return;
latestSequence = Math.max(latestSequence, snapshot.snapshotSequence);
syncServerReadModel(snapshot);
+ const activeThreadIds = new Set(+ snapshot.threads+ .filter((t) => t.deletedAt === null)+ .map((t) => t.id),+ );+ removeOrphanedTerminalStates(activeThreadIds);
if (pending) {
pending = false;
await flushSnapshotSync();
diff --git a/apps/web/src/terminalStateStore.ts b/apps/web/src/terminalStateStore.ts--- a/apps/web/src/terminalStateStore.ts+++ b/apps/web/src/terminalStateStore.ts@@ -461,6 +461,7 @@
hasRunningSubprocess: boolean,
) => void;
clearTerminalState: (threadId: ThreadId) => void;
+ removeOrphanedTerminalStates: (activeThreadIds: Set<ThreadId>) => void;
}
export const useTerminalStateStore = create<TerminalStateStoreState>()(
@@ -505,6 +506,18 @@
),
clearTerminalState: (threadId) =>
updateTerminal(threadId, () => createDefaultThreadTerminalState()),
+ removeOrphanedTerminalStates: (activeThreadIds) =>+ set((state) => {+ const orphanedIds = Object.keys(state.terminalStateByThreadId).filter(+ (id) => !activeThreadIds.has(id as ThreadId),+ );+ if (orphanedIds.length === 0) return state;+ const next = { ...state.terminalStateByThreadId };+ for (const id of orphanedIds) {+ delete next[id as ThreadId];+ }+ return { terminalStateByThreadId: next };+ }),
};
},
{

[juliusmarminge]

@cursor push 2a6310194a

[cursor]

Could not push Autofix changes. The PR branch may have changed since the Autofix ran, or the Autofix commit may no longer exist.

[juliusmarminge]

Summary

• Replaced broad useStore() reads in core web UI components with granular selector-based subscriptions to reduce unnecessary re-renders.
• Migrated multiple dispatch-style store updates to explicit store action selectors (thread error, branch, terminal, runtime mode, visited state, terminal sizing).
• Updated ChatView command menu highlight handling to local list-based navigation logic (removed hidden CommandInput event forwarding).
• Improved image preview interaction/accessibility by wrapping preview images in buttons and refining expanded-preview overlay click layering.
• Adjusted virtualization wiring in MessagesTimeline to pass a concrete scroll container element instead of a ref object.
• Added local React Doctor skill docs under apps/web/.agents/react-doctor/ for post-change React diagnostics workflow.

Testing

• Not run (not included in provided commit context).
• Suggested concrete checks: run bun lint and bun typecheck in the repo root.
• Suggested concrete checks: verify chat thread interactions in the web app (composer menu navigation, image preview open/close, terminal split/new/close, runtime mode toggle, diff panel turn-strip scrolling).

---

Note

Medium Risk
Broad refactor of core chat UI state management (threads/projects/runtime mode) and terminal UI state extraction/persistence, which can introduce subtle regressions in navigation, terminal behavior, and rendering lifecycles. No auth/security changes, but it touches frequently-used UI paths.

Overview
Replaces the old reducer/context store with a Zustand store exposing explicit actions (e.g. markThreadVisited, setError, setThreadBranch, setRuntimeMode) and updates components to subscribe via granular selectors instead of broad useStore() reads.

Extracts terminal UI state out of Thread into a new persisted useTerminalStateStore (open/height/ids/groups/running activity), wires terminal activity events + orphan cleanup in the root event router, and updates ChatView/Sidebar/ThreadTerminalDrawer to use the new terminal state/actions.

Includes several UX/lifecycle tweaks: composer command-menu highlight navigation no longer relies on hidden input event forwarding, message timeline virtualization now takes a concrete scroll element, image previews are button-wrapped with improved overlay click layering, and DiffPanel turn-strip wheel scrolling is handled via React onWheel with safer scroll-state updates.

^{Written by Cursor Bugbot for commit ae56cd1. This will update automatically on new commits. Configure here.}

Note

Refactor web app state to use granular Zustand selectors and move per-thread terminal UI into a persisted useTerminalStateStore used by Sidebar, ChatView, and routing

Replace context/reducer with a Zustand store exposing selector-based methods for projects/threads and introduce a persisted terminal state store; update Sidebar, ChatView, BranchToolbar, DiffPanel, and routes to consume selectors and terminal actions; remove terminal fields from types.Thread and adjust tests. Key logic lives in store.ts and terminalStateStore.ts.

📍Where to Start

Start with the store migration in store.ts to see selectors and actions, then review terminal state design in terminalStateStore.ts before scanning consumer changes in apps/web/src/components/Sidebar.tsx and apps/web/src/components/ChatView.tsx.

^{Macroscope summarized ae56cd1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/zustand-store-granular-selectors

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 5 issues found in the latest run.

• ✅ Fixed: React onWheel is passive, preventing scroll interception
  • Restored imperative addEventListener with { passive: false } for the wheel handler and removed the React onWheel JSX prop, so event.preventDefault() works correctly for vertical-to-horizontal scroll conversion.
• ✅ Fixed: Arrow key highlight doesn't update Autocomplete visual state
  • Restored the hidden CommandInput element and the original nudgeComposerMenuHighlight implementation that dispatches synthetic KeyboardEvents to drive base-ui's internal highlight state.
• ✅ Fixed: Removed try/finally leaves switching mode flag stuck on error
  • Wrapped the Promise.all call in a try/finally block to guarantee setIsSwitchingRuntimeMode(false) always executes.
• ✅ Fixed: Removed finally blocks risk permanently stuck send state
  • Restored finally blocks in onSend, onRevertUserMessage, and onRespondToApproval to guarantee critical cleanup (sendInFlightRef, setSendPhase, setIsRevertingCheckpoint, setRespondingRequestIds) always executes.
• ✅ Fixed: Unused toggleThreadTerminal action defined in store
  • Removed the unused toggleThreadTerminal action from the AppStore interface, the reducer action type union, the reducer case, and the store implementation.

Or push these changes by commenting:

@cursor push 2cf69ce16e

Preview (2cf69ce16e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -97,7 +97,7 @@
import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
import { Badge } from "./ui/badge";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { Command, CommandItem, CommandList } from "./ui/command";+import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
import {
@@ -389,6 +389,7 @@
triggerKind: ComposerTriggerKind | null;
onHighlightedItemChange: (itemId: string | null) => void;
onSelect: (item: ComposerCommandItem) => void;
+ commandInputRef: React.RefObject<HTMLInputElement | null>;
}) {
return (
<Command
@@ -400,6 +401,9 @@
}}
>
<div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+ <div className="pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0">+ <CommandInput autoFocus={false} ref={props.commandInputRef} />+ </div>
<CommandList className="max-h-64">
{props.items.map((item) => (
<ComposerCommandMenuItem
@@ -504,6 +508,7 @@
const [messagesScrollElement, setMessagesScrollElement] = useState<HTMLDivElement | null>(null);
const shouldAutoScrollRef = useRef(true);
const textareaRef = useRef<HTMLTextAreaElement>(null);
+ const composerCommandInputRef = useRef<HTMLInputElement>(null);
const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
const sendInFlightRef = useRef(false);
const dragDepthRef = useRef(0);
@@ -1128,19 +1133,22 @@
if (runningThreadIds.length === 0) return;
setIsSwitchingRuntimeMode(true);
- await Promise.all(- runningThreadIds.map((threadId) =>- api.orchestration- .dispatchCommand({- type: "thread.session.stop",- commandId: newCommandId(),- threadId,- createdAt: new Date().toISOString(),- })- .catch(() => undefined),- ),- );- setIsSwitchingRuntimeMode(false);+ try {+ await Promise.all(+ runningThreadIds.map((threadId) =>+ api.orchestration+ .dispatchCommand({+ type: "thread.session.stop",+ commandId: newCommandId(),+ threadId,+ createdAt: new Date().toISOString(),+ })+ .catch(() => undefined),+ ),+ );+ } finally {+ setIsSwitchingRuntimeMode(false);+ }
};
useEffect(() => {
@@ -1670,8 +1678,9 @@
activeThread.id,
err instanceof Error ? err.message : "Failed to revert thread state.",
);
+ } finally {+ setIsRevertingCheckpoint(false);
}
- setIsRevertingCheckpoint(false);
},
[activeThread, isConnecting, isRevertingCheckpoint, isSendBusy, phase, setThreadError],
);
@@ -1877,9 +1886,10 @@
threadIdForSend,
err instanceof Error ? err.message : "Failed to send message.",
);
+ } finally {+ sendInFlightRef.current = false;+ setSendPhase("idle");
}
- sendInFlightRef.current = false;- setSendPhase("idle");
};
const onInterrupt = async () => {
@@ -1915,8 +1925,9 @@
activeThreadId,
err instanceof Error ? err.message : "Failed to submit approval decision.",
);
+ } finally {+ setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setThreadErrorAction],
);
@@ -2003,24 +2014,13 @@
const onComposerMenuItemHighlighted = useCallback((itemId: string | null) => {
setComposerHighlightedItemId(itemId);
}, []);
- const nudgeComposerMenuHighlight = useCallback(- (key: "ArrowDown" | "ArrowUp") => {- if (composerMenuItems.length === 0) {- return;- }- const highlightedIndex = composerMenuItems.findIndex(- (item) => item.id === composerHighlightedItemId,- );- const normalizedIndex =- highlightedIndex >= 0 ? highlightedIndex : key === "ArrowDown" ? -1 : 0;- const offset = key === "ArrowDown" ? 1 : -1;- const nextIndex =- (normalizedIndex + offset + composerMenuItems.length) % composerMenuItems.length;- const nextItem = composerMenuItems[nextIndex];- setComposerHighlightedItemId(nextItem?.id ?? null);- },- [composerHighlightedItemId, composerMenuItems],- );+ const nudgeComposerMenuHighlight = useCallback((key: "ArrowDown" | "ArrowUp") => {+ const commandInput = composerCommandInputRef.current;+ if (!commandInput) return;+ commandInput.dispatchEvent(+ new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),+ );+ }, []);
const isComposerMenuLoading =
composerTriggerKind === "path" &&
((pathTriggerQuery.length > 0 && composerPathQueryDebouncer.state.isPending) ||
@@ -2215,6 +2215,7 @@
triggerKind={composerTriggerKind}
onHighlightedItemChange={onComposerMenuItemHighlighted}
onSelect={onSelectComposerItem}
+ commandInputRef={composerCommandInputRef}
/>
</div>
)}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx--- a/apps/web/src/components/DiffPanel.tsx+++ b/apps/web/src/components/DiffPanel.tsx@@ -4,7 +4,7 @@
import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
import { ThreadId, type TurnId } from "@t3tools/contracts";
import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
-import { type WheelEvent as ReactWheelEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
import { cn } from "~/lib/utils";
import { readNativeApi } from "../nativeApi";
@@ -346,7 +346,7 @@
if (!element) return;
element.scrollBy({ left: offset, behavior: "smooth" });
}, []);
- const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {+ const onTurnStripWheel = useCallback((event: WheelEvent) => {
const element = turnStripRef.current;
if (!element) return;
if (element.scrollWidth <= element.clientWidth + 1) return;
@@ -364,6 +364,7 @@
const onScroll = () => updateTurnStripScrollState();
element.addEventListener("scroll", onScroll, { passive: true });
+ element.addEventListener("wheel", onTurnStripWheel, { passive: false });
const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
resizeObserver.observe(element);
@@ -371,9 +372,10 @@
return () => {
window.cancelAnimationFrame(frameId);
element.removeEventListener("scroll", onScroll);
+ element.removeEventListener("wheel", onTurnStripWheel);
resizeObserver.disconnect();
};
- }, [updateTurnStripScrollState]);+ }, [updateTurnStripScrollState, onTurnStripWheel]);
useEffect(() => {
const frameId = window.requestAnimationFrame(() => updateTurnStripScrollState());
@@ -431,7 +433,6 @@
<div
ref={turnStripRef}
className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
- onWheel={onTurnStripWheel}
>
<button
type="button"
diff --git a/apps/web/src/store.ts b/apps/web/src/store.ts--- a/apps/web/src/store.ts+++ b/apps/web/src/store.ts@@ -35,7 +35,6 @@
hasRunningSubprocess: boolean;
}
| { type: "SET_PROJECT_EXPANDED"; projectId: Project["id"]; expanded: boolean }
- | { type: "TOGGLE_THREAD_TERMINAL"; threadId: ThreadId }
| { type: "SET_THREAD_TERMINAL_OPEN"; threadId: ThreadId; open: boolean }
| { type: "SET_THREAD_TERMINAL_HEIGHT"; threadId: ThreadId; height: number }
| { type: "SPLIT_THREAD_TERMINAL"; threadId: ThreadId; terminalId: string }
@@ -71,7 +70,6 @@
hasRunningSubprocess: boolean,
) => void;
setProjectExpanded: (projectId: Project["id"], expanded: boolean) => void;
- toggleThreadTerminal: (threadId: ThreadId) => void;
setThreadTerminalOpen: (threadId: ThreadId, open: boolean) => void;
setThreadTerminalHeight: (threadId: ThreadId, height: number) => void;
splitThreadTerminal: (threadId: ThreadId, terminalId: string) => void;
@@ -621,15 +619,6 @@
),
};
- case "TOGGLE_THREAD_TERMINAL":- return {- ...state,- threads: updateThread(state.threads, action.threadId, (t) => ({- ...t,- terminalOpen: !t.terminalOpen,- })),- };-
case "SET_THREAD_TERMINAL_OPEN":
return {
...state,
@@ -860,7 +849,6 @@
}),
setProjectExpanded: (projectId, expanded) =>
applyAction({ type: "SET_PROJECT_EXPANDED", projectId, expanded }),
- toggleThreadTerminal: (threadId) => applyAction({ type: "TOGGLE_THREAD_TERMINAL", threadId }),
setThreadTerminalOpen: (threadId, open) =>
applyAction({ type: "SET_THREAD_TERMINAL_OPEN", threadId, open }),
setThreadTerminalHeight: (threadId, height) =>

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Sent message not scrolled into view when scrolled up
  • Restored shouldAutoScrollRef.current = true and scrollMessagesToBottom() after setOptimisticUserMessages in onSend, which were accidentally removed during the Zustand refactor in commit c283d2a.

Or push these changes by commenting:

@cursor push 992afef58e

Preview (992afef58e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1735,6 +1735,9 @@
},
]);
+ shouldAutoScrollRef.current = true;+ scrollMessagesToBottom();+
setThreadError(threadIdForSend, null);
promptRef.current = "";
clearComposerDraftContent(threadIdForSend);

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 4 issues found in the latest run.

• ✅ Fixed: Duplicate setRespondingRequestIds cleanup call in approval handler
  • Removed the redundant setRespondingRequestIds call after the try/catch/finally block since the finally block already guarantees cleanup.
• ✅ Fixed: Sidebar terminal status indicators won't live-update
  • Changed Sidebar to subscribe to terminalStateByThreadId (which changes on updates) instead of the stable getTerminalState function reference, and read runningTerminalIds directly from the map.
• ✅ Fixed: Stale terminalState closure in runProjectScript callback
  • Added terminalState to the runProjectScript useCallback dependency array so the callback always uses current terminal state.
• ✅ Fixed: Direct store error setter skips local draft threads
  • Replaced setStoreThreadError with the setThreadError wrapper which handles both server threads and local draft threads.

Or push these changes by commenting:

@cursor push 21ed0a6ca0

Preview (21ed0a6ca0)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1146,6 +1146,7 @@
setThreadError,
storeNewTerminal,
storeSetActiveTerminal,
+ terminalState,
],
);
const persistProjectScripts = useCallback(
@@ -1871,7 +1872,7 @@
const shouldCreateWorktree =
isFirstMessage && envMode === "worktree" && !activeThread.worktreePath;
if (shouldCreateWorktree && !activeThread.branch) {
- setStoreThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");+ setThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");
return;
}
@@ -2091,7 +2092,6 @@
} finally {
setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setStoreThreadError],
);
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -240,7 +240,9 @@
(store) => store.getDraftThreadByProjectId,
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
- const getTerminalState = useTerminalStateStore((state) => state.getTerminalState);+ const terminalStateByThreadId = useTerminalStateStore(+ (state) => state.terminalStateByThreadId,+ );
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -826,7 +828,7 @@
);
const prStatus = prStatusIndicator(prByThreadId.get(thread.id) ?? null);
const terminalStatus = terminalStatusFromRunningIds(
- getTerminalState(thread.id).runningTerminalIds,+ terminalStateByThreadId[thread.id]?.runningTerminalIds ?? [],
);
return (

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Removed memoization defeats memo on MessagesTimeline
  • Restored useMemo for timelineMessages, timelineEntries, and revertTurnCountByUserMessageId, and useCallback for onRevertUserMessage, so that stable references are passed to the memo-wrapped MessagesTimeline and it no longer re-renders on every keystroke.

Or push these changes by commenting:

@cursor push 87361b01eb

Preview (87361b01eb)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -673,7 +673,7 @@
delete attachmentPreviewHandoffTimeoutByMessageIdRef.current[messageId];
}, ATTACHMENT_PREVIEW_HANDOFF_TTL_MS);
}, []);
- const timelineMessages = (() => {+ const timelineMessages = useMemo(() => {
const serverMessages = activeThread?.messages ?? [];
const serverMessagesWithPreviewHandoff =
Object.keys(attachmentPreviewHandoffByMessageId).length === 0
@@ -717,8 +717,11 @@
return serverMessagesWithPreviewHandoff;
}
return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
- })();- const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);+ }, [activeThread?.messages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);+ const timelineEntries = useMemo(+ () => deriveTimelineEntries(timelineMessages, workLogEntries),+ [timelineMessages, workLogEntries],+ );
const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
useTurnDiffSummaries(activeThread);
const turnDiffSummaryByAssistantMessageId = useMemo(() => {
@@ -729,7 +732,7 @@
}
return byMessageId;
}, [turnDiffSummaries]);
- const revertTurnCountByUserMessageId = (() => {+ const revertTurnCountByUserMessageId = useMemo(() => {
const byUserMessageId = new Map<MessageId, number>();
for (let index = 0; index < timelineEntries.length; index += 1) {
const entry = timelineEntries[index];
@@ -760,7 +763,7 @@
}
return byUserMessageId;
- })();+ }, [inferredCheckpointTurnCountByTurnId, timelineEntries, turnDiffSummaryByAssistantMessageId]);
const completionSummary = (() => {
if (!latestTurnSettled) return null;
@@ -2219,13 +2222,16 @@
},
[navigate, threadId],
);
- const onRevertUserMessage = (messageId: MessageId) => {- const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);- if (typeof targetTurnCount !== "number") {- return;- }- void onRevertToTurnCount(targetTurnCount);- };+ const onRevertUserMessage = useCallback(+ (messageId: MessageId) => {+ const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);+ if (typeof targetTurnCount !== "number") {+ return;+ }+ void onRevertToTurnCount(targetTurnCount);+ },+ [revertTurnCountByUserMessageId, onRevertToTurnCount],+ );
// Empty state: no active thread
if (!activeThread) {

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Bugbot Autofix prepared fixes for all 3 issues found in the latest run.

• ✅ Fixed: Terminal toggle no longer auto-focuses terminal panel
  • Added setTerminalFocusRequestId((value) => value + 1) in the !previous && current (opening) branch of the terminal open useEffect, restoring the focus trigger that was lost during the refactor.
• ✅ Fixed: Deleted thread terminal state leaks in localStorage
  • Added clearTerminalState(threadId) call in the Sidebar delete handler and a new removeOrphanedTerminalStates action called after syncServerReadModel to prune stale entries for deleted threads.
• ✅ Fixed: Optimistic message blob URLs leak on unmount
  • Added a ref tracking optimisticUserMessages and revoke their blob URLs via revokeUserMessagePreviewUrls in the existing unmount cleanup effect alongside clearAttachmentPreviewHandoffs.

Or push these changes by commenting:

@cursor push 2a6310194a

Preview (2a6310194a)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -479,6 +479,8 @@
const [isDragOverComposer, setIsDragOverComposer] = useState(false);
const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
+ const optimisticUserMessagesRef = useRef(optimisticUserMessages);+ optimisticUserMessagesRef.current = optimisticUserMessages;
const [localDraftErrorsByThreadId, setLocalDraftErrorsByThreadId] = useState<
Record<ThreadId, string | null>
>({});
@@ -634,6 +636,9 @@
useEffect(() => {
return () => {
clearAttachmentPreviewHandoffs();
+ for (const message of optimisticUserMessagesRef.current) {+ revokeUserMessagePreviewUrls(message);+ }
};
}, [clearAttachmentPreviewHandoffs]);
const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
@@ -1542,6 +1547,7 @@
if (!previous && current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
+ setTerminalFocusRequestId((value) => value + 1);
return;
} else if (previous && !current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -241,6 +241,7 @@
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId);
+ const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState);
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -578,6 +579,7 @@
});
clearComposerDraftForThread(threadId);
clearProjectDraftThreadById(thread.projectId, thread.id);
+ clearTerminalState(threadId);
if (shouldNavigateToFallback) {
if (fallbackThreadId) {
void navigate({
@@ -619,6 +621,7 @@
appSettings.confirmThreadDelete,
clearComposerDraftForThread,
clearProjectDraftThreadById,
+ clearTerminalState,
markThreadUnread,
navigate,
projects,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx--- a/apps/web/src/routes/__root.tsx+++ b/apps/web/src/routes/__root.tsx@@ -145,11 +145,20 @@
let syncing = false;
let pending = false;
+ const removeOrphanedTerminalStates =+ useTerminalStateStore.getState().removeOrphanedTerminalStates;+
const flushSnapshotSync = async (): Promise<void> => {
const snapshot = await api.orchestration.getSnapshot();
if (disposed) return;
latestSequence = Math.max(latestSequence, snapshot.snapshotSequence);
syncServerReadModel(snapshot);
+ const activeThreadIds = new Set(+ snapshot.threads+ .filter((t) => t.deletedAt === null)+ .map((t) => t.id),+ );+ removeOrphanedTerminalStates(activeThreadIds);
if (pending) {
pending = false;
await flushSnapshotSync();
diff --git a/apps/web/src/terminalStateStore.ts b/apps/web/src/terminalStateStore.ts--- a/apps/web/src/terminalStateStore.ts+++ b/apps/web/src/terminalStateStore.ts@@ -461,6 +461,7 @@
hasRunningSubprocess: boolean,
) => void;
clearTerminalState: (threadId: ThreadId) => void;
+ removeOrphanedTerminalStates: (activeThreadIds: Set<ThreadId>) => void;
}
export const useTerminalStateStore = create<TerminalStateStoreState>()(
@@ -505,6 +506,18 @@
),
clearTerminalState: (threadId) =>
updateTerminal(threadId, () => createDefaultThreadTerminalState()),
+ removeOrphanedTerminalStates: (activeThreadIds) =>+ set((state) => {+ const orphanedIds = Object.keys(state.terminalStateByThreadId).filter(+ (id) => !activeThreadIds.has(id as ThreadId),+ );+ if (orphanedIds.length === 0) return state;+ const next = { ...state.terminalStateByThreadId };+ for (const id of orphanedIds) {+ delete next[id as ThreadId];+ }+ return { terminalStateByThreadId: next };+ }),
};
},
{

[juliusmarminge]

@cursor push 2a6310194a

[cursor]

Could not push Autofix changes. The PR branch may have changed since the Autofix ran, or the Autofix commit may no longer exist.

[juliusmarminge]

Summary

• Replaced broad useStore() reads in core web UI components with granular selector-based subscriptions to reduce unnecessary re-renders.
• Migrated multiple dispatch-style store updates to explicit store action selectors (thread error, branch, terminal, runtime mode, visited state, terminal sizing).
• Updated ChatView command menu highlight handling to local list-based navigation logic (removed hidden CommandInput event forwarding).
• Improved image preview interaction/accessibility by wrapping preview images in buttons and refining expanded-preview overlay click layering.
• Adjusted virtualization wiring in MessagesTimeline to pass a concrete scroll container element instead of a ref object.
• Added local React Doctor skill docs under apps/web/.agents/react-doctor/ for post-change React diagnostics workflow.

Testing

• Not run (not included in provided commit context).
• Suggested concrete checks: run bun lint and bun typecheck in the repo root.
• Suggested concrete checks: verify chat thread interactions in the web app (composer menu navigation, image preview open/close, terminal split/new/close, runtime mode toggle, diff panel turn-strip scrolling).

---

Note

Medium Risk
Broad refactor of core chat UI state management (threads/projects/runtime mode) and terminal UI state extraction/persistence, which can introduce subtle regressions in navigation, terminal behavior, and rendering lifecycles. No auth/security changes, but it touches frequently-used UI paths.

Overview
Replaces the old reducer/context store with a Zustand store exposing explicit actions (e.g. markThreadVisited, setError, setThreadBranch, setRuntimeMode) and updates components to subscribe via granular selectors instead of broad useStore() reads.

Extracts terminal UI state out of Thread into a new persisted useTerminalStateStore (open/height/ids/groups/running activity), wires terminal activity events + orphan cleanup in the root event router, and updates ChatView/Sidebar/ThreadTerminalDrawer to use the new terminal state/actions.

Includes several UX/lifecycle tweaks: composer command-menu highlight navigation no longer relies on hidden input event forwarding, message timeline virtualization now takes a concrete scroll element, image previews are button-wrapped with improved overlay click layering, and DiffPanel turn-strip wheel scrolling is handled via React onWheel with safer scroll-state updates.

^{Written by Cursor Bugbot for commit ae56cd1. This will update automatically on new commits. Configure here.}

Note

Refactor web app state to use granular Zustand selectors and move per-thread terminal UI into a persisted useTerminalStateStore used by Sidebar, ChatView, and routing

Replace context/reducer with a Zustand store exposing selector-based methods for projects/threads and introduce a persisted terminal state store; update Sidebar, ChatView, BranchToolbar, DiffPanel, and routes to consume selectors and terminal actions; remove terminal fields from types.Thread and adjust tests. Key logic lives in store.ts and terminalStateStore.ts.

📍Where to Start

Start with the store migration in store.ts to see selectors and actions, then review terminal state design in terminalStateStore.ts before scanning consumer changes in apps/web/src/components/Sidebar.tsx and apps/web/src/components/ChatView.tsx.

^{Macroscope summarized ae56cd1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/zustand-store-granular-selectors

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 5 issues found in the latest run.

• ✅ Fixed: React onWheel is passive, preventing scroll interception
  • Restored imperative addEventListener with { passive: false } for the wheel handler and removed the React onWheel JSX prop, so event.preventDefault() works correctly for vertical-to-horizontal scroll conversion.
• ✅ Fixed: Arrow key highlight doesn't update Autocomplete visual state
  • Restored the hidden CommandInput element and the original nudgeComposerMenuHighlight implementation that dispatches synthetic KeyboardEvents to drive base-ui's internal highlight state.
• ✅ Fixed: Removed try/finally leaves switching mode flag stuck on error
  • Wrapped the Promise.all call in a try/finally block to guarantee setIsSwitchingRuntimeMode(false) always executes.
• ✅ Fixed: Removed finally blocks risk permanently stuck send state
  • Restored finally blocks in onSend, onRevertUserMessage, and onRespondToApproval to guarantee critical cleanup (sendInFlightRef, setSendPhase, setIsRevertingCheckpoint, setRespondingRequestIds) always executes.
• ✅ Fixed: Unused toggleThreadTerminal action defined in store
  • Removed the unused toggleThreadTerminal action from the AppStore interface, the reducer action type union, the reducer case, and the store implementation.

Or push these changes by commenting:

@cursor push 2cf69ce16e

Preview (2cf69ce16e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -97,7 +97,7 @@
import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
import { Badge } from "./ui/badge";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { Command, CommandItem, CommandList } from "./ui/command";+import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
import {
@@ -389,6 +389,7 @@
triggerKind: ComposerTriggerKind | null;
onHighlightedItemChange: (itemId: string | null) => void;
onSelect: (item: ComposerCommandItem) => void;
+ commandInputRef: React.RefObject<HTMLInputElement | null>;
}) {
return (
<Command
@@ -400,6 +401,9 @@
}}
>
<div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+ <div className="pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0">+ <CommandInput autoFocus={false} ref={props.commandInputRef} />+ </div>
<CommandList className="max-h-64">
{props.items.map((item) => (
<ComposerCommandMenuItem
@@ -504,6 +508,7 @@
const [messagesScrollElement, setMessagesScrollElement] = useState<HTMLDivElement | null>(null);
const shouldAutoScrollRef = useRef(true);
const textareaRef = useRef<HTMLTextAreaElement>(null);
+ const composerCommandInputRef = useRef<HTMLInputElement>(null);
const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
const sendInFlightRef = useRef(false);
const dragDepthRef = useRef(0);
@@ -1128,19 +1133,22 @@
if (runningThreadIds.length === 0) return;
setIsSwitchingRuntimeMode(true);
- await Promise.all(- runningThreadIds.map((threadId) =>- api.orchestration- .dispatchCommand({- type: "thread.session.stop",- commandId: newCommandId(),- threadId,- createdAt: new Date().toISOString(),- })- .catch(() => undefined),- ),- );- setIsSwitchingRuntimeMode(false);+ try {+ await Promise.all(+ runningThreadIds.map((threadId) =>+ api.orchestration+ .dispatchCommand({+ type: "thread.session.stop",+ commandId: newCommandId(),+ threadId,+ createdAt: new Date().toISOString(),+ })+ .catch(() => undefined),+ ),+ );+ } finally {+ setIsSwitchingRuntimeMode(false);+ }
};
useEffect(() => {
@@ -1670,8 +1678,9 @@
activeThread.id,
err instanceof Error ? err.message : "Failed to revert thread state.",
);
+ } finally {+ setIsRevertingCheckpoint(false);
}
- setIsRevertingCheckpoint(false);
},
[activeThread, isConnecting, isRevertingCheckpoint, isSendBusy, phase, setThreadError],
);
@@ -1877,9 +1886,10 @@
threadIdForSend,
err instanceof Error ? err.message : "Failed to send message.",
);
+ } finally {+ sendInFlightRef.current = false;+ setSendPhase("idle");
}
- sendInFlightRef.current = false;- setSendPhase("idle");
};
const onInterrupt = async () => {
@@ -1915,8 +1925,9 @@
activeThreadId,
err instanceof Error ? err.message : "Failed to submit approval decision.",
);
+ } finally {+ setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setThreadErrorAction],
);
@@ -2003,24 +2014,13 @@
const onComposerMenuItemHighlighted = useCallback((itemId: string | null) => {
setComposerHighlightedItemId(itemId);
}, []);
- const nudgeComposerMenuHighlight = useCallback(- (key: "ArrowDown" | "ArrowUp") => {- if (composerMenuItems.length === 0) {- return;- }- const highlightedIndex = composerMenuItems.findIndex(- (item) => item.id === composerHighlightedItemId,- );- const normalizedIndex =- highlightedIndex >= 0 ? highlightedIndex : key === "ArrowDown" ? -1 : 0;- const offset = key === "ArrowDown" ? 1 : -1;- const nextIndex =- (normalizedIndex + offset + composerMenuItems.length) % composerMenuItems.length;- const nextItem = composerMenuItems[nextIndex];- setComposerHighlightedItemId(nextItem?.id ?? null);- },- [composerHighlightedItemId, composerMenuItems],- );+ const nudgeComposerMenuHighlight = useCallback((key: "ArrowDown" | "ArrowUp") => {+ const commandInput = composerCommandInputRef.current;+ if (!commandInput) return;+ commandInput.dispatchEvent(+ new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),+ );+ }, []);
const isComposerMenuLoading =
composerTriggerKind === "path" &&
((pathTriggerQuery.length > 0 && composerPathQueryDebouncer.state.isPending) ||
@@ -2215,6 +2215,7 @@
triggerKind={composerTriggerKind}
onHighlightedItemChange={onComposerMenuItemHighlighted}
onSelect={onSelectComposerItem}
+ commandInputRef={composerCommandInputRef}
/>
</div>
)}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx--- a/apps/web/src/components/DiffPanel.tsx+++ b/apps/web/src/components/DiffPanel.tsx@@ -4,7 +4,7 @@
import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
import { ThreadId, type TurnId } from "@t3tools/contracts";
import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
-import { type WheelEvent as ReactWheelEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
import { cn } from "~/lib/utils";
import { readNativeApi } from "../nativeApi";
@@ -346,7 +346,7 @@
if (!element) return;
element.scrollBy({ left: offset, behavior: "smooth" });
}, []);
- const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {+ const onTurnStripWheel = useCallback((event: WheelEvent) => {
const element = turnStripRef.current;
if (!element) return;
if (element.scrollWidth <= element.clientWidth + 1) return;
@@ -364,6 +364,7 @@
const onScroll = () => updateTurnStripScrollState();
element.addEventListener("scroll", onScroll, { passive: true });
+ element.addEventListener("wheel", onTurnStripWheel, { passive: false });
const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
resizeObserver.observe(element);
@@ -371,9 +372,10 @@
return () => {
window.cancelAnimationFrame(frameId);
element.removeEventListener("scroll", onScroll);
+ element.removeEventListener("wheel", onTurnStripWheel);
resizeObserver.disconnect();
};
- }, [updateTurnStripScrollState]);+ }, [updateTurnStripScrollState, onTurnStripWheel]);
useEffect(() => {
const frameId = window.requestAnimationFrame(() => updateTurnStripScrollState());
@@ -431,7 +433,6 @@
<div
ref={turnStripRef}
className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
- onWheel={onTurnStripWheel}
>
<button
type="button"
diff --git a/apps/web/src/store.ts b/apps/web/src/store.ts--- a/apps/web/src/store.ts+++ b/apps/web/src/store.ts@@ -35,7 +35,6 @@
hasRunningSubprocess: boolean;
}
| { type: "SET_PROJECT_EXPANDED"; projectId: Project["id"]; expanded: boolean }
- | { type: "TOGGLE_THREAD_TERMINAL"; threadId: ThreadId }
| { type: "SET_THREAD_TERMINAL_OPEN"; threadId: ThreadId; open: boolean }
| { type: "SET_THREAD_TERMINAL_HEIGHT"; threadId: ThreadId; height: number }
| { type: "SPLIT_THREAD_TERMINAL"; threadId: ThreadId; terminalId: string }
@@ -71,7 +70,6 @@
hasRunningSubprocess: boolean,
) => void;
setProjectExpanded: (projectId: Project["id"], expanded: boolean) => void;
- toggleThreadTerminal: (threadId: ThreadId) => void;
setThreadTerminalOpen: (threadId: ThreadId, open: boolean) => void;
setThreadTerminalHeight: (threadId: ThreadId, height: number) => void;
splitThreadTerminal: (threadId: ThreadId, terminalId: string) => void;
@@ -621,15 +619,6 @@
),
};
- case "TOGGLE_THREAD_TERMINAL":- return {- ...state,- threads: updateThread(state.threads, action.threadId, (t) => ({- ...t,- terminalOpen: !t.terminalOpen,- })),- };-
case "SET_THREAD_TERMINAL_OPEN":
return {
...state,
@@ -860,7 +849,6 @@
}),
setProjectExpanded: (projectId, expanded) =>
applyAction({ type: "SET_PROJECT_EXPANDED", projectId, expanded }),
- toggleThreadTerminal: (threadId) => applyAction({ type: "TOGGLE_THREAD_TERMINAL", threadId }),
setThreadTerminalOpen: (threadId, open) =>
applyAction({ type: "SET_THREAD_TERMINAL_OPEN", threadId, open }),
setThreadTerminalHeight: (threadId, height) =>

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Sent message not scrolled into view when scrolled up
  • Restored shouldAutoScrollRef.current = true and scrollMessagesToBottom() after setOptimisticUserMessages in onSend, which were accidentally removed during the Zustand refactor in commit c283d2a.

Or push these changes by commenting:

@cursor push 992afef58e

Preview (992afef58e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1735,6 +1735,9 @@
},
]);
+ shouldAutoScrollRef.current = true;+ scrollMessagesToBottom();+
setThreadError(threadIdForSend, null);
promptRef.current = "";
clearComposerDraftContent(threadIdForSend);

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 4 issues found in the latest run.

• ✅ Fixed: Duplicate setRespondingRequestIds cleanup call in approval handler
  • Removed the redundant setRespondingRequestIds call after the try/catch/finally block since the finally block already guarantees cleanup.
• ✅ Fixed: Sidebar terminal status indicators won't live-update
  • Changed Sidebar to subscribe to terminalStateByThreadId (which changes on updates) instead of the stable getTerminalState function reference, and read runningTerminalIds directly from the map.
• ✅ Fixed: Stale terminalState closure in runProjectScript callback
  • Added terminalState to the runProjectScript useCallback dependency array so the callback always uses current terminal state.
• ✅ Fixed: Direct store error setter skips local draft threads
  • Replaced setStoreThreadError with the setThreadError wrapper which handles both server threads and local draft threads.

Or push these changes by commenting:

@cursor push 21ed0a6ca0

Preview (21ed0a6ca0)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1146,6 +1146,7 @@
setThreadError,
storeNewTerminal,
storeSetActiveTerminal,
+ terminalState,
],
);
const persistProjectScripts = useCallback(
@@ -1871,7 +1872,7 @@
const shouldCreateWorktree =
isFirstMessage && envMode === "worktree" && !activeThread.worktreePath;
if (shouldCreateWorktree && !activeThread.branch) {
- setStoreThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");+ setThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");
return;
}
@@ -2091,7 +2092,6 @@
} finally {
setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setStoreThreadError],
);
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -240,7 +240,9 @@
(store) => store.getDraftThreadByProjectId,
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
- const getTerminalState = useTerminalStateStore((state) => state.getTerminalState);+ const terminalStateByThreadId = useTerminalStateStore(+ (state) => state.terminalStateByThreadId,+ );
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -826,7 +828,7 @@
);
const prStatus = prStatusIndicator(prByThreadId.get(thread.id) ?? null);
const terminalStatus = terminalStatusFromRunningIds(
- getTerminalState(thread.id).runningTerminalIds,+ terminalStateByThreadId[thread.id]?.runningTerminalIds ?? [],
);
return (

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Removed memoization defeats memo on MessagesTimeline
  • Restored useMemo for timelineMessages, timelineEntries, and revertTurnCountByUserMessageId, and useCallback for onRevertUserMessage, so that stable references are passed to the memo-wrapped MessagesTimeline and it no longer re-renders on every keystroke.

Or push these changes by commenting:

@cursor push 87361b01eb

Preview (87361b01eb)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -673,7 +673,7 @@
delete attachmentPreviewHandoffTimeoutByMessageIdRef.current[messageId];
}, ATTACHMENT_PREVIEW_HANDOFF_TTL_MS);
}, []);
- const timelineMessages = (() => {+ const timelineMessages = useMemo(() => {
const serverMessages = activeThread?.messages ?? [];
const serverMessagesWithPreviewHandoff =
Object.keys(attachmentPreviewHandoffByMessageId).length === 0
@@ -717,8 +717,11 @@
return serverMessagesWithPreviewHandoff;
}
return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
- })();- const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);+ }, [activeThread?.messages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);+ const timelineEntries = useMemo(+ () => deriveTimelineEntries(timelineMessages, workLogEntries),+ [timelineMessages, workLogEntries],+ );
const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
useTurnDiffSummaries(activeThread);
const turnDiffSummaryByAssistantMessageId = useMemo(() => {
@@ -729,7 +732,7 @@
}
return byMessageId;
}, [turnDiffSummaries]);
- const revertTurnCountByUserMessageId = (() => {+ const revertTurnCountByUserMessageId = useMemo(() => {
const byUserMessageId = new Map<MessageId, number>();
for (let index = 0; index < timelineEntries.length; index += 1) {
const entry = timelineEntries[index];
@@ -760,7 +763,7 @@
}
return byUserMessageId;
- })();+ }, [inferredCheckpointTurnCountByTurnId, timelineEntries, turnDiffSummaryByAssistantMessageId]);
const completionSummary = (() => {
if (!latestTurnSettled) return null;
@@ -2219,13 +2222,16 @@
},
[navigate, threadId],
);
- const onRevertUserMessage = (messageId: MessageId) => {- const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);- if (typeof targetTurnCount !== "number") {- return;- }- void onRevertToTurnCount(targetTurnCount);- };+ const onRevertUserMessage = useCallback(+ (messageId: MessageId) => {+ const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);+ if (typeof targetTurnCount !== "number") {+ return;+ }+ void onRevertToTurnCount(targetTurnCount);+ },+ [revertTurnCountByUserMessageId, onRevertToTurnCount],+ );
// Empty state: no active thread
if (!activeThread) {

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Bugbot Autofix prepared fixes for all 3 issues found in the latest run.

• ✅ Fixed: Terminal toggle no longer auto-focuses terminal panel
  • Added setTerminalFocusRequestId((value) => value + 1) in the !previous && current (opening) branch of the terminal open useEffect, restoring the focus trigger that was lost during the refactor.
• ✅ Fixed: Deleted thread terminal state leaks in localStorage
  • Added clearTerminalState(threadId) call in the Sidebar delete handler and a new removeOrphanedTerminalStates action called after syncServerReadModel to prune stale entries for deleted threads.
• ✅ Fixed: Optimistic message blob URLs leak on unmount
  • Added a ref tracking optimisticUserMessages and revoke their blob URLs via revokeUserMessagePreviewUrls in the existing unmount cleanup effect alongside clearAttachmentPreviewHandoffs.

Or push these changes by commenting:

@cursor push 2a6310194a

Preview (2a6310194a)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -479,6 +479,8 @@
const [isDragOverComposer, setIsDragOverComposer] = useState(false);
const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
+ const optimisticUserMessagesRef = useRef(optimisticUserMessages);+ optimisticUserMessagesRef.current = optimisticUserMessages;
const [localDraftErrorsByThreadId, setLocalDraftErrorsByThreadId] = useState<
Record<ThreadId, string | null>
>({});
@@ -634,6 +636,9 @@
useEffect(() => {
return () => {
clearAttachmentPreviewHandoffs();
+ for (const message of optimisticUserMessagesRef.current) {+ revokeUserMessagePreviewUrls(message);+ }
};
}, [clearAttachmentPreviewHandoffs]);
const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
@@ -1542,6 +1547,7 @@
if (!previous && current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
+ setTerminalFocusRequestId((value) => value + 1);
return;
} else if (previous && !current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -241,6 +241,7 @@
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId);
+ const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState);
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -578,6 +579,7 @@
});
clearComposerDraftForThread(threadId);
clearProjectDraftThreadById(thread.projectId, thread.id);
+ clearTerminalState(threadId);
if (shouldNavigateToFallback) {
if (fallbackThreadId) {
void navigate({
@@ -619,6 +621,7 @@
appSettings.confirmThreadDelete,
clearComposerDraftForThread,
clearProjectDraftThreadById,
+ clearTerminalState,
markThreadUnread,
navigate,
projects,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx--- a/apps/web/src/routes/__root.tsx+++ b/apps/web/src/routes/__root.tsx@@ -145,11 +145,20 @@
let syncing = false;
let pending = false;
+ const removeOrphanedTerminalStates =+ useTerminalStateStore.getState().removeOrphanedTerminalStates;+
const flushSnapshotSync = async (): Promise<void> => {
const snapshot = await api.orchestration.getSnapshot();
if (disposed) return;
latestSequence = Math.max(latestSequence, snapshot.snapshotSequence);
syncServerReadModel(snapshot);
+ const activeThreadIds = new Set(+ snapshot.threads+ .filter((t) => t.deletedAt === null)+ .map((t) => t.id),+ );+ removeOrphanedTerminalStates(activeThreadIds);
if (pending) {
pending = false;
await flushSnapshotSync();
diff --git a/apps/web/src/terminalStateStore.ts b/apps/web/src/terminalStateStore.ts--- a/apps/web/src/terminalStateStore.ts+++ b/apps/web/src/terminalStateStore.ts@@ -461,6 +461,7 @@
hasRunningSubprocess: boolean,
) => void;
clearTerminalState: (threadId: ThreadId) => void;
+ removeOrphanedTerminalStates: (activeThreadIds: Set<ThreadId>) => void;
}
export const useTerminalStateStore = create<TerminalStateStoreState>()(
@@ -505,6 +506,18 @@
),
clearTerminalState: (threadId) =>
updateTerminal(threadId, () => createDefaultThreadTerminalState()),
+ removeOrphanedTerminalStates: (activeThreadIds) =>+ set((state) => {+ const orphanedIds = Object.keys(state.terminalStateByThreadId).filter(+ (id) => !activeThreadIds.has(id as ThreadId),+ );+ if (orphanedIds.length === 0) return state;+ const next = { ...state.terminalStateByThreadId };+ for (const id of orphanedIds) {+ delete next[id as ThreadId];+ }+ return { terminalStateByThreadId: next };+ }),
};
},
{

[juliusmarminge]

@cursor push 2a6310194a

[cursor]

Could not push Autofix changes. The PR branch may have changed since the Autofix ran, or the Autofix commit may no longer exist.

[juliusmarminge]

Summary

• Replaced broad useStore() reads in core web UI components with granular selector-based subscriptions to reduce unnecessary re-renders.
• Migrated multiple dispatch-style store updates to explicit store action selectors (thread error, branch, terminal, runtime mode, visited state, terminal sizing).
• Updated ChatView command menu highlight handling to local list-based navigation logic (removed hidden CommandInput event forwarding).
• Improved image preview interaction/accessibility by wrapping preview images in buttons and refining expanded-preview overlay click layering.
• Adjusted virtualization wiring in MessagesTimeline to pass a concrete scroll container element instead of a ref object.
• Added local React Doctor skill docs under apps/web/.agents/react-doctor/ for post-change React diagnostics workflow.

Testing

• Not run (not included in provided commit context).
• Suggested concrete checks: run bun lint and bun typecheck in the repo root.
• Suggested concrete checks: verify chat thread interactions in the web app (composer menu navigation, image preview open/close, terminal split/new/close, runtime mode toggle, diff panel turn-strip scrolling).

---

Note

Medium Risk
Broad refactor of core chat UI state management (threads/projects/runtime mode) and terminal UI state extraction/persistence, which can introduce subtle regressions in navigation, terminal behavior, and rendering lifecycles. No auth/security changes, but it touches frequently-used UI paths.

Overview
Replaces the old reducer/context store with a Zustand store exposing explicit actions (e.g. markThreadVisited, setError, setThreadBranch, setRuntimeMode) and updates components to subscribe via granular selectors instead of broad useStore() reads.

Extracts terminal UI state out of Thread into a new persisted useTerminalStateStore (open/height/ids/groups/running activity), wires terminal activity events + orphan cleanup in the root event router, and updates ChatView/Sidebar/ThreadTerminalDrawer to use the new terminal state/actions.

Includes several UX/lifecycle tweaks: composer command-menu highlight navigation no longer relies on hidden input event forwarding, message timeline virtualization now takes a concrete scroll element, image previews are button-wrapped with improved overlay click layering, and DiffPanel turn-strip wheel scrolling is handled via React onWheel with safer scroll-state updates.

^{Written by Cursor Bugbot for commit ae56cd1. This will update automatically on new commits. Configure here.}

Note

Refactor web app state to use granular Zustand selectors and move per-thread terminal UI into a persisted useTerminalStateStore used by Sidebar, ChatView, and routing

Replace context/reducer with a Zustand store exposing selector-based methods for projects/threads and introduce a persisted terminal state store; update Sidebar, ChatView, BranchToolbar, DiffPanel, and routes to consume selectors and terminal actions; remove terminal fields from types.Thread and adjust tests. Key logic lives in store.ts and terminalStateStore.ts.

📍Where to Start

Start with the store migration in store.ts to see selectors and actions, then review terminal state design in terminalStateStore.ts before scanning consumer changes in apps/web/src/components/Sidebar.tsx and apps/web/src/components/ChatView.tsx.

^{Macroscope summarized ae56cd1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/zustand-store-granular-selectors

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 5 issues found in the latest run.

• ✅ Fixed: React onWheel is passive, preventing scroll interception
  • Restored imperative addEventListener with { passive: false } for the wheel handler and removed the React onWheel JSX prop, so event.preventDefault() works correctly for vertical-to-horizontal scroll conversion.
• ✅ Fixed: Arrow key highlight doesn't update Autocomplete visual state
  • Restored the hidden CommandInput element and the original nudgeComposerMenuHighlight implementation that dispatches synthetic KeyboardEvents to drive base-ui's internal highlight state.
• ✅ Fixed: Removed try/finally leaves switching mode flag stuck on error
  • Wrapped the Promise.all call in a try/finally block to guarantee setIsSwitchingRuntimeMode(false) always executes.
• ✅ Fixed: Removed finally blocks risk permanently stuck send state
  • Restored finally blocks in onSend, onRevertUserMessage, and onRespondToApproval to guarantee critical cleanup (sendInFlightRef, setSendPhase, setIsRevertingCheckpoint, setRespondingRequestIds) always executes.
• ✅ Fixed: Unused toggleThreadTerminal action defined in store
  • Removed the unused toggleThreadTerminal action from the AppStore interface, the reducer action type union, the reducer case, and the store implementation.

Or push these changes by commenting:

@cursor push 2cf69ce16e

Preview (2cf69ce16e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -97,7 +97,7 @@
import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
import { Badge } from "./ui/badge";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { Command, CommandItem, CommandList } from "./ui/command";+import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
import {
@@ -389,6 +389,7 @@
triggerKind: ComposerTriggerKind | null;
onHighlightedItemChange: (itemId: string | null) => void;
onSelect: (item: ComposerCommandItem) => void;
+ commandInputRef: React.RefObject<HTMLInputElement | null>;
}) {
return (
<Command
@@ -400,6 +401,9 @@
}}
>
<div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+ <div className="pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0">+ <CommandInput autoFocus={false} ref={props.commandInputRef} />+ </div>
<CommandList className="max-h-64">
{props.items.map((item) => (
<ComposerCommandMenuItem
@@ -504,6 +508,7 @@
const [messagesScrollElement, setMessagesScrollElement] = useState<HTMLDivElement | null>(null);
const shouldAutoScrollRef = useRef(true);
const textareaRef = useRef<HTMLTextAreaElement>(null);
+ const composerCommandInputRef = useRef<HTMLInputElement>(null);
const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
const sendInFlightRef = useRef(false);
const dragDepthRef = useRef(0);
@@ -1128,19 +1133,22 @@
if (runningThreadIds.length === 0) return;
setIsSwitchingRuntimeMode(true);
- await Promise.all(- runningThreadIds.map((threadId) =>- api.orchestration- .dispatchCommand({- type: "thread.session.stop",- commandId: newCommandId(),- threadId,- createdAt: new Date().toISOString(),- })- .catch(() => undefined),- ),- );- setIsSwitchingRuntimeMode(false);+ try {+ await Promise.all(+ runningThreadIds.map((threadId) =>+ api.orchestration+ .dispatchCommand({+ type: "thread.session.stop",+ commandId: newCommandId(),+ threadId,+ createdAt: new Date().toISOString(),+ })+ .catch(() => undefined),+ ),+ );+ } finally {+ setIsSwitchingRuntimeMode(false);+ }
};
useEffect(() => {
@@ -1670,8 +1678,9 @@
activeThread.id,
err instanceof Error ? err.message : "Failed to revert thread state.",
);
+ } finally {+ setIsRevertingCheckpoint(false);
}
- setIsRevertingCheckpoint(false);
},
[activeThread, isConnecting, isRevertingCheckpoint, isSendBusy, phase, setThreadError],
);
@@ -1877,9 +1886,10 @@
threadIdForSend,
err instanceof Error ? err.message : "Failed to send message.",
);
+ } finally {+ sendInFlightRef.current = false;+ setSendPhase("idle");
}
- sendInFlightRef.current = false;- setSendPhase("idle");
};
const onInterrupt = async () => {
@@ -1915,8 +1925,9 @@
activeThreadId,
err instanceof Error ? err.message : "Failed to submit approval decision.",
);
+ } finally {+ setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setThreadErrorAction],
);
@@ -2003,24 +2014,13 @@
const onComposerMenuItemHighlighted = useCallback((itemId: string | null) => {
setComposerHighlightedItemId(itemId);
}, []);
- const nudgeComposerMenuHighlight = useCallback(- (key: "ArrowDown" | "ArrowUp") => {- if (composerMenuItems.length === 0) {- return;- }- const highlightedIndex = composerMenuItems.findIndex(- (item) => item.id === composerHighlightedItemId,- );- const normalizedIndex =- highlightedIndex >= 0 ? highlightedIndex : key === "ArrowDown" ? -1 : 0;- const offset = key === "ArrowDown" ? 1 : -1;- const nextIndex =- (normalizedIndex + offset + composerMenuItems.length) % composerMenuItems.length;- const nextItem = composerMenuItems[nextIndex];- setComposerHighlightedItemId(nextItem?.id ?? null);- },- [composerHighlightedItemId, composerMenuItems],- );+ const nudgeComposerMenuHighlight = useCallback((key: "ArrowDown" | "ArrowUp") => {+ const commandInput = composerCommandInputRef.current;+ if (!commandInput) return;+ commandInput.dispatchEvent(+ new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),+ );+ }, []);
const isComposerMenuLoading =
composerTriggerKind === "path" &&
((pathTriggerQuery.length > 0 && composerPathQueryDebouncer.state.isPending) ||
@@ -2215,6 +2215,7 @@
triggerKind={composerTriggerKind}
onHighlightedItemChange={onComposerMenuItemHighlighted}
onSelect={onSelectComposerItem}
+ commandInputRef={composerCommandInputRef}
/>
</div>
)}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx--- a/apps/web/src/components/DiffPanel.tsx+++ b/apps/web/src/components/DiffPanel.tsx@@ -4,7 +4,7 @@
import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
import { ThreadId, type TurnId } from "@t3tools/contracts";
import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
-import { type WheelEvent as ReactWheelEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
import { cn } from "~/lib/utils";
import { readNativeApi } from "../nativeApi";
@@ -346,7 +346,7 @@
if (!element) return;
element.scrollBy({ left: offset, behavior: "smooth" });
}, []);
- const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {+ const onTurnStripWheel = useCallback((event: WheelEvent) => {
const element = turnStripRef.current;
if (!element) return;
if (element.scrollWidth <= element.clientWidth + 1) return;
@@ -364,6 +364,7 @@
const onScroll = () => updateTurnStripScrollState();
element.addEventListener("scroll", onScroll, { passive: true });
+ element.addEventListener("wheel", onTurnStripWheel, { passive: false });
const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
resizeObserver.observe(element);
@@ -371,9 +372,10 @@
return () => {
window.cancelAnimationFrame(frameId);
element.removeEventListener("scroll", onScroll);
+ element.removeEventListener("wheel", onTurnStripWheel);
resizeObserver.disconnect();
};
- }, [updateTurnStripScrollState]);+ }, [updateTurnStripScrollState, onTurnStripWheel]);
useEffect(() => {
const frameId = window.requestAnimationFrame(() => updateTurnStripScrollState());
@@ -431,7 +433,6 @@
<div
ref={turnStripRef}
className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
- onWheel={onTurnStripWheel}
>
<button
type="button"
diff --git a/apps/web/src/store.ts b/apps/web/src/store.ts--- a/apps/web/src/store.ts+++ b/apps/web/src/store.ts@@ -35,7 +35,6 @@
hasRunningSubprocess: boolean;
}
| { type: "SET_PROJECT_EXPANDED"; projectId: Project["id"]; expanded: boolean }
- | { type: "TOGGLE_THREAD_TERMINAL"; threadId: ThreadId }
| { type: "SET_THREAD_TERMINAL_OPEN"; threadId: ThreadId; open: boolean }
| { type: "SET_THREAD_TERMINAL_HEIGHT"; threadId: ThreadId; height: number }
| { type: "SPLIT_THREAD_TERMINAL"; threadId: ThreadId; terminalId: string }
@@ -71,7 +70,6 @@
hasRunningSubprocess: boolean,
) => void;
setProjectExpanded: (projectId: Project["id"], expanded: boolean) => void;
- toggleThreadTerminal: (threadId: ThreadId) => void;
setThreadTerminalOpen: (threadId: ThreadId, open: boolean) => void;
setThreadTerminalHeight: (threadId: ThreadId, height: number) => void;
splitThreadTerminal: (threadId: ThreadId, terminalId: string) => void;
@@ -621,15 +619,6 @@
),
};
- case "TOGGLE_THREAD_TERMINAL":- return {- ...state,- threads: updateThread(state.threads, action.threadId, (t) => ({- ...t,- terminalOpen: !t.terminalOpen,- })),- };-
case "SET_THREAD_TERMINAL_OPEN":
return {
...state,
@@ -860,7 +849,6 @@
}),
setProjectExpanded: (projectId, expanded) =>
applyAction({ type: "SET_PROJECT_EXPANDED", projectId, expanded }),
- toggleThreadTerminal: (threadId) => applyAction({ type: "TOGGLE_THREAD_TERMINAL", threadId }),
setThreadTerminalOpen: (threadId, open) =>
applyAction({ type: "SET_THREAD_TERMINAL_OPEN", threadId, open }),
setThreadTerminalHeight: (threadId, height) =>

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Sent message not scrolled into view when scrolled up
  • Restored shouldAutoScrollRef.current = true and scrollMessagesToBottom() after setOptimisticUserMessages in onSend, which were accidentally removed during the Zustand refactor in commit c283d2a.

Or push these changes by commenting:

@cursor push 992afef58e

Preview (992afef58e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1735,6 +1735,9 @@
},
]);
+ shouldAutoScrollRef.current = true;+ scrollMessagesToBottom();+
setThreadError(threadIdForSend, null);
promptRef.current = "";
clearComposerDraftContent(threadIdForSend);

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 4 issues found in the latest run.

• ✅ Fixed: Duplicate setRespondingRequestIds cleanup call in approval handler
  • Removed the redundant setRespondingRequestIds call after the try/catch/finally block since the finally block already guarantees cleanup.
• ✅ Fixed: Sidebar terminal status indicators won't live-update
  • Changed Sidebar to subscribe to terminalStateByThreadId (which changes on updates) instead of the stable getTerminalState function reference, and read runningTerminalIds directly from the map.
• ✅ Fixed: Stale terminalState closure in runProjectScript callback
  • Added terminalState to the runProjectScript useCallback dependency array so the callback always uses current terminal state.
• ✅ Fixed: Direct store error setter skips local draft threads
  • Replaced setStoreThreadError with the setThreadError wrapper which handles both server threads and local draft threads.

Or push these changes by commenting:

@cursor push 21ed0a6ca0

Preview (21ed0a6ca0)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1146,6 +1146,7 @@
setThreadError,
storeNewTerminal,
storeSetActiveTerminal,
+ terminalState,
],
);
const persistProjectScripts = useCallback(
@@ -1871,7 +1872,7 @@
const shouldCreateWorktree =
isFirstMessage && envMode === "worktree" && !activeThread.worktreePath;
if (shouldCreateWorktree && !activeThread.branch) {
- setStoreThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");+ setThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");
return;
}
@@ -2091,7 +2092,6 @@
} finally {
setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setStoreThreadError],
);
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -240,7 +240,9 @@
(store) => store.getDraftThreadByProjectId,
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
- const getTerminalState = useTerminalStateStore((state) => state.getTerminalState);+ const terminalStateByThreadId = useTerminalStateStore(+ (state) => state.terminalStateByThreadId,+ );
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -826,7 +828,7 @@
);
const prStatus = prStatusIndicator(prByThreadId.get(thread.id) ?? null);
const terminalStatus = terminalStatusFromRunningIds(
- getTerminalState(thread.id).runningTerminalIds,+ terminalStateByThreadId[thread.id]?.runningTerminalIds ?? [],
);
return (

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Removed memoization defeats memo on MessagesTimeline
  • Restored useMemo for timelineMessages, timelineEntries, and revertTurnCountByUserMessageId, and useCallback for onRevertUserMessage, so that stable references are passed to the memo-wrapped MessagesTimeline and it no longer re-renders on every keystroke.

Or push these changes by commenting:

@cursor push 87361b01eb

Preview (87361b01eb)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -673,7 +673,7 @@
delete attachmentPreviewHandoffTimeoutByMessageIdRef.current[messageId];
}, ATTACHMENT_PREVIEW_HANDOFF_TTL_MS);
}, []);
- const timelineMessages = (() => {+ const timelineMessages = useMemo(() => {
const serverMessages = activeThread?.messages ?? [];
const serverMessagesWithPreviewHandoff =
Object.keys(attachmentPreviewHandoffByMessageId).length === 0
@@ -717,8 +717,11 @@
return serverMessagesWithPreviewHandoff;
}
return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
- })();- const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);+ }, [activeThread?.messages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);+ const timelineEntries = useMemo(+ () => deriveTimelineEntries(timelineMessages, workLogEntries),+ [timelineMessages, workLogEntries],+ );
const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
useTurnDiffSummaries(activeThread);
const turnDiffSummaryByAssistantMessageId = useMemo(() => {
@@ -729,7 +732,7 @@
}
return byMessageId;
}, [turnDiffSummaries]);
- const revertTurnCountByUserMessageId = (() => {+ const revertTurnCountByUserMessageId = useMemo(() => {
const byUserMessageId = new Map<MessageId, number>();
for (let index = 0; index < timelineEntries.length; index += 1) {
const entry = timelineEntries[index];
@@ -760,7 +763,7 @@
}
return byUserMessageId;
- })();+ }, [inferredCheckpointTurnCountByTurnId, timelineEntries, turnDiffSummaryByAssistantMessageId]);
const completionSummary = (() => {
if (!latestTurnSettled) return null;
@@ -2219,13 +2222,16 @@
},
[navigate, threadId],
);
- const onRevertUserMessage = (messageId: MessageId) => {- const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);- if (typeof targetTurnCount !== "number") {- return;- }- void onRevertToTurnCount(targetTurnCount);- };+ const onRevertUserMessage = useCallback(+ (messageId: MessageId) => {+ const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);+ if (typeof targetTurnCount !== "number") {+ return;+ }+ void onRevertToTurnCount(targetTurnCount);+ },+ [revertTurnCountByUserMessageId, onRevertToTurnCount],+ );
// Empty state: no active thread
if (!activeThread) {

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Bugbot Autofix prepared fixes for all 3 issues found in the latest run.

• ✅ Fixed: Terminal toggle no longer auto-focuses terminal panel
  • Added setTerminalFocusRequestId((value) => value + 1) in the !previous && current (opening) branch of the terminal open useEffect, restoring the focus trigger that was lost during the refactor.
• ✅ Fixed: Deleted thread terminal state leaks in localStorage
  • Added clearTerminalState(threadId) call in the Sidebar delete handler and a new removeOrphanedTerminalStates action called after syncServerReadModel to prune stale entries for deleted threads.
• ✅ Fixed: Optimistic message blob URLs leak on unmount
  • Added a ref tracking optimisticUserMessages and revoke their blob URLs via revokeUserMessagePreviewUrls in the existing unmount cleanup effect alongside clearAttachmentPreviewHandoffs.

Or push these changes by commenting:

@cursor push 2a6310194a

Preview (2a6310194a)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -479,6 +479,8 @@
const [isDragOverComposer, setIsDragOverComposer] = useState(false);
const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
+ const optimisticUserMessagesRef = useRef(optimisticUserMessages);+ optimisticUserMessagesRef.current = optimisticUserMessages;
const [localDraftErrorsByThreadId, setLocalDraftErrorsByThreadId] = useState<
Record<ThreadId, string | null>
>({});
@@ -634,6 +636,9 @@
useEffect(() => {
return () => {
clearAttachmentPreviewHandoffs();
+ for (const message of optimisticUserMessagesRef.current) {+ revokeUserMessagePreviewUrls(message);+ }
};
}, [clearAttachmentPreviewHandoffs]);
const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
@@ -1542,6 +1547,7 @@
if (!previous && current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
+ setTerminalFocusRequestId((value) => value + 1);
return;
} else if (previous && !current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -241,6 +241,7 @@
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId);
+ const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState);
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -578,6 +579,7 @@
});
clearComposerDraftForThread(threadId);
clearProjectDraftThreadById(thread.projectId, thread.id);
+ clearTerminalState(threadId);
if (shouldNavigateToFallback) {
if (fallbackThreadId) {
void navigate({
@@ -619,6 +621,7 @@
appSettings.confirmThreadDelete,
clearComposerDraftForThread,
clearProjectDraftThreadById,
+ clearTerminalState,
markThreadUnread,
navigate,
projects,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx--- a/apps/web/src/routes/__root.tsx+++ b/apps/web/src/routes/__root.tsx@@ -145,11 +145,20 @@
let syncing = false;
let pending = false;
+ const removeOrphanedTerminalStates =+ useTerminalStateStore.getState().removeOrphanedTerminalStates;+
const flushSnapshotSync = async (): Promise<void> => {
const snapshot = await api.orchestration.getSnapshot();
if (disposed) return;
latestSequence = Math.max(latestSequence, snapshot.snapshotSequence);
syncServerReadModel(snapshot);
+ const activeThreadIds = new Set(+ snapshot.threads+ .filter((t) => t.deletedAt === null)+ .map((t) => t.id),+ );+ removeOrphanedTerminalStates(activeThreadIds);
if (pending) {
pending = false;
await flushSnapshotSync();
diff --git a/apps/web/src/terminalStateStore.ts b/apps/web/src/terminalStateStore.ts--- a/apps/web/src/terminalStateStore.ts+++ b/apps/web/src/terminalStateStore.ts@@ -461,6 +461,7 @@
hasRunningSubprocess: boolean,
) => void;
clearTerminalState: (threadId: ThreadId) => void;
+ removeOrphanedTerminalStates: (activeThreadIds: Set<ThreadId>) => void;
}
export const useTerminalStateStore = create<TerminalStateStoreState>()(
@@ -505,6 +506,18 @@
),
clearTerminalState: (threadId) =>
updateTerminal(threadId, () => createDefaultThreadTerminalState()),
+ removeOrphanedTerminalStates: (activeThreadIds) =>+ set((state) => {+ const orphanedIds = Object.keys(state.terminalStateByThreadId).filter(+ (id) => !activeThreadIds.has(id as ThreadId),+ );+ if (orphanedIds.length === 0) return state;+ const next = { ...state.terminalStateByThreadId };+ for (const id of orphanedIds) {+ delete next[id as ThreadId];+ }+ return { terminalStateByThreadId: next };+ }),
};
},
{

[juliusmarminge]

@cursor push 2a6310194a

[cursor]

Could not push Autofix changes. The PR branch may have changed since the Autofix ran, or the Autofix commit may no longer exist.

[juliusmarminge]

Summary

• Replaced broad useStore() reads in core web UI components with granular selector-based subscriptions to reduce unnecessary re-renders.
• Migrated multiple dispatch-style store updates to explicit store action selectors (thread error, branch, terminal, runtime mode, visited state, terminal sizing).
• Updated ChatView command menu highlight handling to local list-based navigation logic (removed hidden CommandInput event forwarding).
• Improved image preview interaction/accessibility by wrapping preview images in buttons and refining expanded-preview overlay click layering.
• Adjusted virtualization wiring in MessagesTimeline to pass a concrete scroll container element instead of a ref object.
• Added local React Doctor skill docs under apps/web/.agents/react-doctor/ for post-change React diagnostics workflow.

Testing

• Not run (not included in provided commit context).
• Suggested concrete checks: run bun lint and bun typecheck in the repo root.
• Suggested concrete checks: verify chat thread interactions in the web app (composer menu navigation, image preview open/close, terminal split/new/close, runtime mode toggle, diff panel turn-strip scrolling).

---

Note

Medium Risk
Broad refactor of core chat UI state management (threads/projects/runtime mode) and terminal UI state extraction/persistence, which can introduce subtle regressions in navigation, terminal behavior, and rendering lifecycles. No auth/security changes, but it touches frequently-used UI paths.

Overview
Replaces the old reducer/context store with a Zustand store exposing explicit actions (e.g. markThreadVisited, setError, setThreadBranch, setRuntimeMode) and updates components to subscribe via granular selectors instead of broad useStore() reads.

Extracts terminal UI state out of Thread into a new persisted useTerminalStateStore (open/height/ids/groups/running activity), wires terminal activity events + orphan cleanup in the root event router, and updates ChatView/Sidebar/ThreadTerminalDrawer to use the new terminal state/actions.

Includes several UX/lifecycle tweaks: composer command-menu highlight navigation no longer relies on hidden input event forwarding, message timeline virtualization now takes a concrete scroll element, image previews are button-wrapped with improved overlay click layering, and DiffPanel turn-strip wheel scrolling is handled via React onWheel with safer scroll-state updates.

^{Written by Cursor Bugbot for commit ae56cd1. This will update automatically on new commits. Configure here.}

Note

Refactor web app state to use granular Zustand selectors and move per-thread terminal UI into a persisted useTerminalStateStore used by Sidebar, ChatView, and routing

Replace context/reducer with a Zustand store exposing selector-based methods for projects/threads and introduce a persisted terminal state store; update Sidebar, ChatView, BranchToolbar, DiffPanel, and routes to consume selectors and terminal actions; remove terminal fields from types.Thread and adjust tests. Key logic lives in store.ts and terminalStateStore.ts.

📍Where to Start

Start with the store migration in store.ts to see selectors and actions, then review terminal state design in terminalStateStore.ts before scanning consumer changes in apps/web/src/components/Sidebar.tsx and apps/web/src/components/ChatView.tsx.

^{Macroscope summarized ae56cd1.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch t3code/zustand-store-granular-selectors

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 5 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 5 issues found in the latest run.

• ✅ Fixed: React onWheel is passive, preventing scroll interception
  • Restored imperative addEventListener with { passive: false } for the wheel handler and removed the React onWheel JSX prop, so event.preventDefault() works correctly for vertical-to-horizontal scroll conversion.
• ✅ Fixed: Arrow key highlight doesn't update Autocomplete visual state
  • Restored the hidden CommandInput element and the original nudgeComposerMenuHighlight implementation that dispatches synthetic KeyboardEvents to drive base-ui's internal highlight state.
• ✅ Fixed: Removed try/finally leaves switching mode flag stuck on error
  • Wrapped the Promise.all call in a try/finally block to guarantee setIsSwitchingRuntimeMode(false) always executes.
• ✅ Fixed: Removed finally blocks risk permanently stuck send state
  • Restored finally blocks in onSend, onRevertUserMessage, and onRespondToApproval to guarantee critical cleanup (sendInFlightRef, setSendPhase, setIsRevertingCheckpoint, setRespondingRequestIds) always executes.
• ✅ Fixed: Unused toggleThreadTerminal action defined in store
  • Removed the unused toggleThreadTerminal action from the AppStore interface, the reducer action type union, the reducer case, and the store implementation.

Or push these changes by commenting:

@cursor push 2cf69ce16e

Preview (2cf69ce16e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -97,7 +97,7 @@
import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
import { Badge } from "./ui/badge";
import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
-import { Command, CommandItem, CommandList } from "./ui/command";+import { Command, CommandInput, CommandItem, CommandList } from "./ui/command";
import { decodeProjectScriptKeybindingRule } from "~/lib/projectScriptKeybindings";
import ProjectScriptsControl, { type NewProjectScriptInput } from "./ProjectScriptsControl";
import {
@@ -389,6 +389,7 @@
triggerKind: ComposerTriggerKind | null;
onHighlightedItemChange: (itemId: string | null) => void;
onSelect: (item: ComposerCommandItem) => void;
+ commandInputRef: React.RefObject<HTMLInputElement | null>;
}) {
return (
<Command
@@ -400,6 +401,9 @@
}}
>
<div className="relative overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+ <div className="pointer-events-none absolute h-0 w-0 overflow-hidden opacity-0">+ <CommandInput autoFocus={false} ref={props.commandInputRef} />+ </div>
<CommandList className="max-h-64">
{props.items.map((item) => (
<ComposerCommandMenuItem
@@ -504,6 +508,7 @@
const [messagesScrollElement, setMessagesScrollElement] = useState<HTMLDivElement | null>(null);
const shouldAutoScrollRef = useRef(true);
const textareaRef = useRef<HTMLTextAreaElement>(null);
+ const composerCommandInputRef = useRef<HTMLInputElement>(null);
const composerImagesRef = useRef<ComposerImageAttachment[]>([]);
const sendInFlightRef = useRef(false);
const dragDepthRef = useRef(0);
@@ -1128,19 +1133,22 @@
if (runningThreadIds.length === 0) return;
setIsSwitchingRuntimeMode(true);
- await Promise.all(- runningThreadIds.map((threadId) =>- api.orchestration- .dispatchCommand({- type: "thread.session.stop",- commandId: newCommandId(),- threadId,- createdAt: new Date().toISOString(),- })- .catch(() => undefined),- ),- );- setIsSwitchingRuntimeMode(false);+ try {+ await Promise.all(+ runningThreadIds.map((threadId) =>+ api.orchestration+ .dispatchCommand({+ type: "thread.session.stop",+ commandId: newCommandId(),+ threadId,+ createdAt: new Date().toISOString(),+ })+ .catch(() => undefined),+ ),+ );+ } finally {+ setIsSwitchingRuntimeMode(false);+ }
};
useEffect(() => {
@@ -1670,8 +1678,9 @@
activeThread.id,
err instanceof Error ? err.message : "Failed to revert thread state.",
);
+ } finally {+ setIsRevertingCheckpoint(false);
}
- setIsRevertingCheckpoint(false);
},
[activeThread, isConnecting, isRevertingCheckpoint, isSendBusy, phase, setThreadError],
);
@@ -1877,9 +1886,10 @@
threadIdForSend,
err instanceof Error ? err.message : "Failed to send message.",
);
+ } finally {+ sendInFlightRef.current = false;+ setSendPhase("idle");
}
- sendInFlightRef.current = false;- setSendPhase("idle");
};
const onInterrupt = async () => {
@@ -1915,8 +1925,9 @@
activeThreadId,
err instanceof Error ? err.message : "Failed to submit approval decision.",
);
+ } finally {+ setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setThreadErrorAction],
);
@@ -2003,24 +2014,13 @@
const onComposerMenuItemHighlighted = useCallback((itemId: string | null) => {
setComposerHighlightedItemId(itemId);
}, []);
- const nudgeComposerMenuHighlight = useCallback(- (key: "ArrowDown" | "ArrowUp") => {- if (composerMenuItems.length === 0) {- return;- }- const highlightedIndex = composerMenuItems.findIndex(- (item) => item.id === composerHighlightedItemId,- );- const normalizedIndex =- highlightedIndex >= 0 ? highlightedIndex : key === "ArrowDown" ? -1 : 0;- const offset = key === "ArrowDown" ? 1 : -1;- const nextIndex =- (normalizedIndex + offset + composerMenuItems.length) % composerMenuItems.length;- const nextItem = composerMenuItems[nextIndex];- setComposerHighlightedItemId(nextItem?.id ?? null);- },- [composerHighlightedItemId, composerMenuItems],- );+ const nudgeComposerMenuHighlight = useCallback((key: "ArrowDown" | "ArrowUp") => {+ const commandInput = composerCommandInputRef.current;+ if (!commandInput) return;+ commandInput.dispatchEvent(+ new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),+ );+ }, []);
const isComposerMenuLoading =
composerTriggerKind === "path" &&
((pathTriggerQuery.length > 0 && composerPathQueryDebouncer.state.isPending) ||
@@ -2215,6 +2215,7 @@
triggerKind={composerTriggerKind}
onHighlightedItemChange={onComposerMenuItemHighlighted}
onSelect={onSelectComposerItem}
+ commandInputRef={composerCommandInputRef}
/>
</div>
)}
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx--- a/apps/web/src/components/DiffPanel.tsx+++ b/apps/web/src/components/DiffPanel.tsx@@ -4,7 +4,7 @@
import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
import { ThreadId, type TurnId } from "@t3tools/contracts";
import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
-import { type WheelEvent as ReactWheelEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
import { cn } from "~/lib/utils";
import { readNativeApi } from "../nativeApi";
@@ -346,7 +346,7 @@
if (!element) return;
element.scrollBy({ left: offset, behavior: "smooth" });
}, []);
- const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {+ const onTurnStripWheel = useCallback((event: WheelEvent) => {
const element = turnStripRef.current;
if (!element) return;
if (element.scrollWidth <= element.clientWidth + 1) return;
@@ -364,6 +364,7 @@
const onScroll = () => updateTurnStripScrollState();
element.addEventListener("scroll", onScroll, { passive: true });
+ element.addEventListener("wheel", onTurnStripWheel, { passive: false });
const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
resizeObserver.observe(element);
@@ -371,9 +372,10 @@
return () => {
window.cancelAnimationFrame(frameId);
element.removeEventListener("scroll", onScroll);
+ element.removeEventListener("wheel", onTurnStripWheel);
resizeObserver.disconnect();
};
- }, [updateTurnStripScrollState]);+ }, [updateTurnStripScrollState, onTurnStripWheel]);
useEffect(() => {
const frameId = window.requestAnimationFrame(() => updateTurnStripScrollState());
@@ -431,7 +433,6 @@
<div
ref={turnStripRef}
className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
- onWheel={onTurnStripWheel}
>
<button
type="button"
diff --git a/apps/web/src/store.ts b/apps/web/src/store.ts--- a/apps/web/src/store.ts+++ b/apps/web/src/store.ts@@ -35,7 +35,6 @@
hasRunningSubprocess: boolean;
}
| { type: "SET_PROJECT_EXPANDED"; projectId: Project["id"]; expanded: boolean }
- | { type: "TOGGLE_THREAD_TERMINAL"; threadId: ThreadId }
| { type: "SET_THREAD_TERMINAL_OPEN"; threadId: ThreadId; open: boolean }
| { type: "SET_THREAD_TERMINAL_HEIGHT"; threadId: ThreadId; height: number }
| { type: "SPLIT_THREAD_TERMINAL"; threadId: ThreadId; terminalId: string }
@@ -71,7 +70,6 @@
hasRunningSubprocess: boolean,
) => void;
setProjectExpanded: (projectId: Project["id"], expanded: boolean) => void;
- toggleThreadTerminal: (threadId: ThreadId) => void;
setThreadTerminalOpen: (threadId: ThreadId, open: boolean) => void;
setThreadTerminalHeight: (threadId: ThreadId, height: number) => void;
splitThreadTerminal: (threadId: ThreadId, terminalId: string) => void;
@@ -621,15 +619,6 @@
),
};
- case "TOGGLE_THREAD_TERMINAL":- return {- ...state,- threads: updateThread(state.threads, action.threadId, (t) => ({- ...t,- terminalOpen: !t.terminalOpen,- })),- };-
case "SET_THREAD_TERMINAL_OPEN":
return {
...state,
@@ -860,7 +849,6 @@
}),
setProjectExpanded: (projectId, expanded) =>
applyAction({ type: "SET_PROJECT_EXPANDED", projectId, expanded }),
- toggleThreadTerminal: (threadId) => applyAction({ type: "TOGGLE_THREAD_TERMINAL", threadId }),
setThreadTerminalOpen: (threadId, open) =>
applyAction({ type: "SET_THREAD_TERMINAL_OPEN", threadId, open }),
setThreadTerminalHeight: (threadId, height) =>

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Sent message not scrolled into view when scrolled up
  • Restored shouldAutoScrollRef.current = true and scrollMessagesToBottom() after setOptimisticUserMessages in onSend, which were accidentally removed during the Zustand refactor in commit c283d2a.

Or push these changes by commenting:

@cursor push 992afef58e

Preview (992afef58e)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1735,6 +1735,9 @@
},
]);
+ shouldAutoScrollRef.current = true;+ scrollMessagesToBottom();+
setThreadError(threadIdForSend, null);
promptRef.current = "";
clearComposerDraftContent(threadIdForSend);

[cursor]

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for all 4 issues found in the latest run.

• ✅ Fixed: Duplicate setRespondingRequestIds cleanup call in approval handler
  • Removed the redundant setRespondingRequestIds call after the try/catch/finally block since the finally block already guarantees cleanup.
• ✅ Fixed: Sidebar terminal status indicators won't live-update
  • Changed Sidebar to subscribe to terminalStateByThreadId (which changes on updates) instead of the stable getTerminalState function reference, and read runningTerminalIds directly from the map.
• ✅ Fixed: Stale terminalState closure in runProjectScript callback
  • Added terminalState to the runProjectScript useCallback dependency array so the callback always uses current terminal state.
• ✅ Fixed: Direct store error setter skips local draft threads
  • Replaced setStoreThreadError with the setThreadError wrapper which handles both server threads and local draft threads.

Or push these changes by commenting:

@cursor push 21ed0a6ca0

Preview (21ed0a6ca0)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -1146,6 +1146,7 @@
setThreadError,
storeNewTerminal,
storeSetActiveTerminal,
+ terminalState,
],
);
const persistProjectScripts = useCallback(
@@ -1871,7 +1872,7 @@
const shouldCreateWorktree =
isFirstMessage && envMode === "worktree" && !activeThread.worktreePath;
if (shouldCreateWorktree && !activeThread.branch) {
- setStoreThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");+ setThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");
return;
}
@@ -2091,7 +2092,6 @@
} finally {
setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
}
- setRespondingRequestIds((existing) => existing.filter((id) => id !== requestId));
},
[activeThreadId, setStoreThreadError],
);
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -240,7 +240,9 @@
(store) => store.getDraftThreadByProjectId,
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
- const getTerminalState = useTerminalStateStore((state) => state.getTerminalState);+ const terminalStateByThreadId = useTerminalStateStore(+ (state) => state.terminalStateByThreadId,+ );
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -826,7 +828,7 @@
);
const prStatus = prStatusIndicator(prByThreadId.get(thread.id) ?? null);
const terminalStatus = terminalStatusFromRunningIds(
- getTerminalState(thread.id).runningTerminalIds,+ terminalStateByThreadId[thread.id]?.runningTerminalIds ?? [],
);
return (

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Removed memoization defeats memo on MessagesTimeline
  • Restored useMemo for timelineMessages, timelineEntries, and revertTurnCountByUserMessageId, and useCallback for onRevertUserMessage, so that stable references are passed to the memo-wrapped MessagesTimeline and it no longer re-renders on every keystroke.

Or push these changes by commenting:

@cursor push 87361b01eb

Preview (87361b01eb)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -673,7 +673,7 @@
delete attachmentPreviewHandoffTimeoutByMessageIdRef.current[messageId];
}, ATTACHMENT_PREVIEW_HANDOFF_TTL_MS);
}, []);
- const timelineMessages = (() => {+ const timelineMessages = useMemo(() => {
const serverMessages = activeThread?.messages ?? [];
const serverMessagesWithPreviewHandoff =
Object.keys(attachmentPreviewHandoffByMessageId).length === 0
@@ -717,8 +717,11 @@
return serverMessagesWithPreviewHandoff;
}
return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
- })();- const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);+ }, [activeThread?.messages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);+ const timelineEntries = useMemo(+ () => deriveTimelineEntries(timelineMessages, workLogEntries),+ [timelineMessages, workLogEntries],+ );
const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
useTurnDiffSummaries(activeThread);
const turnDiffSummaryByAssistantMessageId = useMemo(() => {
@@ -729,7 +732,7 @@
}
return byMessageId;
}, [turnDiffSummaries]);
- const revertTurnCountByUserMessageId = (() => {+ const revertTurnCountByUserMessageId = useMemo(() => {
const byUserMessageId = new Map<MessageId, number>();
for (let index = 0; index < timelineEntries.length; index += 1) {
const entry = timelineEntries[index];
@@ -760,7 +763,7 @@
}
return byUserMessageId;
- })();+ }, [inferredCheckpointTurnCountByTurnId, timelineEntries, turnDiffSummaryByAssistantMessageId]);
const completionSummary = (() => {
if (!latestTurnSettled) return null;
@@ -2219,13 +2222,16 @@
},
[navigate, threadId],
);
- const onRevertUserMessage = (messageId: MessageId) => {- const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);- if (typeof targetTurnCount !== "number") {- return;- }- void onRevertToTurnCount(targetTurnCount);- };+ const onRevertUserMessage = useCallback(+ (messageId: MessageId) => {+ const targetTurnCount = revertTurnCountByUserMessageId.get(messageId);+ if (typeof targetTurnCount !== "number") {+ return;+ }+ void onRevertToTurnCount(targetTurnCount);+ },+ [revertTurnCountByUserMessageId, onRevertToTurnCount],+ );
// Empty state: no active thread
if (!activeThread) {

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

Bugbot Autofix prepared fixes for all 3 issues found in the latest run.

• ✅ Fixed: Terminal toggle no longer auto-focuses terminal panel
  • Added setTerminalFocusRequestId((value) => value + 1) in the !previous && current (opening) branch of the terminal open useEffect, restoring the focus trigger that was lost during the refactor.
• ✅ Fixed: Deleted thread terminal state leaks in localStorage
  • Added clearTerminalState(threadId) call in the Sidebar delete handler and a new removeOrphanedTerminalStates action called after syncServerReadModel to prune stale entries for deleted threads.
• ✅ Fixed: Optimistic message blob URLs leak on unmount
  • Added a ref tracking optimisticUserMessages and revoke their blob URLs via revokeUserMessagePreviewUrls in the existing unmount cleanup effect alongside clearAttachmentPreviewHandoffs.

Or push these changes by commenting:

@cursor push 2a6310194a

Preview (2a6310194a)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx--- a/apps/web/src/components/ChatView.tsx+++ b/apps/web/src/components/ChatView.tsx@@ -479,6 +479,8 @@
const [isDragOverComposer, setIsDragOverComposer] = useState(false);
const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
const [optimisticUserMessages, setOptimisticUserMessages] = useState<ChatMessage[]>([]);
+ const optimisticUserMessagesRef = useRef(optimisticUserMessages);+ optimisticUserMessagesRef.current = optimisticUserMessages;
const [localDraftErrorsByThreadId, setLocalDraftErrorsByThreadId] = useState<
Record<ThreadId, string | null>
>({});
@@ -634,6 +636,9 @@
useEffect(() => {
return () => {
clearAttachmentPreviewHandoffs();
+ for (const message of optimisticUserMessagesRef.current) {+ revokeUserMessagePreviewUrls(message);+ }
};
}, [clearAttachmentPreviewHandoffs]);
const handoffAttachmentPreviews = useCallback((messageId: MessageId, previewUrls: string[]) => {
@@ -1542,6 +1547,7 @@
if (!previous && current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
+ setTerminalFocusRequestId((value) => value + 1);
return;
} else if (previous && !current) {
terminalOpenByThreadRef.current[activeThreadId] = current;
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx--- a/apps/web/src/components/Sidebar.tsx+++ b/apps/web/src/components/Sidebar.tsx@@ -241,6 +241,7 @@
);
const getDraftThread = useComposerDraftStore((store) => store.getDraftThread);
const terminalStateByThreadId = useTerminalStateStore((state) => state.terminalStateByThreadId);
+ const clearTerminalState = useTerminalStateStore((state) => state.clearTerminalState);
const setProjectDraftThreadId = useComposerDraftStore((store) => store.setProjectDraftThreadId);
const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
const clearProjectDraftThreadId = useComposerDraftStore(
@@ -578,6 +579,7 @@
});
clearComposerDraftForThread(threadId);
clearProjectDraftThreadById(thread.projectId, thread.id);
+ clearTerminalState(threadId);
if (shouldNavigateToFallback) {
if (fallbackThreadId) {
void navigate({
@@ -619,6 +621,7 @@
appSettings.confirmThreadDelete,
clearComposerDraftForThread,
clearProjectDraftThreadById,
+ clearTerminalState,
markThreadUnread,
navigate,
projects,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx--- a/apps/web/src/routes/__root.tsx+++ b/apps/web/src/routes/__root.tsx@@ -145,11 +145,20 @@
let syncing = false;
let pending = false;
+ const removeOrphanedTerminalStates =+ useTerminalStateStore.getState().removeOrphanedTerminalStates;+
const flushSnapshotSync = async (): Promise<void> => {
const snapshot = await api.orchestration.getSnapshot();
if (disposed) return;
latestSequence = Math.max(latestSequence, snapshot.snapshotSequence);
syncServerReadModel(snapshot);
+ const activeThreadIds = new Set(+ snapshot.threads+ .filter((t) => t.deletedAt === null)+ .map((t) => t.id),+ );+ removeOrphanedTerminalStates(activeThreadIds);
if (pending) {
pending = false;
await flushSnapshotSync();
diff --git a/apps/web/src/terminalStateStore.ts b/apps/web/src/terminalStateStore.ts--- a/apps/web/src/terminalStateStore.ts+++ b/apps/web/src/terminalStateStore.ts@@ -461,6 +461,7 @@
hasRunningSubprocess: boolean,
) => void;
clearTerminalState: (threadId: ThreadId) => void;
+ removeOrphanedTerminalStates: (activeThreadIds: Set<ThreadId>) => void;
}
export const useTerminalStateStore = create<TerminalStateStoreState>()(
@@ -505,6 +506,18 @@
),
clearTerminalState: (threadId) =>
updateTerminal(threadId, () => createDefaultThreadTerminalState()),
+ removeOrphanedTerminalStates: (activeThreadIds) =>+ set((state) => {+ const orphanedIds = Object.keys(state.terminalStateByThreadId).filter(+ (id) => !activeThreadIds.has(id as ThreadId),+ );+ if (orphanedIds.length === 0) return state;+ const next = { ...state.terminalStateByThreadId };+ for (const id of orphanedIds) {+ delete next[id as ThreadId];+ }+ return { terminalStateByThreadId: next };+ }),
};
},
{

[juliusmarminge]

@cursor push 2a6310194a

[cursor]

Could not push Autofix changes. The PR branch may have changed since the Autofix ran, or the Autofix commit may no longer exist.