fix(FN-711): add missing 'open' class to modal overlays

- Add 'open' class to modal overlays in AgentListModal, MissionManager, ScriptsModal, and WorkflowStepManager
- Add Header component tests for overflow menu callbacks and modal visibility

packages/dashboard/app/components/AgentListModal.tsx

@@ -152,7 +152,7 @@ export function AgentListModal({ isOpen, onClose, addToast, projectId }: AgentLi
   if (!isOpen) return null;
 
   return (
-    <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
+    <div className="modal-overlay open" onClick={(e) => e.target === e.currentTarget && onClose()}>
       <div className="modal modal--wide">
         <div className="modal-header">
           <h2 className="modal-title">

packages/dashboard/app/components/MissionManager.tsx

@@ -600,7 +600,7 @@ export function MissionManager({ isOpen, onClose, addToast, projectId, onSelectT
   if (!isOpen) return null;
 
   return (
-    <div className="modal-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
+    <div className="modal-overlay open" onClick={(e) => e.target === e.currentTarget && onClose()}>
       <div className="modal-content mission-manager-modal">
         <div className="modal-header">
           <div className="modal-title-row">

packages/dashboard/app/components/ScriptsModal.tsx

@@ -167,7 +167,7 @@ export function ScriptsModal({ isOpen, onClose, addToast, projectId, onRunScript
   }));
 
   return (
-    <div className="modal-overlay" onClick={onClose} data-testid="scripts-modal">
+    <div className="modal-overlay open" onClick={onClose} data-testid="scripts-modal">
       <div
         className="modal scripts-modal"
         onClick={(e) => e.stopPropagation()}

packages/dashboard/app/components/WorkflowStepManager.tsx

@@ -278,7 +278,7 @@ export function WorkflowStepManager({ isOpen, onClose, addToast, projectId }: Wo
   const isEditing = isCreating || editingId !== null;
 
   return (
-    <div className="modal-overlay" onClick={onClose} data-testid="workflow-step-manager">
+    <div className="modal-overlay open" onClick={onClose} data-testid="workflow-step-manager">
       <div
         className="modal workflow-step-manager-modal"
         onClick={(e) => e.stopPropagation()}

packages/dashboard/app/components/__tests__/Header.test.tsx

@@ -656,6 +656,30 @@ describe("Header", () => {
       fireEvent.click(screen.getByText("Manage Agents"));
       expect(onOpenAgents).toHaveBeenCalledOnce();
     });
+
+    it("missions overflow menu item calls onOpenMissions when clicked", () => {
+      const onOpenMissions = vi.fn();
+      render(<Header onOpenSettings={vi.fn()} onOpenMissions={onOpenMissions} />);
+      fireEvent.click(screen.getByTitle("More header actions"));
+      fireEvent.click(screen.getByText("Missions"));
+      expect(onOpenMissions).toHaveBeenCalledOnce();
+    });
+
+    it("workflow steps overflow menu item calls onOpenWorkflowSteps when clicked", () => {
+      const onOpenWorkflowSteps = vi.fn();
+      render(<Header onOpenSettings={vi.fn()} onOpenWorkflowSteps={onOpenWorkflowSteps} />);
+      fireEvent.click(screen.getByTitle("More header actions"));
+      fireEvent.click(screen.getByText("Workflow Steps"));
+      expect(onOpenWorkflowSteps).toHaveBeenCalledOnce();
+    });
+
+    it("scripts overflow menu item calls onOpenScripts when clicked", () => {
+      const onOpenScripts = vi.fn();
+      render(<Header onOpenSettings={vi.fn()} onOpenScripts={onOpenScripts} onRunScript={vi.fn()} />);
+      fireEvent.click(screen.getByTitle("More header actions"));
+      fireEvent.click(screen.getByText("Scripts"));
+      expect(onOpenScripts).toHaveBeenCalledOnce();
+    });
   });
 
   // ── Agents Button ────────────────────────────────────────────────
@@ -811,4 +835,26 @@ describe("Header", () => {
 
     expect(screen.getByText("Project One")).toBeDefined();
   });
+
+  // ── Modal Overlay Visibility ──────────────────────────────────
+
+  it("MissionManager renders with 'open' class on modal overlay when isOpen is true", async () => {
+    // Mock fetch for MissionManager's API calls
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve([]),
+    });
+    try {
+      const { MissionManager } = await import("../MissionManager");
+      const { container } = render(
+        <MissionManager isOpen={true} onClose={vi.fn()} addToast={vi.fn()} />
+      );
+      const overlay = container.querySelector(".modal-overlay");
+      expect(overlay).not.toBeNull();
+      expect(overlay!.className).toContain("open");
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
 });