diff --git a/dev-dashboard/frontend/src/App.svelte b/dev-dashboard/frontend/src/App.svelte
index 68ffa5fc28..e75ec33412 100644
--- a/dev-dashboard/frontend/src/App.svelte
+++ b/dev-dashboard/frontend/src/App.svelte
@@ -4,24 +4,17 @@
   import TopBar from "./lib/TopBar.svelte";
   import Terminal from "./lib/Terminal.svelte";
   import ConfirmDialog from "./lib/ConfirmDialog.svelte";
+  import CreateWorktreeDialog from "./lib/CreateWorktreeDialog.svelte";
   import type { WorktreeInfo } from "./lib/types";
   import type { Profile } from "./lib/api";
   import * as api from "./lib/api";
 
-  const PROFILES: { value: Profile; label: string }[] = [
-    { value: "agent-only", label: "Agent only" },
-    { value: "agent-yolo", label: "Agent (skip permissions)" },
-    { value: "full", label: "Full (agent + backend + frontend)" },
-  ];
-
   let worktrees = $state<WorktreeInfo[]>([]);
   let selectedBranch = $state<string | null>(null);
   let removeBranch = $state<string | null>(null);
   let removingBranches = $state<Set<string>>(new Set());
   let showCreateDialog = $state(false);
   let creating = $state(false);
-  let createProfile = $state<Profile>("agent-only");
-  let createName = $state("");
 
   let visibleWorktrees = $derived(
     worktrees.filter((w) => w.path === "(here)" || w.branch === "main" || w.mux === "✓")
@@ -47,14 +40,13 @@
     return result;
   }
 
