refactor(app): carve the viz layer out of app.js — and delete the loader seam (R3a)

static/js/viz.js (770 lines) — the viz picker, renderer selection, Auto-match,
the WebGL2 probe, the 3D-promotion nag, the notation hints. Bodies VERBATIM.
app.js 11,603 → 10,857.

THE SEAM IS GONE. #878's plugin-loader needed configurePluginLoader({
populateVizPicker }) purely because _populateVizPicker lived in app.js and
importing app.js would have closed a cycle. viz.js is a LEAF — it imports NOTHING
— so plugin-loader now imports _populateVizPicker straight from it. The _host
object, the configure function, its loud-default guard, and the wiring line in
app.js are all deleted. The second carve simplifies the first.

  app.js -> { plugin-loader, viz }
  plugin-loader -> viz
  viz -> (nothing)

NOT A PURE MOVE — one listener block had to be SPLIT. app.js had a single
top-level `if (window.feedBack) { … }` registering four handlers, and only two
were viz. song:loaded / arrangement:changed / song:ready (the mastery slider)
stay in app.js and now call the imported _autoMatchViz / _maybeShowNotationViewHint.
The viz:reverted handler MOVES, because it REASSIGNS _cancelPendingAutoLabel and
an imported binding is read-only — `_cancelPendingAutoLabel = null` would throw if
the listener stayed behind while the state moved.

ORDER CHECKED, NOT ASSUMED: viz.js's song:ready listener now registers BEFORE
app.js's own (imports evaluate first). Safe — _pendingPromotionNag is only ever
set inside _populateVizPicker, which runs at boot/plugin-refresh, never from
inside the other song:ready handler, so the two are independent.

VERIFIED — the listeners are the risk here, so they were DRIVEN, not just booted.
A/B against origin/main in two browsers:
  * viz picker: 6 options (auto|default|venue|drum_highway_3d|keys_highway_3d|
    highway_3d), selected highway_3d, Auto label — IDENTICAL. This alone proves
    plugin-loader's direct import of viz.js works.
  * emit('viz:reverted') -> picker resets to default, localStorage resets to
    default, the warning logs — IDENTICAL. The MOVED listener fires.
  * emit('song:ready') -> mastery slider enables, no throw — IDENTICAL. The SPLIT
    listener still does both halves.
  * plugin screens, module injections, 37 capability participants — IDENTICAL.
  * zero console/page errors on both.

pytest 2396, node 1038/1038, ESLint 0, tailwind-fresh clean. no-cycle re-bitten on
the 3-module graph (viz -> plugin-loader fails).

Codex preflight raised a [P2] claiming viz.js's top-level bus guards would be
false because "app.js only creates the event bus later" — FALSE POSITIVE. app.js
does not create the bus; capabilities.js does, from its own <script type="module">
at index.html:122, and module scripts execute in document order, so the bus exists
long before app.js's import graph evaluates. Instrumented the setter: by viz.js's
turn `window.feedBack.on` is already a function, and the viz:reverted listener is
provably attached (firing it resets the picker). The ordering is also enforced by
test_app_shell_loads_capability_registry_before_app_runtime.

Harnesses: 5 tests retargeted to viz.js across legacy_shim_hits, venue_scene_3d,
venue_viz (each SPLIT — their non-viz tests still read app.js).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

static/app.js

@@ -8,18 +8,6 @@ import {
     _populateVizPicker,
     setViz,
 } from './js/viz.js';
-import {
-    exportDiagnostics,
-    previewDiagnostics,
-} from './js/diagnostics-export.js';
-import {
-    _confirmDialog,
-    _escAttr,
-    _isElementVisible,
-    _trapFocusInModal,
-    esc,
-    uiPrompt,
-} from './js/dom.js';
 
 // Demo analytics — real impl set by demo.js; no-op in normal builds
 window.feedBackDemoTrack = window.feedBackDemoTrack ?? null;
