babavoss 0.0.1 → 0.12.0

package/src/web/maker.tsx

@@ -0,0 +1,766 @@
+// The Baba Maker: the baba as a whole, simulated in the page, for the person
+// making it. Home is the baba with its starting states (the specs). A
+// spec open is its view, filling the page: one of the baba's own apps, the
+// one that fits the spec's systems, or the desktop with every app that
+// fits, drawn over the simulated state, the hooks reading it and the hand
+// acting on it. Along the
+// bottom a status bar says the rest in one line each, and each line opens
+// a popover: the stories and the one under way, the model as objects, the
+// outside as played and quiet, the take, and the machine's debug view.
+// The spec runs on the testbed's virtual clock, advanced from real time by
+// the speed knob; a story is the same program the headless runner executes.
+import { Component, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ComponentType, type ReactNode } from "react";
+import { Replica } from "../ecs/replica.ts";
+import type { Testbed } from "../ecs/testbed.ts";
+import type { Effect, Job, Snapshot } from "../ecs/state.ts";
+import type { Raw } from "../ecs/runtime.ts";
+import type { StateAnswer } from "../ecs/snapshot.ts";
+import { seeded, liveRun, linesOf, asProgram, wordsOf, diffStates, isPlayed, adaptersOf, type Spec, type SpecScenario, type Progress, type RunResult, type TakeStep, type Expectation, type Note, type Change, type ResourceChange } from "../spec/index.ts";
+import { testbed } from "../ecs/testbed.ts";
+import type { Line } from "../test/steps.ts";
+import type { StepRecord, CheckRecord } from "../test/records.ts";
+import maker from "../maker/system.ts";
+import { nameOf, type AppSpec } from "../ecs/baba.ts";
+import { useBabaState } from "./state.tsx";
+import { useManifest } from "./core.tsx";
+import { LiveStoreContext, type LiveStore } from "./hooks.ts";
+import type { Hand } from "./app.tsx";
+import { ObjectCards, ObjectMap, instancesOf, objectsOf, type ObjectType } from "./objects.tsx";
+import { Button } from "./ui.tsx";
+import { LocalDesktop, SpecDesktop, routeOf, type AppProps } from "../desktop/view.tsx";
+import { matchRoute } from "../desktop/routes.ts";
+import type { DesktopSystem } from "../desktop/index.ts";
+
+/** A way to look at a spec: one of the baba's apps, or the desktop with every app that fits. */
+export interface AppChoice { key: string; title: string; kind: "app" | "desktop" }
+/** The desktop's key among a spec's choices: no app's key starts so. */
+const DESKTOP = "~desktop";
+
+/**
+ * The apps that fit a spec, the first the default: the desktop, for a spec that holds the desktop system or is the whole
+ * baba; then every app the baba declares, with a component, whose systems (`apps: [{ key, systems }]`) are all in the
+ * spec. An app that names no system fits every spec.
+ */
+export function appsFor(spec: Spec<any, any>, declared: readonly AppSpec[], components: Record<string, unknown>): AppChoice[] {
+  const names = new Set((spec.baba.systems as readonly unknown[]).map(nameOf));
+  const fits = declared.filter((sc) => sc.key in components && (sc.systems ?? []).every((n) => names.has(n)));
+  const desktop = names.has("desktop") || spec.baba.apps.length > 0;
+  return [...(desktop ? [{ key: DESKTOP, title: "Desktop", kind: "desktop" as const }] : []), ...fits.map((sc) => ({ key: sc.key, title: sc.title, kind: "app" as const }))];
+}
+
+// ---- the simulation -------------------------------------------------------
+
+type Phase = "idle" | "playing" | "paused";
+/** A story under way: its steps, how far it got, what each step changed, and how it ended. */
+interface Running { scenario: SpecScenario; steps: Line<any>[]; gen: Generator<Progress, RunResult, void>; waitUntil: number | null; kind: "canonical" | "exploratory"; at: number; checks: Map<number, CheckRecord>; errors: Map<number, string>; changes: Map<number, { entities: Change[]; resources: ResourceChange[] }>; result: RunResult | null }
+
+/**
+ * One spec simulated in the page: a testbed of it, a replica the
+ * hooks read, a clock that follows real time at `speed` while playing, a
+ * story under way when one is, and the take: what the hand did. It is the
+ * page's live store for everything drawn over it, so the baba's own desktop
+ * fires into it.
+ */
+export class Simulation implements LiveStore {
+  spec: Spec<any, any>;
+  replica = new Replica();
+  probe = { samples: [] };
+  ready = true;
+  connected = true;
+  refused: string | null = null;
+  t!: Testbed<any>;
+  params: Record<string, unknown>;
+  phase: Phase = "idle";
+  speed = 1;
+  /** Whether nothing but the seed and canonical stories have moved this spec. */
+  pristine = true;
+  take: TakeStep[] = [];
+  expectations: Expectation[] = [];
+  notes: Note[] = [];
+  /** How many code changes this spec carried across since its seed. */
+  carried = 0;
+  running: Running | null = null;
+  rounds: { round: number; now: number; delta: StateAnswer }[] = [];
+  log: string[] = [];
+  private listeners = new Set<() => void>();
+  private timer: ReturnType<typeof setInterval> | null = null;
+  private last = 0;
+  private before: Snapshot | null = null;
+
+  constructor(spec: Spec<any, any>, params?: Record<string, unknown>) {
+    this.spec = spec;
+    this.params = { ...spec.params, ...(params ?? {}) };
+    this.reset();
+  }
+
+  /**
+   * New code over this spec: the baba's own reload promise, kept here. The
+   * state as it is, fitted to the new spec's model; what the model no longer
+   * declares is dropped and logged. A drop means the model changed under
+   * this spec, and then it reseeds instead; otherwise it carries on, with
+   * its clock, its jobs, its outside's state and its take.
+   */
+  adopt(spec: Spec<any, any>): void {
+    if (spec === this.spec) return;
+    const was = this.spec;
+    this.spec = spec;
+    this.params = { ...spec.params, ...Object.fromEntries(Object.entries(this.params).filter(([k]) => k in spec.params)) };
+    const dropped: string[] = [];
+    const log = (line: string) => { if (line.startsWith("the kept state was fitted")) dropped.push(line); this.log = [...this.log.slice(-199), line]; };
+    const snapshot = this.t.w.snapshot();
+    const now = this.t.now;
+    const t = testbed(spec.baba, { now, seed: spec.seed, snapshot, adapters: adaptersOf(spec.adapters), log });
+    if (dropped.length > 0 || was.setup !== spec.setup && this.pristine) {
+      this.log = [...this.log, dropped.length ? `the model changed under this spec (${dropped.length} dropped): reseeded` : "new code over a spec as seeded: reseeded"];
+      this.reset();
+      return;
+    }
+    // The outside's state carries by effect name: the new code's effects are new objects.
+    const effects = spec.baba.model.effects as Effect[];
+    for (const [e, st] of this.t.outside) { const n = effects.find((x) => x.name === e.name && x.owner === e.owner); if (n && st.size) (t.outside as Map<Effect, Map<string, unknown>>).set(n, new Map(st)); }
+    this.t = t;
+    this.running = null;
+    this.carried += 1;
+    this.replica = new Replica(t.w.snapshot());
+    this.log = [...this.log, `new code: the spec carried (${this.carried} so far)`];
+    this.notify();
+  }
+
+  /** The spec from its seed again, with the knobs as they are. */
+  reset(params?: Record<string, unknown>): void {
+    this.pause();
+    this.running = null;
+    if (params) this.params = { ...this.spec.params, ...params };
+    const log = (line: string) => { this.log = [...this.log.slice(-199), line]; };
+    const { t } = seeded(this.spec, { params: this.params, log });
+    this.t = t;
+    this.replica = new Replica(t.w.snapshot());
+    this.rounds = [];
+    this.take = [];
+    this.expectations = [];
+    this.notes = [];
+    this.carried = 0;
+    this.recorded = this.t.now;
+    this.pristine = true;
+    this.phase = "idle";
+    this.notify();
+  }
+
+  /** The replica brought to the state as it is now: by the delta since its round when the state has one, else whole; nothing when no round passed. */
+  private sync(): void {
+    const round = this.t.round;
+    if (round === this.replica.round) return;
+    const delta = this.replica.round > 0 ? this.t.w.delta(this.replica.round) : null;
+    const answer: StateAnswer = delta || { ...this.t.w.snapshot(), round };
+    this.rounds = [...this.rounds.slice(-99), { round, now: this.t.now, delta: answer }];
+    this.replica = delta ? this.replica.apply(delta) : new Replica(answer as Snapshot);
+  }
+
+  /** Real time passes: the clock advances by `ms * speed`; a story waiting for a moment goes on when it comes. */
+  private step(ms: number): void {
+    const to = this.t.now + ms * this.speed;
+    const r = this.running;
+    if (r && r.waitUntil !== null && r.waitUntil <= to) {
+      this.t.advance(r.waitUntil);
+      this.t.tick({ now: r.waitUntil });
+      r.waitUntil = null;
+      this.drive();
+    }
+    this.t.advance(to);
+    this.sync();
+    this.notify();
+  }
+
+  play(): void {
+    if (this.phase === "playing") return;
+    this.phase = "playing";
+    this.last = performance.now();
+    this.timer = setInterval(() => { const now = performance.now(); const ms = now - this.last; this.last = now; this.step(ms); }, 50);
+    this.notify();
+  }
+
+  pause(): void {
+    if (this.timer) clearInterval(this.timer);
+    this.timer = null;
+    if (this.phase === "playing") this.phase = "paused";
+    this.notify();
+  }
+
+  /** One round now, by hand. */
+  tick(): void { this.pass(1); }
+
+  setSpeed(s: number): void { this.speed = s; this.notify(); }
+
+  /** The clock as the take last saw it: time that passed since is recorded before the next step, so a replay reaches the same moment. */
+  private recorded = 0;
+  private markTime(): void {
+    if (this.t.now === this.recorded) return;
+    this.take.push({ rec: { kind: "tick", label: `to ${(this.t.now / 1000).toFixed(1)} s`, args: { at: this.t.now } } });
+    this.recorded = this.t.now;
+  }
+  /**
+   * An action now, as its system, then a round now, as the running baba gives
+   * every action: recorded in the take as the fire and a tick at this very
+   * moment, so headless the job starts in the same round. The hand's, or an
+   * agent's through an ask.
+   */
+  act(name: string, args?: unknown): { value?: unknown; error?: string } {
+    this.markTime();
+    const rec: StepRecord = { kind: "fire", label: name, args: args ?? {} };
+    let value: unknown;
+    try { value = rec.result = (this.t.fire as unknown as (n: string, a: unknown) => unknown)(name, args ?? {}); } catch (e) { rec.error = e instanceof Error ? e.message : String(e); }
+    this.take.push({ rec });
+    if (!rec.error) { this.t.tick({ now: this.t.now }); this.take.push({ rec: { kind: "tick", label: "a round", args: { at: this.t.now } } }); }
+    this.touch();
+    this.sync();
+    this.notify();
+    return rec.error ? { error: rec.error } : { value };
+  }
+  /** Time passes by `ms` on the spec's clock, every round due on the way and one at the end: recorded in the take. */
+  pass(ms: number): void {
+    this.t.tick({ now: this.t.now + Math.max(1, ms) });
+    this.markTime();
+    this.touch();
+    this.sync();
+    this.notify();
+  }
+  /** What an agent's ask answers from this spec: the steps run in order, what each gave, and what they changed together; or a read. */
+  ask(kind: "step" | "read", program: string): unknown {
+    const p = JSON.parse(program) as unknown;
+    if (kind === "read") {
+      const { query, args } = p as { query: string; args?: unknown };
+      if (query === "take") return { steps: this.take.map((s) => wordsOf(s.rec)), expectations: this.expectations.map((e) => ({ at: e.at, label: e.label, entity: e.entity, parts: e.parts })), notes: this.notes, pristine: this.pristine, carried: this.carried, now: this.t.now, round: this.t.round, story: this.running ? { name: this.running.scenario.name, kind: this.running.kind, verdict: this.running.result?.verdict ?? null } : null };
+      return (this.t.read as unknown as (n: string, a: unknown) => unknown)(query, args ?? {});
+    }
+    const steps = p as Record<string, unknown>[];
+    const before = this.t.w.snapshot();
+    const results: unknown[] = [];
+    for (const st of steps) {
+      if ("fire" in st) { const r = this.act(String(st.fire), st.args); results.push({ fire: st.fire, ...r }); if (r.error) break; }
+      else if ("tick" in st) { this.pass(Number(st.tick)); results.push({ tick: Number(st.tick), now: this.t.now }); }
+      else if ("read" in st) { try { results.push({ read: st.read, value: (this.t.read as unknown as (n: string, a: unknown) => unknown)(String(st.read), st.args ?? {}) }); } catch (e) { results.push({ read: st.read, error: e instanceof Error ? e.message : String(e) }); } }
+      else throw new Error(`a step is {fire, args}, {tick: ms} or {read, args}: ${JSON.stringify(st)}`);
+    }
+    return { results, changes: diffStates(before, this.t.w.snapshot()), now: this.t.now, round: this.t.round, quiet: [...new Set(this.t.jobs.filter((j) => !isPlayed(this.spec.adapters, j.effect)).map((j) => j.effect.name))].sort() };
+  }
+  /** The asks this spec answered already, so one page answers each once. */
+  readonly answered = new Set<number>();
+
+  /** The hand: an action now, as its system, recorded in the take. What the desktop and every app fire into. */
+  fire(name: string, args?: unknown): Promise<unknown> {
+    const r = this.act(name, args);
+    return r.error ? Promise.reject(new Error(r.error)) : Promise.resolve(r.value);
+  }
+  fireIn(name: string, args?: unknown): Promise<{ value: unknown; round: number | undefined }> { return this.fire(name, args).then((value) => ({ value, round: this.t.round })); }
+  read(name: string, args?: unknown): Promise<unknown> { try { return Promise.resolve((this.t.read as unknown as (n: string, a: unknown) => unknown)(name, args ?? {})); } catch (e) { return Promise.reject(e); } }
+  raw(_op: Raw): Promise<unknown> { return Promise.reject(new Error("the Maker's spec takes actions, not raw writes")); }
+  hand: Hand = { fire: (name, args) => { void this.fire(name, args).catch(() => {}); } };
+
+  /** An expectation: this entity, as it is now, at this point of the take. */
+  expect(entity: number, label?: string): void {
+    this.markTime();
+    const parts = this.replica.of(entity);
+    this.expectations = [...this.expectations, { at: this.take.length, label: label ?? `#${entity} is ${Object.keys(parts).join(", ")}`, entity, parts }];
+    this.notify();
+  }
+  forgetExpectation(i: number): void { this.expectations = this.expectations.filter((_, k) => k !== i); this.notify(); }
+
+  /** A note: the person's words on an entity, at this point of the take, for the agent to read and the file to carry. */
+  note(entity: number | null, text: string): void {
+    if (!text.trim()) return;
+    this.markTime();
+    this.notes = [...this.notes, { at: this.take.length, entity, text: text.trim() }];
+    this.notify();
+  }
+  forgetNote(i: number): void { this.notes = this.notes.filter((_, k) => k !== i); this.notify(); }
+
+  private touch(): void {
+    if (!this.pristine) return;
+    this.pristine = false;
+    if (this.running && this.running.kind === "canonical") { this.running.kind = "exploratory"; this.log = [...this.log, `the hand moved during "${this.running.scenario.name}": the run is exploratory from here`]; }
+  }
+
+  /** Starts a story on the state as it is: canonical from a pristine seed, exploratory otherwise. */
+  start(sc: SpecScenario): void {
+    this.running = null;
+    const steps = linesOf(sc.script, { ...this.params, ...(sc.params ?? {}) });
+    const gen = liveRun(this.spec, sc, this.t, this.params);
+    this.running = { scenario: sc, steps, gen, waitUntil: null, kind: this.pristine ? "canonical" : "exploratory", at: -1, checks: new Map(), errors: new Map(), changes: new Map(), result: null };
+    this.before = this.t.w.snapshot();
+    this.drive();
+    if (this.phase !== "playing") this.play();
+    this.notify();
+  }
+
+  /** Runs the story's generator until it asks for time, or ends; records what each step changed. */
+  private drive(): void {
+    const r = this.running;
+    if (!r) return;
+    for (;;) {
+      const n = r.gen.next();
+      if (n.done) { r.result = n.value; this.settle(r, r.at); this.sync(); this.notify(); return; }
+      const p = n.value;
+      if (p.index !== r.at) { this.settle(r, r.at); r.at = p.index; }
+      if (p.kind === "step") { this.markTime(); this.take.push({ rec: p.rec }); if (p.rec.error) r.errors.set(p.index, p.rec.error); }
+      if (p.kind === "check") r.checks.set(p.index, p.rec);
+      if (p.kind === "tick") { r.waitUntil = p.to; this.sync(); this.notify(); return; }
+    }
+  }
+
+  /** What the step just finished changed, kept against its index. */
+  private settle(r: Running, index: number): void {
+    const now = this.t.w.snapshot();
+    if (index >= 0 && this.before) r.changes.set(index, diffStates(this.before, now));
+    this.before = now;
+  }
+
+  // HookStore
+  subscribe = (fn: () => void): (() => void) => { this.listeners.add(fn); return () => { this.listeners.delete(fn); }; };
+  private notify(): void { for (const fn of this.listeners) fn(); }
+  retain = () => () => {};
+  committed = () => {};
+  wantAll = () => () => {};
+  wantPresence = () => () => {};
+  wantValues = () => () => {};
+  wantPart = () => () => {};
+  wantResource = () => () => {};
+  wantSelect = () => () => {};
+
+  dispose(): void { this.pause(); }
+}
+
+// ---- the page --------------------------------------------------------------
+
+/** Lucide's icons the bars use, inlined: the framework depends on React alone. */
+const ICON: Record<string, ReactNode> = {
+  back: <path d="m15 18-6-6 6-6" />,
+  play: <polygon points="6 3 20 12 6 21 6 3" />,
+  pause: <><rect x="14" y="4" width="4" height="16" rx="1" /><rect x="6" y="4" width="4" height="16" rx="1" /></>,
+  clock: <><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>,
+  stories: <><path d="M12 7v14" /><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" /></>,
+  model: <><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" /><path d="m3.3 7 8.7 5 8.7-5" /><path d="M12 22V12" /></>,
+  outside: <><circle cx="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></>,
+  take: <><path d="m3 17 2 2 4-4" /><path d="m3 7 2 2 4-4" /><path d="M13 6h8" /><path d="M13 12h8" /><path d="M13 18h8" /></>,
+  debug: <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" />,
+  reset: <><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /></>,
+  view: <><rect x="2" y="4" width="20" height="16" rx="2" /><path d="M10 4v4" /><path d="M2 8h20" /><path d="M6 4v4" /></>,
+  spec: <><path d="M7 20h10" /><path d="M10 20c5.5-2.5.8-6.4 3-10" /><path d="M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z" /><path d="M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z" /></>,
+};
+function Icon({ name }: { name: keyof typeof ICON }) {
+  return <svg className="bv-bar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{ICON[name]}</svg>;
+}
+
+export interface MakerProps {
+  /** The specs the view bundles: the baba's starting states. */
+  specs: readonly Spec<any, any>[];
+  /** The baba's apps, by key, as the interface composes them (the Maker aside): a spec is viewed with the ones that fit it, drawn over the simulation. */
+  apps?: Record<string, ComponentType<AppProps>>;
+  /** What the baba is called, for the home. */
+  title?: string;
+  path?: string;
+  navigate?: (path: string) => void;
+  /** Names the shell's window after what is shown: the Maker, or the spec open. */
+  setTitle?: (title: string) => void;
+}
+
+/** The Maker: the baba with its starting states, and one open on its stage. */
+export function Maker({ specs, apps = {}, title, path = "/", navigate, setTitle }: MakerProps) {
+  const open = /^\/spec\/([a-z0-9-]+)/.exec(path)?.[1] ?? null;
+  const spec = open ? specs.find((w) => w.name === open) : undefined;
+  const go = navigate ?? (() => {});
+  useEffect(() => { setTitle?.(spec ? `Maker · ${spec.name}` : "Maker"); }, [setTitle, spec]);
+  if (spec) return <Lab key={spec.name} spec={spec} apps={apps} back={() => go("/")} />;
+  return <Home specs={specs} title={title} open={(n) => go(`/spec/${n}`)} />;
+}
+
+/** Home: the baba, and each starting state of it with the standing of its stories. */
+function Home({ specs, title, open }: { specs: readonly Spec<any, any>[]; title?: string; open: (name: string) => void }) {
+  const { w, fire } = useBabaState();
+  const rows = w.query(maker.specFile).map((r) => ({ entity: r.entity, name: r.specFile.name, updated: r.specFile.updated, code: r.specFile.code, v: w.get(r.entity, maker.specVerdicts), broken: w.get(r.entity, maker.specVerdictsBroken) }));
+  const run = w.get(maker.specRun);
+  const running = w.running(maker.specTest);
+  return (
+    <div className="bv-maker">
+      <header className="bv-maker-head"><h2>{title ?? "This baba"}</h2><span className="bv-muted">{specs.length} starting state{specs.length === 1 ? "" : "s"}</span><Button variant="quiet" disabled={running} onClick={() => void fire("spec-run" as never, {} as never)}>{running ? "running every story…" : "run every story"}</Button></header>
+      {run && run.code !== null && run.code !== 0 && <pre className="bv-maker-output">{run.output}</pre>}
+      <ul className="bv-maker-list">
+        {specs.map((sp) => {
+          const d = rows.find((r) => r.name === sp.name);
+          const v = d?.v;
+          const stale = !!v && !!d && (v.at < d.updated || v.at < d.code);
+          const counts = v ? { passed: v.scenarios.filter((x) => x.verdict === "passed").length, failed: v.scenarios.filter((x) => x.verdict === "failed").length, unknown: v.scenarios.filter((x) => x.verdict === "unknown").length } : null;
+          return (
+            <li key={sp.name} className="bv-maker-spec">
+              <button type="button" className="bv-maker-open" onClick={() => open(sp.name)}><b>{sp.name}</b>{sp.summary && <span className="bv-muted"> {sp.summary}</span>}</button>
+              <span className="bv-maker-facts">
+                <span className="bv-muted">{sp.baba.systems.length} system{sp.baba.systems.length === 1 ? "" : "s"} · {sp.scenarios.length} stor{sp.scenarios.length === 1 ? "y" : "ies"}</span>
+                {counts ? <span className={counts.failed ? "bv-verdict is-failed" : counts.unknown ? "bv-verdict is-sketch" : "bv-verdict is-passed"}>{counts.failed ? `${counts.failed} broken` : counts.unknown ? `${counts.unknown} unknown` : `${counts.passed} hold`}{stale ? " · stale" : ""}</span> : <span className="bv-verdict is-sketch">{d?.broken ? "verdicts unreadable" : "never run"}</span>}
+                <Button variant="quiet" disabled={running} onClick={() => void fire("spec-run" as never, { spec: sp.name } as never)}>run</Button>
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+      {specs.length === 0 && <p className="bv-muted">No starting states: a system's spec is <code>systems/NAME/spec.ts</code>, exporting <code>spec(system, {"{"} scenarios: […] {"}"})</code>; the whole baba's is <code>.baba/spec.ts</code>. They are found where they are, with no list to keep.</p>}
+    </div>
+  );
+}
+
+const useSim = (sim: Simulation) => useSyncExternalStore(sim.subscribe, () => sim.replica);
+
+type Widget = "spec" | "app" | "clock" | "stories" | "model" | "outside" | "take" | "debug";
+
+/** The app a person picked for a spec, kept in this browser: a convenience, so nothing breaks without storage. */
+const pickKey = (spec: string) => `voss.maker.app.${spec}`;
+const pickedApp = (spec: string): string | null => { try { return localStorage.getItem(pickKey(spec)); } catch { return null; } };
+const keepApp = (spec: string, key: string) => { try { localStorage.setItem(pickKey(spec), key); } catch { /* the pick holds for this page */ } };
+
+/** One of the baba's apps as a subview: inert AppProps, its path and its memory its own, nothing navigated outside it. */
+function Subview({ View, routes }: { View: ComponentType<AppProps>; routes?: readonly string[] }) {
+  const [path, setPath] = useState("/");
+  const [memory, setMemory] = useState<Record<string, unknown>>({});
+  const remember = (key: string, value: unknown) => setMemory((m) => (value === null ? Object.fromEntries(Object.entries(m).filter(([k]) => k !== key)) : { ...m, [key]: value }));
+  return <View session="maker" window={0} path={path} {...routeOf(routes, path)} active memory={memory} navigate={(p) => { if (!routes?.length || matchRoute(routes, p)) setPath(p); }} open={() => {}} setTitle={() => {}} remember={remember} />;
+}
+
+/** An app that throws says so in the frame, and the rest of the Maker goes on. */
+class AppBoundary extends Component<{ children: ReactNode }, { error: string | null }> {
+  override state = { error: null as string | null };
+  static getDerivedStateFromError(error: unknown) { return { error: error instanceof Error ? error.message : String(error) }; }
+  override render() { return this.state.error ? <div className="bv-lab-bare" role="alert"><p className="bv-error">The app failed over this spec: {this.state.error}</p><Button variant="quiet" onClick={() => this.setState({ error: null })}>try again</Button></div> : this.props.children; }
+}
+
+/**
+ * The specs this page keeps, by name, outside the interface's module: a
+ * code change swaps the module and this registry hands the new Lab the same
+ * spec, which adopts the new spec. A spec lives as long as the page.
+ */
+const registry: Map<string, Simulation> = ((globalThis as { __bvMakerSpecs?: Map<string, Simulation> }).__bvMakerSpecs ??= new Map());
+
+/**
+ * A spec open: its view fills the page, one of the baba's apps that fits
+ * the spec or the desktop, over the simulation; a status bar along the
+ * bottom carries one line per thing to know, each opening a popover with
+ * the rest.
+ */
+function Lab({ spec, apps, back }: { spec: Spec<any, any>; apps: Record<string, ComponentType<AppProps>>; back: () => void }) {
+  const sim = useMemo(() => { const have = registry.get(spec.name); if (have) { have.adopt(spec); return have; } const made = new Simulation(spec); registry.set(spec.name, made); return made; }, [spec]);
+  const replica = useSim(sim);
+  const { w: live, fire: liveFire } = useBabaState();
+  // An agent's asks of this spec, answered here, each once: the agent acts in and reads what the person sees.
+  const asks = live.query(maker.specAsk).filter((r) => r.specAsk.spec === spec.name && r.specAsk.status === "asked");
+  useEffect(() => {
+    for (const r of asks) {
+      if (sim.answered.has(r.entity)) continue;
+      sim.answered.add(r.entity);
+      let ok = true, answer: unknown;
+      try { answer = sim.ask(r.specAsk.kind, r.specAsk.program); } catch (e) { ok = false; answer = e instanceof Error ? e.message : String(e); }
+      void (liveFire as unknown as (n: string, a: unknown) => Promise<unknown>)("spec-answer", { entity: r.entity, ok, answer }).catch(() => {});
+    }
+  }, [asks, sim, liveFire]);
+  const verdicts = live.query(maker.specFile).find((r) => r.specFile.name === spec.name);
+  const v = verdicts ? live.get(verdicts.entity, maker.specVerdicts) : undefined;
+  const [open, setOpen] = useState<Widget | null>(null);
+  // The apps that fit this spec, from the apps the baba declares; the person's pick, else the first.
+  const manifest = useManifest();
+  const declared: readonly AppSpec[] = manifest?.apps ?? spec.baba.apps;
+  const choices = useMemo(() => appsFor(spec, declared, apps), [spec, declared, apps]);
+  const [picked, setPicked] = useState<string | null>(() => pickedApp(spec.name));
+  const choice = choices.find((c) => c.key === picked) ?? choices[0];
+  const pick = (key: string) => { setPicked(key); keepApp(spec.name, key); setOpen(null); };
+  const fitting = useMemo(() => Object.fromEntries(choices.filter((c) => c.kind === "app").map((c) => [c.key, apps[c.key]!])), [choices, apps]);
+  const shell = (spec.baba.systems as readonly unknown[]).find((x) => nameOf(x) === "desktop") as DesktopSystem | undefined;
+  const view = !choice ? <div className="bv-lab-bare"><BareState w={replica} /></div>
+    : choice.kind === "app" ? <Subview key={choice.key} View={apps[choice.key]!} routes={declared.find((sc) => sc.key === choice.key)?.routes} />
+    : shell ? <SpecDesktop system={shell} apps={fitting} title={spec.name} />
+    : <LocalDesktop key={choices.length} apps={declared.filter((sc: AppSpec) => sc.key in fitting)} components={fitting} title={spec.name} open={choices.find((c) => c.kind === "app")?.key} />;
+  const r = sim.running;
+  const knobs = Object.entries(spec.params as Record<string, unknown>);
+  const held = v ? v.scenarios.filter((x) => x.verdict === "passed").length : 0;
+  const broken = v ? v.scenarios.filter((x) => x.verdict === "failed").length : 0;
+  const effects = spec.baba.model.effects as { name: string; owner: string }[];
+  const played = effects.filter((e) => isPlayedByName(spec, e)).length;
+  // The quiet effects a job asked of: what an adapter would have to play, for whoever asks.
+  const quiet = new Set(sim.t.jobs.filter((j) => !isPlayed(spec.adapters, j.effect)).map((j) => j.effect.name)).size;
+  const toggle = (k: Widget) => setOpen((o) => (o === k ? null : k));
+  const stories = r ? `${r.scenario.name} · ${r.result ? (r.result.verdict === "passed" ? "held" : r.kind === "exploratory" ? "warnings" : "broke") : r.waitUntil !== null ? "waiting" : "running"}` : `${spec.scenarios.length} stor${spec.scenarios.length === 1 ? "y" : "ies"}${v ? ` · ${broken ? `${broken} broken` : `${held} hold`}` : ""}`;
+  const storyTone = r ? (r.result ? (r.result.verdict === "passed" ? "is-ok" : r.kind === "exploratory" ? "is-warn" : "is-bad") : "is-here") : broken ? "is-bad" : "";
+  return (
+    <div className="bv-lab">
+      <header className="bv-bar bv-bar-head">
+        <button type="button" className="bv-bar-item bv-bar-back" onClick={back} title="every starting state"><Icon name="back" /></button>
+        <Item id="spec" open={open} toggle={toggle} tone={sim.pristine ? "" : "is-warn"} label={<><Icon name="spec" /><b>{spec.name}</b><span className="bv-muted">{sim.pristine ? "as seeded" : "played"}{sim.carried ? ` · carried ×${sim.carried}` : ""}</span></>}>
+          <p className="bv-bar-summary">{spec.summary || <span className="bv-muted">No summary.</span>}</p>
+          <p className="bv-muted">{spec.baba.systems.length} system{spec.baba.systems.length === 1 ? "" : "s"}: {spec.baba.systems.map(nameOf).join(", ")}</p>
+          {knobs.length > 0 && <div className="bv-lab-knobs">{knobs.map(([k, dflt]) => <Knob key={k} name={k} value={sim.params[k]} dflt={dflt} set={(val) => sim.reset({ ...sim.params, [k]: val })} />)}</div>}
+          <div className="bv-lab-answer"><Button variant="quiet" onClick={() => { sim.reset(); setOpen(null); }}><Icon name="reset" /> reset to the seed</Button></div>
+        </Item>
+        <Item id="app" open={open} toggle={toggle} label={<><Icon name="app" />{choice?.title ?? <span className="bv-muted">the state bare</span>}</>}>
+          {choices.length === 0
+            ? <p className="bv-muted">No app fits this spec: an app fits when the systems it names in <code>baba({"{"} apps {"}"})</code> are all here.</p>
+            : <ul className="bv-lab-views">{choices.map((c) => <li key={c.key}><Button variant="quiet" className={c.key === choice?.key ? "is-open" : ""} onClick={() => pick(c.key)}>{c.title}</Button></li>)}</ul>}
+        </Item>
+        <Item id="stories" open={open} toggle={toggle} tone={storyTone} label={<><Icon name="stories" />{stories}</>} wide>
+          <Stories sim={sim} spec={spec} verdicts={v} />
+        </Item>
+        <span className="bv-bar-gap" />
+        <button type="button" className={`bv-bar-item bv-bar-play${sim.phase === "playing" ? " is-on" : ""}`} onClick={() => (sim.phase === "playing" ? sim.pause() : sim.play())} title={sim.phase === "playing" ? "pause" : "play"}><Icon name={sim.phase === "playing" ? "pause" : "play"} /></button>
+        <Item id="clock" open={open} toggle={toggle} align="right" label={<><Icon name="clock" /><span className="bv-bar-time">{(sim.t.now / 1000).toFixed(1)} s</span>{sim.speed !== 1 && <span className="bv-muted">×{sim.speed}</span>}</>}>
+          <div className="bv-lab-transport">
+            <label className="bv-muted">speed <select value={sim.speed} onChange={(e) => sim.setSpeed(Number(e.target.value))}>{[0.25, 0.5, 1, 2, 4, 8].map((s) => <option key={s} value={s}>{s}×</option>)}</select></label>
+            <Button variant="quiet" onClick={() => sim.tick()}>one round</Button>
+            <span className="bv-muted">round {sim.t.round}</span>
+          </div>
+        </Item>
+      </header>
+      <main className="bv-lab-app">
+        <div className={`bv-lab-frame${sim.phase === "playing" ? " is-playing" : ""}`}>
+          {/* Every hook inside reads the simulation, and every fire, useBabaState's or useHand's, acts on it. */}
+          <LiveStoreContext.Provider value={sim}>
+            <AppBoundary key={choice?.key ?? ""}>{view}</AppBoundary>
+          </LiveStoreContext.Provider>
+        </div>
+      </main>
+      <footer className="bv-bar">
+        <Item id="model" open={open} toggle={toggle} label={<><Icon name="model" />model</>} wide>
+          <Model sim={sim} replica={replica} />
+        </Item>
+        <Item id="outside" open={open} toggle={toggle} label={<><Icon name="outside" />outside<span className="bv-muted">{played} played{quiet ? ` · ${quiet} quiet` : ""}</span></>} wide>
+          <Outside sim={sim} />
+        </Item>
+        <span className="bv-bar-gap" />
+        <Item id="take" open={open} toggle={toggle} align="right" label={<><Icon name="take" />take<span className="bv-muted">{sim.take.length}{sim.expectations.length ? ` · ${sim.expectations.length} expected` : ""}{sim.notes.length ? ` · ${sim.notes.length} noted` : ""}</span></>} wide>
+          <Take sim={sim} />
+        </Item>
+        <Item id="debug" open={open} toggle={toggle} align="right" label={<><Icon name="debug" /><span className="bv-muted">{sim.t.jobs.length} job{sim.t.jobs.length === 1 ? "" : "s"} · round {sim.t.round}</span></>} wide>
+          <Debug sim={sim} />
+        </Item>
+      </footer>
+    </div>
+  );
+}
+
+/** One widget of a bar: a one-liner, and the popover it opens beside itself, above a footer's and below a header's. */
+function Item({ id, open, toggle, label, tone = "", align = "left", wide = false, children }: { id: Widget; open: Widget | null; toggle: (k: Widget) => void; label: ReactNode; tone?: string; align?: "left" | "right"; wide?: boolean; children: ReactNode }) {
+  const isOpen = open === id;
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!isOpen) return;
+    const down = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) toggle(id); };
+    const key = (e: KeyboardEvent) => { if (e.key === "Escape") toggle(id); };
+    document.addEventListener("mousedown", down);
+    document.addEventListener("keydown", key);
+    return () => { document.removeEventListener("mousedown", down); document.removeEventListener("keydown", key); };
+  }, [isOpen, id, toggle]);
+  return (
+    <div ref={ref} className={`bv-bar-slot${isOpen ? " is-open" : ""}`}>
+      <button type="button" className={`bv-bar-item ${tone}${isOpen ? " is-open" : ""}`} onClick={() => toggle(id)}>{label}</button>
+      {isOpen && <div className={`bv-popover is-${align}${wide ? " is-wide" : ""}`} role="dialog">{children}</div>}
+    </div>
+  );
+}
+
+function Knob({ name, value, dflt, set }: { name: string; value: unknown; dflt: unknown; set: (v: unknown) => void }) {
+  const kind = typeof dflt;
+  if (kind === "boolean") return <label className="bv-muted"><input type="checkbox" checked={!!value} onChange={(e) => set(e.target.checked)} /> {name}</label>;
+  return <label className="bv-muted">{name} <input className="bv-lab-knob" value={String(value ?? "")} onChange={(e) => set(kind === "number" ? Number(e.target.value) : e.target.value)} /></label>;
+}
+
+/** The stories of the spec, each with its headless standing and a play, and the one under way with its steps. */
+function Stories({ sim, spec, verdicts }: { sim: Simulation; spec: Spec<any, any>; verdicts?: { scenarios: { name: string; verdict: string; failed: string[] }[] } }) {
+  const r = sim.running;
+  return (
+    <div>
+      <ul className="bv-lab-scenarios">
+        {spec.scenarios.map((sc) => {
+          const hv = verdicts?.scenarios.find((x) => x.name === sc.name);
+          const here = r?.scenario === sc ? r : null;
+          return (
+            <li key={sc.name} className={here ? "is-open" : ""}>
+              <div className="bv-lab-scenario-row">
+                <span className={`bv-verdict is-${hv?.verdict === "passed" ? "passed" : hv?.verdict === "failed" ? "failed" : "sketch"}`} title={hv ? `headless: ${hv.verdict}${hv.failed.length ? `\n${hv.failed.join("\n")}` : ""}` : "never run headless"}>{hv?.verdict === "passed" ? "holds" : hv?.verdict === "failed" ? "broken" : "unknown"}</span>
+                <b title={sc.name}>{sc.name}</b>
+                <Button variant="quiet" onClick={() => sim.start(sc)}>{here && !here.result ? "restart" : "play"}</Button>
+              </div>
+              <p className="bv-muted">{sc.intent}</p>
+            </li>
+          );
+        })}
+        {spec.scenarios.length === 0 && <li className="bv-muted">No stories yet. Play, then keep the take as one.</li>}
+      </ul>
+      {r && <Story sim={sim} />}
+    </div>
+  );
+}
+
+/** A step of a story in words, before it runs. */
+function stepWords(step: Line<any>): string {
+  switch (step.kind) {
+    case "given": return `given ${step.label}`;
+    case "fire": return `${step.name} ${Object.keys((step.args as object) ?? {}).length ? JSON.stringify(step.args) : ""}`.trim();
+    case "tick": return step.at !== undefined ? `time passes to ${(step.at / 1000).toFixed(1)} s` : `time passes ${step.after ?? 200} ms`;
+    case "ticks": return `time passes ${step.count} × ${step.every} ms`;
+    case "done": return `${step.effect.name} answers ${JSON.stringify(step.result)}`;
+    case "failed": return `${step.effect.name} fails: ${step.error}`;
+    case "list": return `${step.effect.name} lists ${JSON.stringify(step.items)}`;
+    case "watch": return `${step.effect.name} sends ${JSON.stringify(step.events)}`;
+    case "check": return `expect ${step.label}`;
+  }
+}
+
+/** The story under way: its steps in words, how far it got, what each changed, and each expectation against what the spec did. */
+function Story({ sim }: { sim: Simulation }) {
+  const r = sim.running;
+  if (!r) return null;
+  const warn = r.kind === "exploratory";
+  return (
+    <div className="bv-lab-story-wrap">
+      <p className="bv-lab-story-head"><b>{r.scenario.name}</b> <span className="bv-muted">{r.kind}{r.result ? ` · ${r.result.verdict === "passed" ? "held" : warn ? "did not hold, warnings" : "broke"}` : ""}</span></p>
+      <ol className="bv-lab-story">
+        {r.steps.map((step, i) => {
+          const done = i < r.at || (i === r.at && (r.result !== null || r.waitUntil === null));
+          const here = i === r.at && !r.result;
+          const check = r.checks.get(i), error = r.errors.get(i), ch = r.changes.get(i);
+          const tone = check ? (check.ok ? "is-ok" : warn ? "is-warn" : "is-bad") : error ? (warn ? "is-warn" : "is-bad") : done ? "is-done" : here ? "is-here" : "";
+          return (
+            <li key={i} className={tone}>
+              <span className="bv-film-mark">{check ? (check.ok ? "✓" : warn ? "!" : "✗") : error ? (warn ? "!" : "✗") : done ? "·" : here ? "▸" : " "}</span>
+              <span>{stepWords(step)}</span>
+              {check && !check.ok && (check.error ? <span className="bv-film-error"> {check.error}</span> : check.want !== undefined ? <span className="bv-muted">: got <code>{JSON.stringify(check.got)}</code>, want <code>{JSON.stringify(check.want)}</code></span> : null)}
+              {error && <span className="bv-film-error"> {error}</span>}
+              {ch && (ch.entities.length > 0 || ch.resources.length > 0) && <Changes changes={ch} />}
+            </li>
+          );
+        })}
+      </ol>
+    </div>
+  );
+}
+
+/** What a step changed, in object terms. */
+function Changes({ changes }: { changes: { entities: Change[]; resources: ResourceChange[] } }) {
+  return (
+    <ul className="bv-lab-changes">
+      {changes.entities.map((c) => <li key={c.entity}><code>#{c.entity}</code> <span className="bv-muted">{c.kind}</span> {Object.entries(c.parts).map(([n, v]) => <span key={n} className="bv-state-part"><b>{n}</b>{v === null ? <span className="bv-muted"> gone</span> : v === true ? "" : <code>{JSON.stringify(v)}</code>}</span>)}</li>)}
+      {changes.resources.map((c) => <li key={c.name}><b>{c.name}</b> <code>{JSON.stringify(c.value)}</code></li>)}
+    </ul>
+  );
+}
+
+/** The state as objects: the OOUX lens over the simulated state, with the hand, and an expectation to keep from any instance. */
+function Model({ sim, replica }: { sim: Simulation; replica: Replica<any> }) {
+  const manifest = useManifest();
+  // The baba's own objects first; the desktop's, machinery to a maker, last.
+  const types = useMemo(() => (manifest ? objectsOf(manifest, replica).filter((t) => sim.spec.baba.systems.some((c: unknown) => nameOf(c) === t.owner)).sort((a, b) => Number(a.owner === "desktop") - Number(b.owner === "desktop")) : []), [manifest, replica, sim.spec]);
+  const [pick, setPick] = useState<string | null>(null);
+  const type = types.find((t) => t.name === pick) ?? types.find((t) => instancesOf(replica, t).length > 0) ?? types[0];
+  if (!manifest) return <p className="bv-muted">…</p>;
+  if (types.length === 0) return <p className="bv-muted">No objects yet: a component with a key, or one known by its entity.</p>;
+  return (
+    <div className="bv-lab-model">
+      <ObjectMap types={types} w={replica} picked={type?.name ?? null} onPick={setPick} />
+      {type && <ExpectRow replica={replica} type={type} sim={sim} />}
+      {type && <ObjectCards w={replica} type={type} types={types} hand={sim.hand} onFollow={(n) => setPick(n)} />}
+    </div>
+  );
+}
+
+function ExpectRow({ replica, type, sim }: { replica: Replica<any>; type: ObjectType; sim: Simulation }) {
+  const rows = instancesOf(replica, type);
+  const [on, setOn] = useState<number | null>(null);
+  const [text, setText] = useState("");
+  if (rows.length === 0) return null;
+  return (
+    <div className="bv-lab-expect">
+      <p className="bv-muted">Keep as expected: {rows.slice(0, 12).map((r) => <Button key={r.entity} variant="quiet" onClick={() => sim.expect(r.entity, `${type.name} #${r.entity} as it is`)}>#{r.entity}</Button>)}</p>
+      <p className="bv-muted">Note on: {rows.slice(0, 12).map((r) => <Button key={r.entity} variant="quiet" className={on === r.entity ? "is-open" : ""} onClick={() => setOn(on === r.entity ? null : r.entity)}>#{r.entity}</Button>)}</p>
+      <div className="bv-lab-answer"><input value={text} placeholder={on === null ? "a note on the spec, in your words" : `a note on #${on}, in your words`} onChange={(e) => setText(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { sim.note(on, text); setText(""); } }} /><Button variant="quiet" disabled={!text.trim()} onClick={() => { sim.note(on, text); setText(""); }}>note</Button></div>
+    </div>
+  );
+}
+
+const isPlayedByName = (sp: Spec<any, any>, e: { name: string; owner: string }) => (sp.adapters as readonly (readonly [{ name: string; owner: string }, unknown])[]).some(([a]) => a.name === e.name && a.owner === e.owner);
+
+/** The outside: the effects the spec plays, each with its adapter and the state its model keeps; then the quiet ones a job asked of; then the rest. */
+function Outside({ sim }: { sim: Simulation }) {
+  const adapters = sim.spec.adapters as readonly (readonly [{ name: string; owner: string }, { kind: string }])[];
+  const entries = [...sim.t.outside.entries()].filter(([, st]) => st.size > 0);
+  const effects = sim.spec.baba.model.effects as { name: string; owner: string; shape: string }[];
+  const asked = new Set(sim.t.jobs.map((j) => j.effect.name));
+  const played = effects.filter((e) => isPlayedByName(sim.spec, e));
+  const quiet = effects.filter((e) => !isPlayedByName(sim.spec, e) && asked.has(e.name));
+  const rest = effects.filter((e) => !isPlayedByName(sim.spec, e) && !asked.has(e.name));
+  const row = (e: { name: string; owner: string }, note: string) => {
+    const st = entries.find(([x]) => x.name === e.name)?.[1];
+    return <li key={`${e.owner}/${e.name}`}><b>{e.name}</b> <span className="bv-muted">{e.owner} · {note}</span>{st && <Tree value={Object.fromEntries(st)} />}</li>;
+  };
+  return (
+    <div>
+      {played.length > 0 && <><h3>Played</h3><ul className="bv-lab-outside">{played.map((e) => row(e, `${adapters.find(([x]) => x.name === e.name && x.owner === e.owner)![1].kind} adapter`))}</ul></>}
+      {quiet.length > 0 && <><h3>Quiet, asked</h3><p className="bv-muted">A job asked of these; no adapter plays them, so they never answer. An adapter would.</p><ul className="bv-lab-outside">{quiet.map((e) => row(e, "quiet"))}</ul></>}
+      {rest.length > 0 && <><h3>Quiet</h3><ul className="bv-lab-outside">{rest.map((e) => row(e, "never asked"))}</ul></>}
+      {effects.length === 0 && <p className="bv-muted">Nothing reaches outside.</p>}
+    </div>
+  );
+}
+
+/** A value as a tree, folded where it is deep. */
+function Tree({ value, depth = 0 }: { value: unknown; depth?: number }) {
+  if (value === null || typeof value !== "object" || depth > 3) return <code>{JSON.stringify(value)}</code>;
+  const entries = Array.isArray(value) ? value.map((v, i) => [String(i), v] as const) : Object.entries(value as Record<string, unknown>);
+  return <ul className="bv-lab-tree">{entries.map(([k, v]) => <li key={k}><span className="bv-muted">{k}</span> <Tree value={v} depth={depth + 1} /></li>)}</ul>;
+}
+
+/** The take: what the hand did since the seed, the expectations kept, a name and an intent, and the file it becomes. */
+function Take({ sim }: { sim: Simulation }) {
+  const { fire } = useBabaState();
+  const [name, setName] = useState("");
+  const [intent, setIntent] = useState("");
+  const [showCode, setShowCode] = useState(false);
+  // From the spec's scenarios directory: a system's is .baba/systems/NAME/scenarios, the whole baba's .baba/scenarios.
+  const systems = Object.fromEntries(sim.spec.baba.systems.map(nameOf).map((n: string) => [n, sim.spec.name === "baba" ? `../systems/${n}/index.ts` : `../../${n}/index.ts`]));
+  const source = useMemo(() => asProgram({ spec: sim.spec.name, name: name || "played", intent, steps: sim.take, expectations: sim.expectations, notes: sim.notes, systems }), [sim.spec.name, name, intent, sim.take.length, sim.expectations.length, sim.notes.length]);
+  const rows: ReactNode[] = [];
+  const expectRow = (k: number, e: Expectation) => <li key={`e${k}`} className="is-ok"><span className="bv-film-mark">✓</span> expect {e.label} <Button variant="quiet" onClick={() => sim.forgetExpectation(k)}>×</Button></li>;
+  const noteRow = (k: number, n: Note) => <li key={`n${k}`} className="is-warn"><span className="bv-film-mark">✎</span> {n.entity !== null ? <code>#{n.entity}</code> : "the spec"}: {n.text} <Button variant="quiet" onClick={() => sim.forgetNote(k)}>×</Button></li>;
+  const at = (i: number) => { sim.expectations.forEach((e, k) => { if (e.at === i) rows.push(expectRow(k, e)); }); sim.notes.forEach((n, k) => { if (n.at === i) rows.push(noteRow(k, n)); }); };
+  sim.take.forEach((s, i) => {
+    at(i);
+    rows.push(<li key={i} className={s.rec.error ? "is-bad" : ""}><span className="bv-film-mark">·</span> {wordsOf(s.rec)}</li>);
+  });
+  at(sim.take.length);
+  return (
+    <div>
+      <p className="bv-muted">{sim.take.length} step{sim.take.length === 1 ? "" : "s"} since the seed, {sim.expectations.length} expectation{sim.expectations.length === 1 ? "" : "s"}, {sim.notes.length} note{sim.notes.length === 1 ? "" : "s"}. Expectations and notes come from the model; the take kept is a story of this spec.</p>
+      <ol className="bv-film-checks bv-lab-take">{rows}{rows.length === 0 && <li className="bv-muted">Nothing yet.</li>}</ol>
+      <div className="bv-lab-answer"><input value={name} placeholder="the story's name" onChange={(e) => setName(e.target.value)} /></div>
+      <div className="bv-lab-answer"><input value={intent} placeholder="what should hold, as a person would say it" onChange={(e) => setIntent(e.target.value)} /></div>
+      <div className="bv-lab-answer"><Button variant="quiet" disabled={!name.trim() || (sim.take.length === 0 && sim.notes.length === 0)} onClick={() => void fire("spec-save" as never, { spec: sim.spec.name, file: `${slug(name)}.ts`, source } as never)}>keep as a story</Button><Button variant="quiet" onClick={() => setShowCode((s) => !s)}>{showCode ? "hide the file" : "show the file"}</Button></div>
+      {showCode && <pre className="bv-sandbox-code">{source}</pre>}
+    </div>
+  );
+}
+
+/** Rounds, every job, the log: the machine's view, for whoever needs it. */
+function Debug({ sim }: { sim: Simulation }) {
+  const jobs = sim.t.jobs;
+  return (
+    <div>
+      <h3>Jobs</h3>
+      <ul className="bv-lab-jobs">{jobs.map((j) => <li key={`${j.effect.name}/${j.entity ?? "·"}/${j.instance}`}><code>{j.effect.name}</code>{j.entity !== null && <span className="bv-muted"> #{j.entity}</span>} <span className="bv-muted">{j.status}{j.phase ? ` · ${j.phase}` : ""}</span></li>)}{jobs.length === 0 && <li className="bv-muted">None.</li>}</ul>
+      <h3>Rounds</h3>
+      <ul className="bv-lab-changes">{[...sim.rounds].reverse().slice(0, 30).map((r) => { const d = r.delta as { entities?: Record<string, unknown>; resources?: Record<string, unknown> }; const n = Object.keys(d.entities ?? {}).length + Object.keys(d.resources ?? {}).length; return <li key={r.round}><b>round {r.round}</b> <span className="bv-muted">{(r.now / 1000).toFixed(1)} s · {n ? `${n} moved` : "quiet"}</span></li>; })}{sim.rounds.length === 0 && <li className="bv-muted">No round yet.</li>}</ul>
+      <h3>Log</h3>
+      <ul className="bv-lab-log">{sim.log.map((l, i) => <li key={i}>{l}</li>)}{sim.log.length === 0 && <li className="bv-muted">Quiet.</li>}</ul>
+    </div>
+  );
+}
+
+function BareState({ w }: { w: Replica<any> }) {
+  const all = w.all();
+  if (all.length === 0) return <p className="bv-muted">Nothing in the state.</p>;
+  return <div className="bv-state-list">{all.map((e) => <div key={e} className="bv-state-entity"><code>#{e}</code>{Object.entries(w.of(e)).map(([n, v]) => <span key={n} className="bv-state-part"><b>{n}</b>{v === true ? "" : <code>{JSON.stringify(v)}</code>}</span>)}</div>)}</div>;
+}
+
+const slug = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "played";
+export { asProgram };