Build a visual read-only configuration UI

[oveddan]

Goal

Build a visual, strictly read-only UI for inspecting the complete configuration of a connected MIDI Fighter Twister.

Experience

Show the controller as a banked 4×4 knob grid. A user should be able to switch among all detected banks and inspect each encoder's:

• active, inactive, and detent colors
• rotary and push MIDI channel/number mappings
• switch action and movement mode
• indicator, detent, and super-knob settings

Also provide a global-settings view, device identity/firmware details, compatibility warnings, and access to the raw JSON export.

Safety boundary

This issue must not add configuration writes. The UI should call only the existing read-only discovery/export path, and the transport boundary should reject configuration pushes and all system/reset/bootloader commands. It should not rely only on disabled buttons for safety.

Acceptance criteria

• Discover and select connected Twister devices.
• Render four-bank and optional eight-bank configurations correctly.
• Display a 4×4 visual knob grid with accurate persistent colors.
• Expose all decoded encoder and global fields without hiding raw tag values.
• Show firmware/device identity and compatibility warnings.
• Allow downloading the complete configuration JSON.
• Allow opening a previously exported JSON snapshot when hardware is unavailable.
• Send no mutating SysEx commands; this is covered by automated tests at the transport boundary.
• Handle disconnected devices, MIDI permission failures, malformed responses, and partial reads clearly.
• Document the chosen architecture and local development workflow.

Architecture question

Evaluate a small local web UI backed by the existing Node MIDI layer versus a packaged desktop shell. Prefer the smallest approach that preserves reliable SysEx access and the hard read-only boundary.