@d34dman/flowdrop 0.0.43 → 0.0.44

package/README.md

@@ -66,8 +66,8 @@ You get a production-ready workflow UI. You keep full control of everything else
 
 ## Features
 
-|                              |                                                                           |
-| ---------------------------- | ------------------------------------------------------------------------- |
+|                             |                                                                           |
+| --------------------------- | ------------------------------------------------------------------------- |
 | 🎨 **Visual Editor Only**    | Pure UI component. No hidden backend, no external dependencies            |
 | 🔐 **You Own Everything**    | Your data, your servers, your orchestration logic, your security policies |
 | 🔌 **Backend Agnostic**      | Connect to any API: Drupal, Laravel, Express, FastAPI, or your own        |
@@ -214,12 +214,12 @@ Runtime configuration means you build once and deploy to staging, production, or
 
 ## Documentation
 
-| Resource                           | Description              |
-| ---------------------------------- | ------------------------ |
-| [API.md](./API.md)                 | REST API specification   |
-| [DOCKER.md](./DOCKER.md)           | Docker deployment guide  |
-| [QUICK_START.md](./QUICK_START.md) | Get running in 5 minutes |
-| [CHANGELOG.md](./CHANGELOG.md)     | Version history          |
+| Resource                                                     | Description              |
+| ------------------------------------------------------------ | ------------------------ |
+| [API Documentation](https://flowdrop-io.github.io/flowdrop/) | REST API specification   |
+| [DOCKER.md](./DOCKER.md)                                     | Docker deployment guide  |
+| [QUICK_START.md](./QUICK_START.md)                           | Get running in 5 minutes |
+| [CHANGELOG.md](./CHANGELOG.md)                               | Version history          |
 
 ## Development
 

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

@@ -45,7 +45,9 @@ export declare class EnhancedFlowDropApiClient {
      */
     constructor(config: EndpointConfig, authProvider?: AuthProvider);
     /**
-     * Make HTTP request with error handling, retry logic, and auth support
+     * Make HTTP request with error handling, retry logic, timeout, and auth support
+     *
+     * Uses apiSettings for timeout and retry configuration, falling back to EndpointConfig values.
      *
      * @param endpointKey - Key identifying the endpoint (for method/header lookup)
      * @param endpointPath - The endpoint path template

package/dist/api/enhanced-client.js

@@ -7,6 +7,8 @@
  */
 import { buildEndpointUrl, getEndpointMethod, getEndpointHeaders } from '../config/endpoints.js';
 import { NoAuthProvider } from '../types/auth.js';
+import { get } from 'svelte/store';
+import { apiSettings } from '../stores/settingsStore.js';
 /**
  * API error with additional context
  */
@@ -54,7 +56,9 @@ export class EnhancedFlowDropApiClient {
         this.authProvider = authProvider ?? new NoAuthProvider();
     }
     /**
-     * Make HTTP request with error handling, retry logic, and auth support
+     * Make HTTP request with error handling, retry logic, timeout, and auth support
+     *
+     * Uses apiSettings for timeout and retry configuration, falling back to EndpointConfig values.
      *
      * @param endpointKey - Key identifying the endpoint (for method/header lookup)
      * @param endpointPath - The endpoint path template
@@ -66,6 +70,8 @@ export class EnhancedFlowDropApiClient {
         const url = buildEndpointUrl(this.config, endpointPath, params);
         const method = options.method ?? getEndpointMethod(this.config, endpointKey);
         const configHeaders = getEndpointHeaders(this.config, endpointKey);
+        // Get user settings for timeout and retry
+        const userApiSettings = get(apiSettings);
         // Get auth headers from provider
         const authHeaders = await this.authProvider.getAuthHeaders();
         // Merge headers: config headers < auth headers < request-specific headers
@@ -74,16 +80,27 @@ export class EnhancedFlowDropApiClient {
             ...authHeaders,
             ...options.headers
         };
+        // Create AbortController for timeout
+        const controller = new AbortController();
+        const timeoutMs = userApiSettings.timeout ?? this.config.timeout ?? 30000;
+        const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
         const fetchConfig = {
             method,
             headers,
+            signal: controller.signal,
             ...options
         };
         let lastError = null;
-        const maxAttempts = this.config.retry?.enabled ? this.config.retry.maxAttempts : 1;
+        // Determine retry settings: user settings override config
+        const retryEnabled = userApiSettings.retryEnabled ?? this.config.retry?.enabled ?? false;
+        const maxAttempts = retryEnabled
+            ? (userApiSettings.retryAttempts ?? this.config.retry?.maxAttempts ?? 3)
+            : 1;
         for (let attempt = 1; attempt <= maxAttempts; attempt++) {
             try {
                 const response = await fetch(url, fetchConfig);
+                // Clear timeout on successful response
+                clearTimeout(timeoutId);
                 // Handle 401 Unauthorized
                 if (response.status === 401) {
                     if (this.authProvider.onUnauthorized) {
@@ -117,6 +134,17 @@ export class EnhancedFlowDropApiClient {
                 return data;
             }
             catch (error) {
+                // Clear timeout on error
+                clearTimeout(timeoutId);
+                // Handle abort (timeout)
+                if (error instanceof Error && error.name === 'AbortError') {
+                    lastError = new ApiError(`Request timeout after ${timeoutMs}ms`, 0, operation, {
+                        timeout: true
+                    });
+                    // Don't retry on timeout - it's a client-side timeout
+                    console.error(`API request timed out after ${timeoutMs}ms:`, lastError);
+                    throw lastError;
+                }
                 // If it's already an ApiError, preserve it
                 if (error instanceof ApiError) {
                     lastError = error;
@@ -131,9 +159,11 @@ export class EnhancedFlowDropApiClient {
                     console.error(`API request failed after ${attempt} attempts:`, lastError);
                     throw lastError;
                 }
-                // Wait before retry
-                const delay = this.config.retry?.delay ?? 1000;
-                const backoffDelay = this.config.retry?.backoff === 'exponential' ? delay * Math.pow(2, attempt - 1) : delay;
+                // Wait before retry with exponential backoff
+                const baseDelay = this.config.retry?.delay ?? 1000;
+                const backoffDelay = this.config.retry?.backoff === 'exponential'
+                    ? baseDelay * Math.pow(2, attempt - 1)
+                    : baseDelay;
                 await new Promise((resolve) => setTimeout(resolve, backoffDelay));
             }
         }

package/dist/components/App.svelte

@@ -34,6 +34,8 @@
 		markAsSaved
 	} from '../stores/workflowStore.js';
 	import { apiToasts, dismissToast } from '../services/toastService.js';
+	import { initAutoSave } from '../services/autoSaveService.js';
+	import { uiSettings } from '../stores/settingsStore.js';
 
 	/**
 	 * Configuration props for runtime customization
@@ -599,8 +601,23 @@
 
 		window.addEventListener('workflow-settings-toggle', handleWorkflowSettingsToggle);
 
+		// Initialize auto-save based on user settings
+		const cleanupAutoSave = initAutoSave({
+			onSave: async () => {
+				await saveWorkflow();
+			},
+			onError: (error) => {
+				// Don't show toast for auto-save errors to avoid noise
+				console.warn('Auto-save failed:', error);
+			},
+			onSuccess: () => {
+				console.debug('Auto-saved workflow');
+			}
+		});
+
 		return () => {
 			window.removeEventListener('workflow-settings-toggle', handleWorkflowSettingsToggle);
+			cleanupAutoSave();
 		};
 	});
 
@@ -611,6 +628,19 @@
 			// Workflow store updated
 		}
 	});
+
+	/**
+	 * Derived value for showing the right config panel
+	 * Config panel always appears on the right side
+	 */
+	const hasConfigPanelOpen = $derived(isWorkflowSettingsOpen || !!selectedNodeForConfig());
+	const showRightPanel = $derived(!disableSidebar && hasConfigPanelOpen);
+
+	/**
+	 * Calculate left sidebar width based on collapsed state
+	 * When collapsed, use 48px; otherwise use user-configured width
+	 */
+	const leftSidebarWidth = $derived($uiSettings.sidebarCollapsed ? 48 : $uiSettings.sidebarWidth);
 </script>
 
 <svelte:head>
@@ -622,13 +652,14 @@
 <MainLayout
 	showHeader={showNavbar && !$page.url.pathname.includes('/edit')}
 	showLeftSidebar={!disableSidebar}
-	showRightSidebar={!disableSidebar && (isWorkflowSettingsOpen || !!selectedNodeForConfig())}
+	showRightSidebar={showRightPanel}
+	showBottomPanel={false}
 	showFooter={false}
 	headerHeight={60}
-	leftSidebarWidth={320}
+	{leftSidebarWidth}
 	rightSidebarWidth={400}
-	leftSidebarMinWidth={280}
-	leftSidebarMaxWidth={450}
+	leftSidebarMinWidth={$uiSettings.sidebarCollapsed ? 48 : 280}
+	leftSidebarMaxWidth={$uiSettings.sidebarCollapsed ? 48 : 450}
 	rightSidebarMinWidth={320}
 	rightSidebarMaxWidth={550}
 	enableLeftSplitPane={false}
@@ -699,8 +730,15 @@
 					schema={workflowConfigSchema}
 					values={workflowConfigValues}
 					showUIExtensions={false}
-					onSave={handleWorkflowSave}
-					onCancel={() => (isWorkflowSettingsOpen = false)}
+					onChange={(config) => {
+						// Sync workflow settings changes immediately on field blur
+						if ($workflowStore) {
+							workflowActions.batchUpdate({
+								name: config.name as string,
+								description: config.description as string | undefined
+							});
+						}
+					}}
 				/>
 			</ConfigPanel>
 		{:else if selectedNodeForConfig()}
@@ -718,7 +756,8 @@
 				<ConfigForm
 					node={currentNode}
 					workflowId={$workflowStore?.id}
-					onSave={async (updatedConfig, uiExtensions?: NodeUIExtensions) => {
+					onChange={async (updatedConfig, uiExtensions) => {
+						// Sync config changes to workflow immediately on field blur
 						if (selectedNodeId && currentNode) {
 							// Build the updated node data
 							const updatedData = {
@@ -734,22 +773,17 @@
 								};
 							}
 
-							// Handle nodeType switching if nodeType is in the config
+							// Update the node in the workflow store
 							const nodeUpdates: Record<string, unknown> = {
 								data: updatedData
 							};
 
-							// NOTE: We do NOT change the node's type field anymore
-							// All nodes use 'universalNode' and UniversalNode handles internal switching
 							workflowActions.updateNode(selectedNodeId, nodeUpdates);
 
-							// Refresh edge positions just in case. This is a safe bet.
+							// Refresh edge positions in case config changes affect handles
 							await workflowEditorRef.refreshEdgePositions(selectedNodeId);
 						}
-
-						closeConfigSidebar();
 					}}
-					onCancel={closeConfigSidebar}
 				/>
 			</ConfigPanel>
 		{/if}
@@ -837,14 +871,14 @@
 <style>
 	/* Status bar styles */
 	.flowdrop-status {
-		background-color: #eff6ff;
-		border-bottom: 1px solid #bfdbfe;
+		background-color: var(--fd-info-muted);
+		border-bottom: 1px solid var(--fd-info);
 		padding: 1rem;
 	}
 
 	.flowdrop-status--error {
-		background-color: #fef2f2;
-		border-bottom: 1px solid #fecaca;
+		background-color: var(--fd-error-muted);
+		border-bottom: 1px solid var(--fd-error);
 	}
 
 	.flowdrop-status__content {
@@ -862,18 +896,18 @@
 	}
 
 	.flowdrop-status__indicator--error {
-		background-color: #ef4444;
+		background-color: var(--fd-error);
 	}
 
 	/* Button styles */
 	.flowdrop-btn {
 		padding: 0.375rem 0.75rem;
-		border-radius: 0.375rem;
+		border-radius: var(--fd-radius-md);
 		font-size: 0.75rem;
 		font-weight: 500;
 		cursor: pointer;
 		border: 1px solid transparent;
-		transition: all 0.2s ease-in-out;
+		transition: all var(--fd-transition-fast);
 	}
 
 	.flowdrop-btn--sm {
@@ -883,35 +917,35 @@
 
 	.flowdrop-btn--outline {
 		background-color: transparent;
-		border-color: #d1d5db;
-		color: #374151;
+		border-color: var(--fd-border);
+		color: var(--fd-foreground);
 	}
 
 	.flowdrop-btn--outline:hover {
-		background-color: #f9fafb;
-		border-color: #9ca3af;
+		background-color: var(--fd-muted);
+		border-color: var(--fd-border-strong);
 	}
 
 	.flowdrop-btn--primary {
-		background-color: #3b82f6;
-		border-color: #3b82f6;
-		color: #ffffff;
+		background-color: var(--fd-primary);
+		border-color: var(--fd-primary);
+		color: var(--fd-primary-foreground);
 	}
 
 	.flowdrop-btn--primary:hover {
-		background-color: #2563eb;
-		border-color: #2563eb;
+		background-color: var(--fd-primary-hover);
+		border-color: var(--fd-primary-hover);
 	}
 
 	.flowdrop-btn--ghost {
 		background-color: transparent;
 		border-color: transparent;
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-btn--ghost:hover {
-		background-color: #f3f4f6;
-		color: #374151;
+		background-color: var(--fd-muted);
+		color: var(--fd-foreground);
 	}
 
 	/* Utility classes */
@@ -943,6 +977,6 @@
 		min-width: 0;
 		height: 100%;
 		overflow: hidden;
-		background-color: #1f2937;
+		background: var(--fd-layout-background);
 	}
 </style>