@@ -113,6 +101,20 @@ function _activeSearchInput() {
 // the moment of navigation, so up/down works correctly across all
 // breakpoints (1 / 2 / 3 / 4 cols depending on viewport).
 
+function _isElementVisible(el) {
+    // Walk ancestors looking for display:none. Handles collapsed
+    // `.album-body` / `.artist-body` subtrees (hidden via CSS class
+    // rules). Using a DOM walk rather than `offsetParent` avoids the
+    // false-negative for `position:fixed` elements whose offsetParent
+    // is null even when they are perfectly visible.
+    if (!el) return false;
+    let node = el;
+    while (node && node !== document.body) {
+        if (getComputedStyle(node).display === 'none') return false;
+        node = node.parentElement;
+    }
+    return true;
+}
 
 // `_libNavItems` is consulted on every arrow / Enter / Space / Home /
 // End / activation press, including during autorepeat. Re-running
@@ -626,7 +628,85 @@ function _handleLibArrowNav(e) {
     return false;
 }
 
+// Focus trap: keep Tab / Shift+Tab cycling inside `modal` so focus
+// can't escape to the content underneath while the overlay is open.
+// Call this once after the modal is in the DOM and initial focus is set.
+function _trapFocusInModal(modal) {
+    const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    modal.addEventListener('keydown', (e) => {
+        if (e.key !== 'Tab') return;
+        const els = Array.from(modal.querySelectorAll(FOCUSABLE)).filter(el => {
+            if (!_isElementVisible(el)) return false;
+            if (getComputedStyle(el).visibility === 'hidden') return false;
+            if (el.disabled) return false;
+            return true;
+        });
+        if (!els.length) return;
+        const first = els[0];
+        const last = els[els.length - 1];
+        if (e.shiftKey) {
+            if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+        } else {
+            if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+        }
+    });
+}
 
+// Styled async confirm dialog. Returns a Promise<boolean>. For destructive
+// prompts pass `danger: true` — confirm button turns red and Cancel gets
+// initial focus so an accidental Enter won't fire the action. `body` is
+// inserted as HTML so callers can use formatting; callers are responsible
+// for escaping any user-supplied content in it (use _escAttr).
+function _confirmDialog({ title, body = '', confirmText = 'Confirm', cancelText = 'Cancel', danger = false } = {}) {
+    return new Promise((resolve) => {
+        const previouslyFocused = document.activeElement;
+        const modal = document.createElement('div');
+        modal.className = 'feedBack-modal fixed inset-0 z-[250] flex items-center justify-center bg-black/70 backdrop-blur-sm';
+        modal.setAttribute('role', 'alertdialog');
+        modal.setAttribute('aria-modal', 'true');
+        modal.setAttribute('aria-label', title || 'Confirm');
+        const confirmClass = danger
+            ? 'flex-1 bg-red-600 hover:bg-red-500 px-4 py-2 rounded-xl text-sm font-semibold text-white transition focus:outline-none focus:ring-2 focus:ring-red-400/60'
+            : 'flex-1 bg-accent hover:bg-accent-light px-4 py-2 rounded-xl text-sm font-semibold text-white transition focus:outline-none focus:ring-2 focus:ring-accent/60';
+        modal.innerHTML = `
+            <div class="bg-dark-700 border border-gray-700 rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl">
+                <h3 class="text-lg font-bold text-white mb-3">${_escAttr(title || '')}</h3>
+                <div class="mb-5">${body}</div>
+                <div class="flex gap-3">
+                    <button type="button" data-confirm class="${confirmClass}">${_escAttr(confirmText)}</button>
+                    <button type="button" data-cancel class="px-4 py-2 bg-dark-600 hover:bg-dark-500 rounded-xl text-sm text-gray-300 transition focus:outline-none focus:ring-2 focus:ring-gray-500/40">${_escAttr(cancelText)}</button>
+                </div>
+            </div>`;
+        document.body.appendChild(modal);
+
+        function finish(result) {
+            modal.remove();
+            document.removeEventListener('keydown', onKey, true);
+            if (previouslyFocused && document.body.contains(previouslyFocused)) {
+                try { previouslyFocused.focus({ preventScroll: true }); } catch {}
+            }
+            resolve(result);
+        }
+        function onKey(e) {
+            if (e.key === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); finish(false); }
+            else if (e.key === 'Enter' && document.activeElement === modal.querySelector('[data-confirm]')) {
+                e.preventDefault(); finish(true);
+            }
+        }
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) finish(false);
+            else if (e.target.closest('[data-confirm]')) finish(true);
+            else if (e.target.closest('[data-cancel]')) finish(false);
+        });
+        document.addEventListener('keydown', onKey, true);
+        _trapFocusInModal(modal);
+        // Focus Cancel by default for destructive prompts so an accidental
+        // Enter / Space won't fire the dangerous action; otherwise focus
+        // the confirm button so Enter accepts.
+        const focusTarget = modal.querySelector(danger ? '[data-cancel]' : '[data-confirm]');
+        if (focusTarget) focusTarget.focus({ preventScroll: true });
+    });
+}
 
 // Shortcut cheat-sheet overlay. Opens on `?` (Shift+/), closes on
 // Esc (handled by the generic modal close path) or on backdrop /
@@ -2530,7 +2610,21 @@ window.feedBack.displayTuningTargets = displayTuningTargets;
 window.feedBack.displayTuningTargetDetails = displayTuningTargetDetails;
 window.feedBack.parseRawTuningOffsets = parseRawTuningOffsets;
 
+function esc(s) {
+    const d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+}
 
