@flowdrop/flowdrop 1.13.0 → 1.14.0

package/README.md

@@ -158,6 +158,11 @@ FlowDrop provides tree-shakeable sub-module exports so you can import only what
 | `@flowdrop/flowdrop/settings`      | SettingsPanel, stores, services                    |
 | `@flowdrop/flowdrop/styles`        | Base CSS stylesheet                                |
 | `@flowdrop/flowdrop/schema`        | Workflow JSON schema                               |
+| `@flowdrop/flowdrop/openapi`       | OpenAPI spec (YAML) for the FlowDrop backend API   |
+
+### OpenAPI spec
+
+The full OpenAPI spec for the FlowDrop backend API ships with the package, version-matched to your installed release. It defines the node-config / form-element schema (`ConfigProperty`), playground messages, and every endpoint. Resolve it from `@flowdrop/flowdrop/openapi`, or read it directly at `node_modules/@flowdrop/flowdrop/dist/openapi/v1/openapi.yaml`. Point your AI assistant at that file when authoring node config schemas. The latest spec is also browsable at [api.flowdrop.io](https://api.flowdrop.io).
 
 ## Integration
 

package/dist/components/ConfigPanel.svelte

@@ -77,7 +77,13 @@
           <Icon icon="heroicons:arrows-right-left" />
         </button>
       {/if}
-      <button class="config-panel__close" onclick={onClose} aria-label={m().layout.closeConfigPanel}> × </button>
+      <button
+        class="config-panel__close"
+        onclick={onClose}
+        aria-label={m().layout.closeConfigPanel}
+      >
+        ×
+      </button>
     </div>
   </div>
 

package/dist/components/NodeSwapPicker.svelte

@@ -81,7 +81,11 @@
 <div class="swap-picker">
   <!-- Header -->
   <div class="swap-picker__header">
-    <button class="swap-picker__back" onclick={onCancel} aria-label={m().layout.backToConfiguration}>
+    <button
+      class="swap-picker__back"
+      onclick={onCancel}
+      aria-label={m().layout.backToConfiguration}
+    >
       <Icon icon="heroicons:arrow-left" />
     </button>
     <h2 class="swap-picker__title">Swap Node</h2>

package/dist/components/PipelineStatus.svelte

@@ -37,8 +37,17 @@
     ) => void;
   }
 
-  let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady, runLabel, isEmbedded = false, refreshTrigger = 0 }: Props =
-    $props();
+  let {
+    pipelineId,
+    workflow,
+    apiClient,
+    baseUrl,
+    endpointConfig,
+    onActionsReady,
+    runLabel,
+    isEmbedded = false,
+    refreshTrigger = 0
+  }: Props = $props();
 
   // Track previous trigger value so the $effect only fires on increments, not on initial mount.
   // svelte-ignore state_referenced_locally

package/dist/components/SettingsPanel.svelte

@@ -362,7 +362,11 @@
 
 <div class="flowdrop-settings-panel {className}">
   <!-- Tab Navigation -->
