From ea0149bd888cb32a9b9cb248f5ae3a7ec9e7b82b Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sat, 7 Mar 2026 17:18:39 -0800
Subject: [PATCH 01/10] fix: mobile-responsive layout for dashboard and board
 views

Add hamburger menu with off-canvas sidebar drawer on mobile.
Responsive padding, full-width panels, and stacked layouts
for screens under 768px (md breakpoint).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/app/activity/page.tsx            |  4 +-
 frontend/src/app/agents/[agentId]/page.tsx    |  4 +-
 .../src/app/board-groups/[groupId]/page.tsx   |  6 +--
 .../app/boards/[boardId]/approvals/page.tsx   |  4 +-
 frontend/src/app/boards/[boardId]/page.tsx    | 20 ++++-----
 frontend/src/app/dashboard/page.tsx           | 16 ++++---
 frontend/src/app/invite/page.tsx              |  4 +-
 frontend/src/app/organization/page.tsx        |  4 +-
 .../src/components/auth/SignedOutPanel.tsx    |  2 +-
 .../board-groups/BoardGroupsTable.tsx         |  2 +-
 .../src/components/boards/BoardsTable.tsx     |  2 +-
 .../components/organisms/DashboardSidebar.tsx |  2 +-
 frontend/src/components/tables/DataTable.tsx  |  4 +-
 .../templates/DashboardPageLayout.tsx         |  4 +-
 .../components/templates/DashboardShell.tsx   | 44 ++++++++++++++++---
 15 files changed, 77 insertions(+), 45 deletions(-)

