dsh-context 0.38.2 → 0.38.3

package/lib/client.js

@@ -189,8 +189,8 @@ window.__ModuleLoader__.load({
 			"footer": "估算口径：与 dsh 内置 tokenMeter 相同的固定密度启发式（约 4 字符 ≈ 1 token）；「实际」为供应商上报用量。",
 			"tip.step": "第 {t} 轮 · 第{s}步",
 			"tip.turn": "第 {t} 轮 · 共 {n} 步",
+			"tip.turn1": "第 {t} 轮 · 共 1 步",
 			"tip.total": "合计 ≈ {n}",
-			"tip.actual": "（实际 {n}）",
 			"tip.delta": "Δ {n}",
 			"ev.compaction": "压缩上下文（摘要替换 {n} 条消息）",
 			"ev.prune": "剪枝工具输出",
@@ -457,8 +457,8 @@ window.__ModuleLoader__.load({
 			"footer": "Estimate: same fixed-density heuristic as dsh’s built-in tokenMeter (~4 chars ≈ 1 token); “actual” is provider-reported usage.",
 			"tip.step": "Turn {t} · Step {s}",
 			"tip.turn": "Turn {t} · {n} steps",
+			"tip.turn1": "Turn {t} · 1 step",
 			"tip.total": "Total ≈ {n}",
-			"tip.actual": " (actual {n})",
 			"tip.delta": "Δ {n}",
 			"ev.compaction": "Context compacted (summary replaced {n} messages)",
 			"ev.prune": "Tool output pruned",
@@ -2977,20 +2977,6 @@ window.__ModuleLoader__.load({
 				response
 			};
 		}
-		/**
-		* seq → one-line reply preview for the chart tooltip: the response node's
-		* text, else its tool-call breadcrumb. Absent for usage-only replies and
-		* steps outside retention.
-		*/
-		function replyTipsOf(nodes) {
-			const m = /* @__PURE__ */ new Map();
-			for (const n of nodes) {
-				if (n.cat !== "assistant") continue;
-				const s = n.text ?? (n.calls !== void 0 ? n.calls.join(" › ") : "");
-				if (s !== "") m.set(n.seq, s);
-			}
-			return m;
-		}
 		//#endregion
 		//#region src/client/fileActivity.ts
 		const KIND_BY_TOOL = {
@@ -4830,7 +4816,7 @@ window.__ModuleLoader__.load({
 			return function PluginInfo() {
 				const [latest, setLatest] = React.useState(null);
 				React.useEffect(() => {
-					if ("0.38.2".includes("-dev")) return;
+					if ("0.38.3".includes("-dev")) return;
 					let on = true;
 					fetchLatestVersion().then((v) => {
 						if (on && v) setLatest(v);
@@ -4839,8 +4825,8 @@ window.__ModuleLoader__.load({
 						on = false;
 					};
 				}, []);
-				const update = latest !== null && isNewerVersion(latest, "0.38.2") ? latest : null;
-				const nameText = "dsh-context (v0.38.2)";
+				const update = latest !== null && isNewerVersion(latest, "0.38.3") ? latest : null;
+				const nameText = "dsh-context (v0.38.3)";
 				const nameValue = [nameText];
 				if (update) nameValue.push(/* @__PURE__ */ React.createElement("span", {
 					key: "update",
@@ -5399,11 +5385,14 @@ window.__ModuleLoader__.load({
 			return requests.length > 0 ? requests[0] : null;
 		}
 		function makeTrendChart(kit) {
-			const { t, fmt, fmtTime, eventLabel, eventAt } = kit;
+			const { t, fmt, eventLabel, eventAt } = kit;
 			const CHART_H = 112;
+			const fmtSigned = (v) => (v > 0 ? "+" : "") + fmt(v);
 			const BAR_W = 14;
 			const BAR_GAP = 2;
 			const TURN_FILLS = ["rgba(128,128,128,0.12)", "rgba(128,128,128,0.26)"];
+			const LABEL_OVERHANG = 48;
+			const LABEL_GAP = 4;
 			const anchorOf = (req) => typeof req.prompt === "number" && req.prompt > 0 && req.total > 0 ? req.prompt / req.total : 1;
 			const barTotalOf = (req) => typeof req.prompt === "number" && req.prompt > 0 ? req.prompt : req.total;
 			/**
@@ -5513,6 +5502,8 @@ window.__ModuleLoader__.load({
 				const deltaScale = CHART_H / span;
 				const upPx = Math.round(maxUp * deltaScale);
 				const downPx = CHART_H - upPx;
+				const q3Clear = Math.abs(28 - upPx) >= 11;
+				const q1Clear = Math.abs(84 - upPx) >= 11;
 				const groups = [];
 				for (const req of requests) {
 					let grp = groups.length > 0 ? groups[groups.length - 1] : null;
@@ -5545,9 +5536,12 @@ window.__ModuleLoader__.load({
 				const lastSeqRef = React.useRef(0);
 				const prevScrollWidthRef = React.useRef(0);
 				/**
-				* Keep each turn label centered within its block's VISIBLE slice so it never scrolls out while any part of the block is on screen
-				* (narrower-than-label blocks stay put); reads (offsetWidth) batch before writes (transform) to avoid layout thrash — out-of-view
-				* blocks need no measurement.
+				* Keep each turn label centered within its block's VISIBLE slice, then thin colliding labels: a label wider
+				* than its block overflows it, so consecutive narrow turns (14px bars, 2-digit "T12"s) would smear into each
+				* other — walking left→right in content coordinates, a label whose box reaches the previous KEPT one drops to
+				* visibility:hidden. Blocks that cannot reach the viewport even overhung by a label skip their reads/writes
+				* entirely (their transform/visibility just reset); reads (offsetWidth) batch before the writes to avoid layout
+				* thrash, and unchanged styles write nothing.
 				*/
 				const updateTurnLabels = (el) => {
 					const labels = el.querySelectorAll(".lc-turn-label");
@@ -5555,23 +5549,35 @@ window.__ModuleLoader__.load({
 					const sl = el.scrollLeft;
 					const vr = sl + el.clientWidth;
 					const writes = [];
+					let chainR = -Infinity;
 					for (let i = 0; i < n; i++) {
 						const off = turnOffsets[i];
 						const w = turnWidths[i];
-						const visL = Math.max(off, sl);
-						const visR = Math.min(off + w, vr);
 						let dx = 0;
-						if (visR > visL) {
+						let vis = "";
+						if (off + w + LABEL_OVERHANG > sl && off - LABEL_OVERHANG < vr) {
 							const lw = labels[i].offsetWidth;
-							if (lw < w) {
+							const visL = Math.max(off, sl);
+							const visR = Math.min(off + w, vr);
+							if (visR > visL && lw < w) {
 								const center = (visL + visR) / 2 - off;
 								dx = Math.min(Math.max(center, lw / 2), w - lw / 2) - w / 2;
 							}
+							const left = off + w / 2 + dx - lw / 2;
+							if (left < chainR) vis = "hidden";
+							else chainR = left + lw + LABEL_GAP;
 						}
 						const next = dx !== 0 ? `translateX(${dx}px)` : "";
-						if (labels[i].style.transform !== next) writes.push([labels[i], next]);
+						if (labels[i].style.transform !== next || labels[i].style.visibility !== vis) writes.push([
+							labels[i],
+							next,
+							vis
+						]);
+					}
+					for (const [label, next, vis] of writes) {
+						label.style.transform = next;
+						label.style.visibility = vis;
 					}
-					for (const [label, next] of writes) label.style.transform = next;
 				};
 				React.useLayoutEffect(() => {
 					const el = scrollRef.current;
@@ -5605,23 +5611,22 @@ window.__ModuleLoader__.load({
 					props.focusTurn,
 					requests
 				]);
-				const tipOf = (req) => {
-					const head = req.stepCount !== void 0 && req.stepCount > 1 ? t("tip.turn", {
+				const tipRowsOf = (req) => {
+					const n = req.stepCount ?? 1;
+					const head = props.granularity === "turn" ? n > 1 ? t("tip.turn", {
 						t: req.turn ?? 0,
-						n: req.stepCount
-					}) : t("tip.step", {
+						n
+					}) : t("tip.turn1", { t: req.turn ?? 0 }) : t("tip.step", {
 						t: req.turn ?? 0,
 						s: req.step ?? 0
 					});
-					const reply = props.replyTips?.get(req.seq);
-					const tail = reply !== void 0 ? " · “" + (reply.length > 48 ? reply.slice(0, 48) + "…" : reply) + "”" : "";
 					if (delta) {
 						/* v8 ignore next 1 -- delta mode only receives records from
 						deltaOf, which always assigns net; the fallback is defensive. */
 						const n = req.net ?? 0;
-						return head + " · " + fmtTime(req.time) + " · " + t("tip.delta", { n: (n > 0 ? "+" : "") + fmt(n) }) + tail;
+						return [head, t("tip.delta", { n: (n > 0 ? "+" : "") + fmt(n) })];
 					}
-					return head + " · " + fmtTime(req.time) + " · " + t("tip.total", { n: fmt(req.total) }) + (req.prompt !== void 0 ? " · " + t("tip.actual", { n: fmt(req.prompt) }) : "") + tail;
+					return [head, t("tip.total", { n: fmt(barTotalOf(req)) })];
 				};
 				const hoveredIdx = props.hoveredSeq !== null ? requests.findIndex((r) => r.seq === props.hoveredSeq) : -1;
 				const hoveredReq = hoveredIdx >= 0 ? requests[hoveredIdx] : null;
@@ -5651,10 +5656,10 @@ window.__ModuleLoader__.load({
 					tipColRef.current = hoveredIdx >= 0 ? hoveredIdx * 16 + BAR_W / 2 : 0;
 					syncTip(scrollRef.current);
 				});
-				return /* @__PURE__ */ React.createElement("div", { className: "lc-chartrow" }, /* @__PURE__ */ React.createElement("div", { className: "lc-axis" }, delta ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "lc-axis-top" }, (maxUp > 0 ? "+" : "") + fmt(maxUp)), /* @__PURE__ */ React.createElement("span", {
+				return /* @__PURE__ */ React.createElement("div", { className: "lc-chartrow" }, /* @__PURE__ */ React.createElement("div", { className: "lc-axis" }, delta ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "lc-axis-top" }, fmtSigned(maxUp)), q3Clear ? /* @__PURE__ */ React.createElement("span", { className: "lc-axis-q3" }, fmtSigned(Math.round(maxUp - span / 4))) : null, /* @__PURE__ */ React.createElement("span", {
 					className: "lc-axis-mid",
 					style: { top: `${13 + upPx}px` }
-				}, "0"), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-bot" }, (maxDown > 0 ? "-" : "") + fmt(maxDown))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "lc-axis-top" }, fmt(maxTotal)), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-mid" }, fmt(Math.round(maxTotal / 2))), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-bot" }, "0"))), /* @__PURE__ */ React.createElement("div", { className: "lc-chart-wrap" }, /* @__PURE__ */ React.createElement("div", {
+				}, "0"), q1Clear ? /* @__PURE__ */ React.createElement("span", { className: "lc-axis-q1" }, fmtSigned(Math.round(maxUp - 3 * span / 4))) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-axis-bot" }, fmtSigned(-maxDown))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "lc-axis-top" }, fmt(maxTotal)), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-q3" }, fmt(Math.round(maxTotal * 3 / 4))), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-mid" }, fmt(Math.round(maxTotal / 2))), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-q1" }, fmt(Math.round(maxTotal / 4))), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-bot" }, "0"))), /* @__PURE__ */ React.createElement("div", { className: "lc-chart-wrap" }, /* @__PURE__ */ React.createElement("div", {
 					className: "lc-chart-scroll" + (props.activeTurn !== null ? " lc-chart-dim" : ""),
 					ref: scrollRef,
 					onScroll: (e) => {
@@ -5667,10 +5672,10 @@ window.__ModuleLoader__.load({
 					onMouseLeave: () => {
 						props.onHover(null);
 					}
-				}, /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-top" }), delta ? /* @__PURE__ */ React.createElement("div", {
+				}, /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-top" }), !delta || q3Clear ? /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-q3" }) : null, !delta || q1Clear ? /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-q1" }) : null, !delta ? /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-mid" }) : null, /* @__PURE__ */ React.createElement("div", {
 					className: "lc-grid lc-grid-zero",
-					style: { top: `${18 + upPx}px` }
-				}) : /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-mid" }), requests.map((req, i) => /* @__PURE__ */ React.createElement(ChartBar, {
+					style: delta ? { top: `${18 + upPx}px` } : void 0
+				}), requests.map((req, i) => /* @__PURE__ */ React.createElement(ChartBar, {
 					key: req.seq,
 					req,
 					marker: markers[i],
@@ -5705,7 +5710,7 @@ window.__ModuleLoader__.load({
 							props.onPickTurn(grp.turn);
 						}
 					}, /* @__PURE__ */ React.createElement("span", { className: "lc-turn-label" }, `T${grp.turn}`));
-				}))), hoveredReq !== null ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-tip" }, tipOf(hoveredReq)) : null));
+				}))), hoveredReq !== null ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-tip" }, tipRowsOf(hoveredReq).map((row, i) => /* @__PURE__ */ React.createElement("span", { key: i }, row))) : null));
 			};
 		}
 		//#endregion
@@ -5847,7 +5852,6 @@ window.__ModuleLoader__.load({
 					requests
 				]);
 				const briefList = React.useMemo(() => data ? briefNodes(data) : [], [data]);
-				const replyTips = React.useMemo(() => replyTipsOf(briefList), [briefList]);
 				const convNodes = conversationNodesOf(props);
 				const bySeq = React.useMemo(() => {
 					const m = /* @__PURE__ */ new Map();
@@ -6003,8 +6007,7 @@ window.__ModuleLoader__.load({
 					},
 					onFocusTurnHandled: () => {
 						setFocusTurn(null);
-					},
-					replyTips
+					}
 				}), /* @__PURE__ */ React.createElement(RequestDetail, {
 					request: activeReq,
 					prev: trendMode === "delta" && activeIdx >= 0 ? activeIdx > 0 ? displayRequests[activeIdx - 1] : null : void 0,
@@ -6204,7 +6207,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-global-css:/home/runner/work/dsh-context/dsh-context/src/client/styles/trendChart.css.mjs
-		const css$8 = ".lc-chartrow{align-items:stretch;gap:6px;display:flex}.lc-axis{box-sizing:border-box;width:40px;height:150px;color:var(--dsw-alias-label-secondary);padding-top:18px;font-size:11px;position:relative}.lc-axis span{line-height:1;position:absolute;right:0}.lc-axis-top{top:13px}.lc-axis-mid{top:69px}.lc-axis-bot{top:125px}.lc-chart-wrap{flex:1;min-width:0;position:relative}.lc-chart-scroll{scrollbar-gutter:stable;padding-bottom:var(--dsh-scrollbar-width,8px);overflow:auto hidden}.lc-chart{box-sizing:border-box;align-items:flex-end;gap:2px;width:max-content;min-width:100%;height:130px;padding-top:18px;display:flex;position:relative}.lc-grid{border-top:1px dashed var(--dsw-alias-border-l1);pointer-events:none;position:absolute;left:0;right:0}.lc-grid-top{top:18px}.lc-grid-mid{top:74px}.lc-grid-zero{border-top-style:solid;border-top-color:#80808080}.lc-bar{cursor:pointer;border-radius:2px;flex:none;align-items:flex-end;width:14px;height:100%;transition:opacity .12s,background-color .12s;display:flex;position:relative}.lc-chart-dim .lc-bar{opacity:.35}.lc-chart-dim .lc-bar-in-turn{opacity:1}.lc-chart-dim .lc-turn{opacity:.35}.lc-chart-dim .lc-turn-on{opacity:1}.lc-chart-tip{z-index:5;white-space:nowrap;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-primary);pointer-events:none;border-radius:6px;padding:3px 8px;font-size:12px;position:absolute;top:0;left:0;box-shadow:0 2px 8px #0000002e}.lc-bar:hover{background:var(--dsw-alias-bg-layer-2)}.lc-bar-hovered{outline:1px dashed var(--dsw-alias-brand-primary);outline-offset:1px}.lc-bar-selected{outline:2px solid var(--dsw-alias-label-primary);outline-offset:1px}.lc-bar-in-turn{background:#80808024}.lc-bar-stack{flex-direction:column-reverse;width:100%;display:flex}.lc-bar-stack>div{width:100%}.lc-bar-up,.lc-bar-down{width:100%;display:flex;position:absolute;left:0}.lc-bar-up{flex-direction:column-reverse}.lc-bar-down{flex-direction:column}.lc-bar-up>div,.lc-bar-down>div{width:100%}.lc-cat-seg{transition:filter .12s,opacity .12s}.lc-chart[data-catdim] .lc-cat-seg{opacity:.35}.lc-chart[data-catdim=system] .lc-cat-seg[data-cat=system],.lc-chart[data-catdim=tools] .lc-cat-seg[data-cat=tools],.lc-chart[data-catdim=user] .lc-cat-seg[data-cat=user],.lc-chart[data-catdim=inject] .lc-cat-seg[data-cat=inject],.lc-chart[data-catdim=assistant] .lc-cat-seg[data-cat=assistant],.lc-chart[data-catdim=tool] .lc-cat-seg[data-cat=tool]{opacity:1;filter:brightness(1.18)}.lc-bar-marker{color:var(--dsw-alias-state-warn-primary);font-size:11px;position:absolute;top:-16px;left:50%;transform:translate(-50%)}.lc-turns{gap:2px;margin-top:4px;display:flex;overflow:hidden}.lc-turn{box-sizing:border-box;text-align:center;color:var(--dsw-alias-label-secondary);white-space:nowrap;text-overflow:ellipsis;cursor:pointer;border-radius:3px;flex:none;height:14px;font-size:10px;font-weight:600;line-height:14px;transition:filter .12s,opacity .12s;overflow:hidden}.lc-turn-on{filter:brightness(1.35);color:var(--dsw-alias-label-primary)}.lc-turn-label{text-overflow:ellipsis;max-width:100%;display:inline-block;overflow:hidden}";
+		const css$8 = ".lc-chartrow{align-items:stretch;gap:6px;display:flex}.lc-axis{box-sizing:border-box;width:40px;height:150px;color:var(--dsw-alias-label-secondary);padding-top:18px;font-size:11px;position:relative}.lc-axis span{line-height:1;position:absolute;right:0}.lc-axis-top{top:13px}.lc-axis-q3{top:41px}.lc-axis-mid{top:69px}.lc-axis-q1{top:97px}.lc-axis-bot{top:125px}.lc-chart-wrap{flex:1;min-width:0;position:relative}.lc-chart-scroll{scrollbar-gutter:stable;padding-bottom:var(--dsh-scrollbar-width,8px);overflow:auto hidden}.lc-chart{box-sizing:border-box;align-items:flex-end;gap:2px;width:max-content;min-width:100%;height:130px;padding-top:18px;display:flex;position:relative}.lc-grid{border-top:1px dashed var(--dsw-alias-border-l2);pointer-events:none;position:absolute;left:0;right:0}.lc-grid-top{top:18px}.lc-grid-q3{top:46px}.lc-grid-mid{top:74px}.lc-grid-q1{top:102px}.lc-grid-zero{border-top-style:solid;border-top-color:#80808080;top:130px}.lc-bar{cursor:pointer;border-radius:2px;flex:none;align-items:flex-end;width:14px;height:100%;transition:opacity .12s,background-color .12s;display:flex;position:relative}.lc-chart-dim .lc-bar{opacity:.35}.lc-chart-dim .lc-bar-in-turn{opacity:1}.lc-chart-dim .lc-turn{opacity:.35}.lc-chart-dim .lc-turn-on{opacity:1}.lc-chart-tip{z-index:5;box-sizing:border-box;overflow-wrap:break-word;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l1);max-width:100%;color:var(--dsw-alias-label-primary);pointer-events:none;border-radius:6px;flex-direction:column;gap:2px;padding:3px 8px;font-size:12px;display:flex;position:absolute;bottom:calc(100% + 4px);left:0;box-shadow:0 2px 8px #0000002e}.lc-bar:hover{background:var(--dsw-alias-bg-layer-2)}.lc-bar-hovered{outline:1px dashed var(--dsw-alias-brand-primary);outline-offset:1px}.lc-bar-selected{outline:2px solid var(--dsw-alias-label-primary);outline-offset:1px}.lc-bar-in-turn{background:#80808024}.lc-bar-stack{flex-direction:column-reverse;width:100%;display:flex}.lc-bar-stack>div{width:100%}.lc-bar-up,.lc-bar-down{width:100%;display:flex;position:absolute;left:0}.lc-bar-up{flex-direction:column-reverse}.lc-bar-down{flex-direction:column}.lc-bar-up>div,.lc-bar-down>div{width:100%}.lc-cat-seg{transition:filter .12s,opacity .12s}.lc-chart[data-catdim] .lc-cat-seg{opacity:.35}.lc-chart[data-catdim=system] .lc-cat-seg[data-cat=system],.lc-chart[data-catdim=tools] .lc-cat-seg[data-cat=tools],.lc-chart[data-catdim=user] .lc-cat-seg[data-cat=user],.lc-chart[data-catdim=inject] .lc-cat-seg[data-cat=inject],.lc-chart[data-catdim=assistant] .lc-cat-seg[data-cat=assistant],.lc-chart[data-catdim=tool] .lc-cat-seg[data-cat=tool]{opacity:1;filter:brightness(1.18)}.lc-bar-marker{color:var(--dsw-alias-state-warn-primary);font-size:11px;position:absolute;top:-16px;left:50%;transform:translate(-50%)}.lc-turns{gap:2px;margin-top:4px;display:flex;overflow:hidden}.lc-turn{box-sizing:border-box;text-align:center;color:var(--dsw-alias-label-secondary);white-space:nowrap;cursor:pointer;border-radius:3px;flex:none;height:14px;font-size:10px;font-weight:600;line-height:14px;transition:filter .12s,opacity .12s}.lc-turn-on{filter:brightness(1.35);color:var(--dsw-alias-label-primary)}.lc-turn-label{display:inline-block}";
 		const tagId$8 = "dsh-context/trendChart.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$8) + "]") === null) {
 			const tag = document.createElement("style");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.38.2",
+  "version": "0.38.3",
   "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": {