@aiwuk/team 0.0.0-stage → 5.0.3

package/client/04-tool-cards.js

@@ -0,0 +1,110 @@
+    // ---------- capability_dispatch_plan ----------
+    function DispatchPlanView(props) {
+      const t = props.t;
+      const s = stage(props);
+      const plan = s.data ?? s.args;
+      const mode = plan.mode;
+      const assignments = Array.isArray(plan.assignments) ? plan.assignments : [];
+      const summary = s.state === 'error' ? firstLine(cleanError(s.output))
+        : mode === 'delegate' ? assignments.map(a => a.displayName ?? a.role).filter(Boolean).join(t('common.listSep'))
+        : plan.reason ?? '';
+      const sections = [];
+      if (s.state === 'error') sections.push(errorBody(s, t));
+      else if (s.state === 'ok' && !s.data) sections.push(rawBody(s, t));
+      else {
+        if (plan.analysis) sections.push(section(t('plan.analysis'), h('div', { className: 'ctm-text' }, plan.analysis)));
+        if (plan.boardError) sections.push(section(null, h('p', { className: 'ctm-sub ctm-warn' }, plan.boardError)));
+        if (plan.reason) sections.push(section(t('plan.reason'), h('div', { className: 'ctm-text' }, plan.reason)));
+        if (assignments.length) sections.push(section(t('plan.assignments'), h('div', { className: 'ctm-grid' }, ...assignments.flatMap((a, i) => [
+          h('div', { className: 'ctm-who', key: `w${i}` }, h('span', { className: 'ctm-name' }, a.displayName ?? a.role),
+            h('span', { className: 'ctm-sub' }, [a.displayName ? a.role : null, a.capability, a.model].filter(Boolean).join(' · ')),
+            Array.isArray(a.fallbacks) && a.fallbacks.length ? h('span', { className: 'ctm-sub' }, fmt(t('plan.fallbacks'), { list: a.fallbacks.join(t('common.listSep')) })) : null),
+          h('div', { className: 'ctm-text', key: `t${i}` }, a.task,
+            Array.isArray(a.boardTasks) && a.boardTasks.length ? h('ul', { className: 'ctm-plan-board' }, ...a.boardTasks.map(bt => h('li', { key: bt.id },
+              h('code', null, bt.id), ' ', bt.subject,
+              bt.writeScopes?.length ? h('span', { className: 'ctm-sub' }, ' · ', fmt(t('plan.boardScope'), { list: bt.writeScopes.join(t('common.listSep')) })) : null,
+              bt.blockedBy?.length ? h('span', { className: 'ctm-sub' }, ' · ', fmt(t('plan.boardAfter'), { list: bt.blockedBy.join(t('common.listSep')) })) : null))) : null),
+        ]))));
+        const facts = [];
+        if (plan.freeTools) facts.push(chip(t('free.tools'), t(`tools.${plan.freeTools}`), 'tools'));
+        if (plan.directBudget !== undefined) facts.push(h('span', { className: 'ctm-sub', key: 'budget' }, plan.directBudget === null ? t('plan.unlimited') : fmt(t('plan.budget'), { n: plan.directBudget })));
+        if (plan.next) sections.push(section(t('plan.next'), facts.length ? h('div', { className: 'ctm-chips' }, ...facts) : null, h('div', { className: 'ctm-text ctm-sub' }, plan.next)));
+      }
+      const body = sections.filter(Boolean);
+      const card = h(Card, { tool: 'capability_dispatch_plan', icon: ICONS.plan, title: t('plan.title'), summary, state: s.state, t, inspect: props.inspect,
+        badges: [mode && t(`mode.${mode}`) !== `mode.${mode}` ? badge(t(`mode.${mode}`), mode === 'delegate' ? 'brand' : undefined, 'mode') : null,
+          plan.confirmed?.by === 'user' ? badge(t('confirm.confirmedBy'), 'success', 'confirmed') : null],
+        body: body.length ? body : null });
+      // While the call waits for the user, the confirmation card opens in the dock above the input box (this row is
+      // folded into the turn's steps); without a dock it sits right under this row, already open.
+      if (s.state !== 'running') return card;
+      const direct = mode === 'direct' && s.args.userRequested === true;
+      if (!direct && mode !== 'delegate') return card;
+      if (dockedSessions.has(props.sessionId)) return h('div', { className: 'ctm-dc-wrap' }, card, h('p', { className: 'ctm-sub ctm-dc-pointer' }, t('confirm.docked')));
+      return h('div', { className: 'ctm-dc-wrap' }, card, h(direct ? DirectConfirmCard : DispatchConfirmCard, { sessionId: props.sessionId, callId: props.callId, t }));
+    }
+
+    // ---------- capability_free_task ----------
+    function FreeTaskView(props) {
+      const t = props.t;
+      const s = stage(props);
+      const r = s.data;
+      const subject = s.args.subject || firstLine(s.args.prompt);
+      const changed = Array.isArray(r?.changedFiles) ? r.changedFiles : [];
+      const summary = s.state === 'error' ? firstLine(cleanError(s.output)) : subject;
+      const badges = [];
+      if (r?.model) badges.push(badge(String(r.model).replace(/^opencode\//, ''), 'success', 'model'));
+      if (changed.length) badges.push(badge(fmt(t('free.changedCount'), { n: changed.length }), 'brand', 'changed'));
+      if (r?.skipped?.length) badges.push(badge(`${t('free.skipped')} ${r.skipped.length}`, 'warn', 'skipped'));
+      const sections = [];
+      if (r) {
+        const calls = Array.isArray(r.toolCalls) ? r.toolCalls.length : 0;
+        sections.push(section(null, h('div', { className: 'ctm-chips' },
+          chip(t('free.model'), r.model, 'm'),
+          r.tools ? chip(t('free.tools'), t(`tools.${r.tools}`), 'tl') : null,
+          r.taskId ? chip(t('free.task'), `#${r.taskId}`, 'tk') : null,
+          calls ? chip('', fmt(t('free.calls'), { n: calls }), 'c') : null)));
+        if (r.skipped?.length) sections.push(section(t('free.skipped'), h('ul', { className: 'ctm-list ctm-warn' }, ...r.skipped.map((x, i) => h('li', { key: i, className: 'ctm-sub ctm-warn' }, x)))));
+        if (changed.length) sections.push(section(t('free.changed'), h('ul', { className: 'ctm-list' }, ...changed.map(file => h('li', { key: file },
+          h('button', { type: 'button', className: 'ctm-link', onClick: () => props.openFile?.(file) }, file))))));
+        if (r.text) sections.push(section(t('free.result'), h('pre', { className: 'ctm-pre' }, r.text)));
+      } else if (s.state === 'error') sections.push(errorBody(s, t));
+      else if (s.state === 'ok') sections.push(rawBody(s, t));
+      if (s.args.prompt) sections.push(section(t('free.prompt'), h('pre', { className: 'ctm-pre ctm-sub', 'data-short': '' }, s.args.prompt)));
+      const body = sections.filter(Boolean);
+      return h(Card, { tool: 'capability_free_task', icon: ICONS.free, title: t('free.title'), summary, state: s.state, t, inspect: props.inspect, badges, body: body.length ? body : null });
+    }
+
+    // ---------- capability_team_read / capability_team_save ----------
+    function rolesGrid(roles, t) {
+      return h('div', { className: 'ctm-grid3' }, ...roles.flatMap((r, i) => [
+        h('div', { className: 'ctm-who', key: `n${i}` }, h('span', { className: 'ctm-name' }, r.displayName ?? r.id), h('span', { className: 'ctm-sub' }, r.id)),
+        h('span', { className: 'ctm-sub', key: `c${i}` }, [r.capability, r.tier].filter(Boolean).join(' · ')),
+        h('div', { className: 'ctm-who', key: `m${i}` },
+          h('span', null, r.provider ? `${r.provider}/${r.model}` : t('team.unassigned')),
+          r.singleModel ? h('span', { className: 'ctm-badge', 'data-tone': 'warn', 'data-single-model': '' }, t('roles.singleModel')) : null,
+          Array.isArray(r.fallbacks) && r.fallbacks.length ? h('span', { className: 'ctm-sub' }, fmt(t('team.fallbacks'), { n: r.fallbacks.length })) : null),
+      ]));
+    }
+    function teamView(kind) {
+      return function TeamView(props) {
+        const t = props.t;
+        const s = stage(props);
+        const d = s.data;
+        const roles = Array.isArray(d?.roles) ? d.roles : [];
+        const summary = s.state === 'error' ? firstLine(cleanError(s.output))
+          : !d ? ''
+          : kind === 'save' ? fmt(t('team.saved'), { rev: d.revision })
+          : fmt(t('team.summary'), { name: d.effective?.name ?? '', rev: d.revision, n: roles.length });
+        const sections = [];
+        if (d) {
+          if (roles.length) sections.push(section(t('team.roles'), rolesGrid(roles, t)));
+          if (d.coolingRoutes?.length) sections.push(section(t('team.cooling'), h('div', { className: 'ctm-text ctm-warn' }, d.coolingRoutes.map(c => typeof c === 'string' ? c : JSON.stringify(c)).join('\n'))));
+          if (d.project) sections.push(section(t('team.project'), h('span', { className: 'ctm-sub' }, d.project)));
+        } else sections.push(errorBody(s, t) ?? rawBody(s, t));
+        const body = sections.filter(Boolean);
+        return h(Card, { tool: `capability_team_${kind}`, icon: ICONS.team, title: t(kind === 'save' ? 'team.saveTitle' : 'team.readTitle'), summary,
+          summaryTone: kind === 'save' && d ? '' : undefined, state: s.state, t, inspect: props.inspect, body: body.length ? body : null,
+          badges: kind === 'save' && d?.saved ? [badge('✓', 'success', 'ok')] : [] });
+      };
+    }

package/client/04a-dispatch-confirm.js

@@ -0,0 +1,162 @@
+    // ---------- dispatch confirmation card ----------
+    // Shown under a running capability_dispatch_plan call: the user checks each role's model and up to three
+    // fallbacks, edits them, and confirms or cancels. Answers go to api/capability-team.dispatch-confirm;
+    // the tool keeps waiting until then, so nobody is dispatched before the user decides.
+    const CONFIRM_PATH = 'api/capability-team.dispatch-confirm';
+    const CONFIRM_HEARTBEAT_MS = 5000; // keep polling while pending so the tool knows the card is still on screen
+    const rkey = r => (r ? `${r.provider}/${r.model}` : '');
+    function usePendingConfirm(sessionId, callId, reload) {
+      const [view, setView] = React.useState(null); // null loading · {status:'stale'|'gone'} · pending view
+      React.useEffect(() => {
+        if (!sessionId || !callId) return undefined;
+        const ctrl = typeof AbortController === 'function' ? new AbortController() : null;
+        let tries = 0, timer = null, live = true, wasPending = false;
+        const again = ms => { timer = setTimeout(load, ms); };
+        const load = async () => {
+          timer = null;
+          try {
+            const res = await fetch(apiUrl(CONFIRM_PATH, { sessionId, callId }), { signal: ctrl?.signal });
+            const body = res.ok ? await res.json() : null;
+            if (!live) return;
+            // Pending: show it once (refresh only when the native question box takes over), keep polling as a heartbeat.
+            if (body?.status === 'pending') { setView(v => (wasPending && v?.status === 'pending' && v.native === body.native ? v : body)); wasPending = true; again(CONFIRM_HEARTBEAT_MS); return; }
+            // It was pending and is gone now: answered here or in the question box, or ended on the server.
+            if (wasPending) { setView(v => (v?.status === 'pending' ? { status: 'gone' } : v)); return; }
+            // The tool registers its request right after it starts; retry briefly before giving up.
+            if (++tries < 6) { again(500); return; }
+            // The call is still running but has no request: the plugin reloaded or the request expired.
+            setView({ status: 'stale' });
+          } catch (e) {
+            if (!live || e?.name === 'AbortError') return;
+            if (wasPending) again(CONFIRM_HEARTBEAT_MS); else setView({ status: 'stale' });
+          }
+        };
+        load();
+        return () => { live = false; ctrl?.abort(); if (timer) clearTimeout(timer); };
+      }, [sessionId, callId, reload]);
+      return [view, setView];
+    }
+    // Shown when the Lead asks to finish the user's request itself: allowing lifts its step limit until the next message.
+    function DirectConfirmCard({ sessionId, callId, t }) {
+      const [view] = usePendingConfirm(sessionId, callId, 0);
+      const [busy, setBusy] = React.useState(false);
+      const [error, setError] = React.useState(null);
+      const [sent, setSent] = React.useState(null);
+      if (sent) return h('div', { className: 'ctm-dc', 'data-state': 'sent' }, h('span', { className: 'ctm-sub' }, t(sent === 'cancel' ? 'direct.cancelled' : 'direct.sent')));
+      if (!view) return h('div', { className: 'ctm-dc' }, h('span', { className: 'ctm-sub' }, t('direct.loading')));
+      if (view.status === 'stale') return h('div', { className: 'ctm-dc', 'data-state': 'stale' }, h('p', { className: 'ctm-sub ctm-warn', role: 'alert' }, t('direct.stale')));
+      if (view.status !== 'pending') return null;
+      if (view.native) return h('div', { className: 'ctm-dc', 'data-state': 'native' }, h('span', { className: 'ctm-sub' }, t('direct.native')));
+      const submit = async decision => {
+        setBusy(true); setError(null);
+        try {
+          const res = await fetch(apiUrl(CONFIRM_PATH), { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sessionId, callId, decision }) });
+          if (res.ok) setSent(decision); else setError(t('confirm.error.other'));
+        } catch { setError(t('confirm.error.other')); }
+        finally { setBusy(false); }
+      };
+      return h('div', { className: 'ctm-dc', role: 'group', 'aria-label': t('direct.title') },
+        h('div', { className: 'ctm-dc-head' },
+          h('strong', { className: 'ctm-dc-title' }, t('direct.title')),
+          h('span', { className: 'ctm-sub' }, t('direct.hint'))),
+        view.reason ? h('p', { className: 'ctm-text' }, view.reason) : null,
+        h('div', { className: 'ctm-dc-foot' },
+          error ? h('p', { className: 'ctm-sub ctm-warn', role: 'alert' }, error) : null,
+          h('div', { className: 'ctm-dc-buttons' },
+            h('button', { type: 'button', className: 'ctm-btn', disabled: busy, onClick: () => submit('cancel') }, t('direct.deny')),
+            h('button', { type: 'button', className: 'ctm-btn', 'data-primary': '', disabled: busy, onClick: () => submit('confirm') }, t('direct.allow')))));
+    }
+    function DispatchConfirmCard({ sessionId, callId, t }) {
+      const [reload, setReload] = React.useState(0);
+      const [view, setView] = usePendingConfirm(sessionId, callId, reload);
+      const [edits, setEdits] = React.useState({}); // role → { primary, fallbacks }
+      const [scope, setScope] = React.useState('task');
+      const [busy, setBusy] = React.useState(false);
+      const [error, setError] = React.useState(null);
+      const [sent, setSent] = React.useState(null);
+      const [expanded, setExpanded] = React.useState({}); // role → task text shown in full
+      if (sent) return h('div', { className: 'ctm-dc', 'data-state': 'sent' }, h('span', { className: 'ctm-sub' }, t(sent === 'cancel' ? 'confirm.cancelled' : 'confirm.sent')));
+      if (!view) return h('div', { className: 'ctm-dc' }, h('span', { className: 'ctm-sub' }, t('confirm.loading')));
+      if (view.status === 'stale') return h('div', { className: 'ctm-dc', 'data-state': 'stale' }, h('p', { className: 'ctm-sub ctm-warn', role: 'alert' }, t('confirm.stale')));
+      if (view.status !== 'pending') return null; // Answered in the question box or ended on the server.
+      if (view.native) return h('div', { className: 'ctm-dc', 'data-state': 'native' }, h('span', { className: 'ctm-sub' }, t('confirm.native')));
+      const max = view.maxFallbacks ?? 3;
+      const current = r => edits[r.role] ?? { primary: rkey(r.primary), fallbacks: r.fallbacks.map(rkey) };
+      const isCrossTier = (r, route) => r.candidates.some(candidate => rkey(candidate) === route && candidate.sameTier === false);
+      const hasCrossTier = view.routes.some(r => [current(r).primary, ...current(r).fallbacks].some(route => isCrossTier(r, route)));
+      const effectiveScope = hasCrossTier ? 'task' : scope;
+      const update = (r, change) => { setEdits(prev => ({ ...prev, [r.role]: { ...current(r), ...change } })); setScope('task'); };
+      const move = (list, i, d) => { const next = [...list]; const j = i + d; if (j < 0 || j >= next.length) return list; [next[i], next[j]] = [next[j], next[i]]; return next; };
+      const submit = async decision => {
+        setBusy(true); setError(null);
+        try {
+          const routes = view.routes.map(r => ({ role: r.role, ...current(r) }));
+          const res = await fetch(apiUrl(CONFIRM_PATH), { method: 'POST', headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ sessionId, callId, decision, scope: effectiveScope, catalogVersion: view.catalogVersion, routes }) });
+          if (res.ok) { setSent(decision); return; }
+          const body = await res.json().catch(() => ({}));
+          if (res.status === 409) { setError(t('confirm.error.conflict')); setEdits({}); setView(null); setReload(n => n + 1); return; }
+          setError(res.status === 422 ? `${t('confirm.error.invalid')} ${String(body.message ?? '')}` : t('confirm.error.other'));
+        } catch { setError(t('confirm.error.other')); }
+        finally { setBusy(false); }
+      };
+      const changedCaps = view.routes.filter(r => { const c = current(r); return c.primary !== rkey(r.primary) || c.fallbacks.join() !== r.fallbacks.map(rkey).join(); }).map(r => r.capability);
+      const row = r => {
+        const c = current(r);
+        const options = [...new Set([c.primary, ...r.candidates.map(rkey)])].filter(Boolean);
+        const recommended = r.candidates.filter(candidate => candidate.sameTier).map(rkey);
+        const spare = options.filter(k => k !== c.primary && !c.fallbacks.includes(k));
+        const who = r.displayName ?? r.role;
+        const long = r.task && (r.task.length > 120 || r.task.includes('\n'));
+        const iconButton = (glyph, labelKey, f, disabledWhen, onClick) => h('button', { type: 'button', className: 'ctm-dc-icon', disabled: busy || disabledWhen,
+          'aria-label': `${t(labelKey)} ${f}`, title: t(labelKey), onClick }, glyph);
+        return h('section', { key: r.role, className: 'ctm-dc-role', 'aria-label': who },
+          h('header', { className: 'ctm-dc-role-head' },
+            h('span', { className: 'ctm-dc-avatar', 'aria-hidden': true }, Array.from(who)[0] ?? '?'),
+            h('div', { className: 'ctm-dc-who' },
+              h('span', { className: 'ctm-name' }, who),
+              h('span', { className: 'ctm-dc-meta' },
+                h('code', null, r.role), h('span', null, r.capability), badge(label(t, `tier.${r.tier}`, r.tier), 'brand', 'tier'),
+                r.learned?.habit ? badge(fmt(t('confirm.habit'), { n: r.learned.habit.count, of: r.learned.habit.of }), 'success', 'habit') : null))),
+          r.task ? h('div', { className: 'ctm-dc-task' },
+            h('p', { className: 'ctm-text', 'data-clamped': expanded[r.role] ? undefined : '' }, r.task),
+            long ? h('button', { type: 'button', className: 'ctm-dc-link', onClick: () => setExpanded(prev => ({ ...prev, [r.role]: !prev[r.role] })) },
+              t(expanded[r.role] ? 'confirm.collapse' : 'confirm.expand')) : null) : null,
+          h('div', { className: 'ctm-dc-grid' },
+            h('span', { className: 'ctm-label ctm-dc-key' }, t('confirm.primary'), isCrossTier(r, c.primary) ? badge(t('confirm.crossTier'), 'warn', 'cross-tier') : null),
+            h(ModelPicker, { value: c.primary, options, recommended, disabled: busy, t, label: `${who} ${t('confirm.primary')}`, placeholder: t('picker.search'),
+              onChange: k => update(r, { primary: k, fallbacks: c.fallbacks.filter(f => f !== k) }) }),
+            h('span', { className: 'ctm-label ctm-dc-key' }, t('confirm.fallbacks'), h('span', { className: 'ctm-dc-count' }, `${c.fallbacks.length}/${max}`)),
+            h('div', { className: 'ctm-dc-fallbacks' },
+              c.fallbacks.length ? h('ol', { className: 'ctm-dc-list' }, ...c.fallbacks.map((f, i) => h('li', { key: f, className: 'ctm-dc-item' },
+                h('span', { className: 'ctm-dc-index', 'aria-hidden': true }, String(i + 1)),
+                h('span', { className: 'ctm-dc-route', title: f }, f, isCrossTier(r, f) ? badge(t('confirm.crossTierFallback'), 'warn', 'cross-tier') : null, r.learned?.unhealthy?.[f] ? badge(fmt(t('confirm.failing'), { n: r.learned.unhealthy[f] }), 'warn', 'bad') : null),
+                h('span', { className: 'ctm-dc-actions' },
+                  iconButton('↑', 'confirm.up', f, i === 0, () => update(r, { fallbacks: move(c.fallbacks, i, -1) })),
+                  iconButton('↓', 'confirm.down', f, i === c.fallbacks.length - 1, () => update(r, { fallbacks: move(c.fallbacks, i, 1) })),
+                  iconButton('×', 'confirm.remove', f, false, () => update(r, { fallbacks: c.fallbacks.filter(x => x !== f) }))))))
+                : h('span', { className: 'ctm-sub' }, t('confirm.noFallbacks')),
+              c.fallbacks.length < max && spare.length
+                ? h(ModelPicker, { value: '', options: spare, recommended, disabled: busy, t, label: t('confirm.addFallback'), placeholder: t('confirm.addFallback'),
+                  onChange: k => update(r, { fallbacks: [...c.fallbacks, k] }) })
+                : c.fallbacks.length >= max ? h('span', { className: 'ctm-sub' }, fmt(t('confirm.max'), { n: max })) : null)),
+          r.learned?.unhealthy?.[c.primary] ? h('p', { className: 'ctm-sub ctm-warn' }, fmt(t('confirm.primaryFailing'), { route: c.primary, n: r.learned.unhealthy[c.primary] })) : null,
+          r.learned?.habit?.settled && scope === 'task' ? h('p', { className: 'ctm-sub' }, t('confirm.habitSettled')) : null);
+      };
+      return h('div', { className: 'ctm-dc', role: 'group', 'aria-label': t('confirm.title') },
+        h('div', { className: 'ctm-dc-head' },
+          h('strong', { className: 'ctm-dc-title' }, t('confirm.title')),
+          h('span', { className: 'ctm-sub' }, t('confirm.hint'))),
+        h('div', { className: 'ctm-dc-roles' }, ...view.routes.map(row)),
+        h('div', { className: 'ctm-dc-foot' },
+          h('div', { className: 'ctm-dc-scope', role: 'radiogroup', 'aria-label': t('confirm.scope') },
+            h('span', { className: 'ctm-label' }, t('confirm.scope')),
+            h('div', { className: 'ctm-dc-seg' }, ...['task', 'project'].map(s => h('button', { key: s, type: 'button', role: 'radio', 'aria-checked': effectiveScope === s,
+              className: 'ctm-dc-segbtn', disabled: busy || (s === 'project' && hasCrossTier), onClick: () => setScope(s) }, t(`confirm.scope.${s}`)))),
+            hasCrossTier ? h('span', { className: 'ctm-sub ctm-warn' }, t('confirm.crossTierTaskOnly')) : null,
+            effectiveScope === 'project' && changedCaps.length ? h('span', { className: 'ctm-sub ctm-warn' }, fmt(t('confirm.scope.projectHint'), { list: [...new Set(changedCaps)].join(t('common.listSep')) })) : null),
+          error ? h('p', { className: 'ctm-sub ctm-warn', role: 'alert' }, error) : null,
+          h('div', { className: 'ctm-dc-buttons' },
+            h('button', { type: 'button', className: 'ctm-btn', disabled: busy, onClick: () => submit('cancel') }, t('confirm.cancel')),
+            h('button', { type: 'button', className: 'ctm-btn', 'data-primary': '', disabled: busy, onClick: () => submit('confirm') }, t('confirm.ok')))));
+    }

