fix(web): restore composer focus when returning to a thread

apps/web/src/components/ChatView.tsx

@@ -216,7 +216,7 @@ import { usePanelAnimationSettings, usePanelPresence } from "../panelAnimations"
 import { useNewThreadHandler } from "../hooks/useHandleNewThread";
 import { useOpenPanelPullRequestUrl } from "../hooks/useOpenPanelPullRequestUrl";
 import { isPreviewFocused } from "../lib/previewFocus";
-import { focusTerminalOnThreadEnter, getTerminalFocusOwner } from "../lib/terminalFocus";
+import { getTerminalFocusOwner } from "../lib/terminalFocus";
 import {
   deriveLogicalProjectKeyFromSettings,
   selectProjectGroupingSettings,
@@ -2138,8 +2138,10 @@ export default function ChatView(props: ChatViewProps) {
   });
 
   useFocusComposerOnThreadOpen(
-    activeThread?.id,
-    !embedded && !terminalUiState.terminalOpen,
+    activeThreadRef,
+    workspaceLayoutElement,
+    !embedded,
+    terminalUiState.terminalOpen,
     focusComposerStable,
   );
 
@@ -2676,14 +2678,6 @@ export default function ChatView(props: ChatViewProps) {
     setTerminalUiLaunchContext(null);
   }
 
