@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/components/NodeStatusOverlay.svelte

@@ -6,80 +6,78 @@
 -->
 
 <script lang="ts">
-  import type { NodeExecutionInfo } from "../types/index.js";
-  import Icon from "@iconify/svelte";
-  import StatusLabel from "./StatusLabel.svelte";
+  import type { NodeExecutionInfo } from '../types/index.js';
+  import Icon from '@iconify/svelte';
+  import StatusLabel from './StatusLabel.svelte';
   import {
     getStatusColor,
     getStatusIcon,
     getStatusLabel,
     getStatusBackgroundColor,
     formatExecutionDuration,
-    formatLastExecuted,
-  } from "../utils/nodeStatus.js";
+    formatLastExecuted
+  } from '../utils/nodeStatus.js';
 
   interface Props {
     nodeId?: string;
     executionInfo?: NodeExecutionInfo;
-    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    size?: "sm" | "md" | "lg";
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    size?: 'sm' | 'md' | 'lg';
     showDetails?: boolean;
   }
 
   let props: Props = $props();
 
   // Default values
-  let position = $derived(props.position || "top-right");
-  let size = $derived(props.size || "md");
+  let position = $derived(props.position || 'top-right');
+  let size = $derived(props.size || 'md');
   let showDetails = $derived(props.showDetails || false);
   let isHovered = $state(false);
 
   // Size configurations - optimized for larger, centered overlay
   const sizeConfig = {
     sm: {
-      statusSize: "18px",
-      iconSize: "10px",
-      labelSize: "0.75rem",
-      padding: "6px 12px",
+      statusSize: '18px',
+      iconSize: '10px',
+      labelSize: '0.75rem',
+      padding: '6px 12px'
     },
     md: {
-      statusSize: "24px",
-      iconSize: "14px",
-      labelSize: "0.875rem",
-      padding: "8px 16px",
+      statusSize: '24px',
+      iconSize: '14px',
+      labelSize: '0.875rem',
+      padding: '8px 16px'
     },
     lg: {
-      statusSize: "28px",
-      iconSize: "16px",
-      labelSize: "1rem",
-      padding: "10px 20px",
-    },
+      statusSize: '28px',
+      iconSize: '16px',
+      labelSize: '1rem',
+      padding: '10px 20px'
+    }
   };
 
   const config = $derived(sizeConfig[size]);
 
   // Position styles - horizontal center aligned with top edge of node
   const positionStyles = {
-    "top-left": "top: -24px; left: 50%; transform: translateX(-50%);",
-    "top-right": "top: -24px; left: 50%; transform: translateX(-50%);",
-    "bottom-left": "top: -24px; left: 50%; transform: translateX(-50%);",
-    "bottom-right": "top: -24px; left: 50%; transform: translateX(-50%);",
+    'top-left': 'top: -24px; left: 50%; transform: translateX(-50%);',
+    'top-right': 'top: -24px; left: 50%; transform: translateX(-50%);',
+    'bottom-left': 'top: -24px; left: 50%; transform: translateX(-50%);',
+    'bottom-right': 'top: -24px; left: 50%; transform: translateX(-50%);'
   };
 
   // Get execution info or default
   let executionInfo = $derived(
     props.executionInfo || {
-      status: "idle" as const,
+      status: 'idle' as const,
       executionCount: 0,
-      isExecuting: false,
-    },
+      isExecuting: false
+    }
   );
 
   // Show overlay if there's meaningful status information
   let shouldShow = $derived(
-    executionInfo.status !== "idle" ||
-      executionInfo.executionCount > 0 ||
-      executionInfo.isExecuting,
+    executionInfo.status !== 'idle' || executionInfo.executionCount > 0 || executionInfo.isExecuting
   );
 </script>
 
@@ -88,9 +86,9 @@
     class="node-status-overlay"
     class:node-status-overlay--hovered={isHovered}
     class:node-status-overlay--top-left={true}
-    class:node-status-overlay--sm={size === "sm"}
-    class:node-status-overlay--md={size === "md"}
-    class:node-status-overlay--lg={size === "lg"}
+    class:node-status-overlay--sm={size === 'sm'}
+    class:node-status-overlay--md={size === 'md'}
+    class:node-status-overlay--lg={size === 'lg'}
     style="
 			{positionStyles[position]}
 			--status-size: {config.statusSize};
@@ -100,9 +98,7 @@
 		"
     onmouseenter={() => (isHovered = true)}
     onmouseleave={() => (isHovered = false)}
