dsh-context 0.6.0 → 0.6.1

package/lib/client.js

@@ -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,6 +291,7 @@ 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 updateEdges = (el) => {
       const left = el.scrollLeft > 4;
@@ -304,6 +301,10 @@ function makeView(ctx, t) {
     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 +648,7 @@ function makeView(ctx, t) {
             selectedSeq: pinnedReq ? pinnedReq.seq : null,
             hoveredSeq,
             activeTurn,
+            granularity,
             onSelect: setSelectedSeq,
             onHover: setHoveredSeq,
             onHoverTurn: setHoverTurn
@@ -689,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); }",

package/package.json

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