fix(web): gate dashboard debug bundle and move header placement (#1400)

Follow up #1320 by hiding the debug bundle control by default and only showing it in development or with . Move the button to the left header cluster and add regression tests for default-hidden and debug-enabled visibility.

Made-with: Cursor

packages/web/src/components/Dashboard.tsx

@@ -169,6 +169,10 @@ function DashboardInner({
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+  const debugParam = searchParams.get("debug");
+  const showDebugBundleButton =
+    !isMobile &&
+    (process.env.NODE_ENV === "development" || debugParam === "1" || debugParam === "true");
   const showSidebar = projects.length >= 1;
   const { showToast } = useToast();
   const [doneExpanded, setDoneExpanded] = useState(false);
@@ -498,6 +502,7 @@ function DashboardInner({
                 <span className="dashboard-app-header__project">{headerProjectLabel}</span>
               </>
             ) : null}
+            {showDebugBundleButton ? <CopyDebugBundleButton projectId={projectId} /> : null}
             <div className="dashboard-app-header__spacer" />
             <div className="dashboard-app-header__actions">
               {!allProjectsView && orchestratorHref ? (
@@ -549,7 +554,6 @@ function DashboardInner({
                   {isSpawningCurrentProject ? "Spawning..." : "Spawn Orchestrator"}
                 </button>
               ) : null}
-              {!isMobile ? <CopyDebugBundleButton projectId={projectId} /> : null}
             </div>
           </header>
 

packages/web/src/components/__tests__/Dashboard.debugBundleVisibility.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Dashboard } from "../Dashboard";
+
+let search = "";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn(), refresh: vi.fn() }),
+  usePathname: () => "/",
+  useSearchParams: () => new URLSearchParams(search),
+}));
+
+function mockDesktopViewport() {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: (query: string) => ({
+      matches: !query.includes("max-width: 767px"),
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+}
+
+describe("Dashboard debug bundle visibility", () => {
+  beforeEach(() => {
+    search = "";
+    mockDesktopViewport();
+    const eventSourceMock = {
+      onmessage: null,
+      onerror: null,
+      close: vi.fn(),
+    };
+    const eventSourceConstructor = vi.fn(() => eventSourceMock as unknown as EventSource);
+    global.EventSource = Object.assign(eventSourceConstructor, {
+      CONNECTING: 0,
+      OPEN: 1,
+      CLOSED: 2,
+    }) as unknown as typeof EventSource;
+    global.fetch = vi.fn();
+  });
+
+  it("hides debug bundle button by default", () => {
+    render(<Dashboard initialSessions={[]} />);
+    expect(screen.queryByRole("button", { name: /Copy debug bundle for issue reports/i })).toBeNull();
+  });
+
+  it("shows debug bundle button when debug query flag is enabled", () => {
+    search = "debug=1";
+    render(<Dashboard initialSessions={[]} />);
+    expect(screen.getByRole("button", { name: /Copy debug bundle for issue reports/i })).toBeInTheDocument();
+  });
+});