fix(frontend): theme xyflow controls so workflow visualizer icons are visible

[jog1t]

The zoom, fit-view, and lock controls in the workflow visualizer rendered as blank squares. The buttons kept the library's light-mode background while the icons inherited a near-white foreground colour, so the icons were invisible against them.

<ReactFlow> was never told which colour mode to use, so xyflow stayed in light mode and its own dark palette never applied. The dashboard compensated with ad-hoc property overrides, but those set fill on the button, which never reaches the icon because .react-flow__controls-button svg is more specific and resolves currentColor from color. The background override also depended on stylesheet import order, since the library's rule has equal specificity.

• Pass the active theme to <ReactFlow> as colorMode so xyflow applies its own light and dark palettes
• Theme the controls, minimap, and edges through xyflow's own custom properties, which take precedence over the library defaults regardless of bundle import order
• Remove the duplicated xyflow override blocks, which had drifted across three stylesheets
• Set an explicit colour mode in the xyflow Ladle stories so they match the dashboard

[railway-app]

🚅 Deployed to the actors-pr-5577 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
frontend-cloud	😴 Sleeping (View Logs)	Web	Aug 19, 2026 at 10:55 am
kitchen-sink	😴 Sleeping (View Logs)	Web	Aug 19, 2026 at 10:55 am
frontend-inspector	😴 Sleeping (View Logs)	Web	Aug 19, 2026 at 10:54 am
ladle	✅ Success (View Logs)	Web	Aug 19, 2026 at 10:48 am
mcp-hub	✅ Success (View Logs)	Web	Aug 19, 2026 at 10:47 am
website	❌ Build Failed (View Logs)	Web	Aug 19, 2026 at 10:47 am

[claude]

Review

Clean, well-motivated fix. Moving the overrides to xyflow's own --xy-* custom properties instead of fighting CSS specificity/import order is the right approach, and the explanation in the code comment is accurate and helpful.

Nit: leftover duplicate block in frontend/.ladle/ladle.css

The PR's stated goal is to remove "duplicated xyflow override blocks, which had drifted across three stylesheets," and it does clean up the controls/minimap overrides in ladle.css, theme.css, and index.css. However, frontend/.ladle/ladle.css still has this leftover at the bottom (lines 47-50):

/* Dark theme for xyflow edges. */
.react-flow__edge-path {
	stroke: hsl(var(--muted-foreground));
}

This is now redundant: ladle.css already @imports theme.css at the top, which sets --xy-edge-stroke: hsl(var(--muted-foreground)) on .react-flow. Both resolve to the same color today, so there's no visual regression, but it's exactly the kind of drift-prone duplicate selector (old .react-flow__edge-path approach vs. the new custom-property approach) the PR is otherwise cleaning up. Worth deleting for consistency with the rest of the change.

Things that check out

• colorMode={theme} in workflow-visualizer.tsx — Theme from useTheme() is "light" | "dark", a valid subset of xyflow's ColorMode ("system" | "light" | "dark"), so no type issue.
• The --xy-controls-* / --xy-minimap-* / --xy-edge-stroke variable names used match xyflow's public "override without -default suffix" convention, and removing the old !important on .react-flow__minimap is safe under this model since the library resolves var(--x, var(--x-default)) rather than competing on specificity.
• Dropping the explicit .react-flow__controls-button:last-child { border-bottom: none } override is fine — xyflow's own base styles already omit the bottom border on the last control button, so this was purely redundant.
• Adding overflow: hidden to .react-flow__controls is a nice small fix on its own: it makes the border-radius: 6px actually clip the button corners, which the old rules didn't do.
• xyflow-nodes.stories.tsx hardcoding colorMode="dark" matches Ladle's forced dark theme (ladle.css forces dark tokens), so it's consistent with real app behavior rather than a magic value.

Test coverage

No automated tests, which is reasonable for a CSS/theming-only fix — this class of bug (invisible icons) is best caught visually. The Ladle story update is a good, low-cost way to keep this checkable going forward.

Nothing blocking here; the leftover ladle.css block is the only thing I'd ask to clean up before merging.