dsh-context 0.61.0 → 0.62.1

package/lib/client.js

@@ -83,6 +83,7 @@ window.__ModuleLoader__.load({
 			"timing.empty": "暂无耗时数据 · 对话开始后这里会显示时长分布",
 			"timing.tps": "{tps} tok/s",
 			"timing.tpsTip": "输出速度（TPS）：累计解码输出 tokens ÷ 累计解码时长，与 DeepSeek Harness 会话统计同口径。",
+			"timing.strip": "耗时时间轴：各段按发生次序紧凑铺排，宽度为耗时占比，刻度为零、四分位与全程",
 			"tokens.title": "Token 统计",
 			"tokens.total": "总用量",
 			"tokens.output": "输出",
@@ -480,6 +481,7 @@ window.__ModuleLoader__.load({
 			"timing.empty": "No timing data yet — durations appear as the conversation runs",
 			"timing.tps": "{tps} tok/s",
 			"timing.tpsTip": "Output speed (TPS): summed decoded output tokens over summed decode time — the same pairing as the harness session stats.",
+			"timing.strip": "Session-time strip: slices packed in occurrence order, width as share of the active time; ticks at zero, the quartiles, and the full span",
 			"tokens.title": "Token Stats",
 			"tokens.total": "Total",
 			"tokens.output": "Output",
@@ -1376,7 +1378,8 @@ window.__ModuleLoader__.load({
 				...typeof data.surfaceFloor === "number" ? { surfaceFloor: data.surfaceFloor } : {},
 				...typeof data.archiveFloor === "number" ? { archiveFloor: data.archiveFloor } : {},
 				...data.fileOps !== void 0 ? { fileOps: objectsOf(data.fileOps) } : {},
-				...typeof data.fileOpsFloor === "number" ? { fileOpsFloor: data.fileOpsFloor } : {}
+				...typeof data.fileOpsFloor === "number" ? { fileOpsFloor: data.fileOpsFloor } : {},
+				...data.spans !== void 0 ? { spans: objectsOf(data.spans) } : {}
 			};
 		}
 		/**
@@ -2238,7 +2241,8 @@ window.__ModuleLoader__.load({
 				...typeof data.surfaceFloor === "number" ? { surfaceFloor: data.surfaceFloor } : {},
 				...typeof data.archiveFloor === "number" ? { archiveFloor: data.archiveFloor } : {},
 				...data.fileOps !== void 0 ? { fileOps: objectsOf(data.fileOps) } : {},
-				...typeof data.fileOpsFloor === "number" ? { fileOpsFloor: data.fileOpsFloor } : {}
+				...typeof data.fileOpsFloor === "number" ? { fileOpsFloor: data.fileOpsFloor } : {},
+				...data.spans !== void 0 ? { spans: objectsOf(data.spans) } : {}
 			};
 		}
 		/**
@@ -2446,7 +2450,8 @@ window.__ModuleLoader__.load({
 						...detail.surfaceFloor !== void 0 ? { surfaceFloor: detail.surfaceFloor } : {},
 						...detail.archiveFloor !== void 0 ? { archiveFloor: detail.archiveFloor } : {},
 						...detail.fileOps !== void 0 ? { fileOps: detail.fileOps } : {},
-						...detail.fileOpsFloor !== void 0 ? { fileOpsFloor: detail.fileOpsFloor } : {}
+						...detail.fileOpsFloor !== void 0 ? { fileOpsFloor: detail.fileOpsFloor } : {},
+						...detail.spans !== void 0 ? { spans: detail.spans } : {}
 					},
 					detailState: "ready",
 					retryDetail: retry
@@ -5518,7 +5523,7 @@ window.__ModuleLoader__.load({
 		* widening after this many slots and late bands simply join within the cap (stackedBar.css delays by
 		* `--lc-i`); the composition bar's few category segments never reach it.
 		*/
-		const STAGGER_CAP = 8;
+		const STAGGER_CAP$1 = 8;
 		function makeStackedBar(kit) {
 			const { t, fmt, catLabel } = kit;
 			return function StackedBar(props) {
@@ -5601,7 +5606,7 @@ window.__ModuleLoader__.load({
 									style: {
 										width: `${widths[i]}%`,
 										backgroundColor: p.color,
-										"--lc-i": Math.min(i, STAGGER_CAP)
+										"--lc-i": Math.min(i, STAGGER_CAP$1)
 									},
 									onMouseEnter: () => {
 										if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
@@ -7988,6 +7993,126 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/client/components/timingStrip.tsx
+		/**
+		* The timing card's session-time strip: the fold's painted spans (every
+		* completed step's TTFT wait, decode blocks in stream order, tool-run
+		* windows, and in-step residue) packed shoulder-to-shoulder in occurrence
+		* order — the strip reads as WHERE THE TIME WENT, not when: each band's
+		* width is its share of the session's cumulative active time (the donut's
+		* Active Time), and idle time between steps takes no track at all. The DNA
+		* idiom applied to time consumed. The axis runs 0 → the total active time
+		* with quartile ticks between (0, ¼, ½, ¾, full). Hover relays the span's
+		* KIND through the card's shared hover key, so every span of a category
+		* lights together with its donut arc and legend row (the DNA
+		* lifetime-highlight idiom); the floating tip answers only the strip's OWN
+		* pointer — a mirrored legend/donut hover lights the matching bands without
+		* floating a second tip over a surface the pointer is not on (the stacked
+		* bar's mirror rule).
+		*/
+		/** The strip's palette: the timing card's own slice colors, keyed by span kind (statsTiming.tsx shares it). */
+		const TIMING_COLOR = {
+			ttft: "var(--color-blue-500)",
+			reasoning: "var(--color-violet-500)",
+			text: "var(--color-pink-500)",
+			toolarg: "var(--color-amber-500)",
+			tools: "var(--color-teal-500)",
+			other: "var(--color-slate-400)"
+		};
+		/** The legend-label key of each span kind (the timing card's own vocabulary). */
+		const KIND_LABEL = {
+			ttft: "timing.ttft",
+			reasoning: "timing.reasoning",
+			text: "timing.text",
+			toolarg: "timing.toolArgs",
+			tools: "timing.tools",
+			other: "timing.other"
+		};
+		/** Entrance stagger cap (the stacked bar's own rule): late bands join within the cap so a long span list settles fast. */
+		const STAGGER_CAP = 8;
+		/** The axis's fixed tick fractions: zero, the three quartiles, and the full span. */
+		const TICK_FRACS = [
+			0,
+			.25,
+			.5,
+			.75,
+			1
+		];
+		function makeTimingStrip(kit) {
+			const { t, fmtDuration, fmtTime } = kit;
+			return function TimingStrip(props) {
+				const [tipKey, setTipKey] = (0, react.useState)(null);
+				const valid = props.spans.filter((s) => Object.hasOwn(TIMING_COLOR, s.kind) && Number.isFinite(s.start) && Number.isFinite(s.end) && s.end > s.start);
+				if (valid.length === 0) return null;
+				let total = 0;
+				for (const s of valid) total += s.end - s.start;
+				let cursor = 0;
+				const bands = valid.map((s, i) => {
+					const leftPct = cursor / total * 100;
+					cursor += s.end - s.start;
+					return {
+						key: i,
+						kind: s.kind,
+						leftPct,
+						widthPct: (s.end - s.start) / total * 100,
+						tip: `${t(KIND_LABEL[s.kind])} ${fmtDuration(s.end - s.start)} · ${fmtTime(s.start)}`
+					};
+				});
+				const hoverKey = props.hoverKey;
+				const hovering = hoverKey !== null && hoverKey !== void 0 && bands.some((b) => b.kind === hoverKey);
+				let tip = null;
+				for (const b of bands) if (b.key === tipKey) {
+					tip = {
+						text: b.tip,
+						leftPct: Math.max(10, Math.min(b.leftPct + b.widthPct / 2, 90))
+					};
+					break;
+				}
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "lc-tstrip",
+					role: "img",
+					"aria-label": t("timing.strip"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "lc-tstrip-wrap",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "lc-tstrip-bar" + (hovering ? " lc-tstrip-dim" : ""),
+							onMouseLeave: () => {
+								setTipKey(null);
+								props.onHoverKey?.(null);
+							},
+							children: bands.map((b, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "lc-tstrip-seg animate-lc-stacked-in motion-reduce:animate-none" + (hoverKey === b.kind ? " lc-tstrip-seg-on" : ""),
+								style: {
+									left: `${b.leftPct}%`,
+									width: `${b.widthPct}%`,
+									background: TIMING_COLOR[b.kind],
+									"--lc-i": Math.min(i, STAGGER_CAP)
+								},
+								onMouseEnter: () => {
+									setTipKey(b.key);
+									props.onHoverKey?.(b.kind);
+								}
+							}, b.key))
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "lc-tip lc-bar-tip" + (tip !== null ? " lc-bar-tip-on" : ""),
+							style: { left: `${tip !== null ? tip.leftPct : 50}%` },
+							children: tip !== null ? tip.text : ""
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "lc-tstrip-axis",
+						children: TICK_FRACS.map((frac, i) => {
+							const ms = total * frac;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "lc-tstrip-tick" + (i === 0 ? " lc-tstrip-tick-first" : i === TICK_FRACS.length - 1 ? " lc-tstrip-tick-last" : ""),
+								style: { left: `${frac * 100}%` },
+								children: ms === 0 ? "0" : fmtDuration(ms)
+							}, frac);
+						})
+					})]
+				});
+			};
+		}
+		//#endregion
 		//#region src/client/components/statsTiming.tsx
 		/**
 		* The Timing card: where the session's ACTIVE time went. The donut splits
@@ -8006,16 +8131,13 @@ window.__ModuleLoader__.load({
 		* read as "no time, many calls". The donut and the rows sit side by side so
 		* the head row stays half-height. Parallel tool calls each count, so the tools
 		* figure can overlap — the ring clamps it into the post-model window while the
-		* row numbers stay true.
+		* row numbers stay true. Below them the session-time strip packs every
+		* completed step's slices gapless in occurrence order (the DNA idiom applied
+		* to time consumed — each band's width is its share of the cumulative active
+		* time, idle time takes no track), joining the same hover link by KIND.
 		*/
-		const COLOR = {
-			ttft: "var(--color-blue-500)",
-			reasoning: "var(--color-violet-500)",
-			text: "var(--color-pink-500)",
-			toolarg: "var(--color-amber-500)",
-			tools: "var(--color-teal-500)",
-			other: "var(--color-slate-400)"
-		};
+		/** The card's slice palette (timingStrip.tsx owns it — the strip paints the same kinds). */
+		const COLOR = TIMING_COLOR;
 		/**
 		* The decode-throughput figure, formatted exactly as the harness's own
 		* session-stats seat formats it: whole tokens from ten up, one decimal below.
@@ -8027,6 +8149,7 @@ window.__ModuleLoader__.load({
 		function makeStatsTiming(kit, Donut) {
 			const { t, fmt, fmtDuration, fmtShare } = kit;
 			const SliceList = makeSliceList(kit);
+			const TimingStrip = makeTimingStrip(kit);
 			return function StatsTiming(props) {
 				const [hoverKey, setHoverKey] = (0, react.useState)(null);
 				const timing = props.timing;
@@ -8158,7 +8281,7 @@ window.__ModuleLoader__.load({
 					}), rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "lc-empty",
 						children: t("timing.empty")
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "lc-donut-row flex items-center justify-start gap-3 min-w-0 @max-[320px]/lc-card:gap-2 @max-[240px]/lc-card:flex-wrap",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Donut, {
 							segments,
@@ -8172,7 +8295,11 @@ window.__ModuleLoader__.load({
 							hoverKey,
 							onHoverKey: setHoverKey
 						})]
-					})]
+					}), props.spans !== void 0 && props.spans.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimingStrip, {
+						spans: props.spans,
+						hoverKey,
+						onHoverKey: setHoverKey
+					}) : null] })]
 				});
 			};
 		}
@@ -11277,7 +11404,7 @@ window.__ModuleLoader__.load({
 			return function PluginInfo() {
 				const [latest, setLatest] = (0, react.useState)(null);
 				(0, react.useEffect)(() => {
-					if ("0.61.0".includes("-dev")) return;
+					if ("0.62.1".includes("-dev")) return;
 					let on = true;
 					fetchLatestVersion().then((v) => {
 						if (on && v) setLatest(v);
@@ -11286,8 +11413,8 @@ window.__ModuleLoader__.load({
 						on = false;
 					};
 				}, []);
-				const update = latest !== null && isNewerVersion(latest, "0.61.0") ? latest : null;
-				const nameText = "dsh-context (v0.61.0)";
+				const update = latest !== null && isNewerVersion(latest, "0.62.1") ? latest : null;
+				const nameText = "dsh-context (v0.62.1)";
 				const nameValue = [nameText];
 				if (update) nameValue.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "lc-pi-update",
@@ -12643,7 +12770,10 @@ window.__ModuleLoader__.load({
 								usage,
 								current: data.current,
 								breakdown
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatsTiming, { timing: data.timing ?? null })]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatsTiming, {
+								timing: data.timing ?? null,
+								spans: data.spans
+							})]
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "lc-cols lc-cols-main",
@@ -12886,7 +13016,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-global-css:/home/runner/work/dsh-context/dsh-context/src/client/styles/stats.css.mjs
-		const css$13 = ".lc-stat{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;flex-direction:column;gap:2px;min-width:0;padding:6px;display:flex}a.lc-stat{color:inherit;cursor:pointer;text-decoration:none}a.lc-stat:hover{border-color:var(--dsw-alias-label-secondary)}.lc-stats .lc-stat{padding:6px 3px}.lc-stats .lc-stat-q{margin:0;position:absolute;top:3px;right:4px}.lc-stat-label{color:var(--dsw-alias-label-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:600;overflow:hidden}.lc-stat-value{color:var(--dsw-alias-label-primary);white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:14px;font-weight:600;overflow:hidden}.lc-stat-sub{color:var(--dsw-alias-label-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.lc-stat-tipped{position:relative}.lc-stat-q{text-align:center;width:11px;height:11px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);cursor:help;transition:color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out), border-color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);border-radius:50%;margin-left:4px;font-size:9px;font-style:normal;font-weight:700;line-height:11px;display:inline-block}.lc-stat-tip{max-width:280px;font-weight:400;line-height:1.5;top:calc(100% + 6px);left:0}.lc-stat-tip-prices{border-top:1px dashed var(--dsw-alias-border-l1);margin-top:5px;padding-top:5px;display:block}.lc-stat-tip-head{font-weight:600;display:block}.lc-timing-tps{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);font-variant-numeric:tabular-nums;cursor:default;border-radius:999px;flex:none;margin-left:auto;padding:1px 8px;font-size:12px;line-height:18px}.lc-stat-tip-row{margin-top:2px;display:block}.lc-stat-tip-band{justify-content:space-between;gap:2rem;display:flex}.lc-stat-tip-band i{font-style:normal}.lc-stat-tip-by{color:var(--dsw-alias-label-secondary);margin-top:3px;display:block}.lc-card-sub{color:var(--dsw-alias-label-secondary);margin-left:auto;font-size:12px;font-weight:400}.lc-overview-num{align-items:baseline;gap:6px;margin-bottom:8px;display:flex}.lc-overview-num>b{font-size:20px}.lc-overview-num span{color:var(--dsw-alias-label-secondary)}.lc-overview-pct{margin-left:auto;font-size:11px}.lc-overview-pct b{color:var(--dsw-alias-label-primary);margin-right:4px;font-size:20px}.lc-stat-head{color:var(--dsw-alias-label-secondary);margin:12px 0 8px;font-size:11px;font-weight:600}.lc-col-donut{flex-direction:column;display:flex}.lc-col-donut .lc-donut-row{flex:1}.lc-donut{flex:none;position:relative}.lc-donut svg{display:block}.lc-donut-track{stroke:color-mix(in srgb, var(--color-neutral-500) 18%, transparent)}.lc-donut-seg{transition:opacity var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out)}.lc-donut-dim .lc-donut-seg{opacity:.35}.lc-donut-dim .lc-donut-seg-on{opacity:1}.lc-donut-center{pointer-events:none;text-align:center;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:0 7px;display:flex;position:absolute;inset:0}.lc-donut-center b{white-space:nowrap;text-overflow:ellipsis;max-width:100%;line-height:1.15;overflow:hidden}.lc-donut-center span{color:var(--dsw-alias-label-secondary);white-space:nowrap}.lc-sl{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 20px;min-width:0;display:grid;overflow:hidden}.lc-sl-row{min-width:0;transition:background-color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);border-radius:6px;flex-direction:column;gap:1px;margin:0 -6px;padding:1px 6px;font-size:12px;display:flex}.lc-sl-row-on{background:var(--dsw-alias-interactive-bg-hover)}.lc-sl-row-dim{opacity:.55}.lc-sl-main{align-items:center;gap:6px;min-width:0;display:flex}.lc-sl-dot{border-radius:2px;flex:none;width:8px;height:8px}.lc-sl-label{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;font-weight:600;line-height:1.25;overflow:hidden}.lc-sl-pct{text-align:right;font-variant-numeric:tabular-nums;flex:none;min-width:34px;font-weight:700}.lc-sl-sub{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;margin-left:14px;font-size:11px;line-height:1.3;overflow:hidden}.lc-pi-grid{grid-template-columns:1fr;gap:8px;display:grid}.lc-pi-row-btn{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;width:100%;padding:0}.lc-pi-row{min-width:0;color:inherit;flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;text-decoration:none;display:flex}.lc-pi-hint{text-decoration:none}.lc-pi-update{color:var(--dsw-alias-state-warn-primary);white-space:nowrap;margin-left:6px;font-size:11px}.lc-pi-label{color:var(--dsw-alias-label-secondary);white-space:nowrap;text-overflow:ellipsis;flex:none;font-size:11px;font-weight:600;overflow:hidden}.lc-pi-labelicon{vertical-align:-2px;margin-right:4px;display:inline-block}.lc-pi-value{min-width:0;color:var(--dsw-alias-label-primary);white-space:nowrap;text-overflow:ellipsis;text-align:right;font-size:13px;font-weight:600;overflow:hidden}";
+		const css$13 = ".lc-stat{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;flex-direction:column;gap:2px;min-width:0;padding:6px;display:flex}a.lc-stat{color:inherit;cursor:pointer;text-decoration:none}a.lc-stat:hover{border-color:var(--dsw-alias-label-secondary)}.lc-stats .lc-stat{padding:6px 3px}.lc-stats .lc-stat-q{margin:0;position:absolute;top:3px;right:4px}.lc-stat-label{color:var(--dsw-alias-label-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:600;overflow:hidden}.lc-stat-value{color:var(--dsw-alias-label-primary);white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:14px;font-weight:600;overflow:hidden}.lc-stat-sub{color:var(--dsw-alias-label-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.lc-stat-tipped{position:relative}.lc-stat-q{text-align:center;width:11px;height:11px;color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l2);cursor:help;transition:color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out), border-color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);border-radius:50%;margin-left:4px;font-size:9px;font-style:normal;font-weight:700;line-height:11px;display:inline-block}.lc-stat-tip{max-width:280px;font-weight:400;line-height:1.5;top:calc(100% + 6px);left:0}.lc-stat-tip-prices{border-top:1px dashed var(--dsw-alias-border-l1);margin-top:5px;padding-top:5px;display:block}.lc-stat-tip-head{font-weight:600;display:block}.lc-timing-tps{background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);font-variant-numeric:tabular-nums;cursor:default;border-radius:999px;flex:none;margin-left:auto;padding:1px 8px;font-size:12px;line-height:18px}.lc-stat-tip-row{margin-top:2px;display:block}.lc-stat-tip-band{justify-content:space-between;gap:2rem;display:flex}.lc-stat-tip-band i{font-style:normal}.lc-stat-tip-by{color:var(--dsw-alias-label-secondary);margin-top:3px;display:block}.lc-card-sub{color:var(--dsw-alias-label-secondary);margin-left:auto;font-size:12px;font-weight:400}.lc-overview-num{align-items:baseline;gap:6px;margin-bottom:8px;display:flex}.lc-overview-num>b{font-size:20px}.lc-overview-num span{color:var(--dsw-alias-label-secondary)}.lc-overview-pct{margin-left:auto;font-size:11px}.lc-overview-pct b{color:var(--dsw-alias-label-primary);margin-right:4px;font-size:20px}.lc-stat-head{color:var(--dsw-alias-label-secondary);margin:12px 0 8px;font-size:11px;font-weight:600}.lc-col-donut{flex-direction:column;display:flex}.lc-col-donut .lc-donut-row{flex:1}.lc-donut{flex:none;position:relative}.lc-donut svg{display:block}.lc-donut-track{stroke:color-mix(in srgb, var(--color-neutral-500) 18%, transparent)}.lc-donut-seg{transition:opacity var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out)}.lc-donut-dim .lc-donut-seg{opacity:.35}.lc-donut-dim .lc-donut-seg-on{opacity:1}.lc-donut-center{pointer-events:none;text-align:center;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:0 7px;display:flex;position:absolute;inset:0}.lc-donut-center b{white-space:nowrap;text-overflow:ellipsis;max-width:100%;line-height:1.15;overflow:hidden}.lc-donut-center span{color:var(--dsw-alias-label-secondary);white-space:nowrap}.lc-sl{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 20px;min-width:0;display:grid;overflow:hidden}.lc-sl-row{min-width:0;transition:background-color var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);border-radius:6px;flex-direction:column;gap:1px;margin:0 -6px;padding:1px 6px;font-size:12px;display:flex}.lc-sl-row-on{background:var(--dsw-alias-interactive-bg-hover)}.lc-sl-row-dim{opacity:.55}.lc-sl-main{align-items:center;gap:6px;min-width:0;display:flex}.lc-sl-dot{border-radius:2px;flex:none;width:8px;height:8px}.lc-sl-label{white-space:nowrap;text-overflow:ellipsis;flex:auto;min-width:0;font-weight:600;line-height:1.25;overflow:hidden}.lc-sl-pct{text-align:right;font-variant-numeric:tabular-nums;flex:none;min-width:34px;font-weight:700}.lc-sl-sub{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;margin-left:14px;font-size:11px;line-height:1.3;overflow:hidden}.lc-pi-grid{grid-template-columns:1fr;gap:8px;display:grid}.lc-pi-row-btn{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;width:100%;padding:0}.lc-pi-row{min-width:0;color:inherit;flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;text-decoration:none;display:flex}.lc-pi-hint{text-decoration:none}.lc-pi-update{color:var(--dsw-alias-state-warn-primary);white-space:nowrap;margin-left:6px;font-size:11px}.lc-pi-label{color:var(--dsw-alias-label-secondary);white-space:nowrap;text-overflow:ellipsis;flex:none;font-size:11px;font-weight:600;overflow:hidden}.lc-pi-labelicon{vertical-align:-2px;margin-right:4px;display:inline-block}.lc-pi-value{min-width:0;color:var(--dsw-alias-label-primary);white-space:nowrap;text-overflow:ellipsis;text-align:right;font-size:13px;font-weight:600;overflow:hidden}.lc-tstrip{margin-top:10px}.lc-tstrip-wrap{position:relative}.lc-tstrip-bar{background:color-mix(in srgb, var(--color-neutral-500) 18%, transparent);border-radius:4px;width:100%;height:12px;position:relative;overflow:hidden}.lc-tstrip-seg{transform-origin:0;height:100%;transition:opacity var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out), filter var(--ds-transition-duration,.2s) var(--ds-ease-in-out,ease-in-out);position:absolute;top:0}.lc-tstrip-seg-on{filter:brightness(1.18)}.lc-tstrip-dim .lc-tstrip-seg{opacity:.35}.lc-tstrip-dim .lc-tstrip-seg-on{opacity:1}.lc-tstrip-axis{height:13px;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;margin-top:5px;font-size:10px;line-height:13px;position:relative}.lc-tstrip-tick{white-space:nowrap;position:absolute;transform:translate(-50%)}.lc-tstrip-tick:before{content:\"\";background:var(--dsw-alias-border-l1);width:1px;height:3px;position:absolute;top:-4px;left:50%}.lc-tstrip-tick-first{transform:none}.lc-tstrip-tick-first:before{left:0}.lc-tstrip-tick-last{transform:translate(-100%)}.lc-tstrip-tick-last:before{left:auto;right:0}";
 		const tagId$13 = "dsh-context/stats.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$13) + "]") === null) {
 			const tag = document.createElement("style");

package/lib/index.d.ts

@@ -157,6 +157,28 @@ interface TimelineState {
     time: number;
     firstToken?: number;
   };
+  /**
+   * The timing strip's painted spans (shared/types.ts TimingSpan): every
+   * completed step's time slices in log order, stamped with their REAL
+   * instants — the TTFT wait, the decode blocks in stream order, the tool-run
+   * windows, and the in-step residue. The client packs them gapless, each
+   * band's width its share of the cumulative active time (idle time BETWEEN
+   * steps carries no span and takes no track). Bounded by TIMING_SPANS_MAX
+   * (newest tail kept). Flushed per step at `step/end` from the `stepSpans`
+   * accumulator.
+   */
+  spans: TimingSpan[];
+  /**
+   * The open step's accumulated painted spans: the assistant message pushes
+   * the model slices (TTFT + the decode blocks), each paired tool result its
+   * run window; `step/end` clamps them into the step window, de-overlaps
+   * first-wins (parallel runs paint their union), fills the holes with the
+   * residue kind, and flushes the tiling into `spans`. Absent until the first
+   * in-step span; DELETED at the flush (the plain-JSON precondition). Same
+   * arm/remove lifecycle as `stepStart` — never written in place, always
+   * replaced, so no CloneKey covers it.
+   */
+  stepSpans?: TimingSpan[];
   /**
    * Tool callId → the call's name, start instant, and raw arguments, armed by
    * `tool/call` and DELETED when its `tool/result` folds in (one result per
@@ -469,6 +491,13 @@ interface Snapshot {
    */
   fileOps?: FileOpRecord[];
   fileOpsFloor?: number;
+  /**
+   * The timing strip's painted spans (see TimingSpan) — present on the INLINE
+   * wire value and on the detail payload, absent from the slim head (they ride
+   * the detail channel there) and from rows folded before the collection
+   * existed (older hosts; the client then shows no strip).
+   */
+  spans?: TimingSpan[];
 }
 /**
  * The on-demand DETAIL payload of the split `contextTimeline` generation —
@@ -509,6 +538,13 @@ interface ContextTimelineDetail {
   fileOps?: FileOpRecord[];
   /** The newest dropped op's seq when the op log trimmed (coverage honesty, same family as archiveFloor). */
   fileOpsFloor?: number;
+  /**
+   * The timing strip's painted spans (see TimingSpan): the completed steps'
+   * time slices in log order, positioned by their real instants. Additive-
+   * optional: a payload folded before the collection existed (older hosts)
+   * serves without it, and the timing card shows no strip then.
+   */
+  spans?: TimingSpan[];
 }
 /**
  * One executed file operation (a settled file-tool call with a resolved
@@ -559,6 +595,22 @@ interface FileOpRecord {
  * delivered projection is by definition available); kept for wire compatibility with the snapshot shape.
  */
 type ContextTimeline = Snapshot;
