@downdraft/engine 0.2.0 → 0.3.0

package/dist/libraries/devtools/src/backend.js

@@ -44,6 +44,12 @@ export class DevtoolsBackend {
     providers = new Map();
     commandHandlers = new Map();
     globalCommandHandler = null;
+    /** Dynamically-allocated slots for provider names outside the fixed PANEL
+     *  table — panelSlot() alone collapsed every unknown name onto slot 0
+     *  ("console"), so a second game provider silently replaced the first. */
+    dynSlots = new Map();
+    dynSlotNames = new Map();
+    nextDynSlot = 100;
     lastProviderPush = new Map();
     providerIntervalMs = 1500;
     /** When non-null, the cadence loop only auto-refreshes this provider
@@ -178,37 +184,57 @@ export class DevtoolsBackend {
         this.emit("console.clear", {});
     }
     // ── Providers / commands ──
+    /** Resolve a panel id to its slot. Names outside the fixed PANEL table
+     *  get a stable dynamically-allocated slot so bespoke game providers can
+     *  coexist instead of colliding on slot 0. */
+    slotFor(panel) {
+        if (typeof panel === "number")
+            return panel;
+        const fixed = PANEL[panel];
+        if (fixed !== undefined)
+            return fixed;
+        let s = this.dynSlots.get(panel);
+        if (s === undefined) {
+            s = this.nextDynSlot++;
+            this.dynSlots.set(panel, s);
+            this.dynSlotNames.set(s, panel);
+        }
+        return s;
+    }
+    nameFor(slot) {
+        return this.dynSlotNames.get(slot) ?? slotName(slot);
+    }
     registerProvider(panel, collect) {
-        this.providers.set(panelSlot(panel), collect);
+        this.providers.set(this.slotFor(panel), collect);
     }
     registerCommandHandler(panel, handler) {
         if (panel === "*") {
             this.globalCommandHandler = handler;
         }
         else {
-            this.commandHandlers.set(panelSlot(panel), handler);
+            this.commandHandlers.set(this.slotFor(panel), handler);
         }
     }
     /** Registered provider slots — the dynamic tab list for frontends. */
     providerSlots() {
-        return [...this.providers.keys()].map((slot) => ({ slot, name: slotName(slot) }));
+        return [...this.providers.keys()].map((slot) => ({ slot, name: this.nameFor(slot) }));
     }
     /** Collect + emit one provider's snapshot immediately. */
     refreshPanel(panel) {
         const trace = [performance.now()];
-        const slot = panelSlot(panel);
+        const slot = this.slotFor(panel);
         trace.push(performance.now());
         const collect = this.providers.get(slot);
         if (!collect)
             return;
         const push = (snap) => {
             if (snap)
-                this.emit("snapshot", { panel: slotName(slot), slot, snap });
+                this.emit("snapshot", { panel: this.nameFor(slot), slot, snap });
             this.lastProviderPush.set(slot, performance.now());
         };
         const fail = (err) => {
             this.emit("snapshot", {
-                panel: slotName(slot), slot,
+                panel: this.nameFor(slot), slot,
                 snap: { status: "error", statusMsg: String(err), sections: [] },
             });
             this.lastProviderPush.set(slot, performance.now());
@@ -231,7 +257,7 @@ export class DevtoolsBackend {
         const total = trace[4] - trace[0];
         if (total > 10) {
             const seg = `pre=${(trace[2] - trace[0]).toFixed(1)} collect=${(trace[3] - trace[2]).toFixed(1)} emit=${(trace[4] - trace[3]).toFixed(1)}`;
-            this.diagWarn(`slow provider ${slotName(slot)}: ${total.toFixed(1)}ms [${seg}]`);
+            this.diagWarn(`slow provider ${this.nameFor(slot)}: ${total.toFixed(1)}ms [${seg}]`);
         }
     }
     dispatchCommand(cmd) {
@@ -374,7 +400,7 @@ export class DevtoolsBackend {
                 return collectThreads(this.ctx, [...this.threadEvals.keys()]);
             case "snapshot": {
                 const panel = params.panel;
-                const slot = typeof panel === "number" ? panel : panelSlot(panel);
+                const slot = typeof panel === "number" ? panel : this.slotFor(String(panel));
                 const collect = this.providers.get(slot);
                 if (!collect)
                     return { status: "unsupported", statusMsg: `no provider for ${String(panel)}`, sections: [] };
@@ -388,7 +414,7 @@ export class DevtoolsBackend {
             }
             case "command": {
                 const panel = params.panel;
-                const slot = typeof panel === "number" ? panel : panelSlot(panel ?? "console");
+                const slot = typeof panel === "number" ? panel : this.slotFor(String(panel ?? "console"));
                 this.dispatchCommand({ panel: slot, action: String(params.action ?? ""), payload: String(params.payload ?? "") });
                 return true;
             }

package/dist/libraries/devtools/src/collectors.js

@@ -72,31 +72,81 @@ export async function collectThreads(ctx, evalThreadIds) {
     });
     return threads;
 }
-/** Scene-graph tree (label + ctor + child counts). */
+function sceneInspectorApi() {
+    const g = globalThis;
+    return (g.window?.__sceneInspector ?? g.__sceneInspector ?? null);
+}
+/** Scene-graph tree (label + ctor + child counts). Prefers a live
+ *  `gameScene.stage` walk; falls back to the SceneInspector's scene store
+ *  (`__sceneInspector.getSceneTree`) so games without a DOM-like stage still
+ *  get a populated tree — with stable nodeIds for pick/details. */
 export function collectSceneTree(ctx) {
     const stage = ctx.gameScene?.stage;
-    if (!stage)
+    if (stage) {
+        const nodes = [];
+        let idCounter = 1;
+        const collect = (node, parentId, depth) => {
+            const id = idCounter++;
+            // Prefer `label` (some scene-graph hosts warn on `name` access); fall
+            // back to `name` for hosts that only set that.
+            const nodeLabel = typeof node.label === "string" ? node.label
+                : typeof node.name === "string" ? node.name : "";
+            const ctorName = node.constructor?.name ?? "Node";
+            nodes.push({
+                id, parentId, depth,
+                childCount: node.children?.length ?? 0,
+                kind: 0,
+                label: nodeLabel || ctorName,
+                detail: nodeLabel ? ctorName : "",
+                nodeId: typeof node.id === "string" ? node.id : undefined,
+            });
+            node.children?.forEach((child) => collect(child, id, depth + 1));
+        };
+        collect(stage, -1, 0);
+        return nodes;
+    }
+    // Scene-store fallback — the same snapshot the inspector's getSceneTree
+    // exposes. Nodes are flat with id/parentId links; walk roots → children.
+    try {
+        const snap = sceneInspectorApi()?.getSceneTree?.();
+        const storeNodes = snap?.nodes;
+        if (!Array.isArray(storeNodes) || !storeNodes.length)
+            return [];
+        const byId = new Map(storeNodes.map((n) => [n.id, n]));
+        const roots = storeNodes.filter((n) => n.parentId === null || !byId.has(n.parentId));
+        const rows = [];
+        const visited = new Set();
+        let idCounter = 1;
+        const walk = (n, parentId, depth) => {
+            if (visited.has(n.id))
+                return; // corrupted parent/child links — don't loop
+            visited.add(n.id);
+            const id = idCounter++;
+            const p = n.position;
+            rows.push({
+                id, parentId, depth,
+                childCount: n.children?.length ?? 0,
+                kind: 0,
+                label: String(n.name ?? n.id),
+                detail: `${n.type ?? "node"}${Array.isArray(p) ? ` (${p.map((v) => (+v).toFixed(1)).join(", ")})` : ""}`,
+                nodeId: String(n.id),
+            });
+            for (const cid of n.children ?? []) {
+                const c = byId.get(cid);
+                if (c)
+                    walk(c, id, depth + 1);
+            }
+        };
+        roots.forEach((n) => walk(n, -1, 0));
+        // Orphans (every node has a parent but no root resolves) — still show them.
+        for (const n of storeNodes)
+            if (!visited.has(n.id))
+                walk(n, -1, 0);
+        return rows;
+    }
+    catch {
         return [];
-    const nodes = [];
-    let idCounter = 1;
-    const collect = (node, parentId, depth) => {
-        const id = idCounter++;
-        // Prefer `label` (some scene-graph hosts warn on `name` access); fall
-        // back to `name` for hosts that only set that.
-        const nodeLabel = typeof node.label === "string" ? node.label
-            : typeof node.name === "string" ? node.name : "";
-        const ctorName = node.constructor?.name ?? "Node";
-        nodes.push({
-            id, parentId, depth,
-            childCount: node.children?.length ?? 0,
-            kind: 0,
-            label: nodeLabel || ctorName,
-            detail: nodeLabel ? ctorName : "",
-        });
-        node.children?.forEach((child) => collect(child, id, depth + 1));
-    };
-    collect(stage, -1, 0);
-    return nodes;
+    }
 }
 /** DOM tree: scene-graph stage or ECS entities depending on mode. */
 export function collectDomTree(ctx, mode) {
@@ -122,6 +172,7 @@ export function collectDomTree(ctx, mode) {
                 id, parentId: -1, depth: 0, childCount: 0, kind: 1,
                 label: `Entity ${ent.idx}`,
                 detail: `type=${entityType} pos=(${x.toFixed(1)},${y.toFixed(1)},${z.toFixed(1)})`,
+                nodeId: `ent-${ent.idx}`,
             });
         });
     }

package/dist/modules/devtools/src/blitz/fonts.js

@@ -0,0 +1,75 @@
+// ============================================================================
+// fonts.ts — bind the host's real system fonts into the devtools dock doc.
+//
+// The OSR rasterizer ships a single embedded DejaVu Sans as the fallback for
+// every generic family — legible, but `monospace` resolves to it too, so the
+// console/REPL/tree read as proportional sans. Same fix as cruiser's
+// libraries/app-shell/fonts.ts: resolve the user's actual sans + mono faces
+// via fontconfig (fc-match -f %{file}), register them as `ui://` blobs on the
+// HtmlUiHost before mount, and emit @font-face rules the dock stylesheet
+// binds ahead of the generic fallbacks. Any failure (no fc-match, non-Linux
+// host, unreadable file) leaves the embedded fallback in place.
+// ============================================================================
+import { execFileSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+// Blitz-dom only fetches a @font-face source whose format is detectable —
+// either an explicit format() hint or a file extension on the url — so the
+// urls carry the resolved file's real extension.
+const FACES = [
+    { family: "DevTools Sans", pattern: "sans-serif", urlName: "sans", weight: 400 },
+    { family: "DevTools Sans", pattern: "sans-serif:weight=bold", urlName: "sans-bold", weight: 700 },
+    { family: "DevTools Mono", pattern: "monospace", urlName: "mono", weight: 400 },
+    { family: "DevTools Mono", pattern: "monospace:weight=bold", urlName: "mono-bold", weight: 700 },
+];
+/** `fc-match -f %{file}` for a fontconfig pattern; null when fc-match is
+ *  absent or the match isn't a font file Blitz can load. */
+function fcFontFile(pattern) {
+    try {
+        const p = execFileSync("fc-match", ["-f", "%{file}", pattern], { timeout: 5000 }).toString().trim();
+        return /\.(ttf|otf|woff2?)$/i.test(p) ? p : null;
+    }
+    catch {
+        return null;
+    }
+}
+function fontExt(path) {
+    return path.match(/\.(ttf|otf|woff2?)$/i)?.[0] ?? ".ttf";
+}
+/**
+ * Register system sans + mono faces as `ui://` resources and return the
+ * @font-face CSS to prepend to the dock stylesheet. Returns "" when nothing
+ * registered — the stylesheet's named families then fail to resolve and the
+ * generic fallbacks (embedded DejaVu) apply.
+ *
+ * Call before mount — the doc backend applies resources synchronously and in
+ * order, so the first doc resolve sees them.
+ */
+export function registerDevtoolsFonts(sink) {
+    try {
+        // Both weights of a family are required: a 700 rule pointing at the
+        // regular file keeps bold text in-family instead of falling back.
+        const files = new Map();
+        for (const f of FACES)
+            files.set(f.urlName, fcFontFile(f.pattern) ?? "");
+        if (!files.get("sans"))
+            return "";
+        if (!files.get("mono"))
+            files.set("mono", files.get("sans"));
+        if (!files.get("sans-bold"))
+            files.set("sans-bold", files.get("sans"));
+        if (!files.get("mono-bold"))
+            files.set("mono-bold", files.get("mono"));
+        let css = "";
+        for (const f of FACES) {
+            const file = files.get(f.urlName);
+            const url = `ui://devtools-fonts/${f.urlName}${fontExt(file)}`;
+            sink.registerResource(url, readFileSync(file));
+            css += `@font-face { font-family:'${f.family}'; font-weight:${f.weight}; src:url('${url}'); }\n`;
+        }
+        return css;
+    }
+    catch {
+        // fc-match absent / unreadable font file — the embedded fallback applies.
+        return "";
+    }
+}

package/dist/modules/devtools/src/blitz/host.js

@@ -13,11 +13,13 @@
 import { createLogger } from "@downdraft/engine";
 import { CdpBridge, DevtoolsBackend } from "@downdraft/engine/libraries/devtools";
 import { HtmlUiHost } from "@downdraft/engine/modules/html-ui";
+import { registerDevtoolsFonts } from "./fonts.js";
 import { ConsolePanel } from "./panels/console.js";
 import { ElementsPanel } from "./panels/elements.js";
 import { GpuPanel } from "./panels/gpu.js";
 import { PerformancePanel } from "./panels/performance.js";
 import { SnapshotPanel } from "./panels/snapshot.js";
+import { esc } from "./panels/types.js";
 import { DEVTOOLS_CSS } from "./theme.js";
 const log = createLogger("info");
 const MIN_DOCK = 120;
@@ -42,6 +44,9 @@ export class BlitzDevtoolsHost {
     panelCtx;
     lastPanelRender = -1e9;
     lastSlowLog = 0;
+    /** @font-face css from registerDevtoolsFonts — "" means "embedded font
+     *  fallback", null means "not yet attempted". */
+    fontCss = null;
     constructor(opts) {
         this.opts = opts;
         this.surfaceW = opts.surface.clientWidth;
@@ -113,19 +118,42 @@ export class BlitzDevtoolsHost {
     show() {
         if (!this._ready || this.visible || this.disposed)
             return;
-        this.panel = this.opts.ui.mount(this.shellHtml(), {
-            id: "devtools",
-            rect: this.dockRect(),
-            // Above game overlays — menus/loading screens shouldn't bury the dock.
-            z: 1000,
-            scale: 1.5,
-            interactive: true,
-            // Devtools UI doesn't need vsync-rate raster — cap it so mutation
-            // bursts (console streams, snapshot refreshes) coalesce into ~66ms
-            // rasters instead of one raster per message.
-            maxFps: 15,
-            onEvent: (ev) => this.handleDocEvent(ev),
-        });
+        // Register real system fonts once per host — ui:// resources persist on
+        // the surface across dock remounts, and must land before the doc mounts
+        // so the first resolve sees them (embedded DejaVu fallback otherwise).
+        if (this.fontCss === null) {
+            const ui = this.opts.ui;
+            const rr = ui.registerResource?.bind(ui)
+                ?? (ui.host ? ui.host.registerResource.bind(ui.host) : undefined);
+            this.fontCss = rr ? registerDevtoolsFonts({ registerResource: rr }) : "";
+        }
+        try {
+            this.panel = this.opts.ui.mount(this.shellHtml(), {
+                id: "devtools",
+                rect: this.dockRect(),
+                // Above game overlays — menus/loading screens shouldn't bury the dock.
+                z: 1000,
+                // Native-res raster: the vendored glifo/FreeType path grid-fits hinted
+                // glyph stems to whole pixels — supersample factors >1 just blur that
+                // back out on downscale (and cost 2.25x the texture memory).
+                scale: 1,
+                // Ease wheel detents at pump cadence instead of jumping per event.
+                smoothWheel: true,
+                interactive: true,
+                // Devtools UI doesn't need vsync-rate raster — cap it so mutation
+                // bursts (console streams, snapshot refreshes) coalesce into ~66ms
+                // rasters instead of one raster per message.
+                maxFps: 15,
+                onEvent: (ev) => this.handleDocEvent(ev),
+            });
+        }
+        catch (err) {
+            // Mount fails when the ui worker is dead — stay hidden so the next F12
+            // retries cleanly instead of wedging on a half-mounted doc.
+            this.panel = null;
+            log.error("blitz-devtools-host", `dock mount failed: ${err}`);
+            return;
+        }
         this.syncProviders();
         this.renderTabs();
         this.activate(this.activeId);
@@ -150,8 +178,19 @@ export class BlitzDevtoolsHost {
         const t1 = performance.now();
         if (!this.visible)
             return;
-        this.syncProviders();
-        this.flush();
+        // Guarded like backend.update() above — a throwing panel render can't be
+        // allowed to kill the game frame hook that drives this pump.
+        try {
+            this.syncProviders();
+            this.flush();
+        }
+        catch (err) {
+            const tn = performance.now();
+            if (tn - this.lastSlowLog > 1000) {
+                this.lastSlowLog = tn;
+                log.warn("blitz-devtools-host", `panel render error: ${err}`);
+            }
+        }
         const t2 = performance.now();
         // ≤1/sec — these diagnostics used to feed the console panel's logger
         // sink, and each row forced another dock re-render: a self-feeding
@@ -204,11 +243,13 @@ export class BlitzDevtoolsHost {
     }
     // ── Dock layout ──
     dockRect() {
-        const h = Math.min(this.dockH, this.surfaceH - 60);
-        return { x: 0, y: this.surfaceH - h, w: this.surfaceW, h };
+        // A tiny surface (or a pathological resize event) must not produce a
+        // negative height — keep at least enough room for the tab strip.
+        const h = Math.max(48, Math.min(this.dockH, this.surfaceH - 60));
+        return { x: 0, y: Math.max(0, this.surfaceH - h), w: this.surfaceW, h };
     }
     shellHtml() {
-        return `<html><head><style>${DEVTOOLS_CSS}</style></head><body>
+        return `<html><head><style>${this.fontCss ?? ""}${DEVTOOLS_CSS}</style></head><body>
       <div id="dt-root">
         <div id="dt-grip" title="drag to resize"></div>
         <div id="dt-chrome">
@@ -224,7 +265,10 @@ export class BlitzDevtoolsHost {
     renderTabs() {
         if (!this.panel)
             return;
-        const tabs = [...this.panels.values()].map((p) => `<span class="tab${p.id === this.activeId ? " active" : ""}" data-action="dt.tab" data-tab="${p.id}">${p.title}</span>`).join("");
+        // esc() both interpolations — provider names feed panel ids/titles and
+        // arrive as raw strings (a game registering "x\"><img" would otherwise
+        // inject markup into the tab strip).
+        const tabs = [...this.panels.values()].map((p) => `<span class="tab${p.id === this.activeId ? " active" : ""}" data-action="dt.tab" data-tab="${esc(p.id)}">${esc(p.title)}</span>`).join("");
         this.panel.setInnerHtml("#dt-tabs", `<span class="brand">downdraft</span>${tabs}<span class="spacer"></span>
        <span class="hint">docked · F12</span><span id="dt-close" data-action="dt.close">✕</span>`);
         this.tabsDirty = false;
@@ -235,13 +279,28 @@ export class BlitzDevtoolsHost {
         this.activeId = id;
         const p = this.panels.get(id);
         this.renderTabs();
-        this.panel.setInnerHtml("#dt-top", p.renderTop?.() ?? "");
-        this.panel.setInnerHtml("#dt-bottom", p.renderBottom?.() ?? "");
+        try {
+            this.panel.setInnerHtml("#dt-top", p.renderTop?.() ?? "");
+            this.panel.setInnerHtml("#dt-bottom", p.renderBottom?.() ?? "");
+        }
+        catch (err) {
+            log.warn("blitz-devtools-host", `panel ${id} chrome render error: ${err}`);
+        }
         p.dirty = true;
         p.shellDirty = false;
-        this.panel.setInnerHtml("#dt-body", p.renderBody());
-        p.afterRender?.();
-        p.activate?.();
+        this.panel.setInnerHtml("#dt-body", this.safeBody(p));
+        try {
+            p.afterRender?.();
+        }
+        catch (err) {
+            log.warn("blitz-devtools-host", `panel ${id} afterRender error: ${err}`);
+        }
+        try {
+            p.activate?.();
+        }
+        catch (err) {
+            log.warn("blitz-devtools-host", `panel ${id} activate error: ${err}`);
+        }
         // Only the snapshot tab being viewed gets periodic provider refreshes;
         // fixed panels suspend auto-refresh entirely (manual Refresh still works).
         this.backend.providerWatch = p.providerSlot ?? -1;
@@ -307,10 +366,32 @@ export class BlitzDevtoolsHost {
         }
         if (p.dirty) {
             p.dirty = false;
-            if (p.flushDom?.() !== true) {
-                this.panel.setInnerHtml("#dt-body", p.renderBody());
+            let handled = false;
+            try {
+                handled = p.flushDom?.() === true;
             }
-            p.afterRender?.();
+            catch (err) {
+                log.warn("blitz-devtools-host", `panel ${p.id} flushDom error: ${err}`);
+            }
+            if (!handled)
+                this.panel.setInnerHtml("#dt-body", this.safeBody(p));
+            try {
+                p.afterRender?.();
+            }
+            catch (err) {
+                log.warn("blitz-devtools-host", `panel ${p.id} afterRender error: ${err}`);
+            }
+        }
+    }
+    /** renderBody that can't take the dock down — the error surfaces in-panel
+     *  (and the next push retries since dirty just flips back on). */
+    safeBody(p) {
+        try {
+            return p.renderBody();
+        }
+        catch (err) {
+            log.warn("blitz-devtools-host", `panel ${p.id} renderBody error: ${err}`);
+            return `<div class="status-banner error">panel render error: ${esc(String(err))}</div>`;
         }
     }
     setStatus(text) {
@@ -345,8 +426,10 @@ export class BlitzDevtoolsHost {
                 return;
             }
         }
+        // Left-click only — routing actions on contextmenu meant a right-click
+        // on a tab/button fired it instead of just focusing.
         const action = ev.d?.action;
-        if ((ev.t === "click" || ev.t === "contextmenu") && action) {
+        if (ev.t === "click" && action) {
             if (action === "dt.tab") {
                 const id = ev.d.tab;
                 if (id)
@@ -357,11 +440,21 @@ export class BlitzDevtoolsHost {
                 this.hide();
                 return;
             }
-            this.panels.get(this.activeId)?.onAction?.(ev.d, ev);
+            try {
+                this.panels.get(this.activeId)?.onAction?.(ev.d, ev);
+            }
+            catch (err) {
+                log.warn("blitz-devtools-host", `panel action error: ${err}`);
+            }
             return;
         }
         // Everything else (input, keydown/up, scroll, focus…) → active panel.
-        this.panels.get(this.activeId)?.onEvent?.(ev);
+        try {
+            this.panels.get(this.activeId)?.onEvent?.(ev);
+        }
+        catch (err) {
+            log.warn("blitz-devtools-host", `panel event error: ${err}`);
+        }
     }
 }
 /**
@@ -387,5 +480,6 @@ export function createSelfHostedDevtoolsUi(ctx) {
         host,
         mount: (markup, spec) => host.mount({ ...spec, html: markup }),
         docCaps: () => host.docCaps,
+        registerResource: (url, bytes) => host.registerResource(url, bytes),
     };
 }

package/dist/modules/devtools/src/blitz/panels/console.js

@@ -101,7 +101,7 @@ export class ConsolePanel {
     onBackendEvent(event, data) {
         if (event === "console") {
             const e = data;
-            this.rows.push({ text: e.text ?? "", severity: e.severity ?? 0, thread: e.thread ?? "main", seq: this.seq++ });
+            this.rows.push({ text: String(e?.text ?? ""), severity: e?.severity ?? 0, thread: e?.thread ?? "main", seq: this.seq++ });
             if (this.rows.length > MAX_ROWS)
                 this.rows.splice(0, this.rows.length - MAX_ROWS);
             this.dirty = true;
@@ -113,15 +113,24 @@ export class ConsolePanel {
         }
         else if (event === "threads") {
             const list = data ?? [];
-            this.threads = [{ id: "main", name: "main", kind: 0 }, ...list.filter((t) => t.id !== "main")];
-            if (!this.threads.some((t) => t.id === this.replThread))
+            const next = [{ id: "main", name: "main", kind: 0 }, ...list.filter((t) => t.id !== "main")];
+            // Thread chips live in the bottom chrome — flag it so the row
+            // actually re-renders when a worker appears or disappears.
+            const changed = next.length !== this.threads.length
+                || next.some((t, i) => t.id !== this.threads[i].id || t.name !== this.threads[i].name);
+            this.threads = next;
+            if (!this.threads.some((t) => t.id === this.replThread)) {
                 this.replThread = "main";
+                this.shellDirty = true;
+            }
+            if (changed)
+                this.shellDirty = true;
         }
     }
     onAction(data, _ev) {
         const act = data.action;
         if (act === "console.clear") {
-            void this.ctx.call("console.clear");
+            void this.ctx.call("console.clear").catch(() => { });
         }
         else if (act === "console.sev") {
             this.minSev = (this.minSev + 1) % SEV_NAMES.length;
@@ -171,8 +180,11 @@ export class ConsolePanel {
                 this.replValue = this.history[--this.histIdx];
                 this.ctx.setValue("[data-dt=repl]", this.replValue);
             }
-            else if (ev.k === "ArrowDown" && this.histIdx < this.history.length - 1) {
-                this.replValue = this.history[++this.histIdx];
+            else if (ev.k === "ArrowDown" && this.histIdx >= 0 && this.histIdx < this.history.length) {
+                // Stepping past the newest entry restores the empty input —
+                // previously the last history item was unreachable-to-leave.
+                this.histIdx++;
+                this.replValue = this.histIdx < this.history.length ? this.history[this.histIdx] : "";
                 this.ctx.setValue("[data-dt=repl]", this.replValue);
             }
         }
@@ -205,7 +217,7 @@ export class ConsolePanel {
             else {
                 const r = res?.result;
                 this.addRow({
-                    text: typeof r === "string" ? r : JSON.stringify(r, null, 2),
+                    text: typeof r === "string" ? r : (r === undefined ? "undefined" : JSON.stringify(r, null, 2)),
                     severity: 0, thread: this.replThread,
                 });
             }