poc: prototype of the compare pipeline runs

[maxy-shpfy]

Description

Added a new run comparison feature that allows users to compare up to 3 pipeline runs side-by-side. The comparison shows differences in pipeline arguments and tasks, highlighting what was added, removed, or modified between runs.

The feature includes:

• A dedicated comparison page at /compare
• Run selection interface with pipeline filtering
• Visual diff of pipeline arguments with change highlighting
• Task comparison with nested subgraph support
• URL-based state for easy sharing of comparisons

Type of Change

• New feature
• Improvement

Checklist

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

Run Comparison Feature

Overview

Adds a new page for comparing 2-3 pipeline runs side-by-side, highlighting differences in arguments and task configurations.

Features

• Run Selection: Select a pipeline and choose up to 3 runs to compare
• URL State Persistence: Comparison state is stored in URL (/compare?runs=123,456&pipeline=MyPipeline) for shareability and refresh persistence
• Chronological Ordering: Runs are automatically sorted by creation time for consistent diff semantics
• Arguments Diff: Tabular view of pipeline argument changes with change indicators (+/-/~)
• Visual Task Diff:
  • Compact node cards showing all tasks in YAML order
  • Color-coded change indicators (green=added, red=removed, yellow=modified)
  • Auto-expand changed tasks
  • Recursive subgraph visualization with indentation
  • Hover highlighting on task cards
• Run Links: Run labels link directly to run detail pages

New Files

• src/routes/Compare/ - New route for comparison page
• src/components/Compare/ - ComparePage, RunSelector, and Diff components
• src/hooks/useRunComparisonData.ts - Fetches detailed run data for comparison
• src/hooks/useRunsById.ts - Fetches runs by ID from backend/local storage
• src/utils/diff/ - Core diff logic for comparing run data

Navigation

• Added "Compare Runs" button on the Home page

Test Instructions

Tangle - Run Diff.mov (uploaded via Graphite)

1. Navigate to the home page and click "Compare Runs" in the top right
2. Select a pipeline from the dropdown
3. Choose 2-3 runs to compare
4. Click "Compare" to see the differences
5. Verify that arguments and tasks show proper highlighting for changes
6. Test that the URL can be shared and loads the same comparison

Additional Comments

The comparison works with both backend-connected and local-only modes, though backend mode provides more detailed information for comparison.

[maxy-shpfy]

• poc: prototype of the compare pipeline runs #1632 👈 (View in Graphite)
• master

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