-    title="{getStatusLabel(
-      executionInfo.status,
-    )} - Executed {executionInfo.executionCount} times"
+    title="{getStatusLabel(executionInfo.status)} - Executed {executionInfo.executionCount} times"
     role="status"
     aria-label="Node execution status: {getStatusLabel(executionInfo.status)}"
   >
@@ -115,10 +111,7 @@
         class="node-status-overlay__status-icon"
         style="background-color: {getStatusColor(executionInfo.status)}"
       >
-        <Icon
-          icon={getStatusIcon(executionInfo.status)}
-          class="node-status-overlay__icon"
-        />
+        <Icon icon={getStatusIcon(executionInfo.status)} class="node-status-overlay__icon" />
       </div>
       <StatusLabel
         label={getStatusLabel(executionInfo.status)}
@@ -144,9 +137,7 @@
         </div>
         <div class="node-status-overlay__detail-item">
           <span class="node-status-overlay__detail-label">Executions:</span>
-          <span class="node-status-overlay__detail-value"
-            >{executionInfo.executionCount}</span
-          >
+          <span class="node-status-overlay__detail-value">{executionInfo.executionCount}</span>
         </div>
         {#if executionInfo.lastExecuted}
           <div class="node-status-overlay__detail-item">
@@ -160,20 +151,14 @@
           <div class="node-status-overlay__detail-item">
             <span class="node-status-overlay__detail-label">Duration:</span>
             <span class="node-status-overlay__detail-value"
-              >{formatExecutionDuration(
-                executionInfo.lastExecutionDuration,
-              )}</span
+              >{formatExecutionDuration(executionInfo.lastExecutionDuration)}</span
             >
           </div>
         {/if}
         {#if executionInfo.lastError}
-          <div
-            class="node-status-overlay__detail-item node-status-overlay__detail-item--error"
-          >
+          <div class="node-status-overlay__detail-item node-status-overlay__detail-item--error">
             <span class="node-status-overlay__detail-label">Error:</span>
-            <span class="node-status-overlay__detail-value"
-              >{executionInfo.lastError}</span
-            >
+            <span class="node-status-overlay__detail-value">{executionInfo.lastError}</span>
           </div>
         {/if}
       </div>
@@ -326,7 +311,7 @@
   }
 
   /* Animation for running status */
-  .node-status-overlay__status-icon[style*="running"] {
+  .node-status-overlay__status-icon[style*='running'] {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 

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

@@ -1,9 +1,9 @@
-import type { NodeExecutionInfo } from "../types/index.js";
+import type { NodeExecutionInfo } from '../types/index.js';
 interface Props {
     nodeId?: string;
     executionInfo?: NodeExecutionInfo;
-    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    size?: "sm" | "md" | "lg";
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    size?: 'sm' | 'md' | 'lg';
     showDetails?: boolean;
 }
 declare const NodeStatusOverlay: import("svelte").Component<Props, {}, "">;

package/dist/components/NodeSwapPicker.svelte

@@ -6,18 +6,12 @@
 -->
 
 <script lang="ts">
-  import type {
-    NodeMetadata,
-    NodeCategory,
-    WorkflowFormat,
-    WorkflowNode,
-  } from "../types/index.js";
-  import Icon from "@iconify/svelte";
-  import { getNodeIcon, getCategoryIcon } from "../utils/icons.js";
-  import { getCategoryColorToken } from "../utils/colors.js";
-  import { getCategoryLabel } from "../stores/categoriesStore.svelte.js";
-  import { getVersionUpgrade } from "../utils/nodeSwap.js";
-
+  import type { NodeMetadata, NodeCategory, WorkflowFormat, WorkflowNode } from '../types/index.js';
+  import Icon from '@iconify/svelte';
+  import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
+  import { getCategoryColorToken } from '../utils/colors.js';
+  import { getCategoryLabel } from '../stores/categoriesStore.svelte.js';
+  import { getVersionUpgrade } from '../utils/nodeSwap.js';
 
   interface Props {
     /** The node being swapped */
@@ -32,20 +26,12 @@
     onCancel: () => void;
   }
 
-  const {
-    currentNode,
-    availableNodes,
-    activeFormat,
-    onSelect,
-    onCancel,
-  }: Props = $props();
+  const { currentNode, availableNodes, activeFormat, onSelect, onCancel }: Props = $props();
 
-  let searchInput = $state("");
+  let searchInput = $state('');
 
   /** Check version upgrade availability */
-  let versionUpgrade = $derived(
-    getVersionUpgrade(currentNode.data.metadata, availableNodes),
-  );
+  let versionUpgrade = $derived(getVersionUpgrade(currentNode.data.metadata, availableNodes));
 
   /** Filter nodes compatible with active format */
   function isNodeCompatibleWithFormat(node: NodeMetadata): boolean {
@@ -55,9 +41,7 @@
   }
 
   /** Nodes filtered by format compatibility */
-  let formatCompatibleNodes = $derived(
-    availableNodes.filter((n) => isNodeCompatibleWithFormat(n)),
-  );
+  let formatCompatibleNodes = $derived(availableNodes.filter((n) => isNodeCompatibleWithFormat(n)));
 
   /** Apply search filter */
   let filteredNodes = $derived.by(() => {
@@ -68,7 +52,7 @@
         (node) =>
           node.name.toLowerCase().includes(query) ||
           node.description.toLowerCase().includes(query) ||
-          node.tags?.some((tag) => tag.toLowerCase().includes(query)),
+          node.tags?.some((tag) => tag.toLowerCase().includes(query))
       );
     }
     return nodes;
@@ -96,11 +80,7 @@
 <div class="swap-picker">
   <!-- Header -->
   <div class="swap-picker__header">
-    <button
-      class="swap-picker__back"
-      onclick={onCancel}
-      aria-label="Back to configuration"
-    >
+    <button class="swap-picker__back" onclick={onCancel} aria-label="Back to configuration">
       <Icon icon="heroicons:arrow-left" />
     </button>
     <h2 class="swap-picker__title">Swap Node</h2>
@@ -114,10 +94,7 @@
 
   <!-- Version upgrade banner -->
   {#if versionUpgrade}
-    <button
-      class="swap-picker__upgrade"
-      onclick={() => onSelect(versionUpgrade!)}
-    >
+    <button class="swap-picker__upgrade" onclick={() => onSelect(versionUpgrade!)}>
       <Icon icon="heroicons:arrow-up-circle" />
       <div class="swap-picker__upgrade-info">
         <span class="swap-picker__upgrade-title">Upgrade Available</span>
@@ -156,10 +133,7 @@
             </div>
             <div class="swap-picker__flat-list">
               {#each categoryNodes as nodeType (nodeType.id)}
-                <button
-                  class="swap-picker__flat-item"
-                  onclick={() => onSelect(nodeType)}
-                >
+                <button class="swap-picker__flat-item" onclick={() => onSelect(nodeType)}>
                   <span
                     class="swap-picker__flat-dot"
                     style="background: {getCategoryColorToken(nodeType.category)}"
@@ -188,19 +162,12 @@
             </div>
             <div class="swap-picker__category-items">
               {#each categoryNodes as nodeType (nodeType.id)}
-                <button
-                  class="swap-picker__item"
-                  onclick={() => onSelect(nodeType)}
-                >
+                <button class="swap-picker__item" onclick={() => onSelect(nodeType)}>
                   <span
                     class="swap-picker__item-icon"
-                    style="--_icon-color: {getCategoryColorToken(
-                      nodeType.category,
-                    )}"
+                    style="--_icon-color: {getCategoryColorToken(nodeType.category)}"
                   >
-                    <Icon
-                      icon={getNodeIcon(nodeType.icon, nodeType.category)}
-                    />
+                    <Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
                   </span>
                   <div class="swap-picker__item-info">
                     <span class="swap-picker__item-name">{nodeType.name}</span>
@@ -208,10 +175,7 @@
                       {nodeType.description}
                     </span>
                   </div>
-                  <Icon
-                    icon="heroicons:chevron-right"
-                    class="swap-picker__item-arrow"
-                  />
+                  <Icon icon="heroicons:chevron-right" class="swap-picker__item-arrow" />
                 </button>
               {/each}
             </div>
@@ -439,11 +403,7 @@
     width: 1.25rem;
     height: 1.25rem;
     border-radius: 0.25rem;
-    background: color-mix(
-      in srgb,
-      var(--_icon-color) var(--fd-node-icon-bg-opacity),
-      transparent
-    );
+    background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
     color: var(--fd-node-icon);
     font-size: 0.625rem;
     display: flex;
@@ -498,11 +458,7 @@
     width: 1.75rem;
     height: 1.75rem;
     border-radius: 0.375rem;
-    background: color-mix(
-      in srgb,
-      var(--_icon-color) var(--fd-node-icon-bg-opacity),
-      transparent
-    );
+    background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
     color: var(--fd-node-icon);
     font-size: var(--fd-text-xs);
     display: flex;

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

@@ -1,4 +1,4 @@
-import type { NodeMetadata, WorkflowFormat, WorkflowNode } from "../types/index.js";
+import type { NodeMetadata, WorkflowFormat, WorkflowNode } from '../types/index.js';
 interface Props {
     /** The node being swapped */
     currentNode: WorkflowNode;

package/dist/components/PipelineStatus.svelte

@@ -5,14 +5,14 @@
 -->
 
 <script lang="ts">
-  import { onMount } from "svelte";
-  import App from "./App.svelte";
-  import LogsSidebar from "./LogsSidebar.svelte";
-  import { EnhancedFlowDropApiClient } from "../api/enhanced-client.js";
-  import { createEndpointConfig } from "../config/endpoints.js";
-  import type { Workflow } from "../types/index.js";
-  import type { EndpointConfig } from "../config/endpoints.js";
-  import { logger } from "../utils/logger.js";
+  import { onMount } from 'svelte';
+  import App from './App.svelte';
+  import LogsSidebar from './LogsSidebar.svelte';
+  import { EnhancedFlowDropApiClient } from '../api/enhanced-client.js';
+  import { createEndpointConfig } from '../config/endpoints.js';
+  import type { Workflow } from '../types/index.js';
+  import type { EndpointConfig } from '../config/endpoints.js';
+  import { logger } from '../utils/logger.js';
 
   interface Props {
     pipelineId: string;
@@ -25,31 +25,25 @@
         label: string;
         href: string;
         icon?: string;
-        variant?: "primary" | "secondary" | "outline";
+        variant?: 'primary' | 'secondary' | 'outline';
         onclick?: (event: Event) => void;
-      }>,
+      }>
     ) => void;
   }
 
-  let {
-    pipelineId,
-    workflow,
-    apiClient,
-    baseUrl,
-    endpointConfig,
-    onActionsReady,
-  }: Props = $props();
+  let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady }: Props =
+    $props();
 
   // Initialize API client if not provided
   // svelte-ignore state_referenced_locally — client created once from props
   const client =
     apiClient ||
     new EnhancedFlowDropApiClient(
-      endpointConfig ?? createEndpointConfig(baseUrl || "/api/flowdrop"),
+      endpointConfig ?? createEndpointConfig(baseUrl || '/api/flowdrop')
     );
 
   // Pipeline status and job data
-  let pipelineStatus = $state<string>("unknown");
+  let pipelineStatus = $state<string>('unknown');
   interface PipelineNodeStatus {
     status: string;
     [key: string]: unknown;
@@ -75,23 +69,19 @@
       running: 0,
       completed: 0,
       failed: 0,
-      cancelled: 0,
-    },
+      cancelled: 0
+    }
   });
 
   // Node statuses for visual indicators
