dsh-context 0.16.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,6 +90,7 @@ 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",
@@ -115,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",
@@ -122,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",
@@ -175,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)",
@@ -183,6 +188,7 @@ 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)",
@@ -310,751 +316,112 @@ 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";
   }
-  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);
-  };
-}
-
-// src/client/components/contextModal.tsx
-var TREND_TURNS = 10;
-function makeContextModal(ctx, kit) {
-  const { t, fmt: fmt3 } = kit;
-  const sessions = ctx.get("sessions");
-  const StackedBar = makeStackedBar(kit);
-  const Legend = makeLegend(kit);
-  const TrendChart = makeTrendChart(kit);
-  const RequestDetail = makeRequestDetail(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 [hoverCat, setHoverCat] = React.useState(null);
-    const close = React.useCallback(() => {
-      if (sessionId === "") return;
-      modalStoreOf(sessionId).set(false);
-      const guard = takePendingConsume(sessionId);
-      if (guard === void 0 || sessions === void 0) return;
-      const scope = sessions.scope(sessionId);
-      if (scope !== void 0) scope.bail(scope, "slash/input-consume-token", { guard });
-    }, [sessionId]);
-    React.useEffect(() => {
-      if (!open) return void 0;
-      const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-      const onKey = (ev) => {
-        if (ev.key !== "Escape") return;
-        ev.preventDefault();
-        ev.stopPropagation();
-        close();
-      };
-      window.addEventListener("keydown", onKey, true);
-      return () => {
-        window.removeEventListener("keydown", onKey, true);
-        if (previous !== null && document.contains(previous)) previous.focus();
-      };
-    }, [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;
-    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,
-      {
-        requests: turns,
-        markers,
-        selectedSeq: pinnedReq !== null ? pinnedReq.seq : null,
-        hoveredSeq,
-        activeTurn: null,
-        granularity: "turn",
-        onSelect: setSelectedSeq,
-        onHover: setHoveredSeq,
-        onHoverTurn: () => {
-        }
-      }
-    ), /* @__PURE__ */ React.createElement(RequestDetail, { request: activeReq, marker: activeReq !== null ? markerOf(activeReq) : void 0 })))));
-  };
-}
-
-// src/client/styles.ts
-var STYLES = [
-  ".lc-root { padding: 16px 20px 32px; overflow-y: auto; height: 100%; box-sizing: border-box; color: var(--dsw-alias-label-primary); font-size: 13px; }",
-  ".lc-card { background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }",
-  ".lc-card-title { font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }",
-  ".lc-card-title-text { flex: none; white-space: nowrap; }",
-  ".lc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }",
-  ".lc-stat { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }",
-  ".lc-stat-label { color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
-  ".lc-stat-value { color: var(--dsw-alias-label-primary); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }",
-  ".lc-stat-sub { color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
-  ".lc-card-sub { font-weight: 400; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
-  ".lc-gran, .lc-kinds { margin-left: auto; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 1px; }",
-  ".lc-gran-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; }",
-  ".lc-gran-btn:hover { color: var(--dsw-alias-label-primary); }",
-  ".lc-gran-on, .lc-gran-on:hover { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }",
-  ".lc-overview-num { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }",
-  ".lc-overview-num > b { font-size: 20px; }",
-  ".lc-overview-num span { color: var(--dsw-alias-label-secondary); }",
-  // The used-percentage figure is the emphasis of the line: pushed to the
-  // right edge, large and primary-colored, with a small "used" caption.
-  ".lc-overview-pct { margin-left: auto; font-size: 11px; }",
-  ".lc-overview-pct b { font-size: 20px; color: var(--dsw-alias-label-primary); margin-right: 4px; }",
-  ".lc-stacked-wrap { position: relative; width: 100%; }",
-  ".lc-stacked { display: flex; width: 100%; border-radius: 5px; overflow: hidden; background: rgba(128,128,128,0.18); position: relative; }",
-  // Hover reference frame around the OCCUPIED region of the composition bar:
-  // 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; }",
-  ".lc-occupied-box-on { opacity: 1; }",
-  ".lc-bar-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; opacity: 0; transition: opacity 120ms ease; }",
-  ".lc-bar-tip-on { opacity: 1; }",
-  ".lc-stacked > div { height: 100%; }",
-  // Hover eases: the shared composition hover (dim + segment brighten, on the
-  // overview or the mirrored browser bar) glides in and out — same 120ms
-  // rhythm as the rest of the view.
-  ".lc-stacked-seg { transition: filter 120ms ease, opacity 120ms ease; }",
-  ".lc-stacked-free { transition: box-shadow 120ms ease, opacity 120ms ease; }",
-  ".lc-stacked-seg-on { filter: brightness(1.18); }",
-  ".lc-stacked-free-on { box-shadow: inset 0 0 0 1px var(--dsw-alias-label-secondary); border-radius: 3px; }",
-  // Hover focus: everything except the hovered part (segment, legend chip, or
-  // free track) recedes, so the composition highlight and the occupied-region
-  // frame read clearly. The selected segment/free keeps full opacity.
-  ".lc-stacked-dim .lc-stacked-seg { opacity: 0.35; }",
-  ".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; }",
-  ".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); }",
-  // The selected chip glows with the shared hover tint (smoothly, like the
-  // browser rows) instead of snapping its weight; the dot ring on top marks
-  // the exact segment.
-  ".lc-chip-on { font-weight: 600; background: var(--dsw-alias-interactive-bg-hover); }",
-  ".lc-chip-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }",
-  ".lc-tools { margin-top: 10px; color: var(--dsw-alias-label-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }",
-  // 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; }",
-  ".lc-axis-top { top: 13px; }",
-  ".lc-axis-mid { top: 69px; }",
-  ".lc-axis-bot { top: 125px; }",
-  ".lc-chart-scroll { position: relative; flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; }",
-  ".lc-chart-fade { position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2; }",
-  ".lc-chart-fade-l { left: 0; background: linear-gradient(to right, var(--dsw-alias-bg-layer-1), transparent); }",
-  ".lc-chart-fade-r { right: 0; background: linear-gradient(to left, var(--dsw-alias-bg-layer-1), transparent); }",
-  ".lc-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 18px; box-sizing: border-box; width: max-content; min-width: 100%; }",
-  ".lc-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dsw-alias-border-l1); pointer-events: none; }",
-  ".lc-grid-top { top: 18px; }",
-  ".lc-grid-mid { top: 74px; }",
-  ".lc-bar { position: relative; width: 14px; flex: none; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 2px; transition: opacity 120ms ease, background-color 120ms ease; }",
-  // Turn-aware dimming: while a turn is focused, bars OUTSIDE the active
-  // turn fade to 35% and the whole current turn stays fully opaque.
-  ".lc-chart-dim .lc-bar { opacity: 0.35; }",
-  ".lc-chart-dim .lc-bar-in-turn { opacity: 1; }",
-  ".lc-chart-dim .lc-turn { opacity: 0.35; }",
-  ".lc-chart-dim .lc-turn-on { opacity: 1; }",
-  ".lc-chart-tip { position: absolute; top: 0; transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; }",
-  ".lc-bar:hover { background: var(--dsw-alias-bg-layer-2); }",
-  ".lc-bar-selected { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }",
-  ".lc-bar-hovered { outline: 1px dashed var(--dsw-alias-brand-primary); outline-offset: 1px; }",
-  ".lc-bar-in-turn { background: rgba(128,128,128,0.14); }",
-  ".lc-bar-stack { display: flex; flex-direction: column-reverse; width: 100%; }",
-  ".lc-bar-stack > div { width: 100%; }",
-  ".lc-bar-marker { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--dsw-alias-state-warn-primary); }",
-  // Turn strip: NEUTRAL zebra fills (inline, see TURN_FILLS) with secondary
-  // text — never the category palette, or the strip reads as a detached
-  // bottom segment of the bars above it.
-  ".lc-turns { display: flex; gap: 2px; width: max-content; min-width: 100%; margin-top: 4px; }",
-  ".lc-turn { flex: none; box-sizing: border-box; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: var(--dsw-alias-label-secondary); border-radius: 3px; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; transition: filter 120ms, opacity 120ms; }",
-  ".lc-turn-on { filter: brightness(1.35); color: var(--dsw-alias-label-primary); }",
-  ".lc-detail { margin-top: 12px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 12px; }",
-  ".lc-detail-head { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--dsw-alias-label-secondary); }",
-  ".lc-detail-head b { color: var(--dsw-alias-label-primary); }",
-  ".lc-detail-marker { color: var(--dsw-alias-state-warn-primary); font-size: 11px; background: var(--dsw-alias-bg-layer-2); border-radius: 6px; padding: 1px 7px; }",
-  ".lc-detail-head .lc-actual { color: var(--dsw-alias-state-success-primary); }",
-  ".lc-detail-tag { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px; padding: 0 6px; font-size: 11px; color: var(--dsw-alias-label-secondary); }",
-  ".lc-detail-rows { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }",
-  ".lc-detail-row { display: flex; align-items: center; gap: 8px; }",
-  ".lc-detail-label { min-width: 70px; white-space: nowrap; color: var(--dsw-alias-label-secondary); }",
-  ".lc-bar-track { flex: 1; height: 5px; border-radius: 3px; background: rgba(128,128,128,0.18); overflow: hidden; display: block; }",
-  ".lc-bar-fill { display: block; height: 100%; border-radius: 3px; }",
-  ".lc-detail-num { width: 44px; text-align: right; }",
-  ".lc-detail-pct { width: 34px; text-align: right; color: var(--dsw-alias-label-secondary); }",
-  // Section rows share one 14px vertical rhythm, owned by the ROW (flex gap
-  // covers the wrapped-row axis too), never by the cards inside: a card that
-  // IS a column (head, events/messages) drops its own bottom margin, and a
-  // card stacked inside a wrapper column (overview + trend) keeps its margin
-  // as the inner gap but the last one drops it — so every section boundary
-  // measures exactly one 14px, whichever way the flex wraps.
-  ".lc-cols { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }",
-  ".lc-col { flex: 1; min-width: 280px; }",
-  ".lc-cols > .lc-card { margin-bottom: 0; }",
-  ".lc-col > .lc-card:last-child { margin-bottom: 0; }",
-  // Head row: stats board + plugin info sit side by side under the shared
-  // `lc-cols` flex — stats takes ~7/10 of the row, plugin info ~3/10, both
-  // wrap onto their own line when the available width falls below each card's
-  // min-width (so a narrow viewport keeps both readable). Both children are
-  // `.lc-card` themselves (rendered by StatsBoard / PluginInfo); the flex
-  // sizing lives on the head row's direct children so the existing card
-  // chrome doesn't change.
-  ".lc-head > .lc-card:first-child { flex: 7 1 0; min-width: 360px; }",
-  ".lc-head > .lc-card:last-child { flex: 3 1 0; min-width: 220px; }",
-  // Plugin info: two full-width rows (Plugin / GitHub), each one horizontal
-  // line with the label on the left and the value on the right — a compact
-  // definition list rather than a multi-cell grid.
-  ".lc-pi-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }",
-  // The row IS the link: an `<a>` with the label + value on one baseline.
-  // Hovering a row underlines its value — the only hover affordance.
-  ".lc-pi-row { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }",
-  ".lc-pi-row:hover .lc-pi-value { text-decoration: underline; }",
-  // Upgrade chip appended to the Plugin value when the npm registry has a
-  // newer version than the baked-in one.
-  ".lc-pi-update { color: var(--dsw-alias-state-warn-primary); font-size: 11px; margin-left: 6px; white-space: nowrap; }",
-  ".lc-pi-label { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
-  // min-width: 0 lets the value shrink inside the flex row and truncate with
-  // an ellipsis; without it a narrow card pushes the value over the label.
-  ".lc-pi-value { min-width: 0; color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }",
-  ".lc-events, .lc-nodes { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }",
-  ".lc-event { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
-  ".lc-event-icon { width: 18px; text-align: center; color: var(--dsw-alias-state-warn-primary); }",
-  ".lc-event-icon.lc-event-inject { color: #a855f7; }",
-  ".lc-event-icon.lc-event-model { color: var(--dsw-alias-brand-primary); }",
-  // Kind chip: the event classification at a glance; the tint matches the
-  // impact direction (inject = adds context, compaction/prune = frees it,
-  // model switch = neutral), mirroring the token sign colors below.
-  ".lc-kind { flex: none; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }",
-  ".lc-kind-inject { background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent); color: var(--dsw-alias-state-success-primary); }",
-  ".lc-kind-compaction { background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 15%, transparent); color: var(--dsw-alias-state-error-primary); }",
-  ".lc-kind-prune { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #8b5cf6; }",
-  ".lc-kind-model { background: color-mix(in srgb, var(--dsw-alias-brand-primary) 15%, transparent); color: var(--dsw-alias-brand-primary); }",
-  ".lc-event-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
-  ".lc-event-at { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; }",
-  ".lc-event-tokens { color: var(--dsw-alias-state-success-primary); 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; }",
-  // ---- Tool schema body (browser card, tools category). The description
-  // and parameter table share one "card with a small title" chrome — a
-  // labeled bordered block so a reader can scan three stacked sections
-  // without losing track of which is which. The raw JSON sits below as a
-  // collapsed toggle (no card chrome — it's a debug view, not a primary
-  // section). ----
-  ".lc-ts-card { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; overflow: hidden; }",
-  ".lc-ts-card-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--dsw-alias-label-secondary); border-bottom: 1px solid var(--dsw-alias-border-l1); }",
-  ".lc-ts-card-head b { color: var(--dsw-alias-label-primary); }",
-  ".lc-ts-card-count { margin-left: auto; }",
-  ".lc-ts-desc-body { margin: 0; padding: 8px 10px; color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow-y: auto; scrollbar-width: thin; }",
-  // Grid: name + type + required chip + description. Columns wrap on narrow
-  // rows; the description cell spans the full second row so a long blurb
-  // never breaks the one-line rhythm of name/type/required.
-  ".lc-ts-param-row { display: grid; grid-template-columns: 140px 90px 56px 1fr; column-gap: 10px; row-gap: 2px; padding: 6px 10px; border-top: 1px solid var(--dsw-alias-border-l1); font-size: 12px; align-items: baseline; }",
-  ".lc-ts-param-row:first-of-type { border-top: 0; }",
-  ".lc-ts-param-name { font-weight: 600; color: var(--dsw-alias-label-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
-  ".lc-ts-param-type { color: var(--dsw-alias-label-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
-  ".lc-ts-param-req { color: var(--dsw-alias-state-warn-primary); font-size: 11px; font-weight: 600; }",
-  ".lc-ts-param-req-off { color: var(--dsw-alias-label-secondary); font-size: 11px; }",
-  ".lc-ts-param-desc { grid-column: 1 / -1; color: var(--dsw-alias-label-secondary); line-height: 1.5; }",
-  ".lc-ts-params-empty { padding: 8px 10px; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
-  // Raw JSON toggle: a slim button that owns the open/closed state, sitting
-  // just under the parameter table. The <pre> itself only mounts when open
-  // (avoids stringifying the schema on every render and keeps the default
-  // body compact).
-  ".lc-ts-json { display: flex; flex-direction: column; gap: 4px; }",
-  ".lc-ts-json-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 11px; padding: 0; cursor: pointer; }",
-  ".lc-ts-json-toggle:hover { color: var(--dsw-alias-label-primary); text-decoration: underline; }"
-].join("\n");
-
-// src/client/assemble.ts
-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 unionTypesOf(p) {
-  const branches = [];
-  if (Array.isArray(p.anyOf)) branches.push(...p.anyOf);
-  if (Array.isArray(p.oneOf)) branches.push(...p.oneOf);
-  if (branches.length === 0) return null;
-  const parts = [];
-  for (const b of branches) {
-    if (b !== null && typeof b === "object") parts.push(typeOf(b));
-  }
-  return parts.length > 0 ? parts.join(" | ") : null;
-}
-function typeOf(p) {
-  const u = unionTypesOf(p);
-  if (u !== null) return u;
-  const t = p.type;
-  if (t === "array") {
-    const items = p.items;
-    if (items !== null && typeof items === "object") {
-      const inner = typeOf(items);
-      return "array<" + inner + ">";
-    }
-    return "array";
-  }
-  if (typeof t === "string") {
-    if (t === "object") {
-      const props = p.properties;
-      if (props !== null && typeof props === "object" && Object.keys(props).length > 0) {
-        return "object{" + Object.keys(props).length + "}";
+  if (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) {
@@ -1156,6 +523,21 @@ function NodeContent(props) {
   }
   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);
@@ -1163,7 +545,6 @@ function makeContextBrowser(kit, StackedBar) {
   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);
@@ -1228,13 +609,10 @@ function makeContextBrowser(kit, StackedBar) {
       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 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;
@@ -1312,57 +690,576 @@ function makeContextBrowser(kit, StackedBar) {
         );
       });
     };
-    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(
+    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-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,
+        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 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",
+        {
+          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-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(
+          "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,
+      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
+function makeContextModal(ctx, kit) {
+  const { t } = kit;
+  const sessions = ctx.get("sessions");
+  const StackedBar = makeStackedBar(kit);
+  const Legend = makeLegend(kit);
+  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 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);
+      const guard = takePendingConsume(sessionId);
+      if (guard === void 0 || sessions === void 0) return;
+      const scope = sessions.scope(sessionId);
+      if (scope !== void 0) scope.bail(scope, "slash/input-consume-token", { guard });
+    }, [sessionId]);
+    React.useEffect(() => {
+      if (!open) return void 0;
+      const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      const onKey = (ev) => {
+        if (ev.key !== "Escape") return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        close();
+      };
+      window.addEventListener("keydown", onKey, true);
+      return () => {
+        window.removeEventListener("keydown", onKey, true);
+        if (previous !== null && document.contains(previous)) previous.focus();
+      };
+    }, [open, close]);
+    if (!open) return null;
+    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")), /* @__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,
+      {
+        head,
+        subtitle,
+        hoverKey: hoverCat,
+        onHoverKey: setHoverCat,
+        tools: data.toolList,
+        onToolFocus: setToolFocus
+      }
+    ), /* @__PURE__ */ React.createElement(
+      ContextBrowser,
       {
-        parts,
-        height: 10,
-        hoverKey: linked ? linkKey : void 0,
-        onHoverKey: linked ? props.onHoverKey : void 0,
-        tip: false
+        data,
+        headers,
+        useSession: props.useSession,
+        loadOlderHistory: props.loadOlderHistory,
+        hoverKey: hoverCat,
+        onHoverKey: setHoverCat,
+        toolFocus,
+        onToolFocusHandled: () => {
+          setToolFocus(null);
+        }
       }
-    )), 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);
-    })));
+    ))));
   };
 }
 
