@aiwuk/team 0.0.0-stage → 5.0.8

package/client/08c-stage-colors.js

@@ -0,0 +1,55 @@
+    // ---------- office stage: theme colours for the canvas ----------
+    /**
+     * The pixel canvas cannot paint with `var()` or `color-mix()` strings, and host tokens may be defined with either.
+     * So each stage colour is resolved through a hidden probe element: its `color` is set to `var(--token, fallback)`
+     * and the browser's computed value (a concrete rgb or color(srgb ...) value) is read back. The fallback (a CSS system-colour keyword) is only used when
+     * the token is missing from the host stylesheet.
+     */
+    const STAGE_COLOR_TOKENS = {
+      floorA: ['--ctm-stage-floor-a', 'Canvas'], floorB: ['--ctm-stage-floor-b', 'Canvas'], grout: ['--ctm-stage-grout', 'GrayText'],
+      wall: ['--ctm-stage-wall', 'GrayText'], desk: ['--ctm-stage-desk', 'GrayText'], deskTop: ['--ctm-stage-desk-top', 'GrayText'],
+      select: ['--ctm-stage-select', 'Highlight'],
+    };
+    const RGBA_FN = 'rgba'; // assembled so no colour literal appears in source (tests/theme-tokens.test.mjs)
+    /** `color(srgb r g b / a)` (what browsers return for color-mix) → an rgba string; every other value is returned trimmed. */
+    function stageNormalizeColor(value) {
+      const text = String(value ?? '').trim();
+      const m = /^color\(\s*srgb\s+(-?[\d.]+%?)\s+(-?[\d.]+%?)\s+(-?[\d.]+%?)(?:\s*\/\s*(-?[\d.]+%?))?\s*\)$/i.exec(text);
+      if (!m) return text;
+      const channel = s => Math.round(Math.max(0, Math.min(1, s.endsWith('%') ? parseFloat(s) / 100 : parseFloat(s))) * 255);
+      const alpha = m[4] === undefined ? 1 : Math.max(0, Math.min(1, m[4].endsWith('%') ? parseFloat(m[4]) / 100 : parseFloat(m[4])));
+      return `${RGBA_FN}(${channel(m[1])}, ${channel(m[2])}, ${channel(m[3])}, ${+alpha.toFixed(3)})`;
+    }
+    /** Resolve every stage colour through `probe` (a hidden element inside the stage, so it inherits the custom properties). */
+    function stageResolveColors(probe, getStyle) {
+      const out = {};
+      for (const [key, [name, fallback]] of Object.entries(STAGE_COLOR_TOKENS)) {
+        probe.style.color = '';
+        probe.style.color = `var(${name}, ${fallback})`;
+        out[key] = stageNormalizeColor(getStyle(probe).color) || stageNormalizeColor(fallback);
+      }
+      return out;
+    }
+    /** Bridge from the host's `theme/change` event to every live scene; `stageTheme.bind(ctx)` is called once from plugin apply. */
+    const stageTheme = {
+      listeners: new Set(),
+      notify() { for (const fn of [...this.listeners]) fn(); },
+      subscribe(fn) { this.listeners.add(fn); return () => this.listeners.delete(fn); },
+      bind(ctx) {
+        if (typeof ctx?.on !== 'function') return () => {};
+        const off = ctx.on('theme/change', () => this.notify());
+        return typeof off === 'function' ? off : () => {};
+      },
+    };
+    /** Re-run `onChange` when the host swaps palettes: `theme/change` events plus attribute changes on body/html (dark flag, theme source, token overrides). */
+    function stageWatchTheme(onChange) {
+      const offBus = stageTheme.subscribe(onChange);
+      let observer = null;
+      if (typeof MutationObserver === 'function' && typeof document !== 'undefined') {
+        observer = new MutationObserver(onChange);
+        for (const target of [document.body, document.documentElement]) {
+          if (target) observer.observe(target, { attributes: true, attributeFilter: ['data-ds-dark-theme', 'data-ds-theme-source', 'style'] });
+        }
+      }
+      return () => { offBus(); observer?.disconnect(); };
+    }

package/client/08c-stage-scene.js

