dsh-context 0.15.0 → 0.17.0

package/lib/client.js

@@ -20,6 +20,7 @@ var DICT_ZH = {
   "overview.free": "\u5269\u4F59\u7A97\u53E3",
   "overview.used": "\u4E0A\u4E0B\u6587\u5DF2\u7528",
   "overview.ofUsed": "\u5360\u5DF2\u7528\u4E0A\u4E0B\u6587",
+  "overview.compactReserve": "\u81EA\u52A8\u538B\u7F29\u9884\u7559\uFF1A\u5360\u7528\u8FBE {pct}% \u7A97\u53E3\u65F6\u89E6\u53D1\u538B\u7F29\uFF0C\u6B64\u533A\u57DF\u4E00\u822C\u4E0D\u5B9E\u9645\u5360\u7528",
   "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",
   "stats.turns": "\u8F6E\u6B21",
@@ -27,6 +28,7 @@ var DICT_ZH = {
   "stats.injects": "\u6CE8\u5165",
   "stats.compactions": "\u538B\u7F29",
   "stats.prunes": "\u526A\u679D",
+  "stats.cacheHit": "\u7F13\u5B58\u547D\u4E2D",
   "plugin.title": "\u63D2\u4EF6\u4FE1\u606F",
   "plugin.hint": "The best DSH context plugin \u2B50",
   "plugin.name": "\u63D2\u4EF6",
@@ -80,7 +82,7 @@ var DICT_ZH = {
   "node.empty": "(\u7A7A\u56DE\u590D)",
   "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.desc": "\u67E5\u770B\u5F53\u524D\u4E0A\u4E0B\u6587\u6784\u6210\uFF0C\u6D4F\u89C8\u5404\u6B65\u9AA4\u7EC4\u6210",
   "cmd.close": "\u5173\u95ED",
   "browser.title": "\u4E0A\u4E0B\u6587\u6D4F\u89C8\u5668",
   "browser.live": "\u5F53\u524D\uFF08\u4E0B\u4E00\u6B21\u8BF7\u6C42\uFF09",
@@ -88,11 +90,20 @@ var DICT_ZH = {
   "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.deltaHint": "\u5BF9\u6BD4\u4E0A\u8F6E\u672B\u6B65\u7684\u53D8\u52A8",
   "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\u8BCD / \u5DE5\u5177\u5B9A\u4E49\uFF09\u4E0D\u5728\u4FDD\u7559\u8303\u56F4\u5185",
   "browser.noContent": "\u5B8C\u6574\u5185\u5BB9\u4E0D\u5728\u5F53\u524D\u52A0\u8F7D\u7684\u6D88\u606F\u7A97\u53E3\u5185\uFF08\u5728\u804A\u5929\u9875\u52A0\u8F7D\u66F4\u65E9\u5386\u53F2\u540E\u53EF\u67E5\u770B\uFF09",
   "browser.loading": "\u6B63\u5728\u4ECE\u66F4\u65E9\u7684\u4F1A\u8BDD\u5386\u53F2\u52A0\u8F7D\u5B8C\u6574\u5185\u5BB9\u2026",
-  "browser.preview": "\u9884\u89C8"
+  "browser.preview": "\u9884\u89C8",
+  // Tool schema browser card: parsed parameter table sits above the (collapsed
+  // by default) raw JSON so the common case — skimming arguments — stays
+  // scannable; the JSON is still one click away for the full payload.
+  "tool.desc": "\u63CF\u8FF0",
+  "tool.params": "\u53C2\u6570",
+  "tool.paramsEmpty": "\uFF08\u65E0\u53C2\u6570\uFF09",
+  "tool.jsonToggle": "\u67E5\u770B\u539F\u59CB JSON",
+  "tool.jsonHide": "\u6536\u8D77"
 };
 var DICT_EN = {
   "tab": "Context",
@@ -107,6 +118,7 @@ var DICT_EN = {
   "overview.free": "Free Window",
   "overview.used": "of context used",
   "overview.ofUsed": "of used context",
+  "overview.compactReserve": "Auto-compaction reserve: auto-compaction triggers at {pct}% of the window \u2014 this area is normally kept as headroom, not actually used",
   "stats.title": "Context Stats",
   "stats.hint": "Over the retained history window (same as the History chart)",
   "stats.turns": "Turns",
@@ -114,6 +126,7 @@ var DICT_EN = {
   "stats.injects": "Injections",
   "stats.compactions": "Compactions",
   "stats.prunes": "Prunes",
+  "stats.cacheHit": "Cache Hits",
   "plugin.title": "Plugin Info",
   "plugin.hint": "The best DSH context plugin \u2B50",
   "plugin.name": "Plugin",
@@ -167,7 +180,7 @@ var DICT_EN = {
   "node.empty": "(empty reply)",
   "node.nonText": "(non-text message)",
   "node.snapshot": "Snapshot: ",
-  "cmd.desc": "View context makeup and how it evolves",
+  "cmd.desc": "View current context makeup, browse per-step composition",
   "cmd.close": "Close",
   "browser.title": "Context Browser",
   "browser.live": "Live (Next Request)",
@@ -175,11 +188,20 @@ var DICT_EN = {
   "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.deltaHint": "vs previous turn",
   "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"
+  "browser.preview": "Preview",
+  // Tool schema browser card: parsed parameter table sits above the (collapsed
+  // by default) raw JSON so the common case — skimming arguments — stays
+  // scannable; the JSON is still one click away for the full payload.
+  "tool.desc": "Description",
+  "tool.params": "Parameters",
+  "tool.paramsEmpty": "(no parameters)",
+  "tool.jsonToggle": "View Raw JSON",
+  "tool.jsonHide": "Collapse"
 };
 
 // src/client/modalStore.ts
@@ -294,343 +316,606 @@ function asRecord(value) {
 }
 var timelineOf = (value) => asRecord(value);
 var contextPressureOf = (value) => asRecord(value);
+var tokenUsageOf = (value) => asRecord(value);
 function headersOf(value) {
   const headers = asRecord(value);
   return headers !== null && Array.isArray(headers.headers) ? headers : null;
 }
 
+// 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/react.ts
 var React = require("react");
 var h = React.createElement;
 
-// src/client/components/requestDetail.tsx
-function makeRequestDetail(kit, StackedBar) {
-  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 ? 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, 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) + "%" : ""));
-    })));
-  };
-}
-
-// src/client/components/stackedBar.tsx
-function makeStackedBar(kit) {
-  const { t, fmt: fmt3, catLabel } = kit;
-  return function StackedBar(props) {
-    let total = 0;
-    for (const p of props.parts) total += p.value;
-    const scale = props.max !== void 0 && props.max > total ? props.max : total;
-    const free = props.max !== void 0 && props.max > total ? props.max - total : 0;
-    const usedPct = scale > 0 ? total / scale * 100 : 0;
-    const hovering = props.hoverKey !== null && props.hoverKey !== void 0;
-    const showBox = free > 0 && hovering;
-    let tip = null;
-    if (props.hoverKey !== null && props.hoverKey !== void 0) {
-      if (props.hoverKey === "free" && free > 0) {
-        const pct = scale > 0 ? free / scale * 100 : 0;
-        tip = {
-          text: t("overview.free") + " " + fmt3(free) + " (" + Math.round(pct) + "%)",
-          leftPct: Math.max(12, Math.min(total / scale * 100 + pct / 2, 88))
-        };
-      } else {
-        let acc = 0;
-        for (const p of props.parts) {
-          const pct = scale > 0 ? p.value / scale * 100 : 0;
-          if (p.key === props.hoverKey && p.value > 0) {
-            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) + "%) " + t("overview.ofUsed"),
-              leftPct: Math.max(12, Math.min(acc + pct / 2, 88))
-            };
-            break;
-          }
-          acc += pct;
-        }
-      }
+// 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" : "");
     }
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-stacked-wrap" }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "lc-stacked" + (hovering ? " lc-stacked-dim" : ""),
-        style: { height: (props.height || 14) + "px" },
-        onMouseLeave: () => {
-          if (props.onHoverKey !== void 0) props.onHoverKey(null);
-        }
-      },
-      total > 0 ? props.parts.map((p) => {
-        if (!p.value) return null;
-        const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
-        return /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            key: p.key,
-            className: "lc-stacked-seg" + (on ? " lc-stacked-seg-on" : ""),
-            style: { width: p.value / scale * 100 + "%", background: p.color },
-            onMouseEnter: () => {
-              if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
-            }
-          }
-        );
-      }) : null,
-      free > 0 ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: "free",
-          className: "lc-stacked-free" + (props.hoverKey === "free" ? " lc-stacked-free-on" : ""),
-          style: { width: free / scale * 100 + "%" },
-          onMouseEnter: () => {
-            if (props.onHoverKey !== void 0) props.onHoverKey("free");
-          }
-        }
-      ) : 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);
+    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 makeLegend(kit) {
-  const { t, fmt: fmt3, catLabel } = kit;
-  return function Legend(props) {
-    let total = 0;
-    for (const p of props.parts) total += p.value;
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-legend" }, props.parts.map((p) => {
-      const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          key: p.key,
-          className: "lc-chip" + (on ? " lc-chip-on" : ""),
-          title: t("overview.ofUsed"),
-          onMouseEnter: () => {
-            if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
-          },
-          onMouseLeave: () => {
-            if (props.onHoverKey !== void 0) props.onHoverKey(null);
-          }
-        },
-        /* @__PURE__ */ React.createElement("i", { style: { background: p.color } }),
-        catLabel(p.key) + " \u2248" + fmt3(p.value),
-        total > 0 ? /* @__PURE__ */ React.createElement("em", null, Math.round(p.value / total * 100) + "%") : null
-      );
+function makeNodeList(kit) {
+  const { t, 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" }, 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)));
     }));
   };
 }
 
