@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/components/chat/AIChatPanel.svelte

@@ -1,30 +1,30 @@
 <script lang="ts">
-  import type {
-    ChatHistoryMessage,
-    ChatRequest,
-    CommandPreviewItem,
-  } from "../../types/chat.js";
-  import type { NodeMetadata } from "../../types/index.js";
-  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 { extractCommands } from "../../chat/responseParser.js";
-  import { isMutatingCommand } from "../../chat/commandClassifier.js";
-  import { parseCommand } from "../../commands/parser.js";
-  import { executeCommand, executeBatch } from "../../commands/index.js";
-  import { createStoreCommandContext } from "../../commands/storeIntegration.svelte.js";
-  import CommandPreview from "./CommandPreview.svelte";
-  import { tick } from "svelte";
-  import Icon from "@iconify/svelte";
+  import type { ChatHistoryMessage, ChatRequest, CommandPreviewItem } from '../../types/chat.js';
+  import type { NodeMetadata } from '../../types/index.js';
+  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 { 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 CommandPreview from './CommandPreview.svelte';
+  import MarkdownDisplay from '../MarkdownDisplay.svelte';
+  import { tick } from 'svelte';
+  import Icon from '@iconify/svelte';
 
   // =========================================================================
   // Internal Display Message Type
   // =========================================================================
 
   interface DisplayMessage {
-    role: "user" | "assistant";
+    role: 'user' | 'assistant';
     content: string;
+    /** Set on auto-retry messages — renders as a muted notice, not a user bubble */
+    retryAttempt?: number;
     /** Mutating commands awaiting approval */
     commandPreview?: CommandPreviewItem[];
     /** Results from auto-executed read-only commands */
@@ -45,25 +45,23 @@
   // State
   // =========================================================================
 
+  const MAX_AUTO_RETRIES = 3;
+
   let displayMessages: DisplayMessage[] = $state([]);
-  let inputValue: string = $state("");
+  let inputValue: string = $state('');
   let isLoading: boolean = $state(false);
   let inputElement: HTMLTextAreaElement | undefined = $state();
   let messagesElement: HTMLDivElement | undefined = $state();
+  let autoRetryCount = 0;
 
   // =========================================================================
   // Derived State
   // =========================================================================
 
   const isDisabled = $derived(!workflowId);
-  const isChatConfigured = $derived(
-    endpointConfig?.endpoints?.chat !== undefined,
-  );
+  const isChatConfigured = $derived(endpointConfig?.endpoints?.chat !== undefined);
   const canSend = $derived(
-    inputValue.trim().length > 0 &&
-      !isLoading &&
-      !isDisabled &&
-      isChatConfigured,
+    inputValue.trim().length > 0 && !isLoading && !isDisabled && isChatConfigured
   );
 
   // =========================================================================
@@ -71,8 +69,8 @@
   // =========================================================================
 
   $effect(() => {
-    const _count = displayMessages.length;
-    const _loading = isLoading;
+    displayMessages.length;
+    isLoading;
     tick().then(() => {
       if (messagesElement) {
         messagesElement.scrollTop = messagesElement.scrollHeight;
@@ -97,15 +95,15 @@
         id: n.id,
         type: n.type,
         data: n.data,
-        position: n.position,
+        position: n.position
       })),
       edges: workflow.edges.map((e) => ({
         id: e.id,
         source: e.source,
         sourceHandle: e.sourceHandle,
         target: e.target,
-        targetHandle: e.targetHandle,
-      })),
+        targetHandle: e.targetHandle
+      }))
     };
   }
 
@@ -126,7 +124,7 @@
 
     // No commands — pure chat message
     if (commands.length === 0) {
-      return { role: "assistant", content: explanation || responseContent };
+      return { role: 'assistant', content: explanation || responseContent };
     }
 
     const context = getCommandContext();
@@ -137,7 +135,7 @@
       const parsed = parseCommand(raw);
       if (!parsed.ok) {
         // Treat parse errors as mutating (show in preview as error)
-        mutatingCommands.push({ raw, status: "error", result: parsed.error });
+        mutatingCommands.push({ raw, status: 'error', result: parsed.error });
         continue;
       }
 
@@ -154,13 +152,13 @@
           readOnlyResults.push(`> ${raw}\nError: No workflow loaded`);
         }
       } else {
-        mutatingCommands.push({ raw, status: "pending" });
+        mutatingCommands.push({ raw, status: 'pending' });
       }
     }
 
     const msg: DisplayMessage = {
-      role: "assistant",
-      content: explanation || responseContent,
+      role: 'assistant',
+      content: explanation || responseContent
     };
 
     if (readOnlyResults.length > 0) {
@@ -173,119 +171,159 @@
     return msg;
   }
 
