@flowdrop/flowdrop 1.11.0 → 1.12.0

package/dist/api/enhanced-client.d.ts

@@ -34,6 +34,34 @@ export declare class ApiError extends Error {
  * const client = new EnhancedFlowDropApiClient(config);
  * ```
  */
+export interface PipelineDataResponse {
+    status: string;
+    jobs: Array<Record<string, unknown>>;
+    node_statuses: Record<string, {
+        status: string;
+        [key: string]: unknown;
+    }>;
+    job_status_summary: {
+        total: number;
+        pending: number;
+        running: number;
+        completed: number;
+        failed: number;
+        cancelled: number;
+        skipped?: number;
+        paused?: number;
+        interrupted?: number;
+    };
+    kanban_config?: {
+        columns: Array<{
+            key: string;
+            label: string;
+            statuses: string[];
+            icon?: string;
+            color?: string;
+        }>;
+    };
+}
 export declare class EnhancedFlowDropApiClient {
     private config;
     private authProvider;
@@ -164,20 +192,5 @@ export declare class EnhancedFlowDropApiClient {
     /**
      * Fetch pipeline data including job information and status
      */
-    getPipelineData(pipelineId: string): Promise<{
-        status: string;
-        jobs: Array<Record<string, unknown>>;
-        node_statuses: Record<string, {
-            status: string;
-            [key: string]: unknown;
-        }>;
-        job_status_summary: {
-            total: number;
-            pending: number;
-            running: number;
-            completed: number;
-            failed: number;
-            cancelled: number;
-        };
-    }>;
+    getPipelineData(pipelineId: string): Promise<PipelineDataResponse>;
 }

package/dist/api/enhanced-client.js

@@ -28,20 +28,6 @@ export class ApiError extends Error {
         this.errorData = errorData;
     }
 }
-/**
- * Enhanced HTTP API client for FlowDrop with configurable endpoints
- *
- * Supports pluggable authentication via AuthProvider interface.
- *
- * @example
- * ```typescript
- * // With AuthProvider
- * const client = new EnhancedFlowDropApiClient(config, authProvider);
- *
- * // Without authentication
- * const client = new EnhancedFlowDropApiClient(config);
- * ```
- */
 export class EnhancedFlowDropApiClient {
     config;
     authProvider;

package/dist/components/PipelineStatus.svelte

@@ -117,23 +117,20 @@
         }
       };
 
-      // Update node statuses based on job data
+      // Update node statuses based on job data — only set what the server reported
       if (jobStatusData.node_statuses) {
         const newNodeStatuses: Record<string, 'pending' | 'running' | 'completed' | 'error'> = {};
 
-        // Initialize all nodes as pending
-        if (workflow && workflow.nodes) {
-          workflow.nodes.forEach((node) => {
-            newNodeStatuses[node.id] = 'pending';
-          });
-        }
-
-        // Override with actual job statuses
         for (const nodeId in jobStatusData.node_statuses) {
           const status = jobStatusData.node_statuses[nodeId].status;
-          if (['pending', 'running', 'completed', 'failed', 'cancelled'].includes(status)) {
-            newNodeStatuses[nodeId] =
-              status === 'failed' ? 'error' : (status as 'pending' | 'running' | 'completed');
+          if (status === 'failed' || status === 'cancelled') {
+            newNodeStatuses[nodeId] = 'error';
+          } else if (status === 'running' || status === 'paused' || status === 'interrupted') {
+            newNodeStatuses[nodeId] = 'running';
+          } else if (status === 'completed' || status === 'skipped') {
+            newNodeStatuses[nodeId] = 'completed';
+          } else if (status === 'pending' || status === 'idle') {
+            newNodeStatuses[nodeId] = 'pending';
           }
         }
         nodeStatuses = newNodeStatuses;

package/dist/components/WorkflowEditor.svelte

@@ -855,6 +855,9 @@
               {initialViewport}
               colorMode={getResolvedTheme() as ColorMode}
               fitView={getEditorSettings().fitViewOnLoad}
+              nodesDraggable={!props.lockWorkflow && !props.readOnly}
+              nodesConnectable={!props.lockWorkflow && !props.readOnly}
+              elementsSelectable={!props.lockWorkflow && !props.readOnly}
             >
               <Controls />
               {#if !props.readOnly && !props.lockWorkflow && props.onToggleConsole}

package/dist/components/interrupt/ChoicePrompt.svelte

@@ -45,6 +45,10 @@
   // Hoist the choice branch — counter, min, max, submit reads.
   const t = $derived(m().interrupt.choice);
 
+  // Unique name for the radio/checkbox group so multiple ChoicePrompts on
+  // screen don't share the same HTML group and interfere with each other.
+  const groupName = `choice-option-${Math.random().toString(36).slice(2, 8)}`;
+
   /** Local state for selected values */
   let selectedValues = $state<Set<string>>(new Set());
 
@@ -131,7 +135,7 @@
   {/if}
 
   <!-- Options -->
-  <div class="choice-prompt__options" role={isMultiple ? 'group' : 'radiogroup'}>
+  <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
@@ -141,7 +145,7 @@
       >
         <input
           type={isMultiple ? 'checkbox' : 'radio'}
-          name="choice-option"
+          name={groupName}
           value={option.value}
           checked={isChecked}
           disabled={isResolved || isSubmitting}
@@ -295,9 +299,19 @@
 
   .choice-prompt__input {
     position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .choice-prompt__option:focus-within {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
   }
 
   .choice-prompt__checkmark {
@@ -372,6 +386,11 @@
     transform: translateY(-1px);
   }
 
+  .choice-prompt__submit:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .choice-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/ConfirmationPrompt.svelte

@@ -184,6 +184,11 @@
     min-width: 100px;
   }
 
+  .confirmation-prompt__button:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .confirmation-prompt__button:disabled {
     cursor: not-allowed;
   }

package/dist/components/interrupt/InterruptBubble.svelte

@@ -256,6 +256,8 @@
   class:interrupt-bubble--cancelled={currentInterrupt.machineState.status === 'cancelled'}
   class:interrupt-bubble--submitting={isSubmitting}
   class:interrupt-bubble--error={currentInterrupt.machineState.status === 'error'}
+  role="group"
+  aria-label={getTypeLabel(currentInterrupt.type)}
 >
   <!-- Header -->
   <div class="interrupt-bubble__header">
@@ -517,6 +519,11 @@
     background-color: var(--fd-error-hover);
   }
 
+  .interrupt-bubble__retry-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   /* Body - prompt content area, full width */
   .interrupt-bubble__body {
     padding: var(--fd-space-xl);
@@ -589,6 +596,11 @@
     background-color: var(--fd-error-muted);
   }
 
+  .interrupt-bubble__cancel-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .interrupt-bubble__cancel-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/ReviewPrompt.svelte

@@ -533,6 +533,11 @@
     color: var(--fd-error);
   }
 
+  .review-prompt__bulk-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .review-prompt__bulk-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -630,6 +635,11 @@
     color: var(--fd-error-foreground);
   }
 
+  .review-prompt__toggle-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .review-prompt__toggle-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -722,6 +732,11 @@
     border-color: var(--fd-border-strong);
   }
 
+  .review-prompt__html-toggle-btn:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   /* Raw HTML code display */
   .review-prompt__raw-html {
     font-family: var(--fd-review-font-mono);
@@ -820,6 +835,11 @@
     transform: translateY(-1px);
   }
 
+  .review-prompt__submit:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .review-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/TextInputPrompt.svelte

@@ -315,6 +315,11 @@
     transform: translateY(-1px);
   }
 
+  .text-prompt__submit:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
   .text-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/nodes/GatewayNode.svelte

@@ -210,9 +210,7 @@
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: {getDataTypeColorToken(
                 port.dataType
               )}; --fd-handle-border-color: var(--fd-handle-border);"
-              role="button"
-              tabindex={0}
-              aria-label={graph.connectInputPort({ name: port.name })}
+              tabindex={-1}
             />
 
             <!-- Port Info: padding lives here so handle position is simple -->
@@ -298,9 +296,7 @@
                 : getDataTypeColorToken(
                     'trigger'
                   )}; --fd-handle-border-color: var(--fd-handle-border);"
-              role="button"
-              tabindex={0}
-              aria-label={graph.connectBranch({ name: branch.name })}
+              tabindex={-1}
             />
           </div>
         {/each}

package/dist/components/nodes/WorkflowNode.svelte

@@ -264,9 +264,7 @@
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
-              role="button"
-              tabindex={0}
-              aria-label={graph.connectInputPort({ name: port.name })}
+              tabindex={-1}
             />
 
             <!-- Port Info: padding lives here so handle position is simple -->
@@ -342,9 +340,7 @@
               style="top: 50%; transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
                 port.dataType
               )}); --fd-handle-border-color: var(--fd-handle-border);"
-              role="button"
-              tabindex={0}
-              aria-label={graph.connectOutputPort({ name: port.name })}
+              tabindex={-1}
             />
           </div>
         {/each}

package/dist/components/playground/ChatInput.svelte

@@ -0,0 +1,359 @@
+<!--
+  ChatInput Component
+
+  The textarea + Run/Send/Stop button. Reusable input primitive shared by
+  ChatPanel (conversational) and ControlPanel (orchestration controls).
+
+  Reads execution state from playgroundStore. Owns its own input string and
+  textarea ref; emits sent content via onSendMessage.
+-->
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import { tick, untrack } from 'svelte';
+  import { hasEnableRunFlag } from '../../types/playground.js';
+  import {
+    getMessages,
+    getIsExecuting,
+    getCanSendMessage,
+    getCurrentSession
+  } from '../../stores/playgroundStore.svelte.js';
+  import { m } from '../../messages/index.js';
+
+  interface Props {
+    placeholder?: string;
+    /** Show the textarea (default: true). When false, only the Run button is shown. */
+    showTextarea?: boolean;
+    /** Show the Run button when textarea is hidden (default: true) */
+    showRunButton?: boolean;
+    /** Message sent when Run is clicked with textarea hidden */
+    predefinedMessage?: string;
+    onSendMessage?: (content: string) => void;
+    onStopExecution?: () => void;
+  }
+
+  let {
+    placeholder,
+    showTextarea = true,
+    showRunButton = true,
+    predefinedMessage,
+    onSendMessage,
+    onStopExecution
+  }: Props = $props();
+
+  const actions = $derived(m().playground.actions);
+  const chat = $derived(m().playground.chat);
+  const states = $derived(m().playground.states);
+
+  const resolvedPlaceholder = $derived(placeholder ?? chat.placeholder);
+  const resolvedPredefinedMessage = $derived(predefinedMessage ?? chat.predefinedRun);
+
+  const noInputsAvailable = $derived(!showTextarea && !showRunButton);
+
+  /**
+   * Tracks whether the Run button is enabled. Starts as true; becomes false
+   * after Run is clicked; re-enabled when the backend sends a message with
+   * enableRun: true metadata.
+   */
+  let runEnabled = $state(true);
+
+  let inputValue = $state('');
+  let inputField: HTMLTextAreaElement | undefined;
+
+  // 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;
+    if (count > seenEnableRunCount) {
+      untrack(() => { seenEnableRunCount = count; });
+      runEnabled = true;
+    }
+  });
+
+  $effect(() => {
+    if (getCurrentSession()?.id) {
+      untrack(() => { seenEnableRunCount = 0; });
+      runEnabled = true;
+    }
+  });
+
+  let wasExecuting = false;
+
+  /** Auto-focus input when execution completes */
+  $effect(() => {
+    const nowExecuting = getIsExecuting();
+    if (wasExecuting && !nowExecuting && inputField) {
+      tick().then(() => inputField?.focus({ preventScroll: true }));
+    }
+    untrack(() => { wasExecuting = nowExecuting; });
+  });
+
+  function handleSend(): void {
+    const trimmedValue = inputValue.trim();
+    if (!trimmedValue || !getCanSendMessage()) return;
+
+    onSendMessage?.(trimmedValue);
+    inputValue = '';
+
+    if (inputField) {
+      inputField.style.height = 'auto';
+    }
+
+    tick().then(() => {
+      inputField?.focus({ preventScroll: true });
+    });
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSend();
+    }
+  }
+
+  function handleStop(): void {
+    onStopExecution?.();
+  }
+
+  function handleRun(): void {
+    if (getIsExecuting() || !runEnabled) return;
+    runEnabled = false;
+    onSendMessage?.(resolvedPredefinedMessage);
+  }
+
+  function handleInput(): void {
+    if (inputField) {
+      inputField.style.height = 'auto';
+      inputField.style.height = `${Math.min(inputField.scrollHeight, 120)}px`;
+    }
+  }
+</script>
+
+<div class="chat-input">
+  {#if noInputsAvailable}
+    <div class="chat-input__no-inputs">
+      <Icon icon="mdi:information-outline" />
+      <span>{states.viewOnlyHelp}</span>
+    </div>
+  {:else}
+    <div class="chat-input__container" class:chat-input__container--run-only={!showTextarea}>
+      {#if showTextarea}
+        <div class="chat-input__wrapper">
+          <textarea
+            bind:this={inputField}
+            bind:value={inputValue}
+            class="chat-input__textarea"
+            placeholder={resolvedPlaceholder}
+            rows="1"
+            disabled={getIsExecuting() || !getCurrentSession()}
+            onkeydown={handleKeydown}
+            oninput={handleInput}
+          ></textarea>
+        </div>
+      {/if}
+
+      {#if getIsExecuting()}
+        <button
+          type="button"
+          class="chat-input__stop-btn"
+          onclick={handleStop}
+          title={actions.stopTitle}
+          aria-label={actions.stopTitle}
+        >
+          <Icon icon="mdi:stop" />
+          {actions.stop}
+        </button>
+      {:else if showTextarea}
+        <button
+          type="button"
+          class="chat-input__send-btn"
+          onclick={handleSend}
+          disabled={!inputValue.trim() || !getCanSendMessage()}
+          title={actions.sendTitle}
+          aria-label={actions.sendTitle}
+        >
+          {actions.send}
+        </button>
+      {:else if showRunButton}
+        {@const runLabel = runEnabled ? actions.runTitle : actions.runWaitingTitle}
+        <button
+          type="button"
+          class="chat-input__run-btn"
+          onclick={handleRun}
+          disabled={!runEnabled}
+          title={runLabel}
+          aria-label={runLabel}
+        >
+          <Icon icon="mdi:play" />
+          {actions.run}
+        </button>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .chat-input {
+    flex-shrink: 0;
+    padding: var(--fd-space-xl) var(--fd-space-3xl) var(--fd-space-3xl);
+    background-color: var(--fd-background);
+    border-top: 1px solid var(--fd-border-muted);
+  }
+
+  .chat-input__container {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--fd-space-md);
+    max-width: 760px;
+    margin: 0 auto;
+  }
+
+  .chat-input__container--run-only {
+    justify-content: flex-end;
+  }
+
+  .chat-input__wrapper {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    background-color: var(--fd-background);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-xl);
+    padding: var(--fd-space-sm) var(--fd-space-md);
+    transition:
+      border-color var(--fd-transition-fast),
+      box-shadow var(--fd-transition-fast);
+  }
+
+  .chat-input__wrapper:focus-within {
+    border-color: var(--fd-primary);
+    box-shadow: 0 0 0 3px var(--fd-primary-muted);
+  }
+
+  .chat-input__textarea {
+    flex: 1;
+    border: none;
+    outline: none;
+    resize: none;
+    font-family: inherit;
+    font-size: var(--fd-text-base);
+    line-height: var(--fd-leading-normal);
+    max-height: 120px;
+    background: transparent;
+    color: var(--fd-foreground);
+  }
+
+  .chat-input__textarea::placeholder {
+    color: var(--fd-muted-foreground);
+  }
+
+  .chat-input__textarea:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .chat-input__send-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--fd-space-sm) var(--fd-space-2xl);
+    border: none;
+    border-radius: var(--fd-radius-lg);
+    background-color: var(--fd-foreground);
+    color: var(--fd-background);
+    font-size: var(--fd-text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .chat-input__send-btn:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+
+  .chat-input__send-btn:disabled {
+    background-color: var(--fd-foreground);
+    color: var(--fd-background);
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .chat-input__stop-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    padding: var(--fd-space-sm) var(--fd-space-xl);
+    border: none;
+    border-radius: var(--fd-radius-lg);
+    background-color: var(--fd-error);
+    color: var(--fd-error-foreground);
+    font-size: var(--fd-text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color var(--fd-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .chat-input__stop-btn:hover {
+    background-color: var(--fd-error-hover);
+  }
+
+  .chat-input__run-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+    padding: var(--fd-space-sm) var(--fd-space-2xl);
+    border: none;
+    border-radius: var(--fd-radius-lg);
+    background-color: var(--fd-success);
+    color: var(--fd-success-foreground);
+    font-size: var(--fd-text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .chat-input__run-btn:hover:not(:disabled) {
+    background-color: var(--fd-success-hover);
+  }
+
+  .chat-input__run-btn:disabled {
+    background-color: var(--fd-border);
+    color: var(--fd-muted-foreground);
+    cursor: not-allowed;
+  }
+
+  .chat-input__no-inputs {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-md) var(--fd-space-xl);
+    background-color: var(--fd-muted);
+    border-radius: var(--fd-radius-lg);
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-sm);
+    max-width: 760px;
+    margin: 0 auto;
+  }
+
+  @media (max-width: 640px) {
+    .chat-input {
+      padding: var(--fd-space-md) var(--fd-space-xl) var(--fd-space-xl);
+    }
+
+    .chat-input__container {
+      gap: var(--fd-space-xs);
+    }
+
+    .chat-input__send-btn,
+    .chat-input__stop-btn,
+    .chat-input__run-btn {
+      padding: var(--fd-space-xs) var(--fd-space-xl);
+    }
+  }
+</style>