@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/components/NodeStatusOverlay.svelte

@@ -17,8 +17,14 @@
     formatExecutionDuration,
     formatLastExecuted
   } from '../utils/nodeStatus.js';
+  import { formatMicroseconds } from '../utils/duration.js';
   import { m } from '../messages/index.js';
 
+  /** Prefer the precise µs duration; fall back to the legacy ms value. */
+  function formatDuration(us: number | null | undefined, ms: number | null | undefined): string {
+    return formatMicroseconds(us) ?? formatExecutionDuration(ms ?? undefined);
+  }
+
   interface Props {
     nodeId?: string;
     executionInfo?: NodeExecutionInfo;
@@ -81,6 +87,13 @@
     executionInfo.status !== 'idle' || executionInfo.executionCount > 0 || executionInfo.isExecuting
   );
 
+  // Number of jobs behind this node's status. Loop iterations create
+  // multiple jobs per node — including a never-started job swept to
+  // "skipped" when the loop exits — so the per-job history (when known)
+  // beats the started-runs count: a skipped node with an earlier completed
+  // run must still flag that there is more to inspect.
+  let runCount = $derived(executionInfo.jobs?.length ?? executionInfo.executionCount);
+
   // Hoist the overlay branch — seven reads in the template.
   const overlay = $derived(m().status.overlay);
 </script>
