@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/components/App.svelte

@@ -18,15 +18,7 @@
   import NodeSwapPicker from './NodeSwapPicker.svelte';
   import SwapMappingEditor from './SwapMappingEditor.svelte';
   import Navbar from './Navbar.svelte';
-  import { api, setEndpointConfig } from '../services/api.js';
-  import { EnhancedFlowDropApiClient } from '../api/enhanced-client.js';
-  import type {
-    NodeMetadata,
-    Workflow,
-    WorkflowNode,
-    ConfigSchema,
-    NodeUIExtensions
-  } from '../types/index.js';
+  import type { NodeMetadata, Workflow, WorkflowNode, ConfigSchema } from '../types/index.js';
   import type { InteractiveSwapState, SwapEventContext } from '../utils/nodeSwap.js';
   import {
     computeInteractiveState,
@@ -44,24 +36,16 @@
   import type { FlowDropTheme, FlowDropThemeName } from '../types/theme.js';
   import type { FlowDropSkinTokens } from '../types/skin.js';
   import { resolveTheme } from '../themes/index.js';
-  import {
-    getWorkflowStore,
-    workflowActions,
-    getWorkflowName,
-    getWorkflowFormat,
-    markAsSaved
-  } from '../stores/workflowStore.svelte.js';
+  import { provideInstance } from '../stores/getInstance.svelte.js';
+  import type { FlowDropInstance } from '../stores/instanceContainer.svelte.js';
   import { globalSaveWorkflow, globalExportWorkflow } from '../services/globalSave.js';
   import { apiToasts, dismissToast } from '../services/toastService.js';
   import { initAutoSave } from '../services/autoSaveService.js';
-  import { getUiSettings, updateSettings } from '../stores/settingsStore.svelte.js';
   import {
-    initializePortCompatibility,
-    getPortCompatibilityChecker,
-    isPortCompatibilityInitialized
-  } from '../utils/connections.js';
-  import { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
-  import { workflowFormatRegistry } from '../registry/workflowFormatRegistry.js';
+    getUiSettings,
+    updateSettings,
+    initializeTheme
+  } from '../stores/settingsStore.svelte.js';
   import { logger } from '../utils/logger.js';
   import { validateWorkflowData } from '../utils/validation.js';
   import type { SettingsCategory } from '../types/settings.js';
@@ -84,14 +68,33 @@
     showNavbar?: boolean;
     /** Disable the node sidebar */
     disableSidebar?: boolean;
-    /** Lock the workflow (prevent changes) */
-    lockWorkflow?: boolean;
-    /** Read-only mode */
-    readOnly?: boolean;
-    /** Node execution statuses */
-    nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
+    /**
+     * Editor interaction mode. Replaces the former `readOnly` + `lockWorkflow`
+     * boolean pair (2.0 breaking change).
+     *
+     * | mode         | node drag / connect / select | proximity-connect | node swap | bottom console panel + toggle |
+     * |--------------|------------------------------|-------------------|-----------|-------------------------------|
+     * | `'edit'`     | enabled                      | enabled           | enabled   | available                     |
+     * | `'readonly'` | disabled                     | disabled          | disabled  | hidden                        |
+     * | `'locked'`   | disabled                     | disabled          | disabled  | hidden                        |
+     *
+     * In 1.x `readOnly` and `lockWorkflow` gated the exact same set of
+     * interactions and were always combined as `!readOnly && !lockWorkflow`,
+     * so any combination of the two booleans collapsed to "edit" (both false)
+     * or "disabled" (either true). `'readonly'` and `'locked'` therefore behave
+     * identically today; the two names are kept as distinct intents so future
+     * versions can differentiate them without another breaking change.
+     *
+     * Migration: `readOnly` → `mode="readonly"`; `lockWorkflow` →
+     * `mode="locked"`; both `false` (or unset) → `mode="edit"` (the default).
+     *
+     * @default 'edit'
+     */
+    mode?: 'edit' | 'readonly' | 'locked';
     /** Pipeline ID for fetching node execution info */
     pipelineId?: string;
+    /** Increments to force a refresh of pipeline node status from the server */
+    refreshTrigger?: number;
     /** Custom navbar title */
     navbarTitle?: string;
     /** Custom navbar actions */
@@ -104,14 +107,31 @@
     }>;
     /** Show settings gear icon in navbar */
     showSettings?: boolean;
