@startsimpli/ui 0.4.14 → 0.4.16

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();
+  });
+});

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

@@ -0,0 +1,74 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NodeInspector } from '../NodeInspector';
+import type { WfNode, NodeTypeDef, NodeExecView } from '../types';
+
+const node: WfNode = {
+  id: 'n1',
+  name: 'Send email',
+  type: 'action.email',
+  parameters: { to: 'a@b.com', retries: 3, urgent: true },
+};
+
+const nodeType: NodeTypeDef & { parameterSchema?: Record<string, unknown> } = {
+  slug: 'action.email',
+  name: 'Send email',
+  category: 'action',
+  parameterSchema: {
+    type: 'object',
+    properties: {
+      to: { type: 'string', title: 'Recipient' },
+      retries: { type: 'number', title: 'Retries' },
+      urgent: { type: 'boolean', title: 'Urgent' },
+    },
+  },
+};
+
+describe('NodeInspector', () => {
+  it('renders a field per schema property with current values', () => {
+    render(<NodeInspector node={node} nodeType={nodeType} />);
+    expect(screen.getByLabelText('Recipient')).toHaveValue('a@b.com');
+    expect(screen.getByLabelText('Retries')).toHaveValue(3);
+    expect(screen.getByLabelText('Urgent')).toBeChecked();
+  });
+
+  it('emits parameter changes via onParametersChange', () => {
+    const onParametersChange = jest.fn();
+    render(
+      <NodeInspector
+        node={node}
+        nodeType={nodeType}
+        onParametersChange={onParametersChange}
+      />
+    );
+    fireEvent.change(screen.getByLabelText('Recipient'), {
+      target: { value: 'c@d.com' },
+    });
+    expect(onParametersChange).toHaveBeenCalledWith(
+      'n1',
+      expect.objectContaining({ to: 'c@d.com' })
+    );
+  });
+
+  it('renders an empty state when no node is selected', () => {
+    render(<NodeInspector node={null} />);
+    expect(screen.getByText(/select a node/i)).toBeInTheDocument();
+  });
+
+  it('shows read-only input/output tabs when given an execution view', async () => {
+    const exec: NodeExecView = {
+      nodeId: 'n1',
+      status: 'success',
+      inputData: { foo: 'in' },
+      outputData: { foo: 'out' },
+    };
+    const user = userEvent.setup();
+    render(<NodeInspector node={node} nodeType={nodeType} execution={exec} />);
+    // the exec tabs exist
+    expect(screen.getByRole('tab', { name: /input/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /output/i })).toBeInTheDocument();
+    // switch to the Output tab
+    await user.click(screen.getByRole('tab', { name: /output/i }));
+    expect(screen.getByText(/"foo": "out"/)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { NodePalette } from '../NodePalette';
+import type { NodeTypeDef } from '../types';
+
+const nodeTypes: NodeTypeDef[] = [
+  { slug: 'trigger.event', name: 'Event trigger', category: 'trigger' },
+  { slug: 'action.email', name: 'Send email', category: 'action' },
+  { slug: 'action.http', name: 'HTTP request', category: 'action' },
+  { slug: 'condition.if', name: 'If', category: 'condition' },
+];
+
+describe('NodePalette', () => {
+  it('lists all node types grouped by category', () => {
+    render(<NodePalette nodeTypes={nodeTypes} />);
+    expect(screen.getByText('Event trigger')).toBeInTheDocument();
+    expect(screen.getByText('Send email')).toBeInTheDocument();
+    expect(screen.getByText('HTTP request')).toBeInTheDocument();
+    expect(screen.getByText('If')).toBeInTheDocument();
+    // group headings (category labels)
+    expect(screen.getByText('Trigger')).toBeInTheDocument();
+    expect(screen.getByText('Action')).toBeInTheDocument();
+  });
+
+  it('filters node types by search query', () => {
+    render(<NodePalette nodeTypes={nodeTypes} />);
+    const search = screen.getByRole('searchbox');
+    fireEvent.change(search, { target: { value: 'email' } });
+    expect(screen.getByText('Send email')).toBeInTheDocument();
+    expect(screen.queryByText('HTTP request')).not.toBeInTheDocument();
+    expect(screen.queryByText('If')).not.toBeInTheDocument();
+  });
+
+  it('sets the node type slug on dataTransfer when dragging', () => {
+    render(<NodePalette nodeTypes={nodeTypes} />);
+    const item = screen.getByText('Send email').closest('[draggable="true"]');
+    expect(item).not.toBeNull();
+    const setData = jest.fn();
+    fireEvent.dragStart(item as Element, {
+      dataTransfer: { setData, effectAllowed: '' },
+    });
+    expect(setData).toHaveBeenCalledWith(
+      'application/x-workflow-node',
+      'action.email'
+    );
+  });
+});

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

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { WorkflowCanvas } from '../WorkflowCanvas';
+import type { WorkflowGraph, WfExecutionView } from '../types';
+
+// xyflow + DualPaneWorkspace consumers rely on browser APIs jsdom omits.
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+  // xyflow measures nodes via ResizeObserver.
+  global.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as never;
+});
+
+const graph: WorkflowGraph = {
+  id: 'wf1',
+  name: 'Sample',
+  nodes: [
+    { id: 'a', name: 'Start run', type: 'trigger.event', position: { x: 0, y: 0 } },
+    { id: 'b', name: 'Email user', type: 'action.email', position: { x: 0, y: 120 } },
+  ],
+  edges: [{ source: 'a', target: 'b' }],
+};
+
+describe('WorkflowCanvas', () => {
+  it('renders a node per graph node', () => {
+    render(<WorkflowCanvas graph={graph} />);
+    expect(screen.getByText('Start run')).toBeInTheDocument();
+    expect(screen.getByText('Email user')).toBeInTheDocument();
+  });
+
+  it('applies a status overlay from a WfExecutionView', () => {
+    const execution: WfExecutionView = {
+      executionId: 'e1',
+      status: 'running',
+      nodes: {
+        a: { nodeId: 'a', status: 'success' },
+        b: { nodeId: 'b', status: 'running' },
+      },
+    };
+    render(<WorkflowCanvas graph={graph} execution={execution} />);
+    // node b shows the running badge, node a shows success
+    expect(screen.getByText('Running')).toBeInTheDocument();
+    expect(screen.getByText('Success')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,92 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ReactFlowProvider } from '@xyflow/react';
+import { WorkflowNode } from '../WorkflowNode';
+import type { WfNode } from '../types';
+
+// xyflow handles need a provider + measured store; render inside one.
+function renderNode(props: Parameters<typeof WorkflowNode>[0]) {
+  return render(
+    <ReactFlowProvider>
+      <WorkflowNode {...props} />
+    </ReactFlowProvider>
+  );
+}
+
+function baseData(overrides: Partial<WfNode> = {}) {
+  const node: WfNode = {
+    id: 'n1',
+    name: 'Send email',
+    type: 'action.email',
+    ...overrides,
+  };
+  return {
+    node,
+    category: 'action',
+    status: 'idle' as const,
+  };
+}
+
+describe('WorkflowNode', () => {
+  it('renders the node title', () => {
+    renderNode({ id: 'n1', data: baseData(), selected: false } as never);
+    expect(screen.getByText('Send email')).toBeInTheDocument();
+  });
+
+  it('renders a status badge reflecting the node status', () => {
+    renderNode({
+      id: 'n1',
+      data: { ...baseData(), status: 'running' },
+      selected: false,
+    } as never);
+    expect(screen.getByText('Running')).toBeInTheDocument();
+  });
+
+  it('renders the category label from the theme', () => {
+    renderNode({ id: 'n1', data: baseData(), selected: false } as never);
+    // action category resolves to label "Action"
+    expect(screen.getByText('Action')).toBeInTheDocument();
+  });
+
+  it('renders one output handle per output (multi-output: if/else)', () => {
+    const { container } = renderNode({
+      id: 'n1',
+      data: {
+        ...baseData({ type: 'condition.if' }),
+        category: 'condition',
+        outputLabels: ['true', 'false'],
+        outputCount: 2,
+      },
+      selected: false,
+    } as never);
+    const outputs = container.querySelectorAll('[data-handle-kind="output"]');
+    expect(outputs).toHaveLength(2);
+    expect(screen.getByText('true')).toBeInTheDocument();
+    expect(screen.getByText('false')).toBeInTheDocument();
+  });
+
+  it('applies disabled styling when disabled', () => {
+    const { container } = renderNode({
+      id: 'n1',
+      data: { ...baseData({ disabled: true }) },
+      selected: false,
+    } as never);
+    expect(
+      container.querySelector('[data-disabled="true"]')
+    ).toBeInTheDocument();
+  });
+
+  it('invokes onRename when the title is edited', () => {
+    const onRename = jest.fn();
+    renderNode({
+      id: 'n1',
+      data: { ...baseData(), onRename },
+      selected: true,
+    } as never);
+    // double-click the title to enter edit mode
+    fireEvent.doubleClick(screen.getByText('Send email'));
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, { target: { value: 'Send welcome email' } });
+    fireEvent.blur(input);
+    expect(onRename).toHaveBeenCalledWith('n1', 'Send welcome email');
+  });
+});