dsh-context 0.10.2 → 0.11.0

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
@@ -40,7 +45,7 @@ Type `/context` (or pick it from the `/` menu) and press Enter: a centered dialo
 
 ### 📊 Context stats — the session at a glance
 
-Turns, steps, how much context has been recycled by compactions and prunes, how many injections happened, model switches, and the estimated total tokens sent — next to the provider-reported actuals, so you can see how the estimate holds up.
+Turns, steps, how many injections, compactions, and prunes have happened.
 
 ### 🧱 Current composition — what's in the window right now
 

package/lib/client.js

@@ -25,13 +25,13 @@ var DICT_ZH = {
   "stats.hint": "\u7EDF\u8BA1\u5F53\u524D\u4FDD\u7559\u7684\u5386\u53F2\u7A97\u53E3\uFF08\u4E0E\u8D8B\u52BF\u56FE\u4E00\u81F4\uFF09",
   "stats.turns": "\u8F6E\u6B21",
   "stats.steps": "\u6B65\u6570",
-  "stats.recycled": "\u2702 \u56DE\u6536",
-  "stats.recycleSub": "\u538B\u7F29 {c} \u6B21 \xB7 \u526A\u679D {p} \u6B21",
-  "stats.injects": "\uFF0B \u6CE8\u5165",
-  "stats.switches": "\u21C4 \u6A21\u578B\u5207\u6362",
-  "stats.est": "\u2248 \u7D2F\u8BA1\u4F30\u7B97",
-  "stats.actualPrompt": "\u5B9E\u9645 prompt",
-  "stats.output": "\u8F93\u51FA",
+  "stats.injects": "\u6CE8\u5165",
+  "stats.compactions": "\u538B\u7F29",
+  "stats.prunes": "\u526A\u679D",
+  "plugin.title": "\u63D2\u4EF6\u4FE1\u606F",
+  "plugin.hint": "The best DSH context plugin \u2B50",
+  "plugin.name": "\u63D2\u4EF6",
+  "plugin.github": "GitHub",
   "tools.top": "\u5DE5\u5177\u5B9A\u4E49 Top\uFF1A",
   "tools.more": "\u7B49 {n} \u4E2A",
   "trend.title": "\u5386\u53F2\u8D8B\u52BF",
@@ -50,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",
@@ -98,13 +102,13 @@ var DICT_EN = {
   "stats.hint": "Over the retained history window (same as the History chart)",
   "stats.turns": "Turns",
   "stats.steps": "Steps",
-  "stats.recycled": "\u2702 Recycled",
-  "stats.recycleSub": "{c} compactions \xB7 {p} prunes",
-  "stats.injects": "\uFF0B Injections",
-  "stats.switches": "\u21C4 Model switches",
-  "stats.est": "\u2248 Estimated total",
-  "stats.actualPrompt": "actual prompt",
-  "stats.output": "output",
+  "stats.injects": "Injections",
+  "stats.compactions": "Compactions",
+  "stats.prunes": "Prunes",
+  "plugin.title": "Plugin info",
+  "plugin.hint": "The best DSH context plugin \u2B50",
+  "plugin.name": "Plugin",
+  "plugin.github": "GitHub",
   "tools.top": "Top tool schemas:",
   "tools.more": "of {n}",
   "trend.title": "History",
@@ -123,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",
@@ -656,11 +664,11 @@ var STYLES = [
   ".lc-card-title { font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }",
   ".lc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }",
   ".lc-stat { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }",
-  ".lc-stat-label { color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
-  ".lc-stat-value { color: var(--dsw-alias-label-primary); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  ".lc-stat-label { color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  ".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); }",
@@ -746,14 +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: 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; }",
@@ -829,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)));
     }));
   };
 }
@@ -867,41 +921,83 @@ function makeNodeList(kit) {
   };
 }
 
+// src/client/meta.ts
+var PLUGIN_NAME = "dsh-context";
+var PLUGIN_VERSION = true ? "0.11.0" : "0.0.0-dev";
+var PLUGIN_REPO = true ? "https://github.com/bowenliang123/dsh-context" : "https://github.com/bowenliang123/dsh-context";
+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
+function makePluginInfo(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(null);
+    React.useEffect(() => {
+      if (PLUGIN_VERSION.includes("-dev")) return;
+      let on = true;
+      fetchLatestVersion().then((v) => {
+        if (on && v) setLatest(v);
+      });
+      return () => {
+        on = false;
+      };
+    }, []);
+    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)));
+  };
+}
+
 // src/client/components/statsBoard.tsx
 function makeStatsBoard(kit) {
-  const { t, tr, fmt: fmt3 } = kit;
+  const { t, 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;
+    let steps = 0, compactions = 0, prunes = 0, injects = 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++;
+      if (ev.kind === "compaction") compactions++;
+      else if (ev.kind === "prune") prunes++;
+      else if (ev.kind === "inject") injects++;
     }
-    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))));
+    const cell = (label, value) => /* @__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));
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col lc-col-stats" }, /* @__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.injects"), fmt3(injects)), cell(t("stats.compactions"), fmt3(compactions)), cell(t("stats.prunes"), fmt3(prunes))));
   };
 }
 
 // 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);
@@ -911,6 +1007,7 @@ function makeContextView(ctx, kit) {
   const EventList = makeEventList(kit);
   const NodeList = makeNodeList(kit);
   const StatsBoard = makeStatsBoard(kit);
+  const PluginInfo = makePluginInfo(kit);
   return function ContextView(props) {
     const sessionId = props.sessionId;
     const data = typeof props.useProjection === "function" ? timelineOf(props.useProjection("contextTimeline")) : null;
@@ -921,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);
@@ -952,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);
@@ -975,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(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("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",
@@ -1009,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.2",
-  "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.0",
+  "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",