ai-design-system 0.1.67 → 0.1.69

package/components/{composites → blocks}/EvalSessionDetailsPanel/EvalSessionDetailsPanel.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { EvalSessionDetailsPanel } from "./EvalSessionDetailsPanel"
 
 const meta = {
-  title: "Composites/EvalSessionDetailsPanel",
+  title: "Blocks/EvalSessionDetailsPanel",
   component: EvalSessionDetailsPanel,
   parameters: {
     layout: "padded",

package/components/{composites → blocks}/EvalSessionDetailsPanel/EvalSessionDetailsPanel.tsx

@@ -18,12 +18,14 @@ export interface EvalSessionDetails {
 export interface EvalSessionDetailsPanelProps {
   sessionDetails: EvalSessionDetails
   activeTab: string
+  actionHandlers?: { onTriggerEvaluation?: () => void }
+  workflowContent?: React.ReactNode
 }
 
-export const EvalTriggerButton = ({ onClick }: { onClick: () => void }) => (
-  <Button onClick={onClick} size="sm">
-    <Icon name="Play" className="w-4 h-4 mr-2" />
-    Trigger Evaluation
+export const EvalTriggerButton = ({ onClick, loading }: { onClick: () => void; loading?: boolean }) => (
+  <Button onClick={onClick} variant="default" size="sm" className="h-8" disabled={loading}>
+    <Icon name={loading ? 'loader-2' : 'play'} className={`w-4 h-4 mr-2${loading ? ' animate-spin' : ''}`} />
+    {loading ? 'Evaluating...' : 'Trigger'}
   </Button>
 )
 
@@ -42,7 +44,7 @@ const goldenEvalTableSchema = dynamicTableSchema.parse({
 })
 
 export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
-  ({ sessionDetails, activeTab }) => {
+  ({ sessionDetails, activeTab, actionHandlers, workflowContent }) => {
     return (
       <div className="flex flex-col h-full bg-background">
         <Tabs value={activeTab} className="flex-1 flex flex-col min-h-0">
@@ -79,6 +81,14 @@ export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
                 </div>
               </ScrollArea>
             </TabsContent>
+
+            <TabsContent value="workflow" className="absolute inset-0 m-0 p-0">
+              {workflowContent || (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  No workflow data available.
+                </div>
+              )}
+            </TabsContent>
           </div>
         </Tabs>
       </div>

package/components/blocks/SectionLayout/interfaces.ts

@@ -11,6 +11,7 @@ export interface SectionLayoutSection {
   collapsible?: boolean;
   collapsedSize?: number;
   header?: AppHeaderProps;
+  variant?: "default" | "ghost";
 }
 
 export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"> {

package/components/blocks/WorkflowCanvas/interfaces.ts

@@ -2,8 +2,9 @@ import type { Connection, EdgeChange, Node, NodeChange, OnConnectStartParams } f
 import type React from "react";
 import type { StateNodeData } from "@/components/composites/StateNode";
 import type { TransitionNodeData } from "@/components/composites/TransitionNode";
+import type { TriggerNodeData } from "@/components/composites/TriggerNode";
 
-export type WorkflowNodeData = StateNodeData | TransitionNodeData;
+export type WorkflowNodeData = StateNodeData | TransitionNodeData | TriggerNodeData;
 export type WorkflowNode = Node<WorkflowNodeData>;
 
 export interface WorkflowEdge {

package/components/blocks/index.ts

@@ -27,3 +27,7 @@ export type { FormReportsSectionProps } from './FormReportsSection'
 
 export { InboxPanel } from './InboxPanel'
 export type { InboxPanelProps } from './InboxPanel'
+
+// EvalSessionDetailsPanel Block
+export { EvalSessionDetailsPanel, EvalTriggerButton } from './EvalSessionDetailsPanel'
+export type { EvalSessionDetailsPanelProps, EvalSessionDetails } from './EvalSessionDetailsPanel'

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -10,6 +10,7 @@ export interface AdjustableLayoutSection {
   maxSize?: number // maximum percentage
   resizable?: boolean // default true for >1 sections
   className?: string
+  variant?: "default" | "ghost"
 }
 
 export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"div"> {
@@ -66,6 +67,16 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
 
     const [sizes, setSizes] = React.useState<number[]>(defaultSizes)
 
+    // Sync sizes if the number of sections changes (e.g. data loads and new section appears)
+    React.useEffect(() => {
+      setSizes((prevSizes) => {
+        if (prevSizes.length !== sections.length) {
+          return defaultSizes;
+        }
+        return prevSizes;
+      });
+    }, [sections.length, defaultSizes])
+
     // After hydration, overwrite with persisted sizes if available
     React.useEffect(() => {
       if (!storageKey) return
@@ -208,7 +219,8 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
         <React.Fragment key={section.id}>
           <div
             className={cn(
-              "min-h-0 overflow-hidden bg-card border border-border rounded-xl",
+              "min-h-0 overflow-hidden",
+              (section.variant ?? "default") === "default" && "bg-card border border-border rounded-xl",
               section.className
             )}
             style={{

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -506,10 +506,12 @@ export function EnhancedDataTable({
                 ))}
             </DropdownMenuContent>
           </DropdownMenu>
-          <Button variant="outline" size="sm" className="h-8" onClick={onCreateClick}>
-            <Icon name="plus" size="sm" />
-            <span>{createButtonLabel}</span>
-          </Button>
+          {onCreateClick && (
+            <Button variant="outline" size="sm" className="h-8" onClick={onCreateClick}>
+              <Icon name="plus" size="sm" />
+              <span>{createButtonLabel}</span>
+            </Button>
+          )}
           {rightActions}
         </div>
       </div>

package/components/composites/ProjectSwitcher/ProjectSwitcher.tsx

@@ -34,7 +34,7 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
   ({ projects, selectedProjectId, onSelectProject, onCreateProject, className }) => {
     const [open, setOpen] = React.useState(false)
 
-    const selectedProject = projects.find((p) => p.id === selectedProjectId)
+    const selectedProject = projects.find((p) => String(p.id) === String(selectedProjectId))
     const displayLabel = selectedProject ? selectedProject.name : "Select Project..."
 
     const defaultValue = selectedProject ? `${selectedProject.name}-${selectedProject.id}` : undefined
@@ -86,7 +86,7 @@ export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
                       </div>
                       <Icon name="check"
                         className={`h-4 w-4 ${
-                          selectedProjectId === project.id ? "opacity-100" : "opacity-0"
+                          String(selectedProjectId) === String(project.id) ? "opacity-100" : "opacity-0"
                         }`}
                       />
                     </CommandItem>

package/components/composites/index.ts

@@ -206,6 +206,4 @@ export type { SessionHeaderProps, ChatSessionInfo } from './SessionHeader'
 export { AppBreadcrumb } from './AppBreadcrumb'
 export type { AppBreadcrumbProps, BreadcrumbItemData } from './AppBreadcrumb'
 
-// EvalSessionDetailsPanel Composite
-export { EvalSessionDetailsPanel, EvalTriggerButton } from './EvalSessionDetailsPanel'
-export type { EvalSessionDetailsPanelProps, EvalSessionDetails } from './EvalSessionDetailsPanel'
+

package/components/features/EvalDashboardFeature/EvalDashboardFeature.behaviors.stories.tsx

@@ -1,7 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
 import { expect, within, userEvent, fn } from "@storybook/test"
 import { EvalDashboardFeature } from "./EvalDashboardFeature"
-import { evalDashboardFeatureStateMock } from "./EvalDashboardFeature.mocks"
+import { evalDashboardFeatureStateMock, workflowMockNodes, workflowMockEdges } from "./EvalDashboardFeature.mocks"
+import { NodeEditor } from "@/components/features/NodeEditor"
+
+const workflowMock = (
+  <NodeEditor nodes={workflowMockNodes} edges={workflowMockEdges} showMinimap={false} interactive={false} />
+)
 
 const meta = {
   title: "Features/EvalDashboardFeature/Behaviors",
@@ -25,16 +31,17 @@ export const Interactive: Story = {
     actionHandlers: {
       onTriggerEvaluation: fn(),
     },
+    workflowContent: workflowMock,
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     
-    // Check if the tabs exist
+    // 4 tabs: Golden Evals, System Prompts, Outputs, Workflow
     const tabs = await canvas.findAllByRole("tab")
-    expect(tabs.length).toBeGreaterThan(0)
+    expect(tabs.length).toBe(4)
     
-    // Switch to Outputs tab
-    const outputsTab = canvas.getByRole("tab", { name: /Outputs/i })
-    await userEvent.click(outputsTab)
+    // Switch to Workflow tab
+    const workflowTab = canvas.getByRole("tab", { name: /Workflow/i })
+    await userEvent.click(workflowTab)
   },
 }

package/components/features/EvalDashboardFeature/EvalDashboardFeature.mocks.ts

@@ -1,4 +1,34 @@
 import type { UseEvalDashboardFeatureReturn } from "./useEvalDashboardFeature.d"
+import type { WorkflowNode, WorkflowEdge } from "@/components/blocks/WorkflowCanvas"
+
+export const workflowMockNodes: WorkflowNode[] = [
+  { id: 'trigger-1', type: 'trigger', position: { x: 100, y: 20 }, data: { label: 'Agentic Eval', type: 'trigger', status: 'idle' } },
+  { id: 'state-1', type: 'state', position: { x: 250, y: 20 }, data: { label: 'Initialize Eval', type: 'state', description: 'Parse session messages and config', status: 'idle' } },
+  { id: 'transition-1', type: 'transition', position: { x: 400, y: 20 }, data: { label: 'Parse Session', type: 'transition', status: 'idle' } },
+  { id: 'state-2', type: 'state', position: { x: 250, y: 140 }, data: { label: 'Fetch System Prompt', type: 'state', description: 'Load system prompt from session', status: 'idle' } },
+  { id: 'transition-2', type: 'transition', position: { x: 400, y: 140 }, data: { label: 'Check Config', type: 'transition', description: 'Check if multi-agent config exists', status: 'idle' } },
+  { id: 'state-2b', type: 'state', position: { x: 250, y: 260 }, data: { label: 'Fetch Config Prompt', type: 'state', description: 'Load agent config system prompt', status: 'idle' } },
+  { id: 'transition-2b', type: 'transition', position: { x: 400, y: 260 }, data: { label: 'Format Prompt', type: 'transition', description: 'Build multi-agent system prompt', status: 'idle' } },
+  { id: 'state-3', type: 'state', position: { x: 250, y: 380 }, data: { label: 'Build Messages', type: 'state', description: 'Construct LLM message payload', status: 'idle' } },
+  { id: 'transition-3', type: 'transition', position: { x: 400, y: 380 }, data: { label: 'LLM Call', type: 'transition', status: 'idle' } },
+  { id: 'state-4', type: 'state', position: { x: 250, y: 500 }, data: { label: 'Parse Eval', type: 'state', description: 'Parse LLM eval response', status: 'idle' } },
+  { id: 'transition-4', type: 'transition', position: { x: 400, y: 500 }, data: { label: 'Persist', type: 'transition', status: 'idle' } },
+  { id: 'state-5', type: 'state', position: { x: 250, y: 620 }, data: { label: 'Complete', type: 'state', description: 'Eval finished', status: 'idle', isTerminal: true } },
+]
+
+export const workflowMockEdges: WorkflowEdge[] = [
+  { id: 'e-trigger-1', source: 'trigger-1', target: 'state-1' },
+  { id: 'e-1-transition-1', source: 'state-1', target: 'transition-1' },
+  { id: 'e-transition-1-2', source: 'transition-1', target: 'state-2' },
+  { id: 'e-2-transition-2', source: 'state-2', target: 'transition-2' },
+  { id: 'e-transition-2-2b', source: 'transition-2', target: 'state-2b' },
+  { id: 'e-2b-transition-2b', source: 'state-2b', target: 'transition-2b' },
+  { id: 'e-transition-2b-3', source: 'transition-2b', target: 'state-3' },
+  { id: 'e-3-transition-3', source: 'state-3', target: 'transition-3' },
+  { id: 'e-transition-3-4', source: 'transition-3', target: 'state-4' },
+  { id: 'e-4-transition-4', source: 'state-4', target: 'transition-4' },
+  { id: 'e-transition-4-5', source: 'transition-4', target: 'state-5' },
+]
 
 export const evalDashboardFeatureStateMock: UseEvalDashboardFeatureReturn = {
   inbox: {

package/components/features/EvalDashboardFeature/EvalDashboardFeature.stories.tsx

@@ -1,7 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
 import { EvalDashboardFeature } from "./EvalDashboardFeature"
-import { evalDashboardFeatureStateMock } from "./EvalDashboardFeature.mocks"
+import { evalDashboardFeatureStateMock, workflowMockNodes, workflowMockEdges } from "./EvalDashboardFeature.mocks"
 import { useEvalDashboardFeatureMock } from "./useEvalDashboardFeature.mock"
+import { NodeEditor } from "@/components/features/NodeEditor"
+
+const workflowMock = (
+  <NodeEditor nodes={workflowMockNodes} edges={workflowMockEdges} showMinimap={false} interactive={false} />
+)
 
 const meta = {
   title: "Features/EvalDashboardFeature",
@@ -23,12 +29,13 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     ...evalDashboardFeatureStateMock,
+    workflowContent: workflowMock,
   },
 }
 
 export const WithStateManagement: Story = {
   render: () => {
     const state = useEvalDashboardFeatureMock()
-    return <EvalDashboardFeature {...state} className="h-[100dvh]" />
+    return <EvalDashboardFeature {...state} workflowContent={workflowMock} className="h-[100dvh]" />
   },
 }

package/components/features/EvalDashboardFeature/EvalDashboardFeature.tsx

@@ -2,12 +2,12 @@ import * as React from "react"
 import { InboxPanel } from "@/components/blocks/InboxPanel"
 import { SectionLayout } from "@/components/blocks/SectionLayout"
 import { DashboardChart } from "@/components/composites/DashboardChart"
-import { EvalSessionDetailsPanel, EvalTriggerButton } from "@/components/composites/EvalSessionDetailsPanel"
+import { EvalSessionDetailsPanel, EvalTriggerButton } from "@/components/blocks/EvalSessionDetailsPanel"
 import type { DashboardRow } from "@/components/composites/DataTable"
 import { cn } from "@/lib/utils"
-import type { 
-  EvalDashboardFeatureInboxState, 
-  EvalDashboardFeatureData, 
+import type {
+  EvalDashboardFeatureInboxState,
+  EvalDashboardFeatureData,
   EvalDashboardFeatureActionHandlers,
 } from "./useEvalDashboardFeature.d"
 
@@ -17,16 +17,17 @@ export interface EvalDashboardFeatureProps {
   data: EvalDashboardFeatureData | null
   actionHandlers?: EvalDashboardFeatureActionHandlers
   className?: string
+  workflowContent?: React.ReactNode
 }
 
 export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
-  ({ inbox, data, actionHandlers, className }) => {
+  ({ inbox, data, actionHandlers, className, workflowContent }) => {
     const [showInbox, setShowInbox] = React.useState(true)
     const [activeTab, setActiveTab] = React.useState("golden-evals")
 
-    const selectedSession = React.useMemo(() => 
+    const selectedSession = React.useMemo(() =>
       inbox.items.find(s => s.id === inbox.selectedItemId) || null
-    , [inbox.items, inbox.selectedItemId])
+      , [inbox.items, inbox.selectedItemId])
 
     // Calculate average score for the trend section
     const avgScore = React.useMemo(() => {
@@ -40,7 +41,6 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
         id: session.id,
         title: session.id,
         subtitle: `Score: ${session.score}/${session.total}`,
-        preview: `${session.latency} • ${session.tokens}t`,
         timestamp: new Date(session.date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
       }))
     }, [inbox.items]);
@@ -50,7 +50,7 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
       const sortedItems = [...inbox.items].sort(
         (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
       )
-      
+
       return sortedItems.map(session => ({
         date: session.date,
         // We map score to 'desktop' since DashboardChart is hardcoded for now
@@ -75,6 +75,7 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
           resizable={true}
           padded={false}
           className="h-full"
+          storageKey="eval-dashboard-outer"
           sections={[
             ...(mockChartData.length > 0 ? [{
               id: "graph",
@@ -104,8 +105,9 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
             }] : []),
             {
               id: "content",
-              defaultSize: mockChartData.length > 0 ? 65 : 100,
+              defaultSize: mockChartData.length > 0 ? 80 : 100,
               minSize: 40,
+              variant: "ghost",
               content: (
                 <div className="h-full w-full min-h-0">
                   <SectionLayout
@@ -143,7 +145,8 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
                           tabs: [
                             { label: "Golden Evals", value: "golden-evals" },
                             { label: "System Prompts", value: "prompts" },
-                            { label: "Outputs", value: "outputs" }
+                            { label: "Outputs", value: "outputs" },
+                            ...(workflowContent ? [{ label: "Workflow", value: "workflow" }] : []),
                           ],
                           defaultTab: activeTab,
                           onTabChange: setActiveTab,
@@ -153,13 +156,15 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
                             onClick: () => setShowInbox(!showInbox)
                           },
                           actions: actionHandlers?.onTriggerEvaluation ? (
-                            <EvalTriggerButton onClick={actionHandlers.onTriggerEvaluation} />
-                          ) : undefined
+                            <EvalTriggerButton onClick={actionHandlers.onTriggerEvaluation} loading={actionHandlers.isTriggering} />
+                          ) : undefined,
                         } : undefined,
                         content: sessionDetails ? (
-                          <EvalSessionDetailsPanel 
-                            sessionDetails={sessionDetails} 
-                            activeTab={activeTab} 
+                          <EvalSessionDetailsPanel
+                            sessionDetails={sessionDetails}
+                            activeTab={activeTab}
+                            actionHandlers={actionHandlers}
+                            workflowContent={workflowContent}
                           />
                         ) : (
                           <div className="flex-1 flex items-center justify-center text-muted-foreground bg-background h-full">

package/components/features/EvalDashboardFeature/useEvalDashboardFeature.d.ts

@@ -32,6 +32,7 @@ export interface EvalDashboardFeatureData {
 
 export interface EvalDashboardFeatureActionHandlers {
   onTriggerEvaluation?: () => void;
+  isTriggering?: boolean;
 }
 
 export interface UseEvalDashboardFeatureReturn {

package/components/features/PageLayout/PageLayout.stories.tsx

@@ -9,9 +9,9 @@ import {
   mockPageLayoutRefinementMessages,
   mockSidebarConfig,
 } from './PageLayout.mocks'
-import { NodeEditor } from '../NodeEditor/NodeEditor'
+import { NodeEditor } from '@/components/features/NodeEditor'
 import { RefinementPanel } from '../RefinementPanel/RefinementPanel'
-import { mockEdges, mockNodes, mockVersions } from '../NodeEditor/NodeEditor.mocks'
+import { mockEdges, mockNodes, mockVersions } from '@/components/features/NodeEditor/NodeEditor.mocks'
 import { DashboardFeature } from '../DashboardFeature/DashboardFeature'
 import { useDashboardIntegrationMock } from './useDashboardIntegration.mock'
 

package/components/features/index.ts

@@ -17,13 +17,14 @@ export type { RefinementPanelProps, RefinementMessage } from "./RefinementPanel"
 export { SpecNavigator } from "./SpecNavigator";
 export type { SpecNavigatorProps } from "./SpecNavigator";
 
+// NodeEditor Feature
+export { NodeEditor } from "./NodeEditor";
+export type { NodeEditorProps } from "./NodeEditor";
+
 // TextEditor Feature
 export { TextEditor } from "./TextEditor";
 export type { TextEditorProps } from "./TextEditor";
 
-// NodeEditor Feature
-export { NodeEditor } from "./NodeEditor";
-export type { NodeEditorProps } from "./NodeEditor";
 
 // DashboardFeature Feature
 export { DashboardFeature } from "./DashboardFeature";