@d34dman/flowdrop 0.0.63 → 0.0.65

package/README.md

@@ -49,6 +49,8 @@ No vendor lock-in. No data leaving your walls. No surprise bills.
 npm install @d34dman/flowdrop
 ```
 
+> **Note:** FlowDrop supports **one editor instance per page** (module-level singleton stores). See [Architecture Notes](#architecture-notes) for details.
+
 You get a production-ready workflow UI. You keep full control of everything else.
 
 ## Quickstart

package/dist/adapters/agentspec/AgentSpecAdapter.js

@@ -13,46 +13,7 @@ import { getComponentTypeDefaults, extractComponentType, AGENTSPEC_NAMESPACE } f
 import { computeAutoLayout } from './autoLayout.js';
 import { v4 as uuidv4 } from 'uuid';
 import { logger } from '../../utils/logger.js';
-// ============================================================================
-// Handle ID Helpers
-// ============================================================================
-/**
- * Build a FlowDrop handle ID from node ID, direction, and port ID.
- * Format: `${nodeId}-${direction}-${portId}`
- */
-function buildHandleId(nodeId, direction, portId) {
-    return `${nodeId}-${direction}-${portId}`;
-}
-/**
- * Extract port ID from a FlowDrop handle ID.
- * Handles format: `${nodeId}-output-${portId}` or `${nodeId}-input-${portId}`
- */
-function extractPortId(handleId) {
-    if (!handleId)
-        return null;
-    const outputMatch = handleId.lastIndexOf('-output-');
-    if (outputMatch !== -1) {
-        return handleId.substring(outputMatch + '-output-'.length);
-    }
-    const inputMatch = handleId.lastIndexOf('-input-');
-    if (inputMatch !== -1) {
-        return handleId.substring(inputMatch + '-input-'.length);
-    }
-    // Short format: the handleId IS the port ID
-    return handleId;
-}
-/**
- * Extract direction from a FlowDrop handle ID.
- */
-function extractDirection(handleId) {
-    if (!handleId)
-        return null;
-    if (handleId.lastIndexOf('-output-') !== -1)
-        return 'output';
-    if (handleId.lastIndexOf('-input-') !== -1)
-        return 'input';
-    return null;
-}
+import { buildHandleId, extractPortId, extractDirection } from '../../utils/handleIds.js';
 // ============================================================================
 // Property ↔ Port Conversion
 // ============================================================================

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

@@ -161,4 +161,23 @@ export declare class EnhancedFlowDropApiClient {
         version: string;
         build: string;
     }>;
+    /**
+     * 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;
+        };
+    }>;
 }

package/dist/api/enhanced-client.js

@@ -418,4 +418,13 @@ export class EnhancedFlowDropApiClient {
         }
         return response.data;
     }
+    // =========================================================================
+    // Pipeline API Methods
+    // =========================================================================
+    /**
+     * Fetch pipeline data including job information and status
+     */
+    async getPipelineData(pipelineId) {
+        return this.request('pipelines.get', this.config.endpoints.pipelines.get, { id: pipelineId }, {}, 'get pipeline data');
+    }
 }

package/dist/components/App.svelte

@@ -113,7 +113,7 @@
 		features: propFeatures
 	}: Props = $props();
 
-	// Merge features with defaults
+	// svelte-ignore state_referenced_locally — feature flags don't change at runtime
 	const features = mergeFeatures(propFeatures);
 
 	// Create breadcrumb-style title - at top level to avoid store subscription issues
@@ -507,38 +507,42 @@
 	// Load node types on mount
 	onMount(() => {
 		(async () => {
-			await initializeApiEndpoints();
+			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.
-			initializePortCompatibility(DEFAULT_PORT_CONFIG);
+				// Ensure port compatibility checker is initialized (needed for proximity connect, etc.)
+				// mountFlowDropApp initializes this before mounting, but SvelteKit routes need it here.
+				initializePortCompatibility(DEFAULT_PORT_CONFIG);
 
-			await fetchNodeTypes();
+				await fetchNodeTypes();
 
-			// Initialize the workflow store
-			if (initialWorkflow) {
-				workflowActions.initialize(initialWorkflow);
+				// Initialize the workflow store
+				if (initialWorkflow) {
+					workflowActions.initialize(initialWorkflow);
 
-				// Emit onWorkflowLoad event
-				if (eventHandlers?.onWorkflowLoad) {
-					eventHandlers.onWorkflowLoad(initialWorkflow);
-				}
-			} else {
-				// Initialize with a default empty workflow so the editor is functional
-				// (e.g., drag-and-drop requires a non-null workflow in the store)
-				const defaultWorkflow: Workflow = {
-					id: '',
-					name: 'Untitled Workflow',
-					nodes: [],
-					edges: [],
-					metadata: {
-						version: '1.0.0',
-						format: DEFAULT_WORKFLOW_FORMAT,
-						createdAt: new Date().toISOString(),
-						updatedAt: new Date().toISOString()
+					// Emit onWorkflowLoad event
+					if (eventHandlers?.onWorkflowLoad) {
+						eventHandlers.onWorkflowLoad(initialWorkflow);
 					}
-				};
-				workflowActions.initialize(defaultWorkflow);
+				} else {
+					// Initialize with a default empty workflow so the editor is functional
+					// (e.g., drag-and-drop requires a non-null workflow in the store)
+					const defaultWorkflow: Workflow = {
+						id: '',
+						name: 'Untitled Workflow',
+						nodes: [],
+						edges: [],
+						metadata: {
+							version: '1.0.0',
+							format: DEFAULT_WORKFLOW_FORMAT,
+							createdAt: new Date().toISOString(),
+							updatedAt: new Date().toISOString()
+						}
+					};
+					workflowActions.initialize(defaultWorkflow);
+				}
+			} catch (error) {
+				logger.error('Failed to initialize editor:', error);
 			}
 		})();
 
@@ -569,14 +573,6 @@
 		};
 	});
 
-	// Monitor workflow store changes for testing node drag updates
-	$effect(() => {
-		const currentWorkflow = getWorkflowStore();
-		if (currentWorkflow) {
-			// Workflow store updated
-		}
-	});
-
 	/**
 	 * Derived value for showing the right config panel
 	 * Config panel always appears on the right side

package/dist/components/CanvasBanner.stories.svelte

@@ -1,20 +1,24 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import CanvasBanner from "./CanvasBanner.svelte";
-	import CanvasDecorator from "../stories/CanvasDecorator.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import CanvasBanner from './CanvasBanner.svelte';
+	import CanvasDecorator from '../stories/CanvasDecorator.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/CanvasBanner",
-		tags: ["autodocs"],
+		title: 'Display/CanvasBanner',
+		tags: ['autodocs'],
 		parameters: {
-			layout: "centered",
-		},
+			layout: 'centered'
+		}
 	});
 </script>
 
 <Story name="Default">
 	<CanvasDecorator>
-		<CanvasBanner title="Empty Canvas" description="Drag nodes from the sidebar to get started" iconName="heroicons:squares-plus" />
+		<CanvasBanner
+			title="Empty Canvas"
+			description="Drag nodes from the sidebar to get started"
+			iconName="heroicons:squares-plus"
+		/>
 	</CanvasDecorator>
 </Story>
 

package/dist/components/CanvasBanner.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const CanvasBanner: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import CanvasBanner from "./CanvasBanner.svelte";
+import CanvasBanner from './CanvasBanner.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/ConfigModal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import type { ConfigSchema, ConfigValues } from '../types';
 	import ConfigForm from './ConfigForm.svelte';
 
@@ -8,23 +7,20 @@
 		nodeLabel: string;
 		configSchema: ConfigSchema;
 		configValues: ConfigValues;
+		onClose?: () => void;
+		onSave?: (values: ConfigValues) => void;
+		onCancel?: () => void;
 	}
 
-	let props: Props = $props();
+	let { onClose, onSave, onCancel, ...props }: Props = $props();
 	let localConfigValues = $derived.by(() => ({ ...props.configValues }));
 
-	const dispatch = createEventDispatcher<{
-		close: void;
-		save: { values: ConfigValues };
-		cancel: void;
-	}>();
-
 	function handleCancel() {
-		dispatch('cancel');
+		onCancel?.();
 	}
 
 	function handleClose() {
-		dispatch('close');
+		onClose?.();
 	}
 
 	// Close modal on escape key
@@ -77,7 +73,7 @@
 					values={localConfigValues}
 					showUIExtensions={false}
 					onSave={(config) => {
-						dispatch('save', { values: config });
+						onSave?.(config);
 					}}
 					onCancel={handleCancel}
 				/>

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

@@ -4,28 +4,10 @@ interface Props {
     nodeLabel: string;
     configSchema: ConfigSchema;
     configValues: ConfigValues;
+    onClose?: () => void;
+    onSave?: (values: ConfigValues) => void;
+    onCancel?: () => void;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ConfigModal: $$__sveltets_2_IsomorphicComponent<Props, {
-    close: CustomEvent<void>;
-    save: CustomEvent<{
-        values: ConfigValues;
-    }>;
-    cancel: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ConfigModal = InstanceType<typeof ConfigModal>;
+declare const ConfigModal: import("svelte").Component<Props, {}, "">;
+type ConfigModal = ReturnType<typeof ConfigModal>;
 export default ConfigModal;

package/dist/components/ConfigPanel.stories.svelte

@@ -1,38 +1,47 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import ConfigPanel from "./ConfigPanel.svelte";
-	import { fn } from "storybook/test";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ConfigPanel from './ConfigPanel.svelte';
+	import { fn } from 'storybook/test';
 
 	const { Story } = defineMeta({
-		title: "Editor/ConfigPanel",
+		title: 'Editor/ConfigPanel',
 		component: ConfigPanel,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		parameters: {
-			layout: "padded",
+			layout: 'padded'
 		},
 		args: {
-			onClose: fn(),
-		},
+			onClose: fn()
+		}
 	});
 </script>
 
-<Story name="Default" args={{
-	title: "HTTP Request",
-	id: "node-abc-123",
-	description: "Send HTTP requests to external APIs",
-	configTitle: "Configuration",
-}} />
+<Story
+	name="Default"
+	args={{
+		title: 'HTTP Request',
+		id: 'node-abc-123',
+		description: 'Send HTTP requests to external APIs',
+		configTitle: 'Configuration'
+	}}
+/>
 
-<Story name="With Details" args={{
-	title: "OpenAI Chat",
-	id: "node-def-456",
-	description: "Chat completion using OpenAI models",
-	details: [
-		{ label: "Category", value: "AI" },
-		{ label: "Version", value: "1.2.0" },
-	],
-}} />
+<Story
+	name="With Details"
+	args={{
+		title: 'OpenAI Chat',
+		id: 'node-def-456',
+		description: 'Chat completion using OpenAI models',
+		details: [
+			{ label: 'Category', value: 'AI' },
+			{ label: 'Version', value: '1.2.0' }
+		]
+	}}
+/>
 
-<Story name="Minimal" args={{
-	title: "Start Node",
-}} />
+<Story
+	name="Minimal"
+	args={{
+		title: 'Start Node'
+	}}
+/>

package/dist/components/ConfigPanel.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const ConfigPanel: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import ConfigPanel from "./ConfigPanel.svelte";
+import ConfigPanel from './ConfigPanel.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/LoadingSpinner.stories.svelte

@@ -1,30 +1,30 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import LoadingSpinner from "./LoadingSpinner.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import LoadingSpinner from './LoadingSpinner.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/LoadingSpinner",
+		title: 'Display/LoadingSpinner',
 		component: LoadingSpinner,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
 			size: {
-				control: { type: "select" },
-				options: ["xs", "sm", "md", "lg"],
+				control: { type: 'select' },
+				options: ['xs', 'sm', 'md', 'lg']
 			},
-			text: { control: "text" },
-			showText: { control: "boolean" },
-		},
+			text: { control: 'text' },
+			showText: { control: 'boolean' }
+		}
 	});
 </script>
 
 <Story name="Default" />
 
-<Story name="Extra Small" args={{ size: "xs" }} />
+<Story name="Extra Small" args={{ size: 'xs' }} />
 
-<Story name="Small" args={{ size: "sm" }} />
+<Story name="Small" args={{ size: 'sm' }} />
 
-<Story name="Large" args={{ size: "lg" }} />
+<Story name="Large" args={{ size: 'lg' }} />
 
-<Story name="Custom Text" args={{ text: "Processing..." }} />
+<Story name="Custom Text" args={{ text: 'Processing...' }} />
 
 <Story name="No Text" args={{ showText: false }} />

package/dist/components/LoadingSpinner.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const LoadingSpinner: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import LoadingSpinner from "./LoadingSpinner.svelte";
+import LoadingSpinner from './LoadingSpinner.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/Logo.stories.svelte

@@ -1,11 +1,11 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import Logo from "./Logo.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Logo from './Logo.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/Logo",
+		title: 'Display/Logo',
 		component: Logo,
-		tags: ["autodocs"],
+		tags: ['autodocs']
 	});
 </script>
 

package/dist/components/Logo.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const Logo: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Logo from "./Logo.svelte";
+import Logo from './Logo.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/LogsSidebar.svelte

@@ -7,11 +7,8 @@
 
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	import { createEventDispatcher } from 'svelte';
 	import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
 
-	const dispatch = createEventDispatcher();
-
 	interface LogEntry {
 		timestamp: string;
 		level: string;
@@ -24,19 +21,19 @@
 		logs: LogEntry[];
 		selectedNode?: WorkflowNodeType | null;
 		onClose?: () => void;
+		onClear?: () => void;
 	}
 
 	let props: Props = $props();
 
+	let sidebarRef: HTMLElement | undefined = $state();
+
 	// Focus management and body scroll control
 	$effect(() => {
 		if (props.isOpen) {
 			// Focus management - focus the sidebar when it opens
 			setTimeout(() => {
-				const sidebar = document.querySelector('.logs-sidebar--open');
-				if (sidebar) {
-					(sidebar as HTMLElement).focus();
-				}
+				sidebarRef?.focus();
 			}, 100);
 
 			// Prevent body scroll
@@ -52,7 +49,6 @@
 	 */
 	function handleClose(): void {
 		props.onClose?.();
-		dispatch('close');
 	}
 
 	/**
@@ -129,7 +125,7 @@
 	 * Clear logs
 	 */
 	function clearLogs(): void {
-		dispatch('clear');
+		props.onClear?.();
 	}
 
 	/**
@@ -163,6 +159,7 @@
 
 <!-- Sidebar -->
 <div
+	bind:this={sidebarRef}
 	class="logs-sidebar"
 	class:logs-sidebar--open={props.isOpen}
 	role="dialog"

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

@@ -10,25 +10,8 @@ interface Props {
     logs: LogEntry[];
     selectedNode?: WorkflowNodeType | null;
     onClose?: () => void;
+    onClear?: () => void;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const LogsSidebar: $$__sveltets_2_IsomorphicComponent<Props, {
-    close: CustomEvent<any>;
-    clear: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type LogsSidebar = InstanceType<typeof LogsSidebar>;
+declare const LogsSidebar: import("svelte").Component<Props, {}, "">;
+type LogsSidebar = ReturnType<typeof LogsSidebar>;
 export default LogsSidebar;

package/dist/components/MarkdownDisplay.stories.svelte

@@ -1,21 +1,36 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import MarkdownDisplay from "./MarkdownDisplay.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import MarkdownDisplay from './MarkdownDisplay.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/MarkdownDisplay",
+		title: 'Display/MarkdownDisplay',
 		component: MarkdownDisplay,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
-			content: { control: "text" },
-		},
+			content: { control: 'text' }
+		}
 	});
 </script>
 
-<Story name="Simple" args={{ content: "Hello **world**! This is *italic* and `inline code`." }} />
+<Story name="Simple" args={{ content: 'Hello **world**! This is *italic* and `inline code`.' }} />
 
-<Story name="Headings" args={{ content: "# Heading 1\n## Heading 2\n### Heading 3\n\nParagraph text below headings." }} />
+<Story
+	name="Headings"
+	args={{ content: '# Heading 1\n## Heading 2\n### Heading 3\n\nParagraph text below headings.' }}
+/>
 
-<Story name="Code Block" args={{ content: "Here is a code example:\n\n```javascript\nconst greeting = \"Hello\";\nconsole.log(greeting);\n```\n\nAnd some text after." }} />
+<Story
+	name="Code Block"
+	args={{
+		content:
+			'Here is a code example:\n\n```javascript\nconst greeting = "Hello";\nconsole.log(greeting);\n```\n\nAnd some text after.'
+	}}
+/>
 
