@flowdrop/flowdrop 1.4.0 → 1.5.0

package/dist/stores/workflowStore.svelte.js

@@ -34,21 +34,23 @@ function buildMetadata(existing, updates) {
 /** Global workflow state */
 let workflowState = $state(null);
 // =========================================================================
-// Dirty State Tracking
+// Dirty State Tracking (Version Counter)
 // =========================================================================
 /**
- * State for tracking if there are unsaved changes
+ * Monotonic edit version — bumps on every mutation action.
  *
- * This is set to true whenever the workflow changes after initialization.
- * It can be reset to false by calling markAsSaved().
+ * Used for two purposes:
+ * 1. O(1) dirty detection: isDirty = _editVersion !== _savedVersion
+ * 2. Save verification protocol: include the version in the save request,
+ *    backend echoes it back. If the echoed version doesn't match, the save
+ *    didn't persist the version the client submitted.
  */
-let isDirtyState = $state(false);
+let _editVersion = $state(0);
 /**
- * Snapshot of the workflow when it was last saved
- *
- * Used to compare current state with saved state.
+ * Edit version captured at the last successful save.
+ * When _editVersion === _savedVersion, the workflow is clean.
  */
-let savedSnapshot = null;
+let _savedVersion = $state(0);
 /**
  * Callback for dirty state changes
  *
@@ -87,10 +89,14 @@ export function getWorkflowStore() {
 /**
  * Get the current dirty state reactively
  *
+ * Reads both _editVersion and _savedVersion, so Svelte tracks them
+ * as reactive dependencies — any component using this will re-render
+ * when dirty state changes.
+ *
  * @returns true if there are unsaved changes
  */
 export function getIsDirty() {
-    return isDirtyState;
+    return _editVersion !== _savedVersion;
 }
 /**
  * Get the workflow ID reactively
@@ -239,53 +245,21 @@ export function setOnWorkflowChange(callback) {
 // Internal Helpers
 // =========================================================================
 /**
- * Create a snapshot of the workflow for comparison
- *
- * @param workflow - The workflow to snapshot
- * @returns A JSON string representation for comparison
- */
-function createSnapshot(workflow) {
-    if (!workflow)
-        return null;
-    // Only include the parts that matter for "dirty" detection
-    const toSnapshot = {
-        name: workflow.name,
-        description: workflow.description,
-        nodes: workflow.nodes.map((n) => ({
-            id: n.id,
-            position: n.position,
-            data: {
-                label: n.data.label,
-                config: n.data.config,
-            },
-        })),
-        edges: workflow.edges.map((e) => ({
-            id: e.id,
-            source: e.source,
-            target: e.target,
-            sourceHandle: e.sourceHandle,
-            targetHandle: e.targetHandle,
-        })),
-    };
-    return JSON.stringify(toSnapshot);
-}
-/**
- * Update dirty state based on current workflow
- *
- * Compares current workflow with saved snapshot.
+ * Bump the edit version and notify dirty state change if needed.
+ * Called by every mutation action.
  */
-function updateDirtyState() {
-    const currentSnapshot = createSnapshot(workflowState);
-    const newIsDirty = currentSnapshot !== savedSnapshot;
-    if (newIsDirty !== isDirtyState) {
-        isDirtyState = newIsDirty;
+function bumpVersion() {
+    _editVersion++;
+    // Dirty state just flipped from clean → dirty
+    if (_editVersion - 1 === _savedVersion) {
         if (onDirtyStateChangeCallback) {
-            onDirtyStateChangeCallback(newIsDirty);
+            onDirtyStateChangeCallback(true);
         }
     }
 }
 /**
- * Mark the workflow change and update dirty state
+ * Notify external listeners of a workflow change.
+ * Does NOT bump the version — callers that mutate must call bumpVersion() explicitly.
  *
  * @param changeType - The type of change that occurred
  */
@@ -293,17 +267,17 @@ function notifyWorkflowChange(changeType) {
     if (workflowState && onWorkflowChangeCallback) {
         onWorkflowChangeCallback(workflowState, changeType);
     }
-    updateDirtyState();
 }
 /**
- * Mark the current workflow state as saved
+ * Mark the current workflow state as saved.
  *
- * Clears the dirty state by updating the saved snapshot.
+ * Captures the current edit version so isDirty becomes false.
+ * Call this after a successful backend save.
  */
 export function markAsSaved() {
-    savedSnapshot = createSnapshot(workflowState);
-    isDirtyState = false;
-    if (onDirtyStateChangeCallback) {
+    const wasDirty = _editVersion !== _savedVersion;
+    _savedVersion = _editVersion;
+    if (wasDirty && onDirtyStateChangeCallback) {
         onDirtyStateChangeCallback(false);
     }
 }
@@ -313,7 +287,22 @@ export function markAsSaved() {
  * @returns true if there are unsaved changes
  */
 export function isDirty() {
-    return isDirtyState;
+    return _editVersion !== _savedVersion;
+}
+/**
+ * Get the current edit version.
+ *
+ * Use this for the save verification protocol:
+ * 1. Before save: `const v = getEditVersion()`
+ * 2. Include `v` in the save request payload
+ * 3. Backend echoes `v` in the response
+ * 4. If echoed version matches: `markAsSaved()`
+ * 5. If not: the save didn't persist the version you submitted — reset from backend response
+ *
+ * @returns The current monotonic edit version
+ */
+export function getEditVersion() {
+    return _editVersion;
 }
 /**
  * Enable or disable history recording
@@ -390,7 +379,7 @@ function hasWorkflowDataChanged(currentWorkflow, newNodes, newEdges) {
         if (currentNode.position.x !== newNode.position.x ||
             currentNode.position.y !== newNode.position.y)
             return true;
-        if (JSON.stringify(currentNode.data) !== JSON.stringify(newNode.data))
+        if (currentNode.data !== newNode.data)
             return true;
     }
     // Check if edges have changed
@@ -426,9 +415,9 @@ export const workflowActions = {
      */
     initialize: (workflow) => {
         workflowState = workflow;
-        // Set the saved snapshot - workflow is "clean" after initialization
-        savedSnapshot = createSnapshot(workflow);
-        isDirtyState = false;
+        // Reset version counters — workflow is "clean" after initialization
+        _editVersion = 0;
+        _savedVersion = 0;
         if (onDirtyStateChangeCallback) {
             onDirtyStateChangeCallback(false);
         }
@@ -443,6 +432,7 @@ export const workflowActions = {
      */
     updateWorkflow: (workflow) => {
         workflowState = workflow;
+        bumpVersion();
         notifyWorkflowChange("metadata");
     },
     /**
@@ -453,6 +443,7 @@ export const workflowActions = {
     restoreFromHistory: (workflow) => {
         isRestoringFromHistory = true;
         workflowState = workflow;
+        bumpVersion();
         notifyWorkflowChange("metadata");
         isRestoringFromHistory = false;
     },
@@ -476,6 +467,7 @@ export const workflowActions = {
                 updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1,
             }),
         };
+        bumpVersion();
         notifyWorkflowChange("node_move");
     },
     /**
@@ -498,6 +490,7 @@ export const workflowActions = {
                 updateNumber: (workflowState.metadata?.updateNumber ?? 0) + 1,
             }),
         };
+        bumpVersion();
         notifyWorkflowChange("edge_add");
     },
     /**
@@ -511,6 +504,7 @@ export const workflowActions = {
             name,
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("name");
     },
     /**
@@ -525,6 +519,7 @@ export const workflowActions = {
             nodes: [...workflowState.nodes, node],
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("node_add");
     },
     /**
@@ -543,6 +538,7 @@ export const workflowActions = {
             edges: workflowState.edges.filter((edge) => edge.source !== nodeId && edge.target !== nodeId),
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("node_remove");
     },
     /**
@@ -557,6 +553,7 @@ export const workflowActions = {
             edges: [...workflowState.edges, edge],
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("edge_add");
     },
     /**
@@ -571,6 +568,7 @@ export const workflowActions = {
             edges: workflowState.edges.filter((edge) => edge.id !== edgeId),
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("edge_remove");
     },
     /**
@@ -587,6 +585,7 @@ export const workflowActions = {
             nodes: workflowState.nodes.map((node) => node.id === nodeId ? { ...node, ...updates } : node),
             metadata: buildMetadata(workflowState.metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("node_config");
     },
     /**
@@ -596,8 +595,8 @@ export const workflowActions = {
      */
     clear: () => {
         workflowState = null;
-        savedSnapshot = null;
-        isDirtyState = false;
+        _editVersion = 0;
+        _savedVersion = 0;
         historyService.clear();
         if (onDirtyStateChangeCallback) {
             onDirtyStateChangeCallback(false);
@@ -613,6 +612,7 @@ export const workflowActions = {
             ...workflowState,
             metadata: buildMetadata(workflowState.metadata, metadata),
         };
+        bumpVersion();
         notifyWorkflowChange("metadata");
     },
     /**
@@ -635,8 +635,28 @@ export const workflowActions = {
             }),
             metadata: buildMetadata(workflowState.metadata, updates.metadata ?? undefined),
         };
+        bumpVersion();
         notifyWorkflowChange("metadata");
     },
+    /**
+     * Swap a node — atomically replaces nodes and edges with a descriptive history entry.
+     *
+     * Unlike batchUpdate, this uses `"node_swap"` as the change type and
+     * records a meaningful description for the undo history.
+     */
+    swapNode: (updates) => {
+        pushToHistory(updates.description ?? "Swap node");
+        if (!workflowState)
+            return;
+        workflowState = {
+            ...workflowState,
+            nodes: updates.nodes,
+            edges: updates.edges,
+            metadata: buildMetadata(workflowState.metadata),
+        };
+        bumpVersion();
+        notifyWorkflowChange("node_swap");
+    },
     /**
      * Push current state to history manually
      *

package/dist/types/chat.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Chat Types for FlowDrop LLM Chat Interface
+ *
+ * Provides type definitions for the chat panel's communication
+ * with backend LLM integrations.
+ *
+ * @module types/chat
+ */
+/**
+ * Role for chat history messages
+ */
+export type ChatMessageRole = "user" | "assistant";
+/**
+ * A single message in the chat history
+ */
+export interface ChatHistoryMessage {
+    role: ChatMessageRole;
+    content: string;
+}
+/**
+ * Request payload sent to the chat endpoint
+ */
+export interface ChatRequest {
+    /** The user's natural language message */
+    message: string;
+    /** Serialized current workflow state (nodes + edges) */
+    workflowState: unknown;
+    /** Optional conversation history for context */
+    history?: ChatHistoryMessage[];
+}
+/**
+ * Response payload from the chat endpoint
+ */
+export interface ChatResponse {
+    /** The LLM's response content (may contain markdown and code blocks) */
+    content: string;
+    /** Optional conversation ID for backend session tracking */
+    conversationId?: string;
+}
+/**
+ * Result of parsing an LLM response to extract DSL commands
+ */
+export interface ExtractedCommands {
+    /** The full explanation text (content outside code blocks) */
+    explanation: string;
+    /** Extracted DSL command strings */
+    commands: string[];
+}
+/**
+ * Status of a single command in the preview
+ */
+export type CommandExecutionStatus = "pending" | "executing" | "success" | "error";
+/**
+ * A single command shown in the command preview UI
+ */
+export interface CommandPreviewItem {
+    /** The raw DSL command string */
+    raw: string;
+    /** Current execution status */
+    status: CommandExecutionStatus;
+    /** Optional result or error message after execution */
+    result?: string;
+}

package/dist/types/chat.js

@@ -0,0 +1,9 @@
+/**
+ * Chat Types for FlowDrop LLM Chat Interface
+ *
+ * Provides type definitions for the chat panel's communication
+ * with backend LLM integrations.
+ *
+ * @module types/chat
+ */
+export {};

package/dist/types/events.d.ts

@@ -6,13 +6,14 @@
  *
  * @module types/events
  */
-import type { Workflow, NodeExecutionInfo } from "./index.js";
+import type { Workflow, NodeExecutionInfo, WorkflowNode } from "./index.js";
+import type { SwapEventContext, SwapResult } from "../utils/nodeSwap.js";
 /**
  * Types of workflow changes
  *
  * Used to identify what kind of change triggered the onWorkflowChange event.
  */
-export type WorkflowChangeType = "node_add" | "node_remove" | "node_move" | "node_config" | "edge_add" | "edge_remove" | "metadata" | "name" | "description";
+export type WorkflowChangeType = "node_add" | "node_remove" | "node_move" | "node_config" | "node_swap" | "edge_add" | "edge_remove" | "metadata" | "name" | "description";
 /**
  * High-level event handlers for enterprise integration
  *
@@ -113,6 +114,22 @@ export interface FlowDropEventHandlers {
      * @returns true to suppress default error handling, false/void to show default toast
      */
     onApiError?: (error: Error, operation: string) => boolean | void;
+    /**
+     * Called before a node swap is executed.
+     * Return false to cancel the swap.
+     *
+     * @param context - Data-only swap context (oldNode, newMetadata, preview, overrides)
+     * @returns false to cancel, true/void to proceed
+     */
+    onBeforeSwap?: (context: SwapEventContext) => boolean | void | Promise<boolean | void>;
+    /**
+     * Called after a node swap is successfully executed.
+     *
+     * @param result - The swap result with updated nodes/edges
+     * @param oldNode - The node that was replaced
+     * @param newNodeId - The ID of the newly created node
+     */
+    onAfterSwap?: (result: SwapResult, oldNode: WorkflowNode, newNodeId: string) => void;
     /**
      * Called when an Agent Spec execution starts
      *
@@ -174,6 +191,15 @@ export interface FlowDropFeatures {
      * @default true
      */
     showToasts?: boolean;
+    /**
+     * Enable node swap functionality
+     *
+     * When enabled, users can swap a node for a different type
+     * while preserving compatible connections and configuration.
+     *
+     * @default true
+     */
+    enableNodeSwap?: boolean;
 }
 /**
  * Default feature values

package/dist/types/events.js

@@ -15,6 +15,7 @@ export const DEFAULT_FEATURES = {
     autoSaveDraft: true,
     autoSaveDraftInterval: 30000,
     showToasts: true,
+    enableNodeSwap: true,
 };
 /**
  * Merge user-provided features with defaults

package/dist/types/index.d.ts

@@ -535,6 +535,14 @@ export interface NodeExtensions {
      * Allows overriding the node type's configEdit settings for specific instances
      */
     configEdit?: ConfigEditOptions;
+    /**
+     * Set when this node was created by swapping another node.
+     * Stores the immediate predecessor only — not a full chain.
+     * Sequential swaps (A→B→C) each store only their direct predecessor.
+     */
+    swap?: {
+        previousNodeId: string;
+    };
     /**
      * Namespaced extension data from 3rd party integrations
      * Use your package/organization name as the key (e.g., "myapp", "acme:analyzer")

package/dist/types/settings.d.ts

@@ -57,6 +57,12 @@ export interface UISettings {
     compactMode: boolean;
     /** Active theme name — overridden by the theme prop when explicitly provided */
     theme: "default" | "minimal";
+    /** Whether the command console panel is open */
+    consoleOpen: boolean;
+    /** Height of the command console panel in pixels */
+    consoleHeight: number;
+    /** Active tab in the bottom panel */
+    bottomPanelTab: "console" | "chat";
 }
 /**
  * Application behavior and automation settings

package/dist/types/settings.js

@@ -66,6 +66,9 @@ export const DEFAULT_UI_SETTINGS = {
     sidebarCollapsed: false,
     compactMode: false,
     theme: "default",
+    consoleOpen: false,
+    consoleHeight: 300,
+    bottomPanelTab: "console",
 };
 /**
  * Default behavior settings

package/dist/utils/edgeStyling.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Edge Styling Utility
+ *
+ * Standalone functions for determining edge categories and applying
+ * visual styling to workflow edges based on source port data types.
+ * Used by both the visual editor and the command DSL system.
+ */
+import type { WorkflowNode as WorkflowNodeType, WorkflowEdge, EdgeCategory } from "../types/index.js";
+/**
+ * Check if a port ID matches a dynamic branch in a Gateway node.
+ * Gateway nodes store branches in config.branches array.
+ */
+export declare function isGatewayBranch(node: WorkflowNodeType, portId: string): boolean;
+/**
+ * Get the data type of a port from a node's metadata.
+ * Also handles dynamic ports like Gateway branches.
+ */
+export declare function getPortDataType(node: WorkflowNodeType, portId: string, portType: "input" | "output"): string | null;
+/**
+ * Determine the edge category based on source port data type.
+ * Note: This does not check for loopback edges — use getEdgeCategoryWithLoopback() for that.
+ */
+export declare function getEdgeCategory(sourcePortDataType: string | null): EdgeCategory;
+/**
+ * Determine the full edge category including loopback detection.
+ * Loopback edges take precedence over source port data type.
+ */
+export declare function getEdgeCategoryWithLoopback(edge: WorkflowEdge, sourcePortDataType: string | null): EdgeCategory;
+/**
+ * Apply custom styling to a connection edge based on its source/target nodes.
+ *
+ * Sets:
+ * - edge.data.metadata.edgeType (trigger/tool/loopback/data)
+ * - edge.style, edge.class, edge.markerEnd based on category
+ * - edge.data.targetNodeType and edge.data.targetCategory
+ */
+export declare function applyConnectionStyling(edge: WorkflowEdge, sourceNode: WorkflowNodeType, targetNode: WorkflowNodeType): void;
+/**
+ * Update existing edges with custom styling rules.
+ * Batch operation that applies styling to all edges using a node map for O(1) lookup.
+ */
+export declare function updateEdgeStyles(edges: WorkflowEdge[], nodes: WorkflowNodeType[]): WorkflowEdge[];