Merge pull request #3050 from deepseek-harness/worktree/session-turn-nav-styling-7715ae

feat(web): navigate loaded Chat Turns from a compact rail

.agents/notes/implemented/feature/2026-08-25-loaded-turn-chat-navigation.i18n.yaml

@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# 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 .agents/notes/implemented/feature/2026-08-25-loaded-turn-chat-navigation.md
+2026-08-25-loaded-turn-chat-navigation.md: 5d9d93b07f7a8c527bf7376bf111c6a709afa4d1
+2026-08-25-loaded-turn-chat-navigation.zh.md: 21dba024710b306848fee9bc4fe1f16913c475b3

.agents/notes/implemented/feature/2026-08-25-loaded-turn-chat-navigation.md

@@ -0,0 +1,45 @@
+# Agent Note: Loaded-Turn chat navigation
+
+Status: implemented
+
+English | [中文](2026-08-25-loaded-turn-chat-navigation.zh.md)
+
+## Problem
+
+Long Chat transcripts require repeated scrolling to revisit an earlier Turn. Session history is paged, so the browser may hold only a suffix of the conversation and the first loaded Turn may begin after its user message. A navigator that implies knowledge of unloaded Turns, or keys marks by their current array position, becomes misleading or unstable when Session Controller prepends the preceding event page.
+
+## Decision
+
+The Chat snapshot builder accumulates one navigation item for every currently loaded Turn that has a visible transcript node. Each item uses the Turn number as its stable React key and the first loaded user node, falling back to the Turn's first loaded node, as its scroll anchor. This is a pure projection of loaded Chat state: the feature adds no Session event, persisted index, or pagination request.
+
+Accumulation, not a render-time scan: a structural upsert re-derives the loaded Turn set, a content-only upsert re-derives only the Turns whose nodes changed, and each preview is capped at 160 characters so navigation state never holds a copy of the transcript. The published array keeps its identity until an item changes, so ChatView selects it as both the rail's data and its change signal — the renderer never walks the loaded window, and a streaming reply's preview follows the in-place node update instead of the last structural publication.
+
+The rail renders the complete loaded Turn set with a 10px natural interval and never renders an ellipsis or unloaded-history placeholder. Its height shrink-wraps small sets; when the loaded set exceeds the available height, percentage positions compress every mark into the capped rail. When an earlier page arrives, existing Turn keys and DOM elements remain stable while their resolved positions change; CSS transitions animate that redistribution. A Turn split by the page boundary initially previews its Turn number and loaded assistant response, then gains the user prompt when the preceding page supplies it.
+
+The rail sits against the scrollport's right edge and centers on the band the sticky composer leaves visible. That band is the scrollport's own height minus the seat's, so ConversationRoot publishes `--dsh-conversation-viewport-height` beside the `--dsh-composer-height` it already measures on the same element, and the rail centers on their difference instead of a viewport height that ignores the Session header.
+
+The active mark follows a reading line near the top of the shared Chat scrollport. A scroll frame resolves the owning Turn with one hit test at that line, falling back to a single row scan where layout cannot answer, so cost does not grow with the number of marks. Flow-height changes that move rows across the line without a scroll event resync through the existing column observer. Scroll updates are coalesced with `requestAnimationFrame`; reaching the bottom selects the final loaded Turn. Activating a mark computes the target node's position in the existing scroll coordinate system, moves that same scrollport, and records the resulting Chat scroll-restoration anchor.
+
+Every Turn remains an accessible button even when dense marks visually overlap. The rail maps pointer height to the nearest loaded Turn, while keyboard focus and activation operate the individual buttons. Hover and focus show a compact prompt-and-response preview, the active mark is longer and darker, the rail is hidden when the Chat container is at most 900px wide, and reduced-motion preferences disable redistribution and mark-entry animation.
+
+## Alternatives considered
+
+**Persist a complete Turn index separately from the loaded Session page.** Rejected: the current client cannot navigate to an unloaded transcript anchor without first materializing that history, and a second index would duplicate Session projection state.
+
+**Show an ellipsis for unloaded history.** Rejected: pagination exposes only `hasMore`, not the number or distribution of earlier Turns, so an ellipsis would add no actionable destination. Loading a page and redistributing the actual loaded set communicates the available navigation precisely.
+
+**Always spread marks across the available height.** Rejected: a small loaded set produces visually unrelated marks separated by large empty regions. A fixed natural interval preserves a compact index while percentage compression still admits dense histories.
+
+**Derive the rail in the renderer from the Chat snapshot.** Rejected: renderers do not scan the loaded Chat Nodes ([client discipline](../../../../packages/client/AGENTS.md)). A render-time projection also re-copied every Turn's prompt and reply text on each structural publication, and could not see the in-place node updates a streaming reply produces, so previews froze at the first chunk.
+
+**Key marks by loaded-array position.** Rejected: prepending a page would reuse each DOM element for a different Turn, lose focus and preview identity, and prevent the existing marks from animating to their new positions.
+
+**Call `scrollIntoView` on the Turn row.** Rejected: Chat owns a shared scroller, bottom-follow state, paging anchors, and persisted restoration coordinates. An opaque browser scroll would bypass those state updates.
+
+## Consequences
+
+Desktop-width Chat views can jump among all currently loaded Turns and inspect a short preview without expanding transcript content. Pagination prepends new destinations without presenting fabricated coverage or remounting existing marks. The first loaded mark can temporarily lack a prompt when the page boundary cuts through its Turn; its Turn label remains usable until the earlier page fills that data. If a future transcript virtualizer unmounts loaded anchors, navigation will need an explicit materialization operation before scrolling rather than changing this loaded-Turn projection.
+
+## Testing
+
+Builder tests pin the accumulated projection, the bounded preview, and preview freshness under an in-place chunk update. Component tests pin the published items, accessible previews, scroll-coordinate jumps, DOM identity, and percentage redistribution after prepend. The long-interaction Chromium scenario pins the real paginated boundary, prompt completion after `Load earlier`, stable-mark movement, keyboard activation, active-state update, and the narrow-container hide. The multi-Turn recorded Web snapshot includes the navigation landmark and buttons.

.agents/notes/implemented/feature/2026-08-25-loaded-turn-chat-navigation.zh.md

