feat: run comparison - graph diff view

[camielvs]

Description

Seventh PR in the Compare Runs stack. Adds the Graph view — a visual, side-by-side-in-one-canvas take on the comparison.

It renders the merged graph (from #2597) with colour-coded nodes and edges: green for added, red for removed, amber for changed, grey for unchanged, plus a legend. Nodes show each task's status, digest and a short change summary; clicking one opens a detail popover reusing the same task/IO diff detail from the Structured view. A Highlight A / B / Both control dims everything not present in the chosen run and switches nodes to show that run's actual values.

Also refactors the run view's status indicator to extract a reusable StatusTab so the merged task nodes can show per-run (A/B) status tabs.

Related Issue and Pull requests

Part of the Compare Runs stack. Builds on #2601; the final PR (#2603) builds on this branch.

Type of Change

• New feature
• Cleanup/Refactor

Checklist

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

Screenshots (if applicable)

Test Instructions

Reachable once the stack is wired up (#2603).

• Check out the top of the stack, enable the Compare runs beta flag, and compare two runs.
• On the Graph tab, confirm:
  • The merged graph lays out and node/edge colours match the legend (added / removed / changed / unchanged).
  • Clicking a node opens its detail popover; clicking the background closes it.
  • Highlight A / B / Both dims the other run and shows the highlighted run's values.
• Regression check the refactor: open a normal run's graph and confirm task status indicators (including the cache-disabled state) still render as before.

Additional Comments

[github-actions]

🎩 Preview

A preview build has been created at: cmp-07-graph-diff-view/05c821c

[camielvs]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat: run comparison - compare page, run selection & routing #2603 : 2 dependent PRs (#2604 , #2641 )
• feat: run comparison - run picker & switcher #2634
• feat: run comparison - graph diff view #2602 👈 (View in Graphite)
• feat: run comparison - structured diff view #2601
• feat: run comparison - run metadata comparison #2600
• feat: run comparison - artifact comparison #2599
• feat: run comparison - shared diff UI primitives #2598
• feat: run comparison - merged graph & change summary logic #2597
• feat: run comparison - pipeline diff engine #2596
• master

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

[camielvs]

🤖 This is an AI-generated code review comment.

The extraction changes how the existing indicator renders (Medium)

StatusTab is a clean extraction, but it adds overflow-hidden here plus whitespace-nowrap and truncate on the inner row — none of which the original markup had — and StatusIndicator below now renders through it. So editor and run-graph task nodes start truncating status text instead of wrapping it, which is outside this PR's stated scope.

If the truncation is only needed for the two side-by-side tabs in the compare graph, pass it in via className from MergedTaskNode and leave the shared path rendering as it did.

[camielvs]

🤖 AI-generated reply.

Checked this one and I do not think it changes the existing indicator — leaving the extraction as is.

• On the StatusIndicator path the new classes are inert: the wrapper is absolute … flex items-start with no width cap, so the tab is shrink-to-fit and there is nothing for min-w-0 / truncate / overflow-hidden to act on.
• They are load-bearing in MergedTaskNode, which passes min-w-0 flex-1 into a w-64 node — that is what the extraction was for.

One real change I will own: the shared tab adds a native title tooltip, so the editor and run graph now get a hover tooltip on the status label where they previously had none. Happy to gate that behind a prop if it is unwanted.