sci2-ts 0.0.0-stage → 0.2.2

package/apps/viewer/src/explore/inspect.ts

@@ -0,0 +1,279 @@
+import { disassemble, formatDisassembly, type ClassInfo, type ObjectInfo, type PropValue } from "../../../../packages/sci/src/index.ts";
+import { editorLink, el, showValue, type Explorer } from "./context.ts";
+
+const link = (ex: Explorer, route: string, text: string) => el("a", { href: ex.href(route) }, text);
+const roomLink = (ex: Explorer, n: number) => {
+  const room = ex.index.rooms.find((r) => r.number === n);
+  return link(ex, `room/${n}`, room ? `${n} ${room.name}` : `${n}`);
+};
+const scriptLink = (ex: Explorer, n: number) =>
+  ex.index.rooms.some((r) => r.number === n) ? roomLink(ex, n) : link(ex, `script/${n}`, `script ${n}`);
+const classBySpecies = (ex: Explorer, species: number) => ex.index.classes.find((c) => c.species === species);
+const classLink = (ex: Explorer, species: number) => {
+  const c = classBySpecies(ex, species);
+  return c ? link(ex, `class/${c.species}`, c.name) : el("span", {}, `class ${species}`);
+};
+const objectLink = (ex: Explorer, o: ObjectInfo) => link(ex, `object/${o.script}/${o.offset}`, o.name);
+const prop = (o: { props: PropValue[] }, name: string) => o.props.find((p) => p.name === name)?.value;
+
+/** Root first. */
+function ancestry(ex: Explorer, species: number): ClassInfo[] {
+  const chain: ClassInfo[] = [];
+  for (let c = classBySpecies(ex, species); c && chain.length < 64; c = c.superclass < 0 ? undefined : classBySpecies(ex, c.superclass)) chain.unshift(c);
+  return chain;
+}
+
+const breadcrumb = (ex: Explorer, species: number) => {
+  const chain = ancestry(ex, species);
+  const out = el("p", { className: "meta" });
+  chain.forEach((c, i) => out.append(...(i ? [" → "] : []), link(ex, `class/${c.species}`, c.name)));
+  return out;
+};
+
+/** Lazily disassembled listing of a script, optionally only one object's methods. */
+function disassembly(ex: Explorer, script: number, title: string, owner?: number): HTMLElement {
+  const pre = el("pre", { className: "asm" }, "…");
+  const details = el("details", {}, el("summary", {}, title), pre);
+  details.addEventListener("toggle", async () => {
+    if (!details.open || pre.dataset.done) return;
+    pre.dataset.done = "1";
+    const s = await ex.world.script(script);
+    let fns = disassemble(s, ex.world.context());
+    if (owner !== undefined) fns = fns.filter((f) => f.owner?.offset === owner);
+    pre.textContent = formatDisassembly(s, fns);
+  }, { once: false });
+  return details;
+}
+
+/** Messages for one module, optionally only for some nouns; grouped by noun. */
+async function messageTable(ex: Explorer, module: number, nouns?: Set<number>, objects: ObjectInfo[] = []): Promise<HTMLElement | undefined> {
+  const file = await ex.messages(module);
+  if (!file) return undefined;
+  const records = file.records.filter((r) => !nouns || nouns.has(r.noun));
+  if (!records.length) return undefined;
+  const namesByNoun = new Map<number, string[]>();
+  for (const o of objects) {
+    const noun = prop(o, "noun");
+    if (noun) namesByNoun.set(noun, [...(namesByNoun.get(noun) ?? []), o.name]);
+  }
+  const verb = (v: number) => (v ? ex.index.verbs[v] ?? `verb ${v}` : "—");
+  const table = el("table", {}, el("tr", {}, el("th", {}, "noun"), el("th", {}, "verb"), el("th", {}, "cond"), el("th", {}, "seq"), el("th", {}, "text")));
+  for (const r of [...records].sort((a, b) => a.noun - b.noun || a.verb - b.verb || a.cond - b.cond || a.seq - b.seq)) {
+    const who = namesByNoun.get(r.noun)?.join(", ");
+    table.append(el("tr", {},
+      el("td", { className: "num", title: who ?? "" }, `${r.noun}${who ? ` ${who}` : ""}`),
+      el("td", { className: "num" }, verb(r.verb)),
+      el("td", { className: "num" }, `${r.cond}`),
+      el("td", { className: "num" }, `${r.seq}`),
+      el("td", {}, r.text || el("span", { className: "meta" }, "(empty)")),
+    ));
+  }
+  return el("details", { open: records.length <= 40 }, el("summary", {}, `Messages (${records.length})`), table);
+}
+
+/** The room picture with static object positions drawn on top. */
+async function roomPicture(ex: Explorer, picture: number, objects: ObjectInfo[]): Promise<{ element: HTMLElement; highlight(o?: ObjectInfo): void } | undefined> {
+  const canvas = await ex.pic(picture);
+  if (!canvas) return undefined;
+  const copy = el("canvas", { width: canvas.width, height: canvas.height });
+  copy.getContext("2d")!.drawImage(canvas, 0, 0);
+  const box = el("div", { className: "pic" }, copy);
+  box.style.aspectRatio = `${canvas.width} / ${canvas.height * 1.2}`;
+  const NS = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("viewBox", `0 0 ${canvas.width} ${canvas.height}`);
+  svg.setAttribute("preserveAspectRatio", "none");
+  const marks = new Map<ObjectInfo, SVGGElement>();
+  for (const o of objects) {
+    const [l = 0, t = 0, r = 0, b = 0] = ["nsLeft", "nsTop", "nsRight", "nsBottom"].map((n) => prop(o, n) ?? 0);
+    const x = prop(o, "x") ?? 0, y = prop(o, "y") ?? 0;
+    const g = document.createElementNS(NS, "g");
+    const title = document.createElementNS(NS, "title");
+    title.textContent = `${o.name} (${o.className})`;
+    g.append(title);
+    if (r > l && b > t && r < 0x8000) {
+      const rect = document.createElementNS(NS, "rect");
+      Object.entries({ x: l, y: t, width: r - l, height: b - t }).forEach(([k, v]) => rect.setAttribute(k, String(v)));
+      g.append(rect);
+    } else if ((x || y) && x < 0x8000 && y < 0x8000) {
+      const dot = document.createElementNS(NS, "circle");
+      Object.entries({ cx: x, cy: y, r: 2.5 }).forEach(([k, v]) => dot.setAttribute(k, String(v)));
+      g.append(dot);
+    } else continue;
+    const label = document.createElementNS(NS, "text");
+    label.setAttribute("x", String(r > l ? l + 2 : x + 4));
+    label.setAttribute("y", String(r > l ? t + 7 : y + 2));
+    label.textContent = o.name;
+    g.append(label);
+    svg.append(g);
+    marks.set(o, g);
+  }
+  box.append(svg);
+  return {
+    element: box,
+    highlight(o) {
+      for (const [obj, g] of marks) g.classList.toggle("hl", obj === o);
+    },
+  };
+}
+
+function exitList(ex: Explorer, room: number): HTMLElement {
+  const out = ex.index.exits.filter((e) => e.from === room);
+  const into = ex.index.exits.filter((e) => e.to === room);
+  const rows = (list: typeof out, other: (e: (typeof out)[number]) => number) => {
+    const table = el("table");
+    for (const e of [...list].sort((a, b) => other(a) - other(b))) {
+      table.append(el("tr", {},
+        el("td", {}, roomLink(ex, other(e))),
+        el("td", {}, el("span", { className: `kind ${e.kind}` }, e.kind)),
+        el("td", { className: "num" }, e.script === room ? e.where : el("span", {}, scriptLink(ex, e.script), ` ${e.where}`)),
+      ));
+    }
+    return list.length ? table : el("p", { className: "meta" }, "none found");
+  };
+  const unresolved = ex.index.unresolved.filter((e) => e.from === room);
+  return el("div", {},
+    el("h3", {}, `Leads to (${new Set(out.map((e) => e.to)).size})`), rows(out, (e) => e.to),
+    el("h3", {}, `Entered from (${new Set(into.map((e) => e.from)).size})`), rows(into, (e) => e.from),
+    unresolved.length ? el("p", { className: "meta" }, `Also ${unresolved.map((e) => `${e.where} = ${e.to}`).join(", ")}: not room numbers (maze codes or cut rooms).`) : null,
+  );
+}
+
+function objectTable(ex: Explorer, objects: ObjectInfo[], onHover?: (o?: ObjectInfo) => void): HTMLElement {
+  const table = el("table", {}, el("tr", {}, el("th", {}, "object"), el("th", {}, "class"), el("th", {}, "noun"), el("th", {}, "methods")));
+  for (const o of objects) {
+    const row = el("tr", {},
+      el("td", {}, objectLink(ex, o)),
+      el("td", {}, classLink(ex, o.superclass)),
+      el("td", { className: "num" }, `${prop(o, "noun") || ""}`),
+      el("td", { className: "num" }, o.methods.join(" ")),
+    );
+    if (onHover) {
+      row.addEventListener("mouseenter", () => { row.classList.add("hl"); onHover(o); });
+      row.addEventListener("mouseleave", () => { row.classList.remove("hl"); onHover(undefined); });
+    }
+    table.append(row);
+  }
+  return table;
+}
+
+export async function renderRoom(ex: Explorer, n: number): Promise<HTMLElement> {
+  const room = ex.index.rooms.find((r) => r.number === n);
+  const info = ex.index.scripts.find((s) => s.number === n);
+  if (!room || !info) return el("p", { className: "error" }, `No room ${n}`);
+  const helpers = room.uses.filter((u) => !ex.index.rooms.some((r) => r.number === u));
+  const helperObjects = ex.index.scripts.filter((s) => helpers.includes(s.number) && s.number >= 100).flatMap((s) => s.objects);
+  const pic = room.picture >= 0 ? await roomPicture(ex, room.picture, info.objects) : undefined;
+
+  const roomObject = info.objects.find((o) => o.name === room.name)!;
+  const messages = await messageTable(ex, n, undefined, [...info.objects, ...helperObjects]);
+  return el("div", {},
+    el("h2", {}, `Room ${n} · ${room.name} `, editorLink(n, ex.mods)),
+    breadcrumb(ex, roomObject.superclass),
+    el("p", { className: "meta" }, `picture ${room.picture} · noun ${room.noun} · ${info.objects.length} objects`),
+    room.uses.length ? el("div", { className: "chips" }, el("span", { className: "meta" }, "uses"), ...room.uses.map((u) => scriptLink(ex, u))) : null,
+    pic?.element,
+    exitList(ex, n),
+    el("h3", {}, `Objects (${info.objects.length})`),
+    el("p", { className: "meta" }, "Boxes and dots are positions set in the object's declaration; objects placed by code at run time don't show."),
+    objectTable(ex, info.objects, pic?.highlight),
+    messages ?? el("p", { className: "meta" }, "No messages."),
+    disassembly(ex, n, "Disassembly"),
+  );
+}
+
+export async function renderScript(ex: Explorer, n: number): Promise<HTMLElement> {
+  const info = ex.index.scripts.find((s) => s.number === n);
+  if (!info) return el("p", { className: "error" }, `No script ${n}`);
+  const users = ex.index.scripts.filter((s) => s.references.includes(n)).map((s) => s.number);
+  const classes = ex.index.classes.filter((c) => c.script === n);
+  const messages = await messageTable(ex, n, undefined, info.objects);
+  return el("div", {},
+    el("h2", {}, `Script ${n}`),
+    users.length ? el("div", { className: "chips" }, el("span", { className: "meta" }, "used by"), ...users.map((u) => scriptLink(ex, u))) : null,
+    info.references.length ? el("div", { className: "chips" }, el("span", { className: "meta" }, "uses"), ...info.references.map((u) => scriptLink(ex, u))) : null,
+    classes.length ? el("div", {}, el("h3", {}, `Classes (${classes.length})`), el("div", { className: "chips" }, ...classes.map((c) => classLink(ex, c.species)))) : null,
+    el("h3", {}, `Objects (${info.objects.length})`),
+    objectTable(ex, info.objects),
+    messages,
+    disassembly(ex, n, "Disassembly"),
+  );
+}
+
+/** Props with where each value comes from: the class's default or this object's own. */
+function propTable(props: PropValue[], defaults: PropValue[] | undefined): HTMLElement {
+  const table = el("table", {}, el("tr", {}, el("th", {}, "property"), el("th", {}, "value"), el("th", {}, defaults ? "class default" : "")));
+  for (const p of props) {
+    const d = defaults?.find((x) => x.name === p.name);
+    const changed = !!d && d.value !== p.value;
+    const isNew = defaults && !d;
+    table.append(el("tr", {},
+      el("td", { className: changed || isNew ? "prop-changed" : "prop-inherited" }, p.name),
+      el("td", { className: changed || isNew ? "prop-changed" : "" }, showValue(p.value)),
+      el("td", { className: "num" }, d ? showValue(d.value) : isNew ? "new" : ""),
+    ));
+  }
+  return table;
+}
+
+/** Each method name with the nearest ancestor that also defines it (so this overrides it). */
+function methodList(ex: Explorer, methods: string[], superclass: number): HTMLElement {
+  const chain = superclass < 0 ? [] : ancestry(ex, superclass).reverse();
+  const list = el("div", { className: "chips" });
+  for (const m of methods) {
+    const from = chain.find((c) => c.methods.includes(m));
+    list.append(el("span", { title: from ? `overrides ${from.name}::${m}` : "new" }, from ? `${m}` : el("strong", {}, m)));
+  }
+  return methods.length ? list : el("p", { className: "meta" }, "none");
+}
+
+export async function renderObject(ex: Explorer, script: number, offset: number): Promise<HTMLElement> {
+  const o = ex.object(script, offset);
+  if (!o) return el("p", { className: "error" }, "No such object");
+  const cls = classBySpecies(ex, o.superclass);
+  const noun = prop(o, "noun");
+  const siblings = ex.index.scripts.find((s) => s.number === script)?.objects ?? [];
+  const messages = noun ? await messageTable(ex, script, new Set([noun]), siblings) : undefined;
+  return el("div", {},
+    el("h2", {}, o.name),
+    el("p", { className: "meta" }, "instance in ", scriptLink(ex, script)),
+    breadcrumb(ex, o.superclass),
+    el("h3", {}, "Methods (bold = new, others override the class)"),
+    methodList(ex, o.methods, o.superclass),
+    messages ?? null,
+    el("h3", {}, "Properties"),
+    propTable(o.props, cls?.props),
+    disassembly(ex, script, "Disassembly of its methods", offset),
+  );
+}
+
+export function renderClass(ex: Explorer, species: number): HTMLElement {
+  const c = classBySpecies(ex, species);
+  if (!c) return el("p", { className: "error" }, `No class ${species}`);
+  const sup = c.superclass < 0 ? undefined : classBySpecies(ex, c.superclass);
+  const subclasses = ex.index.classes.filter((x) => x.superclass === species);
+  const instances = ex.index.scripts.flatMap((s) => s.objects.filter((o) => o.superclass === species));
+  const inherited = ancestry(ex, species).slice(0, -1).reverse();
+  const shown = instances.slice(0, 300);
+  return el("div", {},
+    el("h2", {}, c.name),
+    el("p", { className: "meta" }, `class #${c.species} in `, scriptLink(ex, c.script)),
+    breadcrumb(ex, species),
+    subclasses.length ? el("div", {}, el("h3", {}, `Subclasses (${subclasses.length})`), el("div", { className: "chips" }, ...subclasses.map((s) => classLink(ex, s.species)))) : null,
+    el("h3", {}, "Methods (bold = new, others override an ancestor)"),
+    methodList(ex, c.methods, c.superclass),
+    inherited.length ? el("details", {}, el("summary", { className: "meta" }, "Inherited methods"),
+      ...inherited.map((a) => el("p", {}, link(ex, `class/${a.species}`, a.name), el("span", { className: "meta" }, `: ${a.methods.filter((m) => !c.methods.includes(m)).join(" ")}`)))) : null,
+    el("h3", {}, "Properties"),
+    propTable(c.props, sup?.props),
+    el("h3", {}, `Direct instances (${instances.length})`),
+    instances.length ? el("div", { className: "chips" }, ...shown.map((o) => el("a", { href: ex.href(`object/${o.script}/${o.offset}`), title: `script ${o.script}` }, `${o.name}`))) : el("p", { className: "meta" }, "none"),
+    instances.length > shown.length ? el("p", { className: "meta" }, `…and ${instances.length - shown.length} more`) : null,
+    disassembly(ex, c.script, "Disassembly of its methods", ex.index.scripts.length ? classOffset(ex, c) : undefined),
+  );
+}
+
+/** Classes aren't in `scripts[].objects` (instances only): find the heap offset from the world. */
+function classOffset(ex: Explorer, c: ClassInfo): number | undefined {
+  return ex.world.classObject(c.species)?.offset;
+}

