orcheo-studio 0.21.1

package/src/features/workflow/pages/workflow/hooks/workflow-runner-websocket.ts

@@ -0,0 +1,150 @@
+import { toast } from "@/hooks/use-toast";
+
+import type { MutableRefObject } from "react";
+
+import type {
+  NodeStatus,
+  WorkflowExecution,
+} from "@features/workflow/pages/workflow/helpers/types";
+import type { TraceUpdateMessage } from "@features/workflow/pages/workflow/helpers/trace";
+
+interface WebSocketParams {
+  ws: WebSocket;
+  executionId: string;
+  config: Record<string, unknown>;
+  graphToWorkflow: Record<string, string>;
+  storedRunnableConfig?: Record<string, unknown> | null;
+  nodes: unknown[];
+  currentWorkflowId: string | null;
+  isMountedRef: MutableRefObject<boolean>;
+  applyExecutionUpdate: (
+    executionId: string,
+    payload: Record<string, unknown>,
+    graphToWorkflow: Record<string, string>,
+  ) => void;
+  setIsRunning: React.Dispatch<React.SetStateAction<boolean>>;
+  setExecutions: React.Dispatch<React.SetStateAction<WorkflowExecution[]>>;
+  websocketRef: MutableRefObject<WebSocket | null>;
+  onTraceUpdate?: (update: TraceUpdateMessage) => void;
+}
+
+export function setupExecutionWebSocket({
+  ws,
+  executionId,
+  config,
+  graphToWorkflow,
+  storedRunnableConfig,
+  nodes,
+  currentWorkflowId,
+  isMountedRef,
+  applyExecutionUpdate,
+  setIsRunning,
+  setExecutions,
+  websocketRef,
+  onTraceUpdate,
+}: WebSocketParams) {
+  const startTime = new Date();
+
+  ws.onopen = () => {
+    const payload = {
+      type: "run_workflow",
+      graph_config: config,
+      ...(storedRunnableConfig
+        ? { stored_runnable_config: storedRunnableConfig }
+        : {}),
+      inputs: {
+        workflow: {
+          triggered_from: "studio-app",
+          workflow_id: currentWorkflowId ?? "studio-preview",
+          at: startTime.toISOString(),
+        },
+        metadata: {
+          node_count: nodes.length,
+          edge_count: graphToWorkflow ? Object.keys(graphToWorkflow).length : 0,
+        },
+      },
+      execution_id: executionId,
+    };
+    ws.send(JSON.stringify(payload));
+  };
+
+  ws.onmessage = (event) => {
+    if (!isMountedRef.current) {
+      return;
+    }
+    try {
+      const data = JSON.parse(event.data) as Record<string, unknown>;
+      if (data?.type === "trace:update") {
+        onTraceUpdate?.(data as TraceUpdateMessage);
+        return;
+      }
+      applyExecutionUpdate(executionId, data, graphToWorkflow);
+    } catch (error) {
+      console.error("Failed to parse workflow update", error);
+      toast({
+        title: "Workflow update error",
+        description:
+          error instanceof Error ? error.message : "Unknown parsing error",
+        variant: "destructive",
+      });
+    }
+  };
+
+  ws.onerror = () => {
+    if (!isMountedRef.current) {
+      return;
+    }
+    const timestamp = new Date();
+    setIsRunning(false);
+    setExecutions((prev) =>
+      prev.map((execution) => {
+        if (execution.id !== executionId) {
+          return execution;
+        }
+        const errorLog = {
+          timestamp: timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+          }),
+          level: "ERROR" as const,
+          message: "WebSocket connection reported an error.",
+        };
+        const updatedNodes = execution.nodes.map((node) =>
+          node.status === "running"
+            ? { ...node, status: "error" as NodeStatus }
+            : node,
+        );
+        return {
+          ...execution,
+          status: execution.status === "success" ? execution.status : "failed",
+          nodes: updatedNodes,
+          logs: [...execution.logs, errorLog],
+          endTime: execution.endTime ?? timestamp.toISOString(),
+          duration:
+            timestamp.getTime() - new Date(execution.startTime).getTime(),
+          issues: execution.issues + 1,
+        };
+      }),
+    );
+    toast({
+      title: "Workflow stream error",
+      description: "The WebSocket connection reported an error.",
+      variant: "destructive",
+    });
+    if (websocketRef.current === ws) {
+      websocketRef.current.close();
+      websocketRef.current = null;
+    }
+  };
+
+  ws.onclose = () => {
+    if (!isMountedRef.current) {
+      return;
+    }
+    setIsRunning(false);
+    if (websocketRef.current === ws) {
+      websocketRef.current = null;
+    }
+  };
+}

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

