diff --git a/packages/dashboard/app/__tests__/tablet-header-controls.test.tsx b/packages/dashboard/app/__tests__/tablet-header-controls.test.tsx
index eca5a3e11f..b8a4f8947d 100644
--- a/packages/dashboard/app/__tests__/tablet-header-controls.test.tsx
+++ b/packages/dashboard/app/__tests__/tablet-header-controls.test.tsx
@@ -94,12 +94,36 @@ describe("tablet header controls", () => {
expect(screen.getByTitle("Board view")).toBeDefined();
expect(screen.getByTitle("List view")).toBeDefined();
expect(screen.getByTitle("Agents view")).toBeDefined();
+ expect(screen.getByTestId("view-toggle-command-center")).toBeDefined();
+ expect(screen.queryByTitle("Documents view")).toBeNull();
// Skills and Insights are NOT inline (they're in overflow)
expect(screen.queryByTitle("Skills view")).toBeNull();
expect(screen.queryByTitle("Roadmaps view")).toBeNull();
expect(screen.queryByTitle("Insights view")).toBeNull();
});
+ it("places tablet Command Center inline immediately after Agents and Documents only in overflow", () => {
+ renderTabletHeader({ onChangeView: noop, showAgentsTab: true });
+
+ expect(screen.getByTestId("view-toggle-command-center").previousElementSibling).toBe(screen.getByTitle("Agents view"));
+ expect(screen.queryByTitle("Documents view")).toBeNull();
+
+ fireEvent.click(screen.getByTestId("view-toggle-overflow-trigger"));
+ expect(screen.getByTestId("view-overflow-documents")).toBeDefined();
+ expect(screen.queryByTestId("view-overflow-command-center")).toBeNull();
+ });
+
+ it("keeps desktop Documents inline and Command Center in overflow", () => {
+ renderDesktopHeader({ onChangeView: noop, showAgentsTab: true });
+
+ expect(screen.getByTitle("Documents view")).toBeDefined();
+ expect(screen.queryByTestId("view-toggle-command-center")).toBeNull();
+
+ fireEvent.click(screen.getByTestId("view-toggle-overflow-trigger"));
+ expect(screen.getByTestId("view-overflow-command-center")).toBeDefined();
+ expect(screen.queryByTestId("view-overflow-documents")).toBeNull();
+ });
+
it("renders view toggle overflow trigger on tablet when overflow items are available", () => {
renderTabletHeader({ onChangeView: noop, experimentalFeatures: { insights: true } });
expect(screen.getByTestId("view-toggle-overflow-trigger")).toBeDefined();
diff --git a/packages/dashboard/app/components/Header.tsx b/packages/dashboard/app/components/Header.tsx
index d54a8d266f..c555ef4f6e 100644
--- a/packages/dashboard/app/components/Header.tsx
+++ b/packages/dashboard/app/components/Header.tsx
@@ -260,9 +260,10 @@ export function Header({
experimentalFeatures?.memoryView ||
experimentalFeatures?.devServerView ||
!hideFullNav ||
+ isTablet ||
pluginDashboardViews.some((entry) => entry.view.placement !== "primary")
);
- }, [onChangeView, experimentalFeatures, todosEnabled, showSkillsTab, hideFullNav, pluginDashboardViews]);
+ }, [onChangeView, experimentalFeatures, todosEnabled, showSkillsTab, hideFullNav, isTablet, pluginDashboardViews]);
const getEffectiveViewport = useCallback(() => {
const vv = window.visualViewport;
@@ -1018,6 +1019,23 @@ export function Header({
)}
+ {isTablet && (
+ /*
+ 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.
+ */
+
+ )}
-
+ {!isTablet && (
+
+ )}