make sure session list hides when open and window expanded

frontend/common/dist/styles/global.css

@@ -812,6 +812,9 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.resize {
+  resize: both;
+}
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1025,9 +1028,6 @@ video {
   -webkit-background-clip: text;
           background-clip: text;
 }
-.p-2 {
-  padding: 0.5rem;
-}
 .p-3 {
   padding: 0.75rem;
 }

frontend/common/src/components/DefaultAgentScreen.tsx

@@ -42,6 +42,22 @@ export const DefaultAgentScreen: React.FC = () => {
     }
   }, [sessions, selectedSessionId]);
   
+  // Close drawer when window resizes to desktop width
+  useEffect(() => {
+    const handleResize = () => {
+      // Check if we're at desktop size (corresponds to md: breakpoint in Tailwind)
+      if (window.innerWidth >= 768 && isDrawerOpen) {
+        setIsDrawerOpen(false);
+      }
+    };
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+    
+    // Clean up event listener on component unmount
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isDrawerOpen]);
+  
   // Filter steps for selected session
   const selectedSessionSteps = selectedSessionId 
     ? allSteps.filter(step => sessions.find(s => s.id === selectedSessionId)?.steps.some(s => s.id === step.id))

frontend/common/src/components/SessionDrawer.tsx

@@ -6,9 +6,9 @@ import {
   SheetTitle, 
   SheetClose 
 } from './ui/sheet';
-import { ScrollArea } from './ui/scroll-area';
 import { AgentSession } from '../utils/types';
 import { getSampleAgentSessions } from '../utils/sample-data';
+import { SessionList } from './SessionList';
 
 interface SessionDrawerProps {
   onSelectSession?: (sessionId: string) => void;
@@ -25,30 +25,6 @@ export const SessionDrawer: React.FC<SessionDrawerProps> = ({
   isOpen = false,
   onClose
 }) => {
-  // Get status color
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'active':
-        return 'bg-blue-500';
-      case 'completed':
-        return 'bg-green-500';
-      case 'error':
-        return 'bg-red-500';
-      default:
-        return 'bg-gray-500';
-    }
-  };
-
-  // Format timestamp
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString([], { 
-      month: 'short', 
-      day: 'numeric', 
-      hour: '2-digit', 
-      minute: '2-digit' 
-    });
-  };
-
   return (
     <Sheet open={isOpen} onOpenChange={onClose}>
       <SheetContent 
@@ -58,31 +34,13 @@ export const SessionDrawer: React.FC<SessionDrawerProps> = ({
         <SheetHeader>
           <SheetTitle>Sessions</SheetTitle>
         </SheetHeader>
-        <ScrollArea className="h-[calc(100vh-9rem)] mt-6">
+        <SessionList
-          <div className="space-y-4 p-2">
+          sessions={sessions}
-            {sessions.map((session) => (
+          currentSessionId={currentSessionId}
-              <SheetClose key={session.id} asChild>
+          onSelectSession={onSelectSession}
-                <button
+          className="h-[calc(100vh-9rem)] mt-6"
-                  onClick={() => onSelectSession?.(session.id)}
+          wrapperComponent={SheetClose}
-                  className={`w-full flex items-start p-3 text-left rounded-md transition-colors hover:bg-accent/50 ${
+        />
-                    currentSessionId === session.id ? 'bg-accent' : ''
-                  }`}
-                >
-                  <div className={`w-3 h-3 rounded-full ${getStatusColor(session.status)} mt-1.5 mr-3 flex-shrink-0`} />
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium truncate">{session.name}</div>
-                    <div className="text-xs text-muted-foreground mt-1">
-                      {session.steps.length} steps • {formatDate(session.updated)}
-                    </div>
-                    <div className="text-xs text-muted-foreground mt-1">
-                      <span className="capitalize">{session.status}</span>
-                    </div>
-                  </div>
-                </button>
-              </SheetClose>
-            ))}
-          </div>
-        </ScrollArea>
       </SheetContent>
     </Sheet>
   );

frontend/common/src/components/SessionList.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { ScrollArea } from './ui/scroll-area';
+import { AgentSession } from '../utils/types';
+import { getSampleAgentSessions } from '../utils/sample-data';
+
+interface SessionListProps {
+  onSelectSession?: (sessionId: string) => void;
+  currentSessionId?: string;
+  sessions?: AgentSession[];
+  className?: string;
+  wrapperComponent?: React.ElementType;
+  closeAction?: React.ReactNode;
+}
+
+export const SessionList: React.FC<SessionListProps> = ({ 
+  onSelectSession, 
+  currentSessionId,
+  sessions = getSampleAgentSessions(),
+  className = '',
+  wrapperComponent: WrapperComponent = 'button',
+  closeAction
+}) => {
+  // Get status color
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'active':
+        return 'bg-blue-500';
+      case 'completed':
+        return 'bg-green-500';
+      case 'error':
+        return 'bg-red-500';
+      default:
+        return 'bg-gray-500';
+    }
+  };
+
+  // Format timestamp
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString([], { 
+      month: 'short', 
+      day: 'numeric', 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+  };
+
+  return (
+    <ScrollArea className={`${className}`}>
+      <div className="p-4 space-y-4">
+        {sessions.map((session) => {
+          const buttonContent = (
+            <>
+              <div className={`w-3 h-3 rounded-full ${getStatusColor(session.status)} mt-1.5 mr-3 flex-shrink-0`} />
+              <div className="flex-1 min-w-0">
+                <div className="font-medium truncate">{session.name}</div>
+                <div className="text-xs text-muted-foreground mt-1">
+                  {session.steps.length} steps • {formatDate(session.updated)}
+                </div>
+                <div className="text-xs text-muted-foreground mt-1">
+                  <span className="capitalize">{session.status}</span>
+                </div>
+              </div>
+            </>
+          );
+
+          return React.createElement(
+            WrapperComponent,
+            {
+              key: session.id,
+              onClick: () => onSelectSession?.(session.id),
+              className: `w-full flex items-start p-3 text-left rounded-md transition-colors hover:bg-accent/50 ${
+                currentSessionId === session.id ? 'bg-accent' : ''
+              }`
+            },
+            closeAction ? (
+              <>
+                {buttonContent}
+                {React.cloneElement(closeAction as React.ReactElement, { 
+                  onClick: (e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    onSelectSession?.(session.id);
+                  }
+                })}
+              </>
+            ) : buttonContent
+          );
+        })}
+      </div>
+    </ScrollArea>
+  );
+};

frontend/common/src/components/SessionSidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ScrollArea } from './ui/scroll-area';
 import { AgentSession } from '../utils/types';
 import { getSampleAgentSessions } from '../utils/sample-data';