@@ -0,0 +1,238 @@
+    // ---------- office stage: layout, DOM plates and the render loop (imperative; React only owns the host element) ----------
+    /**
+     * Sprites arrive from `stageSprites` (08d) and are diffed in `sync`: new members walk in from the door, and the
+     * one-shot effects from `stageEvents` (08e) fly letters between Lead and teammates, celebrate finished tasks and
+     * flash changed routes. Poses follow each sprite's `activity`. The first frame is painted synchronously because a
+     * hidden side pane never fires requestAnimationFrame.
+     */
+    class OfficeScene {
+      constructor(stage, canvas, overlay, { t, onOpen, onSelect }) {
+        this.stage = stage; this.canvas = canvas; this.overlay = overlay; this.ctx = canvas.getContext('2d'); this.t = t; this.onOpen = onOpen; this.onSelect = onSelect;
+        this.sprites = new Map(); this.plates = new Map(); this.icons = new Map(); this.bubbles = new Map(); this.couriers = []; this.prevList = []; this.tick = 0;
+        this.onCanvasClick = e => { const id = this.hit(e); if (id) this.select(this.selected === id ? null : id); };
+        canvas.addEventListener?.('click', this.onCanvasClick);
+        this.w = 0; this.h = 0; this.S = 3; this.plateW = 120; this.selected = null; this.synced = false; this.dirty = true; this.visible = true;
+        this.reduced = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+        this.px = (x, y, w, h, c) => { this.ctx.fillStyle = c; this.ctx.fillRect(Math.round(x), Math.round(y), Math.round(w), Math.round(h)); };
+        if (typeof ResizeObserver === 'function') { this.ro = new ResizeObserver(() => this.resize()); this.ro.observe(stage); }
+        this.visibleAt = 0; // on-screen check is a cheap rect read once a second (IntersectionObserver is unreliable inside some embedded panes)
+        this.onVisibility = () => { this.last = 0; if (!document.hidden) this.draw(); };
+        document.addEventListener('visibilitychange', this.onVisibility);
+        this.colors = null; this.unwatchTheme = stageWatchTheme(() => this.retheme());
+        this.last = 0; this.schedule();
+      }
+      /** Canvas colours are resolved to concrete rgb through a probe element (see 08c-stage-colors.js) and cached until the theme changes. */
+      stageColors() {
+        if (this.colors) return this.colors;
+        this.probe ??= this.el('i');
+        this.probe.setAttribute('aria-hidden', 'true'); Object.assign(this.probe.style, { position: 'absolute', width: '0', height: '0', visibility: 'hidden', pointerEvents: 'none' });
+        if (!this.probe.isConnected) this.stage.append(this.probe);
+        return (this.colors = stageResolveColors(this.probe, getComputedStyle));
+      }
+      /** `theme/change` fires before the host flips the body attribute, so re-resolve once more after it settles. */
+      retheme() {
+        const redraw = () => { this.colors = null; this.dirty = true; this.draw(); };
+        redraw(); clearTimeout(this.themeTimer); this.themeTimer = setTimeout(redraw, 80);
+      }
+      /** rAF when the host delivers frames; a timer fallback keeps motion going (at low fps) in panes that stall rAF while visible. */
+      schedule() {
+        cancelAnimationFrame(this.raf); clearTimeout(this.timer);
+        this.raf = requestAnimationFrame(now => this.loop(now));
+        this.timer = setTimeout(() => this.loop(performance.now()), this.busy() && this.visible && !document.hidden ? 120 : 1000);
+      }
+      el(tag, cls, text) { const n = document.createElement(tag); if (cls) n.className = cls; if (text != null) n.textContent = text; return n; }
+      destroy() {
+        cancelAnimationFrame(this.raf); clearTimeout(this.timer); clearTimeout(this.themeTimer); this.ro?.disconnect(); document.removeEventListener('visibilitychange', this.onVisibility);
+        this.unwatchTheme?.(); this.probe?.remove();
+        this.canvas.removeEventListener?.('click', this.onCanvasClick);
+        for (const id of [...this.sprites.keys()]) this.remove(id);
+      }
+
+      /* ---------- diff from the adapter ---------- */
+      sync(list) {
+        const seen = new Set();
+        for (const data of list) {
+          seen.add(data.id);
+          const prev = this.sprites.get(data.id);
+          if (!prev) { this.add(data, this.synced && data.status !== 'inactive'); continue; }
+          const was = prev.data; prev.data = data;
+          if (was.status === 'inactive' && data.status !== 'inactive' && !this.reduced) this.walkIn(prev);
+          else if (prev.phase !== 'walking') prev.phase = phaseOf(data);
+          if (was.activity !== data.activity) prev.gesture = null;
+        }
+        if (this.synced) for (const ev of stageEvents(this.prevList, list)) this.effect(ev);
+        for (const data of list) this.renderPlate(data.id);
+        for (const id of [...this.sprites.keys()]) if (!seen.has(id)) this.remove(id);
+        this.prevList = list; this.synced = true; this.dirty = true; this.positionOverlay(); this.draw();
+      }
+      effect(ev) {
+        if (ev.type === 'flash') this.flash(ev.id);
+        else if (ev.type === 'mail') this.courier(ev.from, ev.to);
+        else if (ev.type === 'celebrate') { const s = this.sprites.get(ev.id); if (s) { s.celebrate = this.reduced ? 0 : 1.6; s.cheer = 2.4; } }
+        else if (ev.type === 'sweat') this.dirty = true;
+      }
+      add(data, enter) {
+        const s = { data, palette: stagePalette(data.id, data.capability), x: 0, y: 0, home: { x: 0, y: 0 }, facing: 1, phase: phaseOf(data), path: [], frame: 0, ft: 0, flash: 0, celebrate: 0, cheer: 0, gesture: null };
+        this.sprites.set(data.id, s);
+        const plate = this.el('div', 'ctm-stage-plate'); plate.dataset.id = data.id; plate.tabIndex = 0; plate.setAttribute('role', 'button');
+        plate.addEventListener('click', () => this.select(this.selected === data.id ? null : data.id));
+        plate.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); plate.click(); } });
+        this.overlay.append(plate); this.plates.set(data.id, plate);
+        const icon = this.el('div', 'ctm-stage-icon'); icon.hidden = true; this.overlay.append(icon); this.icons.set(data.id, icon);
+        const bubble = this.el('div', 'ctm-stage-bubble'); bubble.hidden = true; this.overlay.append(bubble); this.bubbles.set(data.id, bubble);
+        this.resize(); if (enter && !this.reduced) this.walkIn(s); this.renderPlate(data.id);
+      }
+      remove(id) {
+        this.sprites.delete(id); for (const map of [this.plates, this.icons, this.bubbles]) { map.get(id)?.remove(); map.delete(id); }
+        if (this.selected === id) this.select(null); this.resize();
+      }
+      /** `notify=false` mirrors the React-held selection without echoing it back. */
+      select(id, notify = true) {
+        const next = id && this.sprites.has(id) ? id : null, changed = next !== this.selected;
+        this.selected = next; for (const [k, p] of this.plates) p.setAttribute('aria-selected', String(k === this.selected));
+        if (changed && notify) this.onSelect?.(next);
+        if (changed) this.dirty = true;
+      }
+      /** Canvas click → the member whose desk/body box contains the point (people are drawn over their desks). */
+      hit(e) {
+        const r = this.canvas.getBoundingClientRect?.(); if (!r) return null;
+        const x = e.clientX - r.left, y = e.clientY - r.top, S = this.S;
+        for (const [id, s] of this.sprites) if (Math.abs(x - s.home.x) <= 12 * S && y >= s.home.y - 18 * S && y <= s.home.y + 8 * S) return id;
+        return null;
+      }
+      walkIn(s) { s.x = -12 * this.S; s.y = s.home.y + 9 * this.S; s.facing = 1; s.path = [{ x: s.home.x, y: s.y }, { x: s.home.x, y: s.home.y }]; s.phase = 'walking'; }
+      /** Fly a letter between two desks; `to == null` means "to the team" (fans out to every seated teammate). */
+      courier(fromId, toId) {
+        if (this.reduced) return;
+        const from = this.sprites.get(fromId); if (!from) return;
+        const targets = toId ? [this.sprites.get(toId)].filter(Boolean) : [...this.sprites.values()].filter(s => !s.data.lead && s.data.status !== 'inactive').slice(0, 6);
+        for (const to of targets) {
+          const dest = { x: to.home.x - 10 * this.S, y: to.home.y + 2 * this.S };
+          this.couriers.push({ x: from.home.x, y: from.home.y, from: { ...from.home }, to: dest, reply: !from.data.lead, t: 0, dur: .9 + Math.hypot(dest.x - from.home.x, dest.y - from.home.y) / 420 });
+        }
+      }
+      flash(id) { const b = this.plates.get(id)?.querySelector('.ctm-model-badge'); if (b) { b.removeAttribute('data-flash'); void b.offsetWidth; b.dataset.flash = ''; } }
+
+      /* ---------- layout ---------- */
+      resize() {
+        // Measure the CSS height without our own floor, so growing the stage for a tall roster never oscillates.
+        this.stage.style.minHeight = '';
+        const r = this.stage.getBoundingClientRect(); if (!r.width || !r.height) return;
+        const base = Math.round(r.height), all = [...this.sprites.values()], others = all.filter(s => !s.data.lead);
+        this.w = Math.round(r.width);
+        const cols = this.w < 520 ? 3 : this.w < 1250 ? 6 : 7, rows = 1 + Math.ceil(others.length / cols), plateH = 26, bottom = 14;
+        const fit = S => 10 * S + 8 + bottom + rows * (22 * S + plateH) + (rows - 1) * 2;
+        let S = this.w < 520 ? 2 : this.w < 980 ? 3 : 4; while (S > 2 && fit(S) > base) S--;
+        this.S = S;
+        const need = fit(S); this.h = Math.max(base, need);
+        if (need > base) this.stage.style.minHeight = need + 'px'; // tiny panes: grow a few px rather than overlap rows
+        const dpr = Math.min(3, window.devicePixelRatio || 1);
+        this.canvas.width = Math.round(this.w * dpr); this.canvas.height = Math.round(this.h * dpr);
+        this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0); this.ctx.imageSmoothingEnabled = false;
+        const top = 10 * S + 8, contentH = 22 * S + plateH, cellH = rows > 1 ? (this.h - top - bottom - contentH) / (rows - 1) : 0;
+        const spread = Math.min(1, Math.max(.6, this.w / (cols * 150))), cellW = this.w / cols * spread, left = (this.w - cellW * cols) / 2;
+        this.plateW = Math.min(this.w >= 1100 ? 160 : 150, Math.floor(cellW * .85));
+        const place = (s, cx, cy) => { s.home = { x: Math.round(cx), y: Math.round(cy) }; if (s.phase !== 'walking') { s.x = s.home.x; s.y = s.home.y; } };
+        for (const s of all.filter(x => x.data.lead)) place(s, this.w / 2, top + 16 * S);
+        others.forEach((s, i) => {
+          const row = Math.floor(i / cols), inRow = Math.min(cols, others.length - row * cols), offset = left + (cols - inRow) * cellW / 2;
+          place(s, offset + (i % cols + .5) * cellW, top + 16 * S + cellH * (row + 1));
+        });
+        for (const p of this.plates.values()) p.style.setProperty('--pw', this.plateW + 'px');
+        this.dirty = true; this.positionOverlay(); this.draw();
+      }
+      positionOverlay() {
+        const S = this.S, headY = 16 * S, half = this.plateW / 2 + 2;
+        for (const [id, s] of this.sprites) {
+          const p = this.plates.get(id), i = this.icons.get(id), b = this.bubbles.get(id);
+          const px = Math.max(half, Math.min(this.w - half, s.home.x));
+          p.style.left = px + 'px'; p.style.top = (s.home.y + 7 * S) + 'px';
+          i.style.left = s.x + 'px'; i.style.top = (s.y - headY - 2) + 'px';
+          b.style.left = Math.max(70, Math.min(this.w - 70, s.x)) + 'px'; b.style.top = (s.y - headY - (s.data.icon ? 20 : 4)) + 'px';
+        }
+      }
+
+      /* ---------- DOM plates ---------- */
+      renderPlate(id) {
+        const s = this.sprites.get(id), p = this.plates.get(id); if (!s || !p) return;
+        const d = s.data, t = this.t; p.innerHTML = ''; p.dataset.status = d.status;
+        const name = this.el('div', 'ctm-stage-plate-name');
+        const dot = this.el('i', 'ctm-stage-dot'); dot.dataset.s = d.status; dot.title = d.statusLabel;
+        name.append(dot, this.el('span', '', d.name));
+        const act = this.el('div', 'ctm-stage-plate-act', [d.activityLabel, d.parallel > 1 ? fmt(t('stage.parallel'), { n: d.parallel }) : ''].filter(Boolean).join(' · '));
+        act.dataset.act = d.activity ?? '';
+        if (d.ctxRatio != null) { const m = this.el('div', 'ctm-stage-meter'); m.dataset.tone = d.ctxRatio >= .9 ? 'error' : d.ctxRatio >= .75 ? 'warn' : ''; m.style.setProperty('--p', Math.round(d.ctxRatio * 100) + '%'); m.title = `${t('live.contextPressure')} ${Math.round(d.ctxRatio * 100)}%`; m.append(this.el('i')); name.append(m); }
+        const more = this.el('div', 'ctm-stage-plate-more');
+        more.append(this.el('small', 'ctm-sub', [d.capability, d.statusLabel].filter(Boolean).join(' · ')));
+        if (d.route) { const b = this.el('span', 'ctm-model-badge', d.routeAlias); b.dataset.grade = d.grade; b.title = d.route; more.append(b); }
+        more.append(this.el('div', 'ctm-stage-plate-task', d.task ? `#${d.task.id} ${d.task.subject ?? ''}` : t('live.noTask')));
+        if (d.openable && this.onOpen) { const btn = this.el('button', 'ctm-btn ctm-stage-open', t('stage.open')); btn.type = 'button'; btn.addEventListener('click', e => { e.stopPropagation(); this.onOpen(d.memberId); }); more.append(btn); }
+        p.append(name, act, more); p.dataset.act = d.activity ?? '';
+        p.title = `${d.name} · ${d.activityLabel ?? d.statusLabel}${d.route ? ' · ' + d.route : ''}`; p.setAttribute('aria-label', p.title);
+        this.renderIcon(id); this.renderBubble(id, Date.now());
+      }
+      renderIcon(id) {
+        const s = this.sprites.get(id), icon = this.icons.get(id); if (!s || !icon) return;
+        const glyph = s.cheer > 0 ? '✅' : s.data.icon ?? ''; icon.textContent = glyph; icon.hidden = !glyph; icon.dataset.act = s.cheer > 0 ? 'done' : s.data.activity ?? '';
+      }
+      renderBubble(id, now) {
+        const s = this.sprites.get(id), bubble = this.bubbles.get(id); if (!s || !bubble) return;
+        const text = s.cheer > 0 ? this.t('stage.act.doneBubble') : stageBubbleText(s.data, now, this.t);
+        if (bubble.textContent !== text) { bubble.textContent = text; bubble.title = text; }
+        bubble.hidden = !text; bubble.dataset.act = s.cheer > 0 ? 'done' : s.data.activity ?? '';
+      }
+
+      /* ---------- loop ---------- */
+      busy() {
+        return this.couriers.length > 0 || [...this.sprites.values()].some(s => s.phase === 'walking' || s.celebrate > 0 || s.cheer > 0
+          || s.data.status === 'running' || STAGE_BUSY_ACTS.has(s.data.activity));
+      }
+      loop(now) {
+        this.schedule();
+        if (!this.last) this.last = now;
+        // Reduced motion: still repaint state changes and the elapsed clock, but only a few frames per second.
+        const idle = !this.busy(), minFrame = this.reduced ? 500 : idle ? 66 : 0; if (now - this.last < minFrame) return;
+        const dt = Math.min(.05, (now - this.last) / 1000); this.last = now;
+        if (now - this.visibleAt > 1000) { const r = this.stage.getBoundingClientRect(); this.visible = r.width > 0 && r.bottom > 0 && r.top < (window.innerHeight || Infinity); this.visibleAt = now; }
+        if ((document.hidden || !this.visible) && !this.dirty) return; // hidden or scrolled-away hosts still get one repaint per change
+        this.update(dt); this.draw();
+      }
+      update(dt) {
+        const wall = Date.now(), second = Math.floor(wall / 1000), tickNow = second !== this.tick; this.tick = second;
+        for (const [id, s] of this.sprites) {
+          s.ft += dt; const rate = s.phase === 'walking' ? .12 : this.reduced ? 1 : STAGE_FRAME_RATE[s.data.activity] ?? .5;
+          if (s.ft > rate) { s.ft = 0; s.frame = (s.frame + 1) % 4; }
+          const cheered = s.cheer > 0;
+          if (s.celebrate > 0) s.celebrate = Math.max(0, s.celebrate - dt);
+          if (s.cheer > 0) s.cheer = Math.max(0, s.cheer - dt);
+          if (cheered && !s.cheer) { this.renderIcon(id); this.renderBubble(id, wall); }
+          s.gesture = s.data.activity === 'idle' && !this.reduced ? stageIdleGesture(id, wall) : null;
+          if (tickNow && s.data.bubbleSince != null) this.renderBubble(id, wall);
+          if (s.phase === 'walking' && s.path.length) {
+            const p = s.path[0], dx = p.x - s.x, dy = p.y - s.y, dist = Math.hypot(dx, dy), step = 70 * dt;
+            if (Math.abs(dx) > .5) s.facing = dx > 0 ? 1 : -1;
+            if (dist <= step) { s.x = p.x; s.y = p.y; s.path.shift(); if (!s.path.length) s.phase = phaseOf(s.data); } else { s.x += dx / dist * step; s.y += dy / dist * step; }
+          }
+        }
+        for (const c of this.couriers) { c.t += dt / c.dur; const k = Math.min(1, c.t), e = k < .5 ? 2 * k * k : 1 - Math.pow(-2 * k + 2, 2) / 2; c.x = c.from.x + (c.to.x - c.from.x) * e; c.y = c.from.y + (c.to.y - c.from.y) * e - Math.sin(k * Math.PI) * 24; }
+        this.couriers = this.couriers.filter(c => c.t < 1);
+        if (this.busy()) this.positionOverlay();
+      }
+      draw() {
+        const { ctx, w, h, S } = this; if (!w) return;
+        const c = this.stageColors();
+        stageDrawRoom(ctx, this.px, w, h, S, { floorA: c.floorA, floorB: c.floorB, grout: c.grout, wall: c.wall });
+        const desk = c.desk, deskTop = c.deskTop, ents = [];
+        for (const [id, s] of this.sprites) {
+          if (id === this.selected) ents.push({ y: -1, f: () => { const x = s.home.x - 14 * S, y = s.home.y - 19 * S; this.px(x, y, 28 * S, S, c.select); this.px(x, s.home.y + 9 * S, 28 * S, S, c.select); } });
+          ents.push({ y: s.home.y + 3 * S, f: () => stageDrawDesk(this.px, s, S, desk, deskTop) });
+          if (s.data.status !== 'inactive') ents.push({ y: s.y + (s.phase === 'walking' ? 6 * S : 0), f: () => stageDrawPerson(this.px, s, S) });
+        }
+        for (const c of this.couriers) ents.push({ y: 1e9, f: () => stageDrawCourier(this.px, c, S) });
+        ents.sort((a, b) => a.y - b.y).forEach(e => e.f());
+        this.dirty = false;
+      }
+    }
+    function phaseOf(data) { return data.status === 'running' ? 'typing' : 'idle'; }
+    /** Seconds per animation frame by activity: fast typing while writing, slow breathing when idle or dozing. */
+    const STAGE_FRAME_RATE = { writing: .12, terminal: .18, searching: .25, browsing: .3, messaging: .2, board: .25, working: .22, reading: .7, thinking: .4, waiting: .8, failed: .6, arriving: .3, idle: .5, offline: 1 };

