orcheo-canvas 0.0.1

package/src/features/workflow/components/panels/workflow-history-header.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { History, RotateCcw } from "lucide-react";
+
+import { Button } from "@/design-system/ui/button";
+
+interface WorkflowHistoryHeaderProps {
+  onRestoreVersion: () => void;
+  onCompareVersions: () => void;
+  canRestore: boolean;
+  canCompare: boolean;
+}
+
+export default function WorkflowHistoryHeader({
+  onRestoreVersion,
+  onCompareVersions,
+  canRestore,
+  canCompare,
+}: WorkflowHistoryHeaderProps) {
+  return (
+    <div className="flex items-center justify-between p-4 border-b border-border">
+      <div className="flex items-center gap-2">
+        <History className="h-5 w-5" />
+
+        <h3 className="font-medium">Version History</h3>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRestoreVersion}
+          disabled={!canRestore}
+        >
+          <RotateCcw className="h-4 w-4 mr-2" />
+          Restore
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onCompareVersions}
+          disabled={!canCompare}
+        >
+          Compare
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/features/workflow/components/panels/workflow-history-table.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import { GitCommit } from "lucide-react";
+
+import { Badge } from "@/design-system/ui/badge";
+import { ScrollArea } from "@/design-system/ui/scroll-area";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/design-system/ui/table";
+import { cn } from "@/lib/utils";
+import type { WorkflowVersionRecord } from "@features/workflow/lib/workflow-storage";
+
+interface WorkflowHistoryTableProps {
+  filteredVersions: WorkflowVersionRecord[];
+  selectedVersionId: string | null;
+  currentVersion?: string;
+  searchQuery: string;
+  onSelectVersion: (versionId: string) => void;
+}
+
+const statusBadgeClass =
+  "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400";
+
+const summaryBadgeClasses: Record<"added" | "removed" | "modified", string> = {
+  added: statusBadgeClass,
+  removed: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+  modified: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+};
+
+const SummaryBadge = ({
+  type,
+  value,
+}: {
+  type: keyof typeof summaryBadgeClasses;
+  value: number;
+}) => {
+  if (value <= 0) {
+    return null;
+  }
+
+  const prefix = type === "added" ? "+" : type === "removed" ? "-" : "~";
+
+  return (
+    <Badge className={summaryBadgeClasses[type]}>{`${prefix}${value}`}</Badge>
+  );
+};
+
+export default function WorkflowHistoryTable({
+  filteredVersions,
+  selectedVersionId,
+  currentVersion,
+  searchQuery,
+  onSelectVersion,
+}: WorkflowHistoryTableProps) {
+  const renderStatusBadge = (version: WorkflowVersionRecord) => {
+    if (version.version !== currentVersion) {
+      return null;
+    }
+
+    return <Badge className={statusBadgeClass}>Current</Badge>;
+  };
+
+  return (
+    <ScrollArea className="flex-1 h-[400px]">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">Version</TableHead>
+            <TableHead>Message</TableHead>
+            <TableHead>Author</TableHead>
+            <TableHead>Date</TableHead>
+            <TableHead className="text-right">Changes</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {filteredVersions.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={5} className="text-center py-8">
+                <div className="text-muted-foreground">
+                  No versions found
+                  {searchQuery && (
+                    <p className="text-sm">Try adjusting your search query</p>
+                  )}
+                </div>
+              </TableCell>
+            </TableRow>
+          ) : (
+            filteredVersions.map((version) => {
+              const isSelected = selectedVersionId === version.id;
+              return (
+                <TableRow
+                  key={version.id}
+                  className={cn("cursor-pointer", isSelected && "bg-muted")}
+                  onClick={() => onSelectVersion(version.id)}
+                >
+                  <TableCell className="font-medium">
+                    <div className="flex items-center gap-2">
+                      <GitCommit className="h-4 w-4 text-muted-foreground" />
+
+                      {version.version}
+                      {renderStatusBadge(version)}
+                    </div>
+                  </TableCell>
+                  <TableCell>{version.message}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <div className="h-6 w-6 rounded-full overflow-hidden bg-muted">
+                        <img
+                          src={version.author.avatar}
+                          alt={version.author.name}
+                          className="h-full w-full object-cover"
+                        />
+                      </div>
+                      {version.author.name}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {new Date(version.timestamp).toLocaleString()}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end gap-2">
+                      <SummaryBadge
+                        type="added"
+                        value={version.summary.added}
+                      />
+                      <SummaryBadge
+                        type="removed"
+                        value={version.summary.removed}
+                      />
+                      <SummaryBadge
+                        type="modified"
+                        value={version.summary.modified}
+                      />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })
+          )}
+        </TableBody>
+      </Table>
+    </ScrollArea>
+  );
+}

