@jgengine/shell 0.7.0 → 0.9.0

package/dist/devtools/DevtoolsOverlay.js

@@ -0,0 +1,676 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { convertAngle, devtools, instrumentLatency, LONG_FRAME_MS, parseColor, parseOverridesPayload, } from "@jgengine/core/devtools/devtools";
+import { bindingLabel } from "@jgengine/core/input/actionBindings";
+import { MOVEMENT_TUNING } from "@jgengine/core/movement/movementModel";
+import { COLLISION_DEBUG_LAYERS, collisionDebug, } from "./collisionDebug.js";
+const REFRESH_MS = 250;
+const PHASE_BAR_BUDGET_MS = 16.7;
+const CULPRIT_HINTS = {
+    "outside-sim": "Cost is outside the sim driver — three.js render, React commit, GPU, GC, or tab throttle.",
+    sim: "Sim is slow but no named phase stands out — wrap hot onTick work with measure(\"name\", fn).",
+    onTick: "Game loop.onTick is the hotspot — profile inside it with measure(\"physics\"|\"ai\"|…, fn).",
+    pose: "Shell movement / collision / voxel step is expensive.",
+    actions: "Input → command dispatch / hotbar / interact is expensive.",
+    presence: "Multiplayer pose sync is expensive.",
+    pickup: "Auto-pickup nearest scan is expensive.",
+    "time+input": "Clock advance or input publish is unexpectedly heavy.",
+};
+function overridesStorageKey(gameName) {
+    return `jg-devtools:${gameName}`;
+}
+function readStoredOverrides(gameName) {
+    try {
+        const raw = localStorage.getItem(overridesStorageKey(gameName));
+        if (raw === null)
+            return null;
+        const parsed = parseOverridesPayload(JSON.parse(raw));
+        if (parsed.overrides === null) {
+            for (const message of parsed.diagnostics)
+                console.warn(`[jgengine:devtools] ${message}`);
+            return null;
+        }
+        for (const message of parsed.diagnostics)
+            console.info(`[jgengine:devtools] ${message}`);
+        return parsed.overrides;
+    }
+    catch {
+        return null;
+    }
+}
+export function persistDevtoolsOverrides(gameName) {
+    const overrides = devtools.overrides.export();
+    try {
+        localStorage.setItem(overridesStorageKey(gameName), JSON.stringify(overrides));
+    }
+    catch {
+        return overrides;
+    }
+    return overrides;
+}
+export function applyStoredDevtoolsOverrides(gameName) {
+    const stored = readStoredOverrides(gameName);
+    if (stored === null)
+        return;
+    const result = devtools.overrides.apply(stored);
+    if (result.applied === 0 && result.skipped.length === 0)
+        return;
+    console.info(`[jgengine:devtools] applied ${result.applied} stored override(s) for ${gameName}` +
+        (result.skipped.length > 0 ? ` · skipped ${result.skipped.length}` : ""));
+    for (const entry of result.skipped) {
+        console.warn(`[jgengine:devtools] skipped override ${entry.id}: ${entry.reason}`);
+    }
+}
+export function withDevtoolsLatency(multiplayer) {
+    return {
+        ...multiplayer,
+        backend: {
+            ...instrumentLatency(multiplayer.backend, ["pushFeedEntry"]),
+            transport: instrumentLatency(multiplayer.backend.transport, ["joinServer", "leaveServer", "runCommand"]),
+        },
+    };
+}
+export function DevtoolsRendererProbe() {
+    const frameCounter = useRef(0);
+    useFrame((state) => {
+        frameCounter.current += 1;
+        if (frameCounter.current % 30 !== 0)
+            return;
+        const info = state.gl.info;
+        devtools.render.record({
+            drawCalls: info.render.calls,
+            triangles: info.render.triangles,
+            geometries: info.memory.geometries,
+            textures: info.memory.textures,
+        });
+    });
+    return null;
+}
+function keybindRows(input) {
+    const rows = [];
+    for (const [action, codes] of Object.entries(input ?? {})) {
+        const entries = flattenCodes(codes);
+        for (const entry of entries)
+            rows.push({ action, ...entry });
+    }
+    return rows;
+}
+function flattenCodes(codes) {
+    if (Array.isArray(codes)) {
+        return [{ codes: codes.map(bindingLabel).join(" / "), mode: "press" }];
+    }
+    const modes = codes;
+    const result = [];
+    if (modes.hold !== undefined && modes.hold.length > 0) {
+        result.push({ codes: modes.hold.map(bindingLabel).join(" / "), mode: "hold" });
+    }
+    if (modes.toggle !== undefined && modes.toggle.length > 0) {
+        result.push({ codes: modes.toggle.map(bindingLabel).join(" / "), mode: "toggle" });
+    }
+    return result;
+}
+const TABS = [
+    { id: "perf", label: "Perf" },
+    { id: "tune", label: "Tune" },
+    { id: "col", label: "Col" },
+    { id: "logs", label: "Logs" },
+    { id: "net", label: "Net" },
+    { id: "keys", label: "Keys" },
+];
+function ms(value) {
+    return `${value.toFixed(1)}ms`;
+}
+function StatRow({ name, value, alert }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("span", { className: "text-neutral-400", children: name }), _jsx("span", { className: `font-mono ${alert === true ? "text-red-400" : "text-neutral-100"}`, children: value })] }));
+}
+function FrameBars({ frames }) {
+    return (_jsx("div", { className: "flex h-10 items-end gap-px", children: frames.map((frameMs, index) => (_jsx("div", { className: `w-1 rounded-sm ${frameMs > LONG_FRAME_MS ? "bg-red-500" : "bg-emerald-500/80"}`, style: { height: `${Math.min(100, (frameMs / (LONG_FRAME_MS * 2)) * 100)}%` }, title: `${frameMs.toFixed(1)}ms` }, index))) }));
+}
+function SectionLabel({ children }) {
+    return _jsx("div", { className: "text-[9px] uppercase tracking-wide text-neutral-500", children: children });
+}
+function PhaseBars({ phases, avgSimMs }) {
+    if (phases.length === 0) {
+        return _jsx("div", { className: "text-neutral-500", children: "No phase samples yet." });
+    }
+    const budget = Math.max(PHASE_BAR_BUDGET_MS, avgSimMs, ...phases.map((phase) => phase.avgMs));
+    return (_jsx("div", { className: "space-y-1", children: phases.slice(0, 8).map((phase) => {
+            const hot = phase.avgMs > 4 || phase.maxMs > 8;
+            return (_jsxs("div", { className: "space-y-0.5", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: `truncate ${hot ? "text-amber-300" : "text-neutral-300"}`, title: phase.name, children: phase.name }), _jsxs("span", { className: `shrink-0 font-mono ${hot ? "text-amber-300" : "text-neutral-100"}`, children: [ms(phase.avgMs), _jsx("span", { className: "text-neutral-500", children: " avg" }), _jsx("span", { className: "text-neutral-600", children: " \u00B7 " }), ms(phase.maxMs), _jsx("span", { className: "text-neutral-500", children: " max" }), _jsx("span", { className: "text-neutral-600", children: " \u00B7 " }), phase.pctOfSim.toFixed(0), "%"] })] }), _jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-neutral-800", children: _jsx("div", { className: `h-full rounded-full ${hot ? "bg-amber-400" : "bg-emerald-500/80"}`, style: { width: `${Math.min(100, (phase.avgMs / budget) * 100)}%` } }) })] }, phase.name));
+        }) }));
+}
+function BudgetSplit({ simMs, outsideMs }) {
+    const total = Math.max(1e-6, simMs + outsideMs);
+    const simPct = (simMs / total) * 100;
+    const outsideHot = outsideMs > simMs && outsideMs > 4;
+    const simHot = simMs > 8;
+    return (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex h-2 overflow-hidden rounded-full bg-neutral-800", children: [_jsx("div", { className: `h-full ${simHot ? "bg-amber-400" : "bg-sky-400"}`, style: { width: `${simPct}%` }, title: `sim ${ms(simMs)}` }), _jsx("div", { className: `h-full ${outsideHot ? "bg-red-500" : "bg-violet-400/80"}`, style: { width: `${100 - simPct}%` }, title: `outside sim ${ms(outsideMs)}` })] }), _jsxs("div", { className: "flex justify-between gap-2 font-mono text-[10px]", children: [_jsxs("span", { className: simHot ? "text-amber-300" : "text-sky-300", children: ["sim ", ms(simMs)] }), _jsxs("span", { className: outsideHot ? "text-red-400" : "text-violet-300", children: ["outside ", ms(outsideMs)] })] }), _jsx("div", { className: "text-[10px] text-neutral-500", children: "outside = render / React / GPU / GC / missed vsync \u2014 not measured inside the sim driver" })] }));
+}
+function diagnose(frame, longs) {
+    if (frame.fps >= 55 && frame.longFrames === 0 && longs.length === 0)
+        return null;
+    const recent = longs.slice(-5);
+    const culpritCounts = new Map();
+    for (const event of recent) {
+        culpritCounts.set(event.culprit, (culpritCounts.get(event.culprit) ?? 0) + 1);
+    }
+    let topCulprit = null;
+    let topCount = 0;
+    for (const [name, count] of culpritCounts) {
+        if (count > topCount) {
+            topCulprit = name;
+            topCount = count;
+        }
+    }
+    if (topCulprit === null && frame.phases[0] !== undefined && frame.avgSimMs > 8) {
+        topCulprit = frame.phases[0].name;
+    }
+    if (topCulprit === null && frame.avgOutsideMs > frame.avgSimMs && frame.avgOutsideMs > 4) {
+        topCulprit = "outside-sim";
+    }
+    if (topCulprit === null) {
+        if (frame.p95FrameMs > LONG_FRAME_MS)
+            return `p95 ${ms(frame.p95FrameMs)} — hitching without a clear phase; check long-frame log as it fills.`;
+        return null;
+    }
+    const hint = CULPRIT_HINTS[topCulprit] ?? `Hotspot “${topCulprit}” — dig into that phase with measure() or reduce its work.`;
+    const countText = topCount > 0 ? ` (${topCount}/${recent.length || topCount} recent long frames)` : "";
+    return `${topCulprit}${countText}: ${hint}`;
+}
+function LongFrameList({ events }) {
+    if (events.length === 0) {
+        return _jsxs("div", { className: "text-neutral-500", children: ["No long frames (>", ms(LONG_FRAME_MS), ") captured yet."] });
+    }
+    const newest = [...events].reverse().slice(0, 12);
+    return (_jsx("div", { className: "jg-devtools-scroll max-h-40 space-y-1.5 overflow-auto", children: newest.map((event, index) => (_jsxs("div", { className: "rounded border border-neutral-800 bg-neutral-900/60 px-1.5 py-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [_jsx("span", { className: "font-mono text-red-400", children: ms(event.frameMs) }), _jsx("span", { className: "truncate text-amber-300", title: event.culprit, children: event.culprit }), _jsx("span", { className: "shrink-0 text-neutral-500", children: new Date(event.at).toLocaleTimeString() })] }), _jsx("div", { className: "mt-0.5 text-[10px] leading-snug text-neutral-300", children: event.reason }), event.phases.length > 0 ? (_jsxs("div", { className: "mt-0.5 font-mono text-[9px] text-neutral-500", children: [event.phases
+                            .slice(0, 4)
+                            .map((phase) => `${phase.name} ${phase.ms.toFixed(1)}`)
+                            .join(" · "), event.outsideMs >= 2 ? ` · outside ${event.outsideMs.toFixed(1)}` : ""] })) : event.outsideMs >= 2 ? (_jsxs("div", { className: "mt-0.5 font-mono text-[9px] text-neutral-500", children: ["outside ", event.outsideMs.toFixed(1)] })) : null, event.render !== null ? (_jsxs("div", { className: "mt-0.5 font-mono text-[9px] text-neutral-600", children: ["draws ", event.render.drawCalls, " \u00B7 tris ", event.render.triangles.toLocaleString()] })) : null] }, `${event.at}-${index}`))) }));
+}
+function PerfPanel({ ctx }) {
+    const rateRef = useRef({ version: 0, at: 0, perSecond: 0 });
+    const frame = devtools.frame.stats();
+    const render = devtools.render.latest();
+    const longs = devtools.frame.longFrames();
+    const now = performance.now();
+    const rate = rateRef.current;
+    if (rate.at === 0) {
+        rateRef.current = { version: ctx.version(), at: now, perSecond: 0 };
+    }
+    else if (now - rate.at >= 900) {
+        const perSecond = ((ctx.version() - rate.version) / (now - rate.at)) * 1000;
+        rateRef.current = { version: ctx.version(), at: now, perSecond };
+    }
+    const diagnosis = frame !== null ? diagnose(frame, longs) : null;
+    return (_jsxs("div", { className: "jg-devtools-scroll max-h-[28rem] space-y-3 overflow-auto", children: [frame === null ? (_jsx("div", { className: "text-neutral-400", children: "Waiting for frames\u2026" })) : (_jsxs(_Fragment, { children: [_jsx(FrameBars, { frames: frame.recentFrameMs }), _jsx(StatRow, { name: "fps", value: frame.fps.toFixed(0), alert: frame.fps < 50 }), _jsx(StatRow, { name: "frame avg / p95 / max", value: `${ms(frame.avgFrameMs)} / ${ms(frame.p95FrameMs)} / ${ms(frame.maxFrameMs)}`, alert: frame.p95FrameMs > LONG_FRAME_MS }), _jsx(StatRow, { name: "sim avg / max", value: `${ms(frame.avgSimMs)} / ${ms(frame.maxSimMs)}`, alert: frame.avgSimMs > 8 }), _jsx(StatRow, { name: "outside avg / max", value: `${ms(frame.avgOutsideMs)} / ${ms(frame.maxOutsideMs)}`, alert: frame.avgOutsideMs > 12 }), _jsx(StatRow, { name: `long frames (of ${frame.samples})`, value: String(frame.longFrames), alert: frame.longFrames > 5 }), diagnosis !== null ? (_jsxs("div", { className: "rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[10px] leading-snug text-amber-100", children: [_jsx("span", { className: "font-semibold text-amber-300", children: "Why slow \u00B7 " }), diagnosis] })) : (_jsx("div", { className: "text-[10px] text-emerald-400/90", children: "Frame budget healthy \u2014 no dominant hitch pattern." })), _jsxs("div", { className: "space-y-1", children: [_jsx(SectionLabel, { children: "frame budget" }), _jsx(BudgetSplit, { simMs: frame.avgSimMs, outsideMs: frame.avgOutsideMs })] }), _jsxs("div", { className: "space-y-1", children: [_jsx(SectionLabel, { children: "sim phases (avg)" }), _jsx(PhaseBars, { phases: frame.phases, avgSimMs: frame.avgSimMs })] })] })), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(SectionLabel, { children: "long frames" }), longs.length > 0 ? (_jsx("button", { type: "button", className: "rounded border border-neutral-700 px-1.5 py-0.5 text-[9px] text-neutral-400 hover:bg-neutral-800", onClick: () => devtools.frame.clearLongFrames(), children: "Clear" })) : null] }), _jsx(LongFrameList, { events: longs })] }), render !== null ? (_jsxs("div", { className: "space-y-1", children: [_jsx(SectionLabel, { children: "render sample" }), _jsx(StatRow, { name: "draw calls", value: String(render.drawCalls), alert: render.drawCalls > 1000 }), _jsx(StatRow, { name: "triangles", value: render.triangles.toLocaleString() }), _jsx(StatRow, { name: "geometries / textures", value: `${render.geometries} / ${render.textures}` })] })) : null, _jsxs("div", { className: "space-y-1", children: [_jsx(SectionLabel, { children: "probes" }), _jsx(StatRow, { name: "state notifies /s", value: rateRef.current.perSecond.toFixed(0), alert: rateRef.current.perSecond > 90 }), Object.entries(devtools.probes.read()).map(([name, value]) => (_jsx(StatRow, { name: name, value: String(value) }, name)))] }), _jsx("div", { className: "text-[9px] leading-snug text-neutral-600", children: "Game code: measure(\"physics\", () => \u2026) inside onTick. Agents: snapshot().longFrames + frame.phases" })] }));
+}
+function LogsPanel() {
+    const entries = devtools.logs.list().slice(-60);
+    const colors = {
+        error: "text-red-400",
+        warn: "text-amber-300",
+        info: "text-sky-300",
+        log: "text-neutral-300",
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("button", { type: "button", className: "rounded border border-neutral-600 px-2 py-0.5 text-neutral-300 hover:bg-neutral-800", onClick: () => devtools.logs.clear(), children: "Clear" }), _jsxs("div", { className: "jg-devtools-scroll max-h-64 space-y-0.5 overflow-auto font-mono text-[10px]", children: [entries.length === 0 ? _jsx("div", { className: "text-neutral-400", children: "No logs captured yet." }) : null, entries.map((entry, index) => (_jsxs("div", { className: colors[entry.level], children: [_jsxs("span", { className: "text-neutral-500", children: [new Date(entry.at).toLocaleTimeString(), " "] }), entry.message] }, index)))] })] }));
+}
+function NetPanel({ multiplayer }) {
+    const stats = devtools.latency.stats();
+    if (multiplayer === null) {
+        return _jsx("div", { className: "text-neutral-400", children: "Offline \u2014 no multiplayer backend attached." });
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(StatRow, { name: "game / user", value: `${multiplayer.gameId} / ${multiplayer.userId}` }), stats === null ? (_jsx("div", { className: "text-neutral-400", children: "No round trips observed yet \u2014 latency is sampled from real backend calls." })) : (_jsxs(_Fragment, { children: [_jsx(StatRow, { name: "last round trip", value: ms(stats.lastMs), alert: stats.lastMs > 250 }), _jsx(StatRow, { name: "avg / min / max", value: `${ms(stats.avgMs)} / ${ms(stats.minMs)} / ${ms(stats.maxMs)}` }), _jsx(StatRow, { name: "samples", value: String(stats.samples) })] }))] }));
+}
+function KeysPanel({ input }) {
+    const rows = keybindRows(input);
+    if (rows.length === 0)
+        return _jsx("div", { className: "text-neutral-400", children: "This game declares no keybinds." });
+    return (_jsx("div", { className: "jg-devtools-scroll max-h-64 space-y-0.5 overflow-auto", children: rows.map((row, index) => (_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("span", { className: "text-neutral-300", children: row.action }), _jsxs("span", { className: "font-mono text-neutral-100", children: [row.codes, row.mode !== "press" ? _jsx("span", { className: "ml-1 text-[9px] uppercase text-neutral-500", children: row.mode }) : null] })] }, index))) }));
+}
+const LAYER_LABELS = {
+    hitboxes: "Damage hitboxes",
+    bodies: "Physical bodies",
+    projectiles: "Projectile paths",
+    muzzles: "Muzzle / shot origins",
+    aimLaser: "Aim laser (authoritative)",
+};
+function ColPanel() {
+    const state = useSyncExternalStore(collisionDebug.subscribe, () => collisionDebug.getState(), () => collisionDebug.getState());
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-[10px] text-neutral-500", children: "F2 world collision debugger \u00B7 layers stay on when panel closes \u00B7 zero cost when all off" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { type: "button", className: "rounded border border-neutral-600 px-2 py-0.5 text-neutral-300 hover:bg-neutral-800", onClick: () => collisionDebug.setAllLayers(true), children: "All on" }), _jsx("button", { type: "button", className: "rounded border border-neutral-600 px-2 py-0.5 text-neutral-300 hover:bg-neutral-800", onClick: () => collisionDebug.setAllLayers(false), children: "All off" })] }), _jsx("div", { className: "space-y-1", children: COLLISION_DEBUG_LAYERS.map((layer) => (_jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-neutral-200", children: [_jsx("input", { type: "checkbox", checked: state.layers[layer], onChange: (event) => collisionDebug.setLayer(layer, event.target.checked) }), _jsx("span", { children: LAYER_LABELS[layer] })] }, layer))) }), _jsx("div", { className: "border-t border-neutral-800 pt-1.5 font-mono text-[9px] text-neutral-500", children: "hitbox pink \u00B7 body cyan \u00B7 muzzle red \u00B7 laser lime \u00B7 X damage \u00B7 \u25CB solid \u00B7 \u00B7 miss" })] }));
+}
+function ControlInput({ control, onWrite }) {
+    const value = control.read();
+    const write = (next) => {
+        if (control.write(next))
+            onWrite();
+    };
+    if (control.kind === "slider" || control.kind === "angle") {
+        const unit = control.unit ?? "rad";
+        const displayUnit = control.displayUnit ?? (control.kind === "angle" ? "deg" : unit);
+        const displayValue = control.kind === "angle" && typeof value === "number"
+            ? convertAngle(value, unit, displayUnit)
+            : Number(value);
+        const displayMin = control.min !== undefined && control.kind === "angle"
+            ? convertAngle(control.min, unit, displayUnit)
+            : control.min;
+        const displayMax = control.max !== undefined && control.kind === "angle"
+            ? convertAngle(control.max, unit, displayUnit)
+            : control.max;
+        const displayStep = control.step !== undefined && control.kind === "angle" && unit !== displayUnit
+            ? convertAngle(control.step, unit, displayUnit)
+            : control.step;
+        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "range", className: "h-1 w-28 accent-emerald-400", min: displayMin, max: displayMax, step: displayStep, value: displayValue, onChange: (event) => {
+                        const next = Number(event.target.value);
+                        write(control.kind === "angle" ? convertAngle(next, displayUnit, unit) : next);
+                    } }), _jsx("input", { type: "number", className: "w-16 rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 font-mono text-neutral-100", step: displayStep, value: Number(displayValue.toFixed(4)), onChange: (event) => {
+                        const next = Number(event.target.value);
+                        if (!Number.isNaN(next)) {
+                            write(control.kind === "angle" ? convertAngle(next, displayUnit, unit) : next);
+                        }
+                    } }), control.kind === "angle" ? (_jsx("span", { className: "text-[10px] text-neutral-500", children: displayUnit })) : null] }));
+    }
+    if (control.kind === "toggle") {
+        return (_jsx("input", { type: "checkbox", className: "h-4 w-4 accent-emerald-400", checked: Boolean(value), onChange: (event) => write(event.target.checked) }));
+    }
+    if (control.kind === "color") {
+        const parsed = parseColor(value);
+        const rgb = parsed?.rgb ?? "#000000";
+        const alpha = parsed?.alpha ?? 1;
+        const showAlpha = control.hasAlpha === true || parsed?.hasAlpha === true;
+        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", className: "h-6 w-10 cursor-pointer rounded border border-neutral-600 bg-transparent", value: rgb, onChange: (event) => {
+                        if (showAlpha) {
+                            const a = Math.round(alpha * 255)
+                                .toString(16)
+                                .padStart(2, "0");
+                            write(`${event.target.value}${a}`);
+                        }
+                        else {
+                            write(event.target.value);
+                        }
+                    } }), showAlpha ? (_jsx("input", { type: "range", className: "h-1 w-16 accent-emerald-400", min: 0, max: 1, step: 0.01, value: alpha, onChange: (event) => {
+                        const nextAlpha = Number(event.target.value);
+                        const a = Math.round(nextAlpha * 255)
+                            .toString(16)
+                            .padStart(2, "0");
+                        write(`${rgb}${a}`);
+                    } })) : null] }));
+    }
+    if (control.kind === "select" || control.kind === "enum") {
+        const choices = control.choices ??
+            control.options?.map((option) => ({ value: option, label: String(option) })) ??
+            [];
+        return (_jsx("select", { className: "rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 text-neutral-100", value: String(value), onChange: (event) => {
+                const match = choices.find((choice) => String(choice.value) === event.target.value);
+                if (match !== undefined)
+                    write(match.value);
+            }, children: choices.map((choice) => (_jsx("option", { value: String(choice.value), children: choice.label ?? String(choice.value) }, String(choice.value)))) }));
+    }
+    if (control.kind === "vec2" || control.kind === "vec3" || control.kind === "vec4") {
+        const axes = Array.isArray(value) ? value : [];
+        const labels = control.axisLabels ?? ["x", "y", "z", "w"];
+        return (_jsx("div", { className: "flex flex-wrap items-center gap-1", children: axes.map((axis, index) => (_jsxs("label", { className: "flex items-center gap-0.5 text-[10px] text-neutral-400", children: [_jsx("span", { children: labels[index] }), _jsx("input", { type: "number", className: "w-14 rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 font-mono text-neutral-100", min: control.axisMin?.[index], max: control.axisMax?.[index], step: control.axisStep?.[index] ?? control.step, value: axis, onChange: (event) => {
+                            const next = Number(event.target.value);
+                            if (Number.isNaN(next))
+                                return;
+                            const copy = axes.slice();
+                            copy[index] = next;
+                            write(copy);
+                        } })] }, labels[index] ?? index))) }));
+    }
+    if (control.kind === "interval") {
+        const interval = value !== null && typeof value === "object" && !Array.isArray(value)
+            ? value
+            : { min: 0, max: 0 };
+        const writeInterval = (min, max) => write({ min, max });
+        return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { type: "number", className: "w-14 rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 font-mono text-neutral-100", min: control.min, max: control.max, step: control.step, value: interval.min, onChange: (event) => {
+                        const next = Number(event.target.value);
+                        if (!Number.isNaN(next))
+                            writeInterval(next, interval.max);
+                    } }), _jsx("span", { className: "text-neutral-500", children: "\u2026" }), _jsx("input", { type: "number", className: "w-14 rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 font-mono text-neutral-100", min: control.min, max: control.max, step: control.step, value: interval.max, onChange: (event) => {
+                        const next = Number(event.target.value);
+                        if (!Number.isNaN(next))
+                            writeInterval(interval.min, next);
+                    } })] }));
+    }
+    return (_jsx("input", { type: "text", className: "w-32 rounded border border-neutral-600 bg-neutral-900 px-1 py-0.5 font-mono text-neutral-100", value: String(value), onChange: (event) => write(event.target.value) }));
+}
+function formatPreview(value) {
+    if (typeof value === "number")
+        return String(Math.round(value * 1000) / 1000);
+    if (Array.isArray(value))
+        return value.map((entry) => formatPreview(entry)).join(", ");
+    if (value !== null && typeof value === "object") {
+        try {
+            return JSON.stringify(value);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    return String(value);
+}
+const TUNABLE_ACRONYMS = new Set([
+    "fov",
+    "fps",
+    "ms",
+    "ui",
+    "ai",
+    "id",
+    "uv",
+    "rgb",
+    "rgba",
+    "hp",
+    "mp",
+    "xp",
+    "npc",
+    "pvp",
+    "pve",
+    "rts",
+    "hud",
+    "lod",
+    "gpu",
+    "cpu",
+]);
+function humanizeTunableSegment(segment) {
+    if (/^\d+$/.test(segment))
+        return `#${segment}`;
+    return segment
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .split(/\s+/)
+        .filter((part) => part.length > 0)
+        .map((part) => {
+        const lower = part.toLowerCase();
+        if (TUNABLE_ACRONYMS.has(lower))
+            return lower.toUpperCase();
+        return part.charAt(0).toUpperCase() + part.slice(1);
+    })
+        .join(" ");
+}
+function tunableGroupTitle(table, key) {
+    const dot = key.lastIndexOf(".");
+    if (dot < 0)
+        return humanizeTunableSegment(table);
+    const parent = key.slice(0, dot);
+    const parts = parent.split(".").map(humanizeTunableSegment);
+    return `${humanizeTunableSegment(table)} · ${parts.join(" · ")}`;
+}
+function tunableRowLabel(key) {
+    const leaf = key.includes(".") ? key.slice(key.lastIndexOf(".") + 1) : key;
+    return humanizeTunableSegment(leaf);
+}
+function tunableGroupKey(table, key) {
+    const dot = key.lastIndexOf(".");
+    return dot < 0 ? table : `${table}/${key.slice(0, dot)}`;
+}
+function deltaSnippet(discovered) {
+    const overrides = devtools.overrides.export();
+    if (Object.keys(overrides.values).length === 0)
+        return null;
+    const discoveredById = new Map(discovered.map((entry) => [entry.id, entry]));
+    const tables = new Map();
+    const flat = {};
+    for (const [name, value] of Object.entries(overrides.values)) {
+        const entry = discoveredById.get(name);
+        if (entry !== undefined) {
+            const values = tables.get(entry.table) ?? {};
+            values[entry.key] = value;
+            tables.set(entry.table, values);
+        }
+        else {
+            flat[name] = value;
+        }
+    }
+    const parts = [];
+    for (const [table, values] of tables)
+        parts.push(`${table}: ${JSON.stringify(values, null, 2)}`);
+    if (Object.keys(flat).length > 0)
+        parts.push(`controls: ${JSON.stringify(flat, null, 2)}`);
+    return parts.join("\n\n");
+}
+function TunePanel({ gameName }) {
+    const [deltasCopied, setDeltasCopied] = useState(false);
+    const [query, setQuery] = useState("");
+    const controls = devtools.controls.list();
+    const allDiscovered = devtools.discover.list();
+    const persist = () => persistDevtoolsOverrides(gameName);
+    const discoveredIds = new Set(allDiscovered.map((entry) => entry.id));
+    const needle = query.trim().toLowerCase();
+    const matches = (id) => needle === "" || id.toLowerCase().includes(needle);
+    const discovered = allDiscovered.filter((entry) => entry.enabled || matches(entry.id));
+    const explicit = controls.filter((control) => !discoveredIds.has(control.name) && matches(control.name));
+    const controlByName = new Map(controls.map((control) => [control.name, control]));
+    const snippet = deltaSnippet(allDiscovered);
+    const copyDeltas = () => {
+        if (snippet === null)
+            return;
+        const clipboard = navigator.clipboard;
+        if (clipboard !== undefined) {
+            void clipboard.writeText(snippet).catch(() => console.log(snippet));
+        }
+        else {
+            console.log(snippet);
+        }
+        setDeltasCopied(true);
+        setTimeout(() => setDeltasCopied(false), 1500);
+    };
+    if (controls.length === 0 && allDiscovered.length === 0) {
+        return (_jsxs("div", { className: "space-y-2 text-neutral-400", children: [_jsx("div", { children: "Nothing discovered." }), _jsxs("div", { className: "font-mono text-[10px] text-neutral-500", children: ["export const TUNING = { gravity: -22, skyColor: \"#87ceeb\" };", _jsx("br", {}), "Nested numbers/booleans/colors auto-discover. Schema kinds:", _jsx("br", {}), "vec2/3/4 · interval · angle · enum · color+alpha via tunable() or scan meta."] })] }));
+    }
+    const groups = new Map();
+    for (const entry of discovered) {
+        const groupKey = tunableGroupKey(entry.table, entry.key);
+        const existing = groups.get(groupKey);
+        if (existing !== undefined) {
+            existing.entries.push(entry);
+        }
+        else {
+            groups.set(groupKey, { title: tunableGroupTitle(entry.table, entry.key), entries: [entry] });
+        }
+    }
+    return (_jsxs("div", { className: "jg-devtools-scroll max-h-72 space-y-3 overflow-auto", children: [_jsxs("div", { className: "flex gap-1.5", children: [_jsx("button", { type: "button", className: "rounded border border-neutral-600 px-2 py-0.5 text-neutral-300 hover:bg-neutral-800", onClick: () => {
+                            devtools.controls.resetAll();
+                            persist();
+                        }, children: "Reset all" }), _jsx("button", { type: "button", disabled: snippet === null, className: "rounded border border-neutral-600 px-2 py-0.5 text-neutral-300 hover:bg-neutral-800 disabled:opacity-40 disabled:hover:bg-transparent", onClick: copyDeltas, title: "Copy changed values as source snippets to paste upstream", children: deltasCopied ? "Copied" : "Copy deltas" }), _jsx("input", { type: "text", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "filter\u2026", className: "min-w-0 flex-1 rounded border border-neutral-600 bg-transparent px-2 py-0.5 text-neutral-200 placeholder:text-neutral-600 focus:outline-none" })] }), explicit.length === 0 && discovered.length === 0 ? (_jsxs("div", { className: "text-neutral-500", children: ["No tunables match \u201C", query, "\u201D."] })) : null, explicit.length > 0 ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "text-[9px] uppercase tracking-wide text-neutral-500", children: "registered" }), explicit.map((control) => (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-neutral-300", title: control.name, children: control.label.includes(".") ? tunableRowLabel(control.label) : control.label }), _jsx(ControlInput, { control: control, onWrite: persist })] }, control.name)))] })) : null, [...groups.entries()].map(([groupKey, group]) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "text-[9px] uppercase tracking-wide text-neutral-500", children: group.title }), group.entries.map((entry) => {
+                        const control = entry.enabled ? controlByName.get(entry.id) : undefined;
+                        return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("label", { className: "flex min-w-0 items-center gap-1.5 text-neutral-300", title: entry.id, children: [_jsx("input", { type: "checkbox", className: "h-3 w-3 shrink-0 accent-emerald-400", checked: entry.enabled, onChange: (event) => {
+                                                if (event.target.checked)
+                                                    devtools.discover.enable(entry.id);
+                                                else
+                                                    devtools.discover.disable(entry.id);
+                                                persist();
+                                            } }), _jsx("span", { className: "truncate", children: tunableRowLabel(entry.key) })] }), control !== undefined ? (_jsx(ControlInput, { control: control, onWrite: persist })) : (_jsx("span", { className: "font-mono text-neutral-500", children: formatPreview(entry.read()) }))] }, entry.id));
+                    })] }, groupKey)))] }));
+}
+function roundMs(value, digits = 1) {
+    const scale = 10 ** digits;
+    return Math.round(value * scale) / scale;
+}
+function compactLongFrame(event) {
+    return {
+        at: event.at,
+        frameMs: roundMs(event.frameMs),
+        simMs: roundMs(event.simMs),
+        outsideMs: roundMs(event.outsideMs),
+        culprit: event.culprit,
+        reason: event.reason,
+        phases: event.phases.slice(0, 4).map((phase) => ({
+            name: phase.name,
+            ms: roundMs(phase.ms),
+        })),
+        probes: event.probes,
+        render: event.render,
+    };
+}
+function summarizeLongFrames(events) {
+    if (events.length === 0)
+        return null;
+    const byCulprit = new Map();
+    let maxFrameMs = 0;
+    let maxDraws = 0;
+    let maxGeometries = 0;
+    for (const event of events) {
+        byCulprit.set(event.culprit, (byCulprit.get(event.culprit) ?? 0) + 1);
+        maxFrameMs = Math.max(maxFrameMs, event.frameMs);
+        if (event.render !== null) {
+            maxDraws = Math.max(maxDraws, event.render.drawCalls);
+            maxGeometries = Math.max(maxGeometries, event.render.geometries);
+        }
+    }
+    const culprits = [...byCulprit.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .map(([culprit, count]) => ({ culprit, count }));
+    return {
+        count: events.length,
+        culprits,
+        maxFrameMs: roundMs(maxFrameMs),
+        maxDrawCalls: maxDraws > 0 ? maxDraws : undefined,
+        maxGeometries: maxGeometries > 0 ? maxGeometries : undefined,
+    };
+}
+export function buildLeanReport(playable) {
+    const snap = devtools.snapshot();
+    const frame = snap.frame;
+    const longs = snap.longFrames;
+    const why = frame !== null ? diagnose(frame, longs) : null;
+    const changedControls = snap.controls
+        .filter((control) => !Object.is(control.value, control.initial))
+        .map((control) => ({ name: control.name, value: control.value, initial: control.initial }));
+    const enabledDiscovered = snap.discovered
+        .filter((entry) => entry.enabled)
+        .map((entry) => ({ id: entry.id, value: entry.value }));
+    const hotLogs = snap.logs.filter((entry) => entry.level === "warn" || entry.level === "error").slice(-20);
+    return {
+        game: playable.game.name,
+        at: snap.at,
+        why,
+        frame: frame === null
+            ? null
+            : {
+                fps: roundMs(frame.fps, 1),
+                avgFrameMs: roundMs(frame.avgFrameMs),
+                p95FrameMs: roundMs(frame.p95FrameMs),
+                maxFrameMs: roundMs(frame.maxFrameMs),
+                avgSimMs: roundMs(frame.avgSimMs),
+                maxSimMs: roundMs(frame.maxSimMs),
+                avgOutsideMs: roundMs(frame.avgOutsideMs),
+                maxOutsideMs: roundMs(frame.maxOutsideMs),
+                longFrames: frame.longFrames,
+                samples: frame.samples,
+                phases: frame.phases.slice(0, 8).map((phase) => ({
+                    name: phase.name,
+                    avgMs: roundMs(phase.avgMs),
+                    maxMs: roundMs(phase.maxMs),
+                    pctOfSim: Math.round(phase.pctOfSim),
+                })),
+            },
+        render: snap.render,
+        latency: snap.latency,
+        longFrameSummary: summarizeLongFrames(longs),
+        longFrames: longs.slice(-6).map(compactLongFrame),
+        probes: snap.probes,
+        logs: hotLogs.length > 0 ? hotLogs : undefined,
+        controls: changedControls.length > 0 ? changedControls : undefined,
+        discovered: enabledDiscovered.length > 0 ? enabledDiscovered : undefined,
+        discoveredCount: snap.discovered.length,
+    };
+}
+export function buildFullReport(playable) {
+    return { game: playable.game.name, ...devtools.snapshot() };
+}
+export function DevtoolsOverlay({ open, ctx, playable, multiplayer, }) {
+    const [tab, setTab] = useState("perf");
+    const [, setTick] = useState(0);
+    const [copied, setCopied] = useState(false);
+    useSyncExternalStore(devtools.signal.subscribe, devtools.signal.version, devtools.signal.version);
+    useEffect(() => {
+        devtools.logs.captureConsole();
+        globalThis.__JG_DEVTOOLS = {
+            snapshot: () => buildLeanReport(playable),
+            snapshotFull: () => buildFullReport(playable),
+            controls: devtools.controls,
+            discover: devtools.discover,
+            frame: devtools.frame,
+            profile: devtools.profile,
+            collisionDebug,
+        };
+    }, [playable]);
+    useEffect(() => {
+        devtools.discover.scanTable("game", playable);
+        devtools.discover.scanTable("engine", { movement: MOVEMENT_TUNING });
+    }, [playable]);
+    useEffect(() => {
+        const stored = readStoredOverrides(playable.game.name);
+        if (stored === null)
+            return;
+        const appliedEnables = new Set();
+        const appliedValues = new Set();
+        const applyLateRegistrations = () => {
+            const discovered = new Map(devtools.discover.list().map((entry) => [entry.id, entry]));
+            const needEnable = stored.enabled.filter((id) => !appliedEnables.has(id) && discovered.get(id)?.enabled === false);
+            const needValue = Object.entries(stored.values).filter(([name]) => !appliedValues.has(name) && devtools.controls.get(name) !== null);
+            if (needEnable.length === 0 && needValue.length === 0)
+                return;
+            for (const id of needEnable)
+                appliedEnables.add(id);
+            for (const [name] of needValue)
+                appliedValues.add(name);
+            devtools.overrides.apply({ enabled: needEnable, values: Object.fromEntries(needValue) });
+        };
+        applyLateRegistrations();
+        return devtools.signal.subscribe(applyLateRegistrations);
+    }, [playable]);
+    useEffect(() => {
+        const disposers = [
+            devtools.probes.register("entities", () => ctx.scene.entity.list().length),
+            devtools.probes.register("objects", () => ctx.scene.object.list().length),
+        ];
+        return () => {
+            for (const dispose of disposers)
+                dispose();
+        };
+    }, [ctx]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const interval = setInterval(() => setTick((current) => current + 1), REFRESH_MS);
+        return () => clearInterval(interval);
+    }, [open]);
+    if (!open)
+        return null;
+    const copyReport = () => {
+        const report = JSON.stringify(buildLeanReport(playable), null, 2);
+        const clipboard = navigator.clipboard;
+        if (clipboard !== undefined) {
+            void clipboard.writeText(report).catch(() => console.log(report));
+        }
+        else {
+            console.log(report);
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    };
+    return (_jsxs("div", { className: "pointer-events-auto absolute left-4 top-4 z-50 w-[22rem] rounded border border-neutral-700 bg-neutral-950/95 p-3 text-xs text-neutral-100 shadow-2xl", children: [_jsx("style", { children: `
+        .jg-devtools-scroll {
+          scrollbar-width: thin;
+          scrollbar-color: #52525b #18181b;
+        }
+        .jg-devtools-scroll::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+        .jg-devtools-scroll::-webkit-scrollbar-track {
+          background: #18181b;
+          border-radius: 9999px;
+        }
+        .jg-devtools-scroll::-webkit-scrollbar-thumb {
+          background-color: #52525b;
+          border-radius: 9999px;
+          border: 2px solid #18181b;
+        }
+        .jg-devtools-scroll::-webkit-scrollbar-thumb:hover {
+          background-color: #71717a;
+        }
+      ` }), _jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("span", { className: "font-semibold uppercase tracking-wide text-neutral-300", children: [playable.game.name, " devtools"] }), _jsx("button", { type: "button", className: "rounded border border-neutral-600 px-2 py-0.5 text-neutral-300 hover:bg-neutral-800", onClick: copyReport, children: copied ? "Copied" : "Copy report" })] }), _jsx("div", { className: "mb-2 flex gap-1", children: TABS.map((entry) => (_jsx("button", { type: "button", className: `rounded px-2 py-0.5 ${tab === entry.id ? "bg-neutral-100 text-neutral-950" : "text-neutral-400 hover:bg-neutral-800"}`, onClick: () => setTab(entry.id), children: entry.label }, entry.id))) }), tab === "perf" ? _jsx(PerfPanel, { ctx: ctx }) : null, tab === "logs" ? _jsx(LogsPanel, {}) : null, tab === "net" ? _jsx(NetPanel, { multiplayer: multiplayer }) : null, tab === "keys" ? _jsx(KeysPanel, { input: playable.game.input }) : null, tab === "tune" ? _jsx(TunePanel, { gameName: playable.game.name }) : null, tab === "col" ? _jsx(ColPanel, {}) : null, _jsx("div", { className: "mt-2 border-t border-neutral-800 pt-1.5 text-[9px] text-neutral-500", children: "F2 toggles \u00B7 Col = collision \u00B7 agents: __JG_DEVTOOLS.snapshot() \u00B7 .collisionDebug" })] }));
+}