package/client/04b-more-cards.js

@@ -0,0 +1,78 @@
+    // ---------- cards for the remaining JSON tools ----------
+    // Every capability-team tool that answers with JSON gets a card, so the conversation never shows raw JSON.
+    // `valueView` renders any leftover structure as labelled rows and chips instead of a JSON dump.
+    function valueView(v, depth = 0) {
+      if (v === null || v === undefined || v === '') return h('span', { className: 'ctm-sub' }, '—');
+      if (typeof v !== 'object') return h('span', { className: 'ctm-text' }, String(v));
+      if (Array.isArray(v)) {
+        if (!v.length) return h('span', { className: 'ctm-sub' }, '—');
+        if (v.every(x => x === null || typeof x !== 'object')) return h('div', { className: 'ctm-chips' }, ...v.slice(0, 40).map((x, i) => h('span', { key: i, className: 'ctm-chip' }, String(x))));
+        if (depth >= 2) return h('span', { className: 'ctm-sub' }, `${v.length} ×`);
+        return h('div', { className: 'ctm-mc-list' }, ...v.slice(0, 20).map((x, i) => h('div', { key: i, className: 'ctm-mc-item' }, valueView(x, depth + 1))));
+      }
+      const entries = Object.entries(v).filter(([, x]) => x !== undefined);
+      if (depth >= 2) return h('span', { className: 'ctm-sub' }, entries.map(([k, x]) => `${k}: ${typeof x === 'object' && x ? '…' : String(x)}`).join(' · '));
+      return h('div', { className: 'ctm-grid ctm-ov-kv' }, ...entries.flatMap(([k, x]) => [
+        h('span', { key: `k${k}`, className: 'ctm-sub' }, k), h('div', { key: `v${k}`, className: 'ctm-text' }, valueView(x, depth + 1))]));
+    }
+    const routeLabel = r => (r ? `${r.provider ? r.provider + '/' : ''}${r.model ?? ''}` : '');
+    /** One card shape: title, a one-line summary from the data, and a body built from it. */
+    function dataCard(tool, icon, titleKey, summarize, bodyOf) {
+      return function DataCard(props) {
+        const t = props.t;
+        const s = stage(props);
+        const d = s.data;
+        const summary = s.state === 'error' ? firstLine(cleanError(s.output)) : d ? summarize(d, t, s.args) : s.state === 'ok' ? firstLine(s.output) : '';
+        const body = s.state === 'error' ? errorBody(s, t) : d ? bodyOf(d, t) : rawBody(s, t);
+        return h(Card, { tool, icon, title: t(titleKey), summary, state: s.state, t, inspect: props.inspect, body: body ?? null });
+      };
+    }
+    const CatalogView = dataCard('capability_model_catalog', ICONS.team, 'cards.catalog',
+      (d, t) => fmt(t('cards.catalog.summary'), { n: d.entries?.length ?? 0, p: new Set((d.entries ?? []).map(e => e.provider)).size }),
+      (d, t) => {
+        const byProvider = new Map();
+        for (const e of d.entries ?? []) { if (!byProvider.has(e.provider)) byProvider.set(e.provider, []); byProvider.get(e.provider).push(e); }
+        return [...[...byProvider].map(([p, list]) => section(`${p} · ${list.length}`, h('div', { className: 'ctm-chips' },
+          ...list.slice(0, 60).map(e => h('span', { key: e.model, className: 'ctm-chip', title: e.tiers?.join(', ') ?? '' }, e.tiers?.length ? `${e.model} · ${e.tiers.map(x => label(t, `tier.${x}`, x)).join('/')}` : e.model))))),
+          ...(d.errors?.length ? [section(t('cards.catalog.errors'), h('div', { className: 'ctm-text ctm-warn' }, d.errors.map(e => `${e.provider}: ${e.error}`).join('\n')))] : [])];
+      });
+    const leaseSummary = (d, t) => [d.roleId, d.status && label(t, `control.lease.status.${d.status}`, d.status),
+      d.estimatedSteps ? fmt(t('control.steps.label'), { used: d.startsUsed ?? 0, est: d.estimatedSteps }) : null,
+      d.override ? fmt(t('control.override.badge'), { from: routeLabel(d.override.from), to: routeLabel(d.override) }) : null].filter(Boolean).join(' · ');
+    const leaseBody = (d, t) => section(null, valueView({ [t('cards.lease.role')]: d.roleId, [t('cards.lease.status')]: d.status, [t('cards.lease.judgment')]: d.judgment,
+      [t('cards.lease.steps')]: d.estimatedSteps ? `${d.startsUsed ?? 0} / ${d.estimatedSteps}` : undefined,
+      [t('control.override.title')]: d.override ? `${routeLabel(d.override.from)} → ${routeLabel(d.override)}` : t('control.override.none'),
+      [t('cards.lease.ends')]: d.expiresAt ? timeOfDay(d.expiresAt) : undefined, [t('cards.lease.endReason')]: d.endReason ?? undefined }));
+    const BudgetView = dataCard('capability_task_budget', ICONS.plan, 'cards.budget', leaseSummary, leaseBody);
+    const OverrideView = dataCard('capability_member_override', ICONS.plan, 'cards.override', leaseSummary, leaseBody);
+    const ExportView = dataCard('capability_team_export', ICONS.team, 'cards.export',
+      (d, t) => fmt(t('cards.export.summary'), { n: Object.keys(d.roles ?? {}).length, c: Object.keys(d.capabilities ?? {}).length }),
+      d => [section(null, valueView({ format: d.format, version: d.version, name: d.name })),
+        d.roles ? section('roles', valueView(Object.fromEntries(Object.entries(d.roles).map(([id, r]) => [id, `${r.displayName ?? id} · ${r.capability ?? ''}`])))) : null].filter(Boolean));
+    const SearchView = dataCard('omni_search', ICONS.free, 'cards.search',
+      (d, t, args) => fmt(t('cards.search.summary'), { q: d.query ?? args.query ?? '', n: d.results?.length ?? 0 }),
+      d => section(d.engine ?? d.provider ?? null, h('ol', { className: 'ctm-mc-results' }, ...(d.results ?? []).slice(0, 20).map((r, i) => h('li', { key: i },
+        h('span', { className: 'ctm-name' }, r.title ?? r.url), r.url ? h('span', { className: 'ctm-sub' }, r.url) : null,
+        r.snippet || r.content ? h('span', { className: 'ctm-sub' }, firstLine(r.snippet ?? r.content)) : null)))));
+    const FetchView = dataCard('omni_fetch', ICONS.free, 'cards.fetch',
+      (d, t, args) => d.title ?? d.url ?? args.url ?? '',
+      d => section(d.url ?? null, h('div', { className: 'ctm-text' }, String(d.content ?? d.text ?? d.markdown ?? '').slice(0, 1200))));
+    const HandoffView = dataCard('capability_handoff', ICONS.plan, 'cards.handoff',
+      (d, t) => fmt(t('cards.handoff.summary'), { name: d.member ?? '', n: d.facts?.openTasks ?? 0 }),
+      (d, t) => section(null, valueView({ [t('cards.handoff.diff')]: d.facts?.diffStat ? '✓' : '—', [t('cards.handoff.test')]: d.facts?.lastTest ?? '—' })));
+    const RotateView = dataCard('capability_rotate_member', ICONS.team, 'cards.rotate',
+      (d, t) => (d.rotated ? fmt(t('cards.rotate.summary'), { from: d.from, to: d.to }) : d.reason ?? ''),
+      d => [d.next ? section(null, h('pre', { className: 'ctm-pre', 'data-short': '' }, d.next)) : null,
+        d.prompt ? section('prompt', h('div', { className: 'ctm-text ctm-sub' }, d.prompt)) : null].filter(Boolean));
+    const MemorySearchView = dataCard('capability_memory_search', ICONS.plan, 'cards.memorySearch',
+      (d, t, args) => fmt(t('cards.memorySearch.summary'), { q: args.query ?? '', n: d.results?.length ?? 0, mode: t(`cards.memory.mode.${d.mode}`) }),
+      (d, t) => [d.note ? h('p', { className: 'ctm-sub ctm-warn' }, d.note) : null,
+        section(null, h('ol', { className: 'ctm-mc-results' }, ...(d.results ?? []).map(r => h('li', { key: r.id },
+          h('span', { className: 'ctm-sub' }, `${label(t, `cards.memory.kind.${r.kind}`, r.kind)} · ${r.scope}${r.via?.length ? ` · ${r.via.join('+')}` : ''}`),
+          h('span', { className: 'ctm-text' }, r.text)))))].filter(Boolean));
+    const MemoryWriteView = dataCard('capability_memory_write', ICONS.plan, 'cards.memoryWrite',
+      (d, t, args) => `${label(t, `cards.memory.kind.${d.kind}`, d.kind)} · ${d.merged ? t('cards.memoryWrite.merged') : t('cards.memoryWrite.saved')}${firstLine(args.text) ? ` · ${firstLine(args.text)}` : ''}`,
+      () => null);
+    const PrefsView = dataCard('capability_model_prefs', ICONS.plan, 'cards.prefs',
+      (d, t) => (d.cleared ? t('cards.prefs.cleared') : fmt(t('cards.prefs.summary'), { n: Object.keys(d.habits ?? {}).length })),
+      (d, t) => (d.habits ? section(null, valueView(Object.fromEntries(Object.entries(d.habits).map(([cap, hb]) => [cap, `${hb.primary}${hb.fallbacks?.length ? ` → ${hb.fallbacks.join(' → ')}` : ''} · ${hb.count}/${hb.of}`])))) : null));