package/src/features/workflow/components/panels/workflow-history.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+import { computeWorkflowDiff } from "@features/workflow/lib/workflow-diff";
+import type { WorkflowVersionRecord } from "@features/workflow/lib/workflow-storage";
+
+import WorkflowDiffDialog, {
+  type WorkflowDiffContext,
+} from "./workflow-diff-dialog";
+import WorkflowHistoryFilters from "./workflow-history-filters";
+import WorkflowHistoryFooter from "./workflow-history-footer";
+import WorkflowHistoryHeader from "./workflow-history-header";
+import WorkflowHistoryTable from "./workflow-history-table";
+
+interface WorkflowHistoryProps {
+  versions?: WorkflowVersionRecord[];
+  currentVersion?: string;
+  onRestoreVersion?: (versionId: string) => void;
+  className?: string;
+}
+
+export default function WorkflowHistory({
+  versions = [],
+  currentVersion,
+  onRestoreVersion,
+  className,
+}: WorkflowHistoryProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedVersionId, setSelectedVersionId] = useState<string | null>(
+    null,
+  );
+  const [compareVersionId, setCompareVersionId] = useState<string | null>(null);
+  const [showDiffDialog, setShowDiffDialog] = useState(false);
+  const [diffContext, setDiffContext] = useState<WorkflowDiffContext | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (!versions.length) {
+      setSelectedVersionId(null);
+      setCompareVersionId(null);
+      return;
+    }
+
+    if (currentVersion) {
+      const matched = versions.find(
+        (version) => version.version === currentVersion,
+      );
+      setSelectedVersionId(matched?.id ?? null);
+    } else if (!selectedVersionId) {
+      setSelectedVersionId(versions[0].id);
+    }
+  }, [currentVersion, selectedVersionId, versions]);
+
+  // Filter versions based on search query
+  const filteredVersions = useMemo(() => {
+    if (!searchQuery) {
+      return versions;
+    }
+    return versions.filter(
+      (version) =>
+        version.version.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        version.message.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        version.author.name.toLowerCase().includes(searchQuery.toLowerCase()),
+    );
+  }, [searchQuery, versions]);
+
+  const selectedVersionRecord = useMemo(() => {
+    return versions.find((version) => version.id === selectedVersionId) ?? null;
+  }, [selectedVersionId, versions]);
+
+  const compareVersionRecord = useMemo(() => {
+    return versions.find((version) => version.id === compareVersionId) ?? null;
+  }, [compareVersionId, versions]);
+
+  const handleSelectVersion = (versionId: string) => {
+    setSelectedVersionId(versionId);
+    if (compareVersionId === versionId) {
+      setCompareVersionId(null);
+    }
+  };
+
+  const handleCompareVersions = () => {
+    if (!selectedVersionRecord || !compareVersionRecord) {
+      return;
+    }
+    const diffResult = computeWorkflowDiff(
+      selectedVersionRecord.snapshot,
+      compareVersionRecord.snapshot,
+    );
+    setDiffContext({
+      base: selectedVersionRecord,
+      target: compareVersionRecord,
+      result: diffResult,
+    });
+    setShowDiffDialog(true);
+  };
+
+  const handleRestoreVersion = () => {
+    if (selectedVersionId) {
+      onRestoreVersion?.(selectedVersionId);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col border border-border rounded-lg bg-background shadow-lg",
+        className,
+      )}
+    >
+      <WorkflowHistoryHeader
+        onRestoreVersion={handleRestoreVersion}
+        onCompareVersions={handleCompareVersions}
+        canRestore={
+          !!selectedVersionRecord &&
+          (!currentVersion || selectedVersionRecord.version !== currentVersion)
+        }
+        canCompare={!!selectedVersionRecord && !!compareVersionRecord}
+      />
+
+      <WorkflowHistoryFilters
+        searchQuery={searchQuery}
+        onSearchChange={(value) => setSearchQuery(value)}
+        compareVersionId={compareVersionId}
+        onSelectCompareVersion={(value) => setCompareVersionId(value)}
+        versions={versions}
+        selectedVersionId={selectedVersionId}
+      />
+
+      <WorkflowHistoryTable
+        filteredVersions={filteredVersions}
+        selectedVersionId={selectedVersionId}
+        currentVersion={currentVersion}
+        searchQuery={searchQuery}
+        onSelectVersion={handleSelectVersion}
+      />
+
+      <WorkflowHistoryFooter totalVersions={filteredVersions.length} />
+
+      <WorkflowDiffDialog
+        open={showDiffDialog}
+        onOpenChange={setShowDiffDialog}
+        diffContext={diffContext}
+        selectedVersionRecord={selectedVersionRecord}
+        compareVersionRecord={compareVersionRecord}
+      />
+    </div>
+  );
+}

