lazyclaw 6.3.1 → 6.5.0

package/web/dashboard.js

@@ -10,9 +10,54 @@
 
     document.getElementById('footer-url').textContent = location.href;
 
+    // ── Auth token ────────────────────────────────────────────────
+    // The static dashboard shell is served without a token, but the JSON
+    // API stays gated when the daemon runs with --auth-token. We keep the
+    // token in localStorage and attach it as `Authorization: Bearer` on
+    // every API call. A loopback daemon with no auth never sends a token —
+    // the header is simply absent and calls work unchanged.
+    const TOKEN_KEY = 'lazyclaw_token';
+    function getToken() {
+      try { return localStorage.getItem(TOKEN_KEY) || ''; } catch { return ''; }
+    }
+    function setToken(t) {
+      try { localStorage.setItem(TOKEN_KEY, t); } catch {}
+    }
+    // Merge an Authorization header into the caller's opts when a token is
+    // known, without clobbering any other headers they passed.
+    function withAuth(opts = {}) {
+      const token = getToken();
+      if (!token) return opts;
+      return { ...opts, headers: { ...(opts.headers || {}), Authorization: 'Bearer ' + token } };
+    }
+    // On 401 from a gated route, prompt the user once for the token, store
+    // it, and signal the caller to retry. window.prompt is fine for v1.
+    function promptForToken() {
+      const entered = window.prompt(
+        'This daemon requires an auth token (started with --auth-token).\n' +
+        'Paste the token to continue:',
+        getToken(),
+      );
+      if (entered == null) return false; // user cancelled
+      setToken(entered.trim());
+      return true;
+    }
+
+    // Single auth-aware fetch primitive: adds the bearer token via withAuth,
+    // prompts for a token + retries once on 401, returns the raw Response.
+    // ALL dashboard requests route through this (api/apiSoft + the direct
+    // export/delete/test/POST call sites) so none bypass the auth gate. Uses
+    // globalThis.fetch so this is the only place that touches fetch directly.
+    async function apiRaw(path, opts = {}) {
+      let r = await globalThis.fetch(path, withAuth(opts));
+      if (r.status === 401 && promptForToken()) {
+        r = await globalThis.fetch(path, withAuth(opts)); // retry once with the new token
+      }
+      return r;
+    }
     // Tiny fetch helper that surfaces errors as toasts on the page.
     async function api(path, opts = {}) {
-      const r = await fetch(path, opts);
+      const r = await apiRaw(path, opts);
       if (!r.ok && r.status !== 200) {
         let body = '';
         try { body = JSON.stringify(await r.json()); } catch {}
@@ -24,7 +69,7 @@
     // /doctor (503 on issues), /rates/validate (422), /config/validate (422)
     // endpoints where a non-200 carries a meaningful payload, not an error.
     async function apiSoft(path, opts = {}) {
-      const r = await fetch(path, opts);
+      const r = await apiRaw(path, opts);
       let body = null;
       try { body = await r.json(); } catch {}
       return { status: r.status, ok: r.ok, body };
@@ -155,27 +200,18 @@
           const tagAgent = s.agentName
             ? `<span class="pill" style="background:rgba(217,179,90,0.18);color:var(--accent);">@${escHtml(s.agentName)}</span>`
             : '';
-          const trajBtn = s.trajectoryId
-            ? `<button class="btn btn-secondary btn-sm" data-action="trajectory" data-traj="${escHtml(s.trajectoryId)}">Trajectory</button>`
-            : '';
           div.innerHTML = `<div class="name">${escHtml(id)}</div>
             <div class="dim">${turns ? turns + ' turns' : ''}</div>
             ${tagTrained}${tagAgent}
             <div class="dim row-actions">${escHtml(updated)}</div>
             <button class="btn btn-secondary btn-sm" data-action="view">View</button>
             <button class="btn btn-secondary btn-sm" data-action="export">Export</button>
-            ${trajBtn}
             <button class="btn btn-danger btn-sm" data-action="delete">Delete</button>`;
           div.addEventListener('click', (e) => {
             const btn = e.target.closest('button');
             const action = btn?.dataset.action;
             if (action === 'export') return openSessionExport(id);
             if (action === 'delete') return deleteSession(id);
-            if (action === 'trajectory') {
-              const traj = btn.dataset.traj;
-              window.open('/trajectories/' + encodeURIComponent(traj), '_blank');
-              return;
-            }
             return openSessionDetail(id);
           });
           root.appendChild(div);
@@ -211,7 +247,7 @@
     async function openSessionExport(id) {
       openModal({ title: `Export — ${id}`, bodyHtml: '<div class="empty">Loading…</div>' });
       try {
-        const r = await fetch('/sessions/' + encodeURIComponent(id) + '/export?format=md');
+        const r = await apiRaw('/sessions/' + encodeURIComponent(id) + '/export?format=md');
         const text = await r.text();
         document.getElementById('modal-body').innerHTML = `<pre>${escHtml(text)}</pre>`;
         document.getElementById('modal-foot').innerHTML = `
@@ -225,7 +261,7 @@
     async function deleteSession(id) {
       if (!confirm(`Delete session "${id}"?\nTurn log will be permanently removed.`)) return;
       try {
-        await fetch('/sessions/' + encodeURIComponent(id), { method: 'DELETE' });
+        await apiRaw('/sessions/' + encodeURIComponent(id), { method: 'DELETE' });
         LOADERS.sessions();
       } catch (e) {
         alert('Delete failed: ' + e.message);
@@ -330,7 +366,7 @@
       out.style.color = 'var(--dim)';
       out.textContent = '⏳ synthesizing…';
       try {
-        const r = await fetch('/skills/synth', {
+        const r = await apiRaw('/skills/synth', {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ sessionId: sid }),
@@ -354,7 +390,7 @@
       openModal({ title: `Skill — ${name}`, bodyHtml: '<div class="empty">Loading…</div>' });
       try {
         // GET /skills/<name> returns the markdown body as text/markdown.
-        const r = await fetch('/skills/' + encodeURIComponent(name));
+        const r = await apiRaw('/skills/' + encodeURIComponent(name));
         if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
         const text = await r.text();
         document.getElementById('modal-body').innerHTML = `<pre class="markdown">${escHtml(text)}</pre>`;
@@ -369,7 +405,7 @@
     async function deleteSkill(name) {
       if (!confirm(`Remove skill "${name}"?`)) return;
       try {
-        await fetch('/skills/' + encodeURIComponent(name), { method: 'DELETE' });
+        await apiRaw('/skills/' + encodeURIComponent(name), { method: 'DELETE' });
         LOADERS.skills();
       } catch (e) {
         alert('Delete failed: ' + e.message);
@@ -424,7 +460,7 @@
       out.textContent = '⏳ probing…';
       out.style.color = 'var(--dim)';
       try {
-        const r = await fetch('/providers/' + encodeURIComponent(name) + '/test');
+        const r = await apiRaw('/providers/' + encodeURIComponent(name) + '/test');
         const body = await r.json();
         if (body.ok) {
           out.style.color = 'var(--ok)';
@@ -443,7 +479,7 @@
     async function removeProvider(name) {
       if (!confirm(`Remove custom provider "${name}"?`)) return;
       try {
-        const r = await fetch('/providers/' + encodeURIComponent(name), { method: 'DELETE' });
+        const r = await apiRaw('/providers/' + encodeURIComponent(name), { method: 'DELETE' });
         const body = await r.json();
         if (!r.ok) throw new Error(body.error || `${r.status}`);
         LOADERS.providers();
@@ -496,7 +532,7 @@
       status.style.color = 'var(--dim)';
       status.textContent = 'Saving…';
       try {
-        const r = await fetch('/providers', {
+        const r = await apiRaw('/providers', {
           method: 'POST',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ name, baseUrl, apiKey: apiKey || undefined, defaultModel: defaultModel || undefined }),
@@ -590,7 +626,7 @@
           return `<tr class="clickable" data-wf-id="${escHtml(s.sessionId)}">
             <td><code>${escHtml(s.sessionId)}</code></td>
             <td>${tags.join(' ') || '<span class="dim">—</span>'}</td>
-            <td class="num">${sm.done ?? 0} / ${total}</td>
+            <td class="num">${sm.success ?? 0} / ${total}</td>
             <td class="num">${sm.failed ?? 0}</td>
             <td class="dim">${escHtml(s.updatedAt || s.startedAt || '')}</td>
             <td><button class="btn btn-danger btn-sm" data-action="wf-delete">Delete</button></td>
@@ -618,10 +654,11 @@
       try {
         const r = await api('/workflows/' + encodeURIComponent(id));
         const sm = r.summary || {};
-        const nodes = r.state?.nodeResults || r.nodeResults || {};
+        // GET /workflows/<id> returns the per-node map under `nodes`.
+        const nodes = r.nodes || r.state?.nodes || {};
         const nodeRows = Object.entries(nodes).map(([nid, n]) => {
           const status = (n.status || '').toLowerCase();
-          const pillClass = status === 'failed' ? 'err' : (status === 'done' ? 'ok' : (status === 'running' ? 'warn' : ''));
+          const pillClass = status === 'failed' ? 'err' : (status === 'success' ? 'ok' : (status === 'running' ? 'warn' : ''));
           const dur = n.durationMs != null ? fmtDuration(n.durationMs) : '—';
           const out = String(n.output ?? n.error ?? '');
           const truncated = out.length > 240 ? out.slice(0, 240) + '…' : out;
@@ -634,7 +671,7 @@
         }).join('');
         const summaryHtml = `<div class="grid" style="margin-bottom:14px;">
             <div class="stat"><div class="label">Total</div><div class="value">${sm.total ?? '—'}</div></div>
-            <div class="stat"><div class="label">Done</div><div class="value">${sm.done ?? 0}</div></div>
+            <div class="stat"><div class="label">Done</div><div class="value">${sm.success ?? 0}</div></div>
             <div class="stat"><div class="label">Failed</div><div class="value" style="color:${sm.failed ? 'var(--err)' : 'inherit'}">${sm.failed ?? 0}</div></div>
             <div class="stat"><div class="label">Running</div><div class="value">${sm.running ?? 0}</div></div>
           </div>`;
@@ -653,7 +690,7 @@
     async function deleteWorkflow(id) {
       if (!confirm(`Delete workflow session "${id}"?\nState file will be permanently removed.`)) return;
       try {
-        await fetch('/workflows/' + encodeURIComponent(id), { method: 'DELETE' });
+        await apiRaw('/workflows/' + encodeURIComponent(id), { method: 'DELETE' });
         LOADERS.workflows();
       } catch (e) {
         alert('Delete failed: ' + e.message);
@@ -771,7 +808,7 @@
       status.style.color = 'var(--dim)';
       status.textContent = 'Saving…';
       try {
-        const r = await fetch('/rates/' + encodeURIComponent(key), {
+        const r = await apiRaw('/rates/' + encodeURIComponent(key), {
           method: 'PUT',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify(card),
@@ -795,7 +832,7 @@
     async function deleteRateCard(key) {
       if (!confirm(`Delete rate card "${key}"?`)) return;
       try {
-        const r = await fetch('/rates/' + encodeURIComponent(key), { method: 'DELETE' });
+        const r = await apiRaw('/rates/' + encodeURIComponent(key), { method: 'DELETE' });
         if (!r.ok) {
           const body = await r.json().catch(() => ({}));
           throw new Error(body.error || `${r.status}`);
@@ -890,9 +927,9 @@
     };
 
     async function rebuildIndex() {
-      if (!confirm('Rebuild the FTS5 index? Existing index.db will be deleted and recreated empty.')) return;
+      if (!confirm('Rebuild the FTS5 index? Recall is repopulated from the existing corpus — no stored data is lost.')) return;
       try {
-        const r = await fetch('/index/rebuild', { method: 'POST' });
+        const r = await apiRaw('/index/rebuild', { method: 'POST' });
         const body = await r.json().catch(() => ({}));
         if (!r.ok) { alert('Rebuild failed: ' + (body.error || r.statusText)); return; }
         alert('Index rebuilt. Re-run Doctor to confirm.');
@@ -1010,7 +1047,7 @@
       status.style.color = 'var(--dim)';
       status.textContent = 'Saving…';
       try {
-        const r = await fetch('/config/' + encodeURIComponent(key), {
+        const r = await apiRaw('/config/' + encodeURIComponent(key), {
           method: 'PUT',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({ value }),
@@ -1034,7 +1071,7 @@
     async function deleteConfigKey(key) {
       if (!confirm(`Delete config key "${key}"?`)) return;
       try {
-        const r = await fetch('/config/' + encodeURIComponent(key), { method: 'DELETE' });
+        const r = await apiRaw('/config/' + encodeURIComponent(key), { method: 'DELETE' });
         if (!r.ok) {
           const body = await r.json().catch(() => ({}));
           throw new Error(body.error || `${r.status}`);
@@ -1160,7 +1197,7 @@
               <td>${Array.isArray(t.turns) ? t.turns.length : 0}</td>
               <td><span class="dim">${escapeHtml((t.createdAt || '').slice(0, 19))}</span></td>
               <td>
-                ${t.status === 'running' || t.status === 'pending'
+                ${t.status === 'running' || t.status === 'pending' || t.status === 'paused'
                   ? `<button class="btn btn-secondary" onclick="closeTask('${encodeURIComponent(t.id)}','done')">Mark done</button>
                      <button class="btn btn-secondary" onclick="closeTask('${encodeURIComponent(t.id)}','abandon')">Abandon</button>`
                   : ''}
@@ -1275,7 +1312,7 @@
       out.textContent = '⏳ testing…';
       out.style.color = 'var(--dim)';
       try {
-        const r = await fetch('/sandbox/' + encodeURIComponent(name) + '/test', { method: 'POST' });
+        const r = await apiRaw('/sandbox/' + encodeURIComponent(name) + '/test', { method: 'POST' });
         const body = await r.json().catch(() => ({}));
         if (body.ok) {
           out.style.color = 'var(--ok)';
@@ -1291,7 +1328,7 @@
     }
     async function sandboxUse(name) {
       try {
-        const r = await fetch('/sandbox/use', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name }) });
+        const r = await apiRaw('/sandbox/use', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name }) });
         if (!r.ok) { const e = await r.json().catch(() => ({})); alert('Failed: ' + (e.error || r.statusText)); return; }
         LOADERS.sandbox();
       } catch (e) { alert('Failed: ' + e.message); }
@@ -1321,6 +1358,232 @@
       }
     };
 
+    // ── Team Live tab ─────────────────────────────────────────────
+    // Real-time view of an agent team: avatar tiles with status rings +
+    // harness badges, click-to-drill-down, and live A→B delegation pulses,
+    // driven by the GET /events SSE stream (read via fetch so the bearer token
+    // still rides in the Authorization header — EventSource cannot set headers).
+    const TEAM = { team: null, agentsById: {}, status: {}, activity: {}, task: null, selected: null, streaming: false };
+
+    function harnessLabel(rec) {
+      const p = (rec && rec.provider) || '?';
+      const m = (rec && rec.model) || '';
+      return m ? `${p} · ${m}` : p;
+    }
+    function avatarGlyph(rec) {
+      if (rec && rec.iconEmoji) return rec.iconEmoji;
+      return (((rec && rec.name) || '?').slice(0, 1)).toUpperCase();
+    }
+    // Map an agent to one of the 20 pixel-art role avatars (web/avatars/NN.png).
+    // Explicit agent.avatar (1..20) wins; otherwise infer from name/role/tags by
+    // keyword (specific roles first so "data engineer" beats "data"); else PM.
+    const AVATAR_ROLES = [
+      [2, ['backend', 'back-end', 'back end', '백엔드', 'server', 'api']],
+      [3, ['frontend', 'front-end', 'front end', '프론트', 'react', 'vue', 'css']],
+      [7, ['data engineer', 'data-engineer', 'dataeng', '데이터 엔지니어', '데이터엔지니어', 'etl', 'pipeline']],
+      [4, ['devops', 'infra', '인프라', '데브옵스', 'sre', 'kubernetes', 'k8s', 'ops']],
+      [5, ['qa', 'tester', 'test engineer', '테스트', '품질', 'quality']],
+      [6, ['analyst', 'analytics', '분석', 'bi']],
+      [8, ['research', '리서치', '조사', 'scholar']],
+      [9, ['ux', 'ui design', 'designer', '디자이너', '디자인', 'design']],
+      [10, ['copywriter', 'copy', 'content writer', '카피', '콘텐츠', 'writer']],
+      [11, ['marketer', 'marketing', 'growth', '마케터', '마케팅', '그로스']],
+      [12, ['seo']],
+      [13, ['sales', '영업', '세일즈']],
+      [14, ['support', 'customer', '고객', 'cs ', 'helpdesk']],
+      [15, ['legal', 'compliance', '법무', '컴플라이언스']],
+      [16, ['finance', 'account', '재무', '회계']],
+      [17, ['security', '보안', 'sec ', 'infosec', 'appsec']],
+      [18, ['tech writer', 'documentation', 'docs', '테크니컬', '문서']],
+      [19, ['code review', 'reviewer', '리뷰', '코드 리뷰']],
+      [20, ['orchestrat', '오케스트레이터', '코디네이터', '총괄', 'conductor']],
+      [1, ['pm', 'product', 'planner', '기획', 'manager', 'coordinator', 'lead']],
+    ];
+    function avatarIndexFor(rec) {
+      const explicit = rec && Number(rec.avatar);
+      if (explicit >= 1 && explicit <= 20) return explicit;
+      const hay = [rec && rec.name, rec && rec.displayName, rec && rec.role, ...(rec && rec.tags || [])]
+        .filter(Boolean).join(' ').toLowerCase();
+      for (const [idx, keys] of AVATAR_ROLES) {
+        if (keys.some((k) => hay.includes(k))) return idx;
+      }
+      return 1; // generic PM look
+    }
+    function avatarSrc(rec) { return `/avatars/${String(avatarIndexFor(rec)).padStart(2, '0')}.png`; }
+    // Build the { name, children[] } tree rooted at the lead (mirrors teamTree).
+    function buildTeamTree(team, byId) {
+      const lead = team.lead;
+      const members = team.agents || [];
+      const kids = {};
+      for (const n of members) {
+        if (n === lead) continue;
+        const rec = byId[n];
+        const mgr = rec && rec.manager && members.includes(rec.manager) && rec.manager !== n ? rec.manager : lead;
+        (kids[mgr] = kids[mgr] || []).push(n);
+      }
+      const build = (name, seen) => {
+        if (seen.has(name)) return null;
+        const next = new Set(seen); next.add(name);
+        return { name, children: (kids[name] || []).sort().map((c) => build(c, next)).filter(Boolean) };
+      };
+      return build(lead, new Set());
+    }
+    function renderAgentTile(name) {
+      const rec = TEAM.agentsById[name] || { name };
+      const st = TEAM.status[name] || 'idle';
+      const btn = document.createElement('button');
+      btn.className = `tagent ${st}`;
+      btn.dataset.agent = name;
+      btn.setAttribute('role', 'treeitem');
+      btn.setAttribute('aria-selected', String(TEAM.selected === name));
+      btn.innerHTML =
+        `<div class="tagent-avatar" aria-hidden="true"><span class="tagent-glyph">${escapeHtml(avatarGlyph(rec))}</span><img src="${avatarSrc(rec)}" alt="" onerror="this.remove()"></div>` +
+        `<div class="tagent-name">${escapeHtml(rec.displayName || name)}</div>` +
+        `<div class="tagent-status">${st === 'working' ? '● working' : '○ idle'}</div>` +
+        `<div class="harness-badge">${escapeHtml(harnessLabel(rec))}</div>`;
+      btn.addEventListener('click', () => selectTeamAgent(name));
+      return btn;
+    }
+    function renderTeamCanvas() {
+      const canvas = document.getElementById('team-canvas');
+      if (!canvas) return;
+      if (!TEAM.team) { canvas.innerHTML = '<div class="empty">No team selected.</div>'; return; }
+      const tree = buildTeamTree(TEAM.team, TEAM.agentsById);
+      canvas.innerHTML = '';
+      if (!tree) { canvas.innerHTML = '<div class="empty">This team has no lead.</div>'; return; }
+      const leadRow = document.createElement('div'); leadRow.className = 'team-row';
+      leadRow.appendChild(renderAgentTile(tree.name));
+      canvas.appendChild(leadRow);
+      const flat = [];
+      (function walk(n) { for (const c of n.children) { flat.push(c.name); walk(c); } })(tree);
+      if (flat.length) {
+        const wrap = document.createElement('div'); wrap.className = 'team-children';
+        const row = document.createElement('div'); row.className = 'team-row';
+        for (const n of flat) row.appendChild(renderAgentTile(n));
+        wrap.appendChild(row);
+        canvas.appendChild(wrap);
+      }
+    }
+    function selectTeamAgent(name) {
+      TEAM.selected = name;
+      document.querySelectorAll('#team-canvas .tagent').forEach((el) => {
+        el.setAttribute('aria-selected', String(el.dataset.agent === name));
+      });
+      renderTeamDetail();
+    }
+    function renderTeamDetail() {
+      const panel = document.getElementById('team-detail');
+      if (!panel) return;
+      const name = TEAM.selected;
+      if (!name) { panel.innerHTML = '<div class="empty">Click an agent to see its harness and what it\'s working on.</div>'; return; }
+      const rec = TEAM.agentsById[name] || { name };
+      const st = TEAM.status[name] || 'idle';
+      const acts = (TEAM.activity[name] || []).slice(-8).reverse();
+      panel.innerHTML =
+        `<h3><img class="detail-avatar" src="${avatarSrc(rec)}" alt="" onerror="this.remove()">${escapeHtml(rec.displayName || name)} <span class="tagent-status ${st}">${st === 'working' ? '● working' : '○ idle'}</span></h3>` +
+        `<div class="kv"><span class="label">harness</span><div><span class="harness-badge">${escapeHtml(harnessLabel(rec))}</span></div></div>` +
+        `<div class="kv"><span class="label">role</span><div class="dim">${escapeHtml((rec.role || '').slice(0, 120) || '(none)')}</div></div>` +
+        `<div class="kv"><span class="label">current task</span><div>${escapeHtml(TEAM.task || '(idle)')}</div></div>` +
+        `<div class="kv"><span class="label">recent activity</span>` +
+          (acts.length ? acts.map((a) => `<div class="activity">▸ ${escapeHtml(a)}</div>`).join('') : '<div class="dim">no activity yet</div>') +
+        '</div>';
+    }
+    function teamFeedAdd(html) {
+      const ul = document.getElementById('team-feed');
+      if (!ul) return;
+      const li = document.createElement('li');
+      li.innerHTML = html;
+      ul.prepend(li);
+      while (ul.children.length > 40) ul.removeChild(ul.lastChild);
+    }
+    function pulseAgent(name) {
+      const el = document.querySelector(`#team-canvas .tagent[data-agent="${CSS.escape(name)}"]`);
+      if (!el) return;
+      el.classList.add('delegating');
+      setTimeout(() => el.classList.remove('delegating'), 950);
+    }
+    function inThisTeam(name) { return !!(TEAM.team && (TEAM.team.agents || []).includes(name)); }
+    function setAgentStatus(name, status) {
+      TEAM.status[name] = status === 'working' ? 'working' : 'idle';
+      const el = document.querySelector(`#team-canvas .tagent[data-agent="${CSS.escape(name)}"]`);
+      if (el) {
+        el.classList.toggle('working', status === 'working');
+        el.classList.toggle('idle', status !== 'working');
+        const s = el.querySelector('.tagent-status');
+        if (s) s.textContent = status === 'working' ? '● working' : '○ idle';
+      }
+      if (TEAM.selected === name) renderTeamDetail();
+    }
+    function onTeamEvent(type, d) {
+      if (type === 'task.start') { TEAM.task = d.title || '(task)'; teamFeedAdd(`<span class="who">task</span> started: ${escapeHtml(d.title || '')}`); renderTeamDetail(); return; }
+      if (type === 'task.done') { TEAM.task = null; teamFeedAdd(`<span class="who">task</span> ${escapeHtml(d.status || 'done')}`); renderTeamDetail(); return; }
+      if (type === 'agent.status' && inThisTeam(d.agent)) { setAgentStatus(d.agent, d.status); return; }
+      if (type === 'turn.start' && inThisTeam(d.agent)) { (TEAM.activity[d.agent] = TEAM.activity[d.agent] || []).push('turn started'); if (TEAM.selected === d.agent) renderTeamDetail(); return; }
+      if (type === 'tool.call' && inThisTeam(d.agent)) {
+        (TEAM.activity[d.agent] = TEAM.activity[d.agent] || []).push(`tool: ${d.tool}${d.ok === false ? ' ✗' : ''}`);
+        teamFeedAdd(`<span class="who">${escapeHtml(d.agent)}</span> ${escapeHtml(d.tool)}${d.ok === false ? ' ✗' : ''}`);
+        if (TEAM.selected === d.agent) renderTeamDetail();
+        return;
+      }
+      if (type === 'delegate' && (inThisTeam(d.from) || inThisTeam(d.to))) {
+        teamFeedAdd(`<span class="who">${escapeHtml(d.from || '?')}</span> <span class="arrow">→</span> <span class="who">${escapeHtml(d.to || '?')}</span>`);
+        if (inThisTeam(d.to)) pulseAgent(d.to);
+      }
+    }
+    async function startTeamStream() {
+      if (TEAM.streaming) return;
+      TEAM.streaming = true;
+      const conn = document.getElementById('team-conn');
+      try {
+        const r = await apiRaw('/events', {});
+        if (!r.ok || !r.body) { if (conn) conn.textContent = '○ events unavailable'; TEAM.streaming = false; return; }
+        if (conn) conn.textContent = '● live';
+        const reader = r.body.getReader();
+        const dec = new TextDecoder();
+        let buf = '';
+        for (;;) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buf += dec.decode(value, { stream: true });
+          let i;
+          while ((i = buf.indexOf('\n\n')) >= 0) {
+            const frame = buf.slice(0, i); buf = buf.slice(i + 2);
+            let ev = 'message', data = '';
+            for (const line of frame.split('\n')) {
+              if (line.startsWith('event:')) ev = line.slice(6).trim();
+              else if (line.startsWith('data:')) data += line.slice(5).trim();
+            }
+            if (data) { try { onTeamEvent(ev, JSON.parse(data)); } catch (_) { /* skip bad frame */ } }
+          }
+        }
+      } catch (_) {
+        if (conn) conn.textContent = '○ disconnected';
+      }
+      TEAM.streaming = false;
+    }
+    LOADERS.team = async function loadTeam() {
+      const sel = document.getElementById('team-select');
+      try {
+        const [teams, agents] = await Promise.all([api('/teams'), api('/agents')]);
+        const byId = {}; for (const a of agents) byId[a.name] = a;
+        if (!teams.length) {
+          document.getElementById('team-canvas').innerHTML = '<div class="empty">No teams yet — create one in the Teams tab.</div>';
+          return;
+        }
+        const cur = sel.value || teams[0].name;
+        sel.innerHTML = teams.map((t) => `<option value="${escapeHtml(t.name)}">${escapeHtml(t.displayName || t.name)}</option>`).join('');
+        sel.value = teams.some((t) => t.name === cur) ? cur : teams[0].name;
+        if (!sel._wired) { sel.addEventListener('change', () => LOADERS.team()); sel._wired = true; }
+        TEAM.team = teams.find((t) => t.name === sel.value) || teams[0];
+        TEAM.agentsById = byId;
+        renderTeamCanvas();
+        renderTeamDetail();
+        startTeamStream(); // idempotent — one persistent SSE reader
+      } catch (e) {
+        document.getElementById('team-canvas').innerHTML = `<div class="empty">Error: ${escapeHtml(e.message)}</div>`;
+      }
+    };
+
     // First load = chat tab.
     LOADERS.chat();
 

package/workflow/builtin_caps.mjs

@@ -0,0 +1,94 @@
+// workflow/builtin_caps.mjs — side-effecting workflow node types, granted via
+// capability injection. compileWorkflow only ships the safe no-I/O types
+// (set/template); the runner (daemon/CLI) opts a workflow into real power by
+// passing these as caps.nodeTypes. Each factory takes its primitive (fetch,
+// provider, …) so a workflow can never reach ambient I/O on its own.
+
+import { isSafeUrl } from '../mas/tools/web.mjs';
+import { spawnSyncSandboxed } from '../sandbox.mjs';
+import { scrubEnv } from '../mas/scrub_env.mjs';
+
+// http: { url, method?, headers?, body?, json? } → { status, ok, body|json }.
+// SSRF-guarded with the same policy as the web tool (loopback / RFC1918 /
+// link-local / non-http(s) are rejected, incl. DNS-rebind via resolution).
+export function httpNode({ fetchImpl = globalThis.fetch, isSafe = isSafeUrl, maxBytes = 5_000_000 } = {}) {
+  return async (cfg, ctx) => {
+    const url = String(cfg?.url || '');
+    if (!url) throw new Error('http node: url is required');
+    const safe = await isSafe(url);
+    if (!safe || !safe.ok) throw new Error(`http node: ${safe?.error || 'blocked url'}`);
+    const init = { method: cfg.method || 'GET', headers: cfg.headers || {}, signal: ctx?.signal };
+    if (cfg.body != null) init.body = typeof cfg.body === 'string' ? cfg.body : JSON.stringify(cfg.body);
+    const res = await fetchImpl(url, init);
+    const text = await res.text();
+    const out = { status: res.status, ok: !!res.ok };
+    if (cfg.json) { try { out.json = JSON.parse(text); } catch { out.json = null; } }
+    else out.body = text.length > maxBytes ? text.slice(0, maxBytes) : text;
+    return out;
+  };
+}
+
+// llm: { prompt, system?, model? } → the assistant's full text. `provider` is a
+// lazyclaw provider (sendMessage yields text chunks).
+export function llmNode({ provider, apiKey, model: defaultModel } = {}) {
+  return async (cfg, ctx) => {
+    if (!provider || typeof provider.sendMessage !== 'function') throw new Error('llm node: no provider granted');
+    const messages = [];
+    if (cfg?.system) messages.push({ role: 'system', content: String(cfg.system) });
+    messages.push({ role: 'user', content: String(cfg?.prompt ?? '') });
+    let out = '';
+    for await (const chunk of provider.sendMessage(messages, { apiKey, model: cfg?.model || defaultModel, signal: ctx?.signal })) {
+      out += chunk;
+    }
+    return out;
+  };
+}
+
+// shell: { command } or { bin, args[] } → { code, stdout, stderr }. Runs through
+// spawnSyncSandboxed (confined by `sandbox`) with a SCRUBBED env (the snippet
+// can't read API keys), argv as an ARRAY (no shell-string injection). This is a
+// powerful capability — it is NEVER granted by the daemon route (run_request),
+// only by a CLI / trusted runner that opts in via buildCaps({ shell: ... }).
+export function shellNode({ spawnSyncImpl = spawnSyncSandboxed, sandbox = null, env, timeoutMs = 30_000, maxBuffer = 10 * 1024 * 1024 } = {}) {
+  return (cfg, ctx) => {
+    const bin = cfg?.bin || 'sh';
+    const args = Array.isArray(cfg?.args) ? cfg.args.map(String) : ['-c', String(cfg?.command ?? '')];
+    const r = spawnSyncImpl(sandbox, bin, args, {
+      encoding: 'utf8',
+      env: env || scrubEnv(process.env),
+      timeout: Number.isFinite(cfg?.timeoutMs) ? cfg.timeoutMs : timeoutMs,
+      maxBuffer,
+      signal: ctx?.signal,
+    });
+    return { code: r?.status ?? null, stdout: r?.stdout || '', stderr: r?.stderr || '' };
+  };
+}
+
+// channel-send: { to | threadId, text } → { ts, ok }. The sender is INJECTED and
+// already started — the node never constructs a channel client itself (no
+// ambient I/O, no per-node socket). CLI / trusted runners only.
+export function channelSendNode({ sender } = {}) {
+  return async (cfg) => {
+    if (!sender || typeof sender.send !== 'function') throw new Error('channel-send node: no sender granted');
+    const to = cfg?.to ?? cfg?.threadId;
+    if (!to) throw new Error('channel-send node: "to" (channel/thread) is required');
+    const opts = {};
+    if (cfg.username) opts.username = cfg.username;
+    if (cfg.icon_emoji) opts.icon_emoji = cfg.icon_emoji;
+    const res = await sender.send(String(to), String(cfg.text ?? ''), opts);
+    return { ts: res?.ts || null, ok: true };
+  };
+}
+
+// Assemble caps.nodeTypes from a grants object. Only granted types appear, so a
+// caller that grants nothing gets the safe built-ins only. http/llm are safe
+// enough for the daemon route; shell/channel are CLI/trusted-only.
+//   buildCaps({ http: true|{fetchImpl}, llm: {provider}, shell: {sandbox}, channel: {sender} })
+export function buildCaps(grants = {}) {
+  const nodeTypes = {};
+  if (grants.http) nodeTypes.http = httpNode(grants.http === true ? {} : grants.http);
+  if (grants.llm) nodeTypes.llm = llmNode(grants.llm === true ? {} : grants.llm);
+  if (grants.shell) nodeTypes.shell = shellNode(grants.shell === true ? {} : grants.shell);
+  if (grants.channel) nodeTypes['channel-send'] = channelSendNode(grants.channel === true ? {} : grants.channel);
+  return { nodeTypes };
+}