orcheo-canvas 0.0.1

package/src/features/workflow/components/canvas/time-travel-state-details.tsx

@@ -0,0 +1,63 @@
+import { ExecutionState } from "./time-travel-types";
+
+interface StateDetailsProps {
+  state?: ExecutionState;
+}
+
+export function TimeTravelStateDetails({ state }: StateDetailsProps) {
+  if (!state) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <p className="text-muted-foreground">Select a state to view details</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-hidden flex flex-col">
+      <div className="p-2 bg-muted/30 border-b border-border">
+        <h4 className="text-sm font-medium">Node: {state.nodeName}</h4>
+      </div>
+      <div className="flex-1 overflow-auto p-4">
+        <div className="space-y-4">
+          <div>
+            <h5 className="text-sm font-medium mb-2">Input Data</h5>
+            <div className="bg-muted p-3 rounded-md overflow-auto max-h-[200px]">
+              <pre className="text-xs">
+                {state.inputData
+                  ? JSON.stringify(state.inputData, null, 2)
+                  : "No input data"}
+              </pre>
+            </div>
+          </div>
+
+          {state.state !== "running" && (
+            <div>
+              <h5 className="text-sm font-medium mb-2">Output Data</h5>
+              <div className="bg-muted p-3 rounded-md overflow-auto max-h-[200px]">
+                <pre className="text-xs">
+                  {state.outputData
+                    ? JSON.stringify(state.outputData, null, 2)
+                    : state.error
+                      ? `Error: ${state.error}`
+                      : "No output data"}
+                </pre>
+              </div>
+            </div>
+          )}
+
+          {state.error && (
+            <div>
+              <h5 className="text-sm font-medium mb-2 text-red-500">Error</h5>
+              <div className="bg-red-50 dark:bg-red-900/20 p-3 rounded-md overflow-auto max-h-[200px] border border-red-200 dark:border-red-800">
+                <pre className="text-xs text-red-700 dark:text-red-300">
+                  {state.error}
+                </pre>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/features/workflow/components/canvas/time-travel-timeline.tsx

@@ -0,0 +1,80 @@
+import { Badge } from "@/design-system/ui/badge";
+import { ScrollArea } from "@/design-system/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { AlertCircle, CheckCircle, Clock, Loader2 } from "lucide-react";
+
+import { ExecutionState } from "./time-travel-types";
+
+interface ExecutionTimelineProps {
+  states: ExecutionState[];
+  currentIndex: number;
+  onSelect: (index: number) => void;
+}
+
+export function TimeTravelTimeline({
+  states,
+  currentIndex,
+  onSelect,
+}: ExecutionTimelineProps) {
+  return (
+    <div className="w-1/3 border-r border-border">
+      <div className="p-2 bg-muted/30 border-b border-border">
+        <h4 className="text-sm font-medium">Execution Timeline</h4>
+      </div>
+      <ScrollArea className="h-[calc(100%-33px)]">
+        <div className="p-2">
+          {states.map((state, index) => (
+            <button
+              type="button"
+              key={`${state.nodeId}-${index}`}
+              className={cn(
+                "flex w-full items-center gap-2 p-2 rounded-md text-left",
+                index === currentIndex
+                  ? "bg-accent text-accent-foreground"
+                  : "hover:bg-muted",
+              )}
+              onClick={() => onSelect(index)}
+            >
+              {getStateIcon(state.state)}
+              <div className="flex-1">
+                <div className="text-sm font-medium">{state.nodeName}</div>
+                <div className="text-xs text-muted-foreground">
+                  {formatTime(state.timestamp)}
+                </div>
+              </div>
+              <Badge
+                variant={
+                  state.state === "error"
+                    ? "destructive"
+                    : state.state === "success"
+                      ? "default"
+                      : "outline"
+                }
+                className="capitalize"
+              >
+                {state.state}
+              </Badge>
+            </button>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+
+function getStateIcon(state: ExecutionState["state"]) {
+  switch (state) {
+    case "running":
+      return <Loader2 className="h-4 w-4 animate-spin text-blue-500" />;
+    case "success":
+      return <CheckCircle className="h-4 w-4 text-green-500" />;
+    case "error":
+      return <AlertCircle className="h-4 w-4 text-red-500" />;
+    default:
+      return <Clock className="h-4 w-4 text-muted-foreground" />;
+  }
+}
+
+function formatTime(timestamp: string) {
+  return new Date(timestamp).toLocaleTimeString();
+}

package/src/features/workflow/components/canvas/time-travel-types.ts

@@ -0,0 +1,18 @@
+export type ExecutionStatus = "running" | "success" | "error" | "idle";
+
+export interface ExecutionState {
+  timestamp: string;
+  nodeId: string;
+  nodeName: string;
+  state: ExecutionStatus;
+  inputData?: Record<string, unknown>;
+  outputData?: Record<string, unknown>;
+  error?: string;
+}
+
+export interface TimeTravelDebuggerProps {
+  states: ExecutionState[];
+  onStateChange?: (state: ExecutionState) => void;
+  onReplayComplete?: () => void;
+  className?: string;
+}

package/src/features/workflow/components/canvas/workflow-context-menu.tsx

@@ -0,0 +1,179 @@
+import React from "react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@/design-system/ui/context-menu";
+import {
+  Copy,
+  Trash,
+  Scissors,
+  ClipboardPaste,
+  Group,
+  Ungroup,
+  Layers,
+  Edit,
+  Plus,
+  ArrowRight,
+  ArrowDown,
+  ExternalLink,
+  Maximize,
+  Minimize,
+} from "lucide-react";
+
+interface WorkflowContextMenuProps {
+  children: React.ReactNode;
+  onAddNode?: () => void;
+  onCopy?: () => void;
+  onPaste?: () => void;
+  onCut?: () => void;
+  onDelete?: () => void;
+  onDuplicate?: () => void;
+  onGroup?: () => void;
+  onUngroup?: () => void;
+  onCollapseExpand?: () => void;
+  onOpenInNewTab?: () => void;
+  isNodeSelected?: boolean;
+  isGroupSelected?: boolean;
+  isCollapsed?: boolean;
+  canPaste?: boolean;
+}
+
+export default function WorkflowContextMenu({
+  children,
+  onAddNode,
+  onCopy,
+  onPaste,
+  onCut,
+  onDelete,
+  onDuplicate,
+  onGroup,
+  onUngroup,
+  onCollapseExpand,
+  onOpenInNewTab,
+  isNodeSelected = false,
+  isGroupSelected = false,
+  isCollapsed = false,
+  canPaste = false,
+}: WorkflowContextMenuProps) {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        {isNodeSelected ? (
+          <>
+            <ContextMenuItem onClick={onCopy} disabled={!isNodeSelected}>
+              <Copy className="mr-2 h-4 w-4" />
+
+              <span>Copy</span>
+              <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem onClick={onCut} disabled={!isNodeSelected}>
+              <Scissors className="mr-2 h-4 w-4" />
+
+              <span>Cut</span>
+              <ContextMenuShortcut>⌘X</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuItem onClick={onDuplicate} disabled={!isNodeSelected}>
+              <Copy className="mr-2 h-4 w-4" />
+
+              <span>Duplicate</span>
+              <ContextMenuShortcut>⌘D</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+
+            <ContextMenuItem onClick={onDelete} disabled={!isNodeSelected}>
+              <Trash className="mr-2 h-4 w-4" />
+
+              <span>Delete</span>
+              <ContextMenuShortcut>Del</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+
+            {isGroupSelected ? (
+              <>
+                <ContextMenuItem onClick={onUngroup}>
+                  <Ungroup className="mr-2 h-4 w-4" />
+
+                  <span>Ungroup</span>
+                  <ContextMenuShortcut>⌘U</ContextMenuShortcut>
+                </ContextMenuItem>
+                <ContextMenuItem onClick={onCollapseExpand}>
+                  {isCollapsed ? (
+                    <>
+                      <Maximize className="mr-2 h-4 w-4" />
+
+                      <span>Expand</span>
+                    </>
+                  ) : (
+                    <>
+                      <Minimize className="mr-2 h-4 w-4" />
+
+                      <span>Collapse</span>
+                    </>
+                  )}
+                </ContextMenuItem>
+                <ContextMenuItem onClick={onOpenInNewTab}>
+                  <ExternalLink className="mr-2 h-4 w-4" />
+
+                  <span>Open in New Tab</span>
+                </ContextMenuItem>
+              </>
+            ) : (
+              <ContextMenuItem onClick={onGroup} disabled={!isNodeSelected}>
+                <Group className="mr-2 h-4 w-4" />
+
+                <span>Group Selection</span>
+                <ContextMenuShortcut>⌘G</ContextMenuShortcut>
+              </ContextMenuItem>
+            )}
+          </>
+        ) : (
+          <>
+            <ContextMenuItem onClick={onAddNode}>
+              <Plus className="mr-2 h-4 w-4" />
+
+              <span>Add Node</span>
+            </ContextMenuItem>
+            <ContextMenuItem onClick={onPaste} disabled={!canPaste}>
+              <ClipboardPaste className="mr-2 h-4 w-4" />
+
+              <span>Paste</span>
+              <ContextMenuShortcut>⌘V</ContextMenuShortcut>
+            </ContextMenuItem>
+            <ContextMenuSub>
+              <ContextMenuSubTrigger>
+                <Layers className="mr-2 h-4 w-4" />
+
+                <span>Add Node Type</span>
+              </ContextMenuSubTrigger>
+              <ContextMenuSubContent className="w-48">
+                <ContextMenuItem>
+                  <ArrowRight className="mr-2 h-4 w-4" />
+
+                  <span>Trigger</span>
+                </ContextMenuItem>
+                <ContextMenuItem>
+                  <ArrowDown className="mr-2 h-4 w-4" />
+
+                  <span>Function</span>
+                </ContextMenuItem>
+                <ContextMenuItem>
+                  <Edit className="mr-2 h-4 w-4" />
+
+                  <span>Transform</span>
+                </ContextMenuItem>
+              </ContextMenuSubContent>
+            </ContextMenuSub>
+          </>
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/features/workflow/components/canvas/workflow-controls/action-control-group.tsx

@@ -0,0 +1,219 @@
+import { Button } from "@/design-system/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import {
+  Bug,
+  Copy,
+  Download,
+  GitBranch,
+  MoreHorizontal,
+  Pause,
+  Play,
+  Save,
+  Search,
+  Share,
+  Upload,
+} from "lucide-react";
+
+import type { WorkflowControlsProps } from "./types";
+
+type ActionControlGroupProps = Pick<
+  WorkflowControlsProps,
+  | "isRunning"
+  | "onPause"
+  | "onRun"
+  | "onSave"
+  | "onDuplicate"
+  | "onExport"
+  | "onImport"
+  | "onShare"
+  | "onVersionHistory"
+  | "onToggleSearch"
+  | "isSearchOpen"
+>;
+
+export function ActionControlGroup({
+  isRunning = false,
+  onPause,
+  onRun,
+  onSave,
+  onDuplicate,
+  onExport,
+  onImport,
+  onShare,
+  onVersionHistory,
+  onToggleSearch,
+  isSearchOpen = false,
+}: ActionControlGroupProps) {
+  return (
+    <div className="flex items-center gap-1 border border-border rounded-md bg-background p-1">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={isRunning ? onPause : onRun}
+              aria-label={isRunning ? "Pause workflow" : "Run workflow"}
+            >
+              {isRunning ? (
+                <Pause className="h-4 w-4" />
+              ) : (
+                <Play className="h-4 w-4" />
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{isRunning ? "Pause Execution" : "Run Workflow"}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={onSave}
+              aria-label="Save workflow"
+            >
+              <Save className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Save Workflow</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              aria-label="Debug workflow"
+            >
+              <Bug className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Debug Mode</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant={isSearchOpen ? "secondary" : "ghost"}
+              size="icon"
+              className="h-8 w-8"
+              onClick={onToggleSearch}
+              aria-label={isSearchOpen ? "Hide search" : "Search nodes"}
+              aria-pressed={isSearchOpen}
+            >
+              <Search className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Search Nodes (Ctrl+F)</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <DropdownMenu>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8"
+                  aria-label="More actions"
+                >
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>More Actions</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem
+            onSelect={(event) => {
+              event.preventDefault();
+              onDuplicate?.();
+            }}
+            disabled={!onDuplicate}
+            data-testid="duplicate-workflow-menu-item"
+          >
+            <Copy className="mr-2 h-4 w-4" />
+            <span>Duplicate</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={(event) => {
+              event.preventDefault();
+              onShare?.();
+            }}
+            disabled={!onShare}
+          >
+            <Share className="mr-2 h-4 w-4" />
+            <span>Share</span>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onSelect={(event) => {
+              event.preventDefault();
+              onExport?.();
+            }}
+            disabled={!onExport}
+          >
+            <Download className="mr-2 h-4 w-4" />
+            <span>Export</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={(event) => {
+              event.preventDefault();
+              onImport?.();
+            }}
+            disabled={!onImport}
+          >
+            <Upload className="mr-2 h-4 w-4" />
+            <span>Import</span>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onSelect={(event) => {
+              event.preventDefault();
+              onVersionHistory?.();
+            }}
+            disabled={!onVersionHistory}
+          >
+            <GitBranch className="mr-2 h-4 w-4" />
+            <span>Version History</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/features/workflow/components/canvas/workflow-controls/history-control-group.tsx

@@ -0,0 +1,84 @@
+import { Button } from "@/design-system/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { History, RotateCcw, RotateCw } from "lucide-react";
+
+import type { WorkflowControlsProps } from "./types";
+
+type HistoryControlGroupProps = Pick<
+  WorkflowControlsProps,
+  "onUndo" | "onRedo" | "canUndo" | "canRedo"
+>;
+
+export function HistoryControlGroup({
+  onUndo,
+  onRedo,
+  canUndo = false,
+  canRedo = false,
+}: HistoryControlGroupProps) {
+  return (
+    <div className="flex items-center gap-1 border border-border rounded-md bg-background p-1">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={onUndo}
+              disabled={!canUndo}
+              aria-label="Undo"
+            >
+              <RotateCcw className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Undo (Ctrl+Z)</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={onRedo}
+              disabled={!canRedo}
+              aria-label="Redo"
+            >
+              <RotateCw className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Redo (Ctrl+Y)</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              aria-label="History"
+            >
+              <History className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>History</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  );
+}

package/src/features/workflow/components/canvas/workflow-controls/types.ts

@@ -0,0 +1,18 @@
+export interface WorkflowControlsProps {
+  isRunning?: boolean;
+  onRun?: () => void;
+  onPause?: () => void;
+  onSave?: () => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  canUndo?: boolean;
+  canRedo?: boolean;
+  onDuplicate?: () => void;
+  onExport?: () => void;
+  onImport?: () => void;
+  onShare?: () => void;
+  onVersionHistory?: () => void;
+  onToggleSearch?: () => void;
+  isSearchOpen?: boolean;
+  className?: string;
+}