@animalabs/connectome-host 0.3.1

package/web/src/TreeSidebar.tsx

@@ -0,0 +1,283 @@
+import { For, Show } from 'solid-js';
+import type { AgentNode } from '@conhost/state/agent-tree-reducer';
+import type { UiNode } from './tree';
+import { aggregateTokens, flattenUiTree } from './tree';
+
+export interface TreeSidebarProps {
+  roots: UiNode[];
+  /** Currently-selected node id (UiNode.id), if any. */
+  selectedId: string | null;
+  /** Set of node ids that are expanded; render contains caret state. */
+  expanded: Set<string>;
+  onToggleExpand(id: string): void;
+  /** Open / focus the stream view for this node. */
+  onSelectStream(node: UiNode): void;
+  /** Open / focus the usage view for this node. */
+  onSelectUsage(node: UiNode): void;
+  /** Cancel an in-process subagent by display name. If the subagent lives
+   *  inside a fleet child, pass its name as `childName` so the server can
+   *  forward the cancel to that child's runtime. */
+  onCancelSubagent(name: string, childName?: string): void;
+  /** Stop a fleet child gracefully. */
+  onFleetStop(name: string): void;
+  /** Restart a fleet child. */
+  onFleetRestart(name: string): void;
+}
+
+export function TreeSidebar(props: TreeSidebarProps) {
+  return (
+    <div class="h-full overflow-y-auto px-2 py-2 text-xs">
+      <Show
+        when={props.roots.length > 0}
+        fallback={<div class="text-neutral-600 italic px-2">No agents registered yet.</div>}
+      >
+        <div class="space-y-0.5">
+          <For each={flattenUiTree(props.roots, props.expanded)}>
+            {(item) => (
+              <NodeRow
+                node={item.node}
+                depth={item.depth}
+                expanded={props.expanded.has(item.node.id)}
+                selected={props.selectedId === item.node.id}
+                onToggleExpand={() => props.onToggleExpand(item.node.id)}
+                onSelectStream={() => props.onSelectStream(item.node)}
+                onSelectUsage={() => props.onSelectUsage(item.node)}
+                onCancelSubagent={props.onCancelSubagent}
+                onFleetStop={props.onFleetStop}
+                onFleetRestart={props.onFleetRestart}
+              />
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+function NodeRow(props: {
+  node: UiNode;
+  depth: number;
+  expanded: boolean;
+  selected: boolean;
+  onToggleExpand(): void;
+  onSelectStream(): void;
+  onSelectUsage(): void;
+  onCancelSubagent(name: string, childName?: string): void;
+  onFleetStop(name: string): void;
+  onFleetRestart(name: string): void;
+}) {
+  const hasChildren = (): boolean => props.node.children.length > 0;
+  const canStream = (): boolean => props.node.streamSource.kind !== 'none';
+
+  const isLiveSubagent = (): boolean =>
+    props.node.kind === 'subagent' && props.node.agent?.status === 'running';
+
+  // Subagents inside a fleet child carry `child-event-agent` as their stream
+  // source; that's where the owning fleet child's name lives.
+  const owningFleetChild = (): string | undefined =>
+    props.node.streamSource.kind === 'child-event-agent'
+      ? props.node.streamSource.childName
+      : undefined;
+
+  const stopHandler = (): (() => void) | null => {
+    if (isLiveSubagent()) return () => props.onCancelSubagent(props.node.label, owningFleetChild());
+    if (props.node.kind === 'fleet-child' && props.node.fleetChildName)
+      return () => props.onFleetStop(props.node.fleetChildName!);
+    return null;
+  };
+
+  const restartHandler = (): (() => void) | null => {
+    if (props.node.kind === 'fleet-child' && props.node.fleetChildName)
+      return () => props.onFleetRestart(props.node.fleetChildName!);
+    return null;
+  };
+
+  const selectedClass = (): string => props.selected ? 'bg-cyan-900/30' : 'hover:bg-neutral-900/40';
+
+  const onLabelClick = (): void => {
+    if (canStream()) props.onSelectStream();
+    else if (hasChildren()) props.onToggleExpand();
+  };
+
+  return (
+    <div
+      class={`flex items-center gap-1 py-0.5 pr-1 rounded ${selectedClass()}`}
+      style={{ 'padding-left': `${0.25 + props.depth * 0.75}rem` }}
+    >
+      {/* Expand caret. Always present so column widths line up; invisible for leaves. */}
+      <button
+        type="button"
+        class={`w-4 text-center text-neutral-500 hover:text-neutral-200 ${hasChildren() ? '' : 'opacity-0 pointer-events-none'}`}
+        onClick={props.onToggleExpand}
+        title={props.expanded ? 'Collapse' : 'Expand'}
+      >
+        {props.expanded ? '▾' : '▸'}
+      </button>
+
+      {/* Label region — clicking opens the stream view. The token badge inside
+       *  has its own onClick that stops propagation so it can target usage. */}
+      <div
+        role="button"
+        tabIndex={0}
+        class="flex items-center gap-2 flex-1 min-w-0 cursor-pointer"
+        onClick={onLabelClick}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onLabelClick(); }}
+      >
+        <NodeLabel node={props.node} onUsageClick={() => props.onSelectUsage()} />
+      </div>
+
+      <NodeActions
+        node={props.node}
+        canStream={canStream()}
+        onSelectStream={props.onSelectStream}
+        onStop={stopHandler()}
+        onRestart={restartHandler()}
+      />
+    </div>
+  );
+}
+
+function NodeLabel(props: { node: UiNode; onUsageClick: () => void }) {
+  const n = props.node;
+  if (n.kind === 'process') {
+    const agg = aggregateTokens(n);
+    return (
+      <>
+        <span class="text-neutral-600">▣</span>
+        <span class="font-mono text-neutral-200 truncate">{n.label}</span>
+        <span class="text-[10px] text-neutral-600 uppercase tracking-wider">parent</span>
+        <span class="ml-auto text-neutral-500 text-[10px] font-mono whitespace-nowrap">
+          <UsageBadge label={`${fmtTokens(agg.output)}out`} hidden={agg.output === 0} onClick={props.onUsageClick} title="Show session usage" />
+        </span>
+      </>
+    );
+  }
+  if (n.kind === 'fleet-child') {
+    const agg = aggregateTokens(n);
+    return (
+      <>
+        <span class="text-cyan-400">▢</span>
+        <span class="font-mono text-neutral-200 truncate">{n.label}</span>
+        <span class="text-[10px] text-cyan-500 uppercase tracking-wider">child</span>
+        <span class="ml-auto text-neutral-500 text-[10px] font-mono whitespace-nowrap">
+          <UsageBadge label={`${fmtTokens(agg.output)}out`} hidden={agg.output === 0} onClick={props.onUsageClick} title="Show child usage" />
+        </span>
+      </>
+    );
+  }
+  // framework / subagent
+  const a = n.agent!;
+  return (
+    <>
+      <span class="font-mono text-neutral-300 truncate">{n.label}</span>
+      <span class={`px-1 rounded text-[10px] ${phaseColor(a.phase)}`}>
+        {a.phase}
+      </span>
+      <Show when={n.kind === 'subagent'}>
+        <span class="text-neutral-600 text-[10px]">sub</span>
+      </Show>
+      <span class="ml-auto flex items-center gap-1 text-neutral-500 text-[10px] font-mono whitespace-nowrap">
+        <UsageBadge
+          label={`${fmtTokens(a.tokens.input)}cx`}
+          hidden={a.tokens.input === 0}
+          onClick={props.onUsageClick}
+          title="Show agent usage"
+        />
+        <Show when={a.toolCallsCount > 0}>
+          {/* Use × instead of · to keep the count from reading as a negative
+              ("·11" at this font size is easy to misparse as "-11"). */}
+          <span title="tool calls">×{a.toolCallsCount}</span>
+        </Show>
+      </span>
+    </>
+  );
+}
+
+function UsageBadge(props: { label: string; hidden: boolean; onClick: () => void; title: string }) {
+  return (
+    <Show when={!props.hidden}>
+      <span
+        role="button"
+        tabIndex={0}
+        class="px-1 rounded cursor-pointer hover:text-cyan-300 hover:bg-cyan-900/20"
+        title={props.title}
+        onClick={(e) => { e.stopPropagation(); props.onClick(); }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.stopPropagation();
+            e.preventDefault();
+            props.onClick();
+          }
+        }}
+      >
+        {props.label}
+      </span>
+    </Show>
+  );
+}
+
+function NodeActions(props: {
+  node: UiNode;
+  canStream: boolean;
+  onSelectStream: () => void;
+  onStop: (() => void) | null;
+  onRestart: (() => void) | null;
+}) {
+  return (
+    <>
+      <Show when={props.canStream}>
+        <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={(e) => { e.stopPropagation(); props.onSelectStream(); }}
+          title="Show this node's live stream"
+        >
+          stream
+        </button>
+      </Show>
+      <Show when={props.onStop}>
+        <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={(e) => { e.stopPropagation(); props.onStop?.(); }}
+          title="Stop"
+        >
+          stop
+        </button>
+      </Show>
+      <Show when={props.onRestart}>
+        <button
+          type="button"
+          class="text-[10px] px-1 py-0.5 bg-cyan-900/40 hover:bg-cyan-900/60 text-cyan-200 rounded font-mono"
+          onClick={(e) => { e.stopPropagation(); props.onRestart?.(); }}
+          title="Restart"
+        >
+          ↻
+        </button>
+      </Show>
+    </>
+  );
+}
+
+function phaseColor(phase: AgentNode['phase']): string {
+  switch (phase) {
+    case 'streaming': return 'bg-cyan-500/30 text-cyan-200';
+    case 'sending': return 'bg-amber-500/30 text-amber-200';
+    case 'invoking': return 'bg-fuchsia-500/30 text-fuchsia-200';
+    case 'executing': return 'bg-amber-500/30 text-amber-200';
+    case 'done': return 'bg-neutral-700 text-neutral-400';
+    case 'failed': return 'bg-rose-500/40 text-rose-200';
+    // Postmortem 2026-05-28 P1 #3: 'cancelled' is terminal-but-benign.
+    // A slightly warmer dim than 'done' so the operator can spot which
+    // children ended on a cancel vs. a successful turn, without the
+    // false-alarm RED of 'failed'.
+    case 'cancelled': return 'bg-neutral-700 text-amber-300/70';
+    default: return 'bg-neutral-800 text-neutral-400';
+  }
+}
+
+function fmtTokens(n: number): string {
+  if (n < 1000) return String(n);
+  if (n < 1_000_000) return (n / 1000).toFixed(1) + 'k';
+  return (n / 1_000_000).toFixed(1) + 'M';
+}

