@downdraft/engine 0.1.1 → 0.2.0

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

@@ -0,0 +1,217 @@
+// ============================================================================
+// panels/console.ts — Console panel: streamed log/console entries + per-thread
+// REPL eval. Port of packages/devtools-web/panels/console.js.
+// ============================================================================
+import { esc } from "./types.js";
+const MAX_ROWS = 2000;
+const RENDER_ROWS = 600;
+const SEV_NAMES = ["All", "Info+", "Warn+", "Errors"];
+export class ConsolePanel {
+    id = "console";
+    title = "Console";
+    dirty = true;
+    shellDirty = false;
+    ctx;
+    rows = [];
+    minSev = 0;
+    filter = "";
+    replThread = "main";
+    threads = [{ id: "main", name: "main", kind: 0 }];
+    history = [];
+    histIdx = -1;
+    replValue = "";
+    /** True while the log tail should stay pinned to the bottom. */
+    stickToBottom = true;
+    /** Monotonic row id — the incremental path appends only rows newer
+     *  than `appendedSeq`. */
+    seq = 0;
+    /** seq watermark: rows ≤ this are already in the DOM (or trimmed). */
+    appendedSeq = -1;
+    /** The DOM currently shows the empty-state note — the first append must
+     *  go through a full render to drop it. */
+    domEmpty = true;
+    /** Next dirty flush must rebuild #dt-body wholesale (filter/severity
+     *  change, clear, remount, or a backend without appendHtml). */
+    needsFullRender = true;
+    constructor(ctx) { this.ctx = ctx; }
+    renderTop() {
+        return `<div class="panel-toolbar">
+      <span class="dbtn" data-action="console.clear">Clear</span>
+      <span class="dbtn" data-action="console.sev">Level: ${SEV_NAMES[this.minSev]}</span>
+      <input class="console-filter" data-dt="filter" placeholder="filter" value="${esc(this.filter)}">
+      <span class="spacer"></span>
+      <span class="count">${this.rows.length} entries</span>
+    </div>`;
+    }
+    renderBody() {
+        const shown = this.shownRows().slice(-RENDER_ROWS);
+        // The DOM now reflects this render — the append watermark resumes at
+        // the last shown row, and whether the empty-note is mounted.
+        this.appendedSeq = shown.length ? shown[shown.length - 1].seq : this.seq - 1;
+        this.domEmpty = shown.length === 0;
+        this.needsFullRender = false;
+        const html = shown.map((r) => this.rowHtml(r)).join("");
+        return `<div class="console-log">${html || `<div class="empty-note">console is empty</div>`}</div>`;
+    }
+    /**
+     * Incremental flush — append only the new rows and trim the DOM back to
+     * RENDER_ROWS, instead of shipping a whole rebuilt log for reparse.
+     * Returns false when a full renderBody() render is required.
+     */
+    flushDom() {
+        if (!this.ctx.incrementalDom || this.needsFullRender)
+            return false;
+        const shown = this.shownRows();
+        const fresh = [];
+        for (let i = shown.length - 1; i >= 0; i--) {
+            if (shown[i].seq <= this.appendedSeq)
+                break;
+            fresh.push(shown[i]);
+        }
+        // An append into the empty-note state would leave the note behind —
+        // full-render instead.
+        if (fresh.length && this.domEmpty)
+            return false;
+        if (fresh.length) {
+            const html = fresh.reverse().map((r) => this.rowHtml(r)).join("");
+            this.appendedSeq = fresh[fresh.length - 1].seq;
+            this.domEmpty = false;
+            this.ctx.mutate([
+                { op: "appendHtml", sel: ".console-log", html },
+                { op: "trimChildren", sel: ".console-log", keep: RENDER_ROWS },
+            ]);
+        }
+        return true;
+    }
+    renderBottom() {
+        const thr = this.threads.map((t) => `<span class="thr${t.id === this.replThread ? " on" : ""}" data-action="console.thread" data-thread="${esc(t.id)}">${esc(t.name)}</span>`).join("");
+        return `<div class="console-repl">
+      <span class="prompt">&gt;</span>${thr}
+      <input data-dt="repl" placeholder="evaluate JS (Enter to run)" spellcheck="false" value="${esc(this.replValue)}">
+    </div>`;
+    }
+    shownRows() {
+        const f = this.filter.toLowerCase();
+        return this.rows
+            .filter((r) => r.severity >= this.minSev && (!f || r.text.toLowerCase().includes(f)));
+    }
+    rowHtml(r) {
+        return `<div class="crow sev-${r.severity}" data-sev="${r.severity}"><span class="th">[${esc(r.thread)}]</span>${esc(r.text)}</div>`;
+    }
+    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++ });
+            if (this.rows.length > MAX_ROWS)
+                this.rows.splice(0, this.rows.length - MAX_ROWS);
+            this.dirty = true;
+        }
+        else if (event === "console.clear") {
+            this.rows = [];
+            this.needsFullRender = true;
+            this.dirty = true;
+        }
+        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))
+                this.replThread = "main";
+        }
+    }
+    onAction(data, _ev) {
+        const act = data.action;
+        if (act === "console.clear") {
+            void this.ctx.call("console.clear");
+        }
+        else if (act === "console.sev") {
+            this.minSev = (this.minSev + 1) % SEV_NAMES.length;
+            this.needsFullRender = true;
+            this.dirty = true;
+            this.shellDirty = true;
+        }
+        else if (act === "console.thread") {
+            const t = data.thread;
+            if (t) {
+                this.replThread = t;
+                this.shellDirty = true;
+            }
+        }
+    }
+    onEvent(ev) {
+        // User scroll on the log scrollport releases/re-engages tail pinning —
+        // Chrome unpins autoscroll once you scroll away from the bottom.
+        if (ev.t === "scroll" && ev.id === "dt-body") {
+            this.stickToBottom = (ev.st ?? 0) >= this.maxScroll - 8;
+            return;
+        }
+        const tag = ev.d?.dt;
+        if (tag === "filter" && ev.t === "input") {
+            this.filter = ev.v ?? "";
+            this.needsFullRender = true;
+            this.dirty = true;
+            return;
+        }
+        if (tag !== "repl")
+            return;
+        if (ev.t === "input") {
+            this.replValue = ev.v ?? "";
+            return;
+        }
+        if (ev.t === "keydown") {
+            if (ev.k === "Enter" && this.replValue.trim()) {
+                const expr = this.replValue;
+                this.history.push(expr);
+                this.histIdx = this.history.length;
+                this.replValue = "";
+                this.ctx.setValue("[data-dt=repl]", "");
+                this.addRow({ text: `> ${expr}`, severity: 0, thread: this.replThread });
+                void this.eval(expr);
+            }
+            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];
+                this.ctx.setValue("[data-dt=repl]", this.replValue);
+            }
+        }
+    }
+    maxScroll = 0;
+    afterRender() {
+        // #dt-body is the scrollport — scrollIntoView can't reach nested
+        // containers in Blitz, so pin by absolute offset instead.
+        if (this.stickToBottom)
+            this.ctx.scrollTo("#dt-body", 0, 1e9);
+        void (async () => {
+            const [logEl, body] = await Promise.all([
+                this.ctx.getRect(".console-log"),
+                this.ctx.getRect("#dt-body"),
+            ]);
+            if (logEl && body)
+                this.maxScroll = Math.max(0, logEl.h - body.h + 16);
+        })();
+    }
+    addRow(r) {
+        this.rows.push({ ...r, seq: this.seq++ });
+        this.dirty = true;
+    }
+    async eval(expr) {
+        try {
+            const res = await this.ctx.call("eval", { thread: this.replThread, expr });
+            if (res?.error) {
+                this.addRow({ text: res.error, severity: 3, thread: this.replThread });
+            }
+            else {
+                const r = res?.result;
+                this.addRow({
+                    text: typeof r === "string" ? r : JSON.stringify(r, null, 2),
+                    severity: 0, thread: this.replThread,
+                });
+            }
+        }
+        catch (e) {
+            this.addRow({ text: String(e), severity: 3, thread: "devtools" });
+        }
+    }
+}

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