-  <div class="flowdrop-settings-panel__tabs" role="tablist" aria-label={m().layout.settingsCategories}>
+  <div
+    class="flowdrop-settings-panel__tabs"
+    role="tablist"
+    aria-label={m().layout.settingsCategories}
+  >
     {#each categories as category, index (category)}
       <button
         class="flowdrop-settings-panel__tab"

package/dist/components/WorkflowEditor.svelte

@@ -277,7 +277,11 @@
       const rawStatus = statuses[node.id];
       if (!rawStatus) return node;
 
-      const existing = node.data.executionInfo ?? { status: 'idle' as const, executionCount: 0, isExecuting: false };
+      const existing = node.data.executionInfo ?? {
+        status: 'idle' as const,
+        executionCount: 0,
+        isExecuting: false
+      };
       return {
         ...node,
         data: {

package/dist/components/chat/AIChatPanel.svelte

@@ -288,11 +288,7 @@
       return;
     }
 
-    if (
-      getBehaviorSettings().chatAutoRetry &&
-      workflowId &&
-      autoRetryCount < MAX_AUTO_RETRIES
-    ) {
+    if (getBehaviorSettings().chatAutoRetry && workflowId && autoRetryCount < MAX_AUTO_RETRIES) {
       autoRetryCount++;
       const errorText = buildBatchErrorMessage(
         completedCount,

package/dist/components/form/FormAutocomplete.svelte

@@ -121,6 +121,7 @@
   // Stable fingerprint — any change triggers selection clearing.
   // JSON.stringify gives a canonical string without null-byte ambiguity.
   const depFingerprint = $derived(JSON.stringify(depParamValues));
+  // svelte-ignore state_referenced_locally — intentional initial snapshot; the effect below tracks subsequent changes
   let prevDepFingerprint = depFingerprint;
 
   $effect(() => {
@@ -721,11 +722,7 @@
     style={popoverStyle}
     onmousedown={(e) => e.preventDefault()}
   >
-    <ul
-      class="form-autocomplete__listbox"
-      role="listbox"
-      aria-label={t.suggestions}
-    >
+    <ul class="form-autocomplete__listbox" role="listbox" aria-label={t.suggestions}>
       {#if isLoading}
         <li class="form-autocomplete__status form-autocomplete__status--loading">
           <Icon icon="heroicons:arrow-path" class="form-autocomplete__status-icon" />

package/dist/components/interrupt/ChoicePrompt.svelte

@@ -135,7 +135,11 @@
   {/if}
 
   <!-- Options -->
-  <div class="choice-prompt__options" role={isMultiple ? 'group' : 'radiogroup'} aria-label={config.message}>
+  <div
+    class="choice-prompt__options"
+    role={isMultiple ? 'group' : 'radiogroup'}
+    aria-label={config.message}
+  >
     {#each config.options as option (option.value)}
       {@const isChecked = isResolved ? isOptionResolved(option) : selectedValues.has(option.value)}
       <label

package/dist/components/interrupt/InterruptBubble.svelte

@@ -16,10 +16,7 @@
   import ReviewPrompt from './ReviewPrompt.svelte';
   import MessageTagStrip from '../playground/MessageTagStrip.svelte';
   import HierarchyTrail from '../playground/HierarchyTrail.svelte';
-  import type {
-    MessageHierarchyItem,
-    MessageTag
-  } from '../../types/playground.js';
+  import type { MessageHierarchyItem, MessageTag } from '../../types/playground.js';
   import type {
     Interrupt,
     InterruptType,
@@ -304,7 +301,9 @@
       <time
         class="interrupt-bubble__timestamp"
         datetime={currentInterrupt.resolvedAt ?? currentInterrupt.createdAt}
-        aria-label="sent at {formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}"
+        aria-label="sent at {formatTimestamp(
+          currentInterrupt.resolvedAt ?? currentInterrupt.createdAt
+        )}"
       >
         {formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}
       </time>

package/dist/components/playground/ChatBubble.svelte

@@ -10,12 +10,7 @@
   import HierarchyTrail from './HierarchyTrail.svelte';
   import MessageTagStrip from './MessageTagStrip.svelte';
   import MessageMarkdown from './MessageMarkdown.svelte';
-  import {
-    formatDuration,
-    formatTimestamp,
-    getRoleIcon,
-    getRoleLabel
-  } from './messageDisplay.js';
+  import { formatDuration, formatTimestamp, getRoleIcon, getRoleLabel } from './messageDisplay.js';
   import { m } from '../../messages/index.js';
 
   interface Props {
@@ -55,7 +50,8 @@
           class="message-bubble__timestamp"
           datetime={message.timestamp}
           aria-label="sent at {formatTimestamp(message.timestamp)}"
-        >{formatTimestamp(message.timestamp)}</time>
+          >{formatTimestamp(message.timestamp)}</time
+        >
       {/if}
     </div>
 
@@ -157,7 +153,9 @@
     background-color: var(--fd-card);
     border: 1px solid var(--fd-border);
     color: var(--fd-card-foreground);
-    box-shadow: 0 1px 3px 0 oklch(0% 0 0 / 0.06), 0 1px 2px -1px oklch(0% 0 0 / 0.04);
+    box-shadow:
+      0 1px 3px 0 oklch(0% 0 0 / 0.06),
+      0 1px 2px -1px oklch(0% 0 0 / 0.04);
     border-bottom-left-radius: var(--fd-radius-sm);
   }
 

package/dist/components/playground/ChatInput.svelte

@@ -58,23 +58,27 @@
   let runEnabled = $state(true);
 
   let inputValue = $state('');
-  let inputField: HTMLTextAreaElement | undefined;
+  let inputField: HTMLTextAreaElement | undefined = $state();
 
   // Count of enableRun messages seen so far — plain let, not $state.
   // Written with untrack to make the bookkeeping intent explicit.
   let seenEnableRunCount = 0;
 
   $effect(() => {
-    const count = getMessages().filter(m => hasEnableRunFlag(m.metadata)).length;
+    const count = getMessages().filter((m) => hasEnableRunFlag(m.metadata)).length;
     if (count > seenEnableRunCount) {
-      untrack(() => { seenEnableRunCount = count; });
+      untrack(() => {
+        seenEnableRunCount = count;
+      });
       runEnabled = true;
     }
   });
 
   $effect(() => {
     if (getCurrentSession()?.id) {
-      untrack(() => { seenEnableRunCount = 0; });
+      untrack(() => {
+        seenEnableRunCount = 0;
+      });
       runEnabled = true;
     }
   });
@@ -87,7 +91,9 @@
     if (wasExecuting && !nowExecuting && inputField) {
       tick().then(() => inputField?.focus({ preventScroll: true }));
     }
-    untrack(() => { wasExecuting = nowExecuting; });
+    untrack(() => {
+      wasExecuting = nowExecuting;
+    });
   });
 
   function handleSend(): void {

package/dist/components/playground/ControlPanel.svelte

@@ -159,35 +159,37 @@
           </button>
           {#if getSessions().length > 0}
             <div class="control-panel__session-popover-divider"></div>
-            {#each getSessions() as session (session.id)}
-              {@const isActive = getCurrentSession()?.id === session.id}
-              <div class="control-panel__session-popover-row">
-                <button
-                  type="button"
-                  role="menuitem"
-                  class="control-panel__session-popover-item"
-                  class:control-panel__session-popover-item--active={isActive}
-                  onclick={() => handleSelect(session.id)}
-                >
-                  {#if isActive}
-                    <Icon icon="mdi:check" class="control-panel__session-popover-check" />
-                  {:else}
-                    <Icon icon="mdi:message-outline" />
-                  {/if}
-                  <span>{session.name}</span>
-                </button>
-                <button
-                  type="button"
-                  role="menuitem"
-                  class="control-panel__session-popover-delete"
-                  onclick={(e) => handleDelete(e, session.id)}
-                  title={cp.deleteSession}
-                  aria-label={cp.deleteSession}
-                >
-                  <Icon icon="mdi:delete-outline" />
-                </button>
-              </div>
-            {/each}
+            <div class="control-panel__session-popover-list">
+              {#each getSessions() as session (session.id)}
+                {@const isActive = getCurrentSession()?.id === session.id}
+                <div class="control-panel__session-popover-row">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="control-panel__session-popover-item"
+                    class:control-panel__session-popover-item--active={isActive}
+                    onclick={() => handleSelect(session.id)}
+                  >
+                    {#if isActive}
+                      <Icon icon="mdi:check" class="control-panel__session-popover-check" />
+                    {:else}
+                      <Icon icon="mdi:message-outline" />
+                    {/if}
+                    <span>{session.name}</span>
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="control-panel__session-popover-delete"
+                    onclick={(e) => handleDelete(e, session.id)}
+                    title={cp.deleteSession}
+                    aria-label={cp.deleteSession}
+                  >
+                    <Icon icon="mdi:delete-outline" />
+                  </button>
+                </div>
+              {/each}
+            </div>
           {/if}
         </div>
       {/if}
@@ -333,6 +335,9 @@
     z-index: 50;
     min-width: 220px;
     max-width: 300px;
+    max-height: min(60vh, 420px);
+    display: flex;
+    flex-direction: column;
     padding: var(--fd-space-xs);
     background-color: var(--fd-background);
     border: 1px solid var(--fd-border);
@@ -344,6 +349,13 @@
     height: 1px;
     background-color: var(--fd-border-muted);
     margin: var(--fd-space-xs) 0;
+    flex-shrink: 0;
+  }
+
+  .control-panel__session-popover-list {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
   }
 
   .control-panel__session-popover-row {
@@ -396,6 +408,7 @@
     color: var(--fd-primary);
     font-weight: 500;
     width: 100%;
+    flex: 0 0 auto;
   }
 
   .control-panel__session-popover-item--new :global(svg) {

package/dist/components/playground/ExecutionConsole.svelte

@@ -22,6 +22,8 @@
     onInterruptResolved?: () => void;
     /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
+    /** Called when the user scrolls near the top to load older messages */
+    onLoadOlder?: () => void | Promise<void>;
   }
 
   let {
@@ -31,7 +33,8 @@
     allowLogs = true,
     compactSystemMessages = true,
     onInterruptResolved,
-    onCreateSession
+    onCreateSession,
+    onLoadOlder
   }: Props = $props();
 
   const ec = $derived(m().playground.executionConsole);
@@ -50,6 +53,7 @@
     {allowLogs}
     {compactSystemMessages}
     {onInterruptResolved}
+    {onLoadOlder}
     welcome={welcomeState}
     emptySession={readyState}
   />

package/dist/components/playground/ExecutionConsole.svelte.d.ts

@@ -8,6 +8,8 @@ interface Props {
     onInterruptResolved?: () => void;
     /** Optional callback that, when provided, shows a "New session" CTA in the welcome state */
     onCreateSession?: () => void;
+    /** Called when the user scrolls near the top to load older messages */
+    onLoadOlder?: () => void | Promise<void>;
 }
 declare const ExecutionConsole: import("svelte").Component<Props, {}, "">;
 type ExecutionConsole = ReturnType<typeof ExecutionConsole>;

package/dist/components/playground/ExecutionList.svelte

@@ -119,8 +119,13 @@
   }
 
   @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
   }
 
   :global(.execution-list__status-icon) {

package/dist/components/playground/LogRow.svelte

@@ -55,7 +55,8 @@
       class="log-row__timestamp"
       datetime={message.timestamp}
       aria-label="sent at {formatTimestamp(message.timestamp)}"
-    >{formatTimestamp(message.timestamp)}</time>
+      >{formatTimestamp(message.timestamp)}</time
+    >
   {/if}
 </div>
 

package/dist/components/playground/MessageBubble.svelte

@@ -10,10 +10,7 @@
 -->
 
 <script lang="ts">
-  import {
-    resolveMessageDisplay,
-    type PlaygroundMessage
-  } from '../../types/playground.js';
+  import { resolveMessageDisplay, type PlaygroundMessage } from '../../types/playground.js';
   import ChatBubble from './ChatBubble.svelte';
   import LogRow from './LogRow.svelte';
   import MessageNotice from './MessageNotice.svelte';

package/dist/components/playground/MessageCard.svelte

@@ -43,7 +43,8 @@
           class="message-card__timestamp"
           datetime={message.timestamp}
           aria-label="sent at {formatTimestamp(message.timestamp)}"
-        >{formatTimestamp(message.timestamp)}</time>
+          >{formatTimestamp(message.timestamp)}</time
+        >
       {/if}
     </header>
   {/if}

package/dist/components/playground/MessageMarkdown.svelte

@@ -72,9 +72,15 @@
     margin-top: 0;
   }
 
-  .message-markdown :global(h1) { font-size: var(--fd-text-xl); }
-  .message-markdown :global(h2) { font-size: var(--fd-text-lg); }
-  .message-markdown :global(h3) { font-size: var(--fd-text-base); }
+  .message-markdown :global(h1) {
+    font-size: var(--fd-text-xl);
+  }
+  .message-markdown :global(h2) {
+    font-size: var(--fd-text-lg);
+  }
+  .message-markdown :global(h3) {
+    font-size: var(--fd-text-base);
+  }
 
   .message-markdown :global(ul),
   .message-markdown :global(ol) {
@@ -155,6 +161,10 @@
     font-weight: 600;
   }
 
-  .message-markdown :global(strong) { font-weight: 600; }
-  .message-markdown :global(em) { font-style: italic; }
+  .message-markdown :global(strong) {
+    font-weight: 600;
+  }
+  .message-markdown :global(em) {
+    font-style: italic;
+  }
 </style>

package/dist/components/playground/MessageNotice.svelte

@@ -42,7 +42,8 @@
       class="system-notice__timestamp"
       datetime={message.timestamp}
       aria-label="sent at {formatTimestamp(message.timestamp)}"
-    >{formatTimestamp(message.timestamp)}</time>
+      >{formatTimestamp(message.timestamp)}</time
+    >
   {/if}
 </div>