@flowdrop/flowdrop 1.12.0 → 1.14.0

package/README.md

@@ -158,6 +158,11 @@ FlowDrop provides tree-shakeable sub-module exports so you can import only what
 | `@flowdrop/flowdrop/settings`      | SettingsPanel, stores, services                    |
 | `@flowdrop/flowdrop/styles`        | Base CSS stylesheet                                |
 | `@flowdrop/flowdrop/schema`        | Workflow JSON schema                               |
+| `@flowdrop/flowdrop/openapi`       | OpenAPI spec (YAML) for the FlowDrop backend API   |
+
+### OpenAPI spec
+
+The full OpenAPI spec for the FlowDrop backend API ships with the package, version-matched to your installed release. It defines the node-config / form-element schema (`ConfigProperty`), playground messages, and every endpoint. Resolve it from `@flowdrop/flowdrop/openapi`, or read it directly at `node_modules/@flowdrop/flowdrop/dist/openapi/v1/openapi.yaml`. Point your AI assistant at that file when authoring node config schemas. The latest spec is also browsable at [api.flowdrop.io](https://api.flowdrop.io).
 
 ## Integration
 

package/dist/components/ConfigForm.svelte

@@ -191,6 +191,7 @@
    * This fixes the Svelte 5 reactivity warnings
    */
   let configValues = $state<Record<string, unknown>>({});
+  setContext<() => Record<string, unknown>>('flowdrop:getFormValues', () => configValues);
 
   /**
    * UI Extension values for display settings

package/dist/components/ConfigPanel.svelte

@@ -77,7 +77,13 @@
           <Icon icon="heroicons:arrows-right-left" />
         </button>
       {/if}
-      <button class="config-panel__close" onclick={onClose} aria-label={m().layout.closeConfigPanel}> × </button>
+      <button
+        class="config-panel__close"
+        onclick={onClose}
+        aria-label={m().layout.closeConfigPanel}
+      >
+        ×
+      </button>
     </div>
   </div>
 

package/dist/components/NodeSwapPicker.svelte

@@ -81,7 +81,11 @@
 <div class="swap-picker">
   <!-- Header -->
   <div class="swap-picker__header">
-    <button class="swap-picker__back" onclick={onCancel} aria-label={m().layout.backToConfiguration}>
+    <button
+      class="swap-picker__back"
+      onclick={onCancel}
+      aria-label={m().layout.backToConfiguration}
+    >
       <Icon icon="heroicons:arrow-left" />
     </button>
     <h2 class="swap-picker__title">Swap Node</h2>

package/dist/components/PipelineStatus.svelte

@@ -37,8 +37,17 @@
     ) => void;
   }
 
-  let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady, runLabel, isEmbedded = false, refreshTrigger = 0 }: Props =
-    $props();
+  let {
+    pipelineId,
+    workflow,
+    apiClient,
+    baseUrl,
+    endpointConfig,
+    onActionsReady,
+    runLabel,
+    isEmbedded = false,
+    refreshTrigger = 0
+  }: Props = $props();
 
   // Track previous trigger value so the $effect only fires on increments, not on initial mount.
   // svelte-ignore state_referenced_locally

package/dist/components/SchemaForm.svelte

@@ -197,6 +197,7 @@
    * Internal reactive state for form values
    */
   let formValues = $state<Record<string, unknown>>({});
+  setContext<() => Record<string, unknown>>('flowdrop:getFormValues', () => formValues);
 
   /**
    * Initialize form values when schema or values change

package/dist/components/SettingsPanel.svelte

@@ -362,7 +362,11 @@
 
 <div class="flowdrop-settings-panel {className}">
   <!-- Tab Navigation -->
-  <div class="flowdrop-settings-panel__tabs" role="tablist" aria-label={m().layout.settingsCategories}>
+  <div
+    class="flowdrop-settings-panel__tabs"
+    role="tablist"
+    aria-label={m().layout.settingsCategories}
+  >
     {#each categories as category, index (category)}
       <button
         class="flowdrop-settings-panel__tab"

package/dist/components/WorkflowEditor.svelte

@@ -277,7 +277,11 @@
       const rawStatus = statuses[node.id];
       if (!rawStatus) return node;
 
-      const existing = node.data.executionInfo ?? { status: 'idle' as const, executionCount: 0, isExecuting: false };
+      const existing = node.data.executionInfo ?? {
+        status: 'idle' as const,
+        executionCount: 0,
+        isExecuting: false
+      };
       return {
         ...node,
         data: {

package/dist/components/chat/AIChatPanel.svelte

@@ -288,11 +288,7 @@
       return;
     }
 
-    if (
-      getBehaviorSettings().chatAutoRetry &&
-      workflowId &&
-      autoRetryCount < MAX_AUTO_RETRIES
-    ) {
+    if (getBehaviorSettings().chatAutoRetry && workflowId && autoRetryCount < MAX_AUTO_RETRIES) {
       autoRetryCount++;
       const errorText = buildBatchErrorMessage(
         completedCount,

package/dist/components/form/FormAutocomplete.svelte

@@ -68,6 +68,9 @@
     'flowdrop:getAuthProvider'
   );
   const getBaseUrl = getContext<(() => string) | undefined>('flowdrop:getBaseUrl');
+  const getFormValues = getContext<(() => Record<string, unknown>) | undefined>(
+    'flowdrop:getFormValues'
+  );
 
   // Hoist the autocomplete branch — seven reads in the template, one inside
   // an {#each tag} loop. One getter walk per render.
@@ -82,6 +85,7 @@
   const valueField = $derived(autocomplete.valueField ?? 'value');
   const allowFreeText = $derived(autocomplete.allowFreeText ?? false);
   const multiple = $derived(autocomplete.multiple ?? false);
+  const params = $derived(autocomplete.params ?? {});
 
   // Component state
   let inputElement: HTMLInputElement | undefined = $state(undefined);
@@ -102,6 +106,34 @@
   // Cache of value-to-label mappings for selected items
   let labelCache = $state<Map<string, string>>(new Map());
 
+  // Resolved values for each param dependency: { paramName -> currentFieldValue }
+  // Used both in buildUrl (appending to query) and in the dep-change effect.
+  const depParamValues = $derived.by(() => {
+    const all = getFormValues?.() ?? {};
+    const result: Record<string, string> = {};
+    for (const [paramName, fieldName] of Object.entries(params)) {
+      const val = all[fieldName];
+      if (val !== undefined && val !== '') result[paramName] = String(val);
+    }
+    return result;
+  });
+
+  // Stable fingerprint — any change triggers selection clearing.
+  // JSON.stringify gives a canonical string without null-byte ambiguity.
+  const depFingerprint = $derived(JSON.stringify(depParamValues));
+  // svelte-ignore state_referenced_locally — intentional initial snapshot; the effect below tracks subsequent changes
+  let prevDepFingerprint = depFingerprint;
+
+  $effect(() => {
+    if (Object.keys(params).length > 0 && !getFormValues) {
+      logger.warn(
+        '[FormAutocomplete] `params` is configured but no flowdrop:getFormValues context ' +
+          'was found. Dependent field values will not be passed to the autocomplete URL. ' +
+          'Ensure this component is rendered inside ConfigForm or SchemaForm.'
+      );
+    }
+  });
+
   // Generate unique IDs for accessibility
   // svelte-ignore state_referenced_locally — id prop never changes
   const listboxId = `${id}-listbox`;
@@ -160,7 +192,13 @@
       : `${baseUrl}${autocomplete.url}`;
 
     const separator = url.includes('?') ? '&' : '?';
-    return `${url}${separator}${encodeURIComponent(queryParam)}=${encodeURIComponent(query)}`;
+    let fullUrl = `${url}${separator}${encodeURIComponent(queryParam)}=${encodeURIComponent(query)}`;
+
+    for (const [paramName, val] of Object.entries(depParamValues)) {
+      fullUrl += `&${encodeURIComponent(paramName)}=${encodeURIComponent(val)}`;
+    }
+
+    return fullUrl;
   }
 
   /**
@@ -198,25 +236,25 @@
 
     isLoading = true;
     error = null;
-    abortController = new AbortController();
+    // Capture in a local const so the timeout closure and fetch signal
+    // always reference the same controller, even if a new request starts
+    // before the 5-second timeout fires.
+    const controller = new AbortController();
+    abortController = controller;
 
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
     try {
       // Build headers with authentication (call getter to get current value)
       const headers = await buildFetchHeaders(getAuthProvider?.());
 
-      // Fetch with timeout
-      const timeoutId = setTimeout(() => {
-        abortController?.abort();
-      }, 5000);
+      timeoutId = setTimeout(() => controller.abort(), 5000);
 
       const response = await fetch(buildUrl(query), {
         method: 'GET',
         headers,
-        signal: abortController.signal
+        signal: controller.signal
       });
 
-      clearTimeout(timeoutId);
-
       if (!response.ok) {
         throw new Error(`HTTP ${response.status}: ${response.statusText}`);
       }
@@ -240,6 +278,7 @@
       error = err instanceof Error ? err.message : 'Failed to fetch suggestions';
       suggestions = [];
     } finally {
+      if (timeoutId !== null) clearTimeout(timeoutId);
       isLoading = false;
       abortController = null;
     }
@@ -297,6 +336,13 @@
     setTimeout(() => {
       hideDropdown();
 
+      // When dependent params are configured, the suggestion list is bound to the
+      // current values of sibling fields. Clear it on blur so that fetchOnFocus
+      // always re-fetches with the current dep values rather than showing stale results.
+      if (Object.keys(params).length > 0) {
+        suggestions = [];
+      }
+
       // If not allowFreeText and single mode, validate the input
       if (!allowFreeText && !multiple && inputValue !== '') {
         const currentVal = selectedValues;
@@ -542,6 +588,18 @@
     }
   });
 
+  $effect(() => {
+    const current = depFingerprint;
+    if (current === prevDepFingerprint) return;
+    prevDepFingerprint = current;
+    // A dependency field changed — abort any in-flight fetch, clear state
+    abortController?.abort();
+    suggestions = [];
+    labelCache = new Map();
+    if (multiple) onChange([]);
+    else onChange('');
+  });
+
   /**
    * Cleanup on unmount
    */
@@ -567,11 +625,11 @@
   class:form-autocomplete--has-value={selectedValues.length > 0}
 >
   <!-- Main input container styled like a textfield/textarea -->
+  <!-- svelte-ignore a11y_no_static_element_interactions — role="presentation"; keyboard interaction is handled by the <input> inside -->
   <div
     class="form-autocomplete__field"
     class:form-autocomplete__field--focused={isOpen}
     onclick={() => inputElement?.focus()}
-    onkeydown={() => {}}
     role="presentation"
   >
     <!-- Selected tags -->
@@ -664,11 +722,7 @@
     style={popoverStyle}
     onmousedown={(e) => e.preventDefault()}
   >
-    <ul
-      class="form-autocomplete__listbox"
-      role="listbox"
-      aria-label={t.suggestions}
-    >
+    <ul class="form-autocomplete__listbox" role="listbox" aria-label={t.suggestions}>
       {#if isLoading}
         <li class="form-autocomplete__status form-autocomplete__status--loading">
           <Icon icon="heroicons:arrow-path" class="form-autocomplete__status-icon" />

package/dist/components/form/FormField.svelte

@@ -45,6 +45,7 @@
   import { getSchemaOptions } from './types.js';
   import type { WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
   import { getResolvedTheme } from '../../stores/settingsStore.svelte.js';
+  import { fieldComponentRegistry } from '../../form/fieldRegistry.js';
 
   interface Props {
     /** Unique key/id for the field */
@@ -224,6 +225,10 @@
     return [];
   });
 
+  const registeredAutocompleteComponent = $derived(
+    fieldType === 'autocomplete' ? fieldComponentRegistry.resolveFieldComponent(schema) : null
+  );
+
   /**
    * Get autocomplete value - can be string or string[] based on multiple setting
    */
@@ -387,6 +392,22 @@
         {authProvider}
         onChange={(val) => onChange(val)}
       />
+    {:else if fieldType === 'autocomplete' && schema.autocomplete && registeredAutocompleteComponent}
+      <registeredAutocompleteComponent.component
+        id={fieldKey}
+        value={autocompleteValue}
+        placeholder={schema.placeholder ?? ''}
+        {required}
+        {schema}
+        ariaDescribedBy={descriptionId}
+        disabled={isReadOnly}
+        {node}
+        {nodes}
+        {edges}
+        {workflowId}
+        {authProvider}
+        onChange={(val: unknown) => onChange(val)}
+      />
     {:else if fieldType === 'autocomplete' && schema.autocomplete}
       <FormAutocomplete
         id={fieldKey}

package/dist/components/form/FormFieldLight.svelte

@@ -243,6 +243,7 @@
         spellChecker={schema.spellChecker as boolean | undefined}
         variables={schema.variables}
         placeholderExample={schema.placeholderExample as string | undefined}
+        autocomplete={schema.autocomplete}
         onChange={(val: unknown) => onChange(val)}
       />
     {:else if fieldType === 'checkbox-group'}

package/dist/components/interrupt/ChoicePrompt.svelte

@@ -135,7 +135,11 @@
   {/if}
 
   <!-- Options -->
-  <div class="choice-prompt__options" role={isMultiple ? 'group' : 'radiogroup'} aria-label={config.message}>
+  <div
+    class="choice-prompt__options"
+    role={isMultiple ? 'group' : 'radiogroup'}
+    aria-label={config.message}
+  >
     {#each config.options as option (option.value)}
       {@const isChecked = isResolved ? isOptionResolved(option) : selectedValues.has(option.value)}
       <label

package/dist/components/interrupt/InterruptBubble.svelte

@@ -14,6 +14,9 @@
   import TextInputPrompt from './TextInputPrompt.svelte';
   import FormPrompt from './FormPrompt.svelte';
   import ReviewPrompt from './ReviewPrompt.svelte';
+  import MessageTagStrip from '../playground/MessageTagStrip.svelte';
+  import HierarchyTrail from '../playground/HierarchyTrail.svelte';
+  import type { MessageHierarchyItem, MessageTag } from '../../types/playground.js';
   import type {
     Interrupt,
     InterruptType,
@@ -49,9 +52,25 @@
     showTimestamp?: boolean;
     /** Callback to refresh messages after interrupt resolution */
     onResolved?: () => void;
-  }
-
-  let { interrupt: initialInterrupt, showTimestamp = true, onResolved }: Props = $props();
+    /**
+     * Hierarchy items forwarded from the parent playground message. Rendered
+     * as a chevron-separated trail in the footer.
+     */
+    hierarchy?: MessageHierarchyItem[];
+    /**
+     * Server-emitted tags forwarded from the parent playground message.
+     * Rendered as chips in the footer.
+     */
+    tags?: MessageTag[];
+  }
+
+  let {
+    interrupt: initialInterrupt,
+    showTimestamp = true,
+    onResolved,
+    hierarchy,
+    tags
+  }: Props = $props();
 
   /**
    * Get the current interrupt state from the store.
@@ -61,6 +80,11 @@
     getInterruptsMap().get(initialInterrupt.id) ?? addMachineState(initialInterrupt)
   );
 
+  const hierarchyItems = $derived(hierarchy ?? []);
+  const tagItems = $derived(tags ?? []);
+  const hasHierarchy = $derived(hierarchyItems.length > 0);
+  const hasTags = $derived(tagItems.length > 0);
+
   /**
    * Helper to ensure interrupt has machine state
    */
@@ -262,7 +286,7 @@
   <!-- Header -->
   <div class="interrupt-bubble__header">
     <span class="interrupt-bubble__type">
-      <Icon icon={getTypeIcon(currentInterrupt.type)} />
+      <Icon icon={getTypeIcon(currentInterrupt.type)} aria-hidden="true" />
       {#if isResolved}
         {currentInterrupt.machineState.status === 'cancelled'
           ? t.cancelled
@@ -274,9 +298,15 @@
       {/if}
     </span>
     {#if showTimestamp}
-      <span class="interrupt-bubble__timestamp">
+      <time
+        class="interrupt-bubble__timestamp"
+        datetime={currentInterrupt.resolvedAt ?? currentInterrupt.createdAt}
+        aria-label="sent at {formatTimestamp(
+          currentInterrupt.resolvedAt ?? currentInterrupt.createdAt
+        )}"
+      >
         {formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}
-      </span>
+      </time>
     {/if}
   </div>
 
@@ -349,17 +379,21 @@
   </div>
 
   <!-- Footer -->
-  {#if currentInterrupt.nodeId || (currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation')}
+  {#if currentInterrupt.nodeId || hasHierarchy || hasTags || (currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation')}
     <div class="interrupt-bubble__footer">
-      {#if currentInterrupt.nodeId}
-        <span
-          class="interrupt-bubble__node"
-          title={t.nodeIdTooltip({ id: currentInterrupt.nodeId })}
-        >
-          <Icon icon="mdi:graph" />
-          <span>{t.fromWorkflow}</span>
-        </span>
-      {/if}
+      <div class="interrupt-bubble__attribution">
+        {#if currentInterrupt.nodeId}
+          <span
+            class="interrupt-bubble__node"
+            title={t.nodeIdTooltip({ id: currentInterrupt.nodeId })}
+          >
+            <Icon icon="mdi:graph" aria-hidden="true" />
+            <span>{t.fromWorkflow}</span>
+          </span>
+        {/if}
+        <HierarchyTrail items={hierarchyItems} />
+        <MessageTagStrip tags={tagItems} />
+      </div>
       {#if currentInterrupt.allowCancel && !isResolved && currentInterrupt.type !== 'confirmation'}
         <button
           type="button"
@@ -367,7 +401,7 @@
           onclick={handleCancel}
           disabled={isSubmitting}
         >
-          <Icon icon="mdi:close" />
+          <Icon icon="mdi:close" aria-hidden="true" />
           <span>{t.cancel}</span>
         </button>
       {/if}
@@ -542,6 +576,7 @@
   /* Footer */
   .interrupt-bubble__footer {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: var(--fd-space-xs);
@@ -565,6 +600,15 @@
     border-top-color: var(--fd-interrupt-prompt-border-error);
   }
 
+  .interrupt-bubble__attribution {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
   .interrupt-bubble__node {
     display: flex;
     align-items: center;
@@ -618,5 +662,19 @@
       padding-left: var(--fd-space-lg);
       padding-right: var(--fd-space-lg);
     }
+
+    .interrupt-bubble__cancel-btn {
+      min-height: 2.5rem;
+      padding: var(--fd-space-xs) var(--fd-space-md);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .interrupt-bubble {
+      animation: none;
+    }
+    .interrupt-bubble__cancel-btn {
+      transition: none;
+    }
   }
 </style>

package/dist/components/interrupt/InterruptBubble.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { MessageHierarchyItem, MessageTag } from '../../types/playground.js';
 import type { Interrupt } from '../../types/interrupt.js';
 import { type InterruptWithState } from '../../stores/interruptStore.svelte.js';
 /**
@@ -10,6 +11,16 @@ interface Props {
     showTimestamp?: boolean;
     /** Callback to refresh messages after interrupt resolution */
     onResolved?: () => void;
+    /**
+     * Hierarchy items forwarded from the parent playground message. Rendered
+     * as a chevron-separated trail in the footer.
+     */
+    hierarchy?: MessageHierarchyItem[];
+    /**
+     * Server-emitted tags forwarded from the parent playground message.
+     * Rendered as chips in the footer.
+     */
+    tags?: MessageTag[];
 }
 declare const InterruptBubble: import("svelte").Component<Props, {}, "">;
 type InterruptBubble = ReturnType<typeof InterruptBubble>;