feat(web): rebuild the session flow view on React Flow with category icons - #621
Merged
Merged
Conversation
…icons The flow tab drew its own scaled div canvas with per-lane SVG connectors; it now hands the same hand-computed lane layout to @xyflow/react — the split investigations/flow already uses — so pan, zoom and edge drawing come from the shared canvas instead of a bespoke scroller. Nodes declare their dimensions and handle spots up front, so edges draw on the first frame (and under jsdom, which never runs a ResizeObserver pass). The category dots become glyphs from the shared icon set — robot for agent, sparkle for inference, gear for tool, a red cross for a failure — in the node cards and the legend both, so the kind of work reads by shape rather than by hue alone.
JeremyFunk
had a problem deploying
to
pr-preview
August 24, 2026 23:28 — with 
GitHub Actions
Failure
🍁 Maple PR previewWarning Preview cleanup could not be confirmed. The Alchemy teardown outcome was Final commit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Rebuilds the agent session detail's Flow tab on
@xyflow/react, following the patterninvestigations/flow/provenance-canvas.tsxestablished: the lane/column layout stays hand-computed, and xyflow provides the canvas — pan, zoom, and edge rendering — instead of the previous scaled-div scroller with per-lane SVG connectors.The colored category dots on the node cards and in the legend are replaced with icons from the shared icon set:
The glyphs keep the same
chart-*tokens asCATEGORY_FILL, so the color vocabulary stays aligned with the waterfall and the header breakdown — but the kind of work now also reads by shape alone.Notes
width/heightandhandlesup front (every card is the same box), so xyflow draws edges on the first frame without waiting for measurement — which also makes them render under jsdom, keeping the edge-count tests meaningful.panOnScroll): the canvas fills the viewport, and a wheel that zooms traps the reader. Zoom stays on the buttons and pinch, still clamped to 0.5–1.5 and persisted across a Trace ↔ Flow switch through the existingzoomprop.fitView: fit clamps against the 0.5 floor on any real session and lands somewhere unpredictable, andfitViewqueues behind the flow's own render when invoked from outside it.setCenter, and only when the focused node is out of view.Testing
session-detail.test.tsxupdated to read node positions from the xyflow wrappers and count.react-flow__edgeelements; 51/51 pass.tsc --noEmitclean forapps/web./lab/agent-sessionfixture harness: nodes, edges, lane labels, node click → docked drawer, zoom in/out/reset, wheel pan, merge-repeats toggle, and the empty-filter state.🤖 Generated with Claude Code
Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.