-  let nodeStatuses = $state<
-    Record<string, "pending" | "running" | "completed" | "error">
-  >({});
+  let nodeStatuses = $state<Record<string, 'pending' | 'running' | 'completed' | 'error'>>({});
 
   // Loading and error states
   let isLoadingJobStatus = $state(false);
 
   // Logs sidebar state
   let isLogsSidebarOpen = $state(false);
-  let logs = $state<
-    Array<{ level: string; message: string; timestamp: string }>
-  >([]);
+  let logs = $state<Array<{ level: string; message: string; timestamp: string }>>([]);
 
   /**
    * Fetch pipeline data including job information
@@ -113,50 +103,38 @@
           running: 0,
           completed: 0,
           failed: 0,
-          cancelled: 0,
-        },
+          cancelled: 0
+        }
       };
 
       // Update node statuses based on job data
       if (jobStatusData.node_statuses) {
-        const newNodeStatuses: Record<
-          string,
-          "pending" | "running" | "completed" | "error"
-        > = {};
+        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";
+            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,
-            )
-          ) {
+          if (['pending', 'running', 'completed', 'failed', 'cancelled'].includes(status)) {
             newNodeStatuses[nodeId] =
-              status === "failed"
-                ? "error"
-                : (status as "pending" | "running" | "completed");
+              status === 'failed' ? 'error' : (status as 'pending' | 'running' | 'completed');
           }
         }
         nodeStatuses = newNodeStatuses;
       }
 
-      addLog(
-        "info",
-        `Job status updated: ${jobStatusData.status_summary.total} total jobs`,
-      );
+      addLog('info', `Job status updated: ${jobStatusData.status_summary.total} total jobs`);
     } catch (error) {
-      logger.error("Failed to fetch pipeline data:", error);
+      logger.error('Failed to fetch pipeline data:', error);
       addLog(
-        "error",
-        `Failed to fetch pipeline data: ${error instanceof Error ? error.message : "Unknown error"}`,
+        'error',
+        `Failed to fetch pipeline data: ${error instanceof Error ? error.message : 'Unknown error'}`
       );
     } finally {
       isLoadingJobStatus = false;
@@ -172,8 +150,8 @@
       {
         level,
         message,
-        timestamp: new Date().toISOString(),
-      },
+        timestamp: new Date().toISOString()
+      }
     ];
   }
 
@@ -190,25 +168,25 @@
   function getPipelineActions() {
     return [
       {
-        label: isLoadingJobStatus ? "Refreshing..." : "Refresh Status",
-        href: "#refresh",
-        icon: isLoadingJobStatus ? "mdi:loading" : "mdi:refresh",
-        variant: "outline" as const,
+        label: isLoadingJobStatus ? 'Refreshing...' : 'Refresh Status',
+        href: '#refresh',
+        icon: isLoadingJobStatus ? 'mdi:loading' : 'mdi:refresh',
+        variant: 'outline' as const,
         onclick: (e: Event) => {
           e.preventDefault();
           fetchPipelineData();
-        },
+        }
       },
       {
-        label: "View Logs",
-        href: "#logs",
-        icon: "mdi:file-document-outline",
-        variant: "outline" as const,
+        label: 'View Logs',
+        href: '#logs',
+        icon: 'mdi:file-document-outline',
+        variant: 'outline' as const,
         onclick: (e: Event) => {
           e.preventDefault();
           toggleLogsSidebar();
-        },
-      },
+        }
+      }
     ];
   }
 
@@ -224,12 +202,12 @@
     const handleRefresh = () => fetchPipelineData();
     const handleViewLogs = () => toggleLogsSidebar();
 
-    window.addEventListener("pipeline-refresh", handleRefresh);
-    window.addEventListener("pipeline-view-logs", handleViewLogs);
+    window.addEventListener('pipeline-refresh', handleRefresh);
+    window.addEventListener('pipeline-view-logs', handleViewLogs);
 
     return () => {
-      window.removeEventListener("pipeline-refresh", handleRefresh);
-      window.removeEventListener("pipeline-view-logs", handleViewLogs);
+      window.removeEventListener('pipeline-refresh', handleRefresh);
+      window.removeEventListener('pipeline-view-logs', handleViewLogs);
     };
   });
 
@@ -238,35 +216,35 @@
     if (pipelineStatus && pipelineId && workflow) {
       const breadcrumbs = [
         {
-          label: "Home",
-          href: "/",
-          icon: "mdi:home",
+          label: 'Home',
+          href: '/',
+          icon: 'mdi:home'
         },
         {
-          label: "Workflows",
-          href: "/",
-          icon: "mdi:view-list",
+          label: 'Workflows',
+          href: '/',
+          icon: 'mdi:view-list'
         },
         {
-          label: workflow.name || "Workflow",
+          label: workflow.name || 'Workflow',
           href: `/workflow/${workflow.id}/edit`,
-          icon: "mdi:workflow",
+          icon: 'mdi:workflow'
         },
         {
-          label: "Pipelines",
+          label: 'Pipelines',
           href: `/workflow/${workflow.id}/pipelines`,
-          icon: "mdi:source-branch",
+          icon: 'mdi:source-branch'
         },
         {
           label: `Pipeline ${pipelineId} - ${pipelineStatus}`,
-          icon: "mdi:play-circle",
-        },
+          icon: 'mdi:play-circle'
+        }
       ];
 
       window.dispatchEvent(
-        new CustomEvent("page-breadcrumbs-update", {
-          detail: { breadcrumbs },
-        }),
+        new CustomEvent('page-breadcrumbs-update', {
+          detail: { breadcrumbs }
+        })
       );
     }
   });
@@ -289,7 +267,7 @@
     }
 
     // Only start polling if pipeline is running
-    if (pipelineStatus === "running" && pipelineId) {
+    if (pipelineStatus === 'running' && pipelineId) {
       refreshInterval = setInterval(() => {
         fetchPipelineData();
       }, 5000);
@@ -317,11 +295,7 @@
 
   <!-- Logs Sidebar -->
   {#if isLogsSidebarOpen}
-    <LogsSidebar
-      {logs}
-      isOpen={isLogsSidebarOpen}
-      onClose={() => (isLogsSidebarOpen = false)}
-    />
+    <LogsSidebar {logs} isOpen={isLogsSidebarOpen} onClose={() => (isLogsSidebarOpen = false)} />
   {/if}
 </div>
 
@@ -334,7 +308,7 @@
   }
 
   /* Dark mode override */
-  :global([data-theme="dark"]) .pipeline-status-container {
+  :global([data-theme='dark']) .pipeline-status-container {
     background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
   }
 </style>