Keep agent timelines stable from submission through resume (#2718)

* Reapply: Stop completed turns from appearing stuck (#2484)

* Reapply: Keep older chat history and image previews stable (#2490)

* Lock timeline layout stability with user-driven specs

Two reds reproduce the reported jank:
- new agent, first prompt: the row paints at top=100 then jumps to 144 through
  authoritative hydration, because the draft tab and the agent panel each render
  their own AgentStreamView for the same logical row.
- long loaded timeline, submit: scrollHeight collapses 10793 -> 9111 mid-turn,
  because splitOrderedTail reclassifies measured rows into the virtualized segment
  where the virtualizer falls back to estimateStreamItemHeight.

Also restores centered timeline rows: the pagination anchor wrapper introduced in
#2490 was a plain block div, which broke alignSelf: center.

* Measure the turn footer blink from when the footer appears

Bounding the window at the prompt row conflated two things: the footer arriving a
frame after the row, and the footer leaving the layout and coming back. Bounded from
the footer's first frame, the blink still reproduces, so the footer-ownership race is
real rather than a sampling artifact.

* Rename the shadowed prompt row binding in the frame recorder

* fix(desktop): allow concurrent worktree dev instances

Desktop terminals can inherit another instance's profile path and debugging flags. Scope the profile to the current dev root and select an available debugging port so instances do not share global runtime state.

* fix(desktop): expose development providers in dev builds

Desktop-managed daemons inherited no Paseo runtime mode, so dev builds constructed the production provider registry. Mark unpackaged internal launches as development while continuing to force packaged launches to production.

* fix(timeline): stabilize optimistic turn layout

Keep initial history loading dormant until user intent and preserve active-turn layout across delayed transport updates. Add painted-frame coverage for optimistic timeline transitions.

* fix(timeline): preserve optimistic prompts through hydration

Canonical replacement relied on a transport submission record that can settle before a provider echoes the user row. Keep presentation continuity owned by the unreconciled row while destructive history replacement remains governed by active transactions.

* fix(timeline): make submitted prompts canonical

Submission settlement previously depended on status updates that could arrive after the optimistic row. Persist every accepted prompt in the canonical timeline and keep the footer active until RPC and canonical acknowledgement converge.

* fix(timeline): stop older history pages repeating entries

Backward pagination counted source sequence rows, so page boundaries inside a merged projected item could return that item repeatedly. Count projected entries and advance from their display anchors instead, with server and browser regressions covering the contract.

* fix(timeline): resume agents from the latest history

Use a bounded tail probe on resume so long background runs appear atomically instead of replaying every missed page. Preserve unchanged views, reconcile local/live rows, and keep skipped history reachable through backward pagination.

* fix(timeline): reconcile turn state after missed updates

Turn completion events can be missed while an agent timeline is unsubscribed, leaving footer activity stale even after the directory reports idle. Reconcile the single-owned turn lifecycle from authoritative resume snapshots while preserving newer live evidence.

* test(timeline): cover running state across refresh

Protect the hydration boundary where directory state must restore consistent tab, composer, and footer activity. Expose the running indicator semantically so the regression checks user-visible state instead of spinner implementation details.

* fix(timeline): keep history loading geometry stable

Reserve a fixed history-start gutter regardless of pagination state so showing or hiding the loader cannot shift timeline content.

* fix(timeline): keep turn activity coherent

Derive footer, tab, and composer activity from one lifecycle and submission projection. Idle directory transitions now request an authoritative resume so missed terminal events converge without treating directory delivery order as turn authority.

* fix(tests): align checks with runtime boundaries

* fix(desktop): stop dev app surviving its terminal

Electron was detached from the desktop runner, allowing it to outlive a stopped workspace terminal with broken output pipes and retain the single-instance lock. Keep Electron owned by the runner and preserve explicit process-group cleanup for detached child trees.

* fix(timeline): preserve activity through turn handoff

Correlate lifecycle events and snapshots with daemon-owned turn identity, and keep optimistic submissions active until their canonical row arrives. This prevents stale updates and RPC timing from exposing a false idle state.

* refactor(timeline): remove submission timing state

* fix(timeline): restore prompt identity on resume

* fix(timeline): exclude attachments from canonical prompt text

Structured provider prompts can include hidden history attachments before the user's text. Persist only plain prompt blocks so authoritative user messages match what the composer displayed while provider input remains unchanged.

* refactor(agent): remove unused pending-run message identity

* fix(desktop): let Chromium allocate the debugging port

* refactor(agent): remove impossible finalized-turn tracking

* fix(timeline): load history after keyboard scrolling

Treat observed upward displacement as user intent so keyboard and scrollbar navigation can wake dormant pagination.

* test(server): preserve accepted turn stream order

The manager-owned accepted turn boundary intentionally precedes coalesced output. Assert that lifecycle event explicitly while retaining the timeline-before-terminal ordering contract.

* test(app): scope sidebar fixtures by identity

Shared E2E daemon state may contain unrelated projects. Keep stale-route coverage tied to its named missing project and drag only the two rows seeded by the reorder spec.

* fix(timeline): gate prompt revisions by client capability

* fix(timeline): finalize canonical prompt delivery

Treat provider identity as a single stored-row transition so legacy clients receive one deliverable canonical prompt. Release identity-pending rows before later foreground output or the current terminal while preserving stale-turn isolation.

* fix(server): preserve legacy prompt pagination

* fix(timeline): keep assistant block identity stable

Assign canonical block IDs during live promotion so terminal finalization cannot remount image-bearing rows.

* fix(timeline): apply covered revisions during resume append

Run the exact canonical revision pass before overlapping resume pages append newer rows, while leaving cursor advancement to the incremental path.

* fix(server): preserve queued agent transitions

Project each queued live snapshot before awaiting stored metadata so later lifecycle state cannot overwrite an earlier transition.

* fix(server): snapshot queued agent updates

Capture each live agent payload before it enters the per-agent queue so shared nested state cannot change while an earlier storage read is pending.

* docs(app): date agent turn compatibility cleanup

* refactor(timeline): mint submitted prompt identity at acceptance

Canonical prompt rows now keep one immutable wire identity while provider identity remains internal for rewind translation. This removes the unreleased same-sequence revision and legacy projection contract.

* refactor(app): remove prompt revision reconciliation

Submitted prompt rows are immutable on the wire, so resume and live reducers no longer need to apply already-covered same-sequence updates.

* test(app): cover submitted prompt rewind roundtrip

* docs(timeline): describe immutable submitted prompt identity

Provider echoes now enrich daemon-internal identity only; wire rows keep their acceptance-time identity and rewind performs the provider translation.

* test(server): validate mock rewind targets

Reject unknown provider message IDs so app rewind coverage exercises wire-to-provider identity translation.

* fix(server): validate rewind before interrupting

* fix(server): omit rewind identity for daemon prompts

* test(app): guard rewind eligibility and rejection

* fix(server): preserve prompt identity across hydration

* refactor(timeline): remove stale revision remnants

* Revert "fix(server): preserve prompt identity across hydration"

This reverts commit 6adcf7e5b0bc8601761af59b461a746cb5e395fa.

* fix(timeline): settle missed submission acknowledgements

docs/architecture.md

@@ -229,6 +229,11 @@ New session RPCs use dotted names with `.request` and `.response` suffixes, such
 - `agent_permission_request` / `agent_permission_resolved` — Tool-call permission flow
 - `agent_deleted`, `agent_archived`, `agent_status`, `agent_list`
 - `checkout_status_update`, `checkout_diff_update`, and the full `checkout_*` request/response set for git operations
+
+Agent snapshots optionally carry the daemon-owned active turn identity, and turn lifecycle stream events
+optionally carry the same `turnId`. New clients use these fields when present and normalize an old daemon's
+status once at the directory boundary rather than maintaining a second activity model.
+
 - Terminal subscribe/input/capture commands
 - Voice/dictation streaming events (`dictation_stream_*`, `assistant_chunk`, `audio_output`, `transcription_result`)
 - Request/response pairs for fetch, list, create, etc., correlated by `requestId`; failures use `rpc_error`
@@ -294,7 +299,10 @@ initializing → idle ⇄ running
 `ManagedAgent` is a discriminated union over those lifecycle tags. Notes:
 
 - **AgentManager** is the source of truth for agent state and broadcasts updates to all subscribers
-- Timeline is append-only with epochs (each run starts a new epoch). Storage uses sequence numbers for client-side dedup; the default fetch page is 200 items
+- Timeline sequence allocation is append-only with epochs (each run starts a new epoch). The one
+  permitted in-place enrichment adds a provider message id to the manager-owned row for an accepted
+  prompt; it preserves the row's sequence, content, and timestamp. Storage uses sequence numbers for
+  client-side dedup; the default fetch page is 200 items.
 - Timeline row `timestamp` values are canonical daemon-owned timestamps. Providers may supply original replay timestamps, but clients must not guess timestamp trust or hide time UI based on local clock heuristics.
 - Events stream to connected clients in real time; correctness is backed by authoritative timeline fetches and paged-to-completion catch-up.
 - Agent state persists to `$PASEO_HOME/agents/{cwd-with-dashes}/{agent-id}.json` (timeline rows live alongside the record). That storage path is derived from `cwd`, not from workspace id.

docs/development.md

@@ -19,6 +19,10 @@ Root checkout dev is intentionally split across terminals:
 - `npm run dev:app` runs Expo on `http://localhost:8081` and connects to the dev daemon.
 - `npm run dev:desktop` runs its own Electron-flavored Expo server on the first free port from `8082` through `8089`. It never claims port `8081`.
 
+Desktop dev launches its desktop-managed daemon with `PASEO_NODE_ENV=development`,
+so development-only providers such as Mock Load Test are available. Packaged
+desktop launches always force the daemon to production mode.
+
 `npm run dev` is only a shorthand for `npm run dev:server`. Keep `127.0.0.1:6767` for the packaged app and production-style `~/.paseo` state.
 
 ## Nix desktop package
@@ -111,10 +115,21 @@ The iOS simulator shares the Mac's loopback, so `localhost:<port>` reaches the h
 
 ### Desktop renderer profiling
 
-`npm run dev:desktop` starts Electron with Chromium remote debugging enabled on
-`http://127.0.0.1:9223` so renderer CPU profiles can be captured through CDP.
-It launches its own Electron-flavored Expo server and passes that URL to Electron.
-Override the CDP port with `PASEO_ELECTRON_REMOTE_DEBUGGING_PORT` when `9223` is busy.
+`npm run dev:desktop` starts Electron with Chromium remote debugging enabled so
+renderer CPU profiles can be captured through CDP. By default it passes
+`--remote-debugging-port=0`, so Chromium atomically asks the OS for an available
+port and prints the selected DevTools endpoint. Set
+`PASEO_ELECTRON_REMOTE_DEBUGGING_PORT` when a QA workflow requires a validated,
+fixed port.
+
+Desktop dev also scopes Electron `userData` to the current dev root. This prevents
+desktop-only environment inherited by terminals opened inside Paseo from coupling
+a new worktree instance to the parent desktop instance's profile or single-instance
+lock.
+
+Electron remains in the desktop dev runner's process group. Closing or stopping the
+workspace-script terminal must terminate Electron with Metro; detaching Electron
+leaves an orphan holding the worktree's single-instance lock and broken output pipes.
 
 With desktop dev running, verify the real BrowserWindow, titlebar clearance, fullscreen
 transition, and 751-pixel settings split with:
@@ -124,8 +139,9 @@ npm run verify:electron-cdp --workspace=@getpaseo/desktop
 ```
 
 The verifier reads the same `EXPO_PORT` and
-`PASEO_ELECTRON_REMOTE_DEBUGGING_PORT` environment names as desktop dev. Set both when
-testing an isolated instance on non-default ports.
+`PASEO_ELECTRON_REMOTE_DEBUGGING_PORT` environment names as desktop dev. Set an
+explicit remote-debugging port for verifier runs, and set both when testing an
+isolated instance on non-default ports.
 
 When running a dedicated Electron QA instance against a non-default Expo port, set
 `EXPO_DEV_URL` explicitly. Desktop main defaults to `http://localhost:8081`, so

docs/providers.md

@@ -42,9 +42,11 @@ OpenCode MCP injection is dynamic and session-scoped. Call OpenCode's `mcp.add`
 
 OpenCode owns user message IDs. Do not pass Paseo-generated IDs to OpenCode prompt APIs; let OpenCode create `msg*` IDs and record the user timeline item from the `message.updated` event.
 
-Every provider adapter owns its canonical user-message timeline rows. When a foreground prompt is accepted, the adapter must emit exactly one `user_message` timeline item for that submitted prompt, using the same message ID it gives to or receives from the provider runtime. Optimistic client messages are UI-only and provider transcript echoes are optional; neither is allowed to be the only source of truth. If the provider later echoes the same submitted user message, dedupe it only within the active turn. Prefer provider-visible message IDs, but ACP runtimes may omit that ID or replace it with a provider-owned one; in that case suppress only echo chunks whose accumulated text is a prefix of the active submitted prompt. Do not perform global transcript text dedupe.
+`AgentManager` owns the one canonical timeline row for a foreground prompt carrying a Paseo `clientMessageId`. It records that row when `startTurn` accepts, with the wire `messageId` set to the same value. Provider adapters still emit their native user-message echo with the same `clientMessageId` when available; the manager records its provider identity on the internal row without changing or redispatching the wire item. If an adapter emits the echo before `startTurn` resolves, the manager records the provider identity with the row at acceptance. Provider adapters continue to own externally initiated user rows that have no Paseo client identity. Do not perform global transcript text dedupe.
 
-Submitted user-message rows preserve both identities: `messageId` is the provider-visible ID and the optional `clientMessageId` is the Paseo ID from `AgentRunOptions`. Attach `clientMessageId` only to the canonical row for that foreground submission; provider history and externally initiated user rows do not have a Paseo client ID.
+Rewind accepts the canonical wire `messageId` and resolves it to the provider identity before calling the adapter. A submitted prompt cannot be rewound until its provider echo supplies that identity.
+
+Submitted user-message wire items carry the same Paseo ID in `messageId` and `clientMessageId`. Provider adapters attach `clientMessageId` only to the echo for that foreground submission; provider history and externally initiated user rows do not have a Paseo client ID.
 
 Draft metadata lookups should avoid creating provider sessions when the upstream provider has top-level APIs for that metadata. Prefer `AgentClient.fetchCatalog`, `listCommands`, or `listFeatures` over creating a scratch `AgentSession`; scratch sessions can show up as empty native sessions in provider import/history UIs. `fetchCatalog` is the single discovery API for models and modes — provider implementations may use one process, separate upstream calls, or static data internally, but callers outside the provider do not get separate runtime model/mode probes. Draft feature and command listing must use the explicit draft model only; if no model is selected yet, return no metadata instead of resolving a default model through catalog discovery.
 

docs/timeline-sync.md

@@ -5,9 +5,11 @@ Agent chat delivery has two paths:
 1. **Live stream** — `agent_stream` WebSocket messages for immediacy. These may be delta-shaped lifecycle updates.
 2. **Authoritative history** — `fetch_agent_timeline_request` for correctness. This always returns full projected timeline items, never lifecycle deltas.
 
-The invariant is:
+The invariants are:
 
-> If the daemon has committed timeline rows for an agent, any connected client that opens or resumes that agent eventually displays every row through the daemon's current tail.
+> A continuously subscribed client applies every committed row in order. Opening or resuming an
+> agent establishes the daemon's current tail in one bounded request, with older history reachable
+> through backward pagination.
 
 Tool output is bounded before it enters either delivery path. Canonical shell tool output is sliced
 to 64 KiB, and the same bounded item is used for durable timeline rows and live stream events.
@@ -25,17 +27,26 @@ Client heartbeat reports presence:
 
 Heartbeat is used for notification routing. It must not be used as a correctness gate for `agent_stream` delivery. A stale mobile focus heartbeat may affect whether the user gets notified; it must not make timeline rows disappear from the live stream.
 
-## Catch-up is paged but complete
+## Gap recovery is paged but complete
 
 Large unbounded timeline responses can exceed relay frame limits, so catch-up uses bounded pages. Bounded does not mean partial.
 
 Page limits are projected-item targets. A tool call lifecycle is one projected item even if it spans many source sequence numbers, and assistant/reasoning chunks are merged before counting. The response carries `seqStart`, `seqEnd`, `sourceSeqRanges`, and `collapsed` so clients can advance sequence cursors without rendering delta rows.
 
-When the app fetches `direction: "after"` and the daemon responds with `hasNewer: true`, the app must immediately fetch the next page from `endCursor`. The catch-up is complete only when `hasNewer: false`.
+When live delivery detects a sequence gap, the app fetches `direction: "after"`. If the daemon
+responds with `hasNewer: true`, the app immediately fetches the next page from `endCursor`. Gap
+recovery is complete only when `hasNewer: false`.
 
 Initialization timeouts guard lack of catch-up progress, not the full multi-page sync. A successful page that queues the next `after` page refreshes the watchdog.
 
-The first load of an agent without a local cursor is different: it fetches a bounded latest tail page. Older history remains user-driven by scrolling upward.
+Opening or resuming an agent fetches one bounded latest tail page. Older history remains
+user-driven by scrolling upward.
+
+Reaching the history-start threshold loads one older page and preserves the visible content anchor.
+Cursor progress does not trigger another page. The user must leave and return to the threshold unless
+the anchored page still leaves the viewport at history start, as with short or compacted content; in
+that case pagination continues as one loading operation until the page fills the viewport or history
+is exhausted.
 
 ## Durable item anchors
 
@@ -47,9 +58,21 @@ The daemon validates that the epoch is current and the exact source sequence sti
 
 ## Resume behavior
 
-When a client resumes with a known cursor, it catches up after that cursor to completion. It does not replace the view with a latest tail page, because tail pagination can skip the middle of a long background run.
+Opening, reconnecting, or revisiting after selective-delivery grace fetches the latest tail page.
+Focus alone does not mutate timeline state; the tail response is compared with the local
+authoritative range first.
 
-When a client resumes without a cursor, it fetches the latest tail page.
+- The same epoch and `window.maxSeq` is an exact display no-op. The app advances synchronization
+  bookkeeping without replacing timeline arrays, preserving an upward-scrolled viewport.
+- When the page overlaps or is adjacent to the local end cursor, only projected items newer than
+  that cursor are applied. Already-covered rows are not replayed.
+- A true middle gap, epoch change, or rewind atomically replaces stale canonical history with the
+  latest tail. The replacement reconciles positioned live rows beyond its coverage and unresolved
+  local submissions; it never retains two discontiguous canonical ranges.
+
+The installed tail carries `hasOlder`, so history skipped by a replacement remains reachable through
+ordinary backward pagination. A backward page is accepted only when it is adjacent to the current
+history start; a response requested from a pre-replacement range is stale and is discarded.
 
 ## Client replica lifetime
 
@@ -61,6 +84,24 @@ recomposition while the runtime still owns the same directory snapshot and timel
 Removing the host from the registry is the destructive boundary: it stops the runtime and clears the
 session and host-scoped setup state together.
 
+The durable replica cache is a display cache, not a synchronization checkpoint. Its timeline record
+contains only the focused `agentId` and a truncated item tail. It never persists a cursor, epoch,
+older-history availability, authority status, or sync generation because those facts would describe
+the complete source dataset rather than the truncated display dataset.
+
+Restoring that cache produces a painted timeline: the items may render immediately, but the first
+daemon timeline request is still `tail`. A successful tail response atomically establishes canonical
+items, range, and older-history availability. Live rows received between cache paint and that tail
+response stay in the separate live head, do not advance a cursor or trigger gap recovery, and are
+reconciled with the authoritative tail and subsequent catch-up.
+
+Every daemon-derived live item carries its timeline epoch and sequence position. Bootstrap
+replacement keeps only positioned rows newer than the page it installs, while unresolved local
+user presentations identify themselves by having client identity without a timeline position. This
+prevents a page from duplicating rows it already covers without coupling display continuity to the
+shorter-lived submission registry. Unreconciled local presentations are not persisted in the durable
+replica cache.
+
 ## Selective and legacy delivery
 
 The app chooses one delivery policy from `server_info.features.selectiveAgentTimeline`:
@@ -87,14 +128,75 @@ its completion advances `seqEnd`, followed by a merged assistant message. The ap
 remaining page through the existing stream reducer. It must not append full projected text to a
 live prefix.
 
-Optimistic user prompts occupy stable timeline slots. Catch-up never extracts, delays, or reinserts
-them. A canonical user row replaces its matching slot in place; an unmatched prompt stays exactly
-where the user submitted it. Other canonical rows are applied after the already-present timeline
-instead of relocating visible user messages around newly fetched history.
+Every path that sends a message to an agent — composer send, dictation accept-and-send, queued
+send-now, and the automatic queue drain in `HostRuntime` — goes through
+`dispatchComposerAgentMessage` with a submission writer. There is no second transport for the same
+product action: calling `client.sendAgentMessage` directly skips the submitted row and the pending
+footer, and permanently drops attachments because the daemon does not echo them back.
 
-Canonical submitted user rows carry the provider's `messageId` and Paseo's optional
-`clientMessageId`. Clients reconcile optimistic prompts by `clientMessageId`. Content matching is
-limited to the dated compatibility path for daemon timelines created before that field existed.
+A submitted prompt is one `UserMessageItem` row. That row is the authoritative local presentation:
+its stable identity, text, timestamp, images, and attachments do not change when the provider
+acknowledges it. Submission lifecycle is a separate record keyed by agent, not another row shape.
+The transaction registry records two independent settlement facts: canonical acknowledgement and RPC
+settlement. Canonical acknowledgement retires optimistic activity immediately. When both facts are
+known, whichever arrives second deletes the record. A canonical acknowledgement that arrives first
+prevents a later transport error from rolling back a prompt already observed.
+
+The daemon's accepted response waits for the correlated run start and guarantees that the canonical
+submitted row has been recorded. It publishes the accepted turn's liveness before that row, so the
+client applies authoritative activity before canonical acknowledgement retires optimistic activity.
+Timeline render batching does not delay lifecycle application. Directory status never settles a
+submission. Overlapping sends settle independently rather than collapsing to one newest pending
+message.
+
+Daemons advertising `server_info.features.canonicalSubmittedPrompts` guarantee that every accepted
+prompt carrying a client message id is recorded and streamed as a canonical `user_message` with that
+same id. This includes daemon-handled commands that do not allocate a foreground turn; their submitted
+row is recorded before handler output. The app tracks submission transactions only for hosts with this
+capability. Older hosts keep the shipped untracked optimistic-row behavior and roll that row back on RPC
+rejection.
+
+Turn activity has one client-side replica. Lifecycle events can attach `turnId`, and agent snapshots can
+expose `activeTurn: { turnId, startedAt } | null`. An identified terminal cannot close a different
+identified turn; an unnamed legacy terminal can close the current turn. Snapshots, stream events,
+cancellation requests, and every visible surface update the same per-agent record. The snapshot covers
+both user-started foreground turns and autonomous provider turns;
+foreground control ownership remains a separate daemon concern. Cancellation request identity is stored
+with that record rather than in a React component, so an old request cannot clear a newer one. Submissions
+remain a separate pre-turn registry and retire on canonical acknowledgement.
+
+The compatibility boundary for older daemons is snapshot normalization: running/idle status becomes an
+anonymous active turn or idle state once, and downstream code consumes the same activity shape. The app
+does not combine anonymous lifecycle events, timestamps, timeline rows, and resume coverage to infer a
+second running state. Disconnect and replica removal remain destructive close boundaries. Elapsed time
+comes only from turn liveness, never from submission records or whichever timeline rows happen to be
+mounted.
+
+The daemon records one canonical submitted user row at acceptance. Its wire `messageId` is the
+submission's `clientMessageId`, so the row is born with its final identity and remains immutable on
+the wire. A correlated provider echo records the provider's native identity internally without
+dispatching another timeline event. Rewind resolves the wire identity to that provider identity at
+the provider boundary. Daemon-handled prompts follow the same identity rule.
+
+Content matching is limited to the dated compatibility path for daemon timelines created before
+that field existed. Canonical ingestion may match only an explicit unreconciled local candidate;
+the draft-create handoff is the one boundary that also permits the legacy canonical twin to have
+arrived first. Generic reducers and consumers do not reimplement message identity matching.
+
+Ordinary bootstrap, same-epoch reset, and catch-up replacement preserve unmatched locally submitted
+rows because a provider may never echo them. A known epoch change or rewind replaces history and
+drops acknowledged local rows omitted by the new canonical epoch; every transaction not yet
+acknowledged by the provider, and no other local row, crosses that destructive boundary. A cold
+reset without an existing epoch is destructive because the client has no continuity anchor.
+
+Tail rows are positioned history, so an unmatched local presentation is appended after the
+canonical replacement rather than ordered by timestamps from different machines. The head is a
+live overlay: cursorless items stay there during continuity replacement until canonical positions
+arrive, while a destructive replacement retains only active submission transactions.
+
+Canonical replacement owns both timeline lanes. A matching local row keeps its presentation ID and
+payload while taking the canonical row's ordered position. If a live assistant head is the
+canonical assistant prefix, it stays in the head lane. No row may be returned in both lanes.
 
 ## Relevant code
 

packages/app/e2e/agent-consecutive-turns.spec.ts

@@ -0,0 +1,853 @@
+import type { Page } from "@playwright/test";
+import { expect, test as baseTest } from "./fixtures";
+import { expectAgentIdle } from "./helpers/agent-stream";
+import {
+  attachImageFromMenu,
+  expectAttachmentPill,
+  expectComposerVisible,
+  submitMessage,
+} from "./helpers/composer";
+import { clickNewChat, gotoWorkspace } from "./helpers/launcher";
+import { seedWorkspace } from "./helpers/seed-client";
+import {
+  openAgentRoute,
+  seedMockAgentWorkspace,
+  type MockAgentWorkspace,
+} from "./helpers/mock-agent";
+import { installDaemonWebSocketGate } from "./helpers/daemon-websocket-gate";
+
+interface FrameRect {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+interface ElementFrame {
+  mounted: boolean;
+  visible: boolean;
+  painted: boolean;
+  rect: FrameRect | null;
+  opacity: number | null;
+  backgroundColor: string | null;
+}
+
+interface ContentChildFrame extends ElementFrame {
+  key: string;
+  text: string;
+}
+
+interface TurnFrame {
+  at: number;
+  userRow: ElementFrame;
+  attachment: ElementFrame;
+  footerRow: ElementFrame;
+  spinner: ElementFrame;
+  agentTab: ElementFrame;
+  tabProgress: ElementFrame;
+  interruptControl: ElementFrame;
+  primaryActionCount: number;
+  composer: ElementFrame & { value: string | null };
+  contentChildren: ContentChildFrame[];
+  scroll: ElementFrame & {
+    scrollTop: number | null;
+    clientHeight: number | null;
+    scrollHeight: number | null;
+  };
+}
+
+interface ActivityCheckpoint {
+  row: boolean;
+  stop: boolean;
+  footer: boolean;
+  tabProgress: boolean;
+  elapsed: boolean;
+}
+
+interface ActivityOracleState {
+  phase: "waiting" | "observing" | "complete";
+  checkpoints: ActivityCheckpoint[];
+  observer: MutationObserver;
+}
+
+type RunningReleaseOrder = "turn-before-response" | "response-before-turn" | "snapshot-before-turn";
+
+const FIRST_PROMPT_IMAGE = {
+  name: "first-prompt.png",
+  mimeType: "image/png",
+  buffer: Buffer.from(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+    "base64",
+  ),
+};
+
+declare global {
+  interface Window {
+    __consecutiveTurnFrames?: { active: boolean; frames: TurnFrame[] };
+    __activityContinuityOracle?: ActivityOracleState;
+  }
+}
+
+const test = baseTest.extend<{ streamingAgent: MockAgentWorkspace }>({
+  streamingAgent: async ({ page: _page }, provide) => {
+    const agent = await seedMockAgentWorkspace({
+      repoPrefix: "consecutive-ten-second-turns-",
+      title: "Consecutive ten-second turns",
+      model: "ten-second-stream",
+      initialPrompt: "emit 100 coalesced agent stream updates",
+    });
+    await agent.client.waitForFinish(agent.agentId, 15_000);
+    await provide(agent);
+    await agent.cleanup();
+  },
+});
+
+async function recordTurnFrames(page: Page, prompt: string): Promise<void> {
+  await page.evaluate((promptText) => {
+    const state = { active: true, frames: [] as TurnFrame[] };
+    const emptyElement = (): ElementFrame => ({
+      mounted: false,
+      visible: false,
+      painted: false,
+      rect: null,
+      opacity: null,
+      backgroundColor: null,
+    });
+    const rectOf = (element: Element): FrameRect => {
+      const rect = element.getBoundingClientRect();
+      return {
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height,
+      };
+    };
+    const intersects = (first: FrameRect, second: FrameRect) =>
+      first.bottom > second.top &&
+      first.top < second.bottom &&
+      first.right > second.left &&
+      first.left < second.right;
+    const windowRect: FrameRect = {
+      top: 0,
+      right: innerWidth,
+      bottom: innerHeight,
+      left: 0,
+      width: innerWidth,
+      height: innerHeight,
+    };
+    const hasColor = (color: string) =>
+      color !== "" && color !== "none" && color !== "transparent" && color !== "rgba(0, 0, 0, 0)";
+    const isVisible = (element: Element, clip?: Element | null) => {
+      const rect = rectOf(element);
+      return (
+        element.isConnected &&
+        element.checkVisibility() &&
+        rect.width > 0 &&
+        rect.height > 0 &&
+        intersects(rect, windowRect) &&
+        (!clip || intersects(rect, rectOf(clip)))
+      );
+    };
+    const isPainted = (element: Element, clip?: Element | null) => {
+      if (!isVisible(element, clip)) return false;
+      return [element, ...Array.from(element.querySelectorAll("*"))].some((candidate) => {
+        if (!isVisible(candidate, clip)) return false;
+        const style = getComputedStyle(candidate);
+        if (Number(style.opacity) <= 0) return false;
+        if (hasColor(style.backgroundColor)) return true;
+        const hasPaintedBorder = ["Top", "Right", "Bottom", "Left"].some(
+          (side) =>
+            Number.parseFloat(style.getPropertyValue(`border-${side.toLowerCase()}-width`)) > 0 &&
+            hasColor(style.getPropertyValue(`border-${side.toLowerCase()}-color`)),
+        );
+        if (hasPaintedBorder) return true;
+        if (candidate.textContent?.trim() && hasColor(style.color)) return true;
+        if (candidate instanceof SVGElement) {
+          const fill = style.fill || candidate.getAttribute("fill") || "";
+          const stroke = style.stroke || candidate.getAttribute("stroke") || "";
+          return hasColor(fill) || hasColor(stroke);
+        }
+        return candidate instanceof HTMLImageElement || candidate instanceof HTMLCanvasElement;
+      });
+    };
+    const snapshot = (
+      element: Element | null | undefined,
+      clip?: Element | null,
+      painted?: boolean,
+    ): ElementFrame => {
+      if (!element?.isConnected) return emptyElement();
+      const style = getComputedStyle(element);
+      return {
+        mounted: true,
+        visible: isVisible(element, clip),
+        painted: painted ?? isPainted(element, clip),
+        rect: rectOf(element),
+        opacity: Number(style.opacity),
+        backgroundColor: style.backgroundColor,
+      };
+    };
+    const unionRect = (elements: Element[]): FrameRect | null => {
+      if (elements.length === 0) return null;
+      const rects = elements.map(rectOf);
+      const top = Math.min(...rects.map((rect) => rect.top));
+      const right = Math.max(...rects.map((rect) => rect.right));
+      const bottom = Math.max(...rects.map((rect) => rect.bottom));
+      const left = Math.min(...rects.map((rect) => rect.left));
+      return { top, right, bottom, left, width: right - left, height: bottom - top };
+    };
+    const spinnerSnapshot = (
+      footer: Element | null | undefined,
+      clip: Element | null,
+    ): ElementFrame => {
+      const dots = Array.from(footer?.querySelectorAll("*") ?? []).filter((candidate) =>
+        hasColor(getComputedStyle(candidate).backgroundColor),
+      );
+      if (dots.length === 0) return emptyElement();
+      const opacities = dots.map((dot) => Number(getComputedStyle(dot).opacity));
+      return {
+        mounted: true,
+        visible: dots.some((dot) => isVisible(dot, clip)),
+        painted: dots.some((dot, index) => opacities[index] > 0 && isVisible(dot, clip)),
+        rect: unionRect(dots),
+        opacity: Math.max(...opacities),
+        backgroundColor: getComputedStyle(dots[0]).backgroundColor,
+      };
+    };
+    const findImageAttachment = (row: Element | undefined) =>
+      row?.querySelector('[role="button"][aria-label="Open image attachment"]');
+    const findAgentTabState = () => {
+      const agentTab = Array.from(
+        document.querySelectorAll('[data-testid^="workspace-tab-agent_"]'),
+      ).find((candidate) => isVisible(candidate));
+      return {
+        agentTab,
+        tabProgress: agentTab?.querySelector('[role="progressbar"][aria-label="Agent running"]'),
+      };
+    };
+    const countPrimaryActions = (composerRoot: Element | null | undefined) =>
+      Array.from(composerRoot?.querySelectorAll('[role="button"][aria-label]') ?? []).filter(
+        (candidate) =>
+          /stop agent|canceling agent|interrupt agent|send message|send and interrupt|queue message/i.test(
+            candidate.getAttribute("aria-label") ?? "",
+          ) && isVisible(candidate),
+      ).length;
+    const sample = () => {
+      const viewport = Array.from(
+        document.querySelectorAll('[data-testid="agent-chat-scroll"]'),
+      ).find((candidate) => isVisible(candidate));
+      const promptRow = Array.from(
+        viewport?.querySelectorAll('[data-testid="user-message"]') ?? [],
+      ).find((candidate) => candidate.textContent?.includes(promptText));
+      const attachment = findImageAttachment(promptRow);
+      const footer = Array.from(
+        viewport?.querySelectorAll('[data-testid="turn-working-indicator"]') ?? [],
+      )[0];
+      const spinner = spinnerSnapshot(footer, viewport ?? null);
+      const footerRow = footer?.parentElement;
+      const composer = Array.from(
+        document.querySelectorAll('[aria-label="Message agent..."]'),
+      ).find((candidate) => isVisible(candidate));
+      const composerRoot = composer?.closest('[data-testid="message-input-root"]');
+      const interrupt = Array.from(
+        composerRoot?.querySelectorAll('[role="button"][aria-label]') ?? [],
+      ).find((candidate) =>
+        /stop agent|canceling agent/i.test(candidate.getAttribute("aria-label") ?? ""),
+      );
+      const primaryActionCount = countPrimaryActions(composerRoot);
+      const { agentTab, tabProgress } = findAgentTabState();
+      const scrollFrame = snapshot(viewport);
+      const contentChildren = Array.from(viewport?.firstElementChild?.children ?? []).map(
+        (child, index): ContentChildFrame =>
+          Object.assign(snapshot(child, viewport), {
+            key:
+              (child.querySelector('[data-testid="turn-working-indicator"]')
+                ? "turn-footer"
+                : (child.getAttribute("data-history-row-id") ??
+                  child.getAttribute("data-testid"))) ?? `child-${index}`,
+            text: child.textContent?.trim().slice(0, 120) ?? "",
+          }),
+      );
+      state.frames.push({
+        at: performance.now(),
+        userRow: snapshot(promptRow, viewport),
+        attachment: snapshot(attachment, viewport),
+        footerRow: snapshot(footerRow, viewport, spinner.painted),
+        spinner,
+        agentTab: snapshot(agentTab),
+        tabProgress: snapshot(tabProgress),
+        interruptControl: snapshot(interrupt),
+        primaryActionCount,
+        composer: {
+          ...snapshot(composerRoot ?? composer),
+          value:
+            composer instanceof HTMLInputElement || composer instanceof HTMLTextAreaElement
+              ? composer.value
+              : null,
+        },
+        contentChildren,
+        scroll: {
+          ...scrollFrame,
+          scrollTop: viewport instanceof HTMLElement ? viewport.scrollTop : null,
+          clientHeight: viewport instanceof HTMLElement ? viewport.clientHeight : null,
+          scrollHeight: viewport instanceof HTMLElement ? viewport.scrollHeight : null,
+        },
+      });
+      if (state.active) scheduleAfterNextPaint();
+    };
+    const scheduleAfterNextPaint = () => {
+      requestAnimationFrame(() => setTimeout(sample, 0));
+    };
+    window.__consecutiveTurnFrames = state;
+    scheduleAfterNextPaint();
+  }, prompt);
+}
+
+async function waitForRecordedFrames(
+  page: Page,
+  predicate: "user-visible" | "turn-running",
+  count: number,
+): Promise<void> {
+  await expect
+    .poll(() =>
+      page.evaluate(
+        (input) => {
+          const frames = window.__consecutiveTurnFrames?.frames ?? [];
+          return frames.filter((frame) => {
+            if (input.predicate === "user-visible") return frame.userRow.visible;
+            return (
+              frame.interruptControl.painted &&
+              frame.footerRow.painted &&
+              frame.spinner.painted &&
+              frame.tabProgress.painted
+            );
+          }).length;
+        },
+        { predicate },
+      ),
+    )
+    .toBeGreaterThanOrEqual(count);
+}
+
+async function recordPaintsFor(page: Page, durationMs: number): Promise<void> {
+  const until = await page.evaluate((duration) => performance.now() + duration, durationMs);
+  await expect
+    .poll(() => page.evaluate(() => window.__consecutiveTurnFrames?.frames.at(-1)?.at ?? 0))
+    .toBeGreaterThanOrEqual(until);
+}
+
+async function installActivityContinuityOracle(page: Page, prompt: string): Promise<void> {
+  await page.evaluate((promptText) => {
+    const isVisible = (element: Element | null) => Boolean(element?.checkVisibility());
+    const snapshot = (): ActivityCheckpoint => {
+      const visibleAgentTab = Array.from(
+        document.querySelectorAll('[data-testid^="workspace-tab-agent_"]'),
+      ).find((candidate) => isVisible(candidate));
+      return {
+        row: Array.from(document.querySelectorAll('[data-testid="user-message"]')).some(
+          (candidate) => candidate.textContent?.includes(promptText),
+        ),
+        stop: isVisible(document.querySelector('[role="button"][aria-label="Stop agent"]')),
+        footer: isVisible(document.querySelector('[data-testid="turn-working-indicator"]')),
+        tabProgress: isVisible(
+          visibleAgentTab?.querySelector('[role="progressbar"][aria-label="Agent running"]') ??
+            null,
+        ),
+        elapsed: isVisible(document.querySelector('[data-testid="turn-working-elapsed"]')),
+      };
+    };
+    const state = {
+      phase: "waiting" as ActivityOracleState["phase"],
+      checkpoints: [] as ActivityCheckpoint[],
+      observer: null as unknown as MutationObserver,
+    };
+    const observeCommit = () => {
+      const checkpoint = snapshot();
+      if (state.phase === "waiting" && checkpoint.row) {
+        state.phase = "observing";
+      }
+      if (state.phase !== "observing") return;
+      state.checkpoints.push(checkpoint);
+      if (checkpoint.elapsed) {
+        state.phase = "complete";
+        state.observer.disconnect();
+      }
+    };
+    state.observer = new MutationObserver(observeCommit);
+    window.__activityContinuityOracle = state;
+    state.observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true,
+    });
+  }, prompt);
+}
+
+async function waitForActivityOracleArmed(page: Page): Promise<void> {
+  await expect
+    .poll(() => page.evaluate(() => window.__activityContinuityOracle?.phase ?? "missing"))
+    .not.toBe("waiting");
+}
+
+async function readActivityContinuityOracle(page: Page): Promise<ActivityCheckpoint[]> {
+  return page.evaluate(() => {
+    const state = window.__activityContinuityOracle;
+    if (!state) throw new Error("Activity continuity oracle was never installed");
+    state.observer.disconnect();
+    return state.checkpoints;
+  });
+}
+
+function expectActivityContinuity(checkpoints: ActivityCheckpoint[]): void {
+  const incompleteActivityCheckpoints = checkpoints.filter(
+    (checkpoint) => !checkpoint.stop || !checkpoint.footer || !checkpoint.tabProgress,
+  );
+  expect(checkpoints[0]?.row, "activity oracle never armed on the optimistic row").toBe(true);
+  expect(
+    incompleteActivityCheckpoints,
+    `activity oracle observed row without full activity cluster:\n${JSON.stringify(incompleteActivityCheckpoints, null, 2)}\n\nall checkpoints:\n${JSON.stringify(checkpoints, null, 2)}`,
+  ).toEqual([]);
+  expect(
+    checkpoints.slice(0, -1).filter((checkpoint) => checkpoint.elapsed),
+    `activity oracle observed elapsed before its authoritative disarm checkpoint:\n${JSON.stringify(checkpoints, null, 2)}`,
+  ).toEqual([]);
+  expect(checkpoints.at(-1)?.elapsed, "activity oracle never observed authoritative elapsed").toBe(
+    true,
+  );
+}
+
+async function stopTurnFrameRecording(page: Page): Promise<TurnFrame[]> {
+  return page.evaluate(() => {
+    const state = window.__consecutiveTurnFrames;
+    if (!state) throw new Error("Turn frames were never recorded");
+    state.active = false;
+    return state.frames;
+  });
+}
+
+function formatFrames(frames: TurnFrame[], centers: number | number[]): string {
+  const indexes = new Set<number>();
+  for (const center of Array.isArray(centers) ? centers : [centers]) {
+    for (let index = Math.max(0, center - 3); index <= center + 3; index += 1) {
+      if (index < frames.length) indexes.add(index);
+    }
+  }
+  return Array.from(indexes)
+    .sort((left, right) => left - right)
+    .map((index) => `frame ${index}: ${JSON.stringify(frames[index])}`)
+    .join("\n");
+}
+
+function expectRowContinuity(frames: TurnFrame[]): void {
+  const first = frames.findIndex((frame) => hasPaintedLayout(frame.userRow));
+  const baseline = frames[first]?.userRow.rect?.top;
+  const disappeared = frames.findIndex(
+    (frame, index) => index > first && !hasPaintedLayout(frame.userRow),
+  );
+  const reappeared = frames.findIndex(
+    (frame, index) => index > disappeared && disappeared >= 0 && hasPaintedLayout(frame.userRow),
+  );
+  const shifted = frames.findIndex(
+    (frame, index) =>
+      index > first &&
+      hasPaintedLayout(frame.userRow) &&
+      baseline !== undefined &&
+      Math.abs((frame.userRow.rect?.top ?? baseline) - baseline) > 1,
+  );
+  const attachmentMissing = frames.findIndex(
+    (frame, index) => index >= first && !hasPaintedLayout(frame.attachment),
+  );
+  const violations = [
+    ...(first < 0 ? ["submitted row never became visible"] : []),
+    ...(disappeared >= 0
+      ? [
+          `submitted row disappeared for ${Math.max(0, reappeared - disappeared)} recorded frames (${Math.max(0, (frames[reappeared]?.at ?? frames.at(-1)?.at ?? 0) - frames[disappeared].at).toFixed(1)}ms) before authoritative recovery`,
+        ]
+      : []),
+    ...(shifted >= 0
+      ? [
+          `submitted row moved from ${baseline?.toFixed(1)} to ${frames[shifted].userRow.rect?.top.toFixed(1)}`,
+        ]
+      : []),
+    ...(attachmentMissing >= 0 ? ["submitted image attachment left the painted layout"] : []),
+  ];
+  let failure = Math.max(0, first);
+  if (attachmentMissing >= 0) failure = attachmentMissing;
+  if (shifted >= 0) failure = shifted;
+  if (disappeared >= 0) failure = disappeared;
+  expect(
+    violations,
+    `transition violations:\n${formatFrames(frames, [failure, Math.max(failure, reappeared)])}`,
+  ).toEqual([]);
+}
+
+interface FrameViolation {
+  frame: number;
+  reason: string;
+}
+
+function geometryChanged(
+  value: number | null | undefined,
+  expected: number | null | undefined,
+): boolean {
+  if (value == null || expected == null) return true;
+  return Math.abs(value - expected) > 1;
+}
+
+function hasPaintedLayout(element: ElementFrame): boolean {
+  return [element.mounted, element.visible, element.painted].every(Boolean);
+}
+
+function violationsForChecks(
+  frame: number,
+  checks: Array<{ passes: boolean; reason: string }>,
+): FrameViolation[] {
+  return checks.filter(({ passes }) => !passes).map(({ reason }) => ({ frame, reason }));
+}
+
+function collectElementViolations(
+  frame: TurnFrame,
+  baseline: TurnFrame | undefined,
+  index: number,
+): FrameViolation[] {
+  return violationsForChecks(index, [
+    {
+      passes: hasPaintedLayout(frame.userRow),
+      reason: "submitted row left the painted layout",
+    },
+    {
+      passes: !geometryChanged(frame.userRow.rect?.top, baseline?.userRow.rect?.top),
+      reason: "submitted row moved vertically",
+    },
+    {
+      passes: [hasPaintedLayout(frame.footerRow), (frame.footerRow.rect?.height ?? 0) > 0].every(
+        Boolean,
+      ),
+      reason: "footer row was absent from the painted layout",
+    },
+    {
+      passes: [
+        geometryChanged(frame.footerRow.rect?.top, baseline?.footerRow.rect?.top),
+        geometryChanged(frame.footerRow.rect?.height, baseline?.footerRow.rect?.height),
+      ].every((hasChanged) => !hasChanged),
+      reason: "footer geometry moved",
+    },
+    {
+      passes: hasPaintedLayout(frame.spinner),
+      reason: "working spinner was not painted",
+    },
+    {
+      passes: hasPaintedLayout(frame.tabProgress),
+      reason: "selected tab running indicator was not painted",
+    },
+    {
+      passes: hasPaintedLayout(frame.interruptControl),
+      reason: "interrupt control was not painted",
+    },
+    {
+      passes: frame.primaryActionCount === 1,
+      reason: `expected one primary action, found ${frame.primaryActionCount}`,
+    },
+    {
+      passes: [hasPaintedLayout(frame.composer), frame.composer.value === ""].every(Boolean),
+      reason: "composer was not painted and empty",
+    },
+    {
+      passes: [
+        geometryChanged(frame.composer.rect?.top, baseline?.composer.rect?.top),
+        geometryChanged(frame.composer.rect?.height, baseline?.composer.rect?.height),
+      ].every((hasChanged) => !hasChanged),
+      reason: "composer geometry moved",
+    },
+  ]);
+}
+
+function collectScrollViolations(
+  frame: TurnFrame,
+  baseline: TurnFrame | undefined,
+  index: number,
+): FrameViolation[] {
+  return violationsForChecks(index, [
+    {
+      passes: [
+        frame.scroll.mounted,
+        frame.scroll.visible,
+        !geometryChanged(frame.scroll.rect?.top, baseline?.scroll.rect?.top),
+        !geometryChanged(frame.scroll.rect?.height, baseline?.scroll.rect?.height),
+        !geometryChanged(frame.scroll.clientHeight, baseline?.scroll.clientHeight),
+      ].every(Boolean),
+      reason: "scroll viewport geometry moved",
+    },
+    {
+      passes: [
+        geometryChanged(frame.scroll.scrollTop, baseline?.scroll.scrollTop),
+        geometryChanged(frame.scroll.scrollHeight, baseline?.scroll.scrollHeight),
+      ].every((hasChanged) => !hasChanged),
+      reason: "scroll content metrics moved",
+    },
+  ]);
+}
+
+function collectContentViolations(
+  frame: TurnFrame,
+  stableContentChildren: Map<string, ContentChildFrame>,
+  index: number,
+): FrameViolation[] {
+  return Array.from(stableContentChildren).flatMap(([key, expected]) => {
+    const child = frame.contentChildren.find((candidate) => candidate.key === key);
+    return violationsForChecks(index, [
+      {
+        passes: [
+          Boolean(child?.mounted),
+          !geometryChanged(child?.rect?.top, expected.rect?.top),
+          !geometryChanged(child?.rect?.bottom, expected.rect?.bottom),
+          !geometryChanged(child?.rect?.height, expected.rect?.height),
+        ].every(Boolean),
+        reason: `content row ${key} geometry moved`,
+      },
+    ]);
+  });
+}
+
+function expectAtomicIdleToRunningTransition(frames: TurnFrame[]): void {
+  const first = frames.findIndex((frame) => frame.userRow.visible);
+  const running = frames.findIndex(
+    (frame, index) =>
+      index >= first &&
+      frame.interruptControl.painted &&
+      frame.footerRow.painted &&
+      frame.spinner.painted &&
+      frame.tabProgress.painted,
+  );
+  const transition = frames.slice(first);
+  const baseline = transition[0];
+  const violations: FrameViolation[] = [];
+  const stableContentChildren = new Map(
+    baseline?.contentChildren
+      .filter(({ key }) => key !== "turn-footer")
+      .map((child) => [child.key, child]),
+  );
+  if (first < 0) violations.push({ frame: 0, reason: "submitted row never became visible" });
+  if (running < 0) violations.push({ frame: Math.max(first, 0), reason: "turn never visibly ran" });
+  for (const [offset, frame] of transition.entries()) {
+    const index = first + offset;
+    violations.push(...collectElementViolations(frame, baseline, index));
+    violations.push(...collectScrollViolations(frame, baseline, index));
+    violations.push(...collectContentViolations(frame, stableContentChildren, index));
+  }
+  for (let offset = 1; offset < transition.length; offset += 1) {
+    const before = transition[offset - 1];
+    const after = transition[offset];
+    const footerEnteredLayout = [
+      (before.footerRow.rect?.height ?? 0) <= 0,
+      (after.footerRow.rect?.height ?? 0) > 0,
+    ].every(Boolean);
+    if (footerEnteredLayout) {
+      violations.push({
+        frame: first + offset,
+        reason: "footer height changed from zero to non-zero",
+      });
+    }
+  }
+  const failure = violations[0]?.frame ?? Math.max(first, 0);
+  expect(
+    violations,
+    `transition violations:\n${violations.map(({ frame, reason }) => `frame ${frame}: ${reason}`).join("\n")}\n\nframe record:\n${formatFrames(frames, [failure, running])}`,
+  ).toEqual([]);
+}
+
+function expectAtomicFirstPromptTransition(frames: TurnFrame[]): void {
+  expectRowContinuity(frames);
+  const first = frames.findIndex((frame) => hasPaintedLayout(frame.userRow));
+  const transition = frames.slice(first);
+  const violations: FrameViolation[] = [];
+  for (const [offset, frame] of transition.entries()) {
+    const index = first + offset;
+    violations.push(
+      ...violationsForChecks(index, [
+        {
+          passes: hasPaintedLayout(frame.footerRow),
+          reason: "footer was not painted with the first prompt",
+        },
+        {
+          passes: hasPaintedLayout(frame.spinner),
+          reason: "working spinner was not painted with the first prompt",
+        },
+        {
+          passes: hasPaintedLayout(frame.composer) && frame.composer.value === "",
+          reason: "composer was not painted and empty with the first prompt",
+        },
+        {
+          passes: !frame.agentTab.mounted || hasPaintedLayout(frame.tabProgress),
+          reason: "created agent tab appeared without running state",
+        },
+        {
+          passes: !frame.agentTab.mounted || hasPaintedLayout(frame.interruptControl),
+          reason: "created agent appeared without its interrupt control",
+        },
+      ]),
+    );
+  }
+  const failure = violations[0]?.frame ?? Math.max(first, 0);
+  expect(
+    violations,
+    `transition violations:\n${violations.map(({ frame, reason }) => `frame ${frame}: ${reason}`).join("\n")}\n\nframe record:\n${formatFrames(frames, failure)}`,
+  ).toEqual([]);
+}
+
+async function recordDelayedRunningTransition(
+  page: Page,
+  agent: MockAgentWorkspace,
+  releaseOrder: RunningReleaseOrder,
+): Promise<{ frames: TurnFrame[]; checkpoints: ActivityCheckpoint[] }> {
+  const gate = await installDaemonWebSocketGate(page);
+  await openAgentRoute(page, { workspaceId: agent.workspaceId, agentId: agent.agentId });
+  await expectAgentIdle(page);
+  await expect(page.getByRole("button", { name: "Copy turn" })).toHaveCount(1);
+
+  const prompt = "Second prompt keeps streaming.";
+  gate.holdNextAgentStreamEvent("turn_started");
+  gate.holdNextAgentUpdate(agent.agentId, "running");
+  gate.holdNextServerMessage("send_agent_message_response");
+  gate.setAgentStreamItemSuppressed("assistant_message", true);
+  await recordTurnFrames(page, prompt);
+  await installActivityContinuityOracle(page, prompt);
+  await submitMessage(page, prompt);
+  await Promise.all([
+    gate.waitForHeldAgentStreamEvent("turn_started"),
+    gate.waitForHeldAgentUpdate(agent.agentId, "running"),
+    gate.waitForHeldServerMessage("send_agent_message_response"),
+  ]);
+
+  let turnReleased = false;
+  let snapshotReleased = false;
+  let responseReleased = false;
+  try {
+    await expect(page.getByTestId("user-message").filter({ hasText: prompt })).toBeVisible();
+    await expect(page.getByRole("textbox", { name: "Message agent..." }).first()).toHaveValue("");
+    await gate.waitForAgentStreamItem("user_message");
+    await waitForActivityOracleArmed(page);
+    const elapsedBeforeAuthoritative = await page.getByTestId("turn-working-elapsed").count();
+
+    if (releaseOrder === "turn-before-response") {
+      gate.releaseHeldAgentStreamEvent("turn_started");
+      turnReleased = true;
+      await expect(page.getByTestId("turn-working-elapsed")).toBeVisible();
+      gate.releaseHeldServerMessage("send_agent_message_response");
+      responseReleased = true;
+      gate.releaseHeldAgentUpdate(agent.agentId, "running");
+      snapshotReleased = true;
+    } else if (releaseOrder === "response-before-turn") {
+      gate.releaseHeldServerMessage("send_agent_message_response");
+      responseReleased = true;
+      await recordPaintsFor(page, 80);
+      gate.releaseHeldAgentStreamEvent("turn_started");
+      turnReleased = true;
+      await expect(page.getByTestId("turn-working-elapsed")).toBeVisible();
+      gate.releaseHeldAgentUpdate(agent.agentId, "running");
+      snapshotReleased = true;
+    } else {
+      gate.releaseHeldServerMessage("send_agent_message_response");
+      responseReleased = true;
+      await recordPaintsFor(page, 80);
+      gate.releaseHeldAgentUpdate(agent.agentId, "running");
+      snapshotReleased = true;
+      await expect(page.getByTestId("turn-working-elapsed")).toBeVisible();
+      gate.releaseHeldAgentStreamEvent("turn_started");
+      turnReleased = true;
+    }
+
+    await waitForRecordedFrames(page, "turn-running", 3);
+    const frames = await stopTurnFrameRecording(page);
+    const checkpoints = await readActivityContinuityOracle(page);
+    expectActivityContinuity(checkpoints);
+    expect(elapsedBeforeAuthoritative).toBe(0);
+    gate.setAgentStreamItemSuppressed("assistant_message", false);
+    return { frames, checkpoints };
+  } finally {
+    if (!turnReleased) gate.releaseHeldAgentStreamEvent("turn_started");
+    if (!snapshotReleased) gate.releaseHeldAgentUpdate(agent.agentId, "running");
+    if (!responseReleased) gate.releaseHeldServerMessage("send_agent_message_response");
+    gate.setAgentStreamItemSuppressed("assistant_message", false);
+  }
+}
+
+// The first prompt of a brand new agent is submitted before the agent exists, so the
+// authoritative timeline arrives after the row is already on screen. That is the only
+// path where hydration can move an already-visible message.
+test("keeps the first prompt of a new agent in place through authoritative hydration", async ({
+  page,
+}) => {
+  const workspace = await seedWorkspace({ repoPrefix: "new-agent-first-prompt-" });
+  try {
+    await page.addInitScript(() => {
+      localStorage.setItem(
+        "@paseo:create-agent-preferences",
+        JSON.stringify({
+          provider: "mock",
+          providerPreferences: {
+            mock: { mode: "load-test", model: "ten-second-stream" },
+          },
+        }),
+      );
+    });
+    const gate = await installDaemonWebSocketGate(page);
+    await gotoWorkspace(page, workspace.workspaceId);
+    await clickNewChat(page);
+    await expectComposerVisible(page);
+
+    const prompt = "Delay synthetic user message by 300ms.";
+    await attachImageFromMenu(page, FIRST_PROMPT_IMAGE);
+    await expectAttachmentPill(page, "composer-image-attachment-pill");
+    await recordTurnFrames(page, prompt);
+    await submitMessage(page, prompt);
+
+    const submittedRow = page.getByTestId("user-message").filter({ hasText: prompt }).first();
+    await expect(submittedRow).toBeVisible();
+    await gate.waitForServerMessage("fetch_agent_timeline_response");
+    await recordPaintsFor(page, 80);
+    expectAtomicFirstPromptTransition(await stopTurnFrameRecording(page));
+  } finally {
+    await workspace.cleanup();
+  }
+});
+
+test("keeps follow-up activity continuous when turn starts before response", async ({
+  page,
+  streamingAgent,
+}) => {
+  const { frames } = await recordDelayedRunningTransition(
+    page,
+    streamingAgent,
+    "turn-before-response",
+  );
+  expectAtomicIdleToRunningTransition(frames);
+});
+
+test("keeps follow-up activity continuous when response arrives before running state", async ({
+  page,
+  streamingAgent,
+}) => {
+  const { frames } = await recordDelayedRunningTransition(
+    page,
+    streamingAgent,
+    "response-before-turn",
+  );
+  expectAtomicIdleToRunningTransition(frames);
+});
+
+test("keeps follow-up activity continuous when snapshot opens before turn event", async ({
+  page,
+  streamingAgent,
+}) => {
+  const { frames } = await recordDelayedRunningTransition(
+    page,
+    streamingAgent,
+    "snapshot-before-turn",
+  );
+  expectAtomicIdleToRunningTransition(frames);
+});

packages/app/e2e/agent-message-rewind.spec.ts

@@ -0,0 +1,133 @@
+import type { Locator } from "@playwright/test";
+import { expect, test, type Page } from "./fixtures";
+import { expectAgentIdle, expectAgentReadyToInterrupt } from "./helpers/agent-stream";
+import {
+  cancelAgent,
+  expectComposerDraft,
+  expectComposerVisible,
+  submitMessage,
+} from "./helpers/composer";
+import { openAgentRoute, seedMockAgentWorkspace } from "./helpers/mock-agent";
+
+async function completeSubmittedTurn(
+  page: Page,
+  agent: Awaited<ReturnType<typeof seedMockAgentWorkspace>>,
+  prompt: string,
+): Promise<Locator> {
+  await submitMessage(page, prompt);
+  const userMessage = page.getByTestId("user-message").filter({ hasText: prompt });
+  await expect(userMessage).toBeVisible();
+
+  const finish = await agent.client.waitForFinish(agent.agentId, 30_000);
+  expect(finish.status).toBe("idle");
+  await expect(page.getByText("(end of synthetic stream)", { exact: true })).toBeVisible();
+  await expect(userMessage).toHaveAttribute("aria-busy", "false");
+  return userMessage;
+}
+
+async function rewindConversation(page: Page, userMessage: Locator, prompt: string): Promise<void> {
+  await userMessage.getByText(prompt, { exact: true }).hover();
+  await userMessage.getByRole("button", { name: "Rewind to this message", exact: true }).click();
+  await page.getByRole("button", { name: "Rewind conversation", exact: true }).click();
+}
+
+async function expectTurnCompletesNormally(
+  page: Page,
+  agent: Awaited<ReturnType<typeof seedMockAgentWorkspace>>,
+): Promise<void> {
+  const finish = await agent.client.waitForFinish(agent.agentId, 30_000);
+  expect(finish.status).toBe("idle");
+  await expect(page.getByText("(end of synthetic stream)", { exact: true })).toBeVisible();
+  await expectAgentIdle(page);
+}
+
+test.describe("Agent message rewind", () => {
+  test("rewinds a submitted prompt and restores it to the composer", async ({ page }) => {
+    test.setTimeout(90_000);
+    const prompt = "Restore this submitted prompt after rewind.";
+    const agent = await seedMockAgentWorkspace({
+      repoPrefix: "message-rewind-roundtrip-",
+      title: "Message rewind roundtrip",
+      model: "ten-second-stream",
+    });
+
+    try {
+      await openAgentRoute(page, agent);
+      await expectComposerVisible(page);
+      const userMessage = await completeSubmittedTurn(page, agent, prompt);
+
+      await rewindConversation(page, userMessage, prompt);
+
+      await expect(page.getByText("(end of synthetic stream)", { exact: true })).toHaveCount(0);
+      await expectComposerDraft(page, prompt);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("keeps a pre-acknowledgement turn running after rewind is rejected", async ({ page }) => {
+    test.setTimeout(90_000);
+    const prompt = "Delay synthetic user message by 2000ms.";
+    const rewindError = "Cannot rewind before the provider acknowledges the submitted prompt";
+    const agent = await seedMockAgentWorkspace({
+      repoPrefix: "message-rewind-pre-echo-",
+      title: "Message rewind pre-echo",
+      model: "ten-second-stream",
+    });
+
+    try {
+      await openAgentRoute(page, agent);
+      await expectComposerVisible(page);
+      await submitMessage(page, prompt);
+      const userMessage = page.getByTestId("user-message").filter({ hasText: prompt });
+      await expect(userMessage).toBeVisible();
+      await expectAgentReadyToInterrupt(page);
+
+      await rewindConversation(page, userMessage, prompt);
+
+      await expect(page.getByText(rewindError, { exact: true })).toBeVisible();
+      await expectAgentReadyToInterrupt(page);
+      await expectTurnCompletesNormally(page, agent);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("does not offer rewind for daemon-handled prompts", async ({ page }) => {
+    const commandPrompt = "/mock handled-command";
+    const providerPrompt = "Keep this provider-bound prompt rewindable.";
+    const agent = await seedMockAgentWorkspace({
+      repoPrefix: "message-rewind-daemon-command-",
+      title: "Message rewind daemon command",
+      model: "ten-second-stream",
+    });
+
+    try {
+      await openAgentRoute(page, agent);
+      await expectComposerVisible(page);
+      await expectAgentIdle(page);
+
+      await submitMessage(page, commandPrompt);
+      const commandMessage = page.getByTestId("user-message").filter({ hasText: commandPrompt });
+      await expect(commandMessage).toBeVisible();
+      await expect(page.getByText("Mock command handled", { exact: true })).toBeVisible();
+      await commandMessage.getByText(commandPrompt, { exact: true }).hover();
+      await expect(
+        commandMessage.getByRole("button", { name: "Rewind to this message", exact: true }),
+      ).toHaveCount(0);
+
+      await submitMessage(page, providerPrompt);
+      const providerMessage = page.getByTestId("user-message").filter({ hasText: providerPrompt });
+      await expect(providerMessage).toBeVisible();
+      await expectAgentReadyToInterrupt(page);
+      await providerMessage.getByText(providerPrompt, { exact: true }).hover();
+      await expect(
+        providerMessage.getByRole("button", { name: "Rewind to this message", exact: true }),
+      ).toBeVisible();
+      await cancelAgent(page);
+      await expectAgentIdle(page);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+});

packages/app/e2e/agent-stream-ui.spec.ts

@@ -3,6 +3,7 @@ import {
   awaitAssistantMessage,
   expectAgentIdle,
   expectInlineWorkingIndicator,
+  expectRunningAgentChrome,
   expectTurnCopyButton,
   expectScrollFollowsNewContent,
 } from "./helpers/agent-stream";
@@ -18,11 +19,35 @@ import { delayCreatedAgentInitialTailResponse } from "./helpers/agent-timeline-g
 import { selectModel } from "./helpers/app";
 import { clickNewChat } from "./helpers/launcher";
 import { expectComposerVisible, startRunningMockAgent } from "./helpers/composer";
-import { openAgentRoute, seedMockAgentWorkspace } from "./helpers/mock-agent";
+import {
+  openAgentRoute,
+  seedMockAgentWorkspace,
+  seedRunningMockAgentWorkspace,
+} from "./helpers/mock-agent";
 
 const SCROLL_AWAY_MIN_SCROLLABLE_DISTANCE = 360;
 
 test.describe("Agent stream UI", () => {
+  test("keeps running agent chrome after page refresh", async ({ page }) => {
+    const title = "Running agent refresh";
+    const agent = await seedRunningMockAgentWorkspace({
+      repoPrefix: "stream-running-refresh-",
+      title,
+      model: "five-minute-stream",
+      initialPrompt: "Stay running while the page refreshes.",
+    });
+    try {
+      await openAgentRoute(page, agent);
+      await expectRunningAgentChrome(page, title);
+
+      await page.reload();
+
+      await expectRunningAgentChrome(page, title);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
   test("auto-scroll sticks to bottom across token bursts", async ({ page }) => {
     test.setTimeout(120_000);
     const agent = await startRunningMockAgent(page, {

packages/app/e2e/agent-tab-image-stability.spec.ts

@@ -0,0 +1,85 @@
+import { test as base } from "./fixtures";
+import {
+  appendSettledTimelineTurns,
+  createNearTenMegabyteAssistantPng,
+  createSettledMockAgent,
+  createSmallAssistantPng,
+  emitSettledAssistantImage,
+  expectAssistantImageNotMounted,
+  expectAssistantImageRendered,
+  openAssistantImageTimeline,
+  openExistingImageAgentTabs,
+  remountAndRecoverAssistantImageFromHistory,
+  sendFollowUpAndExpectVisibleResponse,
+  switchAwayAndBackWithoutImageInstability,
+  userPagesUntilAssistantImageRenders,
+} from "./helpers/assistant-images";
+import { seedWorkspace, type SeededWorkspace } from "./helpers/seed-client";
+
+const test = base.extend<{ imageWorkspace: SeededWorkspace }>({
+  imageWorkspace: async ({ page: _page }, provide) => {
+    const workspace = await seedWorkspace({ repoPrefix: "agent-tab-image-stability-" });
+    try {
+      await provide(workspace);
+    } finally {
+      await workspace.cleanup();
+    }
+  },
+});
+
+test("switching between settled agent tabs keeps a real assistant PNG rendered", async ({
+  imageWorkspace: workspace,
+  page,
+}) => {
+  test.setTimeout(120_000);
+  const image = await createSmallAssistantPng(workspace, {
+    alt: "Real file image",
+    fileName: "assistant-preview.png",
+  });
+  const imageAgent = await createSettledMockAgent(workspace, "Image timeline");
+  const otherAgent = await createSettledMockAgent(workspace, "Other timeline");
+  await emitSettledAssistantImage(workspace.client, imageAgent, image);
+
+  await openExistingImageAgentTabs(page, { imageAgent, otherAgent });
+  await expectAssistantImageRendered(page, image);
+  await switchAwayAndBackWithoutImageInstability(page, { image, imageAgent, otherAgent });
+});
+
+test("a real assistant PNG remains reachable through pagination and remount", async ({
+  imageWorkspace: workspace,
+  page,
+}) => {
+  test.setTimeout(120_000);
+  const image = await createSmallAssistantPng(workspace, {
+    alt: "Paginated real file image",
+    fileName: "paginated-assistant-preview.png",
+  });
+  const imageAgent = await createSettledMockAgent(workspace, "Paginated image timeline");
+  await emitSettledAssistantImage(workspace.client, imageAgent, image);
+  await appendSettledTimelineTurns(workspace.client, imageAgent, 40);
+
+  await openAssistantImageTimeline(page, imageAgent);
+  await expectAssistantImageNotMounted(page, image);
+  await userPagesUntilAssistantImageRenders(page, image);
+  await remountAndRecoverAssistantImageFromHistory(page, image);
+});
+
+test("a near-10 MiB real assistant PNG renders and the app remains responsive", async ({
+  imageWorkspace: workspace,
+  page,
+}) => {
+  test.setTimeout(180_000);
+  const image = await createNearTenMegabyteAssistantPng(workspace, {
+    alt: "Large real file image",
+    fileName: "large-assistant-preview.png",
+  });
+  const imageAgent = await createSettledMockAgent(workspace, "Large image timeline");
+  await emitSettledAssistantImage(workspace.client, imageAgent, image);
+
+  await openAssistantImageTimeline(page, imageAgent);
+  await expectAssistantImageRendered(page, image);
+  await sendFollowUpAndExpectVisibleResponse(page, {
+    prompt: "confirm responsiveness: emit 1 coalesced agent stream updates",
+    response: "stress-update-0",
+  });
+});

packages/app/e2e/agent-timeline-pagination.spec.ts

@@ -1,27 +1,229 @@
-import { test } from "./fixtures";
+import { expect, test } from "./fixtures";
 import {
-  expectLoadedTimelineDoesNotScroll,
+  expectSameOlderHistoryLoadingOperation,
+  expectStableHistoryStartGutter,
+  expectTimelineAtHistoryStart,
+  expectTimelinePromptCentered,
   expectTimelinePromptNotMounted,
+  expectTimelinePromptPositionPreserved,
   expectTimelinePromptVisible,
-  holdNextOlderTimelinePage,
+  holdBootstrapTimelinePage,
+  holdDaemonHydration,
+  holdOlderHistoryPages,
   makeLoadedTimelineFitViewport,
   openAgentTimeline,
+  rememberOlderHistoryLoadingOperation,
+  rememberTimelineViewport,
+  rememberTimelinePromptPosition,
+  reloadAgentTimelineFromPersistedReplica,
   scrollTimelineUntilOlderHistoryIsReachable,
+  scrollTimelineToOldestLoadedEdge,
+  scrollTimelineToNewestLoadedEdge,
   seedLongMockAgentTimeline,
+  scrollThroughOlderHistoryPages,
+  seedRealisticOlderTimeline,
+  sendLiveTurnBeforeHydration,
+  expectTimelineViewportAnchoredAfterPrepend,
+  userNavigatesTimelineToHistoryStartWithKeyboard,
+  userScrollsTimelineToHistoryStart,
 } from "./helpers/timeline-pagination";
 
 test.describe("Agent timeline pagination", () => {
-  test("loads older history when the user scrolls to the top of a long agent timeline", async ({
+  test("keeps a fixed history-start gutter before, during, and after pagination", async ({
+    page,
+  }) => {
+    const agent = await seedLongMockAgentTimeline({ turns: 40 });
+    try {
+      const history = await holdOlderHistoryPages(page, agent);
+      await openAgentTimeline(page, agent);
+      await expectStableHistoryStartGutter(page);
+
+      await userScrollsTimelineToHistoryStart(page);
+      await history.expectRequestedPages(1);
+      await expectStableHistoryStartGutter(page);
+
+      history.releasePage(1);
+      await history.expectSettledWithRequestedPages(1);
+      await expectStableHistoryStartGutter(page);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("loads one page each time the user returns to history start", async ({ page }) => {
+    test.setTimeout(120_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 80 });
+    try {
+      const history = await holdOlderHistoryPages(page, agent);
+      await openAgentTimeline(page, agent);
+      await expectTimelinePromptVisible(page, agent.newestPrompt);
+      await expectTimelinePromptCentered(page, agent.newestPrompt);
+      await expectTimelinePromptNotMounted(page, agent.oldestPrompt);
+
+      await userScrollsTimelineToHistoryStart(page);
+      await history.expectRequestedPages(1);
+      history.releasePage(1);
+      await history.expectSettledWithRequestedPages(1);
+      await expectTimelinePromptCentered(page, agent.firstOlderPagePrompt);
+
+      await userScrollsTimelineToHistoryStart(page);
+      await history.expectRequestedPages(2);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("loads older history when the user navigates to history start with the keyboard", async ({
+    page,
+  }) => {
+    const agent = await seedLongMockAgentTimeline({ turns: 40 });
+    try {
+      const history = await holdOlderHistoryPages(page, agent);
+      await openAgentTimeline(page, agent);
+
+      await userNavigatesTimelineToHistoryStartWithKeyboard(page);
+      await history.expectRequestedPages(1);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("does not repeat an assistant block that spans older history pages", async ({ page }) => {
+    test.setTimeout(120_000);
+    const agent = await seedRealisticOlderTimeline();
+    try {
+      const history = await holdOlderHistoryPages(page, agent);
+      await openAgentTimeline(page, agent);
+      await expectTimelinePromptVisible(page, agent.newestPrompt);
+
+      await scrollThroughOlderHistoryPages(page, 3, history);
+      history.expectNoRepeatedAssistantEntries();
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("keeps the visible timeline position anchored while prepending a page", async ({ page }) => {
+    test.setTimeout(120_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 80 });
+    try {
+      const history = await holdOlderHistoryPages(page, agent);
+      await openAgentTimeline(page, agent);
+      await userScrollsTimelineToHistoryStart(page);
+      await history.expectRequestedPages(1);
+      const viewport = await rememberTimelineViewport(page);
+
+      history.releasePage(1);
+      await expectTimelineViewportAnchoredAfterPrepend(page, viewport);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("keeps visible history anchored when live output grows during a prepend", async ({
     page,
   }) => {
     test.setTimeout(120_000);
     const agent = await seedLongMockAgentTimeline({ turns: 80 });
     try {
+      const history = await holdOlderHistoryPages(page, agent);
       await openAgentTimeline(page, agent);
-      await expectTimelinePromptVisible(page, agent.newestPrompt);
-      await expectTimelinePromptNotMounted(page, agent.oldestPrompt);
+      await userScrollsTimelineToHistoryStart(page);
+      await history.expectRequestedPages(1);
+      const position = await rememberTimelinePromptPosition(page, agent.initialTailOldestPrompt);
 
-      await scrollTimelineUntilOlderHistoryIsReachable(page);
+      await agent.client.sendAgentMessage(
+        agent.agentId,
+        "timeline live during held older page: emit 20 coalesced agent stream updates",
+      );
+      await agent.client.waitForFinish(agent.agentId, 15_000);
+      history.releasePage(1);
+
+      await expectTimelinePromptPositionPreserved(page, position);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("finishes loading an older page while live output continues", async ({ page }) => {
+    test.setTimeout(120_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 40 });
+    try {
+      const history = await holdOlderHistoryPages(page, agent);
+      await openAgentTimeline(page, agent);
+      await userScrollsTimelineToHistoryStart(page);
+      await history.expectRequestedPages(1);
+
+      await agent.client.sendAgentMessage(agent.agentId, "keep streaming while history settles");
+      await agent.client.waitForAgentUpsert(
+        agent.agentId,
+        (snapshot) => snapshot.status === "running",
+      );
+      history.releasePage(1);
+
+      await expect(page.getByTestId("load-older-history-spinner")).toBeHidden({ timeout: 5_000 });
+      const running = await agent.client.fetchAgents({ scope: "active" });
+      expect(running.entries.find((entry) => entry.agent.id === agent.agentId)?.agent.status).toBe(
+        "running",
+      );
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("keeps the visible timeline anchored when the final page finishes", async ({ page }) => {
+    test.setTimeout(120_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 40 });
+    try {
+      const history = await holdOlderHistoryPages(page, agent);
+      await openAgentTimeline(page, agent);
+      await userScrollsTimelineToHistoryStart(page);
+      await history.expectRequestedPages(1);
+      const position = await rememberTimelinePromptPosition(page, agent.initialTailOldestPrompt);
+
+      history.releasePage(1);
+
+      await expectTimelinePromptPositionPreserved(page, position);
+      await history.expectSettledWithRequestedPages(1);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("continues one loading operation while older pages still leave history start exposed", async ({
+    page,
+  }) => {
+    test.setTimeout(120_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 80 });
+    try {
+      await makeLoadedTimelineFitViewport(page);
+      const history = await holdOlderHistoryPages(page, agent);
+      await openAgentTimeline(page, agent);
+      await scrollTimelineToOldestLoadedEdge(page);
+      await history.expectRequestedPages(1);
+      const loading = await rememberOlderHistoryLoadingOperation(page);
+
+      history.releasePage(1);
+      await history.expectRequestedPages(2);
+      await expectTimelineAtHistoryStart(page);
+      await expectSameOlderHistoryLoadingOperation(page, loading);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("keeps complete loaded history reachable after reload", async ({ page }) => {
+    test.setTimeout(120_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 80 });
+    try {
+      await openAgentTimeline(page, agent);
+      await scrollTimelineUntilOlderHistoryIsReachable(page, agent.oldestPrompt);
+      await expectTimelinePromptVisible(page, agent.oldestPrompt);
+
+      const hydration = await holdDaemonHydration(page);
+      await reloadAgentTimelineFromPersistedReplica(page, agent);
+      hydration.release();
+      await scrollTimelineUntilOlderHistoryIsReachable(page, agent.oldestPrompt);
 
       await expectTimelinePromptVisible(page, agent.oldestPrompt);
     } finally {
@@ -29,18 +231,27 @@ test.describe("Agent timeline pagination", () => {
     }
   });
 
-  test("loads older history when the initial page does not fill the viewport", async ({ page }) => {
+  test("preserves a live row received before replica hydration", async ({ page }) => {
     test.setTimeout(120_000);
-    const agent = await seedLongMockAgentTimeline({ turns: 30 });
+    const agent = await seedLongMockAgentTimeline({ turns: 80 });
     try {
-      await makeLoadedTimelineFitViewport(page);
-      const olderPage = await holdNextOlderTimelinePage(page, agent);
       await openAgentTimeline(page, agent);
-      await expectTimelinePromptVisible(page, agent.newestPrompt);
-      await expectLoadedTimelineDoesNotScroll(page);
-      await olderPage.expectLoading();
-      olderPage.release();
+      await scrollTimelineUntilOlderHistoryIsReachable(page, agent.oldestPrompt);
+
+      const hydration = await holdBootstrapTimelinePage(page, agent);
+      await reloadAgentTimelineFromPersistedReplica(page, agent);
+      await hydration.waitForDelayedResponse();
+      const livePrompt = await sendLiveTurnBeforeHydration(agent);
+      await expectTimelinePromptVisible(page, livePrompt);
+
+      hydration.release();
+      await hydration.waitForDelayedCatchUp();
+      await expectTimelinePromptVisible(page, livePrompt);
+      hydration.releaseCatchUp();
+      await scrollTimelineUntilOlderHistoryIsReachable(page, agent.oldestPrompt);
       await expectTimelinePromptVisible(page, agent.oldestPrompt);
+      await scrollTimelineToNewestLoadedEdge(page);
+      await expectTimelinePromptVisible(page, livePrompt);
     } finally {
       await agent.cleanup();
     }

packages/app/e2e/agent-timeline-resume.spec.ts

@@ -0,0 +1,65 @@
+import { test } from "./fixtures";
+import { installDaemonWebSocketGate } from "./helpers/daemon-websocket-gate";
+import {
+  expectTimelinePresentationUnchanged,
+  expectTimelinePromptNotMounted,
+  expectTimelinePromptVisible,
+  openAgentTimeline,
+  rememberTimelinePresentation,
+  scrollTimelinePromptIntoView,
+  scrollTimelineUntilOlderHistoryIsReachable,
+  seedLongMockAgentTimeline,
+} from "./helpers/timeline-pagination";
+import {
+  commitTimelineTurnsWhileDisconnected,
+  disconnectViewedTimeline,
+  expectOneTailCheckWithoutCatchUpPages,
+  rememberTimelineRequestCounts,
+  restoreViewedTimelineWithHeldTail,
+} from "./helpers/timeline-resume";
+
+test.describe("Agent timeline resume", () => {
+  test("a long disconnected run lands as one latest-tail update", async ({ page }) => {
+    test.setTimeout(120_000);
+    const gate = await installDaemonWebSocketGate(page);
+    const agent = await seedLongMockAgentTimeline({ turns: 3 });
+    try {
+      await openAgentTimeline(page, agent);
+      await expectTimelinePromptVisible(page, agent.newestPrompt);
+      const requests = rememberTimelineRequestCounts(gate);
+      await disconnectViewedTimeline(page, gate);
+      const background = await commitTimelineTurnsWhileDisconnected(agent, 24);
+      await restoreViewedTimelineWithHeldTail(page, gate);
+
+      await expectTimelinePromptVisible(page, background.newestPrompt);
+      await expectTimelinePromptNotMounted(page, background.firstPrompt);
+      expectOneTailCheckWithoutCatchUpPages(gate, requests);
+      await scrollTimelineUntilOlderHistoryIsReachable(page, background.firstPrompt);
+    } finally {
+      gate.restore();
+      await agent.cleanup();
+    }
+  });
+
+  test("an unchanged resume leaves a scrolled-up timeline untouched", async ({ page }) => {
+    test.setTimeout(120_000);
+    const gate = await installDaemonWebSocketGate(page);
+    const agent = await seedLongMockAgentTimeline({ turns: 30 });
+    try {
+      await openAgentTimeline(page, agent);
+      await expectTimelinePromptVisible(page, agent.newestPrompt);
+      await scrollTimelinePromptIntoView(page, agent.initialTailAnchorPrompt);
+      const presentation = await rememberTimelinePresentation(page, agent.initialTailAnchorPrompt);
+      const requests = rememberTimelineRequestCounts(gate);
+
+      await disconnectViewedTimeline(page, gate);
+      await restoreViewedTimelineWithHeldTail(page, gate);
+
+      await expectTimelinePresentationUnchanged(page, presentation);
+      expectOneTailCheckWithoutCatchUpPages(gate, requests);
+    } finally {
+      gate.restore();
+      await agent.cleanup();
+    }
+  });
+});

packages/app/e2e/helpers/agent-message-gate.ts

@@ -0,0 +1,86 @@
+import type { Page, WebSocketRoute } from "@playwright/test";
+import { daemonWsRoutePattern } from "./daemon-port";
+
+type WebSocketMessage = string | Buffer;
+
+interface SendAgentMessageRequest {
+  type: "send_agent_message_request";
+  requestId: string;
+  agentId: string;
+}
+
+function readSendRequest(message: WebSocketMessage): SendAgentMessageRequest | null {
+  if (typeof message !== "string") return null;
+  try {
+    const envelope = JSON.parse(message) as {
+      type?: unknown;
+      message?: Record<string, unknown>;
+    };
+    const request = envelope.type === "session" ? envelope.message : null;
+    if (
+      request?.type !== "send_agent_message_request" ||
+      typeof request.requestId !== "string" ||
+      typeof request.agentId !== "string"
+    ) {
+      return null;
+    }
+    return {
+      type: "send_agent_message_request",
+      requestId: request.requestId,
+      agentId: request.agentId,
+    };
+  } catch {
+    return null;
+  }
+}
+
+export async function gateNextAgentMessage(page: Page) {
+  let serverSocket: WebSocketRoute | null = null;
+  let browserSocket: WebSocketRoute | null = null;
+  const heldMessages: Array<WebSocketMessage | null> = [];
+  const requests: SendAgentMessageRequest[] = [];
+  const requestWaiters = new Set<() => void>();
+
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    browserSocket = ws;
+    const server = ws.connectToServer();
+    serverSocket = server;
+
+    ws.onMessage((message) => {
+      const request = readSendRequest(message);
+      if (request) {
+        heldMessages.push(message);
+        requests.push(request);
+        for (const resolve of requestWaiters) resolve();
+        requestWaiters.clear();
+        return;
+      }
+      server.send(message);
+    });
+
+    server.onMessage((message) => ws.send(message));
+  });
+
+  const waitForRequest = async (count = 1): Promise<SendAgentMessageRequest> => {
+    while (requests.length < count) {
+      await new Promise<void>((resolve) => requestWaiters.add(resolve));
+    }
+    return requests[count - 1];
+  };
+
+  return {
+    waitForRequest,
+    accept(index = 0) {
+      const heldMessage = heldMessages[index];
+      if (!serverSocket || !heldMessage) {
+        throw new Error("No held send-agent-message request to accept");
+      }
+      serverSocket.send(heldMessage);
+      heldMessages[index] = null;
+    },
+    async disconnect(): Promise<void> {
+      if (!browserSocket) throw new Error("No browser daemon socket to disconnect");
+      await browserSocket.close({ code: 1008, reason: "Dropped by submission test." });
+    },
+  };
+}

packages/app/e2e/helpers/agent-stream.ts

@@ -22,6 +22,50 @@ export async function expectInlineWorkingIndicator(page: Page): Promise<void> {
   await expect(page.getByTestId("turn-working-indicator")).toBeVisible({ timeout: 30_000 });
 }
 
+export async function expectRunningAgentChrome(page: Page, title: string): Promise<void> {
+  const tab = page.getByRole("button", { name: title, exact: true });
+
+  await expect(tab).toBeVisible({ timeout: 30_000 });
+  await expect(tab.getByRole("progressbar", { name: "Agent running" })).toBeVisible({
+    timeout: 30_000,
+  });
+  await expect(page.getByRole("button", { name: /stop agent|canceling agent/i })).toBeVisible({
+    timeout: 30_000,
+  });
+  await expectInlineWorkingIndicator(page);
+}
+
+export async function expectAgentReadyToInterrupt(page: Page): Promise<void> {
+  await expect(page.getByRole("button", { name: "Stop agent", exact: true })).toBeVisible({
+    timeout: 30_000,
+  });
+  await expect(page.getByRole("button", { name: "Canceling agent", exact: true })).toHaveCount(0);
+}
+
+export async function expectVisibleAgentSurfacesIdle(page: Page): Promise<void> {
+  const visibleAgentTab = page
+    .getByTestId(/^workspace-tab-agent_/)
+    .filter({ visible: true })
+    .first();
+
+  await expect(visibleAgentTab).toBeVisible({ timeout: 30_000 });
+  await expect(visibleAgentTab.getByRole("progressbar", { name: "Agent running" })).toHaveCount(0);
+  await expect(page.getByRole("button", { name: /stop agent|canceling agent/i })).toHaveCount(0);
+  await expect(page.getByTestId("turn-working-indicator")).toHaveCount(0);
+  await expect(page.getByTestId("turn-working-elapsed")).toHaveCount(0);
+}
+
+export async function expectAgentSurfacesIdle(page: Page, title: string): Promise<void> {
+  const tab = page.getByRole("button", { name: title, exact: true });
+
+  await expect(tab).toBeVisible({ timeout: 30_000 });
+  await expect(tab.getByRole("progressbar", { name: "Agent running" })).toHaveCount(0);
+  await expect(page.getByRole("button", { name: /stop agent|canceling agent/i })).toHaveCount(0);
+  await expect(page.getByTestId("turn-working-indicator")).toHaveCount(0);
+  await expect(page.getByTestId("turn-working-elapsed")).toHaveCount(0);
+  await expectTurnCopyButton(page);
+}
+
 export async function expectTurnCopyButton(page: Page): Promise<void> {
   await expect(page.getByRole("button", { name: "Copy turn" }).first()).toBeVisible({
     timeout: 30_000,

packages/app/e2e/helpers/agent-timeline-gate.ts

@@ -15,6 +15,22 @@ export interface AgentTimelineResponseGate {
   waitForDelayedResponse(): Promise<void>;
 }
 
+export interface OlderTimelinePagesGate {
+  getRequestCount(): number;
+  getRepeatedAssistantEntryCount(): number;
+  releasePage(pageNumber: number): void;
+  waitForRequestCount(count: number): Promise<void>;
+}
+
+export interface DaemonHydrationGate {
+  release(): void;
+}
+
+export interface BootstrapTimelineGate extends AgentTimelineResponseGate {
+  releaseCatchUp(): void;
+  waitForDelayedCatchUp(): Promise<void>;
+}
+
 function parseWebSocketJson(message: WebSocketMessage): unknown {
   const rawMessage = typeof message === "string" ? message : message.toString("utf8");
   try {
@@ -45,6 +61,32 @@ function getPayload(message: Record<string, unknown>): Record<string, unknown> |
     : null;
 }
 
+export async function holdDaemonHydration(page: Page): Promise<DaemonHydrationGate> {
+  let released = false;
+  const delayedForwards: Array<() => void> = [];
+
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    const server = ws.connectToServer();
+    ws.onMessage((message) => server.send(message));
+    server.onMessage((message) => {
+      if (released) {
+        ws.send(message);
+        return;
+      }
+      delayedForwards.push(() => ws.send(message));
+    });
+  });
+
+  return {
+    release() {
+      released = true;
+      for (const forward of delayedForwards.splice(0)) {
+        forward();
+      }
+    },
+  };
+}
+
 export async function delayCreatedAgentInitialTailResponse(
   page: Page,
 ): Promise<CreatedAgentTimelineGate> {
@@ -127,6 +169,165 @@ export async function delayCreatedAgentInitialTailResponse(
 export async function delayAgentOlderTimelineResponse(
   page: Page,
   agentId: string,
+): Promise<AgentTimelineResponseGate> {
+  return delayAgentTimelineResponse(page, agentId, "before");
+}
+
+export async function holdAgentOlderTimelinePages(
+  page: Page,
+  agentId: string,
+): Promise<OlderTimelinePagesGate> {
+  let requestCount = 0;
+  let responseCount = 0;
+  let repeatedAssistantEntryCount = 0;
+  const assistantEntryKeys = new Set<string>();
+  const releasedPages = new Set<number>();
+  const delayedForwards = new Map<number, Array<() => void>>();
+  const requestWaiters = new Map<number, Array<() => void>>();
+
+  const resolveRequestWaiters = () => {
+    for (const [count, resolvers] of requestWaiters) {
+      if (requestCount < count) continue;
+      requestWaiters.delete(count);
+      for (const resolve of resolvers) resolve();
+    }
+  };
+
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    const server = ws.connectToServer();
+    ws.onMessage((message) => {
+      const sessionMessage = getSessionMessage(message);
+      if (
+        sessionMessage?.type === "fetch_agent_timeline_request" &&
+        sessionMessage.agentId === agentId &&
+        sessionMessage.direction === "before"
+      ) {
+        requestCount += 1;
+        resolveRequestWaiters();
+      }
+      server.send(message);
+    });
+    server.onMessage((message) => {
+      const sessionMessage = getSessionMessage(message);
+      const payload = sessionMessage ? getPayload(sessionMessage) : null;
+      if (
+        sessionMessage?.type === "fetch_agent_timeline_response" &&
+        payload?.agentId === agentId &&
+        payload.direction === "before"
+      ) {
+        responseCount += 1;
+        const entries = Array.isArray(payload.entries) ? payload.entries : [];
+        for (const entry of entries) {
+          if (!entry || typeof entry !== "object") continue;
+          const projectedEntry = entry as {
+            seqStart?: unknown;
+            seqEnd?: unknown;
+            item?: { type?: unknown };
+          };
+          if (
+            typeof projectedEntry.seqStart !== "number" ||
+            typeof projectedEntry.seqEnd !== "number" ||
+            typeof projectedEntry.item?.type !== "string"
+          ) {
+            continue;
+          }
+          if (projectedEntry.item.type !== "assistant_message") continue;
+          const key = `${projectedEntry.seqStart}:${projectedEntry.seqEnd}:${projectedEntry.item.type}`;
+          if (assistantEntryKeys.has(key)) repeatedAssistantEntryCount += 1;
+          else assistantEntryKeys.add(key);
+        }
+        const pageNumber = responseCount;
+        if (releasedPages.has(pageNumber)) {
+          ws.send(message);
+          return;
+        }
+        const forwards = delayedForwards.get(pageNumber) ?? [];
+        forwards.push(() => ws.send(message));
+        delayedForwards.set(pageNumber, forwards);
+        return;
+      }
+      ws.send(message);
+    });
+  });
+
+  return {
+    getRequestCount: () => requestCount,
+    getRepeatedAssistantEntryCount: () => repeatedAssistantEntryCount,
+    releasePage(pageNumber) {
+      releasedPages.add(pageNumber);
+      for (const forward of delayedForwards.get(pageNumber) ?? []) forward();
+      delayedForwards.delete(pageNumber);
+    },
+    waitForRequestCount(count) {
+      if (requestCount >= count) return Promise.resolve();
+      return new Promise<void>((resolve) => {
+        const resolvers = requestWaiters.get(count) ?? [];
+        resolvers.push(resolve);
+        requestWaiters.set(count, resolvers);
+      });
+    },
+  };
+}
+
+export async function delayAgentBootstrapTailResponse(
+  page: Page,
+  agentId: string,
+): Promise<BootstrapTimelineGate> {
+  let tailReleased = false;
+  let catchUpReleased = false;
+  const delayedTailForwards: Array<() => void> = [];
+  const delayedCatchUpForwards: Array<() => void> = [];
+  let resolveDelayedTail: (() => void) | null = null;
+  let resolveDelayedCatchUp: (() => void) | null = null;
+  const delayedTail = new Promise<void>((resolve) => {
+    resolveDelayedTail = resolve;
+  });
+  const delayedCatchUp = new Promise<void>((resolve) => {
+    resolveDelayedCatchUp = resolve;
+  });
+
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    const server = ws.connectToServer();
+    ws.onMessage((message) => server.send(message));
+    server.onMessage((message) => {
+      const sessionMessage = getSessionMessage(message);
+      const payload = sessionMessage ? getPayload(sessionMessage) : null;
+      const isTimelineResponse =
+        sessionMessage?.type === "fetch_agent_timeline_response" && payload?.agentId === agentId;
+      if (isTimelineResponse && payload.direction === "tail") {
+        resolveDelayedTail?.();
+        if (tailReleased) ws.send(message);
+        else delayedTailForwards.push(() => ws.send(message));
+        return;
+      }
+      if (isTimelineResponse && payload.direction === "after") {
+        resolveDelayedCatchUp?.();
+        if (catchUpReleased) ws.send(message);
+        else delayedCatchUpForwards.push(() => ws.send(message));
+        return;
+      }
+      ws.send(message);
+    });
+  });
+
+  return {
+    release() {
+      tailReleased = true;
+      for (const forward of delayedTailForwards.splice(0)) forward();
+    },
+    releaseCatchUp() {
+      catchUpReleased = true;
+      for (const forward of delayedCatchUpForwards.splice(0)) forward();
+    },
+    waitForDelayedResponse: () => delayedTail,
+    waitForDelayedCatchUp: () => delayedCatchUp,
+  };
+}
+
+async function delayAgentTimelineResponse(
+  page: Page,
+  agentId: string,
+  direction: "before" | "tail",
 ): Promise<AgentTimelineResponseGate> {
   let releaseRequested = false;
   let delayedResponseSeen = false;
@@ -148,7 +349,7 @@ export async function delayAgentOlderTimelineResponse(
         !delayedResponseSeen &&
         sessionMessage?.type === "fetch_agent_timeline_response" &&
         payload?.agentId === agentId &&
-        payload.direction === "before"
+        payload.direction === direction
       ) {
         delayedResponseSeen = true;
         resolveDelayedResponse?.();

packages/app/e2e/helpers/assistant-images.ts

@@ -0,0 +1,343 @@
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { deflateSync } from "node:zlib";
+import { expect, type Page } from "@playwright/test";
+import type { ArchiveTabAgent } from "./archive-tab";
+import { openWorkspaceWithAgents } from "./archive-tab";
+import { submitMessage } from "./composer";
+import type { SeedDaemonClient, SeededWorkspace } from "./seed-client";
+import { openAgentRoute } from "./mock-agent";
+import { rememberTimelineViewport, userScrollsTimelineToHistoryStart } from "./timeline-pagination";
+
+const IMAGE_PREVIEW_ERROR = "Unable to load image preview.";
+const SMALL_PNG = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==",
+  "base64",
+);
+const TEN_MEBIBYTES = 10 * 1024 * 1024;
+
+export interface AssistantImageFixture {
+  alt: string;
+  height: number;
+  relativePath: string;
+  size: number;
+  width: number;
+}
+
+export async function createSmallAssistantPng(
+  workspace: SeededWorkspace,
+  input: { alt: string; fileName: string },
+): Promise<AssistantImageFixture> {
+  await writeFile(path.join(workspace.repoPath, input.fileName), SMALL_PNG);
+  return {
+    alt: input.alt,
+    height: 1,
+    relativePath: input.fileName,
+    size: SMALL_PNG.byteLength,
+    width: 1,
+  };
+}
+
+export async function createNearTenMegabyteAssistantPng(
+  workspace: SeededWorkspace,
+  input: { alt: string; fileName: string },
+): Promise<AssistantImageFixture> {
+  const width = 2_048;
+  const height = 1_280;
+  const bytes = encodeDeterministicPng(width, height);
+  if (bytes.byteLength < TEN_MEBIBYTES * 0.95 || bytes.byteLength > TEN_MEBIBYTES * 1.05) {
+    throw new Error(`Expected a PNG near 10 MiB, encoded ${bytes.byteLength} bytes`);
+  }
+  await writeFile(path.join(workspace.repoPath, input.fileName), bytes);
+  return {
+    alt: input.alt,
+    height,
+    relativePath: input.fileName,
+    size: bytes.byteLength,
+    width,
+  };
+}
+
+export async function createSettledMockAgent(
+  workspace: SeededWorkspace,
+  title: string,
+): Promise<ArchiveTabAgent> {
+  const agent = await workspace.client.createAgent({
+    provider: "mock",
+    model: "ten-second-stream",
+    modeId: "load-test",
+    cwd: workspace.repoPath,
+    workspaceId: workspace.workspaceId,
+    title,
+  });
+  await workspace.client.waitForAgentUpsert(
+    agent.id,
+    (snapshot) => snapshot.status === "idle",
+    30_000,
+  );
+  return {
+    id: agent.id,
+    title,
+    cwd: workspace.repoPath,
+    workspaceId: workspace.workspaceId,
+  };
+}
+
+export async function emitSettledAssistantImage(
+  client: SeedDaemonClient,
+  agent: ArchiveTabAgent,
+  image: AssistantImageFixture,
+): Promise<void> {
+  await client.sendAgentMessage(
+    agent.id,
+    `Emit settled assistant image Markdown: ![${image.alt}](${image.relativePath})`,
+  );
+  const result = await client.waitForFinish(agent.id, 30_000);
+  if (result.status !== "idle" || result.final?.lastError) {
+    throw new Error(
+      `Assistant image agent did not settle: ${result.final?.lastError ?? result.status}`,
+    );
+  }
+}
+
+export async function appendSettledTimelineTurns(
+  client: SeedDaemonClient,
+  agent: ArchiveTabAgent,
+  count: number,
+): Promise<void> {
+  for (let index = 0; index < count; index += 1) {
+    await client.sendAgentMessage(
+      agent.id,
+      `image-history-turn-${index}: emit 1 coalesced agent stream updates`,
+    );
+    const result = await client.waitForFinish(agent.id, 30_000);
+    if (result.status !== "idle" || result.final?.lastError) {
+      throw new Error(
+        `Assistant image history turn did not settle: ${result.final?.lastError ?? result.status}`,
+      );
+    }
+  }
+}
+
+export async function expectAssistantImageRendered(
+  page: Page,
+  image: AssistantImageFixture,
+): Promise<void> {
+  const rendered = page.getByRole("img", { name: image.alt }).first();
+  await expect(rendered).toBeVisible({ timeout: 30_000 });
+  await expect
+    .poll(async () =>
+      rendered.evaluate((element) => {
+        const imageElement =
+          element instanceof HTMLImageElement ? element : element.querySelector("img");
+        return imageElement?.complete
+          ? { height: imageElement.naturalHeight, width: imageElement.naturalWidth }
+          : null;
+      }),
+    )
+    .toEqual({ height: image.height, width: image.width });
+}
+
+export async function switchAwayAndBackWithoutImageInstability(
+  page: Page,
+  input: {
+    image: AssistantImageFixture;
+    imageAgent: ArchiveTabAgent;
+    otherAgent: ArchiveTabAgent;
+  },
+): Promise<void> {
+  await beginVisibleImageStabilityObservation(page, input.image.alt, input.imageAgent.id);
+  await selectSettledAgentTab(page, input.otherAgent);
+  await selectSettledAgentTab(page, input.imageAgent);
+  await expectAssistantImageRendered(page, input.image);
+  await expectNoVisibleImageInstability(page);
+}
+
+export async function openExistingImageAgentTabs(
+  page: Page,
+  input: { imageAgent: ArchiveTabAgent; otherAgent: ArchiveTabAgent },
+): Promise<void> {
+  await openWorkspaceWithAgents(page, [input.otherAgent, input.imageAgent]);
+}
+
+export async function openAssistantImageTimeline(
+  page: Page,
+  agent: ArchiveTabAgent,
+): Promise<void> {
+  await openAgentRoute(page, { workspaceId: agent.workspaceId, agentId: agent.id });
+}
+
+export async function expectAssistantImageNotMounted(
+  page: Page,
+  image: AssistantImageFixture,
+): Promise<void> {
+  await expect(page.getByRole("img", { name: image.alt })).toHaveCount(0);
+}
+
+export async function userPagesUntilAssistantImageRenders(
+  page: Page,
+  image: AssistantImageFixture,
+): Promise<void> {
+  const rendered = page.getByRole("img", { name: image.alt });
+  for (let attempt = 0; attempt < 10; attempt += 1) {
+    if ((await rendered.count()) > 0) {
+      await expectAssistantImageRendered(page, image);
+      return;
+    }
+    const previous = await rememberTimelineViewport(page);
+    await userScrollsTimelineToHistoryStart(page);
+    await expect
+      .poll(async () => (await rememberTimelineViewport(page)).scrollHeight)
+      .toBeGreaterThan(previous.scrollHeight);
+  }
+  await expectAssistantImageRendered(page, image);
+}
+
+export async function remountAndRecoverAssistantImageFromHistory(
+  page: Page,
+  image: AssistantImageFixture,
+): Promise<void> {
+  await page.reload();
+  await userPagesUntilAssistantImageRenders(page, image);
+}
+
+export async function sendFollowUpAndExpectVisibleResponse(
+  page: Page,
+  input: { prompt: string; response: string },
+): Promise<void> {
+  await submitMessage(page, input.prompt);
+  await expect(page.getByText(input.prompt, { exact: true })).toBeVisible({ timeout: 30_000 });
+  await expect(page.getByText(input.response, { exact: true })).toBeVisible({ timeout: 30_000 });
+}
+
+async function selectSettledAgentTab(page: Page, agent: ArchiveTabAgent): Promise<void> {
+  const tab = page.getByRole("button", { name: agent.title, exact: true });
+  await tab.click();
+  await expect(page).toHaveTitle(agent.title);
+  await expect(tab).toHaveAttribute("aria-selected", "true");
+  await expect(page.locator('[data-testid="agent-chat-scroll"]:visible').first()).toBeVisible({
+    timeout: 30_000,
+  });
+}
+
+async function beginVisibleImageStabilityObservation(
+  page: Page,
+  alt: string,
+  imageAgentId: string,
+): Promise<void> {
+  await page.evaluate(
+    ({ accessibleName, errorText, tabTestId }) => {
+      const record = {
+        errorSeen: false,
+        missingSeen: false,
+        inspect: () => undefined,
+        observer: null as MutationObserver | null,
+      };
+      const isVisible = (element: Element) => {
+        const rect = element.getBoundingClientRect();
+        return rect.width > 0 && rect.height > 0;
+      };
+      record.inspect = () => {
+        record.errorSeen ||= Array.from(document.querySelectorAll("*")).some(
+          (element) =>
+            element.children.length === 0 &&
+            element.textContent?.trim() === errorText &&
+            isVisible(element),
+        );
+        const imageTab = document.querySelector(`[data-testid="${tabTestId}"]`);
+        if (imageTab?.getAttribute("aria-selected") !== "true") return;
+        const imageVisible = Array.from(document.querySelectorAll('[role="img"]')).some(
+          (element) => element.getAttribute("aria-label") === accessibleName && isVisible(element),
+        );
+        record.missingSeen ||= !imageVisible;
+      };
+      record.observer = new MutationObserver(record.inspect);
+      record.observer.observe(document.body, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+      record.inspect();
+      (
+        window as unknown as {
+          __paseoAssistantImageObservation?: typeof record;
+        }
+      ).__paseoAssistantImageObservation = record;
+    },
+    {
+      accessibleName: alt,
+      errorText: IMAGE_PREVIEW_ERROR,
+      tabTestId: `workspace-tab-agent_${imageAgentId}`,
+    },
+  );
+}
+
+async function expectNoVisibleImageInstability(page: Page): Promise<void> {
+  const observation = await page.evaluate(() => {
+    const owner = window as unknown as {
+      __paseoAssistantImageObservation?: {
+        errorSeen: boolean;
+        missingSeen: boolean;
+        inspect(): void;
+        observer: MutationObserver | null;
+      };
+    };
+    const record = owner.__paseoAssistantImageObservation;
+    if (!record) throw new Error("Assistant image stability observation was not started");
+    record.inspect();
+    record.observer?.disconnect();
+    delete owner.__paseoAssistantImageObservation;
+    return { errorSeen: record.errorSeen, missingSeen: record.missingSeen };
+  });
+  expect(observation).toEqual({ errorSeen: false, missingSeen: false });
+}
+
+function encodeDeterministicPng(width: number, height: number): Buffer {
+  const stride = width * 4 + 1;
+  const scanlines = Buffer.allocUnsafe(stride * height);
+  let state = 0x9e3779b9;
+  for (let row = 0; row < height; row += 1) {
+    const rowOffset = row * stride;
+    scanlines[rowOffset] = 0;
+    for (let offset = 1; offset < stride; offset += 1) {
+      state ^= state << 13;
+      state ^= state >>> 17;
+      state ^= state << 5;
+      scanlines[rowOffset + offset] = state & 0xff;
+    }
+  }
+
+  const header = Buffer.alloc(13);
+  header.writeUInt32BE(width, 0);
+  header.writeUInt32BE(height, 4);
+  header[8] = 8;
+  header[9] = 6;
+  return Buffer.concat([
+    Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]),
+    pngChunk("IHDR", header),
+    pngChunk("IDAT", deflateSync(scanlines, { level: 0 })),
+    pngChunk("IEND", Buffer.alloc(0)),
+  ]);
+}
+
+function pngChunk(type: string, data: Buffer): Buffer {
+  const typeBytes = Buffer.from(type, "ascii");
+  const chunk = Buffer.allocUnsafe(12 + data.byteLength);
+  chunk.writeUInt32BE(data.byteLength, 0);
+  typeBytes.copy(chunk, 4);
+  data.copy(chunk, 8);
+  chunk.writeUInt32BE(crc32(Buffer.concat([typeBytes, data])), 8 + data.byteLength);
+  return chunk;
+}
+
+function crc32(bytes: Buffer): number {
+  let crc = 0xffffffff;
+  for (const byte of bytes) {
+    crc ^= byte;
+    for (let bit = 0; bit < 8; bit += 1) {
+      crc = (crc >>> 1) ^ (crc & 1 ? 0xedb88320 : 0);
+    }
+  }
+  return (crc ^ 0xffffffff) >>> 0;
+}

packages/app/e2e/helpers/daemon-websocket-gate.ts

@@ -14,8 +14,10 @@ export interface DirectoryRequestStartCounts {
 
 interface ClientRequest {
   type?: unknown;
+  direction?: unknown;
   subscribe?: unknown;
   page?: { cursor?: unknown };
+  payload?: unknown;
   mode?: unknown;
   path?: unknown;
 }
@@ -33,6 +35,31 @@ interface ServerMessage {
   };
 }
 
+interface HeldAgentUpdate {
+  agentId: string;
+  status: string;
+}
+
+interface HeldServerMessage {
+  browser: WebSocketRoute;
+  message: string | Buffer;
+  key: string;
+  agentStreamFollowers: Array<string | Buffer>;
+  blockedAgentId?: string;
+}
+
+function readSessionMessage(message: string | Buffer): ClientRequest | null {
+  try {
+    const envelope = JSON.parse(typeof message === "string" ? message : message.toString()) as {
+      type?: unknown;
+      message?: ClientRequest;
+    };
+    return envelope.message ?? envelope;
+  } catch {
+    return null;
+  }
+}
+
 function readClientRequest(message: string | Buffer): ClientRequest | null {
   if (typeof message !== "string") return null;
   try {
@@ -46,18 +73,6 @@ function readClientRequest(message: string | Buffer): ClientRequest | null {
   }
 }
 
-function readServerMessage(message: string | Buffer): ServerMessage | null {
-  try {
-    const envelope = JSON.parse(typeof message === "string" ? message : message.toString()) as {
-      type?: unknown;
-      message?: ServerMessage;
-    };
-    return envelope.type === "session" ? (envelope.message ?? null) : envelope;
-  } catch {
-    return null;
-  }
-}
-
 function directoryForRequest(request: ClientRequest): keyof DirectoryBootstrapCounts | null {
   if (request.page?.cursor) return null;
   if (request.type === "fetch_agents_request") return "agents";
@@ -65,15 +80,170 @@ function directoryForRequest(request: ClientRequest): keyof DirectoryBootstrapCo
   return null;
 }
 
+function stripAssistantMessageId(
+  message: string | Buffer,
+  enabled: boolean,
+  messageType: unknown,
+): string | Buffer {
+  if (!enabled || messageType !== "agent_stream" || typeof message !== "string") return message;
+  const envelope = JSON.parse(message) as {
+    message?: { payload?: { event?: { type?: unknown; item?: Record<string, unknown> } } };
+    payload?: { event?: { type?: unknown; item?: Record<string, unknown> } };
+  };
+  const event = (envelope.message?.payload ?? envelope.payload)?.event;
+  if (event?.type !== "timeline" || event.item?.type !== "assistant_message") return message;
+  delete event.item.messageId;
+  return JSON.stringify(envelope);
+}
+
+function stripCanonicalSubmittedPrompts(
+  message: string | Buffer,
+  enabled: boolean,
+  messageType: unknown,
+): string | Buffer {
+  if (!enabled || messageType !== "status" || typeof message !== "string") return message;
+  const envelope = JSON.parse(message) as {
+    message?: { payload?: { status?: unknown; features?: Record<string, unknown> } };
+    payload?: { status?: unknown; features?: Record<string, unknown> };
+  };
+  const payload = envelope.message?.payload ?? envelope.payload;
+  if (payload?.status !== "server_info" || !payload.features) return message;
+  delete payload.features.canonicalSubmittedPrompts;
+  return JSON.stringify(envelope);
+}
+
+function forceTimelineReset(message: string | Buffer, enabled: boolean): string | Buffer {
+  if (!enabled || typeof message !== "string") return message;
+  const envelope = JSON.parse(message) as {
+    message?: { payload?: Record<string, unknown> };
+    payload?: Record<string, unknown>;
+  };
+  const payload = envelope.message?.payload ?? envelope.payload;
+  if (!payload) return message;
+  payload.epoch = `playwright-reset-${Date.now()}`;
+  payload.reset = true;
+  return JSON.stringify(envelope);
+}
+
+function readAgentStreamEventType(message: ClientRequest | null): string | null {
+  if (message?.type !== "agent_stream" || !message.payload || typeof message.payload !== "object") {
+    return null;
+  }
+  const event = (message.payload as { event?: { type?: unknown } }).event;
+  return typeof event?.type === "string" ? event.type : null;
+}
+
+function readAgentStreamAgentId(message: ClientRequest | null): string | null {
+  if (message?.type !== "agent_stream" || !message.payload || typeof message.payload !== "object") {
+    return null;
+  }
+  const agentId = (message.payload as { agentId?: unknown }).agentId;
+  return typeof agentId === "string" ? agentId : null;
+}
+
+function readAgentStreamItemType(message: ClientRequest | null): string | null {
+  if (message?.type !== "agent_stream" || !message.payload || typeof message.payload !== "object") {
+    return null;
+  }
+  const event = (message.payload as { event?: { type?: unknown; item?: { type?: unknown } } })
+    .event;
+  return event?.type === "timeline" && typeof event.item?.type === "string"
+    ? event.item.type
+    : null;
+}
+
+function shouldSuppressServerMessage(input: {
+  message: ClientRequest | null;
+  messageTypes: ReadonlySet<string>;
+  agentStreamEventTypes: ReadonlySet<string>;
+  agentStreamItemTypes: ReadonlySet<string>;
+  suppressAgentStream: boolean;
+}): boolean {
+  const messageType = typeof input.message?.type === "string" ? input.message.type : null;
+  if (messageType && input.messageTypes.has(messageType)) return true;
+  if (input.suppressAgentStream && messageType === "agent_stream") return true;
+  const itemType = readAgentStreamItemType(input.message);
+  if (itemType && input.agentStreamItemTypes.has(itemType)) return true;
+  const eventType = readAgentStreamEventType(input.message);
+  return Boolean(eventType && input.agentStreamEventTypes.has(eventType));
+}
+
+function serverMessageKey(type: string): string {
+  return `message:${type}`;
+}
+
+function agentStreamEventKey(type: string): string {
+  return `agent-stream-event:${type}`;
+}
+
+function agentUpdateKey(agentId: string, status: string): string {
+  return `agent-update:${agentId}:${status}`;
+}
+
+function matchesAgentUpdate(message: ClientRequest | null, agentUpdate: HeldAgentUpdate): boolean {
+  if (message?.type !== "agent_update") return false;
+  const payload = message.payload;
+  if (
+    !payload ||
+    typeof payload !== "object" ||
+    (payload as { kind?: unknown }).kind !== "upsert"
+  ) {
+    return false;
+  }
+  const agent = (payload as { agent?: { id?: unknown; status?: unknown } }).agent;
+  return agent?.id === agentUpdate.agentId && agent.status === agentUpdate.status;
+}
+
+function recordClientRequest(
+  request: ClientRequest | null,
+  clientRequestCounts: Map<string, number>,
+  timelineRequestCounts: Map<string, number>,
+  directoryStarts: DirectoryRequestStartCounts,
+): void {
+  if (typeof request?.type !== "string") return;
+  clientRequestCounts.set(request.type, (clientRequestCounts.get(request.type) ?? 0) + 1);
+  if (request.type === "fetch_agent_timeline_request" && typeof request.direction === "string") {
+    timelineRequestCounts.set(
+      request.direction,
+      (timelineRequestCounts.get(request.direction) ?? 0) + 1,
+    );
+  }
+  const directory = directoryForRequest(request);
+  if (!directory) return;
+  const subscription = request.subscribe === undefined ? "unsubscribed" : "subscribed";
+  directoryStarts[subscription][directory] += 1;
+  directoryStarts.total[directory] += 1;
+}
+
 export async function installDaemonWebSocketGate(page: Page) {
   let acceptingConnections = true;
+  let reconnectWithFreshClient = false;
+  let suppressAgentStream = false;
+  let forceTimelineEpochReset = false;
+  let stripAssistantMessageIds = false;
+  let stripCanonicalSubmittedPromptsFeature = false;
+  let heldClientRequestType: string | null = null;
+  let heldClientRequest: { server: WebSocketRoute; message: string | Buffer } | null = null;
+  let resolveHeldClientRequest: (() => void) | null = null;
+  const pendingServerMessageHolds = new Map<string, (message: ClientRequest | null) => boolean>();
+  const heldServerMessages: HeldServerMessage[] = [];
+  const heldServerMessageWaiters = new Set<() => void>();
+  const suppressedServerMessageTypes = new Set<string>();
+  const suppressedAgentStreamEventTypes = new Set<string>();
+  const suppressedAgentStreamItemTypes = new Set<string>();
   const activeSockets = new Set<WebSocketRoute>();
+  let latestServer: WebSocketRoute | null = null;
   const directoryStarts: DirectoryRequestStartCounts = {
     subscribed: { agents: 0, workspaces: 0 },
     unsubscribed: { agents: 0, workspaces: 0 },
     total: { agents: 0, workspaces: 0 },
   };
   const clientRequestCounts = new Map<string, number>();
+  const timelineRequestCounts = new Map<string, number>();
+  const serverMessageCounts = new Map<string, number>();
+  const agentStreamEventCounts = new Map<string, number>();
+  const agentStreamItemCounts = new Map<string, number>();
+  const serverMessageWaiters = new Set<() => void>();
   const subscribedFilePaths = new Set<string>();
   const fileSubscriptionWaiters = new Map<string, () => void>();
   const observedFileUpdates = new Set<string>();
@@ -100,6 +270,93 @@ export async function installDaemonWebSocketGate(page: Page) {
     fileUpdateWaiters.delete(key);
   };
 
+  const recordServerMessage = (message: ClientRequest | null): void => {
+    const messageType = typeof message?.type === "string" ? message.type : null;
+    const itemType = readAgentStreamItemType(message);
+    const eventType = readAgentStreamEventType(message);
+    if (messageType)
+      serverMessageCounts.set(messageType, (serverMessageCounts.get(messageType) ?? 0) + 1);
+    if (itemType)
+      agentStreamItemCounts.set(itemType, (agentStreamItemCounts.get(itemType) ?? 0) + 1);
+    if (eventType)
+      agentStreamEventCounts.set(eventType, (agentStreamEventCounts.get(eventType) ?? 0) + 1);
+    if (!messageType && !itemType && !eventType) return;
+    for (const resolve of serverMessageWaiters) resolve();
+    serverMessageWaiters.clear();
+  };
+
+  const observeFileMessage = (message: ServerMessage | null): void => {
+    if (
+      message?.type === "fs.file.subscribe.response" &&
+      typeof message.payload?.initial?.path === "string"
+    ) {
+      const path = message.payload.initial.path;
+      subscribedFilePaths.add(path);
+      fileSubscriptionWaiters.get(path)?.();
+      fileSubscriptionWaiters.delete(path);
+    }
+    if (message) recordFileUpdate(message);
+  };
+
+  const holdServerMessage = (input: {
+    browser: WebSocketRoute;
+    message: string | Buffer;
+    parsed: ClientRequest | null;
+  }): boolean => {
+    const agentId = readAgentStreamAgentId(input.parsed);
+    const blocked = agentId
+      ? heldServerMessages.find((held) => held.blockedAgentId === agentId)
+      : undefined;
+    const suppressed = shouldSuppressServerMessage({
+      message: input.parsed,
+      messageTypes: suppressedServerMessageTypes,
+      agentStreamEventTypes: suppressedAgentStreamEventTypes,
+      agentStreamItemTypes: suppressedAgentStreamItemTypes,
+      suppressAgentStream,
+    });
+    if (blocked) {
+      if (!suppressed) blocked.agentStreamFollowers.push(input.message);
+      return true;
+    }
+    const matchedHold = Array.from(pendingServerMessageHolds).find(([, matches]) =>
+      matches(input.parsed),
+    );
+    if (!matchedHold) return suppressed;
+    const [key] = matchedHold;
+    pendingServerMessageHolds.delete(key);
+    heldServerMessages.push({
+      browser: input.browser,
+      message: input.message,
+      key,
+      agentStreamFollowers: [],
+      blockedAgentId:
+        readAgentStreamEventType(input.parsed) === "turn_started"
+          ? (agentId ?? undefined)
+          : undefined,
+    });
+    for (const resolve of heldServerMessageWaiters) resolve();
+    heldServerMessageWaiters.clear();
+    return true;
+  };
+
+  const holdReadyFileUpdate = (
+    browser: WebSocketRoute,
+    message: string | Buffer,
+    fileMessage: ServerMessage | null,
+  ): boolean => {
+    if (
+      fileMessage?.type !== "fs.file.update" ||
+      fileMessage.payload?.version?.status !== "ready" ||
+      fileMessage.payload.version.path !== readyFileUpdatePathToHold ||
+      heldReadyFileUpdate
+    ) {
+      return false;
+    }
+    heldReadyFileUpdate = () => browser.send(message);
+    resolveHeldReadyFileUpdate?.();
+    return true;
+  };
+
   await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
     if (!acceptingConnections) {
       void ws.close({ code: 1008, reason: "Blocked by reconnect test." });
@@ -108,19 +365,28 @@ export async function installDaemonWebSocketGate(page: Page) {
 
     activeSockets.add(ws);
     const server = ws.connectToServer();
+    latestServer = server;
 
     ws.onMessage((message) => {
       if (!acceptingConnections) return;
-      const request = readClientRequest(message);
-      if (typeof request?.type === "string") {
-        clientRequestCounts.set(request.type, (clientRequestCounts.get(request.type) ?? 0) + 1);
-        const directory = directoryForRequest(request);
-        if (directory) {
-          const subscription = request.subscribe === undefined ? "unsubscribed" : "subscribed";
-          directoryStarts[subscription][directory] += 1;
-          directoryStarts.total[directory] += 1;
+      if (reconnectWithFreshClient && typeof message === "string") {
+        const hello = readClientRequest(message);
+        if (hello?.type === "hello") {
+          const parsed = JSON.parse(message) as { clientId?: string };
+          parsed.clientId = `${parsed.clientId ?? "playwright"}-fresh-${Date.now()}`;
+          reconnectWithFreshClient = false;
+          server.send(JSON.stringify(parsed));
+          return;
         }
       }
+      const request = readClientRequest(message);
+      recordClientRequest(request, clientRequestCounts, timelineRequestCounts, directoryStarts);
+      if (request?.type === heldClientRequestType) {
+        heldClientRequest = { server, message };
+        resolveHeldClientRequest?.();
+        resolveHeldClientRequest = null;
+        return;
+      }
       if (
         request?.type === "file_explorer_request" &&
         request.mode === "file" &&
@@ -139,29 +405,29 @@ export async function installDaemonWebSocketGate(page: Page) {
 
     server.onMessage((message) => {
       if (!acceptingConnections) return;
-      const serverMessage = readServerMessage(message);
-      if (
-        serverMessage?.type === "fs.file.subscribe.response" &&
-        typeof serverMessage.payload?.initial?.path === "string"
-      ) {
-        const path = serverMessage.payload.initial.path;
-        subscribedFilePaths.add(path);
-        fileSubscriptionWaiters.get(path)?.();
-        fileSubscriptionWaiters.delete(path);
-      }
-      if (serverMessage) recordFileUpdate(serverMessage);
-      if (
-        serverMessage?.type === "fs.file.update" &&
-        serverMessage.payload?.version?.status === "ready" &&
-        serverMessage.payload.version.path === readyFileUpdatePathToHold &&
-        !heldReadyFileUpdate
-      ) {
-        heldReadyFileUpdate = () => ws.send(message);
-        resolveHeldReadyFileUpdate?.();
+      const serverMessage = readSessionMessage(message);
+      const fileMessage = serverMessage as ServerMessage | null;
+      observeFileMessage(fileMessage);
+      let outboundMessage = stripAssistantMessageId(
+        message,
+        stripAssistantMessageIds,
+        serverMessage?.type,
+      );
+      outboundMessage = stripCanonicalSubmittedPrompts(
+        outboundMessage,
+        stripCanonicalSubmittedPromptsFeature,
+        serverMessage?.type,
+      );
+      const shouldForceTimelineReset =
+        forceTimelineEpochReset && serverMessage?.type === "fetch_agent_timeline_response";
+      outboundMessage = forceTimelineReset(outboundMessage, shouldForceTimelineReset);
+      if (shouldForceTimelineReset) forceTimelineEpochReset = false;
+      recordServerMessage(serverMessage);
+      if (holdServerMessage({ browser: ws, message: outboundMessage, parsed: serverMessage }))
         return;
-      }
+      if (holdReadyFileUpdate(ws, outboundMessage, fileMessage)) return;
       try {
-        ws.send(message);
+        ws.send(outboundMessage);
       } catch {
         activeSockets.delete(ws);
       }
@@ -225,6 +491,181 @@ export async function installDaemonWebSocketGate(page: Page) {
     restore(): void {
       acceptingConnections = true;
     },
+    restoreFresh(): void {
+      reconnectWithFreshClient = true;
+      acceptingConnections = true;
+    },
+    holdNextClientRequest(type: string): void {
+      heldClientRequestType = type;
+      heldClientRequest = null;
+    },
+    waitForHeldClientRequest(): Promise<void> {
+      if (heldClientRequest) return Promise.resolve();
+      return new Promise<void>((resolve) => {
+        resolveHeldClientRequest = resolve;
+      });
+    },
+    releaseHeldClientRequest(): void {
+      if (!heldClientRequest) throw new Error("No held client request to release");
+      heldClientRequest.server.send(heldClientRequest.message);
+      heldClientRequest = null;
+      heldClientRequestType = null;
+    },
+    holdNextServerMessage(type: string): void {
+      pendingServerMessageHolds.set(serverMessageKey(type), (message) => message?.type === type);
+    },
+    holdNextAgentUpdate(agentId: string, status: string): void {
+      const heldAgentUpdate = { agentId, status };
+      pendingServerMessageHolds.set(agentUpdateKey(agentId, status), (message) =>
+        matchesAgentUpdate(message, heldAgentUpdate),
+      );
+    },
+    holdNextAgentStreamEvent(type: string): void {
+      pendingServerMessageHolds.set(
+        agentStreamEventKey(type),
+        (message) => readAgentStreamEventType(message) === type,
+      );
+    },
+    async waitForHeldServerMessage(type?: string): Promise<void> {
+      const key = type ? serverMessageKey(type) : null;
+      while (!heldServerMessages.some((message) => key === null || message.key === key)) {
+        await new Promise<void>((resolve) => heldServerMessageWaiters.add(resolve));
+      }
+    },
+    releaseHeldServerMessage(type?: string): void {
+      const key = type ? serverMessageKey(type) : null;
+      const index = heldServerMessages.findIndex((message) => key === null || message.key === key);
+      const [heldServerMessage] = index >= 0 ? heldServerMessages.splice(index, 1) : [];
+      if (!heldServerMessage) throw new Error("No held server message to release");
+      heldServerMessage.browser.send(heldServerMessage.message);
+      for (const follower of heldServerMessage.agentStreamFollowers) {
+        heldServerMessage.browser.send(follower);
+      }
+    },
+    async waitForHeldAgentUpdate(agentId: string, status: string): Promise<void> {
+      const key = agentUpdateKey(agentId, status);
+      while (!heldServerMessages.some((message) => message.key === key)) {
+        await new Promise<void>((resolve) => heldServerMessageWaiters.add(resolve));
+      }
+    },
+    releaseHeldAgentUpdate(agentId: string, status: string): void {
+      const key = agentUpdateKey(agentId, status);
+      const index = heldServerMessages.findIndex((message) => message.key === key);
+      const [heldServerMessage] = index >= 0 ? heldServerMessages.splice(index, 1) : [];
+      if (!heldServerMessage) throw new Error("No held agent update to release");
+      heldServerMessage.browser.send(heldServerMessage.message);
+      for (const follower of heldServerMessage.agentStreamFollowers) {
+        heldServerMessage.browser.send(follower);
+      }
+    },
+    async waitForHeldAgentStreamEvent(type: string): Promise<void> {
+      const key = agentStreamEventKey(type);
+      while (!heldServerMessages.some((message) => message.key === key)) {
+        await new Promise<void>((resolve) => heldServerMessageWaiters.add(resolve));
+      }
+    },
+    releaseHeldAgentStreamEvent(type: string): void {
+      const key = agentStreamEventKey(type);
+      const index = heldServerMessages.findIndex((message) => message.key === key);
+      const [heldServerMessage] = index >= 0 ? heldServerMessages.splice(index, 1) : [];
+      if (!heldServerMessage) throw new Error("No held agent stream event to release");
+      heldServerMessage.browser.send(heldServerMessage.message);
+      for (const follower of heldServerMessage.agentStreamFollowers) {
+        heldServerMessage.browser.send(follower);
+      }
+    },
+    requestTimelineTail(agentId: string): void {
+      if (!latestServer) throw new Error("No daemon WebSocket is connected");
+      latestServer.send(
+        JSON.stringify({
+          type: "session",
+          message: {
+            type: "fetch_agent_timeline_request",
+            agentId,
+            requestId: `playwright-timeline-${Date.now()}`,
+            direction: "tail",
+            limit: 0,
+            projection: "projected",
+          },
+        }),
+      );
+    },
+    getHeldTimelineLastItemType(): string | null {
+      const heldServerMessage = heldServerMessages[0];
+      if (!heldServerMessage) throw new Error("No held server message to inspect");
+      const response = readSessionMessage(heldServerMessage.message);
+      const payload = response?.payload;
+      if (!payload || typeof payload !== "object") return null;
+      const entries = (payload as { entries?: unknown }).entries;
+      if (!Array.isArray(entries)) return null;
+      const last = entries.at(-1) as { item?: { type?: unknown } } | undefined;
+      return typeof last?.item?.type === "string" ? last.item.type : null;
+    },
+    truncateHeldTimelineAfterLast(itemType: string): void {
+      const heldServerMessage = heldServerMessages[0];
+      if (!heldServerMessage || typeof heldServerMessage.message !== "string") {
+        throw new Error("No held text server message to truncate");
+      }
+      const envelope = JSON.parse(heldServerMessage.message) as {
+        message?: { payload?: Record<string, unknown> };
+        payload?: Record<string, unknown>;
+      };
+      const payload = envelope.message?.payload ?? envelope.payload;
+      if (!payload) throw new Error("Held message has no payload");
+      const entries = payload.entries;
+      if (!Array.isArray(entries)) throw new Error("Held message is not a timeline response");
+      const index = entries.findLastIndex(
+        (entry) =>
+          typeof entry === "object" &&
+          entry !== null &&
+          (entry as { item?: { type?: unknown } }).item?.type === itemType,
+      );
+      if (index < 0) throw new Error(`Timeline response has no ${itemType} item`);
+      const retained = entries.slice(0, index + 1) as Array<{ seqEnd?: unknown }>;
+      const lastSeq = retained.at(-1)?.seqEnd;
+      if (typeof lastSeq !== "number") throw new Error("Timeline entry has no sequence end");
+      payload.entries = retained;
+      payload.endCursor = { epoch: payload.epoch, seq: lastSeq };
+      payload.hasNewer = false;
+      if (payload.window && typeof payload.window === "object") {
+        (payload.window as Record<string, unknown>).maxSeq = lastSeq;
+        (payload.window as Record<string, unknown>).nextSeq = lastSeq + 1;
+      }
+      heldServerMessage.message = JSON.stringify(envelope);
+    },
+    setServerMessageSuppressed(type: string, suppressed: boolean): void {
+      if (suppressed) {
+        suppressedServerMessageTypes.add(type);
+      } else {
+        suppressedServerMessageTypes.delete(type);
+      }
+    },
+    setAgentStreamEventSuppressed(type: string, suppressed: boolean): void {
+      if (suppressed) {
+        suppressedAgentStreamEventTypes.add(type);
+      } else {
+        suppressedAgentStreamEventTypes.delete(type);
+      }
+    },
+    setAgentStreamItemSuppressed(type: string, suppressed: boolean): void {
+      if (suppressed) {
+        suppressedAgentStreamItemTypes.add(type);
+      } else {
+        suppressedAgentStreamItemTypes.delete(type);
+      }
+    },
+    setAssistantMessageIdsStripped(stripped: boolean): void {
+      stripAssistantMessageIds = stripped;
+    },
+    setCanonicalSubmittedPromptsStripped(stripped: boolean): void {
+      stripCanonicalSubmittedPromptsFeature = stripped;
+    },
+    setAgentStreamSuppressed(suppressed: boolean): void {
+      suppressAgentStream = suppressed;
+    },
+    forceNextTimelineEpochReset(): void {
+      forceTimelineEpochReset = true;
+    },
     getDirectoryRequestStartCounts(): DirectoryRequestStartCounts {
       return {
         subscribed: { ...directoryStarts.subscribed },
@@ -235,5 +676,26 @@ export async function installDaemonWebSocketGate(page: Page) {
     getClientRequestCount(type: string): number {
       return clientRequestCounts.get(type) ?? 0;
     },
+    getTimelineRequestCount(direction: "tail" | "before" | "after"): number {
+      return timelineRequestCounts.get(direction) ?? 0;
+    },
+    getAgentStreamItemCount(type: string): number {
+      return agentStreamItemCounts.get(type) ?? 0;
+    },
+    async waitForServerMessage(type: string, count = 1): Promise<void> {
+      while ((serverMessageCounts.get(type) ?? 0) < count) {
+        await new Promise<void>((resolve) => serverMessageWaiters.add(resolve));
+      }
+    },
+    async waitForAgentStreamItem(type: string, count = 1): Promise<void> {
+      while ((agentStreamItemCounts.get(type) ?? 0) < count) {
+        await new Promise<void>((resolve) => serverMessageWaiters.add(resolve));
+      }
+    },
+    async waitForAgentStreamEvent(type: string, count = 1): Promise<void> {
+      while ((agentStreamEventCounts.get(type) ?? 0) < count) {
+        await new Promise<void>((resolve) => serverMessageWaiters.add(resolve));
+      }
+    },
   };
 }

packages/app/e2e/helpers/mock-agent.ts

@@ -53,6 +53,23 @@ export async function seedMockAgentWorkspace(
   }
 }
 
+export async function seedRunningMockAgentWorkspace(
+  options: MockAgentOptions,
+): Promise<MockAgentWorkspace> {
+  const agent = await seedMockAgentWorkspace(options);
+  try {
+    await agent.client.waitForAgentUpsert(
+      agent.agentId,
+      (snapshot) => snapshot.status === "running",
+      15_000,
+    );
+    return agent;
+  } catch (error) {
+    await agent.cleanup();
+    throw error;
+  }
+}
+
 export function buildAgentRoute(workspaceId: string, agentId: string): string {
   return buildHostAgentDetailRoute(getServerId(), agentId, workspaceId);
 }

packages/app/e2e/helpers/timeline-pagination.ts

@@ -1,20 +1,64 @@
 import { expect, type Page } from "@playwright/test";
 import { buildAgentRoute, seedMockAgentWorkspace, type MockAgentWorkspace } from "./mock-agent";
 import {
+  delayAgentBootstrapTailResponse,
   delayAgentOlderTimelineResponse,
+  holdDaemonHydration,
+  holdAgentOlderTimelinePages,
   type AgentTimelineResponseGate,
+  type BootstrapTimelineGate,
+  type OlderTimelinePagesGate,
 } from "./agent-timeline-gate";
 
+export { holdDaemonHydration };
+
 interface LongTimelineAgentOptions {
   turns: number;
 }
 
-interface LongTimelineAgent extends MockAgentWorkspace {
+export interface LongTimelineAgent extends MockAgentWorkspace {
+  firstOlderPagePrompt: string;
+  initialTailAnchorPrompt: string;
+  initialTailOldestPrompt: string;
   oldestPrompt: string;
   newestPrompt: string;
 }
 
+interface RealisticOlderTimelineAgent extends MockAgentWorkspace {
+  newestPrompt: string;
+}
+
 const PROMPT_PREFIX = "timeline-pagination-turn";
+const LIVE_BEFORE_HYDRATION_PROMPT = "timeline live before authoritative hydration";
+const HISTORY_START_THRESHOLD_PX = 96;
+
+interface TimelineViewportSnapshot {
+  scrollHeight: number;
+  scrollTop: number;
+}
+
+export interface TimelinePresentationSnapshot {
+  marker: string;
+  position: TimelinePromptPositionSnapshot;
+  viewport: TimelineViewportSnapshot;
+}
+
+interface TimelinePromptPositionSnapshot {
+  prompt: string;
+  top: number;
+}
+
+interface OlderHistoryLoadingOperation {
+  animationStartTime: number | null;
+  marker: string;
+}
+
+interface OlderHistoryPages {
+  expectRequestedPages(count: number): Promise<void>;
+  expectSettledWithRequestedPages(count: number): Promise<void>;
+  expectNoRepeatedAssistantEntries(): void;
+  releasePage(pageNumber: number): void;
+}
 
 function promptForTurn(index: number): string {
   return `${PROMPT_PREFIX}-${index}: emit 1 coalesced agent stream updates`;
@@ -36,12 +80,88 @@ export async function seedLongMockAgentTimeline(
 
   return {
     ...agent,
+    firstOlderPagePrompt: promptForTurn(Math.max(0, options.turns - 40)),
+    initialTailAnchorPrompt: promptForTurn(Math.max(0, options.turns - 5)),
+    initialTailOldestPrompt: promptForTurn(Math.max(0, options.turns - 20)),
     oldestPrompt: promptForTurn(0),
     newestPrompt: promptForTurn(options.turns - 1),
   };
 }
 
-export async function openAgentTimeline(page: Page, agent: LongTimelineAgent): Promise<void> {
+export async function seedRealisticOlderTimeline(): Promise<RealisticOlderTimelineAgent> {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "timeline-realistic-older-history-",
+    title: "Realistic older timeline pagination regression",
+    model: "ten-second-stream",
+  });
+
+  const olderTurnCount = 40;
+  for (let index = 0; index < olderTurnCount; index += 1) {
+    await agent.client.sendAgentMessage(
+      agent.agentId,
+      `timeline-pagination-older-turn-${index}: emit 1 coalesced agent stream updates`,
+    );
+    await agent.client.waitForFinish(agent.agentId, 15_000);
+  }
+
+  await agent.client.sendAgentMessage(agent.agentId, "build a realistic long mock timeline");
+  await agent.client.waitForFinish(agent.agentId, 20_000);
+
+  const newerTurnCount = 20;
+  for (let index = 0; index < newerTurnCount; index += 1) {
+    await agent.client.sendAgentMessage(agent.agentId, promptForTurn(index));
+    await agent.client.waitForFinish(agent.agentId, 15_000);
+  }
+
+  return {
+    ...agent,
+    newestPrompt: promptForTurn(newerTurnCount - 1),
+  };
+}
+
+export async function scrollThroughOlderHistoryPages(
+  page: Page,
+  pageCount: number,
+  history: OlderHistoryPages,
+): Promise<void> {
+  for (let pageNumber = 0; pageNumber < pageCount; pageNumber += 1) {
+    await userScrollsTimelineToHistoryStart(page);
+    await history.expectRequestedPages(pageNumber + 1);
+    history.releasePage(pageNumber + 1);
+    await history.expectSettledWithRequestedPages(pageNumber + 1);
+  }
+}
+
+export async function rememberTimelinePromptPosition(
+  page: Page,
+  prompt: string,
+): Promise<TimelinePromptPositionSnapshot> {
+  const timeline = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  const item = timeline.getByText(prompt, { exact: true });
+  await expect(item).toBeVisible();
+  const box = await item.boundingBox();
+  if (!box) {
+    throw new Error(`Expected a rendered timeline item for ${prompt}`);
+  }
+  return { prompt, top: box.y };
+}
+
+export async function expectTimelinePromptPositionPreserved(
+  page: Page,
+  before: TimelinePromptPositionSnapshot,
+): Promise<void> {
+  const timeline = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  const item = timeline.getByText(before.prompt, { exact: true });
+  await expect(item).toBeVisible();
+  await expect
+    .poll(async () => {
+      const box = await item.boundingBox();
+      return box ? Math.abs(box.y - before.top) : Number.POSITIVE_INFINITY;
+    })
+    .toBeLessThanOrEqual(2);
+}
+
+export async function openAgentTimeline(page: Page, agent: MockAgentWorkspace): Promise<void> {
   await page.goto(buildAgentRoute(agent.workspaceId, agent.agentId));
   await page.waitForURL(
     (url) => url.pathname.includes("/workspace/") && !url.searchParams.has("open"),
@@ -50,15 +170,37 @@ export async function openAgentTimeline(page: Page, agent: LongTimelineAgent): P
 }
 
 export async function expectTimelinePromptVisible(page: Page, prompt: string): Promise<void> {
-  await expect(page.getByText(prompt, { exact: true })).toBeVisible({ timeout: 30_000 });
+  const timeline = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await expect(timeline.getByText(prompt, { exact: true })).toBeVisible({ timeout: 30_000 });
+}
+
+export async function expectTimelinePromptCentered(page: Page, prompt: string): Promise<void> {
+  const timeline = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  const message = timeline.getByTestId("user-message").filter({ hasText: prompt });
+  await expect(message).toBeVisible();
+  await expect
+    .poll(async () => {
+      const [timelineBox, messageBox] = await Promise.all([
+        timeline.boundingBox(),
+        message.boundingBox(),
+      ]);
+      if (!timelineBox || !messageBox) {
+        return Number.POSITIVE_INFINITY;
+      }
+      const timelineCenter = timelineBox.x + timelineBox.width / 2;
+      const messageCenter = messageBox.x + messageBox.width / 2;
+      return Math.abs(timelineCenter - messageCenter);
+    })
+    .toBeLessThanOrEqual(2);
 }
 
 export async function expectTimelinePromptNotMounted(page: Page, prompt: string): Promise<void> {
-  await expect(page.getByText(prompt, { exact: true })).toHaveCount(0);
+  const timeline = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await expect(timeline.getByText(prompt, { exact: true })).toHaveCount(0);
 }
 
 export async function makeLoadedTimelineFitViewport(page: Page): Promise<void> {
-  await page.setViewportSize({ width: 1280, height: 8_000 });
+  await page.setViewportSize({ width: 1280, height: 20_000 });
 }
 
 export async function expectLoadedTimelineDoesNotScroll(page: Page): Promise<void> {
@@ -75,6 +217,33 @@ export async function expectLoadedTimelineDoesNotScroll(page: Page): Promise<voi
     .toBe(true);
 }
 
+export async function reloadAgentTimelineFromPersistedReplica(
+  page: Page,
+  agent: LongTimelineAgent,
+): Promise<void> {
+  await expect
+    .poll(() =>
+      page.evaluate((agentId) => {
+        const raw = localStorage.getItem("@paseo:replica-cache");
+        if (!raw) return false;
+        const cache = JSON.parse(raw) as {
+          hosts?: Array<{
+            timeline?: {
+              agentId?: string;
+              items?: unknown[];
+            } | null;
+          }>;
+        };
+        const timeline = cache.hosts?.find((host) => host.timeline?.agentId === agentId)?.timeline;
+        return timeline?.items?.length === 50;
+      }, agent.agentId),
+    )
+    .toBe(true);
+
+  await page.reload();
+  await expectTimelinePromptVisible(page, agent.newestPrompt);
+}
+
 export async function holdNextOlderTimelinePage(
   page: Page,
   agent: LongTimelineAgent,
@@ -90,6 +259,154 @@ export async function holdNextOlderTimelinePage(
   };
 }
 
+export async function holdOlderHistoryPages(
+  page: Page,
+  agent: MockAgentWorkspace,
+): Promise<OlderHistoryPages> {
+  const gate: OlderTimelinePagesGate = await holdAgentOlderTimelinePages(page, agent.agentId);
+  return {
+    async expectRequestedPages(count) {
+      await gate.waitForRequestCount(count);
+      expect(gate.getRequestCount()).toBe(count);
+    },
+    async expectSettledWithRequestedPages(count) {
+      await waitForTimelineGeometryToSettle(page);
+      expect(gate.getRequestCount()).toBe(count);
+    },
+    expectNoRepeatedAssistantEntries() {
+      expect(gate.getRepeatedAssistantEntryCount()).toBe(0);
+    },
+    releasePage(pageNumber) {
+      gate.releasePage(pageNumber);
+    },
+  };
+}
+
+export async function rememberTimelineViewport(page: Page): Promise<TimelineViewportSnapshot> {
+  return readTimelineViewport(page);
+}
+
+export async function expectStableHistoryStartGutter(page: Page): Promise<void> {
+  const gutter = page.getByTestId("older-history-slot");
+  await expect(gutter).toBeAttached();
+  await expect
+    .poll(() => gutter.evaluate((element) => element.getBoundingClientRect().height))
+    .toBe(32);
+}
+
+export async function scrollTimelinePromptIntoView(page: Page, prompt: string): Promise<void> {
+  const timeline = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  const row = timeline.getByTestId("user-message").filter({ hasText: prompt });
+  await row.scrollIntoViewIfNeeded();
+  await expect(row).toBeVisible();
+  await expect
+    .poll(async () => (await readTimelineViewport(page)).scrollTop)
+    .toBeGreaterThan(HISTORY_START_THRESHOLD_PX);
+}
+
+export async function rememberTimelinePresentation(
+  page: Page,
+  prompt: string,
+): Promise<TimelinePresentationSnapshot> {
+  const timeline = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  const row = timeline.getByTestId("user-message").filter({ hasText: prompt });
+  await expect(row).toBeVisible();
+  const marker = `timeline-presentation-${Date.now()}`;
+  await row.evaluate((element, value) => {
+    element.dataset.timelinePresentation = value;
+  }, marker);
+  return {
+    marker,
+    position: await rememberTimelinePromptPosition(page, prompt),
+    viewport: await rememberTimelineViewport(page),
+  };
+}
+
+export async function expectTimelinePresentationUnchanged(
+  page: Page,
+  before: TimelinePresentationSnapshot,
+): Promise<void> {
+  await expect(page.locator(`[data-timeline-presentation="${before.marker}"]`)).toBeVisible();
+  await expectTimelinePromptPositionPreserved(page, before.position);
+  await expect.poll(async () => rememberTimelineViewport(page)).toEqual(before.viewport);
+}
+
+export async function expectTimelineViewportAnchoredAfterPrepend(
+  page: Page,
+  before: TimelineViewportSnapshot,
+): Promise<void> {
+  await expect
+    .poll(async () => (await readTimelineViewport(page)).scrollHeight)
+    .toBeGreaterThan(before.scrollHeight);
+  await waitForTimelineGeometryToSettle(page);
+  const after = await readTimelineViewport(page);
+  const contentGrowth = after.scrollHeight - before.scrollHeight;
+  const scrollAdjustment = after.scrollTop - before.scrollTop;
+  expect(Math.abs(contentGrowth - scrollAdjustment)).toBeLessThanOrEqual(2);
+}
+
+export async function rememberOlderHistoryLoadingOperation(
+  page: Page,
+): Promise<OlderHistoryLoadingOperation> {
+  const slot = page.getByTestId("load-older-history-spinner");
+  await expect(slot).toBeVisible();
+  const marker = `older-history-loading-${Date.now()}`;
+  await slot.evaluate((element, operationMarker) => {
+    const candidates = [element, ...Array.from(element.querySelectorAll("*"))];
+    const animated = candidates.find(
+      (candidate) => getComputedStyle(candidate).animationName !== "none",
+    );
+    if (!(animated instanceof HTMLElement)) {
+      throw new Error("Expected the older-history loader to contain an animated element");
+    }
+    animated.dataset.olderHistoryLoadingOperation = operationMarker;
+  }, marker);
+  const animated = page.locator(`[data-older-history-loading-operation="${marker}"]`);
+  await expect
+    .poll(async () => {
+      const startTime = await animated.evaluate((element) => element.getAnimations()[0]?.startTime);
+      return typeof startTime === "number" ? startTime : null;
+    })
+    .not.toBeNull();
+  const animationStartTime = await animated.evaluate((element) => {
+    const startTime = element.getAnimations()[0]?.startTime;
+    return typeof startTime === "number" ? startTime : null;
+  });
+  return { animationStartTime, marker };
+}
+
+export async function expectSameOlderHistoryLoadingOperation(
+  page: Page,
+  operation: OlderHistoryLoadingOperation,
+): Promise<void> {
+  const animated = page.locator(`[data-older-history-loading-operation="${operation.marker}"]`);
+  await expect(animated).toBeVisible();
+  const animationStartTime = await animated.evaluate((element) => {
+    const startTime = element.getAnimations()[0]?.startTime;
+    return typeof startTime === "number" ? startTime : null;
+  });
+  expect(animationStartTime).toBe(operation.animationStartTime);
+}
+
+export async function expectTimelineAtHistoryStart(page: Page): Promise<void> {
+  await expect
+    .poll(async () => (await readTimelineViewport(page)).scrollTop)
+    .toBeLessThanOrEqual(HISTORY_START_THRESHOLD_PX);
+}
+
+export async function holdBootstrapTimelinePage(
+  page: Page,
+  agent: LongTimelineAgent,
+): Promise<BootstrapTimelineGate> {
+  return delayAgentBootstrapTailResponse(page, agent.agentId);
+}
+
+export async function sendLiveTurnBeforeHydration(agent: LongTimelineAgent): Promise<string> {
+  await agent.client.sendAgentMessage(agent.agentId, LIVE_BEFORE_HYDRATION_PROMPT);
+  await agent.client.waitForFinish(agent.agentId, 15_000);
+  return LIVE_BEFORE_HYDRATION_PROMPT;
+}
+
 export async function scrollTimelineToOldestLoadedEdge(page: Page): Promise<void> {
   const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
   await scroll.hover();
@@ -109,31 +426,104 @@ export async function scrollTimelineToOldestLoadedEdge(page: Page): Promise<void
   });
 }
 
-export async function scrollTimelineUntilOlderHistoryIsReachable(page: Page): Promise<void> {
+export async function userScrollsTimelineToHistoryStart(page: Page): Promise<void> {
   const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
-  const previousHeight = await scroll.evaluate((element) => {
-    if (!(element instanceof HTMLElement)) {
-      throw new Error("Agent chat scroll element is not an HTMLElement");
+  await scroll.hover();
+  for (let step = 0; step < 60; step += 1) {
+    if ((await readTimelineViewport(page)).scrollTop <= HISTORY_START_THRESHOLD_PX) {
+      break;
     }
-    return element.scrollHeight;
-  });
-
+    await page.mouse.wheel(0, -1_000);
     await page.evaluate(
       () =>
         new Promise<void>((resolve) => {
-        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+          requestAnimationFrame(() => resolve());
         }),
     );
-  await scrollTimelineToOldestLoadedEdge(page);
+  }
   await expect
-    .poll(async () =>
-      scroll.evaluate((element) => {
+    .poll(async () => (await readTimelineViewport(page)).scrollTop)
+    .toBeLessThanOrEqual(HISTORY_START_THRESHOLD_PX);
+}
+
+export async function userNavigatesTimelineToHistoryStartWithKeyboard(page: Page): Promise<void> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await scroll.focus();
+  await page.keyboard.press("Home");
+  await expect
+    .poll(async () => (await readTimelineViewport(page)).scrollTop)
+    .toBeLessThanOrEqual(HISTORY_START_THRESHOLD_PX);
+}
+
+export async function scrollTimelineToNewestLoadedEdge(page: Page): Promise<void> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await scroll.evaluate((element) => {
     if (!(element instanceof HTMLElement)) {
       throw new Error("Agent chat scroll element is not an HTMLElement");
     }
-        return element.scrollHeight;
+    element.scrollTop = element.scrollHeight;
+    element.dispatchEvent(new Event("scroll", { bubbles: true }));
+  });
+}
+
+export async function scrollTimelineUntilOlderHistoryIsReachable(
+  page: Page,
+  oldestPrompt: string,
+): Promise<void> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  const prompt = scroll.getByText(oldestPrompt, { exact: true });
+  for (let attempt = 0; attempt < 10; attempt += 1) {
+    if ((await prompt.count()) > 0) {
+      await expect(prompt).toBeVisible();
+      return;
+    }
+    const previousHeight = await readTimelineViewport(page);
+    await userScrollsTimelineToHistoryStart(page);
+    await expect
+      .poll(async () => (await readTimelineViewport(page)).scrollHeight)
+      .toBeGreaterThan(previousHeight.scrollHeight);
+    await waitForTimelineGeometryToSettle(page);
+  }
+  await expect(prompt).toBeVisible();
+}
+
+async function readTimelineViewport(page: Page): Promise<TimelineViewportSnapshot> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  return scroll.evaluate((element) => {
+    if (!(element instanceof HTMLElement)) {
+      throw new Error("Agent chat scroll element is not an HTMLElement");
+    }
+    return { scrollHeight: element.scrollHeight, scrollTop: element.scrollTop };
+  });
+}
+
+async function waitForTimelineGeometryToSettle(page: Page): Promise<void> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await scroll.evaluate(
+    (element) =>
+      new Promise<void>((resolve, reject) => {
+        if (!(element instanceof HTMLElement)) {
+          reject(new Error("Agent chat scroll element is not an HTMLElement"));
+          return;
+        }
+        const startedAt = performance.now();
+        let stableFrames = 0;
+        let previous = `${element.scrollTop}:${element.scrollHeight}`;
+        const sample = () => {
+          const current = `${element.scrollTop}:${element.scrollHeight}`;
+          stableFrames = current === previous ? stableFrames + 1 : 0;
+          previous = current;
+          if (stableFrames >= 4) {
+            resolve();
+            return;
+          }
+          if (performance.now() - startedAt > 5_000) {
+            reject(new Error("Timeline geometry did not settle"));
+            return;
+          }
+          requestAnimationFrame(sample);
+        };
+        requestAnimationFrame(sample);
       }),
-    )
-    .toBeGreaterThan(previousHeight);
-  await scrollTimelineToOldestLoadedEdge(page);
+  );
 }

packages/app/e2e/helpers/timeline-resume.ts

@@ -0,0 +1,68 @@
+import { expect, type Page } from "@playwright/test";
+import type { installDaemonWebSocketGate } from "./daemon-websocket-gate";
+import type { LongTimelineAgent } from "./timeline-pagination";
+import { expectReconnectingToastGone, expectReconnectingToastVisible } from "./workspace-ui";
+
+type DaemonWebSocketGate = Awaited<ReturnType<typeof installDaemonWebSocketGate>>;
+
+export interface TimelineRequestCounts {
+  after: number;
+  tail: number;
+}
+
+export interface BackgroundTimelineTurns {
+  firstPrompt: string;
+  newestPrompt: string;
+}
+
+function backgroundPrompt(index: number): string {
+  return `timeline-resume-background-${index}: emit 1 coalesced agent stream updates`;
+}
+
+export async function commitTimelineTurnsWhileDisconnected(
+  agent: LongTimelineAgent,
+  count: number,
+): Promise<BackgroundTimelineTurns> {
+  for (let index = 0; index < count; index += 1) {
+    await agent.client.sendAgentMessage(agent.agentId, backgroundPrompt(index));
+    await agent.client.waitForFinish(agent.agentId, 15_000);
+  }
+  return {
+    firstPrompt: backgroundPrompt(0),
+    newestPrompt: backgroundPrompt(count - 1),
+  };
+}
+
+export function rememberTimelineRequestCounts(gate: DaemonWebSocketGate): TimelineRequestCounts {
+  return {
+    after: gate.getTimelineRequestCount("after"),
+    tail: gate.getTimelineRequestCount("tail"),
+  };
+}
+
+export function expectOneTailCheckWithoutCatchUpPages(
+  gate: DaemonWebSocketGate,
+  before: TimelineRequestCounts,
+): void {
+  expect(gate.getTimelineRequestCount("tail") - before.tail).toBe(1);
+  expect(gate.getTimelineRequestCount("after") - before.after).toBe(0);
+}
+
+export async function disconnectViewedTimeline(
+  page: Page,
+  gate: DaemonWebSocketGate,
+): Promise<void> {
+  await gate.drop();
+  await expectReconnectingToastVisible(page);
+}
+
+export async function restoreViewedTimelineWithHeldTail(
+  page: Page,
+  gate: DaemonWebSocketGate,
+): Promise<void> {
+  gate.holdNextServerMessage("fetch_agent_timeline_response");
+  gate.restore();
+  await gate.waitForHeldServerMessage();
+  gate.releaseHeldServerMessage();
+  await expectReconnectingToastGone(page);
+}

packages/app/e2e/new-workspace-entry.spec.ts

@@ -15,7 +15,7 @@ import { seedSavedSettingsHosts } from "./helpers/settings";
 import { getServerId } from "./helpers/server-id";
 import { projectEquivalenceViewKey } from "./helpers/project-view-key";
 import { clickArchiveWorkspaceMenuItem, expectWorkspaceAbsentFromSidebar } from "./helpers/sidebar";
-import { waitForNoProjectsInSidebar, waitForSidebarHydration } from "./helpers/workspace-ui";
+import { waitForSidebarHydration } from "./helpers/workspace-ui";
 
 // Model B entry points into the New Workspace screen. The surviving entries are
 // the global button (universal) and each project's per-row New workspace icon
@@ -112,7 +112,6 @@ test.describe("New workspace entry points", () => {
 
   test("a stale project route keeps the New Workspace controls enabled", async ({ page }) => {
     await gotoAppShell(page);
-    await waitForNoProjectsInSidebar(page);
     await openMissingProjectNewWorkspaceComposer(page, {
       serverId: getServerId(),
       projectId: "missing-project",

packages/app/e2e/out-of-band-command.codex.real.spec.ts

@@ -0,0 +1,29 @@
+import { mkdtempSync, realpathSync } from "node:fs";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { expect, test } from "./fixtures";
+import { submitMessage } from "./helpers/composer";
+import { cleanupRewindFlow, launchAgent, type AgentHandle } from "./helpers/rewind-flow";
+
+test.describe("Codex out-of-band commands", () => {
+  test.setTimeout(300_000);
+
+  test("settles the submitted row when a goal command completes without a turn", async ({
+    page,
+  }) => {
+    const cwd = realpathSync(mkdtempSync(path.join(tmpdir(), "paseo-codex-command-")));
+    let handle: AgentHandle | undefined;
+
+    try {
+      handle = await launchAgent({ page, provider: "codex", cwd, mode: "full-access" });
+      await submitMessage(page, "/goal clear");
+      const command = page.getByTestId("user-message").filter({ hasText: "/goal clear" });
+
+      await expect(command).toBeVisible();
+      await expect(command).toHaveAttribute("aria-busy", "false", { timeout: 30_000 });
+      await expect(page.getByTestId("turn-working-indicator")).toHaveCount(0);
+    } finally {
+      await cleanupRewindFlow({ handle, cwd });
+    }
+  });
+});

packages/app/e2e/rewind-menu.ui-contract.spec.ts

@@ -1,6 +1,8 @@
 import type { Locator } from "@playwright/test";
 import { expect, test, type Page } from "./fixtures";
 import { openAgentRoute, seedMockAgentWorkspace } from "./helpers/mock-agent";
+import { installDaemonWebSocketGate } from "./helpers/daemon-websocket-gate";
+import { scrollChatAwayFromBottom } from "./helpers/agent-bottom-anchor";
 import {
   composerLocator,
   expectComposerDraft,
@@ -23,7 +25,152 @@ async function expectUserMessageVisible(page: Page, text: string): Promise<void>
   await expect(userMessage(page, text)).toBeVisible();
 }
 
+async function rewriteCachedMessageAsLegacyRow(page: Page, prompt: string): Promise<void> {
+  await expect
+    .poll(() =>
+      page.evaluate((messageText) => {
+        const raw = localStorage.getItem("@paseo:replica-cache");
+        if (!raw) return false;
+        const cache = JSON.parse(raw) as {
+          hosts?: Array<{ timeline?: { items?: Array<Record<string, unknown>> } | null }>;
+        };
+        for (const host of cache.hosts ?? []) {
+          for (const item of host.timeline?.items ?? []) {
+            if (item.kind === "user_message" && item.text === messageText && item.messageId) {
+              return true;
+            }
+          }
+        }
+        return false;
+      }, prompt),
+    )
+    .toBe(true);
+
+  await page.evaluate((messageText) => {
+    const key = "@paseo:replica-cache";
+    const raw = localStorage.getItem(key);
+    if (!raw) throw new Error("Replica cache was not persisted");
+    const cache = JSON.parse(raw) as {
+      hosts?: Array<{ timeline?: { items?: Array<Record<string, unknown>> } | null }>;
+    };
+    const cachedMessage = cache.hosts
+      ?.flatMap((host) => host.timeline?.items ?? [])
+      .find((item) => item.kind === "user_message" && item.text === messageText);
+    if (!cachedMessage) throw new Error("Cached user message was not found");
+    delete cachedMessage.messageId;
+    localStorage.setItem(key, JSON.stringify(cache));
+  }, prompt);
+}
+
+async function waitForCurrentSubmissionExcludedFromCache(
+  page: Page,
+  prompt: string,
+): Promise<void> {
+  await expect
+    .poll(() =>
+      page.evaluate((messageText) => {
+        const raw = localStorage.getItem("@paseo:replica-cache");
+        if (!raw) return false;
+        const cache = JSON.parse(raw) as {
+          hosts?: Array<{ timeline?: { items?: Array<Record<string, unknown>> } | null }>;
+        };
+        return !cache.hosts
+          ?.flatMap((host) => host.timeline?.items ?? [])
+          .some(
+            (item) =>
+              item.kind === "user_message" &&
+              item.text === messageText &&
+              typeof item.clientMessageId === "string" &&
+              item.messageId === undefined,
+          );
+      }, prompt),
+    )
+    .toBe(true);
+}
+
+async function waitForCachedMessageWithoutProviderId(page: Page, prompt: string): Promise<void> {
+  await expect
+    .poll(() =>
+      page.evaluate((messageText) => {
+        const raw = localStorage.getItem("@paseo:replica-cache");
+        if (!raw) return false;
+        const cache = JSON.parse(raw) as {
+          hosts?: Array<{ timeline?: { items?: Array<Record<string, unknown>> } | null }>;
+        };
+        return cache.hosts
+          ?.flatMap((host) => host.timeline?.items ?? [])
+          .some(
+            (item) =>
+              item.kind === "user_message" &&
+              item.text === messageText &&
+              item.messageId === undefined,
+          );
+      }, prompt),
+    )
+    .toBe(true);
+}
+
+async function expectPendingSubmissionNotRestoredAfterReload(page: Page): Promise<void> {
+  const prompt = "Keep this cached submission pending.";
+  const gate = await installDaemonWebSocketGate(page);
+  const session = await seedMockAgentWorkspace({
+    repoPrefix: "rewind-current-cache-e2e-",
+    title: "Current cache submission e2e",
+  });
+
+  try {
+    await openAgentRoute(page, session);
+    await expectComposerVisible(page);
+    gate.holdNextClientRequest("send_agent_message_request");
+    await submitMessage(page, prompt);
+    await gate.waitForHeldClientRequest();
+    await waitForCurrentSubmissionExcludedFromCache(page, prompt);
+    await gate.drop();
+    await page.reload();
+
+    await expect(userMessage(page, prompt)).toHaveCount(0);
+  } finally {
+    gate.restore();
+    await session.cleanup();
+  }
+}
+
 test.describe("Rewind sheet", () => {
+  test("does not restore a local-only submission from the display cache", async ({ page }) => {
+    await expectPendingSubmissionNotRestoredAfterReload(page);
+  });
+
+  test("does not invent rewind identity for an ID-less cached message", async ({ page }) => {
+    const prompt = "Restore this rewind identity from the legacy cache.";
+    const gate = await installDaemonWebSocketGate(page);
+    const session = await seedMockAgentWorkspace({
+      repoPrefix: "rewind-cache-upgrade-e2e-",
+      title: "Rewind cache upgrade e2e",
+      initialPrompt: prompt,
+    });
+    let heldTimelineRequest = false;
+
+    try {
+      await openAgentRoute(page, session);
+      await expectUserMessageVisible(page, prompt);
+      await rewriteCachedMessageAsLegacyRow(page, prompt);
+      gate.holdNextClientRequest("fetch_agent_timeline_request");
+      await page.reload();
+      await gate.waitForHeldClientRequest();
+      heldTimelineRequest = true;
+
+      const restoredMessage = userMessage(page, prompt);
+      await expect(restoredMessage).toBeVisible();
+      await restoredMessage.hover();
+      await expect(restoredMessage.getByTestId("rewind-menu-trigger")).toHaveCount(0);
+      await waitForCachedMessageWithoutProviderId(page, prompt);
+    } finally {
+      if (heldTimelineRequest) gate.releaseHeldClientRequest();
+      gate.restore();
+      await session.cleanup();
+    }
+  });
+
   test("rewinds from a user message sheet option", async ({ page }) => {
     const firstPrompt = "emit 1 coalesced agent stream updates for first rewind turn.";
     const secondPrompt = "Prepare deleted rewind turn assistant content.";
@@ -45,6 +192,10 @@ test.describe("Rewind sheet", () => {
       await expect(page.getByText("Cycle 1", { exact: true })).toBeVisible();
       await expectUserMessageCount(page, 2);
 
+      await scrollChatAwayFromBottom(page, {
+        deltaY: -900,
+        minDistanceFromBottom: 300,
+      });
       await userMessage(page, firstPrompt).hover();
       await page.getByTestId("rewind-menu-trigger").first().click();
       const rewindSheet = page.getByTestId("rewind-menu-content");

packages/app/e2e/sidebar-reorder.spec.ts

@@ -1,6 +1,7 @@
 import type { Locator } from "@playwright/test";
 import { expect, test } from "./fixtures";
 import { gotoAppShell } from "./helpers/app";
+import { projectEquivalenceViewKey } from "./helpers/project-view-key";
 import { getServerId } from "./helpers/server-id";
 import { seedWorkspace } from "./helpers/seed-client";
 import { waitForSidebarHydration } from "./helpers/workspace-ui";
@@ -56,7 +57,11 @@ test("projects and workspaces reorder with an immediate mouse drag", async ({ pa
     await gotoAppShell(page);
     await waitForSidebarHydration(page);
 
-    await quickDragFirstRowAfterSecond(page.locator('[data-testid^="sidebar-project-row-"]'));
+    const firstProjectTestId = `sidebar-project-row-${projectEquivalenceViewKey(firstProject.projectKey)}`;
+    const secondProjectTestId = `sidebar-project-row-${projectEquivalenceViewKey(secondProject.projectKey)}`;
+    await quickDragFirstRowAfterSecond(
+      page.locator(`[data-testid="${firstProjectTestId}"], [data-testid="${secondProjectTestId}"]`),
+    );
     const firstWorkspaceTestId = `sidebar-workspace-row-${getServerId()}:${firstProject.workspaceId}`;
     const secondWorkspaceTestId = `sidebar-workspace-row-${getServerId()}:${secondWorkspace.workspace.id}`;
     await quickDragFirstRowAfterSecond(

packages/app/e2e/viewed-agent-timelines.spec.ts

@@ -6,6 +6,11 @@ import { getServerId } from "./helpers/server-id";
 import { observeTimelineSubscriptions } from "./helpers/timeline-delivery";
 import { waitForWorkspaceTabsVisible } from "./helpers/workspace-tabs";
 import { installDaemonWebSocketGate } from "./helpers/daemon-websocket-gate";
+import {
+  expectAgentIdle,
+  expectInlineWorkingIndicator,
+  expectTurnCopyButton,
+} from "./helpers/agent-stream";
 import {
   expectReconnectingToastGone,
   expectReconnectingToastVisible,
@@ -19,19 +24,21 @@ interface ViewedTimelineScenario {
   cleanup(): Promise<void>;
 }
 
-async function seedViewedTimelineScenario(): Promise<ViewedTimelineScenario> {
+async function seedViewedTimelineScenario(
+  options: { firstAgentModel?: string } = {},
+): Promise<ViewedTimelineScenario> {
   const workspace = await seedWorkspace({ repoPrefix: "viewed-timelines-" });
-  const createAgent = (title: string) =>
+  const createAgent = (title: string, model = "ten-second-stream") =>
     workspace.client.createAgent({
       provider: "mock",
       cwd: workspace.repoPath,
       workspaceId: workspace.workspaceId,
       title,
       modeId: "load-test",
-      model: "ten-second-stream",
+      model,
     });
   const [firstAgent, secondAgent] = await Promise.all([
-    createAgent("First viewed chat"),
+    createAgent("First viewed chat", options.firstAgentModel),
     createAgent("Second viewed chat"),
   ]);
   return {
@@ -71,7 +78,46 @@ async function commitMessage(scenario: ViewedTimelineScenario, agentId: string,
   expect(finish.status).toBe("idle");
 }
 
+async function startVisibleTurn(
+  page: Page,
+  scenario: ViewedTimelineScenario,
+  prompt: string,
+): Promise<void> {
+  await scenario.client.sendAgentMessage(scenario.firstAgentId, prompt);
+  await expect(page.getByText(prompt, { exact: true })).toBeVisible();
+  await expectInlineWorkingIndicator(page);
+}
+
+async function expectAgentConsistentlyIdle(page: Page, title: string): Promise<void> {
+  const tab = page.getByRole("button", { name: title, exact: true });
+  await expect(tab.locator('[data-status-bucket="running"]')).toHaveCount(0);
+  await expectAgentIdle(page);
+  await expect(page.getByTestId("turn-working-indicator")).toHaveCount(0);
+  await expectTurnCopyButton(page);
+}
+
 test.describe("Viewed agent timelines", () => {
+  test("a turn that finishes while unsubscribed reopens with consistently idle chrome", async ({
+    page,
+  }) => {
+    test.setTimeout(150_000);
+    const subscriptions = observeTimelineSubscriptions(page);
+    const scenario = await seedViewedTimelineScenario({ firstAgentModel: "one-minute-stream" });
+    try {
+      await openAgent(page, scenario, scenario.firstAgentId);
+      await startVisibleTurn(page, scenario, "Finish after this chat becomes unsubscribed.");
+      await selectAgent(page, "Second viewed chat");
+      await subscriptions.waitForSubscribedAgents([scenario.secondAgentId], { timeout: 45_000 });
+      const finish = await scenario.client.waitForFinish(scenario.firstAgentId, 90_000);
+      expect(finish.status).toBe("idle");
+
+      await selectAgent(page, "First viewed chat");
+      await expectAgentConsistentlyIdle(page, "First viewed chat");
+    } finally {
+      await scenario.cleanup();
+    }
+  });
+
   test("an unsubscribed hidden chat catches up when shown", async ({ page }) => {
     test.setTimeout(90_000);
     const subscriptions = observeTimelineSubscriptions(page);

packages/app/src/agent-stream/history-start-pagination.test.ts

@@ -1,11 +1,19 @@
 import { describe, expect, it } from "vitest";
 import {
+  abandonHistoryStartPaginationRequest,
   createHistoryStartPaginationState,
   evaluateHistoryStartPagination,
+  isHistoryStartLoadingOperation,
   rearmHistoryStartPagination,
+  settleHistoryStartPagination,
+  type HistoryStartPaginationInput,
 } from "./history-start-pagination";
 
-const visibleHistoryStart = {
+function createArmedHistoryStartPaginationState() {
+  return rearmHistoryStartPagination(createHistoryStartPaginationState());
+}
+
+const visibleHistoryStart: HistoryStartPaginationInput = {
   distanceFromHistoryStart: 0,
   hasOlderHistory: true,
   isLoadingOlderHistory: false,
@@ -14,51 +22,151 @@ const visibleHistoryStart = {
 };
 
 describe("history start pagination", () => {
-  it("loads once for each authoritative history cursor", () => {
-    const initial = createHistoryStartPaginationState();
-    const first = evaluateHistoryStartPagination(initial, visibleHistoryStart);
-    const duplicate = evaluateHistoryStartPagination(first.state, visibleHistoryStart);
-    const nextPage = evaluateHistoryStartPagination(first.state, {
+  it("waits for user scroll intent before loading", () => {
+    const dormant = createHistoryStartPaginationState();
+    const evaluated = evaluateHistoryStartPagination(dormant, visibleHistoryStart);
+
+    expect(evaluated).toEqual({ state: { status: "dormant" }, shouldLoad: false });
+  });
+
+  it("waits for anchored page geometry before authorizing another page", () => {
+    const first = evaluateHistoryStartPagination(
+      createArmedHistoryStartPaginationState(),
+      visibleHistoryStart,
+    );
+    const inFlight = evaluateHistoryStartPagination(first.state, {
+      ...visibleHistoryStart,
+      isLoadingOlderHistory: true,
+    });
+    const pageApplied = evaluateHistoryStartPagination(inFlight.state, {
+      ...visibleHistoryStart,
+      isLoadingOlderHistory: true,
+      progressKey: "epoch-1:10",
+    });
+
+    expect([first.shouldLoad, inFlight.shouldLoad, pageApplied.shouldLoad]).toEqual([
+      true,
+      false,
+      false,
+    ]);
+    expect(pageApplied.state).toEqual({ status: "settling", loadedProgressKey: "epoch-1:10" });
+  });
+
+  it("loads one page each time anchored geometry leaves and returns to history start", () => {
+    const first = evaluateHistoryStartPagination(
+      createArmedHistoryStartPaginationState(),
+      visibleHistoryStart,
+    );
+    const pageApplied = evaluateHistoryStartPagination(first.state, {
+      ...visibleHistoryStart,
+      progressKey: "epoch-1:10",
+    });
+    const settledAway = settleHistoryStartPagination(pageApplied.state, {
+      ...visibleHistoryStart,
+      distanceFromHistoryStart: 300,
+      progressKey: "epoch-1:10",
+    });
+    const returned = evaluateHistoryStartPagination(settledAway.state, {
       ...visibleHistoryStart,
       progressKey: "epoch-1:10",
     });
 
-    expect([first.shouldLoad, duplicate.shouldLoad, nextPage.shouldLoad]).toEqual([
-      true,
-      false,
-      true,
-    ]);
+    expect([
+      first.shouldLoad,
+      pageApplied.shouldLoad,
+      settledAway.shouldLoad,
+      returned.shouldLoad,
+    ]).toEqual([true, false, false, true]);
   });
 
-  it("allows the same revision again after the user leaves the history edge", () => {
+  it("continues the same loading operation when anchored geometry remains at history start", () => {
     const first = evaluateHistoryStartPagination(
-      createHistoryStartPaginationState(),
+      createArmedHistoryStartPaginationState(),
       visibleHistoryStart,
     );
-    const away = evaluateHistoryStartPagination(first.state, {
+    const pageApplied = evaluateHistoryStartPagination(first.state, {
       ...visibleHistoryStart,
-      distanceFromHistoryStart: 200,
+      progressKey: "epoch-1:10",
     });
-    const returned = evaluateHistoryStartPagination(away.state, visibleHistoryStart);
-
-    expect([first.shouldLoad, away.shouldLoad, returned.shouldLoad]).toEqual([true, false, true]);
+    const continued = settleHistoryStartPagination(pageApplied.state, {
+      ...visibleHistoryStart,
+      progressKey: "epoch-1:10",
     });
 
-  it("re-arms the same cursor when the user makes another upward edge gesture", () => {
+    expect(continued.shouldLoad).toBe(true);
+    expect(isHistoryStartLoadingOperation(first.state)).toBe(true);
+    expect(isHistoryStartLoadingOperation(pageApplied.state)).toBe(true);
+    expect(isHistoryStartLoadingOperation(continued.state)).toBe(true);
+  });
+
+  it("latches a request that finishes without cursor progress", () => {
     const first = evaluateHistoryStartPagination(
-      createHistoryStartPaginationState(),
+      createArmedHistoryStartPaginationState(),
       visibleHistoryStart,
     );
+    const inFlight = evaluateHistoryStartPagination(first.state, {
+      ...visibleHistoryStart,
+      isLoadingOlderHistory: true,
+    });
+    const finished = evaluateHistoryStartPagination(inFlight.state, visibleHistoryStart);
+    const duplicate = evaluateHistoryStartPagination(finished.state, visibleHistoryStart);
+    const away = evaluateHistoryStartPagination(duplicate.state, {
+      ...visibleHistoryStart,
+      distanceFromHistoryStart: 300,
+    });
+
+    expect(finished.state).toEqual({ status: "latched" });
+    expect([finished.shouldLoad, duplicate.shouldLoad, away.shouldLoad]).toEqual([
+      false,
+      false,
+      false,
+    ]);
+    expect(away.state).toEqual({ status: "ready" });
+  });
+
+  it("allows another user attempt after a request finishes without progress", () => {
+    const first = evaluateHistoryStartPagination(
+      createArmedHistoryStartPaginationState(),
+      visibleHistoryStart,
+    );
+    const inFlight = evaluateHistoryStartPagination(first.state, {
+      ...visibleHistoryStart,
+      isLoadingOlderHistory: true,
+    });
+    const failed = evaluateHistoryStartPagination(inFlight.state, visibleHistoryStart);
     const retried = evaluateHistoryStartPagination(
-      rearmHistoryStartPagination(first.state),
+      rearmHistoryStartPagination(failed.state),
       visibleHistoryStart,
     );
 
-    expect([first.shouldLoad, retried.shouldLoad]).toEqual([true, true]);
+    expect(failed.state).toEqual({ status: "latched" });
+    expect(retried.shouldLoad).toBe(true);
+  });
+
+  it("latches an attempt that becomes invalid before entering flight", () => {
+    const requested = evaluateHistoryStartPagination(
+      createArmedHistoryStartPaginationState(),
+      visibleHistoryStart,
+    );
+
+    expect(abandonHistoryStartPaginationRequest(requested.state, "epoch-1:20")).toEqual({
+      status: "latched",
+    });
+  });
+
+  it("does not mistake repeated edge observations for a finished request", () => {
+    const first = evaluateHistoryStartPagination(
+      createArmedHistoryStartPaginationState(),
+      visibleHistoryStart,
+    );
+    const repeated = evaluateHistoryStartPagination(first.state, visibleHistoryStart);
+
+    expect(repeated.state).toBe(first.state);
+    expect(repeated.shouldLoad).toBe(false);
   });
 
   it("waits while history loading is unavailable or already active", () => {
-    const state = createHistoryStartPaginationState();
+    const state = createArmedHistoryStartPaginationState();
 
     expect([
       evaluateHistoryStartPagination(state, { ...visibleHistoryStart, isReady: false }).shouldLoad,

packages/app/src/agent-stream/history-start-pagination.ts

@@ -1,33 +1,95 @@
 export const HISTORY_START_THRESHOLD_PX = 96;
 
-export interface HistoryStartPaginationState {
-  requestedProgressKey: string | null;
-}
+export type HistoryStartPaginationState =
+  | { status: "dormant" }
+  | { status: "ready" }
+  | { status: "loading"; requestedProgressKey: string; requestObserved: boolean }
+  | { status: "settling"; loadedProgressKey: string }
+  | { status: "latched" };
 
-export function createHistoryStartPaginationState(): HistoryStartPaginationState {
-  return { requestedProgressKey: null };
-}
-
-export function rearmHistoryStartPagination(
-  _state: HistoryStartPaginationState,
-): HistoryStartPaginationState {
-  return createHistoryStartPaginationState();
-}
-
-export function evaluateHistoryStartPagination(
-  state: HistoryStartPaginationState,
-  input: {
+export interface HistoryStartPaginationInput {
   distanceFromHistoryStart: number;
   hasOlderHistory: boolean;
   isLoadingOlderHistory: boolean;
   isReady: boolean;
   progressKey: string | null;
-  },
-): { state: HistoryStartPaginationState; shouldLoad: boolean } {
-  if (input.distanceFromHistoryStart > HISTORY_START_THRESHOLD_PX) {
-    return { state: createHistoryStartPaginationState(), shouldLoad: false };
+}
+
+export interface HistoryStartPaginationTransition {
+  state: HistoryStartPaginationState;
+  shouldLoad: boolean;
+}
+
+export function createHistoryStartPaginationState(): HistoryStartPaginationState {
+  return { status: "dormant" };
+}
+
+export function isHistoryStartLoadingOperation(state: HistoryStartPaginationState): boolean {
+  return state.status === "loading" || state.status === "settling";
+}
+
+export function rearmHistoryStartPagination(
+  state: HistoryStartPaginationState,
+): HistoryStartPaginationState {
+  return state.status === "dormant" || state.status === "latched" ? { status: "ready" } : state;
+}
+
+export function abandonHistoryStartPaginationRequest(
+  state: HistoryStartPaginationState,
+  requestedProgressKey: string,
+): HistoryStartPaginationState {
+  if (
+    state.status !== "loading" ||
+    state.requestObserved ||
+    state.requestedProgressKey !== requestedProgressKey
+  ) {
+    return state;
+  }
+  return { status: "latched" };
+}
+
+export function evaluateHistoryStartPagination(
+  state: HistoryStartPaginationState,
+  input: HistoryStartPaginationInput,
+): HistoryStartPaginationTransition {
+  if (state.status === "dormant") {
+    return { state, shouldLoad: false };
+  }
+  if (state.status === "loading") {
+    if (input.progressKey !== null && input.progressKey !== state.requestedProgressKey) {
+      return {
+        state: { status: "settling", loadedProgressKey: input.progressKey },
+        shouldLoad: false,
+      };
+    }
+    if (input.isLoadingOlderHistory && !state.requestObserved) {
+      return { state: { ...state, requestObserved: true }, shouldLoad: false };
+    }
+    if (!input.isLoadingOlderHistory && !input.hasOlderHistory) {
+      return { state: { status: "latched" }, shouldLoad: false };
     }
     if (
+      state.requestObserved &&
+      !input.isLoadingOlderHistory &&
+      input.progressKey === state.requestedProgressKey
+    ) {
+      return { state: { status: "latched" }, shouldLoad: false };
+    }
+    return { state, shouldLoad: false };
+  }
+
+  if (state.status === "settling") {
+    return { state, shouldLoad: false };
+  }
+
+  const isAtHistoryStart = input.distanceFromHistoryStart <= HISTORY_START_THRESHOLD_PX;
+  if (!isAtHistoryStart) {
+    return state.status === "ready"
+      ? { state, shouldLoad: false }
+      : { state: { status: "ready" }, shouldLoad: false };
+  }
+  if (
+    state.status === "latched" ||
     !input.isReady ||
     !input.hasOlderHistory ||
     input.isLoadingOlderHistory ||
@@ -35,11 +97,42 @@ export function evaluateHistoryStartPagination(
   ) {
     return { state, shouldLoad: false };
   }
-  if (state.requestedProgressKey === input.progressKey) {
-    return { state, shouldLoad: false };
-  }
   return {
-    state: { requestedProgressKey: input.progressKey },
+    state: {
+      status: "loading",
+      requestedProgressKey: input.progressKey,
+      requestObserved: false,
+    },
+    shouldLoad: true,
+  };
+}
+
+export function settleHistoryStartPagination(
+  state: HistoryStartPaginationState,
+  input: HistoryStartPaginationInput,
+): HistoryStartPaginationTransition {
+  if (state.status !== "settling") {
+    return { state, shouldLoad: false };
+  }
+  const isAtHistoryStart = input.distanceFromHistoryStart <= HISTORY_START_THRESHOLD_PX;
+  if (
+    !isAtHistoryStart ||
+    !input.isReady ||
+    !input.hasOlderHistory ||
+    input.isLoadingOlderHistory ||
+    input.progressKey === null
+  ) {
+    return {
+      state: isAtHistoryStart ? { status: "latched" } : { status: "ready" },
+      shouldLoad: false,
+    };
+  }
+  return {
+    state: {
+      status: "loading",
+      requestedProgressKey: input.progressKey,
+      requestObserved: false,
+    },
     shouldLoad: true,
   };
 }

packages/app/src/agent-stream/history-start-settle-scheduler.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from "vitest";
+import { createHistoryStartSettleScheduler } from "./history-start-settle-scheduler";
+
+describe("history start settle scheduler", () => {
+  it("does not restart its countdown when geometry keeps changing", () => {
+    const frames = new Map<number, () => void>();
+    let nextFrameId = 1;
+    const onFrame = vi.fn();
+    const onSettle = vi.fn();
+    const scheduler = createHistoryStartSettleScheduler({
+      settleFrames: 2,
+      requestFrame(callback) {
+        const id = nextFrameId;
+        nextFrameId += 1;
+        frames.set(id, callback);
+        return id;
+      },
+      cancelFrame: (id) => frames.delete(id),
+      isSettling: () => true,
+      isLoading: () => false,
+      onFrame,
+      onSettle,
+    });
+    const runNextFrame = () => {
+      const next = frames.entries().next().value as [number, () => void] | undefined;
+      if (!next) {
+        throw new Error("Expected a scheduled settlement frame");
+      }
+      frames.delete(next[0]);
+      next[1]();
+    };
+
+    scheduler.schedule();
+    scheduler.schedule();
+    runNextFrame();
+    scheduler.schedule();
+    runNextFrame();
+    scheduler.schedule();
+    runNextFrame();
+
+    expect(onSettle).toHaveBeenCalledTimes(1);
+    expect(onFrame).toHaveBeenCalledTimes(3);
+    expect(frames.size).toBe(0);
+  });
+});

packages/app/src/agent-stream/history-start-settle-scheduler.ts

@@ -0,0 +1,52 @@
+export interface HistoryStartSettleScheduler {
+  schedule(): void;
+  cancel(): void;
+}
+
+export function createHistoryStartSettleScheduler(input: {
+  settleFrames: number;
+  requestFrame: (callback: () => void) => number;
+  cancelFrame: (id: number) => void;
+  isSettling: () => boolean;
+  isLoading: () => boolean;
+  onFrame?: () => void;
+  onSettle: () => void;
+}): HistoryStartSettleScheduler {
+  let frameId: number | null = null;
+  let remainingFrames = 0;
+
+  const tick = () => {
+    input.onFrame?.();
+    if (!input.isSettling()) {
+      frameId = null;
+      remainingFrames = 0;
+      return;
+    }
+    if (input.isLoading() || remainingFrames > 0) {
+      if (!input.isLoading()) {
+        remainingFrames -= 1;
+      }
+      frameId = input.requestFrame(tick);
+      return;
+    }
+    frameId = null;
+    input.onSettle();
+  };
+
+  return {
+    schedule() {
+      if (frameId !== null) {
+        return;
+      }
+      remainingFrames = input.settleFrames;
+      frameId = input.requestFrame(tick);
+    },
+    cancel() {
+      if (frameId !== null) {
+        input.cancelFrame(frameId);
+      }
+      frameId = null;
+      remainingFrames = 0;
+    },
+  };
+}

packages/app/src/agent-stream/layout.test.ts

@@ -82,7 +82,7 @@ function strategyFor(platform: "web" | "android"): StreamStrategy {
 
 function layoutFor(input: {
   platform: "web" | "android";
-  agentStatus?: string;
+  isTurnActive?: boolean;
   tail: StreamItem[];
   head?: StreamItem[];
   timingIds?: string[];
@@ -90,7 +90,7 @@ function layoutFor(input: {
   const strategy = strategyFor(input.platform);
   return layoutStream({
     strategy,
-    agentStatus: input.agentStatus ?? "idle",
+    isTurnActive: input.isTurnActive ?? false,
     history: orderTailForStreamRenderStrategy({
       strategy,
       streamItems: input.tail,
@@ -151,14 +151,14 @@ describe("layoutStream", () => {
       const thirdBlock = assistantMessage("turn:block:2", 4, { groupId: "turn", index: 2 });
       const splitLayout = layoutFor({
         platform,
-        agentStatus: "running",
+        isTurnActive: true,
         tail: [userMessage("u1", 1), firstBlock],
         head: [secondBlock, thirdBlock],
         timingIds: [firstBlock.id, secondBlock.id, thirdBlock.id],
       });
       const unsplitLayout = layoutFor({
         platform,
-        agentStatus: "running",
+        isTurnActive: true,
         tail: [userMessage("u1", 1), firstBlock, secondBlock, thirdBlock],
         timingIds: [firstBlock.id, secondBlock.id, thirdBlock.id],
       });
@@ -439,7 +439,7 @@ describe("layoutStream", () => {
       const tool = toolCall("tool-1", 3);
       const layout = layoutFor({
         platform,
-        agentStatus: "running",
+        isTurnActive: true,
         tail: [userMessage("u1", 1), assistant, tool],
         timingIds: [assistant.id],
       });

packages/app/src/agent-stream/layout.ts

@@ -36,7 +36,7 @@ export interface StreamLayout {
 
 export interface StreamLayoutInput {
   strategy: StreamStrategy;
-  agentStatus: string;
+  isTurnActive: boolean;
   history: StreamItem[];
   liveHead: StreamItem[];
   timingByAssistantId: Map<string, TurnTiming>;
@@ -117,7 +117,7 @@ function findLatestAssistantInTurn(input: {
 }
 
 function resolveAuxiliaryTurnFooter(input: StreamLayoutInput): TurnFooterHost | null {
-  if (input.agentStatus === "running") {
+  if (input.isTurnActive) {
     return null;
   }
 

packages/app/src/agent-stream/model.test.ts

@@ -35,7 +35,8 @@ describe("buildAgentStreamRenderModel", () => {
     const head = [assistantMessage("live-a", 121)];
 
     const model = buildAgentStreamRenderModel({
-      agentStatus: "running",
+      isTurnActive: true,
+      activeTurnStartedAt: tail.at(-2)?.timestamp ?? null,
       tail,
       head,
       platform: "web",
@@ -53,7 +54,8 @@ describe("buildAgentStreamRenderModel", () => {
     const head = [assistantMessage("live-a", 3)];
 
     const model = buildAgentStreamRenderModel({
-      agentStatus: "running",
+      isTurnActive: true,
+      activeTurnStartedAt: tail[0]?.timestamp ?? null,
       tail,
       head,
       platform: "web",
@@ -71,14 +73,16 @@ describe("buildAgentStreamRenderModel", () => {
     const secondHead = [assistantMessage("live-b", 4)];
 
     const first = buildAgentStreamRenderModel({
-      agentStatus: "running",
+      isTurnActive: true,
+      activeTurnStartedAt: tail[0]?.timestamp ?? null,
       tail,
       head: firstHead,
       platform: "native",
       isMobileBreakpoint: false,
     });
     const second = buildAgentStreamRenderModel({
-      agentStatus: "running",
+      isTurnActive: true,
+      activeTurnStartedAt: tail[0]?.timestamp ?? null,
       tail,
       head: secondHead,
       platform: "native",
@@ -95,7 +99,8 @@ describe("buildAgentStreamRenderModel", () => {
     const head = [assistantMessage("live-a", 4)];
 
     const model = buildAgentStreamRenderModel({
-      agentStatus: "running",
+      isTurnActive: true,
+      activeTurnStartedAt: tail[0]?.timestamp ?? null,
       tail,
       head,
       platform: "web",
@@ -111,7 +116,8 @@ describe("buildAgentStreamRenderModel", () => {
     const head = [assistantMessage("live-a", 4)];
 
     const model = buildAgentStreamRenderModel({
-      agentStatus: "idle",
+      isTurnActive: false,
+      activeTurnStartedAt: null,
       tail,
       head,
       platform: "web",
@@ -130,7 +136,8 @@ describe("buildAgentStreamRenderModel", () => {
     const tail = [userMessage("u1", 1), assistantMessage("a1", 4)];
 
     const model = buildAgentStreamRenderModel({
-      agentStatus: "idle",
+      isTurnActive: false,
+      activeTurnStartedAt: null,
       tail,
       head: [],
       platform: "native",
@@ -149,7 +156,8 @@ describe("buildAgentStreamRenderModel", () => {
     const tail = [userMessage("u1", 1), userMessage("u2", 4)];
 
     const model = buildAgentStreamRenderModel({
-      agentStatus: "idle",
+      isTurnActive: false,
+      activeTurnStartedAt: null,
       tail,
       head: [],
       platform: "web",

packages/app/src/agent-stream/model.ts

@@ -35,7 +35,8 @@ export interface AgentStreamRenderModel {
 }
 
 export interface BuildAgentStreamRenderModelInput {
-  agentStatus: string;
+  isTurnActive: boolean;
+  activeTurnStartedAt: Date | null;
   tail: StreamItem[];
   head: StreamItem[];
   platform: "web" | "native";
@@ -131,7 +132,8 @@ function splitOrderedTail(params: {
 }
 
 function getTurnTiming(params: {
-  agentStatus: string;
+  isTurnActive: boolean;
+  activeTurnStartedAt: Date | null;
   tail: StreamItem[];
   head: StreamItem[];
 }): StreamTurnTiming {
@@ -140,17 +142,18 @@ function getTurnTiming(params: {
     cachedByHead = new WeakMap();
     turnTimingCache.set(params.tail, cachedByHead);
   }
-  let cachedByStatus = cachedByHead.get(params.head);
-  if (!cachedByStatus) {
-    cachedByStatus = new Map();
-    cachedByHead.set(params.head, cachedByStatus);
+  let cachedByActivity = cachedByHead.get(params.head);
+  if (!cachedByActivity) {
+    cachedByActivity = new Map();
+    cachedByHead.set(params.head, cachedByActivity);
   }
-  const cached = cachedByStatus.get(params.agentStatus);
+  const activityKey = `${params.isTurnActive}:${params.activeTurnStartedAt?.getTime() ?? "none"}`;
+  const cached = cachedByActivity.get(activityKey);
   if (cached) {
     return cached;
   }
   const timing = deriveStreamTurnTiming(params);
-  cachedByStatus.set(params.agentStatus, timing);
+  cachedByActivity.set(activityKey, timing);
   return timing;
 }
 
@@ -188,7 +191,8 @@ export function buildAgentStreamRenderModel(
     isMobileBreakpoint: input.isMobileBreakpoint,
   });
   const turnTiming = getTurnTiming({
-    agentStatus: input.agentStatus,
+    isTurnActive: input.isTurnActive,
+    activeTurnStartedAt: input.activeTurnStartedAt,
     tail: input.tail,
     head: input.head,
   });

packages/app/src/agent-stream/strategy-native.tsx

@@ -32,10 +32,19 @@ import {
   resolveBottomAnchorTransportBehavior,
 } from "./strategy";
 import {
+  abandonHistoryStartPaginationRequest,
   createHistoryStartPaginationState,
   evaluateHistoryStartPagination,
+  isHistoryStartLoadingOperation,
   rearmHistoryStartPagination,
+  settleHistoryStartPagination,
+  type HistoryStartPaginationInput,
+  type HistoryStartPaginationTransition,
 } from "./history-start-pagination";
+import {
+  createHistoryStartSettleScheduler,
+  type HistoryStartSettleScheduler,
+} from "./history-start-settle-scheduler";
 
 const DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION = Object.freeze({
   minIndexForVisible: 0,
@@ -49,10 +58,11 @@ const foregroundMutedColorMapping = (theme: Theme) => ({
 const historyStartSlotStyle: ViewStyle = {
   alignItems: "center",
   justifyContent: "center",
-  minHeight: 32,
-  paddingTop: 4,
-  paddingBottom: 8,
+  height: 32,
+  flexShrink: 0,
 };
+const HISTORY_START_SETTLE_FRAMES = 2;
+
 interface HistoryRowDisplayVariants {
   regular?: StreamItem;
   compact?: StreamItem;
@@ -116,7 +126,11 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
   const [isNativeViewportSettling, setIsNativeViewportSettling] = useState(false);
   const nativeViewportSettlingFrameIdRef = useRef<number | null>(null);
   const historyStartReadyRef = useRef(false);
-  const historyStartPaginationStateRef = useRef(createHistoryStartPaginationState());
+  const [historyStartPaginationState, setHistoryStartPaginationState] = useState(
+    createHistoryStartPaginationState,
+  );
+  const historyStartPaginationStateRef = useRef(historyStartPaginationState);
+  const historyStartSettleSchedulerRef = useRef<HistoryStartSettleScheduler | null>(null);
 
   const historyItems = useMemo(() => {
     if (segments.historyVirtualized.length === 0) {
@@ -145,22 +159,74 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       ),
     [displayStateHistoryRows, historyRowRevision?.contentById],
   );
-  const evaluateHistoryStart = useStableEvent(() => {
+  const getHistoryStartPaginationInput = useStableEvent((): HistoryStartPaginationInput => {
     const metrics = streamViewportMetricsRef.current;
     const hasMeasuredViewport =
       metrics.viewportMeasuredForKey === metrics.containerKey &&
       metrics.contentMeasuredForKey === metrics.containerKey;
-    const result = evaluateHistoryStartPagination(historyStartPaginationStateRef.current, {
+    return {
       distanceFromHistoryStart: metrics.contentHeight - metrics.viewportHeight - metrics.offsetY,
       hasOlderHistory,
       isLoadingOlderHistory,
       isReady: historyStartReadyRef.current && hasMeasuredViewport,
       progressKey: olderHistoryProgressKey,
+    };
   });
-    historyStartPaginationStateRef.current = result.state;
-    if (result.shouldLoad) {
-      onNearHistoryStart();
+  const applyHistoryStartPaginationTransition = useStableEvent(
+    (transition: HistoryStartPaginationTransition) => {
+      const previousState = historyStartPaginationStateRef.current;
+      historyStartPaginationStateRef.current = transition.state;
+      if (transition.state !== previousState) {
+        setHistoryStartPaginationState(transition.state);
       }
+      if (transition.shouldLoad) {
+        const requestedProgressKey = olderHistoryProgressKey;
+        if (requestedProgressKey === null) {
+          return;
+        }
+        void (async () => {
+          const started = await onNearHistoryStart();
+          if (started === true) {
+            return;
+          }
+          applyHistoryStartPaginationTransition({
+            state: abandonHistoryStartPaginationRequest(
+              historyStartPaginationStateRef.current,
+              requestedProgressKey,
+            ),
+            shouldLoad: false,
+          });
+        })();
+      }
+    },
+  );
+  const evaluateHistoryStart = useStableEvent(() => {
+    const transition = evaluateHistoryStartPagination(
+      historyStartPaginationStateRef.current,
+      getHistoryStartPaginationInput(),
+    );
+    applyHistoryStartPaginationTransition(transition);
+  });
+  const scheduleHistoryStartSettle = useStableEvent(() => {
+    let scheduler = historyStartSettleSchedulerRef.current;
+    if (!scheduler) {
+      scheduler = createHistoryStartSettleScheduler({
+        settleFrames: HISTORY_START_SETTLE_FRAMES,
+        requestFrame: requestAnimationFrame,
+        cancelFrame: cancelAnimationFrame,
+        isSettling: () => historyStartPaginationStateRef.current.status === "settling",
+        isLoading: () => getHistoryStartPaginationInput().isLoadingOlderHistory,
+        onSettle: () => {
+          const transition = settleHistoryStartPagination(
+            historyStartPaginationStateRef.current,
+            getHistoryStartPaginationInput(),
+          );
+          applyHistoryStartPaginationTransition(transition);
+        },
+      });
+      historyStartSettleSchedulerRef.current = scheduler;
+    }
+    scheduler.schedule();
   });
 
   const clearNativeViewportSettling = useCallback(() => {
@@ -261,7 +327,9 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     clearNativeViewportSettling();
     setIsNativeViewportSettling(false);
     historyStartReadyRef.current = false;
-    historyStartPaginationStateRef.current = createHistoryStartPaginationState();
+    const initialHistoryStartState = createHistoryStartPaginationState();
+    historyStartPaginationStateRef.current = initialHistoryStartState;
+    setHistoryStartPaginationState(initialHistoryStartState);
     const frame = requestAnimationFrame(() => {
       historyStartReadyRef.current = true;
       evaluateHistoryStart();
@@ -269,6 +337,8 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     return () => {
       cancelAnimationFrame(frame);
       clearPendingUserScrollEnd();
+      historyStartSettleSchedulerRef.current?.cancel();
+      historyStartSettleSchedulerRef.current = null;
     };
   }, [agentId, clearNativeViewportSettling, clearPendingUserScrollEnd, evaluateHistoryStart]);
 
@@ -369,16 +439,16 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
   });
 
   const handleScrollBeginDrag = useStableEvent((event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (!isLoadingOlderHistory) {
-      historyStartPaginationStateRef.current = rearmHistoryStartPagination(
-        historyStartPaginationStateRef.current,
-      );
-    }
     clearPendingUserScrollEnd();
     isUserScrollActiveRef.current = true;
     scrollKeyboardDismiss.onScrollBeginDrag(event);
     bottomAnchorController.beginUserScroll();
+    const rearmed = rearmHistoryStartPagination(historyStartPaginationStateRef.current);
+    if (rearmed !== historyStartPaginationStateRef.current) {
+      historyStartPaginationStateRef.current = rearmed;
+      setHistoryStartPaginationState(rearmed);
       evaluateHistoryStart();
+    }
   });
 
   // Defer drag end so momentum can take ownership, but capture the terminal
@@ -454,11 +524,23 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       contentHeight: nextContentHeight,
     });
     evaluateHistoryStart();
+    if (historyStartPaginationStateRef.current.status === "settling") {
+      scheduleHistoryStartSettle();
+    }
   });
 
   useEffect(() => {
     evaluateHistoryStart();
-  }, [evaluateHistoryStart, hasOlderHistory, isLoadingOlderHistory, olderHistoryProgressKey]);
+    if (historyStartPaginationStateRef.current.status === "settling") {
+      scheduleHistoryStartSettle();
+    }
+  }, [
+    evaluateHistoryStart,
+    hasOlderHistory,
+    isLoadingOlderHistory,
+    olderHistoryProgressKey,
+    scheduleHistoryStartSettle,
+  ]);
 
   const renderItem = useStableEvent(
     ({ item, index }: ListRenderItemInfo<StreamItem>): ReactElement | null => {
@@ -499,20 +581,17 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
   ]);
 
   const historyFooterContent = useMemo(() => {
-    if (!hasOlderHistory && !isLoadingOlderHistory) {
-      return null;
-    }
+    const isLoadingOperation = isHistoryStartLoadingOperation(historyStartPaginationState);
     return (
-      <View
-        style={historyStartSlotStyle}
-        testID={isLoadingOlderHistory ? "load-older-history-spinner" : undefined}
-      >
-        {isLoadingOlderHistory ? (
+      <View style={historyStartSlotStyle} testID="older-history-slot">
+        {isLoadingOperation ? (
+          <View testID="load-older-history-spinner">
             <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+          </View>
         ) : null}
       </View>
     );
-  }, [hasOlderHistory, isLoadingOlderHistory]);
+  }, [historyStartPaginationState]);
 
   // RN's FlatList strictMode keeps its internal renderItem wrapper stable when
   // data or the live header changes, preserving the row identities above.

packages/app/src/agent-stream/strategy-web.test.tsx

@@ -130,7 +130,7 @@ describe("createWebStreamStrategy", () => {
             routeBottomAnchorRequest: null,
             isAuthoritativeHistoryReady: true,
             onNearBottomChange: vi.fn(),
-            onNearHistoryStart: vi.fn(),
+            onNearHistoryStart: vi.fn().mockReturnValue(true),
             isLoadingOlderHistory: false,
             hasOlderHistory: false,
             olderHistoryProgressKey: null,
@@ -174,7 +174,7 @@ describe("createWebStreamStrategy", () => {
       routeBottomAnchorRequest: null,
       isAuthoritativeHistoryReady: true,
       onNearBottomChange: vi.fn(),
-      onNearHistoryStart: vi.fn(),
+      onNearHistoryStart: vi.fn().mockReturnValue(true),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
       olderHistoryProgressKey: null,
@@ -230,7 +230,7 @@ describe("createWebStreamStrategy", () => {
           routeBottomAnchorRequest: null,
           isAuthoritativeHistoryReady: true,
           onNearBottomChange: vi.fn(),
-          onNearHistoryStart: vi.fn(),
+          onNearHistoryStart: vi.fn().mockReturnValue(true),
           isLoadingOlderHistory: false,
           hasOlderHistory: false,
           olderHistoryProgressKey: null,
@@ -285,76 +285,6 @@ describe("createWebStreamStrategy", () => {
     expect(scrollTo).not.toHaveBeenCalled();
   });
 
-  it("fires near-history-start when the user scrolls near the top", async () => {
-    const strategy = createWebStreamStrategy({ isMobileBreakpoint: true });
-    const viewportRef = React.createRef<StreamViewportHandle>();
-    const onNearHistoryStart = vi.fn();
-    container = document.createElement("div");
-    document.body.appendChild(container);
-    root = createRoot(container);
-
-    act(() => {
-      root?.render(
-        <>
-          {strategy.render({
-            agentId: "agent",
-            segments: {
-              historyVirtualized: [],
-              historyMounted: [userMessage(1), userMessage(2)],
-              liveHead: [],
-            },
-            boundary: {
-              hasVirtualizedHistory: false,
-              hasMountedHistory: true,
-              hasLiveHead: false,
-            },
-            renderers: createRenderers(vi.fn()),
-            listEmptyComponent: null,
-            viewportRef,
-            routeBottomAnchorRequest: null,
-            isAuthoritativeHistoryReady: true,
-            onNearBottomChange: vi.fn(),
-            onNearHistoryStart,
-            isLoadingOlderHistory: false,
-            hasOlderHistory: true,
-            olderHistoryProgressKey: "epoch-1:20",
-            scrollEnabled: true,
-            listStyle: null,
-            baseListContentContainerStyle: null,
-            forwardListContentContainerStyle: null,
-          })}
-        </>,
-      );
-    });
-
-    const scrollContainer = container.querySelector('[data-testid="agent-chat-scroll"]');
-    if (!(scrollContainer instanceof HTMLElement)) {
-      throw new Error("Expected agent chat scroll container");
-    }
-    Object.defineProperty(scrollContainer, "clientHeight", { configurable: true, value: 400 });
-    Object.defineProperty(scrollContainer, "scrollHeight", { configurable: true, value: 1200 });
-    Object.defineProperty(scrollContainer, "scrollTop", { configurable: true, value: 64 });
-
-    await act(async () => {
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-    });
-
-    expect(onNearHistoryStart).not.toHaveBeenCalled();
-
-    act(() => {
-      scrollContainer.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
-      scrollContainer?.dispatchEvent(new Event("scroll"));
-    });
-
-    expect(onNearHistoryStart).toHaveBeenCalledTimes(1);
-
-    act(() => {
-      scrollContainer.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
-    });
-
-    expect(onNearHistoryStart).toHaveBeenCalledTimes(2);
-  });
-
   it("waits for bottom anchoring before evaluating a delayed initial tail", async () => {
     HTMLElement.prototype.scrollTo = vi.fn(function (
       this: HTMLElement,
@@ -366,7 +296,7 @@ describe("createWebStreamStrategy", () => {
     });
     const strategy = createWebStreamStrategy({ isMobileBreakpoint: true });
     const viewportRef = React.createRef<StreamViewportHandle>();
-    const onNearHistoryStart = vi.fn();
+    const onNearHistoryStart = vi.fn().mockReturnValue(true);
     const renderInput = {
       agentId: "agent",
       boundary: {
@@ -473,7 +403,7 @@ describe("createWebStreamStrategy", () => {
       viewportRef,
       routeBottomAnchorRequest,
       onNearBottomChange: vi.fn(),
-      onNearHistoryStart: vi.fn(),
+      onNearHistoryStart: vi.fn().mockReturnValue(true),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
       olderHistoryProgressKey: null,
@@ -581,7 +511,7 @@ describe("createWebStreamStrategy", () => {
       viewportRef,
       routeBottomAnchorRequest,
       onNearBottomChange: vi.fn(),
-      onNearHistoryStart: vi.fn(),
+      onNearHistoryStart: vi.fn().mockReturnValue(true),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
       olderHistoryProgressKey: null,
@@ -678,7 +608,7 @@ describe("createWebStreamStrategy", () => {
       viewportRef,
       routeBottomAnchorRequest,
       onNearBottomChange: vi.fn(),
-      onNearHistoryStart: vi.fn(),
+      onNearHistoryStart: vi.fn().mockReturnValue(true),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
       olderHistoryProgressKey: null,
@@ -777,7 +707,7 @@ describe("createWebStreamStrategy", () => {
       viewportRef,
       routeBottomAnchorRequest: null,
       onNearBottomChange: vi.fn(),
-      onNearHistoryStart: vi.fn(),
+      onNearHistoryStart: vi.fn().mockReturnValue(true),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
       olderHistoryProgressKey: null,

packages/app/src/agent-stream/strategy-web.tsx

@@ -17,15 +17,30 @@ import { estimateStreamItemHeight } from "./web-virtualization";
 import type { StreamRenderInput, StreamStrategy, StreamViewportHandle } from "./strategy";
 import { createStreamStrategy } from "./strategy";
 import {
+  abandonHistoryStartPaginationRequest,
   createHistoryStartPaginationState,
   evaluateHistoryStartPagination,
+  isHistoryStartLoadingOperation,
   rearmHistoryStartPagination,
+  settleHistoryStartPagination,
+  type HistoryStartPaginationInput,
+  type HistoryStartPaginationTransition,
 } from "./history-start-pagination";
+import {
+  createHistoryStartSettleScheduler,
+  type HistoryStartSettleScheduler,
+} from "./history-start-settle-scheduler";
 
 interface CreateWebStreamStrategyInput {
   isMobileBreakpoint: boolean;
 }
 
+interface HistoryStartPrependAnchor {
+  progressKey: string;
+  rowId: string;
+  viewportOffset: number;
+}
+
 type ScrollBehaviorLike = "auto" | "smooth";
 
 const WEB_BOTTOM_SETTLE_TIMEOUT_MS = 200;
@@ -33,19 +48,34 @@ const USER_SCROLL_DELTA_EPSILON = 1;
 const BOTTOM_OVERSCROLL_TOLERANCE_PX = 2;
 const AUTO_SCROLL_BOTTOM_THRESHOLD_PX = 64;
 const AUTO_SCROLL_RESUME_THRESHOLD_PX = 1;
+const HISTORY_START_SETTLE_FRAMES = 2;
 
 const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 const foregroundMutedColorMapping = (theme: Theme) => ({
   color: theme.colors.foregroundMuted,
 });
 
+function findHistoryRowElement(contentNode: HTMLElement, rowId: string): HTMLElement | null {
+  for (const element of contentNode.querySelectorAll<HTMLElement>("[data-history-row-id]")) {
+    if (element.dataset.historyRowId === rowId) {
+      return element;
+    }
+  }
+  return null;
+}
+
 const historyStartSlotStyle: CSSProperties = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  minHeight: 32,
-  paddingTop: 4,
-  paddingBottom: 8,
+  height: 32,
+  flexShrink: 0,
+};
+
+const mountedHistoryRowStyle: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
 };
 
 function isScrollContainerNearBottom(
@@ -140,13 +170,18 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   };
   const lastKnownScrollTopRef = useRef(0);
   const pendingUserScrollUpIntentRef = useRef(false);
-  const isPointerScrollActiveRef = useRef(false);
   const lastTouchClientYRef = useRef<number | null>(null);
   const pendingAutoScrollFrameRef = useRef<number | null>(null);
   const pendingAutoScrollTimeoutRef = useRef<number | null>(null);
   const pendingVirtualRowMeasureFramesRef = useRef(new Map<Element, number>());
   const historyStartReadyRef = useRef(false);
-  const historyStartPaginationStateRef = useRef(createHistoryStartPaginationState());
+  const [historyStartPaginationState, setHistoryStartPaginationState] = useState(
+    createHistoryStartPaginationState,
+  );
+  const historyStartPaginationStateRef = useRef(historyStartPaginationState);
+  const historyStartPrependAnchorRef = useRef<HistoryStartPrependAnchor | null>(null);
+  const historyStartPrependAnchorActiveRef = useRef(false);
+  const historyStartSettleSchedulerRef = useRef<HistoryStartSettleScheduler | null>(null);
   const shouldUseVirtualizer = segments.historyVirtualized.length > 0;
   const {
     renderHistoryVirtualizedRow,
@@ -176,6 +211,9 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   });
   useEffect(() => {
     rowVirtualizer.shouldAdjustScrollPositionOnItemSizeChange = (_item, _delta, instance) => {
+      if (historyStartPrependAnchorActiveRef.current) {
+        return false;
+      }
       const viewportHeight = instance.scrollRect?.height ?? 0;
       const scrollOffset = instance.scrollOffset ?? 0;
       const remainingDistance = instance.getTotalSize() - (scrollOffset + viewportHeight);
@@ -187,25 +225,162 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   }, [rowVirtualizer]);
   const virtualRows = rowVirtualizer.getVirtualItems();
   const virtualTotalSize = rowVirtualizer.getTotalSize();
-  const evaluateHistoryStart = useStableEvent(() => {
+  const getHistoryStartPaginationInput = useStableEvent((): HistoryStartPaginationInput | null => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) {
-      return;
+      return null;
     }
     const bottomAnchorSettled =
       !followOutputRef.current || isScrollContainerNearBottom(scrollContainer);
-    const result = evaluateHistoryStartPagination(historyStartPaginationStateRef.current, {
+    return {
       distanceFromHistoryStart: scrollContainer.scrollTop,
       hasOlderHistory,
       isLoadingOlderHistory,
       isReady: historyStartReadyRef.current && bottomAnchorSettled,
       progressKey: olderHistoryProgressKey,
+    };
   });
-    historyStartPaginationStateRef.current = result.state;
-    if (result.shouldLoad) {
-      onNearHistoryStart();
+  const applyHistoryStartPaginationTransition = useStableEvent(
+    (transition: HistoryStartPaginationTransition) => {
+      const previousState = historyStartPaginationStateRef.current;
+      historyStartPaginationStateRef.current = transition.state;
+      if (transition.state !== previousState) {
+        setHistoryStartPaginationState(transition.state);
       }
+      if (!isHistoryStartLoadingOperation(transition.state)) {
+        historyStartPrependAnchorRef.current = null;
+        historyStartPrependAnchorActiveRef.current = false;
+      }
+      if (!transition.shouldLoad || olderHistoryProgressKey === null) {
+        return;
+      }
+      const scrollContainer = scrollContainerRef.current;
+      const contentNode = contentRef.current;
+      const anchorRow = segments.historyMounted.at(-1) ?? segments.historyVirtualized.at(-1);
+      const anchorElement =
+        contentNode && anchorRow ? findHistoryRowElement(contentNode, anchorRow.id) : null;
+      if (scrollContainer && anchorRow && anchorElement) {
+        historyStartPrependAnchorRef.current = {
+          progressKey: olderHistoryProgressKey,
+          rowId: anchorRow.id,
+          viewportOffset:
+            anchorElement.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top,
+        };
+      } else {
+        historyStartPrependAnchorRef.current = null;
+      }
+      historyStartPrependAnchorActiveRef.current = false;
+      const requestedProgressKey = olderHistoryProgressKey;
+      void (async () => {
+        const started = await onNearHistoryStart();
+        if (started === true) {
+          return;
+        }
+        applyHistoryStartPaginationTransition({
+          state: abandonHistoryStartPaginationRequest(
+            historyStartPaginationStateRef.current,
+            requestedProgressKey,
+          ),
+          shouldLoad: false,
         });
+      })();
+    },
+  );
+  const evaluateHistoryStart = useStableEvent(() => {
+    const input = getHistoryStartPaginationInput();
+    if (!input) {
+      return;
+    }
+    const transition = evaluateHistoryStartPagination(
+      historyStartPaginationStateRef.current,
+      input,
+    );
+    applyHistoryStartPaginationTransition(transition);
+  });
+  const rearmHistoryStartFromUserIntent = useStableEvent(() => {
+    const rearmed = rearmHistoryStartPagination(historyStartPaginationStateRef.current);
+    if (rearmed === historyStartPaginationStateRef.current) {
+      return;
+    }
+    historyStartPaginationStateRef.current = rearmed;
+    setHistoryStartPaginationState(rearmed);
+    evaluateHistoryStart();
+  });
+  const applyHistoryStartPrependAnchor = useStableEvent(() => {
+    const scrollContainer = scrollContainerRef.current;
+    const contentNode = contentRef.current;
+    const anchor = historyStartPrependAnchorRef.current;
+    if (
+      !scrollContainer ||
+      !contentNode ||
+      !anchor ||
+      !historyStartPrependAnchorActiveRef.current
+    ) {
+      return;
+    }
+    const anchorElement = findHistoryRowElement(contentNode, anchor.rowId);
+    if (!anchorElement) {
+      return;
+    }
+    const viewportOffset =
+      anchorElement.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top;
+    scrollContainer.scrollTop += viewportOffset - anchor.viewportOffset;
+    lastKnownScrollTopRef.current = scrollContainer.scrollTop;
+  });
+  const scheduleHistoryStartPrependSettle = useStableEvent(() => {
+    let scheduler = historyStartSettleSchedulerRef.current;
+    if (!scheduler) {
+      scheduler = createHistoryStartSettleScheduler({
+        settleFrames: HISTORY_START_SETTLE_FRAMES,
+        requestFrame: (callback) => window.requestAnimationFrame(callback),
+        cancelFrame: (frame) => window.cancelAnimationFrame(frame),
+        isSettling: () => historyStartPaginationStateRef.current.status === "settling",
+        isLoading: () => {
+          const input = getHistoryStartPaginationInput();
+          return (
+            !input ||
+            input.isLoadingOlderHistory ||
+            pendingVirtualRowMeasureFramesRef.current.size > 0
+          );
+        },
+        onFrame: applyHistoryStartPrependAnchor,
+        onSettle: () => {
+          const input = getHistoryStartPaginationInput();
+          if (!input) {
+            return;
+          }
+          historyStartPrependAnchorActiveRef.current = false;
+          const transition = settleHistoryStartPagination(
+            historyStartPaginationStateRef.current,
+            input,
+          );
+          historyStartPrependAnchorRef.current = null;
+          applyHistoryStartPaginationTransition(transition);
+        },
+      });
+      historyStartSettleSchedulerRef.current = scheduler;
+    }
+    scheduler.schedule();
+  });
+
+  useLayoutEffect(() => {
+    const anchor = historyStartPrependAnchorRef.current;
+    if (!anchor || anchor.progressKey === olderHistoryProgressKey) {
+      return;
+    }
+    historyStartPrependAnchorActiveRef.current = true;
+    evaluateHistoryStart();
+    applyHistoryStartPrependAnchor();
+    scheduleHistoryStartPrependSettle();
+  }, [
+    applyHistoryStartPrependAnchor,
+    evaluateHistoryStart,
+    olderHistoryProgressKey,
+    scheduleHistoryStartPrependSettle,
+    segments.historyMounted,
+    segments.historyVirtualized,
+    virtualTotalSize,
+  ]);
 
   const measureVirtualizedRowElement = useCallback(
     (node: HTMLDivElement | null) => {
@@ -313,29 +488,40 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     const scrolledDown =
       currentScrollTop > lastKnownScrollTopRef.current + USER_SCROLL_DELTA_EPSILON;
 
-    if (!followOutputRef.current && isAtBottom && scrolledDown) {
+    if (scrolledUp) {
+      cancelPendingStickToBottom();
+      if (followOutputRef.current) {
+        setFollowOutput(false);
+      }
+      pendingUserScrollUpIntentRef.current = false;
+      rearmHistoryStartFromUserIntent();
+    } else if (!followOutputRef.current && isAtBottom && scrolledDown) {
       setFollowOutput(true);
       pendingUserScrollUpIntentRef.current = false;
     } else if (followOutputRef.current && pendingUserScrollUpIntentRef.current) {
-      if (scrolledUp || !isAtBottom) {
+      if (!isAtBottom) {
         cancelPendingStickToBottom();
         setFollowOutput(false);
       }
       pendingUserScrollUpIntentRef.current = false;
-    } else if (followOutputRef.current && isPointerScrollActiveRef.current) {
-      if (scrolledUp) {
-        cancelPendingStickToBottom();
-        setFollowOutput(false);
-      }
     }
 
     lastKnownScrollTopRef.current = currentScrollTop;
     updateScrollMetrics();
     evaluateHistoryStart();
-  }, [cancelPendingStickToBottom, evaluateHistoryStart, updateScrollMetrics]);
+  }, [
+    cancelPendingStickToBottom,
+    evaluateHistoryStart,
+    rearmHistoryStartFromUserIntent,
+    updateScrollMetrics,
+  ]);
 
   useEffect(() => {
-    historyStartPaginationStateRef.current = createHistoryStartPaginationState();
+    const initialHistoryStartState = createHistoryStartPaginationState();
+    historyStartPaginationStateRef.current = initialHistoryStartState;
+    setHistoryStartPaginationState(initialHistoryStartState);
+    historyStartPrependAnchorRef.current = null;
+    historyStartPrependAnchorActiveRef.current = false;
     const frame = window.requestAnimationFrame(() => {
       historyStartReadyRef.current = true;
       evaluateHistoryStart();
@@ -343,6 +529,8 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     return () => {
       window.cancelAnimationFrame(frame);
       historyStartReadyRef.current = false;
+      historyStartSettleSchedulerRef.current?.cancel();
+      historyStartSettleSchedulerRef.current = null;
     };
   }, [evaluateHistoryStart, props.agentId]);
 
@@ -379,33 +567,36 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     scheduleStickToBottom,
   ]);
 
-  useEffect(() => {
+  // Following output is a layout invariant: rows, footer, and bottom offset must
+  // reach the browser in the same paint.
+  useLayoutEffect(() => {
     if (!followOutputRef.current) {
       return;
     }
-    scheduleStickToBottom();
+    cancelPendingStickToBottom();
+    scrollMessagesToBottom("auto");
   }, [
-    scheduleStickToBottom,
+    cancelPendingStickToBottom,
+    renderLiveAuxiliary,
+    scrollMessagesToBottom,
     segments.historyMounted,
     segments.historyVirtualized,
     segments.liveHead,
+    virtualTotalSize,
   ]);
 
-  useEffect(() => {
-    if (!followOutputRef.current || !shouldUseVirtualizer) {
-      return;
-    }
-    scheduleStickToBottom();
-  }, [scheduleStickToBottom, shouldUseVirtualizer, virtualTotalSize]);
-
   useEffect(() => {
     updateScrollMetrics();
     evaluateHistoryStart();
+    if (historyStartPaginationStateRef.current.status === "settling") {
+      scheduleHistoryStartPrependSettle();
+    }
   }, [
     evaluateHistoryStart,
     hasOlderHistory,
     isLoadingOlderHistory,
     olderHistoryProgressKey,
+    scheduleHistoryStartPrependSettle,
     segments.historyMounted.length,
     segments.historyVirtualized.length,
     segments.liveHead.length,
@@ -423,6 +614,12 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     updateScrollMetrics();
     evaluateHistoryStart();
     const observer = new ResizeObserver(() => {
+      if (historyStartPrependAnchorActiveRef.current) {
+        applyHistoryStartPrependAnchor();
+      }
+      if (historyStartPaginationStateRef.current.status === "settling") {
+        scheduleHistoryStartPrependSettle();
+      }
       updateScrollMetrics();
       evaluateHistoryStart();
       if (!followOutputRef.current) {
@@ -437,7 +634,13 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     return () => {
       observer.disconnect();
     };
-  }, [evaluateHistoryStart, scheduleStickToBottom, updateScrollMetrics]);
+  }, [
+    applyHistoryStartPrependAnchor,
+    evaluateHistoryStart,
+    scheduleHistoryStartPrependSettle,
+    scheduleStickToBottom,
+    updateScrollMetrics,
+  ]);
 
   useEffect(() => {
     const scrollContainer = scrollContainerRef.current;
@@ -447,22 +650,11 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
 
     const handleWheel = (event: WheelEvent) => {
       if (event.deltaY < 0) {
-        if (!isLoadingOlderHistory) {
-          historyStartPaginationStateRef.current = rearmHistoryStartPagination(
-            historyStartPaginationStateRef.current,
-          );
-        }
         pendingUserScrollUpIntentRef.current = true;
         cancelPendingStickToBottom();
-        evaluateHistoryStart();
+        rearmHistoryStartFromUserIntent();
       }
     };
-    const handlePointerDown = () => {
-      isPointerScrollActiveRef.current = true;
-    };
-    const handlePointerUp = () => {
-      isPointerScrollActiveRef.current = false;
-    };
     const handleTouchStart = (event: TouchEvent) => {
       const touch = event.touches[0];
       if (!touch) {
@@ -477,14 +669,9 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
       }
       const previousTouchY = lastTouchClientYRef.current;
       if (previousTouchY !== null && touch.clientY > previousTouchY + 1) {
-        if (!isLoadingOlderHistory) {
-          historyStartPaginationStateRef.current = rearmHistoryStartPagination(
-            historyStartPaginationStateRef.current,
-          );
-        }
         pendingUserScrollUpIntentRef.current = true;
         cancelPendingStickToBottom();
-        evaluateHistoryStart();
+        rearmHistoryStartFromUserIntent();
       }
       lastTouchClientYRef.current = touch.clientY;
     };
@@ -494,9 +681,6 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
 
     scrollContainer.addEventListener("scroll", handleDomScroll, { passive: true });
     scrollContainer.addEventListener("wheel", handleWheel, { passive: true });
-    scrollContainer.addEventListener("pointerdown", handlePointerDown, { passive: true });
-    scrollContainer.addEventListener("pointerup", handlePointerUp, { passive: true });
-    scrollContainer.addEventListener("pointercancel", handlePointerUp, { passive: true });
     scrollContainer.addEventListener("touchstart", handleTouchStart, { passive: true });
     scrollContainer.addEventListener("touchmove", handleTouchMove, { passive: true });
     scrollContainer.addEventListener("touchend", handleTouchEnd, { passive: true });
@@ -505,15 +689,12 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     return () => {
       scrollContainer.removeEventListener("scroll", handleDomScroll);
       scrollContainer.removeEventListener("wheel", handleWheel);
-      scrollContainer.removeEventListener("pointerdown", handlePointerDown);
-      scrollContainer.removeEventListener("pointerup", handlePointerUp);
-      scrollContainer.removeEventListener("pointercancel", handlePointerUp);
       scrollContainer.removeEventListener("touchstart", handleTouchStart);
       scrollContainer.removeEventListener("touchmove", handleTouchMove);
       scrollContainer.removeEventListener("touchend", handleTouchEnd);
       scrollContainer.removeEventListener("touchcancel", handleTouchEnd);
     };
-  }, [cancelPendingStickToBottom, evaluateHistoryStart, handleDomScroll, isLoadingOlderHistory]);
+  }, [cancelPendingStickToBottom, handleDomScroll, rearmHistoryStartFromUserIntent]);
 
   useEffect(() => {
     const handle: StreamViewportHandle = {
@@ -580,9 +761,9 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   );
   const mountedHistoryRows = useMemo(() => {
     return segments.historyMounted.map((item, index) => (
-      <Fragment key={item.id}>
+      <div key={item.id} data-history-row-id={item.id} style={mountedHistoryRowStyle}>
         {renderHistoryMountedRow(item, index, segments.historyMounted)}
-      </Fragment>
+      </div>
     ));
   }, [renderHistoryMountedRow, segments.historyMounted]);
   const liveHeadRows = useMemo(() => {
@@ -595,20 +776,17 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     return renderLiveAuxiliary();
   }, [renderLiveAuxiliary]);
   const historyStartSlot = useMemo(() => {
-    if (!hasOlderHistory && !isLoadingOlderHistory) {
-      return null;
-    }
+    const isLoadingOperation = isHistoryStartLoadingOperation(historyStartPaginationState);
     return (
-      <div
-        style={historyStartSlotStyle}
-        data-testid={isLoadingOlderHistory ? "load-older-history-spinner" : undefined}
-      >
-        {isLoadingOlderHistory ? (
+      <div style={historyStartSlotStyle} data-testid="older-history-slot">
+        {isLoadingOperation ? (
+          <div data-testid="load-older-history-spinner">
             <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+          </div>
         ) : null}
       </div>
     );
-  }, [hasOlderHistory, isLoadingOlderHistory]);
+  }, [historyStartPaginationState]);
   const shouldRenderEmpty =
     !boundary.hasMountedHistory &&
     !boundary.hasVirtualizedHistory &&
@@ -635,6 +813,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
                 <div
                   key={virtualRow.key}
                   data-index={virtualRow.index}
+                  data-history-row-id={item.id}
                   ref={measureVirtualizedRowElement}
                   style={renderVirtualRowStyle(virtualRow.start)}
                 >

packages/app/src/agent-stream/strategy.ts

@@ -69,7 +69,7 @@ export interface StreamRenderInput {
   routeBottomAnchorRequest: BottomAnchorRouteRequest | null;
   isAuthoritativeHistoryReady: boolean;
   onNearBottomChange: (value: boolean) => void;
-  onNearHistoryStart: () => void;
+  onNearHistoryStart: () => boolean | Promise<boolean>;
   isLoadingOlderHistory: boolean;
   hasOlderHistory: boolean;
   olderHistoryProgressKey: string | null;

packages/app/src/agent-stream/view.tsx

@@ -41,6 +41,8 @@ import {
 } from "@/components/message";
 import { PlanCard } from "@/components/plan-card";
 import type { StreamItem } from "@/types/stream";
+import type { PendingMessageSubmission } from "@/composer/submission/model";
+import type { TurnPresentation } from "@/timeline/turn-liveness";
 import type { PendingPermission } from "@/types/shared";
 import type {
   AgentCapabilityFlags,
@@ -76,6 +78,7 @@ import {
   type BottomAnchorLocalRequest,
   type BottomAnchorRouteRequest,
 } from "./bottom-anchor-controller";
+import { createAssistantImageOccurrenceKey } from "@/assistant-image/acquisition-cache";
 import {
   AssistantFileLinkResolverProvider,
   normalizeInlinePathTarget,
@@ -239,6 +242,8 @@ export interface AgentStreamViewProps {
   streamItems: StreamItem[];
   streamHead?: StreamItem[];
   pendingPermissions: Map<string, PendingPermission>;
+  pendingMessageSubmissions?: readonly PendingMessageSubmission[];
+  turnPresentation: TurnPresentation;
   routeBottomAnchorRequest?: BottomAnchorRouteRequest | null;
   isAuthoritativeHistoryReady?: boolean;
   toast?: ToastApi | null;
@@ -248,7 +253,7 @@ export interface AgentStreamViewProps {
     hasOlder: boolean;
     isLoadingOlder: boolean;
     progressKey: string | null;
-    onLoadOlder: () => void;
+    onLoadOlder: () => boolean | Promise<boolean>;
   };
 }
 
@@ -265,6 +270,7 @@ const AGENT_CAPABILITY_FLAG_KEYS: (keyof AgentCapabilityFlags)[] = [
 ];
 
 const EMPTY_STREAM_HEAD: StreamItem[] = [];
+const EMPTY_PENDING_MESSAGE_SUBMISSIONS: readonly PendingMessageSubmission[] = [];
 const GROUPED_TOOL_CALL_DETAIL_MAX_HEIGHT = 200;
 
 function buildChatHistoryAttachment(input: {
@@ -327,6 +333,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       streamItems,
       streamHead: providedStreamHead,
       pendingPermissions,
+      pendingMessageSubmissions = EMPTY_PENDING_MESSAGE_SUBMISSIONS,
+      turnPresentation,
       routeBottomAnchorRequest = null,
       isAuthoritativeHistoryReady = true,
       toast,
@@ -341,6 +349,10 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     const autoExpandReasoning = useSettings((settings) => settings.autoExpandReasoning);
     const toolCallDetailLevel = useSettings((settings) => settings.toolCallDetailLevel);
     const viewportRef = useRef<StreamViewportHandle | null>(null);
+    const pendingClientMessageIds = useMemo(
+      () => new Set(pendingMessageSubmissions.map((submission) => submission.clientMessageId)),
+      [pendingMessageSubmissions],
+    );
     const isMobile = useIsCompactFormFactor();
     const streamRenderStrategy = useMemo(
       () =>
@@ -554,6 +566,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     }
     const effectiveStreamItems = isActive ? streamItems : frozenStreamItemsRef.current;
     const effectiveStreamHead = isActive ? streamHead : frozenStreamHeadRef.current;
+    const isTurnActive = turnPresentation.isActive;
     // Keep retained history outside the 48ms live-head flush path.
     const preparedToolCallHistory = useMemo(
       () => prepareToolCallHistory(toolCallDetailLevel, effectiveStreamItems),
@@ -566,12 +579,12 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
           tail: effectiveStreamItems,
           head: effectiveStreamHead ?? EMPTY_STREAM_HEAD,
           preparedHistory: preparedToolCallHistory,
-          isTurnActive: context.status === "running",
+          isTurnActive,
         }),
       [
-        context.status,
         effectiveStreamHead,
         effectiveStreamItems,
+        isTurnActive,
         preparedToolCallHistory,
         toolCallDetailLevel,
       ],
@@ -579,27 +592,34 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
 
     const baseRenderModel = useMemo(() => {
       return buildAgentStreamRenderModel({
-        agentStatus: context.status,
+        isTurnActive,
+        activeTurnStartedAt: turnPresentation.startedAt,
         tail: projectedToolCalls.tail,
         head: projectedToolCalls.head,
         platform: isWeb ? "web" : "native",
         isMobileBreakpoint: isMobile,
       });
-    }, [context.status, isMobile, projectedToolCalls.head, projectedToolCalls.tail]);
+    }, [
+      isMobile,
+      isTurnActive,
+      projectedToolCalls.head,
+      projectedToolCalls.tail,
+      turnPresentation.startedAt,
+    ]);
     const streamLayout = useMemo(
       () =>
         layoutStream({
           strategy: streamRenderStrategy,
-          agentStatus: context.status,
+          isTurnActive,
           history: baseRenderModel.history,
           liveHead: baseRenderModel.segments.liveHead,
           timingByAssistantId: baseRenderModel.turnTiming.byAssistantId,
         }),
       [
-        context.status,
         baseRenderModel.history,
         baseRenderModel.segments.liveHead,
         baseRenderModel.turnTiming.byAssistantId,
+        isTurnActive,
         streamRenderStrategy,
       ],
     );
@@ -656,7 +676,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
           <UserMessage
             serverId={resolvedServerId}
             agentId={agentId}
-            messageId={item.id}
+            messageId={item.messageId}
             message={item.text}
             images={item.images}
             attachments={item.attachments}
@@ -665,10 +685,14 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
             client={client}
             isFirstInGroup={layoutItem.isFirstInUserGroup}
             isLastInGroup={layoutItem.isLastInUserGroup}
+            isPending={
+              item.clientMessageId !== undefined &&
+              pendingClientMessageIds.has(item.clientMessageId)
+            }
           />
         );
       },
-      [context.capabilities, agentId, client, resolvedServerId],
+      [context.capabilities, agentId, client, pendingClientMessageIds, resolvedServerId],
     );
 
     const renderAssistantMessageItem = useCallback(
@@ -682,6 +706,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
             toast={toast}
           >
             <AssistantMessage
+              occurrenceKey={createAssistantImageOccurrenceKey({ agentId, itemId: item.id })}
               message={item.text}
               timestamp={item.timestamp.getTime()}
               workspaceRoot={workspaceRoot}
@@ -692,7 +717,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
           </AssistantFileLinkResolverProvider>
         );
       },
-      [client, handleInlinePathPress, resolvedServerId, toast, workspaceRoot],
+      [agentId, client, handleInlinePathPress, resolvedServerId, toast, workspaceRoot],
     );
 
     const renderThoughtItem = useCallback(
@@ -878,7 +903,6 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       [pendingPermissions, agentId],
     );
 
-    const showRunningTurnFooter = baseRenderModel.turnTiming.isActive;
     const pendingPermissionsNode = useMemo(
       () =>
         renderPendingPermissionsNode({
@@ -889,9 +913,9 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     );
     const turnFooterNode = useMemo(
       () =>
-        showRunningTurnFooter || bottomTurnFooterHost ? (
+        isTurnActive || bottomTurnFooterHost ? (
           <TurnFooter
-            isRunning={showRunningTurnFooter}
+            isRunning={isTurnActive}
             inFlightTurnStartedAt={baseRenderModel.turnTiming.runningStartedAt}
             host={bottomTurnFooterHost}
             strategy={streamRenderStrategy}
@@ -902,7 +926,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       [
         handleForkAssistantTurn,
         readOnly,
-        showRunningTurnFooter,
+        isTurnActive,
         baseRenderModel.turnTiming.runningStartedAt,
         bottomTurnFooterHost,
         streamRenderStrategy,
@@ -1157,6 +1181,10 @@ function agentStreamViewPropsEqual(
   if (left.streamItems !== right.streamItems) reasons.push("streamItems");
   if (left.streamHead !== right.streamHead) reasons.push("streamHead");
   if (left.pendingPermissions !== right.pendingPermissions) reasons.push("pendingPermissions");
+  if (left.pendingMessageSubmissions !== right.pendingMessageSubmissions) {
+    reasons.push("pendingMessageSubmissions");
+  }
+  if (left.turnPresentation !== right.turnPresentation) reasons.push("turnPresentation");
   if (
     !bottomAnchorRouteRequestsEqual(left.routeBottomAnchorRequest, right.routeBottomAnchorRequest)
   ) {

packages/app/src/assistant-image/acquisition-cache.test.ts

@@ -0,0 +1,193 @@
+import { describe, expect, it } from "vitest";
+import {
+  collectRetainedAttachmentIds,
+  retainAttachmentForGarbageCollection,
+} from "@/attachments/gc-retention";
+import {
+  createAssistantImageAcquisitionCache,
+  createAssistantImageFileAcquisitionKey,
+  createAssistantImageFilePreviewAttachmentId,
+  createAssistantImageOccurrenceKey,
+} from "./acquisition-cache";
+
+describe("assistant image acquisition cache", () => {
+  it("evicts a rejected acquisition so the next request can retry", async () => {
+    const cache = createAssistantImageAcquisitionCache<string>({ capacity: 2 });
+    let attempts = 0;
+
+    await expect(
+      cache.acquire("image", async () => {
+        attempts += 1;
+        throw new Error("first attempt failed");
+      }),
+    ).rejects.toThrow("first attempt failed");
+    const recovered = await cache.acquire("image", async () => {
+      attempts += 1;
+      return "recovered";
+    });
+
+    expect({ attempts, recovered, size: cache.size() }).toEqual({
+      attempts: 2,
+      recovered: "recovered",
+      size: 1,
+    });
+  });
+
+  it("bounds successful acquisitions and evicts the least recently used entry", async () => {
+    const cache = createAssistantImageAcquisitionCache<string>({ capacity: 2 });
+    const located: string[] = [];
+    const locate = async (key: string) => {
+      located.push(key);
+      return key;
+    };
+
+    await cache.acquire("a", async () => await locate("a"));
+    await cache.acquire("b", async () => await locate("b"));
+    await cache.acquire("a", async () => await locate("a-again"));
+    await cache.acquire("c", async () => await locate("c"));
+    await cache.acquire("b", async () => await locate("b-again"));
+
+    expect({ located, size: cache.size() }).toEqual({
+      located: ["a", "b", "c", "b-again"],
+      size: 2,
+    });
+  });
+
+  it("reuses an acquired image when the current locator is unavailable", async () => {
+    const cache = createAssistantImageAcquisitionCache<string>({ capacity: 2 });
+    let unavailableCalls = 0;
+
+    await cache.acquire("message:image", async () => "persisted attachment");
+    const cached = await cache.acquire("message:image", async () => {
+      unavailableCalls += 1;
+      throw new Error("daemon disconnected");
+    });
+
+    expect({ cached, unavailableCalls }).toEqual({
+      cached: "persisted attachment",
+      unavailableCalls: 0,
+    });
+    expect(cache.peek("message:image")).toBe("persisted attachment");
+  });
+
+  it("scopes file acquisitions to the rendered message occurrence", () => {
+    const first = createAssistantImageFileAcquisitionKey({
+      serverId: "server",
+      occurrenceKey: "message-1:image-1",
+      cwd: "/workspace",
+      path: "screenshot.png",
+    });
+    const remount = createAssistantImageFileAcquisitionKey({
+      serverId: "server",
+      occurrenceKey: "message-1:image-1",
+      cwd: "/workspace",
+      path: "screenshot.png",
+    });
+    const laterMessage = createAssistantImageFileAcquisitionKey({
+      serverId: "server",
+      occurrenceKey: "message-2:image-1",
+      cwd: "/workspace",
+      path: "screenshot.png",
+    });
+
+    expect(remount).toBe(first);
+    expect(laterMessage).not.toBe(first);
+  });
+
+  it("scopes persisted file previews to the rendered message occurrence", () => {
+    const first = createAssistantImageFilePreviewAttachmentId({
+      serverId: "server-1",
+      occurrenceKey: "message-1:image-1",
+      mimeType: "image/png",
+      path: "/workspace/screenshot.png",
+      size: 512,
+      modifiedAt: "2026-07-27T12:00:00.000Z",
+      contentLength: 512,
+    });
+    const second = createAssistantImageFilePreviewAttachmentId({
+      serverId: "server-1",
+      occurrenceKey: "message-2:image-1",
+      mimeType: "image/png",
+      path: "/workspace/screenshot.png",
+      size: 512,
+      modifiedAt: "2026-07-27T12:00:00.000Z",
+      contentLength: 512,
+    });
+
+    expect(second).not.toBe(first);
+  });
+
+  it("scopes message occurrences to their agent", () => {
+    const first = createAssistantImageOccurrenceKey({ agentId: "agent-1", itemId: "message-1" });
+    const second = createAssistantImageOccurrenceKey({ agentId: "agent-2", itemId: "message-1" });
+
+    expect(second).not.toBe(first);
+  });
+
+  it("retains successful values until their cache entry is evicted", async () => {
+    const retained: string[] = [];
+    const released: string[] = [];
+    const cache = createAssistantImageAcquisitionCache<string>({
+      capacity: 1,
+      onRetain(value) {
+        retained.push(value);
+        return () => released.push(value);
+      },
+    });
+
+    await cache.acquire("first", async () => "attachment-1");
+    expect({ retained, released }).toEqual({ retained: ["attachment-1"], released: [] });
+
+    await cache.acquire("second", async () => "attachment-2");
+    expect({ retained, released }).toEqual({
+      retained: ["attachment-1", "attachment-2"],
+      released: ["attachment-1"],
+    });
+  });
+
+  it("does not evict a value while an active consumer retains it", async () => {
+    const released: string[] = [];
+    const cache = createAssistantImageAcquisitionCache<string>({
+      capacity: 1,
+      onRetain: (value) => () => released.push(value),
+    });
+
+    const first = cache.acquireRetained("first", async () => "attachment-1");
+    await first.promise;
+    const second = cache.acquireRetained("second", async () => "attachment-2");
+    await second.promise;
+
+    expect({ released, size: cache.size() }).toEqual({ released: [], size: 2 });
+
+    first.release();
+    expect({ released, size: cache.size() }).toEqual({
+      released: ["attachment-1"],
+      size: 1,
+    });
+    second.release();
+  });
+
+  it("protects every actively consumed attachment from garbage collection past capacity", async () => {
+    const cache = createAssistantImageAcquisitionCache<{ id: string }>({
+      capacity: 1,
+      onRetain: (attachment) => retainAttachmentForGarbageCollection(attachment.id),
+    });
+
+    const first = cache.acquireRetained("first", async () => ({ id: "mounted-image-1" }));
+    await first.promise;
+    const second = cache.acquireRetained("second", async () => ({ id: "mounted-image-2" }));
+    await second.promise;
+
+    expect(collectRetainedAttachmentIds()).toEqual(new Set(["mounted-image-1", "mounted-image-2"]));
+
+    first.release();
+    expect(collectRetainedAttachmentIds()).toEqual(new Set(["mounted-image-2"]));
+    second.release();
+    await expect(
+      cache.acquire("cleanup", async () => {
+        throw new Error("cleanup");
+      }),
+    ).rejects.toThrow("cleanup");
+    expect(collectRetainedAttachmentIds()).toEqual(new Set());
+  });
+});

packages/app/src/assistant-image/acquisition-cache.ts

@@ -0,0 +1,159 @@
+import { createPreviewAttachmentId } from "@/attachments/utils";
+
+export interface AssistantImageAcquisitionCache<T> {
+  acquire(key: string, locate: () => Promise<T>): Promise<T>;
+  acquireRetained(
+    key: string,
+    locate: () => Promise<T>,
+  ): { promise: Promise<T>; value?: T; release: () => void };
+  peek(key: string): T | undefined;
+  size(): number;
+}
+
+export function createAssistantImageOccurrenceKey(input: {
+  agentId: string;
+  itemId: string;
+}): string {
+  return `${input.agentId}:${input.itemId}`;
+}
+
+export function createAssistantImageFilePreviewAttachmentId(input: {
+  serverId?: string;
+  occurrenceKey: string;
+  mimeType: string;
+  path: string;
+  size: number;
+  modifiedAt?: string | null;
+  contentLength: number;
+}): string {
+  return createPreviewAttachmentId({
+    mimeType: input.mimeType,
+    path: input.path,
+    size: input.size,
+    modifiedAt: input.modifiedAt,
+    contentLength: input.contentLength,
+    contentKey: `${input.serverId ?? "unknown-server"}:${input.occurrenceKey}`,
+  });
+}
+
+export function createAssistantImageFileAcquisitionKey(input: {
+  serverId?: string;
+  occurrenceKey: string;
+  cwd: string;
+  path: string;
+}): string {
+  return `file:${input.serverId ?? "unknown-server"}:${input.occurrenceKey}:${input.cwd}:${input.path}`;
+}
+
+export function createAssistantImageAcquisitionCache<T>(input: {
+  capacity: number;
+  onRetain?: (value: T) => () => void;
+}): AssistantImageAcquisitionCache<T> {
+  if (!Number.isInteger(input.capacity) || input.capacity < 1) {
+    throw new Error("Assistant image acquisition cache capacity must be a positive integer.");
+  }
+  interface CacheEntry {
+    pending: Promise<T>;
+    resolved: boolean;
+    value?: T;
+    release: (() => void) | null;
+    activeConsumers: number;
+  }
+  const entries = new Map<string, CacheEntry>();
+
+  const evict = (key: string, entry: CacheEntry) => {
+    if (entries.get(key) === entry) {
+      entries.delete(key);
+    }
+    entry.release?.();
+    entry.release = null;
+  };
+
+  const enforceCapacity = () => {
+    while (entries.size > input.capacity) {
+      let evicted = false;
+      for (const [key, entry] of entries) {
+        if (entry.activeConsumers > 0) {
+          continue;
+        }
+        evict(key, entry);
+        evicted = true;
+        break;
+      }
+      if (!evicted) {
+        return;
+      }
+    }
+  };
+
+  const acquireEntry = (key: string, locate: () => Promise<T>, retain: boolean): CacheEntry => {
+    const cached = entries.get(key);
+    if (cached) {
+      entries.delete(key);
+      entries.set(key, cached);
+      if (retain) {
+        cached.activeConsumers += 1;
+      }
+      return cached;
+    }
+    const pending = locate();
+    const entry: CacheEntry = {
+      pending,
+      resolved: false,
+      release: null,
+      activeConsumers: retain ? 1 : 0,
+    };
+    entries.set(key, entry);
+    enforceCapacity();
+    void (async () => {
+      try {
+        const value = await pending;
+        const release = input.onRetain?.(value) ?? null;
+        if (entries.get(key) === entry) {
+          entry.value = value;
+          entry.resolved = true;
+          entry.release = release;
+        } else {
+          release?.();
+        }
+      } catch {
+        evict(key, entry);
+      }
+    })();
+    return entry;
+  };
+
+  return {
+    acquire(key, locate) {
+      return acquireEntry(key, locate, false).pending;
+    },
+    acquireRetained(key, locate) {
+      const entry = acquireEntry(key, locate, true);
+      let released = false;
+      return {
+        promise: entry.pending,
+        ...(entry.resolved ? { value: entry.value } : {}),
+        release() {
+          if (released) {
+            return;
+          }
+          released = true;
+          entry.activeConsumers = Math.max(0, entry.activeConsumers - 1);
+          enforceCapacity();
+        },
+      };
+    },
+    peek(key) {
+      const entry = entries.get(key);
+      if (!entry?.resolved) {
+        return undefined;
+      }
+      entries.delete(key);
+      entries.set(key, entry);
+      return entry.value;
+    },
+    size() {
+      return entries.size;
+    },
+  };
+}

packages/app/src/assistant-image/file-acquisition.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import type { AttachmentMetadata } from "@/attachments/types";
+import {
+  createAssistantImageFileAcquisition,
+  type AssistantImageFileAcquisitionPort,
+} from "./file-acquisition";
+
+class MemoryFileAcquisitionPort implements AssistantImageFileAcquisitionPort {
+  readonly reads: Array<{ cwd: string; path: string }> = [];
+
+  async readFile(cwd: string, path: string) {
+    this.reads.push({ cwd, path });
+    return {
+      kind: "image" as const,
+      path,
+      mime: "image/png",
+      size: 4,
+      modifiedAt: "1",
+      bytes: new Uint8Array([1, 2, 3, 4]),
+    };
+  }
+
+  async persist(input: { id: string; mimeType: string; fileName: string | null }) {
+    return {
+      id: input.id,
+      mimeType: input.mimeType,
+      storageType: "web-indexeddb" as const,
+      storageKey: input.id,
+      fileName: input.fileName,
+      byteSize: 4,
+      createdAt: 1,
+    } satisfies AttachmentMetadata;
+  }
+}
+
+describe("assistant image file acquisition", () => {
+  it("recreates the same acquisition with a live port after reconnect", async () => {
+    const common = {
+      resolution: { kind: "file_rpc" as const, cwd: "/workspace", path: "reconnect.png" },
+      serverId: "server",
+      occurrenceKey: "agent:message:reconnect-image",
+      unavailableMessage: "Image unavailable",
+    };
+    const disconnected = createAssistantImageFileAcquisition({ ...common, port: null });
+    const connectedPort = new MemoryFileAcquisitionPort();
+    const connected = createAssistantImageFileAcquisition({ ...common, port: connectedPort });
+
+    expect(disconnected?.key).toBe(connected?.key);
+    await expect(disconnected?.locate()).rejects.toThrow("Image unavailable");
+    await expect(connected?.locate()).resolves.toMatchObject({ mimeType: "image/png" });
+    expect(connectedPort.reads).toEqual([{ cwd: "/workspace", path: "reconnect.png" }]);
+  });
+});

packages/app/src/assistant-image/file-acquisition.ts

@@ -0,0 +1,67 @@
+import type { FileReadResult } from "@getpaseo/client/internal/daemon-client";
+import type { AttachmentMetadata } from "@/attachments/types";
+import { getFileNameFromPath } from "@/attachments/utils";
+import type { AssistantImageSourceResolution } from "@/utils/assistant-image-source";
+import {
+  createAssistantImageFileAcquisitionKey,
+  createAssistantImageFilePreviewAttachmentId,
+} from "./acquisition-cache";
+
+export interface AssistantImageFileAcquisitionPort {
+  readFile(cwd: string, path: string): Promise<FileReadResult>;
+  persist(input: {
+    id: string;
+    bytes: Uint8Array;
+    mimeType: string;
+    fileName: string | null;
+  }): Promise<AttachmentMetadata>;
+}
+
+export interface AssistantImageAcquisition {
+  key: string;
+  locate: () => Promise<AttachmentMetadata>;
+}
+
+export function createAssistantImageFileAcquisition(input: {
+  port: AssistantImageFileAcquisitionPort | null;
+  resolution: AssistantImageSourceResolution | null;
+  serverId?: string;
+  occurrenceKey: string;
+  unavailableMessage: string;
+}): AssistantImageAcquisition | null {
+  if (input.resolution?.kind !== "file_rpc") {
+    return null;
+  }
+  const { port, resolution } = input;
+  return {
+    key: createAssistantImageFileAcquisitionKey({
+      serverId: input.serverId,
+      occurrenceKey: input.occurrenceKey,
+      cwd: resolution.cwd,
+      path: resolution.path,
+    }),
+    locate: async () => {
+      if (!port) {
+        throw new Error(input.unavailableMessage);
+      }
+      const file = await port.readFile(resolution.cwd, resolution.path);
+      if (file.kind !== "image") {
+        throw new Error(input.unavailableMessage);
+      }
+      return await port.persist({
+        id: createAssistantImageFilePreviewAttachmentId({
+          serverId: input.serverId,
+          occurrenceKey: input.occurrenceKey,
+          mimeType: file.mime,
+          path: file.path || resolution.path,
+          size: file.size,
+          modifiedAt: file.modifiedAt,
+          contentLength: file.bytes.byteLength,
+        }),
+        bytes: file.bytes,
+        mimeType: file.mime,
+        fileName: getFileNameFromPath(file.path || resolution.path),
+      });
+    },
+  };
+}

packages/app/src/assistant-image/lifecycle.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vitest";
+import { createAssistantImageLifecycle, transitionAssistantImageLifecycle } from "./lifecycle";
+
+describe("assistant image lifecycle", () => {
+  it("keeps preview URL recreation in the public loading state", () => {
+    const loading = transitionAssistantImageLifecycle(createAssistantImageLifecycle(), {
+      type: "preview_created",
+      uri: "blob:first",
+      aspectRatio: null,
+    });
+    const loaded = transitionAssistantImageLifecycle(loading, {
+      type: "image_loaded",
+      uri: "blob:first",
+      aspectRatio: 1.5,
+    });
+
+    const recreating = transitionAssistantImageLifecycle(loaded, {
+      type: "preview_released",
+    });
+
+    expect(recreating).toEqual({ status: "loading", uri: null, aspectRatio: null });
+  });
+
+  it("publishes loaded only after the recreated URL loads", () => {
+    const recreating = transitionAssistantImageLifecycle(createAssistantImageLifecycle(), {
+      type: "preview_created",
+      uri: "blob:recreated",
+      aspectRatio: 1.5,
+    });
+
+    expect(recreating).toEqual({
+      status: "loading",
+      uri: "blob:recreated",
+      aspectRatio: 1.5,
+    });
+
+    const recreated = transitionAssistantImageLifecycle(recreating, {
+      type: "image_loaded",
+      uri: "blob:recreated",
+      aspectRatio: 0.75,
+    });
+
+    expect(recreated).toEqual({
+      status: "loaded",
+      uri: "blob:recreated",
+      aspectRatio: 0.75,
+    });
+  });
+
+  it("does not reset a loaded image when the same preview is reported again", () => {
+    const loading = transitionAssistantImageLifecycle(createAssistantImageLifecycle(), {
+      type: "preview_created",
+      uri: "blob:current",
+      aspectRatio: null,
+    });
+    const loaded = transitionAssistantImageLifecycle(loading, {
+      type: "image_loaded",
+      uri: "blob:current",
+      aspectRatio: 1.5,
+    });
+
+    const repeated = transitionAssistantImageLifecycle(loaded, {
+      type: "preview_created",
+      uri: "blob:current",
+      aspectRatio: 1.5,
+    });
+
+    expect(repeated).toBe(loaded);
+  });
+
+  it("publishes failed for a terminal image failure on the current URI", () => {
+    const loading = transitionAssistantImageLifecycle(createAssistantImageLifecycle(), {
+      type: "preview_created",
+      uri: "blob:current",
+      aspectRatio: null,
+    });
+    const failed = transitionAssistantImageLifecycle(loading, {
+      type: "failed",
+      uri: "blob:current",
+      message: "Unable to load image preview.",
+    });
+
+    expect(failed).toEqual({
+      status: "failed",
+      message: "Unable to load image preview.",
+    });
+  });
+
+  it("ignores a stale load callback from a replaced URI", () => {
+    const current = transitionAssistantImageLifecycle(createAssistantImageLifecycle(), {
+      type: "preview_created",
+      uri: "blob:current",
+      aspectRatio: 1.25,
+    });
+
+    const afterStaleLoad = transitionAssistantImageLifecycle(current, {
+      type: "image_loaded",
+      uri: "blob:released",
+      aspectRatio: 2,
+    });
+
+    expect(afterStaleLoad).toEqual(current);
+  });
+
+  it("ignores a stale error callback from a replaced URI", () => {
+    const current = transitionAssistantImageLifecycle(createAssistantImageLifecycle(), {
+      type: "preview_created",
+      uri: "blob:current",
+      aspectRatio: null,
+    });
+
+    const afterStaleError = transitionAssistantImageLifecycle(current, {
+      type: "failed",
+      uri: "blob:released",
+      message: "Image unavailable",
+    });
+
+    expect(afterStaleError).toEqual(current);
+  });
+});

packages/app/src/assistant-image/lifecycle.ts

@@ -0,0 +1,46 @@
+export type AssistantImageLifecycle =
+  | { status: "loading"; uri: string | null; aspectRatio: number | null }
+  | { status: "loaded"; uri: string; aspectRatio: number }
+  | { status: "failed"; message: string };
+
+export type AssistantImageLifecycleEvent =
+  | { type: "preview_created"; uri: string; aspectRatio: number | null }
+  | { type: "preview_released" }
+  | { type: "image_loaded"; uri: string; aspectRatio: number }
+  | { type: "failed"; uri: string; message: string };
+
+export function createAssistantImageLifecycle(): AssistantImageLifecycle {
+  return { status: "loading", uri: null, aspectRatio: null };
+}
+
+export function transitionAssistantImageLifecycle(
+  state: AssistantImageLifecycle,
+  event: AssistantImageLifecycleEvent,
+): AssistantImageLifecycle {
+  if (event.type === "image_loaded") {
+    if (state.status !== "loading" || state.uri !== event.uri) {
+      return state;
+    }
+    return {
+      status: "loaded",
+      uri: event.uri,
+      aspectRatio: event.aspectRatio,
+    };
+  }
+  if (event.type === "failed") {
+    if (state.status === "failed" || state.uri !== event.uri) {
+      return state;
+    }
+    return { status: "failed", message: event.message };
+  }
+  if (event.type === "preview_created") {
+    if (state.status === "loaded" && state.uri === event.uri) {
+      return state;
+    }
+    return { status: "loading", uri: event.uri, aspectRatio: event.aspectRatio };
+  }
+  if (event.type === "preview_released") {
+    return { status: "loading", uri: null, aspectRatio: null };
+  }
+  return state;
+}

packages/app/src/assistant-image/load-dimensions.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import {
+  type AssistantImageRenderedDimensionsReader,
+  resolveAssistantImageLoadDimensions,
+} from "./load-dimensions";
+
+class MemoryRenderedDimensionsReader implements AssistantImageRenderedDimensionsReader {
+  constructor(private readonly dimensions: { width: number; height: number } | null) {}
+
+  read(): { width: number; height: number } | null {
+    return this.dimensions;
+  }
+}
+
+describe("assistant image load dimensions", () => {
+  it("prefers native source dimensions", () => {
+    const dimensions = resolveAssistantImageLoadDimensions({
+      source: { width: 640, height: 320 },
+      target: { naturalWidth: 800, naturalHeight: 400 },
+      renderedImage: null,
+      renderedDimensions: new MemoryRenderedDimensionsReader({ width: 900, height: 600 }),
+    });
+
+    expect(dimensions).toEqual({ width: 640, height: 320 });
+  });
+
+  it("uses browser event dimensions when native dimensions are absent", () => {
+    const dimensions = resolveAssistantImageLoadDimensions({
+      source: { width: 0, height: 0 },
+      target: { naturalWidth: 800, naturalHeight: 400 },
+      renderedImage: null,
+      renderedDimensions: new MemoryRenderedDimensionsReader({ width: 900, height: 600 }),
+    });
+
+    expect(dimensions).toEqual({ width: 800, height: 400 });
+  });
+
+  it("falls back to the rendered image adapter", () => {
+    const renderedImage = { id: "rendered-image" };
+    const dimensions = resolveAssistantImageLoadDimensions({
+      target: null,
+      renderedImage,
+      renderedDimensions: new MemoryRenderedDimensionsReader({ width: 900, height: 600 }),
+    });
+
+    expect(dimensions).toEqual({ width: 900, height: 600 });
+  });
+});

packages/app/src/assistant-image/load-dimensions.ts

@@ -0,0 +1,45 @@
+export interface AssistantImageDimensions {
+  width: number;
+  height: number;
+}
+
+interface AssistantImageDimensionCandidate {
+  width?: unknown;
+  height?: unknown;
+}
+
+export interface AssistantImageRenderedDimensionsReader {
+  read(renderedImage: unknown): AssistantImageDimensions | null;
+}
+
+function readPositiveDimensions(
+  candidate: AssistantImageDimensionCandidate | null | undefined,
+): AssistantImageDimensions | null {
+  if (
+    typeof candidate?.width !== "number" ||
+    typeof candidate.height !== "number" ||
+    candidate.width <= 0 ||
+    candidate.height <= 0
+  ) {
+    return null;
+  }
+  return { width: candidate.width, height: candidate.height };
+}
+
+export function resolveAssistantImageLoadDimensions(input: {
+  source?: AssistantImageDimensionCandidate | null;
+  target?: { naturalWidth?: unknown; naturalHeight?: unknown } | null;
+  renderedImage: unknown;
+  renderedDimensions: AssistantImageRenderedDimensionsReader;
+}): AssistantImageDimensions | null {
+  const source = readPositiveDimensions(input.source);
+  if (source) {
+    return source;
+  }
+
+  const target = readPositiveDimensions({
+    width: input.target?.naturalWidth,
+    height: input.target?.naturalHeight,
+  });
+  return target ?? input.renderedDimensions.read(input.renderedImage);
+}

packages/app/src/assistant-image/retry.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import { runAssistantImageOperationWithRetry } from "./retry";
+
+describe("assistant image retry", () => {
+  it("recovers from transient failures while the image remains mounted", async () => {
+    const waits: number[] = [];
+    let attempts = 0;
+
+    const result = await runAssistantImageOperationWithRetry({
+      operation: async () => {
+        attempts += 1;
+        if (attempts < 3) {
+          throw new Error("transient");
+        }
+        return "loaded";
+      },
+      delaysMs: [10, 20, 30],
+      wait: async (delayMs) => {
+        waits.push(delayMs);
+      },
+    });
+
+    expect({ attempts, waits, result }).toEqual({
+      attempts: 3,
+      waits: [10, 20],
+      result: "loaded",
+    });
+  });
+
+  it("stops retrying after the image is released", async () => {
+    let stopped = false;
+    let attempts = 0;
+
+    await expect(
+      runAssistantImageOperationWithRetry({
+        operation: async () => {
+          attempts += 1;
+          throw new Error("transient");
+        },
+        delaysMs: [10, 20],
+        shouldStop: () => stopped,
+        wait: async () => {
+          stopped = true;
+        },
+      }),
+    ).rejects.toThrow("transient");
+    expect(attempts).toBe(1);
+  });
+});

packages/app/src/assistant-image/retry.ts

@@ -0,0 +1,31 @@
+export const ASSISTANT_IMAGE_RETRY_DELAYS_MS = [100, 400, 1_200] as const;
+
+export async function runAssistantImageOperationWithRetry<T>(input: {
+  operation: () => Promise<T>;
+  delaysMs?: readonly number[];
+  shouldStop?: () => boolean;
+  wait?: (delayMs: number) => Promise<void>;
+}): Promise<T> {
+  const delays = input.delaysMs ?? ASSISTANT_IMAGE_RETRY_DELAYS_MS;
+  const shouldStop = input.shouldStop ?? (() => false);
+  const wait =
+    input.wait ??
+    (async (delayMs: number) => {
+      await new Promise<void>((resolve) => setTimeout(resolve, delayMs));
+    });
+
+  for (let attempt = 0; ; attempt += 1) {
+    try {
+      return await input.operation();
+    } catch (error) {
+      const delay = delays[attempt];
+      if (delay === undefined || shouldStop()) {
+        throw error;
+      }
+      await wait(delay);
+      if (shouldStop()) {
+        throw error;
+      }
+    }
+  }
+}

packages/app/src/assistant-image/use-assistant-image.ts

@@ -0,0 +1,544 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from "react";
+import type { ImageLoadEvent } from "react-native";
+import { useTranslation } from "react-i18next";
+import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
+import type { AttachmentMetadata } from "@/attachments/types";
+import { isWeb } from "@/constants/platform";
+import { useStableEvent } from "@/hooks/use-stable-event";
+import { retainAttachmentForGarbageCollection } from "@/attachments/gc-retention";
+import {
+  persistAttachmentFromBytes,
+  persistAttachmentFromDataUrl,
+  releaseAttachmentPreviewUrl,
+  resolveAttachmentPreviewUrl,
+} from "@/attachments/service";
+import { createPreviewAttachmentId, parseImageDataUrl } from "@/attachments/utils";
+import {
+  getAssistantImageMetadata,
+  setAssistantImageMetadata,
+} from "@/utils/assistant-image-metadata";
+import { resolveAssistantImageSource } from "@/utils/assistant-image-source";
+import { createAssistantImageAcquisitionCache } from "./acquisition-cache";
+import {
+  createAssistantImageFileAcquisition,
+  type AssistantImageAcquisition,
+  type AssistantImageFileAcquisitionPort,
+} from "./file-acquisition";
+import {
+  createAssistantImageLifecycle,
+  transitionAssistantImageLifecycle,
+  type AssistantImageLifecycle,
+  type AssistantImageLifecycleEvent,
+} from "./lifecycle";
+import {
+  type AssistantImageRenderedDimensionsReader,
+  resolveAssistantImageLoadDimensions,
+} from "./load-dimensions";
+import { runAssistantImageOperationWithRetry } from "./retry";
+
+interface AssistantImageRenderBinding {
+  uri: string;
+  onRef: (instance: unknown) => void;
+  onLoad: (event: ImageLoadEvent) => void;
+  onError: () => void;
+}
+
+const renderedDimensions: AssistantImageRenderedDimensionsReader = {
+  read(renderedImage) {
+    if (!isWeb || !(renderedImage instanceof HTMLElement)) {
+      return null;
+    }
+    const image = renderedImage.querySelector("img");
+    return image && image.naturalWidth > 0 && image.naturalHeight > 0
+      ? { width: image.naturalWidth, height: image.naturalHeight }
+      : null;
+  },
+};
+
+export type AssistantImageResult =
+  | {
+      status: "loading";
+      binding: AssistantImageRenderBinding | null;
+      aspectRatio: number | null;
+    }
+  | {
+      status: "loaded";
+      binding: AssistantImageRenderBinding;
+      aspectRatio: number;
+    }
+  | { status: "failed"; message: string };
+
+interface UseAssistantImageInput {
+  source: string;
+  occurrenceKey: string;
+  client?: DaemonClient | null;
+  workspaceRoot?: string;
+  serverId?: string;
+}
+
+type PreviewUrlState =
+  | { status: "waiting" }
+  | { status: "loading" }
+  | { status: "loaded"; uri: string }
+  | { status: "failed"; error: unknown };
+
+type AttachmentAcquisitionState =
+  | { status: "waiting" }
+  | { status: "loading" }
+  | { status: "loaded"; attachment: AttachmentMetadata }
+  | { status: "failed"; error: unknown };
+
+interface DataImage {
+  mimeType: string;
+  base64: string;
+  cacheKey: string;
+}
+
+const attachmentAcquisitionCache = createAssistantImageAcquisitionCache<AttachmentMetadata>({
+  capacity: 500,
+  onRetain: (attachment) => retainAttachmentForGarbageCollection(attachment.id),
+});
+
+interface CachedPreviewUrl {
+  attachment: AttachmentMetadata;
+  uri: string;
+}
+
+const previewUrlCache = createAssistantImageAcquisitionCache<CachedPreviewUrl>({
+  capacity: 500,
+  onRetain:
+    ({ attachment, uri }) =>
+    () => {
+      void releaseAttachmentPreviewUrl({ attachment, url: uri });
+    },
+});
+
+const LOADED_IMAGE_CACHE_CAPACITY = 500;
+const loadedImageCache = new Map<string, number>();
+
+function getLoadedImageAspectRatio(uri: string): number | null {
+  const aspectRatio = loadedImageCache.get(uri);
+  if (aspectRatio === undefined) {
+    return null;
+  }
+  loadedImageCache.delete(uri);
+  loadedImageCache.set(uri, aspectRatio);
+  return aspectRatio;
+}
+
+function rememberLoadedImage(uri: string, aspectRatio: number): void {
+  loadedImageCache.delete(uri);
+  loadedImageCache.set(uri, aspectRatio);
+  if (loadedImageCache.size <= LOADED_IMAGE_CACHE_CAPACITY) {
+    return;
+  }
+  const leastRecentlyUsedUri = loadedImageCache.keys().next().value;
+  if (leastRecentlyUsedUri !== undefined) {
+    loadedImageCache.delete(leastRecentlyUsedUri);
+  }
+}
+
+function useAttachmentAcquisition(
+  acquisition: AssistantImageAcquisition | null,
+): AttachmentAcquisitionState {
+  const acquisitionKey = acquisition?.key ?? null;
+  const [entry, setEntry] = useState<{
+    key: string | null;
+    state: AttachmentAcquisitionState;
+  }>(() => {
+    const cached = acquisitionKey ? attachmentAcquisitionCache.peek(acquisitionKey) : undefined;
+    return {
+      key: acquisitionKey,
+      state: cached ? { status: "loaded", attachment: cached } : { status: "waiting" },
+    };
+  });
+
+  useEffect(() => {
+    let disposed = false;
+    let releaseCurrent: (() => void) | null = null;
+    if (!acquisition || !acquisitionKey) {
+      setEntry({ key: null, state: { status: "waiting" } });
+      return;
+    }
+
+    const acquireCurrent = () => {
+      releaseCurrent?.();
+      const retained = attachmentAcquisitionCache.acquireRetained(
+        acquisitionKey,
+        acquisition.locate,
+      );
+      releaseCurrent = retained.release;
+      return retained;
+    };
+    const initial = acquireCurrent();
+    if (initial.value) {
+      setEntry({ key: acquisitionKey, state: { status: "loaded", attachment: initial.value } });
+      return () => {
+        disposed = true;
+        releaseCurrent?.();
+      };
+    }
+
+    setEntry({ key: acquisitionKey, state: { status: "loading" } });
+    void (async () => {
+      let firstAttempt: ReturnType<typeof acquireCurrent> | null = initial;
+      try {
+        const attachment = await runAssistantImageOperationWithRetry({
+          operation: async () => {
+            const retained = firstAttempt ?? acquireCurrent();
+            firstAttempt = null;
+            return await retained.promise;
+          },
+          shouldStop: () => disposed,
+        });
+        if (!disposed) {
+          setEntry({ key: acquisitionKey, state: { status: "loaded", attachment } });
+        }
+      } catch (error) {
+        if (!disposed) {
+          setEntry({ key: acquisitionKey, state: { status: "failed", error } });
+        }
+      }
+    })();
+    return () => {
+      disposed = true;
+      releaseCurrent?.();
+    };
+  }, [acquisition, acquisitionKey]);
+
+  if (!acquisitionKey) {
+    return { status: "waiting" };
+  }
+  const cached = attachmentAcquisitionCache.peek(acquisitionKey);
+  if (cached) {
+    return { status: "loaded", attachment: cached };
+  }
+  return entry.key === acquisitionKey ? entry.state : { status: "waiting" };
+}
+
+function createDataImageAcquisition(input: {
+  source: string;
+  dataImage: DataImage | null;
+}): AssistantImageAcquisition | null {
+  if (!input.dataImage) {
+    return null;
+  }
+  const { dataImage, source } = input;
+  return {
+    key: dataImage.cacheKey,
+    locate: async () =>
+      await persistAttachmentFromDataUrl({
+        id: createPreviewAttachmentId({
+          mimeType: dataImage.mimeType,
+          contentLength: dataImage.base64.length,
+          contentKey: dataImage.cacheKey,
+        }),
+        dataUrl: source,
+        mimeType: dataImage.mimeType,
+      }),
+  };
+}
+
+function usePreviewUrl(attachment: AttachmentMetadata | null | undefined): PreviewUrlState {
+  const id = attachment?.id;
+  const storageType = attachment?.storageType;
+  const storageKey = attachment?.storageKey;
+  const mimeType = attachment?.mimeType;
+  const previewKey =
+    id && storageType && storageKey && mimeType
+      ? `${id}:${storageType}:${storageKey}:${mimeType}`
+      : null;
+  const [entry, setEntry] = useState<{ key: string | null; state: PreviewUrlState }>(() => {
+    return {
+      key: previewKey,
+      state: { status: "waiting" },
+    };
+  });
+  const getCurrentAttachment = useStableEvent(() => attachment ?? null);
+
+  useLayoutEffect(() => {
+    let disposed = false;
+    let releaseCurrent: (() => void) | null = null;
+    const current = getCurrentAttachment();
+
+    if (!current || !previewKey) {
+      setEntry({ key: null, state: { status: "waiting" } });
+      return;
+    }
+
+    const acquireCurrent = () => {
+      releaseCurrent?.();
+      const retained = previewUrlCache.acquireRetained(previewKey, async () => ({
+        attachment: current,
+        uri: await resolveAttachmentPreviewUrl(current),
+      }));
+      releaseCurrent = retained.release;
+      return retained;
+    };
+    const initial = acquireCurrent();
+    if (initial.value) {
+      setEntry({ key: previewKey, state: { status: "loaded", uri: initial.value.uri } });
+      return () => {
+        disposed = true;
+        releaseCurrent?.();
+      };
+    }
+
+    setEntry({ key: previewKey, state: { status: "loading" } });
+    void (async () => {
+      let firstAttempt: ReturnType<typeof acquireCurrent> | null = initial;
+      try {
+        const preview = await runAssistantImageOperationWithRetry({
+          operation: async () => {
+            const retained = firstAttempt ?? acquireCurrent();
+            firstAttempt = null;
+            return await retained.promise;
+          },
+          shouldStop: () => disposed,
+        });
+        if (!disposed) {
+          setEntry({ key: previewKey, state: { status: "loaded", uri: preview.uri } });
+        }
+      } catch (error) {
+        if (!disposed) {
+          setEntry({ key: previewKey, state: { status: "failed", error } });
+        }
+      }
+    })();
+
+    return () => {
+      disposed = true;
+      releaseCurrent?.();
+    };
+  }, [getCurrentAttachment, previewKey]);
+
+  if (!previewKey) {
+    return { status: "waiting" };
+  }
+  return entry.key === previewKey ? entry.state : { status: "waiting" };
+}
+
+function lifecycleReducer(
+  state: AssistantImageLifecycle,
+  event: AssistantImageLifecycleEvent,
+): AssistantImageLifecycle {
+  return transitionAssistantImageLifecycle(state, event);
+}
+
+function errorMessage(error: unknown, fallback: string): string {
+  return error instanceof Error ? error.message : fallback;
+}
+
+function getAcquisitionFailure(input: {
+  hasResolution: boolean;
+  isFileSource: boolean;
+  isDataImage: boolean;
+  fileAttachment: AttachmentAcquisitionState;
+  dataImageAttachment: AttachmentAcquisitionState;
+  preview: PreviewUrlState;
+  hasDirectUri: boolean;
+  fallbackMessage: string;
+}): AssistantImageResult | null {
+  if (!input.hasResolution) {
+    return { status: "failed", message: input.fallbackMessage };
+  }
+  if (input.isFileSource && input.fileAttachment.status === "failed") {
+    return {
+      status: "failed",
+      message: errorMessage(input.fileAttachment.error, input.fallbackMessage),
+    };
+  }
+  if (input.isDataImage && input.dataImageAttachment.status === "failed") {
+    return {
+      status: "failed",
+      message: errorMessage(input.dataImageAttachment.error, input.fallbackMessage),
+    };
+  }
+  if (!input.hasDirectUri && input.preview.status === "failed") {
+    return {
+      status: "failed",
+      message: errorMessage(input.preview.error, input.fallbackMessage),
+    };
+  }
+  return null;
+}
+
+export function useAssistantImage({
+  source,
+  occurrenceKey,
+  client,
+  workspaceRoot,
+  serverId,
+}: UseAssistantImageInput): AssistantImageResult {
+  const { t } = useTranslation();
+  const resolution = useMemo(
+    () => resolveAssistantImageSource({ source, workspaceRoot }),
+    [source, workspaceRoot],
+  );
+  const dataImage = useMemo(() => parseImageDataUrl(source), [source]);
+  const fileAcquisition = useMemo(() => {
+    const port: AssistantImageFileAcquisitionPort | null = client
+      ? {
+          readFile: async (cwd, path) => await client.readFile(cwd, path),
+          persist: persistAttachmentFromBytes,
+        }
+      : null;
+    return createAssistantImageFileAcquisition({
+      port,
+      resolution,
+      serverId,
+      occurrenceKey,
+      unavailableMessage: t("message.attachments.imagePreviewUnavailable"),
+    });
+  }, [client, occurrenceKey, resolution, serverId, t]);
+  const dataImageAcquisition = useMemo(
+    () => createDataImageAcquisition({ source, dataImage }),
+    [dataImage, source],
+  );
+  const fileAttachment = useAttachmentAcquisition(fileAcquisition);
+  const dataImageAttachment = useAttachmentAcquisition(dataImageAcquisition);
+  const filePreview = usePreviewUrl(
+    fileAttachment.status === "loaded" ? fileAttachment.attachment : null,
+  );
+  const dataImagePreview = usePreviewUrl(
+    dataImageAttachment.status === "loaded" ? dataImageAttachment.attachment : null,
+  );
+  const directUri = resolution?.kind === "direct" && !dataImage ? resolution.uri : null;
+  const preview = dataImage ? dataImagePreview : filePreview;
+  const previewUri = preview.status === "loaded" ? preview.uri : null;
+  const uri = directUri ?? previewUri;
+  const cachedMetadata = useMemo(
+    () => getAssistantImageMetadata({ source, workspaceRoot, serverId }),
+    [serverId, source, workspaceRoot],
+  );
+  const [lifecycle, dispatchLifecycle] = useReducer(
+    lifecycleReducer,
+    uri,
+    (initialUri): AssistantImageLifecycle => {
+      if (initialUri) {
+        const aspectRatio = getLoadedImageAspectRatio(initialUri);
+        if (aspectRatio !== null) {
+          return { status: "loaded", uri: initialUri, aspectRatio };
+        }
+      }
+      return createAssistantImageLifecycle();
+    },
+  );
+  const dispatch = useCallback((event: AssistantImageLifecycleEvent) => {
+    if (event.type === "image_loaded") {
+      rememberLoadedImage(event.uri, event.aspectRatio);
+    } else if (event.type === "failed" && event.uri) {
+      loadedImageCache.delete(event.uri);
+    }
+    dispatchLifecycle(event);
+  }, []);
+  const renderedImageRef = useRef<unknown>(null);
+  const handleImageRef = useCallback((instance: unknown) => {
+    renderedImageRef.current = instance;
+  }, []);
+
+  useEffect(() => {
+    if (!uri) {
+      dispatch({ type: "preview_released" });
+      return;
+    }
+
+    dispatch({
+      type: "preview_created",
+      uri,
+      aspectRatio: cachedMetadata?.aspectRatio ?? null,
+    });
+  }, [cachedMetadata, dispatch, uri]);
+
+  const handleImageError = useCallback(() => {
+    if (uri) {
+      dispatch({
+        type: "failed",
+        uri,
+        message: t("message.attachments.imageUnavailable"),
+      });
+    }
+  }, [dispatch, t, uri]);
+  const handleImageLoad = useCallback(
+    (event: ImageLoadEvent) => {
+      if (!uri) {
+        return;
+      }
+      const nativeEvent = event.nativeEvent as ImageLoadEvent["nativeEvent"] & {
+        target?: { naturalWidth?: unknown; naturalHeight?: unknown };
+      };
+      const dimensions = resolveAssistantImageLoadDimensions({
+        source: nativeEvent.source,
+        target: nativeEvent.target,
+        renderedImage: renderedImageRef.current,
+        renderedDimensions,
+      });
+      const metadata = dimensions
+        ? setAssistantImageMetadata({ source, workspaceRoot, serverId }, dimensions)
+        : null;
+      const aspectRatio = metadata?.aspectRatio ?? cachedMetadata?.aspectRatio ?? null;
+      if (!aspectRatio) {
+        dispatch({
+          type: "failed",
+          uri,
+          message: t("message.attachments.imageUnavailable"),
+        });
+        return;
+      }
+      dispatch({ type: "image_loaded", uri, aspectRatio });
+    },
+    [cachedMetadata, dispatch, serverId, source, t, uri, workspaceRoot],
+  );
+
+  const acquisitionFailure = getAcquisitionFailure({
+    hasResolution: resolution !== null,
+    isFileSource: resolution?.kind === "file_rpc",
+    isDataImage: dataImage !== null,
+    fileAttachment,
+    dataImageAttachment,
+    preview,
+    hasDirectUri: directUri !== null,
+    fallbackMessage: t("message.attachments.imagePreviewLoadFailed"),
+  });
+  if (acquisitionFailure) {
+    return acquisitionFailure;
+  }
+  const hasCurrentLifecycleUri = lifecycle.status !== "failed" && lifecycle.uri === uri;
+  let binding: AssistantImageRenderBinding | null = null;
+  if (hasCurrentLifecycleUri && lifecycle.uri) {
+    binding = {
+      uri: lifecycle.uri,
+      onRef: handleImageRef,
+      onLoad: handleImageLoad,
+      onError: handleImageError,
+    };
+  }
+  if (lifecycle.status === "loaded" && lifecycle.uri === uri) {
+    return {
+      status: "loaded",
+      binding: {
+        uri: lifecycle.uri,
+        onRef: handleImageRef,
+        onLoad: handleImageLoad,
+        onError: handleImageError,
+      },
+      aspectRatio: lifecycle.aspectRatio,
+    };
+  }
+  if (lifecycle.status === "failed") {
+    return lifecycle;
+  }
+  return {
+    status: "loading",
+    binding,
+    aspectRatio: hasCurrentLifecycleUri ? lifecycle.aspectRatio : null,
+  };
+}

packages/app/src/attachments/gc-retention.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { collectRetainedAttachmentIds, retainAttachmentForGarbageCollection } from "./gc-retention";
+
+describe("attachment garbage-collection retention", () => {
+  it("keeps an attachment referenced until its final owner releases it", () => {
+    const releaseFirst = retainAttachmentForGarbageCollection("preview-1");
+    const releaseSecond = retainAttachmentForGarbageCollection("preview-1");
+
+    expect(collectRetainedAttachmentIds()).toContain("preview-1");
+    releaseFirst();
+    expect(collectRetainedAttachmentIds()).toContain("preview-1");
+    releaseSecond();
+    expect(collectRetainedAttachmentIds()).not.toContain("preview-1");
+  });
+});

packages/app/src/attachments/gc-retention.ts

@@ -0,0 +1,22 @@
+const retentionCounts = new Map<string, number>();
+
+export function retainAttachmentForGarbageCollection(attachmentId: string): () => void {
+  retentionCounts.set(attachmentId, (retentionCounts.get(attachmentId) ?? 0) + 1);
+  let released = false;
+  return () => {
+    if (released) {
+      return;
+    }
+    released = true;
+    const nextCount = (retentionCounts.get(attachmentId) ?? 1) - 1;
+    if (nextCount <= 0) {
+      retentionCounts.delete(attachmentId);
+      return;
+    }
+    retentionCounts.set(attachmentId, nextCount);
+  };
+}
+
+export function collectRetainedAttachmentIds(): ReadonlySet<string> {
+  return new Set(retentionCounts.keys());
+}

packages/app/src/attachments/service.test.ts

@@ -1,7 +1,11 @@
 import { afterEach, describe, expect, it } from "vitest";
 import type { AttachmentMetadata, AttachmentStore, SaveAttachmentInput } from "@/attachments/types";
 import { __setAttachmentStoreForTests } from "./store";
-import { encodeAttachmentsForSend, persistAttachmentFromBytes } from "./service";
+import {
+  encodeAttachmentsForSend,
+  garbageCollectAttachments,
+  persistAttachmentFromBytes,
+} from "./service";
 
 function createAttachment(input: Partial<AttachmentMetadata> = {}): AttachmentMetadata {
   return {
@@ -94,4 +98,46 @@ describe("attachment service", () => {
       { data: "att_send:base64", mimeType: "image/jpeg" },
     ]);
   });
+
+  it("does not collect an attachment persisted while garbage collection is starting", async () => {
+    let releaseSave: () => void = () => undefined;
+    let reportSaveStarted: () => void = () => undefined;
+    const saveStarted = new Promise<void>((resolve) => {
+      reportSaveStarted = resolve;
+    });
+    const saveGate = new Promise<void>((resolve) => {
+      releaseSave = resolve;
+    });
+    const garbageCollections: string[][] = [];
+    const store: AttachmentStore = {
+      ...createRecordingStore(),
+      async save(input) {
+        reportSaveStarted();
+        await saveGate;
+        return createAttachment({ id: input.id });
+      },
+      async garbageCollect({ referencedIds }) {
+        garbageCollections.push([...referencedIds]);
+      },
+    };
+    __setAttachmentStoreForTests(store);
+
+    const persist = persistAttachmentFromBytes({
+      id: "assistant-preview",
+      bytes: new Uint8Array([1, 2, 3]),
+      mimeType: "image/png",
+    });
+    await saveStarted;
+    const collect = garbageCollectAttachments({ referencedIds: new Set() });
+
+    try {
+      await Promise.resolve();
+      expect(garbageCollections).toEqual([]);
+    } finally {
+      releaseSave();
+      await Promise.all([persist, collect]);
+    }
+
+    expect(garbageCollections).toEqual([["assistant-preview"]]);
+  });
 });

packages/app/src/attachments/service.ts

@@ -1,5 +1,40 @@
-import type { AttachmentMetadata } from "@/attachments/types";
+import { collectRetainedAttachmentIds } from "@/attachments/gc-retention";
 import { getAttachmentStore } from "@/attachments/store";
+import type { AttachmentMetadata, SaveAttachmentInput } from "@/attachments/types";
+
+const activePersistence = new Set<Promise<AttachmentMetadata>>();
+const persistedDuringGarbageCollection = new Set<string>();
+let pendingGarbageCollections = 0;
+let garbageCollectionTail: Promise<void> = Promise.resolve();
+let persistenceBarrier: Promise<void> | null = null;
+let releasePersistenceBarrier: (() => void) | null = null;
+
+async function waitForPersistenceBarrier(): Promise<void> {
+  const barrier = persistenceBarrier;
+  if (!barrier) {
+    return;
+  }
+  await barrier;
+  await waitForPersistenceBarrier();
+}
+
+async function persistAttachment(input: SaveAttachmentInput): Promise<AttachmentMetadata> {
+  await waitForPersistenceBarrier();
+  const pending = (async () => {
+    const store = await getAttachmentStore();
+    const attachment = await store.save(input);
+    if (pendingGarbageCollections > 0) {
+      persistedDuringGarbageCollection.add(attachment.id);
+    }
+    return attachment;
+  })();
+  activePersistence.add(pending);
+  try {
+    return await pending;
+  } finally {
+    activePersistence.delete(pending);
+  }
+}
 
 export async function persistAttachmentFromBlob(input: {
   blob: Blob;
@@ -7,8 +42,7 @@ export async function persistAttachmentFromBlob(input: {
   fileName?: string | null;
   id?: string;
 }): Promise<AttachmentMetadata> {
-  const store = await getAttachmentStore();
-  return await store.save({
+  return await persistAttachment({
     id: input.id,
     mimeType: input.mimeType,
     fileName: input.fileName,
@@ -22,8 +56,7 @@ export async function persistAttachmentFromDataUrl(input: {
   fileName?: string | null;
   id?: string;
 }): Promise<AttachmentMetadata> {
-  const store = await getAttachmentStore();
-  return await store.save({
+  return await persistAttachment({
     id: input.id,
     mimeType: input.mimeType,
     fileName: input.fileName,
@@ -37,8 +70,7 @@ export async function persistAttachmentFromBytes(input: {
   fileName?: string | null;
   id?: string;
 }): Promise<AttachmentMetadata> {
-  const store = await getAttachmentStore();
-  return await store.save({
+  return await persistAttachment({
     id: input.id,
     mimeType: input.mimeType,
     fileName: input.fileName,
@@ -52,8 +84,7 @@ export async function persistAttachmentFromFileUri(input: {
   fileName?: string | null;
   id?: string;
 }): Promise<AttachmentMetadata> {
-  const store = await getAttachmentStore();
-  return await store.save({
+  return await persistAttachment({
     id: input.id,
     mimeType: input.mimeType,
     fileName: input.fileName,
@@ -133,6 +164,41 @@ export async function deleteAttachments(
 export async function garbageCollectAttachments(input: {
   referencedIds: ReadonlySet<string>;
 }): Promise<void> {
+  pendingGarbageCollections += 1;
+  if (!persistenceBarrier) {
+    persistenceBarrier = new Promise<void>((resolve) => {
+      releasePersistenceBarrier = resolve;
+    });
+  }
+
+  const previousGarbageCollection = garbageCollectionTail;
+  const currentGarbageCollection = (async () => {
+    await previousGarbageCollection;
+    while (activePersistence.size > 0) {
+      await Promise.allSettled(activePersistence);
+    }
+    const referencedIds = new Set(input.referencedIds);
+    for (const id of collectRetainedAttachmentIds()) {
+      referencedIds.add(id);
+    }
+    for (const id of persistedDuringGarbageCollection) {
+      referencedIds.add(id);
+    }
     const store = await getAttachmentStore();
-  await store.garbageCollect({ referencedIds: input.referencedIds });
+    await store.garbageCollect({ referencedIds });
+  })();
+  garbageCollectionTail = currentGarbageCollection.catch(() => undefined);
+
+  try {
+    await currentGarbageCollection;
+  } finally {
+    pendingGarbageCollections -= 1;
+    if (pendingGarbageCollections === 0) {
+      persistedDuringGarbageCollection.clear();
+      const release = releasePersistenceBarrier;
+      releasePersistenceBarrier = null;
+      persistenceBarrier = null;
+      release?.();
+    }
+  }
 }

packages/app/src/attachments/utils.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
   createImageSourceCacheKey,
+  createPreviewAttachmentId,
   fileUriToPath,
   localFileSourceToPath,
   parseDataUrl,
@@ -86,4 +87,29 @@ describe("parseImageDataUrl", () => {
   it("ignores SVG data URLs", () => {
     expect(parseImageDataUrl("data:image/svg+xml;base64,PHN2ZyAvPg==")).toBeNull();
   });
+
+  it("distinguishes image data that differs only in the middle", () => {
+    const prefix = "a".repeat(64);
+    const suffix = "z".repeat(64);
+    const first = `data:image/png;base64,${prefix}${"b".repeat(256)}${suffix}`;
+    const second = `data:image/png;base64,${prefix}${"c".repeat(256)}${suffix}`;
+
+    expect(createImageSourceCacheKey(first)).not.toBe(createImageSourceCacheKey(second));
+  });
+
+  it("gives equal-length preview content distinct attachment identities", () => {
+    expect(
+      createPreviewAttachmentId({
+        mimeType: "image/png",
+        contentLength: 512,
+        contentKey: "first-content",
+      }),
+    ).not.toBe(
+      createPreviewAttachmentId({
+        mimeType: "image/png",
+        contentLength: 512,
+        contentKey: "second-content",
+      }),
+    );
+  });
 });

packages/app/src/attachments/utils.ts

@@ -56,7 +56,7 @@ export function parseImageDataUrl(
     if (!isRasterImageMimeType(parsed.mimeType)) {
       return null;
     }
-    const fingerprint = `${parsed.mimeType}\0${parsed.base64.length}\0${parsed.base64.slice(0, 64)}\0${parsed.base64.slice(-64)}`;
+    const fingerprint = `${parsed.mimeType}\0${parsed.base64}`;
     return {
       ...parsed,
       cacheKey: `data-image:${parsed.mimeType}:${parsed.base64.length}:${hashString(fingerprint)}`,
@@ -87,12 +87,15 @@ export function createPreviewAttachmentId(input: {
   size?: number | null;
   modifiedAt?: string | null;
   contentLength?: number | null;
+  contentKey?: string | null;
 }): string {
   const path = input.path?.trim() ?? "";
   const size = Number.isFinite(input.size) ? String(input.size) : "";
   const modifiedAt = input.modifiedAt?.trim() ?? "";
   const contentLength = Number.isFinite(input.contentLength) ? String(input.contentLength) : "";
-  const hash = hashString(`${input.mimeType}\0${path}\0${size}\0${modifiedAt}\0${contentLength}`);
+  const contentKey = input.contentKey?.trim() ?? "";
+  const identity = `${input.mimeType}\0${path}\0${size}\0${modifiedAt}\0${contentLength}`;
+  const hash = hashString(contentKey ? `${identity}\0${contentKey}` : identity);
   return `preview_${size || contentLength || "unknown"}_${hash}`;
 }
 

packages/app/src/client-slash-commands/index.test.ts

@@ -53,6 +53,7 @@ function createAgent(overrides: Partial<Agent> = {}): Agent {
     parentAgentId: null,
     labels: {},
     ...overrides,
+    activeTurn: overrides.activeTurn ?? null,
   };
 }
 

packages/app/src/components/message.tsx

@@ -29,7 +29,6 @@ import {
 } from "react";
 import type { ComponentType, ReactNode } from "react";
 import { MarkdownIt, type ASTNode, type RenderRules } from "react-native-markdown-display";
-import { useQuery } from "@tanstack/react-query";
 import MaskedView from "@react-native-masked-view/masked-view";
 import {
   Circle,
@@ -75,19 +74,7 @@ import { splitMarkdownBlocks } from "@/utils/split-markdown-blocks";
 import { formatDuration, formatMessageTimestamp } from "@/utils/time";
 import { writeMarkdownToRichClipboard } from "@/utils/rich-clipboard";
 import { getDefaultMarkdownClipboardEnvironment } from "@/utils/rich-clipboard-default-environment";
-import {
-  getAssistantImageLoadStateFromMetadata,
-  getAssistantImageMetadata,
-  setAssistantImageMetadata,
-  type AssistantImageLoadState,
-} from "@/utils/assistant-image-metadata";
 import { setAssistantMarkdownBlockHeight } from "@/utils/assistant-message-height-estimate";
-import { resolveAssistantImageSource } from "@/utils/assistant-image-source";
-import {
-  createPreviewAttachmentId,
-  getFileNameFromPath,
-  parseImageDataUrl,
-} from "@/attachments/utils";
 import { getAgentAttachmentPillContent } from "@/attachments/attachment-pill-content";
 import { PlanCard } from "./plan-card";
 import { useToolCallSheet } from "./tool-call-sheet";
@@ -102,8 +89,7 @@ import {
   useAssistantLinkPress,
 } from "@/assistant-file-links";
 import { getCompactionMarkerLabel } from "./message-compaction-label";
-import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
-import { persistAttachmentFromBytes, persistAttachmentFromDataUrl } from "@/attachments/service";
+import { useAssistantImage } from "@/assistant-image/use-assistant-image";
 import {
   AttachmentFrame,
   AttachmentLabel,
@@ -132,6 +118,7 @@ interface UserMessageProps {
   client?: DaemonClient | null;
   isFirstInGroup?: boolean;
   isLastInGroup?: boolean;
+  isPending?: boolean;
   disableOuterSpacing?: boolean;
 }
 
@@ -430,6 +417,7 @@ export const UserMessage = memo(function UserMessage({
   client,
   isFirstInGroup = true,
   isLastInGroup = true,
+  isPending = false,
   disableOuterSpacing,
 }: UserMessageProps) {
   const isCompact = useIsCompactFormFactor();
@@ -441,7 +429,7 @@ export const UserMessage = memo(function UserMessage({
   const hasText = message.trim().length > 0;
   const hasImages = images.length > 0;
   const hasAttachments = attachments.length > 0;
-  const showTrailingRow = hasText && (isCompact || isNative || isHovered);
+  const showTrailingRow = !isPending && hasText && (isCompact || isNative || isHovered);
   const formattedTimestamp = useMemo(
     () => formatMessageTimestamp(new Date(timestamp)),
     [timestamp],
@@ -494,7 +482,7 @@ export const UserMessage = memo(function UserMessage({
   );
 
   return (
-    <View style={containerStyle} testID="user-message">
+    <View style={containerStyle} testID="user-message" aria-busy={isPending}>
       <View
         style={userMessageStylesheet.content}
         onPointerEnter={handlePointerEnter}
@@ -538,9 +526,15 @@ export const UserMessage = memo(function UserMessage({
           ) : null}
         </View>
         {hasText ? (
-          <View style={trailingRowStyle} pointerEvents={showTrailingRow ? "auto" : "none"}>
-            <Text style={userMessageStylesheet.timestampText}>{formattedTimestamp}</Text>
-            {capabilities ? (
+          <View
+            style={trailingRowStyle}
+            pointerEvents={showTrailingRow ? "auto" : "none"}
+            testID="user-message-trailing-row"
+          >
+            <Text style={userMessageStylesheet.timestampText} testID="user-message-timestamp">
+              {formattedTimestamp}
+            </Text>
+            {capabilities && messageId ? (
               <RewindMenu
                 capabilities={capabilities}
                 isPending={rewindMutation.isPending}
@@ -729,6 +723,7 @@ export const LiveElapsed = memo(function LiveElapsed({
 });
 
 interface AssistantMessageProps {
+  occurrenceKey: string;
   message: string;
   timestamp: number;
   workspaceRoot?: string;
@@ -756,11 +751,21 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
   imageSurface: {
     width: "100%",
     overflow: "hidden",
+    position: "relative",
   },
   image: {
     width: "100%",
     height: "100%",
   },
+  imageLoadingOverlay: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   imageState: {
     alignItems: "center",
     justifyContent: "center",
@@ -777,125 +782,9 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
 
 const ASSISTANT_IMAGE_MIN_HEIGHT = 160;
 
-const AssistantMarkdownResolvedImage = memo(function AssistantMarkdownResolvedImage({
-  uri,
-  alt,
-  containerStyle,
-  source,
-  workspaceRoot,
-  serverId,
-}: {
-  uri: string;
-  alt?: string;
-  containerStyle?: StyleProp<ViewStyle>;
-  source: string;
-  workspaceRoot?: string;
-  serverId?: string;
-}) {
-  const cachedMetadata = useMemo(
-    () => getAssistantImageMetadata({ source, workspaceRoot, serverId }),
-    [serverId, source, workspaceRoot],
-  );
-  const [loadState, setLoadState] = useState<AssistantImageLoadState>(() =>
-    getAssistantImageLoadStateFromMetadata(cachedMetadata),
-  );
-
-  useEffect(() => {
-    if (cachedMetadata) {
-      setLoadState(getAssistantImageLoadStateFromMetadata(cachedMetadata));
-      return () => {};
-    }
-
-    setLoadState({ status: "loading" });
-    let cancelled = false;
-
-    Image.getSize(
-      uri,
-      (width, height) => {
-        if (cancelled) {
-          return;
-        }
-        if (width > 0 && height > 0) {
-          const metadata = setAssistantImageMetadata(
-            { source, workspaceRoot, serverId },
-            { width, height },
-          );
-          setLoadState({
-            status: "ready",
-            aspectRatio: metadata?.aspectRatio ?? width / height,
-          });
-        }
-      },
-      () => {
-        if (cancelled) {
-          return;
-        }
-        setLoadState({ status: "error" });
-      },
-    );
-
-    return () => {
-      cancelled = true;
-    };
-  }, [cachedMetadata, serverId, source, uri, workspaceRoot]);
-
-  const handleImageError = useCallback(() => {
-    setLoadState({ status: "error" });
-  }, []);
-  const { t } = useTranslation();
-  const surfaceStyle = useMemo<StyleProp<ViewStyle>>(
-    () => [
-      assistantMessageStylesheet.imageSurface,
-      loadState.status === "ready"
-        ? { aspectRatio: loadState.aspectRatio }
-        : { height: ASSISTANT_IMAGE_MIN_HEIGHT },
-    ],
-    [loadState],
-  );
-  const frameStyle = useMemo<StyleProp<ViewStyle>>(
-    () => [assistantMessageStylesheet.imageFrame, containerStyle],
-    [containerStyle],
-  );
-  const stateSurfaceStyle = useMemo<StyleProp<ViewStyle>>(
-    () => [surfaceStyle, assistantMessageStylesheet.imageState],
-    [surfaceStyle],
-  );
-  const imageSource = useMemo(() => ({ uri }), [uri]);
-
-  if (loadState.status !== "ready") {
-    return (
-      <View style={frameStyle}>
-        <View style={stateSurfaceStyle}>
-          {loadState.status === "loading" ? (
-            <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
-          ) : null}
-          {loadState.status === "error" ? (
-            <Text style={assistantMessageStylesheet.imageErrorText}>
-              {t("message.attachments.imageUnavailable")}
-            </Text>
-          ) : null}
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <View style={frameStyle}>
-      <View style={surfaceStyle}>
-        <Image
-          source={imageSource}
-          style={assistantMessageStylesheet.image}
-          resizeMode="contain"
-          accessibilityLabel={alt}
-          onError={handleImageError}
-        />
-      </View>
-    </View>
-  );
-});
-
 function AssistantMarkdownImage({
   source,
+  occurrenceKey,
   alt,
   hasLeadingContent,
   client,
@@ -903,18 +792,13 @@ function AssistantMarkdownImage({
   serverId,
 }: {
   source: string;
+  occurrenceKey: string;
   alt?: string;
   hasLeadingContent: boolean;
   client?: DaemonClient | null;
   workspaceRoot?: string;
   serverId?: string;
 }) {
-  const { t } = useTranslation();
-  const resolution = useMemo(
-    () => resolveAssistantImageSource({ source, workspaceRoot }),
-    [source, workspaceRoot],
-  );
-  const dataImage = useMemo(() => parseImageDataUrl(source), [source]);
   const containerStyle = useMemo<StyleProp<ViewStyle>>(
     () => ({
       marginTop: hasLeadingContent ? 16 : 0,
@@ -922,64 +806,31 @@ function AssistantMarkdownImage({
     }),
     [hasLeadingContent],
   );
-
-  const query = useQuery({
-    queryKey: [
-      "assistantMarkdownImage",
-      serverId ?? "unknown-server",
-      resolution?.kind === "file_rpc" ? resolution.cwd : null,
-      resolution?.kind === "file_rpc" ? resolution.path : null,
-    ],
-    enabled: Boolean(client && resolution?.kind === "file_rpc"),
-    staleTime: 30_000,
-    queryFn: async () => {
-      if (!client || !resolution || resolution.kind !== "file_rpc") {
-        return null;
+  const image = useAssistantImage({
+    source,
+    occurrenceKey,
+    client,
+    workspaceRoot,
+    serverId,
+  });
+  const binding = image.status === "failed" ? null : image.binding;
+  const aspectRatio = image.status === "failed" ? null : image.aspectRatio;
+  const imageUri = binding?.uri ?? "";
+  const imageSource = useMemo(() => ({ uri: imageUri }), [imageUri]);
+  const frameStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [assistantMessageStylesheet.imageFrame, containerStyle],
+    [containerStyle],
+  );
+  const imageSizeStyle = useMemo<ViewStyle>(() => {
+    if (aspectRatio) {
+      return { aspectRatio };
     }
-
-      const file = await client.readFile(resolution.cwd, resolution.path);
-      if (file.kind !== "image") {
-        throw new Error(t("message.attachments.imagePreviewUnavailable"));
-      }
-
-      return await persistAttachmentFromBytes({
-        id: createPreviewAttachmentId({
-          mimeType: file.mime,
-          path: file.path || resolution.path,
-          size: file.size,
-          modifiedAt: file.modifiedAt,
-          contentLength: file.bytes.byteLength,
-        }),
-        bytes: file.bytes,
-        mimeType: file.mime,
-        fileName: getFileNameFromPath(file.path || resolution.path),
-      });
-    },
-  });
-  const dataImageQuery = useQuery({
-    queryKey: ["assistantMarkdownDataImage", dataImage?.cacheKey ?? null],
-    enabled: dataImage !== null,
-    staleTime: 30_000,
-    queryFn: async () => {
-      if (!dataImage) {
-        return null;
-      }
-
-      return await persistAttachmentFromDataUrl({
-        id: createPreviewAttachmentId({
-          mimeType: dataImage.mimeType,
-          contentLength: dataImage.base64.length,
-        }),
-        dataUrl: source,
-        mimeType: dataImage.mimeType,
-      });
-    },
-  });
-
-  const fileAssetUri = useAttachmentPreviewUrl(query.data);
-  const dataImageAssetUri = useAttachmentPreviewUrl(dataImageQuery.data);
-  const directUri = resolution?.kind === "direct" && !dataImage ? resolution.uri : null;
-  const resolvedUri = directUri ?? dataImageAssetUri ?? fileAssetUri ?? null;
+    return { height: ASSISTANT_IMAGE_MIN_HEIGHT };
+  }, [aspectRatio]);
+  const surfaceStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [assistantMessageStylesheet.imageSurface, imageSizeStyle],
+    [imageSizeStyle],
+  );
 
   const stateFrameStyle = useMemo<StyleProp<ViewStyle>>(
     () => [
@@ -991,20 +842,15 @@ function AssistantMarkdownImage({
     [containerStyle],
   );
 
-  if (resolvedUri) {
+  if (image.status === "failed") {
     return (
-      <AssistantMarkdownResolvedImage
-        uri={resolvedUri}
-        alt={alt}
-        containerStyle={containerStyle}
-        source={source}
-        workspaceRoot={workspaceRoot}
-        serverId={serverId}
-      />
+      <View style={stateFrameStyle}>
+        <Text style={assistantMessageStylesheet.imageErrorText}>{image.message}</Text>
+      </View>
     );
   }
 
-  if (query.isLoading || dataImageQuery.isLoading) {
+  if (!binding) {
     return (
       <View style={stateFrameStyle}>
         <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
@@ -1012,29 +858,27 @@ function AssistantMarkdownImage({
     );
   }
 
-  const errorText = resolveAssistantImageErrorText(
-    query.error,
-    dataImageQuery.error,
-    t("message.attachments.imagePreviewLoadFailed"),
-  );
-
   return (
-    <View style={stateFrameStyle}>
-      <Text style={assistantMessageStylesheet.imageErrorText}>{errorText}</Text>
+    <View style={frameStyle}>
+      <View style={surfaceStyle} accessibilityRole="image" accessibilityLabel={alt}>
+        <Image
+          ref={binding.onRef}
+          source={imageSource}
+          style={assistantMessageStylesheet.image}
+          resizeMode="contain"
+          onLoad={binding.onLoad}
+          onError={binding.onError}
+        />
+        {image.status === "loading" ? (
+          <View pointerEvents="none" style={assistantMessageStylesheet.imageLoadingOverlay}>
+            <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+          </View>
+        ) : null}
+      </View>
     </View>
   );
 }
 
-function resolveAssistantImageErrorText(
-  fileError: unknown,
-  dataError: unknown,
-  fallbackText: string,
-): string {
-  if (fileError instanceof Error) return fileError.message;
-  if (dataError instanceof Error) return dataError.message;
-  return fallbackText;
-}
-
 function getInlineCodeAutoLinkUrl(
   markdownParser: ReturnType<typeof MarkdownIt>,
   content: string,
@@ -1575,6 +1419,7 @@ function MarkdownListView({ baseStyle, spacing, children }: MarkdownListViewProp
 }
 
 export const AssistantMessage = memo(function AssistantMessage({
+  occurrenceKey,
   message,
   timestamp: _timestamp,
   workspaceRoot,
@@ -1909,6 +1754,7 @@ export const AssistantMessage = memo(function AssistantMessage({
           <AssistantMarkdownImage
             key={node.key}
             source={String(node.attributes?.src ?? "")}
+            occurrenceKey={`${occurrenceKey}:${node.key}`}
             alt={typeof node.attributes?.alt === "string" ? node.attributes.alt : undefined}
             hasLeadingContent={hasLeadingContent}
             client={client}
@@ -1918,7 +1764,7 @@ export const AssistantMessage = memo(function AssistantMessage({
         );
       },
     };
-  }, [client, fileLinkActions, markdownParser, serverId, workspaceRoot]);
+  }, [client, fileLinkActions, markdownParser, occurrenceKey, serverId, workspaceRoot]);
 
   const blocks = useMemo(() => splitMarkdownBlocks(message), [message]);
   const keyedBlocks = useMemo(

packages/app/src/components/rewind/use-rewind-agent-mutation.ts

@@ -7,7 +7,6 @@ import type { RewindMode } from "./use-rewind-capabilities";
 import { useRewindComposerRestore } from "./composer-restore";
 import { useSessionStore } from "@/stores/session-store";
 import { shouldRestoreComposerForRewindMode } from "./rewind-mode";
-import { clearOptimisticUserMessages } from "@/types/stream";
 import { getHostRuntimeStore } from "@/runtime/host-runtime";
 
 interface UseRewindAgentMutationInput {
@@ -36,13 +35,6 @@ export function useRewindAgentMutation(input: UseRewindAgentMutationInput): {
       }
       await input.client.rewindAgent(input.agentId, input.messageId, mode);
       if (mode !== "files") {
-        if (input.serverId) {
-          const session = useSessionStore.getState().sessions[input.serverId];
-          useSessionStore.getState().setAgentStreamState(input.serverId, input.agentId, {
-            tail: clearOptimisticUserMessages(session?.agentStreamTail.get(input.agentId) ?? []),
-            head: clearOptimisticUserMessages(session?.agentStreamHead.get(input.agentId) ?? []),
-          });
-        }
         const cursor = input.serverId
           ? useSessionStore
               .getState()

packages/app/src/components/ui/loading-spinner.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { ActivityIndicator, type ActivityIndicatorProps } from "react-native";
 
 interface LoadingSpinnerProps {

packages/app/src/composer/actions.test.ts

@@ -6,7 +6,17 @@ import type {
   UserComposerAttachment,
   WorkspaceComposerAttachment,
 } from "@/attachments/types";
-import type { StreamItem } from "@/types/stream";
+import {
+  appendSubmittedUserMessage,
+  removeSubmittedUserMessage,
+  type StreamItem,
+} from "@/types/stream";
+import {
+  acceptMessageSubmission,
+  beginMessageSubmission,
+  rejectMessageSubmission,
+  type MessageSubmissionRecord,
+} from "@/composer/submission/model";
 import {
   cancelComposerAgent,
   dispatchComposerAgentMessage,
@@ -20,7 +30,7 @@ import {
   sendQueuedComposerMessageNow,
   toggleGithubAttachment,
   toggleGithubAttachmentFromPicker,
-  type AgentStreamWriter,
+  type MessageSubmissionWriter,
   type AttachmentPersister,
   type ComposerCancelClient,
   type ComposerSendClient,
@@ -168,14 +178,16 @@ interface FakeSendCall {
 }
 
 function createFakeSendClient(
-  options: { rejection?: Error } = {},
+  options: { rejection?: Error; beforeRejection?: (call: FakeSendCall) => void } = {},
 ): ComposerSendClient & { calls: FakeSendCall[] } {
   const calls: FakeSendCall[] = [];
   return {
     calls,
     sendAgentMessage: async (agentId, text, opts) => {
-      calls.push({ agentId, text, options: opts });
+      const call = { agentId, text, options: opts };
+      calls.push(call);
       if (options.rejection) {
+        options.beforeRejection?.(call);
         throw options.rejection;
       }
     },
@@ -183,7 +195,7 @@ function createFakeSendClient(
   };
 }
 
-interface FakeStream extends AgentStreamWriter {
+interface FakeStream extends MessageSubmissionWriter {
   head: Map<string, StreamItem[]>;
   tail: Map<string, StreamItem[]>;
 }
@@ -192,18 +204,69 @@ function createFakeStream(initialHead: Map<string, StreamItem[]> = new Map()): F
   const fake: FakeStream = {
     head: new Map(initialHead),
     tail: new Map(),
-    getTail: (agentId) => fake.tail.get(agentId),
-    getHead: (agentId) => fake.head.get(agentId),
-    setHead: (updater) => {
-      fake.head = updater(fake.head);
+    begin: (agentId, message) => {
+      const current = readSubmission(fake, agentId);
+      const stream = appendSubmittedUserMessage({
+        tail: current.tail,
+        head: current.head,
+        message,
+      });
+      writeSubmission(fake, agentId, {
+        ...stream,
+        submissions: beginMessageSubmission(current.submissions, {
+          clientMessageId: message.clientMessageId!,
+        }),
+      });
     },
-    setTail: (updater) => {
-      fake.tail = updater(fake.tail);
+    accept: (agentId, clientMessageId) => {
+      const current = readSubmission(fake, agentId);
+      writeSubmission(fake, agentId, {
+        ...current,
+        submissions: acceptMessageSubmission(current.submissions, clientMessageId),
+      });
+    },
+    reject: (agentId, clientMessageId) => {
+      const current = readSubmission(fake, agentId);
+      const result = rejectMessageSubmission(current.submissions, clientMessageId);
+      const stream =
+        result.outcome === "rejected"
+          ? removeSubmittedUserMessage({
+              tail: current.tail,
+              head: current.head,
+              clientMessageId,
+            })
+          : current;
+      writeSubmission(fake, agentId, { ...stream, submissions: result.submissions });
+      return result.outcome;
     },
   };
   return fake;
 }
 
+const submissionsByFakeStream = new WeakMap<FakeStream, Map<string, MessageSubmissionRecord[]>>();
+
+interface FakeSubmissionState {
+  tail: StreamItem[];
+  head: StreamItem[];
+  submissions: MessageSubmissionRecord[];
+}
+
+function readSubmission(fake: FakeStream, agentId: string): FakeSubmissionState {
+  return {
+    tail: fake.tail.get(agentId) ?? [],
+    head: fake.head.get(agentId) ?? [],
+    submissions: submissionsByFakeStream.get(fake)?.get(agentId) ?? [],
+  };
+}
+
+function writeSubmission(fake: FakeStream, agentId: string, state: FakeSubmissionState): void {
+  fake.tail = new Map(fake.tail).set(agentId, state.tail);
+  fake.head = new Map(fake.head).set(agentId, state.head);
+  const submissions = submissionsByFakeStream.get(fake) ?? new Map();
+  submissions.set(agentId, state.submissions);
+  submissionsByFakeStream.set(fake, submissions);
+}
+
 function createFakeQueue(
   initial: Map<string, QueuedComposerMessage[]> = new Map(),
 ): QueueWriter & { state: Map<string, QueuedComposerMessage[]> } {
@@ -227,7 +290,6 @@ describe("cancelComposerAgent", () => {
     isAgentRunning: boolean;
     isCancellingAgent: boolean;
     isConnected: boolean;
-    onCancelFailed: (error: unknown) => void;
   } {
     const canceledIds: string[] = [];
     return {
@@ -241,53 +303,45 @@ describe("cancelComposerAgent", () => {
       isAgentRunning: true,
       isCancellingAgent: false,
       isConnected: true,
-      onCancelFailed: () => undefined,
     };
   }
 
-  it("issues a cancel and reports true when the agent is running, connected, and not already canceling", () => {
+  it("returns the cancel request when the agent is running, connected, and not already canceling", async () => {
     const input = baseInput();
     const result = cancelComposerAgent(input);
-    expect(result).toBe(true);
+    expect(result).not.toBeNull();
+    await result;
     expect(input.client.canceledIds).toEqual(["agent"]);
   });
 
-  it("reports a rejected cancel so the composer can leave its canceling state", async () => {
+  it("returns a rejected cancel request to the composer", async () => {
     const cancellationError = new Error("Provider rejected the interrupt");
-    const failures: unknown[] = [];
     const input = baseInput();
     input.client.cancelAgent = async () => {
       throw cancellationError;
     };
 
-    const result = cancelComposerAgent({
-      ...input,
-      onCancelFailed: (error: unknown) => failures.push(error),
-    });
-    await new Promise((resolve) => setTimeout(resolve, 0));
-
-    expect(result).toBe(true);
-    expect(failures).toEqual([cancellationError]);
+    await expect(cancelComposerAgent(input)).rejects.toBe(cancellationError);
   });
 
   it("does nothing when the agent is not running", () => {
     const input = baseInput();
     const result = cancelComposerAgent({ ...input, isAgentRunning: false });
-    expect(result).toBe(false);
+    expect(result).toBeNull();
     expect(input.client.canceledIds).toEqual([]);
   });
 
   it("does nothing when the agent is already being canceled", () => {
     const input = baseInput();
     const result = cancelComposerAgent({ ...input, isCancellingAgent: true });
-    expect(result).toBe(false);
+    expect(result).toBeNull();
     expect(input.client.canceledIds).toEqual([]);
   });
 
   it("does nothing when disconnected or the client is null", () => {
     const input = baseInput();
-    expect(cancelComposerAgent({ ...input, isConnected: false })).toBe(false);
-    expect(cancelComposerAgent({ ...input, client: null })).toBe(false);
+    expect(cancelComposerAgent({ ...input, isConnected: false })).toBeNull();
+    expect(cancelComposerAgent({ ...input, client: null })).toBeNull();
     expect(input.client.canceledIds).toEqual([]);
   });
 });
@@ -337,7 +391,7 @@ describe("pickAndPersistImages", () => {
 });
 
 describe("dispatchComposerAgentMessage", () => {
-  it("removes the optimistic prompt when the host rejects it", async () => {
+  it("removes the submitted prompt when the host rejects it", async () => {
     const rejection = new Error("Host rejected prompt");
     const client = createFakeSendClient({ rejection });
     const stream = createFakeStream();
@@ -349,14 +403,54 @@ describe("dispatchComposerAgentMessage", () => {
         text: "rejected prompt",
         attachments: [],
         encodeImages: passthroughEncodeImages,
-        stream,
+        submission: stream,
       }),
     ).rejects.toBe(rejection);
 
-    expect(stream.head.get("agent")).toBeUndefined();
+    expect(stream.head.get("agent")).toEqual([]);
     expect(stream.tail.get("agent") ?? []).toEqual([]);
   });
 
+  it("rolls back an already-running force send when its RPC fails", async () => {
+    const stream = createFakeStream();
+    const transportError = new Error("Force send failed while the prior turn was running");
+    const client = createFakeSendClient({ rejection: transportError });
+
+    await expect(
+      dispatchComposerAgentMessage({
+        client,
+        agentId: "agent",
+        text: "force send",
+        attachments: [],
+        encodeImages: passthroughEncodeImages,
+        submission: stream,
+      }),
+    ).rejects.toBe(transportError);
+
+    expect(stream.tail.get("agent") ?? []).toEqual([]);
+  });
+
+  it("does not swallow a transport error when submission state is missing", async () => {
+    const transportError = new Error("Connection lost with unknown submission state");
+    const client = createFakeSendClient({ rejection: transportError });
+    const submission: MessageSubmissionWriter = {
+      begin: () => {},
+      accept: () => {},
+      reject: () => "unknown",
+    };
+
+    await expect(
+      dispatchComposerAgentMessage({
+        client,
+        agentId: "agent",
+        text: "unknown state",
+        attachments: [],
+        encodeImages: passthroughEncodeImages,
+        submission,
+      }),
+    ).rejects.toBe(transportError);
+  });
+
   it("sends text + image data + structured attachments and appends user_message to the tail when head is empty", async () => {
     const client = createFakeSendClient();
     const stream = createFakeStream();
@@ -371,7 +465,7 @@ describe("dispatchComposerAgentMessage", () => {
         { kind: "github_pr", item: prItem },
       ],
       encodeImages: passthroughEncodeImages,
-      stream,
+      submission: stream,
     });
 
     expect(client.calls).toHaveLength(1);
@@ -393,7 +487,7 @@ describe("dispatchComposerAgentMessage", () => {
       },
     ]);
 
-    expect(stream.head.get("agent")).toBeUndefined();
+    expect(stream.head.get("agent")).toEqual([]);
     const tail = stream.tail.get("agent");
     expect(tail).toHaveLength(1);
     const userMessage = tail?.[0] as Extract<StreamItem, { kind: "user_message" }>;
@@ -402,7 +496,8 @@ describe("dispatchComposerAgentMessage", () => {
     expect(userMessage.images).toEqual([image]);
     expect(userMessage.attachments).toEqual(call.options.attachments);
     expect(userMessage.id).toBe(call.options.messageId);
-    expect(userMessage.optimistic).toBe(true);
+    expect(userMessage.clientMessageId).toBe(call.options.messageId);
+    expect(userMessage.messageId).toBeUndefined();
   });
 
   it("can send legacy GitHub attachment payloads for old daemons", async () => {
@@ -416,7 +511,7 @@ describe("dispatchComposerAgentMessage", () => {
       attachments: [{ kind: "forge_change_request", item: prItem }],
       attachmentSubmitFormat: "legacy-github",
       encodeImages: passthroughEncodeImages,
-      stream,
+      submission: stream,
     });
 
     expect(client.calls[0].options.attachments).toEqual([
@@ -449,11 +544,11 @@ describe("dispatchComposerAgentMessage", () => {
       text: "next message",
       attachments: [],
       encodeImages: passthroughEncodeImages,
-      stream,
+      submission: stream,
     });
 
     expect(stream.head.get("agent")).toHaveLength(2);
-    expect(stream.tail.get("agent")).toBeUndefined();
+    expect(stream.tail.get("agent")).toEqual([]);
   });
 
   it("submits empty wire arrays when no attachments are provided", async () => {
@@ -466,7 +561,7 @@ describe("dispatchComposerAgentMessage", () => {
       text: "plain message",
       attachments: [],
       encodeImages: passthroughEncodeImages,
-      stream,
+      submission: stream,
     });
 
     expect(client.calls[0]?.options).toMatchObject({
@@ -486,7 +581,7 @@ describe("dispatchComposerAgentMessage", () => {
       text: "review this",
       attachments: [review],
       encodeImages: passthroughEncodeImages,
-      stream,
+      submission: stream,
     });
 
     expect(client.calls[0]?.options.attachments).toEqual([review.attachment]);
@@ -504,7 +599,7 @@ describe("dispatchComposerAgentMessage", () => {
       text: "inspect element",
       attachments: [browserElement],
       encodeImages: passthroughEncodeImages,
-      stream,
+      submission: stream,
     });
 
     expect(client.calls[0]?.options.attachments).toEqual([

packages/app/src/composer/actions.ts

@@ -12,13 +12,8 @@ import {
   splitComposerAttachmentsForSubmit,
   type ComposerAttachmentSubmitFormat,
 } from "@/composer/attachments/submit";
-import {
-  appendOptimisticUserMessageToStream,
-  buildOptimisticUserMessage,
-  generateMessageId,
-  type StreamItem,
-  type UserMessageItem,
-} from "@/types/stream";
+import { createUserMessage, generateMessageId, type UserMessageItem } from "@/types/stream";
+import type { MessageSubmissionRejectionOutcome } from "@/composer/submission/model";
 import type { PickedImageAttachmentInput } from "@/hooks/image-attachment-picker";
 import { i18n } from "@/i18n/i18next";
 
@@ -70,11 +65,10 @@ export interface ComposerCancelClient {
   cancelAgent: (agentId: string) => Promise<void> | void;
 }
 
-export interface AgentStreamWriter {
-  getTail: (agentId: string) => StreamItem[] | undefined;
-  getHead: (agentId: string) => StreamItem[] | undefined;
-  setHead: (updater: (prev: Map<string, StreamItem[]>) => Map<string, StreamItem[]>) => void;
-  setTail: (updater: (prev: Map<string, StreamItem[]>) => Map<string, StreamItem[]>) => void;
+export interface MessageSubmissionWriter {
+  begin: (agentId: string, message: UserMessageItem) => void;
+  accept: (agentId: string, clientMessageId: string) => void;
+  reject: (agentId: string, clientMessageId: string) => MessageSubmissionRejectionOutcome;
 }
 
 export interface QueueWriter {
@@ -145,19 +139,16 @@ export interface CancelComposerAgentInput {
   isAgentRunning: boolean;
   isCancellingAgent: boolean;
   isConnected: boolean;
-  onCancelFailed: (error: unknown) => void;
 }
 
-export function cancelComposerAgent(input: CancelComposerAgentInput): boolean {
-  if (!input.isAgentRunning || input.isCancellingAgent) return false;
-  if (!input.isConnected || !input.client) return false;
+export function cancelComposerAgent(input: CancelComposerAgentInput): Promise<void> | null {
+  if (!input.isAgentRunning || input.isCancellingAgent) return null;
+  if (!input.isConnected || !input.client) return null;
   try {
-    void Promise.resolve(input.client.cancelAgent(input.agentId)).catch(input.onCancelFailed);
+    return Promise.resolve(input.client.cancelAgent(input.agentId));
   } catch (error) {
-    input.onCancelFailed(error);
-    return false;
+    return Promise.reject(error);
   }
-  return true;
 }
 
 export interface DispatchComposerAgentMessageInput {
@@ -169,7 +160,7 @@ export interface DispatchComposerAgentMessageInput {
   encodeImages: (
     images: AttachmentMetadata[],
   ) => Promise<Array<{ data: string; mimeType: string }> | undefined>;
-  stream: AgentStreamWriter;
+  submission: MessageSubmissionWriter;
 }
 
 export async function dispatchComposerAgentMessage(
@@ -178,60 +169,30 @@ export async function dispatchComposerAgentMessage(
   const wirePayload = splitComposerAttachmentsForSubmit(input.attachments, {
     format: input.attachmentSubmitFormat,
   });
-  const messageId = generateMessageId();
-  const userMessage = buildOptimisticUserMessage({
-    id: messageId,
+  const clientMessageId = generateMessageId();
+  const userMessage = createUserMessage({
+    clientMessageId,
     text: input.text,
     timestamp: new Date(),
     images: wirePayload.images,
     attachments: wirePayload.attachments,
   });
-  const rollbackOptimisticMessage = appendUserMessageToStream(
-    input.agentId,
-    userMessage,
-    input.stream,
-  );
+  input.submission.begin(input.agentId, userMessage);
   try {
     const imagesData = await input.encodeImages(wirePayload.images);
     await input.client.sendAgentMessage(input.agentId, input.text, {
-      messageId,
+      messageId: clientMessageId,
       images: imagesData ?? [],
       attachments: wirePayload.attachments,
     });
+    input.submission.accept(input.agentId, clientMessageId);
   } catch (error) {
-    rollbackOptimisticMessage();
+    const outcome = input.submission.reject(input.agentId, clientMessageId);
+    if (outcome === "accepted") return;
     throw error;
   }
 }
 
-function appendUserMessageToStream(
-  agentId: string,
-  userMessage: UserMessageItem,
-  stream: AgentStreamWriter,
-): () => void {
-  const result = appendOptimisticUserMessageToStream({
-    tail: stream.getTail(agentId) ?? [],
-    head: stream.getHead(agentId) ?? [],
-    message: userMessage,
-    placement: "active-head",
-  });
-  const write = result.changedHead ? stream.setHead : stream.setTail;
-  const items = result.changedHead ? result.head : result.tail;
-  write((prev) => new Map(prev).set(agentId, items));
-
-  return () => {
-    write((prev) => {
-      const current = prev.get(agentId);
-      if (!current) return prev;
-      const nextItems = current.filter(
-        (item) => item.id !== userMessage.id || item.kind !== "user_message" || !item.optimistic,
-      );
-      if (nextItems.length === current.length) return prev;
-      return new Map(prev).set(agentId, nextItems);
-    });
-  };
-}
-
 export interface QueueComposerMessageInput {
   agentId: string;
   text: string;

packages/app/src/composer/draft/create-flow.test.ts

@@ -13,7 +13,7 @@ describe("useDraftAgentCreateFlow", () => {
     useCreateFlowStore.setState({ pendingByDraftId: {} });
   });
 
-  it("renders a prepared new-workspace create attempt as optimistic chat before continuing it", async () => {
+  it("renders a prepared new-workspace submission before continuing it", async () => {
     const image: UserMessageImageAttachment = {
       id: "image-1",
       mimeType: "image/png",
@@ -60,13 +60,13 @@ describe("useDraftAgentCreateFlow", () => {
 
     expect(result.current.isSubmitting).toBe(true);
     expect(result.current.draftAgent).toEqual({ currentAttempt: attempt });
-    expect(result.current.optimisticStreamItems).toEqual([
+    expect(result.current.submittedStreamItems).toEqual([
       {
         kind: "user_message",
         id: "msg-prepared",
+        clientMessageId: "msg-prepared",
         text: "build this",
         timestamp: attempt.timestamp,
-        optimistic: true,
         images: [image],
         attachments: [attachment],
       },

packages/app/src/composer/draft/create-flow.ts

@@ -6,14 +6,16 @@ import {
   splitComposerAttachmentsForSubmit,
 } from "@/composer/attachments/submit";
 import { useCreateFlowStore } from "@/stores/create-flow-store";
+import { handoffCreatedAgentMessageSubmission } from "@/composer/submission/writer";
 import { useSessionStore } from "@/stores/session-store";
 import {
-  buildOptimisticUserMessage,
+  createUserMessage,
   generateMessageId,
   type StreamItem,
   type UserMessageImageAttachment,
 } from "@/types/stream";
 import type { AgentAttachment } from "@getpaseo/protocol/messages";
+import type { PendingMessageSubmission } from "@/composer/submission/model";
 
 const EMPTY_STREAM_ITEMS: StreamItem[] = [];
 
@@ -126,14 +128,10 @@ export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
   const updatePendingAgentId = useCreateFlowStore((state) => state.updateAgentId);
   const markPendingCreateLifecycle = useCreateFlowStore((state) => state.markLifecycle);
   const clearPendingCreateAttempt = useCreateFlowStore((state) => state.clear);
-  const handoffCreatedAgentUserMessage = useSessionStore(
-    (state) => state.handoffCreatedAgentUserMessage,
-  );
-
   const formErrorMessage = machine.tag === "draft" ? machine.errorMessage : "";
   const isSubmitting = machine.tag === "creating";
 
-  const optimisticStreamItems = useMemo<StreamItem[]>(() => {
+  const submittedStreamItems = useMemo<StreamItem[]>(() => {
     if (machine.tag !== "creating") {
       return EMPTY_STREAM_ITEMS;
     }
@@ -147,8 +145,8 @@ export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
     }
 
     return [
-      buildOptimisticUserMessage({
-        id: machine.attempt.clientMessageId,
+      createUserMessage({
+        clientMessageId: machine.attempt.clientMessageId,
         text: machine.attempt.text,
         timestamp: machine.attempt.timestamp,
         images: machine.attempt.images,
@@ -156,6 +154,14 @@ export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
       }),
     ];
   }, [machine]);
+  const pendingMessageSubmissions = useMemo<readonly PendingMessageSubmission[]>(() => {
+    if (machine.tag !== "creating") return [];
+    return [
+      {
+        clientMessageId: machine.attempt.clientMessageId,
+      },
+    ];
+  }, [machine]);
 
   const draftAgent = useMemo<TDraftAgent | null>(() => {
     if (machine.tag !== "creating") {
@@ -192,11 +198,11 @@ export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
 
         if (createResult.agentId) {
           updatePendingAgentId({ draftId, agentId: createResult.agentId });
-          handoffCreatedAgentUserMessage(
+          handoffCreatedAgentMessageSubmission(
             pendingServerId,
             createResult.agentId,
-            buildOptimisticUserMessage({
-              id: attempt.clientMessageId,
+            createUserMessage({
+              clientMessageId: attempt.clientMessageId,
               text: attempt.text,
               timestamp: attempt.timestamp,
               images: attempt.images,
@@ -218,7 +224,6 @@ export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
       }
     },
     [
-      handoffCreatedAgentUserMessage,
       clearPendingCreateAttempt,
       createRequest,
       draftId,
@@ -326,7 +331,8 @@ export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
     machine,
     formErrorMessage,
     isSubmitting,
-    optimisticStreamItems,
+    submittedStreamItems,
+    pendingMessageSubmissions,
     draftAgent,
     handleCreateFromInput,
     continueCreateFromAttempt,

packages/app/src/composer/draft/workspace-tab.tsx

@@ -15,6 +15,7 @@ import { composerWorkspaceAttachment } from "@/composer/attachments/workspace";
 import { useAgentInputDraft } from "@/composer/draft/input-draft";
 import type { CreateAgentInitialValues } from "@/hooks/use-agent-form-state";
 import { useDraftAgentCreateFlow, type DraftCreateAttempt } from "@/composer/draft/create-flow";
+import { resolveTurnPresentation, TURN_LIVENESS_IDLE } from "@/timeline/turn-liveness";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { buildWorkspaceDraftAgentConfig } from "@/screens/workspace/workspace-draft-agent-config";
 import { buildDraftStoreKey } from "@/stores/draft-keys";
@@ -243,6 +244,7 @@ function buildDraftAgentSnapshot(input: {
     id: tabId,
     provider,
     status: "running",
+    activeTurn: null,
     createdAt: now,
     updatedAt: now,
     lastUserMessageAt: now,
@@ -467,7 +469,8 @@ export function WorkspaceDraftAgentTab({
   const {
     formErrorMessage,
     isSubmitting,
-    optimisticStreamItems,
+    submittedStreamItems,
+    pendingMessageSubmissions,
     draftAgent,
     handleCreateFromInput,
     continueCreateFromAttempt,
@@ -529,6 +532,10 @@ export function WorkspaceDraftAgentTab({
       onCreated(result);
     },
   });
+  const turnPresentation = useMemo(
+    () => resolveTurnPresentation(TURN_LIVENESS_IDLE, pendingMessageSubmissions.length > 0),
+    [pendingMessageSubmissions],
+  );
   useAgentControlCommandCenterActions({
     sourceId: `draft:${serverId}:${tabId}`,
     enabled: isPaneFocused && !isSubmitting,
@@ -654,7 +661,9 @@ export function WorkspaceDraftAgentTab({
               agentId={tabId}
               serverId={serverId}
               context={draftAgent}
-              streamItems={optimisticStreamItems}
+              streamItems={submittedStreamItems}
+              pendingMessageSubmissions={pendingMessageSubmissions}
+              turnPresentation={turnPresentation}
               pendingPermissions={EMPTY_PENDING_PERMISSIONS}
               onOpenWorkspaceFile={onOpenWorkspaceFile}
             />

packages/app/src/composer/index.tsx

@@ -41,7 +41,7 @@ import {
 } from "@/composer/agent-controls";
 import { ContextWindowMeter } from "@/components/context-window-meter";
 import { useImageAttachmentPicker } from "@/hooks/use-image-attachment-picker";
-import { useSessionStore } from "@/stores/session-store";
+import { selectAgentTurnPresentation, useSessionStore } from "@/stores/session-store";
 import { useFilePicker } from "@/hooks/use-file-picker";
 import { useFileDrop } from "@/components/file-drop/use-file-drop";
 import type { DroppedItem } from "@/components/file-drop/types";
@@ -64,7 +64,6 @@ import {
   sendQueuedComposerMessageNow,
   toggleGithubAttachmentFromPicker,
   uploadFileAttachments,
-  type AgentStreamWriter,
   type QueueWriter,
   type QueuedComposerMessage,
 } from "@/composer/actions";
@@ -91,6 +90,7 @@ import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import type { KeyboardActionDefinition } from "@/keyboard/keyboard-action-dispatcher";
 import type { MessageInputKeyboardActionKind } from "@/keyboard/actions";
 import { submitAgentInput } from "@/composer/submit";
+import { createMessageSubmissionWriter } from "@/composer/submission/writer";
 import { ComposerKeyboardScopeProvider } from "@/composer/keyboard-scope";
 import { useAppSettings } from "@/hooks/use-settings";
 import { isWeb, isNative } from "@/constants/platform";
@@ -910,22 +910,6 @@ function ComposerCancelButton({
   );
 }
 
-interface ComposerCancelButtonSlotProps extends ComposerCancelButtonProps {
-  isAgentRunning: boolean;
-  hasSendableContent: boolean;
-  isProcessing: boolean;
-}
-
-function ComposerCancelButtonSlot({
-  isAgentRunning,
-  hasSendableContent,
-  isProcessing,
-  ...rest
-}: ComposerCancelButtonSlotProps) {
-  if (!isAgentRunning || hasSendableContent || isProcessing) return null;
-  return <ComposerCancelButton {...rest} />;
-}
-
 interface ComposerVoiceModeButtonProps {
   buttonIconSize: number;
   handleToggleRealtimeVoice: () => void;
@@ -943,9 +927,7 @@ interface ComposerRightControlsSlotProps extends ComposerVoiceModeButtonProps {
   hasAgent: boolean;
   isAgentRunning: boolean;
   hasSendableContent: boolean;
-  isProcessing: boolean;
   isCompact: boolean;
-  cancelButton: ReactElement;
 }
 
 function ComposerRightControlsSlot({
@@ -953,20 +935,16 @@ function ComposerRightControlsSlot({
   hasAgent,
   isAgentRunning,
   hasSendableContent,
-  isProcessing,
   isCompact,
-  cancelButton,
   ...voiceProps
 }: ComposerRightControlsSlotProps) {
   const hideVoiceForCompactInput = isCompact && hasSendableContent;
   const showVoiceModeButton =
     !isVoiceModeForAgent && hasAgent && !isAgentRunning && !hideVoiceForCompactInput;
-  const shouldShowCancelButton = isAgentRunning && !hasSendableContent && !isProcessing;
-  if (!showVoiceModeButton && !shouldShowCancelButton) return null;
+  if (!showVoiceModeButton) return null;
   return (
     <View style={styles.rightControls}>
-      {showVoiceModeButton ? <ComposerVoiceModeButton {...voiceProps} /> : null}
-      {cancelButton}
+      <ComposerVoiceModeButton {...voiceProps} />
     </View>
   );
 }
@@ -1079,8 +1057,6 @@ export function Composer({
   const queuedMessages = queuedMessagesRaw ?? EMPTY_ARRAY;
 
   const setQueuedMessages = useSessionStore((state) => state.setQueuedMessages);
-  const setAgentStreamTail = useSessionStore((state) => state.setAgentStreamTail);
-  const setAgentStreamHead = useSessionStore((state) => state.setAgentStreamHead);
 
   const isCompactFormFactor = useIsCompactFormFactor();
   const isCompactLayout = resolveCompactLayout(isCompactLayoutOverride, isCompactFormFactor);
@@ -1125,7 +1101,6 @@ export function Composer({
   const [cursorIndex, setCursorIndex] = useState(0);
   const [isProcessing, setIsProcessing] = useState(false);
   const [isUploadingFile, setIsUploadingFile] = useState(false);
-  const [isCancellingAgent, setIsCancellingAgent] = useState(false);
   const [sendError, setSendError] = useState<string | null>(null);
   const [isMessageInputFocused, setIsMessageInputFocused] = useState(false);
   const [isGithubPickerOpen, setIsGithubPickerOpen] = useState(false);
@@ -1283,12 +1258,6 @@ export function Composer({
       if (!client) {
         throw new Error(t("workspace.terminal.hostDisconnected"));
       }
-      const stream: AgentStreamWriter = {
-        getTail: (id) => useSessionStore.getState().sessions[serverId]?.agentStreamTail?.get(id),
-        getHead: (id) => useSessionStore.getState().sessions[serverId]?.agentStreamHead?.get(id),
-        setHead: (updater) => setAgentStreamHead(serverId, updater),
-        setTail: (updater) => setAgentStreamTail(serverId, updater),
-      };
       await dispatchComposerAgentMessage({
         client,
         agentId: targetAgentId,
@@ -1298,25 +1267,25 @@ export function Composer({
           supportsForgeAttachments: supportsForgeSearch,
         }),
         encodeImages,
-        stream,
+        submission: createMessageSubmissionWriter(serverId),
       });
       onAttentionPromptSend?.();
     };
-  }, [
-    client,
-    onAttentionPromptSend,
-    serverId,
-    setAgentStreamTail,
-    setAgentStreamHead,
-    supportsForgeSearch,
-    t,
-  ]);
+  }, [client, onAttentionPromptSend, serverId, supportsForgeSearch, t]);
 
   useEffect(() => {
     onSubmitMessageRef.current = onSubmitMessage;
   }, [onSubmitMessage]);
 
-  const isAgentRunning = agentState.status === "running";
+  const hasActiveTurn = useSessionStore(
+    (state) => selectAgentTurnPresentation(state.sessions[serverId], agentId).isActive,
+  );
+  const isCancellingAgent = useSessionStore(
+    (state) => selectAgentTurnPresentation(state.sessions[serverId], agentId).isCancelling,
+  );
+  const beginAgentCancellation = useSessionStore((state) => state.beginAgentCancellation);
+  const settleAgentCancellation = useSessionStore((state) => state.settleAgentCancellation);
+  const isAgentRunning = hasActiveTurn;
   const hasAgent = agentState.status !== null;
 
   const queueWriter = useMemo<QueueWriter>(
@@ -1550,31 +1519,37 @@ export function Composer({
     [openAttachment],
   );
 
-  useEffect(() => {
-    if (!isAgentRunning || !isConnected) {
-      setIsCancellingAgent(false);
-    }
-  }, [isAgentRunning, isConnected]);
-
   const handleCancelAgent = useCallback(() => {
-    const didCancel = cancelComposerAgent({
+    const targetAgentId = agentIdRef.current;
+    const cancellation = cancelComposerAgent({
       client,
-      agentId: agentIdRef.current,
+      agentId: targetAgentId,
       isAgentRunning,
       isCancellingAgent,
       isConnected,
-      onCancelFailed: (error) => {
-        setIsCancellingAgent(false);
+    });
+    if (!cancellation) return;
+    const requestId = beginAgentCancellation(serverId, targetAgentId);
+    void cancellation
+      .catch((error) => {
         const message = resolveErrorMessage(error);
         if (message && message.trim().length > 0) {
           toastErrorRef.current(message);
         }
-      },
+      })
+      .finally(() => {
+        settleAgentCancellation(serverId, targetAgentId, requestId);
       });
-    if (!didCancel) return;
-    setIsCancellingAgent(true);
     messageInputRef.current?.focus();
-  }, [client, isAgentRunning, isCancellingAgent, isConnected]);
+  }, [
+    beginAgentCancellation,
+    client,
+    isAgentRunning,
+    isCancellingAgent,
+    isConnected,
+    serverId,
+    settleAgentCancellation,
+  ]);
 
   const focusMessageInputForKeyboardAction = useCallback(() => {
     focusMessageInputWithPlatformStrategy(messageInputRef);
@@ -1708,12 +1683,9 @@ export function Composer({
     [isCompactLayout, voiceButtonDisabled],
   );
 
-  const cancelButton = useMemo(
+  const activeActionContent = useMemo(
     () => (
-      <ComposerCancelButtonSlot
-        isAgentRunning={isAgentRunning}
-        hasSendableContent={hasSendableContent}
-        isProcessing={isProcessing}
+      <ComposerCancelButton
         buttonIconSize={buttonIconSize}
         cancelButtonStyle={cancelButtonStyle}
         handleCancelAgent={handleCancelAgent}
@@ -1728,11 +1700,8 @@ export function Composer({
       buttonIconSize,
       cancelButtonStyle,
       handleCancelAgent,
-      hasSendableContent,
-      isAgentRunning,
       isCancellingAgent,
       isConnected,
-      isProcessing,
       t,
     ],
   );
@@ -1744,7 +1713,6 @@ export function Composer({
         hasAgent={hasAgent}
         isAgentRunning={isAgentRunning}
         hasSendableContent={hasSendableContent}
-        isProcessing={isProcessing}
         isCompact={isCompactLayout}
         buttonIconSize={buttonIconSize}
         handleToggleRealtimeVoice={handleToggleRealtimeVoice}
@@ -1753,19 +1721,16 @@ export function Composer({
         realtimeVoiceButtonStyle={realtimeVoiceButtonStyle}
         voiceToggleKeys={voiceToggleKeys}
         t={t}
-        cancelButton={cancelButton}
       />
     ),
     [
       buttonIconSize,
-      cancelButton,
       handleToggleRealtimeVoice,
       hasAgent,
       hasSendableContent,
       isAgentRunning,
       isConnected,
       isCompactLayout,
-      isProcessing,
       isVoiceModeForAgent,
       isVoiceSwitching,
       realtimeVoiceButtonStyle,
@@ -1779,8 +1744,7 @@ export function Composer({
     agentState.contextWindowUsedTokens,
   );
 
-  const contextWindowPending =
-    agentState.status === "initializing" || agentState.status === "running";
+  const contextWindowPending = agentState.status === "initializing" || isAgentRunning;
   const contextWindowMeterGlyphSize = isCompactLayout ? ICON_SIZE.md : buttonIconSize;
 
   const contextWindowMeter = useMemo(
@@ -2102,6 +2066,7 @@ export function Composer({
                 leftContent={leftContent}
                 beforeVoiceContent={beforeVoiceContent}
                 rightContent={rightContent}
+                activeActionContent={activeActionContent}
                 voiceServerId={serverId}
                 voiceAgentId={agentId}
                 isAgentRunning={isAgentRunning}

packages/app/src/composer/input/input.tsx

@@ -121,8 +121,10 @@ export interface MessageInputProps {
   leftContent?: React.ReactNode;
   /** Content to render on the right side before the voice button (e.g., context window meter) */
   beforeVoiceContent?: React.ReactNode;
-  /** Content to render on the right side after voice button (e.g., realtime button, cancel button) */
+  /** Auxiliary content to render on the right side after the voice button. */
   rightContent?: React.ReactNode;
+  /** Primary action to render when the agent is active and the composer has no sendable content. */
+  activeActionContent?: React.ReactNode;
   voiceServerId?: string;
   voiceAgentId?: string;
   /** When true and there's sendable content, calls onQueue instead of onSubmit */
@@ -779,6 +781,40 @@ function SendButtonTooltip({
   );
 }
 
+type PrimaryActionKind = "send" | "active" | "none";
+
+function hasSendableComposerContent(input: {
+  value: string;
+  attachments: readonly ComposerAttachment[];
+  hasExternalContent: boolean;
+}): boolean {
+  return input.value.trim().length > 0 || input.attachments.length > 0 || input.hasExternalContent;
+}
+
+function resolvePrimaryActionKind(input: {
+  hasSendableContent: boolean;
+  allowEmptySubmit: boolean;
+  isAgentRunning: boolean;
+  isSubmitLoading: boolean;
+}): PrimaryActionKind {
+  if (input.hasSendableContent || input.allowEmptySubmit) return "send";
+  if (input.isAgentRunning) return "active";
+  if (input.isSubmitLoading) return "send";
+  return "none";
+}
+
+function PrimaryAction({
+  kind,
+  activeActionContent,
+  ...sendButtonProps
+}: {
+  kind: PrimaryActionKind;
+  activeActionContent: React.ReactNode;
+} & React.ComponentProps<typeof SendButtonTooltip>) {
+  if (kind === "active") return activeActionContent;
+  if (kind === "send") return <SendButtonTooltip {...sendButtonProps} />;
+  return null;
+}
 interface ToggleRealtimeVoiceContext {
   voice:
     | {
@@ -928,30 +964,6 @@ function computeShouldShowDictationOverlay(
   return isDictating || isDictationProcessing || dictationStatus === "failed";
 }
 
-interface SendableContentInput {
-  value: string;
-  attachments: ComposerAttachment[];
-  hasExternalContent: boolean;
-  allowEmptySubmit: boolean;
-  isSubmitLoading: boolean;
-}
-
-interface SendableContentOutput {
-  hasAttachments: boolean;
-  hasRealContent: boolean;
-  hasSendableContent: boolean;
-  shouldShowSendButton: boolean;
-}
-
-function computeSendableContent(input: SendableContentInput): SendableContentOutput {
-  const hasAttachments = input.attachments.length > 0;
-  const hasRealContent = input.value.trim().length > 0 || hasAttachments;
-  const hasSendableContent = hasRealContent || input.hasExternalContent;
-  const shouldShowSendButton =
-    hasSendableContent || input.allowEmptySubmit || input.isSubmitLoading;
-  return { hasAttachments, hasRealContent, hasSendableContent, shouldShowSendButton };
-}
-
 function computeIsDictationStartEnabled(
   isReadyForDictation: boolean | undefined,
   isConnected: boolean,
@@ -1047,6 +1059,7 @@ interface ResolvedMessageInputProps {
   leftContent: React.ReactNode;
   beforeVoiceContent: React.ReactNode;
   rightContent: React.ReactNode;
+  activeActionContent: React.ReactNode;
   voiceServerId: string | undefined;
   voiceAgentId: string | undefined;
   isAgentRunning: boolean;
@@ -1089,6 +1102,7 @@ function resolveMessageInputProps(props: MessageInputProps): ResolvedMessageInpu
     leftContent: props.leftContent,
     beforeVoiceContent: props.beforeVoiceContent,
     rightContent: props.rightContent,
+    activeActionContent: props.activeActionContent,
     voiceServerId: props.voiceServerId,
     voiceAgentId: props.voiceAgentId,
     isAgentRunning: props.isAgentRunning ?? false,
@@ -1139,6 +1153,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
       leftContent,
       beforeVoiceContent,
       rightContent,
+      activeActionContent,
       voiceServerId,
       voiceAgentId,
       isAgentRunning,
@@ -1553,11 +1568,14 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
       });
     }
 
-    const { shouldShowSendButton } = computeSendableContent({
+    const primaryActionKind = resolvePrimaryActionKind({
+      hasSendableContent: hasSendableComposerContent({
         value,
         attachments,
         hasExternalContent,
+      }),
       allowEmptySubmit,
+      isAgentRunning,
       isSubmitLoading,
     });
     const { canPressLoadingButton, isSendButtonDisabled, defaultActionQueues } =
@@ -1756,8 +1774,10 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
                 dictationToggleKeys={dictationToggleKeys}
               />
               {rightContent}
-              <SendButtonTooltip
-                shouldShow={shouldShowSendButton}
+              <PrimaryAction
+                kind={primaryActionKind}
+                activeActionContent={activeActionContent}
+                shouldShow
                 canPressLoadingButton={canPressLoadingButton}
                 onSubmitLoadingPress={onSubmitLoadingPress}
                 onDefaultSendAction={handleDefaultSendAction}

packages/app/src/composer/submission/model.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from "vitest";
+import {
+  acceptMessageSubmission,
+  beginMessageSubmission,
+  getActiveMessageSubmissions,
+  getSendingClientMessageIds,
+  observeMessageSubmissionCanonical,
+  rejectMessageSubmission,
+} from "./model";
+
+describe("message submission transactions", () => {
+  it("tracks every in-flight submission independently", () => {
+    const first = beginMessageSubmission([], { clientMessageId: "client-1" });
+    const both = beginMessageSubmission(first, { clientMessageId: "client-2" });
+
+    expect(getActiveMessageSubmissions(both).map((item) => item.clientMessageId)).toEqual([
+      "client-1",
+      "client-2",
+    ]);
+    expect(getSendingClientMessageIds(both)).toEqual(["client-1", "client-2"]);
+  });
+
+  it("settles only the accepted transaction on RPC acceptance", () => {
+    const both = beginMessageSubmission(
+      beginMessageSubmission([], { clientMessageId: "client-1" }),
+      { clientMessageId: "client-2" },
+    );
+    const acknowledged = observeMessageSubmissionCanonical(both, ["client-1"]);
+
+    expect(acceptMessageSubmission(acknowledged, "client-1")).toEqual([
+      {
+        clientMessageId: "client-2",
+        providerAcknowledged: false,
+        rpcSettled: false,
+      },
+    ]);
+  });
+
+  it("keeps activity until an accepted RPC's canonical row is observed", () => {
+    const sending = beginMessageSubmission([], { clientMessageId: "client-1" });
+    const accepted = acceptMessageSubmission(sending, "client-1");
+
+    expect(accepted).toEqual([
+      {
+        clientMessageId: "client-1",
+        providerAcknowledged: false,
+        rpcSettled: true,
+      },
+    ]);
+    expect(getActiveMessageSubmissions(accepted).map((item) => item.clientMessageId)).toEqual([
+      "client-1",
+    ]);
+    expect(observeMessageSubmissionCanonical(accepted, ["client-1"])).toEqual([]);
+  });
+
+  it("records provider acknowledgement without settling another transaction", () => {
+    const both = beginMessageSubmission(
+      beginMessageSubmission([], { clientMessageId: "client-1" }),
+      { clientMessageId: "client-2" },
+    );
+    const observed = observeMessageSubmissionCanonical(both, ["client-1"]);
+
+    expect(observed).toEqual([
+      {
+        clientMessageId: "client-1",
+        providerAcknowledged: true,
+        rpcSettled: false,
+      },
+      {
+        clientMessageId: "client-2",
+        providerAcknowledged: false,
+        rpcSettled: false,
+      },
+    ]);
+    expect(getSendingClientMessageIds(observed)).toEqual(["client-2"]);
+  });
+
+  it("does not roll back a provider-acknowledged prompt on a later transport error", () => {
+    const sending = beginMessageSubmission([], { clientMessageId: "client-1" });
+    const observed = observeMessageSubmissionCanonical(sending, ["client-1"]);
+
+    expect(rejectMessageSubmission(observed, "client-1")).toEqual({
+      outcome: "accepted",
+      submissions: [],
+    });
+  });
+
+  it("rejects an unacknowledged transaction", () => {
+    const sending = beginMessageSubmission([], { clientMessageId: "client-1" });
+
+    expect(rejectMessageSubmission(sending, "client-1")).toEqual({
+      outcome: "rejected",
+      submissions: [],
+    });
+  });
+
+  it("does not create duplicate transaction identity", () => {
+    const sending = beginMessageSubmission([], { clientMessageId: "client-1" });
+
+    expect(() => beginMessageSubmission(sending, { clientMessageId: "client-1" })).toThrow(
+      "Message submission already exists",
+    );
+  });
+});

packages/app/src/composer/submission/model.ts

@@ -0,0 +1,92 @@
+export interface PendingMessageSubmission {
+  clientMessageId: string;
+}
+
+export type MessageSubmissionRecord = PendingMessageSubmission & {
+  providerAcknowledged: boolean;
+  rpcSettled: boolean;
+};
+
+const EMPTY_MESSAGE_SUBMISSIONS: readonly MessageSubmissionRecord[] = [];
+
+export function getActiveMessageSubmissions(
+  submissions: readonly MessageSubmissionRecord[] | null | undefined,
+): readonly PendingMessageSubmission[] {
+  return (submissions ?? EMPTY_MESSAGE_SUBMISSIONS).filter(
+    (submission) => !submission.providerAcknowledged,
+  );
+}
+
+export function getSendingClientMessageIds(
+  submissions: readonly MessageSubmissionRecord[] | null | undefined,
+): string[] {
+  return (submissions ?? [])
+    .filter((submission) => !submission.providerAcknowledged)
+    .map((submission) => submission.clientMessageId);
+}
+
+export type MessageSubmissionRejectionOutcome = "rejected" | "accepted" | "unknown";
+
+export interface MessageSubmissionRejectionResult {
+  submissions: MessageSubmissionRecord[];
+  outcome: MessageSubmissionRejectionOutcome;
+}
+
+export function beginMessageSubmission(
+  submissions: readonly MessageSubmissionRecord[],
+  input: PendingMessageSubmission,
+): MessageSubmissionRecord[] {
+  if (submissions.some((submission) => submission.clientMessageId === input.clientMessageId)) {
+    throw new Error(`Message submission already exists: ${input.clientMessageId}`);
+  }
+  return [...submissions, { ...input, providerAcknowledged: false, rpcSettled: false }];
+}
+
+export function acceptMessageSubmission(
+  submissions: readonly MessageSubmissionRecord[],
+  clientMessageId: string,
+): MessageSubmissionRecord[] {
+  const index = submissions.findIndex(
+    (submission) => submission.clientMessageId === clientMessageId,
+  );
+  if (index < 0) return submissions as MessageSubmissionRecord[];
+  const submission = submissions[index];
+  if (submission.providerAcknowledged) {
+    return submissions.filter((_, submissionIndex) => submissionIndex !== index);
+  }
+  if (submission.rpcSettled) return submissions as MessageSubmissionRecord[];
+  return submissions.map((item, submissionIndex) =>
+    submissionIndex === index ? { ...item, rpcSettled: true } : item,
+  );
+}
+
+export function observeMessageSubmissionCanonical(
+  submissions: readonly MessageSubmissionRecord[],
+  clientMessageIds: readonly string[],
+): MessageSubmissionRecord[] {
+  if (clientMessageIds.length === 0) return submissions as MessageSubmissionRecord[];
+  const observed = new Set(clientMessageIds);
+  let changed = false;
+  const next = submissions.flatMap((submission): MessageSubmissionRecord[] => {
+    if (submission.providerAcknowledged || !observed.has(submission.clientMessageId)) {
+      return [submission];
+    }
+    changed = true;
+    return submission.rpcSettled ? [] : [{ ...submission, providerAcknowledged: true }];
+  });
+  return changed ? next : (submissions as MessageSubmissionRecord[]);
+}
+
+export function rejectMessageSubmission(
+  submissions: readonly MessageSubmissionRecord[],
+  clientMessageId: string,
+): MessageSubmissionRejectionResult {
+  const submission = submissions.find((item) => item.clientMessageId === clientMessageId);
+  if (!submission) {
+    return { outcome: "unknown", submissions: submissions as MessageSubmissionRecord[] };
+  }
+  return {
+    outcome: submission.providerAcknowledged ? "accepted" : "rejected",
+    submissions: submissions.filter((item) => item.clientMessageId !== clientMessageId),
+  };
+}

packages/app/src/composer/submission/writer.test.ts

@@ -0,0 +1,49 @@
+import { afterEach, expect, test } from "vitest";
+import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
+import { useSessionStore } from "@/stores/session-store";
+import type { UserMessageItem } from "@/types/stream";
+import { createMessageSubmissionWriter } from "./writer";
+
+const CANONICAL_ONLY_SERVER_ID = "canonical-only";
+
+function submittedMessage(clientMessageId: string): UserMessageItem {
+  return {
+    kind: "user_message",
+    id: clientMessageId,
+    clientMessageId,
+    text: "hello",
+    timestamp: new Date("2026-07-31T10:00:00.000Z"),
+  };
+}
+
+function initializeSession(serverId: string, features: Record<string, boolean>): void {
+  const store = useSessionStore.getState();
+  store.initializeSession(serverId, null as unknown as DaemonClient);
+  store.updateSessionServerInfo(serverId, {
+    serverId,
+    hostname: null,
+    version: "0.2.6",
+    features,
+  });
+}
+
+function submissionIds(serverId: string): string[] {
+  return (
+    useSessionStore.getState().sessions[serverId]?.messageSubmissions.get("agent-1") ?? []
+  ).map((submission) => submission.clientMessageId);
+}
+
+afterEach(() => {
+  useSessionStore.getState().clearSession(CANONICAL_ONLY_SERVER_ID);
+});
+
+test("tracks submissions when canonical prompts are supported", () => {
+  initializeSession(CANONICAL_ONLY_SERVER_ID, { canonicalSubmittedPrompts: true });
+
+  createMessageSubmissionWriter(CANONICAL_ONLY_SERVER_ID).begin(
+    "agent-1",
+    submittedMessage("canonical-only-message"),
+  );
+
+  expect(submissionIds(CANONICAL_ONLY_SERVER_ID)).toEqual(["canonical-only-message"]);
+});

packages/app/src/composer/submission/writer.ts

@@ -0,0 +1,72 @@
+import type { MessageSubmissionWriter } from "@/composer/actions";
+import { useSessionStore } from "@/stores/session-store";
+import {
+  appendSubmittedUserMessage,
+  removeSubmittedUserMessage,
+  type UserMessageItem,
+} from "@/types/stream";
+
+function appendUntrackedSubmission(serverId: string, agentId: string, message: UserMessageItem) {
+  const session = useSessionStore.getState().sessions[serverId];
+  if (!session) return;
+  const tail = session.agentStreamTail.get(agentId) ?? [];
+  const head = session.agentStreamHead.get(agentId) ?? [];
+  useSessionStore
+    .getState()
+    .setAgentStreamState(serverId, agentId, appendSubmittedUserMessage({ tail, head, message }));
+}
+
+function removeUntrackedSubmission(
+  serverId: string,
+  agentId: string,
+  clientMessageId: string,
+): void {
+  const session = useSessionStore.getState().sessions[serverId];
+  if (!session) return;
+  const tail = session.agentStreamTail.get(agentId) ?? [];
+  const head = session.agentStreamHead.get(agentId) ?? [];
+  useSessionStore
+    .getState()
+    .setAgentStreamState(
+      serverId,
+      agentId,
+      removeSubmittedUserMessage({ tail, head, clientMessageId }),
+    );
+}
+
+function createUntrackedMessageSubmissionWriter(serverId: string): MessageSubmissionWriter {
+  return {
+    begin: (agentId, message) => appendUntrackedSubmission(serverId, agentId, message),
+    accept: () => undefined,
+    reject: (agentId, clientMessageId) => {
+      removeUntrackedSubmission(serverId, agentId, clientMessageId);
+      return "rejected";
+    },
+  };
+}
+
+export function createMessageSubmissionWriter(serverId: string): MessageSubmissionWriter {
+  const supportsTrackedMessageSubmissions =
+    useSessionStore.getState().sessions[serverId]?.serverInfo?.features
+      ?.canonicalSubmittedPrompts === true;
+  if (!supportsTrackedMessageSubmissions) {
+    // COMPAT(canonicalSubmittedPrompts): added in v0.2.6; remove the gate after 2027-01-31 once daemon floor >= v0.2.6.
+    return createUntrackedMessageSubmissionWriter(serverId);
+  }
+  return {
+    begin: (agentId, message) =>
+      useSessionStore.getState().beginAgentMessageSubmission(serverId, agentId, message),
+    accept: (agentId, clientMessageId) =>
+      useSessionStore.getState().acceptAgentMessageSubmission(serverId, agentId, clientMessageId),
+    reject: (agentId, clientMessageId) =>
+      useSessionStore.getState().rejectAgentMessageSubmission(serverId, agentId, clientMessageId),
+  };
+}
+
+export function handoffCreatedAgentMessageSubmission(
+  serverId: string,
+  agentId: string,
+  message: UserMessageItem,
+): boolean {
+  return useSessionStore.getState().handoffCreatedAgentUserMessage(serverId, agentId, message);
+}

packages/app/src/composer/submit.ts

@@ -51,7 +51,7 @@ export async function submitAgentInput<TAttachment>(
     return "queued";
   }
 
-  // Clear immediately so optimistic stream updates and composer state stay in sync.
+  // Clear immediately so the submitted timeline row and composer state stay in sync.
   if (shouldClearOnSubmit) {
     input.setUserInput("");
     input.setAttachments([]);

packages/app/src/contexts/session-context.tsx

@@ -14,12 +14,13 @@ import { prefetchProvidersSnapshot } from "@/hooks/use-providers-snapshot";
 import { generateMessageId, type StreamItem } from "@/types/stream";
 import {
   createSessionAgentStreamReducerQueue,
+  deriveAgentStreamTurnLiveness,
   processTimelineResponse,
   type ProcessTimelineResponseOutput,
   type TimelineReducerSideEffect,
 } from "@/timeline/session-stream-reducers";
 import { useCreateFlowStore } from "@/stores/create-flow-store";
-import { isTimelineCatchUpComplete } from "@/timeline/timeline-sync-plan";
+import { isTimelineResumeSnapshotAuthoritative } from "@/timeline/timeline-sync-plan";
 import {
   createViewedTimelineSync,
   type TimelineDeliveryMode,
@@ -40,7 +41,12 @@ import type { AgentPermissionResponse } from "@getpaseo/protocol/agent-types";
 import { getHostRuntimeStore, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { useVoiceAudioEngineOptional, useVoiceRuntimeOptional } from "@/contexts/voice-context";
 import type { AudioPlaybackSource } from "@/voice/audio-engine-types";
-import { useSessionStore, type MessageEntry, type SessionState } from "@/stores/session-store";
+import {
+  selectAgentTimelineState,
+  useSessionStore,
+  type MessageEntry,
+  type SessionState,
+} from "@/stores/session-store";
 import { useWorkspaceSetupStore } from "@/stores/workspace-setup-store";
 import { sendOsNotification } from "@/utils/os-notifications";
 import { getIsAppActivelyVisible, getIsAppVisible } from "@/utils/app-visibility";
@@ -53,6 +59,7 @@ import {
 } from "@/utils/agent-initialization";
 import { encodeImages } from "@/utils/encode-images";
 import { derivePendingPermissionKey } from "@/utils/agent-snapshots";
+import { getSendingClientMessageIds } from "@/composer/submission/model";
 import type { AttachmentMetadata } from "@/attachments/types";
 import { patchWorkspaceScripts } from "@/contexts/session-workspace-scripts";
 import { useToast } from "@/contexts/toast-context";
@@ -191,13 +198,6 @@ type WorkspaceSetupProgressPayload = Extract<
 
 type SessionStoreActions = ReturnType<typeof useSessionStore.getState>;
 type SetInitializingAgents = SessionStoreActions["setInitializingAgents"];
-type SetAgentStreamTail = SessionStoreActions["setAgentStreamTail"];
-type SetAgentStreamHead = SessionStoreActions["setAgentStreamHead"];
-type ClearAgentStreamHead = SessionStoreActions["clearAgentStreamHead"];
-type SetAgentTimelineCursor = SessionStoreActions["setAgentTimelineCursor"];
-type MarkAgentHistorySynchronized = SessionStoreActions["markAgentHistorySynchronized"];
-type SetAgentAuthoritativeHistoryApplied =
-  SessionStoreActions["setAgentAuthoritativeHistoryApplied"];
 
 function clearAgentInitializingFlag(
   setInitializingAgents: SetInitializingAgents,
@@ -230,75 +230,6 @@ function handleTimelineError(input: {
   }
 }
 
-function applyTimelineStreamPatches(input: {
-  result: ProcessTimelineResponseOutput;
-  agentId: string;
-  serverId: string;
-  currentTail: StreamItem[];
-  currentHead: StreamItem[];
-  setAgentStreamTail: SetAgentStreamTail;
-  setAgentStreamHead: SetAgentStreamHead;
-  clearAgentStreamHead: ClearAgentStreamHead;
-  setAgentTimelineCursor: SetAgentTimelineCursor;
-}): void {
-  const {
-    result,
-    agentId,
-    serverId,
-    currentTail,
-    currentHead,
-    setAgentStreamTail,
-    setAgentStreamHead,
-    clearAgentStreamHead,
-    setAgentTimelineCursor,
-  } = input;
-
-  if (result.tail !== currentTail) {
-    setAgentStreamTail(serverId, (prev) => {
-      const next = new Map(prev);
-      next.set(agentId, result.tail);
-      return next;
-    });
-  }
-
-  if (result.head !== currentHead) {
-    if (result.head.length === 0) {
-      clearAgentStreamHead(serverId, agentId);
-    } else {
-      setAgentStreamHead(serverId, (prev) => {
-        const next = new Map(prev);
-        next.set(agentId, result.head);
-        return next;
-      });
-    }
-  }
-
-  if (result.cursorChanged) {
-    setAgentTimelineCursor(serverId, (prev) => {
-      const current = prev.get(agentId);
-      if (!result.cursor) {
-        if (!current) {
-          return prev;
-        }
-        const next = new Map(prev);
-        next.delete(agentId);
-        return next;
-      }
-      if (
-        current &&
-        current.epoch === result.cursor.epoch &&
-        current.startSeq === result.cursor.startSeq &&
-        current.endSeq === result.cursor.endSeq
-      ) {
-        return prev;
-      }
-      const next = new Map(prev);
-      next.set(agentId, result.cursor);
-      return next;
-    });
-  }
-}
-
 function executeTimelineSideEffects(input: {
   sideEffects: TimelineReducerSideEffect[];
   agentId: string;
@@ -319,8 +250,6 @@ function finalizeTimelineApplication(input: {
   serverId: string;
   shouldMarkAuthoritativeHistoryApplied: boolean;
   setInitializingAgents: SetInitializingAgents;
-  setAgentAuthoritativeHistoryApplied: SetAgentAuthoritativeHistoryApplied;
-  markAgentHistorySynchronized: MarkAgentHistorySynchronized;
 }): void {
   const {
     result,
@@ -329,17 +258,13 @@ function finalizeTimelineApplication(input: {
     serverId,
     shouldMarkAuthoritativeHistoryApplied,
     setInitializingAgents,
-    setAgentAuthoritativeHistoryApplied,
-    markAgentHistorySynchronized,
   } = input;
 
   if (result.clearInitializing) {
     clearAgentInitializingFlag(setInitializingAgents, serverId, agentId);
   }
   if (shouldMarkAuthoritativeHistoryApplied) {
-    setAgentAuthoritativeHistoryApplied(serverId, agentId, true);
     useCreateFlowStore.getState().clearByAgent({ serverId, agentId });
-    markAgentHistorySynchronized(serverId, agentId);
     const session = useSessionStore.getState().sessions[serverId];
     const agent = session?.agents.get(agentId) ?? session?.agentDetails.get(agentId);
     if (agent && agent.status !== "running") {
@@ -423,16 +348,17 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
   const setAgentStreamTail = useSessionStore((state) => state.setAgentStreamTail);
   const setAgentStreamHead = useSessionStore((state) => state.setAgentStreamHead);
   const setAgentStreamState = useSessionStore((state) => state.setAgentStreamState);
+  const applyAgentTurnLiveness = useSessionStore((state) => state.applyAgentTurnLiveness);
+  const clearAgentTurnLiveness = useSessionStore((state) => state.clearAgentTurnLiveness);
   const clearAgentStreamHead = useSessionStore((state) => state.clearAgentStreamHead);
   const setAgentTimelineCursor = useSessionStore((state) => state.setAgentTimelineCursor);
-  const setAgentTimelineHasOlder = useSessionStore((state) => state.setAgentTimelineHasOlder);
   const setInitializingAgents = useSessionStore((state) => state.setInitializingAgents);
   const bumpHistorySyncGeneration = useSessionStore((state) => state.bumpHistorySyncGeneration);
   const markAgentHistorySynchronized = useSessionStore(
     (state) => state.markAgentHistorySynchronized,
   );
-  const setAgentAuthoritativeHistoryApplied = useSessionStore(
-    (state) => state.setAgentAuthoritativeHistoryApplied,
+  const applyAgentTimelineResponseState = useSessionStore(
+    (state) => state.applyAgentTimelineResponseState,
   );
   const setAgents = useSessionStore((state) => state.setAgents);
   const setWorkspaces = useSessionStore((state) => state.setWorkspaces);
@@ -626,6 +552,15 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
     }
   }, [flushAgentLastActivity, serverId, isConnected, setInitializingAgents]);
 
+  useEffect(
+    () =>
+      client.subscribeConnectionStatus((connection) => {
+        if (connection.status === "connected") return;
+        clearAgentTurnLiveness(serverId);
+      }),
+    [clearAgentTurnLiveness, client, serverId],
+  );
+
   const applyWorkspaceSetupProgress = useCallback(
     (payload: WorkspaceSetupProgressPayload) => {
       upsertWorkspaceSetupProgress({ serverId, payload });
@@ -642,31 +577,25 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
     ) => {
       const agentId = payload.agentId;
       const initKey = getInitKey(serverId, agentId);
-      const catchUpComplete = isTimelineCatchUpComplete({
+      const shouldMarkAuthoritativeHistoryApplied = isTimelineResumeSnapshotAuthoritative({
         direction: payload.direction,
         hasNewer: payload.hasNewer,
         error: payload.error,
       });
-      const shouldMarkAuthoritativeHistoryApplied =
-        payload.direction === "tail" || (payload.direction === "after" && catchUpComplete);
 
       // Read current store state
       const session = useSessionStore.getState().sessions[serverId];
       const isInitializing = session?.initializingAgents.get(agentId) === true;
       const activeInitDeferred = getInitDeferred(initKey);
       const hasActiveInitDeferred = Boolean(activeInitDeferred);
-      const currentCursor = session?.agentTimelineCursor.get(agentId);
-      const currentTail = session?.agentStreamTail.get(agentId) ?? [];
+      const timeline = selectAgentTimelineState(session, agentId);
+      const currentCursor =
+        timeline.status === "synced" ? (timeline.range ?? undefined) : undefined;
+      const currentTail = timeline.status === "cold" ? [] : timeline.items;
       const currentHead = session?.agentStreamHead.get(agentId) ?? [];
-
-      setAgentTimelineHasOlder(serverId, (prev) => {
-        if (prev.get(agentId) === payload.hasOlder) {
-          return prev;
-        }
-        const next = new Map(prev);
-        next.set(agentId, payload.hasOlder);
-        return next;
-      });
+      const sendingClientMessageIds = getSendingClientMessageIds(
+        session?.messageSubmissions.get(agentId),
+      );
 
       // Call pure reducer
       const result = processTimelineResponse({
@@ -677,6 +606,7 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
         isInitializing,
         hasActiveInitDeferred,
         initRequestDirection: activeInitDeferred?.requestDirection ?? "tail",
+        sendingClientMessageIds,
       });
 
       if (result.error) {
@@ -690,17 +620,23 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
         return;
       }
 
-      applyTimelineStreamPatches({
-        result,
-        agentId,
-        serverId,
-        currentTail,
-        currentHead,
-        setAgentStreamTail,
-        setAgentStreamHead,
-        clearAgentStreamHead,
-        setAgentTimelineCursor,
+      if (result.commit === "discard") {
+        if (result.acknowledgedClientMessageIds.length > 0) {
+          setAgentStreamState(serverId, agentId, {
+            acknowledgedClientMessageIds: result.acknowledgedClientMessageIds,
           });
+        }
+        markAgentHistorySynchronized(serverId, agentId);
+      } else {
+        applyAgentTimelineResponseState(serverId, agentId, {
+          items: result.tail,
+          head: result.head,
+          range: result.cursorChanged ? (result.cursor ?? null) : (currentCursor ?? null),
+          older: result.older,
+          synchronized: shouldMarkAuthoritativeHistoryApplied,
+          acknowledgedClientMessageIds: result.acknowledgedClientMessageIds,
+        });
+      }
 
       executeTimelineSideEffects({
         sideEffects: result.sideEffects,
@@ -715,20 +651,14 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
         serverId,
         shouldMarkAuthoritativeHistoryApplied,
         setInitializingAgents,
-        setAgentAuthoritativeHistoryApplied,
-        markAgentHistorySynchronized,
       });
     },
     [
-      clearAgentStreamHead,
+      applyAgentTimelineResponseState,
       markAgentHistorySynchronized,
       recoverTimelineGap,
       serverId,
-      setAgentAuthoritativeHistoryApplied,
-      setAgentStreamHead,
-      setAgentStreamTail,
-      setAgentTimelineCursor,
-      setAgentTimelineHasOlder,
+      setAgentStreamState,
       setInitializingAgents,
     ],
   );
@@ -741,16 +671,10 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
     const sync = createViewedTimelineSync({
       initialDeliveryMode,
       setSubscription: (agentIds) => client.setAgentTimelineSubscription(agentIds),
-      readCursor: (agentId) =>
-        useSessionStore.getState().sessions[serverId]?.agentTimelineCursor.get(agentId),
-      hasAuthoritativeHistory: (agentId) =>
-        useSessionStore
-          .getState()
-          .sessions[serverId]?.agentAuthoritativeHistoryApplied.get(agentId) === true,
       fetchPage: async (agentId, request) => {
         const session = useSessionStore.getState().sessions[serverId];
         const initKey = getInitKey(serverId, agentId);
-        const shouldInitialize = session?.agentAuthoritativeHistoryApplied.get(agentId) !== true;
+        const shouldInitialize = selectAgentTimelineState(session, agentId).status !== "synced";
         if (shouldInitialize) {
           if (!getInitDeferred(initKey)) {
             const deferred = createInitDeferred(initKey, request.direction ?? "tail");
@@ -802,13 +726,20 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
     viewedTimelineSyncRef.current?.setConnected(isConnected);
   }, [isConnected]);
 
+  useEffect(
+    () =>
+      getHostRuntimeStore().subscribeAgentStoppedRunning(serverId, (agentId) => {
+        viewedTimelineSyncRef.current?.reconcileAgent(agentId);
+      }),
+    [serverId],
+  );
+
   // Daemon message handlers - directly update Zustand store
   useEffect(() => {
     const agentStreamReducerQueue = createSessionAgentStreamReducerQueue({
       serverId,
       setAgentStreamState,
       setAgentTimelineCursor,
-      setAgents,
       recoverTimelineGap,
     });
 
@@ -825,7 +756,12 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
       ) {
         voiceRuntime?.onTurnEvent(serverId, agentId, event.type);
       }
-
+      const turnLiveness = deriveAgentStreamTurnLiveness([
+        { event: streamEvent, seq, epoch, timestamp: parsedTimestamp },
+      ]);
+      if (turnLiveness.length > 0) {
+        applyAgentTurnLiveness(serverId, agentId, turnLiveness);
+      }
       agentStreamReducerQueue.enqueue(agentId, {
         event: streamEvent,
         seq,
@@ -1170,6 +1106,7 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
     setAgentStreamTail,
     setAgentStreamHead,
     setAgentStreamState,
+    applyAgentTurnLiveness,
     clearAgentStreamHead,
     setAgentTimelineCursor,
     setInitializingAgents,

packages/app/src/contexts/session-status-tracking.test.ts

@@ -8,6 +8,7 @@ function createAgent(status: Agent["status"]): Agent {
     id: "agent-1",
     provider: "codex",
     status,
+    activeTurn: null,
     createdAt: new Date(0),
     updatedAt: new Date(0),
     lastUserMessageAt: null,

packages/app/src/hooks/use-agent-initialization.test.ts

@@ -49,7 +49,7 @@ afterEach(() => {
 });
 
 describe("ensureAgentIsInitialized", () => {
-  it("requests bounded projected catch-up after the current cursor when authoritative history is loaded", () => {
+  it("requests a bounded projected tail when authoritative history is loaded", () => {
     const client = new FakeDaemonClient();
     const runtime = new FakeTimelineRuntime();
     useSessionStore.getState().initializeSession(serverId, client as never);
@@ -74,14 +74,13 @@ describe("ensureAgentIsInitialized", () => {
         serverId,
         agentId,
         request: {
-          direction: "after",
-          cursor: { epoch: "epoch-1", seq: 42 },
+          direction: "tail",
           limit: TIMELINE_FETCH_PAGE_SIZE,
           projection: "projected",
         },
       },
     ]);
-    expect(getInitDeferred(getInitKey(serverId, agentId))?.requestDirection).toBe("after");
+    expect(getInitDeferred(getInitKey(serverId, agentId))?.requestDirection).toBe("tail");
   });
 
   it("requests a bounded projected tail when no authoritative cursor is available", () => {
@@ -111,6 +110,47 @@ describe("ensureAgentIsInitialized", () => {
     expect(getInitDeferred(getInitKey(serverId, agentId))?.requestDirection).toBe("tail");
   });
 
+  it("requests a bounded projected tail after restoring painted replica items", () => {
+    const client = new FakeDaemonClient();
+    const runtime = new FakeTimelineRuntime();
+    useSessionStore.getState().restoreSessionReplica(serverId, {
+      agents: new Map(),
+      workspaces: new Map(),
+      projects: new Map(),
+      timeline: {
+        agentId,
+        items: [
+          {
+            kind: "assistant_message",
+            id: "painted-item",
+            text: "Painted before hydration",
+            timestamp: new Date("2026-07-27T10:00:00.000Z"),
+          },
+        ],
+      },
+    });
+
+    void ensureAgentIsInitialized({
+      serverId,
+      agentId,
+      client: client as never,
+      runtime,
+      setAgentInitializing: bindSetAgentInitializing(),
+    });
+
+    expect(runtime.requests).toEqual([
+      {
+        serverId,
+        agentId,
+        request: {
+          direction: "tail",
+          limit: TIMELINE_FETCH_PAGE_SIZE,
+          projection: "projected",
+        },
+      },
+    ]);
+  });
+
   it("times out initialization after 65 seconds", async () => {
     vi.useFakeTimers();
     const client = new FakeDaemonClient();

packages/app/src/hooks/use-agent-initialization.ts

@@ -11,7 +11,7 @@ import {
   refreshInitTimeout,
 } from "@/utils/agent-initialization";
 import { getHostRuntimeStore, type HostRuntimeStore } from "@/runtime/host-runtime";
-import { planInitialAgentTimelineSync, planTimelineTailFetch } from "@/timeline/timeline-sync-plan";
+import { planTimelineTailFetch } from "@/timeline/timeline-sync-plan";
 import { i18n } from "@/i18n/i18next";
 
 export type SetAgentInitializing = (agentId: string, initializing: boolean) => void;
@@ -51,10 +51,7 @@ export function ensureAgentIsInitialized(input: EnsureAgentIsInitializedInput):
     return existing.promise;
   }
 
-  const session = useSessionStore.getState().sessions[serverId];
-  const cursor = session?.agentTimelineCursor.get(agentId);
-  const hasAuthoritativeHistory = session?.agentAuthoritativeHistoryApplied.get(agentId) === true;
-  const timelineRequest = planInitialAgentTimelineSync({ cursor, hasAuthoritativeHistory });
+  const timelineRequest = planTimelineTailFetch();
 
   const deferred = createInitDeferred(key, timelineRequest.direction);
   refreshAgentInitializationTimeout({ key, agentId, setAgentInitializing });

packages/app/src/hooks/use-agent-screen-state-machine.test.ts

@@ -17,6 +17,7 @@ function createAgent(id: string): Agent {
     id,
     provider: "claude",
     status: "running",
+    activeTurn: { turnId: "turn-1", startedAt: now },
     createdAt: now,
     updatedAt: now,
     lastUserMessageAt: now,

packages/app/src/hooks/use-archive-agent.test.ts

@@ -41,6 +41,7 @@ function makeAgent(overrides: Partial<Agent> = {}): Agent {
     labels: {},
     archivedAt: null,
     ...overrides,
+    activeTurn: overrides.activeTurn ?? null,
   };
 }
 

packages/app/src/hooks/use-load-older-agent-history.test.ts

@@ -84,7 +84,7 @@ describe("loadOlderAgentHistory", () => {
     const client = createClient();
     const inFlight = createInFlight();
 
-    await loadOlderAgentHistory(agentId, {
+    const started = await loadOlderAgentHistory(agentId, {
       client,
       cursor: undefined,
       hasOlder: true,
@@ -94,13 +94,14 @@ describe("loadOlderAgentHistory", () => {
 
     expect(client.calls).toEqual([]);
     expect(inFlight.values).toEqual([false]);
+    expect(started).toBe(false);
   });
 
   it("no-ops when the daemon says no older history exists", async () => {
     const client = createClient();
     const inFlight = createInFlight();
 
-    await loadOlderAgentHistory(agentId, {
+    const started = await loadOlderAgentHistory(agentId, {
       client,
       cursor: someCursor,
       hasOlder: false,
@@ -110,13 +111,14 @@ describe("loadOlderAgentHistory", () => {
 
     expect(client.calls).toEqual([]);
     expect(inFlight.values).toEqual([false]);
+    expect(started).toBe(false);
   });
 
   it("no-ops when a request is already in flight", async () => {
     const client = createClient();
     const inFlight = createInFlight(true);
 
-    await loadOlderAgentHistory(agentId, {
+    const started = await loadOlderAgentHistory(agentId, {
       client,
       cursor: someCursor,
       hasOlder: true,
@@ -126,13 +128,14 @@ describe("loadOlderAgentHistory", () => {
 
     expect(client.calls).toEqual([]);
     expect(inFlight.values).toEqual([true]);
+    expect(started).toBe(true);
   });
 
   it("requests the page before the current start cursor and clears in-flight on success", async () => {
     const client = createClient();
     const inFlight = createInFlight();
 
-    await loadOlderAgentHistory(agentId, {
+    const started = await loadOlderAgentHistory(agentId, {
       client,
       cursor: someCursor,
       hasOlder: true,
@@ -152,6 +155,7 @@ describe("loadOlderAgentHistory", () => {
       },
     ]);
     expect(inFlight.values).toEqual([false, true, false]);
+    expect(started).toBe(true);
   });
 
   it("shows a panel toast, warns, and clears in-flight on failure", async () => {

packages/app/src/hooks/use-load-older-agent-history.ts

@@ -2,7 +2,11 @@ import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import type { ToastApi } from "@/components/toast-host";
 import { i18n } from "@/i18n/i18next";
-import { useSessionStore, type AgentTimelineCursorState } from "@/stores/session-store";
+import {
+  selectAgentTimelineState,
+  useSessionStore,
+  type AgentTimelineCursorState,
+} from "@/stores/session-store";
 import { planTimelineOlderFetch } from "@/timeline/timeline-sync-plan";
 import { getHostRuntimeStore } from "@/runtime/host-runtime";
 
@@ -36,11 +40,14 @@ export interface LoadOlderAgentHistoryDeps {
 export async function loadOlderAgentHistory(
   agentId: string,
   deps: LoadOlderAgentHistoryDeps,
-): Promise<void> {
+): Promise<boolean> {
   const { client, cursor, hasOlder, isLoadingOlder, setInFlight, toast, logger, failedMessage } =
     deps;
-  if (!client || !cursor || !hasOlder || isLoadingOlder) {
-    return;
+  if (isLoadingOlder) {
+    return true;
+  }
+  if (!client || !cursor || !hasOlder) {
+    return false;
   }
 
   setInFlight(true);
@@ -58,6 +65,7 @@ export async function loadOlderAgentHistory(
   } finally {
     setInFlight(false);
   }
+  return true;
 }
 
 export function useLoadOlderAgentHistory({
@@ -70,15 +78,17 @@ export function useLoadOlderAgentHistory({
   toast?: ToastApi | null;
 }) {
   const { t } = useTranslation();
-  const hasOlder =
-    useSessionStore((state) => state.sessions[serverId]?.agentTimelineHasOlder.get(agentId)) ===
-    true;
+  const hasOlder = useSessionStore((state) => {
+    const timeline = selectAgentTimelineState(state.sessions[serverId], agentId);
+    return timeline.status === "synced" && timeline.older === "available";
+  });
   const isLoadingOlder =
     useSessionStore((state) =>
       state.sessions[serverId]?.agentTimelineOlderFetchInFlight.get(agentId),
     ) === true;
   const progressKey = useSessionStore((state) => {
-    const cursor = state.sessions[serverId]?.agentTimelineCursor.get(agentId);
+    const timeline = selectAgentTimelineState(state.sessions[serverId], agentId);
+    const cursor = timeline.status === "synced" ? timeline.range : null;
     return cursor ? `${cursor.epoch}:${cursor.startSeq}` : null;
   });
   const setOlderFetchInFlight = useSessionStore(
@@ -99,17 +109,18 @@ export function useLoadOlderAgentHistory({
     [agentId, serverId, setOlderFetchInFlight],
   );
 
-  const loadOlder = useCallback(() => {
+  const loadOlder = useCallback(async (): Promise<boolean> => {
     const session = useSessionStore.getState().sessions[serverId];
-    void loadOlderAgentHistory(agentId, {
+    const timeline = selectAgentTimelineState(session, agentId);
+    return await loadOlderAgentHistory(agentId, {
       client: session?.client
         ? {
             fetchAgentTimeline: (timelineAgentId, request) =>
               getHostRuntimeStore().fetchAgentTimeline(serverId, timelineAgentId, request),
           }
         : null,
-      cursor: session?.agentTimelineCursor.get(agentId),
-      hasOlder: session?.agentTimelineHasOlder.get(agentId) === true,
+      cursor: timeline.status === "synced" ? (timeline.range ?? undefined) : undefined,
+      hasOlder: timeline.status === "synced" && timeline.older === "available",
       isLoadingOlder: session?.agentTimelineOlderFetchInFlight.get(agentId) === true,
       setInFlight,
       toast,

packages/app/src/panels/agent-panel.tsx

@@ -25,6 +25,7 @@ import { FileDropZone } from "@/components/file-drop/file-drop-zone";
 import { useRetainedPanelActive } from "@/components/retained-panel";
 import { SidebarCallout } from "@/components/sidebar-callout";
 import { Composer } from "@/composer";
+import { getActiveMessageSubmissions } from "@/composer/submission/model";
 import { RewindComposerRestoreProvider } from "@/components/rewind/composer-restore";
 import { getProviderIcon } from "@/components/provider-icons";
 import {
@@ -71,7 +72,12 @@ import { WorkspaceDraftAgentTab } from "@/composer/draft/workspace-tab";
 import { useCreateFlowStore } from "@/stores/create-flow-store";
 import { buildDraftStoreKey, generateDraftId } from "@/stores/draft-keys";
 import { usePanelStore } from "@/stores/panel-store";
-import { type Agent, useSessionStore } from "@/stores/session-store";
+import {
+  selectAgentTimelineState,
+  selectAgentTurnPresentation,
+  type Agent,
+  useSessionStore,
+} from "@/stores/session-store";
 import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
 import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model";
 import type { Theme } from "@/styles/theme";
@@ -316,6 +322,7 @@ function useAgentPanelDescriptor(
         pendingPermissionCount: agent?.pendingPermissions.length ?? 0,
         requiresAttention: agent?.requiresAttention ?? false,
         attentionReason: agent?.attentionReason ?? null,
+        isTurnActive: selectAgentTurnPresentation(session, target.agentId).isActive,
       };
     }),
   );
@@ -331,7 +338,7 @@ function useAgentPanelDescriptor(
     icon,
     statusBucket: descriptorState.status
       ? deriveSidebarStateBucket({
-          status: descriptorState.status,
+          status: descriptorState.isTurnActive ? "running" : descriptorState.status,
           pendingPermissionCount: descriptorState.pendingPermissionCount,
           requiresAttention: descriptorState.requiresAttention,
           attentionReason: descriptorState.attentionReason,
@@ -442,6 +449,7 @@ export function useDraftPanelDescriptor(
 }
 
 const EMPTY_STREAM_ITEMS: StreamItem[] = [];
+const EMPTY_MESSAGE_SUBMISSIONS = [] as const;
 const EMPTY_PENDING_PERMISSIONS = new Map<string, PendingPermission>();
 const EMPTY_PENDING_PERMISSION_LIST: PendingPermission[] = [];
 
@@ -790,11 +798,12 @@ function ChatAgentContent({
   const historySyncGeneration = useSessionStore(
     (state) => state.sessions[serverId]?.historySyncGeneration ?? 0,
   );
-  const hasAppliedAuthoritativeHistory = useSessionStore((state) =>
+  const replicaTimelineStatus = useSessionStore((state) =>
     agentId
-      ? state.sessions[serverId]?.agentAuthoritativeHistoryApplied?.get(agentId) === true
-      : false,
+      ? selectAgentTimelineState(state.sessions[serverId], agentId).status
+      : ("cold" as const),
   );
+  const hasAppliedAuthoritativeHistory = replicaTimelineStatus === "synced";
   const agentHistorySyncGeneration = useSessionStore((state) =>
     agentId ? (state.sessions[serverId]?.agentHistorySyncGeneration?.get(agentId) ?? -1) : -1,
   );
@@ -830,7 +839,8 @@ function ChatAgentContent({
     kind: "idle",
   });
 
-  const hasHydratedHistoryBefore = hasAppliedAuthoritativeHistory;
+  const hasHydratedHistoryBefore =
+    hasAppliedAuthoritativeHistory || replicaTimelineStatus === "painted";
 
   const attentionController = useAgentAttentionClear({
     agentId,
@@ -1288,6 +1298,20 @@ const AgentStreamSection = memo(function AgentStreamSection({
   const streamItemsRaw = useSessionStore((state) =>
     agentId ? state.sessions[serverId]?.agentStreamTail?.get(agentId) : undefined,
   );
+  const pendingMessageSubmissions = useSessionStore(
+    useShallow((state) =>
+      agentId
+        ? getActiveMessageSubmissions(state.sessions[serverId]?.messageSubmissions.get(agentId))
+        : EMPTY_MESSAGE_SUBMISSIONS,
+    ),
+  );
+  const turnPresentation = useSessionStore(
+    useShallow((state) =>
+      agentId
+        ? selectAgentTurnPresentation(state.sessions[serverId], agentId)
+        : { isActive: false, isCancelling: false, startedAt: null, turnId: null },
+    ),
+  );
   const streamItems = streamItemsRaw ?? EMPTY_STREAM_ITEMS;
   const pendingPermissionList = useStoreWithEqualityFn(
     useSessionStore,
@@ -1327,6 +1351,8 @@ const AgentStreamSection = memo(function AgentStreamSection({
       routeBottomAnchorRequest={routeBottomAnchorRequest}
       isAuthoritativeHistoryReady={hasAppliedAuthoritativeHistory}
       toast={toast}
+      pendingMessageSubmissions={pendingMessageSubmissions}
+      turnPresentation={turnPresentation}
       onOpenWorkspaceFile={onOpenWorkspaceFile}
     />
   );

packages/app/src/panels/provider-subagent-panel.tsx

@@ -20,6 +20,7 @@ import type { PendingPermission } from "@/types/shared";
 import type { StreamItem } from "@/types/stream";
 import { deriveSidebarStateBucket } from "@/utils/sidebar-agent-state";
 import { TIMELINE_FETCH_PAGE_SIZE } from "@/timeline/timeline-fetch-policy";
+import type { TurnPresentation } from "@/timeline/turn-liveness";
 
 const EMPTY_PERMISSIONS = new Map<string, PendingPermission>();
 const EMPTY_STREAM_ITEMS: StreamItem[] = [];
@@ -108,10 +109,12 @@ function ProviderSubagentPanel() {
       .catch(() => undefined);
   }, [client, serverId, supported, target.parentAgentId, target.subagentId]);
 
-  const loadOlder = useCallback(() => {
-    if (!client || !supported || isLoadingOlder || !timeline?.hasOlder || !timeline.epoch) return;
+  const loadOlder = useCallback((): boolean => {
+    if (!client || !supported || isLoadingOlder || !timeline?.hasOlder || !timeline.epoch) {
+      return false;
+    }
     const firstSeq = timeline.rows.size ? Math.min(...timeline.rows.keys()) : null;
-    if (firstSeq === null) return;
+    if (firstSeq === null) return false;
     setIsLoadingOlder(true);
     void client
       .fetchProviderSubagentTimeline(target.parentAgentId, target.subagentId, {
@@ -125,6 +128,7 @@ function ProviderSubagentPanel() {
       })
       .catch(() => undefined)
       .finally(() => setIsLoadingOlder(false));
+    return true;
   }, [
     client,
     isLoadingOlder,
@@ -159,6 +163,15 @@ function ProviderSubagentPanel() {
     }),
     [isLoadingOlder, loadOlder, progressKey, timeline?.hasOlder],
   );
+  const turnPresentation = useMemo<TurnPresentation>(
+    () => ({
+      isActive: descriptor?.status === "running",
+      isCancelling: false,
+      startedAt: null,
+      turnId: null,
+    }),
+    [descriptor?.status],
+  );
 
   if (serverInfo && !supported) {
     return (
@@ -176,6 +189,7 @@ function ProviderSubagentPanel() {
         context={streamContext}
         streamItems={timeline?.tail ?? EMPTY_STREAM_ITEMS}
         streamHead={timeline?.head ?? EMPTY_STREAM_ITEMS}
+        turnPresentation={turnPresentation}
         pendingPermissions={EMPTY_PERMISSIONS}
         isAuthoritativeHistoryReady
         onOpenWorkspaceFile={openFileInWorkspace}

packages/app/src/runtime/directory-sync/index.test.ts

@@ -92,7 +92,7 @@ function createDirectory(serverId: string): {
   serverIds.add(serverId);
   const client = new FakeDirectoryClient();
   const directory = new DirectorySync(serverId, {
-    drainQueuedAgentMessage: () => undefined,
+    onAgentStoppedRunning: () => undefined,
     markAgentLoading: () => undefined,
     markAgentReady: () => undefined,
     markAgentError: () => undefined,

packages/app/src/runtime/directory-sync/index.ts

@@ -81,13 +81,13 @@ export class DirectorySync {
   constructor(
     private readonly serverId: string,
     private readonly callbacks: {
-      drainQueuedAgentMessage: (agentId: string) => void;
+      onAgentStoppedRunning: (agentId: string) => void;
       markAgentLoading: () => void;
       markAgentReady: () => void;
       markAgentError: (error: string) => void;
     },
   ) {
-    this.agents = new AgentDirectoryReplica(serverId, callbacks.drainQueuedAgentMessage);
+    this.agents = new AgentDirectoryReplica(serverId, callbacks.onAgentStoppedRunning);
     this.workspaces = new WorkspaceDirectoryReplica(serverId);
   }
 

packages/app/src/runtime/host-runtime.test.ts

@@ -80,7 +80,9 @@ class FakeDaemonClient {
     this.setConnectionState({ status: "disconnected", reason: "client_closed" });
   }
 
-  async sendAgentMessage(...args: Parameters<DaemonClient["sendAgentMessage"]>): Promise<void> {
+  async sendAgentMessage(
+    ...args: Parameters<DaemonClient["sendAgentMessage"]>
+  ): ReturnType<DaemonClient["sendAgentMessage"]> {
     this.sentAgentMessages.push(args);
     for (const waiter of this.sentMessageWaiters) waiter();
     const response = this.sendAgentMessageResponses.shift();
@@ -2259,6 +2261,72 @@ describe("HostRuntimeStore", () => {
     useSessionStore.getState().clearSession(host.serverId);
   });
 
+  it("submits an automatically drained message through the submission producer", async () => {
+    const host = makeHost({ serverId: "srv_drain_submission" });
+    const fakeClient = new FakeDaemonClient();
+    const send = new Deferred<void>();
+    fakeClient.sendAgentMessageResponses.push(send.promise);
+    const store = new HostRuntimeStore({
+      deps: {
+        createClient: () => fakeClient as unknown as DaemonClient,
+        connectToDaemon: async () => ({
+          client: fakeClient as unknown as DaemonClient,
+          serverId: host.serverId,
+          hostname: null,
+        }),
+        getClientId: async () => "cid_drain_submission",
+      },
+    });
+    const sessionStore = useSessionStore.getState();
+    sessionStore.initializeSession(host.serverId, fakeClient as unknown as DaemonClient, 1);
+    sessionStore.updateSessionServerInfo(host.serverId, {
+      serverId: host.serverId,
+      hostname: null,
+      version: null,
+      features: { canonicalSubmittedPrompts: true },
+    });
+    sessionStore.setQueuedMessages(
+      host.serverId,
+      new Map([
+        [
+          "agent",
+          [
+            {
+              id: "queued-with-attachment",
+              text: "read this file",
+              attachments: [
+                {
+                  kind: "workspace_file" as const,
+                  path: "src/main.ts",
+                  selection: { kind: "whole_file" as const },
+                },
+              ],
+            },
+          ],
+        ],
+      ]),
+    );
+
+    store.drainQueuedAgentMessage(host.serverId, "agent");
+    await fakeClient.waitForSentMessages(1);
+
+    // The row and the pending submission must exist while the RPC is still in flight —
+    // the user sees their message and the working footer immediately, exactly as when
+    // they press send.
+    const session = useSessionStore.getState().sessions[host.serverId];
+    const tail = session?.agentStreamTail.get("agent") ?? [];
+    expect(tail).toHaveLength(1);
+    expect(tail[0]).toMatchObject({
+      kind: "user_message",
+      text: "read this file",
+      attachments: [{ type: "text", title: "main.ts", text: "Workspace file: src/main.ts" }],
+    });
+    expect(session?.messageSubmissions.get("agent")).toBeDefined();
+
+    send.resolve();
+    useSessionStore.getState().clearSession(host.serverId);
+  });
+
   it("restores an automatically drained message when sending fails", async () => {
     const host = makeHost({ serverId: "srv_failed_queue_drain" });
     const fakeClient = new FakeDaemonClient();
@@ -2629,6 +2697,12 @@ describe("HostRuntimeStore", () => {
       }).agent;
       const staleAgent: Agent = {
         ...stale,
+        activeTurn: stale.activeTurn
+          ? {
+              turnId: stale.activeTurn.turnId,
+              startedAt: stale.activeTurn.startedAt ? new Date(stale.activeTurn.startedAt) : null,
+            }
+          : null,
         serverId: host.serverId,
         createdAt: new Date(stale.createdAt),
         updatedAt: new Date(stale.updatedAt),

packages/app/src/runtime/host-runtime.ts

@@ -49,11 +49,9 @@ import {
 } from "@/data/push-router";
 import { mountBrowserAutomationDaemonClientHandler } from "@/browser-automation/handler";
 import { schedulesQueryBaseKey } from "@/schedules/aggregated-schedules";
-import { sendQueuedComposerMessageNow } from "@/composer/actions";
-import {
-  resolveComposerAttachmentSubmitFormat,
-  splitComposerAttachmentsForSubmit,
-} from "@/composer/attachments/submit";
+import { dispatchComposerAgentMessage, sendQueuedComposerMessageNow } from "@/composer/actions";
+import { createMessageSubmissionWriter } from "@/composer/submission/writer";
+import { resolveComposerAttachmentSubmitFormat } from "@/composer/attachments/submit";
 import { encodeImages } from "@/utils/encode-images";
 import { DirectorySync, type RefreshAgentDirectoryResult } from "@/runtime/directory-sync";
 import { ReplicaCache } from "@/runtime/replica-cache";
@@ -1342,6 +1340,7 @@ interface AgentDirectoryRefreshInput {
 export class HostRuntimeStore {
   private controllers = new Map<string, HostRuntimeController>();
   private serverListeners = new Map<string, Set<() => void>>();
+  private agentStoppedRunningListeners = new Map<string, Set<(agentId: string) => void>>();
   private globalListeners = new Set<() => void>();
   private hostListListeners = new Set<() => void>();
   private version = 0;
@@ -1586,11 +1585,12 @@ export class HostRuntimeStore {
     rekeyMap(this.controllers, oldServerId, newServerId);
     rekeyMap(this.lastConnectionStatusByServer, oldServerId, newServerId);
     rekeyMap(this.directoryBootstrapInFlight, oldServerId, newServerId);
+    rekeyMap(this.agentStoppedRunningListeners, oldServerId, newServerId);
     this.replicaCache.reconcileServerId(oldServerId, newServerId);
     this.directorySyncByServer.get(oldServerId)?.dispose();
     this.directorySyncByServer.delete(oldServerId);
     const directory = new DirectorySync(newServerId, {
-      drainQueuedAgentMessage: (agentId) => this.drainQueuedAgentMessage(newServerId, agentId),
+      onAgentStoppedRunning: (agentId) => this.onAgentStoppedRunning(newServerId, agentId),
       markAgentLoading: () => controller.markAgentDirectorySyncLoading(),
       markAgentReady: () => controller.markAgentDirectorySyncReady(),
       markAgentError: (error) => controller.markAgentDirectorySyncError(error),
@@ -1927,8 +1927,7 @@ export class HostRuntimeStore {
       this.directorySyncByServer.set(
         host.serverId,
         new DirectorySync(host.serverId, {
-          drainQueuedAgentMessage: (agentId) =>
-            this.drainQueuedAgentMessage(host.serverId, agentId),
+          onAgentStoppedRunning: (agentId) => this.onAgentStoppedRunning(host.serverId, agentId),
           markAgentLoading: () => controller.markAgentDirectorySyncLoading(),
           markAgentReady: () => controller.markAgentDirectorySyncReady(),
           markAgentError: (error) => controller.markAgentDirectorySyncError(error),
@@ -2071,14 +2070,16 @@ export class HostRuntimeStore {
       submitMessage: async ({ text, attachments }) => {
         const supportsForgeAttachments =
           useSessionStore.getState().sessions[serverId]?.serverInfo?.features?.forgeSearch === true;
-        const wirePayload = splitComposerAttachmentsForSubmit(attachments, {
-          format: resolveComposerAttachmentSubmitFormat({ supportsForgeAttachments }),
-        });
-        const images = await encodeImages(wirePayload.images);
-        await client.sendAgentMessage(agentId, text, {
-          messageId: next.id,
-          ...(images && images.length > 0 ? { images } : {}),
-          attachments: wirePayload.attachments,
+        await dispatchComposerAgentMessage({
+          client,
+          agentId,
+          text,
+          attachments,
+          attachmentSubmitFormat: resolveComposerAttachmentSubmitFormat({
+            supportsForgeAttachments,
+          }),
+          encodeImages,
+          submission: createMessageSubmissionWriter(serverId),
         });
       },
     })
@@ -2125,6 +2126,18 @@ export class HostRuntimeStore {
     };
   }
 
+  subscribeAgentStoppedRunning(serverId: string, listener: (agentId: string) => void): () => void {
+    const listeners = this.agentStoppedRunningListeners.get(serverId) ?? new Set();
+    listeners.add(listener);
+    this.agentStoppedRunningListeners.set(serverId, listeners);
+    return () => {
+      const current = this.agentStoppedRunningListeners.get(serverId);
+      if (!current) return;
+      current.delete(listener);
+      if (current.size === 0) this.agentStoppedRunningListeners.delete(serverId);
+    };
+  }
+
   subscribeAll(listener: () => void): () => void {
     this.globalListeners.add(listener);
     return () => {
@@ -2233,6 +2246,13 @@ export class HostRuntimeStore {
       listener();
     }
   }
+
+  private onAgentStoppedRunning(serverId: string, agentId: string): void {
+    this.drainQueuedAgentMessage(serverId, agentId);
+    for (const listener of this.agentStoppedRunningListeners.get(serverId) ?? []) {
+      listener(agentId);
+    }
+  }
 }
 
 let singletonHostRuntimeStore: HostRuntimeStore | null = null;

packages/app/src/runtime/replica-cache/index.test.ts

@@ -4,9 +4,10 @@ import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
 import {
   normalizeProjectDescriptor,
   normalizeWorkspaceDescriptor,
+  selectAgentTimelineState,
   useSessionStore,
 } from "@/stores/session-store";
-import type { StreamItem } from "@/types/stream";
+import { createUserMessage, type StreamItem } from "@/types/stream";
 import { ReplicaCache, type ReplicaCacheStorage } from ".";
 
 const SERVER_ID = "cached-host";
@@ -173,23 +174,26 @@ describe("ReplicaCache", () => {
     await reader.restore();
 
     const session = useSessionStore.getState().sessions[SERVER_ID];
-    expect(session?.client).toBeNull();
-    expect(session?.hasHydratedAgents).toBe(false);
-    expect(session?.hasHydratedWorkspaces).toBe(false);
-    expect(Array.from(session?.agents.keys() ?? [])).toEqual(["agent-1"]);
-    expect(Array.from(session?.workspaces.keys() ?? [])).toEqual(["workspace-1"]);
-    expect(Array.from(session?.projects.keys() ?? [])).toEqual(["project-1"]);
-    expect(session?.agents.get("agent-1")?.updatedAt).toBeInstanceOf(Date);
-    expect(session?.workspaces.get("workspace-1")?.statusEnteredAt).toBeInstanceOf(Date);
-    expect(session?.workspaces.get("workspace-1")?.worktreeSlug).toBe("owned-worktree");
-    expect(session?.agentStreamTail.get("agent-1")).toEqual([message("message-1", "Cached")]);
-    expect(session?.agentAuthoritativeHistoryApplied.get("agent-1")).toBe(true);
-    expect(session?.agentTimelineCursor.get("agent-1")).toEqual({
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 12,
+    expect(session).toBeDefined();
+    if (!session) throw new Error("Expected restored session");
+    expect(session.client).toBeNull();
+    expect(session.hasHydratedAgents).toBe(false);
+    expect(session.hasHydratedWorkspaces).toBe(false);
+    expect(Array.from(session.agents.keys())).toEqual(["agent-1"]);
+    expect(Array.from(session.workspaces.keys())).toEqual(["workspace-1"]);
+    expect(Array.from(session.projects.keys())).toEqual(["project-1"]);
+    expect(session.agents.get("agent-1")?.updatedAt).toBeInstanceOf(Date);
+    expect(session.workspaces.get("workspace-1")?.statusEnteredAt).toBeInstanceOf(Date);
+    expect(session.workspaces.get("workspace-1")?.worktreeSlug).toBe("owned-worktree");
+    expect(session.agentStreamTail.get("agent-1")).toEqual([message("message-1", "Cached")]);
+    expect(session.agentAuthoritativeHistoryApplied).toEqual(new Map());
+    expect(session.agentTimelineCursor).toEqual(new Map());
+    expect(session.agentTimelineHasOlder).toEqual(new Map());
+    expect(session.agentHistorySyncGeneration).toEqual(new Map());
+    expect(selectAgentTimelineState(session, "agent-1")).toEqual({
+      status: "painted",
+      items: [message("message-1", "Cached")],
     });
-    expect(session?.agentTimelineHasOlder.get("agent-1")).toBe(true);
   });
 
   it("persists only the focused agent view with a short timeline tail", async () => {
@@ -233,6 +237,43 @@ describe("ReplicaCache", () => {
     expect(Array.from(session?.projects.keys() ?? [])).toEqual(["project-2"]);
     expect(Array.from(timelines?.keys() ?? [])).toEqual(["agent-2"]);
     expect(timelines?.get("agent-2")).toEqual(secondTimeline.slice(-50));
+
+    const persisted = JSON.parse(storage.values.get("@paseo:replica-cache") ?? "null") as {
+      version: number;
+      hosts: Array<{ timeline: Record<string, unknown> | null }>;
+    };
+    expect(persisted.version).toBe(3);
+    expect(Object.keys(persisted.hosts[0]?.timeline ?? {}).sort()).toEqual(["agentId", "items"]);
+  });
+
+  it("persists reconciled rows without caching unreconciled local presentations", async () => {
+    const storage = new MemoryStorage();
+    const cache = new ReplicaCache(storage);
+    cache.setHosts([SERVER_ID]);
+    seedSession();
+    const unreconciled = createUserMessage({
+      clientMessageId: "client-pending",
+      text: "Pending",
+      timestamp: new Date("2026-07-18T08:01:00.000Z"),
+    });
+    const reconciled = createUserMessage({
+      clientMessageId: "client-sent",
+      messageId: "provider-sent",
+      timelineCursor: { epoch: "epoch-1", seq: 11 },
+      text: "Sent",
+      timestamp: new Date("2026-07-18T08:01:30.000Z"),
+    });
+    useSessionStore
+      .getState()
+      .setAgentStreamTail(SERVER_ID, new Map([["agent-1", [unreconciled, reconciled]]]));
+
+    await cache.flush();
+    useSessionStore.getState().clearSession(SERVER_ID);
+    await cache.restore();
+
+    expect(useSessionStore.getState().sessions[SERVER_ID]?.agentStreamTail.get("agent-1")).toEqual([
+      reconciled,
+    ]);
   });
 
   it("evicts the least recently written host when the cache exceeds its byte budget", async () => {
@@ -260,14 +301,38 @@ describe("ReplicaCache", () => {
     expect(Object.keys(useSessionStore.getState().sessions).sort()).toEqual(["host-a", "host-c"]);
   });
 
-  it("drops malformed or unknown cache versions", async () => {
+  it("rejects version 1 cache data and overwrites it on flush", async () => {
     const storage = new MemoryStorage();
-    storage.values.set("@paseo:replica-cache", JSON.stringify({ version: 999, hosts: [] }));
+    storage.values.set(
+      "@paseo:replica-cache",
+      JSON.stringify({
+        version: 1,
+        hosts: [
+          {
+            serverId: SERVER_ID,
+            agents: [],
+            workspaces: [],
+            emptyProjects: [],
+            timeline: {
+              agentId: "agent-1",
+              items: [],
+              cursor: { epoch: "poisoned", startSeq: 1, endSeq: 100 },
+              hasOlder: false,
+            },
+          },
+        ],
+      }),
+    );
     const cache = new ReplicaCache(storage);
     cache.setHosts([SERVER_ID]);
 
     await cache.restore();
+    await cache.flush();
 
     expect(useSessionStore.getState().sessions[SERVER_ID]).toBeUndefined();
+    expect(JSON.parse(storage.values.get("@paseo:replica-cache") ?? "null")).toEqual({
+      version: 3,
+      hosts: [],
+    });
   });
 });

packages/app/src/runtime/replica-cache/index.ts

@@ -11,6 +11,7 @@ import {
 import {
   normalizeProjectDescriptor,
   normalizeWorkspaceDescriptor,
+  selectAgentTimelineState,
   useSessionStore,
   type Agent,
   type SessionReplica,
@@ -18,11 +19,11 @@ import {
   type ProjectDescriptor,
   type WorkspaceDescriptor,
 } from "@/stores/session-store";
-import type { StreamItem } from "@/types/stream";
+import { isUnreconciledLocalUserMessage, type StreamItem } from "@/types/stream";
 import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
 
 const STORAGE_KEY = "@paseo:replica-cache";
-const CACHE_VERSION = 1;
+const CACHE_VERSION = 3;
 const PERSIST_DELAY_MS = 750;
 const MAX_TIMELINE_ITEMS = 50;
 const MAX_CACHE_BYTES = 1024 * 1024;
@@ -37,14 +38,6 @@ const StoredAgentSchema = z.object({
 const StoredTimelineSchema = z.object({
   agentId: z.string(),
   items: z.unknown(),
-  cursor: z
-    .object({
-      epoch: z.string(),
-      startSeq: z.number().int().nonnegative(),
-      endSeq: z.number().int().nonnegative(),
-    })
-    .nullable(),
-  hasOlder: z.boolean(),
 });
 
 const StoredHostSchema = z.object({
@@ -142,8 +135,6 @@ function deserializeTimeline(stored: StoredHost["timeline"]): SessionReplica["ti
   return {
     agentId: stored.agentId,
     items: decoded,
-    cursor: stored.cursor,
-    hasOlder: stored.hasOlder,
   };
 }
 
@@ -403,14 +394,20 @@ export class ReplicaCache {
             (workspace) => workspace.workspaceDirectory === focusedAgent.cwd,
           ))
         : undefined;
-      const items = focusedAgentId ? session.agentStreamTail.get(focusedAgentId) : undefined;
+      const timelineState = focusedAgentId
+        ? selectAgentTimelineState(session, focusedAgentId)
+        : { status: "cold" as const };
+      const items =
+        timelineState.status === "cold"
+          ? undefined
+          : timelineState.items.filter(
+              (item) => item.kind !== "user_message" || !isUnreconciledLocalUserMessage(item),
+            );
       const timeline =
         focusedAgent && items
           ? {
               agentId: focusedAgent.id,
               items: encodeDates(items.slice(-MAX_TIMELINE_ITEMS)),
-              cursor: session.agentTimelineCursor.get(focusedAgent.id) ?? null,
-              hasOlder: session.agentTimelineHasOlder.get(focusedAgent.id) ?? false,
             }
           : null;
       const stored: StoredHost = {

packages/app/src/screens/workspace/workspace-tab-presentation.tsx

@@ -162,7 +162,11 @@ export function WorkspaceTabIcon({
 
   if (shouldShowLoader) {
     return (
-      <View style={agentIconWrapperStyle}>
+      <View
+        style={agentIconWrapperStyle}
+        accessibilityRole="progressbar"
+        accessibilityLabel="Agent running"
+      >
         <SyncedLoader size={size - 1} color={styles.syncedLoader.color} />
       </View>
     );

packages/app/src/stores/create-flow-store.ts

@@ -109,7 +109,10 @@ export const useCreateFlowStore = create<CreateFlowState>((set) => ({
     set((state) => {
       const next = Object.fromEntries(
         Object.entries(state.pendingByDraftId).filter(
-          ([, pending]) => pending.serverId !== serverId || pending.agentId !== agentId,
+          ([, pending]) =>
+            pending.lifecycle !== "sent" ||
+            pending.serverId !== serverId ||
+            pending.agentId !== agentId,
         ),
       );
       if (Object.keys(next).length === Object.keys(state.pendingByDraftId).length) {

packages/app/src/stores/draft-store/index.ts

@@ -8,6 +8,7 @@ import {
   persistAttachmentFromDataUrl,
   persistAttachmentFromFileUri,
 } from "@/attachments/service";
+import { collectRetainedAttachmentIds } from "@/attachments/gc-retention";
 import { useCreateFlowStore } from "@/stores/create-flow-store";
 import { useSessionStore, type SessionState } from "@/stores/session-store";
 import { useWorkspaceAttachmentsStore } from "@/attachments/workspace-attachments-store";
@@ -138,6 +139,9 @@ async function runAttachmentGc(): Promise<void> {
   for (const id of useDraftStore.getState().collectActiveAttachmentIds()) {
     referencedIds.add(id);
   }
+  for (const id of collectRetainedAttachmentIds()) {
+    referencedIds.add(id);
+  }
 
   const pendingByDraftId = useCreateFlowStore.getState().pendingByDraftId;
   for (const pendingCreate of Object.values(pendingByDraftId)) {

packages/app/src/stores/session-store.test.ts

@@ -5,9 +5,12 @@ import type { WorkspaceDescriptorPayload } from "@getpaseo/protocol/messages";
 
 import {
   normalizeWorkspaceDescriptor,
+  selectAgentTurnPresentation,
+  selectAgentTimelineState,
   useSessionStore,
   type WorkspaceDescriptor,
 } from "./session-store";
+import type { StreamItem } from "../types/stream";
 import { patchWorkspaceScripts } from "../contexts/session-workspace-scripts";
 
 function createWorkspace(
@@ -52,6 +55,288 @@ function getTestSessionReferences() {
   };
 }
 
+function submittedMessage(clientMessageId: string): Extract<StreamItem, { kind: "user_message" }> {
+  return {
+    kind: "user_message",
+    id: clientMessageId,
+    clientMessageId,
+    text: clientMessageId,
+    timestamp: new Date("2026-07-31T10:00:00.000Z"),
+  };
+}
+
+function hasSubmittedMessage(items: readonly StreamItem[] | undefined, clientMessageId: string) {
+  return items?.some(
+    (item) => item.kind === "user_message" && item.clientMessageId === clientMessageId,
+  );
+}
+
+function permutations<T>(values: readonly T[]): T[][] {
+  if (values.length === 0) return [[]];
+  return values.flatMap((value, index) =>
+    permutations([...values.slice(0, index), ...values.slice(index + 1)]).map((suffix) =>
+      [value].concat(suffix),
+    ),
+  );
+}
+
+describe("agent timeline state", () => {
+  it("commits canonical items, range, and older availability as one synced state", () => {
+    initializeTestSession();
+    const items: StreamItem[] = [
+      {
+        kind: "assistant_message",
+        id: "canonical-row",
+        text: "canonical",
+        timestamp: new Date("2026-07-27T10:00:00.000Z"),
+      },
+    ];
+
+    useSessionStore.getState().applyAgentTimelineResponseState("test-server", "agent-1", {
+      items,
+      head: [],
+      range: { epoch: "epoch-1", startSeq: 51, endSeq: 100 },
+      older: "available",
+      synchronized: true,
+      acknowledgedClientMessageIds: [],
+    });
+
+    expect(
+      selectAgentTimelineState(useSessionStore.getState().sessions["test-server"], "agent-1"),
+    ).toEqual({
+      status: "synced",
+      items,
+      range: { epoch: "epoch-1", startSeq: 51, endSeq: 100 },
+      older: "available",
+    });
+  });
+
+  it("represents an empty authoritative timeline without inventing a range", () => {
+    initializeTestSession();
+    useSessionStore.getState().applyAgentTimelineResponseState("test-server", "agent-1", {
+      items: [],
+      head: [],
+      range: null,
+      older: "none",
+      synchronized: true,
+      acknowledgedClientMessageIds: [],
+    });
+
+    expect(
+      selectAgentTimelineState(useSessionStore.getState().sessions["test-server"], "agent-1"),
+    ).toEqual({ status: "synced", items: [], range: null, older: "none" });
+  });
+
+  it("preserves older availability when an applied response leaves it unchanged", () => {
+    initializeTestSession();
+    const store = useSessionStore.getState();
+    store.applyAgentTimelineResponseState("test-server", "agent-1", {
+      items: [],
+      head: [],
+      range: { epoch: "epoch-1", startSeq: 200, endSeq: 240 },
+      older: "available",
+      synchronized: true,
+      acknowledgedClientMessageIds: [],
+    });
+
+    store.applyAgentTimelineResponseState("test-server", "agent-1", {
+      items: [],
+      head: [],
+      range: { epoch: "epoch-1", startSeq: 200, endSeq: 240 },
+      older: "unchanged",
+      synchronized: false,
+      acknowledgedClientMessageIds: [],
+    });
+
+    expect(
+      selectAgentTimelineState(useSessionStore.getState().sessions["test-server"], "agent-1"),
+    ).toEqual({
+      status: "synced",
+      items: [],
+      range: { epoch: "epoch-1", startSeq: 200, endSeq: 240 },
+      older: "available",
+    });
+  });
+
+  it("stores turn liveness transitions without duplicating their policy", () => {
+    initializeTestSession();
+    const store = useSessionStore.getState();
+    store.applyAgentTurnLiveness("test-server", "agent-1", {
+      type: "snapshot",
+      activeTurn: { turnId: "turn-1", startedAt: null },
+    });
+    expect(store.getSession("test-server")?.agentTurnLiveness.get("agent-1")).toEqual({
+      phase: "open",
+      turnId: "turn-1",
+      startedAt: null,
+      cancellationRequestId: null,
+    });
+
+    store.applyAgentTurnLiveness("test-server", "agent-1", {
+      type: "snapshot",
+      activeTurn: null,
+    });
+    expect(store.getSession("test-server")?.agentTurnLiveness.has("agent-1")).toBe(false);
+  });
+});
+
+describe("message submission ordering", () => {
+  const agentId = "agent-1";
+  const clientMessageId = "client-1";
+  const startedAt = new Date("2026-07-31T10:00:01.000Z");
+  const steps = [
+    "accept",
+    "canonical-row",
+    "stream-open",
+    "snapshot-idle",
+    "snapshot-open",
+    "stream-close",
+  ] as const;
+
+  function applyStep(step: (typeof steps)[number]): void {
+    const store = useSessionStore.getState();
+    if (step === "accept") {
+      store.acceptAgentMessageSubmission("test-server", agentId, clientMessageId);
+      return;
+    }
+    if (step === "canonical-row") {
+      store.setAgentStreamState("test-server", agentId, {
+        acknowledgedClientMessageIds: [clientMessageId],
+      });
+      return;
+    }
+    if (step === "stream-open") {
+      store.applyAgentTurnLiveness("test-server", agentId, {
+        type: "stream_open",
+        turn: { turnId: "turn-1", startedAt },
+      });
+      return;
+    }
+    if (step === "snapshot-open") {
+      store.applyAgentTurnLiveness("test-server", agentId, {
+        type: "snapshot",
+        activeTurn: { turnId: "turn-1", startedAt },
+      });
+      return;
+    }
+    if (step === "snapshot-idle") {
+      store.applyAgentTurnLiveness("test-server", agentId, {
+        type: "snapshot",
+        activeTurn: null,
+      });
+      return;
+    }
+    store.applyAgentTurnLiveness("test-server", agentId, {
+      type: "stream_close",
+      turnId: "turn-1",
+    });
+  }
+
+  it("keeps every ordering active until its canonical row and settles at quiescence", () => {
+    const continuityViolations: string[] = [];
+    const settlementViolations: string[] = [];
+
+    for (const ordering of permutations(steps)) {
+      useSessionStore.getState().clearSession("test-server");
+      initializeTestSession();
+      useSessionStore
+        .getState()
+        .beginAgentMessageSubmission("test-server", agentId, submittedMessage(clientMessageId));
+      let canonicalObserved = false;
+
+      for (const step of ordering) {
+        applyStep(step);
+        canonicalObserved ||= step === "canonical-row";
+        const presentation = selectAgentTurnPresentation(
+          useSessionStore.getState().sessions["test-server"],
+          agentId,
+        );
+        if (!canonicalObserved && !presentation.isActive) {
+          continuityViolations.push(`${ordering.join(" → ")}: inactive after ${step}`);
+        }
+      }
+
+      const store = useSessionStore.getState();
+      store.acceptAgentMessageSubmission("test-server", agentId, clientMessageId);
+      store.setAgentStreamState("test-server", agentId, {
+        acknowledgedClientMessageIds: [clientMessageId],
+      });
+      store.applyAgentTurnLiveness("test-server", agentId, [
+        { type: "stream_close", turnId: "turn-1" },
+        { type: "snapshot", activeTurn: null },
+      ]);
+      const settled = selectAgentTurnPresentation(
+        useSessionStore.getState().sessions["test-server"],
+        agentId,
+      );
+      if (settled.isActive) settlementViolations.push(ordering.join(" → "));
+    }
+
+    expect({ continuityViolations, settlementViolations }).toEqual({
+      continuityViolations: [],
+      settlementViolations: [],
+    });
+  });
+
+  it("publishes the optimistic row and active presentation in one store notification", () => {
+    initializeTestSession();
+    const notifications: Array<{ hasOptimisticRow: boolean; isActive: boolean }> = [];
+    const unsubscribe = useSessionStore.subscribe((state) => {
+      const session = state.sessions["test-server"];
+      notifications.push({
+        hasOptimisticRow:
+          hasSubmittedMessage(session?.agentStreamTail.get(agentId), clientMessageId) === true,
+        isActive: selectAgentTurnPresentation(session, agentId).isActive,
+      });
+    });
+
+    useSessionStore
+      .getState()
+      .beginAgentMessageSubmission("test-server", agentId, submittedMessage(clientMessageId));
+    unsubscribe();
+
+    expect(notifications).toEqual([{ hasOptimisticRow: true, isActive: true }]);
+  });
+
+  it("keeps another unacknowledged submission active after one row is acknowledged", () => {
+    initializeTestSession();
+    const store = useSessionStore.getState();
+    store.beginAgentMessageSubmission("test-server", agentId, submittedMessage(clientMessageId));
+    store.beginAgentMessageSubmission("test-server", agentId, submittedMessage("client-2"));
+    store.acceptAgentMessageSubmission("test-server", agentId, clientMessageId);
+    store.setAgentStreamState("test-server", agentId, {
+      acknowledgedClientMessageIds: [clientMessageId],
+    });
+
+    expect(
+      selectAgentTurnPresentation(useSessionStore.getState().sessions["test-server"], agentId)
+        .isActive,
+    ).toBe(true);
+  });
+
+  it("reconciles a created-agent row without creating a submission transaction", () => {
+    initializeTestSession();
+    const message = submittedMessage(clientMessageId);
+
+    const handedOff = useSessionStore
+      .getState()
+      .handoffCreatedAgentUserMessage("test-server", agentId, message);
+
+    const session = useSessionStore.getState().sessions["test-server"];
+    expect({
+      handedOff,
+      tail: session?.agentStreamTail.get(agentId),
+      head: session?.agentStreamHead.get(agentId) ?? [],
+      submissions: session?.messageSubmissions.get(agentId) ?? [],
+    }).toEqual({
+      handedOff: true,
+      tail: [message],
+      head: [],
+      submissions: [],
+    });
+  });
+});
+
 describe("normalizeWorkspaceDescriptor", () => {
   it("normalizes workspace scripts and invalid activity timestamps", () => {
     const scripts = [

packages/app/src/stores/session-store.ts

@@ -5,10 +5,21 @@ import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
 import type { ViewedTimelineUiBridge } from "@/timeline/viewed-timeline-sync";
 import type { AgentDirectoryEntry } from "@/types/agent-directory";
 import {
+  appendSubmittedUserMessage,
   handoffCreatedAgentUserMessageToStream,
+  removeSubmittedUserMessage,
   type StreamItem,
   type UserMessageItem,
 } from "@/types/stream";
+import {
+  acceptMessageSubmission,
+  beginMessageSubmission,
+  getActiveMessageSubmissions,
+  observeMessageSubmissionCanonical,
+  rejectMessageSubmission,
+  type MessageSubmissionRecord,
+  type MessageSubmissionRejectionOutcome,
+} from "@/composer/submission/model";
 import type { PendingPermission } from "@/types/shared";
 import type { ComposerAttachment } from "@/attachments/types";
 import type { AgentLifecycleStatus } from "@getpaseo/protocol/agent-lifecycle";
@@ -41,6 +52,14 @@ import {
   buildWorkspaceAgentActivityIndex,
   type WorkspaceAgentActivity,
 } from "@/utils/workspace-agent-activity";
+import {
+  applyTurnLivenessTransition,
+  resolveTurnPresentation,
+  TURN_LIVENESS_IDLE,
+  type TurnLiveness,
+  type TurnPresentation,
+  type TurnLivenessTransition,
+} from "@/timeline/turn-liveness";
 
 // Re-export types that were in session-context
 export type MessageEntry =
@@ -97,6 +116,7 @@ export interface Agent {
   id: string;
   provider: AgentProvider;
   status: AgentLifecycleStatus;
+  activeTurn: { turnId: string | null; startedAt: Date | null } | null;
   createdAt: Date;
   updatedAt: Date;
   lastUserMessageAt: Date | null;
@@ -321,8 +341,6 @@ export interface AgentTimelineCursorState {
 export interface SessionReplicaTimeline {
   agentId: string;
   items: StreamItem[];
-  cursor: AgentTimelineCursorState | null;
-  hasOlder: boolean;
 }
 
 export interface SessionReplica {
@@ -332,6 +350,43 @@ export interface SessionReplica {
   timeline: SessionReplicaTimeline | null;
 }
 
+export type AgentTimelineState =
+  | { status: "cold" }
+  | { status: "painted"; items: StreamItem[] }
+  | {
+      status: "synced";
+      items: StreamItem[];
+      range: AgentTimelineCursorState | null;
+      older: "available" | "none";
+    };
+
+export function selectAgentTimelineState(
+  session: SessionState | undefined,
+  agentId: string,
+): AgentTimelineState {
+  if (!session) return { status: "cold" };
+  const items = session.agentStreamTail.get(agentId) ?? [];
+  if (session.agentAuthoritativeHistoryApplied.get(agentId) === true) {
+    return {
+      status: "synced",
+      items,
+      range: session.agentTimelineCursor.get(agentId) ?? null,
+      older: session.agentTimelineHasOlder.get(agentId) === true ? "available" : "none",
+    };
+  }
+  return items.length > 0 ? { status: "painted", items } : { status: "cold" };
+}
+
+export function selectAgentTurnPresentation(
+  session: SessionState | undefined,
+  agentId: string,
+): TurnPresentation {
+  return resolveTurnPresentation(
+    session?.agentTurnLiveness.get(agentId) ?? TURN_LIVENESS_IDLE,
+    getActiveMessageSubmissions(session?.messageSubmissions.get(agentId)).length > 0,
+  );
+}
+
 export type WorkspaceRestoreStatus = "restoring" | "failed" | "needs-host-upgrade";
 
 // Per-session state
@@ -364,6 +419,8 @@ export interface SessionState {
   // Stream state (head/tail model)
   agentStreamTail: Map<string, StreamItem[]>;
   agentStreamHead: Map<string, StreamItem[]>;
+  agentTurnLiveness: Map<string, TurnLiveness>;
+  messageSubmissions: Map<string, MessageSubmissionRecord[]>;
   agentTimelineCursor: Map<string, AgentTimelineCursorState>;
   agentTimelineHasOlder: Map<string, boolean>;
   agentTimelineOlderFetchInFlight: Map<string, boolean>;
@@ -454,8 +511,35 @@ interface SessionStoreActions {
   setAgentStreamState: (
     serverId: string,
     agentId: string,
-    state: { tail?: StreamItem[]; head?: StreamItem[] },
+    state: {
+      tail?: StreamItem[];
+      head?: StreamItem[];
+      acknowledgedClientMessageIds?: readonly string[];
+    },
   ) => void;
+  applyAgentTurnLiveness: (
+    serverId: string,
+    agentId: string,
+    transition: TurnLivenessTransition | readonly TurnLivenessTransition[],
+  ) => void;
+  beginAgentCancellation: (serverId: string, agentId: string) => number;
+  settleAgentCancellation: (serverId: string, agentId: string, requestId: number) => void;
+  clearAgentTurnLiveness: (serverId: string) => void;
+  beginAgentMessageSubmission: (
+    serverId: string,
+    agentId: string,
+    message: UserMessageItem,
+  ) => void;
+  acceptAgentMessageSubmission: (
+    serverId: string,
+    agentId: string,
+    clientMessageId: string,
+  ) => void;
+  rejectAgentMessageSubmission: (
+    serverId: string,
+    agentId: string,
+    clientMessageId: string,
+  ) => MessageSubmissionRejectionOutcome;
   handoffCreatedAgentUserMessage: (
     serverId: string,
     agentId: string,
@@ -483,6 +567,18 @@ interface SessionStoreActions {
     agentId: string,
     applied: boolean,
   ) => void;
+  applyAgentTimelineResponseState: (
+    serverId: string,
+    agentId: string,
+    state: {
+      items: StreamItem[];
+      head: StreamItem[];
+      range: AgentTimelineCursorState | null;
+      older: "available" | "none" | "unchanged";
+      synchronized: boolean;
+      acknowledgedClientMessageIds: string[];
+    },
+  ) => void;
 
   // Initializing agents
   setInitializingAgents: (
@@ -583,6 +679,8 @@ function createInitialSessionState(
     currentAssistantMessage: "",
     agentStreamTail: new Map(),
     agentStreamHead: new Map(),
+    agentTurnLiveness: new Map(),
+    messageSubmissions: new Map(),
     agentTimelineCursor: new Map(),
     agentTimelineHasOlder: new Map(),
     agentTimelineOlderFetchInFlight: new Map(),
@@ -647,6 +745,7 @@ function isSessionServerInfoUnchanged(input: {
 
 export const useSessionStore = create<SessionStore>()(
   subscribeWithSelector((set, get) => {
+    let nextCancellationRequestId = 0;
     const commitActivityUpdates: AgentLastActivityCommitter = (updates) => {
       set((prev) => {
         let nextActivity: Map<string, Date> | null = null;
@@ -699,16 +798,8 @@ export const useSessionStore = create<SessionStore>()(
           const session = createInitialSessionState(serverId, null);
           const timeline = replica.timeline;
           const agentStreamTail = new Map<string, StreamItem[]>();
-          const agentTimelineCursor = new Map<string, AgentTimelineCursorState>();
-          const agentTimelineHasOlder = new Map<string, boolean>();
-          const agentAuthoritativeHistoryApplied = new Map<string, boolean>();
-          const agentHistorySyncGeneration = new Map<string, number>();
           if (timeline) {
             agentStreamTail.set(timeline.agentId, timeline.items);
-            agentTimelineHasOlder.set(timeline.agentId, timeline.hasOlder);
-            agentAuthoritativeHistoryApplied.set(timeline.agentId, true);
-            agentHistorySyncGeneration.set(timeline.agentId, session.historySyncGeneration);
-            if (timeline.cursor) agentTimelineCursor.set(timeline.agentId, timeline.cursor);
           }
           const agentLastActivity = new Map(prev.agentLastActivity);
           for (const agent of replica.agents.values()) {
@@ -725,10 +816,6 @@ export const useSessionStore = create<SessionStore>()(
                 workspaces: replica.workspaces,
                 projects: replica.projects,
                 agentStreamTail,
-                agentTimelineCursor,
-                agentTimelineHasOlder,
-                agentAuthoritativeHistoryApplied,
-                agentHistorySyncGeneration,
               },
             },
             agentLastActivity,
@@ -1042,10 +1129,27 @@ export const useSessionStore = create<SessionStore>()(
             }
           }
 
-          if (!changedTail && !changedHead) {
+          const currentSubmissions = session.messageSubmissions.get(agentId) ?? [];
+          const observedSubmissions = observeMessageSubmissionCanonical(
+            currentSubmissions,
+            state.acknowledgedClientMessageIds ?? [],
+          );
+          const changedSubmissions = observedSubmissions !== currentSubmissions;
+
+          if (!changedTail && !changedHead && !changedSubmissions) {
             return prev;
           }
 
+          let messageSubmissions = session.messageSubmissions;
+          if (changedSubmissions) {
+            messageSubmissions = new Map(session.messageSubmissions);
+            if (observedSubmissions.length > 0) {
+              messageSubmissions.set(agentId, observedSubmissions);
+            } else {
+              messageSubmissions.delete(agentId);
+            }
+          }
+
           return {
             ...prev,
             sessions: {
@@ -1054,12 +1158,175 @@ export const useSessionStore = create<SessionStore>()(
                 ...session,
                 agentStreamTail: nextTail,
                 agentStreamHead: nextHead,
+                messageSubmissions,
               },
             },
           };
         });
       },
 
+      applyAgentTurnLiveness: (serverId, agentId, transition) => {
+        set((prev) => {
+          const session = prev.sessions[serverId];
+          if (!session) return prev;
+          const agentTurnLiveness = applyTurnLivenessTransition(
+            session.agentTurnLiveness,
+            agentId,
+            transition,
+          );
+          if (agentTurnLiveness === session.agentTurnLiveness) return prev;
+          return {
+            ...prev,
+            sessions: {
+              ...prev.sessions,
+              [serverId]: { ...session, agentTurnLiveness },
+            },
+          };
+        });
+      },
+
+      beginAgentCancellation: (serverId, agentId) => {
+        nextCancellationRequestId += 1;
+        const requestId = nextCancellationRequestId;
+        get().applyAgentTurnLiveness(serverId, agentId, {
+          type: "cancellation_started",
+          requestId,
+        });
+        return requestId;
+      },
+
+      settleAgentCancellation: (serverId, agentId, requestId) => {
+        get().applyAgentTurnLiveness(serverId, agentId, {
+          type: "cancellation_settled",
+          requestId,
+        });
+      },
+
+      clearAgentTurnLiveness: (serverId) => {
+        set((prev) => {
+          const session = prev.sessions[serverId];
+          if (!session || session.agentTurnLiveness.size === 0) return prev;
+          return {
+            ...prev,
+            sessions: {
+              ...prev.sessions,
+              [serverId]: { ...session, agentTurnLiveness: new Map() },
+            },
+          };
+        });
+      },
+
+      beginAgentMessageSubmission: (serverId, agentId, message) => {
+        set((prev) => {
+          const session = prev.sessions[serverId];
+          if (!session) return prev;
+          if (!message.clientMessageId) {
+            throw new Error("Beginning a message submission requires client identity");
+          }
+          const currentTail = session.agentStreamTail.get(agentId) ?? [];
+          const currentHead = session.agentStreamHead.get(agentId) ?? [];
+          const stream = appendSubmittedUserMessage({
+            tail: currentTail,
+            head: currentHead,
+            message,
+          });
+          const submissions = beginMessageSubmission(
+            session.messageSubmissions.get(agentId) ?? [],
+            { clientMessageId: message.clientMessageId },
+          );
+          const messageSubmissions = new Map(session.messageSubmissions);
+          messageSubmissions.set(agentId, submissions);
+          return {
+            ...prev,
+            sessions: {
+              ...prev.sessions,
+              [serverId]: {
+                ...session,
+                agentStreamTail:
+                  stream.tail === currentTail
+                    ? session.agentStreamTail
+                    : new Map(session.agentStreamTail).set(agentId, stream.tail),
+                agentStreamHead:
+                  stream.head === currentHead
+                    ? session.agentStreamHead
+                    : new Map(session.agentStreamHead).set(agentId, stream.head),
+                messageSubmissions,
+              },
+            },
+          };
+        });
+      },
+
+      acceptAgentMessageSubmission: (serverId, agentId, clientMessageId) => {
+        set((prev) => {
+          const session = prev.sessions[serverId];
+          if (!session) return prev;
+          const currentSubmissions = session.messageSubmissions.get(agentId) ?? [];
+          const submissions = acceptMessageSubmission(currentSubmissions, clientMessageId);
+          if (submissions === currentSubmissions) return prev;
+          const messageSubmissions = new Map(session.messageSubmissions);
+          if (submissions.length > 0) {
+            messageSubmissions.set(agentId, submissions);
+          } else {
+            messageSubmissions.delete(agentId);
+          }
+          return {
+            ...prev,
+            sessions: {
+              ...prev.sessions,
+              [serverId]: { ...session, messageSubmissions },
+            },
+          };
+        });
+      },
+
+      rejectAgentMessageSubmission: (serverId, agentId, clientMessageId) => {
+        let outcome: MessageSubmissionRejectionOutcome = "unknown";
+        set((prev) => {
+          const session = prev.sessions[serverId];
+          if (!session) return prev;
+          const currentTail = session.agentStreamTail.get(agentId) ?? [];
+          const currentHead = session.agentStreamHead.get(agentId) ?? [];
+          const currentSubmissions = session.messageSubmissions.get(agentId) ?? [];
+          const result = rejectMessageSubmission(currentSubmissions, clientMessageId);
+          outcome = result.outcome;
+          if (outcome === "unknown") return prev;
+          const stream =
+            outcome === "rejected"
+              ? removeSubmittedUserMessage({
+                  tail: currentTail,
+                  head: currentHead,
+                  clientMessageId,
+                })
+              : { tail: currentTail, head: currentHead };
+          const messageSubmissions = new Map(session.messageSubmissions);
+          if (result.submissions.length > 0) {
+            messageSubmissions.set(agentId, result.submissions);
+          } else {
+            messageSubmissions.delete(agentId);
+          }
+          return {
+            ...prev,
+            sessions: {
+              ...prev.sessions,
+              [serverId]: {
+                ...session,
+                agentStreamTail:
+                  stream.tail === currentTail
+                    ? session.agentStreamTail
+                    : new Map(session.agentStreamTail).set(agentId, stream.tail),
+                agentStreamHead:
+                  stream.head === currentHead
+                    ? session.agentStreamHead
+                    : new Map(session.agentStreamHead).set(agentId, stream.head),
+                messageSubmissions,
+              },
+            },
+          };
+        });
+        return outcome;
+      },
+
       handoffCreatedAgentUserMessage: (serverId, agentId, message) => {
         let didHandoff = false;
         set((prev) => {
@@ -1264,6 +1531,63 @@ export const useSessionStore = create<SessionStore>()(
         });
       },
 
+      applyAgentTimelineResponseState: (serverId, agentId, state) => {
+        set((prev) => {
+          const session = prev.sessions[serverId];
+          if (!session) return prev;
+
+          const nextTail = new Map(session.agentStreamTail);
+          nextTail.set(agentId, state.items);
+          const nextHead = new Map(session.agentStreamHead);
+          if (state.head.length > 0) nextHead.set(agentId, state.head);
+          else nextHead.delete(agentId);
+          const nextCursor = new Map(session.agentTimelineCursor);
+          if (state.range) nextCursor.set(agentId, state.range);
+          else nextCursor.delete(agentId);
+          const nextHasOlder = new Map(session.agentTimelineHasOlder);
+          if (state.older !== "unchanged") {
+            nextHasOlder.set(agentId, state.older === "available");
+          }
+          const nextAuthoritative = new Map(session.agentAuthoritativeHistoryApplied);
+          const nextSyncGeneration = new Map(session.agentHistorySyncGeneration);
+          const currentSubmissions = session.messageSubmissions.get(agentId) ?? [];
+          const observedSubmissions = observeMessageSubmissionCanonical(
+            currentSubmissions,
+            state.acknowledgedClientMessageIds,
+          );
+          let messageSubmissions = session.messageSubmissions;
+          if (observedSubmissions !== currentSubmissions) {
+            messageSubmissions = new Map(session.messageSubmissions);
+            if (observedSubmissions.length > 0) {
+              messageSubmissions.set(agentId, observedSubmissions);
+            } else {
+              messageSubmissions.delete(agentId);
+            }
+          }
+          if (state.synchronized) {
+            nextAuthoritative.set(agentId, true);
+            nextSyncGeneration.set(agentId, session.historySyncGeneration);
+          }
+
+          return {
+            ...prev,
+            sessions: {
+              ...prev.sessions,
+              [serverId]: {
+                ...session,
+                agentStreamTail: nextTail,
+                agentStreamHead: nextHead,
+                agentTimelineCursor: nextCursor,
+                agentTimelineHasOlder: nextHasOlder,
+                agentAuthoritativeHistoryApplied: nextAuthoritative,
+                agentHistorySyncGeneration: nextSyncGeneration,
+                messageSubmissions,
+              },
+            },
+          };
+        });
+      },
+
       // Initializing agents
       setInitializingAgents: (serverId, state) => {
         set((prev) => {

packages/app/src/stores/workspace-subagents-integration.test.ts

@@ -36,6 +36,7 @@ const AGENT_DEFAULTS: Agent = {
   id: "agent",
   provider: "codex",
   status: "idle",
+  activeTurn: null,
   createdAt: AGENT_TIMESTAMP,
   updatedAt: AGENT_TIMESTAMP,
   lastUserMessageAt: null,

packages/app/src/subagents/select.test.ts

@@ -13,6 +13,7 @@ const AGENT_DEFAULTS: Agent = {
   id: "agent",
   provider: "codex",
   status: "idle",
+  activeTurn: null,
   createdAt: AGENT_TIMESTAMP,
   updatedAt: AGENT_TIMESTAMP,
   lastUserMessageAt: null,

packages/app/src/timeline/timeline-sync-plan.test.ts

@@ -2,54 +2,14 @@ import { describe, expect, test } from "vitest";
 import { TIMELINE_FETCH_PAGE_SIZE } from "@/timeline/timeline-fetch-policy";
 import {
   isTimelineCatchUpComplete,
-  planInitialAgentTimelineSync,
-  planResumeTimelineSync,
+  isTimelineResumeSnapshotAuthoritative,
   planTimelineOlderFetch,
+  planTimelineTailFetch,
 } from "./timeline-sync-plan";
 
 describe("timeline sync planning", () => {
-  test("initial open without an authoritative cursor loads a bounded tail page", () => {
-    const plan = planInitialAgentTimelineSync({
-      cursor: undefined,
-      hasAuthoritativeHistory: false,
-    });
-
-    expect(plan).toEqual({
-      direction: "tail",
-      limit: TIMELINE_FETCH_PAGE_SIZE,
-      projection: "projected",
-    });
-  });
-
-  test("initial open with an authoritative cursor catches up after the cursor", () => {
-    const plan = planInitialAgentTimelineSync({
-      cursor: { epoch: "epoch-1", startSeq: 1, endSeq: 42 },
-      hasAuthoritativeHistory: true,
-    });
-
-    expect(plan).toEqual({
-      direction: "after",
-      cursor: { epoch: "epoch-1", seq: 42 },
-      limit: TIMELINE_FETCH_PAGE_SIZE,
-      projection: "projected",
-    });
-  });
-
-  test("resume with a cursor catches up after the cursor", () => {
-    const plan = planResumeTimelineSync({
-      cursor: { epoch: "epoch-1", startSeq: 1, endSeq: 100 },
-    });
-
-    expect(plan).toEqual({
-      direction: "after",
-      cursor: { epoch: "epoch-1", seq: 100 },
-      limit: TIMELINE_FETCH_PAGE_SIZE,
-      projection: "projected",
-    });
-  });
-
-  test("resume without a cursor loads a bounded tail page", () => {
-    const plan = planResumeTimelineSync({ cursor: undefined });
+  test("agent synchronization checks a bounded tail page", () => {
+    const plan = planTimelineTailFetch();
 
     expect(plan).toEqual({
       direction: "tail",
@@ -74,4 +34,28 @@ describe("timeline sync planning", () => {
       true,
     );
   });
+
+  test("only tail and completed forward pages carry an authoritative resume snapshot", () => {
+    expect(
+      isTimelineResumeSnapshotAuthoritative({
+        direction: "tail",
+        hasNewer: false,
+        error: null,
+      }),
+    ).toBe(true);
+    expect(
+      isTimelineResumeSnapshotAuthoritative({
+        direction: "after",
+        hasNewer: false,
+        error: null,
+      }),
+    ).toBe(true);
+    expect(
+      isTimelineResumeSnapshotAuthoritative({
+        direction: "before",
+        hasNewer: false,
+        error: null,
+      }),
+    ).toBe(false);
+  });
 });

packages/app/src/timeline/timeline-sync-plan.ts

@@ -5,12 +5,6 @@ export interface TimelineSyncCursor {
   seq: number;
 }
 
-export interface AgentTimelineCursorRange {
-  epoch: string;
-  startSeq: number;
-  endSeq: number;
-}
-
 export interface ProjectedTimelineTailFetchPlan {
   direction: "tail";
   limit: number;
@@ -40,27 +34,6 @@ export type ProjectedTimelineForwardFetchPlan =
   | ProjectedTimelineTailFetchPlan
   | ProjectedTimelineAfterFetchPlan;
 
-export function planInitialAgentTimelineSync(input: {
-  cursor: AgentTimelineCursorRange | undefined;
-  hasAuthoritativeHistory: boolean;
-}): ProjectedTimelineForwardFetchPlan {
-  if (input.hasAuthoritativeHistory && input.cursor) {
-    return planTimelineCatchUpAfter({ epoch: input.cursor.epoch, seq: input.cursor.endSeq });
-  }
-
-  return planTimelineTailFetch();
-}
-
-export function planResumeTimelineSync(input: {
-  cursor: AgentTimelineCursorRange | undefined;
-}): ProjectedTimelineForwardFetchPlan {
-  if (input.cursor) {
-    return planTimelineCatchUpAfter({ epoch: input.cursor.epoch, seq: input.cursor.endSeq });
-  }
-
-  return planTimelineTailFetch();
-}
-
 export function planTimelineCatchUpAfter(cursor: TimelineSyncCursor) {
   return {
     direction: "after",
@@ -98,3 +71,12 @@ export function isTimelineCatchUpComplete(input: {
 
   return input.direction !== "after" || !input.hasNewer;
 }
+
+export function isTimelineResumeSnapshotAuthoritative(input: {
+  direction: "tail" | "before" | "after";
+  hasNewer: boolean;
+  error: string | null;
+}): boolean {
+  if (input.error || input.direction === "before") return false;
+  return input.direction === "tail" || !input.hasNewer;
+}

packages/app/src/timeline/turn-liveness.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from "vitest";
+import { reduceTurnLiveness, resolveTurnPresentation, TURN_LIVENESS_IDLE } from "./turn-liveness";
+
+describe("turn activity", () => {
+  const startedAt = new Date("2026-07-31T10:00:00.000Z");
+
+  it("ignores a terminal event for another turn", () => {
+    const open = reduceTurnLiveness(TURN_LIVENESS_IDLE, {
+      type: "stream_open",
+      turn: { turnId: "turn-2", startedAt },
+    });
+
+    expect(reduceTurnLiveness(open, { type: "stream_close", turnId: "turn-1" })).toBe(open);
+  });
+
+  it("replaces activity from an authoritative snapshot", () => {
+    const open = reduceTurnLiveness(TURN_LIVENESS_IDLE, {
+      type: "stream_open",
+      turn: { turnId: "turn-1", startedAt },
+    });
+
+    expect(reduceTurnLiveness(open, { type: "snapshot", activeTurn: null })).toEqual(
+      TURN_LIVENESS_IDLE,
+    );
+  });
+
+  it("opens an autonomous turn from an authoritative snapshot", () => {
+    expect(
+      reduceTurnLiveness(TURN_LIVENESS_IDLE, {
+        type: "snapshot",
+        activeTurn: { turnId: "autonomous-turn-1", startedAt },
+      }),
+    ).toEqual({
+      phase: "open",
+      turnId: "autonomous-turn-1",
+      startedAt,
+      cancellationRequestId: null,
+    });
+  });
+
+  it("does not let an old cancel completion clear the current request", () => {
+    const first = reduceTurnLiveness(TURN_LIVENESS_IDLE, {
+      type: "cancellation_started",
+      requestId: 1,
+    });
+    const second = reduceTurnLiveness(first, { type: "cancellation_started", requestId: 2 });
+
+    expect(reduceTurnLiveness(second, { type: "cancellation_settled", requestId: 1 })).toBe(second);
+  });
+
+  it("keeps cancellation pending across submission-to-turn handoff", () => {
+    const canceling = reduceTurnLiveness(TURN_LIVENESS_IDLE, {
+      type: "cancellation_started",
+      requestId: 1,
+    });
+
+    expect(
+      reduceTurnLiveness(canceling, {
+        type: "stream_open",
+        turn: { turnId: "turn-1", startedAt },
+      }),
+    ).toEqual({
+      phase: "open",
+      turnId: "turn-1",
+      startedAt,
+      cancellationRequestId: 1,
+    });
+  });
+
+  it("keeps submission-only activity untimed", () => {
+    expect(resolveTurnPresentation(TURN_LIVENESS_IDLE, true)).toEqual({
+      isActive: true,
+      isCancelling: false,
+      startedAt: null,
+      turnId: null,
+    });
+  });
+});

packages/app/src/timeline/turn-liveness.ts

@@ -0,0 +1,125 @@
+export interface ActiveTurnIdentity {
+  turnId: string | null;
+  startedAt: Date | null;
+}
+
+export type TurnLiveness =
+  | { phase: "idle"; cancellationRequestId: number | null }
+  | {
+      phase: "open";
+      turnId: string | null;
+      startedAt: Date | null;
+      cancellationRequestId: number | null;
+    };
+
+export type TurnLivenessTransition =
+  | { type: "snapshot"; activeTurn: ActiveTurnIdentity | null }
+  | { type: "stream_open"; turn: ActiveTurnIdentity }
+  | { type: "stream_close"; turnId: string | null }
+  | { type: "cancellation_started"; requestId: number }
+  | { type: "cancellation_settled"; requestId: number }
+  | { type: "destructive_close" };
+
+export const TURN_LIVENESS_IDLE: TurnLiveness = {
+  phase: "idle",
+  cancellationRequestId: null,
+};
+
+export function readTurnLiveness(
+  turns: ReadonlyMap<string, TurnLiveness>,
+  agentId: string,
+): TurnLiveness {
+  return turns.get(agentId) ?? TURN_LIVENESS_IDLE;
+}
+
+export function applyTurnLivenessTransition(
+  turns: ReadonlyMap<string, TurnLiveness>,
+  agentId: string,
+  transition: TurnLivenessTransition | readonly TurnLivenessTransition[],
+): Map<string, TurnLiveness> {
+  const current = readTurnLiveness(turns, agentId);
+  const transitions = Array.isArray(transition) ? transition : [transition];
+  const next = transitions.reduce(reduceTurnLiveness, current);
+  if (next === current) return turns as Map<string, TurnLiveness>;
+  const updated = new Map(turns);
+  if (next.phase === "idle" && next.cancellationRequestId === null) updated.delete(agentId);
+  else updated.set(agentId, next);
+  return updated;
+}
+
+export interface TurnPresentation {
+  isActive: boolean;
+  isCancelling: boolean;
+  startedAt: Date | null;
+  turnId: string | null;
+}
+
+export function resolveTurnPresentation(
+  liveness: TurnLiveness,
+  hasActiveSubmission: boolean,
+): TurnPresentation {
+  if (liveness.phase === "open") {
+    return {
+      isActive: true,
+      isCancelling: liveness.cancellationRequestId !== null,
+      startedAt: liveness.startedAt,
+      turnId: liveness.turnId,
+    };
+  }
+  return {
+    isActive: hasActiveSubmission,
+    isCancelling: liveness.cancellationRequestId !== null,
+    startedAt: null,
+    turnId: null,
+  };
+}
+
+function closeTurn(current: TurnLiveness, turnId: string | null): TurnLiveness {
+  // COMPAT(agentTurnIdentity): added in v0.2.6, remove after 2027-01-31 once daemon floor >= v0.2.6.
+  const targetsDifferentIdentifiedTurn =
+    current.phase === "open" &&
+    turnId !== null &&
+    current.turnId !== null &&
+    turnId !== current.turnId;
+  return targetsDifferentIdentifiedTurn ? current : TURN_LIVENESS_IDLE;
+}
+
+function openTurn(current: TurnLiveness, activeTurn: ActiveTurnIdentity): TurnLiveness {
+  // COMPAT(agentTurnIdentity): added in v0.2.6, remove after 2027-01-31 once daemon floor >= v0.2.6.
+  const sameTurn =
+    current.phase === "open" &&
+    ((activeTurn.turnId !== null && current.turnId === activeTurn.turnId) ||
+      (activeTurn.turnId === null && current.turnId === null));
+  return {
+    phase: "open",
+    turnId: activeTurn.turnId,
+    startedAt: sameTurn ? (current.startedAt ?? activeTurn.startedAt) : activeTurn.startedAt,
+    cancellationRequestId:
+      sameTurn || current.phase === "idle" ? current.cancellationRequestId : null,
+  };
+}
+
+export function reduceTurnLiveness(
+  current: TurnLiveness,
+  transition: TurnLivenessTransition,
+): TurnLiveness {
+  if (transition.type === "destructive_close") return TURN_LIVENESS_IDLE;
+
+  if (transition.type === "cancellation_started") {
+    if (current.cancellationRequestId === transition.requestId) return current;
+    return { ...current, cancellationRequestId: transition.requestId };
+  }
+
+  if (transition.type === "cancellation_settled") {
+    if (current.cancellationRequestId !== transition.requestId) return current;
+    return { ...current, cancellationRequestId: null };
+  }
+
+  if (transition.type === "stream_close") {
+    return closeTurn(current, transition.turnId);
+  }
+
+  const activeTurn = transition.type === "snapshot" ? transition.activeTurn : transition.turn;
+  if (!activeTurn) return TURN_LIVENESS_IDLE;
+  return openTurn(current, activeTurn);
+}

packages/app/src/timeline/turn-time.test.ts

@@ -22,34 +22,17 @@ function assistant(id: string, timestamp: Date): StreamItem {
 }
 
 describe("deriveStreamTurnTiming", () => {
-  it("reserves a running footer for an optimistic prompt before the host starts the turn", () => {
-    const optimisticPrompt = {
-      ...user("optimistic", new Date("2026-05-15T00:00:00.000Z")),
-      optimistic: true as const,
-    };
+  it("starts elapsed time from the submitted prompt", () => {
+    const submittedAt = new Date("2026-05-15T00:00:00.000Z");
 
     const timing = deriveStreamTurnTiming({
-      agentStatus: "idle",
+      isTurnActive: true,
+      activeTurnStartedAt: submittedAt,
       tail: [],
-      head: [optimisticPrompt],
+      head: [user("submitted", submittedAt)],
     });
 
-    assert.equal(timing.isActive, true);
-  });
-
-  it("does not start elapsed time from an optimistic prompt", () => {
-    const optimisticPrompt = {
-      ...user("optimistic", new Date("2026-05-15T00:00:00.000Z")),
-      optimistic: true as const,
-    };
-
-    const timing = deriveStreamTurnTiming({
-      agentStatus: "running",
-      tail: [],
-      head: [optimisticPrompt],
-    });
-
-    assert.equal(timing.runningStartedAt, null);
+    assert.equal(timing.runningStartedAt, submittedAt);
   });
 
   it("uses the last user message as the running turn start", () => {
@@ -57,7 +40,8 @@ describe("deriveStreamTurnTiming", () => {
     const secondUserAt = new Date("2026-05-15T00:01:00.000Z");
 
     const timing = deriveStreamTurnTiming({
-      agentStatus: "running",
+      isTurnActive: true,
+      activeTurnStartedAt: secondUserAt,
       tail: [
         user("u1", firstUserAt),
         assistant("a1", new Date("2026-05-15T00:00:05.000Z")),
@@ -75,7 +59,8 @@ describe("deriveStreamTurnTiming", () => {
     const assistantAt = new Date("2026-05-15T00:00:07.000Z");
 
     const timing = deriveStreamTurnTiming({
-      agentStatus: "idle",
+      isTurnActive: false,
+      activeTurnStartedAt: null,
       tail: [
         user("u1", userAt),
         assistant("a1", assistantAt),
@@ -97,7 +82,8 @@ describe("deriveStreamTurnTiming", () => {
     const lastAssistantAt = new Date("2026-05-15T00:00:07.000Z");
 
     const timing = deriveStreamTurnTiming({
-      agentStatus: "idle",
+      isTurnActive: false,
+      activeTurnStartedAt: null,
       tail: [
         user("u1", userAt),
         assistant("a1", firstAssistantAt),