feat: reduce default ui clutter

README.md

@@ -39,7 +39,7 @@ Implemented:
   - event log,
   - suggestions,
   - undo stack.
-- Fixed, non-scrolling workstation UI: explicit top-bar upload button, whole-app drag/drop overlay, left/right sidebars for tool panels, large center waveform/sample workspace, and bottom dock for review/edit tools.
+- Clean, fixed, non-scrolling workstation UI: explicit top-bar upload button, whole-app drag/drop overlay, collapsed left/right/bottom tool panels by default, large center waveform/sample workspace, and bottom dock for review/edit tools.
 - Supervision UI:
   - selected-hit actions,
   - move hit to cluster,
@@ -74,6 +74,7 @@ See:
 - `docs/SUPERVISED_EXPORT_AND_FORCE_ONSET.md`
 - `docs/FIXED_WORKSTATION_UI.md`
 - `docs/REPRODUCED_AUDIO_AND_PARAMETERS.md`
+- `docs/CLEAN_DEFAULT_UI.md`
 
 ## Run locally
 
@@ -156,7 +157,7 @@ curl http://127.0.0.1:7860/api/jobs
 | `sample_extractor.py` | Core DSP/sample extraction implementation |
 | `supervised_state.py` | Persistent semantic state, confidence, constraints, events, suggestions, force-onset, restore, undo |
 | `supervised_export.py` | Renders edited semantic state into supervised WAV/MIDI/reconstruction/ZIP artifacts |
-| `web/` | Custom no-build browser frontend with fixed non-scrolling workstation layout, explicit upload/whole-page drag-drop, source/stem/reproduced preview transport, common/advanced parameter separation, sidebars, bottom dock, sample-card grid, hidden-audio audition, add-onset mode, and edited export |
+| `web/` | Custom no-build browser frontend with clean fixed non-scrolling workstation layout, explicit upload/whole-page drag-drop, source/stem/reproduced preview transport, common/advanced parameter separation, collapsed sidebars/bottom dock, sample-card grid, hidden-audio audition, add-onset mode, and edited export |
 | `scripts/benchmark_subprocesses.py` | Synthetic benchmark runner for stage timings |
 | `scripts/test_interactive_supervision.py` | Smoke test for supervised state endpoints |
 | `scripts/test_supervised_export_and_force_onset.py` | Smoke test for force-onset, restore, suggestion diffs, and edited exports |

docs/CLEAN_DEFAULT_UI.md

