@flowdrop/flowdrop 1.3.0 → 1.5.0

package/dist/components/console/ConsoleInput.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { NodeMetadata } from "../../types/index.js";
+interface Props {
+    /** Whether the console is currently visible/open */
+    open: boolean;
+    /** Available node types for autocomplete suggestions */
+    nodeTypes?: NodeMetadata[];
+    /** Called when user submits a command (Enter key) */
+    onSubmit: (value: string) => void;
+    /** Called when user pastes multiple lines */
+    onBatchSubmit?: (lines: string[]) => void;
+    /** Called when user presses Escape to close the console */
+    onClose: () => void;
+}
+declare const ConsoleInput: import("svelte").Component<Props, {}, "">;
+type ConsoleInput = ReturnType<typeof ConsoleInput>;
+export default ConsoleInput;

package/dist/components/console/ConsoleOutput.svelte

@@ -0,0 +1,121 @@
+<!--
+  ConsoleOutput Component
+  Scrollable output area for displaying command results in the console
+  Styled with BEM syntax matching CommandConsole pattern
+-->
+
+<script lang="ts">
+  import { tick } from "svelte";
+
+  export interface ConsoleEntry {
+    type: "input" | "success" | "error" | "formatted";
+    text: string;
+  }
+
+  interface Props {
+    /** Output entries to display */
+    entries: ConsoleEntry[];
+  }
+
+  let { entries }: Props = $props();
+
+  let outputElement: HTMLDivElement | undefined = $state();
+
+  $effect(() => {
+    // Track entries length to auto-scroll on new entries
+    const _count = entries.length;
+    tick().then(() => {
+      if (outputElement) {
+        outputElement.scrollTop = outputElement.scrollHeight;
+      }
+    });
+  });
+</script>
+
+<div
+  class="console-output"
+  bind:this={outputElement}
+  role="log"
+  aria-live="polite"
+>
+  {#each entries as entry}
+    <div class="console-output__entry console-output__entry--{entry.type}">
+      {#if entry.type === "input"}
+        <span class="console-output__prefix">&gt;</span>
+        <span class="console-output__text">{entry.text}</span>
+      {:else if entry.type === "formatted"}
+        <pre class="console-output__pre">{entry.text}</pre>
+      {:else}
+        <span class="console-output__text">{entry.text}</span>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .console-output {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem 1rem;
+    font-family: monospace;
+    font-size: 0.875rem;
+    line-height: 1.6;
+
+    /* Custom scrollbar styling matching MainLayout pattern */
+    scrollbar-width: thin;
+    scrollbar-color: var(--fd-scrollbar-thumb) var(--fd-scrollbar-track);
+  }
+
+  .console-output::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .console-output::-webkit-scrollbar-track {
+    background: var(--fd-scrollbar-track);
+    border-radius: 4px;
+  }
+
+  .console-output::-webkit-scrollbar-thumb {
+    background: var(--fd-scrollbar-thumb);
+    border-radius: 4px;
+  }
+
+  .console-output::-webkit-scrollbar-thumb:hover {
+    background: var(--fd-scrollbar-thumb-hover);
+  }
+
+  .console-output__entry {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .console-output__entry--input {
+    color: var(--fd-muted-foreground);
+  }
+
+  .console-output__entry--success {
+    color: var(--fd-success);
+  }
+
+  .console-output__entry--error {
+    color: var(--fd-error);
+  }
+
+  .console-output__entry--formatted {
+    color: var(--fd-foreground);
+  }
+
+  .console-output__pre {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    white-space: pre;
+    overflow-x: auto;
+  }
+
+  .console-output__prefix {
+    margin-right: 0.5rem;
+    user-select: none;
+  }
+</style>

package/dist/components/console/ConsoleOutput.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface ConsoleEntry {
+    type: "input" | "success" | "error" | "formatted";
+    text: string;
+}
+interface Props {
+    /** Output entries to display */
+    entries: ConsoleEntry[];
+}
+declare const ConsoleOutput: import("svelte").Component<Props, {}, "">;
+type ConsoleOutput = ReturnType<typeof ConsoleOutput>;
+export default ConsoleOutput;

package/dist/components/console/formatters.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Pure formatting functions for rich command result display.
+ * Converts CommandResult data into aligned table strings for console output.
+ */
+import type { ListNodesResultData, ListEdgesResultData, ListTypesResultData, InfoResultData, HelpResultData } from "../../commands/types.js";
+/**
+ * Formats list nodes result as an aligned table: ID, Label, Type.
+ */
+export declare function formatListNodes(data: ListNodesResultData): string;
+/**
+ * Formats list edges result as a table: Source, Port, ->, Target, Port.
+ */
+export declare function formatListEdges(data: ListEdgesResultData): string;
+/**
+ * Formats list types result as a table: Type ID, Name, Category.
+ */
+export declare function formatListTypes(data: ListTypesResultData): string;
+/**
+ * Formats info result as structured output with header fields,
+ * config section, ports section, and edges section.
+ */
+export declare function formatInfo(data: InfoResultData): string;
+/**
+ * Formats help result as a table: Name, Syntax, Description.
+ */
+export declare function formatHelp(data: HelpResultData): string;

package/dist/components/console/formatters.js

@@ -0,0 +1,118 @@
+/**
+ * Pads a string to a given width (right-padded with spaces).
+ */
+function pad(str, width) {
+    return str.length >= width ? str : str + " ".repeat(width - str.length);
+}
+/**
+ * Formats a simple table from rows with headers.
+ * Each column is auto-sized to fit the widest value.
+ */
+function formatTable(headers, rows) {
+    const colWidths = headers.map((h, i) => Math.max(h.length, ...rows.map((r) => (r[i] ?? "").length)));
+    const headerLine = headers.map((h, i) => pad(h, colWidths[i])).join("  ");
+    const separator = colWidths.map((w) => "-".repeat(w)).join("  ");
+    const dataLines = rows.map((row) => row.map((cell, i) => pad(cell, colWidths[i])).join("  "));
+    return [headerLine, separator, ...dataLines].join("\n");
+}
+/**
+ * Formats list nodes result as an aligned table: ID, Label, Type.
+ */
+export function formatListNodes(data) {
+    if (data.nodes.length === 0) {
+        return "No nodes in workflow";
+    }
+    const rows = data.nodes.map((n) => [n.nodeId, n.label, n.type]);
+    return formatTable(["ID", "Label", "Type"], rows);
+}
+/**
+ * Formats list edges result as a table: Source, Port, ->, Target, Port.
+ */
+export function formatListEdges(data) {
+    if (data.edges.length === 0) {
+        return "No edges in workflow";
+    }
+    const rows = data.edges.map((e) => [
+        e.sourceNodeId,
+        e.sourcePort,
+        "->",
+        e.targetNodeId,
+        e.targetPort,
+    ]);
+    return formatTable(["Source", "Port", "", "Target", "Port"], rows);
+}
+/**
+ * Formats list types result as a table: Type ID, Name, Category.
+ */
+export function formatListTypes(data) {
+    if (data.types.length === 0) {
+        return "No node types available";
+    }
+    const rows = data.types.map((t) => [t.typeId, t.name, t.category]);
+    return formatTable(["Type ID", "Name", "Category"], rows);
+}
+/**
+ * Formats info result as structured output with header fields,
+ * config section, ports section, and edges section.
+ */
+export function formatInfo(data) {
+    const lines = [];
+    // Header fields
+    lines.push(`Node:     ${data.nodeId}`);
+    lines.push(`Label:    ${data.label}`);
+    lines.push(`Type:     ${data.type}`);
+    lines.push(`Position: (${Math.round(data.position.x)}, ${Math.round(data.position.y)})`);
+    // Config section
+    const configEntries = Object.entries(data.config);
+    if (configEntries.length > 0) {
+        lines.push("");
+        lines.push("Config:");
+        for (const [key, value] of configEntries) {
+            const display = typeof value === "string"
+                ? `"${value}"`
+                : JSON.stringify(value) ?? "null";
+            lines.push(`  ${key}: ${display}`);
+        }
+    }
+    // Ports section
+    if (data.inputs.length > 0 || data.outputs.length > 0) {
+        lines.push("");
+        lines.push("Ports:");
+        if (data.inputs.length > 0) {
+            lines.push("  Inputs:");
+            for (const port of data.inputs) {
+                lines.push(`    ${port.portId} (${port.dataType})`);
+            }
+        }
+        if (data.outputs.length > 0) {
+            lines.push("  Outputs:");
+            for (const port of data.outputs) {
+                lines.push(`    ${port.portId} (${port.dataType})`);
+            }
+        }
+    }
+    // Connected edges section
+    if (data.connectedEdges.length > 0) {
+        lines.push("");
+        lines.push("Edges:");
+        for (const edge of data.connectedEdges) {
+            if (edge.direction === "incoming") {
+                lines.push(`  ${edge.remoteNodeId}:${edge.remotePort} -> ${edge.localPort}`);
+            }
+            else {
+                lines.push(`  ${edge.localPort} -> ${edge.remoteNodeId}:${edge.remotePort}`);
+            }
+        }
+    }
+    return lines.join("\n");
+}
+/**
+ * Formats help result as a table: Name, Syntax, Description.
+ */
+export function formatHelp(data) {
+    if (data.commands.length === 0) {
+        return "No commands available";
+    }
+    const rows = data.commands.map((c) => [c.name, c.syntax, c.description]);
+    return formatTable(["Name", "Syntax", "Description"], rows);
+}

package/dist/components/interrupt/index.d.ts

@@ -11,3 +11,4 @@ export { default as ConfirmationPrompt } from "./ConfirmationPrompt.svelte";
 export { default as ChoicePrompt } from "./ChoicePrompt.svelte";
 export { default as TextInputPrompt } from "./TextInputPrompt.svelte";
 export { default as FormPrompt } from "./FormPrompt.svelte";
+export { default as ReviewPrompt } from "./ReviewPrompt.svelte";

package/dist/components/interrupt/index.js

@@ -13,3 +13,4 @@ export { default as ConfirmationPrompt } from "./ConfirmationPrompt.svelte";
 export { default as ChoicePrompt } from "./ChoicePrompt.svelte";
 export { default as TextInputPrompt } from "./TextInputPrompt.svelte";
 export { default as FormPrompt } from "./FormPrompt.svelte";
+export { default as ReviewPrompt } from "./ReviewPrompt.svelte";

package/dist/components/nodes/SimpleNode.stories.svelte

@@ -158,3 +158,67 @@
     })}
   />
 </Story>
