orcheo-canvas 0.0.1

package/src/features/workflow/components/panels/workflow-execution-details.tsx

@@ -0,0 +1,118 @@
+import type React from "react";
+import { Button } from "@/design-system/ui/button";
+import { Badge } from "@/design-system/ui/badge";
+import { Copy, Maximize2, Minimize2, Trash } from "lucide-react";
+import { cn } from "@/lib/utils";
+import WorkflowFlow from "@features/workflow/components/canvas/workflow-flow";
+import { Node } from "@xyflow/react";
+import {
+  getReactFlowEdges,
+  getReactFlowNodes,
+  getStatusBadgeClass,
+} from "./workflow-execution-history.utils";
+import type { WorkflowExecution } from "./workflow-execution-history.types";
+
+interface WorkflowExecutionDetailsProps {
+  execution: WorkflowExecution | null;
+  isFullscreen: boolean;
+  onToggleFullscreen: () => void;
+  onNodeSelect: (nodeId: string) => void;
+  onCopyToEditor?: (execution: WorkflowExecution) => void;
+  onDelete?: (execution: WorkflowExecution) => void;
+}
+
+export const WorkflowExecutionDetails = ({
+  execution,
+  isFullscreen,
+  onToggleFullscreen,
+  onNodeSelect,
+  onCopyToEditor,
+  onDelete,
+}: WorkflowExecutionDetailsProps) => {
+  if (!execution) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        Select an execution to view details
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between border-b border-border p-2">
+        <div>
+          <h2 className="flex items-center gap-2 text-xl font-bold">
+            <Badge className={cn(getStatusBadgeClass(execution.status))}>
+              {execution.status.charAt(0).toUpperCase() +
+                execution.status.slice(1)}
+            </Badge>
+            Run #{execution.runId}
+          </h2>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onCopyToEditor?.(execution)}
+            title="Copy to editor"
+          >
+            <Copy className="mr-2 h-4 w-4" />
+            Copy to editor
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => onDelete?.(execution)}
+            title="Delete execution"
+          >
+            <Trash className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-1 flex-col overflow-hidden p-2">
+        <div
+          className={cn(
+            "relative flex-1 rounded-lg border border-border bg-muted/20",
+            isFullscreen && "fixed inset-0 z-50 bg-background p-4",
+          )}
+        >
+          <WorkflowFlow
+            nodes={getReactFlowNodes(execution)}
+            edges={getReactFlowEdges(execution)}
+            fitView
+            editable={false}
+            nodesDraggable={false}
+            nodesConnectable={false}
+            elementsSelectable={true}
+            zoomOnDoubleClick={false}
+            showMiniMap={true}
+            onNodeDoubleClick={(_event: React.MouseEvent, node: Node) => {
+              if (node.type === "startEnd") {
+                return;
+              }
+              onNodeSelect(node.id);
+            }}
+          >
+            <div className="absolute right-4 top-4 z-10">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={onToggleFullscreen}
+                title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+              >
+                {isFullscreen ? (
+                  <Minimize2 className="h-4 w-4" />
+                ) : (
+                  <Maximize2 className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </WorkflowFlow>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default WorkflowExecutionDetails;

package/src/features/workflow/components/panels/workflow-execution-history.hooks.ts

@@ -0,0 +1,116 @@
+import { useEffect, useMemo, useState } from "react";
+import type { WorkflowExecution } from "./workflow-execution-history.types";
+
+export const useSelectedExecution = (
+  executions: WorkflowExecution[],
+  defaultSelectedExecution?: WorkflowExecution,
+) => {
+  const [selectedExecution, setSelectedExecution] =
+    useState<WorkflowExecution | null>(
+      defaultSelectedExecution ||
+        (executions.length > 0 ? executions[0] : null),
+    );
+
+  useEffect(() => {
+    setSelectedExecution((current) => {
+      if (executions.length === 0) {
+        return null;
+      }
+
+      if (current) {
+        const currentMatch = executions.find(
+          (execution) => execution.id === current.id,
+        );
+
+        if (currentMatch) {
+          return currentMatch;
+        }
+      }
+
+      if (defaultSelectedExecution) {
+        const defaultMatch = executions.find(
+          (execution) => execution.id === defaultSelectedExecution.id,
+        );
+
+        if (defaultMatch) {
+          return defaultMatch;
+        }
+      }
+
+      return executions[0];
+    });
+  }, [executions, defaultSelectedExecution]);
+
+  return { selectedExecution, setSelectedExecution };
+};
+
+export const useExecutionPagination = (
+  executions: WorkflowExecution[],
+  initialPageSize = 20,
+) => {
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+
+  const totalExecutions = executions.length;
+  const pageCount =
+    totalExecutions === 0 ? 0 : Math.ceil(totalExecutions / pageSize);
+
+  const currentPageExecutions = useMemo(() => {
+    const startIndex = page * pageSize;
+    return executions.slice(startIndex, startIndex + pageSize);
+  }, [executions, page, pageSize]);
+
+  const startOffset = page * pageSize;
+  const endOffset = Math.min(totalExecutions, startOffset + pageSize);
+  const isFirstPage = page === 0 || pageCount === 0;
+  const isLastPage = pageCount === 0 || page === pageCount - 1;
+
+  useEffect(() => {
+    if (pageCount === 0) {
+      if (page !== 0) {
+        setPage(0);
+      }
+      return;
+    }
+
+    if (page > pageCount - 1) {
+      setPage(pageCount - 1);
+    }
+  }, [page, pageCount]);
+
+  const changePageSize = (size: number) => {
+    setPage(0);
+
+    if (size !== pageSize) {
+      setPageSize(size);
+    }
+  };
+
+  const goToPreviousPage = () => {
+    if (!isFirstPage) {
+      setPage((prev) => Math.max(prev - 1, 0));
+    }
+  };
+
+  const goToNextPage = () => {
+    if (!isLastPage) {
+      setPage((prev) => prev + 1);
+    }
+  };
+
+  return {
+    page,
+    setPage,
+    pageSize,
+    pageCount,
+    totalExecutions,
+    currentPageExecutions,
+    startOffset,
+    endOffset,
+    isFirstPage,
+    isLastPage,
+    changePageSize,
+    goToPreviousPage,
+    goToNextPage,
+  };
+};

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

@@ -0,0 +1,150 @@
+import { useMemo, useState } from "react";
+import { cn } from "@/lib/utils";
+import SidebarLayout from "@features/workflow/components/layouts/sidebar-layout";
+import NodeInspector from "@features/workflow/components/panels/node-inspector";
+import WorkflowExecutionSidebar from "./workflow-execution-sidebar";
+import WorkflowExecutionDetails from "./workflow-execution-details";
+import {
+  useExecutionPagination,
+  useSelectedExecution,
+} from "./workflow-execution-history.hooks";
+import { normaliseNodeStatus } from "./workflow-execution-history.utils";
+import type {
+  WorkflowExecution,
+  WorkflowExecutionHistoryProps,
+} from "./workflow-execution-history.types";
+
+const pageSizeOptions = [10, 20, 50];
+
+export default function WorkflowExecutionHistory({
+  executions = [],
+  onViewDetails,
+  onRefresh,
+  onCopyToEditor,
+  onDelete,
+  className,
+  showList = true,
+  defaultSelectedExecution,
+}: WorkflowExecutionHistoryProps) {
+  const { selectedExecution, setSelectedExecution } = useSelectedExecution(
+    executions,
+    defaultSelectedExecution,
+  );
+  const {
+    page,
+    pageSize,
+    pageCount,
+    totalExecutions,
+    currentPageExecutions,
+    startOffset,
+    endOffset,
+    isFirstPage,
+    isLastPage,
+    changePageSize,
+    goToPreviousPage,
+    goToNextPage,
+  } = useExecutionPagination(executions);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [sidebarWidth, setSidebarWidth] = useState(300);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+
+  const handleSelectExecution = (execution: WorkflowExecution) => {
+    setSelectedExecution(execution);
+    setSelectedNodeId(null);
+  };
+
+  const selectedNode = useMemo(() => {
+    if (!selectedNodeId || !selectedExecution) {
+      return null;
+    }
+
+    const node = selectedExecution.nodes.find((n) => n.id === selectedNodeId);
+    if (!node) {
+      return null;
+    }
+
+    return {
+      id: node.id,
+      type: node.type || "default",
+      data: {
+        type: node.type || "default",
+        label: node.name,
+        status: normaliseNodeStatus(node.status),
+        iconKey: node.iconKey,
+        details: node.details,
+        ...(node.details || {}),
+      },
+    };
+  }, [selectedNodeId, selectedExecution]);
+
+  const mainContent = (
+    <WorkflowExecutionDetails
+      execution={selectedExecution}
+      isFullscreen={isFullscreen}
+      onToggleFullscreen={() => setIsFullscreen((prev) => !prev)}
+      onNodeSelect={(nodeId) => setSelectedNodeId(nodeId)}
+      onCopyToEditor={onCopyToEditor}
+      onDelete={onDelete}
+    />
+  );
+
+  const sidebar = (
+    <WorkflowExecutionSidebar
+      totalExecutions={totalExecutions}
+      currentPageExecutions={currentPageExecutions}
+      selectedExecutionId={selectedExecution?.id}
+      page={page}
+      pageCount={pageCount}
+      pageSize={pageSize}
+      pageSizeOptions={pageSizeOptions}
+      isFirstPage={isFirstPage}
+      isLastPage={isLastPage}
+      startOffset={startOffset}
+      endOffset={endOffset}
+      onSelectExecution={handleSelectExecution}
+      onPreviousPage={goToPreviousPage}
+      onNextPage={goToNextPage}
+      onPageSizeChange={changePageSize}
+      onRefresh={onRefresh}
+      onViewDetails={onViewDetails}
+    />
+  );
+
+  const content = (
+    <>
+      {showList ? (
+        <SidebarLayout
+          sidebar={sidebar}
+          sidebarWidth={sidebarWidth}
+          onWidthChange={setSidebarWidth}
+          resizable
+          minWidth={200}
+          maxWidth={500}
+          showCollapseButton={false}
+        >
+          <div className="flex h-full flex-col">{mainContent}</div>
+        </SidebarLayout>
+      ) : (
+        mainContent
+      )}
+
+      {selectedNode && (
+        <NodeInspector
+          node={selectedNode}
+          onClose={() => setSelectedNodeId(null)}
+          className="absolute left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 transform"
+        />
+      )}
+    </>
+  );
+
+  if (!showList) {
+    return (
+      <div className={cn("flex h-full w-full flex-col", className)}>
+        {content}
+      </div>
+    );
+  }
+
+  return <div className={cn("h-full w-full", className)}>{content}</div>;
+}

package/src/features/workflow/components/panels/workflow-execution-history.types.ts

@@ -0,0 +1,53 @@
+export interface WorkflowNode {
+  id: string;
+  type: string;
+  name: string;
+  position: { x: number; y: number };
+  iconKey?: string;
+  status?: "success" | "error" | "running" | "idle" | "warning";
+  details?: {
+    method?: string;
+    url?: string;
+    message?: string;
+    items?: number;
+    description?: string;
+    [key: string]: unknown;
+  };
+}
+
+export interface WorkflowEdge {
+  id: string;
+  source: string;
+  target: string;
+}
+
+export interface WorkflowExecution {
+  id: string;
+  runId: string;
+  status: "success" | "failed" | "partial" | "running";
+  startTime: string;
+  endTime?: string;
+  duration: number;
+  issues: number;
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+  logs: {
+    timestamp: string;
+    level: "INFO" | "DEBUG" | "ERROR" | "WARNING";
+    message: string;
+  }[];
+  metadata?: {
+    graphToCanvas?: Record<string, string>;
+  };
+}
+
+export interface WorkflowExecutionHistoryProps {
+  executions: WorkflowExecution[];
+  onViewDetails?: (execution: WorkflowExecution) => void;
+  onRefresh?: () => void;
+  onCopyToEditor?: (execution: WorkflowExecution) => void;
+  onDelete?: (execution: WorkflowExecution) => void;
+  className?: string;
+  showList?: boolean;
+  defaultSelectedExecution?: WorkflowExecution;
+}

package/src/features/workflow/components/panels/workflow-execution-history.utils.ts

@@ -0,0 +1,195 @@
+import { Edge, MarkerType, Node } from "@xyflow/react";
+import {
+  getNodeIcon,
+  inferNodeIconKey,
+} from "@features/workflow/lib/node-icons";
+import type {
+  WorkflowExecution,
+  WorkflowNode,
+} from "./workflow-execution-history.types";
+
+export const defaultNodeStyle = {
+  background: "none",
+  border: "none",
+  padding: 0,
+  borderRadius: 0,
+  width: "auto",
+  boxShadow: "none",
+};
+
+export const determineReactFlowNodeType = (
+  type: string | undefined,
+): "default" | "chatTrigger" | "startEnd" => {
+  if (type === "chatTrigger") {
+    return "chatTrigger";
+  }
+  if (type === "start" || type === "end") {
+    return "startEnd";
+  }
+  return "default";
+};
+
+export const normaliseNodeStatus = (
+  status: WorkflowNode["status"],
+): "idle" | "running" | "success" | "error" => {
+  switch (status) {
+    case "running":
+      return "running";
+    case "success":
+      return "success";
+    case "error":
+      return "error";
+    case "warning":
+      return "running";
+    default:
+      return "idle";
+  }
+};
+
+export const parseChatTriggerDescription = (
+  details: WorkflowNode["details"],
+): string | undefined => {
+  if (!details) {
+    return undefined;
+  }
+  if (typeof details.message === "string" && details.message.trim()) {
+    return details.message;
+  }
+  if (typeof details.description === "string" && details.description.trim()) {
+    return details.description;
+  }
+  return undefined;
+};
+
+export const formatExecutionDate = (dateString: string) => {
+  const date = new Date(dateString);
+  const now = new Date();
+
+  if (date.toDateString() === now.toDateString()) {
+    return `Today, ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+  }
+
+  const yesterday = new Date();
+  yesterday.setDate(now.getDate() - 1);
+  if (date.toDateString() === yesterday.toDateString()) {
+    return `Yesterday, ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+  }
+
+  return (
+    date.toLocaleDateString([], {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    }) +
+    `, ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`
+  );
+};
+
+export const formatDuration = (ms: number) => {
+  if (ms < 1000) return `${ms}ms`;
+  const seconds = ms / 1000;
+  return `${seconds.toFixed(1)}s`;
+};
+
+export const getStatusBadgeClass = (status: string) => {
+  switch (status.toLowerCase()) {
+    case "success":
+      return "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400";
+    case "failed":
+      return "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400";
+    case "partial":
+      return "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400";
+    case "running":
+      return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400";
+    default:
+      return "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400";
+  }
+};
+
+export const getReactFlowNodes = (
+  execution: WorkflowExecution | null,
+): Node[] => {
+  if (!execution) return [];
+
+  return execution.nodes.map((node) => {
+    const semanticType = typeof node.type === "string" ? node.type : "default";
+    const reactFlowType = determineReactFlowNodeType(semanticType);
+    const status = normaliseNodeStatus(node.status);
+
+    if (reactFlowType === "startEnd") {
+      return {
+        id: node.id,
+        type: reactFlowType,
+        position: node.position,
+        style: defaultNodeStyle,
+        width: 64,
+        height: 64,
+        data: {
+          label: node.name,
+          type: semanticType === "end" ? "end" : "start",
+        },
+      } as Node;
+    }
+
+    if (reactFlowType === "chatTrigger") {
+      return {
+        id: node.id,
+        type: reactFlowType,
+        position: node.position,
+        style: defaultNodeStyle,
+        width: 180,
+        height: 120,
+        data: {
+          label: node.name,
+          type: "chatTrigger",
+          description: parseChatTriggerDescription(node.details),
+          status,
+        },
+      } as Node;
+    }
+
+    const iconKey =
+      node.iconKey ??
+      inferNodeIconKey({
+        iconKey: node.iconKey,
+        label: node.name,
+        type: semanticType,
+      });
+
+    return {
+      id: node.id,
+      type: reactFlowType,
+      position: node.position,
+      style: defaultNodeStyle,
+      width: 64,
+      height: 64,
+      data: {
+        label: node.name,
+        status,
+        type: semanticType,
+        iconKey,
+        icon: iconKey ? getNodeIcon(iconKey) : undefined,
+      },
+    } as Node;
+  });
+};
+
+export const getReactFlowEdges = (
+  execution: WorkflowExecution | null,
+): Edge[] => {
+  if (!execution) return [];
+
+  return execution.edges.map((edge) => ({
+    id: edge.id,
+    source: edge.source,
+    target: edge.target,
+    type: "default",
+    animated: execution.status === "running",
+    style: { stroke: "#99a1b3", strokeWidth: 2 },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 12,
+      height: 12,
+    },
+  }));
+};