@@ -0,0 +1,45 @@
+# Agent Note：已加载 Turn 的聊天导航
+
+Status: implemented
+
+[English](2026-08-25-loaded-turn-chat-navigation.md) | 中文
+
+## 问题
+
+较长的 Chat transcript 需要反复滚动才能回看更早的 Turn。Session 历史采用分页加载，因此浏览器可能只持有会话后缀，首个已加载 Turn 也可能从用户消息之后开始。如果导航暗示自己知道未加载的 Turn，或者按当前数组位置给刻度设置 key，Session Controller 前插上一页 event 后，导航就会产生误导或变得不稳定。
+
+## 决定
+
+Chat snapshot 构建层为当前已加载且含可见 transcript node 的每个 Turn 累积一项导航。每项使用 Turn 编号作为稳定的 React key，并以首个已加载用户 node 为滚动锚点；没有用户 node 时回退到该 Turn 的首个已加载 node。这只是已加载 Chat 状态的纯投影：本功能不新增 Session event、持久化索引或分页请求。
+
+累积而非渲染期扫描：结构性 upsert 重算已加载 Turn 集合，仅内容变化的 upsert 只重算受影响 Turn，每条预览截断到 160 字符，导航状态因此不会持有 transcript 副本。发布的数组在条目未变时保持引用不变，ChatView 直接选取它，既作为轨道数据也作为变化信号——渲染层不遍历已加载窗口，流式回复的预览也跟随节点原地更新，而不是停在上一次结构性发布。
+
+导航轨道以 10px 自然间距渲染完整的已加载 Turn 集合，永不显示省略号或未加载历史占位。集合较小时轨道随内容收缩；已加载集合超过可用高度后，百分比位置会把所有刻度压缩到设定上限内。更早一页到达后，已有 Turn 的 key 和 DOM 元素保持不变，最终位置随之变化；CSS transition 为这次重排添加动画。如果一个 Turn 被分页边界截断，预览最初显示其 Turn 编号与已加载的助手回复，上一页补齐后再显示用户问题。
+
+轨道紧贴滚动视口右缘，并在粘性输入区之外的可见区间内垂直居中。该区间等于滚动视口自身高度减去输入区高度，因此 ConversationRoot 在同一元素上除已有的 `--dsh-composer-height` 外再发布 `--dsh-conversation-viewport-height`，轨道按两者之差居中，而不是按忽略 Session 头部的视口高度居中。
+
+活跃刻度跟随共享 Chat 滚动区顶部附近的阅读线。每个滚动帧用一次命中测试解析该行所属 Turn，布局无法作答时退化为一次行扫描，成本不随刻度数量增长。图片加载、工具卡展开等不产生滚动事件的高度变化，通过既有的 column observer 重新同步。滚动更新由 `requestAnimationFrame` 合并；到达底部时选择最后一个已加载 Turn。激活刻度会在现有滚动坐标系中计算目标 node 的位置，移动同一个滚动区，并记录由此产生的 Chat 滚动恢复锚点。
+
+即使密集刻度在视觉上重叠，每个 Turn 仍是可访问的按钮。轨道把指针高度映射到最近的已加载 Turn，键盘聚焦和激活则作用于各个按钮。悬停或聚焦显示紧凑的问题与回复预览，活跃刻度更长、更深；Chat 容器宽度不超过 900px 时隐藏轨道，用户偏好减少动态效果时关闭重排和刻度入场动画。
+
+## 曾考虑的替代方案
+
+**在已加载 Session 页之外持久化完整 Turn 索引。**否决：当前客户端必须先物化历史记录，才能导航到未加载的 transcript 锚点；第二套索引还会重复 Session 投影状态。
+
+**为未加载历史显示省略号。**否决：分页只暴露 `hasMore`，不提供更早 Turn 的数量或分布，因此省略号不是可操作的目的地。加载一页并重排真实的已加载集合，才能精确表达当前可导航范围。
+
+**始终把刻度铺满可用高度。**否决：已加载集合较小时，各刻度会被大片空白隔开，在视觉上失去关联。固定自然间距保持紧凑索引，百分比压缩仍能容纳密集历史。
+
+**在渲染层从 Chat snapshot 派生轨道。**否决：渲染层不扫描已加载的 Chat Nodes（见 [client 纪律](../../../../packages/client/AGENTS.md)）。渲染期投影还会在每次结构性发布时重新复制每个 Turn 的问题与回复文本，且看不到流式回复的节点原地更新，预览会停在首个 chunk。
+
+**按已加载数组位置给刻度设置 key。**否决：前插一页会让每个 DOM 元素改为代表另一个 Turn，丢失焦点与预览身份，也无法让已有刻度移动到新位置。
+
+**对 Turn 行调用 `scrollIntoView`。**否决：Chat 拥有共享滚动区、底部跟随状态、分页锚点与持久化恢复坐标。浏览器的黑盒滚动会绕过这些状态更新。
+
+## 后果
+
+桌面宽度的 Chat 视图可以在当前所有已加载 Turn 之间跳转，并在不展开 transcript 内容的情况下查看短预览。分页会前插新目的地，但不会虚构覆盖范围或重新挂载已有刻度。分页边界截断 Turn 时，首个已加载刻度可能暂时缺少问题；在上一页补齐数据前，Turn 标签仍可用于导航。如果未来 transcript 虚拟列表会卸载已加载锚点，导航需要在滚动前执行显式物化操作，而不应改变这里的已加载 Turn 投影。
+
+## 测试
+
+构建层测试固定累积投影、预览截断，以及原地 chunk 更新后的预览新鲜度。组件测试固定已发布条目、可访问预览、滚动坐标跳转、DOM 身份以及前插后的百分比重排。长交互 Chromium 场景固定真实分页边界、`加载更早` 后补齐问题、稳定刻度移动、键盘激活、活跃状态更新与窄容器隐藏。多 Turn 的 Web 录制快照包含导航 landmark 和按钮。

apps/web/tests/chat-long-interactions.e2e.ts

