@aiwuk/team 0.0.0-stage → 5.0.3

package/client/08-artifacts-report.js

@@ -0,0 +1,375 @@
+    function ArtifactsRack({ sessionId, liveTeam, live, t }) {
+      const [filterRole, setFilterRole] = React.useState('all');
+      const [diffState, setDiffState] = React.useState({});
+      const [openError, setOpenError] = React.useState(null);
+
+      const AC = typeof AbortController === 'function' ? AbortController : class { constructor() { this.signal = { aborted: false }; } abort() { this.signal.aborted = true; } };
+      const abortRef = React.useRef(null);
+      if (!abortRef.current) abortRef.current = new AC();
+
+      React.useEffect(() => {
+        return () => {
+          if (abortRef.current) {
+            abortRef.current.abort();
+          }
+        };
+      }, []);
+
+      const members = liveTeam?.members ?? [];
+      const roleMap = new Map();
+      for (const m of members) {
+        if (m.id) roleMap.set(m.id, m.role ?? m.name ?? m.id);
+      }
+
+      // Aggregate every member capabilityTeamArtifacts projection
+      let versionUnsupported = false;
+      const allArtifacts = [];
+      const changesMap = new Map();
+
+      for (const m of members) {
+        if (!m.id) continue;
+        const artView = live?.projections?.(m.id)?.capabilityTeamArtifacts;
+        if (!artView || typeof artView !== 'object') continue;
+        if (artView.schemaVersion !== 1) {
+          versionUnsupported = true;
+          continue;
+        }
+        const roleId = roleMap.get(m.id) ?? m.name ?? m.id;
+        if (Array.isArray(artView.items)) {
+          for (const item of artView.items) {
+            allArtifacts.push({ ...item, memberSessionId: m.id, memberName: m.name, roleId });
+          }
+        }
+        if (Array.isArray(artView.changes)) {
+          for (const chg of artView.changes) {
+            const cKey = `${m.id}:${chg.seq}`;
+            if (!changesMap.has(cKey)) {
+              changesMap.set(cKey, { ...chg, memberSessionId: m.id, memberName: m.name, roleId });
+            }
+          }
+        }
+      }
+
+      if (versionUnsupported && !allArtifacts.length && !changesMap.size) {
+        return h('p', { className: 'ctm-sub ctm-warn' }, t('version.unsupported'));
+      }
+
+      // Sort by (at, sessionId, presentSeq, fileIndex) descending; retain at most 100 items
+      allArtifacts.sort((a, b) => {
+        const atDiff = (b.at ?? 0) - (a.at ?? 0);
+        if (atDiff !== 0) return atDiff;
+        const sDiff = String(b.sessionId ?? '').localeCompare(String(a.sessionId ?? ''));
+        if (sDiff !== 0) return sDiff;
+        const pDiff = (b.presentSeq ?? 0) - (a.presentSeq ?? 0);
+        if (pDiff !== 0) return pDiff;
+        return (b.fileIndex ?? 0) - (a.fileIndex ?? 0);
+      });
+      const shelfItems = allArtifacts.slice(0, 100);
+
+      const roles = Array.from(new Set(shelfItems.map(item => item.roleId))).filter(Boolean);
+      const filteredItems = filterRole === 'all' ? shelfItems : shelfItems.filter(item => item.roleId === filterRole);
+
+      // Changes in this session
+      const changesList = Array.from(changesMap.values()).sort((a, b) => (b.at ?? 0) - (a.at ?? 0));
+
+      const handleOpenPresent = async item => {
+        setOpenError(null);
+        try {
+          const res = await fetch(apiUrl('api/present.open', { sessionId: item.sessionId, seq: item.presentSeq, index: item.fileIndex }), {
+            method: 'POST',
+            signal: abortRef.current?.signal,
+          });
+          if (abortRef.current?.signal?.aborted) return;
+          if (!res.ok) {
+            setOpenError(`${t('artifacts.openFail')} (${res.status})`);
+          }
+        } catch (e) {
+          if (abortRef.current?.signal?.aborted || e?.name === 'AbortError') return;
+          setOpenError(String(e.message ?? e));
+        }
+      };
+
+      const handleToggleChange = async chg => {
+        const cKey = `${chg.memberSessionId}:${chg.seq}`;
+        if (diffState[cKey]) {
+          setDiffState(prev => { const n = { ...prev }; delete n[cKey]; return n; });
+          return;
+        }
+        setDiffState(prev => ({ ...prev, [cKey]: { loading: true } }));
+        try {
+          const sumRes = await fetch(apiUrl('api/changes.summary', { sessionId: chg.memberSessionId, seq: chg.seq }), {
+            signal: abortRef.current?.signal,
+          });
+          if (abortRef.current?.signal?.aborted) return;
+          if (!sumRes.ok) {
+            const errText = sumRes.status === 404 ? t('artifacts.baselineInvalid') : `${sumRes.status}`;
+            setDiffState(prev => ({ ...prev, [cKey]: { error: errText } }));
+            return;
+          }
+          const sumData = await sumRes.json();
+          if (abortRef.current?.signal?.aborted) return;
+          const files = sumData.files ?? [];
+          const diffResults = [];
+          for (let i = 0; i < files.length; i++) {
+            if (abortRef.current?.signal?.aborted) return;
+            const diffRes = await fetch(apiUrl('api/changes.diff', { sessionId: chg.memberSessionId, seq: chg.seq, index: i }), {
+              signal: abortRef.current?.signal,
+            });
+            if (abortRef.current?.signal?.aborted) return;
+            if (!diffRes.ok) {
+              diffResults.push({ path: files[i].path, error: diffRes.status === 404 ? t('artifacts.baselineInvalid') : `Error ${diffRes.status}` });
+              continue;
+            }
+            const diffJson = await diffRes.json();
+            if (abortRef.current?.signal?.aborted) return;
+            const textContent = JSON.stringify(diffJson);
+            if (textContent.length > 1024 * 1024) {
+              diffResults.push({ path: files[i].path, error: t('artifacts.diffOversized') });
+            } else {
+              diffResults.push({ path: files[i].path, diff: diffJson });
+            }
+          }
+          if (abortRef.current?.signal?.aborted) return;
+          setDiffState(prev => ({ ...prev, [cKey]: { files: diffResults } }));
+        } catch (e) {
+          if (abortRef.current?.signal?.aborted || e?.name === 'AbortError') return;
+          setDiffState(prev => ({ ...prev, [cKey]: { error: String(e.message ?? e) } }));
+        }
+      };
+
+      return h('div', { className: 'ctm-art-shelf' },
+        h('div', { className: 'ctm-art-filter' },
+          h('span', { className: 'ctm-label' }, t('artifacts.title')),
+          roles.length > 1 ? h('select', {
+            className: 'ctm-btn',
+            value: filterRole,
+            onChange: e => setFilterRole(e.target.value),
+          },
+            h('option', { value: 'all' }, t('artifacts.allRoles')),
+            ...roles.map(r => h('option', { key: r, value: r }, r))) : null),
+        openError ? h('p', { className: 'ctm-warn' }, openError) : null,
+        !filteredItems.length ? h('p', { className: 'ctm-sub' }, t('artifacts.empty'))
+          : h('div', { className: 'ctm-art-list' }, ...filteredItems.map(item =>
+              h('div', { key: `${item.sessionId}:${item.presentSeq}:${item.fileIndex}`, className: 'ctm-art-card' },
+                h('div', { className: 'ctm-art-head' },
+                  h('span', { className: 'ctm-badge', 'data-tone': 'brand' }, item.roleId),
+                  h('button', {
+                    type: 'button', className: 'ctm-btn',
+                    onClick: () => handleOpenPresent(item),
+                  }, t('artifacts.openDesktop'))),
+                h('span', { className: 'ctm-art-path', title: item.path }, item.displayPath ?? item.path),
+                item.at ? h('span', { className: 'ctm-sub' }, when(item.at)) : null))),
+        h('div', { className: 'ctm-art-changes' },
+          h('span', { className: 'ctm-label' }, t('artifacts.changes')),
+          !changesList.length ? h('p', { className: 'ctm-sub' }, t('artifacts.noChanges'))
+            : (changesList.length <= 5
+                ? changesList.map(chg => {
+                    const cKey = `${chg.memberSessionId}:${chg.seq}`;
+                    const diffEntry = diffState[cKey];
+                    return h('details', { key: cKey, className: 'ctm-chg-item', onToggle: e => { if (e.target.open && !diffEntry) handleToggleChange(chg); } },
+                      h('summary', null, `${chg.roleId} · Turn ${chg.turn ?? '?'} · Seq ${chg.seq}`),
+                      diffEntry?.loading ? h('p', { className: 'ctm-sub' }, t('overview.loading'))
+                        : diffEntry?.error ? h('p', { className: 'ctm-warn' }, diffEntry.error)
+                        : diffEntry?.files ? h('div', { className: 'ctm-chg-diff' },
+                            ...diffEntry.files.map((f, fi) => h('div', { key: fi },
+                              h('strong', null, f.path),
+                              f.error ? h('p', { className: 'ctm-warn' }, f.error)
+                                : h('pre', { className: 'ctm-pre' }, JSON.stringify(f.diff?.hunks ?? f.diff ?? t('artifacts.diffEmpty'), null, 2)))))
+                        : null);
+                  })
+                : h(CollapsibleList, {
+                    items: changesList,
+                    limit: 5,
+                    t,
+                    renderItem: chg => {
+                      const cKey = `${chg.memberSessionId}:${chg.seq}`;
+                      const diffEntry = diffState[cKey];
+                      return h('details', { key: cKey, className: 'ctm-chg-item', onToggle: e => { if (e.target.open && !diffEntry) handleToggleChange(chg); } },
+                        h('summary', null, `${chg.roleId} · Turn ${chg.turn ?? '?'} · Seq ${chg.seq}`),
+                        diffEntry?.loading ? h('p', { className: 'ctm-sub' }, t('overview.loading'))
+                          : diffEntry?.error ? h('p', { className: 'ctm-warn' }, diffEntry.error)
+                          : diffEntry?.files ? h('div', { className: 'ctm-chg-diff' },
+                              ...diffEntry.files.map((f, fi) => h('div', { key: fi },
+                                h('strong', null, f.path),
+                                f.error ? h('p', { className: 'ctm-warn' }, f.error)
+                                  : h('pre', { className: 'ctm-pre' }, JSON.stringify(f.diff?.hunks ?? f.diff ?? t('artifacts.diffEmpty'), null, 2)))))
+                          : null);
+                    },
+                  }))));
+    }
+
+    /** Battle report view (MVP-B). */
+    function BattleReportView({ sessionId, liveTeam, live, t, runtimeState, singleModel }) {
+      const members = liveTeam?.members ?? [];
+      let totalTurns = 0;
+      let totalSteps = 0;
+      let totalCompletedMs = 0;
+      let earliestFirstTurn = null;
+      let latestEndTurn = null;
+
+      let uncachedInput = 0;
+      let cacheRead = 0;
+      let cacheWrite = 0;
+      let outputTokens = 0;
+
+      let boardMutationsVal = null;
+      let hostRetries = 0;
+      let failedTurns = 0;
+      let msgAccepted = 0;
+
+      let versionUnsupported = false;
+      let hasReport = false;
+      // Team-level usage coverage (item 2): any member reporting 'partial' downgrades the whole team to
+      // 'partial'; members reporting 'unknown' never contribute tokens to the totals below and are listed
+      // separately so the aggregate never silently absorbs an unknown member's usage as zero.
+      let teamCoverage = 'complete';
+      const unknownMembers = [];
+
+      for (const m of members) {
+        if (!m.id) continue;
+        const rpt = live?.projections?.(m.id)?.capabilityTeamReport;
+        if (!rpt || typeof rpt !== 'object') continue;
+        if (rpt.schemaVersion !== 1) {
+          versionUnsupported = true;
+          continue;
+        }
+        hasReport = true;
+        totalTurns += rpt.turns ?? 0;
+        totalSteps += rpt.steps ?? 0;
+        totalCompletedMs += rpt.completedTurnMs ?? 0;
+
+        if (typeof rpt.firstTurnAt === 'number') {
+          earliestFirstTurn = earliestFirstTurn === null ? rpt.firstTurnAt : Math.min(earliestFirstTurn, rpt.firstTurnAt);
+        }
+        if (typeof rpt.lastTurnEndAt === 'number') {
+          latestEndTurn = latestEndTurn === null ? rpt.lastTurnEndAt : Math.max(latestEndTurn, rpt.lastTurnEndAt);
+        }
+        if (typeof rpt.openTurnAt === 'number') {
+          latestEndTurn = latestEndTurn === null ? rpt.openTurnAt : Math.max(latestEndTurn, rpt.openTurnAt);
+        }
+
+        const memberCoverage = rpt.usageCoverage?.coverage;
+        if (memberCoverage === 'unknown') {
+          unknownMembers.push(m.name ?? m.id);
+        } else {
+          if (memberCoverage === 'partial') teamCoverage = teamCoverage === 'complete' ? 'partial' : teamCoverage;
+          const u = rpt.usage;
+          if (u) {
+            uncachedInput += u.uncachedInputTokens ?? 0;
+            cacheRead += u.cacheReadTokens ?? 0;
+            cacheWrite += u.cacheWriteTokens ?? 0;
+            outputTokens += u.outputTokens ?? 0;
+          }
+        }
+
+        const cnt = rpt.counters;
+        if (cnt) {
+          hostRetries += cnt.hostRetriesStarted ?? 0;
+          failedTurns += cnt.failedTurns ?? 0;
+          msgAccepted += cnt.sendMessageAccepted ?? 0;
+          if (m.role === 'lead' || m.name === 'lead') {
+            boardMutationsVal = cnt.boardMutations ?? null;
+          }
+        }
+      }
+
+      if (versionUnsupported && !hasReport) {
+        return h('p', { className: 'ctm-sub ctm-warn' }, t('version.unsupported'));
+      }
+
+      const billableTokens = uncachedInput + cacheWrite + outputTokens;
+      const windowEnd = latestEndTurn ?? Date.now();
+      const windowStart = earliestFirstTurn ?? windowEnd;
+      const windowSpan = elapsed(Math.max(0, windowEnd - windowStart));
+
+      // Runtime failover metrics summary
+      const runtimeAvailable = runtimeState && !runtimeState.unavailable && runtimeState.data;
+      const runtimeMembers = runtimeAvailable && Array.isArray(runtimeState.data.members) ? runtimeState.data.members : [];
+      let rRequestFailures = 0;
+      let rPluginRetries = 0;
+      let rFailoverSwitches = 0;
+      let rLongContextSwitches = 0;
+      if (runtimeAvailable) {
+        for (const rm of runtimeMembers) {
+          const rc = rm.counters;
+          if (rc) {
+            rRequestFailures += rc.requestFailures ?? 0;
+            rPluginRetries += rc.pluginRetries ?? 0;
+            rFailoverSwitches += rc.failoverSwitches ?? 0;
+            rLongContextSwitches += rc.longContextSwitches ?? 0;
+          }
+        }
+      }
+
+      // Aggregate presentation
+      return h('div', { className: 'ctm-rpt-shelf' },
+        h('span', { className: 'ctm-label' }, t('report.title'),
+          singleModel ? h('span', { className: 'ctm-badge', 'data-tone': 'warn', 'data-single-model': '', title: `${singleModel.provider}/${singleModel.model}` }, t('roles.singleModel')) : null),
+        h('p', { className: 'ctm-sub' },
+          fmt(t('report.window'), {
+            start: earliestFirstTurn ? when(earliestFirstTurn) : t('common.unknown'),
+            end: latestEndTurn ? when(latestEndTurn) : when(windowEnd),
+            span: windowSpan,
+          })),
+        h('div', { className: 'ctm-rpt-grid' },
+          h('div', { className: 'ctm-rpt-box' },
+            h('span', { className: 'ctm-sub' }, t('report.wallTime')),
+            h('strong', null, elapsed(totalCompletedMs))),
+          h('div', { className: 'ctm-rpt-box' },
+            h('span', { className: 'ctm-sub' }, t('report.tokensTotal')),
+            h('strong', null, compact(billableTokens)),
+            teamCoverage === 'partial' ? badge(t('usage.partialLow'), 'warn', 'team-partial') : null,
+            h('span', { className: 'ctm-sub' }, fmt(t('report.tokensIo'), { in: compact(uncachedInput), out: compact(outputTokens), cw: compact(cacheWrite) })),
+            unknownMembers.length ? h('p', { className: 'ctm-sub ctm-warn' }, fmt(t('report.unknownMembers'), { list: unknownMembers.join(t('common.listSep')) })) : null),
+          h('div', { className: 'ctm-rpt-box' },
+            h('span', { className: 'ctm-sub' }, t('report.cacheRead')),
+            h('strong', null, compact(cacheRead))),
+          h('div', { className: 'ctm-rpt-box' },
+            h('span', { className: 'ctm-sub' }, t('report.turnsSteps')),
+            h('strong', null, `${totalTurns} / ${totalSteps}`)),
+          h('div', { className: 'ctm-rpt-box' },
+            h('span', { className: 'ctm-sub' }, t('report.mutations')),
+            h('strong', null, boardMutationsVal !== null ? String(boardMutationsVal) : '—'))),
+        h('div', { className: 'ctm-rpt-section' },
+          h('span', { className: 'ctm-label' }, t('report.sectionOwn')),
+          h('div', { className: 'ctm-rpt-grid' },
+            h('div', { className: 'ctm-rpt-box' },
+              h('span', { className: 'ctm-sub' }, t('report.hostRetries', { n: '' })),
+              h('strong', null, String(hostRetries))),
+            h('div', { className: 'ctm-rpt-box' },
+              h('span', { className: 'ctm-sub' }, t('report.failedTurns', { n: '' })),
+              h('strong', null, String(failedTurns))),
+            h('div', { className: 'ctm-rpt-box' },
+              h('span', { className: 'ctm-sub' }, t('report.msgAccepted', { n: '' })),
+              h('strong', null, String(msgAccepted))))),
+        h('div', { className: 'ctm-rpt-section' },
+          h('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+            h('span', { className: 'ctm-label' }, t('report.sectionRuntime')),
+            runtimeState?.restarted ? h('span', { className: 'ctm-badge', 'data-tone': 'brand' }, t('runtime.restarted')) : null),
+          h('div', { className: 'ctm-rpt-grid' },
+            h('div', { className: 'ctm-rpt-box' },
+              h('span', { className: 'ctm-sub' }, t('report.requestFailures', { n: '' })),
+              h('strong', null, runtimeAvailable ? String(rRequestFailures) : t('common.unknown'))),
+            h('div', { className: 'ctm-rpt-box' },
+              h('span', { className: 'ctm-sub' }, t('report.pluginRetries', { n: '' })),
+              h('strong', null, runtimeAvailable ? String(rPluginRetries) : t('common.unknown'))),
+            h('div', { className: 'ctm-rpt-box' },
+              h('span', { className: 'ctm-sub' }, t('report.failoverSwitches', { n: '' })),
+              h('strong', null, runtimeAvailable ? String(rFailoverSwitches) : t('common.unknown'))),
+            h('div', { className: 'ctm-rpt-box' },
+              h('span', { className: 'ctm-sub' }, t('report.longContextSwitches', { n: '' })),
+              h('strong', null, runtimeAvailable ? String(rLongContextSwitches) : t('common.unknown'))))),
+        h('details', { className: 'ctm-rpt-defs' },
+          h('summary', null, t('report.def.title')),
+          h('div', { className: 'ctm-rpt-defs-list' },
+            h('p', null, t('report.def.wallTime')),
+            h('p', null, t('report.def.cacheRead')),
+            h('p', null, t('report.def.mutations')),
+            h('p', null, t('report.def.hostRetries')),
+            h('p', null, t('report.def.failedTurns')),
+            h('p', null, t('report.def.msgAccepted')),
+            h('p', null, t('report.def.requestFailures')),
+            h('p', null, t('report.def.pluginRetries')),
+            h('p', null, t('report.def.failoverSwitches')),
+            h('p', null, t('report.def.longContextSwitches')))));
+    }