+// src/client/styles.ts
+var STYLES = [
+  ".lc-root { padding: 16px 20px 32px; overflow-y: auto; height: 100%; box-sizing: border-box; color: var(--dsw-alias-label-primary); font-size: 13px; }",
+  ".lc-card { background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }",
+  ".lc-card-title { font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }",
+  ".lc-card-title-text { flex: none; white-space: nowrap; }",
+  ".lc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }",
+  ".lc-stat { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }",
+  ".lc-stat-label { color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  ".lc-stat-value { color: var(--dsw-alias-label-primary); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }",
+  ".lc-stat-sub { color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  ".lc-card-sub { font-weight: 400; color: var(--dsw-alias-label-secondary); font-size: 12px; }",
+  ".lc-gran, .lc-kinds { margin-left: auto; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 1px; }",
+  ".lc-gran-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; }",
+  ".lc-gran-btn:hover { color: var(--dsw-alias-label-primary); }",
+  ".lc-gran-on, .lc-gran-on:hover { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); }",
+  ".lc-overview-num { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }",
+  ".lc-overview-num > b { font-size: 20px; }",
+  ".lc-overview-num span { color: var(--dsw-alias-label-secondary); }",
+  // The used-percentage figure is the emphasis of the line: pushed to the
+  // right edge, large and primary-colored, with a small "used" caption.
+  ".lc-overview-pct { margin-left: auto; font-size: 11px; }",
+  ".lc-overview-pct b { font-size: 20px; color: var(--dsw-alias-label-primary); margin-right: 4px; }",
+  ".lc-stacked-wrap { position: relative; width: 100%; }",
+  ".lc-stacked { display: flex; width: 100%; border-radius: 5px; overflow: hidden; background: rgba(128,128,128,0.18); position: relative; }",
+  // Hover reference frame around the OCCUPIED region of the composition bar:
+  // 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; }",
+  ".lc-stacked > div { height: 100%; }",
+  // Hover eases: the shared composition hover (dim + segment brighten, on the
+  // overview or the mirrored browser bar) glides in and out — same 120ms
+  // rhythm as the rest of the view.
+  ".lc-stacked-seg { transition: filter 120ms ease, opacity 120ms ease; }",
+  ".lc-stacked-free { box-sizing: border-box; transition: box-shadow 120ms ease, opacity 120ms ease; }",
+  ".lc-stacked-seg-on { filter: brightness(1.18); }",
+  // 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.
+  ".lc-stacked-dim .lc-stacked-seg { opacity: 0.35; }",
+  ".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; }",
+  // 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); }",
+  // The selected chip glows with the shared hover tint (smoothly, like the
+  // browser rows) instead of snapping its weight; the dot ring on top marks
+  // the exact segment.
+  ".lc-chip-on { font-weight: 600; background: var(--dsw-alias-interactive-bg-hover); }",
+  ".lc-chip-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }",
+  ".lc-tools { margin-top: 10px; color: var(--dsw-alias-label-secondary); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }",
+  // 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; }",
+  ".lc-axis-top { top: 13px; }",
+  ".lc-axis-mid { top: 69px; }",
+  ".lc-axis-bot { top: 125px; }",
+  ".lc-chart-scroll { position: relative; flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; scrollbar-width: thin; }",
+  ".lc-chart-fade { position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; z-index: 2; }",
+  ".lc-chart-fade-l { left: 0; background: linear-gradient(to right, var(--dsw-alias-bg-layer-1), transparent); }",
+  ".lc-chart-fade-r { right: 0; background: linear-gradient(to left, var(--dsw-alias-bg-layer-1), transparent); }",
+  ".lc-chart { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 18px; box-sizing: border-box; width: max-content; min-width: 100%; }",
+  ".lc-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dsw-alias-border-l1); pointer-events: none; }",
+  ".lc-grid-top { top: 18px; }",
+  ".lc-grid-mid { top: 74px; }",
+  ".lc-bar { position: relative; width: 14px; flex: none; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 2px; transition: opacity 120ms ease, background-color 120ms ease; }",
+  // Turn-aware dimming: while a turn is focused, bars OUTSIDE the active
+  // turn fade to 35% and the whole current turn stays fully opaque.
+  ".lc-chart-dim .lc-bar { opacity: 0.35; }",
+  ".lc-chart-dim .lc-bar-in-turn { opacity: 1; }",
+  ".lc-chart-dim .lc-turn { opacity: 0.35; }",
+  ".lc-chart-dim .lc-turn-on { opacity: 1; }",
+  ".lc-chart-tip { position: absolute; top: 0; transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; }",
+  ".lc-bar:hover { background: var(--dsw-alias-bg-layer-2); }",
+  ".lc-bar-selected { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }",
+  ".lc-bar-hovered { outline: 1px dashed var(--dsw-alias-brand-primary); outline-offset: 1px; }",
+  ".lc-bar-in-turn { background: rgba(128,128,128,0.14); }",
+  ".lc-bar-stack { display: flex; flex-direction: column-reverse; width: 100%; }",
+  ".lc-bar-stack > div { width: 100%; }",
+  ".lc-bar-marker { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--dsw-alias-state-warn-primary); }",
+  // Turn strip: NEUTRAL zebra fills (inline, see TURN_FILLS) with secondary
+  // text — never the category palette, or the strip reads as a detached
+  // bottom segment of the bars above it.
+  ".lc-turns { display: flex; gap: 2px; width: max-content; min-width: 100%; margin-top: 4px; }",
+  ".lc-turn { flex: none; box-sizing: border-box; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: var(--dsw-alias-label-secondary); border-radius: 3px; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; transition: filter 120ms, opacity 120ms; }",
+  ".lc-turn-on { filter: brightness(1.35); color: var(--dsw-alias-label-primary); }",
+  ".lc-detail { margin-top: 12px; border-top: 1px solid var(--dsw-alias-border-l1); padding-top: 12px; }",
+  ".lc-detail-head { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--dsw-alias-label-secondary); }",
+  ".lc-detail-head b { color: var(--dsw-alias-label-primary); }",
+  ".lc-detail-marker { color: var(--dsw-alias-state-warn-primary); font-size: 11px; background: var(--dsw-alias-bg-layer-2); border-radius: 6px; padding: 1px 7px; }",
+  ".lc-detail-head .lc-actual { color: var(--dsw-alias-state-success-primary); }",
+  ".lc-detail-tag { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 4px; padding: 0 6px; font-size: 11px; color: var(--dsw-alias-label-secondary); }",
+  ".lc-detail-rows { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }",
+  ".lc-detail-row { display: flex; align-items: center; gap: 8px; }",
+  ".lc-detail-label { min-width: 70px; white-space: nowrap; color: var(--dsw-alias-label-secondary); }",
+  ".lc-bar-track { flex: 1; height: 5px; border-radius: 3px; background: rgba(128,128,128,0.18); overflow: hidden; display: block; }",
+  ".lc-bar-fill { display: block; height: 100%; border-radius: 3px; }",
+  ".lc-detail-num { width: 44px; text-align: right; }",
+  ".lc-detail-pct { width: 34px; text-align: right; color: var(--dsw-alias-label-secondary); }",
+  // Section rows share one 14px vertical rhythm, owned by the ROW (flex gap
+  // covers the wrapped-row axis too), never by the cards inside: a card that
+  // IS a column (head, events/messages) drops its own bottom margin, and a
+  // card stacked inside a wrapper column (overview + trend) keeps its margin
+  // as the inner gap but the last one drops it — so every section boundary
+  // measures exactly one 14px, whichever way the flex wraps.
+  ".lc-cols { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }",
+  ".lc-col { flex: 1; min-width: 280px; }",
+  ".lc-cols > .lc-card { margin-bottom: 0; }",
+  ".lc-col > .lc-card:last-child { margin-bottom: 0; }",
+  // Head row: stats board + plugin info sit side by side under the shared
+  // `lc-cols` flex — stats takes ~7/10 of the row, plugin info ~3/10, both
+  // wrap onto their own line when the available width falls below each card's
+  // min-width (so a narrow viewport keeps both readable). Both children are
+  // `.lc-card` themselves (rendered by StatsBoard / PluginInfo); the flex
+  // sizing lives on the head row's direct children so the existing card
+  // chrome doesn't change.
+  ".lc-head > .lc-card:first-child { flex: 7 1 0; min-width: 360px; }",
+  ".lc-head > .lc-card:last-child { flex: 3 1 0; min-width: 220px; }",
+  // Plugin info: two full-width rows (Plugin / GitHub), each one horizontal
+  // line with the label on the left and the value on the right — a compact
+  // definition list rather than a multi-cell grid.
+  ".lc-pi-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }",
+  // The row IS the link: an `<a>` with the label + value on one baseline.
+  // Hovering a row underlines its value — the only hover affordance.
+  ".lc-pi-row { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }",
+  ".lc-pi-row:hover .lc-pi-value { text-decoration: underline; }",
+  // Upgrade chip appended to the Plugin value when the npm registry has a
+  // newer version than the baked-in one.
+  ".lc-pi-update { color: var(--dsw-alias-state-warn-primary); font-size: 11px; margin-left: 6px; white-space: nowrap; }",
+  ".lc-pi-label { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }",
+  // min-width: 0 lets the value shrink inside the flex row and truncate with
+  // an ellipsis; without it a narrow card pushes the value over the label.
+  ".lc-pi-value { min-width: 0; color: var(--dsw-alias-label-primary); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }",
+  ".lc-events, .lc-nodes { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }",
+  ".lc-event { display: flex; align-items: center; gap: 8px; padding: 3px 0; }",
+  ".lc-event-icon { width: 18px; text-align: center; color: var(--dsw-alias-state-warn-primary); }",
+  ".lc-event-icon.lc-event-inject { color: #a855f7; }",
+  ".lc-event-icon.lc-event-model { color: var(--dsw-alias-brand-primary); }",
+  // Kind chip: the event classification at a glance; the tint matches the
+  // impact direction (inject = adds context, compaction/prune = frees it,
+  // model switch = neutral), mirroring the token sign colors below.
+  ".lc-kind { flex: none; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }",
+  ".lc-kind-inject { background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent); color: var(--dsw-alias-state-success-primary); }",
+  ".lc-kind-compaction { background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 15%, transparent); color: var(--dsw-alias-state-error-primary); }",
+  ".lc-kind-prune { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #8b5cf6; }",
+  ".lc-kind-model { background: color-mix(in srgb, var(--dsw-alias-brand-primary) 15%, transparent); color: var(--dsw-alias-brand-primary); }",
+  ".lc-event-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }",
+  ".lc-event-at { flex: none; color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; }",
+  ".lc-event-tokens { color: var(--dsw-alias-state-success-primary); 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");
 
