{open && body}
{open && loadState === 'ready' && !trace.previewComplete && (
@@ -121,8 +124,9 @@ function TimelineThought({ label, thought, chatId }) {
)
}
-function SingleActivity({ entry, chatId, live }) {
+function SingleActivity({ entry, chatId, live, surfaceKey }) {
const { item, idx } = entry
+ const blockKey = assistantBlockKey(item, idx)
if (item.type === 'thinking') {
return (
)
}
@@ -138,15 +143,26 @@ function SingleActivity({ entry, chatId, live }) {
&& Object.keys(item.subagent).length > 0
return (
<>
-
+
{hasHelpers &&
}
)
}
-function GroupedActivityStretch({ entries, chatId, live = false }) {
- const [userOpen, setUserOpen] = useState(false)
+function GroupedActivityStretch({ entries, chatId, live = false, surfaceKey }) {
+ const stretchKey = assistantBlockKey(entries[0]?.item, entries[0]?.idx)
+ const [userOpen, setUserOpen] = useDisclosureState(
+ chatId,
+ `${surfaceKey}:activity:${stretchKey}`,
+ )
const headerRef = useRef(null)
+ const timelineRef = useRef(null)
const timelineId = useId()
const lastItem = entries[entries.length - 1]?.item
@@ -262,7 +278,7 @@ function GroupedActivityStretch({ entries, chatId, live = false }) {
// no forced-open state for a tap to fight, so the user can peek into a
// live run and close it again.
onToggle={() => {
- preserveTogglePosition(headerRef.current)
+ preserveTogglePosition(headerRef.current, timelineRef.current)
setUserOpen(o => !o)
}}
// A delegating turn's helper rollup ("2 running · 1 done"); the header
@@ -279,7 +295,7 @@ function GroupedActivityStretch({ entries, chatId, live = false }) {
subagent={tool.subagent}
/>
))}
-
+
{open && entries.map(({ item, idx }) => {
if (item.type === 'thinking') {
const key = assistantBlockKey(item, idx)
@@ -289,13 +305,19 @@ function GroupedActivityStretch({ entries, chatId, live = false }) {
label={thoughtDurationLabel(item.duration_ms)}
thought={item}
chatId={chatId}
+ disclosureKey={`${surfaceKey}:thought:${key}`}
/>
)
}
// chatId + the block's tool_use_id let ToolBlock lazily fetch a
// truncated large output on expand (GET /tool-output/{tool_use_id}).
return (
-
@@ -303,9 +325,23 @@ function GroupedActivityStretch({ entries, chatId, live = false }) {
)
}
-export default function ActivityStretch({ entries, chatId, live = false }) {
+export default function ActivityStretch({ entries, chatId, live = false, surfaceKey }) {
if (entries.length === 1) {
- return
+ return (
+
+ )
}
- return
+ return (
+
+ )
}
diff --git a/frontend/src/components/ChatView/ChatView.css b/frontend/src/components/ChatView/ChatView.css
index 7c44f21a..707fe62c 100644
--- a/frontend/src/components/ChatView/ChatView.css
+++ b/frontend/src/components/ChatView/ChatView.css
@@ -754,6 +754,31 @@
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-light)); /* CONTRACT: 1px line mixing accent with hairline */
}
+/* A lone activity is already one disclosure row; putting a card boundary
+ around it adds hierarchy without information and makes a single command
+ look heavier than the surrounding answer. Multi-step children keep their
+ timeline rail, while the one-step surface stays the same quiet line used by
+ the collapsed activity summary. Its expanded detail remains available. */
+.chat__tool--compact.chat__tool--running,
+.chat__tool--compact.chat__tool--done {
+ background: none;
+ border: 0;
+ border-radius: 0;
+}
+
+.chat__tool--compact .chat__tool-header {
+ padding-inline: 0;
+}
+
+.chat__tool--compact .chat__tool-detail {
+ margin-block-start: var(--activity-row-gap, 4px);
+ margin-inline-start: 20px;
+ padding: 8px 10px 10px;
+ border: 1px solid var(--border-light);
+ border-radius: 10px;
+ background: var(--surface);
+}
+
/* The header is a real
when there's detail to disclose (keyboard
operable) and a static div otherwise; the button resets below keep both
looking identical to the old clickable div. */
@@ -994,23 +1019,16 @@
flex-wrap: wrap;
width: 100%;
max-width: 100%;
- gap: 5px 8px;
+ gap: 5px;
padding: 2px 8px;
}
-.chat__sources-label {
- padding-top: 7px;
- color: var(--muted); /* CONTRACT: lower emphasis section label */
- font-size: 12.5px;
- font-weight: 600;
-}
-
.chat__sources-list {
display: flex;
box-sizing: border-box;
min-width: 0;
max-width: 100%;
- flex: 1 1 220px;
+ flex: 1 1 auto;
flex-wrap: wrap;
gap: 5px;
margin: 0;
diff --git a/frontend/src/components/ChatView/ChatView.jsx b/frontend/src/components/ChatView/ChatView.jsx
index b1689ac8..a0bc539c 100644
--- a/frontend/src/components/ChatView/ChatView.jsx
+++ b/frontend/src/components/ChatView/ChatView.jsx
@@ -831,6 +831,7 @@ export default function ChatView({
closePreSendGestureWindow,
freezeChatExit,
freezeForegroundReturn,
+ freezeQuestionSubmission,
freezeQueuedSubmission,
revealConversationTail,
reapplyActiveMode,
@@ -842,6 +843,7 @@ export default function ChatView({
scrollRef,
spacerRef,
lastUserMsgRef,
+ syncComposerGeometry: measureComposerHeight,
messages,
messagesRef,
pendingMessagesLength: pendingQueue.pendingMessages.length,
@@ -2485,6 +2487,12 @@ export default function ChatView({
sendSilentInFlightRef.current = false
return false
}
+ // A question-card answer resumes the SAME assistant row. Freeze the
+ // currently visible message and its exact viewport offset synchronously,
+ // before QuestionCard's pending state commits or the POST can resume live
+ // output. Staying in FOLLOW_BOTTOM here caused the card-to-stream handoff
+ // to drag the screen upward after Submit.
+ if (resolvedAnswers) freezeQuestionSubmission()
// Block a simultaneous composer send synchronously, but do not paint the
// whole chat as a new active turn until the answer POST commits. On a
// parked/durable question that premature parent transition swaps the
@@ -2495,10 +2503,10 @@ export default function ChatView({
sendingRef.current = true
promotedRef.current = false
// Hidden answer is a continuation, NOT a new visible send. The
- // user may be reading somewhere else; don't yank them with a
- // PIN. The agent's response builds into the existing assistant
- // message; if the user was at FOLLOW_BOTTOM they'll see it
- // forming, if ANCHOR_AT they stay where they are.
+ // user may be reading somewhere else; don't yank them with a PIN.
+ // freezeQuestionSubmission above already converted the exact visible
+ // position into ANCHOR_AT, so resumed output grows inside the existing
+ // assistant row without creating tail-follow intent.
try {
// Mint a cid for symmetry so the persisted hidden row carries a stable
// identity for reload dedup. It is inert here — a hidden answer send
@@ -2566,6 +2574,8 @@ export default function ChatView({
// synchronous ref even when React state was already false; otherwise a
// failed answer silently blocks every later composer send. A question
// submitted while a live turn is parked keeps that live turn attached.
+ // Deliberately keep the reader anchor: the failed card remains the retry
+ // target, and an error-label reflow must not recreate live following.
sendingRef.current = wasSending
setSending(wasSending)
setServerRunningState(wasServerRunning)
@@ -2586,7 +2596,7 @@ export default function ChatView({
} finally {
sendSilentInFlightRef.current = false
}
- }, [streamSend, commitMessages, fetchMessages])
+ }, [streamSend, commitMessages, fetchMessages, freezeQuestionSubmission])
function handleSubmit(e) {
e.preventDefault()
@@ -3768,6 +3778,7 @@ export default function ChatView({
- Sources
+
{sources.map(source => {
const label = sourceLabel(source)
diff --git a/frontend/src/components/ChatView/MsgContent.jsx b/frontend/src/components/ChatView/MsgContent.jsx
index 99ca43d3..4b11c608 100644
--- a/frontend/src/components/ChatView/MsgContent.jsx
+++ b/frontend/src/components/ChatView/MsgContent.jsx
@@ -33,6 +33,7 @@ function blockAnswerable(block, { msg, isLastMsg, liveQuestionId, onQuestionAnsw
function MsgContentInner({
msg,
chatId,
+ messageKey,
onQuestionAnswer,
// Resume a turn paused by a drain-gated restart (or interrupted by a crash):
// a stable send callback that re-sends a short "continue". Only the tail
@@ -278,7 +279,12 @@ function MsgContentInner({
key={assistantBlockKey(node.group[0].item, node.group[0].idx)}
className="chat__tools"
>
-
)
}
@@ -287,7 +293,9 @@ function MsgContentInner({
{/* The turn's web sources, collected from its tool blocks and shown
once after the answer. Renders nothing when the turn did no web
search, so an ordinary reply is unchanged. */}
- {msg.role === 'assistant' &&
}
+ {msg.role === 'assistant' && !isStreaming && (
+
+ )}
)
}
@@ -333,6 +341,7 @@ export default memo(MsgContentInner, (prev, next) => {
return (
prev.msg === next.msg
&& prev.chatId === next.chatId
+ && prev.messageKey === next.messageKey
&& prev.onQuestionAnswer === next.onQuestionAnswer
&& prev.onResume === next.onResume
&& prev.onInternalNav === next.onInternalNav
diff --git a/frontend/src/components/ChatView/StreamingMessage.jsx b/frontend/src/components/ChatView/StreamingMessage.jsx
index 394f869c..2324d92f 100644
--- a/frontend/src/components/ChatView/StreamingMessage.jsx
+++ b/frontend/src/components/ChatView/StreamingMessage.jsx
@@ -33,6 +33,7 @@ export default function StreamingMessage({
{hasDetail ? (
// A real so the disclosure is keyboard-operable (the old
@@ -337,7 +340,7 @@ export default function ToolBlock({ t, chatId }) {
type="button"
className="chat__tool-header"
onClick={() => {
- preserveTogglePosition(headerRef.current)
+ preserveTogglePosition(headerRef.current, detailRef.current)
setOpen(o => !o)
}}
aria-expanded={open}
@@ -354,6 +357,7 @@ export default function ToolBlock({ t, chatId }) {
)}
{hasDetail && (
{
const source = read('../MessageSources.jsx')
+ const msgContent = read('../MsgContent.jsx')
const css = read('../ChatView.css')
- assert.match(source, /
/)
+ assert.doesNotMatch(source, />Sources/)
+ assert.match(msgContent,
+ /msg\.role === 'assistant' && !isStreaming && \(\s*/)
assert.match(source, /aria-label=\{`\$\{label\}.*opens in a new tab/)
assert.match(source, /className="chat__source-icon" aria-hidden="true"/)
diff --git a/frontend/src/components/ChatView/__tests__/activityLineStructure.test.js b/frontend/src/components/ChatView/__tests__/activityLineStructure.test.js
index 2254087b..051ec973 100644
--- a/frontend/src/components/ChatView/__tests__/activityLineStructure.test.js
+++ b/frontend/src/components/ChatView/__tests__/activityLineStructure.test.js
@@ -57,8 +57,8 @@ test('every thinking entry remains the same collapsed nested disclosure', () =>
'thinking is an activity type, not an empty icon column')
assert.match(activityStretch, /function TimelineThought/,
'a mixed thought owns its disclosure state')
- assert.match(activityStretch, /const \[open, setOpen\] = useState\(false\)/,
- 'nested thinking starts collapsed')
+ assert.match(activityStretch, /const \[open, setOpen\] = useDisclosureState\(chatId, disclosureKey\)/,
+ 'nested thinking restores its per-chat disclosure state')
assert.match(activityStretch, /className="chat__activity-think-toggle"/)
assert.doesNotMatch(activityStretch, /chat__activity-think-chevron/,
'nested reasoning uses its icon and row affordance without a chevron')
@@ -72,7 +72,7 @@ test('every thinking entry remains the same collapsed nested disclosure', () =>
'deferred thought state changes should be announced')
assert.match(activityStretch, /className="chat__lazy-retry" onClick=\{trace\.retry\}/,
'a failed thought should retry without a close/reopen ritual')
- assert.match(activityStretch, /preserveTogglePosition\(headerRef\.current\)\s*setOpen\(o => !o\)/,
+ assert.match(activityStretch, /preserveTogglePosition\(headerRef\.current, bodyRef\.current\)\s*setOpen\(o => !o\)/,
'opening a long trace preserves the reader anchor')
assert.doesNotMatch(activityStretch, /if \(thinkingOnly\) \{/,
'a thinking-only entry must not swap component type when the first tool arrives')
@@ -82,10 +82,10 @@ test('every thinking entry remains the same collapsed nested disclosure', () =>
test('a single activity discloses directly without a redundant parent row', () => {
assert.match(activityStretch, /if \(entries\.length === 1\)/)
- assert.match(activityStretch, /return {
diff --git a/frontend/src/components/ChatView/__tests__/activityNoAutoOpen.test.js b/frontend/src/components/ChatView/__tests__/activityNoAutoOpen.test.js
index e576b429..fe2f29ed 100644
--- a/frontend/src/components/ChatView/__tests__/activityNoAutoOpen.test.js
+++ b/frontend/src/components/ChatView/__tests__/activityNoAutoOpen.test.js
@@ -17,9 +17,9 @@ const src = readFileSync(new URL('../ActivityStretch.jsx', import.meta.url), 'ut
// removed, and that history must not trip the code-level guard below.
const body = src.slice(src.indexOf('function GroupedActivityStretch'))
-test('the stretch starts collapsed and open is exactly userOpen', () => {
- assert.match(body, /const \[userOpen, setUserOpen\] = useState\(false\)/,
- 'userOpen initializes to false (collapsed by default)')
+test('the stretch restores saved user state and open is exactly userOpen', () => {
+ assert.match(body, /const \[userOpen, setUserOpen\] = useDisclosureState\(/,
+ 'userOpen restores only the user-authored per-chat state')
assert.match(body, /\n\s*const open = userOpen\n/,
'open derives from userOpen alone — no force-open expression')
// No `open = running || userOpen` / `userOpen || live` style force-open.
@@ -34,7 +34,7 @@ test('the only open-state write is the user toggle, guarded by preserveTogglePos
'setUserOpen is called from exactly one place')
// preserveTogglePosition runs BEFORE the state mutation on every toggle path —
// the scroll anchor is captured before the height changes.
- assert.match(src, /preserveTogglePosition\(headerRef\.current\)\s*setUserOpen\(o => !o\)/,
+ assert.match(src, /preserveTogglePosition\(headerRef\.current, timelineRef\.current\)\s*setUserOpen\(o => !o\)/,
'the toggle preserves the anchor before flipping open state')
})
diff --git a/frontend/src/components/ChatView/__tests__/chatContract.test.js b/frontend/src/components/ChatView/__tests__/chatContract.test.js
index 7bc0e4e4..f93b27ce 100644
--- a/frontend/src/components/ChatView/__tests__/chatContract.test.js
+++ b/frontend/src/components/ChatView/__tests__/chatContract.test.js
@@ -67,6 +67,19 @@ test('ChatView only consumes methods returned by the scroll controller', () => {
`ChatView consumes missing useScrollMode members: ${missing.join(', ')}`)
})
+test('owner contract freezes question answers without changing active-row ownership', () => {
+ const architecture = readFileSync(
+ new URL('../../../../../ARCHITECTURE.md', import.meta.url),
+ 'utf8',
+ )
+ assert.match(architecture, /Owner-authoritative contract — v1\.6 \(2026-07-22\)/)
+ assert.match(
+ architecture,
+ /In-process question is answered \| any \| `ANCHOR_AT` on current visible row; same active assistant row/,
+ 'question submission must freeze the reader while preserving the R6 row',
+ )
+})
+
test('a retained chat crosses the old unmount lifecycle while hidden', () => {
const chatView = readFileSync(new URL('../ChatView.jsx', import.meta.url), 'utf8')
assert.match(
diff --git a/frontend/src/components/ChatView/__tests__/disclosureState.test.js b/frontend/src/components/ChatView/__tests__/disclosureState.test.js
new file mode 100644
index 00000000..6038f400
--- /dev/null
+++ b/frontend/src/components/ChatView/__tests__/disclosureState.test.js
@@ -0,0 +1,40 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+
+import {
+ _resetDisclosureStateForTests,
+ disclosureIsOpen,
+ persistDisclosureOpen,
+} from '../disclosureState.js'
+
+function memorySessionStorage() {
+ const values = new Map()
+ return {
+ getItem: key => values.get(key) ?? null,
+ setItem: (key, value) => values.set(key, String(value)),
+ }
+}
+
+test('disclosure screen state restores per chat and stable surface key', () => {
+ const original = globalThis.sessionStorage
+ globalThis.sessionStorage = memorySessionStorage()
+ _resetDisclosureStateForTests()
+ try {
+ persistDisclosureOpen('chat-a', 'message-1:activity:think-1', true)
+ assert.equal(disclosureIsOpen('chat-a', 'message-1:activity:think-1'), true)
+ assert.equal(disclosureIsOpen('chat-a', 'message-2:activity:think-1'), false)
+ assert.equal(disclosureIsOpen('chat-b', 'message-1:activity:think-1'), false)
+
+ // Simulate a ChatView remount by dropping the module's memory cache. The
+ // browser-session copy remains the restoration authority.
+ _resetDisclosureStateForTests()
+ assert.equal(disclosureIsOpen('chat-a', 'message-1:activity:think-1'), true)
+
+ persistDisclosureOpen('chat-a', 'message-1:activity:think-1', false)
+ _resetDisclosureStateForTests()
+ assert.equal(disclosureIsOpen('chat-a', 'message-1:activity:think-1'), false)
+ } finally {
+ _resetDisclosureStateForTests()
+ globalThis.sessionStorage = original
+ }
+})
diff --git a/frontend/src/components/ChatView/__tests__/preserveTogglePosition.test.js b/frontend/src/components/ChatView/__tests__/preserveTogglePosition.test.js
index 5bec926b..ab1ba3ea 100644
--- a/frontend/src/components/ChatView/__tests__/preserveTogglePosition.test.js
+++ b/frontend/src/components/ChatView/__tests__/preserveTogglePosition.test.js
@@ -26,19 +26,22 @@ test('toggle position is corrected from the DOM mutation before rAF', () => {
}
try {
- const parentElement = {}
+ const body = {}
const scroller = { scrollTop: 40 }
let top = 120
const anchor = {
- parentElement,
+ parentElement: {},
+ nextElementSibling: body,
closest: () => scroller,
getBoundingClientRect: () => ({ top }),
}
preserveTogglePosition(anchor)
- assert.equal(observedNode, parentElement)
- assert.deepEqual(observedOptions, { childList: true },
- 'live descendant churn must not win the disclosure mutation race')
+ assert.equal(observedNode, body)
+ assert.deepEqual(observedOptions, {
+ attributes: true,
+ attributeFilter: ['hidden'],
+ }, 'the body visibility commit must be the exact correction boundary')
top = 155
mutationCallback()
@@ -86,6 +89,41 @@ test('rAF remains a fallback when MutationObserver is unavailable', () => {
}
})
+test('FOLLOW_BOTTOM leaves toggle movement entirely to the scroll controller', () => {
+ const originalMutationObserver = globalThis.MutationObserver
+ const originalRaf = globalThis.requestAnimationFrame
+ let observed = false
+ let scheduled = false
+ globalThis.MutationObserver = class {
+ constructor() {}
+ observe() { observed = true }
+ disconnect() {}
+ }
+ globalThis.requestAnimationFrame = () => {
+ scheduled = true
+ return 1
+ }
+
+ try {
+ const scroller = {
+ dataset: { scrollMode: 'FOLLOW_BOTTOM' },
+ scrollTop: 30,
+ querySelector: () => ({ style: {}, offsetHeight: 10 }),
+ }
+ const anchor = {
+ closest: () => scroller,
+ getBoundingClientRect: () => ({ top: 80 }),
+ }
+ preserveTogglePosition(anchor, {})
+ assert.equal(observed, false)
+ assert.equal(scheduled, false)
+ assert.equal(scroller.scrollTop, 30)
+ } finally {
+ globalThis.MutationObserver = originalMutationObserver
+ globalThis.requestAnimationFrame = originalRaf
+ }
+})
+
test('closing a disclosure primes the bottom spacer before React removes its body', () => {
const originalMutationObserver = globalThis.MutationObserver
const originalRaf = globalThis.requestAnimationFrame
diff --git a/frontend/src/components/ChatView/__tests__/questionCardState.test.js b/frontend/src/components/ChatView/__tests__/questionCardState.test.js
index 883cfe23..c6923d7c 100644
--- a/frontend/src/components/ChatView/__tests__/questionCardState.test.js
+++ b/frontend/src/components/ChatView/__tests__/questionCardState.test.js
@@ -75,3 +75,14 @@ test('question submission paints a resumed turn only after the POST commits', ()
assert.match(silentSubmit, /setServerRunningState\(wasServerRunning\)/,
'a failed answer must restore the prior durable running verdict')
})
+
+test('question submission freezes the visible anchor before the async handoff', () => {
+ const start = chatView.indexOf('const doSendSilent = useCallback')
+ const end = chatView.indexOf('function handleSubmit(e)', start)
+ const silentSubmit = chatView.slice(start, end)
+ const freeze = silentSubmit.indexOf('freezeQuestionSubmission()')
+ const send = silentSubmit.indexOf('const response = await streamSend')
+
+ assert.ok(freeze >= 0 && send > freeze,
+ 'the reader anchor must freeze synchronously before answer delivery resumes output')
+})
diff --git a/frontend/src/components/ChatView/__tests__/sendLandingGeometry.test.js b/frontend/src/components/ChatView/__tests__/sendLandingGeometry.test.js
new file mode 100644
index 00000000..5d1f1c1c
--- /dev/null
+++ b/frontend/src/components/ChatView/__tests__/sendLandingGeometry.test.js
@@ -0,0 +1,32 @@
+/* Regression contract for the one-pass send landing: the scroll controller
+ * must publish the committed composer height before it measures the dynamic
+ * reservation. Otherwise the foot's post-paint ResizeObserver can clamp a new
+ * pin and produce the visible "up, pause, tiny bit further up" correction. */
+
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+
+const controller = readFileSync(new URL('../useScrollMode.js', import.meta.url), 'utf8')
+const chatView = readFileSync(new URL('../ChatView.jsx', import.meta.url), 'utf8')
+
+test('send landing synchronizes composer geometry before reservation math', () => {
+ const sizeStart = controller.indexOf('function sizeSpacer()')
+ const sizeEnd = controller.indexOf('\n function maybeApplyMode()', sizeStart)
+ assert.ok(sizeStart >= 0 && sizeEnd > sizeStart, 'sizeSpacer block exists')
+
+ const sizeSpacer = controller.slice(sizeStart, sizeEnd)
+ const sync = sizeSpacer.indexOf('syncComposerGeometry?.()')
+ const measure = sizeSpacer.indexOf('_computeSpacerH(')
+ assert.ok(sync >= 0, 'sizeSpacer synchronizes the committed composer height')
+ assert.ok(measure > sync,
+ 'composer height must be published before list/spacer geometry is measured')
+})
+
+test('ChatView gives its existing composer measurement to the scroll owner', () => {
+ const callStart = chatView.indexOf('} = useScrollMode({')
+ const callEnd = chatView.indexOf('\n })', callStart)
+ assert.ok(callStart >= 0 && callEnd > callStart, 'useScrollMode call exists')
+ const args = chatView.slice(callStart, callEnd)
+ assert.match(args, /syncComposerGeometry:\s*measureComposerHeight/)
+})
diff --git a/frontend/src/components/ChatView/__tests__/streamReducers.test.js b/frontend/src/components/ChatView/__tests__/streamReducers.test.js
index 9af5cc98..0542a46d 100644
--- a/frontend/src/components/ChatView/__tests__/streamReducers.test.js
+++ b/frontend/src/components/ChatView/__tests__/streamReducers.test.js
@@ -711,6 +711,26 @@ test('reconcile never moves a live thinking clock backwards', () => {
assert.equal(result[0].startedAt, 1_000)
})
+test('reconcile never advances a completed non-trailing thinking clock', () => {
+ const thought = {
+ type: 'thinking', content: 'plan', startedAt: 1_000,
+ firstTs: 10_000, lastAt: 20_000, duration_ms: 9_000,
+ }
+ const prev = [thought, { type: 'text', content: 'Done.' }]
+ // Catch-up is assembled incrementally. At its first atomic commit it can
+ // contain only this historical thought even though the visible snapshot
+ // already knows prose follows it. That one-item replay tail is not live.
+ const replay = [{
+ type: 'thinking', content: 'plan', startedAt: 30_000,
+ firstTs: 10_000, lastAt: 30_000, duration_ms: 9_000,
+ }]
+
+ const result = reconcileStreamItems(prev, replay)
+
+ assert.equal(result[0].duration_ms, 9_000,
+ 'later replay wall time cannot be added after prose sealed the thought')
+})
+
test('reconcile matches tools by tool_use_id, not position, and never merges two different tools', () => {
const t1 = { type: 'tool', tool: 'Bash', input: 'ls', output: 'x', status: 'done', tool_use_id: 'toolu_1' }
const prev = [t1]
diff --git a/frontend/src/components/ChatView/__tests__/toolBlockPresentation.test.js b/frontend/src/components/ChatView/__tests__/toolBlockPresentation.test.js
index 55954f05..35495fe5 100644
--- a/frontend/src/components/ChatView/__tests__/toolBlockPresentation.test.js
+++ b/frontend/src/components/ChatView/__tests__/toolBlockPresentation.test.js
@@ -33,3 +33,14 @@ test('tool detail is a third nested level with labeled command and output', () =
assert.match(chatCss, /\.chat__activity-timeline \.chat__tool-detail\s*\{[^}]*margin-inline-start:\s*20px/s,
'output aligns beneath the child label')
})
+
+test('a lone tool activity uses the borderless compact disclosure surface', () => {
+ assert.match(toolBlock, /compact = false/,
+ 'ToolBlock exposes an explicit compact surface instead of styling every tool globally')
+ assert.match(toolBlock, /chat__tool--compact/)
+ assert.match(chatCss,
+ /\.chat__tool--compact\.chat__tool--done\s*\{[^}]*background:\s*none;[^}]*border:\s*0;/s)
+ assert.match(chatCss,
+ /\.chat__tool--compact \.chat__tool-detail\s*\{[^}]*border:\s*1px solid var\(--border-light\);[^}]*background:\s*var\(--surface\);/s,
+ 'expanding the quiet row reveals a nested output panel rather than restoring an outer card')
+})
diff --git a/frontend/src/components/ChatView/__tests__/useScrollMode.test.js b/frontend/src/components/ChatView/__tests__/useScrollMode.test.js
index f8a9c900..f2135812 100644
--- a/frontend/src/components/ChatView/__tests__/useScrollMode.test.js
+++ b/frontend/src/components/ChatView/__tests__/useScrollMode.test.js
@@ -15,7 +15,9 @@ import {
layoutMayOwnScroll,
mountMediaSettled,
modeForChatExit,
+ modeForDisclosureToggle,
modeForForegroundReturn,
+ modeForQuestionSubmission,
modeForQueuedSubmission,
modeForViewportChange,
modeAfterReaderReachesBottom,
@@ -210,6 +212,26 @@ test('disclosure activation is recognized as an anchor-latching reading action',
'a non-interactive status row must not stop live follow')
})
+test('disclosure toggles follow only in FOLLOW_BOTTOM and otherwise hold the reader anchor', () => {
+ const row = {
+ dataset: { key: 'assistant-1' },
+ offsetTop: 420,
+ offsetHeight: 300,
+ }
+ const scrollEl = {
+ scrollTop: 500,
+ querySelectorAll: () => [row],
+ }
+ const follow = { kind: 'FOLLOW_BOTTOM' }
+ assert.equal(modeForDisclosureToggle(scrollEl, follow), follow,
+ 'autoscroll remains the sole authority while following the tail')
+ assert.deepEqual(
+ modeForDisclosureToggle(scrollEl, { kind: 'PIN_USER_MSG', cid: 'c1' }),
+ { kind: 'ANCHOR_AT', key: 'assistant-1', offset: -80 },
+ 'outside autoscroll the visible reading position is frozen before resize',
+ )
+})
+
test('only provably clamped wheel input gets a next-frame no-scroll release', () => {
const middle = {
scrollTop: 500,
@@ -291,6 +313,32 @@ test('queued submission freezes the visible row before footer reflow', () => {
)
})
+test('question submission freezes the visible row before same-turn output resumes', () => {
+ const item = {
+ offsetTop: 720,
+ offsetHeight: 420,
+ dataset: { key: 'assistant-with-question' },
+ }
+ const scrollEl = {
+ scrollHeight: 1800,
+ scrollTop: 660,
+ clientHeight: 600,
+ querySelectorAll(selector) {
+ return selector === '.chat__msg[data-key]' ? [item] : []
+ },
+ }
+ assert.deepEqual(
+ modeForQuestionSubmission(scrollEl, { kind: 'FOLLOW_BOTTOM' }),
+ { kind: 'ANCHOR_AT', key: 'assistant-with-question', offset: 60 },
+ )
+})
+
+test('question submission keeps the current mode when there is no visible row', () => {
+ const current = { kind: 'FOLLOW_BOTTOM' }
+ const scrollEl = { querySelectorAll() { return [] } }
+ assert.equal(modeForQuestionSubmission(scrollEl, current), current)
+})
+
test('queued submission anchors before the active assistant shell that steer will split', () => {
const user = {
offsetTop: 8,
@@ -562,6 +610,17 @@ test('idle reserved bottom is a settled pin and cannot manufacture follow', () =
}), { kind: 'PIN_USER_MSG', cid: 'c-123' })
})
+test('a bottom edge created by anchor reservation keeps the reader anchor', () => {
+ const anchor = { kind: 'ANCHOR_AT', key: 'assistant-question', offset: 60 }
+ assert.equal(modeAfterReaderReachesBottom({
+ mode: anchor,
+ spacerH: 180,
+ anchorReservation: true,
+ turnRunning: true,
+ lastUserCid: 'c-123',
+ }), anchor)
+})
+
test('a short settled pin retires automatic follow but keeps its identity', () => {
const livePin = {
kind: 'PIN_USER_MSG', cid: 'c-123', followWhenFilled: true,
@@ -858,6 +917,48 @@ test('spacer reservation returns zero before there is a user message', () => {
assert.equal(_computeSpacerH(scrollEl, listEl, null, 600), 0)
})
+test('viewport growth keeps a question-answer anchor reachable before output resumes', () => {
+ const anchor = { offsetTop: 1320 }
+ const scrollEl = {
+ clientHeight: 960,
+ querySelector(selector) {
+ return selector === '[data-key="assistant-question"]' ? anchor : null
+ },
+ }
+ const listEl = { offsetHeight: 1500 }
+ const lastUserMsgEl = { offsetTop: 900 }
+ const mode = {
+ kind: 'ANCHOR_AT',
+ key: 'assistant-question',
+ offset: 60,
+ }
+
+ const spacerH = _computeSpacerH(
+ scrollEl, listEl, lastUserMsgEl, 960, mode,
+ )
+ const target = anchor.offsetTop - mode.offset
+ const maxScrollTop = listEl.offsetHeight + spacerH - scrollEl.clientHeight
+
+ assert.equal(maxScrollTop, target,
+ 'the frozen card position is reachable in the first grown-viewport frame')
+})
+
+test('anchor reservation disappears once real content makes the target reachable', () => {
+ const anchor = { offsetTop: 1320 }
+ const scrollEl = {
+ clientHeight: 960,
+ querySelector(selector) {
+ return selector === '[data-key="assistant-question"]' ? anchor : null
+ },
+ }
+ const mode = { kind: 'ANCHOR_AT', key: 'assistant-question', offset: 60 }
+
+ assert.equal(
+ _computeSpacerH(scrollEl, { offsetHeight: 2300 }, { offsetTop: 900 }, 960, mode),
+ 0,
+ )
+})
+
test('queued tray does not shorten spacer reservation', () => {
// `.chat__list` bottom padding already includes the full measured footer
// height (queue tray + composer). Subtracting the tray again makes the
diff --git a/frontend/src/components/ChatView/disclosureState.js b/frontend/src/components/ChatView/disclosureState.js
new file mode 100644
index 00000000..fe4dd8b3
--- /dev/null
+++ b/frontend/src/components/ChatView/disclosureState.js
@@ -0,0 +1,68 @@
+import { useRef, useState } from 'react'
+
+
+// Disclosure state is screen state, not transcript data. Keep it for the
+// browser session so leaving a chat and returning restores the exact activity,
+// thought, and tool rows the reader opened without writing presentation state
+// into the durable conversation.
+const STORAGE_PREFIX = 'chat-disclosures:'
+const MAX_OPEN_DISCLOSURES = 200
+const cache = new Map()
+
+function storageKey(chatId) {
+ return `${STORAGE_PREFIX}${chatId}`
+}
+
+function readOpenKeys(chatId) {
+ const id = String(chatId || '')
+ if (!id) return new Set()
+ if (cache.has(id)) return cache.get(id)
+ let keys = []
+ try {
+ const parsed = JSON.parse(sessionStorage.getItem(storageKey(id)) || '[]')
+ if (Array.isArray(parsed)) keys = parsed.filter(key => typeof key === 'string')
+ } catch {}
+ const openKeys = new Set(keys.slice(-MAX_OPEN_DISCLOSURES))
+ cache.set(id, openKeys)
+ return openKeys
+}
+
+export function persistDisclosureOpen(chatId, disclosureKey, open) {
+ const id = String(chatId || '')
+ const key = String(disclosureKey || '')
+ if (!id || !key) return
+ const openKeys = readOpenKeys(id)
+ // Refresh insertion order when opening so the bounded set retains the most
+ // recently used disclosures in an unusually long tool-heavy chat.
+ openKeys.delete(key)
+ if (open) openKeys.add(key)
+ while (openKeys.size > MAX_OPEN_DISCLOSURES) {
+ openKeys.delete(openKeys.values().next().value)
+ }
+ try {
+ sessionStorage.setItem(storageKey(id), JSON.stringify([...openKeys]))
+ } catch {}
+}
+
+export function disclosureIsOpen(chatId, disclosureKey) {
+ return readOpenKeys(chatId).has(String(disclosureKey || ''))
+}
+
+export function useDisclosureState(chatId, disclosureKey) {
+ const [open, setOpenState] = useState(
+ () => disclosureIsOpen(chatId, disclosureKey),
+ )
+ const openRef = useRef(open)
+ openRef.current = open
+ const setOpen = (next) => {
+ const value = typeof next === 'function' ? !!next(openRef.current) : !!next
+ openRef.current = value
+ persistDisclosureOpen(chatId, disclosureKey, value)
+ setOpenState(value)
+ }
+ return [open, setOpen]
+}
+
+export function _resetDisclosureStateForTests() {
+ cache.clear()
+}
diff --git a/frontend/src/components/ChatView/preserveTogglePosition.js b/frontend/src/components/ChatView/preserveTogglePosition.js
index c497dacf..dcab150e 100644
--- a/frontend/src/components/ChatView/preserveTogglePosition.js
+++ b/frontend/src/components/ChatView/preserveTogglePosition.js
@@ -15,11 +15,18 @@ function unwindProvisionalSpacer(spacer) {
provisionalSpacer.delete(spacer)
}
-export function preserveTogglePosition(anchorEl) {
+export function preserveTogglePosition(anchorEl, bodyEl = anchorEl?.nextElementSibling) {
if (!anchorEl || typeof requestAnimationFrame !== 'function') return
const scroller = anchorEl.closest?.('.chat__scroll')
if (!scroller) return
+ // FOLLOW_BOTTOM is already a complete, idempotent layout policy: the scroll
+ // controller follows the new real-content tail after every ResizeObserver
+ // pass. A second header-local correction would race that authority and make
+ // identical toggles sometimes hold and sometimes move. Outside follow mode,
+ // preserve the reader's exact header position below.
+ if (scroller.dataset?.scrollMode === 'FOLLOW_BOTTOM') return
+
// Closing a disclosure at the physical tail removes height before the chat's
// ResizeObserver can grow its dynamic bottom reservation. The browser clamps
// scrollTop in that gap, paints the header lower for one frame, then the
@@ -31,11 +38,10 @@ export function preserveTogglePosition(anchorEl) {
if (spacer) unwindProvisionalSpacer(spacer)
if (anchorEl.getAttribute?.('aria-expanded') === 'true') {
- const body = anchorEl.nextElementSibling
- if (spacer && body) {
- const rectHeight = body.getBoundingClientRect?.().height || 0
+ if (spacer && bodyEl) {
+ const rectHeight = bodyEl.getBoundingClientRect?.().height || 0
const styles = typeof getComputedStyle === 'function'
- ? getComputedStyle(body)
+ ? getComputedStyle(bodyEl)
: null
const marginTop = Number.parseFloat(styles?.marginTop) || 0
const marginBottom = Number.parseFloat(styles?.marginBottom) || 0
@@ -67,16 +73,17 @@ export function preserveTogglePosition(anchorEl) {
if (Math.abs(delta) > 0.5) scroller.scrollTop += delta
}
- if (typeof MutationObserver === 'function' && anchorEl.parentElement) {
+ if (typeof MutationObserver === 'function' && bodyEl) {
observer = new MutationObserver(settle)
- // The disclosure body is always a DIRECT sibling of the header. Observe
- // only that wrapper's child list: an open live activity stretch keeps
- // changing text, tool status, and timeline children below this level. A
- // subtree observer can therefore settle on unrelated stream churn before
- // React inserts/removes the disclosure body, making the same tap hold on
- // one attempt and drift on the next. Direct-child observation names the
- // actual transition and leaves live descendants out of the race.
- observer.observe(anchorEl.parentElement, { childList: true })
+ // Every disclosure keeps its body node mounted and flips `hidden` while
+ // inserting/removing its rendered children. Watching the header's parent
+ // child list never saw that transition, leaving the rAF fallback to race a
+ // ResizeObserver. The body's own hidden attribute is the exact commit
+ // boundary, independent of live descendant churn.
+ observer.observe(bodyEl, {
+ attributes: true,
+ attributeFilter: ['hidden'],
+ })
}
// Safety fallback for an unusual disclosure that changes layout without a
diff --git a/frontend/src/components/ChatView/streamReducers.js b/frontend/src/components/ChatView/streamReducers.js
index 32988951..c6bfcd39 100644
--- a/frontend/src/components/ChatView/streamReducers.js
+++ b/frontend/src/components/ChatView/streamReducers.js
@@ -651,10 +651,17 @@ export function reconcileStreamItems(prev, next) {
return n
}
}
- if (n.type === 'thinking' && Number.isFinite(n.lastAt)) {
+ if (n.type === 'thinking'
+ && k === next.length - 1
+ && k === prev.length - 1
+ && Number.isFinite(n.lastAt)) {
// A bounded replay may no longer contain the first delta, while the
- // visible/session snapshot still has the older clock anchor. Never let
- // reconciliation move a live timer backwards in that case.
+ // visible/session snapshot still has the older clock anchor. Only the
+ // TRAILING thinking item in BOTH views can still be live. Catch-up can
+ // momentarily contain only the first historical thought while the
+ // visible snapshot already has prose/tools after it; treating that
+ // partial replay tail as live made a completed "Thought for …" counter
+ // grow on every reconnect long after that reasoning pass had ended.
const previousElapsed = thinkingElapsedMs(p, n.lastAt)
const replayElapsed = thinkingElapsedMs(n, n.lastAt)
if (previousElapsed > replayElapsed) {
diff --git a/frontend/src/components/ChatView/useScrollMode.js b/frontend/src/components/ChatView/useScrollMode.js
index 4b65cadf..803811fc 100644
--- a/frontend/src/components/ChatView/useScrollMode.js
+++ b/frontend/src/components/ChatView/useScrollMode.js
@@ -352,7 +352,9 @@ export function _validateSavedMode(saved, messages, scrollEl) {
/** Spacer height needed so the latest user message can sit near the
- * top of the viewport, with the PIN_OFFSET breathing room above it.
+ * top of the viewport, with the PIN_OFFSET breathing room above it. While an
+ * ANCHOR_AT hold is active, also reserve enough room to keep that exact target
+ * reachable if a mobile viewport grows before new response content arrives.
* The spacer's only job is reserving bottom room — it does NOT touch
* scrollTop and it does NOT decide whether a send pins.
*
@@ -370,20 +372,34 @@ export function _validateSavedMode(saved, messages, scrollEl) {
* the pre-cushion behavior; a >0 value re-adds breathing room if the exact
* end-of-scroll rest ever feels cramped.)
*
- * Reservation is intentionally independent from pinning and component
- * lifetime. This function always reserves enough bottom room for the latest
- * visible user message, so leaving/reopening a chat, keyboard open/close, and
- * later manual scrolls never make that message lose its reachable "top of
- * screen" position.
+ * The permanent pin reservation is intentionally independent from pin mode
+ * and component lifetime. The anchor addition exists only while ANCHOR_AT
+ * needs more room than that permanent baseline, and disappears as soon as
+ * real content makes the anchor naturally reachable.
*/
const PIN_OFFSET = 4
const PIN_BOTTOM_ROOM = 0
-export function _computeSpacerH(scrollEl, listEl, lastUserMsgEl, fullViewH) {
+export function _computeSpacerH(
+ scrollEl,
+ listEl,
+ lastUserMsgEl,
+ fullViewH,
+ mode = null,
+) {
if (!scrollEl || !listEl) return 0
- if (!lastUserMsgEl) return 0
const viewH = fullViewH || scrollEl.clientHeight
- const pinTarget = Math.max(0, lastUserMsgEl.offsetTop - PIN_OFFSET)
- return Math.max(0, viewH + pinTarget - listEl.offsetHeight + PIN_BOTTOM_ROOM)
+ const pinTarget = lastUserMsgEl
+ ? Math.max(0, lastUserMsgEl.offsetTop - PIN_OFFSET)
+ : 0
+ let target = pinTarget
+ if (mode?.kind === 'ANCHOR_AT') {
+ const anchorEl = _anchorEl(scrollEl, mode.key)
+ if (anchorEl) {
+ target = Math.max(target, Math.max(0, anchorEl.offsetTop - mode.offset))
+ }
+ }
+ if (!lastUserMsgEl && target === 0) return 0
+ return Math.max(0, viewH + target - listEl.offsetHeight + PIN_BOTTOM_ROOM)
}
@@ -500,9 +516,16 @@ export function modeAfterTerminalLayout(mode, spacerH, layoutStable) {
export function modeAfterReaderReachesBottom({
mode,
spacerH,
+ anchorReservation = false,
turnRunning,
lastUserCid,
}) {
+ // An ANCHOR_AT reservation makes that exact reader-owned position the
+ // physical bottom while the viewport is temporarily taller than the content
+ // beneath it. Reaching this synthetic edge is not a request to reinterpret
+ // the position as the latest-user pin; keep the anchor until real content
+ // makes its target naturally reachable and the extra reservation disappears.
+ if (anchorReservation && mode?.kind === 'ANCHOR_AT') return mode
if (spacerH > 1 && lastUserCid != null) {
if (mode?.kind === 'PIN_USER_MSG'
&& mode.cid === lastUserCid
@@ -560,7 +583,7 @@ export function readerInputActivatesDisclosure(
pointerButton = 0,
) {
const disclosure = target?.closest?.(
- 'button.chat__activity-header, button.chat__tool-header, button.chat__marker-header',
+ 'button.chat__activity-header, button.chat__activity-think-toggle, button.chat__tool-header, button.chat__marker-header',
)
if (!disclosure) return false
return (type === 'pointerdown' && pointerButton === 0)
@@ -617,6 +640,28 @@ export function modeForChatExit(scrollEl) {
}
+/** A disclosure toggle obeys the existing reading mode instead of inventing a
+ * second scroll policy. FOLLOW_BOTTOM stays live and follows the resized tail;
+ * every non-follow mode freezes the exact visible message anchor before the
+ * disclosure changes height. Repeating the same toggle therefore has the same
+ * result until the reader explicitly changes scroll mode. */
+export function modeForDisclosureToggle(scrollEl, currentMode) {
+ if (currentMode?.kind === 'FOLLOW_BOTTOM') return currentMode
+ return anchorModeFromScroll(scrollEl) || currentMode
+}
+
+
+/** Submitting an in-message question answer resumes output inside the same
+ * assistant row and may replace the card's controls immediately. It is not a
+ * request to follow the live tail. Freeze the exact visible row/offset before
+ * that card-to-stream handoff so neither the control reflow nor resumed output
+ * moves the reader. */
+export function modeForQuestionSubmission(scrollEl, currentMode) {
+ if (!scrollEl) return currentMode
+ return anchorModeFromScroll(scrollEl) || currentMode
+}
+
+
/** A queued send changes composer/footer layout but does not add a transcript
* row. Freeze the visible anchor before that reflow; its separately-captured
* submit intent still decides what happens when the row is later promoted. */
@@ -713,6 +758,10 @@ export function mountMediaSettled(scrollEl) {
* The dynamic spacer at the bottom of `.chat__list`.
* @param {React.RefObject} args.lastUserMsgRef
* The most recent visible user message element.
+ * @param {() => void} args.syncComposerGeometry
+ * Publishes the current overlaid composer height before the controller reads
+ * list/spacer geometry. Keeping this in the same pre-paint layout pass stops
+ * a later composer measurement from briefly clamping a newly pinned send.
* @param {Array} args.messages
* Persisted message list (drives effect re-runs).
* @param {React.MutableRefObject>} args.messagesRef
@@ -745,6 +794,7 @@ export function mountMediaSettled(scrollEl) {
* closePreSendGestureWindow: () => void,
* freezeChatExit: () => void,
* freezeForegroundReturn: () => void,
+ * freezeQuestionSubmission: () => void,
* freezeQueuedSubmission: () => void,
* revealConversationTail: () => void,
* settleNonPin: (event?: object) => void,
@@ -756,6 +806,7 @@ export default function useScrollMode({
scrollRef,
spacerRef,
lastUserMsgRef,
+ syncComposerGeometry,
messages,
messagesRef,
pendingMessagesLength,
@@ -874,12 +925,14 @@ export default function useScrollMode({
const previousMode = modeRef.current
if (nextMode === previousMode) return previousMode
modeRef.current = nextMode
+ const scrollEl = scrollRef.current
+ if (scrollEl) scrollEl.dataset.scrollMode = nextMode.kind
recordTrace('transitions', event, {
from: previousMode,
to: nextMode,
})
return nextMode
- }, [recordTrace])
+ }, [recordTrace, scrollRef])
// The sole automatic scrollTop funnel inside the controller. `applyMode`
// remains exported as a pure executor for unit tests, but live code routes
@@ -965,6 +1018,14 @@ export default function useScrollMode({
)
}, [scrollRef, transitionMode])
+ const freezeQuestionSubmission = useCallback(() => {
+ readerLocationExplicitRef.current = true
+ return transitionMode(
+ modeForQuestionSubmission(scrollRef.current, modeRef.current),
+ 'send:question-freeze',
+ )
+ }, [scrollRef, transitionMode])
+
const anchorPagination = useCallback((key, offset) => {
if (!key) return modeRef.current
readerLocationExplicitRef.current = true
@@ -1142,6 +1203,17 @@ export default function useScrollMode({
resumeLayoutAfterGestureRef.current = resumeLayoutAfterGesture
function sizeSpacer() {
+ // The list's bottom padding is derived from the absolutely-positioned
+ // composer height. React commits the emptied composer / new turn footer
+ // in the same render as a sent row, but the foot's ResizeObserver runs
+ // after paint. If spacer math reads the OLD padding first, the later
+ // --composer-h update transiently shortens the scroll range, the browser
+ // clamps the fresh pin, and the next controller pass visibly nudges the
+ // row upward a second time. Publish the committed foot height here,
+ // before ANY list/spacer reads, so reservation + scrollTop land from one
+ // geometry snapshot. Respect reader ownership: the CSS-variable write is
+ // scroll geometry too and must wait with the spacer during a gesture.
+ if (layoutOwnsScroll()) syncComposerGeometry?.()
// Keep fullViewHRef authoritative at EVERY spacer sizing, not just at
// the layout-effect entry and the RO callback start (the other two grow
// sites). The visualViewport keyboard handler reaches sizeSpacer via
@@ -1183,7 +1255,7 @@ export default function useScrollMode({
// exists. Null only when there is genuinely no user message → spacer 0.
const lastUserEl = lastUserMsgRef.current || _lastUserRowEl(scrollEl)
const h = _computeSpacerH(
- scrollEl, listEl, lastUserEl, fullViewHRef.current,
+ scrollEl, listEl, lastUserEl, fullViewHRef.current, modeRef.current,
)
if (!layoutOwnsScroll()) {
// Spacer height is itself scroll geometry: shrinking it can make the
@@ -1493,15 +1565,14 @@ export default function useScrollMode({
scrollEl,
})
if (activatesDisclosure) {
- // A disclosure tap says "hold what I am reading", not "keep following
- // the conversation tail". Latch that intent BEFORE React changes the
- // body height. The normal gesture gate below then defers ResizeObserver
- // writes until pointerup, at which point it replays this anchor rather
- // than the stale FOLLOW_BOTTOM that caused the non-repeatable jump.
- const anchor = anchorModeFromScroll(scrollEl)
- if (anchor) {
+ // A disclosure tap obeys the mode the reader already chose. FOLLOW_BOTTOM
+ // remains the sole tail authority; every other mode latches the visible
+ // anchor BEFORE React changes body height. The gesture gate below defers
+ // ResizeObserver writes until pointerup, then replays that same policy.
+ const nextMode = modeForDisclosureToggle(scrollEl, modeRef.current)
+ if (nextMode && nextMode !== modeRef.current) {
readerLocationExplicitRef.current = true
- transitionMode(anchor, 'reader:disclosure-toggle')
+ transitionMode(nextMode, 'reader:disclosure-toggle')
persistMode()
}
}
@@ -1575,11 +1646,18 @@ export default function useScrollMode({
if (atBottom) {
const spacerH = spacerEl.offsetHeight || 0
- const lastUserCid = _lastUserRowEl(scrollEl)?.dataset?.cid ?? null
+ const lastUserEl = lastUserMsgRef.current || _lastUserRowEl(scrollEl)
+ const lastUserCid = lastUserEl?.dataset?.cid ?? null
+ const pinSpacerH = _computeSpacerH(
+ scrollEl, listEl, lastUserEl, fullViewHRef.current,
+ )
+ const anchorReservation = modeRef.current?.kind === 'ANCHOR_AT'
+ && spacerH > pinSpacerH + 1
transitionMode(
modeAfterReaderReachesBottom({
mode: modeRef.current,
spacerH,
+ anchorReservation,
turnRunning: turnRunningRef.current,
lastUserCid,
}),
@@ -1643,6 +1721,7 @@ export default function useScrollMode({
chatId,
initialEntryCanReveal,
initialEntrySettled,
+ syncComposerGeometry,
])
// Re-hold the reading position after an atomic catch-up commit lands
@@ -1783,6 +1862,7 @@ export default function useScrollMode({
closePreSendGestureWindow,
freezeChatExit,
freezeForegroundReturn,
+ freezeQuestionSubmission,
freezeQueuedSubmission,
revealConversationTail,
reapplyActiveMode,
diff --git a/tests/activity-lazy.spec.mjs b/tests/activity-lazy.spec.mjs
index 13e0eb27..2396eae6 100644
--- a/tests/activity-lazy.spec.mjs
+++ b/tests/activity-lazy.spec.mjs
@@ -383,16 +383,19 @@ test('activity stays nested and lazy, aborts on close, and copies exact tool out
expect(thinkingRequests).toBe(4)
await thoughtToggle.click()
- // Closing the outer stretch unmounts every nested payload; reopening proves
- // both sidecars are still closed and no hidden request is made.
+ // Closing the outer stretch unmounts every nested payload. Reopening restores
+ // each deliberate disclosure state: the thought was closed, while the tool
+ // was open. The restored visible tool starts one fresh bounded preview fetch;
+ // its previously loaded payload was released rather than retained offscreen.
await activityHeader.click()
await expect(activity.locator('.chat__activity-timeline')).toBeHidden()
await activityHeader.click()
await expect(activity.locator('.chat__activity-timeline')).toBeVisible()
await expect(activity.locator('.chat__activity-think-toggle')).toHaveAttribute('aria-expanded', 'false')
- await expect(activity.locator('.chat__tool-header')).toHaveAttribute('aria-expanded', 'false')
+ await expect(activity.locator('.chat__tool-header')).toHaveAttribute('aria-expanded', 'true')
+ await expect(page.getByText(fullOutput)).toBeVisible()
expect(thinkingRequests).toBe(4)
expect(thinkingFullRequests).toBe(1)
- expect(toolPreviewRequests).toBe(5)
+ expect(toolPreviewRequests).toBe(6)
expect(toolCopyRequests).toBe(1)
})
diff --git a/tests/chat-redesign.spec.mjs b/tests/chat-redesign.spec.mjs
index 4a66cd65..2c9a4d1f 100644
--- a/tests/chat-redesign.spec.mjs
+++ b/tests/chat-redesign.spec.mjs
@@ -486,7 +486,18 @@ test.describe('Q&A atomic write', () => {
const sentBodies = []
await page.route(/\/api\/chats\/[0-9a-f-]+\/messages$/, route => {
if (route.request().method() !== 'POST') return route.continue()
- sentBodies.push(route.request().postDataJSON())
+ const body = route.request().postDataJSON()
+ sentBodies.push(body)
+ if (body.answers) {
+ return route.fulfill({
+ status: 202,
+ contentType: 'application/json',
+ body: JSON.stringify({
+ status: 'answer_delivered',
+ answer_turn: 'same',
+ }),
+ })
+ }
return fulfillStartedPost(route)
})
await page.route(/\/api\/chats\/[0-9a-f-]+\/question-answers$/, route => {
@@ -530,6 +541,11 @@ test.describe('Q&A atomic write', () => {
await sendMessage(page, 'Ask')
await expect(page.locator('.qcard')).toBeVisible({ timeout: 5000 })
await page.locator('.qcard__opt', { hasText: 'Yes' }).click()
+ await page.evaluate(() => {
+ window.__mobiusChatScrollTrace = {
+ version: 1, transitions: [], writes: [], events: [],
+ }
+ })
await page.locator('.qcard__submit').click()
await expect.poll(() => sentBodies.length).toBe(2)
@@ -538,6 +554,109 @@ test.describe('Q&A atomic write', () => {
expect(sentBodies[1].hidden).toBe(true)
expect(sentBodies[1].answers).toBeTruthy()
expect(sentBodies[1].answers).toHaveProperty('Pick', 'Yes')
+ const questionFreeze = await page.evaluate(() => (
+ window.__mobiusChatScrollTrace?.transitions?.find(
+ row => row.event === 'send:question-freeze',
+ ) || null
+ ))
+ expect(questionFreeze).toBeTruthy()
+ expect(questionFreeze.to?.kind).toBe('ANCHOR_AT')
+ })
+
+ test('an Android viewport growth cannot clamp a submitted question anchor', async ({ page }) => {
+ const longLead = 'Context before the question. '.repeat(180)
+ const streamBody = [
+ `data: ${JSON.stringify({ type: 'text', content: longLead })}\n\n`,
+ `data: ${JSON.stringify({
+ type: 'question',
+ question_id: 'q-viewport-anchor',
+ questions: [{
+ question: 'Keep this card still?',
+ header: 'Position',
+ multiSelect: false,
+ options: [{ label: 'Yes' }],
+ }],
+ })}\n\n`,
+ 'data: {"type":"done"}\n\n',
+ ].join('')
+ let streamCount = 0
+ let releaseAnswer
+ let markAnswerStarted
+ const answerStarted = new Promise(resolve => { markAnswerStarted = resolve })
+
+ await page.setViewportSize({ width: 426, height: 860 })
+ await page.route(/\/api\/chats\/[0-9a-f-]+\/messages$/, async route => {
+ if (route.request().method() !== 'POST') return route.continue()
+ const body = route.request().postDataJSON()
+ if (!body.answers) return fulfillStartedPost(route)
+ markAnswerStarted()
+ await new Promise(resolve => { releaseAnswer = resolve })
+ return route.fulfill({
+ status: 202,
+ contentType: 'application/json',
+ body: JSON.stringify({ status: 'answer_delivered', answer_turn: 'same' }),
+ })
+ })
+ await page.route(/\/api\/chats\/[0-9a-f-]+\/stream$/, route => {
+ route.fulfill({
+ status: 200,
+ headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache' },
+ body: streamCount++ === 0 ? streamBody : 'data: {"type":"done"}\n\n',
+ })
+ })
+ await page.route('**/api/chat/stop', route =>
+ route.fulfill({ status: 200, body: '{}' })
+ )
+ await page.goto(BASE, { waitUntil: 'domcontentloaded' })
+ await page.waitForFunction(
+ () => !!(document.querySelector('.chat__empty-wrap')
+ || document.querySelector('.chat__form')),
+ { timeout: 10000 },
+ )
+ await newChat(page)
+ await sendMessage(page, 'Ask the anchored question')
+
+ const card = page.locator('.qcard')
+ await expect(card).toBeVisible({ timeout: 5000 })
+ await page.evaluate(() => {
+ const scroll = document.querySelector('.chat__scroll')
+ if (scroll) scroll.scrollTop = scroll.scrollHeight
+ })
+ await page.locator('.qcard__opt', { hasText: 'Yes' }).click()
+
+ const submit = page.locator('.qcard__submit')
+ const submitClick = submit.click()
+ await answerStarted
+ await page.evaluate(() => new Promise(resolve => (
+ requestAnimationFrame(() => requestAnimationFrame(resolve))
+ )))
+
+ const geometry = () => page.evaluate(() => {
+ const scroll = document.querySelector('.chat__scroll')
+ const question = document.querySelector('.qcard')
+ const spacer = document.querySelector('.spacer-dynamic')
+ const sr = scroll?.getBoundingClientRect()
+ const qr = question?.getBoundingClientRect()
+ return {
+ scrollTop: scroll?.scrollTop ?? null,
+ cardTop: sr && qr ? qr.top - sr.top : null,
+ viewport: scroll?.clientHeight ?? null,
+ spacer: spacer?.offsetHeight ?? null,
+ }
+ })
+
+ const before = await geometry()
+ await page.setViewportSize({ width: 426, height: 960 })
+ await page.evaluate(() => new Promise(resolve => (
+ requestAnimationFrame(() => requestAnimationFrame(resolve))
+ )))
+ const after = await geometry()
+ releaseAnswer()
+ await submitClick
+
+ expect(after.viewport).toBeGreaterThan(before.viewport)
+ expect(Math.abs(after.scrollTop - before.scrollTop)).toBeLessThanOrEqual(2)
+ expect(Math.abs(after.cardTop - before.cardTop)).toBeLessThanOrEqual(2)
})
})
diff --git a/tests/second-send-pin.spec.mjs b/tests/second-send-pin.spec.mjs
index 0b0731d9..b7ab0458 100644
--- a/tests/second-send-pin.spec.mjs
+++ b/tests/second-send-pin.spec.mjs
@@ -195,6 +195,118 @@ test('Second send from auto-scroll pins to viewport top through the full SSE flo
expect(afterSecond.lastUserVisualTop).toBeLessThanOrEqual(afterSecond.clientH / 3)
})
+test('A tall-composer send lands once without a visible post-paint correction', async ({ page }) => {
+ await setupWithSSE(page, [
+ { type: 'catch_up_done' },
+ { type: 'text', content: 'First response paragraph. '.repeat(60) },
+ { type: 'done' },
+ ])
+ await newChat(page)
+ await sendMessage(page, 'First user message')
+ await waitStreamDone(page)
+ await gestureToBottom(page)
+
+ await replaceStreamRoute(page, [
+ { type: 'catch_up_done' },
+ { type: 'text', content: 'Short reply.' },
+ { type: 'done' },
+ ])
+
+ const input = page.getByRole('textbox', { name: 'Message Möbius…' })
+ const multiline = [
+ 'Second user message',
+ 'with enough draft text',
+ 'to make the composer tall',
+ 'before it collapses on send.',
+ ].join('\n')
+ await input.fill(multiline)
+ await expect(page.locator('.chat__pill')).toHaveClass(/chat__pill--tall/)
+ // Growing the absolutely-positioned composer increases the list's bottom
+ // clearance. Re-establish the test's stated send-rule precondition after
+ // that geometry change: this case is about the collapse race while the
+ // reader is following, not about overriding a reader away from the tail.
+ await gestureToBottom(page)
+
+ // Recreate the real race deterministically: the passive foot observer still
+ // exposes the previous composer measurement while the committed textarea is
+ // about to collapse. The controller must overwrite this stale value in its
+ // pre-paint layout pass, before it sizes the reservation or writes scrollTop.
+ const preSend = await page.evaluate(() => {
+ const chat = document.querySelector('.chat')
+ const foot = document.querySelector('.chat__foot')
+ const scroll = document.querySelector('.chat__scroll')
+ if (!chat || !foot || !scroll) throw new Error('missing chat geometry')
+ chat.style.setProperty('--composer-h', `${foot.offsetHeight + 48}px`)
+ const spacer = scroll.querySelector('.spacer-dynamic')
+ window.__tallComposerPreSend = {
+ contentGap: Math.round(
+ scroll.scrollHeight
+ - (spacer?.offsetHeight || 0)
+ - scroll.scrollTop
+ - scroll.clientHeight,
+ ),
+ composer: getComputedStyle(chat).getPropertyValue('--composer-h').trim(),
+ foot: foot.offsetHeight,
+ mode: scroll.dataset.scrollMode || null,
+ }
+ window.__mobiusChatScrollTrace = {
+ version: 1, transitions: [], writes: [], events: [],
+ }
+ window.__tallComposerScrolls = []
+ scroll.addEventListener('scroll', () => {
+ const users = document.querySelectorAll('.chat__msg--user')
+ const last = users[users.length - 1]
+ const sr = scroll.getBoundingClientRect()
+ const ur = last?.getBoundingClientRect()
+ window.__tallComposerScrolls.push({
+ at: Math.round(performance.now()),
+ top: scroll.scrollTop,
+ visualTop: ur ? ur.top - sr.top : null,
+ })
+ }, { passive: true })
+ return window.__tallComposerPreSend
+ })
+ expect(preSend.contentGap).toBeGreaterThanOrEqual(0)
+ expect(preSend.contentGap).toBeLessThan(50)
+
+ await page.keyboard.press('Enter')
+ await expect(page.locator('.chat__msg--user')).toHaveCount(2, { timeout: 3000 })
+ await expect(page.locator('.chat__msg--user').last()).toContainText('Second user message')
+ await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 350)))
+
+ const result = await page.evaluate(() => {
+ const scroll = document.querySelector('.chat__scroll')
+ const users = document.querySelectorAll('.chat__msg--user')
+ const last = users[users.length - 1]
+ const sr = scroll?.getBoundingClientRect()
+ const ur = last?.getBoundingClientRect()
+ return {
+ visualTop: sr && ur ? Math.round(ur.top - sr.top) : null,
+ pinWrites: (window.__mobiusChatScrollTrace?.writes || [])
+ .filter(row => row?.from?.kind === 'PIN_USER_MSG')
+ .map(row => row.event),
+ mode: scroll?.dataset.scrollMode || null,
+ preSend: window.__tallComposerPreSend || null,
+ scrolls: window.__tallComposerScrolls || [],
+ trace: window.__mobiusChatScrollTrace || null,
+ }
+ })
+
+ const diagnostics = JSON.stringify(result, null, 2)
+ expect(result.visualTop, diagnostics).not.toBeNull()
+ expect(result.visualTop, diagnostics).toBeGreaterThanOrEqual(-2)
+ expect(result.visualTop, diagnostics).toBeLessThanOrEqual(12)
+ expect(result.pinWrites, diagnostics).toContain('layout:mode-transition')
+ // A ResizeObserver pass may legitimately re-apply the same pin after the
+ // reply changes layout. What matters is that the browser presents one
+ // landing, not a second visible nudge. Ignore any delayed event from the
+ // pre-send gesture and count only samples where the sent row is landed.
+ const landedScrolls = result.scrolls.filter(row => (
+ row.visualTop != null && row.visualTop >= -2 && row.visualTop <= 12
+ ))
+ expect(landedScrolls, diagnostics).toHaveLength(1)
+})
+
test('Pin HOLDS when content above the pinned message grows after send (late image/error/question layout)', async ({ page }) => {
// The user-reported "first send works, subsequent can fail" bug. On a later
// send the message pins to the top, but then content ABOVE it grows — a
diff --git a/tests/spacer.spec.mjs b/tests/spacer.spec.mjs
index fa934bcc..3a35d5e4 100644
--- a/tests/spacer.spec.mjs
+++ b/tests/spacer.spec.mjs
@@ -610,7 +610,7 @@ test.describe('SSE streaming (real React path)', () => {
await expect(tool.locator('.chat__tool-spin')).toHaveCount(0)
})
- test('16b. Near-foot activity taps hold position while live descendants churn', async ({ page }) => {
+ test('16b. Near-foot activity taps follow deterministically while live descendants churn', async ({ page }) => {
const events = [
{ type: 'catch_up_done' },
// Put the final activity disclosure close to the viewport foot once the
@@ -665,9 +665,11 @@ test.describe('SSE streaming (real React path)', () => {
expect(before.relativeTop).toBeGreaterThan(before.viewport * 0.55)
expect(before.relativeTop).toBeLessThan(before.viewport - 20)
- // Simulate status/output churn inside an open live activity timeline. The
- // toggle guard must observe only its direct body transition, not let these
- // unrelated descendant mutations win the correction race.
+ // Simulate status/output churn inside an open live activity timeline. In
+ // FOLLOW_BOTTOM, the scroll controller remains the sole authority: opening
+ // follows the taller real-content tail and closing returns to the prior
+ // tail. Repeated equal states must land identically despite descendant
+ // mutations; that is the autoscroll half of the idempotent-toggle contract.
await page.evaluate(() => {
window.__disclosureChurn = setInterval(() => {
const timeline = [...document.querySelectorAll('.chat__activity-timeline')].at(-1)
@@ -680,14 +682,30 @@ test.describe('SSE streaming (real React path)', () => {
})
try {
- const box = await header.boundingBox()
- expect(box).not.toBeNull()
+ let openTop = null
for (let i = 0; i < 10; i++) {
- await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2)
+ await header.click()
await page.evaluate(() => new Promise(r =>
requestAnimationFrame(() => requestAnimationFrame(r))))
- const top = await header.evaluate(el => el.getBoundingClientRect().top)
- expect(Math.abs(top - before.top), `toggle ${i + 1} drift`).toBeLessThanOrEqual(2)
+ const after = await page.evaluate(() => {
+ const s = document.querySelector('.chat__scroll')
+ const b = [...document.querySelectorAll('.chat__activity-header')].at(-1)
+ return {
+ top: b.getBoundingClientRect().top,
+ gap: s.scrollHeight - s.scrollTop - s.clientHeight,
+ }
+ })
+ expect(after.gap, `toggle ${i + 1} left the tail`).toBeLessThanOrEqual(4)
+ if (i % 2 === 0) {
+ if (openTop == null) {
+ openTop = after.top
+ expect(openTop).toBeLessThan(before.top - 20)
+ } else {
+ expect(Math.abs(after.top - openTop), `open ${i + 1} drift`).toBeLessThanOrEqual(2)
+ }
+ } else {
+ expect(Math.abs(after.top - before.top), `closed ${i + 1} drift`).toBeLessThanOrEqual(2)
+ }
}
} finally {
await page.evaluate(() => clearInterval(window.__disclosureChurn))