@invect/ui 0.0.1

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

@@ -0,0 +1,91 @@
+import { DialogHeader, DialogTitle } from '../../ui/dialog';
+import { InlineEdit } from '../inline-edit';
+import { cn } from '../../../lib/utils';
+import { Button } from '../../ui/button';
+import { Badge } from '../../ui/badge';
+import { Loader2, Play } from 'lucide-react';
+
+interface NodeConfigPanelHeaderProps {
+  label: string;
+  onLabelChange: (value: string) => void;
+  nodeTypeLabel: string;
+  Icon: React.ComponentType<{ className?: string }>;
+  categoryColor: string;
+  onRunNode?: () => void;
+  runButtonLabel?: string;
+  runDisabled?: boolean;
+  isRunning?: boolean;
+}
+
+export function NodeConfigPanelHeader({
+  label,
+  onLabelChange,
+  nodeTypeLabel,
+  Icon,
+  categoryColor,
+  onRunNode,
+  runButtonLabel = 'Run Node',
+  runDisabled = false,
+  isRunning = false,
+}: NodeConfigPanelHeaderProps) {
+  const handleRunClick = () => {
+    if (runDisabled || isRunning) {
+      return;
+    }
+    if (onRunNode) {
+      onRunNode();
+    } else {
+      // Provide a safe fallback so the button still responds even if no handler is passed
+      // eslint-disable-next-line no-console
+      console.warn('Run Node action not implemented yet');
+    }
+  };
+
+  return (
+    <DialogHeader className="pt-0 pb-2 text-left border-b border-border">
+      <DialogTitle className="sr-only">Configure {label || 'selected'} node</DialogTitle>
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-3 min-w-0">
+          <div
+            className={cn(
+              'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border',
+              categoryColor,
+            )}
+          >
+            <Icon className="w-4 h-4" />
+          </div>
+          <div className="min-w-0">
+            <InlineEdit
+              value={label}
+              onChange={onLabelChange}
+              placeholder="Untitled Node"
+              displayClassName="text-base font-semibold"
+              inputClassName="text-base font-semibold h-auto py-0.5 px-1.5"
+            />
+            <Badge variant="outline" className="text-[10px] h-4 px-1.5 capitalize">
+              {nodeTypeLabel}
+            </Badge>
+          </div>
+        </div>
+        <Button
+          size="sm"
+          className="px-4 gap-2 shrink-0"
+          onClick={handleRunClick}
+          disabled={runDisabled || isRunning}
+        >
+          {isRunning ? (
+            <>
+              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              Running…
+            </>
+          ) : (
+            <>
+              <Play className="w-3.5 h-3.5" />
+              {runButtonLabel}
+            </>
+          )}
+        </Button>
+      </div>
+    </DialogHeader>
+  );
+}

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

