@gtanczyk/diorama 0.0.0-stage → 0.1.0

package/app/studio/nav.ts

@@ -0,0 +1,14 @@
+// Where the page is, and whether it follows the agent: shared by the atelier's rail, the bell and the world.
+import { signal } from '@preact/signals';
+
+export const route = signal(location.pathname);
+export const followAgent = signal(true);
+/** The world the agent moved the view away from, so the person can go back. */
+export const movedFrom = signal<string | null>(null);
+
+export function go(path: string) {
+  if (path === route.value) return;
+  history.pushState(path === '/setup' ? { setupFrom: route.value } : null, '', path);
+  route.value = path;
+}
+addEventListener('popstate', () => (route.value = location.pathname));

package/app/studio/place.tsx

@@ -0,0 +1,264 @@
+// The place up close: the painting (or its masks or walk review), and tools to fix what the pipeline got
+// wrong. Every tool is an action that writes corrections.json and rebuilds the place, so a fix survives
+// the next build and the agent can do the same with words.
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { call, fileUrl } from './api.ts';
+import { named } from './build.tsx';
+
+const W = 1200;
+const H = 896;
+const KINDS = ['standing', 'wall', 'on-top', 'walk-on', 'flat'] as const;
+
+type Pic = { file: string; v: number | null } | null;
+type ThingRow = { key: string; kind: string; phrase: string; source: string; coarse: boolean; brushed?: boolean; stand: [number, number] | null; removable?: boolean; why?: string };
+type FloorRow = { key: string; source: string; coarse: boolean; brushed?: boolean };
+type Stroke = { mode: 'add' | 'erase'; radius: number; points: [number, number][] };
+type Fixes = {
+  things: Record<string, { phrase?: string; box?: number[]; kind?: string; strokes: Stroke[]; stand?: [number, number]; removed?: boolean }>;
+  added?: Record<string, { looks: string }>;
+  floors: Record<string, { add: string[]; remove: string[]; strokes: Stroke[] }>;
+  repaint: Array<{ region: number[]; fix: string }>;
+};
+export type PlaceStatus = {
+  playable: boolean | null;
+  errors: Array<{ code: string; key?: string; detail: string; play?: { look: string; tools: string[]; last?: string } }>;
+  flags: Array<{ code: string; key?: string; detail: string }>;
+  place: string;
+  pictures: { painting: Pic; masks: Pic; walk: Pic };
+  things: ThingRow[];
+  floors: FloorRow[];
+  flagged: string[];
+  start: [number, number] | null;
+  corrections: Fixes;
+  npcs: { key: string; box: Rect; at: [number, number] }[];
+};
+type Tool = 'look' | 'note' | 'box' | 'repaint' | 'brush' | 'stand' | 'move';
+type Rect = [number, number, number, number];
+
+const TOOLS: Array<[Tool, string, string]> = [
+  ['look', 'Look', 'Just look, clicks change nothing'],
+  ['note', 'Note', 'Click a spot and say what is wrong; the note waits for you or the agent. Free'],
+  ['box', 'Box', 'Drag a box around where a thing really is, so SAM finds it there. 1 SAM call'],
+  ['brush', 'Brush', 'Paint onto or rub out of a thing\'s or a floor\'s mask. Free, saved answers are reused'],
+  ['stand', 'Stand', 'Click where the hero should stand to use a thing. Free'],
+  ['move', 'Move NPC', 'Click where an NPC should stand (its feet); it is sized for the depth there. Free, no repaint'],
+  ['repaint', 'Repaint', 'Drag over a region and say how Muse should paint it. 1 Muse Image edit'],
+];
+
+const LAYER_TIPS: Record<string, string> = {
+  painting: 'The painting Muse made',
+  masks: 'What SAM cut out: each thing and floor in its own colour',
+  walk: 'Where the hero can walk, and how big they are at each spot',
+};
+const KIND_TIPS: Record<string, string> = {
+  standing: 'Standing: people walk around and behind it. Changing the kind is free',
+  wall: 'Wall: part of the backdrop. Changing the kind is free',
+  'on-top': 'On top of something else. Changing the kind is free',
+  'walk-on': 'Walk-on: people walk over it. Changing the kind is free',
+  flat: 'Flat: lies on the floor, never in front of anyone. Changing the kind is free',
+};
+
+const norm = ([a, b, c, d]: Rect): Rect => [Math.round(Math.min(a, c)), Math.round(Math.min(b, d)), Math.round(Math.max(a, c)), Math.round(Math.max(b, d))];
+
+export function PlaceEditor({ slug, place, version, onError, focus }: { slug: string; place: string; version: number; onError: (m: string) => void; focus?: string }) {
+  const [st, setSt] = useState<PlaceStatus | null>(null);
+  // Opened on one thing (its Details on the stage): its mask shows and its row is in view.
+  const [layer, setLayer] = useState<'painting' | 'masks' | 'walk'>(focus ? 'masks' : 'painting');
+  const [tool, setTool] = useState<Tool>('look');
+  const [target, setTarget] = useState('');
+  const [mode, setMode] = useState<'add' | 'erase'>('add');
+  const [radius, setRadius] = useState(14);
+  const [strokes, setStrokes] = useState<Stroke[]>([]);
+  const [drag, setDrag] = useState<Rect | null>(null);
+  const [point, setPoint] = useState<[number, number] | null>(null);
+  const [text, setText] = useState('');
+  const [busy, setBusy] = useState(false);
+  const svg = useRef<SVGSVGElement>(null);
+  const down = useRef(false);
+
+  const load = () => call<PlaceStatus>('place_status', { slug, place }).then(setSt).catch((e) => onError(e.message));
+  useEffect(() => void load(), [slug, place, version]);
+  useEffect(() => {
+    setDrag(null);
+    setPoint(null);
+    setStrokes([]);
+    setText('');
+  }, [tool, place]);
+
+  const things = st?.things ?? [];
+  useEffect(() => {
+    if (focus && st) document.getElementById(`thing-${focus}`)?.scrollIntoView({ block: 'center' });
+  }, [focus, !!st]);
+  const floors = st?.floors ?? [];
+  const isFloor = floors.some((f) => f.key === target);
+  const npcs = st?.npcs ?? [];
+  const targets = tool === 'brush' ? [...things.map((t) => t.key), ...floors.map((f) => f.key)] : tool === 'move' ? npcs.map((n) => n.key) : things.map((t) => t.key);
+  useEffect(() => {
+    if (targets.length && !targets.includes(target)) setTarget(targets[0]);
+  }, [tool, st]);
+
+  const at = (e: PointerEvent): [number, number] => {
+    const r = svg.current!.getBoundingClientRect();
+    return [Math.round(((e.clientX - r.left) / r.width) * W), Math.round(((e.clientY - r.top) / r.height) * H)];
+  };
+  const onDown = (e: PointerEvent) => {
+    if (tool === 'look') return;
+    (e.currentTarget as Element).setPointerCapture(e.pointerId);
+    const p = at(e);
+    down.current = true;
+    if (tool === 'box' || tool === 'repaint') setDrag([p[0], p[1], p[0], p[1]]);
+    if (tool === 'brush') setStrokes((s) => [...s, { mode, radius, points: [p] }]);
+    if (tool === 'note' || tool === 'stand' || tool === 'move') setPoint(p);
+  };
+  const onMove = (e: PointerEvent) => {
+    if (!down.current) return;
+    const p = at(e);
+    if (tool === 'box' || tool === 'repaint') setDrag((d) => d && [d[0], d[1], p[0], p[1]]);
+    if (tool === 'brush') setStrokes((s) => s.map((k, i) => (i === s.length - 1 ? { ...k, points: [...k.points, p] } : k)));
+  };
+  const onUp = () => (down.current = false);
+
+  const act = async (name: string, input: object, after?: () => void) => {
+    setBusy(true);
+    try {
+      await call(name, { slug, place, ...input });
+      after?.();
+      setDrag(null);
+      setPoint(null);
+      setStrokes([]);
+      setText('');
+      void load();
+    } catch (e) {
+      onError((e as Error).message);
+    }
+    setBusy(false);
+  };
+
+  const pic = st?.pictures[layer] ?? st?.pictures.painting;
+  const box = drag && norm(drag);
+  const big = box && box[2] - box[0] > 8 && box[3] - box[1] > 8;
+  const fixes = st?.corrections;
+  const fixList = fixes ? [
+    ...Object.entries(fixes.added ?? {}).map(([k, a]) => ({ key: k, what: `added: "${a.looks}"` })),
+    ...Object.entries(fixes.things).map(([k, t]) => ({ key: k, what: [t.removed && 'taken off the list', t.phrase && `"${t.phrase}"`, t.kind, t.box && 'box', t.strokes.length && `${t.strokes.length} strokes`, t.stand && 'stand'].filter(Boolean).join(', ') })),
+    ...Object.entries(fixes.floors).map(([k, f]) => ({ key: k, what: [f.add.length && `+${f.add.length} cells`, f.remove.length && `-${f.remove.length} cells`, f.strokes.length && `${f.strokes.length} strokes`].filter(Boolean).join(', ') })),
+  ] : [];
+
+  return (
+    <section class="editor">
+      <section class="checks" aria-label="Place checks">
+        {st && <p class="detail">{st.playable === true ? 'Verified playable' : st.playable === false ? 'Needs a fix' : 'Not verified yet'}</p>}
+        {(st?.errors ?? []).map((f) => <div><p class="error"><code>{f.code}</code>{f.key ? ` ${f.key}` : ''}: {f.detail}</p>{f.play && <details><summary>How to fix it</summary><p>{f.play.look}</p><p>{f.play.tools.join(' · ')}</p>{f.play.last && <p>Last resort: {f.play.last}</p>}</details>}</div>)}
+        {(st?.flags ?? []).map((f) => <p class="flag"><code>{f.code}</code>{f.key ? ` ${f.key}` : ''}: {f.detail}</p>)}
+      </section>
+      <div class="row">
+        <h2>{place}</h2>
+        <span class="grow" />
+        <div class="seg" role="group" aria-label="Picture">
+          {(['painting', 'masks', 'walk'] as const).map((l) => <button type="button" title={named(LAYER_TIPS[l])} class={layer === l ? 'on' : ''} disabled={!st?.pictures[l]} onClick={() => setLayer(l)}>{l}</button>)}
+        </div>
+      </div>
+      <div class="seg tools" role="group" aria-label="Tool">
+        {TOOLS.map(([t, label, hint]) => <button type="button" title={named(hint)} class={tool === t ? 'on' : ''} onClick={() => setTool(t)}>{label}</button>)}
+      </div>
+      {tool !== 'look' && <p class="detail">{named(TOOLS.find(([t]) => t === tool)![2])}.</p>}
+      {(tool === 'box' || tool === 'brush' || tool === 'stand' || tool === 'move') && (
+        <div class="row">
+          <label title={tool === 'brush' ? 'The thing or floor whose mask the brush paints' : tool === 'move' ? 'The NPC to move' : 'The thing this tool fixes'}>{tool === 'brush' ? 'Mask of' : tool === 'move' ? 'NPC' : 'Thing'} <select value={target} onChange={(e) => setTarget(e.currentTarget.value)}>
+            {tool === 'brush' && floors.length > 0 && <optgroup label="Things">{things.map((t) => <option value={t.key}>{t.key}</option>)}</optgroup>}
+            {tool === 'brush' && floors.length > 0 ? <optgroup label="Floors">{floors.map((f) => <option value={f.key}>{f.key}</option>)}</optgroup> : targets.map((k) => <option value={k}>{k}</option>)}
+          </select></label>
+          {tool === 'brush' && <>
+            <div class="seg" role="group" aria-label="Brush"><button type="button" class={mode === 'add' ? 'on' : ''} title="Strokes add to the mask" onClick={() => setMode('add')}>Add</button><button type="button" class={mode === 'erase' ? 'on' : ''} title="Strokes rub out of the mask" onClick={() => setMode('erase')}>Erase</button></div>
+            <label title="How wide the brush is">Size <input type="range" min={3} max={60} value={radius} onInput={(e) => setRadius(Number(e.currentTarget.value))} /></label>
+          </>}
+        </div>
+      )}
+      <div class={`stage tool-${tool}`}>
+        {pic ? <img src={fileUrl(slug, pic.file, pic.v)} alt={`${place}, ${layer}`} draggable={false} /> : <div class="noimg">no picture yet</div>}
+        <svg ref={svg} viewBox={`0 0 ${W} ${H}`} onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp}>
+          {things.map((t) => t.stand && <g><circle cx={t.stand[0]} cy={t.stand[1]} r={7} class="stand" /></g>)}
+          {tool === 'move' && npcs.map((n) => <rect x={n.box[0]} y={n.box[1]} width={n.box[2] - n.box[0]} height={n.box[3] - n.box[1]} class={n.key === target ? 'sel npc on' : 'sel npc'} />)}
+          {box && <rect x={box[0]} y={box[1]} width={box[2] - box[0]} height={box[3] - box[1]} class={tool === 'repaint' ? 'sel repaint' : 'sel'} />}
+          {strokes.map((s) => <polyline points={s.points.map((p) => p.join(',')).join(' ')} class={`stroke ${s.mode}`} stroke-width={s.radius * 2} />)}
+          {point && <circle cx={point[0]} cy={point[1]} r={10} class="pin" />}
+        </svg>
+      </div>
+      {tool === 'box' && big && <div class="row"><span class="detail">{target} is in [{box!.join(', ')}]</span><span class="grow" /><button type="button" class="primary small" disabled={busy || !target} title="SAM looks for the thing inside this box only, then the place is checked again. 1 SAM call" onClick={() => act('mask_fix', { thing: target, box })}>Find it here</button></div>}
+      {tool === 'stand' && point && <div class="row"><span class="detail">Stand at {point.join(', ')} to use {target}</span><span class="grow" /><button type="button" class="primary small" disabled={busy || !target} title="The hero walks here to use it. Kept across rebuilds. Free" onClick={() => act('stand_set', { thing: target, at: point })}>Set stand spot</button></div>}
+      {tool === 'move' && npcs.length === 0 && <p class="detail">No one stands in this place.</p>}
+      {tool === 'move' && point && <div class="row"><span class="detail">{target} stands with feet at {point.join(', ')}</span><span class="grow" /><button type="button" class="primary small" disabled={busy || !target} title="The NPC stands here, sized for the depth. Kept across rebuilds. Free, no repaint" onClick={() => act('npc_move', { npc: target, at: point })}>Move here</button></div>}
+      {tool === 'brush' && strokes.length > 0 && <div class="row"><span class="detail">{strokes.length} stroke{strokes.length > 1 ? 's' : ''} on {target}</span><span class="grow" /><button type="button" class="ghost small" title="Take back the last stroke" onClick={() => setStrokes((s) => s.slice(0, -1))}>Undo stroke</button><button type="button" class="primary small" disabled={busy || !target} title="Keep the strokes and rebuild this place from its masks. Kept across rebuilds. Free, saved answers are reused" onClick={() => act('mask_brush', { layer: isFloor ? 'floor' : 'thing', key: target, strokes })}>Apply and rebuild</button></div>}
+      {((tool === 'note' && point) || (tool === 'repaint' && big)) && (
+        <form class="say" onSubmit={(e) => { e.preventDefault(); if (tool === 'note') void act('feedback_add', { point, text: text.trim() }); else void act('repaint_region', { region: box, fix: text.trim() }); }}>
+          <textarea rows={2} placeholder={tool === 'note' ? 'What is wrong here?' : named('How should Muse paint this region?')} value={text} onInput={(e) => setText(e.currentTarget.value)} />
+          <div class="row"><span class="grow" /><button type="submit" class="primary small" disabled={busy || text.trim().length < 3} title={tool === 'note' ? 'Keep the note on this spot, for you or the agent. Free' : named('Muse repaints only this region your way, then the place is measured again. 1 Muse Image edit')}>{tool === 'note' ? 'Leave note' : named('Repaint (1 Muse edit)')}</button></div>
+        </form>
+      )}
+      {things.length > 0 && (
+        <table class="things">
+          <thead><tr><th>Thing</th><th>Kind</th><th>SAM looks for</th><th>Mask</th><th /></tr></thead>
+          <tbody>
+            {things.map((t) => <ThingLine key={t.key} t={t} focused={t.key === focus} busy={busy} fix={(input) => act('mask_fix', { thing: t.key, ...input })} remove={(paintOut) => act('thing_remove', { thing: t.key, paintOut })} />)}
+            <AddThing busy={busy} add={(looks, kind) => act('thing_add', { looks, ...(kind && { kind }) })} />
+          </tbody>
+        </table>
+      )}
+      {floors.some((f) => f.coarse) && <p class="flag">Coarse floors: {floors.filter((f) => f.coarse).map((f) => f.key).join(', ')}. Brush them, or ask the agent to fix their cells.</p>}
+      {(fixList.length > 0 || (fixes?.repaint.length ?? 0) > 0) && (
+        <div class="fixes">
+          <div class="row"><strong>Your fixes</strong><span class="detail">kept across rebuilds</span><span class="grow" /><button type="button" class="ghost small" disabled={busy} title={named((fixes?.repaint.length ?? 0) > 0 ? 'Take back every fix of this place. It is painted again: 1 Muse Image call' : 'Take back every fix of this place and rebuild it from its masks. Free')} onClick={() => act('corrections_clear', {})}>Clear all</button></div>
+          <ul>
+            {fixList.map((f) => <li><code>{f.key}</code> {f.what}<button type="button" class="ghost small" disabled={busy} title={`Take back the fixes of ${f.key} and rebuild this place from its masks. Free`} onClick={() => act('corrections_clear', { key: f.key })}>Clear</button></li>)}
+            {fixes!.repaint.map((r) => <li>repaint [{r.region.join(', ')}]: {r.fix}</li>)}
+          </ul>
+        </div>
+      )}
+    </section>
+  );
+}
+
+/** The last row of the things: something painted that should be a thing of its own. */
+function AddThing({ busy, add }: { busy: boolean; add: (looks: string, kind: string) => void }) {
+  const [looks, setLooks] = useState('');
+  const [kind, setKind] = useState('');
+  const ok = looks.trim().length >= 3;
+  return (
+    <tr class="add-thing">
+      <td colSpan={2}><select value={kind} disabled={busy} title="How it meets the floor; Spark decides when left empty" onChange={(e) => setKind(e.currentTarget.value)}><option value="">kind: Spark decides</option>{KINDS.map((k) => <option value={k}>{k}</option>)}</select></td>
+      <td><form class="row" onSubmit={(e) => (e.preventDefault(), ok && (add(looks.trim(), kind), setLooks('')))}><input value={looks} placeholder="Add a thing that is painted here, e.g. the red bench" onInput={(e) => setLooks(e.currentTarget.value)} />{ok && <button type="submit" class="primary small" disabled={busy} title="It becomes a thing of its own: Spark finds it, SAM cuts it out, the place is checked again. 1 Spark and 1 SAM call">Add</button>}</form></td>
+      <td colSpan={2} />
+    </tr>
+  );
+}
+
+function ThingLine({ t, focused, busy, fix, remove }: { t: ThingRow; focused?: boolean; busy: boolean; fix: (input: object) => void; remove: (paintOut: boolean) => void }) {
+  const [asking, setAsking] = useState(false);
+  const [phrase, setPhrase] = useState(t.phrase);
+  useEffect(() => setPhrase(t.phrase), [t.phrase]);
+  return (
+    <>
+    <tr id={`thing-${t.key}`} class={focused ? 'focus' : undefined}>
+      <td><code>{t.key}</code></td>
+      <td><select value={t.kind} disabled={busy} title={KIND_TIPS[t.kind] ?? 'What kind of thing it is'} onChange={(e) => fix({ kind: e.currentTarget.value })}>{KINDS.map((k) => <option value={k}>{k}</option>)}</select></td>
+      <td><form class="row" onSubmit={(e) => (e.preventDefault(), phrase.trim() !== t.phrase && fix({ phrase: phrase.trim() }))}><input value={phrase} title="The words SAM searches the painting for. Change them and press Search" onInput={(e) => setPhrase(e.currentTarget.value)} />{phrase.trim() !== t.phrase && phrase.trim().length > 1 && <button type="submit" class="primary small" disabled={busy} title="SAM looks for the thing by these words. 1 SAM call">Search</button>}</form></td>
+      <td><span class={`badge ${t.coarse ? 'fail' : 'ok'}`} title={t.coarse ? 'SAM did not find it: the mask is only a box' : undefined}>{t.source}{t.brushed ? ' + brush' : ''}</span></td>
+      <td class="remove">
+        <button type="button" class={`ghost small${asking ? ' on' : ''}`} disabled={busy || t.removable === false} title={t.removable === false ? `Can't remove: ${t.why}` : 'Take it off the list'} aria-label={`Remove ${t.key}`} onClick={() => setAsking(!asking)}>×</button>
+      </td>
+    </tr>
+    {asking && (
+      <tr class="confirm">
+        <td colSpan={5}>
+          <span class="row">
+            <span class="detail">Take <code>{t.key}</code> off the list:</span>
+            <button type="button" class="ghost small" disabled={busy} title="It stays in the picture, but is no longer a thing of its own. Free" onClick={() => (setAsking(false), remove(false))}>Keep it painted</button>
+            <button type="button" class="ghost small danger" disabled={busy} title={named('Muse paints it out of the picture, then the place is checked again. 1 Muse Image edit')} onClick={() => (setAsking(false), remove(true))}>Paint it out</button>
+            <button type="button" class="ghost small" onClick={() => setAsking(false)}>Cancel</button>
+          </span>
+        </td>
+      </tr>
+    )}
+    </>
+  );
+}

