orcheo-canvas 0.0.1

package/src/features/workflow/lib/workflow-storage.ts

@@ -0,0 +1,183 @@
+import { SAMPLE_WORKFLOWS } from "@features/workflow/data/workflow-data";
+import { computeWorkflowDiff, type WorkflowSnapshot } from "./workflow-diff";
+import {
+  DEFAULT_ACTOR,
+  WORKFLOW_STORAGE_EVENT,
+} from "./workflow-storage.constants";
+import {
+  cloneEdges,
+  cloneNodes,
+  emptySnapshot,
+  toStoredWorkflow,
+} from "./workflow-storage-helpers";
+import {
+  API_BASE,
+  fetchWorkflowVersions,
+  request,
+  upsertWorkflow,
+} from "./workflow-storage-api";
+import {
+  defaultVersionMessage,
+  ensureWorkflow,
+  persistVersion,
+} from "./workflow-storage-versioning";
+import type {
+  ApiWorkflow,
+  SaveWorkflowInput,
+  SaveWorkflowOptions,
+  StoredWorkflow,
+} from "./workflow-storage.types";
+
+const emitUpdate = () => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.dispatchEvent(new CustomEvent(WORKFLOW_STORAGE_EVENT));
+};
+
+export const listWorkflows = async (): Promise<StoredWorkflow[]> => {
+  const workflows = await request<ApiWorkflow[]>(API_BASE);
+  const activeWorkflows = workflows.filter(
+    (workflow) => workflow.is_archived !== true,
+  );
+  const items = await Promise.all(
+    activeWorkflows.map(async (workflow) => {
+      const versions = await fetchWorkflowVersions(workflow.id);
+      return toStoredWorkflow(workflow, versions);
+    }),
+  );
+  return items.filter((workflow) => workflow.isArchived !== true);
+};
+
+export const getWorkflowById = async (
+  workflowId: string,
+): Promise<StoredWorkflow | undefined> => {
+  return ensureWorkflow(workflowId);
+};
+
+export const saveWorkflow = async (
+  input: SaveWorkflowInput,
+  options?: SaveWorkflowOptions,
+): Promise<StoredWorkflow> => {
+  const actor = options?.actor ?? DEFAULT_ACTOR;
+  const existing = input.id ? await ensureWorkflow(input.id) : undefined;
+  const previousSnapshot: WorkflowSnapshot =
+    existing?.versions.at(-1)?.snapshot ??
+    emptySnapshot(existing?.name ?? input.name, existing?.description);
+
+  const currentSnapshot: WorkflowSnapshot = {
+    name: input.name,
+    description: input.description,
+    nodes: cloneNodes(input.nodes),
+    edges: cloneEdges(input.edges),
+  };
+
+  const diff = computeWorkflowDiff(previousSnapshot, currentSnapshot);
+  const needsVersion =
+    !existing || existing.versions.length === 0 || diff.entries.length > 0;
+
+  const workflowId = await upsertWorkflow(input, actor);
+
+  if (needsVersion) {
+    const message = options?.versionMessage ?? defaultVersionMessage();
+    await persistVersion(
+      workflowId,
+      input,
+      currentSnapshot,
+      diff,
+      actor,
+      message,
+    );
+  }
+
+  const stored = await ensureWorkflow(workflowId);
+  if (!stored) {
+    throw new Error("Failed to load persisted workflow");
+  }
+
+  emitUpdate();
+  return stored;
+};
+
+export const createWorkflow = async (
+  input: Omit<SaveWorkflowInput, "id">,
+): Promise<StoredWorkflow> => {
+  return saveWorkflow(input, { versionMessage: "Initial draft" });
+};
+
+export const createWorkflowFromTemplate = async (
+  templateId: string,
+  overrides?: Partial<Omit<SaveWorkflowInput, "nodes" | "edges">>,
+): Promise<StoredWorkflow | undefined> => {
+  const template = SAMPLE_WORKFLOWS.find(
+    (workflow) => workflow.id === templateId,
+  );
+  if (!template) {
+    return undefined;
+  }
+
+  return saveWorkflow({
+    name: overrides?.name ?? `${template.name} Copy`,
+    description: overrides?.description ?? template.description,
+    tags: overrides?.tags ?? template.tags.filter((tag) => tag !== "template"),
+    nodes: cloneNodes(template.nodes),
+    edges: cloneEdges(template.edges),
+  });
+};
+
+export const duplicateWorkflow = async (
+  workflowId: string,
+): Promise<StoredWorkflow | undefined> => {
+  const existing = await getWorkflowById(workflowId);
+  if (!existing) {
+    return undefined;
+  }
+
+  const snapshot =
+    existing.versions.at(-1)?.snapshot ??
+    ({
+      name: existing.name,
+      description: existing.description,
+      nodes: existing.nodes,
+      edges: existing.edges,
+    } satisfies WorkflowSnapshot);
+
+  return saveWorkflow(
+    {
+      name: `${existing.name} Copy`,
+      description: existing.description,
+      tags: existing.tags,
+      nodes: cloneNodes(snapshot.nodes),
+      edges: cloneEdges(snapshot.edges),
+    },
+    { versionMessage: `Duplicated from ${existing.name}` },
+  );
+};
+
+export const getVersionSnapshot = async (
+  workflowId: string,
+  versionId: string,
+): Promise<WorkflowSnapshot | undefined> => {
+  const workflow = await getWorkflowById(workflowId);
+  return workflow?.versions.find((entry) => entry.id === versionId)?.snapshot;
+};
+
+export const deleteWorkflow = async (
+  workflowId: string,
+  actor: string = DEFAULT_ACTOR,
+): Promise<void> => {
+  await request<void>(
+    `${API_BASE}/${workflowId}?actor=${encodeURIComponent(actor)}`,
+    { method: "DELETE", expectJson: false },
+  );
+  emitUpdate();
+};
+
+export type {
+  StoredWorkflow,
+  WorkflowVersionRecord,
+  SaveWorkflowInput,
+  SaveWorkflowOptions,
+} from "./workflow-storage.types";
+
+export { WORKFLOW_STORAGE_EVENT } from "./workflow-storage.constants";

