dsh-context 0.8.0 → 0.10.0

package/lib/client.js

@@ -20,6 +20,7 @@ var DICT_ZH = {
   "overview.estimate": "tokens\uFF08\u4F30\u7B97\uFF09",
   "overview.free": "\u5269\u4F59\u7A97\u53E3",
   "overview.splitEst": "\xB7 \u5206\u7C7B\u6309\u4F30\u7B97\u6BD4\u4F8B\u5206\u914D",
+  "overview.ofUsed": "\u5360\u5DF2\u7528\u4E0A\u4E0B\u6587",
   "stats.title": "\u4E0A\u4E0B\u6587\u7EDF\u8BA1",
   "stats.hint": "\u7EDF\u8BA1\u5F53\u524D\u4FDD\u7559\u7684\u5386\u53F2\u7A97\u53E3\uFF08\u4E0E\u8D8B\u52BF\u56FE\u4E00\u81F4\uFF09",
   "stats.turns": "\u8F6E\u6B21",
@@ -75,7 +76,9 @@ var DICT_ZH = {
   "node.calls": "\u8C03\u7528 ",
   "node.empty": "(\u7A7A\u56DE\u590D)",
   "node.nonText": "(\u975E\u6587\u672C\u6D88\u606F)",
-  "node.snapshot": "\u5FEB\u7167: "
+  "node.snapshot": "\u5FEB\u7167: ",
+  "cmd.desc": "\u67E5\u770B\u4E0A\u4E0B\u6587\u7684\u6784\u6210\u548C\u53D8\u5316",
+  "cmd.close": "\u5173\u95ED"
 };
 var DICT_EN = {
   "tab": "Context",
@@ -90,6 +93,7 @@ var DICT_EN = {
   "overview.estimate": "tokens (estimated)",
   "overview.free": "Free window",
   "overview.splitEst": "\xB7 category split is estimated",
+  "overview.ofUsed": "of used context",
   "stats.title": "Context stats",
   "stats.hint": "Over the retained history window (same as the History chart)",
   "stats.turns": "Turns",
@@ -145,9 +149,502 @@ var DICT_EN = {
   "node.calls": "calls ",
   "node.empty": "(empty reply)",
   "node.nonText": "(non-text message)",
-  "node.snapshot": "snapshot: "
+  "node.snapshot": "snapshot: ",
+  "cmd.desc": "View context makeup and how it evolves",
+  "cmd.close": "Close"
 };
 
+// src/client/modalStore.ts
+var stores = /* @__PURE__ */ new Map();
+function modalStoreOf(sessionId) {
+  const existing = stores.get(sessionId);
+  if (existing !== void 0) return existing;
+  let open = false;
+  const listeners = /* @__PURE__ */ new Set();
+  const store = {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => open,
+    set(next) {
+      if (next === open) return;
+      open = next;
+      for (const listener of listeners) listener();
+    }
+  };
+  stores.set(sessionId, store);
+  return store;
+}
+var pendingConsume = /* @__PURE__ */ new Map();
+function setPendingConsume(sessionId, guard) {
+  pendingConsume.set(sessionId, guard);
+}
+function takePendingConsume(sessionId) {
+  const guard = pendingConsume.get(sessionId);
+  if (guard !== void 0) pendingConsume.delete(sessionId);
+  return guard;
+}
+
+// src/client/command.ts
+var COMMAND = "context";
+var LINE = "/" + COMMAND;
+function registerContextCommand(ctx, kit) {
+  ctx.effect(() => {
+    const inputTriggers = ctx.get("inputTriggers");
+    if (inputTriggers === void 0) return () => {
+    };
+    return inputTriggers.registerSource({
+      trigger: "/",
+      name: COMMAND,
+      order: 1,
+      candidates: (_session, req) => {
+        if (req.position !== "leading") return Promise.resolve([]);
+        const query = req.query.trim().toLowerCase();
+        if (query !== "" && !COMMAND.startsWith(query)) return Promise.resolve([]);
+        return Promise.resolve([{ name: COMMAND, description: kit.t("cmd.desc") }]);
+      },
+      onPick: (pick) => {
+        setPendingConsume(pick.session.sessionId, { kind: "span", span: pick.span });
+        modalStoreOf(pick.session.sessionId).set(true);
+        return "handled";
+      },
+      matchEnter: (session, line) => {
+        if (line !== LINE) return Promise.resolve(void 0);
+        setPendingConsume(session.sessionId, { kind: "bare-token", token: LINE });
+        modalStoreOf(session.sessionId).set(true);
+        return Promise.resolve("handled");
+      }
+    });
+  }, "dsh-context: /context command");
+}
+
+// src/client/categories.ts
+var CATS = [
+  { key: "system", color: "#6366f1" },
+  { key: "tools", color: "#f59e0b" },
+  { key: "user", color: "#22c55e" },
+  { key: "inject", color: "#a855f7" },
+  { key: "assistant", color: "#3b82f6" },
+  { key: "tool", color: "#14b8a6" }
+];
+function partsOf(breakdown) {
+  return CATS.map((c) => {
+    return { key: c.key, color: c.color, value: breakdown[c.key] || 0 };
+  });
+}
+function anchoredParts(parts, target) {
+  if (target === null || target <= 0) return parts;
+  let total = 0;
+  for (const p of parts) total += p.value;
+  if (total <= 0 || total === target) return parts;
+  const scale = target / total;
+  return parts.map((p) => ({ ...p, value: Math.round(p.value * scale) }));
+}
+
+// src/client/headline.ts
+function headlineOf(data) {
+  const current = data.current;
+  const occ = data.occupancy;
+  const projected = occ !== void 0 && typeof occ.projectedTokens === "number" ? occ.projectedTokens : void 0;
+  const requests = data.requests || [];
+  const lastReq = requests.length > 0 ? requests[requests.length - 1] : null;
+  const derived = lastReq !== null && typeof lastReq.prompt === "number" ? lastReq.prompt + (current.total - lastReq.total) : void 0;
+  const occupancyTokens = projected ?? derived ?? null;
+  const window2 = occ !== void 0 && typeof occ.contextWindow === "number" ? occ.contextWindow : data.contextWindow;
+  const tokens = occupancyTokens ?? current.total;
+  const pct = window2 !== void 0 && window2 > 0 ? Math.min(100, Math.round(tokens / window2 * 100)) : null;
+  const parts = anchoredParts(partsOf(current), occupancyTokens !== null && tokens > 0 ? tokens : null);
+  return { tokens, window: window2, pct, parts, estimated: occupancyTokens === null };
+}
+
+// src/client/services.ts
+function timelineOf(value) {
+  if (value === null || value === void 0 || typeof value !== "object") return null;
+  return value;
+}
+
+// src/client/react.ts
+var React = require("react");
+var h = React.createElement;
+
+// src/client/components/requestDetail.tsx
+function makeRequestDetail(kit, StackedBar) {
+  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
+  return function RequestDetail(props) {
+    const req = props.request;
+    if (!req) return null;
+    const isTurn = req.stepCount !== void 0 && req.stepCount > 1;
+    const head = isTurn ? tr("detail.turn", { t: req.turn ?? 0, n: req.stepCount ?? 0 }) : tr("detail.step", { t: req.turn ?? 0, s: req.step ?? 0 });
+    const marker = props.marker ?? null;
+    const markerAt = marker !== null ? eventAt(marker) : null;
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-detail" }, /* @__PURE__ */ React.createElement("div", { className: "lc-detail-head" }, /* @__PURE__ */ React.createElement("b", null, head), marker !== null && markerAt !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-detail-marker", title: eventLabel(marker) }, "\u2702 " + markerAt) : null, isTurn ? /* @__PURE__ */ React.createElement("span", { className: "lc-detail-tag" }, t("detail.lastStep")) : null, /* @__PURE__ */ React.createElement("span", null, fmtTime2(req.time)), /* @__PURE__ */ React.createElement("span", null, tr("detail.estTotal", { n: fmt3(req.total) })), req.prompt !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-actual" }, tr("detail.actual", { n: fmt3(req.prompt) })) : null, req.output !== void 0 ? /* @__PURE__ */ React.createElement("span", null, tr("detail.output", { n: fmt3(req.output) })) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts: partsOf(req), height: 10 }), /* @__PURE__ */ React.createElement("div", { className: "lc-detail-rows" }, CATS.map((c) => {
+      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, tr, 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) + "%) " + tr("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);
+        }
+      },
+      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,
+      showBox ? /* @__PURE__ */ React.createElement("div", { className: "lc-occupied-box", style: { width: usedPct + "%" } }) : null
+    ), tip ? /* @__PURE__ */ React.createElement("div", { className: "lc-bar-tip", style: { left: tip.leftPct + "%" } }, tip.text) : null);
+  };
+}
+function makeLegend(kit) {
+  const { tr, 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: tr("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
+      );
+    }));
+  };
+}
+
+// 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, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
+  const CHART_H = 112;
+  const BAR_W = 14;
+  const BAR_GAP = 2;
+  const TURN_COLORS = ["#6366f1", "#f59e0b", "#22c55e", "#a855f7", "#3b82f6", "#14b8a6", "#ef4444", "#ec4899"];
+  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 ? tr("tip.turn", { t: req.turn ?? 0, n: req.stepCount }) : tr("tip.step", { t: req.turn ?? 0, s: req.step ?? 0 });
+      return head + " \xB7 " + fmtTime2(req.time) + " \xB7 " + tr("tip.total", { n: fmt3(req.total) }) + (req.prompt !== void 0 ? " \xB7 " + tr("tip.actual", { n: fmt3(req.prompt) }) : "");
+    };
+    const 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_COLORS[gi % TURN_COLORS.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, tr, 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 [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) : null;
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-modal-backdrop", onClick: close }, /* @__PURE__ */ React.createElement("div", { className: "lc-modal-card", onClick: (ev) => {
+      ev.stopPropagation();
+    } }, /* @__PURE__ */ React.createElement("div", { className: "lc-modal-head" }, /* @__PURE__ */ React.createElement("span", { className: "lc-modal-title" }, t("tab")), data !== null && (data.model || data.provider) ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, (data.model ? data.model : "") + (data.provider ? " \xB7 " + data.provider : "")) : null, /* @__PURE__ */ React.createElement("button", { className: "lc-modal-close", "aria-label": t("cmd.close"), onClick: close }, "\xD7")), data === null || head === null ? /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("loading")) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "lc-overview-num" }, /* @__PURE__ */ React.createElement("b", null, fmt3(head.tokens)), /* @__PURE__ */ React.createElement("span", null, head.window ? " / " + fmt3(head.window) + " " + tr("overview.ofWindow", { p: head.pct ?? 0 }) : " " + t("overview.estimate")), !head.estimated ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("overview.splitEst")) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts: head.parts, height: 16, max: head.window, hoverKey: hoverCat, onHoverKey: setHoverCat }), /* @__PURE__ */ React.createElement(Legend, { parts: head.parts, hoverKey: hoverCat, onHoverKey: setHoverCat }), /* @__PURE__ */ React.createElement("div", { className: "lc-card-title lc-modal-trend" }, t("trend.title")), turns.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("trend.empty")) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      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; }",
@@ -167,11 +664,25 @@ var STYLES = [
   ".lc-overview-num b { font-size: 20px; }",
   ".lc-overview-num span { color: var(--dsw-alias-label-secondary); }",
   ".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); }",
+  ".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: 1; box-shadow: 0 0 0 1px var(--dsw-alias-bg-layer-2); }",
   ".lc-bar-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5; white-space: nowrap; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--dsw-alias-label-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); pointer-events: none; }",
   ".lc-stacked > div { height: 100%; }",
   ".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); }",
   ".lc-chip i, .lc-detail-row i, .lc-node i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }",
@@ -247,45 +758,19 @@ var STYLES = [
   ".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; }"
+  ".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; }"
 ].join("\n");
 
-// src/client/cache.ts
-var MAX_CACHED_SESSIONS = 10;
-var sessionCache = /* @__PURE__ */ new Map();
-function cacheGet(sessionId) {
-  return sessionCache.get(sessionId);
-}
-function cachePut(sessionId, snapshot) {
-  sessionCache.set(sessionId, snapshot);
-  if (sessionCache.size > MAX_CACHED_SESSIONS) {
-    const oldest = sessionCache.keys().next().value;
-    if (oldest !== void 0) sessionCache.delete(oldest);
-  }
-}
-
-// src/client/categories.ts
-var CATS = [
-  { key: "system", color: "#6366f1" },
-  { key: "tools", color: "#f59e0b" },
-  { key: "user", color: "#22c55e" },
-  { key: "inject", color: "#a855f7" },
-  { key: "assistant", color: "#3b82f6" },
-  { key: "tool", color: "#14b8a6" }
-];
-function partsOf(breakdown) {
-  return CATS.map((c) => {
-    return { key: c.key, color: c.color, value: breakdown[c.key] || 0 };
-  });
-}
-function anchoredParts(parts, target) {
-  if (target === null || target <= 0) return parts;
-  let total = 0;
-  for (const p of parts) total += p.value;
-  if (total <= 0 || total === target) return parts;
-  const scale = target / total;
-  return parts.map((p) => ({ ...p, value: Math.round(p.value * scale) }));
-}
+// src/client/components/events.tsx
+var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
 
 // src/client/format.ts
 function fmt(n) {
@@ -302,11 +787,7 @@ function fmtTime(t) {
   return p(d.getHours()) + ":" + p(d.getMinutes()) + ":" + p(d.getSeconds());
 }
 
-// src/client/react.ts
-var React = require("react");
-var h = React.createElement;
-
-// src/client/components/events.ts
+// src/client/components/events.tsx
 var EVENT_ICONS = { compaction: "\u2702", prune: "\u2702", inject: "\uFF0B", model: "\u21C4" };
 function makeEventText(t, tr) {
   function eventLabel(ev) {
@@ -341,35 +822,20 @@ function makeEventText(t, tr) {
 function makeEventList(kit) {
   const { t, fmt: fmt3, fmtTime: fmtTime2, eventLabel, eventAt } = kit;
   return function EventList(props) {
-    if (props.events.length === 0) {
-      return h("div", { className: "lc-empty" }, t("events.empty"));
-    }
-    const sorted = props.events.slice().reverse();
-    return h(
-      "div",
-      { className: "lc-events" },
-      sorted.map((ev, i) => {
-        const label = eventLabel(ev);
-        const at = eventAt(ev);
-        return h(
-          "div",
-          { key: ev.seq + "-" + i, className: "lc-event" },
-          h("span", { className: "lc-event-icon lc-event-" + ev.kind }, EVENT_ICONS[ev.kind] || "\u2022"),
-          h("span", { className: "lc-event-label", title: label }, label),
-          at !== null ? h("span", { className: "lc-event-at" }, at) : null,
-          ev.tokens ? h(
-            "span",
-            { className: "lc-event-tokens" + (ev.kind === "inject" ? " lc-up" : " lc-down") },
-            (ev.kind === "inject" ? "+" : "\u2212") + fmt3(ev.tokens)
-          ) : null,
-          h("span", { className: "lc-event-time" }, fmtTime2(ev.time))
-        );
-      })
-    );
+    if (props.events.length === 0) {
+      return /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("events.empty"));
+    }
+    const sorted = props.events.slice().reverse();
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-events" }, sorted.map((ev, i) => {
+      const label = eventLabel(ev);
+      const at = eventAt(ev);
+      const glyph = ev.kind === "inject" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconPlusOutline16, null) : ev.kind === "model" ? /* @__PURE__ */ React.createElement(import_dsh_client_ui_primitives.IconBranchOutline16, null) : EVENT_ICONS[ev.kind] || "\u2022";
+      return /* @__PURE__ */ React.createElement("div", { key: ev.seq + "-" + i, className: "lc-event" }, /* @__PURE__ */ React.createElement("span", { className: "lc-event-icon lc-event-" + ev.kind }, glyph), /* @__PURE__ */ React.createElement("span", { className: "lc-event-label", title: label }, label), at !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-event-at" }, at) : null, ev.tokens ? /* @__PURE__ */ React.createElement("span", { className: "lc-event-tokens" + (ev.kind === "inject" ? " lc-up" : " lc-down") }, (ev.kind === "inject" ? "+" : "\u2212") + fmt3(ev.tokens)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-event-time" }, fmtTime2(ev.time)));
+    }));
   };
 }
 
