feat(dashboard): integrate SpawnModal with header button

dashboard/components/App.js

@@ -5,7 +5,8 @@ import { Sidebar } from './Sidebar.js';
 import { SessionCard } from './SessionCard.js';
 import { Modal } from './Modal.js';
 import { EmptyState } from './EmptyState.js';
-import { ToastContainer, trackError, clearErrorCount } from './Toast.js';
+import { ToastContainer, showToast, trackError, clearErrorCount } from './Toast.js';
+import { SpawnModal } from './SpawnModal.js';
 
 let optimisticMsgId = 0;
 
@@ -18,6 +19,7 @@ export function App() {
   const [selectedProject, setSelectedProject] = useState(null);
   const [sseConnected, setSseConnected] = useState(false);
   const [deadSessionsCollapsed, setDeadSessionsCollapsed] = useState(true);
+  const [spawnModalOpen, setSpawnModalOpen] = useState(false);
 
   // Background conversation refresh with error tracking
   const refreshConversationSilent = useCallback(async (sessionId, projectDir, agent = 'claude') => {
@@ -348,6 +350,14 @@ export function App() {
     setSelectedProject(projectDir);
   }, []);
 
+  const handleSpawnResult = useCallback((result) => {
+    if (result.success) {
+      showToast(`${result.agentType} agent spawned for ${result.project}`, 'success');
+    } else if (result.error) {
+      showToast(result.error, 'error');
+    }
+  }, []);
+
   return html`
     <!-- Sidebar -->
     <${Sidebar}
@@ -408,6 +418,12 @@ export function App() {
               `;
             })()}
           </div>
+          <button
+            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"
+            onClick=${() => setSpawnModalOpen(true)}
+          >
+            + New Agent
+          </button>
         </div>
       </header>
 
@@ -511,5 +527,12 @@ export function App() {
     />
 
     <${ToastContainer} />
+
+    <${SpawnModal}
+      isOpen=${spawnModalOpen}
+      onClose=${() => setSpawnModalOpen(false)}
+      onSpawn=${handleSpawnResult}
+      currentProject=${selectedProject}
+    />
   `;
 }