+    /** Show the "Connected" status indicator in the navbar (default: true) */
+    showStatus?: boolean;
     /** API base URL */
     apiBaseUrl?: string;
     /** Endpoint configuration */
     endpointConfig?: EndpointConfig;
     /** Authentication provider */
     authProvider?: AuthProvider;
-    /** Event handlers */
-    eventHandlers?: FlowDropEventHandlers;
+    /**
+     * Called before save — return false to cancel. Forwarded to the save
+     * pipeline. (Flattened from the former `eventHandlers` object in 2.0.)
+     */
+    onBeforeSave?: FlowDropEventHandlers['onBeforeSave'];
+    /** Called after a successful save. */
+    onAfterSave?: FlowDropEventHandlers['onAfterSave'];
+    /** Called when a save fails. */
+    onSaveError?: FlowDropEventHandlers['onSaveError'];
+    /** Called on any API error — return true to suppress the default toast. */
+    onApiError?: FlowDropEventHandlers['onApiError'];
+    /** Called after a workflow is loaded/imported. */
+    onWorkflowLoad?: FlowDropEventHandlers['onWorkflowLoad'];
+    /** Called before a node swap — return false to cancel. */
+    onBeforeSwap?: FlowDropEventHandlers['onBeforeSwap'];
+    /** Called after a node swap is applied. */
+    onAfterSwap?: FlowDropEventHandlers['onAfterSwap'];
     /** Feature configuration */
     features?: FlowDropFeatures;
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
@@ -138,6 +158,8 @@
      * function call you'd rather not invoke unless the prop is actually read.
      */
     messages?: MessagesOverride | (() => MessagesOverride);
+    /** Per-instance state container (created by mount functions). Defaults to the page-default instance. */
+    instance?: FlowDropInstance;
   }
 
   let {
@@ -147,17 +169,23 @@
     width = '100%',
     showNavbar = false,
     disableSidebar = false,
-    lockWorkflow = false,
-    readOnly = false,
-    nodeStatuses = {},
+    mode = 'edit',
     pipelineId,
+    refreshTrigger = 0,
     navbarTitle,
     navbarActions = [],
     showSettings = true,
+    showStatus = true,
     apiBaseUrl,
     endpointConfig: propEndpointConfig,
     authProvider,
-    eventHandlers,
+    onBeforeSave,
+    onAfterSave,
+    onSaveError,
+    onApiError,
+    onWorkflowLoad,
+    onBeforeSwap,
+    onAfterSwap,
     features: propFeatures,
     theme: themeProp,
     settingsCategories,
@@ -165,12 +193,25 @@
     showSettingsResetButton,
     swapStrategies,
     workflowSettingsSchema,
-    messages: messagesOverride
+    messages: messagesOverride,
+    instance
   }: Props = $props();
 
-  // svelte-ignore state_referenced_locally — feature flags don't change at runtime
+  // Resolve (and provide to children) the per-instance state container.
+  // Must run during component init — provideInstance reads/sets Svelte context.
+  // The instance never changes for a mounted component, so capturing it once is correct.
+  // svelte-ignore state_referenced_locally
+  const fd = provideInstance(instance);
+
+  // feature flags don't change at runtime
+  // svelte-ignore state_referenced_locally
   const features = mergeFeatures(propFeatures);
 
+  // `mode` is the public API; internally the canvas only cares whether editing
+  // is disabled. 'readonly' and 'locked' both disable the same interactions
+  // (see the `mode` prop JSDoc for the full matrix).
+  const canvasEditable = $derived(mode === 'edit');
+
   // Messages: merge consumer overrides over defaults; expose via context as a
   // getter so consumer-side reactivity (e.g. paraglide-js locale switches)
   // propagates into every child without a subscription. Accepts either a
@@ -271,7 +312,7 @@
       return navbarTitle;
     }
     // Default workflow title logic
-    const wfName = getWorkflowName();
+    const wfName = fd.workflow.name;
     if (!wfName || wfName === 'Untitled Workflow') {
       return 'Workflow / New Workflow';
     }
@@ -285,12 +326,6 @@
   let error = $state<string | null>(null);
   let endpointConfig = $state<EndpointConfig | null>(null);
 
