@downdraft/engine 0.2.0 → 0.3.1

package/libraries/sand/src/materials.ts

@@ -71,32 +71,18 @@ export enum Material {
   // --- Ingredients ---
   // Ice (frozen water — produced by cooling)
   Ice = 64,
+  // (IDs 67–68, 71–73, 76–77, 79–81, 83–88 were inert alchemy materials —
+  // retired; keep the gaps so old saves don't remap onto new materials.)
   // Liquids
   Ether = 65,            // ethereal solvent — light, volatile, glowing
   Blood = 66,            // viscous, necrotic-tinted
-  Syrup = 67,            // thick, dense, sweet (binding agent)
-  NightshadeExtract = 68,// toxic liquid
   TrollBlood = 69,       // viscous, healing + necrotic
   LiquidShadow = 70,     // dense, light-absorbing
-  LoveEssence = 71,      // psychic liquid
-  HateEssence = 72,      // psychic liquid, corrosive
-  DreamMist = 73,        // ethereal + psychic, gas-like liquid
   VoidEssence = 74,      // dense, necrotic, reality-bending
   // Powders (solid, fall)
   Sulfur = 75,           // yellow powder, flammable, corrosive
-  GroundEyeOfNewt = 76,  // psychic powder
-  GroundBatWing = 77,    // ethereal powder
   BoneDust = 78,         // necrotic powder
-  IronFilings = 79,      // kinetic + dense powder, magnetic
-  MoonstoneDust = 80,    // luminous + ethereal powder
-  CrystalDust = 81,      // luminous + kinetic powder
   MushroomSpores = 82,   // toxic + psychic powder, grows
-  DragonScale = 83,      // thermal + kinetic, very dense
-  PhoenixFeather = 84,   // thermal + healing, light
-  UnicornHorn = 85,      // healing + luminous, rare
-  MandrakeRoot = 86,     // toxic + psychic, solid root
-  SpiderSilk = 87,       // kinetic + ethereal, very light
-  GraveDust = 88,        // necrotic + dense
   StarShard = 89,        // luminous + ethereal + kinetic, glowing crystal
   TimeSand = 90,         // kinetic + ethereal, reality-bending
   // Gases
@@ -283,30 +269,14 @@ export const MATERIALS: Record<number, MaterialDef> = {
   // --- Liquids ---
   [Material.Ether]: def(65, "Ether", [0.55, 0.45, 0.85, 0.8], { gravity: 1.5, gravityDir: 1, density: 0.7, liquid: true, flammable: true, burnTime: 40, albedo: 0.2, reflectivity: 0.4, brightness: 1.1 }),
   [Material.Blood]: def(66, "Blood", [0.7, 0.05, 0.05, 0.95], { gravity: 2, gravityDir: 1, density: 1.06, liquid: true, albedo: 0.3, reflectivity: 0.2, brightness: 0.8 }),
-  [Material.Syrup]: def(67, "Syrup", [0.6, 0.4, 0.15, 0.95], { gravity: 1, gravityDir: 1, density: 1.4, liquid: true, albedo: 0.3, reflectivity: 0.3, brightness: 0.9 }),
-  [Material.NightshadeExtract]: def(68, "Nightshade Extract", [0.3, 0.05, 0.35, 0.95], { gravity: 2, gravityDir: 1, density: 1.1, liquid: true, albedo: 0.2, reflectivity: 0.1, brightness: 0.7 }),
   [Material.TrollBlood]: def(69, "Troll Blood", [0.4, 0.2, 0.15, 0.95], { gravity: 2, gravityDir: 1, density: 1.2, liquid: true, albedo: 0.25, reflectivity: 0.15, brightness: 0.8 }),
   [Material.LiquidShadow]: def(70, "Liquid Shadow", [0.05, 0.05, 0.12, 0.98], { gravity: 3, gravityDir: 1, density: 2.0, liquid: true, albedo: 0.0, reflectivity: 0.0, brightness: 0.3 }),
-  [Material.LoveEssence]: def(71, "Love Essence", [0.95, 0.4, 0.6, 0.9], { gravity: 1.5, gravityDir: 1, density: 0.9, liquid: true, albedo: 0.3, reflectivity: 0.4, brightness: 1.0 }),
-  [Material.HateEssence]: def(72, "Hate Essence", [0.2, 0.1, 0.15, 0.9], { gravity: 2, gravityDir: 1, density: 1.3, liquid: true, albedo: 0.2, reflectivity: 0.2, brightness: 0.7 }),
-  [Material.DreamMist]: def(73, "Dream Mist", [0.6, 0.7, 0.95, 0.6], { gravity: 1, gravityDir: -1, density: 0.3, liquid: true, albedo: 0.2, reflectivity: 0.5, brightness: 1.2 }),
   [Material.VoidEssence]: def(74, "Void Essence", [0.1, 0.0, 0.2, 0.95], { gravity: 4, gravityDir: 1, density: 3.0, liquid: true, albedo: 0.0, reflectivity: 0.1, brightness: 0.5 }),
 
   // --- Alchemy game: powders (solid, fall) ---
   [Material.Sulfur]: def(75, "Sulfur", [0.9, 0.85, 0.2, 1.0], { gravity: 1, gravityDir: 1, density: 2.0, solid: true, flammable: true, burnTime: 60, albedo: 0.5, reflectivity: 0.1, brightness: 0.9 }),
-  [Material.GroundEyeOfNewt]: def(76, "Ground Eye of Newt", [0.5, 0.35, 0.2, 1.0], { gravity: 1, gravityDir: 1, density: 1.2, solid: true, albedo: 0.4, brightness: 0.8 }),
-  [Material.GroundBatWing]: def(77, "Ground Bat Wing", [0.3, 0.25, 0.35, 1.0], { gravity: 0.8, gravityDir: 1, density: 0.6, solid: true, albedo: 0.3, brightness: 0.7 }),
   [Material.BoneDust]: def(78, "Bone Dust", [0.85, 0.82, 0.75, 1.0], { gravity: 1, gravityDir: 1, density: 1.5, solid: true, albedo: 0.5, brightness: 0.8 }),
-  [Material.IronFilings]: def(79, "Iron Filings", [0.55, 0.55, 0.6, 1.0], { gravity: 1.5, gravityDir: 1, density: 7.8, solid: true, magnetic: true, albedo: 0.5, reflectivity: 0.3 }),
-  [Material.MoonstoneDust]: def(80, "Moonstone Dust", [0.8, 0.85, 0.95, 1.0], { gravity: 1, gravityDir: 1, density: 1.0, solid: true, albedo: 0.4, reflectivity: 0.5, brightness: 1.3 }),
-  [Material.CrystalDust]: def(81, "Crystal Dust", [0.6, 0.9, 0.95, 1.0], { gravity: 1, gravityDir: 1, density: 2.5, solid: true, albedo: 0.3, reflectivity: 0.6, brightness: 1.2 }),
   [Material.MushroomSpores]: def(82, "Mushroom Spores", [0.6, 0.5, 0.4, 0.9], { gravity: 0.5, gravityDir: 1, density: 0.4, solid: true, albedo: 0.3, brightness: 0.8 }),
-  [Material.DragonScale]: def(83, "Dragon Scale", [0.5, 0.15, 0.1, 1.0], { gravity: 1.5, gravityDir: 1, density: 5.0, solid: true, albedo: 0.4, reflectivity: 0.3, brightness: 1.0 }),
-  [Material.PhoenixFeather]: def(84, "Phoenix Feather", [0.95, 0.5, 0.15, 0.9], { gravity: 0.3, gravityDir: 1, density: 0.3, solid: true, flammable: true, burnTime: 200, albedo: 0.4, brightness: 1.4 }),
-  [Material.UnicornHorn]: def(85, "Unicorn Horn", [0.95, 0.9, 1.0, 1.0], { gravity: 1, gravityDir: 1, density: 1.8, solid: true, albedo: 0.5, reflectivity: 0.5, brightness: 1.5 }),
-  [Material.MandrakeRoot]: def(86, "Mandrake Root", [0.5, 0.4, 0.25, 1.0], { gravity: 1, gravityDir: 1, density: 1.3, solid: true, albedo: 0.4, brightness: 0.7 }),
-  [Material.SpiderSilk]: def(87, "Spider Silk", [0.9, 0.9, 0.85, 0.8], { gravity: 0.2, gravityDir: 1, density: 0.2, solid: true, albedo: 0.4, reflectivity: 0.2, brightness: 0.9 }),
-  [Material.GraveDust]: def(88, "Grave Dust", [0.3, 0.28, 0.25, 1.0], { gravity: 1, gravityDir: 1, density: 1.8, solid: true, albedo: 0.3, brightness: 0.6 }),
   [Material.StarShard]: def(89, "Star Shard", [0.7, 0.8, 1.0, 1.0], { gravity: 1, gravityDir: 1, density: 2.0, solid: true, albedo: 0.3, reflectivity: 0.7, brightness: 1.6 }),
   [Material.TimeSand]: def(90, "Time Sand", [0.4, 0.3, 0.6, 0.9], { gravity: 1, gravityDir: 1, density: 1.5, solid: true, albedo: 0.3, reflectivity: 0.4, brightness: 1.2 }),
 

package/libraries/sand/src/sand-world.ts

@@ -2130,10 +2130,6 @@ export class SandWorld {
         }
       }
 
-      // --- PhoenixFeather near fire/lava: glows brighter, resists burning ---
-      // (flammable but long burnTime already set; here we just let it shimmer)
-      // --- DragonScale: very dense, sinks through liquids (handled by density) ---
-
       // --- LiquidShadow + light source (fire/plasma) → dissipates to smoke ---
       if (mat === Material.LiquidShadow) {
         let lightNi = -1;

package/modules/devtools/README.md

@@ -14,12 +14,10 @@ bun add @downdraft/engine/modules/devtools
 - `BaseSceneInspector`
 - `DEVTOOLS_REALM`
 - `DEVTOOLS_SAB_MAX_FEEDS`
-- `DebugOverlay`
 - `DebugRaycast`
 - `DevToolsDataBridge`
 - `GridRenderer`
 - `HeightRulerRenderer`
-- `LabelOverlay`
-- …and 29 more
+- …and 24 more
 
 See the [Downdraft engine repository](https://github.com/knackstedt/downdraft) for architecture docs and examples.

package/modules/devtools/src/api.ts

@@ -3,23 +3,21 @@
 // engine systems, regardless of which thread they run on.
 //
 // Realm detection determines transport:
-//   - Main realm: panels/feeds/commands registered directly on
+//   - Main realm: feeds/commands registered directly on
 //     window.__sceneInspector via DevToolsDataBridge.
-//   - Worker realm: panels/feeds/commands registered in a worker-side
-//     registry. Data feeds are written to a devtools SAB region (zero-copy,
-//     synchronous reads). Commands are forwarded via worker RPC. Panel
-//     declarations are synced to the renderer via a one-time manifest RPC.
+//   - Worker realm: feeds/commands registered in a worker-side registry.
+//     Data feeds are written to a devtools SAB region (zero-copy,
+//     synchronous reads). Commands are forwarded via worker RPC.
 //
 // Plugins import `devtools` from @downdraft/engine/modules/devtools and call
-// registerPanel/registerDataFeed/registerCommand/registerSABStat — the same
-// API works in both realms.
+// registerDataFeed/registerCommand/registerSABStat — the same API works in
+// both realms.
 // ============================================================================
 
 import { resourceToken } from "@downdraft/engine/ecs/resource";
 import { createLogger } from "@downdraft/engine/util/logger";
 import type { DebugViewDescriptor } from "./debug-view-descriptors";
 import { BUILTIN_VIEW_DESCRIPTORS } from "./debug-view-descriptors";
-import type { IDevToolsOverlayToggle, IDevToolsPanelExtension } from "./types";
 
 const log = createLogger("info");
 
@@ -56,7 +54,7 @@ export const DEVTOOLS_REALM = detectRealm();
 // synchronously. No RPC polling needed.
 //
 // Layout:
-//   [0..3]   manifestVersion: Uint32  (bumped when panels/feeds change)
+//   [0..3]   manifestVersion: Uint32  (bumped when feeds/commands change)
 //   [4..7]   feedCount: Uint32
 //   [8..]    feed entries: each is [lengthBytes: Uint32][JSON bytes...]
 //            (lengthBytes = 0 means "not yet written" / "unavailable")
@@ -124,11 +122,7 @@ export interface DevToolsAPI {
   /** Current realm ("main" or "worker"). */
   readonly realm: "main" | "worker";
 
-  // --- Panels & toggles (declarative, realm-transparent) ---
-  registerPanel(ext: IDevToolsPanelExtension): void;
-  registerOverlayToggle(toggle: IDevToolsOverlayToggle): void;
-
-  // --- Data feeds (read by panel, realm chooses transport) ---
+  // --- Data feeds (read by devtools frontends, realm chooses transport) ---
   // In main realm: fn is called directly when the panel queries __sceneInspector.
   // In worker realm: fn is called each tick (or at writeRate), result JSON-serialized
   //   to the devtools SAB. Renderer reads synchronously from SAB.
@@ -165,7 +159,7 @@ export interface DevToolsAPI {
   getViews(): DebugViewDescriptor[];
 
   // --- Manifest (renderer fetches from worker via RPC) ---
-  /** Get the full manifest: panels, toggles, data feed names, commands, SAB stats. */
+  /** Get the full manifest: data feed names, commands, SAB stats. */
   getManifest(): DevToolsManifest;
 
   // --- Worker tick hook ---
@@ -178,8 +172,6 @@ export interface DevToolsAPI {
 }
 
 export interface DevToolsManifest {
-  panels: IDevToolsPanelExtension[];
-  toggles: IDevToolsOverlayToggle[];
   dataFeeds: { name: string; feedIndex: number; writeRateHz: number }[];
   commands: string[];
   sabStats: DevToolsSABStat[];
@@ -200,8 +192,6 @@ interface RegisteredDataFeed {
 class DevToolsAPIImpl implements DevToolsAPI {
   readonly realm: "main" | "worker";
 
-  private panels = new Map<string, IDevToolsPanelExtension>();
-  private toggles = new Map<string, IDevToolsOverlayToggle>();
   private dataFeeds = new Map<string, RegisteredDataFeed>();
   private dataFeedNames: string[] = []; // ordered list for feedIndex assignment
   private commands = new Map<string, (...args: any[]) => any>();
@@ -223,16 +213,6 @@ class DevToolsAPIImpl implements DevToolsAPI {
     this.realm = realm;
   }
 
-  registerPanel(ext: IDevToolsPanelExtension): void {
-    this.panels.set(ext.id, ext);
-    this.bumpManifest();
-  }
-
-  registerOverlayToggle(toggle: IDevToolsOverlayToggle): void {
-    this.toggles.set(toggle.id, toggle);
-    this.bumpManifest();
-  }
-
   registerDataFeed(name: string, fn: () => any, writeRateHz: number = 10): void {
     if (this.dataFeeds.has(name)) {
       // Update fn/rate, keep feedIndex and hasWritten
@@ -318,8 +298,6 @@ class DevToolsAPIImpl implements DevToolsAPI {
 
   getManifest(): DevToolsManifest {
     return {
-      panels: Array.from(this.panels.values()),
-      toggles: Array.from(this.toggles.values()),
       dataFeeds: this.dataFeedNames.map((name, i) => ({
         name,
         feedIndex: i,
@@ -414,8 +392,6 @@ class DevToolsAPIImpl implements DevToolsAPI {
   }
 
   clear(): void {
-    this.panels.clear();
-    this.toggles.clear();
     this.dataFeeds.clear();
     this.dataFeedNames = [];
     this.commands.clear();
@@ -443,7 +419,7 @@ const _devtools = new DevToolsAPIImpl(DEVTOOLS_REALM);
  * the appropriate transport for data feeds (direct call vs SAB) and
  * commands (direct call vs RPC forwarding).
  *
- * Plugins import this and call registerPanel/registerDataFeed/registerCommand.
+ * Plugins import this and call registerDataFeed/registerCommand.
  * The same code works in both realms.
  */
 export const devtools: DevToolsAPI = _devtools;

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),
   };
 }

package/modules/devtools/src/blitz/panels/console.ts

@@ -115,8 +115,8 @@ export class ConsolePanel implements DtPanel {
 
   onBackendEvent(event: string, data: unknown): void {
     if (event === "console") {
-      const e = data as { text?: string; severity?: number; thread?: string };
-      this.rows.push({ text: e.text ?? "", severity: e.severity ?? 0, thread: e.thread ?? "main", seq: this.seq++ });
+      const e = data as { text?: unknown; severity?: number; thread?: string };
+      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;
     } else if (event === "console.clear") {
@@ -125,15 +125,24 @@ export class ConsolePanel implements DtPanel {
       this.dirty = true;
     } else if (event === "threads") {
       const list = (data as ThreadInfo[]) ?? [];
-      this.threads = [{ id: "main", name: "main", kind: 0 }, ...list.filter((t) => t.id !== "main")];
-      if (!this.threads.some((t) => t.id === this.replThread)) this.replThread = "main";
+      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: Record<string, string>, _ev: OsrDomEvent): void {
     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;
       this.needsFullRender = true;
@@ -176,8 +185,11 @@ export class ConsolePanel implements DtPanel {
       } else if (ev.k === "ArrowUp" && this.histIdx > 0) {
         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);
       }
     }
@@ -212,7 +224,7 @@ export class ConsolePanel implements DtPanel {
       } 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,
         });
       }