package/src/features/workflow/components/panels/workflow-node-gallery-data/categories.ts

@@ -0,0 +1,11 @@
+export const NODE_CATEGORIES = {
+  all: "All Nodes",
+  special: "Special Nodes",
+  triggers: "Triggers",
+  actions: "Actions",
+  logic: "Logic & Flow",
+  data: "Data Processing",
+  ai: "AI & ML",
+} as const;
+
+export type NodeCategory = keyof typeof NODE_CATEGORIES;

package/src/features/workflow/components/panels/workflow-node-gallery-data/items/actions.tsx

@@ -0,0 +1,39 @@
+import WorkflowNode from "@features/workflow/components/nodes/workflow-node";
+import { getNodeIcon } from "@features/workflow/lib/node-icons";
+
+import type { NodeGalleryItem } from "@/features/workflow/components/panels/workflow-node-gallery-data/types";
+
+export const actionGalleryItems: NodeGalleryItem[] = [
+  {
+    id: "http-request",
+    category: "actions",
+    component: (
+      <WorkflowNode
+        id="http-request"
+        data={{
+          label: "HTTP Request",
+          description: "Make HTTP requests",
+          iconKey: "http",
+          icon: getNodeIcon("http"),
+          type: "api",
+        }}
+      />
+    ),
+  },
+  {
+    id: "email-send",
+    category: "actions",
+    component: (
+      <WorkflowNode
+        id="email-send"
+        data={{
+          label: "Send Email",
+          description: "Send an email",
+          iconKey: "email",
+          icon: getNodeIcon("email"),
+          type: "api",
+        }}
+      />
+    ),
+  },
+];

package/src/features/workflow/components/panels/workflow-node-gallery-data/items/ai.tsx

@@ -0,0 +1,39 @@
+import WorkflowNode from "@features/workflow/components/nodes/workflow-node";
+import { getNodeIcon } from "@features/workflow/lib/node-icons";
+
+import type { NodeGalleryItem } from "@/features/workflow/components/panels/workflow-node-gallery-data/types";
+
+export const aiGalleryItems: NodeGalleryItem[] = [
+  {
+    id: "text-generation",
+    category: "ai",
+    component: (
+      <WorkflowNode
+        id="text-generation"
+        data={{
+          label: "Text Generation",
+          description: "Generate text with AI",
+          iconKey: "textGeneration",
+          icon: getNodeIcon("textGeneration"),
+          type: "ai",
+        }}
+      />
+    ),
+  },
+  {
+    id: "chat-completion",
+    category: "ai",
+    component: (
+      <WorkflowNode
+        id="chat-completion"
+        data={{
+          label: "Chat Completion",
+          description: "Generate chat responses",
+          iconKey: "chatCompletion",
+          icon: getNodeIcon("chatCompletion"),
+          type: "ai",
+        }}
+      />
+    ),
+  },
+];

