@startsimpli/ui 0.4.14 → 0.4.16

package/src/components/workflows/NodeInspector.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { StatusBadge } from '../badge/StatusBadge';
+import { EmptyState } from '../states/EmptyState';
+import { NODE_STATUS_BADGE } from './exec-status';
+import type { JsonSchema, NodeExecView, NodeTypeDef, WfNode } from './types';
+
+export interface NodeInspectorProps {
+  /** The selected node, or null when nothing is selected. */
+  node: WfNode | null | undefined;
+  /** Node-type def supplying the parameter schema. */
+  nodeType?: NodeTypeDef;
+  /** Emitted with the node id + full next parameter object on any change. */
+  onParametersChange?: (nodeId: string, parameters: Record<string, unknown>) => void;
+  /** When present, adds read-only Input/Output exec tabs. */
+  execution?: NodeExecView;
+  className?: string;
+}
+
+function fieldId(nodeId: string, key: string): string {
+  return `nodeparam-${nodeId}-${key}`;
+}
+
+function SchemaField({
+  nodeId,
+  name,
+  schema,
+  value,
+  onChange,
+}: {
+  nodeId: string;
+  name: string;
+  schema: JsonSchema;
+  value: unknown;
+  onChange: (next: unknown) => void;
+}) {
+  const id = fieldId(nodeId, name);
+  const label = schema.title ?? name;
+
+  if (schema.enum && schema.enum.length > 0) {
+    return (
+      <div className="flex flex-col gap-1">
+        <label htmlFor={id} className="text-xs font-medium text-foreground">
+          {label}
+        </label>
+        <select
+          id={id}
+          value={String(value ?? '')}
+          onChange={(e) => onChange(e.target.value)}
+          className="rounded-md border border-border bg-background px-2 py-1.5 text-sm outline-none focus:ring-2 focus:ring-primary"
+        >
+          {schema.enum.map((opt) => (
+            <option key={String(opt)} value={String(opt)}>
+              {String(opt)}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  if (schema.type === 'boolean') {
+    return (
+      <div className="flex items-center gap-2">
+        <input
+          id={id}
+          type="checkbox"
+          checked={Boolean(value)}
+          onChange={(e) => onChange(e.target.checked)}
+          className="h-4 w-4 rounded border-border"
+        />
+        <label htmlFor={id} className="text-xs font-medium text-foreground">
+          {label}
+        </label>
+      </div>
+    );
+  }
+
+  if (schema.type === 'number' || schema.type === 'integer') {
+    return (
+      <div className="flex flex-col gap-1">
+        <label htmlFor={id} className="text-xs font-medium text-foreground">
+          {label}
+        </label>
+        <input
+          id={id}
+          type="number"
+          value={value === undefined || value === null ? '' : Number(value)}
+          onChange={(e) =>
+            onChange(e.target.value === '' ? undefined : Number(e.target.value))
+          }
+          className="rounded-md border border-border bg-background px-2 py-1.5 text-sm outline-none focus:ring-2 focus:ring-primary"
+        />
+      </div>
+    );
+  }
+
+  // default: string
+  return (
+    <div className="flex flex-col gap-1">
+      <label htmlFor={id} className="text-xs font-medium text-foreground">
+        {label}
+      </label>
+      <input
+        id={id}
+        type="text"
+        value={value === undefined || value === null ? '' : String(value)}
+        onChange={(e) => onChange(e.target.value)}
+        className="rounded-md border border-border bg-background px-2 py-1.5 text-sm outline-none focus:ring-2 focus:ring-primary"
+      />
+      {schema.description && (
+        <p className="text-[11px] text-muted-foreground">{schema.description}</p>
+      )}
+    </div>
+  );
+}
+
+function JsonBlock({ value }: { value: Record<string, unknown> | null | undefined }) {
+  const isEmpty = value == null || Object.keys(value).length === 0;
+  if (isEmpty) {
+    return <p className="text-xs italic text-muted-foreground">No data.</p>;
+  }
+  return (
+    <pre className="overflow-auto rounded-md border border-border bg-muted/40 p-2 text-xs leading-relaxed">
+      {JSON.stringify(value, null, 2)}
+    </pre>
+  );
+}
+
+function ParamForm({
+  node,
+  schema,
+  onParametersChange,
+}: {
+  node: WfNode;
+  schema: JsonSchema | undefined;
+  onParametersChange?: NodeInspectorProps['onParametersChange'];
+}) {
+  const params = (node.parameters ?? {}) as Record<string, unknown>;
+  const properties = schema?.properties ?? {};
+  const keys = Object.keys(properties);
+
+  const handleChange = (key: string, next: unknown) => {
+    const updated = { ...params, [key]: next };
+    onParametersChange?.(node.id, updated);
+  };
+
+  if (keys.length === 0) {
+    return (
+      <p className="text-xs italic text-muted-foreground">
+        This node type has no configurable parameters.
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {keys.map((key) => (
+        <SchemaField
+          key={key}
+          nodeId={node.id}
+          name={key}
+          schema={properties[key]}
+          value={params[key]}
+          onChange={(next) => handleChange(key, next)}
+        />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Editor inspector panel for the selected node. Renders a JSON-Schema-driven
+ * read/write form from the node-type's `parameterSchema` (string/number/
+ * boolean/enum fields), emitting the full next `parameters` object via
+ * `onParametersChange`. When an {@link NodeExecView} is supplied, adds
+ * read-only Input/Output tabs alongside the parameters tab.
+ */
+export function NodeInspector({
+  node,
+  nodeType,
+  onParametersChange,
+  execution,
+  className,
+}: NodeInspectorProps) {
+  if (!node) {
+    return (
+      <EmptyState
+        title="No node selected"
+        description="Select a node on the canvas to edit its parameters."
+        className={className}
+      />
+    );
+  }
+
+  const header = (
+    <header className="flex flex-col gap-1 border-b border-border px-4 py-3">
+      <div className="flex items-center gap-2">
+        <h3 className="truncate text-sm font-semibold text-foreground">
+          {node.name}
+        </h3>
+        {execution && (
+          <StatusBadge
+            status={execution.status}
+            config={NODE_STATUS_BADGE}
+            size="sm"
+          />
+        )}
+      </div>
+      <span className="text-xs text-muted-foreground">{node.type}</span>
+    </header>
+  );
+
+  const paramForm = (
+    <div className="overflow-auto p-4">
+      <ParamForm
+        node={node}
+        schema={nodeType?.parameterSchema}
+        onParametersChange={onParametersChange}
+      />
+    </div>
+  );
+
+  if (!execution) {
+    return (
+      <div className={cn('flex h-full min-h-0 flex-col', className)}>
+        {header}
+        {paramForm}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex h-full min-h-0 flex-col', className)}>
+      {header}
+      <Tabs defaultValue="params" className="flex min-h-0 flex-1 flex-col">
+        <TabsList className="mx-4 mt-3 self-start">
+          <TabsTrigger value="params">Parameters</TabsTrigger>
+          <TabsTrigger value="input">Input</TabsTrigger>
+          <TabsTrigger value="output">Output</TabsTrigger>
+        </TabsList>
+        <TabsContent value="params" className="min-h-0 flex-1">
+          {paramForm}
+        </TabsContent>
+        <TabsContent value="input" className="min-h-0 flex-1 overflow-auto p-4">
+          <JsonBlock value={execution.inputData} />
+        </TabsContent>
+        <TabsContent value="output" className="min-h-0 flex-1 overflow-auto p-4">
+          <JsonBlock value={execution.outputData} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/src/components/workflows/NodePalette.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { getCategoryToken } from './theme/categories';
+import { getCategoryIcon } from './node-icons';
+import type { NodeTypeDef } from './types';
+
+/** MIME-ish key used to carry a node-type slug across HTML5 drag-and-drop. */
+export const NODE_DND_MIME = 'application/x-workflow-node';
+
+export interface NodePaletteProps {
+  /** The node-type catalog to list. */
+  nodeTypes: NodeTypeDef[];
+  /** Optional click handler (e.g. add node at canvas center). */
+  onAddNode?: (slug: string) => void;
+  className?: string;
+}
+
+function matches(nt: NodeTypeDef, query: string): boolean {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  return (
+    nt.name.toLowerCase().includes(q) ||
+    nt.slug.toLowerCase().includes(q) ||
+    nt.category.toLowerCase().includes(q) ||
+    (nt.description?.toLowerCase().includes(q) ?? false)
+  );
+}
+
+function groupByCategory(
+  nodeTypes: NodeTypeDef[]
+): { category: string; items: NodeTypeDef[] }[] {
+  const groups = new Map<string, NodeTypeDef[]>();
+  for (const nt of nodeTypes) {
+    const list = groups.get(nt.category) ?? [];
+    list.push(nt);
+    groups.set(nt.category, list);
+  }
+  return [...groups.entries()].map(([category, items]) => ({ category, items }));
+}
+
+/**
+ * Draggable palette of {@link NodeTypeDef}s, grouped by category with a search
+ * filter. Each item is HTML5-draggable: dragging sets the node-type slug on
+ * `dataTransfer` under {@link NODE_DND_MIME} for the canvas to read on drop.
+ */
+export function NodePalette({ nodeTypes, onAddNode, className }: NodePaletteProps) {
+  const [query, setQuery] = React.useState('');
+
+  const groups = React.useMemo(() => {
+    const filtered = nodeTypes.filter((nt) => matches(nt, query));
+    return groupByCategory(filtered);
+  }, [nodeTypes, query]);
+
+  return (
+    <div className={cn('flex h-full min-h-0 flex-col', className)}>
+      <div className="shrink-0 border-b border-border p-2">
+        <input
+          type="search"
+          role="searchbox"
+          aria-label="Filter node types"
+          placeholder="Search nodes…"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm outline-none focus:ring-2 focus:ring-primary"
+        />
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-auto p-2">
+        {groups.length === 0 ? (
+          <p className="px-1 py-4 text-center text-xs text-muted-foreground">
+            No matching nodes.
+          </p>
+        ) : (
+          groups.map(({ category, items }) => {
+            const token = getCategoryToken(category);
+            return (
+              <div key={category} className="mb-3">
+                <h4 className="mb-1 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  {token.label}
+                </h4>
+                <ul className="flex flex-col gap-1">
+                  {items.map((nt) => {
+                    const Icon = getCategoryIcon(token.icon);
+                    return (
+                      <li key={nt.slug}>
+                        <div
+                          draggable
+                          onDragStart={(e) => {
+                            e.dataTransfer.setData(NODE_DND_MIME, nt.slug);
+                            e.dataTransfer.effectAllowed = 'move';
+                          }}
+                          onClick={() => onAddNode?.(nt.slug)}
+                          className="flex cursor-grab items-center gap-2 rounded-md border border-border bg-card px-2 py-1.5 text-sm transition-colors hover:bg-accent active:cursor-grabbing"
+                          title={nt.description ?? nt.name}
+                        >
+                          <span
+                            className="flex h-6 w-6 shrink-0 items-center justify-center rounded"
+                            style={{ background: token.background, color: token.color }}
+                          >
+                            <Icon className="h-3.5 w-3.5" aria-hidden="true" />
+                          </span>
+                          <span className="min-w-0 flex-1 truncate text-foreground">
+                            {nt.name}
+                          </span>
+                        </div>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}

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