ai-design-system 0.1.69 → 0.1.71

package/components/blocks/EvalSessionDetailsPanel/EvalSessionDetailsPanel.tsx

@@ -11,6 +11,7 @@ export interface EvalSessionDetails {
   id: string
   date: string
   goldenEvals: DashboardRow[]
+  recommendations: Array<{ id: number; name: string; rationale: string }>
   systemPrompt?: string
   outputTranscript?: string
 }
@@ -23,12 +24,23 @@ export interface EvalSessionDetailsPanelProps {
 }
 
 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 onClick={onClick} variant="default" size="sm" className="h-8 w-8 p-0" disabled={loading} title={loading ? 'Evaluating...' : 'Trigger'}>
+    <Icon name={loading ? 'loader-2' : 'play'} className={`w-4 h-4${loading ? ' animate-spin' : ''}`} />
   </Button>
 )
 
+const recommendationTableSchema = dynamicTableSchema.parse({
+  schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
+  rowKey: "name",
+  enableFiltering: true,
+  enablePagination: false,
+  enableRowSelection: false,
+  columns: [
+    { key: "name", label: "Recommendation", renderType: "text" },
+    { key: "rationale", label: "Rationale", renderType: "text" },
+  ],
+})
+
 const goldenEvalTableSchema = dynamicTableSchema.parse({
   schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
   rowKey: "id",
@@ -44,7 +56,7 @@ const goldenEvalTableSchema = dynamicTableSchema.parse({
 })
 
 export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
-  ({ sessionDetails, activeTab, actionHandlers, workflowContent }) => {
+  ({ sessionDetails, activeTab, actionHandlers: _actionHandlers, workflowContent }) => {
     return (
       <div className="flex flex-col h-full bg-background">
         <Tabs value={activeTab} className="flex-1 flex flex-col min-h-0">
@@ -62,6 +74,19 @@ export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
               </div>
             </TabsContent>
 
+            <TabsContent value="recommendations" className="absolute inset-0 m-0 p-0 overflow-hidden flex flex-col">
+              <div className="p-4 flex-1 min-h-0 flex flex-col">
+                {sessionDetails.recommendations && sessionDetails.recommendations.length > 0 ? (
+                  <EnhancedDataTable
+                    data={sessionDetails.recommendations}
+                    tableSchema={recommendationTableSchema}
+                  />
+                ) : (
+                  <div className="text-sm text-muted-foreground flex-1 flex items-center justify-center">No recommendations available.</div>
+                )}
+              </div>
+            </TabsContent>
+
             <TabsContent value="prompts" className="absolute inset-0 m-0 p-0">
               <ScrollArea className="h-full">
                 <div className="p-4">

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -4,6 +4,7 @@ import {
   ConnectionMode,
   ReactFlowProvider,
   type Connection,
+  type Node,
   useReactFlow,
 } from "@xyflow/react";
 import { useCallback, useEffect } from "react";
@@ -95,8 +96,7 @@ function WorkflowCanvasInner({
         onEdgesChange={onEdgesChange}
         onNodesChange={onNodesChange}
         onPaneClick={onPaneClick}
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onNodeClick={onNodeClick as any}
+        onNodeClick={onNodeClick as (event: React.MouseEvent, node: Node) => void}
         onEdgeClick={onEdgeClick}
       >
         {topLeft && (

package/components/blocks/WorkflowCanvas/layout-engine.ts

@@ -1,6 +1,26 @@
 import ELK from 'elkjs';
 import type { WorkflowNode, WorkflowEdge } from './interfaces';
 
+interface ElkNode {
+  id: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  children?: ElkNode[];
+}
+
+interface ElkGraph {
+  id: string;
+  layoutOptions?: Record<string, string>;
+  children?: ElkNode[];
+  edges?: Array<{
+    id: string;
+    sources: string[];
+    targets: string[];
+  }>;
+}
+
 const NODE_WIDTH = 180;
 const NODE_HEIGHT = 52;
 
@@ -10,7 +30,7 @@ export async function getLayoutedElements(
   nodes: WorkflowNode[],
   edges: WorkflowEdge[],
 ): Promise<{ nodes: WorkflowNode[]; edges: WorkflowEdge[] }> {
-  const graph = {
+  const graph: ElkGraph = {
     id: 'root',
     layoutOptions: {
       'elk.algorithm': 'layered',
@@ -36,12 +56,10 @@ export async function getLayoutedElements(
     }),
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const layout = await elk.layout(graph as any);
+  const layout = await elk.layout(graph);
 
   const layoutedNodes: WorkflowNode[] = nodes.map((n) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const elkNode = (layout.children ?? []).find((c: any) => c.id === n.id);
+    const elkNode = (layout.children ?? []).find((c: ElkNode) => c.id === n.id);
     if (!elkNode || elkNode.x == null || elkNode.y == null) return n;
     return {
       ...n,

package/components/composites/AppHeader/AppHeader.stories.tsx

@@ -144,3 +144,33 @@ export const ManyTabs: Story = {
     </SidebarProvider>
   ),
 }
+
+/**
+ * With Button Switcher
+ *
+ * Header with a button switcher (dropdown) instead of a title.
+ */
+export const WithButtonSwitcher: Story = {
+  render: () => (
+    <SidebarProvider>
+      <Sidebar />
+      <SidebarInset>
+        <AppHeader
+          buttonSwitcherProps={{
+            items: [
+              { id: "1", name: "Alpha Workflow" },
+              { id: "2", name: "Beta Workflow" },
+            ],
+            activeId: "1",
+            onSelect: fn(),
+          }}
+          actions={
+            <Button size="sm">
+              Deploy
+            </Button>
+          }
+        />
+      </SidebarInset>
+    </SidebarProvider>
+  ),
+}

package/components/composites/AppHeader/AppHeader.tsx

@@ -3,7 +3,7 @@ import { SidebarTrigger } from "@/components/primitives/Sidebar"
 import { Separator } from "@/components/primitives/Separator"
 import { Tabs, TabsList, TabsTrigger } from "@/components/primitives/Tabs"
 import { ChatToggleButton } from "@/components/composites/ChatToggleButton"
-import { WorkflowSwitcher } from "@/components/composites/WorkflowSwitcher"
+import { ButtonSwitcher } from "@/components/composites/ButtonSwitcher"
 import type { AppHeaderProps } from "./interfaces"
 
 export const AppHeader = React.memo<AppHeaderProps>(({ 
@@ -16,7 +16,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
   tabsPosition = 'center',
   showSidebarToggle = true,
   showTitle = true,
-  workflowSwitcherProps,
+  buttonSwitcherProps,
   chatToggleProps
 }) => {
   return (
@@ -24,7 +24,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
       <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6">
         <div className="min-w-0 flex items-center gap-1 lg:gap-2">
           {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
-          {showSidebarToggle && (showTitle && title || workflowSwitcherProps || chatToggleProps) && (
+          {showSidebarToggle && (showTitle && title || buttonSwitcherProps || chatToggleProps) && (
             <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
           )}
           {showTitle && title && (
@@ -44,7 +44,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
               </TabsList>
             </Tabs>
           )}
-          {workflowSwitcherProps && <WorkflowSwitcher {...workflowSwitcherProps} />}
+          {buttonSwitcherProps && <ButtonSwitcher {...buttonSwitcherProps} />}
         </div>
 
         <div className="justify-self-center">

package/components/composites/AppHeader/interfaces.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { WorkflowSwitcherProps } from "@/components/composites/WorkflowSwitcher/WorkflowSwitcher";
+import type { ButtonSwitcherProps } from "@/components/composites/ButtonSwitcher/ButtonSwitcher";
 import type { ChatToggleButtonProps } from "@/components/composites/ChatToggleButton/ChatToggleButton";
 
 export interface TabItem {
@@ -17,6 +17,6 @@ export interface AppHeaderProps {
   className?: string;
   showSidebarToggle?: boolean;
   showTitle?: boolean;
-  workflowSwitcherProps?: WorkflowSwitcherProps;
+  buttonSwitcherProps?: ButtonSwitcherProps;
   chatToggleProps?: ChatToggleButtonProps;
 }

package/components/composites/{WorkflowSwitcher/WorkflowSwitcher.stories.tsx → ButtonSwitcher/ButtonSwitcher.stories.tsx}

@@ -1,26 +1,24 @@
 import * as React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
-import { WorkflowSwitcher } from "./WorkflowSwitcher"
+import { ButtonSwitcher } from "./ButtonSwitcher"
 
-const meta: Meta<typeof WorkflowSwitcher> = {
-  title: "Composites/WorkflowSwitcher",
-  component: WorkflowSwitcher,
-  parameters: {
-    layout: "centered",
-  },
+const meta: Meta<typeof ButtonSwitcher> = {
+  title: "Composites/ButtonSwitcher",
+  component: ButtonSwitcher,
+  tags: ["autodocs"],
   args: {
-    workflows: [
+    items: [
       { id: "1", name: "Alpha Workflow" },
       { id: "2", name: "Beta Workflow" },
       { id: "3", name: "Gamma Workflow" },
     ],
-    currentWorkflowId: "1",
-    onSelectWorkflow: () => {},
+    activeId: "1",
+    onSelect: () => {},
   },
 }
 
 export default meta
-type Story = StoryObj<typeof WorkflowSwitcher>
+type Story = StoryObj<typeof ButtonSwitcher>
 
 export const Default: Story = {}
 

package/components/composites/{WorkflowSwitcher/WorkflowSwitcher.tsx → ButtonSwitcher/ButtonSwitcher.tsx}

@@ -8,21 +8,22 @@ import {
 } from "@/components/primitives/DropdownMenu"
 import { Icon } from "@/components/primitives/Icon"
 
-export interface WorkflowItem {
+export interface ButtonSwitcherItem {
   id: string
   name: string
 }
 
-export interface WorkflowSwitcherProps {
-  workflows: WorkflowItem[]
-  currentWorkflowId?: string | null
-  onSelectWorkflow: (id: string) => void
+export interface ButtonSwitcherProps {
+  items: ButtonSwitcherItem[]
+  activeId?: string | null
+  onSelect: (id: string) => void
   className?: string
+  placeholder?: string
 }
 
-export const WorkflowSwitcher = React.memo<WorkflowSwitcherProps>(
-  ({ workflows, currentWorkflowId, onSelectWorkflow, className }) => {
-    const currentWorkflow = workflows.find((w) => w.id === currentWorkflowId)
+export const ButtonSwitcher = React.memo<ButtonSwitcherProps>(
+  ({ items, activeId, onSelect, className, placeholder = "Select Item" }) => {
+    const currentItem = items.find((w) => w.id === activeId)
 
     return (
       <div className={className}>
@@ -35,25 +36,25 @@ export const WorkflowSwitcher = React.memo<WorkflowSwitcherProps>(
               variant="secondary"
             >
               <span className="truncate max-w-[150px]">
-                {currentWorkflow?.name ?? "Select Workflow"}
+                {currentItem?.name ?? placeholder}
               </span>
               <Icon name="chevron-down" size="xs" className="ml-1 opacity-50 shrink-0" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="start">
-            {workflows.map((w) => (
+            {items.map((w) => (
               <DropdownMenuItem
                 className="flex items-center justify-between"
                 key={w.id}
-                onClick={() => onSelectWorkflow(w.id)}
+                onClick={() => onSelect(w.id)}
               >
                 <span className="truncate pr-4">{w.name}</span>
-                {w.id === currentWorkflowId && <Icon name="check" size="sm" className="ml-auto shrink-0" />}
+                {w.id === activeId && <Icon name="check" size="sm" className="ml-auto shrink-0" />}
               </DropdownMenuItem>
             ))}
-            {workflows.length === 0 && (
+            {items.length === 0 && (
               <div className="px-2 py-1.5 text-sm text-muted-foreground text-center">
-                No workflows found
+                No items found
               </div>
             )}
           </DropdownMenuContent>
@@ -63,4 +64,4 @@ export const WorkflowSwitcher = React.memo<WorkflowSwitcherProps>(
   }
 )
 
-WorkflowSwitcher.displayName = "WorkflowSwitcher"
+ButtonSwitcher.displayName = "ButtonSwitcher"

package/components/composites/ButtonSwitcher/index.ts

@@ -0,0 +1 @@
+export * from "./ButtonSwitcher"

package/components/composites/DashboardChart/DashboardChart.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import { Area, CartesianGrid, ComposedChart, Line, XAxis } from "recharts"
 
 import {
   ChartContainer,
@@ -30,10 +30,11 @@ export interface DashboardChartPoint {
   mobile: number
 }
 
-export type DashboardChartTimeRange = string
+export type DashboardChartTimeRange = string;
 
 export interface DashboardChartProps {
   series: DashboardChartPoint[]
+  timeRange?: DashboardChartTimeRange
   onTimeRangeChange?: (range: DashboardChartTimeRange) => void
   title: string
   description: string
@@ -46,8 +47,100 @@ export interface DashboardChartProps {
   chartClassName?: string
 }
 
+interface DashboardTooltipPayloadItem {
+  dataKey?: string | number;
+  value?: number;
+  [key: string]: unknown;
+}
+
+const DashboardTooltipContent = React.memo((props: {
+  active?: boolean;
+  payload?: DashboardTooltipPayloadItem[];
+  label?: string;
+  desktopLabel?: string;
+  mobileLabel?: string;
+  [key: string]: unknown;
+}): React.ReactElement | null => {
+  const { active, payload, desktopLabel, mobileLabel, content: _content, label, ...rest } = props;
+  void _content;
+  if (!active || !payload?.length) return null;
+
+  const uniquePayload = payload.filter(
+    (item: DashboardTooltipPayloadItem, index: number, self: DashboardTooltipPayloadItem[]) =>
+      index === self.findIndex((t: DashboardTooltipPayloadItem) => String(t.dataKey) === String(item.dataKey)),
+  );
+  
+  return (
+    <ChartTooltipContent
+      {...rest}
+      active={active}
+      label={label as string}
+      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"
+    />
+  );
+});
+DashboardTooltipContent.displayName = "DashboardTooltipContent";
+
+const CustomDot = React.memo((props: { cx?: number; cy?: number; stroke?: string }): React.ReactElement => {
+  const { cx, cy, stroke } = props;
+  return (
+    <circle
+      cx={cx}
+      cy={cy}
+      r={4}
+      fill="var(--background)"
+      stroke={stroke}
+      strokeWidth={2}
+      pointerEvents="none"
+    />
+  );
+});
+CustomDot.displayName = "CustomDot";
+
 export const DashboardChart = React.memo<DashboardChartProps>(({ 
   series, 
+  timeRange: propsTimeRange,
   onTimeRangeChange,
   title,
   description,
@@ -59,32 +152,41 @@ export const DashboardChart = React.memo<DashboardChartProps>(({
   className,
   chartClassName
 }) => {
-  const [timeRange, setTimeRange] = React.useState<DashboardChartTimeRange>(timeRanges[0]?.value)
+  const [localTimeRange, setLocalTimeRange] = React.useState<DashboardChartTimeRange>(timeRanges[0]?.value)
+  const timeRange = propsTimeRange ?? localTimeRange
 
   const handleTimeRangeChange = React.useCallback(
     (range: DashboardChartTimeRange) => {
-      setTimeRange(range)
+      setLocalTimeRange(range)
       onTimeRangeChange?.(range)
     },
     [onTimeRangeChange]
   )
 
   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 +239,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 +254,66 @@ 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"
+                  <DashboardTooltipContent 
+                    desktopLabel={desktopLabel} 
+                    mobileLabel={mobileLabel} 
                   />
                 }
               />
               {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={<CustomDot />}
+                    activeDot={{ r: 6 }}
+                  />
+                </>
               )}
               <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={<CustomDot />}
+                activeDot={{ r: 6 }}
               />
-            </AreaChart>
+            </ComposedChart>
           </ChartContainer>
         </CardContent>
       </Card>

package/components/composites/DefaultSwitcher/DefaultSwitcher.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { DefaultSwitcher, DefaultSwitcherItem } from "./DefaultSwitcher"
+import type { Meta, StoryObj } from "@storybook/react"
+
+const meta = {
+  title: "Composites/DefaultSwitcher",
+  component: DefaultSwitcher,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DefaultSwitcher>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    themes: [
+      { label: "Light", value: "light" },
+      { label: "Dark", value: "dark" },
+      { label: "System", value: "system" },
+    ],
+    placeholder: "Select theme...",
+  },
+}
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>()
+    const themes: DefaultSwitcherItem[] = [
+      { label: "Blue", value: "blue" },
+      { label: "Green", value: "green" },
+      { label: "Purple", value: "purple" },
+    ]
+
+    return (
+      <div className="flex flex-col gap-4 min-w-[200px]">
+        <div className="text-sm text-muted-foreground">Selected: {value || "None"}</div>
+        <DefaultSwitcher themes={themes} value={value} onValueChange={setValue} />
+
+        <p style={{ marginTop: '16px', fontSize: '14px' }}>Selected: {value}</p>
+      </div>
+    )
+  },
+}