lazyclaw 6.3.1 → 6.5.0

package/tui/slash_helpers.mjs

@@ -0,0 +1,68 @@
+// tui/slash_helpers.mjs — shared leaf helpers for the slash-command dispatcher
+// and its sibling handler modules. Extracted verbatim from slash_dispatcher.mjs
+// so the dispatcher, dashboard, channels, and trainer modules share one set of
+// pure utilities without a circular import. These import nothing from the
+// dispatcher.
+
+// Tiny utility — split args on whitespace, drop empties. Used by sub-command
+// handlers that don't need the loop-engine's full quote-aware splitter.
+export function splitWhitespace(s) {
+  return (s || '').split(/\s+/).filter(Boolean);
+}
+
+// Parse a "provider[:model]" spec, preferring the registry's parser.
+export function _parseProvModel(registry, spec) {
+  if (registry && typeof registry.parseProviderModel === 'function') return registry.parseProviderModel(spec);
+  const s = String(spec || '');
+  const i = s.indexOf(':');
+  if (i < 0) return { provider: s || null, model: null };
+  return { provider: s.slice(0, i) || null, model: s.slice(i + 1) || null };
+}
+
+// Best-effort dynamic import. Returns the resolved ctx field if the caller
+// pre-injected it (test hot path), else loads the real module. Throwing is
+// fine — handlers wrap calls in try/catch where appropriate.
+export async function _mod(ctx, key, importer) {
+  if (ctx && ctx[key]) return ctx[key];
+  return importer();
+}
+
+// Single free-text prompt reusing the modal's filter buffer (no dedicated
+// input widget). Returns the typed value, '' (only when allowEmpty), or null
+// on cancel / required-but-empty.
+export async function _promptText(ctx, { title, subtitle, allowEmpty, secret } = {}) {
+  if (typeof ctx.openPicker !== 'function') return null;
+  const picked = await ctx.openPicker({
+    kind: 'text',
+    title,
+    // `secret` masks the typed query on screen (api-key / token entry) while
+    // the real value still reaches the caller — the modal picker honors it.
+    secret: !!secret,
+    subtitle: subtitle || 'type into the filter, then pick the row · Esc cancels',
+    items: [{ id: '__text__', label: '✓ use what I typed above', desc: '', pinned: true, freeText: true }],
+  });
+  if (picked == null) return null;
+  if (typeof picked === 'object') {
+    const v = String(picked.query || '').trim();
+    if (!v && !allowEmpty) return null;
+    return v;
+  }
+  return null;
+}
+
+// Yes/no confirmation modal for sensitive-tool approval. Esc (or no modal
+// available) DENIES — approval is never granted by omission.
+export async function _promptConfirm(ctx, { title, subtitle } = {}) {
+  if (typeof ctx.openPicker !== 'function') return false;
+  const picked = await ctx.openPicker({
+    kind: 'menu',
+    title: title || 'Approve sensitive tool?',
+    subtitle: subtitle || 'Enter selects · Esc denies',
+    items: [
+      { id: 'approve', label: '✓ approve once', desc: 'run this tool call' },
+      { id: 'deny', label: '✗ deny', desc: 'block this tool call' },
+    ],
+  });
+  const id = picked && typeof picked === 'object' ? picked.id : picked;
+  return id === 'approve';
+}

package/tui/slash_popup.mjs