-// src/client/components/trendChart.tsx
-function aggregateByTurn(requests) {
-  const out = [];
-  let runSteps = 0;
-  for (const req of requests) {
-    const last = out.length > 0 ? out[out.length - 1] : null;
-    if (last !== null && (last.turn ?? 0) === (req.turn ?? 0)) {
-      runSteps++;
-      out[out.length - 1] = { ...req, stepCount: runSteps };
-    } else {
-      runSteps = 1;
-      out.push({ ...req, stepCount: 1 });
-    }
+// src/client/components/browser.tsx
+function unionTypesOf(p) {
+  const branches = [];
+  if (Array.isArray(p.anyOf)) branches.push(...p.anyOf);
+  if (Array.isArray(p.oneOf)) branches.push(...p.oneOf);
+  if (branches.length === 0) return null;
+  const parts = [];
+  for (const b of branches) {
+    if (b !== null && typeof b === "object") parts.push(typeOf(b));
   }
-  return out;
+  return parts.length > 0 ? parts.join(" | ") : null;
 }
-function attachMarkers(requests, events) {
-  const markers = new Array(requests.length);
-  for (const ev of events) {
-    if (ev.kind !== "compaction" && ev.kind !== "prune") continue;
-    for (let r = 0; r < requests.length; r++) {
-      if (requests[r].seq >= ev.seq) {
-        if (markers[r] === void 0) markers[r] = ev;
-        break;
+function typeOf(p) {
+  const u = unionTypesOf(p);
+  if (u !== null) return u;
+  const t = p.type;
+  if (t === "array") {
+    const items = p.items;
+    if (items !== null && typeof items === "object") {
+      const inner = typeOf(items);
+      return "array<" + inner + ">";
+    }
+    return "array";
+  }
+  if (typeof t === "string") {
+    if (t === "object") {
+      const props = p.properties;
+      if (props !== null && typeof props === "object" && Object.keys(props).length > 0) {
+        return "object{" + Object.keys(props).length + "}";
       }
     }
+    if (Array.isArray(p.enum) && p.enum.length > 0) {
+      return t + " (enum)";
+    }
+    return t;
   }
-  return markers;
+  if (Array.isArray(p.enum) && p.enum.length > 0) return "(enum)";
+  return "unknown";
 }
-function makeTrendChart(kit) {
-  const { t, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
-  const CHART_H = 112;
-  const BAR_W = 14;
-  const BAR_GAP = 2;
-  const TURN_FILLS = ["rgba(128,128,128,0.12)", "rgba(128,128,128,0.26)"];
-  return function TrendChart(props) {
-    const requests = props.requests;
-    const markers = props.markers;
-    const anchorOf = (req) => typeof req.prompt === "number" && req.prompt > 0 && req.total > 0 ? req.prompt / req.total : 1;
-    const barTotalOf = (req) => typeof req.prompt === "number" && req.prompt > 0 ? req.prompt : req.total;
-    let maxTotal = 1;
-    for (const req of requests) {
-      const bt = barTotalOf(req);
-      if (bt > maxTotal) maxTotal = bt;
+function paramsOf(schema) {
+  if (schema === null || typeof schema !== "object") return null;
+  const s = schema;
+  const candidate = (v) => v !== null && typeof v === "object" ? v : null;
+  const nested = candidate(s.parameters) ?? candidate(s.input_schema) ?? candidate(s.inputSchema);
+  if (nested !== null) return nested;
+  if (s.type === "object" && s.properties !== void 0 && typeof s.properties === "object") {
+    return s;
+  }
+  return null;
+}
+function ParamRow(props) {
+  const typeLabel = typeOf(props.schema);
+  const desc = props.schema.description;
+  return /* @__PURE__ */ React.createElement("div", { className: "lc-ts-param-row" }, /* @__PURE__ */ React.createElement("span", { className: "lc-ts-param-name" }, props.name), /* @__PURE__ */ React.createElement("span", { className: "lc-ts-param-type" }, typeLabel), /* @__PURE__ */ React.createElement("span", { className: props.required ? "lc-ts-param-req" : "lc-ts-param-req-off" }, props.required ? "\u2713" : "\xB7"), typeof desc === "string" && desc !== "" ? /* @__PURE__ */ React.createElement("span", { className: "lc-ts-param-desc" }, desc) : null);
+}
+function ToolSchema(props) {
+  const [jsonOpen, setJsonOpen] = React.useState(false);
+  const params = React.useMemo(() => paramsOf(props.schema), [props.schema]);
+  const rows = React.useMemo(() => {
+    if (params === null) return [];
+    const props2 = params.properties;
+    if (props2 === null || typeof props2 !== "object") return [];
+    const req = Array.isArray(params.required) ? new Set(params.required.filter((x) => typeof x === "string")) : /* @__PURE__ */ new Set();
+    const out = [];
+    for (const k of Object.keys(props2)) {
+      const v = props2[k];
+      if (v === null || typeof v !== "object") continue;
+      out.push({ name: k, schema: v, required: req.has(k) });
     }
-    const groups = [];
-    for (const req of requests) {
-      let grp = groups.length > 0 ? groups[groups.length - 1] : null;
-      if (grp === null || grp.turn !== (req.turn ?? 0)) {
-        grp = { turn: req.turn ?? 0, count: 0, span: 0, agg: req.stepCount !== void 0 };
-        groups.push(grp);
+    return out;
+  }, [params]);
+  const schemaJson = React.useMemo(
+    () => props.schema !== void 0 ? JSON.stringify(props.schema, null, 2) : "",
+    [props.schema]
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.description !== void 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card-head" }, /* @__PURE__ */ React.createElement("b", null, props.labels.desc)), /* @__PURE__ */ React.createElement("pre", { className: "lc-ts-desc-body" }, props.description)) : null, params !== null && rows.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-ts-card-head" }, /* @__PURE__ */ React.createElement("b", null, props.labels.title), /* @__PURE__ */ React.createElement("span", { className: "lc-ts-card-count" }, rows.length)), rows.map((r) => /* @__PURE__ */ React.createElement(ParamRow, { key: r.name, name: r.name, schema: r.schema, required: r.required }))) : params !== null ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-params-empty" }, props.labels.empty) : null, schemaJson !== "" ? /* @__PURE__ */ React.createElement("div", { className: "lc-ts-json" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "lc-ts-json-toggle",
+      onClick: () => {
+        setJsonOpen((o) => !o);
       }
-      grp.count++;
-      grp.span += req.stepCount ?? 1;
+    },
+    (jsonOpen ? "\u25BE " : "\u25B8 ") + (jsonOpen ? props.labels.hide : props.labels.show)
+  ), jsonOpen ? /* @__PURE__ */ React.createElement("pre", { className: "lc-br-pre lc-br-dim" }, schemaJson) : null) : null);
+}
+function RawBlocks(props) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.blocks.map((b, i) => {
+    const blk = b;
+    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);
     }
-    const scrollRef = React.useRef(null);
-    const scrolledOnce = React.useRef(false);
-    const lastGranRef = React.useRef(props.granularity);
-    const [edges, setEdges] = React.useState({ left: false, right: false });
-    const edgesRef = React.useRef(edges);
-    const updateEdges = (el) => {
-      const left = el.scrollLeft > 4;
-      const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 4;
-      const prev = edgesRef.current;
-      if (prev.left === left && prev.right === right) return;
-      edgesRef.current = { left, right };
-      setEdges({ left, right });
-    };
-    React.useLayoutEffect(() => {
-      const el = scrollRef.current;
-      if (el === null) return;
-      if (props.granularity !== lastGranRef.current) {
-        lastGranRef.current = props.granularity;
-        scrolledOnce.current = false;
+    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 (!scrolledOnce.current) {
-        scrolledOnce.current = true;
-        el.scrollLeft = el.scrollWidth;
-      } else if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 24) {
-        el.scrollLeft = el.scrollWidth;
+      if (blk.kind === "reasoning" && typeof blk.text === "string") {
+        return /* @__PURE__ */ React.createElement("pre", { key: i, className: "lc-br-pre lc-br-dim" }, blk.text);
       }
-      updateEdges(el);
-    });
-    const tipOf = (req) => {
-      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) }) : "");
+      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 byCatOf(asm) {
+  var _a;
+  const m = {};
+  for (const n of asm.nodes) (m[_a = n.cat] ?? (m[_a] = [])).push(n);
+  return m;
+}
+function countOf(asm, c) {
+  if (c === "system") return asm.header !== null && asm.header.system !== void 0 ? 1 : 0;
+  if (c === "tools") return asm.header !== null ? asm.header.tools.length : 0;
+  return byCatOf(asm)[c]?.length ?? 0;
+}
+function lastOfTurn(requests, turn) {
+  for (let i = requests.length - 1; i >= 0; i--) if ((requests[i].turn ?? 0) === turn) return requests[i];
+  return null;
+}
+function makeContextBrowser(kit, StackedBar) {
+  const { t, 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) {
+    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 pinSeq = props.pinSeq;
+    React.useEffect(() => {
+      setSel(pinSeq === null || pinSeq === void 0 ? "live" : pinSeq);
+      setOpenCat(null);
+      setOpenElem(null);
+    }, [pinSeq]);
+    const toolFocus = props.toolFocus;
+    React.useEffect(() => {
+      if (toolFocus === null || toolFocus === void 0) return;
+      setSel("live");
+      setOpenCat("tools");
+      setOpenElem(toolFocus.tool !== void 0 ? "tool:" + toolFocus.tool : null);
+      if (props.onToolFocusHandled !== void 0) props.onToolFocusHandled();
+    }, [toolFocus, props.onToolFocusHandled]);
+    const awaiting = missingSeq !== null && !exhausted && loadOlderHistory !== void 0 && hasMore;
+    const requests = data.requests || [];
+    const hoverReq = props.previewSeq !== null && props.previewSeq !== void 0 ? requests.find((r) => r.seq === props.previewSeq) ?? null : null;
+    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);
+    const total = breakdown.total;
+    const pick = (v) => {
+      setSel(v === "live" ? "live" : Number(v));
+      setOpenCat(null);
+      setOpenElem(null);
     };
-    const hoveredIdx = props.hoveredSeq !== null ? requests.findIndex((r) => r.seq === props.hoveredSeq) : -1;
-    const hoveredReq = hoveredIdx >= 0 ? requests[hoveredIdx] : null;
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-chartrow" }, /* @__PURE__ */ React.createElement("div", { className: "lc-axis" }, /* @__PURE__ */ React.createElement("span", { className: "lc-axis-top" }, fmt3(maxTotal)), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-mid" }, fmt3(Math.round(maxTotal / 2))), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-bot" }, "0")), /* @__PURE__ */ React.createElement(
-      "div",
+    const refReq = req === null ? requests.length > 0 ? requests[requests.length - 1] : null : lastOfTurn(requests, (req.turn ?? 0) - 1);
+    const prevView = refReq !== null ? assemble(data, headers, refReq.seq) : null;
+    const byCat = byCatOf(view);
+    const toolCount = (c) => countOf(view, c);
+    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"));
+        const labels = {
+          desc: t("tool.desc"),
+          title: t("tool.params"),
+          empty: t("tool.paramsEmpty"),
+          show: t("tool.jsonToggle"),
+          hide: t("tool.jsonHide")
+        };
+        return view.header.tools.slice().sort((a, b) => b.tokens - a.tokens).map((tool) => {
+          return elemRow(
+            "tool:" + tool.name,
+            null,
+            tool.name,
+            tool.tokens,
+            void 0,
+            /* @__PURE__ */ React.createElement("div", { className: "lc-br-content" }, /* @__PURE__ */ React.createElement(ToolSchema, { description: tool.description, schema: tool.schema, labels }))
+          );
+        });
+      }
+      const nodes = (byCat[c] ?? []).slice().reverse();
+      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" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("browser.title")), /* @__PURE__ */ React.createElement("span", { className: "lc-br-hint" }, t("browser.deltaHint")), /* @__PURE__ */ React.createElement(
+      "select",
       {
-        className: "lc-chart-scroll" + (props.activeTurn !== null ? " lc-chart-dim" : ""),
-        ref: scrollRef,
-        onScroll: (e) => {
-          updateEdges(e.currentTarget);
+        className: "lc-br-pick",
+        value: seq === null ? "live" : String(seq),
+        onChange: (e) => {
+          pick(e.target.value);
         }
       },
-      edges.left ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-fade lc-chart-fade-l" }) : null,
-      /* @__PURE__ */ React.createElement(
-        "div",
+      /* @__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) }, 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 prevCount = prevView !== null ? countOf(prevView, c.key) : null;
+      const countDelta = prevCount !== null ? count - prevCount : null;
+      const prevTokens = refReq !== null ? refReq[c.key] || 0 : null;
+      const tokenDelta = prevTokens !== null ? v - prevTokens : null;
+      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",
         {
-          className: "lc-chart",
-          onMouseLeave: () => {
-            props.onHover(null);
+          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("div", { className: "lc-grid lc-grid-top" }),
-        /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-mid" }),
-        requests.map((req, i) => {
-          const marker = markers[i];
-          const markerAt = marker !== void 0 ? eventAt(marker) : null;
-          const selected = props.selectedSeq === req.seq;
-          const hovered = props.hoveredSeq === req.seq;
-          const inTurn = props.activeTurn !== null && (req.turn ?? 0) === props.activeTurn;
-          return /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              key: req.seq,
-              className: "lc-bar" + (selected ? " lc-bar-selected" : "") + (hovered ? " lc-bar-hovered" : "") + (inTurn ? " lc-bar-in-turn" : ""),
-              style: { width: BAR_W + "px" },
-              onClick: () => {
-                props.onSelect(selected ? null : req.seq);
-              },
-              onMouseEnter: () => {
-                props.onHover(req.seq);
-              }
-            },
-            marker !== void 0 ? /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: "lc-bar-marker",
-                title: "\u2702 " + (markerAt !== null ? markerAt + " \u2014 " : "") + eventLabel(marker)
-              },
-              "\u2702"
-            ) : null,
-            /* @__PURE__ */ React.createElement("div", { className: "lc-bar-stack" }, CATS.map((c) => {
-              const v = (req[c.key] || 0) * anchorOf(req);
-              if (!v) return null;
-              return /* @__PURE__ */ React.createElement("div", { key: c.key, style: { height: Math.max(1, Math.round(v / maxTotal * CHART_H)) + "px", background: c.color } });
-            }))
-          );
-        })
-      ),
-      hoveredReq !== null ? /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "lc-chart-tip",
-          style: { left: hoveredIdx * (BAR_W + BAR_GAP) + BAR_W / 2 + "px" }
-        },
-        tipOf(hoveredReq)
-      ) : null,
-      /* @__PURE__ */ React.createElement("div", { className: "lc-turns", onMouseLeave: () => {
-        props.onHoverTurn(null);
-      } }, groups.map((grp, gi) => {
-        const on = props.activeTurn === grp.turn;
-        const blockW = grp.agg ? BAR_W : grp.span * (BAR_W + BAR_GAP) - BAR_GAP;
+        /* @__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-count-grp" }, /* @__PURE__ */ React.createElement("span", { className: "lc-br-cat-count" }, t("browser.items", { n: count })), countDelta !== null && countDelta !== 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-br-delta lc-br-delta-" + (countDelta > 0 ? "up" : "down") }, (countDelta > 0 ? "+" : "") + countDelta) : null),
+        /* @__PURE__ */ React.createElement("span", { className: "lc-br-tokens-grp" }, tokenDelta !== null && tokenDelta !== 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-br-tdelta lc-br-tdelta-" + (tokenDelta > 0 ? "up" : "down") }, (tokenDelta > 0 ? "+" : "") + fmt3(tokenDelta)) : null, /* @__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/stackedBar.tsx
+var AUTO_COMPACT_RATIO = 0.8;
+function makeStackedBar(kit) {
+  const { t, fmt: fmt3, catLabel } = kit;
+  return function StackedBar(props) {
+    const [reserveOn, setReserveOn] = React.useState(false);
+    let total = 0;
+    for (const p of props.parts) total += p.value;
+    const scale = props.max !== void 0 && props.max > total ? props.max : total;
+    const free = props.max !== void 0 && props.max > total ? props.max - total : 0;
+    const usedPct = scale > 0 ? total / scale * 100 : 0;
+    const hovering = props.hoverKey !== null && props.hoverKey !== void 0;
+    const showBox = free > 0 && hovering;
+    const reserve = props.reserve !== void 0 && props.max !== void 0 && props.max > 0 ? props.reserve : null;
+    const reserveLeft = reserve !== null ? Math.round(props.max * reserve.ratio / scale * 1e3) / 10 : 0;
+    const reserveWidth = reserve !== null ? Math.round((1 - reserve.ratio) * props.max / scale * 1e3) / 10 : 0;
+    let tip = null;
+    if (reserveOn && reserve !== null) {
+      tip = {
+        text: reserve.label,
+        leftPct: Math.max(12, Math.min(reserveLeft + reserveWidth / 2, 88))
+      };
+    } else if (props.hoverKey !== null && props.hoverKey !== void 0) {
+      if (props.hoverKey === "free" && free > 0) {
+        const pct = scale > 0 ? free / scale * 100 : 0;
+        tip = {
+          text: t("overview.free") + " " + fmt3(free) + " (" + Math.round(pct) + "%)",
+          leftPct: Math.max(12, Math.min(total / scale * 100 + pct / 2, 88))
+        };
+      } else {
+        let acc = 0;
+        for (const p of props.parts) {
+          const pct = scale > 0 ? p.value / scale * 100 : 0;
+          if (p.key === props.hoverKey && p.value > 0) {
+            tip = {
+              // "(pct%)" is a share of the OCCUPIED total — the solid box
+              // that appears on hover frames exactly this reference region.
+              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;
+          }
+          acc += pct;
+        }
+      }
+    }
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-stacked-wrap" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "lc-stacked" + (hovering ? " lc-stacked-dim" : ""),
+        style: { height: (props.height || 14) + "px" },
+        onMouseLeave: () => {
+          if (props.onHoverKey !== void 0) props.onHoverKey(null);
+          setReserveOn(false);
+        }
+      },
+      total > 0 ? props.parts.map((p) => {
+        if (!p.value) return null;
+        const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
         return /* @__PURE__ */ React.createElement(
-          "span",
+          "div",
           {
-            key: "turn-" + gi,
-            className: "lc-turn" + (on ? " lc-turn-on" : ""),
-            style: {
-              width: blockW + "px",
-              background: TURN_FILLS[gi % TURN_FILLS.length]
-            },
-            title: "T" + grp.turn,
+            key: p.key,
+            className: "lc-stacked-seg" + (on ? " lc-stacked-seg-on" : ""),
+            style: { width: p.value / scale * 100 + "%", background: p.color },
             onMouseEnter: () => {
-              props.onHoverTurn(grp.turn);
+              if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
             }
-          },
-          "T" + grp.turn
+          }
         );
-      }))
-    ), edges.right ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null);
+      }) : null,
+      free > 0 ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: "free",
+          className: "lc-stacked-free" + (props.hoverKey === "free" ? " lc-stacked-free-on" : ""),
+          style: { width: free / scale * 100 + "%" },
+          onMouseEnter: () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey("free");
+          }
+        }
+      ) : null,
+      reserve !== null ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "lc-reserve",
+          style: { left: reserveLeft + "%", width: reserveWidth + "%" },
+          onMouseEnter: () => {
+            setReserveOn(true);
+            if (props.onHoverKey !== void 0) props.onHoverKey(null);
+          },
+          onMouseLeave: () => setReserveOn(false)
+        }
+      ) : 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 { t, fmt: fmt3, catLabel } = kit;
+  return function Legend(props) {
+    let total = 0;
+    for (const p of props.parts) total += p.value;
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-legend" }, props.parts.map((p) => {
+      const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: p.key,
+          className: "lc-chip" + (on ? " lc-chip-on" : ""),
+          title: t("overview.ofUsed"),
+          onMouseEnter: () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
+          },
+          onMouseLeave: () => {
+            if (props.onHoverKey !== void 0) props.onHoverKey(null);
+          }
+        },
+        /* @__PURE__ */ React.createElement("i", { style: { background: p.color } }),
+        /* @__PURE__ */ React.createElement("span", { className: "lc-chip-label" }, catLabel(p.key)),
+        /* @__PURE__ */ React.createElement("span", { className: "lc-chip-nums" }, "\u2248" + fmt3(p.value), total > 0 ? /* @__PURE__ */ React.createElement("em", null, Math.round(p.value / total * 100) + "%") : null)
+      );
+    }));
+  };
+}
+
+// src/client/components/currentComposition.tsx
+function makeCurrentComposition(kit, StackedBar, Legend) {
+  const { t, fmt: fmt3 } = kit;
+  return function CurrentComposition(props) {
+    const head = props.head;
+    const reserve = head.window != null && head.window > 0 ? { ratio: AUTO_COMPACT_RATIO, label: t("overview.compactReserve", { pct: Math.round(AUTO_COMPACT_RATIO * 100) }) } : void 0;
+    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("overview.title")), props.subtitle !== void 0 && props.subtitle !== "" ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, props.subtitle) : 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: props.hoverKey, onHoverKey: props.onHoverKey, reserve }), /* @__PURE__ */ React.createElement(Legend, { parts: head.parts, hoverKey: props.hoverKey, onHoverKey: props.onHoverKey }), props.tools !== void 0 && props.tools.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-tools" }, /* @__PURE__ */ React.createElement("button", { type: "button", className: "lc-tools-label", onClick: () => {
+      if (props.onToolFocus !== void 0) props.onToolFocus({});
+    } }, t("tools.top")), props.tools.slice().sort((a, b) => b.tokens - a.tokens).slice(0, 5).map((tool) => /* @__PURE__ */ React.createElement("button", { key: tool.name, type: "button", className: "lc-tool-chip", onClick: () => {
+      if (props.onToolFocus !== void 0) props.onToolFocus({ tool: tool.name });
+    } }, tool.name + " " + fmt3(tool.tokens))), props.tools.length > 5 ? /* @__PURE__ */ React.createElement("button", { type: "button", className: "lc-tools-more", onClick: () => {
+      if (props.onToolFocus !== void 0) props.onToolFocus({});
+    } }, t("tools.more", { n: props.tools.length })) : null) : null);
   };
 }
 
 // src/client/components/contextModal.tsx
