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

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 continued = settleHistoryStartPagination(pageApplied.state, {
+      ...visibleHistoryStart,
+      progressKey: "epoch-1:10",
     });
-    const returned = evaluateHistoryStartPagination(away.state, visibleHistoryStart);
 
-    expect([first.shouldLoad, away.shouldLoad, returned.shouldLoad]).toEqual([true, false, true]);
+    expect(continued.shouldLoad).toBe(true);
+    expect(isHistoryStartLoadingOperation(first.state)).toBe(true);
+    expect(isHistoryStartLoadingOperation(pageApplied.state)).toBe(true);
+    expect(isHistoryStartLoadingOperation(continued.state)).toBe(true);
   });
 
-  it("re-arms the same cursor when the user makes another upward edge gesture", () => {
+  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 interface HistoryStartPaginationInput {
+  distanceFromHistoryStart: number;
+  hasOlderHistory: boolean;
+  isLoadingOlderHistory: boolean;
+  isReady: boolean;
+  progressKey: string | null;
+}
+
+export interface HistoryStartPaginationTransition {
+  state: HistoryStartPaginationState;
+  shouldLoad: boolean;
 }
 
 export function createHistoryStartPaginationState(): HistoryStartPaginationState {
-  return { requestedProgressKey: null };
+  return { status: "dormant" };
+}
+
+export function isHistoryStartLoadingOperation(state: HistoryStartPaginationState): boolean {
+  return state.status === "loading" || state.status === "settling";
 }
 
 export function rearmHistoryStartPagination(
-  _state: HistoryStartPaginationState,
+  state: HistoryStartPaginationState,
 ): HistoryStartPaginationState {
-  return createHistoryStartPaginationState();
+  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: {
-    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 };
+  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();
-    evaluateHistoryStart();
+    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 ? (
-          <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+      <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 ? (
-          <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+      <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> {
-  const store = await getAttachmentStore();
-  await store.garbageCollect({ referencedIds: input.referencedIds });
+  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 });
+  })();
+  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 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 image = useAssistantImage({
+    source,
+    occurrenceKey,
+    client,
+    workspaceRoot,
+    serverId,
   });
-  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;
+  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 };
+    }
+    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);
         }
