@lament_z/dsh-client-ui-chat-timeline 0.1.0 → 0.2.0

package/lib/client.js

@@ -7,87 +7,12 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let react_dom = require("react-dom");
 		let react_jsx_runtime = require("react/jsx-runtime");
-		/** Human node kinds that anchor a tick. */
-		const HUMAN_KINDS = /* @__PURE__ */ new Set(["user", "steering"]);
-		/** Extract concatenated text from a ContentBlock-like list.
-		*  dsh-llm content blocks switch on `type`; assistant blocks use `kind` — accept both. */
-		function blocksText(blocks) {
-			if (!Array.isArray(blocks)) return "";
-			const parts = [];
-			for (const block of blocks) if (block !== null && typeof block === "object") {
-				const record = block;
-				if (record.kind === "text" || record.type === "text") {
-					if (typeof record.text === "string" && record.text.length > 0) parts.push(record.text);
-				}
-			}
-			return parts.join("\n\n");
-		}
-		/** Collapse each paragraph's whitespace and drop empties (ZCode u5e parity). */
-		function collapseParagraphs(text, maxParagraphs) {
-			return text.trim().split(/\n\s*\n/u).map((paragraph) => paragraph.replace(/\s+/gu, " ").trim()).filter(Boolean).slice(0, Math.max(1, maxParagraphs));
-		}
-		/** Truncate to the budget with an ellipsis, never below the floor (ZCode d5e parity). */
-		function truncatePreview(text, maxChars, floor = 8) {
-			const budget = Math.max(floor, maxChars);
-			if (text.length <= budget) return text;
-			return `${text.slice(0, budget - 3).trimEnd()}...`;
-		}
-		/** Build one preview string from raw texts under the shared budget. */
-		function buildPreview(texts, fallback) {
-			const paragraphs = collapseParagraphs(texts.join("\n\n"), 2);
-			if (paragraphs.length === 0) return fallback;
-			return truncatePreview(paragraphs.join("\n"), 220);
-		}
-		/**
-		* Derive the tick directory from the snapshot's ordered node list.
-		* @param nodes - conversation snapshot nodes in seq order.
-		* @param running - whether the session currently has a running turn.
-		* @param labels - localized preview fallbacks.
-		* @returns one item per human input, in order.
-		*/
-		function buildTimelineItems(nodes, running, labels) {
-			const drafts = [];
-			for (const node of nodes) {
-				if (HUMAN_KINDS.has(node.kind)) {
-					const text = blocksText(node.content);
-					drafts.push({
-						key: `n${node.seq}`,
-						seq: node.seq,
-						time: typeof node.time === "number" ? node.time : 0,
-						userTexts: text === "" ? [] : [text],
-						hasUserText: text !== "",
-						assistantTexts: []
-					});
-					continue;
-				}
-				if (node.kind !== "assistant" || drafts.length === 0) continue;
-				const text = blocksText(node.blocks);
-				if (text !== "") drafts[drafts.length - 1].assistantTexts.push(text);
-			}
-			const last = drafts.length - 1;
-			return drafts.map((draft, index) => {
-				const isLive = running && index === last;
-				const assistantTexts = draft.assistantTexts;
-				const assistantKind = assistantTexts.length > 0 ? "text" : isLive ? "running" : "empty";
-				return {
-					key: draft.key,
-					seq: draft.seq,
-					time: draft.time,
-					userPreview: buildPreview(draft.userTexts, labels.userFallback),
-					userFallback: !draft.hasUserText,
-					assistantPreview: buildPreview(assistantTexts, isLive ? labels.assistantRunning : labels.assistantEmpty),
-					assistantKind,
-					running: isLive
-				};
-			});
-		}
-		//#endregion
 		//#region src/client/dom.ts
 		/**
 		* Find the chat scroll container with a candidate chain.
 		* 1. the explicit stable hook `[data-conversation-scroll]`;
 		* 2. the closest scrollable ancestor of the flow column `[data-chat-flow]`;
-		* 3. the largest scrollable element that contains human rows.
+		* 3. the largest scrollable element that contains keyed flow items.
 		*/
 		function findChatContainer(doc) {
 			const direct = doc.querySelector("[data-conversation-scroll]");
@@ -99,7 +24,7 @@ window.__ModuleLoader__.load({
 			let bestHeight = 0;
 			for (const element of Array.from(doc.querySelectorAll("*"))) {
 				if (!isScrollable(element)) continue;
-				if (element.querySelector("[data-chat-flow-kind=\"user\"]") === null) continue;
+				if (element.querySelector("[data-chat-turn]") === null) continue;
 				const height = element.clientHeight;
 				if (height > bestHeight) {
 					best = element;
@@ -122,70 +47,117 @@ window.__ModuleLoader__.load({
 			}
 			return null;
 		}
-		/** Human-turn rows inside the container (falling back to a document-wide query). */
-		function findUserRows(container) {
-			const scope = container ?? document;
-			return Array.from(scope.querySelectorAll("[data-chat-flow-kind=\"user\"]"));
+		/**
+		* The rendered row of `turn` (native anchor attribute `data-chat-turn`),
+		* skipping hidden rows like the native `anchorElement`. Scoped to the chat
+		* container when it is already located (native scopes to its own list), so a
+		* stray second mount cannot hijack the anchor. Null when the turn's events
+		* are not in the loaded window yet.
+		*/
+		function findTurnRow(doc, turn) {
+			if (turn === void 0 || !Number.isSafeInteger(turn) || turn < 0) return null;
+			return (findChatContainer(doc) ?? doc).querySelector(`[data-chat-turn="${turn}"]:not([hidden])`);
+		}
+		/** Native `scrollerOf`: the conversation scrollport owning the row. */
+		function scrollerOfRow(doc, row) {
+			return row.closest("[data-conversation-scroll]") ?? findChatContainer(doc);
+		}
+		/** Row position in scrollport coordinates (native `flowTop`). */
+		function flowTop(row, scroller) {
+			return row.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
 		}
 		/**
-		* The active index: the last human row whose top edge sits above the
-		* container's reading line (40px below the top edge), matching the ZCode
-		* "unit at viewport top" rule; clamps to the last row at scroll bottom.
+		* Native `landOnRow`: instant scroll so the row's top sits 24px below the
+		* scrollport top. Returns false when the scrollport cannot be resolved.
 		*/
-		function computeActiveIndex(container, rows) {
-			if (rows.length === 0) return -1;
-			const top = container.getBoundingClientRect().top + 40;
-			let active = 0;
-			for (let index = 0; index < rows.length; index += 1) if (rows[index].getBoundingClientRect().top <= top) active = index;
-			else break;
-			if (container.scrollHeight - container.scrollTop - container.clientHeight <= 4) return rows.length - 1;
-			return active;
+		function landOnRow(doc, row) {
+			const el = scrollerOfRow(doc, row);
+			if (el === null) return false;
+			el.scrollTop += flowTop(row, el) - 24;
+			return true;
 		}
 		/**
-		* Scroll the given human turn into view. Tries a smooth scroll first; DSH's
-		* windowed conversation list programs scrollTop on scroll events, which can
-		* cancel a smooth animation on the first frame — when nothing has moved after
-		* a short grace period the jump falls back to an instant scroll.
-		* @returns false when the container or row is unavailable.
+		* Native `turnAtLine`: the turn owning the row at a scrollport line.
+		* Hit-tests the line first (elementsFromPoint at the container's horizontal
+		* center) and falls back to one row scan when layout cannot answer (jsdom,
+		* pre-paint). Returns null when no loaded row covers the line.
 		*/
-		function jumpTo(index, behavior) {
-			const container = findChatContainer(document);
-			if (container === null) return false;
-			const row = findUserRows(container)[index];
-			if (row === void 0) return false;
-			const delta = row.getBoundingClientRect().top - container.getBoundingClientRect().top - 12;
-			const target = container.scrollTop + delta;
-			if (behavior === "auto") {
-				container.scrollTo({
-					top: target,
-					behavior: "auto"
-				});
-				return true;
+		function turnAtLine(doc, container, line) {
+			const content = container.getBoundingClientRect();
+			if (typeof doc.elementsFromPoint === "function" && content.width > 0) for (const element of doc.elementsFromPoint(content.left + content.width / 2, line)) {
+				const row = element instanceof HTMLElement ? element.closest("[data-chat-turn]") : null;
+				const turn = Number(row?.dataset.chatTurn);
+				if (row !== null && container.contains(row) && Number.isSafeInteger(turn)) return turn;
 			}
-			const startedAt = container.scrollTop;
-			container.scrollTo({
-				top: target,
-				behavior: "smooth"
-			});
-			window.setTimeout(() => {
-				if (Math.abs(container.scrollTop - startedAt) < 4) container.scrollTo({
-					top: target,
-					behavior: "auto"
-				});
-			}, 700);
-			return true;
+			let found = null;
+			for (const row of Array.from(container.querySelectorAll("[data-chat-turn]"))) {
+				if (row.getBoundingClientRect().top > line) break;
+				const turn = Number(row.dataset.chatTurn);
+				if (Number.isSafeInteger(turn)) found = turn;
+			}
+			return found;
+		}
+		/**
+		* The active index (native `syncActiveTurn`): within 25px of the scroll
+		* bottom the last tick wins; otherwise the reading line sits at
+		* `top + min(96, height * 0.2)` and the active tick is the last one whose
+		* turn does not exceed the turn read at that line. When the line covers no
+		* loaded row, earlier ticks outside the window count as above the viewport
+		* (the window head's predecessor is active, matching 0.1.1 parity).
+		*/
+		function computeActiveIndex(container, doc, turns) {
+			if (turns.length === 0) return -1;
+			if (container.scrollHeight - container.scrollTop - container.clientHeight <= 25) return turns.length - 1;
+			const firstDefined = turns.findIndex((turn) => turn !== void 0);
+			if (firstDefined === -1) return -1;
+			const readTurn = turnAtLine(doc, container, container.getBoundingClientRect().top + Math.min(96, container.clientHeight * .2));
+			let active = -1;
+			if (readTurn !== null) for (let index = 0; index < turns.length; index += 1) {
+				const turn = turns[index];
+				if (turn === void 0 || turn > readTurn) continue;
+				active = index;
+			}
+			if (active !== -1) return active;
+			return firstDefined > 0 ? firstDefined - 1 : 0;
+		}
+		const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+		/** Landing poll budget after `loadThrough` (native settles via its effects; 5s here). */
+		const LAND_POLL_ATTEMPTS = 20;
+		const LAND_POLL_INTERVAL_MS = 250;
+		/**
+		* 跳到第 index 个刻度的完整落点流程（原生 navigateToTurn 的插件侧等价物）：
+		* 1. 按 `data-chat-turn` 找行并原生落位（瞬时、行顶距视口顶 24px）；
+		* 2. 行未挂载时先 `loadThrough(turn/start 的 seq)` 把事件窗口翻页到位；
+		* 3. 轮询等行渲染后落位。任何一步成功即返回 true。
+		*/
+		async function jumpToTurn(doc, index, turns, seqs, loadThrough) {
+			const turn = turns[index];
+			if (turn === void 0) return false;
+			if (landOnRowByTurn(doc, turn)) return true;
+			const seq = seqs[index];
+			if (seq !== void 0 && loadThrough !== void 0) try {
+				await loadThrough(seq);
+			} catch {}
+			for (let attempt = 0; attempt < LAND_POLL_ATTEMPTS; attempt += 1) {
+				await sleep(LAND_POLL_INTERVAL_MS);
+				if (landOnRowByTurn(doc, turn)) return true;
+			}
+			return false;
+		}
+		function landOnRowByTurn(doc, turn) {
+			const row = findTurnRow(doc, turn);
+			if (row === null) return false;
+			return landOnRow(doc, row);
 		}
 		/** Create the probe against a document (injectable for tests). */
 		function probeChatDom(doc) {
 			return {
 				getContainer: () => findChatContainer(doc),
-				getUserRows: () => findUserRows(findChatContainer(doc)),
-				activeIndex: () => {
+				activeIndex: (turns) => {
 					const container = findChatContainer(doc);
 					if (container === null) return -1;
-					return computeActiveIndex(container, findUserRows(container));
-				},
-				jumpTo: (index, behavior) => jumpTo(index, behavior)
+					return computeActiveIndex(container, doc, turns);
+				}
 			};
 		}
 		//#endregion
@@ -202,6 +174,17 @@ window.__ModuleLoader__.load({
   position: fixed;
   z-index: 10;
   width: 48px;
+  /* 水平：会话列左沿，由 rail 写入 --dsh-tl-left。这是唯一保留的测量值——
+     列是 grid 轨道，右侧栏打开时会被挤压，不贴窗口右沿，无法由窗口宽度推导。 */
+  left: var(--dsh-tl-left, 0px);
+  /* 垂直：原生 TurnNavigator 的 band 模型（eGxaPq_frame 的 --turn-rail-band）。
+     会话可视带 = 视口高 − 输入框高；其中点在视口坐标下为
+       100dvh − (会话可视高 + 输入框高) / 2
+     两个变量由宿主写在滚动容器上，本 seat 在滚动容器内可直接继承，故整个垂直
+     几何是纯 CSS：不做测量，也不依赖原生 nav 是否存在于 DOM。 */
+  --dsh-tl-band: calc(var(--dsh-conversation-viewport-height, 100dvh) - var(--dsh-composer-height, 152px));
+  top: calc(100dvh - (var(--dsh-conversation-viewport-height, 100dvh) + var(--dsh-composer-height, 152px)) / 2);
+  transform: translateY(-50%);
   pointer-events: none;
   opacity: 1;
   transition: opacity 150ms ease-out;
@@ -211,12 +194,11 @@ window.__ModuleLoader__.load({
   visibility: hidden;
 }
 .dsh-tl-scroll {
-  position: absolute;
+  position: relative;
   left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
   width: 36px;
-  max-height: calc(100% - 96px);
+  /* 原生 frame 的高度上限：band − 64px，再夹到 420px。 */
+  max-height: min(max(0px, calc(var(--dsh-tl-band) - 64px)), 420px);
   overflow-x: hidden;
   overflow-y: auto;
   padding-block: 4px;
@@ -272,9 +254,11 @@ window.__ModuleLoader__.load({
   max-width: calc(100vw - 2rem);
   padding: 12px;
   border-radius: 10px;
-  background: Canvas;
-  color: CanvasText;
-  border: 1px solid color-mix(in srgb, CanvasText 15%, transparent);
+  /* 原生 tooltip 配对（dsh-web-frontend _bubble_）：灰底 + 静态白字，
+     主题切换由别名变量跟随；灰底与页面背景天然分层。 */
+  background: var(--dsw-alias-tooltip-bg, #43454a);
+  color: var(--dsw-static-neutral-bluish-00, #fff);
+  border: none;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
   pointer-events: none;
 }
@@ -298,11 +282,18 @@ window.__ModuleLoader__.load({
   white-space: pre-line;
   font-size: 13px;
   line-height: 20px;
-  opacity: 0.8;
+  color: var(--dsw-static-neutral-bluish-300, rgba(255, 255, 255, 0.8));
 }
 .dsh-tl-tip-assistant[data-kind="running"],
 .dsh-tl-tip-assistant[data-kind="empty"] {
-  opacity: 0.55;
+  color: var(--dsw-static-neutral-bluish-400, rgba(255, 255, 255, 0.55));
+}
+/* 插件完全接管原生右侧 Turn 导航条：本样式表只随插件存在，插件卸载时
+   removeStyles 移除标签，原生导航条立即恢复。aria-label 跟随宿主语言
+   （英文 Turn navigation / 中文 轮次导航），两个都要盖住。 */
+nav[aria-label='Turn navigation'],
+nav[aria-label='轮次导航'] {
+  display: none !important;
 }
 `;
 		/** Inject the stylesheet once per document. */
@@ -315,22 +306,28 @@ window.__ModuleLoader__.load({
 			tag.textContent = TIMELINE_STYLES;
 			doc.head.appendChild(tag);
 		}
+		/** Remove the stylesheet (plugin teardown): restores the native turn navigator. */
+		function removeStyles(doc) {
+			doc.querySelector("style[data-plugin-css=\"chat-timeline\"]")?.remove();
+		}
 		//#endregion
 		//#region src/client/rail.tsx
 		/**
-		* TimelineRail — the shell.overlay entry: a left-edge tick rail over the
-		* conversation, one tick per human question. Visual and interaction constants
-		* replicate the ZCode TurnNavigator (see .scratch/chat-timeline/spec.md):
+		* TimelineRail — the conversation.input.overlay entry: a left-edge tick rail
+		* over the conversation, one tick per human question. Visual and interaction
+		* constants replicate the ZCode TurnNavigator (see .scratch/chat-timeline/spec.md):
 		* hover ripple scaleX 2.6/1.7/1.25 with opacity 1/.86/.72/.58 over 150ms,
-		* 320px preview cards after a 120ms delay, >=2 questions to render, >=864px
-		* container width, prefers-reduced-motion fallback, full aria labelling.
+		* 320px preview cards after a 120ms delay, prefers-reduced-motion fallback,
+		* full aria labelling.
+		*
+		* Geometry follows the native TurnNavigator model: the vertical band
+		* (--dsh-tl-band, the host's viewport-minus-composer rule) is computed in CSS
+		* from the host variables that the seat inherits, so no JS measures it. Only
+		* the horizontal left edge is measured — the conversation column is a grid
+		* track, so it is not flush to the window edge once the right sidebar opens.
 		*/
 		/** Slot height per tick (10px pitch, ZCode parity). */
 		const ITEM_PITCH = 10;
-		/** Container width below which the rail hides. ZCode uses 864px, but DSH's
-		*  three-pane layout leaves the conversation narrower — the rail overlays the
-		*  left edge without taking layout space, so only truly cramped panes hide. */
-		const MIN_CONTAINER_WIDTH = 560;
 		/** Preview-card hover delays (ms). */
 		const TIP_OPEN_DELAY = 120;
 		const TIP_CLOSE_DELAY = 80;
@@ -364,29 +361,16 @@ window.__ModuleLoader__.load({
 		*  through system colors). */
 		const TICK_COLOR_FOREGROUND = "CanvasText";
 		const TICK_COLOR_SUBTLE = "color-mix(in srgb, CanvasText 42%, transparent)";
-		function useReducedMotion() {
-			const [reduced, setReduced] = (0, react.useState)(false);
-			(0, react.useEffect)(() => {
-				if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-				const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-				const update = () => setReduced(query.matches);
-				update();
-				query.addEventListener("change", update);
-				return () => query.removeEventListener("change", update);
-			}, []);
-			return reduced;
-		}
 		/**
 		* Render the question navigator rail.
 		* @param props - composed slot props.
 		* @returns the rail, or null when it should not render.
 		*/
-		function TimelineRail({ source, t }) {
+		function TimelineRail({ sessionId, source, t }) {
 			const state = (0, react.useSyncExternalStore)(source.subscribe, source.getSnapshot);
-			const reducedMotion = useReducedMotion();
 			const probe = (0, react.useMemo)(() => typeof document === "undefined" ? null : probeChatDom(document), []);
-			const [containerVersion, setContainerVersion] = (0, react.useState)(0);
-			const [rect, setRect] = (0, react.useState)(null);
+			const [container, setContainer] = (0, react.useState)(null);
+			const [navEl, setNavEl] = (0, react.useState)(null);
 			const [activeIndex, setActiveIndex] = (0, react.useState)(-1);
 			const [hoverIndex, setHoverIndex] = (0, react.useState)(void 0);
 			const [tipIndex, setTipIndex] = (0, react.useState)(void 0);
@@ -395,24 +379,31 @@ window.__ModuleLoader__.load({
 				close: void 0
 			});
 			const frame = (0, react.useRef)(0);
-			const labels = (0, react.useMemo)(() => ({
-				userFallback: t("preview.userFallback"),
-				assistantEmpty: t("preview.assistantEmpty"),
-				assistantRunning: t("preview.assistantRunning")
-			}), [t]);
 			const snapshot = state.snapshot;
-			const items = (0, react.useMemo)(() => snapshot === null ? [] : buildTimelineItems(snapshot.nodes, snapshot.running, labels), [snapshot, labels]);
+			const items = (0, react.useMemo)(() => snapshot === null ? [] : snapshot.items, [snapshot]);
+			const sourceRef = (0, react.useRef)(source);
+			sourceRef.current = source;
+			const itemsRef = (0, react.useRef)([]);
+			itemsRef.current = items;
+			const seqs = (0, react.useMemo)(() => items.map((item) => item.seq), [items]);
+			const seqsRef = (0, react.useRef)([]);
+			seqsRef.current = seqs;
+			const turns = (0, react.useMemo)(() => items.map((item) => item.turn), [items]);
+			const turnsRef = (0, react.useRef)([]);
+			turnsRef.current = turns;
 			(0, react.useEffect)(() => {
 				if (typeof document === "undefined") return;
 				ensureStyles(document);
+				return () => removeStyles(document);
 			}, []);
 			(0, react.useEffect)(() => {
 				if (probe === null) return;
 				let attempts = 0;
 				let timer;
 				const tick = () => {
-					if (probe.getContainer() !== null || attempts >= 10) {
-						setContainerVersion((version) => version + 1);
+					const found = probe.getContainer();
+					if (found !== null || attempts >= 10) {
+						setContainer(found);
 						return;
 					}
 					attempts += 1;
@@ -422,26 +413,28 @@ window.__ModuleLoader__.load({
 				return () => {
 					if (timer !== void 0) clearTimeout(timer);
 				};
-			}, [probe, state.sessionId]);
+			}, [probe, sessionId]);
 			(0, react.useEffect)(() => {
-				if (probe === null || containerVersion === 0) return;
-				const container = probe.getContainer();
-				if (container === null) {
-					setRect(null);
-					return;
-				}
+				if (container === null || navEl === null) return;
+				const write = () => {
+					navEl.style.setProperty("--dsh-tl-left", `${container.getBoundingClientRect().left}px`);
+				};
+				write();
+				const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(write);
+				observer?.observe(container);
+				window.addEventListener("resize", write);
+				return () => {
+					observer?.disconnect();
+					window.removeEventListener("resize", write);
+				};
+			}, [container, navEl]);
+			(0, react.useEffect)(() => {
+				if (container === null || probe === null) return;
 				const sync = () => {
 					if (frame.current !== 0) return;
 					frame.current = requestAnimationFrame(() => {
 						frame.current = 0;
-						const box = container.getBoundingClientRect();
-						setRect({
-							left: box.left,
-							top: box.top,
-							height: box.height,
-							width: box.width
-						});
-						setActiveIndex(probe.activeIndex());
+						setActiveIndex(probe.activeIndex(turnsRef.current));
 					});
 				};
 				sync();
@@ -456,8 +449,16 @@ window.__ModuleLoader__.load({
 					if (frame.current !== 0) cancelAnimationFrame(frame.current);
 					frame.current = 0;
 				};
-			}, [probe, containerVersion]);
-			const visible = snapshot !== null && items.length >= 2 && rect !== null && rect.width >= MIN_CONTAINER_WIDTH;
+			}, [container, probe]);
+			(0, react.useEffect)(() => {
+				if (container === null || probe === null) return;
+				setActiveIndex(probe.activeIndex(turns));
+			}, [
+				container,
+				probe,
+				turns
+			]);
+			const visible = snapshot !== null;
 			const focusIndex = hoverIndex;
 			const scheduleTip = (0, react.useCallback)((index) => {
 				if (timers.current.open !== void 0) window.clearTimeout(timers.current.open);
@@ -473,22 +474,18 @@ window.__ModuleLoader__.load({
 				if (timers.current.close !== void 0) window.clearTimeout(timers.current.close);
 			}, []);
 			const jump = (0, react.useCallback)((index) => {
-				probe?.jumpTo(index, reducedMotion ? "auto" : "smooth");
-			}, [probe, reducedMotion]);
-			if (!visible || probe === null || rect === null) return null;
+				jumpToTurn(document, index, turnsRef.current, seqsRef.current, (seq) => sourceRef.current?.jumpThrough(seq) ?? Promise.resolve());
+			}, []);
+			if (!visible || probe === null) return null;
 			const trackHeight = items.length * ITEM_PITCH;
 			const tip = tipIndex !== void 0 ? items[tipIndex] : void 0;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+				ref: setNavEl,
 				"aria-label": t("nav.label"),
 				className: "dsh-tl-nav",
 				"data-visible": visible ? "true" : "false",
 				"data-testid": "dsh-chat-timeline",
 				"data-item-count": items.length,
-				style: {
-					left: rect.left,
-					top: rect.top,
-					height: rect.height
-				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "dsh-tl-scroll",
 					onPointerLeave: () => {
@@ -558,106 +555,134 @@ window.__ModuleLoader__.load({
 			}), tip !== void 0 && tipIndex !== void 0 ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TipCard, {
 				item: tip,
 				index: tipIndex,
-				rect,
+				nav: navEl,
 				t
 			}), document.body) : null] });
 		}
-		function TipCard({ item, index, rect, t }) {
-			const box = document.querySelector("[data-testid=\"dsh-chat-timeline-item\"][data-item-index=\"" + String(index) + "\"]")?.getBoundingClientRect();
+		function TipCard({ item, index, nav, t }) {
+			const box = (nav?.querySelector("[data-testid=\"dsh-chat-timeline-item\"][data-item-index=\"" + String(index) + "\"]"))?.getBoundingClientRect();
+			const railBox = nav?.getBoundingClientRect();
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dsh-tl-tip",
 				"data-testid": "dsh-chat-timeline-tip",
 				style: {
-					left: box === void 0 ? rect.left + 56 : Math.min(box.right + 8, window.innerWidth - 336),
-					top: box === void 0 ? rect.top + 100 : Math.max(8, Math.min(box.top - 4, window.innerHeight - 160))
+					left: box !== void 0 ? Math.min(box.right + 8, window.innerWidth - 336) : railBox !== void 0 ? railBox.right + 8 : 8,
+					top: box !== void 0 ? Math.max(8, Math.min(box.top - 4, window.innerHeight - 160)) : 8
 				},
 				role: "tooltip",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "dsh-tl-tip-user",
-					children: item.userPreview
+					children: item.userFallback ? t("preview.userFallback") : item.userPreview
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "dsh-tl-tip-assistant",
 					"data-kind": item.assistantKind,
-					children: item.assistantPreview
+					children: item.assistantKind === "running" ? t("preview.assistantRunning") : item.assistantKind === "empty" ? t("preview.assistantEmpty") : item.assistantPreview
 				})]
 			});
 		}
 		//#endregion
 		//#region src/client/source.ts
-		const EMPTY_STATE = {
-			sessionId: void 0,
-			snapshot: null
+		/** Project one outline entry onto a tick (previews are host-bounded already). */
+		function itemFromOutline(entry, isLive, labels) {
+			const prompt = typeof entry.prompt === "string" ? entry.prompt : "";
+			const response = typeof entry.response === "string" ? entry.response : "";
+			const assistantKind = response ? "text" : isLive ? "running" : "empty";
+			return {
+				key: `t${entry.turn}`,
+				seq: entry.seq,
+				time: 0,
+				turn: entry.turn,
+				userPreview: prompt || labels.userFallback,
+				userFallback: !prompt,
+				assistantPreview: response || (isLive ? labels.assistantRunning : labels.assistantEmpty),
+				assistantKind,
+				running: isLive
+			};
+		}
+		/** Build the tick list from the outline plus the live running flag. */
+		function itemsFromOutline(outline, running, labels) {
+			const last = outline.length - 1;
+			return outline.map((entry, index) => itemFromOutline(entry, running && index === last, labels));
+		}
+		/** Fallback preview labels when the outline entry carries no text. */
+		const PREVIEW_LABELS = {
+			userFallback: "（无文本）",
+			assistantRunning: "（运行中）",
+			assistantEmpty: "（空）"
 		};
 		/**
-		* Create the source. Subscribes to the sessions list, rebinds to the current
-		* session's snapshot feed on selection change, and republishes a stable state
-		* object whenever the underlying snapshot changes.
+		* Create the source for one session. The id is supplied by the host — the
+		* session-scoped seat hands it to `inject` — so this no longer guesses which
+		* session is open and no longer watches the sessions list: it binds straight
+		* to that session's outline projection and republishes whenever the outline or
+		* the running flag moves.
+		*
+		* A bounded retry covers the materialization window (the seat can render a
+		* beat before `binding(id)` answers); after that the rail stays hidden.
 		* @param sessions - the sessions service face (pass ctx.sessions).
+		* @param sessionId - the session this rail belongs to.
 		* @returns the source face.
 		*/
-		function createTimelineSource(sessions) {
-			let state = EMPTY_STATE;
+		function createTimelineSource(sessions, sessionId) {
+			let state = {
+				sessionId,
+				snapshot: null
+			};
 			const listeners = /* @__PURE__ */ new Set();
-			let unbindSession = null;
-			let boundSessionId;
+			let subscribed = false;
 			let retryTimer;
 			let retryAttempts = 0;
 			const emit = () => {
 				for (const listener of listeners) listener();
 			};
-			const rebind = () => {
-				if (retryTimer !== void 0) {
-					clearTimeout(retryTimer);
-					retryTimer = void 0;
-				}
-				let current;
+			const readBinding = () => {
 				try {
-					current = sessions.list.getSnapshot()?.current;
+					return sessions.binding(sessionId);
 				} catch {
-					current = void 0;
-				}
-				if (current === boundSessionId && retryAttempts === 0) return;
-				boundSessionId = current;
-				unbindSession?.();
-				unbindSession = null;
-				if (current === void 0) {
-					state = EMPTY_STATE;
-					emit();
 					return;
 				}
-				let session;
-				try {
-					session = sessions.binding(current)?.session;
-				} catch {
-					session = void 0;
+			};
+			const bind = () => {
+				if (retryTimer !== void 0) {
+					clearTimeout(retryTimer);
+					retryTimer = void 0;
 				}
-				if (!session) {
+				const session = readBinding()?.session;
+				const outlineFace = (() => {
+					try {
+						return session?.projections?.faceOf?.("turnOutline");
+					} catch {
+						return;
+					}
+				})();
+				if (!session || !outlineFace) {
 					state = {
-						sessionId: current,
+						sessionId,
 						snapshot: null
 					};
-					if (retryAttempts < 10) {
+					emit();
+					if (subscribed && retryAttempts < 10) {
 						retryAttempts += 1;
-						retryTimer = setTimeout(rebind, 500 * retryAttempts);
+						retryTimer = setTimeout(bind, 250 * retryAttempts);
 					}
-					emit();
 					return;
 				}
 				retryAttempts = 0;
 				const push = () => {
 					try {
-						const snap = session.getSnapshot();
+						const outline = outlineFace.getSnapshot();
+						const running = Boolean(session.getSnapshot()?.running);
 						state = {
-							sessionId: current,
+							sessionId,
 							snapshot: {
-								sessionId: current,
-								nodes: Array.isArray(snap?.nodes) ? snap.nodes : [],
-								running: Boolean(snap?.running)
+								sessionId,
+								items: Array.isArray(outline) ? itemsFromOutline(outline, running, PREVIEW_LABELS) : [],
+								running
 							}
 						};
 					} catch {
 						state = {
-							sessionId: current,
+							sessionId,
 							snapshot: null
 						};
 					}
@@ -665,21 +690,17 @@ window.__ModuleLoader__.load({
 				};
 				push();
 				try {
+					outlineFace.subscribe(push);
 					session.subscribe(push);
-					unbindSession = () => {};
-				} catch {
-					unbindSession = null;
-				}
+				} catch {}
 			};
 			return {
 				subscribe(listener) {
 					const first = listeners.size === 0;
 					listeners.add(listener);
 					if (first) {
-						try {
-							sessions.list.subscribe(rebind);
-						} catch {}
-						rebind();
+						subscribed = true;
+						bind();
 					}
 					return () => {
 						listeners.delete(listener);
@@ -687,12 +708,17 @@ window.__ModuleLoader__.load({
 				},
 				getSnapshot() {
 					return state;
+				},
+				jumpThrough(seq) {
+					const session = readBinding()?.session;
+					if (typeof session?.loadThrough !== "function") return Promise.resolve();
+					return session.loadThrough(seq).catch(() => {});
 				}
 			};
 		}
-		/** Build the source from the plugin client context. */
-		function timelineSourceFromContext(ctx) {
-			return createTimelineSource(ctx.sessions);
+		/** Build the source from the plugin client context and the seat's session id. */
+		function timelineSourceFromContext(ctx, sessionId) {
+			return createTimelineSource(ctx.sessions, sessionId);
 		}
 		//#endregion
 		//#region src/client/locales.ts
@@ -721,7 +747,25 @@ window.__ModuleLoader__.load({
 		//#region src/client/index.ts
 		/** Dictionary namespace owned by this plugin. */
 		const NS = "chat-timeline";
-		/** Unique occupant id inside the shared shell.overlay list slot. */
+		/**
+		* Session-scoped seat the rail occupies.
+		*
+		* DSH 0.1.7 moved "which session is open" out of the sessions service: the list
+		* snapshot no longer carries `current`, `binding(id)` only borrows an already
+		* retained scope, and session-controller states outright that view selection
+		* stays outside the Controller. The only supported way to learn the open
+		* session is a session-scoped seat, whose `inject` receives the scope
+		* binding's key — the session id. A root-scope seat (shell.overlay) cannot be
+		* told, which is why the rail no longer lives there.
+		*
+		* `conversation.input.overlay` is rendered for every open session, and unlike
+		* `conversation.view` it is not enumerated into the conversation's view tabs.
+		* It also sits inside the conversation scroller, so the host's geometry
+		* variables (--dsh-conversation-viewport-height / --dsh-composer-height)
+		* inherit to the rail.
+		*/
+		const SEAT = "conversation.input.overlay";
+		/** Unique occupant id inside the shared conversation.input.overlay list slot. */
 		const ENTRY_ID = "chat-timeline";
 		/** Services required by this plugin. */
 		const inject = [
@@ -744,15 +788,20 @@ window.__ModuleLoader__.load({
 					return () => {};
 				}
 			}, "chat-timeline: dictionaries");
-			ctx.slots.inject("shell.overlay", () => {
+			ctx.slots.inject(SEAT, () => {
 				try {
 					return ctx.slots.register({
-						name: "shell.overlay",
+						name: SEAT,
 						id: ENTRY_ID,
+						order: 0,
 						locale: NS,
-						inject: () => ({ source: timelineSourceFromContext(ctx) })
+						inject: (sessionId) => ({
+							sessionId,
+							source: timelineSourceFromContext(ctx, sessionId)
+						})
 					}, TimelineRail);
-				} catch {
+				} catch (err) {
+					console.error(`chat-timeline: ${SEAT} register failed:`, err);
 					return () => {};
 				}
 			});