orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-canvas/hooks/use-execution-history-handlers.ts

@@ -0,0 +1,187 @@
+import { useCallback } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import { buildBackendHttpUrl } from "@/lib/config";
+import { executionStatusFromValue } from "@features/workflow/pages/workflow-canvas/helpers/execution";
+
+import type {
+  CanvasNode,
+  NodeData,
+  RunHistoryResponse,
+  WorkflowExecution,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type { Node } from "@xyflow/react";
+import type { WorkflowExecution as HistoryWorkflowExecution } from "@features/workflow/components/panels/workflow-execution-history";
+
+interface UseExecutionHistoryHandlersParams {
+  setNodes: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  setExecutions: React.Dispatch<React.SetStateAction<WorkflowExecution[]>>;
+  setActiveExecutionId: React.Dispatch<React.SetStateAction<string | null>>;
+  activeExecutionId: string | null;
+  executions: WorkflowExecution[];
+  determineLogLevel: (
+    payload: Record<string, unknown>,
+  ) => "INFO" | "DEBUG" | "ERROR" | "WARNING";
+  describePayload: (
+    payload: Record<string, unknown>,
+    graphToCanvas: Record<string, string>,
+  ) => string;
+  setActiveTab: (value: string) => void;
+}
+
+export function useExecutionHistoryHandlers({
+  setNodes,
+  setExecutions,
+  setActiveExecutionId,
+  activeExecutionId,
+  executions,
+  determineLogLevel,
+  describePayload,
+  setActiveTab,
+}: UseExecutionHistoryHandlersParams) {
+  const handleViewExecutionDetails = useCallback(
+    (execution: HistoryWorkflowExecution) => {
+      const mappedNodes = execution.nodes.map(
+        (node) =>
+          ({
+            id: node.id,
+            type: node.type || "default",
+            position: node.position,
+            data: {
+              type: node.type || "default",
+              label: node.name,
+              status: node.status || ("idle" as const),
+              details: node.details,
+            } as NodeData,
+            draggable: true,
+          }) as Node<NodeData>,
+      );
+      setNodes(mappedNodes);
+      setActiveExecutionId(execution.id);
+      setActiveTab("trace");
+    },
+    [setActiveExecutionId, setActiveTab, setNodes],
+  );
+
+  const handleCopyExecutionToEditor = useCallback(
+    (execution: HistoryWorkflowExecution) => {
+      handleViewExecutionDetails(execution);
+      toast({
+        title: "Execution copied to canvas",
+        description: `Run ${execution.runId} was loaded into the editor.`,
+      });
+    },
+    [handleViewExecutionDetails],
+  );
+
+  const handleDeleteExecution = useCallback(
+    (execution: HistoryWorkflowExecution) => {
+      setExecutions((prev) => prev.filter((item) => item.id !== execution.id));
+      if (activeExecutionId === execution.id) {
+        setActiveExecutionId(null);
+      }
+      toast({
+        title: "Execution removed",
+        description: `Run ${execution.runId} was removed from the history view.`,
+      });
+    },
+    [activeExecutionId, setActiveExecutionId, setExecutions],
+  );
+
+  const handleRefreshExecutionHistory = useCallback(async () => {
+    if (typeof fetch === "undefined") {
+      toast({
+        title: "Refresh unavailable",
+        description: "The Fetch API is not available in this environment.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const targetExecution =
+      (activeExecutionId &&
+        executions.find((execution) => execution.id === activeExecutionId)) ||
+      executions[0];
+
+    if (!targetExecution) {
+      toast({
+        title: "No executions to refresh",
+        description: "Run a workflow to create live execution history.",
+      });
+      return;
+    }
+
+    const url = buildBackendHttpUrl(
+      `/api/executions/${targetExecution.id}/history`,
+    );
+
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        const detail = await response.text();
+        throw new Error(
+          detail || `Request failed with status ${response.status}`,
+        );
+      }
+
+      const history = (await response.json()) as RunHistoryResponse;
+      const mapping = targetExecution.metadata?.graphToCanvas ?? {};
+
+      const logs = history.steps.map((step) => ({
+        timestamp: new Date(step.at).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+        }),
+        level: determineLogLevel(step.payload),
+        message: describePayload(step.payload, mapping),
+      }));
+
+      setExecutions((prev) =>
+        prev.map((execution) => {
+          if (execution.id !== history.execution_id) {
+            return execution;
+          }
+          const status =
+            executionStatusFromValue(history.status) ?? execution.status;
+          const completedAt = history.completed_at ?? execution.endTime;
+          return {
+            ...execution,
+            status,
+            logs,
+            endTime: completedAt ?? undefined,
+            duration: completedAt
+              ? new Date(completedAt).getTime() -
+                new Date(history.started_at).getTime()
+              : execution.duration,
+          };
+        }),
+      );
+
+      toast({
+        title: "Execution history refreshed",
+        description: `Loaded ${history.steps.length} streamed updates.`,
+      });
+    } catch (error) {
+      toast({
+        title: "Failed to refresh execution history",
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        variant: "destructive",
+      });
+    }
+  }, [
+    activeExecutionId,
+    describePayload,
+    determineLogLevel,
+    executions,
+    setExecutions,
+  ]);
+
+  return {
+    handleViewExecutionDetails,
+    handleCopyExecutionToEditor,
+    handleDeleteExecution,
+    handleRefreshExecutionHistory,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-execution-trace.ts

@@ -0,0 +1,302 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { MutableRefObject } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import { buildBackendHttpUrl } from "@/lib/config";
+import type { TraceViewerData } from "@features/workflow/components/trace/agent-prism";
+import {
+  applyTraceResponse,
+  applyTraceUpdate,
+  buildTraceViewerData,
+  createEmptyTraceEntry,
+  deriveViewerDataList,
+  ExecutionTraceEntry,
+  ExecutionTraceState,
+  getEntryError,
+  getEntryStatus,
+  markTraceLoading,
+  summarizeTrace,
+  TraceEntryStatus,
+  type TraceResponse,
+  type TraceUpdateMessage,
+} from "@features/workflow/pages/workflow-canvas/helpers/trace";
+
+export interface UseExecutionTraceParams {
+  backendBaseUrl: string;
+  activeExecutionId: string | null;
+  isMountedRef: MutableRefObject<boolean>;
+  executionIds?: string[];
+}
+
+export interface ExecutionTraceResult {
+  traces: ExecutionTraceState;
+  activeTrace?: ExecutionTraceEntry;
+  activeTraceViewer?: TraceViewerData;
+  viewerData: TraceViewerData[];
+  status: TraceEntryStatus;
+  error?: string;
+  refresh: (executionId?: string) => Promise<void>;
+  handleTraceUpdate: (update: TraceUpdateMessage) => void;
+}
+
+const MAX_TRACE_FETCH_RETRIES = 2;
+const RETRY_DELAY_BASE_MS = 300;
+
+const buildTraceUrl = (backendBaseUrl: string, executionId: string): string =>
+  buildBackendHttpUrl(`/api/executions/${executionId}/trace`, backendBaseUrl);
+
+const buildArtifactResolver =
+  (backendBaseUrl: string) => (artifactId: string) => {
+    const normalizedId =
+      typeof artifactId === "string" ? artifactId.trim() : "";
+    if (!normalizedId) {
+      throw new Error("Invalid artifact identifier provided.");
+    }
+    return buildBackendHttpUrl(
+      `/api/artifacts/${encodeURIComponent(normalizedId)}/download`,
+      backendBaseUrl,
+    );
+  };
+
+const delay = (ms: number) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+class TraceRequestError extends Error {
+  constructor(
+    message: string,
+    readonly status?: number,
+  ) {
+    super(message);
+    this.name = "TraceRequestError";
+  }
+}
+
+const createTraceRequestError = async (
+  response: Response,
+  executionId: string,
+): Promise<TraceRequestError> => {
+  const detail = (await response.text()).trim();
+  const statusText = `${response.status} ${response.statusText}`.trim();
+  const baseMessage = `Trace fetch for execution ${executionId} failed (${statusText})`;
+  const message = detail ? `${baseMessage}: ${detail}` : baseMessage;
+  return new TraceRequestError(message, response.status);
+};
+
+const normalizeTraceError = (
+  error: unknown,
+  executionId: string,
+): TraceRequestError => {
+  if (error instanceof TraceRequestError) {
+    return error;
+  }
+  if (error instanceof Error) {
+    return new TraceRequestError(
+      `Network error while fetching trace for execution ${executionId}: ${error.message}`,
+    );
+  }
+  return new TraceRequestError(
+    `Unknown error while fetching trace for execution ${executionId}.`,
+  );
+};
+
+const formatTraceErrorMessage = (error: TraceRequestError): string =>
+  error.message;
+
+export function useExecutionTrace({
+  backendBaseUrl,
+  activeExecutionId,
+  isMountedRef,
+  executionIds,
+}: UseExecutionTraceParams): ExecutionTraceResult {
+  const [traces, setTraces] = useState<ExecutionTraceState>({});
+  const fetchingRef = useRef(new Set<string>());
+  const primedExecutionsRef = useRef(new Set<string>());
+
+  const resolveArtifactUrl = useMemo(
+    () => buildArtifactResolver(backendBaseUrl),
+    [backendBaseUrl],
+  );
+
+  const refresh = useCallback(
+    async (targetExecutionId?: string) => {
+      const executionId = targetExecutionId ?? activeExecutionId;
+      if (!executionId) {
+        return;
+      }
+      if (fetchingRef.current.has(executionId)) {
+        return;
+      }
+      fetchingRef.current.add(executionId);
+      setTraces((prev) => ({
+        ...prev,
+        [executionId]: markTraceLoading(
+          prev[executionId] ?? createEmptyTraceEntry(executionId),
+        ),
+      }));
+      try {
+        let lastError: TraceRequestError | undefined;
+        let succeeded = false;
+
+        for (
+          let attempt = 0;
+          attempt <= MAX_TRACE_FETCH_RETRIES;
+          attempt += 1
+        ) {
+          try {
+            const response = await fetch(
+              buildTraceUrl(backendBaseUrl, executionId),
+            );
+            if (!response.ok) {
+              throw await createTraceRequestError(response, executionId);
+            }
+            const payload = (await response.json()) as TraceResponse;
+            if (!isMountedRef.current) {
+              return;
+            }
+            setTraces((prev) => {
+              const current =
+                prev[executionId] ?? createEmptyTraceEntry(executionId);
+              const next = applyTraceResponse(current, payload);
+              return {
+                ...prev,
+                [executionId]: next,
+              };
+            });
+            succeeded = true;
+            lastError = undefined;
+            break;
+          } catch (error) {
+            lastError = normalizeTraceError(error, executionId);
+            if (attempt < MAX_TRACE_FETCH_RETRIES) {
+              await delay(RETRY_DELAY_BASE_MS * (attempt + 1));
+            }
+          }
+        }
+
+        if (succeeded || !isMountedRef.current) {
+          return;
+        }
+
+        const errorMessage = formatTraceErrorMessage(
+          lastError ??
+            new TraceRequestError(
+              `Unknown error while fetching trace for execution ${executionId}.`,
+            ),
+        );
+
+        toast({
+          title: "Trace fetch failed",
+          description: errorMessage,
+          variant: "destructive",
+        });
+        setTraces((prev) => {
+          const current =
+            prev[executionId] ?? createEmptyTraceEntry(executionId);
+          return {
+            ...prev,
+            [executionId]: {
+              ...current,
+              status: "error",
+              error: errorMessage,
+            },
+          };
+        });
+      } finally {
+        fetchingRef.current.delete(executionId);
+      }
+    },
+    [activeExecutionId, backendBaseUrl, isMountedRef],
+  );
+
+  const handleTraceUpdate = useCallback((update: TraceUpdateMessage) => {
+    setTraces((prev) => {
+      const current =
+        prev[update.execution_id] ?? createEmptyTraceEntry(update.execution_id);
+      const next = applyTraceUpdate(current, update);
+      return {
+        ...prev,
+        [update.execution_id]: next,
+      };
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!executionIds?.length) {
+      return;
+    }
+    setTraces((prev) => {
+      let next: ExecutionTraceState | undefined;
+      for (const executionId of executionIds) {
+        if (prev[executionId]) {
+          continue;
+        }
+        if (!next) {
+          next = { ...prev };
+        }
+        next[executionId] = createEmptyTraceEntry(executionId);
+      }
+      return next ?? prev;
+    });
+    for (const executionId of executionIds) {
+      if (primedExecutionsRef.current.has(executionId)) {
+        continue;
+      }
+      primedExecutionsRef.current.add(executionId);
+      void refresh(executionId);
+    }
+  }, [executionIds, refresh]);
+
+  useEffect(() => {
+    if (!activeExecutionId) {
+      return;
+    }
+    const entry = traces[activeExecutionId];
+    if (!entry || entry.status === "idle" || entry.status === "error") {
+      void refresh(activeExecutionId);
+    }
+  }, [activeExecutionId, refresh, traces]);
+
+  const activeTrace = activeExecutionId ? traces[activeExecutionId] : undefined;
+
+  const activeTraceViewer = useMemo(() => {
+    if (!activeTrace) {
+      return undefined;
+    }
+    return buildTraceViewerData(activeTrace, {
+      resolveArtifactUrl,
+    });
+  }, [activeTrace, resolveArtifactUrl]);
+
+  const viewerData = useMemo(
+    () => deriveViewerDataList(traces, { resolveArtifactUrl }),
+    [traces, resolveArtifactUrl],
+  );
+
+  const status = getEntryStatus(activeTrace);
+  const error = getEntryError(activeTrace);
+
+  useEffect(() => {
+    if (!activeTrace) {
+      return;
+    }
+    if (activeTrace.status === "ready" && !activeTrace.isComplete) {
+      const summary = summarizeTrace(activeTrace);
+      if (summary.spanCount === 0 && !fetchingRef.current.size) {
+        void refresh(activeTrace.executionId);
+      }
+    }
+  }, [activeTrace, refresh]);
+
+  return {
+    traces,
+    activeTrace,
+    activeTraceViewer,
+    viewerData,
+    status,
+    error,
+    refresh,
+    handleTraceUpdate,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-execution-updates.ts

@@ -0,0 +1,143 @@
+import { useCallback } from "react";
+import type { MutableRefObject } from "react";
+
+import {
+  determineLogLevel as determineLogLevelRaw,
+  describePayload as describePayloadRaw,
+} from "@features/workflow/pages/workflow-canvas/hooks/execution-log-helpers";
+import {
+  deriveNodeStatusUpdates,
+  nextExecutionStatus,
+} from "@features/workflow/pages/workflow-canvas/hooks/execution-node-status";
+import { collectRuntimeUpdates } from "@features/workflow/pages/workflow-canvas/hooks/execution-runtime-updates";
+import { updateExecutionRecord } from "@features/workflow/pages/workflow-canvas/hooks/execution-record-updater";
+import { updateCanvasNodes } from "@features/workflow/pages/workflow-canvas/hooks/execution-canvas-updater";
+
+import type {
+  CanvasNode,
+  WorkflowExecution,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+interface UseExecutionUpdatesParams {
+  resolveNodeLabel: (nodeId: string) => string;
+  setExecutions: React.Dispatch<React.SetStateAction<WorkflowExecution[]>>;
+  setNodes: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  setIsRunning: React.Dispatch<React.SetStateAction<boolean>>;
+  websocketRef: MutableRefObject<WebSocket | null>;
+  isMountedRef: MutableRefObject<boolean>;
+}
+
+interface ExecutionUpdateHandlers {
+  determineLogLevel: (
+    payload: Record<string, unknown>,
+  ) => "INFO" | "DEBUG" | "ERROR" | "WARNING";
+  describePayload: (
+    payload: Record<string, unknown>,
+    graphToCanvas: Record<string, string>,
+  ) => string;
+  applyExecutionUpdate: (
+    executionId: string,
+    payload: Record<string, unknown>,
+    graphToCanvas: Record<string, string>,
+  ) => void;
+}
+
+export function useExecutionUpdates({
+  resolveNodeLabel,
+  setExecutions,
+  setNodes,
+  setIsRunning,
+  websocketRef,
+  isMountedRef,
+}: UseExecutionUpdatesParams): ExecutionUpdateHandlers {
+  const determineLogLevel = useCallback(
+    (payload: Record<string, unknown>) => determineLogLevelRaw(payload),
+    [],
+  );
+
+  const describePayload = useCallback(
+    (payload: Record<string, unknown>, graphToCanvas: Record<string, string>) =>
+      describePayloadRaw(payload, graphToCanvas, resolveNodeLabel),
+    [resolveNodeLabel],
+  );
+
+  const applyExecutionUpdate = useCallback(
+    (
+      executionId: string,
+      payload: Record<string, unknown>,
+      graphToCanvas: Record<string, string>,
+    ) => {
+      if (!isMountedRef.current) {
+        return;
+      }
+
+      const hasNodeReference = ["node", "step", "name"].some(
+        (key) => typeof payload[key] === "string" && payload[key],
+      );
+      const executionStatus = nextExecutionStatus(payload, hasNodeReference);
+
+      const nodeUpdates = deriveNodeStatusUpdates(payload, graphToCanvas);
+      const timestamp = new Date();
+      const updatedAt = timestamp.toISOString();
+      const runtimeUpdates = collectRuntimeUpdates(
+        payload,
+        graphToCanvas,
+        updatedAt,
+      );
+
+      const logLevel = determineLogLevel(payload);
+      const message = describePayload(payload, graphToCanvas);
+
+      setExecutions((prev) =>
+        prev.map((execution) => {
+          if (execution.id !== executionId) {
+            return execution;
+          }
+
+          return updateExecutionRecord({
+            execution,
+            executionStatus,
+            nodeUpdates,
+            runtimeUpdates,
+            logLevel,
+            message,
+            timestamp,
+            graphToCanvas,
+          });
+        }),
+      );
+
+      setNodes((prev) =>
+        updateCanvasNodes({
+          nodes: prev,
+          nodeUpdates,
+          runtimeUpdates,
+          executionStatus,
+        }),
+      );
+
+      if (executionStatus && executionStatus !== "running") {
+        setIsRunning(false);
+        if (websocketRef.current) {
+          websocketRef.current.close();
+          websocketRef.current = null;
+        }
+      }
+    },
+    [
+      describePayload,
+      determineLogLevel,
+      isMountedRef,
+      setExecutions,
+      setIsRunning,
+      setNodes,
+      websocketRef,
+    ],
+  );
+
+  return {
+    determineLogLevel,
+    describePayload,
+    applyExecutionUpdate,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-initial-fit-view.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import type { MutableRefObject } from "react";
+
+import type { ReactFlowInstance } from "@xyflow/react";
+import type {
+  CanvasNode,
+  CanvasEdge,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+export function useInitialFitView(
+  reactFlowInstance: MutableRefObject<ReactFlowInstance<
+    CanvasNode,
+    CanvasEdge
+  > | null>,
+) {
+  useEffect(() => {
+    const handle = window.setTimeout(() => {
+      if (reactFlowInstance.current) {
+        reactFlowInstance.current.fitView({ padding: 0.2 });
+      }
+    }, 100);
+
+    return () => {
+      window.clearTimeout(handle);
+    };
+  }, [reactFlowInstance]);
+}