-// src/client/components/nodes.ts
+// src/client/components/nodes.tsx
 function makeNodeList(kit) {
   const { t, tr, fmt: fmt3, fmtTime: fmtTime2 } = kit;
   function nodeText(n) {
@@ -385,81 +851,19 @@ function makeNodeList(kit) {
   }
   return function NodeList(props) {
     if (props.nodes.length === 0) {
-      return h("div", { className: "lc-empty" }, t("nodes.empty"));
+      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 h(
-      "div",
-      { className: "lc-nodes" },
-      props.dropped > 0 ? h("div", { className: "lc-nodes-more" }, tr("nodes.more", { n: props.dropped })) : null,
-      rows.map((n) => {
-        const text = nodeText(n);
-        return h(
-          "div",
-          { key: n.seq, className: "lc-node" },
-          h("i", { style: { background: catColor[n.cat] || "#999" } }),
-          h("span", { className: "lc-node-preview", title: text }, text),
-          // Timestamp when the host event carried one.
-          typeof n.time === "number" ? h("span", { className: "lc-node-time" }, fmtTime2(n.time)) : null,
-          h("span", { className: "lc-node-tokens" }, fmt3(n.tokens))
-        );
-      })
-    );
-  };
-}
-
-// src/client/components/requestDetail.ts
-function makeRequestDetail(kit, StackedBar) {
-  const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
-  return function RequestDetail(props) {
-    const req = props.request;
-    if (!req) return null;
-    const isTurn = req.stepCount !== void 0 && req.stepCount > 1;
-    const head = isTurn ? tr("detail.turn", { t: req.turn ?? 0, n: req.stepCount ?? 0 }) : tr("detail.step", { t: req.turn ?? 0, s: req.step ?? 0 });
-    const marker = props.marker ?? null;
-    const markerAt = marker !== null ? eventAt(marker) : null;
-    return h(
-      "div",
-      { className: "lc-detail" },
-      h(
-        "div",
-        { className: "lc-detail-head" },
-        h("b", null, head),
-        marker !== null && markerAt !== null ? h("span", { className: "lc-detail-marker", title: eventLabel(marker) }, "\u2702 " + markerAt) : null,
-        isTurn ? h("span", { className: "lc-detail-tag" }, t("detail.lastStep")) : null,
-        h("span", null, fmtTime2(req.time)),
-        h("span", null, tr("detail.estTotal", { n: fmt3(req.total) })),
-        req.prompt !== void 0 ? h("span", { className: "lc-actual" }, tr("detail.actual", { n: fmt3(req.prompt) })) : null,
-        req.output !== void 0 ? h("span", null, tr("detail.output", { n: fmt3(req.output) })) : null
-      ),
-      h(StackedBar, { parts: partsOf(req), height: 10 }),
-      h(
-        "div",
-        { className: "lc-detail-rows" },
-        CATS.map((c) => {
-          const v = req[c.key] || 0;
-          return h(
-            "div",
-            { key: c.key, className: "lc-detail-row" },
-            h("i", { style: { background: c.color } }),
-            h("span", { className: "lc-detail-label" }, catLabel(c.key)),
-            h(
-              "span",
-              { className: "lc-bar-track" },
-              h("span", { className: "lc-bar-fill", style: { width: (req.total > 0 ? v / req.total * 100 : 0) + "%", background: c.color } })
-            ),
-            h("span", { className: "lc-detail-num" }, "\u2248" + fmt3(v)),
-            h("span", { className: "lc-detail-pct" }, req.total > 0 ? Math.round(v / req.total * 100) + "%" : "")
-          );
-        })
-      )
-    );
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-nodes" }, props.dropped > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-nodes-more" }, tr("nodes.more", { n: props.dropped })) : null, rows.map((n) => {
+      const text = nodeText(n);
+      return /* @__PURE__ */ React.createElement("div", { key: n.seq, className: "lc-node" }, /* @__PURE__ */ React.createElement("i", { style: { background: catColor[n.cat] || "#999" } }), /* @__PURE__ */ React.createElement("span", { className: "lc-node-preview", title: text }, text), typeof n.time === "number" ? /* @__PURE__ */ React.createElement("span", { className: "lc-node-time" }, fmtTime2(n.time)) : null, /* @__PURE__ */ React.createElement("span", { className: "lc-node-tokens" }, fmt3(n.tokens)));
+    }));
   };
 }
 