-<Story name="Full Document" args={{ content: "# Workflow Guide\n\n## Getting Started\n\nFollow these steps:\n\n1. Create a new workflow\n2. Add nodes from the sidebar\n3. Connect nodes with edges\n\n> **Tip:** Use keyboard shortcuts for faster editing.\n\n### Supported Node Types\n\n| Type | Description |\n|------|-------------|\n| Start | Entry point |\n| End | Exit point |\n| Tool | Processing step |\n\nFor more info, visit [the docs](https://example.com)." }} />
+<Story
+	name="Full Document"
+	args={{
+		content:
+			'# Workflow Guide\n\n## Getting Started\n\nFollow these steps:\n\n1. Create a new workflow\n2. Add nodes from the sidebar\n3. Connect nodes with edges\n\n> **Tip:** Use keyboard shortcuts for faster editing.\n\n### Supported Node Types\n\n| Type | Description |\n|------|-------------|\n| Start | Entry point |\n| End | Exit point |\n| Tool | Processing step |\n\nFor more info, visit [the docs](https://example.com).'
+	}}
+/>

package/dist/components/MarkdownDisplay.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const MarkdownDisplay: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import MarkdownDisplay from "./MarkdownDisplay.svelte";
+import MarkdownDisplay from './MarkdownDisplay.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;