@ucdjs/pipelines-ui 0.0.1-beta.1

package/dist/lib/adapter.mjs

@@ -0,0 +1,74 @@
+//#region src/lib/adapter.ts
+function getNodeLabel(node) {
+	switch (node.type) {
+		case "source": return `v${node.version}`;
+		case "file": return node.file.name;
+		case "route": return node.routeId;
+		case "artifact": return node.artifactId;
+		case "output": return node.property ? `Output[${node.outputIndex}].${node.property}` : `Output[${node.outputIndex}]`;
+	}
+}
+function getEdgeStyle(edgeType) {
+	const baseStyle = { strokeWidth: 2 };
+	switch (edgeType) {
+		case "provides": return { style: {
+			...baseStyle,
+			stroke: "#6366f1"
+		} };
+		case "matched": return { style: {
+			...baseStyle,
+			stroke: "#22c55e"
+		} };
+		case "parsed": return { style: {
+			...baseStyle,
+			stroke: "#f59e0b"
+		} };
+		case "resolved": return { style: {
+			...baseStyle,
+			stroke: "#3b82f6"
+		} };
+		case "uses-artifact": return {
+			style: {
+				...baseStyle,
+				stroke: "#8b5cf6"
+			},
+			animated: true
+		};
+		default: return { style: baseStyle };
+	}
+}
+function pipelineGraphToFlow(graph) {
+	return {
+		nodes: graph.nodes.map((node) => ({
+			id: node.id,
+			type: node.type,
+			position: {
+				x: 0,
+				y: 0
+			},
+			data: {
+				pipelineNode: node,
+				label: getNodeLabel(node)
+			}
+		})),
+		edges: graph.edges.map((edge, index) => ({
+			id: `edge-${index}-${edge.from}-${edge.to}`,
+			source: edge.from,
+			target: edge.to,
+			label: edge.type,
+			...getEdgeStyle(edge.type),
+			data: { pipelineEdge: edge }
+		}))
+	};
+}
+function filterNodesByType(nodes, edges, visibleTypes) {
+	const filteredNodes = nodes.filter((node) => visibleTypes.has(node.type));
+	const filteredNodeIds = new Set(filteredNodes.map((n) => n.id));
+	return {
+		nodes: filteredNodes,
+		edges: edges.filter((edge) => filteredNodeIds.has(edge.source) && filteredNodeIds.has(edge.target))
+	};
+}
+
+//#endregion
+export { filterNodesByType, pipelineGraphToFlow };

package/dist/lib/colors.d.mts

@@ -0,0 +1,7 @@
+//#region src/lib/colors.d.ts
+declare const nodeTypeColors: Record<string, string>;
+declare function getNodeColor(node: {
+  type?: string;
+}): string;
+//#endregion
+export { getNodeColor, nodeTypeColors };

package/dist/lib/colors.mjs

@@ -0,0 +1,15 @@
+//#region src/lib/colors.ts
+const nodeTypeColors = {
+	source: "#6366f1",
+	file: "#10b981",
+	route: "#f59e0b",
+	artifact: "#8b5cf6",
+	output: "#0ea5e9",
+	default: "#6b7280"
+};
+function getNodeColor(node) {
+	return nodeTypeColors[node.type ?? ""] ?? nodeTypeColors.default ?? "#6b7280";
+}
+
+//#endregion
+export { getNodeColor, nodeTypeColors };

package/dist/lib/execution-logs.d.mts

@@ -0,0 +1,19 @@
+import { PipelineEvent } from "@ucdjs/pipelines-core";
+
+//#region src/lib/execution-logs.d.ts
+interface ExecutionSpan {
+  spanId: string;
+  label: string;
+  start: number;
+  end: number;
+  durationMs: number;
+  phase: string;
+  isError?: boolean;
+}
+declare function formatDuration(ms: number): string;
+declare function formatTimeLabel(timestamp: string): string;
+declare function formatTimestamp(timestamp: string): string;
+declare function formatBytes(value: number | null): string;
+declare function buildExecutionSpans(events: PipelineEvent[]): ExecutionSpan[];
+//#endregion
+export { ExecutionSpan, buildExecutionSpans, formatBytes, formatDuration, formatTimeLabel, formatTimestamp };

package/dist/lib/execution-logs.mjs