-// src/client/components/statsBoard.ts
+// src/client/components/statsBoard.tsx
 function makeStatsBoard(kit) {
   const { t, tr, fmt: fmt3 } = kit;
   return function StatsBoard(props) {
@@ -483,345 +887,16 @@ function makeStatsBoard(kit) {
       } else if (ev.kind === "inject") injects++;
       else if (ev.kind === "model") switches++;
     }
-    const cell = (label, value, sub) => h(
-      "div",
-      { className: "lc-stat" },
-      h("span", { className: "lc-stat-label" }, label),
-      h("b", { className: "lc-stat-value" }, value),
-      sub !== void 0 ? h("span", { className: "lc-stat-sub" }, sub) : null
-    );
-    return h(
-      "div",
-      { className: "lc-card" },
-      h(
-        "div",
-        { className: "lc-card-title" },
-        t("stats.title"),
-        h("span", { className: "lc-card-sub" }, t("stats.hint"))
-      ),
-      h(
-        "div",
-        { className: "lc-stats" },
-        cell(t("stats.turns"), fmt3(turns.size)),
-        cell(t("stats.steps"), fmt3(steps)),
-        cell(
-          t("stats.recycled"),
-          recycled > 0 ? "\u2212" + fmt3(recycled) : "0",
-          tr("stats.recycleSub", { c: compactions, p: prunes })
-        ),
-        cell(t("stats.injects"), fmt3(injects)),
-        cell(t("stats.switches"), fmt3(switches)),
-        cell(t("stats.est"), "\u2248 " + fmt3(est)),
-        cell(t("stats.actualPrompt"), fmt3(prompt)),
-        cell(t("stats.output"), fmt3(output))
-      )
-    );
-  };
-}
-
-// src/client/components/stackedBar.ts
-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;
-    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 = {
-              text: catLabel(p.key) + " \u2248" + fmt3(p.value) + " (" + Math.round(p.value / total * 100) + "%)",
-              leftPct: Math.max(12, Math.min(acc + pct / 2, 88))
-            };
-            break;
-          }
-          acc += pct;
-        }
-      }
-    }
-    return h(
-      "div",
-      { className: "lc-stacked-wrap" },
-      h(
-        "div",
-        {
-          className: "lc-stacked",
-          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 h("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 ? h("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
-      ),
-      tip ? h("div", { className: "lc-bar-tip", style: { left: tip.leftPct + "%" } }, tip.text) : null
-    );
-  };
-}
-function makeLegend(kit) {
-  const { fmt: fmt3, catLabel } = kit;
-  return function Legend(props) {
-    let total = 0;
-    for (const p of props.parts) total += p.value;
-    return h(
-      "div",
-      { className: "lc-legend" },
-      props.parts.map((p) => {
-        const on = props.hoverKey !== void 0 && props.hoverKey === p.key;
-        return h(
-          "span",
-          {
-            key: p.key,
-            className: "lc-chip" + (on ? " lc-chip-on" : ""),
-            onMouseEnter: () => {
-              if (props.onHoverKey !== void 0) props.onHoverKey(p.key);
-            },
-            onMouseLeave: () => {
-              if (props.onHoverKey !== void 0) props.onHoverKey(null);
-            }
-          },
-          h("i", { style: { background: p.color } }),
-          catLabel(p.key) + " \u2248" + fmt3(p.value),
-          total > 0 ? h("em", null, Math.round(p.value / total * 100) + "%") : null
-        );
-      })
-    );
-  };
-}
-
-// src/client/components/trendChart.ts
-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, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
-  const CHART_H = 112;
-  const BAR_W = 14;
-  const BAR_GAP = 2;
-  const TURN_COLORS = ["#6366f1", "#f59e0b", "#22c55e", "#a855f7", "#3b82f6", "#14b8a6", "#ef4444", "#ec4899"];
-  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 ? tr("tip.turn", { t: req.turn ?? 0, n: req.stepCount }) : tr("tip.step", { t: req.turn ?? 0, s: req.step ?? 0 });
-      return head + " \xB7 " + fmtTime2(req.time) + " \xB7 " + tr("tip.total", { n: fmt3(req.total) }) + (req.prompt !== void 0 ? " \xB7 " + tr("tip.actual", { n: fmt3(req.prompt) }) : "");
-    };
-    const hoveredIdx = props.hoveredSeq !== null ? requests.findIndex((r) => r.seq === props.hoveredSeq) : -1;
-    const hoveredReq = hoveredIdx >= 0 ? requests[hoveredIdx] : null;
-    return h(
-      "div",
-      { className: "lc-chartrow" },
-      h(
-        "div",
-        { className: "lc-axis" },
-        h("span", { className: "lc-axis-top" }, fmt3(maxTotal)),
-        h("span", { className: "lc-axis-mid" }, fmt3(Math.round(maxTotal / 2))),
-        h("span", { className: "lc-axis-bot" }, "0")
-      ),
-      h(
-        "div",
-        {
-          // Turn-aware dim scope: while a turn is focused (bar or strip hover),
-          // bars and strip blocks OUTSIDE the active turn fade to 35%.
-          className: "lc-chart-scroll" + (props.activeTurn !== null ? " lc-chart-dim" : ""),
-          ref: scrollRef,
-          onScroll: (e) => {
-            updateEdges(e.currentTarget);
-          }
-        },
-        // Edge fades: visible whenever more history sits beyond the viewport,
-        // so the horizontal scroll affordance is obvious.
-        edges.left ? h("div", { className: "lc-chart-fade lc-chart-fade-l" }) : null,
-        // Hovering a bar previews it in the detail below; leaving the plot
-        // clears the preview (a pinned selection, if any, takes over again).
-        h(
-          "div",
-          {
-            className: "lc-chart",
-            onMouseLeave: () => {
-              props.onHover(null);
-            }
-          },
-          h("div", { className: "lc-grid lc-grid-top" }),
-          h("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 h(
-              "div",
-              {
-                key: req.seq,
-                // Uniform column width in BOTH granularities: turn aggregates
-                // keep the same fixed width as step bars.
-                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);
-                }
-              },
-              // The ✂ tooltip names the event AND where it happened: the
-              // gap between the request before and the request after.
-              marker !== void 0 ? h("span", {
-                className: "lc-bar-marker",
-                title: "\u2702 " + (markerAt !== null ? markerAt + " \u2014 " : "") + eventLabel(marker)
-              }, "\u2702") : null,
-              h(
-                "div",
-                { className: "lc-bar-stack" },
-                CATS.map((c) => {
-                  const v = (req[c.key] || 0) * anchorOf(req);
-                  if (!v) return null;
-                  return h("div", { key: c.key, style: { height: Math.max(1, Math.round(v / maxTotal * CHART_H)) + "px", background: c.color } });
-                })
-              )
-            );
-          })
-        ),
-        // Instant hover tooltip, glued to its bar's column (it lives in the
-        // scrolling content, so it follows the bar while the chart scrolls).
-        hoveredReq !== null ? h("div", {
-          className: "lc-chart-tip",
-          style: { left: hoveredIdx * (BAR_W + BAR_GAP) + BAR_W / 2 + "px" }
-        }, tipOf(hoveredReq)) : null,
-        // Turn strip: one COLOR BLOCK per turn, spanning exactly its bars'
-        // columns, so the partition reads at a glance and lines up with the
-        // steps above. Hovering a block highlights that turn's bars in the
-        // chart (and hovering a bar highlights its block — the active turn
-        // is shared hover-only state).
-        h(
-          "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 h("span", {
-              key: "turn-" + gi,
-              className: "lc-turn" + (on ? " lc-turn-on" : ""),
-              style: {
-                width: blockW + "px",
-                background: TURN_COLORS[gi % TURN_COLORS.length]
-              },
-              title: "T" + grp.turn,
-              onMouseEnter: () => {
-                props.onHoverTurn(grp.turn);
-              }
-            }, "T" + grp.turn);
-          })
-        )
-      ),
-      edges.right ? h("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null
-    );
+    const cell = (label, value, sub) => /* @__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), sub !== void 0 ? /* @__PURE__ */ React.createElement("span", { className: "lc-stat-sub" }, sub) : null);
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("stats.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("stats.hint"))), /* @__PURE__ */ React.createElement("div", { className: "lc-stats" }, cell(t("stats.turns"), fmt3(turns.size)), cell(t("stats.steps"), fmt3(steps)), cell(
+      t("stats.recycled"),
+      recycled > 0 ? "\u2212" + fmt3(recycled) : "0",
+      tr("stats.recycleSub", { c: compactions, p: prunes })
+    ), cell(t("stats.injects"), fmt3(injects)), cell(t("stats.switches"), fmt3(switches)), cell(t("stats.est"), "\u2248 " + fmt3(est)), cell(t("stats.actualPrompt"), fmt3(prompt)), cell(t("stats.output"), fmt3(output))));
   };
 }
 
