@animalabs/connectome-host 0.3.1

package/web/src/Context.tsx

@@ -0,0 +1,158 @@
+/**
+ * Context panel — the makeup of the agent's current compiled context.
+ *
+ * Reads GET /debug/context/makeup (transparent: previewActivation +
+ * count_tokens, no inference / no writes) and shows the segment breakdown the
+ * autobiographical strategy produced: head window, raw middle, summaries by
+ * level (L1/L2/L3), and the recent verbatim tail — as a proportional bar plus
+ * a per-segment table, with an exact total token count.
+ */
+
+import { createSignal, onMount, For, Show } from 'solid-js';
+
+interface Seg { messages: number; tokens: number }
+interface Stats {
+  head: Seg;
+  tail: Seg;
+  middleRaw: Seg;
+  summaries: { l1: { count: number; tokens: number }; l2: { count: number; tokens: number }; l3: { count: number; tokens: number } };
+  pending: { chunks: number; merges: number };
+  total: Seg;
+}
+interface Makeup {
+  agent: string;
+  stats: Stats | null;
+  exactTotalTokens: number | null;
+  countModel: string;
+  countSource: string;
+  error?: string;
+}
+
+type Row = { key: string; label: string; messages: number; tokens: number; color: string };
+
+const fmt = (n: number) => n.toLocaleString();
+
+function rowsOf(s: Stats): Row[] {
+  return [
+    { key: 'head', label: 'Head (oldest, verbatim)', messages: s.head.messages, tokens: s.head.tokens, color: '#64748b' },
+    { key: 'l1', label: 'Summaries · L1', messages: s.summaries.l1.count, tokens: s.summaries.l1.tokens, color: '#06b6d4' },
+    { key: 'l2', label: 'Summaries · L2', messages: s.summaries.l2.count, tokens: s.summaries.l2.tokens, color: '#3b82f6' },
+    { key: 'l3', label: 'Summaries · L3', messages: s.summaries.l3.count, tokens: s.summaries.l3.tokens, color: '#6366f1' },
+    { key: 'middleRaw', label: 'Middle (raw, verbatim)', messages: s.middleRaw.messages, tokens: s.middleRaw.tokens, color: '#f59e0b' },
+    { key: 'tail', label: 'Recent tail (verbatim)', messages: s.tail.messages, tokens: s.tail.tokens, color: '#10b981' },
+  ].filter((r) => r.tokens > 0 || r.messages > 0);
+}
+
+export function ContextPanel(props: { agent?: string }) {
+  const [data, setData] = createSignal<Makeup | null>(null);
+  const [loading, setLoading] = createSignal(false);
+  const [err, setErr] = createSignal<string | null>(null);
+
+  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' });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const j = (await res.json()) as Makeup;
+      if (j.error) throw new Error(j.error);
+      setData(j);
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  onMount(load);
+
+  const estTotal = () => data()?.stats?.total.tokens ?? 0;
+  const rows = () => {
+    const s = data()?.stats;
+    return s ? rowsOf(s) : [];
+  };
+
+  return (
+    <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={load}
+          disabled={loading()}
+        >
+          {loading() ? '…' : 'refresh'}
+        </button>
+      </div>
+
+      <Show when={err()}>
+        <div class="text-rose-400">error: {err()}</div>
+      </Show>
+
+      <Show when={data()?.stats} fallback={<Show when={!err()}><div class="text-neutral-500">loading…</div></Show>}>
+        {/* headline totals */}
+        <div class="flex gap-4">
+          <div>
+            <div class="text-2xl text-neutral-100">{fmt(data()!.exactTotalTokens ?? estTotal())}</div>
+            <div class="text-neutral-500">
+              {data()!.exactTotalTokens != null ? 'tokens (exact)' : 'tokens (est)'}
+            </div>
+          </div>
+          <div class="self-end text-neutral-500">
+            {fmt(data()!.stats!.total.messages)} msgs · est {fmt(estTotal())}
+          </div>
+        </div>
+
+        {/* proportional bar */}
+        <div class="flex h-4 w-full overflow-hidden rounded border border-neutral-800">
+          <For each={rows()}>
+            {(r) => (
+              <div
+                style={{ width: `${(r.tokens / Math.max(1, estTotal())) * 100}%`, background: r.color }}
+                title={`${r.label}: ${fmt(r.tokens)} tok`}
+              />
+            )}
+          </For>
+        </div>
+
+        {/* per-segment table */}
+        <table class="w-full">
+          <thead>
+            <tr class="text-neutral-500 text-left">
+              <th class="font-normal py-1">segment</th>
+              <th class="font-normal text-right">msgs</th>
+              <th class="font-normal text-right">tokens</th>
+              <th class="font-normal text-right">%</th>
+            </tr>
+          </thead>
+          <tbody>
+            <For each={rows()}>
+              {(r) => (
+                <tr class="border-t border-neutral-900">
+                  <td class="py-1">
+                    <span class="inline-block w-2 h-2 mr-2 rounded-sm align-middle" style={{ background: r.color }} />
+                    {r.label}
+                  </td>
+                  <td class="text-right text-neutral-400">{fmt(r.messages)}</td>
+                  <td class="text-right text-neutral-200">{fmt(r.tokens)}</td>
+                  <td class="text-right text-neutral-500">{((r.tokens / Math.max(1, estTotal())) * 100).toFixed(1)}%</td>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+
+        <div class="text-neutral-500 space-y-0.5">
+          <div>
+            pending compression: {data()!.stats!.pending.chunks} chunk(s), {data()!.stats!.pending.merges} merge(s)
+          </div>
+          <div>
+            exact via count_tokens ({data()!.countModel}; same tokenizer) · per-segment tokens are strategy estimates
+          </div>
+        </div>
+      </Show>
+    </div>
+  );
+}

package/web/src/ContextDocument.tsx

@@ -0,0 +1,150 @@
+/**
+ * ContextDocument — the agent's compiled context rendered in the MAIN pane, as
+ * a readable, navigable document.
+ *
+ * Combines GET /debug/context (the flat compiled messages) with
+ * /debug/context/makeup (segment token/message counts) to partition the flat
+ * list into Head | Middle | Recent zones (render order is head, then the folded
+ * middle, then the verbatim tail — the makeup counts give the boundaries). A
+ * sticky timeline at the top is a clickable minimap: each zone is sized by its
+ * token share and scrolls the document to that section. Summary recall-pairs in
+ * the middle are styled distinctly.
+ */
+
+import { createSignal, onMount, For, Show } from 'solid-js';
+
+interface Msg { participant?: string; role?: string; content: unknown }
+interface Seg { messages: number; tokens: number }
+interface Stats {
+  head: Seg; tail: Seg; middleRaw: Seg;
+  summaries: { l1: { count: number; tokens: number }; l2: { count: number; tokens: number }; l3: { count: number; tokens: number } };
+  total: Seg;
+}
+
+const fmt = (n: number) => n.toLocaleString();
+const estTokens = (s: string) => Math.round(s.length / 3.6);
+const SUMMARY_LABELS = ['What do you remember', 'Context Manager'];
+
+function textOf(c: unknown): string {
+  if (Array.isArray(c)) return c.map((b) => (b && typeof b === 'object' && (b as { type?: string }).type === 'text' ? (b as { text: string }).text : (b && (b as { type?: string }).type === 'image' ? '[image]' : ''))).join('');
+  return String(c ?? '');
+}
+
+export function ContextDocument(props: { agent?: string; scrollRoot?: () => HTMLElement | undefined }) {
+  const [msgs, setMsgs] = createSignal<Msg[]>([]);
+  const [stats, setStats] = createSignal<Stats | null>(null);
+  const [exact, setExact] = createSignal<number | null>(null);
+  const [err, setErr] = createSignal<string | null>(null);
+  const [loading, setLoading] = createSignal(false);
+
+  const load = async () => {
+    setLoading(true); setErr(null);
+    try {
+      const q = props.agent ? `?agent=${encodeURIComponent(props.agent)}` : '';
+      const [ctxRes, mkRes] = await Promise.all([
+        fetch(`/debug/context${q}`, { credentials: 'same-origin' }),
+        fetch(`/debug/context/makeup${q}`, { credentials: 'same-origin' }),
+      ]);
+      if (!ctxRes.ok) throw new Error(`context HTTP ${ctxRes.status}`);
+      const ctx = await ctxRes.json();
+      setMsgs((ctx?.request?.messages ?? []) as Msg[]);
+      if (mkRes.ok) { const mk = await mkRes.json(); setStats(mk.stats); setExact(mk.exactTotalTokens); }
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : String(e));
+    } finally { setLoading(false); }
+  };
+  onMount(load);
+
+  // Zone boundaries from the makeup counts (render order: head | middle | tail).
+  const headN = () => stats()?.head.messages ?? 0;
+  const tailN = () => stats()?.tail.messages ?? 0;
+  const midStart = () => headN();
+  const midEnd = () => Math.max(headN(), msgs().length - tailN());
+  const zoneOf = (i: number): 'head' | 'middle' | 'tail' =>
+    i < headN() ? 'head' : i >= midEnd() ? 'tail' : 'middle';
+
+  const zones = () => {
+    const s = stats(); if (!s) return [];
+    const midTok = s.middleRaw.tokens + s.summaries.l1.tokens + s.summaries.l2.tokens + s.summaries.l3.tokens;
+    const tot = Math.max(1, s.total.tokens);
+    return [
+      { key: 'head', label: 'Head', tokens: s.head.tokens, color: '#64748b', pct: (s.head.tokens / tot) * 100 },
+      { key: 'middle', label: 'Middle (summaries + raw)', tokens: midTok, color: '#06b6d4', pct: (midTok / tot) * 100 },
+      { key: 'tail', label: 'Recent', tokens: s.tail.tokens, color: '#10b981', pct: (s.tail.tokens / tot) * 100 },
+    ];
+  };
+
+  const scrollTo = (zone: string) => {
+    const el = document.getElementById(`ctxseg-${zone}`);
+    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  const isSummary = (m: Msg) => {
+    const who = m.participant ?? '';
+    const t = textOf(m.content);
+    return SUMMARY_LABELS.some((l) => who.includes('Context Manager') || t.startsWith(l));
+  };
+
+  return (
+    <div class="text-sm text-neutral-300">
+      {/* sticky timeline minimap */}
+      <div class="sticky top-0 z-10 bg-neutral-950/95 backdrop-blur border-b border-neutral-800 pb-2 mb-3 -mx-1 px-1">
+        <div class="flex items-center justify-between text-[11px] font-mono text-neutral-500 mb-1">
+          <span>
+            context · {fmt(exact() ?? stats()?.total.tokens ?? 0)} tokens{exact() != null ? ' (exact)' : ''} · {fmt(msgs().length)} msgs
+          </span>
+          <button type="button" class="px-2 py-0.5 border border-neutral-700 rounded hover:text-neutral-200" onClick={load} disabled={loading()}>
+            {loading() ? '…' : 'refresh'}
+          </button>
+        </div>
+        <Show when={stats()}>
+          <div class="flex h-5 w-full overflow-hidden rounded border border-neutral-800 cursor-pointer text-[10px] font-mono">
+            <For each={zones()}>
+              {(z) => (
+                <div
+                  class="flex items-center justify-center text-neutral-900 hover:brightness-125 transition"
+                  style={{ width: `${Math.max(3, z.pct)}%`, background: z.color }}
+                  title={`${z.label}: ${fmt(z.tokens)} tok — click to jump`}
+                  onClick={() => scrollTo(z.key)}
+                >
+                  <Show when={z.pct > 8}>{z.label}</Show>
+                </div>
+              )}
+            </For>
+          </div>
+        </Show>
+      </div>
+
+      <Show when={err()}><div class="text-rose-400 font-mono text-xs px-1">error: {err()}</div></Show>
+
+      {/* the document */}
+      <div class="space-y-2 px-1">
+        <For each={msgs()}>
+          {(m, i) => {
+            const zone = zoneOf(i());
+            const firstOfZone = i() === 0 || zoneOf(i() - 1) !== zone;
+            const summary = isSummary(m);
+            const who = m.participant ?? m.role ?? '?';
+            const t = textOf(m.content);
+            return (
+              <>
+                <Show when={firstOfZone}>
+                  <div id={`ctxseg-${zone}`} class="pt-3 pb-1 text-[10px] font-mono uppercase tracking-wider text-neutral-600 border-t border-neutral-800/60">
+                    {zone === 'head' ? 'Head — oldest, verbatim' : zone === 'tail' ? 'Recent — verbatim tail' : 'Middle — summaries + raw'}
+                  </div>
+                </Show>
+                <div class={`rounded border px-3 py-2 ${summary ? 'border-cyan-900/60 bg-cyan-950/20' : 'border-neutral-800 bg-neutral-900/30'}`}>
+                  <div class="flex items-center justify-between text-[10px] font-mono mb-1">
+                    <span class={summary ? 'text-cyan-400' : 'text-neutral-400'}>{summary ? '◆ summary' : who}</span>
+                    <span class="text-neutral-600">~{fmt(estTokens(t))} tok</span>
+                  </div>
+                  <div class="whitespace-pre-wrap text-[13px] leading-relaxed text-neutral-300">{t.slice(0, 4000)}{t.length > 4000 ? '…' : ''}</div>
+                </div>
+              </>
+            );
+          }}
+        </For>
+      </div>
+    </div>
+  );
+}

package/web/src/Files.tsx

@@ -0,0 +1,271 @@
+/**
+ * Files panel — workspace-aware browser for the parent process's mounts.
+ *
+ * Lists mounts, expands one at a time on click, builds a hierarchical tree
+ * from the flat workspace `ls -r` output, and lets the operator click a
+ * file to view its content in a centered modal.
+ *
+ * Reads only — write/edit/delete aren't surfaced here. Operators with that
+ * intent should be on the host shell anyway.
+ */
+
+import { createSignal, For, Show } from 'solid-js';
+import { ScopePicker } from './Lessons';
+
+export interface Mount {
+  name: string;
+  path: string;
+  mode: string;
+}
+
+export interface FlatEntry {
+  path: string;
+  size: number;
+}
+
+export interface FileViewer {
+  path: string;
+  totalLines: number;
+  fromLine: number;
+  toLine: number;
+  content: string;
+  truncated: boolean;
+}
+
+export function FilesPanel(props: {
+  loaded: boolean;
+  moduleLoaded: boolean;
+  mounts: Mount[];
+  /** Currently-loaded tree, keyed by mount name. Populated lazily on
+   *  expand-click — the parent component maintains the cache. */
+  treesByMount: Map<string, FlatEntry[]>;
+  /** Mounts that have been expanded at least once. */
+  expandedMounts: Set<string>;
+  /** Currently-selected scope ('local' or fleet child name). */
+  scope: string;
+  /** Selectable scopes — always includes 'local', plus every fleet child. */
+  scopes: Array<{ id: string; label: string }>;
+  onScopeChange(scope: string): void;
+  onRefreshMounts(): void;
+  onExpandMount(name: string): void;
+  onCollapseMount(name: string): void;
+  onOpenFile(path: string): void;
+}) {
+  return (
+    <div class="h-full overflow-y-auto px-3 py-2 text-xs">
+      <div class="flex items-center gap-2 mb-2">
+        <span class="text-neutral-500 uppercase tracking-wider text-[10px] font-semibold">
+          workspace
+        </span>
+        <span class="text-neutral-600 text-[10px]">{props.mounts.length} mounts</span>
+        <button
+          type="button"
+          class="ml-auto px-2 py-0.5 text-[10px] bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded font-mono"
+          onClick={() => props.onRefreshMounts()}
+        >
+          refresh
+        </button>
+      </div>
+      <ScopePicker scope={props.scope} scopes={props.scopes} onChange={props.onScopeChange} />
+
+      <Show when={!props.loaded}>
+        <div class="text-neutral-600 italic">Loading…</div>
+      </Show>
+
+      <Show when={props.loaded && !props.moduleLoaded}>
+        <div class="text-neutral-600 italic">
+          WorkspaceModule not loaded in this recipe.
+        </div>
+      </Show>
+
+      <Show when={props.loaded && props.moduleLoaded && props.mounts.length === 0}>
+        <div class="text-neutral-600 italic">No mounts configured.</div>
+      </Show>
+
+      <div class="space-y-1">
+        <For each={props.mounts}>{(mount) => (
+          <MountSection
+            mount={mount}
+            expanded={props.expandedMounts.has(mount.name)}
+            entries={props.treesByMount.get(mount.name) ?? []}
+            onToggle={() => {
+              if (props.expandedMounts.has(mount.name)) props.onCollapseMount(mount.name);
+              else props.onExpandMount(mount.name);
+            }}
+            onOpenFile={props.onOpenFile}
+          />
+        )}</For>
+      </div>
+    </div>
+  );
+}
+
+function MountSection(props: {
+  mount: Mount;
+  expanded: boolean;
+  entries: FlatEntry[];
+  onToggle(): void;
+  onOpenFile(path: string): void;
+}) {
+  const tree = (): TreeNode => buildTree(props.entries);
+  return (
+    <div class="border border-neutral-800 rounded">
+      <button
+        type="button"
+        class="w-full flex items-center gap-2 px-2 py-1 text-left hover:bg-neutral-900/50"
+        onClick={() => props.onToggle()}
+      >
+        <span class="text-neutral-500">{props.expanded ? '▾' : '▸'}</span>
+        <span class="font-mono text-cyan-300 truncate">{props.mount.name}</span>
+        <span class="text-[10px] text-neutral-600">{props.mount.mode}</span>
+        <span class="ml-auto text-[10px] text-neutral-600 truncate" title={props.mount.path}>
+          {props.mount.path}
+        </span>
+      </button>
+      <Show when={props.expanded}>
+        <div class="px-2 py-1 border-t border-neutral-800 bg-neutral-950/40">
+          <Show when={props.entries.length === 0}>
+            <div class="text-[11px] text-neutral-600 italic">empty</div>
+          </Show>
+          <For each={tree().children}>{(child) => (
+            <TreeRow node={child} depth={0} mountName={props.mount.name} onOpenFile={props.onOpenFile} />
+          )}</For>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+interface TreeNode {
+  /** Empty string for the synthetic root. */
+  name: string;
+  /** Full path rooted at the mount (so the row can pass it to onOpenFile). */
+  fullPath: string;
+  isDir: boolean;
+  size?: number;
+  children: TreeNode[];
+}
+
+function buildTree(entries: FlatEntry[]): TreeNode {
+  const root: TreeNode = { name: '', fullPath: '', isDir: true, children: [] };
+  for (const entry of entries) {
+    const parts = entry.path.split('/').filter(p => p.length > 0);
+    let cursor = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]!;
+      const isLast = i === parts.length - 1;
+      let next = cursor.children.find(c => c.name === part);
+      if (!next) {
+        next = {
+          name: part,
+          fullPath: parts.slice(0, i + 1).join('/'),
+          isDir: !isLast,
+          ...(isLast ? { size: entry.size } : {}),
+          children: [],
+        };
+        cursor.children.push(next);
+      }
+      cursor = next;
+    }
+  }
+  // Sort children: dirs first, then files, alpha within each.
+  const sortNode = (node: TreeNode): void => {
+    node.children.sort((a, b) => {
+      if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+    for (const c of node.children) sortNode(c);
+  };
+  sortNode(root);
+  return root;
+}
+
+function TreeRow(props: { node: TreeNode; depth: number; mountName: string; onOpenFile(path: string): void }) {
+  const [expanded, setExpanded] = createSignal(props.depth < 1);
+  const indent = (): string => `${0.25 + props.depth * 0.75}rem`;
+  const fullMountPath = (): string => `${props.mountName}/${props.node.fullPath}`;
+  return (
+    <div>
+      <Show when={props.node.isDir} fallback={
+        <button
+          type="button"
+          class="w-full flex items-center gap-2 py-0.5 hover:bg-neutral-900/60 text-left rounded"
+          style={{ 'padding-left': indent() }}
+          onClick={() => props.onOpenFile(fullMountPath())}
+          title={fullMountPath()}
+        >
+          <span class="text-neutral-500 w-3 inline-block" />
+          <span class="font-mono text-neutral-300 truncate">{props.node.name}</span>
+          <Show when={typeof props.node.size === 'number'}>
+            <span class="ml-auto text-[10px] text-neutral-600">{fmtSize(props.node.size!)}</span>
+          </Show>
+        </button>
+      }>
+        <button
+          type="button"
+          class="w-full flex items-center gap-2 py-0.5 hover:bg-neutral-900/60 text-left rounded"
+          style={{ 'padding-left': indent() }}
+          onClick={() => setExpanded(s => !s)}
+        >
+          <span class="text-neutral-500 w-3 inline-block">{expanded() ? '▾' : '▸'}</span>
+          <span class="font-mono text-cyan-200 truncate">{props.node.name}/</span>
+        </button>
+        <Show when={expanded()}>
+          <For each={props.node.children}>{(child) => (
+            <TreeRow node={child} depth={props.depth + 1} mountName={props.mountName} onOpenFile={props.onOpenFile} />
+          )}</For>
+        </Show>
+      </Show>
+    </div>
+  );
+}
+
+export function FileViewerModal(props: {
+  file: FileViewer | null;
+  loading: boolean;
+  onClose(): void;
+}) {
+  return (
+    <Show when={props.loading || props.file}>
+      <div class="fixed inset-0 z-40 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => props.onClose()}>
+        <div class="bg-neutral-950 border border-neutral-700 rounded-lg shadow-2xl w-[80vw] h-[80vh] m-4 flex flex-col" onClick={(e) => e.stopPropagation()}>
+          <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">file</span>
+            <span class="font-mono text-sm text-neutral-200 truncate">
+              {props.file?.path ?? 'loading…'}
+            </span>
+            <Show when={props.file}>
+              <span class="text-[10px] text-neutral-600">
+                lines {props.file!.fromLine}–{props.file!.toLine} of {props.file!.totalLines}
+                <Show when={props.file!.truncated}>
+                  <span class="ml-2 text-amber-400">truncated</span>
+                </Show>
+              </span>
+            </Show>
+            <button
+              type="button"
+              class="ml-auto 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 class="flex-1 overflow-auto px-3 py-2 font-mono text-[11px] whitespace-pre text-neutral-200 bg-neutral-950">
+            <Show when={props.loading}>
+              <div class="text-neutral-600 italic">Loading…</div>
+            </Show>
+            <Show when={props.file && !props.loading}>
+              {props.file!.content}
+            </Show>
+          </div>
+        </div>
+      </div>
+    </Show>
+  );
+}
+
+function fmtSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}K`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
+}