@cueloop/client 0.1.0-alpha.75 → 0.1.0-alpha.76

package/src/App.visual.test.tsx

@@ -0,0 +1,57 @@
+/** Scene visual regression: clicking a sidebar thread paints its title in the theme's accent, in both
+ * themes. Colours come from captureSpans, so a theme or click-feedback regression fails here. */
+
+import { afterEach, beforeEach, expect, test } from "bun:test";
+import React from "react";
+import { App } from "./App";
+import { clickText, isolateUserConfig, renderReadyApp, waitForText } from "./test-support";
+import { themeForName } from "./theme-presets";
+import { rgbColorFromHex } from "./visual/contrast";
+import { createTestReviewHome, type TestReviewHome } from "../../../test/helpers/review-home";
+
+let reviewHome: TestReviewHome;
+let restoreUserConfig: () => void;
+
+beforeEach(() => {
+  reviewHome = createTestReviewHome();
+  restoreUserConfig = isolateUserConfig(reviewHome.home);
+  reviewHome.createPlanSession("# First review\n", "First review");
+  reviewHome.createPlanSession("# Second review\n", "Second review");
+});
+afterEach(() => {
+  restoreUserConfig();
+  reviewHome.cleanup();
+});
+
+/** Whether any span containing `needle` is painted in `color` (the thread header carries the title dimly). */
+function hasSpanColor(
+  setup: Awaited<ReturnType<typeof renderReadyApp>>,
+  needle: string,
+  color: readonly [number, number, number],
+): boolean {
+  for (const line of setup.captureSpans().lines) {
+    for (const span of line.spans) {
+      if (!span.text.includes(needle) || !span.fg) continue;
+      const [red, green, blue] = span.fg.toInts();
+      if (red === color[0] && green === color[1] && blue === color[2]) return true;
+    }
+  }
+
+  return false;
+}
+
+for (const mode of ["dark", "light"] as const) {
+  test(`clicking a thread paints it in the ${mode} accent`, async () => {
+    const accent = rgbColorFromHex(themeForName("cueloop", mode).accent);
+    const setup = await renderReadyApp(<App home={reviewHome.home} appearance={mode} />, {
+      width: 120,
+      height: 32,
+    });
+    await waitForText(setup, "Second review");
+
+    await clickText(setup, "Second review");
+
+    expect(hasSpanColor(setup, "Second review", accent)).toBe(true);
+    setup.renderer.destroy();
+  });
+}

package/src/App.workbench.test.tsx

@@ -1,8 +1,8 @@
 /** The four-pane workbench in the virtual terminal, mirroring the browser prototype's interactions:
  * a diff session lays out Threads | Thread | Changes editor | Project sidebar; the diff (±) and tree
  * toggles are mutually exclusive and switching to tree keeps the Changes editor open; a project-tree
- * file opens as a read-only contents tab; the split control offers four directions and Split Right makes
- * two editor groups; dismissing the Changes tab collapses the Changes pane but keeps the Project sidebar;
+ * file opens as a read-only contents tab; the split control offers four directions and the arrow keys
+ * split; dismissing the Changes tab collapses the Changes pane but keeps the Project sidebar;
  * the right-sidebar toggle collapses the region to a thin rail and reopens it; zoom hides the Thread pane
  * while the sidebars stay. */
 
@@ -152,7 +152,7 @@ describe("the four-pane workbench", () => {
     expect(frame.split("\n")[HEADER_ROW]!).toContain("README.md");
   });
 