-// src/client/components/contextView.ts
+// src/client/components/contextView.tsx
 var viewScroll = /* @__PURE__ */ new Map();
 function makeContextView(ctx, kit) {
   const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel } = kit;
@@ -834,19 +909,13 @@ function makeContextView(ctx, kit) {
   const StatsBoard = makeStatsBoard(kit);
   return function ContextView(props) {
     const sessionId = props.sessionId;
-    const initial = typeof sessionId === "string" && sessionId !== "" ? cacheGet(sessionId) ?? null : null;
-    const [data, setData] = React.useState(initial);
-    const [error, setError] = React.useState(null);
+    const data = typeof props.useProjection === "function" ? timelineOf(props.useProjection("contextTimeline")) : null;
     const [selectedSeq, setSelectedSeq] = React.useState(null);
     const [hoveredSeq, setHoveredSeq] = React.useState(null);
     const [hoverTurn, setHoverTurn] = React.useState(null);
     const [tick, setTick] = React.useState(0);
     const [granularity, setGranularity] = React.useState("step");
     const [hoverCat, setHoverCat] = React.useState(null);
-    const dataRef = React.useRef(initial);
-    React.useEffect(() => {
-      dataRef.current = data;
-    }, [data]);
     const rootRef = React.useRef(null);
     const scrollerRef = React.useRef(null);
     const restoredRef = React.useRef(null);
@@ -867,53 +936,15 @@ function makeContextView(ctx, kit) {
         viewScroll.set(sessionId, scroller.scrollTop);
       };
     }, [sessionId]);
