dsh-context 0.13.0 → 0.15.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,17 +9,16 @@ 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.ofWindow": "tokens\uFF08\u7EA6 {p}%\uFF09",
   "overview.estimate": "tokens\uFF08\u4F30\u7B97\uFF09",
   "overview.free": "\u5269\u4F59\u7A97\u53E3",
-  "overview.splitEst": "\xB7 \u5206\u7C7B\u6309\u4F30\u7B97\u6BD4\u4F8B\u5206\u914D",
+  "overview.used": "\u4E0A\u4E0B\u6587\u5DF2\u7528",
   "overview.ofUsed": "\u5360\u5DF2\u7528\u4E0A\u4E0B\u6587",
   "stats.title": "\u4E0A\u4E0B\u6587\u7EDF\u8BA1",
   "stats.hint": "\u7EDF\u8BA1\u5F53\u524D\u4FDD\u7559\u7684\u5386\u53F2\u7A97\u53E3\uFF08\u4E0E\u8D8B\u52BF\u56FE\u4E00\u81F4\uFF09",
@@ -90,50 +89,49 @@ 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"
 };
 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",
-  "overview.title": "Current composition",
-  "overview.ofWindow": "tokens (~{p}%)",
+  "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.splitEst": "\xB7 category split is estimated",
+  "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": "History",
+  "trend.title": "Context History",
   "gran.step": "Step",
   "gran.turn": "Turn",
-  "trend.hint": "hover a bar for details (click to pin), \u2702 marks compaction/prune; scroll sideways to see earlier; Step/Turn switches granularity",
+  "trend.hint": "Hover to view details, \u2702 marks compaction/prune, Step/Turn switches granularity",
   "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}",
@@ -151,37 +149,37 @@ 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.title": "Context Browser",
+  "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"
 };
 
 // src/client/modalStore.ts
@@ -286,23 +284,19 @@ function headlineOf(data, pressure = null) {
   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 };
+  return { tokens, window: window2, pct, parts };
 }
 
 // src/client/services.ts
-function timelineOf(value) {
-  if (value === null || value === void 0 || typeof value !== "object") return null;
-  return value;
-}
-function contextPressureOf(value) {
+function asRecord(value) {
   if (value === null || value === void 0 || typeof value !== "object") return null;
   return value;
 }
+var timelineOf = (value) => asRecord(value);
+var contextPressureOf = (value) => asRecord(value);
 function headersOf(value) {
-  if (value === null || value === void 0 || typeof value !== "object") return null;
-  const headers = value.headers;
-  if (!Array.isArray(headers)) return null;
-  return value;
+  const headers = asRecord(value);
+  return headers !== null && Array.isArray(headers.headers) ? headers : null;
 }
 
 // src/client/react.ts
@@ -311,15 +305,15 @@ var h = React.createElement;
 
 // src/client/components/requestDetail.tsx
 function makeRequestDetail(kit, StackedBar) {
-  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
+  const { t, 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 head = isTurn ? t("detail.turn", { t: req.turn ?? 0, n: req.stepCount ?? 0 }) : t("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) => {
+    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, t("detail.estTotal", { n: fmt3(req.total) })), req.prompt !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-actual" }, t("detail.actual", { n: fmt3(req.prompt) })) : null, req.output !== void 0 ? /* @__PURE__ */ React.createElement("span", null, t("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) + "%" : ""));
     })));
