@cesarus777/opencode-cgp 0.2.3 → 0.2.5

package/README.md

@@ -2,13 +2,13 @@
 
 Configurable early compaction for root sessions and nested agents, using OpenCode's native durable compaction API. No model-limit changes, prompt injection, custom summaries, or task/workflow rewrites. Observe mode is the default.
 
-Targets **`@opencode/plugin@2.0.29`**. The published SDK, official documentation, runner implementation, and upstream continuation test were inspected. The real 2.0.29 server and native TUI now pass [local verification with a synthetic provider](docs/validation/tui-2.0.29-2026-10-16.md); real-provider compaction and Superpowers validation remain unverified. See [compatibility](docs/compatibility.md).
+Targets **`@opencode/plugin@2.0.29`**. The published SDK, official documentation, runner implementation, and upstream continuation test were inspected. The real 2.0.29 server and native TUI now pass [local verification with a synthetic provider](docs/validation/tui-2.0.29-2026-10-16.md); real-provider compaction and Superpowers validation remain unverified. OpenCode 2.1.2 also passes [local server/TUI validation](docs/validation/context-chart-2.1.2-2026-10-22.md). See [compatibility](docs/compatibility.md).
 
 ## Install
 
 The intended npm distribution is **`@cesarus777/opencode-cgp`**. It becomes available after this repository's first publication. The unscoped `opencode-context-guard` name belongs to another project; do not install it expecting this plugin.
 
-Minimum supported host: **OpenCode V2 2.0.29**. Only 2.0.29 has been tested; V1 is unsupported.
+Minimum supported host: **OpenCode V2 2.0.29**. Versions 2.0.29 and 2.1.2 have been tested locally with a synthetic provider; V1 is unsupported.
 
 After this project's first publication, register the global package through the native manager:
 
@@ -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.3` restores context usage for existing sessions when the plugin is enabled and keeps stale occupancy visible.
+Pin the exact published version in the existing entry's `package` field or use the manager. Version `0.2.5` keeps the context chart continuous through pauses, retains its history between sidebar and panel, and shows confirmed compaction drops. It also adds local OpenCode 2.1.2 validation.
 
 ```sh
 opencode plugin add @cesarus777/opencode-cgp@0.2.1
@@ -96,7 +96,7 @@ 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. 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.
+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. Pauses and temporarily lower values retain the previous chart level in gray with a dashed top; a confirmed compaction followed by reported usage permits a visible drop within the same trace. 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.
 

package/dist/tui.js

@@ -427,6 +427,131 @@ function executionStatus(known, nativeRunning, evidence) {
   return known ? "idle" : "unknown";
 }
 