package/client/08a-task-control.js

@@ -0,0 +1,126 @@
+    // ---------- task control (per-member step budget and temporary model) ----------
+    // Reads the lease from the runtime snapshot the board already subscribes to (no extra polling). Writes go
+    // through POST api/capability-team.task-control; a temporary model is only sent after the in-page confirm.
+    const CONTROL_ERRORS = { 400: 'badRequest', 403: 'forbidden', 404: 'notFound', 409: 'conflict', 422: 'invalid', 503: 'unavailable' };
+    const COMPLEXITIES = ['simple', 'medium', 'complex'];
+    const requestId = () => (typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : `r-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    const routeOf = r => (r ? `${r.provider ? r.provider + '/' : ''}${r.model ?? ''}` : '');
+    /** The member's live lease, else its most recent one. */
+    function leaseFor(control, roleId) {
+      const all = Array.isArray(control?.leases) ? control.leases.filter(l => l.roleId === roleId) : [];
+      return all.find(l => l.status !== 'ended') ?? all[all.length - 1];
+    }
+    const stepTone = judgment => (judgment === 'unqualified' ? 'error' : judgment === 'warning' ? 'warn' : 'ok');
+    async function controlRequest(path, init) {
+      let res;
+      try { res = await fetch(path, init); } catch (error) { if (error?.name === 'AbortError') throw error; return { ok: false, kind: 'network' }; }
+      let body = null;
+      try { body = await res.json(); } catch { /* empty or non-JSON body */ }
+      if (res.ok) return { ok: true, body };
+      return { ok: false, kind: CONTROL_ERRORS[res.status] ?? 'unknown', status: res.status, message: body?.message };
+    }
+    function TaskControl({ leadSessionId, roleId, name, configured, control, t }) {
+      const lease = leaseFor(control, roleId);
+      const [open, setOpen] = React.useState(false);
+      const [candidates, setCandidates] = React.useState(null);
+      const [pick, setPick] = React.useState('');
+      const [reason, setReason] = React.useState('');
+      const [complexity, setComplexity] = React.useState('medium');
+      const [confirming, setConfirming] = React.useState(false);
+      const [pending, setPending] = React.useState(false);
+      const [error, setError] = React.useState(null);
+      const aborter = React.useRef(null);
+      React.useEffect(() => () => aborter.current?.abort(), []);
+      const freshSignal = () => { aborter.current?.abort(); aborter.current = typeof AbortController === 'function' ? new AbortController() : null; return aborter.current?.signal; };
+      const stop = event => event.stopPropagation();
+      React.useEffect(() => {
+        if (!open || candidates || !lease || lease.status === 'ended') return;
+        let live = true;
+        controlRequest(apiUrl('api/capability-team.override-candidates', { sessionId: leadSessionId, role: roleId }), { signal: freshSignal() })
+          .then(r => { if (live) setCandidates(r.ok ? r.body : { error: r.kind, candidates: [] }); })
+          .catch(() => {});
+        return () => { live = false; };
+      }, [open, leadSessionId, roleId, Boolean(lease && lease.status !== 'ended')]);
+      const post = async body => {
+        setPending(true); setError(null);
+        try {
+          const r = await controlRequest(apiUrl('api/capability-team.task-control'), {
+            method: 'POST', headers: { 'content-type': 'application/json' }, signal: freshSignal(),
+            body: JSON.stringify({ sessionId: leadSessionId, requestId: requestId(), role: roleId, ...body }),
+          });
+          if (!r.ok) setError(r.kind); else { setConfirming(false); setPick(''); setReason(''); }
+        } catch (e) { if (e?.name !== 'AbortError') setError('network'); }
+        finally { setPending(false); }
+      };
+      const cas = lease ? { lease_id: lease.leaseId, expected_revision: lease.revision } : {};
+      const chosen = candidates?.candidates?.find(c => routeOf(c) === pick);
+      const ended = !lease || lease.status === 'ended';
+      const used = lease?.startsUsed ?? 0;
+      const est = lease?.estimatedSteps ?? 0;
+      const ratio = est > 0 ? Math.min(1, used / est) : 0;
+      const tone = stepTone(lease?.judgment);
+      const audit = (Array.isArray(control?.auditTail) ? control.auditTail : []).filter(r => r.roleId === roleId);
+      const errorText = error ? `${label(t, `control.error.${error}`, t('control.error.unknown'))}${error === 'conflict' ? ` ${t('control.error.reconfirm')}` : ''}` : null;
+      const summary = lease
+        ? (lease.status === 'ended' ? t('control.lease.ended') : fmt(t('control.steps.label'), { used, est }))
+        : t('control.budget.title');
+      return h('details', { className: 'ctm-tc', 'data-tone': tone, open, onClick: stop, onKeyDown: stop,
+        onToggle: event => setOpen(event.currentTarget.open) },
+        h('summary', null, h('span', { className: 'ctm-label' }, t('control.title')), h('span', { className: 'ctm-sub' }, summary)),
+        lease ? h('div', { className: 'ctm-tc-body' },
+          h('div', { className: 'ctm-tc-row' },
+            badge(label(t, `control.lease.status.${lease.status}`, lease.status), ended ? undefined : 'brand', 'st'),
+            !ended && lease.judgment !== 'within' ? badge(t(`control.steps.${lease.judgment}`), tone, 'j') : null),
+          est > 0 ? h('div', { className: 'ctm-us-meter', 'data-tone': tone, role: 'meter', 'aria-valuemin': 0, 'aria-valuemax': est, 'aria-valuenow': used, 'aria-label': fmt(t('control.steps.label'), { used, est }) },
+            h('i', { style: { width: `${(ratio * 100).toFixed(1)}%` } })) : null,
+          h('p', { className: 'ctm-sub' }, t('control.steps.disclaimer')),
+          lease.override
+            ? h('div', { className: 'ctm-tc-override' },
+              h('span', { className: 'ctm-chip' }, fmt(t('control.override.badge'), { from: routeOf(lease.override.from), to: routeOf(lease.override) })),
+              lease.expiresAt ? h('span', { className: 'ctm-sub' }, fmt(t('control.override.expiresAt'), { time: timeOfDay(lease.expiresAt) })) : null,
+              h('span', { className: 'ctm-sub' }, t('control.override.autoRestore')),
+              h('span', { className: 'ctm-sub' }, t('control.override.pauseLongContext')))
+            : h('p', { className: 'ctm-sub' }, t('control.override.none')),
+          ended ? null : h('div', { className: 'ctm-tc-actions' },
+            h('label', { className: 'ctm-sub' }, t('control.override.pick'),
+              h('select', { value: pick, disabled: pending || !candidates?.candidates?.length, onChange: e => { setPick(e.target.value); setConfirming(false); } },
+                h('option', { value: '' }, candidates?.candidates?.length ? '—' : t('control.override.noCandidates')),
+                ...(candidates?.candidates ?? []).map(c => h('option', { key: routeOf(c), value: routeOf(c) }, `${routeOf(c)} · ${label(t, `tier.${c.tier}`, c.tier)}`)))),
+            h('span', { className: 'ctm-sub' }, t('control.override.pickHint')),
+            h('input', { type: 'text', className: 'ctm-tc-reason', placeholder: t('control.override.reason'), value: reason, maxLength: 200, onChange: e => setReason(e.target.value) }),
+            h('div', { className: 'ctm-tc-row' },
+              h('button', { type: 'button', className: 'ctm-btn', disabled: pending || !chosen, onClick: () => setConfirming(true) }, t('control.override.setAction')),
+              lease.override ? h('button', { type: 'button', className: 'ctm-btn', disabled: pending, onClick: () => post({ action: 'clear-override', ...cas, reason }) }, t('control.override.restoreAction')) : null,
+              h('button', { type: 'button', className: 'ctm-btn', disabled: pending, onClick: () => post({ action: 'finish-lease', ...cas, reason }) }, t('control.action.end')))),
+          confirming && chosen ? h('div', { className: 'ctm-tc-confirm', role: 'alertdialog', 'aria-label': t('control.override.confirm.title') },
+            h('strong', null, t('control.override.confirm.title')),
+            h('span', null, fmt(t('control.override.confirm.member'), { name })),
+            h('span', null, fmt(t('control.override.confirm.change'), { from: lease.override ? routeOf(lease.override) : (configured || t('live.configModel')), to: routeOf(chosen), tier: label(t, `tier.${chosen.tier}`, chosen.tier) })),
+            h('span', { className: 'ctm-warn' }, t('control.override.confirm.cost')),
+            h('span', { className: 'ctm-sub' }, t('control.override.confirm.restore')),
+            h('div', { className: 'ctm-tc-row' },
+              h('button', { type: 'button', className: 'ctm-btn', 'data-primary': '', disabled: pending,
+                onClick: () => post({ action: 'set-override', ...cas, provider: chosen.provider, model: chosen.model, catalog_version: candidates.catalogVersion, reason }) }, t('control.override.confirm.ok')),
+              h('button', { type: 'button', className: 'ctm-btn', disabled: pending, onClick: () => setConfirming(false) }, t('control.override.confirm.cancel')))) : null)
+          : null,
+        ended ? h('div', { className: 'ctm-tc-row' },
+          h('label', { className: 'ctm-sub' }, t('control.budget.complexity'),
+            h('select', { value: complexity, disabled: pending, onChange: e => setComplexity(e.target.value) },
+              ...COMPLEXITIES.map(c => h('option', { key: c, value: c }, t(`control.budget.complexity.${c}`))))),
+          h('button', { type: 'button', className: 'ctm-btn', disabled: pending, onClick: () => post({ action: 'start-budget', complexity, reason }) }, t('control.budget.startAction'))) : null,
+        pending ? h('p', { className: 'ctm-sub' }, t('control.pending')) : null,
+        errorText ? h('p', { className: 'ctm-sub ctm-warn', role: 'alert' }, errorText) : null,
+        h('div', { className: 'ctm-tc-audit' },
+          h('span', { className: 'ctm-sub' }, t('control.audit.title')),
+          audit.length
+            ? (audit.length <= 5
+                ? h('ul', null, ...audit.map(r => h('li', { key: r.eventId }, `${timeOfDay(r.at)} · ${String(r.action ?? '')}${r.to ? ` → ${routeOf(r.to)}` : ''}${r.reason ? ` · ${String(r.reason)}` : ''}`)))
+                : h(CollapsibleList, {
+                    items: audit,
+                    limit: 5,
+                    as: 'ul',
+                    t,
+                    renderItem: r => h('li', { key: r.eventId }, `${timeOfDay(r.at)} · ${String(r.action ?? '')}${r.to ? ` → ${routeOf(r.to)}` : ''}${r.reason ? ` · ${String(r.reason)}` : ''}`),
+                  }))
+            : h('span', { className: 'ctm-sub' }, t('control.audit.empty'))));
+    }

package/client/08b-stage-sprites.js

@@ -0,0 +1,97 @@
+    // ---------- office stage: deterministic palettes and pixel sprites (canvas draws shapes only; every text is DOM) ----------
+    const STAGE_SKINS = ['#f3d3a2', '#f6e1c3', '#e8b98a', '#d9a06e', '#fbe3cc'];
+    /** Desk prop per capability; unknown capabilities get a bare desk. */
+    const STAGE_PROPS = { orchestrator: 'map', 'technical-director': 'scroll', backend: 'gear', frontend: 'palette', research: 'glass', writer: 'brush', qa: 'flask' };
+    function stageHash(str) { let n = 2166136261; for (const ch of String(str)) { n ^= ch.charCodeAt(0); n = Math.imul(n, 16777619) >>> 0; } return n; }
+    /** Theme-agnostic look: the role id picks the hues, the capability picks the prop, so any theme's names render consistently. */
+    function stagePalette(id, capability) {
+      const n = stageHash(id), hue = n % 360, hue2 = (hue + 150 + ((n >>> 8) % 60)) % 360;
+      const hsl = (h, s, l) => `hsl(${h} ${s}% ${l}%)`;
+      return { robe: hsl(hue, 55, 46), leg: hsl(hue, 45, 28), hat: hsl(hue2, 55, 42), accent: hsl((hue + 180) % 360, 75, 68),
+        skin: STAGE_SKINS[(n >>> 16) % STAGE_SKINS.length], prop: STAGE_PROPS[capability] ?? 'none' };
+    }
+    /** Desk with monitor and the capability prop. `px(x, y, w, h, color)` paints one device-independent rectangle. */
+    function stageDrawDesk(px, s, S, desk, deskTop) {
+      const x = s.home.x, y = s.home.y, present = s.data.status !== 'inactive';
+      px(x - 12 * S, y + S, 24 * S, 7 * S, desk); px(x - 12 * S, y, 24 * S, 5 * S, deskTop); px(x - 12 * S, y, 24 * S, S, 'rgba(255,255,255,.12)');
+      px(x - 4 * S, y - 5 * S, 8 * S, 5 * S, '#1a1b22');
+      stageDrawScreen(px, s, S, x, y, present);
+      px(x - S, y, 2 * S, S, '#111');
+      if (s.data.activity === 'reading') { // open book on the desk, the page flips every other frame
+        px(x - 6 * S, y + S, 5 * S, 3 * S, '#f1ead6'); px(x - 4 * S, y + S, S, 3 * S, '#cdbf9a');
+        if (s.frame % 2) px(x - 6 * S, y + S, 2 * S, 2 * S, '#ffffff');
+      }
+      const a = s.palette.accent;
+      switch (s.palette.prop) {
+        case 'map': px(x + 5 * S, y + S, 6 * S, 3 * S, '#d9c38a'); px(x + 6 * S, y + 2 * S, 2 * S, S, '#b3412f'); break;
+        case 'scroll': px(x + 6 * S, y + S, 5 * S, 2 * S, '#e8dcbf'); px(x + 6 * S, y + 3 * S, 5 * S, S, '#cdbf9a'); break;
+        case 'gear': px(x + 6 * S, y, 4 * S, 4 * S, '#9aa3ad'); px(x + 7 * S, y + S, 2 * S, 2 * S, '#3b4149'); px(x + 5 * S, y + S, S, 2 * S, '#9aa3ad'); px(x + 10 * S, y + S, S, 2 * S, '#9aa3ad'); break;
+        case 'palette': px(x + 5 * S, y + S, 6 * S, 3 * S, '#e8dcbf'); px(x + 6 * S, y + 2 * S, S, S, '#e0493f'); px(x + 8 * S, y + 2 * S, S, S, '#3a9ad9'); px(x + 10 * S, y + 2 * S, S, S, '#3ddc84'); break;
+        case 'glass': px(x + 6 * S, y, 3 * S, 3 * S, '#c9ced6'); px(x + 7 * S, y + S, S, S, '#a9d4ff'); px(x + 9 * S, y + 3 * S, 2 * S, S, '#8a5a2b'); break;
+        case 'brush': px(x + 6 * S, y + S, 2 * S, 3 * S, '#2b2b2b'); px(x + 9 * S, y + S, 2 * S, 3 * S, '#f1ead6'); break;
+        case 'flask': px(x + 7 * S, y - S, 2 * S, 2 * S, '#c9ced6'); px(x + 6 * S, y + S, 4 * S, 3 * S, '#d8dde3'); px(x + 7 * S, y + 2 * S, 2 * S, 2 * S, a); break;
+        default: break;
+      }
+      px(x - 10 * S, y + S, 3 * S, 2 * S, '#c84b3c'); px(x - 9 * S, y, S, S, '#f0e9d8');
+    }
+    /** Monitor content per activity: code lines scroll while writing, a green terminal flickers, failures turn red. */
+    function stageDrawScreen(px, s, S, x, y, present) {
+      const a = s.data.activity, f = s.frame;
+      const screen = !present ? '#2b3340' : a === 'failed' ? '#8f2f2f' : a === 'writing' ? '#1e3a5f' : a === 'terminal' ? '#0c2214'
+        : a === 'browsing' || a === 'searching' ? '#2d5f8a' : a === 'messaging' || a === 'board' ? '#5b4a8a' : a === 'thinking' || a === 'reading' ? '#3a4a5c' : '#4b5563';
+      px(x - 3 * S, y - 4 * S, 6 * S, 3 * S, screen);
+      if (a === 'writing') for (let i = 0; i < 3; i++) px(x - 2 * S, y - (4 - i) * S, ((f + i) % 3 + 2) * S, S * .6, i === (f % 3) ? '#bfe6ff' : '#6fa8dc');
+      else if (a === 'terminal') { px(x - 2 * S, y - 3 * S, 3 * S, S * .6, '#3ddc84'); if (f % 2) px(x + S, y - 3 * S, S, S * .6, '#b6ffcf'); }
+      else if (a === 'failed') { px(x - .5 * S, y - 4 * S, S, 2 * S * .8, '#ffd0d0'); if (f % 2) px(x - .5 * S, y - 1.6 * S, S, S * .5, '#ffd0d0'); }
+      else if (a === 'browsing' || a === 'searching') px(x - S, y - 4 * S + (f % 3) * S * .7, 2 * S, S * .6, '#a9d4ff');
+      else if (a === 'messaging' || a === 'board') px(x - 2 * S, y - 3 * S, 4 * S, S, f % 2 ? '#d9c38a' : '#f3e7c6');
+    }
+    /**
+     * 12×16 pixel person. The pose follows `s.data.activity` (typing / chin-on-hand / book / head-down / dozing) plus
+     * the one-shot overlays: `s.gesture` (idle stretch or coffee) and `s.celebrate` (jump with raised arms).
+     */
+    function stageDrawPerson(px, s, S) {
+      const c = s.palette, f = s.facing, walking = s.phase === 'walking', a = s.data.activity, fr = s.frame;
+      const jumping = s.celebrate > 0, typing = !jumping && ['writing', 'terminal', 'searching', 'browsing', 'messaging', 'board', 'working'].includes(a);
+      const lift = jumping ? Math.round(Math.abs(Math.sin(s.celebrate * 7)) * 4) * S : 0;
+      const bob = !jumping && !walking && fr === 2 && a !== 'failed' ? S : 0;
+      const x = s.x, y0 = s.y - 16 * S + bob - lift;
+      const X = u => x + (f > 0 ? u : (12 - u - 1)) * S - 6 * S, Y = v => y0 + v * S;
+      const R = (u, v, w, h, col) => px(f > 0 ? X(u) : X(u + w - 1), Y(v), w * S, h * S, col);
+      const legA = walking ? (fr % 2 ? 1 : 0) : 0;
+      R(4 - legA, 12, 2, 4, c.leg); R(7 + legA, 12, 2, 4, c.leg); R(4 - legA, 15, 2, 1, '#222'); R(7 + legA, 15, 2, 1, '#222');
+      R(3, 6, 7, 6, c.robe); R(6, 6, 1, 6, c.accent);
+      const arm = (u, top, col = c.robe) => { R(u, top, 1, 4, col); R(u, top + 3, 1, 1, c.skin); };
+      const head = a === 'failed' ? 1 : 0; // failed members hang their head
+      if (jumping || s.gesture === 'stretch') { R(2, 2, 1, 4, c.robe); R(10, 2, 1, 4, c.robe); R(2, 1, 1, 1, c.skin); R(10, 1, 1, 1, c.skin); }
+      else if (a === 'thinking') { arm(2, 7); R(10, 5, 1, 3, c.robe); R(9, 5, 1, 1, c.skin); } // chin on hand
+      else if (a === 'reading') { R(2, 8, 1, 2, c.robe); R(10, 8, 1, 2, c.robe); R(3, 9, 7, 2, '#e8dcbf'); R(6, 9, 1, 2, '#b3a37e'); }
+      else if (s.gesture === 'coffee') { arm(2, 7); R(10, 5, 1, 3, c.robe); R(9, 5, 2, 2, '#f1ead6'); R(9, 5, 2, 1, '#6b4226'); }
+      else {
+        const fast = a === 'writing' ? fr % 2 : fr === 1 ? 1 : 0, other = a === 'writing' ? 1 - fr % 2 : fr === 3 ? 1 : 0;
+        arm(2, 7 - (typing ? fast : 0)); arm(10, 7 - (typing ? other : 0));
+      }
+      R(4, 3 + head, 5, 3, c.skin);
+      if (a === 'waiting' || a === 'failed') { R(5, 5 + head, 1, 1, '#222'); R(8, 5 + head, 1, 1, '#222'); } // closed / downcast eyes
+      else { R(5, 4, 1, 1, '#222'); R(8, 4, 1, 1, '#222'); }
+      R(3, head, 7, 3, c.hat); R(3, 2 + head, 7, 1, c.accent);
+      if (s.data.lead) { R(4, -1 + head, 1, 1, '#ffd766'); R(6, -2 + head, 1, 2, '#ffd766'); R(8, -1 + head, 1, 1, '#ffd766'); }
+      if (a === 'failed') { R(11, -3, 1, 3, '#ff5c5c'); R(11, 1, 1, 1, '#ff5c5c'); } // red "!"
+      if (a === 'thinking') for (let i = 0; i < Math.max(1, fr % 4); i++) R(4 + i * 2, -3, 1, 1, '#e6e6ee'); // animated ellipsis
+      if (a === 'waiting') { const z = fr % 3; R(10 + z, -2 - z, 2, 1, '#cfd8ff'); R(11 + z, -3 - z, 1, 1, '#cfd8ff'); R(10 + z, -4 - z, 2, 1, '#cfd8ff'); } // zzz
+      if (s.data.ctxRatio >= .9) { R(1, 2 + (fr % 2), 1, 2, '#7fc8ff'); R(1, 4 + (fr % 2), 1, 1, '#c4e6ff'); } // sweat drop
+    }
+    /** A letter in flight: wax-sealed scroll from the Lead, blue-sealed report back to the Lead. */
+    function stageDrawCourier(px, c, S) {
+      px(c.x - 3 * S, c.y - 2 * S, 6 * S, 4 * S, '#f3e7c6'); px(c.x - 3 * S, c.y - 2 * S, 6 * S, S, '#d9c38a'); px(c.x - S, c.y - S, 2 * S, 2 * S, c.reply ? '#3a9ad9' : '#c84b3c');
+    }
+    /** Floor, wall and windows; reads the stage's colour tokens so light and dark themes both get a readable office. */
+    function stageDrawRoom(ctx, px, w, h, S, colors) {
+      ctx.fillStyle = colors.floorA; ctx.fillRect(0, 0, w, h);
+      const tile = 8 * S;
+      for (let y = 0; y < h; y += tile) for (let x = ((y / tile) % 2) * tile; x < w; x += tile * 2) px(x, y, tile, tile, colors.floorB);
+      for (let y = 0; y < h; y += tile) px(0, y, w, 1, colors.grout);
+      for (let x = 0; x < w; x += tile) px(x, 0, 1, h, colors.grout);
+      px(0, 0, w, 10 * S, colors.wall); px(0, 10 * S, w, 1, 'rgba(0,0,0,.35)');
+      for (let x = 6 * S; x < w; x += 42 * S) { px(x, 2 * S, 10 * S, 6 * S, '#7fb2e5'); px(x + S, 3 * S, 8 * S, 4 * S, '#a9d4ff'); }
+    }