dsh-context 0.52.0 → 0.52.2

package/README.md

@@ -59,13 +59,22 @@ Open any session and click the **Context / 上下文** tab:
 
 The headline occupancy and composition read the **same official token-meter projections as the chat composer's context ring** (`contextPressure` / `contextBreakdown`), so the figures always match what the ring tells you.
 
-### 🧱 Current Context — who ate the budget
+### Context Stats
+
+#### Token Stats and Timing Stats
+![Token_Stats_and_Timing_Stats](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/token-stats-and-timing-stats.png)
+
+#### Context Stats
+![Context_Stats](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-stats.png)
+
+
+### 🧱 Current Context — what's in the context window now
 
 ![Current Context card](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/current-context.png)
 
 A six-color stacked bar against the model's full window (hatching = free headroom): system prompt, tool schemas, user messages, injected context, assistant replies, tool results — each with its ≈token figure and share. When a conversation starts degrading, this is where you see *which part* is responsible.
 
-### 📈 Context Trend — every request, sized and explained
+### 📈 Context Trend — how the context grew and evolved by turn or steps
 
 ![Context Trend with the step brief](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-trend.png)
 

package/lib/client.js

@@ -211,7 +211,7 @@ window.__ModuleLoader__.load({
 			"gate.minimum": "最低要求",
 			"gate.orNewer": "及更新的版本",
 			"gate.ok": "知道了",
-			"footer": "估算口径：与 dsh 内置 tokenMeter 相同的固定密度启发式（约 4 字符 ≈ 1 token）；「实际」为供应商上报用量。",
+			"footer": "Token 数量统计：「估算」与 DeepSeek Harness 内置 tokenMeter 相同的固定密度启发式（约 4 字符 ≈ 1 token）；「实际」为供应商上报用量。",
 			"tip.step": "第 {t} 轮 · 第 {s} 步 (共 {n} 步)",
 			"tip.turn": "第 {t} 轮 · 共 {n} 步",
 			"tip.turn1": "第 {t} 轮 · 共 1 步",
@@ -237,6 +237,7 @@ window.__ModuleLoader__.load({
 			"node.nonText": "(非文本消息)",
 			"node.snapshot": "快照: ",
 			"node.skillTag": "技能 · {name}",
+			"cmd.label": "上下文",
 			"cmd.section": "上下文",
 			"cmd.desc": "查看当前上下文构成，浏览各步骤组成",
 			"cmd.close": "关闭",
@@ -514,7 +515,7 @@ window.__ModuleLoader__.load({
 			"gate.minimum": "Minimum required",
 			"gate.orNewer": "or newer",
 			"gate.ok": "Got it",
-			"footer": "Estimate: same fixed-density heuristic as dsh’s built-in tokenMeter (~4 chars ≈ 1 token); “actual” is provider-reported usage.",
+			"footer": "Token amount: “Estimated” uses the same fixed-density heuristic as DeepSeek Harness’s built-in tokenMeter (~4 chars ≈ 1 token); “Actual” is provider-reported usage.",
 			"tip.step": "Turn {t} · Step {s} of {n}",
 			"tip.turn": "Turn {t} · {n} steps",
 			"tip.turn1": "Turn {t} · 1 step",
@@ -540,6 +541,7 @@ window.__ModuleLoader__.load({
 			"node.nonText": "(non-text message)",
 			"node.snapshot": "Snapshot: ",
 			"node.skillTag": "Skill · {name}",
+			"cmd.label": "Context",
 			"cmd.section": "Context",
 			"cmd.desc": "View current context makeup, browse per-step composition",
 			"cmd.close": "Close",
@@ -615,6 +617,58 @@ window.__ModuleLoader__.load({
 			"attach.tokensTip": "Estimated token cost via DeepSeek's official image-size conversion (384-token cap per image)"
 		};
 		//#endregion
+		//#region src/client/icon.tsx
+		/** The sheet's strokes, in paint order, as `[path, fill]` pairs. */
+		const SHEET_PATHS = [
+			["M899.984 19.873h-3.452c-26.123 0-47.296 21.172-47.296 47.296v888.508c0 26.127 21.173 47.298 47.296 47.298h3.452c26.119 0 47.297-21.171 47.297-47.298V67.169c0-26.124-21.177-47.296-47.297-47.296z", "#4A5699"],
+			["M132.643 19.873h-3.449c-26.12 0-47.296 21.172-47.296 47.296v888.508c0 26.127 21.177 47.298 47.296 47.298h3.449c26.123 0 47.299-21.171 47.299-47.298V67.169c0-26.124-21.176-47.296-47.299-47.296z", "#C45FA0"],
+			["M899.463 19.873H129.194c-26.12 0-47.296 21.172-47.296 47.296v3.377c0 26.12 21.177 47.299 47.296 47.299h770.269c26.123 0 47.296-21.179 47.296-47.299v-3.377c0-26.124-21.173-47.296-47.296-47.296z", "#6277BA"],
+			["M899.463 905.006H129.194c-26.12 0-47.296 21.17-47.296 47.29v3.381c0 26.127 21.177 47.298 47.296 47.298h770.269c26.123 0 47.296-21.171 47.296-47.298v-3.381c0-26.12-21.173-47.29-47.296-47.29z", "#C45FA0"],
+			["M717.962 543.153H542.047c-26.121 0-47.298 21.175-47.298 47.297v3.724c0 26.123 21.177 47.293 47.298 47.293h175.915c26.121 0 47.297-21.17 47.297-47.293v-3.724c0-26.122-21.176-47.297-47.297-47.297z", "#E5594F"],
+			["M689.268 198.849H513.355c-26.122 0-47.298 21.175-47.298 47.297v3.722c0 26.12 21.176 47.297 47.298 47.297h175.912c26.122 0 47.298-21.177 47.298-47.297v-3.722c0-26.122-21.175-47.297-47.297-47.297z", "#F0D043"],
+			["M757.789 353.081H261.17c-26.121 0-47.297 21.172-47.297 47.296v3.377c0 26.121 21.177 47.299 47.297 47.299h496.619c26.121 0 47.296-21.178 47.296-47.299v-3.377c0-26.125-21.175-47.296-47.296-47.296z", "#E5594F"],
+			["M762.638 726.225h-496.62c-26.12 0-47.294 21.18-47.294 47.301v3.377c0 26.12 21.174 47.3 47.294 47.3h496.62c26.122 0 47.296-21.18 47.296-47.3v-3.377c0-26.122-21.174-47.301-47.296-47.301z", "#6277BA"],
+			["M355.734 543.328H281.41c-26.122 0-47.297 21.17-47.297 47.293v3.378c0 26.118 21.175 47.297 47.297 47.297h74.324c26.123 0 47.296-21.179 47.296-47.297v-3.378c0-26.123-21.174-47.293-47.296-47.293z", "#F39A2B"],
+			["M334.85 248.006m-48.986 0a48.986 48.986 0 1 0 97.972 0 48.986 48.986 0 1 0-97.972 0Z", "#F39A2B"]
+		];
+		/** The colourful document sheet at the requested square edge. */
+		function ContextIcon({ size = 20, className }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 1024 1024",
+				className,
+				"aria-hidden": "true",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: SHEET_PATHS.map(([d, fill]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d,
+					fill
+				}, d))
+			});
+		}
+		/**
+		* The tab chip's title seat (`sidebar.right.pane.tab.title`): the emblem before
+		* the label, so the chip reads as the files chip does. The label comes from the
+		* plugin's own bound translate — read at render, so the chip follows the active
+		* locale — rather than the tab-information hook, which a foreign or
+		* not-yet-committed tab record can throw on. It carries a trailing gutter
+		* (`.lc-title-label`) so the active chip's fade lands past the text, never on
+		* the last glyphs.
+		* @param t - the plugin-namespace translate bound in `apply`.
+		* @returns the title component to register under the tab type's id.
+		*/
+		function makeContextTabTitle(t) {
+			return function ContextTabTitle() {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextIcon, {
+					size: 16,
+					className: "lc-title-icon"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "lc-title-label",
+					children: t("tab")
+				})] });
+			};
+		}
+		//#endregion
 		//#region src/client/modalStore.ts
 		const stores$1 = /* @__PURE__ */ new Map();
 		function modalStoreOf(sessionId) {
@@ -677,6 +731,8 @@ window.__ModuleLoader__.load({
 						if (query !== "" && !COMMAND.startsWith(query)) return Promise.resolve([]);
 						return Promise.resolve([{
 							name: COMMAND,
+							label: kit.t("cmd.label"),
+							icon: ContextIcon,
 							section: kit.t("cmd.section"),
 							description: kit.t("cmd.desc")
 						}]);
@@ -1849,10 +1905,10 @@ window.__ModuleLoader__.load({
 		* - INLINE (older hosts, channel-less deployments, the baseline-gate
 		*   fallback): the wire value carries the collections in place. It passes
 		*   through untouched — no fetch ever happens.
-		* - SPLIT (current host with the detail channel live): the wire value is the
+		* - SPLIT (current host with the detail route live): the wire value is the
 		*   slim head (~1KB — every session.list row, control baseline, and push
-		*   frame carries it whole). The collections arrive from the host's
-		*   `/dsh-context` `detail` endpoint (host/detail.ts): one targeted read
+		*   frame carries it whole). The collections arrive from the plugin's
+		*   `/api/dsh-context/detail` fetch route (host/detail.ts): one targeted read
 		*   when the tab/modal first opens, then a debounced refetch whenever the
 		*   pushed `detailRev` outruns the served detail. Closed tabs fetch nothing.
 		*
@@ -1867,8 +1923,7 @@ window.__ModuleLoader__.load({
 		* failure surfaces as a retryable note on the detail cards instead of an
 		* empty chart.
 		*/
-		const DETAIL_CHANNEL = "/dsh-context";
-		const DETAIL_ENDPOINT = "detail";
+		const DETAIL_ROUTE = "/api/dsh-context/detail";
 		/**
 		* Narrow the detail endpoint's payload to a render-safe value (the same
 		* boundary rigor as `timelineOf`): collections re-proved per item, scalars
@@ -1879,8 +1934,10 @@ window.__ModuleLoader__.load({
 			const data = asRecord(value);
 			if (data === null) return null;
 			if (typeof data.rev !== "number" || !Number.isFinite(data.rev) || data.rev < 0) return null;
+			const head = timelineOf(data.head);
 			return {
 				rev: data.rev,
+				...head !== null ? { head } : {},
 				requests: objectsOf(data.requests),
 				events: objectsOf(data.events),
 				nodes: objectsOf(data.nodes),
@@ -1893,24 +1950,26 @@ window.__ModuleLoader__.load({
 			};
 		}
 		/**
-		* The detail reader over the harness's generic Connection RPC
-		* (`ctx.connection.rpc.call`) — resolved through the shared `rpcCallOf`
-		* reflect read (the same seam openPathVia/canOpenPathsOf use), so a hostile
-		* or absent connection service degrades to `undefined` instead of throwing.
-		* The returned thunk resolves the session's current detail, `null` when the
-		* session is not live anymore, and rejects on transport failure or a
-		* malformed payload (the store turns the two into the retryable state).
+		* The detail reader over the plugin's own `/api` fetch route (host/detail.ts).
+		* Same-origin POST through the harness's authenticated fence; the returned
+		* thunk resolves the session's current detail, `null` when the session is not
+		* live anymore, and rejects on transport failure or a malformed payload (the
+		* store turns the two into the retryable state).
 		*/
 		function makeDetailFetcher(ctx, sessionId) {
 			if (sessionId === "") return void 0;
-			const call = rpcCallOf(ctx);
-			if (call === void 0) return void 0;
 			return async () => {
-				const r = asRecord(await call(DETAIL_CHANNEL, DETAIL_ENDPOINT, { sessionId }));
-				if (r === null || r.ok !== true) throw new Error("dsh-context: detail rpc failed");
+				const response = await fetch(DETAIL_ROUTE, {
+					method: "POST",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ sessionId })
+				});
+				if (!response.ok) throw new Error(`dsh-context: detail route HTTP ${response.status}`);
+				const r = asRecord(await response.json());
+				if (r === null || r.ok !== true) throw new Error("dsh-context: detail read failed");
 				if (r.value === null) return null;
 				const detail = detailOf(r.value);
-				if (detail === null) throw new Error("dsh-context: detail rpc malformed");
+				if (detail === null) throw new Error("dsh-context: detail read malformed");
 				return detail;
 			};
 		}
@@ -4114,6 +4173,14 @@ window.__ModuleLoader__.load({
 			for (const n of asm.nodes) (m[n.cat] ??= []).push(n);
 			return m;
 		}
+		/**
+		* The producer identity a fold-stamped injection node carries
+		* (shared/types.ts SurfaceNode.name): '' when absent or drift-typed — the
+		* delivered payload is untrusted, so rows re-prove it before rendering.
+		*/
+		function nodeNameOf(n) {
+			return typeof n.name === "string" ? n.name : "";
+		}
 		function countOf(asm, byCat, c) {
 			if (c === "system") return asm.system !== null ? 1 : 0;
 			if (c === "tools") return asm.header !== null ? asm.header.tools.length : 0;
@@ -4422,12 +4489,13 @@ window.__ModuleLoader__.load({
 						const rowErr = (n.cat === "tool" || n.cat === "skill") && toolErrOf(n, conv).err;
 						let tag = null;
 						let preview = nodeText(n);
+						const id = nodeNameOf(n);
 						if (n.cat === "tool") {
 							tag = n.tool ?? "?";
 							preview = callSummaryOf(conv) ?? t("node.toolResult");
 						} else if (n.cat === "skill") {
 							tag = n.skill !== void 0 ? t("node.skillTag", { name: n.skill }) : t("form." + (n.form || "context"));
-							preview = (n.text !== void 0 && n.text !== "" ? n.text : null) ?? callSummaryOf(conv) ?? preview;
+							preview = (n.skill === void 0 && id !== "" ? id : null) ?? (n.text !== void 0 && n.text !== "" ? n.text : null) ?? callSummaryOf(conv) ?? preview;
 						} else if (n.cat === "assistant" && Array.isArray(n.calls) && n.calls.length > 0) {
 							tag = n.calls.join(" › ");
 							preview = (n.text !== void 0 && n.text !== "" ? n.text : null) ?? blockSummaryOf(conv) ?? t("node.empty");
@@ -4437,7 +4505,8 @@ window.__ModuleLoader__.load({
 							if (imgCount > 0 && openElem !== `n${n.seq}`) tag = t("attach.image") + (imgCount > 1 ? " ×" + String(imgCount) : "");
 						} else if (n.cat === "inject") {
 							tag = t("form." + (n.form || "context"));
-							if (n.text !== void 0 && n.text !== "") preview = n.form === "snapshot" ? t("node.snapshot") + n.text : n.text;
+							if (id !== "") preview = id;
+							else if (n.text !== void 0 && n.text !== "") preview = n.form === "snapshot" ? t("node.snapshot") + n.text : n.text;
 						}
 						return {
 							n,
@@ -4448,7 +4517,7 @@ window.__ModuleLoader__.load({
 						};
 					});
 					const q = rowQuery.trim().toLowerCase();
-					const shown = q === "" ? rows : rows.filter((r) => (r.tag ?? "").toLowerCase().includes(q) || r.preview.toLowerCase().includes(q));
+					const shown = q === "" ? rows : rows.filter((r) => (r.tag ?? "").toLowerCase().includes(q) || r.preview.toLowerCase().includes(q) || typeof r.n.text === "string" && r.n.text.toLowerCase().includes(q));
 					const rowctl = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowToolbar, {
 						value: rowQuery,
 						placeholder: t("browser.search." + c),
@@ -4591,7 +4660,7 @@ window.__ModuleLoader__.load({
 									className: "lc-br-cat" + (openable ? "" : " lc-br-cat-empty"),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 										type: "button",
-										className: "lc-br-cat-row hover:bg-(--dsw-alias-interactive-bg-hover)" + (linked && props.hoverKey === c.key ? " lc-br-cat-on" : ""),
+										className: "lc-br-cat-row hover:bg-(--dsw-alias-interactive-bg-hover)" + (open ? " lc-br-cat-open" : "") + (linked && props.hoverKey === c.key ? " lc-br-cat-on" : ""),
 										/* v8 ignore start -- the handlers exist only when linked,
 										and linked already requires onHoverKey defined (above). */
 										onMouseEnter: linked ? () => {
@@ -6305,8 +6374,15 @@ window.__ModuleLoader__.load({
 		* no current session, or a snapshot without a `byId` table (older harness).
 		* The current session synthesizes a row when the list has not delivered it
 		* yet, so the card can still show its live self stats.
-		*/
-		function agentForestOf(snapshot, currentId, self) {
+		* @param fetched - detail-channel heads for COLD rows, keyed by session id.
+		*   The host's list block serves projection values only from the projection
+		*   cache, so a relative that never attached since the timeline unit last
+		*   changed lists pressure-only (no composition row) and its ring would
+		*   degrade to the occupancy arc; the card fetches those heads on demand.
+		*   A row's own value always wins — the injection lands only on rows whose
+		*   `contextTimeline` is absent.
+		*/
+		function agentForestOf(snapshot, currentId, self, fetched) {
 			const byId = asRecord(asRecord(snapshot)?.byId);
 			if (byId === null || currentId === void 0 || currentId === "") return null;
 			const rows = /* @__PURE__ */ new Map();
@@ -6361,7 +6437,12 @@ window.__ModuleLoader__.load({
 			const visit = (id, row, parentId, depth, seen, family) => {
 				if (seen.has(id) || nodes.length >= 25) return;
 				seen.add(id);
-				const stats = agentStatsOf(row.projections);
+				const values = row.projections;
+				const fetchedHead = fetched !== void 0 ? fetched.get(id) : void 0;
+				const stats = agentStatsOf(fetchedHead !== void 0 && values?.contextTimeline === void 0 ? {
+					...values,
+					contextTimeline: fetchedHead
+				} : values);
 				const identity = stats.identity;
 				const node = {
 					...stats,
@@ -6620,9 +6701,13 @@ window.__ModuleLoader__.load({
 		*
 		* Data rides the harness's existing planes end to end — the session-list
 		* snapshot (`ctx.sessions.list`: lineage rows + per-session projection
-		* values) and the tab's own projections for the current node — so the card
-		* adds no RPC of its own beyond one direct-child catalog refresh per
-		* session. A harness without the outward sessions service hides the card.
+		* values) and the tab's own projections for the current node. The list block
+		* serves projection values only from the host's projection cache, so a
+		* relative that never attached since the timeline unit last changed lists
+		* pressure-only (occupancy without composition); those nodes fetch their slim
+		* head from the plugin's `/api` detail route (the one call below) and
+		* re-render composed. A harness without the outward sessions service hides
+		* the card.
 		*/
 		/** Caption box height under a node (3 wrapped label lines + the tokens line). */
 		const CAPTION_H = 60;
@@ -6635,6 +6720,7 @@ window.__ModuleLoader__.load({
 		}
 		function makeAgentGraph(ctx, kit) {
 			const { t, fmt, catLabel } = kit;
+			const heads = /* @__PURE__ */ new Map();
 			function AgentGraph(props) {
 				const face = (0, react.useMemo)(() => sessionsFaceOf(ctx), []);
 				const subscribe = (0, react.useCallback)((fn) => {
@@ -6680,8 +6766,9 @@ window.__ModuleLoader__.load({
 					if (typeof face.refreshSubagents !== "function") return;
 					face.refreshSubagents(sessionId).catch(() => {});
 				}, [face, sessionId]);
+				const [landed, setLanded] = (0, react.useState)(/* @__PURE__ */ new Map());
 				const built = (0, react.useMemo)(() => {
-					const forest = agentForestOf(snapshot, sessionId, props.self);
+					const forest = agentForestOf(snapshot, sessionId, props.self, landed);
 					return forest !== null ? {
 						forest,
 						layout: layoutForest(forest, stageWidth)
@@ -6690,8 +6777,29 @@ window.__ModuleLoader__.load({
 					snapshot,
 					sessionId,
 					props.self,
-					stageWidth
+					stageWidth,
+					landed
 				]);
+				(0, react.useEffect)(() => {
+					if (built === null) return;
+					const attach = (pending, id) => {
+						pending.then((head) => {
+							if (head !== null) setLanded((prev) => prev.get(id) === head ? prev : new Map(prev).set(id, head));
+						}).catch(() => {});
+					};
+					for (const n of built.forest.nodes) {
+						if (n.isCurrent || n.head !== null && n.head.parts.length > 0) continue;
+						const cached = heads.get(n.id);
+						if (cached !== void 0) {
+							attach(cached, n.id);
+							continue;
+						}
+						const fetcher = makeDetailFetcher(ctx, n.id);
+						const pending = fetcher !== void 0 ? fetcher().then((d) => d?.head ?? null) : Promise.resolve(null);
+						heads.set(n.id, pending);
+						attach(pending, n.id);
+					}
+				}, [built]);
 				if (built === null) return null;
 				const { forest, layout } = built;
 				const byId = new Map(forest.nodes.map((n) => [n.id, n]));
@@ -7533,7 +7641,7 @@ window.__ModuleLoader__.load({
 			return function PluginInfo() {
 				const [latest, setLatest] = (0, react.useState)(null);
 				(0, react.useEffect)(() => {
-					if ("0.52.0".includes("-dev")) return;
+					if ("0.52.2".includes("-dev")) return;
 					let on = true;
 					fetchLatestVersion().then((v) => {
 						if (on && v) setLatest(v);
@@ -7542,8 +7650,8 @@ window.__ModuleLoader__.load({
 						on = false;
 					};
 				}, []);
-				const update = latest !== null && isNewerVersion(latest, "0.52.0") ? latest : null;
-				const nameText = "dsh-context (v0.52.0)";
+				const update = latest !== null && isNewerVersion(latest, "0.52.2") ? latest : null;
+				const nameText = "dsh-context (v0.52.2)";
 				const nameValue = [nameText];
 				if (update) nameValue.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "lc-pi-update",
@@ -9382,58 +9490,6 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
-		//#region src/client/icon.tsx
-		/** The sheet's strokes, in paint order, as `[path, fill]` pairs. */
-		const SHEET_PATHS = [
-			["M899.984 19.873h-3.452c-26.123 0-47.296 21.172-47.296 47.296v888.508c0 26.127 21.173 47.298 47.296 47.298h3.452c26.119 0 47.297-21.171 47.297-47.298V67.169c0-26.124-21.177-47.296-47.297-47.296z", "#4A5699"],
-			["M132.643 19.873h-3.449c-26.12 0-47.296 21.172-47.296 47.296v888.508c0 26.127 21.177 47.298 47.296 47.298h3.449c26.123 0 47.299-21.171 47.299-47.298V67.169c0-26.124-21.176-47.296-47.299-47.296z", "#C45FA0"],
-			["M899.463 19.873H129.194c-26.12 0-47.296 21.172-47.296 47.296v3.377c0 26.12 21.177 47.299 47.296 47.299h770.269c26.123 0 47.296-21.179 47.296-47.299v-3.377c0-26.124-21.173-47.296-47.296-47.296z", "#6277BA"],
-			["M899.463 905.006H129.194c-26.12 0-47.296 21.17-47.296 47.29v3.381c0 26.127 21.177 47.298 47.296 47.298h770.269c26.123 0 47.296-21.171 47.296-47.298v-3.381c0-26.12-21.173-47.29-47.296-47.29z", "#C45FA0"],
-			["M717.962 543.153H542.047c-26.121 0-47.298 21.175-47.298 47.297v3.724c0 26.123 21.177 47.293 47.298 47.293h175.915c26.121 0 47.297-21.17 47.297-47.293v-3.724c0-26.122-21.176-47.297-47.297-47.297z", "#E5594F"],
-			["M689.268 198.849H513.355c-26.122 0-47.298 21.175-47.298 47.297v3.722c0 26.12 21.176 47.297 47.298 47.297h175.912c26.122 0 47.298-21.177 47.298-47.297v-3.722c0-26.122-21.175-47.297-47.297-47.297z", "#F0D043"],
-			["M757.789 353.081H261.17c-26.121 0-47.297 21.172-47.297 47.296v3.377c0 26.121 21.177 47.299 47.297 47.299h496.619c26.121 0 47.296-21.178 47.296-47.299v-3.377c0-26.125-21.175-47.296-47.296-47.296z", "#E5594F"],
-			["M762.638 726.225h-496.62c-26.12 0-47.294 21.18-47.294 47.301v3.377c0 26.12 21.174 47.3 47.294 47.3h496.62c26.122 0 47.296-21.18 47.296-47.3v-3.377c0-26.122-21.174-47.301-47.296-47.301z", "#6277BA"],
-			["M355.734 543.328H281.41c-26.122 0-47.297 21.17-47.297 47.293v3.378c0 26.118 21.175 47.297 47.297 47.297h74.324c26.123 0 47.296-21.179 47.296-47.297v-3.378c0-26.123-21.174-47.293-47.296-47.293z", "#F39A2B"],
-			["M334.85 248.006m-48.986 0a48.986 48.986 0 1 0 97.972 0 48.986 48.986 0 1 0-97.972 0Z", "#F39A2B"]
-		];
-		/** The colourful document sheet at the requested square edge. */
-		function ContextIcon({ size = 20, className }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				width: size,
-				height: size,
-				viewBox: "0 0 1024 1024",
-				className,
-				"aria-hidden": "true",
-				xmlns: "http://www.w3.org/2000/svg",
-				children: SHEET_PATHS.map(([d, fill]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-					d,
-					fill
-				}, d))
-			});
-		}
-		/**
-		* The tab chip's title seat (`sidebar.right.pane.tab.title`): the emblem before
-		* the label, so the chip reads as the files chip does. The label comes from the
-		* plugin's own bound translate — read at render, so the chip follows the active
-		* locale — rather than the tab-information hook, which a foreign or
-		* not-yet-committed tab record can throw on. It carries a trailing gutter
-		* (`.lc-title-label`) so the active chip's fade lands past the text, never on
-		* the last glyphs.
-		* @param t - the plugin-namespace translate bound in `apply`.
-		* @returns the title component to register under the tab type's id.
-		*/
-		function makeContextTabTitle(t) {
-			return function ContextTabTitle() {
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextIcon, {
-					size: 16,
-					className: "lc-title-icon"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "lc-title-label",
-					children: t("tab")
-				})] });
-			};
-		}
-		//#endregion
 		//#region src/client/sidebar.ts
 		/**
 		* The right Sidebar's Context tab (dsh 0.1.5-rc.1+).
@@ -9665,7 +9721,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-global-css:/home/runner/work/dsh-context/dsh-context/src/client/styles/browser.css.mjs
-		const css$3 = ".lc-br-dna-ctl{flex:none;margin-left:0}.lc-br-bar-dna .lc-stacked-seg{background-image:linear-gradient(to right, transparent calc(100% - min(.5px, 12.5%)), var(--dsw-alias-bg-layer-1) 0)}.lc-br-hint{color:var(--dsw-alias-label-secondary);white-space:nowrap;margin-left:auto;font-size:11px;font-weight:400}.lc-br-pick{font:inherit;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;max-width:240px;padding:3px 6px;font-size:12px}.lc-br-meta{color:var(--dsw-alias-label-secondary);flex-wrap:wrap;gap:6px 16px;margin-bottom:8px;display:flex}.lc-br-meta b{color:var(--dsw-alias-label-primary)}.lc-br-meta .lc-est{margin-left:auto}.lc-br-note{color:var(--dsw-alias-label-secondary);margin-top:8px;font-size:12px}.lc-br-retry{color:var(--dsw-alias-brand-primary);font:inherit;cursor:pointer;text-underline-offset:2px;transition:filter var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);background:0 0;border:0;padding:0;font-size:12px;text-decoration:underline}.lc-br-cats{flex-direction:column;gap:4px;margin-top:10px;display:flex}.lc-br-cat{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:8px;overflow:hidden}.lc-br-cat-empty{opacity:.55}.lc-br-cat-row{width:100%;color:var(--dsw-alias-label-primary);font:inherit;cursor:pointer;text-align:left;transition:background-color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);background:0 0;border:0;align-items:center;gap:8px;padding:7px 10px;display:flex}.lc-br-cat-on{background:var(--dsw-alias-interactive-bg-hover)}.lc-br-cat-on i{box-shadow:0 0 0 1px var(--dsw-alias-brand-primary)}.lc-br-cat-row i{width:8px;height:8px;transition:box-shadow var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);border-radius:2px;flex:none;display:inline-block}.lc-br-cat-label{font-weight:600}.lc-br-cat-count{color:var(--dsw-alias-label-secondary);white-space:nowrap;font-size:12px}.lc-br-count-grp{flex:1;align-items:center;gap:4px;min-width:0;display:inline-flex}.lc-br-chev{width:12px;height:14px;color:var(--dsw-alias-label-tertiary);flex:none;justify-content:center;align-items:center;display:flex}.lc-br-chev:before{content:\"\";width:5px;height:5px;transition:transform var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);border-bottom:1px solid;border-right:1px solid;transform:rotate(-45deg)}.lc-br-chev-on:before{transform:rotate(45deg)}.lc-br-tokens{color:var(--dsw-alias-label-secondary);flex:none;font-size:12px}.lc-br-delta,.lc-br-tdelta{white-space:nowrap;border-radius:4px;flex:none;padding:0 5px;font-size:11px;font-weight:600}.lc-br-delta-up,.lc-br-tdelta-up{color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent)}.lc-br-delta-down,.lc-br-tdelta-down{color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 15%, transparent)}.lc-br-tokens-grp{flex:none;align-items:center;gap:4px;min-width:0;display:inline-flex}.lc-br-pct{text-align:right;width:36px;color:var(--dsw-alias-label-secondary);flex:none;font-size:12px}.lc-br-body{border-top:1px solid var(--dsw-alias-border-l1);flex-direction:column;gap:2px;padding:4px 6px;display:flex}.lc-br-elem{border-radius:6px}.lc-br-elem-on{background:var(--dsw-alias-interactive-bg-active)}.lc-br-elem-row{width:100%;color:var(--dsw-alias-label-primary);font:inherit;cursor:pointer;text-align:left;transition:background-color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;padding:5px 6px;font-size:12px;display:flex}.lc-br-err-dot{background:var(--dsw-alias-state-error-primary);width:6px;height:6px;box-shadow:0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);border-radius:50%;flex:none}.lc-br-tag{min-width:0;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);text-overflow:ellipsis;white-space:nowrap;border-radius:4px;max-width:220px;padding:0 6px;font-size:11px;overflow:hidden}.lc-br-tool-plugin{color:var(--dsw-alias-brand-primary);background:color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent);border-color:#0000;border-radius:6px;font-size:12px}.lc-br-preview{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.lc-br-time,.lc-br-hits{color:var(--dsw-alias-label-secondary);flex:none;font-size:11px}.lc-br-content{flex-direction:column;gap:6px;padding:2px 6px 8px 26px;display:flex}.lc-br-dim{color:var(--dsw-alias-label-secondary)}";
+		const css$3 = ".lc-br-dna-ctl{flex:none;margin-left:0}.lc-br-bar-dna .lc-stacked-seg{background-image:linear-gradient(to right, transparent calc(100% - min(.5px, 12.5%)), var(--dsw-alias-bg-layer-1) 0)}.lc-br-hint{color:var(--dsw-alias-label-secondary);white-space:nowrap;margin-left:auto;font-size:11px;font-weight:400}.lc-br-pick{font:inherit;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:6px;max-width:240px;padding:3px 6px;font-size:12px}.lc-br-meta{color:var(--dsw-alias-label-secondary);flex-wrap:wrap;gap:6px 16px;margin-bottom:8px;display:flex}.lc-br-meta b{color:var(--dsw-alias-label-primary)}.lc-br-meta .lc-est{margin-left:auto}.lc-br-note{color:var(--dsw-alias-label-secondary);margin-top:8px;font-size:12px}.lc-br-retry{color:var(--dsw-alias-brand-primary);font:inherit;cursor:pointer;text-underline-offset:2px;transition:filter var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);background:0 0;border:0;padding:0;font-size:12px;text-decoration:underline}.lc-br-cats{flex-direction:column;gap:4px;margin-top:10px;display:flex}.lc-br-cat{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);border-radius:8px;overflow:hidden}.lc-br-cat-empty{opacity:.55}.lc-br-cat-row{width:100%;color:var(--dsw-alias-label-primary);font:inherit;cursor:pointer;text-align:left;transition:background-color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);background:0 0;border:0;align-items:center;gap:8px;padding:7px 10px;display:flex}.lc-br-cat-on{background:var(--dsw-alias-interactive-bg-hover)}.lc-br-cat-on i{box-shadow:0 0 0 1px var(--dsw-alias-brand-primary)}.lc-br-cat-open{background:var(--dsw-alias-interactive-bg-hover)}.lc-br-cat-row i{width:8px;height:8px;transition:box-shadow var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);border-radius:2px;flex:none;display:inline-block}.lc-br-cat-label{font-weight:600}.lc-br-cat-count{color:var(--dsw-alias-label-secondary);white-space:nowrap;font-size:12px}.lc-br-count-grp{flex:1;align-items:center;gap:4px;min-width:0;display:inline-flex}.lc-br-chev{width:12px;height:14px;color:var(--dsw-alias-label-tertiary);flex:none;justify-content:center;align-items:center;display:flex}.lc-br-chev:before{content:\"\";width:5px;height:5px;transition:transform var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);border-bottom:1px solid;border-right:1px solid;transform:rotate(-45deg)}.lc-br-chev-on:before{transform:rotate(45deg)}.lc-br-tokens{color:var(--dsw-alias-label-secondary);flex:none;font-size:12px}.lc-br-delta,.lc-br-tdelta{white-space:nowrap;border-radius:4px;flex:none;padding:0 5px;font-size:11px;font-weight:600}.lc-br-delta-up,.lc-br-tdelta-up{color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent)}.lc-br-delta-down,.lc-br-tdelta-down{color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 15%, transparent)}.lc-br-tokens-grp{flex:none;align-items:center;gap:4px;min-width:0;display:inline-flex}.lc-br-pct{text-align:right;width:36px;color:var(--dsw-alias-label-secondary);flex:none;font-size:12px}.lc-br-body{border-top:1px solid var(--dsw-alias-border-l1);flex-direction:column;gap:2px;padding:4px 6px;display:flex}.lc-br-elem{border-radius:6px}.lc-br-elem-on{background:var(--dsw-alias-interactive-bg-active)}.lc-br-elem-row{width:100%;color:var(--dsw-alias-label-primary);font:inherit;cursor:pointer;text-align:left;transition:background-color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;padding:5px 6px;font-size:12px;display:flex}.lc-br-err-dot{background:var(--dsw-alias-state-error-primary);width:6px;height:6px;box-shadow:0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);border-radius:50%;flex:none}.lc-br-tag{min-width:0;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);text-overflow:ellipsis;white-space:nowrap;border-radius:4px;max-width:220px;padding:0 6px;font-size:11px;overflow:hidden}.lc-br-tool-plugin{color:var(--dsw-alias-brand-primary);background:color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent);border-color:#0000;border-radius:6px;font-size:12px}.lc-br-preview{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.lc-br-time,.lc-br-hits{color:var(--dsw-alias-label-secondary);flex:none;font-size:11px}.lc-br-content{flex-direction:column;gap:6px;padding:2px 6px 8px 26px;display:flex}.lc-br-dim{color:var(--dsw-alias-label-secondary)}";
 		const tagId$3 = "dsh-context/browser.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$3) + "]") === null) {
 			const tag = document.createElement("style");

package/lib/index.d.ts

@@ -446,6 +446,17 @@ interface Snapshot {
  */
 interface ContextTimelineDetail {
   rev: number;
+  /**
+   * The slim wire head at the SAME fold cut as the collections: the
+   * composition scalars (`current`), the window/model envelope, and the
+   * precomputed counts. Sessions listed cold (never attached since the
+   * requesting unit last changed) carry no `contextTimeline` projection row
+   * for the browser's list reads, so the Agent network card fetches this
+   * head per node to render their composition rings. The host always serves
+   * it; optional so a payload missing it still serves the collections (the
+   * detail cards) and only the ring composition degrades.
+   */
+  head?: ContextTimeline;
   requests: RequestRecord[];
   events: ContextEventRecord[];
   nodes: SurfaceNode[];
@@ -620,6 +631,14 @@ interface SurfaceNode {
    */
   gone?: number;
   form?: string;
+  /**
+   * The producer identity the matching inject event names (host pricing.ts
+   * `injectionSourceName`: the plugin id, the reconciled instruction files,
+   * or the durable kind). Stamped on injection nodes alongside the event, so
+   * the browser rows label them the way the events card does; absent when the
+   * source carries no readable identity or the node predates the stamp.
+   */
+  name?: string;
   text?: string;
   tool?: string;
   err?: boolean;

package/lib/index.js

@@ -594,10 +594,10 @@ function toolCallNames(blocks) {
 * context provenance (client-runtime context-provenance.ts): workspace
 * instructions name the files they were reconciled from, a plugin source its
 * plugin id, and any other producer its own durable kind. Returns '' when
-* the source carries no readable identity at all.
+* the source is missing or carries no readable identity at all.
 */
 function injectionSourceName(source) {
-	if (source.kind === "agent-instructions" && Array.isArray(source.changes)) {
+	if (source?.kind === "agent-instructions" && Array.isArray(source.changes)) {
 		const paths = [];
 		for (const change of source.changes) {
 			const path = change?.path;
@@ -605,8 +605,10 @@ function injectionSourceName(source) {
 		}
 		if (paths.length > 0) return paths.join(", ");
 	}
-	if (typeof source.plugin === "string" && source.plugin !== "") return source.plugin;
-	return typeof source.kind === "string" && source.kind !== "" ? source.kind : "";
+	const plugin = source?.plugin;
+	if (typeof plugin === "string" && plugin !== "") return plugin;
+	const kind = source?.kind;
+	return typeof kind === "string" && kind !== "" ? kind : "";
 }
 function isInjection(source) {
 	return source !== null && source !== void 0 && (typeof source.kind === "string" && source.kind !== "" && source.kind !== "user" || typeof source.form === "string");
@@ -1627,7 +1629,10 @@ function applyTimeline(state, event, bounds) {
 						rec.name = typeof source.name === "string" ? source.name : "?";
 					} else {
 						const label = injectionSourceName(source);
-						if (label !== "") rec.name = label;
+						if (label !== "") {
+							rec.name = label;
+							node.name = label;
+						}
 						if (source.form === "notice" && typeof source.summary === "string" && source.summary !== "") rec.detail = source.summary;
 					}
 					s.events.push(rec);
@@ -1928,11 +1933,14 @@ function buildTimelineHead(state) {
 }
 /**
 * The on-demand detail payload (host/detail.ts serves it off the live fold
-* state): the heavy collections plus the revision marker the head carries.
+* state): the heavy collections, the slim head at the SAME cut (the Agent
+* network's cold-node ring fetch renders composition off it), and the
+* revision marker the head carries.
 */
 function buildTimelineDetail(state, bounds) {
 	return {
 		rev: state.detailRev ?? 0,
+		head: buildTimelineHead(state),
 		...detailCollectionsOf(state, bounds)
 	};
 }
@@ -1951,63 +1959,71 @@ function buildTimelineView(state, bounds) {
 }
 //#endregion
 //#region src/host/detail.ts
-/** The plugin's generic Connection RPC channel (the pre-v0.9 name, kept). */
-const DETAIL_CHANNEL = "/dsh-context";
-/** The RPC failure envelope the transport expects (ConnectionRpcFailure). */
+/** The plugin's detail route, under the authenticated `/api` fence. */
+const DETAIL_ROUTE = "/api/dsh-context/detail";
+/** One JSON reply of the detail route. */
+function reply(value) {
+	return Response.json(value, { headers: { "cache-control": "no-store" } });
+}
+/** The typed failure envelope (the same shape the Connection RPC carried). */
 function failure(code, message) {
-	return {
+	return reply({
 		ok: false,
 		error: {
 			code,
-			message,
-			details: {}
+			message
 		}
-	};
+	});
 }
 /**
-* Arm the detail endpoint whenever the connection and sessions services are
+* Serve the detail route whenever the connection and sessions services are
 * both composed (see the module header for the load-order contract). The
 * registration rides the injected fiber: either service unloading withdraws
-* the channel and closes the gate.
+* the route and closes the gate.
 */
 function watchDetailChannel(ctx, bounds) {
 	const gate = { live: false };
 	ctx.inject(["connection", "sessions"], (c) => {
 		const connection = c.get("connection");
 		const sessions = c.get("sessions");
-		const handle = typeof connection?.rpc?.handle === "function" ? connection.rpc.handle.bind(connection.rpc) : void 0;
+		const register = typeof connection?.fetch?.register === "function" ? connection.fetch.register.bind(connection.fetch) : void 0;
 		const getSession = typeof sessions?.get === "function" ? sessions.get.bind(sessions) : void 0;
-		if (handle === void 0 || getSession === void 0) return;
+		if (register === void 0 || getSession === void 0) return;
 		const projections = ctx.sessionProjections;
-		const handler = async (endpoint, payload) => {
-			if (endpoint !== "detail") return failure("dsh-context/unknown-endpoint", `unknown endpoint: ${endpoint}`);
-			const sessionId = payload !== null && typeof payload === "object" ? payload.sessionId : void 0;
+		const handler = async (request) => {
+			let sessionId;
+			try {
+				const body = await request.json();
+				sessionId = body !== null && typeof body === "object" ? body.sessionId : void 0;
+			} catch {
+				return failure("dsh-context/bad-request", "body is not JSON");
+			}
 			if (typeof sessionId !== "string" || sessionId === "") return failure("dsh-context/bad-request", "missing sessionId");
 			try {
 				const session = getSession(sessionId);
 				if (session !== void 0 && session !== null) {
 					const state = projections.stateOf(session, "contextTimeline");
-					if (state === void 0) return {
+					if (state === void 0) return reply({
 						ok: true,
 						value: null
-					};
-					return {
+					});
+					return reply({
 						ok: true,
 						value: buildTimelineDetail(state, bounds)
-					};
+					});
 				}
 				const query = ctx.get("sessionQuery");
 				const observe = typeof query?.observeSession === "function" ? query.observeSession.bind(query) : void 0;
-				if (observe === void 0) return {
+				if (observe === void 0) return reply({
 					ok: true,
 					value: null
-				};
+				});
 				const observation = await observe(sessionId, { projectionMode: "none" });
 				const events = observation?.events;
-				if (!Array.isArray(events)) return {
+				if (!Array.isArray(events)) return reply({
 					ok: true,
 					value: null
-				};
+				});
 				let state = createTimelineState();
 				try {
 					for (const ev of events) state = applyTimeline(state, ev, bounds);
@@ -2015,21 +2031,21 @@ function watchDetailChannel(ctx, bounds) {
 					const dispose = observation?.[Symbol.dispose];
 					if (typeof dispose === "function") dispose.call(observation);
 				}
-				return {
+				return reply({
 					ok: true,
 					value: buildTimelineDetail(state, bounds)
-				};
+				});
 			} catch (err) {
 				return failure("gateway/internal", err instanceof Error ? err.message : String(err));
 			}
 		};
 		try {
-			c.effect(() => {
-				const unregister = handle(DETAIL_CHANNEL, handler);
-				return () => {
-					unregister();
-				};
-			}, "dsh-context: detail channel");
+			c.effect(() => register({
+				path: DETAIL_ROUTE,
+				methods: ["POST"],
+				requestBody: "buffered",
+				fetch: handler
+			}), "dsh-context: detail route");
 		} catch {
 			return;
 		}
@@ -2276,6 +2292,7 @@ const surfaceNodeSchema = z.object({
 	imgs: z.number().int().nonnegative().optional(),
 	gone: z.number().int().nonnegative().optional(),
 	form: z.string().optional(),
+	name: z.string().optional(),
 	text: z.string().optional(),
 	tool: z.string().optional(),
 	err: z.boolean().optional(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.52.0",
+  "version": "0.52.2",
   "description": "A DeepSeek Harness plugin for context insight and management, with context dashboard and context command, for understanding how the context is made of, and how it evolves.",
   "author": "bowenliang123",
   "repository": {
@@ -45,7 +45,7 @@
     "coverage": "vitest run --coverage",
     "release": "bash scripts/publish.sh",
     "social-preview": "node docs/social-preview/generate.ts",
-    "prepare": "husky"
+    "prepare": "husky && tsdown"
   },
   "dsh": {
     "bundle": {