@flowdrop/flowdrop 1.0.0

package/dist/components/PipelineStatus.svelte

@@ -0,0 +1,314 @@
+<!--
+  Pipeline Status Component
+  Displays workflow execution status using the App component in read-only mode
+  Styled with BEM syntax
+-->
+
+<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';
+
+	interface Props {
+		pipelineId: string;
+		workflow: Workflow;
+		apiClient?: EnhancedFlowDropApiClient;
+		baseUrl?: string;
+		endpointConfig?: EndpointConfig;
+		onActionsReady?: (
+			actions: Array<{
+				label: string;
+				href: string;
+				icon?: string;
+				variant?: 'primary' | 'secondary' | 'outline';
+				onclick?: (event: Event) => void;
+			}>
+		) => void;
+	}
+
+	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')
+		);
+
+	// Pipeline status and job data
+	let pipelineStatus = $state<string>('unknown');
+	interface PipelineNodeStatus {
+		status: string;
+		[key: string]: unknown;
+	}
+
+	let jobStatusData = $state<{
+		jobs: Record<string, unknown>[];
+		node_statuses: Record<string, PipelineNodeStatus>;
+		status_summary: {
+			total: number;
+			pending: number;
+			running: number;
+			completed: number;
+			failed: number;
+			cancelled: number;
+		};
+	}>({
+		jobs: [],
+		node_statuses: {},
+		status_summary: {
+			total: 0,
+			pending: 0,
+			running: 0,
+			completed: 0,
+			failed: 0,
+			cancelled: 0
+		}
+	});
+
+	// Node statuses for visual indicators
+	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 }>>([]);
+
+	/**
+	 * Fetch pipeline data including job information
+	 */
+	async function fetchPipelineData(): Promise<void> {
+		if (!pipelineId) return;
+
+		try {
+			isLoadingJobStatus = true;
+			const pipelineData = await client.getPipelineData(pipelineId);
+
+			pipelineStatus = pipelineData.status;
+			jobStatusData = {
+				jobs: pipelineData.jobs || [],
+				node_statuses: pipelineData.node_statuses || {},
+				status_summary: pipelineData.job_status_summary || {
+					total: 0,
+					pending: 0,
+					running: 0,
+					completed: 0,
+					failed: 0,
+					cancelled: 0
+				}
+			};
+
+			// Update node statuses based on job data
+			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');
+					}
+				}
+				nodeStatuses = newNodeStatuses;
+			}
+
+			addLog('info', `Job status updated: ${jobStatusData.status_summary.total} total jobs`);
+		} catch (error) {
+			logger.error('Failed to fetch pipeline data:', error);
+			addLog(
+				'error',
+				`Failed to fetch pipeline data: ${error instanceof Error ? error.message : 'Unknown error'}`
+			);
+		} finally {
+			isLoadingJobStatus = false;
+		}
+	}
+
+	/**
+	 * Add a log entry
+	 */
+	function addLog(level: string, message: string): void {
+		logs = [
+			...logs,
+			{
+				level,
+				message,
+				timestamp: new Date().toISOString()
+			}
+		];
+	}
+
+	/**
+	 * Toggle logs sidebar
+	 */
+	function toggleLogsSidebar(): void {
+		isLogsSidebarOpen = !isLogsSidebarOpen;
+	}
+
+	/**
+	 * Get pipeline actions for the parent navbar
+	 */
+	function getPipelineActions() {
+		return [
+			{
+				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,
+				onclick: (e: Event) => {
+					e.preventDefault();
+					toggleLogsSidebar();
+				}
+			}
+		];
+	}
+
+	// Fetch pipeline data on mount
+	onMount(() => {
+		fetchPipelineData();
+		// Expose actions to parent
+		if (onActionsReady) {
+			onActionsReady(getPipelineActions());
+		}
+
+		// Listen for custom events from the layout navbar
+		const handleRefresh = () => fetchPipelineData();
+		const handleViewLogs = () => toggleLogsSidebar();
+
+		window.addEventListener('pipeline-refresh', handleRefresh);
+		window.addEventListener('pipeline-view-logs', handleViewLogs);
+
+		return () => {
+			window.removeEventListener('pipeline-refresh', handleRefresh);
+			window.removeEventListener('pipeline-view-logs', handleViewLogs);
+		};
+	});
+
+	// Send pipeline breadcrumbs to layout when they change
+	$effect(() => {
+		if (pipelineStatus && pipelineId && workflow) {
+			const breadcrumbs = [
+				{
+					label: 'Home',
+					href: '/',
+					icon: 'mdi:home'
+				},
+				{
+					label: 'Workflows',
+					href: '/',
+					icon: 'mdi:view-list'
+				},
+				{
+					label: workflow.name || 'Workflow',
+					href: `/workflow/${workflow.id}/edit`,
+					icon: 'mdi:workflow'
+				},
+				{
+					label: 'Pipelines',
+					href: `/workflow/${workflow.id}/pipelines`,
+					icon: 'mdi:source-branch'
+				},
+				{
+					label: `Pipeline ${pipelineId} - ${pipelineStatus}`,
+					icon: 'mdi:play-circle'
+				}
+			];
+
+			window.dispatchEvent(
+				new CustomEvent('page-breadcrumbs-update', {
+					detail: { breadcrumbs }
+				})
+			);
+		}
+	});
+
+	// Update actions when loading state changes
+	$effect(() => {
+		if (onActionsReady) {
+			onActionsReady(getPipelineActions());
+		}
+	});
+
+	// Auto-refresh pipeline data every 5 seconds when pipeline is running
+	let refreshInterval: NodeJS.Timeout | null = null;
+
+	$effect(() => {
+		// Clear existing interval
+		if (refreshInterval) {
+			clearInterval(refreshInterval);
+			refreshInterval = null;
+		}
+
+		// Only start polling if pipeline is running
+		if (pipelineStatus === 'running' && pipelineId) {
+			refreshInterval = setInterval(() => {
+				fetchPipelineData();
+			}, 5000);
+		}
+	});
+
+	// Note: Interval cleanup is handled by the $effect above.
+	// In Svelte 5, $effect cleanup runs both on re-execution and component destroy.
+</script>
+
+<div class="pipeline-status-container">
+	<!-- Workflow Visualization using App component -->
+	<App
+		{workflow}
+		height="100vh"
+		width="100%"
+		showNavbar={false}
+		disableSidebar={true}
+		lockWorkflow={true}
+		readOnly={true}
+		{nodeStatuses}
+		{pipelineId}
+		{endpointConfig}
+	/>
+
+	<!-- Logs Sidebar -->
+	{#if isLogsSidebarOpen}
+		<LogsSidebar {logs} isOpen={isLogsSidebarOpen} onClose={() => (isLogsSidebarOpen = false)} />
+	{/if}
+</div>
+
+<style>
+	.pipeline-status-container {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background: var(--fd-layout-background, var(--fd-muted));
+	}
+
+	/* Dark mode override */
+	: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

@@ -0,0 +1,20 @@
+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;
+    apiClient?: EnhancedFlowDropApiClient;
+    baseUrl?: string;
+    endpointConfig?: EndpointConfig;
+    onActionsReady?: (actions: Array<{
+        label: string;
+        href: string;
+        icon?: string;
+        variant?: 'primary' | 'secondary' | 'outline';
+        onclick?: (event: Event) => void;
+    }>) => void;
+}
+declare const PipelineStatus: import("svelte").Component<Props, {}, "">;
+type PipelineStatus = ReturnType<typeof PipelineStatus>;
+export default PipelineStatus;

