@startsimpli/ui 0.4.14 → 0.4.16

package/src/components/workflows/types.ts

@@ -0,0 +1,231 @@
+/**
+ * Generic workflow-graph types — mirrors the StartSimpli backend
+ * (apps.workflows) n8n-style JSON graph definition.
+ *
+ * The graph is "behavior as data": a directed graph of typed nodes
+ * connected by edges. The shapes here are intentionally generic — node
+ * `type` is just a slug and `category` is a free string token resolved
+ * against the category theme map (theme/categories.ts).
+ *
+ * NOTE: `connections` is the LOCKED backend persistence format. See
+ * serialization.ts for the canonical shape and round-trip guarantees.
+ */
+
+// ── Status enums (match backend TextChoices verbatim) ──
+
+/** NodeExecution.Status — per-node runtime status (+ "idle" for editor). */
+export type NodeStatus =
+  | 'idle'
+  | 'pending'
+  | 'running'
+  | 'success'
+  | 'error'
+  | 'skipped';
+
+/** WorkflowExecution.Status — overall run status. */
+export type RunStatus =
+  | 'pending'
+  | 'running'
+  | 'completed'
+  | 'failed'
+  | 'cancelled'
+  | 'waiting';
+
+// ── Graph definition ──
+
+/**
+ * A single node in a workflow graph.
+ *
+ * Matches a backend `Workflow.nodes[]` entry:
+ * `{ id, name, type, parameters, ... }`. Extra backend fields
+ * (`disabled`, `continue_on_fail`) are preserved opaquely.
+ */
+export interface WfNode {
+  /** Stable node id — referenced by connections. */
+  id: string;
+  /** Human-readable name. */
+  name: string;
+  /** Node type slug, e.g. "condition.if", "trigger.event". */
+  type: string;
+  /** Node parameters (executor config). */
+  parameters?: Record<string, unknown>;
+  /**
+   * Optional explicit canvas position. When present, auto-layout
+   * preserves it instead of computing one.
+   */
+  position?: WfPosition;
+  /** Whether the node is disabled (skipped at runtime). */
+  disabled?: boolean;
+  /** Whether downstream traversal continues if this node fails. */
+  continueOnFail?: boolean;
+  /** Any additional opaque node fields. */
+  [key: string]: unknown;
+}
+
+export interface WfPosition {
+  x: number;
+  y: number;
+}
+
+/**
+ * A logical edge in the graph.
+ *
+ * `sourceOutput` is the source node's output index (n8n `main[i]`):
+ * 0 for a single output, 0/1 for if/else, 0..N-1 for switch.
+ * `targetInput` is the target node's input index (the `index` field
+ * stored on each backend connection — almost always 0).
+ */
+export interface WfEdge {
+  /** Source node id. */
+  source: string;
+  /** Target node id. */
+  target: string;
+  /** Source output index (default 0). */
+  sourceOutput?: number;
+  /** Target input index (default 0). */
+  targetInput?: number;
+  /** Connection type — n8n uses "main"; default "main". */
+  type?: string;
+}
+
+/**
+ * Definition of a node type (catalog entry). Mirrors backend NodeType.
+ */
+export interface NodeTypeDef {
+  /** Unique slug, e.g. "condition.if". */
+  slug: string;
+  /** Human-readable name. */
+  name: string;
+  /** Category token (resolved via theme/categories.ts). */
+  category: string;
+  /** Number of outputs (1 for most, 2 for if/else, N for switch). */
+  outputCount?: number;
+  /** Labels for each output, e.g. ["true", "false"]. */
+  outputLabels?: string[];
+  /** Optional description. */
+  description?: string;
+  /**
+   * JSON-Schema (object schema) describing the node's `parameters`. Drives the
+   * editor's NodeInspector form. Intentionally typed loosely — only the subset
+   * the inspector understands (`type`, `properties`, `title`, `enum`,
+   * `description`) is consumed; unknown keywords are ignored.
+   */
+  parameterSchema?: JsonSchema;
+}
+
+/** Minimal JSON-Schema subset consumed by the NodeInspector form. */
+export interface JsonSchema {
+  type?: 'object' | 'string' | 'number' | 'integer' | 'boolean' | 'array';
+  title?: string;
+  description?: string;
+  /** For object schemas: per-property sub-schemas. */
+  properties?: Record<string, JsonSchema>;
+  /** Required property names (object schemas). */
+  required?: string[];
+  /** Enumerated allowed values (renders a select). */
+  enum?: (string | number)[];
+  /** Default value. */
+  default?: unknown;
+}
+
+/**
+ * A complete workflow graph in the editor's working shape.
+ *
+ * `connections` (the backend LOCKED format) is intentionally NOT stored
+ * here — instead edges are kept as a flat list and converted to/from the
+ * nested backend shape by serialization.ts.
+ */
+export interface WorkflowGraph {
+  /** Optional workflow id. */
+  id?: string;
+  /** Optional workflow name. */
+  name?: string;
+  /** Graph nodes. */
+  nodes: WfNode[];
+  /** Graph edges (flat). */
+  edges: WfEdge[];
+}
+
+// ── Backend persistence (LOCKED n8n connections shape) ──
+
+/** A single connection target: `{ node, type, index }`. */
+export interface BackendConnection {
+  /** Target node id. */
+  node: string;
+  /** Connection type — "main". */
+  type: string;
+  /** Target input index. */
+  index: number;
+}
+
+/**
+ * The LOCKED backend connections map:
+ *
+ * ```json
+ * {
+ *   "sourceNodeId": {
+ *     "main": [
+ *       [ { "node": "targetId", "type": "main", "index": 0 } ]
+ *     ]
+ *   }
+ * }
+ * ```
+ *
+ * Outer array index = source output index. Each inner array is the list
+ * of parallel targets fanning out from that output.
+ */
+export type BackendConnections = Record<
+  string,
+  Record<string, BackendConnection[][]>
+>;
+
+/** Backend node shape (snake_case fields as persisted). */
+export interface BackendNode {
+  id: string;
+  name: string;
+  type: string;
+  parameters?: Record<string, unknown>;
+  position?: WfPosition;
+  disabled?: boolean;
+  continue_on_fail?: boolean;
+  [key: string]: unknown;
+}
+
+// ── Execution views (read-only overlays for run visualization) ──
+
+/** Per-node execution status overlay. Mirrors backend NodeExecution. */
+export interface NodeExecView {
+  nodeId: string;
+  status: NodeStatus;
+  /**
+   * Display name of the node. Optional because the bare status overlay
+   * (keyed by node id) may be merged with the graph's node names at the
+   * call site; the execution monitor renders it when present.
+   */
+  name?: string;
+  /** Node type slug (e.g. "condition.if"), shown in the detail panel. */
+  type?: string;
+  /**
+   * Position of this node in the run's execution sequence. The timeline
+   * renders rows sorted by this value (ascending).
+   */
+  executionOrder?: number;
+  startedAt?: string | null;
+  completedAt?: string | null;
+  executionTimeMs?: number | null;
+  error?: string;
+  /** Input payload fed to the node (pretty-printed in the detail panel). */
+  inputData?: Record<string, unknown>;
+  outputData?: Record<string, unknown>;
+}
+
+/** Whole-run execution overlay. Mirrors backend WorkflowExecution. */
+export interface WfExecutionView {
+  executionId?: string;
+  status: RunStatus;
+  startedAt?: string | null;
+  completedAt?: string | null;
+  errorMessage?: string;
+  /** Per-node status keyed by node id. */
+  nodes: Record<string, NodeExecView>;
+}