@@ -0,0 +1,74 @@
+//#region src/lib/execution-logs.ts
+function formatDuration(ms) {
+	if (ms >= 1e3) return `${(ms / 1e3).toFixed(2)}s`;
+	if (ms >= 1) return `${ms.toFixed(1)}ms`;
+	return `${(ms * 1e3).toFixed(0)}μs`;
+}
+function formatTimeLabel(timestamp) {
+	return new Date(timestamp).toLocaleTimeString();
+}
+function formatTimestamp(timestamp) {
+	const date = new Date(timestamp);
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}:${String(date.getSeconds()).padStart(2, "0")}.${String(date.getMilliseconds()).padStart(3, "0")} ${Intl.DateTimeFormat().resolvedOptions().timeZone}`;
+}
+function formatBytes(value) {
+	if (!value) return "0B";
+	if (value < 1024) return `${value}B`;
+	if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)}KB`;
+	return `${(value / (1024 * 1024)).toFixed(1)}MB`;
+}
+function buildSpanLabel(event) {
+	if ("version" in event && event.version) return `${event.type} v${event.version}`;
+	if ("routeId" in event && event.routeId) return `${event.type} ${event.routeId}`;
+	if ("artifactId" in event && event.artifactId) return `${event.type} ${event.artifactId}`;
+	if ("file" in event && event.file) return `${event.type} ${event.file.name}`;
+	return event.type;
+}
+function buildSpanPhase(type) {
+	if (type.startsWith("pipeline:")) return "Pipeline";
+	if (type.startsWith("version:")) return "Version";
+	if (type.startsWith("parse:")) return "Parse";
+	if (type.startsWith("resolve:")) return "Resolve";
+	if (type.startsWith("artifact:")) return "Artifact";
+	if (type.startsWith("file:")) return "File";
+	if (type.startsWith("cache:")) return "Cache";
+	return "Other";
+}
+function buildExecutionSpans(events) {
+	const startMap = /* @__PURE__ */ new Map();
+	const spans = [];
+	const sorted = [...events].sort((a, b) => a.timestamp - b.timestamp);
+	for (const event of sorted) {
+		if (event.type.endsWith(":start")) {
+			startMap.set(event.spanId, event);
+			continue;
+		}
+		if (event.type.endsWith(":end")) {
+			const startEvent = startMap.get(event.spanId);
+			if (!startEvent) continue;
+			const durationMs = "durationMs" in event && typeof event.durationMs === "number" ? event.durationMs : Math.max(0, event.timestamp - startEvent.timestamp);
+			spans.push({
+				spanId: event.spanId,
+				label: buildSpanLabel(startEvent),
+				start: startEvent.timestamp,
+				end: event.timestamp,
+				durationMs,
+				phase: buildSpanPhase(startEvent.type)
+			});
+			startMap.delete(event.spanId);
+		}
+		if (event.type === "error") spans.push({
+			spanId: event.spanId,
+			label: buildSpanLabel(event),
+			start: event.timestamp,
+			end: event.timestamp + 1,
+			durationMs: 0,
+			phase: "Error",
+			isError: true
+		});
+	}
+	return spans.sort((a, b) => a.start - b.start);
+}
+
+//#endregion
+export { buildExecutionSpans, formatBytes, formatDuration, formatTimeLabel, formatTimestamp };

package/dist/lib/format-time.d.mts

@@ -0,0 +1,4 @@
+//#region src/lib/format-time.d.ts
+declare function formatHighPrecisionTime(ms: number): string;
+//#endregion
+export { formatHighPrecisionTime };

package/dist/lib/format-time.mjs

@@ -0,0 +1,7 @@
+//#region src/lib/format-time.ts
+function formatHighPrecisionTime(ms) {
+	return `${Math.floor(ms / 1e3)}.${(ms % 1e3).toFixed(3).padStart(6, "0")}s`;
+}
+
+//#endregion
+export { formatHighPrecisionTime };

package/dist/lib/index.d.mts

@@ -0,0 +1,5 @@
+import { PipelineFlowEdge, PipelineFlowNode, filterNodesByType, pipelineGraphToFlow } from "./adapter.mjs";
+import { getNodeColor, nodeTypeColors } from "./colors.mjs";
+import { NODE_HEIGHT, NODE_WIDTH, applyLayout } from "./layout.mjs";
+import { cn } from "./utils.mjs";
+export { NODE_HEIGHT, NODE_WIDTH, type PipelineFlowEdge, type PipelineFlowNode, applyLayout, cn, filterNodesByType, getNodeColor, nodeTypeColors, pipelineGraphToFlow };

package/dist/lib/index.mjs

@@ -0,0 +1,6 @@
+import { cn } from "./utils.mjs";
+import { filterNodesByType, pipelineGraphToFlow } from "./adapter.mjs";
+import { getNodeColor, nodeTypeColors } from "./colors.mjs";
+import { NODE_HEIGHT, NODE_WIDTH, applyLayout } from "./layout.mjs";
+
+export { NODE_HEIGHT, NODE_WIDTH, applyLayout, cn, filterNodesByType, getNodeColor, nodeTypeColors, pipelineGraphToFlow };