package/client/08d-stage-adapter.js

@@ -0,0 +1,65 @@
+    // ---------- office stage: boardCards + live projections → sprite data, and the React host component ----------
+    /**
+     * Pure mapping, one entry per board card. Status/task/model come from boardCards (the same source as the member
+     * detail panel); the fine-grained activity, bubble and context pressure come from the member's own live projections.
+     */
+    function stageSprites(cards, { live, t = k => k, currentMemberId = null, canOpen = false, since } = {}) {
+      return (cards ?? []).map(card => {
+        const memberId = card.member?.id ?? null;
+        const proj = memberId && live?.projections ? live.projections(memberId) : undefined;
+        const act = proj?.capabilityTeamActivity, cur = act?.schemaVersion === 1 ? act.current : null;
+        const activity = stageActivityOf(card.status, act);
+        const toolAct = !['thinking', 'idle', 'offline', 'failed', 'arriving'].includes(activity);
+        const cp = proj?.contextPressure, projected = cp?.projectedTokens ?? cp?.pressureTokens;
+        const ctxRatio = typeof projected === 'number' && typeof cp?.contextWindow === 'number' && cp.contextWindow > 0 ? Math.min(1, Math.max(0, projected / cp.contextWindow)) : null;
+        const badge = card.model ? modelBadgeInfo(card.model, t) : null;
+        const task = card.task ? { id: card.task.id, subject: card.task.subject, status: card.task.status } : null;
+        const runSince = card.status === 'running' && memberId ? since?.get?.(memberId) ?? null : null;
+        const bubble = stageBubbleBase(activity, { cur, task, since: runSince, t });
+        return {
+          id: card.id, memberId, name: card.name, capability: card.role?.capability ?? (card.lead ? 'orchestrator' : ''), lead: !!card.lead,
+          status: card.status, statusLabel: label(t, `live.${card.status}`, card.status),
+          activity, activityLabel: label(t, `stage.act.${activity}`, activity), actKey: toolAct ? (cur?.id ?? cur?.startedAt ?? cur?.tool ?? '') : '',
+          task, route: card.model ?? null, routeAlias: badge?.alias ?? card.model ?? '', grade: badge?.grade ?? 'default',
+          icon: STAGE_ACT_GLYPH[activity] ?? '',
+          bubble: bubble.text, bubbleSince: bubble.since ?? null,
+          parallel: card.status === 'running' && typeof act?.activeCount === 'number' ? act.activeCount : 0,
+          ctxRatio,
+          openable: !!(canOpen && !card.lead && memberId && memberId !== currentMemberId && card.status !== 'provisioning' && card.status !== 'failed'),
+        };
+      });
+    }
+    const STAGE_COLLAPSED_KEY = 'dsh-capability-team-stage-collapsed';
+    /**
+     * React host for the pixel office. It renders the header and an empty host div; OfficeScene owns everything inside
+     * the host (canvas + DOM plates) so React never reconciles those nodes. Without a DOM (unit tests, SSR) it renders
+     * the header only.
+     */
+    function OfficeStage({ cards, live, t, open, currentMemberId, since, selected = null, onSelect }) {
+      const readCollapsed = () => { try { return window.localStorage?.getItem(STAGE_COLLAPSED_KEY) === '1'; } catch { return false; } };
+      const [collapsed, setCollapsed] = React.useState(readCollapsed());
+      const host = React.useRef(null), sceneRef = React.useRef(null), selectRef = React.useRef(onSelect);
+      selectRef.current = onSelect; // the scene outlives renders, so it always calls the latest callback
+      const sprites = stageSprites(cards, { live, t, currentMemberId, canOpen: !!open, since });
+      const seated = sprites.filter(s => s.status !== 'inactive').length;
+      const toggle = () => setCollapsed(prev => { const next = !prev; try { window.localStorage?.setItem(STAGE_COLLAPSED_KEY, next ? '1' : '0'); } catch { /* storage unavailable */ } return next; });
+      React.useEffect(() => {
+        const el = host.current;
+        if (!el || typeof document === 'undefined' || typeof requestAnimationFrame !== 'function') { sceneRef.current?.destroy(); sceneRef.current = null; return; }
+        if (!sceneRef.current) { sceneRef.current = new OfficeScene(el, el.querySelector('canvas'), el.querySelector('.ctm-stage-overlay'), { t, onOpen: open ? id => open(id) : null, onSelect: id => selectRef.current?.(id) }); }
+        sceneRef.current.t = t; sceneRef.current.sync(sprites); sceneRef.current.select(selected, false);
+      });
+      React.useEffect(() => () => { sceneRef.current?.destroy(); sceneRef.current = null; }, []);
+      return h('section', { className: 'ctm-stage', 'aria-label': t('stage.title'), ...(collapsed ? { 'data-collapsed': '' } : {}) },
+        h('div', { className: 'ctm-stage-head' },
+          h('span', { className: 'ctm-label' }, t('stage.title')),
+          h('span', { className: 'ctm-sub' }, fmt(t('stage.summary'), { n: seated, m: sprites.length })),
+          h('button', { type: 'button', className: 'ctm-btn ctm-stage-toggle', 'aria-expanded': !collapsed, onClick: toggle }, t(collapsed ? 'stage.expand' : 'stage.collapse'))),
+        collapsed ? null : h('div', { className: 'ctm-stage-office', ref: host },
+          h('canvas', { className: 'ctm-stage-canvas', 'aria-hidden': true }),
+          h('div', { className: 'ctm-stage-overlay' }),
+          sprites.length ? null : h('p', { className: 'ctm-stage-empty ctm-sub' }, t('stage.empty'))));
+    }
+    // test hooks for the pure helpers
+    Object.assign(OfficeStage, { sprites: stageSprites, palette: stagePalette, activityOf: stageActivityOf, bubbleText: stageBubbleText,
+      events: stageEvents, idleGesture: stageIdleGesture, toolGlyph: stageToolGlyph });

