@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/components/chat/AIChatPanel.svelte

@@ -4,18 +4,23 @@
   import type { UIAction } from '../../commands/types.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
   import { chatService } from '../../services/chatService.js';
-  import { getWorkflowStore } from '../../stores/workflowStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { getBehaviorSettings } from '../../stores/settingsStore.svelte.js';
   import { extractCommands } from '../../chat/responseParser.js';
   import { isMutatingCommand } from '../../chat/commandClassifier.js';
   import { parseCommand } from '../../commands/parser.js';
   import { executeCommand } from '../../commands/index.js';
   import { createStoreCommandContext } from '../../commands/storeIntegration.svelte.js';
+  import {
+    buildRetryFeedback,
+    type BatchOutcome,
+    type ParseFailure
+  } from '../../chat/batchFeedback.js';
   import CommandPreview from './CommandPreview.svelte';
   import MarkdownDisplay from '../MarkdownDisplay.svelte';
   import { tick } from 'svelte';
   import Icon from '@iconify/svelte';
-  import { m, warnDeprecatedProp } from '../../messages/index.js';
+  import { m } from '../../messages/index.js';
 
   // =========================================================================
   // Internal Display Message Type
@@ -36,26 +41,17 @@
     nodeTypes: NodeMetadata[];
     workflowId?: string;
     onUIAction?: (action: UIAction) => void;
-    /**
-     * @deprecated since v1.8 — use `messages.chat.placeholder`. Removed in v2.0.
-     */
-    placeholder?: string;
     endpointConfig?: EndpointConfig | null;
   }
 
-  let { nodeTypes, workflowId, onUIAction, placeholder, endpointConfig }: Props = $props();
+  let { nodeTypes, workflowId, onUIAction, endpointConfig }: Props = $props();
 
-  // svelte-ignore state_referenced_locally — deprecation warns once per mount; later prop rebinds aren't relevant
-  if (placeholder !== undefined) {
-    warnDeprecatedProp('AIChatPanel', 'placeholder', 'messages.chat.placeholder');
-  }
+  const fd = getInstance();
 
   // Hoist the chat branch — read in placeholder, header, three welcome states,
   // auto-retry banner, and the send button aria-label.
   const t = $derived(m().chat);
 
-  const resolvedPlaceholder = $derived(placeholder ?? t.placeholder);
-
   // =========================================================================
   // State
   // =========================================================================