@@ -0,0 +1,3 @@
+export type WorkflowGalleryTab = "all" | "pinned" | "templates";
+
+export type WorkflowGalleryTabCounts = Record<WorkflowGalleryTab, number>;

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

@@ -0,0 +1,223 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "@/hooks/use-toast";
+import {
+  getWorkflowTemplateDefinition,
+  type Workflow,
+} from "@features/workflow/data/workflow-data";
+import { getCandidateBadgeDefinition } from "@features/workflow/data/templates/candidate-badges";
+import {
+  deleteWorkflow,
+  onboardCandidateAsWorkflow,
+} from "@features/workflow/lib/workflow-storage";
+import { fetchWorkflowVersions } from "@features/workflow/lib/workflow-storage-api";
+import { getWorkflowRouteRef } from "@features/workflow/lib/workflow-storage-helpers";
+import { getSelectedWorkspaceSlug } from "@/lib/workspace-session";
+import { getWorkspaceWorkflowPath } from "@/lib/workspace-routing";
+import { type WorkflowGalleryTab } from "./types";
+
+interface WorkflowGalleryActionsArgs {
+  setSelectedTab: (value: WorkflowGalleryTab) => void;
+}
+
+const STARTER_TEMPLATE_IDS = ["template-python-agent"];
+const WORKFLOW_FALLBACK_EXPORT_NAME = "workflow";
+
+const toDownloadBasename = (workflowName: string): string => {
+  const normalized = workflowName.trim().replace(/\s+/g, "-").toLowerCase();
+  return normalized.length > 0 ? normalized : WORKFLOW_FALLBACK_EXPORT_NAME;
+};
+
+const getLangGraphSource = (
+  workflowName: string,
+  graph: Record<string, unknown>,
+): string => {
+  const graphFormat =
+    typeof graph.format === "string" ? graph.format : "unknown";
+  const graphSource = graph.source;
+
+  if (
+    graphFormat === "langgraph-script" &&
+    typeof graphSource === "string" &&
+    graphSource.trim().length > 0
+  ) {
+    return graphSource;
+  }
+
+  throw new Error(
+    `Workflow '${workflowName}' uses unsupported format '${graphFormat}'. Only LangGraph script versions can be exported.`,
+  );
+};
+
+export const resolveWorkflowPythonSource = async (
+  workflow: Workflow,
+): Promise<string> => {
+  const templateDefinition = getWorkflowTemplateDefinition(workflow.id);
+  if (
+    templateDefinition &&
+    typeof templateDefinition.script === "string" &&
+    templateDefinition.script.trim().length > 0
+  ) {
+    return templateDefinition.script;
+  }
+
+  const versions = await fetchWorkflowVersions(workflow.id);
+  if (versions.length === 0) {
+    throw new Error(`Workflow '${workflow.name}' has no versions to export.`);
+  }
+
+  const latestVersion = versions.reduce((latest, current) =>
+    current.version > latest.version ? current : latest,
+  );
+
+  if (!latestVersion.graph || typeof latestVersion.graph !== "object") {
+    throw new Error(`Workflow '${workflow.name}' has no exportable source.`);
+  }
+
+  return getLangGraphSource(workflow.name, latestVersion.graph);
+};
+
+export const useWorkflowGalleryActions = (
+  state: WorkflowGalleryActionsArgs,
+) => {
+  const navigate = useNavigate();
+
+  const handleOpenWorkflow = useCallback(
+    (workflowId: string) => {
+      navigate(
+        getWorkspaceWorkflowPath(getSelectedWorkspaceSlug(), workflowId),
+      );
+    },
+    [navigate],
+  );
+
+  const handleUseTemplate = useCallback(
+    async (templateId: string) => {
+      try {
+        const badge = getCandidateBadgeDefinition(templateId);
+        if (!badge?.candidateId) {
+          toast({
+            title: "Candidate unavailable",
+            description: "We couldn't find that candidate. Please try another.",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        const workflow = await onboardCandidateAsWorkflow(badge.candidateId);
+
+        state.setSelectedTab("all");
+
+        toast({
+          title: "Candidate onboarded",
+          description: `"${workflow.name}" has been onboarded to your workspace.`,
+        });
+
+        handleOpenWorkflow(getWorkflowRouteRef(workflow));
+      } catch (error) {
+        toast({
+          title: "Failed to onboard candidate",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    },
+    [handleOpenWorkflow, state],
+  );
+
+  const handleImportStarterPack = useCallback(async () => {
+    try {
+      const results = await Promise.allSettled(
+        STARTER_TEMPLATE_IDS.flatMap((templateId) => {
+          const badge = getCandidateBadgeDefinition(templateId);
+          if (!badge?.candidateId) return [];
+          return [onboardCandidateAsWorkflow(badge.candidateId)];
+        }),
+      );
+      const importedCount = results.filter(
+        (result) => result.status === "fulfilled" && result.value,
+      ).length;
+
+      if (importedCount === 0) {
+        toast({
+          title: "Starter pack unavailable",
+          description:
+            "No starter colleagues were imported. Please try again later.",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      state.setSelectedTab("all");
+
+      toast({
+        title: "Starter pack imported",
+        description: `${importedCount} Python colleague${importedCount === 1 ? "" : "s"} added to your workspace.`,
+      });
+    } catch (error) {
+      toast({
+        title: "Failed to import starter pack",
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        variant: "destructive",
+      });
+    }
+  }, [state]);
+
+  const handleExportWorkflow = useCallback(async (workflow: Workflow) => {
+    try {
+      const source = await resolveWorkflowPythonSource(workflow);
+      const fileBaseName = toDownloadBasename(workflow.name);
+      const blob = new Blob([source], { type: "text/x-python" });
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = `${fileBaseName}.py`;
+      anchor.click();
+      URL.revokeObjectURL(url);
+
+      toast({
+        title: "Colleague transferred",
+        description: `Downloaded ${fileBaseName}.py`,
+      });
+    } catch (error) {
+      toast({
+        title: "Transfer failed",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Unable to transfer colleague.",
+        variant: "destructive",
+      });
+    }
+  }, []);
+
+  const handleDeleteWorkflow = useCallback(
+    async (workflowId: string, workflowName: string) => {
+      try {
+        await deleteWorkflow(workflowId);
+        toast({
+          title: "Colleague offboarded",
+          description: `"${workflowName}" has been removed from your workspace.`,
+        });
+      } catch (error) {
+        toast({
+          title: "Failed to offboard colleague",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    },
+    [],
+  );
+
+  return {
+    handleOpenWorkflow,
+    handleUseTemplate,
+    handleImportStarterPack,
+    handleExportWorkflow,
+    handleDeleteWorkflow,
+  };
+};

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

@@ -0,0 +1,206 @@
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "@/hooks/use-toast";
+import {
+  GALLERY_TEMPLATE_WORKFLOWS,
+  type Workflow,
+} from "@features/workflow/data/workflow-data";
+import {
+  type CandidateBadgeSpec,
+  getCandidateWorkflows,
+  setCandidateBadges,
+} from "@features/workflow/data/templates/candidate-badges";
+import {
+  listWorkflows,
+  type StoredWorkflow,
+  WORKFLOW_STORAGE_EVENT,
+} from "@features/workflow/lib/workflow-storage";
+import {
+  type ApiCandidate,
+  fetchCandidates,
+} from "@features/workflow/lib/workflow-storage-api";
+import {
+  type WorkflowGalleryTab,
+  type WorkflowGalleryTabCounts,
+} from "./types";
+
+interface WorkflowGalleryStateSlice {
+  searchQuery: string;
+  setSearchQuery: (value: string) => void;
+  selectedTab: WorkflowGalleryTab;
+  setSelectedTab: (value: WorkflowGalleryTab) => void;
+  isLoadingWorkflows: boolean;
+  sortedWorkflows: Workflow[];
+  tabCounts: WorkflowGalleryTabCounts;
+  isTemplateView: boolean;
+  templates: Workflow[];
+}
+
+const toCandidateSpec = (candidate: ApiCandidate): CandidateBadgeSpec => ({
+  id: `template-${candidate.id.replace(/\//g, "-")}`,
+  candidateId: candidate.id,
+  name: candidate.name,
+  handle: candidate.handle,
+  subtitle: candidate.subtitle ?? undefined,
+  description: candidate.description ?? undefined,
+  avatar: candidate.avatar ?? undefined,
+  notes: candidate.notes,
+  mermaid: candidate.mermaid,
+  rawMetadata: candidate.metadata,
+});
+
+const matchesWorkflowSearch = (
+  workflow: Workflow,
+  normalizedSearchQuery: string,
+) => {
+  return (
+    normalizedSearchQuery.length === 0 ||
+    workflow.name.toLowerCase().includes(normalizedSearchQuery) ||
+    (workflow.description?.toLowerCase().includes(normalizedSearchQuery) ??
+      false)
+  );
+};
+
+export const useWorkflowGalleryState = (): WorkflowGalleryStateSlice => {
+  const [workflows, setWorkflows] = useState<StoredWorkflow[]>([]);
+  const [candidateWorkflows, setCandidateWorkflows] = useState<Workflow[]>([]);
+  const [isLoadingWorkflows, setIsLoadingWorkflows] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedTab, setSelectedTab] = useState<WorkflowGalleryTab>("all");
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadCandidates = async () => {
+      try {
+        // Load both candidates and existing workflows to check for handle conflicts
+        const [candidates, existingWorkflows] = await Promise.all([
+          fetchCandidates(),
+          listWorkflows(),
+        ]);
+        if (!isMounted) {
+          return;
+        }
+        setCandidateBadges(candidates.map(toCandidateSpec), existingWorkflows);
+        setCandidateWorkflows(getCandidateWorkflows());
+      } catch (error) {
+        if (isMounted) {
+          console.error("Failed to load candidate colleagues", error);
+        }
+      }
+    };
+
+    void loadCandidates();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const load = async (forceRefresh = false) => {
+      if (isMounted) {
+        setIsLoadingWorkflows(true);
+      }
+      try {
+        const items = await listWorkflows({ forceRefresh });
+        if (isMounted) {
+          setWorkflows(items);
+        }
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        console.error("Failed to load colleagues", error);
+        toast({
+          title: "Unable to load colleagues",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      } finally {
+        if (isMounted) {
+          setIsLoadingWorkflows(false);
+        }
+      }
+    };
+
+    void load();
+
+    const targetWindow = typeof window !== "undefined" ? window : undefined;
+    if (targetWindow) {
+      const handler = () => {
+        void load(true);
+      };
+      targetWindow.addEventListener(WORKFLOW_STORAGE_EVENT, handler);
+
+      return () => {
+        isMounted = false;
+        targetWindow.removeEventListener(WORKFLOW_STORAGE_EVENT, handler);
+      };
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const templates = useMemo(
+    () => [...GALLERY_TEMPLATE_WORKFLOWS, ...candidateWorkflows],
+    [candidateWorkflows],
+  );
+  const isTemplateView = selectedTab === "templates";
+  const normalizedSearchQuery = searchQuery.trim().toLowerCase();
+
+  const searchableWorkflows = useMemo(() => {
+    return workflows.filter((workflow) =>
+      matchesWorkflowSearch(workflow, normalizedSearchQuery),
+    );
+  }, [workflows, normalizedSearchQuery]);
+
+  const searchableTemplates = useMemo(() => {
+    return templates.filter(
+      (workflow) =>
+        matchesWorkflowSearch(workflow, normalizedSearchQuery) &&
+        workflow.tags.includes("template"),
+    );
+  }, [templates, normalizedSearchQuery]);
+
+  const tabCounts = useMemo<WorkflowGalleryTabCounts>(() => {
+    return {
+      all: searchableWorkflows.length,
+      pinned: searchableWorkflows.filter((workflow) =>
+        workflow.tags.includes("favorite"),
+      ).length,
+      templates: searchableTemplates.length,
+    };
+  }, [searchableTemplates, searchableWorkflows]);
+
+  const filteredWorkflows = useMemo(() => {
+    if (isTemplateView) {
+      return searchableTemplates;
+    }
+
+    if (selectedTab === "pinned") {
+      return searchableWorkflows.filter((workflow) =>
+        workflow.tags.includes("favorite"),
+      );
+    }
+
+    return searchableWorkflows;
+  }, [isTemplateView, searchableTemplates, searchableWorkflows, selectedTab]);
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    selectedTab,
+    setSelectedTab,
+    isLoadingWorkflows,
+    sortedWorkflows: filteredWorkflows,
+    tabCounts,
+    isTemplateView,
+    templates,
+  };
+};

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

@@ -0,0 +1,14 @@
+import { useWorkflowGalleryActions } from "./use-workflow-gallery-actions";
+import { useWorkflowGalleryState } from "./use-workflow-gallery-state";
+
+export const useWorkflowGallery = () => {
+  const state = useWorkflowGalleryState();
+  const actions = useWorkflowGalleryActions({
+    setSelectedTab: state.setSelectedTab,
+  });
+
+  return {
+    ...state,
+    ...actions,
+  };
+};

package/src/features/workflow/pages/workflow-gallery/workflow-card-size.ts

@@ -0,0 +1,8 @@
+const ID_1_WIDTH_MM = 53.98;
+const ID_1_HEIGHT_MM = 85.6;
+
+export const WORKFLOW_GALLERY_CARD_ASPECT_RATIO =
+  ID_1_WIDTH_MM / ID_1_HEIGHT_MM;
+
+export const WORKFLOW_GALLERY_CARD_ASPECT_CLASSNAME =
+  "aspect-[121/192]" as const;