package/web/src/Usage.tsx

@@ -0,0 +1,182 @@
+/**
+ * Usage panel — token-spend breakdown for the focused tree node.
+ *
+ * Strategy by node kind:
+ *  - 'process' (parent root): show session-wide UsageMessage as the
+ *    authoritative total, plus a breakdown of direct children.
+ *  - 'fleet-child' folder: aggregate over its agents, plus per-agent rows.
+ *  - 'framework' / 'subagent' (leaf-ish): show that one agent's numbers.
+ *
+ * The panel is intentionally read-only — there's no per-node billing knob to
+ * twiddle here yet. Most operators want the same answer: "where's the burn?"
+ */
+
+import { For, Show } from 'solid-js';
+import type { UiNode } from './tree';
+import { aggregateTokens } from './tree';
+import type { TokenUsage, PerAgentCost } from '@conhost/web/protocol';
+
+export function UsagePanel(props: {
+  node: UiNode;
+  /** Session-wide cumulative usage from welcome/usage messages. Only
+   *  consulted when the focused node is the parent process. */
+  sessionUsage: TokenUsage;
+  /** Per-agent cost slice (parent-process agents only). Used to label
+   *  per-agent cost in process / per-agent breakdown views. */
+  perAgentCost: PerAgentCost[];
+  onClose(): void;
+}) {
+  const costFor = (agentName: string): { total: number; currency: string } | undefined => {
+    return props.perAgentCost.find(c => c.name === agentName)?.cost;
+  };
+  const totals = (): { input: number; output: number; cacheRead: number; cacheWrite: number; cost?: { total: number; currency: string } } => {
+    if (props.node.kind === 'process') {
+      return {
+        input: props.sessionUsage.input,
+        output: props.sessionUsage.output,
+        cacheRead: props.sessionUsage.cacheRead,
+        cacheWrite: props.sessionUsage.cacheWrite,
+        cost: props.sessionUsage.cost,
+      };
+    }
+    const t = aggregateTokens(props.node);
+    // For an agent-leaf, attach the matching per-agent cost so the panel
+    // shows $X.XX next to its tokens. Aggregates (fleet-child folders) do
+    // not show cost — the framework's UsageTracker is per-process and we
+    // don't aggregate cross-process costs here.
+    if (props.node.agent) {
+      const c = costFor(props.node.label);
+      return c ? { ...t, cost: c } : t;
+    }
+    return t;
+  };
+
+  const breakdown = (): UiNode[] => {
+    // Parent process and fleet-child folders break down by direct children;
+    // leaf agent nodes don't (they ARE the breakdown).
+    if (props.node.kind === 'process' || props.node.kind === 'fleet-child') {
+      return props.node.children;
+    }
+    return [];
+  };
+
+  const headline = (): string => {
+    switch (props.node.kind) {
+      case 'process': return 'session total';
+      case 'fleet-child': return `child: ${props.node.label}`;
+      case 'framework': return `agent: ${props.node.label}`;
+      case 'subagent': return `subagent: ${props.node.label}`;
+    }
+  };
+
+  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">usage</span>
+        <span class="font-mono text-sm text-neutral-200 truncate">{props.node.label}</span>
+        <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-y-auto px-3 py-2 font-mono text-[11px] space-y-3">
+        <section>
+          <div class="text-neutral-500 uppercase tracking-wider text-[10px] mb-1">{headline()}</div>
+          <TotalsBlock totals={totals()} />
+        </section>
+
+        <Show when={breakdown().length > 0}>
+          <section>
+            <div class="text-neutral-500 uppercase tracking-wider text-[10px] mb-1">by node</div>
+            <div class="space-y-1">
+              <For each={breakdown()}>{(child) => <BreakdownRow node={child} perAgentCost={props.perAgentCost} />}</For>
+            </div>
+          </section>
+        </Show>
+
+        <Show when={props.node.kind === 'process'}>
+          <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
+            should converge but small drift is normal during streaming.
+          </section>
+        </Show>
+      </div>
+    </div>
+  );
+}
+
+function TotalsBlock(props: { totals: { input: number; output: number; cacheRead: number; cacheWrite: number; cost?: { total: number; currency: string } } }) {
+  const t = props.totals;
+  return (
+    <div class="grid grid-cols-2 gap-x-3 gap-y-0.5">
+      <div class="text-neutral-500">input</div>
+      <div class="text-neutral-200 text-right">{fmt(t.input)}</div>
+      <div class="text-neutral-500">output</div>
+      <div class="text-neutral-200 text-right">{fmt(t.output)}</div>
+      <Show when={t.cacheRead > 0 || t.cacheWrite > 0}>
+        <div class="text-neutral-500">cache read</div>
+        <div class="text-neutral-200 text-right">{fmt(t.cacheRead)}</div>
+        <div class="text-neutral-500">cache write</div>
+        <div class="text-neutral-200 text-right">{fmt(t.cacheWrite)}</div>
+      </Show>
+      <Show when={t.cost && t.cost.total > 0}>
+        <div class="text-neutral-500 mt-1">cost</div>
+        <div class="text-emerald-300 text-right mt-1" title={t.cost!.currency}>
+          ${fmtCost(t.cost!.total)}
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+function BreakdownRow(props: { node: UiNode; perAgentCost: PerAgentCost[] }) {
+  const agg = aggregateTokens(props.node);
+  const cost = (): { total: number; currency: string } | undefined => {
+    if (!props.node.agent) return undefined;
+    return props.perAgentCost.find(c => c.name === props.node.label)?.cost;
+  };
+  const kindHint = (): string => {
+    switch (props.node.kind) {
+      case 'fleet-child': return 'child';
+      case 'subagent': return 'sub';
+      case 'framework': return 'agent';
+      default: return '';
+    }
+  };
+  return (
+    <div class="border-l-2 border-neutral-800 pl-2 py-0.5">
+      <div class="flex items-baseline gap-2">
+        <span class="font-mono text-neutral-300 truncate">{props.node.label}</span>
+        <span class="text-[10px] text-neutral-600 uppercase tracking-wider">{kindHint()}</span>
+        <Show when={cost() && cost()!.total > 0}>
+          <span class="ml-auto text-emerald-300 text-[10px]" title={cost()!.currency}>
+            ${fmtCost(cost()!.total)}
+          </span>
+        </Show>
+      </div>
+      <div class="flex gap-3 text-neutral-500 text-[10px]">
+        <span>in {fmt(agg.input)}</span>
+        <span>out {fmt(agg.output)}</span>
+        <Show when={agg.cacheRead > 0}><span>cR {fmt(agg.cacheRead)}</span></Show>
+        <Show when={agg.cacheWrite > 0}><span>cW {fmt(agg.cacheWrite)}</span></Show>
+      </div>
+    </div>
+  );
+}
+
+function fmt(n: number): string {
+  if (n < 1000) return String(n);
+  if (n < 1_000_000) return (n / 1000).toFixed(1) + 'k';
+  return (n / 1_000_000).toFixed(2) + 'M';
+}
+
+/** Format a cost figure: 4 decimals when sub-dollar (so cents are visible),
+ *  2 otherwise — matches the TUI's /usage formatter. */
+function fmtCost(total: number): string {
+  return total.toFixed(total < 1 ? 4 : 2);
+}

package/web/src/main.tsx

@@ -0,0 +1,7 @@
+import { render } from 'solid-js/web';
+import { App } from './App';
+import './styles.css';
+
+const root = document.getElementById('root');
+if (!root) throw new Error('#root not found');
+render(() => <App />, root);

package/web/src/styles.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+/* Sane base for monospace blocks. */
+pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+/* Fade in messages as they arrive — keeps streaming feeling alive. */
+.msg-enter { animation: msg-enter 120ms ease-out; }
+@keyframes msg-enter {
+  from { opacity: 0; transform: translateY(2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Markdown defaults — enough for assistant prose without a plugin. */
+.prose-mini { line-height: 1.55; }
+.prose-mini p { margin: 0.4em 0; }
+.prose-mini h1, .prose-mini h2, .prose-mini h3 { font-weight: 600; margin: 0.6em 0 0.3em; }
+.prose-mini h1 { font-size: 1.25em; }
+.prose-mini h2 { font-size: 1.15em; }
+.prose-mini h3 { font-size: 1.05em; }
+.prose-mini ul, .prose-mini ol { margin: 0.4em 0; padding-left: 1.5em; }
+.prose-mini li { margin: 0.15em 0; }
+.prose-mini code { background: rgba(255,255,255,0.08); padding: 0.05em 0.3em; border-radius: 3px; font-size: 0.9em; }
+.prose-mini pre { background: rgba(255,255,255,0.04); padding: 0.6em 0.8em; border-radius: 5px; overflow-x: auto; margin: 0.5em 0; }
+.prose-mini pre code { background: transparent; padding: 0; }
+.prose-mini a { color: rgb(96 165 250); text-decoration: underline; }
+.prose-mini blockquote { border-left: 2px solid rgba(255,255,255,0.2); padding-left: 0.8em; margin: 0.4em 0; color: rgba(255,255,255,0.7); }