ui styling

frontend/common/dist/components/ui/index.d.ts

@@ -2,6 +2,7 @@ export * from './button';
 export * from './card';
 export * from './collapsible';
 export * from './input';
+export * from './layout';
 export * from './sheet';
 export * from './switch';
 export * from './scroll-area';

frontend/common/dist/components/ui/index.js

@@ -2,6 +2,7 @@ export * from './button';
 export * from './card';
 export * from './collapsible';
 export * from './input';
+export * from './layout';
 export * from './sheet';
 export * from './switch';
 export * from './scroll-area';

frontend/common/dist/index.d.ts

@@ -1,4 +1,5 @@
 import './styles/global.css';
+export * from './utils/types';
 export * from './utils';
 export * from './components/ui';
 export * from './components/TimelineStep';
@@ -6,4 +7,4 @@ export * from './components/TimelineFeed';
 export * from './components/SessionDrawer';
 export * from './components/SessionSidebar';
 export declare const hello: () => void;
-export { getSampleAgentSteps, getSampleAgentSessions, type AgentStep, type AgentSession } from './utils/sample-data';
+export { getSampleAgentSteps, getSampleAgentSessions } from './utils/sample-data';

frontend/common/dist/index.js

@@ -1,6 +1,8 @@
 // Entry point for @ra-aid/common package
 import './styles/global.css';
-// Export utility functions (excluding sample data to avoid circular references)
+// Export types first to avoid circular references
+export * from './utils/types';
+// Export utility functions
 export * from './utils';
 // Export all UI components
 export * from './components/ui';
@@ -14,5 +16,5 @@ export * from './components/SessionSidebar';
 export const hello = () => {
     console.log("Hello from @ra-aid/common");
 };
-// Directly export sample data functions and types to avoid circular references
+// Directly export sample data functions
 export { getSampleAgentSteps, getSampleAgentSessions } from './utils/sample-data';

frontend/common/dist/styles/global.css

