@animalabs/connectome-host 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 ## 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
+
+- **Pin id picker sourced the wrong ids.** It read `/debug/context/curve`, which
+  looked right but isn't: on a live store 0 of 208 raw entries carried a
+  `sourceMessageId`, and the 26 entries that *did* have an `id` were summaries,
+  whose ids (`L3-544`) are not message ids. Pinning with one would have created a
+  pin matching no message and silently done nothing. The picker now uses the
+  client's own message list, where `WelcomeMessageEntry.id` is the store id and
+  server-sourced rows are exactly those carrying a store `index`; it also gains a
+  text/id filter. Caught by checking the endpoint against a real store before
+  anyone used the panel.
+
+## Unreleased
+
 ## 0.6.0 — 2026-07-26
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animalabs/connectome-host",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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

@@ -11,7 +11,7 @@ import { LessonsPanel, type LessonRow } from './Lessons';
 import { McplPanel, type McplServerRow } from './Mcpl';
 import { SettingsPanel, type SettingsState } from './Settings';
 import { DryContext, type DryContextData } from './DryContext';
-import { PinsPanel, type PinsState } from './Pins';
+import { PinsPanel, type PinsState, type PinCandidate } from './Pins';
 import { FilesPanel, FileViewerModal, type Mount, type FlatEntry, type FileViewer } from './Files';
 import { ContextPanel } from './Context';
 import { ContextDocument } from './ContextDocument';