-  async function handleCreate() {
-    const branch = createName.trim() || randomName(8);
+  async function handleCreate(name: string, profile: Profile) {
+    const branch = name || randomName(8);
     creating = true;
     try {
-      await api.createWorktree(branch, createProfile);
+      await api.createWorktree(branch, profile);
       await api.openWorktree(branch);
       showCreateDialog = false;
-      createName = "";
       await refresh();
       selectedBranch = branch;
     } catch (err) {
@@ -135,51 +127,11 @@
 </div>
 
 {#if showCreateDialog}
-  {@const btn = "px-3 py-1.5 rounded-md border border-edge bg-surface text-primary text-xs cursor-pointer hover:bg-hover"}
-  <dialog
-    open
-    class="fixed inset-0 z-50 bg-sidebar text-primary border border-edge rounded-xl p-6 max-w-[380px] w-[90%] m-auto"
-  >
-    <h2 class="text-base mb-4">New Worktree</h2>
-    <div class="mb-4">
-      <label class="block text-xs text-muted mb-1.5" for="wt-name">Name <span class="opacity-60">(optional)</span></label>
-      <input
-        id="wt-name"
-        type="text"
-        class="w-full px-2.5 py-1.5 rounded-md border border-edge bg-surface text-primary text-[13px] placeholder:text-muted/50 outline-none focus:border-accent"
-        placeholder="auto-generated if empty"
-        bind:value={createName}
-      />
-    </div>
-    <div class="flex flex-col gap-2 mb-6">
-      {#each PROFILES as profile}
-        <label
-          class="flex items-center gap-2.5 p-2.5 rounded-lg border cursor-pointer text-[13px] transition-colors
-            {createProfile === profile.value ? 'border-accent bg-accent/10' : 'border-edge hover:bg-hover'}"
-        >
-          <input
-            type="radio"
-            name="profile"
-            value={profile.value}
-            checked={createProfile === profile.value}
-            onchange={() => (createProfile = profile.value)}
-            class="accent-[var(--accent)]"
-          />
-          {profile.label}
-        </label>
-      {/each}
-    </div>
-    <div class="flex justify-end gap-2">
-      <button type="button" class={btn} onclick={() => (showCreateDialog = false)} disabled={creating}>Cancel</button>
-      <button
-        type="button"
-        class="{btn} !bg-accent !text-white !border-accent hover:!opacity-90 disabled:!opacity-50 disabled:!cursor-not-allowed flex items-center gap-1.5"
-        onclick={handleCreate}
-        disabled={creating}
-      >{#if creating}<span class="spinner"></span>{/if} Create</button>
-    </div>
-  </dialog>
-  <div class="fixed inset-0 bg-black/50 z-40" onclick={() => (showCreateDialog = false)}></div>
+  <CreateWorktreeDialog
+    loading={creating}
+    oncreate={handleCreate}
+    oncancel={() => (showCreateDialog = false)}
+  />
 {/if}
 
 {#if removeBranch}
diff --git a/dev-dashboard/frontend/src/lib/ConfirmDialog.svelte b/dev-dashboard/frontend/src/lib/ConfirmDialog.svelte
index 22aaa3e4fc..fa90579d85 100644
--- a/dev-dashboard/frontend/src/lib/ConfirmDialog.svelte
+++ b/dev-dashboard/frontend/src/lib/ConfirmDialog.svelte
@@ -16,15 +16,17 @@
 </script>
 
 <dialog bind:this={dialogEl} onclose={oncancel} class="bg-sidebar text-primary border border-edge rounded-xl p-6 max-w-[380px] w-[90%]">
-  <h2 class="text-base mb-4">Confirm</h2>
-  <p class="text-[13px] text-muted mb-6">{message}</p>
-  <div class="flex justify-end gap-2">
-    <button type="button" class={btn} onclick={oncancel} disabled={loading}>Cancel</button>
-    <button
-      type="button"
-      class="{btn} !bg-danger !text-white !border-danger hover:!opacity-90 disabled:!opacity-50 disabled:!cursor-not-allowed flex items-center gap-1.5"
-      onclick={onconfirm}
-      disabled={loading}
-    >{#if loading}<span class="spinner"></span>{/if} Remove</button>
-  </div>
+  <form method="dialog" onsubmit={(e) => { e.preventDefault(); onconfirm(); }}>
+    <h2 class="text-base mb-4">Confirm</h2>
+    <p class="text-[13px] text-muted mb-6">{message}</p>
+    <div class="flex justify-end gap-2">
+      <button type="button" class={btn} onclick={oncancel} disabled={loading}>Cancel</button>
+      <button
+        autofocus
+        type="submit"
+        class="{btn} !bg-danger !text-white !border-danger hover:!opacity-90 disabled:!opacity-50 disabled:!cursor-not-allowed flex items-center gap-1.5"
+        disabled={loading}
+      >{#if loading}<span class="spinner"></span>{/if} Remove</button>
+    </div>
+  </form>
 </dialog>
diff --git a/dev-dashboard/frontend/src/lib/CreateWorktreeDialog.svelte b/dev-dashboard/frontend/src/lib/CreateWorktreeDialog.svelte
new file mode 100644
index 0000000000..d49aa7d9f9
--- /dev/null
+++ b/dev-dashboard/frontend/src/lib/CreateWorktreeDialog.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { Profile } from "./api";
+
+  const PROFILES: { value: Profile; label: string }[] = [
+    { value: "agent-only", label: "Agent only" },
+    { value: "agent-yolo", label: "Agent (skip permissions)" },
+    { value: "full", label: "Full (agent + backend + frontend)" },
+  ];
+
+  let { loading = false, oncreate, oncancel }: {
+    loading?: boolean;
+    oncreate: (name: string, profile: Profile) => void;
+    oncancel: () => void;
+  } = $props();
+
+  let name = $state("");
+  let profile = $state<Profile>("agent-only");
+
+  let dialogEl: HTMLDialogElement;
+
+  $effect(() => {
+    dialogEl?.showModal();
+  });
+
+  const btn = "px-3 py-1.5 rounded-md border border-edge bg-surface text-primary text-xs cursor-pointer hover:bg-hover";
+</script>
+
+<dialog bind:this={dialogEl} onclose={oncancel} class="bg-sidebar text-primary border border-edge rounded-xl p-6 max-w-[380px] w-[90%]">
+  <form method="dialog" onsubmit={(e) => { e.preventDefault(); oncreate(name.trim(), profile); }}>
+    <h2 class="text-base mb-4">New Worktree</h2>
+    <div class="mb-4">
+      <label class="block text-xs text-muted mb-1.5" for="wt-name">Name <span class="opacity-60">(optional)</span></label>
+      <input
+        id="wt-name"
+        type="text"
+        class="w-full px-2.5 py-1.5 rounded-md border border-edge bg-surface text-primary text-[13px] placeholder:text-muted/50 outline-none focus:border-accent"
+        placeholder="auto-generated if empty"
+        bind:value={name}
+      />
+    </div>
+    <div class="flex flex-col gap-2 mb-6">
+      {#each PROFILES as p}
+        <label
+          class="flex items-center gap-2.5 p-2.5 rounded-lg border cursor-pointer text-[13px] transition-colors
+            {profile === p.value ? 'border-accent bg-accent/10' : 'border-edge hover:bg-hover'}"
+        >
+          <input
+            type="radio"
+            name="profile"
+            value={p.value}
+            checked={profile === p.value}
+            onchange={() => (profile = p.value)}
+            class="accent-[var(--accent)]"
+          />
+          {p.label}
+        </label>
+      {/each}
+    </div>
+    <div class="flex justify-end gap-2">
+      <button type="button" class={btn} onclick={oncancel} disabled={loading}>Cancel</button>
+      <button
+        type="submit"
+        class="{btn} !bg-accent !text-white !border-accent hover:!opacity-90 disabled:!opacity-50 disabled:!cursor-not-allowed flex items-center gap-1.5"
+        disabled={loading}
+      >{#if loading}<span class="spinner"></span>{/if} Create</button>
+    </div>
+  </form>
+</dialog>