@flowdrop/flowdrop 1.5.0 → 1.6.0

package/dist/components/chat/CommandPreview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { CommandPreviewItem } from "../../types/chat.js";
-  import Icon from "@iconify/svelte";
+  import type { CommandPreviewItem } from '../../types/chat.js';
+  import Icon from '@iconify/svelte';
 
   interface Props {
     commands: CommandPreviewItem[];
@@ -10,8 +10,20 @@
 
   let { commands, onApprove, onCancel }: Props = $props();
 
-  const hasPending = $derived(commands.some((c) => c.status === "pending"));
-  const isExecuting = $derived(commands.some((c) => c.status === "executing"));
+  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">
@@ -19,18 +31,18 @@
     {#each commands as command, i}
       <div class="command-preview__item command-preview__item--{command.status}">
         <span class="command-preview__status">
-          {#if command.status === "pending"}
+          {#if command.status === 'pending'}
             <Icon icon="mdi:chevron-right" />
-          {:else if command.status === "executing"}
+          {:else if command.status === 'executing'}
             <Icon icon="mdi:loading" />
-          {:else if command.status === "success"}
+          {:else if command.status === 'success'}
             <Icon icon="mdi:check-circle" />
-          {:else if command.status === "error"}
+          {: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}
+        {#if command.status === 'error' && command.result}
           <span class="command-preview__error">{command.result}</span>
         {/if}
       </div>
@@ -38,21 +50,38 @@
   </div>
 
   <div class="command-preview__actions">
-    <button
-      class="command-preview__btn command-preview__btn--approve"
-      onclick={onApprove}
-      disabled={!hasPending || isExecuting}
-    >
-      <Icon icon="mdi:check-all" />
-      Apply All
-    </button>
-    <button
-      class="command-preview__btn command-preview__btn--cancel"
-      onclick={onCancel}
-      disabled={isExecuting}
-    >
-      Cancel
-    </button>
+    {#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>
 
@@ -181,4 +210,25 @@
   .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

@@ -1,4 +1,4 @@
-import type { CommandPreviewItem } from "../../types/chat.js";
+import type { CommandPreviewItem } from '../../types/chat.js';
 interface Props {
     commands: CommandPreviewItem[];
     onApprove: () => void;

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

@@ -1,93 +1,111 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import CommandConsole from "./CommandConsole.svelte";
-  import { fn } from "storybook/test";
+  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",
+      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" },
+        { 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" },
+        {
+          id: 'response',
+          name: 'Response',
+          type: 'output',
+          dataType: 'string'
+        }
       ],
       configSchema: {
-        type: "object",
+        type: 'object',
         properties: {
-          model: { type: "string", default: "gpt-4" },
-          temperature: { type: "number", default: 0.7 },
-          maxTokens: { type: "number", default: 1024 },
-        },
-      },
+          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",
+      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" },
+        { 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" },
+        {
+          id: 'response',
+          name: 'Response',
+          type: 'output',
+          dataType: 'object'
+        },
+        {
+          id: 'status',
+          name: 'Status Code',
+          type: 'output',
+          dataType: 'number'
+        }
       ],
       configSchema: {
-        type: "object",
+        type: 'object',
         properties: {
-          method: { type: "string", default: "GET" },
-          headers: { type: "object", default: {} },
-          timeout: { type: "number", default: 30000 },
-        },
-      },
+          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",
+      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" },
+        {
+          id: 'variables',
+          name: 'Variables',
+          type: 'input',
+          dataType: 'object'
+        }
       ],
+      outputs: [{ id: 'text', name: 'Text', type: 'output', dataType: 'string' }],
       configSchema: {
-        type: "object",
+        type: 'object',
         properties: {
-          template: { type: "string", default: "" },
-          delimiter: { type: "string", default: "{{" },
-        },
-      },
-    },
+          template: { type: 'string', default: '' },
+          delimiter: { type: 'string', default: '{{' }
+        }
+      }
+    }
   ];
 
   const { Story } = defineMeta({
-    title: "Editor/CommandConsole",
+    title: 'Editor/CommandConsole',
     component: CommandConsole,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     parameters: {
-      layout: "padded",
+      layout: 'padded'
     },
     args: {
       nodeTypes: mockNodeTypes,
-      onUIAction: fn(),
-    },
+      onUIAction: fn()
+    }
   });
 </script>
 
 <Story
   name="Default"
   args={{
-    nodeTypes: mockNodeTypes,
+    nodeTypes: mockNodeTypes
   }}
 />

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

@@ -11,7 +11,7 @@ declare const CommandConsole: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import CommandConsole from "./CommandConsole.svelte";
+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;

package/dist/components/console/CommandConsole.svelte

@@ -5,7 +5,7 @@
 -->
 
 <script lang="ts">