@@ -84,8 +80,8 @@
   // =========================================================================
 
   $effect(() => {
-    displayMessages.length;
-    isLoading;
+    // Read scroll-relevant state so the effect re-runs when messages change
+    const _deps = [displayMessages.length, isLoading];
     tick().then(() => {
       if (messagesElement) {
         messagesElement.scrollTop = messagesElement.scrollHeight;
@@ -103,7 +99,7 @@
   }
 
   function getWorkflowState(): unknown {
-    const workflow = getWorkflowStore();
+    const workflow = fd.workflow.current;
     if (!workflow) return null;
     return {
       nodes: workflow.nodes.map((n) => ({
@@ -123,7 +119,7 @@
   }
 
   function getCommandContext() {
-    return createStoreCommandContext(nodeTypes, onUIAction);
+    return createStoreCommandContext(nodeTypes, onUIAction, fd);
   }
 
   // =========================================================================
@@ -186,28 +182,21 @@
     return msg;
   }
 
-  /** Execute all pending mutating commands one by one with progressive UI feedback */
+  /**
+   * Execute the parseable commands in a batch one by one with progressive UI
+   * feedback.
+   *
+   * Commands that failed to parse are *isolated* — they stay marked as errors
+   * and are skipped, but they no longer abort the whole batch, so the healthy
+   * subset still applies (matching the long-standing "applied to a certain
+   * extent" expectation). After execution, if anything failed to parse or
+   * execute and auto-retry is enabled, specific feedback is sent back so the
+   * assistant can resend corrected commands.
+   */
   async function handleApproveCommands(messageIndex: number) {
     const msg = displayMessages[messageIndex];
     if (!msg?.commandPreview) return;
 
-    // Refuse to run the batch if any command failed to parse. A corrupted batch
-    // (e.g. multiline set without """) causes partial execution and can hang the
-    // app — rejecting the whole batch is safer than executing the healthy subset.
-    const parseErrorCount = msg.commandPreview.filter((c) => c.status === 'error').length;
-    if (parseErrorCount > 0) {
-      for (const cmd of msg.commandPreview) {
-        if (cmd.status === 'pending') {
-          cmd.status = 'error';
-          cmd.result = 'Batch refused: fix parse errors before executing';
-        }
-      }
-      appendErrorToHistory(
-        `Batch was not executed: ${parseErrorCount} command${parseErrorCount > 1 ? 's have' : ' has'} parse errors. Dismiss this batch and ask the AI to provide corrected commands.`
-      );
-      return;
-    }
-
     const context = getCommandContext();
     if (!context) {
       for (const cmd of msg.commandPreview) {
@@ -220,7 +209,13 @@
       return;
     }
 
-    // Parse all pending commands first, before touching any status
+    // Commands that failed to parse (in processResponse) are isolated, not run.
+    // Capture their raw text + reason so we can feed specific corrections back.
+    const parseErrors: ParseFailure[] = msg.commandPreview
+      .filter((c) => c.status === 'error')
+      .map((c) => ({ raw: c.raw, error: c.result ?? 'Parse error' }));
+
+    // Re-parse the pending (parseable) commands, preserving order.
     const pendingItems = msg.commandPreview.filter((c) => c.status === 'pending');
     const parsedCommands: {
       item: CommandPreviewItem;
@@ -230,23 +225,37 @@
     for (const item of pendingItems) {
       const parsed = parseCommand(item.raw);
       if (!parsed.ok) {
+        // Re-parse disagreed with processResponse — isolate it like a parse error.
         item.status = 'error';
         item.result = parsed.error;
-        appendErrorToHistory(`Command parse error for "${item.raw}": ${parsed.error}`);
-        return;
+        parseErrors.push({ raw: item.raw, error: parsed.error });
+        continue;
       }
       parsedCommands.push({ item, command: parsed.command });
     }
 
-    // Execute commands one by one inside a single transaction.
-    // A 100ms pause between commands lets the canvas visibly update at each step.
     const totalCount = parsedCommands.length;
+
+    // Nothing parseable to run — feed the parse errors straight back so the
+    // assistant can resend a corrected batch.
+    if (totalCount === 0) {
+      await resolveBatchOutcome({
+        completedCount: 0,
+        executionError: undefined,
+        rolledBack: false,
+        parseErrors
+      });
+      return;
+    }
+
+    // Execute the healthy subset one by one inside a single transaction.
+    // A 100ms pause between commands lets the canvas visibly update at each step.
     context.dispatch.startTransaction(
       totalCount === 1 ? 'batch: 1 command' : `batch: ${totalCount} commands`
     );
 
     let completedCount = 0;
-    let batchError: string | undefined;
+    let executionError: string | undefined;
 
     try {
       for (let i = 0; i < parsedCommands.length; i++) {
@@ -258,7 +267,7 @@
         if (!result.ok) {
           item.status = 'error';
           item.result = result.error;
-          batchError = result.error;
+          executionError = result.error;
           context.dispatch.cancelTransaction();
           break;
         }
@@ -283,24 +292,48 @@
       return;
     }
 
-    if (!batchError) {
-      context.dispatch.commitTransaction();
+    if (executionError !== undefined) {
+      // An executed command failed — the whole batch is rolled back (atomic,
+      // long-standing behaviour). Retry feedback covers both the execution
+      // failure and any parse-skipped commands.
+      await resolveBatchOutcome({
+        completedCount,
+        executionError,
+        rolledBack: true,
+        parseErrors
+      });
       return;
     }
 
-    if (getBehaviorSettings().chatAutoRetry && workflowId && autoRetryCount < MAX_AUTO_RETRIES) {
-      autoRetryCount++;
-      const errorText = buildBatchErrorMessage(
+    // Every parseable command applied — commit so the subset persists.
+    context.dispatch.commitTransaction();
+
+    // If some commands couldn't be parsed, ask the assistant to resend them.
+    if (parseErrors.length > 0) {
+      await resolveBatchOutcome({
         completedCount,
-        totalCount,
-        batchError,
-        pendingItems
-      );
-      await sendMessageInternal(errorText, autoRetryCount);
+        executionError: undefined,
+        rolledBack: false,
+        parseErrors
+      });
+    }
+  }
+
+  /**
+   * After a batch finishes with failures (parse and/or execution), either
+   * auto-retry with specific feedback so the assistant can self-correct, or —
+   * when auto-retry is off/exhausted — surface the same summary in the log.
+   */
+  async function resolveBatchOutcome(outcome: BatchOutcome) {
+    const feedback = buildRetryFeedback(outcome);
+    const canRetry =
+      getBehaviorSettings().chatAutoRetry && !!workflowId && autoRetryCount < MAX_AUTO_RETRIES;
+
+    if (canRetry) {
+      autoRetryCount++;
+      await sendMessageInternal(feedback, autoRetryCount);
     } else {
-      appendErrorToHistory(
-        `Command execution failed at command ${completedCount + 1}/${totalCount}: ${batchError}`
-      );
+      appendErrorToHistory(feedback);
     }
   }
 
@@ -317,36 +350,6 @@
     });
   }
 
-  /** Build a structured error report from a failed batch for the LLM */
-  function buildBatchErrorMessage(
-    completedCount: number,
-    totalCount: number,
-    error: string,
-    items: CommandPreviewItem[]
-  ): string {
-    const lines: string[] = [
-      `Batch execution failed at command ${completedCount + 1}/${totalCount}: ${error}`
-    ];
-
-    if (completedCount > 0) {
-      lines.push('\nCommands that succeeded (rolled back):');
-      for (let i = 0; i < completedCount; i++) {
-        lines.push(`  ${i + 1}. ${items[i].raw}`);
-      }
-    }
-
-    lines.push('\nFailed command:');
-    lines.push(`  ${items[completedCount]?.raw ?? '(unknown)'}`);
-
-    const remaining = totalCount - completedCount - 1;
-    if (remaining > 0) {
-      lines.push(`\n${remaining} command(s) were skipped.`);
-    }
-
-    lines.push('\nPlease provide corrected commands to achieve the same goal.');
-    return lines.join('\n');
-  }
-
   // =========================================================================
   // Message Handling
   // =========================================================================
@@ -366,7 +369,7 @@
         history: history.slice(0, -1) // all except current message
       };
 
-      const response = await chatService.sendMessage(workflowId, request);
+      const response = await chatService.sendMessage(fd.api.config, workflowId, request);
       const displayMsg = processResponse(response.content);
       displayMessages.push(displayMsg);
     } catch (err) {
@@ -419,7 +422,8 @@
           <span>{t.helpBuild}</span>
         </div>
       {/if}
-      {#each displayMessages as message, msgIndex}
+      <!-- Append-only chat log without stable IDs — index is the identity -->
+      {#each displayMessages as message, msgIndex (msgIndex)}
         {#if message.retryAttempt !== undefined}
           <div
             class="ai-chat-panel__retry-notice"
@@ -440,7 +444,7 @@
             {/if}
             {#if message.readOnlyResults && message.readOnlyResults.length > 0}
               <div class="ai-chat-panel__readonly-results">
-                {#each message.readOnlyResults as result}
+                {#each message.readOnlyResults as result, i (i)}
                   <pre class="ai-chat-panel__readonly-result">{result}</pre>
                 {/each}
               </div>
@@ -475,7 +479,7 @@
         bind:value={inputValue}
         onkeydown={handleKeydown}
         class="ai-chat-panel__input"
-        placeholder={resolvedPlaceholder}
+        placeholder={t.placeholder}
         rows="1"
         disabled={isLoading}
       ></textarea>

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

@@ -5,10 +5,6 @@ interface Props {
     nodeTypes: NodeMetadata[];
     workflowId?: string;
     onUIAction?: (action: UIAction) => void;
-    /**
-     * @deprecated since v1.8 — use `messages.chat.placeholder`. Removed in v2.0.
-     */
-    placeholder?: string;
     endpointConfig?: EndpointConfig | null;
 }
 declare const AIChatPanel: import("svelte").Component<Props, {}, "">;

package/dist/components/chat/CommandPreview.svelte

@@ -32,7 +32,8 @@
 
 <div class="command-preview" role="region" aria-label={t.ariaLabel}>
   <div class="command-preview__list">
-    {#each commands as command, i}
+    <!-- Fixed positional batch (raw strings may repeat) — index is the identity -->
+    {#each commands as command, i (i)}
       <div class="command-preview__item command-preview__item--{command.status}">
         <span class="command-preview__status">
           {#if command.status === 'pending'}

package/dist/components/console/CommandConsole.svelte

@@ -20,6 +20,7 @@
     type HelpResultData
   } from '../../commands/index.js';
   import { createStoreCommandContext } from '../../commands/storeIntegration.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { updateSettings, getUiSettings } from '../../stores/settingsStore.svelte.js';
   import ConsoleInput from './ConsoleInput.svelte';
   import ConsoleOutput, { type ConsoleEntry } from './ConsoleOutput.svelte';
@@ -41,13 +42,14 @@
 
   let { nodeTypes, onUIAction }: Props = $props();
 
+  const fd = getInstance();
+
   let outputEntries: ConsoleEntry[] = $state([]);
-  let commandContext: CommandContext | null = $state(null);
 
-  // Recreate context when nodeTypes changes
-  $effect(() => {
-    commandContext = createStoreCommandContext(nodeTypes, onUIAction);
-  });
+  // Recreated whenever nodeTypes changes; null while no workflow is loaded
+  const commandContext: CommandContext | null = $derived(
+    createStoreCommandContext(nodeTypes, onUIAction, fd)
+  );
 
   /**
    * Attempts to format CommandResult data into a rich display string.

package/dist/components/console/ConsoleAutocomplete.svelte

@@ -6,8 +6,6 @@
 -->
 
 <script lang="ts">
-  import { tick } from 'svelte';
-
   export interface Suggestion {
     /** The text to insert into the input */
     value: string;
@@ -26,9 +24,15 @@
     selectedIndex: number;
     /** Called when a suggestion is accepted */
     onAccept: (suggestion: Suggestion) => void;
+    /**
+     * Listbox element id — supplied by the owning combobox (ConsoleInput) so
+     * its aria-controls/aria-activedescendant match, and unique per instance
+     * so two FlowDrop editors on one page don't render colliding DOM ids.
+     */
+    listboxId: string;
   }
 
-  let { suggestions, visible, selectedIndex, onAccept }: Props = $props();
+  let { suggestions, visible, selectedIndex, onAccept, listboxId }: Props = $props();
 
   let listElement: HTMLDivElement | undefined = $state();
 
@@ -43,18 +47,13 @@
 </script>
 
 {#if visible && suggestions.length > 0}
-  <div
-    class="console-autocomplete"
-    role="listbox"
-    id="console-autocomplete-listbox"
-    bind:this={listElement}
-  >
-    {#each suggestions as suggestion, i}
+  <div class="console-autocomplete" role="listbox" id={listboxId} bind:this={listElement}>
+    {#each suggestions as suggestion, i (suggestion.value)}
       <div
         class="console-autocomplete__item"
         class:console-autocomplete__item--selected={i === selectedIndex}
         role="option"
-        id="console-autocomplete-option-{i}"
+        id="{listboxId}-option-{i}"
         tabindex="-1"
         aria-selected={i === selectedIndex}
         onmousedown={(e: MouseEvent) => {

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

@@ -15,6 +15,12 @@ interface Props {
     selectedIndex: number;
     /** Called when a suggestion is accepted */
     onAccept: (suggestion: Suggestion) => void;
+    /**
+     * Listbox element id — supplied by the owning combobox (ConsoleInput) so
+     * its aria-controls/aria-activedescendant match, and unique per instance
+     * so two FlowDrop editors on one page don't render colliding DOM ids.
+     */
+    listboxId: string;
 }
 declare const ConsoleAutocomplete: import("svelte").Component<Props, {}, "">;
 type ConsoleAutocomplete = ReturnType<typeof ConsoleAutocomplete>;

package/dist/components/console/ConsoleInput.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
   import type { NodeMetadata } from '../../types/index.js';
-  import { getWorkflowStore } from '../../stores/workflowStore.svelte.js';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import { toShortId, resolveNode } from '../../commands/index.js';
   import ConsoleAutocomplete, { type Suggestion } from './ConsoleAutocomplete.svelte';
 
@@ -26,6 +26,14 @@
 
   let { open, nodeTypes = [], onSubmit, onBatchSubmit, onClose }: Props = $props();
 
+  const fd = getInstance();
+
+  // Unique per component instance so two FlowDrop editors on one page
+  // don't render colliding DOM ids; shared with the autocomplete listbox so
+  // aria-controls/aria-activedescendant stay consistent.
+  const uid = $props.id();
+  const listboxId = `${uid}-console-autocomplete-listbox`;
+
   let inputValue = $state('');
   let inputElement: HTMLInputElement | undefined = $state();
 
@@ -94,7 +102,7 @@
    * Returns suggestions with short IDs and labels.
    */
   function getWorkflowNodeSuggestions(prefix: string): Suggestion[] {
-    const workflow = getWorkflowStore();
+    const workflow = fd.workflow.current;
     if (!workflow) return [];
 
     const lowerPrefix = prefix.toLowerCase();
@@ -207,7 +215,7 @@
     partial: string,
     filter: 'input' | 'output' | 'all'
   ): Suggestion[] {
-    const workflow = getWorkflowStore();
+    const workflow = fd.workflow.current;
     if (!workflow) return [];
 
     const node = resolveNode(nodeId, workflow.nodes);
@@ -256,7 +264,7 @@
    * Get config key suggestions for a resolved node, filtered by prefix.
    */
   function getConfigKeySuggestions(nodeId: string, partial: string): Suggestion[] {
-    const workflow = getWorkflowStore();
+    const workflow = fd.workflow.current;
     if (!workflow) return [];
 
     const node = resolveNode(nodeId, workflow.nodes);
@@ -657,6 +665,7 @@
         visible={acVisible}
         selectedIndex={acSelectedIndex}
         onAccept={acceptSuggestion}
+        {listboxId}
       />
       <input
         bind:this={inputElement}
@@ -668,9 +677,9 @@
         autocomplete="off"
         role="combobox"
         aria-expanded={acVisible}
-        aria-controls="console-autocomplete-listbox"
+        aria-controls={listboxId}
         aria-activedescendant={acVisible && acSuggestions.length > 0
-          ? `console-autocomplete-option-${acSelectedIndex}`
+          ? `${listboxId}-option-${acSelectedIndex}`
           : undefined}
         onkeydown={handleKeydown}
         oninput={handleInput}

package/dist/components/console/ConsoleOutput.svelte

@@ -33,7 +33,8 @@
 </script>
 
 <div class="console-output" bind:this={outputElement} role="log" aria-live="polite">
-  {#each entries as entry}
+  <!-- Append-only log without stable IDs — index is the identity -->
+  {#each entries as entry, i (i)}
     <div class="console-output__entry console-output__entry--{entry.type}">
       {#if entry.type === 'input'}
         <span class="console-output__prefix">&gt;</span>

package/dist/components/form/FormArray.svelte

@@ -20,7 +20,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte';
   import type { FieldSchema } from './types.js';
-  import { m, warnDeprecatedProp } from '../../messages/index.js';
+  import { m } from '../../messages/index.js';
 
   interface Props {
     /** Field identifier */
@@ -34,7 +34,8 @@
     /** Maximum number of items allowed */
     maxItems?: number;
     /**
-     * @deprecated since v1.8 — use `messages.form.array.add`. Removed in v2.0.
+     * Per-instance label for the add button (e.g. "Add Header" derived from
+     * the item schema title). Falls back to the global `messages.form.array.add`.
      */
     addLabel?: string;
     /** Whether the field is disabled */
@@ -54,11 +55,6 @@
     onChange
   }: Props = $props();
 
-  // svelte-ignore state_referenced_locally — deprecation warns once per mount; later prop rebinds aren't relevant
-  if (addLabel !== undefined) {
-    warnDeprecatedProp('FormArray', 'addLabel', 'messages.form.array.add');
-  }
-
   // Hoist the array branch — every {#each} iteration would otherwise re-walk
   // `m().form.array.*` for ~6 keys per item. One getter call instead of N×6.
   const t = $derived(m().form.array);
@@ -390,7 +386,7 @@
                   onchange={(e) => updateItem(index, e.currentTarget.value)}
                   {disabled}
                 >
-                  {#each itemSchema.enum as option}
+                  {#each itemSchema.enum as option (option)}
                     <option value={String(option)}>{String(option)}</option>
                   {/each}
                 </select>
@@ -437,7 +433,7 @@
                               updateObjectProperty(index, propKey, e.currentTarget.value)}
                             {disabled}
                           >
-                            {#each propFieldSchema.enum as option}
+                            {#each propFieldSchema.enum as option (option)}
                               <option value={String(option)}>{String(option)}</option>
                             {/each}
                           </select>

package/dist/components/form/FormArray.svelte.d.ts

@@ -11,7 +11,8 @@ interface Props {
     /** Maximum number of items allowed */
     maxItems?: number;
     /**
-     * @deprecated since v1.8 — use `messages.form.array.add`. Removed in v2.0.
+     * Per-instance label for the add button (e.g. "Add Header" derived from
+     * the item schema title). Falls back to the global `messages.form.array.add`.
      */
     addLabel?: string;
     /** Whether the field is disabled */