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

package/lib/client.js

@@ -8,6 +8,7 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let _prettier_ai_dsh_client_ui_primitives = require("@prettier-ai/dsh-client-ui-primitives");
 		let _prettier_ai_dsh_client_store = require("@prettier-ai/dsh-client-store");
+		let react_dom = require("react-dom");
 		//#region ../../util/workspace-path/src/index.ts
 		/**
 		* Browser-safe Workspace path and display helpers.
@@ -946,7 +947,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/dsh-publisher/dsh-publisher/upstream/packages/client/ui-chat/src/client/chat/MessageIconActions.module.css.mjs
-		const css$12 = ".BmHDMW_actions{height:calc(28px + var(--dsh-content-font-delta,0px));align-items:center;gap:10px;display:flex}.BmHDMW_timeStart{font-size:var(--dsh-content-font-size,14px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);white-space:nowrap;padding-right:12px}.BmHDMW_timeEnd{font-size:var(--dsh-content-font-size,14px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);white-space:nowrap;padding-left:12px}.BmHDMW_runTimeDot{margin:0 10px}@media (hover:hover){[data-time-hover-root] :is(.BmHDMW_timeStart,.BmHDMW_timeEnd){opacity:0;transition:opacity 80ms}[data-time-hover-root]:hover :is(.BmHDMW_timeStart,.BmHDMW_timeEnd),[data-time-hover-root]:focus-within :is(.BmHDMW_timeStart,.BmHDMW_timeEnd){opacity:1}}.BmHDMW_action{width:calc(28px + var(--dsh-content-font-delta,0px));height:calc(28px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:28px;justify-content:center;align-items:center;padding:6px;display:inline-flex}.BmHDMW_action svg{width:calc(16px + var(--dsh-content-font-delta,0px));height:calc(16px + var(--dsh-content-font-delta,0px))}.BmHDMW_action:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}.BmHDMW_action[data-unavailable]{cursor:default;opacity:.4}.BmHDMW_action[data-unavailable]:hover{color:var(--dsw-alias-label-tertiary);background:0 0}.BmHDMW_visuallyHidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}";
+		const css$12 = ".BmHDMW_actions{height:calc(28px + var(--dsh-content-font-delta,0px));align-items:center;gap:8px;display:flex}.BmHDMW_timeStart{font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);white-space:nowrap;padding-right:12px}.BmHDMW_timeEnd{font-size:var(--dsh-content-font-size-secondary,13px);line-height:calc(24px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);white-space:nowrap}@media (hover:hover){[data-actions-reveal=hover] .BmHDMW_actions{opacity:0;transition:opacity 80ms}[data-actions-reveal=hover]:hover .BmHDMW_actions,[data-actions-reveal=hover]:focus-within .BmHDMW_actions{opacity:1}}.BmHDMW_action{width:calc(28px + var(--dsh-content-font-delta,0px));height:calc(28px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);cursor:pointer;background:0 0;border:none;border-radius:28px;justify-content:center;align-items:center;padding:6px;display:inline-flex}.BmHDMW_action svg{width:calc(15px + var(--dsh-content-font-delta,0px));height:calc(15px + var(--dsh-content-font-delta,0px))}.BmHDMW_action:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}.BmHDMW_action[data-unavailable]{cursor:default;opacity:.4}.BmHDMW_action[data-unavailable]:hover{color:var(--dsw-alias-label-tertiary);background:0 0}.BmHDMW_visuallyHidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}";
 		const tagId$12 = "@prettier-ai/dsh-client-ui-chat/MessageIconActions.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$12) + "]") === null) {
 			const tag = document.createElement("style");
@@ -958,7 +959,6 @@ window.__ModuleLoader__.load({
 		var MessageIconActions_module_css_default = {
 			"action": "BmHDMW_action",
 			"actions": "BmHDMW_actions",
-			"runTimeDot": "BmHDMW_runTimeDot",
 			"timeEnd": "BmHDMW_timeEnd",
 			"timeStart": "BmHDMW_timeStart",
 			"visuallyHidden": "BmHDMW_visuallyHidden"
@@ -970,7 +970,7 @@ window.__ModuleLoader__.load({
 		* @param props - Copy text, event time, clock side, branch callback, className.
 		* @returns The actions row element.
 		*/
