diff --git a/src/App.svelte b/src/App.svelte
index ef382dc..1a3420d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -6,6 +6,7 @@
   import KeyArt from "./components/KeyArt.svelte";
   import MarketplaceDrawer from "./components/MarketplaceDrawer.svelte";
   import NewsPanel from "./components/NewsPanel.svelte";
+  import ReleasePanel from "./components/ReleasePanel.svelte";
   import SettingsDrawer from "./components/SettingsDrawer.svelte";
   import SyncPanel from "./components/SyncPanel.svelte";
   import StatusBar from "./components/StatusBar.svelte";
@@ -43,6 +44,10 @@
     <div class="sync-slot"><SyncPanel /></div>
   {/if}
 
+  {#if launcher.releaseOpen}
+    <div class="sync-slot"><ReleasePanel /></div>
+  {/if}
+
   <SettingsDrawer bind:open={settingsOpen} />
   <MarketplaceDrawer />
 </div>
diff --git a/src/components/ActionPanel.svelte b/src/components/ActionPanel.svelte
index a3513ae..0c77cd5 100644
--- a/src/components/ActionPanel.svelte
+++ b/src/components/ActionPanel.svelte
@@ -113,23 +113,11 @@
   ] as const;
 
   // ---- releasing ------------------------------------------------------------
-  const plan = $derived(launcher.release);
-  const releasing = $derived(busy === "release");
-  let releaseOpen = $state(false);
-  let nodePassword = $state("");
-  let withApi = $state(true);
-
   async function openRelease() {
-    releaseOpen = true;
+    launcher.releaseOpen = true;
     await launcher.loadRelease();
   }
 