package/src/features/workflow/components/panels/workflow-node-gallery-data/items/data.tsx

@@ -0,0 +1,55 @@
+import WorkflowNode from "@features/workflow/components/nodes/workflow-node";
+import { getNodeIcon } from "@features/workflow/lib/node-icons";
+
+import type { NodeGalleryItem } from "@/features/workflow/components/panels/workflow-node-gallery-data/types";
+
+export const dataGalleryItems: NodeGalleryItem[] = [
+  {
+    id: "transform",
+    category: "data",
+    component: (
+      <WorkflowNode
+        id="transform"
+        data={{
+          label: "Transform",
+          description: "Transform data",
+          iconKey: "transform",
+          icon: getNodeIcon("transform"),
+          type: "data",
+        }}
+      />
+    ),
+  },
+  {
+    id: "python-code",
+    category: "data",
+    component: (
+      <WorkflowNode
+        id="python-code"
+        data={{
+          label: "Python Code",
+          description: "Execute custom Python scripts",
+          iconKey: "python",
+          icon: getNodeIcon("python"),
+          type: "python",
+        }}
+      />
+    ),
+  },
+  {
+    id: "database",
+    category: "data",
+    component: (
+      <WorkflowNode
+        id="database"
+        data={{
+          label: "Database",
+          description: "Query database",
+          iconKey: "database",
+          icon: getNodeIcon("database"),
+          type: "data",
+        }}
+      />
+    ),
+  },
+];

package/src/features/workflow/components/panels/workflow-node-gallery-data/items/logic.tsx

@@ -0,0 +1,39 @@
+import WorkflowNode from "@features/workflow/components/nodes/workflow-node";
+import { getNodeIcon } from "@features/workflow/lib/node-icons";
+
+import type { NodeGalleryItem } from "@/features/workflow/components/panels/workflow-node-gallery-data/types";
+
+export const logicGalleryItems: NodeGalleryItem[] = [
+  {
+    id: "condition",
+    category: "logic",
+    component: (
+      <WorkflowNode
+        id="condition"
+        data={{
+          label: "If / Else",
+          description: "Branch based on a comparison",
+          iconKey: "condition",
+          icon: getNodeIcon("condition"),
+          type: "function",
+        }}
+      />
+    ),
+  },
+  {
+    id: "loop",
+    category: "logic",
+    component: (
+      <WorkflowNode
+        id="loop"
+        data={{
+          label: "While Loop",
+          description: "Iterate while a condition is true",
+          iconKey: "loop",
+          icon: getNodeIcon("loop"),
+          type: "function",
+        }}
+      />
+    ),
+  },
+];

package/src/features/workflow/components/panels/workflow-node-gallery-data/items/special.tsx

@@ -0,0 +1,50 @@
+import GroupNode from "@features/workflow/components/nodes/group-node";
+import StartEndNode from "@features/workflow/components/nodes/start-end-node";
+
+import type { NodeGalleryItem } from "@/features/workflow/components/panels/workflow-node-gallery-data/types";
+
+export const specialGalleryItems: NodeGalleryItem[] = [
+  {
+    id: "start-node",
+    category: "special",
+    component: (
+      <StartEndNode
+        id="start-node"
+        data={{
+          label: "Workflow Start",
+          type: "start",
+          description: "Beginning of the workflow",
+        }}
+      />
+    ),
+  },
+  {
+    id: "end-node",
+    category: "special",
+    component: (
+      <StartEndNode
+        id="end-node"
+        data={{
+          label: "Workflow End",
+          type: "end",
+          description: "End of the workflow",
+        }}
+      />
+    ),
+  },
+  {
+    id: "group-node",
+    category: "special",
+    component: (
+      <GroupNode
+        id="group-node"
+        data={{
+          label: "Node Group",
+          description: "Group related nodes together",
+          nodeCount: 3,
+          color: "blue",
+        }}
+      />
+    ),
+  },
+];

