Overlay UI Behavior
The compact ElevenLabs-inspired overlay, matrix visualization, settings popover, and remembered drag positioning.
What it does
The FlowLens overlay is the visible face of the product. It appears over the current workspace, shows recording and processing state immediately, renders the structured response, and can expand vertically for scrollable content without becoming a full app window.
Current visual system
The overlay now follows an ElevenLabs-inspired style:
- warm transparent surface
- angular 6 to 10px radii
- compact top navigation for Prompt Doctor, Error Explainer, and Writing Improver
- white sliding selection indicator
- warm lift shadows on buttons and navigation
- higher-contrast Matrix visualizer
- small gear control for settings
State-driven layout
| State | Behavior |
|---|---|
| idle | compact mode selector and send/cancel controls |
| recording | matrix shows live VU levels from microphone input |
| processing | matrix switches to animated frame presets |
| response compact | answer appears in a bounded, scrollable card |
| response expanded | taller reading layout for longer markdown output |
| settings | overlay resizes to a bounded settings layout with internal scrolling |
| error | compact retryable error state |
Matrix visualization
Recording mode uses mode="vu" and changing levels. Processing and speaking states use animated frames. The Matrix component itself stays unchanged; FlowLens changes what it feeds into it.
This matters because a grey matrix is usually not a Matrix bug. It means the app is feeding zero levels or not entering the right animation state.
Settings inside the overlay
The gear opens a compact settings section with:
- provider key, base URL, model, and API key
- ElevenLabs key, TTS model, and Voice Picker
- microphone selector
- hotkey capture and reset
- permission status and request actions
- overlay reset
- launch-at-login
- voice playback
- screenshot confirmation preference
- diagnostics export
- factory reset
The standalone settings window uses the same settings snapshot semantics as the overlay settings panel.
Drag positioning
The overlay chrome is draggable. Interactive controls are marked as no-drag so buttons, inputs, dropdowns, voice picker, and response content remain usable.
When the user drags the overlay:
- the main process listens to debounced
moveevents - it stores
{ mode: 'custom', x, y, displayId } - future opens reuse that top-left position
- dynamic resizing preserves custom position and clamps into the display work area
- Reset returns to bottom-right anchoring
Why it is useful
The overlay keeps attention where it already is. It avoids a mode switch into a separate chat app while still giving enough surface area to listen, read, copy, change settings, or recover from an error.
Current intentional limits
- it is not a persistent side panel
- it does not anchor to a specific IDE layout region
- it does not maintain a long conversation stack
- it does not manipulate the desktop directly