@startsimpli/ui 0.4.14 → 0.4.15

package/src/components/workflows/WorkflowCanvas.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import * as React from 'react';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  type NodeTypes,
+  type EdgeTypes,
+} from '@xyflow/react';
+import { cn } from '../../lib/utils';
+import { WorkflowNode } from './WorkflowNode';
+import { WorkflowEdge } from './WorkflowEdge';
+import { useCanvasGraph } from './hooks/useCanvasGraph';
+import { useNodeStatusOverlay } from './hooks/useNodeStatusOverlay';
+import type { WorkflowGraph, WfExecutionView, NodeTypeDef } from './types';
+import type { LayoutDirection } from './layout/auto-layout';
+
+const nodeTypes: NodeTypes = { workflowNode: WorkflowNode };
+const edgeTypes: EdgeTypes = { workflowEdge: WorkflowEdge };
+
+export interface WorkflowCanvasProps {
+  /** The graph to render. */
+  graph: WorkflowGraph;
+  /** Node-type catalog (enriches nodes with category + ports). */
+  nodeTypes?: NodeTypeDef[];
+  /**
+   * Optional run overlay. When present, node status badges and edge
+   * animations reflect the live execution. Pass a fresh snapshot per poll.
+   */
+  execution?: WfExecutionView;
+  /** Layout direction for positionless nodes. Default 'LR'. */
+  direction?: LayoutDirection;
+  /** Inline-rename callback. */
+  onRename?: (nodeId: string, name: string) => void;
+  /** Fired when a node is selected on the canvas. */
+  onSelectNode?: (nodeId: string | null) => void;
+  /** Drop handler for palette drag-and-drop (slug + client coords). */
+  onDropNodeType?: (slug: string, clientX: number, clientY: number) => void;
+  className?: string;
+}
+
+function CanvasInner({
+  graph,
+  nodeTypes: catalog,
+  execution,
+  direction = 'LR',
+  onRename,
+  onSelectNode,
+  onDropNodeType,
+  className,
+}: WorkflowCanvasProps) {
+  const { nodes: baseNodes, edges: baseEdges } = useCanvasGraph(graph, {
+    nodeTypes: catalog,
+    direction,
+    onRename,
+  });
+  const { nodes, edges } = useNodeStatusOverlay(baseNodes, baseEdges, execution);
+
+  const handleDragOver = React.useCallback((e: React.DragEvent) => {
+    if (!onDropNodeType) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  }, [onDropNodeType]);
+
+  const handleDrop = React.useCallback(
+    (e: React.DragEvent) => {
+      if (!onDropNodeType) return;
+      e.preventDefault();
+      const slug = e.dataTransfer.getData('application/x-workflow-node');
+      if (slug) onDropNodeType(slug, e.clientX, e.clientY);
+    },
+    [onDropNodeType]
+  );
+
+  return (
+    <div
+      className={cn('workflow-canvas h-full w-full', className)}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <ReactFlow
+        nodes={nodes as never}
+        edges={edges as never}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        fitView
+        proOptions={{ hideAttribution: true }}
+        onNodeClick={(_, n) => onSelectNode?.(n.id)}
+        onPaneClick={() => onSelectNode?.(null)}
+      >
+        <Background gap={16} />
+        <Controls showInteractive={false} />
+      </ReactFlow>
+    </div>
+  );
+}
+
+/**
+ * Renders a {@link WorkflowGraph} on an interactive xyflow canvas with custom
+ * workflow nodes/edges, auto-layout, fit-view, and controls. When an
+ * `execution` overlay is supplied, node statuses + edge animations reflect the
+ * live run. Wraps its own {@link ReactFlowProvider} so it can be dropped in
+ * anywhere.
+ */
+export function WorkflowCanvas(props: WorkflowCanvasProps) {
+  return (
+    <ReactFlowProvider>
+      <CanvasInner {...props} />
+    </ReactFlowProvider>
+  );
+}

