@stigmer/react 0.5.0 → 1.0.0

package/src/workflow/WorkflowCanvasInner.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import "@xyflow/react/dist/style.css";
+
+import { useMemo } from "react";
+import {
+  ReactFlow,
+  Controls,
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  MarkerType,
+  SelectionMode,
+} from "@xyflow/react";
+import type {
+  Node,
+  Edge,
+  OnNodesChange,
+  OnEdgesChange,
+  OnConnect,
+  IsValidConnection,
+} from "@xyflow/react";
+import { CanvasTaskNode } from "./CanvasTaskNode";
+import { CanvasTransitionEdge } from "./CanvasTransitionEdge";
+import { CATEGORY_COLORS } from "./canvas-constants";
+import type { CanvasTaskNodeData } from "./workflow-graph-conversions";
+import { CANVAS_TASK_NODE_TYPE, CANVAS_TRANSITION_EDGE_TYPE } from "./workflow-graph-conversions";
+
+interface WorkflowCanvasInnerProps {
+  nodes: Node[];
+  edges: Edge[];
+  onNodesChange: OnNodesChange;
+  onEdgesChange: OnEdgesChange;
+  onNodeClick: (event: React.MouseEvent, node: Node) => void;
+  onEdgeClick: (event: React.MouseEvent, edge: Edge) => void;
+  onPaneClick: () => void;
+  onConnect: OnConnect;
+  isValidConnection: IsValidConnection;
+  onDrop: (event: React.DragEvent) => void;
+  onDragOver: (event: React.DragEvent) => void;
+  onNodesDelete: (nodes: Node[]) => void;
+  onEdgesDelete: (edges: Edge[]) => void;
+  onNodeContextMenu?: (event: React.MouseEvent, node: Node) => void;
+  onEdgeContextMenu?: (event: React.MouseEvent, edge: Edge) => void;
+  onPaneContextMenu?: (event: React.MouseEvent | MouseEvent) => void;
+  nodeErrors?: ReadonlyMap<string, readonly string[]>;
+}
+
+const nodeTypes = {
+  [CANVAS_TASK_NODE_TYPE]: CanvasTaskNode,
+} as const;
+
+const edgeTypes = {
+  [CANVAS_TRANSITION_EDGE_TYPE]: CanvasTransitionEdge,
+} as const;
+
+const defaultEdgeOptions = {
+  markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16 },
+};
+
+const DELETE_KEY_CODES = ["Backspace", "Delete"];
+
+/**
+ * Inner React Flow canvas, loaded via React.lazy from WorkflowCanvasEditor.
+ *
+ * Isolated into its own file so that `@xyflow/react` (and its CSS) are only
+ * included in the bundle when the canvas editor is actually rendered.
+ *
+ * @internal
+ */
+export function WorkflowCanvasInner({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onNodeClick,
+  onEdgeClick,
+  onPaneClick,
+  onConnect,
+  isValidConnection,
+  onDrop,
+  onDragOver,
+  onNodesDelete,
+  onEdgesDelete,
+  onNodeContextMenu,
+  onEdgeContextMenu,
+  onPaneContextMenu,
+  nodeErrors,
+}: WorkflowCanvasInnerProps) {
+  const enrichedNodes = useMemo(() => {
+    if (!nodeErrors || nodeErrors.size === 0) return nodes;
+    return nodes.map((node) => {
+      const data = node.data as CanvasTaskNodeData | undefined;
+      const errors = data?.taskName ? nodeErrors.get(data.taskName) : undefined;
+      if (!errors || errors.length === 0) return node;
+      return { ...node, data: { ...node.data, errorCount: errors.length } };
+    });
+  }, [nodes, nodeErrors]);
+
+  const minimapNodeColor = useMemo(
+    () => (node: Node) => {
+      const data = node.data as CanvasTaskNodeData | undefined;
+      const category = data?.category;
+      if (!category) return "var(--stgm-muted-foreground, #737373)";
+      return CATEGORY_COLORS[category] ?? "var(--stgm-muted-foreground, #737373)";
+    },
+    [],
+  );
+
+  return (
+    <ReactFlow
+      nodes={enrichedNodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onNodeClick={onNodeClick}
+      onEdgeClick={onEdgeClick}
+      onPaneClick={onPaneClick}
+      onConnect={onConnect}
+      isValidConnection={isValidConnection}
+      onDrop={onDrop}
+      onDragOver={onDragOver}
+      onNodesDelete={onNodesDelete}
+      onEdgesDelete={onEdgesDelete}
+      onNodeContextMenu={onNodeContextMenu}
+      onEdgeContextMenu={onEdgeContextMenu}
+      onPaneContextMenu={onPaneContextMenu}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      defaultEdgeOptions={defaultEdgeOptions}
+      deleteKeyCode={DELETE_KEY_CODES}
+      selectionMode={SelectionMode.Partial}
+      multiSelectionKeyCode="Shift"
+      panOnDrag={[1, 2]}
+      selectionOnDrag
+      fitView
+      fitViewOptions={{ padding: 0.2 }}
+      minZoom={0.2}
+      maxZoom={3}
+      proOptions={{ hideAttribution: true }}
+      className="h-full w-full"
+    >
+      <Controls
+        showInteractive={false}
+        className="!border-[var(--stgm-border-prominent,#d4d4d8)] !bg-[var(--stgm-card,var(--stgm-background,#fff))] !shadow-sm [&>button]:!border-[var(--stgm-border-prominent,#d4d4d8)] [&>button]:!bg-[var(--stgm-card,var(--stgm-background,#fff))] [&>button]:!fill-[var(--stgm-foreground,#1a1a2e)] [&>button:hover]:!bg-[var(--stgm-muted,#f5f5f5)]"
+      />
+      <MiniMap
+        nodeColor={minimapNodeColor}
+        maskColor="var(--stgm-muted, rgba(245, 245, 245, 0.7))"
+        className="!border-[var(--stgm-border-prominent,#d4d4d8)] !bg-[var(--stgm-card,var(--stgm-background,#fff))]"
+      />
+      <Background
+        variant={BackgroundVariant.Dots}
+        gap={16}
+        size={1}
+        color="var(--stgm-muted-foreground, #737373)"
+      />
+    </ReactFlow>
+  );
+}

package/src/workflow/WorkflowDashboard.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import { create } from "@bufbuild/protobuf";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { ListWorkflowExecutionsRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
+import { cn } from "@stigmer/theme";
+import { useStigmer } from "../hooks";
+import { useFetch } from "../internal/useFetch";
+import {
+  useWorkflowDashboardSummary,
+  type UseWorkflowDashboardSummaryOptions,
+} from "./useWorkflowDashboardSummary";
+import { usePendingApprovals } from "./usePendingApprovals";
+import { ExecutionSummaryWidget } from "./ExecutionSummaryWidget";
+import { PendingApprovalsWidget } from "./PendingApprovalsWidget";
+import { FailedRunsWidget } from "./FailedRunsWidget";
+import type { WorkflowExecution } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/api_pb";
+
+export interface WorkflowDashboardProps {
+  /** Organization slug for scoping the dashboard data. */
+  readonly org: string | null | undefined;
+  /** Time window for the summary statistics. */
+  readonly timeWindow?: UseWorkflowDashboardSummaryOptions["timeWindow"];
+  /** Called when the user clicks "Review" on a pending approval. */
+  readonly onApprovalClick?: (executionId: string) => void;
+  /** Called when the user clicks "View" on a failed execution. */
+  readonly onFailedRunClick?: (executionId: string) => void;
+  readonly className?: string;
+}
+
+const FAILED_LIST_INITIAL: readonly WorkflowExecution[] = [];
+
+/**
+ * Composed dashboard widget that aggregates execution KPIs,
+ * pending approvals, and recent failures into a responsive layout.
+ *
+ * Composes three sub-widgets:
+ * - **ExecutionSummaryWidget** — phase counts, cost, duration
+ * - **PendingApprovalsWidget** — human_input tasks awaiting decisions
+ * - **FailedRunsWidget** — recent failed executions (from existing list API)
+ *
+ * All data fetching is internal. The consumer provides org context and
+ * navigation callbacks.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowDashboard
+ *   org="acme"
+ *   onApprovalClick={(id) => navigate(`/workflows/executions/${id}`)}
+ *   onFailedRunClick={(id) => navigate(`/workflows/executions/${id}`)}
+ * />
+ * ```
+ */
+export const WorkflowDashboard = memo(function WorkflowDashboard({
+  org,
+  timeWindow,
+  onApprovalClick,
+  onFailedRunClick,
+  className,
+}: WorkflowDashboardProps) {
+  const stigmer = useStigmer();
+
+  const { summary, isLoading: summaryLoading } =
+    useWorkflowDashboardSummary({
+      org,
+      timeWindow,
+      refetchInterval: 60_000,
+    });
+
+  const {
+    approvals,
+    totalCount: approvalCount,
+    isLoading: approvalsLoading,
+  } = usePendingApprovals({ org, refetchInterval: 30_000 });
+
+  const fetchFailedFn = useMemo(
+    () =>
+      org
+        ? async () => {
+            const resp = await stigmer.workflowExecution.list(
+              create(ListWorkflowExecutionsRequestSchema, {
+                pageSize: 5,
+                phase: ExecutionPhase.EXECUTION_FAILED,
+              }),
+            );
+            return [...resp.entries] as readonly WorkflowExecution[];
+          }
+        : null,
+    [stigmer, org],
+  );
+
+  const { data: failedRuns, isLoading: failedLoading } = useFetch<
+    readonly WorkflowExecution[]
+  >(fetchFailedFn, [stigmer, org], FAILED_LIST_INITIAL, {
+    refetchInterval: 60_000,
+  });
+
+  return (
+    <section
+      aria-label="Workflow dashboard"
+      className={cn("space-y-6", className)}
+    >
+      <ExecutionSummaryWidget
+        summary={summary}
+        isLoading={summaryLoading}
+      />
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <PendingApprovalsWidget
+          approvals={approvals}
+          totalCount={approvalCount}
+          isLoading={approvalsLoading}
+          onReviewClick={onApprovalClick}
+        />
+        <FailedRunsWidget
+          executions={failedRuns}
+          isLoading={failedLoading}
+          onViewClick={onFailedRunClick}
+        />
+      </div>
+    </section>
+  );
+});