Commit 4e45c1a6abef59bc99ae1bea3c7a8be9d8775c66 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-03-02 12:53:45-08:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-03-02 13:13:19-08:00
log	4e45c1a6abef59bc99ae1bea3c7a8be9d8775c66
tree	cd057aa5afbe91815be657ff5bf2fcde92701cb3
parent	32fe80d1647ea9fb466fe5fab67b74fea78f011b

Fix store selector consistency, memoize timelineMessages, and suppress false-positive lint warnings

- Hoist removeOrphanedTerminalStates to a top-level selector in EventRouter
  for consistency with other store selectors
- Convert timelineMessages IIFE to useMemo with proper deps
- Suppress no-map-spread in ChatView (spread is conditional, immutability required)
- Suppress exhaustive-deps for autoFocus in TerminalViewport (mount-time only)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

3 files changed, 57 insertions(+), 32 deletions(-)

apps
- web
  - src
    components
    ChatView.tsx
    ThreadTerminalDrawer.tsx
    routes
    __root.tsx

apps/web/src/components/ChatView.tsx+50-28

 @@ -474,7 +474,9 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const clearComposerDraftContent = useComposerDraftStore((store) => store.clearComposerContent);
   const clearDraftThread = useComposerDraftStore((store) => store.clearDraftThread);
   const setDraftThreadContext = useComposerDraftStore((store) => store.setDraftThreadContext);
-  const draftThread = useComposerDraftStore((store) => store.draftThreadsByThreadId[threadId] ?? null);
+  const draftThread = useComposerDraftStore(
+    (store) => store.draftThreadsByThreadId[threadId] ?? null,
+  );
   const promptRef = useRef(prompt);
   const [isDragOverComposer, setIsDragOverComposer] = useState(false);
   const [expandedImage, setExpandedImage] = useState<ExpandedImagePreview | null>(null);
 @@ -604,7 +606,9 @@ export default function ChatView({ threadId }: ChatViewProps) {
     markThreadVisited,
   ]);
-  const baseThreadModel = resolveModelSlug(activeThread?.model ?? activeProject?.model ?? DEFAULT_MODEL);
+  const baseThreadModel = resolveModelSlug(
+    activeThread?.model ?? activeProject?.model ?? DEFAULT_MODEL,
+  );
   const selectedModel = resolveModelSlug(composerDraft.model ?? baseThreadModel);
   const selectedEffort = composerDraft.effort ?? DEFAULT_REASONING;
   const modelOptions = getAppModelOptions(settings.customCodexModels, selectedModel);
 @@ -614,8 +618,14 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const isWorking = phase === "running" || isSendBusy || isConnecting || isRevertingCheckpoint;
   const nowIso = new Date(nowTick).toISOString();
   const threadActivities = activeThread?.activities ?? [];
-  const workLogEntries = deriveWorkLogEntries(threadActivities, activeLatestTurn?.turnId ?? undefined);
+  const workLogEntries = deriveWorkLogEntries(
-  const latestTurnHasToolActivity = hasToolActivityForTurn(threadActivities, activeLatestTurn?.turnId);
+    threadActivities,
+    activeLatestTurn?.turnId ?? undefined,
+  );
+  const latestTurnHasToolActivity = hasToolActivityForTurn(
+    threadActivities,
+    activeLatestTurn?.turnId,
+  );
   const pendingApprovals = derivePendingApprovals(threadActivities);
   useEffect(() => {
     attachmentPreviewHandoffByMessageIdRef.current = attachmentPreviewHandoffByMessageId;
 @@ -680,13 +690,22 @@ export default function ChatView({ threadId }: ChatViewProps) {
       delete attachmentPreviewHandoffTimeoutByMessageIdRef.current[messageId];
     }, ATTACHMENT_PREVIEW_HANDOFF_TTL_MS);
   }, []);