-    React.useEffect(() => {
-      if (typeof sessionId !== "string" || sessionId === "") return void 0;
-      let alive = true;
-      const load = () => {
-        ctx.connection.rpc.call("/dsh-context", "snapshot", { sessionId }).then((res) => {
-          if (!alive) return;
-          if (res && res.ok) {
-            const snap = res.value;
-            cachePut(sessionId, snap);
-            setData(snap);
-            setError(null);
-          } else if (dataRef.current === null) {
-            setError(res && res.error ? String(res.error.message || res.error.code) : "failed");
-          }
-        }, (err) => {
-          if (alive && dataRef.current === null) {
-            setError(String(err instanceof Error ? err.message : err));
-          }
-        });
-      };
-      load();
-      const timerId = setInterval(() => {
-        if (document.visibilityState !== "hidden") load();
-      }, 2e3);
-      const onVisible = () => {
-        if (document.visibilityState === "visible") load();
-      };
-      document.addEventListener("visibilitychange", onVisible);
-      return () => {
-        alive = false;
-        clearInterval(timerId);
-        document.removeEventListener("visibilitychange", onVisible);
-      };
-    }, [sessionId]);
     React.useEffect(() => {
       const localeSvc = ctx.get("locale");
       if (!localeSvc) return void 0;
       return localeSvc.subscribe(() => setTick((x) => x + 1));
     }, []);
     void tick;