@@ -88,6 +101,7 @@
 {#if shouldShow}
   <div
     class="node-status-overlay"
+    data-node-id={props.nodeId}
     class:node-status-overlay--hovered={isHovered}
     class:node-status-overlay--top-left={true}
     class:node-status-overlay--sm={size === 'sm'}
@@ -126,10 +140,11 @@
       />
     </div>
 
-    <!-- Execution Count Badge -->
-    {#if executionInfo.executionCount > 0}
+    <!-- Run Count Badge: only meaningful when the node has more than one
+         job (loop iterations) — a "1" on every executed node is noise -->
+    {#if runCount > 1}
       <div class="node-status-overlay__count">
-        {executionInfo.executionCount}
+        ×{runCount}
       </div>
     {/if}
 
@@ -154,11 +169,14 @@
             >
           </div>
         {/if}
-        {#if executionInfo.lastExecutionDuration}
+        {#if executionInfo.lastExecutionDurationUs || executionInfo.lastExecutionDuration}
           <div class="node-status-overlay__detail-item">
             <span class="node-status-overlay__detail-label">{overlay.durationLabel}</span>
             <span class="node-status-overlay__detail-value"
-              >{formatExecutionDuration(executionInfo.lastExecutionDuration)}</span
+              >{formatDuration(
+                executionInfo.lastExecutionDurationUs,
+                executionInfo.lastExecutionDuration
+              )}</span
             >
           </div>
         {/if}
@@ -168,6 +186,33 @@
             <span class="node-status-overlay__detail-value">{executionInfo.lastError}</span>
           </div>
         {/if}
+        <!-- Per-job history: loop iterations create multiple jobs for the
+             same node; list them so earlier runs stay inspectable -->
+        {#if executionInfo.jobs && executionInfo.jobs.length > 1}
+          <div class="node-status-overlay__history">
+            <span class="node-status-overlay__detail-label">{overlay.historyLabel}</span>
+            {#each executionInfo.jobs as job, i (job.id ?? i)}
+              <div class="node-status-overlay__history-item">
+                <span
+                  class="node-status-overlay__history-dot"
+                  style="background-color: {getStatusColor(job.status)}"
+                ></span>
+                <span class="node-status-overlay__history-label" title={job.label}
+                  >{job.label ?? `#${i + 1}`}</span
+                >
+                <span
+                  class="node-status-overlay__history-status"
+                  style="color: {getStatusColor(job.status)}">{getStatusLabel(job.status)}</span
+                >
+                {#if (job.executionTimeUs != null && job.executionTimeUs > 0) || (job.executionTime != null && job.executionTime > 0)}
+                  <span class="node-status-overlay__history-duration"
+                    >{formatDuration(job.executionTimeUs, job.executionTime)}</span
+                  >
+                {/if}
+              </div>
+            {/each}
+          </div>
+        {/if}
       </div>
     {/if}
   </div>
@@ -180,7 +225,9 @@
     align-items: center;
     gap: 0.75rem;
     z-index: 1000;
-    pointer-events: none;
+    /* Must receive pointer events at rest — the hover details panel (and
+       per-job history) is only reachable if mouseenter can fire here. */
+    pointer-events: auto;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     height: 48px;
     width: auto;
@@ -304,6 +351,47 @@
     color: #ef4444;
   }
 
+  .node-status-overlay__history {
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  .node-status-overlay__history-item {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+  }
+
+  .node-status-overlay__history-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .node-status-overlay__history-label {
+    flex: 1;
+    min-width: 0;
+    font-weight: 500;
+    color: #374151;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .node-status-overlay__history-status {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .node-status-overlay__history-duration {
+    color: #6b7280;
+    white-space: nowrap;
+  }
+
   /* Size variants */
   .node-status-overlay--sm {
     gap: 0.125rem;

package/dist/components/NodeSwapPicker.svelte

@@ -11,7 +11,7 @@
   import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
   import { getCategoryColorToken } from '../utils/colors.js';
   import { m } from '../messages/index.js';
-  import { getCategoryLabel } from '../stores/categoriesStore.svelte.js';
+  import { getInstance } from '../stores/getInstance.svelte.js';
   import { getVersionUpgrade } from '../utils/nodeSwap.js';
 
   interface Props {
@@ -29,6 +29,8 @@
 
   const { currentNode, availableNodes, activeFormat, onSelect, onCancel }: Props = $props();
 
+  const fd = getInstance();
+
   let searchInput = $state('');
 
   /** Check version upgrade availability */
@@ -134,14 +136,14 @@
           <!-- Flat style: dot + name rows (shown in minimal skin) -->
           <div class="swap-picker__flat-section">
             <div class="swap-picker__flat-category">
-              {getCategoryLabel(category).toUpperCase()}
+              {fd.categories.getLabel(category).toUpperCase()}
             </div>
             <div class="swap-picker__flat-list">
               {#each categoryNodes as nodeType (nodeType.id)}
                 <button class="swap-picker__flat-item" onclick={() => onSelect(nodeType)}>
                   <span
                     class="swap-picker__flat-dot"
-                    style="background: {getCategoryColorToken(nodeType.category)}"
+                    style="background: {getCategoryColorToken(fd.categories, nodeType.category)}"
                   ></span>
                   <span class="swap-picker__flat-name">{nodeType.name}</span>
                 </button>
@@ -154,12 +156,12 @@
             <div class="swap-picker__category-header">
               <span
                 class="swap-picker__category-icon"
-                style="--_icon-color: {getCategoryColorToken(category)}"
+                style="--_icon-color: {getCategoryColorToken(fd.categories, category)}"
               >
-                <Icon icon={getCategoryIcon(category)} />
+                <Icon icon={getCategoryIcon(fd.categories, category)} />
               </span>
               <span class="swap-picker__category-name">
-                {getCategoryLabel(category)}
+                {fd.categories.getLabel(category)}
               </span>
               <span class="swap-picker__category-count">
                 {categoryNodes.length}
@@ -170,9 +172,9 @@
                 <button class="swap-picker__item" onclick={() => onSelect(nodeType)}>
                   <span
                     class="swap-picker__item-icon"
-                    style="--_icon-color: {getCategoryColorToken(nodeType.category)}"
+                    style="--_icon-color: {getCategoryColorToken(fd.categories, nodeType.category)}"
                   >
-                    <Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
+                    <Icon icon={getNodeIcon(fd.categories, nodeType.icon, nodeType.category)} />
                   </span>
                   <div class="swap-picker__item-info">
                     <span class="swap-picker__item-name">{nodeType.name}</span>

package/dist/components/PipelineStatus.svelte

@@ -54,46 +54,22 @@
   let _prevRefreshTrigger = refreshTrigger;
 
   // Initialize API client if not provided
-  // svelte-ignore state_referenced_locally — client created once from props
+  // client created once from props
+  // svelte-ignore state_referenced_locally
   const client =
     apiClient ||
     new EnhancedFlowDropApiClient(
       endpointConfig ?? createEndpointConfig(baseUrl || '/api/flowdrop')
     );
 
-  // Pipeline status and job data
+  // Pipeline status — drives breadcrumb label and the 5s poll while running
   let pipelineStatus = $state<string>('unknown');
-  interface PipelineNodeStatus {
-    status: string;
-    [key: string]: unknown;
-  }
-
-  let jobStatusData = $state<{
-    jobs: Record<string, unknown>[];
-    node_statuses: Record<string, PipelineNodeStatus>;
-    status_summary: {
-      total: number;
-      pending: number;
-      running: number;
-      completed: number;
-      failed: number;
-      cancelled: number;
-    };
-  }>({
-    jobs: [],
-    node_statuses: {},
-    status_summary: {
-      total: 0,
-      pending: 0,
-      running: 0,
-      completed: 0,
-      failed: 0,
-      cancelled: 0
-    }
-  });
+  let totalJobs = $state<number>(0);
 
-  // Node statuses for visual indicators
-  let nodeStatuses = $state<Record<string, 'pending' | 'running' | 'completed' | 'error'>>({});
+  // Child refresh counter — increments on every successful fetch so the
+  // embedded canvas (WorkflowEditor) re-pulls execution info from the server.
+  // PipelineStatus no longer owns a denormalized status channel; it just signals.
+  let childRefreshTrigger = $state(0);
 
   // Loading and error states
   let isLoadingJobStatus = $state(false);
@@ -113,39 +89,13 @@
       const pipelineData = await client.getPipelineData(pipelineId);
 
       pipelineStatus = pipelineData.status;
-      jobStatusData = {
-        jobs: pipelineData.jobs || [],
-        node_statuses: pipelineData.node_statuses || {},
-        status_summary: pipelineData.job_status_summary || {
-          total: 0,
-          pending: 0,
-          running: 0,
-          completed: 0,
-          failed: 0,
-          cancelled: 0
-        }
-      };
-
-      // 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'> = {};
-
-        for (const nodeId in jobStatusData.node_statuses) {
-          const status = jobStatusData.node_statuses[nodeId].status;
-          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;
-      }
+      totalJobs = pipelineData.job_status_summary?.total ?? 0;
+
+      // Signal the embedded canvas to re-fetch its own node execution info.
+      // It owns the read; we just tell it when to look again.
+      childRefreshTrigger += 1;
 
-      addLog('info', `Job status updated: ${jobStatusData.status_summary.total} total jobs`);
+      addLog('info', `Job status updated: ${totalJobs} total jobs`);
     } catch (error) {
       logger.error('Failed to fetch pipeline data:', error);
       addLog(
@@ -317,10 +267,9 @@
     width="100%"
     showNavbar={false}
     disableSidebar={true}
-    lockWorkflow={true}
-    readOnly={true}
-    {nodeStatuses}
+    mode="locked"
     {pipelineId}
+    refreshTrigger={childRefreshTrigger}
     {endpointConfig}
   />
 

package/dist/components/PortCoordinateTracker.svelte

@@ -10,10 +10,7 @@
 <script lang="ts">
   import { useSvelteFlow, type InternalNode } from '@xyflow/svelte';
   import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
-  import {
-    rebuildAllPortCoordinates,
-    updateNodePortCoordinates
-  } from '../stores/portCoordinateStore.svelte.js';
+  import { getInstance } from '../stores/getInstance.svelte.js';
 
   interface Props {
     /** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
@@ -26,6 +23,8 @@
 
   let { nodeToUpdate, rebuildTrigger, nodes }: Props = $props();
 
+  const fd = getInstance();
+
   const { getInternalNode } = useSvelteFlow();
 
   // Cast the getInternalNode function for our use
@@ -40,7 +39,7 @@
     const _trigger = rebuildTrigger;
     if (_trigger > 0) {
       const timeout = setTimeout(() => {
-        rebuildAllPortCoordinates(nodes, getInternal);
+        fd.portCoordinates.rebuildAll(nodes, getInternal);
       }, 150);
       return () => clearTimeout(timeout);
     }
@@ -52,7 +51,7 @@
    */
   $effect(() => {
     if (nodeToUpdate) {
-      updateNodePortCoordinates(nodeToUpdate, getInternal);
+      fd.portCoordinates.updateNode(nodeToUpdate, getInternal);
     }
   });
 </script>

package/dist/components/SchemaForm.stories.svelte

@@ -87,9 +87,7 @@
       required: ['email']
     },
     values: { email: '', notifications: true },
-    showActions: true,
-    saveLabel: 'Save Settings',
-    cancelLabel: 'Reset'
+    showActions: true
   }}
 />
 

package/dist/components/SchemaForm.svelte

@@ -58,10 +58,12 @@
   import Icon from '@iconify/svelte';
   import type { ConfigSchema, AuthProvider } from '../types/index.js';
   import type { UISchemaElement } from '../types/uischema.js';
+  import { provideInstance } from '../stores/getInstance.svelte.js';
   import { FormField } from './form/index.js';
   import FormUISchemaRenderer from './form/FormUISchemaRenderer.svelte';
   import type { FieldSchema } from './form/index.js';
-  import { m, warnDeprecatedProp } from '../messages/index.js';
+  import { m } from '../messages/index.js';
+  import { mergeWithDefaults, cascadeClearAutocompleteDependents } from '../utils/formMerge.js';
 
   /**
    * Props interface for SchemaForm component
@@ -100,16 +102,6 @@
      */
     showActions?: boolean;
 
-    /**
-     * @deprecated since v1.8 — use `messages.form.schema.save`. Removed in v2.0.
-     */
-    saveLabel?: string;
-
-    /**
-     * @deprecated since v1.8 — use `messages.form.schema.cancel`. Removed in v2.0.
-     */
-    cancelLabel?: string;
-
     /**
      * Callback fired when the Save button is clicked.
      * Receives the final form values.
@@ -159,8 +151,6 @@
     values = {},
     onChange,
     showActions = false,
-    saveLabel,
-    cancelLabel,
     onSave,
     onCancel,
     loading = false,
@@ -170,17 +160,20 @@
     baseUrl = ''
   }: Props = $props();
 
-  // svelte-ignore state_referenced_locally — deprecation warns once per mount; later prop rebinds aren't relevant
-  if (saveLabel !== undefined) {
-    warnDeprecatedProp('SchemaForm', 'saveLabel', 'messages.form.schema.save');
-  }
-  // svelte-ignore state_referenced_locally
-  if (cancelLabel !== undefined) {
-    warnDeprecatedProp('SchemaForm', 'cancelLabel', 'messages.form.schema.cancel');
-  }
-
-  const resolvedSaveLabel = $derived(saveLabel ?? m().form.schema.save);
-  const resolvedCancelLabel = $derived(cancelLabel ?? m().form.schema.cancel);
+  // SchemaForm is a standalone container: its leaf <FormField>s call
+  // getInstance() and require an instance in context. When rendered without an
+  // <App>/<WorkflowEditor> ancestor (a bare embed), self-provide one so those
+  // leaves resolve. provideInstance() carries the established SSR semantics:
+  //   - context instance present -> reuse it (nested inside a provider)
+  //   - browser, no context       -> the shared page-default instance
+  //   - server, no context        -> a fresh per-render instance (no leakage)
+  // We never destroy here: the browser path returns the shared default (must
+  // outlive this form) and the server path has no teardown — matching how
+  // <App> defers instance lifecycle to whoever created it.
+  provideInstance();
+
+  const resolvedSaveLabel = $derived(m().form.schema.save);
+  const resolvedCancelLabel = $derived(m().form.schema.cancel);
 
   // Set context for child components (e.g., FormAutocomplete)
   // Use getter functions to ensure child components always get the current prop value,
@@ -194,24 +187,25 @@
   let formRef: HTMLFormElement | undefined = $state();
 
   /**
-   * Internal reactive state for form values
+   * User edits — only keys the user has changed since the current schema
+   * was loaded. formValues is derived from props + edits, never synchronised
+   * via an effect, so children mount with the correct values already in place.
    */
-  let formValues = $state<Record<string, unknown>>({});
+  let edits = $state<Record<string, unknown>>({});
+
+  const formValues = $derived(mergeWithDefaults(schema, values, edits));
+
   setContext<() => Record<string, unknown>>('flowdrop:getFormValues', () => formValues);
 
-  /**
-   * Initialize form values when schema or values change
-   * Merges default values from schema with provided values
-   */
-  $effect(() => {
-    if (schema?.properties) {
-      const mergedValues: Record<string, unknown> = {};
-      Object.entries(schema.properties).forEach(([key, field]) => {
-        const fieldConfig = field as Record<string, unknown>;
-        // Use provided value if available, otherwise use schema default
-        mergedValues[key] = values[key] !== undefined ? values[key] : fieldConfig.default;
-      });
-      formValues = mergedValues;
+  // Drop edits when the schema reference changes (different form mounted).
+  // Identity comparison only — value churn in `values` preserves in-flight edits.
+  // capturing the initial prop reference is intentional; later changes are picked up by the effect below
+  // svelte-ignore state_referenced_locally
+  let prevSchemaRef = schema;
+  $effect.pre(() => {
+    if (schema !== prevSchemaRef) {
+      prevSchemaRef = schema;
+      edits = {};
     }
   });
 
@@ -234,7 +228,18 @@
    * @param value - New field value
    */
   function handleFieldChange(key: string, value: unknown): void {
-    formValues[key] = value;
+    const previous = formValues[key];
+    edits[key] = value;
+
+    // Cascade-clear any autocomplete whose `params` references this field.
+    // Only runs on user-driven edits; undo/redo and external value-prop
+    // replacement flow through `values` and bypass this path (#33).
+    if (previous !== value) {
+      const dependents = cascadeClearAutocompleteDependents(schema, key);
+      for (const [depKey, depValue] of Object.entries(dependents)) {
+        edits[depKey] = depValue;
+      }
+    }
 
     // Notify parent of the change
     if (onChange) {

package/dist/components/SchemaForm.svelte.d.ts

@@ -32,14 +32,6 @@ interface Props {
      * @default false
      */
     showActions?: boolean;
-    /**
-     * @deprecated since v1.8 — use `messages.form.schema.save`. Removed in v2.0.
-     */
-    saveLabel?: string;
-    /**
-     * @deprecated since v1.8 — use `messages.form.schema.cancel`. Removed in v2.0.
-     */
-    cancelLabel?: string;
     /**
      * Callback fired when the Save button is clicked.
      * Receives the final form values.

package/dist/components/SettingsModal.svelte

@@ -59,6 +59,11 @@
     class: className = ''
   }: Props = $props();
 
+  // Unique per component instance so two FlowDrop editors on one page
+  // don't render colliding DOM ids (a11y).
+  const uid = $props.id();
+  const titleId = `${uid}-settings-modal-title`;
+
   /**
    * Reference to the modal dialog element
    */
@@ -118,19 +123,19 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions — native <dialog> backdrop click-to-close pattern -->
+<!-- native <dialog> backdrop click-to-close pattern -->
 <dialog
   bind:this={dialogRef}
   class="flowdrop-settings-modal {className}"
   onclick={handleBackdropClick}
   onkeydown={handleKeydown}
   onclose={handleDialogClose}
-  aria-labelledby="settings-modal-title"
+  aria-labelledby={titleId}
 >
   <div class="flowdrop-settings-modal__container">
     <!-- Header -->
     <div class="flowdrop-settings-modal__header">
-      <h2 id="settings-modal-title" class="flowdrop-settings-modal__title">
+      <h2 id={titleId} class="flowdrop-settings-modal__title">
         <Icon icon="mdi:cog" class="flowdrop-settings-modal__title-icon" />
         {m().navigation.settingsTitle}
       </h2>

package/dist/components/SettingsPanel.svelte

@@ -74,10 +74,15 @@
     class: className = ''
   }: Props = $props();
 
+  // Unique per component instance so two FlowDrop editors on one page
+  // don't render colliding tab/panel DOM ids (a11y).
+  const uid = $props.id();
+
   /**
    * Currently active tab
    */
-  // svelte-ignore state_referenced_locally — initial default, user switches tabs
+  // initial default, user switches tabs
+  // svelte-ignore state_referenced_locally
   let activeTab = $state<SettingsCategory>(categories[0] ?? 'theme');
 
   /**
@@ -216,6 +221,16 @@
           maximum: 300000,
           default: 30000
         },
+        storeDraftsInBrowser: {
+          type: 'boolean',
+          title: 'Store Drafts in Browser',
+          description:
+            'Keep unsaved workflow drafts in browser storage so they survive page reloads. ' +
+            'Warning: drafts (including node configuration values) may stay stored on this ' +
+            'device even after the tab or browser is closed, until they are saved or cleared. ' +
+            'Turn off on shared devices.',
+          default: true
+        },
         undoHistoryLimit: {
           type: 'number',
           title: 'Undo History Limit',
@@ -373,7 +388,8 @@
         class:flowdrop-settings-panel__tab--active={activeTab === category}
         role="tab"
         aria-selected={activeTab === category}
-        aria-controls="panel-{category}"
+        aria-controls="{uid}-panel-{category}"
+        id="{uid}-tab-{category}"
         data-tab={category}
         tabindex={activeTab === category ? 0 : -1}
         onclick={() => (activeTab = category)}
@@ -389,11 +405,11 @@
   <div class="flowdrop-settings-panel__content">
     {#each categories as category (category)}
       <div
-        id="panel-{category}"
+        id="{uid}-panel-{category}"
         class="flowdrop-settings-panel__panel"
         class:flowdrop-settings-panel__panel--active={activeTab === category}
         role="tabpanel"
-        aria-labelledby="tab-{category}"
+        aria-labelledby="{uid}-tab-{category}"
         hidden={activeTab !== category}
       >
         {#if activeTab === category}