+/**
+ * One painted span of the timing card's session-time strip (the card's bottom
+ * band): a completed step's time slice — the TTFT wait, one decode block (in
+ * stream order), one tool-run window, or an in-step residue gap — folded
+ * host-side at `step/end`. The instants are the slice's REAL occurrence times
+ * (the hover tip reads them); the strip packs the spans gapless in log order,
+ * each band's width its share of the session's cumulative active time (idle
+ * time BETWEEN steps carries no span and takes no track). `end` > `start`
+ * always (the fold drops zero/negative slices).
+ */
+interface TimingSpan {
+  /** The slice kind — the timing card's own slice vocabulary (same keys, same colors). */
+  kind: 'ttft' | 'reasoning' | 'text' | 'toolarg' | 'tools' | 'other';
+  start: number;
+  end: number;
+}
 /**
  * Cumulative billed-token totals for one pricing bucket of the session-cost
  * estimate (host-folded, never trimmed — running totals over the COMPLETE

package/lib/index.js

@@ -414,6 +414,43 @@ function decodeTallyOfStream(stream, endTime) {
 	return tally;
 }
 /**
+* The ORDERED decode spans of one embedded assistant stream — the same
+* ownership rule as {@link decodeTallyOfStream} (each `block-start` marker
+* owns the interval up to the next one, the last one up to `endTime`), but
+* keeping the sequence: the timing strip paints the decode window in stream
+* order. Total over untrusted input, mirroring the tally: a malformed record
+* is skipped whole, an unknown `blockType` leaves its interval unspanned
+* (the caller's residue fill owns it), a zero/negative-length span drops
+* out, and a stream with no marker (or not an array) yields none.
+*/
+function decodeSpansOfStream(stream, endTime) {
+	const spans = [];
+	if (!Array.isArray(stream) || !Number.isFinite(endTime)) return spans;
+	let kind;
+	let since = 0;
+	const close = (to) => {
+		if (kind !== void 0 && to > since) spans.push({
+			kind,
+			start: since,
+			end: to
+		});
+	};
+	for (const record of stream) {
+		if (record === null || typeof record !== "object") continue;
+		const r = record;
+		if (r.type !== "chunk" || r.chunk === null || typeof r.chunk !== "object") continue;
+		const chunk = r.chunk;
+		if (chunk.type !== "block-start") continue;
+		const time = r.time;
+		if (typeof time !== "number" || !Number.isFinite(time)) continue;
+		close(time);
+		kind = decodeKindOfBlock(chunk.blockType);
+		since = time;
+	}
+	close(endTime);
+	return spans;
+}
+/**
 * The first token's instant inside one PACKED delta run (`text-chunks` /
 * `reasoning-chunks` / `tool-call-chunks`): the run's base time plus the
 * accumulated inter-member deltas, taken at the first qualifying member —
@@ -758,6 +795,7 @@ function trimState(st, bounds) {
 		st.turnRuns = countTurnRuns(st.requests);
 	}
 	if (st.events.length > bounds.maxEvents) st.events = st.events.slice(-bounds.maxEvents);
+	if (st.spans.length > TIMING_SPANS_MAX) st.spans = st.spans.slice(-TIMING_SPANS_MAX);
 	if (st.fileOps.length > bounds.maxFileOps) {
 		const drop = st.fileOps.length - bounds.maxFileOps;
 		st.fileOpsFloor = Math.max(st.fileOpsFloor ?? 0, st.fileOps[drop - 1].seq);
@@ -775,6 +813,13 @@ function trimState(st, bounds) {
 		}
 	}
 }
+/**
+* Bound on the timing strip's painted spans (TimelineState.spans): a count
+* cap, newest tail kept — the same hardcoded-cap family as SYSTEM_NODES_MAX.
+* At ~6–8 spans per step the cap covers a few hundred recent steps, far past
+* the strip's pixel resolution on any real pane.
+*/
+const TIMING_SPANS_MAX = 2e3;
 function createTimelineState() {
 	return {
 		surface: [],
@@ -792,7 +837,8 @@ function createTimelineState() {
 		events: [],
 		archived: [],
 		callNames: {},
-		fileOps: []
+		fileOps: [],
+		spans: []
 	};
 }
 function categoryOf(type, message) {
@@ -969,6 +1015,11 @@ function applySurface(st, ev, type, data, message) {
 			timing.toolsMs += dur;
 			timing.toolCalls += 1;
 			bumpToolTotals(timing, toolEntry.name, dur);
+			if (st.stepStart !== void 0) st.stepSpans = [...st.stepSpans ?? [], {
+				kind: "tools",
+				start: toolEntry.start,
+				end: ev.time
+			}];
 		}
 		if (typeof srcId === "string" || typeof blockId === "string") {
 			const kept = {};
@@ -1345,6 +1396,7 @@ function applyTimeline(state, event, bounds) {
 			case "step/start": {
 				const s = ensure([]);
 				s.stepStart = { time: event.time };
+				delete s.stepSpans;
 				break;
 			}
 			case "step/end": {
@@ -1352,7 +1404,43 @@ function applyTimeline(state, event, bounds) {
 				if (start === void 0) return state;
 				const s = ensure(["timing"]);
 				ensureTiming(s).wallMs += durOf(start.time, event.time);
+				const painted = [];
+				for (const span of state.stepSpans ?? []) {
+					const from = Math.max(start.time, span.start);
+					const to = Math.min(event.time, span.end);
+					if (to > from) painted.push({
+						kind: span.kind,
+						start: from,
+						end: to
+					});
+				}
+				painted.sort((a, b) => a.start - b.start || a.end - b.end);
+				const flushed = [];
+				let cursor = start.time;
+				for (const span of painted) {
+					const from = Math.max(cursor, span.start);
+					if (span.end <= from) continue;
+					if (from > cursor) flushed.push({
+						kind: "other",
+						start: cursor,
+						end: from
+					});
+					flushed.push({
+						kind: span.kind,
+						start: from,
+						end: span.end
+					});
+					cursor = span.end;
+				}
+				if (event.time > cursor) flushed.push({
+					kind: "other",
+					start: cursor,
+					end: event.time
+				});
+				s.spans = [...state.spans, ...flushed];
 				delete s.stepStart;
+				delete s.stepSpans;
+				bumpDetailRev(s);
 				break;
 			}
 			case "user/message": {
@@ -1506,6 +1594,24 @@ function applyTimeline(state, event, bounds) {
 					if (firstToken !== void 0) {
 						timing.ttftMs += durOf(stepStart.time, firstToken);
 						timing.genMs += durOf(firstToken, event.time);
+						const decodeBlocks = decodeSpansOfStream(data?.stream, event.time);
+						let decodeStart = firstToken;
+						for (const block of decodeBlocks) decodeStart = Math.min(decodeStart, block.start);
+						const modelSpans = [{
+							kind: "ttft",
+							start: stepStart.time,
+							end: decodeStart
+						}];
+						for (const block of decodeBlocks) {
+							const to = Math.min(event.time, block.end);
+							if (to <= block.start) continue;
+							modelSpans.push({
+								kind: block.kind,
+								start: modelSpans.length === 1 ? decodeStart : block.start,
+								end: to
+							});
+						}
+						s.stepSpans = [...s.stepSpans ?? [], ...modelSpans];
 						if (output !== null) {
 							timing.speedMs = (timing.speedMs ?? 0) + durOf(firstToken, event.time);
 							timing.speedTokens = (timing.speedTokens ?? 0) + output;
@@ -1641,7 +1747,8 @@ function detailCollectionsOf(state, bounds) {
 		droppedNodes: 0,
 		archive: state.archived.map((n) => ({ ...n })),
 		fileOps: state.fileOps.map((o) => ({ ...o })),
-		...state.fileOpsFloor !== void 0 ? { fileOpsFloor: state.fileOpsFloor } : {}
+		...state.fileOpsFloor !== void 0 ? { fileOpsFloor: state.fileOpsFloor } : {},
+		spans: state.spans.map((s) => ({ ...s }))
 	};
 	const overflowCount = Math.max(0, state.surface.length - bounds.maxNodes);
 	const overflow = state.surface.slice(0, overflowCount);
@@ -3103,6 +3210,19 @@ const fileOpSchema = z.object({
 	pattern: z.literal(true).optional(),
 	gone: z.number().int().nonnegative().optional()
 }).strict();
+/** One painted span of the timing strip (shared/types.ts TimingSpan). */
+const timingSpanSchema = z.object({
+	kind: z.enum([
+		"ttft",
+		"reasoning",
+		"text",
+		"toolarg",
+		"tools",
+		"other"
+	]),
+	start: z.number(),
+	end: z.number()
+}).strict();
 const currentSchema = z.object({
 	system: z.number().int().nonnegative(),
 	tools: z.number().int().nonnegative(),
@@ -3198,7 +3318,8 @@ const contextTimelineSchema = z.object({
 	surfaceFloor: z.number().int().nonnegative().optional(),
 	archiveFloor: z.number().int().nonnegative().optional(),
 	fileOps: z.array(fileOpSchema).optional(),
-	fileOpsFloor: z.number().int().nonnegative().optional()
+	fileOpsFloor: z.number().int().nonnegative().optional(),
+	spans: z.array(timingSpanSchema).optional()
 }).strict();
 /**
 * The persisted fold-state schema (the registry's `stateSchema`
@@ -3245,6 +3366,8 @@ const timelineStateSchema = z.object({
 	detailRev: z.number().int().nonnegative().optional(),
 	fileOps: z.array(fileOpSchema),
 	fileOpsFloor: z.number().int().nonnegative().optional(),
+	spans: z.array(timingSpanSchema),
+	stepSpans: z.array(timingSpanSchema).optional(),
 	pendingCodeOps: z.record(z.string(), z.array(fileOpSchema)).optional()
 });
 /**
@@ -3292,7 +3415,7 @@ function createContextTimelineDefinition(config, slim) {
 		},
 		init: () => createTimelineState(),
 		apply: (state, event) => applyTimeline(state, event, bounds),
-		stateVersion: 22
+		stateVersion: 23
 	};
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.61.0",
+  "version": "0.62.1",
   "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.",
   "icon": "icon.svg",
   "author": "bowenliang123",