-      },
-    });
-    if (!didCancel) return;
-    setIsCancellingAgent(true);
+      })
+      .finally(() => {
+        settleAgentCancellation(serverId, targetAgentId, requestId);
+      });
     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({
-      value,
-      attachments,
-      hasExternalContent,
+    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),

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

@@ -9,18 +9,16 @@ export interface TurnTiming {
 export interface StreamTurnTiming {
   byAssistantId: Map<string, TurnTiming>;
   runningStartedAt: Date | null;
-  isActive: boolean;
 }
 
 export function deriveStreamTurnTiming(params: {
-  agentStatus: string;
+  isTurnActive: boolean;
+  activeTurnStartedAt: Date | null;
   tail: StreamItem[];
   head: StreamItem[];
 }): StreamTurnTiming {
   const byAssistantId = new Map<string, TurnTiming>();
   let currentUserAt: Date | null = null;
-  let currentAuthoritativeUserAt: Date | null = null;
-  let currentUserIsOptimistic = false;
   let currentLastItemAt: Date | null = null;
   let currentAssistantIds: string[] = [];
 
@@ -42,8 +40,6 @@ export function deriveStreamTurnTiming(params: {
     if (item.kind === "user_message") {
       flushCompletedTurn();
       currentUserAt = item.timestamp;
-      currentAuthoritativeUserAt = item.optimistic ? null : item.timestamp;
-      currentUserIsOptimistic = item.optimistic === true;
       currentLastItemAt = null;
       currentAssistantIds = [];
       return;
@@ -64,15 +60,13 @@ export function deriveStreamTurnTiming(params: {
     visitItem(item);
   }
 
-  const isRunning = params.agentStatus === "running";
-  const runningStartedAt = isRunning ? currentAuthoritativeUserAt : null;
-  if (params.agentStatus !== "running") {
+  const runningStartedAt = params.isTurnActive ? params.activeTurnStartedAt : null;
+  if (!params.isTurnActive) {
     flushCompletedTurn();
   }
 
   return {
     byAssistantId,
     runningStartedAt,
-    isActive: isRunning || currentUserIsOptimistic,
   };
 }

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

@@ -48,8 +48,6 @@ class TimelineWorld {
       this.releaseMembershipWaiter();
       return result.promise;
     },
-    readCursor: (agentId) => this.cursors.get(agentId),
-    hasAuthoritativeHistory: (agentId) => this.authoritativeHistory.has(agentId),
     fetchPage: async (agentId, request) => {
       const result = deferred<{
         hasNewer: boolean;
@@ -95,21 +93,10 @@ class TimelineWorld {
     agentId: string;
     resolve(fetch: TimelineFetch): void;
   }> = [];
-  private readonly cursors = new Map<string, { epoch: string; startSeq: number; endSeq: number }>();
-  private readonly authoritativeHistory = new Set<string>();
   private readonly errorWaiters: Array<(message: string) => void> = [];
   private readonly scheduled: Array<{ task: () => void; delayMs: number }> = [];
   private readonly retryWaiters: Array<(retry: () => void) => void> = [];
 
-  setCursor(agentId: string, endSeq: number): void {
-    this.cursors.set(agentId, { epoch: `epoch-${agentId}`, startSeq: 1, endSeq });
-    this.authoritativeHistory.add(agentId);
-  }
-
-  setLiveCursor(agentId: string, endSeq: number): void {
-    this.cursors.set(agentId, { epoch: `epoch-${agentId}`, startSeq: 1, endSeq });
-  }
-
   nextMembership(): Promise<MembershipRequest> {
     const request = this.memberships.shift();
     if (request) return Promise.resolve(request);
@@ -178,9 +165,8 @@ test("keeps hidden agents subscribed for thirty seconds", () => {
   expect(VIEWED_TIMELINE_UNSUBSCRIBE_GRACE_MS).toBe(30_000);
 });
 
-test("uses a tail fetch when a live cursor is not authoritative", async () => {
+test("uses a tail fetch when an agent becomes visible", async () => {
   const world = new TimelineWorld();
-  world.setLiveCursor("agent-a", 9);
   world.sync.setConnected(true);
   world.sync.replaceVisibleAgentIds("workspace", ["agent-a"]);
   const membership = await world.nextMembership();
@@ -191,6 +177,63 @@ test("uses a tail fetch when a live cursor is not authoritative", async () => {
   fetch.respond({ hasNewer: false });
 });
 
+test("a gap absorbed by a running tail is recovered after the tail completes", async () => {
+  const world = new TimelineWorld();
+  world.sync.setConnected(true);
+  world.sync.replaceVisibleAgentIds("workspace", ["agent-a"]);
+  const membership = await world.nextMembership();
+  membership.succeed();
+  const tail = await world.nextFetch("agent-a");
+
+  world.sync.recoverGap("agent-a", { epoch: "epoch-agent-a", endSeq: 9 });
+
+  world.expectNoPendingFetch();
+  tail.respond({ hasNewer: false });
+
+  const recovery = await world.nextFetch("agent-a");
+  expect(recovery.request).toEqual({
+    direction: "after",
+    cursor: { epoch: "epoch-agent-a", seq: 9 },
+    limit: 40,
+    projection: "projected",
+  });
+  recovery.respond({ hasNewer: false });
+  await vi.waitFor(() => expect(world.sync.getAgentTimelineStatus("agent-a")).toBe("ready"));
+});
+
+test("an idle reconciliation waits for an in-flight tail and fetches a fresh snapshot", async () => {
+  const world = new TimelineWorld();
+  world.sync.setConnected(true);
+  world.sync.replaceVisibleAgentIds("workspace", ["agent-a"]);
+  const membership = await world.nextMembership();
+  membership.succeed();
+  const initialTail = await world.nextFetch("agent-a");
+
+  world.sync.reconcileAgent("agent-a");
+
+  world.expectNoPendingFetch();
+  initialTail.respond({ hasNewer: false });
+
+  const reconciliation = await world.nextFetch("agent-a");
+  expect(reconciliation.request).toEqual({
+    direction: "tail",
+    limit: 40,
+    projection: "projected",
+  });
+  reconciliation.respond({ hasNewer: false });
+  await vi.waitFor(() => expect(world.sync.getAgentTimelineStatus("agent-a")).toBe("ready"));
+});
+
+test("does not reconcile an agent outside the viewed membership", () => {
+  const world = new TimelineWorld();
+  world.sync.setConnected(true);
+
+  world.sync.reconcileAgent("agent-a");
+
+  world.expectNoPendingFetch();
+  world.expectNoPendingMembership();
+});
+
 test("unchanged visible-set publication does not cancel paged catch-up", async () => {
   const world = new TimelineWorld();
   world.sync.setConnected(true);
@@ -364,6 +407,7 @@ test("gap recovery supersedes completed catch-up and pages through the current t
   membership.succeed();
   const initial = await world.nextFetch("agent-a");
   initial.respond({ hasNewer: false });
+  await vi.waitFor(() => expect(world.sync.getAgentTimelineStatus("agent-a")).toBe("ready"));
 
   world.sync.recoverGap("agent-a", { epoch: "epoch-agent-a", endSeq: 10 });
   const gapPage = await world.nextFetch("agent-a");
@@ -395,6 +439,7 @@ test("repeated recovery for the same running gap reuses the in-flight fetch", as
   membership.succeed();
   const initial = await world.nextFetch("agent-a");
   initial.respond({ hasNewer: false });
+  await vi.waitFor(() => expect(world.sync.getAgentTimelineStatus("agent-a")).toBe("ready"));
 
   const cursor = { epoch: "epoch-agent-a", endSeq: 10 };
   world.sync.recoverGap("agent-a", cursor);
@@ -656,6 +701,7 @@ test("legacy delivery skips subscription RPCs while retaining visibility catch-u
   world.expectNoPendingMembership();
   const initial = await world.nextFetch("agent-a");
   initial.respond({ hasNewer: false });
+  await vi.waitFor(() => expect(world.sync.getAgentTimelineStatus("agent-a")).toBe("ready"));
 
   world.sync.recoverGap("agent-a", { epoch: "epoch-agent-a", endSeq: 10 });
   const recovery = await world.nextFetch("agent-a");

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

@@ -1,8 +1,6 @@
-import type { AgentTimelineCursorState } from "@/stores/session-store";
 import {
-  planInitialAgentTimelineSync,
-  planResumeTimelineSync,
   planTimelineCatchUpAfter,
+  planTimelineTailFetch,
   type ProjectedTimelineForwardFetchPlan,
 } from "./timeline-sync-plan";
 
@@ -14,8 +12,6 @@ interface TimelinePageResult {
 interface ViewedTimelineSyncPorts {
   initialDeliveryMode: TimelineDeliveryMode;
   setSubscription(agentIds: string[]): Promise<void>;
-  readCursor(agentId: string): AgentTimelineCursorState | undefined;
-  hasAuthoritativeHistory(agentId: string): boolean;
   fetchPage(
     agentId: string,
     request: ProjectedTimelineForwardFetchPlan,
@@ -37,6 +33,7 @@ export interface ViewedTimelineSync extends ViewedTimelineUiBridge {
   setActive(active: boolean): void;
   setConnected(connected: boolean): void;
   setDeliveryMode(mode: TimelineDeliveryMode): void;
+  reconcileAgent(agentId: string): void;
   recoverGap(agentId: string, cursor: { epoch: string; endSeq: number }): void;
   dispose(): void;
 }
@@ -62,19 +59,29 @@ function isSameCatchUpRequest(
   return left.cursor.epoch === right.cursor.epoch && left.cursor.seq === right.cursor.seq;
 }
 
-function shouldKeepCurrentCatchUp(input: {
+type CatchUpDecision = "keep" | "keep-and-park" | "replace";
+
+function decideCatchUp(input: {
   current: CatchUpState | undefined;
-  request: ProjectedTimelineForwardFetchPlan | undefined;
+  request: ProjectedTimelineForwardFetchPlan;
   supersede: boolean;
-}): boolean {
-  if (!input.current) return false;
+}): CatchUpDecision {
+  if (!input.current) return "replace";
   if (input.supersede) {
-    return (
+    if (
       input.current.status === "running" &&
       isSameCatchUpRequest(input.current.request, input.request)
-    );
+    ) {
+      return "keep";
+    }
+    if (input.current.status === "running" && input.current.request?.direction === "tail") {
+      return "keep-and-park";
+    }
+    return "replace";
   }
-  return input.current.status === "running" || input.current.status === "complete";
+  return input.current.status === "running" || input.current.status === "complete"
+    ? "keep"
+    : "replace";
 }
 
 function normalizeAgentIds(agentIds: string[]): string[] {
@@ -89,7 +96,9 @@ export function createViewedTimelineSync(ports: ViewedTimelineSyncPorts): Viewed
   const sources = new Map<string, string[]>();
   const catchUps = new Map<string, CatchUpState>();
   const catchUpGenerations = new Map<string, number>();
-  const pendingGaps = new Map<string, ProjectedTimelineForwardFetchPlan>();
+  // Authoritative fetch owed but not runnable yet: disconnected, unacknowledged, or parked.
+  // Acknowledgement and tail completion are the only drain points.
+  const pendingCatchUps = new Map<string, ProjectedTimelineForwardFetchPlan>();
   const lingeringRemovals = new Map<string, () => void>();
   const visibilityCatchUpPending = new Set<string>();
   const visibilityCatchUpErrors = new Set<string>();
@@ -137,7 +146,7 @@ export function createViewedTimelineSync(ports: ViewedTimelineSyncPorts): Viewed
     catchUpGenerations.set(agentId, (catchUpGenerations.get(agentId) ?? 0) + 1);
     catchUps.get(agentId)?.cancelRetry?.();
     catchUps.delete(agentId);
-    pendingGaps.delete(agentId);
+    pendingCatchUps.delete(agentId);
   };
 
   const fetchUntilCurrent = async (
@@ -174,6 +183,11 @@ export function createViewedTimelineSync(ports: ViewedTimelineSyncPorts): Viewed
         throw new Error(`Timeline page for ${agentId} hasNewer without an end cursor`);
       }
       catchUps.set(agentId, { generation, status: "complete" });
+      const pendingCatchUp = pendingCatchUps.get(agentId);
+      if (pendingCatchUp) {
+        startCatchUp(agentId, { request: pendingCatchUp, supersede: true });
+        return;
+      }
       setVisibilityCatchUpReady(agentId);
     } catch (error) {
       if (catchUps.get(agentId)?.generation === generation) {
@@ -198,31 +212,34 @@ export function createViewedTimelineSync(ports: ViewedTimelineSyncPorts): Viewed
   ) => {
     const { request, supersede = false } = options;
     if (!connected || !isDesired(agentId) || !isAcknowledged(agentId)) {
-      if (request) pendingGaps.set(agentId, request);
+      if (request) pendingCatchUps.set(agentId, request);
       return;
     }
+    const nextRequest = request ?? planTimelineTailFetch();
     const current = catchUps.get(agentId);
-    if (shouldKeepCurrentCatchUp({ current, request, supersede })) {
+    const decision = decideCatchUp({ current, request: nextRequest, supersede });
+    if (decision === "keep-and-park") {
+      pendingCatchUps.set(agentId, nextRequest);
+      return;
+    }
+    if (decision === "keep") {
       return;
     }
     current?.cancelRetry?.();
     const generation = (catchUpGenerations.get(agentId) ?? 0) + 1;
     catchUpGenerations.set(agentId, generation);
-    catchUps.set(agentId, { generation, status: "running", request });
-    pendingGaps.delete(agentId);
-    const cursor = ports.readCursor(agentId);
-    const nextRequest =
-      request ??
-      (ports.hasAuthoritativeHistory(agentId)
-        ? planResumeTimelineSync({ cursor })
-        : planInitialAgentTimelineSync({ cursor, hasAuthoritativeHistory: false }));
+    catchUps.set(agentId, { generation, status: "running", request: nextRequest });
+    pendingCatchUps.delete(agentId);
     void fetchUntilCurrent(agentId, generation, nextRequest);
   };
 
   const startAcknowledgedCatchUps = () => {
     for (const agentId of acknowledged) {
-      const gap = pendingGaps.get(agentId);
-      startCatchUp(agentId, { request: gap, supersede: Boolean(gap) });
+      const pendingCatchUp = pendingCatchUps.get(agentId);
+      startCatchUp(agentId, {
+        request: pendingCatchUp,
+        supersede: Boolean(pendingCatchUp),
+      });
     }
   };
 
@@ -432,6 +449,15 @@ export function createViewedTimelineSync(ports: ViewedTimelineSyncPorts): Viewed
       if (deliveryMode === "selective" && connected) void reconcileMembership();
       else if (connected) startAcknowledgedCatchUps();
     },
+    reconcileAgent(agentId) {
+      if (!isDesired(agentId)) return;
+      const request = planTimelineTailFetch();
+      if (catchUps.get(agentId)?.status === "running") {
+        pendingCatchUps.set(agentId, request);
+        return;
+      }
+      startCatchUp(agentId, { request, supersede: true });
+    },
     recoverGap(agentId, cursor) {
       if (!isDesired(agentId)) return;
       startCatchUp(agentId, {

packages/app/src/types/stream.test.ts

@@ -4,9 +4,7 @@ import { describe, expect, it } from "vitest";
 
 import {
   applyStreamEvent,
-  appendOptimisticUserMessageToStream,
-  buildOptimisticUserMessage,
-  clearOptimisticUserMessages,
+  createUserMessage,
   handoffCreatedAgentUserMessageToStream,
   hydrateStreamState,
   mergeToolCallDetail,
@@ -14,6 +12,8 @@ import {
   type AgentToolCallItem,
   type StreamItem,
   isAgentToolCallItem,
+  upsertUserMessage,
+  upsertUserMessageAcrossStream,
 } from "./stream";
 import type { AgentProvider, ToolCallDetail } from "@getpaseo/protocol/agent-types";
 import type { AgentStreamEventPayload } from "@getpaseo/protocol/messages";
@@ -21,6 +21,109 @@ import { buildToolCallDisplayModel } from "@getpaseo/protocol/tool-call-display"
 
 type CanonicalToolStatus = "running" | "completed" | "failed" | "canceled";
 
+describe("user message identity", () => {
+  it("adds provider identity without replacing local presentation", () => {
+    const timestamp = new Date("2026-07-26T10:00:00.000Z");
+    const local = createUserMessage({
+      clientMessageId: "client-1",
+      text: "local text",
+      timestamp,
+      images: [
+        {
+          id: "image-1",
+          mimeType: "image/png",
+          storageType: "web-indexeddb",
+          storageKey: "image-1.png",
+          createdAt: timestamp.getTime(),
+        },
+      ],
+      attachments: [{ type: "text", mimeType: "text/plain", text: "attachment" }],
+    });
+    const canonical = createUserMessage({
+      id: "provider-1",
+      messageId: "provider-1",
+      clientMessageId: "client-1",
+      text: "provider text",
+      timestamp: new Date("2026-07-26T10:00:01.000Z"),
+    });
+
+    const first = upsertUserMessage([local], canonical);
+    const second = upsertUserMessage(first, canonical);
+
+    expect(first).toEqual([
+      {
+        ...local,
+        messageId: "provider-1",
+        clientMessageId: "client-1",
+      },
+    ]);
+    expect(first[0]).toBe(second[0]);
+  });
+
+  it("keeps local presentation when a later canonical row omits provider identity", () => {
+    const timestamp = new Date("2026-07-27T10:00:00.000Z");
+    const local = createUserMessage({
+      clientMessageId: "client-1",
+      messageId: "provider-1",
+      text: "local text",
+      timestamp,
+      images: [
+        {
+          id: "image-1",
+          mimeType: "image/png",
+          storageType: "web-indexeddb",
+          storageKey: "image-1.png",
+          createdAt: timestamp.getTime(),
+        },
+      ],
+      attachments: [{ type: "text", mimeType: "text/plain", text: "local attachment" }],
+    });
+    const canonicalWithoutProviderIdentity = createUserMessage({
+      id: "canonical-page-row",
+      clientMessageId: "client-1",
+      text: "provider-shaped text",
+      timestamp: new Date("2026-07-27T10:00:01.000Z"),
+    });
+
+    const result = upsertUserMessage([local], canonicalWithoutProviderIdentity);
+
+    expect(result).toEqual([local]);
+  });
+
+  it("matches a submitted message against a legacy canonical row that has no client identity", () => {
+    // Daemons before v0.2.0 do not echo clientMessageId. During agent creation the
+    // legacy canonical row can land before the local submission is handed off, so the
+    // submitted row arrives as `incoming` and must still match by text.
+    const timestamp = new Date("2026-07-27T11:00:00.000Z");
+    const legacyCanonical = createUserMessage({
+      id: "provider-1",
+      messageId: "provider-1",
+      text: "review this",
+      timestamp,
+    });
+    const submitted = createUserMessage({
+      clientMessageId: "client-1",
+      text: "review this",
+      timestamp: new Date("2026-07-27T11:00:01.000Z"),
+      attachments: [{ type: "text", mimeType: "text/plain", text: "attachment" }],
+    });
+
+    const result = handoffCreatedAgentUserMessageToStream({
+      tail: [legacyCanonical],
+      head: [],
+      message: submitted,
+    });
+
+    expect(result.tail).toEqual([
+      {
+        ...submitted,
+        id: "client-1",
+        messageId: "provider-1",
+      },
+    ]);
+  });
+});
+
 function assistantTimeline(
   text: string,
   provider: AgentProvider = "claude",
@@ -895,15 +998,15 @@ describe("stream reducer canonical tool calls", () => {
     assert.strictEqual(todos.items[0]?.text, "Task 1");
   });
 
-  it("preserves optimistic user message images when authoritative user message arrives", () => {
+  it("preserves submitted user message images when authoritative user message arrives", () => {
     const messageId = "msg-user-images";
-    const optimisticTimestamp = new Date("2025-01-01T11:10:00Z");
-    const optimisticImages = [
+    const submittedTimestamp = new Date("2025-01-01T11:10:00Z");
+    const submittedImages = [
       {
-        id: "att-optimistic",
+        id: "att-submitted",
         mimeType: "image/jpeg",
         storageType: "native-file" as const,
-        storageKey: "/tmp/optimistic.jpg",
+        storageKey: "/tmp/submitted.jpg",
         createdAt: Date.now(),
       },
     ];
@@ -911,10 +1014,10 @@ describe("stream reducer canonical tool calls", () => {
       {
         kind: "user_message",
         id: messageId,
+        clientMessageId: messageId,
         text: "Analyze this image",
-        timestamp: optimisticTimestamp,
-        optimistic: true,
-        images: optimisticImages,
+        timestamp: submittedTimestamp,
+        images: submittedImages,
       },
     ];
     const event: AgentStreamEventPayload = {
@@ -933,9 +1036,9 @@ describe("stream reducer canonical tool calls", () => {
 
     assert.ok(message);
     assert.strictEqual(message.id, messageId);
-    assert.deepStrictEqual(message.images, optimisticImages);
+    assert.deepStrictEqual(message.images, submittedImages);
     assert.strictEqual(message.text, "Analyze this image");
-    assert.strictEqual(message.timestamp.getTime(), optimisticTimestamp.getTime());
+    assert.strictEqual(message.timestamp.getTime(), submittedTimestamp.getTime());
   });
 
   it("keeps canonical assistant/user/assistant order during replay", () => {
@@ -981,7 +1084,7 @@ describe("stream reducer canonical tool calls", () => {
     );
   });
 
-  it("keeps live optimistic assistant merge behavior", () => {
+  it("keeps live submitted assistant merge behavior", () => {
     const state: StreamItem[] = [
       {
         kind: "assistant_message",
@@ -1117,23 +1220,23 @@ describe("turn lifecycle events", () => {
   });
 
   it.each(["codex", "opencode", "pi"] satisfies AgentProvider[])(
-    "replaces an optimistic user message when a live %s provider-owned id echo arrives without text matching",
+    "replaces a submitted user message when a live %s provider-owned id echo arrives without text matching",
     (provider) => {
-      const optimisticTimestamp = new Date("2025-01-01T15:02:00Z");
+      const submittedTimestamp = new Date("2025-01-01T15:02:00Z");
       const serverTimestamp = new Date("2025-01-01T15:02:01Z");
-      const optimistic: StreamItem = {
+      const submitted: StreamItem = {
         kind: "user_message",
-        id: "msg_optimistic",
+        id: "msg_submitted",
+        clientMessageId: "msg_submitted",
         text: "same user text",
-        timestamp: optimisticTimestamp,
-        optimistic: true,
+        timestamp: submittedTimestamp,
         images: [
           {
             id: "image-1",
             mimeType: "image/png",
             storageType: "web-indexeddb",
             storageKey: "image-1",
-            createdAt: optimisticTimestamp.getTime(),
+            createdAt: submittedTimestamp.getTime(),
           },
         ],
         attachments: [
@@ -1147,7 +1250,7 @@ describe("turn lifecycle events", () => {
       };
 
       const state = reduceStreamUpdate(
-        [optimistic],
+        [submitted],
         {
           type: "timeline",
           provider,
@@ -1155,6 +1258,7 @@ describe("turn lifecycle events", () => {
             type: "user_message",
             text: "server-owned rendered text",
             messageId: "provider-owned-id",
+            clientMessageId: "msg_submitted",
           },
         },
         serverTimestamp,
@@ -1165,28 +1269,28 @@ describe("turn lifecycle events", () => {
       assert.strictEqual(userMessages.length, 1);
       const userMessage = userMessages[0];
       invariant(userMessage?.kind === "user_message");
-      assert.strictEqual(userMessage.id, "provider-owned-id");
-      assert.strictEqual(userMessage.text, optimistic.text);
-      assert.strictEqual(userMessage.timestamp.getTime(), optimistic.timestamp.getTime());
-      assert.strictEqual(userMessage.optimistic, undefined);
-      assert.deepStrictEqual(userMessage.images, optimistic.images);
-      assert.deepStrictEqual(userMessage.attachments, optimistic.attachments);
+      assert.strictEqual(userMessage.id, "msg_submitted");
+      assert.strictEqual(userMessage.messageId, "provider-owned-id");
+      assert.strictEqual(userMessage.text, submitted.text);
+      assert.strictEqual(userMessage.timestamp.getTime(), submitted.timestamp.getTime());
+      assert.deepStrictEqual(userMessage.images, submitted.images);
+      assert.deepStrictEqual(userMessage.attachments, submitted.attachments);
     },
   );
 
-  it("replaces one optimistic plain-text user message with the next live server user message", () => {
-    const optimisticTimestamp = new Date("2025-01-01T15:03:00Z");
+  it("replaces one submitted plain-text user message with the next live server user message", () => {
+    const submittedTimestamp = new Date("2025-01-01T15:03:00Z");
     const serverTimestamp = new Date("2025-01-01T15:03:01Z");
-    const optimistic: StreamItem = {
+    const submitted: StreamItem = {
       kind: "user_message",
-      id: "msg_optimistic",
+      id: "msg_submitted",
+      clientMessageId: "msg_submitted",
       text: "typed plain text",
-      timestamp: optimisticTimestamp,
-      optimistic: true,
+      timestamp: submittedTimestamp,
     };
 
     const state = reduceStreamUpdate(
-      [optimistic],
+      [submitted],
       {
         type: "timeline",
         provider: "opencode",
@@ -1204,20 +1308,20 @@ describe("turn lifecycle events", () => {
     assert.strictEqual(userMessages.length, 1);
     const userMessage = userMessages[0];
     invariant(userMessage?.kind === "user_message");
-    assert.strictEqual(userMessage.id, "msg_opencode_provider_owned");
+    assert.strictEqual(userMessage.id, "msg_submitted");
+    assert.strictEqual(userMessage.messageId, "msg_opencode_provider_owned");
     assert.strictEqual(userMessage.text, "typed plain text");
-    assert.strictEqual(userMessage.timestamp.getTime(), optimisticTimestamp.getTime());
-    assert.strictEqual(userMessage.optimistic, undefined);
+    assert.strictEqual(userMessage.timestamp.getTime(), submittedTimestamp.getTime());
   });
 
-  it("replaces an optimistic image user message with the next canonical server user message", () => {
-    const optimisticTimestamp = new Date("2025-01-01T15:03:10Z");
+  it("replaces a submitted image user message with the next canonical server user message", () => {
+    const submittedTimestamp = new Date("2025-01-01T15:03:10Z");
     const image = {
       id: "image-canonical",
       mimeType: "image/png",
       storageType: "web-indexeddb" as const,
       storageKey: "image-canonical",
-      createdAt: optimisticTimestamp.getTime(),
+      createdAt: submittedTimestamp.getTime(),
     };
     const attachment = {
       type: "text" as const,
@@ -1225,16 +1329,16 @@ describe("turn lifecycle events", () => {
       text: "context",
       title: "context.txt",
     };
-    const optimistic = buildOptimisticUserMessage({
-      id: "msg_optimistic_canonical",
+    const submitted = createUserMessage({
+      clientMessageId: "msg_submitted_canonical",
       text: "Analyze this",
-      timestamp: optimisticTimestamp,
+      timestamp: submittedTimestamp,
       images: [image],
       attachments: [attachment],
     });
 
     const state = reduceStreamUpdate(
-      [optimistic],
+      [submitted],
       {
         type: "timeline",
         provider: "claude",
@@ -1242,28 +1346,32 @@ describe("turn lifecycle events", () => {
           type: "user_message",
           text: "server-rendered attachment text",
           messageId: "provider-owned-canonical",
-          clientMessageId: optimistic.id,
+          clientMessageId: submitted.id,
         },
       },
       new Date("2025-01-01T15:03:11Z"),
-      { source: "canonical" },
+      {
+        source: "canonical",
+        timelineCursor: { epoch: "epoch-1", seq: 42 },
+      },
     );
 
     const userMessages = state.filter((item) => item.kind === "user_message");
     assert.strictEqual(userMessages.length, 1);
     const userMessage = userMessages[0];
     invariant(userMessage?.kind === "user_message");
-    assert.strictEqual(userMessage.id, "provider-owned-canonical");
+    assert.strictEqual(userMessage.id, "msg_submitted_canonical");
+    assert.strictEqual(userMessage.messageId, "provider-owned-canonical");
     assert.strictEqual(userMessage.text, "Analyze this");
-    assert.strictEqual(userMessage.timestamp.getTime(), optimisticTimestamp.getTime());
-    assert.strictEqual(userMessage.optimistic, undefined);
+    assert.strictEqual(userMessage.timestamp.getTime(), submittedTimestamp.getTime());
+    assert.deepStrictEqual(userMessage.timelineCursor, { epoch: "epoch-1", seq: 42 });
     assert.deepStrictEqual(userMessage.images, [image]);
     assert.deepStrictEqual(userMessage.attachments, [attachment]);
   });
 
-  it("places optimistic user messages through one append helper", () => {
-    const optimistic = buildOptimisticUserMessage({
-      id: "msg_append_once",
+  it("places submitted user messages through the identity producer", () => {
+    const submitted = createUserMessage({
+      clientMessageId: "msg_append_once",
       text: "append once",
       timestamp: new Date("2025-01-01T15:03:20Z"),
     });
@@ -1274,28 +1382,30 @@ describe("turn lifecycle events", () => {
       timestamp: new Date("2025-01-01T15:03:19Z"),
     };
 
-    const first = appendOptimisticUserMessageToStream({
+    const first = upsertUserMessageAcrossStream({
       tail: [],
       head: [headItem],
-      message: optimistic,
-      placement: "active-head",
+      message: submitted,
+      insert: "head",
+      presentation: "existing",
     });
-    const second = appendOptimisticUserMessageToStream({
+    const second = upsertUserMessageAcrossStream({
       tail: first.tail,
       head: first.head,
-      message: optimistic,
-      placement: "active-head",
+      message: submitted,
+      insert: "head",
+      presentation: "existing",
     });
     assert.deepStrictEqual(first.tail, []);
-    assert.deepStrictEqual(first.head, [headItem, optimistic]);
+    assert.deepStrictEqual(first.head, [headItem, submitted]);
     assert.strictEqual(second.changedHead, false);
     assert.strictEqual(second.head, first.head);
   });
 
-  it("hands rich optimistic content to an authoritative create message without duplicating it", () => {
+  it("hands rich submitted content to its create message without overwriting an earlier user row", () => {
     const timestamp = new Date("2025-01-01T15:03:20Z");
-    const optimistic = buildOptimisticUserMessage({
-      id: "client-user",
+    const submitted = createUserMessage({
+      clientMessageId: "client-user",
       text: "",
       timestamp,
       images: [
@@ -1317,32 +1427,44 @@ describe("turn lifecycle events", () => {
         },
       ],
     });
+    const precedingProviderRow: StreamItem = {
+      kind: "user_message",
+      id: "provider-system-user",
+      messageId: "provider-system-user",
+      text: "provider setup prompt",
+      timestamp: new Date("2025-01-01T15:03:20.500Z"),
+    };
     const canonical: StreamItem = {
       kind: "user_message",
       id: "provider-user",
+      messageId: "provider-user",
+      clientMessageId: "client-user",
       text: "server-rendered attachment text",
       timestamp: new Date("2025-01-01T15:03:21Z"),
     };
 
     const handedOff = handoffCreatedAgentUserMessageToStream({
-      tail: [canonical],
+      tail: [precedingProviderRow, canonical],
       head: [],
-      message: optimistic,
+      message: submitted,
     });
     const repeated = handoffCreatedAgentUserMessageToStream({
       tail: handedOff.tail,
       head: handedOff.head,
-      message: optimistic,
+      message: submitted,
     });
 
     assert.deepStrictEqual(handedOff.tail, [
+      precedingProviderRow,
       {
         kind: "user_message",
-        id: "provider-user",
-        text: optimistic.text,
-        timestamp: optimistic.timestamp,
-        images: optimistic.images,
-        attachments: optimistic.attachments,
+        id: "client-user",
+        clientMessageId: "client-user",
+        messageId: "provider-user",
+        text: submitted.text,
+        timestamp: submitted.timestamp,
+        images: submitted.images,
+        attachments: submitted.attachments,
       },
     ]);
     assert.deepStrictEqual(handedOff.head, []);
@@ -1364,22 +1486,22 @@ describe("turn lifecycle events", () => {
     );
     assert.deepStrictEqual(
       afterNextUser.filter((item) => item.kind === "user_message").map((item) => item.id),
-      ["provider-user", "provider-next-user"],
+      ["provider-system-user", "client-user", "provider-next-user"],
     );
   });
 
-  it("reconciles an optimistic user message that was pending in the streaming head", () => {
-    const optimistic: StreamItem = {
+  it("flushes an interrupted head when its submitted prompt becomes canonical", () => {
+    const submitted: StreamItem = {
       kind: "user_message",
-      id: "msg_head_optimistic",
+      id: "msg_head_submitted",
+      clientMessageId: "msg_head_submitted",
       text: "plain text in head",
       timestamp: new Date("2025-01-01T15:03:02Z"),
-      optimistic: true,
     };
 
     const result = applyStreamEvent({
       tail: [],
-      head: [optimistic],
+      head: [submitted],
       event: {
         type: "timeline",
         provider: "opencode",
@@ -1393,33 +1515,80 @@ describe("turn lifecycle events", () => {
       source: "live",
     });
 
-    assert.strictEqual(result.head.length, 0);
+    assert.deepStrictEqual(result.head, []);
     const userMessages = result.tail.filter((item) => item.kind === "user_message");
     assert.strictEqual(userMessages.length, 1);
-    assert.strictEqual(userMessages[0]?.id, "provider-owned-head");
-    assert.strictEqual(userMessages[0]?.optimistic, undefined);
+    assert.strictEqual(userMessages[0]?.id, "msg_head_submitted");
+    assert.strictEqual(userMessages[0]?.messageId, "provider-owned-head");
   });
 
-  it("replaces multiple optimistic user messages in FIFO order", () => {
-    const optimisticTimestamp = new Date("2025-01-01T15:04:00Z");
-    const serverTimestamp = new Date("2025-01-01T15:04:01Z");
-    const firstOptimistic: StreamItem = {
-      kind: "user_message",
-      id: "msg_optimistic_1",
-      text: "first typed text",
-      timestamp: optimisticTimestamp,
-      optimistic: true,
+  it("keeps a replacement assistant separate after an interrupted prompt is reconciled", () => {
+    const interruptedAssistant: StreamItem = {
+      kind: "assistant_message",
+      id: "interrupted",
+      text: "old answer",
+      timestamp: new Date("2025-01-01T15:03:01Z"),
     };
-    const secondOptimistic: StreamItem = {
+    const submitted = createUserMessage({
+      clientMessageId: "msg_interrupt",
+      text: "replacement prompt",
+      timestamp: new Date("2025-01-01T15:03:02Z"),
+    });
+    const reconciled = applyStreamEvent({
+      tail: [],
+      head: [interruptedAssistant, submitted],
+      event: {
+        type: "timeline",
+        provider: "opencode",
+        item: {
+          type: "user_message",
+          text: submitted.text,
+          messageId: "provider-prompt",
+          clientMessageId: submitted.clientMessageId,
+        },
+      },
+      timestamp: new Date("2025-01-01T15:03:03Z"),
+    });
+    const replacement = applyStreamEvent({
+      tail: reconciled.tail,
+      head: reconciled.head,
+      event: {
+        type: "timeline",
+        provider: "opencode",
+        item: { type: "assistant_message", text: "new answer" },
+      },
+      timestamp: new Date("2025-01-01T15:03:04Z"),
+    });
+
+    expect(replacement.tail.map((item) => item.kind)).toEqual([
+      "assistant_message",
+      "user_message",
+    ]);
+    expect(replacement.head).toEqual([
+      expect.objectContaining({ kind: "assistant_message", text: "new answer" }),
+    ]);
+  });
+
+  it("replaces multiple submitted user messages in FIFO order", () => {
+    const submittedTimestamp = new Date("2025-01-01T15:04:00Z");
+    const serverTimestamp = new Date("2025-01-01T15:04:01Z");
+    const firstSubmitted: StreamItem = {
       kind: "user_message",
-      id: "msg_optimistic_2",
+      id: "msg_submitted_1",
+      clientMessageId: "msg_submitted_1",
+      text: "first typed text",
+      timestamp: submittedTimestamp,
+    };
+    const secondSubmitted: StreamItem = {
+      kind: "user_message",
+      id: "msg_submitted_2",
+      clientMessageId: "msg_submitted_2",
       text: "second typed text",
       timestamp: new Date("2025-01-01T15:04:00.500Z"),
-      optimistic: true,
     };
 
     const afterFirstEcho = reduceStreamUpdate(
-      [firstOptimistic, secondOptimistic],
+      [firstSubmitted, secondSubmitted],
       {
         type: "timeline",
         provider: "opencode",
@@ -1427,6 +1596,7 @@ describe("turn lifecycle events", () => {
           type: "user_message",
           text: "first server text",
           messageId: "provider-owned-first",
+          clientMessageId: "msg_submitted_1",
         },
       },
       serverTimestamp,
@@ -1441,6 +1611,7 @@ describe("turn lifecycle events", () => {
           type: "user_message",
           text: "second server text",
           messageId: "provider-owned-second",
+          clientMessageId: "msg_submitted_2",
         },
       },
       new Date("2025-01-01T15:04:02Z"),
@@ -1450,30 +1621,30 @@ describe("turn lifecycle events", () => {
     const userMessages = state.filter((item) => item.kind === "user_message");
     assert.strictEqual(userMessages.length, 2);
     assert.deepStrictEqual(
-      userMessages.map((item) => [item.id, item.text, item.optimistic]),
+      userMessages.map((item) => [item.id, item.text, item.messageId]),
       [
-        ["provider-owned-first", "first typed text", undefined],
-        ["provider-owned-second", "second typed text", undefined],
+        ["msg_submitted_1", "first typed text", "provider-owned-first"],
+        ["msg_submitted_2", "second typed text", "provider-owned-second"],
       ],
     );
   });
 
-  it("does not shift later prompts when an earlier optimistic prompt has no canonical echo", () => {
+  it("does not shift later prompts when an earlier submitted prompt has no canonical echo", () => {
     const staleTimestamp = new Date("2025-01-01T15:04:00Z");
     const submittedTimestamp = new Date("2025-01-01T15:04:01Z");
     const stalePrompt: StreamItem = {
       kind: "user_message",
       id: "msg_stale",
+      clientMessageId: "msg_stale",
       text: "first prompt without an echo",
       timestamp: staleTimestamp,
-      optimistic: true,
     };
     const submittedPrompt: StreamItem = {
       kind: "user_message",
       id: "msg_submitted",
+      clientMessageId: "msg_submitted",
       text: "later submitted prompt",
       timestamp: submittedTimestamp,
-      optimistic: true,
     };
 
     const state = reduceStreamUpdate(
@@ -1496,15 +1667,16 @@ describe("turn lifecycle events", () => {
       stalePrompt,
       {
         kind: "user_message",
-        id: "provider-owned-submitted",
+        id: "msg_submitted",
         clientMessageId: submittedPrompt.id,
+        messageId: "provider-owned-submitted",
         text: submittedPrompt.text,
         timestamp: submittedPrompt.timestamp,
       },
     ]);
   });
 
-  it("appends a live server user message when no optimistic user message is pending", () => {
+  it("appends a live server user message when no submitted user message is pending", () => {
     const state = reduceStreamUpdate(
       [],
       {
@@ -1523,21 +1695,11 @@ describe("turn lifecycle events", () => {
     const userMessages = state.filter((item) => item.kind === "user_message");
     assert.strictEqual(userMessages.length, 1);
     assert.strictEqual(userMessages[0]?.id, "provider-owned-resume");
-    assert.strictEqual(userMessages[0]?.optimistic, undefined);
   });
 
-  it("does not match a server user message to an optimistic from a rewound turn after pending optimistics are cleared", () => {
-    const optimistic: StreamItem = {
-      kind: "user_message",
-      id: "msg_rewound_optimistic",
-      text: "rewound text",
-      timestamp: new Date("2025-01-01T15:04:04Z"),
-      optimistic: true,
-    };
-    const cleared = clearOptimisticUserMessages([optimistic]);
-
+  it("appends a server user message after a rewound local row was removed", () => {
     const state = reduceStreamUpdate(
-      cleared,
+      [],
       {
         type: "timeline",
         provider: "opencode",
@@ -1555,7 +1717,6 @@ describe("turn lifecycle events", () => {
     assert.strictEqual(userMessages.length, 1);
     assert.strictEqual(userMessages[0]?.id, "provider-owned-after-rewind");
     assert.strictEqual(userMessages[0]?.text, "future server echo");
-    assert.strictEqual(userMessages[0]?.optimistic, undefined);
   });
 
   it("keeps canonical repeated user messages distinct during hydration", () => {

packages/app/src/utils/agent-attention.test.ts

@@ -34,6 +34,7 @@ function createAgent(input: Partial<Agent> & Pick<Agent, "id">): Agent {
     attentionReason: null,
     attentionTimestamp: null,
     ...rest,
+    activeTurn: rest.activeTurn ?? null,
   };
 }
 

packages/app/src/utils/agent-directory-reconciliation.test.ts

@@ -53,6 +53,7 @@ function entry(id: string, status: AgentSnapshotPayload["status"]): FetchAgentsE
 function replica(id: string, status: Agent["status"]): Agent {
   return {
     ...snapshot(id, status),
+    activeTurn: null,
     serverId: "server",
     createdAt: new Date("2026-07-12T10:00:00.000Z"),
     updatedAt: new Date("2026-07-12T10:00:00.000Z"),

packages/app/src/utils/agent-directory-sync.test.ts

@@ -7,6 +7,7 @@ import { useSessionStore } from "@/stores/session-store";
 import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
 import { isAgentArchiving, setAgentArchiving } from "@/hooks/use-archive-agent";
 import { queryClient } from "@/data/query-client";
+import { createUserMessage } from "@/types/stream";
 import { applyAgentDirectoryDelta, replaceFetchedAgentDirectory } from "./agent-directory-sync";
 
 function createAgentPayload(
@@ -64,6 +65,147 @@ function permission(id: string): AgentPermissionRequest {
   return { id, provider: "codex", name: id, kind: "tool", title: id };
 }
 
+function beginPendingSubmission(serverId: string, agentId: string): string {
+  const clientMessageId = `client-${agentId}`;
+  useSessionStore.getState().beginAgentMessageSubmission(
+    serverId,
+    agentId,
+    createUserMessage({
+      clientMessageId,
+      text: "Run this",
+      timestamp: new Date("2026-07-27T10:00:00.000Z"),
+    }),
+  );
+  return clientMessageId;
+}
+
+function applyAgentStatus(input: {
+  serverId: string;
+  agentId: string;
+  status: AgentSnapshotPayload["status"];
+  updatedAt: string;
+  lastUserMessageAt?: string;
+}): void {
+  const agent = createAgentPayload({
+    id: input.agentId,
+    status: input.status,
+    updatedAt: input.updatedAt,
+    lastUserMessageAt: input.lastUserMessageAt ?? null,
+  });
+  applyAgentDirectoryDelta({
+    serverId: input.serverId,
+    delta: { kind: "upsert", agent, project: createEntry(agent).project },
+  });
+}
+
+describe("turn liveness authority", () => {
+  it("normalizes old-daemon status into the shared activity replica", () => {
+    const serverId = "server-turn-liveness";
+    const agentId = "agent-1";
+    const startedAt = "2026-07-27T10:00:01.000Z";
+    const store = useSessionStore.getState();
+    store.initializeSession(serverId, null as unknown as DaemonClient);
+    applyAgentStatus({ serverId, agentId, status: "idle", updatedAt: startedAt });
+
+    applyAgentStatus({
+      serverId,
+      agentId,
+      status: "running",
+      updatedAt: "2026-07-27T10:00:02.000Z",
+      lastUserMessageAt: startedAt,
+    });
+    expect(store.getSession(serverId)?.agentTurnLiveness.get(agentId)).toEqual({
+      phase: "open",
+      turnId: null,
+      startedAt: new Date(startedAt),
+      cancellationRequestId: null,
+    });
+
+    applyAgentStatus({
+      serverId,
+      agentId,
+      status: "idle",
+      updatedAt: "2026-07-27T10:00:03.000Z",
+    });
+
+    expect(store.getSession(serverId)?.agentTurnLiveness.has(agentId)).toBe(false);
+    store.clearSession(serverId);
+  });
+});
+
+describe("message submission authority", () => {
+  it("does not settle a submission from an unrelated running transition", () => {
+    const serverId = "server-running-is-not-submission-ack";
+    const agentId = "agent-1";
+    const store = useSessionStore.getState();
+    store.initializeSession(serverId, null as unknown as DaemonClient);
+    applyAgentStatus({
+      serverId,
+      agentId,
+      status: "idle",
+      updatedAt: "2026-07-27T10:00:00.000Z",
+    });
+    const clientMessageId = beginPendingSubmission(serverId, agentId);
+
+    applyAgentStatus({
+      serverId,
+      agentId,
+      status: "running",
+      updatedAt: "2026-07-27T10:00:01.000Z",
+    });
+
+    expect(useSessionStore.getState().sessions[serverId]?.messageSubmissions.get(agentId)).toEqual([
+      {
+        clientMessageId,
+        providerAcknowledged: false,
+        rpcSettled: false,
+      },
+    ]);
+    store.clearSession(serverId);
+  });
+
+  it("settles provider acknowledgement only when timeline ingestion reports it", () => {
+    const serverId = "server-explicit-provider-ack";
+    const agentId = "agent-1";
+    const store = useSessionStore.getState();
+    store.initializeSession(serverId, null as unknown as DaemonClient);
+    applyAgentStatus({
+      serverId,
+      agentId,
+      status: "idle",
+      updatedAt: "2026-07-27T10:00:00.000Z",
+    });
+    const clientMessageId = beginPendingSubmission(serverId, agentId);
+    store.setAgentStreamState(serverId, agentId, {
+      tail: [
+        createUserMessage({
+          id: "provider-message",
+          messageId: "provider-message",
+          clientMessageId,
+          text: "Run this",
+          timestamp: new Date("2026-07-27T10:00:01.000Z"),
+        }),
+      ],
+      head: [],
+    });
+
+    expect(
+      useSessionStore.getState().sessions[serverId]?.messageSubmissions.get(agentId)?.[0]
+        ?.providerAcknowledged,
+    ).toBe(false);
+
+    store.setAgentStreamState(serverId, agentId, {
+      acknowledgedClientMessageIds: [clientMessageId],
+    });
+
+    expect(
+      useSessionStore.getState().sessions[serverId]?.messageSubmissions.get(agentId)?.[0]
+        ?.providerAcknowledged,
+    ).toBe(true);
+    store.clearSession(serverId);
+  });
+});
+
 describe("replaceFetchedAgentDirectory", () => {
   it("preserves timeline initialization while replacing directory state", () => {
     const serverId = "server-initializing";

packages/app/src/utils/agent-directory-sync.ts

@@ -73,9 +73,17 @@ export function upsertAgentReplica(serverId: string, agent: Agent): Agent {
     next.set(agent.id, acceptedAgent);
     return next;
   });
+  applyAgentTurnSnapshot(serverId, acceptedAgent);
   return acceptedAgent;
 }
 
+function applyAgentTurnSnapshot(serverId: string, agent: Agent): void {
+  useSessionStore.getState().applyAgentTurnLiveness(serverId, agent.id, {
+    type: "snapshot",
+    activeTurn: agent.activeTurn,
+  });
+}
+
 export function replaceAgentPendingPermissions(serverId: string, agent: Agent): void {
   const pendingPermissions = new Map(
     useSessionStore.getState().sessions[serverId]?.pendingPermissions,
@@ -114,6 +122,7 @@ export function removeAgentDirectoryReplica(serverId: string, agentId: string):
   store.setAgentAuthoritativeHistoryApplied(serverId, agentId, false);
   store.setAgentStreamTail(serverId, removeKey);
   store.clearAgentStreamHead(serverId, agentId);
+  store.applyAgentTurnLiveness(serverId, agentId, { type: "destructive_close" });
   useSessionStore.setState((state) => {
     if (!state.agentLastActivity.has(agentId)) return state;
     const agentLastActivity = new Map(state.agentLastActivity);
@@ -172,7 +181,6 @@ export function replaceFetchedAgentDirectory(input: {
 }): { agents: Map<string, Agent> } {
   const { agents: fetchedAgents, pendingPermissions } = buildAgentDirectoryState(input);
   const store = useSessionStore.getState();
-
   for (const agent of fetchedAgents.values()) {
     if (agent.archivedAt) {
       clearArchiveAgentPending({ queryClient, serverId: input.serverId, agentId: agent.id });
@@ -180,6 +188,9 @@ export function replaceFetchedAgentDirectory(input: {
   }
 
   store.setAgents(input.serverId, fetchedAgents);
+  for (const agent of fetchedAgents.values()) {
+    applyAgentTurnSnapshot(input.serverId, agent);
+  }
   store.setAgentDetails(input.serverId, (prev) => {
     let next: Map<string, Agent> | null = null;
     for (const agentId of fetchedAgents.keys()) {

packages/app/src/utils/agent-snapshots.test.ts

@@ -17,6 +17,7 @@ function createSnapshot(
     updatedAt: input.updatedAt ?? "2026-04-20T00:01:00.000Z",
     lastUserMessageAt: input.lastUserMessageAt ?? null,
     status: input.status ?? "idle",
+    activeTurn: input.activeTurn,
     capabilities: input.capabilities ?? {
       supportsStreaming: true,
       supportsSessionPersistence: true,
@@ -35,6 +36,26 @@ function createSnapshot(
 }
 
 describe("normalizeAgentSnapshot", () => {
+  it("normalizes identified and legacy active turns at the snapshot boundary", () => {
+    const startedAt = "2026-07-31T12:00:00.000Z";
+    expect(
+      normalizeAgentSnapshot(
+        createSnapshot({
+          status: "running",
+          activeTurn: { turnId: "turn-1", startedAt },
+        }),
+        "server-1",
+      ).activeTurn,
+    ).toEqual({ turnId: "turn-1", startedAt: new Date(startedAt) });
+
+    expect(
+      normalizeAgentSnapshot(
+        createSnapshot({ status: "running", lastUserMessageAt: startedAt }),
+        "server-1",
+      ).activeTurn,
+    ).toEqual({ turnId: null, startedAt: new Date(startedAt) });
+  });
+
   it("derives parentAgentId from the parent label while preserving labels", () => {
     const labels = {
       [PARENT_AGENT_ID_LABEL]: "parent-1",

packages/app/src/utils/agent-snapshots.ts

@@ -1,6 +1,21 @@
 import type { AgentSnapshotPayload } from "@getpaseo/protocol/messages";
 import type { AgentPermissionRequest } from "@getpaseo/protocol/agent-types";
 import { getParentAgentIdFromLabels } from "@getpaseo/protocol/agent-labels";
+import type { ActiveTurnIdentity } from "@/timeline/turn-liveness";
+
+function normalizeActiveTurn(
+  snapshot: AgentSnapshotPayload,
+  lastUserMessageAt: Date | null,
+): ActiveTurnIdentity | null {
+  if (snapshot.activeTurn === null) return null;
+  if (snapshot.activeTurn) {
+    return {
+      turnId: snapshot.activeTurn.turnId,
+      startedAt: snapshot.activeTurn.startedAt ? new Date(snapshot.activeTurn.startedAt) : null,
+    };
+  }
+  return snapshot.status === "running" ? { turnId: null, startedAt: lastUserMessageAt } : null;
+}
 
 export function derivePendingPermissionKey(
   agentId: string,
@@ -27,12 +42,17 @@ export function normalizeAgentSnapshot(snapshot: AgentSnapshotPayload, serverId:
     : null;
   const archivedAt = snapshot.archivedAt ? new Date(snapshot.archivedAt) : null;
   const parentAgentId = getParentAgentIdFromLabels(snapshot.labels);
+  // COMPAT(agentTurnIdentity): added in v0.2.6, remove after 2027-01-31 once daemon floor >= v0.2.6.
+  // Old daemons expose only status. Normalize that legacy signal once so the rest
+  // of the app consumes one activity shape.
+  const activeTurn = normalizeActiveTurn(snapshot, lastUserMessageAt);
 
   return {
     serverId,
     id: snapshot.id,
     provider: snapshot.provider,
     status: snapshot.status,
+    activeTurn,
     createdAt,
     updatedAt,
     lastUserMessageAt,

packages/app/src/utils/assistant-image-metadata.test.ts

@@ -3,7 +3,6 @@ import {
   clearAssistantImageMetadataCache,
   estimateAssistantMessageHeightFromCache,
   extractAssistantImageSources,
-  getAssistantImageLoadStateFromMetadata,
   getAssistantImageMetadata,
   setAssistantImageMetadata,
 } from "./assistant-image-metadata";
@@ -42,23 +41,6 @@ describe("assistant image metadata", () => {
     });
   });
 
-  it("maps missing metadata to the image loading state", () => {
-    expect(getAssistantImageLoadStateFromMetadata(null)).toEqual({ status: "loading" });
-  });
-
-  it("maps cached metadata to the image ready state", () => {
-    expect(
-      getAssistantImageLoadStateFromMetadata({
-        width: 900,
-        height: 1600,
-        aspectRatio: 9 / 16,
-      }),
-    ).toEqual({
-      status: "ready",
-      aspectRatio: 9 / 16,
-    });
-  });
-
   it("estimates assistant message height from cached image metadata", () => {
     setAssistantImageMetadata(
       {

packages/app/src/utils/assistant-image-metadata.ts

@@ -8,11 +8,6 @@ export interface AssistantImageMetadata {
   aspectRatio: number;
 }
 
-export type AssistantImageLoadState =
-  | { status: "loading" }
-  | { status: "ready"; aspectRatio: number }
-  | { status: "error" };
-
 const assistantImageMetadataCache = new Map<string, AssistantImageMetadata>();
 const assistantImageParseCache = new Map<string, { sources: string[]; hasNonImageText: boolean }>();
 const ASSISTANT_IMAGE_METADATA_CACHE_LIMIT = 500;
@@ -131,15 +126,6 @@ export function getAssistantImageMetadata(input: {
   return null;
 }
 
-export function getAssistantImageLoadStateFromMetadata(
-  metadata: AssistantImageMetadata | null,
-): AssistantImageLoadState {
-  if (!metadata) {
-    return { status: "loading" };
-  }
-  return { status: "ready", aspectRatio: metadata.aspectRatio };
-}
-
 export function setAssistantImageMetadata(
   input: {
     source: string;

packages/app/src/utils/workspace-agent-activity.test.ts

@@ -19,6 +19,7 @@ function agent(input: {
     id: input.id,
     provider: "codex",
     status: input.status ?? "idle",
+    activeTurn: input.status === "running" ? { turnId: "turn-1", startedAt: null } : null,
     createdAt: new Date("2026-01-01T00:00:00.000Z"),
     updatedAt: new Date(input.updatedAt),
     lastUserMessageAt: null,

packages/app/src/workspace-tabs/agent-visibility.test.ts

@@ -23,6 +23,7 @@ function makeAgent(input: {
     id: input.id,
     provider: "codex",
     status: "idle",
+    activeTurn: null,
     createdAt,
     updatedAt: createdAt,
     lastUserMessageAt: null,