Remove @radix-ui/react-hover-card and refactor execution status handling

[Mbeaulne]

Description

Enhanced status visualization with detailed tooltips for pipeline runs. The status bar now shows more granular execution states and provides tooltips with detailed breakdowns of task statuses. This improves visibility into pipeline execution states by displaying the actual execution statuses rather than simplified aggregates.

We’ll display the raw status coming from the server, but map it to a “pretty” label in the UI so we can localize later, if we need to:

const EXECUTION_STATUS_LABELS: Record<string, string> = {
  CANCELLED: "Cancelled",
  CANCELLING: "Cancelling",
  FAILED: "Failed",
  INVALID: "Invalid",
  PENDING: "Pending",
  QUEUED: "Queued",
  RUNNING: "Running",
  SKIPPED: "Skipped",
  SUCCEEDED: "Succeeded",
  SYSTEM_ERROR: "System error",
  UNINITIALIZED: "Uninitialized",
  WAITING: "Waiting",
  WAITING_FOR_UPSTREAM: "Waiting for upstream",
} as const satisfies Record<ContainerExecutionStatus | "WAITING", string>;

Previously we grouped several “pending-like” states together (e.g., PENDING, QUEUED, WAITING, WAITING_FOR_UPSTREAM) and displayed them all as Pending.

Now, each execution state displays its own label and its own status color. Some statuses still share the same color to indicate they’re part of the same general category/type (e.g., multiple “in progress / not started yet” states use yellow).

export const EXECUTION_STATUS_BG_COLORS: Record<string, string> = {
  SUCCEEDED: "bg-green-500",
  FAILED: "bg-red-500",
  SYSTEM_ERROR: "bg-red-700",
  INVALID: "bg-red-600",
  RUNNING: "bg-blue-500",
  PENDING: "bg-yellow-500",
  QUEUED: "bg-yellow-500",
  WAITING_FOR_UPSTREAM: "bg-slate-500",
  SKIPPED: "bg-slate-400",
  CANCELLED: "bg-gray-700",
  CANCELLING: "bg-gray-500",
  UNINITIALIZED: "bg-yellow-400",
  WAITING: "bg-yellow-500",
};

Type of Change

• Improvement
• Cleanup/Refactor

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Here is a real example of my local env

Here is some test data (ignore the state on the left, I was just feeding fake data into the bar for the screenshots below, so it would contain all states)

states.mov (uploaded via Graphite)

Test Instructions

1. Run a pipeline with various task statuses
2. Hover over status bars in the run list and run details page
3. Verify tooltips show detailed breakdowns of execution statuses
4. Check that status indicators correctly reflect the current state of tasks

Additional Comments

This change introduces a new utility module for execution status handling and standardizes how we display and aggregate execution statuses throughout the UI.

[Mbeaulne]

• unify status - group count #1580
• Remove @radix-ui/react-hover-card and refactor execution status handling #1579 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[maxy-shpfy]

wondering if we can split PRs?