-    if (error) {
-      return h("div", { className: "lc-root", ref: rootRef }, h("div", { className: "lc-empty" }, t("error") + error));
-    }
     if (!data) {
-      return h("div", { className: "lc-root", ref: rootRef }, h("div", { className: "lc-empty" }, t("loading")));
+      return /* @__PURE__ */ React.createElement("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("loading")));
     }
-    const current = data.current;
     const requests = data.requests || [];
     const events = data.events || [];
     const nodes = data.nodes || [];
@@ -938,125 +969,42 @@ function makeContextView(ctx, kit) {
         break;
       }
     }
-    const occ = data.occupancy;
-    const projected = occ !== void 0 && typeof occ.projectedTokens === "number" ? occ.projectedTokens : void 0;
-    const lastReq = displayRequests.length > 0 ? displayRequests[displayRequests.length - 1] : null;
-    const derived = lastReq !== null && typeof lastReq.prompt === "number" ? lastReq.prompt + (current.total - lastReq.total) : void 0;
-    const occupancyTokens = projected ?? derived ?? null;
-    const occupancyWindow = occ !== void 0 && typeof occ.contextWindow === "number" ? occ.contextWindow : data.contextWindow;
-    const headline = occupancyTokens ?? current.total;
-    const headlinePct = occupancyWindow ? Math.min(100, Math.round(headline / occupancyWindow * 100)) : null;
-    const parts = anchoredParts(partsOf(current), occupancyTokens !== null && headline > 0 ? headline : null);
-    return h(
-      "div",
-      { className: "lc-root", ref: rootRef },
-      // ---- session context stats (over the retained window) ----
-      h(StatsBoard, { requests, events }),
-      // ---- overview ----
-      h(
-        "div",
-        { className: "lc-card" },
-        h(
-          "div",
-          { className: "lc-card-title" },
-          t("overview.title"),
-          h(
-            "span",
-            { className: "lc-card-sub" },
-            (data.model ? data.model : "") + (data.provider ? " \xB7 " + data.provider : "")
-          )
-        ),
-        h(
-          "div",
-          { className: "lc-overview-num" },
-          h("b", null, fmt3(headline)),
-          h("span", null, occupancyWindow ? " / " + fmt3(occupancyWindow) + " " + tr("overview.ofWindow", { p: headlinePct ?? 0 }) : " " + t("overview.estimate")),
-          occupancyTokens !== null ? h("span", { className: "lc-card-sub" }, t("overview.splitEst")) : null
-        ),
-        h(StackedBar, { parts, height: 16, max: occupancyWindow, hoverKey: hoverCat, onHoverKey: setHoverCat }),
-        h(Legend, { parts, hoverKey: hoverCat, onHoverKey: setHoverCat }),
-        data.toolList && data.toolList.length > 0 ? h(
-          "div",
-          { className: "lc-tools" },
-          t("tools.top"),
-          data.toolList.slice().sort((a, b) => b.tokens - a.tokens).slice(0, 5).map((tool) => {
-            return h("span", { key: tool.name, className: "lc-tool-chip" }, tool.name + " " + fmt3(tool.tokens));
-          }),
-          data.toolList.length > 5 ? h("span", { className: "lc-card-sub" }, " " + tr("tools.more", { n: data.toolList.length })) : null
-        ) : null
-      ),
-      // ---- trend ----
-      h(
-        "div",
-        { className: "lc-card" },
-        h(
-          "div",
-          { className: "lc-card-title" },
-          t("trend.title"),
-          h("span", { className: "lc-card-sub" }, t("trend.hint")),
-          h(
-            "div",
-            { className: "lc-gran" },
-            h("button", {
-              className: "lc-gran-btn" + (granularity === "step" ? " lc-gran-on" : ""),
-              onClick: () => {
-                setGranularity("step");
-              }
-            }, t("gran.step")),
-            h("button", {
-              className: "lc-gran-btn" + (granularity === "turn" ? " lc-gran-on" : ""),
-              onClick: () => {
-                setGranularity("turn");
-              }
-            }, t("gran.turn"))
-          )
-        ),
-        displayRequests.length === 0 ? h("div", { className: "lc-empty" }, t("trend.empty")) : h(
-          "div",
-          null,
-          h(TrendChart, {
-            // Remount per session: switching sessions re-anchors the chart
-            // at the newest bars instead of inheriting stale scroll state.
-            key: sessionId,
-            // The host caps the log at 160 requests; render them ALL so
-            // earlier turns/steps stay reachable via horizontal scroll.
-            requests: displayRequests,
-            markers,
-            selectedSeq: pinnedReq ? pinnedReq.seq : null,
-            hoveredSeq,
-            activeTurn,
-            granularity,
-            onSelect: setSelectedSeq,
-            onHover: setHoveredSeq,
-            onHoverTurn: setHoverTurn
-          }),
-          h(RequestDetail, { request: activeReq, marker: activeReq !== null ? markerOf(activeReq) : void 0 })
-        )
-      ),
-      // ---- events + messages ----
-      h(
-        "div",
-        { className: "lc-cols" },
-        h(
-          "div",
-          { className: "lc-card lc-col" },
-          h("div", { className: "lc-card-title" }, t("events.title")),
-          h(EventList, { events })
-        ),
-        h(
-          "div",
-          { className: "lc-card lc-col" },
-          h(
-            "div",
-            { className: "lc-card-title" },
-            t("nodes.title"),
-            h("span", { className: "lc-card-sub" }, t("nodes.hint"))
-          ),
-          h(NodeList, { nodes, dropped: data.droppedNodes || 0 })
-        )
-      ),
-      h("div", { className: "lc-foot" }, t("footer"))
-    );
+    const head = headlineOf(data);
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-root", ref: rootRef }, /* @__PURE__ */ React.createElement(StatsBoard, { requests, events }), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("overview.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, (data.model ? data.model : "") + (data.provider ? " \xB7 " + data.provider : ""))), /* @__PURE__ */ React.createElement("div", { className: "lc-overview-num" }, /* @__PURE__ */ React.createElement("b", null, fmt3(head.tokens)), /* @__PURE__ */ React.createElement("span", null, head.window ? " / " + fmt3(head.window) + " " + tr("overview.ofWindow", { p: head.pct ?? 0 }) : " " + t("overview.estimate")), !head.estimated ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("overview.splitEst")) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts: head.parts, height: 16, max: head.window, hoverKey: hoverCat, onHoverKey: setHoverCat }), /* @__PURE__ */ React.createElement(Legend, { parts: head.parts, hoverKey: hoverCat, onHoverKey: setHoverCat }), data.toolList && data.toolList.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-tools" }, t("tools.top"), data.toolList.slice().sort((a, b) => b.tokens - a.tokens).slice(0, 5).map((tool) => {
+      return /* @__PURE__ */ React.createElement("span", { key: tool.name, className: "lc-tool-chip" }, tool.name + " " + fmt3(tool.tokens));
+    }), data.toolList.length > 5 ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, " " + tr("tools.more", { n: data.toolList.length })) : null) : null), /* @__PURE__ */ React.createElement("div", { className: "lc-card" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("trend.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("trend.hint")), /* @__PURE__ */ React.createElement("div", { className: "lc-gran" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "lc-gran-btn" + (granularity === "step" ? " lc-gran-on" : ""),
+        onClick: () => {
+          setGranularity("step");
+        }
+      },
+      t("gran.step")
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "lc-gran-btn" + (granularity === "turn" ? " lc-gran-on" : ""),
+        onClick: () => {
+          setGranularity("turn");
+        }
+      },
+      t("gran.turn")
+    ))), displayRequests.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "lc-empty" }, t("trend.empty")) : /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      TrendChart,
+      {
+        key: sessionId,
+        requests: displayRequests,
+        markers,
+        selectedSeq: pinnedReq ? pinnedReq.seq : null,
+        hoveredSeq,
+        activeTurn,
+        granularity,
+        onSelect: setSelectedSeq,
+        onHover: setHoveredSeq,
+        onHoverTurn: setHoverTurn
+      }
+    ), /* @__PURE__ */ React.createElement(RequestDetail, { request: activeReq, marker: activeReq !== null ? markerOf(activeReq) : void 0 }))), /* @__PURE__ */ React.createElement("div", { className: "lc-cols" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("events.title")), /* @__PURE__ */ React.createElement(EventList, { events })), /* @__PURE__ */ React.createElement("div", { className: "lc-card lc-col" }, /* @__PURE__ */ React.createElement("div", { className: "lc-card-title" }, t("nodes.title"), /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("nodes.hint"))), /* @__PURE__ */ React.createElement(NodeList, { nodes, dropped: data.droppedNodes || 0 }))), /* @__PURE__ */ React.createElement("div", { className: "lc-foot" }, t("footer")));
   };
 }
 
