@cesarus777/opencode-cgp 0.1.0 → 0.2.2

package/dist/tui.js

@@ -114,6 +114,154 @@ var monitorRpc = Rpc.define({
   methods: { read: { input: readSchema, output: resultSchema } },
   events: { changed: { schema: batchSchema } }
 });
+var nonnegative = { type: "number", minimum: 0 };
+var performanceSchema = object({
+  observedSince: count,
+  at: count,
+  sessionCreatedAt: count,
+  sessionOutputTokens: count,
+  status: enumeration("waiting", "streaming", "idle", "unavailable"),
+  partial: { type: "boolean" },
+  liveTps: nonnegative,
+  averageModelTps: nonnegative,
+  averageSessionTps: nonnegative,
+  ttftMs: nonnegative,
+  latestRequestTps: nonnegative,
+  requestId: text,
+  requestAgent: text,
+  requestModel: text,
+  requestOutputTokens: count,
+  requestStartedAt: count,
+  firstOutputAt: count,
+  streamEndedAt: count,
+  estimatedOutputTokens: nonnegative,
+  modelOutputTokens: nonnegative,
+  modelDurationMs: nonnegative,
+  completedRequests: count,
+  tokenSource: enumeration("estimated", "reported", "unavailable")
+}, [
+  "sessionCreatedAt",
+  "observedSince",
+  "at",
+  "status",
+  "partial",
+  "estimatedOutputTokens",
+  "modelOutputTokens",
+  "modelDurationMs",
+  "completedRequests",
+  "tokenSource"
+]);
+var performanceRow = {
+  ...row,
+  properties: { ...row.properties, performance: performanceSchema }
+};
+var performanceBatchSchema = object({
+  ...batchFields,
+  upserts: array(performanceRow)
+});
+var performanceResultSchema = object({
+  ...batchFields,
+  upserts: array(performanceRow),
+  unavailable: resultSchema.properties.unavailable ?? {}
+});
+var performanceRpc = Rpc.define({
+  id: "context-guard.monitor.v2",
+  methods: { read: { input: readSchema, output: performanceResultSchema } },
+  events: { changed: { schema: performanceBatchSchema } }
+});
+function isPerformanceBatch(value) {
+  return valid(value, performanceBatchSchema) && uniqueRows(value);
+}
+function isPerformanceResult(value) {
+  return valid(value, performanceResultSchema) && uniqueRows(value);
+}
+function isPerformanceSnapshot(value) {
+  return valid(value, performanceSchema);
+}
+var chartPointSchema = object({
+  time: count,
+  agent: text,
+  model: text,
+  breakBefore: { type: "boolean" },
+  partial: { type: "boolean" },
+  liveTps: nonnegative,
+  averageModelTps: nonnegative,
+  averageSessionTps: nonnegative,
+  sessionOutputTokens: count
+}, ["time", "breakBefore", "partial"]);
+var chartRequestSchema = object({
+  time: count,
+  requestId: text,
+  started: count,
+  agent: text,
+  model: text,
+  ttftMs: nonnegative,
+  outputTokens: count,
+  durationMs: nonnegative,
+  tps: nonnegative,
+  partial: { type: "boolean" }
+}, ["time", "requestId", "started", "partial"]);
+var historyReadSchema = object({
+  schemaVersion: { const: 1 },
+  sessionId: text,
+  from: count,
+  to: count,
+  maxPoints: { type: "integer", minimum: 16, maximum: 500 }
+});
+var historyResultSchema = object({
+  schemaVersion: { const: 1 },
+  generatedAt: count,
+  enabled: { type: "boolean" },
+  truncated: { type: "boolean" },
+  metadata: object({
+    schema: { const: 1 },
+    retainedFrom: count,
+    retainedBytes: count,
+    skippedBytes: count,
+    malformedRecords: count,
+    completeness: enumeration("bounded-retention")
+  }, [
+    "schema",
+    "retainedBytes",
+    "skippedBytes",
+    "malformedRecords",
+    "completeness"
+  ]),
+  data: object({
+    schema: { const: 1 },
+    omittedSessions: count,
+    omittedGaps: count,
+    maxPoints: count,
+    gaps: array(object({ time: count, sessionId: text, reason: text }), 128),
+    series: array(object({
+      sessionId: text,
+      parentId: text,
+      agents: array(text, 1024),
+      models: array(text, 1024),
+      points: array(chartPointSchema, 500),
+      requests: array(chartRequestSchema, 500),
+      originalPoints: count
+    }, [
+      "sessionId",
+      "agents",
+      "models",
+      "points",
+      "requests",
+      "originalPoints"
+    ]), 1)
+  }, ["schema", "omittedSessions", "maxPoints", "gaps", "series"])
+});
+var historyRpc = Rpc.define({
+  id: "context-guard.history.v1",
+  methods: { read: { input: historyReadSchema, output: historyResultSchema } },
+  events: {}
+});
+function isHistoryRead(value) {
+  return valid(value, historyReadSchema) && record(value) && typeof value.from === "number" && typeof value.to === "number" && value.from <= value.to && value.to - value.from <= 7 * 86400000;
+}
+function isHistoryResult(value) {
+  return valid(value, historyResultSchema);
+}
 function record(x) {
   return typeof x === "object" && x !== null && !Array.isArray(x);
 }