-  /**
-   * Enhanced API client with authProvider support
-   * Used when authProvider is provided; otherwise falls back to legacy api service
-   */
-  let apiClient = $state<EnhancedFlowDropApiClient | null>(null);
-
   // ConfigSidebar state
   let isConfigSidebarOpen = $state(false);
   let selectedNodeId = $state<string | null>(null);
@@ -300,7 +335,6 @@
 
   // Node swap state
   let swapMode = $state<'idle' | 'picking' | 'mapping'>('idle');
-  let swapTargetMetadata = $state<NodeMetadata | null>(null);
   let swapInteractiveState = $state<InteractiveSwapState | null>(null);
 
   // Built-in workflow settings field names — consumer schemas must not reuse these.
@@ -342,7 +376,7 @@
           type: 'string',
           title: 'Workflow Format',
           description: 'The specification format for this workflow',
-          oneOf: workflowFormatRegistry.getOneOfOptions(),
+          oneOf: fd.formats.getOneOfOptions(),
           default: 'flowdrop'
         },
         ...extraProps
@@ -353,15 +387,15 @@
 
   // Workflow configuration values
   let workflowConfigValues = $derived({
-    name: getWorkflowName() || '',
-    description: getWorkflowStore()?.description || '',
-    format: getWorkflowStore()?.metadata?.format || 'flowdrop',
-    ...(getWorkflowStore()?.config ?? {})
+    name: fd.workflow.name || '',
+    description: fd.workflow.current?.description || '',
+    format: fd.workflow.current?.metadata?.format || 'flowdrop',
+    ...(fd.workflow.current?.config ?? {})
   });
 
   // Get the current node from the workflow store
   let selectedNodeForConfig = $derived.by(() => {
-    const wf = getWorkflowStore();
+    const wf = fd.workflow.current;
     if (!selectedNodeId || !wf) return null;
     return wf.nodes.find((node) => node.id === selectedNodeId) || null;
   });