-  /** Execute all pending mutating commands in a CommandPreview via executeBatch */
-  function handleApproveCommands(messageIndex: number) {
+  /** Execute all pending mutating commands one by one with progressive UI feedback */
+  async function handleApproveCommands(messageIndex: number) {
     const msg = displayMessages[messageIndex];
     if (!msg?.commandPreview) return;
 
     const context = getCommandContext();
     if (!context) {
-      // Mark all as error
       for (const cmd of msg.commandPreview) {
-        if (cmd.status === "pending") {
-          cmd.status = "error";
-          cmd.result = "No workflow loaded";
+        if (cmd.status === 'pending') {
+          cmd.status = 'error';
+          cmd.result = 'No workflow loaded';
         }
       }
-      appendErrorToHistory("Command execution failed: No workflow loaded");
+      appendErrorToHistory('Command execution failed: No workflow loaded');
       return;
     }
 
-    // Parse all pending commands
-    const pendingItems = msg.commandPreview.filter(
-      (c) => c.status === "pending",
-    );
-    const parsedCommands: { item: CommandPreviewItem; command: unknown }[] = [];
+    // Parse all pending commands first, before touching any status
+    const pendingItems = msg.commandPreview.filter((c) => c.status === 'pending');
+    const parsedCommands: {
+      item: CommandPreviewItem;
+      command: import('../../commands/types.js').Command;
+    }[] = [];
 
     for (const item of pendingItems) {
-      item.status = "executing";
       const parsed = parseCommand(item.raw);
       if (!parsed.ok) {
-        item.status = "error";
+        item.status = 'error';
         item.result = parsed.error;
-        // Revert other executing items back to pending
-        for (const other of pendingItems) {
-          if (other.status === "executing") other.status = "pending";
-        }
-        appendErrorToHistory(
-          `Command parse error for "${item.raw}": ${parsed.error}`,
-        );
+        appendErrorToHistory(`Command parse error for "${item.raw}": ${parsed.error}`);
         return;
       }
       parsedCommands.push({ item, command: parsed.command });
     }
 
-    // Execute atomically via executeBatch
-    const commands = parsedCommands.map(
-      (p) => p.command,
-    ) as import("../../commands/types.js").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;
+    context.dispatch.startTransaction(
+      totalCount === 1 ? 'batch: 1 command' : `batch: ${totalCount} commands`
+    );
+
+    let completedCount = 0;
+    let batchError: string | undefined;
 
-    let batchResult: ReturnType<typeof executeBatch>;
     try {
-      batchResult = executeBatch(commands, context);
+      for (let i = 0; i < parsedCommands.length; i++) {
+        const { item, command } = parsedCommands[i];
+        item.status = 'executing';
+
+        const result = executeCommand(command, context);
+
+        if (!result.ok) {
+          item.status = 'error';
+          item.result = result.error;
+          batchError = result.error;
+          context.dispatch.cancelTransaction();
+          break;
+        }
+
+        item.status = 'success';
+        item.result = result.message;
+        completedCount++;
+
+        // Pause between commands so canvas updates are visibly distinct
+        if (i < parsedCommands.length - 1) {
+          await new Promise<void>((resolve) => setTimeout(resolve, 100));
+        }
+      }
     } catch (err) {
-      // Unexpected error — reset all items to pending so the UI isn't stuck
+      context.dispatch.cancelTransaction();
       for (const { item } of parsedCommands) {
-        item.status = "pending";
+        if (item.status === 'executing') item.status = 'pending';
       }
       appendErrorToHistory(
-        `Unexpected execution error: ${err instanceof Error ? err.message : String(err)}`,
+        `Unexpected execution error: ${err instanceof Error ? err.message : String(err)}`
       );
       return;
     }
 
-    // Update status for each command
-    for (let i = 0; i < parsedCommands.length; i++) {
-      const { item } = parsedCommands[i];
-      const result = batchResult.results[i];
-      if (result) {
-        if (result.ok) {
-          item.status = "success";
-          item.result = result.message;
-        } else {
-          item.status = "error";
-          item.result = result.error;
-        }
-      } else {
-        // Commands after the failed one weren't executed
-        item.status = "pending";
-      }
+    if (!batchError) {
+      context.dispatch.commitTransaction();
+      return;
     }
 
-    if (!batchResult.ok) {
+    if (getBehaviorSettings().chatAutoRetry && workflowId && autoRetryCount < MAX_AUTO_RETRIES) {
+      autoRetryCount++;
+      const errorText = buildBatchErrorMessage(
+        completedCount,
+        totalCount,
+        batchError,
+        pendingItems
+      );
+      await sendMessageInternal(errorText, autoRetryCount);
+    } else {
       appendErrorToHistory(
-        `Command execution failed at command ${batchResult.completedCount + 1}/${batchResult.totalCount}: ${batchResult.error}`,
+        `Command execution failed at command ${completedCount + 1}/${totalCount}: ${batchError}`
       );
     }
   }
 
-  /** Dismiss a command preview without executing */
-  function handleCancelCommands(messageIndex: number) {
-    const msg = displayMessages[messageIndex];
-    if (!msg?.commandPreview) return;
-    // Remove the command preview entirely
-    msg.commandPreview = undefined;
+  /** Dismiss a command preview without executing — CommandPreview shows its own cancelled state */
+  function handleCancelCommands(_messageIndex: number) {
+    // Intentionally empty: CommandPreview owns the "Dismissed" display via resolvedAction state
   }
 
   /** Append an error message to conversation history so the LLM can self-correct */
   function appendErrorToHistory(errorMessage: string) {
     displayMessages.push({
-      role: "assistant",
-      content: `Error: ${errorMessage}`,
+      role: 'assistant',
+      content: `Error: ${errorMessage}`
     });
   }
 
+  /** 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
   // =========================================================================
 
-  async function sendMessage() {
-    const text = inputValue.trim();
+  /** Core send logic — shared by manual sends and auto-retry */
+  async function sendMessageInternal(text: string, retryAttempt?: number) {
     if (!text || isLoading || !workflowId) return;
 
-    // Add user message
-    displayMessages.push({ role: "user", content: text });
-    inputValue = "";
+    displayMessages.push({ role: 'user', content: text, retryAttempt });
     isLoading = true;
 
     try {
@@ -293,20 +331,17 @@
       const request: ChatRequest = {
         message: text,
         workflowState: getWorkflowState(),
-        history: history.slice(0, -1), // all except current message (already sent as `message`)
+        history: history.slice(0, -1) // all except current message
       };
 
       const response = await chatService.sendMessage(workflowId, request);
-
-      // Process response: extract commands, auto-execute read-only, queue mutating
       const displayMsg = processResponse(response.content);
       displayMessages.push(displayMsg);
     } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : "Failed to send message";
+      const errorMessage = err instanceof Error ? err.message : 'Failed to send message';
       displayMessages.push({
-        role: "assistant",
-        content: `Error: ${errorMessage}`,
+        role: 'assistant',
+        content: `Error: ${errorMessage}`
       });
     } finally {
       isLoading = false;
@@ -314,8 +349,16 @@
     }
   }
 
+  async function sendMessage() {
+    const text = inputValue.trim();
+    if (!text || isLoading || !workflowId) return;
+    inputValue = '';
+    autoRetryCount = 0;
+    await sendMessageInternal(text);
+  }
+
   function handleKeydown(event: KeyboardEvent) {
-    if (event.key === "Enter" && !event.shiftKey) {
+    if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
       sendMessage();
     }
@@ -337,12 +380,7 @@
     </div>
   {:else}
     <!-- Messages area -->
-    <div
-      class="ai-chat-panel__messages"
-      bind:this={messagesElement}
-      role="log"
-      aria-live="polite"
-    >
+    <div class="ai-chat-panel__messages" bind:this={messagesElement} role="log" aria-live="polite">
       {#if displayMessages.length === 0}
         <div class="ai-chat-panel__empty">
           <Icon icon="mdi:chat-outline" />
@@ -350,25 +388,42 @@
         </div>
       {/if}
       {#each displayMessages as message, msgIndex}
-        <div class="ai-chat-panel__bubble ai-chat-panel__bubble--{message.role}">
-          <div class="ai-chat-panel__bubble-content">{message.content}</div>
-          {#if message.readOnlyResults && message.readOnlyResults.length > 0}
-            <div class="ai-chat-panel__readonly-results">
-              {#each message.readOnlyResults as result}
-                <pre class="ai-chat-panel__readonly-result">{result}</pre>
-              {/each}
-            </div>
-          {/if}
-          {#if message.commandPreview && message.commandPreview.length > 0}
-            <div class="ai-chat-panel__command-preview">
-              <CommandPreview
-                commands={message.commandPreview}
-                onApprove={() => handleApproveCommands(msgIndex)}
-                onCancel={() => handleCancelCommands(msgIndex)}
-              />
-            </div>
-          {/if}
-        </div>
+        {#if message.retryAttempt !== undefined}
+          <div
+            class="ai-chat-panel__retry-notice"
+            class:ai-chat-panel__retry-notice--active={isLoading &&
+              msgIndex === displayMessages.length - 1}
+          >
+            <Icon icon="mdi:autorenew" />
+            <span>Auto-retrying (attempt {message.retryAttempt}/{MAX_AUTO_RETRIES})…</span>
+          </div>
+        {:else}
+          <div class="ai-chat-panel__bubble ai-chat-panel__bubble--{message.role}">
+            {#if message.role === 'user'}
+              <div class="ai-chat-panel__bubble-content">{message.content}</div>
+            {:else}
+              <div class="ai-chat-panel__bubble-content">
+                <MarkdownDisplay content={message.content} />
+              </div>
+            {/if}
+            {#if message.readOnlyResults && message.readOnlyResults.length > 0}
+              <div class="ai-chat-panel__readonly-results">
+                {#each message.readOnlyResults as result}
+                  <pre class="ai-chat-panel__readonly-result">{result}</pre>
+                {/each}
+              </div>
+            {/if}
+            {#if message.commandPreview && message.commandPreview.length > 0}
+              <div class="ai-chat-panel__command-preview">
+                <CommandPreview
+                  commands={message.commandPreview}
+                  onApprove={() => handleApproveCommands(msgIndex)}
+                  onCancel={() => handleCancelCommands(msgIndex)}
+                />
+              </div>
+            {/if}
+          </div>
+        {/if}
       {/each}
       {#if isLoading}
         <div class="ai-chat-panel__bubble ai-chat-panel__bubble--assistant">
@@ -388,7 +443,7 @@
         bind:value={inputValue}
         onkeydown={handleKeydown}
         class="ai-chat-panel__input"
-        placeholder={placeholder ?? "Describe what you want to build..."}
+        placeholder={placeholder ?? 'Describe what you want to build...'}
         rows="1"
         disabled={isLoading}
       ></textarea>
@@ -480,6 +535,23 @@
     font-size: 1.5rem;
   }
 
+  /* Auto-retry notice */
+  .ai-chat-panel__retry-notice {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--fd-space-xs);
+    font-size: var(--fd-text-xs);
+    color: var(--fd-muted-foreground);
+    opacity: 0.7;
+    padding: var(--fd-space-3xs) 0;
+    animation: fadeIn 0.15s ease-out;
+  }
+
+  .ai-chat-panel__retry-notice--active :global(svg) {
+    animation: spin 1s linear infinite;
+  }
+
   /* Message bubbles */
   .ai-chat-panel__bubble {
     max-width: 80%;
@@ -499,7 +571,6 @@
     border-radius: var(--fd-radius-md);
     font-size: var(--fd-text-sm);
     line-height: 1.5;
-    white-space: pre-wrap;
     word-break: break-word;
   }
 
@@ -507,6 +578,7 @@
     background: var(--fd-primary);
     color: var(--fd-primary-foreground);
     border-bottom-right-radius: var(--fd-radius-xs);
+    white-space: pre-wrap;
   }
 
   .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content {
@@ -515,6 +587,64 @@
     border-bottom-left-radius: var(--fd-radius-xs);
   }
 
+  /* Markdown typography inside assistant bubbles */
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(.markdown-display) {
+    font-size: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(p) {
+    margin: 0 0 0.5em;
+  }
+
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(p:last-child),
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(ul:last-child),
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(ol:last-child) {
+    margin-bottom: 0;
+  }
+
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(ul),
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(ol) {
+    margin: 0 0 0.5em;
+    padding-left: 1.25em;
+  }
+
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(li) {
+    margin-bottom: 0.2em;
+  }
+
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(code) {
+    font-family: var(--fd-font-mono);
+    font-size: 0.875em;
+    background: var(--fd-background);
+    padding: 0.1em 0.3em;
+    border-radius: var(--fd-radius-xs);
+  }
+
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(pre) {
+    background: var(--fd-background);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    padding: var(--fd-space-xs) var(--fd-space-sm);
+    overflow-x: auto;
+    margin: 0.5em 0;
+  }
+
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(pre code) {
+    background: none;
+    padding: 0;
+    font-size: var(--fd-text-xs);
+  }
+
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(strong) {
+    font-weight: 600;
+  }
+
+  .ai-chat-panel__bubble--assistant .ai-chat-panel__bubble-content :global(em) {
+    font-style: italic;
+  }
+
   /* Read-only command results */
   .ai-chat-panel__readonly-results {
     margin-top: var(--fd-space-xs);
@@ -580,6 +710,15 @@
     animation-delay: 0.4s;
   }
 
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
   @keyframes bounce {
     0%,
     60%,

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

@@ -1,6 +1,6 @@
-import type { NodeMetadata } from "../../types/index.js";
-import type { UIAction } from "../../commands/types.js";
-import type { EndpointConfig } from "../../config/endpoints.js";
+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;