feat(pipeline-ui): add execution logs and formatting utilities by luxass · Pull Request #491 · ucdjs/ucd

luxass · 2026-02-11T20:28:55Z

🔗 Linked issue

📚 Description

changeset-bot · 2026-02-11T20:29:00Z

⚠️ No Changeset found

Latest commit: d04127b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-02-11T20:29:06Z

Warning

Rate limit exceeded

@luxass has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 22 minutes and 25 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch luxass/pipeline-ui

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

- Introduced `execution-logs.ts` for handling execution spans and formatting timestamps, durations, and bytes. - Added `format-time.ts` for high precision time formatting. - Created `pipeline-utils.ts` for converting pipeline definitions to structured info and details. - Implemented layout logic in `layout.ts` for positioning nodes in the pipeline graph. - Updated `index.ts` to export new utilities and types. - Added global styles in `globals.css` and defined types in `types.ts`. - Configured TypeScript and build settings with `tsconfig.json` and `tsdown.config.ts`. - Updated dependencies in `pnpm-lock.yaml` and `pnpm-workspace.yaml` for new packages.

github-actions · 2026-02-11T20:31:14Z

🌏 Preview Deployments

Application	Status	Preview URL
API	⏳ In Progress	N/A
Website	⏳ In Progress	N/A
Documentation	⏳ In Progress	N/A

Built from commit: d04127becbb003600bd14260d6ac7ed98682f578

_{🤖 This comment will be updated automatically when you push new commits to this PR.}

Copilot

Pull request overview

This pull request introduces a new package @ucdjs/pipelines-ui that provides React UI components and utilities for visualizing and managing UCD pipelines. The package includes execution logs viewing, pipeline graph visualization using React Flow, status indicators, and various React hooks for data fetching and state management.

Changes:

Added new @ucdjs/pipelines-ui package with comprehensive React components for pipeline visualization
Integrated dependencies including @xyflow/react for graph visualization and @icons-pack/react-simple-icons for icons
Implemented execution logging components with waterfall charts, log tables, and span details
Created React hooks for pipeline data fetching, execution management, and version selection

Reviewed changes

Copilot reviewed 43 out of 44 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Added catalog entries for new dependencies (@icons-pack/react-simple-icons, @xyflow/react)
pnpm-lock.yaml	Updated lockfile with new package dependencies and their transitive dependencies
packages/pipelines/pipeline-ui/package.json	New package configuration with exports, dependencies, and build scripts
packages/pipelines/pipeline-ui/turbo.json	Turborepo configuration for build caching
packages/pipelines/pipeline-ui/tsconfig.json	TypeScript configuration extending base config
packages/pipelines/pipeline-ui/tsdown.config.ts	Build configuration using tsdown with React compiler plugin
packages/pipelines/pipeline-ui/src/types.ts	TypeScript type definitions for pipeline data structures and API responses
packages/pipelines/pipeline-ui/src/lib/*.ts	Utility functions for formatting, graph layout, colors, and pipeline transformations
packages/pipelines/pipeline-ui/src/hooks/*.ts	React hooks for data fetching, execution, and UI state management
packages/pipelines/pipeline-ui/src/components/*/.tsx	React components for pipeline visualization, logs, graphs, and UI elements
packages/pipelines/pipeline-ui/README.md	Package documentation with installation instructions
packages/pipelines/pipeline-ui/eslint.config.js	ESLint configuration for the package

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-11T20:32:59Z

+    "email": "lucasnrgaard@gmail.com",
+    "url": "https://luxass.dev"
+  },
+  "packageManager": "pnpm@10.27.0",


The packageManager field is set to pnpm@10.27.0, but the repository root and most other packages use pnpm@10.29.1. This inconsistency can lead to lock file conflicts and confusion. Consider updating to match the repository standard.

Copilot · 2026-02-11T20:32:59Z

+import type { ClassValue } from "clsx";
+
+import { clsx } from "clsx";
+
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}


A local cn utility function is defined here, but the codebase convention is to import cn from @ucdjs-internal/shared-ui instead of maintaining local copies. This duplication should be avoided to ensure consistency across the codebase. Remove this file and import cn from @ucdjs-internal/shared-ui where needed.

Copilot · 2026-02-11T20:33:00Z

+export type { PipelineFlowEdge, PipelineFlowNode } from "./adapter";
+export { getNodeColor, nodeTypeColors } from "./colors";
+export { applyLayout, NODE_HEIGHT, NODE_WIDTH } from "./layout";
+export { cn } from "./utils";


The export of cn from ./utils should be removed since this function should be imported from @ucdjs-internal/shared-ui instead, following the codebase convention established in apps/web.

Copilot · 2026-02-11T20:33:00Z

+  toPipelineInfo,
+  toRouteDetails,
+} from "./lib/pipeline-utils";
+export { cn } from "./lib/utils";