-var TREND_TURNS = 10;
 function makeContextModal(ctx, kit) {
-  const { t, fmt: fmt3 } = kit;
+  const { t } = kit;
   const sessions = ctx.get("sessions");
   const StackedBar = makeStackedBar(kit);
   const Legend = makeLegend(kit);
-  const TrendChart = makeTrendChart(kit);
-  const RequestDetail = makeRequestDetail(kit, StackedBar);
+  const CurrentComposition = makeCurrentComposition(kit, StackedBar, Legend);
+  const ContextBrowser = makeContextBrowser(kit, StackedBar);
   return function ContextModal(props) {
     const sessionId = typeof props.sessionId === "string" ? props.sessionId : "";
     const open = typeof props.useContextModal === "function" ? props.useContextModal((s) => s) : false;
     const data = typeof props.useProjection === "function" ? timelineOf(props.useProjection("contextTimeline")) : null;
     const pressure = typeof props.useProjection === "function" ? contextPressureOf(props.useProjection("contextPressure")) : null;
-    const [selectedSeq, setSelectedSeq] = React.useState(null);
-    const [hoveredSeq, setHoveredSeq] = React.useState(null);
+    const headers = typeof props.useProjection === "function" ? headersOf(props.useProjection("contextHeaders")) : null;
     const [hoverCat, setHoverCat] = React.useState(null);
+    const [toolFocus, setToolFocus] = React.useState(null);
     const close = React.useCallback(() => {
       if (sessionId === "") return;
       modalStoreOf(sessionId).set(false);
@@ -655,40 +940,35 @@ function makeContextModal(ctx, kit) {
       };
     }, [open, close]);
     if (!open) return null;
-    const requests = data !== null ? data.requests || [] : [];
-    const events = data !== null ? data.events || [] : [];
-    const turns = aggregateByTurn(requests).slice(-TREND_TURNS);
-    const markers = attachMarkers(turns, events);
-    let pinnedReq = null;
-    for (const req of turns) if (req.seq === selectedSeq) pinnedReq = req;
-    let activeReq = null;
-    if (hoveredSeq !== null) {
-      for (const req of turns) if (req.seq === hoveredSeq) activeReq = req;
-    }
-    if (activeReq === null) activeReq = pinnedReq;
-    if (activeReq === null && turns.length > 0) activeReq = turns[turns.length - 1];
-    const markerOf = (req) => {
-      const i = turns.indexOf(req);
-      return i >= 0 ? markers[i] : void 0;
-    };
     const head = data !== null ? headlineOf(data, pressure) : null;
+    const subtitle = data !== null ? (data.model ? data.model : "") + (data.provider ? " \xB7 " + data.provider : "") : "";
     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) + " 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,
+    } }, /* @__PURE__ */ React.createElement("div", { className: "lc-modal-head" }, /* @__PURE__ */ React.createElement("span", { className: "lc-modal-title" }, t("tab")), /* @__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(
+      CurrentComposition,
       {
-        requests: turns,
-        markers,
-        selectedSeq: pinnedReq !== null ? pinnedReq.seq : null,
-        hoveredSeq,
-        activeTurn: null,
-        granularity: "turn",
-        onSelect: setSelectedSeq,
-        onHover: setHoveredSeq,
-        onHoverTurn: () => {
+        head,
+        subtitle,
+        hoverKey: hoverCat,
+        onHoverKey: setHoverCat,
+        tools: data.toolList,
+        onToolFocus: setToolFocus
+      }
+    ), /* @__PURE__ */ React.createElement(
+      ContextBrowser,
+      {
+        data,
+        headers,
+        useSession: props.useSession,
+        loadOlderHistory: props.loadOlderHistory,
+        hoverKey: hoverCat,
+        onHoverKey: setHoverCat,
+        toolFocus,
+        onToolFocusHandled: () => {
+          setToolFocus(null);
         }
       }
-    ), /* @__PURE__ */ React.createElement(RequestDetail, { request: activeReq, marker: activeReq !== null ? markerOf(activeReq) : void 0 })))));
+    ))));
   };
 }
 
