Skip to content

Developer info toggle, unit inspector drawer, and theme parity - #14

Open
timurbazhirov wants to merge 7 commits into
claude/ux-improvements-msn5h2from
feature/SOF-8023-designer-info-toggle
Open

Developer info toggle, unit inspector drawer, and theme parity#14
timurbazhirov wants to merge 7 commits into
claude/ux-improvements-msn5h2from
feature/SOF-8023-designer-info-toggle

Conversation

@timurbazhirov

@timurbazhirov timurbazhirov commented Aug 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Summary

Host side of SOF-8024 portion 1 items 1.1 and 1.5, plus SOF-8023 phase 3.3 (plan).

Based on claude/ux-improvements-msn5h2, not main — so this builds on that branch's quick wins (tab renames, undo removals, dirty state, Brillouin zone) rather than fighting them. Retarget to main after #12 lands. It also includes #13 (hideComputeSubTab), merged in cleanly.

Every new surface is a default-off prop, so nothing changes for a host that doesn't ask.

SOF-8024: de-noise

  • 1.1 — Developer info. Flowchart ids no longer render on cards and nodes. A Developer info action in the workflow actions dropdown flips them back on for whoever is debugging.
  • 1.5 — status. New showUnitStatus prop, default off: in the designer nothing has run, so every unit reports a meaningless "idle".

