Hide flowchart ids and designer status by default; let the flowchart follow its theme

[timurbazhirov]

Summary

Two changes to what the flowchart shows and how it looks — SOF-8024 portion 1 items 1.1 / 1.5 and SOF-8023 items 1.3 and 3.3 (plan).

1. Ids and status are opt-in

Every subworkflow card, unit row and flowchart node prints a raw UUID under its title, and a status badge reading "idle" — in the designer, where nothing has run and no unit has a meaningful status. Both are addressed to whoever is debugging rather than to the person reading the workflow, and they spend a line and a badge on every card to do it.

Two props on CardHeader, threaded through UnitCard and WorkflowUnitCard, both default off:

Prop	Effect
showDeveloperInfo	Renders the flowchart id, copy affordance intact. Hosts expose it deliberately — the designer puts it behind a "Developer info" toggle.
showStatus	Renders the status badge. Job views, where status is the point, pass it; the designer doesn't.

When the id is hidden the subheader isn't rendered at all, rather than emptied — otherwise every title keeps a blank row and a dangling copy button under it.

2. The flowchart takes its colours from the theme

reactflow's own stylesheet paints the pane and its control buttons white with near-black glyphs, regardless of the surrounding theme — so a dark host framed a white rectangle with controls invisible against it.

The background grid was worse than hard-coded: its colour was the literal string "000", which is not a valid CSS colour. The dots fell back to reactflow's light-theme default and disappeared entirely on a dark surface.

Pane, control buttons, edges and handles now read from the theme. The rules sit in sx on a wrapper rather than props on <ReactFlow> because the library exposes those surfaces as CSS classes, not as an API.

This is necessary but not sufficient for the dark designer: workflow-designer also pinned its whole subtree to a light theme, fixed by useHostTheme in mat3ra/workflow-designer#14.

Verification

tsc clean, eslint 0 errors, prettier clean, npm test 36 pass — including 6 render tests (tests/cardHeader.tests.tsx, following the existing renderToStaticMarkup pattern) asserting: the id is absent by default and present with showDeveloperInfo; status is absent by default and present with showStatus; the title survives both modes; and no empty subheader element is left behind.

Measured in the workflow-designer demo under its dark theme:

	before	after
pane background	white	#0d1117
control buttons	#fefefe with near-black glyphs	theme paper with white glyphs
grid dots	pure black (invalid colour → fallback)	rgba(255,255,255,.5)

One note for review

dist/context/utils.* also moves in this PR. That file was already stale on main — a src JSDoc change had never been transpiled — so regenerating dist sweeps it up. Comments only, no behaviour change.

That staleness was worth a follow-up in its own right: these repos track dist/ and ship it, and the husky pre-commit hook that regenerates it only fires once hooks are installed — there was no "prepare": "husky install" here, so a fresh clone commits without it. Now fixed (the same gap hit ive, job-designer and workflow-designer; all four are fixed).

🤖 Generated with Claude Code

https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8