+// src/tui/contextchart.ts
+function updateContextTrace(previous, row2) {
+  const snapshot = row2?.snapshot;
+  const sessionId = row2?.node.sessionId ?? "";
+  const sameSession = previous?.sessionId === sessionId;
+  const model = snapshot?.model ?? row2?.node.model ?? (sameSession ? previous?.model : undefined);
+  const capacity = snapshot?.capacityTokens ?? (sameSession && model === previous?.model ? previous?.capacity : undefined);
+  const compatible = sameSession && previous?.model === model && previous.capacity === capacity;
+  const samples = compatible ? previous.samples : [];
+  const completed = snapshot?.compaction.lastCompleted ?? (compatible ? previous.lastCompleted : undefined);
+  let pending = compatible ? previous.pendingCompleted : undefined;
+  if (completed !== undefined && completed !== previous?.lastCompleted)
+    pending = completed;
+  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 last = samples.at(-1);
+    if (!last || at >= last.at) {
+      const reset = valid2 && (at === last?.at && last.compacted === true || pending !== undefined && measurement2.at >= pending && measurement2.confidence === "reported" && measurement2.scope === "completed-request" && snapshot?.compaction.phase !== "running");
+      const waiting = pending !== undefined && !reset;
+      const tokens = valid2 && !waiting ? Math.max(reset ? 0 : last?.tokens ?? 0, measurement2.tokens) : last?.tokens;
+      const held = tokens !== undefined && (!valid2 || waiting || tokens !== measurement2.tokens);
+      const sample = {
+        at,
+        ...tokens === undefined ? {} : { tokens },
+        ...held ? { held: true } : {},
+        ...reset || at === last?.at && last.compacted ? { compacted: true } : {}
+      };
+      if (reset)
+        pending = undefined;
+      if (!last || at > last.at) {
+        const bridge = last?.tokens !== undefined && at - last.at > 2500 ? [{ at: at - 1, tokens: last.tokens, held: true }] : [];
+        next = [...samples, ...bridge, sample].slice(-96);
+      } else if (sample.tokens !== last.tokens || sample.held !== last.held || sample.compacted !== last.compacted) {
+        next = [...samples.slice(0, -1), sample];
+      }
+    }
+  }
+  return {
+    sessionId,
+    model,
+    capacity,
+    samples: next,
+    ...completed === undefined ? {} : { lastCompleted: completed },
+    ...pending === undefined ? {} : { pendingCompleted: pending }
+  };
+}
+
+class ContextTraceStore {
+  traces = new Map;
+  update(row2) {
+    if (!row2)
+      return updateContextTrace(undefined, undefined);
+    const id = row2.node.sessionId;
+    const trace = updateContextTrace(this.traces.get(id), row2);
+    this.traces.delete(id);
+    this.traces.set(id, trace);
+    if (this.traces.size > 128) {
+      const oldest = this.traces.keys().next().value;
+      if (oldest !== undefined)
+        this.traces.delete(oldest);
+    }
+    return trace;
+  }
+  clear() {
+    this.traces.clear();
+  }
+}
+function contextChart(samples, capacity, trigger, width, now) {
+  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 last = samples.at(-1);
+  const tail = now !== undefined && last?.tokens !== undefined && now - last.at > 2500 ? [{ at: now, tokens: last.tokens, held: true }] : [];
+  const values = [...samples, ...tail].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 sample = values[col - offset];
+      const value = sample?.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 (sample?.held && value !== undefined) {
+        const top = Math.min(height - 1, Math.max(0, height - Math.ceil(Math.min(value / capacity, 1) * height)));
+        if (row2 === top)
+          return "\u2508";
+        if (fill > 0)
+          return "\u2591";
+      }
+      if (threshold)
+        return fill > 0 ? "\u2542" : "\u2504";
+      if (value === 0 && row2 === height - 1)
+        return "\u2581";
+      return blocks[fill] ?? " ";
+    });
+    const line = `${axis}\u2502${plot.join("")}\u2502`;
+    if (!values.some((sample) => sample.held))
+      return { line, threshold };
+    const segments = [{ text: `${axis}\u2502`, held: false }];
+    for (let col = 0;col < plot.length; col++) {
+      const text2 = plot[col] ?? " ";
+      const held = values[col - offset]?.held === true;
+      const previous = segments.at(-1);
+      if (previous?.held === held)
+        segments[segments.length - 1] = { text: previous.text + text2, held };
+      else
+        segments.push({ text: text2, held });
+    }
+    segments.push({ text: "\u2502", held: false });
+    return { line, threshold, segments };
+  });
+  lines.push({
+    line: `${" ".repeat(gutter)}\u2514${"\u2500".repeat(size)}\u2518`,
+    threshold: false
+  });
+  return lines;
+}
+
 // src/tui/transport.ts
 class SnapshotClient {
   transport;
@@ -804,6 +929,7 @@ async function discoverFamily(client, currentId, signal, cached, maxNodes = 1024
 
 // src/tui/state.ts
 function createGuardState(context) {
+  const contextTraces = new ContextTraceStore;
   const [version, setVersion] = createSignal(0);
   const notify = () => {
     setVersion((n) => n + 1);
@@ -1050,7 +1176,11 @@ function createGuardState(context) {
       return result;
     },
     rows,
-    dispose: stop,
+    contextTrace: (row2) => contextTraces.update(row2),
+    dispose() {
+      stop();
+      contextTraces.clear();
+    },
     age(id) {
       version();
       const c = [...clients.values()].find((c2) => c2.rows.has(id));
@@ -1225,61 +1355,6 @@ 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";
@@ -1314,7 +1389,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, samples) {
+function mainSections(row2, width, age, samples, chartCapacity) {
   if (!row2)
     return [{ tone: "base", lines: wrap("Loading session family...", width) }];
   const s = row2.snapshot, m = s?.measurement;
@@ -1335,10 +1410,17 @@ function mainSections(row2, width, age, samples) {
         ...columns("Context", `${tokens(measured)} / ${tokens(s?.capacityTokens)}`, width)
       ]
     },
-    ...contextChart(samples ?? (m && valid2 ? [{ at: m.at, tokens: m.tokens }] : []), s?.capacityTokens, s?.policy.triggerTokens, width).map(({ line, threshold }) => ({
+    ...contextChart(samples ?? (m && valid2 ? [{ at: m.at, tokens: m.tokens }] : []), s?.capacityTokens ?? chartCapacity, s?.policy.triggerTokens, width, m ? m.at + age : s?.observedAt === undefined ? undefined : s.observedAt + age).map(({ line, threshold, segments }) => ({
       tone: threshold ? "threshold" : "pressure",
-      lines: [line]
+      lines: [line],
+      ...segments ? { segments } : {}
     })),
+    ...samples?.some((sample) => sample.held) || m && age > 2500 ? [
+      {
+        tone: "measurement",
+        lines: wrap("\u2508 held \xB7 last known context", width)
+      }
+    ] : [],
     {
       tone: "base",
       lines: wrap(`${ratio(s?.capacityTokens) === undefined ? "?" : Math.round((ratio(s?.capacityTokens) ?? 0) * 100)}% used \xB7 recent samples \u2192 now`, width)
@@ -1472,7 +1554,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 trace = createMemo(() => props.state.contextTrace(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) => {
@@ -1538,7 +1620,7 @@ function CompactSidebar(props) {
     const head = cells(`\u2500\u2500 ${title} `) > width() ? title : `\u2500\u2500 ${title} `;
     return clip(head, width()) + "\u2500".repeat(Math.max(0, width() - cells(head)));
   };
-  const notices = createMemo(() => [...props.context.app.version !== "2.0.29" ? wrap(`Runtime ${props.context.app.version}: unverified`, width()) : [], ...props.state.connection() !== "live" ? wrap(`Connection: ${props.state.connection()}`, width()) : [], ...props.state.health()?.mode === "observe" ? ["Observe mode"] : [], ...props.state.health()?.enforcement === "disabled" || props.state.health()?.enforcement === "suspended" ? wrap(`Guard: ${props.state.health()?.enforcement}`, width()) : [], ...(props.state.health()?.reasons ?? []).flatMap((reason) => wrap(reason, width()))]);
+  const notices = createMemo(() => [...!["2.0.29", "2.1.2"].includes(props.context.app.version) ? wrap(`Runtime ${props.context.app.version}: unverified`, width()) : [], ...props.state.connection() !== "live" ? wrap(`Connection: ${props.state.connection()}`, width()) : [], ...props.state.health()?.mode === "observe" ? ["Observe mode"] : [], ...props.state.health()?.enforcement === "disabled" || props.state.health()?.enforcement === "suspended" ? wrap(`Guard: ${props.state.health()?.enforcement}`, width()) : [], ...(props.state.health()?.reasons ?? []).flatMap((reason) => wrap(reason, width()))]);
   return (() => {
     var _el$2 = _$createElement("box"), _el$3 = _$createElement("text"), _el$5 = _$createElement("text"), _el$6 = _$createElement("text"), _el$8 = _$createElement("text"), _el$9 = _$createElement("text"), _el$0 = _$createElement("text"), _el$1 = _$createElement("text"), _el$11 = _$createElement("text"), _el$12 = _$createElement("text");
     _$insertNode(_el$2, _el$3);
@@ -1562,7 +1644,7 @@ function CompactSidebar(props) {
     });
     _$insert(_el$2, _$createComponent(Index, {
       get each() {
-        return mainSections(current(), width(), props.state.age(props.sessionID), trace().samples);
+        return mainSections(current(), width(), props.state.age(props.sessionID), trace().samples, trace().capacity);
       },
       children: (section2) => _$createComponent(Index, {
         get each() {
@@ -1570,7 +1652,29 @@ function CompactSidebar(props) {
         },
         children: (line) => (() => {
           var _el$13 = _$createElement("text");
-          _$insert(_el$13, () => line() || " ");
+          _$insert(_el$13, _$createComponent(Show, {
+            get when() {
+              return section2().segments;
+            },
+            get fallback() {
+              return line() || " ";
+            },
+            get children() {
+              return _$createComponent(For, {
+                get each() {
+                  return section2().segments;
+                },
+                children: (part) => (() => {
+                  var _el$14 = _$createElement("span");
+                  _$insert(_el$14, () => part.text);
+                  _$effect((_$p) => _$setProp(_el$14, "style", {
+                    fg: part.held ? colors().muted : section2().tone === "threshold" ? colors().feedback.warning.base : pressureColor(current())
+                  }, _$p));
+                  return _el$14;
+                })()
+              });
+            }
+          }));
           _$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;
         })()
@@ -1581,10 +1685,10 @@ function CompactSidebar(props) {
         return notices();
       },
       children: (line) => (() => {
-        var _el$14 = _$createElement("text");
-        _$insert(_el$14, line);
-        _$effect((_$p) => _$setProp(_el$14, "fg", colors().feedback.warning.base, _$p));
-        return _el$14;
+        var _el$15 = _$createElement("text");
+        _$insert(_el$15, line);
+        _$effect((_$p) => _$setProp(_el$15, "fg", colors().feedback.warning.base, _$p));
+        return _el$15;
       })()
     }), _el$3);
     _$insertNode(_el$3, _$createTextNode(` `));
@@ -1610,60 +1714,60 @@ function CompactSidebar(props) {
             return row2();
           },
           children: (item) => (() => {
-            var _el$15 = _$createElement("box"), _el$16 = _$createElement("box"), _el$18 = _$createElement("text"), _el$19 = _$createElement("span"), _el$20 = _$createElement("span"), _el$21 = _$createElement("text");
-            _$insertNode(_el$15, _el$16);
-            _$insertNode(_el$15, _el$21);
-            _$setProp(_el$15, "flexDirection", "column");
-            _$setProp(_el$15, "flexShrink", 0);
-            _$insertNode(_el$16, _el$18);
-            _$setProp(_el$16, "flexDirection", "row");
+            var _el$16 = _$createElement("box"), _el$17 = _$createElement("box"), _el$19 = _$createElement("text"), _el$20 = _$createElement("span"), _el$21 = _$createElement("span"), _el$22 = _$createElement("text");
+            _$insertNode(_el$16, _el$17);
+            _$insertNode(_el$16, _el$22);
+            _$setProp(_el$16, "flexDirection", "column");
             _$setProp(_el$16, "flexShrink", 0);
-            _$insert(_el$16, _$createComponent(Show, {
+            _$insertNode(_el$17, _el$19);
+            _$setProp(_el$17, "flexDirection", "row");
+            _$setProp(_el$17, "flexShrink", 0);
+            _$insert(_el$17, _$createComponent(Show, {
               get when() {
                 return prefix();
               },
               get children() {
-                var _el$17 = _$createElement("text");
-                _$setProp(_el$17, "onMouseDown", () => toggle(id));
-                _$insert(_el$17, prefix);
-                _$effect((_$p) => _$setProp(_el$17, "fg", colors().muted, _$p));
-                return _el$17;
+                var _el$18 = _$createElement("text");
+                _$setProp(_el$18, "onMouseDown", () => toggle(id));
+                _$insert(_el$18, prefix);
+                _$effect((_$p) => _$setProp(_el$18, "fg", colors().muted, _$p));
+                return _el$18;
               }
-            }), _el$18);
-            _$insertNode(_el$18, _el$19);
-            _$insertNode(_el$18, _el$20);
-            _$setProp(_el$18, "onMouseDown", () => props.context.ui.router.navigate({
+            }), _el$19);
+            _$insertNode(_el$19, _el$20);
+            _$insertNode(_el$19, _el$21);
+            _$setProp(_el$19, "onMouseDown", () => props.context.ui.router.navigate({
               type: "session",
               sessionID: id
             }));
-            _$insert(_el$19, () => agentHeading(item(), nameWidth()).slice(0, 1));
-            _$insert(_el$20, () => agentHeading(item(), nameWidth()).slice(1));
-            _$insert(_el$15, _$createComponent(Index, {
+            _$insert(_el$20, () => agentHeading(item(), nameWidth()).slice(0, 1));
+            _$insert(_el$21, () => agentHeading(item(), nameWidth()).slice(1));
+            _$insert(_el$16, _$createComponent(Index, {
               get each() {
                 return agentLines(item(), Math.max(1, width() - cells(indent()) - 2));
               },
               children: (line) => (() => {
-                var _el$23 = _$createElement("text"), _el$24 = _$createTextNode(` `);
-                _$insertNode(_el$23, _el$24);
-                _$insert(_el$23, indent, _el$24);
-                _$insert(_el$23, line, null);
-                _$effect((_$p) => _$setProp(_el$23, "fg", rowColor(item()), _$p));
-                return _el$23;
+                var _el$24 = _$createElement("text"), _el$25 = _$createTextNode(` `);
+                _$insertNode(_el$24, _el$25);
+                _$insert(_el$24, indent, _el$25);
+                _$insert(_el$24, line, null);
+                _$effect((_$p) => _$setProp(_el$24, "fg", rowColor(item()), _$p));
+                return _el$24;
               })()
-            }), _el$21);
-            _$insertNode(_el$21, _$createTextNode(` `));
+            }), _el$22);
+            _$insertNode(_el$22, _$createTextNode(` `));
             _$effect((_p$) => {
               var _v$0 = rowColor(item()), _v$1 = {
                 fg: executionColor(item())
               };
-              _v$0 !== _p$.e && (_p$.e = _$setProp(_el$18, "fg", _v$0, _p$.e));
-              _v$1 !== _p$.t && (_p$.t = _$setProp(_el$19, "style", _v$1, _p$.t));
+              _v$0 !== _p$.e && (_p$.e = _$setProp(_el$19, "fg", _v$0, _p$.e));
+              _v$1 !== _p$.t && (_p$.t = _$setProp(_el$20, "style", _v$1, _p$.t));
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$15;
+            return _el$16;
           })()
         });
       }
@@ -1717,8 +1821,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 trace = createMemo2(() => props.state.contextTrace(props.expanded ? current() : undefined));
+  const chart = createMemo2(() => contextChart(trace().samples, current()?.snapshot?.capacityTokens ?? trace().capacity, current()?.snapshot?.policy.triggerTokens, props.width, current()?.snapshot?.measurement ? (current()?.snapshot?.measurement?.at ?? 0) + props.state.age(props.sessionID) : undefined));
   const detail = createMemo2(() => {
     const lines = detailLines(current(), props.width, props.expanded, props.state.age(props.sessionID));
     if (props.expanded) {
@@ -1780,8 +1884,8 @@ function GuardView(props) {
       _$insertNode2(_el$2, _el$3);
       _$insert2(_el$2, () => props.state.health()?.mode ?? "?", null);
       _$insert2(_el$4, (() => {
-        var _c$ = _$memo2(() => props.context.app.version === "2.0.29");
-        return () => _c$() ? "" : clip(`Runtime ${props.context.app.version}: unverified (2.0.29 target)`, props.width);
+        var _c$ = _$memo2(() => !!["2.0.29", "2.1.2"].includes(props.context.app.version));
+        return () => _c$() ? "" : clip(`Runtime ${props.context.app.version}: unverified (tested: 2.0.29, 2.1.2)`, props.width);
       })());
       _$insert2(_el$5, () => clip(`${props.state.connection()} / ${props.state.health()?.enforcement ?? "?"}`, props.width));
       _$insert2(_el$, _$createComponent2(For2, {
@@ -1790,20 +1894,42 @@ function GuardView(props) {
         },
         children: (item) => (() => {
           var _el$1 = _$createElement2("text");
-          _$insert2(_el$1, () => item.line);
+          _$insert2(_el$1, _$createComponent2(Show2, {
+            get when() {
+              return item.segments;
+            },
+            get fallback() {
+              return item.line;
+            },
+            get children() {
+              return _$createComponent2(For2, {
+                get each() {
+                  return item.segments;
+                },
+                children: (part) => (() => {
+                  var _el$10 = _$createElement2("span");
+                  _$insert2(_el$10, () => part.text);
+                  _$effect2((_$p) => _$setProp2(_el$10, "style", {
+                    fg: part.held ? props.context.theme.text.muted : item.threshold ? props.context.theme.text.feedback.warning.base : props.context.theme.text.base
+                  }, _$p));
+                  return _el$10;
+                })()
+              });
+            }
+          }));
           _$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 wrap("Recent context samples \u2192 now \xB7 \u2504 trigger", props.width);
+          return wrap("Recent context samples \u2192 now \xB7 \u2504 trigger \xB7 \u2508 held", props.width);
         },
         children: (line) => (() => {
-          var _el$10 = _$createElement2("text");
-          _$insert2(_el$10, line);
-          _$effect2((_$p) => _$setProp2(_el$10, "fg", props.context.theme.text.muted, _$p));
-          return _el$10;
+          var _el$11 = _$createElement2("text");
+          _$insert2(_el$11, line);
+          _$effect2((_$p) => _$setProp2(_el$11, "fg", props.context.theme.text.muted, _$p));
+          return _el$11;
         })()
       }), _el$6);
       _$insert2(_el$, _$createComponent2(For2, {
@@ -1811,10 +1937,10 @@ function GuardView(props) {
           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;
+          var _el$12 = _$createElement2("text");
+          _$insert2(_el$12, line);
+          _$effect2((_$p) => _$setProp2(_el$12, "fg", props.context.theme.text.base, _$p));
+          return _el$12;
         })()
       }), _el$6);
       _$insert2(_el$, _$createComponent2(For2, {
@@ -1822,10 +1948,10 @@ function GuardView(props) {
           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;
+          var _el$13 = _$createElement2("text");
+          _$insert2(_el$13, () => clip(reason, props.width));
+          _$effect2((_$p) => _$setProp2(_el$13, "fg", props.context.theme.text.feedback.warning.base, _$p));
+          return _el$13;
         })()
       }), _el$6);
       _$insert2(_el$6, (() => {
@@ -1841,9 +1967,9 @@ function GuardView(props) {
           return visible();
         },
         children: (row2) => (() => {
-          var _el$13 = _$createElement2("box");
-          _$setProp2(_el$13, "flexDirection", "column");
-          _$setProp2(_el$13, "onMouseDown", () => {
+          var _el$14 = _$createElement2("box");
+          _$setProp2(_el$14, "flexDirection", "column");
+          _$setProp2(_el$14, "onMouseDown", () => {
             if (row2.hidden)
               props.state.expand(row2.node.sessionId);
             else {
@@ -1855,19 +1981,19 @@ function GuardView(props) {
               });
             }
           });
-          _$insert2(_el$13, _$createComponent2(For2, {
+          _$insert2(_el$14, _$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$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;
+              var _el$15 = _$createElement2("text");
+              _$insert2(_el$15, line);
+              _$effect2((_$p) => _$setProp2(_el$15, "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$15;
             })()
           }));
-          _$effect2((_$p) => _$setProp2(_el$13, "id", `context-guard.row.${row2.node.sessionId}`, _$p));
-          return _el$13;
+          _$effect2((_$p) => _$setProp2(_el$14, "id", `context-guard.row.${row2.node.sessionId}`, _$p));
+          return _el$14;
         })()
       }), _el$0);
       _$setProp2(_el$0, "onMouseDown", () => props.context.ui.panel.open("context-guard.monitor"));
@@ -2120,7 +2246,8 @@ function HistoryCharts(props) {
 function GuardPanel(props) {
   const [showCharts, setShowCharts] = createSignal4(false);
   const [metricIndex, setMetricIndex] = createSignal4(0);
-  const width = () => Math.max(4, props.input.width - 4);
+  const [viewportWidth, setViewportWidth] = createSignal4();
+  const width = () => Math.max(4, Math.min(props.input.width - 4, viewportWidth() ?? Infinity));
   const windows = [300000, 3600000, 86400000, 7 * 86400000];
   const [windowIndex, setWindowIndex] = createSignal4(1);
   const [chartRefresh, setChartRefresh] = createSignal4(0);
@@ -2276,6 +2403,11 @@ function GuardPanel(props) {
     _$use((value) => {
       scroll = value;
     }, _el$2);
+    _$setProp4(_el$2, "viewportOptions", {
+      onSizeChange: function() {
+        setViewportWidth(this.width);
+      }
+    });
     _$setProp4(_el$2, "flexGrow", 1);
     _$setProp4(_el$2, "minHeight", 0);
     _$insertNode4(_el$3, _el$4);

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

@@ -1,4 +1,4 @@
-import { type ContextSample } from "./contextchart.js";
+import { type ContextSample, type ContextChartSegment } 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[];
@@ -6,8 +6,9 @@ export declare function progress(ratio: number | undefined, width: number): stri
 export interface MainSection {
     readonly tone: "base" | "execution" | "pressure" | "measurement" | "threshold";
     readonly lines: readonly string[];
+    readonly segments?: readonly ContextChartSegment[];
 }
-export declare function mainSections(row: GuardRow | undefined, width: number, age: number, samples?: readonly ContextSample[]): MainSection[];
+export declare function mainSections(row: GuardRow | undefined, width: number, age: number, samples?: readonly ContextSample[], chartCapacity?: number): 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

@@ -2,18 +2,34 @@ import type { GuardRow } from "../family.js";
 export interface ContextSample {
     readonly at: number;
     readonly tokens?: number;
+    /** Display-only carry-forward; never a new measurement. */
+    readonly held?: boolean;
+    readonly compacted?: boolean;
 }
 export interface ContextTrace {
     readonly sessionId: string;
     readonly model: string | undefined;
     readonly capacity: number | undefined;
     readonly samples: readonly ContextSample[];
+    readonly lastCompleted?: number;
+    readonly pendingCompleted?: number;
 }
-/** Keep only actual measurements, never copies made by age/render ticks. */
+/** Bounded display history. Raw usage and enforcement remain in the snapshot. */
 export declare function updateContextTrace(previous: ContextTrace | undefined, row: GuardRow | undefined): ContextTrace;
+/** Share traces across sidebar/panel mounts without persisting provider data. */
+export declare class ContextTraceStore {
+    private readonly traces;
+    update(row: GuardRow | undefined): ContextTrace;
+    clear(): void;
+}
+export interface ContextChartSegment {
+    readonly text: string;
+    readonly held: boolean;
+}
 export interface ContextChartLine {
     readonly line: string;
     readonly threshold: boolean;
+    readonly segments?: readonly ContextChartSegment[];
 }
-/** 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[];
+/** Fixed capacity scale; held levels are dashed and rendered in a muted color. */
+export declare function contextChart(samples: readonly ContextSample[], capacity: number | undefined, trigger: number | undefined, width: number, now?: number): ContextChartLine[];

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

@@ -1,4 +1,5 @@
 import type { Plugin } from "@opencode/plugin/tui";
+import { type GuardRow } from "../family.js";
 export declare function createGuardState(context: Plugin.Context): {
     version: import("solid-js").Accessor<number>;
     acquire: (id: string) => {
@@ -6,8 +7,9 @@ export declare function createGuardState(context: Plugin.Context): {
         release(): void;
     };
     history(id: string, from: number, to: number, signal: AbortSignal): Promise<import("../historycharts.js").HistoryChartResult>;
-    rows: (stableOrder?: readonly string[], allDescendants?: boolean) => import("../family.js").GuardRow[];
-    dispose: () => void;
+    rows: (stableOrder?: readonly string[], allDescendants?: boolean) => GuardRow[];
+    contextTrace: (row: GuardRow | undefined) => import("./contextchart.js").ContextTrace;
+    dispose(): void;
     age(id: string): number;
     health(): import("../snapshot.js").MonitorHealth | undefined;
     connection(): "unavailable" | "loading" | "live" | "reconnecting" | "incompatible";

package/package.json

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