@@ -718,12 +998,14 @@ var STYLES = [
   ".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:
-  // dashes from the left edge to the used/window boundary, so the legend's
-  // "share of used" percentages visibly map to the boxed part (the free track
-  // 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: 0; box-shadow: 0 0 0 1px var(--dsw-alias-bg-layer-2); transition: opacity 120ms ease; }",
+  // a SOLID box from the left edge to the used/window boundary, so the
+  // legend's "share of used" percentages visibly map to the boxed part (the
+  // free track sits outside it). pointer-events: none keeps hover on the
+  // segments/free. A soft LIGHT-GRAY stroke — a gentle guide rather than a
+  // hard black box — that still reads through its 2px thickness against the
+  // dimmed parts underneath it (`.lc-stacked-dim`). The free track echoes
+  // the same weight with a dashed box, so the two read as one system.
+  ".lc-occupied-box { position: absolute; top: 0; bottom: 0; left: 0; border: 2px solid var(--dsw-alias-label-tertiary); 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; }",
@@ -732,9 +1014,18 @@ var STYLES = [
   // 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-free { box-sizing: border-box; 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; }",
+  // The free track mirrors the occupied frame: a DASHED 2px box (the occupied
+  // frame is solid) at the same weight — border, not the old inset shadow, so
+  // the dash pattern renders; the base box-sizing keeps the width from shifting.
+  // Auto-compaction reserve band: the rightmost (1−ratio) of the window,
+  // striped diagonally like a warning plate so it reads as "headroom, not
+  // real usage" rather than plain free space. Sits above the track/segments
+  // (overlay visible even past the threshold) with its own pointer so the
+  // hover explains it (help cursor signals "more info").
+  ".lc-reserve { position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: auto; cursor: help; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--dsw-alias-state-warn-primary) 24%, transparent) 0 5px, transparent 5px 10px); }",
+  ".lc-stacked-free-on { border: 2px dashed var(--dsw-alias-label-secondary); border-radius: 3px; }",
   // Hover focus: everything except the hovered part (segment, legend chip, or
   // free track) recedes, so the composition highlight and the occupied-region
   // frame read clearly. The selected segment/free keeps full opacity.
@@ -742,8 +1033,19 @@ var STYLES = [
   ".lc-stacked-dim .lc-stacked-seg-on { opacity: 1; }",
   ".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); padding: 1px 6px; border-radius: 6px; transition: background-color 120ms ease; }",
+  // Current-composition legend: an auto-flowing grid (as many columns as the
+  // card fits, narrowing flows to fewer) whose cells are label-left /
+  // numbers-right rows — each category a tidy "● 系统提示词  ≈2.0k  2%".
+  ".lc-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 14px; margin-top: 10px; }",
+  ".lc-chip { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--dsw-alias-label-primary); padding: 1px 6px; border-radius: 6px; cursor: pointer; transition: background-color 120ms ease; }",
+  // The category name is the row's emphasis: bold at rest (the chip is a
+  // legend label, not inline prose), ellipsized if a narrow cell squeezes it
+  // while the right-aligned figures stay intact.
+  ".lc-chip-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }",
+  // The numeric group (≈tokens + percent) pins to the cell's right edge while
+  // the category label stays left; a baseline acts as the shared vertical
+  // rhythm for the two figures.
+  ".lc-chip-nums { margin-left: auto; flex: none; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }",
   ".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); }",
@@ -753,7 +1055,14 @@ var STYLES = [
   ".lc-chip-on { font-weight: 600; background: var(--dsw-alias-interactive-bg-hover); }",
   ".lc-chip-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }",
   ".lc-tools { margin-top: 10px; color: var(--dsw-alias-label-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }",
-  ".lc-tool-chip { background: var(--dsw-alias-bg-layer-2); border-radius: 4px; padding: 1px 7px; font-size: 12px; color: var(--dsw-alias-label-primary); }",
+  // The overview tool list links into the Context browser: the "工具定义 Top"
+  // label, its "等 N 个" overflow link, and every tool chip are buttons, and
+  // hover underlines them (the chip already reads as a tag, so the underline
+  // is the only affordance).
+  ".lc-tools-label, .lc-tools-more { border: 0; background: transparent; padding: 0; color: var(--dsw-alias-label-secondary); font-family: inherit; font-size: 12px; cursor: pointer; }",
+  ".lc-tools-label:hover, .lc-tools-more:hover { text-decoration: underline; }",
+  ".lc-tool-chip { background: var(--dsw-alias-bg-layer-2); border: 0; border-radius: 4px; padding: 1px 7px; font: inherit; font-size: 12px; color: var(--dsw-alias-label-primary); cursor: pointer; }",
+  ".lc-tool-chip:hover { text-decoration: underline; }",
   ".lc-chartrow { display: flex; gap: 6px; align-items: stretch; }",
   ".lc-axis { position: relative; width: 40px; height: 150px; padding-top: 18px; box-sizing: border-box; color: var(--dsw-alias-label-secondary); font-size: 11px; }",
   ".lc-axis span { position: absolute; right: 0; line-height: 1; }",
@@ -848,368 +1157,108 @@ var STYLES = [
   ".lc-kind-inject { background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent); color: var(--dsw-alias-state-success-primary); }",
   ".lc-kind-compaction { background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 15%, transparent); color: var(--dsw-alias-state-error-primary); }",
   ".lc-kind-prune { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #8b5cf6; }",
-  ".lc-kind-model { background: color-mix(in srgb, var(--dsw-alias-brand-primary) 15%, transparent); color: var(--dsw-alias-brand-primary); }",
-  ".lc-event-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
-  ".lc-event-at { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; }",
-  ".lc-event-tokens { color: var(--dsw-alias-state-success-primary); font-weight: 600; white-space: nowrap; }",
-  ".lc-event-tokens.lc-up { color: var(--dsw-alias-state-warn-primary); }",
-  ".lc-event-time { color: var(--dsw-alias-label-secondary); font-size: 12px; }",
-  ".lc-node { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
-  ".lc-node-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary); }",
-  ".lc-node-time { color: var(--dsw-alias-label-secondary); font-size: 12px; min-width: 54px; text-align: right; }",
-  ".lc-node-tokens { color: var(--dsw-alias-label-secondary); }",
-  ".lc-nodes-more { color: var(--dsw-alias-label-secondary); padding: 3px 0; }",
-  ".lc-empty { color: var(--dsw-alias-label-secondary); padding: 18px 0; text-align: center; }",
-  ".lc-foot { color: var(--dsw-alias-label-secondary); font-size: 12px; margin-top: 4px; }",
-  // ---- /context modal (centered dialog; escapes the composer anchor via fixed positioning) ----
-  ".lc-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; }",
-  ".lc-modal-card { width: min(720px, calc(100vw - 48px)); max-height: min(82vh, 760px); overflow-y: auto; box-sizing: border-box; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 12px; box-shadow: var(--dsw-shadow-lv3, 0 12px 32px rgba(0, 0, 0, 0.4)); padding: 16px 18px 18px; color: var(--dsw-alias-label-primary); font-size: 13px; }",
-  ".lc-modal-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }",
-  ".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; }",
-  // ---- 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; 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; }",
-  ".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-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; }",
-  ".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, 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" }, 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)));
-    }));
-  };
-}
-
-// 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, 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 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);
-    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" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("browser.title")), /* @__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) }, 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" + (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);
-    })));
-  };
-}
+  ".lc-kind-model { background: color-mix(in srgb, var(--dsw-alias-brand-primary) 15%, transparent); color: var(--dsw-alias-brand-primary); }",
+  ".lc-event-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
+  ".lc-event-at { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; }",
+  ".lc-event-tokens { color: var(--dsw-alias-state-success-primary); font-weight: 600; white-space: nowrap; }",
+  ".lc-event-tokens.lc-up { color: var(--dsw-alias-state-warn-primary); }",
+  ".lc-event-time { color: var(--dsw-alias-label-secondary); font-size: 12px; }",
+  ".lc-node { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
+  ".lc-node-preview { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-primary); }",
+  ".lc-node-time { color: var(--dsw-alias-label-secondary); font-size: 12px; min-width: 54px; text-align: right; }",
+  ".lc-node-tokens { color: var(--dsw-alias-label-secondary); }",
+  ".lc-nodes-more { color: var(--dsw-alias-label-secondary); padding: 3px 0; }",
+  ".lc-empty { color: var(--dsw-alias-label-secondary); padding: 18px 0; text-align: center; }",
+  ".lc-foot { color: var(--dsw-alias-label-secondary); font-size: 12px; margin-top: 4px; }",
+  // ---- /context modal (centered dialog; escapes the composer anchor via fixed positioning) ----
+  ".lc-modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; }",
+  ".lc-modal-card { width: min(720px, calc(100vw - 48px)); max-height: min(82vh, 760px); overflow-y: auto; box-sizing: border-box; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 12px; box-shadow: var(--dsw-shadow-lv3, 0 12px 32px rgba(0, 0, 0, 0.4)); padding: 16px 18px 18px; color: var(--dsw-alias-label-primary); font-size: 13px; }",
+  ".lc-modal-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }",
+  ".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); }",
+  // ---- Context browser card (progressive disclosure: category accordion ->
+  // element rows -> per-kind content) ----
+  // The δ-baseline caption sits at the card title's right edge, just left of
+  // the step picker (it takes the row's auto margin the picker used to own).
+  ".lc-br-hint { margin-left: auto; color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 400; white-space: nowrap; }",
+  ".lc-br-pick { 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; 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; white-space: nowrap; }",
+  // Count + Δ pill form one attached group: the group absorbs the row's free
+  // space (tokens/percent stay right-aligned) with a tight 4px inner gap so
+  // the pill hugs the item count instead of standing at the row's 8px rhythm.
+  ".lc-br-count-grp { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 4px; }",
+  ".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; }",
+  // Δ pills on a category row: count and token swings vs the previous turn's
+  // last step, tinted by direction (added = success, freed = error — the same
+  // language as the events card's kind chips).
+  ".lc-br-delta, .lc-br-tdelta { flex: none; font-size: 11px; font-weight: 600; padding: 0 5px; border-radius: 4px; white-space: nowrap; }",
+  ".lc-br-delta-up, .lc-br-tdelta-up { color: var(--dsw-alias-state-success-primary); background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent); }",
+  ".lc-br-delta-down, .lc-br-tdelta-down { color: var(--dsw-alias-state-error-primary); background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 15%, transparent); }",
+  // The token Δ pill hugs the LEFT of the token figure (tight 4px gap, like
+  // the count group) while the figure itself keeps its right-aligned slot.
+  ".lc-br-tokens-grp { flex: none; min-width: 0; display: inline-flex; align-items: center; gap: 4px; }",
+  ".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-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; }",
+  ".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; }",
+  // ---- Tool schema body (browser card, tools category). The description
+  // and parameter table share one "card with a small title" chrome — a
+  // labeled bordered block so a reader can scan three stacked sections
+  // without losing track of which is which. The raw JSON sits below as a
+  // collapsed toggle (no card chrome — it's a debug view, not a primary
+  // section). ----
+  ".lc-ts-card { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; overflow: hidden; }",
+  ".lc-ts-card-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--dsw-alias-label-secondary); border-bottom: 1px solid var(--dsw-alias-border-l1); }",
+  ".lc-ts-card-head b { color: var(--dsw-alias-label-primary); }",
+  ".lc-ts-card-count { margin-left: auto; }",
+  ".lc-ts-desc-body { margin: 0; padding: 8px 10px; color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow-y: auto; scrollbar-width: thin; }",
+  // Grid: name + type + required chip + description. Columns wrap on narrow
+  // rows; the description cell spans the full second row so a long blurb
+  // never breaks the one-line rhythm of name/type/required.
+  ".lc-ts-param-row { display: grid; grid-template-columns: 140px 90px 56px 1fr; column-gap: 10px; row-gap: 2px; padding: 6px 10px; border-top: 1px solid var(--dsw-alias-border-l1); font-size: 12px; align-items: baseline; }",
+  ".lc-ts-param-row:first-of-type { border-top: 0; }",
+  ".lc-ts-param-name { font-weight: 600; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
+  ".lc-ts-param-type { color: var(--dsw-alias-label-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
+  ".lc-ts-param-req { color: var(--dsw-alias-state-warn-primary); font-size: 11px; font-weight: 600; }",
+  ".lc-ts-param-req-off { color: var(--dsw-alias-label-secondary); font-size: 11px; }",
+  ".lc-ts-param-desc { grid-column: 1 / -1; color: var(--dsw-alias-label-secondary); line-height: 1.5; }",
+  ".lc-ts-params-empty { padding: 8px 10px; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
+  // Raw JSON toggle: a slim button that owns the open/closed state, sitting
+  // just under the parameter table. The <pre> itself only mounts when open
+  // (avoids stringifying the schema on every render and keeps the default
+  // body compact).
+  ".lc-ts-json { display: flex; flex-direction: column; gap: 4px; }",
+  ".lc-ts-json-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 11px; padding: 0; cursor: pointer; }",
+  ".lc-ts-json-toggle:hover { color: var(--dsw-alias-label-primary); text-decoration: underline; }"
+].join("\n");
 
 // src/client/components/events.tsx
 var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
