ai-design-system 0.1.66 → 0.1.67

package/components/composites/AppHeader/AppHeader.tsx

@@ -33,6 +33,17 @@ export const AppHeader = React.memo<AppHeaderProps>(({
               : title
           )}
           {chatToggleProps && <ChatToggleButton {...chatToggleProps} />}
+          {tabsPosition === 'left' && tabs && tabs.length > 0 && (
+            <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange} className="ml-2">
+              <TabsList>
+                {tabs.map((tab) => (
+                  <TabsTrigger key={tab.value} value={tab.value}>
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          )}
           {workflowSwitcherProps && <WorkflowSwitcher {...workflowSwitcherProps} />}
         </div>
 

package/components/composites/AppHeader/interfaces.ts

@@ -13,7 +13,7 @@ export interface AppHeaderProps {
   tabs?: TabItem[];
   defaultTab?: string;
   onTabChange?: (value: string) => void;
-  tabsPosition?: 'center' | 'right';
+  tabsPosition?: 'left' | 'center' | 'right';
   className?: string;
   showSidebarToggle?: boolean;
   showTitle?: boolean;

package/components/composites/DashboardChart/DashboardChart.tsx

@@ -22,6 +22,7 @@ import {
   SelectValue,
 } from "@/components/primitives/Select"
 import { ToggleGroup, ToggleGroupItem } from "@/components/primitives/ToggleGroup"
+import { cn } from "@/lib/utils"
 
 export interface DashboardChartPoint {
   date: string
@@ -29,15 +30,36 @@ export interface DashboardChartPoint {
   mobile: number
 }
 
-export type DashboardChartTimeRange = "90d" | "30d" | "7d"
+export type DashboardChartTimeRange = string
 
 export interface DashboardChartProps {
   series: DashboardChartPoint[]
   onTimeRangeChange?: (range: DashboardChartTimeRange) => void
+  title: string
+  description: string
+  shortDescription: string
+  timeRanges: { value: string, label: string, shortLabel?: string }[]
+  desktopLabel: string
+  mobileLabel: string
+  showMobile: boolean
+  className?: string
+  chartClassName?: string
 }
 
-export const DashboardChart = React.memo<DashboardChartProps>(({ series, onTimeRangeChange }) => {
-  const [timeRange, setTimeRange] = React.useState<DashboardChartTimeRange>("90d")
+export const DashboardChart = React.memo<DashboardChartProps>(({ 
+  series, 
+  onTimeRangeChange,
+  title,
+  description,
+  shortDescription,
+  timeRanges,
+  desktopLabel,
+  mobileLabel,
+  showMobile,
+  className,
+  chartClassName
+}) => {
+  const [timeRange, setTimeRange] = React.useState<DashboardChartTimeRange>(timeRanges[0]?.value)
 
   const handleTimeRangeChange = React.useCallback(
     (range: DashboardChartTimeRange) => {
@@ -48,29 +70,31 @@ export const DashboardChart = React.memo<DashboardChartProps>(({ series, onTimeR
   )
 
   const filteredSeries = React.useMemo(() => {
-    const referenceDate = series.length > 0 ? new Date(series[series.length - 1].date) : new Date()
+    const referenceDate = series.length > 0 ? series[series.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") {
+      // Special logic for count-based limits if passed as timeRange
+      const limit = parseInt(timeRange, 10)
+      return series.slice(-limit)
     }
 
     const startDate = new Date(referenceDate)
     startDate.setDate(startDate.getDate() - daysToSubtract)
-
-    return series.filter((point) => new Date(point.date) >= startDate)
+    return series.filter(item => new Date(item.date) >= startDate)
   }, [series, timeRange])
 
   return (
-    <section className="px-4 lg:px-6">
-      <Card className="@container/card">
-        <CardHeader>
-          <CardTitle>Total Visitors</CardTitle>
+    <section className={cn("px-4 lg:px-6 flex flex-col h-full", className)}>
+      <Card className="@container/card flex flex-col flex-1 min-h-0 border-0 shadow-none bg-transparent">
+        <CardHeader className="shrink-0">
+          <CardTitle>{title}</CardTitle>
           <CardDescription>
-            <span className="hidden @[540px]/card:block">Total for the last 3 months</span>
-            <span className="@[540px]/card:hidden">Last 3 months</span>
+            <span className="hidden @[540px]/card:block">{description}</span>
+            <span className="@[540px]/card:hidden">{shortDescription}</span>
           </CardDescription>
           <CardAction>
             <ToggleGroup
@@ -84,38 +108,34 @@ export const DashboardChart = React.memo<DashboardChartProps>(({ series, onTimeR
               variant="outline"
               className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
             >
-              <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
-              <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
-              <ToggleGroupItem value="7d">Last 7 days</ToggleGroupItem>
+              {timeRanges.map(range => (
+                <ToggleGroupItem key={range.value} value={range.value}>{range.label}</ToggleGroupItem>
+              ))}
             </ToggleGroup>
             <Select value={timeRange} onValueChange={(value) => handleTimeRangeChange(value as DashboardChartTimeRange)}>
               <SelectTrigger
                 className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
                 aria-label="Select a value"
               >
-                <SelectValue placeholder="Last 3 months" />
+                <SelectValue placeholder={timeRanges[0]?.label || "Select range"} />
               </SelectTrigger>
               <SelectContent className="rounded-xl">
-                <SelectItem value="90d" className="rounded-lg">
-                  Last 3 months
-                </SelectItem>
-                <SelectItem value="30d" className="rounded-lg">
-                  Last 30 days
-                </SelectItem>
-                <SelectItem value="7d" className="rounded-lg">
-                  Last 7 days
-                </SelectItem>
+                {timeRanges.map(range => (
+                  <SelectItem key={range.value} value={range.value} className="rounded-lg">
+                    {range.shortLabel || range.label}
+                  </SelectItem>
+                ))}
               </SelectContent>
             </Select>
           </CardAction>
         </CardHeader>
-        <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+        <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6 flex-1 min-h-0 flex flex-col">
           <ChartContainer
             config={{
-              desktop: { label: "Desktop", color: "var(--primary)" },
-              mobile: { label: "Mobile", color: "var(--primary)" },
+              desktop: { label: desktopLabel, color: "var(--primary)" },
+              ...(showMobile ? { mobile: { label: mobileLabel, color: "var(--primary)" } } : {}),
             }}
-            className="aspect-auto h-[250px] w-full"
+            className={cn("aspect-auto w-full", chartClassName || "h-[250px]")}
           >
             <AreaChart data={filteredSeries}>
               <defs>
@@ -123,10 +143,12 @@ export const DashboardChart = React.memo<DashboardChartProps>(({ series, onTimeR
                   <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={1} />
                   <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0.1} />
                 </linearGradient>
-                <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="var(--color-mobile)" stopOpacity={0.8} />
-                  <stop offset="95%" stopColor="var(--color-mobile)" stopOpacity={0.1} />
-                </linearGradient>
+                {showMobile && (
+                  <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="var(--color-mobile)" stopOpacity={0.8} />
+                    <stop offset="95%" stopColor="var(--color-mobile)" stopOpacity={0.1} />
+                  </linearGradient>
+                )}
               </defs>
               <CartesianGrid vertical={false} />
               <XAxis
@@ -157,13 +179,15 @@ export const DashboardChart = React.memo<DashboardChartProps>(({ series, onTimeR
                   />
                 }
               />
-              <Area
-                dataKey="mobile"
-                type="natural"
-                fill="url(#fillMobile)"
-                stroke="var(--color-mobile)"
-                stackId="a"
-              />
+              {showMobile && (
+                <Area
+                  dataKey="mobile"
+                  type="natural"
+                  fill="url(#fillMobile)"
+                  stroke="var(--color-mobile)"
+                  stackId="a"
+                />
+              )}
               <Area
                 dataKey="desktop"
                 type="natural"

package/components/composites/DashboardChart/index.ts

@@ -1,2 +1,2 @@
 export { DashboardChart } from './DashboardChart'
-export type { DashboardChartProps } from './DashboardChart'
+export type { DashboardChartProps, DashboardChartPoint, DashboardChartTimeRange } from './DashboardChart'

package/components/composites/EvalSessionDetailsPanel/EvalSessionDetailsPanel.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { EvalSessionDetailsPanel } from "./EvalSessionDetailsPanel"
+
+const meta = {
+  title: "Composites/EvalSessionDetailsPanel",
+  component: EvalSessionDetailsPanel,
+  parameters: {
+    layout: "padded",
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[500px] w-full border rounded-md overflow-hidden bg-background">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof EvalSessionDetailsPanel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    activeTab: "golden-evals",
+    sessionDetails: {
+      id: "sess_1",
+      date: "2023-01-01T00:00:00.000Z",
+      goldenEvals: [
+        { id: 1, category: "Accuracy", metric: "Correct Answer", pass: 1, reasoning: "Matched expectation." }
+      ],
+      systemPrompt: "You are a helpful AI.",
+      outputTranscript: "Hello world!",
+    },
+  },
+}

package/components/composites/EvalSessionDetailsPanel/EvalSessionDetailsPanel.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { DYNAMIC_TABLE_SCHEMA_VERSION, dynamicTableSchema } from "ui-schema-contracts"
+import { ScrollArea } from "@/components/primitives/ScrollArea"
+import { Tabs, TabsContent } from "@/components/primitives/Tabs"
+import { EnhancedDataTable } from "@/components/composites/DataTable"
+import type { DashboardRow } from "@/components/composites/DataTable"
+import { Button } from "@/components/primitives/Button"
+import { Icon } from "@/components/primitives/Icon"
+
+export interface EvalSessionDetails {
+  id: string
+  date: string
+  goldenEvals: DashboardRow[]
+  systemPrompt?: string
+  outputTranscript?: string
+}
+
+export interface EvalSessionDetailsPanelProps {
+  sessionDetails: EvalSessionDetails
+  activeTab: string
+}
+
+export const EvalTriggerButton = ({ onClick }: { onClick: () => void }) => (
+  <Button onClick={onClick} size="sm">
+    <Icon name="Play" className="w-4 h-4 mr-2" />
+    Trigger Evaluation
+  </Button>
+)
+
+const goldenEvalTableSchema = dynamicTableSchema.parse({
+  schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
+  rowKey: "id",
+  enableFiltering: true,
+  enablePagination: false,
+  enableRowSelection: false,
+  columns: [
+    { key: "category", label: "Category", renderType: "text" },
+    { key: "metric", label: "Metric (Question)", renderType: "text" },
+    { key: "pass", label: "Score", renderType: "badge" },
+    { key: "reasoning", label: "Reasoning", renderType: "text" },
+  ],
+})
+
+export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
+  ({ sessionDetails, activeTab }) => {
+    return (
+      <div className="flex flex-col h-full bg-background">
+        <Tabs value={activeTab} className="flex-1 flex flex-col min-h-0">
+          <div className="flex-1 min-h-0 overflow-hidden relative">
+            <TabsContent value="golden-evals" 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.goldenEvals && sessionDetails.goldenEvals.length > 0 ? (
+                  <EnhancedDataTable
+                    data={sessionDetails.goldenEvals}
+                    tableSchema={goldenEvalTableSchema}
+                  />
+                ) : (
+                  <div className="text-sm text-muted-foreground flex-1 flex items-center justify-center">No evaluation data available.</div>
+                )}
+              </div>
+            </TabsContent>
+
+            <TabsContent value="prompts" className="absolute inset-0 m-0 p-0">
+              <ScrollArea className="h-full">
+                <div className="p-4">
+                  <pre className="text-xs font-mono bg-muted p-4 rounded whitespace-pre-wrap">
+                    {sessionDetails.systemPrompt || "No system prompt available."}
+                  </pre>
+                </div>
+              </ScrollArea>
+            </TabsContent>
+
+            <TabsContent value="outputs" className="absolute inset-0 m-0 p-0">
+              <ScrollArea className="h-full">
+                <div className="p-4">
+                  <pre className="text-xs font-mono bg-muted p-4 rounded whitespace-pre-wrap">
+                    {sessionDetails.outputTranscript || "No transcript available."}
+                  </pre>
+                </div>
+              </ScrollArea>
+            </TabsContent>
+          </div>
+        </Tabs>
+      </div>
+    )
+  }
+)
+
+EvalSessionDetailsPanel.displayName = "EvalSessionDetailsPanel"

package/components/composites/EvalSessionDetailsPanel/index.ts

@@ -0,0 +1,2 @@
+export { EvalSessionDetailsPanel, EvalTriggerButton } from "./EvalSessionDetailsPanel"
+export type { EvalSessionDetailsPanelProps, EvalSessionDetails } from "./EvalSessionDetailsPanel"

package/components/composites/index.ts

@@ -205,3 +205,7 @@ export type { SessionHeaderProps, ChatSessionInfo } from './SessionHeader'
 // AppBreadcrumb Composite
 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/DashboardFeature/DashboardFeature.tsx

@@ -67,8 +67,6 @@ export const DashboardFeature = React.memo<DashboardFeatureProps>(
     createEntityName = "Section",
     createFields,
     createButtonLabel = "Create",
-    apps,
-    currentAppId,
     quickCreateEntityName = "App",
     quickCreateFields,
     quickCreateButtonLabel = "Quick Create",
@@ -98,13 +96,13 @@ export const DashboardFeature = React.memo<DashboardFeatureProps>(
       setDrawerMode('table')
       setDrawerOpen(true)
       actionHandlers?.onCreateDrawerOpenChange?.(true)
-    }, [actionHandlers])
+    }, [actionHandlers, setDrawerOpen])
 
     const openQuickCreateDrawer = React.useCallback(() => {
       setDrawerMode('quick-create')
       setDrawerOpen(true)
       actionHandlers?.onCreateDrawerOpenChange?.(true)
-    }, [actionHandlers])
+    }, [actionHandlers, setDrawerOpen])
 
     const handleDrawerOpenChange = React.useCallback(
       (open: boolean) => {
@@ -114,7 +112,7 @@ export const DashboardFeature = React.memo<DashboardFeatureProps>(
         }
         actionHandlers?.onCreateDrawerOpenChange?.(open)
       },
-      [actionHandlers]
+      [actionHandlers, setDrawerOpen]
     )
 
     const handleFieldChange = React.useCallback(
@@ -144,7 +142,7 @@ export const DashboardFeature = React.memo<DashboardFeatureProps>(
         actionHandlers?.onCreateDrawerOpenChange?.(false)
         setValues(buildInitialValues(createFields))
       },
-      [actionHandlers, createFields, drawerMode]
+      [actionHandlers, createFields, drawerMode, setDrawerOpen]
     )
 
     return (
@@ -166,6 +164,17 @@ export const DashboardFeature = React.memo<DashboardFeatureProps>(
                 <DashboardChart
                   series={visitorsSeries}
                   onTimeRangeChange={actionHandlers?.onChartTimeRangeChange}
+                  title="Total Visitors"
+                  description="Total for the last 3 months"
+                  shortDescription="Last 3 months"
+                  timeRanges={[
+                    { value: "90d", label: "Last 3 months" },
+                    { value: "30d", label: "Last 30 days" },
+                    { value: "7d", label: "Last 7 days" }
+                  ]}
+                  desktopLabel="Desktop"
+                  mobileLabel="Mobile"
+                  showMobile={true}
                 />
               </>
             )}

package/components/features/DashboardFeature/useDashboardFeature.d.ts

@@ -28,7 +28,7 @@ export interface DashboardSeriesPoint {
   mobile: number
 }
 
-export type DashboardChartTimeRange = "90d" | "30d" | "7d"
+export type DashboardChartTimeRange = string
 
 export interface DashboardApp {
   id: string

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { expect, within, userEvent, fn } from "@storybook/test"
+import { EvalDashboardFeature } from "./EvalDashboardFeature"
+import { evalDashboardFeatureStateMock } from "./EvalDashboardFeature.mocks"
+
+const meta = {
+  title: "Features/EvalDashboardFeature/Behaviors",
+  component: EvalDashboardFeature,
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: (args) => (
+    <div className="h-screen w-full">
+      <EvalDashboardFeature {...args} />
+    </div>
+  )
+} satisfies Meta<typeof EvalDashboardFeature>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Interactive: Story = {
+  args: {
+    ...evalDashboardFeatureStateMock,
+    actionHandlers: {
+      onTriggerEvaluation: fn(),
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    
+    // Check if the tabs exist
+    const tabs = await canvas.findAllByRole("tab")
+    expect(tabs.length).toBeGreaterThan(0)
+    
+    // Switch to Outputs tab
+    const outputsTab = canvas.getByRole("tab", { name: /Outputs/i })
+    await userEvent.click(outputsTab)
+  },
+}

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

@@ -0,0 +1,25 @@
+import type { UseEvalDashboardFeatureReturn } from "./useEvalDashboardFeature.d"
+
+export const evalDashboardFeatureStateMock: UseEvalDashboardFeatureReturn = {
+  inbox: {
+    items: [
+      { id: 'sess_1', date: '2026-07-16T10:00:00Z', score: 38, total: 41, latency: '2.3s', tokens: 4500 },
+      { id: 'sess_2', date: '2026-07-16T11:30:00Z', score: 40, total: 41, latency: '1.9s', tokens: 3200 },
+      { id: 'sess_3', date: '2026-07-16T12:45:00Z', score: 41, total: 41, latency: '2.1s', tokens: 3800 },
+    ],
+    selectedItemId: 'sess_1',
+    onSelectItem: () => {},
+  },
+  data: {
+    goldenEvals: [
+      { id: 1, category: 'Goal Completion', metric: "Was the user's objective accomplished?", pass: 1, reasoning: "The agent successfully generated the video based on the provided topic." },
+      { id: 2, category: 'Conversation Progress', metric: "Does every response advance the task?", pass: 1, reasoning: "Every turn advanced the task without stalling." },
+      { id: 3, category: 'Clarification Strategy', metric: "Did clarifications resolve high-impact uncertainty efficiently?", pass: 0, reasoning: "The agent asked too many clarifying questions that could have been batched." },
+    ],
+    systemPrompt: "// Raw System Prompt Input\nYou are the orchestrator...",
+    outputTranscript: "// Raw Transcript Output\nUser: hi\nAI: How can I help you today?",
+  },
+  actionHandlers: {
+    onTriggerEvaluation: () => {},
+  }
+}

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { EvalDashboardFeature } from "./EvalDashboardFeature"
+import { evalDashboardFeatureStateMock } from "./EvalDashboardFeature.mocks"
+import { useEvalDashboardFeatureMock } from "./useEvalDashboardFeature.mock"
+
+const meta = {
+  title: "Features/EvalDashboardFeature",
+  component: EvalDashboardFeature,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  render: (args) => (
+    <div className="h-screen w-full">
+      <EvalDashboardFeature {...args} />
+    </div>
+  )
+} satisfies Meta<typeof EvalDashboardFeature>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    ...evalDashboardFeatureStateMock,
+  },
+}
+
+export const WithStateManagement: Story = {
+  render: () => {
+    const state = useEvalDashboardFeatureMock()
+    return <EvalDashboardFeature {...state} className="h-[100dvh]" />
+  },
+}