@@ -1271,6 +1271,11 @@ export function App() {
                 loaded={pinsLoaded()}
                 state={pinsState()}
                 agent={pinsState()?.agent}
+                candidates={messages
+                  .filter((m) => m.index !== undefined && m.id)
+                  .map<PinCandidate>((m) => ({
+                    id: m.id, index: m.index!, participant: m.participant, text: m.text ?? '',
+                  }))}
                 onRefresh={refreshPins}
                 onAdd={(input) => wire.send({ type: 'pin-add', ...input })}
                 onRemove={(pinId) => wire.send({ type: 'pin-remove', pinId })}
@@ -1299,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,185 @@ export function OpsAlertStrip(props: {
   );
 }
 
+
+/**
+ * Aggregate the call ledger by origin.
+ *
+ * `originEstimate` is the main-vs-compression split, and the `~` is honest: it
+ * is derived from stream-vs-complete (agent turns stream; compression and
+ * summarizer calls use complete()), NOT from a definitive origin tag. It is a
+ * reliable proxy in practice, but it is an inference.
+ */
+interface CallAgg {
+  calls: number;
+  input: number;
+  output: number;
+  cacheRead: number;
+  cacheWrite: number;
+  cost: number;
+  hits: number;
+  errors: number;
+  refusals: number;
+  breakpoints: number;
+  lastInputs: number[];
+}
+
+const EMPTY_AGG = (): CallAgg => ({
+  calls: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0,
+  cost: 0, hits: 0, errors: 0, refusals: 0, breakpoints: 0, lastInputs: [],
+});
+
+/** Verdicts that mean the prefix was actually reused. */
+const HIT_VERDICTS = new Set(['HIT', 'hit+extend']);
+
+function aggregate(rows: LedgerRow[], origin: 'turn~' | 'aux~'): CallAgg {
+  const a = EMPTY_AGG();
+  for (const r of rows) {
+    if (r.originEstimate !== origin) continue;
+    a.calls++;
+    a.input += r.tokens.input;
+    a.output += r.tokens.output;
+    a.cacheRead += r.tokens.cacheRead;
+    a.cacheWrite += r.tokens.cacheWrite;
+    a.cost += r.cost?.total ?? 0;
+    if (HIT_VERDICTS.has(r.verdict)) a.hits++;
+    if (r.error) a.errors++;
+    if (r.stopReason === 'refusal') a.refusals++;
+    a.breakpoints += r.cache.breakpoints ?? 0;
+    a.lastInputs.push(r.tokens.input);
+  }
+  a.lastInputs = a.lastInputs.slice(-8);
+  return a;
+}
+
+const n0 = (v: number) => v.toLocaleString();
+const pct = (num: number, den: number) => (den > 0 ? `${Math.round((100 * num) / den)}%` : '—');
+
+/** Cached share of what was sent — the number that tells you whether the prefix
+ *  is being reused or re-read. */
+const cachedShare = (a: CallAgg) => {
+  const sent = a.input + a.cacheRead;
+  return sent > 0 ? `${Math.round((100 * a.cacheRead) / sent)}%` : '—';
+};
+
+function CallStats(props: { rows: LedgerRow[] }) {
+  const main = () => aggregate(props.rows, 'turn~');
+  const aux = () => aggregate(props.rows, 'aux~');
+
+  const col = (label: string, a: () => CallAgg, tone: string) => (
+    <div class="flex-1 min-w-[9rem]">
+      <div class={`text-[10px] uppercase tracking-wider font-semibold mb-1 ${tone}`}>
+        {label} <span class="text-neutral-600">({a().calls})</span>
+      </div>
+      <table class="w-full font-mono text-[10px]">
+        <tbody>
+          <For each={[
+            ['fresh input', n0(a().input)],
+            ['cache read', n0(a().cacheRead)],
+            ['cache write', n0(a().cacheWrite)],
+            ['cached share', cachedShare(a())],
+            ['prefix reused', pct(a().hits, a().calls)],
+            ['output', n0(a().output)],
+            ['avg breakpoints', a().calls ? (a().breakpoints / a().calls).toFixed(1) : '—'],
+            ['cost', a().cost ? `$${a().cost.toFixed(4)}` : '—'],
+          ] as Array<[string, string]>}>
+            {([k, v]) => (
+              <tr>
+                <td class="text-neutral-500 pr-2">{k}</td>
+                <td class="text-neutral-200 text-right tabular-nums">{v}</td>
+              </tr>
+            )}
+          </For>
+          <Show when={a().errors > 0 || a().refusals > 0}>
+            <tr>
+              <td class="text-neutral-500 pr-2">errors / refusals</td>
+              <td class="text-right tabular-nums text-red-300">
+                {a().errors} / {a().refusals}
+              </td>
+            </tr>
+          </Show>
+        </tbody>
+      </table>
+      <Show when={a().lastInputs.length > 1}>
+        <div class="text-[9px] text-neutral-600 mt-1 font-mono break-all"
+             title="fresh input tokens, oldest → newest — a descent should trend down">
+          {a().lastInputs.map(n0).join(' → ')}
+        </div>
+      </Show>
+    </div>
+  );
+
+  return (
+    <div>
+      <div class="text-[10px] uppercase tracking-wider text-neutral-600 mb-1">
+        recent llm calls ({props.rows.length})
+      </div>
+      <div class="flex gap-4 flex-wrap">
+        {col('main turns', main, 'text-cyan-400')}
+        {col('compression', aux, 'text-orange-400')}
+      </div>
+      <div class="text-[9px] text-neutral-600 mt-1 leading-relaxed">
+        Origin is inferred from stream-vs-complete (turns stream; compression uses
+        complete) — a reliable proxy, not a definitive tag, hence <span class="font-mono">~</span>.
+        “cached share” is cacheRead ÷ (input+cacheRead) — what fraction of the prompt
+        was reused rather than re-read.
+      </div>
+    </div>
+  );
+}
+
+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 +327,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 +455,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>

package/web/src/Pins.tsx

@@ -12,8 +12,8 @@
  * degrades to raw — a safe superset, but not what was asked for — so the panel
  * warns rather than letting it pass silently.
  *
- * Message ids come from /debug/context/curve (cheap: ~14ms) so the operator
- * picks from the live context instead of pasting ids.
+ * Ids are picked from the client's own message list (real store ids) rather than
+ * typed. See PinCandidate for why /debug/context/curve is NOT a usable source.
  */
 
 import { createSignal, For, Show } from 'solid-js';
@@ -37,14 +37,22 @@ export interface PinsState {
   deepestLevel?: number;
 }
 
-interface CurveEntry {
-  i: number;
-  kind: string;
-  id: string | null;
-  participant?: string;
-  rendered?: number;
-  msgCount?: number;
-  text?: string;
+/**
+ * A pinnable message.
+ *
+ * MUST be a real message-store id. /debug/context/curve looked like the natural
+ * source but is not: on a live store its raw entries carry no `sourceMessageId`
+ * (0 of 208 had one) and the entries that DO have an `id` are summaries, whose
+ * ids (`L3-544`) are not message ids at all. Pinning with one would create a pin
+ * matching no message and silently do nothing. The client's own message list is
+ * authoritative — `WelcomeMessageEntry.id` is the store id, and server-sourced
+ * rows are exactly those with a store `index`.
+ */
+export interface PinCandidate {
+  id: string;
+  index: number;
+  participant: string;
+  text: string;
 }
 
 const ago = (ms: number) => {
@@ -67,6 +75,8 @@ export function PinsPanel(props: {
   loaded: boolean;
   state: PinsState | null;
   agent?: string;
+  /** Pinnable messages — server-sourced rows only (real store ids). */
+  candidates?: PinCandidate[];
   onRefresh(): void;
   onAdd(input: {
     kind: 'pin' | 'document';
@@ -85,26 +95,16 @@ export function PinsPanel(props: {
   const [lvl, setLvl] = createSignal('1');
   const [asDoc, setAsDoc] = createSignal(false);
 
-  const [curve, setCurve] = createSignal<CurveEntry[] | null>(null);
-  const [curveErr, setCurveErr] = createSignal<string | null>(null);
-  const [picking, setPicking] = createSignal(false);
+  const [showPicker, setShowPicker] = createSignal(false);
+  const [filter, setFilter] = createSignal('');
 
-  /** /debug/context/curve is the cheap endpoint (~14ms) and the only one that
-   *  exposes per-entry store ids alongside a text preview. */
-  const loadCurve = async () => {
-    setPicking(true);
-    setCurveErr(null);
-    try {
-      const qs = props.agent ? `?agent=${encodeURIComponent(props.agent)}` : '';
-      const res = await fetch(`/debug/context/curve${qs}`, { credentials: 'same-origin' });
-      const body = await res.json();
-      if (!res.ok) { setCurveErr(body?.error ?? `HTTP ${res.status}`); return; }
-      setCurve((body.entries ?? []) as CurveEntry[]);
-    } catch (e) {
-      setCurveErr(e instanceof Error ? e.message : String(e));
-    } finally {
-      setPicking(false);
-    }
+  const candidates = () => {
+    const q = filter().trim().toLowerCase();
+    const all = props.candidates ?? [];
+    const hit = q ? all.filter((c) => c.text.toLowerCase().includes(q) || c.id.includes(q)) : all;
+    // Newest last is how the operator reads the conversation; cap the list so a
+    // long history doesn't build thousands of rows.
+    return hit.slice(-200);
   };
 
   const submit = () => {
@@ -273,43 +273,46 @@ export function PinsPanel(props: {
             </button>
             <button type="button"
               class="px-2 py-0.5 text-[10px] rounded font-mono bg-neutral-800 hover:bg-neutral-700 text-neutral-300"
-              onClick={() => void loadCurve()}>
-              {picking() ? 'loading…' : curve() ? 'reload ids' : 'pick from context'}
+              onClick={() => setShowPicker((v) => !v)}>
+              {showPicker() ? 'hide messages' : `pick from messages (${(props.candidates ?? []).length})`}
             </button>
           </div>
 
-          <Show when={curveErr()}>
-            <div class="text-[10px] text-amber-400/90 mb-2">{curveErr()}</div>
-          </Show>
-
-          {/* ---- id picker ---- */}
-          <Show when={curve()}>
+          <Show when={showPicker()}>
+            <input value={filter()} onInput={(e) => setFilter(e.currentTarget.value)}
+              placeholder="filter by text or id"
+              class="w-full mb-1 bg-neutral-900 border border-neutral-700 rounded px-1.5 py-0.5
+                     font-mono text-[10px] text-neutral-100" />
+            <Show when={candidates().length === 0}>
+              <div class="text-[10px] text-neutral-600 italic">
+                No pinnable messages loaded. Pins need a real store id, so only
+                server-sourced rows qualify — scroll the chat to load history.
+              </div>
+            </Show>
             <div class="max-h-64 overflow-y-auto border border-neutral-800 rounded">
-              <For each={curve()!.filter((e) => e.id)}>
-                {(e) => (
+              <For each={candidates()}>
+                {(c) => (
                   <div class="flex items-start gap-1.5 px-1.5 py-1 border-b border-neutral-900
                               hover:bg-neutral-900/60">
-                    <span class="text-[9px] font-mono text-neutral-600 w-8 shrink-0">#{e.i}</span>
-                    <span class={`text-[9px] font-mono w-8 shrink-0 ${
-                      e.kind === 'raw' ? 'text-emerald-400/80' : 'text-orange-400/80'
-                    }`}>{e.kind}</span>
-                    <span class="text-[10px] text-neutral-400 flex-1 truncate"
-                      title={e.text ?? ''}>{(e.text ?? '').slice(0, 90)}</span>
+                    <span class="text-[9px] font-mono text-neutral-600 w-8 shrink-0">#{c.index}</span>
+                    <span class="text-[9px] font-mono text-cyan-400/70 w-12 shrink-0 truncate">
+                      {c.participant}
+                    </span>
+                    <span class="text-[10px] text-neutral-400 flex-1 truncate" title={c.text}>
+                      {c.text.slice(0, 90)}
+                    </span>
                     <button type="button"
                       class="text-[9px] font-mono px-1 rounded bg-neutral-800 hover:bg-neutral-700
                              text-neutral-400 shrink-0"
-                      onClick={() => setFirst(e.id!)}>from</button>
+                      onClick={() => setFirst(c.id)}>from</button>
                     <button type="button" disabled={asDoc()}
                       class="text-[9px] font-mono px-1 rounded bg-neutral-800 hover:bg-neutral-700
                              text-neutral-400 shrink-0 disabled:opacity-30"
-                      onClick={() => setLast(e.id!)}>to</button>
+                      onClick={() => setLast(c.id)}>to</button>
                   </div>
                 )}
               </For>
             </div>
-            <div class="text-[10px] text-neutral-600 mt-1">
-              Entries without a store id (merged summaries) are omitted — a pin needs a message id.
-            </div>
           </Show>
         </div>
       </Show>