@@ -1075,11 +1023,12 @@ function makeViewKit(t) {
 }
 
 // src/client/index.ts
+var NS = "dsh-context";
 function apply(ctx) {
   ctx.effect(() => {
-    return ctx.locale.register("dsh-context", { zh: DICT_ZH, en: DICT_EN });
+    return ctx.locale.register(NS, { zh: DICT_ZH, en: DICT_EN });
   }, "dsh-context: dictionaries");
-  const t = ctx.locale.bind("dsh-context");
+  const t = ctx.locale.bind(NS);
   ctx.effect(() => {
     const tag = document.createElement("style");
     tag.setAttribute("data-plugin", "dsh-context");
@@ -1089,18 +1038,34 @@ function apply(ctx) {
       if (tag.parentNode !== null) tag.parentNode.removeChild(tag);
     };
   }, "dsh-context: styles");
-  const ContextView = makeContextView(ctx, makeViewKit(t));
+  const kit = makeViewKit(t);
+  const ContextView = makeContextView(ctx, kit);
   ctx.slots.inject("conversation.view", () => {
     return ctx.slots.register(
-      // order 20 renders right of Chat (0) and Trajectory (10).
-      { name: "conversation.view", id: "context", order: 20, label: () => t("tab") },
+      // order 20 renders right of Chat (0) and Trajectory (10); the locale
+      // namespace put the framework `t` seat on the component's props too.
+      { name: "conversation.view", id: "context", order: 20, locale: NS, label: () => t("tab") },
       (props) => h(ContextView, props)
     );
   });
+  registerContextCommand(ctx, kit);
+  const ContextModal = makeContextModal(ctx, kit);
+  ctx.slots.inject("conversation.input.overlay", () => {
+    return ctx.slots.register(
+      {
+        name: "conversation.input.overlay",
+        id: "context-modal",
+        order: 10,
+        locale: NS,
+        inject: (sessionId) => ({ hooks: { contextModal: modalStoreOf(sessionId) } })
+      },
+      (props) => h(ContextModal, props)
+    );
+  });
 }
 module.exports = {
   name: "dsh-context",
-  inject: ["connection", "slots", "locale"],
+  inject: ["slots", "locale"],
   apply
 };