@flowdrop/flowdrop 1.4.0 → 1.6.0

package/dist/components/chat/AIChatPanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { NodeMetadata } from '../../types/index.js';
+import type { UIAction } from '../../commands/types.js';
+import type { EndpointConfig } from '../../config/endpoints.js';
+interface Props {
+    nodeTypes: NodeMetadata[];
+    workflowId?: string;
+    onUIAction?: (action: UIAction) => void;
+    placeholder?: string;
+    endpointConfig?: EndpointConfig | null;
+}
+declare const AIChatPanel: import("svelte").Component<Props, {}, "">;
+type AIChatPanel = ReturnType<typeof AIChatPanel>;
+export default AIChatPanel;

package/dist/components/chat/CommandPreview.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+  import type { CommandPreviewItem } from '../../types/chat.js';
+  import Icon from '@iconify/svelte';
+
+  interface Props {
+    commands: CommandPreviewItem[];
+    onApprove: () => void;
+    onCancel: () => void;
+  }
+
+  let { commands, onApprove, onCancel }: Props = $props();
+
+  const hasPending = $derived(commands.some((c) => c.status === 'pending'));
+  const isExecuting = $derived(commands.some((c) => c.status === 'executing'));
+
+  let resolvedAction: 'applied' | 'cancelled' | null = $state(null);
+
+  function handleApprove() {
+    resolvedAction = 'applied';
+    onApprove();
+  }
+
+  function handleCancel() {
+    resolvedAction = 'cancelled';
+    onCancel();
+  }
+</script>
+
+<div class="command-preview" role="region" aria-label="Command preview">
+  <div class="command-preview__list">
+    {#each commands as command, i}
+      <div class="command-preview__item command-preview__item--{command.status}">
+        <span class="command-preview__status">
+          {#if command.status === 'pending'}
+            <Icon icon="mdi:chevron-right" />
+          {:else if command.status === 'executing'}
+            <Icon icon="mdi:loading" />
+          {:else if command.status === 'success'}
+            <Icon icon="mdi:check-circle" />
+          {:else if command.status === 'error'}
+            <Icon icon="mdi:alert-circle" />
+          {/if}
+        </span>
+        <pre class="command-preview__command">{command.raw}</pre>
+        {#if command.status === 'error' && command.result}
+          <span class="command-preview__error">{command.result}</span>
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  <div class="command-preview__actions">
+    {#if resolvedAction === 'applied'}
+      <span class="command-preview__resolved command-preview__resolved--applied">
+        {#if isExecuting}
+          <Icon icon="mdi:loading" />
+          Applying…
+        {:else}
+          <Icon icon="mdi:check-all" />
+          Applied
+        {/if}
+      </span>
+    {:else if resolvedAction === 'cancelled'}
+      <span class="command-preview__resolved command-preview__resolved--cancelled">
+        <Icon icon="mdi:close" />
+        Dismissed
+      </span>
+    {:else}
+      <button
+        class="command-preview__btn command-preview__btn--approve"
+        onclick={handleApprove}
+        disabled={!hasPending || isExecuting}
+      >
+        <Icon icon="mdi:check-all" />
+        Apply All
+      </button>
+      <button
+        class="command-preview__btn command-preview__btn--cancel"
+        onclick={handleCancel}
+        disabled={isExecuting}
+      >
+        Cancel
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .command-preview {
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-md);
+    background: var(--fd-card);
+    overflow: hidden;
+  }
+
+  .command-preview__list {
+    display: flex;
+    flex-direction: column;
+    padding: var(--fd-space-xs);
+    gap: var(--fd-space-3xs);
+  }
+
+  .command-preview__item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--fd-space-2xs);
+    padding: var(--fd-space-3xs) var(--fd-space-xs);
+    border-radius: var(--fd-radius-sm);
+  }
+
+  .command-preview__status {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: var(--fd-text-xs);
+    /* align icon with the first line of the pre block */
+    margin-top: 1px;
+    line-height: 1.5;
+  }
+
+  .command-preview__item--pending .command-preview__status {
+    color: var(--fd-muted-foreground);
+  }
+
+  .command-preview__item--executing .command-preview__status {
+    color: var(--fd-info);
+    animation: spin 1s linear infinite;
+  }
+
+  .command-preview__item--success .command-preview__status {
+    color: var(--fd-success);
+  }
+
+  .command-preview__item--error .command-preview__status {
+    color: var(--fd-error);
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .command-preview__command {
+    font-family: var(--fd-font-mono);
+    font-size: var(--fd-text-xs);
+    line-height: 1.5;
+    color: var(--fd-foreground);
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+  }
+
+  .command-preview__item--error .command-preview__command {
+    color: var(--fd-error);
+  }
+
+  .command-preview__error {
+    display: block;
+    font-size: var(--fd-text-xs);
+    color: var(--fd-error);
+    margin-top: var(--fd-space-3xs);
+  }
+
+  .command-preview__actions {
+    display: flex;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-xs);
+    border-top: 1px solid var(--fd-border);
+    background: var(--fd-muted);
+  }
+
+  .command-preview__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    padding: var(--fd-space-3xs) var(--fd-space-sm);
+    border: none;
+    border-radius: var(--fd-radius-sm);
+    font-size: var(--fd-text-xs);
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+      background-color var(--fd-transition-fast),
+      color var(--fd-transition-fast);
+  }
+
+  .command-preview__btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .command-preview__btn--approve {
+    background: var(--fd-primary);
+    color: var(--fd-primary-foreground);
+  }
+
+  .command-preview__btn--approve:hover:not(:disabled) {
+    background: var(--fd-primary-hover);
+  }
+
+  .command-preview__btn--cancel {
+    background: var(--fd-secondary);
+    color: var(--fd-secondary-foreground);
+  }
+
+  .command-preview__btn--cancel:hover:not(:disabled) {
+    background: var(--fd-secondary-hover);
+  }
+
+  .command-preview__resolved {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    font-size: var(--fd-text-xs);
+    font-weight: 600;
+    padding: var(--fd-space-3xs) var(--fd-space-xs);
+  }
+
+  .command-preview__resolved--applied {
+    color: var(--fd-success);
+  }
+
+  .command-preview__resolved--applied :global(svg.iconify[data-icon='mdi:loading']) {
+    animation: spin 1s linear infinite;
+  }
+
+  .command-preview__resolved--cancelled {
+    color: var(--fd-muted-foreground);
+  }
+</style>

package/dist/components/chat/CommandPreview.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CommandPreviewItem } from '../../types/chat.js';
+interface Props {
+    commands: CommandPreviewItem[];
+    onApprove: () => void;
+    onCancel: () => void;
+}
+declare const CommandPreview: import("svelte").Component<Props, {}, "">;
+type CommandPreview = ReturnType<typeof CommandPreview>;
+export default CommandPreview;