package/client/04c-model-picker.js

@@ -0,0 +1,68 @@
+    // ---------- searchable model picker ----------
+    // A combobox over "provider/model" routes: type to filter (every space-separated word must match),
+    // arrow keys to move, Enter to pick, Escape to close. Options are grouped by provider.
+    const splitKey = key => { const i = key.indexOf('/'); return i > 0 ? [key.slice(0, i), key.slice(i + 1)] : ['', key]; };
+    /** Routes whose "provider/model" contains every word of the query (case-insensitive). */
+    function filterRoutes(options, query) {
+      const words = String(query ?? '').toLowerCase().split(/\s+/).filter(Boolean);
+      return words.length ? options.filter(k => words.every(w => k.toLowerCase().includes(w))) : options;
+    }
+    let pickerSeq = 0;
+    function ModelPicker({ value, options, recommended = [], onChange, placeholder, label: aria, disabled, t }) {
+      const [open, setOpen] = React.useState(false);
+      const [query, setQuery] = React.useState('');
+      const [active, setActive] = React.useState(0);
+      const idRef = React.useRef(null);
+      const inputRef = React.useRef(null);
+      const [place, setPlace] = React.useState(null); // fixed popup position inside the scrolling confirmation dock
+      // In the dock (a scroll box above the input) an absolute popup would be clipped: pin it to the viewport
+      // instead, span the dock card's full width, and open it upward when there is more room above the field than below it.
+      const measure = () => {
+        const el = inputRef.current;
+        const dock = el?.getBoundingClientRect ? el.closest?.('.ctm-dock') : null;
+        if (!dock) return null;
+        const r = el.getBoundingClientRect(), below = window.innerHeight - r.bottom;
+        const d = dock.getBoundingClientRect?.() ?? r;
+        const base = { position: 'fixed', left: d.left, width: d.width, right: 'auto' };
+        return below < 280 && r.top > below ? { ...base, top: 'auto', bottom: window.innerHeight - r.top + 4 } : { ...base, top: r.bottom + 4 };
+      };
+      const show = () => { if (!open) setPlace(measure()); setOpen(true); };
+      if (!idRef.current) idRef.current = `ctm-mp-${++pickerSeq}`;
+      const id = idRef.current;
+      const ordered = [...options.filter(key => recommended.includes(key)), ...options.filter(key => !recommended.includes(key)).sort((a, b) => splitKey(a)[0].localeCompare(splitKey(b)[0]))];
+      const shown = filterRoutes(ordered, query);
+      const close = () => { setOpen(false); setQuery(''); setActive(0); setPlace(null); };
+      const pick = key => { if (key) onChange(key); close(); };
+      const onKeyDown = event => {
+        if (event.key === 'ArrowDown') { event.preventDefault(); show(); setActive(i => Math.min(i + 1, shown.length - 1)); }
+        else if (event.key === 'ArrowUp') { event.preventDefault(); setActive(i => Math.max(i - 1, 0)); }
+        else if (event.key === 'Enter') { event.preventDefault(); if (open) pick(shown[active]); else show(); }
+        else if (event.key === 'Escape') { if (open) { event.preventDefault(); close(); } }
+        else if (event.key === 'Tab') close();
+      };
+      const groups = [];
+      shown.forEach((key, index) => {
+        const provider = recommended.includes(key) ? t('picker.sameTier') : splitKey(key)[0];
+        if (!groups.length || groups[groups.length - 1].provider !== provider) groups.push({ provider, items: [] });
+        groups[groups.length - 1].items.push({ key, index });
+      });
+      return h('div', { className: 'ctm-mp', 'data-open': open ? '' : undefined },
+        h('input', { ref: inputRef, type: 'text', className: 'ctm-mp-input', role: 'combobox', 'aria-label': aria, 'aria-expanded': open, 'aria-controls': `${id}-list`,
+          'aria-autocomplete': 'list', 'aria-activedescendant': open && shown[active] ? `${id}-${active}` : undefined, disabled, spellCheck: false,
+          value: open ? query : value ?? '', placeholder: open ? (value || placeholder) : placeholder,
+          onFocus: show, onClick: show, onBlur: close,
+          onChange: e => { setQuery(e.target.value); setActive(0); show(); }, onKeyDown }),
+        h('span', { className: 'ctm-mp-caret', 'aria-hidden': true }, '▾'),
+        open ? h('div', { className: 'ctm-mp-pop', style: place ?? undefined },
+          h('div', { className: 'ctm-mp-count ctm-sub' }, fmt(t('picker.count'), { n: shown.length, total: options.length })),
+          shown.length
+            ? h('ul', { id: `${id}-list`, role: 'listbox', className: 'ctm-mp-list' }, ...groups.flatMap(g => [
+              h('li', { key: `g:${g.provider}`, role: 'presentation', className: 'ctm-mp-group' }, g.provider || t('picker.noProvider')),
+              ...g.items.map(({ key, index }) => h('li', { key, id: `${id}-${index}`, role: 'option', 'aria-selected': key === value,
+                className: 'ctm-mp-option', 'data-active': index === active ? '' : undefined,
+                // mousedown keeps focus in the input, so blur does not close the list before the click lands
+                onMouseDown: e => { e.preventDefault(); pick(key); }, onMouseEnter: () => setActive(index) },
+                h('span', { className: 'ctm-mp-model' }, key), key === value ? h('span', { className: 'ctm-mp-check', 'aria-hidden': true }, '✓') : null)),
+            ]))
+            : h('div', { className: 'ctm-mp-empty ctm-sub' }, t('picker.empty'))) : null);
+    }

