ai-design-system 0.1.69 → 0.1.70

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/features/EvalDashboardFeature/EvalDashboardFeature.tsx

@@ -29,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 => ({
@@ -46,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,
@@ -87,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=""

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

@@ -28,6 +28,13 @@ 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 {

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/dist/index.cjs

@@ -10927,19 +10927,24 @@ var DashboardChart = React3__namespace.memo(({
     [onTimeRangeChange]
   );
   const filteredSeries = React3__namespace.useMemo(() => {
-    const referenceDate = series.length > 0 ? series[series.length - 1].date : (/* @__PURE__ */ new Date()).toISOString();
+    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 : (/* @__PURE__ */ 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") {
       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) => __spreadProps(__spreadValues({}, item), { timestamp: new Date(item.date).getTime() }));
   }, [series, timeRange]);
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("px-4 lg:px-6 flex flex-col h-full", className), children: /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "@container/card flex flex-col flex-1 min-h-0 border-0 shadow-none bg-transparent", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardHeader2, { className: "shrink-0", children: [
@@ -10984,7 +10989,7 @@ var DashboardChart = React3__namespace.memo(({
           desktop: { label: desktopLabel, color: "var(--primary)" }
         }, showMobile ? { mobile: { label: mobileLabel, color: "var(--primary)" } } : {}),
         className: cn("aspect-auto w-full", chartClassName || "h-[250px]"),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.AreaChart, { data: filteredSeries, children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(RechartsPrimitive.ComposedChart, { data: filteredSeries, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "fillDesktop", x1: "0", y1: "0", x2: "0", y2: "1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: "var(--color-desktop)", stopOpacity: 1 }),
@@ -10999,16 +11004,21 @@ var DashboardChart = React3__namespace.memo(({
           /* @__PURE__ */ jsxRuntime.jsx(
             RechartsPrimitive.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"
+                  day: "numeric",
+                  hour: "numeric",
+                  minute: "2-digit"
                 });
               }
             }
@@ -11017,38 +11027,99 @@ var DashboardChart = React3__namespace.memo(({
             ChartTooltip2,
             {
               cursor: false,
-              content: /* @__PURE__ */ jsxRuntime.jsx(
-                ChartTooltipContent2,
-                {
-                  labelFormatter: (value) => {
-                    return new Date(String(value)).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric"
-                    });
-                  },
-                  indicator: "dot"
-                }
-              )
+              content: (props) => {
+                const _a2 = props, { active, payload, content: _content, label: _label } = _a2, rest = __objRest(_a2, ["active", "payload", "content", "label"]);
+                if (!active || !(payload == null ? void 0 : payload.length)) return null;
+                const uniquePayload = payload.filter(
+                  (item, index, self) => index === self.findIndex((t) => String(t.dataKey) === String(item.dataKey))
+                );
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  ChartTooltipContent2,
+                  __spreadProps(__spreadValues({}, rest), {
+                    payload: uniquePayload,
+                    labelFormatter: (value, tooltipPayload) => {
+                      var _a3, _b2;
+                      const typedPayload = tooltipPayload;
+                      const timestamp = (_b2 = (_a3 = typedPayload == null ? void 0 : typedPayload[0]) == null ? void 0 : _a3.payload) == null ? void 0 : _b2.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;
+                      const typedItem = item;
+                      const labelText = name === "desktop" ? desktopLabel : name === "mobile" ? mobileLabel : name;
+                      const timeStr = (typedPayload == null ? void 0 : typedPayload.timestamp) ? new Date(typedPayload.timestamp).toLocaleTimeString("en-US", {
+                        hour: "numeric",
+                        minute: "2-digit"
+                      }) : null;
+                      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              className: "h-2.5 w-2.5 shrink-0 rounded-[2px]",
+                              style: { backgroundColor: typedItem.color }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 justify-between items-center gap-4", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: labelText }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: value })
+                          ] })
+                        ] }),
+                        timeStr && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-muted-foreground self-end mt-0.5", children: timeStr })
+                      ] });
+                    },
+                    indicator: "dot"
+                  })
+                );
+              }
             }
           ),