package/client/08e-stage-activity.js

@@ -0,0 +1,83 @@
+    // ---------- office stage: pure live-activity derivation (no DOM; unit-tested through OfficeStage.* hooks) ----------
+    /** Tool name → activity. First match wins, so `web_search` is browsing and `read_image` is reading. */
+    const STAGE_TOOL_ACTS = [
+      ['send_message', 'messaging'], ['spawn', 'messaging'], ['team_task', 'board'], ['wait_agent', 'waiting'],
+      ['web', 'browsing'], ['fetch', 'browsing'], ['browse', 'browsing'], ['omni', 'browsing'],
+      ['read', 'reading'], ['write', 'writing'], ['edit', 'writing'],
+      ['bash', 'terminal'], ['pwsh', 'terminal'], ['shell', 'terminal'], ['exec', 'terminal'],
+      ['grep', 'searching'], ['glob', 'searching'], ['search', 'searching'],
+    ];
+    const STAGE_ACT_GLYPH = { thinking: '💭', reading: '📖', writing: '✍️', terminal: '⌨️', searching: '🔍', browsing: '🌐',
+      messaging: '📨', board: '📋', waiting: '⏳', failed: '❗', working: '⚙️', arriving: '🚪', idle: '', offline: '' };
+    /** Activities that keep the render loop at full rate (anything animated beyond the idle gestures). */
+    const STAGE_BUSY_ACTS = new Set(['thinking', 'reading', 'writing', 'terminal', 'searching', 'browsing', 'messaging', 'board', 'waiting', 'working', 'arriving']);
+    function stageToolAct(tool) {
+      const name = String(tool ?? '').toLowerCase(); if (!name) return 'working';
+      return STAGE_TOOL_ACTS.find(([key]) => name.includes(key))?.[1] ?? 'working';
+    }
+    function stageToolGlyph(tool) { return tool ? STAGE_ACT_GLYPH[stageToolAct(tool)] : ''; }
+    /**
+     * One fine-grained activity per member from the pushed status + capabilityTeamActivity projection:
+     * offline (no session) / arriving (provisioning) / failed / tool category while a call runs / thinking while the
+     * model generates (phase model, settled-but-still-running, or no projection yet) / idle.
+     */
+    function stageActivityOf(status, act) {
+      if (status === 'inactive') return 'offline';
+      if (status === 'failed') return 'failed';
+      if (status === 'provisioning') return 'arriving';
+      if (status !== 'running') return 'idle';
+      const cur = act?.schemaVersion === 1 ? act.current : null;
+      if (act?.schemaVersion === 1 && act.phase === 'tool' && cur?.status === 'running') return stageToolAct(cur.tool);
+      return 'thinking';
+    }
+    const stageClock = ms => { const s = Math.max(0, Math.floor(ms / 1000)); return s < 60 ? `${s}s` : `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`; };
+    /** Bubble = base text + elapsed (recomputed by the scene once a second) + parallel count. */
+    function stageBubbleText(d, now, t = k => k) {
+      if (!d?.bubble) return '';
+      const parts = [d.bubble];
+      if (typeof d.bubbleSince === 'number' && now >= d.bubbleSince) parts.push(`· ${stageClock(now - d.bubbleSince)}`);
+      if (d.parallel > 1) parts.push(fmt(t('stage.parallel'), { n: d.parallel }));
+      return parts.join(' ');
+    }
+    /** Base bubble text and the start time it counts from, per activity. Idle/offline members stay quiet. */
+    function stageBubbleBase(activity, { cur, task, since, t }) {
+      const taskText = task ? `#${task.id} ${task.subject ?? ''}`.trim() : '';
+      if (activity === 'thinking') return { text: [t('stage.act.thinkingBubble'), taskText].filter(Boolean).join(' '), since };
+      if (activity === 'failed') return { text: t('stage.act.failedBubble'), since: null };
+      if (activity === 'arriving') return { text: t('stage.act.arriving'), since: null };
+      if (activity === 'idle' || activity === 'offline') return { text: '', since: null };
+      const tool = [cur?.summary || label(t, `stage.act.${activity}`, cur?.tool ?? ''), cur?.target ? `(${cur.target})` : ''].filter(Boolean).join(' ');
+      return { text: tool || t(`stage.act.${activity}`), since: typeof cur?.startedAt === 'number' ? cur.startedAt : since };
+    }
+    /**
+     * Deterministic idle gesture: every 4 s window each member has a hash-picked chance to stretch or sip coffee,
+     * so idle desks are alive without randomness (and tests can pin the result).
+     */
+    function stageIdleGesture(id, nowMs) {
+      const slot = Math.floor(nowMs / 4000), n = stageHash(`${id}:${slot}`) % 7;
+      return n === 0 ? 'stretch' : n === 1 ? 'coffee' : null;
+    }
+    /**
+     * Diff two sprite lists into one-shot effects. Mail flies Lead → teammate when a task turns in_progress for that
+     * teammate or the teammate wakes up while the Lead is messaging; teammate → Lead when the teammate starts a
+     * send_message call. Losing an in-progress task (done/removed) celebrates; a changed route flashes the badge.
+     */
+    function stageEvents(prev, next) {
+      const before = new Map((prev ?? []).map(d => [d.id, d])), out = [];
+      const lead = (next ?? []).find(d => d.lead), leadWas = lead ? before.get(lead.id) : null;
+      const leadMessaging = lead && (lead.activity === 'messaging' || leadWas?.activity === 'messaging');
+      for (const d of next ?? []) {
+        const was = before.get(d.id); if (!was) continue;
+        if (was.route !== d.route && d.route) out.push({ type: 'flash', id: d.id });
+        if (d.ctxRatio >= .9 && !(was.ctxRatio >= .9)) out.push({ type: 'sweat', id: d.id });
+        if (d.lead || !lead) continue;
+        const newTask = d.task?.status === 'in_progress' && (was.task?.id !== d.task.id || was.task?.status !== 'in_progress');
+        const woke = leadMessaging && d.status === 'running' && was.status !== 'running';
+        if (newTask || woke) out.push({ type: 'mail', from: lead.id, to: d.id });
+        if (d.activity === 'messaging' && (was.activity !== 'messaging' || was.actKey !== d.actKey)) out.push({ type: 'mail', from: d.id, to: lead.id });
+        if (was.task?.status === 'in_progress' && d.task?.id !== was.task.id) out.push({ type: 'celebrate', id: d.id });
+      }
+      if (lead && leadWas && lead.activity === 'messaging' && (leadWas.activity !== 'messaging' || leadWas.actKey !== lead.actKey)
+        && !out.some(e => e.type === 'mail' && e.from === lead.id)) out.push({ type: 'mail', from: lead.id, to: null });
+      return out;
+    }

