fix(terminal): merge pending side-panel writes across urgent renders

Icon switches inside startTransition used to publish absolute maps from
refs, and the next render copied the last committed state back over
those refs. A second tab's switch could then replace the queued map and
drop the first tab's selection and split. Patch each tab onto the queued
map, and leave a pending ref in place until that render commits.

Co-authored-by: 陈大猫 <binaricat@users.noreply.github.com>

application/state/useTerminalSidePanelLayoutState.test.tsx

@@ -1,8 +1,13 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
-import React from 'react';
+import React, { startTransition, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
+import { JSDOM } from 'jsdom';
 import { act, create, type ReactTestRenderer } from 'react-test-renderer';
 
+import { readFileSync } from 'node:fs';
+
 import { collectSidePanelPanes } from '../../domain/sidePanelLayout.ts';
 import { useTerminalSidePanelLayoutState } from './useTerminalSidePanelLayoutState.ts';
 
@@ -130,3 +135,155 @@ test('closing the final pane removes only that terminal side panel state', async
     actEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment;
   }
 });
+
+test('selecting a side panel tool commits open tabs and layout in one render', async () => {
+  const actEnvironment = globalThis as typeof globalThis & {
+    IS_REACT_ACT_ENVIRONMENT?: boolean;
+  };
+  const previousActEnvironment = actEnvironment.IS_REACT_ACT_ENVIRONMENT;
+  actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+  let state: ReturnType<typeof useTerminalSidePanelLayoutState> | null = null;
+  let renderer: ReactTestRenderer | null = null;
+  let renders = 0;
+
+  const Probe = () => {
+    state = useTerminalSidePanelLayoutState();
+    renders += 1;
+    return null;
+  };
+
+  try {
+    await act(async () => {
+      renderer = create(React.createElement(Probe));
+    });
+    renders = 0;
+    await act(async () => {
+      state?.selectSidePanelToolForTab('terminal-a', 'notes');
+    });
+    assert.equal(renders, 1, 'open tabs and layout share one commit');
+    assert.equal(state!.sidePanelOpenTabs.get('terminal-a'), 'notes');
+    const layout = state!.sidePanelLayouts.get('terminal-a')!;
+    assert.equal(
+      collectSidePanelPanes(layout.root).find((pane) => pane.id === layout.focusedPaneId)?.tool,
+      'notes',
+    );
+
+    await act(async () => {
+      state?.splitPane('terminal-a', 'ai', 'vertical', {
+        paneId: 'pane-ai',
+        splitId: 'split-a',
+      }, 400);
+    });
+    const beforeFocus = state!.sidePanelLayouts.get('terminal-a')!;
+    await act(async () => {
+      state?.selectSidePanelToolForTab('terminal-a', 'notes');
+    });
+    const focusedExisting = state!.sidePanelLayouts.get('terminal-a')!;
+    assert.deepEqual(
+      collectSidePanelPanes(focusedExisting.root).map((pane) => pane.tool),
+      ['notes', 'ai'],
+    );
+    assert.equal(
+      collectSidePanelPanes(focusedExisting.root).find((pane) => pane.id === focusedExisting.focusedPaneId)?.tool,
+      'notes',
+    );
+    assert.equal(state!.sidePanelOpenTabs.get('terminal-a'), 'notes');
+    assert.notEqual(focusedExisting, beforeFocus);
+    assert.equal(focusedExisting.root, beforeFocus.root, 'focusing an open tool must not rebuild the split');
+
+    const settled = state!.sidePanelLayouts;
+    renders = 0;
+    await act(async () => {
+      state?.selectSidePanelToolForTab('terminal-a', 'notes');
+    });
+    assert.equal(renders, 0);
+    assert.equal(state!.sidePanelLayouts, settled);
+  } finally {
+    await act(async () => {
+      renderer?.unmount();
+    });
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment;
+  }
+});
+
+test('a pending side-panel write survives an urgent render on another tab', async () => {
+  const dom = new JSDOM('<!doctype html><html><body></body></html>', { url: 'http://localhost' });
+  const previousWindow = globalThis.window;
+  const previousDocument = globalThis.document;
+  Object.defineProperty(globalThis, 'window', { configurable: true, value: dom.window });
+  Object.defineProperty(globalThis, 'document', { configurable: true, value: dom.window.document });
+  const actEnvironment = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean };
+  const previousActEnvironment = actEnvironment.IS_REACT_ACT_ENVIRONMENT;
+  actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+
+  let state: ReturnType<typeof useTerminalSidePanelLayoutState> | null = null;
+  let bump: ((value: number) => void) | null = null;
+  const Probe = () => {
+    state = useTerminalSidePanelLayoutState();
+    const [, setTick] = useState(0);
+    bump = setTick;
+    return null;
+  };
+
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root: Root = createRoot(container);
+  const tools = (tabId: string, fromRef = false) => {
+    const layout = fromRef
+      ? state?.sidePanelLayoutsRef.current.get(tabId)
+      : state?.sidePanelLayouts.get(tabId);
+    return layout ? collectSidePanelPanes(layout.root).map((pane) => pane.tool) : [];
+  };
+
+  try {
+    await act(async () => {
+      root.render(React.createElement(Probe));
+    });
+    await act(async () => {
+      state?.selectSidePanelToolForTab('terminal-a', 'notes');
+      state?.selectSidePanelToolForTab('terminal-b', 'scripts');
+    });
+    await act(async () => {
+      state?.splitPane('terminal-a', 'ai', 'vertical', {
+        paneId: 'pane-ai',
+        splitId: 'split-a',
+      }, 400);
+    });
+
+    await act(async () => {
+      startTransition(() => {
+        state?.selectSidePanelToolForTab('terminal-a', 'history');
+      });
+      flushSync(() => {
+        bump?.(1);
+      });
+      assert.deepEqual(tools('terminal-a'), ['notes', 'ai']);
+      assert.deepEqual(tools('terminal-a', true), ['notes', 'history']);
+      startTransition(() => {
+        state?.selectSidePanelToolForTab('terminal-b', 'sftp');
+      });
+    });
+
+    assert.deepEqual(tools('terminal-a'), ['notes', 'history']);
+    assert.equal(state!.sidePanelOpenTabs.get('terminal-a'), 'history');
+    assert.deepEqual(tools('terminal-b'), ['sftp']);
+    assert.equal(state!.sidePanelOpenTabs.get('terminal-b'), 'sftp');
+  } finally {
+    await act(async () => {
+      root.unmount();
+    });
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment;
+    Object.defineProperty(globalThis, 'window', { configurable: true, value: previousWindow });
+    Object.defineProperty(globalThis, 'document', { configurable: true, value: previousDocument });
+    dom.window.close();
+  }
+});
+
+test('side panel icon clicks write the tool through selectSidePanelToolForTab', () => {
+  const layerSource = readFileSync(new URL('../../components/TerminalLayer.tsx', import.meta.url), 'utf8');
+  const start = layerSource.indexOf('const handleSwitchSidePanelTab = useCallback');
+  const end = layerSource.indexOf('const handleFocusSidePanelPane = useCallback');
+  const body = layerSource.slice(start, end);
+  assert.match(body, /startTransition\(\(\) => \{\s*selectSidePanelToolForTab\(tabId, tab\);/);
+  assert.doesNotMatch(body, /setSidePanelOpenTabs/);
+});

application/state/useTerminalSidePanelLayoutState.ts

@@ -13,55 +13,138 @@ import {
   type SidePanelTool,
 } from '../../domain/sidePanelLayout';
 
+function replaceMapEntry<T>(previous: Map<string, T>, key: string, value: T): Map<string, T> {
+  if (previous.get(key) === value) return previous;
+  const next = new Map(previous);
+  next.set(key, value);
+  return next;
+}
+
+function deleteMapEntry<T>(previous: Map<string, T>, key: string): Map<string, T> {
+  if (!previous.has(key)) return previous;
+  const next = new Map(previous);
+  next.delete(key);
+  return next;
+}
+
+function reconcileSidePanelLayouts(
+  layouts: Map<string, SidePanelLayout>,
+  openTabs: Map<string, SidePanelTool>,
+): Map<string, SidePanelLayout> | null {
+  let changed = false;
+  const next = new Map(layouts);
+
+  for (const tabId of layouts.keys()) {
+    if (!openTabs.has(tabId)) {
+      next.delete(tabId);
+      changed = true;
+    }
+  }
+
+  for (const [tabId, tool] of openTabs) {
+    const current = next.get(tabId);
+    const updated = current
+      ? selectSidePanelTool(current, tool)
+      : createSidePanelLayout(tool, crypto.randomUUID());
+    if (updated !== current) {
+      next.set(tabId, updated);
+      changed = true;
+    }
+  }
+
+  return changed ? next : null;
+}
+
 export function useTerminalSidePanelLayoutState() {
   const [sidePanelOpenTabs, setSidePanelOpenTabs] = useState<Map<string, SidePanelTool>>(new Map());
   const [sidePanelLayouts, setSidePanelLayouts] = useState<Map<string, SidePanelLayout>>(new Map());
   const sidePanelOpenTabsRef = useRef(sidePanelOpenTabs);
   const sidePanelLayoutsRef = useRef(sidePanelLayouts);
-  sidePanelOpenTabsRef.current = sidePanelOpenTabs;
-  sidePanelLayoutsRef.current = sidePanelLayouts;
+  // Last maps this hook rendered. A transition can update the refs before React
+  // commits them; an urgent render in between must not copy the stale state
+  // back over that pending write. Functional updates still merge onto queued
+  // state when the ref and the committed map have diverged.
+  const renderedOpenTabsRef = useRef(sidePanelOpenTabs);
+  const renderedLayoutsRef = useRef(sidePanelLayouts);
+  if (sidePanelOpenTabsRef.current === renderedOpenTabsRef.current) {
+    sidePanelOpenTabsRef.current = sidePanelOpenTabs;
+  }
+  renderedOpenTabsRef.current = sidePanelOpenTabs;
+  if (sidePanelLayoutsRef.current === renderedLayoutsRef.current) {
+    sidePanelLayoutsRef.current = sidePanelLayouts;
+  }
+  renderedLayoutsRef.current = sidePanelLayouts;
 
   // Legacy and external open paths write the focused-tool map. Reconcile that
   // public application boundary into the per-tab tree without disturbing the
-  // other panes in an existing layout.
+  // other panes in an existing layout. Skip the setState when the click path
+  // already stored this selection: scheduling an identical update still
+  // renders again after a paired openTabs write.
   useEffect(() => {
+    const base = sidePanelLayoutsRef.current;
+    const reconciled = reconcileSidePanelLayouts(base, sidePanelOpenTabs);
+    if (!reconciled) return;
+    sidePanelLayoutsRef.current = reconciled;
     setSidePanelLayouts((previous) => {
-      let changed = false;
-      const next = new Map(previous);
-
-      for (const tabId of previous.keys()) {
-        if (!sidePanelOpenTabs.has(tabId)) {
-          next.delete(tabId);
-          changed = true;
-        }
+      const next = previous === base
+        ? reconciled
+        : reconcileSidePanelLayouts(previous, sidePanelOpenTabs);
+      if (!next) {
+        sidePanelLayoutsRef.current = previous;
+        return previous;
       }
-
-      for (const [tabId, tool] of sidePanelOpenTabs) {
-        const current = next.get(tabId);
-        const updated = current
-          ? selectSidePanelTool(current, tool)
-          : createSidePanelLayout(tool, crypto.randomUUID());
-        if (updated !== current) {
-          next.set(tabId, updated);
-          changed = true;
-        }
-      }
-
-      if (changed) sidePanelLayoutsRef.current = next;
-      return changed ? next : previous;
+      sidePanelLayoutsRef.current = next;
+      return next;
     });
   }, [sidePanelOpenTabs]);
 
-  const commitLayout = useCallback((tabId: string, layout: SidePanelLayout) => {
-    const layouts = new Map(sidePanelLayoutsRef.current).set(tabId, layout);
-    const focusedTool = getFocusedSidePanelPane(layout).tool;
-    const openTabs = new Map(sidePanelOpenTabsRef.current).set(tabId, focusedTool);
+  const commitMap = useCallback((
+    tabId: string,
+    layout: SidePanelLayout,
+    openTab: SidePanelTool | null,
+  ) => {
+    const layoutBase = sidePanelLayoutsRef.current;
+    const openTabBase = sidePanelOpenTabsRef.current;
+    const layouts = openTab === null
+      ? deleteMapEntry(layoutBase, tabId)
+      : replaceMapEntry(layoutBase, tabId, layout);
+    const openTabs = openTab === null
+      ? deleteMapEntry(openTabBase, tabId)
+      : replaceMapEntry(openTabBase, tabId, openTab);
     sidePanelLayoutsRef.current = layouts;
     sidePanelOpenTabsRef.current = openTabs;
-    setSidePanelLayouts(layouts);
-    setSidePanelOpenTabs(openTabs);
+    setSidePanelLayouts((previous) => {
+      const next = previous === layoutBase
+        ? layouts
+        : (openTab === null ? deleteMapEntry(previous, tabId) : replaceMapEntry(previous, tabId, layout));
+      sidePanelLayoutsRef.current = next;
+      return next;
+    });
+    setSidePanelOpenTabs((previous) => {
+      const next = previous === openTabBase
+        ? openTabs
+        : (openTab === null ? deleteMapEntry(previous, tabId) : replaceMapEntry(previous, tabId, openTab));
+      sidePanelOpenTabsRef.current = next;
+      return next;
+    });
   }, []);
 
+  const commitLayout = useCallback((tabId: string, layout: SidePanelLayout) => {
+    commitMap(tabId, layout, getFocusedSidePanelPane(layout).tool);
+  }, [commitMap]);
+
+  // Click path writes the focused tool and the layout together. The effect
+  // above still reconciles external openTabs writes, and skips when
+  // selectSidePanelTool returns the layout this call just stored.
+  const selectSidePanelToolForTab = useCallback((tabId: string, tool: SidePanelTool) => {
+    const current = sidePanelLayoutsRef.current.get(tabId);
+    const updated = current
+      ? selectSidePanelTool(current, tool)
+      : createSidePanelLayout(tool, crypto.randomUUID());
+    if (updated === current && sidePanelOpenTabsRef.current.get(tabId) === tool) return;
+    commitLayout(tabId, updated);
+  }, [commitLayout]);
+
   const focusPane = useCallback((tabId: string, paneId: string) => {
     const layout = sidePanelLayoutsRef.current.get(tabId);
     if (!layout) return;
@@ -97,25 +180,23 @@ export function useTerminalSidePanelLayoutState() {
       return false;
     }
 
-    const layouts = new Map(sidePanelLayoutsRef.current);
-    const openTabs = new Map(sidePanelOpenTabsRef.current);
-    layouts.delete(tabId);
-    openTabs.delete(tabId);
-    sidePanelLayoutsRef.current = layouts;
-    sidePanelOpenTabsRef.current = openTabs;
-    setSidePanelLayouts(layouts);
-    setSidePanelOpenTabs(openTabs);
+    commitMap(tabId, layout, null);
     return true;
-  }, [commitLayout]);
+  }, [commitLayout, commitMap]);
 
   const resizeSplit = useCallback((tabId: string, splitId: string, sizes: number[]) => {
     const layout = sidePanelLayoutsRef.current.get(tabId);
     if (!layout) return;
     const nextLayout = resizeSidePanelSplit(layout, splitId, sizes);
     if (nextLayout === layout) return;
-    const layouts = new Map(sidePanelLayoutsRef.current).set(tabId, nextLayout);
+    const base = sidePanelLayoutsRef.current;
+    const layouts = replaceMapEntry(base, tabId, nextLayout);
     sidePanelLayoutsRef.current = layouts;
-    setSidePanelLayouts(layouts);
+    setSidePanelLayouts((previous) => {
+      const next = previous === base ? layouts : replaceMapEntry(previous, tabId, nextLayout);
+      sidePanelLayoutsRef.current = next;
+      return next;
+    });
   }, []);
 
   return {
@@ -129,5 +210,6 @@ export function useTerminalSidePanelLayoutState() {
     splitPane,
     closePane,
     resizeSplit,
+    selectSidePanelToolForTab,
   };
 }

components/TerminalLayer.tsx

@@ -319,6 +319,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     splitPane: splitSidePanelPaneForTab,
     closePane: closeSidePanelPaneForTab,
     resizeSplit: resizeSidePanelSplitForTab,
+    selectSidePanelToolForTab,
   } = useTerminalSidePanelLayoutState();
   useEffect(() => {
     pruneComposeBarHistory(sessions.map((session) => session.id));
@@ -1752,13 +1753,9 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
     if (!prepareSidePanelTool(tabId, tab)) return;
 
     startTransition(() => {
-      setSidePanelOpenTabs(prev => {
-        const next = new Map(prev);
-        next.set(tabId, tab);
-        return next;
-      });
+      selectSidePanelToolForTab(tabId, tab);
     });
-  }, [prepareSidePanelTool, setSidePanelOpenTabs, sidePanelOpenTabsRef]);
+  }, [prepareSidePanelTool, selectSidePanelToolForTab, sidePanelOpenTabsRef]);
 
   const handleFocusSidePanelPane = useCallback((paneId: string) => {
     const tabId = activeTabIdRef.current;