feat: add fixed workstation layout

README.md

@@ -39,7 +39,7 @@ Implemented:
   - event log,
   - suggestions,
   - undo stack.
-- Reference-aligned minimal waveform-first UI: compact file/action bar, quiet large waveform card, one custom transport row, right-side core controls, sample-card grid, and one collapsed review/edit workbench for power features.
+- 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.
 - Supervision UI:
   - selected-hit actions,
   - move hit to cluster,
@@ -72,6 +72,7 @@ See:
 - `docs/interactive-ux/README.md`
 - `docs/REMAINING_WORK.md`
 - `docs/SUPERVISED_EXPORT_AND_FORCE_ONSET.md`
+- `docs/FIXED_WORKSTATION_UI.md`
 
 ## Run locally
 
@@ -154,7 +155,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 the reference-aligned light waveform-first UI, sample-card grid, hidden-audio audition, add-onset mode, edited export, and collapsed supervision workbench |
+| `web/` | Custom no-build browser frontend with fixed non-scrolling workstation layout, explicit upload/whole-page drag-drop, 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/FEATURES.md

@@ -11,7 +11,9 @@ Turn an input audio file into a practical drum sample pack: detected hits, group
 | Area | Feature | Status | Notes |
 |---|---|---:|---|
 | UI | Custom browser frontend | Implemented | `web/index.html`, `web/styles.css`, `web/app.js`; no Gradio dependency in active app. |
-| UI | Drag/drop audio upload | Implemented | Uses multipart upload to `POST /api/jobs`. |
+| 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 | Minimal custom transport | Implemented | One image-aligned play/time/progress row drives source preview before extraction and stem preview after extraction. |
 | UI | Pipeline controls | Implemented | Stem/model/onset/clustering/MIDI/synthesis/cache controls. |
 | UI | Streaming progress | Implemented | Uses `EventSource` over `GET /api/jobs/{id}/events`, with polling fallback. |

docs/FIXED_WORKSTATION_UI.md

@@ -0,0 +1,47 @@
+# Fixed workstation UI
+
+Last updated: 2026-05-12
+
+## Goal
+
+The web app should behave like a compact workstation rather than a long document page. The default screen must not require document scrolling. Secondary tools live in left and right sidebars plus a bottom bar, with each tool panel independently expandable/collapsible.
+
+## Implemented layout
+
+| Region | Contents | Scroll behavior |
+|---|---|---|
+| Top bar | App title, explicit `Upload audio` button, selected-file metadata, backend status, primary `Extract Samples` action | Fixed height; no scroll |
+| Left sidebar | Source/drop guidance, selected-hit/sample context, pipeline stages/logs, run history | Sidebar-internal scroll only |
+| Center workspace | Large waveform/transport and representative sample cards | Sample grid scrolls internally when needed |
+| Right sidebar | Core extraction controls, exports, advanced model/DSP settings | Sidebar-internal scroll only |
+| Bottom bar | Interactive review/edit tools and raw tables | Panel-internal scroll only |
+
+The document itself is locked with `overflow: hidden`; long content is constrained to the relevant tool panel.
+
+## Upload behavior
+
+Implemented upload affordances:
+
+1. A visible `Upload audio` control in the top bar.
+2. A selected-file label beside the upload button.
+3. Whole-app drag/drop for audio files.
+4. A full-screen drop overlay while dragging files over the app.
+5. Existing multipart upload path through `POST /api/jobs` remains unchanged.
+
+## Design constraints
+
+- Keep the center workspace visually simple: waveform, transport, sample cards.
+- Do not reintroduce long-page scrolling.
+- Avoid duplicate controls; power tools should live in sidebars or the bottom dock.
+- Keep tool panels based on native `<details>` so they remain simple and keyboard-accessible.
+- Preserve all existing DOM ids used by the no-build JavaScript app.
+
+## Validation
+
+Static checks added/performed for this pass:
+
+- `node --check web/app.js`
+- DOM id/reference check for every `$()` lookup in `web/app.js`
+- Duplicate id check for `web/index.html`
+- Python compile check for active Python files
+- FastAPI extraction smoke test

docs/PROGRESS.md

@@ -240,3 +240,22 @@ Completed in this pass:
 Outcome:
 
 The default UI is now aligned with the supplied image: file/action bar, large waveform card, compact right controls, one transport row, and sample cards. Advanced extraction and semantic editing remain available but no longer dominate the first screen.
+
+
+## Pass 8: fixed no-scroll workstation layout and upload repair
+
+Completed in this pass:
+
+1. Reworked `web/index.html` into a fixed workstation shell: top bar, left sidebar, center workspace, right sidebar, and bottom dock.
+2. Locked the document viewport with `overflow: hidden` and moved long content into panel-local scroll containers.
+3. Moved pipeline logs/history/selection context into the left sidebar.
+4. Moved extraction, export, and advanced settings into the right sidebar.
+5. Moved semantic review/edit tools and raw tables into the bottom dock.
+6. Added an explicit top-bar `Upload audio` affordance.
+7. Added whole-window drag/drop handling so dropping a file anywhere on the app selects it instead of opening it in the browser.
+8. Added a full-screen drag overlay to make the drop target obvious.
+9. Preserved existing frontend ids and backend APIs so extraction, SSE, supervision, force-onset, and edited export remain wired.
+
+Outcome:
+
+The UI no longer behaves like a scrollable webpage. It now behaves like a compact desktop-style sample extraction workstation with simple expandable tool panels around a central waveform/sample workspace.

docs/REMAINING_WORK.md

@@ -74,4 +74,4 @@ Highest-priority remaining work now:
 
 ## UI status note
 
-The reference-aligned default UI is complete for the current no-build frontend. The remaining UI work is interaction depth and engineering hardening, not matching the supplied visual direction: 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 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.

docs/TASKS.md

@@ -94,3 +94,15 @@ Last updated: 2026-05-12
 - [x] `python3 -m py_compile app.py pipeline_runner.py sample_extractor.py supervised_state.py supervised_export.py scripts/*.py`
 - [x] `node --check web/app.js`
 - [x] `python3 scripts/test_api_job.py`
+
+## Fixed workstation UI tasks
+
+| Task | Status | Notes |
+|---|---:|---|
+| Remove document-level page scrolling | Done | `html, body` and `.shell` are viewport-locked; long content uses panel-local overflow. |
+| Add left sidebar for secondary tools | Done | Source guidance, selection context, pipeline logs, and run history live in the left sidebar. |
+| Add right sidebar for controls | Done | Core extraction, exports, and advanced model/DSP settings live in the right sidebar. |
+| Add bottom bar for expandable editor panels | Done | Review/edit and raw tables live in `bottom-dock`. |
+| Add explicit upload button | Done | Top bar now has a visible `Upload audio` control. |
+| Make whole-app file dropping work | Done | Window-level drag/drop handlers select dropped files and prevent browser navigation. |
+| Add drag overlay | Done | `globalDropOverlay` appears while dragging files over the app. |

docs/UI_REPLACEMENT.md

