docs/CLEAN_DEFAULT_UI.md

Clean default UI pass

Last updated: 2026-05-12

Goal

The application had become functionally rich but visually too dense. The default view should communicate one simple loop:

upload audio → adjust 2-3 controls → extract → audition waveform and sample cards

Everything else should remain available, but it should not compete with that loop until the user opens the relevant panel.

Implemented changes

Area	Change
Default panels	Left-sidebar source, selection, pipeline, history, right-sidebar exports, and bottom review/edit are collapsed by default.
Bottom dock	Reduced to a compact tab bar until a tool is opened; opening a bottom tool expands only the bottom dock.
Top bar	Shorter top bar, smaller logo mark, compact upload control, compact backend status, smaller primary action.
Main workspace	Waveform and sample cards get more of the viewport by shrinking sidebars, gaps, padding, and the collapsed bottom dock.
Common controls	Helper paragraphs, long field hints, and range captions are hidden in the default common-control card.
Advanced controls	Advanced DSP/model/cache parameters remain available but are collapsed and visually quieter.
Pipeline/logs/history	Still present, but no longer visible unless the user opens the relevant left-sidebar panel.
Review/edit tools	Still present, but moved behind the collapsed bottom dock so normal extraction is not visually crowded.
Local scrolling	The page remains non-scrolling; only panels and grids scroll internally when needed.

Default visible surface

The default screen now shows only:

1. app identity;
2. upload control;
3. backend status;
4. primary extract button;
5. collapsed utility panels;
6. waveform transport;
7. sample-card grid;
8. common extraction controls.

This keeps the advanced workstation architecture without making the application feel like a debug console.

Preserved behavior

No backend API or DOM id was removed. Existing functionality is still wired:

• whole-app drag/drop upload;
• extraction jobs and SSE progress;
• source/stem/reproduced preview transport;
• waveform onset selection and force-onset mode;
• sample/hit audition;
• run history;
• supervised editing;
• edited export;
• raw tables;
• advanced parameter tuning.

Remaining UI work

1. Add a single keyboard shortcut/help overlay so hidden tools remain discoverable.
2. Add browser screenshot regression tests for the clean default layout.
3. Consider a true icon rail if the left collapsed panel summaries still feel too wide after real browser review.
4. Add a focused empty state inside the waveform/sample area before upload.
5. Migrate the frontend to TypeScript/Vite once the UI stops changing rapidly.