package/dist/components/PortCoordinateTracker.svelte

@@ -0,0 +1,58 @@
+<!--
+  Port Coordinate Tracker Component
+  Bridge component that exposes SvelteFlow's getInternalNode to the parent.
+  Must be rendered inside SvelteFlowProvider context.
+
+  Uses the same pattern as EdgeRefresher - a renderless component that hooks
+  into the SvelteFlow context.
+-->
+
+<script lang="ts">
+	import { useSvelteFlow, type InternalNode } from '@xyflow/svelte';
+	import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
+	import {
+		rebuildAllPortCoordinates,
+		updateNodePortCoordinates
+	} from '../stores/portCoordinateStore.svelte.js';
+
+	interface Props {
+		/** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
+		nodeToUpdate: WorkflowNodeType | null;
+		/** Set to trigger a full rebuild of all port coordinates */
+		rebuildTrigger: number;
+		/** All workflow nodes - used for full rebuild */
+		nodes: WorkflowNodeType[];
+	}
+
+	let { nodeToUpdate, rebuildTrigger, nodes }: Props = $props();
+
+	const { getInternalNode } = useSvelteFlow();
+
+	// Cast the getInternalNode function for our use
+	const getInternal = getInternalNode as (id: string) => InternalNode | undefined;
+
+	/**
+	 * Rebuild all port coordinates when rebuildTrigger changes.
+	 * Debounced to batch rapid position updates (e.g., animated auto-layout,
+	 * magnetic child nodes following a parent drag).
+	 */
+	$effect(() => {
+		const _trigger = rebuildTrigger;
+		if (_trigger > 0) {
+			const timeout = setTimeout(() => {
+				rebuildAllPortCoordinates(nodes, getInternal);
+			}, 150);
+			return () => clearTimeout(timeout);
+		}
+	});
+
+	/**
+	 * Update a single node's coordinates when nodeToUpdate changes.
+	 * This is used during drag for efficient per-node updates.
+	 */
+	$effect(() => {
+		if (nodeToUpdate) {
+			updateNodePortCoordinates(nodeToUpdate, getInternal);
+		}
+	});
+</script>

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