@@ -1288,7 +1337,7 @@ function makeEventList(kit) {
 
 // src/client/meta.ts
 var PLUGIN_NAME = "dsh-context";
-var PLUGIN_VERSION = true ? "0.15.0" : "0.0.0-dev";
+var PLUGIN_VERSION = true ? "0.17.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\//, "");
 
@@ -1340,7 +1389,30 @@ function makePluginInfo(kit) {
   };
 }
 
+// src/client/components/requestDetail.tsx
+function makeRequestDetail(kit, StackedBar) {
+  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 ? 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, 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) + "%" : ""));
+    })));
+  };
+}
+
 // src/client/components/statsBoard.tsx
+function cacheHitPercent(usage) {
+  const billed = usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens;
+  if (billed === 0) return null;
+  const hundredths = Math.trunc(usage.cacheReadTokens / billed * 1e4 + 1e-9);
+  return `${Math.floor(hundredths / 100)}.${String(hundredths % 100).padStart(2, "0")}`;
+}
 function makeStatsBoard(kit) {
   const { t, fmt: fmt3 } = kit;
   return function StatsBoard(props) {
@@ -1355,8 +1427,187 @@ function makeStatsBoard(kit) {
       else if (ev.kind === "prune") prunes++;
       else if (ev.kind === "inject") injects++;
     }
+    const hit = props.usage !== null ? cacheHitPercent(props.usage) : null;
     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" }, /* @__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))));
+    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)), cell(t("stats.cacheHit"), hit === null ? "\u2014" : hit + "%")));
+  };
+}
+
+// src/client/components/trendChart.tsx
+function aggregateByTurn(requests) {
+  const out = [];
+  let runSteps = 0;
+  for (const req of requests) {
+    const last = out.length > 0 ? out[out.length - 1] : null;
+    if (last !== null && (last.turn ?? 0) === (req.turn ?? 0)) {
+      runSteps++;
+      out[out.length - 1] = { ...req, stepCount: runSteps };
+    } else {
+      runSteps = 1;
+      out.push({ ...req, stepCount: 1 });
+    }
+  }
+  return out;
+}
+function attachMarkers(requests, events) {
+  const markers = new Array(requests.length);
+  for (const ev of events) {
+    if (ev.kind !== "compaction" && ev.kind !== "prune") continue;
+    for (let r = 0; r < requests.length; r++) {
+      if (requests[r].seq >= ev.seq) {
+        if (markers[r] === void 0) markers[r] = ev;
+        break;
+      }
+    }
+  }
+  return markers;
+}
+function makeTrendChart(kit) {
+  const { t, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
+  const CHART_H = 112;
+  const BAR_W = 14;
+  const BAR_GAP = 2;
+  const TURN_FILLS = ["rgba(128,128,128,0.12)", "rgba(128,128,128,0.26)"];
+  return function TrendChart(props) {
+    const requests = props.requests;
+    const markers = props.markers;
+    const anchorOf = (req) => typeof req.prompt === "number" && req.prompt > 0 && req.total > 0 ? req.prompt / req.total : 1;
+    const barTotalOf = (req) => typeof req.prompt === "number" && req.prompt > 0 ? req.prompt : req.total;
+    let maxTotal = 1;
+    for (const req of requests) {
+      const bt = barTotalOf(req);
+      if (bt > maxTotal) maxTotal = bt;
+    }
+    const groups = [];
+    for (const req of requests) {
+      let grp = groups.length > 0 ? groups[groups.length - 1] : null;
+      if (grp === null || grp.turn !== (req.turn ?? 0)) {
+        grp = { turn: req.turn ?? 0, count: 0, span: 0, agg: req.stepCount !== void 0 };
+        groups.push(grp);
+      }
+      grp.count++;
+      grp.span += req.stepCount ?? 1;
+    }
+    const scrollRef = React.useRef(null);
+    const scrolledOnce = React.useRef(false);
+    const lastGranRef = React.useRef(props.granularity);
+    const [edges, setEdges] = React.useState({ left: false, right: false });
+    const edgesRef = React.useRef(edges);
+    const updateEdges = (el) => {
+      const left = el.scrollLeft > 4;
+      const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 4;
+      const prev = edgesRef.current;
+      if (prev.left === left && prev.right === right) return;
+      edgesRef.current = { left, right };
+      setEdges({ left, right });
+    };
+    React.useLayoutEffect(() => {
+      const el = scrollRef.current;
+      if (el === null) return;
+      if (props.granularity !== lastGranRef.current) {
+        lastGranRef.current = props.granularity;
+        scrolledOnce.current = false;
+      }
+      if (!scrolledOnce.current) {
+        scrolledOnce.current = true;
+        el.scrollLeft = el.scrollWidth;
+      } else if (el.scrollLeft + el.clientWidth >= el.scrollWidth - 24) {
+        el.scrollLeft = el.scrollWidth;
+      }
+      updateEdges(el);
+    });
+    const tipOf = (req) => {
+      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;
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-chartrow" }, /* @__PURE__ */ React.createElement("div", { className: "lc-axis" }, /* @__PURE__ */ React.createElement("span", { className: "lc-axis-top" }, fmt3(maxTotal)), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-mid" }, fmt3(Math.round(maxTotal / 2))), /* @__PURE__ */ React.createElement("span", { className: "lc-axis-bot" }, "0")), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "lc-chart-scroll" + (props.activeTurn !== null ? " lc-chart-dim" : ""),
+        ref: scrollRef,
+        onScroll: (e) => {
+          updateEdges(e.currentTarget);
+        }
+      },
+      edges.left ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-fade lc-chart-fade-l" }) : null,
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "lc-chart",
+          onMouseLeave: () => {
+            props.onHover(null);
+          }
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-top" }),
+        /* @__PURE__ */ React.createElement("div", { className: "lc-grid lc-grid-mid" }),
+        requests.map((req, i) => {
+          const marker = markers[i];
+          const markerAt = marker !== void 0 ? eventAt(marker) : null;
+          const selected = props.selectedSeq === req.seq;
+          const hovered = props.hoveredSeq === req.seq;
+          const inTurn = props.activeTurn !== null && (req.turn ?? 0) === props.activeTurn;
+          return /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: req.seq,
+              className: "lc-bar" + (selected ? " lc-bar-selected" : "") + (hovered ? " lc-bar-hovered" : "") + (inTurn ? " lc-bar-in-turn" : ""),
+              style: { width: BAR_W + "px" },
+              onClick: () => {
+                props.onSelect(selected ? null : req.seq);
+              },
+              onMouseEnter: () => {
+                props.onHover(req.seq);
+              }
+            },
+            marker !== void 0 ? /* @__PURE__ */ React.createElement(
+              "span",
+              {
+                className: "lc-bar-marker",
+                title: "\u2702 " + (markerAt !== null ? markerAt + " \u2014 " : "") + eventLabel(marker)
+              },
+              "\u2702"
+            ) : null,
+            /* @__PURE__ */ React.createElement("div", { className: "lc-bar-stack" }, CATS.map((c) => {
+              const v = (req[c.key] || 0) * anchorOf(req);
+              if (!v) return null;
+              return /* @__PURE__ */ React.createElement("div", { key: c.key, style: { height: Math.max(1, Math.round(v / maxTotal * CHART_H)) + "px", background: c.color } });
+            }))
+          );
+        })
+      ),
+      hoveredReq !== null ? /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "lc-chart-tip",
+          style: { left: hoveredIdx * (BAR_W + BAR_GAP) + BAR_W / 2 + "px" }
+        },
+        tipOf(hoveredReq)
+      ) : null,
+      /* @__PURE__ */ React.createElement("div", { className: "lc-turns", onMouseLeave: () => {
+        props.onHoverTurn(null);
+      } }, groups.map((grp, gi) => {
+        const on = props.activeTurn === grp.turn;
+        const blockW = grp.agg ? BAR_W : grp.span * (BAR_W + BAR_GAP) - BAR_GAP;
+        return /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            key: "turn-" + gi,
+            className: "lc-turn" + (on ? " lc-turn-on" : ""),
+            style: {
+              width: blockW + "px",
+              background: TURN_FILLS[gi % TURN_FILLS.length]
+            },
+            title: "T" + grp.turn,
+            onMouseEnter: () => {
+              props.onHoverTurn(grp.turn);
+            }
+          },
+          "T" + grp.turn
+        );
+      }))
+    ), edges.right ? /* @__PURE__ */ React.createElement("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null);
   };
 }
 