-  const timelineMessages = (() => {
+  const serverMessages = activeThread?.messages;
-    const serverMessages = activeThread?.messages ?? [];
+  const timelineMessages = useMemo(() => {
+    const messages = serverMessages ?? [];
     const serverMessagesWithPreviewHandoff =
       Object.keys(attachmentPreviewHandoffByMessageId).length === 0
-        ? serverMessages
+        ? messages
-        : serverMessages.map((message) => {
+        : // Spread only fires for the few messages that actually changed;
-            if (message.role !== "user" || !message.attachments || message.attachments.length === 0) {
+          // unchanged ones early-return their original reference.
+          // In-place mutation would break React's immutable state contract.
+          // oxlint-disable-next-line no-map-spread
+          messages.map((message) => {
+            if (
+              message.role !== "user" ||
+              !message.attachments ||
+              message.attachments.length === 0
+            ) {
               return message;
             }
             const handoffPreviewUrls = attachmentPreviewHandoffByMessageId[message.id];
 @@ -724,7 +743,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
       return serverMessagesWithPreviewHandoff;
     }
     return [...serverMessagesWithPreviewHandoff, ...pendingMessages];
-  })();
+  }, [serverMessages, attachmentPreviewHandoffByMessageId, optimisticUserMessages]);
   const timelineEntries = deriveTimelineEntries(timelineMessages, workLogEntries);
   const { turnDiffSummaries, inferredCheckpointTurnCountByTurnId } =
     useTurnDiffSummaries(activeThread);
 @@ -937,8 +956,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
     (activeThread.messages.length > 0 ||
       (activeThread.session !== null && activeThread.session.status !== "closed")),
   );
-  const hasReachedTerminalLimit =
+  const hasReachedTerminalLimit = terminalState.terminalIds.length >= MAX_THREAD_TERMINAL_COUNT;
-    terminalState.terminalIds.length >= MAX_THREAD_TERMINAL_COUNT;
   const setThreadError = useCallback(
     (targetThreadId: ThreadId | null, error: string | null) => {
       if (!targetThreadId) return;
 @@ -1390,12 +1408,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
     return () => {
       window.clearTimeout(timer);
     };
-  }, [
+  }, [activeThread?.id, activeThread?.messages, handoffAttachmentPreviews, optimisticUserMessages]);
-    activeThread?.id,
-    activeThread?.messages,
-    handoffAttachmentPreviews,
-    optimisticUserMessages,
-  ]);
   useEffect(() => {
     promptRef.current = prompt;
 @@ -1810,7 +1823,10 @@ export default function ChatView({ threadId }: ChatViewProps) {
     const shouldCreateWorktree =
       isFirstMessage && envMode === "worktree" && !activeThread.worktreePath;
     if (shouldCreateWorktree && !activeThread.branch) {
-      setStoreThreadError(threadIdForSend, "Select a base branch before sending in New worktree mode.");
+      setStoreThreadError(
+        threadIdForSend,
+        "Select a base branch before sending in New worktree mode.",
+      );
       return;
     }
 @@ -1965,8 +1981,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
       setSendPhase("sending-turn");
       const turnAttachments = await turnAttachmentsPromise;
       const approvalPolicy = runtimeMode === "full-access" ? "never" : "on-request";
-      const sandboxMode =
+      const sandboxMode = runtimeMode === "full-access" ? "danger-full-access" : "workspace-write";
-        runtimeMode === "full-access" ? "danger-full-access" : "workspace-write";
       await api.orchestration.dispatchCommand({
         type: "thread.turn.start",
         commandId: newCommandId(),
 @@ -2169,11 +2184,14 @@ export default function ChatView({ threadId }: ChatViewProps) {
       workspaceEntriesQuery.isLoading ||
       workspaceEntriesQuery.isFetching);
-  const onPromptChange = useCallback((nextPrompt: string, nextCursor: number) => {
+  const onPromptChange = useCallback(
-    promptRef.current = nextPrompt;
+    (nextPrompt: string, nextCursor: number) => {
-    setPrompt(nextPrompt);
+      promptRef.current = nextPrompt;
-    setComposerCursor(nextCursor);
+      setPrompt(nextPrompt);
-  }, [setComposerCursor, setPrompt]);
+      setComposerCursor(nextCursor);
+    },
+    [setComposerCursor, setPrompt],
+  );
   const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (composerMenuOpen && composerMenuItems.length > 0) {
 @@ -2402,8 +2420,12 @@ export default function ChatView({ threadId }: ChatViewProps) {
                               </span>
                             }
                           />
-                          <TooltipPopup side="top" className="max-w-64 whitespace-normal leading-tight">
+                          <TooltipPopup
-                            Draft attachment could not be saved locally and may be lost on navigation.
+                            side="top"
+                            className="max-w-64 whitespace-normal leading-tight"
+                          >
+                            Draft attachment could not be saved locally and may be lost on
+                            navigation.
                           </TooltipPopup>
                         </Tooltip>
                       )}

apps/web/src/components/ThreadTerminalDrawer.tsx+3

 @@ -389,6 +389,9 @@ function TerminalViewport({
       fitAddonRef.current = null;
       terminal.dispose();
     };
+    // autoFocus is intentionally omitted;
+    // it is only read at mount time and must not trigger terminal teardown/recreation.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [cwd, runtimeEnv, terminalId, threadId]);
   useEffect(() => {

apps/web/src/routes/__root.tsx+4-4

...	@@ -126,6 +126,9 @@ function errorDetails(error: unknown): string {	...	@@ -126,6 +126,9 @@ function errorDetails(error: unknown): string {
126	function EventRouter() {	126	function EventRouter() {
127	const syncServerReadModel = useStore((store) => store.syncServerReadModel);	127	const syncServerReadModel = useStore((store) => store.syncServerReadModel);
128	const setProjectExpanded = useStore((store) => store.setProjectExpanded);	128	const setProjectExpanded = useStore((store) => store.setProjectExpanded);
		129	const removeOrphanedTerminalStates = useTerminalStateStore(
		130	(store) => store.removeOrphanedTerminalStates,
		131	);
129	const queryClient = useQueryClient();	132	const queryClient = useQueryClient();
130	const navigate = useNavigate();	133	const navigate = useNavigate();
131	const pathname = useRouterState({ select: (state) => state.location.pathname });	134	const pathname = useRouterState({ select: (state) => state.location.pathname });
...	@@ -143,9 +146,6 @@ function EventRouter() {	...	@@ -143,9 +146,6 @@ function EventRouter() {
143	let syncing = false;	146	let syncing = false;
144	let pending = false;	147	let pending = false;
145		148
146	const removeOrphanedTerminalStates =
147	useTerminalStateStore.getState().removeOrphanedTerminalStates;
148
149	const flushSnapshotSync = async (): Promise<void> => {	149	const flushSnapshotSync = async (): Promise<void> => {
150	const snapshot = await api.orchestration.getSnapshot();	150	const snapshot = await api.orchestration.getSnapshot();
151	if (disposed) return;	151	if (disposed) return;
...	@@ -276,7 +276,7 @@ function EventRouter() {	...	@@ -276,7 +276,7 @@ function EventRouter() {
276	unsubWelcome();	276	unsubWelcome();
277	unsubServerConfigUpdated();	277	unsubServerConfigUpdated();
278	};	278	};
279	}, [navigate, queryClient, setProjectExpanded, syncServerReadModel]);	279	}, [navigate, queryClient, removeOrphanedTerminalStates, setProjectExpanded, syncServerReadModel]);
280		280
281	return null;	281	return null;
282	}	282	}