@@ -193,6 +193,54 @@ describe('web e2e: long Chat interaction contract', () => {
     if (boundary === undefined) throw new Error(`turn ${String(BRANCH_TURN)} has no turn/end event`)
     const expectedUserText = textContent(branchUserEvent.data.content)
 
+    const turnNavigation = page.getByRole('navigation', { name: 'Turn navigation' })
+    await turnNavigation.waitFor({ state: 'visible', timeout: 15_000 })
+    const initialTurnButtons = turnNavigation.getByRole('button')
+    const initialTurnCount = await initialTurnButtons.count()
+    expect(initialTurnCount).toBeGreaterThan(1)
+    expect(await initialTurnButtons.last().getAttribute('aria-current')).toBe('true')
+    const firstTurnButton = initialTurnButtons.first()
+    const firstTurnLabel = await firstTurnButton.getAttribute('aria-label')
+    if (firstTurnLabel === null) throw new Error('first Turn navigation mark has no accessible label')
+    const firstTurn = Number(firstTurnLabel.match(/^Jump to turn (\d+)$/)?.[1])
+    expect(Number.isSafeInteger(firstTurn)).toBe(true)
+    await firstTurnButton.focus()
+    const preview = page.getByRole('tooltip')
+    await preview.waitFor({ state: 'visible', timeout: 5_000 })
+    // The first loaded Turn may begin mid-Turn at a page boundary. Its mark is
+    // still useful with the loaded response and gains the prompt after prepend.
+    expect(await preview.textContent()).toContain(`Turn ${String(firstTurn)}`)
+    expect(await preview.textContent()).toContain(FIXTURE.markers.assistant(firstTurn))
+    const firstTurnPosition = await firstTurnButton.evaluate(button => (
+      button.parentElement?.style.getPropertyValue('--turn-position') ?? ''
+    ))
+    expect(firstTurnPosition).toBe('0%')
+
+    const loadEarlier = page.getByRole('button', { name: 'Load earlier', exact: true })
+    await loadEarlier.click()
+    await expect.poll(() => turnNavigation.getByRole('button').count(), { timeout: 15_000 })
+      .toBeGreaterThan(initialTurnCount)
+    const stableFirstTurnButton = turnNavigation.getByRole('button', { name: firstTurnLabel })
+    expect(await stableFirstTurnButton.evaluate(button => (
+      button.parentElement?.style.getPropertyValue('--turn-position') ?? ''
+    ))).not.toBe(firstTurnPosition)
+    await stableFirstTurnButton.focus()
+    await expect.poll(() => preview.textContent(), { timeout: 5_000 })
+      .toContain(FIXTURE.markers.user(firstTurn))
+    expect(await preview.textContent()).toContain(FIXTURE.markers.assistant(firstTurn))
+    await stableFirstTurnButton.press('Enter')
+    await expect.poll(() => stableFirstTurnButton.getAttribute('aria-current'), { timeout: 5_000 }).toBe('true')
+    await expect.poll(
+      () => page.locator(`[data-chat-turn="${String(firstTurn)}"][data-chat-flow-kind="user"]`).count(),
+      { timeout: 5_000 },
+    ).toBe(1)
+
+    // Desktop-only affordance: a narrow Chat container hides the rail outright.
+    await page.setViewportSize({ width: 800, height: 900 })
+    await turnNavigation.waitFor({ state: 'hidden', timeout: 5_000 })
+    await page.setViewportSize({ width: 1_680, height: 900 })
+    await turnNavigation.waitFor({ state: 'visible', timeout: 5_000 })
+
     await wheelUntilMounted(page, `[data-chat-call-id="${TARGET_CALL_2}"]`, -1_100)
     const toolUserKey = messageKey(toolUserEvent)
     const toolAssistantKey = assistantKey(toolAssistantEvent)

apps/web/tests/expected/stats-paged-history/ui.expected.md

@@ -7,6 +7,35 @@
   - tablist:
     - tab "Chat" [selected]
     - tab "Trajectory"
+- navigation "Turn navigation":
+  - button "Jump to turn 1"
+  - button "Jump to turn 2"
+  - button "Jump to turn 3"
+  - button "Jump to turn 4"
+  - button "Jump to turn 5"
+  - button "Jump to turn 6"
+  - button "Jump to turn 7"
+  - button "Jump to turn 8"
+  - button "Jump to turn 9"
+  - button "Jump to turn 10"
+  - button "Jump to turn 11"
+  - button "Jump to turn 12"
+  - button "Jump to turn 13"
+  - button "Jump to turn 14"
+  - button "Jump to turn 15"
+  - button "Jump to turn 16"
+  - button "Jump to turn 17"
+  - button "Jump to turn 18"
+  - button "Jump to turn 19"
+  - button "Jump to turn 20"
+  - button "Jump to turn 21"
+  - button "Jump to turn 22"
+  - button "Jump to turn 23"
+  - button "Jump to turn 24"
+  - button "Jump to turn 25"
+  - button "Jump to turn 26"
+  - button "Jump to turn 27"
+  - button "Jump to turn 28"
 - text: m1 7/25 {{clock}}
 - button "Copy":
   - img

packages/client/ui-chat/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-chat/README.md
-README.md: b44c061aa9af8f58dbbae212c72fa55e186e4564
-README.zh.md: b339fea3835f0be0e6e07ec93577c4f11c80c1b7
+README.md: 26d712f58726f13d390efa2e6fd42b38fb373a1f
+README.zh.md: 53a98828ccfc9c4841ccc8b4d27d4df527af0ec4

packages/client/ui-chat/README.md

@@ -47,7 +47,7 @@ None; Chat presentation does not assemble or mutate provider requests.
 
 <a id="known-limitations-and-deferred-work"></a>
 
-- **The view reflects the loaded Session window** — older transcript nodes become available only after Session Controller loads the preceding event page.
+- **The view reflects the loaded Session window** — older transcript nodes become available only after Session Controller loads the preceding event page. Turn navigation likewise represents only loaded Turns; loading an earlier page preserves existing Turn marks and redistributes the complete loaded set in a compact rail without an unloaded-history placeholder. Marks stay 10px apart until the loaded set exceeds the available height, then compress to fit.
 
 
 <a id="dev-note"></a>

packages/client/ui-chat/README.zh.md

@@ -47,7 +47,7 @@ Chat 会为每个非空的初始或恢复请求、显式消息序列起点或真
 
 <a id="known-limitations-and-deferred-work"></a>
 
-- **视图只反映已加载的 Session 窗口**——只有 Session Controller 加载前一页 event 后，更早的 transcript node 才会出现。
+- **视图只反映已加载的 Session 窗口**——只有 Session Controller 加载前一页 event 后，更早的 transcript node 才会出现。轮次导航同样只表示已加载的 Turn；加载更早一页时，已有 Turn 刻度保持身份不变，完整的已加载集合在紧凑轨道中重新排布，不显示未加载历史占位。刻度默认相隔 10px，仅在已加载集合超过可用高度时压缩间距。
 
 
 <a id="dev-note"></a>

packages/client/ui-chat/src/client/chat/ChatNodeSeat.tsx

@@ -36,6 +36,10 @@ export const ChatNodeSeat = memo(function ChatNodeSeat({
     node, selectedCallId, cwd, openFile, inspectCall, forkAt, renderMessageImages, fileMentions,
   ])
   if (routedNode === undefined || owner === null) return null
+  const location = routedNode.location
+  const turn = location.kind === 'turn' || location.kind === 'step'
+    ? location.turn.turn
+    : undefined
   // Runtime dispatch owns the correlation: every Node's discriminant is the
   // keyed-slot entry passed alongside that same Node. TypeScript does not
   // distribute an object containing a union into a union of objects itself.
@@ -46,6 +50,7 @@ export const ChatNodeSeat = memo(function ChatNodeSeat({
       data-chat-anchor-key={routedNode.key}
       data-chat-flow-key={routedNode.key}
       data-chat-flow-kind={routedNode.kind}
+      data-chat-turn={turn}
     >
       {renderSlot('conversation.chat.node', routedOwner, {
         entryKey: routedNode.kind,

packages/client/ui-chat/src/client/chat/ChatView.tsx

@@ -7,8 +7,10 @@ import type {
 } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import { Button, IconChevronDownOutline14, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ChatViewSlotProps } from '../contract/slots.ts'
+import type { TurnNavigationItem } from '../contract/snapshot.ts'
 import { PendingSteeringBubble } from './MessageItem.tsx'
 import { ChatNodeSeat } from './ChatNodeSeat.tsx'
+import { TurnNavigator } from './TurnNavigator.tsx'
 import { formatRunDuration } from './message-chrome.ts'
 import css from './ChatView.module.css'
 
@@ -34,6 +36,32 @@ function anchorElement(list: HTMLElement, key: string): HTMLElement | null {
   return null
 }
 
+/**
+ * Turn owning the row at a scrollport line. Scroll frames are hot, so this
+ * hit-tests the line first and falls back to one row scan when layout cannot
+ * answer (jsdom, pre-paint); neither path queries per navigation item.
+ * @param list - the ChatView list element.
+ * @param line - viewport y of the reading line.
+ * @returns the Turn number, or null when no loaded row covers the line.
+ */
+function turnAtLine(list: HTMLElement, line: number): number | null {
+  const content = list.getBoundingClientRect()
+  if (typeof document.elementsFromPoint === 'function' && content.width > 0) {
+    for (const element of document.elementsFromPoint(content.left + content.width / 2, line)) {
+      const row = element instanceof HTMLElement ? element.closest<HTMLElement>('[data-chat-turn]') : null
+      const turn = Number(row?.dataset.chatTurn)
+      if (row !== null && list.contains(row) && Number.isSafeInteger(turn)) return turn
+    }
+  }
+  let found: number | null = null
+  for (const row of list.querySelectorAll<HTMLElement>('[data-chat-turn]')) {
+    if (row.getBoundingClientRect().top > line) break
+    const turn = Number(row.dataset.chatTurn)
+    if (Number.isSafeInteger(turn)) found = turn
+  }
+  return found
+}
+
 /** Row position in scrollport coordinates (viewport-independent). */
 function flowTop(row: HTMLElement, scrollport: HTMLElement): number {
   return row.getBoundingClientRect().top - scrollport.getBoundingClientRect().top
@@ -150,6 +178,10 @@ export function ChatView({
 }: ChatViewSlotProps) {
   const order = useChat(s => s.order)
   const nodeStore = useChat(s => s.nodes)
+  // The rail's items are accumulated in the Chat snapshot, so this selector is
+  // both the data and its change signal: the array identity moves only when a
+  // Turn enters, leaves, or changes its preview.
+  const turnNavigationItems = useChat(s => s.navigation.items())
   const timeline = useChat(s => s.timeline)
   const inbox = useSession(s => s.queue)
   // Workspace root off the session list row: path summaries display relative to it.
@@ -212,6 +244,9 @@ export function ChatView({
   const columnRef = useRef<HTMLDivElement | null>(null)
   const atBottomRef = useRef(true)
   const [atBottom, setAtBottom] = useState(true)
+  const [activeTurn, setActiveTurn] = useState<number | null>(
+    () => turnNavigationItems.at(-1)?.turn ?? null,
+  )
   /** Last position delivered or written on the main thread. */
   const observedTopRef = useRef(0)
   /** Paging anchor: semantic row/position at click, updated by reader scrolls
@@ -233,6 +268,58 @@ export function ChatView({
   const lastSteeringId = pendingSteering[pendingSteering.length - 1]?.id ?? null
   const followSig = `${openState}:${firstSeq}:${lastKey}:${order.length}:${running ? 1 : 0}:${lastSteeringId ?? ''}`
 
+  const syncActiveTurn = useCallback((): void => {
+    const local = listRef.current
+    const first = turnNavigationItems[0]
+    if (local === null || first === undefined) {
+      setActiveTurn(null)
+      return
+    }
+    const el = scrollerOf(local)
+    const readingLine = el.getBoundingClientRect().top + Math.min(96, el.clientHeight * 0.2)
+    const reading = turnAtLine(local, readingLine)
+    // No row reaches the line yet: the flow head still owns the mark. Otherwise
+    // the row's Turn may be one the rail does not offer (all its nodes hidden),
+    // so the newest offered Turn at or above it owns the mark.
+    let next = first.turn
+    if (reading !== null) {
+      for (const item of turnNavigationItems) {
+        if (item.turn > reading) break
+        next = item.turn
+      }
+    }
+    if (el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1) {
+      next = turnNavigationItems.at(-1)?.turn ?? next
+    }
+    setActiveTurn(current => current === next ? current : next)
+  }, [turnNavigationItems])
+
+  const activeTurnRef = useRef<(() => void) | null>(null)
+  const activeFrameRef = useRef<number | null>(null)
+  const scheduleActiveTurn = useCallback((): void => {
+    if (activeFrameRef.current !== null) return
+    if (typeof requestAnimationFrame === 'undefined') {
+      syncActiveTurn()
+      return
+    }
+    activeFrameRef.current = requestAnimationFrame(() => {
+      activeFrameRef.current = null
+      syncActiveTurn()
+    })
+  }, [syncActiveTurn])
+
+  useEffect(() => () => {
+    if (activeFrameRef.current !== null && typeof cancelAnimationFrame !== 'undefined') {
+      cancelAnimationFrame(activeFrameRef.current)
+    }
+  }, [])
+
+  activeTurnRef.current = scheduleActiveTurn
+
+  useLayoutEffect(() => {
+    scheduleActiveTurn()
+  }, [scheduleActiveTurn])
+
   const toBottom = (el: HTMLElement): void => {
     anchorRef.current = null
     el.scrollTop = el.scrollHeight
@@ -240,6 +327,7 @@ export function ChatView({
     atBottomRef.current = true
     setAtBottom(true)
     chatScroll.save(null)
+    setActiveTurn(turnNavigationItems.at(-1)?.turn ?? null)
   }
 
   useLayoutEffect(() => {
@@ -338,6 +426,7 @@ export function ChatView({
     if (isAtBottom) chatScroll.save(null)
     else if (position !== null) chatScroll.save(position)
     observedTopRef.current = el.scrollTop
+    scheduleActiveTurn()
   }
 
   // Bind the scroll listener on the resolved scrollport once per mount;
@@ -376,7 +465,12 @@ export function ChatView({
     if (column === null || local === null || typeof ResizeObserver === 'undefined') return
     const scrollport = scrollerOf(local)
     const composer = scrollport.querySelector<HTMLElement>('[data-composer-seat]')
-    const observer = new ResizeObserver(() => { followRef.current?.() })
+    // Flow-height changes (image loads, tool disclosures) move rows across the
+    // reading line without a scroll event, so the active mark resyncs here too.
+    const observer = new ResizeObserver(() => {
+      followRef.current?.()
+      activeTurnRef.current?.()
+    })
     observer.observe(column)
     if (composer !== null) observer.observe(composer)
     return () => { observer.disconnect() }
@@ -404,9 +498,38 @@ export function ChatView({
     loadOlder()
   }
 
+  const navigateToTurn = (item: TurnNavigationItem): void => {
+    const local = listRef.current
+    if (local === null) return
+    const row = anchorElement(local, item.anchorKey)
+    if (row === null) return
+    const el = scrollerOf(local)
+    el.scrollTop += flowTop(row, el) - 24
+    observedTopRef.current = el.scrollTop
+    // A pending older page still has to compensate the prepended height, so
+    // navigation moves that anchor to the new position instead of dropping it.
+    const landed = loadingOlder ? pagingAnchor(local, el) : null
+    anchorRef.current = landed === null || landed.dataset.chatAnchorKey === undefined
+      ? null
+      : { key: landed.dataset.chatAnchorKey, top: flowTop(landed, el) }
+    const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= FOLLOW_THRESHOLD + 1
+    atBottomRef.current = isAtBottom
+    setAtBottom(isAtBottom)
+    setActiveTurn(item.turn)
+    const position = isAtBottom ? null : scrollPosition(local, el)
+    if (isAtBottom) chatScroll.save(null)
+    else if (position !== null) chatScroll.save(position)
+  }
+
   return (
     <div className={css.root}>
       <div ref={listRef} className={css.scroll}>
+        <TurnNavigator
+          items={turnNavigationItems}
+          activeTurn={activeTurn}
+          onNavigate={navigateToTurn}
+          t={t}
+        />
         <div ref={columnRef} className={css.column} data-chat-flow="">
           {openState === 'loading' && <div className={css.hint}>{t('chat.loadingHistory')}</div>}
           {openState === 'error' && openError !== null && (

packages/client/ui-chat/src/client/chat/TurnNavigator.module.css

@@ -0,0 +1,180 @@
+/* Zero-height sticky slot, like the back-to-bottom control: the rail floats
+   over the transcript's right gutter without extending scrollHeight. */
+.slot {
+  position: sticky;
+  top: 0;
+  z-index: 6;
+  height: 0;
+  pointer-events: none;
+}
+
+.rail {
+  /* The band a reader actually sees: the scrollport minus the sticky composer
+     stack covering its floor. ConversationRoot publishes both measurements on
+     the scrollport; the fallbacks carry the first paint before its observer
+     fires. */
+  --turn-rail-band: calc(
+    var(--dsh-conversation-viewport-height, 100dvh) - var(--dsh-composer-height, 152px)
+  );
+  --turn-preview-height: 100px;
+
+  position: absolute;
+  top: calc(var(--turn-rail-band) / 2);
+  /* Flush with the scrollport edge: the slot sits inside the transcript's side
+     padding, so the rail gives that inset back and keeps 12px of its own. */
+  right: calc(12px - (var(--dsh-composer-side-clearance) + 16px));
+  width: 28px;
+  /* Never taller than the band it centers in: a short window (a tall composer,
+     a low viewport) shrinks the rail instead of pushing marks under the
+     composer or above the scrollport. */
+  height: min(
+    var(--turn-natural-height),
+    max(0px, calc(var(--turn-rail-band) - 64px)),
+    420px
+  );
+  cursor: pointer;
+  pointer-events: auto;
+  transform: translateY(-50%);
+  transition: height 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.marks {
+  position: absolute;
+  inset: var(--turn-rail-inset) 0;
+}
+
+.markPosition {
+  position: absolute;
+  top: min(var(--turn-natural-position), var(--turn-position));
+  right: 0;
+  left: 0;
+  height: 10px;
+  transform: translateY(-50%);
+  transition: top 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  animation: dsh-turn-mark-enter 150ms ease-out;
+}
+
+/* The rail owns pointer input for the whole column, so a mark is a keyboard
+   destination that paints one tick — never a mouse target of its own. */
+.mark {
+  position: absolute;
+  /* As wide as the longest tick, right-aligned with it: the focus ring below
+     then wraps the tick instead of the rail's full pointer column. */
+  inset: 0 0 0 auto;
+  width: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.mark::before {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 12px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--dsw-alias-border-l4);
+  content: '';
+  transform: translateY(-50%);
+  transition: width 140ms ease, background-color 140ms ease;
+}
+
+.markPreview::before {
+  width: 18px;
+  background: var(--dsw-alias-label-tertiary);
+}
+
+.markActive::before {
+  width: 20px;
+  background: var(--dsw-alias-label-primary);
+}
+
+/* Keyboard focus outranks both resting states: the tick takes the brand color
+   the rest of the rail never uses, and a hairline ring keeps it legible
+   against a busy transcript. */
+.mark:focus-visible::before {
+  width: 20px;
+  background: var(--dsw-alias-state-business-primary);
+}
+
+.mark:focus-visible {
+  outline: 1px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+}
+
+.preview {
+  position: absolute;
+  /* Centered on its mark (mark positions are measured inside the rail inset),
+     then held clear of both rail ends. */
+  top: clamp(
+    0px,
+    calc(
+      min(var(--turn-natural-position), var(--turn-position))
+      + var(--turn-rail-inset) - var(--turn-preview-height) / 2
+    ),
+    calc(100% - var(--turn-preview-height))
+  );
+  right: calc(100% + 10px);
+  box-sizing: border-box;
+  width: min(300px, calc(100cqw - 120px));
+  max-height: var(--turn-preview-height);
+  overflow: hidden;
+  padding: 10px 12px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-1);
+  box-shadow: var(--dsw-shadow-lv2);
+  pointer-events: none;
+  animation: dsh-turn-preview-enter 120ms ease-out;
+  transition: top 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.previewPrompt,
+.previewResponse {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+
+.previewPrompt {
+  font: var(--dsw-font-xs-strong-13);
+  -webkit-line-clamp: 2;
+}
+
+.previewResponse {
+  margin-top: 4px;
+  color: var(--dsw-alias-label-caption);
+  font: var(--dsw-font-xxs-12);
+  -webkit-line-clamp: 2;
+}
+
+@keyframes dsh-turn-mark-enter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes dsh-turn-preview-enter {
+  from { opacity: 0; transform: translateX(4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@container (max-width: 900px) {
+  .slot {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rail,
+  .markPosition,
+  .mark::before,
+  .preview {
+    transition: none;
+    animation: none;
+  }
+}

packages/client/ui-chat/src/client/chat/TurnNavigator.tsx

@@ -0,0 +1,118 @@
+import {
+  useId, useState, type CSSProperties, type MouseEvent, type PointerEvent,
+} from 'react'
+import type { ChatViewSlotProps } from '../contract/slots.ts'
+import type { TurnNavigationItem } from '../contract/snapshot.ts'
+import css from './TurnNavigator.module.css'
+
+interface TurnNavigatorProps {
+  readonly items: readonly TurnNavigationItem[]
+  readonly activeTurn: number | null
+  readonly onNavigate: (item: TurnNavigationItem) => void
+  readonly t: ChatViewSlotProps['t']
+}
+
+/** Resting gap between neighbouring marks before the rail compresses to fit. */
+const TURN_SPACING_PX = 10
+/** Rail padding above the first mark and below the last one, per end. */
+const RAIL_INSET_PX = 6
+
+type TurnPositionStyle = CSSProperties & {
+  readonly '--turn-natural-position': string
+  readonly '--turn-position': string
+}
+
+type TurnRailStyle = CSSProperties & {
+  readonly '--turn-natural-height': string
+  readonly '--turn-rail-inset': string
+}
+
+function itemPosition(index: number, count: number): TurnPositionStyle {
+  const ratio = count <= 1 ? 0 : index / (count - 1)
+  return {
+    '--turn-natural-position': `${String(index * TURN_SPACING_PX)}px`,
+    '--turn-position': `${String(ratio * 100)}%`,
+  }
+}
+
+function railSize(count: number): TurnRailStyle {
+  return {
+    '--turn-natural-height': `${String((count - 1) * TURN_SPACING_PX + 2 * RAIL_INSET_PX)}px`,
+    '--turn-rail-inset': `${String(RAIL_INSET_PX)}px`,
+  }
+}
+
+function itemAtPointer(
+  items: readonly TurnNavigationItem[],
+  rail: HTMLElement,
+  clientY: number,
+): TurnNavigationItem | undefined {
+  const rect = rail.getBoundingClientRect()
+  const usableHeight = Math.max(1, rect.height - 2 * RAIL_INSET_PX)
+  const ratio = Math.max(0, Math.min(1, (clientY - rect.top - RAIL_INSET_PX) / usableHeight))
+  return items[Math.round(ratio * (items.length - 1))]
+}
+
+/** Compact rail of the currently loaded Turns with hover and focus previews. */
+export function TurnNavigator({ items, activeTurn, onNavigate, t }: TurnNavigatorProps) {
+  const [previewTurn, setPreviewTurn] = useState<number | null>(null)
+  const previewId = useId()
+  if (items.length < 2) return null
+  const previewIndex = items.findIndex(item => item.turn === previewTurn)
+  const preview = previewIndex < 0 ? undefined : items[previewIndex]
+  const previewPosition = previewIndex < 0 ? undefined : itemPosition(previewIndex, items.length)
+  const previewAtPointer = (event: PointerEvent<HTMLElement>): void => {
+    setPreviewTurn(itemAtPointer(items, event.currentTarget, event.clientY)?.turn ?? null)
+  }
+  const navigateAtPointer = (event: MouseEvent<HTMLElement>): void => {
+    const item = itemAtPointer(items, event.currentTarget, event.clientY)
+    if (item !== undefined) onNavigate(item)
+  }
+  return (
+    <div className={css.slot}>
+      <nav
+        className={css.rail}
+        style={railSize(items.length)}
+        aria-label={t('chat.turnNavigation.label')}
+        onClick={navigateAtPointer}
+        onPointerMove={previewAtPointer}
+        onPointerLeave={() => { setPreviewTurn(null) }}
+      >
+        <div className={css.marks}>
+          {items.map((item, index) => {
+            const active = item.turn === activeTurn
+            const showingPreview = item.turn === previewTurn
+            const markClass = active
+              ? `${css.mark} ${css.markActive}`
+              : showingPreview ? `${css.mark} ${css.markPreview}` : css.mark
+            return (
+              <div key={item.turn} className={css.markPosition} style={itemPosition(index, items.length)}>
+                <button
+                  type="button"
+                  className={markClass}
+                  aria-label={t('chat.turnNavigation.jump', { turn: item.turn })}
+                  aria-current={active ? 'true' : undefined}
+                  aria-describedby={showingPreview ? previewId : undefined}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    onNavigate(item)
+                  }}
+                  onFocus={() => { setPreviewTurn(item.turn) }}
+                  onBlur={() => { setPreviewTurn(null) }}
+                />
+              </div>
+            )
+          })}
+        </div>
+        {preview !== undefined && previewPosition !== undefined && (
+          <div id={previewId} role="tooltip" className={css.preview} style={previewPosition}>
+            <div className={css.previewPrompt}>
+              {preview.prompt || t('chat.turnNavigation.turn', { turn: preview.turn })}
+            </div>
+            {preview.response !== '' && <div className={css.previewResponse}>{preview.response}</div>}
+          </div>
+        )}
+      </nav>
+    </div>
+  )
+}

packages/client/ui-chat/src/client/contract/snapshot.ts

@@ -18,6 +18,28 @@ export interface ChatNodeStore {
   values(): readonly ChatConversationViewNode[]
 }
 
+/** One loaded Turn projected into the compact Chat navigation rail. */
+export interface TurnNavigationItem {
+  readonly turn: number
+  /** Stable Conversation Context key the rail scrolls to. */
+  readonly anchorKey: string
+  /** Bounded prompt preview; empty when the loaded window starts mid-Turn. */
+  readonly prompt: string
+  /** Bounded assistant-response preview; empty until the Turn answers. */
+  readonly response: string
+}
+
+/** Stable live navigation projection of the loaded Turns. */
+export interface ChatTurnNavigationIndex {
+  /**
+   * Loaded Turns that have a visible anchor, in timeline order. The array
+   * identity changes exactly when a Turn enters, leaves, or changes preview,
+   * so a renderer can select it directly as its change signal.
+   * @returns current navigation items.
+   */
+  items(): readonly TurnNavigationItem[]
+}
+
 /** Stable live Location index for Chat nodes. */
 export interface ChatLocationNodeIndex {
   /** @param turn - owning turn. @returns ordered Chat Node keys in the turn. */
@@ -40,6 +62,7 @@ export interface ChatSnapshot {
   readonly order: readonly string[]
   readonly nodes: ChatNodeStore
   readonly locations: ChatLocationNodeIndex
+  readonly navigation: ChatTurnNavigationIndex
   readonly timeline: ConversationTimelineSnapshot
   readonly legacy: LegacyConversationSlice
 }
@@ -64,6 +87,9 @@ export const EMPTY_CHAT_SNAPSHOT: ChatSnapshot = {
     getTurn: () => EMPTY_LIST,
     getStep: () => EMPTY_LIST,
   },
+  navigation: {
+    items: () => EMPTY_LIST,
+  },
   timeline: EMPTY_TIMELINE,
   legacy: {
     nodes: EMPTY_LIST,

packages/client/ui-chat/src/client/conversation-nodes/chat-snapshot-builder.ts

@@ -6,13 +6,15 @@ import type {
 import type { ChatConversationViewNode, ChatNode } from '../contract/chat-nodes.ts'
 import { isRunningTool } from '../contract/chat-nodes.ts'
 import type {
-  ChatLocationNodeIndex, ChatNodeStore, ChatSnapshot, ConversationNode,
-  LegacyConversationSlice, PartialAssistant, RunningToolCall,
+  ChatLocationNodeIndex, ChatNodeStore, ChatSnapshot, ChatTurnNavigationIndex, ConversationNode,
+  LegacyConversationSlice, PartialAssistant, RunningToolCall, TurnNavigationItem,
 } from '../contract/snapshot.ts'
 import { sessionRecallLabels } from './event-projection.ts'
+import { sameTurnNavigationItem, turnNavigationItem } from './turn-navigation.ts'
 
 const EMPTY_KEYS: readonly string[] = []
 const EMPTY_TURNS: readonly number[] = []
+const EMPTY_ITEMS: readonly TurnNavigationItem[] = []
 const EMPTY_LIST: readonly never[] = []
 
 function sameReferences<T>(left: readonly T[], right: readonly T[]): boolean {
@@ -125,6 +127,61 @@ function updateIndex<Key>(
   return next
 }
 
+/**
+ * Loaded-Turn rail projection accumulated alongside the node store: a
+ * structural change re-derives the Turn set, a content-only upsert re-derives
+ * only the Turns whose nodes moved, and the published array keeps its identity
+ * until an item actually changes. Renderers therefore consume final Turn data
+ * instead of scanning the loaded window per frame.
+ */
+class MutableTurnNavigationIndex implements ChatTurnNavigationIndex {
+  private current: readonly TurnNavigationItem[] = EMPTY_ITEMS
+  private byTurn = new Map<number, TurnNavigationItem>()
+
+  items(): readonly TurnNavigationItem[] {
+    return this.current
+  }
+
+  /** Re-derive the whole Turn set; runs only when the loaded structure moves. */
+  rebuild(
+    timeline: ConversationTimelineSnapshot,
+    locations: ChatLocationNodeIndex,
+    nodes: ChatNodeStore,
+  ): void {
+    const next: TurnNavigationItem[] = []
+    const byTurn = new Map<number, TurnNavigationItem>()
+    for (const turn of timeline.turnOrder) {
+      const derived = turnNavigationItem(turn, locations, nodes)
+      if (derived === undefined) continue
+      const previous = this.byTurn.get(turn)
+      const item = previous !== undefined && sameTurnNavigationItem(previous, derived) ? previous : derived
+      next.push(item)
+      byTurn.set(turn, item)
+    }
+    this.byTurn = byTurn
+    const unchanged = next.length === this.current.length
+      && next.every((item, index) => item === this.current[index])
+    if (!unchanged) this.current = next
+  }
+
+  /** Re-derive only the Turns a content-only upsert touched. */
+  touch(
+    turns: ReadonlySet<number>,
+    locations: ChatLocationNodeIndex,
+    nodes: ChatNodeStore,
+  ): void {
+    if (turns.size === 0) return
+    const next = this.current.map((item) => {
+      if (!turns.has(item.turn)) return item
+      const derived = turnNavigationItem(item.turn, locations, nodes)
+      if (derived === undefined || sameTurnNavigationItem(item, derived)) return item
+      this.byTurn.set(item.turn, derived)
+      return derived
+    })
+    if (next.some((item, index) => item !== this.current[index])) this.current = next
+  }
+}
+
 function stepKey(turn: number, step: number): string {
   return `${turn}:${step}`
 }
@@ -481,9 +538,12 @@ function partialContributionChanged(
 export class ChatSnapshotBuilder implements ConversationViewBuilder<ChatConversationViewNode, ChatSnapshot> {
   private readonly store = new MutableChatNodeStore()
   private readonly locations = new MutableChatLocationIndex()
+  private readonly navigation = new MutableTurnNavigationIndex()
   private readonly legacy = new LegacySliceBuilder()
   private readonly referenceLabels = new ReferenceLabelProjector()
   private order: readonly string[] = EMPTY_KEYS
+  /** Last published timeline: a Turn boundary can land without a new node. */
+  private timeline: ConversationTimelineSnapshot | null = null
   readonly empty: ChatSnapshot
 
   constructor() {
@@ -498,6 +558,8 @@ export class ChatSnapshotBuilder implements ConversationViewBuilder<ChatConversa
     this.store.replace(nodes)
     this.order = orderedVisible(nodes).map(node => node.key)
     this.locations.rebuild(this.order, this.store)
+    this.navigation.rebuild(input.timeline, this.locations, this.store)
+    this.timeline = input.timeline
     return this.snapshot(input.timeline, this.legacy.replace(nodes, input.timeline))
   }
 
@@ -524,6 +586,12 @@ export class ChatSnapshotBuilder implements ConversationViewBuilder<ChatConversa
       this.locations.rebuild(this.order, this.store)
     }
     this.locations.touch(contentOnly)
+    if (structural || input.timeline !== this.timeline) {
+      this.navigation.rebuild(input.timeline, this.locations, this.store)
+    } else {
+      this.navigation.touch(turnsOf(contentOnly), this.locations, this.store)
+    }
+    this.timeline = input.timeline
     return this.snapshot(input.timeline, this.legacy.apply(upserts, input.timeline))
   }
 
@@ -535,12 +603,23 @@ export class ChatSnapshotBuilder implements ConversationViewBuilder<ChatConversa
       order: this.order,
       nodes: this.store,
       locations: this.locations,
+      navigation: this.navigation,
       timeline,
       legacy,
     }
   }
 }
 
+/** Turns owning the given nodes, for the content-only navigation update. */
+function turnsOf(nodes: readonly ChatConversationViewNode[]): ReadonlySet<number> {
+  const turns = new Set<number>()
+  for (const node of nodes) {
+    const turn = locationCoordinates(node.location).turn
+    if (turn !== undefined) turns.add(turn)
+  }
+  return turns
+}
+
 function locationIdentity(location: ConversationLocation): string {
   const coordinates = locationCoordinates(location)
   return `${location.kind}:${coordinates.turn ?? ''}:${coordinates.step ?? ''}`

packages/client/ui-chat/src/client/conversation-nodes/turn-navigation.ts

@@ -0,0 +1,71 @@
+import type { ChatNode } from '../contract/chat-nodes.ts'
+import type { ChatLocationNodeIndex, ChatNodeStore, TurnNavigationItem } from '../contract/snapshot.ts'
+
+/**
+ * Preview budget per field. The rail clamps two short lines, so anything past
+ * this is invisible; copying whole transcripts into navigation state would
+ * otherwise grow with the loaded window on every structural update.
+ */
+const PREVIEW_LIMIT = 160
+
+/** Join rendered text until the preview budget is met, then stop reading. */
+function preview(parts: Iterable<string>): string {
+  let text = ''
+  for (const part of parts) {
+    text += text === '' ? part : ` ${part}`
+    if (text.length >= PREVIEW_LIMIT) break
+  }
+  return text.replace(/\s+/g, ' ').trim().slice(0, PREVIEW_LIMIT)
+}
+
+function promptText(node: ChatNode): string {
+  if (node.kind !== 'user') return ''
+  return preview(node.data.content.flatMap(block => block.type === 'text' ? [block.text] : []))
+}
+
+function responseText(node: ChatNode): string {
+  if (node.kind !== 'assistant-step') return ''
+  return preview(node.data.blocks.flatMap(block => block.kind === 'text' ? [block.text] : []))
+}
+
+/**
+ * Whether two items carry the same rail state, so the reader can keep its array.
+ * @param left - previously published item, when the Turn had one.
+ * @param right - freshly derived item, when the Turn still has one.
+ * @returns whether both sides describe the same mark.
+ */
+export function sameTurnNavigationItem(
+  left: TurnNavigationItem | undefined,
+  right: TurnNavigationItem | undefined,
+): boolean {
+  if (left === undefined || right === undefined) return left === right
+  return left.turn === right.turn && left.anchorKey === right.anchorKey
+    && left.prompt === right.prompt && left.response === right.response
+}
+
+/**
+ * Project one loaded Turn into its rail item.
+ * @param turn - Turn number the item addresses.
+ * @param locations - live Location index supplying the Turn's node keys.
+ * @param nodes - live Chat node store.
+ * @returns the item, or undefined when the Turn has no visible loaded node.
+ */
+export function turnNavigationItem(
+  turn: number,
+  locations: ChatLocationNodeIndex,
+  nodes: ChatNodeStore,
+): TurnNavigationItem | undefined {
+  const loaded = locations.getTurn(turn)
+    .map(key => nodes.get(key))
+    .filter((node): node is ChatNode => node !== undefined && node.visibility === 'visible')
+  const user = loaded.find(node => node.kind === 'user')
+  const anchor = user ?? loaded[0]
+  if (anchor === undefined) return undefined
+  const response = loaded.findLast(node => responseText(node) !== '')
+  return {
+    turn,
+    anchorKey: anchor.key,
+    prompt: user === undefined ? '' : promptText(user),
+    response: response === undefined ? '' : responseText(response),
+  }
+}

packages/client/ui-chat/src/client/index.ts

@@ -14,10 +14,11 @@ export type {} from './conversation-nodes/turn-tail.ts'
 
 export type {
   AssistantBlock, AssistantMessageNode, AssistantProvenanceView, AssistantRequestConfig,
-  AssistantTiming, ChatLocationNodeIndex, ChatNodeStore, ChatSnapshot, CommandNode,
-  CompactionSummaryNode, ContextMessageNode, ConversationNode, LegacyConversationSlice,
-  ModelRetryNode, PartialAssistant, RunningToolCall, SteeringMessageNode, ToolCallBlock,
-  ToolResultNode, TurnErrorNode, TurnMaxTokensNode, UnknownSurfaceNode, UserMessageNode,
+  AssistantTiming, ChatLocationNodeIndex, ChatNodeStore, ChatSnapshot, ChatTurnNavigationIndex,
+  CommandNode, CompactionSummaryNode, ContextMessageNode, ConversationNode,
+  LegacyConversationSlice, ModelRetryNode, PartialAssistant, RunningToolCall,
+  SteeringMessageNode, ToolCallBlock, ToolResultNode, TurnErrorNode, TurnMaxTokensNode,
+  TurnNavigationItem, UnknownSurfaceNode, UserMessageNode,
 } from './contract/snapshot.ts'
 export type {
   AssistantChatData, ChatConversationViewNode, ChatNode, ChatNodeKind,

packages/client/ui-chat/src/client/locale.ts

@@ -29,6 +29,9 @@ export const zh = {
   'chat.loadOlder': '加载更早',
   'chat.toBottom': '回到底部',
   'chat.deepDiving': '深度求索中...',
+  'chat.turnNavigation.label': '轮次导航',
+  'chat.turnNavigation.jump': '跳转到第 {turn} 轮',
+  'chat.turnNavigation.turn': '第 {turn} 轮',
   'fileOpen.title': '无法打开文件',
   'fileOpen.unknown': '无法打开此文件',
   'fileOpen.folderTitle': '无法打开文件夹',
@@ -127,6 +130,9 @@ export const en = {
   'chat.loadOlder': 'Load earlier',
   'chat.toBottom': 'Back to bottom',
   'chat.deepDiving': 'Deep diving...',
+  'chat.turnNavigation.label': 'Turn navigation',
+  'chat.turnNavigation.jump': 'Jump to turn {turn}',
+  'chat.turnNavigation.turn': 'Turn {turn}',
   'fileOpen.title': 'Couldn’t open file',
   'fileOpen.unknown': 'Couldn’t open this file',
   'fileOpen.folderTitle': 'Couldn’t open folder',

packages/client/ui-chat/tests/chat-snapshot-fixture.client.ts

@@ -1,12 +1,15 @@
 import type {
   AssistantMessageNode, ChatConversationViewNode, ChatSnapshot, ConversationNode,
   ChatLocationNodeIndex, ChatNodeStore, CompactionSummaryNode, LegacyConversationSlice,
-  PartialAssistant, RunningToolCall, ToolCallBlock,
+  PartialAssistant, RunningToolCall, ToolCallBlock, TurnNavigationItem,
 } from '@deepseek-ai/dsh-client-ui-chat/client'
 import type {
   ConversationLocationDataStore, ConversationTurnDataMap, TurnLocation,
 } from '@deepseek-ai/dsh-client-ui-conversation/client'
 import { deriveTurnMetrics } from '../src/client/contract/turn-metrics.ts'
+import {
+  sameTurnNavigationItem, turnNavigationItem,
+} from '../src/client/conversation-nodes/turn-navigation.ts'
 
 const EMPTY: readonly never[] = []
 
@@ -290,10 +293,19 @@ export function chatSnapshotFixture(input: {
     && previous.legacy.turnEnds === legacy.turnEnds
     ? previous.timeline
     : { turnOrder: [...turns.keys()], turns }
+  const derived = timeline.turnOrder
+    .map(turn => turnNavigationItem(turn, locations, store))
+    .filter((item): item is TurnNavigationItem => item !== undefined)
+  const kept = previous?.navigation.items() ?? []
+  const items = kept.length === derived.length
+    && derived.every((item, index) => sameTurnNavigationItem(kept[index], item))
+    ? kept
+    : derived
   return {
     order,
     nodes: store,
     locations,
+    navigation: { items: () => items },
     timeline,
     legacy,
   }

packages/client/ui-chat/tests/chat-view.client.spec.tsx

@@ -114,6 +114,12 @@ const user = (seq: number, text: string): UserMessageNode => ({
   content: [{ type: 'text', text }] as never,
   source: null,
 })
+const userInTurn = (seq: number, text: string, turn: number): ConversationNode => ({
+  ...user(seq, text),
+  // The production Location index owns this association. The legacy fixture
+  // accepts the extra coordinate so component tests can build the same view.
+  turn,
+} as unknown as ConversationNode)
 const assistant = (seq: number, text: string, turn = 1): AssistantMessageNode => ({
   kind: 'assistant', seq, time: seq * 1_000, turn, step: 1, blocks: [{ kind: 'text', text }],
 })
@@ -406,6 +412,68 @@ describe('Chat node rendering', () => {
 })
 
 describe('ChatView', () => {
+  it('projects loaded turns into prompt and response navigation previews', () => {
+    const snapshot = chatSnapshotFixture({
+      nodes: [
+        userInTurn(1, 'first prompt', 1),
+        assistant(2, 'first response', 1),
+        userInTurn(4, 'second prompt', 2),
+        assistant(5, 'second response', 2),
+      ],
+      turnEnds: new Map([[1, 3], [2, 6]]),
+    })
+    expect(snapshot.navigation.items()).toEqual([
+      { turn: 1, anchorKey: 'fixture:user:1', prompt: 'first prompt', response: 'first response' },
+      { turn: 2, anchorKey: 'fixture:user:4', prompt: 'second prompt', response: 'second response' },
+    ])
+    const h = makeHarness({}, {}, snapshot)
+    const view = render(<h.ChatView {...h.props} />)
+    const navigation = view.getByRole('navigation', { name: '轮次导航' })
+    expect(navigation.style.getPropertyValue('--turn-natural-height')).toBe('22px')
+    const first = view.getByRole('button', { name: '跳转到第 1 轮' })
+    const second = view.getByRole('button', { name: '跳转到第 2 轮' })
+    expect(first.parentElement?.style.getPropertyValue('--turn-natural-position')).toBe('0px')
+    expect(second.parentElement?.style.getPropertyValue('--turn-natural-position')).toBe('10px')
+    expect(second.getAttribute('aria-current')).toBe('true')
+    fireEvent.focus(first)
+    const preview = view.getByRole('tooltip')
+    expect(preview.textContent).toContain('first prompt')
+    expect(preview.textContent).toContain('first response')
+  })
+
+  it('jumps to a turn anchor and reflows stable marks after an older page arrives', () => {
+    const later = [
+      userInTurn(4, 'second prompt', 2), assistant(5, 'second response', 2),
+      userInTurn(7, 'third prompt', 3), assistant(8, 'third response', 3),
+    ]
+    const h = makeHarness({ nodes: later }, { hasMore: true })
+    const view = render(<h.ChatView {...h.props} />)
+    const second = view.getByRole('button', { name: '跳转到第 2 轮' })
+    const secondPosition = second.parentElement as HTMLElement
+    expect(secondPosition.style.getPropertyValue('--turn-position')).toBe('0%')
+
+    const scroller = view.container.querySelector('[class*="scroll"]') as HTMLDivElement
+    const metrics = installScrollMetrics(scroller, 1_000, 300)
+    metrics.setLayout(1_000, 700)
+    vi.spyOn(scroller, 'getBoundingClientRect').mockReturnValue({ top: 0, bottom: 300 } as DOMRect)
+    const secondRow = view.container.querySelector('[data-chat-flow-key="fixture:user:4"]') as HTMLElement
+    vi.spyOn(secondRow, 'getBoundingClientRect').mockReturnValue({ top: -500, bottom: -440 } as DOMRect)
+    fireEvent.click(second)
+    expect(scroller.scrollTop).toBe(176)
+    expect(second.getAttribute('aria-current')).toBe('true')
+
+    act(() => {
+      h.setChat({
+        nodes: [userInTurn(1, 'first prompt', 1), assistant(2, 'first response', 1), ...later],
+        turnTimings: new Map([[1, { startTime: 1_000 }], [2, { startTime: 4_000 }], [3, { startTime: 7_000 }]]),
+      })
+    })
+    const movedSecond = view.getByRole('button', { name: '跳转到第 2 轮' })
+    expect(movedSecond.parentElement).toBe(secondPosition)
+    expect(secondPosition.style.getPropertyValue('--turn-natural-position')).toBe('10px')
+    expect(secondPosition.style.getPropertyValue('--turn-position')).toBe('50%')
+  })
+
   it('hands a windowless tool result to the Tool seat with an empty tool name', () => {
     const h = makeHarness({
       nodes: [{ ...toolResult(3, 'w1'), call: null }],

packages/client/ui-chat/tests/conversation-node-definitions.client.spec.ts

@@ -181,6 +181,46 @@ describe('built-in conversation node Definitions', () => {
     expect(chatViewDefinition.isActive?.(current)).toBe(false)
   })
 
+  it('keeps the Turn rail projection current when a chunk updates one node in place', () => {
+    const value = assembler([
+      at(1, 'turn/start', { turn: 1 }),
+      at(2, 'user/message', textMessage('user-1', 'navigate here'), { surfaceOp: 'append' }),
+      at(3, 'step/start', { turn: 1, step: 1 }),
+      at(4, 'assistant/chunk', {
+        turn: 1,
+        step: 1,
+        chunk: { type: 'text-delta', index: 0, text: 'first' },
+      }),
+    ])
+    const opening = snapshot(value).navigation.items()
+    expect(opening).toHaveLength(1)
+    expect(opening[0]?.turn).toBe(1)
+    expect(opening[0]?.prompt).toBe('navigate here')
+    expect(opening[0]?.response).toBe('first')
+
+    // Content-only upsert: the node keeps its key, so the rail's preview has to
+    // follow the in-place update rather than the last structural publication.
+    value.append(at(5, 'assistant/chunk', {
+      turn: 1,
+      step: 1,
+      chunk: { type: 'text-delta', index: 0, text: ' and more' },
+    }))
+    value.flush()
+    const streamed = snapshot(value).navigation.items()
+    expect(streamed[0]?.response).toBe('first and more')
+    expect(streamed).not.toBe(opening)
+  })
+
+  it('bounds each rail preview instead of copying the whole transcript', () => {
+    const long = 'x'.repeat(400)
+    const value = assembler([
+      at(1, 'turn/start', { turn: 1 }),
+      at(2, 'user/message', textMessage('user-1', long), { surfaceOp: 'append' }),
+    ])
+    const items = snapshot(value).navigation.items()
+    expect(items[0]?.prompt.length).toBe(160)
+  })
+
   it('keeps one keyed Assistant node while streaming settles and materializes interruption from Location', () => {
     const value = assembler([
       at(1, 'turn/start', { turn: 1 }),

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx

@@ -153,10 +153,13 @@ export function ConversationRoot({
   const [pendingWorkspaceId, setPendingWorkspaceId] = useState<WorkspaceId | undefined>()
   const pickerAnchor = useRef<HTMLButtonElement>(null)
 
-  // Publishes the seat's live height as --dsh-composer-height on the scroll
-  // body so floating View controls clear the composer as
-  // it grows. Callback ref, not an effect; stable identity prevents observer
-  // churn while the first blank session fills the resident body outlet.
+  // Publishes the two live measurements floating View chrome reads off the
+  // scroll body: the seat's height as --dsh-composer-height, so controls clear
+  // the composer as it grows, and the scrollport's own height as
+  // --dsh-conversation-viewport-height, so a control can sit in the band the
+  // seat leaves visible. Callback ref, not an effect; stable identity prevents
+  // observer churn while the first blank session fills the resident body
+  // outlet.
   const seatObserver = useRef<ResizeObserver | null>(null)
   const seatResizeRef = useCallback((seat: HTMLDivElement | null): void => {
     seatObserver.current?.disconnect()
@@ -165,8 +168,13 @@ export function ConversationRoot({
     if (seat === null || scroller === null) return
     seatObserver.current = new ResizeObserver(() => {
       scroller.style.setProperty('--dsh-composer-height', `${seat.offsetHeight}px`)
+      scroller.style.setProperty(
+        '--dsh-conversation-viewport-height',
+        `${scroller.clientHeight}px`,
+      )
     })
     seatObserver.current.observe(seat)
+    seatObserver.current.observe(scroller)
   }, [])
 
   // Publishes the column's live width as --dsh-conversation-column-width so

packages/client/ui-tool/tests/tool-details-render.client.tsx

@@ -56,6 +56,7 @@ export function toolChatSnapshot(
       getTurn: () => empty,
       getStep: () => empty,
     },
+    navigation: { items: () => [] },
     timeline: { turnOrder: [], turns: new Map() },
     legacy: {
       nodes: settled,

packages/client/ui-user-questions/tests/plan-review-panel.client.spec.tsx

@@ -66,6 +66,7 @@ const chatState: ChatState = {
   order: emptyKeys,
   nodes: { get: () => undefined, values: () => [] },
   locations: { getTurn: () => emptyKeys, getStep: () => emptyKeys },
+  navigation: { items: () => [] },
   timeline: { turnOrder: [], turns: new Map() },
   legacy: {
     nodes: [],

packages/client/ui-user-questions/tests/user-questions-composer.client.spec.tsx

@@ -64,6 +64,7 @@ const chatState: ChatState = {
   order: emptyKeys,
   nodes: { get: () => undefined, values: () => [] },
   locations: { getTurn: () => emptyKeys, getStep: () => emptyKeys },
+  navigation: { items: () => [] },
   timeline: { turnOrder: [], turns: new Map() },
   legacy: {
     nodes: [],

snapshots/web/cordis-tool-round/ui.expected.md

@@ -9,6 +9,10 @@
   - tablist:
     - tab "Chat" [selected]
     - tab "Trajectory"
+- navigation "Turn navigation":
+  - button "Jump to turn 1"
+  - button "Jump to turn 2"
+  - button "Jump to turn 3"
 - button "System prompt":
   - img
   - img

snapshots/web/goal-multi-turn-actions/ui.expected.md

@@ -9,6 +9,9 @@
   - tablist:
     - tab "Chat" [selected]
     - tab "Trajectory"
+- navigation "Turn navigation":
+  - button "Jump to turn 1"
+  - button "Jump to turn 2"
 - group "Command input": /goal 做两个turn，每个turn输出随机一个包的文件结构。注意你做完一个turn之后，直接输出内容，停止，我们的系统会帮你再开一个turn，你看着做一个类似的
 - 'button "goal Goal created Status: active Objective: 做两个turn，每个turn输出随机一个包的文件结构。注意你做完一个turn之后，直接输出内容，停止，我们的系统会帮你再开一个turn，你看着做一个类似的 Rounds: 0/256 Activation: armed Commands: /goal edit <objective>, /goal pause, /goal clear"':
   - img

snapshots/web/message-actions/ui.expected.md

@@ -7,6 +7,9 @@
   - tablist:
     - tab "Chat" [selected]
     - tab "Trajectory"
+- navigation "Turn navigation":
+  - button "Jump to turn 1"
+  - button "Jump to turn 2"
 - button "System prompt":
   - img
   - img

snapshots/web/seeded-history/command-row.expected.md

@@ -7,6 +7,9 @@
   - tablist:
     - tab "Chat" [selected]
     - tab "Trajectory"
+- navigation "Turn navigation":
+  - button "Jump to turn 1"
+  - button "Jump to turn 2"
 - button "System prompt":
   - img
   - img

snapshots/web/seeded-history/feedback-row.expected.md

@@ -7,6 +7,9 @@
   - tablist:
     - tab "Chat" [selected]
     - tab "Trajectory"
+- navigation "Turn navigation":
+  - button "Jump to turn 1"
+  - button "Jump to turn 2"
 - button "System prompt":
   - img
   - img

snapshots/web/seeded-history/ui.expected.md

@@ -7,6 +7,9 @@
   - tablist:
     - tab "Chat" [selected]
     - tab "Trajectory"
+- navigation "Turn navigation":
+  - button "Jump to turn 1"
+  - button "Jump to turn 2"
 - button "System prompt":
   - img
   - img

snapshots/web/subagent-conversation/ui.expected.md

@@ -14,6 +14,9 @@
   - tablist:
     - tab "Chat" [selected]
     - tab "Trajectory"
+- navigation "Turn navigation":
+  - button "Jump to turn 1"
+  - button "Jump to turn 2"
 - button "System prompt":
   - img
   - img