Add multi-server blueprint collections and atomic launches

src/routes/api/blueprints/[id]/+server.ts

@@ -1,6 +1,14 @@
 import { json } from '@sveltejs/kit';
-import { deleteBlueprint } from '$lib/server/fleet/launch-recipes.js';
+import { deleteBlueprint, updateBlueprint } from '$lib/server/fleet/launch-recipes.js';
 
 export function DELETE({ params }: { params: { id: string } }) {
     return deleteBlueprint(params.id) ? json({ ok: true }) : json({ error: 'Blueprint not found.' }, { status: 404 });
 }
+
+export async function PUT({ params, request }: { params: { id: string }; request: Request }) {
+    try {
+        const body = await request.json();
+        if (!body || typeof body !== 'object' || Array.isArray(body)) throw new Error('Provide a blueprint name and map selections.');
+        return json({ blueprint: updateBlueprint(params.id, body) });
+    } catch (err) { return json({ error: (err as Error).message }, { status: 400 }); }
+}

src/routes/api/deployment-collections/+server.ts

@@ -0,0 +1,15 @@
+import { json } from '@sveltejs/kit';
+import { listCollections, queueCollection } from '$lib/server/fleet/collections.js';
+import { kick } from '$lib/server/pipeline/worker.js';
+
+export function GET() { return json({ collections: listCollections() }); }
+
+export async function POST({ request }: { request: Request }) {
+    try {
+        const body = await request.json();
+        if (!body || typeof body !== 'object' || Array.isArray(body)) throw new Error('Provide a collection preview and its server keys.');
+        const result = queueCollection(body);
+        void kick().catch(err => console.error('[collection] worker kick failed:', err));
+        return json(result, { status: 202 });
+    } catch (err) { return json({ error: (err as Error).message }, { status: 400 }); }
+}

src/routes/api/deployment-collections/[id]/+server.ts

@@ -0,0 +1,8 @@
+import { error, json } from '@sveltejs/kit';
+import { getCollection } from '$lib/server/fleet/collections.js';
+
+export function GET({ params }: { params: { id: string } }) {
+    const detail = getCollection(params.id);
+    if (!detail) error(404, 'Collection not found.');
+    return json(detail);
+}

src/routes/api/deployment-collections/preview/+server.ts

@@ -0,0 +1,9 @@
+import { json } from '@sveltejs/kit';
+import { previewCollection } from '$lib/server/fleet/collections.js';
+
+export async function POST({ request }: { request: Request }) {
+    try {
+        const body = await request.json();
+        return json(previewCollection(body?.blueprintId));
+    } catch (err) { return json({ error: (err as Error).message }, { status: 400 }); }
+}

src/routes/deployments/+page.svelte

@@ -5,7 +5,9 @@
     import Button from '$ui/components/primitives/Button.svelte';
     import EmptyState from '$ui/components/primitives/EmptyState.svelte';
     import DeployServerDialog from '$ui/components/DeployServerDialog.svelte';
-    import type { BlueprintSummary } from '$lib/deployment-plan.js';
+    import BlueprintBuilder from '$ui/components/BlueprintBuilder.svelte';
+    import DeployCollectionDialog from '$ui/components/DeployCollectionDialog.svelte';
+    import type { BlueprintSummary, CollectionSummary } from '$lib/deployment-plan.js';
 
     interface Deployment {
         id: string; server: string; action: 'create' | 'destroy';
@@ -18,6 +20,10 @@
     let error = $state('');
     let open = $state(false);
     let blueprintId = $state('');
+    let builderOpen = $state(false);
+    let editingBlueprint = $state<BlueprintSummary | null>(null);
+    let collectionOpen = $state(false);
+    let collections = $state<CollectionSummary[]>([]);
     let blueprints = $state<BlueprintSummary[]>([]);
     let blueprintsLoading = $state(true);
     let blueprintError = $state('');
@@ -33,13 +39,18 @@
         if (refreshing) return;
         refreshing = true;
         try {
-            const res = await fetch('/api/deployments');
-            if (!res.ok) throw new Error('Could not load server deployments.');
+            const [res, collectionRes] = await Promise.all([fetch('/api/deployments'), fetch('/api/deployment-collections')]);
+            if (!res.ok || !collectionRes.ok) throw new Error('Could not load server deployments.');
             deployments = (await res.json()).deployments;
+            collections = (await collectionRes.json()).collections;
             error = '';
         } catch (err) { error = (err as Error).message; }
         finally { loading = false; refreshing = false; }
     }
