@startsimpli/ui 0.4.14 → 0.4.15

package/src/components/team/types.ts

@@ -0,0 +1,97 @@
+/**
+ * Shared types for the team-management components.
+ *
+ * Mirrors the @startsimpli/api shapes, but redeclared here so the UI
+ * package doesn't pull @startsimpli/api as a peer. Each component accepts
+ * the data it actually renders — apps pass through whatever @startsimpli/api
+ * gave them. startsim-o7s.
+ */
+
+import type * as React from 'react'
+
+export type TeamRole = 'owner' | 'admin' | 'member' | 'viewer'
+
+export interface TeamLite {
+  id: string
+  slug: string
+  name: string
+  companyId: string
+}
+
+export interface CompanyLite {
+  id: string
+  slug: string
+  name: string
+}
+
+/** User shape rendered next to each row. Optional fields stay optional. */
+export interface MemberUserLite {
+  id: string
+  email: string
+  firstName?: string
+  lastName?: string
+  fullName?: string
+  /** Optional URL to an avatar image. */
+  avatarUrl?: string
+}
+
+export interface MemberRow {
+  id: string
+  userId: string
+  teamId: string
+  role: TeamRole
+  joinedAt: string
+  /** Optionally embedded; when absent, the email + role-only render path is used. */
+  user?: MemberUserLite
+}
+
+export interface InvitationLite {
+  id: string
+  email: string
+  teamId: string
+  role: TeamRole
+  /** Only present on the create-response; otherwise the backend redacts. */
+  token?: string
+  expiresAt: string
+  acceptedAt?: string | null
+  revokedAt?: string | null
+  isExpired: boolean
+  isAccepted: boolean
+}
+
+export type DomainVerificationMethod = 'dns_txt' | 'email_attestation'
+
+export interface DomainClaimLite {
+  id: string
+  companyId: string
+  domain: string
+  verified: boolean
+  verificationMethod?: DomainVerificationMethod | null
+  verificationToken?: string | null
+  verifiedAt?: string | null
+  createdAt: string
+}
+
+/**
+ * Helper: render a human-friendly label for a user — fullName wins, then
+ * firstName + lastName, then email.
+ */
+export function userDisplayName(user: MemberUserLite | undefined): string {
+  if (!user) return ''
+  if (user.fullName) return user.fullName
+  const fl = [user.firstName, user.lastName].filter(Boolean).join(' ').trim()
+  return fl || user.email
+}
+
+/** Helper: render initials for the avatar fallback. */
+export function userInitials(user: MemberUserLite | undefined): string {
+  if (!user) return '?'
+  const name = userDisplayName(user)
+  const parts = name.split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return '?'
+  if (parts.length === 1) return parts[0][0].toUpperCase()
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+/** Common React-prop alias used by every team component. */
+export type ChildrenProps = { children?: React.ReactNode }

package/src/components/workflows/ExecNodeDetails.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { StatusBadge } from '../badge/StatusBadge';
+import { EmptyState } from '../states/EmptyState';
+import type { NodeExecView } from './types';
+import { NODE_STATUS_BADGE, formatDuration } from './exec-status';
+
+export interface ExecNodeDetailsProps {
+  /** The selected node execution, or null when nothing is selected. */
+  node: NodeExecView | null | undefined;
+  className?: string;
+}
+
+function JsonBlock({
+  label,
+  value,
+}: {
+  label: string;
+  value: Record<string, unknown> | null | undefined;
+}) {
+  const isEmpty = value == null || Object.keys(value).length === 0;
+  return (
+    <div className="flex min-h-0 flex-col">
+      <h4 className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </h4>
+      {isEmpty ? (
+        <p className="text-xs italic text-muted-foreground">No {label.toLowerCase()}.</p>
+      ) : (
+        <pre className="overflow-auto rounded-md border border-border bg-muted/40 p-2 text-xs leading-relaxed">
+          {JSON.stringify(value, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Read-only detail panel for a single node execution: name, type, status
+ * badge, duration, error, and pretty-printed input/output JSON. Purpose-built
+ * for the execution monitor — deliberately NOT the editor's NodeInspector.
+ */
+export function ExecNodeDetails({ node, className }: ExecNodeDetailsProps) {
+  if (!node) {
+    return (
+      <EmptyState
+        title="No node selected"
+        description="Select a node in the timeline to inspect its input and output."
+        className={className}
+      />
+    );
+  }
+
+  const duration = formatDuration(node.executionTimeMs);
+
+  return (
+    <div className={cn('flex h-full min-h-0 flex-col gap-4 overflow-auto p-4', className)}>
+      <header className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <h3 className="truncate text-base font-semibold text-foreground">
+            {node.name ?? node.nodeId}
+          </h3>
+          <StatusBadge status={node.status} config={NODE_STATUS_BADGE} size="sm" />
+        </div>
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          {node.type && <span>{node.type}</span>}
+          {duration && <span className="tabular-nums">{duration}</span>}
+        </div>
+      </header>
+
+      {node.status === 'error' && node.error && (
+        <p className="break-words rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+          {node.error}
+        </p>
+      )}
+
+      <JsonBlock label="Input" value={node.inputData} />
+      <JsonBlock label="Output" value={node.outputData} />
+    </div>
+  );
+}

package/src/components/workflows/ExecutionTimeline.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { StatusBadge } from '../badge/StatusBadge';
+import { EmptyState } from '../states/EmptyState';
+import type { NodeExecView } from './types';
+import { NODE_STATUS_BADGE, formatDuration, isLiveStatus } from './exec-status';
+
+export interface ExecutionTimelineProps {
+  /** Per-node execution overlays; rendered sorted by `executionOrder`. */
+  nodeExecutions: NodeExecView[];
+  /** Currently selected node id (row highlighted as active). */
+  activeNodeId?: string;
+  /** Called with a node id when its row is activated. */
+  onSelectNode?: (nodeId: string) => void;
+  className?: string;
+}
+
+function byExecutionOrder(a: NodeExecView, b: NodeExecView): number {
+  const ao = a.executionOrder ?? 0;
+  const bo = b.executionOrder ?? 0;
+  return ao - bo;
+}
+
+/**
+ * Vertical execution timeline: one row per node execution (ordered by
+ * `executionOrder`), each showing the node name, a status badge, the run
+ * duration, and inline error text for failed nodes. Running nodes show a
+ * pulsing live indicator; terminal nodes render statically.
+ *
+ * Read-only and app-agnostic — selection is surfaced via `onSelectNode`.
+ */
+export function ExecutionTimeline({
+  nodeExecutions,
+  activeNodeId,
+  onSelectNode,
+  className,
+}: ExecutionTimelineProps) {
+  const ordered = React.useMemo(
+    () => [...nodeExecutions].sort(byExecutionOrder),
+    [nodeExecutions]
+  );
+
+  if (ordered.length === 0) {
+    return (
+      <EmptyState
+        title="No node executions"
+        description="This run has not produced any node activity yet."
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <ol className={cn('flex flex-col', className)} aria-label="Execution timeline">
+      {ordered.map((node) => {
+        const live = isLiveStatus(node.status);
+        const isActive = activeNodeId != null && node.nodeId === activeNodeId;
+        const duration = formatDuration(node.executionTimeMs);
+        const selectable = onSelectNode != null;
+
+        return (
+          <li
+            key={node.nodeId}
+            aria-current={isActive ? 'true' : undefined}
+            data-node-id={node.nodeId}
+            data-status={node.status}
+            className={cn(
+              'group flex items-start gap-3 border-b border-border px-3 py-2.5 text-sm last:border-b-0',
+              selectable && 'cursor-pointer hover:bg-accent/50',
+              isActive && 'bg-accent'
+            )}
+            onClick={selectable ? () => onSelectNode!(node.nodeId) : undefined}
+            onKeyDown={
+              selectable
+                ? (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      onSelectNode!(node.nodeId);
+                    }
+                  }
+                : undefined
+            }
+            tabIndex={selectable ? 0 : undefined}
+          >
+            {/* Status rail dot */}
+            <span className="relative mt-1 flex h-2.5 w-2.5 shrink-0 items-center justify-center">
+              {live ? (
+                <>
+                  <span
+                    data-live="true"
+                    aria-hidden="true"
+                    className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75"
+                  />
+                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-blue-500" />
+                </>
+              ) : (
+                <span
+                  className={cn(
+                    'inline-flex h-2.5 w-2.5 rounded-full',
+                    node.status === 'success' && 'bg-green-500',
+                    node.status === 'error' && 'bg-red-500',
+                    node.status === 'skipped' && 'bg-gray-300',
+                    node.status === 'pending' && 'bg-amber-400',
+                    node.status === 'idle' && 'bg-gray-300'
+                  )}
+                />
+              )}
+            </span>
+
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="truncate font-medium text-foreground">
+                  {node.name ?? node.nodeId}
+                </span>
+                {duration && (
+                  <span className="ml-auto shrink-0 tabular-nums text-xs text-muted-foreground">
+                    {duration}
+                  </span>
+                )}
+              </div>
+              <div className="mt-1 flex items-center gap-2">
+                <StatusBadge
+                  status={node.status}
+                  config={NODE_STATUS_BADGE}
+                  size="sm"
+                />
+                {node.type && (
+                  <span className="truncate text-xs text-muted-foreground">
+                    {node.type}
+                  </span>
+                )}
+              </div>
+              {node.status === 'error' && node.error && (
+                <p className="mt-1.5 break-words text-xs text-red-600">
+                  {node.error}
+                </p>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

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