package/apps/viewer/src/explore/live.d.ts

@@ -0,0 +1,22 @@
+import { type Explorer } from "./context.ts";
+/**
+ * The live view: the game running in the explorer, with overlays of what the interpreter
+ * knows (sprites, clickable features, walk polygons, paths) and inspectors that follow
+ * objects' properties as they change.
+ */
+export interface LiveView {
+    element: HTMLElement;
+    /** Starts the game on first use; resumes if the view paused it on leaving. */
+    activate(): Promise<void>;
+    /** Pauses the game (and its audio) while another tab is shown. */
+    deactivate(): void;
+    /** Inspector panel for the running room, refreshed while shown. */
+    roomPanel(): LivePanel;
+    /** Inspector panel for one live object by address. */
+    objectPanel(address: number): LivePanel;
+}
+export interface LivePanel {
+    element: HTMLElement;
+    refresh(): void;
+}
+export declare function createLiveView(ex: Explorer, inspect: (address: number) => void): LiveView;

package/apps/viewer/src/explore/live.js

@@ -0,0 +1,318 @@
+import { collectionElements, drawnItems, findMessage, gameGlobal, isKindOf, namedObject, objectAt, ResourceType, heroInPlay, polygonOf, requestRoom, roomPlane, signedProp, } from "../../../../packages/sci/src/index.js";
+import { createOverlay, drawRoomOverlay } from "../overlay.js";
+import { GameSession } from "../session.js";
+import { editorUrl, el, showValue } from "./context.js";
+// --- The view -------------------------------------------------------------------------
+export function createLiveView(ex, inspect) {
+    const canvas = el("canvas", { width: 320, height: 200 });
+    const overlay = createOverlay();
+    const screen = el("div", { className: "live-screen" }, canvas);
+    screen.append(overlay);
+    const toggles = {
+        sprites: toggle("Sprites", true),
+        features: toggle("Features", false),
+        polygons: toggle("Polygons", true, "Walk polygons: green total access, yellow near point, red barred, blue contained"),
+        paths: toggle("Paths", true),
+    };
+    const inspectMode = toggle("Inspect clicks", false);
+    const pauseButton = el("button", { type: "button" }, "Pause");
+    const stepButton = el("button", { type: "button", disabled: true }, "Step");
+    const soundButton = el("button", { type: "button" }, "Sound: off");
+    const snapButton = el("button", { type: "button" }, "Snapshot");
+    const restoreButton = el("button", { type: "button", disabled: true }, "Restore");
+    const info = el("span", { className: "meta" }, "Starting…");
+    // Jump to any room once a hero is in play (the game changes rooms itself: global 13).
+    const roomInput = el("input", { type: "number", placeholder: "room", min: "1", max: "999" });
+    roomInput.style.width = "5.5em";
+    const goButton = el("button", { type: "button", title: "Rooms may expect story state (flags, items); ?debug adds Sierra's debug keys" }, "Teleport");
+    goButton.addEventListener("click", () => {
+        const room = Number(roomInput.value);
+        if (!session || !room)
+            return;
+        if (!heroInPlay(session.vm))
+            info.textContent = "Create a hero (or restore a save) first";
+        else if (!ex.rm.has({ type: ResourceType.Script, number: room }))
+            info.textContent = `No room ${room}`;
+        else
+            requestRoom(session.vm, room);
+    });
+    // The room the game is in, in the room editor (when a mod describes it in YAML).
+    const editLink = el("a", { className: "edit-link", target: "_blank", hidden: true, title: "Open this room in the room editor" });
+    let editRoom;
+    const errorBox = el("pre", { className: "error", hidden: true });
+    const element = el("div", { className: "live" }, el("div", { className: "live-bar" }, pauseButton, stepButton, soundButton, snapButton, restoreButton, roomInput, goButton, info, editLink), el("div", { className: "live-bar" }, ...Object.values(toggles).map((t) => t.label), inspectMode.label, el("span", { className: "meta" }, "Alt+click also inspects")), screen, errorBox);
+    let session;
+    let starting;
+    let pausedByTab = false;
+    /** The object shown in the inspector, outlined on the overlay. */
+    let selected;
+    let quickSave;
+    const log = [];
+    const rooms = [];
+    function toggle(name, on, title = "") {
+        const input = el("input", { type: "checkbox", checked: on });
+        return { input, label: el("label", { title }, input, ` ${name}`) };
+    }
+    const setPaused = (paused) => {
+        if (!session)
+            return;
+        session.paused = paused;
+        pauseButton.textContent = paused ? "Resume" : "Pause";
+        stepButton.disabled = !paused;
+    };
+    pauseButton.addEventListener("click", () => setPaused(!session?.paused));
+    stepButton.addEventListener("click", () => session?.step(1));
+    soundButton.addEventListener("click", () => {
+        if (!session)
+            return;
+        session.setMuted(!session.muted);
+        soundButton.textContent = session.muted ? "Sound: off" : "Sound: on";
+    });
+    snapButton.addEventListener("click", () => {
+        if (!session)
+            return;
+        quickSave = session.snapshot();
+        restoreButton.disabled = false;
+        restoreButton.title = `Snapshot from room ${gameGlobal(session.vm, "curRoomNum")}, frame ${session.frames}`;
+    });
+    restoreButton.addEventListener("click", () => quickSave && session?.restore(quickSave));
+    /** What's under a screen point: the frontmost sprite, else a feature of the room. */
+    function hitTest(x, y) {
+        const vm = session.vm;
+        const hit = drawnItems(vm).find((d) => x >= d.x && x < d.x + d.w && y >= d.y && y < d.y + d.h);
+        if (hit)
+            return hit.item;
+        const plane = roomPlane(vm);
+        if (!plane)
+            return undefined;
+        const px = x - plane.left, py = y - plane.top;
+        return collectionElements(vm, namedObject(vm, "features")).find((f) => {
+            const check = objectAt(vm, vm.getProp(f, "onMeCheck"));
+            if (check && isKindOf(vm, check, "Polygon"))
+                return pointInPolygon(px, py, polygonOf(vm, check).points);
+            const [l, t, r, b] = ["nsLeft", "nsTop", "nsRight", "nsBottom"].map((n) => signedProp(vm, f, n));
+            return r > l && px >= l && px <= r && py >= t && py <= b;
+        });
+    }
+    function drawOverlay() {
+        if (!session)
+            return;
+        drawRoomOverlay(overlay, session.vm, {
+            sprites: toggles.sprites.input.checked,
+            features: toggles.features.input.checked,
+            polygons: toggles.polygons.input.checked,
+            paths: toggles.paths.input.checked,
+            selected,
+        });
+    }
+    let lastInfo = 0;
+    async function start() {
+        session = await GameSession.create({
+            canvas,
+            rm: ex.rm,
+            mods: ex.mods,
+            muted: true,
+            runHidden: new URLSearchParams(location.search).has("background"),
+            debug: new URLSearchParams(location.search).has("debug"),
+            interceptClick: (x, y, e) => {
+                if (!inspectMode.input.checked && !e.altKey)
+                    return false;
+                const hit = hitTest(x, y);
+                if (hit)
+                    inspect(hit.address);
+                return true;
+            },
+        });
+        const vm = session.vm;
+        // Log what the game says: messages fetched by a Messager (`nextMsg`), not every UI label.
+        let saying = false;
+        vm.onSend = (_object, selector) => {
+            if (selector === "nextMsg")
+                saying = true;
+        };
+        vm.onKernelCall = (name, args) => {
+            if (name === "Message" && args[0] === 0 && args.length === 7 && saying) {
+                saying = false;
+                const [, module = 0, noun = 0, verb = 0, cond = 0, seq = 0] = args;
+                const frame = session.frames;
+                void ex.messages(module).then((file) => {
+                    const text = (file && findMessage(file, { noun, verb, cond, seq })?.text) || `${module}/${noun}/${verb}/${cond}/${seq}`;
+                    log.push({ frame, text });
+                    if (log.length > 30)
+                        log.shift();
+                });
+            }
+        };
+        session.onDraw.push(() => {
+            if (session.error) {
+                errorBox.hidden = false;
+                errorBox.textContent = `${session.error.message}\n${session.error.backtrace.map((l) => `  at ${l}`).join("\n")}`;
+            }
+            const room = gameGlobal(vm, "curRoomNum") ?? 0;
+            if (room && rooms.at(-1)?.room !== room)
+                rooms.push({ frame: session.frames, room });
+            drawOverlay();
+            const now = performance.now();
+            if (now - lastInfo > 500) {
+                lastInfo = now;
+                info.textContent = `room ${room} · frame ${session.frames} · ${session.paused ? "paused" : `${session.fps} fps`}`;
+                if (room !== editRoom) {
+                    editRoom = room;
+                    editLink.hidden = true;
+                    if (room) {
+                        void editorUrl(room, ex.mods).then((url) => {
+                            if (!url || editRoom !== room)
+                                return;
+                            editLink.href = url;
+                            editLink.textContent = `Edit room ${room}`;
+                            editLink.hidden = false;
+                        });
+                    }
+                }
+                if (activePanel?.element.isConnected)
+                    activePanel.refresh();
+            }
+        });
+        // Automated testing (?background) can reach the session from the console.
+        if (new URLSearchParams(location.search).has("background"))
+            globalThis.liveSession = session;
+        session.start();
+    }
+    let activePanel;
+    const track = (panel) => {
+        activePanel = panel;
+        panel.refresh();
+        return panel;
+    };
+    return {
+        element,
+        async activate() {
+            await (starting ??= start());
+            if (pausedByTab)
+                setPaused(false);
+            pausedByTab = false;
+        },
+        deactivate() {
+            if (session && !session.paused) {
+                setPaused(true);
+                pausedByTab = true;
+            }
+        },
+        roomPanel: () => {
+            selected = undefined;
+            return track(roomPanel(ex, () => session, log, rooms));
+        },
+        objectPanel: (address) => {
+            selected = address;
+            return track(objectPanel(ex, () => session, address));
+        },
+    };
+}
+function pointInPolygon(x, y, points) {
+    let inside = false;
+    for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
+        const [xi, yi] = points[i], [xj, yj] = points[j];
+        if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi)
+            inside = !inside;
+    }
+    return inside;
+}
+// --- Inspector panels ---------------------------------------------------------------
+const liveHref = (ex, o) => ex.href(`live/${o.address.toString(16)}`);
+const liveLink = (ex, o) => (o ? el("a", { href: liveHref(ex, o) }, o.name) : el("span", { className: "meta" }, "—"));
+/** Where an object is defined, for a link to the static inspector. */
+function staticRoute(o) {
+    if (o.isClass)
+        return `class/${o.species}`;
+    const def = o.isClone && o.template ? o.template : o;
+    return def.isClass ? `class/${def.species}` : `object/${def.script.number}/${def.address & 0xffff}`;
+}
+function roomPanel(ex, getSession, log, rooms) {
+    const element = el("div", {}, el("p", { className: "meta" }, "Starting the game…"));
+    return {
+        element,
+        refresh() {
+            const session = getSession();
+            if (!session)
+                return;
+            const vm = session.vm;
+            const room = objectAt(vm, gameGlobal(vm, "curRoom"));
+            const roomNum = gameGlobal(vm, "curRoomNum") ?? 0;
+            const ego = objectAt(vm, gameGlobal(vm, "ego"));
+            const scriptState = (o) => {
+                const s = objectAt(vm, vm.getProp(o, "script"));
+                return s ? el("span", {}, liveLink(ex, s), el("span", { className: "meta" }, ` state ${signedProp(vm, s, "state")}`)) : "";
+            };
+            const table = (list, extra) => {
+                const t = el("table");
+                for (const o of list)
+                    t.append(el("tr", {}, el("td", {}, liveLink(ex, o)), ...extra(o).map((c) => el("td", { className: "num" }, c))));
+                return list.length ? t : el("p", { className: "meta" }, "none");
+            };
+            const cast = collectionElements(vm, namedObject(vm, "cast"));
+            const features = collectionElements(vm, namedObject(vm, "features"));
+            const regions = collectionElements(vm, namedObject(vm, "regions"));
+            element.replaceChildren(el("h2", {}, `Live: room ${roomNum}`), el("p", { className: "meta" }, room ? liveLink(ex, room) : "", " · ", el("a", { href: ex.href(`room/${roomNum}`) }, "static view"), room ? el("span", {}, " · script ", scriptState(room)) : ""), ego ? el("p", {}, "ego ", liveLink(ex, ego), el("span", { className: "meta" }, ` at ${signedProp(vm, ego, "x")},${signedProp(vm, ego, "y")} · view ${signedProp(vm, ego, "view")} loop ${signedProp(vm, ego, "loop")} cel ${signedProp(vm, ego, "cel")} `), scriptState(ego)) : "", el("h3", {}, `Cast (${cast.length})`), table(cast, (o) => [`${signedProp(vm, o, "x")},${signedProp(vm, o, "y")}`, `view ${signedProp(vm, o, "view")}`, scriptState(o)]), el("h3", {}, `Features (${features.length})`), table(features, (o) => [`noun ${signedProp(vm, o, "noun")}`]), el("h3", {}, `Regions (${regions.length})`), table(regions, (o) => [scriptState(o)]), el("h3", {}, "Messages"), log.length ? el("div", {}, ...[...log].reverse().map((m) => el("p", {}, el("span", { className: "meta" }, `${m.frame} `), m.text))) : el("p", { className: "meta" }, "none yet"), el("h3", {}, "Rooms visited"), el("div", { className: "chips" }, ...rooms.map((r) => el("a", { href: ex.href(`room/${r.room}`), title: `frame ${r.frame}` }, `${r.room}`))));
+        },
+    };
+}
+/** Objects' header slots come first; the name pointer is the last of them. */
+const NAME_SLOT = 8;
+function objectPanel(ex, getSession, address) {
+    const element = el("div", {}, el("p", { className: "meta" }, "Starting the game…"));
+    const cells = new Map();
+    const values = new Map();
+    let built;
+    const render = (vm, v) => {
+        const o = v && v < 0x10000 ? undefined : objectAt(vm, v);
+        if (o)
+            return liveLink(ex, o);
+        return showValue(v & 0xffff);
+    };
+    return {
+        element,
+        refresh() {
+            const session = getSession();
+            if (!session)
+                return;
+            const vm = session.vm;
+            const o = objectAt(vm, address);
+            if (!o) {
+                element.replaceChildren(el("h2", {}, "Gone"), el("p", { className: "meta" }, `Object ${address.toString(16)} no longer exists (disposed, or the room changed).`));
+                built = undefined;
+                return;
+            }
+            if (built !== o) {
+                built = o;
+                cells.clear();
+                values.clear();
+                // By slot: some properties have no selector name in the vocabulary.
+                const props = [...o.propIndex].sort((a, b) => a[1] - b[1]).map(([sel, slot]) => ({ name: vm.selectors[sel] ?? `sel_${sel}`, slot }));
+                const table = el("table");
+                for (const { name, slot } of props) {
+                    // Header slots (-objID-, -size-, dictionaries...) aren't interesting; `name` is shown as text.
+                    if (slot < NAME_SLOT || name.startsWith("-"))
+                        continue;
+                    const cell = el("td");
+                    cells.set(slot, cell);
+                    table.append(el("tr", {}, el("td", { className: "num" }, name), cell));
+                }
+                const cls = vm.classObject(o.isClass ? o.species : o.superclass);
+                element.replaceChildren(el("h2", {}, o.name), el("p", { className: "meta" }, o.isClone ? "clone" : o.isClass ? "class" : "instance", " of ", cls ? el("a", { href: ex.href(`class/${cls.species}`) }, cls.name) : "?", " · ", el("a", { href: ex.href(staticRoute(o)) }, "definition"), ` · address ${o.address.toString(16)}`), el("p", { className: "meta" }, "Values update live; changes flash."), table);
+            }
+            for (const [slot, cell] of cells) {
+                const v = o.vars[slot] ?? 0;
+                if (values.get(slot) === v)
+                    continue;
+                const first = !values.has(slot);
+                values.set(slot, v);
+                cell.replaceChildren(slot === NAME_SLOT ? o.name : render(vm, v));
+                if (!first) {
+                    cell.classList.remove("flash");
+                    void cell.offsetWidth; // restart the animation
+                    cell.classList.add("flash");
+                }
+            }
+        },
+    };
+}