-		function MessageIconActions({ text, time, runMs, ttftMs, tokensPerSecond, clock, onBranch, branchUnavailable = false, className, extraActions, t }) {
+		function MessageIconActions({ text, time, clock, onBranch, branchUnavailable = false, className, extraActions, usageAction, t }) {
 			const day = useCalendarDay();
 			const reasonId = (0, react.useId)();
 			const [copied, setCopied] = (0, react.useState)(false);
@@ -997,41 +997,9 @@ window.__ModuleLoader__.load({
 					}, 1e3);
 				});
 			}, [copied, text]);
-			const clockEl = time === void 0 ? null : (0, react_jsx_runtime.jsxs)("span", {
+			const clockEl = time === void 0 ? null : (0, react_jsx_runtime.jsx)("span", {
 				className: clock === "start" ? MessageIconActions_module_css_default.timeStart : MessageIconActions_module_css_default.timeEnd,
-				children: [
-					formatMessageClock(time, t, day),
-					runMs !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						" ",
-						(0, react_jsx_runtime.jsx)("span", {
-							className: MessageIconActions_module_css_default.runTimeDot,
-							"aria-hidden": true,
-							children: "·"
-						}),
-						" ",
-						t("message.ranFor", { duration: formatRunDuration(runMs, t) })
-					] }),
-					ttftMs !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						" ",
-						(0, react_jsx_runtime.jsx)("span", {
-							className: MessageIconActions_module_css_default.runTimeDot,
-							"aria-hidden": true,
-							children: "·"
-						}),
-						" ",
-						t("message.ttft", { seconds: formatLatencySeconds(ttftMs) })
-					] }),
-					tokensPerSecond !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						" ",
-						(0, react_jsx_runtime.jsx)("span", {
-							className: MessageIconActions_module_css_default.runTimeDot,
-							"aria-hidden": true,
-							children: "·"
-						}),
-						" ",
-						t("message.tokensPerSecond", { tps: formatTokensPerSecond(tokensPerSecond) })
-					] })
-				]
+				children: formatMessageClock(time, t, day)
 			});
 			return (0, react_jsx_runtime.jsxs)("div", {
 				className: className === void 0 ? MessageIconActions_module_css_default.actions : `${MessageIconActions_module_css_default.actions} ${className}`,
@@ -1068,6 +1036,7 @@ window.__ModuleLoader__.load({
 						className: MessageIconActions_module_css_default.visuallyHidden,
 						children: t("message.branchUnavailable")
 					}),
+					usageAction,
 					clock === "end" ? clockEl : null
 				]
 			});
