@wallarm-org/claude-design 0.0.0-stage → 4.9.0

package/dist/project/components/AgentAvatar/stories.md

@@ -0,0 +1,1805 @@
+# AgentAvatar story sources
+
+### AgentAvatar/AgentAvatar.stories.tsx
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { CAST } from '../../lib/agent-characters/data.gen';
+import { defaultLook } from '../../lib/agent-characters/look';
+import { PLACES } from '../../lib/agent-characters/places';
+import { Button } from '../Button';
+import { HStack, VStack } from '../Stack';
+import { Text } from '../Text';
+import { AgentAvatar, type AgentAvatarProps, type AgentAvatarState } from './AgentAvatar';
+import { AgentAvatarGroup } from './AgentAvatarGroup';
+import { FrameMeter } from './stories/FrameMeter';
+import { type AgentAvatarHandle, setAgentMotion, useAgentMotion } from './useCharacter';
+
+const DESCRIPTION = [
+  'The character of an AI agent from 40 px up: a soft felt body baked in the browser from its silhouette, a glass visor and two light eyes that carry its state, and the prop that tells its job. Below 40 px use `AgentGlyph`.',
+  'The body is baked once per outline, colour and size, off the main thread, and cached; until a layer is ready its flat fill shows.',
+  'With `live` the character moves as the reference does: it blinks, glances, breathes and, on duty, now and then plays with its prop or looks at its neighbours (at most two on the page at once). Hello and Done are beats played through `handleRef`; they play in full, then the character shows `state` again. Reduced motion, or `setAgentMotion(false)` for the user’s setting, shows every state’s static frame.',
+  'Size, liveness and the contact shadow are set by the place the character sits in (Overview rows 40 px, headers and toasts 48, beside people 56, the team card and the drawer 72, the empty chat 120); only the drawer header, the empty chat and 96 px and up get the shadow. Next to the agent’s visible name the character is decorative; give it a `label` only when it stands alone.',
+].join(' ');
+
+const STATES: AgentAvatarState[] = [
+  'idle',
+  'working',
+  'needs',
+  'failed',
+  'off',
+  'box',
+  'invite',
+  'hello',
+  'done',
+];
+const STATE_LABELS: Record<AgentAvatarState, string> = {
+  idle: 'On duty',
+  working: 'Working',
+  needs: 'Needs you',
+  failed: 'Failed',
+  off: 'Deactivated',
+  box: 'Not set up',
+  invite: 'Inviting',
+  hello: 'Hello',
+  done: 'Done',
+};
+
+const meta = {
+  title: 'AI/AgentAvatar',
+  component: AgentAvatar,
+  parameters: {
+    layout: 'centered',
+    docs: { description: { component: DESCRIPTION } },
+  },
+  argTypes: {
+    agent: {
+      control: 'select',
+      options: CAST.map(p => p.id),
+      description: 'Preset character of a Wallarm agent.',
+    },
+    size: {
+      control: 'select',
+      options: [40, 48, 56, 72, 120],
+      description: 'Set by the place the character sits in.',
+    },
+    state: { control: 'select', options: STATES, description: 'State frame.' },
+    shadow: {
+      control: 'boolean',
+      description: 'Contact shadow: drawer header, empty chat, 96 px and up.',
+    },
+    hasApplications: { control: 'boolean', description: 'The agent’s template has applications.' },
+    coverage: {
+      control: 'inline-radio',
+      options: ['full', 'partial'],
+      description: '`partial` keeps the top of the head in grey felt.',
+    },
+    label: {
+      control: 'text',
+      description: 'Set only when the character stands alone without its name.',
+    },
+    seed: { control: 'text', description: 'The agent’s uid.' },
+    live: { control: 'boolean', description: 'Animated; set by the place the character sits in.' },
+  },
+} satisfies Meta<typeof AgentAvatar>;
+
+export default meta;
+
+/** Radar on duty in the agent drawer header: 72 px with the contact shadow. */
+export const Basic: StoryFn<AgentAvatarProps> = args => (
+  <AgentAvatar data-testid='agent-avatar' {...args} />
+);
+
+Basic.args = { agent: 'radar', seed: 'radar', size: 72, state: 'idle', shadow: true };
+
+/** The six agents on duty at the team-card size. Each is told apart by its shape, colour and prop. */
+export const Cast: StoryFn = () => (
+  <HStack gap={24} align='end'>
+    {CAST.map(p => (
+      <VStack key={p.id} gap={8} align='center'>
+        <AgentAvatar data-testid={`agent-avatar-${p.id}`} agent={p.id} seed={p.id} size={72} />
+        <Text size='sm'>{p.name}</Text>
+      </VStack>
+    ))}
+  </HStack>
+);
+
+/** Every state frame of one agent. The eyes and a few body cues carry the state; red and crosses never appear. */
+export const States: StoryFn = () => (
+  <HStack gap={24} align='end' wrap='wrap'>
+    {STATES.map(state => (
+      <VStack key={state} gap={8} align='center'>
+        <AgentAvatar
+          data-testid={`agent-avatar-${state}`}
+          agent='sift'
+          seed='sift'
+          size={72}
+          state={state}
+        />
+        <Text size='sm'>{STATE_LABELS[state]}</Text>
+      </VStack>
+    ))}
+  </HStack>
+);
+
+/** Each place in the product with its size and shadow. */
+export const Places: StoryFn = () => (
+  <HStack gap={32} align='end'>
+    {Object.entries(PLACES)
+      .filter(([, p]) => p.renderer === '3d')
+      .map(([name, p]) => (
+        <VStack key={name} gap={8} align='center'>
+          <AgentAvatar
+            data-testid={`agent-avatar-place-${name}`}
+            agent='trim'
+            seed='trim'
+            size={p.size as AgentAvatarProps['size']}
+            shadow={p.shadow}
+          />
+          <span className='sb-annotation'>{name}</span>
+        </VStack>
+      ))}
+  </HStack>
+);
+
+/** Partial coverage: the agent covers only some of its applications, so the top of its head stays in grey felt. */
+export const PartialCoverage: StoryFn = () => (
+  <HStack gap={24}>
+    {CAST.filter(p => p.id === 'radar' || p.id === 'sift' || p.id === 'mend').map(p => (
+      <AgentAvatar
+        key={p.id}
+        data-testid={`agent-avatar-partial-${p.id}`}
+        agent={p.id}
+        seed={p.id}
+        size={72}
+        hasApplications
+        coverage='partial'
+      />
+    ))}
+  </HStack>
+);
+
+const CUSTOM_AGENTS = [
+  '3f2a9c1e-7b4d-4e8a-9c21-5d6e7f8a9b0c',
+  '8c1d2e3f-4a5b-4c6d-8e7f-9a0b1c2d3e4f',
+  'b7e6d5c4-b3a2-4918-8776-655443322110',
+];
+
+/** Agents without a preset get a deterministic look from their uid, the same one their glyph shows. */
+export const CustomAgent: StoryFn = () => (
+  <HStack gap={24}>
+    {CUSTOM_AGENTS.map(uid => (
+      <AgentAvatar
+        key={uid}
+        data-testid={`agent-avatar-custom-${uid.slice(0, 8)}`}
+        look={defaultLook(uid)}
+        seed={uid}
+        size={72}
+      />
+    ))}
+  </HStack>
+);
+
+// The six presets plus ten custom agents, as stored looks.
+const TEAM = [
+  ...CAST.map(p => ({
+    id: p.id,
+    look: { v: 1 as const, shape: p.shape, color: p.color, eyes: p.eyes, prop: p.prop },
+  })),
+  ...Array.from({ length: 10 }, (_, i) => ({
+    id: `custom-${i}`,
+    look: defaultLook(`team-agent-${i}`),
+  })),
+];
+
+/** A full Agent team page: 16 cards opened with cold caches, the case the first-draw budget is set for. */
+export const Team: StoryFn = () => (
+  <div className='grid grid-cols-4 gap-24'>
+    {TEAM.map(m => (
+      <AgentAvatar
+        key={m.id}
+        data-testid={`agent-avatar-team-${m.id}`}
+        look={m.look}
+        seed={m.id}
+        size={72}
+      />
+    ))}
+  </div>
+);
+
+const LIVE_STATES: AgentAvatarState[] = [
+  'idle',
+  'working',
+  'needs',
+  'failed',
+  'off',
+  'box',
+  'invite',
+];
+
+/** Every persistent state, live. On duty plays its idle repertoire; Needs you is the only one that hops. */
+export const LiveStates: StoryFn = () => (
+  <HStack gap={24} align='end' wrap='wrap'>
+    {LIVE_STATES.map(state => (
+      <VStack key={state} gap={8} align='center'>
+        <AgentAvatar
+          data-testid={`agent-avatar-live-${state}`}
+          agent='radar'
+          seed={`radar-${state}`}
+          size={72}
+          state={state}
+          live
+        />
+        <Text size='sm'>{STATE_LABELS[state]}</Text>
+      </VStack>
+    ))}
+  </HStack>
+);
+
+/** Hello (from On duty) and Done are one-shots: they play in full, then the character shows its state again. */
+export const Beats: StoryFn = () => {
+  const handle = useRef<AgentAvatarHandle>(null);
+  const [ended, setEnded] = useState('');
+  const sayHello = () => handle.current?.play('hello');
+  const finishRun = () => handle.current?.play('done');
+  const onBeatEnd = (beat: string) => setEnded(beat);
+  return (
+    <VStack gap={16} align='center'>
+      <AgentAvatar
+        data-testid='agent-avatar-beats'
+        agent='wally'
+        seed='wally'
+        size={120}
+        shadow
+        live
+        handleRef={handle}
+        onBeatEnd={onBeatEnd}
+      />
+      <HStack gap={8}>
+        <Button
+          data-testid='agent-avatar-beats-hello'
+          variant='outline'
+          size='small'
+          onClick={sayHello}
+        >
+          Hello
+        </Button>
+        <Button
+          data-testid='agent-avatar-beats-done'
+          variant='outline'
+          size='small'
+          onClick={finishRun}
+        >
+          Done
+        </Button>
+      </HStack>
+      <span className='sb-annotation' data-testid='agent-avatar-beats-ended'>
+        {ended ? `${ended} ended` : ' '}
+      </span>
+    </VStack>
+  );
+};
+
+/** Not set up, inviting: one agent on the page invites at a time, glancing at Set up; hover or focus on it and the
+ *  agent turns to it. */
+export const Inviting: StoryFn = () => {
+  const cue = useRef<HTMLButtonElement>(null);
+  return (
+    <VStack gap={24} align='center'>
+      <HStack gap={24}>
+        <AgentAvatar
+          data-testid='agent-avatar-invite-mend'
+          agent='mend'
+          seed='mend'
+          size={72}
+          state='invite'
+          live
+          cueRef={cue}
+        />
+        <AgentAvatar
+          data-testid='agent-avatar-invite-sift'
+          agent='sift'
+          seed='sift'
+          size={72}
+          state='invite'
+          live
+          cueRef={cue}
+        />
+      </HStack>
+      <Button ref={cue} data-testid='agent-avatar-invite-setup' size='small'>
+        Set up
+      </Button>
+    </VStack>
+  );
+};
+
+/** Activate: from Not set up the ghost lands, the colour fills from the floor and the eyes power on (1.15 s). */
+export const Activation: StoryFn = () => {
+  const [state, setState] = useState<AgentAvatarState>('box');
+  const toggle = () => setState(state === 'box' ? 'idle' : 'box');
+  return (
+    <VStack gap={16} align='center'>
+      <AgentAvatar
+        data-testid='agent-avatar-activation'
+        agent='probe'
+        seed='probe'
+        size={120}
+        shadow
+        live
+        state={state}
+      />
+      <Button data-testid='agent-avatar-activation-toggle' size='small' onClick={toggle}>
+        {state === 'box' ? 'Activate' : 'Reset'}
+      </Button>
+    </VStack>
+  );
+};
+
+/** Cover all applications: the grey crown fills to the top in 480 ms and the agent plays Done. Hover or focus on the
+ *  button raises the line first. */
+export const Coverage: StoryFn = () => {
+  const handle = useRef<AgentAvatarHandle>(null);
+  const cue = useRef<HTMLButtonElement>(null);
+  const [coverage, setCoverage] = useState<'full' | 'partial'>('partial');
+  const coverAll = () => handle.current?.coverAll();
+  const onBeatEnd = () => setCoverage('full');
+  const reset = () => setCoverage('partial');
+  return (
+    <VStack gap={16} align='center'>
+      <AgentAvatar
+        data-testid='agent-avatar-coverage'
+        agent='radar'
+        seed='radar'
+        size={120}
+        shadow
+        live
+        hasApplications
+        coverage={coverage}
+        handleRef={handle}
+        cueRef={cue}
+        onBeatEnd={onBeatEnd}
+      />
+      <HStack gap={8}>
+        <Button ref={cue} data-testid='agent-avatar-coverage-all' size='small' onClick={coverAll}>
+          Cover all applications
+        </Button>
+        <Button
+          data-testid='agent-avatar-coverage-reset'
+          variant='outline'
+          size='small'
+          onClick={reset}
+        >
+          Reset
+        </Button>
+      </HStack>
+    </VStack>
+  );
+};
+
+/** Fifteen live agents at 120 px, as on a full team page, with the engine's frame rate and JavaScript per frame. */
+export const ManyOnScreen: StoryFn = () => (
+  <VStack gap={16}>
+    <FrameMeter />
+    <AgentAvatarGroup>
+      <div className='grid grid-cols-5 gap-16'>
+        {TEAM.slice(0, 15).map(m => (
+          <AgentAvatar
+            key={m.id}
+            data-testid={`agent-avatar-many-${m.id}`}
+            look={m.look}
+            seed={m.id}
+            size={120}
+            live
+          />
+        ))}
+      </div>
+    </AgentAvatarGroup>
+  </VStack>
+);
+
+/** With motion off (the user's setting, or reduced motion in the system) every live agent shows its static frame. */
+export const ReducedMotion: StoryFn = () => {
+  const motion = useAgentMotion();
+  const [off, setOff] = useState(false);
+  useEffect(() => {
+    setAgentMotion(!off);
+    return () => setAgentMotion(true);
+  }, [off]);
+  const toggle = () => setOff(!off);
+  return (
+    <VStack gap={16} align='center'>
+      <HStack gap={24}>
+        {LIVE_STATES.slice(0, 4).map(state => (
+          <AgentAvatar
+            key={state}
+            data-testid={`agent-avatar-motion-${state}`}
+            agent='trim'
+            seed={`trim-${state}`}
+            size={72}
+            state={state}
+            live
+          />
+        ))}
+      </HStack>
+      <Button
+        data-testid='agent-avatar-motion-toggle'
+        variant='outline'
+        size='small'
+        onClick={toggle}
+      >
+        {off ? 'Turn motion on' : 'Turn motion off'}
+      </Button>
+      <span className='sb-annotation'>{motion ? 'Motion on' : 'Motion off (static frames)'}</span>
+    </VStack>
+  );
+};
+```
+
+### ../lib/agent-characters/data.gen.ts
+
+```tsx
+// GENERATED by scripts/agent-avatars/export-data.ts from the handoff data (reference look v14). Do not edit.
+// Source export: 2026-11-04, Playwright (playwright-core 1.58.2) with Chrome 156 headless, 1440 x 900 viewport, deviceScaleFactor 2; values read from the page's own constants and functions at runtime
+
+// Id unions: the page's own ids (07 §6.2). `cyan` is labelled «teal».
+export type AgentShapeId = 'dome' | 'gumdrop' | 'cushion' | 'pebble' | 'capsule' | 'cloud' | 'egg' | 'mochi' | 'kettle' | 'mug' | 'padlock' | 'safe';
+export type AgentColorId = 'coral' | 'cobalt' | 'sky' | 'cyan' | 'lilac' | 'heather' | 'pink' | 'sand' | 'toffee' | 'powder' | 'lavender' | 'blush' | 'butter' | 'mint' | 'sage' | 'petrol' | 'plum' | 'cocoa' | 'olive' | 'graphite' | 'stone' | 'oat';
+export type AgentEyeStyle = 'round' | 'oval' | 'tall' | 'sleepy';
+export type AgentPropId = 'antennae' | 'dish' | 'glasses' | 'seam' | 'beanie' | 'headlamp' | 'periscope' | 'magnifier' | 'pennant' | 'flowerclip' | 'plaster' | 'sprout' | 'badge' | 'windkey' | 'monocle' | 'none';
+export type AgentCharacterId = 'wally' | 'radar' | 'sift' | 'mend' | 'trim' | 'probe';
+export type AgentToneId = 'metal' | 'ink' | 'leaf' | 'wood' | 'oat' | 'honey' | 'brass' | 'cocoa' | 'glass' | 'beige';
+
+/** A stored look: four ids and a schema version, so a later kit change can migrate stored looks. */
+export interface AgentLook {
+  v: 1;
+  shape: AgentShapeId;
+  color: AgentColorId;
+  eyes: AgentEyeStyle;
+  prop: AgentPropId;
+}
+
+/** A preset: a look plus its default name, role and template (null: Wally, and Probe until its template exists). */
+export interface AgentPreset extends Omit<AgentLook, 'v'> {
+  id: AgentCharacterId;
+  name: string;
+  role: string;
+  templateId: string | null;
+}
+
+export interface AgentShapeDef {
+  id: AgentShapeId;
+  fam: 'soft' | 'object';
+  name: string;
+  /** body outline on the 120-unit grid */
+  d: string;
+  /** visor [x, y, width, height] */
+  v: [number, number, number, number];
+  /** declared top anchor; otherwise measured */
+  top?: [number, number];
+  parts?: { d: string; tone: AgentToneId; z: 'b' | 'f' }[];
+}
+export interface AgentColorDef {
+  id: AgentColorId;
+  name: string;
+  hex: string;
+  g: 'brand' | 'cool' | 'warm' | 'pastel' | 'deep' | 'neutral';
+  brand?: boolean;
+}
+export interface PropLayer {
+  d: string;
+  col: string;
+  mat: 'vinyl' | 'felt' | null;
+}
+export interface PropDeco {
+  s: string;
+  clip?: boolean;
+}
+export interface PropDef {
+  layers: PropLayer[];
+  deco: PropDeco[];
+  anim: { type: string; px: number; py: number } | null;
+  fid: { k: string; px: number; py: number };
+}
+export interface EyeBase { w: number; ht: number; hb: number; kt: number; kb: number; lid: number }
+
+export const SHAPE_IDS: AgentShapeId[] = [
+  "dome",
+  "gumdrop",
+  "cushion",
+  "pebble",
+  "capsule",
+  "cloud",
+  "egg",
+  "mochi",
+  "kettle",
+  "mug",
+  "padlock",
+  "safe"
+];
+export const COLOR_IDS: AgentColorId[] = [
+  "coral",
+  "cobalt",
+  "sky",
+  "cyan",
+  "lilac",
+  "heather",
+  "pink",
+  "sand",
+  "toffee",
+  "powder",
+  "lavender",
+  "blush",
+  "butter",
+  "mint",
+  "sage",
+  "petrol",
+  "plum",
+  "cocoa",
+  "olive",
+  "graphite",
+  "stone",
+  "oat"
+];
+export const EYE_STYLES: AgentEyeStyle[] = [
+  "round",
+  "oval",
+  "tall",
+  "sleepy"
+];
+export const PROP_IDS: AgentPropId[] = [
+  "antennae",
+  "dish",
+  "glasses",
+  "seam",
+  "beanie",
+  "headlamp",
+  "periscope",
+  "magnifier",
+  "pennant",
+  "flowerclip",
+  "plaster",
+  "sprout",
+  "badge",
+  "windkey",
+  "monocle",
+  "none"
+];
+
+export const SHAPES: AgentShapeDef[] = [
+  {
+    "id": "dome",
+    "fam": "soft",
+    "name": "Dome",
+    "d": "M16 100C16 56 36 30 60 30C84 30 104 56 104 100Q104 108 96 108H24Q16 108 16 100Z",
+    "v": [
+      28,
+      64,
+      64,
+      28
+    ]
+  },
+  {
+    "id": "gumdrop",
+    "fam": "soft",
+    "name": "Gumdrop",
+    "d": "M60 16C72 16 106 82 106 97C106 105 100 108 91 108H29C20 108 14 105 14 97C14 82 48 16 60 16Z",
+    "v": [
+      34,
+      70,
+      52,
+      26
+    ]
+  },
+  {
+    "id": "cushion",
+    "fam": "soft",
+    "name": "Cushion",
+    "d": "M24 32C40 26 80 26 96 32C104 35 106 42 106 58V92C106 104 100 108 88 108H32C20 108 14 104 14 92V58C14 42 16 35 24 32Z",
+    "v": [
+      28,
+      60,
+      64,
+      28
+    ]
+  },
+  {
+    "id": "pebble",
+    "fam": "soft",
+    "name": "Pebble",
+    "d": "M60 40C90 40 108 62 108 84C108 100 96 108 80 108H40C24 108 12 100 12 84C12 62 30 40 60 40Z",
+    "v": [
+      28,
+      66,
+      64,
+      26
+    ]
+  },
+  {
+    "id": "capsule",
+    "fam": "soft",
+    "name": "Capsule",
+    "d": "M60 20C80 20 90 34 90 54V96C90 104 84 108 76 108H44C36 108 30 104 30 96V54C30 34 40 20 60 20Z",
+    "v": [
+      36,
+      58,
+      48,
+      28
+    ]
+  },
+  {
+    "id": "cloud",
+    "fam": "soft",
+    "name": "Cloud",
+    "d": "M30 108C16 108 10 98 13 88C8 76 18 63 31 66C31 50 46 40 60 46C72 36 92 44 92 60C104 60 112 72 107 85C112 98 104 108 92 108Z",
+    "v": [
+      30,
+      72,
+      60,
+      26
+    ],
+    "top": [
+      60,
+      45
+    ]
+  },
+  {
+    "id": "egg",
+    "fam": "soft",
+    "name": "Egg",
+    "d": "M60 20C84 20 98 54 98 78C98 98 82 108 60 108C38 108 22 98 22 78C22 54 36 20 60 20Z",
+    "v": [
+      32,
+      62,
+      56,
+      26
+    ]
+  },
+  {
+    "id": "mochi",
+    "fam": "soft",
+    "name": "Mochi",
+    "d": "M60 50C92 50 112 70 112 88C112 102 100 108 84 108H36C20 108 8 102 8 88C8 70 28 50 60 50Z",
+    "v": [
+      26,
+      70,
+      68,
+      24
+    ]
+  },
+  {
+    "id": "kettle",
+    "fam": "object",
+    "name": "Kettle",
+    "d": "M18 100C18 66 36 44 60 44C84 44 102 66 102 100Q102 108 94 108H26Q18 108 18 100ZM24 80C14 74 8 64 5 56L9 53C13 61 20 69 28 74Z",
+    "v": [
+      30,
+      68,
+      60,
+      26
+    ],
+    "top": [
+      60,
+      44
+    ],
+    "parts": [
+      {
+        "d": "M31 64.07L30.87 57.86L31.66 52.01L33.32 46.78L35.74 42.21L38.82 38.31L42.44 35.13L46.48 32.66L50.83 30.9L55.36 29.85L60 29.5L64.64 29.85L69.17 30.9L73.52 32.66L77.56 35.13L81.18 38.31L84.26 42.21L86.68 46.78L88.34 52.01L89.13 57.86L89 64.07A3 3 0 0 1 83 63.93L83.14 58.17L82.48 53.31L81.14 49.09L79.23 45.47L76.82 42.44L74 39.95L70.82 38.01L67.37 36.62L63.73 35.78L60 35.5L56.27 35.78L52.63 36.62L49.18 38.01L46 39.95L43.18 42.44L40.77 45.47L38.86 49.09L37.52 53.31L36.86 58.17L37 63.93A3 3 0 0 1 31 64.07Z",
+        "tone": "ink",
+        "z": "b"
+      },
+      {
+        "d": "M55 42A5 4 0 1 1 65 42A5 4 0 1 1 55 42Z",
+        "tone": "ink",
+        "z": "f"
+      }
+    ]
+  },
+  {
+    "id": "mug",
+    "fam": "object",
+    "name": "Mug",
+    "d": "M28 34H74A12 12 0 0 1 86 46V96A12 12 0 0 1 74 108H28A12 12 0 0 1 16 96V46A12 12 0 0 1 28 34ZM77 70A15 19 0 1 1 107 70A15 19 0 1 1 77 70ZM87.5 70A6.5 9.5 0 1 0 100.5 70A6.5 9.5 0 1 0 87.5 70Z",
+    "v": [
+      22,
+      56,
+      58,
+      28
+    ]
+  },
+  {
+    "id": "padlock",
+    "fam": "object",
+    "name": "Padlock",
+    "d": "M36 52H84A16 16 0 0 1 100 68V92A16 16 0 0 1 84 108H36A16 16 0 0 1 20 92V68A16 16 0 0 1 36 52Z",
+    "v": [
+      30,
+      66,
+      60,
+      26
+    ],
+    "top": [
+      60,
+      14
+    ],
+    "parts": [
+      {
+        "d": "M34 58V40A26 26 0 0 1 86 40V58H74V40A14 14 0 0 0 46 40V58Z",
+        "tone": "metal",
+        "z": "b"
+      }
+    ]
+  },
+  {
+    "id": "safe",
+    "fam": "object",
+    "name": "Safe",
+    "d": "M28 30H92A14 14 0 0 1 106 44V86A14 14 0 0 1 92 100H28A14 14 0 0 1 14 86V44A14 14 0 0 1 28 30Z",
+    "v": [
+      26,
+      44,
+      68,
+      26
+    ],
+    "parts": [
+      {
+        "d": "M26 96H32A4 4 0 0 1 36 100V104A4 4 0 0 1 32 108H26A4 4 0 0 1 22 104V100A4 4 0 0 1 26 96ZM88 96H94A4 4 0 0 1 98 100V104A4 4 0 0 1 94 108H88A4 4 0 0 1 84 104V100A4 4 0 0 1 88 96Z",
+        "tone": "ink",
+        "z": "b"
+      },
+      {
+        "d": "M53 86A7 7 0 1 1 67 86A7 7 0 1 1 53 86ZM73.5 83.5H87.5A2.5 2.5 0 0 1 90 86V86A2.5 2.5 0 0 1 87.5 88.5H73.5A2.5 2.5 0 0 1 71 86V86A2.5 2.5 0 0 1 73.5 83.5Z",
+        "tone": "metal",
+        "z": "f"
+      }
+    ]
+  }
+];
+
+export const COLORS: AgentColorDef[] = [
+  {
+    "id": "coral",
+    "name": "coral, Wally only",
+    "hex": "#FF4D2E",
+    "g": "brand",
+    "brand": true
+  },
+  {
+    "id": "cobalt",
+    "name": "cobalt",
+    "hex": "#3F63DB",
+    "g": "cool"
+  },
+  {
+    "id": "sky",
+    "name": "sky",
+    "hex": "#62AEEB",
+    "g": "cool"
+  },
+  {
+    "id": "cyan",
+    "name": "teal",
+    "hex": "#2BA6BF",
+    "g": "cool"
+  },
+  {
+    "id": "lilac",
+    "name": "lilac",
+    "hex": "#9A7FE0",
+    "g": "cool"
+  },
+  {
+    "id": "heather",
+    "name": "heather",
+    "hex": "#9E86A8",
+    "g": "cool"
+  },
+  {
+    "id": "pink",
+    "name": "pink",
+    "hex": "#E373A8",
+    "g": "warm"
+  },
+  {
+    "id": "sand",
+    "name": "sand",
+    "hex": "#D8B68A",
+    "g": "warm"
+  },
+  {
+    "id": "toffee",
+    "name": "toffee",
+    "hex": "#A87A62",
+    "g": "warm"
+  },
+  {
+    "id": "powder",
+    "name": "powder",
+    "hex": "#B9D7F0",
+    "g": "pastel"
+  },
+  {
+    "id": "lavender",
+    "name": "lavender",
+    "hex": "#D3C6F3",
+    "g": "pastel"
+  },
+  {
+    "id": "blush",
+    "name": "blush",
+    "hex": "#F2B8C8",
+    "g": "pastel"
+  },
+  {
+    "id": "butter",
+    "name": "butter",
+    "hex": "#F2D57E",
+    "g": "pastel"
+  },
+  {
+    "id": "mint",
+    "name": "mint",
+    "hex": "#A8DCC8",
+    "g": "pastel"
+  },
+  {
+    "id": "sage",
+    "name": "sage",
+    "hex": "#9BAE8C",
+    "g": "pastel"
+  },
+  {
+    "id": "petrol",
+    "name": "petrol",
+    "hex": "#2D6E8E",
+    "g": "deep"
+  },
+  {
+    "id": "plum",
+    "name": "plum",
+    "hex": "#7C4485",
+    "g": "deep"
+  },
+  {
+    "id": "cocoa",
+    "name": "cocoa",
+    "hex": "#6B4C3F",
+    "g": "deep"
+  },
+  {
+    "id": "olive",
+    "name": "olive",
+    "hex": "#7E7C48",
+    "g": "deep"
+  },
+  {
+    "id": "graphite",
+    "name": "graphite",
+    "hex": "#4C5463",
+    "g": "neutral"
+  },
+  {
+    "id": "stone",
+    "name": "stone",
+    "hex": "#A9A59D",
+    "g": "neutral"
+  },
+  {
+    "id": "oat",
+    "name": "oat",
+    "hex": "#E9E0D0",
+    "g": "neutral"
+  }
+];
+
+export const TONE: Record<AgentToneId, string> = {
+  "metal": "#A3ABBB",
+  "ink": "#262A36",
+  "leaf": "#7F9E66",
+  "wood": "#8E6447",
+  "oat": "#EEE5D6",
+  "honey": "#E8B54E",
+  "brass": "#C8A35E",
+  "cocoa": "#5B3E33",
+  "glass": "#CFE3F2",
+  "beige": "#E9D2B5"
+};
+
+export const HARD: ReadonlySet<string> = new Set([
+  "metal",
+  "brass",
+  "ink",
+  "glass"
+]);
+
+export const EYE_BASE: Record<AgentEyeStyle, EyeBase> = {
+  "round": {
+    "w": 1.05,
+    "ht": 1,
+    "hb": 1,
+    "kt": 0.55,
+    "kb": 0.55,
+    "lid": 0
+  },
+  "oval": {
+    "w": 1,
+    "ht": 1.25,
+    "hb": 1.25,
+    "kt": 0.55,
+    "kb": 0.55,
+    "lid": 0
+  },
+  "tall": {
+    "w": 0.8,
+    "ht": 1.6,
+    "hb": 1.6,
+    "kt": 0.6,
+    "kb": 0.6,
+    "lid": 0
+  },
+  "sleepy": {
+    "w": 1.05,
+    "ht": 1.15,
+    "hb": 1.15,
+    "kt": 0.55,
+    "kb": 0.55,
+    "lid": 0.5
+  }
+};
+
+export const PROPS: [AgentPropId, string][] = [
+  [
+    "antennae",
+    "Antennae"
+  ],
+  [
+    "dish",
+    "Dish antenna"
+  ],
+  [
+    "glasses",
+    "Glasses"
+  ],
+  [
+    "seam",
+    "Seam"
+  ],
+  [
+    "beanie",
+    "Beanie"
+  ],
+  [
+    "headlamp",
+    "Headlamp"
+  ],
+  [
+    "periscope",
+    "Periscope"
+  ],
+  [
+    "magnifier",
+    "Magnifier"
+  ],
+  [
+    "pennant",
+    "Pennant"
+  ],
+  [
+    "flowerclip",
+    "Flower clip"
+  ],
+  [
+    "plaster",
+    "Plaster"
+  ],
+  [
+    "sprout",
+    "Sprout"
+  ],
+  [
+    "badge",
+    "Badge"
+  ],
+  [
+    "windkey",
+    "Wind-up key"
+  ],
+  [
+    "monocle",
+    "Monocle"
+  ],
+  [
+    "none",
+    "No prop"
+  ]
+];
+
+export const GLYPH_PROPS: ReadonlySet<string> = new Set([
+  "antennae",
+  "dish",
+  "beanie",
+  "periscope",
+  "pennant",
+  "sprout",
+  "windkey"
+]);
+
+export const CAST: AgentPreset[] = [
+  {
+    "id": "wally",
+    "name": "Wally",
+    "role": "Assistant",
+    "templateId": null,
+    "shape": "dome",
+    "color": "coral",
+    "eyes": "oval",
+    "prop": "antennae"
+  },
+  {
+    "id": "radar",
+    "name": "Radar",
+    "role": "Attack Anomaly Investigator",
+    "templateId": "attack-anomaly-investigation",
+    "shape": "gumdrop",
+    "color": "cobalt",
+    "eyes": "tall",
+    "prop": "dish"
+  },
+  {
+    "id": "sift",
+    "name": "Sift",
+    "role": "False Positives Analyzer",
+    "templateId": "fp-marking",
+    "shape": "cushion",
+    "color": "lilac",
+    "eyes": "round",
+    "prop": "glasses"
+  },
+  {
+    "id": "mend",
+    "name": "Mend",
+    "role": "False Positive Resolver",
+    "templateId": "fp-resolver",
+    "shape": "pebble",
+    "color": "sand",
+    "eyes": "sleepy",
+    "prop": "seam"
+  },
+  {
+    "id": "trim",
+    "name": "Trim",
+    "role": "Ruleset Optimizer",
+    "templateId": "ruleset-optimizer",
+    "shape": "capsule",
+    "color": "cyan",
+    "eyes": "oval",
+    "prop": "windkey"
+  },
+  {
+    "id": "probe",
+    "name": "Probe",
+    "role": "Exploitability Verifier",
+    "templateId": null,
+    "shape": "egg",
+    "color": "olive",
+    "eyes": "round",
+    "prop": "headlamp"
+  }
+];
+
+/** propDef() for the six presets, keyed `shape|hex|prop`; any other look needs the AgentLookBuilder entry. */
+export const PRESET_PROPS: Partial<Record<string, PropDef>> = {
+  "dome|#FF4D2E|antennae": {
+    "layers": [
+      {
+        "d": "M49.69 35.73L48.83 34.18L47.97 32.67L47.1 31.2L46.21 29.75L45.32 28.33L44.42 26.95L43.51 25.6L42.59 24.27L41.66 22.98L40.72 21.72L39.77 20.49L38.82 19.29L37.85 18.13L36.86 16.98A1.5 1.5 0 0 1 39.14 15.02L40.14 16.19L41.14 17.4L42.13 18.64L43.11 19.91L44.08 21.21L45.04 22.54L45.99 23.9L46.92 25.29L47.85 26.72L48.76 28.17L49.67 29.65L50.56 31.16L51.44 32.71L52.31 34.27A1.5 1.5 0 0 1 49.69 35.73ZM33.1 14.5A4.4 4.4 0 1 1 41.9 14.5A4.4 4.4 0 1 1 33.1 14.5ZM67.69 34.27L68.56 32.71L69.44 31.16L70.33 29.65L71.24 28.17L72.15 26.72L73.08 25.29L74.01 23.9L74.96 22.54L75.92 21.21L76.89 19.91L77.87 18.64L78.86 17.4L79.86 16.19L80.86 15.02A1.5 1.5 0 0 1 83.14 16.98L82.15 18.13L81.18 19.29L80.23 20.49L79.28 21.72L78.34 22.98L77.41 24.27L76.49 25.6L75.58 26.95L74.68 28.33L73.79 29.75L72.9 31.2L72.03 32.67L71.17 34.18L70.31 35.73A1.5 1.5 0 0 1 67.69 34.27ZM78.1 14.5A4.4 4.4 0 1 1 86.9 14.5A4.4 4.4 0 1 1 78.1 14.5Z",
+        "col": "#262A36",
+        "mat": "vinyl"
+      }
+    ],
+    "deco": [],
+    "anim": {
+      "type": "twitch",
+      "px": 60,
+      "py": 34
+    },
+    "fid": {
+      "k": "twitch",
+      "px": 60,
+      "py": 34
+    }
+  },
+  "gumdrop|#3F63DB|dish": {
+    "layers": [
+      {
+        "d": "M60.73 19.71L63.73 6.71A1.3 1.3 0 0 1 66.27 7.29L63.27 20.29A1.3 1.3 0 0 1 60.73 19.71Z",
+        "col": "#262A36",
+        "mat": "vinyl"
+      },
+      {
+        "d": "M52 0Q65 15 79 2Z",
+        "col": "#a9b9ef",
+        "mat": null
+      },
+      {
+        "d": "M64.13 3.76L67.13 -7.24A0.9 0.9 0 0 1 68.87 -6.76L65.87 4.24A0.9 0.9 0 0 1 64.13 3.76ZM65.6 -8A2.4 2.4 0 1 1 70.4 -8A2.4 2.4 0 1 1 65.6 -8Z",
+        "col": "#262A36",
+        "mat": "vinyl"
+      }
+    ],
+    "deco": [],
+    "anim": {
+      "type": "dish",
+      "px": 63,
+      "py": 18
+    },
+    "fid": {
+      "k": "scan",
+      "px": 63,
+      "py": 18
+    }
+  },
+  "cushion|#9A7FE0|glasses": {
+    "layers": [
+      {
+        "d": "M36.7 74A10.5 10.5 0 1 1 57.7 74A10.5 10.5 0 1 1 36.7 74ZM38.8 74A8.4 8.4 0 1 0 55.6 74A8.4 8.4 0 1 0 38.8 74ZM62.3 74A10.5 10.5 0 1 1 83.3 74A10.5 10.5 0 1 1 62.3 74ZM64.4 74A8.4 8.4 0 1 0 81.2 74A8.4 8.4 0 1 0 64.4 74ZM56.07 71.86L56.57 71.37L57.1 70.93L57.65 70.55L58.21 70.25L58.8 70.03L59.39 69.9L60 69.85L60.61 69.9L61.2 70.03L61.79 70.25L62.35 70.55L62.9 70.93L63.43 71.37L63.93 71.86A0.9 0.9 0 0 1 62.67 73.14L62.22 72.7L61.81 72.36L61.42 72.09L61.04 71.89L60.68 71.75L60.34 71.68L60 71.65L59.66 71.68L59.32 71.75L58.96 71.89L58.58 72.09L58.19 72.36L57.78 72.7L57.33 73.14A0.9 0.9 0 0 1 56.07 71.86Z",
+        "col": "#EEE5D6",
+        "mat": "vinyl"
+      }
+    ],
+    "deco": [
+      {
+        "s": "<path class=\"glint\" d=\"M75.3 67.5l3.2 3.2M49.7 67.5l3.2 3.2\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" opacity=\".55\"/>"
+      }
+    ],
+    "anim": null,
+    "fid": {
+      "k": "bob",
+      "px": 60,
+      "py": 27.5
+    }
+  },
+  "pebble|#D8B68A|seam": {
+    "layers": [],
+    "deco": [
+      {
+        "clip": true,
+        "s": "<path d=\"M26.5 57Q60 47 93.5 57\" stroke=\"#877258\" stroke-width=\"1.3\" fill=\"none\"/><path class=\"stitch\" d=\"M26.5 57Q60 47 93.5 57\" stroke=\"#F4EEE4\" stroke-width=\"3.4\" stroke-dasharray=\"1.6 4.4\" stroke-linecap=\"round\" fill=\"none\"/>"
+      }
+    ],
+    "anim": null,
+    "fid": {
+      "k": "none",
+      "px": 60,
+      "py": 40
+    }
+  },
+  "capsule|#2BA6BF|windkey": {
+    "layers": [
+      {
+        "d": "M59.5 11H60.5A1.5 1.5 0 0 1 62 12.5V21.5A1.5 1.5 0 0 1 60.5 23H59.5A1.5 1.5 0 0 1 58 21.5V12.5A1.5 1.5 0 0 1 59.5 11Z",
+        "col": "#C8A35E",
+        "mat": "vinyl"
+      },
+      {
+        "d": "M47 6A6.5 5.5 0 1 1 60 6A6.5 5.5 0 1 1 47 6ZM50.9 6A2.6 2.2 0 1 0 56.1 6A2.6 2.2 0 1 0 50.9 6ZM60 6A6.5 5.5 0 1 1 73 6A6.5 5.5 0 1 1 60 6ZM63.9 6A2.6 2.2 0 1 0 69.1 6A2.6 2.2 0 1 0 63.9 6Z",
+        "col": "#C8A35E",
+        "mat": "vinyl"
+      }
+    ],
+    "deco": [],
+    "anim": {
+      "type": "wind",
+      "px": 60,
+      "py": 10
+    },
+    "fid": {
+      "k": "spin",
+      "px": 60,
+      "py": 10
+    }
+  },
+  "egg|#7E7C48|headlamp": {
+    "layers": [
+      {
+        "d": "M34.62 33.55L38.22 32.61L41.85 31.81L45.48 31.16L49.11 30.65L52.74 30.29L56.37 30.07L60 30L63.63 30.07L67.26 30.29L70.89 30.65L74.52 31.16L78.15 31.81L81.78 32.61L85.38 33.55A1.5 1.5 0 0 1 84.62 36.45L81.08 35.53L77.56 34.76L74.05 34.12L70.54 33.63L67.02 33.28L63.51 33.07L60 33L56.49 33.07L52.98 33.28L49.46 33.63L45.95 34.12L42.44 34.76L38.92 35.53L35.38 36.45A1.5 1.5 0 0 1 34.62 33.55Z",
+        "col": "#262A36",
+        "mat": "vinyl"
+      },
+      {
+        "d": "M57 25H63A4 4 0 0 1 67 29V32A4 4 0 0 1 63 36H57A4 4 0 0 1 53 32V29A4 4 0 0 1 57 25Z",
+        "col": "#A3ABBB",
+        "mat": "vinyl"
+      },
+      {
+        "d": "M55.4 30.5A4.6 3.8 0 1 1 64.6 30.5A4.6 3.8 0 1 1 55.4 30.5Z",
+        "col": "#EEE5D6",
+        "mat": "vinyl"
+      }
+    ],
+    "deco": [
+      {
+        "s": "<path class=\"beam\" d=\"M56 28L44 -6L76 -6L64 28Z\" fill=\"#FFF6D6\" opacity=\"0\"/>"
+      }
+    ],
+    "anim": null,
+    "fid": {
+      "k": "flicker",
+      "px": 60,
+      "py": 30
+    }
+  }
+};
+
+export const STATES: { key: string; label: string; product: string; engine: string }[] = [
+  {
+    "key": "idle",
+    "label": "On duty",
+    "product": "Active, waiting for work",
+    "engine": "idle"
+  },
+  {
+    "key": "hello",
+    "label": "Hello",
+    "product": "Chat or drawer opened",
+    "engine": "hello"
+  },
+  {
+    "key": "working",
+    "label": "Working",
+    "product": "Run in progress",
+    "engine": "working"
+  },
+  {
+    "key": "needs",
+    "label": "Needs you",
+    "product": "N pending approval",
+    "engine": "needs"
+  },
+  {
+    "key": "done",
+    "label": "Done",
+    "product": "Run finished, change applied",
+    "engine": "done"
+  },
+  {
+    "key": "failed",
+    "label": "Failed",
+    "product": "Run failed",
+    "engine": "failed"
+  },
+  {
+    "key": "off",
+    "label": "Deactivated",
+    "product": "Deactivated",
+    "engine": "off"
+  },
+  {
+    "key": "box",
+    "label": "Not set up",
+    "product": "Not set up",
+    "engine": "box"
+  },
+  {
+    "key": "invite",
+    "label": "Inviting",
+    "product": "Not set up, inviting",
+    "engine": "invite"
+  },
+  {
+    "key": "partly",
+    "label": "Partial coverage",
+    "product": "Active in some applications",
+    "engine": "idle with the cover flag (setCover(true))"
+  }
+];
+
+export const SPRINGS: Record<string, { T: number; zeta: number }> = {
+  "P_SHAPE": {
+    "T": 0.28,
+    "zeta": 0.8
+  },
+  "P_POP": {
+    "T": 0.32,
+    "zeta": 0.45
+  },
+  "P_DART": {
+    "T": 0.12,
+    "zeta": 0.65
+  },
+  "P_PURSUIT": {
+    "T": 0.3,
+    "zeta": 0.85
+  },
+  "P_BRIGHT": {
+    "T": 0.2,
+    "zeta": 1
+  },
+  "P_SQ": {
+    "T": 0.22,
+    "zeta": 0.3
+  },
+  "P_LAND": {
+    "T": 0.35,
+    "zeta": 0.4
+  },
+  "P_W": {
+    "T": 0.6,
+    "zeta": 1
+  }
+};
+
+export const OPTY: Record<AgentShapeId, number> = {
+  "dome": 21.4242,
+  "gumdrop": 17.1466,
+  "cushion": 18.1068,
+  "pebble": 25.1939,
+  "capsule": 15.0188,
+  "cloud": 27.6431,
+  "egg": 15.2563,
+  "mochi": 30.1353,
+  "kettle": 27.8453,
+  "mug": 20.8761,
+  "padlock": 20.3776,
+  "safe": 16.8761
+};
+
+/** geom() per shape as the page measures it (top anchor, half-width per row at y = i / 2, footprint at y 104). */
+export const GEOMS: Record<AgentShapeId, { top: [number, number]; HW: number[]; foot: [number, number] }> = {"dome":{"top":[60,30],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4.5,6.5,9,10.5,11.5,13,14,15,16,17,18,18.5,19.5,20,21,21.5,22,22.5,23,23.5,24,25,25,25.5,26,26.5,27,27.5,28,28.5,28.5,29,29.5,30,30,30.5,31,31.5,31.5,32,32,32.5,33,33,33.5,33.5,34,34,34.5,34.5,35,35,35.5,35.5,36,36,36.5,36.5,37,37,37,37.5,37.5,38,38,38,38.5,38.5,38.5,39,39,39,39.5,39.5,39.5,40,40,40,40,40.5,40.5,40.5,41,41,41,41,41,41.5,41.5,41.5,41.5,42,42,42,42,42,42,42.5,42.5,42.5,42.5,42.5,42.5,43,43,43,43,43,43,43,43.5,43.5,43.5,43.5,43.5,43.5,43.5,43.5,43.5,43.5,43.5,43.5,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,43.5,43.5,43.5,43,43,42.5,42.5,42,41,40.5,39,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[17,103]},"gumdrop":{"top":[60,16],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.5,2.5,3.5,4,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5,9.5,10,10.5,11,11.5,12,12,12.5,13,13.5,13.5,14,14.5,14.5,15,15.5,16,16,16.5,17,17,17.5,18,18,18.5,19,19,19.5,19.5,20,20.5,20.5,21,21,21.5,22,22,22.5,23,23,23.5,23.5,24,24,24.5,25,25,25.5,25.5,26,26,26.5,27,27,27.5,27.5,28,28,28.5,28.5,29,29,29.5,29.5,30,30,30.5,31,31,31.5,31.5,32,32,32.5,32.5,33,33,33.5,33.5,34,34,34.5,34.5,34.5,35,35,35.5,35.5,36,36,36.5,36.5,37,37,37.5,37.5,38,38,38,38.5,38.5,39,39,39.5,39.5,39.5,40,40,40.5,40.5,40.5,41,41,41.5,41.5,41.5,42,42,42.5,42.5,42.5,43,43,43,43.5,43.5,43.5,44,44,44,44.5,44.5,44.5,45,45,45,45,45.5,45.5,45.5,45.5,45.5,46,46,46,46,46,46,46,46,46,46,46,45.5,45.5,45.5,45,45,45,44.5,44,44,43.5,43,42.5,41.5,40.5,39.5,38,35.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[16.5,103]},"cushion":{"top":[60,27.5],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,10.5,17,21.5,25,27.5,30,32,33.5,35,36.5,37.5,38.5,39.5,40,40.5,41,41.5,42,42.5,43,43,43.5,43.5,43.5,44,44,44.5,44.5,44.5,44.5,45,45,45,45,45,45.5,45.5,45.5,45.5,45.5,45.5,45.5,45.5,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,45.5,45.5,45.5,45.5,45,45,45,45,44.5,44.5,44,44,43.5,43,42.5,42.5,42,41.5,40.5,40,39,37.5,36,33,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[18,101.5]},"pebble":{"top":[60,40],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5.5,9,12,14,16,17,18.5,20,21,22.5,23.5,24.5,25.5,26,27,28,28.5,29.5,30,30.5,31.5,32,32.5,33,33.5,34.5,35,35.5,36,36.5,36.5,37,37.5,38,38.5,39,39.5,39.5,40,40.5,40.5,41,41.5,41.5,42,42.5,42.5,43,43,43.5,43.5,44,44,44.5,44.5,45,45,45,45.5,45.5,45.5,46,46,46,46.5,46.5,46.5,47,47,47,47,47.5,47.5,47.5,47.5,47.5,47.5,47.5,48,48,48,48,48,48,48,48,48,48,48,48,48,48,48,48,48,48,47.5,47.5,47.5,47.5,47.5,47,47,47,46.5,46.5,46.5,46,46,46,45.5,45,45,44.5,44.5,44,43.5,43.5,43,42.5,42,41.5,41,40.5,40,39,38.5,37.5,37,36,35,33.5,32,30.5,28.5,25.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[23,96]},"capsule":{"top":[60,20],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4.5,7.5,9.5,11,12.5,13.5,14.5,15.5,16.5,17.5,18,18.5,19.5,20,20.5,21,21.5,22,22.5,23,23,23.5,24,24.5,24.5,25,25,25.5,26,26,26.5,26.5,27,27,27,27.5,27.5,27.5,28,28,28,28.5,28.5,28.5,29,29,29,29,29,29.5,29.5,29.5,29.5,29.5,29.5,29.5,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,29.5,29.5,29.5,29.5,29,29,28.5,28.5,28,28,27.5,27,26.5,26,25,24.5,23,22,19.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[33,86.5]},"cloud":{"top":[60,45],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,24.5,25,25.5,26,26.5,27,27.5,28,28.5,28.5,29,29,29.5,29.5,30,30,30.5,30.5,30.5,31,31,31,31,31.5,31.5,31.5,31.5,31.5,31.5,35,37,38,39,40,41,41.5,42,42.5,43,43.5,44,44.5,45,45,45.5,46,46,46.5,46.5,46.5,47,47,47,47.5,47.5,47.5,47.5,48,48,48,48,48,48,48,48,48,48,48,48.5,48.5,48.5,48.5,48.5,48.5,48.5,48.5,48,48,48,48,48,47.5,47.5,47.5,47.5,47.5,47.5,47.5,48,48,48,48,48,48,48,48,48,48,48,48,48,47.5,47.5,47.5,47.5,47,47,46.5,46.5,46,46,45.5,45,45,44.5,44,43.5,43,42,41.5,40.5,39.5,38.5,37,34.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[17.5,103]},"egg":{"top":[60,20],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3.5,6,7.5,9,10,11.5,12.5,13,14,14.5,15.5,16.5,17,17.5,18,18.5,19,19.5,20,20.5,21,21.5,22,22.5,23,23.5,23.5,24,24.5,24.5,25,25.5,26,26,26.5,27,27,27.5,27.5,28,28.5,28.5,29,29,29.5,29.5,30,30,30.5,30.5,31,31,31,31.5,31.5,32,32,32.5,32.5,32.5,33,33,33,33.5,33.5,33.5,34,34,34,34.5,34.5,34.5,35,35,35,35,35.5,35.5,35.5,36,36,36,36,36,36.5,36.5,36.5,36.5,36.5,37,37,37,37,37,37,37.5,37.5,37.5,37.5,37.5,37.5,37.5,37.5,38,38,38,38,38,38,38,38,38,38,38,38,38,38,38,38,38,38,38,38,38,37.5,37.5,37.5,37.5,37.5,37.5,37,37,37,37,36.5,36.5,36.5,36,36,35.5,35.5,35.5,35,35,34.5,34.5,34,33.5,33.5,33,32.5,32.5,32,31.5,31,30.5,30,29.5,29,28.5,27.5,27,26.5,25.5,25,24,23,22,21,19.5,18.5,17,15,13,10.5,6.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[39,80]},"mochi":{"top":[60,50],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6.5,10.5,13.5,15.5,17.5,19.5,21,22.5,24,25,26.5,27.5,28.5,29.5,30.5,31.5,32,33,34,34.5,35.5,36,36.5,37.5,38,38.5,39,40,40.5,41,41.5,42,42.5,43,43.5,44,44.5,44.5,45,45.5,46,46,46.5,47,47,47.5,48,48,48.5,48.5,49,49,49.5,49.5,50,50,50,50.5,50.5,50.5,51,51,51,51.5,51.5,51.5,51.5,51.5,52,52,52,52,52,52,52,52,52,52,52,52,52,52,52,51.5,51.5,51.5,51.5,51,51,51,50.5,50.5,50.5,50,50,49.5,49,49,48.5,48,47.5,47,46.5,46,45.5,45,44,43.5,42.5,41.5,40.5,39,37.5,36,33.5,30,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[17.5,102]},"kettle":{"top":[60,44],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4.5,7.5,9.5,11,13,14,15,16,17,18,19,20,20.5,21.5,22,22.5,23.5,24,24.5,25,25.5,26,26.5,27,27.5,28,28.5,29,29.5,29.5,30,30.5,31,31,31.5,32,32,32.5,33,33,33.5,33.5,34,34.5,34.5,35,35,35.5,35.5,36,36,36.5,36.5,46.5,46,46,45.5,45,44.5,44,43.5,43,42.5,42,41.5,40.5,40,39.5,39.5,39.5,39.5,39.5,40,40,40,40,40.5,40.5,40.5,40.5,40.5,40.5,41,41,41,41,41,41.5,41.5,41.5,41.5,41.5,41.5,41.5,41.5,41.5,41.5,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,42,41.5,41.5,41.5,41,41,40.5,40.5,40,39,38.5,37,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[19,101]},"mug":{"top":[60,34],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,34.5,36,37.5,38,39,39.5,40.5,41,41,41.5,42,42.5,42.5,43,43,43.5,43.5,43.5,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44.5,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44.5,44.5,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,44,43.5,43.5,43.5,43,43,43,42.5,42,42,41.5,41,41,40.5,39.5,39,38.5,37.5,36.5,35,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[19,82.5]},"padlock":{"top":[60,14],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,27,28.5,30,31,32,33,33.5,34.5,35,35.5,36,36.5,36.5,37,37.5,38,38,38.5,38.5,39,39,39,39.5,39.5,39.5,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,40,39.5,39.5,39.5,39,39,39,38.5,38.5,38,38,37.5,37.5,37,36.5,36.5,36,35.5,35,34.5,33.5,33,32.5,31.5,30.5,29,27.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[25.5,94]},"safe":{"top":[60,30],"HW":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,34.5,36.5,37.5,38.5,39.5,40.5,41,41.5,42,42.5,43,43.5,44,44,44.5,44.5,45,45,45,45.5,45.5,45.5,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,46,45.5,45.5,45.5,45.5,45,45,44.5,44.5,44,44,43.5,43.5,43,42.5,42,41.5,41,40.5,40,39,38,36.5,35,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"foot":[22,97.5]}};
+```
+
+### ../lib/agent-characters/places.ts
+
+```tsx
+// Places in the product and how a character is drawn there (handoff 05 §2.1; D1, D2, D3, D9, D26).
+// Size picks only the renderer: 16–32 px is the flat glyph, 40 px and up the 3D character.
+// Liveness and the contact shadow are set per place; a new place gets them from design.
+
+export type AgentGlyphSize = 16 | 20 | 24 | 32;
+export type AgentAvatarSize = 40 | 48 | 56 | 72 | 120;
+
+interface GlyphPlace {
+  size: AgentGlyphSize;
+  renderer: 'glyph';
+  live: false;
+  shadow: false;
+}
+interface AvatarPlace {
+  size: AgentAvatarSize;
+  renderer: '3d';
+  live: boolean;
+  shadow: boolean;
+}
+
+export const PLACES = {
+  /** in text, chips, history and principal names, beside text-sm or larger (D3) */
+  inline: { size: 20, renderer: 'glyph', live: false, shadow: false },
+  /** in text beside text-xs (D3, D26: 16 px is the floor) */
+  inlineXs: { size: 16, renderer: 'glyph', live: false, shadow: false },
+  /** table rows: «Found by», «Agent», run rows */
+  tableRow: { size: 20, renderer: 'glyph', live: false, shadow: false },
+  /** Overview and Agent team rows of active agents, with the idle repertoire and the look-around (D2) */
+  overviewRow: { size: 40, renderer: '3d', live: true, shadow: false },
+  /** Overview: a Not set up or «Soon» row, static */
+  overviewSetup: { size: 40, renderer: '3d', live: false, shadow: false },
+  /** Approval policy full-screen header, toasts, run headers */
+  header: { size: 48, renderer: '3d', live: false, shadow: false },
+  /** a row beside people's avatars */
+  peopleRow: { size: 56, renderer: '3d', live: false, shadow: false },
+  /** Agent team card */
+  teamCard: { size: 72, renderer: '3d', live: true, shadow: false },
+  /** Agent drawer header */
+  drawerHeader: { size: 72, renderer: '3d', live: true, shadow: true },
+  /** Wally's empty chat (D9) */
+  emptyChat: { size: 120, renderer: '3d', live: true, shadow: true },
+} as const satisfies Record<string, GlyphPlace | AvatarPlace>;
+
+export type AgentPlace = keyof typeof PLACES;
+
+export const rendererFor = (size: number): 'glyph' | '3d' => (size <= 32 ? 'glyph' : '3d');
+```
+
+### AgentAvatar/stories/FrameMeter.tsx
+
+```tsx
+import { type FC, useEffect, useState } from 'react';
+import { subscribeFrames } from './subscribeFrames';
+
+/** Story-only: engine frames per second and JavaScript per frame, refreshed every second. */
+export const FrameMeter: FC = () => {
+  const [meter, setMeter] = useState({ fps: 0, js: 0, max: 0 });
+  useEffect(() => {
+    const acc = { n: 0, sum: 0, max: 0 };
+    const stop = subscribeFrames(js => {
+      acc.n++;
+      acc.sum += js;
+      acc.max = Math.max(acc.max, js);
+    });
+    const id = setInterval(() => {
+      setMeter({ fps: acc.n, js: acc.n ? acc.sum / acc.n : 0, max: acc.max });
+      acc.n = 0;
+      acc.sum = 0;
+      acc.max = 0;
+    }, 1000);
+    return () => {
+      clearInterval(id);
+      stop();
+    };
+  }, []);
+  return (
+    <span
+      className='sb-annotation'
+      data-testid='agent-avatar-meter'
+      data-fps={meter.fps}
+      data-js={meter.js.toFixed(3)}
+      data-max={meter.max.toFixed(3)}
+    >
+      {`${meter.fps} fps · ${meter.js.toFixed(2)} ms JS per frame (max ${meter.max.toFixed(2)})`}
+    </span>
+  );
+};
+```
+
+### AgentAvatar/stories/subscribeFrames.ts
+
+```tsx
+// Story-only: the engine's frame meter for ManyOnScreen (excluded from the build). It reads the runtime's dev timing
+// hook, which is not public API, through one dispatcher so meters can mount and unmount in any order.
+import { getRuntime } from '../../../lib/agent-characters/runtime';
+
+const meters = new Set<(jsMs: number) => void>();
+const dispatch = (jsMs: number) => {
+  for (const m of meters) m(jsMs);
+};
+
+/** Calls `fn` with the loop's JavaScript time on every engine frame; returns how to stop. */
+export function subscribeFrames(fn: (jsMs: number) => void) {
+  const rt = getRuntime();
+  meters.add(fn);
+  rt.onFrame = dispatch;
+  return () => {
+    meters.delete(fn);
+    if (!meters.size && rt.onFrame === dispatch) rt.onFrame = undefined;
+  };
+}
+```
+
+### ../lib/agent-characters/runtime.ts
+
+```tsx
+// The document runtime (07 §6.5, D7): the reference page's page-level state — the frame loop and `LIVE`, the
+// behaviour budget `ACT`, the inviter slot `INV`, the rect epoch, the IntersectionObserver, the
+// bake queue and caches, the id counter — gathered in one object per document. It sits on
+// `globalThis[Symbol.for('wallarm.agent-characters')]`, so every bundled copy of the design system on the page
+// (a Module Federation remote inside the host) joins the same loop, budget and caches. It holds DOM nodes and data,
+// never React objects. `frame()` is the page's `frame` (reference lines 2003–2007), line for line. No cursor follow
+// (D10) and so no pointer tracking; listeners and the observer exist only while a character is live.
+import type { Baked, BakeRunner } from './bake';
+import { createQueue, Lru } from './queue';
+
+/** Bumped only when the contract below changes. */
+export const PROTOCOL = 1;
+export const RUNTIME_KEY = Symbol.for('wallarm.agent-characters');
+
+/** What the runtime and other characters read from a live character (the page reads these off `LIVE` members). */
+export interface LiveChar {
+  svg: Element;
+  visible: boolean;
+  rectDirty: boolean;
+  st: string;
+  clips: readonly { act?: number; inv?: number; perk?: number; kind?: string; rel?: number }[];
+  tick(now: number, dt: number, beat: boolean): void;
+}
+
+export interface Runtime {
+  protocol: number;
+  /** the page's LIVE */
+  live: Set<LiveChar>;
+  /** at most `cap` idle behaviours at once on the document, starts at least 700 ms apart */
+  act: { last: number; cap: number };
+  /** one inviter per document, at least 6 s between invites */
+  inv: { last: number; owner: LiveChar | null };
+  rectEpoch: number;
+  /** reduced: the system setting (followed live while subscribed); enabled: the off switch (P7) */
+  motion: { reduced: boolean; enabled: boolean };
+  queue: ReturnType<typeof createQueue>;
+  caches: {
+    /** height fields per outline */
+    hc: Lru<Float32Array>;
+    /** baked layers; an entry a mounted <image> still shows is never evicted */
+    bc: Lru<Baked>;
+    retain: Map<string, number>;
+    inflight: Map<string, Promise<Baked>>;
+    /** region() per outline, and its measuring path */
+    reg: Map<string, [number, number, number]>;
+    measure: SVGPathElement | null;
+  };
+  /** the bake worker runner, created on first use */
+  worker: BakeRunner | null;
+  /** Dev and test timing hook (03 §10.5): the loop's JavaScript per frame, in ms. One slot, not a public API:
+   *  only measurement code (tests, the Storybook frame meter) sets it. */
+  onFrame?: (jsMs: number) => void;
+  motionOn(): boolean;
+  setMotionEnabled(on: boolean): void;
+  /** called on any change of `motion` */
+  subscribe(fn: () => void): () => void;
+  register(ch: LiveChar): void;
+  unregister(ch: LiveChar): void;
+  kick(): void;
+  frame(t: number): void;
+  nextId(): string;
+}
+
+function createRuntime(): Runtime {
+  const hasDom = typeof document !== 'undefined';
+  const RM =
+    hasDom && typeof window.matchMedia === 'function'
+      ? window.matchMedia('(prefers-reduced-motion: reduce)')
+      : null;
+  const subs = new Set<() => void>();
+  const notify = () => {
+    for (const fn of [...subs]) fn();
+  };
+  let uid = 0;
+  let lastT = 0;
+  let lastBeat = 0;
+  let looping = false;
+  let raf = 0;
+  const retain = new Map<string, number>();
+  const byNode = new WeakMap<Element, LiveChar>();
+  const stop = () => {
+    looping = false;
+    lastT = 0;
+    if (raf && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(raf);
+    raf = 0;
+  };
+
+  // Document listeners and the IntersectionObserver exist only while a character is live (07 §6.4).
+  let io: IntersectionObserver | null = null;
+  const bump = () => {
+    rt.rectEpoch++;
+  };
+  const onVisibility = () => {
+    lastT = 0;
+    lastBeat = 0;
+    if (!document.hidden) rt.kick();
+  };
+  // capture: a scroll inside a container (a list, a drawer) moves the characters too
+  const scrollOpts: AddEventListenerOptions = { capture: true, passive: true };
+  const attach = () => {
+    if (!hasDom) return;
+    if (typeof IntersectionObserver !== 'undefined')
+      io = new IntersectionObserver(
+        es => {
+          for (const e of es) {
+            const c = byNode.get(e.target);
+            if (c) {
+              c.visible = e.isIntersecting;
+              c.rectDirty = true;
+              if (e.isIntersecting) rt.kick();
+            }
+          }
+        },
+        { rootMargin: '100px' },
+      );
+    window.addEventListener('scroll', bump, scrollOpts);
+    window.addEventListener('resize', bump, { passive: true });
+    document.addEventListener('visibilitychange', onVisibility);
+  };
+  const detach = () => {
+    stop();
+    if (!hasDom) return;
+    io?.disconnect();
+    io = null;
+    window.removeEventListener('scroll', bump, scrollOpts);
+    window.removeEventListener('resize', bump);
+    document.removeEventListener('visibilitychange', onVisibility);
+  };
+  const drop = (ch: LiveChar) => {
+    rt.live.delete(ch);
+    io?.unobserve(ch.svg);
+    if (rt.inv.owner === ch) rt.inv.owner = null;
+    if (!rt.live.size) detach();
+  };
+  // The system setting is followed only while someone subscribes; otherwise it is read when asked.
+  const onReduced = (e: MediaQueryListEvent) => {
+    rt.motion.reduced = e.matches;
+    if (rt.motionOn()) rt.kick();
+    else stop();
+    notify();
+  };
+
+  const rt: Runtime = {
+    protocol: PROTOCOL,
+    live: new Set(),
+    act: { last: 0, cap: 2 },
+    inv: { last: -1e9, owner: null },
+    rectEpoch: 0,
+    motion: { reduced: !!RM?.matches, enabled: true },
+    queue: createQueue(),
+    caches: {
+      hc: new Lru<Float32Array>(64),
+      bc: new Lru<Baked>(
+        256,
+        b => URL.revokeObjectURL(b.url),
+        k => retain.has(k),
+      ),
+      retain,
+      inflight: new Map(),
+      reg: new Map(),
+      measure: null,
+    },
+    worker: null,
+    motionOn: () => {
+      if (!subs.size && RM) rt.motion.reduced = RM.matches;
+      return rt.motion.enabled && !rt.motion.reduced;
+    },
+    setMotionEnabled(on) {
+      if (rt.motion.enabled === on) return;
+      rt.motion.enabled = on;
+      if (on) rt.kick();
+      else stop();
+      notify();
+    },
+    subscribe(fn) {
+      if (!subs.size && RM) {
+        rt.motion.reduced = RM.matches;
+        RM.addEventListener?.('change', onReduced);
+      }
+      subs.add(fn);
+      return () => {
+        if (subs.delete(fn) && !subs.size) RM?.removeEventListener?.('change', onReduced);
+      };
+    },
+    register(ch) {
+      if (rt.live.has(ch)) return;
+      if (!rt.live.size) attach();
+      rt.live.add(ch);
+      byNode.set(ch.svg, ch);
+      io?.observe(ch.svg);
+      rt.kick();
+    },
+    unregister(ch) {
+      if (rt.live.has(ch)) drop(ch);
+      else if (rt.inv.owner === ch) rt.inv.owner = null;
+    },
+    /** the loop runs only while a live character is in view */
+    kick() {
+      if (
+        !looping &&
+        rt.motionOn() &&
+        rt.live.size &&
+        typeof requestAnimationFrame === 'function'
+      ) {
+        looping = true;
+        lastT = 0;
+        raf = requestAnimationFrame(rt.frame);
+      }
+    },
+    frame(t) {
+      raf = 0;
+      if (!rt.motionOn()) return stop();
+      const t0 = rt.onFrame ? performance.now() : 0;
+      const dt = Math.min(0.05, lastT ? (t - lastT) / 1000 : 0.016);
+      lastT = t;
+      const beat = t - lastBeat >= 40;
+      if (beat) lastBeat = t; // one shared ~20–25 Hz beat, whatever the refresh rate
+      let any = false;
+      for (const c of rt.live) {
+        if (!c.svg.isConnected) {
+          drop(c);
+          continue;
+        }
+        if (c.visible) {
+          any = true;
+          if (!document.hidden) c.tick(t, dt, beat);
+        }
+      }
+      rt.onFrame?.(performance.now() - t0);
+      if (any) raf = requestAnimationFrame(rt.frame);
+      else stop();
+    },
+    nextId: () => `k${(++uid).toString(36)}`,
+  };
+  return rt;
+}
+
+/** The document's runtime: the first copy to ask creates it, later copies join it. */
+export function getRuntime(): Runtime {
+  const g = globalThis as { [RUNTIME_KEY]?: Runtime };
+  // ponytail: protocol 1 only. A bump must keep one runtime per document: the newer copy adapts the older
+  // registrations instead of starting a second loop (07 §6.5).
+  g[RUNTIME_KEY] ??= createRuntime();
+  return g[RUNTIME_KEY];
+}
+```
+
+### ../lib/agent-characters/queue.ts
+
+```tsx
+// The page's bake queue (enqueue/pump): jobs run in 14 ms slices, 16 ms apart, so a cold view never blocks a frame
+// for long. Jobs whose node left the document are dropped.
+
+export interface Job {
+  alive: () => boolean;
+  run: () => void;
+}
+
+export function createQueue() {
+  const queue: Job[] = [];
+  let busy = false;
+  const pump = () => {
+    const t0 = performance.now();
+    while (queue.length && performance.now() - t0 < 14) {
+      const j = queue.shift() as Job;
+      if (!j.alive()) continue;
+      try {
+        j.run();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    if (queue.length) setTimeout(pump, 16);
+    else busy = false;
+  };
+  return {
+    enqueue(job: Job, front = false) {
+      if (front) queue.unshift(job);
+      else queue.push(job);
+      if (!busy) {
+        busy = true;
+        setTimeout(pump, 0);
+      }
+    },
+  };
+}
+
+/** A Map in insertion order, refreshed on read: the first key is the least recently used. */
+export class Lru<V> {
+  private readonly map = new Map<string, V>();
+  constructor(
+    private readonly cap: number,
+    private readonly onEvict: (v: V) => void = () => undefined,
+    /** a pinned entry is never evicted (a mounted character still shows it) */
+    private readonly isPinned: (k: string) => boolean = () => false,
+  ) {}
+  has(k: string) {
+    return this.map.has(k);
+  }
+  get(k: string) {
+    const v = this.map.get(k);
+    if (v !== undefined) {
+      this.map.delete(k);
+      this.map.set(k, v);
+    }
+    return v;
+  }
+  set(k: string, v: V) {
+    const prev = this.map.get(k);
+    if (prev !== undefined && prev !== v) this.onEvict(prev); // a replaced value is gone too
+    this.map.delete(k);
+    this.map.set(k, v);
+    if (this.map.size <= this.cap) return;
+    // oldest first, skipping pinned entries; past the cap only while everything left is pinned
+    for (const [key, value] of [...this.map]) {
+      if (this.map.size <= this.cap) break;
+      if (key === k || this.isPinned(key)) continue; // never the entry just set
+      this.map.delete(key);
+      this.onEvict(value);
+    }
+  }
+}
+
+/** Runs a runner's jobs through the queue, so main-thread bakes come in 14 ms slices instead of one long task. */
+export const queuedRunner =
+  <J, R>(run: (job: J) => Promise<R>, q: ReturnType<typeof createQueue>) =>
+  (job: J): Promise<R> =>
+    new Promise((ok, fail) =>
+      q.enqueue({
+        alive: () => true,
+        run: () => {
+          run(job).then(ok, fail); // the synchronous part (mask, solve, shade) runs inside the slice
+        },
+      }),
+    );
+```