package/dist/lib/layout.d.mts

@@ -0,0 +1,8 @@
+import { PipelineFlowEdge, PipelineFlowNode } from "./adapter.mjs";
+
+//#region src/lib/layout.d.ts
+declare const NODE_WIDTH = 180;
+declare const NODE_HEIGHT = 60;
+declare function applyLayout(nodes: PipelineFlowNode[], edges: PipelineFlowEdge[]): PipelineFlowNode[];
+//#endregion
+export { NODE_HEIGHT, NODE_WIDTH, applyLayout };

package/dist/lib/layout.mjs

@@ -0,0 +1,71 @@
+//#region src/lib/layout.ts
+const NODE_WIDTH = 180;
+const NODE_HEIGHT = 60;
+const HORIZONTAL_GAP = 80;
+const VERTICAL_GAP = 40;
+function applyLayout(nodes, edges) {
+	if (nodes.length === 0) return nodes;
+	const incomingEdges = /* @__PURE__ */ new Map();
+	const outgoingEdges = /* @__PURE__ */ new Map();
+	for (const node of nodes) {
+		incomingEdges.set(node.id, /* @__PURE__ */ new Set());
+		outgoingEdges.set(node.id, /* @__PURE__ */ new Set());
+	}
+	const nodeIds = new Set(nodes.map((n) => n.id));
+	for (const edge of edges) if (nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
+		incomingEdges.get(edge.target)?.add(edge.source);
+		outgoingEdges.get(edge.source)?.add(edge.target);
+	}
+	const layers = /* @__PURE__ */ new Map();
+	const rootNodes = nodes.filter((n) => incomingEdges.get(n.id)?.size === 0);
+	const firstNode = nodes[0];
+	const queue = rootNodes.length > 0 ? rootNodes.map((n) => ({
+		id: n.id,
+		layer: 0
+	})) : firstNode ? [{
+		id: firstNode.id,
+		layer: 0
+	}] : [];
+	while (queue.length > 0) {
+		const item = queue.shift();
+		if (!item) continue;
+		const { id, layer } = item;
+		if (!layers.has(id) || layers.get(id) < layer) {
+			layers.set(id, layer);
+			for (const childId of outgoingEdges.get(id) || []) queue.push({
+				id: childId,
+				layer: layer + 1
+			});
+		}
+	}
+	for (const node of nodes) if (!layers.has(node.id)) layers.set(node.id, 0);
+	const layerGroups = /* @__PURE__ */ new Map();
+	for (const node of nodes) {
+		const layer = layers.get(node.id) ?? 0;
+		if (!layerGroups.has(layer)) layerGroups.set(layer, []);
+		layerGroups.get(layer).push(node);
+	}
+	const sortedLayers = Array.from(layerGroups.entries()).sort((a, b) => a[0] - b[0]);
+	const positionedNodes = /* @__PURE__ */ new Map();
+	for (const [layerIndex, layerNodes] of sortedLayers) {
+		const x = layerIndex * (NODE_WIDTH + HORIZONTAL_GAP);
+		const startY = -(layerNodes.length * (NODE_HEIGHT + VERTICAL_GAP) - VERTICAL_GAP) / 2;
+		for (let i = 0; i < layerNodes.length; i++) {
+			const node = layerNodes[i];
+			if (!node) continue;
+			const y = startY + i * (NODE_HEIGHT + VERTICAL_GAP);
+			const positionedNode = {
+				...node,
+				position: {
+					x,
+					y
+				}
+			};
+			positionedNodes.set(node.id, positionedNode);
+		}
+	}
+	return nodes.map((n) => positionedNodes.get(n.id) ?? n);
+}
+
+//#endregion
+export { NODE_HEIGHT, NODE_WIDTH, applyLayout };

package/dist/lib/pipeline-utils.d.mts

@@ -0,0 +1,9 @@
+import { PipelineDetails, PipelineInfo } from "../types.mjs";
+import { PipelineDefinition, PipelineRouteDefinition } from "@ucdjs/pipelines-core";
+
+//#region src/lib/pipeline-utils.d.ts
+declare function toPipelineInfo(pipeline: PipelineDefinition): PipelineInfo;
+declare function toPipelineDetails(pipeline: PipelineDefinition): PipelineDetails;
+declare function toRouteDetails(route: PipelineRouteDefinition): PipelineDetails["routes"][number];
+//#endregion
+export { toPipelineDetails, toPipelineInfo, toRouteDetails };