@@ -41,15 +41,29 @@ This pass closed the visual fidelity gaps from the previous approximation:
 
 The UI is still not a pixel-for-pixel clone because it must remain functional across arbitrary audio files and preserve the project’s editing tools, but the default screen is now intentionally aligned with the reference composition.
 
+
+## Pass 8 fixed workstation layout
+
+This pass responds to the no-scroll workstation requirement and the missing-upload affordance:
+
+- the document body is fixed to the viewport with `overflow: hidden`;
+- the app uses a top bar, left sidebar, center workspace, right sidebar, and bottom dock;
+- pipeline/history/selection tools moved into the left sidebar;
+- extraction/export/advanced controls moved into the right sidebar;
+- semantic review/edit tools and raw tables moved into the bottom bar;
+- all long content now scrolls only inside its own panel;
+- the upload affordance is now an explicit `Upload audio` button in the top bar;
+- dropping a file anywhere on the app loads it and shows a full-screen drop overlay while dragging.
+
 ## UI structure
 
 | Area | Purpose |
 |---|---|
-| Top file bar | File identity/drop target and one primary purple `Extract Samples` action. |
-| Waveform workspace | Quiet canvas with grey waveform, colored lollipop markers, one custom transport row, and compact downloads. |
-| Core control card | Stem, sensitivity, cluster count, export samples, and collapsed advanced settings. |
-| Sample card grid | Primary representative-sample browsing and audition surface. |
-| Review & edit workbench | Collapsed secondary area containing pipeline logs, run history, supervision tools, and raw tables. |
+| Top bar | App identity, explicit upload button, selected-file metadata, backend status, and one primary purple `Extract Samples` action. |
+| Left sidebar | Source/drop guidance, selected-hit/sample context, pipeline logs, and run history. |
+| Center workspace | Quiet waveform canvas, one custom transport row, and representative sample cards. |
+| Right sidebar | Stem, sensitivity, cluster count, exports, and collapsed advanced DSP/model controls. |
+| Bottom dock | Review/edit semantic supervision tools and raw tables in expandable panels. |
 
 ## Frontend implementation
 
@@ -96,7 +110,7 @@ The active UI uses Server-Sent Events through `GET /api/jobs/{job_id}/events` fo
 
 ## Remaining UI improvements
 
-- Add waveform zoom/pan while keeping the default view uncluttered.
+- Add waveform zoom/pan while keeping the fixed workstation layout uncluttered.
 - Add inline cluster merge/split/relabel workflows inside `Review & edit`.
 - Add A/B comparison between parameter runs.
 - Add downloadable timing report per job.

web/app.js

@@ -973,13 +973,67 @@ for (const id of ["sourcePreview", "stemAudio"]) {
 }
 
 const dropzone = $("dropzone");