-  // Entering a thread with its drawer open focuses the drawer terminal; opening
-  // it from a handler requests focus there. A closed drawer leaves focus to the
-  // composer effect above.
-  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- focuses the open drawer terminal when entering a thread
-  useEffect(() => {
-    if (activeThreadRef && !embedded) return focusTerminalOnThreadEnter(activeThreadRef);
-  }, [activeThreadRef, embedded]);
-
   const getShortcutContext = (eventTarget: EventTarget | null = document.activeElement) => ({
     terminalFocus: getTerminalFocusOwner() !== null,
     terminalOpen: Boolean(terminalUiState.terminalOpen),

apps/web/src/components/ThreadTerminalDrawer.tsx

@@ -1206,6 +1206,7 @@ function TerminalSessionViewport({
     const unregister = registerTerminalFocusTarget({
       threadRef,
       terminalId,
+      element: mount,
       focus,
     });
     return () => {

apps/web/src/components/chat/useFocusComposerOnThreadOpen.browser.test.tsx

@@ -1,19 +1,28 @@
-import { useRef } from "react";
+import { scopeThreadRef } from "@t3tools/client-runtime/environment";
+import { EnvironmentId, ThreadId } from "@t3tools/contracts";
+import { useRef, useState } from "react";
 import { expect, it, vi } from "vite-plus/test";
 
 import { act, fakeTimers, render } from "../../../test/render";
 import { useFocusComposerOnThreadOpen } from "./useFocusComposerOnThreadOpen";
 
 function ThreadProbe(props: { threadId: string }) {
   const composerRef = useRef<HTMLTextAreaElement>(null);
-  useFocusComposerOnThreadOpen(props.threadId, true, () => composerRef.current?.focus());
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  useFocusComposerOnThreadOpen(
+    scopeThreadRef(EnvironmentId.make("rename"), ThreadId.make(props.threadId)),
+    root,
+    true,
+    false,
+    () => composerRef.current?.focus(),
+  );
   return (
-    <>
+    <div ref={setRoot}>
       <div data-sidebar-row="thread:beta">
         <input aria-label="Thread title" />
       </div>
       <textarea aria-label="Message" ref={composerRef} />
-    </>
+    </div>
   );
 }
 

apps/web/src/components/chat/useFocusComposerOnThreadOpen.ts

@@ -1,21 +1,40 @@
+import type { ScopedThreadRef } from "@t3tools/contracts";
 import { useEffect } from "react";
 
-/** Lands the caret in the composer a frame after a thread opens. */
+import { restoreFocusOnThreadEnter } from "../../lib/terminalFocus";
+
+/** Restores thread focus, landing the caret a frame after composer entry. */
 export function useFocusComposerOnThreadOpen(
-  threadId: string | undefined,
+  threadRef: ScopedThreadRef | null,
+  root: HTMLElement | null,
   enabled: boolean,
+  terminalOpen: boolean,
   focusComposer: () => void,
 ) {
-  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- schedules a frame to focus the composer DOM element when a thread opens with the terminal closed
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- restores DOM focus on thread entry and after the drawer opens or closes
   useEffect(() => {
-    if (!threadId || !enabled) return;
-    const frame = window.requestAnimationFrame(() => {
-      // Double-clicking a sidebar row opens its thread and its rename field in one gesture.
-      if (document.activeElement?.matches("[data-sidebar-row] input")) return;
-      focusComposer();
+    if (!threadRef || !enabled || !root) return;
+    let frame: number | undefined;
+    const leave = restoreFocusOnThreadEnter(threadRef, {
+      root,
+      focusComposer: () => {
+        frame = window.requestAnimationFrame(() => {
+          // Double-clicking a sidebar row opens its thread and its rename field in one gesture.
+          if (document.activeElement?.matches("[data-sidebar-row] input")) return;
+          focusComposer();
+        });
+      },
     });
     return () => {
-      window.cancelAnimationFrame(frame);
+      leave();
+      if (frame !== undefined) window.cancelAnimationFrame(frame);
     };
-  }, [threadId, enabled, focusComposer]);
+  }, [
+    threadRef,
+    root,
+    enabled,
+    // oxlint-disable-next-line react/exhaustive-effect-dependencies -- Drawer visibility changes also restore focus after explicit open/close actions.
+    terminalOpen,
+    focusComposer,
+  ]);
 }

apps/web/src/lib/terminalFocus.browser.test.ts

@@ -2,11 +2,16 @@ import { scopeThreadRef } from "@t3tools/client-runtime/environment";
 import { EnvironmentId, ThreadId } from "@t3tools/contracts";
 import { describe, expect, it } from "vite-plus/test";
 
+import { useRightPanelStore } from "../rightPanelStore";
+import { useTerminalUiStateStore } from "../terminalUiStateStore";
+
 import {
   consumePendingTerminalFocus,
   focusTerminal,
+  focusTerminalOnNavigation,
   focusTerminalViewport,
   registerTerminalFocusTarget,
+  restoreFocusOnThreadEnter,
 } from "./terminalFocus";
 
 // The drawer's collapsed shape: a 0fr grid row that clips the viewport, which
@@ -57,3 +62,143 @@ describe("focusTerminalViewport", () => {
     expect(document.activeElement).toBe(viewport.input);
   });
 });
+
+function enterOtherThread(threadId: string) {
+  restoreFocusOnThreadEnter(scopeThreadRef(EnvironmentId.make("env"), ThreadId.make(threadId)), {
+    root: document.createElement("div"),
+    focusComposer: () => {},
+  })();
+}
+
+function mountThread(threadId: string, environmentId = "env") {
+  const ref = scopeThreadRef(EnvironmentId.make(environmentId), ThreadId.make(threadId));
+  const root = document.createElement("div");
+  const composer = document.createElement("textarea");
+  composer.ariaLabel = "Composer";
+  composer.dataset.workspaceArea = "composer";
+  root.append(composer);
+  document.body.append(root);
+  const drawerState = { visible: true };
+  const mountTerminal = (id: string) => {
+    const input = document.createElement("textarea");
+    input.ariaLabel = id;
+    root.append(input);
+    const unregister = registerTerminalFocusTarget({
+      threadRef: ref,
+      terminalId: id,
+      element: input,
+      focus: () => {
+        if (id === "drawer" && !drawerState.visible) return false;
+        input.focus();
+        return document.activeElement === input;
+      },
+    });
+    return {
+      input,
+      [Symbol.dispose]() {
+        unregister();
+        input.remove();
+      },
+    };
+  };
+  useTerminalUiStateStore.getState().ensureTerminal(ref, "drawer", { open: true, active: true });
+  useRightPanelStore.getState().openTerminal(ref, "panel");
+  return {
+    ref,
+    root,
+    composer,
+    drawerState,
+    mountTerminal,
+    enter: () => restoreFocusOnThreadEnter(ref, { root, focusComposer: () => composer.focus() }),
+    [Symbol.dispose]: () => root.remove(),
+  };
+}
+
+describe("thread focus restoration", () => {
+  it.each(["composer", "drawer", "panel", "remounted composer"] as const)(
+    "restores %s focus when returning to a thread with both terminals open",
+    (control) => {
+      using thread = mountThread(`return-${control}`);
+      using drawer = thread.mountTerminal("drawer");
+      using panel = thread.mountTerminal("panel");
+      const leave = thread.enter();
+      if (control === "panel") document.body.append(panel.input);
+      const remount = control === "remounted composer";
+      const initial =
+        control === "composer" || remount
+          ? thread.composer
+          : control === "drawer"
+            ? drawer.input
+            : panel.input;
+      initial.focus();
+      expect(document.activeElement).toBe(initial);
+      if (remount) focusTerminal(thread.ref, "not-ready");
+      leave();
+      thread.root.hidden = true;
+      if (!remount) enterOtherThread("other-thread");
+      drawer[Symbol.dispose]();
+      panel[Symbol.dispose]();
+      if (remount) thread.root.remove();
+      using remountedThread = remount ? mountThread(`return-${control}`) : undefined;
+      const returnedThread = remountedThread ?? thread;
+      returnedThread.root.hidden = false;
+      using remountedDrawer = returnedThread.mountTerminal("drawer");
+      using remountedPanel = returnedThread.mountTerminal("panel");
+      if (control === "panel") document.body.append(remountedPanel.input);
+      using _leave = { [Symbol.dispose]: returnedThread.enter() };
+      const expected =
+        control === "composer" || remount
+          ? returnedThread.composer
+          : control === "drawer"
+            ? remountedDrawer.input
+            : remountedPanel.input;
+
+      expect(document.activeElement).toBe(expected);
+    },
+  );
+
+  it("keeps an explicit terminal navigation request ahead of remembered composer focus", () => {
+    using thread = mountThread("explicit-reveal");
+    using _drawer = thread.mountTerminal("drawer");
+    using panel = thread.mountTerminal("panel");
+    const leave = thread.enter();
+    thread.composer.focus();
+    leave();
+    enterOtherThread("before-reveal");
+
+    focusTerminalOnNavigation(thread.ref, "panel");
+    using _leave = { [Symbol.dispose]: thread.enter() };
+
+    expect(document.activeElement).toBe(panel.input);
+  });
+
+  it("keeps an explicit drawer-open request while its viewport becomes visible", () => {
+    using thread = mountThread("drawer-open");
+    using drawer = thread.mountTerminal("drawer");
+    const leave = thread.enter();
+    thread.composer.focus();
+    thread.drawerState.visible = false;
+    useTerminalUiStateStore.getState().setTerminalOpen(thread.ref, false);
+    focusTerminal(thread.ref, "drawer");
+    useTerminalUiStateStore.getState().setTerminalOpen(thread.ref, true);
+    leave();
+    using _leave = { [Symbol.dispose]: thread.enter() };
+    thread.drawerState.visible = true;
+    consumePendingTerminalFocus(thread.ref, "drawer");
+
+    expect(document.activeElement).toBe(drawer.input);
+  });
+
+  it("falls back to the composer when the remembered drawer terminal was closed", () => {
+    using thread = mountThread("closed-remembered");
+    using drawer = thread.mountTerminal("drawer");
+    const leave = thread.enter();
+    expect(document.activeElement).toBe(drawer.input);
+    leave();
+    useTerminalUiStateStore.getState().setTerminalOpen(thread.ref, false);
+    thread.drawerState.visible = false;
+    using _leave = { [Symbol.dispose]: thread.enter() };
+
+    expect(document.activeElement).toBe(thread.composer);
+  });
+});

apps/web/src/lib/terminalFocus.test.ts

@@ -11,13 +11,22 @@ import {
   focusPanelTerminalAfterClose,
   focusTerminal,
   focusTerminalOnNavigation,
-  focusTerminalOnThreadEnter,
   registerTerminalFocusTarget,
+  restoreFocusOnThreadEnter,
 } from "./terminalFocus";
 
 const threadRef = (threadId: string) =>
   scopeThreadRef(EnvironmentId.make("env"), ThreadId.make(threadId));
 
+// Node has no DOM; entry only listens on the root's document for focus changes.
+const enterThread = (ref: ReturnType<typeof threadRef>) =>
+  restoreFocusOnThreadEnter(ref, {
+    root: {
+      ownerDocument: Object.assign(new EventTarget(), { activeElement: null }),
+    } as unknown as HTMLElement,
+    focusComposer: () => {},
+  });
+
 describe("focusTerminal", () => {
   it("focuses a mounted target right away", () => {
     const ref = threadRef("mounted");
@@ -173,7 +182,7 @@ describe("focusTerminal", () => {
     const focus = vi.fn(() => true);
     const unregister = registerTerminalFocusTarget({ threadRef: ref, terminalId: "a", focus });
 
-    const leave = focusTerminalOnThreadEnter(ref);
+    const leave = enterThread(ref);
 
     expect(focus).toHaveBeenCalledTimes(1);
     leave();
@@ -199,7 +208,7 @@ describe("focusTerminal", () => {
       terminalId: "panel",
       focus: panel,
     });
-    const leave = focusTerminalOnThreadEnter(ref);
+    const leave = enterThread(ref);
 
     expect(drawer).not.toHaveBeenCalled();
     expect(panel).toHaveBeenCalledTimes(1);
@@ -218,12 +227,12 @@ describe("focusTerminal", () => {
       focus: drawer,
     });
 
-    const leaveFirst = focusTerminalOnThreadEnter(ref);
+    const leaveFirst = enterThread(ref);
     focusTerminal(ref, "drawer");
     focusTerminalOnNavigation(ref, "drawer");
     leaveFirst();
     drawer.mockClear();
-    const leaveSecond = focusTerminalOnThreadEnter(ref);
+    const leaveSecond = enterThread(ref);
 
     expect(drawer).toHaveBeenCalledTimes(1);
     leaveSecond();
@@ -234,15 +243,15 @@ describe("focusTerminal", () => {
     const ref = threadRef("revisited");
     useTerminalUiStateStore.getState().ensureTerminal(ref, "drawer", { open: true, active: true });
     focusTerminalOnNavigation(ref, "panel");
-    focusTerminalOnThreadEnter(threadRef("elsewhere"))();
+    enterThread(threadRef("elsewhere"))();
 
     const drawer = vi.fn(() => true);
     const unregisterDrawer = registerTerminalFocusTarget({
       threadRef: ref,
       terminalId: "drawer",
       focus: drawer,
     });
-    const leave = focusTerminalOnThreadEnter(ref);
+    const leave = enterThread(ref);
 
     expect(drawer).toHaveBeenCalledTimes(1);
     leave();