package/dist/components/console/CommandConsole.stories.svelte

@@ -0,0 +1,111 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import CommandConsole from './CommandConsole.svelte';
+  import { fn } from 'storybook/test';
+
+  const mockNodeTypes = [
+    {
+      id: 'llm_chat',
+      name: 'LLM Chat',
+      description: 'Chat completion using an LLM provider',
+      category: 'AI',
+      version: '1.0.0',
+      inputs: [
+        { id: 'prompt', name: 'Prompt', type: 'input', dataType: 'string' },
+        { id: 'context', name: 'Context', type: 'input', dataType: 'string' }
+      ],
+      outputs: [
+        {
+          id: 'response',
+          name: 'Response',
+          type: 'output',
+          dataType: 'string'
+        }
+      ],
+      configSchema: {
+        type: 'object',
+        properties: {
+          model: { type: 'string', default: 'gpt-4' },
+          temperature: { type: 'number', default: 0.7 },
+          maxTokens: { type: 'number', default: 1024 }
+        }
+      }
+    },
+    {
+      id: 'http_request',
+      name: 'HTTP Request',
+      description: 'Send HTTP requests to external APIs',
+      category: 'Integration',
+      version: '1.0.0',
+      inputs: [
+        { id: 'url', name: 'URL', type: 'input', dataType: 'string' },
+        { id: 'body', name: 'Body', type: 'input', dataType: 'object' }
+      ],
+      outputs: [
+        {
+          id: 'response',
+          name: 'Response',
+          type: 'output',
+          dataType: 'object'
+        },
+        {
+          id: 'status',
+          name: 'Status Code',
+          type: 'output',
+          dataType: 'number'
+        }
+      ],
+      configSchema: {
+        type: 'object',
+        properties: {
+          method: { type: 'string', default: 'GET' },
+          headers: { type: 'object', default: {} },
+          timeout: { type: 'number', default: 30000 }
+        }
+      }
+    },
+    {
+      id: 'text_template',
+      name: 'Text Template',
+      description: 'Render text templates with variable substitution',
+      category: 'Transform',
+      version: '1.0.0',
+      inputs: [
+        {
+          id: 'variables',
+          name: 'Variables',
+          type: 'input',
+          dataType: 'object'
+        }
+      ],
+      outputs: [{ id: 'text', name: 'Text', type: 'output', dataType: 'string' }],
+      configSchema: {
+        type: 'object',
+        properties: {
+          template: { type: 'string', default: '' },
+          delimiter: { type: 'string', default: '{{' }
+        }
+      }
+    }
+  ];
+
+  const { Story } = defineMeta({
+    title: 'Editor/CommandConsole',
+    component: CommandConsole,
+    tags: ['autodocs'],
+    parameters: {
+      layout: 'padded'
+    },
+    args: {
+      nodeTypes: mockNodeTypes,
+      onUIAction: fn()
+    }
+  });
+</script>
+
+<Story
+  name="Default"
+  args={{
+    nodeTypes: mockNodeTypes
+  }}
+/>