package/src/features/workflow/components/panels/workflow-node-gallery-data/items/triggers.tsx

@@ -0,0 +1,71 @@
+import WorkflowNode from "@features/workflow/components/nodes/workflow-node";
+import { getNodeIcon } from "@features/workflow/lib/node-icons";
+
+import type { NodeGalleryItem } from "@/features/workflow/components/panels/workflow-node-gallery-data/types";
+
+export const triggerGalleryItems: NodeGalleryItem[] = [
+  {
+    id: "webhook-trigger",
+    category: "triggers",
+    component: (
+      <WorkflowNode
+        id="webhook-trigger"
+        data={{
+          label: "Webhook",
+          description: "Trigger on HTTP webhook",
+          iconKey: "webhook",
+          icon: getNodeIcon("webhook"),
+          type: "trigger",
+        }}
+      />
+    ),
+  },
+  {
+    id: "manual-trigger",
+    category: "triggers",
+    component: (
+      <WorkflowNode
+        id="manual-trigger"
+        data={{
+          label: "Manual",
+          description: "Trigger on-demand from the dashboard",
+          iconKey: "manualTrigger",
+          icon: getNodeIcon("manualTrigger"),
+          type: "trigger",
+        }}
+      />
+    ),
+  },
+  {
+    id: "http-polling-trigger",
+    category: "triggers",
+    component: (
+      <WorkflowNode
+        id="http-polling-trigger"
+        data={{
+          label: "HTTP Polling",
+          description: "Poll an API on a schedule",
+          iconKey: "httpPolling",
+          icon: getNodeIcon("httpPolling"),
+          type: "trigger",
+        }}
+      />
+    ),
+  },
+  {
+    id: "schedule-trigger",
+    category: "triggers",
+    component: (
+      <WorkflowNode
+        id="schedule-trigger"
+        data={{
+          label: "Schedule",
+          description: "Trigger on schedule",
+          iconKey: "schedule",
+          icon: getNodeIcon("schedule"),
+          type: "trigger",
+        }}
+      />
+    ),
+  },
+];

package/src/features/workflow/components/panels/workflow-node-gallery-data/types.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+import type { NodeCategory } from "@/features/workflow/components/panels/workflow-node-gallery-data/categories";
+
+export interface NodeGalleryItem {
+  id: string;
+  category: NodeCategory;
+  component: React.ReactNode;
+}

package/src/features/workflow/components/panels/workflow-node-gallery-data.tsx

@@ -0,0 +1,21 @@
+import { NODE_CATEGORIES } from "@/features/workflow/components/panels/workflow-node-gallery-data/categories";
+import { actionGalleryItems } from "@/features/workflow/components/panels/workflow-node-gallery-data/items/actions";
+import { aiGalleryItems } from "@/features/workflow/components/panels/workflow-node-gallery-data/items/ai";
+import { dataGalleryItems } from "@/features/workflow/components/panels/workflow-node-gallery-data/items/data";
+import { logicGalleryItems } from "@/features/workflow/components/panels/workflow-node-gallery-data/items/logic";
+import { specialGalleryItems } from "@/features/workflow/components/panels/workflow-node-gallery-data/items/special";
+import { triggerGalleryItems } from "@/features/workflow/components/panels/workflow-node-gallery-data/items/triggers";
+import type { NodeCategory } from "@/features/workflow/components/panels/workflow-node-gallery-data/categories";
+import type { NodeGalleryItem } from "@/features/workflow/components/panels/workflow-node-gallery-data/types";
+
+export { NODE_CATEGORIES };
+export type { NodeCategory, NodeGalleryItem };
+
+export const NODE_GALLERY_ITEMS: NodeGalleryItem[] = [
+  ...specialGalleryItems,
+  ...triggerGalleryItems,
+  ...actionGalleryItems,
+  ...logicGalleryItems,
+  ...dataGalleryItems,
+  ...aiGalleryItems,
+];