Merge remote-tracking branch 'origin/master' into feat/pwsh-ui-parity

# Conflicts: # apps/web/tsconfig.json
2026-08-05 21:51:31 +08:00
parent 85a52dbe78 d0cb6770a9
commit ca65cf1e14
78 changed files with 3904 additions and 406 deletions
--- a/packages/client/runtime/README.i18n.yaml
+++ b/packages/client/runtime/README.i18n.yaml
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/runtime/README.md
-README.md: db046202b63562a9282c7f4dd1f220d356a21dad
-README.zh.md: 07b80eff9f3dc992cc57ba2f963dd76759a65787
+README.md: e55587202dfdd8b2d3e7e707507ebe041769b7c5
+README.zh.md: 0d5092074592d49807d06e1bb70fc64fc2d6dcf4
--- a/packages/client/runtime/README.md
+++ b/packages/client/runtime/README.md
@@ -2,7 +2,7 @@

 English | [中文](README.zh.md)

-Client cordis boot and React-free object services: SlotsService wraps SlotCore and supplies renderer data sources; SessionsService owns Session objects and the Chat-facing list, scope, and event-window state; SessionHistoryService lazily owns independent raw-history ledgers for inspection consumers; WorkspacesService depends on SessionsService and owns Workspace objects, list/actions, default-target derivation, and the New Session blank-reuse entry (`connectWorkspace`). The runtime fans the shared Host stream into the Session, Workspace, and activated history owners without routing inspection state through Session or SessionManager, and bridges the registry-invalidation frames to typed ctx events (`commands/changed`, `settings/changed`, `credentials/changed`, `models/changed`) so surface caches refetch without touching the stream. Client sessions are always Host-born (Session+Agent+cwd in one `session.create`); the client holds no pre-entity session state — a session's Agent scope (the client mirror of host dsh-scope, keyed by the shared agent/session id) is born when its row enters the list mirror and dies with the prune. Contract: api-contracts v3 §4. Each `Session` holds a generic `ProjectionValueStore` seeded from the history-tail `projections` block and updated by `session/projection` frames under higher-seq-wins; domain keys (including `todos`) are read via `projections.faceOf` / `useProjection`, not via `ConversationSnapshot`. The store also publishes one reference-stable whole-value map through `SessionSummary.projectionValues`, allowing global list consumers to reuse the same projections without creating per-session subscriptions.
+Client cordis boot and React-free object services: SlotsService wraps SlotCore and supplies renderer data sources; SessionsService owns Session objects and the Chat-facing list, scope, and event-window state; SessionHistoryService lazily owns independent raw-history ledgers for inspection consumers, loading the current tail first and prepending one older page only when its consumer requests it. Each history snapshot exposes the raw window's absolute base sequence so a consumer detects a prepend even when the page adds no surface-visible node. WorkspacesService depends on SessionsService and owns Workspace objects, list/actions, default-target derivation, and the New Session blank-reuse entry (`connectWorkspace`). The runtime fans the shared Host stream into the Session, Workspace, and activated history owners without routing inspection state through Session or SessionManager, and bridges the registry-invalidation frames to typed ctx events (`commands/changed`, `settings/changed`, `credentials/changed`, `models/changed`) so surface caches refetch without touching the stream. Client sessions are always Host-born (Session+Agent+cwd in one `session.create`); the client holds no pre-entity session state — a session's Agent scope (the client mirror of host dsh-scope, keyed by the shared agent/session id) is born when its row enters the list mirror and dies with the prune. Contract: api-contracts v3 §4. Each `Session` holds a generic `ProjectionValueStore` seeded from the history-tail `projections` block and updated by `session/projection` frames under higher-seq-wins; domain keys (including `todos`) are read via `projections.faceOf` / `useProjection`, not via `ConversationSnapshot`. The store also publishes one reference-stable whole-value map through `SessionSummary.projectionValues`, allowing global list consumers to reuse the same projections without creating per-session subscriptions.

 ## Workspace and Session lists

@@ -20,7 +20,7 @@ SlotsService gives the renderer separate bare observables for `useSessions` and

 ## New Session and the blank mirror

-`WorkspacesService.connectWorkspace(workspaceId)` resolves the session a New Session flow lands in: it reuses the workspace's existing blank session from the list mirror (`blank && cwd == workspace.path`) or calls `session.create({workspaceId})`, returning the session id for the caller to open. `SessionSummary.blank` mirrors the host's derived empty-log bit and only ever lowers on the client: seeded by `session.list` / the `host/session-added` frame, flipped false by the first ACCEPTED local `prompt()` (on the RPC success response — acceptance proves the user message is in the host log; a rejected first prompt keeps the session blank and reusable) and by any `running: true` status frame, re-aligned by every list re-pull. List surfaces hide blank rows; the store carries every row. `SessionsService.create` accepts an optional caller-preallocated SessionId and throws `SessionCreateError` (carrying `requestedSessionId`) on failure.
+`WorkspacesService.connectWorkspace(workspaceId)` resolves the session a New Session flow lands in: it reuses the workspace's existing blank session from the list mirror (`blank && cwd == workspace.path && sessionIds.includes(id)` — the host's own membership rule, never cwd alone, so a cwd-matching unaccounted blank session is never hijacked) or calls `session.create({workspaceId})`, returning the session id for the caller to open. `SessionSummary.blank` mirrors the host's derived empty-log bit and only ever lowers on the client: seeded by `session.list` / the `host/session-added` frame, flipped false by the first ACCEPTED local `prompt()` (on the RPC success response — acceptance proves the user message is in the host log; a rejected first prompt keeps the session blank and reusable) and by any `running: true` status frame, re-aligned by every list re-pull. List surfaces hide blank rows; the store carries every row. `SessionsService.create` accepts an optional caller-preallocated SessionId and throws `SessionCreateError` (carrying `requestedSessionId`) on failure.

 ## Pending queue projection

--- a/packages/client/runtime/README.zh.md
+++ b/packages/client/runtime/README.zh.md
@@ -2,7 +2,7 @@

 [English](README.md) | 中文

-客户端 cordis 启动与不依赖 React 的对象服务：SlotsService 包装 SlotCore 并提供 renderer 数据源；SessionsService 拥有 Session 对象以及 Chat 所需的列表、scope 和事件窗口状态；SessionHistoryService 为检查类消费方惰性拥有彼此独立的原始历史账本；WorkspacesService 依赖 SessionsService，拥有 Workspace 对象、列表／操作、默认目标派生，以及 New Session 空会话复用入口（`connectWorkspace`）。运行时把共享 Host 流分发给 Session、Workspace 和已激活的历史数据所有者，不让检查状态经过 Session 或 SessionManager，并把注册表失效帧桥接为类型化 ctx 事件（`commands/changed`、`settings/changed`、`credentials/changed`、`models/changed`），使各表面缓存无需触碰流即可重拉。客户端会话一律由 Host 创建（一次 `session.create` 同时产生 Session、agent（智能体）和 cwd）；客户端不持有任何实体化之前的会话状态——agent scope（host dsh-scope 的客户端镜像，以 agent/session 共用 id 为键）在会话行进入列表镜像时创建，并随 prune 销毁。契约：api-contracts v3 §4。每个 `Session` 持有一个通用的 `ProjectionValueStore`，由历史记录尾部的 `projections` 块播种，并经 `session/projection` 帧按 seq 高者胜更新；领域键（含 `todos`）经 `projections.faceOf`／`useProjection` 读取，不经 `ConversationSnapshot`。该 store 还会通过 `SessionSummary.projectionValues` 发布一份引用稳定的完整值映射，使全局列表消费方无需为每个会话创建订阅，即可复用同一组投影。
+客户端 cordis 启动与不依赖 React 的对象服务：SlotsService 包装 SlotCore 并提供 renderer 数据源；SessionsService 拥有 Session 对象以及 Chat 所需的列表、scope 和事件窗口状态；SessionHistoryService 为检查类消费方惰性拥有彼此独立的原始历史账本，先加载当前尾部，并仅在消费方请求时向前补入一页更早历史。每份历史快照都会公开原始窗口的绝对基准序号，因此即使该页没有新增任何 surface 可见节点，消费方仍能检测到向前补页。WorkspacesService 依赖 SessionsService，拥有 Workspace 对象、列表／操作、默认目标派生，以及 New Session 空会话复用入口（`connectWorkspace`）。运行时把共享 Host 流分发给 Session、Workspace 和已激活的历史数据所有者，不让检查状态经过 Session 或 SessionManager，并把注册表失效帧桥接为类型化 ctx 事件（`commands/changed`、`settings/changed`、`credentials/changed`、`models/changed`），使各表面缓存无需触碰流即可重拉。客户端会话一律由 Host 创建（一次 `session.create` 同时产生 Session、agent（智能体）和 cwd）；客户端不持有任何实体化之前的会话状态——agent scope（host dsh-scope 的客户端镜像，以 agent/session 共用 id 为键）在会话行进入列表镜像时创建，并随 prune 销毁。契约：api-contracts v3 §4。每个 `Session` 持有一个通用的 `ProjectionValueStore`，由历史记录尾部的 `projections` 块播种，并经 `session/projection` 帧按 seq 高者胜更新；领域键（含 `todos`）经 `projections.faceOf`／`useProjection` 读取，不经 `ConversationSnapshot`。该 store 还会通过 `SessionSummary.projectionValues` 发布一份引用稳定的完整值映射，使全局列表消费方无需为每个会话创建订阅，即可复用同一组投影。

 ## Workspace 与 Session 列表

@@ -20,7 +20,7 @@ SlotsService 分别为 renderer 提供 `useSessions` 与 `useWorkspaces` 的裸

 ## New Session 与 blank 镜像

-`WorkspacesService.connectWorkspace(workspaceId)` 解析 New Session 流程最终落入的会话：先在列表镜像中复用该 workspace 的既有空会话（`blank && cwd == workspace.path`），未命中则调用 `session.create({workspaceId})`，返回会话 id 由调用方 open。`SessionSummary.blank` 镜像主机派生的空日志位，在客户端只降不升：由 `session.list`／`host/session-added` 帧播种，本地首次获 Host 接受的 `prompt()`（RPC 成功响应时——受理即证明用户消息已入主机日志；首讯被拒则会话保持 blank、保持可复用）与任何 `running: true` 状态帧翻为 false，每次列表重拉重新对齐。列表界面隐藏 blank 行；store 保留全部行。`SessionsService.create` 接受可选的、由调用方预先分配的 SessionId，失败时抛出 `SessionCreateError`（携带 `requestedSessionId`）。
+`WorkspacesService.connectWorkspace(workspaceId)` 解析 New Session 流程最终落入的会话：先在列表镜像中复用该 workspace 的既有空会话（`blank && cwd == workspace.path && sessionIds.includes(id)`——host 自己的成员规则，绝不只按 cwd，避免劫持 cwd 匹配但未入账的空白会话），未命中则调用 `session.create({workspaceId})`，返回会话 id 由调用方 open。`SessionSummary.blank` 镜像主机派生的空日志位，在客户端只降不升：由 `session.list`／`host/session-added` 帧播种，本地首次获 Host 接受的 `prompt()`（RPC 成功响应时——受理即证明用户消息已入主机日志；首讯被拒则会话保持 blank、保持可复用）与任何 `running: true` 状态帧翻为 false，每次列表重拉重新对齐。列表界面隐藏 blank 行；store 保留全部行。`SessionsService.create` 接受可选的、由调用方预先分配的 SessionId，失败时抛出 `SessionCreateError`（携带 `requestedSessionId`）。

 ## 待处理队列投影

--- a/packages/client/runtime/src/client/contract/session-history.ts
+++ b/packages/client/runtime/src/client/contract/session-history.ts
@@ -9,6 +9,8 @@ export interface SessionHistorySnapshot {
  state: 'cold' | 'loading' | 'ready' | 'error'
  error: RpcError | null
  hasMore: boolean
+  /** Absolute sequence of the first loaded raw event, or zero for an empty window. */
+  baseSeq: number
  inspection: SessionHistoryInspection
 }

@@ -17,11 +19,17 @@ export interface SessionHistoryFace
  extends ObservableSnapshot<SessionHistorySnapshot> {
  readonly sessionId: SessionId
  /**
-   * Load the tail and exhaust every available older page.
-   * @param signal - Consumer lifetime; abort is observed between page requests.
-   * @returns When the available ledger is complete or stops advancing.
+   * Load the current tail without reading older pages.
+   * @param signal - Consumer lifetime.
+   * @returns When the tail is ready or loading fails.
   */
-  loadAll(signal?: AbortSignal): Promise<void>
+  loadTail(signal?: AbortSignal): Promise<void>
+  /**
+   * Prepend one older page when the current window has a predecessor.
+   * @param signal - Consumer lifetime.
+   * @returns Whether the loaded window advanced.
+   */
+  loadOlder(signal?: AbortSignal): Promise<boolean>
 }

 /** Runtime service resolving independent history sources. */
--- a/packages/client/runtime/src/client/session-history/history-fold.ts
+++ b/packages/client/runtime/src/client/session-history/history-fold.ts
@@ -49,18 +49,10 @@ function assistantStepKey(turn: number, step: number): string {
  return `${turn}\u0000${step}`
 }

-// Trajectory owns surface-window reconstruction so its immutable ledger does
-// not depend on Chat's live fold adapter or Session's mutable state.
-/* jscpd:ignore-start */
-function paddingEvent(seq: number): SessionEvent {
-  return { type: 'noop/padding', seq, time: 0, data: {} } as unknown as SessionEvent
-}
-
 function replacementCrossesWindowHead(event: SessionEvent, baseSeq: number): boolean {
  if (!isSurfaceEvent(event) || event.surfaceOp === 'append') return false
  return event.surfaceOp.start < baseSeq || event.surfaceOp.end < baseSeq
 }
-/* jscpd:ignore-end */

 function contextOriginKind(event: SessionEvent | undefined): ConversationContextOriginKind {
  if (event?.type !== 'user/message') return 'rewrite'
@@ -84,27 +76,63 @@ function isTokenDelta(chunk: SessionEvent<'assistant/chunk'>['data']['chunk']):
  }
 }

