fix(web): arrow and page keys scroll the conversation again after a click or F6

apps/web/src/components/ChatView.logic.ts

@@ -1068,10 +1068,10 @@ export function hasServerAcknowledgedLocalDispatch(input: {
   );
 }
 
-// Returning to the window should land the caret in the composer, so the reader can type right
-// away. The exceptions are places where focus is deliberate: another text field, a terminal in
-// the drawer or the right panel, an open dialog, menu, or popup, or a region or sidebar row
-// reached from the keyboard. A plain focused button or a clicked row yields to the composer.
+// Returning to the window lands the caret in the composer, except where focus is deliberate:
+// another text field, a terminal in the drawer or the right panel, an open dialog, menu, or
+// popup, or a region, timeline, or sidebar row reached from the keyboard. A plain focused button
+// or a clicked row yields to the composer.
 export function shouldRefocusComposerOnWindowFocus(
   activeElement:
     | (Pick<Element, "tagName" | "closest" | "getAttribute"> & { isContentEditable?: boolean })

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

@@ -2,7 +2,7 @@ import { injectHtmlRenderBootstrap } from "@t3tools/shared/htmlRender";
 import { HtmlRenderDocument } from "../files/BrowserDocumentFrame";
 import { flushSync } from "react-dom";
 import { AudioPreview } from "../files/AudioPreview";
-import { cdp, page } from "vite-plus/test/browser";
+import { cdp, page, userEvent } from "vite-plus/test/browser";
 import {
   ComposerContextId,
   EnvironmentId,
@@ -37,6 +37,7 @@ import { environmentThreadDetails } from "../../state/threads";
 import { act, fakeTimers, render, stubGlobal } from "../../../test/render";
 import { ChangedFilesCard } from "./ChangedFilesTree";
 import { MessagesTimeline } from "./MessagesTimeline";
+import { createWorkspaceFocusController, workspaceAreaProps } from "../../lib/workspaceFocus";
 import { resolveTimelineIsAtEnd } from "./MessagesTimeline.logic";
 import { makeStreamingTimelineFixture } from "../../test-fixtures";
 import {
@@ -534,6 +535,38 @@ describe("MessagesTimeline messages", () => {
     await expectHeadingInView("Last turn", "Turn 118:");
   });
 
+  it("scrolls from the keyboard once F6 moves into the conversation", async () => {
+    setup();
+    const props = baseProps();
+    const entries = Array.from({ length: 40 }, (_, index) =>
+      message(`Turn ${index}:\n\n${"x ".repeat(200)}`, {}, `turn-${index}`),
+    );
+    await using _screen = await renderElement(
+      <>
+        <div
+          {...workspaceAreaProps("conversation", 1, "Conversation")}
+          className="relative flex min-h-0 flex-1 flex-col"
+        >
+          <MessagesTimeline {...props} timelineEntries={entries} />
+        </div>
+        <div {...workspaceAreaProps("composer", 2, "Message input")}>
+          <button type="button">Send</button>
+        </div>
+      </>,
+    );
+    const focus = createWorkspaceFocusController(document);
+    using _focus = { [Symbol.dispose]: focus.dispose };
+    const viewport = props.listRef.current!.getScrollableNode()!;
+    await vi.waitFor(() => expect(viewport.scrollTop).toBeGreaterThan(0));
+    const atEnd = viewport.scrollTop;
+    page.getByRole("button", { name: "Send" }).element().focus();
+    await userEvent.keyboard("{F6}");
+    focus.move(-1);
+    expect(viewport).toHaveAttribute("data-workspace-keyboard-focus");
+    await userEvent.keyboard("{PageUp}");
+    await vi.waitFor(() => expect(viewport.scrollTop).toBeLessThan(atEnd));
+  });
+
   it("disables the minimap's next turn button at the bottom of the thread", async () => {
     setup();
     const props = baseProps();

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -1445,6 +1445,9 @@ const ConversationTimeline = memo(function ConversationTimeline({
               onScroll={handleScroll}
               onItemSizeChanged={scheduleMinimapRefresh}
               onMetricsChange={scheduleMinimapRefresh}
+              // Keyboard scrolling only moves the focused element; F6 and clicks land here.
+              tabIndex={-1}
+              data-workspace-focus-default
               className={cn(
                 "messages-timeline-scroll scrollbar-gutter-both h-full min-h-0 overflow-x-hidden overscroll-y-contain [overflow-anchor:none]",
                 topFadeEnabled && "topbar-scroll-fade",

apps/web/src/index.css

@@ -2584,11 +2584,19 @@ code {
 }
 
 /* A workspace area with no control of its own takes F6 focus itself; keep that visible.
-   workspaceFocus.ts marks those, since :focus-visible also matches a clicked area after a key press. */
+   workspaceFocus.ts marks those, since :focus-visible also matches a clicked area after a key press.
+   The conversation's timeline takes it instead, and its top fade mask would hide its own ring. */
 [data-workspace-area]:focus-visible {
   outline: none;
 }
-[data-workspace-keyboard-focus]:focus {
+[data-workspace-keyboard-focus]:focus,
+[data-workspace-area="conversation"]:has(
+  .messages-timeline-scroll[data-workspace-keyboard-focus]:focus
+) {
   outline: 2px solid var(--ring);
   outline-offset: -2px;
 }
+
+.messages-timeline-scroll:focus-visible {
+  outline: none;
+}

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

@@ -33,6 +33,15 @@ function setup() {
   };
 }
 
+/** Mirrors MessagesTimeline's scroller, which takes focus so the keyboard scrolls it. */
+function conversationScroller(height: number) {
+  const timeline = document.createElement("div");
+  timeline.style.cssText = `height: ${height}px; overflow-y: auto`;
+  timeline.tabIndex = -1;
+  timeline.dataset.workspaceFocusDefault = "";
+  return timeline;
+}
+
 describe("workspace area focus", () => {
   it("cycles in workspace order in both directions, independent of DOM order", () => {
     using fixture = setup();
@@ -42,7 +51,7 @@ describe("workspace area focus", () => {
     const composer = fixture.area("composer", 2);
     sidebar.button.focus();
     fixture.controller.move(1);
-    // The conversation is a region; it takes focus itself rather than its first button.
+    // Without a timeline (an empty thread), the region takes focus rather than its first button.
     expect(document.activeElement).toBe(conversation.element);
     fixture.controller.move(1);
     expect(document.activeElement).toBe(composer.button);
@@ -204,8 +213,7 @@ describe("workspace area focus", () => {
   it("does not scroll the conversation to an old control", () => {
     using fixture = setup();
     const conversation = fixture.area("conversation", 1);
-    const timeline = document.createElement("div");
-    timeline.style.cssText = "height: 50px; overflow-y: auto";
+    const timeline = conversationScroller(50);
     const copy = document.createElement("button");
     copy.textContent = "Copy";
     timeline.append(copy, Object.assign(document.createElement("div"), { style: "height: 400px" }));
@@ -217,10 +225,28 @@ describe("workspace area focus", () => {
     // Live follow moved the timeline to the newest output.
     timeline.scrollTop = 300;
     fixture.controller.move(-1);
-    expect(document.activeElement).toBe(conversation.element);
+    expect(document.activeElement).toBe(timeline);
     expect(timeline.scrollTop).toBe(300);
   });
 
+  it("scrolls the conversation with the keyboard once an empty thread gets a timeline", async () => {
+    using fixture = setup();
+    const conversation = fixture.area("conversation", 1);
+    conversation.button.remove();
+    conversation.element.style.height = "200px";
+    const composer = fixture.area("composer", 2);
+    composer.button.focus();
+    fixture.controller.move(-1);
+    expect(document.activeElement).toBe(conversation.element);
+    fixture.controller.move(1);
+    const timeline = conversationScroller(200);
+    timeline.append(Object.assign(document.createElement("div"), { style: "height: 2000px" }));
+    conversation.element.append(timeline);
+    fixture.controller.move(-1);
+    await userEvent.keyboard("{ArrowDown}{PageDown}");
+    await vi.waitFor(() => expect(timeline.scrollTop).toBeGreaterThan(0));
+  });
+
   it.each([
     ["panel", "panel", "removed"],
     ["conversation", "composer", "removed"],
@@ -281,7 +307,9 @@ describe("workspace area focus", () => {
     bringBack.textContent = "Bring back";
     content.append(bringBack);
     panel.element.append(content);
-    fixture.area("conversation", 1, content);
+    const timeline = conversationScroller(50);
+    timeline.append(Object.assign(document.createElement("div"), { style: "height: 400px" }));
+    fixture.area("conversation", 1, content).element.append(timeline);
     const composer = fixture.area("composer", 2, content);
     const editor = document.createElement("div");
     editor.contentEditable = "true";

apps/web/src/lib/workspaceFocus.ts

@@ -100,18 +100,22 @@ function revealInScrollers(target: HTMLElement) {
 export function createWorkspaceFocusController(doc: Document) {
   const lastFocused = new Map<string, HTMLElement>();
   let lastArea: string | undefined;
-  // An area that took focus itself from the keyboard. Chromium's :focus-visible also matches
-  // a clicked area after any later key press, so the ring and window return read this mark.
+  // An area that took focus itself from the keyboard, or the non-tabbable default (the
+  // conversation's scroller) standing in for it. Chromium's :focus-visible also matches a
+  // clicked area after any later key press, so the ring and window return read this mark.
   let keyboardArea: HTMLElement | undefined;
   let previousTarget: EventTarget | null = null;
   const unmarkKeyboardArea = () => {
     keyboardArea?.removeAttribute("data-workspace-keyboard-focus");
     keyboardArea = undefined;
   };
-  const markKeyboardArea = (area: HTMLElement) => {
-    if (!area.matches(":focus-visible")) return;
-    keyboardArea = area;
-    area.setAttribute("data-workspace-keyboard-focus", "");
+  const standsInFor = (element: HTMLElement, area: HTMLElement) =>
+    element === area ||
+    (element.tabIndex < 0 && element.hasAttribute("data-workspace-focus-default"));
+  const markKeyboardArea = (target: HTMLElement) => {
+    if (!target.matches(":focus-visible")) return;
+    keyboardArea = target;
+    target.setAttribute("data-workspace-keyboard-focus", "");
   };
   const remember = (event: FocusEvent) => {
     if (event.target !== keyboardArea) unmarkKeyboardArea();
@@ -121,7 +125,7 @@ export function createWorkspaceFocusController(doc: Document) {
     if (!(event.target instanceof HTMLElement)) return;
     const area = workspaceArea(event.target);
     if (!area?.dataset.workspaceArea) return;
-    if (arrived && event.target === area) markKeyboardArea(area);
+    if (arrived && standsInFor(event.target, area)) markKeyboardArea(event.target);
     lastArea = area.dataset.workspaceArea;
     const key = area.dataset.workspaceFocusKey ?? lastArea;
     lastFocused.delete(key);
@@ -141,11 +145,14 @@ export function createWorkspaceFocusController(doc: Document) {
     const belongs = (element: HTMLElement) => workspaceArea(element) === area && usable(element);
     // A side chat's message input sits in its own area inside the panel. Opening the
     // panel focuses it, but F6 visits that area on its own, so it moves past it here.
+    // A nested timeline stands in only for its own area, never ahead of that input.
     const preferred = Array.from(
       area.querySelectorAll<HTMLElement>(
         '[data-workspace-focus-default], [data-sidebar-row][aria-current="page"], [data-settings-section][aria-current="page"], .xterm-helper-textarea, [contenteditable="true"]',
       ),
-    ).find(nested ? usable : belongs);
+    ).find((element) =>
+      nested && !standsInFor(element, area) ? usable(element) : belongs(element),
+    );
     const fallback = Array.from(area.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).find(
       (element) => element.tabIndex >= 0 && belongs(element),
     );
@@ -172,10 +179,14 @@ export function createWorkspaceFocusController(doc: Document) {
         )
       : undefined;
     // Moving the timeline to an old control would also stop it following a running turn,
-    // so the conversation reuses a control only while it is still in view.
+    // so the conversation reuses a control only while it is still in view. A remembered
+    // area is only the fallback it was then, so controls mounted since take precedence.
     const isConversation = area.dataset.workspaceArea === "conversation";
     const targets = new Set([
-      previous && belongs(previous) && (!isConversation || isInScrollView(previous))
+      previous &&
+      previous !== area &&
+      belongs(previous) &&
+      (!isConversation || isInScrollView(previous))
         ? previous
         : undefined,
       isConversation ? undefined : restored,
@@ -192,7 +203,7 @@ export function createWorkspaceFocusController(doc: Document) {
       if (active === target || (active && target.contains(active))) {
         if (target !== area && !isConversation) revealInScrollers(target);
         // Focusing the already focused area fires no focusin, as when F6 has nowhere else to go.
-        if (target === area) markKeyboardArea(area);
+        if (standsInFor(target, area)) markKeyboardArea(target);
         return true;
       }
     }