dsh-context 0.7.3 → 0.9.0

package/lib/client.js

@@ -19,6 +19,8 @@ var DICT_ZH = {
   "overview.ofWindow": "tokens\uFF08\u7EA6 {p}%\uFF09",
   "overview.estimate": "tokens\uFF08\u4F30\u7B97\uFF09",
   "overview.free": "\u5269\u4F59\u7A97\u53E3",
+  "overview.splitEst": "\xB7 \u5206\u7C7B\u6309\u4F30\u7B97\u6BD4\u4F8B\u5206\u914D",
+  "overview.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",
@@ -88,6 +90,8 @@ var DICT_EN = {
   "overview.ofWindow": "tokens (~{p}%)",
   "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",
@@ -165,11 +169,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; }",
@@ -196,7 +214,14 @@ var STYLES = [
   ".lc-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--dsw-alias-border-l1); pointer-events: none; }",
   ".lc-grid-top { top: 18px; }",
   ".lc-grid-mid { top: 74px; }",
-  ".lc-bar { position: relative; width: 14px; flex: none; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 2px; }",
+  ".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; }",
+  // 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; }",
@@ -205,7 +230,7 @@ var STYLES = [
   ".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); }",
   ".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: #fff; border-radius: 3px; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; transition: filter 120ms; }",
+  ".lc-turn { flex: none; box-sizing: border-box; text-align: center; font-size: 10px; line-height: 14px; font-weight: 600; color: #fff; 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); box-shadow: 0 0 0 1px rgba(255,255,255,0.4); }",
   ".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); }",
@@ -241,20 +266,6 @@ var STYLES = [
   ".lc-foot { color: var(--dsw-alias-label-secondary); font-size: 12px; margin-top: 4px; }"
 ].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" },
@@ -269,6 +280,23 @@ function partsOf(breakdown) {
     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/services.ts
+function timelineOf(value) {
+  if (value === null || value === void 0 || typeof value !== "object") return null;
+  return value;
+}
+
+// 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) {
@@ -289,7 +317,7 @@ function fmtTime(t) {
 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) {
@@ -325,34 +353,19 @@ 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"));
+      return /* @__PURE__ */ React.createElement("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))
-        );
-      })
-    );
+    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) {
@@ -368,32 +381,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))
-        );
-      })
-    );
+    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/requestDetail.ts
+// src/client/components/requestDetail.tsx
 function makeRequestDetail(kit, StackedBar) {
   const { t, tr, fmt: fmt3, fmtTime: fmtTime2, catLabel, eventLabel, eventAt } = kit;
   return function RequestDetail(props) {
@@ -403,46 +403,14 @@ function makeRequestDetail(kit, StackedBar) {
     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" }, fmt3(v)),
-            h("span", { className: "lc-detail-pct" }, req.total > 0 ? Math.round(v / req.total * 100) + "%" : "")
-          );
-        })
-      )
-    );
+    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/statsBoard.ts
+// src/client/components/statsBoard.tsx
 function makeStatsBoard(kit) {
   const { t, tr, fmt: fmt3 } = kit;
   return function StatsBoard(props) {
@@ -466,50 +434,26 @@ 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))
-      )
-    );
+    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/stackedBar.ts
+// src/client/components/stackedBar.tsx
 function makeStackedBar(kit) {
-  const { t, fmt: fmt3, catLabel } = 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) {
@@ -524,7 +468,9 @@ function makeStackedBar(kit) {
           const pct = scale > 0 ? p.value / scale * 100 : 0;
           if (p.key === props.hoverKey && p.value > 0) {
             tip = {
-              text: catLabel(p.key) + " " + fmt3(p.value) + " (" + Math.round(p.value / total * 100) + "%)",
+              // "(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;
@@ -533,75 +479,74 @@ function makeStackedBar(kit) {
         }
       }
     }
-    return h(
+    return /* @__PURE__ */ React.createElement("div", { className: "lc-stacked-wrap" }, /* @__PURE__ */ React.createElement(
       "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", {
+      {
+        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 ? h("div", {
+          }
+        );
+      }) : 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
-      ),
-      tip ? h("div", { className: "lc-bar-tip", style: { left: tip.leftPct + "%" } }, tip.text) : null
-    );
+        }
+      ) : 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 { fmt: fmt3, catLabel } = kit;
+  const { tr, 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);
-            }
+    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);
           },
-          h("i", { style: { background: p.color } }),
-          catLabel(p.key) + " " + fmt3(p.value),
-          total > 0 ? h("em", null, Math.round(p.value / total * 100) + "%") : null
-        );
-      })
-    );
+          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.ts
+// src/client/components/trendChart.tsx
 function aggregateByTurn(requests) {
   const out = [];
   let runSteps = 0;
@@ -639,8 +584,13 @@ function makeTrendChart(kit) {
   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) if (req.total > maxTotal) maxTotal = req.total;
+    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;
@@ -679,112 +629,103 @@ function makeTrendChart(kit) {
       }
       updateEdges(el);
     });
