@prettier-ai/dsh-client-ui-chat 0.1.2-alpha.2 → 0.1.2-alpha.3

package/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: 5c7549da07e8101c6b08b4cad57afd5158980b7f
-README.zh.md: a558bf94f5436eebdf035ca7507ecd25ec3c8d8a
+README.md: 756b09ee1bc1f849d507bc06faad6d5365f0b851
+README.zh.md: 6e6278c5fe3f7a31c4e7f4485aa6ebe0dcf95f60

package/README.md

@@ -8,13 +8,14 @@ English | [中文](README.zh.md)
 
 ## Summary
 
-The browser Chat target for Conversation assembly. It registers Chat event definitions and snapshot construction, supplies `useChat`, renders transcript nodes and details, and owns Chat-specific stores, actions, localization, and scroll restoration; historical image URLs resolve through the Conversation-owned per-session cache (`ctx.uiConversation.imageUrl`). Its Assistant and Turn Tail definitions fold packed historical Assistant runs without expanding their members. The flow tail renders the session's local submission echoes (`SessionSnapshot.pendingSubmissions`) with the same bubble as their eventual durable user nodes, hidden per render once a user/steering node or queue occurrence carries the echo's prompt `rpcId`, so the echo-to-durable swap is atomic.
+The browser Chat target for Conversation assembly. It registers Chat event definitions and snapshot construction, supplies `useChat`, renders transcript nodes and details, and owns Chat-specific stores, actions, localization, and scroll restoration; historical image URLs resolve through the Conversation-owned per-session cache (`ctx.uiConversation.imageUrl`). Its Assistant and Turn Tail definitions fold packed historical Assistant runs without expanding their members. Steering classification retains only next-step Inbox IDs through persistent splice state; next-turn splices create no Chat Context. Local submission echoes (`SessionSnapshot.pendingSubmissions`) retain the surface selected when the submit begins: transcript echoes render at the flow tail, steering echoes render with the pending-steering marker, and queued echoes stay out of Chat. Each echo is hidden per render once a user/steering node or queue occurrence carries its prompt `rpcId`, so the handoff is atomic.
 
 ## Table of Contents
 
 - [System prompt row](#system-prompt-row)
 - [Turn token usage](#turn-token-usage)
 - [Turn Process Folding](#turn-process-folding)
+- [Scroll ownership](#scroll-ownership)
 - [Model Experience](#model-experience)
 - [Known Limitations and Deferred Work](#known-limitations-and-deferred-work)
 - [Dev Note](#dev-note)
@@ -42,6 +43,13 @@ Settings → General exposes a persisted `Normal` / `Compact` conversation-displ
 
 -----
 
+<a id="scroll-ownership"></a>
+## Scroll ownership
+
+Chat restores semantic anchors across history prepend and renderer remounts. While the reader is pinned to the floor, `ResizeObserver` follows the new floor and selects the latest loaded Turn without reading row geometry. Once the reader moves away, flow-height changes preserve the top position and the reading-line geometry selects the active Turn ([loaded-Turn navigation](../../../.agents/notes/implemented/feature/2026-08-25-loaded-turn-chat-navigation.md)).
+
+-----
+
 <a id="model-experience"></a>
 ## Model Experience
 
@@ -55,7 +63,8 @@ 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. 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.
+- **The transcript reflects the loaded Session window** — older transcript nodes become available only after Session Controller loads the preceding event page. Turn navigation is wider than the window: the rail merges the loaded Turns with the host `turnOutline` projection, so every started Turn gets a fixed-pitch mark (10px apart; a ladder taller than the frame scrolls inside it with gradient fades), and activating an unloaded mark pages history through the Turn's `turn/start` seq before landing on its row. Without the projection (assemblies not mounting `dsh-session-turn-outline`) the rail falls back to loaded Turns only.
+- **Rail previews are card-sized** — one prompt line (50 characters) and up to three response lines (120), on loaded and unloaded Turns alike; an unloaded Turn's response arrives from the outline only once the Turn settled, so an open Turn previews its prompt (or just the Turn number) until then.
 
 
 <a id="dev-note"></a>

package/README.zh.md

@@ -8,13 +8,14 @@ kind: "package-reference"
 
 ## 概述
 
-Conversation 组装的浏览器 Chat target。本包注册 Chat event definition 与 snapshot 构造、提供 `useChat`、渲染 transcript node 和详情，并拥有 Chat 专属 store、action、本地化与滚动位置恢复；历史图片 URL 通过 Conversation 持有的按会话缓存（`ctx.uiConversation.imageUrl`）解析。其中 Assistant 与 Turn Tail definition 会直接 fold packed Assistant 历史 run，不展开其成员。消息流尾部渲染 session 的本地提交回显（`SessionSnapshot.pendingSubmissions`），气泡与其最终的 durable user 节点一致；一旦某个 user/steering 节点或 queue occurrence 携带回显的 prompt `rpcId`，该回显即在同一渲染中隐藏，因此回显到 durable 的替换是原子的。
+Conversation 组装的浏览器 Chat target。本包注册 Chat event definition 与 snapshot 构造、提供 `useChat`、渲染 transcript node 和详情，并拥有 Chat 专属 store、action、本地化与滚动位置恢复；历史图片 URL 通过 Conversation 持有的按会话缓存（`ctx.uiConversation.imageUrl`）解析。其中 Assistant 与 Turn Tail definition 会直接 fold packed Assistant 历史 run，不展开其成员。steering 分类通过持久 splice state 只保留 next-step Inbox ID；next-turn splice 不创建 Chat Context。本地提交回显（`SessionSnapshot.pendingSubmissions`）保留提交开始时选定的区域：transcript 回显位于消息流末尾，steering 回显带 pending-steering 标记，queued 回显不进入 Chat。一旦 user/steering 节点或 queue occurrence 携带回显的 prompt `rpcId`，该回显即在同一渲染中隐藏，因此交接是原子的。
 
 ## 目录
 
 - [系统提示词行](#system-prompt-row)
 - [轮次 token 用量](#turn-token-usage)
 - [轮次过程折叠](#turn-process-folding)
+- [滚动归属](#scroll-ownership)
 - [模型体验](#model-experience)
 - [已知限制与暂缓事项](#known-limitations-and-deferred-work)
 - [开发备注](#dev-note)
@@ -42,6 +43,13 @@ Chat 会为每个非空的初始或恢复请求、显式消息序列起点或真
 
 -----
 
+<a id="scroll-ownership"></a>
+## 滚动归属
+
+Chat 会在历史前插与 renderer 重新挂载时恢复语义锚点。读者跟随底部时，`ResizeObserver` 追随新的底部，并且无需读取行几何就选中最后一个已加载 Turn；读者离开底部后，高度变化会保持顶部位置，再由阅读线几何选择活跃 Turn（[已加载 Turn 导航](../../../.agents/notes/implemented/feature/2026-08-25-loaded-turn-chat-navigation.zh.md)）。
+
+-----
+
 <a id="model-experience"></a>
 ## 模型体验
 
@@ -55,7 +63,8 @@ Chat 会为每个非空的初始或恢复请求、显式消息序列起点或真
 
 <a id="known-limitations-and-deferred-work"></a>
 
-- **视图只反映已加载的 Session 窗口**——只有 Session Controller 加载前一页 event 后，更早的 transcript node 才会出现。轮次导航同样只表示已加载的 Turn；加载更早一页时，已有 Turn 刻度保持身份不变，完整的已加载集合在紧凑轨道中重新排布，不显示未加载历史占位。刻度默认相隔 10px，仅在已加载集合超过可用高度时压缩间距。
+- **transcript 只反映已加载的 Session 窗口**——只有 Session Controller 加载前一页 event 后，更早的 transcript node 才会出现。轮次导航比窗口更宽：轨道把已加载的 Turn 与宿主 `turnOutline` 投影合并，每个已开始的 Turn 都有固定间距刻度（相隔 10px；阶梯高于外框时在框内滚动并以渐变淡出标示可滚方向），激活未加载刻度会先把历史分页拉到该 Turn 的 `turn/start` seq 再落到它的行上。没有该投影时（未挂载 `dsh-session-turn-outline` 的装配），轨道回退到仅显示已加载 Turn。
+- **导航预览按卡片尺寸截断**——提示词一行（50 字符）、回复至多三行（120 字符），已加载与未加载 Turn 一致；未加载 Turn 的回复要等该轮落定后才随大纲到达，进行中的轮次在此之前只预览提示词（或仅轮次号）。
 
 
 <a id="dev-note"></a>

package/lib/client.js

@@ -1223,10 +1223,10 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/**
-		* Render one local submission echo with the exact visual language of the
-		* durable user node that replaces it: draft text plus object-URL previews,
-		* visible from the submit click until the durable `user/message` (or its
-		* queue occurrence) renders.
+		* Render one local transcript or steering submission echo with the same
+		* visual language and surface marker as the Host occurrence that replaces
+		* it: draft text plus object-URL previews, visible from the submit click
+		* until the durable `user/message` or steering occurrence renders.
 		* @param props - the session snapshot's pending submission and render seats.
 		* @returns the echoed user bubble.
 		*/
@@ -1243,6 +1243,7 @@ window.__ModuleLoader__.load({
 					...image.height === void 0 ? {} : { height: image.height }
 				} })), [submission.images]),
 				renderMessageImages,
+				pending: submission.placement === "steering",
 				echo: true,
 				t,
 				actions: (text) => (0, react_jsx_runtime.jsx)(MessageIconActions, {
@@ -1627,7 +1628,7 @@ window.__ModuleLoader__.load({
 		});
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/dsh-publisher/dsh-publisher/upstream/packages/client/ui-chat/src/client/chat/TurnNavigator.module.css.mjs
-		const css$10 = ".alqd3G_slot{z-index:6;pointer-events:none;height:0;position:sticky;top:0}.alqd3G_rail{--turn-rail-band:calc(var(--dsh-conversation-viewport-height,100dvh) - var(--dsh-composer-height,152px));--turn-preview-height:100px;top:calc(var(--turn-rail-band) / 2);right:calc(12px - (var(--dsh-composer-side-clearance) + 16px));width:28px;height:min(var(--turn-natural-height), max(0px, calc(var(--turn-rail-band) - 64px)), 420px);cursor:pointer;pointer-events:auto;transition:height .22s cubic-bezier(.2,.8,.2,1);position:absolute;transform:translateY(-50%)}.alqd3G_marks{inset:var(--turn-rail-inset) 0;position:absolute}.alqd3G_markPosition{top:min(var(--turn-natural-position), var(--turn-position));height:10px;transition:top .22s cubic-bezier(.2,.8,.2,1);animation:.15s ease-out alqd3G_dsh-turn-mark-enter;position:absolute;left:0;right:0;transform:translateY(-50%)}.alqd3G_mark{cursor:pointer;pointer-events:none;background:0 0;border:0;border-radius:8px;width:20px;padding:0;position:absolute;inset:0 0 0 auto}.alqd3G_mark:before{background:var(--dsw-alias-border-l4);content:\"\";border-radius:2px;width:12px;height:2px;transition:width .14s,background-color .14s;position:absolute;top:50%;right:0;transform:translateY(-50%)}.alqd3G_markPreview:before{background:var(--dsw-alias-label-tertiary);width:18px}.alqd3G_markActive:before{background:var(--dsw-alias-label-primary);width:20px}.alqd3G_mark:focus-visible:before{background:var(--dsw-alias-state-business-primary);width:20px}.alqd3G_mark:focus-visible{outline:1px solid var(--dsw-alias-state-business-primary);outline-offset:2px}.alqd3G_preview{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)));box-sizing:border-box;width:min(300px,100cqw - 120px);max-height:var(--turn-preview-height);border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-shadow-lv2);pointer-events:none;border-radius:10px;padding:10px 12px;transition:top .14s cubic-bezier(.2,.8,.2,1);animation:.12s ease-out alqd3G_dsh-turn-preview-enter;position:absolute;right:calc(100% + 10px);overflow:hidden}.alqd3G_previewPrompt,.alqd3G_previewResponse{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.alqd3G_previewPrompt{font:var(--dsw-font-xs-strong-13);-webkit-line-clamp:2}.alqd3G_previewResponse{color:var(--dsw-alias-label-caption);font:var(--dsw-font-xxs-12);-webkit-line-clamp:2;margin-top:4px}@keyframes alqd3G_dsh-turn-mark-enter{0%{opacity:0}to{opacity:1}}@keyframes alqd3G_dsh-turn-preview-enter{0%{opacity:0;transform:translate(4px)}to{opacity:1;transform:translate(0)}}@container (width<=900px){.alqd3G_slot{display:none}}@media (prefers-reduced-motion:reduce){.alqd3G_rail,.alqd3G_markPosition,.alqd3G_mark:before,.alqd3G_preview{transition:none;animation:none}}";
+		const css$10 = ".alqd3G_slot{z-index:6;pointer-events:none;height:0;position:sticky;top:0}.alqd3G_frame{--turn-rail-band:calc(var(--dsh-conversation-viewport-height,100dvh) - var(--dsh-composer-height,152px));--turn-preview-height:100px;top:calc(var(--turn-rail-band) / 2);right:calc(12px - (var(--dsh-composer-side-clearance) + 16px));width:28px;height:min(var(--turn-natural-height), max(0px, calc(var(--turn-rail-band) - 64px)), 420px);cursor:pointer;pointer-events:auto;transition:height .22s cubic-bezier(.2,.8,.2,1);position:absolute;transform:translateY(-50%)}.alqd3G_scroller{overscroll-behavior:contain;scrollbar-width:none;position:absolute;inset:0;overflow-y:auto}.alqd3G_scroller::-webkit-scrollbar{display:none}.alqd3G_fadeTop{mask-image:linear-gradient(#0000 0,#000 24px 100%)}.alqd3G_fadeBottom{mask-image:linear-gradient(#000 0 calc(100% - 24px),#0000 100%)}.alqd3G_fadeTop.alqd3G_fadeBottom{mask-image:linear-gradient(#0000 0,#000 24px calc(100% - 24px),#0000 100%)}.alqd3G_marks{height:var(--turn-natural-height);position:relative}.alqd3G_markPosition{top:calc(var(--turn-natural-position) + var(--turn-rail-inset));height:10px;transition:top .22s cubic-bezier(.2,.8,.2,1);animation:.15s ease-out alqd3G_dsh-turn-mark-enter;position:absolute;left:0;right:0;transform:translateY(-50%)}.alqd3G_mark{cursor:pointer;pointer-events:none;background:0 0;border:0;border-radius:8px;width:20px;padding:0;position:absolute;inset:0 0 0 auto}.alqd3G_mark:before{background:var(--dsw-alias-border-l4);content:\"\";border-radius:2px;width:12px;height:2px;transition:width .14s,background-color .14s;position:absolute;top:50%;right:0;transform:translateY(-50%)}.alqd3G_markUnloaded:before{opacity:.6;width:8px}.alqd3G_markPreview:before{background:var(--dsw-alias-label-tertiary);width:18px}.alqd3G_markBusy:before{animation:1s ease-in-out infinite alqd3G_dsh-turn-mark-busy}.alqd3G_markActive:before{background:var(--dsw-alias-label-primary);width:20px}.alqd3G_mark:focus-visible:before{background:var(--dsw-alias-state-business-primary);width:20px}.alqd3G_mark:focus-visible{outline:1px solid var(--dsw-alias-state-business-primary);outline-offset:2px}.alqd3G_preview{top:clamp(0px, calc(var(--turn-natural-position) + var(--turn-rail-inset) - var(--turn-scroll-top,0px) - var(--turn-preview-height) / 2), calc(100% - var(--turn-preview-height)));box-sizing:border-box;width:min(300px,100cqw - 120px);max-height:var(--turn-preview-height);border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-1);box-shadow:var(--dsw-shadow-lv2);pointer-events:none;border-radius:10px;padding:10px 12px;transition:top .14s cubic-bezier(.2,.8,.2,1);animation:.12s ease-out alqd3G_dsh-turn-preview-enter;position:absolute;right:calc(100% + 10px);overflow:hidden}.alqd3G_previewPrompt,.alqd3G_previewResponse{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.alqd3G_previewPrompt{font:var(--dsw-font-xs-strong-13);-webkit-line-clamp:1}.alqd3G_previewResponse{color:var(--dsw-alias-label-caption);font:var(--dsw-font-xxs-12);-webkit-line-clamp:3;margin-top:4px}@keyframes alqd3G_dsh-turn-mark-enter{0%{opacity:0}to{opacity:1}}@keyframes alqd3G_dsh-turn-preview-enter{0%{opacity:0;transform:translate(4px)}to{opacity:1;transform:translate(0)}}@keyframes alqd3G_dsh-turn-mark-busy{0%,to{opacity:1}50%{opacity:.35}}@container (width<=900px){.alqd3G_slot{display:none}}@media (prefers-reduced-motion:reduce){.alqd3G_frame,.alqd3G_scroller,.alqd3G_markPosition,.alqd3G_mark:before,.alqd3G_markBusy:before,.alqd3G_preview{scroll-behavior:auto;transition:none;animation:none}}";
 		const tagId$10 = "@prettier-ai/dsh-client-ui-chat/TurnNavigator.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$10) + "]") === null) {
 			const tag = document.createElement("style");
@@ -1637,96 +1638,173 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var TurnNavigator_module_css_default = {
+			"dsh-turn-mark-busy": "alqd3G_dsh-turn-mark-busy",
 			"dsh-turn-mark-enter": "alqd3G_dsh-turn-mark-enter",
 			"dsh-turn-preview-enter": "alqd3G_dsh-turn-preview-enter",
+			"fadeBottom": "alqd3G_fadeBottom",
+			"fadeTop": "alqd3G_fadeTop",
+			"frame": "alqd3G_frame",
 			"mark": "alqd3G_mark",
 			"markActive": "alqd3G_markActive",
+			"markBusy": "alqd3G_markBusy",
 			"markPosition": "alqd3G_markPosition",
 			"markPreview": "alqd3G_markPreview",
+			"markUnloaded": "alqd3G_markUnloaded",
 			"marks": "alqd3G_marks",
 			"preview": "alqd3G_preview",
 			"previewPrompt": "alqd3G_previewPrompt",
 			"previewResponse": "alqd3G_previewResponse",
-			"rail": "alqd3G_rail",
+			"scroller": "alqd3G_scroller",
 			"slot": "alqd3G_slot"
 		};
 		//#endregion
 		//#region lib/types/client/chat/TurnNavigator.js
-		/** Resting gap between neighbouring marks before the rail compresses to fit. */
+		/** Fixed pitch between neighbouring marks; overflow scrolls inside the frame. */
 		const TURN_SPACING_PX = 10;
 		/** Rail padding above the first mark and below the last one, per end. */
 		const RAIL_INSET_PX = 6;
-		function itemPosition(index, count) {
-			const ratio = count <= 1 ? 0 : index / (count - 1);
+		/** Fade band the mask reserves at a scrollable end. */
+		const FADE_PX = 24;
+		function itemPosition(index) {
+			return { "--turn-natural-position": `${String(index * TURN_SPACING_PX)}px` };
+		}
+		function frameStyle(count, scrollTop) {
 			return {
-				"--turn-natural-position": `${String(index * TURN_SPACING_PX)}px`,
-				"--turn-position": `${String(ratio * 100)}%`
+				"--turn-natural-height": `${String((count - 1) * TURN_SPACING_PX + 2 * RAIL_INSET_PX)}px`,
+				"--turn-rail-inset": `${String(RAIL_INSET_PX)}px`,
+				"--turn-scroll-top": `${String(scrollTop)}px`
 			};
 		}
-		function railSize(count) {
+		function itemAtPointer(items, frame, scrollTop, clientY) {
+			const offset = clientY - frame.getBoundingClientRect().top + scrollTop - RAIL_INSET_PX;
+			return items[Math.max(0, Math.min(items.length - 1, Math.round(offset / TURN_SPACING_PX)))];
+		}
+		const RAIL_AT_REST = {
+			top: 0,
+			canScrollUp: false,
+			canScrollDown: false
+		};
+		function railScrollState(scroller) {
+			const top = scroller.scrollTop;
 			return {
-				"--turn-natural-height": `${String((count - 1) * TURN_SPACING_PX + 2 * RAIL_INSET_PX)}px`,
-				"--turn-rail-inset": `${String(RAIL_INSET_PX)}px`
+				top,
+				canScrollUp: top > 1,
+				canScrollDown: top < scroller.scrollHeight - scroller.clientHeight - 1
 			};
 		}
-		function itemAtPointer(items, rail, clientY) {
-			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))];
+		function sameRailScrollState(left, right) {
+			return left.top === right.top && left.canScrollUp === right.canScrollUp && left.canScrollDown === right.canScrollDown;
 		}
-		function TurnNavigatorRail({ items, activeTurn, onNavigate, t }) {
+		function TurnNavigatorRail({ items, activeTurn, busyTurn, onNavigate, t }) {
 			const [previewTurn, setPreviewTurn] = (0, react.useState)(null);
+			const [scrollState, setScrollState] = (0, react.useState)(RAIL_AT_REST);
+			const scrollerRef = (0, react.useRef)(null);
+			/** While the pointer works the rail, follow must not move it under the hand. */
+			const pointerInsideRef = (0, react.useRef)(false);
 			const previewId = (0, react.useId)();
+			const syncScrollState = () => {
+				const scroller = scrollerRef.current;
+				if (scroller === null) return;
+				const next = railScrollState(scroller);
+				setScrollState((current) => sameRailScrollState(current, next) ? current : next);
+			};
+			(0, react.useEffect)(() => {
+				const scroller = scrollerRef.current;
+				if (scroller === null || typeof ResizeObserver === "undefined") return;
+				const observer = new ResizeObserver(syncScrollState);
+				observer.observe(scroller);
+				return () => {
+					observer.disconnect();
+				};
+			}, []);
+			(0, react.useEffect)(syncScrollState, [items.length]);
+			(0, react.useEffect)(() => {
+				const scroller = scrollerRef.current;
+				const index = items.findIndex((item) => item.turn === activeTurn);
+				if (scroller === null || index < 0 || pointerInsideRef.current) return;
+				const markTop = index * TURN_SPACING_PX + RAIL_INSET_PX;
+				const viewTop = scroller.scrollTop;
+				const viewHeight = scroller.clientHeight;
+				if (viewHeight <= 0 || markTop >= viewTop + FADE_PX && markTop <= viewTop + viewHeight - FADE_PX) return;
+				const target = Math.max(0, markTop - viewHeight / 2);
+				const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+				if (typeof scroller.scrollTo === "function") scroller.scrollTo({
+					top: target,
+					behavior: reduced ? "auto" : "smooth"
+				});
+				else scroller.scrollTop = target;
+				syncScrollState();
+			}, [activeTurn, items]);
 			if (items.length < 2) return null;
 			const previewIndex = items.findIndex((item) => item.turn === previewTurn);
 			const preview = previewIndex < 0 ? void 0 : items[previewIndex];
-			const previewPosition = previewIndex < 0 ? void 0 : itemPosition(previewIndex, items.length);
+			const previewPosition = previewIndex < 0 ? void 0 : itemPosition(previewIndex);
 			const previewAtPointer = (event) => {
-				setPreviewTurn(itemAtPointer(items, event.currentTarget, event.clientY)?.turn ?? null);
+				const scrollTop = scrollerRef.current?.scrollTop ?? 0;
+				setPreviewTurn(itemAtPointer(items, event.currentTarget, scrollTop, event.clientY)?.turn ?? null);
 			};
 			const navigateAtPointer = (event) => {
-				const item = itemAtPointer(items, event.currentTarget, event.clientY);
+				const scrollTop = scrollerRef.current?.scrollTop ?? 0;
+				const item = itemAtPointer(items, event.currentTarget, scrollTop, event.clientY);
 				if (item !== void 0) onNavigate(item);
 			};
+			const fadeClasses = [TurnNavigator_module_css_default.scroller];
+			if (scrollState.canScrollUp) fadeClasses.push(TurnNavigator_module_css_default.fadeTop);
+			if (scrollState.canScrollDown) fadeClasses.push(TurnNavigator_module_css_default.fadeBottom);
 			return (0, react_jsx_runtime.jsx)("div", {
 				className: TurnNavigator_module_css_default.slot,
 				children: (0, react_jsx_runtime.jsxs)("nav", {
-					className: TurnNavigator_module_css_default.rail,
-					style: railSize(items.length),
+					className: TurnNavigator_module_css_default.frame,
+					style: frameStyle(items.length, scrollState.top),
 					"aria-label": t("chat.turnNavigation.label"),
 					onClick: navigateAtPointer,
 					onPointerMove: previewAtPointer,
+					onPointerEnter: () => {
+						pointerInsideRef.current = true;
+					},
 					onPointerLeave: () => {
+						pointerInsideRef.current = false;
 						setPreviewTurn(null);
 					},
 					children: [(0, react_jsx_runtime.jsx)("div", {
-						className: TurnNavigator_module_css_default.marks,
-						children: items.map((item, index) => {
-							const active = item.turn === activeTurn;
-							const showingPreview = item.turn === previewTurn;
-							const markClass = active ? `${TurnNavigator_module_css_default.mark} ${TurnNavigator_module_css_default.markActive}` : showingPreview ? `${TurnNavigator_module_css_default.mark} ${TurnNavigator_module_css_default.markPreview}` : TurnNavigator_module_css_default.mark;
-							return (0, react_jsx_runtime.jsx)("div", {
-								className: TurnNavigator_module_css_default.markPosition,
-								style: itemPosition(index, items.length),
-								children: (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: markClass,
-									"aria-label": t("chat.turnNavigation.jump", { turn: item.turn }),
-									"aria-current": active ? "true" : void 0,
-									"aria-describedby": showingPreview ? previewId : void 0,
-									onClick: (event) => {
-										event.stopPropagation();
-										onNavigate(item);
-									},
-									onFocus: () => {
-										setPreviewTurn(item.turn);
-									},
-									onBlur: () => {
-										setPreviewTurn(null);
-									}
-								})
-							}, item.turn);
+						ref: scrollerRef,
+						className: fadeClasses.join(" "),
+						onScroll: () => {
+							syncScrollState();
+						},
+						children: (0, react_jsx_runtime.jsx)("div", {
+							className: TurnNavigator_module_css_default.marks,
+							children: items.map((item, index) => {
+								const active = item.turn === activeTurn;
+								const showingPreview = item.turn === previewTurn;
+								const classes = [TurnNavigator_module_css_default.mark];
+								if (item.anchor.kind === "unloaded") classes.push(TurnNavigator_module_css_default.markUnloaded);
+								if (active) classes.push(TurnNavigator_module_css_default.markActive);
+								else if (showingPreview) classes.push(TurnNavigator_module_css_default.markPreview);
+								if (item.turn === busyTurn) classes.push(TurnNavigator_module_css_default.markBusy);
+								return (0, react_jsx_runtime.jsx)("div", {
+									className: TurnNavigator_module_css_default.markPosition,
+									style: itemPosition(index),
+									children: (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: classes.join(" "),
+										"aria-label": t(item.anchor.kind === "loaded" ? "chat.turnNavigation.jump" : "chat.turnNavigation.jumpLoad", { turn: item.turn }),
+										"aria-current": active ? "true" : void 0,
+										"aria-busy": item.turn === busyTurn ? "true" : void 0,
+										"aria-describedby": showingPreview ? previewId : void 0,
+										onClick: (event) => {
+											event.stopPropagation();
+											onNavigate(item);
+										},
+										onFocus: () => {
+											setPreviewTurn(item.turn);
+										},
+										onBlur: () => {
+											setPreviewTurn(null);
+										}
+									})
+								}, item.turn);
+							})
 						})
 					}), preview !== void 0 && previewPosition !== void 0 && (0, react_jsx_runtime.jsxs)("div", {
 						id: previewId,
@@ -1745,9 +1823,12 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/**
-		* Compact rail of the currently loaded Turns with hover and focus previews.
+		* Fixed-pitch rail of every known Turn — loaded marks scroll, unloaded marks
+		* page history in first — with hover and focus previews. Overflow scrolls
+		* inside the frame, gradient fades marking each scrollable end, and the
+		* active mark keeps itself in view while the pointer is elsewhere.
 		*
-		* Memoized because it renders two host elements per loaded Turn while the
+		* Memoized because it renders two host elements per Turn while the
 		* enclosing view re-renders on every streaming delta: without the guard a long
 		* session rebuilds hundreds of marks per commit for a rail that only changes
 		* when a Turn is added, removed, or becomes active. Its props must therefore
@@ -1755,6 +1836,79 @@ window.__ModuleLoader__.load({
 		*/
 		const TurnNavigator = (0, react.memo)(TurnNavigatorRail);
 		//#endregion
+		//#region lib/types/client/chat/turn-rail-items.js
+		/**
+		* View-layer union of the host turn outline and the loaded rail items. The
+		* conversation snapshot never carries projection values, so this merge is the
+		* one place the rail's two sources meet: the `turnOutline` projection names
+		* every turn of the session, and the loaded window supplies anchors and
+		* richer previews for the turns it holds.
+		*/
+		const EMPTY_ITEMS$1 = [];
+		/**
+		* Structurally narrow one wire outline entry (projection values cross the
+		* wire). `turn` and `seq` are the load-bearing fields — a mark cannot exist
+		* or jump without them — so their damage drops the entry; the previews are
+		* decorative, so a malformed one degrades to `''` and the turn stays
+		* navigable by number.
+		*/
+		function outlineEntry(value) {
+			if (typeof value !== "object" || value === null) return void 0;
+			const entry = value;
+			if (typeof entry.turn !== "number" || !Number.isSafeInteger(entry.turn) || entry.turn < 0) return void 0;
+			if (typeof entry.seq !== "number" || !Number.isSafeInteger(entry.seq) || entry.seq < 0) return void 0;
+			return {
+				turn: entry.turn,
+				seq: entry.seq,
+				prompt: typeof entry.prompt === "string" ? entry.prompt : "",
+				response: typeof entry.response === "string" ? entry.response : ""
+			};
+		}
+		/** Wire outline entries, or none when the projection is absent or malformed. */
+		function outlineEntries(outline) {
+			return Array.isArray(outline) ? outline : EMPTY_ITEMS$1;
+		}
+		/**
+		* Merge the host outline with the loaded rail items into the full ladder.
+		* A turn present in both sides keeps the loaded anchor, taking an outline
+		* preview only where the window's own is empty (a mid-Turn window head, or a
+		* turn whose loaded nodes carry no text); turns on one side only pass
+		* through. Result ascends by turn.
+		* @param loaded - loaded-window rail items (timeline order).
+		* @param outline - `turnOutline` projection value, treated as wire data.
+		* @returns every known turn, ascending; a stable empty array when none.
+		*/
+		function mergeTurnRailItems(loaded, outline) {
+			const byTurn = /* @__PURE__ */ new Map();
+			for (const raw of outlineEntries(outline)) {
+				const entry = outlineEntry(raw);
+				if (entry === void 0) continue;
+				byTurn.set(entry.turn, {
+					turn: entry.turn,
+					prompt: entry.prompt,
+					response: entry.response,
+					anchor: {
+						kind: "unloaded",
+						seq: entry.seq
+					}
+				});
+			}
+			for (const item of loaded) {
+				const preview = byTurn.get(item.turn);
+				byTurn.set(item.turn, {
+					turn: item.turn,
+					prompt: item.prompt !== "" ? item.prompt : preview?.prompt ?? "",
+					response: item.response !== "" ? item.response : preview?.response ?? "",
+					anchor: {
+						kind: "loaded",
+						key: item.anchorKey
+					}
+				});
+			}
+			if (byTurn.size === 0) return EMPTY_ITEMS$1;
+			return [...byTurn.values()].sort((left, right) => left.turn - right.turn);
+		}
+		//#endregion
 		//#region lib/types/client/chat/ChatView.js
 		/** Active column host when present; otherwise the view-local scroller. */
 		function scrollerOf(from) {
@@ -1892,10 +2046,12 @@ window.__ModuleLoader__.load({
 		* The chat view slot entry: pure component over the composed props; each
 		* ordered business Node crosses the keyed renderer seat.
 		*/
-		function ChatView({ useSession, useChat, useSessions, useStore, actions, renderSlot, sessionId, openFile, loadOlder, loadImage, openView, chatScroll, forkAt, fileMentions, useTranscriptView, t }) {
+		function ChatView({ useSession, useChat, useSessions, useStore, actions, renderSlot, sessionId, openFile, loadOlder, loadThrough, loadImage, openView, chatScroll, forkAt, fileMentions, useTranscriptView, useProjection, t }) {
 			const order = useChat((s) => s.order);
 			const nodeStore = useChat((s) => s.nodes);
 			const turnNavigationItems = useChat((s) => s.navigation.items());
+			const turnOutline = useProjection("turnOutline");
+			const railItems = (0, react.useMemo)(() => mergeTurnRailItems(turnNavigationItems, turnOutline), [turnNavigationItems, turnOutline]);
 			const timeline = useChat((s) => s.timeline);
 			const inbox = useSession((s) => s.queue);
 			const cwd = useSessions((s) => s.byId[sessionId]?.cwd);
@@ -1938,7 +2094,7 @@ window.__ModuleLoader__.load({
 			const visibleSubmissions = (0, react.useMemo)(() => {
 				if (pendingSubmissions.length === 0) return pendingSubmissions;
 				const observed = observedRpcIds(order, nodeStore, inbox);
-				return pendingSubmissions.filter((submission) => !observed.has(submission.requestId));
+				return pendingSubmissions.filter((submission) => submission.placement !== "queued" && !observed.has(submission.requestId));
 			}, [
 				pendingSubmissions,
 				order,
@@ -1960,6 +2116,15 @@ window.__ModuleLoader__.load({
 			/** Paging anchor: semantic row/position at click, updated by reader scrolls
 			* while the request is pending and restored after the prepend lands. */
 			const anchorRef = (0, react.useRef)(null);
+			/** Unloaded-turn jump in flight: target turn plus its load-through seq. */
+			const pendingJumpRef = (0, react.useRef)(null);
+			/** Whether the in-flight jump already landed mid-paging (settle then only corrects an untouched landing). */
+			const jumpLandedRef = (0, react.useRef)(false);
+			const [busyJumpTurn, setBusyJumpTurn] = (0, react.useState)(null);
+			/** Bumped when a loadThrough completion settles, after its last page's commit. */
+			const [jumpSettleTick, setJumpSettleTick] = (0, react.useState)(0);
+			/** Window head at the last settle-time repage; an unmoved head falls back instead of repaging forever. */
+			const jumpRepageHeadRef = (0, react.useRef)(null);
 			const firstSeqRef = (0, react.useRef)(null);
 			const openedRef = (0, react.useRef)(false);
 			const lastKeyRef = (0, react.useRef)(null);
@@ -1984,13 +2149,17 @@ window.__ModuleLoader__.load({
 					return;
 				}
 				const el = scrollerOf(local);
+				if (el.scrollHeight - el.scrollTop - el.clientHeight <= 25) {
+					const latest = turnNavigationItems.at(-1)?.turn ?? first.turn;
+					setActiveTurn((current) => current === latest ? current : latest);
+					return;
+				}
 				const reading = turnAtLine(local, el.getBoundingClientRect().top + Math.min(96, el.clientHeight * .2));
 				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 <= 25) next = turnNavigationItems.at(-1)?.turn ?? next;
 				setActiveTurn((current) => current === next ? current : next);
 			}, [turnNavigationItems]);
 			const activeTurnRef = (0, react.useRef)(null);
@@ -2015,6 +2184,8 @@ window.__ModuleLoader__.load({
 			}, [scheduleActiveTurn]);
 			const toBottom = (el) => {
 				anchorRef.current = null;
+				pendingJumpRef.current = null;
+				setBusyJumpTurn((current) => current === null ? current : null);
 				el.scrollTop = el.scrollHeight;
 				observedTopRef.current = el.scrollTop;
 				atBottomRef.current = true;
@@ -2022,6 +2193,50 @@ window.__ModuleLoader__.load({
 				chatScroll.save(null);
 				setActiveTurn(turnNavigationItems.at(-1)?.turn ?? null);
 			};
+			const landOnRowRef = (0, react.useRef)(() => {});
+			landOnRowRef.current = (local, el, row, turn) => {
+				el.scrollTop += flowTop(row, el) - 24;
+				observedTopRef.current = el.scrollTop;
+				const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 25;
+				atBottomRef.current = isAtBottom;
+				setAtBottom(isAtBottom);
+				setActiveTurn(turn);
+				const position = isAtBottom ? null : scrollPosition(local, el);
+				if (isAtBottom) chatScroll.save(null);
+				else if (position !== null) chatScroll.save(position);
+			};
+			/**
+			* Land the pending jump once its Turn has a rendered anchor row; false
+			* while it must keep waiting. Mid-jump landings (`settle` false) keep the
+			* jump armed with the target row as the paging anchor, so later chunks and
+			* the load-earlier button's unmount re-land on the same row; the settling
+			* call clears the jump.
+			*/
+			const realizePendingJump = (local, el, settle) => {
+				const pending = pendingJumpRef.current;
+				if (pending === null) return true;
+				const item = railItems.find((candidate) => candidate.turn === pending.turn);
+				if (item === void 0 || item.anchor.kind !== "loaded") return false;
+				const row = anchorElement(local, item.anchor.key);
+				if (row === null) return false;
+				if (settle) {
+					pendingJumpRef.current = null;
+					setBusyJumpTurn(null);
+					const held = anchorRef.current;
+					const landedEarlier = jumpLandedRef.current;
+					jumpLandedRef.current = false;
+					anchorRef.current = null;
+					if (!landedEarlier || held?.key === item.anchor.key) landOnRowRef.current(local, el, row, pending.turn);
+					return true;
+				}
+				landOnRowRef.current(local, el, row, pending.turn);
+				jumpLandedRef.current = true;
+				anchorRef.current = {
+					key: item.anchor.key,
+					top: flowTop(row, el)
+				};
+				return true;
+			};
 			(0, react.useLayoutEffect)(() => {
 				const local = listRef.current;
 				/* v8 ignore next -- ref-null guard: React attaches the ref before layout effects run. */
@@ -2056,6 +2271,10 @@ window.__ModuleLoader__.load({
 					const row = anchorElement(local, anchor.key);
 					if (row !== null) el.scrollTop += flowTop(row, el) - anchor.top;
 					observedTopRef.current = el.scrollTop;
+					if (!realizePendingJump(local, el, false) && row !== null) anchorRef.current = {
+						key: anchor.key,
+						top: flowTop(row, el)
+					};
 					firstSeqRef.current = firstSeq;
 					/* v8 ignore next -- ?? arm: a prepend adds nodes, so the flow list here is never empty. */
 					lastKeyRef.current = lastKey;
@@ -2073,7 +2292,11 @@ window.__ModuleLoader__.load({
 				lastSteeringIdRef.current = lastSteeringId;
 				lastSubmissionIdRef.current = lastSubmissionId;
 				followSigRef.current = followSig;
-				if (appendedUser || appendedSteering || appendedSubmission || tipMoved && atBottomRef.current) toBottom(el);
+				if (appendedUser || appendedSteering || appendedSubmission || tipMoved && atBottomRef.current) {
+					toBottom(el);
+					return;
+				}
+				if (pendingJumpRef.current !== null) realizePendingJump(local, el, false);
 			});
 			const onScrollRef = (0, react.useRef)(() => {});
 			onScrollRef.current = () => {
@@ -2142,6 +2365,39 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				if (!loadingOlder) anchorRef.current = null;
 			}, [loadingOlder]);
+			(0, react.useEffect)(() => {
+				const pending = pendingJumpRef.current;
+				const local = listRef.current;
+				if (pending === null || local === null) return;
+				const el = scrollerOf(local);
+				if (realizePendingJump(local, el, true)) return;
+				if ((firstSeq === null || firstSeq > pending.seq) && hasMore) {
+					if (loadingOlder) return;
+					if (jumpRepageHeadRef.current !== firstSeq) {
+						jumpRepageHeadRef.current = firstSeq;
+						const held = pagingAnchor(local, el);
+						if (held !== null && held.dataset.chatAnchorKey !== void 0) anchorRef.current = {
+							key: held.dataset.chatAnchorKey,
+							top: flowTop(held, el)
+						};
+						loadThrough(pending.seq).finally(() => {
+							setJumpSettleTick((tick) => tick + 1);
+						});
+						return;
+					}
+				}
+				for (const row of local.querySelectorAll("[data-chat-turn]:not([hidden])")) {
+					const turn = Number(row.dataset.chatTurn);
+					if (!Number.isSafeInteger(turn) || turn < pending.turn) continue;
+					landOnRowRef.current(local, el, row, turn);
+					break;
+				}
+				pendingJumpRef.current = null;
+				setBusyJumpTurn(null);
+			}, [jumpSettleTick]);
+			(0, react.useEffect)(() => {
+				if (!loadingOlder && pendingJumpRef.current !== null) setJumpSettleTick((tick) => tick + 1);
+			}, [loadingOlder]);
 			const loadOlderAnchored = () => {
 				const local = listRef.current;
 				/* v8 ignore next -- ref-null guard: the paging button renders inside the list tree. */
@@ -2158,24 +2414,38 @@ window.__ModuleLoader__.load({
 			const navigateToTurn = (0, react.useCallback)((item) => {
 				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;
+				if (item.anchor.kind === "unloaded") {
+					atBottomRef.current = false;
+					setAtBottom(false);
+					const held = pagingAnchor(local, el);
+					if (held !== null && held.dataset.chatAnchorKey !== void 0) anchorRef.current = {
+						key: held.dataset.chatAnchorKey,
+						top: flowTop(held, el)
+					};
+					pendingJumpRef.current = {
+						turn: item.turn,
+						seq: item.anchor.seq
+					};
+					jumpRepageHeadRef.current = null;
+					jumpLandedRef.current = false;
+					setBusyJumpTurn(item.turn);
+					loadThrough(item.anchor.seq).finally(() => {
+						setJumpSettleTick((tick) => tick + 1);
+					});
+					return;
+				}
+				const row = anchorElement(local, item.anchor.key);
+				if (row === null) return;
+				pendingJumpRef.current = null;
+				setBusyJumpTurn((current) => current === null ? current : null);
+				landOnRowRef.current(local, el, row, item.turn);
 				const landed = loadingOlder ? pagingAnchor(local, el) : null;
 				anchorRef.current = landed === null || landed.dataset.chatAnchorKey === void 0 ? null : {
 					key: landed.dataset.chatAnchorKey,
 					top: flowTop(landed, el)
 				};
-				const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 25;
-				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);
-			}, [loadingOlder, chatScroll]);
+			}, [loadingOlder, loadThrough]);
 			return (0, react_jsx_runtime.jsxs)("div", {
 				className: ChatView_module_css_default.root,
 				children: [(0, react_jsx_runtime.jsxs)("div", {
@@ -2183,8 +2453,9 @@ window.__ModuleLoader__.load({
 					className: ChatView_module_css_default.scroll,
 					children: [
 						(0, react_jsx_runtime.jsx)(TurnNavigator, {
-							items: turnNavigationItems,
+							items: railItems,
 							activeTurn,
+							busyTurn: busyJumpTurn,
 							onNavigate: navigateToTurn,
 							t
 						}),
@@ -2328,6 +2599,7 @@ window.__ModuleLoader__.load({
 			"chat.deepDiving": "深度求索中...",
 			"chat.turnNavigation.label": "轮次导航",
 			"chat.turnNavigation.jump": "跳转到第 {turn} 轮",
+			"chat.turnNavigation.jumpLoad": "加载并跳转到第 {turn} 轮",
 			"chat.turnNavigation.turn": "第 {turn} 轮",
 			"settings.transcript.title": "对话显示",
 			"settings.transcript.description": "控制已完成轮次的过程内容",
@@ -2440,6 +2712,7 @@ window.__ModuleLoader__.load({
 			"chat.deepDiving": "Deep diving...",
 			"chat.turnNavigation.label": "Turn navigation",
 			"chat.turnNavigation.jump": "Jump to turn {turn}",
+			"chat.turnNavigation.jumpLoad": "Load and jump to turn {turn}",
 			"chat.turnNavigation.turn": "Turn {turn}",
 			"settings.transcript.title": "Conversation display",
 			"settings.transcript.description": "Controls process content in completed turns",
@@ -4348,27 +4621,42 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region lib/types/client/conversation-nodes/turn-navigation.js
 		/**
-		* Preview budget per field. The rail clamps two short lines, so anything past
-		* this is invisible; copying whole transcripts into navigation state would
+		* Preview budgets, sized to the rail card's clamps (one prompt line, up to
+		* three response lines) and mirrored by the turnOutline projection so a turn
+		* shows the same words before and after its events load. Anything past a
+		* budget 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) {
+		const PROMPT_PREVIEW_LIMIT = 50;
+		const RESPONSE_PREVIEW_LIMIT = 120;
+		/** Join rendered text, collapse whitespace, and cap at `limit` with a trailing ellipsis when clipped. */
+		function preview(parts, limit) {
 			let text = "";
+			let unread = false;
 			for (const part of parts) {
-				text += text === "" ? part : ` ${part}`;
-				if (text.length >= PREVIEW_LIMIT) break;
+				if (text.length >= limit * 2) {
+					unread = true;
+					break;
+				}
+				const clipped = part.length > limit * 2;
+				const chunk = clipped ? part.slice(0, limit * 2) : part;
+				text += text === "" ? chunk : ` ${chunk}`;
+				if (clipped) {
+					unread = true;
+					break;
+				}
 			}
-			return text.replace(/\s+/g, " ").trim().slice(0, PREVIEW_LIMIT);
+			const normalized = text.replace(/\s+/g, " ").trim();
+			if (normalized.length > limit - 1) return `${normalized.slice(0, limit - 1).trimEnd()}…`;
+			return unread ? `${normalized}…` : normalized;
 		}
 		function promptText(node) {
 			if (node.kind !== "user") return "";
-			return preview(node.data.content.flatMap((block) => block.type === "text" ? [block.text] : []));
+			return preview(node.data.content.flatMap((block) => block.type === "text" ? [block.text] : []), PROMPT_PREVIEW_LIMIT);
 		}
 		function responseText(node) {
 			if (node.kind !== "assistant-step") return "";
-			return preview(node.data.blocks.flatMap((block) => block.kind === "text" ? [block.text] : []));
+			return preview(node.data.blocks.flatMap((block) => block.kind === "text" ? [block.text] : []), RESPONSE_PREVIEW_LIMIT);
 		}
 		/**
 		* Whether two items carry the same rail state, so the reader can keep its array.
@@ -5224,43 +5512,87 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region lib/types/client/conversation-nodes/inbox.js
+		const EMPTY_PENDING = {
+			kind: "snapshot",
+			ids: []
+		};
+		const EMPTY_CURRENT_CLAIMED = /* @__PURE__ */ new Set();
+		function materializePending(state) {
+			const splices = [];
+			let current = state;
+			while (current.kind === "splice") {
+				splices.push(current);
+				current = current.previous;
+			}
+			const pending = [...current.ids];
+			for (const splice of splices.reverse()) pending.splice(splice.start, splice.removedCount, ...splice.inserted);
+			return pending;
+		}
+		function withoutInserted(claimed, inserted) {
+			let next;
+			for (const id of inserted) {
+				if (!claimed.has(id)) continue;
+				next ??= new Set(claimed);
+				next.delete(id);
+			}
+			return next ?? claimed;
+		}
+		/**
+		* Apply one next-step splice under the AgentLoop's durable event ordering.
+		* An entered claim logs its complete message batch before another claim; a
+		* rejected claim logs no messages, so only the current claim can classify a
+		* later `user/message`.
+		*/
 		function applySplice(previous, splice) {
-			const pending = [...previous?.state.pending ?? []];
-			const claimed = new Set(previous?.state.claimed ?? []);
-			const removed = pending.splice(splice.start, splice.removedCount ?? 0, ...splice.inserted);
-			for (const identity of splice.inserted) claimed.delete(identity.id);
-			if (splice.target === "next-step" && splice.outcome !== "canceled") for (const identity of removed) claimed.add(identity.id);
+			const priorPending = previous?.state.pending ?? EMPTY_PENDING;
+			const inserted = splice.inserted.map((identity) => identity.id);
+			const removedCount = splice.removedCount ?? 0;
+			if (removedCount > 0 && splice.outcome !== "canceled") {
+				const pending = materializePending(priorPending);
+				const removed = pending.splice(splice.start, removedCount, ...inserted);
+				return {
+					pending: {
+						kind: "snapshot",
+						ids: pending
+					},
+					currentClaimed: new Set(removed)
+				};
+			}
+			const currentClaimed = withoutInserted(previous?.state.currentClaimed ?? EMPTY_CURRENT_CLAIMED, inserted);
 			return {
-				pending,
-				claimed
+				pending: {
+					kind: "splice",
+					previous: priorPending,
+					start: splice.start,
+					removedCount,
+					inserted
+				},
+				currentClaimed
 			};
 		}
-		function inboxDefinition(target) {
-			const kind = `inbox-${target}`;
-			return {
-				kind,
-				match: (event) => event.type === "agent/inbox/spliced" && event.data.target === target ? {
+		const NEXT_STEP_INBOX_KIND = "inbox-next-step";
+		/** Persistent next-step Inbox state used to classify the current claimed batch as steering. */
+		const nextStepInboxDefinition = {
+			kind: NEXT_STEP_INBOX_KIND,
+			match: (event) => {
+				if (event.type === "agent/inbox/spliced" && event.data.target === "next-step") return {
 					id: String(event.seq),
 					role: "start"
-				} : null,
-				start: (_context, match, reader) => {
-					if (match.event.type !== "agent/inbox/spliced") throw new Error(`${kind} start requires agent/inbox/spliced`);
-					return applySplice(reader.previous(kind), match.event.data);
-				},
-				update: (context) => context.state,
-				publication: () => "none"
-			};
-		}
-		/** Cumulative next-turn inbox splice Definition. */
-		const nextTurnInboxDefinition = inboxDefinition("next-turn");
-		/** Cumulative next-step inbox splice Definition used to classify steering. */
-		const nextStepInboxDefinition = inboxDefinition("next-step");
+				};
+				return null;
+			},
+			start: (_context, match, reader) => {
+				if (match.event.type !== "agent/inbox/spliced") throw new Error("inbox-next-step start requires agent/inbox/spliced");
+				return applySplice(reader.previous(NEXT_STEP_INBOX_KIND), match.event.data);
+			},
+			update: (context) => context.state,
+			publication: () => "none"
+		};
 		/**
-		* Register the two durable Inbox-state contributions.
+		* Register the next-step Inbox state used by Chat message classification.
 		* @param ctx - owning UI Conversation context.
 		*/
 		function registerInboxConversationNodes(ctx) {
-			ctx.uiConversation.events.register(nextTurnInboxDefinition);
 			ctx.uiConversation.events.register(nextStepInboxDefinition);
 		}
 		//#endregion
@@ -5290,7 +5622,7 @@ window.__ModuleLoader__.load({
 					provenance: contextProvenance(event.data.source),
 					form: contextForm(event.data.source)
 				};
-				return reader.previous("inbox-next-step")?.state.claimed.has(String(event.data.id)) === true ? {
+				return reader.previous("inbox-next-step")?.state.currentClaimed.has(String(event.data.id)) === true ? {
 					kind: "steering",
 					messageId: event.data.id,
 					seq: event.seq,
@@ -7630,6 +7962,7 @@ window.__ModuleLoader__.load({
 							loadOlder: () => {
 								session.loadOlder();
 							},
+							loadThrough: (seq) => session.loadThrough(seq),
 							loadImage: Object.assign((attachment) => ctx.uiConversation.imageUrl(sessionId, attachment), { peek: (attachment) => ctx.uiConversation.peekImageUrl(sessionId, attachment) }),
 							chatScroll: {
 								save: (position) => {

package/lib/types/client/chat/ChatView.d.ts

@@ -3,5 +3,5 @@ import type { ChatViewSlotProps } from '../contract/slots.ts';
  * The chat view slot entry: pure component over the composed props; each
  * ordered business Node crosses the keyed renderer seat.
  */
-export declare function ChatView({ useSession, useChat, useSessions, useStore, actions, renderSlot, sessionId, openFile, loadOlder, loadImage, openView, chatScroll, forkAt, fileMentions, useTranscriptView, t, }: ChatViewSlotProps): import("react").JSX.Element;
+export declare function ChatView({ useSession, useChat, useSessions, useStore, actions, renderSlot, sessionId, openFile, loadOlder, loadThrough, loadImage, openView, chatScroll, forkAt, fileMentions, useTranscriptView, useProjection, t, }: ChatViewSlotProps): import("react").JSX.Element;
 //# sourceMappingURL=ChatView.d.ts.map

package/lib/types/client/chat/MessageItem.d.ts

@@ -13,10 +13,10 @@ export declare function PendingSteeringBubble({ content, renderMessageImages, t
     t: ChatViewSlotProps['t'];
 }): ReactNode;
 /**
- * Render one local submission echo with the exact visual language of the
- * durable user node that replaces it: draft text plus object-URL previews,
- * visible from the submit click until the durable `user/message` (or its
- * queue occurrence) renders.
+ * Render one local transcript or steering submission echo with the same
+ * visual language and surface marker as the Host occurrence that replaces
+ * it: draft text plus object-URL previews, visible from the submit click
+ * until the durable `user/message` or steering occurrence renders.
  * @param props - the session snapshot's pending submission and render seats.
  * @returns the echoed user bubble.
  */

package/lib/types/client/chat/TurnNavigator.d.ts

@@ -1,16 +1,21 @@
 import type { ChatViewSlotProps } from '../contract/slots.ts';
-import type { TurnNavigationItem } from '../contract/snapshot.ts';
+import type { TurnRailItem } from './turn-rail-items.ts';
 interface TurnNavigatorProps {
-    readonly items: readonly TurnNavigationItem[];
+    readonly items: readonly TurnRailItem[];
     readonly activeTurn: number | null;
-    readonly onNavigate: (item: TurnNavigationItem) => void;
+    /** Turn whose jump is still paging history in; its mark pulses. */
+    readonly busyTurn: number | null;
+    readonly onNavigate: (item: TurnRailItem) => void;
     readonly t: ChatViewSlotProps['t'];
 }
-declare function TurnNavigatorRail({ items, activeTurn, onNavigate, t }: TurnNavigatorProps): import("react").JSX.Element | null;
+declare function TurnNavigatorRail({ items, activeTurn, busyTurn, onNavigate, t }: TurnNavigatorProps): import("react").JSX.Element | null;
 /**
- * Compact rail of the currently loaded Turns with hover and focus previews.
+ * Fixed-pitch rail of every known Turn — loaded marks scroll, unloaded marks
+ * page history in first — with hover and focus previews. Overflow scrolls
+ * inside the frame, gradient fades marking each scrollable end, and the
+ * active mark keeps itself in view while the pointer is elsewhere.
  *
- * Memoized because it renders two host elements per loaded Turn while the
+ * Memoized because it renders two host elements per Turn while the
  * enclosing view re-renders on every streaming delta: without the guard a long
  * session rebuilds hundreds of marks per commit for a rail that only changes
  * when a Turn is added, removed, or becomes active. Its props must therefore

package/lib/types/client/chat/turn-rail-items.d.ts

@@ -0,0 +1,36 @@
+/**
+ * View-layer union of the host turn outline and the loaded rail items. The
+ * conversation snapshot never carries projection values, so this merge is the
+ * one place the rail's two sources meet: the `turnOutline` projection names
+ * every turn of the session, and the loaded window supplies anchors and
+ * richer previews for the turns it holds.
+ */
+import type { TurnNavigationItem } from '../contract/snapshot.ts';
+/** One rail mark: a loaded Turn scrolls to its row; an unloaded one pages history through its seq first. */
+export interface TurnRailItem {
+    readonly turn: number;
+    /** Bounded prompt preview (loaded window first, outline fallback). */
+    readonly prompt: string;
+    /** Bounded response preview (loaded window first, outline fallback). */
+    readonly response: string;
+    /** How the rail reaches the Turn. */
+    readonly anchor: {
+        readonly kind: 'loaded';
+        readonly key: string;
+    } | {
+        readonly kind: 'unloaded';
+        readonly seq: number;
+    };
+}
+/**
+ * Merge the host outline with the loaded rail items into the full ladder.
+ * A turn present in both sides keeps the loaded anchor, taking an outline
+ * preview only where the window's own is empty (a mid-Turn window head, or a
+ * turn whose loaded nodes carry no text); turns on one side only pass
+ * through. Result ascends by turn.
+ * @param loaded - loaded-window rail items (timeline order).
+ * @param outline - `turnOutline` projection value, treated as wire data.
+ * @returns every known turn, ascending; a stable empty array when none.
+ */
+export declare function mergeTurnRailItems(loaded: readonly TurnNavigationItem[], outline: unknown): readonly TurnRailItem[];
+//# sourceMappingURL=turn-rail-items.d.ts.map

package/lib/types/client/contract/slots.d.ts

@@ -95,6 +95,8 @@ export interface ChatViewInjected {
     openDetails: (target: SelectionTarget) => void;
     openFile: (path: string) => Promise<void>;
     loadOlder: () => void;
+    /** Jump loader: page history back through seq; resolves when the window covers it. */
+    loadThrough: (seq: number) => Promise<void>;
     loadImage: MessageImageLoader;
     chatScroll: {
         save: (position: ChatScrollPosition | null) => void;

package/lib/types/client/conversation-nodes/inbox.d.ts

@@ -1,19 +1,28 @@
 import type { Context } from '@prettier-ai/cordis';
 import type { ConversationNodeDefinition } from '@prettier-ai/dsh-client-ui-conversation/client';
-interface InboxIdentity {
-    readonly id: string;
+interface PendingSnapshot {
+    readonly kind: 'snapshot';
+    readonly ids: readonly string[];
 }
-/** Cumulative state after one durable inbox splice. */
+interface PendingSplice {
+    readonly kind: 'splice';
+    readonly previous: PendingState;
+    readonly start: number;
+    readonly removedCount: number;
+    readonly inserted: readonly string[];
+}
+type PendingState = PendingSnapshot | PendingSplice;
+/** Persistent next-step state after one durable Inbox splice. */
 export interface InboxState {
-    readonly pending: readonly InboxIdentity[];
-    readonly claimed: ReadonlySet<string>;
+    /** Persistent splice chain materialized only when a next-step batch is claimed. */
+    readonly pending: PendingState;
+    /** Message ids in the current claim, shared until the next claim. */
+    readonly currentClaimed: ReadonlySet<string>;
 }
-/** Cumulative next-turn inbox splice Definition. */
-export declare const nextTurnInboxDefinition: ConversationNodeDefinition<InboxState>;
-/** Cumulative next-step inbox splice Definition used to classify steering. */
+/** Persistent next-step Inbox state used to classify the current claimed batch as steering. */
 export declare const nextStepInboxDefinition: ConversationNodeDefinition<InboxState>;
 /**
- * Register the two durable Inbox-state contributions.
+ * Register the next-step Inbox state used by Chat message classification.
  * @param ctx - owning UI Conversation context.
  */
 export declare function registerInboxConversationNodes(ctx: Context): void;

package/lib/types/client/locale.d.ts

@@ -29,6 +29,7 @@ export declare const zh: {
     'chat.deepDiving': string;
     'chat.turnNavigation.label': string;
     'chat.turnNavigation.jump': string;
+    'chat.turnNavigation.jumpLoad': string;
     'chat.turnNavigation.turn': string;
     'settings.transcript.title': string;
     'settings.transcript.description': string;
@@ -143,6 +144,7 @@ export declare const en: {
     'chat.deepDiving': string;
     'chat.turnNavigation.label': string;
     'chat.turnNavigation.jump': string;
+    'chat.turnNavigation.jumpLoad': string;
     'chat.turnNavigation.turn': string;
     'settings.transcript.title': string;
     'settings.transcript.description': string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prettier-ai/dsh-client-ui-chat",
   "description": "Chat Conversation target, node definitions, renderers, and details surface",
-  "version": "0.1.2-alpha.2",
+  "version": "0.1.2-alpha.3",
   "publishConfig": {
     "access": "public"
   },
@@ -54,34 +54,35 @@
     "@types/react-dom": "~18.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "@prettier-ai/dsh-api-remotes": "^0.1.2-alpha.3",
     "@prettier-ai/cordis": "^4.0.2",
-    "@prettier-ai/dsh-agent": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-api-remotes": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-api-workspace-controller": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-api-session-controller": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-attachment": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-locale": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-store": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-ui-approval": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-ui-conversation": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-ui-layout": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-ui-primitives": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-ui-settings": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-ui-session": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-ui-workspace": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-ui-slots": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-commands": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-compaction": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-client-ui-renderer": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-llm": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-session": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-token-meter": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-llm-retry": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-invariants": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-session-stats": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-util-workspace-path": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-settings": "^0.1.2-alpha.2",
-    "@prettier-ai/dsh-tools": "^0.1.2-alpha.2"
+    "@prettier-ai/dsh-api-session-controller": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-agent": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-api-workspace-controller": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-attachment": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-ui-approval": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-store": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-ui-conversation": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-ui-layout": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-ui-primitives": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-locale": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-ui-renderer": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-ui-slots": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-ui-session": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-ui-workspace": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-client-ui-settings": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-commands": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-invariants": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-compaction": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-llm-retry": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-llm": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-session": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-session-stats": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-session-turn-outline": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-token-meter": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-util-workspace-path": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-settings": "^0.1.2-alpha.3",
+    "@prettier-ai/dsh-tools": "^0.1.2-alpha.3"
   },
   "dependencies": {
     "@prettier-ai/schemastery": "^3.18.2"