package/dist/lib/pipeline-utils.mjs

@@ -0,0 +1,49 @@
+import { parseDependency } from "@ucdjs/pipelines-core";
+
+//#region src/lib/pipeline-utils.ts
+function toPipelineInfo(pipeline) {
+	return {
+		id: pipeline.id,
+		name: pipeline.name,
+		description: pipeline.description,
+		tags: pipeline.tags,
+		versions: pipeline.versions,
+		routeCount: pipeline.routes.length,
+		sourceCount: pipeline.inputs.length,
+		sourceId: pipeline.inputs[0]?.id ?? "local"
+	};
+}
+function toPipelineDetails(pipeline) {
+	return {
+		...toPipelineInfo(pipeline),
+		routes: pipeline.routes.map((route) => toRouteDetails(route)),
+		sources: pipeline.inputs.map((source) => ({ id: source.id }))
+	};
+}
+function toRouteDetails(route) {
+	const depends = (route.depends ?? []).map((dep) => parseDependency(dep));
+	const emits = Object.entries(route.emits ?? {}).map(([id, def]) => {
+		return {
+			id,
+			scope: def.scope === "global" ? "global" : "version"
+		};
+	});
+	const outputs = route.out ? [{
+		dir: route.out.dir,
+		fileName: typeof route.out.fileName === "function" ? "[fn]" : route.out.fileName
+	}] : [];
+	const transforms = (route.transforms ?? []).map((transform, index) => {
+		return transform.id ?? `transform-${index + 1}`;
+	});
+	return {
+		id: route.id,
+		cache: route.cache !== false,
+		depends,
+		emits,
+		outputs,
+		transforms
+	};
+}
+
+//#endregion
+export { toPipelineDetails, toPipelineInfo, toRouteDetails };

package/dist/lib/utils.d.mts

@@ -0,0 +1,6 @@
+import { ClassValue } from "clsx";
+
+//#region src/lib/utils.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+export { cn };

package/dist/lib/utils.mjs

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };

package/dist/styles/globals.css

@@ -0,0 +1,3 @@
+@import "@ucdjs-internal/shared-ui/styles.css";
+
+@source "../components/**/*.{ts,js,mjs,jsx,tsx}";

package/dist/types.d.mts

