dsh-context 0.11.1 → 0.12.0

package/README.md

@@ -53,7 +53,7 @@ A six-color stacked bar scaled against the model's full context window (the gray
 
 ### 📈 History — watch the window grow (and get compacted)
 
-One stacked bar per model request, finer than per-message. Toggle between **Turn** and **Step** granularity, scroll sideways through the session, hover any bar for a quick tooltip, and click to pin the full breakdown — including provider-reported actual prompt/output tokens next to the estimate. **✂ marks where compaction or pruning happened** — watch the bars drop:
+One stacked bar per model request, finer than per-message. Toggle between **Turn** and **Step** granularity, scroll sideways through the session, hover any bar for a quick tooltip, and click to pin the full breakdown — including provider-reported actual prompt/output tokens next to the estimate. **Hovering a bar also drives the Context browser beside it** — the browser previews that step's assembled context in real time as you scrub across the history. **✂ marks where compaction or pruning happened** — watch the bars drop:
 
 ![History chart with a pinned request](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/history-detail.png)
 
@@ -73,6 +73,17 @@ Every compaction, tool-output prune, skill or plugin context injection, and mode
 
 The exact message list the model sees right now, newest first, with a per-message token cost.
 
+### 🧭 Context browser — open the box of any request
+
+Pick **Live (next request)** or any retained step from the picker, and browse what that request was actually assembled from:
+
+![Context browser](https://raw.githubusercontent.com/bowenliang123/dsh-context/main/docs/context-browser.png)
+
+Six collapsible category sections (system prompt, tool schemas, user messages, injected context, assistant replies, tool results) expand into one row per element — each with its token price — and every element expands again into its **actual content**: the full system prompt, each tool's description and JSON schema, message text, reasoning, tool-call arguments, and tool outputs.
+
+- **Linked with the history chart** — hover any bar in the History card and the browser previews that step instantly; leave the chart and it returns to your own pick. Keep a category open while scrubbing to compare one category across steps.
+- **Honest about coverage** — steps before a compaction are reconstructed from the removed-message archive, and the card says so when a step's makeup is only approximate. Elements older than the loaded chat window page older history in automatically when you expand them, and live injections (AGENTS.md, session-start context, …) are always listed — never a token sum without its items.
+
 ## Like it?
 
 If `dsh-context` helped you understand what your agent is carrying around, a ⭐ on [GitHub](https://github.com/bowenliang123/dsh-context) is much appreciated — and issues/PRs are welcome!

package/lib/client.js

@@ -82,7 +82,19 @@ var DICT_ZH = {
   "node.nonText": "(\u975E\u6587\u672C\u6D88\u606F)",
   "node.snapshot": "\u5FEB\u7167: ",
   "cmd.desc": "\u67E5\u770B\u4E0A\u4E0B\u6587\u7684\u6784\u6210\u548C\u53D8\u5316",
-  "cmd.close": "\u5173\u95ED"
+  "cmd.close": "\u5173\u95ED",
+  "browser.title": "\u4E0A\u4E0B\u6587\u6D4F\u89C8",
+  "browser.hint": "\u67E5\u770B\u5F53\u524D\u6216\u6307\u5B9A\u6B65\u9AA4\u5B9E\u9645\u7EC4\u88C5\u7684\u4E0A\u4E0B\u6587\u5185\u5BB9",
+  "browser.live": "\u5F53\u524D\uFF08\u4E0B\u4E00\u6B21\u8BF7\u6C42\uFF09",
+  "browser.liveNow": "\u5F53\u524D \xB7 \u4E0B\u4E00\u6B21\u8BF7\u6C42",
+  "browser.items": "{n} \u9879",
+  "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.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",
@@ -159,7 +171,19 @@ var DICT_EN = {
   "node.nonText": "(non-text message)",
   "node.snapshot": "snapshot: ",
   "cmd.desc": "View context makeup and how it evolves",
-  "cmd.close": "Close"
+  "cmd.close": "Close",
+  "browser.title": "Context browser",
+  "browser.hint": "browse what the live surface or a picked step was actually assembled from",
+  "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.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"
 };
 
 // src/client/modalStore.ts
@@ -276,6 +300,12 @@ function contextPressureOf(value) {
   if (value === null || value === void 0 || typeof value !== "object") return null;
   return 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;
+}
 
 // src/client/react.ts
 var React = require("react");
@@ -710,10 +740,6 @@ var STYLES = [
   ".lc-axis-mid { top: 69px; }",
   ".lc-axis-bot { top: 125px; }",
   ".lc-chart-scroll { position: relative; flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; }",
-  ".lc-chart-scroll::-webkit-scrollbar { height: 8px; }",
-  ".lc-chart-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 45%, transparent); border-radius: 4px; }",
-  ".lc-chart-scroll::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--dsw-alias-label-secondary) 70%, transparent); }",
-  ".lc-chart-scroll::-webkit-scrollbar-track { background: transparent; }",
   ".lc-chart-fade { position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2; }",
   ".lc-chart-fade-l { left: 0; background: linear-gradient(to right, var(--dsw-alias-bg-layer-1), transparent); }",
   ".lc-chart-fade-r { right: 0; background: linear-gradient(to left, var(--dsw-alias-bg-layer-1), transparent); }",
@@ -752,8 +778,16 @@ var STYLES = [
   ".lc-bar-fill { display: block; height: 100%; border-radius: 3px; }",
   ".lc-detail-num { width: 44px; text-align: right; }",
   ".lc-detail-pct { width: 34px; text-align: right; color: var(--dsw-alias-label-secondary); }",
-  ".lc-cols { display: flex; gap: 14px; flex-wrap: wrap; }",
+  // Section rows share one 14px vertical rhythm, owned by the ROW (flex gap
+  // covers the wrapped-row axis too), never by the cards inside: a card that
+  // IS a column (head, events/messages) drops its own bottom margin, and a
+  // card stacked inside a wrapper column (overview + trend) keeps its margin
+  // as the inner gap but the last one drops it — so every section boundary
+  // measures exactly one 14px, whichever way the flex wraps.
+  ".lc-cols { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }",
   ".lc-col { flex: 1; min-width: 280px; }",
+  ".lc-cols > .lc-card { margin-bottom: 0; }",
+  ".lc-col > .lc-card:last-child { margin-bottom: 0; }",
   // 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
@@ -761,7 +795,6 @@ var STYLES = [
   // `.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
@@ -811,9 +844,308 @@ var STYLES = [
   ".lc-modal-title { font-weight: 600; font-size: 14px; }",
   ".lc-modal-close { margin-left: auto; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; font-family: inherit; }",
   ".lc-modal-close:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); }",
-  ".lc-modal-trend { margin-top: 14px; }"
+  ".lc-modal-trend { margin-top: 14px; }",
+  // ---- Context browser card (progressive disclosure: category accordion ->
+  // element rows -> per-kind content) ----
+  ".lc-br-pick { margin-left: auto; font: inherit; font-size: 12px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 6px; max-width: 240px; }",
+  ".lc-br-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--dsw-alias-label-secondary); }",
+  ".lc-br-meta b { color: var(--dsw-alias-label-primary); }",
+  ".lc-br-meta .lc-actual { color: var(--dsw-alias-state-success-primary); }",
+  ".lc-br-note { margin-top: 8px; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
+  ".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-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; }",
+  ".lc-br-chev-on { transform: rotate(90deg); }",
+  ".lc-br-tokens { flex: none; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
+  ".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-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; }",
+  ".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; }"
 ].join("\n");
 
+// src/client/assemble.ts
+function headerAt(headers, seq) {
+  if (headers === null || headers.headers.length === 0) return null;
+  if (seq === null) return headers.headers[headers.headers.length - 1];
+  for (let i = headers.headers.length - 1; i >= 0; i--) {
+    if (headers.headers[i].seq < seq) return headers.headers[i];
+  }
+  return null;
+}
+function assemble(data, headers, seq) {
+  const live = seq === null;
+  let nodes;
+  if (live) {
+    nodes = data.nodes.slice();
+  } else {
+    const picked = [];
+    for (const n of data.nodes) {
+      if (n.seq < seq) picked.push(n);
+    }
+    for (const n of data.archive || []) {
+      if (n.seq < seq && n.gone !== void 0 && n.gone > seq) picked.push(n);
+    }
+    nodes = picked;
+  }
+  nodes.sort((a, b) => a.seq - b.seq);
+  let missingLive = 0;
+  if (data.droppedNodes > 0) {
+    if (live || data.surfaceFloor !== void 0 && seq > data.surfaceFloor) {
+      missingLive = data.droppedNodes;
+    }
+  }
+  const approximate = !live && data.archiveFloor !== void 0 && seq < data.archiveFloor;
+  return { live, header: headerAt(headers, seq), nodes, missingLive, approximate };
+}
+
+// src/client/components/nodes.tsx
+function makeNodeText(kit) {
+  const { t } = kit;
+  return function nodeText(n) {
+    if (n.cat === "tool") {
+      return t("node.toolResult") + (n.tool ? " \u2190 " + n.tool : "") + (n.err ? " \u26A0" : "");
+    }
+    if (n.skill) return "Skill: " + n.skill;
+    if (n.calls) return t("node.calls") + n.calls.join(", ");
+    if (n.text) return n.form === "snapshot" ? t("node.snapshot") + n.text : n.text;
+    if (n.cat === "assistant") return t("node.empty");
+    if (n.cat === "inject") return t("form." + (n.form || "context"));
+    return t("node.nonText");
+  };
+}
+function makeNodeList(kit) {
+  const { t, tr, fmt: fmt3, fmtTime: fmtTime2 } = kit;
+  const nodeText = makeNodeText(kit);
+  return function NodeList(props) {
+    if (props.nodes.length === 0) {
+      return /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("nodes.empty"));
+    }
+    const catColor = {};
+    for (const c of CATS) catColor[c.key] = c.color;
+    const rows = props.nodes.slice().reverse();
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-nodes" }, props.dropped > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-nodes-more" }, tr("nodes.more", { n: props.dropped })) : null, rows.map((n) => {
+      const text = nodeText(n);
+      return /* @__PURE__ */ React.createElement("div", { key: n.seq, className: "lc-node" }, /* @__PURE__ */ React.createElement("i", { style: { background: catColor[n.cat] || "#999" } }), /* @__PURE__ */ React.createElement("span", { className: "lc-node-preview", title: text }, text), typeof n.time === "number" ? /* @__PURE__ */ React.createElement("span", { className: "lc-node-time" }, fmtTime2(n.time)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-node-tokens" }, fmt3(n.tokens)));
+    }));
+  };
+}
+
+// src/client/components/browser.tsx
+function RawBlocks(props) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.blocks.map((b, i) => {
+    const blk = b;
+    if (blk !== null && typeof blk === "object" && (blk.type === "text" || blk.type === "reasoning") && typeof blk.text === "string") {
+      return /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre" + (blk.type === "reasoning" ? " lc-br-dim" : "") }, blk.text);
+    }
+    if (blk !== null && typeof blk === "object" && blk.type === "tool-result" && Array.isArray(blk.content)) {
+      return /* @__PURE__ */ React.createElement(RawBlocks, { key: i, blocks: blk.content });
+    }
+    return /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre lc-br-dim" }, JSON.stringify(b, null, 2));
+  }));
+}
+function NodeContent(props) {
+  const { node, conv } = props;
+  if (conv === void 0) {
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, node.text !== void 0 && node.text !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre" }, node.text) : null, /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, props.hint));
+  }
+  if (conv.kind === "assistant" && Array.isArray(conv.blocks)) {
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, conv.blocks.map((b, i) => {
+      const blk = b;
+      if (blk.kind === "text" && typeof blk.text === "string") {
+        return /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre" }, blk.text);
+      }
+      if (blk.kind === "reasoning" && typeof blk.text === "string") {
+        return /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre lc-br-dim" }, blk.text);
+      }
+      if (blk.kind === "tool-call") {
+        return /* @__PURE__ */ React.createElement("div", { key: i, className: "lc-br-call" }, /* @__PURE__ */ React.createElement("span", { className: "lc-br-tag" }, "\u2192 " + String(blk.name ?? "?")), typeof blk.argsRaw === "string" && blk.argsRaw !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, blk.argsRaw) : null);
+      }
+      return null;
+    }));
+  }
+  if (conv.kind === "tool-result") {
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, conv.call != null ? /* @__PURE__ */ React.createElement("div", { className: "lc-br-call" }, /* @__PURE__ */ React.createElement("span", { className: "lc-br-tag" }, "\u2190 " + conv.call.name), conv.call.argsRaw !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, conv.call.argsRaw) : null) : null, Array.isArray(conv.content) ? /* @__PURE__ */ React.createElement(RawBlocks, { blocks: conv.content }) : null);
+  }
+  if (conv.kind === "compaction") {
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, typeof conv.summary === "string" && conv.summary !== "" ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre" }, conv.summary) : null);
+  }
+  if (Array.isArray(conv.content)) {
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement(RawBlocks, { blocks: conv.content }));
+  }
+  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 nodeText = makeNodeText(kit);
+  const catColor = {};
+  for (const c of CATS) catColor[c.key] = c.color;
+  const MAX_AUTO_PAGES = 20;
+  return function ContextBrowser(props) {
+    var _a;
+    const { data, headers } = props;
+    const [sel, setSel] = React.useState("live");
+    const [openCat, setOpenCat] = React.useState(null);
+    const [openElem, setOpenElem] = React.useState(null);
+    const convNodes = typeof props.useSession === "function" ? props.useSession((s) => s.nodes) : void 0;
+    const bySeq = React.useMemo(() => {
+      const m = /* @__PURE__ */ new Map();
+      for (const n of convNodes ?? []) m.set(n.seq, n);
+      return m;
+    }, [convNodes]);
+    const hasMore = typeof props.useSession === "function" ? props.useSession((s) => s.hasMore === true) : false;
+    const loadingOlder = typeof props.useSession === "function" ? props.useSession((s) => s.loadingOlder === true) : false;
+    const openSeq = openElem !== null && openElem.startsWith("n") ? Number(openElem.slice(1)) : null;
+    const missingSeq = openSeq !== null && !bySeq.has(openSeq) ? openSeq : null;
+    const [exhausted, setExhausted] = React.useState(false);
+    const pagesRef = React.useRef(0);
+    React.useEffect(() => {
+      pagesRef.current = 0;
+      setExhausted(false);
+    }, [openElem]);
+    const loadOlderHistory = props.loadOlderHistory;
+    React.useEffect(() => {
+      if (missingSeq === null || !hasMore || loadingOlder || exhausted) return;
+      if (loadOlderHistory === void 0) return;
+      if (pagesRef.current >= MAX_AUTO_PAGES) {
+        setExhausted(true);
+        return;
+      }
+      pagesRef.current += 1;
+      void loadOlderHistory();
+    }, [missingSeq, hasMore, loadingOlder, exhausted, bySeq, loadOlderHistory]);
+    React.useEffect(() => {
+      if (!hasMore && missingSeq !== null && !exhausted) setExhausted(true);
+    }, [hasMore, missingSeq, exhausted]);
+    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 view = assemble(data, headers, seq);
+    const breakdown = req !== null ? req : data.current;
+    const parts = partsOf(breakdown);
+    const total = breakdown.total;
+    const pick = (v) => {
+      setSel(v === "live" ? "live" : Number(v));
+      setOpenCat(null);
+      setOpenElem(null);
+    };
+    const byCat = {};
+    for (const n of view.nodes) (byCat[_a = n.cat] ?? (byCat[_a] = [])).push(n);
+    const toolCount = (c) => {
+      if (c === "system") return view.header !== null && view.header.system !== void 0 ? 1 : 0;
+      if (c === "tools") return view.header !== null ? view.header.tools.length : 0;
+      return byCat[c]?.length ?? 0;
+    };
+    const toggleCat = (c) => {
+      const openable = toolCount(c) > 0 || (c === "system" || c === "tools") && view.header === null;
+      if (!openable) return;
+      setOpenCat(openCat === c ? null : c);
+      setOpenElem(null);
+    };
+    const toggleElem = (key) => setOpenElem(openElem === key ? null : key);
+    const elemRow = (key, tag, preview, tokens, time, body) => {
+      const open = openElem === key;
+      return /* @__PURE__ */ React.createElement("div", { key, className: "lc-br-elem" + (open ? " lc-br-elem-on" : "") }, /* @__PURE__ */ React.createElement("button", { type: "button", className: "lc-br-elem-row", onClick: () => {
+        toggleElem(key);
+      } }, /* @__PURE__ */ React.createElement("span", { className: "lc-br-chev" + (open ? " lc-br-chev-on" : "") }, "\u25B8"), tag !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-br-tag" }, tag) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-br-preview" }, preview), time !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-br-time" }, fmtTime2(time)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-br-tokens" }, "\u2248" + fmt3(tokens))), open ? body : null);
+    };
+    const catBody = (c) => {
+      if (c === "system") {
+        if (view.header === null) return /* @__PURE__ */ React.createElement("div", { className: "lc-br-note" }, t(headers === null ? "browser.noHeader" : "browser.noEpoch"));
+        const system = view.header.system;
+        if (system === void 0) return null;
+        return elemRow(
+          "sys",
+          null,
+          system.replace(/\s+/g, " ").trim().slice(0, 80),
+          breakdown.system,
+          void 0,
+          /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre" }, system))
+        );
+      }
+      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) : "";
+          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)
+          );
+        });
+      }
+      const nodes = byCat[c] ?? [];
+      return nodes.map((n) => {
+        let tag = null;
+        let preview = nodeText(n);
+        if (n.cat === "tool") {
+          tag = (n.tool ?? "?") + (n.err ? " \u26A0" : "");
+          preview = t("node.toolResult") + (n.err ? " \u26A0" : "");
+        } else if (n.cat === "inject" && !n.skill) {
+          tag = t("form." + (n.form || "context"));
+          if (n.text !== void 0 && n.text !== "") {
+            preview = n.form === "snapshot" ? t("node.snapshot") + n.text : n.text;
+          }
+        }
+        return elemRow(
+          "n" + n.seq,
+          tag,
+          preview,
+          n.tokens,
+          n.time,
+          /* @__PURE__ */ React.createElement(
+            NodeContent,
+            {
+              node: n,
+              conv: bySeq.get(n.seq),
+              hint: bySeq.get(n.seq) === void 0 && awaiting ? t("browser.loading") : t("browser.noContent")
+            }
+          )
+        );
+      });
+    };
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("browser.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("browser.hint")), /* @__PURE__ */ React.createElement(
+      "select",
+      {
+        className: "lc-br-pick",
+        value: seq === null ? "live" : String(seq),
+        onChange: (e) => {
+          pick(e.target.value);
+        }
+      },
+      /* @__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) => {
+      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);
+    })));
+  };
+}
+
 // src/client/components/events.tsx
 var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 
@@ -893,37 +1225,9 @@ function makeEventList(kit) {
   };
 }
 
-// src/client/components/nodes.tsx
-function makeNodeList(kit) {
-  const { t, tr, fmt: fmt3, fmtTime: fmtTime2 } = kit;
-  function nodeText(n) {
-    if (n.cat === "tool") {
-      return t("node.toolResult") + (n.tool ? " \u2190 " + n.tool : "") + (n.err ? " \u26A0" : "");
-    }
-    if (n.skill) return "Skill: " + n.skill;
-    if (n.calls) return t("node.calls") + n.calls.join(", ");
-    if (n.text) return n.form === "snapshot" ? t("node.snapshot") + n.text : n.text;
-    if (n.cat === "assistant") return t("node.empty");
-    if (n.cat === "inject") return t("form." + (n.form || "context"));
-    return t("node.nonText");
-  }
-  return function NodeList(props) {
-    if (props.nodes.length === 0) {
-      return /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("nodes.empty"));
-    }
-    const catColor = {};
-    for (const c of CATS) catColor[c.key] = c.color;
-    const rows = props.nodes.slice().reverse();
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-nodes" }, props.dropped > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-nodes-more" }, tr("nodes.more", { n: props.dropped })) : null, rows.map((n) => {
-      const text = nodeText(n);
-      return /* @__PURE__ */ React.createElement("div", { key: n.seq, className: "lc-node" }, /* @__PURE__ */ React.createElement("i", { style: { background: catColor[n.cat] || "#999" } }), /* @__PURE__ */ React.createElement("span", { className: "lc-node-preview", title: text }, text), typeof n.time === "number" ? /* @__PURE__ */ React.createElement("span", { className: "lc-node-time" }, fmtTime2(n.time)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-node-tokens" }, fmt3(n.tokens)));
-    }));
-  };
-}
-
 // src/client/meta.ts
 var PLUGIN_NAME = "dsh-context";
