From c16557fb1626e7237220f946ffe8883ef7bd3caa Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Fri, 19 Jun 2026 10:17:37 -0700
Subject: [PATCH] FN-6725: preserve responsive command center nav order

Reassert the responsive Command Center placement contracts for tablet and mobile navigation.

- Document the tablet contract that keeps Command Center after Agents while Documents remains in overflow.
- Document the mobile contract that keeps Command Center after Mailbox without duplicating it in More.
- Extend the mobile nav regression test to cover mailbox badges and primary plugin overflow behavior.

Files changed:
 packages/dashboard/app/components/Header.tsx         |  3 +++
 packages/dashboard/app/components/MobileNavBar.tsx   |  3 +++
 .../app/components/__tests__/MobileNavBar.test.tsx   | 20 ++++++++++++++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)

Fusion-Task-Id: FN-6725

Fusion-Task-Lineage: 9130b2d9-4163-4fed-bdc4-96ee6e1f4855
---
 packages/dashboard/app/components/Header.tsx  |  3 +++
 .../dashboard/app/components/MobileNavBar.tsx |  3 +++
 .../__tests__/MobileNavBar.test.tsx           | 20 +++++++++++++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/app/components/Header.tsx b/packages/dashboard/app/components/Header.tsx
index 16dc605205..be8385e61d 100644
--- a/packages/dashboard/app/components/Header.tsx
+++ b/packages/dashboard/app/components/Header.tsx
@@ -1024,6 +1024,9 @@ export function Header({
               FNXC:Navigation 2026-06-19-12:00:
               Tablet navigation promotes Command Center immediately after Agents while desktop keeps Command Center in the More-views overflow.
               Documents moves to the tablet More-views overflow below to conserve horizontal space without changing desktop ordering.
+
+              FNXC:Navigation 2026-06-19-08:24:
+              FN-6725 re-verified this tablet contract after a suspected revert: Command Center remains a single inline tablet destination after Agents, Documents remains overflow-only on tablet, and desktop ordering stays unchanged.
               */
               <button
                 className={`view-toggle-btn${view === "command-center" ? " active" : ""}`}
diff --git a/packages/dashboard/app/components/MobileNavBar.tsx b/packages/dashboard/app/components/MobileNavBar.tsx
index 481a3eb1b7..d6eb3b2b6e 100644
--- a/packages/dashboard/app/components/MobileNavBar.tsx
+++ b/packages/dashboard/app/components/MobileNavBar.tsx
@@ -281,6 +281,9 @@ export function MobileNavBar({
   FNXC:Navigation 2026-06-19-12:05:
   Mobile navigation adds Command Center as a fixed top-level tab immediately after Mailbox.
   Primary plugin tabs, including Compound Engineering, are demoted to the More sheet so touch targets stay wide and Command Center is not duplicated.
+
+  FNXC:Navigation 2026-06-19-08:24:
+  FN-6725 re-verified the suspected-revert surface: Command Center remains adjacent to Mailbox even when mailbox badges render, primary plugin tabs remain More-sheet-only, and no Command Center More-sheet duplicate is allowed.
   */
   const MAX_PRIMARY_PLUGIN_TOP_LEVEL_TABS = 0;
   const topLevelPrimaryPluginViews = sortedPrimaryPluginViews.slice(0, MAX_PRIMARY_PLUGIN_TOP_LEVEL_TABS);
diff --git a/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx b/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
index 32d0b132b9..fb4da80a0d 100644
--- a/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
+++ b/packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
@@ -254,20 +254,36 @@ describe("MobileNavBar", () => {
     expect(props.onChangeView).toHaveBeenCalledWith("mailbox");
   });
 
-  it("places Command Center immediately after Mailbox and routes from the top-level tab", () => {
+  it("places Command Center after Mailbox while primary plugins stay More-only", () => {
     const props = createDefaultProps();
-    render(<MobileNavBar {...props} view="board" mailboxUnreadCount={3} mailboxPendingApprovalCount={1} />);
+    render(
+      <MobileNavBar
+        {...props}
+        view="board"
+        mailboxUnreadCount={3}
+        mailboxPendingApprovalCount={1}
+        pluginDashboardViews={[
+          {
+            pluginId: "fusion-plugin-compound-engineering",
+            view: { viewId: "compound-engineering", label: "Compound Engineering", componentPath: "./CompoundEngineeringView", icon: "Workflow", placement: "primary", order: 1 },
+          },
+        ]}
+      />,
+    );
 
     const mailboxTab = screen.getByTestId("mobile-nav-tab-mailbox");
     const commandCenterTab = screen.getByTestId("mobile-nav-tab-command-center");
     expect(mailboxTab.compareDocumentPosition(commandCenterTab) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
     expect(commandCenterTab.previousElementSibling).toBe(mailboxTab);
+    expect(mailboxTab.querySelector(".mobile-nav-tab-badge")?.textContent).toBe("3");
+    expect(screen.queryByTestId("mobile-nav-tab-plugin-fusion-plugin-compound-engineering-compound-engineering")).toBeNull();
 
     fireEvent.click(commandCenterTab);
     expect(props.onChangeView).toHaveBeenCalledWith("command-center");
 
     fireEvent.click(screen.getByTestId("mobile-nav-tab-more"));
     expect(screen.queryByTestId("mobile-more-item-command-center")).toBeNull();
+    expect(screen.getByTestId("mobile-more-item-plugin-fusion-plugin-compound-engineering-compound-engineering")).toBeDefined();
   });
 
   it("agents tab calls onChangeView with 'agents'", () => {