@flowdrop/flowdrop 1.4.0 → 1.6.0

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>

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

@@ -1,6 +1,6 @@
-import { EnhancedFlowDropApiClient } from "../api/enhanced-client.js";
-import type { Workflow } from "../types/index.js";
-import type { EndpointConfig } from "../config/endpoints.js";
+import { EnhancedFlowDropApiClient } from '../api/enhanced-client.js';
+import type { Workflow } from '../types/index.js';
+import type { EndpointConfig } from '../config/endpoints.js';
 interface Props {
     pipelineId: string;
     workflow: Workflow;
@@ -11,7 +11,7 @@ interface Props {
         label: string;
         href: string;
         icon?: string;
-        variant?: "primary" | "secondary" | "outline";
+        variant?: 'primary' | 'secondary' | 'outline';
         onclick?: (event: Event) => void;
     }>) => void;
 }

package/dist/components/PortCoordinateTracker.svelte

@@ -8,12 +8,12 @@
 -->
 
 <script lang="ts">
-  import { useSvelteFlow, type InternalNode } from "@xyflow/svelte";
-  import type { WorkflowNode as WorkflowNodeType } from "../types/index.js";
+  import { useSvelteFlow, type InternalNode } from '@xyflow/svelte';
+  import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
   import {
     rebuildAllPortCoordinates,
-    updateNodePortCoordinates,
-  } from "../stores/portCoordinateStore.svelte.js";
+    updateNodePortCoordinates
+  } from '../stores/portCoordinateStore.svelte.js';
 
   interface Props {
     /** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
@@ -29,9 +29,7 @@
   const { getInternalNode } = useSvelteFlow();
 
   // Cast the getInternalNode function for our use
-  const getInternal = getInternalNode as (
-    id: string,
-  ) => InternalNode | undefined;
+  const getInternal = getInternalNode as (id: string) => InternalNode | undefined;
 
   /**
    * Rebuild all port coordinates when rebuildTrigger changes.

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

@@ -1,4 +1,4 @@
-import type { WorkflowNode as WorkflowNodeType } from "../types/index.js";
+import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
 interface Props {
     /** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
     nodeToUpdate: WorkflowNodeType | null;

package/dist/components/PortMappingRow.svelte

@@ -0,0 +1,205 @@
+<!--
+  PortMappingRow Component
+  A single row in the port mapping editor showing an old port → new port dropdown.
+  Styled with BEM syntax.
+-->
+
+<script lang="ts">
+  import type { NodePort } from '../types/index.js';
+  import type { EditablePortMapping, MatchQuality } from '../utils/nodeSwap.js';
+
+  interface Props {
+    mapping: EditablePortMapping;
+    availablePorts: NodePort[];
+    usedPortIds: Set<string>;
+    onUpdate: (newPortId: string | null) => void;
+    onReset: () => void;
+  }
+
+  const { mapping, availablePorts, usedPortIds, onUpdate, onReset }: Props = $props();
+
+  const QUALITY_LABELS: Record<MatchQuality, string> = {
+    id: 'ID match',
+    name: 'Name match',
+    type: 'Type match',
+    manual: 'Manual',
+    unmapped: 'No match'
+  };
+
+  const QUALITY_CLASSES: Record<MatchQuality, string> = {
+    id: 'port-mapping-row__badge--id',
+    name: 'port-mapping-row__badge--name',
+    type: 'port-mapping-row__badge--type',
+    manual: 'port-mapping-row__badge--manual',
+    unmapped: 'port-mapping-row__badge--unmapped'
+  };
+
+  function handleChange(event: Event): void {
+    const select = event.target as HTMLSelectElement;
+    const value = select.value;
+    onUpdate(value === '__drop__' ? null : value);
+  }
+</script>
+
+<div class="port-mapping-row">
+  <div class="port-mapping-row__info">
+    <span class="port-mapping-row__port-name">{mapping.oldPort.name}</span>
+    <span class="port-mapping-row__port-type">({mapping.oldPort.dataType})</span>
+  </div>
+
+  <div class="port-mapping-row__arrow">&rarr;</div>
+
+  <div class="port-mapping-row__select-wrapper">
+    <select
+      class="port-mapping-row__select"
+      class:port-mapping-row__select--dropped={!mapping.selectedNewPortId}
+      value={mapping.selectedNewPortId ?? '__drop__'}
+      onchange={handleChange}
+    >
+      <option value="__drop__">(Drop connection)</option>
+      {#each availablePorts as port (port.id)}
+        <option
+          value={port.id}
+          disabled={usedPortIds.has(port.id) && port.id !== mapping.selectedNewPortId}
+        >
+          {port.name} ({port.dataType}){usedPortIds.has(port.id) &&
+          port.id !== mapping.selectedNewPortId
+            ? ' (in use)'
+            : ''}
+        </option>
+      {/each}
+    </select>
+  </div>
+
+  <div class="port-mapping-row__meta">
+    <span class="port-mapping-row__badge {QUALITY_CLASSES[mapping.matchQuality]}">
+      {QUALITY_LABELS[mapping.matchQuality]}
+    </span>
+    {#if mapping.isOverridden}
+      <button class="port-mapping-row__reset" onclick={onReset} type="button"> reset </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .port-mapping-row {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-xs) 0;
+    font-size: var(--fd-text-xs);
+  }
+
+  .port-mapping-row__info {
+    flex: 0 0 auto;
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: var(--fd-space-3xs);
+  }
+
+  .port-mapping-row__port-name {
+    font-weight: 500;
+    color: var(--fd-foreground);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .port-mapping-row__port-type {
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-xs);
+  }
+
+  .port-mapping-row__arrow {
+    flex-shrink: 0;
+    color: var(--fd-muted-foreground);
+  }
+
+  .port-mapping-row__select-wrapper {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .port-mapping-row__select {
+    width: 100%;
+    padding: 0.25rem 0.375rem;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm);
+    background-color: var(--fd-background);
+    color: var(--fd-foreground);
+    font-size: var(--fd-text-xs);
+    cursor: pointer;
+    transition:
+      border-color var(--fd-transition-normal),
+      box-shadow var(--fd-transition-normal);
+  }
+
+  .port-mapping-row__select:focus {
+    outline: none;
+    border-color: var(--fd-ring);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-ring) 20%, transparent);
+  }
+
+  .port-mapping-row__select--dropped {
+    border-color: var(--fd-warning);
+    color: var(--fd-warning);
+  }
+
+  .port-mapping-row__meta {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-3xs);
+  }
+
+  .port-mapping-row__badge {
+    font-size: var(--fd-text-xs);
+    padding: 0.0625rem 0.375rem;
+    border-radius: var(--fd-radius-sm);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    white-space: nowrap;
+  }
+
+  .port-mapping-row__badge--id {
+    background-color: color-mix(in srgb, var(--fd-success) 15%, transparent);
+    color: var(--fd-success);
+  }
+
+  .port-mapping-row__badge--name {
+    background-color: color-mix(in srgb, var(--fd-primary) 15%, transparent);
+    color: var(--fd-primary);
+  }
+
+  .port-mapping-row__badge--type {
+    background-color: color-mix(in srgb, var(--fd-warning) 15%, transparent);
+    color: var(--fd-warning);
+  }
+
+  .port-mapping-row__badge--manual {
+    background-color: color-mix(in srgb, #a855f7 15%, transparent);
+    color: #a855f7;
+  }
+
+  .port-mapping-row__badge--unmapped {
+    background-color: color-mix(in srgb, var(--fd-error) 15%, transparent);
+    color: var(--fd-error);
+  }
+
+  .port-mapping-row__reset {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-xs);
+    text-decoration: underline;
+    padding: 0;
+    transition: color var(--fd-transition-fast);
+  }
+
+  .port-mapping-row__reset:hover {
+    color: var(--fd-primary);
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { NodePort } from '../types/index.js';
+import type { EditablePortMapping } from '../utils/nodeSwap.js';
+interface Props {
+    mapping: EditablePortMapping;
+    availablePorts: NodePort[];
+    usedPortIds: Set<string>;
+    onUpdate: (newPortId: string | null) => void;
+    onReset: () => void;
+}
+declare const PortMappingRow: import("svelte").Component<Props, {}, "">;
+type PortMappingRow = ReturnType<typeof PortMappingRow>;
+export default PortMappingRow;

package/dist/components/ReadOnlyDetails.svelte

@@ -129,7 +129,7 @@
 
   .readonly-details__id {
     font-size: 0.75rem;
-    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
     color: var(--fd-muted-foreground);
     background-color: var(--fd-subtle);
     padding: 0.125rem 0.375rem;