@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.1

package/dist/components/playground/PipelineKanbanView.svelte

@@ -42,6 +42,7 @@
     getStatusTextColor,
     getStatusBackgroundColor
   } from '../../utils/nodeStatus.js';
+  import { formatMicroseconds } from '../../utils/duration.js';
   import type { NodeStatus } from './pipelineViewUtils.svelte.js';
   import type { Workflow, WorkflowNode } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
@@ -55,7 +56,8 @@
 
   let { pipelineId, workflow, endpointConfig, refreshTrigger = 0 }: Props = $props();
 
-  // svelte-ignore state_referenced_locally — endpointConfig is consumed once to build the API client; it must be stable
+  // endpointConfig is consumed once to build the API client; it must be stable
+  // svelte-ignore state_referenced_locally
   const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig);
 
   $effect(() => {
@@ -65,8 +67,13 @@
   });
 
   interface CardItem {
-    node: WorkflowNode;
+    /** Stable key: job id, or node id for nodes without a job yet */
+    key: string;
+    label: string;
+    typeId: string;
     status: NodeStatus;
+    /** Duration in microseconds, for finished jobs */
+    durationUs?: number | null;
   }
 
   const columnedNodes = $derived.by(() => {
@@ -85,10 +92,37 @@
       nodesByColumn.set(col.key, []);
     }
 
+    const nodesById = new Map<string, WorkflowNode>(workflow.nodes.map((node) => [node.id, node]));
+
+    // One card per job: loop iterations create multiple jobs for the same
+    // node, and each deserves its own card (label carries the #N suffix).
+    const nodesWithJobs = new Set<string>();
+    for (const job of fetcher.jobs) {
+      const node = nodesById.get(job.nodeId);
+      if (!node) continue;
+      nodesWithJobs.add(job.nodeId);
+      const status = resolveStatus({ status: job.status });
+      const colKey = statusToColumn.get(status) ?? fallbackKey;
+      nodesByColumn.get(colKey)?.push({
+        key: job.id,
+        label: job.label || node.data.label,
+        typeId: node.data.metadata.id,
+        status,
+        durationUs: job.executionTimeUs
+      });
+    }
+
+    // Nodes without a job yet keep a single card (pending / not reached).
     for (const node of workflow.nodes) {
+      if (nodesWithJobs.has(node.id)) continue;
       const status = resolveStatus(fetcher.nodeStatusMap[node.id]);
       const colKey = statusToColumn.get(status) ?? fallbackKey;
-      nodesByColumn.get(colKey)?.push({ node, status });
+      nodesByColumn.get(colKey)?.push({
+        key: node.id,
+        label: node.data.label,
+        typeId: node.data.metadata.id,
+        status
+      });
     }
 
     return { columns, nodesByColumn };
@@ -122,11 +156,11 @@
             <span class="pipeline-kanban__col-count">{items.length}</span>
           </div>
           <div class="pipeline-kanban__cards">
-            {#each items as { node, status } (node.id)}
+            {#each items as { key, label, typeId, status, durationUs } (key)}
               <div class="pipeline-kanban__card">
                 <div class="pipeline-kanban__card-body">
                   <div class="pipeline-kanban__card-top">
-                    <span class="pipeline-kanban__card-label">{node.data.label}</span>
+                    <span class="pipeline-kanban__card-label">{label}</span>
                     {#if showStatusPill}
                       <span
                         class="pipeline-kanban__card-status"
@@ -137,7 +171,14 @@
                       >
                     {/if}
                   </div>
-                  <span class="pipeline-kanban__card-type">{node.data.metadata.id}</span>
+                  <div class="pipeline-kanban__card-meta">
+                    <span class="pipeline-kanban__card-type">{typeId}</span>
+                    {#if durationUs != null}
+                      <span class="pipeline-kanban__card-duration"
+                        >{formatMicroseconds(durationUs)}</span
+                      >
+                    {/if}
+                  </div>
                 </div>
               </div>
             {/each}
@@ -296,12 +337,30 @@
     flex-shrink: 0;
   }
 
+  .pipeline-kanban__card-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    min-width: 0;
+  }
+
   .pipeline-kanban__card-type {
     color: var(--fd-muted-foreground);
     font-size: var(--fd-text-2xs);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .pipeline-kanban__card-duration {
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-2xs);
+    font-family: var(--fd-font-mono, monospace);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    flex-shrink: 0;
   }
 
   .pipeline-kanban__empty {

package/dist/components/playground/PipelinePanel.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  const VIEW_MODE_KEY = 'fd-pipeline-view-mode';
+  const VIEW_MODE_KEY_BASE = 'fd-pipeline-view-mode';
   const BUILTIN_VIEWS = ['graph', 'kanban', 'table'] as const;
   // `string & {}` preserves autocomplete for built-in values while still accepting arbitrary strings from extraViews.
   type ViewMode = (typeof BUILTIN_VIEWS)[number] | (string & {});
@@ -7,6 +7,7 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { getInstance } from '../../stores/getInstance.svelte.js';
   import PipelineStatus from '../PipelineStatus.svelte';
   import PipelineKanbanView from './PipelineKanbanView.svelte';
   import PipelineTableView from './PipelineTableView.svelte';
@@ -46,10 +47,16 @@
     extraViews = []
   }: Props = $props();
 
+  const fd = getInstance();
+
+  // The default instance keeps the legacy bare key; additional instances get
+  // a scoped key so two editors' view-mode choices don't overwrite each other.
+  const viewModeKey = fd.isDefault ? VIEW_MODE_KEY_BASE : `${VIEW_MODE_KEY_BASE}:${fd.id}`;
+
   let viewMode = $state<ViewMode>('graph');
 
   onMount(() => {
-    const stored = localStorage.getItem(VIEW_MODE_KEY);
+    const stored = localStorage.getItem(viewModeKey);
     if (!stored) return;
     const validKeys = [...BUILTIN_VIEWS, ...extraViews.map((v) => v.key)];
     if (validKeys.includes(stored)) viewMode = stored;
@@ -58,7 +65,7 @@
   function selectViewMode(mode: ViewMode) {
     viewMode = mode;
     try {
-      localStorage.setItem(VIEW_MODE_KEY, mode);
+      localStorage.setItem(viewModeKey, mode);
     } catch (e) {
       logger.warn('[FlowDrop] Could not persist view mode to localStorage:', e);
     }
@@ -268,8 +275,7 @@
         width="100%"
         showNavbar={false}
         disableSidebar={true}
-        lockWorkflow={true}
-        readOnly={true}
+        mode="locked"
         {endpointConfig}
       />
     {/if}

package/dist/components/playground/PipelineTableView.svelte

@@ -25,19 +25,26 @@
     idle: 'mdi:circle-outline'
   };
 
-  function formatDuration(ms: number | null | undefined): string | null {
-    if (ms == null) return null;
-    if (ms < 1000) return `${ms}ms`;
-    if (ms < 60000) return `${(ms / 1000).toFixed(2)}s`;
-    const mins = Math.floor(ms / 60000);
-    const secs = Math.floor((ms % 60000) / 1000);
-    return `${mins}m ${secs}s`;
-  }
-
   function formatDateTime(iso: string | null | undefined): string | null {
     if (!iso) return null;
     return new Date(iso).toLocaleString();
   }
+
+  function formatJson(value: unknown): string {
+    if (typeof value === 'string') return value;
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  }
+
+  /** Treat null/undefined and empty objects/arrays as "nothing to show". */
+  function hasData(value: unknown): boolean {
+    if (value == null) return false;
+    if (typeof value === 'object') return Object.keys(value).length > 0;
+    return value !== '';
+  }
 </script>
 
 <script lang="ts">
@@ -45,7 +52,7 @@
   import Icon from '@iconify/svelte';
   import { createPipelineDataFetcher, resolveStatus } from './pipelineViewUtils.svelte.js';
   import { getStatusTextColor } from '../../utils/nodeStatus.js';
-  import type { NodeStatusData } from './pipelineViewUtils.svelte.js';
+  import { formatMicroseconds } from '../../utils/duration.js';
   import type { Workflow, WorkflowNode } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
 
@@ -58,13 +65,26 @@
 
   let { pipelineId, workflow, endpointConfig, refreshTrigger = 0 }: Props = $props();
 
-  interface NodeRow {
-    node: WorkflowNode;
+  interface JobRow {
+    /** Stable key: job id, or node id for nodes without a job yet */
+    key: string;
+    label: string;
+    typeId: string;
+    nodeId: string;
     status: NodeStatus;
-    statusData: NodeStatusData | undefined;
-  }
-
-  // svelte-ignore state_referenced_locally — endpointConfig is consumed once to build the API client; it must be stable
+    started?: string | null;
+    completed?: string | null;
+    /** Duration in microseconds */
+    executionTimeUs?: number | null;
+    error?: string | null;
+    retryCount?: number | null;
+    maxRetries?: number | null;
+    inputData?: unknown;
+    outputData?: unknown;
+  }
+
+  // endpointConfig is consumed once to build the API client; it must be stable
+  // svelte-ignore state_referenced_locally
   const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig);
 
   $effect(() => {
@@ -73,28 +93,76 @@
     return () => clearTimeout(timer);
   });
 
-  const sortedRows = $derived.by((): NodeRow[] =>
-    workflow.nodes
+  // One row per job, timeline style: loop iterations create multiple jobs
+  // for the same node and each shows as its own row (label carries the #N
+  // suffix). Executed jobs sort by start time; never-started jobs keep
+  // pipeline order at the end, followed by nodes that have no job yet.
+  const sortedRows = $derived.by((): JobRow[] => {
+    const nodesById = new Map<string, WorkflowNode>(workflow.nodes.map((node) => [node.id, node]));
+
+    const jobRows: JobRow[] = [];
+    const nodesWithJobs = new Set<string>();
+    for (const job of fetcher.jobs) {
+      const node = nodesById.get(job.nodeId);
+      if (!node) continue;
+      nodesWithJobs.add(job.nodeId);
+      jobRows.push({
+        key: job.id,
+        label: job.label || node.data.label,
+        typeId: node.data.metadata.id,
+        nodeId: job.nodeId,
+        status: resolveStatus({ status: job.status }),
+        started: job.started,
+        completed: job.completed,
+        executionTimeUs: job.executionTimeUs,
+        error: job.error,
+        retryCount: job.retryCount,
+        maxRetries: job.maxRetries,
+        inputData: job.inputData,
+        outputData: job.outputData
+      });
+    }
+
+    const startedRows = jobRows
+      .filter((row) => row.started)
+      .sort((a, b) => Date.parse(a.started!) - Date.parse(b.started!));
+    const neverStartedRows = jobRows.filter((row) => !row.started);
+
+    const nodeRows: JobRow[] = workflow.nodes
+      .filter((node) => !nodesWithJobs.has(node.id))
       .map((node) => {
         const statusData = fetcher.nodeStatusMap[node.id];
-        return { node, status: resolveStatus(statusData), statusData };
+        return {
+          key: node.id,
+          label: node.data.label,
+          typeId: node.data.metadata.id,
+          nodeId: node.id,
+          status: resolveStatus(statusData),
+          started: statusData?.last_executed,
+          executionTimeUs:
+            statusData?.execution_time_us ??
+            (statusData?.execution_time != null ? statusData.execution_time * 1000 : null),
+          error: statusData?.error
+        };
       })
-      .sort((a, b) => (STATUS_ORDER[a.status] ?? Infinity) - (STATUS_ORDER[b.status] ?? Infinity))
-  );
+      .sort((a, b) => (STATUS_ORDER[a.status] ?? Infinity) - (STATUS_ORDER[b.status] ?? Infinity));
+
+    return [...startedRows, ...neverStartedRows, ...nodeRows];
+  });
 
   let expandedIds = $state(new Set<string>());
 
-  function hasDetails(row: NodeRow): boolean {
-    return !!(row.statusData?.last_executed || row.statusData?.error);
+  function hasDetails(row: JobRow): boolean {
+    return !!(row.started || row.error || hasData(row.inputData) || hasData(row.outputData));
   }
 
-  function toggleRow(row: NodeRow) {
+  function toggleRow(row: JobRow) {
     if (!hasDetails(row)) return;
     const next = new Set(expandedIds);
-    if (next.has(row.node.id)) {
-      next.delete(row.node.id);
+    if (next.has(row.key)) {
+      next.delete(row.key);
     } else {
-      next.add(row.node.id);
+      next.add(row.key);
     }
     expandedIds = next;
   }
@@ -121,12 +189,13 @@
             <th class="pipeline-table__th">Node</th>
             <th class="pipeline-table__th">Type</th>
             <th class="pipeline-table__th">Status</th>
+            <th class="pipeline-table__th pipeline-table__th--duration">Duration</th>
             <th class="pipeline-table__th pipeline-table__th--id">ID</th>
           </tr>
         </thead>
         <tbody>
-          {#each sortedRows as row (row.node.id)}
-            {@const expanded = expandedIds.has(row.node.id)}
+          {#each sortedRows as row (row.key)}
+            {@const expanded = expandedIds.has(row.key)}
             {@const expandable = hasDetails(row)}
             <tr
               class="pipeline-table__row"
@@ -144,12 +213,11 @@
                   />
                 {/if}
               </td>
-              <td class="pipeline-table__td pipeline-table__td--label" title={row.node.data.label}
-                >{row.node.data.label}</td
+              <td class="pipeline-table__td pipeline-table__td--label" title={row.label}
+                >{row.label}</td
               >
-              <td
-                class="pipeline-table__td pipeline-table__td--muted"
-                title={row.node.data.metadata.id}>{row.node.data.metadata.id}</td
+              <td class="pipeline-table__td pipeline-table__td--muted" title={row.typeId}
+                >{row.typeId}</td
               >
               <td class="pipeline-table__td">
                 <span
@@ -163,33 +231,62 @@
                   {row.status}
                 </span>
               </td>
-              <td class="pipeline-table__td pipeline-table__td--id" title={row.node.id}
-                >{row.node.id}</td
+              <td class="pipeline-table__td pipeline-table__td--duration">
+                {formatMicroseconds(row.executionTimeUs) ?? '—'}
+              </td>
+              <td class="pipeline-table__td pipeline-table__td--id" title={row.nodeId}
+                >{row.nodeId}</td
               >
             </tr>
             {#if expanded && expandable}
               <tr class="pipeline-table__detail-row">
-                <td colspan="5" class="pipeline-table__detail-cell">
+                <td colspan="6" class="pipeline-table__detail-cell">
                   <dl class="pipeline-table__details">
-                    {#if row.statusData?.last_executed}
+                    {#if row.started}
+                      <div class="pipeline-table__detail-item">
+                        <dt>Started</dt>
+                        <dd>{formatDateTime(row.started)}</dd>
+                      </div>
+                    {/if}
+                    {#if row.completed}
                       <div class="pipeline-table__detail-item">
-                        <dt>Last executed</dt>
-                        <dd>{formatDateTime(row.statusData.last_executed)}</dd>
+                        <dt>Completed</dt>
+                        <dd>{formatDateTime(row.completed)}</dd>
                       </div>
                     {/if}
-                    {#if row.statusData?.execution_time != null}
+                    {#if row.executionTimeUs != null}
                       <div class="pipeline-table__detail-item">
                         <dt>Duration</dt>
-                        <dd>{formatDuration(row.statusData.execution_time)}</dd>
+                        <dd>{formatMicroseconds(row.executionTimeUs)}</dd>
                       </div>
                     {/if}
-                    {#if row.statusData?.error}
+                    {#if row.retryCount != null && row.retryCount > 0}
+                      <div class="pipeline-table__detail-item">
+                        <dt>Retries</dt>
+                        <dd>
+                          {row.retryCount}{row.maxRetries != null ? ` / ${row.maxRetries}` : ''}
+                        </dd>
+                      </div>
+                    {/if}
+                    {#if row.error}
                       <div class="pipeline-table__detail-item pipeline-table__detail-item--error">
                         <dt>Error</dt>
-                        <dd>{row.statusData.error}</dd>
+                        <dd>{row.error}</dd>
                       </div>
                     {/if}
                   </dl>
+                  {#if hasData(row.inputData)}
+                    <details class="pipeline-table__data">
+                      <summary class="pipeline-table__data-summary">Input data</summary>
+                      <pre class="pipeline-table__data-pre">{formatJson(row.inputData)}</pre>
+                    </details>
+                  {/if}
+                  {#if hasData(row.outputData)}
+                    <details class="pipeline-table__data">
+                      <summary class="pipeline-table__data-summary">Output data</summary>
+                      <pre class="pipeline-table__data-pre">{formatJson(row.outputData)}</pre>
+                    </details>
+                  {/if}
                 </td>
               </tr>
             {/if}
@@ -270,6 +367,19 @@
     font-family: var(--fd-font-mono, monospace);
   }
 
+  .pipeline-table__th--duration,
+  .pipeline-table__td--duration {
+    text-align: right;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .pipeline-table__td--duration {
+    font-family: var(--fd-font-mono, monospace);
+    font-size: var(--fd-text-2xs);
+    color: var(--fd-muted-foreground);
+  }
+
   .pipeline-table__th--expand {
     width: 1.5rem;
     padding-right: 0;
@@ -375,6 +485,38 @@
     font-size: var(--fd-text-2xs);
   }
 
+  .pipeline-table__data {
+    margin-top: var(--fd-space-sm);
+  }
+
+  .pipeline-table__data-summary {
+    cursor: pointer;
+    font-size: var(--fd-text-2xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--fd-muted-foreground);
+    user-select: none;
+  }
+
+  .pipeline-table__data-summary:hover {
+    color: var(--fd-foreground);
+  }
+
+  .pipeline-table__data-pre {
+    margin: var(--fd-space-2xs) 0 0;
+    padding: var(--fd-space-sm);
+    max-height: 16rem;
+    overflow: auto;
+    font-family: var(--fd-font-mono, monospace);
+    font-size: var(--fd-text-2xs);
+    background-color: var(--fd-muted);
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-sm, 4px);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
   .pipeline-table__status {
     display: inline-flex;
     align-items: center;