@flowdrop/flowdrop 1.11.0 → 1.12.0

package/dist/components/playground/PipelineKanbanView.svelte

@@ -0,0 +1,284 @@
+<script module lang="ts">
+  import type { KanbanColumnDef } from '../../types/index.js';
+
+  const DEFAULT_COLUMNS: KanbanColumnDef[] = [
+    { key: 'pending',     label: 'Pending',     statuses: ['idle', 'pending'],                    icon: 'mdi:clock-outline',        color: 'var(--fd-muted-foreground)' },
+    { key: 'in_progress', label: 'In Progress', statuses: ['running', 'paused', 'interrupted'],   icon: 'mdi:play-circle-outline',  color: 'var(--fd-warning)'          },
+    { key: 'done',        label: 'Done',        statuses: ['completed', 'skipped'],               icon: 'mdi:check-circle',         color: 'var(--fd-success)'          },
+    { key: 'failed',      label: 'Failed',      statuses: ['failed', 'cancelled'],                icon: 'mdi:alert-circle',         color: 'var(--fd-error)'            },
+  ];
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Icon from '@iconify/svelte';
+  import { createPipelineDataFetcher, resolveStatus } from './pipelineViewUtils.svelte.js';
+  import { getStatusLabel, getStatusTextColor, getStatusBackgroundColor } from '../../utils/nodeStatus.js';
+  import type { NodeStatus } from './pipelineViewUtils.svelte.js';
+  import type { Workflow, WorkflowNode } from '../../types/index.js';
+  import type { EndpointConfig } from '../../config/endpoints.js';
+
+  interface Props {
+    pipelineId: string;
+    workflow: Workflow;
+    endpointConfig: EndpointConfig;
+    refreshTrigger?: number;
+  }
+
+  let { pipelineId, workflow, endpointConfig, refreshTrigger = 0 }: Props = $props();
+
+  const fetcher = createPipelineDataFetcher(() => pipelineId, endpointConfig);
+
+  $effect(() => {
+    if (refreshTrigger <= 0) return;
+    const timer = setTimeout(() => fetcher.fetchData(), 300);
+    return () => clearTimeout(timer);
+  });
+
+  interface CardItem {
+    node: WorkflowNode;
+    status: NodeStatus;
+  }
+
+  const columnedNodes = $derived.by(() => {
+    const columns = fetcher.kanbanConfig ?? DEFAULT_COLUMNS;
+
+    const statusToColumn = new Map<string, string>();
+    for (const col of columns) {
+      for (const status of col.statuses) {
+        statusToColumn.set(status, col.key);
+      }
+    }
+    const fallbackKey = columns[0]?.key ?? 'pending';
+
+    const nodesByColumn = new Map<string, CardItem[]>();
+    for (const col of columns) {
+      nodesByColumn.set(col.key, []);
+    }
+
+    for (const node of workflow.nodes) {
+      const status = resolveStatus(fetcher.nodeStatusMap[node.id]);
+      const colKey = statusToColumn.get(status) ?? fallbackKey;
+      nodesByColumn.get(colKey)?.push({ node, status });
+    }
+
+    return { columns, nodesByColumn };
+  });
+
+  onMount(() => {
+    fetcher.fetchData();
+  });
+</script>
+
+<div class="pipeline-kanban">
+  {#if fetcher.isError}
+    <div class="pipeline-kanban__error">Could not refresh status data</div>
+  {/if}
+  {#if fetcher.isLoading && Object.keys(fetcher.nodeStatusMap).length === 0}
+    <div class="pipeline-kanban__loading">
+      <Icon icon="mdi:loading" class="pipeline-kanban__spinner" />
+    </div>
+  {:else}
+    <div class="pipeline-kanban__board">
+      {#each columnedNodes.columns as col (col.key)}
+        {@const items = columnedNodes.nodesByColumn.get(col.key) ?? []}
+        {@const showStatusPill = col.statuses.length > 1}
+        <div
+          class="pipeline-kanban__column"
+          style="--col-color: {col.color ?? 'var(--fd-muted-foreground)'}"
+        >
+          <div class="pipeline-kanban__column-header">
+            <Icon
+              icon={col.icon ?? 'mdi:circle-outline'}
+              class="pipeline-kanban__col-icon"
+            />
+            <span class="pipeline-kanban__col-label">{col.label}</span>
+            <span class="pipeline-kanban__col-count">{items.length}</span>
+          </div>
+          <div class="pipeline-kanban__cards">
+            {#each items as { node, status } (node.id)}
+              <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>
+                    {#if showStatusPill}
+                      <span
+                        class="pipeline-kanban__card-status"
+                        style="color: {getStatusTextColor(status)}; background-color: {getStatusBackgroundColor(status)}"
+                      >{getStatusLabel(status)}</span>
+                    {/if}
+                  </div>
+                  <span class="pipeline-kanban__card-type">{node.data.metadata.id}</span>
+                </div>
+              </div>
+            {/each}
+            {#if items.length === 0}
+              <div class="pipeline-kanban__empty">—</div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .pipeline-kanban {
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: var(--fd-space-sm);
+  }
+
+  .pipeline-kanban__error {
+    padding: var(--fd-space-xs) var(--fd-space-md);
+    font-size: var(--fd-text-2xs);
+    color: var(--fd-error);
+    background-color: color-mix(in srgb, var(--fd-error) 8%, transparent);
+    border-bottom: 1px solid color-mix(in srgb, var(--fd-error) 20%, transparent);
+    flex-shrink: 0;
+  }
+
+  .pipeline-kanban__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    color: var(--fd-muted-foreground);
+  }
+
+  :global(.pipeline-kanban__spinner) {
+    font-size: 1.5rem;
+    animation: kanban-spin 1s linear infinite;
+  }
+
+  @keyframes kanban-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .pipeline-kanban__board {
+    display: flex;
+    gap: var(--fd-space-sm);
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .pipeline-kanban__column {
+    display: flex;
+    flex-direction: column;
+    min-width: 160px;
+    flex: 1;
+    background-color: var(--fd-background);
+    border-radius: var(--fd-radius-md);
+    border: 1px solid var(--fd-border);
+    overflow: hidden;
+  }
+
+  .pipeline-kanban__column-header {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-sm) var(--fd-space-md);
+    border-bottom: 1px solid var(--fd-border);
+    flex-shrink: 0;
+  }
+
+  .pipeline-kanban__col-label {
+    font-size: var(--fd-text-xs);
+    font-weight: 600;
+    flex: 1;
+    color: var(--fd-foreground);
+  }
+
+  .pipeline-kanban__col-count {
+    font-size: var(--fd-text-2xs);
+    font-weight: 600;
+    padding: 1px var(--fd-space-xs);
+    border-radius: var(--fd-radius-sm);
+    background-color: var(--fd-muted);
+    color: var(--fd-muted-foreground);
+    min-width: 18px;
+    text-align: center;
+  }
+
+  :global(.pipeline-kanban__col-icon) {
+    font-size: var(--fd-text-sm);
+    flex-shrink: 0;
+    color: var(--col-color, var(--fd-muted-foreground));
+  }
+
+  .pipeline-kanban__cards {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fd-space-xs);
+    padding: var(--fd-space-xs);
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .pipeline-kanban__card {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--fd-space-sm);
+    border-radius: var(--fd-radius-sm);
+    border: 1px solid var(--fd-border);
+    border-left-width: 3px;
+    border-left-color: var(--col-color, var(--fd-border));
+    background-color: var(--fd-card);
+    font-size: var(--fd-text-xs);
+  }
+
+  .pipeline-kanban__card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .pipeline-kanban__card-top {
+    display: flex;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    min-width: 0;
+  }
+
+  .pipeline-kanban__card-label {
+    font-weight: 500;
+    color: var(--fd-foreground);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .pipeline-kanban__card-status {
+    display: inline-block;
+    font-size: var(--fd-text-2xs);
+    font-weight: 500;
+    padding: 1px var(--fd-space-xs);
+    border-radius: var(--fd-radius-sm);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .pipeline-kanban__card-type {
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-2xs);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .pipeline-kanban__empty {
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-xs);
+    text-align: center;
+    padding: var(--fd-space-md);
+  }
+</style>

package/dist/components/playground/PipelineKanbanView.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Workflow } from '../../types/index.js';
+import type { EndpointConfig } from '../../config/endpoints.js';
+interface Props {
+    pipelineId: string;
+    workflow: Workflow;
+    endpointConfig: EndpointConfig;
+    refreshTrigger?: number;
+}
+declare const PipelineKanbanView: import("svelte").Component<Props, {}, "">;
+type PipelineKanbanView = ReturnType<typeof PipelineKanbanView>;
+export default PipelineKanbanView;

package/dist/components/playground/PipelinePanel.svelte

@@ -1,7 +1,19 @@
+<script module lang="ts">
+  const VIEW_MODE_KEY = '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 & {});
+</script>
+
 <script lang="ts">
+  import { onMount } from 'svelte';
   import PipelineStatus from '../PipelineStatus.svelte';
+  import PipelineKanbanView from './PipelineKanbanView.svelte';
+  import PipelineTableView from './PipelineTableView.svelte';
+  import App from '../App.svelte';
   import Icon from '@iconify/svelte';
-  import type { Workflow } from '../../types/index.js';
+  import { logger } from '../../utils/logger.js';
+  import type { Workflow, PipelineViewDef } from '../../types/index.js';
   import type { EndpointConfig } from '../../config/endpoints.js';
   import type { PlaygroundExecution } from '../../types/playground.js';
 
@@ -18,6 +30,8 @@
     onSelectExecution?: (id: string | null) => void;
     /** Increments when new messages arrive — forwarded to PipelineStatus for immediate refresh */
     refreshTrigger?: number;
+    /** Additional views injected by the library consumer */
+    extraViews?: PipelineViewDef[];
   }
 
   let {
@@ -29,12 +43,38 @@
     latestExecutionId = null,
     onSelectExecution,
     refreshTrigger = 0,
+    extraViews = []
   }: Props = $props();
 
+  let viewMode = $state<ViewMode>('graph');
+
+  onMount(() => {
+    const stored = localStorage.getItem(VIEW_MODE_KEY);
+    if (!stored) return;
+    const validKeys = [...BUILTIN_VIEWS, ...extraViews.map((v) => v.key)];
+    if (validKeys.includes(stored)) viewMode = stored;
+  });
+
+  function selectViewMode(mode: ViewMode) {
+    viewMode = mode;
+    try {
+      localStorage.setItem(VIEW_MODE_KEY, mode);
+    } catch (e) {
+      logger.warn('[FlowDrop] Could not persist view mode to localStorage:', e);
+    }
+  }
+
   let runDropdownOpen = $state(false);
   let chipWrapEl = $state<HTMLElement | null>(null);
+  let runChipEl = $state<HTMLElement | null>(null);
+  let runPopoverEl = $state<HTMLElement | null>(null);
+
+  $effect(() => {
+    if (runDropdownOpen && runPopoverEl) {
+      runPopoverEl.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
+    }
+  });
 
-  // Close run popover on outside click
   $effect(() => {
     if (!runDropdownOpen) return;
     function handleOutside(e: MouseEvent) {
@@ -46,17 +86,17 @@
     return () => document.removeEventListener('click', handleOutside);
   });
 
-  function statusIcon(status: PlaygroundExecution['status']): string {
-    if (status === 'running') return 'mdi:loading';
-    if (status === 'failed') return 'mdi:alert-circle';
-    return 'mdi:check-circle';
-  }
-
-  function statusClass(status: PlaygroundExecution['status']): string {
-    if (status === 'running') return 'pipeline-panel__run-status--running';
-    if (status === 'failed') return 'pipeline-panel__run-status--failed';
-    return 'pipeline-panel__run-status--completed';
-  }
+  const STATUS_ICON: Record<PlaygroundExecution['status'], string> = {
+    running: 'mdi:play-circle-outline',
+    failed: 'mdi:alert-circle',
+    completed: 'mdi:check-circle'
+  };
+
+  const STATUS_CLASS: Record<PlaygroundExecution['status'], string> = {
+    running: 'pipeline-panel__run-status--running',
+    failed: 'pipeline-panel__run-status--failed',
+    completed: 'pipeline-panel__run-status--completed'
+  };
 </script>
 
 <div class="pipeline-panel">
@@ -64,27 +104,91 @@
     <Icon icon="mdi:source-branch" class="pipeline-panel__icon" />
     <span class="pipeline-panel__title">Pipeline</span>
 
+    {#if pipelineId}
+      <div class="pipeline-panel__view-toggle" role="group" aria-label="View mode">
+        <button
+          type="button"
+          class="pipeline-panel__view-btn"
+          class:pipeline-panel__view-btn--active={viewMode === 'graph'}
+          onclick={() => selectViewMode('graph')}
+          title="Graph view"
+        >
+          <Icon icon="mdi:sitemap-outline" />
+        </button>
+        <button
+          type="button"
+          class="pipeline-panel__view-btn"
+          class:pipeline-panel__view-btn--active={viewMode === 'kanban'}
+          onclick={() => selectViewMode('kanban')}
+          title="Kanban view"
+        >
+          <Icon icon="mdi:view-column-outline" />
+        </button>
+        <button
+          type="button"
+          class="pipeline-panel__view-btn"
+          class:pipeline-panel__view-btn--active={viewMode === 'table'}
+          onclick={() => selectViewMode('table')}
+          title="Table view"
+        >
+          <Icon icon="mdi:table-large" />
+        </button>
+        {#each extraViews as view (view.key)}
+          <button
+            type="button"
+            class="pipeline-panel__view-btn"
+            class:pipeline-panel__view-btn--active={viewMode === view.key}
+            onclick={() => selectViewMode(view.key)}
+            title={view.label}
+          >
+            <Icon icon={view.icon} />
+          </button>
+        {/each}
+      </div>
+    {/if}
+
     {#if pipelineId && executions.length > 0}
-      <!-- Run picker chip -->
       <div class="pipeline-panel__run-chip-wrap" bind:this={chipWrapEl}>
         <button
           type="button"
           class="pipeline-panel__run-chip"
           class:pipeline-panel__run-chip--pinned={isPinned}
           class:pipeline-panel__run-chip--open={runDropdownOpen}
+          bind:this={runChipEl}
+          aria-haspopup="menu"
+          aria-expanded={runDropdownOpen}
           onclick={() => (runDropdownOpen = !runDropdownOpen)}
+          onkeydown={(e) => {
+            if (e.key === 'Escape') {
+              runDropdownOpen = false;
+            }
+          }}
           title="Switch run"
         >
-          <span class="pipeline-panel__run-chip-label">{pipelineId ?? 'Run'}</span>
-          <Icon icon={runDropdownOpen ? 'mdi:chevron-up' : 'mdi:chevron-down'} class="pipeline-panel__run-chip-chevron" />
+          <span class="pipeline-panel__run-chip-label">{pipelineId}</span>
+          <Icon
+            icon={runDropdownOpen ? 'mdi:chevron-up' : 'mdi:chevron-down'}
+            class="pipeline-panel__run-chip-chevron"
+          />
         </button>
 
         {#if runDropdownOpen}
-          <div class="pipeline-panel__run-popover">
+          <div
+            class="pipeline-panel__run-popover"
+            bind:this={runPopoverEl}
+            role="menu"
+            onkeydown={(e) => {
+              if (e.key === 'Escape') {
+                runDropdownOpen = false;
+                runChipEl?.focus();
+              }
+            }}
+          >
             {#each [...executions].reverse() as exec (exec.id)}
               {@const isActive = pipelineId === exec.id}
               <button
                 type="button"
+                role="menuitem"
                 class="pipeline-panel__run-popover-item"
                 class:pipeline-panel__run-popover-item--active={isActive}
                 onclick={() => {
@@ -93,8 +197,8 @@
                 }}
               >
                 <Icon
-                  icon={statusIcon(exec.status)}
-                  class="pipeline-panel__run-status {statusClass(exec.status)}"
+                  icon={STATUS_ICON[exec.status]}
+                  class="pipeline-panel__run-status {STATUS_CLASS[exec.status]}"
                 />
                 <span class="pipeline-panel__run-id">{exec.id}</span>
                 {#if isActive}
@@ -106,7 +210,6 @@
         {/if}
       </div>
 
-      <!-- Latest toggle -->
       <button
         type="button"
         class="pipeline-panel__latest-toggle"
@@ -118,7 +221,9 @@
             onSelectExecution?.(latestExecutionId);
           }
         }}
-        title={isPinned ? 'Following latest is off — click to resume' : 'Always showing the most recent run'}
+        title={isPinned
+          ? 'Following latest is off — click to resume'
+          : 'Always showing the most recent run'}
       >
         <Icon icon="mdi:refresh" />
         Latest
@@ -126,23 +231,48 @@
     {:else if pipelineId}
       <span
         class="pipeline-panel__status-badge pipeline-panel__status-badge--live"
-        title="Showing the most recent execution"
-      >Latest</span>
+        title="Showing the most recent execution">Latest</span
+      >
     {/if}
   </div>
 
-  {#if pipelineId}
-    {#key pipelineId}
-      <div class="pipeline-panel__content">
-        <PipelineStatus {pipelineId} {workflow} {endpointConfig} runLabel={pipelineId ?? undefined} {refreshTrigger} isEmbedded={true} />
-      </div>
-    {/key}
-  {:else}
-    <div class="pipeline-panel__empty">
-      <Icon icon="mdi:source-branch" class="pipeline-panel__empty-icon" />
-      <p class="pipeline-panel__empty-text">Run the workflow to see the pipeline.</p>
-    </div>
-  {/if}
+  <div class="pipeline-panel__content">
+    {#if pipelineId}
+      {#key pipelineId}
+        {#if viewMode === 'kanban'}
+          <PipelineKanbanView {pipelineId} {workflow} {endpointConfig} {refreshTrigger} />
+        {:else if viewMode === 'table'}
+          <PipelineTableView {pipelineId} {workflow} {endpointConfig} {refreshTrigger} />
+        {:else if viewMode === 'graph'}
+          <PipelineStatus
+            {pipelineId}
+            {workflow}
+            {endpointConfig}
+            runLabel={pipelineId}
+            {refreshTrigger}
+            isEmbedded={true}
+          />
+        {:else}
+          {@const activeView = extraViews.find((v) => v.key === viewMode)}
+          {#if activeView}
+            {@const View = activeView.component}
+            <View {pipelineId} {workflow} {endpointConfig} {refreshTrigger} />
+          {/if}
+        {/if}
+      {/key}
+    {:else}
+      <App
+        {workflow}
+        height="100%"
+        width="100%"
+        showNavbar={false}
+        disableSidebar={true}
+        lockWorkflow={true}
+        readOnly={true}
+        {endpointConfig}
+      />
+    {/if}
+  </div>
 </div>
 
 <style>
@@ -194,6 +324,45 @@
     color: var(--fd-success);
   }
 
+  /* View mode toggle */
+  .pipeline-panel__view-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 2px;
+    border: 1px solid var(--fd-border);
+    border-radius: var(--fd-radius-md);
+    background-color: var(--fd-muted);
+    flex-shrink: 0;
+  }
+
+  .pipeline-panel__view-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: calc(var(--fd-radius-md) - 2px);
+    background: transparent;
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    transition: all var(--fd-transition-fast);
+    font-size: var(--fd-text-sm);
+    line-height: 1;
+  }
+
+  .pipeline-panel__view-btn:hover {
+    background-color: var(--fd-background);
+    color: var(--fd-foreground);
+  }
+
+  .pipeline-panel__view-btn--active {
+    background-color: var(--fd-background);
+    color: var(--fd-primary);
+    box-shadow: var(--fd-shadow-sm);
+  }
+
   /* Run picker chip */
   .pipeline-panel__run-chip-wrap {
     position: relative;
@@ -300,7 +469,6 @@
 
   :global(.pipeline-panel__run-status--running) {
     color: var(--fd-warning);
-    animation: pp-spin 1s linear infinite;
   }
 
   :global(.pipeline-panel__run-status--completed) {
@@ -311,11 +479,6 @@
     color: var(--fd-error);
   }
 
-  @keyframes pp-spin {
-    from { transform: rotate(0deg); }
-    to   { transform: rotate(360deg); }
-  }
-
   /* Latest toggle */
   .pipeline-panel__latest-toggle {
     display: inline-flex;
@@ -355,28 +518,4 @@
     min-height: 0;
     overflow: hidden;
   }
-
-  .pipeline-panel__empty {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--fd-space-md);
-    color: var(--fd-muted-foreground);
-    padding: var(--fd-space-4xl);
-    text-align: center;
-  }
-
-  :global(.pipeline-panel__empty-icon) {
-    font-size: var(--fd-space-6xl);
-    opacity: 0.4;
-  }
-
-  .pipeline-panel__empty-text {
-    font-size: var(--fd-text-sm);
-    margin: 0;
-    max-width: 200px;
-    line-height: var(--fd-leading-relaxed);
-  }
 </style>

package/dist/components/playground/PipelinePanel.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Workflow } from '../../types/index.js';
+import type { Workflow, PipelineViewDef } from '../../types/index.js';
 import type { EndpointConfig } from '../../config/endpoints.js';
 import type { PlaygroundExecution } from '../../types/playground.js';
 interface Props {
@@ -14,6 +14,8 @@ interface Props {
     onSelectExecution?: (id: string | null) => void;
     /** Increments when new messages arrive — forwarded to PipelineStatus for immediate refresh */
     refreshTrigger?: number;
+    /** Additional views injected by the library consumer */
+    extraViews?: PipelineViewDef[];
 }
 declare const PipelinePanel: import("svelte").Component<Props, {}, "">;
 type PipelinePanel = ReturnType<typeof PipelinePanel>;