orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-execution-details.tsx

@@ -0,0 +1,194 @@
+import { useParams, Link } from "react-router-dom";
+import { ArrowLeftIcon, RotateCwIcon } from "lucide-react";
+import { Button } from "@/design-system/ui/button";
+import { Badge } from "@/design-system/ui/badge";
+import WorkflowExecutionHistory from "@features/workflow/components/panels/workflow-execution-history";
+import WorkflowPageLayout from "@features/workflow/components/layouts/workflow-page-layout";
+
+export default function WorkflowExecutionDetails() {
+  const { executionId = "1" } = useParams();
+  // Mock execution data
+  const execution = {
+    id: executionId,
+    runId: executionId,
+    workflowName: "Customer Onboarding Workflow",
+    status: "success" as const,
+    startTime: new Date().toISOString(),
+    endTime: new Date(Date.now() + 45000).toISOString(),
+    duration: 45000, // 45 seconds
+    issues: 0,
+    triggeredBy: {
+      name: "Avery Chen",
+      avatar: "https://avatar.vercel.sh/avery",
+    },
+    nodes: [
+      {
+        id: "node-1",
+        type: "webhook",
+        name: "New Customer Webhook",
+        position: { x: 100, y: 100 },
+        status: "success" as const,
+      },
+      {
+        id: "node-2",
+        type: "http",
+        name: "Fetch Customer Details",
+        position: { x: 400, y: 100 },
+        status: "success" as const,
+        details: {
+          method: "GET",
+          url: "https://api.example.com/customers/123",
+          items: 1,
+        },
+      },
+      {
+        id: "node-3",
+        type: "function",
+        name: "Format Customer Data",
+        position: { x: 700, y: 100 },
+        status: "success" as const,
+      },
+      {
+        id: "node-4",
+        type: "api",
+        name: "Create Account",
+        position: { x: 400, y: 250 },
+        status: "success" as const,
+      },
+      {
+        id: "node-5",
+        type: "api",
+        name: "Send Welcome Email",
+        position: { x: 700, y: 250 },
+        status: "success" as const,
+        details: {
+          message: "Welcome to our platform!",
+        },
+      },
+    ],
+
+    edges: [
+      { id: "edge-1", source: "node-1", target: "node-2" },
+      { id: "edge-2", source: "node-2", target: "node-3" },
+      { id: "edge-3", source: "node-3", target: "node-4" },
+      { id: "edge-4", source: "node-4", target: "node-5" },
+    ],
+
+    logs: [
+      {
+        timestamp: "10:23:15",
+        level: "INFO" as const,
+        message: "Workflow execution started",
+      },
+      {
+        timestamp: "10:23:16",
+        level: "DEBUG" as const,
+        message: 'Executing node "New Customer Webhook"',
+      },
+      {
+        timestamp: "10:23:17",
+        level: "INFO" as const,
+        message: 'Node "New Customer Webhook" completed successfully',
+      },
+      {
+        timestamp: "10:23:18",
+        level: "DEBUG" as const,
+        message: 'Executing node "Fetch Customer Details"',
+      },
+      {
+        timestamp: "10:23:20",
+        level: "INFO" as const,
+        message: 'Node "Fetch Customer Details" completed successfully',
+      },
+      {
+        timestamp: "10:23:21",
+        level: "DEBUG" as const,
+        message: 'Executing node "Format Customer Data"',
+      },
+      {
+        timestamp: "10:23:23",
+        level: "INFO" as const,
+        message: 'Node "Format Customer Data" completed successfully',
+      },
+      {
+        timestamp: "10:23:24",
+        level: "DEBUG" as const,
+        message: 'Executing node "Create Account"',
+      },
+      {
+        timestamp: "10:23:40",
+        level: "INFO" as const,
+        message: 'Node "Create Account" completed successfully',
+      },
+      {
+        timestamp: "10:23:41",
+        level: "DEBUG" as const,
+        message: 'Executing node "Send Welcome Email"',
+      },
+      {
+        timestamp: "10:23:45",
+        level: "INFO" as const,
+        message: 'Node "Send Welcome Email" completed successfully',
+      },
+      {
+        timestamp: "10:23:45",
+        level: "INFO" as const,
+        message: "Workflow execution completed successfully",
+      },
+    ],
+  };
+
+  // Get status badge based on execution status
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "success":
+        return <Badge className="bg-green-500">Success</Badge>;
+
+      case "failed":
+        return <Badge className="bg-red-500">Failed</Badge>;
+
+      case "running":
+        return <Badge className="bg-blue-500">Running</Badge>;
+
+      case "partial":
+        return <Badge className="bg-yellow-500">Partial Success</Badge>;
+
+      default:
+        return <Badge className="bg-gray-500">Unknown</Badge>;
+    }
+  };
+
+  return (
+    <WorkflowPageLayout
+      header={
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-2">
+            <Link to="/workflow-canvas">
+              <Button variant="ghost" size="icon">
+                <ArrowLeftIcon className="h-4 w-4" />
+              </Button>
+            </Link>
+            <h1 className="text-2xl font-bold">Execution Details</h1>
+            {getStatusBadge(execution.status)}
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button variant="outline">
+              <RotateCwIcon className="mr-2 h-4 w-4" />
+              Re-run Workflow
+            </Button>
+          </div>
+        </div>
+      }
+    >
+      <WorkflowExecutionHistory
+        executions={[execution]}
+        onViewDetails={() => {}}
+        onRefresh={() => {}}
+        onCopyToEditor={() => {}}
+        onDelete={() => {}}
+        showList={false}
+        defaultSelectedExecution={execution}
+      />
+    </WorkflowPageLayout>
+  );
+}