package/src/features/workflow/lib/workflow-storage.types.ts

@@ -0,0 +1,76 @@
+import type {
+  Workflow,
+  WorkflowEdge,
+  WorkflowNode,
+} from "@features/workflow/data/workflow-data";
+import type { WorkflowDiffResult, WorkflowSnapshot } from "./workflow-diff";
+
+export interface ApiWorkflow {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  tags: string[];
+  is_archived: boolean;
+  is_public: boolean;
+  require_login: boolean;
+  published_at: string | null;
+  published_by: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ApiWorkflowVersion {
+  id: string;
+  workflow_id: string;
+  version: number;
+  graph: Record<string, unknown>;
+  metadata: unknown;
+  notes: string | null;
+  created_by: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CanvasVersionMetadata {
+  snapshot?: WorkflowSnapshot;
+  summary?: WorkflowDiffResult["summary"];
+  message?: string;
+  canvasToGraph?: Record<string, string>;
+  graphToCanvas?: Record<string, string>;
+}
+
+export interface RequestOptions extends RequestInit {
+  expectJson?: boolean;
+}
+
+export interface WorkflowVersionRecord {
+  id: string;
+  version: string;
+  versionNumber: number;
+  timestamp: string;
+  message: string;
+  author: Workflow["owner"];
+  summary: WorkflowDiffResult["summary"];
+  snapshot: WorkflowSnapshot;
+  graphToCanvas?: Record<string, string>;
+}
+
+export interface StoredWorkflow extends Workflow {
+  versions: WorkflowVersionRecord[];
+  isArchived?: boolean;
+}
+
+export interface SaveWorkflowInput {
+  id?: string;
+  name: string;
+  description?: string;
+  tags?: string[];
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+}
+
+export interface SaveWorkflowOptions {
+  versionMessage?: string;
+  actor?: string;
+}

package/src/features/workflow/pages/workflow-canvas/components/canvas-tab-content.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import { Panel } from "@xyflow/react";
+
+import SidebarPanel from "@features/workflow/components/panels/sidebar-panel";
+import WorkflowFlow from "@features/workflow/components/canvas/workflow-flow";
+import WorkflowControls from "@features/workflow/components/canvas/workflow-controls";
+import WorkflowSearch from "@features/workflow/components/canvas/workflow-search";
+import ConnectionValidator from "@features/workflow/components/canvas/connection-validator";
+import { EdgeHoverContext } from "@features/workflow/components/canvas/edge-hover-context";
+
+import type {
+  CanvasEdge,
+  CanvasNode,
+  SidebarNodeDefinition,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type { Connection } from "@xyflow/react";
+import type { MutableRefObject } from "react";
+import type { ValidationError } from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+type WorkflowFlowProps = React.ComponentProps<typeof WorkflowFlow>;
+
+interface FlowHandlers
+  extends Pick<
+    WorkflowFlowProps,
+    | "onNodesChange"
+    | "onEdgesChange"
+    | "onNodeClick"
+    | "onNodeDoubleClick"
+    | "onEdgeMouseEnter"
+    | "onEdgeMouseLeave"
+    | "onInit"
+  > {
+  nodes: CanvasNode[];
+  edges: CanvasEdge[];
+  onConnect: (connection: Connection) => void;
+}
+
+interface SearchHandlers {
+  isOpen: boolean;
+  onSearch: (value: string) => void;
+  onHighlightNext: () => void;
+  onHighlightPrevious: () => void;
+  onClose: () => void;
+  matchCount: number;
+  currentMatchIndex: number;
+  className?: string;
+}
+
+interface ControlsHandlers {
+  isRunning: boolean;
+  onRun: () => void;
+  onPause: () => void;
+  onSave: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  onDuplicate: () => void;
+  onExport: () => void;
+  onImport: () => void;
+  onToggleSearch: () => void;
+  isSearchOpen: boolean;
+}
+
+interface ConnectionValidationProps {
+  errors: ValidationError[];
+  onDismiss: () => void;
+  onFix: () => void;
+}
+
+export interface CanvasTabContentProps {
+  sidebarCollapsed: boolean;
+  onToggleSidebar: () => void;
+  onAddNode: (node: SidebarNodeDefinition) => void;
+  reactFlowWrapperRef: MutableRefObject<HTMLDivElement | null>;
+  onDragOver: (event: React.DragEvent) => void;
+  onDrop: (event: React.DragEvent) => void;
+  edgeHoverContextValue: {
+    hoveredEdgeId: string | null;
+    setHoveredEdgeId: (value: string | null) => void;
+  };
+  flowHandlers: FlowHandlers;
+  searchHandlers: SearchHandlers;
+  controlsHandlers: ControlsHandlers;
+  fileInputRef: React.RefObject<HTMLInputElement>;
+  validation: ConnectionValidationProps;
+  onFileSelected: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function CanvasTabContent({
+  sidebarCollapsed,
+  onToggleSidebar,
+  onAddNode,
+  reactFlowWrapperRef,
+  onDragOver,
+  onDrop,
+  edgeHoverContextValue,
+  flowHandlers,
+  searchHandlers,
+  controlsHandlers,
+  fileInputRef,
+  validation,
+  onFileSelected,
+}: CanvasTabContentProps) {
+  return (
+    <div className="flex h-full min-h-0">
+      <SidebarPanel
+        isCollapsed={sidebarCollapsed}
+        onToggleCollapse={onToggleSidebar}
+        onAddNode={onAddNode}
+      />
+
+      <div
+        ref={reactFlowWrapperRef}
+        className="relative flex-1 h-full min-h-0"
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+      >
+        <EdgeHoverContext.Provider value={edgeHoverContextValue}>
+          <WorkflowFlow
+            nodes={flowHandlers.nodes}
+            edges={flowHandlers.edges}
+            onNodesChange={flowHandlers.onNodesChange}
+            onEdgesChange={flowHandlers.onEdgesChange}
+            onConnect={flowHandlers.onConnect}
+            onNodeClick={flowHandlers.onNodeClick}
+            onNodeDoubleClick={flowHandlers.onNodeDoubleClick}
+            onEdgeMouseEnter={flowHandlers.onEdgeMouseEnter}
+            onEdgeMouseLeave={flowHandlers.onEdgeMouseLeave}
+            onInit={flowHandlers.onInit}
+            fitView
+            snapToGrid
+            snapGrid={[15, 15]}
+            editable
+          >
+            <WorkflowSearch {...searchHandlers} />
+            <Panel position="top-left" className="m-4">
+              <WorkflowControls {...controlsHandlers} />
+            </Panel>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="application/json"
+              className="hidden"
+              onChange={onFileSelected}
+            />
+          </WorkflowFlow>
+        </EdgeHoverContext.Provider>
+        <ConnectionValidator
+          errors={validation.errors}
+          onDismiss={validation.onDismiss}
+          onFix={validation.onFix}
+        />
+      </div>
+    </div>
+  );
+}

package/src/features/workflow/pages/workflow-canvas/components/execution-tab-content.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import WorkflowExecutionHistory from "@features/workflow/components/panels/workflow-execution-history";
+import type { WorkflowExecution } from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+export interface ExecutionTabContentProps {
+  executions: WorkflowExecution[];
+  onViewDetails: (
+    execution: React.ComponentProps<
+      typeof WorkflowExecutionHistory
+    >["executions"][number],
+  ) => void;
+  onRefresh: () => void;
+  onCopyToEditor: (
+    execution: React.ComponentProps<
+      typeof WorkflowExecutionHistory
+    >["executions"][number],
+  ) => void;
+  onDelete: (
+    execution: React.ComponentProps<
+      typeof WorkflowExecutionHistory
+    >["executions"][number],
+  ) => void;
+  onRunWorkflow: () => void;
+  onPauseWorkflow: () => void;
+  isRunning: boolean;
+  activeExecutionId: string | null;
+  setActiveExecutionId: (value: string | null) => void;
+}
+
+export function ExecutionTabContent({
+  executions,
+  onViewDetails,
+  onRefresh,
+  onCopyToEditor,
+  onDelete,
+  onRunWorkflow,
+  onPauseWorkflow,
+  isRunning,
+  activeExecutionId,
+  setActiveExecutionId,
+}: ExecutionTabContentProps) {
+  return (
+    <WorkflowExecutionHistory
+      executions={executions}
+      onViewDetails={onViewDetails}
+      onRefresh={onRefresh}
+      onCopyToEditor={onCopyToEditor}
+      onDelete={onDelete}
+      onRunWorkflow={onRunWorkflow}
+      onPauseWorkflow={onPauseWorkflow}
+      isRunning={isRunning}
+      activeExecutionId={activeExecutionId}
+      onActiveExecutionChange={setActiveExecutionId}
+    />
+  );
+}

package/src/features/workflow/pages/workflow-canvas/components/readiness-tab-content.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import WorkflowGovernancePanel from "@features/workflow/components/panels/workflow-governance-panel";
+
+import type { ValidationError } from "@features/workflow/components/canvas/connection-validator";
+import type { SubworkflowTemplate } from "@features/workflow/components/panels/workflow-governance-panel";
+
+export interface ReadinessTabContentProps {
+  subworkflows: SubworkflowTemplate[];
+  onCreateSubworkflow: () => void;
+  onInsertSubworkflow: (template: SubworkflowTemplate) => void;
+  onDeleteSubworkflow: (templateId: string) => void;
+  validationErrors: ValidationError[];
+  onRunValidation: () => void;
+  onDismissValidation: () => void;
+  onFixValidation: () => void;
+  isValidating: boolean;
+  lastValidationRun: string | null;
+}
+
+export function ReadinessTabContent({
+  subworkflows,
+  onCreateSubworkflow,
+  onInsertSubworkflow,
+  onDeleteSubworkflow,
+  validationErrors,
+  onRunValidation,
+  onDismissValidation,
+  onFixValidation,
+  isValidating,
+  lastValidationRun,
+}: ReadinessTabContentProps) {
+  return (
+    <div className="mx-auto max-w-5xl pb-12">
+      <WorkflowGovernancePanel
+        subworkflows={subworkflows}
+        onCreateSubworkflow={onCreateSubworkflow}
+        onInsertSubworkflow={onInsertSubworkflow}
+        onDeleteSubworkflow={onDeleteSubworkflow}
+        validationErrors={validationErrors}
+        onRunValidation={onRunValidation}
+        onDismissValidation={onDismissValidation}
+        onFixValidation={onFixValidation}
+        isValidating={isValidating}
+        lastValidationRun={lastValidationRun}
+      />
+    </div>
+  );
+}

package/src/features/workflow/pages/workflow-canvas/components/settings-tab-content.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+
+import { Button } from "@/design-system/ui/button";
+import { Separator } from "@/design-system/ui/separator";
+import WorkflowHistory from "@features/workflow/components/panels/workflow-history";
+
+export interface SettingsTabContentProps {
+  workflowName: string;
+  workflowDescription: string;
+  workflowTags: string[];
+  onWorkflowNameChange: (value: string) => void;
+  onWorkflowDescriptionChange: (value: string) => void;
+  onTagsChange: (value: string) => void;
+  workflowVersions: Array<{ version: string; createdAt: string }>;
+  onRestoreVersion: (version: { version: string; createdAt: string }) => void;
+  onSaveWorkflow: () => void;
+}
+
+export function SettingsTabContent({
+  workflowName,
+  workflowDescription,
+  workflowTags,
+  onWorkflowNameChange,
+  onWorkflowDescriptionChange,
+  onTagsChange,
+  workflowVersions,
+  onRestoreVersion,
+  onSaveWorkflow,
+}: SettingsTabContentProps) {
+  return (
+    <div className="max-w-3xl mx-auto space-y-8">
+      <div>
+        <h2 className="text-xl font-bold mb-4">Workflow Settings</h2>
+        <div className="space-y-4">
+          <div className="grid gap-2">
+            <label className="text-sm font-medium">Workflow Name</label>
+            <input
+              type="text"
+              className="border border-border rounded-md px-3 py-2 bg-background"
+              value={workflowName}
+              onChange={(event) => onWorkflowNameChange(event.target.value)}
+            />
+          </div>
+          <div className="grid gap-2">
+            <label className="text-sm font-medium">Description</label>
+            <textarea
+              className="border border-border rounded-md px-3 py-2 bg-background"
+              rows={3}
+              value={workflowDescription}
+              onChange={(event) =>
+                onWorkflowDescriptionChange(event.target.value)
+              }
+            />
+          </div>
+          <div className="grid gap-2">
+            <label className="text-sm font-medium">Tags</label>
+            <input
+              type="text"
+              className="border border-border rounded-md px-3 py-2 bg-background"
+              value={workflowTags.join(", ")}
+              onChange={(event) => onTagsChange(event.target.value)}
+            />
+
+            <p className="text-xs text-muted-foreground">
+              Separate tags with commas
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div>
+        <h2 className="text-xl font-bold mb-4">Execution Settings</h2>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <label className="text-sm font-medium">Timeout (seconds)</label>
+              <p className="text-xs text-muted-foreground">
+                Maximum execution time for the workflow
+              </p>
+            </div>
+            <input
+              type="number"
+              className="border border-border rounded-md px-3 py-2 bg-background w-24"
+              defaultValue="300"
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <label className="text-sm font-medium">Retry on Failure</label>
+              <p className="text-xs text-muted-foreground">
+                Automatically retry the workflow if it fails
+              </p>
+            </div>
+            <div className="flex items-center h-6">
+              <input type="checkbox" className="h-4 w-4" defaultChecked />
+            </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <label className="text-sm font-medium">Maximum Retries</label>
+              <p className="text-xs text-muted-foreground">
+                Number of retry attempts before giving up
+              </p>
+            </div>
+            <input
+              type="number"
+              className="border border-border rounded-md px-3 py-2 bg-background w-24"
+              defaultValue="3"
+            />
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div>
+        <h2 className="text-xl font-bold mb-4">Notifications</h2>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <label className="text-sm font-medium">Email Notifications</label>
+              <p className="text-xs text-muted-foreground">
+                Send email when workflow fails
+              </p>
+            </div>
+            <div className="flex items-center h-6">
+              <input type="checkbox" className="h-4 w-4" defaultChecked />
+            </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <label className="text-sm font-medium">Slack Notifications</label>
+              <p className="text-xs text-muted-foreground">
+                Send Slack message when workflow completes
+              </p>
+            </div>
+            <div className="flex items-center h-6">
+              <input type="checkbox" className="h-4 w-4" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <WorkflowHistory
+        versions={workflowVersions}
+        currentVersion={workflowVersions.at(-1)?.version}
+        onRestoreVersion={onRestoreVersion}
+      />
+
+      <div className="flex justify-end gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button onClick={onSaveWorkflow}>Save Settings</Button>
+      </div>
+    </div>
+  );
+}