dsh-context 0.9.0 → 0.10.0

package/README.md

@@ -5,11 +5,12 @@
 [![npm version](https://img.shields.io/npm/v/dsh-context)](https://www.npmjs.com/package/dsh-context)
 [![GitHub stars](https://img.shields.io/github/stars/bowenliang123/dsh-context?style=social)](https://github.com/bowenliang123/dsh-context)
 
-**See what your DeepSeek Harness agent's context window is actually made of and how it evolves.**
+**A DeepSeek Harness plugin for context dashboard and context command, for understanding how the context is made of, and how it evolves.**
 
-`dsh-context` is a [DeepSeek Harness](https://github.com/deepseek-ai/DeepSeek-Harness) plugin that adds a **Context Insight** panel to the web UI: a live, visual answer to *"what is the model carrying right now, and how did it get there?"* — context composition, per-request history, compactions, and injections, all in one place.
+`dsh-context` is a [DeepSeek Harness](https://github.com/deepseek-ai/DeepSeek-Harness) plugin for context insight.
 
-![Context panel overview](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-overview.png)
+- **The Context tab** — a full insight panel for context composition, per-turn context history, context compactions, and the message surface, etc.
+- **The `/context` command** — the same headline and recent trend as a centered dialog straight from the composer (the screenshot above). 
 
 ## Install
 
@@ -19,7 +20,21 @@ One command, from any DeepSeek Harness installation:
 dsh plugin --profile web add dsh-context
 ```
 
-Then start the web UI with `dsh web`, open any session, and click the **上下文 / Context** tab. No build step, no restart.
+Then start the web UI with `dsh web`. No build step, no restart.
+
+## Use it
+
+### Context tab
+
+Open any session and click the **Context / 上下文** tab:
+
+![Context panel overview](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-overview.png)
+
+### ⌨️ `/context` command — In-session Context Insight modal
+
+Type `/context` (or pick it from the `/` menu) and press Enter: a centered dialog shows the provider-anchored occupancy headline, the six-category composition bar, and the last-10-turn trend chart — hover or click a bar for its full breakdown, exactly like the tab.
+
+![Context command](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-command.png)
 
 ## What you'll see
 
@@ -53,10 +68,6 @@ Every compaction, tool-output prune, skill or plugin context injection, and mode
 
 The exact message list the model sees right now, newest first, with a per-message token cost.
 
-## Releasing
-
-Releases are cut by tagging: `git tag vX.Y.Z && gh release create vX.Y.Z`. A [GitHub Actions workflow](.github/workflows/release.yml) then builds, tests, and publishes the package to npm automatically via [npm Trusted Publishing (OIDC)](https://docs.npmjs.com/trusted-publishers) — no long-lived token needed, provenance included.
-
 ## Like it?
 
 If `dsh-context` helped you understand what your agent is carrying around, a ⭐ on [GitHub](https://github.com/bowenliang123/dsh-context) is much appreciated — and issues/PRs are welcome!

package/lib/client.js

@@ -76,7 +76,9 @@ var DICT_ZH = {
   "node.calls": "\u8C03\u7528 ",
   "node.empty": "(\u7A7A\u56DE\u590D)",
   "node.nonText": "(\u975E\u6587\u672C\u6D88\u606F)",
-  "node.snapshot": "\u5FEB\u7167: "
+  "node.snapshot": "\u5FEB\u7167: ",
+  "cmd.desc": "\u67E5\u770B\u4E0A\u4E0B\u6587\u7684\u6784\u6210\u548C\u53D8\u5316",
+  "cmd.close": "\u5173\u95ED"
 };
 var DICT_EN = {
   "tab": "Context",
@@ -147,9 +149,502 @@ var DICT_EN = {
   "node.calls": "calls ",
   "node.empty": "(empty reply)",
   "node.nonText": "(non-text message)",
-  "node.snapshot": "snapshot: "
+  "node.snapshot": "snapshot: ",
+  "cmd.desc": "View context makeup and how it evolves",
+  "cmd.close": "Close"
 };
 
+// src/client/modalStore.ts
+var stores = /* @__PURE__ */ new Map();
+function modalStoreOf(sessionId) {
+  const existing = stores.get(sessionId);
+  if (existing !== void 0) return existing;
+  let open = false;
+  const listeners = /* @__PURE__ */ new Set();
+  const store = {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => open,
+    set(next) {
+      if (next === open) return;
+      open = next;
+      for (const listener of listeners) listener();
+    }
+  };
+  stores.set(sessionId, store);
+  return store;
+}
+var pendingConsume = /* @__PURE__ */ new Map();
+function setPendingConsume(sessionId, guard) {
+  pendingConsume.set(sessionId, guard);
+}
+function takePendingConsume(sessionId) {
+  const guard = pendingConsume.get(sessionId);
+  if (guard !== void 0) pendingConsume.delete(sessionId);
+  return guard;
+}
+
+// src/client/command.ts
+var COMMAND = "context";
+var LINE = "/" + COMMAND;
+function registerContextCommand(ctx, kit) {
+  ctx.effect(() => {
+    const inputTriggers = ctx.get("inputTriggers");
+    if (inputTriggers === void 0) return () => {
+    };
+    return inputTriggers.registerSource({
+      trigger: "/",
+      name: COMMAND,
+      order: 1,
+      candidates: (_session, req) => {
+        if (req.position !== "leading") return Promise.resolve([]);
+        const query = req.query.trim().toLowerCase();
+        if (query !== "" && !COMMAND.startsWith(query)) return Promise.resolve([]);
+        return Promise.resolve([{ name: COMMAND, description: kit.t("cmd.desc") }]);
+      },
+      onPick: (pick) => {
+        setPendingConsume(pick.session.sessionId, { kind: "span", span: pick.span });
+        modalStoreOf(pick.session.sessionId).set(true);
+        return "handled";
+      },
+      matchEnter: (session, line) => {
+        if (line !== LINE) return Promise.resolve(void 0);
+        setPendingConsume(session.sessionId, { kind: "bare-token", token: LINE });
+        modalStoreOf(session.sessionId).set(true);
+        return Promise.resolve("handled");
+      }
+    });
+  }, "dsh-context: /context command");
+}
+
+// src/client/categories.ts
+var CATS = [
+  { key: "system", color: "#6366f1" },
+  { key: "tools", color: "#f59e0b" },
+  { key: "user", color: "#22c55e" },
+  { key: "inject", color: "#a855f7" },
+  { key: "assistant", color: "#3b82f6" },
+  { key: "tool", color: "#14b8a6" }
+];
+function partsOf(breakdown) {
+  return CATS.map((c) => {
+    return { key: c.key, color: c.color, value: breakdown[c.key] || 0 };
+  });
+}
+function anchoredParts(parts, target) {
+  if (target === null || target <= 0) return parts;
+  let total = 0;
+  for (const p of parts) total += p.value;
+  if (total <= 0 || total === target) return parts;
+  const scale = target / total;
+  return parts.map((p) => ({ ...p, value: Math.round(p.value * scale) }));
+}
+
+// src/client/headline.ts
+function headlineOf(data) {
+  const current = data.current;
+  const occ = data.occupancy;
+  const projected = occ !== void 0 && typeof occ.projectedTokens === "number" ? occ.projectedTokens : void 0;
+  const requests = data.requests || [];
+  const lastReq = requests.length > 0 ? requests[requests.length - 1] : null;
+  const derived = lastReq !== null && typeof lastReq.prompt === "number" ? lastReq.prompt + (current.total - lastReq.total) : void 0;
+  const occupancyTokens = projected ?? derived ?? null;
+  const window2 = occ !== void 0 && typeof occ.contextWindow === "number" ? occ.contextWindow : data.contextWindow;
+  const tokens = occupancyTokens ?? current.total;
+  const pct = window2 !== void 0 && window2 > 0 ? Math.min(100, Math.round(tokens / window2 * 100)) : null;
+  const parts = anchoredParts(partsOf(current), occupancyTokens !== null && tokens > 0 ? tokens : null);
+  return { tokens, window: window2, pct, parts, estimated: occupancyTokens === null };
+}
+
+// src/client/services.ts
+function timelineOf(value) {
+  if (value === null || value === void 0 || typeof value !== "object") return null;
+  return value;
+}
+
+// src/client/react.ts
+var React = require("react");
+var h = React.createElement;
+
+// src/client/components/requestDetail.tsx
+function makeRequestDetail(kit, StackedBar) {
+  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
+  return 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 });
+    const marker = props.marker ?? null;
+    const markerAt = marker !== null ? eventAt(marker) : null;
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-detail" }, /* @__PURE__ */ React.createElement("div", { className: "lc-detail-head" }, /* @__PURE__ */ React.createElement("b", null, head), marker !== null && markerAt !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-detail-marker", title: eventLabel(marker) }, "\u2702 " + markerAt) : null, isTurn ? /* @__PURE__ */ React.createElement("span", { className: "lc-detail-tag" }, t("detail.lastStep")) : null, /* @__PURE__ */ React.createElement("span", null, fmtTime2(req.time)), /* @__PURE__ */ React.createElement("span", null, tr("detail.estTotal", { n: fmt3(req.total) })), req.prompt !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-actual" }, tr("detail.actual", { n: fmt3(req.prompt) })) : null, req.output !== void 0 ? /* @__PURE__ */ React.createElement("span", null, tr("detail.output", { n: fmt3(req.output) })) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts: partsOf(req), height: 10 }), /* @__PURE__ */ React.createElement("div", { className: "lc-detail-rows" }, CATS.map((c) => {
+      const v = req[c.key] || 0;
+      return /* @__PURE__ */ React.createElement("div", { key: c.key, className: "lc-detail-row" }, /* @__PURE__ */ React.createElement("i", { style: { background: c.color } }), /* @__PURE__ */ React.createElement("span", { className: "lc-detail-label" }, catLabel(c.key)), /* @__PURE__ */ React.createElement("span", { className: "lc-bar-track" }, /* @__PURE__ */ React.createElement("span", { className: "lc-bar-fill", style: { width: (req.total > 0 ? v / req.total * 100 : 0) + "%", background: c.color } })), /* @__PURE__ */ React.createElement("span", { className: "lc-detail-num" }, "\u2248" + fmt3(v)), /* @__PURE__ */ React.createElement("span", { className: "lc-detail-pct" }, req.total > 0 ? Math.round(v / req.total * 100) + "%" : ""));
+    })));
+  };
+}
+
+// src/client/components/stackedBar.tsx
+function makeStackedBar(kit) {
+  const { t, tr, fmt: fmt3, catLabel } = kit;
+  return function StackedBar(props) {
+    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 free = props.max !== void 0 && props.max > total ? props.max - total : 0;
+    const usedPct = scale > 0 ? total / scale * 100 : 0;
+    const hovering = props.hoverKey !== null && props.hoverKey !== void 0;
+    const showBox = free > 0 && hovering;
+    let tip = null;
+    if (props.hoverKey !== null && props.hoverKey !== void 0) {
+      if (props.hoverKey === "free" && free > 0) {
+        const pct = scale > 0 ? free / scale * 100 : 0;
+        tip = {
+          text: t("overview.free") + " " + fmt3(free) + " (" + Math.round(pct) + "%)",
+          leftPct: Math.max(12, Math.min(total / scale * 100 + pct / 2, 88))
+        };
+      } else {
+        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 = {
+              // "(pct%)" is a share of the OCCUPIED total — the dashed box
+              // that appears on hover frames exactly this reference region.
+              text: catLabel(p.key) + " \u2248" + fmt3(p.value) + " (" + Math.round(p.value / total * 100) + "%) " + tr("overview.ofUsed"),
+              leftPct: Math.max(12, Math.min(acc + pct / 2, 88))
+            };
+            break;
+          }
+          acc += pct;
+        }
+      }
+    }
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-stacked-wrap" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "lc-stacked" + (hovering ? " lc-stacked-dim" : ""),
+        style: { height: (props.height || 14) + "px" },
+        onMouseLeave: () => {
+          if (props.onHoverKey !== void 0) props.onHoverKey(null);
+        }
+      },
+      total > 0 ? props.parts.map((p) => {
+        if (!p.value) return null;
+        const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: p.key,
+            className: "lc-stacked-seg" + (on ? " lc-stacked-seg-on" : ""),
+            style: { width: p.value / scale * 100 + "%", background: p.color },
+            onMouseEnter: () => {
+              if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
+            }
+          }
+        );
+      }) : null,
+      free > 0 ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: "free",
+          className: "lc-stacked-free" + (props.hoverKey === "free" ? " lc-stacked-free-on" : ""),
+          style: { width: free / scale * 100 + "%" },
+          onMouseEnter: () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey("free");
+          }
+        }
+      ) : null,
+      showBox ? /* @__PURE__ */ React.createElement("div", { className: "lc-occupied-box", style: { width: usedPct + "%" } }) : null
+    ), tip ? /* @__PURE__ */ React.createElement("div", { className: "lc-bar-tip", style: { left: tip.leftPct + "%" } }, tip.text) : null);
+  };
+}
+function makeLegend(kit) {
+  const { tr, fmt: fmt3, catLabel } = kit;
+  return function Legend(props) {
+    let total = 0;
+    for (const p of props.parts) total += p.value;
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-legend" }, props.parts.map((p) => {
+      const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: p.key,
+          className: "lc-chip" + (on ? " lc-chip-on" : ""),
+          title: tr("overview.ofUsed"),
+          onMouseEnter: () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
+          },
+          onMouseLeave: () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey(null);
+          }
+        },
+        /* @__PURE__ */ React.createElement("i", { style: { background: p.color } }),
+        catLabel(p.key) + " \u2248" + fmt3(p.value),
+        total > 0 ? /* @__PURE__ */ React.createElement("em", null, Math.round(p.value / total * 100) + "%") : null
+      );
+    }));
+  };
+}
+
+// src/client/components/trendChart.tsx
+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)) {
+      runSteps++;
+      out[out.length - 1] = { ...req, stepCount: runSteps };
+    } else {
+      runSteps = 1;
+      out.push({ ...req, stepCount: 1 });
+    }
+  }
+  return out;
+}
+function attachMarkers(requests, events) {
+  const markers = new Array(requests.length);
+  for (const ev of events) {
+    if (ev.kind !== "compaction" && ev.kind !== "prune") continue;
+    for (let r = 0; r < requests.length; r++) {
+      if (requests[r].seq >= ev.seq) {
+        if (markers[r] === void 0) markers[r] = ev;
+        break;
+      }
+    }
+  }
+  return markers;
+}
+function makeTrendChart(kit) {
+  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
+  const CHART_H = 112;
+  const BAR_W = 14;
+  const BAR_GAP = 2;
+  const TURN_COLORS = ["#6366f1", "#f59e0b", "#22c55e", "#a855f7", "#3b82f6", "#14b8a6", "#ef4444", "#ec4899"];
+  return function TrendChart(props) {
+    const requests = props.requests;
+    const markers = props.markers;
+    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;
+    let maxTotal = 1;
+    for (const req of requests) {
+      const bt = barTotalOf(req);
+      if (bt > maxTotal) maxTotal = bt;
+    }
+    const groups = [];
+    for (const req of requests) {
+      let grp = groups.length > 0 ? groups[groups.length - 1] : null;
+      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);
+    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;
+      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;
+      } else if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 24) {
+        el.scrollLeft = el.scrollWidth;
+      }
+      updateEdges(el);
+    });
+    const tipOf = (req) => {
+      const head = 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 });
+      return head + " \xB7 " + fmtTime2(req.time) + " \xB7 " + tr("tip.total", { n: fmt3(req.total) }) + (req.prompt !== void 0 ? " \xB7 " + tr("tip.actual", { n: fmt3(req.prompt) }) : "");
+    };
+    const hoveredIdx = props.hoveredSeq !== null ? requests.findIndex((r) => r.seq === props.hoveredSeq) : -1;
+    const hoveredReq = hoveredIdx >= 0 ? requests[hoveredIdx] : null;
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-chartrow" }, /* @__PURE__ */ React.createElement("div", { className: "lc-axis" }, /* @__PURE__ */ React.createElement("span", { className: "lc-axis-top" }, fmt3(maxTotal)), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-mid" }, fmt3(Math.round(maxTotal / 2))), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-bot" }, "0")), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "lc-chart-scroll" + (props.activeTurn !== null ? " lc-chart-dim" : ""),
+        ref: scrollRef,
+        onScroll: (e) => {
+          updateEdges(e.currentTarget);
+        }
+      },
+      edges.left ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-fade lc-chart-fade-l" }) : null,
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "lc-chart",
+          onMouseLeave: () => {
+            props.onHover(null);
+          }
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-top" }),
+        /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-mid" }),
+        requests.map((req, i) => {
+          const marker = markers[i];
+          const markerAt = marker !== void 0 ? eventAt(marker) : null;
+          const selected = props.selectedSeq === req.seq;
+          const hovered = props.hoveredSeq === req.seq;
+          const inTurn = props.activeTurn !== null && (req.turn ?? 0) === props.activeTurn;
+          return /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: req.seq,
+              className: "lc-bar" + (selected ? " lc-bar-selected" : "") + (hovered ? " lc-bar-hovered" : "") + (inTurn ? " lc-bar-in-turn" : ""),
+              style: { width: BAR_W + "px" },
+              onClick: () => {
+                props.onSelect(selected ? null : req.seq);
+              },
+              onMouseEnter: () => {
+                props.onHover(req.seq);
+              }
+            },
+            marker !== void 0 ? /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                className: "lc-bar-marker",
+                title: "\u2702 " + (markerAt !== null ? markerAt + " \u2014 " : "") + eventLabel(marker)
+              },
+              "\u2702"
+            ) : null,
+            /* @__PURE__ */ React.createElement("div", { className: "lc-bar-stack" }, CATS.map((c) => {
+              const v = (req[c.key] || 0) * anchorOf(req);
+              if (!v) return null;
+              return /* @__PURE__ */ React.createElement("div", { key: c.key, style: { height: Math.max(1, Math.round(v / maxTotal * CHART_H)) + "px", background: c.color } });
+            }))
+          );
+        })
+      ),
+      hoveredReq !== null ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "lc-chart-tip",
+          style: { left: hoveredIdx * (BAR_W + BAR_GAP) + BAR_W / 2 + "px" }
+        },
+        tipOf(hoveredReq)
+      ) : null,
+      /* @__PURE__ */ React.createElement("div", { className: "lc-turns", onMouseLeave: () => {
+        props.onHoverTurn(null);
+      } }, 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 /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            key: "turn-" + gi,
+            className: "lc-turn" + (on ? " lc-turn-on" : ""),
+            style: {
+              width: blockW + "px",
+              background: TURN_COLORS[gi % TURN_COLORS.length]
+            },
+            title: "T" + grp.turn,
+            onMouseEnter: () => {
+              props.onHoverTurn(grp.turn);
+            }
+          },
+          "T" + grp.turn
+        );
+      }))
+    ), edges.right ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null);
+  };
+}
+
+// src/client/components/contextModal.tsx
+var TREND_TURNS = 10;
+function makeContextModal(ctx, kit) {
+  const { t, tr, fmt: fmt3 } = kit;
+  const sessions = ctx.get("sessions");
+  const StackedBar = makeStackedBar(kit);
+  const Legend = makeLegend(kit);
+  const TrendChart = makeTrendChart(kit);
+  const RequestDetail = makeRequestDetail(kit, StackedBar);
+  return function ContextModal(props) {
+    const sessionId = typeof props.sessionId === "string" ? props.sessionId : "";
+    const open = typeof props.useContextModal === "function" ? props.useContextModal((s) => s) : false;
+    const data = typeof props.useProjection === "function" ? timelineOf(props.useProjection("contextTimeline")) : null;
+    const [selectedSeq, setSelectedSeq] = React.useState(null);
+    const [hoveredSeq, setHoveredSeq] = React.useState(null);
+    const [hoverCat, setHoverCat] = React.useState(null);
+    const close = React.useCallback(() => {
+      if (sessionId === "") return;
+      modalStoreOf(sessionId).set(false);
+      const guard = takePendingConsume(sessionId);
+      if (guard === void 0 || sessions === void 0) return;
+      const scope = sessions.scope(sessionId);
+      if (scope !== void 0) scope.bail(scope, "slash/input-consume-token", { guard });
+    }, [sessionId]);
+    React.useEffect(() => {
+      if (!open) return void 0;
+      const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      const onKey = (ev) => {
+        if (ev.key !== "Escape") return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        close();
+      };
+      window.addEventListener("keydown", onKey, true);
+      return () => {
+        window.removeEventListener("keydown", onKey, true);
+        if (previous !== null && document.contains(previous)) previous.focus();
+      };
+    }, [open, close]);
+    if (!open) return null;
+    const requests = data !== null ? data.requests || [] : [];
+    const events = data !== null ? data.events || [] : [];
+    const turns = aggregateByTurn(requests).slice(-TREND_TURNS);
+    const markers = attachMarkers(turns, events);
+    let pinnedReq = null;
+    for (const req of turns) if (req.seq === selectedSeq) pinnedReq = req;
+    let activeReq = null;
+    if (hoveredSeq !== null) {
+      for (const req of turns) if (req.seq === hoveredSeq) activeReq = req;
+    }
+    if (activeReq === null) activeReq = pinnedReq;
+    if (activeReq === null && turns.length > 0) activeReq = turns[turns.length - 1];
+    const markerOf = (req) => {
+      const i = turns.indexOf(req);
+      return i >= 0 ? markers[i] : void 0;
+    };
+    const head = data !== null ? headlineOf(data) : null;
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-modal-backdrop", onClick: close }, /* @__PURE__ */ React.createElement("div", { className: "lc-modal-card", onClick: (ev) => {
+      ev.stopPropagation();
+    } }, /* @__PURE__ */ React.createElement("div", { className: "lc-modal-head" }, /* @__PURE__ */ React.createElement("span", { className: "lc-modal-title" }, t("tab")), data !== null && (data.model || data.provider) ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, (data.model ? data.model : "") + (data.provider ? " \xB7 " + data.provider : "")) : null, /* @__PURE__ */ React.createElement("button", { className: "lc-modal-close", "aria-label": t("cmd.close"), onClick: close }, "\xD7")), data === null || head === null ? /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("loading")) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "lc-overview-num" }, /* @__PURE__ */ React.createElement("b", null, fmt3(head.tokens)), /* @__PURE__ */ React.createElement("span", null, head.window ? " / " + fmt3(head.window) + " " + tr("overview.ofWindow", { p: head.pct ?? 0 }) : " " + t("overview.estimate")), !head.estimated ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("overview.splitEst")) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts: head.parts, height: 16, max: head.window, hoverKey: hoverCat, onHoverKey: setHoverCat }), /* @__PURE__ */ React.createElement(Legend, { parts: head.parts, hoverKey: hoverCat, onHoverKey: setHoverCat }), /* @__PURE__ */ React.createElement("div", { className: "lc-card-title lc-modal-trend" }, t("trend.title")), turns.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("trend.empty")) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      TrendChart,
+      {
+        requests: turns,
+        markers,
+        selectedSeq: pinnedReq !== null ? pinnedReq.seq : null,
+        hoveredSeq,
+        activeTurn: null,
+        granularity: "turn",
+        onSelect: setSelectedSeq,
+        onHover: setHoveredSeq,
+        onHoverTurn: () => {
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(RequestDetail, { request: activeReq, marker: activeReq !== null ? markerOf(activeReq) : void 0 })))));
+  };
+}
+
 // src/client/styles.ts
 var STYLES = [
   ".lc-root { padding: 16px 20px 32px; overflow-y: auto; height: 100%; box-sizing: border-box; color: var(--dsw-alias-label-primary); font-size: 13px; }",
@@ -263,38 +758,17 @@ var STYLES = [
   ".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; }",
-  ".lc-foot { color: var(--dsw-alias-label-secondary); font-size: 12px; margin-top: 4px; }"
+  ".lc-foot { color: var(--dsw-alias-label-secondary); font-size: 12px; margin-top: 4px; }",
+  // ---- /context modal (centered dialog; escapes the composer anchor via fixed positioning) ----
+  ".lc-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; }",
+  ".lc-modal-card { width: min(720px, calc(100vw - 48px)); max-height: min(82vh, 760px); overflow-y: auto; box-sizing: border-box; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 12px; box-shadow: var(--dsw-shadow-lv3, 0 12px 32px rgba(0, 0, 0, 0.4)); padding: 16px 18px 18px; color: var(--dsw-alias-label-primary); font-size: 13px; }",
+  ".lc-modal-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }",
+  ".lc-modal-title { font-weight: 600; font-size: 14px; }",
+  ".lc-modal-close { margin-left: auto; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; font-family: inherit; }",
+  ".lc-modal-close:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); }",
+  ".lc-modal-trend { margin-top: 14px; }"
 ].join("\n");
 
-// src/client/categories.ts
-var CATS = [
-  { key: "system", color: "#6366f1" },
-  { key: "tools", color: "#f59e0b" },
-  { key: "user", color: "#22c55e" },
-  { key: "inject", color: "#a855f7" },
-  { key: "assistant", color: "#3b82f6" },
-  { key: "tool", color: "#14b8a6" }
-];
-function partsOf(breakdown) {
-  return CATS.map((c) => {
-    return { key: c.key, color: c.color, value: breakdown[c.key] || 0 };
-  });
-}
-function anchoredParts(parts, target) {
-  if (target === null || target <= 0) return parts;
-  let total = 0;
-  for (const p of parts) total += p.value;
-  if (total <= 0 || total === target) return parts;
-  const scale = target / total;
-  return parts.map((p) => ({ ...p, value: Math.round(p.value * scale) }));
-}
-
-// src/client/services.ts
-function timelineOf(value) {
-  if (value === null || value === void 0 || typeof value !== "object") return null;
-  return value;
-}
-
 // src/client/components/events.tsx
 var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 
@@ -313,10 +787,6 @@ function fmtTime(t) {
   return p(d.getHours()) + ":" + p(d.getMinutes()) + ":" + p(d.getSeconds());
 }
 
-// src/client/react.ts
-var React = require("react");
-var h = React.createElement;
-
 // src/client/components/events.tsx
 var EVENT_ICONS = { compaction: "\u2702", prune: "\u2702", inject: "\uFF0B", model: "\u21C4" };
 function makeEventText(t, tr) {
@@ -331,396 +801,98 @@ function makeEventText(t, tr) {
     }
     return ev.kind;
   }
-  function eventAt(ev) {
-    if (ev.kind === "compaction" || ev.kind === "prune") {
-      if (typeof ev.turn === "number" && typeof ev.step === "number") {
-        if (typeof ev.fromTurn === "number" && typeof ev.fromStep === "number") {
-          if (ev.fromTurn === ev.turn) return t("events.range", { t: ev.turn, a: ev.fromStep, b: ev.step });
-          return t("events.rangeTo", { a: ev.fromTurn, as: ev.fromStep, b: ev.turn, bs: ev.step });
-        }
-        return t("events.at", { t: ev.turn, s: ev.step });
-      }
-      return null;
-    }
-    if (typeof ev.turn === "number" && typeof ev.step === "number") {
-      return t("events.at", { t: ev.turn, s: ev.step });
-    }
-    return null;
-  }
-  return { eventLabel, eventAt };
-}
-function makeEventList(kit) {
-  const { t, fmt: fmt3, fmtTime: fmtTime2, eventLabel, eventAt } = kit;
-  return function EventList(props) {
-    if (props.events.length === 0) {
-      return /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("events.empty"));
-    }
-    const sorted = props.events.slice().reverse();
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-events" }, sorted.map((ev, i) => {
-      const label = eventLabel(ev);
-      const at = eventAt(ev);
-      const glyph = ev.kind === "inject" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconPlusOutline16, null) : ev.kind === "model" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconBranchOutline16, null) : EVENT_ICONS[ev.kind] || "\u2022";
-      return /* @__PURE__ */ React.createElement("div", { key: ev.seq + "-" + i, className: "lc-event" }, /* @__PURE__ */ React.createElement("span", { className: "lc-event-icon lc-event-" + ev.kind }, glyph), /* @__PURE__ */ React.createElement("span", { className: "lc-event-label", title: label }, label), at !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-event-at" }, at) : null, ev.tokens ? /* @__PURE__ */ React.createElement("span", { className: "lc-event-tokens" + (ev.kind === "inject" ? " lc-up" : " lc-down") }, (ev.kind === "inject" ? "+" : "\u2212") + fmt3(ev.tokens)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-event-time" }, fmtTime2(ev.time)));
-    }));
-  };
-}
-
-// src/client/components/nodes.tsx
-function makeNodeList(kit) {
-  const { t, tr, fmt: fmt3, fmtTime: fmtTime2 } = kit;
-  function nodeText(n) {
-    if (n.cat === "tool") {
-      return t("node.toolResult") + (n.tool ? " \u2190 " + n.tool : "") + (n.err ? " \u26A0" : "");
-    }
-    if (n.skill) return "Skill: " + n.skill;
-    if (n.calls) return t("node.calls") + n.calls.join(", ");
-    if (n.text) return n.form === "snapshot" ? t("node.snapshot") + n.text : n.text;
-    if (n.cat === "assistant") return t("node.empty");
-    if (n.cat === "inject") return t("form." + (n.form || "context"));
-    return t("node.nonText");
-  }
-  return function NodeList(props) {
-    if (props.nodes.length === 0) {
-      return /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("nodes.empty"));
-    }
-    const catColor = {};
-    for (const c of CATS) catColor[c.key] = c.color;
-    const rows = props.nodes.slice().reverse();
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-nodes" }, props.dropped > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-nodes-more" }, tr("nodes.more", { n: props.dropped })) : null, rows.map((n) => {
-      const text = nodeText(n);
-      return /* @__PURE__ */ React.createElement("div", { key: n.seq, className: "lc-node" }, /* @__PURE__ */ React.createElement("i", { style: { background: catColor[n.cat] || "#999" } }), /* @__PURE__ */ React.createElement("span", { className: "lc-node-preview", title: text }, text), typeof n.time === "number" ? /* @__PURE__ */ React.createElement("span", { className: "lc-node-time" }, fmtTime2(n.time)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-node-tokens" }, fmt3(n.tokens)));
-    }));
-  };
-}
-
-// src/client/components/requestDetail.tsx
-function makeRequestDetail(kit, StackedBar) {
-  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
-  return 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 });
-    const marker = props.marker ?? null;
-    const markerAt = marker !== null ? eventAt(marker) : null;
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-detail" }, /* @__PURE__ */ React.createElement("div", { className: "lc-detail-head" }, /* @__PURE__ */ React.createElement("b", null, head), marker !== null && markerAt !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-detail-marker", title: eventLabel(marker) }, "\u2702 " + markerAt) : null, isTurn ? /* @__PURE__ */ React.createElement("span", { className: "lc-detail-tag" }, t("detail.lastStep")) : null, /* @__PURE__ */ React.createElement("span", null, fmtTime2(req.time)), /* @__PURE__ */ React.createElement("span", null, tr("detail.estTotal", { n: fmt3(req.total) })), req.prompt !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-actual" }, tr("detail.actual", { n: fmt3(req.prompt) })) : null, req.output !== void 0 ? /* @__PURE__ */ React.createElement("span", null, tr("detail.output", { n: fmt3(req.output) })) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts: partsOf(req), height: 10 }), /* @__PURE__ */ React.createElement("div", { className: "lc-detail-rows" }, CATS.map((c) => {
-      const v = req[c.key] || 0;
-      return /* @__PURE__ */ React.createElement("div", { key: c.key, className: "lc-detail-row" }, /* @__PURE__ */ React.createElement("i", { style: { background: c.color } }), /* @__PURE__ */ React.createElement("span", { className: "lc-detail-label" }, catLabel(c.key)), /* @__PURE__ */ React.createElement("span", { className: "lc-bar-track" }, /* @__PURE__ */ React.createElement("span", { className: "lc-bar-fill", style: { width: (req.total > 0 ? v / req.total * 100 : 0) + "%", background: c.color } })), /* @__PURE__ */ React.createElement("span", { className: "lc-detail-num" }, "\u2248" + fmt3(v)), /* @__PURE__ */ React.createElement("span", { className: "lc-detail-pct" }, req.total > 0 ? Math.round(v / req.total * 100) + "%" : ""));
-    })));
-  };
-}
-
-// src/client/components/statsBoard.tsx
-function makeStatsBoard(kit) {
-  const { t, tr, fmt: fmt3 } = kit;
-  return function StatsBoard(props) {
-    const turns = /* @__PURE__ */ new Set();
-    let steps = 0, compactions = 0, prunes = 0, injects = 0, switches = 0;
-    let recycled = 0, est = 0, prompt = 0, output = 0;
-    for (const req of props.requests) {
-      turns.add(req.turn ?? 0);
-      steps++;
-      est += req.total;
-      if (typeof req.prompt === "number") prompt += req.prompt;
-      if (typeof req.output === "number") output += req.output;
-    }
-    for (const ev of props.events) {
-      if (ev.kind === "compaction") {
-        compactions++;
-        recycled += ev.tokens || 0;
-      } else if (ev.kind === "prune") {
-        prunes++;
-        recycled += ev.tokens || 0;
-      } else if (ev.kind === "inject") injects++;
-      else if (ev.kind === "model") switches++;
-    }
-    const cell = (label, value, sub) => /* @__PURE__ */ React.createElement("div", { className: "lc-stat" }, /* @__PURE__ */ React.createElement("span", { className: "lc-stat-label" }, label), /* @__PURE__ */ React.createElement("b", { className: "lc-stat-value" }, value), sub !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-stat-sub" }, sub) : null);
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("stats.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("stats.hint"))), /* @__PURE__ */ React.createElement("div", { className: "lc-stats" }, cell(t("stats.turns"), fmt3(turns.size)), cell(t("stats.steps"), fmt3(steps)), cell(
-      t("stats.recycled"),
-      recycled > 0 ? "\u2212" + fmt3(recycled) : "0",
-      tr("stats.recycleSub", { c: compactions, p: prunes })
-    ), cell(t("stats.injects"), fmt3(injects)), cell(t("stats.switches"), fmt3(switches)), cell(t("stats.est"), "\u2248 " + fmt3(est)), cell(t("stats.actualPrompt"), fmt3(prompt)), cell(t("stats.output"), fmt3(output))));
-  };
-}
-
-// src/client/components/stackedBar.tsx
-function makeStackedBar(kit) {
-  const { t, tr, fmt: fmt3, catLabel } = kit;
-  return function StackedBar(props) {
-    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 free = props.max !== void 0 && props.max > total ? props.max - total : 0;
-    const usedPct = scale > 0 ? total / scale * 100 : 0;
-    const hovering = props.hoverKey !== null && props.hoverKey !== void 0;
-    const showBox = free > 0 && hovering;
-    let tip = null;
-    if (props.hoverKey !== null && props.hoverKey !== void 0) {
-      if (props.hoverKey === "free" && free > 0) {
-        const pct = scale > 0 ? free / scale * 100 : 0;
-        tip = {
-          text: t("overview.free") + " " + fmt3(free) + " (" + Math.round(pct) + "%)",
-          leftPct: Math.max(12, Math.min(total / scale * 100 + pct / 2, 88))
-        };
-      } else {
-        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 = {
-              // "(pct%)" is a share of the OCCUPIED total — the dashed box
-              // that appears on hover frames exactly this reference region.
-              text: catLabel(p.key) + " \u2248" + fmt3(p.value) + " (" + Math.round(p.value / total * 100) + "%) " + tr("overview.ofUsed"),
-              leftPct: Math.max(12, Math.min(acc + pct / 2, 88))
-            };
-            break;
-          }
-          acc += pct;
-        }
-      }
-    }
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-stacked-wrap" }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "lc-stacked" + (hovering ? " lc-stacked-dim" : ""),
-        style: { height: (props.height || 14) + "px" },
-        onMouseLeave: () => {
-          if (props.onHoverKey !== void 0) props.onHoverKey(null);
-        }
-      },
-      total > 0 ? props.parts.map((p) => {
-        if (!p.value) return null;
-        const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
-        return /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            key: p.key,
-            className: "lc-stacked-seg" + (on ? " lc-stacked-seg-on" : ""),
-            style: { width: p.value / scale * 100 + "%", background: p.color },
-            onMouseEnter: () => {
-              if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
-            }
-          }
-        );
-      }) : null,
-      free > 0 ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: "free",
-          className: "lc-stacked-free" + (props.hoverKey === "free" ? " lc-stacked-free-on" : ""),
-          style: { width: free / scale * 100 + "%" },
-          onMouseEnter: () => {
-            if (props.onHoverKey !== void 0) props.onHoverKey("free");
-          }
-        }
-      ) : null,
-      showBox ? /* @__PURE__ */ React.createElement("div", { className: "lc-occupied-box", style: { width: usedPct + "%" } }) : null
-    ), tip ? /* @__PURE__ */ React.createElement("div", { className: "lc-bar-tip", style: { left: tip.leftPct + "%" } }, tip.text) : null);
-  };
-}
-function makeLegend(kit) {
-  const { tr, fmt: fmt3, catLabel } = kit;
-  return function Legend(props) {
-    let total = 0;
-    for (const p of props.parts) total += p.value;
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-legend" }, props.parts.map((p) => {
-      const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: p.key,
-          className: "lc-chip" + (on ? " lc-chip-on" : ""),
-          title: tr("overview.ofUsed"),
-          onMouseEnter: () => {
-            if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
-          },
-          onMouseLeave: () => {
-            if (props.onHoverKey !== void 0) props.onHoverKey(null);
-          }
-        },
-        /* @__PURE__ */ React.createElement("i", { style: { background: p.color } }),
-        catLabel(p.key) + " \u2248" + fmt3(p.value),
-        total > 0 ? /* @__PURE__ */ React.createElement("em", null, Math.round(p.value / total * 100) + "%") : null
-      );
+  function eventAt(ev) {
+    if (ev.kind === "compaction" || ev.kind === "prune") {
+      if (typeof ev.turn === "number" && typeof ev.step === "number") {
+        if (typeof ev.fromTurn === "number" && typeof ev.fromStep === "number") {
+          if (ev.fromTurn === ev.turn) return t("events.range", { t: ev.turn, a: ev.fromStep, b: ev.step });
+          return t("events.rangeTo", { a: ev.fromTurn, as: ev.fromStep, b: ev.turn, bs: ev.step });
+        }
+        return t("events.at", { t: ev.turn, s: ev.step });
+      }
+      return null;
+    }
+    if (typeof ev.turn === "number" && typeof ev.step === "number") {
+      return t("events.at", { t: ev.turn, s: ev.step });
+    }
+    return null;
+  }
+  return { eventLabel, eventAt };
+}
+function makeEventList(kit) {
+  const { t, fmt: fmt3, fmtTime: fmtTime2, eventLabel, eventAt } = kit;
+  return function EventList(props) {
+    if (props.events.length === 0) {
+      return /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("events.empty"));
+    }
+    const sorted = props.events.slice().reverse();
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-events" }, sorted.map((ev, i) => {
+      const label = eventLabel(ev);
+      const at = eventAt(ev);
+      const glyph = ev.kind === "inject" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconPlusOutline16, null) : ev.kind === "model" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconBranchOutline16, null) : EVENT_ICONS[ev.kind] || "\u2022";
+      return /* @__PURE__ */ React.createElement("div", { key: ev.seq + "-" + i, className: "lc-event" }, /* @__PURE__ */ React.createElement("span", { className: "lc-event-icon lc-event-" + ev.kind }, glyph), /* @__PURE__ */ React.createElement("span", { className: "lc-event-label", title: label }, label), at !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-event-at" }, at) : null, ev.tokens ? /* @__PURE__ */ React.createElement("span", { className: "lc-event-tokens" + (ev.kind === "inject" ? " lc-up" : " lc-down") }, (ev.kind === "inject" ? "+" : "\u2212") + fmt3(ev.tokens)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-event-time" }, fmtTime2(ev.time)));
     }));
   };
 }
 
-// src/client/components/trendChart.tsx
-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)) {
-      runSteps++;
-      out[out.length - 1] = { ...req, stepCount: runSteps };
-    } else {
-      runSteps = 1;
-      out.push({ ...req, stepCount: 1 });
+// src/client/components/nodes.tsx
+function makeNodeList(kit) {
+  const { t, tr, fmt: fmt3, fmtTime: fmtTime2 } = kit;
+  function nodeText(n) {
+    if (n.cat === "tool") {
+      return t("node.toolResult") + (n.tool ? " \u2190 " + n.tool : "") + (n.err ? " \u26A0" : "");
     }
+    if (n.skill) return "Skill: " + n.skill;
+    if (n.calls) return t("node.calls") + n.calls.join(", ");
+    if (n.text) return n.form === "snapshot" ? t("node.snapshot") + n.text : n.text;
+    if (n.cat === "assistant") return t("node.empty");
+    if (n.cat === "inject") return t("form." + (n.form || "context"));
+    return t("node.nonText");
   }
-  return out;
-}
-function attachMarkers(requests, events) {
-  const markers = new Array(requests.length);
-  for (const ev of events) {
-    if (ev.kind !== "compaction" && ev.kind !== "prune") continue;
-    for (let r = 0; r < requests.length; r++) {
-      if (requests[r].seq >= ev.seq) {
-        if (markers[r] === void 0) markers[r] = ev;
-        break;
-      }
+  return function NodeList(props) {
+    if (props.nodes.length === 0) {
+      return /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("nodes.empty"));
     }
-  }
-  return markers;
+    const catColor = {};
+    for (const c of CATS) catColor[c.key] = c.color;
+    const rows = props.nodes.slice().reverse();
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-nodes" }, props.dropped > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-nodes-more" }, tr("nodes.more", { n: props.dropped })) : null, rows.map((n) => {
+      const text = nodeText(n);
+      return /* @__PURE__ */ React.createElement("div", { key: n.seq, className: "lc-node" }, /* @__PURE__ */ React.createElement("i", { style: { background: catColor[n.cat] || "#999" } }), /* @__PURE__ */ React.createElement("span", { className: "lc-node-preview", title: text }, text), typeof n.time === "number" ? /* @__PURE__ */ React.createElement("span", { className: "lc-node-time" }, fmtTime2(n.time)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-node-tokens" }, fmt3(n.tokens)));
+    }));
+  };
 }
-function makeTrendChart(kit) {
-  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
-  const CHART_H = 112;
-  const BAR_W = 14;
-  const BAR_GAP = 2;
-  const TURN_COLORS = ["#6366f1", "#f59e0b", "#22c55e", "#a855f7", "#3b82f6", "#14b8a6", "#ef4444", "#ec4899"];
-  return function TrendChart(props) {
-    const requests = props.requests;
-    const markers = props.markers;
-    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;
-    let maxTotal = 1;
-    for (const req of requests) {
-      const bt = barTotalOf(req);
-      if (bt > maxTotal) maxTotal = bt;
+
+// src/client/components/statsBoard.tsx
+function makeStatsBoard(kit) {
+  const { t, tr, fmt: fmt3 } = kit;
+  return function StatsBoard(props) {
+    const turns = /* @__PURE__ */ new Set();
+    let steps = 0, compactions = 0, prunes = 0, injects = 0, switches = 0;
+    let recycled = 0, est = 0, prompt = 0, output = 0;
+    for (const req of props.requests) {
+      turns.add(req.turn ?? 0);
+      steps++;
+      est += req.total;
+      if (typeof req.prompt === "number") prompt += req.prompt;
+      if (typeof req.output === "number") output += req.output;
     }
-    const groups = [];
-    for (const req of requests) {
-      let grp = groups.length > 0 ? groups[groups.length - 1] : null;
-      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;
+    for (const ev of props.events) {
+      if (ev.kind === "compaction") {
+        compactions++;
+        recycled += ev.tokens || 0;
+      } else if (ev.kind === "prune") {
+        prunes++;
+        recycled += ev.tokens || 0;
+      } else if (ev.kind === "inject") injects++;
+      else if (ev.kind === "model") switches++;
     }
-    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;
-      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;
-      } else if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 24) {
-        el.scrollLeft = el.scrollWidth;
-      }
-      updateEdges(el);
-    });
-    const tipOf = (req) => {
-      const head = 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 });
-      return head + " \xB7 " + fmtTime2(req.time) + " \xB7 " + tr("tip.total", { n: fmt3(req.total) }) + (req.prompt !== void 0 ? " \xB7 " + tr("tip.actual", { n: fmt3(req.prompt) }) : "");
-    };
-    const hoveredIdx = props.hoveredSeq !== null ? requests.findIndex((r) => r.seq === props.hoveredSeq) : -1;
-    const hoveredReq = hoveredIdx >= 0 ? requests[hoveredIdx] : null;
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-chartrow" }, /* @__PURE__ */ React.createElement("div", { className: "lc-axis" }, /* @__PURE__ */ React.createElement("span", { className: "lc-axis-top" }, fmt3(maxTotal)), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-mid" }, fmt3(Math.round(maxTotal / 2))), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-bot" }, "0")), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "lc-chart-scroll" + (props.activeTurn !== null ? " lc-chart-dim" : ""),
-        ref: scrollRef,
-        onScroll: (e) => {
-          updateEdges(e.currentTarget);
-        }
-      },
-      edges.left ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-fade lc-chart-fade-l" }) : null,
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "lc-chart",
-          onMouseLeave: () => {
-            props.onHover(null);
-          }
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-top" }),
-        /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-mid" }),
-        requests.map((req, i) => {
-          const marker = markers[i];
-          const markerAt = marker !== void 0 ? eventAt(marker) : null;
-          const selected = props.selectedSeq === req.seq;
-          const hovered = props.hoveredSeq === req.seq;
-          const inTurn = props.activeTurn !== null && (req.turn ?? 0) === props.activeTurn;
-          return /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              key: req.seq,
-              className: "lc-bar" + (selected ? " lc-bar-selected" : "") + (hovered ? " lc-bar-hovered" : "") + (inTurn ? " lc-bar-in-turn" : ""),
-              style: { width: BAR_W + "px" },
-              onClick: () => {
-                props.onSelect(selected ? null : req.seq);
-              },
-              onMouseEnter: () => {
-                props.onHover(req.seq);
-              }
-            },
-            marker !== void 0 ? /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: "lc-bar-marker",
-                title: "\u2702 " + (markerAt !== null ? markerAt + " \u2014 " : "") + eventLabel(marker)
-              },
-              "\u2702"
-            ) : null,
-            /* @__PURE__ */ React.createElement("div", { className: "lc-bar-stack" }, CATS.map((c) => {
-              const v = (req[c.key] || 0) * anchorOf(req);
-              if (!v) return null;
-              return /* @__PURE__ */ React.createElement("div", { key: c.key, style: { height: Math.max(1, Math.round(v / maxTotal * CHART_H)) + "px", background: c.color } });
-            }))
-          );
-        })
-      ),
-      hoveredReq !== null ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "lc-chart-tip",
-          style: { left: hoveredIdx * (BAR_W + BAR_GAP) + BAR_W / 2 + "px" }
-        },
-        tipOf(hoveredReq)
-      ) : null,
-      /* @__PURE__ */ React.createElement("div", { className: "lc-turns", onMouseLeave: () => {
-        props.onHoverTurn(null);
-      } }, 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 /* @__PURE__ */ React.createElement(
-          "span",
-          {
-            key: "turn-" + gi,
-            className: "lc-turn" + (on ? " lc-turn-on" : ""),
-            style: {
-              width: blockW + "px",
-              background: TURN_COLORS[gi % TURN_COLORS.length]
-            },
-            title: "T" + grp.turn,
-            onMouseEnter: () => {
-              props.onHoverTurn(grp.turn);
-            }
-          },
-          "T" + grp.turn
-        );
-      }))
-    ), edges.right ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null);
+    const cell = (label, value, sub) => /* @__PURE__ */ React.createElement("div", { className: "lc-stat" }, /* @__PURE__ */ React.createElement("span", { className: "lc-stat-label" }, label), /* @__PURE__ */ React.createElement("b", { className: "lc-stat-value" }, value), sub !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-stat-sub" }, sub) : null);
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("stats.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("stats.hint"))), /* @__PURE__ */ React.createElement("div", { className: "lc-stats" }, cell(t("stats.turns"), fmt3(turns.size)), cell(t("stats.steps"), fmt3(steps)), cell(
+      t("stats.recycled"),
+      recycled > 0 ? "\u2212" + fmt3(recycled) : "0",
+      tr("stats.recycleSub", { c: compactions, p: prunes })
+    ), cell(t("stats.injects"), fmt3(injects)), cell(t("stats.switches"), fmt3(switches)), cell(t("stats.est"), "\u2248 " + fmt3(est)), cell(t("stats.actualPrompt"), fmt3(prompt)), cell(t("stats.output"), fmt3(output))));
   };
 }
 
@@ -773,7 +945,6 @@ function makeContextView(ctx, kit) {
     if (!data) {
       return /* @__PURE__ */ React.createElement("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("loading")));
     }
-    const current = data.current;
     const requests = data.requests || [];
     const events = data.events || [];
     const nodes = data.nodes || [];
@@ -798,16 +969,8 @@ function makeContextView(ctx, kit) {
         break;
       }
     }
-    const occ = data.occupancy;
-    const projected = occ !== void 0 && typeof occ.projectedTokens === "number" ? occ.projectedTokens : void 0;
-    const lastReq = displayRequests.length > 0 ? displayRequests[displayRequests.length - 1] : null;
-    const derived = lastReq !== null && typeof lastReq.prompt === "number" ? lastReq.prompt + (current.total - lastReq.total) : void 0;
-    const occupancyTokens = projected ?? derived ?? null;
-    const occupancyWindow = occ !== void 0 && typeof occ.contextWindow === "number" ? occ.contextWindow : data.contextWindow;
-    const headline = occupancyTokens ?? current.total;
-    const headlinePct = occupancyWindow ? Math.min(100, Math.round(headline / occupancyWindow * 100)) : null;
-    const parts = anchoredParts(partsOf(current), occupancyTokens !== null && headline > 0 ? headline : null);
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement(StatsBoard, { requests, events }), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("overview.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, (data.model ? data.model : "") + (data.provider ? " \xB7 " + data.provider : ""))), /* @__PURE__ */ React.createElement("div", { className: "lc-overview-num" }, /* @__PURE__ */ React.createElement("b", null, fmt3(headline)), /* @__PURE__ */ React.createElement("span", null, occupancyWindow ? " / " + fmt3(occupancyWindow) + " " + tr("overview.ofWindow", { p: headlinePct ?? 0 }) : " " + t("overview.estimate")), occupancyTokens !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("overview.splitEst")) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts, height: 16, max: occupancyWindow, hoverKey: hoverCat, onHoverKey: setHoverCat }), /* @__PURE__ */ React.createElement(Legend, { parts, hoverKey: hoverCat, onHoverKey: setHoverCat }), data.toolList && data.toolList.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-tools" }, t("tools.top"), data.toolList.slice().sort((a, b) => b.tokens - a.tokens).slice(0, 5).map((tool) => {
+    const head = headlineOf(data);
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement(StatsBoard, { requests, events }), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("overview.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, (data.model ? data.model : "") + (data.provider ? " \xB7 " + data.provider : ""))), /* @__PURE__ */ React.createElement("div", { className: "lc-overview-num" }, /* @__PURE__ */ React.createElement("b", null, fmt3(head.tokens)), /* @__PURE__ */ React.createElement("span", null, head.window ? " / " + fmt3(head.window) + " " + tr("overview.ofWindow", { p: head.pct ?? 0 }) : " " + t("overview.estimate")), !head.estimated ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("overview.splitEst")) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts: head.parts, height: 16, max: head.window, hoverKey: hoverCat, onHoverKey: setHoverCat }), /* @__PURE__ */ React.createElement(Legend, { parts: head.parts, hoverKey: hoverCat, onHoverKey: setHoverCat }), data.toolList && data.toolList.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-tools" }, t("tools.top"), data.toolList.slice().sort((a, b) => b.tokens - a.tokens).slice(0, 5).map((tool) => {
       return /* @__PURE__ */ React.createElement("span", { key: tool.name, className: "lc-tool-chip" }, tool.name + " " + fmt3(tool.tokens));
     }), data.toolList.length > 5 ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, " " + tr("tools.more", { n: data.toolList.length })) : null) : null), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("trend.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("trend.hint")), /* @__PURE__ */ React.createElement("div", { className: "lc-gran" }, /* @__PURE__ */ React.createElement(
       "button",
@@ -875,7 +1038,8 @@ function apply(ctx) {
       if (tag.parentNode !== null) tag.parentNode.removeChild(tag);
     };
   }, "dsh-context: styles");
-  const ContextView = makeContextView(ctx, makeViewKit(t));
+  const kit = makeViewKit(t);
+  const ContextView = makeContextView(ctx, kit);
   ctx.slots.inject("conversation.view", () => {
     return ctx.slots.register(
       // order 20 renders right of Chat (0) and Trajectory (10); the locale
@@ -884,6 +1048,20 @@ function apply(ctx) {
       (props) => h(ContextView, props)
     );
   });
+  registerContextCommand(ctx, kit);
+  const ContextModal = makeContextModal(ctx, kit);
+  ctx.slots.inject("conversation.input.overlay", () => {
+    return ctx.slots.register(
+      {
+        name: "conversation.input.overlay",
+        id: "context-modal",
+        order: 10,
+        locale: NS,
+        inject: (sessionId) => ({ hooks: { contextModal: modalStoreOf(sessionId) } })
+      },
+      (props) => h(ContextModal, props)
+    );
+  });
 }
 module.exports = {
   name: "dsh-context",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-context",
-  "version": "0.9.0",
-  "description": "Context insight panel for DeepSeek Harness: see what the model's context window is made of and how it evolves — composition, per-request history, compactions, injections, and model switches. Streamed through the harness's session-projection pipeline.",
+  "version": "0.10.0",
+  "description": "A DeepSeek Harness plugin for context dashboard and context command, for understanding how the context is made of, and how it evolves.",
   "author": "bowenliang123",
   "repository": {
     "type": "git",