-function foldContexts(events: readonly SessionEvent[]): readonly FoldedContext[] {
+function foldContexts(
+  events: readonly SessionEvent[],
+): readonly FoldedContext[] {
  const replay: SessionEvent[] = []
+  const originalSeqs: number[] = []
+  const rebasedSeqByOriginal = new Map<number, number>()
  const surface = new SurfaceManager(replay)
  const contexts: FoldedContext[] = []
  let generation = 0
  let originSeq: number | undefined
+  const originalNodes = () => surface.nodes.map((seq) => {
+    const original = originalSeqs[seq]
+    if (original === undefined) throw new Error(`rebased surface seq ${seq} has no origin`)
+    return original
+  })
  for (const event of events) {
-    if (isSurfaceEvent(event) && event.surfaceOp !== 'append') {
+    if (!isSurfaceEvent(event)) continue
+    if (event.surfaceOp !== 'append') {
      contexts.push({
        generation,
-        nodes: [...surface.nodes],
+        nodes: originalNodes(),
        ...(originSeq === undefined ? {} : { originSeq }),
      })
      generation++
      originSeq = event.seq
    }
-    replay.push(event)
+    const rebasedSeq = replay.length
+    const {
+      sourceEventSeqs: rawSources,
+      ...eventWithoutSources
+    } = event as SessionEvent & { sourceEventSeqs?: readonly number[] }
+    const mappedSourceEventSeqs = rawSources?.flatMap((seq) => {
+      const rebased = rebasedSeqByOriginal.get(seq)
+      return rebased === undefined ? [] : [rebased]
+    })
+    const sourceEventSeqs = mappedSourceEventSeqs?.length === 0
+      ? undefined
+      : mappedSourceEventSeqs
+    const surfaceOp = event.surfaceOp === 'append'
+      ? event.surfaceOp
+      : {
+        ...event.surfaceOp,
+        start: rebasedSeqByOriginal.get(event.surfaceOp.start) ?? event.surfaceOp.start,
+        end: rebasedSeqByOriginal.get(event.surfaceOp.end) ?? event.surfaceOp.end,
+      }
+    originalSeqs.push(event.seq)
+    rebasedSeqByOriginal.set(event.seq, rebasedSeq)
+    replay.push({
+      ...eventWithoutSources,
+      seq: rebasedSeq,
+      surfaceOp,
+      ...(sourceEventSeqs === undefined ? {} : { sourceEventSeqs }),
+    } as SessionEvent)
  }
  contexts.push({
    generation,
-    nodes: [...surface.nodes],
+    nodes: originalNodes(),
    ...(originSeq === undefined ? {} : { originSeq }),
  })
  return contexts
@@ -332,10 +360,7 @@ export function projectConversationHistory(
 ): ConversationHistoryProjection {
  const events = entries.map(entry => entry.event)
  const baseSeq = events[0]?.seq ?? 0
-  const padded = [
-    ...Array.from({ length: baseSeq }, (_, seq) => paddingEvent(seq)),
-    ...events,
-  ]
+  const eventsBySeq = new Map(events.map(event => [event.seq, event]))
  const callIndex = new Map<string, CallIndexEntry>()
  const resultViews = new Map<number, ToolResultView>()
  const assistantSteps = new Map<string, AssistantStepMetadata>()
@@ -405,7 +430,7 @@ export function projectConversationHistory(
  const materialize = (seq: number): ConversationNode | undefined => {
    const cached = nodeCache.get(seq)
    if (cached !== undefined) return cached
-    const event = padded[seq]
+    const event = eventsBySeq.get(seq)
    if (event === undefined || !isSurfaceEligibleType(event.type)) return
    const node = materializeNode(
      event,
@@ -431,7 +456,7 @@ export function projectConversationHistory(
    }]
  } else {
    try {
-      contexts = foldContexts(padded).map((context): ConversationContext => {
+      contexts = foldContexts(events).map((context): ConversationContext => {
        const nodes = context.nodes.flatMap((seq) => {
          const node = materialize(seq)
          return node === undefined ? [] : [node]
@@ -444,7 +469,7 @@ export function projectConversationHistory(
            nodes,
          }
        }
-        const originEvent = padded[context.originSeq]
+        const originEvent = eventsBySeq.get(context.originSeq)
        return {
          id: context.generation,
          parentId: context.generation - 1,
--- a/packages/client/runtime/src/client/session-history/source.ts
+++ b/packages/client/runtime/src/client/session-history/source.ts
@@ -6,7 +6,9 @@ import { transportError } from '@deepseek-ai/dsh-host-apiproxy/api'
 import type {
  SessionHistoryFace, SessionHistorySnapshot,
 } from '../contract/session-history.ts'
-import { createHistoryInspection } from '../sessions/history.ts'
+import {
+  compactHistoryInspectionEntries, createHistoryInspection,
+} from '../sessions/history.ts'
 import { Notifier } from '../sessions/notifier.ts'
 import { isVisibleAssistantChunk, PartialAccumulator } from '../sessions/partial.ts'

@@ -18,7 +20,8 @@ function isAborted(signal: AbortSignal | undefined): boolean {

 /** Independent raw-history owner used only by inspection consumers. */
 export class SessionHistorySource implements SessionHistoryFace {
-  private entries: readonly HistoryEntry[] = []
+  private entries: HistoryEntry[] = []
+  private inspectionEntries: readonly HistoryEntry[] = []
  private baseSeq = 0
  private hasMore = false
  private state: SessionHistorySnapshot['state'] = 'cold'
@@ -36,7 +39,6 @@ export class SessionHistorySource implements SessionHistoryFace {
    value: SessionHistorySnapshot['inspection']
  } | null = null
  private streamPublishToken: object | null = null
-  private streamBaseInspection: SessionHistorySnapshot['inspection'] | null = null
  private streamPartial: PartialAccumulator | null = null
  private snapshotCache: SessionHistorySnapshot
  private readonly notifier = new Notifier(() => {
@@ -73,37 +75,29 @@ export class SessionHistorySource implements SessionHistoryFace {
  }

  /**
-   * Load the tail and exhaust all available older pages.
+   * Load the current tail without reading older pages.
   * @param signal - Consumer lifetime.
-   * @returns When paging completes, fails to advance, or is aborted.
+   * @returns When the tail is ready or loading fails.
   */
-  async loadAll(signal?: AbortSignal): Promise<void> {
-    if (signal?.aborted === true) return
+  async loadTail(signal?: AbortSignal): Promise<void> {
+    if (isAborted(signal)) return
    this.trackConsumer(signal)
    await this.open()
-    while (
-      !isAborted(signal)
-      && this.state === 'ready'
-      && this.hasMore
-    ) {
-      const previousBaseSeq = this.baseSeq
-      await this.loadOlder()
-      if (isAborted(signal) || this.baseSeq === previousBaseSeq) return
-    }
  }

-  /** Rebuild and page for whichever mounted consumers survive a reconnect. */
-  private async loadForConsumers(): Promise<void> {
+  /**
+   * Prepend one older page when the current window has a predecessor.
+   * @param signal - Consumer lifetime.
+   * @returns Whether the loaded window advanced.
+   */
+  async loadOlder(signal?: AbortSignal): Promise<boolean> {
+    if (isAborted(signal)) return false
+    this.trackConsumer(signal)
    await this.open()
-    while (
-      this.hasConsumer()
-      && this.state === 'ready'
-      && this.hasMore
-    ) {
-      const previousBaseSeq = this.baseSeq
-      await this.loadOlder()
-      if (!this.hasConsumer() || this.baseSeq === previousBaseSeq) return
-    }
+    if (isAborted(signal)) return false
+    const previousBaseSeq = this.baseSeq
+    await this.loadOlderPage()
+    return this.baseSeq !== previousBaseSeq
  }

  /**
@@ -144,12 +138,13 @@ export class SessionHistorySource implements SessionHistoryFace {
    this.liveBuffer = []
    this.subscribedLastSeq = null
    this.entries = []
+    this.inspectionEntries = []
    this.baseSeq = 0
    this.hasMore = false
    this.state = 'cold'
    this.error = null
    this.publishDirtyNow()
-    void this.loadForConsumers()
+    void this.open()
  }

  /** Stop future refresh work after the host removes the session. */
@@ -161,7 +156,6 @@ export class SessionHistorySource implements SessionHistoryFace {
    this.olderPromise = null
    this.liveBuffer = []
    this.streamPublishToken = null
-    this.streamBaseInspection = null
    this.streamPartial = null
  }

@@ -234,7 +228,7 @@ export class SessionHistorySource implements SessionHistoryFace {
    }
  }

-  private loadOlder(): Promise<void> {
+  private loadOlderPage(): Promise<void> {
    if (this.olderPromise !== null) return this.olderPromise
    if (this.state !== 'ready' || !this.hasMore) return Promise.resolve()
    const generation = this.generation
@@ -260,6 +254,7 @@ export class SessionHistorySource implements SessionHistoryFace {
          return
        }
        this.entries = [...older, ...this.entries]
+        this.inspectionEntries = compactHistoryInspectionEntries([...this.entries])
        this.baseSeq = older[0]?.event.seq ?? this.baseSeq
        this.hasMore = result.value.hasMore
      } catch (error) {
@@ -291,6 +286,7 @@ export class SessionHistorySource implements SessionHistoryFace {
      this.entries = [...prefix, ...tail]
    }
    this.baseSeq = this.entries[0]?.event.seq ?? 0
+    this.inspectionEntries = compactHistoryInspectionEntries([...this.entries])
    const buffered = this.liveBuffer
    this.liveBuffer = []
    for (const entry of buffered) this.appendLive(entry)
@@ -324,7 +320,11 @@ export class SessionHistorySource implements SessionHistoryFace {
  private appendLive(entry: HistoryEntry): void {
    const tailSeq = this.tailSeq()
    if (tailSeq !== null && entry.event.seq <= tailSeq) return
-    this.entries = [...this.entries, entry]
+    this.entries.push(entry)
+    this.inspectionEntries = [...this.inspectionEntries, entry]
+    if (entry.event.type === 'assistant/message') {
+      this.inspectionEntries = compactHistoryInspectionEntries(this.inspectionEntries)
+    }
  }

  /** Append a chunk against the cached finalized projection; false means no visible publish. */
@@ -336,11 +336,10 @@ export class SessionHistorySource implements SessionHistoryFace {
    if (!isVisibleAssistantChunk(chunk.type)) {
      const inspection = this.currentInspection()
      this.appendLive(entry)
-      this.inspectionCache = { entries: this.entries, value: inspection }
+      this.inspectionCache = { entries: this.inspectionEntries, value: inspection }
      return false
    }
-    const base = this.streamBaseInspection ?? this.currentInspection()
-    this.streamBaseInspection = base
+    const base = this.currentInspection()
    if (
      this.streamPartial === null
      || this.streamPartial.turn !== turn
@@ -356,7 +355,7 @@ export class SessionHistorySource implements SessionHistoryFace {
    this.streamPartial.push(chunk)
    this.appendLive(entry)
    this.inspectionCache = {
-      entries: this.entries,
+      entries: this.inspectionEntries,
      value: { ...base, partial: this.streamPartial.toPartial() },
    }
    return true
@@ -382,7 +381,6 @@ export class SessionHistorySource implements SessionHistoryFace {
  /** Publish structural changes immediately and invalidate an older scheduled stream publish. */
  private publishDirtyNow(): void {
    this.streamPublishToken = null
-    this.streamBaseInspection = null
    this.streamPartial = null
    this.notifier.markDirty()
  }
@@ -415,14 +413,15 @@ export class SessionHistorySource implements SessionHistoryFace {
      state: this.state,
      error: this.error,
      hasMore: this.hasMore,
+      baseSeq: this.baseSeq,
      inspection: this.currentInspection(),
    }
  }

  /** Inspection pinned to the source's current immutable entry array. */
  private currentInspection(): SessionHistorySnapshot['inspection'] {
-    if (this.inspectionCache?.entries !== this.entries) {
-      const entries = this.entries
+    if (this.inspectionCache?.entries !== this.inspectionEntries) {
+      const entries = this.inspectionEntries
      this.inspectionCache = {
        entries,
        value: createHistoryInspection(() => entries),
--- a/packages/client/runtime/src/client/sessions/history.ts
+++ b/packages/client/runtime/src/client/sessions/history.ts
@@ -7,6 +7,24 @@ import type { ConversationContext } from './conversation-context.ts'
 import { projectConversationHistory } from '../session-history/history-fold.ts'
 import { inspectRequests, type RequestView } from './request-inspection.ts'

+function assistantStepKey(turn: number, step: number): string {
+  return `${turn}\u0000${step}`
+}
+
+function isFirstTokenCandidate(entry: HistoryEntry): boolean {
+  const event = entry.event
+  if (event.type !== 'assistant/chunk') return false
+  switch (event.data.chunk.type) {
+    case 'text-delta':
+    case 'reasoning-delta':
+      return event.data.chunk.text !== ''
+    case 'tool-call-delta':
+      return event.data.chunk.argumentsDelta !== '' || event.data.chunk.name !== undefined
+    default:
+      return false
+  }
+}
+
 /** Lazily derived inspection data for one immutable session-history window. */
 export interface SessionHistoryInspection {
  eventNodes: readonly ConversationNode[]
@@ -19,6 +37,47 @@ export interface SessionHistoryInspection {
  codeDispatches: ReadonlyMap<string, readonly CodeSubCall[]>
 }

+/**
+ * Remove completed-step token payloads that no inspection projection reads.
+ * The first visible token preserves timing, usage chunks preserve accounting,
+ * and unfinished steps retain every chunk for live or interrupted content.
+ * @param entries - Contiguous raw history entries in sequence order.
+ * @returns A projection-equivalent, usually much smaller entry ledger.
+ */
+export function compactHistoryInspectionEntries(
+  entries: readonly HistoryEntry[],
+): readonly HistoryEntry[] {
+  const completedSteps = new Set<string>()
+  for (const { event } of entries) {
+    if (event.type === 'assistant/message') {
+      completedSteps.add(assistantStepKey(event.data.turn, event.data.step))
+    }
+  }
+
+  const firstTokenSteps = new Set<string>()
+  const compacted: HistoryEntry[] = []
+  let changed = false
+  for (const entry of entries) {
+    const event = entry.event
+    if (event.type !== 'assistant/chunk') {
+      compacted.push(entry)
+      continue
+    }
+    const key = assistantStepKey(event.data.turn, event.data.step)
+    if (!completedSteps.has(key) || event.data.chunk.type === 'usage') {
+      compacted.push(entry)
+      continue
+    }
+    if (isFirstTokenCandidate(entry) && !firstTokenSteps.has(key)) {
+      firstTokenSteps.add(key)
+      compacted.push(entry)
+    } else {
+      changed = true
+    }
+  }
+  return changed ? compacted : entries
+}
+
 /**
 * Create a lazy inspection projection over an immutable history window.
 * Conversation consumers retain the cheap wrapper; only Trajectory snapshots
--- a/packages/client/runtime/src/client/sessions/request-inspection.ts
+++ b/packages/client/runtime/src/client/sessions/request-inspection.ts
@@ -94,7 +94,8 @@ export interface RequestInspectionSnapshot {
 /**
 * Derive the request-centric read model from one immutable history window.
 * Compaction participates as a request purpose rather than a parallel
- * top-level collection.
+ * top-level collection. A leading resume/change header exposes its prompt but
+ * cannot project a change until the preceding header enters the window.
 * @param entries - Contiguous raw session history.
 * @returns Requests and call-time schemas derived from that history.
 */
@@ -218,6 +219,7 @@ function promptChange(
  prompt: ConversationPromptSnapshot,
  event: SessionEvent<'request/header'>,
 ): RequestPromptChange | undefined {
+  if (previous === undefined && event.data.reason !== 'initial') return
  const systemChanged = previous !== undefined && previous.system !== prompt.system
  const toolsChanged = previous !== undefined
    && JSON.stringify(previous.tools) !== JSON.stringify(prompt.tools)
--- a/packages/client/runtime/src/client/workspaces/service.ts
+++ b/packages/client/runtime/src/client/workspaces/service.ts
@@ -94,15 +94,19 @@ export class WorkspacesService implements IWorkspaces {
    // would miss the reuse scan and mint another hidden blank session.
    const inflight = this.connecting.get(workspaceId)
    if (inflight !== undefined) return inflight
-    // Reuse: blank && same canonical cwd (workspace.path is the host realpath
-    // canon; summary cwd is the session header passthrough of the same canon).
-    // An archived blank is never reused: reuse would open a session no
-    // grouping surface can show, so New Session mints a fresh one instead.
+    // Reuse requires workspace membership (id in sessionIds AND same
+    // canonical cwd — the host's own membership rule), never cwd alone:
+    // a cwd match can belong to no account (sessions the CLI/TUI birthed at
+    // the host cwd, or a deleted/recreated registration) and reusing it
+    // would open a session no grouping surface shows under this workspace.
+    // An archived blank is never reused either: reuse would open a session
+    // no grouping surface can show, so New Session mints a fresh one instead.
    const archived = this.list.getSnapshot().archivedSessionIds
    const sessions = this.sessions.list.getSnapshot()
    for (const id of sessions.ids) {
      const summary = sessions.byId[id]
      if (summary !== undefined && summary.blank && summary.cwd === workspace.path
+        && workspace.sessionIds.includes(summary.id)
        && !archived.includes(summary.id)) return summary.id
    }
    const attempt = this.sessions.create({ workspaceId })
--- a/packages/client/runtime/tests/history-fold.spec.ts
+++ b/packages/client/runtime/tests/history-fold.spec.ts
@@ -2,12 +2,45 @@ import { createMessage } from '@deepseek-ai/dsh-llm'
 import type { SessionEvent } from '@deepseek-ai/dsh-session/types'
 import { describe, expect, it } from 'vitest'
 import { projectConversationHistory } from '../src/client/session-history/history-fold.ts'
+import { compactHistoryInspectionEntries } from '../src/client/sessions/history.ts'
+import { inspectRequests } from '../src/client/sessions/request-inspection.ts'
 import { ev } from './event-script.ts'

 const at = (seq: number, event: Record<string, unknown>): SessionEvent =>
  ({ seq, time: 1_700_000_000_000 + seq, ...event }) as unknown as SessionEvent

 describe('projectConversationHistory', () => {
+  it('projects a high-sequence history window without synthesizing its unloaded prefix', () => {
+    const baseSeq = 400_000
+    const events = [
+      ev.user(baseSeq, 'loaded tail'),
+      at(baseSeq + 1, {
+        type: 'assistant/message',
+        surfaceOp: { op: 'replace', start: baseSeq, end: baseSeq },
+        sourceEventSeqs: [baseSeq],
+        data: {
+          turn: 80,
+          step: 1,
+          message: createMessage({
+            role: 'assistant',
+            content: [{ type: 'text', text: 'tail summary' }],
+            source: { kind: 'model', provider: 'fake', model: 'fake' },
+          }),
+        },
+      }),
+    ]
+
+    const projection = projectConversationHistory(events.map(event => ({ event })))
+    expect(projection.eventNodes.map(node => node.seq)).toEqual([baseSeq, baseSeq + 1])
+    expect(projection.contexts.map(context => ({
+      originSeq: context.originSeq,
+      nodes: context.nodes.map(node => node.seq),
+    }))).toEqual([
+      { originSeq: undefined, nodes: [baseSeq] },
+      { originSeq: baseSeq + 1, nodes: [baseSeq + 1] },
+    ])
+  })
+
  it('projects frozen surface generations without widening the core live surface', () => {
    const events = [
      ev.user(0, 'a'),
@@ -91,4 +124,35 @@ describe('projectConversationHistory', () => {
      requestConfig: { provider: 'fake', model: 'first' },
    })
  })
+
+  it('drops completed token payloads without changing inspection projections', () => {
+    const events = [
+      ev.user(0, 'before'),
+      ev.stepStart(1, 1, 0),
+      ev.chunkStart(2, 1),
+      ev.chunkText(3, 1, ''),
+      ev.chunkText(4, 1, 'first'),
+      ev.chunkText(5, 1, ' discarded'),
+      at(6, { type: 'assistant/chunk', data: {
+        turn: 1,
+        step: 0,
+        chunk: { type: 'usage', usage: { inputTokens: 4, outputTokens: 2 } },
+      } }),
+      ev.assistant(7, 1, 'first discarded'),
+      ev.compactSummary(8, 'summary', 0, 7),
+      ev.compactCheckpoint(9, 8, 0, 7),
+      ev.stepStart(10, 2, 0),
+      ev.chunkStart(11, 2),
+      ev.chunkText(12, 2, 'interrupted'),
+      ev.turnEnd(13, 2, 'aborted'),
+    ]
+    const raw = events.map(event => ({ event }))
+    const compacted = compactHistoryInspectionEntries(raw)
+
+    expect(compacted.map(entry => entry.event.seq)).toEqual([
+      0, 1, 4, 6, 7, 8, 9, 10, 11, 12, 13,
+    ])
+    expect(projectConversationHistory(compacted)).toEqual(projectConversationHistory(raw))
+    expect(inspectRequests(compacted)).toEqual(inspectRequests(raw))
+  })
 })
--- a/packages/client/runtime/tests/request-inspection.spec.ts
+++ b/packages/client/runtime/tests/request-inspection.spec.ts
@@ -85,6 +85,56 @@ describe('inspectRequests', () => {
    expect(snapshot.callSchemas.get('call-1')?.name).toBe('read')
  })

+  it('does not promote a truncated resume or change header to the initial prompt', () => {
+    for (const reason of ['resume', 'change'] as const) {
+      const snapshot = inspectRequests(entriesOf([
+        at(10, 'step/start', { turn: 3, step: 1 }),
+        at(11, 'request/header', {
+          reason,
+          header: {
+            config: { provider: 'fake', model: 'model' },
+            system: 'tail-window prompt',
+          },
+        }),
+      ]))
+
+      expect(snapshot.requests[0]).toMatchObject({
+        purpose: 'assistant',
+        prompt: { system: 'tail-window prompt' },
+      })
+      expect(snapshot.requests[0]).not.toHaveProperty('promptChange')
+    }
+  })
+
+  it('classifies a prompt change once the preceding header is loaded', () => {
+    const snapshot = inspectRequests(entriesOf([
+      at(0, 'step/start', { turn: 1, step: 1 }),
+      at(1, 'request/header', {
+        reason: 'initial',
+        header: {
+          config: { provider: 'fake', model: 'model' },
+          system: 'before',
+        },
+      }),
+      at(2, 'step/start', { turn: 1, step: 2 }),
+      at(3, 'request/header', {
+        reason: 'change',
+        header: {
+          config: { provider: 'fake', model: 'model' },
+          system: 'after',
+        },
+      }),
+    ]))
+
+    expect(snapshot.requests[1]).toMatchObject({
+      promptChange: {
+        seq: 3,
+        kind: 'system',
+        previous: { system: 'before' },
+      },
+    })
+  })
+
  it('preserves a standalone compaction owner without widening assistant turns', () => {
    const snapshot = inspectRequests(entriesOf([
      at(0, 'compact/start', { turn: null }),
--- a/packages/client/runtime/tests/session-history-source.spec.ts
+++ b/packages/client/runtime/tests/session-history-source.spec.ts
@@ -16,7 +16,7 @@ function histResponse(events: SessionEvent[], hasMore = false) {
 }

 describe('SessionHistorySource', () => {
-  it('loads every older page without changing a Chat session', async () => {
+  it('loads the tail first and prepends older pages on demand', async () => {
    const pages = [
      plainTurn(0, 0, '最早问', '最早答'),
      plainTurn(6, 1, '中间问', '中间答'),
@@ -30,10 +30,21 @@ describe('SessionHistorySource', () => {
    }
    const source = new SessionHistorySource(SID, api)

-    await source.loadAll()
+    await source.loadTail()
+
+    expect(api.callsOf('session.history')).toHaveLength(1)
+    expect(source.getSnapshot().hasMore).toBe(true)
+    expect(source.getSnapshot().baseSeq).toBe(12)
+    expect(source.getSnapshot().inspection.eventNodes.map(node => node.seq))
+      .toEqual([13, 15])
+
+    expect(await source.loadOlder()).toBe(true)
+    expect(await source.loadOlder()).toBe(true)
+    expect(await source.loadOlder()).toBe(false)

    expect(api.callsOf('session.history')).toHaveLength(3)
    expect(source.getSnapshot().hasMore).toBe(false)
+    expect(source.getSnapshot().baseSeq).toBe(0)
    expect(source.getSnapshot().inspection.eventNodes.map(node => node.seq))
      .toEqual([1, 3, 7, 9, 13, 15])
  })
@@ -42,7 +53,7 @@ describe('SessionHistorySource', () => {
    const api = new FakeApiClient()
    api.onHistory = () => histResponse(plainTurn(0, 0, '问', '答'))
    const source = new SessionHistorySource(SID, api)
-    await source.loadAll()
+    await source.loadTail()
    const before = source.getSnapshot()

    source.handleMuxFrame({
@@ -60,7 +71,7 @@ describe('SessionHistorySource', () => {
    const api = new FakeApiClient()
    api.onHistory = () => histResponse(plainTurn(0, 0, '问', '答'))
    const source = new SessionHistorySource(SID, api)
-    await source.loadAll()
+    await source.loadTail()
    const frames: FrameRequestCallback[] = []
    vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
      frames.push(callback)
@@ -132,13 +143,14 @@ describe('SessionHistorySource', () => {
      }))
    const source = new SessionHistorySource(SID, api)

-    await source.loadAll()
+    await source.loadTail()
+    expect(await source.loadOlder()).toBe(false)

    expect(api.callsOf('session.history')).toHaveLength(2)
    expect(source.getSnapshot().hasMore).toBe(true)
  })

-  it('observes consumer cancellation between older pages', async () => {
+  it('finishes an already started older page after consumer cancellation', async () => {
    const middle = deferred<Awaited<ReturnType<FakeApiClient['onHistory']>>>()
    const olderStarted = deferred<undefined>()
    const api = new FakeApiClient()
@@ -151,7 +163,8 @@ describe('SessionHistorySource', () => {
    }
    const source = new SessionHistorySource(SID, api)
    const controller = new AbortController()
-    const complete = source.loadAll(controller.signal)
+    await source.loadTail(controller.signal)
+    const complete = source.loadOlder(controller.signal)
    await olderStarted.promise
    controller.abort()
    middle.resolve(ok({
@@ -159,7 +172,7 @@ describe('SessionHistorySource', () => {
      hasMore: true,
    }))

-    await complete
+    expect(await complete).toBe(true)

    expect(api.callsOf('session.history')).toHaveLength(2)
    expect(source.getSnapshot().hasMore).toBe(true)
--- a/packages/client/runtime/tests/workspaces-service.spec.ts
+++ b/packages/client/runtime/tests/workspaces-service.spec.ts
@@ -149,26 +149,37 @@ describe('WorkspacesService', () => {
    expect(workspaces.list.getSnapshot().items.map(item => item.workspaceId)).toEqual(['stable-first', 'active'])
  })

-  it('connectWorkspace reuses the workspace-matched blank session and creates otherwise', async () => {
+  it('connectWorkspace reuses the workspace-member blank session and creates otherwise', async () => {
    const ctx = new Context()
    const api = new FakeApiClient()
    const sessions = new SessionsService(ctx, api)
    const workspaces = new WorkspacesService(ctx, api, sessions)
    api.onWorkspaceList = () => Promise.resolve(ok({
-      items: [workspace('alpha'), workspace('beta')] as never[],
+      items: [workspace('alpha', [sid('s-blank')]), workspace('beta'), workspace('gamma')] as never[],
    }))
    api.onList = () => Promise.resolve(ok({
      items: [
-        // Blank session already parked in alpha (cwd == workspace path canon).
+        // Stray blank at alpha's path but NOT accounted under alpha (a CLI
+        // session birthed at the host cwd), sorted before the member blank:
+        // the scan must skip it and keep looking for a member hit.
+        { sessionId: sid('s-stray-alpha'), updatedAt: 1, running: false, blank: true, cwd: '/w/alpha' },
+        // Blank session parked in alpha (cwd == workspace path canon AND
+        // accounted under alpha): the reuse hit.
        { sessionId: sid('s-blank'), updatedAt: 2, running: false, blank: true, cwd: '/w/alpha' },
        // Non-blank sibling in beta must never be reused.
        { sessionId: sid('s-active'), updatedAt: 3, running: false, blank: false, cwd: '/w/beta' },
+        // Stray blank at gamma's path but NOT accounted under gamma (a CLI
+        // session birthed at the host cwd): cwd alone must not hijack it —
+        // reuse would open a session gamma cannot show, so New Session mints
+        // a fresh accounted one instead.
+        { sessionId: sid('s-stray'), updatedAt: 4, running: false, blank: true, cwd: '/w/gamma' },
      ] as never[],
    }))
    await Promise.all([workspaces.refresh(), sessions.refresh()])
    await Promise.resolve()

-    // Hit: same workspace → the parked blank session comes back, no create RPC.
+    // Hit: same workspace → the parked member blank comes back (the earlier
+    // cwd-matching non-member stray is skipped), no create RPC.
    await expect(workspaces.connectWorkspace(wid('alpha'))).resolves.toBe('s-blank')
    expect(api.callsOf('session.create')).toEqual([])
    // Resolution guarantee: the id is binding-resolvable synchronously.
@@ -181,6 +192,12 @@ describe('WorkspacesService', () => {
    // Same guarantee on the create arm (draft hand-off writes the machine pre-open).
    expect(sessions.binding(sid('s-fresh'))).toBeDefined()

+    // Miss: the stray blank matches gamma's path but is not a gamma member →
+    // never reused, a fresh accounted session is created instead.
+    api.onCreate = () => Promise.resolve(ok({ sessionId: sid('s-fresh-3') }))
+    await expect(workspaces.connectWorkspace(wid('gamma'))).resolves.toBe('s-fresh-3')
+    expect(api.callsOf('session.create')).toEqual([{ workspaceId: 'beta' }, { workspaceId: 'gamma' }])
+
    // Unknown workspace fails loud instead of silently creating in nowhere.
    await expect(workspaces.connectWorkspace(wid('ghost'))).rejects.toThrow(/unknown workspace ghost/)

@@ -196,7 +213,7 @@ describe('WorkspacesService', () => {
    const api = new FakeApiClient()
    const sessions = new SessionsService(ctx, api)
    const workspaces = new WorkspacesService(ctx, api, sessions)
-    api.onWorkspaceList = () => Promise.resolve(ok({ items: [workspace('alpha')] as never[] }))
+    api.onWorkspaceList = () => Promise.resolve(ok({ items: [workspace('alpha', [sid('s-blank')])] as never[] }))
    api.onList = () => Promise.resolve(ok({
      items: [{ sessionId: sid('s-blank'), updatedAt: 2, running: false, blank: true, cwd: '/w/alpha' }] as never[],
    }))
--- a/packages/client/ui-conversation/README.i18n.yaml
+++ b/packages/client/ui-conversation/README.i18n.yaml
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-conversation/README.md
-README.md: d7433c151b7ab8da66d319ce71dd24f533739176
-README.zh.md: 338cb3a8673a24a387a96c4c5e65a528e01c4c68
+README.md: 3b4d2f2c1d7934d619768f2b3b355c8c585290cc
+README.zh.md: e3664a0d621214cced2d8a0d7d5d5f7800f15d90
--- a/packages/client/ui-conversation/README.md
+++ b/packages/client/ui-conversation/README.md
@@ -6,7 +6,7 @@ Conversation domain: skeleton (header/tabs/composer/empty state), chat view (gro

 Compaction renders as one collapsed row at the checkpoint's flow position without replacing the transcript above it. The disclosure renders the checkpoint's `compact/summary` provenance; when that event is outside the loaded window, the row remains visible but non-expandable. The framed checkpoint payload is model-facing and never renders.

-The resident conversation shell survives no-session and session transitions. Without a current session it renders a disabled input bar; its root-scoped `conversation.hero.workspace` slot hosts the Workspace picker. Selecting a Workspace connects or reuses its Host-owned blank session and opens that session without replacing the shell. Blank sessions render the same composer body as active sessions, while the InputHub carries drafts across Workspace switches and mirrors them into the session store. In the active phase the session header shows only the current session title and view tabs as ordinary column chrome; fork lineage remains session data and is not projected into the header. Beneath it a scrollport (`data-conversation-scroll`) holds the flowing views and the sticky composer stack (stats dock + input docks + bar). Wheel over the textarea chains: the capped draft scrolls locally until its edge, then forwards to that host.
+The resident conversation shell survives no-session and session transitions. Without a current session it renders a disabled input bar; its root-scoped `conversation.hero.workspace` slot hosts the Workspace picker. Selecting a Workspace connects or reuses its Host-owned blank session and opens that session without replacing the shell. Blank sessions render the same composer body as active sessions, while the InputHub carries drafts across Workspace switches and mirrors them into the session store. In the active phase the session header shows only the current session title and view tabs as ordinary column chrome; fork lineage remains session data and is not projected into the header. Beneath it a scrollport (`data-conversation-scroll`) holds the flowing views and the sticky composer stack (stats dock + input docks + bar). That scrollport reserves its scrollbar gutter unconditionally, and a view opting into a composer overlay leaves it a scroll container, so the input card keeps one horizontal position whether or not the transcript scrolls and whichever view tab is shown ([decision](../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)). Wheel over the textarea chains: the capped draft scrolls locally until its edge, then forwards to that host.

 The view ring is a slot: the conversation registration declares the session-scoped `'conversation.view'` list in its `children` table, ConversationRoot renders the active entry through its renderSlot share (`only: <active id>`), and view tabs project from registration options (`id`/`order`/`label`). The chat view is this package's own entry; plugins such as ui-trajectory contribute tabs through `ctx.slots.register`, and each view owns its chrome.

--- a/packages/client/ui-conversation/README.zh.md
+++ b/packages/client/ui-conversation/README.zh.md
@@ -6,7 +6,7 @@

 压缩（compaction）在检查点自身的消息流位置渲染为一行折叠标记，不替换其上方的 transcript（文本记录）。展开内容来自检查点溯源的 `compact/summary`；该事件位于已加载窗口之外时，标记仍然可见但不可展开。面向模型的带框检查点载荷绝不渲染。

-常驻会话壳会跨无会话与会话状态切换而保留。没有当前会话时，它会渲染禁用输入栏；其根作用域的 `conversation.hero.workspace` slot 承载 Workspace 选择器。选择 Workspace 会连接或复用由 Host 拥有的空白会话，并在不替换会话壳的情况下打开该会话。空白会话与活跃会话渲染相同的输入区主体；InputHub 则在 Workspace 切换间携带草稿，并将草稿镜像到会话 store。活跃阶段，会话标题栏作为普通列 chrome，仅显示当前会话标题和视图标签；fork 谱系仍保留为会话数据，不投影到标题栏。其下滚动容器（`data-conversation-scroll`）承载流动排版的各视图与 sticky 编辑器栈（统计 dock＋输入区 dock＋输入栏）。textarea 上的滚轮会链式处理：限高草稿先在本地滚动，到达边缘后再转交给该宿主。
+常驻会话壳会跨无会话与会话状态切换而保留。没有当前会话时，它会渲染禁用输入栏；其根作用域的 `conversation.hero.workspace` slot 承载 Workspace 选择器。选择 Workspace 会连接或复用由 Host 拥有的空白会话，并在不替换会话壳的情况下打开该会话。空白会话与活跃会话渲染相同的输入区主体；InputHub 则在 Workspace 切换间携带草稿，并将草稿镜像到会话 store。活跃阶段，会话标题栏作为普通列 chrome，仅显示当前会话标题和视图标签；fork 谱系仍保留为会话数据，不投影到标题栏。其下滚动容器（`data-conversation-scroll`）承载流动排版的各视图与 sticky 编辑器栈（统计 dock＋输入区 dock＋输入栏）。该滚动容器无条件预留自己的滚动条槽，选用编辑器 overlay 的视图也仍把它保留为滚动容器，因此无论对话记录是否滚动、无论展示哪个视图标签，输入卡片都保持同一个横向位置（[决策](../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)）。textarea 上的滚轮会链式处理：限高草稿先在本地滚动，到达边缘后再转交给该宿主。

 视图环是一个 slot：会话注册在 `children` 表中声明 Session scope 的 `'conversation.view'` 列表，ConversationRoot 通过 renderSlot share 渲染活跃配置项（`only: <active id>`），视图标签页则从注册选项（`id`／`order`／`label`）投影而来。聊天视图是该包自身的配置项；ui-trajectory 等插件通过 `ctx.slots.register` 贡献标签页，每个视图负责自己的 chrome。

--- a/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
+++ b/packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css
@@ -191,6 +191,11 @@
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
+  /* Reserved unconditionally: the composer seat rides this box's content box in
+     Chat and its padding box under a view's composer overlay, so an `auto`
+     gutter moves the input card sideways by the bar's width whenever the two
+     differ ([decision](../../../../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)). */
+  scrollbar-gutter: stable;
 }

 .root[data-phase='active'] .viewArea {
@@ -221,7 +226,13 @@
   ownership of the seat geometry and its active-phase precedence. */
 .scrollBody:has([data-conversation-composer-overlay]) {
  position: relative;
-  overflow: hidden;
+  /* A clipping box nothing scrolls out of, stated as a scroll container on both
+     axes rather than `overflow: hidden`: WebKit honours the reservation above
+     only in the `overflow-y: auto` form, and a single-axis scroller computes
+     the other axis to `auto`
+     ([decision](../../../../../../.agents/notes/implemented/bug-fix/2026-08-04-composer-tab-gutter-reservation.md)). */
+  overflow-x: hidden;
+  overflow-y: auto;
 }

 .scrollBody:has([data-conversation-composer-overlay]) > .viewArea {
--- a/packages/client/ui-primitives/README.i18n.yaml
+++ b/packages/client/ui-primitives/README.i18n.yaml
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-primitives/README.md
-README.md: d4e6c2508f07f4832f2e12a836c2d447b656421e
-README.zh.md: 76dfbebd5e9db494b49d65a2528977b7ac9fed15
+README.md: 03e7e3649fd0913fb48579aa87634153f67f5baf
+README.zh.md: 090ecc34e8d514e38853de8ed52e82d3bf019b43
--- a/packages/client/ui-primitives/README.md
+++ b/packages/client/ui-primitives/README.md
@@ -10,7 +10,7 @@ Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Modal/

 ## Markdown rendering

-`MarkdownText` renders GFM and `$…$` / `$$…$$` TeX math from untrusted assistant output through React elements, with math typeset by KaTeX and trusted commands disabled. It omits raw HTML, neutralizes relative and non-HTTP(S)/mailto links, opens HTTP(S) links with safe external-link attributes, and renders absolute HTTP(S) images without a referrer; relative paths, absolute local paths, `file:` URLs, and unsupported schemes retain their alt text. `MessageText` remains the literal-text primitive for user-authored content. `extractMarkdownPlainText` removes Markdown presentation markup for compact labels while preserving raw HTML as literal text. Element spacing, responsive images, tables, links, and inline code use the same `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` tokens as deepsuite `@deepseek/md`. Fenced blocks render through `CodeBlock` (language banner, copy control, shiki for the registered grammars).
+`MarkdownText` renders GFM and `$…$`, `$$…$$`, `\(…\)`, and `\[…\]` TeX math from untrusted assistant output through React elements, with math typeset by KaTeX and trusted commands disabled; block-level same-line `$$…$$` is display math, including `\tag{}`. It omits raw HTML, neutralizes relative and non-HTTP(S)/mailto links, opens HTTP(S) links with safe external-link attributes, and renders absolute HTTP(S) images without a referrer; relative paths, absolute local paths, `file:` URLs, and unsupported schemes retain their alt text. `MessageText` remains the literal-text primitive for user-authored content. `extractMarkdownPlainText` removes Markdown presentation markup for compact labels while preserving raw HTML as literal text. Element spacing, responsive images, tables, links, and inline code use the same `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` tokens as deepsuite `@deepseek/md`. Fenced blocks render through `CodeBlock` (language banner, copy control, shiki for the registered grammars).

 ## Terminal output

--- a/packages/client/ui-primitives/README.zh.md
+++ b/packages/client/ui-primitives/README.zh.md
@@ -10,7 +10,7 @@

 ## Markdown 渲染

-`MarkdownText` 通过 React 元素渲染来自不受信任 assistant 输出的 GFM 与 `$…$` / `$$…$$` TeX 公式，公式由 KaTeX 排版并禁用受信任命令。它会省略原始 HTML，使相对链接及非 HTTP(S)/mailto 链接失效，以安全的外部链接属性打开 HTTP(S) 链接，并在不发送 referrer 的情况下渲染采用绝对 HTTP(S) URL 的图片；相对路径、绝对本地路径、`file:` URL 与不受支持的 scheme 会保留其 alt 文本。`MessageText` 仍是用户创作内容使用的字面文本原语。`extractMarkdownPlainText` 会移除 Markdown 呈现标记以用于紧凑标签，同时将原始 HTML 保留为字面文本。元素间距、响应式图片、表格、链接与行内代码使用与 deepsuite `@deepseek/md` 相同的 `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` token。围栏代码块通过 `CodeBlock` 渲染（语言横幅、复制控件，以及对已注册语法使用 shiki）。
+`MarkdownText` 通过 React 元素渲染来自不受信任 assistant 输出的 GFM 与 `$…$`、`$$…$$`、`\(…\)` 和 `\[…\]` TeX 公式，公式由 KaTeX 排版并禁用受信任命令；块级同一行 `$$…$$` 是显示公式并支持 `\tag{}`。它会省略原始 HTML，使相对链接及非 HTTP(S)/mailto 链接失效，以安全的外部链接属性打开 HTTP(S) 链接，并在不发送 referrer 的情况下渲染采用绝对 HTTP(S) URL 的图片；相对路径、绝对本地路径、`file:` URL 与不受支持的 scheme 会保留其 alt 文本。`MessageText` 仍是用户创作内容使用的字面文本原语。`extractMarkdownPlainText` 会移除 Markdown 呈现标记以用于紧凑标签，同时将原始 HTML 保留为字面文本。元素间距、响应式图片、表格、链接与行内代码使用与 deepsuite `@deepseek/md` 相同的 `--dsw-alias-markdown-*` / `--dsw-font-markdown-*` token。围栏代码块通过 `CodeBlock` 渲染（语言横幅、复制控件，以及对已注册语法使用 shiki）。

 ## 终端输出

@@ -44,6 +44,6 @@

 - **字形级图标是重新绘制的近似版本**：鱼形标志（以及 ui-conversation 持有的闪光图标）来自字体字形，而本地设计数据无法导出其矢量几何；在获得精确导出路径前，使用手工重建版本代替。
 - **Pill 与 Input 没有设计来源**：两个原子组件均自行定义；与其相似的侧边栏搜索字段和视图标签条由消费方组合，不是这些原子组件。
- **StateDot 的 `Active` 变体是设计中的隐藏占位符**：尚未实现；已交付的四种状态（done/warning/ongoing/error）构成完整的 P-I 表层。
+- **StateDot 没有 `Active` 变体**：支持的状态为 done、warning、ongoing 和 error。
 - **面向用户的文案经 label props 本地化，默认值为原中文字面量**：这些原子组件是 zero-cordis 的，拿不到 `ctx.locale`，因此 `HoverCard`（`copyLabel`/`copiedLabel`）、`TerminalBlock`（`labels`）、`JsonTree`（`labels`）、`CodeBlock`（`copyLabel`/`copiedLabel`）、`MarkdownText`（`codeLabels`）、`JsonBlock`（`truncatedLabel`）、`ConnectionBanner`（`label`）和 `Modal`（`closeLabel`）都把文案作为可选 props 接收，默认值即此前的硬编码字符串。已本地化的插件用自己的 `t` 席位传入字典驱动的 label；什么都不传的消费者渲染与本地化之前逐字节一致。`WebBlock` 尚未跟进这一模式：它的来源列表与 fetch 截断提示、以及空搜索提示仍是内联中文，待同样的 label-prop 处理。
 - **`TerminalBlock` 不是终端模拟器**：它渲染已结束或仍在运行的命令输出，而不是交互式会话：SGR 颜色与属性会被遵循，进度行所用的行内光标移动同样被遵循——回车、退格、行内擦除、制表位与字符宽度。绝对光标定位、清屏与备用屏幕序列会被剥离。基础 16 色中的洋红与青色没有对应 token，保持字面 rgb。
--- a/packages/client/ui-primitives/package.json
+++ b/packages/client/ui-primitives/package.json
@@ -27,6 +27,11 @@
    "mdast-util-from-markdown": "^2.0.3",
    "mdast-util-gfm": "^3.1.0",
    "micromark-extension-gfm": "^3.0.0",
+    "micromark-extension-math": "^3.1.0",
+    "micromark-factory-space": "^2.0.1",
+    "micromark-util-character": "^2.1.1",
+    "micromark-util-symbol": "^2.0.1",
+    "micromark-util-types": "^2.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^10.1.0",
--- a/packages/client/ui-primitives/src/markdown/MarkdownText.tsx
+++ b/packages/client/ui-primitives/src/markdown/MarkdownText.tsx
@@ -5,11 +5,16 @@ import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import { CodeBlock } from './CodeBlock.tsx'
+import { remarkMathCompatibility } from './remarkMathCompatibility.ts'
 import 'katex/dist/katex.min.css'
 import css from './MarkdownText.module.css'

 const streamingRemarkPlugins = [remarkGfm]
-const settledRemarkPlugins = [remarkGfm, remarkMath]
+const settledRemarkPlugins = [
+  remarkGfm,
+  remarkMathCompatibility,
+  remarkMath,
+]
 const settledRehypePlugins = [rehypeKatex]

 function sanitizeUrl(url: string): string {
--- a/packages/client/ui-primitives/src/markdown/remarkMathCompatibility.ts
+++ b/packages/client/ui-primitives/src/markdown/remarkMathCompatibility.ts
@@ -0,0 +1,353 @@
+/** Extend upstream dollar-only math syntax with TeX delimiters while reusing its token vocabulary. */
+
+import { factorySpace } from 'micromark-factory-space'
+import type {} from 'micromark-extension-math'
+import { markdownLineEnding } from 'micromark-util-character'
+import { codes, constants, types } from 'micromark-util-symbol'
+import type { Construct, Extension, Previous, State, Tokenizer } from 'micromark-util-types'
+
+// oxlint-disable typescript/no-this-alias -- micromark binds tokenizer context only on the outer callback.
+
+interface RemarkProcessor {
+  data(): { micromarkExtensions?: Extension[] }
+}
+
+const previousBackslash: Previous = function (code) {
+  if (code !== codes.backslash) return true
+  const tail = this.events.at(-1)
+  /* v8 ignore next -- a previous code necessarily has a preceding event. */
+  if (tail === undefined) return false
+  return tail[1].type === types.characterEscape
+}
+
+const tokenizeBackslashMathText: Tokenizer = function (effects, ok, nok) {
+  return start
+
+  function start(code: number | null): State | undefined {
+    /* v8 ignore next -- the text construct is dispatched only for a backslash. */
+    if (code !== codes.backslash) return nok(code)
+    effects.enter('mathText')
+    effects.enter('mathTextSequence')
+    effects.consume(code)
+    return open
+  }
+
+  function open(code: number | null): State | undefined {
+    if (code !== codes.leftParenthesis) return nok(code)
+    effects.consume(code)
+    effects.exit('mathTextSequence')
+    return between
+  }
+
+  function between(code: number | null): State | undefined {
+    if (code === codes.eof) return nok(code)
+    if (code === codes.backslash) {
+      return effects.attempt({ partial: true, tokenize: tokenizeClose }, close, afterCloseAttempt)(code)
+    }
+    if (markdownLineEnding(code)) {
+      effects.enter(types.lineEnding)
+      effects.consume(code)
+      effects.exit(types.lineEnding)
+      return between
+    }
+    return dataStart(code)
+  }
+
+  function afterCloseAttempt(code: number | null): State | undefined {
+    return effects.check({ partial: true, tokenize: tokenizeOpen }, nok, dataStart)(code)
+  }
+
+  function dataStart(code: number | null): State | undefined {
+    effects.enter('mathTextData')
+    effects.consume(code)
+    return code === codes.backslash ? afterDataBackslash : data
+  }
+
+  function afterDataBackslash(code: number | null): State | undefined {
+    if (code === codes.backslash) {
+      effects.consume(code)
+      return data
+    }
+    return data(code)
+  }
+
+  function data(code: number | null): State | undefined {
+    if (code === codes.eof || code === codes.backslash || markdownLineEnding(code)) {
+      effects.exit('mathTextData')
+      return between(code)
+    }
+    effects.consume(code)
+    return data
+  }
+
+  function close(code: number | null): State | undefined {
+    effects.exit('mathText')
+    return ok(code)
+  }
+
+  function tokenizeClose(closeEffects: Parameters<Tokenizer>[0], closeOk: State, closeNok: State): State {
+    return slash
+
+    function slash(code: number | null): State | undefined {
+      /* v8 ignore next -- this partial construct is attempted only at a backslash. */
+      if (code !== codes.backslash) return closeNok(code)
+      closeEffects.enter('mathTextSequence')
+      closeEffects.consume(code)
+      return parenthesis
+    }
+
+    function parenthesis(code: number | null): State | undefined {
+      if (code !== codes.rightParenthesis) return closeNok(code)
+      closeEffects.consume(code)
+      closeEffects.exit('mathTextSequence')
+      return closeOk
+    }
+  }
+
+  function tokenizeOpen(openEffects: Parameters<Tokenizer>[0], openOk: State, openNok: State): State {
+    return slash
+
+    function slash(code: number | null): State | undefined {
+      /* v8 ignore next -- the opening check follows a failed close attempt at a backslash. */
+      if (code !== codes.backslash) return openNok(code)
+      openEffects.enter(types.chunkString)
+      openEffects.consume(code)
+      return parenthesis
+    }
+
+    function parenthesis(code: number | null): State | undefined {
+      if (code !== codes.leftParenthesis) return openNok(code)
+      openEffects.consume(code)
+      openEffects.exit(types.chunkString)
+      return openOk
+    }
+  }
+}
+
+function createMathFlow(marker: number, openMarker: number, closeMarker: number, multiline: boolean): Construct {
+  const tokenize: Tokenizer = function (effects, ok, nok) {
+    const self = this
+    let oddBackslashRun = false
+    const tail = self.events.at(-1)
+    const initialSize = tail?.[1].type === types.linePrefix
+      ? tail[2].sliceSerialize(tail[1], true).length
+      : 0
+
+    return start
+
+    function start(code: number | null): State | undefined {
+      /* v8 ignore next -- the flow construct is dispatched only for its marker. */
+      if (code !== marker) return nok(code)
+      effects.enter('mathFlow')
+      effects.enter('mathFlowFence')
+      effects.enter('mathFlowFenceSequence')
+      effects.consume(code)
+      return open
+    }
+
+    function open(code: number | null): State | undefined {
+      if (code !== openMarker) return nok(code)
+      effects.consume(code)
+      effects.exit('mathFlowFenceSequence')
+      effects.exit('mathFlowFence')
+      return marker === codes.dollarSign ? afterDollarOpen : content
+    }
+
+    function afterDollarOpen(code: number | null): State | undefined {
+      return code === codes.dollarSign ? nok(code) : content(code)
+    }
+
+    function content(code: number | null): State | undefined {
+      if (code === codes.eof) return nok(code)
+      if (code === marker && (marker !== codes.dollarSign || !oddBackslashRun)) {
+        return effects.attempt(
+          { partial: true, tokenize: tokenizeClosingFence },
+          closed,
+          afterClosingFenceAttempt,
+        )(code)
+      }
+      if (markdownLineEnding(code)) {
+        return multiline
+          ? effects.attempt(nonLazyContinuation, afterContinuation, nok)(code)
+          : nok(code)
+      }
+      return valueStart(code)
+    }
+
+    function afterClosingFenceAttempt(code: number | null): State | undefined {
+      return marker === codes.backslash
+        ? effects.check({ partial: true, tokenize: tokenizeOpeningFence }, nok, markerValueStart)(code)
+        : markerValueStart(code)
+    }
+
+    function afterContinuation(code: number | null): State | undefined {
+      return effects.attempt(
+        { partial: true, tokenize: tokenizeClosingFence },
+        closed,
+        initialSize
+          ? factorySpace(effects, content, types.linePrefix, initialSize + 1)
+          : content,
+      )(code)
+    }
+
+    function valueStart(code: number | null): State | undefined {
+      effects.enter('mathFlowValue')
+      oddBackslashRun = code === codes.backslash
+      effects.consume(code)
+      return value
+    }
+
+    function markerValueStart(code: number | null): State | undefined {
+      effects.enter('mathFlowValue')
+      oddBackslashRun = false
+      effects.consume(code)
+      return valueAfterMarker
+    }
+
+    function valueAfterMarker(code: number | null): State | undefined {
+      if (code === marker) {
+        effects.consume(code)
+        return value
+      }
+      return value(code)
+    }
+
+    function value(code: number | null): State | undefined {
+      if (code === codes.eof || code === marker || markdownLineEnding(code)) {
+        effects.exit('mathFlowValue')
+        return content(code)
+      }
+      oddBackslashRun = code === codes.backslash ? !oddBackslashRun : false
+      effects.consume(code)
+      return value
+    }
+
+    function closed(code: number | null): State | undefined {
+      effects.exit('mathFlow')
+      return ok(code)
+    }
+
+    function tokenizeClosingFence(
+      closeEffects: Parameters<Tokenizer>[0],
+      closeOk: State,
+      closeNok: State,
+    ): State {
+      return factorySpace(closeEffects, sequenceStart, types.linePrefix, constants.tabSize)
+
+      function sequenceStart(code: number | null): State | undefined {
+        if (code !== marker) return closeNok(code)
+        closeEffects.enter('mathFlowFence')
+        closeEffects.enter('mathFlowFenceSequence')
+        closeEffects.consume(code)
+        return sequenceEnd
+      }
+
+      function sequenceEnd(code: number | null): State | undefined {
+        if (code !== closeMarker) return closeNok(code)
+        closeEffects.consume(code)
+        closeEffects.exit('mathFlowFenceSequence')
+        return factorySpace(closeEffects, after, types.whitespace)
+      }
+
+      function after(code: number | null): State | undefined {
+        if (code !== codes.eof && !markdownLineEnding(code)) return closeNok(code)
+        closeEffects.exit('mathFlowFence')
+        return closeOk(code)
+      }
+    }
+
+    function tokenizeOpeningFence(
+      openEffects: Parameters<Tokenizer>[0],
+      openOk: State,
+      openNok: State,
+    ): State {
+      return sequenceStart
+
+      function sequenceStart(code: number | null): State | undefined {
+        /* v8 ignore next -- the opening check follows a failed close attempt at the marker. */
+        if (code !== marker) return openNok(code)
+        openEffects.enter(types.chunkString)
+        openEffects.consume(code)
+        return sequenceEnd
+      }
+
+      function sequenceEnd(code: number | null): State | undefined {
+        if (code !== openMarker) return openNok(code)
+        openEffects.consume(code)
+        openEffects.exit(types.chunkString)
+        return openOk
+      }
+    }
+  }
+
+  return {
+    concrete: true,
+    name: marker === codes.dollarSign ? 'sameLineDollarMathFlow' : 'backslashMathFlow',
+    tokenize,
+  }
+}
+
+const tokenizeNonLazyContinuation: Tokenizer = function (effects, ok, nok) {
+  const self = this
+
+  return start
+
+  function start(code: number | null): State | undefined {
+    /* v8 ignore next -- continuation constructs are attempted only after a line ending. */
+    if (code === codes.eof) return ok(code)
+    /* v8 ignore next -- continuation constructs are attempted only after a line ending. */
+    if (!markdownLineEnding(code)) return nok(code)
+    effects.enter(types.lineEnding)
+    effects.consume(code)
+    effects.exit(types.lineEnding)
+    return lineStart
+  }
+
+  function lineStart(code: number | null): State | undefined {
+    return self.parser.lazy[self.now().line] ? nok(code) : ok(code)
+  }
+}
+
+const nonLazyContinuation: Construct = {
+  partial: true,
+  tokenize: tokenizeNonLazyContinuation,
+}
+
+const backslashMathText: Construct = {
+  name: 'backslashMathText',
+  previous: previousBackslash,
+  tokenize: tokenizeBackslashMathText,
+}
+
+const backslashMathFlow = createMathFlow(
+  codes.backslash,
+  codes.leftSquareBracket,
+  codes.rightSquareBracket,
+  true,
+)
+
+const sameLineDollarMathFlow = createMathFlow(
+  codes.dollarSign,
+  codes.dollarSign,
+  codes.dollarSign,
+  false,
+)
+
+const backslashMath: Extension = {
+  flow: {
+    [codes.backslash]: backslashMathFlow,
+    [codes.dollarSign]: sameLineDollarMathFlow,
+  },
+  text: { [codes.backslash]: backslashMathText },
+}
+
+/**
+ * Add TeX backslash delimiters and same-line display-dollar blocks for remark-math.
+ * The same processor must register remark-math to compile the emitted math tokens.
+ * @returns Nothing.
+ */
+export function remarkMathCompatibility(this: RemarkProcessor): undefined {
+  const data = this.data()
+  const extensions = data.micromarkExtensions ?? (data.micromarkExtensions = [])
+  extensions.push(backslashMath)
+}
--- a/packages/client/ui-primitives/tests/markdown.spec.tsx
+++ b/packages/client/ui-primitives/tests/markdown.spec.tsx
@@ -1,7 +1,9 @@
 // @vitest-environment jsdom
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it } from 'vitest'
+import type { Extension } from 'micromark-util-types'
 import { JsonBlock, MarkdownText, MessageText } from '@deepseek-ai/dsh-client-ui-primitives'
+import { remarkMathCompatibility } from '../src/markdown/remarkMathCompatibility.ts'

 afterEach(cleanup)

@@ -171,6 +173,161 @@ describe('MarkdownText', () => {
    expect(container.querySelector('a')).toBeNull()
  })

+  it('renders common TeX delimiters and same-line tagged display blocks after the reply settles', () => {
+    const source = [
+      'Inline dollar $\\theta$ and backslash \\(\\frac{1}{5}\\).',
+      '',
+      '\\[\\frac{\\pi}{4} < \\theta < \\frac{\\pi}{2}\\]',
+      '',
+      '$$\\theta \\in \\left(\\frac{\\pi}{4}, \\frac{\\pi}{2}\\right). \\tag{1}$$',
+      '',
+      '| Symbol | Value |',
+      '| --- | --- |',
+      '| $\\theta$ | \\(\\frac{1}{5}\\) |',
+    ].join('\n')
+    const { container } = render(<MarkdownText text={source} />)
+
+    expect(container.querySelectorAll('.katex')).toHaveLength(6)
+    expect(container.querySelectorAll('.katex-display')).toHaveLength(2)
+    expect(container.querySelector('.katex-display annotation')?.textContent).toContain('\\frac{\\pi}{4}')
+    expect([...container.querySelectorAll('.katex-display')].at(-1)?.querySelector('annotation')?.textContent)
+      .toContain('\\tag{1}')
+    expect(container.querySelector('.katex-error')).toBeNull()
+    expect(container.querySelector('table .katex')).not.toBeNull()
+  })
+
+  it('keeps backslash delimiters correct across Markdown boundaries and malformed candidates', () => {
+    const cases = [
+      {
+        source: '\\(\\alpha \\, \\beta\\)',
+        math: 1,
+        display: 0,
+      },
+      {
+        source: String.raw`\\\(x\)`,
+        math: 1,
+        display: 0,
+        value: 'x',
+      },
+      {
+        source: '\\(\\frac{1}{5}\n+\\frac{1}{7}\\)',
+        math: 1,
+        display: 0,
+        value: '\\frac{1}{5}\n+\\frac{1}{7}',
+      },
+      {
+        source: '\\[a\\\\\nb\\]',
+        math: 1,
+        display: 1,
+        value: 'a\\\\\nb',
+      },
+      {
+        source: '> \\[\n> \\frac{1}{5}\n> \\]',
+        math: 1,
+        display: 1,
+      },
+      {
+        source: '- \\[\n  \\frac{1}{5}\n  \\]',
+        math: 1,
+        display: 1,
+      },
+    ]
+
+    for (const item of cases) {
+      const rendered = render(<MarkdownText text={item.source} />)
+      expect(rendered.container.querySelectorAll('.katex')).toHaveLength(item.math)
+      expect(rendered.container.querySelectorAll('.katex-display')).toHaveLength(item.display)
+      expect(rendered.container.querySelector('.katex-error')).toBeNull()
+      if ('value' in item) {
+        expect(rendered.container.querySelector('annotation')?.textContent).toBe(item.value)
+      }
+      rendered.unmount()
+    }
+
+    const literal = render(<MarkdownText text={'\\\\(x\\)\n\n\\[x'} />)
+    expect(literal.container.querySelectorAll('.katex')).toHaveLength(0)
+    expect(literal.container.querySelector('.katex-display')).toBeNull()
+    expect(literal.container.textContent).toContain('[x')
+  })
+
+  it('keeps ordinary dollar blocks and incomplete delimiter candidates parseable', () => {
+    const cases = [
+      { source: '$$\n\\theta\n$$', math: 1, display: 1 },
+      { source: '$$$\\theta$$$', math: 1, display: 0 },
+      { source: '$$a$b\nc', math: 0, display: 0 },
+      { source: '  \\[\n  \\theta\n  \\]', math: 1, display: 1 },
+      { source: '\\(\\theta', math: 0, display: 0 },
+      { source: String.raw`\(a\\)`, math: 0, display: 0 },
+      { source: '\\[\n\\[', math: 0, display: 0 },
+      { source: '> \\[\nnot a quoted continuation\n\\]', math: 0, display: 0 },
+    ]
+
+    for (const item of cases) {
+      const rendered = render(<MarkdownText text={item.source} />)
+      expect(rendered.container.querySelectorAll('.katex')).toHaveLength(item.math)
+      expect(rendered.container.querySelectorAll('.katex-display')).toHaveLength(item.display)
+      expect(rendered.container.querySelector('.katex-error')).toBeNull()
+      rendered.unmount()
+    }
+  })
+
+  it('lets display math interrupt an open paragraph', () => {
+    for (const source of ['Prose line\n\\[x\\]', 'Prose line\n$$x$$']) {
+      const rendered = render(<MarkdownText text={source} />)
+      expect(rendered.container.querySelectorAll('p')).toHaveLength(1)
+      expect(rendered.container.querySelectorAll('.katex-display')).toHaveLength(1)
+      rendered.unmount()
+    }
+  })
+
+  it('leaves a dollar block with trailing text to upstream inline math', () => {
+    const { container } = render(<MarkdownText text="$$x$$ trailing" />)
+
+    expect(container.querySelectorAll('.katex')).toHaveLength(1)
+    expect(container.querySelector('.katex-display')).toBeNull()
+    expect(container.querySelector('annotation')?.textContent).toBe('x')
+    expect(container.textContent).toContain('trailing')
+  })
+
+  it('renders escaped dollars and even backslash pairs before closing fences', () => {
+    const source = [
+      String.raw`$$100\$$$`,
+      '',
+      String.raw`\(a\\\)`,
+      '',
+      String.raw`\[b\\\]`,
+    ].join('\n')
+    const { container } = render(<MarkdownText text={source} />)
+    const values = [...container.querySelectorAll('annotation')].map(node => node.textContent)
+
+    expect(values).toEqual([String.raw`100\$`, String.raw`a\\`, String.raw`b\\`])
+    expect(container.querySelector('.katex-error')).toBeNull()
+  })
+
+  it('bounds fallback work for repeated unclosed backslash delimiters', () => {
+    const startedAt = performance.now()
+    const { container } = render(<MarkdownText text={'\\(x '.repeat(6_400)} />)
+
+    expect(performance.now() - startedAt).toBeLessThan(1_000)
+    expect(container.querySelector('.katex')).toBeNull()
+  })
+
+  it('leaves TeX-looking fenced code literal', () => {
+    const source = '```tex\n\\[\\frac{1}{5}\\]\n$$x \\tag{1}$$\n```'
+    const { container } = render(<MarkdownText text={source} />)
+
+    expect(container.querySelector('.katex')).toBeNull()
+    expect(container.querySelector('pre code')?.textContent).toContain('\\[\\frac{1}{5}\\]')
+    expect(container.querySelector('pre code')?.textContent).toContain('$$x \\tag{1}$$')
+  })
+
+  it('registers the compatibility extension on a bare remark processor', () => {
+    const data: { micromarkExtensions?: Extension[] } = {}
+    remarkMathCompatibility.call({ data: () => data })
+
+    expect(data.micromarkExtensions).toHaveLength(1)
+  })
+
  it('defers TeX rendering while streaming so incomplete formulas never flash KaTeX errors', () => {
    const partial = '$$\n\\frac{\\partial \\mathbf{u}}{\\partial'
    const complete = '$$\n\\frac{\\partial \\mathbf{u}}{\\partial t}\n$$'
--- a/packages/client/ui-trajectory/README.i18n.yaml
+++ b/packages/client/ui-trajectory/README.i18n.yaml
@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-trajectory/README.md
-README.md: 771e1a68e8027f02f20b17f78d0a8dd48d2d5bff
-README.zh.md: ceb4d696e5fda117afff89cf9cd0a5426dfed2be
+README.md: 2c737fe2d04df518e7d32d07aaede714a7a3566d
+README.zh.md: 738d6cafa0c6d44f05fecec01d565da91ef433e8
--- a/packages/client/ui-trajectory/README.md
+++ b/packages/client/ui-trajectory/README.md
@@ -2,7 +2,7 @@

 English | [中文](README.zh.md)

-Trajectory renders a turn-aware event ledger with selectable User, Assistant, Tool, and nested Subtool records. Thick rules mark Turn boundaries, compact inline markers identify Steps, and the main ledger keeps only index, event, and content; selection opens a local inspector for token usage, duration, Input, Output, and Timing. A standalone compaction request appears chronologically in its own `Between turns` section, while a numbered compaction remains inside its owning turn. A fixed Overview above the ledger projects real record start/duration timing from left to right; Assistant spans divide recorded TTFT from decoding, and a 500 ms hover reveals exact clock and duration details. Dragging an interval focuses the ledger on every record active at any point in that inclusive range, while clearing the selection restores the full branch. Wheel gestures zoom the time domain. A right-button click clears the selected interval, while a right-button drag pans an already zoomed viewport without changing it. Streaming updates keep the ledger pinned only when it was already at the bottom, so reading earlier records suspends tail following. Trajectory asks the conversation shell to float the composer over the full-height ledger, while its responsive vertical scrollers reserve the composer's live height so final rows remain reachable. The runtime's independent history source supplies raw context lineage and projects cancellation-frozen Assistant and Tool records, so Trajectory neither reads nor changes the Chat conversation snapshot. The package remains a pure-consumer plugin (registers one view tab into the conversation's `'conversation.view'` slot ring, provides no service, declares no Context merge). Contract: api-contracts v3 §8.
+Trajectory renders a turn-aware event ledger with selectable User, Assistant, Tool, and nested Subtool records. Thick rules mark Turn boundaries, compact inline markers identify Steps, and the main ledger keeps only index, event, and content; selection opens a local inspector for token usage, duration, Input, Output, and Timing. Scrollable Summary regions keep their scrollbar thumbs transparent until the region is hovered or contains keyboard focus, without changing the reserved scroll geometry. A standalone compaction request appears chronologically in its own `Between turns` section, while a numbered compaction remains inside its owning turn. Long ledgers open at the current tail, load one older page when the user reaches the loaded range's top, and mount only the visible row window plus a small overscan; request-only separators share the next measurable virtual item, while semantic row keys and ARIA indexes survive prepends. Selection, timeline navigation, folding, search, and Request totals cover the currently loaded window. The ledger covers records with an explicit loading row until the initial tail is positioned and while an older page is pending. A fixed Overview above the ledger projects real record start/duration timing from left to right; when earlier records remain unloaded and the viewport includes the loaded domain's start, a neutral ellipsis control identifies the omitted prefix and loads one earlier page without assigning unknown history fabricated duration. Assistant spans divide recorded TTFT from decoding, and a 500 ms hover reveals exact clock and duration details. Dragging an interval focuses the ledger on every record active at any point in that inclusive range, while clearing the selection restores the full branch. Wheel gestures zoom the time domain. A right-button click clears the selected interval, while a right-button drag pans an already zoomed viewport without changing it. The initial view and streaming updates stay at the tail; scrolling upward suspends following so new records do not interrupt inspection of earlier rows. Content-only stream frames preserve virtual row keys and heights, reuse measurements, and do not issue repeated tail-scroll writes. Completed replies retain only the first visible token and usage chunks in the inspection projection, while unfinished and interrupted replies retain every chunk; the independent source keeps the raw history unchanged. Trajectory asks the conversation shell to float the composer over the full-height ledger, while its responsive vertical scrollers reserve the composer's live height so final rows remain reachable. The runtime's independent history source supplies raw context lineage and projects cancellation-frozen Assistant and Tool records, so Trajectory neither reads nor changes the Chat conversation snapshot. The package remains a pure-consumer plugin (registers one view tab into the conversation's `'conversation.view'` slot ring, provides no service, declares no Context merge). Contract: api-contracts v3 §8.

 ## Model Experience

--- a/packages/client/ui-trajectory/README.zh.md
+++ b/packages/client/ui-trajectory/README.zh.md
@@ -2,7 +2,7 @@

 [English](README.md) | 中文

-Trajectory 渲染按轮次组织的事件记录表，其中可选择用户、助手、工具和嵌套子工具记录。较粗的分割线标示轮次边界，紧凑的行内标记标识步骤，主记录表仅保留索引、事件和内容；选择记录则会打开局部检查器，查看 token 用量、耗时、输入、输出和计时。独立运行的压缩（compaction）请求会按时间顺序显示在自己的 `Between turns` 区段中，而带编号的压缩仍位于其所属轮次内。固定在记录表上方的 Overview 区域从左到右投影记录的真实开始时间与耗时；助手时间条会区分记录到的 TTFT 与解码时间，悬停 500 ms 后可查看精确时刻和耗时详情。拖选一个区间会将记录表聚焦到活动区间与该闭区间有重叠的所有记录，清除选择则恢复完整分支。滚轮手势用于缩放时间域。右键单击会清除所选区间；在已放大的 viewport 上按住右键拖动则只会平移视图，不会改变该区间。仅当记录表在流式更新前已经位于底部时，更新才会保持贴底；向上阅读旧记录会暂停跟随。Trajectory 要求会话壳将 composer 作为浮层置于全高记录表上方；其响应式纵向滚动容器会预留 composer 的实时高度，确保仍可滚动到最后几行。运行时的独立历史数据源提供原始上下文谱系，并投影因取消而冻结的助手和工具记录，因此 Trajectory 既不读取也不改变 Chat 会话快照。该包保持为纯消费方插件（向会话的 `'conversation.view'` slot 环注册一个视图标签页，不提供服务，也不声明 Context 合并）。契约：api-contracts v3 §8。
+Trajectory 渲染按轮次组织的事件记录表，其中可选择用户、助手、工具和嵌套子工具记录。较粗的分割线标示轮次边界，紧凑的行内标记标识步骤，主记录表仅保留索引、事件和内容；选择记录则会打开局部检查器，查看 token 用量、耗时、输入、输出和计时。可滚动的概述区域默认保持滚动条滑块透明，直到鼠标悬停该区域或其中包含键盘焦点时才显示，同时不改变滚动条预留的几何空间。独立运行的压缩（compaction）请求会按时间顺序显示在自己的 `Between turns` 区段中，而带编号的压缩仍位于其所属轮次内。长记录表打开时定位于当前尾部，用户到达已加载范围顶部时加载一页更早的历史，并且只挂载可见行窗口和少量额外缓冲行；仅含请求的分隔行并入下一个具备可测高度的虚拟项，语义行键和 ARIA 索引在向前补页后保持不变。选择、时间线导航、折叠、搜索和请求汇总只覆盖当前已加载的窗口。初始尾部完成定位前以及更早页面仍在等待时，记录表会用明确的加载行遮住真实记录。固定在记录表上方的 Overview 区域从左到右投影记录的真实开始时间与耗时；仍有更早记录未加载且 viewport 包含已加载时间域起点时，中性的省略号控件会标识被省略的前缀，并可加载一页更早历史，而不会为未知部分虚构耗时。助手时间条会区分记录到的 TTFT 与解码时间，悬停 500 ms 后可查看精确时刻和耗时详情。拖选一个区间会将记录表聚焦到活动区间与该闭区间有重叠的所有记录，清除选择则恢复完整分支。滚轮手势用于缩放时间域。右键单击会清除所选区间；在已放大的 viewport 上按住右键拖动则只会平移视图，不会改变该区间。初始视图和流式更新都会停留在尾部；向上滚动会暂停跟随，因此新记录不会打断对旧记录的检查。仅含内容更新的流式帧会保持虚拟行的键和高度不变、复用测量结果，并且不会重复写入末尾滚动位置。已完成的回复在检查投影中仅保留首个可见 token 和用量分片，未完成及中断的回复则保留所有分片；独立数据源中的原始历史保持不变。Trajectory 要求会话壳将 composer 作为浮层置于全高记录表上方；其响应式纵向滚动容器会预留 composer 的实时高度，确保仍可滚动到最后几行。运行时的独立历史数据源提供原始上下文谱系，并投影因取消而冻结的助手和工具记录，因此 Trajectory 既不读取也不改变 Chat 会话快照。该包保持为纯消费方插件（向会话的 `'conversation.view'` slot 环注册一个视图标签页，不提供服务，也不声明 Context 合并）。契约：api-contracts v3 §8。

 ## 模型体验

--- a/packages/client/ui-trajectory/package.json
+++ b/packages/client/ui-trajectory/package.json
@@ -35,6 +35,7 @@
  },
  "license": "BSD-3-Clause",
  "dependencies": {
+    "@tanstack/react-virtual": "^3.14.9",
    "diff": "^9.0.0"
  },
  "peerDependencies": {
@@ -42,7 +43,8 @@
    "@deepseek-ai/dsh-invariants": "^0.0.1",
    "@deepseek-ai/dsh-client-ui-primitives": "^0.0.1",
    "cordis": "^4.0.0-rc.7",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@deepseek-ai/dsh-client-runtime": "workspace:^",
@@ -51,8 +53,10 @@
    "@deepseek-ai/dsh-client-ui-slots": "workspace:^",
    "@deepseek-ai/dsh-invariants": "workspace:^",
    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
    "cordis": "^4.0.0-rc.7",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
  },
  "files": [
    "lib/index.js",
--- a/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css
+++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.module.css
@@ -13,6 +13,7 @@
 }

 .tablePane {
+  position: relative;
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
@@ -21,6 +22,53 @@
  container: trajectory-table / inline-size;
 }

+.historyLoading {
+  position: sticky;
+  z-index: 5;
+  top: 0;
+  height: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.historyLoadingBar {
+  display: flex;
+  width: 100%;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-secondary);
+  font: var(--dsw-font-xxs-12);
+}
+
+.historyLoadingSpinner {
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  border: 1.5px solid var(--dsw-alias-border-l2);
+  border-top-color: var(--dsw-alias-state-business-primary);
+  border-radius: 50%;
+  animation: history-loading-spin 700ms linear infinite;
+}
+
+.table:not([data-scroll-ready='true']) {
+  visibility: hidden;
+}
+
+@keyframes history-loading-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .historyLoadingSpinner {
+    animation: none;
+  }
+}
+
 .table {
  --trajectory-turn-accent: color-mix(
    in srgb,
@@ -79,7 +127,17 @@
  white-space: nowrap;
 }

-.table tbody tr:not([data-collapsed-summary]) {
+.table tbody .virtualSpacer {
+  pointer-events: none;
+}
+
+.table tbody .virtualSpacer td {
+  height: var(--trajectory-virtual-spacer-height);
+  padding: 0;
+  border: 0;
+}
+
+.table tbody tr:not([data-collapsed-summary]):not([data-virtual-spacer]) {
  cursor: default;
  outline: none;
  transition:
@@ -91,7 +149,7 @@
  opacity: 0.24;
 }

-.table tbody tr:not([data-collapsed-summary]):not([data-selected='true']):hover {
+.table tbody tr:not([data-collapsed-summary]):not([data-virtual-spacer]):not([data-selected='true']):hover {
  background: var(--dsw-alias-interactive-bg-hover);
 }

@@ -106,7 +164,7 @@
  border-bottom: 0;
 }

-.table tbody tr[data-request-only='true']:last-child td {
+.table tbody tr[data-terminal-request-boundary='true'] td {
  /* Retain the lower half of the 16px boundary marker at the table's end. */
  height: 9px;
 }
@@ -620,6 +678,10 @@
  white-space: nowrap;
 }

+.toolCallOnly {
+  color: var(--dsw-alias-label-tertiary);
+}
+
 .table tbody tr[data-collapsed-summary='turn'] td,
 .table tbody tr[data-collapsed-summary='assistant'] td {
  height: 20px;
@@ -936,6 +998,17 @@
  overflow: auto;
 }

+.summaryScrollRegion {
+  --dsh-scrollbar-thumb: transparent;
+  --dsh-scrollbar-thumb-hover: transparent;
+}
+
+.summaryScrollRegion:hover,
+.summaryScrollRegion:focus-within {
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+}
+
 .compactedSummary .markdownPayload {
  padding-right: 18px;
 }
@@ -1023,7 +1096,6 @@
  margin: 0;
  overflow: hidden;
  color: var(--dsw-alias-label-primary);
-  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
@@ -1033,7 +1105,6 @@
  color: inherit;
  cursor: pointer;
  font: inherit;
-  font-variant-numeric: tabular-nums;
  user-select: text;
 }

--- a/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx
+++ b/packages/client/ui-trajectory/src/client/TrajectoryTable.tsx
@@ -2,6 +2,7 @@

 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import type { CSSProperties, ReactNode } from 'react'
+import { useVirtualizer } from '@tanstack/react-virtual'
 import {
  IconChevronRightOutline14,
  IconSettingsOutline16,
@@ -18,11 +19,19 @@ import type {
 import type {
  AssistantMetricDetail, TrajectoryCellKind, TrajectoryCellProps, TrajectorySourceBlock,
 } from './trajectory-record.ts'
-import { formatElapsedSeconds } from './trajectory-record.ts'
+import { formatElapsedSeconds, trajectoryRecordId } from './trajectory-record.ts'
+import {
+  groupTrajectoryVirtualRows, trajectoryVirtualRecordKey,
+} from './trajectory-virtual-rows.ts'
+import type { TrajectoryVirtualRow } from './trajectory-virtual-rows.ts'
 import { trajectoryPreviewText, type TrajectoryTurnModel } from './layout.ts'
 import css from './TrajectoryTable.module.css'

 const BOTTOM_FOLLOW_THRESHOLD_PX = 2
+const OLDER_LOAD_THRESHOLD_PX = 48
+const VIRTUALIZATION_THRESHOLD = 100
+const VIRTUAL_OVERSCAN_ROWS = 12
+const VIRTUAL_INITIAL_VIEWPORT_HEIGHT_PX = 600

 const KIND_LABEL: Record<TrajectoryCellKind, string> = {
  system: 'SYSTEM',
@@ -117,6 +126,30 @@ interface TableRecord {
  collapsedSummaryKind?: 'turn' | 'assistant'
 }

+interface VirtualRowStructure {
+  height: number
+  key: string
+}
+
+function useStableVirtualRowStructure(
+  rows: readonly TrajectoryVirtualRow<TableRecord>[],
+): readonly VirtualRowStructure[] {
+  const cache = useRef<{
+    rows: readonly TrajectoryVirtualRow<TableRecord>[]
+    structure: readonly VirtualRowStructure[]
+  }>({ rows: [], structure: [] })
+  if (cache.current.rows === rows) return cache.current.structure
+  const structure = cache.current.structure.length === rows.length
+    && rows.every((row, index) => {
+      const previous = cache.current.structure[index]
+      return previous?.key === row.key && previous.height === row.height
+    })
+    ? cache.current.structure
+    : rows.map(row => ({ key: row.key, height: row.height }))
+  cache.current = { rows, structure }
+  return structure
+}
+
 type DetailTab =
  | 'system-prompt'
  | 'tools'
@@ -150,9 +183,8 @@ interface ToolCallTextParts {

 interface SelectedRequest {
  turn: number | null
-  section: number
-  number: number
  group: string
+  seq?: number
 }

 interface DetailsResizeDrag {
@@ -195,6 +227,16 @@ type RequestBoundaryStyle = CSSProperties & {
  '--request-boundary-offset': string
 }

+type VirtualSpacerStyle = CSSProperties & {
+  '--trajectory-virtual-spacer-height': string
+}
+
+interface OlderLoadAnchor {
+  readonly historyStartSeq: number | undefined
+  readonly scrollHeight: number
+  readonly scrollTop: number
+}
+
 function clampDetailsWidth(width: number, splitWidth: number): number {
  const maxWidth = Math.max(
    DETAILS_MIN_WIDTH,
@@ -228,6 +270,15 @@ function formatStartedAt(timestamp: number | null): string {
  return `${day} ${time}`
 }

+/** Whether a click lands on an active text selection and should keep it. */
+function clickSelectsText(target: Node): boolean {
+  const selection = window.getSelection()
+  return selection !== null
+    && !selection.isCollapsed
+    && selection.rangeCount > 0
+    && selection.getRangeAt(0).intersectsNode(target)
+}
+
 function StartedAtValue({ timestamp }: { timestamp: number | null }) {
  const [showUnix, setShowUnix] = useState(false)
  if (timestamp === null || !Number.isFinite(timestamp)) return <dd>Not available</dd>
@@ -238,13 +289,7 @@ function StartedAtValue({ timestamp }: { timestamp: number | null }) {
        className={css.timestampToggle}
        title={showUnix ? 'Show local time' : 'Show Unix timestamp'}
        onClick={(event) => {
-          const selection = window.getSelection()
-          if (
-            selection !== null
-            && !selection.isCollapsed
-            && selection.rangeCount > 0
-            && selection.getRangeAt(0).intersectsNode(event.currentTarget)
-          ) return
+          if (clickSelectsText(event.currentTarget)) return
          setShowUnix(current => !current)
        }}
      >
@@ -302,6 +347,8 @@ export interface TrajectoryTableProps {
  requestNumbers?: readonly TrajectoryRequestNumber[]
  /** Grouped records in display order. */
  turns: readonly TrajectoryTurnModel[]
+  /** In-flight cells whose content replaces the matching structural record index. */
+  streamingCells?: readonly TrajectoryCellProps[]
  /** Record indexes emphasized by the active timeline focus. */
  timelineFocusIndexes?: ReadonlySet<number> | null
  /** Record indexes retained by the active live search, or null without a query. */
@@ -312,16 +359,26 @@ export interface TrajectoryTableProps {
  onRecordSelect?: (index: number) => void
  /** One externally requested record selection; a new object repeats the request. */
  recordSelection?: { readonly index: number } | null
+  /** One externally requested record focus without changing inspector selection. */
+  recordFocus?: { readonly index: number } | null
+  /** Whether the initial history tail is still loading. */
+  historyLoading?: boolean
+  /** First loaded raw event, used to preserve scroll position after prepending a page. */
+  historyStartSeq?: number | undefined
+  /** Whether one older history page can be requested. */
+  hasOlderRecords?: boolean
+  /** Load one older history page. */
+  onLoadOlder?: () => Promise<boolean>
  /** Clear selection state owned by the ledger host. */
  onClearSelection?: () => void
  /** Turn ids whose rows after the first are folded into a summary. */
  collapsedTurns: ReadonlySet<number>
  /** Toggle one turn between folded and expanded. */
  onToggleTurn: (turn: number) => void
-  /** Assistant record indexes whose tool calls are folded. */
-  collapsedAssistants: ReadonlySet<number>
+  /** Stable Assistant record ids whose tool calls are folded. */
+  collapsedAssistants: ReadonlySet<string>
  /** Toggle tool calls under one assistant record. */
-  onToggleAssistant: (index: number) => void
+  onToggleAssistant: (id: string) => void
  /** One-shot cross-view inspect: open and scroll to this call's record. */
  inspectCallId?: string | null
  /** Acknowledge a consumed (or unresolvable) inspect request. */
@@ -492,7 +549,6 @@ function collapseTurnRecords(
  records: readonly TableRecord[],
  collapsedTurns: ReadonlySet<number>,
 ): TableRecord[] {
-  if (collapsedTurns.size === 0) return [...records]
  const recordsByTurn = new Map<number, TableRecord[]>()
  for (const record of records) {
    if (record.turn === null) continue
@@ -550,15 +606,17 @@ function summarizeAssistantTools(records: readonly TableRecord[]): string {

 function collapseAssistantRecords(
  records: readonly TableRecord[],
-  collapsedAssistants: ReadonlySet<number>,
+  collapsedAssistants: ReadonlySet<string>,
 ): TableRecord[] {
-  if (collapsedAssistants.size === 0) return [...records]
  const out: TableRecord[] = []
  for (let i = 0; i < records.length; i++) {
    const record = records[i]
    if (record === undefined) continue
    out.push(record)
-    if (record.cell.kind !== 'message' || !collapsedAssistants.has(record.cell.index)) continue
+    if (
+      record.cell.kind !== 'message'
+      || !collapsedAssistants.has(trajectoryRecordId(record.cell))
+    ) continue
    const calls: TableRecord[] = []
    for (let j = i + 1; j < records.length; j++) {
      const candidate = records[j]
@@ -1335,7 +1393,7 @@ function RequestTiming({
        <dt>Started</dt>
        <StartedAtValue timestamp={anchor?.cell.startedAt ?? null} />
      </div>
-      <div><dt>Duration</dt><dd>—</dd></div>
+      <div><dt>Duration</dt><dd>{formatElapsedSeconds(null)}</dd></div>
    </dl>
  )
 }
@@ -1519,7 +1577,12 @@ function OverviewSection({
          <IconChevronRightOutline14 className={css.overviewTitleIcon} size={12} />
        </button>
      </h3>
-      <div className={css.overviewPreview}>{children}</div>
+      <div
+        className={`${css.overviewPreview} ${css.summaryScrollRegion}`}
+        data-summary-scroll-region=""
+      >
+        {children}
+      </div>
    </section>
  )
 }
@@ -1533,11 +1596,17 @@ function OverviewSection({
 export function TrajectoryTable({
  requestNumbers: sessionRequestNumbers,
  turns,
+  streamingCells = [],
  timelineFocusIndexes = null,
  searchMatchIndexes = null,
  onSelectedIndexChange,
  onRecordSelect,
  recordSelection = null,
+  recordFocus = null,
+  historyLoading = false,
+  historyStartSeq,
+  hasOlderRecords = false,
+  onLoadOlder,
  onClearSelection,
  collapsedTurns,
  onToggleTurn,
@@ -1546,7 +1615,7 @@ export function TrajectoryTable({
  inspectCallId = null,
  onInspectApplied,
 }: TrajectoryTableProps) {
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
+  const [selectedRecordId, setSelectedRecordId] = useState<string | null>(null)
  const [selectedRequest, setSelectedRequest] = useState<SelectedRequest | null>(null)
  const [activeTab, setActiveTab] = useState<DetailTab>('overview')
  const [thinkingExpanded, setThinkingExpanded] = useState(false)
@@ -1554,20 +1623,116 @@ export function TrajectoryTable({
  const [toolRequestOffset, setToolRequestOffset] = useState<number | null>(null)
  const detailsResizeDrag = useRef<DetailsResizeDrag | null>(null)
  const appliedRecordSelection = useRef<TrajectoryTableProps['recordSelection']>(null)
+  const appliedRecordFocus = useRef<TrajectoryTableProps['recordFocus']>(null)
  const tabHistory = useRef<Set<DetailTab>>(new Set(['overview']))
+  const rootRef = useRef<HTMLDivElement>(null)
+  const tablePaneRef = useRef<HTMLDivElement>(null)
+  const followsTableTail = useRef(false)
+  const tableScrollInitialized = useRef(false)
+  const [tableScrollReady, setTableScrollReady] = useState(false)
+  const pendingScrollRecordId = useRef<string | null>(null)
+  const loadingOlder = useRef(false)
+  const [olderLoading, setOlderLoading] = useState(false)
+  const olderLoadAnchor = useRef<OlderLoadAnchor | null>(null)
+  const allRecords = useMemo(() => flattenRecords(turns), [turns])
+  const streamingCellsByIndex = useMemo(
+    () => new Map(streamingCells.map(cell => [cell.index, cell])),
+    [streamingCells],
+  )
+  const currentRecord = useCallback((record: TableRecord): TableRecord => {
+    const cell = streamingCellsByIndex.get(record.cell.index)
+    return cell === undefined ? record : { ...record, cell }
+  }, [streamingCellsByIndex])
+  const selectedTemplate = useMemo(() => selectedRecordId === null
+    ? undefined
+    : allRecords.find(record => trajectoryRecordId(record.cell) === selectedRecordId),
+  [allRecords, selectedRecordId])
+  const selected = selectedTemplate === undefined
+    ? undefined
+    : currentRecord(selectedTemplate)
+  const selectedIndex = selected?.cell.index ?? null
  useEffect(() => {
    onSelectedIndexChange?.(selectedIndex)
  }, [onSelectedIndexChange, selectedIndex])
-  const allRecords = useMemo(() => flattenRecords(turns), [turns])
-  const requestNumbers = indexRequestNumbers(allRecords, sessionRequestNumbers)
-  const records = searchMatchIndexes === null
-    ? collapseAssistantRecords(
-      collapseTurnRecords(allRecords, collapsedTurns),
-      collapsedAssistants,
-    )
-    : filterRecords(allRecords, searchMatchIndexes)
-  const requestBoundaryRuns = indexRequestBoundaryRuns(records)
-  const selected = allRecords.find(record => record.cell.index === selectedIndex)
+  const requestNumbers = useMemo(
+    () => indexRequestNumbers(allRecords, sessionRequestNumbers),
+    [allRecords, sessionRequestNumbers],
+  )
+  const records = useMemo(() => {
+    if (searchMatchIndexes !== null) return filterRecords(allRecords, searchMatchIndexes)
+    const turnRecords = collapsedTurns.size === 0
+      ? allRecords
+      : collapseTurnRecords(allRecords, collapsedTurns)
+    return collapsedAssistants.size === 0
+      ? turnRecords
+      : collapseAssistantRecords(turnRecords, collapsedAssistants)
+  }, [allRecords, collapsedAssistants, collapsedTurns, searchMatchIndexes])
+  const projectedVirtualRows = useMemo(
+    () => groupTrajectoryVirtualRows(records),
+    [records],
+  )
+  const virtualRowStructure = useStableVirtualRowStructure(projectedVirtualRows)
+  const virtualizationEnabled = hasOlderRecords
+    || records.length > VIRTUALIZATION_THRESHOLD
+  const estimateVirtualRowSize = useCallback(
+    (index: number) => virtualRowStructure[index]?.height ?? 30,
+    [virtualRowStructure],
+  )
+  const getVirtualRowKey = useCallback(
+    (index: number) => virtualRowStructure[index]?.key ?? index,
+    [virtualRowStructure],
+  )
+  const getTableScrollElement = useCallback(() => tablePaneRef.current, [])
+  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+    count: virtualizationEnabled ? virtualRowStructure.length : 0,
+    enabled: virtualizationEnabled,
+    estimateSize: estimateVirtualRowSize,
+    getItemKey: getVirtualRowKey,
+    getScrollElement: getTableScrollElement,
+    initialRect: { width: 0, height: VIRTUAL_INITIAL_VIEWPORT_HEIGHT_PX },
+    anchorTo: 'end',
+    overscan: VIRTUAL_OVERSCAN_ROWS,
+    scrollEndThreshold: BOTTOM_FOLLOW_THRESHOLD_PX,
+  })
+  const virtualIndexByRecordId = useMemo(() => {
+    const indexes = new Map<string, number>()
+    for (const [virtualIndex, row] of projectedVirtualRows.entries()) {
+      for (const entry of row.entries) {
+        if (entry.record.collapsedSummary === undefined) {
+          indexes.set(trajectoryRecordId(entry.record.cell), virtualIndex)
+        }
+      }
+    }
+    return indexes
+  }, [projectedVirtualRows])
+  const virtualItems = virtualizationEnabled ? rowVirtualizer.getVirtualItems() : []
+  const virtualTop = virtualItems[0]?.start ?? 0
+  const virtualBottom = virtualItems.length === 0
+    ? 0
+    : Math.max(0, rowVirtualizer.getTotalSize() - (virtualItems.at(-1)?.end ?? 0))
+  const renderedRecords = virtualizationEnabled
+    ? virtualItems.flatMap((item) => {
+      const row = projectedVirtualRows[item.index]
+      if (row === undefined) return []
+      return row.entries.map((entry, entryIndex) => ({
+        record: currentRecord(entry.record),
+        position: entry.logicalIndex,
+        terminalRequestBoundary:
+          entry.record.cell.requestOnly === true
+          && row.entries.at(-1)?.record.cell.requestOnly === true
+          && entryIndex === row.entries.length - 1,
+      }))
+    })
+    : records.map((record, position) => ({
+      record: currentRecord(record),
+      position,
+      terminalRequestBoundary:
+        record.cell.requestOnly === true && position === records.length - 1,
+    }))
+  const requestBoundaryRuns = useMemo(
+    () => indexRequestBoundaryRuns(records),
+    [records],
+  )
  const selectedPrompt = selected?.cell.kind === 'system'
    ? selected.cell.promptDetail
    : undefined
@@ -1576,20 +1741,25 @@ export function TrajectoryTable({
    : undefined
  const promptSelected = selectedPrompt !== undefined
  const selectedState = selected === undefined ? undefined : stateOf(selected)
-  const selectedRequestRecords = selectedRequest === null
+  const selectedRequestRecordTemplates = useMemo(() => selectedRequest === null
    ? []
    : allRecords.filter(record =>
      record.turn === selectedRequest.turn
-        && record.section === selectedRequest.section
        && record.group === selectedRequest.group,
-    )
+    ), [allRecords, selectedRequest])
+  const selectedRequestRecords = selectedRequestRecordTemplates.map(currentRecord)
  const selectedRequestAssistant = selectedRequestRecords.find(
    record => record.cell.kind === 'message',
  )
  const selectedRequestAnchor = selectedRequestAssistant ?? selectedRequestRecords[0]
+  const selectedRequestNumber = selectedRequest === null
+    ? undefined
+    : requestNumbers.get(requestKey(selectedRequest.turn, selectedRequest.group))
  const selectedRequestInfo = selectedRequest === null
    ? undefined
-    : sessionRequestNumbers?.find(request => request.number === selectedRequest.number)
+    : sessionRequestNumbers?.find(request => selectedRequest.seq === undefined
+      ? request.turn === selectedRequest.turn && request.group === selectedRequest.group
+      : request.seq === selectedRequest.seq)
  const selectedRequestState: RecordState | undefined = selectedRequest === null
    ? undefined
    : selectedRequestInfo?.status
@@ -1605,9 +1775,12 @@ export function TrajectoryTable({
  const selectedRequestSubtoolCalls = selectedRequestRecords.filter(
    record => record.cell.kind === 'subtool',
  ).length
-  const selectedRequestResult = selectedRequestInfo?.resultSeq === undefined
+  const selectedRequestResultTemplate = selectedRequestInfo?.resultSeq === undefined
    ? selectedRequestAssistant
    : allRecords.find(record => record.cell.sourceSeq === selectedRequestInfo.resultSeq)
+  const selectedRequestResult = selectedRequestResultTemplate === undefined
+    ? undefined
+    : currentRecord(selectedRequestResultTemplate)
  const selectedRequestUsage = selectedRequestInfo?.usage ?? (
    selectedRequestAssistant === undefined
      ? undefined
@@ -1633,7 +1806,9 @@ export function TrajectoryTable({
    selectedRequestInfo?.cumulativeUsage ?? selectedRequestUsage
  const selectedRequestOptions = selectedRequestInfo?.requestConfig
  const activeTurn = selectedRequest === null ? selected?.turn : selectedRequest.turn
-  const activeSection = selectedRequest === null ? selected?.section : selectedRequest.section
+  const activeSection = selectedRequest === null
+    ? selected?.section
+    : selectedRequestRecords[0]?.section
  const selectedTabs = selectedRequest !== null
    ? REQUEST_TABS.filter(tab => tab.id !== 'options' || selectedRequestOptions !== undefined)
    : selected === undefined ? [] : detailTabs(selected)
@@ -1645,13 +1820,17 @@ export function TrajectoryTable({
  const selectedAssistantRequest = selected?.cell.kind === 'message'
    ? requestNumbers.get(requestKey(selected.turn, selected.group))
    : undefined
+  const selectedAssistantRequestInfo = selectedAssistantRequest === undefined
+    ? undefined
+    : sessionRequestNumbers?.find(request => request.number === selectedAssistantRequest)
  const selectedAssistantRequestTarget: SelectedRequest | undefined =
    selected !== undefined && selectedAssistantRequest !== undefined
      ? {
        turn: selected.turn,
-        section: selected.section,
-        number: selectedAssistantRequest,
        group: selected.group,
+        ...(selectedAssistantRequestInfo?.seq === undefined
+          ? {}
+          : { seq: selectedAssistantRequestInfo.seq }),
      }
      : undefined
  const hasSelectedHierarchy = selectedAssistantRequestTarget !== undefined
@@ -1670,7 +1849,7 @@ export function TrajectoryTable({
  }

  const clearInspectorSelection = () => {
-    setSelectedIndex(null)
+    setSelectedRecordId(null)
    setSelectedRequest(null)
  }

@@ -1683,7 +1862,7 @@ export function TrajectoryTable({
    const record = allRecords.find(candidate => candidate.cell.index === index)
    onRecordSelect?.(index)
    setSelectedRequest(null)
-    setSelectedIndex(index)
+    setSelectedRecordId(record === undefined ? null : trajectoryRecordId(record.cell))
    if (record === undefined) return
    const tabs = detailTabs(record)
    const available = new Set(tabs.map(tab => tab.id))
@@ -1697,13 +1876,25 @@ export function TrajectoryTable({
    ) return
    appliedRecordSelection.current = recordSelection
    selectRecord(recordSelection.index)
-  }, [recordSelection, selectRecord])
+    const record = allRecords.find(candidate => candidate.cell.index === recordSelection.index)
+    pendingScrollRecordId.current = record === undefined
+      ? null
+      : trajectoryRecordId(record.cell)
+  }, [allRecords, recordSelection, selectRecord])
+  useEffect(() => {
+    if (recordFocus === null || appliedRecordFocus.current === recordFocus) return
+    appliedRecordFocus.current = recordFocus
+    const record = allRecords.find(candidate => candidate.cell.index === recordFocus.index)
+    pendingScrollRecordId.current = record === undefined
+      ? null
+      : trajectoryRecordId(record.cell)
+  }, [allRecords, recordFocus])

  const selectRequest = (
    request: SelectedRequest,
    tab: 'overview' | 'timing' = 'overview',
  ) => {
-    setSelectedIndex(null)
+    setSelectedRecordId(null)
    setSelectedRequest(request)
    activateTab(tab)
  }
@@ -1716,12 +1907,13 @@ export function TrajectoryTable({
        const candidate = allRecords[i]
        if (candidate === undefined || candidate.turn !== target.turn) break
        if (candidate.cell.kind !== 'message') continue
-        if (collapsedAssistants.has(candidate.cell.index)) onToggleAssistant(candidate.cell.index)
+        const assistantId = trajectoryRecordId(candidate.cell)
+        if (collapsedAssistants.has(assistantId)) onToggleAssistant(assistantId)
        break
      }
    }
    setSelectedRequest(null)
-    setSelectedIndex(target.cell.index)
+    setSelectedRecordId(trajectoryRecordId(target.cell))
    activateTab('overview')
  }

@@ -1734,11 +1926,6 @@ export function TrajectoryTable({
  // open its summary, and remember the row to scroll once the un-collapsed
  // ledger has rendered. Not-found leaves the request pending (`turns` in the
  // deps retries as history pages in); the ack clears the store field.
-  const rootRef = useRef<HTMLDivElement>(null)
-  const tablePaneRef = useRef<HTMLDivElement>(null)
-  const followsTableTail = useRef(false)
-  const tableScrollInitialized = useRef(false)
-  const pendingScrollIndex = useRef<number | null>(null)
  const openRecordSummaryRef = useRef(openRecordSummary)
  openRecordSummaryRef.current = openRecordSummary
  useEffect(() => {
@@ -1746,61 +1933,213 @@ export function TrajectoryTable({
    const target = flattenRecords(turns).find(record => record.cell.callId === inspectCallId)
    if (target === undefined) return
    openRecordSummaryRef.current(target)
-    pendingScrollIndex.current = target.cell.index
+    pendingScrollRecordId.current = trajectoryRecordId(target.cell)
    onInspectApplied?.()
  }, [inspectCallId, turns, onInspectApplied])
  useEffect(() => {
-    const index = pendingScrollIndex.current
-    if (index === null) return
-    const row = rootRef.current
-      ?.querySelector<HTMLElement>(`tr[data-record-index="${index}"]`)
-    if (row === undefined || row === null) return
-    pendingScrollIndex.current = null
+    const id = pendingScrollRecordId.current
+    if (id === null) return
+    const position = records.findIndex(record =>
+      trajectoryRecordId(record.cell) === id && record.collapsedSummary === undefined)
+    if (position === -1) return
+    if (virtualizationEnabled) {
+      const virtualIndex = virtualIndexByRecordId.get(id)
+      if (virtualIndex === undefined) return
+      pendingScrollRecordId.current = null
+      followsTableTail.current = false
+      rowVirtualizer.scrollToIndex(virtualIndex, { behavior: 'smooth', align: 'center' })
+      return
+    }
+    pendingScrollRecordId.current = null
+    followsTableTail.current = false
+    const recordIndex = records[position]?.cell.index
+    const row = recordIndex === undefined
+      ? null
+      : rootRef.current?.querySelector<HTMLElement>(`tr[data-record-index="${recordIndex}"]`)
    /* v8 ignore next -- jsdom lacks scrollIntoView; browsers always have it. */
-    if (typeof row.scrollIntoView === 'function') {
+    if (row !== undefined && row !== null && typeof row.scrollIntoView === 'function') {
      row.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }
-  })
+  }, [records, rowVirtualizer, virtualIndexByRecordId, virtualizationEnabled])
+  useEffect(() => {
+    if (timelineFocusIndexes === null || timelineFocusIndexes.size === 0) return
+    const focusedPositions = records.flatMap((record, position) =>
+      record.collapsedSummary === undefined
+      && record.cell.requestOnly !== true
+      && timelineFocusIndexes.has(record.cell.index)
+        ? [position]
+        : [])
+    const first = focusedPositions.at(0)
+    const last = focusedPositions.at(-1)
+    if (first === undefined || last === undefined) return
+    if (!virtualizationEnabled) {
+      const ledger = rootRef.current
+      if (ledger === null) return
+      const focusedRows = [
+        ...ledger.querySelectorAll<HTMLElement>('tr[data-timeline-focus="inside"]'),
+      ]
+      const firstRow = focusedRows.at(0)
+      const lastRow = focusedRows.at(-1)
+      if (firstRow === undefined || lastRow === undefined) return
+      const focusHeight =
+        lastRow.getBoundingClientRect().bottom - firstRow.getBoundingClientRect().top
+      const target = focusHeight > ledger.clientHeight
+        ? firstRow
+        : focusedRows[Math.floor((focusedRows.length - 1) / 2)]
+      /* v8 ignore next -- jsdom lacks scrollIntoView; browsers always have it. */
+      if (target !== undefined && typeof target.scrollIntoView === 'function') {
+        followsTableTail.current = false
+        target.scrollIntoView({
+          behavior: 'smooth',
+          block: focusHeight > ledger.clientHeight ? 'start' : 'center',
+        })
+      }
+      return
+    }
+    const focusedVirtualIndexes = [...new Set(focusedPositions.flatMap((position) => {
+      const record = records[position]
+      if (record === undefined) return []
+      const virtualIndex = virtualIndexByRecordId.get(trajectoryRecordId(record.cell))
+      return virtualIndex === undefined ? [] : [virtualIndex]
+    }))].sort((left, right) => left - right)
+    const firstVirtual = focusedVirtualIndexes.at(0)
+    const lastVirtual = focusedVirtualIndexes.at(-1)
+    if (firstVirtual === undefined || lastVirtual === undefined) return
+    const paneHeight = tablePaneRef.current?.clientHeight ?? 0
+    const focusHeight = projectedVirtualRows
+      .slice(firstVirtual, lastVirtual + 1)
+      .reduce((height, row) => height + row.height, 0)
+    followsTableTail.current = false
+    rowVirtualizer.scrollToIndex(
+      focusHeight > paneHeight
+        ? firstVirtual
+        : focusedVirtualIndexes[Math.floor((focusedVirtualIndexes.length - 1) / 2)]
+          ?? firstVirtual,
+      {
+        behavior: 'smooth',
+        align: focusHeight > paneHeight ? 'start' : 'center',
+      },
+    )
+  }, [
+    projectedVirtualRows,
+    records,
+    rowVirtualizer,
+    timelineFocusIndexes,
+    virtualIndexByRecordId,
+    virtualizationEnabled,
+  ])
+  const requestOlder = useCallback((pane: HTMLDivElement) => {
+    if (
+      !hasOlderRecords
+      || onLoadOlder === undefined
+      || loadingOlder.current
+      || pane.scrollTop > OLDER_LOAD_THRESHOLD_PX
+    ) return
+    loadingOlder.current = true
+    setOlderLoading(true)
+    olderLoadAnchor.current = {
+      historyStartSeq,
+      scrollHeight: pane.scrollHeight,
+      scrollTop: pane.scrollTop,
+    }
+    void onLoadOlder().then((advanced) => {
+      if (!advanced) olderLoadAnchor.current = null
+    }).finally(() => {
+      loadingOlder.current = false
+      setOlderLoading(false)
+    })
+  }, [hasOlderRecords, historyStartSeq, onLoadOlder])
  useLayoutEffect(() => {
    const pane = tablePaneRef.current
    if (pane === null) return
-    if (!tableScrollInitialized.current) {
-      tableScrollInitialized.current = true
-      followsTableTail.current =
-        pane.scrollHeight - pane.clientHeight - pane.scrollTop
-          <= BOTTOM_FOLLOW_THRESHOLD_PX
+    const anchor = olderLoadAnchor.current
+    if (anchor !== null && anchor.historyStartSeq !== historyStartSeq) {
+      if (!virtualizationEnabled) {
+        pane.scrollTop = anchor.scrollTop + pane.scrollHeight - anchor.scrollHeight
+      }
+      olderLoadAnchor.current = null
+      followsTableTail.current = false
      return
    }
-    if (followsTableTail.current) pane.scrollTop = pane.scrollHeight
-  }, [turns])
+    if (!tableScrollInitialized.current) {
+      if (historyLoading) return
+      tableScrollInitialized.current = true
+      followsTableTail.current = true
+      if (virtualizationEnabled) rowVirtualizer.scrollToEnd({ behavior: 'auto' })
+      else pane.scrollTop = pane.scrollHeight
+      setTableScrollReady(true)
+      return
+    }
+    if (!followsTableTail.current) return
+    if (virtualizationEnabled) rowVirtualizer.scrollToEnd({ behavior: 'auto' })
+    else pane.scrollTop = pane.scrollHeight
+  }, [
+    historyLoading,
+    historyStartSeq,
+    rowVirtualizer,
+    virtualRowStructure,
+    virtualizationEnabled,
+  ])
+
+  const loadingLabel = olderLoading
+    ? 'Loading earlier history…'
+    : 'Loading trajectory…'
+  const showLoading = historyLoading || olderLoading || !tableScrollReady

  return (
    <div ref={rootRef} className={css.split} style={splitStyle}>
      <div
        ref={tablePaneRef}
        className={css.tablePane}
+        data-trajectory-scroll=""
        onScroll={(event) => {
          const pane = event.currentTarget
          followsTableTail.current =
            pane.scrollHeight - pane.clientHeight - pane.scrollTop
              <= BOTTOM_FOLLOW_THRESHOLD_PX
+          requestOlder(pane)
        }}
        onClick={(event) => {
          if (event.target === event.currentTarget) clearAllSelections()
        }}
      >
-        <table className={css.table}>
+        {showLoading && (
+          <div className={css.historyLoading} role="status" aria-live="polite">
+            <span className={css.historyLoadingBar}>
+              <span className={css.historyLoadingSpinner} aria-hidden="true" />
+              {loadingLabel}
+            </span>
+          </div>
+        )}
+        <table
+          className={css.table}
+          data-scroll-ready={tableScrollReady || undefined}
+          aria-rowcount={records.length}
+        >
          <colgroup>
            <col className={css.eventColumn} />
            <col className={css.contentColumn} />
          </colgroup>
          <tbody>
-            {records.map((record) => {
+            {virtualTop > 0 && (
+              <tr className={css.virtualSpacer} data-virtual-spacer="top" aria-hidden="true">
+                <td
+                  colSpan={2}
+                  style={{
+                    '--trajectory-virtual-spacer-height': `${virtualTop}px`,
+                  } as VirtualSpacerStyle}
+                />
+              </tr>
+            )}
+            {renderedRecords.map(({ record, position, terminalRequestBoundary }) => {
              const displayText = recordDisplayText(record.cell)
+              const toolCallOnly = isToolCallOnly(record.cell)
              const toolCallText = toolCallTextParts(record.cell.kind, displayText)
-              const listDisplayText = toolCallText === undefined
-                ? displayText
-                : [toolCallText.name, toolCallText.args].filter(Boolean).join(' ')
+              const listDisplayText = toolCallOnly
+                ? '(tool call only)'
+                : toolCallText === undefined
+                  ? displayText
+                  : [toolCallText.name, toolCallText.args].filter(Boolean).join(' ')
              const isCollapsedSummary = record.collapsedSummary !== undefined
              const isRequestOnly = record.cell.requestOnly === true
              const isInitialSystem = record.cell.kind === 'system'
@@ -1824,15 +2163,15 @@ export function TrajectoryTable({
                : `Request #${request}${requestInfo?.purpose === 'compaction' ? ' · Compaction' : ''}`
              const requestSelected = request !== undefined
                && selectedRequest?.turn === record.turn
-                && selectedRequest.section === record.section
-                && selectedRequest.number === request
+                && selectedRequest.group === record.group
              const sectionActive = record.turn === null
                ? activeSection === record.section
                : activeTurn === record.turn
              return (
                <tr
-                  key={`${record.cell.index}:${record.collapsedSummaryKind ?? 'record'}`}
+                  key={trajectoryVirtualRecordKey(record)}
                  tabIndex={isRequestOnly ? -1 : 0}
+                  aria-rowindex={position + 1}
                  aria-label={isCollapsedSummary
                    ? `Collapsed ${record.collapsedSummaryKind} summary, ${record.collapsedSummary}`
                    : isRequestOnly
@@ -1840,10 +2179,13 @@ export function TrajectoryTable({
                      : `${request === undefined ? '' : `Request ${request}, `}${KIND_LABEL[record.cell.kind]}, ${listDisplayText || 'no content'}`}
                  aria-selected={!isCollapsedSummary && !isRequestOnly && selectedIndex === record.cell.index}
                  data-kind={record.cell.kind}
+                  data-trajectory-row-key={trajectoryVirtualRecordKey(record)}
+                  data-virtual-position={virtualizationEnabled ? position : undefined}
                  data-record-index={!isCollapsedSummary && !isRequestOnly
                    ? record.cell.index
                    : undefined}
                  data-request-only={isRequestOnly || undefined}
+                  data-terminal-request-boundary={terminalRequestBoundary || undefined}
                  data-group-start={record.groupStart || undefined}
                  data-turn-start={record.turnStart || undefined}
                  data-error={record.cell.isError || undefined}
@@ -1860,7 +2202,7 @@ export function TrajectoryTable({
                      ? () => {
                        if (record.collapsedSummaryKind === 'turn' && record.turn !== null) {
                          onToggleTurn(record.turn)
-                        } else onToggleAssistant(record.cell.index)
+                        } else onToggleAssistant(trajectoryRecordId(record.cell))
                      }
                      : () => { selectRecord(record.cell.index) }}
                  onDoubleClick={(event) => {
@@ -1875,7 +2217,7 @@ export function TrajectoryTable({
                      && assistantToolCalls(allRecords, record.cell.index).length > 0
                    ) {
                      event.preventDefault()
-                      onToggleAssistant(record.cell.index)
+                      onToggleAssistant(trajectoryRecordId(record.cell))
                      return
                    }
                    if (!record.turnStart) return
@@ -1894,7 +2236,7 @@ export function TrajectoryTable({
                    if (isCollapsedSummary) {
                      if (record.collapsedSummaryKind === 'turn' && record.turn !== null) {
                        onToggleTurn(record.turn)
-                      } else onToggleAssistant(record.cell.index)
+                      } else onToggleAssistant(trajectoryRecordId(record.cell))
                      return
                    }
                    selectRecord(record.cell.index)
@@ -1917,9 +2259,8 @@ export function TrajectoryTable({
                          event.stopPropagation()
                          selectRequest({
                            turn: record.turn,
-                            section: record.section,
-                            number: request,
                            group: record.group,
+                            ...(requestInfo?.seq === undefined ? {} : { seq: requestInfo.seq }),
                          })
                        }}
                        onDoubleClick={(event) => { event.stopPropagation() }}
@@ -2013,8 +2354,8 @@ export function TrajectoryTable({
                              : `${listDisplayText} → ${record.cell.result}`}
                          >
                            <span className={record.cell.result === undefined ? undefined : css.resultRequest}>
-                              {isToolCallOnly(record.cell)
-                                ? null
+                              {toolCallOnly
+                                ? <span className={css.toolCallOnly}>(tool call only)</span>
                                : toolCallText === undefined
                                  ? listDisplayText || '—'
                                  : (
@@ -2047,6 +2388,16 @@ export function TrajectoryTable({
                </tr>
              )
            })}
+            {virtualBottom > 0 && (
+              <tr className={css.virtualSpacer} data-virtual-spacer="bottom" aria-hidden="true">
+                <td
+                  colSpan={2}
+                  style={{
+                    '--trajectory-virtual-spacer-height': `${virtualBottom}px`,
+                  } as VirtualSpacerStyle}
+                />
+              </tr>
+            )}
          </tbody>
        </table>
      </div>
@@ -2141,7 +2492,7 @@ export function TrajectoryTable({
                  <>
                    <span className={css.requestDetailsDot} aria-hidden="true" />
                    <span className={css.requestDetailsName}>
-                      Request #{selectedRequest.number}
+                      Request #{selectedRequestNumber ?? '—'}
                    </span>
                    <span className={css.detailsLocation}>
                      {selectedRequestInfo?.purpose === 'compaction'
@@ -2220,7 +2571,10 @@ export function TrajectoryTable({
              && selectedRequestState !== undefined
              && activeTab === 'overview' && (
              <>
-                <dl className={css.overview}>
+                <dl
+                  className={`${css.overview} ${css.summaryScrollRegion}`}
+                  data-summary-scroll-region=""
+                >
                  <div>
                    <dt>Status</dt>
                    <dd className={selectedRequestState === 'error' ? css.error : undefined}>
@@ -2371,7 +2725,10 @@ export function TrajectoryTable({
              && selectedState !== undefined
              && activeTab === 'overview' && (
              <>
-                <dl className={css.overview}>
+                <dl
+                  className={`${css.overview} ${css.summaryScrollRegion}`}
+                  data-summary-scroll-region=""
+                >
                  <div>
                    <dt>Status</dt>
                    <dd className={selectedState === 'error' ? css.error : undefined}>
@@ -2388,7 +2745,10 @@ export function TrajectoryTable({
                  </div>
                </dl>
                {selected.cell.outputDetail !== undefined && (
-                  <div className={css.compactedSummary}>
+                  <div
+                    className={`${css.compactedSummary} ${css.summaryScrollRegion}`}
+                    data-summary-scroll-region=""
+                  >
                    <MarkdownRecordContent
                      record={selected}
                      rendered
@@ -2406,7 +2766,10 @@ export function TrajectoryTable({
              && selectedState !== undefined
              && activeTab === 'overview' && (
              <>
-                <dl className={css.overview}>
+                <dl
+                  className={`${css.overview} ${css.summaryScrollRegion}`}
+                  data-summary-scroll-region=""
+                >
                  {selected.cell.messageSource !== undefined && (
                    <div>
                      <dt>Origin</dt>
@@ -2441,7 +2804,7 @@ export function TrajectoryTable({
                              selectRequest(selectedAssistantRequestTarget)
                            }}
                          >
-                            <span>Request #{selectedAssistantRequestTarget.number}</span>
+                            <span>Request #{selectedAssistantRequest ?? '—'}</span>
                            <IconChevronRightOutline14
                              className={css.overviewHierarchyJumpIconTight}
                              size={11}
--- a/packages/client/ui-trajectory/src/client/TrajectoryTimeline.module.css
+++ b/packages/client/ui-trajectory/src/client/TrajectoryTimeline.module.css
@@ -61,6 +61,46 @@
  cursor: grabbing;
 }

+.earlierHistory {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 28px;
+  align-items: center;
+  justify-content: flex-start;
+  appearance: none;
+  box-sizing: border-box;
+  padding-left: 3px;
+  border: 0;
+  outline: none;
+  background: linear-gradient(
+    to right,
+    var(--dsw-alias-bg-layer-2) 0,
+    var(--dsw-alias-bg-layer-2) 38%,
+    transparent 100%
+  );
+  color: var(--dsw-alias-label-secondary);
+  font: var(--dsw-font-xs-13);
+  line-height: 1;
+  opacity: 0.72;
+  cursor: pointer;
+}
+
+.earlierHistory:hover {
+  opacity: 1;
+}
+
+.earlierHistory[aria-disabled='true'] {
+  cursor: default;
+}
+
+.earlierHistory:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--dsw-alias-border-l2);
+}
+
 .empty {
  position: absolute;
  top: 50%;
--- a/packages/client/ui-trajectory/src/client/TrajectoryTimeline.tsx
+++ b/packages/client/ui-trajectory/src/client/TrajectoryTimeline.tsx
@@ -132,6 +132,10 @@ export interface TrajectoryTimelineProps {
  turns: readonly TrajectoryTurnModel[]
  mode: TrajectoryTimelineMode
  range: TrajectoryTimeRange | null
+  /** Whether the loaded timeline omits an earlier history prefix. */
+  hasEarlierRecords?: boolean
+  /** Load one earlier history page from the truncation control. */
+  onLoadEarlier?: () => Promise<boolean>
  selectedIndex?: number | null
  /** Record indexes matching the active ledger search, or null without a query. */
  searchMatchIndexes?: ReadonlySet<number> | null
@@ -191,11 +195,49 @@ function LaneLabels() {
  )
 }

+function EarlierHistoryBoundary({
+  loading,
+  onHover,
+  onLoad,
+}: {
+  loading: boolean
+  onHover: () => void
+  onLoad: (() => void) | undefined
+}) {
+  return (
+    <Tooltip
+      label={loading ? 'Loading earlier history…' : 'Click to load earlier history'}
+      side="right"
+      delayMs={TIMELINE_TOOLTIP_DELAY_MS}
+    >
+      <button
+        type="button"
+        className={css.earlierHistory}
+        data-earlier-history
+        data-loading={loading || undefined}
+        aria-label={loading ? 'Loading earlier history' : 'Load earlier history'}
+        aria-disabled={loading || onLoad === undefined}
+        onClick={onLoad}
+        onPointerEnter={(event) => {
+          event.stopPropagation()
+          onHover()
+        }}
+        onPointerMove={(event) => { event.stopPropagation() }}
+        onPointerDown={(event) => { event.stopPropagation() }}
+      >
+        …
+      </button>
+    </Tooltip>
+  )
+}
+
 /** Overview renderer with drag ranges, click-sized focus, and Escape reset. */
 export const TrajectoryTimeline = memo(function TrajectoryTimeline({
  turns,
  mode,
  range,
+  hasEarlierRecords = false,
+  onLoadEarlier,
  selectedIndex = null,
  searchMatchIndexes = null,
  onRangeChange,
@@ -222,6 +264,7 @@ export const TrajectoryTimeline = memo(function TrajectoryTimeline({
  const trackRef = useRef<HTMLDivElement | null>(null)
  const [draft, setDraft] = useState<TrajectoryTimeRange | null>(null)
  const [hover, setHover] = useState<HoverPoint | null>(null)
+  const [loadingEarlier, setLoadingEarlier] = useState(false)
  const [panning, setPanning] = useState(false)
  const [viewport, setViewport] = useState<TrajectoryTimeRange | null>(null)
  const [animateViewport, setAnimateViewport] = useState(false)
@@ -278,6 +321,15 @@ export const TrajectoryTimeline = memo(function TrajectoryTimeline({
    )
  const domainDuration = viewport === null ? fullDuration : viewportDuration
  const domainStart = viewport === null ? model?.start ?? 0 : viewportStart
+  const showsEarlierBoundary = hasEarlierRecords
+    && model !== null
+    && domainStart === model.start
+  const loadEarlier = onLoadEarlier === undefined || loadingEarlier
+    ? undefined
+    : () => {
+      setLoadingEarlier(true)
+      void onLoadEarlier().finally(() => { setLoadingEarlier(false) })
+    }
  const projectedDomainStyle = model === null
    ? undefined
    : {
@@ -333,6 +385,13 @@ export const TrajectoryTimeline = memo(function TrajectoryTimeline({
          <LaneLabels />
          <div className={css.track}>
            <span className={css.empty}>No timing data</span>
+            {hasEarlierRecords && (
+              <EarlierHistoryBoundary
+                loading={loadingEarlier}
+                onHover={() => { setHover(null) }}
+                onLoad={loadEarlier}
+              />
+            )}
          </div>
        </div>
      </section>
@@ -541,6 +600,13 @@ export const TrajectoryTimeline = memo(function TrajectoryTimeline({
            event.preventDefault()
          }}
        >
+          {showsEarlierBoundary && (
+            <EarlierHistoryBoundary
+              loading={loadingEarlier}
+              onHover={() => { setHover(null) }}
+              onLoad={loadEarlier}
+            />
+          )}
          {hover !== null && hover.recordIndex === null && draft === null && (
            <div
              className={css.hoverLine}
@@ -609,7 +675,7 @@ export const TrajectoryTimeline = memo(function TrajectoryTimeline({
              .map((span) => {
                const left = (span.start - model.start) / fullDuration
                const width = (span.end - span.start) / fullDuration
-                const widthPercent = Math.max(width * 100, 0.35)
+                const widthPercent = width * 100
                const detail = detailByIndex.get(span.index)
                const ttftMs = detail?.ttftMs
                const decodingMs = detail?.decodingMs
@@ -646,7 +712,7 @@ export const TrajectoryTimeline = memo(function TrajectoryTimeline({
                      style={{
                        '--trajectory-span-left': `${left * 100}%`,
                        '--trajectory-span-width': `${widthPercent}%`,
-                        '--trajectory-span-gap': `clamp(0.25px, ${widthPercent * 0.08}%, 1px)`,
+                        '--trajectory-span-gap': `min(${widthPercent * 0.08}%, 1px)`,
                        '--trajectory-span-lane': span.lane,
                        ...(ttftFraction === null
                          ? {}
--- a/packages/client/ui-trajectory/src/client/TrajectoryView.tsx
+++ b/packages/client/ui-trajectory/src/client/TrajectoryView.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ConvViewProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type { InjectFace } from '@deepseek-ai/dsh-client-ui-slots'
 import type {
-  AssistantMessageNode, ConversationContext,
+  AssistantBlock, AssistantMessageNode, ConversationContext, ConversationSnapshot,
  SessionHistoryFace, SnapshotStore,
 } from '@deepseek-ai/dsh-client-runtime/client'
 import {
@@ -17,15 +17,51 @@ import {
 } from './TrajectoryTable.tsx'
 import { TrajectoryToolbar } from './TrajectoryToolbar.tsx'
 import { TrajectoryTimeline } from './TrajectoryTimeline.tsx'
-import { deriveTrajectoryLayout } from './layout.ts'
+import {
+  appendTrajectoryPartialLayout, deriveTrajectoryLayout,
+  type TrajectoryTurnModel,
+} from './layout.ts'
 import {
  trajectoryTimelineFocusIndexes,
  type TrajectoryTimelineMode,
  type TrajectoryTimeRange,
 } from './timeline.ts'
+import { trajectoryRecordId } from './trajectory-record.ts'
 import css from './views.module.css'

-const EMPTY_IDS: ReadonlySet<number> = new Set()
+const EMPTY_TURN_IDS: ReadonlySet<number> = new Set()
+const EMPTY_RECORD_IDS: ReadonlySet<string> = new Set()
+
+function lastCellIndex(turns: readonly TrajectoryTurnModel[]): number {
+  let last = 0
+  for (const turn of turns) {
+    for (const group of turn.groups) {
+      for (const cell of group.cells) last = Math.max(last, cell.index)
+    }
+  }
+  return last
+}
+
+function timelineBlock(block: AssistantBlock): AssistantBlock {
+  switch (block.kind) {
+    case 'text': return { kind: 'text', text: '' }
+    case 'reasoning': return { kind: 'reasoning', text: '' }
+    case 'tool-call': return {
+      kind: 'tool-call',
+      callId: block.callId,
+      name: block.name,
+      argsRaw: '',
+    }
+    case 'other': return { kind: 'other', block: null }
+  }
+}
+
+function partialStructureSignature(partial: ConversationSnapshot['partial']): string {
+  if (partial === null) return ''
+  return partial.blocks.map(block => block.kind === 'tool-call'
+    ? `${block.kind}:${block.callId}:${block.name}`
+    : block.kind).join('\u0000')
+}

 /** Session-history paging needed by the event-complete trajectory view. */
 export interface TrajectoryViewInjected {
@@ -33,7 +69,8 @@ export interface TrajectoryViewInjected {
    history: SessionHistoryFace
    duration: SnapshotStore<boolean>
  }
-  loadAllHistory: (signal: AbortSignal) => Promise<void>
+  loadHistoryTail: (signal: AbortSignal) => Promise<void>
+  loadOlderHistory: (signal: AbortSignal) => Promise<boolean>
  setActualDuration: (actualDuration: boolean) => void
 }

@@ -137,14 +174,23 @@ function searchMatches(
  return matches
 }

+function mergeSearchMatches(
+  finalized: ReadonlySet<number> | null,
+  partial: ReadonlySet<number> | null,
+): ReadonlySet<number> | null {
+  if (finalized === null || partial === null) return null
+  return new Set([...finalized, ...partial])
+}
+
 export function TrajectoryView({
-  useHistory, useDuration, loadAllHistory, setActualDuration, inspect, onInspectDone,
+  useHistory, useDuration, loadHistoryTail, loadOlderHistory, setActualDuration,
+  inspect, onInspectDone,
 }: ConvViewProps & InjectFace<TrajectoryViewInjected>) {
-  const [collapsedTurns, setCollapsedTurns] = useState<ReadonlySet<number>>(EMPTY_IDS)
+  const [collapsedTurns, setCollapsedTurns] = useState<ReadonlySet<number>>(EMPTY_TURN_IDS)
  const [collapsedAssistants, setCollapsedAssistants] =
-    useState<ReadonlySet<number>>(EMPTY_IDS)
+    useState<ReadonlySet<string>>(EMPTY_RECORD_IDS)
  const [timelineSelection, setTimelineSelection] = useState<{
-    branchId: number
+    branchKey: string
    range: TrajectoryTimeRange
  } | null>(null)
  const actualDuration = useDuration(value => value)
@@ -154,26 +200,36 @@ export function TrajectoryView({
  const [timelineRecordSelection, setTimelineRecordSelection] = useState<{
    readonly index: number
  } | null>(null)
-  const ledgerRef = useRef<HTMLDivElement>(null)
+  const [timelineRecordFocus, setTimelineRecordFocus] = useState<{
+    readonly index: number
+  } | null>(null)
  const inspection = useHistory(snapshot => snapshot.inspection)
+  const historyLoading = useHistory(snapshot =>
+    snapshot.state === 'cold' || snapshot.state === 'loading')
+  const hasOlderHistory = useHistory(snapshot => snapshot.hasMore)
+  const historyBaseSeq = useHistory(snapshot => snapshot.baseSeq)
  const nodes = inspection.eventNodes
  const partial = inspection.partial
  const runningCalls = inspection.runningCalls
  const codeDispatches = inspection.codeDispatches
-  const loadAllHistoryRef = useRef(loadAllHistory)
-  loadAllHistoryRef.current = loadAllHistory
+  const loadHistoryTailRef = useRef(loadHistoryTail)
+  loadHistoryTailRef.current = loadHistoryTail
+  const historyControllerRef = useRef<AbortController | null>(null)
  useEffect(() => {
    const controller = new AbortController()
-    void loadAllHistoryRef.current(controller.signal)
+    historyControllerRef.current = controller
+    void loadHistoryTailRef.current(controller.signal)
    return () => { controller.abort() }
  }, [])
  const requests = inspection.requests
  const callSchemas = inspection.callSchemas
+  const historyContexts = inspection.contexts
+  const interruptedNodes = inspection.interruptedNodes
  const contexts = useMemo<readonly ConversationContext[]>(
-    () => inspection.contexts.length === 0
+    () => historyContexts.length === 0
      ? [{ id: 0, nodes }]
-      : inspection.contexts,
-    [inspection, nodes],
+      : historyContexts,
+    [historyContexts, nodes],
  )
  const branches = useMemo(
    () => deriveTrajectoryContextBranches(contexts),
@@ -183,18 +239,18 @@ export function TrajectoryView({
  if (currentBranch === undefined) throw new Error('trajectory branch projection must not be empty')
  const selectedNodes = useMemo(() => {
    const selected = new Map(currentBranch.nodes.map(node => [node.seq, node]))
-    for (const node of inspection.interruptedNodes) {
+    for (const node of interruptedNodes) {
      selected.set(node.seq, node)
    }
    return [...selected.values()].sort((left, right) => left.seq - right.seq)
-  }, [currentBranch, inspection])
+  }, [currentBranch.nodes, interruptedNodes])
  const selectedRequests = useMemo(
    () => requests.filter(request =>
      trajectoryBranchContainsRequest(currentBranch, request),
    ),
    [currentBranch, requests],
  )
-  const globalRequestNumbers = useMemo<readonly TrajectoryRequestNumber[]>(() => {
+  const requestNumbers = useMemo<readonly TrajectoryRequestNumber[]>(() => {
    const assistantsByStep = new Map<string, AssistantMessageNode>()
    for (const context of contexts) {
      for (const node of context.nodes) {
@@ -295,63 +351,74 @@ export function TrajectoryView({
      })
    }

-    if (partial !== null && partial.step > 0) {
-      const key = `${partial.turn}\u0000${partial.step}`
-      const recorded = numbered.some(request =>
-        `${request.turn}\u0000${request.step}` === key,
-      )
-      if (!recorded) {
-        numbered.push({
-          turn: partial.turn,
-          step: partial.step,
-          group: `Step ${partial.step}`,
-          number: orderedRequests.length + 1,
-          ...(currentBranch.latest.prompt?.config.provider === undefined
-            ? {}
-            : { provider: currentBranch.latest.prompt.config.provider }),
-          ...(currentBranch.latest.prompt?.config.model === undefined
-            ? {}
-            : { model: currentBranch.latest.prompt.config.model }),
-          ...(currentBranch.latest.prompt?.config === undefined
-            ? {}
-            : { requestConfig: currentBranch.latest.prompt.config }),
-          ...(cumulativeUsage === undefined ? {} : { cumulativeUsage }),
-        })
-      }
-    }
    return numbered
  }, [
-    contexts, currentBranch.latest.prompt, nodes, partial, requests,
+    contexts, nodes, requests,
  ])
-  const requestNumbers = globalRequestNumbers
-  const turns = useMemo(
-    () => deriveTrajectoryLayout({
+  const partialTurn = partial?.turn ?? null
+  const partialStep = partial?.step ?? null
+  const finalized = useMemo(() => {
+    const turns = deriveTrajectoryLayout({
      nodes: selectedNodes,
-      partial,
+      partial: partialTurn === null || partialStep === null
+        ? null
+        : { turn: partialTurn, step: partialStep, blocks: [] },
      runningCalls,
      requests: selectedRequests,
      callSchemas,
      codeDispatches,
-    }),
-    [
-      selectedNodes, partial, runningCalls, selectedRequests, callSchemas, codeDispatches,
-    ],
+    })
+    return { turns, lastIndex: lastCellIndex(turns) }
+  }, [
+    selectedNodes, partialTurn, partialStep,
+    runningCalls, selectedRequests, callSchemas, codeDispatches,
+  ])
+  const timelinePartialSignature = partialStructureSignature(partial)
+  const timelinePartial = useMemo<ConversationSnapshot['partial']>(() => partial === null
+    ? null
+    : {
+      turn: partial.turn,
+      step: partial.step,
+      blocks: partial.blocks.map(block => timelineBlock(block)),
+    },
+  [partialStep, partialTurn, timelinePartialSignature])
+  const timelineTurns = useMemo(
+    () => appendTrajectoryPartialLayout(finalized.turns, timelinePartial, finalized.lastIndex),
+    [finalized, timelinePartial],
  )
  const timelineMode: TrajectoryTimelineMode = actualDuration
    ? actualTime ? 'actual' : 'duration'
    : actualTime ? 'time' : 'sequence'
-  const searchMatchIndexes = useMemo(
-    () => searchMatches(turns, searchQuery),
-    [searchQuery, turns],
+  const finalizedSearchMatches = useMemo(
+    () => searchMatches(finalized.turns, searchQuery),
+    [finalized, searchQuery],
  )
-  const timelineRange = timelineSelection?.branchId === currentBranch.id
+  const partialSearchTurns = useMemo(
+    () => appendTrajectoryPartialLayout([], partial, finalized.lastIndex),
+    [finalized.lastIndex, partial],
+  )
+  const streamingCells = useMemo(
+    () => partialSearchTurns.flatMap(turn =>
+      turn.groups.flatMap(group => group.cells),
+    ),
+    [partialSearchTurns],
+  )
+  const partialSearchMatches = useMemo(
+    () => searchMatches(partialSearchTurns, searchQuery),
+    [partialSearchTurns, searchQuery],
+  )
+  const searchMatchIndexes = useMemo(
+    () => mergeSearchMatches(finalizedSearchMatches, partialSearchMatches),
+    [finalizedSearchMatches, partialSearchMatches],
+  )
+  const timelineRange = timelineSelection?.branchKey === currentBranch.key
    ? timelineSelection.range
    : null
  const timelineFocusIndexes = useMemo(
    () => timelineRange === null
      ? null
-      : trajectoryTimelineFocusIndexes(turns, timelineRange, timelineMode),
-    [timelineMode, timelineRange, turns],
+      : trajectoryTimelineFocusIndexes(timelineTurns, timelineRange, timelineMode),
+    [timelineMode, timelineRange, timelineTurns],
  )
  const handleRecordSelect = useCallback((index: number) => {
    if (
@@ -361,31 +428,22 @@ export function TrajectoryView({
      setTimelineSelection(null)
    }
  }, [timelineFocusIndexes])
-  useEffect(() => {
-    if (timelineFocusIndexes === null || timelineFocusIndexes.size === 0) return
-    const ledger = ledgerRef.current
-    if (ledger === null) return
-    const focusedRows = [
-      ...ledger.querySelectorAll<HTMLElement>('tr[data-timeline-focus="inside"]'),
-    ]
-    const first = focusedRows.at(0)
-    const last = focusedRows.at(-1)
-    if (first === undefined || last === undefined) return
-    const focusHeight =
-      last.getBoundingClientRect().bottom - first.getBoundingClientRect().top
-    if (focusHeight > ledger.clientHeight) {
-      if (typeof first.scrollIntoView === 'function') {
-        first.scrollIntoView({ behavior: 'smooth', block: 'start' })
-      }
-      return
-    }
-    const middle = focusedRows[Math.floor((focusedRows.length - 1) / 2)]
-    if (middle !== undefined && typeof middle.scrollIntoView === 'function') {
-      middle.scrollIntoView({ behavior: 'smooth', block: 'center' })
-    }
-  }, [timelineFocusIndexes])
+  const handleTimelineRangeChange = useCallback((range: TrajectoryTimeRange | null) => {
+    setTimelineSelection(range === null ? null : {
+      branchKey: currentBranch.key,
+      range,
+    })
+  }, [currentBranch.key])
+  const handleTimelineRecordSelect = useCallback((index: number) => {
+    setTimelineSelection(null)
+    setTimelineRecordSelection({ index })
+    setSelectedTimelineIndex(index)
+  }, [])
+  const handleTimelineRecordFocus = useCallback((index: number) => {
+    setTimelineRecordFocus({ index })
+  }, [])
  const collapsibleTurnIds = useMemo(
-    () => turns
+    () => timelineTurns
      .filter(turn =>
        turn.turn !== null
        &&
@@ -396,23 +454,25 @@ export function TrajectoryView({
          0,
        ) > 1)
      .flatMap(turn => turn.turn === null ? [] : [turn.turn]),
-    [turns],
+    [timelineTurns],
  )
  const allTurnsCollapsed = collapsibleTurnIds.length > 0
    && collapsibleTurnIds.every(turn => collapsedTurns.has(turn))
  const collapsibleAssistantIds = useMemo(() => {
-    const ids: number[] = []
-    for (const turn of turns) {
+    const ids: string[] = []
+    for (const turn of timelineTurns) {
      const cells = turn.groups.flatMap(group => group.cells)
      for (let i = 0; i < cells.length; i++) {
        const cell = cells[i]
        if (cell?.kind !== 'message') continue
        const next = cells[i + 1]
-        if (next?.kind === 'tool' || next?.kind === 'subtool') ids.push(cell.index)
+        if (next?.kind === 'tool' || next?.kind === 'subtool') {
+          ids.push(trajectoryRecordId(cell))
+        }
      }
    }
    return ids
-  }, [turns])
+  }, [timelineTurns])
  const allAssistantsCollapsed = collapsibleAssistantIds.length > 0
    && collapsibleAssistantIds.every(index => collapsedAssistants.has(index))

@@ -437,11 +497,11 @@ export function TrajectoryView({
    })
  }

-  const toggleAssistant = (index: number) => {
+  const toggleAssistant = (id: string) => {
    setCollapsedAssistants((current) => {
      const collapsed = new Set(current)
-      if (collapsed.has(index)) collapsed.delete(index)
-      else collapsed.add(index)
+      if (collapsed.has(id)) collapsed.delete(id)
+      else collapsed.add(id)
      return collapsed
    })
  }
@@ -458,6 +518,13 @@ export function TrajectoryView({
    })
  }

+  const loadEarlierHistory = useCallback(() => {
+    const signal = historyControllerRef.current?.signal
+    return signal?.aborted === false
+      ? loadOlderHistory(signal)
+      : Promise.resolve(false)
+  }, [loadOlderHistory])
+
  return (
    <div className={css.root} data-conversation-composer-overlay="">
      <TrajectoryToolbar
@@ -479,45 +546,33 @@ export function TrajectoryView({
        onSearchQueryChange={setSearchQuery}
      />
      <TrajectoryTimeline
-        turns={turns}
+        turns={timelineTurns}
        mode={timelineMode}
        range={timelineRange}
+        hasEarlierRecords={hasOlderHistory}
+        onLoadEarlier={loadEarlierHistory}
        selectedIndex={selectedTimelineIndex}
        searchMatchIndexes={searchMatchIndexes}
-        onRangeChange={(range) => {
-          setTimelineSelection(range === null ? null : {
-            branchId: currentBranch.id,
-            range,
-          })
-        }}
-        onRecordSelect={(index) => {
-          setTimelineSelection(null)
-          setTimelineRecordSelection({ index })
-          setSelectedTimelineIndex(index)
-          const row = ledgerRef.current
-            ?.querySelector<HTMLElement>(`tr[data-record-index="${index}"]`)
-          if (row !== undefined && row !== null && typeof row.scrollIntoView === 'function') {
-            row.scrollIntoView({ behavior: 'smooth', block: 'center' })
-          }
-        }}
-        onRecordFocus={(index) => {
-          const row = ledgerRef.current
-            ?.querySelector<HTMLElement>(`tr[data-record-index="${index}"]`)
-          if (row !== undefined && row !== null && typeof row.scrollIntoView === 'function') {
-            row.scrollIntoView({ behavior: 'smooth', block: 'center' })
-          }
-        }}
+        onRangeChange={handleTimelineRangeChange}
+        onRecordSelect={handleTimelineRecordSelect}
+        onRecordFocus={handleTimelineRecordFocus}
      />
-      <div ref={ledgerRef} className={css.ledger}>
+      <div className={css.ledger}>
        <TrajectoryTable
-          key={currentBranch.id}
+          key={currentBranch.key}
          requestNumbers={requestNumbers}
-          turns={turns}
+          turns={timelineTurns}
+          streamingCells={streamingCells}
          timelineFocusIndexes={timelineFocusIndexes}
          searchMatchIndexes={searchMatchIndexes}
          onSelectedIndexChange={setSelectedTimelineIndex}
          onRecordSelect={handleRecordSelect}
          recordSelection={timelineRecordSelection}
+          recordFocus={timelineRecordFocus}
+          historyLoading={historyLoading}
+          historyStartSeq={historyBaseSeq}
+          hasOlderRecords={hasOlderHistory}
+          onLoadOlder={loadEarlierHistory}
          onClearSelection={() => { setTimelineSelection(null) }}
          collapsedTurns={collapsedTurns}
          onToggleTurn={toggleTurn}
--- a/packages/client/ui-trajectory/src/client/context-branches.ts
+++ b/packages/client/ui-trajectory/src/client/context-branches.ts
@@ -7,6 +7,8 @@ import type {
 /** One continuous context branch; compactions stay inline while rewinds start a successor branch. */
 export interface TrajectoryContextBranch {
  id: number
+  /** Identity stable when older context generations are prepended. */
+  key: string
  contexts: readonly ConversationContext[]
  latest: ConversationContext
  nodes: readonly ConversationNode[]
@@ -18,6 +20,7 @@ export interface TrajectoryContextBranch {

 interface MutableBranch {
  id: number
+  key: string
  contexts: ConversationContext[]
  latest: ConversationContext
  nodes: Map<number, ConversationNode>
@@ -63,6 +66,9 @@ export function deriveTrajectoryContextBranches(
        )
      mutable.push({
        id: context.id,
+        key: context.origin === 'rewind' && context.originSeq !== undefined
+          ? `rewind:${context.originSeq}`
+          : 'root',
        contexts: [context],
        latest: context,
        nodes: new Map(
@@ -84,6 +90,7 @@ export function deriveTrajectoryContextBranches(
  }
  return mutable.map(branch => ({
    id: branch.id,
+    key: branch.key,
    contexts: branch.contexts,
    latest: branch.latest,
    nodes: [...branch.nodes.values()].sort((left, right) => left.seq - right.seq),
--- a/packages/client/ui-trajectory/src/client/index.ts
+++ b/packages/client/ui-trajectory/src/client/index.ts
@@ -35,7 +35,8 @@ export function apply(ctx: Context): void {
      const history = ctx.sessionHistory.source(sessionId)
      return {
        hooks: { history, duration },
-        loadAllHistory: signal => history.loadAll(signal),
+        loadHistoryTail: signal => history.loadTail(signal),
+        loadOlderHistory: signal => history.loadOlder(signal),
        setActualDuration: (value) => { duration.set(value) },
      }
    },
--- a/packages/client/ui-trajectory/src/client/layout.ts
+++ b/packages/client/ui-trajectory/src/client/layout.ts
@@ -17,6 +17,7 @@ import type {
  TrajectoryCellProps,
  TrajectorySourceBlock,
 } from './trajectory-record.ts'
+import { formatElapsedSeconds } from './trajectory-record.ts'

 /** One Message or Step group inside a turn. */
 export interface TrajectoryGroupModel {
@@ -475,6 +476,67 @@ export function deriveTrajectoryLayout(input: TrajectoryLayoutInput): readonly T
  ].sort((left, right) => firstCellIndex(left) - firstCellIndex(right))
 }

+/**
+ * Append the changing in-flight assistant cells to a stable finalized layout.
+ * @param turns - Finalized layout derived with an empty-block partial anchor.
+ * @param partial - Current in-flight assistant projection.
+ * @param lastIndex - Highest cell index in the finalized layout.
+ * @returns The original layout without a partial, otherwise a layout sharing every unaffected turn.
+ */
+export function appendTrajectoryPartialLayout(
+  turns: readonly TrajectoryTurnModel[],
+  partial: ConversationSnapshot['partial'],
+  lastIndex: number,
+): readonly TrajectoryTurnModel[] {
+  if (partial === null) return turns
+  const partialTurn = deriveTrajectoryLayout({
+    nodes: [],
+    partial,
+    runningCalls: [],
+    codeDispatches: new Map(),
+  }).at(0)
+  if (partialTurn === undefined) return turns
+  const streamed: TrajectoryTurnModel = {
+    ...partialTurn,
+    groups: partialTurn.groups.map(group => ({
+      ...group,
+      cells: group.cells.map(cell => ({ ...cell, index: cell.index + lastIndex })),
+    })),
+  }
+  const turnIndex = turns.findIndex(turn => turn.turn === streamed.turn)
+  if (turnIndex === -1) return [...turns, streamed]
+  const current = turns[turnIndex]
+  /* v8 ignore next -- findIndex proved the dense array position exists. */
+  if (current === undefined) return turns
+  const groups = [...current.groups]
+  for (const streamedGroup of streamed.groups) {
+    const groupIndex = groups.findIndex(group => group.title === streamedGroup.title)
+    if (groupIndex === -1) {
+      groups.push(streamedGroup)
+      continue
+    }
+    const group = groups[groupIndex]
+    /* v8 ignore next -- findIndex proved the dense array position exists. */
+    if (group === undefined) continue
+    const streamedCallIds = new Set(
+      streamedGroup.cells.flatMap(cell => cell.callId === undefined ? [] : [cell.callId]),
+    )
+    groups[groupIndex] = {
+      ...streamedGroup,
+      cells: [
+        ...group.cells.filter(cell =>
+          cell.requestOnly !== true
+          && (cell.callId === undefined || !streamedCallIds.has(cell.callId)),
+        ),
+        ...streamedGroup.cells,
+      ],
+    }
+  }
+  const updated = [...turns]
+  updated[turnIndex] = { ...current, groups }
+  return updated
+}
+
 function attachToolSchema(
  laid: LaidCell,
  callSchemas: RequestInspectionSnapshot['callSchemas'] | undefined,
@@ -542,9 +604,7 @@ function groupDescription(laid: readonly LaidCell[]): string | undefined {

 function formatGroupDuration(seconds: number): string | undefined {
  if (!Number.isFinite(seconds)) return undefined
-  const rounded = Math.round(seconds * 10) / 10
-  if (Number.isInteger(rounded)) return `${rounded} s`
-  return `${rounded.toFixed(1)} s`
+  return formatElapsedSeconds(seconds)
 }

 /** Own-duration seconds from two epoch-ms stamps; null when either is unusable. */
@@ -566,6 +626,7 @@ function expandAssistant(
  callStarts: ReadonlyMap<string, number>,
  opts?: { streaming?: boolean },
 ): LaidCell[] {
+  if (opts?.streaming === true && node.blocks.length === 0) return []
  const out: LaidCell[] = []
  let index = startIndex - 1
  const usage = node.usage as UsageLike | undefined
@@ -585,6 +646,7 @@ function expandAssistant(
    .join('\n\n')
  const message: TrajectoryCellProps = {
    index: ++index,
+    recordId: `assistant\u0000${node.turn}\u0000${node.step}`,
    kind: 'message',
    sourceSeq: node.seq,
    text: messageText !== ''
--- a/packages/client/ui-trajectory/src/client/timeline.ts
+++ b/packages/client/ui-trajectory/src/client/timeline.ts
@@ -1,6 +1,7 @@
 /** Operation-sequence and recorded-time projections for the trajectory overview. */

 import type { TrajectoryTurnModel } from './layout.ts'
+import { formatDurationMillis } from './trajectory-record.ts'
 import type { TrajectoryCellKind, TrajectoryCellProps } from './trajectory-record.ts'

 /** Horizontal projection used by the trajectory timeline. */
@@ -34,14 +35,12 @@ export interface TrajectoryTimelineModel extends TrajectoryTimeRange {
 }

 /**
- * Format a timeline duration with a compact unit.
+ * Format a timeline duration as an integer-millisecond label.
 * @param milliseconds - Non-negative duration in milliseconds.
- * @returns Millisecond or second label.
+ * @returns Millisecond label with thousands separators.
 */
 export function formatTimelineOffset(milliseconds: number): string {
-  if (milliseconds < 1_000) return `${Math.round(milliseconds)} ms`
-  const seconds = milliseconds / 1_000
-  return seconds >= 10 ? `${Math.round(seconds)} s` : `${seconds.toFixed(1)} s`
+  return formatDurationMillis(milliseconds)
 }

 function laneFor(kind: TrajectoryCellKind): number {
--- a/packages/client/ui-trajectory/src/client/trajectory-record.ts
+++ b/packages/client/ui-trajectory/src/client/trajectory-record.ts
@@ -37,6 +37,8 @@ export interface TrajectorySourceBlock {
 export interface TrajectoryCellProps extends HTMLAttributes<HTMLDivElement> {
  /** 1-based record index shown as `#N`. */
  index: number
+  /** Projection-stable identity when no single source event owns the record lifecycle. */
+  recordId?: string
  kind: TrajectoryCellKind
  /** Single-line summary; CSS ellipsis when it overflows. */
  text: string
@@ -92,13 +94,32 @@ export interface TrajectoryCellProps extends HTMLAttributes<HTMLDivElement> {
 }

 /**
- * Format own-duration for the trailing time column.
+ * Resolve the identity that survives prepending older projected records.
+ * @param cell - Projected trajectory record.
+ * @returns Stable identity from the owning event or tool call, with a fixture fallback.
+ */
+export function trajectoryRecordId(cell: TrajectoryCellProps): string {
+  if (cell.recordId !== undefined) return cell.recordId
+  if (cell.callId !== undefined) return `${cell.kind}\u0000call\u0000${cell.callId}`
+  if (cell.sourceSeq !== undefined) return `${cell.kind}\u0000seq\u0000${cell.sourceSeq}`
+  return `${cell.kind}\u0000index\u0000${cell.index}`
+}
+
+/**
+ * Format a duration in milliseconds with thousands separators.
+ * @param milliseconds - Duration in milliseconds, or `null` when absent.
+ * @returns `—` when unknown, otherwise an integer-millisecond label.
+ */
+export function formatDurationMillis(milliseconds: number | null): string {
+  if (milliseconds === null || !Number.isFinite(milliseconds)) return '—'
+  return `${Math.round(milliseconds).toLocaleString('en-US')} ms`
+}
+
+/**
+ * Format an elapsed duration given in seconds as a millisecond label.
 * @param seconds - Duration seconds, or `null` when absent.
- * @returns `—` when unknown, otherwise a seconds label.
+ * @returns `—` when unknown, otherwise an integer-millisecond label.
 */
 export function formatElapsedSeconds(seconds: number | null): string {
-  if (seconds === null || !Number.isFinite(seconds)) return '—'
-  const rounded = Math.round(seconds * 10) / 10
-  if (Number.isInteger(rounded)) return `${rounded} s`
-  return `${rounded.toFixed(1)} s`
+  return formatDurationMillis(seconds === null ? null : seconds * 1000)
 }
--- a/packages/client/ui-trajectory/src/client/trajectory-virtual-rows.ts
+++ b/packages/client/ui-trajectory/src/client/trajectory-virtual-rows.ts
@@ -0,0 +1,83 @@
+/** Pure projection from trajectory records to measurable virtual ledger rows. */
+
+import type { TrajectoryCellProps } from './trajectory-record.ts'
+import { trajectoryRecordId } from './trajectory-record.ts'
+
+const CONTENT_ROW_HEIGHT = 30
+const COLLAPSED_SUMMARY_HEIGHT = 20
+const TERMINAL_BOUNDARY_HEIGHT = 9
+
+/** Minimal record shape required by the trajectory virtual-row projection. */
+export interface VirtualizableTrajectoryRecord {
+  cell: TrajectoryCellProps
+  collapsedSummaryKind?: 'turn' | 'assistant'
+}
+
+/** One logical record retained inside a measurable virtual row. */
+export interface TrajectoryVirtualRowEntry<T extends VirtualizableTrajectoryRecord> {
+  logicalIndex: number
+  record: T
+}
+
+/** One virtualizer item, which may carry zero-height request boundaries. */
+export interface TrajectoryVirtualRow<T extends VirtualizableTrajectoryRecord> {
+  entries: readonly TrajectoryVirtualRowEntry<T>[]
+  height: number
+  key: string
+}
+
+/**
+ * Derive the DOM-safe row identity shared by React, the virtualizer, and
+ * browser scroll contracts.
+ * @param record - Display record whose identity is required.
+ * @returns Stable record identity with a suffix for synthetic fold summaries.
+ */
+export function trajectoryVirtualRecordKey(
+  record: VirtualizableTrajectoryRecord,
+): string {
+  const identity = encodeURIComponent(trajectoryRecordId(record.cell))
+  return record.collapsedSummaryKind === undefined
+    ? identity
+    : `${identity}\u0000summary\u0000${record.collapsedSummaryKind}`
+}
+
+/**
+ * Attach separator-only records to the next content row so the virtualizer
+ * never owns a zero-height item. A terminal separator retains its CSS-owned
+ * lower-marker clearance as a standalone item.
+ * @param records - Final search/fold projection in ledger order.
+ * @returns Measurable virtual rows with original logical positions retained.
+ */
+export function groupTrajectoryVirtualRows<T extends VirtualizableTrajectoryRecord>(
+  records: readonly T[],
+): readonly TrajectoryVirtualRow<T>[] {
+  const rows: TrajectoryVirtualRow<T>[] = []
+  let pending: TrajectoryVirtualRowEntry<T>[] = []
+
+  for (const [logicalIndex, record] of records.entries()) {
+    const entry = { logicalIndex, record }
+    if (record.cell.requestOnly === true) {
+      pending.push(entry)
+      continue
+    }
+    const entries = [...pending, entry]
+    pending = []
+    rows.push({
+      entries,
+      height: record.collapsedSummaryKind === undefined
+        ? CONTENT_ROW_HEIGHT
+        : COLLAPSED_SUMMARY_HEIGHT,
+      key: trajectoryVirtualRecordKey(record),
+    })
+  }
+
+  if (pending.length > 0) {
+    rows.push({
+      entries: pending,
+      height: TERMINAL_BOUNDARY_HEIGHT,
+      key: pending.map(candidate => trajectoryVirtualRecordKey(candidate.record)).join('|'),
+    })
+  }
+
+  return rows
+}
--- a/packages/client/ui-trajectory/tests/cell.spec.tsx
+++ b/packages/client/ui-trajectory/tests/cell.spec.tsx
@@ -10,17 +10,33 @@ import {
  TrajectoryCell,
  type TrajectoryCellKind,
 } from '../src/client/TrajectoryCell.tsx'
+import { formatDurationMillis } from '../src/client/trajectory-record.ts'

 afterEach(cleanup)

+describe('formatDurationMillis', () => {
+  it('formats exact millisecond labels with thousands separators', () => {
+    expect(formatDurationMillis(0)).toBe('0 ms')
+    expect(formatDurationMillis(29)).toBe('29 ms')
+    expect(formatDurationMillis(500)).toBe('500 ms')
+    expect(formatDurationMillis(1_500)).toBe('1,500 ms')
+    expect(formatDurationMillis(235_200)).toBe('235,200 ms')
+    expect(formatDurationMillis(null)).toBe('—')
+    expect(formatDurationMillis(Number.NaN)).toBe('—')
+  })
+})
+
 describe('formatElapsedSeconds', () => {
  it('formats known durations and uses an em dash when absent', () => {
    expect(formatElapsedSeconds(null)).toBe('—')
-    expect(formatElapsedSeconds(235)).toBe('235 s')
-    expect(formatElapsedSeconds(235.0)).toBe('235 s')
-    expect(formatElapsedSeconds(235.2)).toBe('235.2 s')
-    expect(formatElapsedSeconds(235.25)).toBe('235.3 s')
-    expect(formatElapsedSeconds(0)).toBe('0 s')
+    expect(formatElapsedSeconds(235)).toBe('235,000 ms')
+    expect(formatElapsedSeconds(235.0)).toBe('235,000 ms')
+    expect(formatElapsedSeconds(235.2)).toBe('235,200 ms')
+    expect(formatElapsedSeconds(235.25)).toBe('235,250 ms')
+    expect(formatElapsedSeconds(0)).toBe('0 ms')
+    expect(formatElapsedSeconds(0.029)).toBe('29 ms')
+    expect(formatElapsedSeconds(0.5)).toBe('500 ms')
+    expect(formatElapsedSeconds(1.5)).toBe('1,500 ms')
    expect(formatElapsedSeconds(Number.NaN)).toBe('—')
  })
 })
@@ -38,7 +54,7 @@ describe('TrajectoryCell', () => {
    expect(screen.getByText('#6')).toBeTruthy()
    expect(screen.getByText('Tool')).toBeTruthy()
    expect(screen.getByText('bash · Read src/index.ts')).toBeTruthy()
-    expect(screen.getByText('5 s')).toBeTruthy()
+    expect(screen.getByText('5,000 ms')).toBeTruthy()
  })

  it('Message rows expose Input / Output / Think metric columns before time', () => {
@@ -57,11 +73,11 @@ describe('TrajectoryCell', () => {
    expect(screen.getByText('136')).toBeTruthy()
    expect(screen.getByText('381')).toBeTruthy()
    expect(screen.getByText('155')).toBeTruthy()
-    expect(screen.getByText('235.2 s')).toBeTruthy()
+    expect(screen.getByText('235,200 ms')).toBeTruthy()
    const texts = [...container.querySelectorAll('span')].map(el => el.textContent)
    expect(texts.indexOf('136')).toBeLessThan(texts.indexOf('381'))
    expect(texts.indexOf('381')).toBeLessThan(texts.indexOf('155'))
-    expect(texts.indexOf('155')).toBeLessThan(texts.indexOf('235.2 s'))
+    expect(texts.indexOf('155')).toBeLessThan(texts.indexOf('235,200 ms'))
  })

  it('selected marks the row for the brand-primary inset ring', () => {
--- a/packages/client/ui-trajectory/tests/client-bundle.spec.ts
+++ b/packages/client/ui-trajectory/tests/client-bundle.spec.ts
@@ -46,6 +46,7 @@ describe('tsdown client artifact', () => {
    const modules = new Map<string, unknown>([
      ['react', await import('react')],
      ['react/jsx-runtime', await import('react/jsx-runtime')],
+      ['react-dom', await import('react-dom')],
      ['@deepseek-ai/dsh-client-runtime/client', await import('@deepseek-ai/dsh-client-runtime/client')],
      ['@deepseek-ai/dsh-client-ui-primitives', await import('@deepseek-ai/dsh-client-ui-primitives')],
    ])
--- a/packages/client/ui-trajectory/tests/context-branches.spec.ts
+++ b/packages/client/ui-trajectory/tests/context-branches.spec.ts
@@ -71,6 +71,7 @@ describe('trajectory context branches', () => {
    const branches = deriveTrajectoryContextBranches(contexts)
    const successor = branches[1]!

+    expect(successor.key).toBe('rewind:110')
    expect(successor.nodes.map(node => node.seq)).toEqual([110])
    expect(trajectoryBranchContainsRequest(
      successor,
@@ -85,4 +86,15 @@ describe('trajectory context branches', () => {
      request('assistant', 111),
    )).toBe(true)
  })
+
+  it('keeps branch identity when prepended generations shift local ids', () => {
+    const branch = (id: number) => deriveTrajectoryContextBranches([{
+      id,
+      origin: 'rewind',
+      originSeq: 110,
+      nodes: [current],
+    }])[0]
+
+    expect(branch(1)?.key).toBe(branch(9)?.key)
+  })
 })
--- a/packages/client/ui-trajectory/tests/layout.spec.tsx
+++ b/packages/client/ui-trajectory/tests/layout.spec.tsx
@@ -11,7 +11,9 @@ import type {
 import { TrajectoryGroupHeader } from '../src/client/TrajectoryGroupHeader.tsx'
 import { TrajectoryTurn } from '../src/client/TrajectoryTurn.tsx'
 import { TrajectoryTurnHeader } from '../src/client/TrajectoryTurnHeader.tsx'
-import { deriveTrajectoryLayout } from '../src/client/layout.ts'
+import {
+  appendTrajectoryPartialLayout, deriveTrajectoryLayout,
+} from '../src/client/layout.ts'

 afterEach(cleanup)

@@ -102,6 +104,70 @@ describe('deriveTrajectoryLayout', () => {
    })
  })

+  it('appends a streaming partial without rebuilding unaffected finalized turns', () => {
+    const nodes = [{
+      kind: 'assistant', seq: 2, time: 2_000, turn: 1, step: 1,
+      blocks: [{ kind: 'text', text: 'finalized' }],
+    }] as unknown as ConversationSnapshot['nodes']
+    const partial = {
+      turn: 2,
+      step: 1,
+      blocks: [{ kind: 'reasoning' as const, text: 'streaming' }],
+    }
+    const request = {
+      purpose: 'assistant', startSeq: 3, turn: 2, step: 1,
+      startedAt: 3_000, completedAt: null, status: 'running',
+    } as unknown as RequestView
+    const base = deriveTrajectoryLayout({
+      codeDispatches: new Map(),
+      nodes,
+      partial: { ...partial, blocks: [] },
+      requests: [request],
+      runningCalls: [],
+    })
+    expect(base).toHaveLength(1)
+
+    const streamed = appendTrajectoryPartialLayout(base, partial, 1)
+
+    expect(streamed[0]).toBe(base[0])
+    expect(streamed).toHaveLength(2)
+    expect(streamed[1]?.groups[0]?.cells).toMatchObject([{
+      index: 2,
+      kind: 'message',
+      text: 'streaming',
+      timeSeconds: null,
+    }])
+    expect(streamed[1]?.groups[0]?.cells[0]?.requestOnly).toBeUndefined()
+  })
+
+  it('replaces a running-call placeholder with the matching streamed tool call', () => {
+    const partial = {
+      turn: 1,
+      step: 1,
+      blocks: [{
+        kind: 'tool-call' as const,
+        callId: 'c1',
+        name: 'bash',
+        argsRaw: '{"command":"pwd"}',
+      }],
+    }
+    const base = deriveTrajectoryLayout({
+      codeDispatches: new Map(),
+      nodes: [],
+      partial: { ...partial, blocks: [] },
+      runningCalls: [{
+        callId: 'c1', name: 'bash', argsRaw: '{"command":"pwd"}',
+        turn: 1, step: 1, time: 9_000, callView: null,
+      }],
+    })
+
+    const streamed = appendTrajectoryPartialLayout(base, partial, 1)
+    const cells = streamed[0]?.groups[0]?.cells ?? []
+
+    expect(cells.map(cell => cell.kind)).toEqual(['message', 'tool'])
+    expect(cells.filter(cell => cell.callId === 'c1')).toHaveLength(1)
+  })
+
  it('omits duration when node times are missing instead of rendering NaN', () => {
    const nodes = [
      { kind: 'user', seq: 1, content: [{ type: 'text', text: 'hi' }], source: null },
@@ -141,7 +207,7 @@ describe('deriveTrajectoryLayout', () => {
      },
    ] as unknown as ConversationSnapshot['nodes']
    const turns = deriveTrajectoryLayout({ codeDispatches: new Map(), nodes, partial: null, runningCalls: [] })
-    expect(turns[0]?.groups[0]?.description).toBe('3 s bash×2')
+    expect(turns[0]?.groups[0]?.description).toBe('3,000 ms bash×2')
  })

  it('assigns each user message to its enclosing turn instead of pooling into Turn 1', () => {
--- a/packages/client/ui-trajectory/tests/table.spec.tsx
+++ b/packages/client/ui-trajectory/tests/table.spec.tsx
@@ -2,11 +2,15 @@
 /** Trajectory ledger selection, details, status, and fold behavior. */

 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { TrajectoryTable } from '../src/client/TrajectoryTable.tsx'
 import type { TrajectoryTurnModel } from '../src/client/layout.ts'

-afterEach(cleanup)
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+  Reflect.deleteProperty(HTMLElement.prototype, 'scrollTo')
+})

 const TURNS: readonly TrajectoryTurnModel[] = [{
  turn: 1,
@@ -56,11 +60,33 @@ const TURNS: readonly TrajectoryTurnModel[] = [{
 const FOLD_PROPS = {
  collapsedTurns: new Set<number>(),
  onToggleTurn: () => {},
-  collapsedAssistants: new Set<number>(),
+  collapsedAssistants: new Set<string>(),
  onToggleAssistant: () => {},
 }

 describe('TrajectoryTable', () => {
+  it('shows a muted placeholder for an assistant response containing only tool calls', () => {
+    const turns: readonly TrajectoryTurnModel[] = [{
+      turn: 1,
+      groups: [{
+        title: 'Step 1',
+        cells: [{
+          index: 1,
+          kind: 'message',
+          text: 'Tool call only',
+          sourceBlocks: [{
+            type: 'tool-call', content: '{}', callId: 'call-1', toolName: 'read',
+          }],
+          timeSeconds: 1,
+        }],
+      }],
+    }]
+
+    render(<TrajectoryTable turns={turns} {...FOLD_PROPS} />)
+
+    expect(screen.getByText('(tool call only)')).toBeTruthy()
+  })
+
  it('shows assistant timing facts after keyboard selection', () => {
    render(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />)
    fireEvent.keyDown(screen.getByRole('row', { name: /ASSISTANT/ }), { key: 'Enter' })
@@ -71,6 +97,27 @@ describe('TrajectoryTable', () => {
    expect(screen.getByText('20.0 tok/s')).toBeTruthy()
  })

+  it('shows a tool record Duration as exact milliseconds', () => {
+    const turns: readonly TrajectoryTurnModel[] = [{
+      turn: 1,
+      groups: [{
+        title: 'Step 1',
+        cells: [{
+          index: 1,
+          kind: 'tool',
+          text: 'bash · {"command":"pwd"}',
+          inputDetail: '{"command":"pwd"}',
+          timeSeconds: 1.5,
+        }],
+      }],
+    }]
+
+    render(<TrajectoryTable turns={turns} {...FOLD_PROPS} />)
+    fireEvent.click(screen.getByRole('row', { name: /TOOL/ }))
+
+    expect(screen.getByText('1,500 ms', { selector: 'dd' })).toBeTruthy()
+  })
+
  it('breaks output tokens into labeled reasoning and content rows', () => {
    render(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />)
    fireEvent.click(screen.getByRole('row', { name: /ASSISTANT/ }))
@@ -83,6 +130,17 @@ describe('TrajectoryTable', () => {
    expect(screen.getByText('15 tok')).toBeTruthy()
  })

+  it('marks Summary scroll regions for interaction-only scrollbar thumbs', () => {
+    render(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />)
+    fireEvent.click(screen.getByRole('row', { name: /ASSISTANT/ }))
+
+    const panel = screen.getByRole('tabpanel')
+    expect(panel.querySelectorAll('[data-summary-scroll-region]').length).toBeGreaterThan(1)
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Preview' }))
+    expect(panel.querySelector('[data-summary-scroll-region]')).toBeNull()
+  })
+
  it('keeps long thinking collapsed until the user asks to render it', () => {
    const thinking = 'private chain '.repeat(1_000)
    const turns: readonly TrajectoryTurnModel[] = [{
@@ -163,6 +221,93 @@ describe('TrajectoryTable', () => {
    expect(onClearSelection).toHaveBeenCalledOnce()
  })

+  it('keeps the selected record when older rows shift projection indexes', () => {
+    const tail = (index: number): TrajectoryTurnModel => ({
+      turn: 2,
+      groups: [{
+        title: 'Step 1',
+        cells: [{
+          index,
+          kind: 'message',
+          sourceSeq: 100,
+          text: 'selected tail response',
+          outputDetail: 'selected tail response detail',
+          timeSeconds: 1,
+        }],
+      }],
+    })
+    const view = render(
+      <TrajectoryTable turns={[tail(1)]} {...FOLD_PROPS} />,
+    )
+    fireEvent.click(screen.getByRole('row', { name: /selected tail response/ }))
+
+    view.rerender(
+      <TrajectoryTable
+        turns={[{
+          turn: 1,
+          groups: [{
+            title: 'Message',
+            cells: [{
+              index: 1,
+              kind: 'user',
+              sourceSeq: 1,
+              text: 'older prompt',
+              timeSeconds: 0,
+            }],
+          }],
+        }, tail(2)]}
+        {...FOLD_PROPS}
+      />,
+    )
+
+    expect(screen.getByRole('row', { name: /selected tail response/ })
+      .getAttribute('aria-selected')).toBe('true')
+    expect(screen.getByText('selected tail response detail')).toBeTruthy()
+  })
+
+  it('keeps a selected request when prepending changes its display number', () => {
+    const tail = (index: number): TrajectoryTurnModel => ({
+      turn: 2,
+      groups: [{
+        title: 'Step 1',
+        cells: [{
+          index,
+          kind: 'message',
+          sourceSeq: 100,
+          text: 'tail response',
+          timeSeconds: 1,
+        }],
+      }],
+    })
+    const view = render(
+      <TrajectoryTable turns={[tail(1)]} {...FOLD_PROPS} />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Request #1' }))
+
+    view.rerender(
+      <TrajectoryTable
+        turns={[{
+          turn: 1,
+          groups: [{
+            title: 'Step 1',
+            cells: [{
+              index: 1,
+              kind: 'message',
+              sourceSeq: 1,
+              text: 'older response',
+              timeSeconds: 1,
+            }],
+          }],
+        }, tail(2)]}
+        {...FOLD_PROPS}
+      />,
+    )
+
+    expect(screen.getByRole('button', { name: 'Request #2' })
+      .getAttribute('aria-pressed')).toBe('true')
+    expect(screen.getByText('Request #2')).toBeTruthy()
+  })
+
  it('follows appended records only while the ledger is already at the bottom', () => {
    const view = render(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />)
    const tablePane = screen.getByRole('table').parentElement as HTMLElement
@@ -210,6 +355,216 @@ describe('TrajectoryTable', () => {
    expect(tablePane.scrollTop).toBe(20)
  })

+  it('preserves the visible anchor when the last older page disables virtualization', async () => {
+    let resolveOlder: ((advanced: boolean) => void) | undefined
+    const older = new Promise<boolean>((resolve) => { resolveOlder = resolve })
+    const onLoadOlder = vi.fn(() => older)
+    const view = render(
+      <TrajectoryTable
+        turns={TURNS}
+        {...FOLD_PROPS}
+        historyStartSeq={1}
+        hasOlderRecords
+        onLoadOlder={onLoadOlder}
+      />,
+    )
+    const tablePane = screen.getByRole('table').parentElement as HTMLElement
+    let scrollHeight = 200
+    Object.defineProperties(tablePane, {
+      clientHeight: { configurable: true, get: () => 100 },
+      scrollHeight: { configurable: true, get: () => scrollHeight },
+    })
+    tablePane.scrollTop = 0
+    fireEvent.scroll(tablePane)
+    fireEvent.scroll(tablePane)
+
+    await waitFor(() => { expect(onLoadOlder).toHaveBeenCalledOnce() })
+    expect(screen.getByRole('status').textContent).toContain('Loading earlier history…')
+    resolveOlder?.(true)
+    await waitFor(() => { expect(screen.queryByRole('status')).toBeNull() })
+    scrollHeight = 260
+    view.rerender(
+      <TrajectoryTable
+        turns={[{
+          turn: 0,
+          groups: [{
+            title: 'Step 1',
+            cells: [{ index: 0, kind: 'user', text: 'older prompt', timeSeconds: 0 }],
+          }],
+        }, ...TURNS]}
+        {...FOLD_PROPS}
+        historyStartSeq={0}
+        onLoadOlder={onLoadOlder}
+      />,
+    )
+
+    expect(tablePane.scrollTop).toBe(60)
+  })
+
+  it('covers the ledger while the initial tail is loading', () => {
+    const view = render(
+      <TrajectoryTable turns={TURNS} {...FOLD_PROPS} historyLoading />,
+    )
+
+    expect(screen.getByRole('status').textContent).toContain('Loading trajectory…')
+    expect(screen.getByRole('table').getAttribute('data-scroll-ready')).toBeNull()
+
+    view.rerender(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />)
+
+    expect(screen.queryByRole('status')).toBeNull()
+    expect(screen.getByRole('table').getAttribute('data-scroll-ready')).toBe('true')
+  })
+
+  it('keeps a paged tail virtualized before its loaded window crosses the row threshold', async () => {
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600)
+    Object.defineProperty(HTMLElement.prototype, 'scrollTo', {
+      configurable: true,
+      value: vi.fn(),
+    })
+    const view = render(
+      <TrajectoryTable turns={TURNS} {...FOLD_PROPS} hasOlderRecords />,
+    )
+
+    await waitFor(() => {
+      expect(view.container.querySelector('tr[data-virtual-position]')).toBeTruthy()
+    })
+  })
+
+  it('mounts only the visible window for a long ledger', async () => {
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600)
+    const scrollTo = vi.fn()
+    Object.defineProperty(HTMLElement.prototype, 'scrollTo', {
+      configurable: true,
+      value: scrollTo,
+    })
+    const cells = Array.from({ length: 500 }, (_, index) => ({
+      index: index + 1,
+      kind: 'context' as const,
+      text: `Context ${index + 1}`,
+      timeSeconds: 0,
+    }))
+    const turns: readonly TrajectoryTurnModel[] = [{
+      turn: 1,
+      groups: [{ title: 'Context', cells }],
+    }]
+    const view = render(<TrajectoryTable turns={turns} {...FOLD_PROPS} />)
+
+    await waitFor(() => {
+      expect(view.container.querySelectorAll('tr[data-virtual-position]').length)
+        .toBeGreaterThan(0)
+    })
+    expect(view.container.querySelectorAll('tr[data-virtual-position]').length)
+      .toBeLessThan(cells.length)
+    expect(screen.getByRole('table').getAttribute('aria-rowcount')).toBe('500')
+    expect(view.container.querySelector('tr[data-trajectory-row-key]')
+      ?.getAttribute('aria-rowindex')).toBe('1')
+    expect(scrollTo).toHaveBeenCalled()
+    expect(view.container.querySelector('tr[data-virtual-spacer="bottom"]')).toBeTruthy()
+    expect(screen.getByText('Context 1')).toBeTruthy()
+    expect(screen.queryByText('Context 500')).toBeNull()
+
+    const tablePane = screen.getByRole('table').parentElement as HTMLElement
+    tablePane.scrollTop = 9_000
+    fireEvent.scroll(tablePane)
+    await waitFor(() => {
+      expect(Number(view.container.querySelector(
+        'tr[data-virtual-position]',
+      )?.getAttribute('data-virtual-position'))).toBeGreaterThan(0)
+    })
+    expect(view.container.querySelector('tr[data-virtual-spacer="top"]')).toBeTruthy()
+    expect(screen.queryByText('Context 1')).toBeNull()
+  })
+
+  it('does not re-scroll a virtual ledger when streaming only changes row content', async () => {
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600)
+    const scrollTo = vi.fn()
+    Object.defineProperty(HTMLElement.prototype, 'scrollTo', {
+      configurable: true,
+      value: scrollTo,
+    })
+    const cells = Array.from({ length: 500 }, (_, index) => ({
+      index: index + 1,
+      kind: 'context' as const,
+      sourceSeq: index + 1,
+      text: `Context ${index + 1}`,
+      timeSeconds: 0,
+    }))
+    const turns: readonly TrajectoryTurnModel[] = [{
+      turn: 1,
+      groups: [{ title: 'Context', cells }],
+    }]
+    const view = render(
+      <TrajectoryTable
+        turns={turns}
+        {...FOLD_PROPS}
+      />,
+    )
+    await waitFor(() => {
+      expect(view.container.querySelector('tr[data-virtual-position]')).toBeTruthy()
+    })
+    scrollTo.mockClear()
+
+    view.rerender(
+      <TrajectoryTable
+        turns={turns}
+        streamingCells={[{ ...cells[0]!, text: 'Context 1 streaming update' }]}
+        {...FOLD_PROPS}
+      />,
+    )
+
+    expect(scrollTo).not.toHaveBeenCalled()
+    expect(screen.getByText('Context 1 streaming update')).toBeTruthy()
+  })
+
+  it('keeps the virtual tail reachable with collapsed-summary row heights', async () => {
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(600)
+    Object.defineProperty(HTMLElement.prototype, 'scrollTo', {
+      configurable: true,
+      value: vi.fn(),
+    })
+    const turns: readonly TrajectoryTurnModel[] = Array.from(
+      { length: 101 },
+      (_, index) => ({
+        turn: index + 1,
+        groups: [{
+          title: 'Step 1',
+          cells: [
+            {
+              index: index * 2 + 1,
+              kind: 'message' as const,
+              sourceSeq: index * 2 + 1,
+              text: `Message ${index + 1}`,
+              timeSeconds: 1,
+            },
+            {
+              index: index * 2 + 2,
+              kind: 'tool' as const,
+              callId: `call-${index + 1}`,
+              text: `Tool ${index + 1}`,
+              timeSeconds: 1,
+            },
+          ],
+        }],
+      }),
+    )
+    const collapsedTurns = new Set(turns.flatMap(turn =>
+      turn.turn === null ? [] : [turn.turn]))
+    const view = render(
+      <TrajectoryTable
+        turns={turns}
+        {...FOLD_PROPS}
+        collapsedTurns={collapsedTurns}
+      />,
+    )
+    const tablePane = screen.getByRole('table').parentElement as HTMLElement
+    tablePane.scrollTop = 5_000
+    fireEvent.scroll(tablePane)
+
+    await waitFor(() => {
+      expect(view.container.querySelector('tr[data-virtual-position="201"]')).toBeTruthy()
+    })
+  })
+
  it('keeps running and failure semantics distinct from record roles', () => {
    const view = render(<TrajectoryTable turns={TURNS} {...FOLD_PROPS} />)
    expect(view.container.querySelector('tr[data-kind="tool"][data-running="true"]')).toBeTruthy()
--- a/packages/client/ui-trajectory/tests/views.spec.tsx
+++ b/packages/client/ui-trajectory/tests/views.spec.tsx
@@ -73,6 +73,7 @@ function historySnapshot(
    state: 'ready',
    error: null,
    hasMore: false,
+    baseSeq: nodes[0]?.seq ?? 0,
    inspection: {
      eventNodes: nodes,
      contexts: [{ id: 0, nodes }],
@@ -89,11 +90,15 @@ function historySnapshot(

 function standaloneHistory(
  snapshot: SessionHistorySnapshot,
-): Pick<ComponentProps<typeof TrajectoryView>, 'useHistory' | 'loadAllHistory'> {
+): Pick<
+  ComponentProps<typeof TrajectoryView>,
+  'useHistory' | 'loadHistoryTail' | 'loadOlderHistory'
+> {
  const store = createSnapshotStore(snapshot)
  return {
    useHistory: bindSnapshotSelector(store),
-    loadAllHistory: () => Promise.resolve(),
+    loadHistoryTail: () => Promise.resolve(),
+    loadOlderHistory: () => Promise.resolve(false),
  }
 }

@@ -145,13 +150,15 @@ function standaloneProps(nodes: ConversationSnapshot['nodes']): ConvViewProps {
 async function bench(snapshot = historySnapshot(NODES)) {
  const ctx = new Context()
  const slots = new SlotsService(ctx)
-  const loadAllHistory = vi.fn((_signal: AbortSignal) => Promise.resolve())
+  const loadHistoryTail = vi.fn((_signal: AbortSignal) => Promise.resolve())
+  const loadOlderHistory = vi.fn((_signal: AbortSignal) => Promise.resolve(false))
  const historyStore = createSnapshotStore(snapshot)
  const history: SessionHistoryFace = {
    sessionId: SID,
    getSnapshot: () => historyStore.getSnapshot(),
    subscribe: listener => historyStore.subscribe(listener),
-    loadAll: loadAllHistory,
+    loadTail: loadHistoryTail,
+    loadOlder: loadOlderHistory,
  }
  // The conversation entry's role: declare the ring, then seed the chat entry.
  slots.register({
@@ -167,7 +174,7 @@ async function bench(snapshot = historySnapshot(NODES)) {
  ctx.provide('sessionHistory', { source: () => history })
  const fiber = ctx.plugin({ inject: [...inject], apply })
  await fiber.await()
-  return { ctx, slots, fiber, loadAllHistory }
+  return { ctx, slots, fiber, loadHistoryTail, loadOlderHistory }
 }

 /** Tab projection twin of apply's viewTabs (the render-side consumption path). */
@@ -201,7 +208,8 @@ function mount(slots: SlotsService, nodes: ConversationSnapshot['nodes'] = NODES
      ? (() => {
        const trajectory = injected as TrajectoryViewInjected
        return {
-          loadAllHistory: trajectory.loadAllHistory,
+          loadHistoryTail: trajectory.loadHistoryTail,
+          loadOlderHistory: trajectory.loadOlderHistory,
          setActualDuration: trajectory.setActualDuration,
          useHistory: bindSnapshotSelector(trajectory.hooks.history),
          useDuration: bindSnapshotSelector(trajectory.hooks.duration),
@@ -295,9 +303,9 @@ describe('tab switching in ConversationRoot', () => {
    expect(screen.getByRole('row', { name: /USER/ })).toBeTruthy()
    expect(screen.queryByTestId('chat-body')).toBeNull()
    await vi.waitFor(() => {
-      expect(b.loadAllHistory).toHaveBeenCalledOnce()
+      expect(b.loadHistoryTail).toHaveBeenCalledOnce()
    })
-    const signal = b.loadAllHistory.mock.calls[0]?.[0]
+    const signal = b.loadHistoryTail.mock.calls[0]?.[0]
    expect(signal?.aborted).toBe(false)
    fireEvent.click(screen.getByRole('tab', { name: 'Chat' }))
    expect(signal?.aborted).toBe(true)
@@ -572,14 +580,53 @@ describe('timeline projection', () => {
      expect(view.container.querySelector('[role="tooltip"]')).toBeNull()
      act(() => { vi.advanceTimersByTime(1) })
      const tooltip = view.container.querySelector<HTMLElement>('[role="tooltip"]')
-      expect(tooltip?.textContent).toContain('Total 2.0 s')
+      expect(tooltip?.textContent).toContain('Total 2,000 ms')
      expect(tooltip?.textContent).toContain('TTFT 500 ms')
-      expect(tooltip?.textContent).toContain('Decoding 1.5 s')
+      expect(tooltip?.textContent).toContain('Decoding 1,500 ms')
    } finally {
      vi.useRealTimers()
    }
  })

+  it('marks an unloaded history prefix without inventing timeline duration', () => {
+    const onLoadEarlier = vi.fn(() => new Promise<boolean>(() => {}))
+    const view = render(
+      <TrajectoryTimeline
+        turns={turns}
+        mode="sequence"
+        range={null}
+        hasEarlierRecords
+        onLoadEarlier={onLoadEarlier}
+        onRangeChange={vi.fn()}
+      />,
+    )
+
+    const boundary = screen.getByLabelText('Load earlier history')
+    expect(boundary.getAttribute('data-earlier-history')).not.toBeNull()
+    const plot = screen.getByLabelText('Timeline overview; drag horizontally to focus events')
+    fireEvent.pointerMove(plot, { clientX: 50, pointerId: 1 })
+    expect(view.container.querySelector('[data-timeline-hover-line]')).toBeTruthy()
+    fireEvent.pointerEnter(boundary)
+    expect(view.container.querySelector('[data-timeline-hover-line]')).toBeNull()
+    fireEvent.focus(boundary)
+    expect(screen.getByRole('tooltip').textContent)
+      .toContain('Click to load earlier history')
+    fireEvent.click(boundary)
+    expect(onLoadEarlier).toHaveBeenCalledOnce()
+    expect(screen.getByLabelText('Loading earlier history')).toBeTruthy()
+
+    view.rerender(
+      <TrajectoryTimeline
+        turns={turns}
+        mode="sequence"
+        range={null}
+        onRangeChange={vi.fn()}
+      />,
+    )
+    expect(screen.queryByLabelText('Load earlier history')).toBeNull()
+    expect(screen.queryByLabelText('Loading earlier history')).toBeNull()
+  })
+
  it('cancels native scrolling across the timeline while zooming', () => {
    render(
      <TrajectoryTimeline
@@ -614,7 +661,35 @@ describe('timeline projection', () => {
    const span = view.container.querySelector<HTMLElement>('[data-timeline-span]')
    expect(span?.style.getPropertyValue('--trajectory-span-width')).toBe('10%')
    expect(span?.style.getPropertyValue('--trajectory-span-gap'))
-      .toBe('clamp(0.25px, 0.8%, 1px)')
+      .toBe('min(0.8%, 1px)')
+  })
+
+  it('keeps dense sequence spans proportional before applying the pixel floor', () => {
+    const denseTurns = [{
+      turn: 1,
+      groups: [{
+        title: 'Step 1',
+        cells: Array.from({ length: 400 }, (_, index) => ({
+          index,
+          kind: 'message' as const,
+          text: `message ${index}`,
+          timeSeconds: 1,
+        })),
+      }],
+    }]
+    const view = render(
+      <TrajectoryTimeline
+        turns={denseTurns}
+        mode="sequence"
+        range={null}
+        onRangeChange={vi.fn()}
+      />,
+    )
+
+    const span = view.container.querySelector<HTMLElement>('[data-timeline-span]')
+    expect(span?.style.getPropertyValue('--trajectory-span-width')).toBe('0.25%')
+    expect(span?.style.getPropertyValue('--trajectory-span-gap'))
+      .toBe('min(0.02%, 1px)')
  })

  it('clears the selection without changing zoom on a zoomed right click', () => {
@@ -624,15 +699,18 @@ describe('timeline projection', () => {
        turns={longTurns}
        mode="sequence"
        range={{ start: 2, end: 4 }}
+        hasEarlierRecords
        onRangeChange={onRangeChange}
      />,
    )
    const plot = screen.getByLabelText('Timeline overview; drag horizontally to focus events')
+    expect(screen.getByLabelText('Load earlier history')).toBeTruthy()
    vi.spyOn(plot, 'getBoundingClientRect').mockReturnValue({
      x: 0, y: 0, left: 0, top: 0, right: 100, bottom: 72, width: 100, height: 72,
      toJSON: () => ({}),
    })
    fireEvent.wheel(plot, { clientX: 50, deltaY: -1_000 })
+    expect(screen.queryByLabelText('Load earlier history')).toBeNull()
    const domain = view.container.querySelector<HTMLElement>('[data-timeline-domain]')
    const domainWidth = domain?.style.getPropertyValue('--trajectory-domain-width')
    expect(domainWidth).not.toBe('100%')
@@ -1065,7 +1143,8 @@ describe('TrajectoryView branches', () => {
        {...standaloneProps([])}
        {...standaloneDuration()}
        useHistory={bindSnapshotSelector(store)}
-        loadAllHistory={vi.fn(() => Promise.resolve())}
+        loadHistoryTail={vi.fn(() => Promise.resolve())}
+        loadOlderHistory={vi.fn(() => Promise.resolve(false))}
      />,
    )

@@ -1075,6 +1154,74 @@ describe('TrajectoryView branches', () => {
    expect(view.container.querySelectorAll('[data-request-only="true"]')).toHaveLength(0)
  })

+  it('does not remount the ledger when prepending shifts a rewind generation id', () => {
+    const current = {
+      kind: 'assistant',
+      seq: 5,
+      time: 5_000,
+      turn: 2,
+      step: 1,
+      blocks: [{ kind: 'text', text: 'stable rewind response' }],
+    } as unknown as ConversationSnapshot['nodes'][number]
+    const snapshot = (id: number) => historySnapshot([current], {
+      contexts: [{
+        id,
+        origin: 'rewind' as const,
+        originSeq: 4,
+        nodes: [current],
+      }],
+    })
+    const store = createSnapshotStore(snapshot(1))
+    render(
+      <TrajectoryView
+        {...standaloneProps([])}
+        {...standaloneDuration()}
+        useHistory={bindSnapshotSelector(store)}
+        loadHistoryTail={vi.fn(() => Promise.resolve())}
+        loadOlderHistory={vi.fn(() => Promise.resolve(false))}
+      />,
+    )
+    const row = screen.getByRole('row', { name: /stable rewind response/ })
+    fireEvent.click(row)
+    expect(row.getAttribute('aria-selected')).toBe('true')
+
+    act(() => { store.set(snapshot(2)) })
+
+    expect(screen.getByRole('row', { name: /stable rewind response/ })
+      .getAttribute('aria-selected')).toBe('true')
+  })
+
+  it('keeps ledger and timeline selection on the same event after prepend', () => {
+    const older = {
+      kind: 'user', seq: 1, time: 1_000,
+      content: [{ type: 'text', text: 'older prompt' }], source: null,
+    } as unknown as ConversationSnapshot['nodes'][number]
+    const current = {
+      kind: 'assistant', seq: 100, time: 5_000, turn: 2, step: 1,
+      blocks: [{ kind: 'text', text: 'selected current response' }],
+    } as unknown as ConversationSnapshot['nodes'][number]
+    const store = createSnapshotStore(historySnapshot([current]))
+    const view = render(
+      <TrajectoryView
+        {...standaloneProps([])}
+        {...standaloneDuration()}
+        useHistory={bindSnapshotSelector(store)}
+        loadHistoryTail={vi.fn(() => Promise.resolve())}
+        loadOlderHistory={vi.fn(() => Promise.resolve(false))}
+      />,
+    )
+    fireEvent.click(screen.getByRole('row', { name: /selected current response/ }))
+
+    act(() => { store.set(historySnapshot([older, current])) })
+
+    const row = screen.getByRole('row', { name: /selected current response/ })
+    expect(row.getAttribute('aria-selected')).toBe('true')
+    const currentIndex = row.getAttribute('data-record-index')
+    expect(view.container.querySelector(
+      `[data-timeline-record-index="${currentIndex}"][data-current="true"]`,
+    )).toBeTruthy()
+  })
+
  it('retains cancellation-frozen assistant and tool nodes outside raw contexts', () => {
    const retained = {
      kind: 'user', seq: 1, time: 1_000,
@@ -1108,7 +1255,8 @@ describe('TrajectoryView branches', () => {
        {...standaloneProps([])}
        {...standaloneDuration()}
        useHistory={bindSnapshotSelector(store)}
-        loadAllHistory={vi.fn(() => Promise.resolve())}
+        loadHistoryTail={vi.fn(() => Promise.resolve())}
+        loadOlderHistory={vi.fn(() => Promise.resolve(false))}
      />,
    )

--- a/packages/client/ui-trajectory/tests/virtual-rows.spec.ts
+++ b/packages/client/ui-trajectory/tests/virtual-rows.spec.ts
@@ -0,0 +1,95 @@
+/** Measurable virtual-row grouping and durable identity contracts. */
+
+import { describe, expect, it } from 'vitest'
+import type { TrajectoryCellProps } from '../src/client/trajectory-record.ts'
+import {
+  groupTrajectoryVirtualRows, trajectoryVirtualRecordKey,
+  type VirtualizableTrajectoryRecord,
+} from '../src/client/trajectory-virtual-rows.ts'
+
+function record(
+  index: number,
+  cell: Partial<TrajectoryCellProps> = {},
+  collapsedSummaryKind?: 'turn' | 'assistant',
+): VirtualizableTrajectoryRecord {
+  return {
+    cell: {
+      index,
+      kind: 'message',
+      text: `record ${index}`,
+      timeSeconds: 0,
+      ...cell,
+    },
+    ...(collapsedSummaryKind === undefined ? {} : { collapsedSummaryKind }),
+  }
+}
+
+describe('trajectory virtual rows', () => {
+  it('groups zero-height request boundaries with the following content row', () => {
+    const first = record(1, { requestOnly: true, sourceSeq: 10 })
+    const second = record(2, { requestOnly: true, sourceSeq: 11 })
+    const content = record(3, { sourceSeq: 12 })
+
+    expect(groupTrajectoryVirtualRows([first, second, content])).toEqual([{
+      entries: [
+        { logicalIndex: 0, record: first },
+        { logicalIndex: 1, record: second },
+        { logicalIndex: 2, record: content },
+      ],
+      height: 30,
+      key: trajectoryVirtualRecordKey(content),
+    }])
+  })
+
+  it('retains terminal request-boundary clearance as a measurable row', () => {
+    const content = record(1, { sourceSeq: 10 })
+    const boundary = record(2, { requestOnly: true, sourceSeq: 11 })
+    const rows = groupTrajectoryVirtualRows([content, boundary])
+
+    expect(rows).toHaveLength(2)
+    expect(rows[1]).toEqual({
+      entries: [{ logicalIndex: 1, record: boundary }],
+      height: 9,
+      key: trajectoryVirtualRecordKey(boundary),
+    })
+  })
+
+  it('uses the rendered collapsed-summary height', () => {
+    const summary = record(1, { sourceSeq: 10 }, 'turn')
+
+    expect(groupTrajectoryVirtualRows([summary])[0]?.height).toBe(20)
+  })
+
+  it('keeps an existing row key stable when older history is prepended', () => {
+    const existing = record(2, { sourceSeq: 100 })
+    const prepended = record(1, { sourceSeq: 10 })
+
+    const before = groupTrajectoryVirtualRows([existing])[0]?.key
+    const after = groupTrajectoryVirtualRows([prepended, existing])[1]?.key
+
+    expect(after).toBe(before)
+  })
+
+  it('keeps the content key when a request boundary joins its row', () => {
+    const content = record(2, { sourceSeq: 100 })
+    const boundary = record(1, { requestOnly: true, sourceSeq: 99 })
+
+    expect(groupTrajectoryVirtualRows([boundary, content])[0]?.key)
+      .toBe(groupTrajectoryVirtualRows([content])[0]?.key)
+  })
+
+  it('distinguishes a folded summary from its source record', () => {
+    const source = record(1, { sourceSeq: 10 })
+    const summary = record(1, { sourceSeq: 10 }, 'assistant')
+
+    expect(trajectoryVirtualRecordKey(summary)).not.toBe(trajectoryVirtualRecordKey(source))
+  })
+
+  it('exposes a DOM-safe semantic key', () => {
+    const source = record(1, { callId: 'call with spaces/and?punctuation' })
+
+    expect(trajectoryVirtualRecordKey(source)).toBe(
+      'message%00call%00call%20with%20spaces%2Fand%3Fpunctuation',
+    )
+  })
+})