@@ -0,0 +1,79 @@
+// ============================================================================
+// 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.
+// ============================================================================
+import { esc } from "./types.js";
+const MODE_LABEL = { scene: "Scene graph", dom: "DOM", ecs: "ECS entities" };
+const MAX_ROWS = 4000;
+export class ElementsPanel {
+    id = "elements";
+    title = "Elements";
+    dirty = true;
+    shellDirty = false;
+    ctx;
+    mode = "scene";
+    rows = [];
+    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")}
+      <span class="spacer"></span>
+      <span class="count">${this.rows.length} nodes</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>
+        ${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>`;
+    }
+    onBackendEvent(event, data) {
+        // "scene" pushes feed the Scene-graph mode; "dom" pushes feed DOM/ECS.
+        if (event === "scene" && this.mode === "scene") {
+            this.rows = data ?? [];
+            this.dirty = true;
+        }
+        else if (event === "dom" && this.mode !== "scene") {
+            this.rows = data ?? [];
+            this.dirty = true;
+        }
+    }
+    onAction(data, _ev) {
+        if (data.action === "el.refresh") {
+            void this.refresh();
+        }
+        else if (data.action === "el.mode") {
+            const m = data.mode;
+            if (m && m !== this.mode) {
+                this.mode = m;
+                this.shellDirty = true;
+                void this.refresh();
+            }
+        }
+    }
+    activate() {
+        void this.refresh();
+    }
+    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 ?? [];
+        }
+        catch {
+            this.rows = [];
+        }
+        this.dirty = true;
+        this.shellDirty = true; // node count in the toolbar
+    }
+}

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

@@ -0,0 +1,61 @@
+// ============================================================================
+// panels/gpu.ts — GPU panel: adapter/limits/telemetry/resources kv +
+// frame-time chart. Port of devtools-web/panels/gpu.js.
+// ============================================================================
+import { chartHtml, esc } from "./types.js";
+export class GpuPanel {
+    id = "gpu";
+    title = "GPU";
+    dirty = true;
+    ctx;
+    info = null;
+    constructor(ctx) { this.ctx = ctx; }
+    renderTop() {
+        return `<div class="panel-toolbar">
+      <span class="dbtn" data-action="gpu.refresh">Refresh</span>
+      <span class="spacer"></span>
+    </div>`;
+    }
+    renderBody() {
+        if (!this.info)
+            return `<div class="empty-note">no GPU info</div>`;
+        const times = (this.info.frameTimes ?? []).map((t) => t[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 ?? []).values()) {
+            if (e.isHeader || !sections.length) {
+                sections.push({ header: e.isHeader ? e.key : null, rows: [] });
+                if (e.isHeader)
+                    continue;
+            }
+            sections[sections.length - 1].rows.push({ k: e.key, v: e.value });
+        }
+        const kv = sections.length
+            ? sections.map((s) => `<div class="snap-section">${s.header ? `<h3>${esc(s.header)}</h3>` : ""}
+          <div class="kv">${s.rows.map((r) => `<div class="kvrow"><div class="k">${esc(r.k)}</div><div class="v">${esc(r.v)}</div></div>`).join("")}</div>
+        </div>`).join("")
+            : `<div class="empty-note">no entries</div>`;
+        return chart + kv;
+    }
+    onBackendEvent(event, data) {
+        if (event === "gpu") {
+            this.info = data;
+            this.dirty = true;
+        }
+    }
+    onAction(data, _ev) {
+        if (data.action === "gpu.refresh")
+            void this.refresh();
+    }
+    activate() {
+        if (!this.info)
+            void this.refresh();
+    }
+    async refresh() {
+        try {
+            this.info = (await this.ctx.call("gpuInfo"));
+        }
+        catch { /* keep last */ }
+        this.dirty = true;
+    }
+}

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

@@ -0,0 +1,113 @@
+// ============================================================================
+// panels/performance.ts — Performance panel: per-thread CPU/heap/GC/latency
+// table, heap history chart, and the CDP CPU profiler (record → top frames).
+// Port of devtools-web/panels/metrics.js + the gpu.js profile recorder.
+// ============================================================================
+import { CHART_COLORS, chartHtml, esc, fmtBytes } from "./types.js";
+const HIST = 240;
+export class PerformancePanel {
+    id = "performance";
+    title = "Performance";
+    dirty = true;
+    shellDirty = false;
+    ctx;
+    slots = [];
+    history = new Map();
+    recording = false;
+    profile = null;
+    constructor(ctx) { this.ctx = ctx; }
+    renderTop() {
+        return `<div class="panel-toolbar">
+      <span class="dbtn${this.recording ? " warn" : ""}" data-action="perf.record">${this.recording ? "■ Stop profile" : "● Record CPU profile"}</span>
+      ${this.profile ? `<span class="dbtn" data-action="perf.clearProfile">Clear profile</span>` : ""}
+      <span class="spacer"></span>
+      <span class="count">${this.slots.length} threads</span>
+    </div>`;
+    }
+    renderBody() {
+        const heapSeries = [...this.history.entries()].map(([slot, rec]) => ({
+            name: `heap — ${this.slotName(slot)}`,
+            values: rec.heap,
+            color: CHART_COLORS[slot % CHART_COLORS.length],
+        }));
+        const chart = heapSeries.length
+            ? `<div class="snap-section"><h3>Heap per thread (MB)</h3>${heapSeries.map((s) => chartHtml(s.values, { max: Math.max(64, ...heapSeries.flatMap((x) => x.values)), color: s.color, label: s.name })).join("")}</div>`
+            : "";
+        let tbl = `<table class="dt"><tr>
+      <th>slot</th><th>name</th><th>cpu%</th><th>heap</th>
+      <th>gc max µs</th><th>task p95 µs</th></tr>`;
+        for (const s of this.slots.values()) {
+            const h = s.history?.[0] ?? {};
+            tbl += `<tr><td>${s.slotIndex}</td><td>${esc(s.name)}</td>
+        <td>${(h.cpuPercent ?? 0).toFixed(1)}</td>
+        <td>${fmtBytes(h.heapUsed)} / ${fmtBytes(h.heapTotal)}</td>
+        <td>${(h.gcPauseMaxUs ?? 0).toFixed(0)}</td>
+        <td>${(h.taskLatencyP95Us ?? 0).toFixed(0)}</td></tr>`;
+        }
+        tbl += `</table>`;
+        const table = `<div class="snap-section"><h3>Threads</h3>${tbl}</div>`;
+        let prof = "";
+        if (this.recording) {
+            prof = `<div class="status-banner">● recording — press Stop to capture</div>`;
+        }
+        else if (this.profile) {
+            const top = [...this.profile.nodes].sort((a, b) => b.hitCount - a.hitCount).slice(0, 40);
+            const total = Math.max(1, top.reduce((s, n) => s + n.hitCount, 0));
+            const durMs = (this.profile.endUs - this.profile.startUs) / 1000;
+            prof = `<div class="snap-section"><h3>CPU profile — ${this.profile.nodes.length} nodes, ${durMs.toFixed(0)} ms</h3>
+        <div class="lines">${top.map((n) => esc(`${(100 * n.hitCount / total).toFixed(1).padStart(5)}%  ${n.callFrame}  ${n.url}:${n.line}`)).join("\n")}</div></div>`;
+        }
+        return chart + table + prof || `<div class="empty-note">no metrics — is ProfilingSAB attached?</div>`;
+    }
+    onBackendEvent(event, data) {
+        if (event === "metrics") {
+            this.slots = data ?? [];
+            for (const s of this.slots.values()) {
+                const h = s.history?.[0];
+                if (!h)
+                    continue;
+                let rec = this.history.get(s.slotIndex);
+                if (!rec) {
+                    rec = { cpu: [], heap: [] };
+                    this.history.set(s.slotIndex, rec);
+                }
+                rec.cpu.push(h.cpuPercent);
+                rec.heap.push(h.heapUsed / 1048576);
+                if (rec.cpu.length > HIST) {
+                    rec.cpu.shift();
+                    rec.heap.shift();
+                }
+            }
+            this.dirty = true;
+        }
+        else if (event === "profile") {
+            this.profile = data;
+            this.recording = false;
+            this.dirty = true;
+            this.shellDirty = true;
+        }
+    }
+    onAction(data, _ev) {
+        if (data.action === "perf.record") {
+            if (!this.recording) {
+                this.recording = true;
+                this.profile = null;
+                void this.ctx.call("profile.start").catch(() => { this.recording = false; });
+            }
+            else {
+                this.recording = false;
+                void this.ctx.call("profile.stop").catch(() => { });
+            }
+            this.dirty = true;
+            this.shellDirty = true;
+        }
+        else if (data.action === "perf.clearProfile") {
+            this.profile = null;
+            this.dirty = true;
+            this.shellDirty = true;
+        }
+    }
+    slotName(slotIndex) {
+        return this.slots.find((s) => s.slotIndex === slotIndex)?.name ?? `slot ${slotIndex}`;
+    }
+}

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

@@ -0,0 +1,141 @@
+// ============================================================================
+// panels/snapshot.ts — generic PanelSnapshot renderer. Covers every
+// provider-registered tab (sim, memory, render-graph, materials, doctor,
+// workers, input, postfx, assets, game, …). Port of
+// devtools-web/panels/snapshot.js.
+// ============================================================================
+import { SNAP_FLAG } from "@downdraft/engine/libraries/devtools";
+import { esc, multiChartHtml } from "./types.js";
+export class SnapshotPanel {
+    id;
+    title;
+    /** Backend provider slot this panel displays — the host watches it for
+     *  auto-refresh while this tab is active. */
+    providerSlot;
+    dirty = true;
+    shellDirty = false;
+    ctx;
+    slot;
+    snap = null;
+    updatedAt = "";
+    constructor(ctx, slot, name) {
+        this.ctx = ctx;
+        this.slot = slot;
+        this.providerSlot = slot;
+        this.id = `snap-${name}`;
+        this.title = titleize(name);
+    }
+    renderTop() {
+        return `<div class="panel-toolbar">
+      <span class="dbtn" data-action="snap.refresh">Refresh</span>
+      <span class="spacer"></span><span class="count">${esc(this.updatedAt)}</span>
+    </div>`;
+    }
+    renderBody() {
+        const snap = this.snap;
+        if (!snap)
+            return `<div class="empty-note">no data</div>`;
+        const banner = snap.status && snap.status !== "ok"
+            ? `<div class="status-banner${snap.status === "error" ? " error" : ""}">${esc(snap.statusMsg ?? snap.status)}</div>`
+            : "";
+        return banner + (snap.sections ?? []).map((s) => this.renderSection(s)).join("");
+    }
+    onBackendEvent(event, data) {
+        if (event === "snapshot") {
+            const d = data;
+            if (d?.slot === this.slot) {
+                this.snap = d.snap;
+                this.updatedAt = `updated ${new Date().toLocaleTimeString()}`;
+                this.dirty = true;
+                this.shellDirty = true;
+            }
+        }
+    }
+    onAction(data, _ev) {
+        if (data.action === "snap.refresh") {
+            void this.refresh();
+        }
+        else if (data.action === "snap.cmd") {
+            const cmd = data.cmd;
+            if (!cmd)
+                return;
+            void this.ctx.call("command", {
+                panel: this.slot, action: cmd, payload: data.payload ?? "",
+            }).then(() => this.refresh());
+        }
+    }
+    activate() {
+        void this.refresh();
+    }
+    async refresh() {
+        try {
+            this.snap = (await this.ctx.call("snapshot", { panel: this.slot }));
+            this.updatedAt = `updated ${new Date().toLocaleTimeString()}`;
+        }
+        catch { /* keep last */ }
+        this.dirty = true;
+        this.shellDirty = true;
+    }
+    renderSection(s) {
+        const h = s.name ? `<h3>${esc(s.name)}</h3>` : "";
+        switch (s.kind) {
+            case "kv": {
+                const rows = (s.rows ?? []).map((r) => {
+                    if ((r.flags ?? 0) & SNAP_FLAG.header) {
+                        return `<div class="kvrow hdr"><div class="k">${esc(r.key)}</div><div class="v"></div></div>`;
+                    }
+                    const cls = flagCls(r.flags);
+                    return `<div class="kvrow"><div class="k">${esc(r.key)}</div><div class="v${cls}">${esc(r.value)}</div></div>`;
+                }).join("");
+                return `<div class="snap-section">${h}<div class="kv">${rows}</div></div>`;
+            }
+            case "table": {
+                const head = `<tr>${(s.cols ?? []).map((c) => `<th>${esc(c)}</th>`).join("")}</tr>`;
+                const rows = (s.rows ?? []).map((row) => `<tr>${row.map((c) => `<td>${esc(c)}</td>`).join("")}</tr>`).join("");
+                return `<div class="snap-section">${h}<table class="dt">${head}${rows}</table></div>`;
+            }
+            case "series": {
+                return `<div class="snap-section">${h}${multiChartHtml(s.series ?? [])}</div>`;
+            }
+            case "lines": {
+                const lines = (s.lines ?? []).map((l) => `<div class="${flagCls(l.flags).trim()}">${esc(l.text)}</div>`).join("");
+                return `<div class="snap-section">${h}<div class="lines">${lines}</div></div>`;
+            }
+            case "controls": {
+                const ctrls = (s.controls ?? []).map((c) => this.renderControl(c)).join("");
+                return `<div class="snap-section">${h}<div class="controls">${ctrls}</div></div>`;
+            }
+            default:
+                return `<div class="snap-section">${h}<div class="empty-note">unknown section ${esc(s.kind)}</div></div>`;
+        }
+    }
+    renderControl(c) {
+        const cmdAttr = `data-action="snap.cmd" data-cmd="${esc(c.id)}"`;
+        if (c.type === "button") {
+            return `<span class="dbtn" ${cmdAttr} data-payload="${esc(c.payload ?? "")}">${esc(c.label)}</span>`;
+        }
+        if (c.type === "checkbox") {
+            return `<label><span class="dbtn${c.checked ? " on" : ""}" ${cmdAttr} data-payload="${c.checked ? "0" : "1"}">${c.checked ? "☑" : "☐"}</span> ${esc(c.label)}</label>`;
+        }
+        if (c.type === "slider") {
+            const span = c.max - c.min || 1;
+            const step = span / 20;
+            const dec = (d) => Math.min(c.max, Math.max(c.min, c.value + d * step)).toFixed(2);
+            return `<label>${esc(c.label)}
+        <span class="dbtn" ${cmdAttr} data-payload="${dec(-1)}">−</span>
+        <span class="val">${c.value.toFixed(2)}</span>
+        <span class="dbtn" ${cmdAttr} data-payload="${dec(1)}">+</span></label>`;
+        }
+        return esc(c.label ?? "");
+    }
+}
+function flagCls(flags = 0) {
+    if (flags & SNAP_FLAG.error)
+        return " fl-err";
+    if (flags & SNAP_FLAG.warn)
+        return " fl-warn";
+    return "";
+}
+function titleize(s) {
+    return s.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}

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

@@ -0,0 +1,55 @@
+// ============================================================================
+// panels/types.ts — Blitz devtools panel contract + shared render helpers.
+//
+// A panel is a plain state object: backend push events update its state and
+// set `dirty`; the host re-renders `#dt-body` for the active dirty panel.
+// `renderTop`/`renderBottom` produce persistent chrome (toolbar, REPL row)
+// that is mounted once per tab activation — inputs living there keep focus
+// across body re-renders.
+// ============================================================================
+export function esc(s) {
+    return String(s ?? "")
+        .replaceAll("&", "&")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+}
+export function fmtBytes(b) {
+    const n = Number(b) || 0;
+    if (n < 1024)
+        return `${n} B`;
+    if (n < 1048576)
+        return `${(n / 1024).toFixed(1)} KB`;
+    if (n < 1073741824)
+        return `${(n / 1048576).toFixed(1)} MB`;
+    return `${(n / 1073741824).toFixed(2)} GB`;
+}
+export const CHART_COLORS = ["#4da3ff", "#57ab5a", "#e0b341", "#e5534b", "#bc8cff", "#39c5cf"];
+/**
+ * Div-column chart — Blitz has no canvas/SVG, so a series renders as a flex
+ * row of colored columns. `cols` caps the column count (decimation keeps
+ * the DOM small). Each column's height is the value normalized to `max`.
+ */
+export function chartHtml(values, opts = {}) {
+    const vals = Array.from(values, Number);
+    const cols = opts.cols ?? 120;
+    const color = opts.color ?? CHART_COLORS[0];
+    const max = Math.max(opts.max ?? 1e-9, ...vals, 1e-9);
+    const step = Math.max(1, Math.floor(vals.length / cols));
+    const cells = [];
+    for (let i = 0; i < vals.length; i += step) {
+        const h = Math.max(0, Math.min(100, (vals[i] / max) * 100));
+        cells.push(`<div class="col" style="height:${h.toFixed(1)}%;background:${color}"></div>`);
+    }
+    if (!cells.length)
+        cells.push(`<div class="col" style="height:0%"></div>`);
+    const lbl = opts.label ? `<div class="chart-label">${esc(opts.label)}</div>` : "";
+    return `${lbl}<div class="chart${opts.cls ? ` ${opts.cls}` : ""}">${cells.join("")}</div>`;
+}
+/** Multi-series chart — one labeled strip per series. */
+export function multiChartHtml(series, opts = {}) {
+    const all = series.flatMap((s) => Array.from(s.values, Number));
+    const max = Math.max(1e-9, ...all);
+    return series.map((s, i) => chartHtml(s.values, { ...opts, max, color: CHART_COLORS[i % CHART_COLORS.length], cls: "cap", label: s.name })).join("");
+}