package/src/components/workflows/WorkflowEdge.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import * as React from 'react';
+import {
+  BaseEdge,
+  getBezierPath,
+  type EdgeProps,
+} from '@xyflow/react';
+import type { NodeStatus } from './types';
+
+/**
+ * Data payload carried on an xyflow edge rendered by {@link WorkflowEdge}.
+ * `sourceStatus` is layered on by the canvas status overlay so the edge can
+ * animate while its source node is running (or has just succeeded).
+ */
+export interface WorkflowEdgeData {
+  connectionType?: string;
+  /** Runtime status of the source node (drives the animated flow). */
+  sourceStatus?: NodeStatus;
+  [key: string]: unknown;
+}
+
+const ANIMATED: ReadonlySet<NodeStatus> = new Set(['running', 'success']);
+
+/**
+ * Custom workflow edge: a bezier connector that animates a dashed flow when
+ * its source node is running or has succeeded (so live runs visibly "flow").
+ */
+export function WorkflowEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  markerEnd,
+  selected,
+}: EdgeProps) {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  });
+
+  const d = data as WorkflowEdgeData | undefined;
+  const animated = d?.sourceStatus ? ANIMATED.has(d.sourceStatus) : false;
+
+  return (
+    <BaseEdge
+      id={id}
+      path={edgePath}
+      markerEnd={markerEnd}
+      className={animated ? 'workflow-edge--animated' : undefined}
+      style={{
+        strokeWidth: selected ? 2.5 : 1.5,
+        stroke: selected ? '#2563eb' : '#94a3b8',
+      }}
+    />
+  );
+}

package/src/components/workflows/WorkflowEditor.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { DualPaneWorkspace } from '../workspace/DualPaneWorkspace';
+import { WorkflowCanvas } from './WorkflowCanvas';
+import { NodePalette } from './NodePalette';
+import { NodeInspector } from './NodeInspector';
+import type { NodeTypeDef, WfNode, WorkflowGraph } from './types';
+
+export interface WorkflowEditorProps {
+  /** The graph being edited (controlled when `onGraphChange` is provided). */
+  graph: WorkflowGraph;
+  /** Node-type catalog for the palette + canvas enrichment + inspector. */
+  nodeTypes: NodeTypeDef[];
+  /** Emitted with the next graph whenever the editor mutates it. */
+  onGraphChange?: (graph: WorkflowGraph) => void;
+  className?: string;
+}
+
+function nextNodeId(graph: WorkflowGraph): string {
+  let i = graph.nodes.length + 1;
+  const ids = new Set(graph.nodes.map((n) => n.id));
+  while (ids.has(`node-${i}`)) i += 1;
+  return `node-${i}`;
+}
+
+/**
+ * Visual workflow editor: a {@link NodePalette} + interactive
+ * {@link WorkflowCanvas} on the left, a JSON-Schema-driven
+ * {@link NodeInspector} on the right (via {@link DualPaneWorkspace}). Manages
+ * selection internally and surfaces graph mutations (rename, param edits,
+ * palette add) through `onGraphChange`.
+ */
+export function WorkflowEditor({
+  graph,
+  nodeTypes,
+  onGraphChange,
+  className,
+}: WorkflowEditorProps) {
+  const [selectedId, setSelectedId] = React.useState<string | null>(null);
+
+  const typeIndex = React.useMemo(() => {
+    const idx: Record<string, NodeTypeDef> = {};
+    for (const nt of nodeTypes) idx[nt.slug] = nt;
+    return idx;
+  }, [nodeTypes]);
+
+  const selectedNode = selectedId
+    ? graph.nodes.find((n) => n.id === selectedId) ?? null
+    : null;
+  const selectedType = selectedNode ? typeIndex[selectedNode.type] : undefined;
+
+  const handleRename = React.useCallback(
+    (nodeId: string, name: string) => {
+      onGraphChange?.({
+        ...graph,
+        nodes: graph.nodes.map((n) => (n.id === nodeId ? { ...n, name } : n)),
+      });
+    },
+    [graph, onGraphChange]
+  );
+
+  const handleParametersChange = React.useCallback(
+    (nodeId: string, parameters: Record<string, unknown>) => {
+      onGraphChange?.({
+        ...graph,
+        nodes: graph.nodes.map((n) =>
+          n.id === nodeId ? { ...n, parameters } : n
+        ),
+      });
+    },
+    [graph, onGraphChange]
+  );
+
+  const handleAddNode = React.useCallback(
+    (slug: string) => {
+      const def = typeIndex[slug];
+      const id = nextNodeId(graph);
+      const node: WfNode = {
+        id,
+        name: def?.name ?? slug,
+        type: slug,
+        parameters: {},
+      };
+      onGraphChange?.({ ...graph, nodes: [...graph.nodes, node] });
+      setSelectedId(id);
+    },
+    [graph, onGraphChange, typeIndex]
+  );
+
+  const left = (
+    <DualPaneWorkspace
+      leftLabel="Nodes"
+      initialLeftSize={30}
+      minLeftSize={18}
+      maxLeftSize={45}
+      left={<NodePalette nodeTypes={nodeTypes} onAddNode={handleAddNode} />}
+      right={
+        <WorkflowCanvas
+          graph={graph}
+          nodeTypes={nodeTypes}
+          onRename={handleRename}
+          onSelectNode={setSelectedId}
+          onDropNodeType={(slug) => handleAddNode(slug)}
+        />
+      }
+    />
+  );
+
+  return (
+    <div className={cn('h-full min-h-0 w-full', className)}>
+      <DualPaneWorkspace
+        leftLabel="Editor"
+        rightLabel="Inspector"
+        initialLeftSize={68}
+        minLeftSize={45}
+        maxLeftSize={82}
+        left={left}
+        right={
+          <NodeInspector
+            node={selectedNode}
+            nodeType={selectedType}
+            onParametersChange={handleParametersChange}
+          />
+        }
+      />
+    </div>
+  );
+}

