jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-11-06 17:31:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(desktop): keep an own send out of the frozen timeline tail (#9095)

Browse Source 
## Summary

The timeline freezes its live tail when Virtua reports that the reader
has left the bottom, and a send arms a one-shot pin for its own row. A
not-at-bottom report between the send and the sent row reaching the
deferred snapshot froze the tail again, so the sent row waited behind a
"1 new message" pill. That is the `messaging.spec.ts:483` flake in
Desktop Smoke E2E. The first commit holds off that freeze while the send
is pending. The other three are follow-ups from pre-PR review that bound
the hold to the send itself: it ends when the row lands, it is disarmed
when the send fails, and it is armed only for the channel the send
belongs to.

### fix(desktop): keep an own send out of the frozen timeline tail

#### Problem

`messaging.spec.ts:483` "long autolink wraps without widening the
timeline" flaked in Desktop Smoke E2E at :497: the timeline never showed
the sent message. The composer was empty, and a "1 new message" pill sat
at the bottom of a timeline that was already at the floor.
- seiler/BUZZ-517/desktop-upgrade-guidance:
-
https://github.com/block/buzz/actions/runs/41751914119/job/126319694104
(retry 1 passed)

The failure video shows the composer filling while the channel still
showed its skeleton, the rows rendering under the tall composer, and the
send landing about 120 ms later.

#### Cause

The timeline freezes its live tail when Virtua reports that the reader
has left the bottom, and later rows wait behind the pill. A send lifts
the freeze and arms a one-shot pin for the next append
(`prepareForOwnMessage`). Nothing kept a not-at-bottom report between
the send and the sent row reaching the deferred snapshot from freezing
the tail again. The sent row then waited behind the pill, and the pin,
which waits for that append, never fired. Only a later scroll to the
floor would have released it.

Virtua 0.49.3 makes that report while the reader sits at the floor. It
applies a list length change to its store during render
(Virtualizer.tsx). React discarded the deferred render that added the
sent row, but the store kept the row's estimated height. When the
cleared composer shrank the trailing spacer, the next scroll event put
the reader 96 px from a floor the DOM didn't have: Virtua read 941 - 479
- 366 = 96, the DOM read 917 - 551 - 366 = 0. The freeze it queued
renders at default priority, ahead of the deferred render, which then
restarted against the frozen tail.

#### Fix

While the send's pin is armed, a not-at-bottom report doesn't freeze the
tail. `useAnchoredScroll` exposes `isBottomPinArmed()`, which reads the
pin's own flag, so the hold ends when the pin fires or the channel
changes. `prepareForOwnMessage` also cancels a freeze queued before the
send, which would otherwise land after its release.

Bottom state still comes from Virtua. Reading it from the DOM would add
false gaps of its own, because unmeasured rows overflow their slots: a
passing run read 51 px from the DOM where Virtua read 0.

A scroll up between the send and its row no longer freezes the tail. The
pin brings the reader down to the sent row, as it already does when the
row lands first. A send that adds no row leaves the pin armed until the
next append, as before, and the hold follows it.

#### Validation

- New `MessageTimeline.ownSend.jsdom-test.mjs` renders the real
MessageTimeline over Virtua with a modelled layout and manual frames. It
sends with a gap reported after the send, and with a freeze already
queued at the send. The sent row must render at the floor with no pill.
Without the pin guard the first case fails, and without the cancel the
second does, each showing "1 new message".
- Repro, using temporary, uncommitted changes: the test with a 600 ms
channel-head delay, filling during the skeleton, sending once rows
render, with CPU throttled 4x over CDP. Without the fix: 3/20 failed
with the CI signature, and instrumentation showed the 96 px report
above. With the fix: 40/40 passed, and 6 of those runs logged a
not-at-bottom report while the pin was armed.
- `messaging.spec.ts --grep "long autolink"`: 30/30 passed at 4 workers,
10/10 serially.
- messaging, virtualization, scroll-history, stream, smoke,
thread-follow, file-attachment and message-target-highlight specs, run
twice at 4 workers: 185 passed and 1 failed each time, a different test
each run. Repeating those two fails as often without the fix: `:2785`
(own avatar) 22/25 vs 20/25 at 4 workers and 8/10 vs 9/10 serially;
`:3170` (thread panel width) 4/25 vs 8/25 and 1/10 vs 3/10. `:2785`
fails on the avatar image after its message has rendered, and `:3170`
never sends, so the change can't reach it.
- `tsc --noEmit`, `biome check`, and the messages UI unit (337) and
jsdom (9) tests pass.

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

### fix(desktop): end an own send's freeze hold when its row lands

#### Problem

Review of f2c57afb5 ("fix(desktop): keep an own send out of the frozen
timeline tail") raised two findings in MessageTimeline.tsx.

- Warning: the hold on freezing the tail lasted as long as the send's
bottom pin, not as long as the send. The pin fires only when the tail id
changes (`newLatestArrived` in useAnchoredScroll), and only firing or a
channel change cleared it. The window cache sorts rows by created_at, so
the sent row doesn't become the tail when the last row has a later
created_at (a sender whose clock runs ahead) or a same-second row sorts
after it. The pin then stayed armed after the sent row rendered, and a
reader who scrolled up never froze the tail. The next arrival to become
the tail fired the pin and pulled them to the bottom instead of showing
the pill. Before f2c57afb5 the freeze buffered that arrival, so a stale
pin could not fire under a reader.
- Nit: `prepareForOwnMessage` set `semanticAtBottomRef.current = true`,
which the hold already made redundant, and cancelling the queued freeze
left behind the `suppressNextSemanticBottomRef` it had set.

#### Cause

The hold read the bottom pin's own flag. The pin is cleared only when it
fires on a new tail id (`newLatestArrived` in useAnchoredScroll) or when
the channel changes. The window cache sorts rows by `created_at`, so a
sent row that sorts above the current tail never becomes the tail. That
happens when the last row's sender has a clock running ahead, or when a
same-second row sorts after the sent one. The pin then stays armed after
the sent row renders, and the hold stays with it.

#### Fix

`useAnchoredScroll` keeps a pending-send flag next to the pin.
`scrollToBottomOnNextUpdate` sets both. The restoration effect clears
the flag on the first append after arming, whether or not it moves the
tail (`newLatestArrived` or an "append" delta), and the channel reset
clears it. `isBottomPinArmed` becomes `isOwnSendPending`, which reads
the flag, and MessageTimeline holds off freezing only while it is set.
The pin itself is unchanged and still waits for a new tail. Once the
hold ends, a reader who scrolls up freezes the tail as before, so later
arrivals wait behind the pill and a stale pin can't fire under them.

This keeps arming and disarming in the hook. Disarming from ChannelPane
after `onSendMessage` settles would need a second call site (the welcome
add-agent flow also arms the pin), and the send's promise isn't tied to
when the sent row reaches the deferred snapshot.

`prepareForOwnMessage` now clears `suppressNextSemanticBottomRef`
instead of setting the semantic ref, so dropping the queued freeze also
drops the suppression it armed. No test covers this: a leftover
suppression only swallowed a bottom report while the send's release was
already making the timeline semantically at the bottom.

#### Validation

- New case in `MessageTimeline.ownSend.jsdom-test.mjs`: the tail's
createdAt is an hour ahead, the send lands above it, the reader scrolls
up 200 px, and a row from the same fast clock arrives and becomes the
tail. It expects "1 new message" and the reader's offset unchanged. On
f2c57afb5 it fails: no pill, and the pin moved the reader from 756 to
the floor at 1052 and rendered the arrival. With the fix the reader
stays at 756 and the arrival waits behind the pill.
- Mutations: clearing the flag only on a new tail, or never on an
append, fails only the new case. Removing the hold check fails the
original "gap after the send" case, as before.
- Messages UI jsdom tests (10) and `src/features/messages` unit tests
(1530) pass. Full desktop `pnpm test`: 6933 unit and 179 jsdom tests
pass.
- `tsc --noEmit`, `biome check` on the changed files, `check:file-sizes`
and `git diff --check` are clean. No browser E2E was run for this
follow-up.

### fix(desktop): disarm an own send's pin and hold when the send fails

#### Problem

Second review of the branch (warning, regression vs main) on c1767345e
("fix(desktop): end an own send's freeze hold when its row lands"),
useAnchoredScroll.ts and ChannelPane.tsx. The hold can still go stale
when a send never adds a row to this timeline.

`ChannelPane.handleSendMessage` armed the pin and the hold before it
awaited `onSendMessage`, for every main-composer send. That includes a
DM send that `useMentionSendFlow`'s `onPrepareSendChannel` moves to
another DM (the message mentions an agent who isn't in this one). Its
optimistic row goes to that channel's window, and `goChannel` runs only
after the send succeeds. If the publish is rejected or times out, the
user stays on the original DM with both flags armed. A same-channel send
whose `onMutate` can't resolve the channel also adds no row. Then the
reader scrolls up, the hold skips the freeze, the next arrival from the
other person becomes the tail, and the stale pin moves the reader to the
bottom with no pill. The reviewer's jsdom repro: at HEAD, no pill and
scrollTop 660 -> 956. At the merge base, "1 new message" and 660 stays.

A failed send to the same channel was fine: its optimistic row lands in
`onMutate`, an append that clears the hold, and is then reverted.

#### Cause

`ChannelPane.handleSendMessage` armed the pin and the hold before it
awaited `onSendMessage`, for every main-composer send, and nothing
disarmed them if the send then added no row to this timeline. A send
that `onPrepareSendChannel` moves to another DM lands its optimistic row
in that channel's window. A same-channel send whose `onMutate` can't
resolve the channel adds no row either. When such a send fails, the user
stays on the original timeline with both flags still armed.

#### Fix

- `ChannelPane.handleSendMessage` arms only when the send targets this
channel (`!channelId || channelId === activeChannelId`). A send prepared
into another channel lands its row there, and the pane navigates to it
once the send succeeds.
- `MessageTimelineHandle.cancelScrollToBottomOnNextUpdate` disarms a
send. `useAnchoredScroll` clears the pin and the pending-send flag. The
hold skipped every freeze while the send was pending, including one
queued before the send that the arm cancelled. So if the send was still
pending and Virtua's last report has the reader off the floor, the
cancel queues that freeze, as the report would have without the hold.
Later arrivals then wait behind the pill. If the send's row already
landed, the hold had ended and the cancel only clears the pin.
- `ChannelPane` arms through `armOwnSend`, which returns the disarm. The
main composer calls it when `onSendMessage` rejects, and the Welcome
"create in chat" flow when its `mutateAsync` rejects. Its `beforeSend`
option now returns the disarm. A generation counter keeps a late failure
from disarming a pin that a later send armed.

#### Validation

- `MessageTimeline.ownSend.jsdom-test.mjs` adds the reviewer's no-row
case in three orders: fail before the reader scrolls up, after, and with
the freeze queued before the send. Each expects "1 new message" and the
reader's offset unchanged after a new tail arrives. With the cancel a
no-op (HEAD's behavior), all three fail: no pill, and the reader moves
from 660 to 956. With the cancel clearing the flags but not queueing the
freeze, the two orders where the reader left the floor during the send
fail with "Jump to latest". A fourth case, a same-channel send whose row
lands and is then reverted, still shows "1 new message" and keeps the
offset. It passes on HEAD as well, because it pins behavior that must
not change. 7/7 pass.
- `useAnchoredScroll.lifecycle.test.mjs` adds a hook case: arm, cancel,
the reader leaves the floor, a new tail arrives without a jump, and a
later send still pins. It fails if the cancel is a no-op, or if it
clears only the pending flag. useAnchoredScroll unit tests: 45/45.
- Full desktop `pnpm test`: 6934 unit and 183 jsdom tests pass.
- `tsc --noEmit`, `biome check --error-on-warnings` on the changed files
and `git diff --check` are clean.
- No test renders `ChannelPane`, so its arm condition, the rejection
handlers and the generation counter are covered only by tsc and review.
No browser E2E was run.

### fix(desktop): arm an own send's pin only for the channel it belongs
to

#### Problem

Third review of the branch (review 89cce157, warning) on c257ff169
("fix(desktop): disarm an own send's pin and hold when the send fails"),
ChannelPane.tsx. `handleSendMessage` armed the timeline when `!channelId
|| channelId === activeChannelId`, and `activeChannelId` was the value
captured in its closure. A send whose slow upload spans a channel switch
passes that check against the channel it was written in, then arms
`messageTimelineRef.current`, the timeline now showing the other
channel. That channel keeps its tail open and its pin armed until its
next append, because the sent row lands in the original channel's
window. A reader who scrolls up there doesn't freeze the tail, and the
next arrival fires the pin and pulls them to the bottom with no pill.

#### Cause

`useMentionSendFlow` reads `onSendRef.current` before it starts a
deferred upload and calls that `send` from the upload's `onComplete`.
The arm carried no channel, so only the stale closure decided whether to
arm, and the timeline accepted an arm for whatever channel it rendered.

#### Fix

- `MessageTimelineHandle.scrollToBottomOnNextUpdate(sendChannelId)`
takes the send's channel. `useAnchoredScroll` keeps the channel its
state belongs to in a ref that its channel reset updates, and its arm
returns false without arming for any other channel. MessageTimeline
releases the frozen tail only when the arm is accepted, so a stale send
neither releases nor pins the channel shown now.
- The arm and disarm move from ChannelPane into
`useOwnSendArm(timelineRef, getTimelineChannelId)`. It skips an arm
whose channel isn't the one `getTimelineChannelId` reads now
(ChannelPane passes its `activeChannelIdRef`) and returns a no-op
disarm. A skipped arm leaves the generation alone, so it can't stop a
pending send in the shown channel from disarming when it fails.
Otherwise the generation works as before: a later send's arm turns an
earlier send's disarm into a no-op.
- `handleSendMessage` arms `channelId ?? activeChannelId`. A send
prepared into another DM is still skipped, now by the hook's live check
instead of the closure.
- The Welcome "create in chat" flow names the channel it sends to:
`beforeSend` takes a `channelId`, and `useWelcomeAgentCreate` passes
`activeChannel.id`.
- `useAnchoredScroll` exposes `isVirtualizerAtBottom()`, and
MessageTimeline's cancel reads it instead of keeping its own copy of
Virtua's last report. The two agree once the channel has confirmed its
bottom, which the cancel already requires. The hook's copy is also
cleared by a target jump or a live row under a held target before Virtua
reports, so a cancel in that window freezes as the report would.
- The channel reset effect now reads `channelId`, so its exhaustive-deps
suppression goes.

"a cancelled own send leaves the next tail with the reader" in
`useAnchoredScroll.lifecycle.test.mjs` (from c257ff169) failed 3 of 6
runs at HEAD on this workstation. The mount's settling frame, a
`setTimeout(0)` in that file's shim, could run after the test cleared
its recorded pins and add a "jump". The test now waits for that frame
first, as other cases in the file do: 0 of 15 runs failed. It still
fails when the cancel is a no-op or clears only the pending flag.

#### Validation

- New `useOwnSendArm.test.mjs` (node:test, like the rest of desktop's
unit tests): a send to the shown channel arms it, a send that settles
after a switch isn't armed and leaves the pending send's disarm working,
a failed send disarms, and a later arm outlives an earlier failure. Each
mutation fails a case: dropping the live check, bumping the generation
before it, dropping the generation check, and a no-op disarm.
- `useAnchoredScroll.lifecycle.test.mjs` adds an 11-row table for the
two gates the cancel reads, `isOwnSendPending()` and
`isVirtualizerAtBottom()`: no send, a send whose row hasn't landed,
landed as the tail, landed above the tail, a send to another channel, a
send then a channel change, a channel change then a send there, and the
reader off the floor, back at it, after a channel change, and with a
send pending. Dropping the arm's channel check, not updating the channel
ref on reset, and a constant `isVirtualizerAtBottom` each fail rows.
- `MessageTimeline.ownSend.jsdom-test.mjs`, 9/9:
- New: with the reader scrolled up and an arrival behind the pill, an
arm for another channel and a second arrival leave "2 new messages" and
the offset unchanged. It fails if useAnchoredScroll accepts the arm, or
if MessageTimeline releases the tail when it is refused.
- New: a send that fails at the floor leaves the next arrival rendered
at once. Without the off-floor gate the cancel freezes and the arrival
is missing right after it renders.
- Extended: after a same-channel send lands and fails, the reader
returns to the floor and the arrival renders with the pill gone. Without
the pending gate the cancel re-arms the freeze's bottom-report
suppression and the arrival stays behind the pill.
  - The existing cases now pass the channel.
- Desktop unit tests under `src/features/messages` and
`src/features/channels`: 2006/2006. jsdom tests there: 21/21.
- Playwright smoke after `pnpm build:e2e`, `--workers=4`: messaging,
send-channel-binding and welcome-agent-modal-screenshots, run twice.
First run 99 passed and 1 failed, second run 98 passed and 2 failed:
- `messaging.spec.ts:2785` (own avatar) fails on the avatar image after
its message renders: 5/6 failed with this change and 6/6 at HEAD
(`--workers=2 --repeat-each=6`). f2c57afb5 recorded the same local
failure.
- `messaging.spec.ts:3170` (thread panel width) never sends. It passed
5/5 on rerun.
- `send-channel-binding.spec.ts`, `--repeat-each=5`: 10/10. Its mid-send
case switches channels while a send is in flight.
welcome-agent-modal-screenshots (its chat-first case clicks "create in
chat" and finds the message in the timeline) plus nine messaging cases
including "long autolink" and the channel-switch cases,
`--repeat-each=5`: 80/80.
- `tsc --noEmit`, `biome check --error-on-warnings` on the changed
files, `check:file-sizes` and `git diff --check` are clean.
- No test renders ChannelPane, so its getter and its
`armOwnSend(channelId ?? activeChannelId)` call are covered only by tsc,
the hook's tests and the specs above.

**Rebased onto origin/main `64d12e297` (this branch, all four
commits):** Linux workstation. This branch doesn't include the Virtua
patch change from #9094. `pnpm install --frozen-lockfile` installs
main's virtua patch (`30a7a92b9480...`), so every result below runs
against the Virtua build on main.

- `pnpm typecheck` and `biome check --error-on-warnings` on the 11
changed desktop files are clean.
- Unit tests under `src/features/messages` and `src/features/channels`:
2006/2006. jsdom tests there: 16/16, including all 9
`MessageTimeline.ownSend.jsdom-test.mjs` cases. Full desktop `pnpm
test`: 6949 unit and 180 jsdom tests passed.
- Playwright smoke after `pnpm build:e2e`, `--workers=4 --retries=0`:
messaging, send-channel-binding, scroll-history, virtualization,
timeline-no-shift, overscroll-boundary, live-broadcast-reply-timeline,
message-target-highlight and welcome-agent-modal-screenshots, 142 passed
and 2 failed. The failures are `messaging.spec.ts:2785` (own-message
avatar), which fails the same way on main here as noted above, and
`messaging.spec.ts:3170` (thread panel width), which never sends and
passed 5/5 on rerun.
- `messaging.spec.ts --grep "long autolink"`, `--repeat-each=30`: 30/30
passed. `send-channel-binding.spec.ts`, `--repeat-each=5`: 10/10 passed.

## Coordination

- #6695 ("feat: show thread replies in channel") gains a textual
conflict in `desktop/src/features/channels/ui/ChannelPane.tsx`. It
already conflicts with main in four other files, so it needs a rebase
anyway.
- #8563, #8565, #8030, #7604, #7657, #7499, #5563 and #4663 touch
`MessageTimeline.tsx`, `ChannelScreen.tsx`, `ChannelPane.tsx` or
`useChannelIntro.tsx` and merge cleanly with this branch.
- Older open PRs that touch these files already conflict with main, and
none gains a new conflict from this branch.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Signed-off-by: mtoohey <mtoohey@squareup.com>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Matt Toohey
2026-11-06 09:49:32 +11:00
committed by GitHub
parent 4c7c15a9c2
commit e94b547f60
11 changed files with 868 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
desktop/src/features/channels/ui/ChannelPane.tsx
View File

@@ -63,6 +63,7 @@ import { useChannelIntro } from "@/features/channels/ui/useChannelIntro";
import type { ChannelPaneProps } from "@/features/channels/ui/ChannelPane.types";
import * as agentSessionSelection from "@/features/channels/ui/agentSessionSelection";
import { usePrepareDmSendChannel } from "@/features/channels/ui/usePrepareDmSendChannel";
import { useOwnSendArm } from "@/features/channels/ui/useOwnSendArm";
import { useChannelPaneMessages } from "@/features/channels/ui/useChannelPaneMessages";
import { useRoutedMessageEdit } from "@/features/channels/ui/useRoutedMessageEdit";
import { Button } from "@/shared/ui/button";
@@ -280,6 +281,11 @@ export const ChannelPane = React.memo(function ChannelPane({
}
return pubkeys;
}, [activityAgents, agentPubkeys, agentSessionAgents]);
const getTimelineChannelId = React.useCallback(
() => activeChannelIdRef.current,
[],
);
const armOwnSend = useOwnSendArm(messageTimelineRef, getTimelineChannelId);
const handleSendMessage = React.useCallback(
async (
content: string,
@@ -296,15 +302,24 @@ export const ChannelPane = React.memo(function ChannelPane({
isActiveWelcomeChannel &&
(containsWelcomePersonaMention(content) ||
mentionsKnownAgent(mentionPubkeys, knownAgentPubkeys));
messageTimelineRef.current?.scrollToBottomOnNextUpdate();
await onSendMessage(
content,
mentionPubkeys,
mediaTags,
channelId,
threadContext,
forceRest,
);
// A send prepared into another channel (a DM message that mentions an
// agent outside the DM) lands its row there, so this timeline never sees
// it, and the arm skips it. The pane navigates there once the send
// succeeds.
const disarmOwnSend = armOwnSend(channelId ?? activeChannelId);
try {
await onSendMessage(
content,
mentionPubkeys,
mediaTags,
channelId,
threadContext,
forceRest,
);
} catch (error) {
disarmOwnSend();
throw error;
}
if (
channelId &&
channelId !== activeChannelId &&
@@ -319,6 +334,7 @@ export const ChannelPane = React.memo(function ChannelPane({
},
[
activeChannelId,
armOwnSend,
completeWelcomeComposerBanner,
goChannel,
isActiveWelcomeChannel,
@@ -357,11 +373,8 @@ export const ChannelPane = React.memo(function ChannelPane({
[activeChannel, currentPubkey, profiles],
);
const handleWelcomeAddAgent = React.useCallback(() => {
onAddAgent?.({
beforeSend: () =>
messageTimelineRef.current?.scrollToBottomOnNextUpdate(),
});
}, [onAddAgent]);
onAddAgent?.({ beforeSend: armOwnSend });
}, [armOwnSend, onAddAgent]);
const standardChannelIntro = useChannelIntro({
activeChannel,
onAddAgent,

4
desktop/src/features/channels/ui/ChannelPane.types.ts
View File

@@ -96,7 +96,9 @@ export type ChannelPaneProps = {
onChannelManagementDeleted?: () => void;
onCloseIdleAuxiliaryPanel?: () => void;
onCloseProfilePanel: () => void;
onAddAgent?: (options?: { beforeSend?: () => void }) => void;
onAddAgent?: (options?: {
beforeSend?: (channelId: string) => () => void;
}) => void;
onAddFiles?: () => void;
onBrowseChannels?: () => void;
onCreateChannel?: () => void;

2
desktop/src/features/channels/ui/ChannelScreen.tsx
View File

@@ -559,7 +559,7 @@ export function ChannelScreen({
? handleSendVideoReviewComment
: undefined;
const handleOpenAddBot = React.useCallback(
(options?: { beforeSend?: () => void }) =>
(options?: { beforeSend?: (channelId: string) => () => void }) =>
welcomeAgentCreate.openAddAgent(() => setIsAddBotOpen(true), options),
[welcomeAgentCreate],
);

4
desktop/src/features/channels/ui/useChannelIntro.tsx
View File

@@ -38,7 +38,9 @@ export function useChannelIntro({
onWelcomeAddAgent,
}: {
activeChannel: Channel | null;
onAddAgent?: (options?: { beforeSend?: () => void }) => void;
onAddAgent?: (options?: {
beforeSend?: (channelId: string) => () => void;
}) => void;
onAddFiles?: () => void;
onBrowseChannels?: () => void;
onCreateChannel?: () => void;

85
desktop/src/features/channels/ui/useOwnSendArm.test.mjs Normal file
View File

@@ -0,0 +1,85 @@
import assert from "node:assert/strict";
import test from "node:test";
import { installDOMShim } from "../observedUnreadTestHarness.mjs";
installDOMShim();
import React from "react";
import { act } from "react";
import { createRoot } from "react-dom/client";
import { useOwnSendArm } from "./useOwnSendArm.ts";
// Mounts the hook over a timeline that records what it was asked to do. The
// pane's channel is read live, as ChannelPane reads activeChannelIdRef, so a
// test can switch it under an arm the composer already holds.
async function mountPane(channelId) {
const calls = [];
const timelineRef = {
current: {
cancelScrollToBottomOnNextUpdate: () => calls.push("disarm"),
scrollToBottomOnNextUpdate: (target) => calls.push(`arm ${target}`),
},
};
const pane = { arm: null, calls, channelId };
const getTimelineChannelId = () => pane.channelId;
function Harness() {
pane.arm = useOwnSendArm(timelineRef, getTimelineChannelId);
return null;
}
const root = createRoot(document.createElement("div"));
await act(async () => root.render(React.createElement(Harness)));
pane.unmount = () => act(async () => root.unmount());
return pane;
}
test("a send to the channel the timeline shows arms it", async () => {
const pane = await mountPane("general");
pane.arm("general");
pane.arm(null);
assert.deepEqual(pane.calls, ["arm general"]);
await pane.unmount();
});
// A send whose upload spans a channel switch settles with the channel it was
// written in. Its arm must not pin or hold the channel shown now, and must not
// take the generation from the send that is pending there.
test("a send that settles after the pane switched channels is not armed", async () => {
const pane = await mountPane("design");
pane.channelId = "general";
const disarmPending = pane.arm("general");
const disarmLate = pane.arm("design");
disarmLate();
assert.deepEqual(pane.calls, ["arm general"]);
disarmPending();
assert.deepEqual(pane.calls, ["arm general", "disarm"]);
await pane.unmount();
});
test("a failed send disarms the timeline", async () => {
const pane = await mountPane("general");
const disarm = pane.arm("general");
disarm();
assert.deepEqual(pane.calls, ["arm general", "disarm"]);
await pane.unmount();
});
test("a later send's arm outlives an earlier send's failure", async () => {
const pane = await mountPane("general");
const disarmEarlier = pane.arm("general");
const disarmLater = pane.arm("general");
disarmEarlier();
assert.deepEqual(pane.calls, ["arm general", "arm general"]);
disarmLater();
assert.deepEqual(pane.calls, ["arm general", "arm general", "disarm"]);
await pane.unmount();
});

41
desktop/src/features/channels/ui/useOwnSendArm.ts Normal file
View File

@@ -0,0 +1,41 @@
import * as React from "react";
import type { MessageTimelineHandle } from "@/features/messages/ui/MessageTimeline";
type OwnSendTimeline = Pick<
MessageTimelineHandle,
"cancelScrollToBottomOnNextUpdate" | "scrollToBottomOnNextUpdate"
>;
const noDisarm = () => {};
/**
* Arms the timeline's own-send pin for a send to `channelId` and returns its
* disarm for a failed send.
*
* A send can settle after the pane moved to another channel (a slow upload
* spans the switch), so the arm is skipped unless `channelId` is the channel
* the timeline shows now, read live from `getTimelineChannelId`. A skipped arm
* leaves the generation alone, so it can't strand an earlier send's disarm.
* The generation keeps a late failure from disarming a later send's pin.
*/
export function useOwnSendArm(
timelineRef: React.RefObject<OwnSendTimeline | null>,
getTimelineChannelId: () => string | null,
) {
const generationRef = React.useRef(0);
return React.useCallback(
(channelId: string | null) => {
if (!channelId || channelId !== getTimelineChannelId()) {
return noDisarm;
}
const generation = ++generationRef.current;
timelineRef.current?.scrollToBottomOnNextUpdate(channelId);
return () => {
if (generationRef.current !== generation) return;
timelineRef.current?.cancelScrollToBottomOnNextUpdate();
};
},
[getTimelineChannelId, timelineRef],
);
}

15
desktop/src/features/channels/useWelcomeAgentCreate.ts
View File

@@ -26,10 +26,17 @@ export function useWelcomeAgentCreate({
);
const [isOpen, setIsOpen] = React.useState(false);
const [error, setError] = React.useState<string | null>(null);
const beforeSendRef = React.useRef<(() => void) | null>(null);
// Runs right before the chat-first send, with the channel it sends to, and
// returns how to undo it if the send fails.
const beforeSendRef = React.useRef<
((channelId: string) => () => void) | null
>(null);
const openAddAgent = React.useCallback(
(openRegularPicker: () => void, options?: { beforeSend?: () => void }) => {
(
openRegularPicker: () => void,
options?: { beforeSend?: (channelId: string) => () => void },
) => {
setError(null);
if (isWelcomeExperienceChannel(activeChannel)) {
beforeSendRef.current = options?.beforeSend ?? null;
@@ -59,8 +66,9 @@ export function useWelcomeAgentCreate({
return;
}
setError(null);
let undoBeforeSend: (() => void) | undefined;
try {
beforeSendRef.current?.();
undoBeforeSend = beforeSendRef.current?.(activeChannel.id);
await sendMessageMutation.mutateAsync({
channelId: activeChannel.id,
content: `@${welcomeGuideAgent.name}, help me create a new agent.`,
@@ -68,6 +76,7 @@ export function useWelcomeAgentCreate({
});
setIsOpen(false);
} catch (cause) {
undoBeforeSend?.();
setError(
cause instanceof Error
? cause.message

387
desktop/src/features/messages/ui/MessageTimeline.ownSend.jsdom-test.mjs Normal file
View File

@@ -0,0 +1,387 @@
/**
* The user's own send reaches the bottom of the timeline even when Virtua
* reports a gap from the floor around it.
*
* MessageTimeline freezes its live tail when Virtua reports that the reader
* has left the bottom, and a send arms a one-shot pin for the next append. If
* the freeze lands before the sent row reaches the deferred snapshot, the row
* waits behind a "1 new message" pill, and the pin never sees its append.
* Virtua can report that gap while the reader is at the floor: it counts rows
* in its store during render, so a deferred render that React discards leaves
* the sent row counted. The next scroll event, from the composer shrinking
* after the send, then reads that row's height as distance from the bottom.
*/
import assert from "node:assert/strict";
import { afterEach, test } from "node:test";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
RouterContextProvider,
createMemoryHistory,
createRootRoute,
createRouter,
} from "@tanstack/react-router";
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { MessageTimeline } from "./MessageTimeline.tsx";
const ROW = 60;
const VIEWPORT = 400;
// jsdom has no layout. Model what the timeline reads: the scroller's offset
// is clamped to the height Virtua gives its inner container, and the list
// host is as tall as the scroller so Virtua keeps an offscreen buffer.
const offsets = new WeakMap();
const isScroller = (element) => element?.style?.overflowY === "auto";
const maxOffset = (element) =>
Math.max(
(Number.parseFloat(element.firstElementChild?.style.height) || 0) -
VIEWPORT,
0,
);
const clampOffset = (element, value) =>
Math.min(Math.max(value, 0), maxOffset(element));
Object.defineProperties(window.HTMLElement.prototype, {
clientHeight: {
configurable: true,
get() {
return isScroller(this) || isScroller(this.firstElementChild)
? VIEWPORT
: 0;
},
},
scrollHeight: {
configurable: true,
get() {
return isScroller(this) ? maxOffset(this) + VIEWPORT : 0;
},
},
scrollTop: {
configurable: true,
get() {
const offset = clampOffset(this, offsets.get(this) ?? 0);
offsets.set(this, offset);
return offset;
},
set(value) {
offsets.set(this, clampOffset(this, value));
},
},
offsetParent: {
configurable: true,
get() {
return this.parentElement;
},
},
});
const resizeObservers = new Set();
globalThis.ResizeObserver = window.ResizeObserver = class {
constructor(callback) {
this.callback = callback;
this.targets = new Set();
resizeObservers.add(this);
}
observe(target) {
this.targets.add(target);
}
unobserve(target) {
this.targets.delete(target);
}
disconnect() {
resizeObservers.delete(this);
}
};
// Frames run only when the test flushes them, so it decides whether a queued
// freeze lands before or after the send.
let frames = new Map();
let nextFrameId = 1;
globalThis.requestAnimationFrame = window.requestAnimationFrame = (
callback,
) => {
const id = nextFrameId++;
frames.set(id, callback);
return id;
};
globalThis.cancelAnimationFrame = window.cancelAnimationFrame = (id) => {
frames.delete(id);
};
function flushFrames() {
act(() => {
const pending = frames;
frames = new Map();
for (const callback of pending.values()) callback(performance.now());
});
}
function message(index, body = `message ${index}`) {
return {
id: index.toString(16).padStart(64, "0"),
createdAt: 1_700_000_000 + index,
pubkey: "a".repeat(64),
author: "alice",
time: "1:00 AM",
body,
depth: 0,
kind: 9,
tags: [],
};
}
const history = Array.from({ length: 20 }, (_, index) => message(index + 1));
const sent = message(21, "my own send");
let root;
let container;
afterEach(() => {
act(() => root?.unmount());
container?.remove();
});
async function mountAtFloor(initial = history) {
const router = createRouter({
routeTree: createRootRoute(),
history: createMemoryHistory({ initialEntries: ["/"] }),
});
const queryClient = new QueryClient({
defaultOptions: { queries: { enabled: false } },
});
const timeline = React.createRef();
const render = (messages) =>
act(async () =>
root.render(
React.createElement(
RouterContextProvider,
{ router },
React.createElement(
QueryClientProvider,
{ client: queryClient },
React.createElement(MessageTimeline, {
channelId: "channel",
messages,
ref: timeline,
}),
),
),
),
);
container = document.createElement("div");
document.body.appendChild(container);
root = createRoot(container);
await render(initial);
const scroller = container.querySelector('[data-testid="message-timeline"]');
act(() => {
for (const observer of resizeObservers) {
observer.callback(
[...observer.targets].map((target) => ({
target,
contentRect: {
width: 600,
height: target === scroller ? VIEWPORT : ROW,
},
})),
);
}
});
flushFrames();
readerScrollsTo(scroller, scroller.scrollHeight);
flushFrames();
return { render, scroller, timeline };
}
function readerScrollsTo(scroller, offset) {
act(() => {
scroller.scrollTop = offset;
scroller.dispatchEvent(new window.Event("scroll"));
});
}
// The guard cannot tell Virtua's stale gap from a real one, so a real 200px
// gap stands in for it. Either way, the send pulls the view to its row.
for (const { name, order } of [
{ name: "after the send", order: ["send", "gap"] },
{ name: "with its freeze still queued at the send", order: ["gap", "send"] },
]) {
test(`an own send reaches the floor when Virtua reports a gap ${name}`, async () => {
const { render, scroller, timeline } = await mountAtFloor();
assert.equal(
container.querySelector('[data-testid="message-scroll-to-latest"]'),
null,
);
for (const step of order) {
if (step === "send") {
act(() => timeline.current.scrollToBottomOnNextUpdate("channel"));
} else {
readerScrollsTo(scroller, scroller.scrollTop - 200);
}
}
flushFrames();
await render([...history, sent]);
flushFrames();
assert.ok(container.querySelector(`[data-message-id="${sent.id}"]`));
assert.equal(
container.querySelector('[data-testid="message-scroll-to-latest"]'),
null,
);
assert.equal(scroller.scrollTop, scroller.scrollHeight - VIEWPORT);
});
}
// Rows arrive sorted by created_at, so a tail from a sender whose clock runs
// ahead stays the tail when the send lands above it, and the pin stays armed.
// The send's row still ends its hold on freezing: a reader who then scrolls up
// gets the next arrival behind the pill, even one that becomes the tail.
test("a reader who scrolls up after a send that lands above the tail keeps their place", async () => {
const earlier = history.slice(0, -1);
const aheadTail = { ...history.at(-1), createdAt: sent.createdAt + 3600 };
const aheadNext = { ...message(22), createdAt: aheadTail.createdAt + 1 };
const { render, scroller, timeline } = await mountAtFloor([
...earlier,
aheadTail,
]);
act(() => timeline.current.scrollToBottomOnNextUpdate("channel"));
await render([...earlier, sent, aheadTail]);
flushFrames();
assert.ok(container.querySelector(`[data-message-id="${sent.id}"]`));
readerScrollsTo(scroller, scroller.scrollTop - 200);
const readingOffset = scroller.scrollTop;
flushFrames();
await render([...earlier, sent, aheadTail, aheadNext]);
flushFrames();
assert.equal(
container.querySelector('[data-testid="message-scroll-to-latest"]')
?.textContent,
"1 new message",
);
assert.equal(scroller.scrollTop, readingOffset);
});
// A failed send can leave no row here, as when its optimistic row never
// resolved a channel. Its cancel drops the pin and the hold, and freezes the
// tail the hold left open if the reader is off the floor, so the next arrival
// waits behind the pill instead of firing the pin under the reader.
for (const order of [
["send", "fail", "gap"],
["send", "gap", "fail"],
["gap", "send", "fail"],
]) {
test(`a send that fails without a row leaves the reader in place (${order.join(", ")})`, async () => {
const { render, scroller, timeline } = await mountAtFloor();
for (const step of order) {
if (step === "send") {
act(() => timeline.current.scrollToBottomOnNextUpdate("channel"));
} else if (step === "fail") {
act(() => timeline.current.cancelScrollToBottomOnNextUpdate());
} else {
readerScrollsTo(scroller, scroller.scrollTop - 200);
}
}
const readingOffset = scroller.scrollTop;
flushFrames();
await render([...history, message(22, "from the other person")]);
flushFrames();
assert.equal(
container.querySelector('[data-testid="message-scroll-to-latest"]')
?.textContent,
"1 new message",
);
assert.equal(scroller.scrollTop, readingOffset);
});
}
// With the reader still at the floor, the hold skipped nothing, so the cancel
// leaves the tail open and the next arrival renders at once. A freeze here
// would only be released a frame later, holding that arrival behind the pill
// until then.
test("a send that fails at the floor keeps the timeline following", async () => {
const { render, timeline } = await mountAtFloor();
const arrival = message(22, "from the other person");
act(() => timeline.current.scrollToBottomOnNextUpdate("channel"));
act(() => timeline.current.cancelScrollToBottomOnNextUpdate());
flushFrames();
await render([...history, arrival]);
assert.ok(container.querySelector(`[data-message-id="${arrival.id}"]`));
assert.equal(
container.querySelector('[data-testid="message-scroll-to-latest"]'),
null,
);
});
// A send to this channel lands its optimistic row at once, which is an append
// that fires the pin and ends the hold. When the publish then fails, the row
// is reverted and the cancel finds nothing pending: it must not re-arm the
// freeze's bottom-report suppression, or returning to the floor would leave
// the arrival stuck behind the pill.
test("a reader who scrolls up before a same-channel send fails keeps their place", async () => {
const { render, scroller, timeline } = await mountAtFloor();
act(() => timeline.current.scrollToBottomOnNextUpdate("channel"));
await render([...history, sent]);
flushFrames();
assert.equal(scroller.scrollTop, scroller.scrollHeight - VIEWPORT);
readerScrollsTo(scroller, scroller.scrollTop - 200);
const readingOffset = scroller.scrollTop;
flushFrames();
act(() => timeline.current.cancelScrollToBottomOnNextUpdate());
await render(history);
flushFrames();
const arrival = message(22, "from the other person");
await render([...history, arrival]);
flushFrames();
assert.equal(
container.querySelector('[data-testid="message-scroll-to-latest"]')
?.textContent,
"1 new message",
);
assert.equal(scroller.scrollTop, readingOffset);
readerScrollsTo(scroller, scroller.scrollHeight);
flushFrames();
assert.ok(container.querySelector(`[data-message-id="${arrival.id}"]`));
assert.equal(
container.querySelector('[data-testid="message-scroll-to-latest"]'),
null,
);
});
// A send whose upload spans a channel switch settles with the channel it was
// written in. Its arm must not release this timeline's frozen tail or pin its
// next arrival under a reader who scrolled up.
test("an own send for another channel leaves this timeline's reader in place", async () => {
const { render, scroller, timeline } = await mountAtFloor();
readerScrollsTo(scroller, scroller.scrollTop - 200);
const readingOffset = scroller.scrollTop;
flushFrames();
await render([...history, message(22, "from the other person")]);
flushFrames();
act(() => timeline.current.scrollToBottomOnNextUpdate("design"));
flushFrames();
await render([
...history,
message(22, "from the other person"),
message(23, "and again"),
]);
flushFrames();
assert.equal(
container.querySelector('[data-testid="message-scroll-to-latest"]')
?.textContent,
"2 new messages",
);
assert.equal(scroller.scrollTop, readingOffset);
});

70
desktop/src/features/messages/ui/MessageTimeline.tsx
View File

@@ -34,7 +34,11 @@ import {
import { useSettleGatedPrependMessages } from "./useSettleGatedPrependMessages";
export type MessageTimelineHandle = {
scrollToBottomOnNextUpdate: () => void;
/** Release the frozen tail and pin the next append for a send to
* `sendChannelId`. Ignored when this timeline shows another channel. */
scrollToBottomOnNextUpdate: (sendChannelId: string) => void;
/** Undo `scrollToBottomOnNextUpdate` for a send that failed. */
cancelScrollToBottomOnNextUpdate: () => void;
settleAtBottom: () => boolean;
};
@@ -358,6 +362,9 @@ const MessageTimelineBase = React.forwardRef<
onScroll,
scrollToBottom,
scrollToBottomOnNextUpdate,
isOwnSendPending,
isVirtualizerAtBottom,
cancelScrollToBottomOnNextUpdate,
scrollToMessage,
onVirtualizerAtBottomStateChange,
} = useAnchoredScroll({
@@ -424,13 +431,17 @@ const MessageTimelineBase = React.forwardRef<
}
} else if (hasConfirmedVirtualizerBottomRef.current) {
onVirtualizerAtBottomStateChange(false);
if (semanticAtBottomRef.current) {
// Until the sent row lands, the own-send pin owns the next append.
// Freezing the tail first would buffer the sent row, and the pin would
// never see it arrive. Virtua reports a stale gap here when a
// discarded render already counted the sent row in its store.
if (semanticAtBottomRef.current && !isOwnSendPending()) {
suppressNextSemanticBottomRef.current = true;
queueSemanticBottom(false);
}
}
},
[onVirtualizerAtBottomStateChange, queueSemanticBottom],
[isOwnSendPending, onVirtualizerAtBottomStateChange, queueSemanticBottom],
);
const hasPendingLiveRows = bufferedTimeline.pendingCount > 0;
React.useEffect(() => {
@@ -477,25 +488,62 @@ const MessageTimelineBase = React.forwardRef<
const showPinnedIntroOnly = activePinnedIntro !== null && !showMessageList;
const omitHistoryLeadIn = showChannelIntroOnly || showPinnedIntroOnly;
const prepareForOwnMessage = React.useCallback(() => {
// The user's own send is the deliberate Zulip exception: release buffered
// output before arming the next-append bottom pin so the sent row can enter
// Virtua's model and become the new physical floor.
setIsSemanticallyAtBottom(true);
scrollToBottomOnNextUpdate();
}, [scrollToBottomOnNextUpdate]);
const prepareForOwnMessage = React.useCallback(
(sendChannelId: string) => {
// A send that settles after a channel switch belongs to the channel it
// left, so it must neither release nor pin the one shown now.
if (!scrollToBottomOnNextUpdate(sendChannelId)) return;
// The user's own send is the deliberate Zulip exception: release buffered
// output along with the next-append bottom pin so the sent row can enter
// Virtua's model and become the new physical floor. Drop a freeze queued
// before the send, or it would land after this release, and the bottom
// report suppression that freeze armed.
if (semanticBottomRafRef.current !== null) {
window.cancelAnimationFrame(semanticBottomRafRef.current);
semanticBottomRafRef.current = null;
}
suppressNextSemanticBottomRef.current = false;
setIsSemanticallyAtBottom(true);
},
[scrollToBottomOnNextUpdate],
);
const cancelOwnMessage = React.useCallback(() => {
// While the send was pending, its hold skipped any freeze, including one
// queued before the send. If the reader is off the floor now, freeze as
// that report would have, so later arrivals wait behind the pill.
const skippedFreeze =
isOwnSendPending() &&
hasConfirmedVirtualizerBottomRef.current &&
!isVirtualizerAtBottom();
cancelScrollToBottomOnNextUpdate();
if (skippedFreeze) {
suppressNextSemanticBottomRef.current = true;
queueSemanticBottom(false);
}
}, [
cancelScrollToBottomOnNextUpdate,
isOwnSendPending,
isVirtualizerAtBottom,
queueSemanticBottom,
]);
React.useImperativeHandle(
ref,
() => ({
scrollToBottomOnNextUpdate: prepareForOwnMessage,
cancelScrollToBottomOnNextUpdate: cancelOwnMessage,
settleAtBottom: () => {
if (!timelineVirtualizerApi) return false;
scrollToBottom("auto");
return true;
},
}),
[prepareForOwnMessage, scrollToBottom, timelineVirtualizerApi],
[
cancelOwnMessage,
prepareForOwnMessage,
scrollToBottom,
timelineVirtualizerApi,
],
);
const jumpToMessage = React.useCallback(

199
desktop/src/features/messages/ui/useAnchoredScroll.lifecycle.test.mjs
View File

@@ -918,7 +918,7 @@ const RELEASES = [
[
"own send",
async ({ fake, render, state }) => {
state().scrollToBottomOnNextUpdate();
state().scrollToBottomOnNextUpdate("conversation");
fake.messages = [...fake.messages, { createdAt: 600, id: "sent" }];
await render({});
},
@@ -1085,3 +1085,200 @@ test("reader input at the floor resumes following live messages", async () => {
assert.deepEqual(held.settles, ["settle"]);
await act(async () => held.root.unmount());
});
// A failed send may add no row, so its cancel must drop the one-shot and the
// pending send. The next tail is then someone else's arrival and must not pull
// a reader who left the floor, while a later send still pins.
test("a cancelled own send leaves the next tail with the reader", async () => {
globalThis.ResizeObserver = class {
disconnect() {}
observe() {}
};
const scroller = document.createElement("div");
scroller.querySelector = () => null;
const settles = [];
const fake = {
content: { current: null },
messages: [{ createdAt: 500, id: "latest" }],
scrollToBottom: () => settles.push("jump"),
scrollToMessage: () => true,
scroller: { current: scroller },
settleAtBottom: () => settles.push("settle"),
};
let state = null;
const root = createRoot(document.createElement("div"));
const render = () =>
act(async () =>
root.render(
React.createElement(TargetHoldHarness, {
fake,
onState: (next) => {
state = next;
},
}),
),
);
await render();
// Let the mount's settling frame run, or its pin lands after the clear.
await act(async () => new Promise((resolve) => setTimeout(resolve, 0)));
await act(async () => state.onVirtualizerAtBottomStateChange(true));
settles.length = 0; // the mount's own bottom pins
state.scrollToBottomOnNextUpdate("conversation");
assert.equal(state.isOwnSendPending(), true);
state.cancelScrollToBottomOnNextUpdate();
assert.equal(state.isOwnSendPending(), false);
await act(async () => state.onVirtualizerAtBottomStateChange(false));
fake.messages = [...fake.messages, { createdAt: 600, id: "live" }];
await render();
assert.deepEqual(settles, [], "the arrival does not move the reader");
assert.equal(state.isAtBottom, false);
state.scrollToBottomOnNextUpdate("conversation");
fake.messages = [...fake.messages, { createdAt: 700, id: "sent" }];
await render();
assert.deepEqual(settles, ["jump"], "a later send still pins");
assert.equal(state.isOwnSendPending(), false);
await act(async () => root.unmount());
});
// MessageTimeline's cancel of a failed send freezes the tail only when both
// gates read through: the send is still pending (its row never landed, so the
// hold may have skipped a freeze), and the virtualizer last reported the reader
// off the floor. An arm for a channel this hook doesn't show is refused, as a
// send that settles after a channel switch would make one.
const OWN_SEND_STEPS = {
"send here": ({ armed, state }) =>
armed.push(state().scrollToBottomOnNextUpdate("conversation")),
"send to other": ({ armed, state }) =>
armed.push(state().scrollToBottomOnNextUpdate("other")),
"row as tail": ({ fake, render }) => {
fake.messages = [...fake.messages, { createdAt: 600, id: "sent" }];
return render();
},
"row above tail": ({ fake, render }) => {
const [first, ...rest] = fake.messages;
fake.messages = [first, { createdAt: 400, id: "sent" }, ...rest];
return render();
},
"channel change": ({ render }) => render({ channelId: "other" }),
floor: ({ state }) =>
act(async () => state().onVirtualizerAtBottomStateChange(true)),
"off floor": ({ state }) =>
act(async () => state().onVirtualizerAtBottomStateChange(false)),
};
const OWN_SEND_GATES = [
["nothing sent", [], { armed: [], atBottom: true, pending: false }],
[
"a send whose row has not landed",
["send here"],
{ armed: [true], atBottom: true, pending: true },
],
[
"a send whose row landed as the tail",
["send here", "row as tail"],
{ armed: [true], atBottom: true, pending: false },
],
[
"a send whose row landed above the tail",
["send here", "row above tail"],
{ armed: [true], atBottom: true, pending: false },
],
[
"a send to another channel",
["send to other"],
{ armed: [false], atBottom: true, pending: false },
],
[
"a send, then a channel change",
["send here", "channel change"],
{ armed: [true], atBottom: true, pending: false },
],
[
"a channel change, then a send there",
["channel change", "send to other"],
{ armed: [true], atBottom: true, pending: true },
],
[
"the reader off the floor",
["floor", "off floor"],
{ armed: [], atBottom: false, pending: false },
],
[
"the reader back at the floor",
["floor", "off floor", "floor"],
{ armed: [], atBottom: true, pending: false },
],
[
"a channel change off the floor",
["floor", "off floor", "channel change"],
{ armed: [], atBottom: true, pending: false },
],
[
"a pending send with the reader off the floor",
["floor", "send here", "off floor"],
{ armed: [true], atBottom: false, pending: true },
],
];
for (const [name, steps, expected] of OWN_SEND_GATES) {
test(`own-send gates: ${name}`, async () => {
globalThis.ResizeObserver = class {
disconnect() {}
observe() {}
};
const scroller = document.createElement("div");
scroller.querySelector = () => null;
const fake = {
content: { current: null },
messages: [
{ createdAt: 100, id: "first" },
{ createdAt: 500, id: "latest" },
],
scrollToBottom: () => {},
scrollToMessage: () => true,
scroller: { current: scroller },
settleAtBottom: () => {},
};
let state = null;
let props = {};
const root = createRoot(document.createElement("div"));
const render = (next = {}) => {
props = { ...props, ...next };
return act(async () =>
root.render(
React.createElement(TargetHoldHarness, {
fake,
onState: (current) => {
state = current;
},
...props,
}),
),
);
};
await render();
const results = [];
for (const step of steps) {
await OWN_SEND_STEPS[step]({
armed: results,
fake,
render,
state: () => state,
});
}
assert.deepEqual(
{
armed: results,
atBottom: state.isVirtualizerAtBottom(),
pending: state.isOwnSendPending(),
},
expected,
);
await act(async () => root.unmount());
});
}

57
desktop/src/features/messages/ui/useAnchoredScroll.ts
View File

@@ -86,8 +86,18 @@ type UseAnchoredScrollResult = {
* the hook handled the settlement, including a preserved pinned target. */
settleAtBottomAfterLayout: () => boolean;
/** Arm a one-shot scroll-to-bottom that fires on the next appended message
* (used by the composer's send flow). */
scrollToBottomOnNextUpdate: () => void;
* (used by the composer's send flow), for a send to `sendChannelId`.
* Returns false without arming when this timeline shows another channel. */
scrollToBottomOnNextUpdate: (sendChannelId: string) => boolean;
/** True from that arming until the first append lands, whether or not the
* append moves the tail and fires the one-shot. */
isOwnSendPending: () => boolean;
/** The virtualizer's last bottom report, cleared early by a target jump or
* a live row under a held target, and reset by a channel change. */
isVirtualizerAtBottom: () => boolean;
/** Disarm that one-shot and the pending send without moving the view, for
* a send that failed. */
cancelScrollToBottomOnNextUpdate: () => void;
/** Imperative: scroll a specific message into view; optionally pulse it.
* Returns true if the row was found and scrolled, false otherwise. */
scrollToMessage: (
@@ -250,6 +260,15 @@ export function useAnchoredScroll({
// appends, we snap to bottom even if they had scrolled up to read history.
// Consumed (and cleared) by the next append in the restoration effect.
const forceBottomOnNextAppendRef = React.useRef(false);
// Set with the one-shot, but any append clears it, including one that sorts
// above the current tail (a sender whose clock runs ahead, a same-second
// row) and so leaves the one-shot armed for a later tail. MessageTimeline
// holds its tail open only while this is set.
const ownSendPendingRef = React.useRef(false);
// The channel the state above belongs to, updated when the reset below
// runs. A send can settle after a channel switch, and its arm must not land
// on the channel shown now.
const channelIdRef = React.useRef(channelId);
// True from a programmatic bottom pin until the list's row measurement settles
// and the view reaches a true physical bottom. During this window `onScroll`
// ignores transient gaps and keeps chasing the floor. A `ref`, not state — the
@@ -271,8 +290,8 @@ export function useAnchoredScroll({
// Reset everything when the channel changes — the layout effect that runs
// immediately after this reset is responsible for either jumping to bottom
// or to the target message for the new channel.
// biome-ignore lint/correctness/useExhaustiveDependencies: channelId is intentionally the sole trigger — we want this effect to fire exactly when the channel changes (and on mount).
React.useLayoutEffect(() => {
channelIdRef.current = channelId;
anchorRef.current = { kind: "at-bottom" };
virtualizerAtBottomRef.current = true;
targetHoldRef.current = false;
@@ -286,6 +305,7 @@ export function useAnchoredScroll({
prevMessagesRef.current = [];
handledTargetIdRef.current = null;
forceBottomOnNextAppendRef.current = false;
ownSendPendingRef.current = false;
settlingRef.current = false;
programmaticScrollTopRef.current = null;
isWritingScrollRef.current = false;
@@ -442,8 +462,28 @@ export function useAnchoredScroll({
// Arm a one-shot: the next append snaps to bottom regardless of where the
// user is. The consumer calls this right before sending so their own
// outbound message pulls the view down even if they'd scrolled up.
const scrollToBottomOnNextUpdate = React.useCallback(() => {
forceBottomOnNextAppendRef.current = true;
const scrollToBottomOnNextUpdate = React.useCallback(
(sendChannelId: string) => {
if (sendChannelId !== channelIdRef.current) return false;
forceBottomOnNextAppendRef.current = true;
ownSendPendingRef.current = true;
return true;
},
[],
);
const isOwnSendPending = React.useCallback(
() => ownSendPendingRef.current,
[],
);
const isVirtualizerAtBottom = React.useCallback(
() => virtualizerAtBottomRef.current,
[],
);
// A send that fails may never add a row here, so nothing else would clear
// these.
const cancelScrollToBottomOnNextUpdate = React.useCallback(() => {
forceBottomOnNextAppendRef.current = false;
ownSendPendingRef.current = false;
}, []);
const settleAtBottomAfterLayout = React.useCallback(() => {
@@ -733,6 +773,10 @@ export function useAnchoredScroll({
previous: prevMessages,
});
const isPrepend = messageDelta === "prepend";
// The first append ends a pending send, wherever its row sorts.
if (newLatestArrived || messageDelta === "append") {
ownSendPendingRef.current = false;
}
// One-shot: an outbound send armed `scrollToBottomOnNextUpdate`. When the
// resulting append lands, snap to bottom regardless of the current anchor,
@@ -1059,6 +1103,9 @@ export function useAnchoredScroll({
scrollToBottom: scrollToBottomImperative,
settleAtBottomAfterLayout,
scrollToBottomOnNextUpdate,
isOwnSendPending,
isVirtualizerAtBottom,
cancelScrollToBottomOnNextUpdate,
scrollToMessage: scrollToMessageImperative,
onVirtualizerAtBottomStateChange,
};