@flowdrop/flowdrop 1.3.0 → 1.5.0

package/dist/components/App.svelte

@@ -5,12 +5,18 @@
 -->
 
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
   import MainLayout from "./layouts/MainLayout.svelte";
   import WorkflowEditor from "./WorkflowEditor.svelte";
   import NodeSidebar from "./NodeSidebar.svelte";
+  import Icon from "@iconify/svelte";
   import ConfigForm from "./ConfigForm.svelte";
   import ConfigPanel from "./ConfigPanel.svelte";
+  import CommandConsole from "./console/CommandConsole.svelte";
+  import AIChatPanel from "./chat/AIChatPanel.svelte";
+  import type { UIAction } from "../commands/index.js";
+  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";
@@ -21,6 +27,14 @@
     ConfigSchema,
     NodeUIExtensions,
   } from "../types/index.js";
+  import type { InteractiveSwapState, SwapEventContext } from "../utils/nodeSwap.js";
+  import {
+    computeInteractiveState,
+    buildSwapPreviewFromState,
+    executeSwap,
+    validateSwapResult,
+  } from "../utils/nodeSwap.js";
+  import type { SwapStrategy } from "../utils/nodeSwap.js";
   import { DEFAULT_WORKFLOW_FORMAT } from "../types/index.js";
   import { createEndpointConfig } from "../config/endpoints.js";
   import type { EndpointConfig } from "../config/endpoints.js";
@@ -46,12 +60,16 @@
   } from "../services/globalSave.js";
   import { apiToasts, dismissToast } from "../services/toastService.js";
   import { initAutoSave } from "../services/autoSaveService.js";
-  import { getUiSettings } from "../stores/settingsStore.svelte.js";
-  import { initializePortCompatibility } from "../utils/connections.js";
+  import {
+    getUiSettings,
+    updateSettings,
+  } from "../stores/settingsStore.svelte.js";
+  import { initializePortCompatibility, getPortCompatibilityChecker } from "../utils/connections.js";
   import { DEFAULT_PORT_CONFIG } from "../config/defaultPortConfig.js";
   import { workflowFormatRegistry } from "../registry/workflowFormatRegistry.js";
   import { logger } from "../utils/logger.js";
   import { validateWorkflowData } from "../utils/validation.js";
+  import type { SettingsCategory } from "../types/settings.js";
 
   /**
    * Configuration props for runtime customization
@@ -104,6 +122,14 @@
     features?: FlowDropFeatures;
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
     theme?: FlowDropTheme | FlowDropThemeName;
+    /** Which settings tabs to show in the modal */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
+    /** Pluggable swap strategies — instance-scoped, checked in order */
+    swapStrategies?: SwapStrategy[];
   }
 
   let {
@@ -126,6 +152,10 @@
     eventHandlers,
     features: propFeatures,
     theme: themeProp,
+    settingsCategories,
+    showSettingsSyncButton,
+    showSettingsResetButton,
+    swapStrategies,
   }: Props = $props();
 
   // svelte-ignore state_referenced_locally — feature flags don't change at runtime
@@ -166,7 +196,7 @@
   });
 
   // Create breadcrumb-style title - at top level to avoid store subscription issues