package/src/components/workflows/WorkflowNode.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import * as React from 'react';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+import { cn } from '../../lib/utils';
+import { StatusBadge } from '../badge/StatusBadge';
+import { getCategoryToken } from './theme/categories';
+import { getCategoryIcon } from './node-icons';
+import { NODE_STATUS_BADGE } from './exec-status';
+import type { NodeStatus, WfNode } from './types';
+
+/**
+ * Data payload carried on an xyflow node rendered by {@link WorkflowNode}.
+ * The serializer stores the canonical {@link WfNode} under `node`; the canvas
+ * layers presentation extras (category, status overlay, port labels, rename
+ * callback) on top.
+ */
+export interface WorkflowNodeData {
+  /** Canonical graph node. */
+  node: WfNode;
+  /** Category token key (resolved via theme/categories). */
+  category?: string;
+  /** Runtime status overlay (defaults to "idle" in the editor). */
+  status?: NodeStatus;
+  /** Number of inputs (default 1). */
+  inputCount?: number;
+  /** Number of outputs (default 1). */
+  outputCount?: number;
+  /** Labels for each output port (e.g. ["true", "false"]). */
+  outputLabels?: string[];
+  /** Labels for each input port. */
+  inputLabels?: string[];
+  /** Called when the node is renamed inline. */
+  onRename?: (nodeId: string, name: string) => void;
+  [key: string]: unknown;
+}
+
+/** Build evenly-spaced top offsets (as %) for `count` handles. */
+function handleOffsets(count: number): string[] {
+  if (count <= 1) return ['50%'];
+  return Array.from({ length: count }, (_, i) =>
+    `${((i + 1) / (count + 1)) * 100}%`
+  );
+}
+
+/**
+ * Custom xyflow node for the workflow editor: category accent color + icon,
+ * an editable title, labelled input/output ports (handles), a runtime status
+ * badge, and disabled styling. Renaming is inline (double-click the title)
+ * and surfaced via `data.onRename`.
+ */
+export function WorkflowNode({ id, data, selected }: NodeProps) {
+  const d = data as WorkflowNodeData;
+  const node = d.node;
+  const token = getCategoryToken(d.category ?? deriveCategory(node.type));
+  const Icon = getCategoryIcon(token.icon);
+  const status: NodeStatus = d.status ?? 'idle';
+  const disabled = Boolean(node.disabled);
+
+  const inputCount = d.inputCount ?? 1;
+  const outputCount = d.outputCount ?? 1;
+  const inputOffsets = handleOffsets(inputCount);
+  const outputOffsets = handleOffsets(outputCount);
+
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(node.name);
+  React.useEffect(() => {
+    setDraft(node.name);
+  }, [node.name]);
+
+  const commit = () => {
+    setEditing(false);
+    const next = draft.trim();
+    if (next && next !== node.name) {
+      d.onRename?.(id, next);
+    } else {
+      setDraft(node.name);
+    }
+  };
+
+  return (
+    <div
+      data-node-id={id}
+      data-status={status}
+      data-disabled={disabled ? 'true' : undefined}
+      className={cn(
+        'relative min-w-[180px] rounded-lg border-2 bg-card shadow-sm transition-shadow',
+        selected && 'ring-2 ring-offset-1',
+        disabled && 'opacity-50 grayscale'
+      )}
+      style={{
+        borderColor: token.color,
+        // selection ring picks up the category accent
+        ['--tw-ring-color' as string]: token.color,
+      }}
+    >
+      {/* Input handles */}
+      {inputOffsets.map((top, i) => (
+        <React.Fragment key={`in-${i}`}>
+          <Handle
+            id={String(i)}
+            type="target"
+            position={Position.Left}
+            data-handle-kind="input"
+            style={{ top, background: token.color }}
+          />
+          {d.inputLabels?.[i] && (
+            <span
+              className="absolute left-2 -translate-y-1/2 text-[10px] text-muted-foreground"
+              style={{ top }}
+            >
+              {d.inputLabels[i]}
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+
+      {/* Header: icon + category label */}
+      <div
+        className="flex items-center gap-1.5 rounded-t-md px-2.5 py-1"
+        style={{ background: token.background, color: token.foreground }}
+      >
+        <Icon className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+        <span className="text-[11px] font-medium uppercase tracking-wide">
+          {token.label}
+        </span>
+        <StatusBadge
+          status={status}
+          config={NODE_STATUS_BADGE}
+          size="sm"
+          className="ml-auto"
+        />
+      </div>
+
+      {/* Title (inline-editable) */}
+      <div className="px-2.5 py-2">
+        {editing ? (
+          <input
+            autoFocus
+            role="textbox"
+            aria-label="Node name"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onBlur={commit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') commit();
+              if (e.key === 'Escape') {
+                setDraft(node.name);
+                setEditing(false);
+              }
+            }}
+            className="w-full rounded border border-border bg-background px-1 py-0.5 text-sm font-medium text-foreground outline-none"
+          />
+        ) : (
+          <button
+            type="button"
+            onDoubleClick={() => d.onRename && setEditing(true)}
+            className="block w-full truncate text-left text-sm font-medium text-foreground"
+            title={node.name}
+          >
+            {node.name}
+          </button>
+        )}
+        <span className="mt-0.5 block truncate text-[11px] text-muted-foreground">
+          {node.type}
+        </span>
+      </div>
+
+      {/* Output handles + labels */}
+      {outputOffsets.map((top, i) => (
+        <React.Fragment key={`out-${i}`}>
+          <Handle
+            id={String(i)}
+            type="source"
+            position={Position.Right}
+            data-handle-kind="output"
+            style={{ top, background: token.color }}
+          />
+          {d.outputLabels?.[i] && (
+            <span
+              className="absolute right-2 -translate-y-1/2 text-[10px] text-muted-foreground"
+              style={{ top }}
+            >
+              {d.outputLabels[i]}
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+/** Best-effort category from a "category.subtype" slug (e.g. "action.email"). */
+function deriveCategory(type: string | undefined): string | undefined {
+  if (!type) return undefined;
+  const head = type.split('.')[0];
+  return head || undefined;
+}

package/src/components/workflows/WorkflowRunViewer.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { StatusBadge } from '../badge/StatusBadge';
+import { DualPaneWorkspace } from '../workspace/DualPaneWorkspace';
+import { ExecutionTimeline } from './ExecutionTimeline';
+import { ExecNodeDetails } from './ExecNodeDetails';
+import { RUN_STATUS_BADGE } from './exec-status';
+import type { NodeExecView, WfExecutionView } from './types';
+
+export interface WorkflowRunViewerProps {
+  /** The current run snapshot. Pass a fresh object on each poll. */
+  execution: WfExecutionView;
+  /** Initially-selected node id. */
+  initialNodeId?: string;
+  className?: string;
+}
+
+function nodeList(execution: WfExecutionView): NodeExecView[] {
+  return Object.values(execution.nodes ?? {});
+}
+
+/**
+ * Read-only run visualizer: an execution timeline beside a selected-node
+ * detail panel (built on {@link DualPaneWorkspace}), with a run-status
+ * header badge. Designed for polling — pass a fresh {@link WfExecutionView}
+ * snapshot on each tick and the timeline + currently-selected detail panel
+ * re-render against the latest data.
+ */
+export function WorkflowRunViewer({
+  execution,
+  initialNodeId,
+  className,
+}: WorkflowRunViewerProps) {
+  const nodes = nodeList(execution);
+  const [selectedId, setSelectedId] = React.useState<string | null>(
+    initialNodeId ?? null
+  );
+
+  // Resolve the selected node against the LATEST snapshot so the detail
+  // panel reflects new poll data without needing to re-select.
+  const selectedNode = selectedId != null ? execution.nodes?.[selectedId] : null;
+
+  const header = (
+    <div className="flex items-center justify-between gap-3 px-3 py-2">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-semibold text-foreground">
+          Workflow run
+        </span>
+        {execution.executionId && (
+          <span className="text-xs text-muted-foreground">
+            {execution.executionId}
+          </span>
+        )}
+      </div>
+      <StatusBadge status={execution.status} config={RUN_STATUS_BADGE} size="sm" />
+    </div>
+  );
+
+  return (
+    <div className={cn('flex h-full min-h-0 w-full flex-col', className)}>
+      <DualPaneWorkspace
+        toolbar={header}
+        leftLabel="Timeline"
+        rightLabel="Node detail"
+        initialLeftSize={42}
+        left={
+          <div className="h-full min-h-0 overflow-auto">
+            <ExecutionTimeline
+              nodeExecutions={nodes}
+              activeNodeId={selectedId ?? undefined}
+              onSelectNode={setSelectedId}
+            />
+          </div>
+        }
+        right={<ExecNodeDetails node={selectedNode} />}
+      />
+    </div>
+  );
+}

package/src/components/workflows/__tests__/ExecutionTimeline.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen, fireEvent, within } from '@testing-library/react';
+import { ExecutionTimeline } from '../ExecutionTimeline';
+import type { NodeExecView } from '../types';
+
+const nodes: NodeExecView[] = [
+  {
+    nodeId: 'a',
+    name: 'Fetch data',
+    type: 'trigger.event',
+    status: 'success',
+    executionOrder: 0,
+    executionTimeMs: 1234,
+  },
+  {
+    nodeId: 'b',
+    name: 'Transform',
+    type: 'transform.set',
+    status: 'running',
+    executionOrder: 1,
+  },
+  {
+    nodeId: 'c',
+    name: 'Notify',
+    type: 'action.http',
+    status: 'error',
+    executionOrder: 2,
+    executionTimeMs: 42,
+    error: 'Connection refused',
+  },
+];
+
+describe('ExecutionTimeline', () => {
+  it('renders one row per node execution, in order', () => {
+    render(<ExecutionTimeline nodeExecutions={nodes} />);
+    const rows = screen.getAllByRole('listitem');
+    expect(rows).toHaveLength(3);
+    expect(rows[0]).toHaveTextContent('Fetch data');
+    expect(rows[1]).toHaveTextContent('Transform');
+    expect(rows[2]).toHaveTextContent('Notify');
+  });
+
+  it('renders a status badge per node with the correct label', () => {
+    render(<ExecutionTimeline nodeExecutions={nodes} />);
+    expect(screen.getByText('Success')).toBeInTheDocument();
+    expect(screen.getByText('Running')).toBeInTheDocument();
+    expect(screen.getByText('Error')).toBeInTheDocument();
+  });
+
+  it('renders human-readable durations', () => {
+    render(<ExecutionTimeline nodeExecutions={nodes} />);
+    expect(screen.getByText('1.23s')).toBeInTheDocument();
+    expect(screen.getByText('42ms')).toBeInTheDocument();
+  });
+
+  it('renders inline error text for error nodes', () => {
+    render(<ExecutionTimeline nodeExecutions={nodes} />);
+    expect(screen.getByText('Connection refused')).toBeInTheDocument();
+  });
+
+  it('shows a live/pulsing indicator only for the running node', () => {
+    const { container } = render(<ExecutionTimeline nodeExecutions={nodes} />);
+    const live = container.querySelectorAll('[data-live="true"]');
+    expect(live).toHaveLength(1);
+    const rows = screen.getAllByRole('listitem');
+    // running node is the second row (b)
+    expect(within(rows[1]).getByText('Running')).toBeInTheDocument();
+    expect(rows[1].querySelector('[data-live="true"]')).not.toBeNull();
+  });
+
+  it('does not show a live indicator for terminal statuses', () => {
+    const terminal: NodeExecView[] = [
+      { nodeId: 'a', name: 'A', type: 't', status: 'success', executionOrder: 0 },
+      { nodeId: 'b', name: 'B', type: 't', status: 'error', executionOrder: 1 },
+      { nodeId: 'c', name: 'C', type: 't', status: 'skipped', executionOrder: 2 },
+    ];
+    const { container } = render(<ExecutionTimeline nodeExecutions={terminal} />);
+    expect(container.querySelectorAll('[data-live="true"]')).toHaveLength(0);
+  });
+
+  it('calls onSelectNode when a row is clicked', () => {
+    const onSelectNode = jest.fn();
+    render(<ExecutionTimeline nodeExecutions={nodes} onSelectNode={onSelectNode} />);
+    fireEvent.click(screen.getByText('Transform'));
+    expect(onSelectNode).toHaveBeenCalledWith('b');
+  });
+
+  it('marks the active node row as selected', () => {
+    render(<ExecutionTimeline nodeExecutions={nodes} activeNodeId="c" />);
+    const rows = screen.getAllByRole('listitem');
+    expect(rows[2]).toHaveAttribute('aria-current', 'true');
+    expect(rows[0]).not.toHaveAttribute('aria-current', 'true');
+  });
+
+  it('renders an empty state when there are no executions', () => {
+    render(<ExecutionTimeline nodeExecutions={[]} />);
+    expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+    expect(screen.getByText('No node executions')).toBeInTheDocument();
+  });
+});