diff --git a/frontend/src/app/activity/page.tsx b/frontend/src/app/activity/page.tsx
index d9d884ac..c83c2a59 100644
--- a/frontend/src/app/activity/page.tsx
+++ b/frontend/src/app/activity/page.tsx
@@ -1508,7 +1508,7 @@ export default function ActivityPage() {
             <DashboardSidebar />
             <main className="flex-1 overflow-y-auto bg-slate-50">
               <div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
-                <div className="px-8 py-6">
+                <div className="px-4 py-4 md:px-8 md:py-6">
                   <div className="flex flex-wrap items-center justify-between gap-4">
                     <div>
                       <div className="flex items-center gap-2">
@@ -1526,7 +1526,7 @@ export default function ActivityPage() {
                 </div>
               </div>
 
-              <div className="p-8">
+              <div className="p-4 md:p-8">
                 {hasUnresolvedDeepLink ? (
                   <div className="mb-4 rounded-lg border border-amber-300 bg-amber-50 p-3 text-sm text-amber-800">
                     Requested activity item is not in the current feed window yet.
diff --git a/frontend/src/app/agents/[agentId]/page.tsx b/frontend/src/app/agents/[agentId]/page.tsx
index 8e739a46..cf25d18c 100644
--- a/frontend/src/app/agents/[agentId]/page.tsx
+++ b/frontend/src/app/agents/[agentId]/page.tsx
@@ -162,13 +162,13 @@ export default function AgentDetailPage() {
       <SignedIn>
         <DashboardSidebar />
         {!isAdmin ? (
-          <div className="flex h-full flex-col gap-6 rounded-2xl surface-panel p-8">
+          <div className="flex h-full flex-col gap-6 rounded-2xl surface-panel p-4 md:p-8">
             <div className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-6 py-5 text-sm text-muted">
               Only organization owners and admins can access agents.
             </div>
           </div>
         ) : (
-          <div className="flex h-full flex-col gap-6 rounded-2xl surface-panel p-8">
+          <div className="flex h-full flex-col gap-6 rounded-2xl surface-panel p-4 md:p-8">
             <div className="flex flex-wrap items-start justify-between gap-4">
               <div className="space-y-2">
                 <p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet">
diff --git a/frontend/src/app/board-groups/[groupId]/page.tsx b/frontend/src/app/board-groups/[groupId]/page.tsx
index e2325fe4..56a3d3c4 100644
--- a/frontend/src/app/board-groups/[groupId]/page.tsx
+++ b/frontend/src/app/board-groups/[groupId]/page.tsx
@@ -744,7 +744,7 @@ export default function BoardGroupDetailPage() {
         <DashboardSidebar />
         <main className="flex-1 overflow-y-auto bg-slate-50">
           <div className="sticky top-0 z-30 border-b border-slate-200 bg-white shadow-sm">
-            <div className="px-8 py-6">
+            <div className="px-4 py-4 md:px-8 md:py-6">
               <div className="flex flex-wrap items-start justify-between gap-4">
                 <div className="min-w-0">
                   <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
@@ -816,7 +816,7 @@ export default function BoardGroupDetailPage() {
                 </div>
               </div>
 
-              <div className="mt-5 flex flex-wrap items-center gap-3">
+              <div className="mt-5 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
                 <label className="inline-flex items-center gap-2 text-sm text-slate-700">
                   <input
                     type="checkbox"
@@ -948,7 +948,7 @@ export default function BoardGroupDetailPage() {
             </div>
           </div>
 
-          <div className="p-8">
+          <div className="p-4 md:p-8">
             <div className="space-y-6">
               {heartbeatApplyError ? (
                 <div className="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700 shadow-sm">
diff --git a/frontend/src/app/boards/[boardId]/approvals/page.tsx b/frontend/src/app/boards/[boardId]/approvals/page.tsx
index 531ca138..0a2fb8c4 100644
--- a/frontend/src/app/boards/[boardId]/approvals/page.tsx
+++ b/frontend/src/app/boards/[boardId]/approvals/page.tsx
@@ -33,9 +33,9 @@ export default function BoardApprovalsPage() {
       <SignedIn>
         <DashboardSidebar />
         <main className="flex-1 overflow-y-auto bg-gradient-to-br from-slate-50 to-slate-100">
-          <div className="p-6">
+          <div className="p-4 md:p-6">
             {boardId ? (
-              <div className="h-[calc(100vh-160px)] min-h-[520px]">
+              <div className="h-[calc(100vh-160px)] min-h-[300px] sm:min-h-[520px]">
                 <BoardApprovalsPanel boardId={boardId} scrollable />
               </div>
             ) : null}
diff --git a/frontend/src/app/boards/[boardId]/page.tsx b/frontend/src/app/boards/[boardId]/page.tsx
index ccb7358a..a30c4078 100644
--- a/frontend/src/app/boards/[boardId]/page.tsx
+++ b/frontend/src/app/boards/[boardId]/page.tsx
@@ -3101,7 +3101,7 @@ export default function BoardDetailPage() {
           )}
         >
           <div className="sticky top-0 z-30 border-b border-slate-200 bg-white shadow-sm">
-            <div className="px-8 py-6">
+            <div className="px-4 py-4 md:px-8 md:py-6">
               <div className="flex flex-wrap items-center justify-between gap-4">
                 <div>
                   <h1 className="mt-2 text-2xl font-semibold text-slate-900 tracking-tight">
@@ -3237,9 +3237,9 @@ export default function BoardDetailPage() {
             </div>
           </div>
 
-          <div className="relative flex gap-6 p-6">
+          <div className="relative flex flex-col gap-4 p-4 md:flex-row md:gap-6 md:p-6">
             {isOrgAdmin ? (
-              <aside className="flex h-full w-64 flex-col rounded-xl border border-slate-200 bg-white shadow-sm">
+              <aside className="flex w-full flex-col rounded-xl border border-slate-200 bg-white shadow-sm md:h-full md:w-64">
                 <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
                   <div>
                     <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
@@ -3680,12 +3680,12 @@ export default function BoardDetailPage() {
       ) : null}
       <aside
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-[max(760px,45vw)] max-w-[99vw] transform bg-white shadow-2xl transition-transform",
+          "fixed right-0 top-0 z-50 h-full w-full max-w-[99vw] transform bg-white shadow-2xl transition-transform md:w-[max(760px,45vw)]",
           isDetailOpen ? "transform-none" : "translate-x-full",
         )}
       >
         <div className="flex h-full flex-col">
-          <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4">
+          <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3 md:px-6 md:py-4">
             <div>
               <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
                 Task detail
@@ -3749,7 +3749,7 @@ export default function BoardDetailPage() {
                       return (
                         <div
                           key={definition.id}
-                          className="grid grid-cols-[160px_1fr] gap-3"
+                          className="grid grid-cols-1 gap-2 sm:grid-cols-[160px_1fr] sm:gap-3"
                         >
                           <dt className="text-xs font-semibold text-slate-600">
                             {definition.label || definition.field_key}
@@ -3993,12 +3993,12 @@ export default function BoardDetailPage() {
 
       <aside
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-[560px] max-w-[96vw] transform border-l border-slate-200 bg-white shadow-2xl transition-transform",
+          "fixed right-0 top-0 z-50 h-full w-full max-w-[96vw] transform border-l border-slate-200 bg-white shadow-2xl transition-transform md:w-[560px]",
           isChatOpen ? "transform-none" : "translate-x-full",
         )}
       >
         <div className="flex h-full flex-col">
-          <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4">
+          <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3 md:px-6 md:py-4">
             <div>
               <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
                 Board chat
@@ -4055,12 +4055,12 @@ export default function BoardDetailPage() {
 
       <aside
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-[520px] max-w-[96vw] transform border-l border-slate-200 bg-white shadow-2xl transition-transform",
+          "fixed right-0 top-0 z-50 h-full w-full max-w-[96vw] transform border-l border-slate-200 bg-white shadow-2xl transition-transform md:w-[520px]",
           isLiveFeedOpen ? "transform-none" : "translate-x-full",
         )}
       >
         <div className="flex h-full flex-col">
-          <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4">
+          <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3 md:px-6 md:py-4">
             <div>
               <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
                 Live feed
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
index 7fbc3649..de72b898 100644
--- a/frontend/src/app/dashboard/page.tsx
+++ b/frontend/src/app/dashboard/page.tsx
@@ -379,7 +379,7 @@ function TopMetricCard({
           : "bg-green-50 text-green-600";
 
   return (
-    <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
+    <section className="rounded-xl border border-slate-200 bg-white p-4 md:p-6 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
       <div className="flex items-start justify-between gap-3">
         <div>
           <div className="flex items-center gap-1.5">
@@ -423,7 +423,7 @@ function InfoBlock({
   rows: SummaryRow[];
 }) {
   return (
-    <section className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+    <section className="rounded-xl border border-slate-200 bg-white p-4 md:p-6 shadow-sm">
       <div className="mb-4 flex items-center justify-between gap-3">
         <div className="flex items-center gap-1.5">
           <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
@@ -513,6 +513,8 @@ export default function DashboardPage() {
         enabled: Boolean(isSignedIn),
         refetchInterval: 15_000,
         refetchOnMount: "always",
+        retry: 3,
+        retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 5000),
       },
     },
   );
@@ -899,10 +901,10 @@ export default function DashboardPage() {
       <SignedIn>
         <DashboardSidebar />
         <main className="flex-1 overflow-y-auto bg-slate-50">
-          <div className="p-8">
+          <div className="p-4 md:p-8">
             {metricsQuery.error ? (
               <div className="mb-4 rounded-lg border border-rose-300 bg-rose-50 p-3 text-sm text-rose-700">
-                {metricsQuery.error.message}
+                Load failed: {metricsQuery.error.message}
               </div>
             ) : null}
 
@@ -958,7 +960,7 @@ export default function DashboardPage() {
               />
             </div>
 
-            <section className="mt-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+            <section className="mt-4 rounded-xl border border-slate-200 bg-white p-4 md:p-6 shadow-sm">
               <div className="mb-3 flex items-center justify-between gap-3">
                 <h3 className="text-lg font-semibold text-slate-900">Pending Approvals</h3>
                 <Link
@@ -1016,7 +1018,7 @@ export default function DashboardPage() {
             </section>
 
             <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-              <section className="min-w-0 overflow-hidden rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+              <section className="min-w-0 overflow-hidden rounded-xl border border-slate-200 bg-white p-4 md:p-6 shadow-sm">
                 <div className="mb-3 flex items-center justify-between gap-3">
                   <h3 className="text-lg font-semibold text-slate-900">Sessions</h3>
                   <span className="text-xs text-slate-500">{formatCount(activeSessions)}</span>
@@ -1082,7 +1084,7 @@ export default function DashboardPage() {
                 </div>
               </section>
 
-              <section className="min-w-0 overflow-hidden rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+              <section className="min-w-0 overflow-hidden rounded-xl border border-slate-200 bg-white p-4 md:p-6 shadow-sm">
                 <div className="mb-3 flex items-center justify-between gap-3">
                   <h3 className="text-lg font-semibold text-slate-900">Recent Activity</h3>
                   <Link
diff --git a/frontend/src/app/invite/page.tsx b/frontend/src/app/invite/page.tsx
index e1a61bc7..28c31aa1 100644
--- a/frontend/src/app/invite/page.tsx
+++ b/frontend/src/app/invite/page.tsx
@@ -76,7 +76,7 @@ function InviteContent() {
       </header>
 
       <main className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-16">
-        <div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-8 shadow-sm">
+        <div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4 md:p-8 shadow-sm">
           <div className="flex flex-col gap-3">
             <p className="text-xs font-semibold uppercase tracking-[0.3em] text-quiet">
               Organization Invite
@@ -158,7 +158,7 @@ export default function InvitePage() {
             </div>
           </header>
           <main className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-16">
-            <div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-8 shadow-sm">
+            <div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4 md:p-8 shadow-sm">
               <div className="text-sm text-muted">Loading invite…</div>
             </div>
           </main>
diff --git a/frontend/src/app/organization/page.tsx b/frontend/src/app/organization/page.tsx
index 23e2e420..d4de3c27 100644
--- a/frontend/src/app/organization/page.tsx
+++ b/frontend/src/app/organization/page.tsx
@@ -704,7 +704,7 @@ export default function OrganizationPage() {
         <DashboardSidebar />
         <main className="flex-1 overflow-y-auto bg-slate-50">
           <div className="sticky top-0 z-30 border-b border-slate-200 bg-white">
-            <div className="px-8 py-6">
+            <div className="px-4 py-4 md:px-8 md:py-6">
               <div className="flex flex-wrap items-center justify-between gap-6">
                 <div>
                   <div className="flex flex-wrap items-center gap-3">
@@ -775,7 +775,7 @@ export default function OrganizationPage() {
             </div>
           </div>
 
-          <div className="px-8 py-8">
+          <div className="px-4 py-4 md:px-8 md:py-8">
             <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white">
               <div className="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 px-5 py-4">
                 <div>
diff --git a/frontend/src/components/auth/SignedOutPanel.tsx b/frontend/src/components/auth/SignedOutPanel.tsx
index 222dad08..e1c92264 100644
--- a/frontend/src/components/auth/SignedOutPanel.tsx
+++ b/frontend/src/components/auth/SignedOutPanel.tsx
@@ -21,7 +21,7 @@ export function SignedOutPanel({
 }: SignedOutPanelProps) {
   return (
     <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
-      <div className="rounded-xl border border-slate-200 bg-white px-8 py-6 shadow-sm">
+      <div className="rounded-xl border border-slate-200 bg-white px-4 py-4 md:px-8 md:py-6 shadow-sm">
         <p className="text-sm text-slate-600">{message}</p>
         <SignInButton
           mode={mode}
diff --git a/frontend/src/components/board-groups/BoardGroupsTable.tsx b/frontend/src/components/board-groups/BoardGroupsTable.tsx
index 40a0b90e..3d1bd9f9 100644
--- a/frontend/src/components/board-groups/BoardGroupsTable.tsx
+++ b/frontend/src/components/board-groups/BoardGroupsTable.tsx
@@ -130,7 +130,7 @@ export function BoardGroupsTable({
       stickyHeader={stickyHeader}
       emptyMessage={emptyMessage}
       rowClassName="transition hover:bg-slate-50"
-      cellClassName="px-6 py-4 align-top"
+      cellClassName="px-3 py-3 md:px-6 md:py-4 align-top"
       rowActions={
         showActions
           ? {
diff --git a/frontend/src/components/boards/BoardsTable.tsx b/frontend/src/components/boards/BoardsTable.tsx
index c57e1ddb..ebe956a3 100644
--- a/frontend/src/components/boards/BoardsTable.tsx
+++ b/frontend/src/components/boards/BoardsTable.tsx
@@ -162,7 +162,7 @@ export function BoardsTable({
       stickyHeader={stickyHeader}
       emptyMessage={emptyMessage}
       rowClassName="transition hover:bg-slate-50"
-      cellClassName="px-6 py-4 align-top"
+      cellClassName="px-3 py-3 md:px-6 md:py-4 align-top"
       rowActions={
         showActions
           ? {
diff --git a/frontend/src/components/organisms/DashboardSidebar.tsx b/frontend/src/components/organisms/DashboardSidebar.tsx
index 3c470af7..ace1900e 100644
--- a/frontend/src/components/organisms/DashboardSidebar.tsx
+++ b/frontend/src/components/organisms/DashboardSidebar.tsx
@@ -58,7 +58,7 @@ export function DashboardSidebar() {
         : "System degraded";
 
   return (
-    <aside className="flex h-full w-64 flex-col border-r border-slate-200 bg-white">
+    <aside className="fixed inset-y-0 left-0 z-30 flex w-[280px] -translate-x-full flex-col border-r border-slate-200 bg-white pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-64 md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
       <div className="flex-1 px-3 py-4">
         <p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
           Navigation
diff --git a/frontend/src/components/tables/DataTable.tsx b/frontend/src/components/tables/DataTable.tsx
index 8685f798..c03d5747 100644
--- a/frontend/src/components/tables/DataTable.tsx
+++ b/frontend/src/components/tables/DataTable.tsx
@@ -59,10 +59,10 @@ export function DataTable<TData>({
   stickyHeader = false,
   tableClassName = "w-full text-left text-sm",
   headerClassName,
-  headerCellClassName = "px-6 py-3",
+  headerCellClassName = "px-3 py-2 md:px-6 md:py-3",
   bodyClassName = "divide-y divide-slate-100",
   rowClassName = "hover:bg-slate-50",
-  cellClassName = "px-6 py-4",
+  cellClassName = "px-3 py-3 md:px-6 md:py-4",
 }: DataTableProps<TData>) {
   const resolvedRowActions = rowActions
     ? (rowActions.actions ??
diff --git a/frontend/src/components/templates/DashboardPageLayout.tsx b/frontend/src/components/templates/DashboardPageLayout.tsx
index e29a937e..1485cbc7 100644
--- a/frontend/src/components/templates/DashboardPageLayout.tsx
+++ b/frontend/src/components/templates/DashboardPageLayout.tsx
@@ -75,7 +75,7 @@ export function DashboardPageLayout({
               headerClassName,
             )}
           >
-            <div className="px-8 py-6">
+            <div className="px-4 py-4 md:px-8 md:py-6">
               {headerActions ? (
                 <div className="flex flex-wrap items-center justify-between gap-4">
                   <div>
@@ -103,7 +103,7 @@ export function DashboardPageLayout({
             </div>
           </div>
 
-          <div className={cn("p-8", contentClassName)}>
+          <div className={cn("p-4 md:p-8", contentClassName)}>
             {showAdminOnlyNotice ? (
               <AdminOnlyNotice message={adminOnlyMessage ?? ""} />
             ) : (
diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx
index e3cb3071..ec979b6e 100644
--- a/frontend/src/components/templates/DashboardShell.tsx
+++ b/frontend/src/components/templates/DashboardShell.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import { usePathname, useRouter } from "next/navigation";
+import { Menu, X } from "lucide-react";
 
 import { SignedIn, useAuth } from "@/auth/clerk";
 
@@ -21,6 +22,7 @@ export function DashboardShell({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const { isSignedIn } = useAuth();
   const isOnboardingPath = pathname === "/onboarding";
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const meQuery = useGetMeApiV1UsersMeGet<
     getMeApiV1UsersMeGetResponse,
@@ -36,6 +38,11 @@ export function DashboardShell({ children }: { children: ReactNode }) {
   const displayName = profile?.name ?? profile?.preferred_name ?? "Operator";
   const displayEmail = profile?.email ?? "";
 
+  // Close sidebar on navigation
+  useEffect(() => {
+    setSidebarOpen(false);
+  }, [pathname]);
+
   useEffect(() => {
     if (!isSignedIn || isOnboardingPath) return;
     if (!profile) return;
@@ -68,22 +75,32 @@ export function DashboardShell({ children }: { children: ReactNode }) {
     };
   }, []);
 
+  const toggleSidebar = useCallback(() => setSidebarOpen((v) => !v), []);
+
   return (
-    <div className="min-h-screen bg-app text-strong">
+    <div className="min-h-screen bg-app text-strong" data-sidebar={sidebarOpen ? "open" : "closed"}>
       <header className="sticky top-0 z-40 border-b border-slate-200 bg-white shadow-sm">
-        <div className="grid grid-cols-[260px_1fr_auto] items-center gap-0 py-3">
-          <div className="flex items-center px-6">
+        <div className="flex items-center py-3">
+          <div className="flex items-center px-4 md:px-6 md:w-[260px]">
+            <button
+              type="button"
+              className="mr-3 rounded-lg p-2 text-slate-600 hover:bg-slate-100 md:hidden"
+              onClick={toggleSidebar}
+              aria-label="Toggle navigation"
+            >
+              {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            </button>
             <BrandMark />
           </div>
           <SignedIn>
-            <div className="flex items-center">
+            <div className="hidden md:flex flex-1 items-center">
               <div className="max-w-[220px]">
                 <OrgSwitcher />
               </div>
             </div>
           </SignedIn>
           <SignedIn>
-            <div className="flex items-center gap-3 px-6">
+            <div className="ml-auto flex items-center gap-3 px-4 md:px-6">
               <div className="hidden text-right lg:block">
                 <p className="text-sm font-semibold text-slate-900">
                   {displayName}
@@ -95,7 +112,20 @@ export function DashboardShell({ children }: { children: ReactNode }) {
           </SignedIn>
         </div>
       </header>
-      <div className="grid min-h-[calc(100vh-64px)] grid-cols-[260px_1fr] bg-slate-50">
+
+      {/* Mobile sidebar overlay */}
+      {sidebarOpen ? (
+        <div
+          className="fixed inset-0 z-30 bg-black/30 md:hidden"
+          onClick={toggleSidebar}
+          onKeyDown={(e) => e.key === "Escape" && toggleSidebar()}
+          role="button"
+          tabIndex={-1}
+          aria-label="Close navigation"
+        />
+      ) : null}
+
+      <div className="grid min-h-[calc(100vh-64px)] grid-cols-1 md:grid-cols-[260px_1fr] bg-slate-50">
         {children}
       </div>
     </div>

From e85e7140763451a784f37608229662f27c25580a Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sat, 7 Mar 2026 18:51:53 -0800
Subject: [PATCH 02/10] fix: bump mobile sidebar z-index above sticky page
 headers

Sidebar and backdrop were z-30, same as sticky page headers (live feed,
boards, etc.), causing the hamburger menu to render behind page content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/organisms/DashboardSidebar.tsx | 2 +-
 frontend/src/components/templates/DashboardShell.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/organisms/DashboardSidebar.tsx b/frontend/src/components/organisms/DashboardSidebar.tsx
index ace1900e..6f616e86 100644
--- a/frontend/src/components/organisms/DashboardSidebar.tsx
+++ b/frontend/src/components/organisms/DashboardSidebar.tsx
@@ -58,7 +58,7 @@ export function DashboardSidebar() {
         : "System degraded";
 
   return (
-    <aside className="fixed inset-y-0 left-0 z-30 flex w-[280px] -translate-x-full flex-col border-r border-slate-200 bg-white pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-64 md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
+    <aside className="fixed inset-y-0 left-0 z-40 flex w-[280px] -translate-x-full flex-col border-r border-slate-200 bg-white pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-64 md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
       <div className="flex-1 px-3 py-4">
         <p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
           Navigation
diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx
index ec979b6e..4b37ac53 100644
--- a/frontend/src/components/templates/DashboardShell.tsx
+++ b/frontend/src/components/templates/DashboardShell.tsx
@@ -116,7 +116,7 @@ export function DashboardShell({ children }: { children: ReactNode }) {
       {/* Mobile sidebar overlay */}
       {sidebarOpen ? (
         <div
-          className="fixed inset-0 z-30 bg-black/30 md:hidden"
+          className="fixed inset-0 z-40 bg-black/30 md:hidden"
           onClick={toggleSidebar}
           onKeyDown={(e) => e.key === "Escape" && toggleSidebar()}
           role="button"

From 7a0eb7b24ae2af00a0469600a8f028ddc37ca83f Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sat, 7 Mar 2026 20:18:08 -0800
Subject: [PATCH 03/10] fix: avoid setState in useEffect for sidebar close on
 navigation

Use ref-based previous pathname check instead of useEffect + setState,
which triggers the react-hooks/set-state-in-effect lint rule.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/templates/DashboardShell.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx
index 4b37ac53..107dfdc6 100644
--- a/frontend/src/components/templates/DashboardShell.tsx
+++ b/frontend/src/components/templates/DashboardShell.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { Menu, X } from "lucide-react";
@@ -39,9 +39,11 @@ export function DashboardShell({ children }: { children: ReactNode }) {
   const displayEmail = profile?.email ?? "";
 
   // Close sidebar on navigation
-  useEffect(() => {
-    setSidebarOpen(false);
-  }, [pathname]);
+  const prevPathname = useRef(pathname);
+  if (prevPathname.current !== pathname) {
+    prevPathname.current = pathname;
+    if (sidebarOpen) setSidebarOpen(false);
+  }
 
   useEffect(() => {
     if (!isSignedIn || isOnboardingPath) return;

From f0ab3e315baf2416cafd4d757bfb79ba15202a1c Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sat, 7 Mar 2026 20:19:39 -0800
Subject: [PATCH 04/10] =?UTF-8?q?fix:=20address=20Copilot=20review=20?=
 =?UTF-8?q?=E2=80=94=20z-index,=20Escape=20key,=20signed-out=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Raise header to z-50 so toggle button stays clickable above backdrop
- Use document keydown listener for Escape instead of onKeyDown on backdrop
- Only render hamburger toggle when signed in
- Make SignedOutPanel col-span responsive (col-span-1 on mobile)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/auth/SignedOutPanel.tsx    |  2 +-
 .../components/templates/DashboardShell.tsx   | 35 ++++++++++++-------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/auth/SignedOutPanel.tsx b/frontend/src/components/auth/SignedOutPanel.tsx
index e1c92264..f3912cfc 100644
--- a/frontend/src/components/auth/SignedOutPanel.tsx
+++ b/frontend/src/components/auth/SignedOutPanel.tsx
@@ -20,7 +20,7 @@ export function SignedOutPanel({
   buttonTestId,
 }: SignedOutPanelProps) {
   return (
-    <div className="col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
+    <div className="col-span-1 md:col-span-2 flex min-h-[calc(100vh-64px)] items-center justify-center bg-slate-50 p-10 text-center">
       <div className="rounded-xl border border-slate-200 bg-white px-4 py-4 md:px-8 md:py-6 shadow-sm">
         <p className="text-sm text-slate-600">{message}</p>
         <SignInButton
diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx
index 107dfdc6..a9a3f4ce 100644
--- a/frontend/src/components/templates/DashboardShell.tsx
+++ b/frontend/src/components/templates/DashboardShell.tsx
@@ -79,19 +79,31 @@ export function DashboardShell({ children }: { children: ReactNode }) {
 
   const toggleSidebar = useCallback(() => setSidebarOpen((v) => !v), []);
 
+  // Dismiss sidebar on Escape
+  useEffect(() => {
+    if (!sidebarOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setSidebarOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [sidebarOpen]);
+
   return (
     <div className="min-h-screen bg-app text-strong" data-sidebar={sidebarOpen ? "open" : "closed"}>
-      <header className="sticky top-0 z-40 border-b border-slate-200 bg-white shadow-sm">
+      <header className="sticky top-0 z-50 border-b border-slate-200 bg-white shadow-sm">
         <div className="flex items-center py-3">
           <div className="flex items-center px-4 md:px-6 md:w-[260px]">
-            <button
-              type="button"
-              className="mr-3 rounded-lg p-2 text-slate-600 hover:bg-slate-100 md:hidden"
-              onClick={toggleSidebar}
-              aria-label="Toggle navigation"
-            >
-              {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-            </button>
+            {isSignedIn ? (
+              <button
+                type="button"
+                className="mr-3 rounded-lg p-2 text-slate-600 hover:bg-slate-100 md:hidden"
+                onClick={toggleSidebar}
+                aria-label="Toggle navigation"
+              >
+                {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+              </button>
+            ) : null}
             <BrandMark />
           </div>
           <SignedIn>
@@ -120,10 +132,7 @@ export function DashboardShell({ children }: { children: ReactNode }) {
         <div
           className="fixed inset-0 z-40 bg-black/30 md:hidden"
           onClick={toggleSidebar}
-          onKeyDown={(e) => e.key === "Escape" && toggleSidebar()}
-          role="button"
-          tabIndex={-1}
-          aria-label="Close navigation"
+          aria-hidden="true"
         />
       ) : null}
 

From 2519af2395f331bc0f79035d36042e17997a4108 Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sat, 7 Mar 2026 21:20:37 -0800
Subject: [PATCH 05/10] fix: use derived state for sidebar close on navigation

Replace useRef-based previous pathname tracking (which violated
react-hooks/refs) with a derived state pattern. Sidebar state stores
{open, path} and sidebarOpen is computed as a pure expression,
avoiding both set-state-in-effect and refs-during-render lint errors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/templates/DashboardShell.tsx   | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx
index a9a3f4ce..fa26b3b4 100644
--- a/frontend/src/components/templates/DashboardShell.tsx
+++ b/frontend/src/components/templates/DashboardShell.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import type { ReactNode } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { Menu, X } from "lucide-react";
@@ -22,7 +22,10 @@ export function DashboardShell({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   const { isSignedIn } = useAuth();
   const isOnboardingPath = pathname === "/onboarding";
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarState, setSidebarState] = useState({ open: false, path: pathname });
+  // Sidebar auto-closes on navigation: when pathname changes, the derived
+  // value becomes false without any setState or ref access during render.
+  const sidebarOpen = sidebarState.path === pathname && sidebarState.open;
 
   const meQuery = useGetMeApiV1UsersMeGet<
     getMeApiV1UsersMeGetResponse,
@@ -38,13 +41,6 @@ export function DashboardShell({ children }: { children: ReactNode }) {
   const displayName = profile?.name ?? profile?.preferred_name ?? "Operator";
   const displayEmail = profile?.email ?? "";
 
-  // Close sidebar on navigation
-  const prevPathname = useRef(pathname);
-  if (prevPathname.current !== pathname) {
-    prevPathname.current = pathname;
-    if (sidebarOpen) setSidebarOpen(false);
-  }
-
   useEffect(() => {
     if (!isSignedIn || isOnboardingPath) return;
     if (!profile) return;
@@ -77,13 +73,16 @@ export function DashboardShell({ children }: { children: ReactNode }) {
     };
   }, []);
 
-  const toggleSidebar = useCallback(() => setSidebarOpen((v) => !v), []);
+  const toggleSidebar = useCallback(
+    () => setSidebarState((prev) => ({ open: !prev.open, path: pathname })),
+    [pathname],
+  );
 
   // Dismiss sidebar on Escape
   useEffect(() => {
     if (!sidebarOpen) return;
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setSidebarOpen(false);
+      if (e.key === "Escape") setSidebarState((prev) => ({ ...prev, open: false }));
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);

From 74792593b2bb1417b3487b2ad09e29eb92077595 Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sat, 7 Mar 2026 21:28:55 -0800
Subject: [PATCH 06/10] fix: reset sidebar state on navigation to prevent ghost
 re-open

Use React's canonical "store info from previous renders" pattern:
conditional setState during render resets sidebar when pathname
changes, preventing the sidebar from re-opening on back-navigation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/templates/DashboardShell.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx
index fa26b3b4..7a9ad76f 100644
--- a/frontend/src/components/templates/DashboardShell.tsx
+++ b/frontend/src/components/templates/DashboardShell.tsx
@@ -23,9 +23,13 @@ export function DashboardShell({ children }: { children: ReactNode }) {
   const { isSignedIn } = useAuth();
   const isOnboardingPath = pathname === "/onboarding";
   const [sidebarState, setSidebarState] = useState({ open: false, path: pathname });
-  // Sidebar auto-closes on navigation: when pathname changes, the derived
-  // value becomes false without any setState or ref access during render.
-  const sidebarOpen = sidebarState.path === pathname && sidebarState.open;
+  // Close sidebar on navigation using React's "store info from previous
+  // renders" pattern — conditional setState during render resets immediately
+  // without extra commits, avoiding both set-state-in-effect and refs rules.
+  if (sidebarState.path !== pathname) {
+    setSidebarState({ open: false, path: pathname });
+  }
+  const sidebarOpen = sidebarState.open;
 
   const meQuery = useGetMeApiV1UsersMeGet<
     getMeApiV1UsersMeGetResponse,

From 3bc4dcaf55dc984550f5fe5b06ca9adad3f5a1a9 Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sat, 7 Mar 2026 21:28:58 -0800
Subject: [PATCH 07/10] fix: normalize sidebar width to 260px, add responsive
 padding to approvals

Align desktop sidebar width (was w-64/256px) with header column and
grid template (both 260px). Apply missing p-4 md:p-6 responsive
padding to the global approvals page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/app/approvals/page.tsx                    | 4 ++--
 frontend/src/components/organisms/DashboardSidebar.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/approvals/page.tsx b/frontend/src/app/approvals/page.tsx
index 060e8cad..fe034869 100644
--- a/frontend/src/app/approvals/page.tsx
+++ b/frontend/src/app/approvals/page.tsx
@@ -167,8 +167,8 @@ function GlobalApprovalsInner() {
 
   return (
     <main className="flex-1 overflow-y-auto bg-gradient-to-br from-slate-50 to-slate-100">
-      <div className="p-6">
-        <div className="h-[calc(100vh-160px)] min-h-[520px]">
+      <div className="p-4 md:p-6">
+        <div className="h-[calc(100vh-160px)] min-h-[300px] sm:min-h-[520px]">
           <BoardApprovalsPanel
             boardId="global"
             approvals={approvals}
diff --git a/frontend/src/components/organisms/DashboardSidebar.tsx b/frontend/src/components/organisms/DashboardSidebar.tsx
index 6f616e86..fb6caf4a 100644
--- a/frontend/src/components/organisms/DashboardSidebar.tsx
+++ b/frontend/src/components/organisms/DashboardSidebar.tsx
@@ -58,7 +58,7 @@ export function DashboardSidebar() {
         : "System degraded";
 
   return (
-    <aside className="fixed inset-y-0 left-0 z-40 flex w-[280px] -translate-x-full flex-col border-r border-slate-200 bg-white pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-64 md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
+    <aside className="fixed inset-y-0 left-0 z-40 flex w-[280px] -translate-x-full flex-col border-r border-slate-200 bg-white pt-16 shadow-lg transition-transform duration-200 ease-in-out [[data-sidebar=open]_&]:translate-x-0 md:relative md:inset-auto md:z-auto md:w-[260px] md:translate-x-0 md:pt-0 md:shadow-none md:transition-none">
       <div className="flex-1 px-3 py-4">
         <p className="px-3 text-xs font-semibold uppercase tracking-wider text-slate-500">
           Navigation

From fad1e99329da727f346e7af5a68821133894f7cc Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sat, 7 Mar 2026 21:42:05 -0800
Subject: [PATCH 08/10] test: add Cypress e2e tests for mobile sidebar behavior

Cover auth negative, viewport responsiveness, toggle open/close,
backdrop dismiss, navigation auto-close, and Escape key dismiss.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/cypress/e2e/mobile_sidebar.cy.ts | 113 ++++++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 frontend/cypress/e2e/mobile_sidebar.cy.ts

diff --git a/frontend/cypress/e2e/mobile_sidebar.cy.ts b/frontend/cypress/e2e/mobile_sidebar.cy.ts
new file mode 100644
index 00000000..2e8070a6
--- /dev/null
+++ b/frontend/cypress/e2e/mobile_sidebar.cy.ts
@@ -0,0 +1,113 @@
+/// <reference types="cypress" />
+
+import { setupCommonPageTestHooks } from "../support/testHooks";
+
+describe("/dashboard - mobile sidebar", () => {
+  const apiBase = "**/api/v1";
+
+  setupCommonPageTestHooks(apiBase);
+
+  function stubDashboardApis() {
+    cy.intercept("GET", `${apiBase}/metrics/dashboard*`, {
+      statusCode: 200,
+      body: {
+        total_boards: 0,
+        total_tasks: 0,
+        tasks_by_status: {},
+        active_agents: 0,
+        pending_approvals: 0,
+      },
+    }).as("dashboardMetrics");
+  }
+
+  function visitDashboardAuthenticated() {
+    stubDashboardApis();
+    cy.loginWithLocalAuth();
+    cy.visit("/dashboard");
+    cy.waitForAppLoaded();
+  }
+
+  it("auth negative: signed-out user does not see hamburger button", () => {
+    cy.visit("/dashboard");
+    cy.contains("h1", /local authentication/i, { timeout: 30_000 }).should(
+      "be.visible",
+    );
+    cy.get('[aria-label="Toggle navigation"]').should("not.exist");
+  });
+
+  it("mobile: hamburger button visible and sidebar hidden by default", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    cy.get('[aria-label="Toggle navigation"]').should("be.visible");
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed");
+    cy.get("aside").should("not.be.visible");
+  });
+
+  it("desktop: hamburger button hidden and sidebar always visible", () => {
+    cy.viewport(1280, 800);
+    visitDashboardAuthenticated();
+
+    cy.get('[aria-label="Toggle navigation"]').should("not.be.visible");
+    cy.get("aside").should("be.visible");
+  });
+
+  it("mobile: click hamburger opens sidebar and shows backdrop", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    cy.get('[aria-label="Toggle navigation"]').click();
+
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
+    cy.get("aside").should("be.visible");
+    cy.get('[aria-hidden="true"]').should("exist");
+  });
+
+  it("mobile: click backdrop closes sidebar", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    // Open sidebar first
+    cy.get('[aria-label="Toggle navigation"]').click();
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
+
+    // Click the backdrop overlay
+    cy.get('[aria-hidden="true"]').click({ force: true });
+
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed");
+    cy.get("aside").should("not.be.visible");
+  });
+
+  it("mobile: clicking a nav link closes sidebar", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    // Open sidebar
+    cy.get('[aria-label="Toggle navigation"]').click();
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
+    cy.get("aside").should("be.visible");
+
+    // Click a navigation link inside the sidebar
+    cy.get("aside").within(() => {
+      cy.contains("a", "Boards").click();
+    });
+
+    // Sidebar should close after navigation
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed");
+  });
+
+  it("mobile: pressing Escape closes sidebar", () => {
+    cy.viewport(375, 812);
+    visitDashboardAuthenticated();
+
+    // Open sidebar
+    cy.get('[aria-label="Toggle navigation"]').click();
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
+
+    // Press Escape
+    cy.get("body").type("{esc}");
+
+    cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed");
+    cy.get("aside").should("not.be.visible");
+  });
+});

From fab19ed5aa41b0a1d4013ccb3791c54393e9cffd Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sun, 8 Mar 2026 09:41:32 -0700
Subject: [PATCH 09/10] fix: use correct DashboardMetrics shape in mobile
 sidebar e2e stubs

The dashboard page accesses metrics.throughput.primary.points which
requires the full DashboardMetrics type structure. The original stub
returned a flat object with wrong fields, causing TypeError in all
authenticated tests. Also adds stubs for boards, agents, activity,
gateways, and board-groups APIs that the dashboard and boards pages
query on load.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/cypress/e2e/mobile_sidebar.cy.ts | 52 ++++++++++++++++++++---
 1 file changed, 47 insertions(+), 5 deletions(-)

diff --git a/frontend/cypress/e2e/mobile_sidebar.cy.ts b/frontend/cypress/e2e/mobile_sidebar.cy.ts
index 2e8070a6..8475551c 100644
--- a/frontend/cypress/e2e/mobile_sidebar.cy.ts
+++ b/frontend/cypress/e2e/mobile_sidebar.cy.ts
@@ -7,17 +7,59 @@ describe("/dashboard - mobile sidebar", () => {
 
   setupCommonPageTestHooks(apiBase);
 
+  const emptySeries = {
+    primary: { range: "7d", bucket: "day", points: [] },
+    comparison: { range: "7d", bucket: "day", points: [] },
+  };
+
   function stubDashboardApis() {
     cy.intercept("GET", `${apiBase}/metrics/dashboard*`, {
       statusCode: 200,
       body: {
-        total_boards: 0,
-        total_tasks: 0,
-        tasks_by_status: {},
-        active_agents: 0,
-        pending_approvals: 0,
+        generated_at: new Date().toISOString(),
+        range: "7d",
+        kpis: {
+          inbox_tasks: 0,
+          in_progress_tasks: 0,
+          review_tasks: 0,
+          done_tasks: 0,
+          tasks_in_progress: 0,
+          active_agents: 0,
+          error_rate_pct: 0,
+          median_cycle_time_hours_7d: null,
+        },
+        throughput: emptySeries,
+        cycle_time: emptySeries,
+        error_rate: emptySeries,
+        wip: emptySeries,
+        pending_approvals: { items: [], total: 0 },
       },
     }).as("dashboardMetrics");
+
+    cy.intercept("GET", `${apiBase}/boards*`, {
+      statusCode: 200,
+      body: { items: [], total: 0 },
+    }).as("boardsList");
+
+    cy.intercept("GET", `${apiBase}/agents*`, {
+      statusCode: 200,
+      body: { items: [], total: 0 },
+    }).as("agentsList");
+
+    cy.intercept("GET", `${apiBase}/activity*`, {
+      statusCode: 200,
+      body: { items: [], total: 0 },
+    }).as("activityList");
+
+    cy.intercept("GET", `${apiBase}/gateways/status*`, {
+      statusCode: 200,
+      body: { gateways: [] },
+    }).as("gatewaysStatus");
+
+    cy.intercept("GET", `${apiBase}/board-groups*`, {
+      statusCode: 200,
+      body: { items: [], total: 0 },
+    }).as("boardGroupsList");
   }
 
   function visitDashboardAuthenticated() {

From 7adadd5c888ab8ccac80131e89ce70ed2a25aded Mon Sep 17 00:00:00 2001
From: 0xjjjjjj <0xjjjjjj@users.noreply.github.com>
Date: Sun, 8 Mar 2026 10:01:31 -0700
Subject: [PATCH 10/10] fix: use data-cy selector for sidebar backdrop in e2e
 tests

The aria-hidden="true" selector matched 27 elements (icons, etc.)
causing cy.click() to fail. Add data-cy="sidebar-backdrop" to the
overlay div and target that specifically in tests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/cypress/e2e/mobile_sidebar.cy.ts            | 4 ++--
 frontend/src/components/templates/DashboardShell.tsx | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/cypress/e2e/mobile_sidebar.cy.ts b/frontend/cypress/e2e/mobile_sidebar.cy.ts
index 8475551c..a4a74a6c 100644
--- a/frontend/cypress/e2e/mobile_sidebar.cy.ts
+++ b/frontend/cypress/e2e/mobile_sidebar.cy.ts
@@ -102,7 +102,7 @@ describe("/dashboard - mobile sidebar", () => {
 
     cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
     cy.get("aside").should("be.visible");
-    cy.get('[aria-hidden="true"]').should("exist");
+    cy.get('[data-cy="sidebar-backdrop"]').should("exist");
   });
 
   it("mobile: click backdrop closes sidebar", () => {
@@ -114,7 +114,7 @@ describe("/dashboard - mobile sidebar", () => {
     cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "open");
 
     // Click the backdrop overlay
-    cy.get('[aria-hidden="true"]').click({ force: true });
+    cy.get('[data-cy="sidebar-backdrop"]').click({ force: true });
 
     cy.get("[data-sidebar]").should("have.attr", "data-sidebar", "closed");
     cy.get("aside").should("not.be.visible");
diff --git a/frontend/src/components/templates/DashboardShell.tsx b/frontend/src/components/templates/DashboardShell.tsx
index 7a9ad76f..f88cd60d 100644
--- a/frontend/src/components/templates/DashboardShell.tsx
+++ b/frontend/src/components/templates/DashboardShell.tsx
@@ -136,6 +136,7 @@ export function DashboardShell({ children }: { children: ReactNode }) {
           className="fixed inset-0 z-40 bg-black/30 md:hidden"
           onClick={toggleSidebar}
           aria-hidden="true"
+          data-cy="sidebar-backdrop"
         />
       ) : null}