@downdraft/engine 0.2.0 → 0.3.0

package/dist/modules/html-ui/src/host.js

@@ -7,6 +7,7 @@
 // ============================================================================
 import { getHostCapabilities, getNativeHost } from "@downdraft/engine/platform/runtime";
 import { createLogger } from "@downdraft/engine/util/logger";
+import { untrackedTimeout } from "@downdraft/engine/util/session-timer";
 import { PanelBlitPass } from "./composite.js";
 import { createLocalBackend, createWorkerBackend } from "./doc-backend.js";
 const log = createLogger("info");
@@ -136,7 +137,7 @@ export class HtmlUiHost {
         this.order.push(id);
         // Doc viewport scale = raster px per CSS px = scale * zoom; layout size
         // is rect/zoom CSS px so the raster still covers rect*scale texture px.
-        this.send({ type: "create", id, cssW: spec.rect.w / zoom, cssH: spec.docH ?? spec.rect.h / zoom, scale: scale * zoom, html: spec.html, maxFps: spec.maxFps });
+        this.send({ type: "create", id, cssW: spec.rect.w / zoom, cssH: spec.docH ?? spec.rect.h / zoom, scale: scale * zoom, html: spec.html, maxFps: spec.maxFps, smoothWheel: spec.smoothWheel });
         // GPU-direct: create the panel texture eagerly so the worker's texBind
         // lands before its first upload — the host knows raster dims at mount.
         if (this.gpuReady)
@@ -301,6 +302,8 @@ export class HtmlUiHost {
     /** Doc-backend capabilities (populated by the `ready` handshake —
      *  `incrementalDom` is false until then, and forever on old cdylibs). */
     get docCaps() { return this.caps; }
+    /** Which doc backend is live — "worker" (raster off-thread) or "local". */
+    get backendKind() { return this.backend.kind; }
     /** Compositor surface for GameRenderer's end-of-frame UI pass. */
     get compositor() {
         return {
@@ -349,7 +352,7 @@ export class HtmlUiHost {
             this.terminating = true;
             this.send({ type: "gpuDetach" });
             const backend = this.backend;
-            setTimeout(() => {
+            untrackedTimeout(() => {
                 if (!this.gpuDetachAcked)
                     backend.dispose();
                 this.destroyRetired();
@@ -775,7 +778,7 @@ export class HtmlUiHost {
                 || (p.postedBindPtr !== null && BigInt(ptr) === p.postedBindPtr));
         if (borrowed) {
             const key = BigInt(ptr);
-            const timer = setTimeout(() => {
+            const timer = untrackedTimeout(() => {
                 if (this.retiredTex.delete(key))
                     t.destroy();
             }, 1000);

package/libraries/blitz-ui/native/Cargo.toml

@@ -31,3 +31,9 @@ web-time = "1"
 # Workaround copied from blitz examples: disable unicode URL support
 # (see https://github.com/hsivonen/idna_adapter)
 idna_adapter = "=1.0.0"
+
+# Enable the vendored glifo's FreeType mask path (see [patch.crates-io] in the
+# workspace root). Feature unification turns it on inside vello_cpu's copy.
+# Target-gated: freetype-sys compiles bundled C, which wasm32 can't build.
+[target.'cfg(not(target_family = "wasm"))'.dependencies]
+glifo = { version = "0.2", features = ["freetype"] }

package/libraries/blitz-ui/native-osr/Cargo.toml

@@ -13,7 +13,9 @@ crate-type = ["cdylib"]
 blitz-html = { git = "https://github.com/DioxusLabs/blitz", rev = "efef6519fe6520caf66dc82df557580eecbf652b" }
 blitz-dom = { git = "https://github.com/DioxusLabs/blitz", rev = "efef6519fe6520caf66dc82df557580eecbf652b", default-features = false, features = ["woff"] }
 blitz-traits = { git = "https://github.com/DioxusLabs/blitz", rev = "efef6519fe6520caf66dc82df557580eecbf652b" }
-blitz-paint = { git = "https://github.com/DioxusLabs/blitz", rev = "efef6519fe6520caf66dc82df557580eecbf652b", features = ["custom-widget"] }
+# scrollbars: painted overlay thumbs on scroll containers + thumb drag/hover
+# hit-testing (pulls blitz-dom/scrollbars transitively).
+blitz-paint = { git = "https://github.com/DioxusLabs/blitz", rev = "efef6519fe6520caf66dc82df557580eecbf652b", features = ["custom-widget", "scrollbars"] }
 # Enable the vendored glifo's FreeType mask path (see [patch.crates-io] in the
 # workspace root). Feature unification turns it on inside vello_cpu's copy.
 glifo = { version = "0.2", features = ["freetype"] }

package/libraries/devtools/src/backend.ts

@@ -77,6 +77,12 @@ export class DevtoolsBackend {
   private providers = new Map<number, PanelProvider>();
   private commandHandlers = new Map<number, PanelCommandHandler>();
   private globalCommandHandler: PanelCommandHandler | null = 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. */
+  private dynSlots = new Map<string, number>();
+  private dynSlotNames = new Map<number, string>();
+  private nextDynSlot = 100;
   private lastProviderPush = new Map<number, number>();
   providerIntervalMs = 1500;
   /** When non-null, the cadence loop only auto-refreshes this provider
@@ -237,37 +243,57 @@ export class DevtoolsBackend {
 
   // ── Providers / commands ──
 
-  registerProvider(panel: PanelName | number, collect: PanelProvider): void {
-    this.providers.set(panelSlot(panel), collect);
+  /** 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. */
+  private slotFor(panel: PanelName | number | string): number {
+    if (typeof panel === "number") return panel;
+    const fixed = PANEL[panel as PanelName];
+    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;
+  }
+
+  private nameFor(slot: number): string {
+    return this.dynSlotNames.get(slot) ?? slotName(slot);
+  }
+
+  registerProvider(panel: PanelName | number | string, collect: PanelProvider): void {
+    this.providers.set(this.slotFor(panel), collect);
   }
 
-  registerCommandHandler(panel: PanelName | number | "*", handler: PanelCommandHandler): void {
+  registerCommandHandler(panel: PanelName | number | string, handler: PanelCommandHandler): void {
     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(): { slot: number; name: string }[] {
-    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: PanelName | number): void {
+  refreshPanel(panel: PanelName | number | string): void {
     const trace: number[] = [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: PanelSnapshot | null | undefined) => {
-      if (snap) this.emit("snapshot", { panel: slotName(slot), slot, snap });
+      if (snap) this.emit("snapshot", { panel: this.nameFor(slot), slot, snap });
       this.lastProviderPush.set(slot, performance.now());
     };
     const fail = (err: unknown) => {
       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());
@@ -288,7 +314,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}]`);
     }
   }
 
@@ -431,7 +457,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 as PanelName);
+        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: [] };
         try {
@@ -443,7 +469,7 @@ export class DevtoolsBackend {
       }
       case "command": {
         const panel = params.panel;
-        const slot = typeof panel === "number" ? panel : panelSlot((panel as PanelName) ?? "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/libraries/devtools/src/collectors.ts

@@ -18,6 +18,11 @@ export interface ThreadInfo { id: string; name: string; kind: number }
 export interface TreeRow {
   id: number; parentId: number; depth: number; childCount: number;
   kind: number; label: string; detail: string;
+  /** Stable node identity for pick/inspect — scene-store id, stage node id,
+   *  or ECS entity index ("ent-N") when the collector can provide one. The
+   *  numeric `id` is ephemeral (re-assigned per collect); `nodeId` survives
+   *  refreshes and is what `inspector.call` methods take. */
+  nodeId?: string;
 }
 export interface GpuInfoJson {
   entries: { key: string; value: string; isHeader: boolean }[];
@@ -100,30 +105,77 @@ export async function collectThreads(
   return threads;
 }
 
-/** Scene-graph tree (label + ctor + child counts). */
+function sceneInspectorApi(): Record<string, any> | null {
+  const g = globalThis as Record<string, any>;
+  return (g.window?.__sceneInspector ?? g.__sceneInspector ?? null) as Record<string, any> | 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: CollectorContext): TreeRow[] {
   const stage = ctx.gameScene?.stage;
-  if (!stage) return [];
-  const nodes: TreeRow[] = [];
-  let idCounter = 1;
-  const collect = (node: any, parentId: number, depth: number): void => {
-    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: any) => collect(child, id, depth + 1));
-  };
-  collect(stage, -1, 0);
-  return nodes;
+  if (stage) {
+    const nodes: TreeRow[] = [];
+    let idCounter = 1;
+    const collect = (node: any, parentId: number, depth: number): void => {
+      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: any) => 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<string, any>(storeNodes.map((n: any) => [n.id, n]));
+    const roots = storeNodes.filter((n: any) => n.parentId === null || !byId.has(n.parentId));
+    const rows: TreeRow[] = [];
+    const visited = new Set<string>();
+    let idCounter = 1;
+    const walk = (n: any, parentId: number, depth: number): void => {
+      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: number) => (+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: any) => 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 [];
+  }
 }
 
 /** DOM tree: scene-graph stage or ECS entities depending on mode. */
@@ -148,6 +200,7 @@ export function collectDomTree(ctx: CollectorContext, mode: "scene" | "ecs"): Tr
         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}`,
       });
     });
   } catch { /* sim reader hiccup */ }

package/modules/devtools/src/blitz/fonts.ts

@@ -0,0 +1,78 @@
+// ============================================================================
+// 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";
+
+/** Resource sink — HtmlUiHost.registerResource, or anything shaped like it. */
+type ResourceSink = { registerResource(url: string, bytes: Uint8Array | ArrayBuffer): void };
+
+interface Face { family: string; pattern: string; urlName: string; weight: number }
+
+// 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: Face[] = [
+  { 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: string): string | null {
+  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: string): string {
+  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: ResourceSink): string {
+  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<string, string>();
+    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/modules/devtools/src/blitz/host.ts

@@ -16,12 +16,13 @@ import { createLogger } from "@downdraft/engine";
 import { CdpBridge, DevtoolsBackend } from "@downdraft/engine/libraries/devtools";
 import { HtmlUiHost, type OsrDomEvent, type UiPanelHandle } from "@downdraft/engine/modules/html-ui";
 
+import { registerDevtoolsFonts } from "./fonts";
 import { ConsolePanel } from "./panels/console";
 import { ElementsPanel } from "./panels/elements";
 import { GpuPanel } from "./panels/gpu";
 import { PerformancePanel } from "./panels/performance";
 import { SnapshotPanel } from "./panels/snapshot";
-import type { DtPanel, DtPanelCtx } from "./panels/types";
+import { esc, type DtPanel, type DtPanelCtx } from "./panels/types";
 import { DEVTOOLS_CSS } from "./theme";
 
 const log = createLogger("info");
@@ -35,12 +36,17 @@ export interface DevtoolsUiSurface {
     z?: number;
     scale?: number;
     maxFps?: number;
+    /** Ease wheel deltas at pump cadence (html-ui PanelSpec.smoothWheel). */
+    smoothWheel?: boolean;
     interactive?: boolean;
     onEvent?: (ev: OsrDomEvent) => void;
   }): UiPanelHandle;
   /** Doc-backend capabilities — panels use incremental DOM ops only when
    *  the underlying cdylib provides them. */
   docCaps?(): { incrementalDom?: boolean };
+  /** Register a `ui://` resource (fonts) served to the dock doc — must run
+   *  before mount. Absent on surfaces that don't own a resource table. */
+  registerResource?(url: string, bytes: Uint8Array | ArrayBuffer): void;
 }
 
 export interface BlitzDevtoolsOptions {
@@ -83,6 +89,9 @@ export class BlitzDevtoolsHost {
   private panelCtx: DtPanelCtx;
   private lastPanelRender = -1e9;
   private lastSlowLog = 0;
+  /** @font-face css from registerDevtoolsFonts — "" means "embedded font
+   *  fallback", null means "not yet attempted". */
+  private fontCss: string | null = null;
 
   constructor(opts: BlitzDevtoolsOptions) {
     this.opts = opts;
@@ -154,19 +163,41 @@ export class BlitzDevtoolsHost {
 
   show(): void {
     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 as DevtoolsUiSurface & { host?: HtmlUiHost };
+      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);
@@ -190,8 +221,18 @@ 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
@@ -244,12 +285,14 @@ export class BlitzDevtoolsHost {
   // ── Dock layout ──
 
   private 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 };
   }
 
   private shellHtml(): string {
-    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">
@@ -266,8 +309,11 @@ export class BlitzDevtoolsHost {
 
   private renderTabs(): void {
     if (!this.panel) return;
+    // 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="${p.id}">${p.title}</span>`
+      `<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>
@@ -280,13 +326,21 @@ 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;
@@ -346,10 +400,25 @@ 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; } 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}`);
       }
-      p.afterRender?.();
+    }
+  }
+
+  /** renderBody that can't take the dock down — the error surfaces in-panel
+   *  (and the next push retries since dirty just flips back on). */
+  private safeBody(p: DtPanel): string {
+    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>`;
     }
   }
 
@@ -387,20 +456,26 @@ export class BlitzDevtoolsHost {
       }
     }
 
+    // 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) this.activate(id);
         return;
       }
       if (action === "dt.close") { 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}`);
+    }
   }
 }
 
@@ -426,5 +501,6 @@ export function createSelfHostedDevtoolsUi(ctx: RendererModuleContext): Devtools
     host,
     mount: (markup, spec) => host.mount({ ...spec, html: markup }),
     docCaps: () => host.docCaps,
+    registerResource: (url, bytes) => host.registerResource(url, bytes),
   };
 }