@@ -1364,9 +1615,10 @@ function makeStatsBoard(kit) {
 var viewScroll = /* @__PURE__ */ new Map();
 var EVENT_KINDS = ["inject", "compaction", "prune", "model"];
 function makeContextView(ctx, kit) {
-  const { t, fmt: fmt3, fmtTime: fmtTime2, catLabel } = kit;
+  const { t } = kit;
   const StackedBar = makeStackedBar(kit);
   const Legend = makeLegend(kit);
+  const CurrentComposition = makeCurrentComposition(kit, StackedBar, Legend);
   const TrendChart = makeTrendChart(kit);
   const RequestDetail = makeRequestDetail(kit, StackedBar);
   const EventList = makeEventList(kit);
@@ -1378,6 +1630,7 @@ function makeContextView(ctx, kit) {
     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 usage = typeof props.useProjection === "function" ? tokenUsageOf(props.useProjection("tokenUsage")) : null;
     const headers = typeof props.useProjection === "function" ? headersOf(props.useProjection("contextHeaders")) : null;
     const [selectedSeq, setSelectedSeq] = React.useState(null);
     const [hoveredSeq, setHoveredSeq] = React.useState(null);
@@ -1393,6 +1646,10 @@ function makeContextView(ctx, kit) {
         return p.length === 1 ? [...EVENT_KINDS] : p.filter((x) => x !== k);
       });
     };
+    const [toolFocus, setToolFocus] = React.useState(null);
+    const clearToolFocus = React.useCallback(() => {
+      setToolFocus(null);
+    }, []);
     const rootRef = React.useRef(null);
     const scrollerRef = React.useRef(null);
     const restoredRef = React.useRef(null);
@@ -1448,9 +1705,17 @@ function makeContextView(ctx, kit) {
       }
     }
     const head = headlineOf(data, pressure);