+// `esc()` escapes the HTML-content metacharacters (<, >, &) but not
+// quotes — fine for text-node interpolation but unsafe when the
+// result is used as an attribute value, where a literal `"` ends the
+// attribute early. Use `_escAttr` for any `attr="${...}"` site.
+function _escAttr(s) {
+    return esc(s == null ? '' : String(s))
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
 
 // Toggle an artist/album header's parent `.open` state and keep
 // `aria-expanded` on the header itself in sync so screen readers
@@ -4013,6 +4107,275 @@ async function importSettings(file) {
     setTimeout(() => location.reload(), 800);
 }
 
+// ── Diagnostics export (feedBack#166) ───────────────────────────────────
+//
+// Companion to Settings export but for troubleshooting bug reports.
+// Bundle layout + schemas: docs/diagnostics-bundle-spec.md.
+//
+// Frontend's job is to:
+//   1. Snapshot the browser-only state (console ring buffer, hardware
+//      probe, localStorage, ua) via window.feedBack.diagnostics.
+//   2. POST it to /api/diagnostics/export with the user's include /
+//      redact toggles.
+//   3. Stream the returned zip to disk.
+
+function _diagIncludeFromUI() {
+    const v = (id) => document.getElementById(id)?.checked !== false;
+    return {
+        system: v('diag-incl-system'),
+        hardware: v('diag-incl-hardware'),
+        logs: v('diag-incl-logs'),
+        console: v('diag-incl-console'),
+        plugins: v('diag-incl-plugins'),
+    };
+}
+
+function _diagRedactFromUI() {
+    const el = document.getElementById('diag-redact');
+    return el ? !!el.checked : true;
+}
+
+// Map raw file paths inside the bundle to plain-English labels +
+// descriptions for the preview UI. Only paths that show up in
+// previews need entries — unknown paths fall back to the path itself.
+const _DIAG_FILE_LABELS = {
+    'system/version.json':   { label: 'App version',    desc: 'FeedBack version, Python, OS' },
+    'system/env.json':       { label: 'Environment',    desc: 'Allowlisted env vars (LOG_LEVEL, etc.). No secrets.' },
+    'system/hardware.json':  { label: 'Hardware (server-side)', desc: 'CPU, RAM, GPU. In Docker this reflects the container, not the host.' },
+    'system/plugins.json':   { label: 'Plugins',        desc: 'Loaded plugins + git commit + orphan detection.' },
+    'logs/server.log':       { label: 'Server log',     desc: 'Tail of LOG_FILE (last ~5 MB).' },
+    'logs/server.log.meta.json': { label: 'Log metadata', desc: 'Log file path, size, rotation info.' },
+    'client/console.json':   { label: 'Browser console', desc: 'console.log/warn/error transcript + window errors.' },
+    'client/hardware.json':  { label: 'Hardware (browser)', desc: 'WebGL/WebGPU adapter, host OS via userAgent.' },
+    'client/local_storage.json': { label: 'Browser storage', desc: 'localStorage contents (preferences).' },
+    'client/ua.json':        { label: 'User agent',     desc: 'Browser, screen, page URL.' },
+};
+
+function _formatBytes(n) {
+    if (!n || n < 1024) return (n || 0) + ' B';
+    if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
+    return (n / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
+function _escapeHtml(s) {
+    return String(s || '').replace(/[&<>"']/g, c => ({
+        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+    }[c]));
+}
+
+function _renderDiagPreview(data) {
+    const m = data.manifest || {};
+    const files = m.files || [];
+    const groups = { system: [], logs: [], client: [], plugins: [], other: [] };
+    for (const f of files) {
+        const top = (f.path || '').split('/')[0];
+        (groups[top] || groups.other).push(f);
+    }
+    const totalBytes = files.reduce((s, f) => s + (f.size || 0), 0);
+    const include = _diagIncludeFromUI();
+    const redact = _diagRedactFromUI();
+
+    const sections = [];
+    // Per-file `summary` (server-derived) → human one-liner.
+    function _summaryLine(path, summary) {
+        if (!summary || typeof summary !== 'object') return '';
+        if (path === 'system/plugins.json') {
+            const loaded = summary.loaded_count || 0;
+            const orphans = summary.orphan_count || 0;
+            const orphPart = orphans ? ` · <span class="text-amber-400">${orphans} orphan${orphans === 1 ? '' : 's'}</span>` : '';
+            return `${loaded} plugin${loaded === 1 ? '' : 's'} loaded${orphPart}`;
+        }
+        if (path === 'client/console.json') {
+            const total = summary.entry_count || 0;
+            const lvl = summary.by_level || {};
+            const parts = [];
+            for (const k of ['error','warn','info','log','debug']) {
+                if (lvl[k]) parts.push(`${lvl[k]} ${k}`);
+            }
+            return `${total} entries${parts.length ? ' (' + parts.join(', ') + ')' : ''}`;
+        }
+        if (path === 'system/hardware.json') {
+            const bits = [];
+            if (summary.cpu_brand) bits.push(summary.cpu_brand);
+            if (summary.cores_logical) bits.push(`${summary.cores_logical} cores`);
+            if (summary.gpu_count) bits.push(`${summary.gpu_count} GPU`);
+            if (summary.runtime) bits.push(`runtime: ${summary.runtime}`);
+            return bits.join(' · ');
+        }
+        if (path === 'client/hardware.json') {
+            const bits = [];
+            if (summary.runtime) bits.push(summary.runtime);
+            if (summary.webgl_renderer) bits.push(summary.webgl_renderer);
+            return bits.join(' · ');
+        }
+        if (path === 'client/local_storage.json') {
+            return `${summary.key_count || 0} keys`;
+        }
+        if (path === 'system/version.json') {
+            const bits = [];
+            if (summary.feedBack) bits.push(`feedBack ${summary.feedBack}`);
+            if (summary.python) bits.push(`python ${summary.python}`);
+            if (summary.os) bits.push(summary.os);
+            return bits.join(' · ');
+        }
+        return '';
+    }
+
+    function pushSection(title, list, emptyHint) {
+        if (!list.length) {
+            if (emptyHint) {
+                sections.push(`<div class="mb-3"><div class="text-gray-300 font-semibold mb-1">${_escapeHtml(title)}</div><div class="text-gray-500">${_escapeHtml(emptyHint)}</div></div>`);
+            }
+            return;
+        }
+        const rows = list.map(f => {
+            const meta = _DIAG_FILE_LABELS[f.path] || { label: f.path, desc: '' };
+            const summary = _summaryLine(f.path, f.summary);
+            const summaryHtml = summary
+                ? `<div class="text-accent-light text-[10px] mt-0.5">${summary}</div>`
+                : '';
+            return `<div class="flex justify-between gap-4 py-1 border-b border-dark-600 last:border-0">
+                <div class="min-w-0">
+                    <div class="text-gray-200">${_escapeHtml(meta.label)}</div>
+                    <div class="text-gray-500 text-[10px]">${_escapeHtml(meta.desc)}</div>
+                    ${summaryHtml}
+                </div>
+                <div class="text-gray-400 text-right whitespace-nowrap">${_escapeHtml(_formatBytes(f.size))}</div>
+            </div>`;
+        }).join('');
+        sections.push(`<div class="mb-3"><div class="text-gray-300 font-semibold mb-1">${_escapeHtml(title)}</div>${rows}</div>`);
+    }
+
+    pushSection('System', groups.system, include.system ? '' : 'Skipped (toggle off)');
+    pushSection('Server logs', groups.logs, include.logs
+        ? 'No log file configured — set LOG_FILE env var to include server logs.'
+        : 'Skipped (toggle off)');
+    pushSection('Plugin diagnostics', groups.plugins, include.plugins
+        ? 'No plugins have opted in to diagnostics.'
+        : 'Skipped (toggle off)');
+
+    // Client section preview is a server-side estimate only — actual
+    // client/* payloads are added at Export time after the browser
+    // snapshots. Show what WILL be added, not file sizes.
+    const clientLines = [];
+    if (include.console) clientLines.push({ label: 'Browser console', desc: 'console.log/warn/error transcript + window errors.' });
+    if (include.hardware) clientLines.push({ label: 'Hardware (browser)', desc: 'WebGL/WebGPU adapter, host OS via userAgent.' });
+    clientLines.push({ label: 'Browser storage', desc: 'localStorage contents (preferences).' });
+    clientLines.push({ label: 'User agent', desc: 'Browser, screen, page URL.' });
+    const clientHtml = clientLines.map(c => `<div class="flex justify-between gap-4 py-1 border-b border-dark-600 last:border-0">
+        <div><div class="text-gray-200">${_escapeHtml(c.label)}</div><div class="text-gray-500 text-[10px]">${_escapeHtml(c.desc)}</div></div>
+        <div class="text-gray-500 text-right whitespace-nowrap">added on export</div>
+    </div>`).join('');
+    sections.push(`<div class="mb-3"><div class="text-gray-300 font-semibold mb-1">Browser data</div>${clientHtml}</div>`);
+
+    const notesHtml = (m.notes || []).length
+        ? `<div class="mb-3 bg-dark-600 border border-amber-500/30 rounded-lg p-2">
+              <div class="text-amber-400 text-[10px] font-semibold uppercase mb-1">Notes</div>
+              ${(m.notes).map(n => `<div class="text-gray-300 text-[11px]">• ${_escapeHtml(n)}</div>`).join('')}
+           </div>`
+        : '';
+
+    const privacyHtml = redact
+        ? `<div class="text-emerald-400 text-[11px]">🔒 Redaction enabled — paths, song names, IPs, and secrets will be replaced with stable hash tokens.</div>`
+        : `<div class="text-amber-400 text-[11px]">⚠ Redaction OFF — bundle will contain raw paths, song names, and IPs. Only share with people you trust.</div>`;
+
+    return `
+        <div class="text-[11px]">
+            <div class="flex justify-between items-baseline mb-2">
+                <div class="text-gray-200 font-semibold">${_escapeHtml(data.filename)}</div>
+                <div class="text-gray-400">${_escapeHtml(_formatBytes(totalBytes))}<span class="text-gray-600"> server-side</span></div>
+            </div>
+            <div class="text-gray-500 text-[10px] mb-3">runtime: ${_escapeHtml(m.runtime || 'unknown')} · exported_at: ${_escapeHtml(m.exported_at || '')}</div>
+            ${notesHtml}
+            ${sections.join('')}
+            ${privacyHtml}
+        </div>`;
+}
+
+async function previewDiagnostics() {
+    const status = document.getElementById('diag-status');
+    const preview = document.getElementById('diag-preview');
+    if (!status || !preview) return;
+    status.textContent = 'Building preview…';
+    preview.classList.add('hidden');
+    const include = _diagIncludeFromUI();
+    const params = new URLSearchParams({
+        redact: String(_diagRedactFromUI()),
+        system: String(include.system),
+        hardware: String(include.hardware),
+        logs: String(include.logs),
+        console: String(include.console),
+        plugins: String(include.plugins),
+    });
+    try {
+        const resp = await fetch(`/api/diagnostics/preview?${params.toString()}`);
+        if (!resp.ok) {
+            status.textContent = `Preview failed (HTTP ${resp.status})`;
+            return;
+        }
+        const data = await resp.json();
+        preview.innerHTML = _renderDiagPreview(data);
+        preview.classList.remove('hidden');
+        status.textContent = 'Preview ready.';
+    } catch (e) {
+        status.textContent = `Preview failed: ${e.message}`;
+    }
+}
+
+async function exportDiagnostics() {
+    const status = document.getElementById('diag-status');
+    if (!status) return;
+    status.textContent = 'Building bundle…';
+    const include = _diagIncludeFromUI();
+    const redact = _diagRedactFromUI();
+
+    const diag = window.feedBack && window.feedBack.diagnostics;
+    const body = {
+        redact,
+        include,
+        client_console: include.console && diag ? diag.snapshotConsole() : null,
+        client_hardware: include.hardware && diag ? await diag.snapshotHardware() : null,
+        client_ua: diag ? diag.snapshotUa() : null,
+        local_storage: diag ? diag.snapshotLocalStorage() : null,
+        client_contributions: diag ? diag.snapshotContributions() : null,
+    };
+
+    let resp;
+    try {
+        resp = await fetch('/api/diagnostics/export', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+        });
+    } catch (e) {
+        status.textContent = `Export failed: ${e.message}`;
+        return;
+    }
+    if (!resp.ok) {
+        status.textContent = `Export failed (HTTP ${resp.status})`;
+        return;
+    }
+    let filename = 'feedBack-diag.zip';
+    const disp = resp.headers.get('Content-Disposition');
+    if (disp) {
+        const m = /filename="([^"]+)"/.exec(disp);
+        if (m) filename = m[1];
+    }
+    try {
+        const blob = await resp.blob();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        status.textContent = `Exported ${filename}`;
+    } catch (e) {
+        status.textContent = `Export failed during download: ${e.message}`;
+    }
+}
 
 async function uploadSongs(fileList) {
     if (!fileList || fileList.length === 0) return;
@@ -8791,6 +9154,86 @@ async function loadSavedLoop(loopId) {
     // saved option (which the dropdown selection guarantees here).
 }
 
+// In-app text prompt — replaces window.prompt(), which Electron does NOT
+// implement (it logs "prompt() is and will not be supported" and returns null),
+// so any prompt()-based flow is a silent no-op on desktop. Returns the entered
+// string, or null if cancelled (Esc / Cancel / backdrop). Styled to match the
+// edit modal; role=dialog so the global keyboard shortcuts ignore typing here.
+// Injection-safe: all caller text is set via textContent / value, never innerHTML.
+function uiPrompt({ title = '', label = '', value = '', okLabel = 'Save', placeholder = '' } = {}) {
+    return new Promise((resolve) => {
+        const modal = document.createElement('div');
+        modal.className = 'feedBack-modal fixed inset-0 z-[200] flex items-center justify-center bg-black/70 backdrop-blur-sm';
+        modal.setAttribute('role', 'dialog');
+        modal.setAttribute('aria-modal', 'true');
+        if (title) modal.setAttribute('aria-label', title);
+        modal.innerHTML = `
+            <form class="bg-dark-700 border border-gray-700 rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl">
+                <h3 class="text-lg font-bold text-white mb-4" data-ui-prompt-title hidden></h3>
+                <label class="text-xs text-gray-400 mb-1 block" data-ui-prompt-label hidden></label>
+                <input type="text" data-ui-prompt-input autocomplete="off"
+                    class="w-full bg-dark-600 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-accent/50">
+                <div class="flex gap-3 mt-5">
+                    <button type="submit"
+                        class="flex-1 bg-accent hover:bg-accent-light px-4 py-2 rounded-xl text-sm font-semibold text-white transition" data-ui-prompt-ok></button>
+                    <button type="button" data-ui-prompt-cancel
+                        class="px-4 py-2 bg-dark-600 hover:bg-dark-500 rounded-xl text-sm text-gray-300 transition">Cancel</button>
+                </div>
+            </form>`;
+        const titleEl = modal.querySelector('[data-ui-prompt-title]');
+        const labelEl = modal.querySelector('[data-ui-prompt-label]');
+        const input = modal.querySelector('[data-ui-prompt-input]');
+        const okEl = modal.querySelector('[data-ui-prompt-ok]');
+        if (title) { titleEl.textContent = title; titleEl.hidden = false; }
+        if (label) { labelEl.textContent = label; labelEl.hidden = false; }
+        okEl.textContent = okLabel;
+        input.value = value;
+        if (placeholder) input.placeholder = placeholder;
+
+        // Restore focus to wherever it was when we're done (matches the edit
+        // modal's behavior so keyboard users aren't dumped at the page top).
+        const previousActiveElement = document.activeElement;
+        const focusables = () => Array.from(
+            modal.querySelectorAll('input, button, [tabindex]:not([tabindex="-1"])'),
+        ).filter((el) => !el.disabled && el.offsetParent !== null);
+
+        let settled = false;
+        const close = (result) => {
+            if (settled) return;
+            settled = true;
+            document.removeEventListener('keydown', onKey, true);
+            modal.remove();
+            if (previousActiveElement && typeof previousActiveElement.focus === 'function') {
+                previousActiveElement.focus();
+            }
+            resolve(result);
+        };
+        const onKey = (e) => {
+            if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(null); return; }
+            // Trap Tab inside the modal so focus can't wander to the page behind it.
+            if (e.key === 'Tab') {
+                const items = focusables();
+                if (!items.length) return;
+                const first = items[0];
+                const last = items[items.length - 1];
+                const active = document.activeElement;
+                if (e.shiftKey && (active === first || !modal.contains(active))) {
+                    e.preventDefault(); last.focus();
+                } else if (!e.shiftKey && (active === last || !modal.contains(active))) {
+                    e.preventDefault(); first.focus();
+                }
+            }
+        };
+        modal.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); close(input.value); });
+        modal.querySelector('[data-ui-prompt-cancel]').addEventListener('click', () => close(null));
+        // Backdrop (overlay itself, not the panel) cancels.
+        modal.addEventListener('mousedown', (e) => { if (e.target === modal) close(null); });
+        document.addEventListener('keydown', onKey, true);
+        document.body.appendChild(modal);
+        input.focus();
+        input.select();
+    });
+}
 
 async function saveCurrentLoop() {
     if (loopA === null || loopB === null || !currentFilename) return;

static/js/diagnostics-export.js

@@ -1,280 +0,0 @@
-// The diagnostics-bundle export — the Settings "Export diagnostics" flow.
-//
-// Carved verbatim out of static/app.js (R3a). A LEAF module: imports nothing.
-// It snapshots the browser-only state (console ring buffer, hardware probe,
-// localStorage, ua) via window.feedBack.diagnostics, POSTs it to
-// /api/diagnostics/export with the user's include/redact toggles, and streams the
-// returned zip to disk. Bundle layout + schemas: docs/diagnostics-bundle-spec.md.
-//
-// Everything except the two entry points is module-private — the preview
-// renderer, the file-label table, and the byte/HTML formatters are used nowhere
-// else in core.
-
-//
-// Companion to Settings export but for troubleshooting bug reports.
-// Bundle layout + schemas: docs/diagnostics-bundle-spec.md.
-//
-// Frontend's job is to:
-//   1. Snapshot the browser-only state (console ring buffer, hardware
-//      probe, localStorage, ua) via window.feedBack.diagnostics.
-//   2. POST it to /api/diagnostics/export with the user's include /
-//      redact toggles.
-//   3. Stream the returned zip to disk.
-
-function _diagIncludeFromUI() {
-    const v = (id) => document.getElementById(id)?.checked !== false;
-    return {
-        system: v('diag-incl-system'),
-        hardware: v('diag-incl-hardware'),
-        logs: v('diag-incl-logs'),
-        console: v('diag-incl-console'),
-        plugins: v('diag-incl-plugins'),
-    };
-}
-
-function _diagRedactFromUI() {
-    const el = document.getElementById('diag-redact');
-    return el ? !!el.checked : true;
-}
-
-// Map raw file paths inside the bundle to plain-English labels +
-// descriptions for the preview UI. Only paths that show up in
-// previews need entries — unknown paths fall back to the path itself.
-const _DIAG_FILE_LABELS = {
-    'system/version.json':   { label: 'App version',    desc: 'FeedBack version, Python, OS' },
-    'system/env.json':       { label: 'Environment',    desc: 'Allowlisted env vars (LOG_LEVEL, etc.). No secrets.' },
-    'system/hardware.json':  { label: 'Hardware (server-side)', desc: 'CPU, RAM, GPU. In Docker this reflects the container, not the host.' },
-    'system/plugins.json':   { label: 'Plugins',        desc: 'Loaded plugins + git commit + orphan detection.' },
-    'logs/server.log':       { label: 'Server log',     desc: 'Tail of LOG_FILE (last ~5 MB).' },
-    'logs/server.log.meta.json': { label: 'Log metadata', desc: 'Log file path, size, rotation info.' },
-    'client/console.json':   { label: 'Browser console', desc: 'console.log/warn/error transcript + window errors.' },
-    'client/hardware.json':  { label: 'Hardware (browser)', desc: 'WebGL/WebGPU adapter, host OS via userAgent.' },
-    'client/local_storage.json': { label: 'Browser storage', desc: 'localStorage contents (preferences).' },
-    'client/ua.json':        { label: 'User agent',     desc: 'Browser, screen, page URL.' },
-};
-
-function _formatBytes(n) {
-    if (!n || n < 1024) return (n || 0) + ' B';
-    if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
-    return (n / (1024 * 1024)).toFixed(1) + ' MB';
-}
-
-function _escapeHtml(s) {
-    return String(s || '').replace(/[&<>"']/g, c => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
-    }[c]));
-}
-
-function _renderDiagPreview(data) {
-    const m = data.manifest || {};
-    const files = m.files || [];
-    const groups = { system: [], logs: [], client: [], plugins: [], other: [] };
-    for (const f of files) {
-        const top = (f.path || '').split('/')[0];
-        (groups[top] || groups.other).push(f);
-    }
-    const totalBytes = files.reduce((s, f) => s + (f.size || 0), 0);
-    const include = _diagIncludeFromUI();
-    const redact = _diagRedactFromUI();
-
-    const sections = [];
-    // Per-file `summary` (server-derived) → human one-liner.
-    function _summaryLine(path, summary) {
-        if (!summary || typeof summary !== 'object') return '';
-        if (path === 'system/plugins.json') {
-            const loaded = summary.loaded_count || 0;
-            const orphans = summary.orphan_count || 0;
-            const orphPart = orphans ? ` · <span class="text-amber-400">${orphans} orphan${orphans === 1 ? '' : 's'}</span>` : '';
-            return `${loaded} plugin${loaded === 1 ? '' : 's'} loaded${orphPart}`;
-        }
-        if (path === 'client/console.json') {
-            const total = summary.entry_count || 0;
-            const lvl = summary.by_level || {};
-            const parts = [];
-            for (const k of ['error','warn','info','log','debug']) {
-                if (lvl[k]) parts.push(`${lvl[k]} ${k}`);
-            }
-            return `${total} entries${parts.length ? ' (' + parts.join(', ') + ')' : ''}`;
-        }
-        if (path === 'system/hardware.json') {
-            const bits = [];
-            if (summary.cpu_brand) bits.push(summary.cpu_brand);
-            if (summary.cores_logical) bits.push(`${summary.cores_logical} cores`);
-            if (summary.gpu_count) bits.push(`${summary.gpu_count} GPU`);
-            if (summary.runtime) bits.push(`runtime: ${summary.runtime}`);
-            return bits.join(' · ');
-        }
-        if (path === 'client/hardware.json') {
-            const bits = [];
-            if (summary.runtime) bits.push(summary.runtime);
-            if (summary.webgl_renderer) bits.push(summary.webgl_renderer);
-            return bits.join(' · ');
-        }
-        if (path === 'client/local_storage.json') {
-            return `${summary.key_count || 0} keys`;
-        }
-        if (path === 'system/version.json') {
-            const bits = [];
-            if (summary.feedBack) bits.push(`feedBack ${summary.feedBack}`);
-            if (summary.python) bits.push(`python ${summary.python}`);
-            if (summary.os) bits.push(summary.os);
-            return bits.join(' · ');
-        }
-        return '';
-    }
-
-    function pushSection(title, list, emptyHint) {
-        if (!list.length) {
-            if (emptyHint) {
-                sections.push(`<div class="mb-3"><div class="text-gray-300 font-semibold mb-1">${_escapeHtml(title)}</div><div class="text-gray-500">${_escapeHtml(emptyHint)}</div></div>`);
-            }
-            return;
-        }
-        const rows = list.map(f => {
-            const meta = _DIAG_FILE_LABELS[f.path] || { label: f.path, desc: '' };
-            const summary = _summaryLine(f.path, f.summary);
-            const summaryHtml = summary
-                ? `<div class="text-accent-light text-[10px] mt-0.5">${summary}</div>`
-                : '';
-            return `<div class="flex justify-between gap-4 py-1 border-b border-dark-600 last:border-0">
-                <div class="min-w-0">
-                    <div class="text-gray-200">${_escapeHtml(meta.label)}</div>
-                    <div class="text-gray-500 text-[10px]">${_escapeHtml(meta.desc)}</div>
-                    ${summaryHtml}
-                </div>
-                <div class="text-gray-400 text-right whitespace-nowrap">${_escapeHtml(_formatBytes(f.size))}</div>
-            </div>`;
-        }).join('');
-        sections.push(`<div class="mb-3"><div class="text-gray-300 font-semibold mb-1">${_escapeHtml(title)}</div>${rows}</div>`);
-    }
-
-    pushSection('System', groups.system, include.system ? '' : 'Skipped (toggle off)');
-    pushSection('Server logs', groups.logs, include.logs
-        ? 'No log file configured — set LOG_FILE env var to include server logs.'
-        : 'Skipped (toggle off)');
-    pushSection('Plugin diagnostics', groups.plugins, include.plugins
-        ? 'No plugins have opted in to diagnostics.'
-        : 'Skipped (toggle off)');
-
-    // Client section preview is a server-side estimate only — actual
-    // client/* payloads are added at Export time after the browser
-    // snapshots. Show what WILL be added, not file sizes.
-    const clientLines = [];
-    if (include.console) clientLines.push({ label: 'Browser console', desc: 'console.log/warn/error transcript + window errors.' });
-    if (include.hardware) clientLines.push({ label: 'Hardware (browser)', desc: 'WebGL/WebGPU adapter, host OS via userAgent.' });
-    clientLines.push({ label: 'Browser storage', desc: 'localStorage contents (preferences).' });
-    clientLines.push({ label: 'User agent', desc: 'Browser, screen, page URL.' });
-    const clientHtml = clientLines.map(c => `<div class="flex justify-between gap-4 py-1 border-b border-dark-600 last:border-0">
-        <div><div class="text-gray-200">${_escapeHtml(c.label)}</div><div class="text-gray-500 text-[10px]">${_escapeHtml(c.desc)}</div></div>
-        <div class="text-gray-500 text-right whitespace-nowrap">added on export</div>
-    </div>`).join('');
-    sections.push(`<div class="mb-3"><div class="text-gray-300 font-semibold mb-1">Browser data</div>${clientHtml}</div>`);
-
-    const notesHtml = (m.notes || []).length
-        ? `<div class="mb-3 bg-dark-600 border border-amber-500/30 rounded-lg p-2">
-              <div class="text-amber-400 text-[10px] font-semibold uppercase mb-1">Notes</div>
-              ${(m.notes).map(n => `<div class="text-gray-300 text-[11px]">• ${_escapeHtml(n)}</div>`).join('')}
-           </div>`
-        : '';
-
-    const privacyHtml = redact
-        ? `<div class="text-emerald-400 text-[11px]">🔒 Redaction enabled — paths, song names, IPs, and secrets will be replaced with stable hash tokens.</div>`
-        : `<div class="text-amber-400 text-[11px]">⚠ Redaction OFF — bundle will contain raw paths, song names, and IPs. Only share with people you trust.</div>`;
-
-    return `
-        <div class="text-[11px]">
-            <div class="flex justify-between items-baseline mb-2">
-                <div class="text-gray-200 font-semibold">${_escapeHtml(data.filename)}</div>
-                <div class="text-gray-400">${_escapeHtml(_formatBytes(totalBytes))}<span class="text-gray-600"> server-side</span></div>
-            </div>
-            <div class="text-gray-500 text-[10px] mb-3">runtime: ${_escapeHtml(m.runtime || 'unknown')} · exported_at: ${_escapeHtml(m.exported_at || '')}</div>
-            ${notesHtml}
-            ${sections.join('')}
-            ${privacyHtml}
-        </div>`;
-}
-
-export async function previewDiagnostics() {
-    const status = document.getElementById('diag-status');
-    const preview = document.getElementById('diag-preview');
-    if (!status || !preview) return;
-    status.textContent = 'Building preview…';
-    preview.classList.add('hidden');
-    const include = _diagIncludeFromUI();
-    const params = new URLSearchParams({
-        redact: String(_diagRedactFromUI()),
-        system: String(include.system),
-        hardware: String(include.hardware),
-        logs: String(include.logs),
-        console: String(include.console),
-        plugins: String(include.plugins),
-    });
-    try {
-        const resp = await fetch(`/api/diagnostics/preview?${params.toString()}`);
-        if (!resp.ok) {
-            status.textContent = `Preview failed (HTTP ${resp.status})`;
-            return;
-        }
-        const data = await resp.json();
-        preview.innerHTML = _renderDiagPreview(data);
-        preview.classList.remove('hidden');
-        status.textContent = 'Preview ready.';
-    } catch (e) {
-        status.textContent = `Preview failed: ${e.message}`;
-    }
-}
-
-export async function exportDiagnostics() {
-    const status = document.getElementById('diag-status');
-    if (!status) return;
-    status.textContent = 'Building bundle…';
-    const include = _diagIncludeFromUI();
-    const redact = _diagRedactFromUI();
-
-    const diag = window.feedBack && window.feedBack.diagnostics;
-    const body = {
-        redact,
-        include,
-        client_console: include.console && diag ? diag.snapshotConsole() : null,
-        client_hardware: include.hardware && diag ? await diag.snapshotHardware() : null,
-        client_ua: diag ? diag.snapshotUa() : null,
-        local_storage: diag ? diag.snapshotLocalStorage() : null,
-        client_contributions: diag ? diag.snapshotContributions() : null,
-    };
-
-    let resp;
-    try {
-        resp = await fetch('/api/diagnostics/export', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(body),
-        });
-    } catch (e) {
-        status.textContent = `Export failed: ${e.message}`;
-        return;
-    }
-    if (!resp.ok) {
-        status.textContent = `Export failed (HTTP ${resp.status})`;
-        return;
-    }
-    let filename = 'feedBack-diag.zip';
-    const disp = resp.headers.get('Content-Disposition');
-    if (disp) {
-        const m = /filename="([^"]+)"/.exec(disp);
-        if (m) filename = m[1];
-    }
-    try {
-        const blob = await resp.blob();
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-        status.textContent = `Exported ${filename}`;
-    } catch (e) {
-        status.textContent = `Export failed during download: ${e.message}`;
-    }
-}

