@animalabs/connectome-host 0.3.1 → 0.3.7

package/web/src/App.tsx

@@ -12,6 +12,7 @@ import { McplPanel, type McplServerRow } from './Mcpl';
 import { FilesPanel, FileViewerModal, type Mount, type FlatEntry, type FileViewer } from './Files';
 import { ContextPanel } from './Context';
 import { ContextDocument } from './ContextDocument';
+import { ObserverGateScreen } from './ObserverGate';
 import {
   WEB_PROTOCOL_VERSION,
   type WebUiServerMessage,
@@ -21,6 +22,7 @@ import {
   type MessageBlock,
   type TokenUsage,
   type PerAgentCost,
+  type CallLedgerSnapshot,
 } from '@conhost/web/protocol';
 
 /** Client-side block: the wire MessageBlock plus live-stream bookkeeping. */
@@ -115,6 +117,7 @@ export function App() {
   let pendingHistoryTimer: number | undefined;
   const [usage, setUsage] = createSignal<TokenUsage>({ input: 0, output: 0, cacheRead: 0, cacheWrite: 0 });
   const [perAgentCost, setPerAgentCost] = createSignal<PerAgentCost[]>([]);
+  const [callLedger, setCallLedger] = createSignal<CallLedgerSnapshot | null>(null);
   const [draft, setDraft] = createSignal('');
   /** Currently-focused tree node + the panel mode rendered on its behalf.
    *  `mode` decides whether the side panel shows live stream events or a
@@ -704,6 +707,7 @@ export function App() {
         appendMessage: (m) => setMessages(produce(arr => arr.push(m))),
         setUsage,
         setPerAgentCost,
+        setCallLedger,
         appendStreamToken,
         appendToolUseBlocks,
         updateToolStatus,
@@ -836,6 +840,20 @@ export function App() {
     <div class="flex flex-col h-screen">
       <Header welcome={welcome()} usage={usage()} status={wire.status()} />
       <ReconnectBanner status={wire.status()} />
+      <Show when={wire.observerState() === 'observer' && wire.observer()}>
+        {(info) => (
+          <div class="bg-violet-950/60 border-b border-violet-900 px-4 py-1.5 text-xs text-violet-200 flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-violet-500" />
+            <span>
+              Observing as <span class="font-semibold">{info().label}</span> — read-only, scopes:{' '}
+              <code class="font-mono">{info().scopes.join(', ')}</code>. Content outside your scopes is elided.
+            </span>
+          </div>
+        )}
+      </Show>
+      <Show when={wire.observerState() === 'denied' || wire.observerState() === 'unavailable'}>
+        <ObserverGateScreen state={wire.observerState() as 'denied' | 'unavailable'} />
+      </Show>
       <Show when={protoMismatch() !== null}>
         <div class="bg-amber-950/60 border-b border-amber-900 px-4 py-1.5 text-xs text-amber-200 flex items-center gap-2">
           <span class="w-2 h-2 rounded-full bg-amber-500" />
@@ -952,6 +970,7 @@ export function App() {
               node={focusedNode()!}
               sessionUsage={usage()}
               perAgentCost={perAgentCost()}
+              callLedger={callLedger()}
               onClose={closePanel}
             />
           )}
@@ -1051,6 +1070,7 @@ interface HandlerHooks {
   appendMessage: (msg: Message) => void;
   setUsage: (u: TokenUsage) => void;
   setPerAgentCost: (c: PerAgentCost[]) => void;
+  setCallLedger: (ledger: CallLedgerSnapshot | null) => void;
   appendStreamToken: (token: string, blockType?: string) => void;
   /** Attach yielded tool calls to the streaming assistant message. */
   appendToolUseBlocks: (calls: Array<{ id: string; name: string; input?: unknown }>) => void;
@@ -1084,6 +1104,7 @@ function handleServerMessage(
       hooks.applyWelcome(msg);
       hooks.setUsage(msg.usage);
       hooks.setPerAgentCost(msg.perAgentCost ?? []);
+      hooks.setCallLedger(msg.callLedger ?? null);
       return;
     }
     case 'message-appended':
@@ -1096,6 +1117,9 @@ function handleServerMessage(
       hooks.setUsage(msg.usage);
       if (msg.perAgentCost) hooks.setPerAgentCost(msg.perAgentCost);
       return;
+    case 'call-ledger':
+      hooks.setCallLedger(msg.ledger);
+      return;
     case 'trace': {
       const e = msg.event;
       switch (e.type) {

package/web/src/Context.tsx

@@ -8,7 +8,7 @@
  * a per-segment table, with an exact total token count.
  */
 
-import { createSignal, onMount, For, Show } from 'solid-js';
+import { createSignal, onCleanup, onMount, For, Show } from 'solid-js';
 
 interface Seg { messages: number; tokens: number }
 interface Stats {
@@ -28,9 +28,55 @@ interface Makeup {
   error?: string;
 }
 
+interface CoverageLevel {
+  level: number;
+  summaries: number;
+  frontier: number;
+  tokens: number;
+  coveredChunks: number;
+  coveredMessages: number;
+  coveredTokens: number;
+}
+
+interface CoverageChunk {
+  index: number;
+  messages: number;
+  tokens: number;
+  compressed: boolean;
+  summaryId: string | null;
+  maxLevel: number;
+  selectedMin: number;
+  selectedMax: number;
+  queued: boolean;
+}
+
+interface Coverage {
+  agent: string;
+  branch: string;
+  generatedAt: string;
+  supported: boolean;
+  totals: {
+    chunks: number;
+    compressedChunks: number;
+    coveredMessages: number;
+    coveredTokens: number;
+    summaries: number;
+  };
+  levels: CoverageLevel[];
+  chunks: CoverageChunk[];
+  queue: {
+    inFlight: boolean;
+    pending: string | null;
+    l1: number[];
+    merges: Array<{ targetLevel: number; sourceCount: number; firstSource: string | null; lastSource: string | null }>;
+  };
+}
+
 type Row = { key: string; label: string; messages: number; tokens: number; color: string };
 
 const fmt = (n: number) => n.toLocaleString();
+const levelColors = ['#52525b', '#06b6d4', '#10b981', '#f59e0b', '#f43f5e', '#a78bfa', '#60a5fa'];
+const levelColor = (level: number) => levelColors[Math.min(level, levelColors.length - 1)];
 
 function rowsOf(s: Stats): Row[] {
   return [
@@ -45,15 +91,19 @@ function rowsOf(s: Stats): Row[] {
 
 export function ContextPanel(props: { agent?: string }) {
   const [data, setData] = createSignal<Makeup | null>(null);
+  const [coverage, setCoverage] = createSignal<Coverage | null>(null);
   const [loading, setLoading] = createSignal(false);
+  const [coverageLoading, setCoverageLoading] = createSignal(false);
   const [err, setErr] = createSignal<string | null>(null);
+  const [coverageErr, setCoverageErr] = createSignal<string | null>(null);
+
+  const query = () => props.agent ? `?agent=${encodeURIComponent(props.agent)}` : '';
 
   const load = async () => {
     setLoading(true);
     setErr(null);
     try {
-      const q = props.agent ? `?agent=${encodeURIComponent(props.agent)}` : '';
-      const res = await fetch(`/debug/context/makeup${q}`, { credentials: 'same-origin' });
+      const res = await fetch(`/debug/context/makeup${query()}`, { credentials: 'same-origin' });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const j = (await res.json()) as Makeup;
       if (j.error) throw new Error(j.error);
@@ -65,7 +115,30 @@ export function ContextPanel(props: { agent?: string }) {
     }
   };
 
-  onMount(load);
+  const loadCoverage = async () => {
+    setCoverageLoading(true);
+    setCoverageErr(null);
+    try {
+      const res = await fetch(`/debug/context/coverage${query()}`, { credentials: 'same-origin' });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      setCoverage((await res.json()) as Coverage);
+    } catch (e) {
+      setCoverageErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setCoverageLoading(false);
+    }
+  };
+
+  const refreshAll = () => {
+    void load();
+    void loadCoverage();
+  };
+
+  onMount(() => {
+    refreshAll();
+    const timer = window.setInterval(() => void loadCoverage(), 5_000);
+    onCleanup(() => window.clearInterval(timer));
+  });
 
   const estTotal = () => data()?.stats?.total.tokens ?? 0;
   const rows = () => {
@@ -80,10 +153,11 @@ export function ContextPanel(props: { agent?: string }) {
         <button
           type="button"
           class="px-2 py-0.5 text-neutral-400 hover:text-neutral-100 border border-neutral-700 rounded"
-          onClick={load}
-          disabled={loading()}
+          onClick={refreshAll}
+          disabled={loading() || coverageLoading()}
+          title="Refresh context diagnostics"
         >
-          {loading() ? '…' : 'refresh'}
+          {loading() || coverageLoading() ? '…' : 'refresh'}
         </button>
       </div>
 
@@ -91,6 +165,106 @@ export function ContextPanel(props: { agent?: string }) {
         <div class="text-rose-400">error: {err()}</div>
       </Show>
 
+      <Show when={coverageErr()}>
+        <div class="text-rose-400">coverage: {coverageErr()}</div>
+      </Show>
+
+      <Show when={coverage()?.supported}>
+        <section class="border-y border-neutral-800 py-3 space-y-2.5">
+          <div class="flex items-center justify-between">
+            <span class="text-neutral-300">Summary coverage</span>
+            <span class="text-neutral-600">
+              {coverage()!.queue.inFlight || coverage()!.queue.l1.length > 0 || coverage()!.queue.merges.length > 0
+                ? 'active'
+                : 'idle'}
+            </span>
+          </div>
+
+          <div class="grid grid-cols-3 gap-2 text-neutral-500">
+            <div>
+              <div class="text-base text-neutral-200">{coverage()!.totals.compressedChunks}/{coverage()!.totals.chunks}</div>
+              <div>chunks</div>
+            </div>
+            <div>
+              <div class="text-base text-neutral-200">{fmt(coverage()!.totals.coveredMessages)}</div>
+              <div>msgs covered</div>
+            </div>
+            <div>
+              <div class="text-base text-neutral-200">{fmt(coverage()!.totals.summaries)}</div>
+              <div>summaries</div>
+            </div>
+          </div>
+
+          <div class="space-y-1.5">
+            <div class="flex justify-between text-neutral-500"><span>available depth</span><span>oldest → newest</span></div>
+            <CoverageStrip chunks={coverage()!.chunks} field="available" />
+            <div class="flex justify-between text-neutral-500"><span>selected depth</span><span>{fmt(coverage()!.totals.coveredTokens)} tok covered</span></div>
+            <CoverageStrip chunks={coverage()!.chunks} field="selected" />
+          </div>
+
+          <div class="flex flex-wrap gap-x-2.5 gap-y-1 text-neutral-500">
+            <For each={[0, ...coverage()!.levels.map(level => level.level)]}>
+              {(level) => (
+                <span><span class="inline-block w-2 h-2 rounded-sm mr-1" style={{ background: levelColor(level) }} />L{level}</span>
+              )}
+            </For>
+          </div>
+
+          <table class="w-full">
+            <thead>
+              <tr class="text-neutral-500 text-left">
+                <th class="font-normal py-1">level</th>
+                <th class="font-normal text-right">frontier</th>
+                <th class="font-normal text-right">total</th>
+                <th class="font-normal text-right">coverage</th>
+              </tr>
+            </thead>
+            <tbody>
+              <For each={coverage()!.levels}>
+                {(level) => (
+                  <tr class="border-t border-neutral-900">
+                    <td class="py-1 text-neutral-200">L{level.level}</td>
+                    <td class="text-right text-neutral-300">{level.frontier}</td>
+                    <td class="text-right text-neutral-500">{level.summaries}</td>
+                    <td class="text-right text-neutral-400">{fmt(level.coveredMessages)} msg</td>
+                  </tr>
+                )}
+              </For>
+            </tbody>
+          </table>
+
+          <div class="border-t border-neutral-900 pt-2 space-y-1">
+            <div class="flex items-center justify-between">
+              <span class="text-neutral-400">Queue</span>
+              <span class={coverage()!.queue.inFlight ? 'text-amber-300' : 'text-neutral-600'}>
+                {coverage()!.queue.inFlight ? 'in flight' : 'waiting'}
+              </span>
+            </div>
+            <Show when={coverage()!.queue.pending}>
+              <div class="text-amber-200 truncate" title={coverage()!.queue.pending ?? ''}>{coverage()!.queue.pending}</div>
+            </Show>
+            <For each={coverage()!.queue.l1}>
+              {(index) => <div class="text-neutral-400">L1 · chunk {index}</div>}
+            </For>
+            <For each={coverage()!.queue.merges}>
+              {(merge) => (
+                <div class="text-neutral-400" title={`${merge.firstSource ?? ''} → ${merge.lastSource ?? ''}`}>
+                  L{merge.targetLevel} · {merge.sourceCount} source summaries
+                </div>
+              )}
+            </For>
+            <Show when={!coverage()!.queue.inFlight && coverage()!.queue.l1.length === 0 && coverage()!.queue.merges.length === 0}>
+              <div class="text-neutral-600">No queued work</div>
+            </Show>
+          </div>
+
+          <div class="flex items-center justify-between gap-2 text-neutral-600">
+            <span class="min-w-0 truncate" title={coverage()!.branch}>{coverage()!.branch}</span>
+            <a class="shrink-0 text-cyan-500 hover:text-cyan-300" href="/curve" target="_blank" rel="noreferrer">curve ↗</a>
+          </div>
+        </section>
+      </Show>
+
       <Show when={data()?.stats} fallback={<Show when={!err()}><div class="text-neutral-500">loading…</div></Show>}>
         {/* headline totals */}
         <div class="flex gap-4">
@@ -156,3 +330,29 @@ export function ContextPanel(props: { agent?: string }) {
     </div>
   );
 }
+
+function CoverageStrip(props: { chunks: CoverageChunk[]; field: 'available' | 'selected' }) {
+  const total = () => props.chunks.reduce((sum, chunk) => sum + Math.max(1, chunk.tokens), 0);
+  return (
+    <div class="flex h-4 w-full overflow-hidden rounded border border-neutral-800 bg-neutral-900">
+      <For each={props.chunks}>
+        {(chunk) => {
+          const level = () => props.field === 'available' ? chunk.maxLevel : chunk.selectedMax;
+          const title = () => {
+            const selected = chunk.selectedMin === chunk.selectedMax
+              ? `L${chunk.selectedMax}`
+              : `L${chunk.selectedMin}–L${chunk.selectedMax}`;
+            return `chunk ${chunk.index} · ${chunk.messages} msg · ${fmt(chunk.tokens)} tok · available L${chunk.maxLevel} · selected ${selected}${chunk.queued ? ' · queued' : ''}`;
+          };
+          return (
+            <div
+              class={`h-full min-w-px ${chunk.queued ? 'ring-1 ring-inset ring-amber-200' : ''}`}
+              style={{ width: `${(Math.max(1, chunk.tokens) / Math.max(1, total())) * 100}%`, background: levelColor(level()) }}
+              title={title()}
+            />
+          );
+        }}
+      </For>
+    </div>
+  );
+}

package/web/src/ObserverGate.tsx

@@ -0,0 +1,78 @@
+/**
+ * Full-screen gate shown when this device's observer key is not granted on
+ * this agent ('denied') or WebCrypto is unavailable ('unavailable' —
+ * insecure context). Shows the device fingerprint to hand to the agent /
+ * operator, and offers password sign-in as the fallback (navigating to
+ * /auth/basic triggers the browser's basic-auth prompt; with cached
+ * credentials the subsequent WS upgrade authenticates as a full client).
+ */
+import { createResource, Show } from 'solid-js';
+import { deviceFingerprint } from './observer-identity';
+
+export function ObserverGateScreen(props: { state: 'denied' | 'unavailable' }) {
+  const [fingerprint] = createResource(deviceFingerprint);
+
+  const copy = (): void => {
+    const fp = fingerprint();
+    if (fp) void navigator.clipboard?.writeText(fp);
+  };
+
+  return (
+    <div class="fixed inset-0 z-50 bg-zinc-950/95 flex items-center justify-center p-6">
+      <div class="max-w-xl w-full border border-zinc-800 rounded-lg bg-zinc-900 p-6 space-y-4 text-sm text-zinc-300">
+        <Show
+          when={props.state === 'denied'}
+          fallback={
+            <>
+              <h2 class="text-base font-semibold text-zinc-100">Observer keys unavailable here</h2>
+              <p>
+                Device-key authentication needs a secure context (https or localhost) for WebCrypto.
+                This page was loaded over plain http, so only password sign-in is available.
+              </p>
+            </>
+          }
+        >
+          <h2 class="text-base font-semibold text-zinc-100">This device isn't authorized yet</h2>
+          <p>
+            This viewer shows an agent's interior — access is granted per device, by the agent or
+            its operator. Share this device's key fingerprint with them:
+          </p>
+          <Show
+            when={!fingerprint.loading && fingerprint() === null}
+            fallback={
+              <div class="flex items-center gap-2">
+                <code class="font-mono text-xs bg-zinc-950 border border-zinc-800 rounded px-2 py-1.5 break-all flex-1">
+                  {fingerprint.loading ? 'generating…' : fingerprint()}
+                </code>
+                <button
+                  class="px-2 py-1.5 text-xs rounded border border-zinc-700 hover:bg-zinc-800"
+                  onClick={copy}
+                >
+                  copy
+                </button>
+              </div>
+            }
+          >
+            <p class="text-amber-300/90">
+              This origin can't generate a device key (WebCrypto needs https or localhost) —
+              use password sign-in below, or open the agent's https URL.
+            </p>
+          </Show>
+          <p class="text-zinc-400">
+            Grant (agent tool or operator edit of <code class="font-mono">data/observers.json</code>):{' '}
+            <code class="font-mono text-xs">
+              observers--grant key=&lt;fingerprint&gt; label=&lt;who-you-are&gt; scopes=[health,…]
+            </code>
+            . Takes effect within ~3s — then{' '}
+            <button class="underline" onClick={() => location.reload()}>reload</button>.
+          </p>
+        </Show>
+        <div class="pt-2 border-t border-zinc-800">
+          <a class="underline text-zinc-400 hover:text-zinc-200" href="/auth/basic">
+            Sign in with password instead
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/src/Usage.tsx

@@ -14,7 +14,13 @@
 import { For, Show } from 'solid-js';
 import type { UiNode } from './tree';
 import { aggregateTokens } from './tree';
-import type { TokenUsage, PerAgentCost } from '@conhost/web/protocol';
+import type {
+  TokenUsage,
+  PerAgentCost,
+  CallLedgerSnapshot,
+  CallLedgerRow,
+  CallLedgerVerdict,
+} from '@conhost/web/protocol';
 
 export function UsagePanel(props: {
   node: UiNode;
@@ -24,6 +30,10 @@ export function UsagePanel(props: {
   /** Per-agent cost slice (parent-process agents only). Used to label
    *  per-agent cost in process / per-agent breakdown views. */
   perAgentCost: PerAgentCost[];
+  /** Recent provider calls. The ledger is process-local, so it is shown on
+   *  the process usage view rather than pretending it can be split across
+   *  fleet children. */
+  callLedger: CallLedgerSnapshot | null;
   onClose(): void;
 }) {
   const costFor = (agentName: string): { total: number; currency: string } | undefined => {
@@ -70,7 +80,7 @@ export function UsagePanel(props: {
   };
 
   return (
-    <div class="border-l border-neutral-800 w-96 shrink-0 bg-neutral-950 flex flex-col h-full">
+    <div class="border-l border-neutral-800 w-[52rem] max-w-[68vw] shrink-0 bg-neutral-950 flex flex-col h-full">
       <div class="border-b border-neutral-800 px-3 py-2 flex items-center gap-2">
         <span class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">usage</span>
         <span class="font-mono text-sm text-neutral-200 truncate">{props.node.label}</span>
@@ -99,6 +109,8 @@ export function UsagePanel(props: {
         </Show>
 
         <Show when={props.node.kind === 'process'}>
+          <CallLedgerSection ledger={props.callLedger} />
+
           <section class="text-[10px] text-neutral-600 italic leading-snug">
             Session total comes from the membrane's per-call usage stream.
             "By node" is the per-agent ledger from the tree reducer; the two
@@ -110,6 +122,108 @@ export function UsagePanel(props: {
   );
 }
 
+function CallLedgerSection(props: { ledger: CallLedgerSnapshot | null }) {
+  const rows = (): CallLedgerRow[] => [...(props.ledger?.rows ?? [])].slice(-30).reverse();
+  return (
+    <section>
+      <div class="flex items-baseline gap-2 mb-1">
+        <div class="text-neutral-500 uppercase tracking-wider text-[10px]">recent calls · cache ledger</div>
+        <Show when={props.ledger}>
+          {(ledger) => (
+            <span class="ml-auto text-[10px] text-neutral-500">
+              ${fmtCost(ledger().summary.cost?.total ?? 0)} retained · {Math.round(ledger().summary.cacheHitRatio * 100)}% cached
+              <Show when={(ledger().summary.cost?.unpricedCalls ?? 0) > 0}>
+                {' '}· <span class="text-amber-400">{ledger().summary.cost!.unpricedCalls} unpriced</span>
+              </Show>
+            </span>
+          )}
+        </Show>
+      </div>
+
+      <Show
+        when={rows().length > 0}
+        fallback={<div class="border border-neutral-800 rounded px-2 py-2 text-neutral-600">No provider calls recorded yet.</div>}
+      >
+        <div class="border border-neutral-800 rounded overflow-hidden">
+          <div class="grid grid-cols-[4.7rem_3.5rem_3rem_4rem_4rem_4rem_4rem_4.7rem_minmax(8rem,1fr)] gap-x-2 px-2 py-1 bg-neutral-900 text-[9px] uppercase tracking-wider text-neutral-600">
+            <span>time</span><span>origin</span><span>msgs</span><span class="text-right">in</span>
+            <span class="text-right">read</span><span class="text-right">write</span><span class="text-right">out</span>
+            <span class="text-right">cost</span><span>verdict / cause</span>
+          </div>
+          <div class="max-h-80 overflow-y-auto divide-y divide-neutral-900">
+            <For each={rows()}>{(row) => <CallLedgerRowView row={row} />}</For>
+          </div>
+        </div>
+        <div class="mt-1 text-[9px] text-neutral-600">
+          Costs marked in USD use provider-reported token buckets and the versioned public rate card. Calls missing an exact cache-write split or known rate stay explicitly unpriced. origin~ remains an estimated call class.
+        </div>
+      </Show>
+    </section>
+  );
+}
+
+function CallLedgerRowView(props: { row: CallLedgerRow }) {
+  const time = (): string => {
+    const d = new Date(props.row.timestamp);
+    return Number.isNaN(d.getTime()) ? '?' : d.toLocaleTimeString([], { hour12: false });
+  };
+  const flags = (): string => {
+    const bp = props.row.cache.breakpoints;
+    if (bp === undefined) return 'flags unknown';
+    if (bp === 0) return 'no cache flags';
+    return `${bp}bp:${props.row.cache.effectiveTtl}`;
+  };
+  const costTitle = (): string => {
+    const c = props.row.cost;
+    if (!c) return 'Unpriced: an authoritative usage bucket or public rate was unavailable';
+    return [
+      `billing-grade ${c.currency} · ${c.pricingVersion}`,
+      `input $${c.input.toFixed(6)}`,
+      `read $${c.cacheRead.toFixed(6)}`,
+      `write 5m $${c.cacheWrite5m.toFixed(6)}`,
+      `write 1h $${c.cacheWrite1h.toFixed(6)}`,
+      `output $${c.output.toFixed(6)}`,
+    ].join(' · ');
+  };
+  return (
+    <div class="grid grid-cols-[4.7rem_3.5rem_3rem_4rem_4rem_4rem_4rem_4.7rem_minmax(8rem,1fr)] gap-x-2 px-2 py-1.5 items-start hover:bg-neutral-900/60">
+      <span class="text-neutral-400" title={`${props.row.timestamp} · ${Math.round(props.row.durationMs / 1000)}s`}>{time()}</span>
+      <span class="text-neutral-500">{props.row.originEstimate}</span>
+      <span class="text-neutral-400">{props.row.messages}</span>
+      <span class="text-right text-neutral-400">{fmt(props.row.tokens.input)}</span>
+      <span class="text-right text-sky-300">{fmt(props.row.tokens.cacheRead)}</span>
+      <span class="text-right text-amber-300">{fmt(props.row.tokens.cacheWrite)}</span>
+      <span class="text-right text-neutral-400">{fmt(props.row.tokens.output)}</span>
+      <span
+        class={`text-right ${props.row.cost ? 'text-emerald-300' : 'text-amber-500'}`}
+        title={costTitle()}
+      >
+        {props.row.cost ? `$${fmtCost(props.row.cost.total)}` : 'unpriced'}
+      </span>
+      <span class="min-w-0">
+        <span class={`font-semibold ${verdictColor(props.row.verdict)}`}>{props.row.verdict}</span>
+        <span class="ml-1 text-[9px] text-neutral-600">{flags()}</span>
+        <span class="block text-[9px] leading-snug text-neutral-500 break-words">{props.row.cause}</span>
+      </span>
+    </div>
+  );
+}
+
+function verdictColor(verdict: CallLedgerVerdict): string {
+  switch (verdict) {
+    case 'HIT': return 'text-emerald-300';
+    case 'hit+extend': return 'text-lime-300';
+    case 'rewrite:expired': return 'text-orange-300';
+    case 'rewrite:prefix-mutated':
+    case 'rewrite:prefix-truncated': return 'text-red-300';
+    case 'rewrite:unexplained': return 'text-violet-300';
+    case 'ERROR': return 'text-red-400';
+    case 'first-write': return 'text-slate-300';
+    case 'uncached': return 'text-stone-400';
+    default: return 'text-neutral-400';
+  }
+}
+
 function TotalsBlock(props: { totals: { input: number; output: number; cacheRead: number; cacheWrite: number; cost?: { total: number; currency: string } } }) {
   const t = props.totals;
   return (