@flowdrop/flowdrop 1.4.0 → 1.5.0

package/dist/components/App.svelte

@@ -5,13 +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";
@@ -22,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";
@@ -51,7 +64,7 @@
     getUiSettings,
     updateSettings,
   } from "../stores/settingsStore.svelte.js";
-  import { initializePortCompatibility } from "../utils/connections.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";
@@ -115,6 +128,8 @@
     showSettingsSyncButton?: boolean;
     /** Show the reset buttons in the settings modal */
     showSettingsResetButton?: boolean;
+    /** Pluggable swap strategies — instance-scoped, checked in order */
+    swapStrategies?: SwapStrategy[];
   }
 
   let {
@@ -140,6 +155,7 @@
     settingsCategories,
     showSettingsSyncButton,
     showSettingsResetButton,
+    swapStrategies,
   }: Props = $props();
 
   // svelte-ignore state_referenced_locally — feature flags don't change at runtime
@@ -180,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;
@@ -213,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,
@@ -249,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;
@@ -444,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;
   }
 
   /**
@@ -462,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
    */
@@ -675,7 +842,9 @@
    * Config panel always appears on the right side
    */
   const hasConfigPanelOpen = $derived(
-    isWorkflowSettingsOpen || !!selectedNodeForConfig(),
+    isWorkflowSettingsOpen ||
+      !!selectedNodeForConfig ||
+      swapMode !== "idle",
   );
   const showRightPanel = $derived(!disableSidebar && hasConfigPanelOpen);
 
@@ -699,8 +868,76 @@
 
   // 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
@@ -724,7 +961,8 @@
     showHeader={showNavbar}
     showLeftSidebar={!disableSidebar}
     showRightSidebar={showRightPanel}
-    showBottomPanel={false}
+    showBottomPanel={getUiSettings().consoleOpen && !readOnly && !lockWorkflow}
+    bottomPanelHeight={getUiSettings().consoleHeight}
     showFooter={false}
     headerHeight={60}
     {leftSidebarWidth}
@@ -740,7 +978,7 @@
     <!-- Header: Navbar -->
     {#snippet header()}
       <Navbar
-        title={breadcrumbTitle()}
+        title={breadcrumbTitle}
         primaryActions={navbarActions.length > 0
           ? navbarActions
           : [
@@ -804,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}
@@ -867,8 +1122,8 @@
             }}
           />
         </ConfigPanel>
-      {:else if selectedNodeForConfig()}
-        {@const currentNode = selectedNodeForConfig()!}
+      {:else if selectedNodeForConfig}
+        {@const currentNode = selectedNodeForConfig}
         <ConfigPanel
           title={currentNode.data.label}
           id={currentNode.id}
@@ -885,6 +1140,7 @@
             },
           ]}
           onClose={closeConfigSidebar}
+          onSwap={!readOnly && !lockWorkflow && features.enableNodeSwap ? startSwap : undefined}
         >
           <ConfigForm
             {authProvider}
@@ -929,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}
@@ -1022,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>
@@ -1182,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,4 +1,5 @@
 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";
@@ -58,6 +59,8 @@ interface Props {
     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/CanvasController.svelte

@@ -0,0 +1,38 @@
+<!--
+  CanvasController Component
+  Provides viewport control methods (fitView, zoom, pan) via useSvelteFlow().
+  Must be rendered inside SvelteFlowProvider context.
+-->
+
+<script lang="ts">
+  import { useSvelteFlow } from "@xyflow/svelte";
+  import { getEditorSettings } from "../stores/settingsStore.svelte.js";
+
+  const { fitView, zoomIn, zoomOut, setZoom, setCenter, setViewport } =
+    useSvelteFlow();
+
+  export function canvasFitView(): void {
+    fitView({ padding: 0.2, duration: 300 });
+  }
+
+  export function canvasZoomIn(): void {
+    zoomIn({ duration: 300 });
+  }
+
+  export function canvasZoomOut(): void {
+    zoomOut({ duration: 300 });
+  }
+
+  export function canvasZoomTo(level: number): void {
+    setZoom(level, { duration: 300 });
+  }
+
+  export function canvasPanTo(x: number, y: number): void {
+    setCenter(x, y, { duration: 300 });
+  }
+
+  export function canvasResetView(): void {
+    const defaultZoom = getEditorSettings().defaultZoom;
+    setViewport({ x: 0, y: 0, zoom: defaultZoom }, { duration: 300 });
+  }
+</script>

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

@@ -0,0 +1,32 @@
+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 CanvasController: $$__sveltets_2_IsomorphicComponent<{
+    canvasFitView?: () => void;
+    canvasZoomIn?: () => void;
+    canvasZoomOut?: () => void;
+    canvasZoomTo?: (level: number) => void;
+    canvasPanTo?: (x: number, y: number) => void;
+    canvasResetView?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    canvasFitView: () => void;
+    canvasZoomIn: () => void;
+    canvasZoomOut: () => void;
+    canvasZoomTo: (level: number) => void;
+    canvasPanTo: (x: number, y: number) => void;
+    canvasResetView: () => void;
+}, string>;
+type CanvasController = InstanceType<typeof CanvasController>;
+export default CanvasController;