Remove unnecessary React effects that dual-state or lag a paint

Derive permission queue depth from queuedApprovals, adjust cursor and
Work-panel expansion during render, clear path suggestions at exit sites,
sync refs without effects, and cancel stale sent-history loads.

CL-5351 slice B.

Author: TheGreatAxios

src/tui/app.tsx

@@ -517,13 +517,12 @@ export function App({
 
   const { goalActive, goalPhase, showAcceptance, workPrimary } = resolveGoalChrome({ goalSnapshot });
   // Default-expand Work when entering implementing; Ctrl+T can still collapse.
+  // Adjust during render so the panel opens in the same paint as the phase flip.
   const wasWorkPrimary = useRef(false);
-  useEffect(() => {
-    if (workPrimary && !wasWorkPrimary.current) {
-      setTasksExpanded(true);
-    }
-    wasWorkPrimary.current = workPrimary;
-  }, [workPrimary]);
+  if (workPrimary && !wasWorkPrimary.current) {
+    setTasksExpanded(true);
+  }
+  wasWorkPrimary.current = workPrimary;
   const workExpanded = tasksExpanded;
   const goalChromeRows = goalChromeRowCount({
     goalActive,

src/tui/components/chat-input.tsx

@@ -1,5 +1,5 @@
 import { Box, Text, useInput, usePaste } from "ink";
-import { useState, useMemo, useEffect, useRef } from "react";
+import { useState, useMemo, useRef } from "react";
 import type { ReactNode } from "react";
 import { getCommand, listCommands } from "../commands/registry.js";
 import type { CommandContext, CommandResult, SubcommandDefinition } from "../commands/registry.js";
@@ -368,10 +368,15 @@ export function ChatInput({
   const selfSetValue = useRef<string | null>(null);
 
   // Reset the cursor to the end only when value changes from the OUTSIDE.
-  useEffect(() => {
-    if (value === selfSetValue.current) return;
-    setCursor(value.length);
-  }, [value]);
+  // Adjust during render (not an effect) so the caret lands in the same paint
+  // as the external value update — no extra commit for the cursor alone.
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    if (value !== selfSetValue.current) {
+      setCursor(value.length);
+    }
+  }
 
   const atMention = useAtSuggestions(cwd);
 

src/tui/components/plugins-manager.tsx

@@ -1,5 +1,5 @@
 import { Box, Text, useInput } from "ink";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
 import type { ReactNode } from "react";
 import { color } from "../theme.js";
 import { listPathSuggestions } from "./at-mention/index.js";
@@ -86,14 +86,15 @@ export function PluginsManager({ admin, onClose, cwd }: PluginsManagerProps): Re
   const isEnabled = (id: string): boolean => config[id]?.enabled === true;
   const isConsented = (id: string): boolean => config[id]?.consented === true;
 
-  useEffect(() => {
-    if (addingPath === null) {
-      pathGeneration.current++;
-      lastPathPrefix.current = null;
-      setPathSuggestions([]);
-      setPathSelectedIdx(0);
-    }
-  }, [addingPath]);
+  // Clear path-suggestion state when leaving add-by-path (call at every exit site
+  // instead of watching addingPath with an effect).
+  const clearAddingPath = (): void => {
+    pathGeneration.current++;
+    lastPathPrefix.current = null;
+    setPathSuggestions([]);
+    setPathSelectedIdx(0);
+    setAddingPath(null);
+  };
 
   const fetchPathSuggestions = (prefix: string, gen: number) => {
     void listPathSuggestions(prefix, cwd).then((results) => {
@@ -142,7 +143,7 @@ export function PluginsManager({ admin, onClose, cwd }: PluginsManagerProps): Re
     void Promise.resolve(admin.addPath(path)).then(
       (result) => {
         setAddStatus({ ok: result.ok, message: result.message });
-        if (result.ok) { setAddingPath(null); setVersion((v) => v + 1); }
+        if (result.ok) { clearAddingPath(); setVersion((v) => v + 1); }
       },
       (err: unknown) => setAddStatus({ ok: false, message: err instanceof Error ? err.message : String(err) }),
     );
@@ -160,7 +161,7 @@ export function PluginsManager({ admin, onClose, cwd }: PluginsManagerProps): Re
 
     if (addingPath !== null) {
       if (key.escape) {
-        setAddingPath(null);
+        clearAddingPath();
         setAddStatus(null);
         return;
       }

src/tui/components/session-resume-picker.tsx

@@ -1,6 +1,6 @@
 import { Box, Text, useApp, useInput } from "ink";
 import type { ReactNode } from "react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 
 import type { SessionSummary } from "../../session/index.js";
 import { formatRelativeTime } from "../format-relative-time.js";
@@ -21,10 +21,9 @@ function formatLabel(session: SessionSummary): string {
 export function SessionResumePicker({ sessions, onSelect, onCancel }: SessionResumePickerProps): ReactNode {
   const { exit } = useApp();
   const [cursor, setCursor] = useState(0);
-  const cursorRef = useRef(0);
-  useEffect(() => {
-    cursorRef.current = cursor;
-  }, [cursor]);
+  // Keep the latest cursor available to useInput without an effect round-trip.
+  const cursorRef = useRef(cursor);
+  cursorRef.current = cursor;
   const rows = useMemo(() => sessions.map((s) => ({ session: s, label: formatLabel(s) })), [sessions]);
   const clamped = rows.length > 0 ? Math.min(cursor, rows.length - 1) : 0;
 

src/tui/hooks/use-gates.ts

@@ -138,9 +138,10 @@ export function useGates({
   activationBlocked = false,
 }: UseGatesArgs): GateController {
   const [activeApproval, setActiveApproval] = useState<ActiveApproval | null>(null);
-  const [permissionQueueDepth, setPermissionQueueDepth] = useState(0);
   const [queuedApprovals, setQueuedApprovals] = useState<readonly QueuedApprovalSummary[]>([]);
   const queue = useRef<GateQueueEntry[]>([]);
+  // Depth is the length of the permission summary list — one source of truth.
+  const permissionQueueDepth = queuedApprovals.length;
 
   function syncQueuedApprovals(): void {
     setQueuedApprovals(
@@ -194,7 +195,6 @@ export function useGates({
     clearEntryTimer(entry);
     detachEntryAbort(entry);
     if (entry.kind === "permission") {
-      setPermissionQueueDepth((depth) => Math.max(0, depth - 1));
       syncQueuedApprovals();
     }
     setGatePendingRef.current(false);
@@ -245,7 +245,6 @@ export function useGates({
   function enqueue(entry: GateQueueEntry): void {
     queue.current.push(entry);
     if (entry.kind === "permission") {
-      setPermissionQueueDepth((depth) => depth + 1);
       syncQueuedApprovals();
     }
     setGatePendingRef.current(true);
@@ -256,7 +255,6 @@ export function useGates({
     const remaining = queue.current.splice(0);
     activeId.current = null;
     setActiveApproval(null);
-    setPermissionQueueDepth(0);
     setQueuedApprovals([]);
     for (const entry of remaining) {
       clearEntryTimer(entry);

src/tui/hooks/use-message-pipeline.ts

@@ -244,13 +244,18 @@ export function useMessagePipeline({
   };
   const startNewSession = () => startNewSessionRef.current();
 
-  // Send the initial task once the App (and its gate listeners) is mounted, so
-  // the run is driven through the same abortable path as interactive sends.
+  // Hydrate sent-message history for the active session. Cancel stale loads so a
+  // session switch or unmount cannot write history from a prior session id.
   useEffect(() => {
     if (getSessionId === undefined) return;
+    let cancelled = false;
     void loadSentMessages(cwd, getSessionId()).then((sent) => {
+      if (cancelled) return;
       setSentHistoryBrowse(createSentHistoryBrowse(sent));
     });
+    return () => {
+      cancelled = true;
+    };
   }, [cwd, getSessionId]);
 
   useEffect(() => {