package/dist/components/console/CommandConsole.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default CommandConsole;
+type CommandConsole = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CommandConsole: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import CommandConsole from './CommandConsole.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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/console/CommandConsole.svelte

@@ -0,0 +1,263 @@
+<!--
+  CommandConsole Component
+  Bottom-panel REPL shell for the FlowDrop Command DSL
+  Styled with BEM syntax matching ConfigPanel pattern
+-->
+
+<script lang="ts">
+  import type { NodeMetadata } from '../../types/index.js';
+  import {
+    parseCommand,
+    executeCommand,
+    executeBatch,
+    type UIAction,
+    type CommandContext,
+    type CommandResultOk,
+    type ListNodesResultData,
+    type ListEdgesResultData,
+    type ListTypesResultData,
+    type InfoResultData,
+    type HelpResultData
+  } from '../../commands/index.js';
+  import { createStoreCommandContext } from '../../commands/storeIntegration.svelte.js';
+  import { updateSettings, getUiSettings } from '../../stores/settingsStore.svelte.js';
+  import ConsoleInput from './ConsoleInput.svelte';
+  import ConsoleOutput, { type ConsoleEntry } from './ConsoleOutput.svelte';
+  import {
+    formatListNodes,
+    formatListEdges,
+    formatListTypes,
+    formatInfo,
+    formatHelp
+  } from './formatters.js';
+
+  interface Props {
+    /** Available node types for command execution */
+    nodeTypes: NodeMetadata[];
+    /** Callback for UI actions (open config, select node) */
+    onUIAction?: (action: UIAction) => void;
+  }
+
+  let { nodeTypes, onUIAction }: Props = $props();
+
+  let outputEntries: ConsoleEntry[] = $state([]);
+  let commandContext: CommandContext | null = $state(null);
+
+  // Recreate context when nodeTypes changes
+  $effect(() => {
+    commandContext = createStoreCommandContext(nodeTypes, onUIAction);
+  });
+
+  /**
+   * Attempts to format CommandResult data into a rich display string.
+   * Returns null if the result has no formattable data.
+   */
+  function formatResultData(commandType: string, result: CommandResultOk): string | null {
+    if (!result.data) return null;
+
+    switch (commandType) {
+      case 'list_nodes':
+        return formatListNodes(result.data as ListNodesResultData);
+      case 'list_edges':
+        return formatListEdges(result.data as ListEdgesResultData);
+      case 'list_types':
+        return formatListTypes(result.data as ListTypesResultData);
+      case 'info':
+        return formatInfo(result.data as InfoResultData);
+      case 'help':
+        return formatHelp(result.data as HelpResultData);
+      default:
+        return null;
+    }
+  }
+
+  function closeConsole() {
+    updateSettings({ ui: { consoleOpen: false } });
+  }
+
+  function handleCommandSubmit(value: string) {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+
+    // Add the input entry to the output
+    outputEntries.push({ type: 'input', text: trimmed });
+
+    // Handle cls command (clear console output; use 'clear' to clear the canvas)
+    if (trimmed.toLowerCase() === 'cls') {
+      outputEntries = [];
+      return;
+    }
+
+    // Parse the command
+    const parseResult = parseCommand(trimmed);
+    if (!parseResult.ok) {
+      outputEntries.push({ type: 'error', text: parseResult.error });
+      return;
+    }
+
+    // Ensure we have a command context
+    if (!commandContext) {
+      outputEntries.push({ type: 'error', text: 'No workflow loaded' });
+      return;
+    }
+
+    // Execute the command
+    const result = executeCommand(parseResult.command, commandContext);
+    if (result.ok) {
+      const formatted = formatResultData(parseResult.command.type, result);
+      if (formatted) {
+        outputEntries.push({ type: 'formatted', text: formatted });
+      } else {
+        outputEntries.push({ type: 'success', text: result.message });
+      }
+    } else {
+      outputEntries.push({ type: 'error', text: result.error });
+    }
+  }
+
+  function handleBatchSubmit(lines: string[]) {
+    if (!commandContext) {
+      outputEntries.push({ type: 'error', text: 'No workflow loaded' });
+      return;
+    }
+
+    const totalCount = lines.length;
+
+    // Parse all commands first
+    const parsed: {
+      line: string;
+      command?: import('../../commands/index.js').Command;
+      error?: string;
+    }[] = [];
+    for (const line of lines) {
+      outputEntries.push({ type: 'input', text: line });
+
+      if (line.toLowerCase() === 'cls') {
+        outputEntries = [];
+        parsed.length = 0;
+        continue;
+      }
+
+      const parseResult = parseCommand(line);
+      if (!parseResult.ok) {
+        outputEntries.push({ type: 'error', text: parseResult.error });
+        const succeeded = parsed.length;
+        outputEntries.push({
+          type: 'error',
+          text: `Batch failed at command ${succeeded + 1}/${totalCount}: parse error`
+        });
+        return;
+      }
+      parsed.push({ line, command: parseResult.command });
+    }
+
+    if (parsed.length === 0) return;
+
+    const commands = parsed.map((p) => p.command!);
+    const batchResult = executeBatch(commands, commandContext);
+
+    // Show individual results
+    for (let i = 0; i < batchResult.results.length; i++) {
+      const result = batchResult.results[i];
+      if (result.ok) {
+        const formatted = formatResultData(commands[i].type, result);
+        if (formatted) {
+          outputEntries.push({ type: 'formatted', text: formatted });
+        } else {
+          outputEntries.push({ type: 'success', text: result.message });
+        }
+      } else {
+        outputEntries.push({ type: 'error', text: result.error });
+      }
+    }
+
+    // Show summary
+    if (batchResult.ok) {
+      outputEntries.push({
+        type: 'success',
+        text: `Batch: ${batchResult.completedCount}/${batchResult.totalCount} commands succeeded`
+      });
+    } else {
+      outputEntries.push({
+        type: 'error',
+        text: `Batch failed at command ${batchResult.completedCount + 1}/${batchResult.totalCount}: ${batchResult.error}`
+      });
+    }
+  }
+</script>
+
+<div class="command-console" role="region" aria-label="Command Console">
+  <div class="command-console__header">
+    <h2 class="command-console__title">Console</h2>
+    <button
+      class="command-console__close"
+      onclick={closeConsole}
+      aria-label="Close console"
+      type="button"
+    >
+      &times;
+    </button>
+  </div>
+  <div class="command-console__content">
+    <ConsoleOutput entries={outputEntries} />
+  </div>
+  <ConsoleInput
+    open={getUiSettings().consoleOpen}
+    {nodeTypes}
+    onSubmit={handleCommandSubmit}
+    onBatchSubmit={handleBatchSubmit}
+    onClose={closeConsole}
+  />
+</div>
+
+<style>
+  .command-console {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--fd-background);
+  }
+
+  .command-console__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--fd-border);
+    background-color: var(--fd-muted);
+    flex-shrink: 0;
+  }
+
+  .command-console__title {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--fd-foreground);
+  }
+
+  .command-console__close {
+    background: none;
+    border: none;
+    font-size: 1.25rem;
+    line-height: 1;
+    cursor: pointer;
+    color: var(--fd-muted-foreground);
+    padding: 0.25rem;
+    border-radius: var(--fd-radius-sm);
+    transition:
+      color var(--fd-transition-fast),
+      background-color var(--fd-transition-fast);
+  }
+
+  .command-console__close:hover {
+    color: var(--fd-foreground);
+    background-color: var(--fd-subtle);
+  }
+
+  .command-console__content {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { NodeMetadata } from '../../types/index.js';
+import { type UIAction } from '../../commands/index.js';
+interface Props {
+    /** Available node types for command execution */
+    nodeTypes: NodeMetadata[];
+    /** Callback for UI actions (open config, select node) */
+    onUIAction?: (action: UIAction) => void;
+}
+declare const CommandConsole: import("svelte").Component<Props, {}, "">;
+type CommandConsole = ReturnType<typeof CommandConsole>;
+export default CommandConsole;