+import { SessionList } from './SessionList';
 
 interface SessionSidebarProps {
   onSelectSession?: (sessionId: string) => void;
@@ -16,59 +16,17 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   sessions = getSampleAgentSessions(),
   className = ''
 }) => {
-  // Get status color
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'active':
-        return 'bg-blue-500';
-      case 'completed':
-        return 'bg-green-500';
-      case 'error':
-        return 'bg-red-500';
-      default:
-        return 'bg-gray-500';
-    }
-  };
-
-  // Format timestamp
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString([], { 
-      month: 'short', 
-      day: 'numeric', 
-      hour: '2-digit', 
-      minute: '2-digit' 
-    });
-  };
-
   return (
     <div className={`flex flex-col h-full ${className}`}>
       <div className="p-4 border-b border-border">
         <h3 className="font-medium text-lg">Sessions</h3>
       </div>
-      <ScrollArea className="flex-1">
+      <SessionList
-        <div className="p-4 space-y-4">
+        sessions={sessions}
-          {sessions.map((session) => (
+        currentSessionId={currentSessionId}
-            <button
+        onSelectSession={onSelectSession}
-              key={session.id}
+        className="flex-1"
-              onClick={() => onSelectSession?.(session.id)}
+      />
-              className={`w-full flex items-start p-3 text-left rounded-md transition-colors hover:bg-accent/50 ${
-                currentSessionId === session.id ? 'bg-accent' : ''
-              }`}
-            >
-              <div className={`w-3 h-3 rounded-full ${getStatusColor(session.status)} mt-1.5 mr-3 flex-shrink-0`} />
-              <div className="flex-1 min-w-0">
-                <div className="font-medium truncate">{session.name}</div>
-                <div className="text-xs text-muted-foreground mt-1">
-                  {session.steps.length} steps • {formatDate(session.updated)}
-                </div>
-                <div className="text-xs text-muted-foreground mt-1">
-                  <span className="capitalize">{session.status}</span>
-                </div>
-              </div>
-            </button>
-          ))}
-        </div>
-      </ScrollArea>
     </div>
   );
 };