From b82c176e12e2fb67461bd3be24a98840655bfa9a Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Sun, 1 Mar 2026 17:30:01 -0800
Subject: [PATCH] fix: null-safe formulas, constrain assign row to card, fix
 TopBar dialog mounting

Co-Authored-By: Oz <oz-agent@warp.dev>
---
 src/components/shared/top-bar.tsx      | 16 +---------------
 src/components/social/social-card.tsx  |  8 ++++----
 src/components/swarm/launch-dialog.tsx |  2 +-
 3 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/src/components/shared/top-bar.tsx b/src/components/shared/top-bar.tsx
index e80e759..6bac0fc 100644
--- a/src/components/shared/top-bar.tsx
+++ b/src/components/shared/top-bar.tsx
@@ -91,7 +91,6 @@ export function TopBar({
 }: TopBarProps) {
   const { leftPanel, toggleLeftPanel, rightPanel, toggleRightPanel, blockedOnly, toggleBlockedOnly } = useUrlState();
   const { isDesktop } = useResponsive();
-  const [showLaunchSwarm, setShowLaunchSwarm] = useState(false);
 
   return (
     <header className="flex h-[var(--topbar-height)] items-center justify-between border-b border-[var(--border-strong)] bg-[var(--surface-elevated)]" data-testid="top-bar">
@@ -152,14 +151,7 @@ export function TopBar({
             </button>
 
             {projectRoot && (
-              <button
-                type="button"
-                onClick={() => setShowLaunchSwarm(true)}
-                className="inline-flex items-center gap-2 rounded-xl border border-emerald-500/20 bg-emerald-500/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.11em] text-emerald-400 transition-colors hover:bg-emerald-500/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-info)]"
-              >
-                <Rocket className="h-3.5 w-3.5" aria-hidden="true" />
-                Launch Swarm
-              </button>
+              <LaunchSwarmDialog projectRoot={projectRoot} />
             )}
 
             <button
@@ -199,12 +191,6 @@ export function TopBar({
         </span>
       </div>
 
-      {showLaunchSwarm && projectRoot && (
-        <LaunchSwarmDialog
-          projectRoot={projectRoot}
-          onSuccess={() => setShowLaunchSwarm(false)}
-        />
-      )}
     </header>
   );
 }
diff --git a/src/components/social/social-card.tsx b/src/components/social/social-card.tsx
index 6c65f7d..6a7a11e 100644
--- a/src/components/social/social-card.tsx
+++ b/src/components/social/social-card.tsx
@@ -187,11 +187,11 @@ export function SocialCard({
       </div>
 
       {showAssign && (
-        <div className="mt-2 flex gap-2 items-center" onClick={(e) => e.stopPropagation()}>
+        <div className="mt-2 flex gap-2 items-center overflow-hidden" onClick={(e) => e.stopPropagation()}>
           <select
             value={selectedArchetype ?? ''}
             onChange={(e) => setSelectedArchetype(e.target.value || null)}
-            className="flex-1 text-xs border border-[var(--border-subtle)] rounded-md px-2 py-1.5 bg-[var(--surface-input)] text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--accent-info)]"
+            className="min-w-0 flex-1 text-xs border border-[var(--border-subtle)] rounded-md px-2 py-1.5 bg-[var(--surface-input)] text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--accent-info)]"
           >
             <option value="" disabled>Select agent role...</option>
             {archetypes.map((a) => (
@@ -204,10 +204,10 @@ export function SocialCard({
               await handleAssign(data.id);
             }}
             disabled={!selectedArchetype || isAssigning || assignSuccess}
-            className={`px-3 py-1.5 text-xs font-semibold rounded-md transition-colors disabled:opacity-50 flex items-center gap-1 ${assignSuccess ? 'bg-[var(--accent-success)] text-white' : 'bg-[var(--accent-info)] text-white hover:bg-[var(--accent-info)]/90'}`}
+            className={`flex-shrink-0 px-2.5 py-1.5 text-xs font-semibold rounded-md transition-colors disabled:opacity-50 flex items-center gap-1 ${assignSuccess ? 'bg-[var(--accent-success)] text-white' : 'bg-[var(--accent-info)] text-white hover:bg-[var(--accent-info)]/90'}`}
           >
             <UserPlus className="w-3 h-3" />
-            {isAssigning ? 'Assigning...' : assignSuccess ? 'Assigned!' : 'Assign'}
+            {isAssigning ? '...' : assignSuccess ? '✓' : 'Assign'}
           </button>
         </div>
       )}
diff --git a/src/components/swarm/launch-dialog.tsx b/src/components/swarm/launch-dialog.tsx
index 60174b7..1c9804a 100644
--- a/src/components/swarm/launch-dialog.tsx
+++ b/src/components/swarm/launch-dialog.tsx
@@ -47,7 +47,7 @@ export function LaunchSwarmDialog({ projectRoot, onSuccess }: LaunchSwarmDialogP
       const res = await fetch(`/api/swarm/formulas?projectRoot=${encodeURIComponent(projectRoot)}`);
       const json = await res.json();
       if (json.ok) {
-        setFormulas(json.data);
+        setFormulas(json.data ?? []);
       } else {
         setError(json.error);
       }