@animalabs/connectome-host 0.6.1 → 0.7.1

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 ## Unreleased
 
+## 0.7.1 — 2026-07-26
+
+### Changed
+
+- **Health call stats are now per-call, not cumulative.** The previous version
+  rolled everything into two totals (main / compression), which hid exactly what
+  you want to see — how an individual turn behaved. Now one row per call, newest
+  first: time, origin, messages, fresh input, cached tokens, cached share, cache
+  write, output, breakpoints, duration and verdict, with refusals and errors
+  highlighted. Cumulative totals for the session remain in the Usage panel.
+
+## Unreleased
+
+## 0.7.0 — 2026-07-26
+
+### Added
+
+- **Health panel: recent LLM call stats, split main vs compression.** Aggregates
+  the call ledger the client already receives — fresh input, cache read/write,
+  **cached share** (cacheRead ÷ input+cacheRead: what fraction of the prompt was
+  reused rather than re-read), prefix-reuse rate, output, average cache
+  breakpoints, cost, and errors/refusals — separately for `turn~` (main) and
+  `aux~` (compression/summarizer). Includes the last 8 fresh-input values per
+  group, so a budget descent can be seen trending down.
+  - The `~` is honest: origin is inferred from stream-vs-complete (turns stream,
+    compression uses `complete()`), not a definitive tag. Stated in the panel.
+- **Health panel: context composition of the last compile** — head / raw middle /
+  summaries by level / tail, with shares and bars. Sourced from `/healthz`, which
+  now carries the strategy's in-process render stats: unlike
+  `/debug/context/makeup` this costs nothing and makes no `count_tokens` network
+  call, so it is safe on the 15s health poll.
+
+## Unreleased
+
 ## 0.6.1 — 2026-07-26
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animalabs/connectome-host",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "General-purpose agent TUI host with recipe-based configuration",
   "type": "module",
   "scripts": {

package/src/modules/web-ui-module.ts

@@ -1118,6 +1118,28 @@ export class WebUiModule implements Module {
       } catch {
         // Health reads never throw.
       }
+      // Rendered context COMPOSITION per agent — head / raw middle / summaries
+      // by level / tail, as actually emitted by the last compile.
+      //
+      // Sourced from the strategy's own render stats, which are already
+      // computed in-process: unlike /debug/context/makeup this costs nothing
+      // and makes no count_tokens network call, so it is safe on the 15s
+      // /healthz poll. Answers "how much of what was actually sent" without
+      // recompiling.
+      try {
+        const composition: Record<string, unknown> = {};
+        for (const agent of app.framework.getAllAgents()) {
+          const name = (agent as unknown as { name: string }).name;
+          const cm = agent.getContextManager() as unknown as {
+            getRenderStats?: () => unknown;
+          };
+          const rs = cm.getRenderStats?.();
+          if (rs) composition[name] = rs;
+        }
+        (snapshot as Record<string, unknown>).contextComposition = composition;
+      } catch {
+        // Health reads never throw.
+      }
       // Per-agent runtime settings (context budget, tail, transition pace +
       // convergence state) — the same numbers `agent_settings get` returns,
       // exposed externally so the fleet hub / connectome-doctor can watch

package/web/src/App.tsx

@@ -1304,6 +1304,7 @@ export function App() {
               <HealthPanel
                 health={health()}
                 error={healthErr()}
+                ledger={callLedger()?.rows}
                 onRefresh={() => void loadHealth(true)}
               />
             </Show>

package/web/src/Health.tsx

@@ -17,6 +17,7 @@
  */
 
 import { For, Show } from 'solid-js';
+import type { CallLedgerRow } from '@conhost/web/protocol';
 
 /** One active operator alert, keyed `${agent}:${kind}`. `count` increments on
  *  every re-fire of the same key so a repeating klaxon reads as one row. */
@@ -33,8 +34,22 @@ export interface OpsAlert {
 /** Shape of GET /healthz — framework healthSnapshot() plus the host's
  *  compressionQuarantine / runtimeSettings extensions. All fields optional
  *  and defensively read: health rendering must survive version skew. */
+/** Rendered composition of the last compile — what was actually SENT. */
+export interface ContextComposition {
+  head?: { messages: number; tokens: number };
+  tail?: { messages: number; tokens: number };
+  middleRaw?: { messages: number; tokens: number };
+  summaries?: Record<string, { count: number; tokens: number }>;
+  total?: { messages: number; tokens: number };
+}
+
+/** One provider call. Aliased to the wire type so the two cannot drift; only
+ *  the fields this panel aggregates are read. */
+export type LedgerRow = CallLedgerRow;
+
 export interface HealthSnapshot {
   at?: string;
+  contextComposition?: Record<string, ContextComposition>;
   uptimeSec?: number;
   gate?: Record<string, unknown> | null;
   pendingRequests?: number;
@@ -126,8 +141,160 @@ export function OpsAlertStrip(props: {
   );
 }
 
+
+const n0 = (v: number) => v.toLocaleString();
+
+function CallStats(props: { rows: LedgerRow[] }) {
+  /** Newest first — the interesting call is the one that just happened. */
+  const recent = () => [...props.rows].reverse().slice(0, 24);
+
+  const clock = (ts: string) => {
+    const d = new Date(ts);
+    return Number.isNaN(d.getTime()) ? '—' : d.toISOString().slice(11, 19);
+  };
+  /** Fraction of the prompt that was reused rather than re-read. */
+  const share = (r: LedgerRow) => {
+    const sent = r.tokens.input + r.tokens.cacheRead;
+    return sent > 0 ? Math.round((100 * r.tokens.cacheRead) / sent) : null;
+  };
+
+  return (
+    <div>
+      <div class="text-[10px] uppercase tracking-wider text-neutral-600 mb-1">
+        llm calls — newest first ({props.rows.length} held)
+      </div>
+      <div class="overflow-x-auto">
+        <table class="w-full font-mono text-[10px] whitespace-nowrap">
+          <thead>
+            <tr class="text-neutral-600 border-b border-neutral-800">
+              <th class="text-left pr-2 font-normal">time</th>
+              <th class="text-left pr-2 font-normal">origin</th>
+              <th class="text-right pr-2 font-normal">msgs</th>
+              <th class="text-right pr-2 font-normal">fresh</th>
+              <th class="text-right pr-2 font-normal">cached</th>
+              <th class="text-right pr-2 font-normal">%c</th>
+              <th class="text-right pr-2 font-normal">write</th>
+              <th class="text-right pr-2 font-normal">out</th>
+              <th class="text-right pr-2 font-normal">bp</th>
+              <th class="text-right pr-2 font-normal">ms</th>
+              <th class="text-left font-normal">verdict</th>
+            </tr>
+          </thead>
+          <tbody>
+            <For each={recent()}>
+              {(r) => {
+                const main = r.originEstimate === 'turn~';
+                return (
+                  <tr class={`border-b border-neutral-900 ${
+                    r.error || r.stopReason === 'refusal' ? 'bg-red-950/30' : ''
+                  }`}>
+                    <td class="pr-2 text-neutral-500">{clock(r.timestamp)}</td>
+                    <td class={`pr-2 ${main ? 'text-cyan-400' : 'text-orange-400'}`}>
+                      {main ? 'turn' : 'compr'}
+                    </td>
+                    <td class="pr-2 text-right text-neutral-400">{r.messages}</td>
+                    <td class="pr-2 text-right text-neutral-100">{n0(r.tokens.input)}</td>
+                    <td class="pr-2 text-right text-sky-300">{n0(r.tokens.cacheRead)}</td>
+                    <td class="pr-2 text-right text-neutral-400">
+                      {share(r) === null ? '—' : `${share(r)}%`}
+                    </td>
+                    <td class="pr-2 text-right text-violet-300">
+                      {r.tokens.cacheWrite ? n0(r.tokens.cacheWrite) : '·'}
+                    </td>
+                    <td class="pr-2 text-right text-neutral-400">{n0(r.tokens.output)}</td>
+                    <td class="pr-2 text-right text-neutral-600">{r.cache.breakpoints ?? '·'}</td>
+                    <td class="pr-2 text-right text-neutral-600">{n0(r.durationMs)}</td>
+                    <td class={verdictTone(r.verdict)} title={r.cause}>
+                      {r.verdict}
+                      <Show when={r.stopReason === 'refusal'}>
+                        <span class="text-red-300"> refusal</span>
+                      </Show>
+                      <Show when={r.error}>
+                        <span class="text-red-300"> err</span>
+                      </Show>
+                    </td>
+                  </tr>
+                );
+              }}
+            </For>
+          </tbody>
+        </table>
+      </div>
+      <div class="text-[9px] text-neutral-600 mt-1 leading-relaxed">
+        <span class="text-cyan-400">turn</span> = main inference,
+        <span class="text-orange-400"> compr</span> = compression/summarizer — inferred from
+        stream-vs-complete, not a definitive tag (hence <span class="font-mono">~</span> upstream).
+        One turn may appear as a turn row plus several compr rows.
+        <span class="font-mono"> fresh</span> = tokens billed as new input;
+        <span class="font-mono"> cached</span> = read from cache;
+        <span class="font-mono"> %c</span> = cached ÷ (fresh+cached);
+        <span class="font-mono"> bp</span> = cache breakpoints.
+      </div>
+    </div>
+  );
+}
+
+/** Verdict colouring: reuse is good, rewrites cost a full re-read. */
+function verdictTone(v: string): string {
+  if (v === 'HIT' || v === 'hit+extend') return 'text-emerald-300';
+  if (v === 'first-write') return 'text-violet-300';
+  if (v === 'uncached') return 'text-neutral-400';
+  if (v === 'ERROR' || v === 'empty') return 'text-red-300';
+  return 'text-amber-300';
+}
+
+function CompositionBlock(props: { c: ContextComposition }) {
+  const rows = () => {
+    const c = props.c;
+    const out: Array<[string, number]> = [
+      ['head (verbatim)', c.head?.tokens ?? 0],
+      ['middle raw', c.middleRaw?.tokens ?? 0],
+    ];
+    for (const [lvl, v] of Object.entries(c.summaries ?? {})) {
+      out.push([`summaries ${lvl.toUpperCase()}`, v?.tokens ?? 0]);
+    }
+    out.push(['tail (verbatim)', c.tail?.tokens ?? 0]);
+    return out;
+  };
+  const total = () => props.c.total?.tokens ?? rows().reduce((s, [, v]) => s + v, 0);
+
+  return (
+    <div>
+      <div class="text-[10px] uppercase tracking-wider text-neutral-600 mb-1">
+        context composition (last compile)
+      </div>
+      <table class="w-full font-mono text-[10px]">
+        <tbody>
+          <For each={rows()}>
+            {([k, v]) => (
+              <tr>
+                <td class="text-neutral-500 pr-2">{k}</td>
+                <td class="text-neutral-200 text-right tabular-nums">{n0(v)}</td>
+                <td class="text-neutral-600 text-right pl-2 w-10">
+                  {total() > 0 ? `${Math.round((100 * v) / total())}%` : ''}
+                </td>
+                <td class="pl-2 w-1/3">
+                  <span class="inline-block h-1.5 bg-cyan-800 rounded"
+                        style={{ width: `${total() > 0 ? Math.round((100 * v) / total()) : 0}%` }} />
+                </td>
+              </tr>
+            )}
+          </For>
+          <tr class="border-t border-neutral-800">
+            <td class="text-neutral-400 pr-2">total rendered</td>
+            <td class="text-neutral-100 text-right tabular-nums">{n0(total())}</td>
+            <td colSpan={2} />
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 export function HealthPanel(props: {
   health: HealthSnapshot | null;
+  /** Recent provider calls. Already on the client via the call-ledger frame. */
+  ledger?: LedgerRow[];
   /** Non-null when the last /healthz fetch failed; '403' means scope-denied. */
   error: string | null;
   onRefresh(): void;
@@ -135,6 +302,7 @@ export function HealthPanel(props: {
   const agents = () => props.health?.agents ?? [];
   const quarantine = (name: string) => props.health?.compressionQuarantine?.[name];
   const settings = (name: string) => props.health?.runtimeSettings?.[name];
+  const composition = (name: string) => props.health?.contextComposition?.[name];
 
   const statusTone = (status?: string): string => {
     switch (status) {
@@ -262,6 +430,23 @@ export function HealthPanel(props: {
                 </div>
               )}
             </Show>
+
+            {/* What was actually SENT, and how it split. Composition is
+                in-process render stats (free); call stats come from the ledger
+                the client already holds. */}
+            <Show when={composition(a.name)}>
+              {(c) => (
+                <div class="border-t border-neutral-900 pt-1.5">
+                  <CompositionBlock c={c()} />
+                </div>
+              )}
+            </Show>
+
+            <Show when={(props.ledger?.length ?? 0) > 0}>
+              <div class="border-t border-neutral-900 pt-1.5">
+                <CallStats rows={props.ledger!} />
+              </div>
+            </Show>
           </section>
         )}</For>
       </Show>