- {active && (
-
-
{seat.phase ? `${seat.phase} · speaking` : 'speaking'}
-
- {saying &&
{saying}}
+
+
+
+
+
+ {active && (
+
+ {seat.phase ? `${seat.phase} · on air` : 'on air'}
+
+ {saying && {saying}}
+
+ )}
+ {mood === 'nap' && !active &&
}
+ {named ? (
+
+ {moodShows(mood) && !active && {MOOD_GLYPH[mood]}}
+ {glyph} {seat.id}
+ {seat.phase && {` · ${seat.phase}`}}
+
+ ) : (
+ // Inside, a chip, not a name tag: the room stays a room.
+
+ {glyph}
+ {moodShows(mood) && {MOOD_GLYPH[mood]}}
+
+ )}
-
+
+
+
);
}
diff --git a/web/src/components/Live/floor/TeamFloorFlat.tsx b/web/src/components/Live/floor/TeamFloorFlat.tsx
index 2a8eb40..d8d45f7 100644
--- a/web/src/components/Live/floor/TeamFloorFlat.tsx
+++ b/web/src/components/Live/floor/TeamFloorFlat.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx';
import { teamColor } from '@/components/Board/teamColor';
import { workTables, type FloorAgent, type FloorHandoff, type FloorModel, type FloorPhase, type FloorPulse, type FloorTeam, type FloorTicket, type TicketState } from './floorModel';
import { LEGEND_STATES, TICKET_LABEL, ago, glyphFor, type FloorSelection } from './floorShared';
+import { MOOD_GLYPH, MOOD_LABEL, floorShipped, isParty, moodFor, moodShows, seedOf, tableParties, type Mood } from './floorLife';
// ── The team floor ───────────────────────────────────────────────────────
//
@@ -19,6 +20,11 @@ import { LEGEND_STATES, TICKET_LABEL, ago, glyphFor, type FloorSelection } from
// minutes at a time, and a thing that breathes reads as alive where a table
// reads as stuck. Every motion is CSS, so `prefers-reduced-motion` (honored
// globally) freezes it to a still picture with nothing lost.
+//
+// The people have moods (floorLife) here too — a badge and a little motion:
+// a doze, a stroll, a party bounce at a table that is done — and the harness
+// is a command center: the crew waits inside as small chips, and whoever is
+// on steps out through the door onto the pad with their name and bubble.
export interface TeamFloorFlatProps {
floor: FloorModel;
@@ -69,8 +75,14 @@ interface Placed {
agentPos: Map
;
}
+/** The command center's box, centred on its island. */
+const HQ_W = 300;
+const HQ_H = 112;
+const HQ_DOOR = 36;
+const HQ_COLS = 6;
+
/** Islands are laid out on a shallow arc, so three read as a floor and not a row. */
-function layout(teams: FloorTeam[]): Placed[] {
+function layout(teams: FloorTeam[], running: boolean): Placed[] {
const n = teams.length;
return teams.map((team, i) => {
const t = n === 1 ? 0.5 : i / (n - 1);
@@ -79,6 +91,20 @@ function layout(teams: FloorTeam[]): Placed[] {
const cy = n <= 2 ? H / 2 + 10 : 200 + (i % 2) * 190;
const hex = team.internal ? HEX.slate : HEX[teamColor(team.crew ? '' : team.id).name] ?? HEX.gray;
const agentPos = new Map();
+ if (team.internal) {
+ // The crew in rows inside the room; whoever is on, out on the pad.
+ const on = running ? team.agents.filter((a) => a.active) : [];
+ const inside = team.agents.filter((a) => !on.includes(a));
+ const rows = Math.max(1, Math.ceil(inside.length / HQ_COLS));
+ inside.forEach((a, i) => {
+ const row = Math.floor(i / HQ_COLS);
+ const inRow = Math.min(HQ_COLS, inside.length - row * HQ_COLS);
+ const col = i % HQ_COLS;
+ agentPos.set(a.id, { x: cx - ((inRow - 1) * 40) / 2 + col * 40, y: cy + 12 + (row - (rows - 1) / 2) * 28 });
+ });
+ on.forEach((a, k) => agentPos.set(a.id, { x: cx + (k - (on.length - 1) / 2) * 70, y: cy + HQ_H / 2 + 26 }));
+ return { team, cx, cy, hex, agentPos };
+ }
// Manager at the head; everyone else spaced along the front edge of the
// island, where the tickets are within reach.
const others = team.agents.filter((a) => a.seat !== 'manager');
@@ -94,7 +120,9 @@ function layout(teams: FloorTeam[]): Placed[] {
}
export default function TeamFloorFlat({ floor, running, now, onTicket, selection = null, onSelect, pulses }: TeamFloorFlatProps) {
- const placed = useMemo(() => layout(floor.teams), [floor.teams]);
+ const placed = useMemo(() => layout(floor.teams, running), [floor.teams, running]);
+ const shipped = floorShipped(floor, running);
+ const anyParty = shipped || floor.teams.some((t) => tableParties(t, false));
const working = workTables(floor).length;
const byID = useMemo(() => new Map(placed.map((p) => [p.team.id, p])), [placed]);
@@ -105,10 +133,11 @@ export default function TeamFloorFlat({ floor, running, now, onTicket, selection
setTick(now);
return undefined;
}
- if (!running) return undefined;
+ // The party keeps its clock after the run: the rounds change, people dance.
+ if (!running && !anyParty) return undefined;
const id = window.setInterval(() => setTick(Date.now()), 1000);
return () => window.clearInterval(id);
- }, [running, now]);
+ }, [running, now, anyParty]);
// Tickets with a pulse still on them flash, whichever kind it was.
const flashing = useMemo(() => new Set((pulses ?? []).filter((p) => p.ticket && tick - p.at < 4000).map((p) => p.ticket!)), [pulses, tick]);
@@ -158,7 +187,7 @@ export default function TeamFloorFlat({ floor, running, now, onTicket, selection
})}
{placed.map((p) => (
-
+
))}
{floor.handoffs.map((h) => (
@@ -187,6 +216,7 @@ function Island({
onSelect,
flashing,
phase,
+ partying,
}: {
placed: Placed;
running: boolean;
@@ -196,9 +226,10 @@ function Island({
onSelect?: (sel: FloorSelection) => void;
flashing: Set;
phase: FloorPhase | null;
+ partying: boolean;
}) {
const { team, cx, cy, hex, agentPos } = placed;
- if (team.internal) return ;
+ if (team.internal) return ;
const pct = team.total > 0 ? Math.round((team.done / team.total) * 100) : 0;
const rim =
team.gate === 'green' ? '#10b981' : team.gate === 'red' ? '#ef4444' : team.waitingOn.length > 0 ? '#f59e0b' : hex;
@@ -218,7 +249,14 @@ function Island({
{team.name}
+ {partying && (
+
+ Every ticket here is done — the table is celebrating
+ 🎉
+
+ )}
+ {partying ? '🍻 ' : ''}
{team.total > 0 ? `${team.done}/${team.total} done` : running ? 'no tickets yet' : 'idle'}
{team.blocked > 0 ? ` · ${team.blocked} blocked` : ''}
{team.gate === 'green' ? ' · proved' : team.gate === 'red' ? ' · RED' : team.gate === 'unverified' ? ' · unverified' : ''}
@@ -232,7 +270,7 @@ function Island({
{team.agents.map((a) => {
const pos = agentPos.get(a.id);
if (!pos) return null;
- return ;
+ return ;
})}
{team.waitingOn.length > 0 && (
@@ -245,31 +283,46 @@ function Island({
}
/**
- * The harness's own table: drawn quieter than a team's — dashed rim, no desk
- * of tickets, no progress — with the phase the run is in where a team shows
- * its progress, so it reads as the machinery beside the work, not a team.
+ * The harness's command center: a room, not a team's island — no tickets, no
+ * progress. The crew waits inside as small chips; whoever is on steps out
+ * through the door onto the pad below with their name and bubble; the phase
+ * the run is in is written on the wall where a team shows its progress.
*/
-function HarnessIsland({ placed, running, tick, selection, onSelect, phase }: { placed: Placed; running: boolean; tick: number; selection: FloorSelection; onSelect?: (sel: FloorSelection) => void; phase: FloorPhase | null }) {
+function HarnessIsland({ placed, running, tick, selection, onSelect, phase, partying }: { placed: Placed; running: boolean; tick: number; selection: FloorSelection; onSelect?: (sel: FloorSelection) => void; phase: FloorPhase | null; partying: boolean }) {
const { team, cx, cy, hex, agentPos } = placed;
- const active = team.agents.some((a) => a.active);
+ const out = running ? team.agents.filter((a) => a.active) : [];
+ const busy = out.length > 0;
+ const left = cx - HQ_W / 2;
+ const top = cy - HQ_H / 2;
+ const bottom = cy + HQ_H / 2;
+ // The outline, open at the door.
+ const walls = `M ${cx - HQ_DOOR / 2} ${bottom} H ${left + 14} Q ${left} ${bottom} ${left} ${bottom - 14} V ${top + 14} Q ${left} ${top} ${left + 14} ${top} H ${left + HQ_W - 14} Q ${left + HQ_W} ${top} ${left + HQ_W} ${top + 14} V ${bottom - 14} Q ${left + HQ_W} ${bottom} ${left + HQ_W - 14} ${bottom} H ${cx + HQ_DOOR / 2}`;
return (
-
+
{team.charter}
-
-
-
- {team.name}
-
-
- {phase ? `phase · ${phase.id}` : running ? 'starting' : 'standing by'}
+
+
+
+ {/* The sliding door: open while someone is out on the pad. */}
+
+
+
+ {busy ? 'on air: someone is out on the pad' : 'nobody on air'}
+
+ {/* The pad and the path to it. */}
+
+
+
+ {partying ? '🎉 ' : ''}Command center
-
- not a team · no tickets
+
+ {phase ? `phase · ${phase.id}` : partying ? 'shipped' : running ? 'starting' : 'standing by'}
{team.agents.map((a) => {
const pos = agentPos.get(a.id);
if (!pos) return null;
- return ;
+ const onPad = out.includes(a);
+ return ;
})}
);
@@ -391,6 +444,8 @@ function Avatar({
team,
selected,
onSelect,
+ partying = false,
+ compact = false,
}: {
agent: FloorAgent;
x: number;
@@ -401,15 +456,28 @@ function Avatar({
team: FloorTeam;
selected: boolean;
onSelect?: (sel: FloorSelection) => void;
+ /** The table is done: the party is on. */
+ partying?: boolean;
+ /** A chip, not a name tag: the command center's crew waiting inside. */
+ compact?: boolean;
}) {
- const r = agent.seat === 'manager' ? 17 : 15;
+ const r = compact ? 10 : agent.seat === 'manager' ? 17 : 15;
const pick = onSelect ? () => onSelect({ kind: 'agent', id: agent.id, team: team.id }) : undefined;
const label = agent.id.length > 16 ? agent.id.slice(0, 15) + '…' : agent.id;
const isManager = agent.seat === 'manager';
const glowing = agent.active && running;
+ const mood: Mood = moodFor({ active: glowing, running, partying, since: agent.lastAt ?? tick, now: tick, seed: seedOf(agent.id) });
return (
{`${agent.id} · ${isManager ? (team.managerDefault ? 'project manager (run default)' : 'project manager') : team.internal ? 'harness · internal' : agent.seat}` +
(agent.borrowed ? ` (the team names none — lent by the ${agent.borrowed})` : '') +
- (agent.touched ? ` · ${agent.touched} ticket${agent.touched === 1 ? '' : 's'} touched` : '')}
+ (agent.touched ? ` · ${agent.touched} ticket${agent.touched === 1 ? '' : 's'} touched` : '') +
+ ` · ${MOOD_LABEL[mood]}`}
- {glowing && }
- {glowing && }
-
-
- {glyphFor(agent)}
-
-
- {label}
-
+
+ {glowing && }
+ {glowing && }
+
+
+ {glyphFor(agent)}
+
+ {moodShows(mood) && (
+
+ {MOOD_GLYPH[mood]}
+
+ )}
+
+ {!compact && (
+
+ {label}
+
+ )}
{isManager && (
{team.managerDefault ? 'manager · run default' : 'manager'}
diff --git a/web/src/components/Live/floor/floorLife.test.ts b/web/src/components/Live/floor/floorLife.test.ts
new file mode 100644
index 0000000..2c24d48
--- /dev/null
+++ b/web/src/components/Live/floor/floorLife.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest';
+import { MOOD_SLOT_MS, PARTY_SLOT_MS, SLEEPY_MS, WATCH_MS, floorShipped, isFootballRound, isParty, moodFor, moodShows, seedOf, tableParties, type LifeInputs, type Mood } from './floorLife';
+import type { FloorTeam } from './floorModel';
+
+const T0 = Date.parse('2026-09-10T10:00:00Z');
+
+function life(over: Partial = {}): LifeInputs {
+ return { active: false, running: true, partying: false, since: T0, now: T0, seed: seedOf('go-worker'), ...over };
+}
+
+function team(over: Partial = {}): FloorTeam {
+ return { id: 'backend', name: 'Backend', manager: 'triage', managerDefault: false, agents: [], tickets: [], total: 2, done: 2, blocked: 0, inFlight: 0, complete: true, gate: '', waitingOn: [], ...over };
+}
+
+describe('moodFor', () => {
+ it('works while working, whatever else is true', () => {
+ expect(moodFor(life({ active: true, partying: true, since: T0 - SLEEPY_MS * 5 }))).toBe('work');
+ });
+
+ it('watches the worker when just idle', () => {
+ expect(moodFor(life({ now: T0 + WATCH_MS - 1 }))).toBe('watch');
+ });
+
+ it('is deterministic: the same inputs, the same mood', () => {
+ const at = life({ now: T0 + 40_000 });
+ expect(moodFor(at)).toBe(moodFor({ ...at }));
+ });
+
+ it('takes breaks while idle in a live run — coffee, stretches, walks', () => {
+ const seen = new Set();
+ for (let k = 0; k < 60; k++) seen.add(moodFor(life({ now: T0 + WATCH_MS + k * MOOD_SLOT_MS })));
+ expect(seen.has('coffee')).toBe(true);
+ expect(seen.has('stroll')).toBe(true);
+ expect(seen.has('work')).toBe(false);
+ });
+
+ it('never has the whole room change mood at once', () => {
+ const now = T0 + 30_000;
+ const moods = new Set(Array.from({ length: 20 }, (_, i) => moodFor(life({ seed: seedOf(`agent-${i}`), now }))));
+ expect(moods.size).toBeGreaterThan(1);
+ });
+
+ it('dozes off after a long wait, and sleeps after a very long one', () => {
+ let naps = 0;
+ for (let k = 0; k < 40; k++) if (moodFor(life({ now: T0 + SLEEPY_MS + 1 + k * MOOD_SLOT_MS })) === 'nap') naps++;
+ expect(naps).toBeGreaterThan(10);
+ expect(moodFor(life({ now: T0 + SLEEPY_MS * 2 + 1 }))).toBe('nap');
+ });
+
+ it('naps at the desk once the run has stopped', () => {
+ expect(moodFor(life({ running: false, now: T0 + 60_000 }))).toBe('nap');
+ });
+
+ it('parties at a done table: beers, a dance, and football every third round', () => {
+ const football = T0 - (T0 % (PARTY_SLOT_MS * 3)) + PARTY_SLOT_MS + 1;
+ expect(isFootballRound(football)).toBe(true);
+ expect(moodFor(life({ partying: true, now: football }))).toBe('football');
+ const beers = football + PARTY_SLOT_MS;
+ expect(['cheers', 'dance']).toContain(moodFor(life({ partying: true, now: beers })));
+ expect(isParty(moodFor(life({ partying: true, now: beers })))).toBe(true);
+ });
+
+ it('badges every mood but working and watching', () => {
+ expect(moodShows('work')).toBe(false);
+ expect(moodShows('watch')).toBe(false);
+ expect(moodShows('nap')).toBe(true);
+ expect(moodShows('cheers')).toBe(true);
+ });
+});
+
+describe('parties', () => {
+ it('a done table parties; an unfinished one or the harness does not, until the run ships', () => {
+ expect(tableParties(team(), false)).toBe(true);
+ expect(tableParties(team({ complete: false, done: 1 }), false)).toBe(false);
+ expect(tableParties(team({ id: 'harness', internal: true, total: 0, complete: false }), false)).toBe(false);
+ expect(tableParties(team({ id: 'harness', internal: true, total: 0, complete: false }), true)).toBe(true);
+ });
+
+ it('the floor ships when the run is over and every work table is done', () => {
+ const harness = team({ id: 'harness', internal: true, total: 0, complete: false });
+ expect(floorShipped({ teams: [harness, team()] }, false)).toBe(true);
+ expect(floorShipped({ teams: [harness, team()] }, true)).toBe(false);
+ expect(floorShipped({ teams: [harness, team(), team({ id: 'web', complete: false, done: 0 })] }, false)).toBe(false);
+ expect(floorShipped({ teams: [harness] }, false)).toBe(false);
+ });
+});
diff --git a/web/src/components/Live/floor/floorLife.ts b/web/src/components/Live/floor/floorLife.ts
new file mode 100644
index 0000000..779974c
--- /dev/null
+++ b/web/src/components/Live/floor/floorLife.ts
@@ -0,0 +1,156 @@
+import { workTables, type FloorModel, type FloorTeam } from './floorModel';
+
+// ── Life on the floor ────────────────────────────────────────────────────
+//
+// A run is mostly waiting: one agent types while the rest of the table has
+// nothing to do. Drawn as statues, that reads as a stuck page; drawn as
+// people, it reads as an office. So everyone who is not working has a mood —
+// they watch whoever is, fetch a coffee, stretch, take a walk round the room,
+// and doze off when nothing has come their way for a while. A table whose
+// every ticket is done throws a party: beers, a kick-about, a dance. When the
+// whole run is over and everything shipped, the whole floor joins in.
+//
+// It is pure and deterministic — a person's mood is a function of the time,
+// how long they have been idle and a seed from their name — so both stages
+// (and the dossier) agree on what someone is doing without sharing state, a
+// re-render never reshuffles anybody, and it is testable.
+
+export type Mood = 'work' | 'watch' | 'coffee' | 'stretch' | 'stroll' | 'nap' | 'cheers' | 'football' | 'dance';
+
+export const MOOD_GLYPH: Record = {
+ work: '⌨️',
+ watch: '👀',
+ coffee: '☕',
+ stretch: '🙆',
+ stroll: '🚶',
+ nap: '💤',
+ cheers: '🍻',
+ football: '⚽',
+ dance: '🕺',
+};
+
+export const MOOD_LABEL: Record = {
+ work: 'working',
+ watch: 'watching the others work',
+ coffee: 'on a coffee break',
+ stretch: 'stretching their legs',
+ stroll: 'taking a walk round the room',
+ nap: 'having a nap',
+ cheers: 'having a beer — the table is done',
+ football: 'playing football — the table is done',
+ dance: 'dancing — the table is done',
+};
+
+/** Moods worth a badge: watching is the default, and working has its own bubble. */
+export function moodShows(mood: Mood): boolean {
+ return mood !== 'work' && mood !== 'watch';
+}
+
+/** A party mood: the table is done. */
+export function isParty(mood: Mood): boolean {
+ return mood === 'cheers' || mood === 'football' || mood === 'dance';
+}
+
+/** Idle for less than this, a person just watches whoever is working. */
+export const WATCH_MS = 12_000;
+/** How long one idle mood lasts before the next is drawn. */
+export const MOOD_SLOT_MS = 9_000;
+/** Idle past this, a nap becomes likely… */
+export const DROWSY_MS = 60_000;
+/** …and past this, the likeliest thing of all. */
+export const SLEEPY_MS = 150_000;
+/** One round of the party: beers, then a kick-about, then beers again. */
+export const PARTY_SLOT_MS = 14_000;
+
+export interface LifeInputs {
+ /** Working right now, in a live run. */
+ active: boolean;
+ running: boolean;
+ /** Every ticket at this person's table is done (or the whole run shipped). */
+ partying: boolean;
+ /** When this person last did anything, in ms — or when the floor was first seen. */
+ since: number;
+ now: number;
+ /** From seedOf(id): who they are decides what they like doing. */
+ seed: number;
+}
+
+/** A stable 32-bit seed from a name (FNV-1a). */
+export function seedOf(id: string): number {
+ let h = 0x811c9dc5;
+ for (let i = 0; i < id.length; i++) {
+ h ^= id.charCodeAt(i);
+ h = Math.imul(h, 0x01000193);
+ }
+ return h >>> 0;
+}
+
+/** Mixes a seed with a slot number into a fresh roll, 0..2^32. */
+function roll(seed: number, slot: number): number {
+ let h = (seed ^ Math.imul(slot + 0x9e3779b9, 0x85ebca6b)) >>> 0;
+ h = Math.imul(h ^ (h >>> 16), 0x7feb352d);
+ h = Math.imul(h ^ (h >>> 15), 0x846ca68b);
+ return (h ^ (h >>> 16)) >>> 0;
+}
+
+/** Which party round it is — shared by the whole table, so they play together. */
+export function partyRound(now: number): number {
+ return Math.floor(now / PARTY_SLOT_MS);
+}
+
+/** Every third party round is a kick-about. */
+export function isFootballRound(now: number): boolean {
+ return partyRound(now) % 3 === 1;
+}
+
+/**
+ * moodFor is what a person is doing right now.
+ *
+ * Working beats everything. A done table parties — everyone at it together,
+ * the round decides whether it is beers or football, and a few dance. A live
+ * run's idle people watch at first, then draw a new mood every MOOD_SLOT_MS
+ * (each on their own offset, so the room never changes all at once), with
+ * naps growing likelier the longer nothing comes their way. A run that is not
+ * live and did not ship is a room of people napping at their desks.
+ */
+export function moodFor(i: LifeInputs): Mood {
+ if (i.active && i.running) return 'work';
+ if (i.partying) {
+ const round = partyRound(i.now);
+ if (round % 3 === 1) return 'football';
+ return roll(i.seed, round) % 4 === 0 ? 'dance' : 'cheers';
+ }
+ const idle = Math.max(0, i.now - i.since);
+ if (!i.running) {
+ // The run stopped: people drift off one by one, not in unison.
+ return idle > 4_000 + (i.seed % 20_000) ? 'nap' : 'watch';
+ }
+ if (idle < WATCH_MS) return 'watch';
+ if (idle > SLEEPY_MS * 2) return 'nap';
+ const offset = i.seed % MOOD_SLOT_MS;
+ const slot = Math.floor((i.now + offset) / MOOD_SLOT_MS);
+ const r = roll(i.seed, slot) % 100;
+ const napChance = idle > SLEEPY_MS ? 60 : idle > DROWSY_MS ? 22 : 0;
+ if (r < napChance) return 'nap';
+ const rest = (r - napChance) / (100 - napChance);
+ if (rest < 0.34) return 'watch';
+ if (rest < 0.58) return 'coffee';
+ if (rest < 0.74) return 'stretch';
+ return 'stroll';
+}
+
+/**
+ * floorShipped: the run is over and every work table finished — the whole
+ * floor, harness included, can put its feet up.
+ */
+export function floorShipped(floor: Pick, running: boolean): boolean {
+ if (running) return false;
+ const tables = workTables(floor);
+ return tables.length > 0 && tables.every((t) => t.total > 0 && t.complete);
+}
+
+/** A table parties when its own tickets are all done, or when the whole run shipped. */
+export function tableParties(team: FloorTeam, shipped: boolean): boolean {
+ if (shipped) return true;
+ return !team.internal && team.total > 0 && team.complete;
+}
diff --git a/web/src/components/Live/floor/floorRig.ts b/web/src/components/Live/floor/floorRig.ts
new file mode 100644
index 0000000..733f8bf
--- /dev/null
+++ b/web/src/components/Live/floor/floorRig.ts
@@ -0,0 +1,312 @@
+import { useRef, type RefObject } from 'react';
+import * as THREE from 'three';
+import type { Mood } from './floorLife';
+
+// ── A person, with limbs ─────────────────────────────────────────────────
+//
+// Everyone on the 3D floor is the same little figure: legs, a torso, arms on
+// shoulder pivots and a head. The pose is set per frame by poseRig from the
+// person's mood — typing, sipping a coffee, stretching, walking, dozing with
+// their head on the desk, raising a beer, dancing — so a scene of twenty
+// people costs twenty sets of transforms and no re-renders.
+//
+// Local space: the figure faces −z, its feet are at y = 0. Seated, it drops
+// onto a chair and its legs swing forward under the desk.
+
+export interface Rig {
+ /** Moves and turns the whole figure: walks, standing up. */
+ root: RefObject;
+ /** Bobs and leans the upper body. */
+ body: RefObject;
+ head: RefObject;
+ armL: RefObject;
+ armR: RefObject;
+ legL: RefObject;
+ legR: RefObject;
+ beer: RefObject;
+ cup: RefObject;
+}
+
+export function useRig(): Rig {
+ return {
+ root: useRef(null),
+ body: useRef(null),
+ head: useRef(null),
+ armL: useRef(null),
+ armR: useRef(null),
+ legL: useRef(null),
+ legR: useRef(null),
+ beer: useRef(null),
+ cup: useRef(null),
+ };
+}
+
+/** How far the body drops when seated. */
+export const SIT_DROP = 0.2;
+export const HIP_Y = 0.42;
+export const SHOULDER_Y = 1.1;
+export const HEAD_Y = 1.38;
+
+export interface RigLook {
+ shirt: string;
+ skin: string;
+ hair?: string;
+ /** Half-transparent: a seat the pipeline lent, or someone who has not spoken yet. */
+ ghost?: boolean;
+ crown?: boolean;
+}
+
+export interface PoseInputs {
+ mood: Mood;
+ /** Elapsed seconds (the scene clock). */
+ t: number;
+ /** Seconds since this mood began. */
+ since: number;
+ /** A per-person phase, so a table does not move in lockstep. */
+ phase: number;
+ /** 0 = standing, 1 = seated; eased by the caller. */
+ sit: number;
+ /** Walking speed right now, units per second (0 when still). */
+ speed: number;
+ /** The head's glance, when watching. */
+ glance: number;
+ /** Working by talking (on the command center's pad), not by typing. */
+ talk?: boolean;
+}
+
+const lerp = THREE.MathUtils.lerp;
+
+/** Eases a rotation toward a goal: poses blend rather than snap. */
+function ease(obj: THREE.Object3D | null, axis: 'x' | 'y' | 'z', goal: number, k = 0.18) {
+ if (!obj) return;
+ obj.rotation[axis] = lerp(obj.rotation[axis], goal, k);
+}
+
+/**
+ * poseRig sets every joint for this frame. Rotations about x swing a limb
+ * forward (toward −z) for positive angles: an arm at 1.3 types, at π points
+ * straight up.
+ */
+export function poseRig(rig: Rig, p: PoseInputs): void {
+ const { mood, t, since, phase, sit, speed } = p;
+ const walking = speed > 0.05;
+ const stride = walking ? Math.sin(t * 9 + phase) * 0.55 : 0;
+ let armL = 0.25;
+ let armR = 0.25;
+ let armLz = 0;
+ let armRz = 0;
+ let headX = 0;
+ let headY = p.glance;
+ let bodyX = 0;
+ let bodyY = 0;
+ let bodyZ = 0;
+ let bob = 0;
+ let kick = 0;
+ let beer = false;
+ let cup = false;
+
+ switch (mood) {
+ case 'work': {
+ if (p.talk) {
+ // Holding forth: hands that talk, a nod on the point.
+ armL = 0.7 + Math.sin(t * 2.6 + phase) * 0.45;
+ armR = 1.3 + Math.sin(t * 3.4 + phase + 1) * 0.55;
+ armLz = -0.25;
+ armRz = 0.3;
+ headX = Math.sin(t * 4) * 0.08;
+ bob = Math.abs(Math.sin(t * 2.6)) * 0.03;
+ headY = Math.sin(t * 0.9) * 0.3;
+ break;
+ }
+ // Typing: both hands on the keys, a nod in time.
+ armL = 1.25 + Math.sin(t * 16 + phase) * 0.1;
+ armR = 1.25 + Math.sin(t * 16 + phase + 1.7) * 0.1;
+ bodyX = -0.06 + Math.sin(t * 9) * 0.03;
+ bob = Math.abs(Math.sin(t * 9)) * 0.02;
+ headY = 0;
+ break;
+ }
+ case 'watch': {
+ armL = sit > 0.5 ? 0.9 : 0.2;
+ armR = sit > 0.5 ? 0.9 : 0.2;
+ bob = Math.sin(t * 1.2 + phase) * 0.008;
+ break;
+ }
+ case 'coffee': {
+ // A sip every four seconds, the cup back down between.
+ cup = true;
+ const k = ((since + phase) % 4) / 4;
+ const sip = k > 0.55 && k < 0.85 ? Math.sin(((k - 0.55) / 0.3) * Math.PI) : 0;
+ armR = 0.95 + sip * 1.35;
+ armRz = sip * 0.45;
+ headX = sip * 0.25;
+ armL = sit > 0.5 ? 0.9 : 0.25;
+ bob = Math.sin(t * 1.2 + phase) * 0.008;
+ break;
+ }
+ case 'stretch': {
+ // Arms up, a lean one way then the other, a yawn of a head tilt.
+ const s = Math.sin(since * 1.4);
+ armL = Math.PI - 0.15;
+ armR = Math.PI - 0.15;
+ armLz = -0.25 - s * 0.15;
+ armRz = 0.25 - s * 0.15;
+ bodyZ = s * 0.12;
+ headX = 0.25;
+ bob = 0.02;
+ break;
+ }
+ case 'stroll': {
+ armL = 0.1;
+ armR = 0.1;
+ headY = walking ? 0 : Math.sin(t * 0.8 + phase) * 0.6;
+ break;
+ }
+ case 'nap': {
+ // Head down on folded arms, a slow breath.
+ armL = sit > 0.5 ? 1.35 : 0.35;
+ armR = sit > 0.5 ? 1.35 : 0.35;
+ armLz = sit > 0.5 ? 0.5 : 0;
+ armRz = sit > 0.5 ? -0.5 : 0;
+ bodyX = sit > 0.5 ? -0.42 : -0.1;
+ headX = -0.55;
+ headY = 0.35;
+ bob = Math.sin(t * 1.1 + phase) * 0.012;
+ break;
+ }
+ case 'cheers': {
+ // Beer up, a clink toward the middle every few seconds.
+ beer = true;
+ const clink = Math.max(0, Math.sin(t * 2.2 + phase)) ** 6;
+ armR = 2.3 + clink * 0.5;
+ armRz = 0.2;
+ armL = 0.3 + Math.sin(t * 3 + phase) * 0.15;
+ bob = Math.abs(Math.sin(t * 3 + phase)) * 0.04;
+ headX = 0.2;
+ break;
+ }
+ case 'football': {
+ // On the toes, arms out for balance, the odd kick.
+ armL = 0.5;
+ armR = 0.5;
+ armLz = -0.5;
+ armRz = 0.5;
+ bob = Math.abs(Math.sin(t * 6 + phase)) * 0.06;
+ kick = Math.max(0, Math.sin(t * 1.6 + phase)) ** 8 * 1.1;
+ break;
+ }
+ case 'dance': {
+ const beat = t * 5 + phase;
+ armL = Math.PI * 0.75 + Math.sin(beat) * 0.6;
+ armR = Math.PI * 0.75 - Math.sin(beat) * 0.6;
+ armLz = -0.4;
+ armRz = 0.4;
+ bodyY = Math.sin(beat * 0.5) * 0.5;
+ bodyZ = Math.sin(beat) * 0.12;
+ bob = Math.abs(Math.sin(beat)) * 0.09;
+ break;
+ }
+ }
+
+ if (walking) {
+ // Arms swing against the legs; nothing else carries on mid-stride.
+ armL = 0.1 - stride * 0.8;
+ armR = 0.1 + stride * 0.8;
+ armLz = 0;
+ armRz = 0;
+ bob = Math.abs(Math.sin(t * 9 + phase)) * 0.05;
+ bodyX = 0.05;
+ bodyY = 0;
+ beer = mood === 'cheers';
+ }
+
+ if (rig.body.current) {
+ rig.body.current.position.y = bob - sit * SIT_DROP;
+ }
+ ease(rig.body.current, 'x', bodyX);
+ ease(rig.body.current, 'y', bodyY);
+ ease(rig.body.current, 'z', bodyZ);
+ ease(rig.head.current, 'x', headX, 0.1);
+ ease(rig.head.current, 'y', headY, 0.06);
+ ease(rig.armL.current, 'x', armL, 0.22);
+ ease(rig.armR.current, 'x', armR, 0.22);
+ ease(rig.armL.current, 'z', armLz, 0.22);
+ ease(rig.armR.current, 'z', armRz, 0.22);
+ // Seated, the thighs swing forward under the desk; standing, they walk.
+ const legSit = sit * 1.45;
+ if (rig.legL.current) {
+ rig.legL.current.rotation.x = lerp(rig.legL.current.rotation.x, legSit + stride, 0.3);
+ rig.legL.current.position.y = HIP_Y - sit * SIT_DROP;
+ }
+ if (rig.legR.current) {
+ rig.legR.current.rotation.x = lerp(rig.legR.current.rotation.x, legSit - stride + kick, 0.3);
+ rig.legR.current.position.y = HIP_Y - sit * SIT_DROP;
+ }
+ if (rig.beer.current) rig.beer.current.visible = beer;
+ if (rig.cup.current) rig.cup.current.visible = cup && !walking;
+}
+
+/**
+ * Pose a rig without animation (prefers-reduced-motion): a still picture of
+ * the same mood.
+ */
+export function stillPose(rig: Rig, mood: Mood, sit: number, glance: number, talk = false): void {
+ for (let i = 0; i < 30; i++) poseRig(rig, { mood, t: 0.3, since: 2.5, phase: 0, sit, speed: 0, glance, talk });
+}
+
+const SKINS = ['#f1c27d', '#e0ac69', '#c68642', '#8d5524', '#ffdbac', '#f5d0b5'];
+const HAIRS = ['#2b1d14', '#4a3222', '#a0522d', '#d6b370', '#111827', '#9ca3af', '#7c2d12'];
+const SHIRTS = ['#c7d2fe', '#bae6fd', '#bbf7d0', '#fde68a', '#fecdd3', '#e9d5ff', '#fed7aa', '#99f6e4'];
+
+/** A person's own look, from their seed: skin, hair and a shirt nobody else at the table shares often. */
+export function lookOf(seed: number): { skin: string; hair: string; shirt: string } {
+ return { skin: SKINS[seed % SKINS.length], hair: HAIRS[(seed >>> 4) % HAIRS.length], shirt: SHIRTS[(seed >>> 9) % SHIRTS.length] };
+}
+
+// ── Walking ──────────────────────────────────────────────────────────────
+
+export interface Walk {
+ points: THREE.Vector3[];
+ /** Cumulative length at each point. */
+ at: number[];
+ total: number;
+ /** Scene-clock seconds when the walk began. */
+ start: number;
+ speed: number;
+}
+
+export function makeWalk(points: THREE.Vector3[], start: number, speed = 1.6): Walk | null {
+ const pts = points.filter((p, i) => i === 0 || p.distanceToSquared(points[i - 1]) > 1e-6);
+ if (pts.length < 2) return null;
+ const at = [0];
+ for (let i = 1; i < pts.length; i++) at.push(at[i - 1] + pts[i].distanceTo(pts[i - 1]));
+ return { points: pts, at, total: at[at.length - 1], start, speed };
+}
+
+/**
+ * walkAt writes the position `t` seconds into a walk to `out`, and returns
+ * the direction of travel's yaw (for a figure facing −z) or null when the
+ * walk is over.
+ */
+export function walkAt(w: Walk, t: number, out: THREE.Vector3): number | null {
+ const d = Math.max(0, (t - w.start) * w.speed);
+ if (d >= w.total) {
+ out.copy(w.points[w.points.length - 1]);
+ return null;
+ }
+ let i = 1;
+ while (i < w.points.length - 1 && w.at[i] < d) i++;
+ const a = w.points[i - 1];
+ const b = w.points[i];
+ const seg = w.at[i] - w.at[i - 1] || 1;
+ out.copy(a).lerp(b, (d - w.at[i - 1]) / seg);
+ return Math.atan2(-(b.x - a.x), -(b.z - a.z));
+}
+
+/** Turns an angle toward a goal the short way round. */
+export function turnToward(current: number, goal: number, k: number): number {
+ let diff = goal - current;
+ while (diff > Math.PI) diff -= Math.PI * 2;
+ while (diff < -Math.PI) diff += Math.PI * 2;
+ return current + diff * k;
+}
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 86bdd79..f636b44 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -517,3 +517,41 @@
.floor3d-screen-say { font-size: 9.5px; line-height: 1.3; opacity: 0.8; max-height: 3.9em; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .floor3d-screen-phase { text-shadow: none; } }
.floor-stage-live { animation: floorSelected 1.4s ease-in-out infinite; }
+
+/* ── Life on the floor: moods, naps, the command center's crew ── */
+.floor3d-mood { display: inline-block; margin-right: 3px; animation: floorMoodBob 2.4s ease-in-out infinite; }
+@keyframes floorMoodBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-8deg); } }
+.floor3d-name-quiet { font-size: 9.5px; font-weight: 500; padding: 1px 6px; opacity: 0.82; }
+.floor3d-chip {
+ display: inline-flex;
+ gap: 2px;
+ padding: 1px 5px;
+ border-radius: 9999px;
+ background: rgba(255, 255, 255, 0.78);
+ font-size: 10px;
+ box-shadow: 0 2px 6px rgba(17, 24, 39, 0.12);
+ backdrop-filter: blur(3px);
+}
+.dark .floor3d-chip { background: rgba(17, 24, 39, 0.78); }
+.floor3d-zzz { display: inline-flex; gap: 1px; align-self: flex-end; margin-right: -14px; color: #6366f1; font-weight: 800; font-style: italic; pointer-events: none; }
+.dark .floor3d-zzz { color: #a5b4fc; }
+.floor3d-zzz i { font-style: italic; opacity: 0; animation: floorZzz 2.7s ease-out infinite; }
+.floor3d-zzz i:nth-child(1) { font-size: 9px; }
+.floor3d-zzz i:nth-child(2) { font-size: 11px; animation-delay: 0.9s; }
+.floor3d-zzz i:nth-child(3) { font-size: 14px; animation-delay: 1.8s; }
+@keyframes floorZzz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -14px); } }
+
+/* The flat map's moods: badges over the avatars, a doze, a party bounce. */
+.floor-mood { animation: floorMoodBob 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+.floor-avatar-nap .floor-avatar-inner { opacity: 0.75; animation: floorDoze 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
+@keyframes floorDoze { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg) translateY(1px); } }
+.floor-avatar-party .floor-avatar-inner { animation: floorParty 0.7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom center; }
+@keyframes floorParty { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-5px) rotate(4deg); } }
+.floor-avatar-stroll .floor-avatar-inner { animation: floorStroll 6s ease-in-out infinite; }
+@keyframes floorStroll { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(10px); } 70% { transform: translateX(-10px); } }
+.floor-hq-door { transition: transform 0.4s ease; transform-box: fill-box; }
+.floor-party-badge { animation: floorMoodBob 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
+@media (prefers-reduced-motion: reduce) {
+ .floor3d-mood, .floor3d-zzz i, .floor-mood, .floor-avatar-nap .floor-avatar-inner, .floor-avatar-party .floor-avatar-inner, .floor-avatar-stroll .floor-avatar-inner, .floor-party-badge { animation: none !important; }
+ .floor3d-zzz i { opacity: 1; }
+}