-  async function doRelease() {
-    await launcher.releaseRun(nodePassword, withApi);
-    nodePassword = "";              // held for the one run, never kept
-    releaseOpen = false;
-  }
-
   async function browseCheckout() {
     const path = await launcher.pickFolder();
     if (path) await launcher.setDev({ dev_root: path });
@@ -324,51 +312,6 @@
           {/if}
         </div>
 
-        {#if releaseOpen}
-          <div class="dev-release-panel">
-            {#if releasing && !plan}
-              <p class="dev-note">Looking at what is live and what this PC holds…</p>
-            {:else if plan}
-              <ul class="dev-plan">
-                {#each plan.items as row (row.key)}
-                  <li class:behind={row.behind === true} class:dirty={row.dirty}>
-                    <span class="dev-plan-name">{row.title}</span>
-                    <span class="dev-plan-live mono">{row.live ?? "—"}</span>
-                    <span class="dev-plan-note">{row.note}</span>
-                  </li>
-                {/each}
-              </ul>
-              <div class="dev-checks mono">
-                <span class:ok={plan.online}>DHP {plan.online ? "✓" : "✗"}</span>
-                <span class:ok={plan.docker}>Docker {plan.docker ? "✓" : "✗"}</span>
-                <span class:ok={plan.scripts}>scripts {plan.scripts ? "✓" : "✗"}</span>
-              </div>
-              {#if plan.blocked}
-                <p class="dev-note attention">{plan.blocked}</p>
-              {:else}
-                <label class="dev-check">
-                  <input type="checkbox" bind:checked={withApi} disabled={!plan.docker || releasing} />
-                  <span>Also roll the Engine API{plan.docker ? "" : " (needs Docker)"} — logs everyone out</span>
-                </label>
-                <div class="dev-row">
-                  <input
-                    class="dev-path"
-                    type="password"
-                    placeholder="node sudo password"
-                    bind:value={nodePassword}
-                    disabled={releasing}
-                  />
-                  <button class="btn" disabled={releasing || !nodePassword.trim()} onclick={doRelease}>Release</button>
-                </div>
-                <p class="dev-note">
-                  Runs in its own window. Each step decides for itself whether it has anything to do.
-                </p>
-              {/if}
-            {/if}
-            <button class="btn-link" onclick={() => (releaseOpen = false)}>Close</button>
-          </div>
-        {/if}
-
         <label class="dev-check">
           <input
             type="checkbox"
@@ -644,50 +587,6 @@
   .dev-release {
     font-weight: 600;
   }
-  .dev-release-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    padding: 0.5rem;
-    border: 1px solid var(--line, #2a3139);
-    border-radius: 6px;
-    background: rgba(0, 0, 0, 0.25);
-  }
-  .dev-plan {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-  }
-  .dev-plan li {
-    display: grid;
-    grid-template-columns: 5.5rem 4.5rem 1fr;
-    gap: 0.4rem;
-    align-items: baseline;
-    font-size: 0.76rem;
-    color: var(--text-dim, #9aa3ad);
-  }
-  .dev-plan li.behind .dev-plan-name {
-    color: #46d17f;
-  }
-  .dev-plan li.dirty .dev-plan-note {
-    color: #e6b35a;
-  }
-  .dev-plan-name {
-    font-weight: 600;
-    color: inherit;
-  }
-  .dev-checks {
-    display: flex;
-    gap: 0.7rem;
-    font-size: 0.72rem;
-    color: #e06c6c;
-  }
-  .dev-checks span.ok {
-    color: #46d17f;
-  }
 
   .action {
     display: grid;
diff --git a/src/components/ReleasePanel.svelte b/src/components/ReleasePanel.svelte
new file mode 100644
index 0000000..d1f53d5
--- /dev/null
+++ b/src/components/ReleasePanel.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+  import { fly } from "svelte/transition";
+  import { prefersReducedMotion } from "svelte/motion";
+  import Icon from "./Icon.svelte";
+  import { launcher } from "../lib/launcher.svelte";
+
+  // Its own panel rather than a block inside the action card: the card is anchored to the
+  // bottom of the window and cannot grow, so three rows plus a password field pushed the
+  // Release button off the bottom - visible, unreachable, and reported as "it doesn't work".
+  const plan = $derived(launcher.release);
+  const busy = $derived(launcher.busy === "release");
+
+  let password = $state("");
+  let withApi = $state(true);
+
+  async function release() {
+    await launcher.releaseRun(password, withApi);
+    password = "";                    // held for the one run, never kept
+  }
+
+  /** The short version of a row's state, for the column that has room for three words.
+      NOT called `state`: that shadows the `$state` rune in this file, and everything
+      declared with it silently stops being reactive. */
+  function rowState(row: { behind: boolean | null; dirty: boolean }): { text: string; tone: string } {
+    if (row.dirty) return { text: "uncommitted", tone: "warn" };
+    if (row.behind === true) return { text: "behind", tone: "go" };
+    if (row.behind === false) return { text: "up to date", tone: "dim" };
+    return { text: "unknown", tone: "dim" };
+  }
+</script>
+
+<section
+  class="release glass"
+  aria-label="Build and deploy"
+  transition:fly={{ y: 8, duration: prefersReducedMotion.current ? 0 : 200 }}
+>
+  <header class="head">
+    <Icon name="code" size={14} />
+    <h2 class="eyebrow">Build &amp; deploy</h2>
+    <span class="grow"></span>
+    <button class="icon-btn" aria-label="Close" onclick={() => (launcher.releaseOpen = false)}>
+      <Icon name="close" size={14} />
+    </button>
+  </header>
+
+  <div class="body">
+    {#if !plan}
+      <p class="note">Looking at what is live and what this PC holds…</p>
+    {:else}
+      <ul class="plan">
+        {#each plan.items as row (row.key)}
+          {@const st = rowState(row)}
+          <li>
+            <span class="name">{row.title}</span>
+            <span class="live mono">{row.live ?? "—"}</span>
+            <span class="state {st.tone}">{st.text}</span>
+            <span class="commit mono">{row.commit ?? ""}</span>
+          </li>
+        {/each}
+      </ul>
+
+      <div class="checks mono">
+        <span class:ok={plan.online}>DHP {plan.online ? "✓" : "✗"}</span>
+        <span class:ok={plan.docker}>Docker {plan.docker ? "✓" : "✗"}</span>
+        <span class:ok={plan.scripts}>scripts {plan.scripts ? "✓" : "✗"}</span>
+      </div>
+
+      {#if plan.blocked}
+        <p class="note warn">{plan.blocked}</p>
+      {:else}
+        <p class="note">
+          Each step decides for itself whether it has anything to do, so a press releases only
+          what has moved. It runs in its own window.
+        </p>
+        <label class="check">
+          <input type="checkbox" bind:checked={withApi} disabled={!plan.docker || busy} />
+          <span>
+            Also roll the Engine API{plan.docker ? "" : " — needs Docker"}
+            <em>— every operator is logged out</em>
+          </span>
+        </label>
+        <div class="row">
+          <input
+            class="input"
+            type="password"
+            autocomplete="off"
+            placeholder="node sudo password"
+            bind:value={password}
+            disabled={busy}
+          />
+          <button class="btn primary-ish" disabled={busy || !password.trim()} onclick={release}>
+            {busy ? "Starting…" : "Release"}
+          </button>
+        </div>
+      {/if}
+    {/if}
+  </div>
+</section>
+
+<style>
+  .release {
+    display: flex;
+    flex-direction: column;
+    max-height: min(460px, calc(100vh - 180px));
+    background: var(--glass-strong);
+    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
+  }
+  .head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 8px 8px 16px;
+    border-bottom: 1px solid var(--line);
+    color: #46d17f;
+  }
+  .grow {
+    flex: 1;
+  }
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    padding: 12px 16px 14px;
+    overflow: auto;
+  }
+  .plan {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .plan li {
+    display: grid;
+    grid-template-columns: 6.5rem 4.5rem 6rem 1fr;
+    gap: 0.5rem;
+    align-items: baseline;
+    font-size: 0.8rem;
+  }
+  .name {
+    font-weight: 600;
+  }
+  .live,
+  .commit {
+    color: var(--muted);
+    font-size: 0.75rem;
+  }
+  .state.go {
+    color: #46d17f;
+    font-weight: 600;
+  }
+  .state.warn {
+    color: #e6b35a;
+  }
+  .state.dim {
+    color: var(--muted);
+  }
+  .checks {
+    display: flex;
+    gap: 0.8rem;
+    font-size: 0.74rem;
+    color: #e06c6c;
+  }
+  .checks span.ok {
+    color: #46d17f;
+  }
+  .note {
+    margin: 0;
+    font-size: 0.78rem;
+    line-height: 1.45;
+    color: var(--muted);
+  }
+  .note.warn {
+    color: #e6b35a;
+  }
+  .check {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.45rem;
+    font-size: 0.8rem;
+    line-height: 1.35;
+  }
+  .check em {
+    color: #e6b35a;
+    font-style: normal;
+  }
+  .row {
+    display: flex;
+    gap: 0.4rem;
+  }
+  .row .input {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .primary-ish {
+    font-weight: 600;
+  }
+</style>