package/app/studio/review-sketch.tsx

@@ -0,0 +1,47 @@
+import { useId } from 'preact/hooks';
+
+/** A small paper theatre while the model works, not a preview of the user's game. */
+export function ReviewSketch({ compact = false }: { compact?: boolean }) {
+  const clip = useId();
+  return <span class={`review-sketch${compact ? ' compact' : ''}`} aria-hidden="true">
+    <svg viewBox="0 0 440 320" fill="none">
+      <defs><clipPath id={clip}><path d="M130 256V131a90 90 0 0 1 180 0v125Z" /></clipPath></defs>
+      <ellipse cx="224" cy="284" rx="139" ry="11" fill="#746448" opacity=".07" />
+      <g class="sketch-leaf sketch-leaf-left">
+        <path d="m57 99 94-17 26 161-94 17Z" fill="#e4d9c5" />
+        <path d="m53 93 94-17 26 161-94 17Z" fill="#fbf7ed" stroke="#d8cbb5" />
+        <path d="m85 207 12-69 21-5 21 63M89 180l39-7m-23-42-3-17m-12 9 23-4" stroke="#716e58" stroke-width="1.5" stroke-linecap="round" class="sketch-ink" pathLength="1" />
+        <circle cx="106" cy="112" r="11" stroke="#716e58" stroke-width="1.5" />
+        <path d="m90 228 48-9m-45 15 28-5" stroke="#d8cbb5" stroke-width="2" stroke-linecap="round" />
+      </g>
+      <g class="sketch-leaf sketch-leaf-right">
+        <path d="m287 96 100 19-28 145-100-19Z" fill="#e4d9c5" />
+        <path d="m291 89 100 19-28 145-100-19Z" fill="#fbf7ed" stroke="#d8cbb5" />
+        <circle cx="345" cy="137" r="17" fill="#d4a659" opacity=".6" />
+        <path d="m290 193 29-29 15 20 15-7 16 30m-69-58 12 3m-25 62 63 12m-66-4 44 9" stroke="#8e9986" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+      <g class="sketch-theatre">
+        <path d="M116 274V131a104 104 0 0 1 208 0v143Z" fill="#dacbb3" opacity=".5" transform="translate(3 5)" />
+        <path d="M116 274V131a104 104 0 0 1 208 0v143Z" fill="#fbf7ed" stroke="#cdbc9f" />
+        <g clip-path={`url(#${clip})`}>
+          <path d="M130 40h180v216H130Z" fill="#dce3df" />
+          <circle class="sketch-sun" cx="258" cy="107" r="24" fill="#c88b39" opacity=".8" />
+          <path d="M114 199q50-61 105-15t105-22v101H114Z" fill="#a7b3a0" />
+          <path d="M114 231q71-66 133-17t80-7v62H114Z" fill="#768778" />
+          <path d="M159 258q90-50 51-67-18-11 7-19" stroke="#efe6cf" stroke-width="15" />
+          <path d="M146 228q46-30 82-12m13 13 49 18" stroke="#526654" opacity=".35" stroke-linecap="round" />
+          <path d="M166 191v-48l20-15 20 15v45m-29 0v-26h13v26m-29-43 25-22 26 22" stroke="#4e584b" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round" class="sketch-ink" pathLength="1" />
+          <path d="m275 222-1-55m-17 25q-8-16 5-23-1-22 15-23 22 2 14 23 15 10 3 25-20 14-37-2Z" stroke="#4e584b" stroke-width="1.6" stroke-linejoin="round" class="sketch-ink sketch-ink-late" pathLength="1" />
+        </g>
+        <path d="M130 256V131a90 90 0 0 1 180 0v125Z" stroke="#cabba3" />
+        <path d="M201 265h38" stroke="#cdbc9f" stroke-linecap="round" />
+      </g>
+      <g class="sketch-pencil" transform="translate(307 238) rotate(32)">
+        <path d="M0-59h7v68H0Z" fill="#bd7b2b" /><path d="M0-59h2v68H0Z" fill="#e1b571" />
+        <path d="m0 9 3.5 13L7 9Z" fill="#dfc8a2" /><path d="m2 17 1.5 5L5 17Z" fill="#484336" />
+        <path d="M0-61q3.5-4 7 0v5H0Z" fill="#7c8370" />
+      </g>
+      <path d="m350 58 1 12m-6-6 12-1m-281 2 2 9m-6-4 10-1" stroke="#c39a5e" stroke-width="1.5" stroke-linecap="round" opacity=".7" />
+    </svg>
+  </span>;
+}