-var PLUGIN_VERSION = true ? "0.11.1" : "0.0.0-dev";
+var PLUGIN_VERSION = true ? "0.12.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\//, "");
 
@@ -1008,10 +1312,12 @@ function makeContextView(ctx, kit) {
   const NodeList = makeNodeList(kit);
   const StatsBoard = makeStatsBoard(kit);
   const PluginInfo = makePluginInfo(kit);
+  const ContextBrowser = makeContextBrowser(kit, StackedBar);
   return function ContextView(props) {
     const sessionId = props.sessionId;
     const data = typeof props.useProjection === "function" ? timelineOf(props.useProjection("contextTimeline")) : null;
     const pressure = typeof props.useProjection === "function" ? contextPressureOf(props.useProjection("contextPressure")) : null;
+    const headers = typeof props.useProjection === "function" ? headersOf(props.useProjection("contextHeaders")) : null;
     const [selectedSeq, setSelectedSeq] = React.useState(null);
     const [hoveredSeq, setHoveredSeq] = React.useState(null);
     const [hoverTurn, setHoverTurn] = React.useState(null);
@@ -1081,7 +1387,7 @@ function makeContextView(ctx, kit) {
       }
     }
     const head = headlineOf(data, pressure);
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement("div", { className: "lc-cols 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("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("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",
@@ -1115,7 +1421,16 @@ 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("div", { className: "lc-kinds" }, EVENT_KINDS.map((k) => /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(RequestDetail, { request: activeReq, marker: activeReq !== null ? markerOf(activeReq) : void 0 })))), /* @__PURE__ */ React.createElement("div", { className: "lc-col" }, /* @__PURE__ */ React.createElement(
+      ContextBrowser,
+      {
+        data,
+        headers,
+        useSession: props.useSession,
+        loadOlderHistory: props.loadOlderHistory,
+        previewSeq: hoveredSeq
+      }
+    ))), /* @__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,
@@ -1161,6 +1476,20 @@ function apply(ctx) {
   }, "dsh-context: styles");
   const kit = makeViewKit(t);
   const ContextView = makeContextView(ctx, kit);
+  ctx.effect(() => {
+    const noop = () => {
+    };
+    const sessions = ctx.get("sessions");
+    if (sessions === void 0 || typeof sessions.provide !== "function") return noop;
+    try {
+      return sessions.provide({
+        props: ["loadOlderHistory"],
+        resolve: (binding) => ({ props: { loadOlderHistory: () => binding.session.loadOlder() } })
+      });
+    } catch {
+      return noop;
+    }
+  }, "dsh-context: loadOlderHistory prop");
   ctx.slots.inject("conversation.view", () => {
     return ctx.slots.register(
       // order 20 renders right of Chat (0) and Trajectory (10); the locale