@invect/ui 0.0.1

package/src/components/flow-editor/ValidationPanel.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { useValidation } from '../../contexts/ValidationContext';
+import {
+  FlowValidationError,
+  FlowValidationWarning,
+  FLOW_VALIDATION_ERROR_TYPES,
+} from '@invect/core/types';
+
+// Helper function to format node ID to a short display name
+const formatNodeId = (nodeId: string): string => {
+  // Trim long UUIDs to something readable
+  if (nodeId.length > 20) {
+    return nodeId.slice(0, 8) + '…';
+  }
+  return nodeId;
+};
+
+interface ValidationPanelProps {
+  className?: string;
+}
+
+export function ValidationPanel({ className = '' }: ValidationPanelProps) {
+  const { validationResult, hasErrors, hasWarnings } = useValidation();
+
+  if (!validationResult || (!hasErrors && !hasWarnings)) {
+    return null;
+  }
+
+  const getErrorIcon = (error: FlowValidationError | FlowValidationWarning) => {
+    if (error.severity === 'error') {
+      return <span className="font-bold text-red-500">⚠️</span>;
+    }
+    return <span className="font-bold text-yellow-500">⚠</span>;
+  };
+
+  const getErrorTypeLabel = (type: string) => {
+    switch (type) {
+      // Errors (will cause execution failure)
+      case FLOW_VALIDATION_ERROR_TYPES.ERROR.INVALID_EDGE_REFERENCE:
+        return 'Invalid Edge Reference';
+      case FLOW_VALIDATION_ERROR_TYPES.ERROR.SELF_REFERENCING_EDGE:
+        return 'Self-Referencing Edge';
+      case FLOW_VALIDATION_ERROR_TYPES.ERROR.CIRCULAR_DEPENDENCY:
+        return 'Circular Dependency';
+      case FLOW_VALIDATION_ERROR_TYPES.ERROR.VALIDATION_SYSTEM_ERROR:
+        return 'Validation System Error';
+
+      // Warnings (flow will run but something looks off)
+      case FLOW_VALIDATION_ERROR_TYPES.WARNING.EMPTY_FLOW:
+        return 'Empty Flow';
+      case FLOW_VALIDATION_ERROR_TYPES.WARNING.ENTRY_NODE_HAS_INCOMING_EDGES:
+        return 'Entry Node Has Incoming Edges';
+      case FLOW_VALIDATION_ERROR_TYPES.WARNING.DISCONNECTED_NODE:
+        return 'Disconnected Node';
+      case FLOW_VALIDATION_ERROR_TYPES.WARNING.DUPLICATE_EDGE:
+        return 'Duplicate Edge';
+
+      // Generic fallback
+      default:
+        return 'Validation Issue';
+    }
+  };
+
+  return (
+    <div className={`bg-background border-l border-b h-full border-border p-4 ${className}`}>
+      <div className="mb-4">
+        <h3 className="text-lg font-semibold text-foreground">Flow Validation</h3>
+        <div className="text-sm text-muted-foreground">
+          {hasErrors && (
+            <span className="font-medium text-red-600">
+              {validationResult.isValid ? 0 : validationResult.errors.length} error
+              {validationResult.isValid ? 's' : validationResult.errors.length !== 1 ? 's' : ''}
+            </span>
+          )}
+          {hasErrors && hasWarnings && <span className="mx-2">•</span>}
+          {hasWarnings && (
+            <span className="font-medium text-yellow-600">
+              {validationResult.warnings?.length || 0} warning
+              {(validationResult.warnings?.length || 0) !== 1 ? 's' : ''}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {/* Errors */}
+        {!validationResult.isValid &&
+          validationResult.errors.map((error, index) => (
+            <ValidationItem
+              key={`error-${index}`}
+              error={error}
+              icon={getErrorIcon(error)}
+              typeLabel={getErrorTypeLabel(error.type)}
+            />
+          ))}
+
+        {/* Warnings */}
+        {validationResult.warnings?.map((warning, index) => (
+          <ValidationItem
+            key={`warning-${index}`}
+            error={warning}
+            icon={getErrorIcon(warning)}
+            typeLabel={getErrorTypeLabel(warning.type)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface ValidationItemProps {
+  error: FlowValidationError | FlowValidationWarning;
+  icon: React.ReactNode;
+  typeLabel: string;
+}
+
+function ValidationItem({ error, icon, typeLabel }: ValidationItemProps) {
+  const severityClass =
+    error.severity === 'error'
+      ? 'border-destructive/20 bg-destructive/5'
+      : 'border-border bg-muted/50';
+
+  return (
+    <div className={`border rounded-lg p-3 ${severityClass}`}>
+      <div className="flex items-start space-x-2">
+        <div className="flex-shrink-0 mt-0.5">{icon}</div>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-medium text-foreground">{typeLabel}</div>
+          <div className="mt-1 text-sm text-muted-foreground">{error.message}</div>
+
+          {/* Additional context information */}
+          {'nodeId' in error && error.nodeId && (
+            <div className="mt-2 text-xs text-muted-foreground">
+              Node: {formatNodeId(error.nodeId)}
+            </div>
+          )}
+          {'sourceNodeId' in error &&
+          'targetNodeId' in error &&
+          error.sourceNodeId &&
+          error.targetNodeId ? (
+            <div className="mt-1 text-xs text-muted-foreground">
+              Connection: {formatNodeId(error.sourceNodeId)} → {formatNodeId(error.targetNodeId)}
+            </div>
+          ) : null}
+
+          {/* Show additional edges for multiple inputs */}
+          {error.additionalContext &&
+          'additionalEdgeIds' in error.additionalContext &&
+          error.additionalContext.additionalEdgeIds ? (
+            <div className="mt-1 text-xs text-muted-foreground">
+              Additional edges: {(error.additionalContext.additionalEdgeIds as string[]).join(', ')}
+            </div>
+          ) : null}
+
+          {/* Show cycle path for circular dependencies */}
+          {error.additionalContext &&
+          'cyclePath' in error.additionalContext &&
+          error.additionalContext.cyclePath ? (
+            <div className="mt-1 text-xs text-muted-foreground">
+              Cycle: {(error.additionalContext.cyclePath as string[]).join(' → ')}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/flow-editor/flow-editor.store.ts

@@ -0,0 +1,2 @@
+// Re-export from shared stores location — see stores/flow-editor.store.ts
+export * from '~/stores/flow-editor.store';

package/src/components/flow-editor/index.ts

@@ -0,0 +1,6 @@
+export { FlowEditor } from './FlowEditor';
+export type { FlowEditorProps } from './FlowEditor';
+export { FlowWorkbenchView } from './FlowEditor';
+export { NodeSidebar, type SidebarMode, type NodeSidebarProps } from './NodeSidebar';
+export { ActionsSidebar } from './ActionsSidebar';
+export { useFlowEditorStore, useIsLoading } from './flow-editor.store';

package/src/components/flow-editor/inline-edit.tsx

@@ -0,0 +1,111 @@
+import { useState, useRef, useEffect } from 'react';
+import { Input } from '../ui/input';
+import { Button } from '../ui/button';
+import { Pencil, Check, X } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+interface InlineEditProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  displayClassName?: string;
+  inputClassName?: string;
+}
+
+export function InlineEdit({
+  value,
+  onChange,
+  placeholder = 'Enter text',
+  className,
+  displayClassName,
+  inputClassName,
+}: InlineEditProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setEditValue(value);
+  }, [value]);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        if (isEditing) {
+          handleCancel();
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isEditing]);
+
+  const handleSave = () => {
+    if (editValue.trim()) {
+      onChange(editValue.trim());
+      setIsEditing(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setEditValue(value);
+    setIsEditing(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSave();
+    } else if (e.key === 'Escape') {
+      handleCancel();
+    }
+  };
+
+  if (isEditing) {
+    return (
+      <div ref={containerRef} className={cn('flex items-center gap-2 max-w-md', className)}>
+        <Input
+          ref={inputRef}
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          className={cn('h-9', inputClassName)}
+        />
+        <Button size="icon" variant="ghost" className="h-9 w-9 shrink-0" onClick={handleSave}>
+          <Check className="w-4 h-4" />
+        </Button>
+        <Button size="icon" variant="ghost" className="h-9 w-9 shrink-0" onClick={handleCancel}>
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className={cn('flex items-center gap-2 group', className)}>
+      <span className={cn('cursor-pointer', displayClassName)} onClick={() => setIsEditing(true)}>
+        {value || placeholder}
+      </span>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="w-8 h-8 shrink-0"
+        onClick={() => setIsEditing(true)}
+      >
+        <Pencil className="w-4 h-4" />
+      </Button>
+    </div>
+  );
+}

package/src/components/flow-editor/node-config-panel/ConfigFieldWithTemplate.tsx

@@ -0,0 +1,334 @@
+import { Label } from '../../ui/label';
+import { Input } from '../../ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
+import { Switch } from '../../ui/switch';
+import { Button } from '../../ui/button';
+import { Code2, Type, AlertCircle } from 'lucide-react';
+import type { NodeParamField } from '../../../types/node-definition.types';
+import { cn } from '../../../lib/utils';
+import { DroppableInput } from './DroppableInput';
+import { DynamicSelectField } from './DynamicSelectField';
+import { SearchableSelectField } from './SearchableSelectField';
+import { CodeMirrorJsEditor } from '../../ui/codemirror-js-editor';
+import { SwitchCasesField } from './SwitchCasesField';
+import { useFlowEditorStore } from '../flow-editor.store';
+
+interface ConfigFieldWithTemplateProps {
+  field: NodeParamField;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  templateMode: boolean;
+  onTemplateModeChange: (enabled: boolean) => void;
+  portalContainer?: HTMLElement | null;
+  /** Action / node type id — needed for dynamic option loading. */
+  nodeType?: string;
+  /** All current form values — needed for dynamic option loading. */
+  formValues?: Record<string, unknown>;
+  /** Input data from upstream nodes — used for autocomplete in code fields. */
+  inputData?: Record<string, unknown>;
+  /** Validation error message for this field (from execution errors). */
+  error?: string;
+}
+
+/**
+ * Field types that are always in template mode (text-based inputs).
+ * These fields don't show a toggle - they always accept Nunjucks templates.
+ */
+const ALWAYS_TEMPLATE_TYPES = ['text', 'textarea', 'json', 'code'];
+
+/**
+ * Check if a field type should always be in template mode.
+ */
+function isAlwaysTemplateType(fieldType: string): boolean {
+  return ALWAYS_TEMPLATE_TYPES.includes(fieldType);
+}
+
+/**
+ * A config field that supports toggling between static mode (normal form element)
+ * and template mode (Nunjucks template textarea).
+ *
+ * Text-based fields (text, textarea, json, code) are always in template mode.
+ * Other fields (select, number, boolean) show a toggle to switch between modes.
+ */
+export const ConfigFieldWithTemplate = ({
+  field,
+  value,
+  onChange,
+  templateMode,
+  onTemplateModeChange,
+  portalContainer,
+  nodeType,
+  formValues,
+  inputData,
+  error,
+}: ConfigFieldWithTemplateProps) => {
+  if (field.hidden) {
+    return null;
+  }
+
+  const fieldError = error ? (
+    <div className="flex items-center gap-1 text-[11px] text-destructive mt-0.5">
+      <AlertCircle className="w-3 h-3 shrink-0" />
+      <span>{error}</span>
+    </div>
+  ) : null;
+
+  // Switch cases: custom field with its own rendering
+  if (field.type === 'switch-cases') {
+    const selectedNodeId = useFlowEditorStore.getState().selectedNodeId;
+    return (
+      <SwitchCasesField
+        value={value}
+        onChange={onChange as (value: unknown) => void}
+        nodeId={selectedNodeId}
+        inputData={inputData}
+      />
+    );
+  }
+
+  // Check if this field type is always in template mode
+  const alwaysTemplate = isAlwaysTemplateType(field.type);
+  const effectiveTemplateMode = alwaysTemplate || templateMode;
+
+  const templateModeToggle = (
+    <Button
+      variant="ghost"
+      size="sm"
+      className={cn(
+        'h-5 px-1.5 text-[10px] gap-0.5',
+        effectiveTemplateMode ? 'text-primary' : 'text-muted-foreground',
+      )}
+      onClick={() => onTemplateModeChange(!templateMode)}
+      title={effectiveTemplateMode ? 'Switch to static value' : 'Switch to template'}
+    >
+      {effectiveTemplateMode ? (
+        <>
+          <Code2 className="w-2.5 h-2.5" />
+          <span>Template</span>
+        </>
+      ) : (
+        <>
+          <Type className="w-2.5 h-2.5" />
+          <span>Static</span>
+        </>
+      )}
+    </Button>
+  );
+
+  // Header with or without toggle based on field type
+  const fieldHeader = (
+    <div className="flex items-center justify-between">
+      <Label htmlFor={field.name} className={cn('text-xs', error && 'text-destructive')}>
+        {field.label}
+      </Label>
+      {/* Only show toggle for non-text fields */}
+      {!alwaysTemplate && templateModeToggle}
+    </div>
+  );
+
+  // Code fields: render a JavaScript editor with syntax highlighting and autocomplete
+  if (field.type === 'code') {
+    const codeValue =
+      typeof value === 'string'
+        ? value
+        : value === null || value === undefined
+          ? ''
+          : typeof value === 'object'
+            ? JSON.stringify(value, null, 2)
+            : String(value);
+    return (
+      <div className="flex flex-col gap-1.5">
+        {fieldHeader}
+        <CodeMirrorJsEditor
+          value={codeValue}
+          onChange={(newValue) => onChange(newValue)}
+          placeholder={field.placeholder}
+          inputData={inputData}
+        />
+        {fieldError}
+      </div>
+    );
+  }
+
+  // Template mode: render a DroppableInput for Nunjucks templates
+  if (effectiveTemplateMode) {
+    // Determine if this should be multiline based on original field type
+    const isMultiline = field.type === 'textarea' || field.type === 'json';
+    const rows = field.type === 'json' ? 6 : field.type === 'textarea' ? 3 : 1;
+
+    return (
+      <div className={cn('flex flex-col gap-1.5', isMultiline && 'flex-1 min-h-0')}>
+        {fieldHeader}
+        <DroppableInput
+          id={field.name}
+          className={cn('text-xs font-mono', isMultiline && 'min-h-0 flex-1')}
+          multiline={isMultiline}
+          rows={rows}
+          fillAvailableHeight={isMultiline}
+          value={
+            typeof value === 'string'
+              ? value
+              : value === null || value === undefined
+                ? ''
+                : JSON.stringify(value, null, 2)
+          }
+          placeholder={field.placeholder || '{{ nodeId.data.variables.output.value }}'}
+          onChange={(newValue) => onChange(newValue)}
+          disabled={field.disabled}
+        />
+        {fieldError}
+      </div>
+    );
+  }
+
+  // Static mode: render the appropriate form element based on field type
+  // (Only reached for non-text fields when not in template mode)
+  switch (field.type) {
+    case 'select': {
+      // Dynamic options: delegate to DynamicSelectField when loadOptions is present
+      if (field.loadOptions && nodeType && formValues) {
+        return (
+          <div className="flex flex-col gap-1.5">
+            {fieldHeader}
+            <DynamicSelectField
+              actionId={nodeType}
+              field={field}
+              value={value}
+              onChange={onChange}
+              formValues={formValues}
+              portalContainer={portalContainer}
+            />
+            {fieldError}
+          </div>
+        );
+      }
+
+      const stringValue = value === undefined || value === null ? '' : String(value);
+      const optionEntries = (field.options ?? []).map((option) => ({
+        label: option.label,
+        value: String(option.value),
+        description: option.description,
+      }));
+      const hasCurrentValue = stringValue
+        ? optionEntries.some((option) => option.value === stringValue)
+        : false;
+      const renderOptions =
+        hasCurrentValue || !stringValue
+          ? optionEntries
+          : [{ label: stringValue, value: stringValue, description: undefined }, ...optionEntries];
+
+      const hasDescriptions = renderOptions.some((o) => o.description);
+
+      // Use searchable combobox for selects with many options (e.g. model lists)
+      const SEARCHABLE_THRESHOLD = 10;
+      if (renderOptions.length > SEARCHABLE_THRESHOLD) {
+        return (
+          <div className="flex flex-col gap-1.5">
+            {fieldHeader}
+            <SearchableSelectField
+              id={field.name}
+              value={stringValue}
+              options={renderOptions}
+              placeholder={field.placeholder}
+              disabled={field.disabled}
+              onChange={(val) => onChange(val)}
+            />
+            {fieldError}
+          </div>
+        );
+      }
+
+      return (
+        <div className="flex flex-col gap-1.5">
+          {fieldHeader}
+          <Select
+            value={stringValue}
+            onValueChange={(val) => onChange(val)}
+            disabled={field.disabled}
+          >
+            <SelectTrigger id={field.name} className="font-mono text-xs">
+              <SelectValue placeholder={field.placeholder} />
+            </SelectTrigger>
+            <SelectContent className="z-[80] text-xs" container={portalContainer}>
+              {renderOptions
+                .filter((option) => option.value !== '')
+                .map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {hasDescriptions ? (
+                      <div className="flex flex-col gap-0.5 py-0.5">
+                        <span className="font-medium">{option.label}</span>
+                        {option.description && (
+                          <span className="text-[11px] text-muted-foreground font-normal leading-tight">
+                            {option.description}
+                          </span>
+                        )}
+                      </div>
+                    ) : (
+                      option.value
+                    )}
+                  </SelectItem>
+                ))}
+            </SelectContent>
+          </Select>
+          {fieldError}
+        </div>
+      );
+    }
+    case 'number':
+      return (
+        <div className="flex flex-col gap-1.5">
+          {fieldHeader}
+          <Input
+            id={field.name}
+            type="number"
+            className="h-8 font-mono text-xs"
+            value={value === undefined || value === null ? '' : String(value)}
+            placeholder={field.placeholder}
+            onChange={(event) => {
+              const nextValue = event.target.value;
+              onChange(nextValue === '' ? null : Number(nextValue));
+            }}
+            disabled={field.disabled}
+          />
+          {fieldError}
+        </div>
+      );
+    case 'boolean':
+      return (
+        <div className="flex flex-col gap-1.5">
+          {fieldHeader}
+          <div className="flex items-center gap-2 p-2 border rounded-md">
+            <Switch
+              id={field.name}
+              checked={Boolean(value)}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                onChange(event.target.checked)
+              }
+              disabled={field.disabled}
+            />
+            <span className="text-xs">{value ? 'Enabled' : 'Disabled'}</span>
+          </div>
+          {fieldError}
+        </div>
+      );
+    case 'credential':
+    // Credential fields show a dropdown (handled separately in CredentialsSection)
+    // Fall through to default text input for now
+    default:
+      // Fallback for any other field types
+      return (
+        <div className="flex flex-col gap-1.5">
+          {fieldHeader}
+          <DroppableInput
+            id={field.name}
+            value={(value as string) ?? ''}
+            placeholder={field.placeholder}
+            onChange={(newValue) => onChange(newValue)}
+            disabled={field.disabled}
+            className="font-mono text-xs"
+          />
+          {fieldError}
+        </div>
+      );
+  }
+};