package/src/components/workflows/workflows.css

@@ -0,0 +1,29 @@
+/**
+ * @startsimpli/ui/workflows/styles
+ *
+ * Scoped stylesheet for the workflow editor/viewer. Re-exports the
+ * @xyflow/react base stylesheet (required for the canvas to render its
+ * pane, controls, handles, and edges) and adds the animated-edge keyframes
+ * used by WorkflowEdge for live runs. Consumers import this once, e.g.:
+ *
+ *   import '@startsimpli/ui/workflows/styles';
+ */
+
+@import '@xyflow/react/dist/style.css';
+
+/* Animated flow for edges whose source node is running/succeeded. */
+.workflow-edge--animated {
+  stroke-dasharray: 6 4;
+  animation: workflow-edge-dash 0.6s linear infinite;
+}
+
+@keyframes workflow-edge-dash {
+  to {
+    stroke-dashoffset: -10;
+  }
+}
+
+/* Keep the canvas filling its container. */
+.workflow-canvas {
+  min-height: 0;
+}

package/src/components/workspace/DualPaneWorkspace.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import * as React from 'react'
+import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { SplitPane } from './SplitPane'
+
+export type WorkspaceLayout = 'split' | 'stack' | 'auto'
+
+export interface DualPaneWorkspaceProps {
+  left: React.ReactNode
+  right: React.ReactNode
+  /** Optional toolbar rendered above both panes (full width). */
+  toolbar?: React.ReactNode
+  leftLabel?: string
+  rightLabel?: string
+  /** Initial size of the left pane as a percentage. Default 42. */
+  initialLeftSize?: number
+  minLeftSize?: number
+  maxLeftSize?: number
+  /** Persist the split position under this key. */
+  storageKey?: string
+  /**
+   * `split` = resizable side-by-side, `stack` = vertically stacked,
+   * `auto` = stack below `stackBreakpoint`, split above. Default `auto`.
+   */
+  layout?: WorkspaceLayout
+  /** Pixel width below which `auto` stacks. Default 768. */
+  stackBreakpoint?: number
+  /** Show collapse/expand controls for each pane (split layout only). */
+  collapsible?: boolean
+  className?: string
+}
+
+function useResolvedLayout(layout: WorkspaceLayout, stackBreakpoint: number): 'split' | 'stack' {
+  const [isNarrow, setIsNarrow] = React.useState(false)
+  React.useEffect(() => {
+    if (layout !== 'auto' || typeof window === 'undefined') return
+    const mql = window.matchMedia(`(max-width: ${stackBreakpoint - 1}px)`)
+    const update = () => setIsNarrow(mql.matches)
+    update()
+    mql.addEventListener?.('change', update)
+    return () => mql.removeEventListener?.('change', update)
+  }, [layout, stackBreakpoint])
+
+  if (layout === 'split') return 'split'
+  if (layout === 'stack') return 'stack'
+  return isNarrow ? 'stack' : 'split'
+}
+
+interface PaneHeaderProps {
+  label?: string
+  side: 'left' | 'right'
+  collapsible?: boolean
+  collapsed: boolean
+  onToggle: () => void
+}
+
+function PaneHeader({ label, side, collapsible, collapsed, onToggle }: PaneHeaderProps) {
+  if (!label && !collapsible) return null
+  const CollapseIcon = side === 'left' ? PanelLeftClose : PanelRightClose
+  const ExpandIcon = side === 'left' ? PanelLeftOpen : PanelRightOpen
+  const Icon = collapsed ? ExpandIcon : CollapseIcon
+  const verb = collapsed ? 'Expand' : 'Collapse'
+  return (
+    <div className="flex h-9 shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3">
+      {label ? (
+        <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{label}</span>
+      ) : (
+        <span />
+      )}
+      {collapsible && (
+        <button
+          type="button"
+          onClick={onToggle}
+          aria-label={`${verb} ${label ?? side} pane`}
+          className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+        >
+          <Icon className="h-4 w-4" aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Opinionated two-pane workspace shell built on {@link SplitPane}: an optional
+ * full-width toolbar, two labelled/collapsible panes side-by-side, and
+ * automatic vertical stacking on narrow viewports. Fully app-agnostic — used by
+ * present-web for chat | slides, but free of any presentation-specific logic.
+ */
+export function DualPaneWorkspace({
+  left,
+  right,
+  toolbar,
+  leftLabel,
+  rightLabel,
+  initialLeftSize = 42,
+  minLeftSize = 24,
+  maxLeftSize = 72,
+  storageKey,
+  layout = 'auto',
+  stackBreakpoint = 768,
+  collapsible = false,
+  className,
+}: DualPaneWorkspaceProps) {
+  const resolved = useResolvedLayout(layout, stackBreakpoint)
+  const [collapsed, setCollapsed] = React.useState<null | 'left' | 'right'>(null)
+
+  const leftHeader = (
+    <PaneHeader
+      label={leftLabel}
+      side="left"
+      collapsible={collapsible}
+      collapsed={collapsed === 'left'}
+      onToggle={() => setCollapsed((c) => (c === 'left' ? null : 'left'))}
+    />
+  )
+  const rightHeader = (
+    <PaneHeader
+      label={rightLabel}
+      side="right"
+      collapsible={collapsible}
+      collapsed={collapsed === 'right'}
+      onToggle={() => setCollapsed((c) => (c === 'right' ? null : 'right'))}
+    />
+  )
+
+  const leftPane = (
+    <section className="flex h-full min-h-0 flex-col" aria-label={leftLabel}>
+      {leftHeader}
+      {collapsed !== 'left' && <div className="min-h-0 flex-1 overflow-hidden">{left}</div>}
+    </section>
+  )
+  const rightPane = (
+    <section className="flex h-full min-h-0 flex-col" aria-label={rightLabel}>
+      {rightHeader}
+      {collapsed !== 'right' && <div className="min-h-0 flex-1 overflow-hidden">{right}</div>}
+    </section>
+  )
+
+  // When one pane is collapsed, the other takes the full width (no resizer).
+  let body: React.ReactNode
+  if (resolved === 'stack') {
+    body = (
+      <div className="flex min-h-0 flex-1 flex-col divide-y divide-border" data-layout="stack">
+        <div className="min-h-0 flex-1 overflow-hidden">{leftPane}</div>
+        <div className="min-h-0 flex-1 overflow-hidden">{rightPane}</div>
+      </div>
+    )
+  } else if (collapsed === 'left') {
+    body = (
+      <div className="flex min-h-0 flex-1 flex-row" data-layout="split" data-collapsed="left">
+        <div className="shrink-0">{leftHeader}</div>
+        <div className="min-h-0 flex-1 overflow-hidden">{rightPane}</div>
+      </div>
+    )
+  } else if (collapsed === 'right') {
+    body = (
+      <div className="flex min-h-0 flex-1 flex-row" data-layout="split" data-collapsed="right">
+        <div className="min-h-0 flex-1 overflow-hidden">{leftPane}</div>
+        <div className="shrink-0">{rightHeader}</div>
+      </div>
+    )
+  } else {
+    body = (
+      <div className="min-h-0 flex-1" data-layout="split">
+        <SplitPane
+          first={leftPane}
+          second={rightPane}
+          initialSize={initialLeftSize}
+          minSize={minLeftSize}
+          maxSize={maxLeftSize}
+          storageKey={storageKey}
+          aria-label="Resize workspace panes"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex h-full min-h-0 w-full flex-col', className)}>
+      {toolbar && <div className="shrink-0 border-b border-border">{toolbar}</div>}
+      {body}
+    </div>
+  )
+}

package/src/components/workspace/SplitPane.tsx

@@ -0,0 +1,174 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface SplitPaneProps {
+  /** Content of the first (left / top) pane. */
+  first: React.ReactNode
+  /** Content of the second (right / bottom) pane. */
+  second: React.ReactNode
+  /** Split direction. `vertical` = side-by-side (a vertical divider). Default `vertical`. */
+  orientation?: 'vertical' | 'horizontal'
+  /** Initial size of the first pane, as a percentage (0-100). Default 50. */
+  initialSize?: number
+  /** Minimum size of the first pane as a percentage. Default 20. */
+  minSize?: number
+  /** Maximum size of the first pane as a percentage. Default 80. */
+  maxSize?: number
+  /** Keyboard nudge / step size in percentage points. Default 3. */
+  step?: number
+  /** Persist the size under this key in localStorage. */
+  storageKey?: string
+  /** Notified with the new first-pane percentage whenever it changes. */
+  onResize?: (size: number) => void
+  className?: string
+  'aria-label'?: string
+}
+
+function clamp(v: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, v))
+}
+
+/**
+ * Generic, app-agnostic resizable two-pane split. Drag the divider with a
+ * pointer or nudge it with the arrow keys. Nothing domain-specific lives here.
+ */
+export function SplitPane({
+  first,
+  second,
+  orientation = 'vertical',
+  initialSize = 50,
+  minSize = 20,
+  maxSize = 80,
+  step = 3,
+  storageKey,
+  onResize,
+  className,
+  'aria-label': ariaLabel = 'Resize panes',
+}: SplitPaneProps) {
+  const isVertical = orientation === 'vertical'
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const draggingRef = React.useRef(false)
+
+  const [size, setSizeState] = React.useState<number>(() => {
+    if (typeof window !== 'undefined' && storageKey) {
+      const saved = window.localStorage.getItem(storageKey)
+      if (saved != null) {
+        const n = Number(saved)
+        if (!Number.isNaN(n)) return clamp(n, minSize, maxSize)
+      }
+    }
+    return clamp(initialSize, minSize, maxSize)
+  })
+
+  const setSize = React.useCallback(
+    (next: number) => {
+      const clamped = clamp(next, minSize, maxSize)
+      setSizeState(clamped)
+      onResize?.(clamped)
+      if (typeof window !== 'undefined' && storageKey) {
+        window.localStorage.setItem(storageKey, String(clamped))
+      }
+    },
+    [minSize, maxSize, onResize, storageKey]
+  )
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    const grow = isVertical ? 'ArrowRight' : 'ArrowDown'
+    const shrink = isVertical ? 'ArrowLeft' : 'ArrowUp'
+    if (e.key === grow) {
+      e.preventDefault()
+      setSize(size + step)
+    } else if (e.key === shrink) {
+      e.preventDefault()
+      setSize(size - step)
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      setSize(minSize)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      setSize(maxSize)
+    }
+  }
+
+  const onPointerMove = React.useCallback(
+    (e: PointerEvent) => {
+      if (!draggingRef.current || !containerRef.current) return
+      const rect = containerRef.current.getBoundingClientRect()
+      const pct = isVertical
+        ? ((e.clientX - rect.left) / rect.width) * 100
+        : ((e.clientY - rect.top) / rect.height) * 100
+      setSize(pct)
+    },
+    [isVertical, setSize]
+  )
+
+  const stopDragging = React.useCallback(() => {
+    draggingRef.current = false
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+  }, [])
+
+  React.useEffect(() => {
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', stopDragging)
+    return () => {
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', stopDragging)
+    }
+  }, [onPointerMove, stopDragging])
+
+  const startDragging = () => {
+    draggingRef.current = true
+    document.body.style.cursor = isVertical ? 'col-resize' : 'row-resize'
+    document.body.style.userSelect = 'none'
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'flex h-full w-full overflow-hidden',
+        isVertical ? 'flex-row' : 'flex-col',
+        className
+      )}
+      data-orientation={orientation}
+    >
+      <div
+        className="min-h-0 min-w-0 overflow-hidden"
+        style={isVertical ? { width: `${size}%` } : { height: `${size}%` }}
+        data-pane="first"
+      >
+        {first}
+      </div>
+      <div
+        role="separator"
+        aria-label={ariaLabel}
+        aria-orientation={orientation}
+        aria-valuenow={Math.round(size)}
+        aria-valuemin={minSize}
+        aria-valuemax={maxSize}
+        tabIndex={0}
+        onKeyDown={onKeyDown}
+        onPointerDown={startDragging}
+        className={cn(
+          'group relative shrink-0 bg-border transition-colors hover:bg-primary/40 focus-visible:bg-primary/60 focus:outline-none',
+          isVertical ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize'
+        )}
+        data-testid="split-pane-resizer"
+      >
+        <span
+          aria-hidden="true"
+          className={cn(
+            'absolute bg-transparent',
+            isVertical ? '-inset-x-1.5 inset-y-0' : '-inset-y-1.5 inset-x-0'
+          )}
+        />
+      </div>
+      <div className="min-h-0 min-w-0 flex-1 overflow-hidden" data-pane="second">
+        {second}
+      </div>
+    </div>
+  )
+}

package/src/components/workspace/index.ts

@@ -0,0 +1,4 @@
+export { SplitPane } from './SplitPane'
+export type { SplitPaneProps } from './SplitPane'
+export { DualPaneWorkspace } from './DualPaneWorkspace'
+export type { DualPaneWorkspaceProps, WorkspaceLayout } from './DualPaneWorkspace'