@@ -1200,7 +1169,7 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/** Right-aligned bubble shared by user and steering rows. */
-		function UserStyleBubble({ content, renderMessageImages, actions, pending = false, echo = false, referenceLabels = [], previewImages, t }) {
+		function UserStyleBubble({ content, renderMessageImages, actions, pending = false, echo = false, referenceLabels = [], previewImages, reveal = "always", t }) {
 			const { text, images: contentImages, rest } = contentParts(content);
 			const images = previewImages ?? contentImages;
 			const truncated = (total) => t("json.truncated", { total });
@@ -1209,7 +1178,7 @@ window.__ModuleLoader__.load({
 				className: MessageItem_module_css_default.userRow,
 				"data-pending-steering": pending || void 0,
 				"data-submission-echo": echo || void 0,
-				"data-time-hover-root": true,
+				"data-actions-reveal": reveal,
 				children: [(0, react_jsx_runtime.jsxs)("div", {
 					className: MessageItem_module_css_default.userStack,
 					children: [
@@ -1254,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.
 		*/
@@ -1274,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, {
@@ -1286,12 +1256,20 @@ window.__ModuleLoader__.load({
 			});
 		}
 		/** User and admitted-steering keyed Chat renderer. */
-		const UserMessageNodeView = (0, react.memo)(function UserMessageNodeView({ node, renderMessageImages, t }) {
+		const UserMessageNodeView = (0, react.memo)(function UserMessageNodeView({ node, renderMessageImages, useChat, t }) {
 			const data = node.data;
+			const isLatestUserRow = useChat((snapshot) => {
+				for (let index = snapshot.order.length - 1; index >= 0; index -= 1) {
+					const candidate = snapshot.nodes.get(snapshot.order[index] ?? "");
+					if (candidate?.kind === "user" || candidate?.kind === "steering") return candidate.key === node.key;
+				}
+				return true;
+			});
 			return (0, react_jsx_runtime.jsx)(UserStyleBubble, {
 				content: data.content,
 				renderMessageImages,
 				...data.referenceLabels === void 0 ? {} : { referenceLabels: data.referenceLabels },
+				reveal: isLatestUserRow ? "always" : "hover",
 				t,
 				actions: (text) => (0, react_jsx_runtime.jsx)(MessageIconActions, {
 					text,
@@ -1650,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");
@@ -1660,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,
@@ -1768,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
@@ -1778,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) {
@@ -1915,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);
@@ -1961,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,
@@ -1983,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);
@@ -2007,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);
@@ -2038,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;
@@ -2045,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. */
@@ -2079,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;
@@ -2096,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 = () => {
@@ -2165,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. */
@@ -2181,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", {
@@ -2206,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
 						}),
@@ -2351,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": "控制已完成轮次的过程内容",
@@ -2408,18 +2657,21 @@ window.__ModuleLoader__.load({
 			"message.maxTokens": "已达到输出 token 上限",
 			"message.maxTokens.hint": "回答被截断，已有输出保留在对话中。发送“继续”可让模型接着输出。",
 			"message.ranFor": "用时 {duration}",
-			"message.ttft": "首 token {seconds}秒",
 			"message.tokensPerSecond": "{tps} tok/s",
 			"message.turnUsage.title": "本轮用量",
-			"message.turnUsage.summaryWithCache": "{total} · 缓存命中率 {percent}%",
+			"message.turnUsage.consumed": "用量 {total}",
 			"message.turnUsage.model": "提供方 / 模型",
+			"message.turnUsage.cacheHit": "缓存命中",
 			"message.turnUsage.input": "未缓存输入",
 			"message.turnUsage.cacheRead": "缓存读取",
 			"message.turnUsage.cacheWrite": "缓存写入",
 			"message.turnUsage.output": "输出",
 			"message.turnUsage.reasoning": "（其中推理 {tokens}）",
-			"message.turnUsage.total": "总计",
 			"message.turnUsage.count": "{count} tok",
+			"message.turnTime.title": "本轮用时和速度",
+			"message.turnTime.duration": "本轮总用时",
+			"message.turnTime.speed": "输出速度（TPS）",
+			"message.turnTime.ttft": "首 token 用时（TTFT）",
 			"duration.seconds": "{seconds}秒",
 			"duration.minutes": "{minutes}分{seconds}秒",
 			"command.running": "执行中…",
@@ -2460,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",
@@ -2517,18 +2770,21 @@ window.__ModuleLoader__.load({
 			"message.maxTokens": "Output token limit reached",
 			"message.maxTokens.hint": "The reply was cut off; earlier output is preserved in the conversation. Send \"continue\" to let the model resume.",
 			"message.ranFor": "Ran for {duration}",
-			"message.ttft": "TTFT {seconds}s",
 			"message.tokensPerSecond": "{tps} tok/s",
 			"message.turnUsage.title": "Turn usage",
-			"message.turnUsage.summaryWithCache": "{total} · Cache hit {percent}%",
+			"message.turnUsage.consumed": "Usage {total}",
 			"message.turnUsage.model": "Provider / model",
+			"message.turnUsage.cacheHit": "Cache hit",
 			"message.turnUsage.input": "Uncached input",
 			"message.turnUsage.cacheRead": "Cached input",
 			"message.turnUsage.cacheWrite": "Cache write",
 			"message.turnUsage.output": "Output",
 			"message.turnUsage.reasoning": " ({tokens} reasoning)",
-			"message.turnUsage.total": "Total",
 			"message.turnUsage.count": "{count} tok",
+			"message.turnTime.title": "Turn time and speed",
+			"message.turnTime.duration": "Total run time",
+			"message.turnTime.speed": "Tokens per second (TPS)",
+			"message.turnTime.ttft": "Time to first token (TTFT)",
 			"duration.seconds": "{seconds}s",
 			"duration.minutes": "{minutes}m {seconds}s",
 			"command.running": "Running…",
@@ -3113,9 +3369,9 @@ window.__ModuleLoader__.load({
 			return `99.${"9".repeat(distinguishingPlaces - 1)}${10 - roundedLoss}`;
 		}
 		//#endregion
-		//#region \0dsh-css:/home/runner/work/dsh-publisher/dsh-publisher/upstream/packages/client/ui-chat/src/client/chat/TurnUsageDisclosure.module.css.mjs
-		const css$4 = ".psHEaW_root{min-width:0}.psHEaW_root[data-open]{padding-bottom:4px}.psHEaW_root [data-disclosure-row]:focus-visible{outline:2px solid var(--dsw-alias-label-tertiary);outline-offset:-2px;border-radius:6px}.psHEaW_chevron{color:var(--dsw-alias-label-secondary)}.psHEaW_separator{background:var(--dsw-alias-label-caption);border-radius:1px;flex:none;width:2px;height:2px;margin:0 8px}.psHEaW_summary{min-width:0;color:var(--dsw-alias-label-tertiary);font-size:var(--dsh-content-font-size-secondary,13px);font-variant-numeric:tabular-nums;line-height:calc(24px + var(--dsh-content-font-delta,0px));text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.psHEaW_details{box-sizing:border-box;width:calc(100% - 22px - var(--dsh-content-font-delta,0px));margin:4px 0 0 calc(22px + var(--dsh-content-font-delta,0px));background:var(--dsw-alias-markdown-code-block);color:var(--dsw-alias-label-tertiary);border-radius:8px;grid-template-columns:minmax(76px,auto) minmax(0,1fr);gap:6px 16px;padding:10px 16px 12px 12px;font-size:12px;line-height:18px;display:grid}.psHEaW_details dt,.psHEaW_details dd{min-width:0;margin:0}.psHEaW_details dd{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;text-align:right}.psHEaW_details .psHEaW_route{overflow-wrap:anywhere}.psHEaW_reasoning{color:var(--dsw-alias-label-tertiary);white-space:nowrap}.psHEaW_totalLabel,.psHEaW_details .psHEaW_totalValue{border-top:1px solid var(--dsw-alias-separator-primary);color:var(--dsw-alias-label-primary);padding-top:6px}@media (width<=480px){.psHEaW_details{gap-inline:10px;grid-template-columns:minmax(72px,auto) minmax(0,1fr)}}";
-		const tagId$4 = "@prettier-ai/dsh-client-ui-chat/TurnUsageDisclosure.module.css";
+		//#region \0dsh-css:/home/runner/work/dsh-publisher/dsh-publisher/upstream/packages/client/ui-chat/src/client/chat/TurnUsagePanel.module.css.mjs
+		const css$4 = ".ZVOUHW_root{min-width:0;display:inline-flex}.ZVOUHW_root+.ZVOUHW_root{margin-left:-6px}.ZVOUHW_trigger{min-width:0;height:calc(28px + var(--dsh-content-font-delta,0px));color:var(--dsw-alias-label-tertiary);font-size:var(--dsh-content-font-size-secondary,13px);font-variant-numeric:tabular-nums;line-height:calc(24px + var(--dsh-content-font-delta,0px));white-space:nowrap;cursor:pointer;background:0 0;border:none;border-radius:28px;align-items:center;gap:4px;padding:6px 8px;display:inline-flex}.ZVOUHW_label{text-overflow:ellipsis;min-width:0;overflow:hidden}.ZVOUHW_trigger svg{width:calc(15px + var(--dsh-content-font-delta,0px));height:calc(15px + var(--dsh-content-font-delta,0px));flex:none}.ZVOUHW_trigger:hover,.ZVOUHW_trigger[aria-expanded=true]{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-secondary)}@media (width<=480px){.ZVOUHW_trigger{width:calc(28px + var(--dsh-content-font-delta,0px));justify-content:center;padding:6px}.ZVOUHW_trigger .ZVOUHW_label{display:none}.ZVOUHW_root+.ZVOUHW_root{margin-left:0}}.ZVOUHW_panel{z-index:1100;box-sizing:border-box;border:1px solid var(--dsw-alias-border-inverted);background:var(--dsw-specific-menu);width:max-content;min-width:min(300px,100vw - 24px);max-width:min(440px,100vw - 24px);box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-secondary);cursor:default;border-radius:12px;padding:16px;font-size:12px;line-height:18px;position:fixed}.ZVOUHW_title{color:var(--dsw-alias-label-primary);justify-content:space-between;gap:16px;margin-bottom:8px;font-weight:500;display:flex}.ZVOUHW_titleRule{border-top:1px solid var(--dsw-alias-border-l2);margin-bottom:10px}.ZVOUHW_titleValue{font-variant-numeric:tabular-nums}.ZVOUHW_titleLabel{align-items:center;gap:6px;min-width:0;display:inline-flex}.ZVOUHW_titleLabel svg{flex:none;width:14px;height:14px}.ZVOUHW_details{color:var(--dsw-alias-label-tertiary);grid-template-columns:minmax(76px,auto) minmax(0,1fr);gap:6px 16px;margin:0;display:grid}.ZVOUHW_details dt,.ZVOUHW_details dd{min-width:0;margin:0}.ZVOUHW_details dd{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;text-align:right}.ZVOUHW_details .ZVOUHW_route{overflow-wrap:anywhere}.ZVOUHW_reasoning{color:var(--dsw-alias-label-tertiary);white-space:nowrap}";
+		const tagId$4 = "@prettier-ai/dsh-client-ui-chat/TurnUsagePanel.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$4) + "]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "@prettier-ai/dsh-client-ui-chat";
@@ -3123,81 +3379,194 @@ window.__ModuleLoader__.load({
 			tag.textContent = css$4;
 			document.head.appendChild(tag);
 		}
-		var TurnUsageDisclosure_module_css_default = {
-			"chevron": "psHEaW_chevron",
-			"details": "psHEaW_details",
-			"reasoning": "psHEaW_reasoning",
-			"root": "psHEaW_root",
-			"route": "psHEaW_route",
-			"separator": "psHEaW_separator",
-			"summary": "psHEaW_summary",
-			"totalLabel": "psHEaW_totalLabel",
-			"totalValue": "psHEaW_totalValue"
+		var TurnUsagePanel_module_css_default = {
+			"details": "ZVOUHW_details",
+			"label": "ZVOUHW_label",
+			"panel": "ZVOUHW_panel",
+			"reasoning": "ZVOUHW_reasoning",
+			"root": "ZVOUHW_root",
+			"route": "ZVOUHW_route",
+			"title": "ZVOUHW_title",
+			"titleLabel": "ZVOUHW_titleLabel",
+			"titleRule": "ZVOUHW_titleRule",
+			"titleValue": "ZVOUHW_titleValue",
+			"trigger": "ZVOUHW_trigger"
 		};
 		//#endregion
-		//#region lib/types/client/chat/TurnUsageDisclosure.js
+		//#region lib/types/client/chat/TurnUsagePanel.js
 		function formatCompactCount(value, t) {
 			return t("message.turnUsage.count", { count: formatTokens(value, t) });
 		}
 		function formatExactCount(value, t) {
 			return t("message.turnUsage.count", { count: formatExactTokens(value, t) });
 		}
-		/** Compact per-Turn usage summary with an opt-in bucket breakdown. */
-		function TurnUsageDisclosure({ usage, t }) {
+		/** Viewport margin the placement clamp keeps (the Menu portal margin). */
+		const PANEL_MARGIN = 12;
+		/** Distance between the trigger's top edge and the panel's bottom. */
+		const PANEL_GAP = 8;
+		/**
+		* Unplaced portal panel: hidden but laid out so the clamp measures real
+		* dimensions (the `useAnchoredPosition` measure pass).
+		*/
+		const MEASURE_STYLE = {
+			visibility: "hidden",
+			left: 0,
+			top: 0
+		};
+		/** One trigger-anchored dialog seat: open state, viewport-clamped placement, outside-close. */
+		function useStatDialog() {
 			const [open, setOpen] = (0, react.useState)(false);
+			const rootRef = (0, react.useRef)(null);
+			const panelRef = (0, react.useRef)(null);
+			const pos = (0, _prettier_ai_dsh_client_ui_primitives.useAnchoredPosition)({
+				open,
+				anchorRef: rootRef,
+				panelRef,
+				side: "top",
+				gap: PANEL_GAP,
+				margin: PANEL_MARGIN
+			});
+			(0, _prettier_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(rootRef, open, setOpen, panelRef);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const onKeyDown = (e) => {
+					if (e.key === "Escape") setOpen(false);
+				};
+				document.addEventListener("keydown", onKeyDown);
+				return () => {
+					document.removeEventListener("keydown", onKeyDown);
+				};
+			}, [open]);
+			return {
+				open,
+				setOpen,
+				rootRef,
+				panelRef,
+				pos
+			};
+		}
+		/**
+		* Turn-usage IconActions pill with a click-open Turn-usage details dialog.
+		* @param props - Turn usage buckets and locale seat.
+		* @returns The trigger and, while open, its portaled dialog anchored above the trigger.
+		*/
+		function TurnUsagePanel({ usage, t }) {
+			const { open, setOpen, rootRef, panelRef, pos } = useStatDialog();
 			const cacheHit = usage.cacheReadTokens === void 0 ? null : formatCacheHitPercent(usage.cacheReadTokens, usage.totalTokens - usage.outputTokens, 1);
 			const total = formatCompactCount(usage.totalTokens, t);
-			const summary = cacheHit === null ? total : t("message.turnUsage.summaryWithCache", {
-				total,
-				percent: cacheHit
-			});
 			const routes = usage.routes?.map((route) => `${route.provider}/${route.model}`).join(", ") ?? "";
-			return (0, react_jsx_runtime.jsx)(_prettier_ai_dsh_client_ui_primitives.DisclosureRow, {
-				icon: (0, react_jsx_runtime.jsx)(_prettier_ai_dsh_client_ui_primitives.IconDataOutline16, {}),
-				title: t("message.turnUsage.title"),
-				open,
-				expandable: true,
-				onToggle: () => {
-					setOpen((value) => !value);
-				},
-				expandOnRowClick: true,
-				keepContentWhenOpen: true,
-				collapsedContent: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("span", {
-					className: TurnUsageDisclosure_module_css_default.separator,
-					"aria-hidden": true
-				}), (0, react_jsx_runtime.jsx)("span", {
-					className: TurnUsageDisclosure_module_css_default.summary,
-					children: summary
-				})] }),
-				className: TurnUsageDisclosure_module_css_default.root,
-				chevronClassName: TurnUsageDisclosure_module_css_default.chevron,
-				children: (0, react_jsx_runtime.jsxs)("dl", {
-					className: TurnUsageDisclosure_module_css_default.details,
-					"data-turn-usage-details": true,
+			return (0, react_jsx_runtime.jsxs)("span", {
+				ref: rootRef,
+				className: TurnUsagePanel_module_css_default.root,
+				children: [(0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: TurnUsagePanel_module_css_default.trigger,
+					"aria-haspopup": "dialog",
+					"aria-expanded": open,
+					onClick: () => {
+						setOpen(!open);
+					},
+					children: [(0, react_jsx_runtime.jsx)(_prettier_ai_dsh_client_ui_primitives.IconDatabaseOutline16, {}), (0, react_jsx_runtime.jsx)("span", {
+						className: TurnUsagePanel_module_css_default.label,
+						children: t("message.turnUsage.consumed", { total })
+					})]
+				}), open && (0, react_dom.createPortal)((0, react_jsx_runtime.jsxs)("div", {
+					ref: panelRef,
+					className: TurnUsagePanel_module_css_default.panel,
+					role: "dialog",
+					"aria-label": t("message.turnUsage.title"),
+					style: pos ?? MEASURE_STYLE,
 					children: [
-						routes !== "" && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.model") }), (0, react_jsx_runtime.jsx)("dd", {
-							className: TurnUsageDisclosure_module_css_default.route,
-							children: routes
-						})] }),
-						(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.input") }),
-						(0, react_jsx_runtime.jsx)("dd", { children: formatExactCount(usage.uncachedInputTokens, t) }),
-						usage.cacheReadTokens !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.cacheRead") }), (0, react_jsx_runtime.jsx)("dd", { children: formatExactCount(usage.cacheReadTokens, t) })] }),
-						usage.cacheWriteTokens !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.cacheWrite") }), (0, react_jsx_runtime.jsx)("dd", { children: formatExactCount(usage.cacheWriteTokens, t) })] }),
-						(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.output") }),
-						(0, react_jsx_runtime.jsxs)("dd", { children: [formatExactCount(usage.outputTokens, t), usage.reasoningTokens !== void 0 && (0, react_jsx_runtime.jsx)("span", {
-							className: TurnUsageDisclosure_module_css_default.reasoning,
-							children: t("message.turnUsage.reasoning", { tokens: formatExactCount(usage.reasoningTokens, t) })
-						})] }),
-						(0, react_jsx_runtime.jsx)("dt", {
-							className: TurnUsageDisclosure_module_css_default.totalLabel,
-							children: t("message.turnUsage.total")
+						(0, react_jsx_runtime.jsxs)("div", {
+							className: TurnUsagePanel_module_css_default.title,
+							children: [(0, react_jsx_runtime.jsxs)("span", {
+								className: TurnUsagePanel_module_css_default.titleLabel,
+								children: [(0, react_jsx_runtime.jsx)(_prettier_ai_dsh_client_ui_primitives.IconDatabaseOutline16, {}), t("message.turnUsage.title")]
+							}), (0, react_jsx_runtime.jsx)("span", {
+								className: TurnUsagePanel_module_css_default.titleValue,
+								children: formatExactCount(usage.totalTokens, t)
+							})]
 						}),
-						(0, react_jsx_runtime.jsx)("dd", {
-							className: TurnUsageDisclosure_module_css_default.totalValue,
-							children: formatExactCount(usage.totalTokens, t)
+						(0, react_jsx_runtime.jsx)("div", {
+							className: TurnUsagePanel_module_css_default.titleRule,
+							"aria-hidden": true
+						}),
+						(0, react_jsx_runtime.jsxs)("dl", {
+							className: TurnUsagePanel_module_css_default.details,
+							"data-turn-usage-details": true,
+							children: [
+								routes !== "" && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.model") }), (0, react_jsx_runtime.jsx)("dd", {
+									className: TurnUsagePanel_module_css_default.route,
+									children: routes
+								})] }),
+								cacheHit !== null && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.cacheHit") }), (0, react_jsx_runtime.jsx)("dd", { children: `${cacheHit}%` })] }),
+								(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.input") }),
+								(0, react_jsx_runtime.jsx)("dd", { children: formatExactCount(usage.uncachedInputTokens, t) }),
+								usage.cacheReadTokens !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.cacheRead") }), (0, react_jsx_runtime.jsx)("dd", { children: formatExactCount(usage.cacheReadTokens, t) })] }),
+								usage.cacheWriteTokens !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.cacheWrite") }), (0, react_jsx_runtime.jsx)("dd", { children: formatExactCount(usage.cacheWriteTokens, t) })] }),
+								(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.output") }),
+								(0, react_jsx_runtime.jsxs)("dd", { children: [formatExactCount(usage.outputTokens, t), usage.reasoningTokens !== void 0 && (0, react_jsx_runtime.jsx)("span", {
+									className: TurnUsagePanel_module_css_default.reasoning,
+									children: t("message.turnUsage.reasoning", { tokens: formatExactCount(usage.reasoningTokens, t) })
+								})] })
+							]
 						})
 					]
-				})
+				}), document.body)]
+			});
+		}
+		/**
+		* Turn-time IconActions pill with a click-open Turn-time details dialog.
+		* @param props - Turn timing facts and locale seat.
+		* @returns The clock-and-duration trigger and, while open, its portaled dialog anchored above the trigger.
+		*/
+		function TurnTimePanel({ runMs, tokensPerSecond, ttftMs, t }) {
+			const { open, setOpen, rootRef, panelRef, pos } = useStatDialog();
+			return (0, react_jsx_runtime.jsxs)("span", {
+				ref: rootRef,
+				className: TurnUsagePanel_module_css_default.root,
+				children: [(0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: TurnUsagePanel_module_css_default.trigger,
+					"aria-haspopup": "dialog",
+					"aria-expanded": open,
+					onClick: () => {
+						setOpen(!open);
+					},
+					children: [(0, react_jsx_runtime.jsx)(_prettier_ai_dsh_client_ui_primitives.IconClockOutline16, {}), (0, react_jsx_runtime.jsx)("span", {
+						className: TurnUsagePanel_module_css_default.label,
+						children: t("message.ranFor", { duration: formatRunDuration(runMs, t) })
+					})]
+				}), open && (0, react_dom.createPortal)((0, react_jsx_runtime.jsxs)("div", {
+					ref: panelRef,
+					className: TurnUsagePanel_module_css_default.panel,
+					role: "dialog",
+					"aria-label": t("message.turnTime.title"),
+					style: pos ?? MEASURE_STYLE,
+					children: [
+						(0, react_jsx_runtime.jsx)("div", {
+							className: TurnUsagePanel_module_css_default.title,
+							children: (0, react_jsx_runtime.jsxs)("span", {
+								className: TurnUsagePanel_module_css_default.titleLabel,
+								children: [(0, react_jsx_runtime.jsx)(_prettier_ai_dsh_client_ui_primitives.IconClockOutline16, {}), t("message.turnTime.title")]
+							})
+						}),
+						(0, react_jsx_runtime.jsx)("div", {
+							className: TurnUsagePanel_module_css_default.titleRule,
+							"aria-hidden": true
+						}),
+						(0, react_jsx_runtime.jsxs)("dl", {
+							className: TurnUsagePanel_module_css_default.details,
+							"data-turn-time-details": true,
+							children: [
+								(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnTime.duration") }),
+								(0, react_jsx_runtime.jsx)("dd", { children: formatRunDuration(runMs, t) }),
+								tokensPerSecond !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnTime.speed") }), (0, react_jsx_runtime.jsx)("dd", { children: t("message.tokensPerSecond", { tps: formatTokensPerSecond(tokensPerSecond) }) })] }),
+								ttftMs !== void 0 && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsx)("dt", { children: t("message.turnTime.ttft") }), (0, react_jsx_runtime.jsx)("dd", { children: t("duration.seconds", { seconds: formatLatencySeconds(ttftMs) }) })] })
+							]
+						})
+					]
+				}), document.body)]
 			});
 		}
 		//#endregion
@@ -3212,7 +3581,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/dsh-publisher/dsh-publisher/upstream/packages/client/ui-chat/src/client/chat/TurnTailNodeView.module.css.mjs
-		const css$3 = ".v8MmmG_root{flex-direction:column;gap:16px;display:flex}.v8MmmG_footer{flex-direction:column;gap:4px;min-width:0;display:flex}.v8MmmG_actions{margin-left:-6px}";
+		const css$3 = ".v8MmmG_root{flex-direction:column;gap:16px;display:flex}.v8MmmG_actions{margin-left:-6px}";
 		const tagId$3 = "@prettier-ai/dsh-client-ui-chat/TurnTailNodeView.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$3) + "]") === null) {
 			const tag = document.createElement("style");
@@ -3223,7 +3592,6 @@ window.__ModuleLoader__.load({
 		}
 		var TurnTailNodeView_module_css_default = {
 			"actions": "v8MmmG_actions",
-			"footer": "v8MmmG_footer",
 			"root": "v8MmmG_root"
 		};
 		//#endregion
@@ -3232,6 +3600,7 @@ window.__ModuleLoader__.load({
 		const TurnTailNodeView = (0, react.memo)(function TurnTailNodeView({ node, openFile, forkAt, renderSlot, renderSlotChain, t, useChat }) {
 			const data = node.data;
 			const hasLaterChatNode = useChat((snapshot) => snapshot.locations.getTurn(data.turn).at(-1) !== node.key);
+			const isLatestTurn = useChat((snapshot) => snapshot.timeline.turnOrder.at(-1) === data.turn);
 			const turn = node.location.kind === "turn" || node.location.kind === "step" ? node.location.turn : void 0;
 			if (turn === void 0) return null;
 			const closing = data.closing;
@@ -3250,27 +3619,27 @@ window.__ModuleLoader__.load({
 			return (0, react_jsx_runtime.jsxs)("div", {
 				className: TurnTailNodeView_module_css_default.root,
 				"data-turn-tail": data.turn,
-				"data-time-hover-root": true,
-				children: [tail, (0, react_jsx_runtime.jsxs)("div", {
-					className: TurnTailNodeView_module_css_default.footer,
-					children: [data.tokenUsage === void 0 ? null : (0, react_jsx_runtime.jsx)(TurnUsageDisclosure, {
+				"data-actions-reveal": isLatestTurn ? "always" : "hover",
+				children: [tail, (0, react_jsx_runtime.jsx)(MessageIconActions, {
+					text: assistantText(closing.blocks),
+					time: closing.time,
+					clock: "end",
+					onBranch: () => {
+						forkAt(closing.finalNode.seq);
+					},
+					branchUnavailable: data.branchUnavailable || hasLaterChatNode,
+					className: TurnTailNodeView_module_css_default.actions,
+					extraActions: assistantActions,
+					usageAction: (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [data.tokenUsage !== void 0 && (0, react_jsx_runtime.jsx)(TurnUsagePanel, {
 						usage: data.tokenUsage,
 						t
-					}), (0, react_jsx_runtime.jsx)(MessageIconActions, {
-						text: assistantText(closing.blocks),
-						time: closing.time,
+					}), runMs !== void 0 && (0, react_jsx_runtime.jsx)(TurnTimePanel, {
 						runMs,
-						ttftMs: data.ttftMs,
 						tokensPerSecond: data.tokensPerSecond,
-						clock: "end",
-						onBranch: () => {
-							forkAt(closing.finalNode.seq);
-						},
-						branchUnavailable: data.branchUnavailable || hasLaterChatNode,
-						className: TurnTailNodeView_module_css_default.actions,
-						extraActions: assistantActions,
+						ttftMs: data.ttftMs,
 						t
-					})]
+					})] }),
+					t
 				})]
 			});
 		});
@@ -4252,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.
@@ -5128,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
@@ -5194,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,
@@ -7534,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) => {