-  import type { NodeMetadata } from "../../types/index.js";
+  import type { NodeMetadata } from '../../types/index.js';
   import {
     parseCommand,
     executeCommand,
@@ -17,19 +17,19 @@
     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";
+    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";
+    formatHelp
+  } from './formatters.js';
 
   interface Props {
     /** Available node types for command execution */
@@ -56,15 +56,15 @@
     if (!result.data) return null;
 
     switch (commandType) {
-      case "list_nodes":
+      case 'list_nodes':
         return formatListNodes(result.data as ListNodesResultData);
-      case "list_edges":
+      case 'list_edges':
         return formatListEdges(result.data as ListEdgesResultData);
-      case "list_types":
+      case 'list_types':
         return formatListTypes(result.data as ListTypesResultData);
-      case "info":
+      case 'info':
         return formatInfo(result.data as InfoResultData);
-      case "help":
+      case 'help':
         return formatHelp(result.data as HelpResultData);
       default:
         return null;
@@ -80,10 +80,10 @@
     if (!trimmed) return;
 
     // Add the input entry to the output
-    outputEntries.push({ type: "input", text: trimmed });
+    outputEntries.push({ type: 'input', text: trimmed });
 
     // Handle cls command (clear console output; use 'clear' to clear the canvas)
-    if (trimmed.toLowerCase() === "cls") {
+    if (trimmed.toLowerCase() === 'cls') {
       outputEntries = [];
       return;
     }
@@ -91,13 +91,13 @@
     // Parse the command
     const parseResult = parseCommand(trimmed);
     if (!parseResult.ok) {
-      outputEntries.push({ type: "error", text: parseResult.error });
+      outputEntries.push({ type: 'error', text: parseResult.error });
       return;
     }
 
     // Ensure we have a command context
     if (!commandContext) {
-      outputEntries.push({ type: "error", text: "No workflow loaded" });
+      outputEntries.push({ type: 'error', text: 'No workflow loaded' });
       return;
     }
 
@@ -106,29 +106,33 @@
     if (result.ok) {
       const formatted = formatResultData(parseResult.command.type, result);
       if (formatted) {
-        outputEntries.push({ type: "formatted", text: formatted });
+        outputEntries.push({ type: 'formatted', text: formatted });
       } else {
-        outputEntries.push({ type: "success", text: result.message });
+        outputEntries.push({ type: 'success', text: result.message });
       }
     } else {
-      outputEntries.push({ type: "error", text: result.error });
+      outputEntries.push({ type: 'error', text: result.error });
     }
   }
 
   function handleBatchSubmit(lines: string[]) {
     if (!commandContext) {
-      outputEntries.push({ type: "error", text: "No workflow loaded" });
+      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 }[] = [];
+    const parsed: {
+      line: string;
+      command?: import('../../commands/index.js').Command;
+      error?: string;
+    }[] = [];
     for (const line of lines) {
-      outputEntries.push({ type: "input", text: line });
+      outputEntries.push({ type: 'input', text: line });
 
-      if (line.toLowerCase() === "cls") {
+      if (line.toLowerCase() === 'cls') {
         outputEntries = [];
         parsed.length = 0;
         continue;
@@ -136,11 +140,11 @@
 
       const parseResult = parseCommand(line);
       if (!parseResult.ok) {
-        outputEntries.push({ type: "error", text: parseResult.error });
+        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`,
+          type: 'error',
+          text: `Batch failed at command ${succeeded + 1}/${totalCount}: parse error`
         });
         return;
       }
@@ -158,25 +162,25 @@
       if (result.ok) {
         const formatted = formatResultData(commands[i].type, result);
         if (formatted) {
-          outputEntries.push({ type: "formatted", text: formatted });
+          outputEntries.push({ type: 'formatted', text: formatted });
         } else {
-          outputEntries.push({ type: "success", text: result.message });
+          outputEntries.push({ type: 'success', text: result.message });
         }
       } else {
-        outputEntries.push({ type: "error", text: result.error });
+        outputEntries.push({ type: 'error', text: result.error });
       }
     }
 
     // Show summary
     if (batchResult.ok) {
       outputEntries.push({
-        type: "success",
-        text: `Batch: ${batchResult.completedCount}/${batchResult.totalCount} commands succeeded`,
+        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}`,
+        type: 'error',
+        text: `Batch failed at command ${batchResult.completedCount + 1}/${batchResult.totalCount}: ${batchResult.error}`
       });
     }
   }

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

@@ -1,5 +1,5 @@
-import type { NodeMetadata } from "../../types/index.js";
-import { type UIAction } from "../../commands/index.js";
+import type { NodeMetadata } from '../../types/index.js';
+import { type UIAction } from '../../commands/index.js';
 interface Props {
     /** Available node types for command execution */
     nodeTypes: NodeMetadata[];

package/dist/components/console/ConsoleAutocomplete.svelte

@@ -6,7 +6,7 @@
 -->
 
 <script lang="ts">
-  import { tick } from "svelte";
+  import { tick } from 'svelte';
 
   export interface Suggestion {
     /** The text to insert into the input */
@@ -37,7 +37,7 @@
     if (!visible || !listElement || selectedIndex < 0) return;
     const items = listElement.children;
     if (items[selectedIndex]) {
-      items[selectedIndex].scrollIntoView({ block: "nearest" });
+      items[selectedIndex].scrollIntoView({ block: 'nearest' });
     }
   });
 </script>
@@ -57,7 +57,10 @@
         id="console-autocomplete-option-{i}"
         tabindex="-1"
         aria-selected={i === selectedIndex}
-        onmousedown={(e: MouseEvent) => { e.preventDefault(); onAccept(suggestion); }}
+        onmousedown={(e: MouseEvent) => {
+          e.preventDefault();
+          onAccept(suggestion);
+        }}
       >
         <span class="console-autocomplete__label">{suggestion.label}</span>
         {#if suggestion.detail}