package/src/features/workflow/pages/workflow-gallery/types.ts

@@ -0,0 +1,21 @@
+export type WorkflowGalleryTab = "all" | "favorites" | "shared" | "templates";
+
+export type WorkflowGallerySort = "updated" | "created" | "name";
+
+export interface WorkflowGalleryFilters {
+  owner: {
+    me: boolean;
+    shared: boolean;
+  };
+  status: {
+    active: boolean;
+    draft: boolean;
+    archived: boolean;
+  };
+  tags: {
+    favorite: boolean;
+    template: boolean;
+    production: boolean;
+    development: boolean;
+  };
+}

package/src/features/workflow/pages/workflow-gallery/use-workflow-gallery-actions.ts

@@ -0,0 +1,219 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "@/hooks/use-toast";
+import { type Workflow } from "@features/workflow/data/workflow-data";
+import {
+  createWorkflow,
+  createWorkflowFromTemplate,
+  deleteWorkflow,
+  duplicateWorkflow,
+} from "@features/workflow/lib/workflow-storage";
+import { type WorkflowGalleryTab } from "./types";
+
+interface WorkflowGalleryActionsArgs {
+  newFolderName: string;
+  setNewFolderName: (value: string) => void;
+  newWorkflowName: string;
+  setNewWorkflowName: (value: string) => void;
+  setSelectedTab: (value: WorkflowGalleryTab) => void;
+  setShowNewFolderDialog: (value: boolean) => void;
+  setShowNewWorkflowDialog: (value: boolean) => void;
+  setShowFilterPopover: (value: boolean) => void;
+}
+
+export const useWorkflowGalleryActions = (
+  state: WorkflowGalleryActionsArgs,
+) => {
+  const navigate = useNavigate();
+
+  const handleOpenWorkflow = useCallback(
+    (workflowId: string) => {
+      navigate(`/workflow-canvas/${workflowId}`);
+    },
+    [navigate],
+  );
+
+  const handleCreateFolder = useCallback(() => {
+    toast({
+      title: "Folder creation coming soon",
+      description: state.newFolderName
+        ? `We'll create "${state.newFolderName}" once persistence is wired up.`
+        : "Folder creation will be available in a future update.",
+    });
+
+    state.setNewFolderName("");
+    state.setShowNewFolderDialog(false);
+  }, [state]);
+
+  const handleCreateWorkflow = useCallback(async () => {
+    const name = state.newWorkflowName.trim() || "Untitled Workflow";
+
+    try {
+      const workflow = await createWorkflow({
+        name,
+        description: "",
+        tags: ["draft"],
+        nodes: [],
+        edges: [],
+      });
+
+      state.setNewWorkflowName("");
+      state.setShowNewWorkflowDialog(false);
+      state.setSelectedTab("all");
+
+      toast({
+        title: "Workflow created",
+        description: `"${workflow.name}" is ready to edit.`,
+      });
+
+      handleOpenWorkflow(workflow.id);
+    } catch (error) {
+      toast({
+        title: "Failed to create workflow",
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        variant: "destructive",
+      });
+    }
+  }, [handleOpenWorkflow, state]);
+
+  const handleUseTemplate = useCallback(
+    async (templateId: string) => {
+      try {
+        const workflow = await createWorkflowFromTemplate(templateId);
+        if (!workflow) {
+          toast({
+            title: "Template unavailable",
+            description: "We couldn't find that template. Please try another.",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        state.setSelectedTab("all");
+
+        toast({
+          title: "Template copied",
+          description: `"${workflow.name}" has been added to your workspace.`,
+        });
+
+        handleOpenWorkflow(workflow.id);
+      } catch (error) {
+        toast({
+          title: "Failed to create workflow from template",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    },
+    [handleOpenWorkflow, state],
+  );
+
+  const handleDuplicateWorkflow = useCallback(
+    async (workflowId: string) => {
+      try {
+        const copy = await duplicateWorkflow(workflowId);
+        if (!copy) {
+          toast({
+            title: "Duplicate failed",
+            description:
+              "We couldn't duplicate this workflow. Please try again.",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        state.setSelectedTab("all");
+
+        toast({
+          title: "Workflow duplicated",
+          description: `"${copy.name}" is ready to edit.`,
+        });
+
+        handleOpenWorkflow(copy.id);
+      } catch (error) {
+        toast({
+          title: "Failed to duplicate workflow",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    },
+    [handleOpenWorkflow, state],
+  );
+
+  const handleExportWorkflow = useCallback((workflow: Workflow) => {
+    try {
+      const payload = {
+        name: workflow.name,
+        description: workflow.description,
+        nodes: workflow.nodes,
+        edges: workflow.edges,
+      };
+      const serialized = JSON.stringify(payload, null, 2);
+      const blob = new Blob([serialized], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = `${
+        workflow.name.replace(/\s+/g, "-").toLowerCase() || "workflow"
+      }.json`;
+      anchor.click();
+      URL.revokeObjectURL(url);
+
+      toast({
+        title: "Workflow exported",
+        description: `Downloaded ${workflow.name}.json`,
+      });
+    } catch (error) {
+      toast({
+        title: "Export failed",
+        description:
+          error instanceof Error ? error.message : "Unable to export workflow.",
+        variant: "destructive",
+      });
+    }
+  }, []);
+
+  const handleDeleteWorkflow = useCallback(
+    async (workflowId: string, workflowName: string) => {
+      try {
+        await deleteWorkflow(workflowId);
+        toast({
+          title: "Workflow deleted",
+          description: `"${workflowName}" has been removed from your workspace.`,
+        });
+      } catch (error) {
+        toast({
+          title: "Failed to delete workflow",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    },
+    [],
+  );
+
+  const handleApplyFilters = useCallback(() => {
+    toast({
+      title: "Filters applied",
+      description:
+        "Filter changes will affect the gallery once data wiring is complete.",
+    });
+    state.setShowFilterPopover(false);
+  }, [state]);
+
+  return {
+    handleOpenWorkflow,
+    handleCreateFolder,
+    handleCreateWorkflow,
+    handleUseTemplate,
+    handleDuplicateWorkflow,
+    handleExportWorkflow,
+    handleDeleteWorkflow,
+    handleApplyFilters,
+  };
+};

package/src/features/workflow/pages/workflow-gallery/use-workflow-gallery-state.ts

@@ -0,0 +1,204 @@
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "@/hooks/use-toast";
+import {
+  SAMPLE_WORKFLOWS,
+  type Workflow,
+} from "@features/workflow/data/workflow-data";
+import {
+  listWorkflows,
+  type StoredWorkflow,
+  WORKFLOW_STORAGE_EVENT,
+} from "@features/workflow/lib/workflow-storage";
+import {
+  type WorkflowGalleryFilters,
+  type WorkflowGallerySort,
+  type WorkflowGalleryTab,
+} from "./types";
+
+interface WorkflowGalleryStateSlice {
+  searchQuery: string;
+  setSearchQuery: (value: string) => void;
+  selectedTab: WorkflowGalleryTab;
+  setSelectedTab: (value: WorkflowGalleryTab) => void;
+  sortBy: WorkflowGallerySort;
+  setSortBy: (value: WorkflowGallerySort) => void;
+  newFolderName: string;
+  setNewFolderName: (value: string) => void;
+  newWorkflowName: string;
+  setNewWorkflowName: (value: string) => void;
+  showNewFolderDialog: boolean;
+  setShowNewFolderDialog: (value: boolean) => void;
+  showNewWorkflowDialog: boolean;
+  setShowNewWorkflowDialog: (value: boolean) => void;
+  showFilterPopover: boolean;
+  setShowFilterPopover: (value: boolean) => void;
+  filters: WorkflowGalleryFilters;
+  setFilters: (value: WorkflowGalleryFilters) => void;
+  sortedWorkflows: Workflow[];
+  isTemplateView: boolean;
+  templates: Workflow[];
+}
+
+const DEFAULT_FILTERS: WorkflowGalleryFilters = {
+  owner: {
+    me: true,
+    shared: true,
+  },
+  status: {
+    active: true,
+    draft: true,
+    archived: false,
+  },
+  tags: {
+    favorite: false,
+    template: false,
+    production: false,
+    development: false,
+  },
+};
+
+export const useWorkflowGalleryState = (): WorkflowGalleryStateSlice => {
+  const [workflows, setWorkflows] = useState<StoredWorkflow[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTab, setSelectedTab] = useState<WorkflowGalleryTab>("all");
+  const [sortBy, setSortBy] = useState<WorkflowGallerySort>("updated");
+  const [newFolderName, setNewFolderName] = useState("");
+  const [newWorkflowName, setNewWorkflowName] = useState("");
+  const [showNewFolderDialog, setShowNewFolderDialog] = useState(false);
+  const [showNewWorkflowDialog, setShowNewWorkflowDialog] = useState(false);
+  const [showFilterPopover, setShowFilterPopover] = useState(false);
+  const [filters, setFilters] =
+    useState<WorkflowGalleryFilters>(DEFAULT_FILTERS);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const load = async () => {
+      try {
+        const items = await listWorkflows();
+        if (isMounted) {
+          setWorkflows(items);
+        }
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        console.error("Failed to load workflows", error);
+        toast({
+          title: "Unable to load workflows",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    };
+
+    void load();
+
+    const targetWindow = typeof window !== "undefined" ? window : undefined;
+    if (targetWindow) {
+      const handler = () => {
+        void load();
+      };
+      targetWindow.addEventListener(WORKFLOW_STORAGE_EVENT, handler);
+
+      return () => {
+        isMounted = false;
+        targetWindow.removeEventListener(WORKFLOW_STORAGE_EVENT, handler);
+      };
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const templates = useMemo(() => SAMPLE_WORKFLOWS, []);
+  const defaultOwnerId = templates[0]?.owner.id ?? "user-1";
+  const isTemplateView = selectedTab === "templates";
+
+  const filteredWorkflows = useMemo(() => {
+    const collection: Workflow[] = isTemplateView ? templates : workflows;
+    const query = searchQuery.toLowerCase();
+
+    return collection.filter((workflow) => {
+      const matchesSearch =
+        workflow.name.toLowerCase().includes(query) ||
+        (workflow.description &&
+          workflow.description.toLowerCase().includes(query));
+
+      if (!matchesSearch) {
+        return false;
+      }
+
+      if (isTemplateView) {
+        return workflow.tags.includes("template");
+      }
+
+      if (selectedTab === "favorites") {
+        return workflow.tags.includes("favorite");
+      }
+
+      if (selectedTab === "shared") {
+        return workflow.owner?.id !== defaultOwnerId;
+      }
+
+      if (selectedTab === "templates") {
+        return workflow.tags.includes("template");
+      }
+
+      return true;
+    });
+  }, [
+    defaultOwnerId,
+    isTemplateView,
+    searchQuery,
+    selectedTab,
+    templates,
+    workflows,
+  ]);
+
+  const sortedWorkflows = useMemo(() => {
+    return [...filteredWorkflows].sort((a, b) => {
+      if (sortBy === "name") {
+        return a.name.localeCompare(b.name);
+      }
+      if (sortBy === "updated") {
+        return (
+          new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+        );
+      }
+      if (sortBy === "created") {
+        return (
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        );
+      }
+      return 0;
+    });
+  }, [filteredWorkflows, sortBy]);
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    selectedTab,
+    setSelectedTab,
+    sortBy,
+    setSortBy,
+    newFolderName,
+    setNewFolderName,
+    newWorkflowName,
+    setNewWorkflowName,
+    showNewFolderDialog,
+    setShowNewFolderDialog,
+    showNewWorkflowDialog,
+    setShowNewWorkflowDialog,
+    showFilterPopover,
+    setShowFilterPopover,
+    filters,
+    setFilters,
+    sortedWorkflows,
+    isTemplateView,
+    templates,
+  };
+};

package/src/features/workflow/pages/workflow-gallery/use-workflow-gallery.ts

@@ -0,0 +1,21 @@
+import { useWorkflowGalleryActions } from "./use-workflow-gallery-actions";
+import { useWorkflowGalleryState } from "./use-workflow-gallery-state";
+
+export const useWorkflowGallery = () => {
+  const state = useWorkflowGalleryState();
+  const actions = useWorkflowGalleryActions({
+    newFolderName: state.newFolderName,
+    setNewFolderName: state.setNewFolderName,
+    newWorkflowName: state.newWorkflowName,
+    setNewWorkflowName: state.setNewWorkflowName,
+    setSelectedTab: state.setSelectedTab,
+    setShowNewFolderDialog: state.setShowNewFolderDialog,
+    setShowNewWorkflowDialog: state.setShowNewWorkflowDialog,
+    setShowFilterPopover: state.setShowFilterPopover,
+  });
+
+  return {
+    ...state,
+    ...actions,
+  };
+};