dsh-context 0.5.0 → 0.6.1

package/README.md

@@ -72,6 +72,8 @@ pnpm test               # typecheck + functional tests for both halves
 
 `build.mjs` also smoke-checks the outputs (both halves must parse; the host half must import with the `name`/`inject`/`apply` plugin shape).
 
+Commits are guarded by a [husky](https://typicode.github.io/husky/) pre-commit hook that runs `pnpm run typecheck` (`tsc --noEmit`, strict).
+
 ## Files
 
 | File | Role |

package/lib/client.js

@@ -18,14 +18,17 @@ const DICT_ZH = {
   "overview.title": "\u5F53\u524D\u6784\u6210",
   "overview.ofWindow": "tokens\uFF08\u7EA6 {p}%\uFF09",
   "overview.estimate": "tokens\uFF08\u4F30\u7B97\uFF09",
+  "overview.actual": "\xB7 \u4E0A\u6B21\u5B9E\u9645 prompt {n}",
   "tools.top": "\u5DE5\u5177\u5B9A\u4E49 Top\uFF1A",
   "tools.more": "\u7B49 {n} \u4E2A",
   "trend.title": "\u5386\u53F2\u8D8B\u52BF",
   "gran.step": "\u6B65\u9AA4",
   "gran.turn": "\u8F6E\u6B21",
-  "trend.hint": "\u6BCF\u6B21\u6A21\u578B\u8BF7\u6C42\u4E00\u6BB5\uFF1B\u70B9\u51FB\u67F1\u5B50\u67E5\u770B\u8BE6\u60C5\uFF0C\u2702 \u8868\u793A\u538B\u7F29/\u526A\u679D",
+  "trend.hint": "\u6BCF\u6B21\u6A21\u578B\u8BF7\u6C42\u4E00\u6BB5\uFF1B\u70B9\u51FB\u67F1\u5B50\u67E5\u770B\u8BE6\u60C5\uFF0C\u2702 \u8868\u793A\u538B\u7F29/\u526A\u679D\uFF1B\u5DE6\u53F3\u6ED1\u52A8\u53EF\u56DE\u770B\u66F4\u65E9",
   "trend.empty": "\u53D1\u8D77\u4E00\u8F6E\u5BF9\u8BDD\u540E\uFF0C\u8FD9\u91CC\u4F1A\u5C55\u793A\u6BCF\u6B21\u6A21\u578B\u8BF7\u6C42\u7684\u4E0A\u4E0B\u6587\u6784\u6210",
   "detail.step": "T{t} \xB7 \u7B2C {s} \u6B65",
+  "detail.turn": "T{t} \xB7 \u5171 {n} \u6B65",
+  "detail.lastStep": "\u672B\u6B65",
   "detail.estTotal": "\u4F30\u7B97\u5408\u8BA1 \u2248 {n}",
   "detail.actual": "\u5B9E\u9645 prompt {n}",
   "detail.output": "\u8F93\u51FA {n}",
@@ -39,6 +42,7 @@ const DICT_ZH = {
   "error": "\u4E0A\u4E0B\u6587\u6570\u636E\u8BFB\u53D6\u5931\u8D25\uFF1A",
   "footer": "\u4F30\u7B97\u53E3\u5F84\uFF1A\u4E0E dsh \u5185\u7F6E tokenMeter \u76F8\u540C\u7684\u56FA\u5B9A\u5BC6\u5EA6\u542F\u53D1\u5F0F\uFF08\u7EA6 4 \u5B57\u7B26 \u2248 1 token\uFF09\uFF1B\u300C\u5B9E\u9645\u300D\u4E3A\u4F9B\u5E94\u5546\u4E0A\u62A5\u7528\u91CF\u3002",
   "tip.step": "T{t} \xB7 \u7B2C{s}\u6B65",
+  "tip.turn": "T{t} \xB7 \u5171 {n} \u6B65",
   "tip.total": "\u5408\u8BA1 \u2248 {n}",
   "tip.actual": "\uFF08\u5B9E\u9645 {n}\uFF09",
   "ev.compaction": "\u538B\u7F29\u4E0A\u4E0B\u6587\uFF08\u6458\u8981\u66FF\u6362 {n} \u6761\u6D88\u606F\uFF09",
@@ -69,14 +73,17 @@ const DICT_EN = {
   "overview.title": "Current composition",
   "overview.ofWindow": "tokens (~{p}%)",
   "overview.estimate": "tokens (estimated)",
+  "overview.actual": "\xB7 last actual prompt {n}",
   "tools.top": "Top tool schemas:",
   "tools.more": "of {n}",
   "trend.title": "History",
   "gran.step": "Step",
   "gran.turn": "Turn",
-  "trend.hint": "one bar per model request; click a bar for details, \u2702 marks compaction/prune",
+  "trend.hint": "one bar per model request; click a bar for details, \u2702 marks compaction/prune; scroll sideways to see earlier",
   "trend.empty": "Send a message and each model request\u2019s context makeup shows up here",
   "detail.step": "T{t} \xB7 step {s}",
+  "detail.turn": "T{t} \xB7 {n} steps",
+  "detail.lastStep": "last step",
   "detail.estTotal": "estimated \u2248 {n}",
   "detail.actual": "actual prompt {n}",
   "detail.output": "output {n}",
@@ -90,6 +97,7 @@ const DICT_EN = {
   "error": "Failed to read context data: ",
   "footer": "Estimate: same fixed-density heuristic as dsh\u2019s built-in tokenMeter (~4 chars \u2248 1 token); \u201Cactual\u201D is provider-reported usage.",
   "tip.step": "T{t} \xB7 step {s}",
+  "tip.turn": "T{t} \xB7 {n} steps",
   "tip.total": "total \u2248 {n}",
   "tip.actual": " (actual {n})",
   "ev.compaction": "Context compacted (summary replaced {n} messages)",
@@ -124,10 +132,16 @@ function fmtTime(t) {
 }
 function aggregateByTurn(requests) {
   const out = [];
+  let runSteps = 0;
   for (const req of requests) {
     const last = out.length > 0 ? out[out.length - 1] : null;
-    if (last !== null && (last.turn ?? 0) === (req.turn ?? 0)) out[out.length - 1] = req;
-    else out.push(req);
+    if (last !== null && (last.turn ?? 0) === (req.turn ?? 0)) {
+      runSteps++;
+      out[out.length - 1] = { ...req, stepCount: runSteps };
+    } else {
+      runSteps = 1;
+      out.push({ ...req, stepCount: 1 });
+    }
   }
   return out;
 }
@@ -172,18 +186,21 @@ function makeView(ctx, t) {
     let total = 0;
     for (const p of props.parts) total += p.value;
     const scale = props.max !== void 0 && props.max > total ? props.max : total;
-    const wrapRef = React.useRef(null);
-    const [tip, setTip] = React.useState(null);
-    const showTip = (e, p) => {
-      const rect = wrapRef.current?.getBoundingClientRect();
-      const left = rect ? e.clientX - rect.left : 50;
-      const width = rect?.width ?? 200;
-      setTip({
-        key: p.key,
-        text: catLabel(p.key) + " " + fmt(p.value) + " (" + Math.round(p.value / total * 100) + "%)",
-        left: Math.max(48, Math.min(left, width - 48))
-      });
-    };
+    let tip = null;
+    if (props.hoverKey !== null && props.hoverKey !== void 0) {
+      let acc = 0;
+      for (const p of props.parts) {
+        const pct = scale > 0 ? p.value / scale * 100 : 0;
+        if (p.key === props.hoverKey && p.value > 0) {
+          tip = {
+            text: catLabel(p.key) + " " + fmt(p.value) + " (" + Math.round(p.value / total * 100) + "%)",
+            leftPct: Math.max(12, Math.min(acc + pct / 2, 88))
+          };
+          break;
+        }
+        acc += pct;
+      }
+    }
     return h(
       "div",
       { className: "lc-stacked-wrap" },
@@ -192,26 +209,24 @@ function makeView(ctx, t) {
         {
           className: "lc-stacked",
           style: { height: (props.height || 14) + "px" },
-          ref: wrapRef,
           onMouseLeave: () => {
-            setTip(null);
+            if (props.onHoverKey !== void 0) props.onHoverKey(null);
           }
         },
         total <= 0 ? null : props.parts.map((p) => {
           if (!p.value) return null;
+          const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
           return h("div", {
             key: p.key,
+            className: "lc-stacked-seg" + (on ? " lc-stacked-seg-on" : ""),
             style: { width: p.value / scale * 100 + "%", background: p.color },
-            onMouseEnter: (e) => {
-              showTip(e, p);
-            },
-            onMouseMove: (e) => {
-              showTip(e, p);
+            onMouseEnter: () => {
+              if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
             }
           });
         })
       ),
-      tip ? h("div", { className: "lc-bar-tip", style: { left: tip.left + "px" } }, tip.text) : null
+      tip ? h("div", { className: "lc-bar-tip", style: { left: tip.leftPct + "%" } }, tip.text) : null
     );
   }
   function Legend(props) {
@@ -221,9 +236,19 @@ function makeView(ctx, t) {
       "div",
       { className: "lc-legend" },
       props.parts.map((p) => {
+        const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
         return h(
           "span",
-          { key: p.key, className: "lc-chip" },
+          {
+            key: p.key,
+            className: "lc-chip" + (on ? " lc-chip-on" : ""),
+            onMouseEnter: () => {
+              if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
+            },
+            onMouseLeave: () => {
+              if (props.onHoverKey !== void 0) props.onHoverKey(null);
+            }
+          },
           h("i", { style: { background: p.color } }),
           catLabel(p.key) + " " + fmt(p.value),
           total > 0 ? h("em", null, Math.round(p.value / total * 100) + "%") : null
@@ -257,17 +282,36 @@ function makeView(ctx, t) {
     const groups = [];
     for (const req of requests) {
       let grp = groups.length > 0 ? groups[groups.length - 1] : null;
-      if (grp === null || grp.turn !== req.turn) {
-        grp = { turn: req.turn ?? 0, count: 0 };
+      if (grp === null || grp.turn !== (req.turn ?? 0)) {
+        grp = { turn: req.turn ?? 0, count: 0, span: 0, agg: req.stepCount !== void 0 };
         groups.push(grp);
       }
       grp.count++;
+      grp.span += req.stepCount ?? 1;
     }
     const scrollRef = React.useRef(null);
-    React.useEffect(() => {
+    const scrolledOnce = React.useRef(false);
+    const lastGranRef = React.useRef(props.granularity);
+    const [edges, setEdges] = React.useState({ left: false, right: false });
+    const updateEdges = (el) => {
+      const left = el.scrollLeft > 4;
+      const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 4;
+      setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
+    };
+    React.useLayoutEffect(() => {
       const el = scrollRef.current;
       if (el === null) return;
-      if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 24) el.scrollLeft = el.scrollWidth;
+      if (props.granularity !== lastGranRef.current) {
+        lastGranRef.current = props.granularity;
+        scrolledOnce.current = false;
+      }
+      if (!scrolledOnce.current) {
+        scrolledOnce.current = true;
+        el.scrollLeft = el.scrollWidth;
+      } else if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 24) {
+        el.scrollLeft = el.scrollWidth;
+      }
+      updateEdges(el);
     });
     return h(
       "div",
@@ -281,7 +325,16 @@ function makeView(ctx, t) {
       ),
       h(
         "div",
-        { className: "lc-chart-scroll", ref: scrollRef },
+        {
+          className: "lc-chart-scroll",
+          ref: scrollRef,
+          onScroll: (e) => {
+            updateEdges(e.currentTarget);
+          }
+        },
+        // Edge fades: visible whenever more history sits beyond the viewport,
+        // so the horizontal scroll affordance is obvious.
+        edges.left ? h("div", { className: "lc-chart-fade lc-chart-fade-l" }) : null,
         // Hovering a bar previews it in the detail below; leaving the plot
         // clears the preview (a pinned selection, if any, takes over again).
         h(
@@ -295,12 +348,15 @@ function makeView(ctx, t) {
             const selected = props.selectedSeq === req.seq;
             const hovered = props.hoveredSeq === req.seq;
             const inTurn = props.activeTurn !== null && (req.turn ?? 0) === props.activeTurn;
-            const tip = tr("tip.step", { t: req.turn ?? 0, s: req.step ?? 0 }) + " \xB7 " + fmtTime(req.time) + "\n" + tr("tip.total", { n: fmt(req.total) }) + (req.prompt !== void 0 ? tr("tip.actual", { n: fmt(req.prompt) }) : "") + "\n" + CATS.map((c) => catLabel(c.key) + " " + fmt(req[c.key] || 0)).join(" / ");
+            const tip = (req.stepCount !== void 0 && req.stepCount > 1 ? tr("tip.turn", { t: req.turn ?? 0, n: req.stepCount }) : tr("tip.step", { t: req.turn ?? 0, s: req.step ?? 0 })) + " \xB7 " + fmtTime(req.time) + "\n" + tr("tip.total", { n: fmt(req.total) }) + (req.prompt !== void 0 ? tr("tip.actual", { n: fmt(req.prompt) }) : "") + "\n" + CATS.map((c) => catLabel(c.key) + " " + fmt(req[c.key] || 0)).join(" / ");
             return h(
               "div",
               {
                 key: req.seq,
+                // Uniform column width in BOTH granularities: turn aggregates
+                // keep the same fixed width as step bars.
                 className: "lc-bar" + (selected ? " lc-bar-selected" : "") + (hovered ? " lc-bar-hovered" : "") + (inTurn ? " lc-bar-in-turn" : ""),
+                style: { width: BAR_W + "px" },
                 title: tip,
                 onClick: () => {
                   props.onSelect(selected ? null : req.seq);
@@ -334,11 +390,12 @@ function makeView(ctx, t) {
           } },
           groups.map((grp, gi) => {
             const on = props.activeTurn === grp.turn;
+            const blockW = grp.agg ? BAR_W : grp.span * (BAR_W + BAR_GAP) - BAR_GAP;
             return h("span", {
               key: "turn-" + gi,
               className: "lc-turn" + (on ? " lc-turn-on" : ""),
               style: {
-                width: grp.count * (BAR_W + BAR_GAP) - BAR_GAP + "px",
+                width: blockW + "px",
                 background: TURN_COLORS[gi % TURN_COLORS.length]
               },
               title: "T" + grp.turn,
@@ -347,20 +404,24 @@ function makeView(ctx, t) {
               }
             }, "T" + grp.turn);
           })
-        )
+        ),
+        edges.right ? h("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null
       )
     );
   }
   function RequestDetail(props) {
     const req = props.request;
     if (!req) return null;
+    const isTurn = req.stepCount !== void 0 && req.stepCount > 1;
+    const head = isTurn ? tr("detail.turn", { t: req.turn ?? 0, n: req.stepCount ?? 0 }) : tr("detail.step", { t: req.turn ?? 0, s: req.step ?? 0 });
     return h(
       "div",
       { className: "lc-detail" },
       h(
         "div",
         { className: "lc-detail-head" },
-        h("b", null, tr("detail.step", { t: req.turn ?? 0, s: req.step ?? 0 })),
+        h("b", null, head),
+        isTurn ? h("span", { className: "lc-detail-tag" }, t("detail.lastStep")) : null,
         h("span", null, fmtTime(req.time)),
         h("span", null, tr("detail.estTotal", { n: fmt(req.total) })),
         req.prompt !== void 0 ? h("span", { className: "lc-actual" }, tr("detail.actual", { n: fmt(req.prompt) })) : null,
@@ -432,6 +493,8 @@ function makeView(ctx, t) {
           { key: n.seq, className: "lc-node" },
           h("i", { style: { background: catColor[n.cat] || "#999" } }),
           h("span", { className: "lc-node-preview", title: text }, text),
+          // Timestamp when the host event carried one.
+          typeof n.time === "number" ? h("span", { className: "lc-node-time" }, fmtTime(n.time)) : null,
           h("span", { className: "lc-node-tokens" }, fmt(n.tokens))
         );
       })
@@ -446,6 +509,7 @@ function makeView(ctx, t) {
     const [hoverTurn, setHoverTurn] = React.useState(null);
     const [tick, setTick] = React.useState(0);
     const [granularity, setGranularity] = React.useState("step");
+    const [hoverCat, setHoverCat] = React.useState(null);
     React.useEffect(() => {
       if (typeof sessionId !== "string" || sessionId === "") return void 0;
       let alive = true;
@@ -521,10 +585,19 @@ function makeView(ctx, t) {
           "div",
           { className: "lc-overview-num" },
           h("b", null, fmt(current.total)),
-          h("span", null, data.contextWindow ? " / " + fmt(data.contextWindow) + " " + tr("overview.ofWindow", { p: windowPct ?? 0 }) : " " + t("overview.estimate"))
+          h("span", null, data.contextWindow ? " / " + fmt(data.contextWindow) + " " + tr("overview.ofWindow", { p: windowPct ?? 0 }) : " " + t("overview.estimate")),
+          // The provider-reported prompt of the last request is the best
+          // ground truth for what the model actually received; the fixed
+          // density heuristic can undercount CJK-heavy content, so show the
+          // real number alongside the estimate.
+          displayRequests.length > 0 && displayRequests[displayRequests.length - 1].prompt !== void 0 ? h(
+            "span",
+            { className: "lc-actual" },
+            tr("overview.actual", { n: fmt(displayRequests[displayRequests.length - 1].prompt ?? 0) })
+          ) : null
         ),
-        h(StackedBar, { parts: partsOf(current), height: 16, max: data.contextWindow }),
-        h(Legend, { parts: partsOf(current) }),
+        h(StackedBar, { parts: partsOf(current), height: 16, max: data.contextWindow, hoverKey: hoverCat, onHoverKey: setHoverCat }),
+        h(Legend, { parts: partsOf(current), hoverKey: hoverCat, onHoverKey: setHoverCat }),
         data.toolList && data.toolList.length > 0 ? h(
           "div",
           { className: "lc-tools" },
@@ -565,11 +638,17 @@ function makeView(ctx, t) {
           "div",
           null,
           h(TrendChart, {
-            requests: displayRequests.slice(-80),
+            // Remount per session: switching sessions re-anchors the chart
+            // at the newest bars instead of inheriting stale scroll state.
+            key: sessionId,
+            // The host caps the log at 160 requests; render them ALL so
+            // earlier turns/steps stay reachable via horizontal scroll.
+            requests: displayRequests,
             events,
             selectedSeq: pinnedReq ? pinnedReq.seq : null,
             hoveredSeq,
             activeTurn,
+            granularity,
             onSelect: setSelectedSeq,
             onHover: setHoveredSeq,
             onHoverTurn: setHoverTurn
@@ -612,7 +691,7 @@ const STYLES = [
   ".lc-gran { margin-left: auto; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 1px; }",
   ".lc-gran-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; }",
   ".lc-gran-btn:hover { color: var(--dsw-alias-label-primary); }",
-  ".lc-gran-on, .lc-gran-on:hover { background: var(--dsw-alias-brand-primary); color: #fff; }",
+  ".lc-gran-on, .lc-gran-on:hover { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }",
   ".lc-overview-num { margin-bottom: 8px; }",
   ".lc-overview-num b { font-size: 20px; }",
   ".lc-overview-num span { color: var(--dsw-alias-label-secondary); }",
@@ -620,10 +699,13 @@ const STYLES = [
   ".lc-stacked { display: flex; width: 100%; border-radius: 5px; overflow: hidden; background: rgba(128,128,128,0.18); }",
   ".lc-bar-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; }",
   ".lc-stacked > div { height: 100%; }",
+  ".lc-stacked-seg-on { filter: brightness(1.18); }",
   ".lc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }",
   ".lc-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--dsw-alias-label-primary); }",
   ".lc-chip i, .lc-detail-row i, .lc-node i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }",
   ".lc-chip em { font-style: normal; color: var(--dsw-alias-label-secondary); }",
+  ".lc-chip-on { font-weight: 600; }",
+  ".lc-chip-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }",
   ".lc-tools { margin-top: 10px; color: var(--dsw-alias-label-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }",
   ".lc-tool-chip { background: var(--dsw-alias-bg-layer-2); border-radius: 4px; padding: 1px 7px; font-size: 12px; color: var(--dsw-alias-label-primary); }",
   ".lc-chartrow { display: flex; gap: 6px; align-items: stretch; }",
@@ -632,10 +714,14 @@ const STYLES = [
   ".lc-axis-top { top: 13px; }",
   ".lc-axis-mid { top: 69px; }",
   ".lc-axis-bot { top: 125px; }",
-  ".lc-chart-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; }",
-  ".lc-chart-scroll::-webkit-scrollbar { height: 6px; }",
-  ".lc-chart-scroll::-webkit-scrollbar-thumb { background: var(--dsw-alias-border-l1); border-radius: 3px; }",
+  ".lc-chart-scroll { position: relative; flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; }",
+  ".lc-chart-scroll::-webkit-scrollbar { height: 8px; }",
+  ".lc-chart-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 45%, transparent); border-radius: 4px; }",
+  ".lc-chart-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 70%, transparent); }",
   ".lc-chart-scroll::-webkit-scrollbar-track { background: transparent; }",
+  ".lc-chart-fade { position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2; }",
+  ".lc-chart-fade-l { left: 0; background: linear-gradient(to right, var(--dsw-alias-bg-layer-1), transparent); }",
+  ".lc-chart-fade-r { right: 0; background: linear-gradient(to left, var(--dsw-alias-bg-layer-1), transparent); }",
   ".lc-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 18px; box-sizing: border-box; width: max-content; min-width: 100%; }",
   ".lc-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dsw-alias-border-l1); pointer-events: none; }",
   ".lc-grid-top { top: 18px; }",
@@ -649,12 +735,13 @@ const STYLES = [
   ".lc-bar-stack > div { width: 100%; }",
   ".lc-bar-marker { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--dsw-alias-state-warn-primary); }",
   ".lc-turns { display: flex; gap: 2px; width: max-content; min-width: 100%; margin-top: 4px; }",
-  ".lc-turn { flex: none; min-width: 16px; box-sizing: border-box; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: #fff; border-radius: 3px; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; transition: filter 120ms; }",
+  ".lc-turn { flex: none; box-sizing: border-box; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: #fff; border-radius: 3px; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; transition: filter 120ms; }",
   ".lc-turn-on { filter: brightness(1.35); box-shadow: 0 0 0 1px rgba(255,255,255,0.4); }",
   ".lc-detail { margin-top: 12px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 12px; }",
   ".lc-detail-head { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--dsw-alias-label-secondary); }",
   ".lc-detail-head b { color: var(--dsw-alias-label-primary); }",
   ".lc-detail-head .lc-actual { color: var(--dsw-alias-state-success-primary); }",
+  ".lc-detail-tag { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px; padding: 0 6px; font-size: 11px; color: var(--dsw-alias-label-secondary); }",
   ".lc-detail-rows { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }",
   ".lc-detail-row { display: flex; align-items: center; gap: 8px; }",
   ".lc-detail-label { min-width: 70px; white-space: nowrap; color: var(--dsw-alias-label-secondary); }",
@@ -675,6 +762,7 @@ const STYLES = [
   ".lc-event-time { color: var(--dsw-alias-label-secondary); font-size: 12px; }",
   ".lc-node { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
   ".lc-node-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary); }",
+  ".lc-node-time { color: var(--dsw-alias-label-secondary); font-size: 12px; min-width: 54px; text-align: right; }",
   ".lc-node-tokens { color: var(--dsw-alias-label-secondary); }",
   ".lc-nodes-more { color: var(--dsw-alias-label-secondary); padding: 3px 0; }",
   ".lc-empty { color: var(--dsw-alias-label-secondary); padding: 18px 0; text-align: center; }",

package/lib/index.js

@@ -25,7 +25,10 @@ function estimateBlocks(blocks) {
   }
   return tokens;
 }
-function estimateMessage(message) {
+function estimateMessage(message, emptyIsZero = false) {
+  if (emptyIsZero && (message === null || message === void 0 || !Array.isArray(message.content) || message.content.length === 0)) {
+    return 0;
+  }
   return estimateBlocks(message?.content) + ROLE_OVERHEAD;
 }
 function estimateSystem(text) {
@@ -55,6 +58,23 @@ function toolCallNames(blocks) {
 function isInjection(source) {
   return source !== null && typeof source === "object" && (source.kind === "plugin" || source.kind === "skill-invocation" || typeof source.form === "string");
 }
+const MAX_REQUEST_STEPS = 1500;
+const MAX_KEPT_TURNS = 300;
+function trimToLastTurns(requests, maxTurns) {
+  let runs = 0;
+  let start = requests.length;
+  let prevTurn;
+  for (let i = requests.length - 1; i >= 0; i--) {
+    const turn = requests[i].turn;
+    if (turn !== prevTurn) {
+      if (runs >= maxTurns) break;
+      runs++;
+      prevTurn = turn;
+    }
+    start = i;
+  }
+  return requests.slice(start);
+}
 function createFold() {
   return {
     n: 0,
@@ -86,7 +106,14 @@ function categoryOf(type, message) {
 }
 function applySurface(st, ev, type, data, message) {
   const cat = categoryOf(type, message);
-  const node = { seq: ev.seq, cat, tokens: estimateMessage(message) };
+  const node = {
+    seq: ev.seq,
+    time: ev.time,
+    cat,
+    // Empty assistant messages project to no model message (usage-only), so
+    // they price 0 — mirroring dsh's deriveEventMessage/estimate.
+    tokens: estimateMessage(message, type === "assistant/message")
+  };
   const source = message?.source;
   const form = source?.form;
   if (typeof form === "string") node.form = form;
@@ -151,8 +178,7 @@ function foldInto(st, events) {
           name: typeof t.name === "string" ? t.name : "?",
           tokens: estimateToolSchema(t)
         }));
-        st.toolsTokens = st.toolList.reduce((a, t) => a + t.tokens, 0);
-        if (tools.length > 0) st.toolsTokens += BLOCK_OVERHEAD;
+        st.toolsTokens = tools.length > 0 ? Math.ceil(JSON.stringify(tools).length / CHARS_PER_TOKEN) + BLOCK_OVERHEAD : 0;
         st.systemTokens = estimateSystem(header.system);
         if (header.config && typeof header.config.model === "string") st.model = header.config.model;
         if (header.config && typeof header.config.provider === "string") st.provider = header.config.provider;
@@ -192,9 +218,11 @@ function foldInto(st, events) {
         }
         break;
       }
-      case "tool/result":
-        applySurface(st, ev, ev.type, data, data);
+      case "tool/result": {
+        const toolMsg = data?.message ?? null;
+        applySurface(st, ev, ev.type, data, toolMsg);
         break;
+      }
       case "assistant/message": {
         const usage = data?.usage;
         const total = st.systemTokens + st.toolsTokens + st.sums.user + st.sums.inject + st.sums.assistant + st.sums.tool;
@@ -216,7 +244,8 @@ function foldInto(st, events) {
           if (typeof usage.outputTokens === "number") record.output = usage.outputTokens;
         }
         st.requests.push(record);
-        applySurface(st, ev, ev.type, data, data);
+        const asstMsg = data?.message ?? null;
+        applySurface(st, ev, ev.type, data, asstMsg);
         break;
       }
       case "compaction/summary":
@@ -241,8 +270,11 @@ function foldInto(st, events) {
     }
   }
   st.n = events.length;
-  if (st.requests.length > 160) st.requests = st.requests.slice(-160);
-  if (st.events.length > 150) st.events = st.events.slice(-150);
+  if (st.requests.length > MAX_REQUEST_STEPS) {
+    st.requests = trimToLastTurns(st.requests, MAX_KEPT_TURNS);
+    if (st.requests.length > MAX_REQUEST_STEPS) st.requests = st.requests.slice(-MAX_REQUEST_STEPS);
+  }
+  if (st.events.length > 400) st.events = st.events.slice(-400);
 }
 function buildResult(st) {
   const surfaceTotal = st.sums.user + st.sums.inject + st.sums.assistant + st.sums.tool;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Context insight panel for DeepSeek Harness: a Context tab (beside Chat/Trajectory) showing what the model's context window is made of and how it evolves — composition, per-request history, compactions, injections, and model switches.",
   "author": "bowenliang123",
   "repository": {
@@ -28,7 +28,8 @@
     "build": "node scripts/build.mjs",
     "typecheck": "tsc --noEmit",
     "test": "npm run typecheck && node scripts/test-host.mjs && node scripts/test-client.mjs",
-    "release": "bash scripts/publish.sh"
+    "release": "bash scripts/publish.sh",
+    "prepare": "husky"
   },
   "dsh": {
     "bundle": {
@@ -58,6 +59,10 @@
     "@deepseek-ai/cordis": "^4.0.1",
     "@types/react": "^18.3.31",
     "esbuild": "^0.28.2",
+    "husky": "^9.1.7",
+    "jsdom": "^30.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "^7.0.2"
   },
   "packageManager": "pnpm@11.9.0"