@flowdrop/flowdrop 1.4.0 → 1.5.0

package/dist/components/chat/CommandPreview.svelte

@@ -0,0 +1,184 @@
+<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"));
+</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">
+    <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>
+  </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);
+  }
+</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,93 @@
+<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,259 @@
+<!--
+  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;