@@ -585,6 +585,9 @@ video {
 .pointer-events-none {
   pointer-events: none;
 }
+.visible {
+  visibility: visible;
+}
 .fixed {
   position: fixed;
 }
@@ -594,6 +597,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -620,14 +626,26 @@ video {
 .top-0 {
   top: 0px;
 }
+.top-16 {
+  top: 4rem;
+}
 .top-4 {
   top: 1rem;
 }
-.z-40 {
-  z-index: 40;
+.z-20 {
+  z-index: 20;
 }
-.z-50 {
-  z-index: 50;
+.z-30 {
+  z-index: 30;
+}
+.col-span-full {
+  grid-column: 1 / -1;
+}
+.col-start-1 {
+  grid-column-start: 1;
+}
+.row-start-2 {
+  grid-row-start: 2;
 }
 .mx-auto {
   margin-left: auto;
@@ -666,9 +684,18 @@ video {
 .inline-flex {
   display: inline-flex;
 }
+.grid {
+  display: grid;
+}
+.hidden {
+  display: none;
+}
 .h-10 {
   height: 2.5rem;
 }
+.h-16 {
+  height: 4rem;
+}
 .h-2\.5 {
   height: 0.625rem;
 }
@@ -690,12 +717,18 @@ video {
 .h-9 {
   height: 2.25rem;
 }
-.h-\[calc\(100vh-5rem\)\] {
-  height: calc(100vh - 5rem);
+.h-\[calc\(100vh-64px\)\] {
+  height: calc(100vh - 64px);
+}
+.h-\[calc\(100vh-9rem\)\] {
+  height: calc(100vh - 9rem);
 }
 .h-full {
   height: 100%;
 }
+.min-h-screen {
+  min-height: 100vh;
+}
 .w-2\.5 {
   width: 0.625rem;
 }
@@ -749,6 +782,12 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.grid-rows-\[64px_1fr\] {
+  grid-template-rows: 64px 1fr;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -804,6 +843,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-y-auto {
+  overflow-y: auto;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -919,6 +961,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
 }
+.p-2 {
+  padding: 0.5rem;
+}
 .p-3 {
   padding: 0.75rem;
 }
@@ -1363,4 +1408,24 @@ video {
   .sm\:text-left {
     text-align: left;
   }
+}
+@media (min-width: 768px) {
+
+  .md\:col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:grid-cols-\[250px_1fr\] {
+    grid-template-columns: 250px 1fr;
+  }
+}
+@media (min-width: 1024px) {
+
+  .lg\:grid-cols-\[300px_1fr\] {
+    grid-template-columns: 300px 1fr;
+  }
 }

frontend/common/src/components/SessionDrawer.tsx

@@ -7,7 +7,8 @@ import {
   SheetClose 
 } from './ui/sheet';
 import { ScrollArea } from './ui/scroll-area';
-import { AgentSession, getSampleAgentSessions } from '../utils/sample-data';
+import { AgentSession } from '../utils/types';
+import { getSampleAgentSessions } from '../utils/sample-data';
 
 interface SessionDrawerProps {
   onSelectSession?: (sessionId: string) => void;

frontend/common/src/components/SessionSidebar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollArea } from './ui/scroll-area';
-import { AgentSession, getSampleAgentSessions } from '../utils/sample-data';
+import { AgentSession } from '../utils/types';
+import { getSampleAgentSessions } from '../utils/sample-data';
 
 interface SessionSidebarProps {
   onSelectSession?: (sessionId: string) => void;

frontend/common/src/components/TimelineFeed.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { TimelineStep } from './TimelineStep';
-import { AgentStep } from '../utils/sample-data';
+import { AgentStep } from '../utils/types';
 
 interface TimelineFeedProps {
   steps: AgentStep[];

frontend/common/src/components/TimelineStep.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
-import { AgentStep } from '../utils/sample-data';
+import { AgentStep } from '../utils/types';
 
 interface TimelineStepProps {
   step: AgentStep;

frontend/common/src/components/ui/index.ts

@@ -2,6 +2,7 @@ export * from './button';
 export * from './card';
 export * from './collapsible';
 export * from './input';
+export * from './layout';
 export * from './sheet';
 export * from './switch';
 export * from './scroll-area';

frontend/common/src/components/ui/layout.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/**
+ * Layout component using Tailwind Grid utilities
+ * 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 interface LayoutProps {
+  header: React.ReactNode;
+  sidebar?: React.ReactNode;
+  drawer?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const Layout: React.FC<LayoutProps> = ({ header, sidebar, drawer, children }) => {
+  return (
+    <div className="grid min-h-screen grid-cols-1 grid-rows-[64px_1fr] md:grid-cols-[250px_1fr] lg:grid-cols-[300px_1fr] bg-background text-foreground">
+      {/* Header - always visible, spans full width */}
+      <header className="sticky top-0 z-30 h-16 flex items-center bg-background border-b border-border col-span-full">
+        {header}
+      </header>
+      
+      {/* Sidebar - hidden on mobile, visible on tablet/desktop */}
+      {sidebar && (
+        <aside className="hidden md:block sticky top-16 h-[calc(100vh-64px)] overflow-y-auto z-20 bg-background border-r border-border row-start-2 col-start-1">
+          {sidebar}
+        </aside>
+      )}
+      
+      {/* Main content area */}
+      <main className="overflow-y-auto p-4 row-start-2 col-start-1 md:col-start-2">
+        {children}
+      </main>
+      
+      {/* Mobile drawer - rendered outside grid */}
+      {drawer}
+    </div>
+  );
+};

frontend/common/src/index.ts

@@ -1,7 +1,10 @@
 // Entry point for @ra-aid/common package
 import './styles/global.css';
 
-// Export utility functions (excluding sample data to avoid circular references)
+// Export types first to avoid circular references
+export * from './utils/types';
+
+// Export utility functions
 export * from './utils';
 
 // Export all UI components
@@ -20,10 +23,8 @@ export const hello = (): void => {
   console.log("Hello from @ra-aid/common");
 };
 
-// Directly export sample data functions and types to avoid circular references
+// Directly export sample data functions
 export { 
   getSampleAgentSteps, 
-  getSampleAgentSessions,
-  type AgentStep,
-  type AgentSession 
+  getSampleAgentSessions
 } from './utils/sample-data';

frontend/common/src/utils/sample-data.ts

@@ -2,30 +2,7 @@
  * Sample data utility for agent UI components demonstration
  */
 
-/**
- * Represents a single step in the agent process
- */
-export interface AgentStep {
-  id: string;
-  timestamp: Date;
-  status: 'completed' | 'in-progress' | 'error' | 'pending';
-  type: 'tool-execution' | 'thinking' | 'planning' | 'implementation' | 'user-input';
-  title: string;
-  content: string;
-  duration?: number; // in milliseconds
-}
-
-/**
- * Represents a session with multiple steps
- */
-export interface AgentSession {
-  id: string;
-  name: string;
-  created: Date;
-  updated: Date;
-  status: 'active' | 'completed' | 'error';
-  steps: AgentStep[];
-}
+import { AgentStep, AgentSession } from './types';
 
 /**
  * Returns an array of sample agent steps

frontend/common/src/utils/types.ts

@@ -0,0 +1,28 @@
+/**
+ * Common types for agent UI components
+ */
+
+/**
+ * Represents a single step in the agent process
+ */
+export interface AgentStep {
+  id: string;
+  timestamp: Date;
+  status: 'completed' | 'in-progress' | 'error' | 'pending';
+  type: 'tool-execution' | 'thinking' | 'planning' | 'implementation' | 'user-input';
+  title: string;
+  content: string;
+  duration?: number; // in milliseconds
+}
+
+/**
+ * Represents a session with multiple steps
+ */
+export interface AgentSession {
+  id: string;
+  name: string;
+  created: Date;
+  updated: Date;
+  status: 'active' | 'completed' | 'error';
+  steps: AgentStep[];
+}

frontend/web/src/components/Layout.tsx

@@ -1,99 +0,0 @@
-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>
-    </>
-  );
-};

frontend/web/src/index.tsx

@@ -2,13 +2,13 @@ import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { 
   Button,
+  Layout,
   SessionDrawer,
   SessionSidebar,
   TimelineFeed,
   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