@flowdrop/flowdrop 1.10.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/Navbar.svelte

@@ -11,18 +11,9 @@
   import Logo from './Logo.svelte';
   import SettingsModal from './SettingsModal.svelte';
   import type { SettingsCategory } from '../types/settings.js';
+  import type { NavbarAction } from '../types/navbar.js';
   import { m } from '../messages/index.js';
 
-  interface NavbarAction {
-    label: string;
-    href: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline';
-    onclick?: (event: Event) => void;
-    /** If true, opens link in new tab with proper security attributes */
-    external?: boolean;
-  }
-
   interface BreadcrumbItem {
     label: string;
     href?: string;

package/dist/components/Navbar.svelte.d.ts

@@ -1,13 +1,5 @@
 import type { SettingsCategory } from '../types/settings.js';
-interface NavbarAction {
-    label: string;
-    href: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline';
-    onclick?: (event: Event) => void;
-    /** If true, opens link in new tab with proper security attributes */
-    external?: boolean;
-}
+import type { NavbarAction } from '../types/navbar.js';
 interface BreadcrumbItem {
     label: string;
     href?: string;

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}