From 8aa97d2e5ddefef1ee4f68d542df18bdc8b8a852 Mon Sep 17 00:00:00 2001
From: Christopher Tso <christso@gmail.com>
Date: Thu, 9 Apr 2026 08:54:03 +0000
Subject: [PATCH 1/2] =?UTF-8?q?fix(studio):=20responsive=20sidebar=20?=
 =?UTF-8?q?=E2=80=94=20collapse=20to=20top=20nav=20on=20mobile=20(#996)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On viewports ≥768px the sidebar renders as before (fixed left panel).
Below 768px the sidebar is hidden and a mobile top bar with a hamburger
toggles it as a slide-in overlay with a backdrop.

- SidebarShell: shared <aside> wrapper handling fixed/overlay positioning
- SidebarProvider + useSidebarContext: lightweight context for open state
- Layout: wraps app in SidebarProvider, adds hidden-md mobile top bar
- Auto-closes on navigation (useLocation effect in SidebarShell)

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/studio/src/components/Layout.tsx   | 47 +++++++++++++++-
 apps/studio/src/components/Sidebar.tsx  | 72 +++++++++++++++++++------
 apps/studio/src/lib/sidebar-context.tsx | 37 +++++++++++++
 3 files changed, 140 insertions(+), 16 deletions(-)
 create mode 100644 apps/studio/src/lib/sidebar-context.tsx

diff --git a/apps/studio/src/components/Layout.tsx b/apps/studio/src/components/Layout.tsx
index 9a983e995..253846dec 100644
--- a/apps/studio/src/components/Layout.tsx
+++ b/apps/studio/src/components/Layout.tsx
@@ -3,18 +3,63 @@
  *
  * The sidebar provides navigation, breadcrumbs show the current
  * location, and the main area renders the active route via Outlet.
+ *
+ * Responsive behavior:
+ * - md+ (≥768px): sidebar always visible as a fixed left panel.
+ * - <md: sidebar hidden by default; a hamburger in the mobile top bar toggles it.
  */
 
 import { Outlet } from '@tanstack/react-router';
 
+import { SidebarProvider, useSidebarContext } from '~/lib/sidebar-context';
+
 import { Breadcrumbs } from './Breadcrumbs';
 import { Sidebar } from './Sidebar';
 
 export function Layout() {
+  return (
+    <SidebarProvider>
+      <LayoutInner />
+    </SidebarProvider>
+  );
+}
+
+function LayoutInner() {
+  const { toggle } = useSidebarContext();
+
   return (
     <div className="flex h-screen overflow-hidden">
       <Sidebar />
-      <div className="flex flex-1 flex-col overflow-hidden">
+
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        {/* Mobile top bar — only visible below md breakpoint */}
+        <header className="flex items-center gap-3 border-b border-gray-800 bg-gray-900/50 px-4 py-3 md:hidden">
+          <button
+            type="button"
+            onClick={toggle}
+            className="text-gray-400 hover:text-gray-200"
+            aria-label="Toggle navigation"
+          >
+            {/* Hamburger icon */}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <line x1="3" y1="12" x2="21" y2="12" />
+              <line x1="3" y1="18" x2="21" y2="18" />
+            </svg>
+          </button>
+          <span className="text-sm font-semibold text-white">AgentV Studio</span>
+        </header>
+
         <Breadcrumbs />
         <main className="flex-1 overflow-y-auto p-6">
           <Outlet />
diff --git a/apps/studio/src/components/Sidebar.tsx b/apps/studio/src/components/Sidebar.tsx
index 62ec615a7..8ccc2fb31 100644
--- a/apps/studio/src/components/Sidebar.tsx
+++ b/apps/studio/src/components/Sidebar.tsx
@@ -6,9 +6,15 @@
  * - At eval detail: shows list of evals in the current run with pass/fail indicators
  * - At suite detail: shows evals filtered to that suite
  * - At experiment detail: shows list of experiments
+ *
+ * Responsive behavior is handled by SidebarShell:
+ * - md+ (≥768px): always-visible fixed left panel
+ * - <md: hidden by default, slides in as an overlay when toggled via the hamburger
  */
 
-import { Link, useMatchRoute } from '@tanstack/react-router';
+import { useEffect, type ReactNode } from 'react';
+
+import { Link, useLocation, useMatchRoute } from '@tanstack/react-router';
 
 import {
   isPassing,
@@ -22,6 +28,42 @@ import {
   useRunList,
   useStudioConfig,
 } from '~/lib/api';
+import { useSidebarContext } from '~/lib/sidebar-context';
+
+/** Responsive <aside> wrapper. Handles mobile overlay and desktop static placement. */
+function SidebarShell({ children }: { children: ReactNode }) {
+  const { isOpen, close } = useSidebarContext();
+  const location = useLocation();
+
+  // Close sidebar on navigation (mobile UX)
+  useEffect(() => {
+    close();
+  }, [location.pathname]);
+
+  return (
+    <>
+      {/* Backdrop — mobile only, shown when sidebar is open */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-30 bg-black/50 md:hidden"
+          onClick={close}
+          onKeyDown={(e) => e.key === 'Escape' && close()}
+          role="button"
+          tabIndex={-1}
+          aria-label="Close navigation"
+        />
+      )}
+
+      <aside
+        className={`fixed inset-y-0 left-0 z-40 flex w-64 flex-col border-r border-gray-800 bg-gray-900/50 transition-transform duration-200 ease-in-out md:static md:z-auto md:translate-x-0 ${
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        {children}
+      </aside>
+    </>
+  );
+}
 
 export function Sidebar() {
   const matchRoute = useMatchRoute();
@@ -120,7 +162,7 @@ function RunSidebar() {
   const data = useAggregated ? aggregatedData : localData;
 
   return (
-    <aside className="flex w-64 flex-col border-r border-gray-800 bg-gray-900/50">
+    <SidebarShell>
       <div className="flex items-center gap-2 border-b border-gray-800 px-4 py-4">
         <Link to="/" className="text-lg font-semibold text-white hover:text-cyan-400">
           AgentV Studio
@@ -181,7 +223,7 @@ function RunSidebar() {
           Settings
         </Link>
       </div>
-    </aside>
+    </SidebarShell>
   );
 }
 
@@ -191,7 +233,7 @@ function EvalSidebar({ runId, currentEvalId }: { runId: string; currentEvalId: s
   const passThreshold = config?.threshold ?? config?.pass_threshold ?? 0.8;
 
   return (
-    <aside className="flex w-64 flex-col border-r border-gray-800 bg-gray-900/50">
+    <SidebarShell>
       <div className="flex items-center gap-2 border-b border-gray-800 px-4 py-4">
         <Link to="/" className="text-lg font-semibold text-white hover:text-cyan-400">
           AgentV Studio
@@ -238,7 +280,7 @@ function EvalSidebar({ runId, currentEvalId }: { runId: string; currentEvalId: s
           );
         })}
       </nav>
-    </aside>
+    </SidebarShell>
   );
 }
 
@@ -249,7 +291,7 @@ function SuiteSidebar({ runId, suite }: { runId: string; suite: string }) {
   const suiteResults = (data?.results ?? []).filter((r) => (r.suite ?? 'Uncategorized') === suite);
 
   return (
-    <aside className="flex w-64 flex-col border-r border-gray-800 bg-gray-900/50">
+    <SidebarShell>
       <div className="flex items-center gap-2 border-b border-gray-800 px-4 py-4">
         <Link to="/" className="text-lg font-semibold text-white hover:text-cyan-400">
           AgentV Studio
@@ -292,7 +334,7 @@ function SuiteSidebar({ runId, suite }: { runId: string; suite: string }) {
           );
         })}
       </nav>
-    </aside>
+    </SidebarShell>
   );
 }
 
@@ -301,7 +343,7 @@ function CategorySidebar({ runId, category }: { runId: string; category: string
   const suites = data?.suites ?? [];
 
   return (
-    <aside className="flex w-64 flex-col border-r border-gray-800 bg-gray-900/50">
+    <SidebarShell>
       <div className="flex items-center gap-2 border-b border-gray-800 px-4 py-4">
         <Link to="/" className="text-lg font-semibold text-white hover:text-cyan-400">
           AgentV Studio
@@ -341,7 +383,7 @@ function CategorySidebar({ runId, category }: { runId: string; category: string
           </Link>
         ))}
       </nav>
-    </aside>
+    </SidebarShell>
   );
 }
 
@@ -357,7 +399,7 @@ function ProjectRunDetailSidebar({
   const { data } = useProjectRunList(projectId);
 
   return (
-    <aside className="flex w-64 flex-col border-r border-gray-800 bg-gray-900/50">
+    <SidebarShell>
       <div className="flex items-center gap-2 border-b border-gray-800 px-4 py-4">
         <Link to="/" className="text-lg font-semibold text-white hover:text-cyan-400">
           AgentV Studio
@@ -393,7 +435,7 @@ function ProjectRunDetailSidebar({
           );
         })}
       </nav>
-    </aside>
+    </SidebarShell>
   );
 }
 
@@ -411,7 +453,7 @@ function ProjectEvalSidebar({
   const passThreshold = config?.threshold ?? config?.pass_threshold ?? 0.8;
 
   return (
-    <aside className="flex w-64 flex-col border-r border-gray-800 bg-gray-900/50">
+    <SidebarShell>
       <div className="flex items-center gap-2 border-b border-gray-800 px-4 py-4">
         <Link to="/" className="text-lg font-semibold text-white hover:text-cyan-400">
           AgentV Studio
@@ -455,7 +497,7 @@ function ProjectEvalSidebar({
           );
         })}
       </nav>
-    </aside>
+    </SidebarShell>
   );
 }
 
@@ -464,7 +506,7 @@ function ExperimentSidebar({ currentExperiment }: { currentExperiment: string })
   const experiments = data?.experiments ?? [];
 
   return (
-    <aside className="flex w-64 flex-col border-r border-gray-800 bg-gray-900/50">
+    <SidebarShell>
       <div className="flex items-center gap-2 border-b border-gray-800 px-4 py-4">
         <Link to="/" className="text-lg font-semibold text-white hover:text-cyan-400">
           AgentV Studio
@@ -506,6 +548,6 @@ function ExperimentSidebar({ currentExperiment }: { currentExperiment: string })
           );
         })}
       </nav>
-    </aside>
+    </SidebarShell>
   );
 }
diff --git a/apps/studio/src/lib/sidebar-context.tsx b/apps/studio/src/lib/sidebar-context.tsx
new file mode 100644
index 000000000..5e95196c5
--- /dev/null
+++ b/apps/studio/src/lib/sidebar-context.tsx
@@ -0,0 +1,37 @@
+/**
+ * Sidebar open/close state shared between Layout (hamburger button)
+ * and SidebarShell (the <aside> visibility).
+ */
+
+import { createContext, useContext, useState } from 'react';
+
+interface SidebarContextValue {
+  isOpen: boolean;
+  toggle: () => void;
+  close: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextValue>({
+  isOpen: false,
+  toggle: () => {},
+  close: () => {},
+});
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <SidebarContext.Provider
+      value={{
+        isOpen,
+        toggle: () => setIsOpen((o) => !o),
+        close: () => setIsOpen(false),
+      }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebarContext() {
+  return useContext(SidebarContext);
+}

From d3329eb63fb0f78c96f65da6f28b9646bd8bbc43 Mon Sep 17 00:00:00 2001
From: Christopher Tso <christso@gmail.com>
Date: Thu, 9 Apr 2026 08:55:55 +0000
Subject: [PATCH 2/2] style(studio): fix biome lint in Sidebar and Layout

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/studio/src/components/Layout.tsx  | 2 ++
 apps/studio/src/components/Sidebar.tsx | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/studio/src/components/Layout.tsx b/apps/studio/src/components/Layout.tsx
index 253846dec..813c771be 100644
--- a/apps/studio/src/components/Layout.tsx
+++ b/apps/studio/src/components/Layout.tsx
@@ -51,6 +51,8 @@ function LayoutInner() {
               strokeWidth="2"
               strokeLinecap="round"
               strokeLinejoin="round"
+              role="img"
+              aria-label="Toggle navigation"
             >
               <line x1="3" y1="6" x2="21" y2="6" />
               <line x1="3" y1="12" x2="21" y2="12" />
diff --git a/apps/studio/src/components/Sidebar.tsx b/apps/studio/src/components/Sidebar.tsx
index 8ccc2fb31..64067076f 100644
--- a/apps/studio/src/components/Sidebar.tsx
+++ b/apps/studio/src/components/Sidebar.tsx
@@ -12,7 +12,7 @@
  * - <md: hidden by default, slides in as an overlay when toggled via the hamburger
  */
 
-import { useEffect, type ReactNode } from 'react';
+import { type ReactNode, useEffect } from 'react';
 
 import { Link, useLocation, useMatchRoute } from '@tanstack/react-router';
 
@@ -36,9 +36,10 @@ function SidebarShell({ children }: { children: ReactNode }) {
   const location = useLocation();
 
   // Close sidebar on navigation (mobile UX)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: location.pathname is the intended trigger
   useEffect(() => {
     close();
-  }, [location.pathname]);
+  }, [close, location.pathname]);
 
   return (
     <>