@flowdrop/flowdrop 1.11.0 → 1.13.0

package/dist/api/enhanced-client.d.ts

@@ -34,6 +34,34 @@ export declare class ApiError extends Error {
  * const client = new EnhancedFlowDropApiClient(config);
  * ```
  */
+export interface PipelineDataResponse {
+    status: string;
+    jobs: Array<Record<string, unknown>>;
+    node_statuses: Record<string, {
+        status: string;
+        [key: string]: unknown;
+    }>;
+    job_status_summary: {
+        total: number;
+        pending: number;
+        running: number;
+        completed: number;
+        failed: number;
+        cancelled: number;
+        skipped?: number;
+        paused?: number;
+        interrupted?: number;
+    };
+    kanban_config?: {
+        columns: Array<{
+            key: string;
+            label: string;
+            statuses: string[];
+            icon?: string;
+            color?: string;
+        }>;
+    };
+}
 export declare class EnhancedFlowDropApiClient {
     private config;
     private authProvider;
@@ -164,20 +192,5 @@ export declare class EnhancedFlowDropApiClient {
     /**
      * Fetch pipeline data including job information and status
      */
-    getPipelineData(pipelineId: string): Promise<{
-        status: string;
-        jobs: Array<Record<string, unknown>>;
-        node_statuses: Record<string, {
-            status: string;
-            [key: string]: unknown;
-        }>;
-        job_status_summary: {
-            total: number;
-            pending: number;
-            running: number;
-            completed: number;
-            failed: number;
-            cancelled: number;
-        };
-    }>;
+    getPipelineData(pipelineId: string): Promise<PipelineDataResponse>;
 }

package/dist/api/enhanced-client.js

@@ -28,20 +28,6 @@ export class ApiError extends Error {
         this.errorData = errorData;
     }
 }
-/**
- * Enhanced HTTP API client for FlowDrop with configurable endpoints
- *
- * Supports pluggable authentication via AuthProvider interface.
- *
- * @example
- * ```typescript
- * // With AuthProvider
- * const client = new EnhancedFlowDropApiClient(config, authProvider);
- *
- * // Without authentication
- * const client = new EnhancedFlowDropApiClient(config);
- * ```
- */
 export class EnhancedFlowDropApiClient {
     config;
     authProvider;

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/PipelineStatus.svelte

@@ -117,23 +117,20 @@
         }
       };
 
-      // Update node statuses based on job data
+      // Update node statuses based on job data — only set what the server reported
       if (jobStatusData.node_statuses) {
         const newNodeStatuses: Record<string, 'pending' | 'running' | 'completed' | 'error'> = {};
 
-        // Initialize all nodes as pending
-        if (workflow && workflow.nodes) {
-          workflow.nodes.forEach((node) => {
-            newNodeStatuses[node.id] = 'pending';
-          });
-        }
-
-        // Override with actual job statuses
         for (const nodeId in jobStatusData.node_statuses) {
           const status = jobStatusData.node_statuses[nodeId].status;
-          if (['pending', 'running', 'completed', 'failed', 'cancelled'].includes(status)) {
-            newNodeStatuses[nodeId] =
-              status === 'failed' ? 'error' : (status as 'pending' | 'running' | 'completed');
+          if (status === 'failed' || status === 'cancelled') {
+            newNodeStatuses[nodeId] = 'error';
+          } else if (status === 'running' || status === 'paused' || status === 'interrupted') {
+            newNodeStatuses[nodeId] = 'running';
+          } else if (status === 'completed' || status === 'skipped') {
+            newNodeStatuses[nodeId] = 'completed';
+          } else if (status === 'pending' || status === 'idle') {
+            newNodeStatuses[nodeId] = 'pending';
           }
         }
         nodeStatuses = newNodeStatuses;

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/WorkflowEditor.svelte

@@ -855,6 +855,9 @@
               {initialViewport}
               colorMode={getResolvedTheme() as ColorMode}
               fitView={getEditorSettings().fitViewOnLoad}
+              nodesDraggable={!props.lockWorkflow && !props.readOnly}
+              nodesConnectable={!props.lockWorkflow && !props.readOnly}
+              elementsSelectable={!props.lockWorkflow && !props.readOnly}
             >
               <Controls />
               {#if !props.readOnly && !props.lockWorkflow && props.onToggleConsole}

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,33 @@
   // 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));
+  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 +191,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 +235,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 +277,7 @@
       error = err instanceof Error ? err.message : 'Failed to fetch suggestions';
       suggestions = [];
     } finally {
+      if (timeoutId !== null) clearTimeout(timeoutId);
       isLoading = false;
       abortController = null;
     }
@@ -297,6 +335,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 +587,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 +624,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 -->

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

@@ -45,6 +45,10 @@
   // Hoist the choice branch — counter, min, max, submit reads.
   const t = $derived(m().interrupt.choice);
 
+  // Unique name for the radio/checkbox group so multiple ChoicePrompts on
+  // screen don't share the same HTML group and interfere with each other.
+  const groupName = `choice-option-${Math.random().toString(36).slice(2, 8)}`;
+
   /** Local state for selected values */
   let selectedValues = $state<Set<string>>(new Set());
 
@@ -131,7 +135,7 @@
   {/if}
 
   <!-- Options -->
-  <div class="choice-prompt__options" role={isMultiple ? 'group' : 'radiogroup'}>
+  <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
@@ -141,7 +145,7 @@
       >
         <input
           type={isMultiple ? 'checkbox' : 'radio'}
-          name="choice-option"
+          name={groupName}
           value={option.value}
           checked={isChecked}
           disabled={isResolved || isSubmitting}
@@ -295,9 +299,19 @@
 
   .choice-prompt__input {
     position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .choice-prompt__option:focus-within {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
   }
 
   .choice-prompt__checkmark {
@@ -372,6 +386,11 @@
     transform: translateY(-1px);
   }
 
+  .choice-prompt__submit:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .choice-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/ConfirmationPrompt.svelte

@@ -184,6 +184,11 @@
     min-width: 100px;
   }
 
+  .confirmation-prompt__button:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .confirmation-prompt__button:disabled {
     cursor: not-allowed;
   }

package/dist/components/interrupt/InterruptBubble.svelte

@@ -14,6 +14,12 @@
   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 +55,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 +83,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
    */
@@ -256,11 +283,13 @@
   class:interrupt-bubble--cancelled={currentInterrupt.machineState.status === 'cancelled'}
   class:interrupt-bubble--submitting={isSubmitting}
   class:interrupt-bubble--error={currentInterrupt.machineState.status === 'error'}
+  role="group"
+  aria-label={getTypeLabel(currentInterrupt.type)}
 >
   <!-- 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
@@ -272,9 +301,13 @@
       {/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>
 
@@ -347,17 +380,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"
@@ -365,7 +402,7 @@
           onclick={handleCancel}
           disabled={isSubmitting}
         >
-          <Icon icon="mdi:close" />
+          <Icon icon="mdi:close" aria-hidden="true" />
           <span>{t.cancel}</span>
         </button>
       {/if}
@@ -517,6 +554,11 @@
     background-color: var(--fd-error-hover);
   }
 
+  .interrupt-bubble__retry-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   /* Body - prompt content area, full width */
   .interrupt-bubble__body {
     padding: var(--fd-space-xl);
@@ -535,6 +577,7 @@
   /* Footer */
   .interrupt-bubble__footer {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: var(--fd-space-xs);
@@ -558,6 +601,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;
@@ -589,6 +641,11 @@
     background-color: var(--fd-error-muted);
   }
 
+  .interrupt-bubble__cancel-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .interrupt-bubble__cancel-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -606,5 +663,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>;

package/dist/components/interrupt/ReviewPrompt.svelte

@@ -533,6 +533,11 @@
     color: var(--fd-error);
   }
 
+  .review-prompt__bulk-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .review-prompt__bulk-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -630,6 +635,11 @@
     color: var(--fd-error-foreground);
   }
 
+  .review-prompt__toggle-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .review-prompt__toggle-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -722,6 +732,11 @@
     border-color: var(--fd-border-strong);
   }
 
+  .review-prompt__html-toggle-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   /* Raw HTML code display */
   .review-prompt__raw-html {
     font-family: var(--fd-review-font-mono);
@@ -820,6 +835,11 @@
     transform: translateY(-1px);
   }
 
+  .review-prompt__submit:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .review-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;