From f29658fee8c6a06df3ed3d9a67362e074ac571ac Mon Sep 17 00:00:00 2001
From: AI Christianson <ai.christianson@christianson.ai>
Date: Fri, 14 Mar 2025 08:54:24 -0400
Subject: [PATCH] ui styling

---
 frontend/common/dist/styles/global.css        | 137 ++++++-----
 .../common/src/components/SessionDrawer.tsx   |  26 +-
 .../common/src/components/SessionSidebar.tsx  |   4 +-
 .../common/src/components/TimelineFeed.tsx    | 134 +++--------
 .../common/src/components/TimelineStep.tsx    |  39 ++-
 frontend/common/src/components/ui/sheet.tsx   |   4 +-
 frontend/web/src/components/Layout.tsx        |  99 ++++++++
 frontend/web/src/index.tsx                    | 224 +++++++++---------
 8 files changed, 366 insertions(+), 301 deletions(-)
 create mode 100644 frontend/web/src/components/Layout.tsx

diff --git a/frontend/common/dist/styles/global.css b/frontend/common/dist/styles/global.css
index 13af638..7e46c9e 100644
--- a/frontend/common/dist/styles/global.css
+++ b/frontend/common/dist/styles/global.css
@@ -623,17 +623,24 @@ video {
 .top-4 {
   top: 1rem;
 }
+.z-40 {
+  z-index: 40;
+}
 .z-50 {
   z-index: 50;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
-.mb-4 {
-  margin-bottom: 1rem;
+.mb-5 {
+  margin-bottom: 1.25rem;
 }
-.mr-2 {
-  margin-right: 0.5rem;
+.mr-1 {
+  margin-right: 0.25rem;
 }
 .mr-3 {
   margin-right: 0.75rem;
@@ -644,8 +651,8 @@ video {
 .mt-1\.5 {
   margin-top: 0.375rem;
 }
-.mt-3 {
-  margin-top: 0.75rem;
+.mt-4 {
+  margin-top: 1rem;
 }
 .mt-6 {
   margin-top: 1.5rem;
@@ -659,9 +666,6 @@ video {
 .inline-flex {
   display: inline-flex;
 }
-.hidden {
-  display: none;
-}
 .h-10 {
   height: 2.5rem;
 }
@@ -671,6 +675,9 @@ video {
 .h-3 {
   height: 0.75rem;
 }
+.h-3\.5 {
+  height: 0.875rem;
+}
 .h-4 {
   height: 1rem;
 }
@@ -689,30 +696,27 @@ video {
 .h-full {
   height: 100%;
 }
-.h-screen {
-  height: 100vh;
-}
 .w-2\.5 {
   width: 0.625rem;
 }
 .w-3 {
   width: 0.75rem;
 }
+.w-3\.5 {
+  width: 0.875rem;
+}
 .w-3\/4 {
   width: 75%;
 }
 .w-4 {
   width: 1rem;
 }
-.w-5 {
-  width: 1.25rem;
+.w-8 {
+  width: 2rem;
 }
 .w-9 {
   width: 2.25rem;
 }
-.w-\[250px\] {
-  width: 250px;
-}
 .w-\[85\%\] {
   width: 85%;
 }
@@ -722,8 +726,8 @@ video {
 .min-w-0 {
   min-width: 0px;
 }
-.max-w-xs {
-  max-width: 20rem;
+.max-w-md {
+  max-width: 28rem;
 }
 .flex-1 {
   flex: 1 1 0%;
@@ -766,12 +770,14 @@ video {
 .justify-between {
   justify-content: space-between;
 }
-.gap-2 {
-  gap: 0.5rem;
-}
 .gap-4 {
   gap: 1rem;
 }
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
@@ -787,12 +793,17 @@ video {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
+.overflow-auto {
+  overflow: auto;
+}
 .overflow-hidden {
   overflow: hidden;
 }
-.overflow-x-auto {
-  overflow-x: auto;
-}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -804,9 +815,6 @@ video {
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
-.rounded {
-  border-radius: 0.25rem;
-}
 .rounded-\[inherit\] {
   border-radius: inherit;
 }
@@ -840,9 +848,15 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.border-dashed {
+  border-style: dashed;
+}
 .border-border {
   border-color: hsl(var(--border));
 }
+.border-border\/50 {
+  border-color: hsl(var(--border) / 0.5);
+}
 .border-input {
   border-color: hsl(var(--input));
 }
@@ -874,6 +888,9 @@ video {
 .bg-card {
   background-color: hsl(var(--card));
 }
+.bg-card\/50 {
+  background-color: hsl(var(--card) / 0.5);
+}
 .bg-destructive {
   background-color: hsl(var(--destructive));
 }
@@ -908,6 +925,9 @@ video {
 .p-4 {
   padding: 1rem;
 }
+.p-5 {
+  padding: 1.25rem;
+}
 .p-6 {
   padding: 1.5rem;
 }
@@ -930,21 +950,22 @@ video {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
 .pt-0 {
   padding-top: 0px;
 }
@@ -981,6 +1002,9 @@ video {
 .leading-none {
   line-height: 1;
 }
+.leading-relaxed {
+  line-height: 1.625;
+}
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -996,6 +1020,9 @@ video {
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
+.text-muted-foreground\/50 {
+  color: hsl(var(--muted-foreground) / 0.5);
+}
 .text-primary {
   color: hsl(var(--primary));
 }
@@ -1034,12 +1061,17 @@ video {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.ring-ring\/20 {
+  --tw-ring-color: hsl(var(--ring) / 0.2);
+}
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -1120,6 +1152,9 @@ video {
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
+.hover\:bg-accent\/30:hover {
+  background-color: hsl(var(--accent) / 0.3);
+}
 .hover\:bg-accent\/50:hover {
   background-color: hsl(var(--accent) / 0.5);
 }
@@ -1141,6 +1176,11 @@ video {
 .hover\:opacity-100:hover {
   opacity: 1;
 }
+.hover\:shadow-md:hover {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1188,6 +1228,11 @@ video {
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+.group:hover .group-hover\:scale-110 {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
   --tw-translate-x: 1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1318,20 +1363,4 @@ video {
   .sm\:text-left {
     text-align: left;
   }
-}
-@media (min-width: 768px) {
-
-  .md\:block {
-    display: block;
-  }
-
-  .md\:hidden {
-    display: none;
-  }
-}
-@media (min-width: 1024px) {
-
-  .lg\:w-\[300px\] {
-    width: 300px;
-  }
 }
\ No newline at end of file
diff --git a/frontend/common/src/components/SessionDrawer.tsx b/frontend/common/src/components/SessionDrawer.tsx
index 67fbf65..ad3596e 100644
--- a/frontend/common/src/components/SessionDrawer.tsx
+++ b/frontend/common/src/components/SessionDrawer.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
-import { Menu } from 'lucide-react';
 import { 
   Sheet, 
-  SheetTrigger, 
   SheetContent, 
   SheetHeader, 
   SheetTitle, 
   SheetClose 
 } from './ui/sheet';
-import { Button } from './ui/button';
 import { ScrollArea } from './ui/scroll-area';
 import { AgentSession, getSampleAgentSessions } from '../utils/sample-data';
 
@@ -16,12 +13,16 @@ interface SessionDrawerProps {
   onSelectSession?: (sessionId: string) => void;
   currentSessionId?: string;
   sessions?: AgentSession[];
+  isOpen?: boolean;
+  onClose?: () => void;
 }
 
 export const SessionDrawer: React.FC<SessionDrawerProps> = ({ 
   onSelectSession, 
   currentSessionId,
-  sessions = getSampleAgentSessions()
+  sessions = getSampleAgentSessions(),
+  isOpen = false,
+  onClose
 }) => {
   // Get status color
   const getStatusColor = (status: string) => {
@@ -48,19 +49,16 @@ export const SessionDrawer: React.FC<SessionDrawerProps> = ({
   };
 
   return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="ghost" size="icon" className="md:hidden">
-          <Menu className="h-5 w-5" />
-          <span className="sr-only">Toggle navigation</span>
-        </Button>
-      </SheetTrigger>
-      <SheetContent side="left" className="w-[85%] sm:max-w-md">
+    <Sheet open={isOpen} onOpenChange={onClose}>
+      <SheetContent 
+        side="left" 
+        className="w-[85%] sm:max-w-md border-r border-border"
+      >
         <SheetHeader>
           <SheetTitle>Sessions</SheetTitle>
         </SheetHeader>
-        <ScrollArea className="h-[calc(100vh-5rem)] mt-6">
-          <div className="space-y-4">
+        <ScrollArea className="h-[calc(100vh-9rem)] mt-6">
+          <div className="space-y-4 p-2">
             {sessions.map((session) => (
               <SheetClose key={session.id} asChild>
                 <button
diff --git a/frontend/common/src/components/SessionSidebar.tsx b/frontend/common/src/components/SessionSidebar.tsx
index 2fb9e4f..9724dee 100644
--- a/frontend/common/src/components/SessionSidebar.tsx
+++ b/frontend/common/src/components/SessionSidebar.tsx
@@ -40,11 +40,11 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
   };
 
   return (
-    <div className={`hidden md:block w-[250px] lg:w-[300px] h-screen border-r border-border ${className}`}>
+    <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="h-[calc(100vh-5rem)]">
+      <ScrollArea className="flex-1">
         <div className="p-4 space-y-4">
           {sessions.map((session) => (
             <button
diff --git a/frontend/common/src/components/TimelineFeed.tsx b/frontend/common/src/components/TimelineFeed.tsx
index 37ef12d..b6a0de0 100644
--- a/frontend/common/src/components/TimelineFeed.tsx
+++ b/frontend/common/src/components/TimelineFeed.tsx
@@ -1,123 +1,45 @@
-import React, { useState } from 'react';
-import { ScrollArea } from './ui/scroll-area';
+import React, { useMemo } from 'react';
 import { TimelineStep } from './TimelineStep';
 import { AgentStep } from '../utils/sample-data';
 
 interface TimelineFeedProps {
   steps: AgentStep[];
   maxHeight?: string;
-  filter?: {
-    types?: string[];
-    status?: string[];
-  };
-  sortOrder?: 'asc' | 'desc';
 }
 
 export const TimelineFeed: React.FC<TimelineFeedProps> = ({
   steps,
-  maxHeight = '500px',
-  filter,
-  sortOrder = 'desc'
+  maxHeight
 }) => {
-  // State for filtered and sorted steps
-  const [activeFilter, setActiveFilter] = useState(filter);
-  const [activeSortOrder, setActiveSortOrder] = useState<'asc' | 'desc'>(sortOrder);
-
-  // Apply filters and sorting
-  const filteredSteps = steps.filter(step => {
-    if (!activeFilter) return true;
-    
-    const typeMatch = !activeFilter.types || activeFilter.types.length === 0 || 
-                      activeFilter.types.includes(step.type);
-    
-    const statusMatch = !activeFilter.status || activeFilter.status.length === 0 || 
-                        activeFilter.status.includes(step.status);
-    
-    return typeMatch && statusMatch;
-  });
-
-  // Sort steps
-  const sortedSteps = [...filteredSteps].sort((a, b) => {
-    if (activeSortOrder === 'asc') {
-      return a.timestamp.getTime() - b.timestamp.getTime();
-    } else {
+  // Always use 'desc' (newest first) sort order
+  const sortOrder = 'desc';
+  
+  // Sort steps with newest first (desc order)
+  const sortedSteps = useMemo(() => {
+    return [...steps].sort((a, b) => {
       return b.timestamp.getTime() - a.timestamp.getTime();
-    }
-  });
-
-  // Toggle sort order
-  const toggleSortOrder = () => {
-    setActiveSortOrder(prevOrder => prevOrder === 'asc' ? 'desc' : 'asc');
-  };
-
-  // Filter by type
-  const filterTypes = [
-    'all',
-    'tool-execution',
-    'thinking',
-    'planning',
-    'implementation',
-    'user-input'
-  ];
-
-  const handleFilterChange = (type: string) => {
-    if (type === 'all') {
-      setActiveFilter({
-        ...activeFilter,
-        types: []
-      });
-    } else {
-      setActiveFilter({
-        ...activeFilter,
-        types: [type]
-      });
-    }
-  };
+    });
+  }, [steps]);
 
   return (
-    <div className="w-full border border-border rounded-md bg-background">
-      <div className="p-3 border-b border-border">
-        <div className="flex justify-between items-center mb-2">
-          <h3 className="font-medium">Timeline Feed</h3>
-          <button 
-            onClick={toggleSortOrder}
-            className="text-xs bg-secondary hover:bg-secondary/80 text-secondary-foreground px-2 py-1 rounded"
-          >
-            {activeSortOrder === 'asc' ? '⬆️ Oldest first' : '⬇️ Newest first'}
-          </button>
-        </div>
-        
-        <div className="flex gap-2 overflow-x-auto pb-2 text-xs">
-          {filterTypes.map(type => (
-            <button
-              key={type}
-              onClick={() => handleFilterChange(type)}
-              className={`px-2 py-1 rounded whitespace-nowrap ${
-                type === 'all' && (!activeFilter?.types || activeFilter.types.length === 0) || 
-                activeFilter?.types?.includes(type)
-                  ? 'bg-primary text-primary-foreground'
-                  : 'bg-secondary/50 text-secondary-foreground hover:bg-secondary/80'
-              }`}
-            >
-              {type === 'all' ? 'All types' : type}
-            </button>
-          ))}
-        </div>
+    <div className="w-full rounded-md bg-background">
+      <div 
+        className="p-4 space-y-5 overflow-auto" 
+        style={{ maxHeight: maxHeight || undefined }}
+      >
+        {sortedSteps.length > 0 ? (
+          sortedSteps.map((step) => (
+            <TimelineStep key={step.id} step={step} />
+          ))
+        ) : (
+          <div className="text-center text-muted-foreground py-12 border border-dashed border-border rounded-md">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 mx-auto mb-2 text-muted-foreground/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <p>No steps to display</p>
+          </div>
+        )}
       </div>
-      
-      <ScrollArea className="h-full" style={{ maxHeight }}>
-        <div className="p-3">
-          {sortedSteps.length > 0 ? (
-            sortedSteps.map((step) => (
-              <TimelineStep key={step.id} step={step} />
-            ))
-          ) : (
-            <div className="text-center text-muted-foreground py-8">
-              No steps to display
-            </div>
-          )}
-        </div>
-      </ScrollArea>
     </div>
   );
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/common/src/components/TimelineStep.tsx b/frontend/common/src/components/TimelineStep.tsx
index 52522fa..45df5d8 100644
--- a/frontend/common/src/components/TimelineStep.tsx
+++ b/frontend/common/src/components/TimelineStep.tsx
@@ -47,34 +47,47 @@ export const TimelineStep: React.FC<TimelineStepProps> = ({ step }) => {
   };
 
   return (
-    <Collapsible className="w-full mb-4 border border-border rounded-md overflow-hidden transition-all duration-200">
-      <CollapsibleTrigger className="w-full flex items-center justify-between p-3 text-left hover:bg-accent/50 cursor-pointer">
-        <div className="flex items-center">
-          <div className={`w-3 h-3 rounded-full ${getStatusColor(step.status)} mr-3`} />
-          <div className="mr-2">{getTypeIcon(step.type)}</div>
+    <Collapsible className="w-full mb-5 border border-border rounded-md overflow-hidden shadow-sm hover:shadow-md transition-all duration-200">
+      <CollapsibleTrigger className="w-full flex items-center justify-between p-4 text-left hover:bg-accent/30 cursor-pointer group">
+        <div className="flex items-center space-x-3">
+          <div className={`w-3 h-3 rounded-full ${getStatusColor(step.status)} ring-1 ring-ring/20`} />
+          <div className="text-lg group-hover:scale-110 transition-transform">{getTypeIcon(step.type)}</div>
           <div>
-            <div className="font-medium">{step.title}</div>
-            <div className="text-sm text-muted-foreground truncate max-w-xs">
+            <div className="font-medium text-foreground">{step.title}</div>
+            <div className="text-sm text-muted-foreground truncate max-w-md">
               {step.type === 'tool-execution' ? 'Run tool' : step.content.substring(0, 60)}
               {step.content.length > 60 ? '...' : ''}
             </div>
           </div>
         </div>
         <div className="text-xs text-muted-foreground flex flex-col items-end">
-          <span>{formatTime(step.timestamp)}</span>
+          <span className="font-medium">{formatTime(step.timestamp)}</span>
           {step.duration && (
-            <span className="mt-1">{(step.duration / 1000).toFixed(1)}s</span>
+            <span className="mt-1 px-2 py-0.5 bg-secondary/50 rounded-full">
+              {(step.duration / 1000).toFixed(1)}s
+            </span>
           )}
         </div>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="p-4 bg-card border-t border-border">
-          <div className="text-sm whitespace-pre-wrap">
+        <div className="p-5 bg-card/50 border-t border-border">
+          <div className="text-sm whitespace-pre-wrap text-foreground leading-relaxed">
             {step.content}
           </div>
           {step.duration && (
-            <div className="mt-3 pt-3 border-t border-border">
-              <div className="text-xs text-muted-foreground">
+            <div className="mt-4 pt-3 border-t border-border/50">
+              <div className="text-xs text-muted-foreground flex items-center">
+                <svg 
+                  xmlns="http://www.w3.org/2000/svg" 
+                  className="h-3.5 w-3.5 mr-1" 
+                  fill="none" 
+                  viewBox="0 0 24 24" 
+                  stroke="currentColor" 
+                  strokeWidth={2}
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polyline points="12 6 12 12 16 14" />
+                </svg>
                 Duration: {(step.duration / 1000).toFixed(1)} seconds
               </div>
             </div>
diff --git a/frontend/common/src/components/ui/sheet.tsx b/frontend/common/src/components/ui/sheet.tsx
index e8b5a68..41ef9a9 100644
--- a/frontend/common/src/components/ui/sheet.tsx
+++ b/frontend/common/src/components/ui/sheet.tsx
@@ -19,7 +19,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-70 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-70 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {
diff --git a/frontend/web/src/components/Layout.tsx b/frontend/web/src/components/Layout.tsx
new file mode 100644
index 0000000..a3b7eee
--- /dev/null
+++ b/frontend/web/src/components/Layout.tsx
@@ -0,0 +1,99 @@
+import React, { ReactNode } from 'react';
+
+interface LayoutProps {
+  header: ReactNode;
+  sidebar?: ReactNode;
+  drawer?: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Layout component using CSS Grid with named areas
+ * This component creates a responsive layout with:
+ * - Sticky header at the top (z-index 30)
+ * - Sidebar on desktop (hidden on mobile)
+ * - Main content area with proper positioning
+ */
+export const Layout: React.FC<LayoutProps> = ({ header, sidebar, drawer, children }) => {
+  return (
+    <>
+      <style>{`
+        .layout-grid {
+          display: grid;
+          min-height: 100vh;
+          grid-template-areas:
+            "header"
+            "main";
+          grid-template-rows: 64px 1fr;
+          grid-template-columns: 1fr;
+        }
+        
+        @media (min-width: 768px) {
+          .layout-grid {
+            grid-template-areas:
+              "header header"
+              "sidebar main";
+            grid-template-columns: 250px 1fr;
+            grid-template-rows: 64px 1fr;
+          }
+        }
+        
+        @media (min-width: 1024px) {
+          .layout-grid {
+            grid-template-columns: 300px 1fr;
+          }
+        }
+        
+        .layout-header {
+          grid-area: header;
+          position: sticky;
+          top: 0;
+          z-index: 30;
+          height: 64px;
+          display: flex;
+          align-items: center;
+        }
+        
+        .layout-sidebar {
+          grid-area: sidebar;
+          position: sticky;
+          top: 64px;
+          height: calc(100vh - 64px);
+          overflow-y: auto;
+          z-index: 20;
+          display: none;
+        }
+        
+        @media (min-width: 768px) {
+          .layout-sidebar {
+            display: block;
+          }
+        }
+        
+        .layout-main {
+          grid-area: main;
+          overflow-y: auto;
+        }
+      `}</style>
+      
+      <div className="layout-grid bg-background text-foreground">
+        <header className="layout-header bg-background border-b border-border">
+          {header}
+        </header>
+        
+        {sidebar && (
+          <aside className="layout-sidebar bg-background border-r border-border">
+            {sidebar}
+          </aside>
+        )}
+        
+        {/* Mobile drawer - rendered outside grid */}
+        {drawer}
+        
+        <main className="layout-main p-4">
+          {children}
+        </main>
+      </div>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/frontend/web/src/index.tsx b/frontend/web/src/index.tsx
index f60a342..e482dc7 100644
--- a/frontend/web/src/index.tsx
+++ b/frontend/web/src/index.tsx
@@ -8,6 +8,7 @@ import {
   getSampleAgentSessions,
   getSampleAgentSteps
 } from '@ra-aid/common';
+import { Layout } from './components/Layout';
 // The CSS import happens through the common package's index.ts
 
 // Theme management helper function
@@ -85,122 +86,125 @@ const App = () => {
     localStorage.setItem('theme', newIsDark ? 'dark' : 'light');
   };
   
-  return (
-    <div className="min-h-screen bg-background text-foreground flex flex-col">
-      {/* Header */}
-      <header className="border-b border-border py-4 px-4 sticky top-0 z-10 bg-background">
-        <div className="flex justify-between items-center">
-          <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 inline-block text-transparent bg-clip-text">
-            RA-Aid
-          </h1>
-          
-          <div className="flex items-center gap-2">
-            {/* Theme toggle button */}
-            <Button 
-              variant="ghost" 
-              size="icon" 
-              onClick={toggleTheme}
-              aria-label={isDarkTheme ? "Switch to light mode" : "Switch to dark mode"}
-              className="mr-2"
+  // Render header content
+  const headerContent = (
+    <div className="flex justify-between items-center h-full px-4">
+      <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 inline-block text-transparent bg-clip-text">
+        RA-Aid
+      </h1>
+      
+      <div className="flex items-center gap-2">
+        {/* Theme toggle button */}
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          onClick={toggleTheme}
+          aria-label={isDarkTheme ? "Switch to light mode" : "Switch to dark mode"}
+          className="mr-2"
+        >
+          {isDarkTheme ? (
+            // Sun icon for light mode toggle
+            <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"
             >
-              {isDarkTheme ? (
-                // Sun icon for light mode toggle
-                <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"
-                >
-                  <circle cx="12" cy="12" r="5" />
-                  <line x1="12" y1="1" x2="12" y2="3" />
-                  <line x1="12" y1="21" x2="12" y2="23" />
-                  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-                  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-                  <line x1="1" y1="12" x2="3" y2="12" />
-                  <line x1="21" y1="12" x2="23" y2="12" />
-                  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-                  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-                </svg>
-              ) : (
-                // Moon icon for dark mode toggle
-                <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"
-                >
-                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-                </svg>
-              )}
-            </Button>
-            
-            {/* Mobile drawer toggle - show only on small screens */}
-            <div className="md:hidden">
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                onClick={() => setIsDrawerOpen(true)}
-                aria-label="Open menu"
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </header>
-      
-      {/* Main content */}
-      <div className="flex flex-1 overflow-hidden">
-        {/* Desktop sidebar - hidden on mobile */}
-        <SessionSidebar 
-          sessions={sessions}
-          currentSessionId={selectedSessionId || undefined}
-          onSelectSession={handleSessionSelect}
-          className="shrink-0"
-        />
-        
-        {/* Mobile drawer */}
-        <SessionDrawer 
-          sessions={sessions}
-          currentSessionId={selectedSessionId || undefined}
-          onSelectSession={handleSessionSelect}
-        />
-        
-        {/* Main content area */}
-        <main className="flex-1 overflow-auto p-4">
-          {selectedSessionId ? (
-            <>
-              <h2 className="text-xl font-semibold mb-4">
-                Session: {sessions.find(s => s.id === selectedSessionId)?.name || 'Unknown'}
-              </h2>
-              <TimelineFeed 
-                steps={selectedSessionSteps} 
-                maxHeight="calc(100vh - 14rem)"
-              />
-            </>
+              <circle cx="12" cy="12" r="5" />
+              <line x1="12" y1="1" x2="12" y2="3" />
+              <line x1="12" y1="21" x2="12" y2="23" />
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+              <line x1="1" y1="12" x2="3" y2="12" />
+              <line x1="21" y1="12" x2="23" y2="12" />
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+            </svg>
           ) : (
-            <div className="flex items-center justify-center h-full">
-              <p className="text-muted-foreground">Select a session to view details</p>
-            </div>
+            // Moon icon for dark mode toggle
+            <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"
+            >
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+            </svg>
           )}
-        </main>
+        </Button>
+        
+        {/* Mobile drawer toggle - show only on small screens */}
+        <div className="md:hidden">
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            onClick={() => setIsDrawerOpen(true)}
+            aria-label="Open menu"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+          </Button>
+        </div>
       </div>
-      
-      <footer className="border-t border-border py-4 px-4 text-center text-muted-foreground text-sm">
-        <p>Built with shadcn/ui components from the RA-Aid common package</p>
-      </footer>
     </div>
   );
+
+  // Render sidebar content
+  const sidebarContent = (
+    <SessionSidebar 
+      sessions={sessions}
+      currentSessionId={selectedSessionId || undefined}
+      onSelectSession={handleSessionSelect}
+    />
+  );
+
+  // Render drawer
+  const drawerContent = (
+    <SessionDrawer 
+      sessions={sessions}
+      currentSessionId={selectedSessionId || undefined}
+      onSelectSession={handleSessionSelect}
+      isOpen={isDrawerOpen}
+      onClose={() => setIsDrawerOpen(false)}
+    />
+  );
+
+  // Render main content
+  const mainContent = (
+    selectedSessionId ? (
+      <>
+        <h2 className="text-xl font-semibold mb-4">
+          Session: {sessions.find(s => s.id === selectedSessionId)?.name || 'Unknown'}
+        </h2>
+        <TimelineFeed 
+          steps={selectedSessionSteps}
+        />
+      </>
+    ) : (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-muted-foreground">Select a session to view details</p>
+      </div>
+    )
+  );
+  
+  return (
+    <Layout
+      header={headerContent}
+      sidebar={sidebarContent}
+      drawer={drawerContent}
+    >
+      {mainContent}
+    </Layout>
+  );
 };
 
 // Initialize theme before rendering the app