@@ -379,7 +413,7 @@
     // If nodes were provided as props, use them directly (skip API fetch)
     if (propNodes && propNodes.length > 0) {
       // Merge format-provided nodes with prop nodes (deduplicate by ID, props take priority)
-      const formatNodes = workflowFormatRegistry.getAllFormatNodes();
+      const formatNodes = fd.formats.getAllFormatNodes();
       const existingIds = new Set(propNodes.map((n) => n.id));
       const uniqueFormatNodes = formatNodes.filter((n) => !existingIds.has(n.id));
       nodes = [...propNodes, ...uniqueFormatNodes];
@@ -392,16 +426,11 @@
     try {
       error = null;
 
-      // Use enhanced client with authProvider if available, otherwise fall back to legacy api
-      let fetchedNodes: NodeMetadata[];
-      if (apiClient) {
-        fetchedNodes = await apiClient.getAvailableNodes();
-      } else {
-        fetchedNodes = await api.nodes.getNodes();
-      }
+      // Fetch via this instance's API client (configured in initializeApiEndpoints).
+      const fetchedNodes: NodeMetadata[] = await fd.api.client.getAvailableNodes();
 
       // Merge format-provided nodes with API nodes (deduplicate by ID, API takes priority)
-      const formatNodes = workflowFormatRegistry.getAllFormatNodes();
+      const formatNodes = fd.formats.getAllFormatNodes();
       const existingIds = new Set(fetchedNodes.map((n) => n.id));
       const uniqueFormatNodes = formatNodes.filter((n) => !existingIds.has(n.id));
       nodes = [...fetchedNodes, ...uniqueFormatNodes];
@@ -421,8 +450,8 @@
       const errorMessage = err instanceof Error ? err.message : 'Unknown error';
 
       // Notify parent via event handler
-      if (eventHandlers?.onApiError) {
-        const suppressToast = eventHandlers.onApiError(
+      if (onApiError) {
+        const suppressToast = onApiError(
           err instanceof Error ? err : new Error(errorMessage),
           'fetchNodes'
         );
@@ -481,28 +510,15 @@
   async function initializeApiEndpoints(): Promise<void> {
     // First priority: Use endpointConfig prop if provided (from mountFlowDropApp)
     if (propEndpointConfig) {
-      setEndpointConfig(propEndpointConfig);
-      endpointConfig = propEndpointConfig;
-
-      // Create enhanced API client with authProvider support if provided
-      if (authProvider) {
-        apiClient = new EnhancedFlowDropApiClient(propEndpointConfig, authProvider);
-      }
+      configureApi(propEndpointConfig);
       return;
     }
 
-    // Second priority: Check if endpoint config is already set (e.g., by parent layout)
-    const { getEndpointConfig } = await import('../services/api.js');
-    const existingConfig = getEndpointConfig();
-
-    // If config already exists and no override provided, use existing
+    // Second priority: Reuse this instance's existing config (e.g. set by a
+    // parent layout that already configured fd.api) when no override is given.
+    const existingConfig = fd.api.config;
     if (existingConfig && !apiBaseUrl) {
-      endpointConfig = existingConfig;
-
-      // Create enhanced API client with authProvider support if provided
-      if (authProvider) {
-        apiClient = new EnhancedFlowDropApiClient(existingConfig, authProvider);
-      }
+      configureApi(existingConfig);
       return;
     }
 
@@ -510,9 +526,6 @@
     const baseUrl = apiBaseUrl || '/api/flowdrop';
 
     const config = createEndpointConfig(baseUrl, {
-      auth: {
-        type: 'none' // No authentication for now
-      },
       timeout: 10000, // 10 second timeout
       retry: {
         enabled: true,
@@ -522,14 +535,16 @@
       }
     });
 
-    setEndpointConfig(config);
-    // Store the configuration for passing to WorkflowEditor
-    endpointConfig = config;
+    configureApi(config);
+  }
 
-    // Create enhanced API client with authProvider support if provided
-    if (authProvider) {
-      apiClient = new EnhancedFlowDropApiClient(config, authProvider);
-    }
+  /**
+   * Configure this instance's ApiContext and mirror its config/client into the
+   * local state used by child components and the save service.
+   */
+  function configureApi(config: EndpointConfig): void {
+    fd.api.configure(config, authProvider);
+    endpointConfig = config;
   }
 
   /**
@@ -545,7 +560,6 @@
     isConfigSidebarOpen = true;
     // Reset swap state when switching nodes
     swapMode = 'idle';
-    swapTargetMetadata = null;
     swapInteractiveState = null;
   }
 
@@ -554,7 +568,6 @@
     selectedNodeId = null;
     // Reset swap state when closing
     swapMode = 'idle';
-    swapTargetMetadata = null;
     swapInteractiveState = null;
   }
 
@@ -574,7 +587,6 @@
    */
   function startSwap(): void {
     swapMode = 'picking';
-    swapTargetMetadata = null;
     swapInteractiveState = null;
   }
 
@@ -585,29 +597,21 @@
     const node = selectedNodeForConfig;
     if (!node) return;
 
-    const wf = getWorkflowStore();
+    const wf = fd.workflow.current;
     if (!wf) return;
 
     // Format compatibility guard — defence-in-depth behind picker's own filter
-    const currentFormat = getWorkflowFormat();
+    const currentFormat = fd.workflow.format;
     if (metadata.formats?.length && !metadata.formats.includes(currentFormat)) {
       return;
     }
 
-    // Get port compatibility checker (may be null if not initialized)
-    let checker: import('../utils/connections.js').PortCompatibilityChecker | null = null;
-    try {
-      checker = getPortCompatibilityChecker();
-    } catch {
-      // Checker not initialized — computeSwapPreview will use exact dataType matching
-    }
-
+    // Port compatibility comes from this instance's checker.
     const interactive = computeInteractiveState(node, metadata, wf.edges, wf.nodes, {
-      checker,
+      checker: fd.portCompatibility,
       strategies: swapStrategies
     });
 
-    swapTargetMetadata = metadata;
     swapInteractiveState = interactive;
     swapMode = 'mapping';
   }
@@ -619,7 +623,7 @@
     const state = finalState ?? swapInteractiveState;
     if (!state) return;
 
-    const wf = getWorkflowStore();
+    const wf = fd.workflow.current;
     if (!wf) return;
 
     const oldLabel = state.oldNode.data.label;
@@ -639,7 +643,7 @@
     }
 
     // onBeforeSwap hook — abort if returns false
-    if (eventHandlers?.onBeforeSwap) {
+    if (onBeforeSwap) {
       const swapEventCtx: SwapEventContext = {
         oldNode: state.oldNode,
         newMetadata: state.newMetadata,
@@ -647,21 +651,21 @@
         portOverrides: [],
         configOverrides: []
       };
-      const shouldProceed = await eventHandlers.onBeforeSwap(swapEventCtx);
+      const shouldProceed = await onBeforeSwap(swapEventCtx);
       if (shouldProceed === false) return;
     }
 
     // Apply as a single atomic swap with descriptive history entry
-    workflowActions.swapNode({
+    fd.workflow.swapNode({
       nodes: result.updatedNodes,
       edges: result.updatedEdges,
       description: `Swap node: ${oldLabel} → ${newLabel}`
     });
 
     // onAfterSwap hook (fire-and-forget — swap is already applied)
-    if (eventHandlers?.onAfterSwap) {
+    if (onAfterSwap) {
       try {
-        eventHandlers.onAfterSwap(result, state.oldNode, state.newNodeId);
+        onAfterSwap(result, state.oldNode, state.newNodeId);
       } catch (err) {
         logger.error('onAfterSwap hook error:', err);
       }
@@ -673,7 +677,6 @@
 
     // Reset swap state
     swapMode = 'idle';
-    swapTargetMetadata = null;
     swapInteractiveState = null;
 
     // Wait for SvelteFlow to process the new node before updating visual state
@@ -694,35 +697,9 @@
    */
   function cancelSwap(): void {
     swapMode = 'idle';
-    swapTargetMetadata = null;
     swapInteractiveState = null;
   }
 
-  /**
-   * Handle workflow configuration save
-   */
-  async function handleWorkflowSave(config: Record<string, unknown>): Promise<void> {
-    // Update the workflow store
-    if (getWorkflowStore()) {
-      workflowActions.batchUpdate({
-        name: config.name as string | undefined,
-        description: config.description as string | undefined
-      });
-    }
-
-    // Close the sidebar
-    isWorkflowSettingsOpen = false;
-
-    // Also save the workflow to the backend
-    try {
-      await saveWorkflow();
-    } catch (error) {
-      logger.error('Failed to save workflow to backend:', error);
-      // Note: We don't throw the error here to avoid breaking the UI flow
-      // The user can still manually save via the main Save button if needed
-    }
-  }
-
   /**
    * Save workflow - thin wrapper that delegates to globalSaveWorkflow().
    *
@@ -731,10 +708,10 @@
    */
   async function saveWorkflow(): Promise<void> {
     await globalSaveWorkflow({
-      apiClient: apiClient ?? undefined,
-      eventHandlers,
+      eventHandlers: { onBeforeSave, onAfterSave, onSaveError, onApiError },
       features,
-      onMarkAsSaved: markAsSaved
+      instance: fd,
+      onMarkAsSaved: () => fd.workflow.markAsSaved()
     });
   }
 
@@ -745,7 +722,7 @@
    * in globalSave.ts — the single source of truth.
    */
   async function exportWorkflow(): Promise<void> {
-    await globalExportWorkflow({ features });
+    await globalExportWorkflow({ features, instance: fd });
   }
 
   /**
@@ -770,12 +747,12 @@
           logger.warn('Workflow import validation failed:', validation.error);
           return;
         }
-        workflowActions.initialize(data as Workflow);
+        fd.workflow.initialize(data as Workflow);
         if (features.showToasts) {
           apiToasts.success('Import workflow', 'Workflow imported successfully');
         }
-        if (eventHandlers?.onWorkflowLoad) {
-          eventHandlers.onWorkflowLoad(data as Workflow);
+        if (onWorkflowLoad) {
+          onWorkflowLoad(data as Workflow);
         }
       } catch (error) {
         const errorObj = error instanceof Error ? error : new Error('Unknown error occurred');
@@ -822,26 +799,31 @@
 
   // Load node types on mount
   onMount(() => {
+    // Apply the persisted theme preference to the document and wire its
+    // reactivity. Idempotent — a no-op when mountFlowDropApp already
+    // initialized it; load-bearing for hosts rendering <App> directly,
+    // where nothing else applies data-theme (the persisted light/dark
+    // choice was otherwise never restored on reload).
+    initializeTheme();
+
     (async () => {
       try {
         await initializeApiEndpoints();
 
-        // Ensure port compatibility checker is initialized (needed for proximity connect, etc.)
-        // mountFlowDropApp initializes this before mounting, but SvelteKit routes need it here.
-        // Only initialize with defaults if not already set — preserves custom port configs.
-        if (!isPortCompatibilityInitialized()) {
-          initializePortCompatibility(DEFAULT_PORT_CONFIG);
-        }
+        // The instance's port compatibility checker is seeded with
+        // DEFAULT_PORT_CONFIG at construction; mountFlowDropApp re-initializes
+        // it from the backend's port config. SvelteKit routes that render
+        // <App> directly keep the defaults (no separate fetch here).
 
         await fetchNodeTypes();
 
         // Initialize the workflow store
         if (initialWorkflow) {
-          workflowActions.initialize(initialWorkflow);
+          fd.workflow.initialize(initialWorkflow);
 
           // Emit onWorkflowLoad event
-          if (eventHandlers?.onWorkflowLoad) {
-            eventHandlers.onWorkflowLoad(initialWorkflow);
+          if (onWorkflowLoad) {
+            onWorkflowLoad(initialWorkflow);
           }
         } else {
           // Initialize with a default empty workflow so the editor is functional
@@ -852,13 +834,13 @@
             nodes: [],
             edges: [],
             metadata: {
-              version: '1.0.0',
+              schemaVersion: '1.0.0',
               format: DEFAULT_WORKFLOW_FORMAT,
               createdAt: new Date().toISOString(),
               updatedAt: new Date().toISOString()
             }
           };
-          workflowActions.initialize(defaultWorkflow);
+          fd.workflow.initialize(defaultWorkflow);
         }
       } catch (error) {
         logger.error('Failed to initialize editor:', error);
@@ -874,6 +856,7 @@
 
     // Initialize auto-save based on user settings
     const cleanupAutoSave = initAutoSave({
+      isDirty: () => fd.workflow.isDirty,
       onSave: async () => {
         await saveWorkflow();
       },
@@ -945,7 +928,7 @@
 
   function handleConsoleUIAction(action: UIAction): void {
     if (action.type === 'open_config') {
-      const wf = getWorkflowStore();
+      const wf = fd.workflow.current;
       if (!wf) return;
       const node = wf.nodes.find((n) => n.id === action.nodeId);
       if (node) openConfigSidebar(node);
@@ -1005,10 +988,12 @@
 <!-- MainLayout wrapper for workflow editor -->
 <div class="flowdrop-root">
   <MainLayout
+    {height}
+    {width}
     showHeader={showNavbar}
     showLeftSidebar={!disableSidebar}
     showRightSidebar={showRightPanel}
-    showBottomPanel={getUiSettings().consoleOpen && !readOnly && !lockWorkflow}
+    showBottomPanel={getUiSettings().consoleOpen && canvasEditable}
     bottomPanelHeight={getUiSettings().consoleHeight}
     showFooter={false}
     headerHeight={60}
@@ -1027,7 +1012,7 @@
       <Navbar
         title={breadcrumbTitle}
         primaryActions={navbarActions.length > 0 ? navbarActions : defaultPrimaryActions}
-        showStatus={true}
+        {showStatus}
         {showSettings}
         {settingsCategories}
         {showSettingsSyncButton}
@@ -1040,7 +1025,7 @@
       <NodeSidebar
         {nodes}
         loading={nodeTypesLoading}
-        activeFormat={getWorkflowFormat()}
+        activeFormat={fd.workflow.format}
         categoriesDefaultOpen={themeConfig?.sidebar?.categoriesDefaultOpen ?? false}
       />
     {/snippet}
@@ -1048,16 +1033,8 @@
     <!-- Right Sidebar: Configuration, Swap, or Workflow Settings -->
     {#snippet rightSidebar()}
       {#if swapMode === 'mapping' && swapInteractiveState && selectedNodeForConfig}
-        {@const swapChecker = (() => {
-          try {
-            return getPortCompatibilityChecker();
-          } catch {
-            return null;
-          }
-        })()}
         <SwapMappingEditor
           interactiveState={swapInteractiveState}
-          checker={swapChecker}
           onConfirm={executeNodeSwap}
           onCancel={cancelSwap}
           onBack={() => {
@@ -1069,22 +1046,22 @@
         <NodeSwapPicker
           currentNode={selectedNodeForConfig}
           availableNodes={nodes}
-          activeFormat={getWorkflowFormat()}
+          activeFormat={fd.workflow.format}
           onSelect={handleSwapSelect}
           onCancel={cancelSwap}
         />
       {:else if isWorkflowSettingsOpen}
         <ConfigPanel
           title={mergedMessages.navigation.workflowSettingsPanelTitle}
-          id={getWorkflowStore()?.id}
+          id={fd.workflow.current?.id}
           details={[
             {
               label: 'Nodes',
-              value: String(getWorkflowStore()?.nodes?.length ?? 0)
+              value: String(fd.workflow.current?.nodes?.length ?? 0)
             },
             {
               label: 'Connections',
-              value: String(getWorkflowStore()?.edges?.length ?? 0)
+              value: String(fd.workflow.current?.edges?.length ?? 0)
             }
           ]}
           configTitle={mergedMessages.navigation.workflowSettingsPanelSubtitle}
@@ -1097,7 +1074,7 @@
             showUIExtensions={false}
             onChange={(config) => {
               // Sync workflow settings changes immediately on field blur
-              const wf = getWorkflowStore();
+              const wf = fd.workflow.current;
               if (wf) {
                 const newFormat = (config.format as string) || DEFAULT_WORKFLOW_FORMAT;
                 const currentFormat = wf.metadata?.format || DEFAULT_WORKFLOW_FORMAT;
@@ -1118,7 +1095,7 @@
 
                 // Extract built-in fields; everything else belongs in workflow.config
                 const { name, description, format: _format, ...customConfig } = config;
-                workflowActions.batchUpdate({
+                fd.workflow.batchUpdate({
                   name: name as string,
                   description: description as string | undefined,
                   metadata: {
@@ -1149,14 +1126,14 @@
             }
           ]}
           onClose={closeConfigSidebar}
-          onSwap={!readOnly && !lockWorkflow && features.enableNodeSwap ? startSwap : undefined}
+          onSwap={canvasEditable && features.enableNodeSwap ? startSwap : undefined}
         >
           <ConfigForm
             {authProvider}
             node={currentNode}
-            workflowId={getWorkflowStore()?.id}
-            workflowNodes={getWorkflowStore()?.nodes}
-            workflowEdges={getWorkflowStore()?.edges}
+            workflowId={fd.workflow.current?.id}
+            workflowNodes={fd.workflow.current?.nodes}
+            workflowEdges={fd.workflow.current?.edges}
             onChange={async (updatedConfig, uiExtensions) => {
               // Sync config changes to workflow immediately on field blur
               if (selectedNodeId && currentNode) {
@@ -1179,7 +1156,7 @@
                   data: updatedData
                 };
 
-                workflowActions.updateNode(selectedNodeId, nodeUpdates);
+                fd.workflow.updateNode(selectedNodeId, nodeUpdates);
 
                 // Update the local editor state to reflect config changes immediately
                 // This is needed for nodeType changes to take effect visually
@@ -1228,7 +1205,7 @@
           >
             <AIChatPanel
               nodeTypes={nodes}
-              workflowId={getWorkflowStore()?.id}
+              workflowId={fd.workflow.current?.id}
               onUIAction={handleConsoleUIAction}
               {endpointConfig}
             />
@@ -1260,8 +1237,7 @@
                 const defaultUrl = '/api/flowdrop';
                 const newUrl = prompt('Enter Backend API URL:', defaultUrl);
                 if (newUrl) {
-                  const endpointConfig = createEndpointConfig(newUrl);
-                  setEndpointConfig(endpointConfig);
+                  configureApi(createEndpointConfig(newUrl));
                   fetchNodeTypes();
                 }
               }}
@@ -1289,7 +1265,8 @@
     {/if}
 
     <!-- Main Editor Area -->
-    <!-- svelte-ignore a11y_no_noninteractive_element_interactions — interactive workflow canvas region with keyboard support -->
+    <!-- interactive workflow canvas region with keyboard support -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <div
       class="flowdrop-editor-main"
       class:pipeline-view={!!pipelineId}
@@ -1317,18 +1294,11 @@
 
       <WorkflowEditor
         bind:this={workflowEditorRef}
-        {nodes}
-        {height}
-        {width}
         endpointConfig={endpointConfig ?? undefined}
-        {isConfigSidebarOpen}
-        {selectedNodeForConfig}
         {openConfigSidebar}
-        {closeConfigSidebar}
-        {lockWorkflow}
-        {readOnly}
-        {nodeStatuses}
+        {mode}
         {pipelineId}
+        {refreshTrigger}
         consoleOpen={getUiSettings().consoleOpen}
         onToggleConsole={toggleConsole}
       />