package/client/09-team-board.js

@@ -0,0 +1,181 @@
+    /**
+     * Team workbench: the pixel office plus a member detail panel. Selection lives here (React) — OfficeScene reports
+     * clicks through `onSelect`; `selectedId` lets a host (or a test) pin the selection from outside.
+     */
+    function TeamBoard({ roles, activity, allocations, since, t, open, live, usage, runtimeState, currentMemberId, leadSessionId, selectedId }) {
+      const cards = boardCards(localizeRoles(roles, t), activity, allocations);
+      const running = cards.filter(c => c.status === 'running').length;
+      const [picked, setPicked] = React.useState({ stageSelected: null });
+      const selected = selectedId !== undefined ? selectedId : (picked?.stageSelected ?? null);
+      const chosen = selected ? cards.find(c => c.id === selected) ?? null : null;
+      const openable = c => Boolean(open && !c.lead && c.member?.id && (!currentMemberId || c.member.id !== currentMemberId) && c.status !== 'provisioning' && c.status !== 'failed');
+      const tasks = activity?.tasks ?? [];
+      const taskRevSig = tasks.map(tk => {
+        const b = Array.isArray(tk.blockedBy) ? tk.blockedBy.join(',') : (tk.blockedBy ?? '');
+        return `${tk.id}:${tk.revision ?? ''}:${tk.status ?? ''}:${tk.subject ?? ''}:${tk.ownerName ?? ''}:${b}`;
+      }).join('|');
+      const depsView = React.useMemo ? React.useMemo(() => taskDependencyView(tasks, t), [taskRevSig, t]) : taskDependencyView(tasks, t);
+
+      // Local 1Hz cooldown clock: run only with cooldowns; stop when hidden and recalculate when visible
+      const [now, setNow] = React.useState(Date.now());
+      const hasCooling = Boolean(runtimeState?.data?.members?.some(m => Array.isArray(m.cooling) && m.cooling.some(c => (c.until ?? 0) > now)));
+      React.useEffect(() => {
+        let timer = null;
+        const stop = () => {
+          if (timer) {
+            clearInterval(timer);
+            timer = null;
+          }
+        };
+        const start = () => {
+          if (timer) return;
+          if (typeof document !== 'undefined' && document.visibilityState === 'hidden') return;
+          if (!hasCooling) return;
+          timer = setInterval(() => {
+            if (typeof document !== 'undefined' && document.visibilityState === 'hidden') {
+              stop();
+              return;
+            }
+            setNow(Date.now());
+          }, 1000);
+        };
+
+        const onVis = () => {
+          if (typeof document !== 'undefined' && document.visibilityState === 'visible') {
+            setNow(Date.now());
+            start();
+          } else {
+            stop();
+          }
+        };
+
+        start();
+        if (typeof document !== 'undefined' && document.addEventListener) {
+          document.addEventListener('visibilitychange', onVis);
+        }
+        return () => {
+          stop();
+          if (typeof document !== 'undefined' && document.removeEventListener) {
+            document.removeEventListener('visibilitychange', onVis);
+          }
+        };
+      }, [hasCooling]);
+
+      const coolingBadges = memberSessionId => {
+        if (!memberSessionId || !runtimeState?.data?.members) return null;
+        const m = runtimeState.data.members.find(rm => rm.sessionId === memberSessionId);
+        if (!m || !Array.isArray(m.cooling) || !m.cooling.length) return null;
+        const seenRoutes = new Set();
+        const badges = [];
+        for (const c of m.cooling) {
+          const rKey = typeof c.route === 'object' && c.route ? `${c.route.provider ?? ''}/${c.route.model ?? ''}` : String(c.route ?? '');
+          if (seenRoutes.has(rKey)) continue;
+          seenRoutes.add(rKey);
+          const remainingSec = Math.max(0, Math.ceil(((c.until ?? 0) - now) / 1000));
+          if (remainingSec > 0) {
+            badges.push(h('span', { key: rKey, className: 'ctm-badge', 'data-tone': 'cooling', title: `${rKey}: ${c.until}` },
+              fmt(t('runtime.cooling'), { s: remainingSec })));
+          }
+        }
+        return badges.length ? h('div', { className: 'ctm-chips' }, ...badges) : null;
+      };
+
+      const switchNotices = memberSessionId => {
+        if (!memberSessionId || !runtimeState?.data?.members) return null;
+        const m = runtimeState.data.members.find(rm => rm.sessionId === memberSessionId);
+        if (!m || !Array.isArray(m.switches) || !m.switches.length) return null;
+        const seenIds = new Set();
+        const uniqueSwitches = [];
+        for (const s of m.switches) {
+          const sid = s.id ?? `${s.turn}:${s.step}:${s.attempt}`;
+          if (seenIds.has(sid)) continue;
+          seenIds.add(sid);
+          uniqueSwitches.push(s);
+        }
+        const latest = uniqueSwitches[0];
+        if (!latest) return null;
+        const rFrom = typeof latest.from === 'object' && latest.from ? `${latest.from.provider ? latest.from.provider + '/' : ''}${latest.from.model ?? ''}` : String(latest.from ?? '');
+        const rTo = typeof latest.to === 'object' && latest.to ? `${latest.to.provider ? latest.to.provider + '/' : ''}${latest.to.model ?? ''}` : String(latest.to ?? '');
+        const reasonText = label(t, `runtime.reason.${latest.reason}`, latest.reason);
+        const detailParts = [latest.code, latest.status].filter(Boolean);
+        const detailText = detailParts.length ? ` · ${detailParts.join('/')}` : '';
+        const noticeText = t('runtime.switched', { from: rFrom, to: rTo, reason: reasonText, detail: detailText });
+        const finalText = noticeText.startsWith('runtime.switched') ? fmt(en['runtime.switched'], { from: rFrom, to: rTo, reason: reasonText, detail: detailText }) : noticeText;
+        return h('div', { className: 'ctm-bd-switch', title: finalText }, finalText);
+      };
+      const card = c => {
+        // Item 9: when there is a configured model AND the last actually-requested model differs from it, show
+        // both badges instead of collapsing to one route. When there is no configured model to contrast against
+        // (e.g. no role/allocation data loaded yet), fall back to a single badge for whichever model is known —
+        // this keeps the pre-existing single-badge rendering intact for that case.
+        const showDual = !!c.configuredModel && c.modelDiffers;
+        const singleModel = showDual ? null : (c.lastRequestModel ?? c.configuredModel);
+        const singleBadge = singleModel ? modelBadgeInfo(singleModel, t) : null;
+        const singleIsLive = singleModel === c.lastRequestModel && c.liveModel;
+        const configuredBadge = showDual ? modelBadgeInfo(c.configuredModel, t) : null;
+        const lastRequestBadge = showDual ? modelBadgeInfo(c.lastRequestModel, t) : null;
+        // The warning marker replaces the plain "not in config" tag, so the card says it once.
+        const lastRequestTag = c.lastRequestIsFallback ? t('live.fallback') : c.routeWarn ? null : t('live.notInConfig');
+        const warn = c.routeWarn ? routeWarnBadge(t) : null;
+
+        return h('div', { key: c.id, className: 'ctm-bd-card', 'data-status': c.status, 'data-card': c.id, ...(c.delegated ? { 'data-delegated': '' } : {}),
+          ...(currentMemberId && c.member?.id === currentMemberId ? { 'data-current': '' } : {}),
+          ...(openable(c) ? { role: 'button', tabIndex: 0, title: t('live.open'), 'data-open': '', onClick: () => open(c.member.id),
+            onKeyDown: event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); open(c.member.id); } } } : {}) },
+          openable(c) ? h('button', {
+            type: 'button', className: 'ctm-bd-open-btn', title: t('live.open'), 'aria-label': `${t('live.open')}: ${c.name}`,
+            onClick: event => { event.stopPropagation(); open(c.member.id); },
+            onKeyDown: event => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                event.stopPropagation();
+                open(c.member.id);
+              }
+            },
+          }, t('live.openBtn')) : null,
+          h('div', { className: 'ctm-bd-top' },
+            h('span', { className: 'ctm-bd-avatar', 'aria-hidden': true }, Array.from(c.name)[0] ?? '?'),
+            h('div', { className: 'ctm-who' }, h('span', { className: 'ctm-name' }, c.name), h('span', { className: 'ctm-sub' }, c.role?.capability ?? c.id)),
+            h('span', { className: 'ctm-bd-state', 'data-tone': LIVE[c.status] },
+              h('i', { className: 'ctm-bd-dot', 'aria-hidden': true }), label(t, `live.${c.status}`, c.status),
+              c.status === 'running' && since.get(c.member?.id) ? h('span', { className: 'ctm-bd-time' }, elapsed(Date.now() - since.get(c.member.id))) : null)),
+          statusBubble(c, t, live),
+          singleBadge ? h('div', { className: 'ctm-bd-model', title: `${singleModel} (${t(singleIsLive ? (c.member?.modelFrom === 'pick' ? 'live.leadPick' : 'live.liveModel') : 'live.configModel')})` },
+            h('span', { className: 'ctm-ov-hop ctm-model-badge', 'data-grade': singleBadge.grade, ...(singleIsLive ? { 'data-primary': '' } : {}) },
+              singleBadge.gradeLabel ? h('span', { className: 'ctm-badge-rank' }, singleBadge.gradeLabel) : null,
+              h('span', { className: 'ctm-badge-alias' }, singleBadge.alias),
+              singleIsLive ? null : h('span', { className: 'ctm-sub', 'data-config-model': '' }, t('live.configTag'))),
+            singleIsLive ? warn : null) : null,
+          configuredBadge ? h('div', { className: 'ctm-bd-model', title: `${c.configuredModel} (${t('live.configModel')})` },
+            h('span', { className: 'ctm-ov-hop ctm-model-badge', 'data-grade': configuredBadge.grade },
+              configuredBadge.gradeLabel ? h('span', { className: 'ctm-badge-rank' }, configuredBadge.gradeLabel) : null,
+              h('span', { className: 'ctm-badge-alias' }, configuredBadge.alias))) : null,
+          lastRequestBadge ? h('div', { className: 'ctm-bd-model', 'data-last-request': '', title: `${c.lastRequestModel} (${t('live.liveModel')})` },
+            h('span', { className: 'ctm-ov-hop ctm-model-badge', 'data-grade': lastRequestBadge.grade, 'data-primary': '' },
+              h('span', { className: 'ctm-badge-rank' }, t('live.lastRequest')),
+              h('span', { className: 'ctm-badge-alias' }, lastRequestBadge.alias),
+              lastRequestTag ? h('span', { className: 'ctm-sub' }, lastRequestTag) : null),
+            warn) : null,
+          cardMeters(c, live, usage, t),
+          coolingBadges(c.member?.id),
+          switchNotices(c.member?.id),
+          leadSessionId && c.member && !c.lead && runtimeState?.data?.taskControl
+            ? h(TaskControl, { leadSessionId, roleId: c.id, name: c.name, configured: c.configuredModel, control: runtimeState.data.taskControl, t }) : null,
+          c.member?.diagnostics?.length ? h('div', { className: 'ctm-sub ctm-warn' }, c.member.diagnostics.join(t('common.listSep'))) : null,
+          h('div', { className: 'ctm-bd-bar', 'aria-hidden': true }));
+      };
+      return h('div', { className: 'ctm-bd' },
+        h('div', { className: 'ctm-bd-head' },
+          h('span', { className: 'ctm-label' }, t('live.title')),
+          running ? badge(fmt(t('live.runningCount'), { n: running }), 'brand', 'run') : null,
+          activity?.at ? h('span', { className: 'ctm-sub ctm-bd-at' }, h('i', { className: 'ctm-bd-pulse', 'aria-hidden': true }), t('live.polling')) : null),
+        activity?.unavailable ? h('p', { className: 'ctm-ov-note ctm-warn' }, activity.unavailable) : null,
+        h(OfficeStage, { cards, live, t, open, currentMemberId, since, selected: chosen?.id ?? null, onSelect: id => setPicked({ stageSelected: id ?? null }) }),
+        cards.length ? h('section', { className: 'ctm-stage-detail', 'aria-live': 'polite', 'aria-label': t('stage.detail') },
+          chosen ? h('div', { className: 'ctm-stage-detail-head' },
+            h('span', { className: 'ctm-label' }, t('stage.detail')),
+            h('button', { type: 'button', className: 'ctm-btn', onClick: () => setPicked({ stageSelected: null }) }, t('stage.detailClose'))) : null,
+          chosen ? card(chosen) : h('p', { className: 'ctm-sub ctm-stage-detail-hint' }, t('stage.detailHint'))) : null,
+        depsView);
+    }
+    TeamBoard.detail = (props, id) => TeamBoard({ ...props, selectedId: id }); // test/host hook: board with one member's detail open