@@ -86,6 +86,10 @@ export function SlashPopup({
   selectedIndex = 0,
   maxRows = 8,
   columns,
+  // When true, always render the selectable chooser (used by the arg popup,
+  // whose buffer has a space — which would otherwise collapse a single
+  // candidate into the non-selectable inline hint).
+  forceChooser = false,
 }) {
   if (!commands || commands.length === 0) return null;
   const cols = columns
@@ -97,7 +101,7 @@ export function SlashPopup({
 
   // Inline-hint mode: buffer already has args + a single match. Render
   // the help text on one dimmed line. No border, no chooser.
-  const isInlineHint = buffer.includes(' ') && commands.length === 1;
+  const isInlineHint = !forceChooser && buffer.includes(' ') && commands.length === 1;
   if (isInlineHint) {
     const c = commands[0];
     return React.createElement(

package/tui/slash_trainer.mjs

@@ -0,0 +1,173 @@
+// tui/slash_trainer.mjs — the /trainer slash-command handler, extracted verbatim
+// from slash_dispatcher.mjs. Drives the synthesis / learning model selection
+// (set / fallback / show / clear) plus the bare-menu picker. Imports its leaf
+// helpers from slash_helpers.mjs and the shared provider/model picker from
+// model_pick.mjs, never the dispatcher (no cycle). Recurses internally
+// (_trainer('show', ctx)) — that recursion stays inside this module.
+
+import { pickProviderModel, providerLookup as _providerLookup } from './model_pick.mjs';
+import { renderRecord } from '../lib/render.mjs';
+import { splitWhitespace, _mod, _parseProvModel, _promptConfirm } from './slash_helpers.mjs';
+
+export async function _trainer(args, ctx) {
+  const registry = await _mod(ctx, 'registryMod', () => import('../providers/registry.mjs'));
+  const tokens = splitWhitespace(args);
+
+  // Bare /trainer with a modal available → an action menu (mirrors the bare
+  // /orchestrator menu). "Set"/"Fallback" re-enter and drill the shared
+  // provider→model picker; "Clear"/"Show" run their subcommands. Typed forms
+  // (/trainer set <p:m>, etc.) still work and skip the menu.
+  if (tokens.length === 0 && typeof ctx.openPicker === 'function') {
+    let cur = '';
+    try {
+      if (typeof registry.resolveTrainer === 'function') {
+        const e = registry.resolveTrainer(ctx.cfg || {});
+        cur = `now: ${e.provider}${e.model ? ':' + e.model : ':(default)'}`;
+      }
+    } catch { /* show menu without the current hint */ }
+    const picked = await ctx.openPicker({
+      kind: 'menu',
+      title: 'Trainer — synthesis / learning model',
+      subtitle: cur || 'pick provider + model for trainer turns',
+      items: [
+        { id: 'set', label: 'Set trainer…', desc: 'pick provider + model (or auto / provider default)' },
+        { id: 'fallback', label: 'Set fallback…', desc: 'pick a fallback provider + model' },
+        { id: 'clear', label: 'Clear', desc: 'unset — mirror the chat provider/model' },
+        { id: 'show', label: 'Show', desc: 'print the effective + configured trainer' },
+      ],
+    });
+    const id = picked && typeof picked === 'object' ? picked.id : picked;
+    if (!id || typeof id !== 'string') return _trainer('show', ctx); // cancelled → show status
+    return _trainer(id, ctx); // re-enter; set/fallback open the picker (no spec)
+  }
+
+  const sub = tokens[0] || 'show';
+
+  if (sub === 'show') {
+    let effective = { provider: ctx.getActiveProvName ? ctx.getActiveProvName() : null,
+                      model: ctx.getActiveModel ? ctx.getActiveModel() : null };
+    try {
+      if (typeof registry.resolveTrainer === 'function') {
+        effective = registry.resolveTrainer(ctx.cfg || {});
+      }
+    } catch { /* fall through */ }
+    const configured = (ctx.cfg && ctx.cfg.trainer) || null;
+    const cfgRender = configured
+      ? renderRecord(configured, { fields: ['provider', 'model', 'fallback'] }).split('\n').map((l) => '  ' + l).join('\n')
+      : '(unset — trainer mirrors the chat provider/model)';
+    return [
+      'trainer (effective):',
+      `  provider: ${effective.provider}`,
+      `  model:    ${effective.model || '(default)'}`,
+      'trainer (configured):',
+      cfgRender,
+    ].join('\n');
+  }
+
+  if (sub === 'set') {
+    let spec = tokens[1];
+    let _setFromPicker = false;
+    // No spec + a modal available → drill the shared picker (with an "auto"
+    // row and a "provider default" row) instead of requiring a typed spec.
+    if (!spec && typeof ctx.openPicker === 'function') {
+      const r = await pickProviderModel(ctx, registry, { includeAuto: true, includeDefault: true });
+      if (!r || r.model == null) return 'trainer set: cancelled';
+      spec = r.provider === 'auto' ? 'auto' : (r.model ? `${r.provider}:${r.model}` : r.provider);
+      _setFromPicker = true;
+    }
+    if (!spec) return 'usage: /trainer set <provider>[:<model>]  (or `auto` for orchestrator-managed)';
+    const parsed = typeof registry.parseProviderModel === 'function'
+      ? registry.parseProviderModel(spec)
+      : { provider: spec.split(':')[0], model: spec.split(':')[1] || null };
+    if (!parsed || !parsed.provider) return `/trainer set: could not parse "${spec}"`;
+    if (parsed.provider !== 'auto') {
+      const next = _providerLookup(registry, parsed.provider);
+      if (!next) return `/trainer set: unknown provider "${parsed.provider}"`;
+    }
+    // Optional `--fallback <provider[:model]>` — resolveTrainer routes here
+    // when opts.useFallback is set. Validate before persisting.
+    let fallbackSpec = null;
+    const fi = tokens.indexOf('--fallback');
+    if (fi >= 0) {
+      fallbackSpec = tokens[fi + 1];
+      if (!fallbackSpec) return 'usage: /trainer set <p:m> --fallback <p:m>';
+      const fp = _parseProvModel(registry, fallbackSpec);
+      if (!fp.provider) return `/trainer set: could not parse fallback "${fallbackSpec}"`;
+      if (fp.provider !== 'auto' && !_providerLookup(registry, fp.provider)) {
+        return `/trainer set: unknown provider "${fp.provider}"`;
+      }
+    }
+    // Picker-driven set with no --fallback flag → offer an optional fallback
+    // pick (the flag form stays the escape hatch for typed callers).
+    if (_setFromPicker && !fallbackSpec && typeof ctx.openPicker === 'function') {
+      const addFb = await _promptConfirm(ctx, { title: 'Add a fallback trainer?', subtitle: 'used when the primary is unavailable · Esc / deny to skip' });
+      if (addFb) {
+        const fr = await pickProviderModel(ctx, registry, { includeAuto: true, includeDefault: true });
+        if (fr && fr.model != null) {
+          fallbackSpec = fr.provider === 'auto' ? 'auto' : (fr.model ? `${fr.provider}:${fr.model}` : fr.provider);
+        }
+      }
+    }
+    // Read-merge-write so unrelated cfg keys survive.
+    const fs = await import('node:fs');
+    const path = await import('node:path');
+    const cfgPath = path.join(ctx.cfgDir, 'config.json');
+    let diskCfg = {};
+    try { diskCfg = JSON.parse(fs.readFileSync(cfgPath, 'utf8')); } catch { /* fresh */ }
+    diskCfg.trainer = { ...(diskCfg.trainer || {}), provider: parsed.provider };
+    if (parsed.model) diskCfg.trainer.model = parsed.model;
+    else delete diskCfg.trainer.model;
+    if (fallbackSpec) diskCfg.trainer.fallback = fallbackSpec;
+    try { fs.mkdirSync(ctx.cfgDir, { recursive: true }); } catch {}
+    fs.writeFileSync(cfgPath, JSON.stringify(diskCfg, null, 2));
+    if (ctx.cfg) ctx.cfg.trainer = { ...diskCfg.trainer };
+    return `✓ trainer → ${parsed.provider}${parsed.model ? ':' + parsed.model : ''}${fallbackSpec ? ` (fallback: ${fallbackSpec})` : ''}`;
+  }
+
+  if (sub === 'fallback') {
+    let spec = tokens[1];
+    if (!spec && typeof ctx.openPicker === 'function') {
+      const r = await pickProviderModel(ctx, registry, { includeAuto: true, includeDefault: true });
+      if (!r || r.model == null) return 'trainer fallback: cancelled';
+      spec = r.provider === 'auto' ? 'auto' : (r.model ? `${r.provider}:${r.model}` : r.provider);
+    }
+    if (!spec) return 'usage: /trainer fallback <provider>[:<model>]  |  clear';
+    const fs = await import('node:fs');
+    const path = await import('node:path');
+    const cfgPath = path.join(ctx.cfgDir, 'config.json');
+    let diskCfg = {};
+    try { diskCfg = JSON.parse(fs.readFileSync(cfgPath, 'utf8')); } catch { /* fresh */ }
+    if (spec === 'clear' || spec === 'unset') {
+      if (diskCfg.trainer) delete diskCfg.trainer.fallback;
+      try { fs.mkdirSync(ctx.cfgDir, { recursive: true }); } catch {}
+      fs.writeFileSync(cfgPath, JSON.stringify(diskCfg, null, 2));
+      if (ctx.cfg && ctx.cfg.trainer) delete ctx.cfg.trainer.fallback;
+      return '✓ trainer fallback cleared';
+    }
+    const fp = _parseProvModel(registry, spec);
+    if (!fp.provider) return `/trainer fallback: could not parse "${spec}"`;
+    if (fp.provider !== 'auto' && !_providerLookup(registry, fp.provider)) {
+      return `/trainer fallback: unknown provider "${fp.provider}"`;
+    }
+    diskCfg.trainer = { ...(diskCfg.trainer || {}), fallback: spec };
+    try { fs.mkdirSync(ctx.cfgDir, { recursive: true }); } catch {}
+    fs.writeFileSync(cfgPath, JSON.stringify(diskCfg, null, 2));
+    if (ctx.cfg) ctx.cfg.trainer = { ...diskCfg.trainer };
+    return `✓ trainer fallback → ${spec}`;
+  }
+
+  if (sub === 'clear' || sub === 'unset') {
+    const fs = await import('node:fs');
+    const path = await import('node:path');
+    const cfgPath = path.join(ctx.cfgDir, 'config.json');
+    let diskCfg = {};
+    try { diskCfg = JSON.parse(fs.readFileSync(cfgPath, 'utf8')); } catch { /* fresh */ }
+    delete diskCfg.trainer;
+    try { fs.mkdirSync(ctx.cfgDir, { recursive: true }); } catch {}
+    fs.writeFileSync(cfgPath, JSON.stringify(diskCfg, null, 2));
+    if (ctx.cfg) delete ctx.cfg.trainer;
+    return '✓ trainer cleared (will mirror chat provider/model)';
+  }
+
+  return `/trainer: unknown sub "${sub}" — show|set <p:m>|clear`;
+}

package/tui/splash.mjs

@@ -49,6 +49,19 @@ function shortCwd(cwd) {
   return cwd;
 }
 
+// Provider-aware splash tip. The $0 "learning loop" pitch only applies when
+// the trainer runs on claude-cli (Claude Pro/Max subscription is keyless and
+// free); for any other provider the loop costs API tokens, so showing the
+// Claude pitch is misleading. The trainer provider wins because the pitch is
+// about the learning loop, not the chat provider (see splash info line).
+export function pickSplashTip({ provider, trainer = {} } = {}) {
+  const trainerProvider = trainer.provider || provider;
+  if (trainerProvider === 'claude-cli') {
+    return 'Tip: trainer learns from your Claude Pro subscription at $0.';
+  }
+  return 'Tip: /help lists every command, tool, and skill.';
+}
+
 function toolRow({ category, sensitive, verbs }) {
   const label = sensitive ? `${category}*` : category;
   const tail = verbs.slice(0, 6).join(' · ');
@@ -153,7 +166,7 @@ function renderWide(props, cols) {
   if (sessionId) lines.push(`${LMARGIN}Session: ${sessionId}`);
   lines.push('');
   lines.push(`${LMARGIN}Welcome to lazyclaw. Type your message or /help for commands.`);
-  lines.push(`${LMARGIN}+ Tip: trainer learns from your Claude Pro subscription at $0.`);
+  lines.push(`${LMARGIN}+ ${pickSplashTip({ provider, trainer })}`);
   // v5.4.3 — the baked-in status row that used to live here duplicated
   // ReplApp's real <StatusBar/> (tui/repl.mjs:476). Removing it cuts 4
   // rows from the splash AND eliminates the visible overlap the user
@@ -237,7 +250,7 @@ function renderMedium(props, cols) {
   if (sessionId) lines.push(`${LMARGIN}Session: ${sessionId}`);
   lines.push('');
   lines.push(`${LMARGIN}Welcome to lazyclaw. Type your message or /help for commands.`);
-  lines.push(`${LMARGIN}+ Tip: trainer learns from your Claude Pro subscription at $0.`);
+  lines.push(`${LMARGIN}+ ${pickSplashTip({ provider, trainer })}`);
   // v5.4.3 — baked-in status row removed; ReplApp renders the real one.
 
   return lines;

package/tui/status_bar.mjs

@@ -0,0 +1,26 @@
+// tui/status_bar.mjs — the sticky single/double status row above the chat
+// input. Row 1: streaming indicator · provider · model · ctx gauge. Row 2
+// (only when the HUD is enabled): real-time usage, cost, trainer, orchestrator.
+// Extracted from repl.mjs so the HUD can grow without pushing repl.mjs over the
+// file-size ratchet.
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from './theme.mjs';
+import { formatHudRow, formatGauge } from './hud.mjs';
+
+export function StatusBar({ provider, model, streaming, ctxUsed, ctxTotal, hud }) {
+  // Numbers are computed upstream (chat-history budget, not provider self-report);
+  // formatGauge only changes the RENDERING — adds percent + bar + warn marker.
+  const ctx = (ctxUsed != null && ctxTotal != null) ? formatGauge(ctxUsed, ctxTotal) : '--';
+  const indicator = streaming ? theme.accent('● streaming') : theme.dim('○ idle');
+  const prov = provider || '?';
+  const mdl = model || '?';
+  const hudRow = hud ? formatHudRow(hud) : '';
+  return React.createElement(
+    Box,
+    { flexShrink: 0, flexDirection: 'column', paddingX: 1 },
+    React.createElement(Text, null, `${indicator}  ${prov} · ${mdl}  ctx ${ctx}`),
+    hudRow ? React.createElement(Text, null, theme.dim(hudRow)) : null,
+  );
+}

package/tui/theme.mjs

@@ -10,6 +10,34 @@ import chalk from 'chalk';
 const AMBER_HEX = '#FFB347';
 const BORDER_HEX = '#5A5A5A';
 
+// Central color gate. Color is OFF when the NO_COLOR standard applies
+// (https://no-color.org — any non-empty NO_COLOR), the terminal is `dumb`,
+// or the target stream isn't a TTY (piped / screen-reader / CI). Evaluated
+// per call so tests and runtime env changes are honored without re-importing.
+// `stream` defaults to stdout; tests pass a fake `{ isTTY }` to probe the
+// gate without mutating the real process streams. chalk self-detects the same
+// conditions (level 0), so its tokens degrade automatically; this gate is for
+// callers that emit raw ANSI.
+export function colorEnabled(stream = process.stdout) {
+  if (process.env.NO_COLOR) return false;
+  if (process.env.TERM === 'dumb') return false;
+  if (!stream || !stream.isTTY) return false;
+  return true;
+}
+
+// Wrap `str` in a raw SGR escape (`\x1b[<code>m … \x1b[0m`) when color is on,
+// otherwise return it unchanged. Keeps inline-ANSI call sites accessible
+// without each one re-implementing the NO_COLOR check.
+export function paint(code, str) {
+  if (!colorEnabled()) return str;
+  return `\x1b[${code}m${str}\x1b[0m`;
+}
+
+// Align chalk's own level with our gate so theme tokens (amber/dim/accent)
+// and raw-ANSI emitters agree under NO_COLOR / dumb / non-TTY. chalk reads
+// this at import; our gate stays the runtime source of truth for raw ANSI.
+if (!colorEnabled()) chalk.level = 0;
+
 function amber(text) {
   return chalk.hex(AMBER_HEX)(text);
 }

package/web/dashboard.css

@@ -267,3 +267,80 @@
       display: flex;
       justify-content: space-between;
     }
+
+    /* ── Team Live tab ─────────────────────────────────────────── */
+    .team-live { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
+    .team-canvas {
+      flex: 2 1 420px; min-width: 0; min-height: 260px;
+      background: var(--card); border: 1px solid var(--border); border-radius: 12px;
+      padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 18px;
+    }
+    .team-detail {
+      flex: 1 1 280px; min-width: 0;
+      background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
+      font-size: 13px;
+    }
+    /* tree: a lead row on top, a wrapping children row below, with connectors */
+    .team-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
+    .team-children { position: relative; padding-top: 18px; }
+    .team-children::before {
+      content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 18px;
+      background: var(--border); transform: translateX(-50%);
+    }
+    .tagent {
+      display: flex; flex-direction: column; align-items: center; gap: 6px;
+      width: 104px; cursor: pointer; background: none; border: 0; color: inherit; font: inherit;
+      padding: 6px; border-radius: 10px;
+    }
+    .tagent:hover { background: rgba(217,179,90,0.06); }
+    .tagent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    .tagent[aria-selected="true"] { background: rgba(217,179,90,0.12); }
+    .tagent-avatar {
+      width: 56px; height: 56px; border-radius: 50%;
+      position: relative; overflow: hidden;
+      display: flex; align-items: center; justify-content: center; font-size: 24px;
+      background: #1e2130; border: 3px solid #475569;
+    }
+    .tagent-avatar img {
+      position: absolute; inset: 0; width: 100%; height: 100%;
+      object-fit: cover; object-position: center top;
+      image-rendering: pixelated;
+    }
+    .detail-avatar {
+      width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
+      object-position: center top; image-rendering: pixelated; vertical-align: middle;
+      margin-right: 8px; background: #1e2130; border: 2px solid #475569;
+    }
+    .tagent.working .tagent-avatar { border-color: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,0.16); }
+    .tagent.idle .tagent-avatar    { border-color: #475569; }
+    .tagent.delegating .tagent-avatar { animation: tdelegate 900ms ease-out; }
+    @keyframes tdelegate {
+      0%   { box-shadow: 0 0 0 0 rgba(217,179,90,0.55); }
+      100% { box-shadow: 0 0 0 14px rgba(217,179,90,0); }
+    }
+    .tagent-name { font-size: 12px; font-weight: 600; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .tagent-status { font-size: 10px; }
+    .tagent.working .tagent-status { color: #34d399; }
+    .tagent.idle .tagent-status    { color: var(--dim); }
+    .harness-badge {
+      font-size: 9px; background: #312e81; color: #c7d2fe; border-radius: 5px; padding: 1px 6px;
+      max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+    .team-detail h3 { margin: 0 0 6px; font-size: 15px; }
+    .team-detail .kv { margin: 8px 0; }
+    .team-detail .kv .label { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
+    .team-detail .activity { margin: 3px 0; color: #cbd5e1; line-height: 1.6; }
+    .team-feed-wrap { margin-top: 16px; }
+    .team-feed { list-style: none; margin: 6px 0 0; padding: 0; max-height: 180px; overflow-y: auto; font-size: 12px; }
+    .team-feed li { padding: 4px 0; border-top: 1px solid var(--border); color: var(--dim); }
+    .team-feed li .who { color: var(--fg, #e8e8f0); font-weight: 600; }
+    .team-feed li .arrow { color: #34d399; }
+
+    @media (max-width: 760px) {
+      .team-live { flex-direction: column; }
+      .team-canvas, .team-detail { flex: 1 1 auto; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .tagent.working .tagent-avatar { box-shadow: none; }
+      .tagent.delegating .tagent-avatar { animation: none; }
+    }

package/web/dashboard.html

@@ -14,7 +14,11 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>LazyClaw</title>
-  <link rel="stylesheet" href="dashboard.css">
+  <!-- Absolute paths: the daemon serves this page at /dashboard AND /dashboard/
+       (and /), so a relative href would resolve to /dashboard/dashboard.css and
+       404 — leaving the page unstyled with every tab stuck on "Loading…". -->
+  <link rel="stylesheet" href="/dashboard.css">
+  <link rel="icon" href="data:,">
 </head>
 <body>
   <header>
@@ -38,6 +42,7 @@
     <button data-tab="agents">Agents</button>
     <button data-tab="teams">Teams</button>
     <button data-tab="tasks">Tasks</button>
+    <button data-tab="team">Team Live</button>
     <button data-tab="trainer">Trainer</button>
     <button data-tab="recall">Recall</button>
     <button data-tab="sandbox">Sandbox</button>
@@ -182,6 +187,28 @@
       <div id="tasks-list"><div class="empty">Loading…</div></div>
     </section>
 
+    <section id="tab-team">
+      <h2>Team Live</h2>
+      <div class="toolbar">
+        <label for="team-select" class="dim">Team</label>
+        <select id="team-select" aria-label="Select a team to watch"></select>
+        <button class="btn btn-secondary" onclick="LOADERS.team()">Refresh</button>
+        <span class="dim" id="team-conn" role="status" aria-live="polite">○ connecting…</span>
+      </div>
+      <div id="team-live" class="team-live">
+        <div id="team-canvas" class="team-canvas" role="tree" aria-label="Agent team">
+          <div class="empty">Loading…</div>
+        </div>
+        <aside id="team-detail" class="team-detail" aria-live="polite">
+          <div class="empty">Click an agent to see its harness and what it's working on.</div>
+        </aside>
+      </div>
+      <div class="team-feed-wrap">
+        <div class="label">Live activity</div>
+        <ul id="team-feed" class="team-feed" aria-live="polite"></ul>
+      </div>
+    </section>
+
     <section id="tab-trainer">
       <h2>Trainer</h2>
       <div class="toolbar">
@@ -244,6 +271,6 @@
     </div>
   </div>
 
-  <script src="dashboard.js"></script>
+  <script src="/dashboard.js"></script>
 </body>
 </html>