@jgengine/shell 0.10.0 → 0.11.0

package/dist/devtools/PerfPanel.js

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { devtools, LONG_FRAME_MS } from "@jgengine/core/devtools/devtools";
+import { ms, SectionLabel, StatRow } from "./panelAtoms.js";
+import { diagnose } from "./perfDiagnose.js";
+const PHASE_BAR_BUDGET_MS = 16.7;
+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-full ${frameMs > LONG_FRAME_MS ? "bg-red-400" : "bg-cyan-400/70"}`, style: { height: `${Math.min(100, (frameMs / (LONG_FRAME_MS * 2)) * 100)}%` }, title: `${frameMs.toFixed(1)}ms` }, index))) }));
+}
+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-white/[0.06]", children: _jsx("div", { className: `h-full rounded-full ${hot ? "bg-gradient-to-r from-amber-400 to-amber-300" : "bg-gradient-to-r from-cyan-500 to-cyan-400/70"}`, 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-white/[0.06]", 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 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-md border border-white/[0.06] bg-white/[0.03] px-2 py-1.5", 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}`))) }));
+}
+export 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" })] }));
+}

package/dist/devtools/TunePanel.d.ts

@@ -0,0 +1,3 @@
+export declare function TunePanel({ gameName }: {
+    gameName: string;
+}): import("react").JSX.Element;

package/dist/devtools/TunePanel.js

@@ -0,0 +1,309 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { convertAngle, devtools, parseColor, } from "@jgengine/core/devtools/devtools";
+import { getSaveEndpoint } from "@jgengine/core/devtools/saveEndpoint";
+import { persistDevtoolsOverrides } from "./devtoolsOverrides.js";
+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-cyan-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-md border border-white/10 bg-black/40 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-cyan-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-cyan-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-md border border-white/10 bg-black/40 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-md border border-white/10 bg-black/40 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-md border border-white/10 bg-black/40 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-md border border-white/10 bg-black/40 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-md border border-white/10 bg-black/40 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 tunableDeltas(discovered) {
+    const overrides = devtools.overrides.export();
+    const discoveredById = new Map(discovered.map((entry) => [entry.id, entry]));
+    const deltas = [];
+    for (const [name, value] of Object.entries(overrides.values)) {
+        const entry = discoveredById.get(name);
+        if (entry !== undefined)
+            deltas.push({ table: entry.table, key: entry.key, value });
+    }
+    return deltas;
+}
+function SaveToSourceButton({ discovered }) {
+    const [state, setState] = useState("idle");
+    const [detail, setDetail] = useState(null);
+    const endpoint = getSaveEndpoint();
+    if (endpoint === null)
+        return null;
+    const deltas = tunableDeltas(discovered);
+    const save = () => {
+        if (deltas.length === 0 || state === "saving")
+            return;
+        setState("saving");
+        void fetch(endpoint.url, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ kind: "tunables", gameId: endpoint.gameId, deltas }),
+        })
+            .then(async (response) => {
+            const result = (await response.json());
+            if (!result.ok) {
+                setState("error");
+                setDetail(result.error ?? "save failed");
+                return;
+            }
+            const skipped = result.skipped ?? [];
+            if (skipped.length > 0) {
+                setState("partial");
+                setDetail(skipped.map((entry) => `${entry.table}/${entry.key}: ${entry.reason}`).join("\n"));
+            }
+            else {
+                setState("saved");
+                setDetail(null);
+            }
+            setTimeout(() => setState("idle"), 2500);
+        })
+            .catch((error) => {
+            setState("error");
+            setDetail(error instanceof Error ? error.message : String(error));
+        });
+    };
+    return (_jsx("button", { type: "button", disabled: deltas.length === 0, className: "rounded-md bg-cyan-500/15 px-2 py-0.5 text-cyan-200 ring-1 ring-inset ring-cyan-400/25 transition-colors hover:bg-cyan-500/25 disabled:opacity-40 disabled:hover:bg-cyan-500/15", onClick: save, title: detail ?? "Write changed values back into the game's source files", children: state === "saving"
+            ? "Saving…"
+            : state === "saved"
+                ? "Saved to source"
+                : state === "partial"
+                    ? "Saved (some skipped)"
+                    : state === "error"
+                        ? "Save failed"
+                        : `Save to source${deltas.length > 0 ? ` (${deltas.length})` : ""}` }));
+}
+export 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-md bg-white/[0.04] px-2 py-0.5 text-neutral-300 ring-1 ring-inset ring-white/[0.08] transition-colors hover:bg-white/10", onClick: () => {
+                            devtools.controls.resetAll();
+                            persist();
+                        }, children: "Reset all" }), _jsx("button", { type: "button", disabled: snippet === null, className: "rounded-md bg-white/[0.04] px-2 py-0.5 text-neutral-300 ring-1 ring-inset ring-white/[0.08] transition-colors hover:bg-white/10 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(SaveToSourceButton, { discovered: allDiscovered }), _jsx("input", { type: "text", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "filter\u2026", className: "min-w-0 flex-1 rounded-md border border-white/10 bg-black/30 px-2 py-0.5 text-neutral-200 transition-colors placeholder:text-neutral-600 focus:border-cyan-400/60 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-cyan-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)))] }));
+}

package/dist/devtools/agentBridge.d.ts

@@ -0,0 +1,41 @@
+import type { PlayableGame } from "../registry.js";
+/** One RPC call into the agent bridge: a verb name plus its verb-specific fields. */
+export type AgentBridgeRequest = {
+    method: string;
+} & Record<string, unknown>;
+/** Result of an agent bridge call: `ok: true` with verb payload, or `ok: false` with a reason. */
+export type AgentBridgeResponse = {
+    ok: true;
+    [key: string]: unknown;
+} | {
+    ok: false;
+    error: string;
+};
+type EditorHost = {
+    gameId: string;
+    handle(request: AgentBridgeRequest): unknown;
+};
+declare global {
+    interface Window {
+        __jgengineAgent?: {
+            handle(request: AgentBridgeRequest): unknown;
+        };
+        __jgengineEditorHost?: EditorHost;
+        __jgengineSummonEditor?: () => void;
+    }
+}
+/**
+ * @internal
+ * Headless control plane spanning the F2 chord family: debug mode (F2+D),
+ * canvas mode (F2+C), and editor mode (F2+E). Installed on every
+ * GamePlayerShell mount as `window.__jgengineAgent`; unknown verbs delegate
+ * to the editor host when one is live, so a single RPC surface covers all
+ * three modes for `bun run drive --rpc`.
+ */
+export declare function installAgentBridge(options: {
+    playable: PlayableGame;
+    devtoolsEnabled: boolean;
+    isDevtoolsOpen: () => boolean;
+    setDevtoolsOpen: (open: boolean) => void;
+}): () => void;
+export {};