@@ -328,7 +322,7 @@ function makeRequestDetail(kit, StackedBar) {
 
 // src/client/components/stackedBar.tsx
 function makeStackedBar(kit) {
-  const { t, tr, fmt: fmt3, catLabel } = kit;
+  const { t, fmt: fmt3, catLabel } = kit;
   return function StackedBar(props) {
     let total = 0;
     for (const p of props.parts) total += p.value;
@@ -353,7 +347,7 @@ function makeStackedBar(kit) {
             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"),
+              text: catLabel(p.key) + " \u2248" + fmt3(p.value) + " (" + Math.round(p.value / total * 100) + "%) " + t("overview.ofUsed"),
               leftPct: Math.max(12, Math.min(acc + pct / 2, 88))
             };
             break;
@@ -397,12 +391,25 @@ function makeStackedBar(kit) {
           }
         }
       ) : 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);
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "lc-occupied-box" + (showBox ? " lc-occupied-box-on" : ""),
+          style: { width: usedPct + "%" }
+        }
+      )
+    ), props.tip !== false ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "lc-bar-tip" + (tip ? " lc-bar-tip-on" : ""),
+        style: { left: tip ? tip.leftPct + "%" : "50%" }
+      },
+      tip ? tip.text : ""
+    ) : null);
   };
 }
 function makeLegend(kit) {
-  const { tr, fmt: fmt3, catLabel } = kit;
+  const { t, fmt: fmt3, catLabel } = kit;
   return function Legend(props) {
     let total = 0;
     for (const p of props.parts) total += p.value;
@@ -413,7 +420,7 @@ function makeLegend(kit) {
         {
           key: p.key,
           className: "lc-chip" + (on ? " lc-chip-on" : ""),
-          title: tr("overview.ofUsed"),
+          title: t("overview.ofUsed"),
           onMouseEnter: () => {
             if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
           },
@@ -459,7 +466,7 @@ function attachMarkers(requests, events) {
   return markers;
 }
 function makeTrendChart(kit) {
-  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
+  const { t, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
   const CHART_H = 112;
   const BAR_W = 14;
   const BAR_GAP = 2;
@@ -513,8 +520,8 @@ function makeTrendChart(kit) {
       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 head = req.stepCount !== void 0 && req.stepCount > 1 ? t("tip.turn", { t: req.turn ?? 0, n: req.stepCount }) : t("tip.step", { t: req.turn ?? 0, s: req.step ?? 0 });
+      return head + " \xB7 " + fmtTime2(req.time) + " \xB7 " + t("tip.total", { n: fmt3(req.total) }) + (req.prompt !== void 0 ? " \xB7 " + t("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;
@@ -610,7 +617,7 @@ function makeTrendChart(kit) {
 // src/client/components/contextModal.tsx
 var TREND_TURNS = 10;
 function makeContextModal(ctx, kit) {
-  const { t, tr, fmt: fmt3 } = kit;
+  const { t, fmt: fmt3 } = kit;
   const sessions = ctx.get("sessions");
   const StackedBar = makeStackedBar(kit);
   const Legend = makeLegend(kit);
@@ -667,7 +674,7 @@ function makeContextModal(ctx, kit) {
     const head = data !== null ? headlineOf(data, pressure) : 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(
+    } }, /* @__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) + " 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 }), /* @__PURE__ */ React.createElement("div", { className: "lc-card-title lc-modal-trend" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, 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,
@@ -690,6 +697,7 @@ 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; }",
   ".lc-card { background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }",
   ".lc-card-title { font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }",
+  ".lc-card-title-text { flex: none; white-space: nowrap; }",
   ".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; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
@@ -700,9 +708,13 @@ var STYLES = [
   ".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); }",
-  ".lc-overview-num { margin-bottom: 8px; }",
-  ".lc-overview-num b { font-size: 20px; }",
+  ".lc-overview-num { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }",
+  ".lc-overview-num > b { font-size: 20px; }",
   ".lc-overview-num span { color: var(--dsw-alias-label-secondary); }",
+  // The used-percentage figure is the emphasis of the line: pushed to the
+  // right edge, large and primary-colored, with a small "used" caption.
+  ".lc-overview-pct { margin-left: auto; font-size: 11px; }",
+  ".lc-overview-pct b { font-size: 20px; color: var(--dsw-alias-label-primary); margin-right: 4px; }",
   ".lc-stacked-wrap { position: relative; width: 100%; }",
   ".lc-stacked { display: flex; width: 100%; border-radius: 5px; overflow: hidden; background: rgba(128,128,128,0.18); position: relative; }",
   // Hover reference frame around the OCCUPIED region of the composition bar:
@@ -711,9 +723,16 @@ var STYLES = [
   // sits outside it). pointer-events: none keeps hover on the segments/free.
   // Deliberately high-contrast (label-primary) and thick so the frame reads at
   // a glance, and the other parts dim underneath it (`.lc-stacked-dim`).
-  ".lc-occupied-box { position: absolute; top: 0; bottom: 0; left: 0; border: 2px dashed var(--dsw-alias-label-primary); border-radius: 5px; box-sizing: border-box; pointer-events: none; opacity: 1; box-shadow: 0 0 0 1px var(--dsw-alias-bg-layer-2); }",
-  ".lc-bar-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; }",
+  ".lc-occupied-box { position: absolute; top: 0; bottom: 0; left: 0; border: 2px dashed var(--dsw-alias-label-primary); border-radius: 5px; box-sizing: border-box; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1px var(--dsw-alias-bg-layer-2); transition: opacity 120ms ease; }",
+  ".lc-occupied-box-on { opacity: 1; }",
+  ".lc-bar-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; opacity: 0; transition: opacity 120ms ease; }",
+  ".lc-bar-tip-on { opacity: 1; }",
   ".lc-stacked > div { height: 100%; }",
+  // Hover eases: the shared composition hover (dim + segment brighten, on the
+  // overview or the mirrored browser bar) glides in and out — same 120ms
+  // rhythm as the rest of the view.
+  ".lc-stacked-seg { transition: filter 120ms ease, opacity 120ms ease; }",
+  ".lc-stacked-free { transition: box-shadow 120ms ease, opacity 120ms ease; }",
   ".lc-stacked-seg-on { filter: brightness(1.18); }",
   ".lc-stacked-free-on { box-shadow: inset 0 0 0 1px var(--dsw-alias-label-secondary); border-radius: 3px; }",
   // Hover focus: everything except the hovered part (segment, legend chip, or
@@ -724,10 +743,14 @@ var STYLES = [
   ".lc-stacked-dim .lc-stacked-free { opacity: 0.35; }",
   ".lc-stacked-dim .lc-stacked-free-on { opacity: 1; }",
   ".lc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }",
-  ".lc-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--dsw-alias-label-primary); }",
+  ".lc-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--dsw-alias-label-primary); padding: 1px 6px; border-radius: 6px; transition: background-color 120ms ease; }",
   ".lc-chip i, .lc-detail-row i, .lc-node i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }",
+  ".lc-chip i { transition: box-shadow 120ms ease; }",
   ".lc-chip em { font-style: normal; color: var(--dsw-alias-label-secondary); }",
-  ".lc-chip-on { font-weight: 600; }",
+  // The selected chip glows with the shared hover tint (smoothly, like the
+  // browser rows) instead of snapping its weight; the dot ring on top marks
+  // the exact segment.
+  ".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); }",
@@ -745,7 +768,7 @@ var STYLES = [
   ".lc-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dsw-alias-border-l1); pointer-events: none; }",
   ".lc-grid-top { top: 18px; }",
   ".lc-grid-mid { top: 74px; }",
-  ".lc-bar { position: relative; width: 14px; flex: none; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 2px; transition: opacity 120ms ease; }",
+  ".lc-bar { position: relative; width: 14px; flex: none; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 2px; transition: opacity 120ms ease, background-color 120ms ease; }",
   // Turn-aware dimming: while a turn is focused, bars OUTSIDE the active
   // turn fade to 35% and the whole current turn stays fully opaque.
   ".lc-chart-dim .lc-bar { opacity: 0.35; }",
@@ -856,9 +879,14 @@ var STYLES = [
   ".lc-br-cats { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }",
   ".lc-br-cat { border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; background: var(--dsw-alias-bg-layer-2); overflow: hidden; }",
   ".lc-br-cat-empty { opacity: 0.55; }",
-  ".lc-br-cat-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; padding: 7px 10px; cursor: pointer; text-align: left; }",
-  ".lc-br-cat-row:hover { background: var(--dsw-alias-bg-layer-1); }",
-  ".lc-br-cat-row i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }",
+  ".lc-br-cat-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; padding: 7px 10px; cursor: pointer; text-align: left; transition: background-color 120ms ease; }",
+  ".lc-br-cat-row:hover { background: var(--dsw-alias-interactive-bg-hover); }",
+  // Current-composition hover echo: the category row lit by the shared hover
+  // link (hovering the Current Composition card's bar/legend) looks hovered
+  // too — same tint as the physical hover, plus a ring on its color dot.
+  ".lc-br-cat-on { background: var(--dsw-alias-interactive-bg-hover); }",
+  ".lc-br-cat-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }",
+  ".lc-br-cat-row i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; transition: box-shadow 120ms ease; }",
   ".lc-br-cat-label { font-weight: 600; }",
   ".lc-br-cat-count { color: var(--dsw-alias-label-secondary); font-size: 12px; flex: 1; }",
   ".lc-br-chev { flex: none; width: 12px; color: var(--dsw-alias-label-secondary); transition: transform 120ms ease; }",
@@ -867,9 +895,9 @@ var STYLES = [
   ".lc-br-pct { flex: none; width: 36px; text-align: right; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
   ".lc-br-body { border-top: 1px solid var(--dsw-alias-border-l1); padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; }",
   ".lc-br-elem { border-radius: 6px; }",
-  ".lc-br-elem-on { background: var(--dsw-alias-bg-layer-1); }",
-  ".lc-br-elem-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; font-size: 12px; padding: 5px 6px; cursor: pointer; text-align: left; border-radius: 6px; }",
-  ".lc-br-elem-row:hover { background: var(--dsw-alias-bg-layer-1); }",
+  ".lc-br-elem-on { background: var(--dsw-alias-interactive-bg-active); }",
+  ".lc-br-elem-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; font-size: 12px; padding: 5px 6px; cursor: pointer; text-align: left; border-radius: 6px; transition: background-color 120ms ease; }",
+  ".lc-br-elem-row:hover { background: var(--dsw-alias-interactive-bg-hover); }",
   ".lc-br-tag { flex: none; font-size: 11px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px; padding: 0 6px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
   ".lc-br-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
   ".lc-br-time { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; }",
@@ -930,7 +958,7 @@ function makeNodeText(kit) {
   };
 }
 function makeNodeList(kit) {
-  const { t, tr, fmt: fmt3, fmtTime: fmtTime2 } = kit;
+  const { t, fmt: fmt3, fmtTime: fmtTime2 } = kit;
   const nodeText = makeNodeText(kit);
   return function NodeList(props) {
     if (props.nodes.length === 0) {
@@ -939,7 +967,7 @@ function makeNodeList(kit) {
     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) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-nodes" }, props.dropped > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-nodes-more" }, t("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)));
     }));
@@ -991,7 +1019,7 @@ function NodeContent(props) {
   return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, props.hint));
 }
 function makeContextBrowser(kit, StackedBar) {
-  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel } = kit;
+  const { t, fmt: fmt3, fmtTime: fmtTime2, catLabel } = kit;
   const nodeText = makeNodeText(kit);
   const catColor = {};
   for (const c of CATS) catColor[c.key] = c.color;
@@ -1032,11 +1060,19 @@ function makeContextBrowser(kit, StackedBar) {
     React.useEffect(() => {
       if (!hasMore && missingSeq !== null && !exhausted) setExhausted(true);
     }, [hasMore, missingSeq, exhausted]);
+    const pinSeq = props.pinSeq;
+    React.useEffect(() => {
+      setSel(pinSeq === null || pinSeq === void 0 ? "live" : pinSeq);
+      setOpenCat(null);
+      setOpenElem(null);
+    }, [pinSeq]);
     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;
     const req = hoverReq ?? (sel === "live" ? null : requests.find((r) => r.seq === sel) ?? null);
     const seq = req !== null ? req.seq : null;
+    const linked = req === null && props.onHoverKey !== void 0;
+    const linkKey = linked && props.hoverKey !== null && props.hoverKey !== "free" ? props.hoverKey : null;
     const view = assemble(data, headers, seq);
     const breakdown = req !== null ? req : data.current;
     const parts = partsOf(breakdown);
@@ -1124,7 +1160,7 @@ function makeContextBrowser(kit, StackedBar) {
         );
       });
     };
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("browser.title"), /* @__PURE__ */ React.createElement(
+    return /* @__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("browser.title")), /* @__PURE__ */ React.createElement(
       "select",
       {
         className: "lc-br-pick",
@@ -1134,15 +1170,43 @@ function makeContextBrowser(kit, StackedBar) {
         }
       },
       /* @__PURE__ */ React.createElement("option", { value: "live" }, t("browser.live")),
-      requests.slice().reverse().map((r) => /* @__PURE__ */ React.createElement("option", { key: r.seq, value: String(r.seq) }, tr("detail.step", { t: r.turn ?? 0, s: r.step ?? 0 }) + " \xB7 " + fmtTime2(r.time)))
-    )), /* @__PURE__ */ React.createElement("div", { className: "lc-br-meta" }, /* @__PURE__ */ React.createElement("b", null, req !== null ? tr("detail.step", { t: req.turn ?? 0, s: req.step ?? 0 }) : t("browser.liveNow")), req !== null ? /* @__PURE__ */ React.createElement("span", null, fmtTime2(req.time)) : null, hoverReq !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("browser.preview")) : null, /* @__PURE__ */ React.createElement("span", null, tr("detail.estTotal", { n: fmt3(total) })), req !== null && req.prompt !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-actual" }, tr("detail.actual", { n: fmt3(req.prompt) })) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts, height: 10 }), view.missingLive > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, tr("browser.missingLive", { n: view.missingLive })) : null, view.approximate ? /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, t("browser.approx")) : null, /* @__PURE__ */ React.createElement("div", { className: "lc-br-cats" }, CATS.map((c) => {
+      requests.slice().reverse().map((r) => /* @__PURE__ */ React.createElement("option", { key: r.seq, value: String(r.seq) }, t("detail.step", { t: r.turn ?? 0, s: r.step ?? 0 }) + " \xB7 " + fmtTime2(r.time)))
+    )), /* @__PURE__ */ React.createElement("div", { className: "lc-br-meta" }, /* @__PURE__ */ React.createElement("b", null, req !== null ? t("detail.step", { t: req.turn ?? 0, s: req.step ?? 0 }) : t("browser.liveNow")), req !== null ? /* @__PURE__ */ React.createElement("span", null, fmtTime2(req.time)) : null, hoverReq !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("browser.preview")) : null, /* @__PURE__ */ React.createElement("span", null, t("detail.estTotal", { n: fmt3(total) })), req !== null && req.prompt !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-actual" }, t("detail.actual", { n: fmt3(req.prompt) })) : null), /* @__PURE__ */ React.createElement("div", { className: "lc-br-bar" }, /* @__PURE__ */ React.createElement(
+      StackedBar,
+      {
+        parts,
+        height: 10,
+        hoverKey: linked ? linkKey : void 0,
+        onHoverKey: linked ? props.onHoverKey : void 0,
+        tip: false
+      }
+    )), view.missingLive > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, t("browser.missingLive", { n: view.missingLive })) : null, view.approximate ? /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, t("browser.approx")) : null, /* @__PURE__ */ React.createElement("div", { className: "lc-br-cats" }, CATS.map((c) => {
       const count = toolCount(c.key);
       const v = breakdown[c.key] || 0;
       const openable = count > 0 || (c.key === "system" || c.key === "tools") && view.header === null;
       const open = openCat === c.key && openable;
-      return /* @__PURE__ */ React.createElement("div", { key: c.key, className: "lc-br-cat" + (openable ? "" : " lc-br-cat-empty") }, /* @__PURE__ */ React.createElement("button", { type: "button", className: "lc-br-cat-row", onClick: () => {
-        toggleCat(c.key);
-      } }, /* @__PURE__ */ React.createElement("span", { className: "lc-br-chev" + (open ? " lc-br-chev-on" : "") }, "\u25B8"), /* @__PURE__ */ React.createElement("i", { style: { background: c.color } }), /* @__PURE__ */ React.createElement("span", { className: "lc-br-cat-label" }, catLabel(c.key)), /* @__PURE__ */ React.createElement("span", { className: "lc-br-cat-count" }, tr("browser.items", { n: count })), /* @__PURE__ */ React.createElement("span", { className: "lc-br-tokens" }, "\u2248" + fmt3(v)), /* @__PURE__ */ React.createElement("span", { className: "lc-br-pct" }, total > 0 ? Math.round(v / total * 100) + "%" : "")), open ? /* @__PURE__ */ React.createElement("div", { className: "lc-br-body" }, catBody(c.key)) : null);
+      return /* @__PURE__ */ React.createElement("div", { key: c.key, className: "lc-br-cat" + (openable ? "" : " lc-br-cat-empty") }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "lc-br-cat-row" + (linked && props.hoverKey === c.key ? " lc-br-cat-on" : ""),
+          onMouseEnter: linked ? () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey(c.key);
+          } : void 0,
+          onMouseLeave: linked ? () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey(null);
+          } : void 0,
+          onClick: () => {
+            toggleCat(c.key);
+          }
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "lc-br-chev" + (open ? " lc-br-chev-on" : "") }, "\u25B8"),
+        /* @__PURE__ */ React.createElement("i", { style: { background: c.color } }),
+        /* @__PURE__ */ React.createElement("span", { className: "lc-br-cat-label" }, catLabel(c.key)),
+        /* @__PURE__ */ React.createElement("span", { className: "lc-br-cat-count" }, t("browser.items", { n: count })),
+        /* @__PURE__ */ React.createElement("span", { className: "lc-br-tokens" }, "\u2248" + fmt3(v)),
+        /* @__PURE__ */ React.createElement("span", { className: "lc-br-pct" }, total > 0 ? Math.round(v / total * 100) + "%" : "")
+      ), open ? /* @__PURE__ */ React.createElement("div", { className: "lc-br-body" }, catBody(c.key)) : null);
     })));
   };
 }
