ai-design-system 0.1.68 → 0.1.70

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/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/DashboardChart/DashboardChart.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import { Area, Line, ComposedChart, CartesianGrid, XAxis } from "recharts"
+import type { TooltipContentProps } from "recharts"
 
 import {
   ChartContainer,
@@ -70,21 +71,29 @@ export const DashboardChart = React.memo<DashboardChartProps>(({
   )
 
   const filteredSeries = React.useMemo(() => {
-    const referenceDate = series.length > 0 ? series[series.length - 1].date : new Date().toISOString()
+    // 1. Sort ascending chronologically (oldest to newest)
+    const sortedSeries = [...series].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+
+    const referenceDate = sortedSeries.length > 0 ? sortedSeries[sortedSeries.length - 1].date : new Date().toISOString()
     let daysToSubtract = 90
     if (timeRange === "30d") {
       daysToSubtract = 30
     } else if (timeRange === "7d") {
       daysToSubtract = 7
-    } else if (timeRange === "10" || timeRange === "20" || timeRange === "30") {
+    }
+
+    let filtered = sortedSeries;
+    if (timeRange === "10" || timeRange === "20" || timeRange === "30") {
       // Special logic for count-based limits if passed as timeRange
       const limit = parseInt(timeRange, 10)
-      return series.slice(-limit)
+      filtered = sortedSeries.slice(-limit)
+    } else {
+      const startDate = new Date(referenceDate)
+      startDate.setDate(startDate.getDate() - daysToSubtract)
+      filtered = sortedSeries.filter(item => new Date(item.date) >= startDate)
     }
 
-    const startDate = new Date(referenceDate)
-    startDate.setDate(startDate.getDate() - daysToSubtract)
-    return series.filter(item => new Date(item.date) >= startDate)
+    return filtered.map(item => ({ ...item, timestamp: new Date(item.date).getTime() }))
   }, [series, timeRange])
 
   return (
@@ -137,7 +146,7 @@ export const DashboardChart = React.memo<DashboardChartProps>(({
             }}
             className={cn("aspect-auto w-full", chartClassName || "h-[250px]")}
           >
-            <AreaChart data={filteredSeries}>
+            <ComposedChart data={filteredSeries}>
               <defs>
                 <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
                   <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={1} />
@@ -152,50 +161,117 @@ export const DashboardChart = React.memo<DashboardChartProps>(({
               </defs>
               <CartesianGrid vertical={false} />
               <XAxis
-                dataKey="date"
+                dataKey="timestamp"
+                type="number"
+                scale="time"
+                domain={['dataMin', 'dataMax']}
                 tickLine={false}
                 axisLine={false}
                 tickMargin={8}
                 minTickGap={32}
                 tickFormatter={(value) => {
                   const date = new Date(value)
-                  return date.toLocaleDateString("en-US", {
+                  return date.toLocaleString("en-US", {
                     month: "short",
                     day: "numeric",
+                    hour: "numeric",
+                    minute: "2-digit"
                   })
                 }}
               />
               <ChartTooltip
                 cursor={false}
-                content={
-                  <ChartTooltipContent
-                    labelFormatter={(value) => {
-                      return new Date(String(value)).toLocaleDateString("en-US", {
-                        month: "short",
-                        day: "numeric",
-                      })
-                    }}
-                    indicator="dot"
-                  />
-                }
+                content={(props: TooltipContentProps) => {
+                  const { active, payload, content: _content, label: _label, ...rest } = props;
+                  if (!active || !payload?.length) return null;
+
+                  const uniquePayload = payload.filter(
+                    (item, index, self) =>
+                      index === self.findIndex((t) => String(t.dataKey) === String(item.dataKey)),
+                  );
+                  
+                  return (
+                      <ChartTooltipContent
+                      {...rest}
+                      payload={uniquePayload}
+                      labelFormatter={(value, tooltipPayload) => {
+                        const typedPayload = tooltipPayload as Array<{ payload: { timestamp?: number } }>;
+                        const timestamp = typedPayload?.[0]?.payload?.timestamp;
+                        if (!timestamp) return null;
+                        const date = new Date(timestamp);
+                        if (isNaN(date.getTime())) return ""
+                        return date.toLocaleDateString("en-US", {
+                          month: "short",
+                          year: "numeric",
+                        })
+                      }}
+                      formatter={(value, name, item, index, tooltipPayload) => {
+                        const typedPayload = tooltipPayload as { timestamp?: number };
+                        const typedItem = item as { color?: string };
+                        const labelText = name === "desktop" ? desktopLabel : (name === "mobile" ? mobileLabel : name);
+                        const timeStr = typedPayload?.timestamp ? new Date(typedPayload.timestamp).toLocaleTimeString("en-US", {
+                          hour: "numeric",
+                          minute: "2-digit"
+                        }) : null;
+                        
+                        return (
+                          <div className="flex flex-col w-full">
+                            <div className="flex w-full items-center gap-2">
+                              <div 
+                                className="h-2.5 w-2.5 shrink-0 rounded-[2px]" 
+                                style={{ backgroundColor: typedItem.color }} 
+                              />
+                              <div className="flex flex-1 justify-between items-center gap-4">
+                                <span className="text-muted-foreground">{labelText as React.ReactNode}</span>
+                                <span className="font-mono font-medium tabular-nums text-foreground">{value as React.ReactNode}</span>
+                              </div>
+                            </div>
+                            {timeStr && (
+                              <div className="text-[10px] text-muted-foreground self-end mt-0.5">
+                                {timeStr}
+                              </div>
+                            )}
+                          </div>
+                        )
+                      }}
+                      indicator="dot"
+                    />
+                  );
+                }}
               />
               {showMobile && (
-                <Area
-                  dataKey="mobile"
-                  type="natural"
-                  fill="url(#fillMobile)"
-                  stroke="var(--color-mobile)"
-                  stackId="a"
-                />
+                <>
+                  <Area
+                    dataKey="mobile"
+                    type="monotone"
+                    fill="url(#fillMobile)"
+                    stroke="none"
+                  />
+                  <Line
+                    dataKey="mobile"
+                    type="monotone"
+                    stroke="var(--color-mobile)"
+                    strokeWidth={2}
+                    dot={false}
+                    activeDot={{ r: 4 }}
+                  />
+                </>
               )}
               <Area
                 dataKey="desktop"
-                type="natural"
+                type="monotone"
                 fill="url(#fillDesktop)"
+                stroke="none"
+              />
+              <Line
+                dataKey="desktop"
+                type="monotone"
                 stroke="var(--color-desktop)"
-                stackId="a"
+                strokeWidth={2}
+                dot={false}
+                activeDot={{ r: 4 }}
               />
-            </AreaChart>
+            </ComposedChart>
           </ChartContainer>
         </CardContent>
       </Card>

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,7 +2,7 @@ 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 {
@@ -17,10 +17,11 @@ 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")
 
@@ -28,12 +29,13 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
       inbox.items.find(s => s.id === inbox.selectedItemId) || null
       , [inbox.items, inbox.selectedItemId])
 
-    // Calculate average score for the trend section
+    // Calculate average score for the trend section (project-wide from runsHistory)
     const avgScore = React.useMemo(() => {
-      if (inbox.items.length === 0) return "0.0";
-      const sum = inbox.items.reduce((acc, curr) => acc + curr.score, 0);
-      return (sum / inbox.items.length).toFixed(1);
-    }, [inbox.items]);
+      const runs = data?.runsHistory || [];
+      if (runs.length === 0) return "0.0";
+      const sum = runs.reduce((acc, curr) => acc + curr.score, 0);
+      return (sum / runs.length).toFixed(1);
+    }, [data?.runsHistory]);
 
     const inboxItems = React.useMemo(() => {
       return inbox.items.map(session => ({
@@ -45,18 +47,19 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
     }, [inbox.items]);
 
     const mockChartData = React.useMemo(() => {
+      const runs = data?.runsHistory || [];
       // Sort items chronologically for the chart
-      const sortedItems = [...inbox.items].sort(
+      const sortedItems = [...runs].sort(
         (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
       )
 
-      return sortedItems.map(session => ({
-        date: session.date,
+      return sortedItems.map(run => ({
+        date: run.date,
         // We map score to 'desktop' since DashboardChart is hardcoded for now
-        desktop: session.score,
+        desktop: run.score,
         mobile: 0
       }))
-    }, [inbox.items]);
+    }, [data?.runsHistory]);
 
     const sessionDetails = selectedSession ? {
       id: selectedSession.id,
@@ -86,12 +89,12 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
                   <DashboardChart
                     series={mockChartData}
                     title="Experiments Analysis"
-                    description={`Average Score: ${avgScore} / 41`}
+                    description={`Average Score: ${avgScore} (per run)`}
                     shortDescription={`Avg: ${avgScore}`}
                     timeRanges={[
-                      { value: "10", label: "Last 10 Sessions", shortLabel: "Last 10" },
-                      { value: "20", label: "Last 20 Sessions", shortLabel: "Last 20" },
-                      { value: "30", label: "Last 30 Sessions", shortLabel: "Last 30" }
+                      { value: "10", label: "Last 10 Runs", shortLabel: "Last 10" },
+                      { value: "20", label: "Last 20 Runs", shortLabel: "Last 20" },
+                      { value: "30", label: "Last 30 Runs", shortLabel: "Last 30" }
                     ]}
                     desktopLabel="Score"
                     mobileLabel=""
@@ -144,7 +147,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,
@@ -154,13 +158,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}
+                            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

@@ -28,10 +28,18 @@ export interface EvalDashboardFeatureData {
   goldenEvals: GoldenEvalResult[];
   systemPrompt: string;
   outputTranscript: string;
+  runsHistory?: Array<{
+    id: string;
+    session_id: string;
+    date: string;
+    score: number;
+    total: number;
+  }>;
 }
 
 export interface EvalDashboardFeatureActionHandlers {
   onTriggerEvaluation?: () => void;
+  isTriggering?: boolean;
 }
 
 export interface UseEvalDashboardFeatureReturn {

package/components/features/NodeEditor/NodeEditor.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useMemo } from "react";
 import { WorkflowToolbar, WorkflowToolbarActions } from "@/components/composites/WorkflowToolbar";
 import { WorkflowCanvas } from "@/components/blocks/WorkflowCanvas";
 import type { WorkflowNode, WorkflowEdge } from "@/components/blocks/WorkflowCanvas";
@@ -7,6 +8,13 @@ import type { ToolbarAction, WorkflowVersion } from "@/components/composites/Wor
 import type { Connection, NodeChange, EdgeChange } from "@xyflow/react";
 import { cn } from "@/lib/utils";
 
+const GLOW: Record<string, string> = {
+  active: "0 0 14px 5px rgba(99, 102, 241, 0.9)",
+  pending: "0 0 14px 5px rgba(251, 146, 60, 1)",
+  done: "0 0 10px 3px rgba(34, 197, 94, 0.75)",
+  error: "0 0 14px 5px rgba(239, 68, 68, 0.9)",
+};
+
 export interface NodeEditorProps {
   // Toolbar — left
   workflowName?: string;
@@ -39,6 +47,9 @@ export interface NodeEditorProps {
   interactive?: boolean;
   hideDefaultActions?: boolean;
   className?: string;
+
+  /** Per-node highlight states: { [nodeId]: 'active' | 'pending' | 'done' | 'error' } */
+  nodeHighlights?: Record<string, string>;
 }
 
 export function NodeEditor({
@@ -65,7 +76,20 @@ export function NodeEditor({
   interactive = false,
   hideDefaultActions = false,
   className,
+  nodeHighlights,
 }: NodeEditorProps) {
+  const highlightedNodes = useMemo(
+    () =>
+      nodes.map((n: WorkflowNode) => {
+        const glow = nodeHighlights?.[n.id];
+        if (!glow) return n;
+        return {
+          ...n,
+          style: { ...(n.style ?? {}), boxShadow: GLOW[glow] },
+        };
+      }),
+    [nodes, nodeHighlights],
+  );
   const defaultActionGroups: ToolbarAction[][] = [
     [
       { id: "undo", icon: "undo-2", title: "Undo", onClick: onUndo, disabled: !canUndo },
@@ -87,7 +111,7 @@ export function NodeEditor({
         className="h-full w-full"
         edges={edges}
         interactive={interactive}
-        nodes={nodes}
+        nodes={highlightedNodes}
         showMinimap={showMinimap}
         topLeft={
           <WorkflowToolbar

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";