-  let breadcrumbTitle = $derived(() => {
+  let breadcrumbTitle = $derived.by(() => {
     // Use custom navbar title if provided
     if (navbarTitle) {
       return navbarTitle;
@@ -199,6 +229,11 @@
   // Workflow settings sidebar state
   let isWorkflowSettingsOpen = $state(false);
 
+  // Node swap state
+  let swapMode = $state<"idle" | "picking" | "mapping">("idle");
+  let swapTargetMetadata = $state<NodeMetadata | null>(null);
+  let swapInteractiveState = $state<InteractiveSwapState | null>(null);
+
   // Workflow configuration schema (derived to pick up dynamic format options)
   let workflowConfigSchema: ConfigSchema = $derived({
     type: "object" as const,
@@ -235,7 +270,7 @@
   });
 
   // Get the current node from the workflow store
-  let selectedNodeForConfig = $derived(() => {
+  let selectedNodeForConfig = $derived.by(() => {
     const wf = getWorkflowStore();
     if (!selectedNodeId || !wf) return null;
     return wf.nodes.find((node) => node.id === selectedNodeId) || null;
@@ -430,11 +465,19 @@
     }
     selectedNodeId = node.id;
     isConfigSidebarOpen = true;
+    // Reset swap state when switching nodes
+    swapMode = "idle";
+    swapTargetMetadata = null;
+    swapInteractiveState = null;
   }
 
   function closeConfigSidebar(): void {
     isConfigSidebarOpen = false;
     selectedNodeId = null;
+    // Reset swap state when closing
+    swapMode = "idle";
+    swapTargetMetadata = null;
+    swapInteractiveState = null;
   }
 
   /**
@@ -448,6 +491,144 @@
     }
   }
 
+  /**
+   * Start swap mode — transitions the right sidebar to the node picker
+   */
+  function startSwap(): void {
+    swapMode = "picking";
+    swapTargetMetadata = null;
+    swapInteractiveState = null;
+  }
+
+  /**
+   * Handle selection of a target node type for swap
+   */
+  function handleSwapSelect(metadata: NodeMetadata): void {
+    const node = selectedNodeForConfig;
+    if (!node) return;
+
+    const wf = getWorkflowStore();
+    if (!wf) return;
+
+    // Format compatibility guard — defence-in-depth behind picker's own filter
+    const currentFormat = getWorkflowFormat();
+    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
+    }
+
+    const interactive = computeInteractiveState(
+      node,
+      metadata,
+      wf.edges,
+      wf.nodes,
+      { checker, strategies: swapStrategies },
+    );
+
+    swapTargetMetadata = metadata;
+    swapInteractiveState = interactive;
+    swapMode = "mapping";
+  }
+
+  /**
+   * Execute the confirmed node swap
+   */
+  async function executeNodeSwap(finalState?: InteractiveSwapState): Promise<void> {
+    const state = finalState ?? swapInteractiveState;
+    if (!state) return;
+
+    const wf = getWorkflowStore();
+    if (!wf) return;
+
+    const oldLabel = state.oldNode.data.label;
+    const newLabel = state.newMetadata.name;
+
+    // Convert interactive state to swap preview
+    const preview = buildSwapPreviewFromState(state, wf.edges);
+
+    // Execute the swap
+    const result = executeSwap(
+      state.oldNode,
+      state.newMetadata,
+      preview,
+      wf.nodes,
+      wf.edges,
+    );
+
+    // Post-swap validation
+    const validation = validateSwapResult(result);
+    if (!validation.valid) {
+      logger.error("Swap validation failed:", validation.error);
+      return;
+    }
+
+    // onBeforeSwap hook — abort if returns false
+    if (eventHandlers?.onBeforeSwap) {
+      const swapEventCtx: SwapEventContext = {
+        oldNode: state.oldNode,
+        newMetadata: state.newMetadata,
+        preview,
+        portOverrides: [],
+        configOverrides: [],
+      };
+      const shouldProceed = await eventHandlers.onBeforeSwap(swapEventCtx);
+      if (shouldProceed === false) return;
+    }
+
+    // Apply as a single atomic swap with descriptive history entry
+    workflowActions.swapNode({
+      nodes: result.updatedNodes,
+      edges: result.updatedEdges,
+      description: `Swap node: ${oldLabel} → ${newLabel}`,
+    });
+
+    // onAfterSwap hook (fire-and-forget — swap is already applied)
+    if (eventHandlers?.onAfterSwap) {
+      try {
+        eventHandlers.onAfterSwap(result, state.oldNode, state.newNodeId);
+      } catch (err) {
+        logger.error("onAfterSwap hook error:", err);
+      }
+    }
+
+    // Select the new node in the sidebar
+    const newNodeId = state.newNodeId;
+    selectedNodeId = newNodeId;
+
+    // Reset swap state
+    swapMode = "idle";
+    swapTargetMetadata = null;
+    swapInteractiveState = null;
+
+    // Wait for SvelteFlow to process the new node before updating visual state
+    await tick();
+
+    // Refresh the editor visual state
+    if (workflowEditorRef) {
+      const newNode = result.updatedNodes.find((n) => n.id === newNodeId);
+      if (newNode) {
+        workflowEditorRef.updateNodeData(newNodeId, newNode.data);
+        await workflowEditorRef.refreshEdgePositions(newNodeId);
+      }
+    }
+  }
+
+  /**
+   * Cancel swap and return to normal config view
+   */
+  function cancelSwap(): void {
+    swapMode = "idle";
+    swapTargetMetadata = null;
+    swapInteractiveState = null;
+  }
+
   /**
    * Handle workflow configuration save
    */
@@ -661,22 +842,102 @@
    * Config panel always appears on the right side
    */
   const hasConfigPanelOpen = $derived(
-    isWorkflowSettingsOpen || !!selectedNodeForConfig(),
+    isWorkflowSettingsOpen ||
+      !!selectedNodeForConfig ||
+      swapMode !== "idle",
   );
   const showRightPanel = $derived(!disableSidebar && hasConfigPanelOpen);
 
   /**
    * Calculate left sidebar width based on collapsed state
-   * When collapsed, use 48px; otherwise use user-configured width
+   * When collapsed, use 0; otherwise use user-configured width
    */
   const leftSidebarWidth = $derived(
-    getUiSettings().sidebarCollapsed ? 48 : getUiSettings().sidebarWidth,
+    getUiSettings().sidebarCollapsed ? 0 : getUiSettings().sidebarWidth,
   );
 
+  /** Whether the sidebar is collapsed */
+  const isSidebarCollapsed = $derived(getUiSettings().sidebarCollapsed);
+
+  /** Toggle sidebar collapsed state */
+  function toggleSidebar(): void {
+    updateSettings({
+      ui: { sidebarCollapsed: !getUiSettings().sidebarCollapsed },
+    });
+  }
+
   // File input reference for workflow import
   let fileInputRef = $state<HTMLInputElement | null>(null);
+
+  /**
+   * Handle global keyboard shortcut for console toggle.
+   * Backtick (`) toggles the console open/closed unless user is typing in an input.
+   */
+  function handleGlobalKeydown(event: KeyboardEvent): void {
+    // Dead key on international keyboards — do not intercept
+    if (event.key === "Dead") return;
+
+    if (event.key !== "`") return;
+
+    // Don't intercept when user is typing in an input, textarea, or contenteditable
+    const target = event.target as HTMLElement;
+    const isInputElement =
+      target.tagName === "INPUT" ||
+      target.tagName === "TEXTAREA" ||
+      target.isContentEditable;
+
+    if (isInputElement) return;
+
+    event.preventDefault();
+    toggleConsole();
+  }
+
+  function handleConsoleUIAction(action: UIAction): void {
+    if (action.type === "open_config") {
+      const wf = getWorkflowStore();
+      if (!wf) return;
+      const node = wf.nodes.find((n) => n.id === action.nodeId);
+      if (node) openConfigSidebar(node);
+    } else if (action.type === "select_node") {
+      selectedNodeId = action.nodeId;
+    } else if (action.type === "canvas_fit_view") {
+      workflowEditorRef?.canvasFitView();
+    } else if (action.type === "canvas_zoom_in") {
+      workflowEditorRef?.canvasZoomIn();
+    } else if (action.type === "canvas_zoom_out") {
+      workflowEditorRef?.canvasZoomOut();
+    } else if (action.type === "canvas_zoom_to") {
+      workflowEditorRef?.canvasZoomTo(action.level);
+    } else if (action.type === "canvas_pan_to") {
+      workflowEditorRef?.canvasPanTo(action.position.x, action.position.y);
+    } else if (action.type === "canvas_reset_view") {
+      workflowEditorRef?.canvasResetView();
+    }
+  }
+
+  function toggleConsole(): void {
+    const currentOpen = getUiSettings().consoleOpen;
+    updateSettings({ ui: { consoleOpen: !currentOpen } });
+
+    // Focus management after DOM update
+    tick().then(() => {
+      if (currentOpen) {
+        // Console was open, now closing — focus the canvas
+        const canvas = document.querySelector<HTMLElement>(".flowdrop-editor-main");
+        canvas?.focus();
+      } else {
+        // Console was closed, now opening — focus first focusable element inside console
+        const consoleEl = document.querySelector<HTMLElement>(".command-console");
+        const focusTarget =
+          consoleEl?.querySelector<HTMLElement>("input, button, [tabindex]");
+        focusTarget?.focus();
+      }
+    });
+  }
 </script>
 
+<svelte:window onkeydown={handleGlobalKeydown} />
+
 <svelte:head>
   <title>FlowDrop - Visual Workflow Manager</title>
   <meta
@@ -700,13 +961,14 @@
     showHeader={showNavbar}
     showLeftSidebar={!disableSidebar}
     showRightSidebar={showRightPanel}
-    showBottomPanel={false}
+    showBottomPanel={getUiSettings().consoleOpen && !readOnly && !lockWorkflow}
+    bottomPanelHeight={getUiSettings().consoleHeight}
     showFooter={false}
     headerHeight={60}
     {leftSidebarWidth}
     rightSidebarWidth={400}
-    leftSidebarMinWidth={getUiSettings().sidebarCollapsed ? 48 : 280}
-    leftSidebarMaxWidth={getUiSettings().sidebarCollapsed ? 48 : 450}
+    leftSidebarMinWidth={getUiSettings().sidebarCollapsed ? 0 : 280}
+    leftSidebarMaxWidth={getUiSettings().sidebarCollapsed ? 0 : 450}
     rightSidebarMinWidth={320}
     rightSidebarMaxWidth={550}
     enableLeftSplitPane={false}
@@ -716,7 +978,7 @@
     <!-- Header: Navbar -->
     {#snippet header()}
       <Navbar
-        title={breadcrumbTitle()}
+        title={breadcrumbTitle}
         primaryActions={navbarActions.length > 0
           ? navbarActions
           : [
@@ -763,6 +1025,9 @@
             ]}
         showStatus={true}
         {showSettings}
+        {settingsCategories}
+        {showSettingsSyncButton}
+        {showSettingsResetButton}
       />
     {/snippet}
 
@@ -777,9 +1042,26 @@
       />
     {/snippet}
 
-    <!-- Right Sidebar: Configuration or Workflow Settings -->
+    <!-- Right Sidebar: Configuration, Swap, or Workflow Settings -->
     {#snippet rightSidebar()}
-      {#if isWorkflowSettingsOpen}
+      {#if swapMode === "mapping" && swapInteractiveState && selectedNodeForConfig}
+        {@const swapChecker = (() => { try { return getPortCompatibilityChecker(); } catch { return null; } })()}
+        <SwapMappingEditor
+          interactiveState={swapInteractiveState}
+          checker={swapChecker}
+          onConfirm={executeNodeSwap}
+          onCancel={cancelSwap}
+          onBack={() => { swapMode = "picking"; swapInteractiveState = null; }}
+        />
+      {:else if swapMode === "picking" && selectedNodeForConfig}
+        <NodeSwapPicker
+          currentNode={selectedNodeForConfig}
+          availableNodes={nodes}
+          activeFormat={getWorkflowFormat()}
+          onSelect={handleSwapSelect}
+          onCancel={cancelSwap}
+        />
+      {:else if isWorkflowSettingsOpen}
         <ConfigPanel
           title="Workflow Settings"
           id={getWorkflowStore()?.id}
@@ -840,8 +1122,8 @@
             }}
           />
         </ConfigPanel>
-      {:else if selectedNodeForConfig()}
-        {@const currentNode = selectedNodeForConfig()!}
+      {:else if selectedNodeForConfig}
+        {@const currentNode = selectedNodeForConfig}
         <ConfigPanel
           title={currentNode.data.label}
           id={currentNode.id}
@@ -858,6 +1140,7 @@
             },
           ]}
           onClose={closeConfigSidebar}
+          onSwap={!readOnly && !lockWorkflow && features.enableNodeSwap ? startSwap : undefined}
         >
           <ConfigForm
             {authProvider}
@@ -902,6 +1185,34 @@
       {/if}
     {/snippet}
 
+    <!-- Bottom Panel: Tabbed Console / AI Chat -->
+    {#snippet bottomPanel()}
+      <div class="bottom-panel-tabs">
+        <div class="bottom-panel-tabs__bar">
+          <button
+            class="bottom-panel-tabs__tab {getUiSettings().bottomPanelTab === 'console' ? 'bottom-panel-tabs__tab--active' : ''}"
+            onclick={() => updateSettings({ ui: { bottomPanelTab: 'console' } })}
+          >
+            Console
+          </button>
+          <button
+            class="bottom-panel-tabs__tab {getUiSettings().bottomPanelTab === 'chat' ? 'bottom-panel-tabs__tab--active' : ''}"
+            onclick={() => updateSettings({ ui: { bottomPanelTab: 'chat' } })}
+          >
+            AI Chat
+          </button>
+        </div>
+        <div class="bottom-panel-tabs__content">
+          <div class="bottom-panel-tabs__panel" style:display={getUiSettings().bottomPanelTab === 'console' ? 'contents' : 'none'}>
+            <CommandConsole nodeTypes={nodes} onUIAction={handleConsoleUIAction} />
+          </div>
+          <div class="bottom-panel-tabs__panel" style:display={getUiSettings().bottomPanelTab === 'chat' ? 'flex' : 'none'}>
+            <AIChatPanel nodeTypes={nodes} workflowId={getWorkflowStore()?.id} onUIAction={handleConsoleUIAction} endpointConfig={endpointConfig} />
+          </div>
+        </div>
+      </div>
+    {/snippet}
+
     <!-- Main Content: Workflow Editor with Error Status -->
     <!-- Status Display: aria-live announces API errors dynamically without requiring focus -->
     {#if error}
@@ -974,6 +1285,20 @@
       role="region"
       aria-label="Workflow canvas"
     >
+      <!-- Floating sidebar toggle — always visible on the canvas top-left -->
+      {#if !disableSidebar}
+        <button
+          class="flowdrop-sidebar-fab"
+          onclick={toggleSidebar}
+          aria-label={isSidebarCollapsed
+            ? "Expand sidebar"
+            : "Collapse sidebar"}
+          title={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          <Icon icon={isSidebarCollapsed ? "mdi:menu" : "mdi:menu-open"} />
+        </button>
+      {/if}
+
       <WorkflowEditor
         bind:this={workflowEditorRef}
         {nodes}
@@ -981,13 +1306,15 @@
         {width}
         endpointConfig={endpointConfig ?? undefined}
         {isConfigSidebarOpen}
-        selectedNodeForConfig={selectedNodeForConfig()}
+        selectedNodeForConfig={selectedNodeForConfig}
         {openConfigSidebar}
         {closeConfigSidebar}
         {lockWorkflow}
         {readOnly}
         {nodeStatuses}
         {pipelineId}
+        consoleOpen={getUiSettings().consoleOpen}
+        onToggleConsole={toggleConsole}
       />
     </div>
   </MainLayout>
@@ -1098,6 +1425,40 @@
     font-weight: 500;
   }
 
+  /* Floating sidebar toggle button */
+  .flowdrop-sidebar-fab {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-md);
+    background-color: var(--fd-background);
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    box-shadow: var(--fd-shadow-md);
+    transition:
+      color var(--fd-transition-fast),
+      background-color var(--fd-transition-fast),
+      box-shadow var(--fd-transition-fast);
+  }
+
+  .flowdrop-sidebar-fab:hover {
+    color: var(--fd-foreground);
+    background-color: var(--fd-subtle);
+    box-shadow: var(--fd-shadow-lg);
+  }
+
+  .flowdrop-sidebar-fab:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--fd-ring);
+  }
+
   /* Main editor area */
   .flowdrop-editor-main {
     flex: 1;
@@ -1107,4 +1468,57 @@
     overflow: hidden;
     background: var(--fd-layout-background);
   }
+
+  /* Bottom panel tab system */
+  .bottom-panel-tabs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .bottom-panel-tabs__bar {
+    display: flex;
+    gap: 0;
+    background: var(--fd-muted);
+    border-bottom: 1px solid var(--fd-border);
+    flex-shrink: 0;
+  }
+
+  .bottom-panel-tabs__tab {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: transparent;
+    color: var(--fd-muted-foreground);
+    transition: all var(--fd-transition-fast);
+  }
+
+  .bottom-panel-tabs__tab:hover {
+    color: var(--fd-foreground);
+    background: var(--fd-background);
+  }
+
+  .bottom-panel-tabs__tab--active {
+    color: var(--fd-foreground);
+    border-bottom-color: var(--fd-primary);
+    background: var(--fd-background);
+  }
+
+  .bottom-panel-tabs__content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bottom-panel-tabs__panel {
+    flex: 1;
+    overflow: hidden;
+    flex-direction: column;
+  }
+
 </style>

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

@@ -1,8 +1,10 @@
 import type { NodeMetadata, Workflow } from "../types/index.js";
+import type { SwapStrategy } from "../utils/nodeSwap.js";
 import type { EndpointConfig } from "../config/endpoints.js";
 import type { AuthProvider } from "../types/auth.js";
 import type { FlowDropEventHandlers, FlowDropFeatures } from "../types/events.js";
 import type { FlowDropTheme, FlowDropThemeName } from "../types/theme.js";
+import type { SettingsCategory } from "../types/settings.js";
 /**
  * Configuration props for runtime customization
  */
@@ -51,6 +53,14 @@ interface Props {
     features?: FlowDropFeatures;
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
     theme?: FlowDropTheme | FlowDropThemeName;
+    /** Which settings tabs to show in the modal */
+    settingsCategories?: SettingsCategory[];
+    /** Show the "Sync to Cloud" button in the settings modal */
+    showSettingsSyncButton?: boolean;
+    /** Show the reset buttons in the settings modal */
+    showSettingsResetButton?: boolean;
+    /** Pluggable swap strategies — instance-scoped, checked in order */
+    swapStrategies?: SwapStrategy[];
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/CanvasBanner.stories.svelte

@@ -2,6 +2,7 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import CanvasBanner from "./CanvasBanner.svelte";
   import CanvasDecorator from "../stories/CanvasDecorator.svelte";
+  import Icon from "@iconify/svelte";
 
   const { Story } = defineMeta({
     title: "Display/CanvasBanner",
@@ -17,8 +18,11 @@
     <CanvasBanner
       title="Empty Canvas"
       description="Drag nodes from the sidebar to get started"
-      iconName="heroicons:squares-plus"
-    />
+    >
+      {#snippet icon()}
+        <Icon icon="heroicons:squares-plus" />
+      {/snippet}
+    </CanvasBanner>
   </CanvasDecorator>
 </Story>