@@ -0,0 +1,12 @@
+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;
+    /** Set to trigger a full rebuild of all port coordinates */
+    rebuildTrigger: number;
+    /** All workflow nodes - used for full rebuild */
+    nodes: WorkflowNodeType[];
+}
+declare const PortCoordinateTracker: import("svelte").Component<Props, {}, "">;
+type PortCoordinateTracker = ReturnType<typeof PortCoordinateTracker>;
+export default PortCoordinateTracker;

package/dist/components/ReadOnlyDetails.svelte

@@ -0,0 +1,170 @@
+<!--
+  ReadOnlyDetails Component
+  Displays readonly information with an ID (with copy button), title, description, and label-value pairs
+  Compact inline layout with BEM syntax
+-->
+
+<script lang="ts">
+	/**
+	 * A single detail item with label and value
+	 */
+	interface DetailItem {
+		/** The label to display */
+		label: string;
+		/** The value to display */
+		value: string;
+	}
+
+	/**
+	 * Props interface for ReadOnlyDetails component
+	 */
+	interface Props {
+		/** The unique identifier to display with a copy button */
+		id: string;
+		/** Optional section title */
+		title?: string;
+		/** Optional description text */
+		description?: string;
+		/** Array of label-value pairs to display */
+		details: DetailItem[];
+	}
+
+	const { id, title, description, details }: Props = $props();
+
+	/**
+	 * Copy the ID to clipboard
+	 */
+	function copyId(): void {
+		navigator.clipboard.writeText(id);
+	}
+</script>
+
+<div class="readonly-details">
+	{#if title}
+		<h3 class="readonly-details__title">{title}</h3>
+	{/if}
+
+	<div class="readonly-details__grid">
+		<!-- ID row -->
+		<span class="readonly-details__label">ID</span>
+		<div class="readonly-details__id-row">
+			<code class="readonly-details__id">{id}</code>
+			<button
+				class="readonly-details__copy-btn"
+				onclick={copyId}
+				title="Copy ID"
+				aria-label="Copy ID to clipboard"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					width="12"
+					height="12"
+					viewBox="0 0 24 24"
+					stroke-width="2"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<!-- Dynamic label-value pairs -->
+		{#each details as detail (detail.label)}
+			<span class="readonly-details__label">{detail.label}</span>
+			<span class="readonly-details__value">{detail.value}</span>
+		{/each}
+	</div>
+
+	<!-- Description (if provided) -->
+	{#if description}
+		<p class="readonly-details__description">{description}</p>
+	{/if}
+</div>
+
+<style>
+	.readonly-details {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.readonly-details__title {
+		margin: 0;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--fd-muted-foreground);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.readonly-details__grid {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 0.25rem 0.75rem;
+		align-items: center;
+	}
+
+	.readonly-details__label {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--fd-muted-foreground);
+	}
+
+	.readonly-details__value {
+		font-size: 0.8125rem;
+		color: var(--fd-foreground);
+		font-weight: 500;
+	}
+
+	.readonly-details__id-row {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.readonly-details__id {
+		font-size: 0.75rem;
+		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;
+		border-radius: var(--fd-radius-sm);
+		word-break: break-all;
+	}
+
+	.readonly-details__copy-btn {
+		background: transparent;
+		border: none;
+		padding: 0.25rem;
+		cursor: pointer;
+		color: var(--fd-muted-foreground);
+		border-radius: var(--fd-radius-sm);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition:
+			color var(--fd-transition-fast),
+			background-color var(--fd-transition-fast);
+	}
+
+	.readonly-details__copy-btn:hover {
+		color: var(--fd-foreground);
+		background-color: var(--fd-subtle);
+	}
+
+	.readonly-details__copy-btn:active {
+		color: var(--fd-foreground);
+	}
+
+	.readonly-details__description {
+		margin: 0;
+		font-size: 0.8125rem;
+		color: var(--fd-muted-foreground);
+		line-height: 1.5;
+	}
+</style>

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

@@ -0,0 +1,25 @@
+/**
+ * A single detail item with label and value
+ */
+interface DetailItem {
+    /** The label to display */
+    label: string;
+    /** The value to display */
+    value: string;
+}
+/**
+ * Props interface for ReadOnlyDetails component
+ */
+interface Props {
+    /** The unique identifier to display with a copy button */
+    id: string;
+    /** Optional section title */
+    title?: string;
+    /** Optional description text */
+    description?: string;
+    /** Array of label-value pairs to display */
+    details: DetailItem[];
+}
+declare const ReadOnlyDetails: import("svelte").Component<Props, {}, "">;
+type ReadOnlyDetails = ReturnType<typeof ReadOnlyDetails>;
+export default ReadOnlyDetails;