+
+<Story name="Dynamic Ports">
+  <NodeDecorator
+    data={createSampleNodeData({
+      label: "Custom Function",
+      config: {
+        dynamicInputs: [
+          {
+            name: "param_a",
+            label: "Parameter A",
+            description: "First parameter",
+            dataType: "string",
+            required: true,
+          },
+          {
+            name: "param_b",
+            label: "Parameter B",
+            description: "Second parameter",
+            dataType: "number",
+            required: false,
+          },
+        ],
+        dynamicOutputs: [
+          {
+            name: "result",
+            label: "Result",
+            description: "Function result",
+            dataType: "json",
+            required: false,
+          },
+        ],
+      },
+      metadata: {
+        id: "custom_function",
+        name: "Custom Function",
+        description: "A node with dynamic input and output ports",
+        category: "processing",
+        version: "1.0.0",
+        type: "simple",
+        supportedTypes: ["simple", "square", "default"],
+        icon: "mdi:function-variant",
+        color: "#8b5cf6",
+        inputs: [
+          {
+            id: "trigger",
+            name: "Trigger",
+            type: "input",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+        outputs: [
+          {
+            id: "done",
+            name: "Done",
+            type: "output",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+      },
+    })}
+  />
+</Story>

package/dist/components/nodes/SimpleNode.svelte

@@ -16,7 +16,9 @@
     NodeMetadata,
     NodeExtensions,
     NodePort,
+    DynamicPort,
   } from "../../types/index.js";
+  import { dynamicPortToNodePort } from "../../types/index.js";
   import Icon from "@iconify/svelte";
   import {
     getDataTypeColor,
@@ -133,20 +135,34 @@
     }
   }
 
+  const dynamicInputs = $derived(
+    ((props.data.config?.dynamicInputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "input"),
+    ),
+  );
+
+  const dynamicOutputs = $derived(
+    ((props.data.config?.dynamicOutputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "output"),
+    ),
+  );
+
   /**
    * All visible input ports in user-defined order.
    */
   const visibleInputPorts = $derived(
-    applyPortOrder(props.data.metadata?.inputs ?? [], portOrder.inputs).filter(
-      (p: NodePort) =>
-        isPortVisible(
-          p,
-          "input",
-          hiddenPorts,
-          hideUnconnectedHandles,
-          getConnectedHandles(),
-          props.data.nodeId,
-        ),
+    applyPortOrder(
+      [...(props.data.metadata?.inputs ?? []), ...dynamicInputs],
+      portOrder.inputs,
+    ).filter((p: NodePort) =>
+      isPortVisible(
+        p,
+        "input",
+        hiddenPorts,
+        hideUnconnectedHandles,
+        getConnectedHandles(),
+        props.data.nodeId,
+      ),
     ),
   );
 
@@ -155,7 +171,7 @@
    */
   const visibleOutputPorts = $derived(
     applyPortOrder(
-      props.data.metadata?.outputs ?? [],
+      [...(props.data.metadata?.outputs ?? []), ...dynamicOutputs],
       portOrder.outputs,
     ).filter((p: NodePort) =>
       isPortVisible(

package/dist/components/nodes/SquareNode.stories.svelte

@@ -80,3 +80,48 @@
     selected={true}
   />
 </Story>
+
+<Story name="Dynamic Ports">
+  <NodeDecorator
+    data={createSampleNodeData({
+      label: "Data Mapper",
+      config: {
+        dynamicInputs: [
+          {
+            name: "source",
+            label: "Source Data",
+            dataType: "json",
+            required: true,
+          },
+        ],
+        dynamicOutputs: [
+          {
+            name: "mapped",
+            label: "Mapped Output",
+            dataType: "json",
+            required: false,
+          },
+          {
+            name: "errors",
+            label: "Errors",
+            dataType: "string",
+            required: false,
+          },
+        ],
+      },
+      metadata: {
+        id: "data_mapper",
+        name: "Data Mapper",
+        description: "Map data between formats",
+        category: "processing",
+        version: "1.0.0",
+        type: "square",
+        supportedTypes: ["square"],
+        icon: "mdi:swap-horizontal",
+        color: "#0ea5e9",
+        inputs: [],
+        outputs: [],
+      },
+    })}
+  />
+</Story>

package/dist/components/nodes/SquareNode.svelte

@@ -16,7 +16,9 @@
     NodeMetadata,
     NodeExtensions,
     NodePort,
+    DynamicPort,
   } from "../../types/index.js";
+  import { dynamicPortToNodePort } from "../../types/index.js";
   import Icon from "@iconify/svelte";
   import {
     getDataTypeColor,
@@ -117,20 +119,34 @@
       openConfigSidebar();
     }
   }
+  const dynamicInputs = $derived(
+    ((props.data.config?.dynamicInputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "input"),
+    ),
+  );
+
+  const dynamicOutputs = $derived(
+    ((props.data.config?.dynamicOutputs as DynamicPort[]) || []).map((port) =>
+      dynamicPortToNodePort(port, "output"),
+    ),
+  );
+
   /**
    * All visible input ports in user-defined order.
    */
   const visibleInputPorts = $derived(
-    applyPortOrder(props.data.metadata?.inputs ?? [], portOrder.inputs).filter(
-      (p: NodePort) =>
-        isPortVisible(
-          p,
-          "input",
-          hiddenPorts,
-          hideUnconnectedHandles,
-          getConnectedHandles(),
-          props.data.nodeId,
-        ),
+    applyPortOrder(
+      [...(props.data.metadata?.inputs ?? []), ...dynamicInputs],
+      portOrder.inputs,
+    ).filter((p: NodePort) =>
+      isPortVisible(
+        p,
+        "input",
+        hiddenPorts,
+        hideUnconnectedHandles,
+        getConnectedHandles(),
+        props.data.nodeId,
+      ),
     ),
   );
 
@@ -139,7 +155,7 @@
    */
   const visibleOutputPorts = $derived(
     applyPortOrder(
-      props.data.metadata?.outputs ?? [],
+      [...(props.data.metadata?.outputs ?? []), ...dynamicOutputs],
       portOrder.outputs,
     ).filter((p: NodePort) =>
       isPortVisible(

package/dist/components/nodes/WorkflowNode.stories.svelte

@@ -77,3 +77,66 @@
     selected={true}
   />
 </Story>
+
+<Story name="Dynamic Ports">
+  <NodeDecorator
+    data={createSampleNodeData({
+      label: "Custom Function",
+      config: {
+        dynamicInputs: [
+          {
+            name: "input_1",
+            label: "First Input",
+            description: "The first input parameter",
+            dataType: "string",
+            required: true,
+          },
+          {
+            name: "input_2",
+            label: "Second Input",
+            description: "The second input parameter",
+            dataType: "number",
+            required: false,
+          },
+        ],
+        dynamicOutputs: [
+          {
+            name: "output_1",
+            label: "Primary Output",
+            description: "The main output value",
+            dataType: "string",
+            required: false,
+          },
+        ],
+      },
+      metadata: {
+        id: "custom-function",
+        name: "Custom Function",
+        description:
+          "Execute a custom function with dynamic inputs and outputs",
+        category: "processing",
+        version: "1.0.0",
+        type: "workflow",
+        icon: "mdi:function-variant",
+        inputs: [
+          {
+            id: "trigger",
+            name: "Trigger",
+            type: "input",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+        outputs: [
+          {
+            id: "done",
+            name: "Done",
+            type: "output",
+            dataType: "trigger",
+            required: false,
+          },
+        ],
+      },
+    })}
+  />
+</Story>

package/dist/config/endpoints.d.ts

@@ -72,6 +72,14 @@ export interface EndpointConfig {
             /** List interrupts for a pipeline */
             listByPipeline: string;
         };
+        chat: {
+            /** Send a message to the chat */
+            sendMessage: string;
+            /** Get conversation history */
+            getHistory: string;
+            /** Clear conversation history */
+            clearHistory: string;
+        };
         templates: {
             list: string;
             get: string;

package/dist/config/endpoints.js

@@ -60,6 +60,11 @@ export const defaultEndpointConfig = {
             listBySession: "/playground/sessions/{sessionId}/interrupts",
             listByPipeline: "/pipelines/{pipelineId}/interrupts",
         },
+        chat: {
+            sendMessage: "/workflows/{id}/chat/messages",
+            getHistory: "/workflows/{id}/chat/messages",
+            clearHistory: "/workflows/{id}/chat/messages",
+        },
         templates: {
             list: "/templates",
             get: "/templates/{id}",

package/dist/core/index.d.ts

@@ -49,6 +49,9 @@ export { isFieldOptionArray, normalizeOptions, } from "../components/form/types.
 export { resolveScopeToKey, keyToScope, generateDefaultUISchema, collectReferencedKeys, } from "../utils/uischema.js";
 export { DEFAULT_PORT_CONFIG } from "../config/defaultPortConfig.js";
 export { defaultEndpointConfig, createEndpointConfig, } from "../config/endpoints.js";
+export { generateNodeId, extractConfigDefaults } from "../utils/nodeIds.js";
+export type { AddNodeCommand, DeleteNodeCommand, RenameNodeCommand, SetConfigCommand, GetConfigCommand, ConnectCommand, DisconnectPortsCommand, DisconnectNodeCommand, ListNodesCommand, ListEdgesCommand, ListTypesCommand, InfoCommand, UndoCommand, RedoCommand, ConfigOpenCommand, SelectNodeCommand, HelpCommand, ClearCommand, SwapNodeCommand, MoveNodeCommand, AutoLayoutCommand, Command, ParseResult, CommandErrorCode, AddNodeResultData, ListNodesResultData, ListEdgesResultData, ListTypesResultData, InfoResultData, GetConfigResultData, SetConfigResultData, HelpResultData, CommandResultData, CommandResultOk, CommandResultError, CommandResult, BatchResult, UIAction, CommandDispatch, CommandContext, } from "../commands/index.js";
+export { buildTypeMap, parseCommand, executeCommand, toShortId, toShortTypeId, resolveNode, executeBatch, computeAutoPosition, } from "../commands/index.js";
 export { WorkflowAdapter } from "../adapters/WorkflowAdapter.js";
 export type { StandardNode, StandardEdge, StandardWorkflow, WorkflowExecutionResult, WorkflowValidationResult, } from "../adapters/WorkflowAdapter.js";
 export type { AgentSpecNodeComponentType, AgentSpecToolComponentType, AgentSpecComponentType, AgentSpecProperty, AgentSpecNodeBase, AgentSpecStartNode, AgentSpecEndNode, AgentSpecLLMNode, AgentSpecAPINode, AgentSpecAgentNode, AgentSpecFlowNode, AgentSpecMapNode, AgentSpecBranchingNode, AgentSpecToolNode, AgentSpecNode, AgentSpecBranch, AgentSpecControlFlowEdge, AgentSpecDataFlowEdge, AgentSpecFlow, AgentSpecToolBase, AgentSpecServerTool, AgentSpecClientTool, AgentSpecRemoteTool, AgentSpecTool, AgentSpecLLMConfig, AgentSpecAgent, AgentSpecDocument, } from "../types/agentspec.js";
@@ -77,3 +80,5 @@ export { getTheme as theme, getResolvedTheme as resolvedTheme, setTheme, toggleT
 export { sanitizeHtml } from "../utils/sanitize.js";
 export { logger, setLogLevel, getLogLevel } from "../utils/logger.js";
 export type { LogLevel } from "../utils/logger.js";
+export { computeSwapPreview, computeSwapPreviewWithOptions, executeSwap, mapConfig, getVersionUpgrade, compareSemver, performSwap, validateSwapResult, SwapValidationError, } from "../utils/nodeSwap.js";
+export type { SwapPreview, SwapResult, PortMapping, DroppedEdge, MatchQuality, PortMappingOverride, ConfigMappingOverride, SwapOptions, SwapStrategy, SwapStrategyContext, SwapEventContext, } from "../utils/nodeSwap.js";