@animalabs/connectome-host 0.3.1

package/web/src/Lessons.tsx

@@ -0,0 +1,164 @@
+/**
+ * Lessons panel — read-only view of the parent process's lesson library.
+ *
+ * Shows active lessons sorted by confidence; deprecated entries collapse to a
+ * dim line with the reason. Manual refresh button — lessons mutate slowly
+ * (knowledge-miner pipeline is the typical writer), so we don't auto-poll.
+ */
+
+import { For, Show } from 'solid-js';
+
+export interface LessonRow {
+  id: string;
+  content: string;
+  confidence: number;
+  tags: string[];
+  deprecated: boolean;
+  deprecationReason?: string;
+  created?: number;
+  updated?: number;
+}
+
+export function LessonsPanel(props: {
+  /** True once a lessons-list response has come back; false during initial
+   *  request so the panel can show a "loading…" hint. */
+  loaded: boolean;
+  /** True if the LessonsModule is mounted in the recipe. */
+  moduleLoaded: boolean;
+  lessons: LessonRow[];
+  /** Currently-selected scope ('local' for the parent process, or a fleet
+   *  child name). Drives which process's lessons are shown. */
+  scope: string;
+  /** Selectable scopes — always includes 'local', plus every fleet child. */
+  scopes: Array<{ id: string; label: string }>;
+  onScopeChange(scope: string): void;
+  onRefresh(): void;
+}) {
+  const active = (): LessonRow[] => props.lessons.filter(l => !l.deprecated)
+    .sort((a, b) => b.confidence - a.confidence);
+  const deprecated = (): LessonRow[] => props.lessons.filter(l => l.deprecated);
+
+  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">
+          lessons
+        </span>
+        <Show when={props.moduleLoaded}>
+          <span class="text-neutral-600 text-[10px]">
+            {active().length} active
+            <Show when={deprecated().length > 0}> · {deprecated().length} deprecated</Show>
+          </span>
+        </Show>
+        <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.onRefresh()}
+          title="Re-fetch the lesson library"
+        >
+          refresh
+        </button>
+      </div>
+      <ScopePicker scope={props.scope} scopes={props.scopes} onChange={props.onScopeChange} />
+
+      <Show when={!props.loaded} fallback={null}>
+        <div class="text-neutral-600 italic">Loading…</div>
+      </Show>
+
+      <Show when={props.loaded && !props.moduleLoaded}>
+        <div class="text-neutral-600 italic">
+          LessonsModule not loaded in this recipe. Enable it under
+          {' '}<span class="font-mono">modules.lessons</span> to populate this panel.
+        </div>
+      </Show>
+
+      <Show when={props.loaded && props.moduleLoaded && active().length === 0 && deprecated().length === 0}>
+        <div class="text-neutral-600 italic">
+          No lessons yet. The agent creates them during analysis.
+        </div>
+      </Show>
+
+      <div class="space-y-2">
+        <For each={active()}>{(l) => <LessonCard lesson={l} />}</For>
+      </div>
+
+      <Show when={deprecated().length > 0}>
+        <div class="text-neutral-500 uppercase tracking-wider text-[10px] font-semibold mt-4 mb-1">
+          deprecated
+        </div>
+        <div class="space-y-1 opacity-60">
+          <For each={deprecated()}>{(l) => <LessonCard lesson={l} />}</For>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+/** Compact scope chooser shown at the top of scoped panels. The current
+ *  scope is rendered as a pill; alternative scopes appear as siblings.
+ *  Hidden when there's only one scope (no fleet children). */
+export function ScopePicker(props: {
+  scope: string;
+  scopes: Array<{ id: string; label: string }>;
+  onChange(scope: string): void;
+}) {
+  return (
+    <Show when={props.scopes.length > 1}>
+      <div class="flex flex-wrap items-center gap-1 mb-2 text-[10px] font-mono">
+        <span class="text-neutral-600 uppercase tracking-wider mr-1">scope</span>
+        <For each={props.scopes}>{(s) => (
+          <button
+            type="button"
+            class={`px-1.5 py-0.5 rounded ${
+              props.scope === s.id
+                ? 'bg-cyan-900/60 text-cyan-100'
+                : 'bg-neutral-800 hover:bg-neutral-700 text-neutral-300'
+            }`}
+            onClick={() => props.onChange(s.id)}
+          >
+            {s.label}
+          </button>
+        )}</For>
+      </div>
+    </Show>
+  );
+}
+
+function LessonCard(props: { lesson: LessonRow }) {
+  const conf = (): number => Math.round(props.lesson.confidence * 100);
+  const confColor = (): string => {
+    const c = conf();
+    if (c >= 80) return 'bg-emerald-900/40 text-emerald-200';
+    if (c >= 50) return 'bg-amber-900/40 text-amber-200';
+    return 'bg-neutral-800 text-neutral-400';
+  };
+  return (
+    <div class="border border-neutral-800 rounded px-2 py-1.5 bg-neutral-950">
+      <div class="flex items-baseline gap-2 mb-0.5">
+        <span class={`text-[10px] font-mono px-1 rounded ${confColor()}`}>
+          {conf()}%
+        </span>
+        <span class="text-[10px] font-mono text-neutral-600 truncate" title={props.lesson.id}>
+          {props.lesson.id}
+        </span>
+      </div>
+      <div class="text-neutral-200 leading-snug whitespace-pre-wrap">
+        {props.lesson.content}
+      </div>
+      <Show when={props.lesson.tags.length > 0}>
+        <div class="mt-1 flex flex-wrap gap-1">
+          <For each={props.lesson.tags}>{(tag) => (
+            <span class="text-[10px] font-mono text-neutral-500 bg-neutral-900 px-1 rounded">
+              {tag}
+            </span>
+          )}</For>
+        </div>
+      </Show>
+      <Show when={props.lesson.deprecationReason}>
+        <div class="mt-1 text-[10px] text-rose-300 italic">
+          deprecated: {props.lesson.deprecationReason}
+        </div>
+      </Show>
+    </div>
+  );
+}

