@khorsheed/dsh-message-timeline 0.2.4 → 0.2.6

package/lib/client.js

@@ -33,23 +33,32 @@ window.__ModuleLoader__.load({
 		/** Simplified Chinese dictionary (the key-set source of truth). */
 		const zh = {
 			"rail.panel": "消息导览",
-			"rail.empty": "暂无用户消息"
+			"rail.empty": "无文本预览",
+			"rail.turn": "第 {turn} 轮",
+			"rail.image": "图片消息",
+			"rail.attachment": "附件消息"
 		};
 		/** English dictionary, checked complete against the zh key set. */
 		const en = {
 			"rail.panel": "Message timeline",
-			"rail.empty": "No user messages"
+			"rail.empty": "No text preview",
+			"rail.turn": "Turn {turn}",
+			"rail.image": "Image message",
+			"rail.attachment": "Attachment message"
 		};
 		/**
 		* Whether a node kind renders as a timeline row. The rail lists user messages
-		* (and optionally steering), plus the message-tools edited/restored bubbles
-		* that the host `order` does not always surface.
+		* (and optionally steering), the message-tools edited/restored bubbles that
+		* the host `order` does not always surface, and automated-turn trigger cards
+		* (whose turns have no human prompt but real transcript content). The same
+		* set drives the reading-position anchor, so landing on a trigger card keeps
+		* the selection on its turn instead of moving to the next user row.
 		* @param kind - the node's kind string.
 		* @param includeSteering - whether steering rows count as user messages.
 		* @returns true when the kind belongs on the timeline.
 		*/
 		function isTimelineRowKind(kind, includeSteering) {
-			return kind === "user" || includeSteering && kind === "steering" || kind === "message-tools-edited" || kind === "message-tools-restored";
+			return kind === "user" || includeSteering && kind === "steering" || kind === "message-tools-edited" || kind === "message-tools-restored" || kind === "turn-trigger";
 		}
 		/**
 		* Whether a node kind carries a hidden span (`{ hiddenStartSeq, seq }`) that
@@ -86,6 +95,25 @@ window.__ModuleLoader__.load({
 			chatView: false
 		};
 		/**
+		* The rect of the first laid-out chat input card in the scrollport. A
+		* business composer (the Room composer) takes the `conversation.composer`
+		* chain as an overlay: the official input bar stays mounted under a
+		* `display: none` fallback wrapper, so its card is still the first marker in
+		* the DOM but measures as a zero rect at y=0 — ending the box there collapses
+		* the panel to zero height. Unlaid-out cards are skipped, so such a layout
+		* falls through to the seat top.
+		* @param scrollport - the official conversation scrollport element.
+		* @returns the card's rect, or null when no laid-out card is rendered.
+		*/
+		function laidOutCard(scrollport) {
+			for (const card of scrollport.querySelectorAll("[data-composer-card]")) {
+				const rect = card.getBoundingClientRect();
+				if (rect.width === 0 && rect.height === 0) continue;
+				return rect;
+			}
+			return null;
+		}
+		/**
 		* Measure the panel's viewport box from one scrollport: its rect inset by the
 		* panel padding, minus the chat input card at the bottom and the conversation
 		* tab strip at the top. The tabs render just above the scrollport, but
@@ -95,7 +123,7 @@ window.__ModuleLoader__.load({
 		* whole `[data-composer-seat]` top: dock cards (goal/todo/queue) sit above
 		* the input inside the seat, and counting them would push the timeline up off
 		* the conversation. Falls back to the seat top, then the column bottom, when
-		* the markers are absent.
+		* no laid-out card is rendered (see {@link laidOutCard}).
 		* The scrollport's own width rides along for the width-cap fallback when the
 		* message-flow probe is unanswered.
 		* @param scrollport - the official conversation scrollport element.
@@ -113,9 +141,9 @@ window.__ModuleLoader__.load({
 					break;
 				}
 			}
-			const card = scrollport.querySelector("[data-composer-card]");
+			const card = laidOutCard(scrollport);
 			const seat = scrollport.querySelector("[data-composer-seat]");
-			const bottom = card !== null ? card.getBoundingClientRect().top - RAIL_VERTICAL_PADDING : seat !== null ? seat.getBoundingClientRect().top - RAIL_VERTICAL_PADDING : rect.bottom - RAIL_VERTICAL_PADDING;
+			const bottom = card !== null ? card.top - RAIL_VERTICAL_PADDING : seat !== null ? seat.getBoundingClientRect().top - RAIL_VERTICAL_PADDING : rect.bottom - RAIL_VERTICAL_PADDING;
 			return {
 				left: rect.left + RAIL_LEFT_INSET,
 				top: rect.top + topInset,
@@ -319,9 +347,7 @@ window.__ModuleLoader__.load({
 						};
 					}
 				},
-				jumpTo: (key) => {
-					if (scrollport !== null) jumpRow(scrollport, key);
-				},
+				jumpTo: (key) => scrollport !== null && jumpRow(scrollport, key),
 				dispose: () => {
 					stopList();
 					stopProvide?.();
@@ -352,6 +378,129 @@ window.__ModuleLoader__.load({
 			return props.useChat ?? EMPTY_HOOK;
 		}
 		//#endregion
+		//#region src/client/outline.ts
+		/**
+		* Narrow one wire projection value to outline entries. `turn` and `seq` are
+		* load-bearing — a row cannot exist or jump without them — so damage there
+		* drops the entry; the previews are decorative and degrade to ''. A non-array
+		* value (absent unit included) narrows to undefined.
+		* @param value - the raw `useProjection('turnOutline')` read.
+		* @returns the surviving entries in wire order, or undefined when absent.
+		*/
+		function outlineEntries(value) {
+			if (!Array.isArray(value)) return void 0;
+			const entries = [];
+			for (const raw of value) {
+				const entry = outlineEntry(raw);
+				if (entry !== void 0) entries.push(entry);
+			}
+			return entries;
+		}
+		/**
+		* Narrow one wire entry. `turn` and `seq` must be non-negative safe integers
+		* (seq additionally rejects -0); the previews default to '' when malformed.
+		* @param value - one raw wire entry.
+		* @returns the entry, or undefined when a load-bearing field is damaged.
+		*/
+		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 || Object.is(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 : ""
+			};
+		}
+		//#endregion
+		//#region src/client/rows.ts
+		/**
+		* The first visible loaded row of a turn, of any node kind: the landing
+		* target for a turn with no user-kind row (an automated turn renders a
+		* `turn-trigger` card, not a user bubble), mirroring the official rail's
+		* `user ?? loaded[0]` anchor. Only nodes in the host's visible `order`
+		* qualify — a store-only or hidden node is not a jump target.
+		* @param order - visible chat node keys in render order.
+		* @param nodes - the live node store.
+		* @param seq - the turn's `turn/start` seq (inclusive).
+		* @param end - the next turn's start seq (exclusive), or Infinity for the last turn.
+		* @returns the anchor key, or null when the turn has no visible loaded row.
+		*/
+		function firstVisibleKeyInTurn(order, nodes, seq, end) {
+			for (const key of order) {
+				const node = nodes.get(key);
+				if (node === void 0) continue;
+				if (node.anchorSeq < seq) continue;
+				if (node.anchorSeq >= end) break;
+				if (node.visibility === "hidden") continue;
+				return key;
+			}
+			return null;
+		}
+		/**
+		* Wrap one loaded item as a rail row.
+		* @param item - the window row.
+		* @param turn - its owning outline turn, or undefined.
+		* @returns the loaded rail row.
+		*/
+		function toLoadedRow(item, turn) {
+			return {
+				kind: "loaded",
+				id: item.key,
+				key: item.key,
+				node: item.node,
+				anchorSeq: item.node.anchorSeq,
+				turn
+			};
+		}
+		/**
+		* Merge loaded rows with the outline into the full row list. Both inputs are
+		* transcript-ordered (loaded rows anchorSeq-ascending, the outline strictly
+		* increasing by turn), so one pass interleaves them without a final sort: an
+		* outline entry whose seq range holds at least one loaded row is covered and
+		* emits nothing; every other entry emits its outline row at the range's
+		* position. A loaded row belongs to the last entry whose start it follows —
+		* when the window runs ahead of the projection feed, the newest rows read as
+		* the last named turn until the feed catches up (suppressing its outline row
+		* beats duplicating the turn).
+		* @param loaded - the window's user rows, anchorSeq-ascending.
+		* @param outline - narrowed outline entries, or undefined (capability absent).
+		* @returns the merged row list, transcript-ordered.
+		*/
+		function mergeRows(loaded, outline) {
+			if (outline === void 0) return loaded.map((item) => toLoadedRow(item, void 0));
+			const rows = [];
+			let cursor = 0;
+			for (const [index, entry] of outline.entries()) {
+				const end = outline.at(index + 1)?.seq ?? Number.POSITIVE_INFINITY;
+				let covered = false;
+				for (;;) {
+					const item = loaded[cursor];
+					if (item === void 0 || item.node.anchorSeq >= end) break;
+					rows.push(toLoadedRow(item, item.node.anchorSeq >= entry.seq ? entry.turn : void 0));
+					covered = covered || item.node.anchorSeq >= entry.seq;
+					cursor += 1;
+				}
+				if (!covered) rows.push({
+					kind: "outline",
+					id: `turn:${entry.turn}`,
+					turn: entry.turn,
+					seq: entry.seq,
+					anchorSeq: entry.seq,
+					prompt: entry.prompt
+				});
+			}
+			for (;;) {
+				const item = loaded[cursor];
+				if (item === void 0) break;
+				rows.push(toLoadedRow(item, void 0));
+				cursor += 1;
+			}
+			return rows;
+		}
+		//#endregion
 		//#region src/client/preview.ts
 		/**
 		* Join the text blocks of one message into a single preview string.
@@ -402,7 +551,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:src/client/TimelineRail.module.css.mjs
-		const css = "._8u17xW_panel{scrollbar-width:none;z-index:100;pointer-events:none;flex-direction:column;padding:4px 8px;display:flex;position:fixed;overflow-y:auto}._8u17xW_panel:before,._8u17xW_panel:after{content:\"\";margin:auto}._8u17xW_panel::-webkit-scrollbar{display:none}._8u17xW_item{width:100%;max-width:20px;color:var(--dsw-alias-label-tertiary);text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;pointer-events:auto;opacity:.55;background:0 0;border:none;flex:none;align-items:center;gap:8px;padding:5px 0;font-size:13px;line-height:1.5;transition:opacity .12s;display:flex}._8u17xW_panel:hover ._8u17xW_item,._8u17xW_panel:focus-within ._8u17xW_item{opacity:1;max-width:100%}._8u17xW_tick{background:var(--dsw-static-deepseek-400);border-radius:2px;flex:none;width:3px;height:14px}._8u17xW_itemCurrent{color:var(--dsw-static-deepseek-500);opacity:.75}._8u17xW_tickCurrent{background:var(--dsw-static-deepseek-500)}._8u17xW_itemText{white-space:nowrap;text-overflow:ellipsis;opacity:0;transition:opacity .12s;overflow:hidden}._8u17xW_panel:hover ._8u17xW_itemText,._8u17xW_panel:focus-within ._8u17xW_itemText{opacity:1;transition-delay:90ms}._8u17xW_itemFocused{color:var(--dsw-alias-label-primary);font-weight:600}._8u17xW_item:focus:not(:focus-visible){outline:none}._8u17xW_item:focus-visible{outline:1px solid var(--dsw-alias-state-business-primary);outline-offset:1px}";
+		const css = "._8u17xW_panel{scrollbar-width:none;z-index:100;pointer-events:none;flex-direction:column;padding:4px 8px;display:flex;position:fixed;overflow-y:auto}._8u17xW_panel::-webkit-scrollbar{display:none}._8u17xW_item{width:100%;max-width:20px;color:var(--dsw-alias-label-tertiary);text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none;pointer-events:auto;opacity:.55;background:0 0;border:none;flex:none;align-items:center;gap:8px;padding:5px 0;font-size:13px;line-height:1.5;transition:opacity .12s;display:flex}._8u17xW_panel:hover ._8u17xW_item,._8u17xW_panel:focus-within ._8u17xW_item{opacity:1;max-width:100%}._8u17xW_tick{background:var(--dsw-alias-label-tertiary);border-radius:2px;flex:none;width:3px;height:14px}._8u17xW_itemCurrent{color:var(--dsw-static-deepseek-500);opacity:1;font-weight:600}._8u17xW_tickCurrent{background:var(--dsw-static-deepseek-500);height:18px}._8u17xW_itemText{white-space:nowrap;text-overflow:ellipsis;opacity:0;transition:opacity .12s;overflow:hidden}._8u17xW_panel:hover ._8u17xW_itemText,._8u17xW_panel:focus-within ._8u17xW_itemText{opacity:1;transition-delay:90ms}._8u17xW_itemFocused{color:var(--dsw-alias-label-primary);font-weight:600}._8u17xW_item:focus:not(:focus-visible){outline:none}._8u17xW_item:focus-visible{outline:1px solid var(--dsw-alias-state-business-primary);outline-offset:1px}._8u17xW_itemPending ._8u17xW_tick{background:var(--dsw-static-deepseek-400);animation:1s ease-in-out infinite _8u17xW_railPending}@keyframes _8u17xW_railPending{50%{opacity:.2}}@media (prefers-reduced-motion:reduce){._8u17xW_itemPending ._8u17xW_tick{animation:none}}._8u17xW_panelNarrow{z-index:101}._8u17xW_panelNarrow:hover,._8u17xW_panelNarrow:focus-within{background:var(--dsw-alias-bg-layer-1);border-radius:8px;box-shadow:0 4px 16px #0000002e;width:var(--panel-wide)!important}";
 		const tagId = "@khorsheed/dsh-message-timeline/TimelineRail.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -412,13 +561,16 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var TimelineRail_module_css_default = {
-			"itemCurrent": "_8u17xW_itemCurrent",
+			"panelNarrow": "_8u17xW_panelNarrow",
+			"itemText": "_8u17xW_itemText",
 			"panel": "_8u17xW_panel",
-			"tick": "_8u17xW_tick",
-			"item": "_8u17xW_item",
+			"itemPending": "_8u17xW_itemPending",
 			"tickCurrent": "_8u17xW_tickCurrent",
+			"item": "_8u17xW_item",
+			"itemCurrent": "_8u17xW_itemCurrent",
 			"itemFocused": "_8u17xW_itemFocused",
-			"itemText": "_8u17xW_itemText"
+			"tick": "_8u17xW_tick",
+			"railPending": "_8u17xW_railPending"
 		};
 		//#endregion
 		//#region src/client/TimelineRail.tsx
@@ -426,20 +578,52 @@ window.__ModuleLoader__.load({
 		* Message timeline panel, browser half. One entry in the official
 		* conversation.session.header.utilities seat anchors the plugin into the
 		* session scope and renders, through a body portal, the flat floating
-		* timeline over the left edge of the chat scrollport: one row per loaded
-		* user message — a tick plus an ellipsized one-line preview, no frame and no
+		* timeline over the left edge of the chat scrollport: one row per user
+		* message — a tick plus an ellipsized one-line preview, no frame and no
 		* visible scrollbar. At rest only the dimmed ticks show, the reading
 		* position's tick in blue (the latest message until the tracker answers);
 		* hovering or keyboard-focusing the panel reveals the row texts with the
 		* blue row on top, and clicking a row jumps the transcript to that message.
 		* The panel is always on while the chat view shows; the `enabled` config is
 		* the off switch.
+		*
+		* The row list is whole-session from the moment the session opens: the host
+		* `turnOutline` projection names every started turn, and the loaded chat
+		* window overlays richer previews (plus steering rows and message-tools
+		* bubbles) for the turns it covers. A turn outside the window renders as a
+		* dimmed outline row; confirming it pages history back through the turn's
+		* `turn/start` seq (the session jump loader) and lands on the freshly loaded
+		* row. When the host serves no turnOutline value the panel degrades to the
+		* loaded window alone, paged by prefetch and panel-top scrolls.
 		*/
 		/** Extract the preview blocks of one user/steering node (kind-checked by the caller). */
 		function nodeContent(node) {
 			return node.data.content ?? [];
 		}
 		/**
+		* One row's display text: the loaded row's joined text blocks, or the outline
+		* entry's bounded first-prompt preview. `null` means the message carries no
+		* text (an image/attachment-only input, or an automated turn with no human
+		* prompt) — the row renders the `rail.empty` label instead.
+		*/
+		function rowPreview(row) {
+			return row.kind === "loaded" ? previewText(nodeContent(row.node)) : row.prompt !== "" ? row.prompt : null;
+		}
+		/**
+		* The row's display label: the text preview when there is one, else a
+		* kind-aware fallback — the turn number for an outline-only turn, and an
+		* image/attachment label for a loaded message with no text blocks.
+		*/
+		function rowLabel(row, t) {
+			const preview = rowPreview(row);
+			if (preview !== null) return preview;
+			if (row.kind === "outline") return t("rail.turn", { turn: row.turn });
+			const types = new Set(nodeContent(row.node).map((block) => block.type));
+			if (types.has("image")) return t("rail.image");
+			if (types.has("file")) return t("rail.attachment");
+			return t("rail.empty");
+		}
+		/**
 		* Horizontal panel padding, matching `.panel`'s `padding: 4px 8px`: the text
 		* band sits this far inside the box, so the width budget must give it back
 		* for {@link PANEL_GAP} to be the visible gap to the message flow.
@@ -449,12 +633,22 @@ window.__ModuleLoader__.load({
 		const PANEL_GAP = 16;
 		/** Degraded width cap (fraction of the scrollport) while the flow probe is unanswered. */
 		const DEGRADED_WIDTH_RATIO = .4;
+		/** Rest width of the narrow-layout tick strip (px) — fits the flow's left padding. */
+		const PANEL_NARROW_REST_WIDTH = 24;
+		/** Expanded width of the narrow-layout hover overlay (fraction of the scrollport). */
+		const NARROW_WIDE_RATIO = .6;
+		/**
+		* Frames an outline jump retries the DOM scroll after its row materializes in
+		* the chat store: the transcript renders the new page in the same commit or a
+		* near frame, and a half-second budget covers the skew without hanging.
+		*/
+		const JUMP_RETRY_FRAMES = 30;
 		/**
 		* The header-utilities entry: the portal timeline panel.
 		* @param props - composed props (see {@link TimelineRailProps}).
 		* @returns nothing visible in the seat; the floating panel while the chat view shows.
 		*/
-		function TimelineRail({ sessionId, includeSteering, panelWidth, initialPages, loadOlder, jumpTo, useRail, t, ...standard }) {
+		function TimelineRail({ sessionId, includeSteering, panelWidth, initialPages, loadOlder, loadThrough, jumpTo, useRail, t, ...standard }) {
 			const rail = useRail((s) => s);
 			const useChatSlice = chatHookOf(standard);
 			const useSession = standard.useSession;
@@ -462,6 +656,8 @@ window.__ModuleLoader__.load({
 			const nodes = useChatSlice((c) => c.nodes);
 			const hasMore = useSession((s) => s.hasMore);
 			const loadingOlder = useSession((s) => s.loadingOlder);
+			const outlineValue = standard.useProjection?.("turnOutline");
+			const outline = (0, react.useMemo)(() => outlineEntries(outlineValue), [outlineValue]);
 			const items = (0, react.useMemo)(() => {
 				let store = [];
 				let spans = [];
@@ -470,14 +666,14 @@ window.__ModuleLoader__.load({
 					spans = foldHiddenSpans(store);
 				} catch {}
 				const hidden = (node) => isSeqHidden(spans, node.anchorSeq);
-				const result = [];
+				const loaded = [];
 				const seen = /* @__PURE__ */ new Set();
 				for (const key of order) {
 					const node = nodes.get(key);
 					if (node === void 0) continue;
 					if (!isTimelineRowKind(node.kind, includeSteering)) continue;
 					if (hidden(node)) continue;
-					result.push({
+					loaded.push({
 						key,
 						node
 					});
@@ -488,27 +684,95 @@ window.__ModuleLoader__.load({
 					if (node.visibility === "hidden") continue;
 					if (seen.has(node.key)) continue;
 					if (hidden(node)) continue;
-					result.push({
+					loaded.push({
 						key: node.key,
 						node
 					});
 					seen.add(node.key);
 				}
-				result.sort((left, right) => left.node.anchorSeq - right.node.anchorSeq);
-				return result;
+				loaded.sort((left, right) => left.node.anchorSeq - right.node.anchorSeq);
+				return mergeRows(loaded, outline);
 			}, [
 				order,
 				nodes,
-				includeSteering
+				includeSteering,
+				outline
 			]);
 			const [focusKey, setFocusKey] = (0, react.useState)(null);
-			const current = focusKey ?? rail.activeKey ?? items.at(-1)?.key ?? null;
+			const current = focusKey ?? rail.activeKey ?? items.at(-1)?.id ?? null;
 			const panelRef = (0, react.useRef)(null);
+			const [pendingJump, setPendingJump] = (0, react.useState)(null);
+			(0, react.useEffect)(() => {
+				setPendingJump(null);
+			}, [sessionId]);
+			const firstSeq = (0, react.useMemo)(() => {
+				const firstKey = order[0];
+				if (firstKey === void 0) return null;
+				return nodes.get(firstKey)?.anchorSeq ?? null;
+			}, [order, nodes]);
+			(0, react.useEffect)(() => {
+				if (pendingJump === null || pendingJump.sessionId !== sessionId) return;
+				const landOn = (key) => {
+					let cancelled = false;
+					let frames = 0;
+					const attempt = () => {
+						if (cancelled) return;
+						frames += 1;
+						if (jumpTo(key) || frames >= JUMP_RETRY_FRAMES) {
+							setPendingJump(null);
+							return;
+						}
+						(typeof requestAnimationFrame === "function" ? requestAnimationFrame : setTimeout)(attempt);
+					};
+					attempt();
+					return () => {
+						cancelled = true;
+					};
+				};
+				const landed = items.find((row) => row.kind === "loaded" && row.turn === pendingJump.turn);
+				if (landed !== void 0) return landOn(landed.key);
+				const end = outline?.find((entry) => entry.turn > pendingJump.turn)?.seq ?? Number.POSITIVE_INFINITY;
+				const anyKey = firstVisibleKeyInTurn(order, nodes, pendingJump.seq, end);
+				if (anyKey !== null) return landOn(anyKey);
+				if (pendingJump.awaiting || loadingOlder) return;
+				if ((firstSeq === null || firstSeq > pendingJump.seq) && hasMore && (!pendingJump.requested || pendingJump.fromHead !== firstSeq)) {
+					const jump = pendingJump;
+					setPendingJump({
+						...jump,
+						requested: true,
+						awaiting: true,
+						fromHead: firstSeq
+					});
+					loadThrough(jump.seq).then(() => {
+						setPendingJump((current) => current !== null && current.sessionId === jump.sessionId && current.turn === jump.turn ? {
+							...current,
+							awaiting: false
+						} : current);
+					});
+					return;
+				}
+				const fallback = items.find((row) => row.kind === "loaded" && row.anchorSeq >= pendingJump.seq);
+				if (fallback !== void 0) jumpTo(fallback.key);
+				setPendingJump(null);
+			}, [
+				items,
+				pendingJump,
+				sessionId,
+				loadingOlder,
+				hasMore,
+				firstSeq,
+				jumpTo,
+				loadThrough,
+				order,
+				nodes,
+				outline
+			]);
 			const active = rail.chatView && rail.ready && rail.sessionId === sessionId;
 			const visible = active && items.length > 0;
 			const gutter = rail.flowLeft === null ? null : rail.flowLeft - rail.left - PANEL_PADDING_X - PANEL_GAP;
-			const width = gutter === null ? Math.min(panelWidth, Math.max(120, rail.scrollportWidth * DEGRADED_WIDTH_RATIO)) : Math.min(panelWidth, Math.max(0, gutter));
-			const tooNarrow = gutter !== null && width < 120;
+			const narrow = gutter !== null && gutter < 120;
+			const width = gutter === null ? Math.min(panelWidth, Math.max(120, rail.scrollportWidth * DEGRADED_WIDTH_RATIO)) : narrow ? PANEL_NARROW_REST_WIDTH : Math.min(panelWidth, gutter);
+			const wideWidth = Math.min(panelWidth, Math.max(120, rail.scrollportWidth * NARROW_WIDE_RATIO));
 			(0, react.useEffect)(() => {
 				panelRef.current?.querySelector(`[data-item-key=${JSON.stringify(current)}]`)?.scrollIntoView({ block: "nearest" });
 			}, [current]);
@@ -518,6 +782,7 @@ window.__ModuleLoader__.load({
 					prefetchedPagesRef.current = 0;
 					return;
 				}
+				if (outline !== void 0) return;
 				if (!hasMore || loadingOlder) return;
 				if (items.length > 0 && prefetchedPagesRef.current >= initialPages) return;
 				prefetchedPagesRef.current += 1;
@@ -528,72 +793,92 @@ window.__ModuleLoader__.load({
 				loadingOlder,
 				items.length,
 				initialPages,
-				loadOlder
+				loadOlder,
+				outline
 			]);
 			const onPanelScroll = (event) => {
+				if (outline !== void 0) return;
 				if (!hasMore || loadingOlder) return;
 				if (event.currentTarget.scrollTop <= 8) loadOlder();
 			};
-			const confirm = (key) => {
+			const confirm = (row) => {
 				setFocusKey(null);
-				jumpTo(key);
+				if (row.kind === "loaded") {
+					setPendingJump(null);
+					jumpTo(row.key);
+					return;
+				}
+				setPendingJump({
+					sessionId,
+					turn: row.turn,
+					seq: row.seq,
+					requested: false,
+					awaiting: false,
+					fromHead: null
+				});
 			};
-			if (!visible || tooNarrow) return null;
+			if (!visible) return null;
 			return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: panelRef,
-				className: TimelineRail_module_css_default.panel,
+				className: `${TimelineRail_module_css_default.panel} ${narrow ? TimelineRail_module_css_default.panelNarrow : ""}`,
 				role: "navigation",
 				"aria-label": t("rail.panel"),
 				tabIndex: 0,
 				"data-timeline-panel": "",
 				style: {
 					left: rail.left,
-					top: rail.top,
-					height: rail.height,
-					width
+					top: rail.top + rail.height / 2,
+					maxHeight: rail.height,
+					transform: "translateY(-50%)",
+					width,
+					...narrow ? { "--panel-wide": `${wideWidth}px` } : {}
 				},
 				onScroll: onPanelScroll,
 				onKeyDown: (event) => {
 					if (event.key === "ArrowDown" || event.key === "ArrowUp") {
 						event.preventDefault();
-						const anchor = items.findIndex((item) => item.key === current);
+						const anchor = items.findIndex((item) => item.id === current);
 						const next = event.key === "ArrowDown" ? items[Math.min(anchor + 1, items.length - 1)] : items[Math.max(anchor - 1, 0)];
 						/* v8 ignore next -- a non-empty item list keeps the clamped index inside bounds */
-						if (next !== void 0) setFocusKey(next.key);
+						if (next !== void 0) setFocusKey(next.id);
 					} else if (event.key === "Enter" || event.key === " ") {
 						event.preventDefault();
-						/* v8 ignore next -- the panel only renders with at least one item, so a current key always exists */
-						if (current !== null) confirm(current);
+						const row = items.find((item) => item.id === current);
+						if (row !== void 0) confirm(row);
 					}
 				},
 				onBlur: () => {
 					setFocusKey(null);
 				},
-				children: items.map((item) => {
-					const isCurrent = item.key === current;
-					const className = item.key === focusKey ? `${TimelineRail_module_css_default.item} ${TimelineRail_module_css_default.itemFocused}` : isCurrent ? `${TimelineRail_module_css_default.item} ${TimelineRail_module_css_default.itemCurrent}` : TimelineRail_module_css_default.item;
+				children: items.map((row) => {
+					const isCurrent = row.id === current;
+					const isFocused = row.id === focusKey;
+					const isPending = row.kind === "outline" && pendingJump !== null && pendingJump.turn === row.turn;
+					const className = isFocused ? `${TimelineRail_module_css_default.item} ${TimelineRail_module_css_default.itemFocused}` : isCurrent ? `${TimelineRail_module_css_default.item} ${TimelineRail_module_css_default.itemCurrent}` : TimelineRail_module_css_default.item;
+					const classNames = isPending ? `${className} ${TimelineRail_module_css_default.itemPending}` : className;
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
-						"data-item-key": item.key,
+						"data-item-key": row.id,
 						"aria-current": isCurrent || void 0,
-						className,
+						"aria-busy": isPending || void 0,
+						className: classNames,
 						onClick: () => {
-							confirm(item.key);
+							confirm(row);
 						},
 						onMouseEnter: () => {
-							setFocusKey(item.key);
+							setFocusKey(row.id);
 						},
 						onMouseLeave: () => {
-							setFocusKey((key) => key === item.key ? null : key);
+							setFocusKey((key) => key === row.id ? null : key);
 						},
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: isCurrent ? `${TimelineRail_module_css_default.tick} ${TimelineRail_module_css_default.tickCurrent}` : TimelineRail_module_css_default.tick,
 							"aria-hidden": "true"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: TimelineRail_module_css_default.itemText,
-							children: previewText(nodeContent(item.node)) ?? t("rail.empty")
+							children: rowLabel(row, t)
 						})]
-					}, item.key);
+					}, row.id);
 				})
 			}), document.body);
 		}
@@ -636,14 +921,15 @@ window.__ModuleLoader__.load({
 					if (actx === void 0) throw new Error("message-timeline: session resolved no scope");
 					const conversation = actx.get("conversation");
 					if (conversation === void 0) throw new Error("message-timeline: conversation service unavailable");
+					const binding = ctx.sessions.binding(sessionId);
+					if (binding === void 0) throw new Error("message-timeline: session resolved no binding");
 					return {
 						includeSteering: options.includeSteering,
 						panelWidth: options.panelWidth,
 						initialPages: options.initialPages,
 						loadOlder: () => conversation.loadOlder(),
-						jumpTo: (key) => {
-							tracker.jumpTo(key);
-						},
+						loadThrough: (seq) => binding.session.loadThrough(seq),
+						jumpTo: (key) => tracker.jumpTo(key),
 						hooks: { rail: tracker.state }
 					};
 				}

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

@@ -4,7 +4,7 @@ import type { TimelineRailProps } from './slots.ts';
  * @param props - composed props (see {@link TimelineRailProps}).
  * @returns nothing visible in the seat; the floating panel while the chat view shows.
  */
-export declare function TimelineRail({ sessionId, includeSteering, panelWidth, initialPages, loadOlder, jumpTo, useRail, t, ...standard }: TimelineRailProps): import("react").ReactPortal | null;
+export declare function TimelineRail({ sessionId, includeSteering, panelWidth, initialPages, loadOlder, loadThrough, jumpTo, useRail, t, ...standard }: TimelineRailProps): import("react").ReactPortal | null;
 /** Memoized export for the slot machinery (stable component identity). */
 export declare const TimelineRailEntry: import("react").MemoExoticComponent<typeof TimelineRail>;
 //# sourceMappingURL=TimelineRail.d.ts.map