@animalabs/connectome-host 0.3.9 → 0.4.0

package/web/src/App.tsx

@@ -13,6 +13,8 @@ import { FilesPanel, FileViewerModal, type Mount, type FlatEntry, type FileViewe
 import { ContextPanel } from './Context';
 import { ContextDocument } from './ContextDocument';
 import { ObserverGateScreen } from './ObserverGate';
+import { OpsAlertStrip, HealthPanel, type OpsAlert, type HealthSnapshot } from './Health';
+import { BranchPanel } from './Branches';
 import {
   WEB_PROTOCOL_VERSION,
   type WebUiServerMessage,
@@ -23,6 +25,7 @@ import {
   type TokenUsage,
   type PerAgentCost,
   type CallLedgerSnapshot,
+  type BranchRow,
 } from '@conhost/web/protocol';
 
 /** Client-side block: the wire MessageBlock plus live-stream bookkeeping. */
@@ -123,7 +126,7 @@ export function App() {
    *  `mode` decides whether the side panel shows live stream events or a
    *  static usage breakdown; clicking the row opens 'stream', clicking the
    *  token badge opens 'usage'. Both share the same panel slot. */
-  type PanelMode = 'stream' | 'usage';
+  type PanelMode = 'stream' | 'usage' | 'branches';
   const [focusedId, setFocusedId] = createSignal<string | null>(null);
   const [focusedNode, setFocusedNode] = createSignal<UiNode | null>(null);
   const [panelMode, setPanelMode] = createSignal<PanelMode | null>(null);
@@ -136,9 +139,140 @@ export function App() {
    *  was invoked. Non-null = the quit-confirm modal is open. */
   const [quitConfirm, setQuitConfirm] = createSignal<string[] | null>(null);
 
+  // ---------------------------------------------------------------------------
+  // Ops alerts + health — the operator-facing half of the ops:alert pipeline
+  // (failures.log / webhook already exist for machines; this is for the human
+  // actually looking at the page).
+  // ---------------------------------------------------------------------------
+
+  /** Active alerts keyed `${agent}:${kind}`. Live `ops:alert` traces upsert;
+   *  `<kind>-clear` traces and /healthz reconciliation remove. */
+  const [opsAlerts, setOpsAlerts] = createSignal<Map<string, OpsAlert>>(new Map());
+  const alertList = createMemo(() =>
+    [...opsAlerts().values()].sort((a, b) => b.at - a.at));
+
+  const upsertOpsAlert = (kind: string, agent: string, message: string, bump = true): void => {
+    const key = `${agent}:${kind}`;
+    setOpsAlerts((prev) => {
+      const next = new Map(prev);
+      const existing = next.get(key);
+      next.set(key, {
+        key,
+        kind,
+        agent,
+        message,
+        at: Date.now(),
+        count: existing ? existing.count + (bump ? 1 : 0) : 1,
+      });
+      return next;
+    });
+  };
+  const removeOpsAlert = (key: string): void => {
+    setOpsAlerts((prev) => {
+      if (!prev.has(key)) return prev;
+      const next = new Map(prev);
+      next.delete(key);
+      return next;
+    });
+  };
+
+  /** Fold an `ops:alert` trace into the strip. All-clear travels as a
+   *  distinct `<kind>-clear` alert (see the host's quarantine wiring), so a
+   *  `-clear` suffix removes its base alert instead of adding a row. */
+  const applyOpsAlertTrace = (e: { [k: string]: unknown }): void => {
+    const kind = typeof e.kind === 'string' ? e.kind : 'unknown';
+    const agent = typeof e.agentName === 'string' ? e.agentName : '?';
+    const message = typeof e.message === 'string' ? e.message : '';
+    if (kind.endsWith('-clear')) {
+      removeOpsAlert(`${agent}:${kind.slice(0, -'-clear'.length)}`);
+      return;
+    }
+    upsertOpsAlert(kind, agent, message);
+  };
+
+  /** /healthz snapshot — feeds the Health tab and reconciles durable-state
+   *  alerts (quarantine, hard-down) so a page opened mid-incident alarms
+   *  without waiting for the next klaxon re-fire. */
+  const [health, setHealth] = createSignal<HealthSnapshot | null>(null);
+  const [healthErr, setHealthErr] = createSignal<string | null>(null);
+  let healthDenied = false;
+
+  const reconcileHealthAlerts = (h: HealthSnapshot): void => {
+    const quarantine = h.compressionQuarantine ?? {};
+    for (const [agent, q] of Object.entries(quarantine)) {
+      const key = `${agent}:compression-quarantine`;
+      if ((q.count ?? 0) > 0) {
+        if (!opsAlerts().has(key)) {
+          upsertOpsAlert('compression-quarantine', agent,
+            `${q.count} chunk(s) in compression quarantine — spans stay raw and will eventually exhaust the context budget.`,
+            false);
+        }
+      } else {
+        removeOpsAlert(key);
+      }
+    }
+    for (const a of h.agents ?? []) {
+      const key = `${a.name}:inference-exhausted`;
+      const streak = a.consecutiveInferenceFailures ?? 0;
+      if (streak >= 3) {
+        const message = `${streak} consecutive inference failures — agent is down.`
+          + (a.lastInference?.lastError ? ` Last: ${a.lastInference.lastError}` : '');
+        // Only touch the entry when the condition actually changed —
+        // rewriting `at` every poll would show a perpetual "5s ago" and
+        // re-sort the strip on every cycle.
+        if (opsAlerts().get(key)?.message !== message) {
+          upsertOpsAlert('inference-exhausted', a.name, message, false);
+        }
+      } else {
+        removeOpsAlert(key);
+      }
+    }
+  };
+
+  /** `force` retries past a remembered 401/403 — the operator's grant may
+   *  have gained the 'health' scope since the poll gave up. */
+  const loadHealth = async (force = false): Promise<void> => {
+    if (healthDenied && !force) return;
+    if (force) healthDenied = false;
+    try {
+      const res = await fetch('/healthz', { credentials: 'same-origin' });
+      if (!res.ok) {
+        if (res.status === 403 || res.status === 401) {
+          healthDenied = true;
+          setHealthErr('403');
+          return;
+        }
+        throw new Error(`HTTP ${res.status}`);
+      }
+      const h = (await res.json()) as HealthSnapshot;
+      setHealth(h);
+      setHealthErr(null);
+      reconcileHealthAlerts(h);
+    } catch (e) {
+      setHealthErr(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  // ---------------------------------------------------------------------------
+  // Branch panel — Chronicle lineage view, opened from the header branch chip.
+  // ---------------------------------------------------------------------------
+
+  const [branches, setBranches] = createSignal<BranchRow[]>([]);
+  const [branchesCurrentId, setBranchesCurrentId] = createSignal<string | null>(null);
+  const [branchesLoading, setBranchesLoading] = createSignal(false);
+
+  const refreshBranches = (): void => {
+    setBranchesLoading(true);
+    wire.send({ type: 'request-branches' });
+  };
+
+  const checkoutBranch = (name: string): void => {
+    wire.send({ type: 'command', command: `/checkout ${name}` });
+  };
+
   /** Right-sidebar tab selection. The Tree is the most-used surface so it's
    *  the default; lessons / mcp / files are operator-driven panels. */
-  type SidebarTab = 'tree' | 'lessons' | 'mcp' | 'files' | 'context';
+  type SidebarTab = 'tree' | 'lessons' | 'mcp' | 'files' | 'context' | 'health';
   const [sidebarTab, setSidebarTab] = createSignal<SidebarTab>('tree');
   const [mainView, setMainView] = createSignal<'chat' | 'context'>('chat');
 
@@ -623,6 +757,23 @@ export function App() {
     streamTokenBuffer = '';
   };
 
+  /** Toggle the branch panel in the shared middle-panel slot. Requests a
+   *  fresh listing on every open — branch mutations happen through commands
+   *  and MCPL, so a cached list goes stale invisibly. */
+  const openBranches = (): void => {
+    if (panelMode() === 'branches') {
+      closePanel();
+      return;
+    }
+    teardownPeek();
+    setFocusedId(null);
+    setFocusedNode(null);
+    setPanelMode('branches');
+    setStreamLines([]);
+    streamTokenBuffer = '';
+    refreshBranches();
+  };
+
   const toggleExpand = (id: string): void => {
     setExpanded((prev) => {
       const next = new Set(prev);
@@ -741,12 +892,32 @@ export function App() {
           setOpenFile(file);
           setFileLoading(false);
         },
+        onOpsAlert: applyOpsAlertTrace,
+        setBranchesList: (list, currentId) => {
+          setBranches(list);
+          setBranchesCurrentId(currentId);
+          setBranchesLoading(false);
+        },
+        onBranchChanged: (branch) => {
+          // Update the header chip immediately; the server's re-welcome
+          // follows with the new branch's messages. Refresh the lineage
+          // panel if the operator is looking at it.
+          setWelcome((w) => (w ? { ...w, branch } : w));
+          if (panelMode() === 'branches') refreshBranches();
+        },
       });
     });
     onCleanup(() => {
       detach();
       wire.close();
     });
+
+    // Health poll: durable-state alerts (quarantine, hard-down) must not
+    // depend on being connected when the klaxon fired. 15s keeps the strip
+    // honest without meaningful load (counts-only JSON).
+    void loadHealth();
+    const healthTimer = window.setInterval(() => void loadHealth(), 15_000);
+    onCleanup(() => window.clearInterval(healthTimer));
   });
 
   /** Route a server message into the stream pane *if* it matches the focused
@@ -838,8 +1009,15 @@ export function App() {
 
   return (
     <div class="flex flex-col h-screen">
-      <Header welcome={welcome()} usage={usage()} status={wire.status()} />
+      <Header
+        welcome={welcome()}
+        usage={usage()}
+        status={wire.status()}
+        branchPanelOpen={panelMode() === 'branches'}
+        onBranchClick={openBranches}
+      />
       <ReconnectBanner status={wire.status()} />
+      <OpsAlertStrip alerts={alertList()} onDismiss={removeOpsAlert} />
       <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">
@@ -975,6 +1153,17 @@ export function App() {
             />
           )}
         </Show>
+        <Show when={panelMode() === 'branches'}>
+          <BranchPanel
+            branches={branches()}
+            currentId={branchesCurrentId() ?? welcome()?.branch.id ?? null}
+            loading={branchesLoading()}
+            readOnly={wire.observerState() === 'observer'}
+            onCheckout={checkoutBranch}
+            onRefresh={refreshBranches}
+            onClose={closePanel}
+          />
+        </Show>
         <aside class="w-72 border-l border-neutral-800 bg-neutral-950 shrink-0 flex flex-col">
           <SidebarTabs
             current={sidebarTab()}
@@ -1042,6 +1231,13 @@ export function App() {
             <Show when={sidebarTab() === 'context'}>
               <ContextPanel agent={panelScope() === 'local' ? undefined : panelScope()} />
             </Show>
+            <Show when={sidebarTab() === 'health'}>
+              <HealthPanel
+                health={health()}
+                error={healthErr()}
+                onRefresh={() => void loadHealth(true)}
+              />
+            </Show>
           </div>
           <RecipePane welcome={welcome()} scope={panelScope()} />
         </aside>
@@ -1092,6 +1288,12 @@ interface HandlerHooks {
   setMountTree: (mount: string, entries: FlatEntry[]) => void;
   /** Apply a workspace-file response. */
   setOpenFile: (file: FileViewer) => void;
+  /** Fold an ops:alert trace into the alert strip. */
+  onOpsAlert: (event: { [k: string]: unknown }) => void;
+  /** Apply a branches-list response. */
+  setBranchesList: (branches: BranchRow[], currentId: string) => void;
+  /** React to a server-side branch switch (undo/redo/checkout). */
+  onBranchChanged: (branch: { id: string; name: string }) => void;
 }
 
 function handleServerMessage(
@@ -1158,6 +1360,9 @@ function handleServerMessage(
           }
           return;
         }
+        case 'ops:alert':
+          hooks.onOpsAlert(e);
+          return;
         default:
           return;
       }
@@ -1173,7 +1378,13 @@ function handleServerMessage(
       return;
     }
     case 'branch-changed':
+      hooks.onBranchChanged(msg.branch);
       return;
+    case 'branches-list':
+      hooks.setBranchesList(msg.branches, msg.currentId);
+      return;
+    // The server follows a session switch with a full re-welcome (setApp
+    // re-flushes every client), which resets all session-scoped state.
     case 'session-changed':
       return;
     case 'inbound-trigger': {
@@ -1228,6 +1439,8 @@ function Header(props: {
   welcome: WelcomeMessage | null;
   usage: TokenUsage;
   status: string;
+  branchPanelOpen: boolean;
+  onBranchClick(): void;
 }) {
   const fmt = (n: number): string => {
     if (n < 1000) return String(n);
@@ -1255,10 +1468,19 @@ function Header(props: {
           · {props.welcome!.session.name}
         </div>
       </Show>
-      <Show when={props.welcome?.branch.name && props.welcome.branch.name !== 'main'}>
-        <div class="text-amber-400 text-xs font-mono px-1.5 py-0.5 bg-amber-950/30 rounded">
-          {props.welcome!.branch.name}
-        </div>
+      <Show when={props.welcome?.branch.name}>
+        <button
+          type="button"
+          class={`text-xs font-mono px-1.5 py-0.5 rounded ${
+            props.welcome!.branch.name !== 'main'
+              ? 'text-amber-400 bg-amber-950/30 hover:bg-amber-950/60'
+              : 'text-neutral-400 bg-neutral-900 hover:bg-neutral-800'
+          } ${props.branchPanelOpen ? 'ring-1 ring-cyan-800' : ''}`}
+          title="Chronicle branches — click to browse lineage"
+          onClick={() => props.onBranchClick()}
+        >
+          ⑂ {props.welcome!.branch.name}
+        </button>
       </Show>
       <div class="ml-auto text-xs font-mono text-neutral-500">
         {fmt(props.usage.input)} in
@@ -1720,16 +1942,19 @@ function CommandSuggestions(props: { draft: string; onPick: (cmd: string) => voi
   );
 }
 
+type SidebarTabId = 'tree' | 'lessons' | 'mcp' | 'files' | 'context' | 'health';
+
 function SidebarTabs(props: {
-  current: 'tree' | 'lessons' | 'mcp' | 'files' | 'context';
-  onSelect: (tab: 'tree' | 'lessons' | 'mcp' | 'files' | 'context') => void;
+  current: SidebarTabId;
+  onSelect: (tab: SidebarTabId) => void;
 }) {
-  const tabs: Array<{ id: 'tree' | 'lessons' | 'mcp' | 'files' | 'context'; label: string; title: string }> = [
+  const tabs: Array<{ id: SidebarTabId; label: string; title: string }> = [
     { id: 'tree', label: 'Tree', title: 'Agent + fleet tree' },
     { id: 'lessons', label: 'Lessons', title: 'Lesson library' },
     { id: 'mcp', label: 'MCP', title: 'MCPL servers' },
     { id: 'files', label: 'Files', title: 'Workspace mounts + files' },
     { id: 'context', label: 'Context', title: 'Compiled context makeup' },
+    { id: 'health', label: 'Health', title: 'Runtime settings, failures, quarantine' },
   ];
   return (
     <div class="flex border-b border-neutral-800 bg-neutral-900/40 text-[11px]">
@@ -1751,16 +1976,6 @@ function SidebarTabs(props: {
   );
 }
 
-/** Stub used while a tab's full content isn't shipped yet. Replaced as each
- *  panel lands. */
-function PlaceholderPanel(props: { label: string }) {
-  return (
-    <div class="px-3 py-3 text-xs text-neutral-600 italic">
-      {props.label} — coming soon.
-    </div>
-  );
-}
-
 function QuitConfirmModal(props: {
   childNames: string[];
   onAction: (action: 'kill-children' | 'detach' | 'cancel') => void;

package/web/src/Branches.tsx

@@ -0,0 +1,150 @@
+/**
+ * Branch panel — Chronicle branch lineage as a navigable tree.
+ *
+ * Opens from the header's branch chip into the same middle panel slot the
+ * stream/usage views use. Rows are indented by fork ancestry (parentId +
+ * branchPoint from Chronicle's branch records); the current branch is
+ * highlighted, and checkout routes through the existing `/checkout` command
+ * so undo/redo bookkeeping and workspace re-materialization stay on the one
+ * audited path. Read-only for key-authenticated observers.
+ */
+
+import { createMemo, For, Show } from 'solid-js';
+import type { BranchRow } from '@conhost/web/protocol';
+
+interface TreeRow {
+  branch: BranchRow;
+  depth: number;
+}
+
+/** Fold the flat branch list into depth-first display order. Children sort
+ *  by fork point (earliest first), then creation time. Orphans (parentId
+ *  pointing at a pruned branch) surface as roots rather than vanishing. */
+function toTreeRows(branches: BranchRow[]): TreeRow[] {
+  const byId = new Map(branches.map((b) => [b.id, b]));
+  const children = new Map<string, BranchRow[]>();
+  const roots: BranchRow[] = [];
+  for (const b of branches) {
+    if (b.parentId !== undefined && byId.has(b.parentId)) {
+      const list = children.get(b.parentId) ?? [];
+      list.push(b);
+      children.set(b.parentId, list);
+    } else {
+      roots.push(b);
+    }
+  }
+  const byFork = (a: BranchRow, b: BranchRow): number =>
+    (a.branchPoint ?? 0) - (b.branchPoint ?? 0) || a.created - b.created;
+  const out: TreeRow[] = [];
+  // Healthy Chronicle lineage is a DAG, but this view must not hang the
+  // page on a corrupt store — guard against parentId cycles.
+  const seen = new Set<string>();
+  const visit = (b: BranchRow, depth: number): void => {
+    if (seen.has(b.id)) return;
+    seen.add(b.id);
+    out.push({ branch: b, depth });
+    for (const c of (children.get(b.id) ?? []).sort(byFork)) visit(c, depth + 1);
+  };
+  for (const r of roots.sort(byFork)) visit(r, 0);
+  return out;
+}
+
+const fmtDate = (ts: number): string => {
+  const d = new Date(ts);
+  const now = new Date();
+  return d.toDateString() === now.toDateString()
+    ? d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })
+    : d.toLocaleDateString([], { month: 'short', day: 'numeric' });
+};
+
+export function BranchPanel(props: {
+  branches: BranchRow[];
+  currentId: string | null;
+  loading: boolean;
+  /** True for key-authenticated observers — checkout affordances hidden. */
+  readOnly: boolean;
+  onCheckout(name: string): void;
+  onRefresh(): void;
+  onClose(): void;
+}) {
+  const rows = createMemo(() => toTreeRows(props.branches));
+
+  return (
+    <div class="border-l border-neutral-800 w-96 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">branches</span>
+        <span class="text-neutral-500 text-xs">{props.branches.length || ''}</span>
+        <div class="ml-auto flex gap-1">
+          {/* Not disabled while loading: a server-side listing error leaves
+              `loading` latched, and re-clicking is the recovery path. */}
+          <button
+            type="button"
+            class="px-2 py-0.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded text-xs"
+            onClick={() => props.onRefresh()}
+          >
+            {props.loading ? '…' : 'refresh'}
+          </button>
+          <button
+            type="button"
+            class="px-2 py-0.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded text-xs"
+            onClick={() => props.onClose()}
+          >
+            close
+          </button>
+        </div>
+      </div>
+
+      <div class="flex-1 overflow-y-auto px-2 py-2 font-mono text-[11px]">
+        <Show when={rows().length > 0} fallback={
+          <div class="text-neutral-600 italic px-1">
+            {props.loading ? 'loading…' : 'No branches.'}
+          </div>
+        }>
+          <For each={rows()}>{(row) => {
+            const b = row.branch;
+            const current = (): boolean => b.id === props.currentId;
+            return (
+              <div
+                class={`group flex items-center gap-2 rounded px-1.5 py-1 ${
+                  current() ? 'bg-cyan-950/40 border border-cyan-900/50' : 'hover:bg-neutral-900'
+                }`}
+                style={{ 'margin-left': `${row.depth * 14}px` }}
+              >
+                <span class={current() ? 'text-cyan-300' : 'text-neutral-600'}>
+                  {row.depth > 0 ? '⑂' : '●'}
+                </span>
+                <span
+                  class={`truncate ${current() ? 'text-cyan-100' : 'text-neutral-200'}`}
+                  title={`${b.name} · head @${b.head}${b.branchPoint !== undefined ? ` · forked @${b.branchPoint}` : ''}`}
+                >
+                  {b.name}
+                </span>
+                <Show when={b.branchPoint !== undefined}>
+                  <span class="text-neutral-600 shrink-0">@{b.branchPoint}</span>
+                </Show>
+                <span class="ml-auto shrink-0 text-neutral-600">{fmtDate(b.created)}</span>
+                <Show when={current()}>
+                  <span class="shrink-0 text-[10px] uppercase tracking-wider text-cyan-400">current</span>
+                </Show>
+                <Show when={!current() && !props.readOnly}>
+                  <button
+                    type="button"
+                    class="shrink-0 opacity-0 group-hover:opacity-100 px-1.5 py-0.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-200 rounded text-[10px]"
+                    title={`/checkout ${b.name}`}
+                    onClick={() => props.onCheckout(b.name)}
+                  >
+                    checkout
+                  </button>
+                </Show>
+              </div>
+            );
+          }}</For>
+        </Show>
+        <div class="mt-3 px-1 text-neutral-600 leading-relaxed">
+          Branches fork from <span class="text-neutral-500">@sequence</span> in their parent.
+          /undo, /checkpoint and /branchto create them; checkout switches the live context.
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/src/Context.tsx

@@ -150,15 +150,26 @@ export function ContextPanel(props: { agent?: string }) {
     <div class="p-2 text-[11px] font-mono text-neutral-300 space-y-3">
       <div class="flex items-center justify-between">
         <span class="text-neutral-400">Context makeup{data()?.agent ? ` · ${data()!.agent}` : ''}</span>
-        <button
-          type="button"
-          class="px-2 py-0.5 text-neutral-400 hover:text-neutral-100 border border-neutral-700 rounded"
-          onClick={refreshAll}
-          disabled={loading() || coverageLoading()}
-          title="Refresh context diagnostics"
-        >
-          {loading() || coverageLoading() ? '…' : 'refresh'}
-        </button>
+        <div class="flex items-center gap-2">
+          <a
+            class="text-cyan-500 hover:text-cyan-300"
+            href="/curve"
+            target="_blank"
+            rel="noreferrer"
+            title="Compression curve — raw vs rendered tokens per compiled entry"
+          >
+            curve ↗
+          </a>
+          <button
+            type="button"
+            class="px-2 py-0.5 text-neutral-400 hover:text-neutral-100 border border-neutral-700 rounded"
+            onClick={refreshAll}
+            disabled={loading() || coverageLoading()}
+            title="Refresh context diagnostics"
+          >
+            {loading() || coverageLoading() ? '…' : 'refresh'}
+          </button>
+        </div>
       </div>
 
       <Show when={err()}>
@@ -258,10 +269,7 @@ export function ContextPanel(props: { agent?: string }) {
             </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>
+          <div class="text-neutral-600 min-w-0 truncate" title={coverage()!.branch}>{coverage()!.branch}</div>
         </section>
       </Show>