package/web/src/Mcpl.tsx

@@ -0,0 +1,310 @@
+/**
+ * MCPL admin panel — read/write view of mcpl-servers.json. Mirrors the
+ * `/mcp list|add|remove|env` slash commands but with structured controls.
+ *
+ * Mutations are file-only — the host needs to restart for them to take
+ * effect. The panel makes that explicit so operators don't expect live
+ * reconnects.
+ */
+
+import { createSignal, For, Show } from 'solid-js';
+
+export interface McplServerRow {
+  id: string;
+  command: string;
+  args?: string[];
+  env?: Record<string, string>;
+  toolPrefix?: string;
+  reconnect?: boolean;
+  enabledFeatureSets?: string[];
+  disabledFeatureSets?: string[];
+}
+
+export function McplPanel(props: {
+  loaded: boolean;
+  configPath: string;
+  servers: McplServerRow[];
+  onRefresh(): void;
+  onAdd(input: { id: string; command: string; args?: string[]; env?: Record<string, string>; toolPrefix?: string }): void;
+  onRemove(id: string): void;
+  onSetEnv(id: string, env: Record<string, string>): void;
+}) {
+  const [showAdd, setShowAdd] = createSignal(false);
+
+  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">
+          MCPL servers
+        </span>
+        <span class="text-neutral-600 text-[10px]">{props.servers.length}</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.onRefresh()}
+        >
+          refresh
+        </button>
+        <button
+          type="button"
+          class="px-2 py-0.5 text-[10px] bg-cyan-900/40 hover:bg-cyan-900/60 text-cyan-200 rounded font-mono"
+          onClick={() => setShowAdd(s => !s)}
+        >
+          {showAdd() ? 'cancel add' : '+ add'}
+        </button>
+      </div>
+
+      <Show when={!props.loaded}>
+        <div class="text-neutral-600 italic">Loading…</div>
+      </Show>
+
+      <Show when={props.loaded}>
+        <div class="text-[10px] text-neutral-600 italic mb-2 break-all" title={props.configPath}>
+          {props.configPath}
+        </div>
+
+        <Show when={showAdd()}>
+          <AddServerForm
+            onSubmit={(input) => {
+              props.onAdd(input);
+              setShowAdd(false);
+            }}
+            onCancel={() => setShowAdd(false)}
+          />
+        </Show>
+
+        <Show when={props.loaded && props.servers.length === 0 && !showAdd()}>
+          <div class="text-neutral-600 italic">No MCPL servers configured.</div>
+        </Show>
+
+        <div class="space-y-2">
+          <For each={props.servers}>{(server) => (
+            <ServerCard
+              server={server}
+              onRemove={() => props.onRemove(server.id)}
+              onSetEnv={(env) => props.onSetEnv(server.id, env)}
+            />
+          )}</For>
+        </div>
+
+        <Show when={props.servers.length > 0}>
+          <div class="mt-3 text-[10px] text-amber-300/80 italic">
+            Changes are written to disk; restart the host process to apply.
+          </div>
+        </Show>
+      </Show>
+    </div>
+  );
+}
+
+function ServerCard(props: {
+  server: McplServerRow;
+  onRemove(): void;
+  onSetEnv(env: Record<string, string>): void;
+}) {
+  const [editEnv, setEditEnv] = createSignal(false);
+  const [confirmDel, setConfirmDel] = createSignal(false);
+  const cmdLine = (): string => [props.server.command, ...(props.server.args ?? [])].join(' ');
+  const envEntries = (): Array<[string, string]> => Object.entries(props.server.env ?? {});
+
+  return (
+    <div class="border border-neutral-800 rounded px-2 py-1.5 bg-neutral-950">
+      <div class="flex items-baseline gap-2 mb-1">
+        <span class="font-mono text-cyan-300 truncate">{props.server.id}</span>
+        <Show when={props.server.toolPrefix}>
+          <span class="text-[10px] text-neutral-600">prefix={props.server.toolPrefix}</span>
+        </Show>
+        <Show when={props.server.reconnect}>
+          <span class="text-[10px] text-emerald-400">↻ reconnect</span>
+        </Show>
+        <button
+          type="button"
+          class="ml-auto text-[10px] px-1 py-0.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded font-mono"
+          onClick={() => setEditEnv(s => !s)}
+        >
+          {editEnv() ? 'close env' : 'env'}
+        </button>
+        <Show when={!confirmDel()} fallback={
+          <span class="flex gap-1">
+            <button
+              type="button"
+              class="text-[10px] px-1 py-0.5 bg-rose-900/60 hover:bg-rose-900 text-rose-100 rounded font-mono"
+              onClick={() => { props.onRemove(); setConfirmDel(false); }}
+            >
+              confirm
+            </button>
+            <button
+              type="button"
+              class="text-[10px] px-1 py-0.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded font-mono"
+              onClick={() => setConfirmDel(false)}
+            >
+              ✕
+            </button>
+          </span>
+        }>
+          <button
+            type="button"
+            class="text-[10px] px-1 py-0.5 bg-rose-900/40 hover:bg-rose-900/60 text-rose-200 rounded font-mono"
+            onClick={() => setConfirmDel(true)}
+          >
+            remove
+          </button>
+        </Show>
+      </div>
+      <div class="font-mono text-neutral-300 text-[11px] break-all leading-tight">
+        {cmdLine()}
+      </div>
+      <Show when={envEntries().length > 0 && !editEnv()}>
+        <div class="mt-1 flex flex-wrap gap-1">
+          <For each={envEntries()}>{([k]) => (
+            <span class="text-[10px] font-mono text-neutral-500 bg-neutral-900 px-1 rounded" title="(value hidden — open env to view)">
+              {k}
+            </span>
+          )}</For>
+        </div>
+      </Show>
+      <Show when={editEnv()}>
+        <EnvEditor
+          initial={props.server.env ?? {}}
+          onSave={(env) => { props.onSetEnv(env); setEditEnv(false); }}
+          onCancel={() => setEditEnv(false)}
+        />
+      </Show>
+    </div>
+  );
+}
+
+function AddServerForm(props: {
+  onSubmit(input: { id: string; command: string; args?: string[]; env?: Record<string, string>; toolPrefix?: string }): void;
+  onCancel(): void;
+}) {
+  const [id, setId] = createSignal('');
+  const [command, setCommand] = createSignal('');
+  const [argsRaw, setArgsRaw] = createSignal('');
+  const [envRaw, setEnvRaw] = createSignal('');
+  const [toolPrefix, setToolPrefix] = createSignal('');
+
+  const submit = (): void => {
+    if (!id().trim() || !command().trim()) return;
+    const args = argsRaw().trim() ? splitArgs(argsRaw().trim()) : undefined;
+    const env = parseEnvBlock(envRaw());
+    props.onSubmit({
+      id: id().trim(),
+      command: command().trim(),
+      ...(args && args.length > 0 ? { args } : {}),
+      ...(env && Object.keys(env).length > 0 ? { env } : {}),
+      ...(toolPrefix().trim() ? { toolPrefix: toolPrefix().trim() } : {}),
+    });
+  };
+
+  return (
+    <div class="border border-cyan-800 rounded px-2 py-2 bg-cyan-950/20 mb-2 space-y-1.5">
+      <div class="text-[10px] uppercase tracking-wider text-cyan-300 font-semibold mb-1">Add server</div>
+      <Field label="id" value={id()} onInput={setId} placeholder="my-server" />
+      <Field label="command" value={command()} onInput={setCommand} placeholder="bun" />
+      <Field label="args" value={argsRaw()} onInput={setArgsRaw} placeholder="run server.ts" />
+      <Field label="toolPrefix" value={toolPrefix()} onInput={setToolPrefix} placeholder="(optional)" />
+      <div>
+        <div class="text-[10px] text-neutral-500 mb-0.5">env (KEY=VALUE per line)</div>
+        <textarea
+          class="w-full bg-neutral-900 border border-neutral-800 rounded px-1.5 py-1 text-[11px] font-mono text-neutral-100 resize-y focus:outline-none focus:ring-1 focus:ring-cyan-700"
+          rows="3"
+          value={envRaw()}
+          onInput={(e) => setEnvRaw(e.currentTarget.value)}
+          placeholder="API_KEY=..."
+        />
+      </div>
+      <div class="flex gap-1 pt-1">
+        <button
+          type="button"
+          class="px-2 py-0.5 text-[10px] bg-cyan-900/60 hover:bg-cyan-800 text-cyan-100 rounded font-mono"
+          onClick={submit}
+        >
+          save
+        </button>
+        <button
+          type="button"
+          class="px-2 py-0.5 text-[10px] bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded font-mono"
+          onClick={() => props.onCancel()}
+        >
+          cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function EnvEditor(props: {
+  initial: Record<string, string>;
+  onSave(env: Record<string, string>): void;
+  onCancel(): void;
+}) {
+  const initialText = (): string => Object.entries(props.initial)
+    .map(([k, v]) => `${k}=${v}`).join('\n');
+  const [text, setText] = createSignal(initialText());
+  return (
+    <div class="mt-2 border border-neutral-800 rounded p-1.5 bg-neutral-900/40">
+      <div class="text-[10px] text-neutral-500 mb-1">env (KEY=VALUE per line; empty clears)</div>
+      <textarea
+        class="w-full bg-neutral-950 border border-neutral-800 rounded px-1.5 py-1 text-[11px] font-mono text-neutral-100 resize-y focus:outline-none focus:ring-1 focus:ring-neutral-600"
+        rows="4"
+        value={text()}
+        onInput={(e) => setText(e.currentTarget.value)}
+      />
+      <div class="flex gap-1 mt-1">
+        <button
+          type="button"
+          class="px-2 py-0.5 text-[10px] bg-cyan-900/60 hover:bg-cyan-800 text-cyan-100 rounded font-mono"
+          onClick={() => props.onSave(parseEnvBlock(text()) ?? {})}
+        >
+          save
+        </button>
+        <button
+          type="button"
+          class="px-2 py-0.5 text-[10px] bg-neutral-800 hover:bg-neutral-700 text-neutral-300 rounded font-mono"
+          onClick={() => props.onCancel()}
+        >
+          cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function Field(props: { label: string; value: string; onInput: (v: string) => void; placeholder?: string }) {
+  return (
+    <div class="flex items-baseline gap-2">
+      <label class="w-20 text-[10px] text-neutral-500 shrink-0">{props.label}</label>
+      <input
+        type="text"
+        class="flex-1 bg-neutral-900 border border-neutral-800 rounded px-1.5 py-0.5 text-[11px] font-mono text-neutral-100 focus:outline-none focus:ring-1 focus:ring-cyan-700"
+        value={props.value}
+        placeholder={props.placeholder}
+        onInput={(e) => props.onInput(e.currentTarget.value)}
+      />
+    </div>
+  );
+}
+
+/** Naive whitespace split — sufficient for the args field where shell-quoted
+ *  values with spaces are uncommon. Operators editing complex commands can
+ *  hand-edit mcpl-servers.json directly. */
+function splitArgs(raw: string): string[] {
+  return raw.split(/\s+/).filter(s => s.length > 0);
+}
+
+/** Parse a KEY=VALUE-per-line block into an env object. Returns null if the
+ *  block is empty (so the caller can omit the env field entirely). */
+function parseEnvBlock(raw: string): Record<string, string> | null {
+  const out: Record<string, string> = {};
+  for (const line of raw.split('\n')) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('#')) continue;
+    const eqIdx = trimmed.indexOf('=');
+    if (eqIdx < 1) continue;
+    const k = trimmed.slice(0, eqIdx).trim();
+    const v = trimmed.slice(eqIdx + 1).trim();
+    out[k] = v;
+  }
+  return Object.keys(out).length > 0 ? out : null;
+}

package/web/src/Stream.tsx

@@ -0,0 +1,119 @@
+/**
+ * Stream pane — shows live events for a single tree node. The same panel is
+ * used regardless of node kind; only the *source* of events differs (handled
+ * upstream by App.tsx, which routes server messages through `formatStreamEvent`
+ * when they match the node's StreamSource).
+ *
+ * The pane is intentionally single-instance: clicking another node retargets
+ * the panel rather than opening a second one. This mirrors the TUI's "peek
+ * a node" UX, where focus is the unit of attention.
+ */
+
+import { For, Show } from 'solid-js';
+
+export interface StreamLine {
+  id: number;
+  /** 'token' lines fold consecutive token events into one merged line for
+   *  readable streaming output. Other event types render verbatim. */
+  kind: 'token' | 'event';
+  text: string;
+  color?: string;
+}
+
+export function StreamPanel(props: {
+  /** Display label of the focused node. */
+  label: string;
+  /** Sub-label hint — e.g. "subagent" / "fleet child" / "agent in <child>". */
+  scopeHint?: string;
+  lines: StreamLine[];
+  onClose(): void;
+  onStop?: () => void;
+  canStop: boolean;
+}) {
+  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">stream</span>
+        <span class="font-mono text-sm text-neutral-200 truncate">{props.label}</span>
+        <Show when={props.scopeHint}>
+          <span class="text-[10px] text-neutral-500 italic truncate">{props.scopeHint}</span>
+        </Show>
+        <div class="ml-auto flex gap-1">
+          <Show when={props.canStop && props.onStop}>
+            <button
+              type="button"
+              class="px-2 py-0.5 bg-rose-900/40 hover:bg-rose-900/60 text-rose-200 rounded text-xs font-mono"
+              onClick={() => props.onStop?.()}
+              title="Stop this node"
+            >
+              stop
+            </button>
+          </Show>
+          <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-3 py-2 font-mono text-[11px] space-y-0.5">
+        <Show when={props.lines.length > 0} fallback={
+          <div class="text-neutral-600 italic">Waiting for events…</div>
+        }>
+          <For each={props.lines}>{(line) => (
+            <div class={line.color ?? 'text-neutral-300'}>
+              {line.text || ' '}
+            </div>
+          )}</For>
+        </Show>
+      </div>
+    </div>
+  );
+}
+
+/** Convert a peek/child-event/trace into a renderable line. Returns null
+ *  to mean "skip" (e.g. token events that the caller folds elsewhere). */
+export function formatStreamEvent(event: { type: string; [k: string]: unknown }): StreamLine | null {
+  const get = <T,>(k: string): T | undefined => event[k] as T | undefined;
+  const id = nextStreamLineId();
+  switch (event.type) {
+    case 'inference:started':
+    case 'tokens':
+    case 'inference:tokens':
+      return null;
+    case 'tool_calls': {
+      const calls = get<Array<{ name: string }>>('calls') ?? [];
+      return { id, kind: 'event', text: `→ ${calls.map(c => c.name).join(', ')}`, color: 'text-amber-400' };
+    }
+    case 'inference:tool_calls_yielded': {
+      const calls = get<Array<{ name: string }>>('calls') ?? [];
+      return { id, kind: 'event', text: `→ ${calls.map(c => c.name).join(', ')}`, color: 'text-amber-400' };
+    }
+    case 'tool:started':
+      return { id, kind: 'event', text: `  ⟳ ${get('tool') ?? get('name')}`, color: 'text-amber-300' };
+    case 'tool:completed':
+      return { id, kind: 'event', text: `  ✓ ${get('tool') ?? get('name')}`, color: 'text-cyan-400' };
+    case 'tool:failed':
+      return { id, kind: 'event', text: `  ✗ ${get('tool') ?? get('name')}: ${get('error') ?? ''}`, color: 'text-rose-400' };
+    case 'inference:completed':
+      return { id, kind: 'event', text: '── inference completed ──', color: 'text-neutral-500' };
+    case 'inference:failed':
+      return { id, kind: 'event', text: `✗ inference failed: ${get('error') ?? ''}`, color: 'text-rose-400' };
+    case 'lifecycle': {
+      const phase = get<string>('phase');
+      return { id, kind: 'event', text: `◆ lifecycle: ${phase}`, color: phase === 'ready' ? 'text-emerald-400' : 'text-neutral-500' };
+    }
+    case 'done': {
+      const summary = get<string>('summary') ?? '(no summary)';
+      return { id, kind: 'event', text: `✓ done: ${summary.slice(0, 100)}`, color: 'text-emerald-400' };
+    }
+    default:
+      return { id, kind: 'event', text: `· ${event.type}`, color: 'text-neutral-600' };
+  }
+}
+
+let streamIdCounter = 0;
+function nextStreamLineId(): number { return ++streamIdCounter; }