Persist Plutonium keys by server ID and add key management

src/lib/ui/components/DeployServerDialog.svelte

@@ -22,6 +22,10 @@
     let gameMode = $state<'zombie'>('zombie');
     let mapSlug = $state<string>('');
     let plutoKey = $state('');
+    let lobby = $state('1');
+    let savedIds = $state<string[]>([]);
+    let deployedIds = $state<string[]>([]);
+    let keysLoaded = $state(false);
     let deploying = $state(false);
     let flash = $state<string | null>(null);
 
@@ -52,10 +56,21 @@
 
     function reset(): void {
         plutoKey = '';
+        void loadKeys();
         flash = null;
         deploying = false;
         if (maps.length > 0 && !maps.some((m) => m.slug === mapSlug)) mapSlug = maps[0].slug;
     }
+    async function loadKeys() {
+        keysLoaded = false;
+        try {
+            const [keysRes, serversRes] = await Promise.all([fetch('/api/server-keys'), fetch('/api/servers')]);
+            if (!keysRes.ok || !serversRes.ok) throw new Error('Could not load saved keys and server slots. Reopen this dialog to retry.');
+            savedIds = (await keysRes.json()).keys.map((k: { server_id: string }) => k.server_id);
+            deployedIds = (await serversRes.json()).servers.map((s: { name: string }) => s.name);
+            keysLoaded = true;
+        } catch (err) { flash = (err as Error).message; }
+    }
     function close(): void { open = false; }
 
     function onDialogClick(e: MouseEvent): void {
@@ -63,7 +78,21 @@
     }
 
     let selectedMap = $derived(maps.find((m) => m.slug === mapSlug));
-    let previewName = $derived(selectedMap ? `t5_${gameMode}_${selectedMap.slug}_?` : '');
+    let previewName = $derived(selectedMap ? `t5_${gameMode}_${selectedMap.slug}_${lobby}` : '');
+
+    let hasSavedKey = $derived(savedIds.includes(previewName));
+    let alreadyDeployed = $derived(deployedIds.includes(previewName));
+    let lobbyOptions = $derived(Array.from({ length: 20 }, (_, i) => {
+        const value = String(i + 1);
+        const id = `t5_${gameMode}_${mapSlug}_${value}`;
+        return { value, label: `${value}${deployedIds.includes(id) ? ' (deployed)' : savedIds.includes(id) ? ' (saved key)' : ''}` };
+    }));
+    $effect(() => {
+        const prefix = `t5_${gameMode}_${mapSlug}_`;
+        lobby = String(Array.from({ length: 20 }, (_, i) => i + 1)
+            .find(n => !deployedIds.includes(`${prefix}${n}`)) ?? 1);
+    });
+    $effect(() => { mapSlug; lobby; plutoKey = ''; });
 
     let modeOptions = [{ value: 'zombie', label: 'Zombies' }];
     let mapOptions = $derived(maps.map((m) => ({ value: m.slug, label: m.friendly })));
@@ -72,14 +101,14 @@
         e.preventDefault();
         if (deploying) return;
         if (!selectedMap) { flash = 'Pick a map'; return; }
-        if (plutoKey.trim().length === 0) { flash = 'Pluto server key is required'; return; }
+        if (!hasSavedKey && plutoKey.trim().length === 0) { flash = 'Pluto server key is required'; return; }
         deploying = true;
         flash = null;
         try {
             const res = await fetch('/api/servers', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ gameMode, mapSlug: selectedMap.slug, plutoKey })
+                body: JSON.stringify({ gameMode, mapSlug: selectedMap.slug, lobby: Number(lobby), plutoKey: plutoKey.trim() || undefined })
             });
             const body = (await res.json()) as { ok: boolean; name?: string; port?: number; error?: string; kind?: string };
             if (!body.ok || !body.name) {
@@ -121,11 +150,15 @@
                     <Select bind:value={mapSlug} options={mapOptions} disabled={deploying} />
                 </Field>
 
-                <Field label="Pluto server key" hint="Paste each deploy — not stored anywhere.">
+                <Field label="Lobby number" hint="Choose the same lobby to reuse its server ID and saved key.">
+                    <Select bind:value={lobby} options={lobbyOptions} disabled={deploying} />
+                </Field>
+
+                <Field label="Pluto server key" hint={hasSavedKey ? 'Saved key ready. Leave blank to reuse it, or enter a replacement.' : 'Saved for this server ID and reused on future deployments.'}>
                     <Input
                         type="password"
                         bind:value={plutoKey}
-                        placeholder="paste key"
+                        placeholder={hasSavedKey ? "Saved key ready" : "paste key"}
                         autocomplete="off"
                         disabled={deploying}
                     />
@@ -135,15 +168,16 @@
             <div class="preview">
                 <span class="preview-k">Will create</span>
                 <span class="preview-v">{previewName || '—'}</span>
-                <span class="preview-sub">(lobby number + port auto-assigned)</span>
+                <span class="preview-sub">{alreadyDeployed ? "Already deployed; choose another lobby" : "Port auto-assigned"}</span>
             </div>
 
+            <a href="/server-keys" onclick={close}>Manage saved keys</a>
             <div class="actions">
                 <Button variant="ghost" onclick={close} disabled={deploying}>Cancel</Button>
                 <Button
                     type="submit"
                     variant="primary"
-                    disabled={deploying || !selectedMap}
+                    disabled={deploying || !selectedMap || !keysLoaded || alreadyDeployed}
                     loading={deploying}
                 >
                     Deploy server
@@ -217,7 +251,7 @@
         gap: var(--space-4);
     }
     .fields :global(.field):nth-child(1),
-    .fields :global(.field):nth-child(4) {
+    .fields :global(.field):nth-child(5) {
         grid-column: 1 / -1;
     }