dsh-context 0.10.3 → 0.11.1

package/README.md

@@ -5,21 +5,26 @@
 [![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)
 
-**A DeepSeek Harness plugin for context dashboard and context command, for understanding how the context is made of, and how it evolves.**
+**The best [DeepSeek Harness plugin](https://www.deepseek.com/harness/) for Agent's context insights and management.**
 
-`dsh-context` is a [DeepSeek Harness](https://github.com/deepseek-ai/DeepSeek-Harness) plugin for context insight.
+`dsh-context` provides full context lifecycle management features.
+- **Context tab** — an UI context dashboard for DeepSeek Harness’s context stats, composition, history, events, and messages.
+- **`/context` command** — the slash command shows the context model for current context composition and recent context evolution.
 
-- **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 / Update
 
-## Install
-
-One command, from any DeepSeek Harness installation:
+To Install from any DeepSeek Harness installation:
 
 ```sh
 dsh plugin --profile web add dsh-context
 ```
 
+Or to update the `dsh-context` plugin:
+
+```sh
+dsh plugin --profile web update dsh-context@latest
+```
+
 Then start the web UI with `dsh web`. No build step, no restart.
 
 ## Use it
@@ -60,7 +65,7 @@ In **Step** granularity, hovering any bar shows that single step's context info
 
 ### ⚡ Context events — when and why the window changed
 
-Every compaction, tool-output prune, skill or plugin context injection, and model switch — each with its token delta, turn/step attribution, and timestamp:
+Every compaction, tool-output prune, skill or plugin context injection, and model switch — each with its token delta, turn/step attribution, and timestamp. Filter by category (**Inject / Compact / Prune / Switch**) to see exactly when each kind of event happened and its impact — e.g. when a skill was injected, when instructions were added, or how much a compaction reclaimed:
 
 ![Context events and messages](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-events.png)
 

package/lib/client.js

@@ -29,11 +29,9 @@ var DICT_ZH = {
   "stats.compactions": "\u538B\u7F29",
   "stats.prunes": "\u526A\u679D",
   "plugin.title": "\u63D2\u4EF6\u4FE1\u606F",
-  "plugin.hint": "\u611F\u8C22\u4F7F\u7528 \xB7 \u6B22\u8FCE Star \u4E0E\u53CD\u9988 \u2B50",
+  "plugin.hint": "The best DSH context plugin \u2B50",
   "plugin.name": "\u63D2\u4EF6",
-  "plugin.version": "\u7248\u672C",
-  "plugin.updateBadge": "Update!",
-  "plugin.updateTip": "\u65B0\u7248\u672C v{v} \u53EF\u7528 \xB7 \u6267\u884C dsh plugin --profile web add dsh-context \u66F4\u65B0\uFF08\u70B9\u51FB\u524D\u5F80 npm\uFF09",
+  "plugin.github": "GitHub",
   "tools.top": "\u5DE5\u5177\u5B9A\u4E49 Top\uFF1A",
   "tools.more": "\u7B49 {n} \u4E2A",
   "trend.title": "\u5386\u53F2\u8D8B\u52BF",
@@ -52,6 +50,10 @@ var DICT_ZH = {
   "events.at": "\u7B2C {t} \u8F6E \xB7 \u7B2C {s} \u6B65",
   "events.range": "\u7B2C {t} \u8F6E \xB7 \u7B2C {a}\u2192{b} \u6B65",
   "events.rangeTo": "\u7B2C {a} \u8F6E \xB7 \u7B2C {as} \u6B65 \u2192 \u7B2C {b} \u8F6E \xB7 \u7B2C {bs} \u6B65",
+  "kind.inject": "\u6CE8\u5165",
+  "kind.compaction": "\u538B\u7F29",
+  "kind.prune": "\u526A\u679D",
+  "kind.model": "\u5207\u6362",
   "nodes.title": "\u6D88\u606F\u6784\u6210",
   "nodes.hint": "\u5F53\u524D\u6A21\u578B\u53EF\u89C1\u7684\u6D88\u606F\uFF0C\u6700\u65B0\u5728\u524D",
   "nodes.more": "\u2026 \u66F4\u65E9\u7684 {n} \u6761\u6D88\u606F\u5DF2\u7701\u7565",
@@ -104,11 +106,9 @@ var DICT_EN = {
   "stats.compactions": "Compactions",
   "stats.prunes": "Prunes",
   "plugin.title": "Plugin info",
-  "plugin.hint": "Thanks for using \u2014 stars & feedback welcome \u2B50",
+  "plugin.hint": "The best DSH context plugin \u2B50",
   "plugin.name": "Plugin",
-  "plugin.version": "Version",
-  "plugin.updateBadge": "Update!",
-  "plugin.updateTip": "v{v} available \u2014 run `dsh plugin --profile web add dsh-context` to update (click for npm)",
+  "plugin.github": "GitHub",
   "tools.top": "Top tool schemas:",
   "tools.more": "of {n}",
   "trend.title": "History",
@@ -127,6 +127,10 @@ var DICT_EN = {
   "events.at": "Turn {t} \xB7 Step {s}",
   "events.range": "Turn {t} \xB7 Step {a}\u2192{b}",
   "events.rangeTo": "Turn {a} \xB7 Step {as} \u2192 Turn {b} \xB7 Step {bs}",
+  "kind.inject": "Inject",
+  "kind.compaction": "Compact",
+  "kind.prune": "Prune",
+  "kind.model": "Switch",
   "nodes.title": "Messages",
   "nodes.hint": "currently model-visible, newest first",
   "nodes.more": "\u2026 {n} earlier messages omitted",
@@ -664,7 +668,7 @@ var STYLES = [
   ".lc-stat-value { color: var(--dsw-alias-label-primary); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }",
   ".lc-stat-sub { color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
   ".lc-card-sub { font-weight: 400; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
-  ".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, .lc-kinds { 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-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }",
@@ -750,27 +754,47 @@ var STYLES = [
   ".lc-detail-pct { width: 34px; text-align: right; color: var(--dsw-alias-label-secondary); }",
   ".lc-cols { display: flex; gap: 14px; flex-wrap: wrap; }",
   ".lc-col { flex: 1; min-width: 280px; }",
-  // Head row: the stats board (five cells) takes the wider share, the plugin
-  // card (three cells) the narrower — both wrap onto their own line when tight.
-  ".lc-col-stats { flex: 3; min-width: 380px; }",
-  ".lc-col-plugin { flex: 2; min-width: 260px; }",
-  ".lc-stat-link { color: var(--dsw-alias-brand-primary); text-decoration: none; font-weight: 600; }",
-  // Whole-cell link (Plugin info): the anchor carries the stat-cell chrome,
-  // so the entire padded box is one hit target; hovering anywhere on it
-  // underlines the value and tints the border for affordance.
-  ".lc-stat-cell { text-decoration: none; cursor: pointer; transition: border-color 120ms ease; }",
-  ".lc-stat-cell:hover { border-color: var(--dsw-alias-brand-primary); }",
-  ".lc-stat:hover .lc-stat-link { text-decoration: underline; }",
-  // "Update!" pill inside the version cell (update = good news -> brand fill).
-  ".lc-update-badge { margin-left: 6px; font-size: 10px; font-weight: 600; background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); border-radius: 4px; padding: 1px 6px; }",
+  // Head row: stats board + plugin info sit side by side under the shared
+  // `lc-cols` flex — stats takes ~7/10 of the row, plugin info ~3/10, both
+  // wrap onto their own line when the available width falls below each card's
+  // min-width (so a narrow viewport keeps both readable). Both children are
+  // `.lc-card` themselves (rendered by StatsBoard / PluginInfo); the flex
+  // sizing lives on the head row's direct children so the existing card
+  // chrome doesn't change.
+  ".lc-head > .lc-card { margin-bottom: 0; }",
+  ".lc-head > .lc-card:first-child { flex: 7 1 0; min-width: 360px; }",
+  ".lc-head > .lc-card:last-child { flex: 3 1 0; min-width: 220px; }",
+  // Plugin info: two full-width rows (Plugin / GitHub), each one horizontal
+  // line with the label on the left and the value on the right — a compact
+  // definition list rather than a multi-cell grid.
+  ".lc-pi-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }",
+  // The row IS the link: an `<a>` with the label + value on one baseline.
+  // Hovering a row underlines its value — the only hover affordance.
+  ".lc-pi-row { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }",
+  ".lc-pi-row:hover .lc-pi-value { text-decoration: underline; }",
+  // Upgrade chip appended to the Plugin value when the npm registry has a
+  // newer version than the baked-in one.
+  ".lc-pi-update { color: var(--dsw-alias-state-warn-primary); font-size: 11px; margin-left: 6px; white-space: nowrap; }",
+  ".lc-pi-label { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  // min-width: 0 lets the value shrink inside the flex row and truncate with
+  // an ellipsis; without it a narrow card pushes the value over the label.
+  ".lc-pi-value { min-width: 0; color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }",
   ".lc-events, .lc-nodes { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }",
   ".lc-event { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
   ".lc-event-icon { width: 18px; text-align: center; color: var(--dsw-alias-state-warn-primary); }",
   ".lc-event-icon.lc-event-inject { color: #a855f7; }",
   ".lc-event-icon.lc-event-model { color: var(--dsw-alias-brand-primary); }",
+  // Kind chip: the event classification at a glance; the tint matches the
+  // impact direction (inject = adds context, compaction/prune = frees it,
+  // model switch = neutral), mirroring the token sign colors below.
+  ".lc-kind { flex: none; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }",
+  ".lc-kind-inject { background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent); color: var(--dsw-alias-state-success-primary); }",
+  ".lc-kind-compaction { background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 15%, transparent); color: var(--dsw-alias-state-error-primary); }",
+  ".lc-kind-prune { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #8b5cf6; }",
+  ".lc-kind-model { background: color-mix(in srgb, var(--dsw-alias-brand-primary) 15%, transparent); color: var(--dsw-alias-brand-primary); }",
   ".lc-event-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
   ".lc-event-at { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; }",
-  ".lc-event-tokens { color: var(--dsw-alias-state-success-primary); }",
+  ".lc-event-tokens { color: var(--dsw-alias-state-success-primary); font-weight: 600; white-space: nowrap; }",
   ".lc-event-tokens.lc-up { color: var(--dsw-alias-state-warn-primary); }",
   ".lc-event-time { color: var(--dsw-alias-label-secondary); font-size: 12px; }",
   ".lc-node { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
@@ -846,12 +870,25 @@ function makeEventList(kit) {
     if (props.events.length === 0) {
       return /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("events.empty"));
     }
+    const rootRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      const sync = () => {
+        for (const el of root.querySelectorAll(".lc-event-label")) {
+          el.title = el.scrollWidth > el.clientWidth ? el.textContent || "" : "";
+        }
+      };
+      sync();
+      window.addEventListener("resize", sync);
+      return () => window.removeEventListener("resize", sync);
+    });
     const sorted = props.events.slice().reverse();
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-events" }, sorted.map((ev, i) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-events", ref: rootRef }, 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)));
+      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-kind lc-kind-" + ev.kind }, t("kind." + ev.kind)), /* @__PURE__ */ React.createElement("span", { className: "lc-event-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)));
     }));
   };
 }