@@ -1440,7 +1337,7 @@ function makeEventList(kit) {
 
 // src/client/meta.ts
 var PLUGIN_NAME = "dsh-context";
-var PLUGIN_VERSION = true ? "0.16.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\//, "");
 
@@ -1492,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) {
@@ -1507,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);
   };
 }
 
@@ -1516,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);
@@ -1530,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);
@@ -1604,40 +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" }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "lc-tools-label",
-        onClick: () => {
-          setToolFocus({});
-        }
-      },
-      t("tools.top")
-    ), data.toolList.slice().sort((a, b) => b.tokens - a.tokens).slice(0, 5).map((tool) => {
-      return /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          key: tool.name,
-          type: "button",
-          className: "lc-tool-chip",
-          onClick: () => {
-            setToolFocus({ tool: tool.name });
-          }
-        },
-        tool.name + " " + fmt3(tool.tokens)
-      );
-    }), data.toolList.length > 5 ? /* @__PURE__ */ React.createElement(
-      "button",
+    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,
       {
-        type: "button",
-        className: "lc-tools-more",
-        onClick: () => {
-          setToolFocus({});
-        }
-      },
-      t("tools.more", { n: data.toolList.length })
-    ) : null) : null), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, /* @__PURE__ */ React.createElement("span", { className: "lc-card-title-text" }, t("trend.title")), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("trend.hint")), /* @__PURE__ */ React.createElement("div", { className: "lc-gran" }, /* @__PURE__ */ React.createElement(
+        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" : ""),