dsh-context 0.14.0 → 0.16.0

package/README.md

@@ -1,4 +1,4 @@
-<p align="center"><img src="https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/social-preview.png" width="840" alt="Social preview"></p>
+![Social preview](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/social-preview.png)
 
 # dsh-context
 

package/lib/client.js

@@ -9,11 +9,11 @@ window.__ModuleLoader__.load({
 // src/client/i18n.ts
 var DICT_ZH = {
   "tab": "\u4E0A\u4E0B\u6587",
-  "cat.system": "\u7CFB\u7EDF\u63D0\u793A",
+  "cat.system": "\u7CFB\u7EDF\u63D0\u793A\u8BCD",
   "cat.tools": "\u5DE5\u5177\u5B9A\u4E49",
   "cat.user": "\u7528\u6237\u6D88\u606F",
-  "cat.inject": "\u6CE8\u5165\u4E0A\u4E0B\u6587",
-  "cat.assistant": "\u52A9\u624B\u56DE\u590D",
+  "cat.inject": "\u6CE8\u5165\u5185\u5BB9",
+  "cat.assistant": "\u52A9\u624B\u6D88\u606F",
   "cat.tool": "\u5DE5\u5177\u7ED3\u679C",
   "overview.title": "\u5F53\u524D\u6784\u6210",
   "overview.estimate": "tokens\uFF08\u4F30\u7B97\uFF09",
@@ -89,36 +89,44 @@ var DICT_ZH = {
   "browser.missingLive": "\u2026 \u53E6\u6709 {n} \u6761\u66F4\u65E9\u7684\u6D88\u606F\u4E5F\u5728\u4E0A\u4E0B\u6587\u4E2D\uFF08\u8D85\u51FA\u5C55\u793A\u7A97\u53E3\uFF09",
   "browser.approx": "\u8BE5\u6B65\u9AA4\u6D89\u53CA\u7684\u90E8\u5206\u5DF2\u79FB\u9664\u6D88\u606F\u8D85\u51FA\u4FDD\u7559\u8303\u56F4\uFF0C\u4EE5\u4E0B\u4E3A\u8FD1\u4F3C\u6784\u6210",
   "browser.noHeader": "\u6B64\u6570\u636E\u6765\u81EA\u65E7\u7248\u63D2\u4EF6\uFF1A\u4EC5\u63D0\u4F9B token \u4F30\u7B97\uFF0C\u65E0\u5B9E\u9645\u5185\u5BB9",
-  "browser.noEpoch": "\u8BE5\u6B65\u9AA4\u7684\u5934\u90E8\u5185\u5BB9\uFF08\u7CFB\u7EDF\u63D0\u793A / \u5DE5\u5177\u5B9A\u4E49\uFF09\u4E0D\u5728\u4FDD\u7559\u8303\u56F4\u5185",
+  "browser.noEpoch": "\u8BE5\u6B65\u9AA4\u7684\u5934\u90E8\u5185\u5BB9\uFF08\u7CFB\u7EDF\u63D0\u793A\u8BCD / \u5DE5\u5177\u5B9A\u4E49\uFF09\u4E0D\u5728\u4FDD\u7559\u8303\u56F4\u5185",
   "browser.noContent": "\u5B8C\u6574\u5185\u5BB9\u4E0D\u5728\u5F53\u524D\u52A0\u8F7D\u7684\u6D88\u606F\u7A97\u53E3\u5185\uFF08\u5728\u804A\u5929\u9875\u52A0\u8F7D\u66F4\u65E9\u5386\u53F2\u540E\u53EF\u67E5\u770B\uFF09",
   "browser.loading": "\u6B63\u5728\u4ECE\u66F4\u65E9\u7684\u4F1A\u8BDD\u5386\u53F2\u52A0\u8F7D\u5B8C\u6574\u5185\u5BB9\u2026",
-  "browser.preview": "\u9884\u89C8"
+  "browser.preview": "\u9884\u89C8",
+  // Tool schema browser card: parsed parameter table sits above the (collapsed
+  // by default) raw JSON so the common case — skimming arguments — stays
+  // scannable; the JSON is still one click away for the full payload.
+  "tool.desc": "\u63CF\u8FF0",
+  "tool.params": "\u53C2\u6570",
+  "tool.paramsEmpty": "\uFF08\u65E0\u53C2\u6570\uFF09",
+  "tool.jsonToggle": "\u67E5\u770B\u539F\u59CB JSON",
+  "tool.jsonHide": "\u6536\u8D77"
 };
 var DICT_EN = {
   "tab": "Context",
-  "cat.system": "System",
-  "cat.tools": "Tool schemas",
-  "cat.user": "User",
-  "cat.inject": "Injected",
-  "cat.assistant": "Assistant",
-  "cat.tool": "Tool results",
+  "cat.system": "System Prompt",
+  "cat.tools": "Tool Schemas",
+  "cat.user": "User Messages",
+  "cat.inject": "Injected Context",
+  "cat.assistant": "Assistant Messages",
+  "cat.tool": "Tool Results",
   "overview.title": "Current Context",
   "overview.estimate": "tokens (estimated)",
-  "overview.free": "Free window",
+  "overview.free": "Free Window",
   "overview.used": "of context used",
   "overview.ofUsed": "of used context",
-  "stats.title": "Context stats",
+  "stats.title": "Context Stats",
   "stats.hint": "Over the retained history window (same as the History chart)",
   "stats.turns": "Turns",
   "stats.steps": "Steps",
   "stats.injects": "Injections",
   "stats.compactions": "Compactions",
   "stats.prunes": "Prunes",
-  "plugin.title": "Plugin info",
+  "plugin.title": "Plugin Info",
   "plugin.hint": "The best DSH context plugin \u2B50",
   "plugin.name": "Plugin",
   "plugin.github": "GitHub",
-  "tools.top": "Top tool schemas:",
+  "tools.top": "Top Tool Schemas:",
   "tools.more": "of {n}",
   "trend.title": "Context History",
   "gran.step": "Step",
@@ -127,11 +135,11 @@ var DICT_EN = {
   "trend.empty": "Send a message and each model request\u2019s context makeup shows up here",
   "detail.step": "Turn {t} \xB7 Step {s}",
   "detail.turn": "Turn {t} \xB7 {n} steps",
-  "detail.lastStep": "last step",
-  "detail.estTotal": "estimated \u2248 {n}",
-  "detail.actual": "actual prompt {n}",
-  "detail.output": "output {n}",
-  "events.title": "Context events",
+  "detail.lastStep": "Last Step",
+  "detail.estTotal": "Estimated \u2248 {n}",
+  "detail.actual": "Actual Prompt {n}",
+  "detail.output": "Output {n}",
+  "events.title": "Context Events",
   "events.empty": "No context events yet (compaction, injections, model switches appear here)",
   "events.at": "Turn {t} \xB7 Step {s}",
   "events.range": "Turn {t} \xB7 Step {a}\u2192{b}",
@@ -149,37 +157,45 @@ var DICT_EN = {
   "footer": "Estimate: same fixed-density heuristic as dsh\u2019s built-in tokenMeter (~4 chars \u2248 1 token); \u201Cactual\u201D is provider-reported usage.",
   "tip.step": "Turn {t} \xB7 Step {s}",
   "tip.turn": "Turn {t} \xB7 {n} steps",
-  "tip.total": "total \u2248 {n}",
+  "tip.total": "Total \u2248 {n}",
   "tip.actual": " (actual {n})",
   "ev.compaction": "Context compacted (summary replaced {n} messages)",
   "ev.prune": "Tool output pruned",
   "ev.skill": "Skill injected ({name})",
   "ev.model": "Model switched: {a} \u2192 {b}",
   "form.instructions": "Instructions",
-  "form.catalog": "Catalog update",
-  "form.snapshot": "State snapshot",
+  "form.catalog": "Catalog Update",
+  "form.snapshot": "State Snapshot",
   "form.notice": "Notice",
-  "form.relay": "Agent relay",
+  "form.relay": "Agent Relay",
   "form.recall": "Recall",
-  "form.context": "Context injection",
-  "node.toolResult": "Tool result",
-  "node.calls": "calls ",
+  "form.context": "Context Injection",
+  "node.toolResult": "Tool Result",
+  "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",
   "browser.title": "Context Browser",
-  "browser.live": "Live (next request)",
-  "browser.liveNow": "Live \xB7 next request",
-  "browser.items": "{n} items",
+  "browser.live": "Live (Next Request)",
+  "browser.liveNow": "Live \xB7 Next Request",
+  "browser.items": "{n} Items",
   "browser.missingLive": "\u2026 {n} earlier messages are also part of the context (outside the served window)",
   "browser.approx": "Some removed messages of this step exceed retention \u2014 the makeup below is approximate",
   "browser.noHeader": "Served by an older plugin build: token estimates only, no content",
-  "browser.noEpoch": "The header content (system prompt / tool schemas) of this step is outside retention",
+  "browser.noEpoch": "The header content (System Prompt / Tool Schemas) of this step is outside retention",
   "browser.noContent": "Full content is outside the loaded message window (load older history in Chat to view)",
   "browser.loading": "Loading full content from older session history\u2026",
-  "browser.preview": "preview"
+  "browser.preview": "Preview",
+  // Tool schema browser card: parsed parameter table sits above the (collapsed
+  // by default) raw JSON so the common case — skimming arguments — stays
+  // scannable; the JSON is still one click away for the full payload.
+  "tool.desc": "Description",
+  "tool.params": "Parameters",
+  "tool.paramsEmpty": "(no parameters)",
+  "tool.jsonToggle": "View Raw JSON",
+  "tool.jsonHide": "Collapse"
 };
 
 // src/client/modalStore.ts
@@ -753,7 +769,14 @@ var STYLES = [
   ".lc-chip-on { font-weight: 600; background: var(--dsw-alias-interactive-bg-hover); }",
   ".lc-chip-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }",
   ".lc-tools { margin-top: 10px; color: var(--dsw-alias-label-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }",
-  ".lc-tool-chip { background: var(--dsw-alias-bg-layer-2); border-radius: 4px; padding: 1px 7px; font-size: 12px; color: var(--dsw-alias-label-primary); }",
+  // The overview tool list links into the Context browser: the "工具定义 Top"
+  // label, its "等 N 个" overflow link, and every tool chip are buttons, and
+  // hover underlines them (the chip already reads as a tag, so the underline
+  // is the only affordance).
+  ".lc-tools-label, .lc-tools-more { border: 0; background: transparent; padding: 0; color: var(--dsw-alias-label-secondary); font-family: inherit; font-size: 12px; cursor: pointer; }",
+  ".lc-tools-label:hover, .lc-tools-more:hover { text-decoration: underline; }",
+  ".lc-tool-chip { background: var(--dsw-alias-bg-layer-2); border: 0; border-radius: 4px; padding: 1px 7px; font: inherit; font-size: 12px; color: var(--dsw-alias-label-primary); cursor: pointer; }",
+  ".lc-tool-chip:hover { text-decoration: underline; }",
   ".lc-chartrow { display: flex; gap: 6px; align-items: stretch; }",
   ".lc-axis { position: relative; width: 40px; height: 150px; padding-top: 18px; box-sizing: border-box; color: var(--dsw-alias-label-secondary); font-size: 11px; }",
   ".lc-axis span { position: absolute; right: 0; line-height: 1; }",
@@ -904,7 +927,36 @@ var STYLES = [
   ".lc-br-content { padding: 2px 6px 8px 26px; display: flex; flex-direction: column; gap: 6px; }",
   ".lc-br-pre { margin: 0; padding: 8px 10px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow-y: auto; scrollbar-width: thin; }",
   ".lc-br-dim { color: var(--dsw-alias-label-secondary); }",
-  ".lc-br-call { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }"
+  ".lc-br-call { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }",
+  // ---- Tool schema body (browser card, tools category). The description
+  // and parameter table share one "card with a small title" chrome — a
+  // labeled bordered block so a reader can scan three stacked sections
+  // without losing track of which is which. The raw JSON sits below as a
+  // collapsed toggle (no card chrome — it's a debug view, not a primary
+  // section). ----
+  ".lc-ts-card { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; overflow: hidden; }",
+  ".lc-ts-card-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--dsw-alias-label-secondary); border-bottom: 1px solid var(--dsw-alias-border-l1); }",
+  ".lc-ts-card-head b { color: var(--dsw-alias-label-primary); }",
+  ".lc-ts-card-count { margin-left: auto; }",
+  ".lc-ts-desc-body { margin: 0; padding: 8px 10px; color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow-y: auto; scrollbar-width: thin; }",
+  // Grid: name + type + required chip + description. Columns wrap on narrow
+  // rows; the description cell spans the full second row so a long blurb
+  // never breaks the one-line rhythm of name/type/required.
+  ".lc-ts-param-row { display: grid; grid-template-columns: 140px 90px 56px 1fr; column-gap: 10px; row-gap: 2px; padding: 6px 10px; border-top: 1px solid var(--dsw-alias-border-l1); font-size: 12px; align-items: baseline; }",
+  ".lc-ts-param-row:first-of-type { border-top: 0; }",
+  ".lc-ts-param-name { font-weight: 600; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
+  ".lc-ts-param-type { color: var(--dsw-alias-label-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
+  ".lc-ts-param-req { color: var(--dsw-alias-state-warn-primary); font-size: 11px; font-weight: 600; }",
+  ".lc-ts-param-req-off { color: var(--dsw-alias-label-secondary); font-size: 11px; }",
+  ".lc-ts-param-desc { grid-column: 1 / -1; color: var(--dsw-alias-label-secondary); line-height: 1.5; }",
+  ".lc-ts-params-empty { padding: 8px 10px; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
+  // Raw JSON toggle: a slim button that owns the open/closed state, sitting
+  // just under the parameter table. The <pre> itself only mounts when open
+  // (avoids stringifying the schema on every render and keeps the default
+  // body compact).
+  ".lc-ts-json { display: flex; flex-direction: column; gap: 4px; }",
+  ".lc-ts-json-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 11px; padding: 0; cursor: pointer; }",
+  ".lc-ts-json-toggle:hover { color: var(--dsw-alias-label-primary); text-decoration: underline; }"
 ].join("\n");
 
 // src/client/assemble.ts
@@ -975,6 +1027,92 @@ function makeNodeList(kit) {
 }
 
 // src/client/components/browser.tsx
+function unionTypesOf(p) {
+  const branches = [];
+  if (Array.isArray(p.anyOf)) branches.push(...p.anyOf);
+  if (Array.isArray(p.oneOf)) branches.push(...p.oneOf);
+  if (branches.length === 0) return null;
+  const parts = [];
+  for (const b of branches) {
+    if (b !== null && typeof b === "object") parts.push(typeOf(b));
+  }
+  return parts.length > 0 ? parts.join(" | ") : null;
+}
+function typeOf(p) {
+  const u = unionTypesOf(p);
+  if (u !== null) return u;
+  const t = p.type;
+  if (t === "array") {
+    const items = p.items;
+    if (items !== null && typeof items === "object") {
+      const inner = typeOf(items);
+      return "array<" + inner + ">";
+    }
+    return "array";
+  }
+  if (typeof t === "string") {
+    if (t === "object") {
+      const props = p.properties;
+      if (props !== null && typeof props === "object" && Object.keys(props).length > 0) {
+        return "object{" + Object.keys(props).length + "}";
+      }
+    }
+    if (Array.isArray(p.enum) && p.enum.length > 0) {
+      return t + " (enum)";
+    }
+    return t;
+  }
+  if (Array.isArray(p.enum) && p.enum.length > 0) return "(enum)";
+  return "unknown";
+}
+function paramsOf(schema) {
+  if (schema === null || typeof schema !== "object") return null;
+  const s = schema;
+  const candidate = (v) => v !== null && typeof v === "object" ? v : null;
+  const nested = candidate(s.parameters) ?? candidate(s.input_schema) ?? candidate(s.inputSchema);
+  if (nested !== null) return nested;
+  if (s.type === "object" && s.properties !== void 0 && typeof s.properties === "object") {
+    return s;
+  }
+  return null;
+}
+function ParamRow(props) {
+  const typeLabel = typeOf(props.schema);
+  const desc = props.schema.description;
+  return /* @__PURE__ */ React.createElement("div", { className: "lc-ts-param-row" }, /* @__PURE__ */ React.createElement("span", { className: "lc-ts-param-name" }, props.name), /* @__PURE__ */ React.createElement("span", { className: "lc-ts-param-type" }, typeLabel), /* @__PURE__ */ React.createElement("span", { className: props.required ? "lc-ts-param-req" : "lc-ts-param-req-off" }, props.required ? "\u2713" : "\xB7"), typeof desc === "string" && desc !== "" ? /* @__PURE__ */ React.createElement("span", { className: "lc-ts-param-desc" }, desc) : null);
+}
+function ToolSchema(props) {
+  const [jsonOpen, setJsonOpen] = React.useState(false);
+  const params = React.useMemo(() => paramsOf(props.schema), [props.schema]);
+  const rows = React.useMemo(() => {
+    if (params === null) return [];
+    const props2 = params.properties;
+    if (props2 === null || typeof props2 !== "object") return [];
+    const req = Array.isArray(params.required) ? new Set(params.required.filter((x) => typeof x === "string")) : /* @__PURE__ */ new Set();
+    const out = [];
+    for (const k of Object.keys(props2)) {
+      const v = props2[k];
+      if (v === null || typeof v !== "object") continue;
+      out.push({ name: k, schema: v, required: req.has(k) });
+    }
+    return out;
+  }, [params]);
+  const schemaJson = React.useMemo(
+    () => props.schema !== void 0 ? JSON.stringify(props.schema, null, 2) : "",
+    [props.schema]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.description !== void 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card-head" }, /* @__PURE__ */ React.createElement("b", null, props.labels.desc)), /* @__PURE__ */ React.createElement("pre", { className: "lc-ts-desc-body" }, props.description)) : null, params !== null && rows.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card-head" }, /* @__PURE__ */ React.createElement("b", null, props.labels.title), /* @__PURE__ */ React.createElement("span", { className: "lc-ts-card-count" }, rows.length)), rows.map((r) => /* @__PURE__ */ React.createElement(ParamRow, { key: r.name, name: r.name, schema: r.schema, required: r.required }))) : params !== null ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-params-empty" }, props.labels.empty) : null, schemaJson !== "" ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-json" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "lc-ts-json-toggle",
+      onClick: () => {
+        setJsonOpen((o) => !o);
+      }
+    },
+    (jsonOpen ? "\u25BE " : "\u25B8 ") + (jsonOpen ? props.labels.hide : props.labels.show)
+  ), jsonOpen ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, schemaJson) : null) : null);
+}
 function RawBlocks(props) {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, props.blocks.map((b, i) => {
     const blk = b;
@@ -1066,6 +1204,14 @@ function makeContextBrowser(kit, StackedBar) {
       setOpenCat(null);
       setOpenElem(null);
     }, [pinSeq]);
+    const toolFocus = props.toolFocus;
+    React.useEffect(() => {
+      if (toolFocus === null || toolFocus === void 0) return;
+      setSel("live");
+      setOpenCat("tools");
+      setOpenElem(toolFocus.tool !== void 0 ? "tool:" + toolFocus.tool : null);
+      if (props.onToolFocusHandled !== void 0) props.onToolFocusHandled();
+    }, [toolFocus, props.onToolFocusHandled]);
     const awaiting = missingSeq !== null && !exhausted && loadOlderHistory !== void 0 && hasMore;
     const requests = data.requests || [];
     const hoverReq = props.previewSeq !== null && props.previewSeq !== void 0 ? requests.find((r) => r.seq === props.previewSeq) ?? null : null;
@@ -1118,19 +1264,25 @@ function makeContextBrowser(kit, StackedBar) {
       }
       if (c === "tools") {
         if (view.header === null) return /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, t(headers === null ? "browser.noHeader" : "browser.noEpoch"));
-        return view.header.tools.map((tool) => {
-          const schema = tool.schema !== void 0 ? JSON.stringify(tool.schema, null, 2) : "";
+        const labels = {
+          desc: t("tool.desc"),
+          title: t("tool.params"),
+          empty: t("tool.paramsEmpty"),
+          show: t("tool.jsonToggle"),
+          hide: t("tool.jsonHide")
+        };
+        return view.header.tools.slice().sort((a, b) => b.tokens - a.tokens).map((tool) => {
           return elemRow(
             "tool:" + tool.name,
             null,
             tool.name,
             tool.tokens,
             void 0,
-            /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, tool.description !== void 0 ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre" }, tool.description) : null, schema !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, schema) : null)
+            /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement(ToolSchema, { description: tool.description, schema: tool.schema, labels }))
           );
         });
       }
-      const nodes = byCat[c] ?? [];
+      const nodes = (byCat[c] ?? []).slice().reverse();
       return nodes.map((n) => {
         let tag = null;
         let preview = nodeText(n);
@@ -1288,7 +1440,7 @@ function makeEventList(kit) {
 
 // src/client/meta.ts
 var PLUGIN_NAME = "dsh-context";
-var PLUGIN_VERSION = true ? "0.14.0" : "0.0.0-dev";
+var PLUGIN_VERSION = true ? "0.16.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\//, "");
 
@@ -1393,6 +1545,10 @@ function makeContextView(ctx, kit) {
         return p.length === 1 ? [...EVENT_KINDS] : p.filter((x) => x !== k);
       });
     };
+    const [toolFocus, setToolFocus] = React.useState(null);
+    const clearToolFocus = React.useCallback(() => {
+      setToolFocus(null);
+    }, []);
     const rootRef = React.useRef(null);
     const scrollerRef = React.useRef(null);
     const restoredRef = React.useRef(null);
@@ -1448,9 +1604,40 @@ 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 lc-head" }, /* @__PURE__ */ React.createElement(StatsBoard, { requests, events }), /* @__PURE__ */ React.createElement(PluginInfo, null)), /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, 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) + " tokens" : " " + t("overview.estimate")), head.pct !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-overview-pct" }, /* @__PURE__ */ React.createElement("b", null, head.pct + "%"), t("overview.used")) : 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" }, " " + t("tools.more", { n: data.toolList.length })) : null) : null), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("trend.title")), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("trend.hint")), /* @__PURE__ */ React.createElement("div", { className: "lc-gran" }, /* @__PURE__ */ React.createElement(
+    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-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, 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) + " tokens" : " " + t("overview.estimate")), head.pct !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-overview-pct" }, /* @__PURE__ */ React.createElement("b", null, head.pct + "%"), t("overview.used")) : 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" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "lc-tools-label",
+        onClick: () => {
+          setToolFocus({});
+        }
+      },
+      t("tools.top")
+    ), data.toolList.slice().sort((a, b) => b.tokens - a.tokens).slice(0, 5).map((tool) => {
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: tool.name,
+          type: "button",
+          className: "lc-tool-chip",
+          onClick: () => {
+            setToolFocus({ tool: tool.name });
+          }
+        },
+        tool.name + " " + fmt3(tool.tokens)
+      );
+    }), data.toolList.length > 5 ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "lc-tools-more",
+        onClick: () => {
+          setToolFocus({});
+        }
+      },
+      t("tools.more", { n: data.toolList.length })
+    ) : null) : null), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, 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",
       {
         className: "lc-gran-btn" + (granularity === "step" ? " lc-gran-on" : ""),
@@ -1492,7 +1679,9 @@ function makeContextView(ctx, kit) {
         previewSeq: hoveredSeq,
         pinSeq: pinnedReq !== null ? pinnedReq.seq : null,
         hoverKey: hoverCat,
-        onHoverKey: setHoverCat
+        onHoverKey: setHoverCat,
+        toolFocus,
+        onToolFocusHandled: clearToolFocus
       }
     ))), /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("events.title")), /* @__PURE__ */ React.createElement("div", { className: "lc-kinds" }, EVENT_KINDS.map((k) => /* @__PURE__ */ React.createElement(
       "button",

package/lib/index.js

@@ -980,7 +980,7 @@ var alwaysPolicySchema = Schema.object({
 var RetryPolicySchema = Schema.union([normalPolicySchema, alwaysPolicySchema]);
 var { version } = createRequire(import.meta.url)("../package.json");
 
-// node_modules/.pnpm/@deepseek-ai+dsh-session@0.1.0-rc.7_6fd26f59436a18b115f326d6060415e6/node_modules/@deepseek-ai/dsh-session/lib/index.js
+// node_modules/.pnpm/@deepseek-ai+dsh-session@0.1.0-rc.8_6fd26f59436a18b115f326d6060415e6/node_modules/@deepseek-ai/dsh-session/lib/index.js
 function deriveEventMessage(event) {
   switch (event.type) {
     case "user/message":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.14.0",
+  "version": "0.16.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": {
@@ -31,7 +31,8 @@
     "test": "npm run typecheck && node tests/host.test.mjs && node tests/client.test.mjs",
     "release": "bash scripts/publish.sh",
     "hooks": "bash scripts/install-hooks.sh",
-    "repro": "node tests/repro-real-react.mjs"
+    "repro": "node tests/repro-real-react.mjs",
+    "social-preview": "node docs/social-preview/generate.mjs"
   },
   "dsh": {
     "bundle": {
@@ -58,18 +59,17 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "playwright-core": "^1.62.1",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-ui-primitives": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-session": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-session-projection": "0.1.0-rc.7",
-    "@deepseek-ai/dsh-token-meter": "0.1.0-rc.7",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-session": "0.1.0-rc.8",
+    "@deepseek-ai/dsh-session-projection": "0.1.0-rc.8",
     "@types/react": "^18.3.31",
     "esbuild": "^0.28.2",
     "jsdom": "^30.0.1",
+    "playwright-core": "^1.62.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^7.0.2"