refactor(dashboard): change SpawnModal from overlay modal to dropdown

Position the spawn modal directly under the 'New Agent' button without a
blur overlay. Uses click-outside dismissal and absolute positioning.
Reduces visual disruption for quick agent spawning.

dashboard/components/App.js

@@ -471,13 +471,21 @@ export function App() {
               `;
             })()}
           </div>
-          <button
-            disabled=${!zellijAvailable}
-            class="rounded-lg border border-active/40 bg-active/12 px-3 py-2 text-sm font-medium text-active transition-colors hover:bg-active/20 ${!zellijAvailable ? 'opacity-50 cursor-not-allowed' : ''}"
-            onClick=${() => setSpawnModalOpen(true)}
-          >
-            + New Agent
-          </button>
+          <div class="relative">
+            <button
+              disabled=${!zellijAvailable}
+              class="rounded-lg border border-active/40 bg-active/12 px-3 py-2 text-sm font-medium text-active transition-colors hover:bg-active/20 ${!zellijAvailable ? 'opacity-50 cursor-not-allowed' : ''}"
+              onClick=${() => setSpawnModalOpen(true)}
+            >
+              + New Agent
+            </button>
+            <${SpawnModal}
+              isOpen=${spawnModalOpen}
+              onClose=${() => setSpawnModalOpen(false)}
+              onSpawn=${handleSpawnResult}
+              currentProject=${selectedProject}
+            />
+          </div>
         </div>
       </header>
 
@@ -589,12 +597,5 @@ export function App() {
     />
 
     <${ToastContainer} />
-
-    <${SpawnModal}
-      isOpen=${spawnModalOpen}
-      onClose=${() => setSpawnModalOpen(false)}
-      onSpawn=${handleSpawnResult}
-      currentProject=${selectedProject}
-    />
   `;
 }

dashboard/components/Modal.js

@@ -18,10 +18,12 @@ export function Modal({ session, conversations, onClose, onRespond, onFetchConve
       return;
     }
 
+    let stale = false;
     const agent = session.agent || 'claude';
     fetchSkills(agent)
-      .then(config => setAutocompleteConfig(config))
-      .catch(() => setAutocompleteConfig(null));
+      .then(config => { if (!stale) setAutocompleteConfig(config); })
+      .catch(() => { if (!stale) setAutocompleteConfig(null); });
+    return () => { stale = true; };
   }, [session?.agent]);
 
   // Animated close handler

dashboard/components/SessionCard.js

@@ -110,9 +110,9 @@ export function SessionCard({ session, onClick, conversation, onFetchConversatio
               <span class="rounded-full border px-2.5 py-1 font-mono text-micro uppercase tracking-[0.14em] ${agent === 'codex' ? 'border-emerald-400/45 bg-emerald-500/14 text-emerald-300' : 'border-violet-400/45 bg-violet-500/14 text-violet-300'}">
                 ${agent}
               </span>
-              ${session.cwd && html`
+              ${session.project_dir && html`
                 <span class="truncate rounded-full border border-selection bg-bg/40 px-2.5 py-1 font-mono text-micro text-dim">
-                  ${session.cwd.split('/').slice(-2).join('/')}
+                  ${session.project_dir.split('/').slice(-2).join('/')}
                 </span>
               `}
             </div>

dashboard/components/SpawnModal.js

@@ -1,4 +1,4 @@
-import { html, useState, useEffect, useCallback } from '../lib/preact.js';
+import { html, useState, useEffect, useCallback, useRef } from '../lib/preact.js';
 import { API_PROJECTS, API_SPAWN, fetchWithTimeout } from '../utils/api.js';
 
 export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
@@ -12,11 +12,21 @@ export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
 
   const needsProjectPicker = !currentProject;
 
-  // Lock body scroll when modal is open
+  const dropdownRef = useCallback((node) => {
+    if (node) dropdownNodeRef.current = node;
+  }, []);
+  const dropdownNodeRef = useRef(null);
+
+  // Click outside dismisses dropdown
   useEffect(() => {
     if (!isOpen) return;
-    document.body.style.overflow = 'hidden';
-    return () => { document.body.style.overflow = ''; };
+    const handleClickOutside = (e) => {
+      if (dropdownNodeRef.current && !dropdownNodeRef.current.contains(e.target)) {
+        handleClose();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [isOpen]);
 
   // Reset state on open
@@ -107,29 +117,26 @@ export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
 
   return html`
     <div
-      class="fixed inset-0 z-50 flex items-center justify-center bg-[#02050d]/84 p-4 backdrop-blur-sm ${closing ? 'modal-backdrop-out' : 'modal-backdrop-in'}"
-      onClick=${(e) => e.target === e.currentTarget && handleClose()}
+      ref=${dropdownRef}
+      class="absolute right-0 top-full mt-2 z-50 glass-panel w-80 rounded-xl border border-selection/70 shadow-lg ${closing ? 'modal-panel-out' : 'modal-panel-in'}"
+      onClick=${(e) => e.stopPropagation()}
     >
-      <div
-        class="glass-panel w-full max-w-md rounded-2xl ${closing ? 'modal-panel-out' : 'modal-panel-in'}"
-        onClick=${(e) => e.stopPropagation()}
-      >
         <!-- Header -->
-        <div class="flex items-center justify-between border-b border-selection/70 px-5 py-4">
-          <h2 class="font-display text-lg font-semibold text-bright">Spawn Agent</h2>
+        <div class="flex items-center justify-between border-b border-selection/70 px-4 py-3">
+          <h2 class="font-display text-sm font-semibold text-bright">Spawn Agent</h2>
           <button
             onClick=${handleClose}
             disabled=${loading}
-            class="flex h-7 w-7 items-center justify-center rounded-lg border border-selection/80 text-dim transition-colors hover:border-done/40 hover:bg-done/10 hover:text-bright disabled:cursor-not-allowed disabled:opacity-50"
+            class="flex h-6 w-6 items-center justify-center rounded-lg border border-selection/80 text-dim transition-colors hover:border-done/40 hover:bg-done/10 hover:text-bright disabled:cursor-not-allowed disabled:opacity-50"
           >
-            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
         </div>
 
         <!-- Body -->
-        <div class="flex flex-col gap-4 px-5 py-4">
+        <div class="flex flex-col gap-3 px-4 py-3">
 
           ${needsProjectPicker && html`
             <div class="flex flex-col gap-1.5">
@@ -202,7 +209,7 @@ export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
         </div>
 
         <!-- Footer -->
-        <div class="flex items-center justify-end gap-2 border-t border-selection/70 px-5 py-3">
+        <div class="flex items-center justify-end gap-2 border-t border-selection/70 px-4 py-2.5">
           <button
             onClick=${handleClose}
             disabled=${loading}
@@ -222,7 +229,6 @@ export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
             ${loading ? 'Spawning...' : 'Spawn'}
           </button>
         </div>
-      </div>
     </div>
   `;
 }