-    return /* @__PURE__ */ React.createElement("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement("div", { className: "lc-cols lc-head" }, /* @__PURE__ */ React.createElement(StatsBoard, { requests, events }), /* @__PURE__ */ React.createElement(PluginInfo, null)), /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("overview.title")), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, (data.model ? data.model : "") + (data.provider ? " \xB7 " + data.provider : ""))), /* @__PURE__ */ React.createElement("div", { className: "lc-overview-num" }, /* @__PURE__ */ React.createElement("b", null, fmt3(head.tokens)), /* @__PURE__ */ React.createElement("span", null, head.window ? " / " + fmt3(head.window) + " tokens" : " " + t("overview.estimate")), head.pct !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-overview-pct" }, /* @__PURE__ */ React.createElement("b", null, head.pct + "%"), t("overview.used")) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts: head.parts, height: 16, max: head.window, hoverKey: hoverCat, onHoverKey: setHoverCat }), /* @__PURE__ */ React.createElement(Legend, { parts: head.parts, hoverKey: hoverCat, onHoverKey: setHoverCat }), data.toolList && data.toolList.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-tools" }, t("tools.top"), data.toolList.slice().sort((a, b) => b.tokens - a.tokens).slice(0, 5).map((tool) => {
-      return /* @__PURE__ */ React.createElement("span", { key: tool.name, className: "lc-tool-chip" }, tool.name + " " + fmt3(tool.tokens));
-    }), data.toolList.length > 5 ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, " " + t("tools.more", { n: data.toolList.length })) : null) : null), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("trend.title")), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("trend.hint")), /* @__PURE__ */ React.createElement("div", { className: "lc-gran" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement("div", { className: "lc-cols lc-head" }, /* @__PURE__ */ React.createElement(StatsBoard, { requests, events, usage }), /* @__PURE__ */ React.createElement(PluginInfo, null)), /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-col" }, /* @__PURE__ */ React.createElement(
+      CurrentComposition,
+      {
+        head,
+        subtitle: (data.model ? data.model : "") + (data.provider ? " \xB7 " + data.provider : ""),
+        hoverKey: hoverCat,
+        onHoverKey: setHoverCat,
+        tools: data.toolList,
+        onToolFocus: setToolFocus
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("trend.title")), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("trend.hint")), /* @__PURE__ */ React.createElement("div", { className: "lc-gran" }, /* @__PURE__ */ React.createElement(
       "button",
       {
         className: "lc-gran-btn" + (granularity === "step" ? " lc-gran-on" : ""),
@@ -1492,7 +1757,9 @@ function makeContextView(ctx, kit) {
         previewSeq: hoveredSeq,
         pinSeq: pinnedReq !== null ? pinnedReq.seq : null,
         hoverKey: hoverCat,
-        onHoverKey: setHoverCat
+        onHoverKey: setHoverCat,
+        toolFocus,
+        onToolFocusHandled: clearToolFocus
       }
     ))), /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("events.title")), /* @__PURE__ */ React.createElement("div", { className: "lc-kinds" }, EVENT_KINDS.map((k) => /* @__PURE__ */ React.createElement(
       "button",