@@ -0,0 +1,144 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { NodeParamField } from '../../../types/node-definition.types';
+import { ConfigFieldWithTemplate } from './ConfigFieldWithTemplate';
+import { Button } from '../../ui/button';
+import { ChevronDown, ChevronRight, Settings2 } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+
+interface ParametersSectionProps {
+  fields: NodeParamField[];
+  formValues: Record<string, unknown>;
+  onFieldChange: (fieldName: string, value: unknown) => void;
+  emptyMessage?: string;
+  portalContainer?: HTMLElement | null;
+  /** Action / node type id — passed through to ConfigFieldWithTemplate for dynamic option loading. */
+  nodeType?: string;
+  /** Input data from upstream nodes — passed through for autocomplete in code fields. */
+  inputData?: Record<string, unknown>;
+  /** Per-field validation errors keyed by field name. */
+  fieldErrors?: Record<string, string>;
+}
+
+/**
+ * Get the template modes object from form values.
+ * Template modes track which fields are in "template mode" vs "static mode".
+ */
+function getTemplateModes(formValues: Record<string, unknown>): Record<string, boolean> {
+  const modes = formValues._templateModes;
+  if (modes && typeof modes === 'object' && !Array.isArray(modes)) {
+    return modes as Record<string, boolean>;
+  }
+  return {};
+}
+
+export const ParametersSection = ({
+  fields,
+  formValues,
+  onFieldChange,
+  emptyMessage,
+  portalContainer,
+  nodeType,
+  inputData,
+  fieldErrors,
+}: ParametersSectionProps) => {
+  const templateModes = getTemplateModes(formValues);
+  const [showExtended, setShowExtended] = useState(false);
+
+  // Separate standard and extended fields
+  const { standardFields, extendedFields } = useMemo(() => {
+    const standard: NodeParamField[] = [];
+    const extended: NodeParamField[] = [];
+
+    for (const field of fields) {
+      if (field.extended) {
+        extended.push(field);
+      } else {
+        standard.push(field);
+      }
+    }
+
+    return { standardFields: standard, extendedFields: extended };
+  }, [fields]);
+  const hasExpandableFields = useMemo(
+    () => fields.some((field) => ['textarea', 'json', 'code'].includes(field.type)),
+    [fields],
+  );
+  const hasExpandableExtendedFields = useMemo(
+    () => extendedFields.some((field) => ['textarea', 'json', 'code'].includes(field.type)),
+    [extendedFields],
+  );
+
+  const handleTemplateModeChange = useCallback(
+    (fieldName: string, enabled: boolean) => {
+      const currentModes = getTemplateModes(formValues);
+      const updatedModes = {
+        ...currentModes,
+        [fieldName]: enabled,
+      };
+      onFieldChange('_templateModes', updatedModes);
+    },
+    [formValues, onFieldChange],
+  );
+
+  const renderField = (field: NodeParamField) => (
+    <ConfigFieldWithTemplate
+      key={field.name}
+      field={field}
+      value={formValues[field.name]}
+      onChange={(value) => onFieldChange(field.name, value)}
+      templateMode={templateModes[field.name] ?? false}
+      onTemplateModeChange={(enabled) => handleTemplateModeChange(field.name, enabled)}
+      portalContainer={portalContainer}
+      nodeType={nodeType}
+      formValues={formValues}
+      inputData={inputData}
+      error={fieldErrors?.[field.name]}
+    />
+  );
+
+  if (!fields.length) {
+    return <div className="text-xs text-muted-foreground">{emptyMessage}</div>;
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-3 text-xs', hasExpandableFields && 'flex-1 min-h-0')}>
+      {/* Standard fields */}
+      {standardFields.map(renderField)}
+
+      {/* Extended options section */}
+      {extendedFields.length > 0 && (
+        <div className="flex flex-col gap-2 mt-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              'justify-start gap-1.5 h-7 px-2 text-[11px] text-muted-foreground hover:text-foreground',
+              showExtended && 'text-foreground',
+            )}
+            onClick={() => setShowExtended(!showExtended)}
+          >
+            {showExtended ? (
+              <ChevronDown className="w-3.5 h-3.5" />
+            ) : (
+              <ChevronRight className="w-3.5 h-3.5" />
+            )}
+            <Settings2 className="w-3 h-3" />
+            <span>More Options</span>
+            <span className="text-muted-foreground">({extendedFields.length})</span>
+          </Button>
+
+          {showExtended && (
+            <div
+              className={cn(
+                'flex flex-col gap-3 pl-3 ml-2 border-l-2 border-muted',
+                hasExpandableExtendedFields && 'flex-1 min-h-0',
+              )}
+            >
+              {extendedFields.map(renderField)}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,126 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { Button } from '../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../../ui/command';
+
+interface SearchableSelectFieldProps {
+  id?: string;
+  value: string;
+  options: { label: string; value: string }[];
+  placeholder?: string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+}
+
+/**
+ * A searchable select field using a combobox pattern (Popover + Command).
+ * Used for select fields with many options (e.g. model lists).
+ */
+export function SearchableSelectField({
+  id,
+  value,
+  options,
+  placeholder = 'Select…',
+  disabled,
+  onChange,
+}: SearchableSelectFieldProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const filtered = useMemo(() => {
+    if (!search) {
+      return options;
+    }
+    const lower = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(lower) || o.value.toLowerCase().includes(lower),
+    );
+  }, [options, search]);
+
+  const handleSelect = useCallback(
+    (val: string) => {
+      onChange(val);
+      setOpen(false);
+      setSearch('');
+    },
+    [onChange],
+  );
+
+  useEffect(() => {
+    if (!open) {
+      setSearch('');
+    }
+  }, [open]);
+
+  const displayLabel = useMemo(() => {
+    if (!value) {
+      return null;
+    }
+    const match = options.find((o) => o.value === value);
+    return match?.label ?? value;
+  }, [value, options]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          id={id}
+          disabled={disabled}
+          className={cn(
+            'w-full justify-between font-mono text-xs h-9',
+            !value && 'text-muted-foreground',
+          )}
+        >
+          <span className="truncate">{displayLabel ?? placeholder}</span>
+          <ChevronsUpDown className="w-3 h-3 ml-auto opacity-50 shrink-0" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder="Search…"
+            className="h-8 text-xs"
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandList className="max-h-52">
+            {filtered.length === 0 && (
+              <CommandEmpty className="text-xs">
+                {search ? 'No matching options' : 'No options available'}
+              </CommandEmpty>
+            )}
+            {filtered.length > 0 && (
+              <CommandGroup>
+                {filtered
+                  .filter((o) => o.value !== '')
+                  .map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value}
+                      onSelect={() => handleSelect(option.value)}
+                      className="font-mono text-xs"
+                    >
+                      <span className="truncate">{option.label}</span>
+                      {value === option.value && <Check className="w-3 h-3 ml-auto shrink-0" />}
+                    </CommandItem>
+                  ))}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,212 @@
+import { useCallback } from 'react';
+import { Button } from '../../ui/button';
+import { Input } from '../../ui/input';
+import { Label } from '../../ui/label';
+import { Plus, Trash2, ArrowUp, ArrowDown, Lock } from 'lucide-react';
+import { toReferenceId } from '../../../utils/nodeReferenceUtils';
+import { useFlowEditorStore } from '../flow-editor.store';
+import { CodeMirrorJsEditor } from '../../ui/codemirror-js-editor';
+
+interface SwitchCase {
+  slug: string;
+  label: string;
+  expression: string;
+}
+
+interface SwitchCasesFieldProps {
+  value: unknown;
+  onChange: (value: SwitchCase[]) => void;
+  nodeId: string | null;
+  inputData?: Record<string, unknown>;
+}
+
+/**
+ * Custom field renderer for the switch node's `cases` parameter.
+ * Renders an ordered list of cases, each with a label, slug, and JS expression.
+ * The default branch is always shown at the bottom and cannot be removed.
+ */
+export function SwitchCasesField({ value, onChange, nodeId, inputData }: SwitchCasesFieldProps) {
+  const removeEdgesBySourceHandle = useFlowEditorStore((s) => s.removeEdgesBySourceHandle);
+  const edges = useFlowEditorStore((s) => s.edges);
+
+  const cases: SwitchCase[] = Array.isArray(value) ? (value as SwitchCase[]) : [];
+
+  const hasEdgesForHandle = useCallback(
+    (slug: string) => {
+      if (!nodeId) {
+        return false;
+      }
+      return edges.some((e) => e.source === nodeId && e.sourceHandle === slug);
+    },
+    [nodeId, edges],
+  );
+
+  const generateUniqueSlug = useCallback((label: string, existingSlugs: Set<string>) => {
+    let base = toReferenceId(label);
+    if (!base) {
+      base = 'case';
+    }
+    if (base === 'default') {
+      base = 'case_default';
+    }
+
+    let slug = base;
+    let counter = 2;
+    while (existingSlugs.has(slug)) {
+      slug = `${base}_${counter}`;
+      counter++;
+    }
+    return slug;
+  }, []);
+
+  const handleAddCase = useCallback(() => {
+    const existingSlugs = new Set(cases.map((c) => c.slug));
+    existingSlugs.add('default');
+    const index = cases.length;
+    const label = `Case ${index}`;
+    const slug = generateUniqueSlug(label, existingSlugs);
+    onChange([...cases, { slug, label, expression: '' }]);
+  }, [cases, onChange, generateUniqueSlug]);
+
+  const handleRemoveCase = useCallback(
+    (index: number) => {
+      const removed = cases[index];
+      if (removed && nodeId) {
+        removeEdgesBySourceHandle(nodeId, removed.slug);
+      }
+      onChange(cases.filter((_, i) => i !== index));
+    },
+    [cases, onChange, nodeId, removeEdgesBySourceHandle],
+  );
+
+  const handleUpdateCase = useCallback(
+    (index: number, field: keyof SwitchCase, val: string) => {
+      const updated = [...cases];
+      const existing = updated[index];
+      if (!existing) {
+        return;
+      }
+
+      if (field === 'label') {
+        const hasEdges = hasEdgesForHandle(existing.slug);
+        if (!hasEdges) {
+          // Auto-update slug when label changes and no edges are connected
+          const existingSlugs = new Set(cases.map((c, i) => (i === index ? '' : c.slug)));
+          existingSlugs.add('default');
+          existingSlugs.delete('');
+          const newSlug = generateUniqueSlug(val, existingSlugs);
+          updated[index] = { ...existing, label: val, slug: newSlug };
+        } else {
+          updated[index] = { ...existing, label: val };
+        }
+      } else {
+        updated[index] = { ...existing, [field]: val };
+      }
+
+      onChange(updated);
+    },
+    [cases, onChange, hasEdgesForHandle, generateUniqueSlug],
+  );
+
+  const handleMoveCase = useCallback(
+    (index: number, direction: -1 | 1) => {
+      const newIndex = index + direction;
+      if (newIndex < 0 || newIndex >= cases.length) {
+        return;
+      }
+      const updated = [...cases];
+      const temp = updated[index];
+      updated[index] = updated[newIndex] as (typeof updated)[number];
+      updated[newIndex] = temp as (typeof updated)[number];
+      onChange(updated);
+    },
+    [cases, onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Label className="text-xs">Cases</Label>
+
+      {cases.map((c, index) => (
+        <div
+          key={c.slug}
+          className="flex flex-col gap-1.5 p-2 rounded-md border border-border bg-muted/30"
+        >
+          <div className="flex items-center gap-1">
+            <span className="text-[10px] text-muted-foreground font-mono w-4 shrink-0">
+              {index + 1}.
+            </span>
+            <Input
+              className="h-6 text-xs flex-1"
+              value={c.label}
+              onChange={(e) => handleUpdateCase(index, 'label', e.target.value)}
+              placeholder="Case label"
+            />
+            <div className="flex items-center gap-0.5">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => handleMoveCase(index, -1)}
+                disabled={index === 0}
+                title="Move up"
+              >
+                <ArrowUp className="w-3 h-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0"
+                onClick={() => handleMoveCase(index, 1)}
+                disabled={index === cases.length - 1}
+                title="Move down"
+              >
+                <ArrowDown className="w-3 h-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                onClick={() => handleRemoveCase(index)}
+                title="Remove case"
+              >
+                <Trash2 className="w-3 h-3" />
+              </Button>
+            </div>
+          </div>
+          <div className="pl-5">
+            <CodeMirrorJsEditor
+              value={c.expression}
+              onChange={(val) => handleUpdateCase(index, 'expression', val)}
+              placeholder='priority === "high"'
+              inputData={inputData}
+              hideGutter
+              hideToolbar
+              hideResize
+              defaultHeight={76}
+              minHeight={76}
+              maxHeight={76}
+            />
+          </div>
+        </div>
+      ))}
+
+      {/* Default branch — always present, not removable */}
+      <div className="flex items-center gap-2 p-2 rounded-md border border-border bg-muted/20">
+        <Lock className="w-3 h-3 text-muted-foreground shrink-0" />
+        <span className="text-xs text-muted-foreground">Default — matches when no case does</span>
+      </div>
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-7 text-xs gap-1"
+        onClick={handleAddCase}
+        disabled={cases.length >= 4}
+      >
+        <Plus className="w-3 h-3" />
+        Add Case
+      </Button>
+    </div>
+  );
+}

package/src/components/flow-editor/node-config-panel/hooks/index.ts

@@ -0,0 +1,2 @@
+export { usePreviewState } from './use-node-config-panel-state';
+export { useNodeExecution } from './use-node-execution';