-          showMobile && /* @__PURE__ */ jsxRuntime.jsx(
+          showMobile && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              RechartsPrimitive.Area,
+              {
+                dataKey: "mobile",
+                type: "monotone",
+                fill: "url(#fillMobile)",
+                stroke: "none"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              RechartsPrimitive.Line,
+              {
+                dataKey: "mobile",
+                type: "monotone",
+                stroke: "var(--color-mobile)",
+                strokeWidth: 2,
+                dot: false,
+                activeDot: { r: 4 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             RechartsPrimitive.Area,
             {
-              dataKey: "mobile",
-              type: "natural",
-              fill: "url(#fillMobile)",
-              stroke: "var(--color-mobile)",
-              stackId: "a"
+              dataKey: "desktop",
+              type: "monotone",
+              fill: "url(#fillDesktop)",
+              stroke: "none"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            RechartsPrimitive.Area,
+            RechartsPrimitive.Line,
             {
               dataKey: "desktop",
-              type: "natural",
-              fill: "url(#fillDesktop)",
+              type: "monotone",
               stroke: "var(--color-desktop)",
-              stackId: "a"
+              strokeWidth: 2,
+              dot: false,
+              activeDot: { r: 4 }
             }
           )
         ] })
@@ -11420,6 +11491,12 @@ async function getLayoutedElements(nodes, edges) {
   }));
   return { nodes: layoutedNodes, edges: layoutedEdges };
 }
+var GLOW = {
+  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)"
+};
 function NodeEditor({
   workflowName,
   versions,
@@ -11443,8 +11520,20 @@ function NodeEditor({
   showMinimap,
   interactive = false,
   hideDefaultActions = false,
-  className
+  className,
+  nodeHighlights
 }) {
+  const highlightedNodes = React3.useMemo(
+    () => nodes.map((n) => {
+      var _a;
+      const glow = nodeHighlights == null ? void 0 : nodeHighlights[n.id];
+      if (!glow) return n;
+      return __spreadProps(__spreadValues({}, n), {
+        style: __spreadProps(__spreadValues({}, (_a = n.style) != null ? _a : {}), { boxShadow: GLOW[glow] })
+      });
+    }),
+    [nodes, nodeHighlights]
+  );
   const defaultActionGroups = [
     [
       { id: "undo", icon: "undo-2", title: "Undo", onClick: onUndo, disabled: !canUndo },
@@ -11466,7 +11555,7 @@ function NodeEditor({
           className: "h-full w-full",
           edges,
           interactive,
-          nodes,
+          nodes: highlightedNodes,
           showMinimap,
           topLeft: /* @__PURE__ */ jsxRuntime.jsx(
             WorkflowToolbar,
@@ -13069,10 +13158,11 @@ var EvalDashboardFeature = React3__namespace.memo(
       [inbox.items, inbox.selectedItemId]
     );
     const avgScore = React3__namespace.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 == null ? void 0 : 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 == null ? void 0 : data.runsHistory]);
     const inboxItems = React3__namespace.useMemo(() => {
       return inbox.items.map((session) => ({
         id: session.id,
@@ -13082,16 +13172,17 @@ var EvalDashboardFeature = React3__namespace.memo(
       }));
     }, [inbox.items]);
     const mockChartData = React3__namespace.useMemo(() => {
-      const sortedItems = [...inbox.items].sort(
+      const runs = (data == null ? void 0 : data.runsHistory) || [];
+      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 == null ? void 0 : data.runsHistory]);
     const sessionDetails = selectedSession ? {
       id: selectedSession.id,
       date: selectedSession.date,
@@ -13119,12 +13210,12 @@ var EvalDashboardFeature = React3__namespace.memo(
               {
                 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: "",