diff --git a/frontend/common/dist/components/ui/index.d.ts b/frontend/common/dist/components/ui/index.d.ts index 744def9..89b9725 100644 --- a/frontend/common/dist/components/ui/index.d.ts +++ b/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'; diff --git a/frontend/common/dist/components/ui/index.js b/frontend/common/dist/components/ui/index.js index 744def9..89b9725 100644 --- a/frontend/common/dist/components/ui/index.js +++ b/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'; diff --git a/frontend/common/dist/index.d.ts b/frontend/common/dist/index.d.ts index debff1f..06d95ab 100644 --- a/frontend/common/dist/index.d.ts +++ b/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'; diff --git a/frontend/common/dist/index.js b/frontend/common/dist/index.js index 6a1ebf0..6ad90fa 100644 --- a/frontend/common/dist/index.js +++ b/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'; diff --git a/frontend/common/dist/styles/global.css b/frontend/common/dist/styles/global.css index 7e46c9e..2813e8d 100644 --- a/frontend/common/dist/styles/global.css +++ b/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; + } } \ No newline at end of file diff --git a/frontend/common/src/components/SessionDrawer.tsx b/frontend/common/src/components/SessionDrawer.tsx index ad3596e..1343a63 100644 --- a/frontend/common/src/components/SessionDrawer.tsx +++ b/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; diff --git a/frontend/common/src/components/SessionSidebar.tsx b/frontend/common/src/components/SessionSidebar.tsx index 9724dee..0b52e8c 100644 --- a/frontend/common/src/components/SessionSidebar.tsx +++ b/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; diff --git a/frontend/common/src/components/TimelineFeed.tsx b/frontend/common/src/components/TimelineFeed.tsx index b6a0de0..9ed22fb 100644 --- a/frontend/common/src/components/TimelineFeed.tsx +++ b/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[]; diff --git a/frontend/common/src/components/TimelineStep.tsx b/frontend/common/src/components/TimelineStep.tsx index 45df5d8..d4a4754 100644 --- a/frontend/common/src/components/TimelineStep.tsx +++ b/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; diff --git a/frontend/common/src/components/ui/index.ts b/frontend/common/src/components/ui/index.ts index b84f12d..1b2cc61 100644 --- a/frontend/common/src/components/ui/index.ts +++ b/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'; \ No newline at end of file diff --git a/frontend/common/src/components/ui/layout.tsx b/frontend/common/src/components/ui/layout.tsx new file mode 100644 index 0000000..b2da5be --- /dev/null +++ b/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 = ({ header, sidebar, drawer, children }) => { + return ( +
+ {/* Header - always visible, spans full width */} +
+ {header} +
+ + {/* Sidebar - hidden on mobile, visible on tablet/desktop */} + {sidebar && ( + + )} + + {/* Main content area */} +
+ {children} +
+ + {/* Mobile drawer - rendered outside grid */} + {drawer} +
+ ); +}; \ No newline at end of file diff --git a/frontend/common/src/index.ts b/frontend/common/src/index.ts index 56ce87c..6a63b0c 100644 --- a/frontend/common/src/index.ts +++ b/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'; \ No newline at end of file diff --git a/frontend/common/src/utils/sample-data.ts b/frontend/common/src/utils/sample-data.ts index c4c2fc8..58c6dbc 100644 --- a/frontend/common/src/utils/sample-data.ts +++ b/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 diff --git a/frontend/common/src/utils/types.ts b/frontend/common/src/utils/types.ts new file mode 100644 index 0000000..86f12f8 --- /dev/null +++ b/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[]; +} \ No newline at end of file diff --git a/frontend/web/src/components/Layout.tsx b/frontend/web/src/components/Layout.tsx deleted file mode 100644 index a3b7eee..0000000 --- a/frontend/web/src/components/Layout.tsx +++ /dev/null @@ -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 = ({ header, sidebar, drawer, children }) => { - return ( - <> - - -
-
- {header} -
- - {sidebar && ( - - )} - - {/* Mobile drawer - rendered outside grid */} - {drawer} - -
- {children} -
-
- - ); -}; \ No newline at end of file diff --git a/frontend/web/src/index.tsx b/frontend/web/src/index.tsx index e482dc7..f46832b 100644 --- a/frontend/web/src/index.tsx +++ b/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