From 35df86bfa54f18054e86dda8c1530fc5519bb549 Mon Sep 17 00:00:00 2001
From: mtoohey <mtoohey@squareup.com>
Date: Wed, 4 Nov 2026 23:51:54 +0000
Subject: [PATCH 1/7] fix(messages): keep focus a person moved before a message
 reveal lands

Opening a conversation at a message reveals that message by scrolling
to its row and focusing it. The reveal waits for the thread to load. If
the person clicks into the composer and starts typing first, the reveal
still moves focus to the row once the thread is ready. Keys typed after
that go to the row instead of the editor. In WebKit the move also clears
the editor's selection, so text being inserted at that moment is
dropped.

The commit "test(inbox): wait for the entry reveal before filling an
opened conversation" traced the WebKit flake in
`inbox-archive.spec.mjs:658` (run 41752428902,
https://github.com/block/buzz-app/actions/runs/41752428902/job/126320899490)
to this. That commit made the test wait for the reveal and left the
product behavior alone.

`useMessageReveal` focuses the row the first time it reveals a request
without checking where focus is. Only a later focus, after the row was
replaced, checks first, and then only recovers focus that fell to the
body. ThreadPanel's own focus handoff for a reopened thread already
follows a "don't steal focus" rule ("Focus the person has since placed
anywhere ... is not stolen"), but it runs when the request arrives. The
reveal runs later, after the target loads.

The user-visible rule: a reveal no longer takes focus from a control the
person moved to after opening the conversation. The row is still
scrolled into view, marked as the arrival, and the navigation still
completes. Only the focus move is skipped.

The hook now records, for each request, the focused element when the
request arrives (the opener, or nothing once the opener unmounted) and
whether the person presses a key or pointer after that. The first focus
yields only when both hold:

- focus is on something other than the body, the scroller or an element
  containing it (such as `main`), or the opener
- the person pressed a key or pointer since the request arrived

Otherwise the row takes focus as before. The later recovery focus is
unchanged.

The input condition is there because the app also hands off focus
between the request and the reveal. Closing the search dialog focuses
`main` or the conversation's composer (`conversationFocusTarget`), and
closing Members returns focus to its trigger. The click that closes
the dialog lands before the request arrives, so none of these count
as the person moving focus. Without the condition, a reveal yielded to
those handoffs. Journeys that expect the revealed row to take focus
then failed (see Validation), and in a member channel the result would
depend on whether the dialog's close finished before the thread loaded.
The condition keeps those outcomes as they were. A click or Tab into
the composer, or typing in a composer the app focused, still counts as
the person's.

`use-message-reveal.test.tsx` adds three cases:

- with no interaction, the row takes focus
- a composer the person focused by pointer or key before the reveal
  lands keeps focus, while the row is still scrolled into view,
  completed and marked
- a control the app focused without input still loses focus to the row

No browser test changes. The `revealed()` helper in
`inbox-archive.spec.mjs` is unchanged and still waits for the row to
take focus.

Local Linux workstation (8-CPU quota), Playwright 1.63.0, `--no-deps
--retries=0`:

- `use-message-reveal.test.tsx`: 26/26 passed. Against the unfixed
  hook, both input cases fail, because the row takes focus from the
  composer. The other two new cases pass on both, since they pin
  behavior that must not change.
- Audit, using a temporary, uncommitted `console.error` in the branch
  where the reveal yields. The `app` fixture fails a journey on any
  console error, so every journey that takes the new branch fails at
  teardown.
  - The rule without the input condition, the first 571 tests of the
    full Chromium suite: two journeys yielded, both to app handoffs, and
    both failed their row-focus assertion. In `global-search.spec.mjs:138`
    focus was on `main` after the search dialog closed. In
    `channel-members.spec.mjs:237` focus had returned to "Manage
    members" after the Members dialog closed. That led to the input
    condition.
  - The final rule, every browser spec that asserts focus on a message
    row plus the search, thread, Solo, inbox, channel-members and
    profiles specs (83 files), Chromium, 5 workers: 458 passed,
    2 skipped and 1 failed, with no yields. The failure,
    `message-actions.spec.mjs:15` (`animated: false`), also fails 2/2
    on this workstation without this change.
  - The final rule, both engines, 4 workers: `inbox-archive.spec.mjs`
    in full, plus `global-search`, `channel-members`, `thread-opening`
    and `navigation-thread-history`: 86/86 passed, with no yields.
- The user-visible case, typing into the composer before the reveal
  lands, is covered by the unit cases. No browser journey was added
  for it.
- Vitest for `src/features/messages`: 92 files, 2622 tests passed.
- `tsc --noEmit`, `biome check --error-on-warnings` and
  `git diff --check` are clean.

A green run doesn't prove the flake is gone. Hosted CI covers broad
validation.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: mtoohey <mtoohey@squareup.com>
(cherry picked from commit 5a65e9c91766b005c0dd99e46ce0136e0a06181a)
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../messages/use-message-reveal.test.tsx      | 52 ++++++++++++++++++-
 src/features/messages/use-message-reveal.ts   | 49 ++++++++++++++---
 2 files changed, 94 insertions(+), 7 deletions(-)

diff --git a/src/features/messages/use-message-reveal.test.tsx b/src/features/messages/use-message-reveal.test.tsx
index 883c43f56d..bfb5b353bc 100644
--- a/src/features/messages/use-message-reveal.test.tsx
+++ b/src/features/messages/use-message-reveal.test.tsx
@@ -1,5 +1,11 @@
 // @vitest-environment jsdom
-import { act, cleanup, render, screen } from "@testing-library/react";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
 import { useRef } from "react";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import styles from "./Messages.module.css";
@@ -98,18 +104,21 @@ function mount(
           </div>
         </div>
         <button type="button">Elsewhere</button>
+        <textarea aria-label="Composer" />
       </>
     );
   }
   const result = render(<Surface />);
   const row = screen.getByText("Target");
   const outside = screen.getByRole("button", { name: "Elsewhere" });
+  const composer = screen.getByRole("textbox", { name: "Composer" });
   return {
     ...result,
     request,
     complete,
     row,
     outside,
+    composer,
     restart: () => result.rerender(<Surface prepare={() => {}} />),
     remountRow: () => result.rerender(<Surface rowKey={1} />),
     next: () =>
@@ -224,6 +233,47 @@ it("marks a reveal beside the reader only once its row is uncovered", async () =
   expect(document.activeElement).toBe(outside);
 });
 
+it("focuses the revealed row when nothing claimed focus since the request", async () => {
+  const { row, complete } = mount();
+  await frame(); // Attach observers.
+  await frame(); // Reveal.
+  expect(document.activeElement).toBe(row);
+  await frame();
+  expect(complete).toHaveBeenCalledOnce();
+});
+
+it.each(["pointerDown", "keyDown"] as const)(
+  "leaves focus with a composer the person focused before the reveal lands (%s)",
+  async (input) => {
+    const { row, composer, complete } = mount();
+    const focus = vi.spyOn(row, "focus");
+    await frame(); // Attach observers; the target is still loading.
+    fireEvent[input](composer);
+    composer.focus();
+    await frame(); // Reveal.
+    expect(row.scrollIntoView).toHaveBeenCalled();
+    expect(document.activeElement).toBe(composer);
+    await mutate(row); // Another reveal attempt still leaves the composer.
+    await frame();
+    await frame();
+    expect(document.activeElement).toBe(composer);
+    expect(focus).not.toHaveBeenCalled();
+    expect(complete).toHaveBeenCalledOnce();
+    await idle();
+    expect(highlighted(row)).toBe(true);
+  },
+);
+
+it("takes focus the app handed to another control without the person's input", async () => {
+  const { row, composer, complete } = mount();
+  await frame();
+  composer.focus(); // Such as a closing dialog's focus return.
+  await frame();
+  expect(document.activeElement).toBe(row);
+  await frame();
+  expect(complete).toHaveBeenCalledOnce();
+});
+
 it.each([false, true])(
   "preserves moved focus before verification (mutation: %s)",
   async (mutation) => {
diff --git a/src/features/messages/use-message-reveal.ts b/src/features/messages/use-message-reveal.ts
index e8b8e1b832..9a60e78f83 100644
--- a/src/features/messages/use-message-reveal.ts
+++ b/src/features/messages/use-message-reveal.ts
@@ -53,6 +53,33 @@ export function useMessageReveal({
     },
     [],
   );
+  // Focus as each request arrives: the control that opened it, or none once
+  // that control unmounted. Recorded before the target loads, however late,
+  // with whether the person has pressed a key or pointer since.
+  const opener = useRef<{
+    signal: AbortSignal;
+    element: Element | null;
+    input: boolean;
+  }>(undefined);
+  useLayoutEffect(() => {
+    if (!signal) return;
+    if (opener.current?.signal !== signal)
+      opener.current = {
+        signal,
+        element: document.activeElement,
+        input: false,
+      };
+    const request = opener.current;
+    const input = () => {
+      request.input = true;
+    };
+    document.addEventListener("pointerdown", input, true);
+    document.addEventListener("keydown", input, true);
+    return () => {
+      document.removeEventListener("pointerdown", input, true);
+      document.removeEventListener("keydown", input, true);
+    };
+  }, [signal]);
   useLayoutEffect(() => {
     if (
       !ready ||
@@ -91,15 +118,25 @@ export function useMessageReveal({
       });
       placed?.();
       settled.current = true;
-      // A replacement may recover lost focus, but must not take it from another
-      // control after this request already focused a row successfully.
+      // The first focus yields to a control the person moved to after the
+      // request arrived, such as the composer of a still-loading conversation,
+      // so their typing stays there. Focus handed off by the app meanwhile, or
+      // left on the opener or the surface around the scroller, is still taken.
+      // A replacement may recover lost focus, but must not take it from
+      // another control after this request already focused a row successfully.
+      const active = document.activeElement;
+      const lost = !active || active === document.body;
+      const claimed =
+        !lost &&
+        !active.contains(container) &&
+        active !== opener.current?.element &&
+        !!opener.current?.input;
       let focusPending = false;
       if (
         focus &&
-        (focused.current?.signal !== signal ||
-          (focused.current.row !== row &&
-            (!document.activeElement ||
-              document.activeElement === document.body)))
+        (focused.current?.signal !== signal
+          ? !claimed
+          : focused.current.row !== row && lost)
       ) {
         row.focus({ preventScroll: true });
         focusPending = document.activeElement !== row;

From d6078c5fe1be22a4f867b9dad0aebfb5ba22a90e Mon Sep 17 00:00:00 2001
From: mtoohey <mtoohey@squareup.com>
Date: Thu, 5 Nov 2026 00:55:16 +0000
Subject: [PATCH 2/7] fix(messages): count only input that moved focus as
 claiming it from a reveal

## Problem

Code review of "fix(messages): keep focus a person moved before a message
reveal lands" (warning, `use-message-reveal.ts`): the request's `input`
flag turned true on any keydown or pointerdown after the request,
including keys that move nothing. The reviewer's probe mounted the hook,
called `composer.focus()` with no input, as an app hand-off does (for
example the search dialog's close focusing `conversationFocusTarget`),
then fired keyDown Shift, ArrowDown or Escape. The composer kept focus
and the row never got it.

In the app: a keyboard user picks a search result, the dialog's close
moves focus to the composer, and they press ArrowDown or Shift while the
thread loads. Before that commit the row took focus. With it they
stayed in the composer. The hook's comment ("Focus handed off by the
app meanwhile ... is still taken") held only if no key was pressed at
all.

## Fix

A key or pointer press now only marks a pending press. The request's
`input` turns true when either of these follows:

- a `focusin` after that press, so only a press that actually moved
  focus counts (a click or Tab into the composer)
- a `beforeinput` whose target is the focused element, so typing into
  a composer the app focused still counts

A press that moves nothing (Shift, an arrow, Escape) no longer stops
the row from taking focus. The rest of the rule is unchanged: focus on
the body, the scroller's surroundings or the opener is still taken, and
the later recovery focus is untouched.

The pending press is not cleared. If a press that moved nothing is
followed later by an app hand-off before the reveal lands, that
hand-off counts as the person's. Clicking inside a composer the app had
already focused, without typing, also doesn't count, because focus
doesn't move. Neither case is worse than main, where the reveal always
took focus.

`use-message-reveal.test.tsx` adds the reviewer's probe as a case for
each of Shift, ArrowDown and Escape: the app focuses the composer, the
key is pressed, and the row still takes focus. A fourth case covers
typing into a composer the app focused: keydown and `beforeinput`
leave focus in the composer, while the row is still scrolled into view
and the reveal completes. The existing cases still pass: pointer or
Tab into the composer keeps focus, and app focus without input loses
it to the row.

## Validation

Local Linux workstation (8-CPU quota), Vitest and Playwright 1.63.0,
`--no-deps --retries=0`:

- `use-message-reveal.test.tsx`: 30/30 passed. Against the previous
  rule, the three key cases fail and the rest pass. Removing the
  `beforeinput` listener fails the typing case. Removing the `focusin`
  listener fails both "person focused the composer" cases.
- Vitest for `src/features/messages` (`--maxWorkers=4`): 92 files,
  2626 tests passed.
- `inbox-archive.spec.mjs` in full, plus `global-search`,
  `channel-members`, `thread-opening` and `navigation-thread-history`,
  WebKit and Chromium, `--workers=4`: 86/86 passed.
- `tsc --noEmit`, `biome check --error-on-warnings` and
  `git diff --check` are clean.

A green run doesn't prove the behavior in every hand-off. Hosted CI
covers broad validation.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: mtoohey <mtoohey@squareup.com>
(cherry picked from commit 05e087cb0dd53d9fae91b86f8baaad7f7fed3db7)
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../messages/use-message-reveal.test.tsx      | 38 +++++++++++++++++++
 src/features/messages/use-message-reveal.ts   | 38 +++++++++++++------
 2 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/src/features/messages/use-message-reveal.test.tsx b/src/features/messages/use-message-reveal.test.tsx
index bfb5b353bc..8ffbf78bac 100644
--- a/src/features/messages/use-message-reveal.test.tsx
+++ b/src/features/messages/use-message-reveal.test.tsx
@@ -274,6 +274,44 @@ it("takes focus the app handed to another control without the person's input", a
   expect(complete).toHaveBeenCalledOnce();
 });
 
+it.each(["Shift", "ArrowDown", "Escape"])(
+  "takes focus the app handed off when a key moved nothing (%s)",
+  async (key) => {
+    const { row, composer, complete } = mount();
+    await frame();
+    composer.focus();
+    fireEvent.keyDown(composer, { key });
+    fireEvent.keyUp(composer, { key });
+    await frame();
+    expect(document.activeElement).toBe(row);
+    await frame();
+    expect(complete).toHaveBeenCalledOnce();
+  },
+);
+
+it("leaves focus with a composer the app focused once the person types into it", async () => {
+  const { row, composer, complete } = mount();
+  const focus = vi.spyOn(row, "focus");
+  await frame();
+  composer.focus();
+  fireEvent.keyDown(composer, { key: "a" });
+  fireEvent(
+    composer,
+    new InputEvent("beforeinput", {
+      bubbles: true,
+      cancelable: true,
+      inputType: "insertText",
+      data: "a",
+    }),
+  );
+  await frame();
+  expect(row.scrollIntoView).toHaveBeenCalled();
+  expect(document.activeElement).toBe(composer);
+  expect(focus).not.toHaveBeenCalled();
+  await frame();
+  expect(complete).toHaveBeenCalledOnce();
+});
+
 it.each([false, true])(
   "preserves moved focus before verification (mutation: %s)",
   async (mutation) => {
diff --git a/src/features/messages/use-message-reveal.ts b/src/features/messages/use-message-reveal.ts
index 9a60e78f83..c47204acf4 100644
--- a/src/features/messages/use-message-reveal.ts
+++ b/src/features/messages/use-message-reveal.ts
@@ -55,7 +55,9 @@ export function useMessageReveal({
   );
   // Focus as each request arrives: the control that opened it, or none once
   // that control unmounted. Recorded before the target loads, however late,
-  // with whether the person has pressed a key or pointer since.
+  // with whether the person has since moved focus or typed into the focused
+  // control. A key or pointer press counts only once focus follows it, so a
+  // press that moves nothing (Shift, an arrow, Escape) is not a claim.
   const opener = useRef<{
     signal: AbortSignal;
     element: Element | null;
@@ -70,14 +72,27 @@ export function useMessageReveal({
         input: false,
       };
     const request = opener.current;
-    const input = () => {
-      request.input = true;
+    let pressed = false;
+    const press = () => {
+      pressed = true;
     };
-    document.addEventListener("pointerdown", input, true);
-    document.addEventListener("keydown", input, true);
+    const moved = () => {
+      if (pressed) request.input = true;
+    };
+    const typed = (event: Event) => {
+      if (event.target === document.activeElement) request.input = true;
+    };
+    const listeners = [
+      ["pointerdown", press],
+      ["keydown", press],
+      ["focusin", moved],
+      ["beforeinput", typed],
+    ] as const;
+    for (const [type, listener] of listeners)
+      document.addEventListener(type, listener, true);
     return () => {
-      document.removeEventListener("pointerdown", input, true);
-      document.removeEventListener("keydown", input, true);
+      for (const [type, listener] of listeners)
+        document.removeEventListener(type, listener, true);
     };
   }, [signal]);
   useLayoutEffect(() => {
@@ -118,10 +133,11 @@ export function useMessageReveal({
       });
       placed?.();
       settled.current = true;
-      // The first focus yields to a control the person moved to after the
-      // request arrived, such as the composer of a still-loading conversation,
-      // so their typing stays there. Focus handed off by the app meanwhile, or
-      // left on the opener or the surface around the scroller, is still taken.
+      // The first focus yields to a control the person moved to, or typed
+      // into, after the request arrived, such as the composer of a
+      // still-loading conversation, so their typing stays there. Focus handed
+      // off by the app meanwhile, or left on the opener or the surface around
+      // the scroller, is still taken.
       // A replacement may recover lost focus, but must not take it from
       // another control after this request already focused a row successfully.
       const active = document.activeElement;

From c636bdbc9502f4c3528e72c507300208918c285b Mon Sep 17 00:00:00 2001
From: mtoohey <mtoohey@squareup.com>
Date: Thu, 5 Nov 2026 01:34:17 +0000
Subject: [PATCH 3/7] fix(messages): let only a click, tap or Tab that moved
 focus claim it from a reveal

## Problem

Code review of "fix(messages): count only input that moved focus as
claiming it from a reveal" (suggestion, `use-message-reveal.ts`). That
rule turned any key or pointer press into a pending press, and the next
`focusin` promoted it to the person's claim. It couldn't tell a focus
move the browser made for the press from one an app handler made in
answer to it, and the pending press was never cleared. The reviewer's
jsdom probes, with a request pending, compared with main, where the
first reveal always focuses the row:

- E1: Escape on a control whose keydown handler focuses the composer.
  The composer kept focus. Main gives the row.
- E2: the same, with the focus in a later task, as a Base UI dialog
  close does. The composer kept focus. Main gives the row.
- E3: Shift, then a later app `composer.focus()` with no input. The
  composer kept focus. Main gives the row. That commit's body said a
  stale press was "not worse than main", which this case contradicts.
- E4: a click inside a composer the app already focused, without
  typing. The row took focus, as on main.
- E5: a press, then an app hand-off to an ancestor of the scroller. The
  row took focus, as on main.

No current flow reaches E1 or E2 with `focus` true. Closing Members
calls `navigator.dismiss`, which starts a new navigation, and search
results hand off to `#main-content`, which contains the scroller. So
this tightens the rule to its intent rather than fixing a live bug.

## Fix

A focus move now counts as the person's only when the browser makes it
for their press:

- Pointer: `pointerdown` records its target. A `focusin` on that target
  or an element containing it claims focus. A tap focuses after
  `pointerup`, so the press stays pending until its `click` (or
  `pointercancel`). Focus that a click handler moves comes after the
  press ends, and focus a press handler moves to another control lands
  outside the target, so neither counts.
- Keys: only Tab and Shift+Tab, without Alt, Ctrl or Meta, count. The
  pending key ends at `keyup`, so a Tab that moved nothing doesn't
  count toward a later hand-off.
- Typing into the focused control (`beforeinput` targeting
  `document.activeElement`) still counts, unchanged.

The rest of the rule is unchanged. Focus on the body, on the opener, or
on the scroller or an element containing it is still taken, and the
later recovery focus is untouched.

E4 stays as it was. A click inside a composer that already has focus
moves nothing, so the row takes focus as on main unless the person
types, and typing claims it.

Compared with main, the reveal now leaves focus in two cases. The
first is a control the person clicked, tapped or tabbed to, or typed
into, before the reveal landed. The second follows from the first:
once the person has moved focus or typed for a request, even onto the
surface around the scroller, a later app hand-off to another control
before the reveal lands also keeps focus. Without
such input, a hand-off, an app shortcut or a dialog closing on Escape
gives the row focus, as on main.

`use-message-reveal.test.tsx`:

- The "person moved focus" case now simulates the browser's own move
  for a click, a tap, Tab and Shift+Tab. It previously used a bare
  `keyDown` with no key.
- New cases with their expected outcomes. E1 and E2 (Escape, with the
  handler's focus immediate or in a later task): the row takes focus.
  E3 (Shift, then a hand-off): the row. E4 (a click inside an
  app-focused composer): the row. E5 (Escape, or a pointer press on a
  row, then focus on the surface around the scroller): the row.
- A press handler on another control focusing the composer: the row.
- A click or a Tab that ended without moving focus, then a hand-off:
  the row.

## Validation

Local Linux workstation (8-CPU quota), Vitest and Playwright 1.63.0,
`--no-deps --retries=0`:

- `use-message-reveal.test.tsx`: 41/41 passed. Against the previous
  rule, 6 fail: E1 (both variants), E3, the other-control press and
  both stale-press cases. E4, E5 and the rest pass on both, because
  they pin behavior that must not change. Mutations, each caught by
  one case: dropping the containment check fails the other-control
  press case. Not clearing on `click` fails the stale click. Not
  clearing on `keyup` fails the stale Tab. Clearing at `pointerup`
  instead of `click` fails the tap. Counting any key fails E1.
- Vitest for `src/features/messages` (`--maxWorkers=4`): 92 files,
  2684 tests passed.
- `inbox-archive.spec.mjs` in full, plus `global-search`,
  `channel-members`, `thread-opening` and `navigation-thread-history`,
  WebKit and Chromium, `--workers=4`: 86/86 passed.
- `tsc --noEmit`, `biome check --error-on-warnings` and
  `git diff --check` are clean.

A green run doesn't prove the behavior in every hand-off. Hosted CI
covers broad validation.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: mtoohey <mtoohey@squareup.com>
(cherry picked from commit 1675d68e8f986b8c58b7cdcd7c4be5fa69ca8639)
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../messages/use-message-reveal.test.tsx      | 157 +++++++++++++++++-
 src/features/messages/use-message-reveal.ts   |  47 ++++--
 2 files changed, 188 insertions(+), 16 deletions(-)

diff --git a/src/features/messages/use-message-reveal.test.tsx b/src/features/messages/use-message-reveal.test.tsx
index 8ffbf78bac..00622092e3 100644
--- a/src/features/messages/use-message-reveal.test.tsx
+++ b/src/features/messages/use-message-reveal.test.tsx
@@ -242,14 +242,41 @@ it("focuses the revealed row when nothing claimed focus since the request", asyn
   expect(complete).toHaveBeenCalledOnce();
 });
 
-it.each(["pointerDown", "keyDown"] as const)(
-  "leaves focus with a composer the person focused before the reveal lands (%s)",
+// The browser's own focus move for each press, which jsdom does not make.
+const moves = {
+  click(composer: HTMLElement) {
+    fireEvent.pointerDown(composer);
+    composer.focus();
+    fireEvent.pointerUp(composer);
+    fireEvent.click(composer);
+  },
+  tap(composer: HTMLElement) {
+    fireEvent.pointerDown(composer);
+    fireEvent.pointerUp(composer);
+    composer.focus();
+    fireEvent.click(composer);
+  },
+  Tab(composer: HTMLElement) {
+    fireEvent.keyDown(document.body, { key: "Tab" });
+    composer.focus();
+    fireEvent.keyUp(composer, { key: "Tab" });
+  },
+  "Shift+Tab"(composer: HTMLElement) {
+    fireEvent.keyDown(document.body, { key: "Shift", shiftKey: true });
+    fireEvent.keyDown(document.body, { key: "Tab", shiftKey: true });
+    composer.focus();
+    fireEvent.keyUp(composer, { key: "Tab", shiftKey: true });
+    fireEvent.keyUp(composer, { key: "Shift" });
+  },
+};
+
+it.each(Object.keys(moves) as (keyof typeof moves)[])(
+  "leaves focus with a composer the person moved to before the reveal lands (%s)",
   async (input) => {
     const { row, composer, complete } = mount();
     const focus = vi.spyOn(row, "focus");
     await frame(); // Attach observers; the target is still loading.
-    fireEvent[input](composer);
-    composer.focus();
+    moves[input](composer);
     await frame(); // Reveal.
     expect(row.scrollIntoView).toHaveBeenCalled();
     expect(document.activeElement).toBe(composer);
@@ -289,6 +316,128 @@ it.each(["Shift", "ArrowDown", "Escape"])(
   },
 );
 
+it.each([false, true])(
+  "takes focus an app handler moved in answer to a key other than Tab (later: %s)",
+  async (later) => {
+    const { row, outside, composer, complete } = mount();
+    await frame();
+    outside.focus(); // Such as a dialog's close button.
+    // A dialog closing on Escape returns focus at once or, as Base UI does,
+    // in a later task.
+    outside.addEventListener("keydown", () =>
+      later ? setTimeout(() => composer.focus()) : composer.focus(),
+    );
+    fireEvent.keyDown(outside, { key: "Escape" });
+    fireEvent.keyUp(document.activeElement ?? document.body, {
+      key: "Escape",
+    });
+    await act(() => new Promise((resolve) => setTimeout(resolve)));
+    expect(document.activeElement).toBe(composer);
+    await frame();
+    expect(document.activeElement).toBe(row);
+    await frame();
+    expect(complete).toHaveBeenCalledOnce();
+  },
+);
+
+it("takes focus an app handler moved in answer to a press on another control", async () => {
+  const { row, outside, composer, complete } = mount();
+  await frame();
+  outside.addEventListener("pointerdown", () => composer.focus());
+  fireEvent.pointerDown(outside);
+  fireEvent.pointerUp(outside);
+  fireEvent.click(outside);
+  expect(document.activeElement).toBe(composer);
+  await frame();
+  expect(document.activeElement).toBe(row);
+  await frame();
+  expect(complete).toHaveBeenCalledOnce();
+});
+
+it("takes focus the app handed off after a key that moved nothing", async () => {
+  const { row, composer, complete } = mount();
+  await frame();
+  fireEvent.keyDown(document.body, { key: "Shift" });
+  fireEvent.keyUp(document.body, { key: "Shift" });
+  composer.focus();
+  await frame();
+  expect(document.activeElement).toBe(row);
+  await frame();
+  expect(complete).toHaveBeenCalledOnce();
+});
+
+// A click inside a composer that already has focus moves nothing, and the
+// reveal takes focus as it would without the click unless the person types.
+it("takes focus from a composer the app focused when the person only clicks in it", async () => {
+  const { row, composer, complete } = mount();
+  await frame();
+  composer.focus();
+  fireEvent.pointerDown(composer);
+  fireEvent.pointerUp(composer);
+  fireEvent.click(composer);
+  await frame();
+  expect(document.activeElement).toBe(row);
+  await frame();
+  expect(complete).toHaveBeenCalledOnce();
+});
+
+it.each([
+  [
+    "click",
+    (composer: HTMLElement) => {
+      composer.focus();
+      fireEvent.pointerDown(composer);
+      fireEvent.pointerUp(composer);
+      fireEvent.click(composer);
+      composer.blur();
+    },
+  ],
+  [
+    "Tab",
+    () => {
+      fireEvent.keyDown(document.body, { key: "Tab" });
+      fireEvent.keyUp(document.body, { key: "Tab" });
+    },
+  ],
+] as const)(
+  "does not count a %s that ended without moving focus as a later claim",
+  async (_, press) => {
+    const { row, composer, complete } = mount();
+    await frame();
+    press(composer);
+    composer.focus(); // A later hand-off by the app.
+    await frame();
+    expect(document.activeElement).toBe(row);
+    await frame();
+    expect(complete).toHaveBeenCalledOnce();
+  },
+);
+
+it.each(["Escape", "pointer"])(
+  "takes focus moved to the surface around the scroller (%s)",
+  async (input) => {
+    const { row, container, complete } = mount();
+    container.tabIndex = -1;
+    await frame();
+    if (input === "pointer") {
+      // The browser focuses the surface for a press on a row's text.
+      fireEvent.pointerDown(row);
+      container.focus();
+      fireEvent.pointerUp(row);
+      fireEvent.click(row);
+    } else {
+      fireEvent.keyDown(document.body, { key: input });
+      container.focus();
+      fireEvent.keyUp(container, { key: input });
+    }
+    expect(document.activeElement).toBe(container);
+    await frame();
+    expect(document.activeElement).toBe(row);
+    await frame();
+    expect(complete).toHaveBeenCalledOnce();
+  },
+);
+
 it("leaves focus with a composer the app focused once the person types into it", async () => {
   const { row, composer, complete } = mount();
   const focus = vi.spyOn(row, "focus");
diff --git a/src/features/messages/use-message-reveal.ts b/src/features/messages/use-message-reveal.ts
index c47204acf4..48b7b9a62a 100644
--- a/src/features/messages/use-message-reveal.ts
+++ b/src/features/messages/use-message-reveal.ts
@@ -56,8 +56,10 @@ export function useMessageReveal({
   // Focus as each request arrives: the control that opened it, or none once
   // that control unmounted. Recorded before the target loads, however late,
   // with whether the person has since moved focus or typed into the focused
-  // control. A key or pointer press counts only once focus follows it, so a
-  // press that moves nothing (Shift, an arrow, Escape) is not a claim.
+  // control. Only a move the browser makes for a press counts: focus landing
+  // on or around the pointer's target before its click, or Tab. Focus an app
+  // handler moves in answer to another key or a click, such as a dialog
+  // closing on Escape, is not the person's.
   const opener = useRef<{
     signal: AbortSignal;
     element: Element | null;
@@ -72,19 +74,40 @@ export function useMessageReveal({
         input: false,
       };
     const request = opener.current;
-    let pressed = false;
-    const press = () => {
-      pressed = true;
+    // A press is pending until it ends. A tap focuses after pointerup, so a
+    // pointer press ends at its click.
+    let pointer: Node | null = null;
+    let tab = false;
+    const pressed = (event: Event) => {
+      pointer = event.target instanceof Node ? event.target : null;
     };
-    const moved = () => {
-      if (pressed) request.input = true;
+    const released = () => {
+      pointer = null;
+    };
+    const keyed = (event: Event) => {
+      const { key, altKey, ctrlKey, metaKey } = event as KeyboardEvent;
+      tab = key === "Tab" && !altKey && !ctrlKey && !metaKey;
+    };
+    const unkeyed = () => {
+      tab = false;
+    };
+    const moved = (event: Event) => {
+      const target = event.target;
+      if (
+        tab ||
+        (pointer && target instanceof Node && target.contains(pointer))
+      )
+        request.input = true;
     };
     const typed = (event: Event) => {
       if (event.target === document.activeElement) request.input = true;
     };
     const listeners = [
-      ["pointerdown", press],
-      ["keydown", press],
+      ["pointerdown", pressed],
+      ["click", released],
+      ["pointercancel", released],
+      ["keydown", keyed],
+      ["keyup", unkeyed],
       ["focusin", moved],
       ["beforeinput", typed],
     ] as const;
@@ -135,9 +158,9 @@ export function useMessageReveal({
       settled.current = true;
       // The first focus yields to a control the person moved to, or typed
       // into, after the request arrived, such as the composer of a
-      // still-loading conversation, so their typing stays there. Focus handed
-      // off by the app meanwhile, or left on the opener or the surface around
-      // the scroller, is still taken.
+      // still-loading conversation, so their typing stays there. Focus the
+      // app handed off without such input, or left on the opener or the
+      // surface around the scroller, is still taken.
       // A replacement may recover lost focus, but must not take it from
       // another control after this request already focused a row successfully.
       const active = document.activeElement;

From 4384de3350cb1735b42e75d0a7b6b603250816dd Mon Sep 17 00:00:00 2001
From: mtoohey <mtoohey@squareup.com>
Date: Thu, 5 Nov 2026 04:18:07 +0000
Subject: [PATCH 4/7] fix(messages): clear a pending press on contextmenu and
 auxclick

A pointer press stayed pending until its click or pointercancel. A press
with another button ends at contextmenu or auxclick instead, so it
stayed pending. If the app later returned focus to the pressed control,
for example as a context menu closed, the reveal counted that as the
person's claim and left focus there instead of on the revealed row.

Clear the pending press on contextmenu and auxclick too. Two regression
cases in use-message-reveal.test.tsx press the composer with the right
button (ending at contextmenu) and the middle button (ending at
auxclick), move focus away and back to it, and expect the row to take
focus. Both fail without the fix, and removing either listener fails
only its own case.

Addresses review feedback on PR #2563.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: mtoohey <mtoohey@squareup.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 .../messages/use-message-reveal.test.tsx      | 38 +++++++++++++++++++
 src/features/messages/use-message-reveal.ts   |  5 ++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/features/messages/use-message-reveal.test.tsx b/src/features/messages/use-message-reveal.test.tsx
index 00622092e3..04ac51d614 100644
--- a/src/features/messages/use-message-reveal.test.tsx
+++ b/src/features/messages/use-message-reveal.test.tsx
@@ -413,6 +413,44 @@ it.each([
   },
 );
 
+// A press with another button ends without a click, so focus the app later
+// returns to the pressed control, such as a context menu closing, is not the
+// person's.
+it.each([
+  [
+    "contextmenu",
+    (composer: HTMLElement) => {
+      fireEvent.pointerDown(composer, { button: 2 });
+      fireEvent.pointerUp(composer, { button: 2 });
+      fireEvent.contextMenu(composer, { button: 2 });
+    },
+  ],
+  [
+    "auxclick",
+    (composer: HTMLElement) => {
+      fireEvent.pointerDown(composer, { button: 1 });
+      fireEvent.pointerUp(composer, { button: 1 });
+      fireEvent(
+        composer,
+        new MouseEvent("auxclick", { bubbles: true, button: 1 }),
+      );
+    },
+  ],
+] as const)(
+  "does not count a press that ended at its %s as a later claim",
+  async (_, press) => {
+    const { row, outside, composer, complete } = mount();
+    await frame();
+    press(composer);
+    outside.focus(); // Such as the menu taking focus.
+    composer.focus(); // Its focus return as it closes.
+    await frame();
+    expect(document.activeElement).toBe(row);
+    await frame();
+    expect(complete).toHaveBeenCalledOnce();
+  },
+);
+
 it.each(["Escape", "pointer"])(
   "takes focus moved to the surface around the scroller (%s)",
   async (input) => {
diff --git a/src/features/messages/use-message-reveal.ts b/src/features/messages/use-message-reveal.ts
index 48b7b9a62a..9e833b3730 100644
--- a/src/features/messages/use-message-reveal.ts
+++ b/src/features/messages/use-message-reveal.ts
@@ -75,7 +75,8 @@ export function useMessageReveal({
       };
     const request = opener.current;
     // A press is pending until it ends. A tap focuses after pointerup, so a
-    // pointer press ends at its click.
+    // pointer press ends at its click, or, for another button, at its
+    // contextmenu or auxclick.
     let pointer: Node | null = null;
     let tab = false;
     const pressed = (event: Event) => {
@@ -105,6 +106,8 @@ export function useMessageReveal({
     const listeners = [
       ["pointerdown", pressed],
       ["click", released],
+      ["contextmenu", released],
+      ["auxclick", released],
       ["pointercancel", released],
       ["keydown", keyed],
       ["keyup", unkeyed],

From 11a71decfbd8645c785b0aa00983dc22707b6ff3 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Fri, 6 Nov 2026 15:41:31 +1100
Subject: [PATCH 5/7] fix(messages): keep input made while a retained thread
 retargets

A link to another message in the thread already open in a tab retargets
the retained reader in place. RetainedThreadPanel awaits the relay read
in `retarget()` before passing on the new navigation or reveal request,
and its editor stays usable meanwhile. The reveal recorded focus only
when its signal arrived, after the read. If the person clicked into the
editor and typed during the read, the reveal recorded that editor as
where focus was when the request arrived, and took focus from it.

RetainedThreadPanel now records focus when it starts the retarget and
watches for the person's input until its next request. It passes that
record on the opening, and the reveal adopts it for the first new signal
that follows, instead of recording focus then. This covers both a routed
visit and a tab's reveal request, whose signal is created one render
after the opening. Watching continues past the handoff, so a press that
starts before the reveal mounts and moves focus after it still counts.
A handed record serves only one request. A later signal records afresh.

The rule for what counts is unchanged. The input listeners move from the
hook's effect into `watchArrival` so both owners share them.

Tests:

- ThreadPanel.test.tsx, for a route and for a reveal request into the
  open thread: hold the retarget read, click into the retained editor
  and type, release. The reply is scrolled into view, the route
  completes as opened, and focus stays in the editor. Both cases fail
  at the focus assertion without the handoff, or when the panel records
  focus but doesn't watch during the read. The mocked composer gains a
  textarea for this.
- use-message-reveal.test.tsx: a handed arrival keeps focus the person
  moved before the signal arrived, and the next signal with the same
  record takes focus to the row. Removing adoption fails it, and so
  does adopting the same record twice.

Validation, on macOS (local): use-message-reveal.test.tsx and
ThreadPanel.test.tsx, 135/135 passed. ThreadPanel.nesting,
EmbeddedThread and useConversationTabs, 86/86 passed.
`tsc --noEmit`, `biome check --error-on-warnings` on the changed files
and `git diff --check` are clean. Browser journeys were not run.

Addresses review feedback on PR #2563.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 src/features/messages/ThreadPanel.test.tsx    |  70 +++++++++
 src/features/messages/ThreadPanel.tsx         |  31 +++-
 .../messages/use-message-reveal.test.tsx      |  41 ++++-
 src/features/messages/use-message-reveal.ts   | 147 ++++++++++--------
 4 files changed, 218 insertions(+), 71 deletions(-)

diff --git a/src/features/messages/ThreadPanel.test.tsx b/src/features/messages/ThreadPanel.test.tsx
index 9a1f5c0530..f2dfe9b48e 100644
--- a/src/features/messages/ThreadPanel.test.tsx
+++ b/src/features/messages/ThreadPanel.test.tsx
@@ -116,6 +116,7 @@ vi.mock("./MessageComposer", () => ({
       data-placeholder={placeholder}
       data-focus-request={focusRequest}
     >
+      <textarea aria-label="Reply" />
       <button type="button" onClick={() => onSend?.("own-reply")}>
         Send fixture reply
       </button>
@@ -2043,6 +2044,75 @@ it("a retained reader reveals its exact selected message, again for each new req
   expect(revealedReply()).toBe(false);
 });
 
+it.each(["route", "reveal request"] as const)(
+  "a %s into the open thread leaves focus in the editor the person typed into while it retargets",
+  async (kind) => {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue(
+      new DOMRect(0, 0, 500, 500),
+    );
+    const h = messagesHarness();
+    const reply = { ...row, id: "d".repeat(64), content: "the reply" };
+    h.snapshot.replies = [reply];
+    h.snapshot.target = reply;
+    h.snapshot.targetStatus = "ready";
+    const props = h.props as ThreadPanelProps;
+    Object.assign(props, { retainThread: true });
+    h.render();
+    const editor = screen.getByRole("textbox", { name: "Reply" });
+    let release!: (value: "selected") => void;
+    h.view.retarget.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          release = resolve;
+        }),
+    );
+    const navigation = { ...ordinaryNavigation(), entryId: "reply" };
+    navigation.target.messageId = reply.id;
+    Object.assign(
+      props,
+      { messageId: reply.id },
+      kind === "route"
+        ? { navigation }
+        : { revealSelected: true, revealRequest: 1 },
+    );
+    h.rerenderProps();
+    expect(h.view.retarget).toHaveBeenCalledOnce();
+    // The editor stays usable during the read: the person clicks into it,
+    // with the browser's own focus move, and types.
+    act(() => {
+      fireEvent.pointerDown(editor);
+      editor.focus();
+      fireEvent.pointerUp(editor);
+      fireEvent.click(editor);
+      fireEvent(
+        editor,
+        new InputEvent("beforeinput", {
+          bubbles: true,
+          cancelable: true,
+          inputType: "insertText",
+          data: "a",
+        }),
+      );
+    });
+    await act(async () => release("selected"));
+    await waitFor(() =>
+      expect(
+        vi
+          .mocked(HTMLElement.prototype.scrollIntoView)
+          .mock.contexts.some(
+            (context) =>
+              (context as HTMLElement).dataset.messageId === reply.id,
+          ),
+      ).toBe(true),
+    );
+    if (kind === "route")
+      await waitFor(() =>
+        expect(navigation.complete).toHaveBeenCalledWith({ status: "opened" }),
+      );
+    expect(editor).toHaveFocus();
+  },
+);
+
 it("reopens collapsed activity for a new reveal of the same step", async () => {
   const h = messagesHarness();
   const replies = ["d", "e"].map((id, index) => ({
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index f210954af5..b2e2627ea5 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -58,7 +58,11 @@ import { useListedChannel } from "../relay/listed-channel";
 import type { CSSProperties } from "react";
 import styles from "./Messages.module.css";
 import { Reading, readingPositioned } from "./use-reading";
-import { useMessageReveal } from "./use-message-reveal";
+import {
+  useMessageReveal,
+  watchArrival,
+  type RevealArrival,
+} from "./use-message-reveal";
 import { usePendingRequest } from "./use-pending-request";
 import type { PageNavigation } from "../navigation/service";
 import { messageViewKey } from "./view-key";
@@ -229,6 +233,8 @@ function RetainedThreadPanel(props: ThreadPanelProps) {
     navigation: PageNavigation | undefined;
     revealRequest: number | undefined;
     revision: number;
+    /** Focus as a request confirmed in place arrived, before its retarget. */
+    arrival?: RevealArrival | undefined;
   };
   const current = useRef<Opening | undefined>(undefined);
   const [opening, setOpening] = useState<Opening>();
@@ -272,6 +278,7 @@ function RetainedThreadPanel(props: ThreadPanelProps) {
     const signal = navigation
       ? AbortSignal.any([request.signal, navigation.signal])
       : request.signal;
+    let stopArrival: (() => void) | undefined;
     if (!retrying.current) {
       setError(undefined);
       setFailure(undefined);
@@ -298,6 +305,10 @@ function RetainedThreadPanel(props: ThreadPanelProps) {
       }
       if (prior?.view.snapshot().root) {
         if (navigation) setRouting(navigation);
+        // The editor stays usable while the read runs, so focus the person
+        // moves or text they type meanwhile belongs to this request's reveal.
+        const arrival = { element: document.activeElement, input: false };
+        stopArrival = watchArrival(arrival);
         let result: ThreadRetarget;
         try {
           result = await prior.view.retarget(messageId, signal);
@@ -308,7 +319,13 @@ function RetainedThreadPanel(props: ThreadPanelProps) {
         }
         if (signal.aborted || current.current !== prior) return;
         if (result === "selected") {
-          const next = { ...prior, messageId, navigation, revealRequest };
+          const next = {
+            ...prior,
+            messageId,
+            navigation,
+            revealRequest,
+            arrival,
+          };
           current.current = next;
           setOpening(next);
           settle();
@@ -366,7 +383,10 @@ function RetainedThreadPanel(props: ThreadPanelProps) {
       }
     }
     void select();
-    return () => request.abort();
+    return () => {
+      request.abort();
+      stopArrival?.();
+    };
   }, [
     session,
     channelId,
@@ -395,6 +415,7 @@ function RetainedThreadPanel(props: ThreadPanelProps) {
           navigation={opening.navigation}
           routePending={!!routing}
           revealRequest={opening.revealRequest}
+          arrival={opening.arrival}
           selectionFailure={
             failure && { ...failure, pending, retry: retryNavigation }
           }
@@ -536,8 +557,11 @@ function ThreadMessages({
   selectionFailure,
   onResolvedRoot,
   routePending,
+  arrival,
 }: {
   onResolvedRoot?: ThreadPanelProps["onResolvedRoot"];
+  /** Focus as the request retargeted in place arrived, for its reveal. */
+  arrival?: RevealArrival | undefined;
   /** A route to this reader is on its way: until it lands, a reader not yet
    * shown stays hidden and unread rather than showing a place the route
    * replaces. */
@@ -960,6 +984,7 @@ function ThreadMessages({
       snapshot.targetStatus === "ready" && snapshot.target?.id === messageId,
     complete: completeTarget,
     prepare: prepareTarget,
+    arrival,
   });
   // Leaving a visit once it was presented, by navigating on, hiding or
   // unmounting, records where the reader was. A return counts only once
diff --git a/src/features/messages/use-message-reveal.test.tsx b/src/features/messages/use-message-reveal.test.tsx
index 04ac51d614..690e9cd854 100644
--- a/src/features/messages/use-message-reveal.test.tsx
+++ b/src/features/messages/use-message-reveal.test.tsx
@@ -10,7 +10,11 @@ import { useRef } from "react";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import styles from "./Messages.module.css";
 import { HIGHLIGHT_MAX_WAIT_MS, HIGHLIGHT_QUIET_MS } from "./message-highlight";
-import { useMessageReveal } from "./use-message-reveal";
+import {
+  useMessageReveal,
+  watchArrival,
+  type RevealArrival,
+} from "./use-message-reveal";
 
 // Control frame/mutation ordering; browser journeys own real layout and inert focus.
 const frames = new Map<number, FrameRequestCallback>();
@@ -71,11 +75,13 @@ function mount(
     prepare = undefined,
     rowKey = 0,
     messageId = "target",
+    arrival = undefined,
   }: {
     signal?: AbortSignal;
     prepare?: () => void;
     rowKey?: number;
     messageId?: string;
+    arrival?: RevealArrival;
   }) {
     const scroller = useRef<HTMLDivElement>(null);
     const settled = useRef(false);
@@ -90,6 +96,7 @@ function mount(
       ...(mark === undefined ? {} : { mark }),
       ...(prepare ? { prepare } : {}),
       ...(hold ? { hold } : {}),
+      ...(arrival ? { arrival } : {}),
     });
     return (
       <>
@@ -121,8 +128,13 @@ function mount(
     composer,
     restart: () => result.rerender(<Surface prepare={() => {}} />),
     remountRow: () => result.rerender(<Surface rowKey={1} />),
-    next: () =>
-      result.rerender(<Surface signal={new AbortController().signal} />),
+    next: (arrival?: RevealArrival) =>
+      result.rerender(
+        <Surface
+          signal={new AbortController().signal}
+          {...(arrival ? { arrival } : {})}
+        />,
+      ),
     other: () =>
       result.rerender(
         <Surface signal={new AbortController().signal} messageId="other" />,
@@ -499,6 +511,29 @@ it("leaves focus with a composer the app focused once the person types into it",
   expect(complete).toHaveBeenCalledOnce();
 });
 
+// A thread retargeting in place records the arrival before the read and hands
+// it to the reveal that follows; the next request records its own.
+it("adopts an arrival recorded before the signal, for that request only", async () => {
+  const { row, composer, complete, next } = mount();
+  await idle();
+  expect(document.activeElement).toBe(row);
+  const arrival = { element: document.activeElement, input: false };
+  const stop = watchArrival(arrival);
+  try {
+    moves.click(composer);
+    next(arrival);
+    await idle();
+    expect(document.activeElement).toBe(composer);
+    expect(complete).toHaveBeenCalledTimes(2);
+    next(arrival);
+    await idle();
+    expect(document.activeElement).toBe(row);
+    expect(complete).toHaveBeenCalledTimes(3);
+  } finally {
+    stop();
+  }
+});
+
 it.each([false, true])(
   "preserves moved focus before verification (mutation: %s)",
   async (mutation) => {
diff --git a/src/features/messages/use-message-reveal.ts b/src/features/messages/use-message-reveal.ts
index 9e833b3730..a0d664cab3 100644
--- a/src/features/messages/use-message-reveal.ts
+++ b/src/features/messages/use-message-reveal.ts
@@ -15,6 +15,7 @@ export function useMessageReveal({
   hold,
   focus = true,
   mark = focus,
+  arrival,
 }: {
   scroller: RefObject<HTMLElement | null>;
   settled: RefObject<boolean>;
@@ -36,6 +37,11 @@ export function useMessageReveal({
    * it out of view. The owner ends the hold on reader intent.
    */
   hold?: () => boolean;
+  /**
+   * Focus as the request reached an owner that forwards its signal only after
+   * confirming the target, such as a thread retargeting in place.
+   */
+  arrival?: RevealArrival | undefined;
 }) {
   const revealed = useRef<AbortSignal | undefined>(undefined);
   const focused = useRef<{ signal: AbortSignal; row: HTMLElement } | undefined>(
@@ -53,74 +59,25 @@ export function useMessageReveal({
     },
     [],
   );
-  // Focus as each request arrives: the control that opened it, or none once
-  // that control unmounted. Recorded before the target loads, however late,
-  // with whether the person has since moved focus or typed into the focused
-  // control. Only a move the browser makes for a press counts: focus landing
-  // on or around the pointer's target before its click, or Tab. Focus an app
-  // handler moves in answer to another key or a click, such as a dialog
-  // closing on Escape, is not the person's.
-  const opener = useRef<{
-    signal: AbortSignal;
-    element: Element | null;
-    input: boolean;
-  }>(undefined);
+  // Focus as each request arrives, recorded before the target loads, however
+  // late. An arrival handed in by the owner serves only the first new signal
+  // after it.
+  const opener = useRef<{ signal: AbortSignal; arrival: RevealArrival }>(
+    undefined,
+  );
+  const adopted = useRef<RevealArrival>(undefined);
   useLayoutEffect(() => {
     if (!signal) return;
-    if (opener.current?.signal !== signal)
+    if (opener.current?.signal !== signal) {
+      const handed = arrival !== adopted.current ? arrival : undefined;
+      if (handed) adopted.current = handed;
       opener.current = {
         signal,
-        element: document.activeElement,
-        input: false,
+        arrival: handed ?? { element: document.activeElement, input: false },
       };
-    const request = opener.current;
-    // A press is pending until it ends. A tap focuses after pointerup, so a
-    // pointer press ends at its click, or, for another button, at its
-    // contextmenu or auxclick.
-    let pointer: Node | null = null;
-    let tab = false;
-    const pressed = (event: Event) => {
-      pointer = event.target instanceof Node ? event.target : null;
-    };
-    const released = () => {
-      pointer = null;
-    };
-    const keyed = (event: Event) => {
-      const { key, altKey, ctrlKey, metaKey } = event as KeyboardEvent;
-      tab = key === "Tab" && !altKey && !ctrlKey && !metaKey;
-    };
-    const unkeyed = () => {
-      tab = false;
-    };
-    const moved = (event: Event) => {
-      const target = event.target;
-      if (
-        tab ||
-        (pointer && target instanceof Node && target.contains(pointer))
-      )
-        request.input = true;
-    };
-    const typed = (event: Event) => {
-      if (event.target === document.activeElement) request.input = true;
-    };
-    const listeners = [
-      ["pointerdown", pressed],
-      ["click", released],
-      ["contextmenu", released],
-      ["auxclick", released],
-      ["pointercancel", released],
-      ["keydown", keyed],
-      ["keyup", unkeyed],
-      ["focusin", moved],
-      ["beforeinput", typed],
-    ] as const;
-    for (const [type, listener] of listeners)
-      document.addEventListener(type, listener, true);
-    return () => {
-      for (const [type, listener] of listeners)
-        document.removeEventListener(type, listener, true);
-    };
-  }, [signal]);
+    }
+    return watchArrival(opener.current.arrival);
+  }, [signal, arrival]);
   useLayoutEffect(() => {
     if (
       !ready ||
@@ -171,8 +128,8 @@ export function useMessageReveal({
       const claimed =
         !lost &&
         !active.contains(container) &&
-        active !== opener.current?.element &&
-        !!opener.current?.input;
+        active !== opener.current?.arrival.element &&
+        !!opener.current?.arrival.input;
       let focusPending = false;
       if (
         focus &&
@@ -261,6 +218,66 @@ export function useMessageReveal({
   return revealed;
 }
 
+/**
+ * Focus as a reveal request arrived: the control that opened it, or none once
+ * that control unmounted. `input` marks that the person has since moved focus
+ * or typed into the focused control.
+ */
+export type RevealArrival = { element: Element | null; input: boolean };
+
+/**
+ * Until stopped, set `input` when the person moves focus or types into the
+ * focused control. Only a move the browser makes for a press counts: focus
+ * landing on or around the pointer's target before its click, or Tab. Focus an
+ * app handler moves in answer to another key or a click, such as a dialog
+ * closing on Escape, is not the person's.
+ */
+export function watchArrival(arrival: RevealArrival): () => void {
+  // A press is pending until it ends. A tap focuses after pointerup, so a
+  // pointer press ends at its click, or, for another button, at its
+  // contextmenu or auxclick.
+  let pointer: Node | null = null;
+  let tab = false;
+  const pressed = (event: Event) => {
+    pointer = event.target instanceof Node ? event.target : null;
+  };
+  const released = () => {
+    pointer = null;
+  };
+  const keyed = (event: Event) => {
+    const { key, altKey, ctrlKey, metaKey } = event as KeyboardEvent;
+    tab = key === "Tab" && !altKey && !ctrlKey && !metaKey;
+  };
+  const unkeyed = () => {
+    tab = false;
+  };
+  const moved = (event: Event) => {
+    const target = event.target;
+    if (tab || (pointer && target instanceof Node && target.contains(pointer)))
+      arrival.input = true;
+  };
+  const typed = (event: Event) => {
+    if (event.target === document.activeElement) arrival.input = true;
+  };
+  const listeners = [
+    ["pointerdown", pressed],
+    ["click", released],
+    ["contextmenu", released],
+    ["auxclick", released],
+    ["pointercancel", released],
+    ["keydown", keyed],
+    ["keyup", unkeyed],
+    ["focusin", moved],
+    ["beforeinput", typed],
+  ] as const;
+  for (const [type, listener] of listeners)
+    document.addEventListener(type, listener, true);
+  return () => {
+    for (const [type, listener] of listeners)
+      document.removeEventListener(type, listener, true);
+  };
+}
+
 /** Undo layout drift of a revealed row until its owner, request or viewport ends the hold. */
 function keep(
   container: HTMLElement,

From 0f17d95bcb4ad276fafed773651d3936163c2897 Mon Sep 17 00:00:00 2001
From: mtoohey <mtoohey@squareup.com>
Date: Mon, 9 Nov 2026 16:07:44 +1100
Subject: [PATCH 6/7] fix(messages): keep typing in an editor that already had
 focus when a reveal starts

## Problem

Design review of PR #2563 at 1530a599 (P2, `use-message-reveal.ts`). In an
open thread, a link to another message of the same thread retargets the
retained reader in place. If the editor already had focus when that
request arrived, RetainedThreadPanel recorded it as the opener of the
arrival. Typing during the read set the arrival's `input`, but the reveal
still refused the claim because the focused element was the opener, and
focused the message row. Someone already writing a reply was interrupted,
which is the interruption this PR exists to fix, and conflicts with the
design guide's rule to keep focus during loading.

The opener exclusion dated from the first commit, when any key or pointer
press counted as input, so a repeated Enter or a second click on the
opener had to be ruled out. Input now counts only when the browser moves
focus for a click, tap or Tab, or the person types into the focused
control. With that rule, focus can sit on the opener with `input` true
only because the person typed into it, or clicked or tabbed back to it.
Both are theirs to keep.

## Fix

Drop the opener from the rule. The first focus now yields to the focused
control once the person has moved focus or typed since the request
arrived, unless focus is on the body or on the scroller or an element
containing it. That covers the composer of a still-loading conversation
and the editor someone was already writing in when a link retargeted the
open thread. Focus the app handed off without such input, or left on the
control that opened the request, is still taken, so clicking a result
and waiting still focuses the revealed row.

With the opener gone from the rule, the arrival record no longer needs
the focused element. `RevealArrival` is now `{ input: boolean }`, and
RetainedThreadPanel records only that. The hook's and the record's
comments state the final rule.

Tests:

- ThreadPanel.test.tsx: the held-retarget case for a route and for a
  reveal request now also runs with the editor focused before the request
  starts, as the reviewer asked. The person clicks into the editor, the
  request arrives, they type (keydown and `beforeinput`) during the held
  read, the read is released, and the reply is scrolled into view, the
  route completes as opened, and focus stays in the editor. The
  focused-after cases are kept, now typing with a keydown as well.
- use-message-reveal.test.tsx: the composer has focus as a new request
  arrives and the person types before the reveal lands. The composer
  keeps focus and the row is still scrolled into view, completed and
  marked. A control case with the same opener and no input gives the row
  focus.

## Validation

Local macOS, Vitest 5.0.4, as asked, only these two files:

- use-message-reveal.test.tsx and ThreadPanel.test.tsx: 143/143 passed.
  With the two production files reverted to the previous rule and the
  new tests kept, exactly 3 fail: both focused-before panel cases and the
  typing unit case, each at the focus assertion. The control case and
  every earlier case pass on both.
- `tsc --noEmit`, `biome check --error-on-warnings` on the four changed
  files and `git diff --check` are clean.

Not run: the rest of the Vitest suite and the browser journeys. This
machine fails tests under load, so hosted CI covers those.

Addresses review feedback on PR #2563.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Signed-off-by: mtoohey <mtoohey@squareup.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
---
 src/features/messages/ThreadPanel.test.tsx    | 30 +++++++++----
 src/features/messages/ThreadPanel.tsx         |  6 +--
 .../messages/use-message-reveal.test.tsx      | 43 +++++++++++++++++-
 src/features/messages/use-message-reveal.ts   | 44 +++++++++----------
 4 files changed, 87 insertions(+), 36 deletions(-)

diff --git a/src/features/messages/ThreadPanel.test.tsx b/src/features/messages/ThreadPanel.test.tsx
index f2dfe9b48e..f46e763f5a 100644
--- a/src/features/messages/ThreadPanel.test.tsx
+++ b/src/features/messages/ThreadPanel.test.tsx
@@ -2044,9 +2044,14 @@ it("a retained reader reveals its exact selected message, again for each new req
   expect(revealedReply()).toBe(false);
 });
 
-it.each(["route", "reveal request"] as const)(
-  "a %s into the open thread leaves focus in the editor the person typed into while it retargets",
-  async (kind) => {
+it.each([
+  ["route", "after"],
+  ["route", "before"],
+  ["reveal request", "after"],
+  ["reveal request", "before"],
+] as const)(
+  "a %s into the open thread leaves focus in the editor the person typed into while it retargets (focused %s the request)",
+  async (kind, focused) => {
     vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue(
       new DOMRect(0, 0, 500, 500),
     );
@@ -2059,6 +2064,15 @@ it.each(["route", "reveal request"] as const)(
     Object.assign(props, { retainThread: true });
     h.render();
     const editor = screen.getByRole("textbox", { name: "Reply" });
+    // A click into the editor, with the browser's own focus move.
+    const enter = () => {
+      fireEvent.pointerDown(editor);
+      editor.focus();
+      fireEvent.pointerUp(editor);
+      fireEvent.click(editor);
+    };
+    // The person is already writing in the editor as the request arrives.
+    if (focused === "before") act(enter);
     let release!: (value: "selected") => void;
     h.view.retarget.mockImplementation(
       () =>
@@ -2077,13 +2091,11 @@ it.each(["route", "reveal request"] as const)(
     );
     h.rerenderProps();
     expect(h.view.retarget).toHaveBeenCalledOnce();
-    // The editor stays usable during the read: the person clicks into it,
-    // with the browser's own focus move, and types.
+    // The editor stays usable during the read: the person clicks into it and
+    // types, or keeps typing.
     act(() => {
-      fireEvent.pointerDown(editor);
-      editor.focus();
-      fireEvent.pointerUp(editor);
-      fireEvent.click(editor);
+      if (focused === "after") enter();
+      fireEvent.keyDown(editor, { key: "a" });
       fireEvent(
         editor,
         new InputEvent("beforeinput", {
diff --git a/src/features/messages/ThreadPanel.tsx b/src/features/messages/ThreadPanel.tsx
index b2e2627ea5..eff7b8c9ff 100644
--- a/src/features/messages/ThreadPanel.tsx
+++ b/src/features/messages/ThreadPanel.tsx
@@ -233,7 +233,7 @@ function RetainedThreadPanel(props: ThreadPanelProps) {
     navigation: PageNavigation | undefined;
     revealRequest: number | undefined;
     revision: number;
-    /** Focus as a request confirmed in place arrived, before its retarget. */
+    /** The person's input since a request confirmed in place arrived. */
     arrival?: RevealArrival | undefined;
   };
   const current = useRef<Opening | undefined>(undefined);
@@ -307,7 +307,7 @@ function RetainedThreadPanel(props: ThreadPanelProps) {
         if (navigation) setRouting(navigation);
         // The editor stays usable while the read runs, so focus the person
         // moves or text they type meanwhile belongs to this request's reveal.
-        const arrival = { element: document.activeElement, input: false };
+        const arrival = { input: false };
         stopArrival = watchArrival(arrival);
         let result: ThreadRetarget;
         try {
@@ -560,7 +560,7 @@ function ThreadMessages({
   arrival,
 }: {
   onResolvedRoot?: ThreadPanelProps["onResolvedRoot"];
-  /** Focus as the request retargeted in place arrived, for its reveal. */
+  /** The person's input since the request retargeted in place arrived. */
   arrival?: RevealArrival | undefined;
   /** A route to this reader is on its way: until it lands, a reader not yet
    * shown stays hidden and unread rather than showing a place the route
diff --git a/src/features/messages/use-message-reveal.test.tsx b/src/features/messages/use-message-reveal.test.tsx
index 690e9cd854..78e6cb09af 100644
--- a/src/features/messages/use-message-reveal.test.tsx
+++ b/src/features/messages/use-message-reveal.test.tsx
@@ -511,13 +511,54 @@ it("leaves focus with a composer the app focused once the person types into it",
   expect(complete).toHaveBeenCalledOnce();
 });
 
+// The editor the person was already writing in when a link retargeted the
+// open thread had focus as the request arrived. Their typing still claims it.
+it("leaves focus with the control focused as the request arrived once the person types into it", async () => {
+  const { row, composer, complete, next } = mount();
+  await idle();
+  expect(document.activeElement).toBe(row);
+  composer.focus();
+  next();
+  vi.mocked(row.scrollIntoView).mockClear();
+  const focus = vi.spyOn(row, "focus");
+  fireEvent.keyDown(composer, { key: "a" });
+  fireEvent(
+    composer,
+    new InputEvent("beforeinput", {
+      bubbles: true,
+      cancelable: true,
+      inputType: "insertText",
+      data: "a",
+    }),
+  );
+  await idle();
+  expect(row.scrollIntoView).toHaveBeenCalled();
+  expect(document.activeElement).toBe(composer);
+  expect(focus).not.toHaveBeenCalled();
+  expect(complete).toHaveBeenCalledTimes(2);
+  expect(highlighted(row)).toBe(true);
+});
+
+// Without input, the control focused as the request arrived is an opener the
+// person clicked and then waited on, and the row takes focus from it.
+it("takes focus from the control focused as the request arrived when the person does nothing", async () => {
+  const { row, composer, complete, next } = mount();
+  await idle();
+  expect(document.activeElement).toBe(row);
+  composer.focus();
+  next();
+  await idle();
+  expect(document.activeElement).toBe(row);
+  expect(complete).toHaveBeenCalledTimes(2);
+});
+
 // A thread retargeting in place records the arrival before the read and hands
 // it to the reveal that follows; the next request records its own.
 it("adopts an arrival recorded before the signal, for that request only", async () => {
   const { row, composer, complete, next } = mount();
   await idle();
   expect(document.activeElement).toBe(row);
-  const arrival = { element: document.activeElement, input: false };
+  const arrival = { input: false };
   const stop = watchArrival(arrival);
   try {
     moves.click(composer);
diff --git a/src/features/messages/use-message-reveal.ts b/src/features/messages/use-message-reveal.ts
index a0d664cab3..4b084243ea 100644
--- a/src/features/messages/use-message-reveal.ts
+++ b/src/features/messages/use-message-reveal.ts
@@ -38,8 +38,9 @@ export function useMessageReveal({
    */
   hold?: () => boolean;
   /**
-   * Focus as the request reached an owner that forwards its signal only after
-   * confirming the target, such as a thread retargeting in place.
+   * The person's input since the request reached an owner that forwards its
+   * signal only after confirming the target, such as a thread retargeting in
+   * place.
    */
   arrival?: RevealArrival | undefined;
 }) {
@@ -59,24 +60,21 @@ export function useMessageReveal({
     },
     [],
   );
-  // Focus as each request arrives, recorded before the target loads, however
-  // late. An arrival handed in by the owner serves only the first new signal
-  // after it.
-  const opener = useRef<{ signal: AbortSignal; arrival: RevealArrival }>(
+  // The person's input since each request arrived, watched from before the
+  // target loads, however late. An arrival handed in by the owner serves only
+  // the first new signal after it.
+  const arrived = useRef<{ signal: AbortSignal; arrival: RevealArrival }>(
     undefined,
   );
   const adopted = useRef<RevealArrival>(undefined);
   useLayoutEffect(() => {
     if (!signal) return;
-    if (opener.current?.signal !== signal) {
+    if (arrived.current?.signal !== signal) {
       const handed = arrival !== adopted.current ? arrival : undefined;
       if (handed) adopted.current = handed;
-      opener.current = {
-        signal,
-        arrival: handed ?? { element: document.activeElement, input: false },
-      };
+      arrived.current = { signal, arrival: handed ?? { input: false } };
     }
-    return watchArrival(opener.current.arrival);
+    return watchArrival(arrived.current.arrival);
   }, [signal, arrival]);
   useLayoutEffect(() => {
     if (
@@ -116,11 +114,13 @@ export function useMessageReveal({
       });
       placed?.();
       settled.current = true;
-      // The first focus yields to a control the person moved to, or typed
-      // into, after the request arrived, such as the composer of a
-      // still-loading conversation, so their typing stays there. Focus the
-      // app handed off without such input, or left on the opener or the
-      // surface around the scroller, is still taken.
+      // The first focus yields to the focused control once the person has
+      // moved focus or typed since the request arrived, so their typing stays
+      // there: the composer of a still-loading conversation, or the editor
+      // they were already writing in when a link retargeted the open thread.
+      // Focus the app handed off without such input, or left on the control
+      // that opened the request or the surface around the scroller, is still
+      // taken.
       // A replacement may recover lost focus, but must not take it from
       // another control after this request already focused a row successfully.
       const active = document.activeElement;
@@ -128,8 +128,7 @@ export function useMessageReveal({
       const claimed =
         !lost &&
         !active.contains(container) &&
-        active !== opener.current?.arrival.element &&
-        !!opener.current?.arrival.input;
+        !!arrived.current?.arrival.input;
       let focusPending = false;
       if (
         focus &&
@@ -219,11 +218,10 @@ export function useMessageReveal({
 }
 
 /**
- * Focus as a reveal request arrived: the control that opened it, or none once
- * that control unmounted. `input` marks that the person has since moved focus
- * or typed into the focused control.
+ * Whether the person has moved focus or typed into the focused control since a
+ * reveal request arrived.
  */
-export type RevealArrival = { element: Element | null; input: boolean };
+export type RevealArrival = { input: boolean };
 
 /**
  * Until stopped, set `input` when the person moves focus or types into the

From a2beed5f12cc728ed53436c23308acfc52b10b32 Mon Sep 17 00:00:00 2001
From: mtoohey <mtoohey@squareup.com>
Date: Thu, 12 Nov 2026 06:54:29 +0000
Subject: [PATCH 7/7] fix(messages): count input from a message visit's receipt
 while its channel loads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

Opening a message link into a channel that isn't loaded yet shows
"Loading messages…" with the channel's composer already usable. If the
person clicks into the composer during that wait, the reveal still moves
focus to the message row once the timeline loads. That is the
interruption this PR exists to prevent.

PR #2555 found this gap and added a browser journey for it
(message-navigation.spec.mjs "an exact message opened into a loading
channel keeps focus the person moved meanwhile"). Run on this branch
before this commit, the journey failed 4/4 (2 Chromium, 2 WebKit), each
at the final `toBeFocused` on the composer, after the visit had opened
and the message was in view.

## Cause

The reveal starts watching the person's input when `useMessageReveal`
receives the request's signal. ChannelsPage receives a message visit at
once, but ChannelTimeline mounts only after channel resolution and the
head read. A click made before that is recorded as coming before the
request, so the first focus takes the row. "keep input made while a
retained thread retargets" closed the same gap for a thread retargeting
in place by handing the reveal an arrival record. ChannelsPage had
nothing like it.

## Fix

ChannelWorkspace starts the record when it receives a message visit.
`watchRevealRequest(signal)` watches the person's input with
`watchArrival`, the same rule as everything else in this PR, until the
visit changes or the workspace unmounts. It keeps the record in a
WeakMap keyed by the visit's signal. When the reveal receives that
signal, it adopts the record ahead of a handed arrival. It falls back
to a new record as before. The rule for what counts doesn't change.

The record is keyed by signal rather than passed down as a prop. The
visit's signal reaches the reveal through ChannelBody/ChannelTimeline
and through the routed thread's tab and ThreadPanel unchanged, so a
signal key covers both without threading a prop through each surface.
Watching stops with the owner's effect, so no listener outlives the
visit.

Other requests still count input only from when their reveal receives
the signal, as before this commit. Conversation-tab and Inbox/Drafts
preview reveals have their own signals, which this change doesn't
start early. A visit opened while the community is still
connecting gets a new session-bound signal when the session becomes
ready, so input made before that doesn't count. That last case comes
from reading `forSession` and wasn't exercised.

Tests:

- use-message-reveal.test.tsx: a click into a composer before the reveal
  mounts, with a record started from receipt, keeps focus. The row is
  still scrolled into view and the reveal completes. Without the
  record, the row takes focus. The next request takes focus to the row
  either way. Dropping the hook's adoption of the record fails only the
  watched case.
- message-navigation.spec.mjs: #2555's cold-channel journey, as written
  there. It holds the beta channel's head read, opens an exact message
  in beta, clicks the composer while "Loading messages…" shows, then
  releases the read. It expects the visit opened, the message in view,
  and the composer focused. It is browser-only because the timeline
  mounts after a real head read, and the reveal needs layout to run.
  Removing only the ChannelsPage start fails it in both engines.

## Validation

Local Linux workstation (8-CPU quota), Vitest 5.0.4 and Playwright
1.63.0, `--no-deps --retries=0`:

- Cold-channel journey: before this commit 4/4 failed (both engines,
  `--repeat-each=2`). With it, 10/10 passed (both engines,
  `--workers=4 --repeat-each=5`). With the ChannelsPage start removed,
  2/2 failed at the composer's `toBeFocused`.
- use-message-reveal.test.tsx and ThreadPanel.test.tsx: 145/145 passed.
  Vitest for `src/features/messages` and `src/bundled/channels`
  (`--maxWorkers=4`): 167 files, 4272 tests passed.
- `inbox-mark-read`, `global-search`, `channel-members`,
  `thread-opening`, `navigation-thread-history`, `message-navigation`,
  `thread-unread`, `identity-badge`, `charts`, `startup-failure` and
  `changesets`, WebKit and Chromium, `--workers=4`: 195 passed and
  1 failed. The failure, `thread-unread.spec.mjs:421` in Chromium,
  is a hover check that lost its hover when the timeline settled
  after a thread closed. It passed in isolation on this branch and on
  main. Traced runs show the same pre-settle hover position on main.
- `tsc --noEmit`, `biome check --error-on-warnings` on the four changed
  files and `git diff --check` are clean.

A green run doesn't prove the behavior in every hand-off. Hosted CI
covers broad validation.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Signed-off-by: mtoohey <mtoohey@squareup.com>
---
 src/bundled/channels/ChannelsPage.tsx         |  7 +++
 .../messages/use-message-reveal.test.tsx      | 36 +++++++++++++-
 src/features/messages/use-message-reveal.ts   | 27 ++++++++--
 tests/browser/message-navigation.spec.mjs     | 49 +++++++++++++++++++
 4 files changed, 114 insertions(+), 5 deletions(-)

diff --git a/src/bundled/channels/ChannelsPage.tsx b/src/bundled/channels/ChannelsPage.tsx
index d172dd057c..76c2310d67 100644
--- a/src/bundled/channels/ChannelsPage.tsx
+++ b/src/bundled/channels/ChannelsPage.tsx
@@ -24,6 +24,7 @@ import { Avatar } from "../../shared/design-system/ui/Avatar";
 import { useToastNotification } from "../../shared/design-system/ui/Toast";
 import { useReturnHighlight } from "../../features/messages/use-return-highlight";
 import { useMessageOpening } from "../../features/messages/use-message-opening";
+import { watchRevealRequest } from "../../features/messages/use-message-reveal";
 import { ChannelBody } from "./ChannelBody";
 import {
   entryPane,
@@ -677,6 +678,12 @@ function ChannelWorkspace({
     navigation?.target.kind === "conversation"
       ? navigation.target.threadRootId
       : undefined;
+  useLayoutEffect(() => {
+    // The message's reveal waits for its channel, timeline or thread to load.
+    // Focus the person moves or text they type meanwhile counts from now.
+    if (!requestedMessage || !navigation || navigation.signal.aborted) return;
+    return watchRevealRequest(navigation.signal);
+  }, [requestedMessage, navigation]);
   const membersRequested =
     navigation?.target.kind === "conversation" &&
     navigation.target.panel === "members";
diff --git a/src/features/messages/use-message-reveal.test.tsx b/src/features/messages/use-message-reveal.test.tsx
index 78e6cb09af..0fdd0509ac 100644
--- a/src/features/messages/use-message-reveal.test.tsx
+++ b/src/features/messages/use-message-reveal.test.tsx
@@ -13,6 +13,7 @@ import { HIGHLIGHT_MAX_WAIT_MS, HIGHLIGHT_QUIET_MS } from "./message-highlight";
 import {
   useMessageReveal,
   watchArrival,
+  watchRevealRequest,
   type RevealArrival,
 } from "./use-message-reveal";
 
@@ -66,9 +67,12 @@ async function idle() {
 }
 function mount(
   hold?: () => boolean,
-  { focus, mark }: { focus?: boolean; mark?: boolean } = {},
+  {
+    focus,
+    mark,
+    request = new AbortController(),
+  }: { focus?: boolean; mark?: boolean; request?: AbortController } = {},
 ) {
-  const request = new AbortController();
   const complete = vi.fn();
   function Surface({
     signal = request.signal,
@@ -575,6 +579,34 @@ it("adopts an arrival recorded before the signal, for that request only", async
   }
 });
 
+// A message visit's owner starts the record when it receives the visit; the
+// timeline that reveals it mounts only once the channel loads.
+it.each([
+  ["leaves focus moved before the reveal mounted, watched from receipt", true],
+  ["takes focus moved before the reveal mounted when nothing watched", false],
+])("%s", async (_, watched) => {
+  const request = new AbortController();
+  const composer = document.body.appendChild(
+    document.createElement("textarea"),
+  );
+  const stop = watched ? watchRevealRequest(request.signal) : () => {};
+  try {
+    moves.click(composer);
+    const { row, complete, next } = mount(undefined, { request });
+    await idle();
+    expect(row.scrollIntoView).toHaveBeenCalled();
+    expect(document.activeElement).toBe(watched ? composer : row);
+    expect(complete).toHaveBeenCalledOnce();
+    next(); // The record serves only its own request.
+    await idle();
+    expect(document.activeElement).toBe(row);
+    expect(complete).toHaveBeenCalledTimes(2);
+  } finally {
+    stop();
+    composer.remove();
+  }
+});
+
 it.each([false, true])(
   "preserves moved focus before verification (mutation: %s)",
   async (mutation) => {
diff --git a/src/features/messages/use-message-reveal.ts b/src/features/messages/use-message-reveal.ts
index 4b084243ea..97f95a341d 100644
--- a/src/features/messages/use-message-reveal.ts
+++ b/src/features/messages/use-message-reveal.ts
@@ -61,8 +61,9 @@ export function useMessageReveal({
     [],
   );
   // The person's input since each request arrived, watched from before the
-  // target loads, however late. An arrival handed in by the owner serves only
-  // the first new signal after it.
+  // target loads, however late. A record started for the signal when its owner
+  // received it comes first. An arrival handed in by the owner serves only the
+  // first new signal after it.
   const arrived = useRef<{ signal: AbortSignal; arrival: RevealArrival }>(
     undefined,
   );
@@ -72,7 +73,10 @@ export function useMessageReveal({
     if (arrived.current?.signal !== signal) {
       const handed = arrival !== adopted.current ? arrival : undefined;
       if (handed) adopted.current = handed;
-      arrived.current = { signal, arrival: handed ?? { input: false } };
+      arrived.current = {
+        signal,
+        arrival: received.get(signal) ?? handed ?? { input: false },
+      };
     }
     return watchArrival(arrived.current.arrival);
   }, [signal, arrival]);
@@ -223,6 +227,23 @@ export function useMessageReveal({
  */
 export type RevealArrival = { input: boolean };
 
+const received = new WeakMap<AbortSignal, RevealArrival>();
+
+/**
+ * Until stopped, watch the person's input for a request from when its owner
+ * receives it, for a reveal that mounts only once its target's surface loads,
+ * such as a message visit into a channel still loading. The reveal adopts this
+ * record when it receives the signal.
+ */
+export function watchRevealRequest(signal: AbortSignal): () => void {
+  let arrival = received.get(signal);
+  if (!arrival) {
+    arrival = { input: false };
+    received.set(signal, arrival);
+  }
+  return watchArrival(arrival);
+}
+
 /**
  * Until stopped, set `input` when the person moves focus or types into the
  * focused control. Only a move the browser makes for a press counts: focus
diff --git a/tests/browser/message-navigation.spec.mjs b/tests/browser/message-navigation.spec.mjs
index 05b7db377a..64037239dd 100644
--- a/tests/browser/message-navigation.spec.mjs
+++ b/tests/browser/message-navigation.spec.mjs
@@ -536,6 +536,55 @@ test("superseding a held exact read cancels it; a late response cannot steal foc
   await expect.poll(() => status(page)).toBe("opened");
 });
 
+test.describe("cold channel", () => {
+  test.use({ historyCounts: { alpha: 103, beta: 1 } });
+  // Browser-only: the timeline mounts after the channel's head read, so only a
+  // real load shows that a click made meanwhile keeps its focus.
+  test("an exact message opened into a loading channel keeps focus the person moved meanwhile", async ({
+    page,
+    app,
+  }) => {
+    const beta = Promise.withResolvers();
+    await page.route("**/query", async (route) => {
+      const filters = route.request().postDataJSON() ?? [];
+      if (filters.some((filter) => filter["#h"]?.includes("beta")))
+        await beta.promise;
+      await route.fallback();
+    });
+    const [message] = app.histories.get("primary/beta");
+    const composer = page.getByRole("textbox", {
+      name: "Message #Beta",
+      exact: true,
+    });
+    try {
+      await open(page, app);
+      await page.evaluate(
+        (value) => {
+          window.fixtureNavigation.open(value);
+        },
+        {
+          ...target(app, message.id),
+          channelId: "beta",
+          threadRootId: undefined,
+        },
+      );
+      await expect(
+        page.getByRole("status").filter({ hasText: "Loading messages…" }),
+      ).toBeVisible();
+      await composer.click();
+    } finally {
+      beta.resolve();
+    }
+    await expect.poll(() => status(page)).toBe("opened");
+    await expect(
+      page.locator(
+        `[data-channel-timeline="beta"] [data-message-id="${message.id}"]`,
+      ),
+    ).toBeInViewport();
+    await expect(composer).toBeFocused();
+  });
+});
+
 for (const selected of ["reply", "root"]) {
   test(`same-scope replacement waits for fresh membership before reopening the exact ${selected}`, async ({
     page,