feat: Add responsive session manager with mobile backdrop overlay

apps/ui/src/components/views/agent-view.tsx

@@ -20,7 +20,14 @@ export function AgentView() {
   const { currentProject } = useAppStore();
   const [input, setInput] = useState('');
   const [currentTool, setCurrentTool] = useState<string | null>(null);
-  const [showSessionManager, setShowSessionManager] = useState(true);
+  // Initialize session manager state based on screen size (hidden on mobile)
+  const [showSessionManager, setShowSessionManager] = useState(() => {
+    // Check if we're on a mobile screen (< lg breakpoint = 1024px)
+    if (typeof window !== 'undefined') {
+      return window.innerWidth >= 1024;
+    }
+    return true; // Default to showing on SSR
+  });
   const [modelSelection, setModelSelection] = useState<PhaseModelEntry>({ model: 'sonnet' });
 
   // Input ref for auto-focus
@@ -119,6 +126,13 @@ export function AgentView() {
     }
   }, [currentSessionId]);
 
+  // Auto-close session manager on mobile when a session is selected
+  useEffect(() => {
+    if (currentSessionId && typeof window !== 'undefined' && window.innerWidth < 1024) {
+      setShowSessionManager(false);
+    }
+  }, [currentSessionId]);
+
   // Show welcome message if no messages yet
   const displayMessages =
     messages.length === 0
@@ -139,9 +153,18 @@ export function AgentView() {
 
   return (
     <div className="flex-1 flex overflow-hidden bg-background" data-testid="agent-view">
+      {/* Mobile backdrop overlay for Session Manager */}
+      {showSessionManager && currentProject && (
+        <div
+          className="fixed inset-0 bg-black/50 z-20 lg:hidden"
+          onClick={() => setShowSessionManager(false)}
+          data-testid="session-manager-backdrop"
+        />
+      )}
+
       {/* Session Manager Sidebar */}
       {showSessionManager && currentProject && (
-        <div className="w-80 border-r border-border shrink-0 bg-card/50">
+        <div className="fixed inset-y-0 left-0 w-72 z-30 lg:relative lg:w-80 lg:z-auto border-r border-border shrink-0 bg-card">
           <SessionManager
             currentSessionId={currentSessionId}
             onSelectSession={handleSelectSession}