@@ -886,41 +923,55 @@ function makeNodeList(kit) {
 
 // src/client/meta.ts
 var PLUGIN_NAME = "dsh-context";
-var PLUGIN_VERSION = true ? "0.10.3" : "0.0.0-dev";
+var PLUGIN_VERSION = true ? "0.11.1" : "0.0.0-dev";
 var PLUGIN_REPO = true ? "https://github.com/bowenliang123/dsh-context" : "https://github.com/bowenliang123/dsh-context";
-var PLUGIN_NPM = "https://www.npmjs.com/package/" + PLUGIN_NAME;
 var PLUGIN_REPO_SHORT = PLUGIN_REPO.replace(/^https?:\/\/github\.com\//, "");
 
+// src/client/latestVersion.ts
+var REGISTRY_URL = "https://registry.npmjs.org/" + PLUGIN_NAME + "/latest";
+var TTL_MS = 60 * 60 * 1e3;
+var cached = null;
+function fetchLatestVersion() {
+  if (!cached || Date.now() - cached.at >= TTL_MS) {
+    cached = {
+      at: Date.now(),
+      promise: fetch(REGISTRY_URL).then((res) => res.ok ? res.json() : null).then((body) => body && typeof body.version === "string" ? body.version : null).catch(() => null)
+    };
+  }
+  return cached.promise;
+}
+function isNewerVersion(latest, current) {
+  const parse = (v) => v.replace(/^v/, "").split("-", 1)[0].split(".").map((n) => parseInt(n, 10) || 0);
+  const a = parse(latest);
+  const b = parse(current);
+  for (let i = 0; i < Math.max(a.length, b.length); i++) {
+    const x = a[i] || 0;
+    const y = b[i] || 0;
+    if (x !== y) return x > y;
+  }
+  return false;
+}
+
 // src/client/components/pluginInfo.tsx
-var latestCache;
 function makePluginInfo(kit) {
-  const { t, tr } = kit;
+  const { t } = kit;
+  const row = (label, value, href) => /* @__PURE__ */ React.createElement("a", { className: "lc-pi-row", href, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ React.createElement("div", { className: "lc-pi-label" }, label), /* @__PURE__ */ React.createElement("div", { className: "lc-pi-value" }, value));
   return function PluginInfo() {
-    const [latest, setLatest] = React.useState(latestCache);
+    const [latest, setLatest] = React.useState(null);
     React.useEffect(() => {
-      if (latestCache !== void 0) return void 0;
-      let alive = true;
-      fetch("https://registry.npmjs.org/" + PLUGIN_NAME + "/latest").then((res) => res.ok ? res.json() : null).then((body) => {
-        if (!alive) return;
-        latestCache = body && typeof body.version === "string" ? body.version : null;
-        setLatest(latestCache);
-      }).catch(() => {
-        if (!alive) return;
-        latestCache = null;
-        setLatest(null);
+      if (PLUGIN_VERSION.includes("-dev")) return;
+      let on = true;
+      fetchLatestVersion().then((v) => {
+        if (on && v) setLatest(v);
       });
       return () => {
-        alive = false;
+        on = false;
       };
     }, []);
-    const update = typeof latest === "string" && latest !== PLUGIN_VERSION;
-    const cell = (label, value, href, title) => /* @__PURE__ */ React.createElement("a", { className: "lc-stat lc-stat-cell", href, target: "_blank", rel: "noreferrer", title }, /* @__PURE__ */ React.createElement("span", { className: "lc-stat-label" }, label), /* @__PURE__ */ React.createElement("b", { className: "lc-stat-value lc-stat-link" }, value));
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col lc-col-plugin" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("plugin.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("plugin.hint"))), /* @__PURE__ */ React.createElement("div", { className: "lc-stats" }, cell(t("plugin.name"), PLUGIN_NAME, PLUGIN_REPO), cell(
-      t("plugin.version"),
-      /* @__PURE__ */ React.createElement(React.Fragment, null, "v" + PLUGIN_VERSION, update ? /* @__PURE__ */ React.createElement("span", { className: "lc-update-badge" }, t("plugin.updateBadge")) : null),
-      PLUGIN_NPM,
-      update ? tr("plugin.updateTip", { v: latest ?? "" }) : void 0
-    ), cell("GitHub", PLUGIN_REPO_SHORT + " \u2197", PLUGIN_REPO)));
+    const update = latest !== null && isNewerVersion(latest, PLUGIN_VERSION) ? latest : null;
+    const nameValue = [PLUGIN_NAME + " (v" + PLUGIN_VERSION + ")"];
+    if (update) nameValue.push(/* @__PURE__ */ React.createElement("span", { key: "update", className: "lc-pi-update" }, "\u2191 v" + update));
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("plugin.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("plugin.hint"))), /* @__PURE__ */ React.createElement("div", { className: "lc-pi-grid" }, row(t("plugin.name"), nameValue, PLUGIN_REPO + "/releases"), row(t("plugin.github"), PLUGIN_REPO_SHORT, PLUGIN_REPO)));
   };
 }
 
@@ -946,6 +997,7 @@ function makeStatsBoard(kit) {
 
 // src/client/components/contextView.tsx
 var viewScroll = /* @__PURE__ */ new Map();
+var EVENT_KINDS = ["inject", "compaction", "prune", "model"];
 function makeContextView(ctx, kit) {
   const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel } = kit;
   const StackedBar = makeStackedBar(kit);
@@ -966,6 +1018,14 @@ function makeContextView(ctx, kit) {
     const [tick, setTick] = React.useState(0);
     const [granularity, setGranularity] = React.useState("step");
     const [hoverCat, setHoverCat] = React.useState(null);
+    const [pickedKinds, setPickedKinds] = React.useState([...EVENT_KINDS]);
+    const toggleKind = (k) => {
+      setPickedKinds((p) => {
+        if (p.length === EVENT_KINDS.length) return [k];
+        if (!p.includes(k)) return [...p, k];
+        return p.length === 1 ? [...EVENT_KINDS] : p.filter((x) => x !== k);
+      });
+    };
     const rootRef = React.useRef(null);
     const scrollerRef = React.useRef(null);
     const restoredRef = React.useRef(null);
@@ -997,6 +1057,7 @@ function makeContextView(ctx, kit) {
     }
     const requests = data.requests || [];
     const events = data.events || [];
+    const shownEvents = pickedKinds.length === EVENT_KINDS.length ? events : events.filter((e) => pickedKinds.includes(e.kind));
     const nodes = data.nodes || [];
     const displayRequests = granularity === "turn" ? aggregateByTurn(requests) : requests;
     const markers = attachMarkers(displayRequests, events);
@@ -1020,7 +1081,7 @@ function makeContextView(ctx, kit) {
       }
     }
     const head = headlineOf(data, pressure);
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement(StatsBoard, { requests, events }), /* @__PURE__ */ React.createElement(PluginInfo, null)), /* @__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("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement("div", { className: "lc-cols lc-head" }, /* @__PURE__ */ React.createElement(StatsBoard, { requests, events }), /* @__PURE__ */ React.createElement(PluginInfo, null)), /* @__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",
@@ -1054,7 +1115,17 @@ function makeContextView(ctx, kit) {
         onHover: setHoveredSeq,
         onHoverTurn: setHoverTurn
       }
-    ), /* @__PURE__ */ React.createElement(RequestDetail, { request: activeReq, marker: activeReq !== null ? markerOf(activeReq) : void 0 }))), /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("events.title")), /* @__PURE__ */ React.createElement(EventList, { events })), /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("nodes.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("nodes.hint"))), /* @__PURE__ */ React.createElement(NodeList, { nodes, dropped: data.droppedNodes || 0 }))), /* @__PURE__ */ React.createElement("div", { className: "lc-foot" }, t("footer")));
+    ), /* @__PURE__ */ React.createElement(RequestDetail, { request: activeReq, marker: activeReq !== null ? markerOf(activeReq) : void 0 }))), /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("events.title"), /* @__PURE__ */ React.createElement("div", { className: "lc-kinds" }, EVENT_KINDS.map((k) => /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: k,
+        className: "lc-gran-btn" + (pickedKinds.includes(k) ? " lc-gran-on lc-kind-" + k : ""),
+        onClick: () => {
+          toggleKind(k);
+        }
+      },
+      t("kind." + k)
+    )))), /* @__PURE__ */ React.createElement(EventList, { events: shownEvents })), /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("nodes.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("nodes.hint"))), /* @__PURE__ */ React.createElement(NodeList, { nodes, dropped: data.droppedNodes || 0 }))), /* @__PURE__ */ React.createElement("div", { className: "lc-foot" }, t("footer")));
   };
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-context",
-  "version": "0.10.3",
-  "description": "A DeepSeek Harness plugin for context dashboard and context command, for understanding how the context is made of, and how it evolves.",
+  "version": "0.11.1",
+  "description": "A DeepSeek Harness plugin for context insight and management, with context dashboard and context command, for understanding how the context is made of, and how it evolves.",
   "author": "bowenliang123",
   "repository": {
     "type": "git",