@cesarus777/opencode-cgp 0.2.1 → 0.2.2

package/README.md

@@ -41,7 +41,7 @@ Global configuration is `~/.config/opencode/opencode.jsonc` (or the OpenCode con
 
 Restart/reload OpenCode and look for `context-guard: observe; diagnostics ...`. Observe mode records policy decisions and never requests compaction; OpenCode's own automatic compaction remains active. Inspect diagnostics first, then set `mode` to `enforce` to admit native compaction at runtime step boundaries. The complete [example](examples/opencode.jsonc) includes model, role, and agent policies. **Last matching rule wins**; selectors within a rule are ANDed.
 
-Pin the exact published version in the existing entry's `package` field or use the manager. Version `0.2.1` includes performance metrics, history charts, and CLI reports.
+Pin the exact published version in the existing entry's `package` field or use the manager. Version `0.2.2` adds live context-capacity charts, single-metric performance chart navigation, panel padding, and persistent close controls.
 
 ```sh
 opencode plugin add @cesarus777/opencode-cgp@0.2.1
@@ -96,13 +96,13 @@ A provider measurement refers to its **completed request**, not the next assembl
 
 ## Native TUI
 
-Open `/context-guard` or **Open Context Guard** in the command palette for current prompt occupancy, effective input capacity, trigger/headroom, measurement freshness, compaction phase and nested agent status. A native sidebar section appears where the host mounts its sidebar; the panel also works on child routes and narrow terminals. Estimates, unknown values, stale measurements and uncertain compaction remain explicit.
+Open `/context-guard` or **Open Context Guard** in the command palette for current prompt occupancy, effective input capacity, trigger/headroom, measurement freshness, compaction phase and nested agent status. A native sidebar section appears where the host mounts its sidebar; the panel also works on child routes and narrow terminals. The main session includes a live context chart scaled to its full effective input capacity, with a horizontal compaction threshold and recent usage samples. Key values stay visible as text. Estimates, unknown values, stale measurements and uncertain compaction remain explicit.
 
 The TUI reads bounded snapshots over public OpenCode RPC, including when telemetry is disabled. Remote clients also need a client-side package registration in `cli.json`; see [the example](examples/cli.jsonc) and [controls, installation and bounds](docs/configuration.md#native-context-guard-view). It targets the inspected 2.0.29 API. The actual local host passes wide root, child and narrow grandchild panel checks. Use **Context Guard: open panel** above a child composer, where the host hides its usual prompt and palette shortcut. tmux, Neovim and cross-machine remote validation remain open.
 
 Per-session live TPS, average model throughput, average session throughput and observed TTFT appear in the selected session and child rows. Live TPS and TTFT use `~` to mark estimates; completed rates use provider totals. Configurable local history defaults to seven days with a 64 MiB total cap, independently of diagnostic telemetry. See [metric definitions and history exports](docs/configuration.md#live-performance-and-retained-history).
 
-Press **c** in the Context Guard panel for retained-history terminal charts; use **[ / ]** to change the time window and **Up / Down** to select an agent instance. Generate a self-contained interactive browser report with `bun run charts /absolute/history-directory --output report.html`. It includes filters, UTC timestamp tooltips, request statistics and SVG export. Installed packages expose the same command as `context-guard charts ...` (Bun required). See [chart controls and limits](docs/configuration.md#performance-charts).
+Press **c** in the Context Guard panel for retained-history terminal charts. View one metric at a time with **Left / Right**, change the time window with **[ / ]**, and select an agent instance with **Up / Down**. Press **c** to return or **q** to close the panel; controls stay visible below the scrollable content. Generate a self-contained interactive browser report with `bun run charts /absolute/history-directory --output report.html`. It includes filters, UTC timestamp tooltips, request statistics and SVG export. Installed packages expose the same command as `context-guard charts ...` (Bun required). See [chart controls and limits](docs/configuration.md#performance-charts).
 
 ## Inspect
 

package/dist/tui.js

@@ -313,8 +313,8 @@ function uniqueRows(value) {
 
 // src/tui.tsx
 import { effect as _$effect5 } from "@opentui/solid";
-import { createTextNode as _$createTextNode4 } from "@opentui/solid";
-import { insertNode as _$insertNode4 } from "@opentui/solid";
+import { createTextNode as _$createTextNode3 } from "@opentui/solid";
+import { insertNode as _$insertNode5 } from "@opentui/solid";
 import { setProp as _$setProp5 } from "@opentui/solid";
 import { createElement as _$createElement5 } from "@opentui/solid";
 import { createComponent as _$createComponent5 } from "@opentui/solid";
@@ -1224,6 +1224,61 @@ function performanceLines(row2, width) {
   ];
 }
 
+// src/tui/contextchart.ts
+function updateContextTrace(previous, row2) {
+  const snapshot = row2?.snapshot;
+  const model = snapshot?.model ?? row2?.node.model;
+  const capacity = snapshot?.capacityTokens;
+  const sessionId = row2?.node.sessionId ?? "";
+  const samples = previous?.sessionId === sessionId && previous.model === model && previous.capacity === capacity ? previous.samples : [];
+  const measurement2 = snapshot?.measurement;
+  const valid2 = (row2?.freshness === "fresh" || row2?.freshness === "stale") && measurement2 && Number.isFinite(measurement2.tokens) && measurement2.tokens >= 0;
+  const at = measurement2?.at ?? snapshot?.observedAt;
+  let next = samples;
+  if (at !== undefined && Number.isFinite(at)) {
+    const sample = {
+      at,
+      ...valid2 ? { tokens: measurement2.tokens } : {}
+    };
+    const last = samples.at(-1);
+    if (!last || at > last.at)
+      next = [...samples, sample].slice(-96);
+    else if (at === last.at && sample.tokens !== last.tokens)
+      next = [...samples.slice(0, -1), sample];
+  }
+  return { sessionId, model, capacity, samples: next };
+}
+function contextChart(samples, capacity, trigger, width) {
+  if (capacity === undefined || !Number.isFinite(capacity) || capacity <= 0 || width < 4)
+    return [];
+  const height = 8;
+  const gutter = width >= 16 ? 4 : 0;
+  const size = Math.max(1, Math.min(96, width - gutter - 2));
+  const values = samples.slice(-size);
+  const offset = size - values.length;
+  const thresholdRow = trigger !== undefined && Number.isFinite(trigger) && trigger >= 0 && trigger <= capacity ? Math.round((1 - trigger / capacity) * (height - 1)) : -1;
+  const blocks = " \u2581\u2582\u2583\u2584\u2585\u2586\u2587\u2588";
+  const lines = Array.from({ length: height }, (_, row2) => {
+    const threshold = row2 === thresholdRow;
+    const axis = gutter ? (row2 === 0 ? "100%" : row2 === height - 1 ? "0%" : "").padStart(gutter) : "";
+    const plot = Array.from({ length: size }, (_2, col) => {
+      const value = values[col - offset]?.tokens;
+      const fill = value === undefined ? 0 : Math.max(0, Math.min(8, Math.ceil((Math.min(value / capacity, 1) * height - (height - row2 - 1)) * 8)));
+      if (threshold)
+        return fill > 0 ? "\u2542" : "\u2504";
+      if (value === 0 && row2 === height - 1)
+        return "\u2581";
+      return blocks[fill] ?? " ";
+    }).join("");
+    return { line: `${axis}\u2502${plot}\u2502`, threshold };
+  });
+  lines.push({
+    line: `${" ".repeat(gutter)}\u2514${"\u2500".repeat(size)}\u2518`,
+    threshold: false
+  });
+  return lines;
+}
+
 // src/tui/compact.tsx
 import { createTextNode as _$createTextNode } from "@opentui/solid";
 import { insertNode as _$insertNode } from "@opentui/solid";
@@ -1258,7 +1313,7 @@ function progress(ratio, width) {
   const filled = valid2 ? Math.round(Math.min(1, ratio) * size) : 0;
   return clip("\u2588".repeat(filled) + "\u2591".repeat(size - filled) + " " + label, width);
 }
-function mainSections(row2, width, age) {
+function mainSections(row2, width, age, samples) {
   if (!row2)
     return [{ tone: "base", lines: wrap("Loading session family...", width) }];
   const s = row2.snapshot, m = s?.measurement;
@@ -1279,7 +1334,14 @@ function mainSections(row2, width, age) {
         ...columns("Context", `${tokens(measured)} / ${tokens(s?.capacityTokens)}`, width)
       ]
     },
-    { tone: "pressure", lines: [progress(ratio(s?.capacityTokens), width)] },
+    ...contextChart(samples ?? (m && valid2 ? [{ at: m.at, tokens: m.tokens }] : []), s?.capacityTokens, s?.policy.triggerTokens, width).map(({ line, threshold }) => ({
+      tone: threshold ? "threshold" : "pressure",
+      lines: [line]
+    })),
+    {
+      tone: "base",
+      lines: wrap(`${ratio(s?.capacityTokens) === undefined ? "?" : Math.round((ratio(s?.capacityTokens) ?? 0) * 100)}% used \xB7 recent samples \u2192 now`, width)
+    },
     {
       tone: "base",
       lines: [
@@ -1290,7 +1352,8 @@ function mainSections(row2, width, age) {
     {
       tone: "pressure",
       lines: [
-        progress(ratio(s?.policy.triggerTokens), width),
+        ...wrap(`${ratio(s?.policy.triggerTokens) === undefined ? "?" : Math.round((ratio(s?.policy.triggerTokens) ?? 0) * 100)}% of threshold \xB7 \u2504 trigger`, width),
+        ...s?.capacityTokens !== undefined && s.policy.triggerTokens !== undefined && s.policy.triggerTokens > s.capacityTokens ? wrap("Threshold above chart capacity", width) : [],
         ...wrap(remaining === undefined ? "Compaction distance unknown" : remaining < 0 ? `${tokens(-remaining)} tokens over threshold` : `${tokens(remaining)} tokens until compaction`, width)
       ]
     },
@@ -1408,6 +1471,7 @@ function CompactSidebar(props) {
     setCollapsed(new Set);
   });
   const current = createMemo(() => props.rows.find((r) => r.node.sessionId === props.sessionID));
+  const trace = createMemo((previous) => updateContextTrace(previous, current()));
   const tree = createMemo(() => subagentTree(props.rows, props.sessionID, collapsed(), hideCompleted(), byPressure()));
   const entries = createMemo(() => new Map(tree().visible.map((entry) => [entry.row.node.sessionId, entry])));
   const toggle = (id) => setCollapsed((previous) => {
@@ -1497,7 +1561,7 @@ function CompactSidebar(props) {
     });
     _$insert(_el$2, _$createComponent(Index, {
       get each() {
-        return mainSections(current(), width(), props.state.age(props.sessionID));
+        return mainSections(current(), width(), props.state.age(props.sessionID), trace().samples);
       },
       children: (section2) => _$createComponent(Index, {
         get each() {
@@ -1506,7 +1570,7 @@ function CompactSidebar(props) {
         children: (line) => (() => {
           var _el$13 = _$createElement("text");
           _$insert(_el$13, () => line() || " ");
-          _$effect((_$p) => _$setProp(_el$13, "fg", section2().tone === "execution" ? executionColor(current()) : section2().tone === "pressure" ? pressureColor(current()) : section2().tone === "measurement" ? current()?.freshness === "fresh" ? colors().muted : colors().feedback.warning.base : colors().base, _$p));
+          _$effect((_$p) => _$setProp(_el$13, "fg", section2().tone === "execution" ? executionColor(current()) : section2().tone === "threshold" ? colors().feedback.warning.base : section2().tone === "pressure" ? pressureColor(current()) : section2().tone === "measurement" ? current()?.freshness === "fresh" ? colors().muted : colors().feedback.warning.base : colors().base, _$p));
           return _el$13;
         })()
       })
@@ -1652,6 +1716,8 @@ function GuardView(props) {
   onCleanup(() => consumer.release());
   const rows = createMemo2(() => props.family ?? props.state.rows([], !props.expanded));
   const current = createMemo2(() => rows().find((row2) => row2.node.sessionId === props.sessionID));
+  const trace = createMemo2((previous) => updateContextTrace(previous, props.expanded ? current() : undefined));
+  const chart = createMemo2(() => contextChart(trace().samples, current()?.snapshot?.capacityTokens, current()?.snapshot?.policy.triggerTokens, props.width));
   const detail = createMemo2(() => {
     const lines = detailLines(current(), props.width, props.expanded, props.state.age(props.sessionID));
     if (props.expanded) {
@@ -1719,26 +1785,48 @@ function GuardView(props) {
       _$insert2(_el$5, () => clip(`${props.state.connection()} / ${props.state.health()?.enforcement ?? "?"}`, props.width));
       _$insert2(_el$, _$createComponent2(For2, {
         get each() {
-          return detail();
+          return chart();
         },
-        children: (line) => (() => {
+        children: (item) => (() => {
           var _el$1 = _$createElement2("text");
-          _$insert2(_el$1, line);
-          _$effect2((_$p) => _$setProp2(_el$1, "fg", props.context.theme.text.base, _$p));
+          _$insert2(_el$1, () => item.line);
+          _$effect2((_$p) => _$setProp2(_el$1, "fg", item.threshold ? props.context.theme.text.feedback.warning.base : props.context.theme.text.muted, _$p));
           return _el$1;
         })()
       }), _el$6);
       _$insert2(_el$, _$createComponent2(For2, {
         get each() {
-          return props.state.health()?.reasons ?? [];
+          return wrap("Recent context samples \u2192 now \xB7 \u2504 trigger", props.width);
         },
-        children: (reason) => (() => {
+        children: (line) => (() => {
           var _el$10 = _$createElement2("text");
-          _$insert2(_el$10, () => clip(reason, props.width));
-          _$effect2((_$p) => _$setProp2(_el$10, "fg", props.context.theme.text.feedback.warning.base, _$p));
+          _$insert2(_el$10, line);
+          _$effect2((_$p) => _$setProp2(_el$10, "fg", props.context.theme.text.muted, _$p));
           return _el$10;
         })()
       }), _el$6);
+      _$insert2(_el$, _$createComponent2(For2, {
+        get each() {
+          return detail();
+        },
+        children: (line) => (() => {
+          var _el$11 = _$createElement2("text");
+          _$insert2(_el$11, line);
+          _$effect2((_$p) => _$setProp2(_el$11, "fg", props.context.theme.text.base, _$p));
+          return _el$11;
+        })()
+      }), _el$6);
+      _$insert2(_el$, _$createComponent2(For2, {
+        get each() {
+          return props.state.health()?.reasons ?? [];
+        },
+        children: (reason) => (() => {
+          var _el$12 = _$createElement2("text");
+          _$insert2(_el$12, () => clip(reason, props.width));
+          _$effect2((_$p) => _$setProp2(_el$12, "fg", props.context.theme.text.feedback.warning.base, _$p));
+          return _el$12;
+        })()
+      }), _el$6);
       _$insert2(_el$6, (() => {
         var _c$2 = _$memo2(() => props.state.health()?.mode === "observe");
         return () => _c$2() ? current()?.pressure === "crossed" ? "Observe: would compact" : "Observe: no admission" : "";
@@ -1752,9 +1840,9 @@ function GuardView(props) {
           return visible();
         },
         children: (row2) => (() => {
-          var _el$11 = _$createElement2("box");
-          _$setProp2(_el$11, "flexDirection", "column");
-          _$setProp2(_el$11, "onMouseDown", () => {
+          var _el$13 = _$createElement2("box");
+          _$setProp2(_el$13, "flexDirection", "column");
+          _$setProp2(_el$13, "onMouseDown", () => {
             if (row2.hidden)
               props.state.expand(row2.node.sessionId);
             else {
@@ -1766,19 +1854,19 @@ function GuardView(props) {
               });
             }
           });
-          _$insert2(_el$11, _$createComponent2(For2, {
+          _$insert2(_el$13, _$createComponent2(For2, {
             get each() {
               return rowLines(row2, Math.max(1, props.width - (props.expanded ? 2 : 0))).map((line) => props.expanded ? `${row2.node.sessionId === props.selectedId ? ">" : " "} ${line}` : line);
             },
             children: (line) => (() => {
-              var _el$12 = _$createElement2("text");
-              _$insert2(_el$12, line);
-              _$effect2((_$p) => _$setProp2(_el$12, "fg", row2.pressure === "crossed" ? props.context.theme.text.feedback.error.base : row2.pressure === "near" ? props.context.theme.text.feedback.warning.base : props.context.theme.text.base, _$p));
-              return _el$12;
+              var _el$14 = _$createElement2("text");
+              _$insert2(_el$14, line);
+              _$effect2((_$p) => _$setProp2(_el$14, "fg", row2.pressure === "crossed" ? props.context.theme.text.feedback.error.base : row2.pressure === "near" ? props.context.theme.text.feedback.warning.base : props.context.theme.text.base, _$p));
+              return _el$14;
             })()
           }));
-          _$effect2((_$p) => _$setProp2(_el$11, "id", `context-guard.row.${row2.node.sessionId}`, _$p));
-          return _el$11;
+          _$effect2((_$p) => _$setProp2(_el$13, "id", `context-guard.row.${row2.node.sessionId}`, _$p));
+          return _el$13;
         })()
       }), _el$0);
       _$setProp2(_el$0, "onMouseDown", () => props.context.ui.panel.open("context-guard.monitor"));
@@ -1810,18 +1898,18 @@ function GuardView(props) {
 
 // src/tui/panel.tsx
 import { effect as _$effect4 } from "@opentui/solid";
-import { createTextNode as _$createTextNode3 } from "@opentui/solid";
-import { insertNode as _$insertNode3 } from "@opentui/solid";
 import { memo as _$memo3 } from "@opentui/solid";
+import { insertNode as _$insertNode4 } from "@opentui/solid";
 import { insert as _$insert4 } from "@opentui/solid";
 import { createComponent as _$createComponent4 } from "@opentui/solid";
-import { setProp as _$setProp4 } from "@opentui/solid";
 import { use as _$use } from "@opentui/solid";
+import { setProp as _$setProp4 } from "@opentui/solid";
 import { createElement as _$createElement4 } from "@opentui/solid";
-import { createSignal as createSignal4, createMemo as createMemo3, createEffect as createEffect4, onCleanup as onCleanup3, Show as Show3 } from "solid-js";
+import { createSignal as createSignal4, createMemo as createMemo3, createEffect as createEffect4, onCleanup as onCleanup3, Show as Show3, For as For4 } from "solid-js";
 
 // src/tui/charts.tsx
 import { effect as _$effect3 } from "@opentui/solid";
+import { insertNode as _$insertNode3 } from "@opentui/solid";
 import { insert as _$insert3 } from "@opentui/solid";
 import { createComponent as _$createComponent3 } from "@opentui/solid";
 import { setProp as _$setProp3 } from "@opentui/solid";
@@ -1829,7 +1917,7 @@ import { createElement as _$createElement3 } from "@opentui/solid";
 import { createEffect as createEffect3, createSignal as createSignal3, onCleanup as onCleanup2, For as For3 } from "solid-js";
 
 // src/tui/chartformat.ts
-function sparkline(points, from, to, width, gaps = []) {
+function columns2(points, from, to, width, gaps = []) {
   const size = Math.max(1, Math.min(120, Math.floor(width))), values = Array.from({ length: size });
   const column = (time) => Math.max(0, Math.min(size - 1, Math.floor((time - from) / Math.max(1, to - from) * (size - 1))));
   let min = Infinity, max = -Infinity;
@@ -1841,6 +1929,13 @@ function sparkline(points, from, to, width, gaps = []) {
     const i = column(point.time);
     values[i] = Math.max(values[i] ?? -Infinity, point.value);
   }
+  for (const time of gaps)
+    if (time >= from && time <= to)
+      values[column(time)] = undefined;
+  return { values, column, min, max };
+}
+function sparkline(points, from, to, width, gaps = []) {
+  const { values, column, min, max } = columns2(points, from, to, width, gaps);
   const bars = "\u2581\u2582\u2583\u2584\u2585\u2586\u2587\u2588";
   const chars = values.map((v) => v === undefined ? " " : bars[Math.min(7, Math.floor(v / Math.max(1, max) * 7))] ?? "\u2581");
   for (const time of gaps)
@@ -1848,20 +1943,58 @@ function sparkline(points, from, to, width, gaps = []) {
       chars[column(time)] = "\u2506";
   return { line: chars.join(""), ...min === Infinity ? {} : { min, max } };
 }
-function historyChartLines(result, width, from, to) {
+var chartMetrics = [
+  { label: "Live TPS ~", unit: "t/s", key: "liveTps", source: "points" },
+  { label: "Avg model", unit: "t/s", key: "averageModelTps", source: "points" },
+  {
+    label: "Avg session",
+    unit: "t/s",
+    key: "averageSessionTps",
+    source: "points"
+  },
+  { label: "TTFT ~", unit: "s", key: "ttftMs", source: "requests" },
+  { label: "Request throughput", unit: "t/s", key: "tps", source: "requests" },
+  {
+    label: "Cumulative output",
+    unit: "tokens",
+    key: "sessionOutputTokens",
+    source: "points"
+  }
+];
+function metricPlot(points, from, to, width, gaps = []) {
+  const label = (value) => value >= 1e6 ? `${(value / 1e6).toFixed(1)}M` : value >= 1000 ? `${(value / 1000).toFixed(1)}k` : value.toFixed(1);
+  const peak = Math.max(0, ...points.filter((p) => p.time >= from && p.time <= to && Number.isFinite(p.value)).map((p) => p.value ?? 0));
+  const scale = Math.max(1, peak);
+  const gutter = width >= 20 ? Math.max(label(scale).length, 3) : 0;
+  const { values, column } = columns2(points, from, to, Math.max(1, width - gutter - 2), gaps);
+  const gapColumns = new Set(gaps.filter((time) => time >= from && time <= to).map(column));
+  const height = 6;
+  const blocks = " \u2581\u2582\u2583\u2584\u2585\u2586\u2587\u2588";
+  const lines = Array.from({ length: height }, (_, row2) => {
+    const axis = gutter ? (row2 === 0 ? label(scale) : row2 === height - 1 ? "0.0" : "").padStart(gutter) : "";
+    return `${axis}\u2502${values.map((value, i) => {
+      if (gapColumns.has(i))
+        return "\u2506";
+      if (value === undefined)
+        return " ";
+      const fill = Math.max(0, Math.min(8, Math.ceil((value / scale * height - (height - row2 - 1)) * 8)));
+      return value === 0 && row2 === height - 1 ? "\u2581" : blocks[fill];
+    }).join("")}\u2502`;
+  });
+  lines.push(`${" ".repeat(gutter)}\u2514${"\u2500".repeat(values.length)}\u2518`);
+  const start = new Date(from).toISOString().slice(11, 16), end = new Date(to).toISOString().slice(11, 16);
+  const axisWidth = values.length + 2;
+  if (axisWidth >= 11)
+    lines.push(`${" ".repeat(gutter)}${start}${" ".repeat(axisWidth - 10)}${end}`);
+  return lines;
+}
+function historyChartLines(result, width, from, to, metricIndex = 0) {
   if (!result.enabled)
     return wrap("History recording is disabled on this server.", width);
   const series = result.data.series[0];
   if (!series)
     return wrap("No retained measurements in this window.", width);
   const gaps = result.data.gaps.map((g) => g.time);
-  const chart = (label, unit, points) => {
-    const plotted = sparkline(points, from, to, width - 2, gaps);
-    return [
-      ...wrap(`${label}${plotted.min === undefined ? ": unavailable" : ` \xB7 ${plotted.min.toFixed(1)}\u2013${plotted.max?.toFixed(1)} ${unit}`}`, width),
-      `\u2502${plotted.line}\u2502`
-    ];
-  };
   const observations = (key) => series.points.map((p) => ({
     time: p.time,
     ...p[key] === undefined ? {} : { value: p[key] }
@@ -1870,20 +2003,17 @@ function historyChartLines(result, width, from, to) {
     time: p.time,
     ...p[key] === undefined ? {} : { value: key === "ttftMs" ? p[key] / 1000 : p[key] }
   }));
+  const metric2 = chartMetrics[metricIndex] ?? chartMetrics[0];
+  const points = metric2.source === "points" ? observations(metric2.key) : requests(metric2.key);
+  const plotted = sparkline(points, from, to, width - 2, gaps);
   return [
-    ...chart("Live TPS ~", "t/s", observations("liveTps")),
-    "",
-    ...chart("Avg model", "t/s", observations("averageModelTps")),
-    "",
-    ...chart("Avg session", "t/s", observations("averageSessionTps")),
-    "",
-    ...chart("TTFT ~", "s", requests("ttftMs")),
-    "",
-    ...chart("Request throughput", "t/s", requests("tps")),
+    ...wrap(`\u2039 ${metric2.label} \u203A \xB7 ${metricIndex + 1}/${chartMetrics.length}`, width),
+    ...wrap(plotted.min === undefined ? "No measurements for this metric." : `${plotted.min.toFixed(1)}\u2013${plotted.max?.toFixed(1)} ${metric2.unit} \xB7 observed range`, width),
     "",
-    ...chart("Cumulative output", "tokens", observations("sessionOutputTokens")),
+    ...metricPlot(points, from, to, width, gaps),
     "",
-    ...wrap("UTC time \u2192 \xB7 observed peaks per column \xB7 blank = no sample \xB7 \u2506 = gap", width),
+    ...wrap("UTC time \u2192 \xB7 peaks per column", width),
+    ...wrap("blank = no sample \xB7 \u2506 = gap", width),
     ...wrap(`${new Date(from).toISOString()} \u2192 ${new Date(to).toISOString()}`, width),
     ...series.points.some((p) => p.partial) ? wrap("Partial timing coverage; averages include only matched model durations.", width) : [],
     ...result.truncated ? wrap("Downsampled/bounded history; some older requests or gap markers may be omitted.", width) : [],
@@ -1940,44 +2070,47 @@ function HistoryCharts(props) {
   });
   const lines = () => {
     const current = result();
-    return current ? historyChartLines(current, Math.max(4, props.width), range().from, range().to) : [];
+    return current ? historyChartLines(current, Math.max(4, props.width), range().from, range().to, props.metricIndex) : [];
   };
   return (() => {
-    var _el$ = _$createElement3("box");
+    var _el$ = _$createElement3("box"), _el$2 = _$createElement3("box");
+    _$insertNode3(_el$, _el$2);
     _$setProp3(_el$, "flexDirection", "column");
     _$insert3(_el$, _$createComponent3(For3, {
       get each() {
         return wrap(`Performance charts \xB7 ${props.sessionId}`, props.width);
       },
       children: (line) => (() => {
-        var _el$2 = _$createElement3("text");
-        _$insert3(_el$2, line);
-        _$effect3((_$p) => _$setProp3(_el$2, "fg", props.context.theme.text.base, _$p));
-        return _el$2;
+        var _el$3 = _$createElement3("text");
+        _$insert3(_el$3, line);
+        _$effect3((_$p) => _$setProp3(_el$3, "fg", props.context.theme.text.base, _$p));
+        return _el$3;
       })()
-    }), null);
+    }), _el$2);
     _$insert3(_el$, _$createComponent3(For3, {
       get each() {
         return wrap(status(), props.width);
       },
       children: (line) => (() => {
-        var _el$3 = _$createElement3("text");
-        _$insert3(_el$3, line);
-        _$effect3((_$p) => _$setProp3(_el$3, "fg", props.context.theme.text.muted, _$p));
-        return _el$3;
+        var _el$4 = _$createElement3("text");
+        _$insert3(_el$4, line);
+        _$effect3((_$p) => _$setProp3(_el$4, "fg", props.context.theme.text.muted, _$p));
+        return _el$4;
       })()
-    }), null);
-    _$insert3(_el$, _$createComponent3(For3, {
+    }), _el$2);
+    _$setProp3(_el$2, "flexDirection", "column");
+    _$setProp3(_el$2, "paddingTop", 1);
+    _$insert3(_el$2, _$createComponent3(For3, {
       get each() {
         return lines();
       },
       children: (line) => (() => {
-        var _el$4 = _$createElement3("text");
-        _$insert3(_el$4, line || " ");
-        _$effect3((_$p) => _$setProp3(_el$4, "fg", props.context.theme.text.base, _$p));
-        return _el$4;
+        var _el$5 = _$createElement3("text");
+        _$insert3(_el$5, line || " ");
+        _$effect3((_$p) => _$setProp3(_el$5, "fg", props.context.theme.text.base, _$p));
+        return _el$5;
       })()
-    }), null);
+    }));
     return _el$;
   })();
 }
@@ -1985,6 +2118,8 @@ function HistoryCharts(props) {
 // src/tui/panel.tsx
 function GuardPanel(props) {
   const [showCharts, setShowCharts] = createSignal4(false);
+  const [metricIndex, setMetricIndex] = createSignal4(0);
+  const width = () => Math.max(4, props.input.width - 4);
   const windows = [300000, 3600000, 86400000, 7 * 86400000];
   const [windowIndex, setWindowIndex] = createSignal4(1);
   const [chartRefresh, setChartRefresh] = createSignal4(0);
@@ -2034,6 +2169,27 @@ function GuardPanel(props) {
   props.context.keymap.layer(() => ({
     enabled: () => props.input.focused,
     commands: [{
+      id: "context-guard.close",
+      title: "Close Context Guard",
+      bind: "q",
+      run: () => props.input.close()
+    }, {
+      id: "context-guard.chart-previous",
+      title: "Previous chart metric",
+      bind: "left",
+      run: () => {
+        if (showCharts())
+          setMetricIndex((i) => (i + chartMetrics.length - 1) % chartMetrics.length);
+      }
+    }, {
+      id: "context-guard.chart-next",
+      title: "Next chart metric",
+      bind: "right",
+      run: () => {
+        if (showCharts())
+          setMetricIndex((i) => (i + 1) % chartMetrics.length);
+      }
+    }, {
       id: "context-guard.charts",
       title: "Toggle performance charts",
       bind: "c",
@@ -2104,20 +2260,26 @@ function GuardPanel(props) {
       }
     }]
   }));
+  const hints = () => showCharts() ? ["c back \xB7 q close", "\u2190 / \u2192 metric \xB7 \u2191 / \u2193 session", `[ / ] window \xB7 ${["5 minutes", "1 hour", "24 hours", "7 days"][windowIndex()]}`, "r refresh \xB7 Enter open session"] : ["c charts \xB7 q close", `\u2191 / \u2193 select ${offset() + 1} \xB7 Enter open`, "space expand \xB7 i inspect", "r refresh \xB7 l load more"];
   return (() => {
-    var _el$ = _$createElement4("scrollbox"), _el$2 = _$createElement4("box"), _el$6 = _$createElement4("text"), _el$8 = _$createElement4("text"), _el$9 = _$createTextNode3(`up/down select `), _el$0 = _$createTextNode3(`; Enter open`), _el$1 = _$createElement4("text"), _el$11 = _$createElement4("text"), _el$13 = _$createElement4("text");
-    _$insertNode3(_el$, _el$2);
-    _$insertNode3(_el$, _el$6);
-    _$insertNode3(_el$, _el$8);
-    _$insertNode3(_el$, _el$1);
-    _$insertNode3(_el$, _el$11);
-    _$insertNode3(_el$, _el$13);
+    var _el$ = _$createElement4("box"), _el$2 = _$createElement4("scrollbox"), _el$3 = _$createElement4("box"), _el$4 = _$createElement4("text"), _el$5 = _$createElement4("box");
+    _$insertNode4(_el$, _el$2);
+    _$insertNode4(_el$, _el$5);
+    _$setProp4(_el$, "flexDirection", "column");
+    _$setProp4(_el$, "flexGrow", 1);
+    _$setProp4(_el$, "paddingLeft", 2);
+    _$setProp4(_el$, "paddingRight", 2);
+    _$setProp4(_el$, "paddingTop", 1);
+    _$setProp4(_el$, "paddingBottom", 1);
+    _$insertNode4(_el$2, _el$3);
     _$use((value) => {
       scroll = value;
-    }, _el$);
-    _$setProp4(_el$, "flexGrow", 1);
-    _$setProp4(_el$2, "flexDirection", "column");
-    _$insert4(_el$2, _$createComponent4(GuardView, {
+    }, _el$2);
+    _$setProp4(_el$2, "flexGrow", 1);
+    _$setProp4(_el$2, "minHeight", 0);
+    _$insertNode4(_el$3, _el$4);
+    _$setProp4(_el$3, "flexDirection", "column");
+    _$insert4(_el$3, _$createComponent4(GuardView, {
       get sessionID() {
         return props.input.sessionID;
       },
@@ -2128,7 +2290,7 @@ function GuardPanel(props) {
         return props.context;
       },
       get width() {
-        return Math.max(10, props.input.width - 4);
+        return width();
       },
       expanded: true,
       get family() {
@@ -2140,24 +2302,28 @@ function GuardPanel(props) {
       get inspectId() {
         return inspectId();
       }
-    }));
-    _$insert4(_el$, _$createComponent4(Show3, {
+    }), _el$4);
+    _$insert4(_el$4, () => wrap("Guard input = prompt + caches. Native Context uses different totals.", width()).join("\n"));
+    _$insert4(_el$2, _$createComponent4(Show3, {
       get when() {
         return showCharts();
       },
       get children() {
-        return [_$createComponent4(HistoryCharts, {
+        return _$createComponent4(HistoryCharts, {
           get sessionId() {
             return selected();
           },
           get windowMs() {
             return windows[windowIndex()] ?? 3600000;
           },
+          get metricIndex() {
+            return metricIndex();
+          },
           get refresh() {
             return chartRefresh();
           },
           get width() {
-            return Math.max(4, props.input.width - 6);
+            return width();
           },
           get state() {
             return props.state;
@@ -2165,38 +2331,31 @@ function GuardPanel(props) {
           get context() {
             return props.context;
           }
-        }), (() => {
-          var _el$3 = _$createElement4("text"), _el$4 = _$createTextNode3(`[ / ] window \xB7 `);
-          _$insertNode3(_el$3, _el$4);
-          _$insert4(_el$3, () => ["5 minutes", "1 hour", "24 hours", "7 days"][windowIndex()], null);
-          _$effect4((_$p) => _$setProp4(_el$3, "fg", props.context.theme.text.muted, _$p));
-          return _el$3;
-        })()];
+        });
       }
-    }), _el$6);
-    _$insertNode3(_el$6, _$createTextNode3(`r refresh / l load more`));
-    _$insertNode3(_el$8, _el$9);
-    _$insertNode3(_el$8, _el$0);
-    _$insert4(_el$8, () => offset() + 1, _el$0);
-    _$insertNode3(_el$1, _$createTextNode3(`space expand / i inspect selected / c charts`));
-    _$insertNode3(_el$11, _$createTextNode3(`Guard input = prompt + caches.`));
-    _$insertNode3(_el$13, _$createTextNode3(`Native Context uses different totals.`));
+    }), null);
+    _$setProp4(_el$5, "flexDirection", "column");
+    _$setProp4(_el$5, "flexShrink", 0);
+    _$setProp4(_el$5, "paddingTop", 1);
+    _$insert4(_el$5, _$createComponent4(For4, {
+      get each() {
+        return hints().flatMap((hint) => wrap(hint, width()));
+      },
+      children: (line) => (() => {
+        var _el$6 = _$createElement4("text");
+        _$insert4(_el$6, line);
+        _$effect4((_$p) => _$setProp4(_el$6, "fg", props.context.theme.text.muted, _$p));
+        return _el$6;
+      })()
+    }));
     _$effect4((_p$) => {
-      var _v$ = !showCharts(), _v$2 = props.context.theme.text.muted, _v$3 = props.context.theme.text.muted, _v$4 = props.context.theme.text.muted, _v$5 = props.context.theme.text.muted, _v$6 = props.context.theme.text.muted;
-      _v$ !== _p$.e && (_p$.e = _$setProp4(_el$2, "visible", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = _$setProp4(_el$6, "fg", _v$2, _p$.t));
-      _v$3 !== _p$.a && (_p$.a = _$setProp4(_el$8, "fg", _v$3, _p$.a));
-      _v$4 !== _p$.o && (_p$.o = _$setProp4(_el$1, "fg", _v$4, _p$.o));
-      _v$5 !== _p$.i && (_p$.i = _$setProp4(_el$11, "fg", _v$5, _p$.i));
-      _v$6 !== _p$.n && (_p$.n = _$setProp4(_el$13, "fg", _v$6, _p$.n));
+      var _v$ = !showCharts(), _v$2 = props.context.theme.text.muted;
+      _v$ !== _p$.e && (_p$.e = _$setProp4(_el$3, "visible", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp4(_el$4, "fg", _v$2, _p$.t));
       return _p$;
     }, {
       e: undefined,
-      t: undefined,
-      a: undefined,
-      o: undefined,
-      i: undefined,
-      n: undefined
+      t: undefined
     });
     return _el$;
   })();
@@ -2245,7 +2404,7 @@ var tui_default = Plugin.define({
           },
           get children() {
             var _el$ = _$createElement5("text");
-            _$insertNode4(_el$, _$createTextNode4(`Context Guard: open panel`));
+            _$insertNode5(_el$, _$createTextNode3(`Context Guard: open panel`));
             _$setProp5(_el$, "onMouseDown", () => context.ui.panel.open("context-guard.monitor"));
             _$effect5((_$p) => _$setProp5(_el$, "fg", context.theme.text.muted, _$p));
             return _el$;

package/dist/types/tui/chartformat.d.ts

@@ -1,5 +1,4 @@
 import type { HistoryChartResult } from "../historycharts.js";
-/** Each cell contains an observed peak, never an interpolated or invented zero. */
 export declare function sparkline(points: readonly {
     time: number;
     value?: number;
@@ -8,4 +7,40 @@ export declare function sparkline(points: readonly {
     min?: number;
     max?: number;
 };
-export declare function historyChartLines(result: HistoryChartResult, width: number, from: number, to: number): string[];
+export declare const chartMetrics: readonly [{
+    readonly label: "Live TPS ~";
+    readonly unit: "t/s";
+    readonly key: "liveTps";
+    readonly source: "points";
+}, {
+    readonly label: "Avg model";
+    readonly unit: "t/s";
+    readonly key: "averageModelTps";
+    readonly source: "points";
+}, {
+    readonly label: "Avg session";
+    readonly unit: "t/s";
+    readonly key: "averageSessionTps";
+    readonly source: "points";
+}, {
+    readonly label: "TTFT ~";
+    readonly unit: "s";
+    readonly key: "ttftMs";
+    readonly source: "requests";
+}, {
+    readonly label: "Request throughput";
+    readonly unit: "t/s";
+    readonly key: "tps";
+    readonly source: "requests";
+}, {
+    readonly label: "Cumulative output";
+    readonly unit: "tokens";
+    readonly key: "sessionOutputTokens";
+    readonly source: "points";
+}];
+/** Plot only observed column peaks; leave missing data and gaps disconnected. */
+export declare function metricPlot(points: readonly {
+    time: number;
+    value?: number;
+}[], from: number, to: number, width: number, gaps?: readonly number[]): string[];
+export declare function historyChartLines(result: HistoryChartResult, width: number, from: number, to: number, metricIndex?: number): string[];

package/dist/types/tui/charts.d.ts

@@ -3,6 +3,7 @@ import type { GuardState } from "./state.js";
 export declare function HistoryCharts(props: {
     sessionId: string;
     windowMs: number;
+    metricIndex: number;
     refresh: number;
     width: number;
     state: GuardState;

package/dist/types/tui/compactformat.d.ts

@@ -1,12 +1,13 @@
+import { type ContextSample } from "./contextchart.js";
 import type { GuardRow } from "../family.js";
 export declare function tokens(value: number | undefined): string;
 export declare function columns(left: string, right: string, width: number): string[];
 export declare function progress(ratio: number | undefined, width: number): string;
 export interface MainSection {
-    readonly tone: "base" | "execution" | "pressure" | "measurement";
+    readonly tone: "base" | "execution" | "pressure" | "measurement" | "threshold";
     readonly lines: readonly string[];
 }
-export declare function mainSections(row: GuardRow | undefined, width: number, age: number): MainSection[];
+export declare function mainSections(row: GuardRow | undefined, width: number, age: number, samples?: readonly ContextSample[]): MainSection[];
 export declare function mainLines(row: GuardRow | undefined, width: number, age: number): string[];
 export declare const statusSymbol: {
     readonly running: "●";

package/dist/types/tui/contextchart.d.ts

@@ -0,0 +1,19 @@
+import type { GuardRow } from "../family.js";
+export interface ContextSample {
+    readonly at: number;
+    readonly tokens?: number;
+}
+export interface ContextTrace {
+    readonly sessionId: string;
+    readonly model: string | undefined;
+    readonly capacity: number | undefined;
+    readonly samples: readonly ContextSample[];
+}
+/** Keep only actual measurements, never copies made by age/render ticks. */
+export declare function updateContextTrace(previous: ContextTrace | undefined, row: GuardRow | undefined): ContextTrace;
+export interface ContextChartLine {
+    readonly line: string;
+    readonly threshold: boolean;
+}
+/** Fixed capacity scale and observation order; no interpolation across missing samples. */
+export declare function contextChart(samples: readonly ContextSample[], capacity: number | undefined, trigger: number | undefined, width: number): ContextChartLine[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cesarus777/opencode-cgp",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "exports": {
     ".": {