-    return h(
+    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-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(
+      {
+        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-scroll",
-          ref: scrollRef,
-          onScroll: (e) => {
-            updateEdges(e.currentTarget);
+          className: "lc-chart",
+          onMouseLeave: () => {
+            props.onHover(null);
           }
         },
-        // 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;
-            const tip = (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 })) + " \xB7 " + fmtTime2(req.time) + "\n" + tr("tip.total", { n: fmt3(req.total) }) + (req.prompt !== void 0 ? tr("tip.actual", { n: fmt3(req.prompt) }) : "") + "\n" + CATS.map((c) => catLabel(c.key) + " " + fmt3(req[c.key] || 0)).join(" / ");
-            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" },
-                title: tip,
-                onClick: () => {
-                  props.onSelect(selected ? null : req.seq);
-                },
-                onMouseEnter: () => {
-                  props.onHover(req.seq);
-                }
+        /* @__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);
               },
-              // The ✂ tooltip names the event AND where it happened: the
-              // gap between the request before and the request after.
-              marker !== void 0 ? h("span", {
+              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,
-              h(
-                "div",
-                { className: "lc-bar-stack" },
-                CATS.map((c) => {
-                  const v = req[c.key] || 0;
-                  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 } });
-                })
-              )
-            );
-          })
-        ),
-        // 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);
-          })
-        )
+              "\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 } });
+            }))
+          );
+        })
       ),
-      edges.right ? h("div", { className: "lc-chart-fade lc-chart-fade-r" }) : null
-    );
+      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/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;
   const StackedBar = makeStackedBar(kit);
@@ -796,51 +737,31 @@ 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]);
-    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);
+    const rootRef = React.useRef(null);
+    const scrollerRef = React.useRef(null);
+    const restoredRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+      if (typeof sessionId !== "string" || sessionId === "" || data === null) return;
+      if (restoredRef.current === sessionId) return;
+      restoredRef.current = sessionId;
+      const scroller = rootRef.current !== null ? rootRef.current.closest("[data-conversation-scroll]") : null;
+      if (scroller === null) return;
+      scrollerRef.current = scroller;
+      scroller.scrollTop = viewScroll.get(sessionId) ?? 0;
+    }, [sessionId, data]);
+    React.useLayoutEffect(() => {
       return () => {
-        alive = false;
-        clearInterval(timerId);
-        document.removeEventListener("visibilitychange", onVisible);
+        if (typeof sessionId !== "string" || sessionId === "") return;
+        const scroller = scrollerRef.current;
+        if (scroller === null) return;
+        viewScroll.set(sessionId, scroller.scrollTop);
       };
     }, [sessionId]);
     React.useEffect(() => {
@@ -849,11 +770,8 @@ function makeContextView(ctx, kit) {
       return localeSvc.subscribe(() => setTick((x) => x + 1));
     }, []);
     void tick;
-    if (error) {
-      return h("div", { className: "lc-root" }, h("div", { className: "lc-empty" }, t("error") + error));
-    }
     if (!data) {
-      return h("div", { className: "lc-root" }, 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 || [];
@@ -880,125 +798,50 @@ function makeContextView(ctx, kit) {
         break;
       }
     }
-    const windowPct = data.contextWindow ? Math.min(100, Math.round(current.total / data.contextWindow * 100)) : null;
-    return h(
-      "div",
-      { className: "lc-root" },
-      // ---- 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(current.total)),
-          h("span", null, data.contextWindow ? " / " + fmt3(data.contextWindow) + " " + tr("overview.ofWindow", { p: windowPct ?? 0 }) : " " + t("overview.estimate")),
-          // The provider-reported prompt of the last request is the best
-          // ground truth for what the model actually received; the fixed
-          // density heuristic can undercount CJK-heavy content, so show the
-          // real number alongside the estimate.
-          displayRequests.length > 0 && displayRequests[displayRequests.length - 1].prompt !== void 0 ? h(
-            "span",
-            { className: "lc-actual" },
-            tr("overview.actual", { n: fmt3(displayRequests[displayRequests.length - 1].prompt ?? 0) })
-          ) : null
-        ),
-        h(StackedBar, { parts: partsOf(current), height: 16, max: data.contextWindow, hoverKey: hoverCat, onHoverKey: setHoverCat }),
-        h(Legend, { parts: partsOf(current), 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 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 /* @__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(headline)), /* @__PURE__ */ React.createElement("span", null, occupancyWindow ? " / " + fmt3(occupancyWindow) + " " + tr("overview.ofWindow", { p: headlinePct ?? 0 }) : " " + t("overview.estimate")), occupancyTokens !== null ? /* @__PURE__ */ React.createElement("span", { className: "lc-card-sub" }, t("overview.splitEst")) : null), /* @__PURE__ */ React.createElement(StackedBar, { parts, height: 16, max: occupancyWindow, hoverKey: hoverCat, onHoverKey: setHoverCat }), /* @__PURE__ */ React.createElement(Legend, { 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")));
   };
 }
 
@@ -1017,11 +860,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");
@@ -1034,15 +878,16 @@ function apply(ctx) {
   const ContextView = makeContextView(ctx, makeViewKit(t));
   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)
     );
   });
 }
 module.exports = {
   name: "dsh-context",
-  inject: ["connection", "slots", "locale"],
+  inject: ["slots", "locale"],
   apply
 };