package/client/04d-confirm-dock.js

@@ -0,0 +1,40 @@
+    // ---------- confirmation dock above the composer ----------
+    // A plan call's own row sits inside the turn's folded steps, so a card there is easy to miss. While the Lead
+    // session runs, the dock asks the server for its latest pending confirmation and shows the card right above
+    // the input box; the plan row then only points here. Sessions that are not Leads answer 404 and stop polling.
+    const DOCK_POLL_MS = 2000; // well inside the server's 8 s grace, so the native question box stays a fallback
+    const dockedSessions = new Set(); // sessions whose conversation shows the dock; plan rows render a pointer there
+    function ConfirmDock({ sessionId, useSession, t }) {
+      const running = typeof useSession === 'function' ? useSession(s => !!s?.running) : true;
+      const [pending, setPending] = React.useState(null); // { callId, kind } of the latest pending request
+      React.useEffect(() => {
+        if (!sessionId) return undefined;
+        dockedSessions.add(sessionId);
+        return () => { dockedSessions.delete(sessionId); };
+      }, [sessionId]);
+      React.useEffect(() => {
+        if (!sessionId || !running) { setPending(null); return undefined; }
+        const ctrl = typeof AbortController === 'function' ? new AbortController() : null;
+        let live = true, timer = null;
+        const poll = async () => {
+          timer = null;
+          try {
+            const res = await fetch(apiUrl(CONFIRM_PATH, { sessionId }), { signal: ctrl?.signal });
+            if (!live) return;
+            if (res.status === 404) { setPending(null); return; } // not a capability-team Lead: nothing to confirm here
+            const body = res.ok ? await res.json() : null;
+            if (!live) return;
+            const next = body?.status === 'pending' && body.callId ? { callId: body.callId, kind: body.kind === 'direct' ? 'direct' : 'dispatch' } : null;
+            setPending(prev => (prev?.callId === next?.callId && prev?.kind === next?.kind ? prev : next));
+          } catch (e) { if (!live || e?.name === 'AbortError') return; }
+          if (live) timer = setTimeout(poll, DOCK_POLL_MS);
+        };
+        poll();
+        return () => { live = false; ctrl?.abort(); if (timer) clearTimeout(timer); };
+      }, [sessionId, running]);
+      if (!pending) return null;
+      const Card = pending.kind === 'direct' ? DirectConfirmCard : DispatchConfirmCard;
+      return h('div', { className: 'ctm-dock', 'data-kind': pending.kind,
+        // A pinned picker popup would drift from its field while the dock scrolls: close it by dropping focus.
+        onScroll: e => { const f = typeof document !== 'undefined' ? document.activeElement : null; if (f && e.currentTarget.contains(f) && f.classList?.contains('ctm-mp-input')) f.blur(); } }, h(Card, { key: pending.callId, sessionId, callId: pending.callId, t }));
+    }