ai-design-system 0.1.71 → 0.1.72

package/components/blocks/EvalSessionDetailsPanel/EvalSessionDetailsPanel.tsx

@@ -6,12 +6,43 @@ 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"
+import { IconButton } from "@/components/composites/IconButton"
+
+const CopyButton = ({ text, className }: { text: string; className?: string }) => {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = React.useCallback(
+    async (e: React.MouseEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      try {
+        await navigator.clipboard.writeText(text)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 2000)
+      } catch (err) {
+        console.error("Failed to copy:", err)
+      }
+    },
+    [text]
+  )
+
+  return (
+    <IconButton
+      icon={copied ? "check" : "copy"}
+      size="sm"
+      variant="secondary"
+      className={className}
+      title={copied ? "Copied!" : "Copy"}
+      onClick={handleCopy}
+    />
+  )
+}
 
 export interface EvalSessionDetails {
   id: string
   date: string
   goldenEvals: DashboardRow[]
-  recommendations: Array<{ id: number; name: string; rationale: string }>
+  recommendations: Array<{ id: number; change: string; rationale: string }>
   systemPrompt?: string
   outputTranscript?: string
 }
@@ -19,7 +50,7 @@ export interface EvalSessionDetails {
 export interface EvalSessionDetailsPanelProps {
   sessionDetails: EvalSessionDetails
   activeTab: string
-  actionHandlers?: { onTriggerEvaluation?: () => void }
+  actionHandlers?: { onTriggerEvaluation?: () => void; onDownloadPrompt?: () => Promise<import('@/components/composites/FileTreeExplorer').FileDownloadResult | undefined> }
   workflowContent?: React.ReactNode
 }
 
@@ -31,12 +62,12 @@ export const EvalTriggerButton = ({ onClick, loading }: { onClick: () => void; l
 
 const recommendationTableSchema = dynamicTableSchema.parse({
   schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
-  rowKey: "name",
+  rowKey: "change",
   enableFiltering: true,
   enablePagination: false,
   enableRowSelection: false,
   columns: [
-    { key: "name", label: "Recommendation", renderType: "text" },
+    { key: "change", label: "Recommendation", renderType: "text" },
     { key: "rationale", label: "Rationale", renderType: "text" },
   ],
 })
@@ -56,7 +87,7 @@ const goldenEvalTableSchema = dynamicTableSchema.parse({
 })
 
 export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
-  ({ sessionDetails, activeTab, actionHandlers: _actionHandlers, workflowContent }) => {
+  ({ sessionDetails, activeTab, workflowContent }) => {
     return (
       <div className="flex flex-col h-full bg-background">
         <Tabs value={activeTab} className="flex-1 flex flex-col min-h-0">
@@ -89,7 +120,15 @@ export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
 
             <TabsContent value="prompts" className="absolute inset-0 m-0 p-0">
               <ScrollArea className="h-full">
-                <div className="p-4">
+                <div className="p-4 relative group">
+                  {sessionDetails.systemPrompt && (
+                    <div className="absolute top-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <CopyButton 
+                        text={sessionDetails.systemPrompt}
+                        className="h-8 w-8 p-0"
+                      />
+                    </div>
+                  )}
                   <pre className="text-xs font-mono bg-muted p-4 rounded whitespace-pre-wrap">
                     {sessionDetails.systemPrompt || "No system prompt available."}
                   </pre>
@@ -99,7 +138,15 @@ export const EvalSessionDetailsPanel = React.memo<EvalSessionDetailsPanelProps>(
 
             <TabsContent value="outputs" className="absolute inset-0 m-0 p-0">
               <ScrollArea className="h-full">
-                <div className="p-4">
+                <div className="p-4 relative group">
+                  {sessionDetails.outputTranscript && (
+                    <div className="absolute top-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <CopyButton 
+                        text={sessionDetails.outputTranscript}
+                        className="h-8 w-8 p-0"
+                      />
+                    </div>
+                  )}
                   <pre className="text-xs font-mono bg-muted p-4 rounded whitespace-pre-wrap">
                     {sessionDetails.outputTranscript || "No transcript available."}
                   </pre>

package/components/composites/StateNode/StateNode.tsx

@@ -1,14 +1,18 @@
 "use client";
 
-import type { NodeProps } from "@xyflow/react";
+import { NodeToolbar, Position, type NodeProps } from "@xyflow/react";
 import { memo } from "react";
 import { Icon } from "@/components/primitives/Icon";
+import { ButtonGroup } from "@/components/primitives/ButtonGroup";
+import { Button } from "@/components/primitives/Button";
+import { DefaultSwitcher } from "@/components/composites/DefaultSwitcher";
 import {
   Node,
   NodeDescription,
   NodeTitle,
 } from "@/components/ai-elements/node";
 import { cn } from "@/lib/utils";
+import type { ToolbarAction } from "@/components/composites/WorkflowToolbar";
 
 export type StateNodeData = {
   label: string;
@@ -18,6 +22,7 @@ export type StateNodeData = {
   isTerminal?: boolean;
   status?: "idle" | "running" | "success" | "error";
   enabled?: boolean;
+  actions?: ToolbarAction[];
 };
 
 type StateNodeProps = NodeProps & {
@@ -63,7 +68,6 @@ export const StateNode = memo(({ data, selected, id }: StateNodeProps) => {
   const displayDescription = data.description;
   const status = data.status;
   const isDisabled = data.enabled === false;
-  const isTerminal = data.isTerminal === true;
 
   return (
       <Node
@@ -99,6 +103,51 @@ export const StateNode = memo(({ data, selected, id }: StateNodeProps) => {
           )}
         </div>
       </div>
+      {data.actions && data.actions.length > 0 && (
+        <NodeToolbar isVisible={true} position={Position.Right} offset={12}>
+          {(() => {
+            const switcherActions = data.actions.filter((a: ToolbarAction) => a.switcher);
+            const buttonActions = data.actions.filter((a: ToolbarAction) => !a.switcher);
+            return (
+              <>
+                {buttonActions.length > 0 && (
+                  <ButtonGroup orientation="horizontal" className="shadow-md bg-secondary/80 backdrop-blur border-border/50">
+                    {buttonActions.map((action: ToolbarAction) => (
+                      <Button
+                        key={action.id}
+                        size="icon"
+                        variant="secondary"
+                        className="h-8 w-8 hover:bg-primary/10"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          action.onClick?.();
+                        }}
+                        title={action.title}
+                      >
+                        {action.icon ? (
+                          <Icon name={action.icon as string} size="sm" className={action.icon === 'check' ? 'text-green-500' : action.icon === 'x' ? 'text-red-500' : 'text-primary'} />
+                        ) : (
+                          <Icon name="play" size="sm" className="text-primary" />
+                        )}
+                      </Button>
+                    ))}
+                  </ButtonGroup>
+                )}
+                {switcherActions.map((action: ToolbarAction) => (
+                  <div key={action.id} className="shadow-md bg-secondary/80 backdrop-blur border-border/50 rounded-md">
+                    <DefaultSwitcher
+                      themes={action.switcher!.items}
+                      value={action.switcher!.value}
+                      onValueChange={action.switcher!.onValueChange}
+                      placeholder={action.switcher!.placeholder}
+                    />
+                  </div>
+                ))}
+              </>
+            );
+          })()}
+        </NodeToolbar>
+      )}
     </Node>
   );
 });

package/components/composites/TransitionNode/TransitionNode.tsx

@@ -1,14 +1,18 @@
 "use client";
 
-import type { NodeProps } from "@xyflow/react";
+import { NodeToolbar, Position, type NodeProps } from "@xyflow/react";
 import { memo } from "react";
 import { Icon } from "@/components/primitives/Icon";
+import { ButtonGroup } from "@/components/primitives/ButtonGroup";
+import { Button } from "@/components/primitives/Button";
+import { DefaultSwitcher } from "@/components/composites/DefaultSwitcher";
 import {
   Node,
   NodeDescription,
   NodeTitle,
 } from "@/components/ai-elements/node";
 import { cn } from "@/lib/utils";
+import type { ToolbarAction } from "@/components/composites/WorkflowToolbar";
 
 export type TransitionNodeConfig = {
   /** For conditional transitions: form field comparison e.g. "{{record.orderValue}} > {{record.acceptedRange}}" */
@@ -33,6 +37,7 @@ export type TransitionNodeData = {
   config?: TransitionNodeConfig;
   status?: "idle" | "running" | "success" | "error";
   enabled?: boolean;
+  actions?: ToolbarAction[];
 };
 
 type TransitionNodeProps = NodeProps & {
@@ -91,6 +96,51 @@ export const TransitionNode = memo(
             )}
           </div>
         </div>
+        {data.actions && data.actions.length > 0 && (
+        <NodeToolbar isVisible={true} position={Position.Right} offset={12}>
+          {(() => {
+            const switcherActions = data.actions.filter((a: ToolbarAction) => a.switcher);
+            const buttonActions = data.actions.filter((a: ToolbarAction) => !a.switcher);
+            return (
+              <>
+                {buttonActions.length > 0 && (
+                  <ButtonGroup orientation="horizontal" className="shadow-md bg-secondary/80 backdrop-blur border-border/50">
+                    {buttonActions.map((action: ToolbarAction) => (
+                      <Button
+                        key={action.id}
+                        size="icon"
+                        variant="secondary"
+                        className="h-8 w-8 hover:bg-primary/10"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          action.onClick?.();
+                        }}
+                        title={action.title}
+                      >
+                        {action.icon ? (
+                          <Icon name={action.icon as string} size="sm" className={action.icon === 'check' ? 'text-green-500' : action.icon === 'x' ? 'text-red-500' : 'text-primary'} />
+                        ) : (
+                          <Icon name="play" size="sm" className="text-primary" />
+                        )}
+                      </Button>
+                    ))}
+                  </ButtonGroup>
+                )}
+                {switcherActions.map((action: ToolbarAction) => (
+                  <div key={action.id} className="shadow-md bg-secondary/80 backdrop-blur border-border/50 rounded-md">
+                    <DefaultSwitcher
+                      themes={action.switcher!.items}
+                      value={action.switcher!.value}
+                      onValueChange={action.switcher!.onValueChange}
+                      placeholder={action.switcher!.placeholder}
+                    />
+                  </div>
+                ))}
+              </>
+            );
+          })()}
+        </NodeToolbar>
+      )}
       </Node>
     );
   }

package/components/composites/WorkflowToolbar/interfaces.ts

@@ -5,6 +5,19 @@ export interface WorkflowVersion {
   label: string;
 }
 
+export interface ToolbarActionSwitcherItem {
+  label: string;
+  value: string;
+}
+
+export interface ToolbarActionSwitcher {
+  items: ToolbarActionSwitcherItem[];
+  value?: string;
+  onValueChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
 export interface ToolbarAction {
   id: string;
   icon: string | React.ReactNode;
@@ -13,6 +26,7 @@ export interface ToolbarAction {
   disabled?: boolean;
   loading?: boolean;
   indicator?: boolean;
+  switcher?: ToolbarActionSwitcher;
 }
 
 export interface WorkflowToolbarActionsProps {

package/components/features/EvalDashboardFeature/EvalDashboardFeature.tsx

@@ -5,6 +5,7 @@ import { DashboardChart } from "@/components/composites/DashboardChart"
 import { EvalSessionDetailsPanel, EvalTriggerButton } from "@/components/blocks/EvalSessionDetailsPanel"
 import type { DashboardRow } from "@/components/composites/DataTable"
 import { IconButton } from "@/components/composites/IconButton"
+import type { FileDownloadResult } from "@/components/composites/FileTreeExplorer"
 import { cn } from "@/lib/utils"
 import type {
   EvalDashboardFeatureInboxState,
@@ -25,6 +26,27 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
   ({ inbox, data, actionHandlers, className, workflowContent }) => {
     const [showInbox, setShowInbox] = React.useState(true)
     const [activeTab, setActiveTab] = React.useState("golden-evals")
+    const [isDownloading, setIsDownloading] = React.useState(false)
+    const downloadRef = React.useRef<HTMLAnchorElement>(null)
+
+    const handleDownloadClick = React.useCallback(async () => {
+      if (!actionHandlers?.onDownloadPrompt || isDownloading) return
+      setIsDownloading(true)
+      try {
+        const result: FileDownloadResult | undefined = await actionHandlers.onDownloadPrompt()
+        if (!result) return
+        const url = URL.createObjectURL(result.blob)
+        const anchor = downloadRef.current
+        if (anchor) {
+          anchor.href = url
+          anchor.download = result.filename
+          anchor.click()
+        }
+        URL.revokeObjectURL(url)
+      } finally {
+        setIsDownloading(false)
+      }
+    }, [actionHandlers?.onDownloadPrompt, isDownloading])
 
     const selectedSession = React.useMemo(() =>
       inbox.items.find(s => s.id === inbox.selectedItemId) || null
@@ -72,6 +94,7 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
     } : null
 
     return (
+      <>
       <div className={cn("h-full w-full overflow-hidden bg-background", className)}>
         <SectionLayout
           dragHandleColor="border"
@@ -169,7 +192,7 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
                             <div className="flex items-center gap-2">
                               <EvalTriggerButton onClick={actionHandlers.onTriggerEvaluation} loading={actionHandlers.isTriggering} />
                               {actionHandlers.onDownloadPrompt && (
-                                <IconButton onClick={actionHandlers.onDownloadPrompt} variant="outline" size="sm" className="h-8 w-8 p-0" title="Download Prompt" icon="download" />
+                                <IconButton onClick={handleDownloadClick} variant="outline" size="sm" className="h-8 w-8 p-0" title={isDownloading ? 'Preparing...' : 'Download Prompt'} icon={isDownloading ? 'loader-2' : 'download'} iconClassName={`w-4 h-4${isDownloading ? ' animate-spin' : ''}`} />
                               )}
                             </div>
                           ) : undefined,
@@ -194,9 +217,11 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
             }
           ]}
         />
-      </div>
+        </div>
+        <a ref={downloadRef} style={{ display: 'none' }} />
+      </>
     )
   }
 )
-
+ 
 EvalDashboardFeature.displayName = "EvalDashboardFeature"

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

@@ -25,8 +25,10 @@ export interface EvalDashboardFeatureInboxState {
 }
 
 export interface EvalRecommendation {
-  name: string;
+  change: string;
   rationale: string;
+  priority?: number;
+  expected_metrics?: number[];
 }
 
 export interface EvalDashboardFeatureData {
@@ -43,9 +45,11 @@ export interface EvalDashboardFeatureData {
   }>;
 }
 
+import type { FileDownloadResult } from '@/components/composites/FileTreeExplorer';
+
 export interface EvalDashboardFeatureActionHandlers {
   onTriggerEvaluation?: () => void;
-  onDownloadPrompt?: () => void;
+  onDownloadPrompt?: () => Promise<FileDownloadResult | undefined>;
   isTriggering?: boolean;
   timeRange?: string;
   onTimeRangeChange?: (range: string) => void;

package/components/features/NodeEditor/NodeEditor.stories.tsx

@@ -1,7 +1,10 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { NodeEditor } from "./NodeEditor";
 import { useNodeEditorMock } from "./useNodeEditor.mock";
 import { mockVersions, mockNodes, mockEdges } from "./NodeEditor.mocks";
+import type { WorkflowNode, WorkflowEdge } from "@/components/blocks/WorkflowCanvas";
+import type { ToolbarAction } from "@/components/composites/WorkflowToolbar";
 
 /**
  * NodeEditor Feature
@@ -139,3 +142,60 @@ export const Saving: Story = {
     canRedo: false,
   },
 };
+
+/**
+ * WithHITLApproval — single HITL transition node with a floating DefaultSwitcher
+ * containing workflow-defined approval options beside the node.
+ */
+function NodeEditorWithHITLApprovalStory() {
+  const [selectedValue, setSelectedValue] = React.useState("");
+
+  const hitlNode: WorkflowNode = {
+    id: "hitl-1",
+    type: "transition",
+    position: { x: 300, y: 100 },
+    data: {
+      label: "Human Approval",
+      description: "Manager review required",
+      type: "transition",
+      status: "idle",
+    },
+  };
+
+  const nodeActions: Record<string, ToolbarAction[]> = {
+    "hitl-1": [
+      {
+        id: "switcher-hitl-1",
+        icon: "chevrons-up-down",
+        title: "Select approval decision",
+        switcher: {
+          items: [
+            { label: "Approve", value: "approve" },
+            { label: "Reject", value: "reject" },
+          ],
+          value: selectedValue,
+          onValueChange: setSelectedValue,
+          placeholder: "Do you approve this evaluation?",
+        },
+      },
+    ],
+  };
+
+  return (
+    <NodeEditor
+      workflowName="HITL Approval"
+      versions={[{ id: "v1", label: "v1" }]}
+      currentVersionId="v1"
+      nodes={[hitlNode]}
+      edges={[]}
+      nodeActions={nodeActions}
+      interactive={false}
+      hideDefaultActions={true}
+      showMinimap={false}
+    />
+  );
+}
+
+export const WithHITLApproval: Story = {
+  render: () => <NodeEditorWithHITLApprovalStory />,
+};

package/components/features/NodeEditor/NodeEditor.tsx

@@ -15,6 +15,11 @@ const GLOW: Record<string, string> = {
   error: "0 0 14px 5px rgba(239, 68, 68, 0.9)",
 };
 
+export interface NodeStatusEntry {
+  nodeId: string;
+  status: string;
+}
+
 export interface NodeEditorProps {
   // Toolbar — left
   workflowName?: string;
@@ -48,8 +53,22 @@ export interface NodeEditorProps {
   hideDefaultActions?: boolean;
   className?: string;
 
-  /** Per-node highlight states: { [nodeId]: 'active' | 'pending' | 'done' | 'error' } */
-  nodeHighlights?: Record<string, string>;
+  /** Runtime node statuses from the API. NodeEditor derives highlights internally. */
+  nodeStatuses?: NodeStatusEntry[];
+  /** Per-node actions */
+  nodeActions?: Record<string, ToolbarAction[]>;
+}
+
+function statusToGlow(status: string): string | null {
+  switch (status) {
+    case 'running': return 'active';
+    case 'pending_hitl': return 'pending';
+    case 'success':
+    case 'completed': return 'done';
+    case 'error':
+    case 'failed': return 'error';
+    default: return null;
+  }
 }
 
 export function NodeEditor({
@@ -76,19 +95,37 @@ export function NodeEditor({
   interactive = false,
   hideDefaultActions = false,
   className,
-  nodeHighlights,
+  nodeStatuses,
+  nodeActions,
 }: NodeEditorProps) {
   const highlightedNodes = useMemo(
-    () =>
-      nodes.map((n: WorkflowNode) => {
-        const glow = nodeHighlights?.[n.id];
-        if (!glow) return n;
+    () => {
+      const statusGlows: Record<string, string> = {};
+      for (const ns of nodeStatuses ?? []) {
+        const g = statusToGlow(ns.status);
+        if (g) statusGlows[ns.nodeId] = g;
+      }
+
+      return nodes.map((n: WorkflowNode) => {
+        const glow =
+          statusGlows[n.id] ??
+          (nodeActions?.[n.id]?.some((a) => a.switcher) ? 'pending' : undefined) ??
+          statusToGlow(n.data?.status ?? '');
+
+        const actions = nodeActions?.[n.id];
+
+        if (!glow && !actions) return n;
         return {
           ...n,
-          style: { ...(n.style ?? {}), boxShadow: GLOW[glow] },
+          data: {
+            ...n.data,
+            actions,
+          },
+          style: { ...(n.style ?? {}), boxShadow: glow ? GLOW[glow] : undefined },
         };
-      }),
-    [nodes, nodeHighlights],
+      });
+    },
+    [nodes, nodeStatuses, nodeActions],
   );
   const defaultActionGroups: ToolbarAction[][] = [
     [