package/app/studio/say-it.tsx

@@ -0,0 +1,49 @@
+// Speaking instead of typing: the browser records, Muse Voice Transcribe (idea_hear) writes it down.
+import { useEffect, useState } from 'preact/hooks';
+import { call } from './api.ts';
+import { base64 } from './camera.tsx';
+import { Icon } from './icons.tsx';
+
+/** The mic: press to speak, press again; what was said joins the text (the idea, or the message to the agent). */
+export function SayIt({ onText, onError, tip = 'Say the idea instead of typing it. Muse Voice Transcribe writes it here: 1 call', small }: { onText: (text: string) => void; onError: (m: string) => void; tip?: string; small?: boolean }) {
+  const [rec, setRec] = useState<MediaRecorder | null>(null);
+  const [hearing, setHearing] = useState(false);
+  const [seconds, setSeconds] = useState(0);
+  useEffect(() => {
+    if (!rec) return;
+    const started = Date.now();
+    const timer = setInterval(() => setSeconds(Math.round((Date.now() - started) / 1000)), 250);
+    return () => clearInterval(timer);
+  }, [rec]);
+  const start = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } });
+      const type = ['audio/webm;codecs=opus', 'audio/mp4', 'audio/webm'].find((t) => MediaRecorder.isTypeSupported(t)) ?? '';
+      const r = new MediaRecorder(stream, type ? { mimeType: type } : {});
+      const chunks: Blob[] = [];
+      r.ondataavailable = (e) => e.data.size && chunks.push(e.data);
+      r.onstop = async () => {
+        stream.getTracks().forEach((t) => t.stop());
+        setHearing(true);
+        try {
+          const said = await call<{ text: string }>('idea_hear', { name: `idea.${r.mimeType.includes('mp4') ? 'm4a' : 'webm'}`, data: await base64(new Blob(chunks, { type: r.mimeType })) });
+          if (said.text) onText(said.text);
+        } catch (e) {
+          onError((e as Error).message);
+        } finally {
+          setHearing(false);
+        }
+      };
+      r.start(1000);
+      setSeconds(0);
+      setRec(r);
+    } catch (e) {
+      onError(`No microphone: ${(e as Error).message}`);
+    }
+  };
+  return (
+    <button type="button" class={`ghost ${small ? 'small' : 'bare'}${rec ? ' rec' : ''}`} disabled={hearing} title={rec ? 'Stop: what you said is written in' : tip} onClick={rec ? () => (rec.stop(), setRec(null)) : start}>
+      {hearing ? 'Hearing…' : rec ? `■ Stop · ${seconds} s` : <><Icon name="mic" /> Say it</>}
+    </button>
+  );
+}

