Bot Workspace Mockup

React · Workspace mockup: your bots' floor
---
title: Bot Workspace Mockup
template: canvas
---
```react fill title="Workspace mockup: your bots' floor"
import { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';

const AISLE = 0.6;
const BOTS = [
  { id: 'gizzi', name: 'Gizzi', role: 'Chief of staff', color: '#E8742C', desk: [-6.5, -4.9], face: 0, tasks: ['Planning the week', 'Writing the morning brief', 'Reviewing hand-offs'] },
  { id: 'raven', name: 'Raven', role: 'Research', color: '#3B82F6', desk: [-2, -1], face: Math.PI, tasks: ['Reading 14 sources on robot hands', 'Summarizing the market scan', 'Checking citations'] },
  { id: 'jev', name: 'Jev', role: 'Sales', color: '#10B981', desk: [1, -1], face: Math.PI, tasks: ['Drafting follow-ups for 3 leads', 'Updating the pipeline', 'Booking a call'] },
  { id: 'clawd', name: 'Clawd', role: 'Code', color: '#D97757', desk: [4, -1], face: Math.PI, tasks: ['Fixing the phone header', 'Running the build', 'Opening a PR'] },
  { id: 'coda', name: 'Coda', role: 'Code review', color: '#8B5CF6', desk: [-2, 2.2], face: 0, tasks: ['Reviewing PR #1966', 'Reading the diff', 'Writing review notes'] },
  { id: 'grok', name: 'Grok', role: 'X intel', color: '#71717A', desk: [1, 2.2], face: 0, tasks: ['Scanning the X timeline', 'Tracking trending topics', 'Clipping 3 posts'] },
  { id: 'pip', name: 'Pip', role: 'Calendar + mail', color: '#EC4899', desk: [4, 2.2], face: 0, tasks: ['Sorting the inbox', 'Moving Thursday standup', 'Drafting meeting invites'] },
];
const YOU_DESK = [-6.5, 3.6];
const LOUNGE = [[6.4, 4.6], [7.4, 4.0], [6.0, 3.6], [7.6, 5.1]];
const COFFEE = [7.2, -4.2];
const SYNC = [[-7.6, -3.6], [-5.4, -3.6], [-7.9, -4.4], [-5.1, -4.4], [-7.2, -3.2], [-5.8, -3.2]];
const WORD = { working: 'Working', waiting: 'Needs you', talking: 'Talking', idle: 'Idle', walking: 'Walking' };
const TONE = { working: '#6366F1', waiting: '#F59E0B', talking: '#10B981', idle: '#A1A1AA', walking: '#A1A1AA' };
const TIMES = {
  day: { bgL: '#EEF0F3', bgD: '#0F1013', sun: 1.25, hemi: 0.9, win: '#CFE6FF' },
  evening: { bgL: '#F3E9E4', bgD: '#1A1615', sun: 0.7, hemi: 0.6, win: '#FFC9A3' },
  night: { bgL: '#C9CDD6', bgD: '#0D0E12', sun: 0.15, hemi: 0.35, win: '#24304A' },
};
const pick = (a) => a[Math.floor(Math.random() * a.length)];
const inOffice = (x, z) => x < -4.5 && z < -2.5;
const seatOf = (b) => [b.desk[0], b.desk[1] + (b.face === 0 ? -0.85 : 0.85)];
function route(from, to) {
  const pts = [];
  let x = from[0];
  if (inOffice(from[0], from[1])) { pts.push([-6.5, -3]); x = -6.5; }
  pts.push([x, AISLE]);
  if (inOffice(to[0], to[1])) { pts.push([-6.5, AISLE], [-6.5, -3]); } else pts.push([to[0], AISLE]);
  pts.push(to);
  return pts;
}
function isDark() {
  return document.documentElement.classList.contains('dark') || window.matchMedia('(prefers-color-scheme: dark)').matches;
}

export default function App() {
  const mount = useRef(null);
  const labelsRef = useRef(null);
  const sim = useRef(null);
  const [snap, setSnap] = useState([]);
  const [feed, setFeed] = useState([]);
  const [time, setTime] = useState('day');
  const [sel, setSel] = useState(null);
  const [dark, setDark] = useState(isDark());

  useEffect(() => {
    const mo = new MutationObserver(() => setDark(isDark()));
    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    return () => mo.disconnect();
  }, []);

  useEffect(() => {
    const el = mount.current;
    const scene = new THREE.Scene();
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    el.appendChild(renderer.domElement);
    const cam = new THREE.OrthographicCamera(-10, 10, 10, -10, 0.1, 200);
    cam.position.set(18, 19, 18);
    cam.lookAt(0.5, 0, -0.2);

    const hemi = new THREE.HemisphereLight(0xffffff, 0x9aa0aa, 0.9);
    scene.add(hemi);
    const sun = new THREE.DirectionalLight(0xffffff, 1.2);
    sun.position.set(8, 16, 6);
    sun.castShadow = true;
    sun.shadow.mapSize.set(2048, 2048);
    Object.assign(sun.shadow.camera, { left: -14, right: 14, top: 14, bottom: -14 });
    scene.add(sun);

    const M = (c, o = {}) => new THREE.MeshStandardMaterial({ color: c, roughness: 0.7, ...o });
    const box = (w, h, d, m, x, y, z, parent = scene) => {
      const b = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), m);
      b.position.set(x, y, z); b.castShadow = true; b.receiveShadow = true; parent.add(b); return b;
    };
    const floorM = M('#E6E7EA');
    box(20, 0.3, 14, floorM, 0, -0.15, -0.5);
    const wallM = M('#F7F7F8');
    box(20, 3.2, 0.2, wallM, 0, 1.6, -7.5);
    box(0.2, 3.2, 14, wallM, -10, 1.6, -0.5);
    const winM = M('#CFE6FF', { emissive: '#CFE6FF', emissiveIntensity: 0.25, roughness: 0.2 });
    for (let i = 0; i < 6; i++) box(2.6, 2.2, 0.05, winM, -4 + i * 2.8, 1.75, -7.38);
    const glassM = new THREE.MeshStandardMaterial({ color: '#BFD7EA', transparent: true, opacity: 0.22, roughness: 0.1 });
    box(1.9, 2.4, 0.05, glassM, -8.95, 1.2, -2.5); box(1.6, 2.4, 0.05, glassM, -5.3, 1.2, -2.5);
    box(0.05, 2.4, 5, glassM, -4.5, 1.2, -5);
    // lounge
    const sofaM = M('#5B7C8D');
    box(3.4, 0.5, 0.9, sofaM, 6.8, 0.25, 5.6); box(0.9, 0.5, 2.6, sofaM, 8.6, 0.25, 4.3);
    box(3.4, 0.6, 0.25, sofaM, 6.8, 0.6, 6.0);
    const rug = new THREE.Mesh(new THREE.CircleGeometry(2.2, 40), M('#A7D3B5'));
    rug.rotation.x = -Math.PI / 2; rug.position.set(6.6, 0.01, 4.2); rug.receiveShadow = true; scene.add(rug);
    box(1.2, 0.35, 0.7, M('#FFFFFF'), 6.6, 0.18, 4.2);
    // coffee bar
    box(2.8, 1.0, 0.8, M('#FFFFFF'), 7.6, 0.5, -5.6); box(0.4, 0.5, 0.4, M('#3F3F46'), 7.0, 1.25, -5.6);
    // plants
    const plant = (x, z) => { box(0.45, 0.5, 0.45, M('#FFFFFF'), x, 0.25, z); const l = new THREE.Mesh(new THREE.SphereGeometry(0.55, 12, 10), M('#4CA36B')); l.position.set(x, 0.95, z); l.castShadow = true; scene.add(l); };
    plant(-9.2, 5.6); plant(9.2, -6.8); plant(-3.8, -6.8); plant(2.6, 5.8);

    // desks
    const screens = {};
    const mkDesk = (id, [x, z], face, color, label) => {
      const g = new THREE.Group(); g.position.set(x, 0, z); g.rotation.y = face; scene.add(g);
      const r = new THREE.Mesh(new THREE.PlaneGeometry(2.6, 2.4), M(color, { transparent: true, opacity: 0.18 }));
      r.rotation.x = -Math.PI / 2; r.position.set(0, 0.012, -0.35); g.add(r);
      box(1.8, 0.08, 0.85, M('#FFFFFF'), 0, 0.74, 0, g);
      [[-0.8, -0.35], [0.8, -0.35], [-0.8, 0.35], [0.8, 0.35]].forEach(([a, b]) => box(0.05, 0.72, 0.05, M('#A1A1AA'), a, 0.36, b, g));
      box(0.08, 0.3, 0.08, M('#3F3F46'), 0, 0.93, 0.15, g);
      const sm = M('#1F2937', { emissive: color, emissiveIntensity: 0 });
      box(0.9, 0.5, 0.05, sm, 0, 1.3, 0.15, g);
      box(0.55, 0.08, 0.55, M('#3F3F46'), 0, 0.45, -0.85, g);
      screens[id] = sm;
      return g;
    };
    BOTS.forEach((b) => mkDesk(b.id, b.desk, b.face, b.color));
    // the user's desk
    mkDesk('you', YOU_DESK, Math.PI, '#F59E0B');
    const you = new THREE.Group(); you.position.set(YOU_DESK[0], 0, YOU_DESK[1] + 0.85); you.rotation.y = Math.PI; scene.add(you);
    const ym = new THREE.Mesh(new THREE.CapsuleGeometry(0.28, 0.55, 6, 12), M('#E4E4E7')); ym.position.y = 0.75; ym.castShadow = true; you.add(ym);
    const yh = new THREE.Mesh(new THREE.SphereGeometry(0.24, 16, 12), M('#F1D3B8')); yh.position.y = 1.35; yh.castShadow = true; you.add(yh);

    // bots
    const ringGeo = new THREE.RingGeometry(0.5, 0.62, 32);
    const st = BOTS.map((b) => {
      const g = new THREE.Group();
      const body = new THREE.Mesh(new THREE.CapsuleGeometry(0.32, 0.45, 6, 14), M(b.color, { roughness: 0.45 }));
      body.position.y = 0.62; body.castShadow = true; g.add(body);
      const visor = new THREE.Mesh(new THREE.BoxGeometry(0.42, 0.2, 0.08), M('#111827', { roughness: 0.2 }));
      visor.position.set(0, 0.86, 0.29); g.add(visor);
      const eyeM = new THREE.MeshBasicMaterial({ color: '#7DF9FF' });
      [-0.09, 0.09].forEach((x) => { const e = new THREE.Mesh(new THREE.SphereGeometry(0.03, 8, 8), eyeM); e.position.set(x, 0.87, 0.34); g.add(e); });
      const ant = new THREE.Mesh(new THREE.SphereGeometry(0.06, 8, 8), new THREE.MeshBasicMaterial({ color: b.color })); ant.position.y = 1.32; g.add(ant);
      const ringM = new THREE.MeshBasicMaterial({ color: '#A1A1AA', transparent: true, opacity: 0.9, side: THREE.DoubleSide });
      const ring = new THREE.Mesh(ringGeo, ringM); ring.rotation.x = -Math.PI / 2; ring.position.y = 0.02; g.add(ring);
      const seat = seatOf(b);
      g.position.set(seat[0], 0, seat[1]);
      g.rotation.y = b.face;
      g.userData.id = b.id;
      g.scale.setScalar(1.3);
      scene.add(g);
      return { ...b, g, body, ringM, path: [], onArrive: null, status: 'working', task: pick(b.tasks), spot: 'desk', faceAt: g.rotation.y, t: Math.random() * 6 };
    });
    const byId = Object.fromEntries(st.map((s) => [s.id, s]));

    const labels = labelsRef.current;
    labels.innerHTML = '';
    st.forEach((s) => {
      const d = document.createElement('div');
      d.style.cssText = 'position:absolute;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;font:600 11px/1.2 ui-sans-serif,system-ui;';
      labels.appendChild(d); s.label = d;
    });

    let feedId = 0;
    const log = (who, text, tone = 'working') => {
      const now = new Date();
      setFeed((f) => [{ id: feedId++, who, text, tone, at: now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) }, ...f].slice(0, 30));
    };
    const walk = (s, to, face, cb) => {
      s.path = route([s.g.position.x, s.g.position.z], to); s.onArrive = () => { s.faceAt = face; cb && cb(); };
      s.prev = s.status; s.status = 'walking';
    };
    const backToDesk = (s, status = 'working', task) => {
      walk(s, seatOf(s), s.face, () => { s.status = status; s.spot = 'desk'; if (task) s.task = task; });
    };
    const busy = (s) => s.status === 'walking' || s.status === 'waiting' || s.spot === 'sync';

    const events = [
      () => { const s = pick(st.filter((x) => !busy(x) && x.id !== 'gizzi')); if (!s) return; const t = pick(s.tasks); if (s.spot !== 'desk') { backToDesk(s, 'working', t); log(s.name, `Back at the desk: ${t.toLowerCase()}`); } else { s.task = t; s.status = 'working'; log(s.name, `Started: ${t.toLowerCase()}`); } },
      () => { const free = st.filter((x) => !busy(x) && x.spot === 'desk'); if (free.length < 2) return; const a = pick(free.filter((x) => x.id !== 'gizzi')); const b = pick(free.filter((x) => x !== a)); const [bx, bz] = b.id === 'gizzi' ? [-6.5, -3.0] : seatOf(b); const side = b.id === 'gizzi' ? 0 : bx > a.g.position.x ? -0.75 : 0.75; const what = pick(['the research notes', 'a draft', 'the PR link', 'a lead list', 'the schedule']); a.task = `Handing ${what} to ${b.name}`; walk(a, [bx + side, bz], side === 0 ? Math.PI : side < 0 ? Math.PI / 2 : -Math.PI / 2, () => { a.status = 'talking'; b.status = 'talking'; log(a.name, `Handed ${what} to ${b.name}`, 'talking'); setTimeout(() => { if (b.status === 'talking') b.status = 'working'; backToDesk(a, 'working', pick(a.tasks)); }, 3200); }); },
      () => { const s = pick(st.filter((x) => !busy(x) && x.id !== 'gizzi')); if (!s) return; const n = st.filter((x) => x.status === 'waiting' || x.goingToYou).length; if (n >= 3) return; const q = pick(['Approve sending the follow-up?', 'Which time works Thursday?', 'OK to merge the PR?', 'Publish this summary?']); s.goingToYou = true; s.task = q; walk(s, [YOU_DESK[0] - 1 + n * 1.0, YOU_DESK[1] - 1.0], 0, () => { s.goingToYou = false; s.status = 'waiting'; s.spot = 'you'; log(s.name, `Needs you: ${q}`, 'waiting'); }); },
      () => { const s = pick(st.filter((x) => !busy(x) && x.id !== 'gizzi' && x.spot === 'desk')); if (!s) return; const spot = Math.random() < 0.5 ? pick(LOUNGE) : COFFEE; s.task = spot === COFFEE ? 'Getting coffee' : 'Taking a break'; walk(s, spot, 0, () => { s.status = 'idle'; s.spot = 'lounge'; log(s.name, s.task, 'idle'); }); },
      () => { const s = pick(st.filter((x) => !busy(x) && x.spot === 'desk')); if (!s || s.status === 'talking') return; s.status = 'talking'; s.task = 'On a call with you'; log(s.name, 'Joined a voice call', 'talking'); setTimeout(() => { if (s.status === 'talking') { s.status = 'working'; s.task = pick(s.tasks); } }, 5000); },
    ];
    let syncing = false;
    const teamSync = () => {
      if (syncing) return; syncing = true; const g = byId.gizzi; g.task = 'Running the team sync'; log('Gizzi', 'Called a team sync in the office');
      const crew = st.filter((x) => x.id !== 'gizzi' && !busy(x)).slice(0, SYNC.length);
      crew.forEach((s, i) => { s.task = 'In the team sync with Gizzi'; s.spot = 'sync'; walk(s, SYNC[i], Math.atan2(-6.5 - SYNC[i][0], -4.4 - SYNC[i][1]), () => { s.status = 'talking'; }); });
      setTimeout(() => { crew.forEach((s) => { s.spot = 'desk'; backToDesk(s, 'working', pick(s.tasks)); }); g.task = pick(g.tasks); syncing = false; log('Gizzi', 'Wrapped the team sync'); }, 9000);
    };
    let tick = 0;
    const evTimer = setInterval(() => { tick++; if (tick % 9 === 0) teamSync(); else pick(events)(); }, 2600);
    setTimeout(() => events[2](), 800);

    sim.current = {
      answer: (id) => { const s = byId[id]; if (!s || s.status !== 'waiting') return; log('You', `Answered ${s.name}`, 'working'); backToDesk(s, 'working', pick(s.tasks)); },
      setTime: (k, dk) => { const T = TIMES[k]; scene.background = new THREE.Color(dk ? T.bgD : T.bgL); sun.intensity = T.sun; hemi.intensity = T.hemi; winM.color.set(T.win); winM.emissive.set(T.win); floorM.color.set(dk ? '#383A41' : '#E6E7EA'); wallM.color.set(dk ? '#33363C' : '#F7F7F8'); },
    };
    sim.current.setTime('day', isDark());

    const ray = new THREE.Raycaster(); const mouse = new THREE.Vector2();
    const onClick = (e) => {
      const r = renderer.domElement.getBoundingClientRect();
      mouse.set(((e.clientX - r.left) / r.width) * 2 - 1, -((e.clientY - r.top) / r.height) * 2 + 1);
      ray.setFromCamera(mouse, cam);
      const hit = ray.intersectObjects(st.map((s) => s.g), true)[0];
      let o = hit && hit.object; while (o && !o.userData.id) o = o.parent;
      setSel(o ? o.userData.id : null);
    };
    renderer.domElement.addEventListener('click', onClick);

    const resize = () => {
      const w = el.clientWidth, h = el.clientHeight; renderer.setSize(w, h);
      const a = w / h, f = a < 1 ? 11 / a : 8.2; cam.left = -f * a; cam.right = f * a; cam.top = f; cam.bottom = -f; cam.updateProjectionMatrix();
    };
    const ro = new ResizeObserver(resize); ro.observe(el); resize();

    const clock = new THREE.Clock(); let raf; const v = new THREE.Vector3();
    const loop = () => {
      const dt = Math.min(0.05, clock.getDelta());
      st.forEach((s) => {
        s.t += dt;
        if (s.path.length) {
          const [tx, tz] = s.path[0]; const dx = tx - s.g.position.x, dz = tz - s.g.position.z; const d = Math.hypot(dx, dz);
          if (d < 0.05) { s.path.shift(); if (!s.path.length && s.onArrive) { const cb = s.onArrive; s.onArrive = null; cb(); } }
          else { const step = Math.min(d, 2.6 * dt); s.g.position.x += (dx / d) * step; s.g.position.z += (dz / d) * step; s.faceAt = Math.atan2(dx, dz); }
          s.body.position.y = 0.62 + Math.abs(Math.sin(s.t * 10)) * 0.08;
        } else s.body.position.y = 0.62 + Math.sin(s.t * 2) * 0.02;
        let df = s.faceAt - s.g.rotation.y; df = Math.atan2(Math.sin(df), Math.cos(df)); s.g.rotation.y += df * Math.min(1, dt * 10);
        const tone = TONE[s.status]; s.ringM.color.set(tone); s.ringM.opacity = s.status === 'waiting' ? 0.6 + Math.sin(s.t * 5) * 0.35 : 0.85;
        screens[s.id].emissiveIntensity = s.status === 'working' && s.spot === 'desk' ? 0.9 + Math.sin(s.t * 3) * 0.15 : 0.05;
        v.set(s.g.position.x, 1.75, s.g.position.z).project(cam);
        const w = el.clientWidth, h = el.clientHeight;
        s.label.style.left = `${(v.x * 0.5 + 0.5) * w}px`; s.label.style.top = `${(-v.y * 0.5 + 0.5) * h}px`;
        const bubble = s.status === 'waiting' ? `<div style="margin-bottom:3px;padding:3px 7px;border-radius:8px;background:#F59E0B;color:#1c1300;font-weight:600">${s.task}</div>` : '';
        s.label.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center">${bubble}<div style="display:flex;align-items:center;gap:5px;padding:2px 7px;border-radius:999px;background:rgba(17,24,39,.78);color:#fff"><span style="width:6px;height:6px;border-radius:9px;background:${tone}"></span>${s.name}</div></div>`;
      });
      renderer.render(scene, cam); raf = requestAnimationFrame(loop);
    };
    loop();
    const snapT = setInterval(() => setSnap(st.map((s) => ({ id: s.id, name: s.name, role: s.role, color: s.color, status: s.status === 'walking' ? (s.goingToYou ? 'waiting' : s.prev === 'idle' ? 'idle' : 'working') : s.status, walking: s.status === 'walking', task: s.task }))), 400);
    return () => { cancelAnimationFrame(raf); clearInterval(evTimer); clearInterval(snapT); ro.disconnect(); renderer.dispose(); el.removeChild(renderer.domElement); };
  }, []);

  useEffect(() => { sim.current && sim.current.setTime(time, dark); }, [time, dark]);

  const count = (k) => snap.filter((s) => s.status === k).length;
  const selBot = snap.find((s) => s.id === sel);
  return (
    <div className="flex h-full min-h-[640px] w-full flex-col bg-zinc-50 text-zinc-900 dark:bg-[#15161A] dark:text-zinc-100 md:flex-row">
      <div className="relative min-h-[420px] flex-1 overflow-hidden">
        <div ref={mount} className="absolute inset-0" />
        <div ref={labelsRef} className="pointer-events-none absolute inset-0" />
        <div className="absolute left-3 top-3 flex flex-wrap items-center gap-2">
          <div className="rounded-lg bg-white/90 px-3 py-1.5 text-sm font-semibold shadow-sm dark:bg-zinc-900/90">Workspace</div>
          {[['working', 'working'], ['waiting', 'need you'], ['talking', 'talking'], ['idle', 'idle']].map(([k, l]) => (
            <div key={k} className="flex items-center gap-1.5 rounded-full bg-white/90 px-2.5 py-1 text-xs shadow-sm dark:bg-zinc-900/90">
              <span className="h-2 w-2 rounded-full" style={{ background: TONE[k] }} />{count(k)} {l}
            </div>
          ))}
        </div>
        <div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1 rounded-full bg-white/90 p-1 text-xs shadow-sm dark:bg-zinc-900/90">
          {['day', 'evening', 'night'].map((k) => (
            <button key={k} onClick={() => setTime(k)} className={`rounded-full px-3 py-1 capitalize ${time === k ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900' : ''}`}>{k}</button>
          ))}
        </div>
        {selBot && (
          <div className="absolute right-3 top-3 w-60 rounded-xl bg-white p-3 text-sm shadow-lg dark:bg-zinc-900">
            <div className="flex items-center gap-2"><span className="h-3 w-3 rounded-full" style={{ background: selBot.color }} /><b>{selBot.name}</b><span className="text-zinc-500">{selBot.role}</span></div>
            <div className="mt-1 text-zinc-600 dark:text-zinc-400">{selBot.task}</div>
            <button className="mt-2 w-full rounded-lg bg-zinc-900 py-1.5 text-white dark:bg-white dark:text-zinc-900">Open thread</button>
          </div>
        )}
      </div>
      <aside className="flex w-full flex-col gap-3 border-zinc-200 p-3 dark:border-zinc-800 md:w-80 md:border-l">
        <div className="rounded-xl bg-white p-3 shadow-sm dark:bg-zinc-900">
          <div className="mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500">Team · {snap.length}</div>
          {snap.map((s) => (
            <div key={s.id} onClick={() => setSel(s.id)} className="flex cursor-pointer items-start gap-2 rounded-lg px-1.5 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800">
              <span className="mt-1 h-3 w-3 shrink-0 rounded-full" style={{ background: s.color }} />
              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-2 text-sm"><span><b>{s.name}</b> <span className="text-zinc-500">{s.role}</span></span>
                  <span className="shrink-0 text-xs" style={{ color: TONE[s.status] }}>{s.walking ? 'Walking' : WORD[s.status]}</span></div>
                <div className="truncate text-xs text-zinc-500">{s.task}</div>
                {s.status === 'waiting' && !s.walking && (
                  <button onClick={(e) => { e.stopPropagation(); sim.current.answer(s.id); }} className="mt-1 rounded-md bg-amber-500 px-2 py-0.5 text-xs font-semibold text-amber-950">Answer</button>
                )}
              </div>
            </div>
          ))}
        </div>
        <div className="min-h-0 flex-1 overflow-auto rounded-xl bg-white p-3 shadow-sm dark:bg-zinc-900">
          <div className="mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500">Activity</div>
          {feed.map((f) => (
            <div key={f.id} className="flex gap-2 py-1 text-xs">
              <span className="w-14 shrink-0 text-zinc-400">{f.at}</span>
              <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full" style={{ background: TONE[f.tone] }} />
              <span><b>{f.who}</b> {f.text}</span>
            </div>
          ))}
        </div>
      </aside>
    </div>
  );
}

```