feat(maestro): spawn form back in a modal on web

Draft panes are gone: an empty pane is a placeholder again, and every
spawn affordance opens a dialog around the shared spawn form. Escape,
Cancel, the ✕ and a backdrop click dismiss it; a successful submit puts
the session in a new tab (Spawn similar and the fast-forward fallback
keep placing it beside the pane they acted on).

Removes the per-leaf draft state, its persistence strip, and the form
reuse/teardown machinery the panes needed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/src/styles.css

@@ -1448,6 +1448,77 @@ input.leaf-rename:focus {
   border-color: var(--accent-strong);
 }
 
+/* ---------- modal ---------- */
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: oklch(0.12 0.01 256 / 0.6);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0;
+  z-index: var(--z-modal);
+  animation: fade var(--dur) var(--ease-out);
+}
+
+@media (min-width: 600px) {
+  .modal-backdrop {
+    align-items: center;
+    padding: var(--sp-6);
+  }
+}
+
+.modal {
+  background: var(--surface);
+  border-radius: var(--r-3) var(--r-3) 0 0;
+  border: 1px solid var(--border);
+  width: 100%;
+  max-width: 560px;
+  max-height: 92vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-2);
+  animation: sheet-up var(--dur-slow) var(--ease-out);
+}
+
+@media (min-width: 600px) {
+  .modal {
+    border-radius: var(--r-3);
+    animation: pop var(--dur) var(--ease-out);
+  }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sp-3);
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: var(--fs-15);
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+}
+
+.modal-header h2::before {
+  content: "+";
+  color: var(--accent);
+  font-weight: 700;
+}
+
+/* The form is the modal's scrolling body: it must be allowed to shrink below
+   its content height for `max-height` on the dialog to bite. */
+.modal .spawn-form {
+  min-height: 0;
+}
+
 /* ---------- forms ---------- */
 
 .spawn-form {
@@ -1878,7 +1949,7 @@ input.leaf-rename:focus {
 
 .dir-ac {
   position: fixed;
-  z-index: var(--z-toast); /* above the draft pane it completes within */
+  z-index: var(--z-toast); /* above the modal it completes within */
   margin: 0;
   padding: var(--sp-1);
   list-style: none;
@@ -2015,6 +2086,26 @@ input.leaf-rename:focus {
   }
 }
 
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes sheet-up {
+  from {
+    transform: translateY(16px);
+    opacity: 0;
+  }
+}
+
+@keyframes pop {
+  from {
+    transform: scale(0.98);
+    opacity: 0;
+  }
+}
+
 @keyframes blink {
   0%,
   50% {
@@ -2336,12 +2427,15 @@ input.leaf-rename:focus {
 .mv-pane:not(.is-focused) .attach-header {
   opacity: 0.7;
 }
-/* Draft pane (#57): an empty pane renders the shared spawn form inline.
-   The host is already a flex column; the form fills and scrolls within it. */
-.mv-pane-host > .mv-draft {
+/* A pane with no session yet: a quiet hint rather than blank terminal black. */
+.mv-pane-empty {
   flex: 1;
-  min-width: 0;
-  min-height: 0;
+  display: grid;
+  place-items: center;
+  padding: var(--sp-3);
+  text-align: center;
+  color: var(--faint);
+  font-size: var(--fs-13);
 }
 
 /* pane tools cluster (disconnect / split / close), top-right corner. The attach