package/app/studio/step-work.tsx

@@ -0,0 +1,134 @@
+// A world-wide build step at work, live: what it works from and what it made so far, card by card. Item icons show
+// where SAM cuts each item from (the painting around it, the mask lit) and the icon once it lands; plates show what
+// goes and the place without it; weather and reactions show each place and what was read for it; sounds list every
+// sound to listen to. The build bar opens it from that step's segment.
+import { useEffect, useState } from 'preact/hooks';
+import { call, fileUrl } from './api.ts';
+import { named } from './build.tsx';
+import { nice } from './world.tsx';
+
+type Pic = { file: string; v: number | null };
+type Shot = { painting: Pic; box?: [number, number, number, number]; mask?: Pic; over?: Pic };
+type WorkCard = { key: string; title: string; place?: string; from: Shot | null; made: Shot | Pic | null; words: string[]; at: number | null };
+type Sound = { id: string; kind: string; prompt: string; state: string; file?: string; seconds?: number; rejected?: string };
+
+/** The steps this view shows; the cast steps have their own (cast-work.tsx). */
+export const WORK_STEPS = ['icons', 'plates', 'weather', 'reactions', 'sound'];
+const WHAT: Record<string, string> = { icons: 'Item icons', plates: 'Change plates', weather: 'Weather', reactions: 'Reactions', sound: 'Sounds' };
+const FROM: Record<string, string> = { icons: 'cut from', plates: 'what changes', weather: 'reads', reactions: 'reads' };
+const MADE: Record<string, string> = { icons: 'icon', plates: 'after', weather: 'weather', reactions: 'reactions' };
+const WAIT: Record<string, string> = {
+  icons: 'Reading the story\'s items…', plates: 'Reading what the hero takes and what changes…', weather: 'Reading the places…', reactions: 'Reading the places…', sound: 'Reading the sound plan…',
+};
+const NONE: Record<string, string> = {
+  icons: 'The story has no items to pick up, so no icons.', plates: 'Nothing is taken or changed in any place, so no plates.',
+  weather: 'No places painted yet.', reactions: 'No places painted yet.', sound: 'No sound plan yet: the sound step writes it.',
+};
+const FRAME = { width: 1200, height: 896 };
+
+const clock = (s: number) => `${Math.floor(Math.max(0, s) / 60)}:${String(Math.round(Math.max(0, s)) % 60).padStart(2, '0')}`;
+
+/** A place's painting cropped to a box, the SAM mask over it (the rest dimmed), or a plate laid over it. */
+function Crop({ slug, shot, alt, title }: { slug: string; shot: Shot; alt: string; title: string }) {
+  const [x0, y0, x1, y1] = shot.box ?? [0, 0, 1, 1];
+  const [bw, bh] = [x1 - x0, y1 - y0];
+  const place = { width: `${100 / bw}%`, left: `${(-x0 / bw) * 100}%`, top: `${(-y0 / bh) * 100}%` };
+  const big = fileUrl(slug, (shot.over ?? shot.painting).file, (shot.over ?? shot.painting).v);
+  return (
+    <div class="sw-crop" style={{ aspectRatio: `${bw * FRAME.width} / ${bh * FRAME.height}` }} data-lightbox={shot.over ? undefined : big} title={title}>
+      <img class={shot.mask ? 'dim' : ''} style={place} src={fileUrl(slug, shot.painting.file, shot.painting.v)} alt={alt} />
+      {shot.over && <img style={place} src={fileUrl(slug, shot.over.file, shot.over.v)} alt="" />}
+      {/* What SAM cut out, lit: the painting again, seen only through its mask. */}
+      {shot.mask && <img class="cut" style={{ ...place, maskImage: `url("${fileUrl(slug, shot.mask.file, shot.mask.v)}")` }} src={fileUrl(slug, shot.painting.file, shot.painting.v)} alt="" />}
+    </div>
+  );
+}
+
+const isShot = (x: Shot | Pic): x is Shot => 'painting' in x;
+
+export function StepWorkStage({ slug, step, running, failed, since, took, version }: {
+  slug: string; step: string; running: boolean; failed?: string; since?: number; took: number; version: number;
+}) {
+  const [cards, setCards] = useState<WorkCard[] | null>(null);
+  const [sounds, setSounds] = useState<Sound[] | null>(null);
+  useEffect(() => {
+    if (step === 'sound') void call<Sound[]>('sound_status', { slug }).then(setSounds).catch(() => setSounds([]));
+    else void call<WorkCard[]>('step_work', { slug, step }).then(setCards).catch(() => setCards([]));
+  }, [slug, step, version]);
+  const [now, setNow] = useState(Date.now());
+  useEffect(() => {
+    if (!running) return;
+    const t = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(t);
+  }, [running]);
+  const elapsed = since ? (now - since) / 1000 : 0;
+  const left = took - elapsed;
+  // While the step runs, a result older than its start is the earlier build's: it is being made again.
+  const fresh = (at: number | null) => !!at && (!running || !since || at >= since);
+  const list = step === 'sound' ? sounds : cards;
+  const doneCount = step === 'sound' ? (sounds ?? []).filter((s) => s.state === 'made').length : (cards ?? []).filter((c) => c.made && fresh(c.at)).length;
+
+  return (
+    <div class="cast-work step-work" data-lightbox-group>
+      <div class="cw-head">
+        <strong>{WHAT[step] ?? step}</strong>
+        <span class="detail">
+          {running ? (since ? `${clock(elapsed)} so far · ${left > 5 ? `about ${clock(left)} left` : 'a little longer than usual'}` : 'starting…') : failed ? `stopped: ${failed}` : 'done'}
+          {list && list.length > 0 ? ` · ${doneCount} of ${list.length} made` : ''}
+        </span>
+      </div>
+      {list === null && <div class="cw-wait"><span>{WAIT[step] ?? 'Reading…'}</span></div>}
+      {list !== null && list.length === 0 && <div class="cw-wait"><span>{NONE[step] ?? 'Nothing here.'}</span></div>}
+      {step === 'sound' && sounds && sounds.length > 0 && (
+        <ul class="sw-sounds">
+          {sounds.map((s) => (
+            <li class={s.state === 'made' ? 'ok' : s.state === 'rejected' ? 'fail' : ''}>
+              <span class="kind">{s.kind}</span>
+              <span class="what" title={s.prompt}><strong>{nice(s.id.replace(/^[a-z]+:/, ''))}</strong> <span class="detail">{s.prompt}</span></span>
+              {s.state === 'made' && s.file
+                ? <audio controls preload="none" src={fileUrl(slug, s.file, version)} title={`${s.seconds ?? ''} s. Free to listen`} />
+                : <span class="detail">{s.state === 'rejected' ? `✕ ${s.rejected}` : running ? '○ waiting its turn' : `○ ${s.state}`}</span>}
+            </li>
+          ))}
+        </ul>
+      )}
+      {step !== 'sound' && cards && cards.length > 0 && (
+        <ul class="sw-cards">
+          {cards.map((c) => {
+            const made = c.made && fresh(c.at) ? c.made : null;
+            // Weather and reactions: the words are what was read, so the earlier build's wait for this run's.
+            const words = (step === 'weather' || step === 'reactions') && !made ? [] : c.words;
+            return (
+              <li class={made ? 'ok' : ''}>
+                <div class="pair">
+                  <figure>
+                    {c.from
+                      ? <Crop slug={slug} shot={c.from} alt={c.title} title={`${c.title}: ${step === 'icons' ? 'the painting where it is picked up; SAM\'s mask lit, the rest dimmed' : 'what the step works from'}. Click: large`} />
+                      : <div class="sw-none">{named(step === 'icons' ? 'Muse Image paints it' : 'not painted yet')}</div>}
+                    <figcaption>{FROM[step] ?? 'from'}</figcaption>
+                  </figure>
+                  {(step === 'icons' || step === 'plates') && (
+                    <figure>
+                      {made
+                        ? isShot(made)
+                          ? <Crop slug={slug} shot={made} alt={c.title} title={`${c.title}: ${MADE[step]}`} />
+                          : <img class="sw-icon" src={fileUrl(slug, made.file, made.v)} data-lightbox={fileUrl(slug, made.file, made.v)} title={`${c.title}: the icon in the hero's bag. Click: large`} alt={c.title} />
+                        : <div class={`to-come${failed || !running ? ' still' : ''}`} title={running ? 'Being made now' : 'Not made'} />}
+                      <figcaption>{MADE[step]}</figcaption>
+                    </figure>
+                  )}
+                </div>
+                <div class="words">
+                  <strong>{step === 'weather' || step === 'reactions' ? nice(c.title) : c.title}</strong>
+                  {words.length
+                    ? words.map((w) => <span class="detail">{named(w)}</span>)
+                    : <span class="detail">{running ? '○ waiting its turn' : '○ not made'}</span>}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}