The export of cn from the main index should be removed. Following codebase conventions, consumers should import cn directly from @ucdjs-internal/shared-ui rather than from this package.

Copilot · 2026-02-11T20:33:00Z

+    "typecheck": "tsc --noEmit -p tsconfig.build.json"
+  },
+  "peerDependencies": {
+    "@tanstack/react-router": "catalog:web",


The peerDependency @tanstack/react-router is declared with catalog:web, but this is likely incorrect. Based on the devDependencies, it should probably be catalog:frontend to match the catalog used elsewhere. The catalog:web reference doesn't appear to be a standard catalog in the workspace configuration.

Suggested change

"@tanstack/react-router": "catalog:web",

"@tanstack/react-router": "catalog:frontend",

Copilot · 2026-02-11T20:33:00Z

+export function formatHighPrecisionTime(ms: number): string {
+  const seconds = Math.floor(ms / 1000);
+  const fractionalMs = ms % 1000;
+  return `${seconds}.${fractionalMs.toFixed(3).padStart(6, "0")}s`;


The formatting logic is incorrect. fractionalMs is already a number (the remainder), so calling .toFixed(3) on it creates a string with 3 decimal places, then .padStart(6, "0") pads it to 6 characters. This produces incorrect output. For example, if ms = 1234.567, then fractionalMs = 234.567, toFixed(3) gives "234.567" (7 chars), which won't be padded. The correct approach is to format milliseconds as a zero-padded integer, e.g., fractionalMs.toString().padStart(3, "0").

Copilot · 2026-02-11T20:33:01Z

+    "./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",


The export path ./lib/utils should be removed from the package exports since the cn utility is being duplicated and should instead be imported from @ucdjs-internal/shared-ui by consumers.

Copilot · 2026-02-11T20:33:01Z

+> [!IMPORTANT]
+> This is an internal package. It may change without warning and is not subject to semantic versioning. Use at your own risk.
+
+A collection of core pipeline functionalities for the UCD project.


The description "A collection of core pipeline functionalities for the UCD project" is incorrect and appears to be copied from another package. This package provides UI components for pipelines, not core pipeline functionalities. The description should accurately reflect the package's purpose, e.g., "React UI components and utilities for visualizing and managing UCD pipelines."

Suggested change

A collection of core pipeline functionalities for the UCD project.

React UI components and utilities for visualizing and managing UCD pipelines.

Copilot · 2026-02-11T20:33:01Z

+const phaseLabels: Record<PhaseOption, string> = {
+  Pipeline: "Pipeline",
+  Version: "Version",
+  Parse: "Parse",
+  Resolve: "Resolve",
+  Artifact: "Artifact",
+  File: "File",
+  Cache: "Cache",
+  Error: "Error",
+};


The phaseLabels record is redundant since each key exactly maps to its own value (e.g., Pipeline: "Pipeline"). This record serves no purpose and should be removed. If the labels are simply the same as the phase names, use the phase value directly instead of looking it up in this mapping.

Suggested change

const phaseLabels: Record<PhaseOption, string> = {

Pipeline: "Pipeline",

Version: "Version",

Parse: "Parse",

Resolve: "Resolve",

Artifact: "Artifact",

File: "File",

Cache: "Cache",

Error: "Error",

};

const phaseLabels: Record<PhaseOption, string> = Object.fromEntries(

phaseOptions.map((phase) => [phase, phase as string]),

) as Record<PhaseOption, string>;

Copilot AI review requested due to automatic review settings February 11, 2026 20:28

Copilot started reviewing on behalf of luxass February 11, 2026 20:29 View session

luxass added 2 commits February 11, 2026 21:30

fix(pipeline-ui): update ThemeToggle import path

d04127b

luxass force-pushed the luxass/pipeline-ui branch from 1a355da to d04127b Compare February 11, 2026 20:30

luxass temporarily deployed to apps-approval February 11, 2026 20:31 — with GitHub Actions Inactive

luxass merged commit a0b6382 into main Feb 11, 2026
21 of 26 checks passed

luxass deleted the luxass/pipeline-ui branch February 11, 2026 20:32

luxass had a problem deploying to apps-deploy February 11, 2026 20:32 — with GitHub Actions Failure

Copilot AI reviewed Feb 11, 2026

View reviewed changes

	"@tanstack/react-router": "catalog:web",
	"@tanstack/react-router": "catalog:frontend",

	A collection of core pipeline functionalities for the UCD project.
	React UI components and utilities for visualizing and managing UCD pipelines.

Uh oh!

Conversation

luxass commented Feb 11, 2026

🔗 Linked issue

📚 Description

Uh oh!

changeset-bot Bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai Bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Rate limit exceeded

Uh oh!

github-actions Bot commented Feb 11, 2026

🌏 Preview Deployments

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

changeset-bot Bot commented Feb 11, 2026 •

edited

Loading

coderabbitai Bot commented Feb 11, 2026 •

edited

Loading