+    function blueprintSaved(blueprint: BlueprintSummary, launch: boolean) {
+        blueprints = [...blueprints.filter(item => item.id !== blueprint.id), blueprint].sort((a, b) => a.name.localeCompare(b.name));
+        if (launch) { blueprintId = blueprint.id; collectionOpen = true; }
+    }
     onMount(() => {
         void load();
         void loadBlueprints();
@@ -73,29 +84,33 @@
 
 <svelte:head><title>Server deployments | Electric Cherry</title></svelte:head>
 <div class="page">
-    <SectionHeader title="Deployments" subtitle="Your next game starts here. Save a setup, preview a launch, and follow it all the way online." />
+    <SectionHeader title="Deployments" subtitle="Build a lineup of maps and lobbies. Launch them together and follow every server online." />
     <div class="launch-banner">
-        <div><span class="eyebrow">From setup to first round</span><h2>Build it once. Bring it back anytime.</h2><p>Launch from your promoted setup or a saved blueprint, with the files and prerequisites laid out before you commit.</p></div>
-        <Button variant="primary" onclick={() => { blueprintId = ''; open = true; }}>Create a server →</Button>
+        <div><span class="eyebrow">One blueprint. A whole game night.</span><h2>Two Kino. One Moon. Two Town. One launch.</h2><p>Choose your maps, set the lobby counts, and save the lineup. Preview every server and launch the whole collection together.</p></div>
+        <div class="banner-actions"><Button variant="primary" onclick={() => { editingBlueprint = null; builderOpen = true; }}>Create blueprint →</Button><Button variant="ghost" onclick={() => { blueprintId = ''; open = true; }}>Single server</Button></div>
     </div>
-    <DeployServerDialog bind:open initialBlueprintId={blueprintId} onblueprint={loadBlueprints} />
+    <DeployServerDialog bind:open onblueprint={loadBlueprints} />
+    <BlueprintBuilder bind:open={builderOpen} blueprint={editingBlueprint} onsaved={blueprintSaved} />
+    <DeployCollectionDialog bind:open={collectionOpen} {blueprintId} />
     <section>
         <h2>Your blueprints <span>{blueprints.length}</span></h2>
         {#if blueprintError}<p role="alert" class="error">{blueprintError} <button onclick={loadBlueprints}>Retry</button></p>{/if}
         {#if blueprintsLoading}<p>Loading blueprints…</p>
-        {:else if !blueprints.length}<div class="blueprint-empty"><strong>A good setup deserves a repeat.</strong><p>Preview a server and choose “Make this a reusable blueprint” to save its map, image reference, and managed files.</p><button onclick={() => { blueprintId = ''; open = true; }}>Create your first blueprint →</button></div>
+        {:else if !blueprints.length}<div class="blueprint-empty"><strong>Plan the whole lineup.</strong><p>Add maps from either game, choose how many lobbies each needs, and launch them together from one blueprint.</p><button onclick={() => { editingBlueprint = null; builderOpen = true; }}>Create your first blueprint →</button></div>
         {:else}
             <div class="blueprints">
                 {#each blueprints as blueprint (blueprint.id)}
                     <article class="blueprint">
                         <div class="blueprint-top">
-                            <span class="eyebrow">{blueprint.recipe.game === 't6' ? 'Black Ops II' : 'Black Ops I'} · {blueprint.recipe.mapName}</span>
-                            <span class="file-count">{blueprint.recipe.files.length} file{blueprint.recipe.files.length === 1 ? '' : 's'}</span>
+                            <span class="eyebrow">Server collection</span>
+                            <span class="file-count">{blueprint.totalServers} server{blueprint.totalServers === 1 ? '' : 's'}</span>
                         </div>
                         <h3>{blueprint.name}</h3>
-                        <p>{blueprint.description || 'A saved launch recipe, ready for a fresh lobby.'}</p>
+                        <p>{blueprint.description || 'Your saved lineup, ready to launch together.'}</p>
+                        <ul class="blueprint-lineup">{#each blueprint.entries as entry}<li><strong>{entry.count}×</strong> {entry.recipe.mapName} <small>{entry.recipe.game.toUpperCase()}</small></li>{/each}</ul>
                         <div class="blueprint-footer">
-                            <Button onclick={() => { blueprintId = blueprint.id; open = true; }}>Preview launch →</Button>
+                            <Button onclick={() => { blueprintId = blueprint.id; collectionOpen = true; }}>Launch {blueprint.totalServers} server{blueprint.totalServers === 1 ? '' : 's'} →</Button>
+                            <button class="edit" onclick={() => { editingBlueprint = blueprint; builderOpen = true; }}>Edit</button>
                             <button class="remove" disabled={!!removing} onclick={() => confirmRemove = blueprint.id}>Remove</button>
                         </div>
                         {#if confirmRemove === blueprint.id}
@@ -111,6 +126,18 @@
         {/if}
     </section>
     {#if error}<p role="alert" class="error">{error} <button onclick={load}>Retry</button></p>{/if}
+    {#if collections.length}
+        <section>
+            <h2>Collection launches</h2>
+            <div class="rows">{#each collections as collection (collection.id)}
+                <a class="deployment-row" href="/deployments/collections/{collection.id}">
+                    <div class="row-head"><strong>{collection.name}</strong><Badge variant={collection.failed ? 'danger' : collection.active ? 'info' : 'online'}>{collection.active ? 'In progress' : collection.failed ? 'Needs attention' : 'Completed'}</Badge></div>
+                    <p>{collection.done} of {collection.total} servers verified{collection.failed ? ` · ${collection.failed} need attention` : ''}{collection.active ? ` · ${collection.active} in progress` : ''}</p>
+                    <span class="meta">Started {fmt(collection.created_at)}</span>
+                </a>
+            {/each}</div>
+        </section>
+    {/if}
     <section>
         <h2>In flight <span>{active.length}</span></h2>
         {#if loading}<p>Loading deployments...</p>
@@ -149,6 +176,7 @@
     .row-head { justify-content: space-between; }
     .launch-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; border: 1px solid var(--border-strong); border-radius: 16px; padding: 28px; background: linear-gradient(120deg, color-mix(in oklab, var(--accent-primary) 10%, var(--surface)), var(--surface)); }
     .launch-banner > div { max-width: 650px; }.launch-banner h2 { font-size: 25px; letter-spacing: -.03em; }.launch-banner p, .blueprint p, .blueprint-empty p { color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
+    .banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }.blueprint-lineup { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 9px; font-size: 13px; }.blueprint-lineup strong { color: var(--accent-primary-hover); margin-right: 5px; }.blueprint-lineup small { color: var(--text-secondary); margin-left: 6px; }.edit { background: none; border: 0; color: var(--accent-primary-hover); font: inherit; font-size: 12px; cursor: pointer; }.blueprint-footer { flex-wrap: wrap; }
     .eyebrow { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: var(--text-secondary); margin-bottom: 8px; }
     .blueprints { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 16px; }.blueprint { padding: 22px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; }.blueprint h3 { margin: 8px 0 0; font-size: 19px; overflow-wrap: anywhere; }.blueprint > p { flex: 1; overflow-wrap: anywhere; }.blueprint-top, .blueprint-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.blueprint-top .eyebrow { margin: 0; }.file-count { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }.blueprint-footer { border-top: 1px solid var(--border-subtle); padding-top: 16px; margin-top: 16px; }
     .remove, .blueprint-empty button, .remove-confirm button { background: none; color: var(--accent-primary-hover); border: 0; font: inherit; font-size: 12px; cursor: pointer; }.remove { color: var(--text-secondary); }.remove-confirm { border-top: 1px solid var(--border-subtle); margin-top: 14px; }.remove-confirm button { margin-right: 12px; }.blueprint-empty { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 24px; }.blueprint-empty strong { font-size: 15px; }.blueprint-empty button { padding: 8px 0 0; }

src/routes/deployments/[id]/+page.svelte

@@ -14,7 +14,7 @@
         stage: string; started_at: string; finished_at: string | null;
         triggered_by: string; error: string | null; warnings: string; server_exists: number;
     }
-    interface Detail { deployment: Deployment; events: { id: number; created_at: string; message: string }[]; recipe: LaunchRecipeSummary | null; blueprintName: string | null; canResumeVerification: boolean }
+    interface Detail { deployment: Deployment; events: { id: number; created_at: string; message: string }[]; recipe: LaunchRecipeSummary | null; blueprintName: string | null; canResumeVerification: boolean; collection: { id: string; name: string } | null }
     let detail = $state<Detail | null>(null);
     let error = $state('');
     let refreshing = false;
@@ -102,6 +102,7 @@
         {#snippet crumbs()}<Breadcrumbs items={[{ label: 'Deployments', href: '/deployments' }, { label: deployment?.server ?? 'Details' }]} />{/snippet}
     </SectionHeader>
     {#if error}<p role="alert" class="error">{error} <button onclick={load}>Retry</button></p>{/if}
+    {#if detail?.collection}<a href="/deployments/collections/{detail.collection.id}">← Back to {detail.collection.name} collection</a>{/if}
     {#if deployment}
         <section class="summary">
             <div class="top"><Badge variant={deployment.state === 'done' ? 'online' : deployment.state === 'failed' ? 'danger' : 'warning'}>{stateLabel(deployment.state)}</Badge>

src/routes/deployments/collections/[id]/+page.server.ts

@@ -0,0 +1,7 @@
+import { error } from '@sveltejs/kit';
+import { getCollection } from '$lib/server/fleet/collections.js';
+
+export function load({ params }: { params: { id: string } }) {
+    if (!getCollection(params.id)) error(404, 'Collection not found.');
+    return {};
+}

src/routes/deployments/collections/[id]/+page.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
+    import Breadcrumbs from '$ui/components/primitives/Breadcrumbs.svelte';
+    import Badge from '$ui/components/primitives/Badge.svelte';
+    import type { CollectionDetail } from '$lib/deployment-plan.js';
+
+    let detail = $state<CollectionDetail | null>(null);
+    let error = $state('');
+    let requestNumber = 0;
+    let collection = $derived(detail?.collection);
+    const labels: Record<string, string> = { queued: 'Queued', running: 'Provisioning', 'awaiting-health': 'Verifying health', done: 'Verified', warning: 'Completed with warnings', failed: 'Failed', interrupted: 'Interrupted' };
+    async function load() {
+        const id = $page.params.id ?? '';
+        const current = ++requestNumber;
+        try {
+            const res = await fetch(`/api/deployment-collections/${encodeURIComponent(id)}`);
+            if (!res.ok) throw new Error('Could not refresh this collection.');
+            const body = await res.json();
+            if (current === requestNumber && id === $page.params.id) { detail = body; error = ''; }
+        } catch (err) { if (current === requestNumber) error = (err as Error).message; }
+    }
+    $effect(() => { $page.params.id; detail = null; void load(); });
+    onMount(() => { const timer = setInterval(load, 2000); return () => { clearInterval(timer); requestNumber++; }; });
+</script>
+
+<svelte:head><title>{collection?.name ?? 'Collection launch'} | Electric Cherry</title></svelte:head>
+<div class="page">
+    <SectionHeader title={collection?.name ?? 'Collection launch'} subtitle="One launch, individual progress for every server.">
+        {#snippet crumbs()}<Breadcrumbs items={[{ label: 'Deployments', href: '/deployments' }, { label: 'Collection launch' }]} />{/snippet}
+    </SectionHeader>
+    {#if error}<p class="error" role="alert">{error} <button onclick={load}>Retry</button></p>{/if}
+    {#if collection && detail}
+        <section class="summary">
+            <div class="top"><h2>{collection.active ? 'Your lineup is coming online' : collection.failed ? 'Some servers need attention' : 'Your lineup is ready'}</h2><Badge variant={collection.failed ? 'danger' : collection.active ? 'info' : 'online'}>{collection.active ? 'In progress' : collection.failed ? 'Needs attention' : 'Completed'}</Badge></div>
+            <dl><div><dt>Servers</dt><dd>{collection.total}</dd></div><div><dt>Verified</dt><dd>{collection.done}</dd></div><div><dt>In progress</dt><dd>{collection.active}</dd></div><div><dt>Need attention</dt><dd>{collection.failed}</dd></div></dl>
+            <progress value={collection.done + collection.failed} max={collection.total || 1} aria-label="Finished server operations"></progress>
+            <p class="muted">Every server was queued together. Provisioning runs in sequence, then each server verifies its container, RCON, and map. Open a server’s operation for its full timeline{collection.failed ? ' and recovery options' : ''}.</p>
+        </section>
+        <section class="servers" aria-label="Servers in this collection">
+            {#each detail.servers as server (server.id)}
+                <a class="server" href="/deployments/{server.id}">
+                    <div class="top"><strong>{server.server}</strong><Badge variant={server.state === 'done' ? 'online' : ['failed', 'interrupted'].includes(server.state) ? 'danger' : 'info'}>{labels[server.state] ?? server.state}</Badge></div>
+                    <p>{server.stage}</p>
+                    {#if server.error}<p class="error">{server.error}</p>{/if}
+                    <div class="top muted"><span>Port {server.port} · {server.server.startsWith('t6_') ? 'Black Ops II' : 'Black Ops I'}</span><span>View operation →</span></div>
+                </a>
+            {/each}
+        </section>
+    {:else if !error}<p class="muted">Loading collection…</p>{/if}
+</div>
+
+<style>
+    .page { display: grid; gap: 28px; }.summary { display: grid; gap: 20px; padding: 24px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); }.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }h2, p { margin: 0; }h2 { font-size: 21px; }.muted { color: var(--text-secondary); font-size: 12px; line-height: 1.6; }dl { display: flex; flex-wrap: wrap; gap: 24px 50px; margin: 0; }dt { color: var(--text-secondary); font-size: 12px; }dd { font-family: var(--font-mono); font-size: 28px; margin: 8px 0 0; }progress { width: 100%; height: 8px; accent-color: var(--accent-primary); }.servers { display: grid; gap: 14px; }.server { display: grid; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 10px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }.server:hover { border-color: var(--border-strong); }.server strong { font-family: var(--font-mono); font-size: 14px; }.server p { font-size: 13px; line-height: 1.6; }.error { color: var(--state-danger); }
+</style>