+const globalDropOverlay = $("globalDropOverlay");
+let pageDragDepth = 0;
+
+function eventHasFiles(event) {
+  return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+
+function setDragActive(active) {
+  dropzone?.classList.toggle("dragging", Boolean(active));
+  globalDropOverlay?.classList.toggle("visible", Boolean(active));
+}
+
+function acceptDroppedFile(event) {
+  const file = event.dataTransfer?.files?.[0] ?? null;
+  if (file) setFile(file);
+}
+
 for (const eventName of ["dragenter", "dragover"]) {
-  dropzone.addEventListener(eventName, (event) => { event.preventDefault(); dropzone.classList.add("dragging"); });
+  dropzone.addEventListener(eventName, (event) => {
+    if (!eventHasFiles(event)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = "copy";
+    setDragActive(true);
+  });
 }
 for (const eventName of ["dragleave", "drop"]) {
-  dropzone.addEventListener(eventName, (event) => { event.preventDefault(); dropzone.classList.remove("dragging"); });
+  dropzone.addEventListener(eventName, (event) => {
+    if (!eventHasFiles(event)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setDragActive(false);
+  });
 }
-dropzone.addEventListener("drop", (event) => setFile(event.dataTransfer.files?.[0] ?? null));
+dropzone.addEventListener("drop", acceptDroppedFile);
+
+window.addEventListener("dragenter", (event) => {
+  if (!eventHasFiles(event)) return;
+  event.preventDefault();
+  pageDragDepth += 1;
+  setDragActive(true);
+});
+window.addEventListener("dragover", (event) => {
+  if (!eventHasFiles(event)) return;
+  event.preventDefault();
+  event.dataTransfer.dropEffect = "copy";
+  setDragActive(true);
+});
+window.addEventListener("dragleave", (event) => {
+  if (!eventHasFiles(event)) return;
+  pageDragDepth = Math.max(0, pageDragDepth - 1);
+  if (pageDragDepth === 0) setDragActive(false);
+});
+window.addEventListener("drop", (event) => {
+  if (!eventHasFiles(event)) return;
+  event.preventDefault();
+  pageDragDepth = 0;
+  setDragActive(false);
+  acceptDroppedFile(event);
+});
+window.addEventListener("blur", () => { pageDragDepth = 0; setDragActive(false); });
 window.addEventListener("resize", () => {
   const current = window.__lastOverview;
   if (current) drawWaveform(current);

web/index.html

@@ -7,16 +7,32 @@
     <link rel="stylesheet" href="/web/styles.css" />
   </head>
   <body>
+    <div id="globalDropOverlay" class="global-drop-overlay" aria-hidden="true">
+      <div>
+        <strong>Drop audio to load</strong>
+        <span>WAV, MP3, FLAC, AIFF, OGG, M4A</span>
+      </div>
+    </div>
+
     <div class="shell">
       <header class="topbar">
-        <label class="file-chip" id="dropzone" title="Drop audio here or click to browse">
-          <input id="fileInput" type="file" accept="audio/*,.wav,.mp3,.flac,.aiff,.ogg,.m4a" />
+        <div class="app-title">
           <span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>
-          <span class="file-copy">
-            <strong id="dropTitle">Choose an audio file</strong>
-            <small id="dropMeta">WAV, MP3, FLAC, AIFF, OGG, M4A</small>
+          <div>
+            <strong>Drum Sample Extractor</strong>
+            <small id="resultSummary">Load audio, tune sensitivity, extract clean drum hits.</small>
+          </div>
+        </div>
+
+        <label class="upload-chip" id="dropzone" title="Click to browse, or drop audio anywhere on the app">
+          <input id="fileInput" type="file" accept="audio/*,.wav,.mp3,.flac,.aiff,.ogg,.m4a" />
+          <span class="upload-button-face">Upload audio</span>
+          <span class="upload-copy">
+            <strong id="dropTitle">No file selected</strong>
+            <small id="dropMeta">Drop a file anywhere or click Upload audio</small>
           </span>
         </label>
+
         <div class="topbar-actions">
           <div class="backend-pill" aria-live="polite">
             <span class="status-dot" id="healthDot"></span>
@@ -26,56 +42,105 @@
         </div>
       </header>
 
-      <main class="app-layout">
-        <section class="wave-card panel" aria-label="Waveform overview">
-          <div class="wave-status-row">
-            <span id="jobPill" class="job-pill">idle</span>
-            <p id="resultSummary" class="status-text">Load audio, tune sensitivity, extract clean drum hits.</p>
-          </div>
-          <canvas id="waveform" class="waveform" height="420"></canvas>
-          <div class="transport-row" aria-label="Preview transport">
-            <button id="transportPlayButton" class="round-play" type="button" aria-label="Play preview">▶</button>
-            <span id="transportTime" class="transport-time">0:00 / 0:00</span>
-            <input id="transportSeek" class="transport-seek" type="range" min="0" max="1000" value="0" step="1" aria-label="Seek preview" />
-          </div>
-          <div id="downloads" class="downloads compact-downloads"></div>
-          <div class="hidden-audio-bank" aria-hidden="true">
-            <audio id="sourcePreview"></audio>
-            <audio id="stemAudio"></audio>
-            <audio id="reconAudio"></audio>
-            <audio id="hitAudio"></audio>
-            <audio id="sampleAudio"></audio>
-          </div>
+      <main class="workstation">
+        <aside class="sidebar left-sidebar" aria-label="Left tool sidebar">
+          <details class="tool-panel source-panel" open>
+            <summary><span>Source</span><small>Upload and status</small></summary>
+            <div class="drop-hint-card">
+              <strong>Upload button is in the top bar.</strong>
+              <span>Drag an audio file onto any part of the app to load it.</span>
+            </div>
+            <div class="job-status-card">
+              <span id="jobPill" class="job-pill">idle</span>
+              <small>Current extraction job</small>
+            </div>
+          </details>
+
+          <details class="tool-panel selection-panel" open>
+            <summary><span>Selection</span><small>Audition context</small></summary>
+            <article class="review-card">
+              <strong>Selected hit</strong>
+              <span id="selectedHitMeta">Click an onset marker or hit row to audition the detected slice.</span>
+            </article>
+            <article class="review-card">
+              <strong>Selected sample</strong>
+              <span id="selectedSampleMeta">Click a sample card to hear the representative sample.</span>
+            </article>
+          </details>
+
+          <details class="tool-panel progress-panel" open>
+            <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>
+          </details>
+
+          <details class="tool-panel history-panel">
+            <summary><span>Run history</span><small>Completed manifests</small></summary>
+            <button id="refreshHistoryButton" class="ghost-button full-width" type="button">Refresh history</button>
+            <div id="historyList" class="history-list"></div>
+          </details>
+        </aside>
+
+        <section class="center-workspace" aria-label="Waveform and extracted samples">
+          <section class="wave-card panel" aria-label="Waveform overview">
+            <canvas id="waveform" class="waveform" height="420"></canvas>
+            <div class="transport-row" aria-label="Preview transport">
+              <button id="transportPlayButton" class="round-play" type="button" aria-label="Play preview">▶</button>
+              <span id="transportTime" class="transport-time">0:00 / 0:00</span>
+              <input id="transportSeek" class="transport-seek" type="range" min="0" max="1000" value="0" step="1" aria-label="Seek preview" />
+            </div>
+            <div class="hidden-audio-bank" aria-hidden="true">
+              <audio id="sourcePreview"></audio>
+              <audio id="stemAudio"></audio>
+              <audio id="reconAudio"></audio>
+              <audio id="hitAudio"></audio>
+              <audio id="sampleAudio"></audio>
+            </div>
+          </section>
+
+          <section class="samples-section panel" aria-label="Extracted samples">
+            <div class="section-heading">
+              <h2>Extracted Samples <span id="sampleCountLabel">(0)</span></h2>
+              <small>Representative cards from the current run</small>
+            </div>
+            <div id="samplesGrid" class="sample-grid"></div>
+          </section>
         </section>
 
-        <aside class="control-card panel" aria-label="Extraction controls">
-          <div class="control-group">
-            <label>Stem
-              <select id="stem"></select>
-            </label>
-          </div>
+        <aside class="sidebar right-sidebar" aria-label="Right tool sidebar">
+          <details class="tool-panel control-card" open>
+            <summary><span>Extract</span><small>Core controls</small></summary>
+            <div class="control-group">
+              <label>Stem
+                <select id="stem"></select>
+              </label>
+            </div>
 
-          <div class="control-group sensitivity-group">
-            <label for="onset_delta">Sensitivity</label>
-            <input id="onset_delta" type="range" min="0.01" max="0.35" step="0.005" />
-            <div class="range-caption"><span>Low</span><span>High</span></div>
-          </div>
+            <div class="control-group sensitivity-group">
+              <label for="onset_delta">Sensitivity</label>
+              <input id="onset_delta" type="range" min="0.01" max="0.35" step="0.005" />
+              <div class="range-caption"><span>Low</span><span>High</span></div>
+            </div>
 
-          <div class="control-group">
-            <label>Cluster Count</label>
-            <div class="stepper">
-              <button id="clusterMinusButton" type="button" class="step-button" aria-label="Decrease cluster count">−</button>
-              <input id="target_max" type="number" min="0" max="256" step="1" aria-label="Cluster count" />
-              <button id="clusterPlusButton" type="button" class="step-button" aria-label="Increase cluster count">+</button>
+            <div class="control-group">
+              <label>Cluster Count</label>
+              <div class="stepper">
+                <button id="clusterMinusButton" type="button" class="step-button" aria-label="Decrease cluster count">−</button>
+                <input id="target_max" type="number" min="0" max="256" step="1" aria-label="Cluster count" />
+                <button id="clusterPlusButton" type="button" class="step-button" aria-label="Increase cluster count">+</button>
+              </div>
             </div>
-          </div>
+          </details>
 
-          <div class="primary-actions-stack">
-            <button id="exportStateButton" class="export-button" type="button" disabled>⇧ Export Samples</button>
-          </div>
+          <details class="tool-panel downloads-panel" open>
+            <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>
+            <button id="exportStateButton" class="export-button full-width" type="button" disabled>Export edited pack</button>
+          </details>
 
-          <details class="advanced-controls">
-            <summary>Advanced</summary>
+          <details class="tool-panel advanced-controls">
+            <summary><span>Advanced</span><small>Model and DSP settings</small></summary>
             <div class="preset-row">
               <button id="usePreviewButton" class="ghost-button" type="button">Online preview mode</button>
               <button id="useFastButton" class="ghost-button" type="button">Fast full-mix mode</button>
@@ -155,54 +220,12 @@
             <button id="clearCacheButton" class="ghost-button full-width" type="button">Clear cache</button>
           </details>
         </aside>
+      </main>
 
-        <section class="samples-section" aria-label="Extracted samples">
-          <div class="section-heading">
-            <h2>Extracted Samples <span id="sampleCountLabel">(0)</span></h2>
-          </div>
-          <div id="samplesGrid" class="sample-grid"></div>
-        </section>
-
-        <details class="review-workbench panel utility-panel">
-          <summary>
-            <span>Review & edit</span>
-            <small>Pipeline progress, run history, detailed hit rows, semantic editing, force-onset, and edited export.</small>
-          </summary>
-
-          <section class="review-strip">
-            <article class="review-card">
-              <strong>Selected hit</strong>
-              <span id="selectedHitMeta">Click an onset marker or hit row to audition the detected slice.</span>
-            </article>
-            <article class="review-card">
-              <strong>Selected sample</strong>
-              <span id="selectedSampleMeta">Click a sample card to hear the representative sample.</span>
-            </article>
-          </section>
-
-          <details class="panel progress-panel utility-panel" open>
-            <summary>
-              <span>Pipeline</span>
-              <small>Stage timings, logs, and streaming job progress</small>
-            </summary>
-            <div id="stageList" class="stage-list"></div>
-            <pre id="logs" class="logs" aria-live="polite"></pre>
-          </details>
-
-          <details class="panel history-panel utility-panel">
-            <summary>
-              <span>Run history</span>
-              <small>Completed manifests under .runs/</small>
-            </summary>
-            <button id="refreshHistoryButton" class="ghost-button" type="button">Refresh history</button>
-            <div id="historyList" class="history-list"></div>
-          </details>
-
-          <details class="panel supervision-panel utility-panel">
-            <summary>
-              <span>Interactive supervision</span>
-              <small>Move, suppress, restore, force-onset, explain, and export edited packs</small>
-            </summary>
+      <footer class="bottom-dock" aria-label="Bottom tool bar">
+        <details class="bottom-tool supervision-panel" open>
+          <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">
               <div>
                 <h3>Semantic edit state</h3>
@@ -215,7 +238,6 @@
               </div>
             </div>
             <div id="supervisionSummary" class="state-summary">No interactive state loaded.</div>
-            <div id="editedDownloads" class="downloads edited-downloads"></div>
             <div class="supervision-tools">
               <label>Target cluster
                 <select id="targetClusterSelect"></select>
@@ -223,11 +245,11 @@
               <button id="moveHitButton" class="secondary-button" type="button" disabled>Move selected hit</button>
               <button id="pullHitButton" class="secondary-button" type="button" disabled>Pull into new cluster</button>
               <button id="acceptHitButton" class="secondary-button" type="button" disabled>Accept hit</button>
-              <button id="favoriteHitButton" class="secondary-button" type="button" disabled>Favorite as representative</button>
-              <button id="suppressHitButton" class="secondary-button danger-button" type="button" disabled>Suppress as bleed</button>
-              <button id="restoreHitButton" class="secondary-button" type="button" disabled>Restore selected hit</button>
-              <button id="lockClusterButton" class="secondary-button" type="button" disabled>Lock target cluster</button>
-              <button id="explainClusterButton" class="secondary-button" type="button" disabled>Explain target cluster</button>
+              <button id="favoriteHitButton" class="secondary-button" type="button" disabled>Favorite</button>
+              <button id="suppressHitButton" class="secondary-button danger-button" type="button" disabled>Suppress</button>
+              <button id="restoreHitButton" class="secondary-button" type="button" disabled>Restore</button>
+              <button id="lockClusterButton" class="secondary-button" type="button" disabled>Lock cluster</button>
+              <button id="explainClusterButton" class="secondary-button" type="button" disabled>Explain</button>
             </div>
             <div class="supervision-grid">
               <article>
@@ -248,13 +270,12 @@
               </article>
             </div>
             <pre id="clusterExplanation" class="explanation empty">Select a cluster and click Explain.</pre>
-          </details>
+          </div>
+        </details>
 
-          <details class="panel utility-panel data-panel">
-            <summary>
-              <span>Detailed tables</span>
-              <small>Raw sample and detected-hit review rows</small>
-            </summary>
+        <details class="bottom-tool data-panel">
+          <summary><span>Tables</span><small>Raw sample and detected-hit rows</small></summary>
+          <div class="bottom-tool-content">
             <div class="result-columns">
               <section>
                 <h3>Representative samples</h3>
@@ -284,9 +305,9 @@
                 </div>
               </section>
             </div>
-          </details>
+          </div>
         </details>
-      </main>
+      </footer>
     </div>
     <script type="module" src="/web/app.js"></script>
   </body>

web/styles.css

@@ -1,29 +1,33 @@
 :root {
   color-scheme: light;
-  --bg: #f7f7f8;
+  --bg: #f6f6f8;
   --surface: #ffffff;
   --surface-soft: #fbfbfc;
-  --line: #e4e5e9;
-  --line-strong: #d4d6dd;
-  --muted: #8d929d;
-  --text: #25262b;
-  --text-soft: #4d5058;
+  --line: #e2e3e8;
+  --line-strong: #d1d3db;
+  --muted: #8a8f9b;
+  --text: #24252b;
+  --text-soft: #4f535d;
   --accent: #6d45ec;
   --accent-strong: #552bd8;
-  --accent-soft: #eee9ff;
-  --good: #6cae48;
+  --accent-soft: #f0ebff;
+  --good: #64a946;
   --bad: #d85867;
   --warn: #ef9343;
-  --shadow: 0 16px 42px rgba(18, 21, 30, .055);
+  --shadow: 0 14px 38px rgba(18, 21, 30, .055);
   --radius-xl: 18px;
   --radius-lg: 13px;
+  --topbar-h: 72px;
+  --bottom-h: 236px;
   font-synthesis-weight: none;
 }
 
 * { box-sizing: border-box; }
 html, body {
+  width: 100%;
+  height: 100%;
   margin: 0;
-  min-height: 100%;
+  overflow: hidden;
   background: var(--bg);
   color: var(--text);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
@@ -33,45 +37,87 @@ button { cursor: pointer; }
 button:disabled { opacity: .45; cursor: not-allowed; }
 code { color: var(--accent-strong); }
 
+.global-drop-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: none;
+  place-items: center;
+  background: rgba(246, 246, 248, .74);
+  backdrop-filter: blur(10px);
+  pointer-events: none;
+}
+.global-drop-overlay.visible { display: grid; }
+.global-drop-overlay div {
+  display: grid;
+  gap: 8px;
+  min-width: min(520px, calc(100vw - 48px));
+  padding: 36px;
+  border: 2px dashed rgba(109, 69, 236, .45);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, .92);
+  text-align: center;
+  box-shadow: var(--shadow);
+}
+.global-drop-overlay strong { font-size: 26px; letter-spacing: -.035em; }
+.global-drop-overlay span { color: var(--muted); }
+
 .shell {
-  width: min(100% - 74px, 1740px);
-  margin: 0 auto;
-  padding: 38px 0 48px;
+  width: 100%;
+  height: 100vh;
+  min-height: 720px;
+  display: grid;
+  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--bottom-h);
+  gap: 12px;
+  padding: 12px;
+  overflow: hidden;
 }
 
 .topbar {
-  display: flex;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(250px, 1fr) minmax(360px, 560px) auto;
   align-items: center;
-  justify-content: space-between;
-  gap: 28px;
-  margin-bottom: 34px;
+  gap: 14px;
+  padding: 0 4px;
 }
-.file-chip {
-  position: relative;
+.app-title {
+  min-width: 0;
   display: inline-flex;
   align-items: center;
-  gap: 24px;
-  min-width: min(620px, 100%);
-  cursor: pointer;
-  color: var(--text);
+  gap: 14px;
 }
-.file-chip input {
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: pointer;
+.app-title strong {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 19px;
+  line-height: 1.05;
+  letter-spacing: -.035em;
+  font-weight: 620;
+}
+.app-title small {
+  display: block;
+  margin-top: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+  font-size: 12px;
 }
-.file-chip.dragging .brand-mark,
-.file-chip:hover .brand-mark { transform: translateY(-1px); }
 .brand-mark {
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   gap: 4px;
   border-radius: 14px;
-  transition: transform .18s ease;
+  background: #fff;
+  border: 1px solid var(--line);
+  box-shadow: 0 3px 10px rgba(18, 21, 30, .035);
 }
 .brand-mark i {
   width: 4px;
@@ -79,32 +125,76 @@ code { color: var(--accent-strong); }
   background: #202125;
   display: block;
 }
-.brand-mark i:nth-child(1) { height: 16px; }
-.brand-mark i:nth-child(2) { height: 28px; }
-.brand-mark i:nth-child(3) { height: 38px; }
-.brand-mark i:nth-child(4) { height: 24px; }
-.brand-mark i:nth-child(5) { height: 12px; }
-.file-copy strong {
+.brand-mark i:nth-child(1) { height: 14px; }
+.brand-mark i:nth-child(2) { height: 25px; }
+.brand-mark i:nth-child(3) { height: 34px; }
+.brand-mark i:nth-child(4) { height: 22px; }
+.brand-mark i:nth-child(5) { height: 11px; }
+
+.upload-chip {
+  position: relative;
+  min-width: 0;
+  height: 58px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  padding: 7px 14px 7px 7px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, .88);
+  box-shadow: 0 6px 18px rgba(18, 21, 30, .04);
+  cursor: pointer;
+  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
+}
+.upload-chip:hover,
+.upload-chip.dragging {
+  border-color: rgba(109, 69, 236, .45);
+  box-shadow: 0 10px 26px rgba(109, 69, 236, .10);
+  transform: translateY(-1px);
+}
+.upload-chip input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.upload-button-face {
+  display: inline-grid;
+  place-items: center;
+  height: 42px;
+  padding: 0 16px;
+  border-radius: 11px;
+  background: #1f2025;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 760;
+  white-space: nowrap;
+}
+.upload-copy { min-width: 0; }
+.upload-copy strong {
   display: block;
-  max-width: 760px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 23px;
+  color: var(--text);
+  font-size: 13px;
   line-height: 1.1;
-  letter-spacing: -.035em;
-  font-weight: 540;
 }
-.file-copy small {
+.upload-copy small {
   display: block;
   margin-top: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--muted);
-  font-size: 12px;
+  font-size: 11px;
 }
 .topbar-actions {
   display: inline-flex;
   align-items: center;
-  gap: 16px;
+  justify-content: end;
+  gap: 12px;
 }
 .backend-pill {
   display: inline-flex;
@@ -112,7 +202,8 @@ code { color: var(--accent-strong); }
   gap: 7px;
   color: var(--muted);
   font-size: 11px;
-  opacity: .62;
+  opacity: .72;
+  white-space: nowrap;
 }
 .backend-pill strong { display: block; font-size: 11px; line-height: 1; }
 .backend-pill small { display: none; }
@@ -125,61 +216,119 @@ code { color: var(--accent-strong); }
 .status-dot.ok { background: var(--good); }
 .status-dot.bad { background: var(--bad); }
 .primary-button {
-  min-width: 252px;
+  min-width: 192px;
   border: 0;
-  border-radius: 8px;
-  padding: 19px 28px;
+  border-radius: 12px;
+  padding: 16px 22px;
   background: linear-gradient(135deg, #7048f5, #552bd8);
   color: #fff;
-  font-weight: 610;
-  font-size: 20px;
+  font-weight: 700;
+  font-size: 16px;
   box-shadow: 0 14px 34px rgba(85, 43, 216, .20);
   transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
 }
 .primary-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(85, 43, 216, .24); }
-.primary-button span { margin-right: 9px; }
+.primary-button span { margin-right: 8px; }
 
-.app-layout {
+.workstation {
+  min-height: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 356px;
-  grid-template-areas:
-    "wave controls"
-    "samples samples"
-    "workbench workbench";
-  gap: 28px;
-  align-items: start;
-}
-.panel {
+  grid-template-columns: 292px minmax(0, 1fr) 332px;
+  gap: 12px;
+  overflow: hidden;
+}
+.sidebar {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+.center-workspace {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: minmax(270px, 1fr) minmax(172px, 220px);
+  gap: 12px;
+  overflow: hidden;
+}
+.panel,
+.tool-panel,
+.bottom-tool {
   border: 1px solid var(--line);
   border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, .88);
+  background: rgba(255, 255, 255, .90);
   box-shadow: var(--shadow);
 }
-.wave-card {
-  grid-area: wave;
-  position: relative;
-  overflow: hidden;
-  min-height: 574px;
+.tool-panel {
+  flex: 0 0 auto;
+  padding: 12px;
 }
-.control-card {
-  grid-area: controls;
-  padding: 31px 29px 28px;
-  min-height: 574px;
+.tool-panel[open] { padding-bottom: 14px; }
+.tool-panel > summary,
+.bottom-tool > summary {
+  min-height: 38px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  gap: 2px;
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
 }
-.samples-section { grid-area: samples; margin-top: 16px; }
-.review-workbench { grid-area: workbench; }
-
-.wave-status-row {
+.tool-panel > summary::-webkit-details-marker,
+.bottom-tool > summary::-webkit-details-marker { display: none; }
+.tool-panel > summary span,
+.bottom-tool > summary span {
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 760;
+  letter-spacing: -.02em;
+}
+.tool-panel > summary small,
+.bottom-tool > summary small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 520;
+}
+.tool-panel > summary::after,
+.bottom-tool > summary::after {
+  content: "+";
   position: absolute;
-  z-index: 2;
-  top: 14px;
-  left: 18px;
   right: 18px;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 16px;
-  pointer-events: none;
+  color: var(--muted);
+  font-weight: 760;
+}
+.tool-panel,
+.bottom-tool { position: relative; }
+.tool-panel[open] > summary::after,
+.bottom-tool[open] > summary::after { content: "–"; }
+
+.drop-hint-card,
+.job-status-card,
+.review-card {
+  margin-top: 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: var(--surface-soft);
+  padding: 12px;
+}
+.drop-hint-card strong,
+.drop-hint-card span,
+.review-card strong,
+.review-card span,
+.job-status-card small { display: block; }
+.drop-hint-card span,
+.review-card span,
+.job-status-card small {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.35;
 }
 .job-pill {
   display: inline-flex;
@@ -193,50 +342,45 @@ code { color: var(--accent-strong); }
   font-size: 11px;
   backdrop-filter: blur(10px);
 }
-.status-text {
-  margin: 0;
-  max-width: 560px;
-  color: rgba(77, 80, 88, .72);
-  text-align: right;
-  font-size: 12px;
-  line-height: 1.3;
-  background: rgba(255, 255, 255, .72);
-  border: 1px solid rgba(228, 229, 233, .7);
-  border-radius: 999px;
-  padding: 6px 10px;
-  backdrop-filter: blur(10px);
+
+.wave-card {
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) 72px;
 }
 .waveform {
   display: block;
   width: 100%;
-  height: 430px;
-  min-height: 430px;
+  height: 100%;
+  min-height: 0;
   background: linear-gradient(180deg, #fff, #fbfbfc);
   cursor: crosshair;
 }
 .transport-row {
   display: grid;
-  grid-template-columns: 54px 112px minmax(0, 1fr);
-  gap: 24px;
+  grid-template-columns: 48px 100px minmax(0, 1fr);
+  gap: 18px;
   align-items: center;
-  padding: 0 29px 28px;
+  padding: 10px 22px 18px;
 }
 .round-play {
-  width: 54px;
-  height: 54px;
+  width: 48px;
+  height: 48px;
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: #fff;
   color: #1f2024;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 1;
   box-shadow: 0 2px 8px rgba(18, 21, 30, .035);
 }
 .transport-time {
   color: #6d717b;
-  font-size: 18px;
+  font-size: 15px;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
@@ -270,46 +414,108 @@ code { color: var(--accent-strong); }
 }
 .transport-seek:hover::-moz-range-thumb { opacity: 1; }
 .hidden-audio-bank { display: none; }
-.downloads {
+
+.samples-section {
+  min-height: 0;
+  overflow: hidden;
+  padding: 14px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.section-heading {
   display: flex;
-  flex-wrap: wrap;
-  gap: 9px;
+  align-items: end;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 12px;
 }
-.compact-downloads {
-  padding: 0 29px 24px;
-  margin-top: -10px;
-  min-height: 30px;
+h2 { margin: 0; font-size: 17px; letter-spacing: -.035em; font-weight: 620; }
+.section-heading small { color: var(--muted); font-size: 12px; }
+.sample-grid {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  grid-auto-rows: 146px;
+  gap: 12px;
+  overflow: auto;
+  padding-right: 4px;
+  scrollbar-width: thin;
 }
-.downloads:empty { display: none; }
-.downloads a, .table-wrap a {
-  color: var(--accent-strong);
-  text-decoration: none;
-  font-weight: 680;
-  background: var(--accent-soft);
-  border: 1px solid rgba(109, 69, 236, .16);
+.sample-card {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) 54px;
+  min-height: 0;
+  border: 1px solid var(--line);
+  border-top: 4px solid var(--accent);
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 8px 20px rgba(18, 21, 30, .035);
+  overflow: hidden;
+  text-align: left;
+  padding: 0;
+}
+.sample-card:hover { box-shadow: 0 12px 28px rgba(18, 21, 30, .07); }
+.sample-card.selected { outline: 3px solid rgba(109, 69, 236, .14); }
+.sample-wave {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #fff;
+}
+.sample-card-footer {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 9px;
+  align-items: center;
+  padding: 9px 10px;
+}
+.play-dot {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
   border-radius: 999px;
-  padding: 7px 11px;
-  font-size: 12px;
+  background: #fff;
+  border: 1px solid var(--line);
+  color: var(--text);
+  font-size: 11px;
+}
+.sample-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 650;
+  letter-spacing: -.02em;
+}
+.sample-meta {
+  display: none;
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 500;
 }
+.empty { color: var(--muted); }
 
 label {
   display: block;
   color: var(--text-soft);
-  font-size: 20px;
-  font-weight: 500;
-  letter-spacing: -.026em;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: -.01em;
 }
-.control-group { margin-bottom: 36px; }
+.control-group { margin-top: 12px; }
 input, select {
   width: 100%;
-  margin-top: 13px;
+  margin-top: 8px;
   border: 1px solid var(--line);
-  border-radius: 9px;
-  padding: 15px 18px;
+  border-radius: 10px;
+  padding: 10px 11px;
   color: var(--text);
   background: #fff;
   outline: none;
-  font-size: 18px;
+  font-size: 13px;
 }
 select { appearance: auto; }
 input:focus, select:focus {
@@ -326,16 +532,16 @@ input[type="range"] {
 }
 input[type="range"]::-webkit-slider-thumb {
   appearance: none;
-  width: 26px;
-  height: 26px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   background: var(--accent);
   border: 0;
   box-shadow: 0 6px 18px rgba(109, 69, 236, .26);
 }
 input[type="range"]::-moz-range-thumb {
-  width: 26px;
-  height: 26px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   background: var(--accent);
   border: 0;
@@ -344,294 +550,189 @@ input[type="range"]::-moz-range-thumb {
 .range-caption {
   display: flex;
   justify-content: space-between;
-  margin-top: 14px;
+  margin-top: 7px;
   color: var(--muted);
-  font-size: 16px;
+  font-size: 11px;
 }
 .stepper {
   display: grid;
-  grid-template-columns: 58px minmax(0, 1fr) 58px;
-  margin-top: 13px;
-  border: 1px solid var(--line);
-  border-radius: 9px;
-  overflow: hidden;
-  background: #fff;
-}
-.stepper input {
-  margin: 0;
-  border: 0;
-  border-left: 1px solid var(--line);
-  border-right: 1px solid var(--line);
-  border-radius: 0;
-  text-align: center;
-  font-size: 20px;
-  padding: 14px 8px;
-}
-.step-button {
-  border: 0;
-  border-radius: 0;
-  background: #fff;
-  color: var(--text);
-  font-size: 25px;
-  line-height: 1;
+  grid-template-columns: 40px minmax(0, 1fr) 40px;
+  gap: 8px;
+  align-items: center;
 }
-.primary-actions-stack { display: grid; gap: 14px; margin-top: 42px; }
-.export-button, .secondary-button, .ghost-button {
+.stepper input { text-align: center; }
+.step-button,
+.ghost-button,
+.secondary-button,
+.export-button,
+.mini-button {
   border: 1px solid var(--line-strong);
-  border-radius: 9px;
+  border-radius: 10px;
   background: #fff;
   color: var(--text-soft);
-  font-weight: 580;
-  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease;
+  font-weight: 700;
 }
+.step-button { height: 38px; margin-top: 8px; font-size: 18px; }
+.ghost-button,
+.secondary-button,
 .export-button {
-  min-height: 64px;
-  padding: 16px 18px;
-  font-size: 18px;
+  padding: 9px 11px;
+  font-size: 12px;
 }
-.ghost-button, .secondary-button { padding: 10px 13px; font-size: 14px; }
-button:hover:not(:disabled) { transform: translateY(-1px); }
-.ghost-button.active, .secondary-button.active {
-  border-color: rgba(108, 174, 72, .55);
-  background: rgba(108, 174, 72, .10);
-  color: #3f702b;
+.ghost-button:hover:not(:disabled),
+.secondary-button:hover:not(:disabled),
+.step-button:hover:not(:disabled) { border-color: rgba(109, 69, 236, .34); color: var(--accent-strong); }
+.export-button {
+  margin-top: 10px;
+  border: 0;
+  background: #1f2025;
+  color: #fff;
 }
+.full-width { width: 100%; }
 .danger-button { color: var(--bad); }
-.advanced-controls {
-  margin-top: 28px;
-  border-top: 1px solid var(--line);
-  padding-top: 17px;
-}
-.advanced-controls summary,
-.utility-panel summary {
-  cursor: pointer;
-  color: var(--text-soft);
-  font-weight: 650;
-}
 .preset-row {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 10px;
-  margin: 16px 0;
+  gap: 8px;
+  margin-top: 10px;
 }
 .control-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-.compact-controls label {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: .01em;
-}
-.compact-controls input, .compact-controls select {
-  padding: 10px 11px;
-  font-size: 13px;
-  margin-top: 7px;
+  grid-template-columns: 1fr;
+  gap: 9px;
+  margin-top: 10px;
 }
 .toggles {
   display: grid;
-  gap: 10px;
-  margin: 16px 0 0;
+  gap: 8px;
+  margin: 12px 0;
 }
 .toggles label {
-  display: flex;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
   align-items: center;
   gap: 8px;
-  font-size: 13px;
-  font-weight: 630;
+  font-size: 12px;
+  color: var(--text-soft);
 }
 .toggles input { width: auto; margin: 0; }
-.full-width { width: 100%; margin-top: 16px; }
-
-.section-heading {
+.downloads {
   display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 20px;
-  margin: 0 8px 20px;
-}
-h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; font-weight: 540; }
-.sample-grid {
-  display: grid;
-  grid-template-columns: repeat(8, minmax(135px, 1fr));
-  gap: 34px;
-}
-.sample-card {
-  display: grid;
-  grid-template-rows: 132px 72px;
-  min-height: 204px;
-  border: 1px solid var(--line);
-  border-top: 4px solid var(--accent);
-  border-radius: 9px;
-  background: #fff;
-  box-shadow: 0 9px 23px rgba(18, 21, 30, .035);
-  overflow: hidden;
-  text-align: left;
-  padding: 0;
-}
-.sample-card:hover { box-shadow: 0 14px 34px rgba(18, 21, 30, .07); }
-.sample-card.selected { outline: 3px solid rgba(109, 69, 236, .14); }
-.sample-wave {
-  width: 100%;
-  height: 132px;
-  display: block;
-  background: #fff;
-}
-.sample-card-footer {
-  display: grid;
-  grid-template-columns: 44px minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
-  padding: 13px 13px 15px;
-}
-.play-dot {
-  width: 42px;
-  height: 42px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: #fff;
-  border: 1px solid var(--line);
-  color: var(--text);
-  font-size: 13px;
-}
-.sample-name {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 17px;
-  font-weight: 500;
-  letter-spacing: -.02em;
-}
-.sample-meta {
-  display: none;
-  margin-top: 4px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 500;
-}
-.empty { color: var(--muted); }
-
-.review-workbench {
-  padding: 18px 20px;
+  flex-wrap: wrap;
+  gap: 8px;
   margin-top: 10px;
 }
-.utility-panel {
-  padding: 18px 20px;
-}
-.utility-panel > summary,
-.review-workbench > summary {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 4px;
-  list-style: none;
-}
-.utility-panel > summary::-webkit-details-marker,
-.review-workbench > summary::-webkit-details-marker { display: none; }
-.utility-panel > summary span,
-.review-workbench > summary span { font-size: 17px; color: var(--text); }
-.utility-panel > summary small,
-.review-workbench > summary small { color: var(--muted); font-weight: 500; }
-.review-workbench > * + * { margin-top: 18px; }
-.review-strip {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 18px;
-}
-.review-card {
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  background: var(--surface-soft);
-  padding: 16px;
+.downloads:empty { display: none; }
+.downloads a, .table-wrap a {
+  color: var(--accent-strong);
+  text-decoration: none;
+  font-weight: 760;
+  background: var(--accent-soft);
+  border: 1px solid rgba(109, 69, 236, .16);
+  border-radius: 999px;
+  padding: 7px 10px;
+  font-size: 11px;
 }
-.review-card strong, .review-card span { display: block; }
-.review-card span { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.4; }
 
 .stage-list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-  gap: 10px;
-  margin-top: 16px;
+  gap: 8px;
+  margin-top: 10px;
 }
 .stage {
   display: grid;
-  grid-template-columns: 20px 1fr auto;
-  gap: 10px;
+  grid-template-columns: 14px minmax(0, 1fr) auto;
+  gap: 8px;
   align-items: center;
-  padding: 12px;
+  padding: 9px;
   border: 1px solid var(--line);
-  border-radius: 14px;
+  border-radius: 12px;
   background: var(--surface-soft);
 }
-.stage .badge { width: 14px; height: 14px; border-radius: 999px; background: #d7d9e1; }
+.stage .badge { width: 10px; height: 10px; border-radius: 999px; background: #d7d9e1; }
 .stage.running .badge { background: var(--accent); box-shadow: 0 0 0 5px rgba(109, 69, 236, .12); }
 .stage.done .badge { background: var(--good); }
 .stage.error .badge { background: var(--bad); }
-.stage strong { display: block; font-size: 13px; color: var(--text); }
-.stage small { display: block; color: var(--muted); margin-top: 2px; }
-.stage time { color: var(--text-soft); font-variant-numeric: tabular-nums; }
+.stage strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text); }
+.stage small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); margin-top: 2px; font-size: 11px; }
+.stage time { color: var(--text-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
 .logs {
-  min-height: 110px;
-  max-height: 240px;
+  min-height: 88px;
+  max-height: 156px;
   overflow: auto;
   border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 14px;
-  margin: 14px 0 0;
+  border-radius: 12px;
+  padding: 10px;
+  margin: 10px 0 0;
   background: #fbfbfc;
   color: #4f535d;
-  font-size: 12px;
-  line-height: 1.5;
+  font-size: 11px;
+  line-height: 1.45;
 }
 .history-list, .compact-list {
   display: grid;
-  gap: 10px;
-  margin-top: 14px;
+  gap: 8px;
+  margin-top: 10px;
 }
 .history-row, .compact-row, .suggestion-row, .log-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto auto;
-  gap: 12px;
+  gap: 8px;
   align-items: center;
   width: 100%;
   border: 1px solid var(--line);
-  border-radius: 14px;
+  border-radius: 12px;
   background: #fff;
-  padding: 12px;
+  padding: 10px;
   text-align: left;
 }
 .compact-row, .suggestion-row, .log-row { grid-template-columns: minmax(0, 1fr) auto; }
-.history-row strong, .compact-row strong, .suggestion-row strong, .log-row strong { display: block; color: var(--text); }
-.history-row small, .compact-row small, .suggestion-row small, .log-row small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.35; }
+.history-row strong, .compact-row strong, .suggestion-row strong, .log-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 12px; }
+.history-row small, .compact-row small, .suggestion-row small, .log-row small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.35; font-size: 11px; }
 .compact-row.locked { border-color: rgba(109, 69, 236, .35); background: #fbf9ff; }
 .compact-row.suppressed, tr.suppressed { opacity: .55; }
-.row-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
+.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
 .mini-button {
-  border: 1px solid var(--line-strong);
   border-radius: 999px;
-  background: #fff;
-  color: var(--text-soft);
-  padding: 6px 10px;
-  font-size: 12px;
-  font-weight: 650;
+  padding: 5px 8px;
+  font-size: 11px;
+}
+
+.bottom-dock {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
+  gap: 12px;
+  overflow: hidden;
+}
+.bottom-tool {
+  min-height: 0;
+  overflow: hidden;
+  padding: 12px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.bottom-tool:not([open]) { display: block; }
+.bottom-tool-content {
+  min-height: 0;
+  overflow: auto;
+  padding-top: 8px;
+  scrollbar-width: thin;
 }
 .supervision-header {
   display: flex;
   justify-content: space-between;
-  gap: 20px;
+  gap: 14px;
   align-items: flex-start;
-  margin-top: 16px;
 }
-.supervision-header h3, .result-columns h3 { margin: 0; }
-.subtle { color: var(--muted); font-size: 13px; line-height: 1.45; }
+.supervision-header h3, .result-columns h3 { margin: 0; font-size: 14px; }
+.subtle { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 4px 0 0; }
 .supervision-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
 .state-summary {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin: 14px 0;
+  margin: 10px 0;
 }
 .state-summary span {
   border: 1px solid var(--line);
@@ -639,93 +740,120 @@ h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; font-weight: 540; }
   background: var(--surface-soft);
   padding: 6px 10px;
   color: var(--text-soft);
-  font-size: 12px;
+  font-size: 11px;
 }
 .supervision-tools {
   display: grid;
-  grid-template-columns: minmax(220px, 1fr) repeat(4, auto);
-  gap: 10px;
+  grid-template-columns: minmax(180px, 1fr) repeat(4, auto);
+  gap: 8px;
   align-items: end;
-  margin-top: 14px;
+  margin-top: 10px;
 }
-.supervision-tools label { font-size: 13px; font-weight: 700; }
 .supervision-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-  margin-top: 18px;
+  grid-template-columns: repeat(4, minmax(210px, 1fr));
+  gap: 10px;
+  margin-top: 12px;
 }
 .supervision-grid article {
+  min-height: 120px;
   border: 1px solid var(--line);
-  border-radius: 16px;
-  padding: 14px;
+  border-radius: 14px;
+  padding: 10px;
   background: var(--surface-soft);
+  overflow: auto;
 }
-.supervision-grid h4 { margin: 0 0 10px; }
+.supervision-grid h4 { margin: 0 0 8px; font-size: 12px; }
 .explanation {
-  margin: 18px 0 0;
-  max-height: 360px;
+  margin: 12px 0 0;
+  max-height: 160px;
   overflow: auto;
   border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 14px;
+  border-radius: 12px;
+  padding: 10px;
   background: #fbfbfc;
-  font-size: 12px;
+  font-size: 11px;
 }
-.edited-downloads { padding: 0; }
-
 .result-columns {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  gap: 20px;
-  margin-top: 16px;
+  gap: 12px;
 }
 .table-wrap {
   overflow: auto;
   border: 1px solid var(--line);
-  border-radius: 16px;
-  margin-top: 12px;
+  border-radius: 12px;
+  margin-top: 8px;
   background: #fff;
 }
-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+table { width: 100%; border-collapse: collapse; font-size: 12px; }
 th, td {
   text-align: left;
-  padding: 10px 12px;
+  padding: 8px 10px;
   border-bottom: 1px solid var(--line);
   white-space: nowrap;
 }
-th { color: var(--muted); font-weight: 700; background: var(--surface-soft); }
+th { color: var(--muted); font-weight: 760; background: var(--surface-soft); }
 tr.selected { background: #f6f2ff; }
 tr.low-confidence { background: #fff8ed; }
 tr:last-child td { border-bottom: 0; }
 
 @media (max-width: 1180px) {
-  .shell { width: min(100% - 34px, 1740px); }
-  .app-layout {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "wave"
-      "controls"
-      "samples"
-      "workbench";
-  }
-  .control-card { min-height: auto; }
-  .sample-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
-}
-@media (max-width: 760px) {
-  .shell { width: min(100% - 22px, 1740px); padding-top: 18px; }
-  .topbar { align-items: stretch; flex-direction: column; gap: 16px; }
-  .topbar-actions { justify-content: space-between; }
-  .primary-button { width: 100%; min-width: 0; }
+  :root { --bottom-h: 244px; }
+  .shell { min-height: 650px; }
+  .topbar { grid-template-columns: minmax(180px, 1fr) minmax(260px, 420px) auto; }
   .backend-pill { display: none; }
-  .file-copy strong { font-size: 19px; }
-  .waveform { height: 320px; min-height: 320px; }
-  .wave-status-row { position: static; padding: 14px 14px 0; }
-  .status-text { display: none; }
-  .transport-row { grid-template-columns: 48px 92px 1fr; gap: 12px; padding: 0 18px 20px; }
-  .round-play { width: 48px; height: 48px; }
-  .transport-time { font-size: 14px; }
-  .review-strip, .supervision-grid { grid-template-columns: 1fr; }
-  .supervision-tools { grid-template-columns: 1fr; }
-  .control-grid { grid-template-columns: 1fr; }
+  .workstation { grid-template-columns: 248px minmax(0, 1fr) 286px; }
+  .supervision-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
+}
+@media (max-width: 900px) {
+  :root { --topbar-h: 134px; --bottom-h: 250px; }
+  .shell { padding: 10px; }
+  .topbar { grid-template-columns: 1fr; gap: 8px; }
+  .topbar-actions { justify-content: stretch; }
+  .primary-button { flex: 1; }
+  .workstation { grid-template-columns: 1fr; grid-template-rows: 0 minmax(0, 1fr) 0; }
+  .left-sidebar, .right-sidebar { display: none; }
+  .center-workspace { grid-template-rows: minmax(250px, 1fr) 170px; }
+  .bottom-dock { grid-template-columns: 1fr; }
+  .data-panel { display: none; }
+}
+
+/* Final control-specific overrides after the generic form styles. */
+.upload-chip input {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+}
+.transport-row .transport-seek {
+  appearance: none;
+  height: 2px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: #d9dbe2;
+}
+.transport-row .transport-seek::-webkit-slider-thumb {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 0;
+  opacity: 0;
+  box-shadow: none;
+}
+.transport-row .transport-seek:hover::-webkit-slider-thumb { opacity: 1; }
+.transport-row .transport-seek::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 0;
+  opacity: 0;
+  box-shadow: none;
 }
+.transport-row .transport-seek:hover::-moz-range-thumb { opacity: 1; }