@@ -1158,22 +1222,18 @@ function fmt(n) {
   return String(Math.round(n));
 }
 function fmtTime(t) {
-  const d = new Date(t);
-  function p(x) {
-    return (x < 10 ? "0" : "") + x;
-  }
-  return p(d.getHours()) + ":" + p(d.getMinutes()) + ":" + p(d.getSeconds());
+  return new Date(t).toLocaleTimeString("en-GB", { hour12: false });
 }
 
 // src/client/components/events.tsx
 var EVENT_ICONS = { compaction: "\u2702", prune: "\u2702", inject: "\uFF0B", model: "\u21C4" };
-function makeEventText(t, tr) {
+function makeEventText(t) {
   function eventLabel(ev) {
-    if (ev.kind === "compaction") return tr("ev.compaction", { n: ev.count || 0 });
+    if (ev.kind === "compaction") return t("ev.compaction", { n: ev.count || 0 });
     if (ev.kind === "prune") return t("ev.prune");
-    if (ev.kind === "model") return tr("ev.model", { a: ev.from || "?", b: ev.to || "?" });
+    if (ev.kind === "model") return t("ev.model", { a: ev.from || "?", b: ev.to || "?" });
     if (ev.kind === "inject") {
-      if (ev.sub === "skill") return tr("ev.skill", { name: ev.name || "?" });
+      if (ev.sub === "skill") return t("ev.skill", { name: ev.name || "?" });
       const base = t("form." + (ev.form || "context"));
       return ev.name ? base + " \xB7 " + ev.name : base;
     }
@@ -1228,7 +1288,7 @@ function makeEventList(kit) {
 
 // src/client/meta.ts
 var PLUGIN_NAME = "dsh-context";
-var PLUGIN_VERSION = true ? "0.13.0" : "0.0.0-dev";
+var PLUGIN_VERSION = true ? "0.15.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\//, "");
 
@@ -1276,7 +1336,7 @@ function makePluginInfo(kit) {
     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)));
+    return /* @__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("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)));
   };
 }
 
@@ -1296,7 +1356,7 @@ function makeStatsBoard(kit) {
       else if (ev.kind === "inject") injects++;
     }
     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))));
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col lc-col-stats" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, 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))));
   };
 }
 
@@ -1304,7 +1364,7 @@ function makeStatsBoard(kit) {
 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 { t, fmt: fmt3, fmtTime: fmtTime2, catLabel } = kit;
   const StackedBar = makeStackedBar(kit);
   const Legend = makeLegend(kit);
   const TrendChart = makeTrendChart(kit);
@@ -1388,9 +1448,9 @@ 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" }, 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-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" }, " " + 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(
+    }), 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(
       "button",
       {
         className: "lc-gran-btn" + (granularity === "step" ? " lc-gran-on" : ""),
@@ -1429,9 +1489,12 @@ function makeContextView(ctx, kit) {
         headers,
         useSession: props.useSession,
         loadOlderHistory: props.loadOlderHistory,
-        previewSeq: hoveredSeq
+        previewSeq: hoveredSeq,
+        pinSeq: pinnedReq !== null ? pinnedReq.seq : null,
+        hoverKey: hoverCat,
+        onHoverKey: setHoverCat
       }
-    ))), /* @__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(
+    ))), /* @__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",
       {
         key: k,
@@ -1441,16 +1504,15 @@ function makeContextView(ctx, kit) {
         }
       },
       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")));
+    )))), /* @__PURE__ */ React.createElement(EventList, { events: shownEvents })), /* @__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("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")));
   };
 }
 
 // src/client/viewkit.ts
 function makeViewKit(t) {
-  const { eventLabel, eventAt } = makeEventText(t, t);
+  const { eventLabel, eventAt } = makeEventText(t);
   return {
     t,
-    tr: t,
     fmt,
     fmtTime,
     catLabel: (key) => t("cat." + key),

package/lib/index.js

@@ -18,14 +18,7 @@ var Config = z.preprocess(
   }).strict()
 );
 function resolveBounds(config) {
-  const parsed = Config.parse(config ?? {});
-  return {
-    maxRequestSteps: parsed.maxRequestSteps,
-    maxKeptTurns: parsed.maxKeptTurns,
-    maxEvents: parsed.maxEvents,
-    maxNodes: parsed.maxNodes,
-    maxArchiveNodes: parsed.maxArchiveNodes
-  };
+  return Config.parse(config ?? {});
 }
 
 // src/host/headers.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-context",
-  "version": "0.13.0",
+  "version": "0.15.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,7 +59,6 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "playwright-core": "^1.62.1",
     "zod": "^4.4.3"
   },
   "devDependencies": {
@@ -70,6 +70,7 @@
     "@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"