@@ -164,14 +312,14 @@ function uniqueRows(value) {
 }
 
 // src/tui.tsx
-import { effect as _$effect4 } from "@opentui/solid";
-import { createTextNode as _$createTextNode4 } from "@opentui/solid";
-import { insertNode as _$insertNode4 } from "@opentui/solid";
-import { setProp as _$setProp4 } from "@opentui/solid";
-import { createElement as _$createElement4 } from "@opentui/solid";
-import { createComponent as _$createComponent4 } from "@opentui/solid";
+import { effect as _$effect5 } 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";
 import { Plugin } from "@opencode/plugin/tui";
-import { Show as Show3 } from "solid-js";
+import { Show as Show4 } from "solid-js";
 
 // src/tui/state.ts
 import { createSignal } from "solid-js";
@@ -413,7 +561,7 @@ class SnapshotClient {
           const value = await abortable(this.transport.read(location, ids, signal), signal);
           if (generation !== this.generation)
             throw new Error("Obsolete read");
-          if (!isResult(value)) {
+          if (!isPerformanceResult(value)) {
             this.connection = "incompatible";
             throw new Error("Incompatible snapshot");
           }
@@ -486,7 +634,7 @@ class SnapshotClient {
         for await (const value of this.transport.subscribe(this.location, signal)) {
           if (signal.aborted || generation !== this.generation)
             return;
-          if (!isBatch(value)) {
+          if (!isPerformanceBatch(value)) {
             this.connection = "incompatible";
             this.changed();
             continue;
@@ -661,6 +809,7 @@ function createGuardState(context) {
     scheduleExpiry();
   };
   const rpc = context.client.rpc(monitorRpc);
+  const liveRpc = context.client.rpc(performanceRpc);
   const clients = new Map;
   let inventory, currentId = "", controller;
   let scanGeneration = 0, scanning = false, maxNodes = 1024;
@@ -744,10 +893,20 @@ function createGuardState(context) {
         let c = clients.get(key);
         if (!c) {
           const location = sample.location;
+          let selectedRpc = rpc;
+          try {
+            const probe = await liveRpc.read({ schemaVersion: 1, sessionIds: [] }, { location, signal });
+            if (isPerformanceResult(probe))
+              selectedRpc = liveRpc;
+          } catch {
+          }
+          if (signal.aborted || generation !== scanGeneration)
+            return;
+          const source = selectedRpc;
           c = new SnapshotClient({
-            read: (_key, ids, requestSignal) => rpc.read({ schemaVersion: 1, sessionIds: ids }, { location, signal: requestSignal }),
+            read: (_key, ids, requestSignal) => source.read({ schemaVersion: 1, sessionIds: ids }, { location, signal: requestSignal }),
             subscribe: async function* (_key, requestSignal) {
-              for await (const event of rpc.events.subscribe("changed", {
+              for await (const event of source.events.subscribe("changed", {
                 signal: requestSignal
               })) {
                 if (event.location && sameLocation(event.location, location))
@@ -880,6 +1039,15 @@ function createGuardState(context) {
   return {
     version,
     acquire,
+    async history(id, from, to, signal) {
+      const info = inventory?.sessions.get(id);
+      if (!info)
+        throw new Error("Session location unavailable");
+      const result = await context.client.rpc(historyRpc).read({ schemaVersion: 1, sessionId: id, from, to, maxPoints: 240 }, { location: info.location, signal });
+      if (!isHistoryResult(result))
+        throw new Error("Incompatible history service");
+      return result;
+    },
     rows,
     dispose: stop,
     age(id) {
@@ -986,6 +1154,7 @@ function rowLines(row2, width) {
   const label = clip(`${prefix}${row2.node.agent ?? row2.node.sessionId}`, Math.max(1, width - cells(suffix)));
   return [
     clip(`${label}${suffix}`, width),
+    ...performanceLines(row2, width),
     ...wrap(`${quantity(m?.tokens)}/${quantity(s?.capacityTokens)} input; to ${quantity(row2.triggerDeltaTokens)}`, width),
     ...s && s.compaction.phase !== "idle" ? wrap(`compact: ${s.compaction.phase}`, width) : [],
     ...row2.node.interrupted ? [clip("interrupted", width)] : [],
@@ -1005,6 +1174,7 @@ function detailLines(row2, width, expanded = false, ageMs = 0) {
   const headroom = row2.triggerDeltaTokens;
   const lines = [
     `${s.agent ?? "?"} / ${s.model ?? "?"}`,
+    ...performanceLines(row2, width),
     `${m?.confidence === "approximate" ? "~" : ""}${quantity(m?.tokens)} / ${quantity(s.capacityTokens)} input`,
     `${row2.utilizationPercent?.toFixed(1) ?? "?"}% ${row2.pressure === "crossed" ? "!! crossed" : row2.pressure === "near" ? "! near" : row2.freshness.toUpperCase()}`,
     `Trigger ${threshold.type === "ratio" ? `${threshold.value * 100}%` : `${threshold.value} ${threshold.type}`} (${s.policy.comparison})`,
@@ -1042,6 +1212,72 @@ function wrap(value, width) {
     result.push(part);
   return result;
 }
+function performanceLines(row2, width) {
+  const p = row2.snapshot?.performance;
+  if (!p)
+    return [];
+  const value = (n) => n === undefined ? "?" : n.toFixed(1);
+  return [
+    ...wrap(`TPS ${p.status === "waiting" ? "waiting" : `${p.status === "streaming" ? "~" : ""}${value(p.liveTps)}`} \xB7 ${p.status}${p.partial ? " \xB7 partial" : ""}`, width),
+    ...wrap(`Avg model ${value(p.averageModelTps)} \xB7 Avg session ${value(p.averageSessionTps)}`, width),
+    ...wrap(`TTFT ${p.ttftMs === undefined ? "?" : `~${(p.ttftMs / 1000).toFixed(2)}s`}${p.latestRequestTps === undefined ? "" : ` \xB7 Last ${value(p.latestRequestTps)} t/s`}`, 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";
@@ -1077,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;
@@ -1086,6 +1322,7 @@ function mainSections(row2, width, age) {
   const ratio = (total) => measured !== undefined && total !== undefined && total > 0 ? measured / total : undefined;
   const remaining = measured !== undefined && s?.policy.triggerTokens !== undefined ? s.policy.triggerTokens - measured : undefined;
   return [
+    ...row2.snapshot?.performance ? [{ tone: "base", lines: performanceLines(row2, width) }] : [],
     {
       tone: "execution",
       lines: columns(`${row2.node.agent ?? s?.agent ?? "Main"} \xB7 ${row2.node.model ?? s?.model ?? "?"}`, row2.node.status.toUpperCase(), width)
@@ -1097,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: [
@@ -1108,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)
       ]
     },
@@ -1146,6 +1391,7 @@ function agentLines(row2, width) {
   const capacity = row2.snapshot?.capacityTokens;
   const pressure = row2.pressure === "crossed" ? "CRITICAL" : row2.pressure === "near" ? "WARNING" : "";
   return [
+    ...performanceLines(row2, width),
     progress(measured !== undefined && capacity !== undefined && capacity > 0 ? measured / capacity : undefined, width),
     ...wrap(`${tokens(measured)} / ${tokens(capacity)}${pressure ? ` \xB7 ${pressure}` : ""}`, width),
     ...wrap(`${row2.node.status.toUpperCase()}${row2.freshness !== "fresh" ? ` \xB7 ${row2.freshness.toUpperCase()}` : ""}${row2.node.interrupted ? " \xB7 interrupted" : ""}`, width),
@@ -1225,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) => {
@@ -1314,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() {
@@ -1323,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;
         })()
       })
@@ -1469,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) {
@@ -1536,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" : "";
@@ -1569,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 {
@@ -1583,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"));
@@ -1626,26 +1897,242 @@ function GuardView(props) {
 }
 
 // src/tui/panel.tsx
+import { effect as _$effect4 } 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 { 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, For as For4 } from "solid-js";
+
+// src/tui/charts.tsx
 import { effect as _$effect3 } from "@opentui/solid";
-import { insert as _$insert3 } from "@opentui/solid";
-import { createTextNode as _$createTextNode3 } 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";
-import { use as _$use } from "@opentui/solid";
 import { createElement as _$createElement3 } from "@opentui/solid";
-import { createSignal as createSignal3, createMemo as createMemo3, createEffect as createEffect3, onCleanup as onCleanup2 } from "solid-js";
+import { createEffect as createEffect3, createSignal as createSignal3, onCleanup as onCleanup2, For as For3 } from "solid-js";
+
+// src/tui/chartformat.ts
+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;
+  for (const point of points) {
+    if (point.time < from || point.time > to || point.value === undefined || !Number.isFinite(point.value) || point.value < 0)
+      continue;
+    min = Math.min(min, point.value);
+    max = Math.max(max, point.value);
+    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)
+    if (time >= from && time <= to)
+      chars[column(time)] = "\u2506";
+  return { line: chars.join(""), ...min === Infinity ? {} : { min, max } };
+}
+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 observations = (key) => series.points.map((p) => ({
+    time: p.time,
+    ...p[key] === undefined ? {} : { value: p[key] }
+  }));
+  const requests = (key) => series.requests.map((p) => ({
+    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 [
+    ...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),
+    "",
+    ...metricPlot(points, from, to, width, gaps),
+    "",
+    ...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) : [],
+    ...result.metadata.malformedRecords ? wrap(`${result.metadata.malformedRecords} malformed/partial records skipped.`, width) : []
+  ];
+}
+
+// src/tui/charts.tsx
+function HistoryCharts(props) {
+  const [result, setResult] = createSignal3();
+  const [status, setStatus] = createSignal3("Loading retained history...");
+  const [range, setRange] = createSignal3({
+    from: 0,
+    to: 0
+  });
+  createEffect3(() => {
+    const { sessionId: id, windowMs } = props;
+    props.refresh;
+    let pending = false, disposed = false;
+    let controller;
+    setResult(undefined);
+    async function read() {
+      if (pending || disposed)
+        return;
+      pending = true;
+      controller = new AbortController;
+      const to = Date.now(), from = Math.max(0, to - windowMs);
+      try {
+        const next = await props.state.history(id, from, to, AbortSignal.any([controller.signal, AbortSignal.timeout(5000)]));
+        if (!disposed) {
+          setResult(next);
+          setRange({
+            from,
+            to
+          });
+          setStatus("");
+        }
+      } catch {
+        if (!disposed)
+          setStatus("History unavailable. The owning server must support chart history RPC. Press r to retry.");
+      } finally {
+        pending = false;
+      }
+    }
+    read();
+    const timer = setInterval(() => {
+      read();
+    }, 5000);
+    onCleanup2(() => {
+      disposed = true;
+      controller?.abort();
+      clearInterval(timer);
+    });
+  });
+  const lines = () => {
+    const current = result();
+    return current ? historyChartLines(current, Math.max(4, props.width), range().from, range().to, props.metricIndex) : [];
+  };
+  return (() => {
+    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$3 = _$createElement3("text");
+        _$insert3(_el$3, line);
+        _$effect3((_$p) => _$setProp3(_el$3, "fg", props.context.theme.text.base, _$p));
+        return _el$3;
+      })()
+    }), _el$2);
+    _$insert3(_el$, _$createComponent3(For3, {
+      get each() {
+        return wrap(status(), props.width);
+      },
+      children: (line) => (() => {
+        var _el$4 = _$createElement3("text");
+        _$insert3(_el$4, line);
+        _$effect3((_$p) => _$setProp3(_el$4, "fg", props.context.theme.text.muted, _$p));
+        return _el$4;
+      })()
+    }), _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$5 = _$createElement3("text");
+        _$insert3(_el$5, line || " ");
+        _$effect3((_$p) => _$setProp3(_el$5, "fg", props.context.theme.text.base, _$p));
+        return _el$5;
+      })()
+    }));
+    return _el$;
+  })();
+}
+
+// src/tui/panel.tsx
 function GuardPanel(props) {
-  const [inspectId, setInspectId] = createSignal3();
-  const [selected, setSelected] = createSignal3(props.input.sessionID);
-  const [order, setOrder] = createSignal3([]);
+  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);
+  const [inspectId, setInspectId] = createSignal4();
+  const [selected, setSelected] = createSignal4(props.input.sessionID);
+  const [order, setOrder] = createSignal4([]);
   const rows = createMemo3(() => props.state.rows(order()));
   const offset = () => Math.max(0, rows().findIndex((row2) => row2.node.sessionId === selected()));
-  createEffect3(() => {
+  createEffect4(() => {
     if (!props.input.focused)
       setOrder([]);
   });
-  createEffect3(() => {
+  createEffect4(() => {
     setSelected(props.input.sessionID);
     setOrder([]);
   });
@@ -1666,7 +2153,7 @@ function GuardPanel(props) {
     props.context.renderer.setFrameCallback(follow);
     props.context.renderer.requestRender();
   }
-  onCleanup2(() => {
+  onCleanup3(() => {
     if (follow)
       props.context.renderer.removeFrameCallback(follow);
   });
@@ -1675,12 +2162,55 @@ function GuardPanel(props) {
     const row2 = rows()[Math.max(0, Math.min(rows().length - 1, offset() + delta))];
     if (row2) {
       setSelected(row2.node.sessionId);
-      revealSelection();
+      if (!showCharts())
+        revealSelection();
     }
   }
   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",
+      run: () => setShowCharts((v) => !v)
+    }, {
+      id: "context-guard.chart-shorter",
+      title: "Shorter chart window",
+      bind: "[",
+      run: () => {
+        if (showCharts())
+          setWindowIndex((i) => Math.max(0, i - 1));
+      }
+    }, {
+      id: "context-guard.chart-longer",
+      title: "Longer chart window",
+      bind: "]",
+      run: () => {
+        if (showCharts())
+          setWindowIndex((i) => Math.min(windows.length - 1, i + 1));
+      }
+    }, {
       id: "context-guard.inspect",
       title: "Inspect selected session",
       bind: "i",
@@ -1692,6 +2222,7 @@ function GuardPanel(props) {
       run: () => {
         setOrder([]);
         props.state.refresh();
+        setChartRefresh((n) => n + 1);
       }
     }, {
       id: "context-guard.load-more",
@@ -1729,18 +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$ = _$createElement3("scrollbox"), _el$2 = _$createElement3("text"), _el$4 = _$createElement3("text"), _el$5 = _$createTextNode3(`up/down select `), _el$6 = _$createTextNode3(`; Enter open`), _el$7 = _$createElement3("text"), _el$9 = _$createElement3("text"), _el$1 = _$createElement3("text");
-    _$insertNode3(_el$, _el$2);
-    _$insertNode3(_el$, _el$4);
-    _$insertNode3(_el$, _el$7);
-    _$insertNode3(_el$, _el$9);
-    _$insertNode3(_el$, _el$1);
+    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$);
-    _$setProp3(_el$, "flexGrow", 1);
-    _$insert3(_el$, _$createComponent3(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;
       },
@@ -1751,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() {
@@ -1763,28 +2302,60 @@ function GuardPanel(props) {
       get inspectId() {
         return inspectId();
       }
-    }), _el$2);
-    _$insertNode3(_el$2, _$createTextNode3(`r refresh / l load more`));
-    _$insertNode3(_el$4, _el$5);
-    _$insertNode3(_el$4, _el$6);
-    _$insert3(_el$4, () => offset() + 1, _el$6);
-    _$insertNode3(_el$7, _$createTextNode3(`space expand / i inspect selected`));
-    _$insertNode3(_el$9, _$createTextNode3(`Guard input = prompt + caches.`));
-    _$insertNode3(_el$1, _$createTextNode3(`Native Context uses different totals.`));
-    _$effect3((_p$) => {
-      var _v$ = props.context.theme.text.muted, _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$ !== _p$.e && (_p$.e = _$setProp3(_el$2, "fg", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = _$setProp3(_el$4, "fg", _v$2, _p$.t));
-      _v$3 !== _p$.a && (_p$.a = _$setProp3(_el$7, "fg", _v$3, _p$.a));
-      _v$4 !== _p$.o && (_p$.o = _$setProp3(_el$9, "fg", _v$4, _p$.o));
-      _v$5 !== _p$.i && (_p$.i = _$setProp3(_el$1, "fg", _v$5, _p$.i));
+    }), _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, {
+          get sessionId() {
+            return selected();
+          },
+          get windowMs() {
+            return windows[windowIndex()] ?? 3600000;
+          },
+          get metricIndex() {
+            return metricIndex();
+          },
+          get refresh() {
+            return chartRefresh();
+          },
+          get width() {
+            return width();
+          },
+          get state() {
+            return props.state;
+          },
+          get context() {
+            return props.context;
+          }
+        });
+      }
+    }), 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$ !== _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
+      t: undefined
     });
     return _el$;
   })();
@@ -1801,7 +2372,7 @@ var tui_default = Plugin.define({
     try {
       unregister.push(context.ui.slot({
         append: "sidebar.content",
-        render: (input) => _$createComponent4(GuardView, {
+        render: (input) => _$createComponent5(GuardView, {
           get sessionID() {
             return input.sessionID;
           },
@@ -1812,12 +2383,12 @@ var tui_default = Plugin.define({
       }));
       unregister.push(context.ui.slot({
         append: "session.panel",
-        render: (input) => _$createComponent4(Show3, {
+        render: (input) => _$createComponent5(Show4, {
           get when() {
             return input.name === "context-guard.monitor";
           },
           get children() {
-            return _$createComponent4(GuardPanel, {
+            return _$createComponent5(GuardPanel, {
               input,
               state,
               context
@@ -1827,15 +2398,15 @@ var tui_default = Plugin.define({
       }));
       unregister.push(context.ui.slot({
         append: "session.composer.top",
-        render: (input) => _$createComponent4(Show3, {
+        render: (input) => _$createComponent5(Show4, {
           get when() {
             return context.data.session.get(input.sessionID)?.parentID;
           },
           get children() {
-            var _el$ = _$createElement4("text");
-            _$insertNode4(_el$, _$createTextNode4(`Context Guard: open panel`));
-            _$setProp4(_el$, "onMouseDown", () => context.ui.panel.open("context-guard.monitor"));
-            _$effect4((_$p) => _$setProp4(_el$, "fg", context.theme.text.muted, _$p));
+            var _el$ = _$createElement5("text");
+            _$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$;
           }
         })