Skip to content

Commit c5f1f32

Browse files
authored
Create prospective_visuals.md
1 parent 6f1f3f5 commit c5f1f32

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

docs/prospective_visuals.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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

Comments
 (0)