Refresh Configs with browser editing and source inspection

src/lib/ui/components/ConfigInspector.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import type { ConfigInspection, ConfigServer, ConfigSource } from '$lib/config-workbench.js';
+    import Button from './primitives/Button.svelte';
+    let { artifactId, draftText, scopeType, scopeValue }: { artifactId?: number; draftText?: string; scopeType?: string | null; scopeValue?: string | null } = $props();
+    let servers = $state<ConfigServer[]>([]);
+    let selected = $state('');
+    let inspection = $state<ConfigInspection | null>(null);
+    let loading = $state(true);
+    let error = $state('');
+    let query = $state('');
+    let onlyOverrides = $state(false);
+    let raw = $state(false);
+    let reload = $state(0);
+    let ready = $state(false);
+    const eligible = $derived(servers.filter(s => !artifactId || (scopeType === 'game' ? s.game === scopeValue : scopeType === 'map' ? s.map === scopeValue : false)));
+    const settings = $derived((inspection?.settings ?? []).filter(s => (!onlyOverrides || s.history.length > 1) && `${s.key} ${s.value} ${s.source.name}`.toLowerCase().includes(query.toLowerCase())));
+    const overlaps = $derived(inspection?.settings.filter(s => s.history.length > 1).length ?? 0);
+    function label(source: ConfigSource): string { return `${source.name}${source.draft ? ' · draft' : source.version ? ` · v${source.version}` : ''}`; }
+
+    async function loadServers() {
+        loading = true; error = '';
+        try {
+            const response = await fetch('/api/configs/inspect');
+            const body = await response.json();
+            if (!response.ok) throw new Error(body.error ?? 'Could not load servers.');
+            servers = body.servers;
+            ready = true;
+        } catch (err) { error = (err as Error).message; }
+        finally { loading = false; }
+    }
+    onMount(loadServers);
+    $effect(() => { if (!eligible.some(s => s.name === selected)) selected = eligible[0]?.name ?? ''; });
+    $effect(() => {
+        const server = selected;
+        const text = draftText;
+        const id = artifactId;
+        const refresh = reload;
+        if (!ready || !server) { inspection = null; if (ready) loading = false; return; }
+        const controller = new AbortController();
+        loading = true; error = ''; inspection = null;
+        const timer = setTimeout(async () => {
+            try {
+                const response = await fetch(id !== undefined && text !== undefined ? '/api/configs/inspect' : `/api/configs/inspect?server=${encodeURIComponent(server)}`, {
+                    signal: controller.signal,
+                    ...(id !== undefined && text !== undefined ? { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ server, artifactId: id, text }) } : {})
+                });
+                const body = await response.json();
+                if (!response.ok) throw new Error(body.error ?? 'Could not inspect this config.');
+                if (!controller.signal.aborted) inspection = body.inspection;
+            } catch (err) { if (!controller.signal.aborted) error = (err as Error).message; }
+            finally { if (!controller.signal.aborted) loading = false; }
+        }, text === undefined ? 0 : 350);
+        return () => { clearTimeout(timer); controller.abort(); };
+    });
+    function download() {
+        if (!inspection) return;
+        const url = URL.createObjectURL(new Blob([inspection.text], { type: 'text/plain' }));
+        const anchor = document.createElement('a'); anchor.href = url; anchor.download = `${selected}${artifactId ? '-draft' : ''}.cfg`; anchor.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+</script>
+
+<section class="inspector" aria-label="Effective config inspector" aria-busy={loading}>
+    <div class="heading"><div><span class="eyebrow">{artifactId ? 'Draft preview' : 'Follow every value to its source'}</span><h2>{artifactId ? 'On this server' : 'Effective configuration'}</h2></div>
+        <Button size="sm" variant="ghost" onclick={() => ready ? reload++ : loadServers()}>Refresh</Button>
+    </div>
+    <p class="intro">{artifactId ? 'Your draft composed with the other promoted configs. Saving creates an untested version.' : 'The intended file from promoted configs and the selected map. Live files and active betas may differ.'}</p>
+    <label class="server-label">Server<select aria-label="Server" bind:value={selected} disabled={!eligible.length}>
+        {#each eligible as server}<option value={server.name}>{server.name}</option>{/each}
+        {#if !eligible.length}<option value="">No matching servers</option>{/if}
+    </select></label>
+    {#if error}<div class="error" role="alert">{error}</div>
+    {:else if loading}<p class="empty" role="status">Composing configuration…</p>
+    {:else if !eligible.length}<p class="empty">{artifactId ? 'No registered servers match this scope.' : 'Register a server to inspect its configuration.'}</p>
+    {:else if inspection?.reason}<p class="empty">{inspection.reason}</p>
+    {:else if inspection}
+        <div class="sources" aria-label="Composition sources">
+            {#each inspection.sources as source, index}
+                {#if index}<span class="arrow" aria-hidden="true">→</span>{/if}
+                {#if source.id}<a class:draft={source.draft} href="/configs/{source.id}">{label(source)}</a>
+                {:else}<span class="map-source">{source.name}</span>{/if}
+            {/each}
+        </div>
+        <p class="hint">Overlays apply in creation order; later overlays win for the same key. The selected map takes precedence over map rotation.</p>
+        <div class="toolbar"><div class="switch"><button class:active={!raw} aria-pressed={!raw} onclick={() => raw = false}>Settings <span>{inspection.settings.length}</span></button><button class:active={raw} aria-pressed={raw} onclick={() => raw = true}>Composed .cfg</button></div><Button size="sm" variant="ghost" onclick={download}>Download</Button></div>
+        {#if raw}<textarea class="composed" readonly aria-label="Composed config" value={inspection.text} rows="18"></textarea>
+        {:else}
+            <div class="filters"><input aria-label="Search effective settings" bind:value={query} placeholder="Search settings or sources…" /><label class="check"><input type="checkbox" bind:checked={onlyOverrides} /> Overrides ({overlaps})</label></div>
+            <div class="settings">
+                {#each settings as setting (setting.key)}
+                    <details class="setting"><summary><div class="setting-main"><code>{setting.key}</code><strong>{setting.value}</strong></div><span class="source-label">{label(setting.source)} {#if setting.history.length > 1}<b>{setting.history.length - 1} overridden</b>{/if}</span></summary>
+                        <ol>{#each setting.history as entry, index}<li class:winner={index === setting.history.length - 1}><div><span>{label(entry.source)}</span><small>{entry.source.kind === 'map' ? 'Automatic' : `Line ${entry.line}`} · {index === setting.history.length - 1 ? 'Final value' : 'Overridden'}</small></div><code>{entry.value}</code></li>{/each}</ol>
+                    </details>
+                {:else}<p class="empty">No matching settings.</p>{/each}
+            </div>
+            <p class="hint">Shows set / seta assignments and map rotation. Other commands remain visible in the composed file.</p>
+        {/if}
+        {#if inspection.warnings.length}<details class="notes"><summary>{inspection.warnings.length} configuration {inspection.warnings.length === 1 ? 'note' : 'notes'}</summary><ul>{#each inspection.warnings as warning}<li>{warning}</li>{/each}</ul></details>{/if}
+    {/if}
+</section>
+
+<style>
+    .inspector { min-width: 0; padding: var(--space-6); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); }
+    .heading, .toolbar, .filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+    .eyebrow { font-size: var(--text-xs); color: var(--accent-primary-hover); }
+    h2 { margin: 5px 0 0; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
+    .intro { color: var(--text-secondary); font-size: var(--text-sm); margin: 12px 0 20px; }
+    .server-label { display: grid; gap: 8px; font-size: var(--text-xs); color: var(--text-secondary); }
+    select, input:not([type='checkbox']) { width: 100%; box-sizing: border-box; background: var(--surface-sunken); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; font: var(--text-sm) var(--font-body); }
+    select:focus-visible, input:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible, .composed:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
+    .sources { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; font-size: var(--text-xs); }
+    .sources a, .map-source { background: var(--surface-raised); border-radius: 6px; padding: 6px 9px; text-decoration: none; }
+    .sources a.draft { color: var(--state-warning); }
+    .map-source, .arrow { color: var(--text-secondary); }
+    .hint { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.6; }
+    .toolbar { border-top: 1px solid var(--border-subtle); padding-top: 12px; margin-top: 20px; }
+    .switch { display: flex; gap: 4px; }
+    button { border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font: var(--text-sm) var(--font-body); padding: 8px 10px; cursor: pointer; }
+    button.active { color: var(--text-primary); background: var(--surface-raised); }
+    button span { color: var(--text-secondary); margin-left: 6px; }
+    .filters { margin: 16px 0 8px; }
+    .filters > input { flex: 1 1 180px; }
+    .check { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
+    .settings { max-height: 620px; overflow: auto; }
+    .setting { border-bottom: 1px solid var(--border-subtle); padding: 14px 0; }
+    .setting summary { cursor: pointer; list-style: none; }
+    .setting summary::-webkit-details-marker { display: none; }
+    .setting-main { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
+    code, strong { font: var(--text-xs)/1.6 var(--font-mono); overflow-wrap: anywhere; white-space: pre-wrap; }
+    strong { color: var(--accent-primary-hover); }
+    .source-label { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px; color: var(--text-secondary); margin-top: 6px; }
+    .source-label::before { content: '▸'; } .setting[open] .source-label::before { content: '▾'; }
+    b { font-weight: 400; color: var(--state-warning); }
+    ol { list-style: none; padding: 0 0 0 14px; margin: 16px 0 0 4px; border-left: 2px solid var(--border-strong); }
+    ol li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; color: var(--text-secondary); font-size: var(--text-xs); }
+    ol li.winner { color: var(--text-primary); }
+    small { display: block; font-size: 10px; color: var(--text-secondary); margin-top: 3px; }
+    .composed { display: block; width: 100%; box-sizing: border-box; margin-top: 16px; padding: 20px; background: var(--surface-sunken); color: var(--text-primary); border: 0; border-radius: var(--radius-sm); min-height: 260px; max-height: 600px; resize: vertical; overflow: auto; font: var(--text-xs)/1.8 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
+    .notes { margin-top: 16px; color: var(--state-warning); font-size: var(--text-xs); } .notes summary { cursor: pointer; } .notes li { margin: 8px 0; }
+    .empty { color: var(--text-secondary); font-size: var(--text-sm); padding: 24px 0; }
+    .error { color: var(--state-danger); margin-top: 16px; font-size: var(--text-sm); }
+    @media (max-width: 600px) { .inspector { padding: 16px; } }
+</style>