static/js/dom.js

@@ -1,203 +0,0 @@
-// DOM + HTML-escaping primitives, and the modal dialogs built on them.
-//
-// Carved verbatim out of static/app.js (R3a). A LEAF module: imports nothing.
-//
-// This one is a GATHER, not a slice — the six lived in six different places in
-// app.js. They belong together because they are the bottom of the UI stack:
-// `esc` / `_escAttr` alone have ~48 call sites, and every later carve that
-// renders HTML will need them. Giving them a home NOW means those carves can
-// import them instead of inventing a host seam to reach back into app.js —
-// which is exactly the trap the plugin-loader carve had to work around before
-// the viz layer became a module.
-
-export function _isElementVisible(el) {
-    // Walk ancestors looking for display:none. Handles collapsed
-    // `.album-body` / `.artist-body` subtrees (hidden via CSS class
-    // rules). Using a DOM walk rather than `offsetParent` avoids the
-    // false-negative for `position:fixed` elements whose offsetParent
-    // is null even when they are perfectly visible.
-    if (!el) return false;
-    let node = el;
-    while (node && node !== document.body) {
-        if (getComputedStyle(node).display === 'none') return false;
-        node = node.parentElement;
-    }
-    return true;
-}
-
-// Focus trap: keep Tab / Shift+Tab cycling inside `modal` so focus
-// can't escape to the content underneath while the overlay is open.
-// Call this once after the modal is in the DOM and initial focus is set.
-export function _trapFocusInModal(modal) {
-    const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-    modal.addEventListener('keydown', (e) => {
-        if (e.key !== 'Tab') return;
-        const els = Array.from(modal.querySelectorAll(FOCUSABLE)).filter(el => {
-            if (!_isElementVisible(el)) return false;
-            if (getComputedStyle(el).visibility === 'hidden') return false;
-            if (el.disabled) return false;
-            return true;
-        });
-        if (!els.length) return;
-        const first = els[0];
-        const last = els[els.length - 1];
-        if (e.shiftKey) {
-            if (document.activeElement === first) { e.preventDefault(); last.focus(); }
-        } else {
-            if (document.activeElement === last) { e.preventDefault(); first.focus(); }
-        }
-    });
-}
-
-// Styled async confirm dialog. Returns a Promise<boolean>. For destructive
-// prompts pass `danger: true` — confirm button turns red and Cancel gets
-// initial focus so an accidental Enter won't fire the action. `body` is
-// inserted as HTML so callers can use formatting; callers are responsible
-// for escaping any user-supplied content in it (use _escAttr).
-export function _confirmDialog({ title, body = '', confirmText = 'Confirm', cancelText = 'Cancel', danger = false } = {}) {
-    return new Promise((resolve) => {
-        const previouslyFocused = document.activeElement;
-        const modal = document.createElement('div');
-        modal.className = 'feedBack-modal fixed inset-0 z-[250] flex items-center justify-center bg-black/70 backdrop-blur-sm';
-        modal.setAttribute('role', 'alertdialog');
-        modal.setAttribute('aria-modal', 'true');
-        modal.setAttribute('aria-label', title || 'Confirm');
-        const confirmClass = danger
-            ? 'flex-1 bg-red-600 hover:bg-red-500 px-4 py-2 rounded-xl text-sm font-semibold text-white transition focus:outline-none focus:ring-2 focus:ring-red-400/60'
-            : 'flex-1 bg-accent hover:bg-accent-light px-4 py-2 rounded-xl text-sm font-semibold text-white transition focus:outline-none focus:ring-2 focus:ring-accent/60';
-        modal.innerHTML = `
-            <div class="bg-dark-700 border border-gray-700 rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl">
-                <h3 class="text-lg font-bold text-white mb-3">${_escAttr(title || '')}</h3>
-                <div class="mb-5">${body}</div>
-                <div class="flex gap-3">
-                    <button type="button" data-confirm class="${confirmClass}">${_escAttr(confirmText)}</button>
-                    <button type="button" data-cancel class="px-4 py-2 bg-dark-600 hover:bg-dark-500 rounded-xl text-sm text-gray-300 transition focus:outline-none focus:ring-2 focus:ring-gray-500/40">${_escAttr(cancelText)}</button>
-                </div>
-            </div>`;
-        document.body.appendChild(modal);
-
-        function finish(result) {
-            modal.remove();
-            document.removeEventListener('keydown', onKey, true);
-            if (previouslyFocused && document.body.contains(previouslyFocused)) {
-                try { previouslyFocused.focus({ preventScroll: true }); } catch {}
-            }
-            resolve(result);
-        }
-        function onKey(e) {
-            if (e.key === 'Escape') { e.preventDefault(); e.stopImmediatePropagation(); finish(false); }
-            else if (e.key === 'Enter' && document.activeElement === modal.querySelector('[data-confirm]')) {
-                e.preventDefault(); finish(true);
-            }
-        }
-        modal.addEventListener('click', (e) => {
-            if (e.target === modal) finish(false);
-            else if (e.target.closest('[data-confirm]')) finish(true);
-            else if (e.target.closest('[data-cancel]')) finish(false);
-        });
-        document.addEventListener('keydown', onKey, true);
-        _trapFocusInModal(modal);
-        // Focus Cancel by default for destructive prompts so an accidental
-        // Enter / Space won't fire the dangerous action; otherwise focus
-        // the confirm button so Enter accepts.
-        const focusTarget = modal.querySelector(danger ? '[data-cancel]' : '[data-confirm]');
-        if (focusTarget) focusTarget.focus({ preventScroll: true });
-    });
-}
-
-export function esc(s) {
-    const d = document.createElement('div');
-    d.textContent = s;
-    return d.innerHTML;
-}
-
-// `esc()` escapes the HTML-content metacharacters (<, >, &) but not
-// quotes — fine for text-node interpolation but unsafe when the
-// result is used as an attribute value, where a literal `"` ends the
-// attribute early. Use `_escAttr` for any `attr="${...}"` site.
-export function _escAttr(s) {
-    return esc(s == null ? '' : String(s))
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-
-// In-app text prompt — replaces window.prompt(), which Electron does NOT
-// implement (it logs "prompt() is and will not be supported" and returns null),
-// so any prompt()-based flow is a silent no-op on desktop. Returns the entered
-// string, or null if cancelled (Esc / Cancel / backdrop). Styled to match the
-// edit modal; role=dialog so the global keyboard shortcuts ignore typing here.
-// Injection-safe: all caller text is set via textContent / value, never innerHTML.
-export function uiPrompt({ title = '', label = '', value = '', okLabel = 'Save', placeholder = '' } = {}) {
-    return new Promise((resolve) => {
-        const modal = document.createElement('div');
-        modal.className = 'feedBack-modal fixed inset-0 z-[200] flex items-center justify-center bg-black/70 backdrop-blur-sm';
-        modal.setAttribute('role', 'dialog');
-        modal.setAttribute('aria-modal', 'true');
-        if (title) modal.setAttribute('aria-label', title);
-        modal.innerHTML = `
-            <form class="bg-dark-700 border border-gray-700 rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl">
-                <h3 class="text-lg font-bold text-white mb-4" data-ui-prompt-title hidden></h3>
-                <label class="text-xs text-gray-400 mb-1 block" data-ui-prompt-label hidden></label>
-                <input type="text" data-ui-prompt-input autocomplete="off"
-                    class="w-full bg-dark-600 border border-gray-700 rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-accent/50">
-                <div class="flex gap-3 mt-5">
-                    <button type="submit"
-                        class="flex-1 bg-accent hover:bg-accent-light px-4 py-2 rounded-xl text-sm font-semibold text-white transition" data-ui-prompt-ok></button>
-                    <button type="button" data-ui-prompt-cancel
-                        class="px-4 py-2 bg-dark-600 hover:bg-dark-500 rounded-xl text-sm text-gray-300 transition">Cancel</button>
-                </div>
-            </form>`;
-        const titleEl = modal.querySelector('[data-ui-prompt-title]');
-        const labelEl = modal.querySelector('[data-ui-prompt-label]');
-        const input = modal.querySelector('[data-ui-prompt-input]');
-        const okEl = modal.querySelector('[data-ui-prompt-ok]');
-        if (title) { titleEl.textContent = title; titleEl.hidden = false; }
-        if (label) { labelEl.textContent = label; labelEl.hidden = false; }
-        okEl.textContent = okLabel;
-        input.value = value;
-        if (placeholder) input.placeholder = placeholder;
-
-        // Restore focus to wherever it was when we're done (matches the edit
-        // modal's behavior so keyboard users aren't dumped at the page top).
-        const previousActiveElement = document.activeElement;
-        const focusables = () => Array.from(
-            modal.querySelectorAll('input, button, [tabindex]:not([tabindex="-1"])'),
-        ).filter((el) => !el.disabled && el.offsetParent !== null);
-
-        let settled = false;
-        const close = (result) => {
-            if (settled) return;
-            settled = true;
-            document.removeEventListener('keydown', onKey, true);
-            modal.remove();
-            if (previousActiveElement && typeof previousActiveElement.focus === 'function') {
-                previousActiveElement.focus();
-            }
-            resolve(result);
-        };
-        const onKey = (e) => {
-            if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(null); return; }
-            // Trap Tab inside the modal so focus can't wander to the page behind it.
-            if (e.key === 'Tab') {
-                const items = focusables();
-                if (!items.length) return;
-                const first = items[0];
-                const last = items[items.length - 1];
-                const active = document.activeElement;
-                if (e.shiftKey && (active === first || !modal.contains(active))) {
-                    e.preventDefault(); last.focus();
-                } else if (!e.shiftKey && (active === last || !modal.contains(active))) {
-                    e.preventDefault(); first.focus();
-                }
-            }
-        };
-        modal.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); close(input.value); });
-        modal.querySelector('[data-ui-prompt-cancel]').addEventListener('click', () => close(null));
-        // Backdrop (overlay itself, not the panel) cancels.
-        modal.addEventListener('mousedown', (e) => { if (e.target === modal) close(null); });
-        document.addEventListener('keydown', onKey, true);
-        document.body.appendChild(modal);
-        input.focus();
-        input.select();
-    });
-}