-  test("the split control offers four directions and Split Right makes two groups", async () => {
+  test("the split control offers four directions and arrow-right makes two groups", async () => {
     const setup = await renderApp();
 
     await setup.mockMouse.click(treeToggleColumn(setup), HEADER_ROW);
@@ -164,17 +164,16 @@ describe("the four-pane workbench", () => {
     // the split control appears only on a file tab
     const split = locateText(setup, "split");
     await setup.mockMouse.click(split.column, split.row);
-    await waitForText(setup, "Split Right");
+    await waitForText(setup, "right");
 
     const menu = setup.captureCharFrame();
-    expect(menu).toContain("Split Left");
-    expect(menu).toContain("Split Right");
-    expect(menu).toContain("Split Up");
-    expect(menu).toContain("Split Down");
-
-    const right = locateText(setup, "Split Right");
-    await setup.mockMouse.click(right.column, right.row);
-    // two editor groups now ride the header, each with its own split control
+    expect(menu).toContain("left");
+    expect(menu).toContain("right");
+    expect(menu).toContain("up");
+    expect(menu).toContain("down");
+
+    // the arrow keys drive the popover: right splits the group into two
+    await pressKey(setup, "ARROW_RIGHT");
     await waitForState(setup, () => setup.captureCharFrame().split("split").length - 1 >= 2);
     expect((setup.captureCharFrame().match(/README\.md/g) ?? []).length).toBeGreaterThanOrEqual(2);
   });
@@ -239,11 +238,11 @@ describe("the four-pane workbench", () => {
 
     const zoom = locateText(setup, NERD.zoom);
     await setup.mockMouse.click(zoom.column, zoom.row);
-    await waitForState(setup, () => !setup.captureCharFrame().includes("review the changes"));
+    await waitForState(setup, () => !setup.captureCharFrame().includes("Select a thread"));
 
     const frame = setup.captureCharFrame();
     // the Thread pane's prompt is gone...
-    expect(frame).not.toContain("review the changes");
+    expect(frame).not.toContain("Select a thread");
     // ...while the Changes editor and Project sidebar stay
     expect(frame).toContain("store.ts");
     expect(diffToggleColumn(setup)).toBeGreaterThan(0);
@@ -293,7 +292,7 @@ describe("the four-pane workbench", () => {
     // zoom the diff - the Thread pane hides and the footer rides the Changes pane
     const zoom = locateText(setup, NERD.zoom);
     await setup.mockMouse.click(zoom.column, zoom.row);
-    await waitForState(setup, () => !setup.captureCharFrame().includes("review the changes"));
+    await waitForState(setup, () => !setup.captureCharFrame().includes("Select a thread"));
 
     // switch to the plan thread: it has no Changes editor, so a stranded zoom would blank the middle
     const planRow = locateText(setup, "Zoomed Plan");
@@ -312,13 +311,13 @@ describe("the four-pane workbench", () => {
     // zoom the Changes editor - the Thread pane hides
     const zoom = locateText(setup, NERD.zoom);
     await setup.mockMouse.click(zoom.column, zoom.row);
-    await waitForState(setup, () => !setup.captureCharFrame().includes("review the changes"));
+    await waitForState(setup, () => !setup.captureCharFrame().includes("Select a thread"));
 
     // toggling the right sidebar off must not strand a blank screen: zoom exits, the Thread pane returns
     await setup.mockMouse.click(rightToggleColumn(setup), HEADER_ROW);
-    await waitForText(setup, "review the changes");
+    await waitForText(setup, "Select a thread");
     const frame = setup.captureCharFrame();
-    expect(frame).toContain("review the changes");
+    expect(frame).toContain("Select a thread");
     // the right region is collapsed and the Changes editor is gone
     expect(frame).not.toContain("store.ts");
     expect(diffToggleColumn(setup)).toBe(-1);
@@ -452,8 +451,8 @@ describe("the bare-launch welcome shell", () => {
       />,
       { width: 180, height: 14 },
     );
-    await waitForText(setup, "no threads");
-    expect(setup.captureCharFrame()).toContain("no threads");
+    await waitForText(setup, "Select a thread");
+    expect(setup.captureCharFrame()).toContain("Select a thread");
   });
 
   test("closing the right region on the vanilla shell remembers it for the next launch", async () => {
@@ -507,7 +506,27 @@ describe("the bare-launch welcome shell", () => {
     expect(frame.split("\n")[HEADER_ROW]!).toContain("Welcome");
     expect(frame).toContain("Getting started");
     // the Thread pane shows its empty state until a thread is opened
-    expect(frame).toContain("no threads");
+    expect(frame).toContain("Select a thread");
+  });
+
+  test("the Threads sidebar owns the keyboard until a pane is clicked, so nav never touches the editor", async () => {
+    const setup = await renderReadyApp(
+      <App home={welcomeHome} sessionId={undefined} cwd={welcomeRepo} />,
+      { width: 160, height: 24 },
+    );
+    await waitForText(setup, "Getting started");
+
+    // focus starts on the Threads sidebar: a letter drives the inbox, it never drafts in the editor
+    await typeText(setup, "zzz");
+    expect(setup.captureCharFrame()).not.toContain("zzz");
+
+    // clicking a line in the Welcome editor focuses that pane; now typing composes there
+    const line = locateText(setup, "quick brown fox");
+    await setup.mockMouse.click(line.column, line.row);
+    await typeText(setup, "note");
+    await waitForText(setup, "● note");
+
+    setup.renderer.destroy();
   });
 
   test("typing in the welcome composer never reaches the inbox keys", async () => {
@@ -552,7 +571,7 @@ describe("the bare-launch welcome shell", () => {
     // the Threads sidebar and the Thread empty state remain - never a blank shell
     const frame = setup.captureCharFrame();
     expect(frame).toContain("cueloop");
-    expect(frame).toContain("no threads");
+    expect(frame).toContain("Select a thread");
   });
 
   test("the changed-files and tree toggles switch navigator mode without collapsing", async () => {

package/src/app-screens.tsx

@@ -21,8 +21,9 @@ import { SettingsDialog } from "./components/SettingsDialog";
 import { CompletionOverlay } from "./components/CompletionOverlay";
 import { ThreadTree } from "./components/ThreadTree";
 import { WelcomePlayground } from "./components/WelcomePlayground";
-import { AppShell, type ProjectPanelMode } from "./components/AppShell";
+import { AppShell, type FocusPane, type ProjectPanelMode } from "./components/AppShell";
 import { EditorGrid } from "./components/EditorGrid";
+import { MenuControlProvider, type MenuControlApi } from "./components/menu-control";
 import { ProjectTreeView } from "./components/ProjectTreeView";
 import { ChangesFileTree } from "./components/ChangesColumn";
 import { BareWorkbenchFileView, draftThread } from "./components/BareWorkbenchFileView";
@@ -58,6 +59,7 @@ export function MenuChrome(props: {
   settingsNav: SettingsNav;
   onCategorySelect: (categoryId: string) => void;
   cycleSetting: (rowKey: string) => void;
+  onClose: () => void;
 }): React.ReactNode {
   const {
     menuDialog,
@@ -68,6 +70,7 @@ export function MenuChrome(props: {
     settingsNav,
     onCategorySelect,
     cycleSetting,
+    onClose,
   } = props;
 
   // the gear opens the settings dialog directly; Keybinds is a leaf in its tree nav
@@ -85,6 +88,7 @@ export function MenuChrome(props: {
       activeZone={settingsNav.zone}
       onCategorySelect={onCategorySelect}
       onRowActivate={(row) => cycleSetting(row.key)}
+      onClose={onClose}
       theme={theme}
     />
   );
@@ -99,6 +103,7 @@ function WelcomeProjectPanel({
   controller,
   onOpenChangedFile,
   onOpenProjectFile,
+  focused,
   theme,
 }: {
   mode: ProjectPanelMode;
@@ -107,6 +112,7 @@ function WelcomeProjectPanel({
   onOpenChangedFile: (path: string) => void;
   /** Project tree click -> open the file's read-only contents. */
   onOpenProjectFile: (path: string) => void;
+  focused?: boolean;
   theme: Theme;
 }): React.ReactNode {
   const [changes, setChanges] = useState<readonly DiffFileContents[]>([]);
@@ -129,13 +135,21 @@ function WelcomeProjectPanel({
   }, [controller]);
 
   if (mode === "changes") {
-    return <ChangesFileTree files={changes} onSelectFile={onOpenChangedFile} theme={theme} />;
+    return (
+      <ChangesFileTree
+        files={changes}
+        onSelectFile={onOpenChangedFile}
+        focused={focused}
+        theme={theme}
+      />
+    );
   }
 
   return (
     <ProjectTreeView
       loadFiles={() => controller.repoFiles()}
       onSelectFile={onOpenProjectFile}
+      focused={focused}
       theme={theme}
     />
   );
@@ -150,6 +164,8 @@ function WelcomeProjectPanel({
 export function NoThreadShell(props: {
   rows: InboxRow[];
   inboxCursor: number;
+  /** Open a sidebar thread and move the cursor onto it, so the row shows its selected backdrop at once. */
+  onOpenThread: (id: string) => void;
   mode: Mode;
   theme: Theme;
   controller: ReviewController;
@@ -159,6 +175,10 @@ export function NoThreadShell(props: {
   /** Shared with the thread view, so picking a thread preserves the sidebar. */
   sidebarOpen: boolean;
   onToggleSidebar: () => void;
+  focusedPane: FocusPane;
+  onFocusPane: (pane: FocusPane) => void;
+  /** App owns the one open-menu id, so the bare shell's menus share App's modal keyboard handling. */
+  menuControl: MenuControlApi;
   pinnedIds: ReadonlySet<string>;
   onPin: (id: string) => void;
   onRename: (id: string, title: string) => void;
@@ -172,6 +192,7 @@ export function NoThreadShell(props: {
   const {
     rows,
     inboxCursor,
+    onOpenThread,
     mode,
     theme,
     controller,
@@ -180,6 +201,9 @@ export function NoThreadShell(props: {
     onOpenMenu,
     sidebarOpen,
     onToggleSidebar,
+    focusedPane,
+    onFocusPane,
+    menuControl,
     pinnedIds,
     onPin,
     onRename,
@@ -217,7 +241,7 @@ export function NoThreadShell(props: {
     observer: false,
     commentsEnabled: true,
     resolved: false,
-    suspended: false,
+    suspended: focusedPane !== "changes" || menuControl.openMenuId !== null,
     onComposingChange: onWelcomeComposingChange,
     onObserverBlocked: () => {},
     onCursorChange: () => {},
@@ -238,133 +262,146 @@ export function NoThreadShell(props: {
 
   return (
     <ThemeProvider theme={theme}>
-      <AppShell
-        sidebarOpen={sidebarOpen}
-        onToggleSidebar={onToggleSidebar}
-        onOpenMenu={onOpenMenu}
-        threadsPanel={
-          <ScrollArea>
-            <ThreadTree
-              rows={rows}
-              cursor={inboxCursor}
-              pinnedIds={pinnedIds}
-              width={30}
-              onSelect={(id) => controller.open(id)}
-              onRequestDelete={(id, title) =>
-                setMode({ type: "confirmDelete", sessionId: id, title })
+      <MenuControlProvider value={menuControl}>
+        <AppShell
+          sidebarOpen={sidebarOpen}
+          onToggleSidebar={onToggleSidebar}
+          onOpenMenu={onOpenMenu}
+          onFocusPane={onFocusPane}
+          threadsPanel={
+            <ScrollArea>
+              <ThreadTree
+                rows={rows}
+                cursor={inboxCursor}
+                focused={focusedPane === "threads"}
+                pinnedIds={pinnedIds}
+                width={30}
+                onSelect={onOpenThread}
+                onRequestDelete={(id, title) =>
+                  setMode({ type: "confirmDelete", sessionId: id, title })
+                }
+                onPin={onPin}
+                onRename={onRename}
+                theme={theme}
+              />
+            </ScrollArea>
+          }
+          threadTitle=""
+          threadPanel={
+            <box
+              style={{
+                flexGrow: 1,
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <text fg={theme.textDim}>Select a thread</text>
+            </box>
+          }
+          changesOpen={workbench.changesOpen}
+          projectOpen={workbench.projectOpen}
+          onToggleChanges={workbench.toggleChanges}
+          onToggleProject={workbench.toggleProject}
+          onToggleRight={workbench.toggleRight}
+          projectMode={workbench.projectMode}
+          zoomHideThread={workbench.zoomed}
+          changesPanel={
+            <EditorGrid
+              tree={workbench.grid}
+              focusedGroupId={workbench.activeGroup}
+              onFocusGroup={workbench.focusGroup}
+              onActivateTab={workbench.activate}
+              onCloseTab={workbench.close}
+              onSplit={workbench.split}
+              onZoom={workbench.toggleZoom}
+              zoomed={workbench.zoomed}
+              renderTab={(tab) =>
+                tab.kind === "welcome" ? (
+                  <WelcomePlayground
+                    version={CLIENT_VERSION}
+                    quickActions={quickActions}
+                    onComposingChange={onWelcomeComposingChange}
+                    suspended={focusedPane !== "changes" || menuControl.openMenuId !== null}
+                    theme={theme}
+                  />
+                ) : tab.fileView === "contents" ? (
+                  <BareWorkbenchFileView
+                    path={tab.path ?? ""}
+                    controller={controller}
+                    quickActions={quickActions}
+                    onComposingChange={onWelcomeComposingChange}
+                    onExit={() => {}}
+                    theme={theme}
+                  />
+                ) : (
+                  <GridTabContent
+                    tab={tab}
+                    rows={controller.rows()}
+                    surface={bareSurface}
+                    rejectedRows={EMPTY_ROWS}
+                    dimmed={false}
+                    readFile={(path) => controller.repoReadFile(path)}
+                    onAddFileComment={(path, anchor, body) =>
+                      void controller.commentOnWorkbench(
+                        anchor,
+                        { kind: "file", path, rev: "worktree" },
+                        body,
+                      )
+                    }
+                    theme={theme}
+                  />
+                )
               }
-              onPin={onPin}
-              onRename={onRename}
               theme={theme}
             />
-          </ScrollArea>
-        }
-        threadTitle=""
-        threadPanel={
-          <box
-            style={{
-              flexGrow: 1,
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <text fg={theme.textDim}>{rows.length === 0 ? "no threads" : "Select a thread"}</text>
-          </box>
-        }
-        changesOpen={workbench.changesOpen}
-        projectOpen={workbench.projectOpen}
-        onToggleChanges={workbench.toggleChanges}
-        onToggleProject={workbench.toggleProject}
-        onToggleRight={workbench.toggleRight}
-        projectMode={workbench.projectMode}
-        zoomHideThread={workbench.zoomed}
-        changesPanel={
-          <EditorGrid
-            tree={workbench.grid}
-            focusedGroupId={workbench.activeGroup}
-            onFocusGroup={workbench.focusGroup}
-            onActivateTab={workbench.activate}
-            onCloseTab={workbench.close}
-            onSplit={workbench.split}
-            onZoom={workbench.toggleZoom}
-            zoomed={workbench.zoomed}
-            renderTab={(tab) =>
-              tab.kind === "welcome" ? (
-                <WelcomePlayground
-                  version={CLIENT_VERSION}
-                  quickActions={quickActions}
-                  onComposingChange={onWelcomeComposingChange}
-                  theme={theme}
-                />
-              ) : tab.fileView === "contents" ? (
-                <BareWorkbenchFileView
-                  path={tab.path ?? ""}
-                  controller={controller}
-                  quickActions={quickActions}
-                  onComposingChange={onWelcomeComposingChange}
-                  onExit={() => {}}
-                  theme={theme}
-                />
-              ) : (
-                <GridTabContent
-                  tab={tab}
-                  rows={controller.rows()}
-                  surface={bareSurface}
-                  rejectedRows={EMPTY_ROWS}
-                  dimmed={false}
-                  readFile={(path) => controller.repoReadFile(path)}
-                  onAddFileComment={(path, anchor, body) =>
-                    void controller.commentOnWorkbench(
-                      anchor,
-                      { kind: "file", path, rev: "worktree" },
-                      body,
-                    )
-                  }
-                  theme={theme}
-                />
-              )
-            }
-            theme={theme}
-          />
-        }
-        projectPanel={
-          <WelcomeProjectPanel
-            mode={workbench.projectMode}
-            controller={controller}
-            onOpenChangedFile={openChangedFile}
-            onOpenProjectFile={openProjectFile}
-            theme={theme}
-          />
-        }
-        theme={theme}
-      >
-        {menuChrome}
-        <ConfirmDialog
-          isOpen={confirming !== null}
-          title=" Delete plan "
-          message={
-            confirming ? `Delete "${confirming.title}"? This removes the plan and its review.` : ""
           }
-          onConfirm={() => {
-            if (confirming) controller.deleteSession(confirming.sessionId);
-            setMode({ type: "normal" });
-          }}
-          onCancel={() => setMode({ type: "normal" })}
+          projectPanel={
+            <WelcomeProjectPanel
+              mode={workbench.projectMode}
+              controller={controller}
+              onOpenChangedFile={openChangedFile}
+              onOpenProjectFile={openProjectFile}
+              focused={focusedPane === "project"}
+              theme={theme}
+            />
+          }
           theme={theme}
-        />
-        {mode.type === "renameThread" ? (
-          <PromptDialog
-            isOpen
-            title=" rename thread "
-            label="new title for this thread:"
-            value={mode.text}
-            placeholder="a short title"
-            onInput={(text) => setMode({ ...mode, text })}
+        >
+          {menuChrome}
+          <ConfirmDialog
+            isOpen={confirming !== null}
+            title=" Delete plan "
+            message={
+              confirming
+                ? `Delete "${confirming.title}"? This removes the plan and its review.`
+                : ""
+            }
+            onConfirm={() => {
+              if (confirming) controller.deleteSession(confirming.sessionId);
+              setMode({ type: "normal" });
+            }}
+            onCancel={() => setMode({ type: "normal" })}
             theme={theme}
           />
-        ) : null}
-      </AppShell>
+          {mode.type === "renameThread" ? (
+            <PromptDialog
+              isOpen
+              title=" rename thread "
+              label="new title for this thread:"
+              value={mode.text}
+              placeholder="a short title"
+              onInput={(text) => setMode({ ...mode, text })}
+              onSave={() => {
+                controller.renameSession(mode.sessionId, mode.text.trim());
+                setMode({ type: "normal" });
+              }}
+              onCancel={() => setMode({ type: "normal" })}
+              theme={theme}
+            />
+          ) : null}
+        </AppShell>
+      </MenuControlProvider>
     </ThemeProvider>
   );
 }
@@ -464,6 +501,8 @@ export function TrailingOverlays(props: {
           value={mode.text}
           placeholder="their name"
           onInput={(text) => setMode({ ...mode, text })}
+          onSave={() => dispatch({ type: "confirmDialog" })}
+          onCancel={() => setMode({ type: "normal" })}
           theme={theme}
         />
       ) : null}
@@ -475,6 +514,8 @@ export function TrailingOverlays(props: {
           value={mode.text}
           placeholder="a short title"
           onInput={(text) => setMode({ ...mode, text })}
+          onSave={() => dispatch({ type: "confirmDialog" })}
+          onCancel={() => setMode({ type: "normal" })}
           theme={theme}
         />
       ) : null}
@@ -486,6 +527,8 @@ export function TrailingOverlays(props: {
           value={mode.text}
           placeholder="your name"
           onInput={(text) => setMode({ ...mode, text })}
+          onSave={() => dispatch({ type: "confirmDialog" })}
+          onCancel={() => setMode({ type: "normal" })}
           theme={theme}
         />
       ) : null}
@@ -497,6 +540,8 @@ export function TrailingOverlays(props: {
           value={mode.text}
           placeholder={TREE_PROMPTS[mode.ask].placeholder}
           onInput={(text) => setMode({ ...mode, text })}
+          onSave={() => dispatch({ type: "confirmDialog" })}
+          onCancel={() => setMode({ type: "normal" })}
           theme={theme}
         />
       ) : null}

package/src/components/AppShell.brand.test.tsx

@@ -22,7 +22,7 @@ async function brandFrame(): Promise<string[]> {
       onOpenMenu={() => {}}
       threadsPanel={<text>threads</text>}
       threadTitle={LONG_TITLE}
-      threadPanel={<text>review the changes on the right</text>}
+      threadPanel={<text>Select a thread</text>}
       changesOpen
       projectOpen
       onToggleChanges={() => {}}

package/src/components/AppShell.tsx

@@ -69,8 +69,11 @@ export interface AppShellProps {
   theme?: Theme;
   threadsWidth?: number;
   projectWidth?: number;
+  onFocusPane?: (pane: FocusPane) => void;
 }
 
+export type FocusPane = "threads" | "thread" | "changes" | "project";
+
 /** The right region's reserved width: the open project pane, nothing when the region is closed, else the collapsed rail. */
 function rightRegionColumns(
   projectOpen: boolean,
@@ -122,6 +125,7 @@ export function AppShell({
   theme,
   threadsWidth = 30,
   projectWidth = 32,
+  onFocusPane,
 }: AppShellProps): React.ReactNode {
   const tokens = theme ?? DARK;
   const { width: terminalWidth } = useTerminalDimensions();
@@ -214,7 +218,13 @@ export function AppShell({
         <TooltipProvider theme={tokens}>
           <box style={{ flexGrow: 1, flexDirection: "row" }}>
             {sidebarOpen ? (
-              <PanelColumn width={threadsWidth} border="right" header={brandChrome} theme={tokens}>
+              <PanelColumn
+                width={threadsWidth}
+                border="right"
+                header={brandChrome}
+                onFocus={() => onFocusPane?.("threads")}
+                theme={tokens}
+              >
                 {threadsPanel}
               </PanelColumn>
             ) : null}
@@ -237,6 +247,7 @@ export function AppShell({
                   reopenRightControl,
                   rightRegionClosed,
                 )}
+                onFocus={() => onFocusPane?.("thread")}
                 theme={tokens}
               >
                 {threadPanel}
@@ -244,6 +255,7 @@ export function AppShell({
             ) : null}
             {changesOpen ? (
               <box
+                onMouseDown={() => onFocusPane?.("changes")}
                 style={{
                   flexDirection: "column",
                   flexGrow: 1,
@@ -266,6 +278,7 @@ export function AppShell({
                 border="left"
                 header={null}
                 headerRight={projectToggles}
+                onFocus={() => onFocusPane?.("project")}
                 theme={tokens}
               >
                 {projectPanel}