orcheo-canvas 0.0.1

package/src/features/workflow/components/canvas/mini-map.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useRef } from "react";
+import { Button } from "@/design-system/ui/button";
+import { cn } from "@/lib/utils";
+import { Maximize, Minimize } from "lucide-react";
+
+interface MiniMapProps {
+  flowInstance?: Record<string, unknown>;
+  expanded?: boolean;
+  onToggleExpand?: () => void;
+  className?: string;
+}
+
+export default function MiniMap({
+  flowInstance,
+  expanded = false,
+  onToggleExpand,
+  className,
+}: MiniMapProps) {
+  const miniMapRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // This is a simplified version - in a real implementation, you would
+  // use the actual ReactFlow MiniMap component or create a custom implementation
+  // that renders a scaled-down version of the workflow
+  useEffect(() => {
+    if (!miniMapRef.current || !flowInstance) return;
+
+    // In a real implementation, you would:
+    // 1. Get the nodes and edges from flowInstance
+    // 2. Calculate the viewport bounds
+    // 3. Render a scaled-down version of the workflow
+    // 4. Add interaction for panning the main viewport
+
+    // For this demo, we'll just render a placeholder
+  }, [flowInstance]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "absolute bottom-4 right-4 bg-background border border-border rounded-md shadow-md transition-all duration-300 overflow-hidden",
+        expanded ? "w-64 h-48" : "w-32 h-24",
+        className,
+      )}
+    >
+      <div className="absolute top-2 right-2 z-10">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 bg-background/80 backdrop-blur-sm"
+          onClick={onToggleExpand}
+        >
+          {expanded ? (
+            <Minimize className="h-3 w-3" />
+          ) : (
+            <Maximize className="h-3 w-3" />
+          )}
+        </Button>
+      </div>
+
+      <div
+        ref={miniMapRef}
+        className="w-full h-full bg-muted/20 relative"
+        style={{
+          backgroundImage:
+            "radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px)",
+          backgroundSize: "10px 10px",
+        }}
+      >
+        {/* Placeholder nodes for demonstration */}
+        <div className="absolute top-1/4 left-1/4 w-4 h-4 bg-blue-500/70 rounded-sm"></div>
+        <div className="absolute top-1/3 left-1/2 w-4 h-4 bg-purple-500/70 rounded-sm"></div>
+        <div className="absolute top-1/2 left-1/3 w-4 h-4 bg-amber-500/70 rounded-sm"></div>
+        <div className="absolute top-2/3 left-2/3 w-4 h-4 bg-green-500/70 rounded-sm"></div>
+
+        {/* Placeholder edges */}
+        <svg className="absolute inset-0 w-full h-full pointer-events-none">
+          <line
+            x1="25%"
+            y1="25%"
+            x2="50%"
+            y2="33%"
+            stroke="rgba(0,0,0,0.2)"
+            strokeWidth="1"
+          />
+
+          <line
+            x1="50%"
+            y1="33%"
+            x2="33%"
+            y2="50%"
+            stroke="rgba(0,0,0,0.2)"
+            strokeWidth="1"
+          />
+
+          <line
+            x1="33%"
+            y1="50%"
+            x2="67%"
+            y2="67%"
+            stroke="rgba(0,0,0,0.2)"
+            strokeWidth="1"
+          />
+        </svg>
+
+        {/* Viewport indicator */}
+        <div className="absolute border-2 border-primary/50 bg-primary/10 w-1/2 h-1/2 left-1/4 top-1/4"></div>
+      </div>
+    </div>
+  );
+}

package/src/features/workflow/components/canvas/split-pane.tsx