Both reach wove through WoveDisplayOptionsProvider (mat3ra/wove#11) rather than props. The cards sit behind reactflow node data — UnitsFlowchartContainer → UnitsFlowchart → node.data → UnitNode → UnitCard — so a prop would mean drilling through flowchart internals, and "this whole tree is a designer" is a host-level decision, not a per-card one. An explicit prop on a single card still wins over the provider.

SOF-8023 phase 3.3: unit inspector and theme parity

useUnitInspector — adjusting a unit meant leaving the flowchart for the Settings tab, finding that unit among all the others, changing it, and coming back to see what it did: a bounce between three tabs for one edit, with the diagram that gives the change its meaning off screen throughout. Clicking a unit now opens its settings beside the flowchart, which keeps it selected. The panel reuses ImportantSettingsForUnit, so it's the same form the Settings tab shows, scoped to one unit.

A plain MUI Drawer rather than cove's ResizableDrawer: that one is anchored to the bottom and resizes on height only — its hook takes a minHeight, its buttons are up/down arrows. Generalising it to two axes is a change to a shared component with its own consumers; the width handle here is a few lines and risks none of them.

useHostTheme — this is the real cause of "the dark shell frames a white canvas". WorkflowDefaultLayout pinned the entire designer to oldLightMaterialUITheme, so the subtree was light no matter what the host did. Fixing the flowchart's own hard-coded colours (mat3ra/wove#11) was necessary but nowhere near sufficient.

Please read: this PR fixes two things that were broken before it

1. The unit test suite never ran. All 16 tests fail on main with is not a function. Tests import the package by its own name (@mat3ra/workflow-designer/src/...), which resolves neither by self-reference — tests/package.json names that directory a different package — nor through node_modules. One tsconfig paths entry fixes it; 16/16 now pass. #13's description flagged this as worth a separate fix; this is that fix.

2. A dist gap on the base branch. claude/ux-improvements-msn5h2 has 13 changed src files and 0 changed dist files. Its dist/components/subworkflows/Subworkflow.js still says "Overview" / "Important settings" / "Detailed view" while src says "Units" / "Settings" / "Outputs", and dist/components/common/ doesn't exist at all — so BrillouinZone, brillouinZoneGeometry and UndoSnackbar have no build output while the emitted code imports them. That's a runtime failure for a consumer of the published package, not just staleness. Running npm run transpile here swept it up: 30 dist files, 12 of them new.

Root cause, worth fixing separately: the husky pre-commit hook does exactly the right thing (npm run transpile && git add dist/) but only fires once hooks are installed, and this repo had no "prepare": "husky install". (The same gap hit ive, job-designer and wove; all four now fixed.)

Verification

tsc clean, eslint 0 errors, prettier clean, 16/16 unit tests pass. Driven in the standalone demo against local wove and cove builds:

measured
Flowchart ids, default 0
Flowchart ids, Developer info on 8, each with its copy button
Clicking a unit card drawer opens titled cp · Unit 1 · execution with that unit's dynamics parameters; closes on the X
With useUnitInspector off no drawer, tabs behave exactly as before
Flowchart under a dark host pane #0d1117, control buttons dark with white glyphs, grid dots rgba(255,255,255,.5) — previously white, black-on-white, and pure black

Needs the matching mat3ra/wove#11 and a @mat3ra/cove release (mat3ra/cove#97) for the icon set.

🤖 Generated with Claude Code

https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8

claude added 7 commits August 16, 2026 18:23
@claude
feat: let the host hide a subworkflow's Compute tab
c7b3af3 
The job designer renders its own Compute tab, so a job screen offered two
things called 'Compute' - the job's, and one per subworkflow - leaving the
reader to guess which one the job would actually run with.

New hideComputeSubTab prop on Workflow, threaded to Subworkflow through
WorkflowDefaultLayout. Default false, so nothing changes for hosts that do
not set it. Compute is the last tab, which is what lets it be dropped
without renumbering the panels; an active index pointing at it falls back
to Overview rather than leaving an empty panel behind.

SOF-8023 phase 1.2.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
@claude
build: regenerate dist for hideComputeSubTab
ab7696e 
dist/ is tracked in this repo and the published package ships it. The husky
pre-commit hook regenerates and stages it automatically (npm run transpile
&& git add dist/), but only once hooks are installed - there is no
'prepare: husky install' script here, so a fresh clone commits without it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
@claude
Merge branch 'feature/SOF-8023-single-compute-tab' into feature/SOF-8…
b801286 
…023-designer-info-toggle
@claude
feat: Developer info toggle; hide unit status unless it means something
a81d862 
Identifiers and status came back from wove on every card. Both are now
opt-in there (mat3ra/wove#11); this is the host side.

- Developer info action in the workflow actions dropdown, following the
  existing showCheckIcon toggle pattern, flips flowchart ids back on for
  whoever is debugging without them being on show for everyone else.
- showUnitStatus prop, default off: in the designer nothing has run, so
  every unit reports a meaningless 'idle'. The job designer turns it on
  once a job leaves draft.

Both reach wove through WoveDisplayOptionsProvider rather than props:
the cards sit behind reactflow node data (UnitsFlowchartContainer ->
UnitsFlowchart -> node.data -> UnitNode -> UnitCard), and these are
host-level decisions anyway.

Covers SOF-8024 portion 1 items 1.1 and 1.5.

Note: dist/ here also gains the output for this branch's earlier work
(BrillouinZone, UndoSnackbar, the quick wins). That was missing - the
husky hook that regenerates dist only fires once hooks are installed,
and this repo has no 'prepare: husky install' script - so transpiling
sweeps it up.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
@claude
chore: arm the pre-commit hook so dist stays in sync
bdcc73a 
The hook that regenerates dist has never run: husky was not a dependency
and no prepare script installed it, so a fresh clone had .husky/pre-commit
sitting inert. That is why several packages landed src changes with a
stale or entirely missing dist - including new modules whose emitted code
imported files that were never built.

Adds husky + 'prepare: husky install' (matching cove, the one repo where
this works), and drops 'npx lint-staged' from the hook: lint-staged is
neither a dependency nor configured here, so arming the hook with that
line would have failed and blocked every commit. Linting is enforced in
CI regardless.

Verified in ive: staging only a src file produced a commit that included
the regenerated dist output.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
@claude
feat: unit inspector drawer, and let the designer inherit its host's …
fbc29d0 
…theme

Phase 3.3.

**Unit inspector (D3).** Adjusting a unit meant leaving the flowchart
for the Settings tab, finding that unit among all the others, changing
it, and coming back to see what it did — a bounce between three tabs for
one edit, with the diagram that gives the change its meaning off screen
throughout. Clicking a unit now opens its settings beside the flowchart,
which keeps it selected. The panel reuses ImportantSettingsForUnit, so
it is the same form the Settings tab shows, scoped to one unit.

A plain MUI Drawer rather than cove's ResizableDrawer: that one is
anchored to the bottom and resizes on height only, and generalising it
to two axes is a change to a shared component with its own consumers.
The width handle here is a few lines and puts none of them at risk.

**Theme parity (D4).** WorkflowDefaultLayout pinned the whole designer
to `oldLightMaterialUITheme`. That is why a dark host framed a white
canvas: the shell was dark and this subtree never was. `useHostTheme`
skips the override and inherits.

Both are opt-in, defaulting off, so the tabs and the light designer are
untouched until a host asks for otherwise.

**Also fixed: the unit test suite never ran.** Tests import the package
by its own name (`@mat3ra/workflow-designer/src/...`), which resolves
neither by self-reference — `tests/package.json` names that directory a
different package — nor through node_modules. All 16 tests failed on
main with "is not a function". One tsconfig `paths` entry fixes it;
16/16 now pass. Unrelated to the rest of this commit, but a repo whose
suite is dead cannot review the rest of it.

Verified in the demo: clicking a unit card opens the drawer titled
"cp · Unit 1 · execution" carrying that unit's dynamics parameters;
closing works; with the toggle off no drawer appears. Under the demo's
dark theme the flowchart pane is now #0d1117 with white control glyphs
(needs the matching wove change).

Refs SOF-8023.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
@claude
chore: drop git-lfs hooks that were committed by accident
1c64532 
`git lfs install` writes its hooks into whatever `core.hooksPath` points
at, which husky sets to `.husky/` — so four LFS hooks landed in the
previous commit from a local environment rather than from this repo.

They are not harmless noise: each exits 2 when `git-lfs` is absent, so
anyone without it installed would find `git push` and `git checkout`
failing in a repo that does not use LFS at all. Only `.husky/pre-commit`
belongs here, as in the sibling packages.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DK8KomMescJvMQNSEfeRR8
@timurbazhirov timurbazhirov changed the title Developer info toggle; hide unit status unless it means something Developer info toggle, unit inspector drawer, and theme parity Aug 17, 2026
@timurbazhirov timurbazhirov mentioned this pull request Aug 17, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@timurbazhirov @claude