|
| 1 | +# Prospective Visuals and Design Elements |
| 2 | + |
| 3 | +This document lists the proposed visual elements and common components to be included on each tab of the web UI. The goal is to unify the style and ensure we don't forget to implement them as the project evolves. |
| 4 | + |
| 5 | +## Global Components |
| 6 | + |
| 7 | +- **Header bar**: Title ("Phaelus Jam by LogicMUSE") and AI power toggle. |
| 8 | +- **Status LED strip**: WebSocket (WS), MIDI IN, MIDI OUT, Engine, LLM indicators. |
| 9 | +- **Unified dark theme**: charcoal background with subtle gradients and cyan highlights. |
| 10 | +- **Consistent control styling**: knobs, switches, sliders, meters across all panels. |
| 11 | +- **Navigation tabs**: Front, Configuration, Monitoring, Advanced Logging, Testing. |
| 12 | +- **Footer stats**: quick display of BPM, intensity, token counts, etc. |
| 13 | + |
| 14 | +## Panel-Specific Elements |
| 15 | + |
| 16 | +### Front Panel |
| 17 | +- Summary controls: Role swap switch, density knob or slider, model selector. |
| 18 | +- Prompt editor: Preset dropdown, editable preset text area, user add-on input, and preview. |
| 19 | +- Suggest button: to force a suggestion outside the bar cycle. |
| 20 | + |
| 21 | +### Configuration Panel |
| 22 | +- Preset file management: list of available `.json` files with status tags. |
| 23 | +- Buttons: Load, Reload, Reload Changed, Export, Upload. |
| 24 | +- File status indicator: loaded / unloaded / modified. |
| 25 | + |
| 26 | +### Monitoring Panel |
| 27 | +- Compact metrics: LLM requests, token counts, MIDI in/out counters, composer late percentage. |
| 28 | +- Activity meters: horizontal bar graphs or LED meters for BPM and intensity. |
| 29 | +- Held and recent notes: text display of currently held and recent MIDI notes. |
| 30 | + |
| 31 | +### Advanced Logging Panel |
| 32 | +- Log console: scrollable area showing JSON messages exchanged over WebSocket and HTTP. |
| 33 | +- Filters: checkboxes to toggle WebSocket vs HTTP logging. |
| 34 | +- Log controls: clear log, download log. |
| 35 | + |
| 36 | +### Testing Panel |
| 37 | +- Quick actions: buttons to ping state, force suggestion, fetch ports, apply quick params. |
| 38 | +- Testing results area: preformatted box showing JSON responses. |
| 39 | +- Metrics controls: buttons to fetch and reset metrics. |
| 40 | + |
| 41 | +--- |
| 42 | + |
| 43 | +Please update this document whenever new visual ideas or components are proposed, to keep track of them. |
0 commit comments