@@ -0,0 +1,165 @@
+import React, { useState, useRef, useEffect } from "react";
+import { cn } from "@/lib/utils";
+
+interface SplitPaneProps {
+  split: "vertical" | "horizontal";
+  minSize?: number;
+  defaultSize?: string | number;
+  children: React.ReactNode[];
+  className?: string;
+  pane1Style?: React.CSSProperties;
+  pane2Style?: React.CSSProperties;
+  onChange?: (size: number) => void;
+}
+
+export default function SplitPane({
+  split = "vertical",
+  minSize = 100,
+  defaultSize = "50%",
+  children,
+  className,
+  pane1Style = {},
+  pane2Style = {},
+  onChange,
+}: SplitPaneProps) {
+  const isVertical = split === "vertical";
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dividerRef = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState<string | number>(defaultSize);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startPos, setStartPos] = useState(0);
+  const [startSize, setStartSize] = useState(0);
+
+  // Convert percentage to pixels
+  const getPixelSize = (
+    size: string | number,
+    containerSize: number,
+  ): number => {
+    if (typeof size === "string" && size.endsWith("%")) {
+      return (parseFloat(size) / 100) * containerSize;
+    }
+    return typeof size === "number" ? size : parseFloat(size);
+  };
+
+  // Convert pixels to CSS value (px or %)
+  const getSizeStyle = (size: string | number): string => {
+    if (typeof size === "string" && size.endsWith("%")) {
+      return size;
+    }
+    return `${size}px`;
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    setStartPos(isVertical ? e.clientX : e.clientY);
+
+    const containerRect = containerRef.current?.getBoundingClientRect();
+    if (!containerRect) return;
+
+    const containerSize = isVertical
+      ? containerRect.width
+      : containerRect.height;
+    setStartSize(getPixelSize(size, containerSize));
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isDragging || !containerRef.current) return;
+
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const containerSize = isVertical
+      ? containerRect.width
+      : containerRect.height;
+    const currentPos = isVertical ? e.clientX : e.clientY;
+    const delta = currentPos - startPos;
+
+    let newSize = Math.max(minSize, startSize + delta);
+    newSize = Math.min(newSize, containerSize - minSize);
+
+    setSize(newSize);
+
+    if (onChange) {
+      onChange(newSize);
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  useEffect(() => {
+    const targetDocument =
+      typeof document !== "undefined" ? document : undefined;
+    if (!targetDocument) {
+      return;
+    }
+
+    if (isDragging) {
+      targetDocument.addEventListener("mousemove", handleMouseMove);
+      targetDocument.addEventListener("mouseup", handleMouseUp);
+    } else {
+      targetDocument.removeEventListener("mousemove", handleMouseMove);
+      targetDocument.removeEventListener("mouseup", handleMouseUp);
+    }
+
+    return () => {
+      targetDocument.removeEventListener("mousemove", handleMouseMove);
+      targetDocument.removeEventListener("mouseup", handleMouseUp);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDragging]);
+
+  // Ensure we have exactly two children
+  const [firstChild, secondChild] = React.Children.toArray(children).slice(
+    0,
+    2,
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "flex",
+        isVertical ? "flex-row" : "flex-col",
+        "relative",
+        className,
+      )}
+      style={{
+        cursor: isDragging
+          ? isVertical
+            ? "col-resize"
+            : "row-resize"
+          : "default",
+        userSelect: isDragging ? "none" : "auto",
+      }}
+    >
+      <div
+        className="overflow-auto"
+        style={{
+          ...pane1Style,
+          [isVertical ? "width" : "height"]: getSizeStyle(size),
+          minWidth: isVertical ? minSize : undefined,
+          minHeight: !isVertical ? minSize : undefined,
+        }}
+      >
+        {firstChild}
+      </div>
+
+      <div
+        ref={dividerRef}
+        className={cn(
+          "flex items-center justify-center",
+          isVertical ? "cursor-col-resize" : "cursor-row-resize",
+          isVertical
+            ? "w-1 bg-border hover:bg-primary/50"
+            : "h-1 bg-border hover:bg-primary/50",
+        )}
+        onMouseDown={handleMouseDown}
+      />
+
+      <div className="overflow-auto flex-1" style={pane2Style}>
+        {secondChild}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,164 @@
+import { useEffect, useRef, useState } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { TimeTravelHeader } from "./time-travel-header";
+import { TimeTravelPlaybackControls } from "./time-travel-playback-controls";
+import { TimeTravelStateDetails } from "./time-travel-state-details";
+import { TimeTravelTimeline } from "./time-travel-timeline";
+import { TimeTravelDebuggerProps } from "./time-travel-types";
+
+export default function TimeTravelDebugger({
+  states = [],
+  onStateChange,
+  onReplayComplete,
+  className,
+}: TimeTravelDebuggerProps) {
+  const [currentStateIndex, setCurrentStateIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = useState(1);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const playbackRef = useRef<NodeJS.Timeout | null>(null);
+
+  const totalStates = states.length;
+  const currentState = totalStates > 0 ? states[currentStateIndex] : undefined;
+
+  useEffect(() => {
+    if (!isPlaying || totalStates === 0) {
+      return;
+    }
+
+    if (currentStateIndex < totalStates - 1) {
+      playbackRef.current = setTimeout(() => {
+        setCurrentStateIndex((index) => index + 1);
+      }, 1000 / playbackSpeed);
+      return;
+    }
+
+    setIsPlaying(false);
+    onReplayComplete?.();
+  }, [
+    isPlaying,
+    currentStateIndex,
+    totalStates,
+    playbackSpeed,
+    onReplayComplete,
+  ]);
+
+  useEffect(() => {
+    return () => {
+      if (playbackRef.current) {
+        clearTimeout(playbackRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (currentState) {
+      onStateChange?.(currentState);
+    }
+  }, [currentState, onStateChange]);
+
+  useEffect(() => {
+    if (totalStates === 0) {
+      setCurrentStateIndex(0);
+      setIsPlaying(false);
+      return;
+    }
+
+    setCurrentStateIndex((index) => Math.min(index, totalStates - 1));
+  }, [totalStates]);
+
+  const stopPlayback = () => {
+    setIsPlaying(false);
+  };
+
+  const goToIndex = (index: number) => {
+    stopPlayback();
+
+    if (totalStates === 0) {
+      setCurrentStateIndex(0);
+      return;
+    }
+
+    const clampedIndex = Math.max(0, Math.min(index, totalStates - 1));
+    setCurrentStateIndex(clampedIndex);
+  };
+
+  const handlePlay = () => setIsPlaying(true);
+  const handlePause = () => stopPlayback();
+  const handleRestart = () => goToIndex(0);
+
+  const handleSkipForward = () => {
+    if (currentStateIndex < totalStates - 1) {
+      goToIndex(currentStateIndex + 1);
+    }
+  };
+
+  const handleSkipBackward = () => {
+    if (currentStateIndex > 0) {
+      goToIndex(currentStateIndex - 1);
+    }
+  };
+
+  const handleJumpToEnd = () => {
+    if (totalStates > 0) {
+      goToIndex(totalStates - 1);
+    }
+  };
+
+  const handleSliderChange = (value: number) => {
+    goToIndex(value);
+  };
+
+  const handleTimelineSelect = (index: number) => {
+    goToIndex(index);
+  };
+
+  const handleSpeedChange = (speed: number) => {
+    setPlaybackSpeed(speed);
+  };
+
+  return (
+    <div
+      className={cn(
+        "border border-border rounded-lg bg-background shadow-md",
+        isExpanded ? "fixed inset-4 z-50 flex flex-col" : "w-full",
+        className,
+      )}
+    >
+      <TimeTravelHeader
+        currentState={currentState}
+        isExpanded={isExpanded}
+        onToggleExpand={() => setIsExpanded((value) => !value)}
+      />
+
+      <div className="flex-1 overflow-hidden flex flex-col">
+        <TimeTravelPlaybackControls
+          currentStateIndex={currentStateIndex}
+          totalStates={totalStates}
+          playbackSpeed={playbackSpeed}
+          isPlaying={isPlaying}
+          onPlay={handlePlay}
+          onPause={handlePause}
+          onRestart={handleRestart}
+          onSkipForward={handleSkipForward}
+          onSkipBackward={handleSkipBackward}
+          onJumpToEnd={handleJumpToEnd}
+          onSliderChange={handleSliderChange}
+          onSpeedChange={handleSpeedChange}
+        />
+
+        <div className="flex flex-1 overflow-hidden">
+          <TimeTravelTimeline
+            states={states}
+            currentIndex={currentStateIndex}
+            onSelect={handleTimelineSelect}
+          />
+
+          <TimeTravelStateDetails state={currentState} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import { Clock, Maximize2, Minimize2 } from "lucide-react";
+
+import { ExecutionState } from "./time-travel-types";
+
+interface TimeTravelHeaderProps {
+  currentState?: ExecutionState;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+}
+
+export function TimeTravelHeader({
+  currentState,
+  isExpanded,
+  onToggleExpand,
+}: TimeTravelHeaderProps) {
+  return (
+    <div className="flex items-center justify-between p-4 border-b border-border">
+      <div className="flex items-center gap-2">
+        <Clock className="h-5 w-5" />
+        <h3 className="font-medium">Time Travel Debugger</h3>
+        {currentState && (
+          <Badge variant="outline" className="ml-2">
+            {formatTime(currentState.timestamp)}
+          </Badge>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon" onClick={onToggleExpand}>
+          {isExpanded ? (
+            <Minimize2 className="h-4 w-4" />
+          ) : (
+            <Maximize2 className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function formatTime(timestamp: string) {
+  return new Date(timestamp).toLocaleTimeString();
+}

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

@@ -0,0 +1,174 @@
+import { Button } from "@/design-system/ui/button";
+import { Slider } from "@/design-system/ui/slider";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import {
+  FastForward,
+  Pause,
+  Play,
+  Rewind,
+  SkipBack,
+  SkipForward,
+} from "lucide-react";
+
+interface TimeTravelPlaybackControlsProps {
+  currentStateIndex: number;
+  totalStates: number;
+  playbackSpeed: number;
+  isPlaying: boolean;
+  onPlay: () => void;
+  onPause: () => void;
+  onRestart: () => void;
+  onSkipForward: () => void;
+  onSkipBackward: () => void;
+  onJumpToEnd: () => void;
+  onSliderChange: (index: number) => void;
+  onSpeedChange: (speed: number) => void;
+}
+
+export function TimeTravelPlaybackControls({
+  currentStateIndex,
+  totalStates,
+  playbackSpeed,
+  isPlaying,
+  onPlay,
+  onPause,
+  onRestart,
+  onSkipForward,
+  onSkipBackward,
+  onJumpToEnd,
+  onSliderChange,
+  onSpeedChange,
+}: TimeTravelPlaybackControlsProps) {
+  const atBeginning = currentStateIndex === 0;
+  const atEnd = currentStateIndex >= totalStates - 1;
+
+  return (
+    <div className="p-4 border-b border-border">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={onRestart}
+                  disabled={atBeginning}
+                >
+                  <SkipBack className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Restart</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={onSkipBackward}
+                  disabled={atBeginning}
+                >
+                  <Rewind className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Previous Step</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          {isPlaying ? (
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={onPause}
+            >
+              <Pause className="h-4 w-4" />
+            </Button>
+          ) : (
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-8 w-8"
+              onClick={onPlay}
+              disabled={atEnd}
+            >
+              <Play className="h-4 w-4" />
+            </Button>
+          )}
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={onSkipForward}
+                  disabled={atEnd}
+                >
+                  <FastForward className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Next Step</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={onJumpToEnd}
+                  disabled={atEnd}
+                >
+                  <SkipForward className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Jump to End</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">Speed:</span>
+          {([0.5, 1, 2, 4] as const).map((speed) => (
+            <Button
+              key={speed}
+              variant={playbackSpeed === speed ? "secondary" : "ghost"}
+              size="sm"
+              className="h-7 px-2"
+              onClick={() => onSpeedChange(speed)}
+            >
+              {speed}x
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div className="px-2">
+        <Slider
+          value={[currentStateIndex]}
+          min={0}
+          max={Math.max(totalStates - 1, 0)}
+          step={1}
+          onValueChange={(value) => onSliderChange(value[0] ?? 0)}
+        />
+        <div className="flex justify-between mt-1 text-xs text-muted-foreground">
+          <span>Start</span>
+          <span>
+            Step {Math.min(currentStateIndex + 1, totalStates)} of {totalStates}
+          </span>
+          <span>End</span>
+        </div>
+      </div>
+    </div>
+  );
+}