From 6c9f48761f81cabbe1084480e9f3932c7b962428 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Wed, 8 Apr 2026 21:57:00 -0700
Subject: [PATCH] feat(FN-1322): add missions tab to mobile nav bar

- Add dedicated Missions tab button to MobileNavBar between Agents and More
- Remove Missions entry from the More sheet (no longer needed as overflow)
- Remove unused onOpenMissions prop from MobileNavBarProps and App.tsx
- Update MobileNavBar tests for five-tab layout and missions tab behavior
- Update mobile feature access regression test to reflect missions in tab bar
---
 packages/dashboard/app/App.tsx                |  1 -
 .../mobile-feature-access-regression.test.tsx |  2 --
 .../dashboard/app/components/MobileNavBar.tsx | 24 +++++++++----------
 .../__tests__/MobileNavBar.test.tsx           | 23 +++++++++++++++---
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/packages/dashboard/app/App.tsx b/packages/dashboard/app/App.tsx
index c11bdb8dc..29a8f0cb8 100644
--- a/packages/dashboard/app/App.tsx
+++ b/packages/dashboard/app/App.tsx
@@ -445,7 +445,6 @@ function AppInner() {
         mailboxUnreadCount={modalManager.mailboxUnreadCount}
         onOpenGitManager={modalManager.openGitManager}
         onOpenWorkflowSteps={modalManager.openWorkflowSteps}
-        onOpenMissions={viewMode === "project" && currentProject ? handleOpenMissionsView : undefined}
         onOpenSchedules={modalManager.openSchedules}
         onOpenScripts={modalManager.openScripts}
         onToggleTerminal={modalManager.toggleTerminal}
diff --git a/packages/dashboard/app/__tests__/mobile-feature-access-regression.test.tsx b/packages/dashboard/app/__tests__/mobile-feature-access-regression.test.tsx
index 04af85fae..ceaec9a7c 100644
--- a/packages/dashboard/app/__tests__/mobile-feature-access-regression.test.tsx
+++ b/packages/dashboard/app/__tests__/mobile-feature-access-regression.test.tsx
@@ -49,7 +49,6 @@ const createDefaultMobileNavProps = () => ({
   mailboxUnreadCount: 0,
   onOpenGitManager: vi.fn(),
   onOpenWorkflowSteps: vi.fn(),
-  onOpenMissions: vi.fn(),
   onOpenSchedules: vi.fn(),
   onOpenScripts: vi.fn(),
   onToggleTerminal: vi.fn(),
@@ -154,7 +153,6 @@ describe("Mobile Feature Access Regression Guard", () => {
     fireEvent.click(screen.getByTestId("mobile-nav-tab-more"));
 
     expect(screen.getByTestId("mobile-more-item-mailbox")).toBeDefined();
-    expect(screen.getByTestId("mobile-more-item-missions")).toBeDefined();
     expect(screen.getByTestId("mobile-more-item-git")).toBeDefined();
     expect(screen.getByTestId("mobile-more-item-terminal")).toBeDefined();
     expect(screen.getByTestId("mobile-more-item-files")).toBeDefined();
diff --git a/packages/dashboard/app/components/MobileNavBar.tsx b/packages/dashboard/app/components/MobileNavBar.tsx
index 8f7843387..df69202b0 100644
--- a/packages/dashboard/app/components/MobileNavBar.tsx
+++ b/packages/dashboard/app/components/MobileNavBar.tsx
@@ -34,7 +34,6 @@ export interface MobileNavBarProps {
   mailboxUnreadCount?: number;
   onOpenGitManager?: () => void;
   onOpenWorkflowSteps?: () => void;
-  onOpenMissions?: () => void;
   onOpenSchedules?: () => void;
   onOpenScripts?: () => void;
   onToggleTerminal?: () => void;
@@ -78,7 +77,6 @@ export function MobileNavBar({
   mailboxUnreadCount = 0,
   onOpenGitManager,
   onOpenWorkflowSteps,
-  onOpenMissions,
   onOpenSchedules,
   onToggleTerminal,
   onOpenFiles,
@@ -163,6 +161,18 @@ export function MobileNavBar({
           <span className="mobile-nav-tab-label">Agents</span>
         </button>
 
+        <button
+          type="button"
+          className={`mobile-nav-tab${view === "missions" ? " mobile-nav-tab--active" : ""}`}
+          data-testid="mobile-nav-tab-missions"
+          role="tab"
+          aria-selected={view === "missions"}
+          onClick={() => onChangeView("missions")}
+        >
+          <Target />
+          <span className="mobile-nav-tab-label">Missions</span>
+        </button>
+
         <button
           type="button"
           className="mobile-nav-tab"
@@ -209,16 +219,6 @@ export function MobileNavBar({
               <span>Activity Log</span>
             </button>
 
-            <button
-              type="button"
-              className="mobile-more-item"
-              data-testid="mobile-more-item-missions"
-              onClick={() => handleMoreAction(onOpenMissions)}
-            >
-              <Target />
-              <span>Missions</span>
-            </button>
-
             <button
               type="button"
               className="mobile-more-item"
diff --git a/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx b/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
index c87ebd774..21a8e3ff3 100644
--- a/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
+++ b/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
@@ -30,7 +30,6 @@ const createDefaultProps = () => ({
   mailboxUnreadCount: 0,
   onOpenGitManager: vi.fn(),
   onOpenWorkflowSteps: vi.fn(),
-  onOpenMissions: vi.fn(),
   onOpenSchedules: vi.fn(),
   onOpenScripts: vi.fn(),
   onToggleTerminal: vi.fn(),
@@ -50,12 +49,13 @@ describe("MobileNavBar", () => {
     mockViewport("mobile");
   });
 
-  it("renders four tab buttons (board + list + agents + more)", () => {
+  it("renders five tab buttons (board + list + agents + missions + more)", () => {
     render(<MobileNavBar {...createDefaultProps()} />);
 
     expect(screen.getByTestId("mobile-nav-tab-board")).toBeDefined();
     expect(screen.getByTestId("mobile-nav-tab-list")).toBeDefined();
     expect(screen.getByTestId("mobile-nav-tab-agents")).toBeDefined();
+    expect(screen.getByTestId("mobile-nav-tab-missions")).toBeDefined();
     expect(screen.getByTestId("mobile-nav-tab-more")).toBeDefined();
   });
 
@@ -99,6 +99,24 @@ describe("MobileNavBar", () => {
     expect(screen.getByTestId("mobile-nav-tab-list").className).not.toContain("mobile-nav-tab--active");
   });
 
+  it("missions tab calls onChangeView with 'missions'", () => {
+    const props = createDefaultProps();
+    render(<MobileNavBar {...props} view="board" />);
+
+    fireEvent.click(screen.getByTestId("mobile-nav-tab-missions"));
+    expect(props.onChangeView).toHaveBeenCalledWith("missions");
+  });
+
+  it("missions tab is active when view is 'missions'", () => {
+    render(<MobileNavBar {...createDefaultProps()} view="missions" />);
+    expect(screen.getByTestId("mobile-nav-tab-missions").className).toContain("mobile-nav-tab--active");
+  });
+
+  it("missions tab is not active when view is 'board'", () => {
+    render(<MobileNavBar {...createDefaultProps()} view="board" />);
+    expect(screen.getByTestId("mobile-nav-tab-missions").className).not.toContain("mobile-nav-tab--active");
+  });
+
   it("opens and toggles the more sheet", () => {
     const props = createDefaultProps();
     const { container } = render(<MobileNavBar {...props} />);
@@ -116,7 +134,6 @@ describe("MobileNavBar", () => {
 
     expect(screen.getByTestId("mobile-more-item-mailbox")).toBeDefined();
     expect(screen.getByTestId("mobile-more-item-activity")).toBeDefined();
-    expect(screen.getByTestId("mobile-more-item-missions")).toBeDefined();
     expect(screen.getByTestId("mobile-more-item-git")).toBeDefined();
     expect(screen.getByTestId("mobile-more-item-terminal")).toBeDefined();
     expect(screen.getByTestId("mobile-more-item-files")).toBeDefined();