dsh-context 0.6.0 → 0.6.2

package/lib/client.js

@@ -24,10 +24,10 @@ const DICT_ZH = {
   "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\uFF1B\u5DE6\u53F3\u6ED1\u52A8\u53EF\u56DE\u770B\u66F4\u65E9",
+  "trend.hint": "\u60AC\u505C\u67F1\u5B50\u67E5\u770B\u8BE6\u60C5\uFF08\u70B9\u51FB\u56FA\u5B9A\uFF09\uFF0C\u2702 \u8868\u793A\u538B\u7F29/\u526A\u679D\uFF1B\u5DE6\u53F3\u6ED1\u52A8\u53EF\u56DE\u770B\u66F4\u65E9\uFF1BStep/Turn \u5207\u6362\u7C92\u5EA6",
   "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.step": "\u7B2C {t} \u8F6E \xB7 \u7B2C {s} \u6B65",
+  "detail.turn": "\u7B2C {t} \u8F6E \xB7 \u5171 {n} \u6B65",
   "detail.lastStep": "\u672B\u6B65",
   "detail.estTotal": "\u4F30\u7B97\u5408\u8BA1 \u2248 {n}",
   "detail.actual": "\u5B9E\u9645 prompt {n}",
@@ -41,8 +41,8 @@ const DICT_ZH = {
   "loading": "\u6B63\u5728\u8BFB\u53D6\u4F1A\u8BDD\u65E5\u5FD7\u2026",
   "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.step": "\u7B2C {t} \u8F6E \xB7 \u7B2C{s}\u6B65",
+  "tip.turn": "\u7B2C {t} \u8F6E \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",
@@ -79,10 +79,10 @@ const DICT_EN = {
   "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; scroll sideways to see earlier",
+  "trend.hint": "hover a bar for details (click to pin), \u2702 marks compaction/prune; scroll sideways to see earlier; Step/Turn switches granularity",
   "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.step": "Turn {t} \xB7 Step {s}",
+  "detail.turn": "Turn {t} \xB7 {n} steps",
   "detail.lastStep": "last step",
   "detail.estTotal": "estimated \u2248 {n}",
   "detail.actual": "actual prompt {n}",
@@ -96,8 +96,8 @@ const DICT_EN = {
   "loading": "Reading the session log\u2026",
   "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.step": "Turn {t} \xB7 Step {s}",
+  "tip.turn": "Turn {t} \xB7 {n} steps",
   "tip.total": "total \u2248 {n}",
   "tip.actual": " (actual {n})",
   "ev.compaction": "Context compacted (summary replaced {n} messages)",
@@ -186,23 +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))
-      });
-      if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
-    };
-    const clearHover = () => {
-      setTip(null);
-      if (props.onHoverKey !== void 0) props.onHoverKey(null);
-    };
+    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" },
@@ -211,8 +209,9 @@ function makeView(ctx, t) {
         {
           className: "lc-stacked",
           style: { height: (props.height || 14) + "px" },
-          ref: wrapRef,
-          onMouseLeave: clearHover
+          onMouseLeave: () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey(null);
+          }
         },
         total <= 0 ? null : props.parts.map((p) => {
           if (!p.value) return null;
@@ -221,16 +220,13 @@ function makeView(ctx, t) {
             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) {
@@ -295,15 +291,24 @@ function makeView(ctx, t) {
     }
     const scrollRef = React.useRef(null);
     const scrolledOnce = React.useRef(false);
+    const lastGranRef = React.useRef(props.granularity);
     const [edges, setEdges] = React.useState({ left: false, right: false });
+    const edgesRef = React.useRef(edges);
     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 });
+      const prev = edgesRef.current;
+      if (prev.left === left && prev.right === right) return;
+      edgesRef.current = { left, right };
+      setEdges({ left, right });
     };
     React.useLayoutEffect(() => {
       const el = scrollRef.current;
       if (el === null) return;
+      if (props.granularity !== lastGranRef.current) {
+        lastGranRef.current = props.granularity;
+        scrolledOnce.current = false;
+      }
       if (!scrolledOnce.current) {
         scrolledOnce.current = true;
         el.scrollLeft = el.scrollWidth;
@@ -647,6 +652,7 @@ function makeView(ctx, t) {
             selectedSeq: pinnedReq ? pinnedReq.seq : null,
             hoveredSeq,
             activeTurn,
+            granularity,
             onSelect: setSelectedSeq,
             onHover: setHoveredSeq,
             onHoverTurn: setHoverTurn
@@ -689,7 +695,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); }",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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": {
@@ -60,6 +60,9 @@
     "@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"