@invect/ui 0.0.1

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

@@ -0,0 +1,217 @@
+import { useMemo, useState } from 'react';
+import { ChevronsUpDown, Check, Loader2, Plus, RefreshCw, XCircle, Pencil } from 'lucide-react';
+import { Button } from '../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../../ui/command';
+import { ProviderIcon } from '../../shared/ProviderIcon';
+import type { Credential } from '../../../api/types';
+import { cn } from '../../../lib/utils';
+import { getCredentialBranding } from '../../../utils/credentialBranding';
+
+const NO_CREDENTIAL_VALUE = '__invect_no_credential__';
+
+interface Props {
+  credentials: Credential[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  isLoading: boolean;
+  isError: boolean;
+  onRetry: () => void;
+  onAddNew: () => void;
+  onEditCredential?: (credential: Credential) => void;
+  onRefreshOAuthCredential?: (credential: Credential) => void;
+  /** ID of the credential currently being refreshed */
+  refreshingCredentialId?: string | null;
+  container?: HTMLElement | null;
+  disablePortal?: boolean;
+  /** Custom label for the add button (default: "Add new credential") */
+  addButtonLabel?: string;
+}
+
+export function CredentialCombobox({
+  credentials,
+  value,
+  onChange,
+  placeholder = 'Select credential',
+  isLoading,
+  isError,
+  onRetry,
+  onAddNew,
+  onEditCredential,
+  onRefreshOAuthCredential,
+  refreshingCredentialId,
+  container,
+  disablePortal = true,
+  addButtonLabel = 'Add new credential',
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const selectedCredential = useMemo(
+    () => credentials.find((cred) => cred.id === value),
+    [credentials, value],
+  );
+  const selectedCredentialBranding = useMemo(
+    () => (selectedCredential ? getCredentialBranding(selectedCredential) : null),
+    [selectedCredential],
+  );
+
+  const handleSelect = (nextValue: string) => {
+    const normalizedValue = nextValue === NO_CREDENTIAL_VALUE ? '' : nextValue;
+    onChange(normalizedValue);
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="justify-between gap-2 w-full font-mono text-xs"
+        >
+          <span className="flex min-w-0 items-center gap-2 overflow-hidden">
+            {selectedCredential && selectedCredentialBranding ? (
+              <ProviderIcon
+                providerId={selectedCredentialBranding.providerId}
+                icon={selectedCredentialBranding.icon}
+                className="w-3.5 h-3.5 shrink-0 text-muted-foreground"
+              />
+            ) : null}
+            <span className="truncate">
+              {selectedCredential ? selectedCredential.name : placeholder}
+            </span>
+          </span>
+          <ChevronsUpDown className="w-4 h-4 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        align="start"
+        container={container}
+        disablePortal={disablePortal}
+      >
+        <Command>
+          <CommandInput
+            className="h-8 border-0 rounded-none py-1 font-mono text-xs shadow-none focus:outline-none focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+            placeholder="Search credentials..."
+          />
+          <CommandList>
+            {isLoading && (
+              <div className="flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Loading credentials...
+              </div>
+            )}
+            {isError && !isLoading && (
+              <CommandEmpty>
+                <div className="flex flex-col items-center gap-2 text-sm">
+                  <XCircle className="w-4 h-4 text-destructive" />
+                  <span>Failed to load credentials.</span>
+                  <Button variant="ghost" size="sm" className="mt-1" onClick={onRetry}>
+                    <RefreshCw className="w-4 h-4 mr-2" /> Retry
+                  </Button>
+                </div>
+              </CommandEmpty>
+            )}
+            {!isLoading && !isError && credentials.length === 0 && (
+              <CommandEmpty>No credentials found.</CommandEmpty>
+            )}
+            {!isLoading && !isError && (
+              <>
+                <CommandGroup>
+                  <CommandItem
+                    value={NO_CREDENTIAL_VALUE}
+                    onSelect={handleSelect}
+                    className="flex items-center gap-2 font-mono text-xs"
+                  >
+                    <Check className={cn('h-4 w-4', value === '' ? 'opacity-100' : 'opacity-0')} />
+                    No credential
+                  </CommandItem>
+                  {credentials.map((credential) => {
+                    const branding = getCredentialBranding(credential);
+                    const isOAuth = credential.authType === 'oauth2';
+                    const isRefreshing = refreshingCredentialId === credential.id;
+
+                    return (
+                      <CommandItem
+                        key={credential.id}
+                        value={credential.id}
+                        onSelect={handleSelect}
+                        className="flex items-center gap-2 font-mono text-xs group"
+                      >
+                        <Check
+                          className={cn(
+                            'h-4 w-4 shrink-0',
+                            credential.id === value ? 'opacity-100' : 'opacity-0',
+                          )}
+                        />
+                        <ProviderIcon
+                          providerId={branding.providerId}
+                          icon={branding.icon}
+                          className="w-3.5 h-3.5 shrink-0 text-muted-foreground"
+                        />
+                        <span className="truncate flex-1">{credential.name}</span>
+                        <span className="flex items-center gap-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                          {isOAuth && (
+                            <button
+                              type="button"
+                              className={cn(
+                                'p-0.5 rounded hover:bg-accent text-muted-foreground hover:text-foreground',
+                                isRefreshing && 'pointer-events-none',
+                              )}
+                              title="Re-authorize OAuth credential"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onRefreshOAuthCredential?.(credential);
+                              }}
+                            >
+                              <RefreshCw
+                                className={cn('h-3 w-3', isRefreshing && 'animate-spin')}
+                              />
+                            </button>
+                          )}
+                          <button
+                            type="button"
+                            className="p-0.5 rounded hover:bg-accent text-muted-foreground hover:text-foreground"
+                            title="Edit credential"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setOpen(false);
+                              onEditCredential?.(credential);
+                            }}
+                          >
+                            <Pencil className="h-3 w-3" />
+                          </button>
+                        </span>
+                      </CommandItem>
+                    );
+                  })}
+                </CommandGroup>
+                <div className="p-2 border-t">
+                  <Button
+                    onClick={() => {
+                      setOpen(false);
+                      onAddNew();
+                    }}
+                    className="w-full"
+                    size="sm"
+                  >
+                    <Plus className="w-4 h-4 mr-2" /> {addButtonLabel}
+                  </Button>
+                </div>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,154 @@
+import { useCallback } from 'react';
+import { Label } from '../../ui/label';
+import { Button } from '../../ui/button';
+import { Code2, Type } from 'lucide-react';
+import type { NodeParamField } from '../../../types/node-definition.types';
+import type { Credential } from '../../../api/types';
+import { CredentialCombobox } from './CredentialCombobox';
+import { DroppableInput } from './DroppableInput';
+import { cn } from '../../../lib/utils';
+import { filterCredentialsForField } from '../../../utils/credentialFiltering';
+
+interface CredentialsSectionProps {
+  fields: NodeParamField[];
+  formValues: Record<string, unknown>;
+  onFieldChange: (fieldName: string, value: string) => void;
+  credentials: Credential[];
+  isLoading: boolean;
+  isError: boolean;
+  onRefresh: () => void;
+  onAddNewCredential: (fieldName: string) => void;
+  onEditCredential?: (credential: Credential) => void;
+  onRefreshOAuthCredential?: (credential: Credential) => void;
+  refreshingCredentialId?: string | null;
+  portalContainer?: HTMLElement | null;
+  disablePortal?: boolean;
+}
+
+/**
+ * Get the template modes object from form values.
+ */
+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 CredentialsSection = ({
+  fields,
+  formValues,
+  onFieldChange,
+  credentials,
+  isLoading,
+  isError,
+  onRefresh,
+  onAddNewCredential,
+  onEditCredential,
+  onRefreshOAuthCredential,
+  refreshingCredentialId,
+  portalContainer,
+  disablePortal = true,
+}: CredentialsSectionProps) => {
+  const templateModes = getTemplateModes(formValues);
+
+  const handleTemplateModeChange = useCallback(
+    (fieldName: string, enabled: boolean) => {
+      const currentModes = getTemplateModes(formValues);
+      const updatedModes = {
+        ...currentModes,
+        [fieldName]: enabled,
+      };
+      // We need to use a generic field change for _templateModes
+      // Since onFieldChange expects string value, we'll use a workaround
+      // by storing it in formValues through a parent handler
+      (onFieldChange as (fieldName: string, value: unknown) => void)(
+        '_templateModes',
+        updatedModes,
+      );
+    },
+    [formValues, onFieldChange],
+  );
+
+  if (!fields.length) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-3 pb-3">
+      {isLoading && <div className="text-[11px] text-muted-foreground">Loading credentials…</div>}
+      {isError && !isLoading && (
+        <div className="text-[11px] text-destructive">
+          Failed to load credentials. Please try again.
+        </div>
+      )}
+      {fields.map((field) => {
+        const isTemplateMode = templateModes[field.name] ?? false;
+        const fieldCredentials = filterCredentialsForField(credentials, field);
+
+        const templateModeToggle = (
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              'h-5 px-1.5 text-[10px] gap-0.5',
+              isTemplateMode ? 'text-primary' : 'text-muted-foreground',
+            )}
+            onClick={() => handleTemplateModeChange(field.name, !isTemplateMode)}
+            title={isTemplateMode ? 'Switch to static value' : 'Switch to template'}
+          >
+            {isTemplateMode ? (
+              <>
+                <Code2 className="h-2.5 w-2.5" />
+                <span>Template</span>
+              </>
+            ) : (
+              <>
+                <Type className="h-2.5 w-2.5" />
+                <span>Static</span>
+              </>
+            )}
+          </Button>
+        );
+
+        return (
+          <div key={field.name} className="flex flex-col gap-1.5">
+            <div className="flex items-center justify-between gap-2">
+              <Label htmlFor={`credential-${field.name}`} className="text-xs">
+                {field.label}
+              </Label>
+              {templateModeToggle}
+            </div>
+            {isTemplateMode ? (
+              <DroppableInput
+                id={`credential-${field.name}`}
+                className="font-mono text-xs"
+                rows={1}
+                value={(formValues[field.name] as string) ?? ''}
+                placeholder="{{ config_node.data.variables.credential_id.value }}"
+                onChange={(newValue) => onFieldChange(field.name, newValue)}
+              />
+            ) : (
+              <CredentialCombobox
+                credentials={fieldCredentials}
+                value={(formValues[field.name] as string) ?? ''}
+                onChange={(value) => onFieldChange(field.name, value)}
+                placeholder={field.placeholder || 'Select credential'}
+                isLoading={isLoading}
+                isError={isError}
+                onRetry={onRefresh}
+                onAddNew={() => onAddNewCredential(field.name)}
+                onEditCredential={onEditCredential}
+                onRefreshOAuthCredential={onRefreshOAuthCredential}
+                refreshingCredentialId={refreshingCredentialId}
+                container={portalContainer}
+                disablePortal={disablePortal}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -0,0 +1,45 @@
+import { CodeMirrorNunjucksEditor } from '../../ui/codemirror-nunjucks-editor';
+
+interface DroppableInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  multiline?: boolean;
+  rows?: number;
+  fillAvailableHeight?: boolean;
+}
+
+/**
+ * A text input that accepts drops from the DraggableJsonTree.
+ * When a nunjucks path is dropped, it's inserted at the cursor position.
+ *
+ * For multiline inputs, uses CodeMirror with Nunjucks syntax highlighting.
+ * For single-line inputs, uses a standard Input with drag-drop support.
+ */
+export function DroppableInput({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className = 'text-xs',
+  id: _id,
+  multiline = false,
+  rows = 1,
+  fillAvailableHeight = false,
+}: DroppableInputProps) {
+  return (
+    <CodeMirrorNunjucksEditor
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      disabled={disabled}
+      multiline={multiline}
+      rows={rows}
+      fillAvailableHeight={fillAvailableHeight}
+      className={className}
+    />
+  );
+}

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

@@ -0,0 +1,223 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Check, ChevronsUpDown, Loader2 } 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';
+import { useLoadFieldOptions } from '../../../api/node-data.api';
+import type { NodeParamField } from '../../../types/node-definition.types';
+
+interface DynamicSelectFieldProps {
+  /** The action / node type id (e.g. "core.model"). */
+  actionId: string;
+  /** The field definition — must have `loadOptions`. */
+  field: NodeParamField;
+  /** Current field value. */
+  value: unknown;
+  /** Called when the user picks a new value. */
+  onChange: (value: unknown) => void;
+  /** Current form values — used to extract dependency values. */
+  formValues: Record<string, unknown>;
+  /** Portal container for the dropdown. */
+  portalContainer?: HTMLElement | null;
+}
+
+/**
+ * A select field whose options are loaded from the server via the
+ * `loadOptions` system.  Re-fetches whenever any of the declared
+ * dependency fields change.
+ */
+export function DynamicSelectField({
+  actionId,
+  field,
+  value,
+  onChange,
+  formValues,
+  portalContainer: _portalContainer,
+}: DynamicSelectFieldProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const dependsOn = field.loadOptions?.dependsOn ?? [];
+
+  // Build dependency values from formValues
+  const dependencyValues = useMemo(() => {
+    const deps: Record<string, unknown> = {};
+    for (const dep of dependsOn) {
+      deps[dep] = formValues[dep];
+    }
+    return deps;
+  }, [dependsOn, ...dependsOn.map((d) => formValues[d])]);
+
+  // Only fetch when all dependency values are non-empty
+  const hasDeps = dependsOn.every(
+    (d) =>
+      dependencyValues[d] !== undefined &&
+      dependencyValues[d] !== null &&
+      dependencyValues[d] !== '',
+  );
+
+  const { data, isLoading, isError, error } = useLoadFieldOptions(
+    actionId,
+    field.name,
+    dependencyValues,
+    { enabled: hasDeps },
+  );
+
+  // Auto-select the default value when options arrive (only on first load
+  // or when the current value is not in the new option set).
+  const prevDepsKey = useRef<string>('');
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+    const depsKey = JSON.stringify(dependencyValues);
+    if (depsKey === prevDepsKey.current) {
+      return;
+    }
+    prevDepsKey.current = depsKey;
+
+    const currentStr = value === undefined || value === null ? '' : String(value);
+    const inList = data.options.some((o) => String(o.value) === currentStr);
+
+    if (!inList && data.defaultValue !== undefined) {
+      onChange(data.defaultValue);
+    } else if (!inList && data.options.length > 0 && currentStr) {
+      // Current value is stale — clear it so the user picks a new one
+      onChange('');
+    }
+  }, [data, dependencyValues, value, onChange]);
+
+  // Merge static options from field definition with dynamic options
+  const options = data?.options ?? field.options ?? [];
+  const placeholder = data?.placeholder ?? field.placeholder ?? 'Select…';
+  const disabled = field.disabled || data?.disabled || false;
+
+  const stringValue = value === undefined || value === null ? '' : String(value);
+
+  // If the current value is not in the options list, prepend it so the
+  // user can still see what was previously selected.
+  const optionEntries = options.map((o) => ({ label: o.label, value: String(o.value) }));
+  const hasCurrentValue = stringValue ? optionEntries.some((o) => o.value === stringValue) : false;
+  const renderOptions =
+    hasCurrentValue || !stringValue
+      ? optionEntries
+      : [{ label: stringValue, value: stringValue }, ...optionEntries];
+
+  // Client-side search filter
+  const filteredOptions = useMemo(() => {
+    if (!search) {
+      return renderOptions;
+    }
+    const lower = search.toLowerCase();
+    return renderOptions.filter(
+      (o) => o.label.toLowerCase().includes(lower) || o.value.toLowerCase().includes(lower),
+    );
+  }, [renderOptions, search]);
+
+  const handleSelect = useCallback(
+    (val: string) => {
+      onChange(val);
+      setOpen(false);
+      setSearch('');
+    },
+    [onChange],
+  );
+
+  // Reset search when popover closes
+  useEffect(() => {
+    if (!open) {
+      setSearch('');
+    }
+  }, [open]);
+
+  const displayLabel = useMemo(() => {
+    if (!stringValue) {
+      return null;
+    }
+    const match = renderOptions.find((o) => o.value === stringValue);
+    return match?.label ?? stringValue;
+  }, [stringValue, renderOptions]);
+
+  return (
+    <div className="relative">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            id={field.name}
+            disabled={disabled || isLoading}
+            className={cn(
+              'w-full justify-between font-mono text-xs h-9',
+              isLoading && 'opacity-60',
+              !stringValue && 'text-muted-foreground',
+            )}
+          >
+            {isLoading ? (
+              <span className="flex items-center gap-2 text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                Loading…
+              </span>
+            ) : (
+              <span className="truncate">{displayLabel ?? placeholder}</span>
+            )}
+            <ChevronsUpDown className="ml-auto h-3 w-3 shrink-0 opacity-50" />
+          </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">
+              {!isLoading && filteredOptions.length === 0 && (
+                <CommandEmpty className="text-xs">
+                  {!hasDeps
+                    ? 'Fill in required fields first'
+                    : search
+                      ? 'No matching options'
+                      : 'No options available'}
+                </CommandEmpty>
+              )}
+              {filteredOptions.length > 0 && (
+                <CommandGroup>
+                  {filteredOptions
+                    .filter((o) => o.value !== '')
+                    .map((option) => (
+                      <CommandItem
+                        key={option.value}
+                        value={option.value}
+                        onSelect={() => handleSelect(option.value)}
+                        className="text-xs font-mono"
+                      >
+                        <span className="truncate">{option.label}</span>
+                        {stringValue === option.value && (
+                          <Check className="ml-auto h-3 w-3 shrink-0" />
+                        )}
+                      </CommandItem>
+                    ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {isError && (
+        <p className="mt-1 text-xs text-destructive">
+          {error instanceof Error ? error.message : 'Failed to load options'}
+        </p>
+      )}
+    </div>
+  );
+}