@downdraft/engine 0.1.2-alpha.5 → 0.3.0

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;
@@ -76,7 +81,7 @@ export class BlitzDevtoolsHost {
             new ElementsPanel(ctx),
             new PerformancePanel(ctx),
             new GpuPanel(ctx),
-        ])
+        ].values())
             this.panels.set(p.id, p);
     }
     get visible() { return this.panel !== null; }
@@ -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;
@@ -252,7 +311,7 @@ export class BlitzDevtoolsHost {
         const slots = this.backend.providerSlots();
         let changed = false;
         const seen = new Set();
-        for (const { slot, name } of slots) {
+        for (const { slot, name } of slots.values()) {
             seen.add(slot);
             if (!this.snapshotPanels.has(slot)) {
                 const p = new SnapshotPanel(this.panelCtx, slot, name);
@@ -261,7 +320,7 @@ export class BlitzDevtoolsHost {
                 changed = true;
             }
         }
-        for (const [slot, p] of this.snapshotPanels) {
+        for (const [slot, p] of this.snapshotPanels.entries()) {
             if (!seen.has(slot)) {
                 this.snapshotPanels.delete(slot);
                 this.panels.delete(p.id);
@@ -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,
                 });
             }

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

@@ -1,10 +1,14 @@
 // ============================================================================
-// panels/elements.ts — Elements panel: scene graph / DOM / ECS entity tree.
-// Merges the web frontend's scene + dom tabs behind a mode switch, matching
-// the Chrome Elements panel's single-tree presentation.
+// panels/elements.ts — Elements panel: scene graph / ECS entity tree.
+//
+// Clicking a row selects it (Chrome-style): the .sel class flips via
+// incremental attr mutation so the scrollport survives, and a details strip
+// in the bottom chrome shows the row fields plus `getNodeJSON` output when
+// the node has a stable id and the scene inspector is live. The caret on
+// parent rows folds/unfolds the subtree.
 // ============================================================================
 import { esc } from "./types.js";
-const MODE_LABEL = { scene: "Scene graph", dom: "DOM", ecs: "ECS entities" };
+const MODE_LABEL = { scene: "Scene graph", ecs: "ECS entities" };
 const MAX_ROWS = 4000;
 export class ElementsPanel {
     id = "elements";
@@ -14,66 +18,251 @@ export class ElementsPanel {
     ctx;
     mode = "scene";
     rows = [];
+    /** Stable per-row key (nodeId or label path), parallel to rows. */
+    keys = [];
+    collapsed = new Set();
+    /** Logical selection — survives refreshes via keys. */
+    selKey = null;
+    /** Ephemeral DOM id of the row currently carrying .sel — lets pick flip
+     *  the class without a body reparse. Stale after a refresh; harmless —
+     *  renderBody re-emits .sel from selKey. */
+    selRowId = null;
+    details = null;
+    lastError = "";
+    lastSig = "";
+    /** Scroll offset of #dt-body — restored after every body re-render, since
+     *  setInnerHtml replaces the subtree and drops scrollTop. */
+    lastScrollTop = 0;
     constructor(ctx) { this.ctx = ctx; }
     renderTop() {
         const btn = (m) => `<span class="dbtn${this.mode === m ? " on" : ""}" data-action="el.mode" data-mode="${m}">${MODE_LABEL[m]}</span>`;
         return `<div class="panel-toolbar">
       <span class="dbtn" data-action="el.refresh">Refresh</span>
-      ${btn("scene")}${btn("dom")}${btn("ecs")}
+      ${btn("scene")}${btn("ecs")}
       <span class="spacer"></span>
-      <span class="count">${this.rows.length} nodes</span>
+      <span class="count">${this.rows.length} nodes${this.collapsed.size ? ` · ${this.collapsed.size} folded` : ""}</span>
     </div>`;
     }
     renderBody() {
-        if (!this.rows.length)
-            return `<div class="empty-note">no nodes</div>`;
-        const html = this.rows.slice(0, MAX_ROWS).map((n) => `<div class="trow" style="padding-left:${4 + n.depth * 14}px" data-action="el.pick" data-node="${n.id}">
-        <span>${n.childCount > 0 ? "▾" : " "} ${esc(n.label)}</span>
+        const err = this.lastError
+            ? `<div class="status-banner error">${esc(this.lastError)}</div>` : "";
+        const vis = this.visibleRows();
+        if (!vis.length)
+            return err + `<div class="empty-note">no nodes</div>`;
+        const html = vis.slice(0, MAX_ROWS).map(({ row: n, key }) => {
+            const isSel = key === this.selKey;
+            const folded = this.collapsed.has(key);
+            const caret = n.childCount > 0
+                ? `<span class="caret" data-action="el.fold" data-node="${n.id}">${folded ? "▸" : "▾"}</span>`
+                : `<span class="caret leaf"></span>`;
+            return `<div class="trow${isSel ? " sel" : ""}" style="padding-left:${4 + n.depth * 14}px" data-action="el.pick" data-node="${n.id}">
+        ${caret}<span>${esc(n.label)}</span>
         ${n.detail ? `<span class="detail">${esc(n.detail)}</span>` : ""}
         ${n.childCount > 0 ? `<span class="kids">(${n.childCount})</span>` : ""}
-      </div>`).join("");
-        const more = this.rows.length > MAX_ROWS
-            ? `<div class="empty-note">… ${this.rows.length - MAX_ROWS} more rows</div>` : "";
-        return `<div class="tree">${html}${more}</div>`;
+      </div>`;
+        }).join("");
+        const more = vis.length > MAX_ROWS
+            ? `<div class="empty-note">… ${vis.length - MAX_ROWS} more rows</div>` : "";
+        return err + `<div class="tree">${html}${more}</div>`;
     }
+    renderBottom() {
+        if (!this.details)
+            return "";
+        return `<div class="el-details">
+      <div class="el-details-head"><span class="dt-title">${esc(this.details.title)}</span>
+        <span class="spacer"></span><span class="dbtn" data-action="el.unpick">✕</span></div>
+      <div class="el-details-body lines">${esc(this.details.body)}</div>
+    </div>`;
+    }
+    // ── Data ──
+    /** Cheap change-detection — scene/ecs pushes arrive every ~2s while the
+     *  dock is visible; identical payloads must not force a re-render (it
+     *  would bounce the scrollport twice per second). */
+    applyRows(rows) {
+        const sig = JSON.stringify(rows.map((r) => [r.label, r.detail, r.childCount, r.depth, r.nodeId ?? ""]));
+        if (sig === this.lastSig)
+            return;
+        this.lastSig = sig;
+        this.setRows(rows);
+        this.dirty = true;
+        this.shellDirty = true;
+    }
+    setRows(rows) {
+        this.rows = rows;
+        // Rows arrive pre-order flattened — the parent of a row is the most
+        // recent row at depth-1. Keys: nodeId when the collector provided one,
+        // else a positional label path (stable while the tree shape holds).
+        const stack = [];
+        this.keys = rows.map((r, i) => {
+            const parent = r.depth > 0 ? (stack[r.depth - 1] ?? "") : "";
+            const k = r.nodeId ?? `${parent}/${r.label}@${i}`;
+            stack[r.depth] = k;
+            stack.length = r.depth + 1;
+            return k;
+        });
+        const present = new Set(this.keys);
+        for (const k of [...this.collapsed])
+            if (!present.has(k))
+                this.collapsed.delete(k);
+        if (this.selKey && !present.has(this.selKey)) {
+            this.selKey = null;
+            this.selRowId = null;
+            this.details = null;
+        }
+    }
+    /** Rows minus descendants of folded parents. */
+    visibleRows() {
+        const out = [];
+        const skipDepths = [];
+        for (let i = 0; i < this.rows.length; i++) {
+            const r = this.rows[i];
+            const k = this.keys[i];
+            while (skipDepths.length && r.depth <= skipDepths[skipDepths.length - 1])
+                skipDepths.pop();
+            if (!skipDepths.length)
+                out.push({ row: r, key: k });
+            if (r.childCount > 0 && this.collapsed.has(k))
+                skipDepths.push(r.depth);
+        }
+        return out;
+    }
+    localDetails(r) {
+        return [
+            `label: ${r.label}`,
+            r.detail ? `detail: ${r.detail}` : "",
+            `kind: ${r.kind === 1 ? "ecs entity" : "scene node"}`,
+            `children: ${r.childCount}`,
+            `depth: ${r.depth}`,
+            r.nodeId ? `nodeId: ${r.nodeId}` : "nodeId: (none — pick can't reach the inspector)",
+        ].filter(Boolean).join("\n");
+    }
+    async loadDetails(row, key) {
+        this.details = { title: row.label, body: this.localDetails(row) };
+        this.shellDirty = true;
+        const nodeId = row.nodeId;
+        if (!nodeId)
+            return;
+        // Best-effort inspector enrichment + in-scene selection highlight.
+        try {
+            await this.ctx.call("inspector.call", { method: "selectNode", args: [nodeId] });
+        }
+        catch { /* inspector absent or id unknown — local details stand */ }
+        try {
+            const json = await this.ctx.call("inspector.call", { method: "getNodeJSON", args: [nodeId] });
+            // A newer pick while this call was in flight wins.
+            if (this.selKey === key && typeof json === "string" && json) {
+                this.details = { title: row.label, body: json };
+                this.shellDirty = true;
+            }
+        }
+        catch { /* no inspector — keep the row-level details */ }
+    }
+    // ── Events ──
     onBackendEvent(event, data) {
-        // "scene" pushes feed the Scene-graph mode; "dom" pushes feed DOM/ECS.
+        // "scene" pushes feed scene mode; "dom" pushes feed ECS mode.
         if (event === "scene" && this.mode === "scene") {
-            this.rows = data ?? [];
-            this.dirty = true;
+            this.applyRows(data ?? []);
         }
-        else if (event === "dom" && this.mode !== "scene") {
-            this.rows = data ?? [];
-            this.dirty = true;
+        else if (event === "dom" && this.mode === "ecs") {
+            this.applyRows(data ?? []);
         }
     }
     onAction(data, _ev) {
-        if (data.action === "el.refresh") {
+        const act = data.action;
+        if (act === "el.refresh") {
             void this.refresh();
         }
-        else if (data.action === "el.mode") {
+        else if (act === "el.mode") {
             const m = data.mode;
-            if (m && m !== this.mode) {
+            if ((m === "scene" || m === "ecs") && m !== this.mode) {
                 this.mode = m;
+                this.selKey = null;
+                this.selRowId = null;
+                this.details = null;
+                this.collapsed.clear();
                 this.shellDirty = true;
+                // Point the backend's periodic push at the mode being viewed.
+                void this.ctx.call("domTree.mode", { mode: m }).catch(() => { });
                 void this.refresh();
             }
         }
+        else if (act === "el.fold") {
+            const id = Number(data.node);
+            const i = this.rows.findIndex((r) => r.id === id);
+            if (i < 0)
+                return;
+            const key = this.keys[i];
+            if (this.collapsed.has(key))
+                this.collapsed.delete(key);
+            else
+                this.collapsed.add(key);
+            this.dirty = true;
+            this.shellDirty = true;
+        }
+        else if (act === "el.pick") {
+            this.pick(Number(data.node));
+        }
+        else if (act === "el.unpick") {
+            this.unpick();
+        }
+    }
+    pick(id) {
+        const i = this.rows.findIndex((r) => r.id === id);
+        if (i < 0)
+            return;
+        const row = this.rows[i];
+        const key = this.keys[i];
+        this.selKey = key;
+        // Flip .sel via targeted mutations instead of a body re-render —
+        // reparse would reset the scrollport mid-browse. Falls back to a full
+        // render on backends without incremental ops.
+        const ops = [];
+        if (this.selRowId !== null && this.selRowId !== id) {
+            ops.push({ op: "attr", sel: `[data-node="${this.selRowId}"]`, name: "class", value: "trow" });
+        }
+        ops.push({ op: "attr", sel: `[data-node="${id}"]`, name: "class", value: "trow sel" });
+        this.ctx.mutate(ops);
+        this.selRowId = id;
+        void this.loadDetails(row, key);
+    }
+    unpick() {
+        if (this.selRowId !== null) {
+            this.ctx.mutate([{ op: "attr", sel: `[data-node="${this.selRowId}"]`, name: "class", value: "trow" }]);
+        }
+        this.selKey = null;
+        this.selRowId = null;
+        this.details = null;
+        this.shellDirty = true;
+        void this.ctx.call("inspector.call", { method: "selectNode", args: [null] }).catch(() => { });
+    }
+    onEvent(ev) {
+        if (ev.t === "scroll" && ev.id === "dt-body") {
+            this.lastScrollTop = ev.st ?? 0;
+        }
     }
     activate() {
+        // Keep the backend's push mode aligned with what's on screen.
+        void this.ctx.call("domTree.mode", { mode: this.mode }).catch(() => { });
         void this.refresh();
     }
+    afterRender() {
+        // Body reparse dropped the scroll position — put it back.
+        if (this.lastScrollTop > 0)
+            this.ctx.scrollTo("#dt-body", 0, this.lastScrollTop);
+    }
     async refresh() {
         try {
             const rows = this.mode === "scene"
                 ? await this.ctx.call("sceneTree")
-                : await this.ctx.call("domTree", { mode: this.mode === "ecs" ? "ecs" : "scene" });
-            this.rows = rows ?? [];
+                : await this.ctx.call("domTree", { mode: "ecs" });
+            this.lastError = "";
+            this.applyRows(rows ?? []);
         }
-        catch {
-            this.rows = [];
+        catch (err) {
+            // Keep the last good tree; surface the failure instead of blanking.
+            this.lastError = `refresh failed: ${String(err)}`;
         }
         this.dirty = true;
-        this.shellDirty = true; // node count in the toolbar
+        this.shellDirty = true;
     }
 }

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

@@ -19,10 +19,13 @@ export class GpuPanel {
     renderBody() {
         if (!this.info)
             return `<div class="empty-note">no GPU info</div>`;
-        const times = (this.info.frameTimes ?? []).map((t) => t[0]);
+        const times = (Array.isArray(this.info.frameTimes) ? this.info.frameTimes : [])
+            .map((t) => (Array.isArray(t) ? t[0] : 0));
         const chart = `<div class="snap-section"><h3>Frame times (ms)</h3>${chartHtml(times, { max: Math.max(16.7, ...times), label: "" })}</div>`;
         const sections = [];
-        for (const e of this.info.entries ?? []) {
+        for (const e of (Array.isArray(this.info.entries) ? this.info.entries : []).values()) {
+            if (!e || typeof e !== "object")
+                continue;
             if (e.isHeader || !sections.length) {
                 sections.push({ header: e.isHeader ? e.key : null, rows: [] });
                 if (e.isHeader)