@cesarus777/opencode-cgp 0.1.0 → 0.2.1

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 { effect as _$effect5 } 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 { 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,17 @@ 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/compact.tsx
 import { createTextNode as _$createTextNode } from "@opentui/solid";
@@ -1086,6 +1267,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)
@@ -1146,6 +1328,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),
@@ -1626,26 +1809,195 @@ function GuardView(props) {
 }
 
 // src/tui/panel.tsx
-import { effect as _$effect3 } from "@opentui/solid";
-import { insert as _$insert3 } from "@opentui/solid";
+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 { 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 { 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";
+
+// src/tui/charts.tsx
+import { effect as _$effect3 } 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 sparkline(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);
+  }
+  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 } };
+}
+function historyChartLines(result, width, from, to) {
+  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] }
+  }));
+  const requests = (key) => series.requests.map((p) => ({
+    time: p.time,
+    ...p[key] === undefined ? {} : { value: key === "ttftMs" ? p[key] / 1000 : p[key] }
+  }));
+  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")),
+    "",
+    ...chart("Cumulative output", "tokens", observations("sessionOutputTokens")),
+    "",
+    ...wrap("UTC time \u2192 \xB7 observed peaks per column \xB7 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) : [];
+  };
+  return (() => {
+    var _el$ = _$createElement3("box");
+    _$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;
+      })()
+    }), null);
+    _$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;
+      })()
+    }), null);
+    _$insert3(_el$, _$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;
+      })()
+    }), null);
+    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 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 +2018,7 @@ function GuardPanel(props) {
     props.context.renderer.setFrameCallback(follow);
     props.context.renderer.requestRender();
   }
-  onCleanup2(() => {
+  onCleanup3(() => {
     if (follow)
       props.context.renderer.removeFrameCallback(follow);
   });
@@ -1675,12 +2027,34 @@ 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.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 +2066,7 @@ function GuardPanel(props) {
       run: () => {
         setOrder([]);
         props.state.refresh();
+        setChartRefresh((n) => n + 1);
       }
     }, {
       id: "context-guard.load-more",
@@ -1730,17 +2105,19 @@ function GuardPanel(props) {
     }]
   }));
   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");
+    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$4);
-    _$insertNode3(_el$, _el$7);
-    _$insertNode3(_el$, _el$9);
+    _$insertNode3(_el$, _el$6);
+    _$insertNode3(_el$, _el$8);
     _$insertNode3(_el$, _el$1);
+    _$insertNode3(_el$, _el$11);
+    _$insertNode3(_el$, _el$13);
     _$use((value) => {
       scroll = value;
     }, _el$);
-    _$setProp3(_el$, "flexGrow", 1);
-    _$insert3(_el$, _$createComponent3(GuardView, {
+    _$setProp4(_el$, "flexGrow", 1);
+    _$setProp4(_el$2, "flexDirection", "column");
+    _$insert4(_el$2, _$createComponent4(GuardView, {
       get sessionID() {
         return props.input.sessionID;
       },
@@ -1763,28 +2140,63 @@ 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));
+    }));
+    _$insert4(_el$, _$createComponent4(Show3, {
+      get when() {
+        return showCharts();
+      },
+      get children() {
+        return [_$createComponent4(HistoryCharts, {
+          get sessionId() {
+            return selected();
+          },
+          get windowMs() {
+            return windows[windowIndex()] ?? 3600000;
+          },
+          get refresh() {
+            return chartRefresh();
+          },
+          get width() {
+            return Math.max(4, props.input.width - 6);
+          },
+          get state() {
+            return props.state;
+          },
+          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.`));
+    _$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));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     return _el$;
   })();
@@ -1801,7 +2213,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 +2224,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 +2239,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");
+            var _el$ = _$createElement5("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));
+            _$setProp5(_el$, "onMouseDown", () => context.ui.panel.open("context-guard.monitor"));
+            _$effect5((_$p) => _$setProp5(_el$, "fg", context.theme.text.muted, _$p));
             return _el$;
           }
         })