@@ -0,0 +1,65 @@
+# 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:
+
+```text
+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.

docs/FEATURES.md

@@ -13,9 +13,9 @@ Turn an input audio file into a practical drum sample pack: detected hits, group
 | UI | Custom browser frontend | Implemented | `web/index.html`, `web/styles.css`, `web/app.js`; no Gradio dependency in active app. |
 | UI | Explicit upload button | Implemented | Top bar contains a visible `Upload audio` control. |
 | UI | Whole-app drag/drop audio upload | Implemented | Dropping files anywhere on the app selects the file and shows a drop overlay during drag. |
-| UI | Fixed non-scrolling workstation layout | Implemented | Body is viewport-locked; tools live in left/right sidebars and a bottom dock; long content scrolls inside panels only. |
+| UI | Clean fixed non-scrolling workstation layout | Implemented | Body is viewport-locked; primary workflow stays visible; secondary tools live in collapsed left/right sidebars and a compact bottom dock; long content scrolls inside panels only. |
 | UI | Minimal custom transport | Implemented | One play/time/progress row can audition Source, Stem, or Reproduced previews; completed runs default to Reproduced. |
-| UI | Common vs advanced parameters | Implemented | Common controls show stem, sensitivity, group count, and two presets; advanced model/DSP/export controls are grouped by pipeline stage. |
+| UI | Common vs advanced parameters | Implemented | Default view shows stem, sensitivity, group count, and two presets; helper copy and advanced model/DSP/export controls stay hidden until the user opens the relevant panel. |
 | UI | Streaming progress | Implemented | Uses `EventSource` over `GET /api/jobs/{id}/events`, with polling fallback. |
 | UI | Waveform/onset overview | Implemented | Canvas envelope plus clickable onset markers from `manifest.json`. |
 | UI | Result downloads | Implemented | ZIP, MIDI, stem WAV, reconstruction WAV, individual sample WAVs, and per-hit review WAVs. |
@@ -102,3 +102,13 @@ Status: implemented.
 - Right-side core-control card now exposes only stem, sensitivity, cluster count, and export samples in the default view.
 - Fast modes, DSP/model parameters, pipeline logs, history, supervision, and raw tables are hidden behind `Advanced` / `Review & edit`.
 - Extracted samples render as auditionable cards with waveform thumbnails and minimal labels.
+
+
+## Clean default UI status
+
+Status: implemented.
+
+- Secondary panels are collapsed by default so the first screen is no longer dominated by logs, history, exports, or review/edit tools.
+- The bottom dock stays as a small tab bar until a tool is opened.
+- The top bar, sidebars, common controls, transport, and sample cards were tightened to give the waveform/sample workspace more room.
+- No feature was removed; advanced and supervised tools remain available through expandable panels.

docs/FIXED_WORKSTATION_UI.md

@@ -53,3 +53,16 @@ Static checks added/performed for this pass:
 - The right sidebar now separates the normal workflow from advanced tuning.
 - Common controls are limited to stem choice, hit sensitivity, sample group count, and two presets.
 - Advanced parameters are grouped into stem separation, hit detection, grouping, export/cache sections.
+
+## Clean default refinement
+
+The fixed workstation layout now defaults to a much quieter state:
+
+- left-sidebar utility panels are closed initially;
+- the right-sidebar exports panel is closed initially;
+- the bottom dock is only a compact tab bar until opened;
+- the common-control card remains open because it is part of the core extraction loop;
+- helper copy is hidden from the default common-control view;
+- the waveform and sample grid receive more viewport space.
+
+The layout still does not use document-level scrolling. Opening a panel expands only that panel or dock and uses local scrolling as needed.

docs/PROGRESS.md

@@ -283,3 +283,19 @@ Completed in this pass:
 Outcome:
 
 The app is easier to understand for normal use: the main right-side controls are now only the few controls users are likely to touch repeatedly, while lower-level DSP/model controls stay available but grouped by stage. Reproduced audio is now useful for musical judgment because separated-stem runs are previewed inside the rest of the mix rather than as an isolated sample-triggered stem only.
+
+## Pass 10: clean default UI
+
+Completed in this pass:
+
+1. Collapsed secondary panels by default: source hints, selection context, pipeline, run history, exports, and review/edit no longer open on initial load.
+2. Reduced the bottom dock to a compact tab bar unless a bottom tool is explicitly opened.
+3. Shortened the top bar and reduced logo/upload/backend/action button visual weight.
+4. Shrunk sidebars, panel padding, gaps, transport height, and sample-card dimensions to give the waveform and samples more room.
+5. Hid common-control helper paragraphs and long field hints from the default extraction flow.
+6. Preserved advanced controls, logs, history, supervision, tables, and edited export behind existing expandable panels.
+7. Added `docs/CLEAN_DEFAULT_UI.md` to document the clean-default layout contract.
+
+Outcome:
+
+The UI remains a fixed workstation with sidebars and a bottom dock, but the first screen is now much less cluttered. The visible default workflow is upload, extract, listen, inspect waveform, and audition sample cards; debug/review/power-user tools are available only when opened.

docs/REMAINING_WORK.md

@@ -77,4 +77,4 @@ Highest-priority remaining work now:
 
 ## UI status note
 
-The default UI is now a fixed, non-scrolling workstation layout with left/right sidebars, a bottom dock, explicit upload, and whole-app drag/drop. Remaining UI work is interaction depth and engineering hardening: browser screenshot regression tests, TypeScript/Vite migration, edited-vs-original comparison, waveform zoom/pan, and richer cluster merge/split/relabel workflows.
+The default UI is now a cleaner fixed, non-scrolling workstation layout with collapsed side/bottom utility panels, explicit upload, and whole-app drag/drop. Remaining UI work is interaction depth and engineering hardening: browser screenshot regression tests, TypeScript/Vite migration, edited-vs-original comparison, waveform zoom/pan, a shortcut/help overlay for discoverability, and richer cluster merge/split/relabel workflows.

docs/TASKS.md

@@ -127,3 +127,15 @@ Remaining follow-up tasks:
 - [ ] Add source-vs-reproduced waveform/error comparison.
 - [ ] Add LUFS loudness matching for long previews.
 - [ ] Optionally cache explicit Demucs non-target stem sums instead of residual subtraction.
+
+## Pass 10 tasks: clean default UI
+
+| Task | Status | Notes |
+|---|---:|---|
+| Collapse secondary panels by default | Done | Source, selection, pipeline, history, exports, and review/edit no longer open on first load. |
+| Make bottom dock compact by default | Done | Bottom dock is a small tab bar until `Review & edit` or `Tables` is opened. |
+| Reduce top-bar visual weight | Done | Smaller brand mark, shorter upload control, compact backend status, smaller primary button. |
+| Give center workspace more room | Done | Reduced sidebars/gaps/padding and collapsed bottom dock. |
+| Hide long helper copy from common controls | Done | Common-control hint text is hidden; advanced descriptions remain in expandable sections. |
+| Preserve no-scroll workstation behavior | Done | Body remains viewport-locked; panel-local scrolling remains. |
+| Preserve all current features | Done | Existing DOM ids and API paths are preserved; changes are layout/CSS/default-open-state only. |

docs/UI_REPLACEMENT.md

@@ -145,3 +145,18 @@ This pass made the audio preview and control model more explicit:
 - Advanced parameters are grouped by pipeline stage: stem separation, hit detection, grouping, export/cache.
 
 See `docs/REPRODUCED_AUDIO_AND_PARAMETERS.md`.
+
+## Pass 10 clean-default refinement
+
+This pass responds to the UI being too cluttered after the workstation and reproduced-audio additions.
+
+Changes:
+
+- all non-essential side/bottom panels are collapsed by default;
+- the bottom dock is compact until a review/table tool is opened;
+- top-bar controls are shorter and visually lighter;
+- common controls hide explanatory copy and show only the core knobs;
+- pipeline logs, run history, exports, supervision, and raw tables remain present but opt-in;
+- the no-scroll workstation constraint is preserved.
+
+See `docs/CLEAN_DEFAULT_UI.md`.

web/index.html

@@ -44,7 +44,7 @@
 
       <main class="workstation">
         <aside class="sidebar left-sidebar" aria-label="Left tool sidebar">
-          <details class="tool-panel source-panel" open>
+          <details class="tool-panel source-panel">
             <summary><span>Source</span><small>Upload and status</small></summary>
             <div class="drop-hint-card">
               <strong>Upload button is in the top bar.</strong>
@@ -56,7 +56,7 @@
             </div>
           </details>
 
-          <details class="tool-panel selection-panel" open>
+          <details class="tool-panel selection-panel">
             <summary><span>Selection</span><small>Audition context</small></summary>
             <article class="review-card">
               <strong>Selected hit</strong>
@@ -68,7 +68,7 @@
             </article>
           </details>
 
-          <details class="tool-panel progress-panel" open>
+          <details class="tool-panel progress-panel">
             <summary><span>Pipeline</span><small>Stage timings and logs</small></summary>
             <div id="stageList" class="stage-list"></div>
             <pre id="logs" class="logs" aria-live="polite"></pre>
@@ -146,7 +146,7 @@
             </div>
           </details>
 
-          <details class="tool-panel downloads-panel" open>
+          <details class="tool-panel downloads-panel">
             <summary><span>Exports</span><small>Current artifacts</small></summary>
             <div id="downloads" class="downloads compact-downloads"></div>
             <div id="editedDownloads" class="downloads edited-downloads"></div>
@@ -252,7 +252,7 @@
       </main>
 
       <footer class="bottom-dock" aria-label="Bottom tool bar">
-        <details class="bottom-tool supervision-panel" open>
+        <details class="bottom-tool supervision-panel">
           <summary><span>Review & edit</span><small>Move, suppress, restore, force-onset, explain, and export edited packs</small></summary>
           <div class="bottom-tool-content">
             <div class="supervision-header">

web/styles.css

@@ -929,3 +929,283 @@ tr:last-child td { border-bottom: 0; }
     justify-content: center;
   }
 }
+
+/* Clean default UI pass: keep the app usable at a glance and hide workstation depth until requested. */
+:root {
+  --topbar-h: 58px;
+  --bottom-h: 44px;
+  --radius-xl: 14px;
+  --radius-lg: 10px;
+  --shadow: 0 8px 24px rgba(18, 21, 30, .045);
+}
+
+.shell {
+  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--bottom-h);
+  gap: 8px;
+  padding: 8px;
+}
+.shell:has(.bottom-tool[open]) {
+  grid-template-rows: var(--topbar-h) minmax(0, 1fr) minmax(230px, 33vh);
+}
+
+.topbar {
+  grid-template-columns: minmax(210px, 1fr) minmax(260px, 420px) auto;
+  gap: 10px;
+  padding: 0;
+}
+.app-title { gap: 10px; }
+.brand-mark {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  box-shadow: none;
+}
+.brand-mark i { width: 3px; }
+.brand-mark i:nth-child(1) { height: 10px; }
+.brand-mark i:nth-child(2) { height: 18px; }
+.brand-mark i:nth-child(3) { height: 25px; }
+.brand-mark i:nth-child(4) { height: 15px; }
+.brand-mark i:nth-child(5) { height: 8px; }
+.app-title strong { font-size: 16px; }
+.app-title small { display: none; }
+
+.upload-chip {
+  height: 44px;
+  gap: 9px;
+  padding: 5px 10px 5px 5px;
+  border-radius: 12px;
+  box-shadow: none;
+}
+.upload-button-face {
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 9px;
+  font-size: 12px;
+}
+.upload-copy strong { font-size: 12px; }
+.upload-copy small { display: none; }
+.backend-pill { max-width: 88px; overflow: hidden; }
+.backend-pill strong { max-width: 68px; overflow: hidden; text-overflow: ellipsis; }
+.primary-button {
+  min-width: 156px;
+  padding: 12px 16px;
+  border-radius: 11px;
+  font-size: 14px;
+  box-shadow: 0 10px 26px rgba(85, 43, 216, .18);
+}
+.primary-button span { margin-right: 5px; }
+
+.workstation {
+  grid-template-columns: 214px minmax(0, 1fr) 292px;
+  gap: 8px;
+}
+.sidebar { gap: 6px; overflow: hidden; }
+.sidebar:hover { overflow: auto; }
+.center-workspace {
+  grid-template-rows: minmax(280px, 1fr) minmax(142px, 190px);
+  gap: 8px;
+}
+.panel,
+.tool-panel,
+.bottom-tool {
+  border-color: rgba(226, 227, 232, .78);
+  box-shadow: none;
+  background: rgba(255, 255, 255, .94);
+}
+.tool-panel {
+  padding: 9px 10px;
+  border-radius: 12px;
+}
+.tool-panel[open] { padding-bottom: 10px; }
+.tool-panel > summary,
+.bottom-tool > summary {
+  min-height: 28px;
+  gap: 0;
+}
+.tool-panel > summary span,
+.bottom-tool > summary span {
+  font-size: 12px;
+  letter-spacing: -.01em;
+}
+.tool-panel > summary small,
+.bottom-tool > summary small {
+  font-size: 10px;
+}
+.left-sidebar .tool-panel > summary small,
+.control-card .panel-help,
+.control-card .field-hint,
+.control-card .range-caption,
+.section-heading small,
+.drop-hint-card,
+.review-card strong {
+  display: none;
+}
+.tool-panel > summary::after,
+.bottom-tool > summary::after {
+  right: 12px;
+  font-size: 12px;
+}
+
+.drop-hint-card,
+.job-status-card,
+.review-card {
+  margin-top: 8px;
+  padding: 9px;
+  border-radius: 10px;
+}
+.review-card span,
+.job-status-card small {
+  font-size: 11px;
+  line-height: 1.3;
+}
+.stage-list { gap: 5px; margin-top: 8px; }
+.stage {
+  grid-template-columns: 10px minmax(0, 1fr) auto;
+  gap: 6px;
+  padding: 7px;
+  border-radius: 9px;
+}
+.stage small { display: none; }
+.logs { display: none; }
+.history-list, .compact-list { gap: 6px; }
+.history-row, .compact-row, .suggestion-row, .log-row {
+  padding: 8px;
+  border-radius: 10px;
+}
+
+.wave-card {
+  grid-template-rows: minmax(0, 1fr) 54px;
+  border-radius: 16px;
+}
+.transport-row {
+  grid-template-columns: 38px 76px minmax(0, 1fr) auto;
+  gap: 10px;
+  padding: 8px 14px 10px;
+}
+.round-play {
+  width: 38px;
+  height: 38px;
+  font-size: 13px;
+}
+.transport-time { font-size: 12px; }
+.preview-tabs {
+  padding: 3px;
+  gap: 2px;
+}
+.preview-tab {
+  padding: 6px 8px;
+  font-size: 10px;
+}
+
+.samples-section {
+  padding: 10px;
+  border-radius: 14px;
+}
+.section-heading { margin-bottom: 8px; }
+h2 { font-size: 14px; }
+.sample-grid {
+  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
+  grid-auto-rows: 124px;
+  gap: 8px;
+}
+.sample-card {
+  grid-template-rows: minmax(0, 1fr) 42px;
+  border-top-width: 3px;
+  border-radius: 9px;
+  box-shadow: none;
+}
+.sample-card-footer {
+  grid-template-columns: 26px minmax(0, 1fr);
+  gap: 7px;
+  padding: 7px;
+}
+.play-dot {
+  width: 25px;
+  height: 25px;
+  font-size: 10px;
+}
+.sample-name { font-size: 11px; }
+
+.control-group { margin-top: 9px; }
+label { font-size: 12px; }
+input, select {
+  margin-top: 6px;
+  padding: 8px 9px;
+  border-radius: 9px;
+  font-size: 12px;
+}
+input[type="range"] { height: 4px; }
+input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; }
+input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
+.stepper { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; }
+.step-button { height: 32px; margin-top: 6px; }
+.ghost-button,
+.secondary-button,
+.export-button {
+  padding: 7px 9px;
+  border-radius: 9px;
+  font-size: 11px;
+}
+.preset-row { gap: 6px; margin-top: 8px; }
+.downloads { gap: 6px; margin-top: 8px; }
+.downloads a, .table-wrap a { padding: 6px 8px; font-size: 10px; }
+.advanced-section { margin-top: 10px; padding-top: 9px; }
+.advanced-section h4 { font-size: 11px; margin-bottom: 6px; }
+.control-grid { gap: 7px; margin-top: 7px; }
+
+.bottom-dock {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+.bottom-tool {
+  padding: 8px 10px;
+  border-radius: 12px;
+}
+.bottom-tool[open] {
+  padding: 10px;
+}
+.bottom-tool:not([open]) {
+  display: grid;
+  align-items: center;
+}
+.bottom-tool:not([open]) > summary small { display: none; }
+.bottom-tool-content { padding-top: 8px; }
+.supervision-header p,
+.supervision-header h3,
+.result-columns h3,
+.subtle {
+  display: none;
+}
+.supervision-header { justify-content: end; }
+.state-summary { margin: 7px 0; gap: 5px; }
+.state-summary span { padding: 5px 8px; font-size: 10px; }
+.supervision-tools {
+  grid-template-columns: minmax(160px, 1fr) repeat(4, auto);
+  gap: 6px;
+  margin-top: 8px;
+}
+.supervision-grid {
+  grid-template-columns: repeat(4, minmax(160px, 1fr));
+  gap: 8px;
+  margin-top: 8px;
+}
+.supervision-grid article {
+  min-height: 96px;
+  padding: 8px;
+  border-radius: 10px;
+}
+.supervision-grid h4 { font-size: 11px; margin-bottom: 6px; }
+.explanation { margin-top: 8px; max-height: 110px; }
+
+@media (max-width: 1180px) {
+  :root { --bottom-h: 44px; }
+  .workstation { grid-template-columns: 180px minmax(0, 1fr) 270px; }
+  .shell:has(.bottom-tool[open]) { grid-template-rows: var(--topbar-h) minmax(0, 1fr) minmax(230px, 36vh); }
+}
+@media (max-width: 900px) {
+  :root { --topbar-h: 118px; --bottom-h: 44px; }
+  .workstation { grid-template-columns: 1fr; grid-template-rows: 0 minmax(0, 1fr) 0; }
+  .topbar { grid-template-columns: 1fr; }
+  .left-sidebar, .right-sidebar { display: none; }
+  .shell:has(.bottom-tool[open]) { grid-template-rows: var(--topbar-h) minmax(0, 1fr) minmax(240px, 38vh); }
+}