@@ -0,0 +1,143 @@
+import { PipelineEvent, PipelineGraph } from "@ucdjs/pipelines-core";
+import { ExecutionStatus } from "@ucdjs/pipelines-executor";
+
+//#region src/types.d.ts
+interface PipelineInfo {
+  id: string;
+  name: string;
+  description?: string;
+  tags?: string[];
+  versions: string[];
+  routeCount: number;
+  sourceCount: number;
+  sourceId: string;
+}
+interface PipelineFileInfo {
+  fileId: string;
+  filePath: string;
+  fileLabel?: string;
+  sourceId: string;
+  pipelines: PipelineInfo[];
+}
+interface PipelineDetails {
+  id: string;
+  name?: string;
+  description?: string;
+  versions: string[];
+  routeCount: number;
+  sourceCount: number;
+  routes: Array<{
+    id: string;
+    cache: boolean;
+    depends: Array<{
+      type: "route";
+      routeId: string;
+    } | {
+      type: "artifact";
+      routeId: string;
+      artifactName: string;
+    }>;
+    emits: Array<{
+      id: string;
+      scope: "version" | "global";
+    }>;
+    outputs: Array<{
+      dir?: string;
+      fileName?: string;
+    }>;
+    transforms: string[];
+  }>;
+  sources: Array<{
+    id: string;
+  }>;
+}
+interface LoadError {
+  filePath: string;
+  message: string;
+  sourceId?: string;
+}
+interface PipelinesResponse {
+  files: PipelineFileInfo[];
+  errors: LoadError[];
+}
+interface PipelineResponse {
+  pipeline?: PipelineDetails;
+  error?: string;
+  fileId?: string;
+  filePath?: string;
+  fileLabel?: string;
+  sourceId?: string;
+}
+interface ExecuteResult {
+  success: boolean;
+  pipelineId: string;
+  executionId?: string;
+  summary?: {
+    versions: string[];
+    totalFiles: number;
+    matchedFiles: number;
+    skippedFiles: number;
+    fallbackFiles: number;
+    totalOutputs: number;
+    durationMs: number;
+  };
+  graph?: PipelineGraph;
+  events?: PipelineEvent[];
+  errors?: Array<{
+    scope: string;
+    message: string;
+  }>;
+  error?: string;
+}
+type ExecutionLogStream = "stdout" | "stderr";
+interface ExecutionLogPayload {
+  message: string;
+  stream: ExecutionLogStream;
+  args?: unknown[];
+  truncated?: boolean;
+  originalSize?: number;
+  event?: PipelineEvent;
+}
+interface ExecutionLogItem {
+  id: string;
+  spanId: string | null;
+  stream: ExecutionLogStream;
+  message: string;
+  timestamp: string;
+  payload: ExecutionLogPayload | null;
+}
+interface ExecutionLogsResponse {
+  executionId: string;
+  pipelineId: string;
+  status: ExecutionStatus;
+  logs: ExecutionLogItem[];
+  truncated: boolean;
+  capturedSize: number;
+  originalSize: number | null;
+  pagination: {
+    total: number;
+    limit: number;
+    offset: number;
+    hasMore: boolean;
+  };
+}
+interface ExecutionEventItem {
+  id: string;
+  type: string;
+  timestamp: string;
+  data: PipelineEvent;
+}
+interface ExecutionEventsResponse {
+  executionId: string;
+  pipelineId: string;
+  status: ExecutionStatus;
+  events: ExecutionEventItem[];
+  pagination: {
+    total: number;
+    limit: number;
+    offset: number;
+    hasMore: boolean;
+  };
+}
+//#endregion
+export { ExecuteResult, ExecutionEventItem, ExecutionEventsResponse, ExecutionLogItem, ExecutionLogPayload, ExecutionLogStream, ExecutionLogsResponse, LoadError, PipelineDetails, PipelineFileInfo, PipelineInfo, PipelineResponse, PipelinesResponse };

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@ucdjs/pipelines-ui",
+  "version": "0.0.1-beta.1",
+  "type": "module",
+  "author": {
+    "name": "Lucas Nørgård",
+    "email": "lucasnrgaard@gmail.com",
+    "url": "https://luxass.dev"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/ucdjs/ucd",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ucdjs/ucd.git",
+    "directory": "packages/pipelines/pipeline-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/ucdjs/ucd/issues"
+  },
+  "sideEffects": false,
+  "imports": {
+    "#components/*": "./src/components/*.tsx",
+    "#lib/*": "./src/lib/*.ts",
+    "#hooks/*": "./src/hooks/*.ts"
+  },
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./components/pipeline-sidebar": "./dist/components/pipeline-sidebar.mjs",
+    "./components/status-badge": "./dist/components/status-badge.mjs",
+    "./components/status-icon": "./dist/components/status-icon.mjs",
+    "./hooks": "./dist/hooks/index.mjs",
+    "./lib": "./dist/lib/index.mjs",
+    "./lib/adapter": "./dist/lib/adapter.mjs",
+    "./lib/colors": "./dist/lib/colors.mjs",
+    "./lib/execution-logs": "./dist/lib/execution-logs.mjs",
+    "./lib/format-time": "./dist/lib/format-time.mjs",
+    "./lib/layout": "./dist/lib/layout.mjs",
+    "./lib/pipeline-utils": "./dist/lib/pipeline-utils.mjs",
+    "./lib/utils": "./dist/lib/utils.mjs",
+    "./styles.css": "./dist/styles/globals.css",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22.18"
+  },
+  "peerDependencies": {
+    "@tanstack/react-router": "1.159.5",
+    "react": ">=19.2.0",
+    "react-dom": ">=19.2.0"
+  },
+  "dependencies": {
+    "@icons-pack/react-simple-icons": "13.8.0",
+    "@xyflow/react": "12.10.0",
+    "clsx": "2.1.1",
+    "lucide-react": "0.563.0",
+    "tailwind-merge": "3.4.0",
+    "@ucdjs-internal/shared-ui": "0.1.0",
+    "@ucdjs/pipelines-core": "0.0.1-beta.1",
+    "@ucdjs/pipelines-executor": "0.0.1-beta.1"
+  },
+  "devDependencies": {
+    "@eslint-react/eslint-plugin": "2.12.4",
+    "@luxass/eslint-config": "7.2.0",
+    "@rollup/plugin-babel": "6.1.0",
+    "@tanstack/react-router": "1.159.5",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "10.0.0",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.5.0",
+    "publint": "0.3.17",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwindcss": "4.1.18",
+    "tsdown": "0.20.3",
+    "typescript": "5.9.3",
+    "@ucdjs-tooling/tsdown-config": "1.0.0",
+    "@ucdjs-tooling/tsconfig": "1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown --tsconfig=./tsconfig.build.json",
+    "dev": "tsdown --watch",
+    "clean": "git clean -xdf dist node_modules",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit -p tsconfig.build.json"
+  }
+}