feat: align default ui with reference layout

README.md

@@ -39,7 +39,7 @@ Implemented:
   - event log,
   - suggestions,
   - undo stack.
-- Minimal waveform-first UI inspired by dedicated sample-extractor hardware/software: compact top bar, large waveform workspace, right-side core controls, sample-card grid, and collapsible advanced panels.
+- 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.
 - Supervision UI:
   - selected-hit actions,
   - move hit to cluster,
@@ -84,7 +84,7 @@ uvicorn app:app --host 0.0.0.0 --port 7860
 
 Open `http://127.0.0.1:7860`.
 
-For fast iteration, set:
+For fast iteration, open `Advanced`, then use `Fast full-mix mode` or set:
 
 - `Stem = all`
 - `Clustering mode = online_preview`
@@ -154,7 +154,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 light waveform-first UI, sample-card grid, hit review, add-onset mode, edited export, and supervision panel |
+| `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 |
 | `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

@@ -12,13 +12,13 @@ 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 | Drag/drop audio upload | Implemented | Uses multipart upload to `POST /api/jobs`. |
-| UI | Source preview | Implemented | Browser `<audio>` preview before extraction. |
+| 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. |
 | 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. |
 | UI | Run history browser | Implemented | Lists completed `.runs/*/output/manifest.json` entries and reloads results. |
-| UI | Hit and sample audition | Implemented | Dedicated players for selected hit slices and representative sample WAVs. |
+| UI | Hit and sample audition | Implemented | Click-to-audition via hidden audio elements keeps the default screen clean. |
 | API | Health/config | Implemented | `GET /api/health`, `GET /api/config`. |
 | API | Job creation/status | Implemented | `POST /api/jobs`, `GET /api/jobs/{id}`. |
 | API | SSE job events | Implemented | `GET /api/jobs/{id}/events` streams job snapshots until complete/error. |
@@ -92,9 +92,10 @@ Turn an input audio file into a practical drum sample pack: detected hits, group
 
 Status: implemented.
 
-- Light, minimal, waveform-first interface matching the supplied reference direction.
-- Compact top bar with file selector, backend status, and primary extract action.
-- Main waveform card with colored onset markers and click-to-select / force-onset behavior.
-- Right-side core-control card for stem, sensitivity, cluster count, edited export, and fast modes.
-- Collapsible advanced controls keep detailed DSP/model parameters available without cluttering the main flow.
-- Extracted samples render as auditionable cards with waveform thumbnails; raw tables remain available in a collapsible detail panel.
+- Light, minimal, waveform-first interface closely aligned with the supplied reference composition.
+- Compact top file selector plus one primary purple extract action.
+- Quiet main waveform card with colored onset markers and click-to-select / force-onset behavior.
+- One custom preview transport row instead of multiple native audio players.
+- 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.

docs/PROGRESS.md

@@ -210,3 +210,33 @@ Validation performed in this pass:
 Outcome:
 
 The app now looks and behaves more like a focused sample-extraction tool instead of a generic control dashboard while keeping the advanced review/supervision functionality available below the main workflow.
+
+
+## Pass 6: minimal waveform-first UI
+
+Completed in this pass:
+
+1. Reworked the frontend visual language from a dense workstation dashboard into a light waveform-first interface.
+2. Added the top file identity bar and primary purple extraction action.
+3. Promoted the waveform and extracted sample cards as the default workflow.
+4. Moved advanced controls and power-user tools into collapsible areas.
+
+Outcome:
+
+The app matched the general direction of the supplied reference image, but still had visible complexity: separate audio players, a waveform header, fast-mode buttons in the right card, and multiple utility panels visible in the main page flow.
+
+## Pass 7: reference-alignment hardening
+
+Completed in this pass:
+
+1. Removed the visible waveform header and made the waveform card visually quiet.
+2. Added a single custom transport row with play, elapsed/total time, and seek line.
+3. Hid native source/stem/reconstruction/hit/sample audio elements from the default layout while preserving playback behavior.
+4. Moved `Online preview mode` and `Fast full-mix mode` into the collapsed `Advanced` panel.
+5. Collapsed pipeline, run history, supervision, and detailed tables into one `Review & edit` workbench below the sample cards.
+6. Simplified sample cards to thumbnail waveform, play affordance, and label-first presentation.
+7. Updated docs to distinguish visual-reference work from remaining interaction-depth work.
+
+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.

docs/REMAINING_WORK.md

@@ -8,13 +8,12 @@ The project is now a usable extraction workstation, not a complete interactive s
 
 ## Highest-priority remaining gaps
 
-1. **Waveform editing**: add onset adjustment, delete/add hit, and rerun-from-edited-onsets without redoing Demucs.
-2. **Cluster editing**: allow merge, split, relabel, and manual reassignment of hits.
-3. **Edited re-export**: regenerate samples/MIDI/ZIP from edited hit/cluster state without rerunning Demucs or onset detection.
-4. **Run comparison**: compare two manifests side-by-side for parameter tuning.
-5. **Lower-level progress**: expose internal Demucs/clustering progress where libraries make that possible.
-6. **Frontend engineering hardening**: migrate the frontend to TypeScript after the UX stabilizes and add browser-level tests.
-7. **Benchmark panel**: add an in-app benchmark view that can run synthetic fixtures and compare parameter profiles.
+1. **Cluster editing**: allow merge, split, relabel, and manual reassignment of groups from the `Review & edit` workbench.
+2. **Waveform editing depth**: add onset drag/shift, hit trim boundaries, and rerun-from-edited-onsets without redoing Demucs.
+3. **Run comparison**: compare two manifests side-by-side for parameter tuning.
+4. **Lower-level progress**: expose internal Demucs/clustering progress where libraries make that possible.
+5. **Frontend engineering hardening**: migrate the frontend to TypeScript after the UX stabilizes and add browser-level tests.
+6. **Benchmark panel**: add an in-app benchmark view that can run synthetic fixtures and compare parameter profiles.
 
 ## Known constraints
 
@@ -75,4 +74,4 @@ Highest-priority remaining work now:
 
 ## UI status note
 
-The minimal waveform-first restyle is complete. Remaining UI work is now interaction depth and engineering hardening, not matching the supplied visual direction: browser tests, TypeScript/Vite migration, edited-vs-original comparison, and richer cluster merge/split/relabel workflows.
+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.

docs/TASKS.md

@@ -87,11 +87,10 @@ Last updated: 2026-05-12
 | Task | Status | Notes |
 |---|---|---|
 | Restyle web UI to supplied minimal waveform-first reference | Done | Light theme, top-bar primary action, large waveform, compact right controls, sample-card grid, collapsible advanced/power panels. |
+| Close remaining reference-alignment gaps | Done | Removed waveform header, added one custom transport row, moved fast modes into Advanced, collapsed power tools into Review & edit, hid visible audition players. |
 
 ## Latest validation tasks
 
-- [x] `python3 -m py_compile app.py pipeline_runner.py sample_extractor.py supervised_state.py scripts/*.py`
+- [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_sse_and_review_hits.py`
-- [x] `python3 scripts/test_interactive_supervision.py`
-- [x] `python3 scripts/test_supervised_export_and_force_onset.py`
+- [x] `python3 scripts/test_api_job.py`

docs/UI_REPLACEMENT.md

@@ -8,41 +8,48 @@ The active interface is a custom browser UI served from `web/` by the FastAPI ap
 
 ## UX goals
 
-1. Make the process feel like a sample-extraction workstation, not a generic notebook form.
-2. Keep upload, controls, pipeline status, logs, waveform review, audio previews, downloads, run history, and sample rows visible without tab hunting.
-3. Show stage timing as a first-class result, because extraction quality and speed tradeoffs matter.
-4. Make `stem=all` obvious for fast iteration when Demucs is unnecessary.
-5. Make `online_preview` obvious as the near-realtime clustering path.
+1. Match the supplied minimal reference image as the default view: file identity, one purple extract action, large waveform, compact right controls, and sample cards.
+2. Keep the first screen focused on extraction and audition, not pipeline/debug/editor internals.
+3. Preserve advanced workstation features behind a single secondary `Review & edit` workbench.
+4. Keep stage timing, logs, run history, and semantic supervision available without dominating the default layout.
+5. Make `stem=all` and `online_preview` available as advanced presets instead of primary controls.
 6. Keep the frontend deployable without a JavaScript build step until the interaction model stabilizes.
 
 
 ## Pass 6 visual simplification
 
-The UI has been restyled to match the supplied minimal reference direction:
+The UI was first restyled to the supplied minimal reference direction:
 
 - light native-feeling canvas instead of the previous dark dashboard;
 - compact top bar with file selector/status and one primary purple `Extract Samples` action;
 - large waveform-first workspace with colored lollipop onset markers;
-- right-side control card for the primary extraction decisions: stem, sensitivity, cluster count, edited export, fast modes;
+- right-side control card for the primary extraction decisions;
 - advanced DSP/model parameters moved into a collapsible panel;
-- representative samples rendered as auditionable cards with waveform thumbnails instead of forcing the table to be the primary view;
-- pipeline, run history, supervision, and raw tables kept available as collapsible utility panels so power features remain reachable without dominating the first screen.
+- representative samples rendered as auditionable cards with waveform thumbnails;
+- pipeline, run history, supervision, and raw tables kept available as collapsible utility panels.
 
-This pass intentionally keeps the no-build frontend architecture. The goal was to simplify the product surface without destabilizing the backend/API or the supervised-editing flow.
+## Pass 7 reference-alignment hardening
+
+This pass closed the visual fidelity gaps from the previous approximation:
+
+- removed the visible waveform header so the canvas is quiet like the reference image;
+- replaced separate native stem/reconstruction audio controls with one minimal transport row: play button, time, and progress line;
+- moved fast-mode buttons into `Advanced` so the right card now exposes only `Stem`, `Sensitivity`, `Cluster Count`, and `Export Samples`;
+- collapsed pipeline/history/supervision/tables into one `Review & edit` workbench below the sample cards;
+- hid selected-hit/sample audio elements from the default layout while preserving click-to-audition behavior;
+- tightened card spacing, border radii, font scale, waveform height, and sample-card proportions to better match the supplied image.
+
+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.
 
 ## UI structure
 
 | Area | Purpose |
 |---|---|
-| Hero/status | Backend readiness and product framing. |
-| Source panel | Drag/drop upload and source audio preview. |
-| Controls panel | Stem, onset, clustering, MIDI, synthesis, and disk-cache parameters. |
-| Pipeline panel | Stage statuses, durations, and logs. |
-| Run history panel | Loads completed manifests from `.runs/`. |
-| Waveform workspace | Summary, waveform/onsets, stem/reconstruction audio, and downloads. |
-| Core control card | Stem, sensitivity, cluster count, fast modes, edited export, and collapsible advanced settings. |
+| 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. |
-| Utility panels | Pipeline, run history, supervision, and raw detail tables. |
+| Review & edit workbench | Collapsed secondary area containing pipeline logs, run history, supervision tools, and raw tables. |
 
 ## Frontend implementation
 
@@ -89,8 +96,8 @@ The active UI uses Server-Sent Events through `GET /api/jobs/{job_id}/events` fo
 
 ## Remaining UI improvements
 
-- Add waveform zoom and click-to-audition individual detected hits.
-- Add inline controls for reassigning sample labels and merging/splitting clusters.
+- Add waveform zoom/pan while keeping the default view uncluttered.
+- Add inline cluster merge/split/relabel workflows inside `Review & edit`.
 - Add A/B comparison between parameter runs.
 - Add downloadable timing report per job.
 - Add filters/search to the run history browser.
@@ -100,8 +107,8 @@ The active UI uses Server-Sent Events through `GET /api/jobs/{job_id}/events` fo
 
 The current UI now includes:
 
-- Dedicated selected-hit and selected-sample audio players.
-- Clickable waveform onset markers that select the nearest detected hit.
+- Hidden selected-hit and selected-sample audio elements for click-to-audition without visible player clutter.
+- Clickable waveform onset markers that select and audition the nearest detected hit.
 - A detected-hit review table backed by `review/hits/*.wav` artifacts.
 - Audition buttons for representative sample rows.
 - Server-sent-events job progress via `GET /api/jobs/{job_id}/events`, with polling fallback.

web/app.js

@@ -48,6 +48,62 @@ function fmtDate(epochSeconds) {
   return new Date(epochSeconds * 1000).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" });
 }
 
+
+function fmtClock(seconds) {
+  const value = Number(seconds);
+  if (!Number.isFinite(value) || value <= 0) return "0:00";
+  const mins = Math.floor(value / 60);
+  const secs = Math.floor(value % 60).toString().padStart(2, "0");
+  return `${mins}:${secs}`;
+}
+
+function transportAudio() {
+  const stem = $("stemAudio");
+  const source = $("sourcePreview");
+  return stem?.src ? stem : source;
+}
+
+function updateTransport() {
+  const audio = transportAudio();
+  const current = audio ? Number(audio.currentTime || 0) : 0;
+  const duration = audio && Number.isFinite(Number(audio.duration)) ? Number(audio.duration) : 0;
+  const time = $("transportTime");
+  if (time) time.textContent = `${fmtClock(current)} / ${fmtClock(duration)}`;
+  const seek = $("transportSeek");
+  if (seek && !seek.matches(":active")) {
+    seek.value = duration > 0 ? String(Math.max(0, Math.min(1000, Math.round((current / duration) * 1000)))) : "0";
+  }
+  const button = $("transportPlayButton");
+  if (button) button.textContent = audio && !audio.paused ? "❚❚" : "▶";
+}
+
+function pauseNonTransportAudio() {
+  for (const id of ["hitAudio", "sampleAudio", "reconAudio"]) {
+    const el = $(id);
+    if (el && !el.paused) el.pause();
+  }
+}
+
+async function toggleTransportPlayback() {
+  const audio = transportAudio();
+  if (!audio?.src) return;
+  if (audio.paused) {
+    pauseNonTransportAudio();
+    const promise = audio.play();
+    if (promise && typeof promise.catch === "function") await promise.catch(() => {});
+  } else {
+    audio.pause();
+  }
+  updateTransport();
+}
+
+function seekTransport(value) {
+  const audio = transportAudio();
+  if (!audio?.src || !Number.isFinite(Number(audio.duration)) || Number(audio.duration) <= 0) return;
+  audio.currentTime = (Number(value) / 1000) * Number(audio.duration);
+  updateTransport();
+}
+
 function setHealth(ok, text, subtext) {
   $("healthDot").className = `status-dot ${ok ? "ok" : "bad"}`;
   $("healthText").textContent = text;
@@ -268,6 +324,8 @@ function drawWaveform(overview) {
 
 function playAudio(el, url) {
   if (!url) return;
+  const currentTransport = transportAudio();
+  if (currentTransport && !currentTransport.paused) currentTransport.pause();
   el.src = url;
   el.currentTime = 0;
   const promise = el.play();
@@ -675,6 +733,7 @@ function renderResult(job) {
   $("downloads").innerHTML = Object.entries(fileUrls).map(([key, url]) => `<a href="${esc(url)}" download>${esc(labels[key] ?? key)}</a>`).join("");
   $("stemAudio").src = fileUrls.stem ?? "";
   $("reconAudio").src = fileUrls.reconstruction ?? "";
+  updateTransport();
 
   renderSamples(result);
   renderHits(result);
@@ -810,8 +869,9 @@ function setFile(file) {
     $("resultSummary").textContent = `${file.name} is ready. Extract samples to see waveform markers and sample cards.`;
   }
   if (file) {
-    $("sourcePreview").hidden = false;
+    $("stemAudio").removeAttribute("src");
     $("sourcePreview").src = URL.createObjectURL(file);
+    updateTransport();
   }
 }
 
@@ -901,6 +961,16 @@ $("lockClusterButton").addEventListener("click", () => toggleTargetClusterLock()
 $("explainClusterButton").addEventListener("click", () => explainTargetCluster().catch((error) => { $("clusterExplanation").textContent = error.message; }));
 $("targetClusterSelect").addEventListener("change", setActionButtons);
 $("waveform").addEventListener("click", selectNearestWaveformHit);
+$("transportPlayButton").addEventListener("click", () => { toggleTransportPlayback().catch(() => {}); });
+$("transportSeek").addEventListener("input", (event) => seekTransport(event.target.value));
+for (const id of ["sourcePreview", "stemAudio"]) {
+  const audio = $(id);
+  audio.addEventListener("timeupdate", updateTransport);
+  audio.addEventListener("durationchange", updateTransport);
+  audio.addEventListener("play", updateTransport);
+  audio.addEventListener("pause", updateTransport);
+  audio.addEventListener("ended", updateTransport);
+}
 
 const dropzone = $("dropzone");
 for (const eventName of ["dragenter", "dragover"]) {

web/index.html

@@ -27,24 +27,28 @@
       </header>
 
       <main class="app-layout">
-        <section class="wave-card panel">
-          <div class="wave-header">
-            <div>
-              <p class="eyebrow">Sample extraction workstation</p>
-              <h1 id="resultSummary">Load audio, tune sensitivity, extract clean drum hits.</h1>
-            </div>
-            <span class="job-pill" id="jobPill">idle</span>
+        <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>
-          <canvas id="waveform" class="waveform" height="360"></canvas>
-          <div class="transport-row">
-            <audio id="sourcePreview" controls hidden></audio>
-            <label class="transport-audio">Stem audio<audio id="stemAudio" controls></audio></label>
-            <label class="transport-audio">Reconstruction<audio id="reconAudio" controls></audio></label>
+          <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>
-          <div class="downloads" id="downloads"></div>
         </section>
 
-        <aside class="control-card panel">
+        <aside class="control-card panel" aria-label="Extraction controls">
           <div class="control-group">
             <label>Stem
               <select id="stem"></select>
@@ -60,20 +64,22 @@
           <div class="control-group">
             <label>Cluster Count</label>
             <div class="stepper">
-              <button id="clusterMinusButton" type="button" class="step-button">−</button>
-              <input id="target_max" type="number" min="0" max="256" step="1" />
-              <button id="clusterPlusButton" type="button" class="step-button">+</button>
+              <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 class="primary-actions-stack">
-            <button id="exportStateButton" class="export-button" type="button" disabled>⇧ Export edited pack</button>
-            <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>
+            <button id="exportStateButton" class="export-button" type="button" disabled>⇧ Export Samples</button>
           </div>
 
           <details class="advanced-controls">
-            <summary>Advanced extraction settings</summary>
+            <summary>Advanced</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>
+            </div>
             <div class="control-grid compact-controls">
               <label>Demucs model
                 <select id="demucs_model"></select>
@@ -150,131 +156,135 @@
           </details>
         </aside>
 
-        <section class="samples-section">
+        <section class="samples-section" aria-label="Extracted samples">
           <div class="section-heading">
             <h2>Extracted Samples <span id="sampleCountLabel">(0)</span></h2>
-            <p>Representative samples appear as auditionable cards. Use the supervision tools below for deeper correction.</p>
           </div>
           <div id="samplesGrid" class="sample-grid"></div>
         </section>
 
-        <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>
-            <audio id="hitAudio" controls></audio>
-          </article>
-          <article class="review-card">
-            <strong>Selected sample</strong>
-            <span id="selectedSampleMeta">Click a sample card to hear the representative sample.</span>
-            <audio id="sampleAudio" controls></audio>
-          </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">
+        <details class="review-workbench panel utility-panel">
           <summary>
-            <span>Run history</span>
-            <small>Completed manifests under .runs/</small>
+            <span>Review & edit</span>
+            <small>Pipeline progress, run history, detailed hit rows, semantic editing, force-onset, and edited export.</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>
-          <div class="supervision-header">
-            <div>
-              <h3>Semantic edit state</h3>
-              <p class="subtle">Moves, locks, suppressions, favorites, and accepted suggestions are saved as replayable semantic state next to the run manifest.</p>
-            </div>
-            <div class="supervision-actions">
-              <button id="refreshStateButton" class="ghost-button" type="button">Refresh state</button>
-              <button id="forceOnsetButton" class="ghost-button" type="button" disabled>Add-onset mode off</button>
-              <button id="undoButton" class="ghost-button" type="button" disabled>Undo edit</button>
-            </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>
-            </label>
-            <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>
-          </div>
-          <div class="supervision-grid">
-            <article>
-              <h4>Outlier-first review queue</h4>
-              <div id="reviewQueue" class="compact-list"></div>
-            </article>
-            <article>
-              <h4>Cluster board</h4>
-              <div id="clusterBoard" class="compact-list"></div>
+          <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>
-              <h4>Suggestion inbox</h4>
-              <div id="suggestionInbox" class="compact-list"></div>
+            <article class="review-card">
+              <strong>Selected sample</strong>
+              <span id="selectedSampleMeta">Click a sample card to hear the representative sample.</span>
             </article>
-            <article>
-              <h4>Constraint / event log</h4>
-              <div id="stateLog" class="compact-list"></div>
-            </article>
-          </div>
-          <pre id="clusterExplanation" class="explanation empty">Select a cluster and click Explain.</pre>
-        </details>
+          </section>
 
-        <details class="panel utility-panel data-panel">
-          <summary>
-            <span>Detailed tables</span>
-            <small>Raw sample and detected-hit review rows</small>
-          </summary>
-          <div class="result-columns">
-            <section>
-              <h3>Representative samples</h3>
-              <div class="table-wrap">
-                <table id="samplesTable">
-                  <thead>
-                    <tr>
-                      <th>Audition</th><th>Sample</th><th>Class</th><th>Hits</th><th>Score</th><th>Duration</th><th>First hit</th><th>File</th>
-                    </tr>
-                  </thead>
-                  <tbody></tbody>
-                </table>
+          <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>
+            <div class="supervision-header">
+              <div>
+                <h3>Semantic edit state</h3>
+                <p class="subtle">Moves, locks, suppressions, favorites, and accepted suggestions are saved as replayable semantic state next to the run manifest.</p>
               </div>
-            </section>
-            <section>
-              <h3>Detected hit review</h3>
-              <p class="subtle">Every detected slice is exported under <code>review/hits/</code>. Click rows or waveform markers to audition.</p>
-              <div class="table-wrap hit-table-wrap">
-                <table id="hitsTable">
-                  <thead>
-                    <tr>
-                      <th>Audition</th><th>#</th><th>Label</th><th>Cluster</th><th>Confidence</th><th>Flags</th><th>Onset</th><th>Duration</th><th>Energy</th><th>File</th>
-                    </tr>
-                  </thead>
-                  <tbody></tbody>
-                </table>
+              <div class="supervision-actions">
+                <button id="refreshStateButton" class="ghost-button" type="button">Refresh state</button>
+                <button id="forceOnsetButton" class="ghost-button" type="button" disabled>Add-onset mode off</button>
+                <button id="undoButton" class="ghost-button" type="button" disabled>Undo edit</button>
               </div>
-            </section>
-          </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>
+              </label>
+              <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>
+            </div>
+            <div class="supervision-grid">
+              <article>
+                <h4>Outlier-first review queue</h4>
+                <div id="reviewQueue" class="compact-list"></div>
+              </article>
+              <article>
+                <h4>Cluster board</h4>
+                <div id="clusterBoard" class="compact-list"></div>
+              </article>
+              <article>
+                <h4>Suggestion inbox</h4>
+                <div id="suggestionInbox" class="compact-list"></div>
+              </article>
+              <article>
+                <h4>Constraint / event log</h4>
+                <div id="stateLog" class="compact-list"></div>
+              </article>
+            </div>
+            <pre id="clusterExplanation" class="explanation empty">Select a cluster and click Explain.</pre>
+          </details>
+
+          <details class="panel utility-panel data-panel">
+            <summary>
+              <span>Detailed tables</span>
+              <small>Raw sample and detected-hit review rows</small>
+            </summary>
+            <div class="result-columns">
+              <section>
+                <h3>Representative samples</h3>
+                <div class="table-wrap">
+                  <table id="samplesTable">
+                    <thead>
+                      <tr>
+                        <th>Audition</th><th>Sample</th><th>Class</th><th>Hits</th><th>Score</th><th>Duration</th><th>First hit</th><th>File</th>
+                      </tr>
+                    </thead>
+                    <tbody></tbody>
+                  </table>
+                </div>
+              </section>
+              <section>
+                <h3>Detected hit review</h3>
+                <p class="subtle">Every detected slice is exported under <code>review/hits/</code>. Click rows or waveform markers to audition.</p>
+                <div class="table-wrap hit-table-wrap">
+                  <table id="hitsTable">
+                    <thead>
+                      <tr>
+                        <th>Audition</th><th>#</th><th>Label</th><th>Cluster</th><th>Confidence</th><th>Flags</th><th>Onset</th><th>Duration</th><th>Energy</th><th>File</th>
+                      </tr>
+                    </thead>
+                    <tbody></tbody>
+                  </table>
+                </div>
+              </section>
+            </div>
+          </details>
         </details>
       </main>
     </div>

web/styles.css

@@ -3,25 +3,20 @@
   --bg: #f7f7f8;
   --surface: #ffffff;
   --surface-soft: #fbfbfc;
-  --line: #e3e4e8;
+  --line: #e4e5e9;
   --line-strong: #d4d6dd;
-  --muted: #8b8f9a;
-  --text: #26272b;
-  --text-soft: #4a4d55;
-  --accent: #6b3ff2;
-  --accent-strong: #5129d9;
+  --muted: #8d929d;
+  --text: #25262b;
+  --text-soft: #4d5058;
+  --accent: #6d45ec;
+  --accent-strong: #552bd8;
   --accent-soft: #eee9ff;
-  --good: #64aa45;
-  --bad: #d95767;
-  --warn: #f08f3e;
-  --cyan: #42b8b4;
-  --blue: #4f7df2;
-  --pink: #ea5ca9;
-  --orange: #ef9343;
-  --green: #8abc59;
-  --shadow: 0 18px 50px rgba(20, 22, 30, .06);
-  --radius-xl: 22px;
-  --radius-lg: 16px;
+  --good: #6cae48;
+  --bad: #d85867;
+  --warn: #ef9343;
+  --shadow: 0 16px 42px rgba(18, 21, 30, .055);
+  --radius-xl: 18px;
+  --radius-lg: 13px;
   font-synthesis-weight: none;
 }
 
@@ -29,34 +24,33 @@
 html, body {
   margin: 0;
   min-height: 100%;
-  background:
-    radial-gradient(circle at 12% 0%, rgba(107, 63, 242, .05), transparent 28rem),
-    radial-gradient(circle at 90% 12%, rgba(66, 184, 180, .04), transparent 30rem),
-    var(--bg);
+  background: var(--bg);
   color: var(--text);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
 }
 button, input, select { font: inherit; }
+button { cursor: pointer; }
+button:disabled { opacity: .45; cursor: not-allowed; }
 code { color: var(--accent-strong); }
 
 .shell {
-  width: min(100% - 64px, 1760px);
+  width: min(100% - 74px, 1740px);
   margin: 0 auto;
-  padding: 34px 0 56px;
+  padding: 38px 0 48px;
 }
 
 .topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 24px;
+  gap: 28px;
   margin-bottom: 34px;
 }
 .file-chip {
   position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 28px;
+  gap: 24px;
   min-width: min(620px, 100%);
   cursor: pointer;
   color: var(--text);
@@ -70,8 +64,8 @@ code { color: var(--accent-strong); }
 .file-chip.dragging .brand-mark,
 .file-chip:hover .brand-mark { transform: translateY(-1px); }
 .brand-mark {
-  width: 52px;
-  height: 52px;
+  width: 48px;
+  height: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -82,181 +76,245 @@ code { color: var(--accent-strong); }
 .brand-mark i {
   width: 4px;
   border-radius: 999px;
-  background: #1f2024;
+  background: #202125;
   display: block;
 }
-.brand-mark i:nth-child(1) { height: 17px; }
-.brand-mark i:nth-child(2) { height: 29px; }
-.brand-mark i:nth-child(3) { height: 40px; }
-.brand-mark i:nth-child(4) { height: 25px; }
-.brand-mark i:nth-child(5) { height: 13px; }
+.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 {
   display: block;
-  font-size: clamp(20px, 2vw, 27px);
+  max-width: 760px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 23px;
   line-height: 1.1;
-  font-weight: 640;
   letter-spacing: -.035em;
+  font-weight: 540;
 }
 .file-copy small {
   display: block;
-  margin-top: 5px;
+  margin-top: 4px;
   color: var(--muted);
-  font-size: 13px;
+  font-size: 12px;
 }
 .topbar-actions {
   display: inline-flex;
   align-items: center;
-  justify-content: flex-end;
-  gap: 14px;
-  flex-wrap: wrap;
+  gap: 16px;
 }
 .backend-pill {
   display: inline-flex;
   align-items: center;
-  gap: 9px;
-  color: var(--text-soft);
-  font-size: 12px;
-  padding: 8px 11px;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  background: rgba(255, 255, 255, .72);
+  gap: 7px;
+  color: var(--muted);
+  font-size: 11px;
+  opacity: .62;
 }
-.backend-pill strong { display: block; font-size: 12px; line-height: 1; }
-.backend-pill small { display: block; color: var(--muted); margin-top: 3px; }
+.backend-pill strong { display: block; font-size: 11px; line-height: 1; }
+.backend-pill small { display: none; }
 .status-dot {
-  width: 9px;
-  height: 9px;
+  width: 7px;
+  height: 7px;
   border-radius: 999px;
   background: var(--warn);
-  box-shadow: 0 0 0 4px rgba(240, 143, 62, .13);
 }
-.status-dot.ok { background: var(--good); box-shadow: 0 0 0 4px rgba(100, 170, 69, .13); }
-.status-dot.bad { background: var(--bad); box-shadow: 0 0 0 4px rgba(217, 87, 103, .13); }
+.status-dot.ok { background: var(--good); }
+.status-dot.bad { background: var(--bad); }
+.primary-button {
+  min-width: 252px;
+  border: 0;
+  border-radius: 8px;
+  padding: 19px 28px;
+  background: linear-gradient(135deg, #7048f5, #552bd8);
+  color: #fff;
+  font-weight: 610;
+  font-size: 20px;
+  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; }
 
 .app-layout {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 360px;
+  grid-template-columns: minmax(0, 1fr) 356px;
   grid-template-areas:
     "wave controls"
     "samples samples"
-    "review review"
-    "progress progress"
-    "history history"
-    "supervision supervision"
-    "data data";
+    "workbench workbench";
   gap: 28px;
   align-items: start;
 }
 .panel {
   border: 1px solid var(--line);
   border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, .82);
+  background: rgba(255, 255, 255, .88);
   box-shadow: var(--shadow);
 }
-.wave-card { grid-area: wave; padding: 0; overflow: hidden; min-height: 590px; }
-.control-card { grid-area: controls; padding: 30px; min-height: 590px; }
-.samples-section { grid-area: samples; }
-.review-strip { grid-area: review; }
-.progress-panel { grid-area: progress; }
-.history-panel { grid-area: history; }
-.supervision-panel { grid-area: supervision; }
-.data-panel { grid-area: data; }
+.wave-card {
+  grid-area: wave;
+  position: relative;
+  overflow: hidden;
+  min-height: 574px;
+}
+.control-card {
+  grid-area: controls;
+  padding: 31px 29px 28px;
+  min-height: 574px;
+}
+.samples-section { grid-area: samples; margin-top: 16px; }
+.review-workbench { grid-area: workbench; }
 
-.wave-header {
+.wave-status-row {
+  position: absolute;
+  z-index: 2;
+  top: 14px;
+  left: 18px;
+  right: 18px;
   display: flex;
   justify-content: space-between;
-  gap: 18px;
   align-items: flex-start;
-  padding: 26px 30px 8px;
-}
-.eyebrow {
-  margin: 0 0 8px;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: .14em;
-  font-size: 11px;
-  font-weight: 780;
-}
-h1 {
-  margin: 0;
-  font-size: clamp(20px, 2.2vw, 30px);
-  line-height: 1.16;
-  letter-spacing: -.045em;
-  font-weight: 620;
-  color: var(--text);
+  gap: 16px;
+  pointer-events: none;
 }
 .job-pill {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
-  border: 1px solid var(--line);
+  border: 1px solid rgba(228, 229, 233, .86);
   border-radius: 999px;
-  padding: 8px 11px;
+  padding: 6px 10px;
   color: var(--muted);
-  background: #fff;
+  background: rgba(255, 255, 255, .78);
+  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);
 }
 .waveform {
   display: block;
   width: 100%;
-  height: 420px;
-  min-height: 420px;
-  margin: 0;
+  height: 430px;
+  min-height: 430px;
   background: linear-gradient(180deg, #fff, #fbfbfc);
   cursor: crosshair;
 }
 .transport-row {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
+  grid-template-columns: 54px 112px minmax(0, 1fr);
+  gap: 24px;
   align-items: center;
-  padding: 0 30px 26px;
+  padding: 0 29px 28px;
 }
-audio { width: 100%; margin-top: 8px; height: 38px; }
-.transport-audio {
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 680;
-  letter-spacing: .02em;
+.round-play {
+  width: 54px;
+  height: 54px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: #fff;
+  color: #1f2024;
+  font-size: 18px;
+  line-height: 1;
+  box-shadow: 0 2px 8px rgba(18, 21, 30, .035);
+}
+.transport-time {
+  color: #6d717b;
+  font-size: 18px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.transport-seek {
+  appearance: none;
+  width: 100%;
+  height: 2px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: #d9dbe2;
+}
+.transport-seek::-webkit-slider-thumb {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 0;
+  opacity: 0;
+}
+.transport-seek:hover::-webkit-slider-thumb { opacity: 1; }
+.transport-seek::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 0;
+  opacity: 0;
 }
+.transport-seek:hover::-moz-range-thumb { opacity: 1; }
+.hidden-audio-bank { display: none; }
 .downloads {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
-  padding: 0 30px 28px;
+  gap: 9px;
+}
+.compact-downloads {
+  padding: 0 29px 24px;
+  margin-top: -10px;
+  min-height: 30px;
 }
+.downloads:empty { display: none; }
 .downloads a, .table-wrap a {
   color: var(--accent-strong);
   text-decoration: none;
-  font-weight: 760;
+  font-weight: 680;
   background: var(--accent-soft);
-  border: 1px solid rgba(107, 63, 242, .18);
+  border: 1px solid rgba(109, 69, 236, .16);
   border-radius: 999px;
-  padding: 8px 12px;
+  padding: 7px 11px;
+  font-size: 12px;
 }
 
 label {
   display: block;
   color: var(--text-soft);
   font-size: 20px;
-  font-weight: 520;
-  letter-spacing: -.025em;
+  font-weight: 500;
+  letter-spacing: -.026em;
 }
-.control-group { margin-bottom: 34px; }
+.control-group { margin-bottom: 36px; }
 input, select {
   width: 100%;
-  margin-top: 12px;
+  margin-top: 13px;
   border: 1px solid var(--line);
-  border-radius: 10px;
+  border-radius: 9px;
   padding: 15px 18px;
   color: var(--text);
   background: #fff;
   outline: none;
   font-size: 18px;
 }
+select { appearance: auto; }
 input:focus, select:focus {
-  border-color: rgba(107, 63, 242, .62);
-  box-shadow: 0 0 0 4px rgba(107, 63, 242, .09);
+  border-color: rgba(109, 69, 236, .58);
+  box-shadow: 0 0 0 4px rgba(109, 69, 236, .075);
 }
 input[type="range"] {
   appearance: none;
@@ -273,7 +331,7 @@ input[type="range"]::-webkit-slider-thumb {
   border-radius: 50%;
   background: var(--accent);
   border: 0;
-  box-shadow: 0 6px 18px rgba(107, 63, 242, .28);
+  box-shadow: 0 6px 18px rgba(109, 69, 236, .26);
 }
 input[type="range"]::-moz-range-thumb {
   width: 26px;
@@ -281,7 +339,7 @@ input[type="range"]::-moz-range-thumb {
   border-radius: 50%;
   background: var(--accent);
   border: 0;
-  box-shadow: 0 6px 18px rgba(107, 63, 242, .28);
+  box-shadow: 0 6px 18px rgba(109, 69, 236, .26);
 }
 .range-caption {
   display: flex;
@@ -292,10 +350,10 @@ input[type="range"]::-moz-range-thumb {
 }
 .stepper {
   display: grid;
-  grid-template-columns: 64px minmax(0, 1fr) 64px;
-  margin-top: 12px;
+  grid-template-columns: 58px minmax(0, 1fr) 58px;
+  margin-top: 13px;
   border: 1px solid var(--line);
-  border-radius: 10px;
+  border-radius: 9px;
   overflow: hidden;
   background: #fff;
 }
@@ -306,60 +364,55 @@ input[type="range"]::-moz-range-thumb {
   border-right: 1px solid var(--line);
   border-radius: 0;
   text-align: center;
-  font-size: 18px;
+  font-size: 20px;
+  padding: 14px 8px;
 }
 .step-button {
   border: 0;
   border-radius: 0;
   background: #fff;
   color: var(--text);
-  font-size: 26px;
+  font-size: 25px;
   line-height: 1;
 }
-.primary-actions-stack { display: grid; gap: 14px; margin-top: 40px; }
-button {
-  border: 0;
-  border-radius: 10px;
-  padding: 14px 18px;
-  color: var(--text);
-  cursor: pointer;
-  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease;
-}
-button:hover:not(:disabled) { transform: translateY(-1px); }
-button:disabled { opacity: .45; cursor: not-allowed; }
-.primary-button {
-  min-width: 250px;
-  background: linear-gradient(135deg, #7048f5, #5129d9);
-  color: #fff;
-  font-weight: 690;
-  font-size: 18px;
-  box-shadow: 0 14px 34px rgba(81, 41, 217, .22);
-}
-.primary-button span { margin-right: 8px; }
+.primary-actions-stack { display: grid; gap: 14px; margin-top: 42px; }
 .export-button, .secondary-button, .ghost-button {
   border: 1px solid var(--line-strong);
+  border-radius: 9px;
   background: #fff;
   color: var(--text-soft);
-  font-weight: 610;
+  font-weight: 580;
+  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, border-color .16s ease, background .16s ease;
 }
-.export-button { min-height: 64px; font-size: 18px; }
-.ghost-button { padding: 10px 13px; font-size: 14px; }
-.full-width { width: 100%; margin-top: 16px; }
+.export-button {
+  min-height: 64px;
+  padding: 16px 18px;
+  font-size: 18px;
+}
+.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(100, 170, 69, .55);
-  background: rgba(100, 170, 69, .10);
-  color: #386b24;
+  border-color: rgba(108, 174, 72, .55);
+  background: rgba(108, 174, 72, .10);
+  color: #3f702b;
 }
+.danger-button { color: var(--bad); }
 .advanced-controls {
   margin-top: 28px;
   border-top: 1px solid var(--line);
-  padding-top: 18px;
+  padding-top: 17px;
 }
 .advanced-controls summary,
 .utility-panel summary {
   cursor: pointer;
   color: var(--text-soft);
-  font-weight: 680;
+  font-weight: 650;
+}
+.preset-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+  margin: 16px 0;
 }
 .control-grid {
   display: grid;
@@ -368,7 +421,7 @@ button:disabled { opacity: .45; cursor: not-allowed; }
 }
 .compact-controls label {
   font-size: 12px;
-  font-weight: 720;
+  font-weight: 700;
   letter-spacing: .01em;
 }
 .compact-controls input, .compact-controls select {
@@ -386,42 +439,42 @@ button:disabled { opacity: .45; cursor: not-allowed; }
   align-items: center;
   gap: 8px;
   font-size: 13px;
-  font-weight: 650;
+  font-weight: 630;
 }
 .toggles input { width: auto; margin: 0; }
+.full-width { width: 100%; margin-top: 16px; }
 
 .section-heading {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 20px;
-  margin: 10px 8px 20px;
+  margin: 0 8px 20px;
 }
-h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; font-weight: 620; }
-.section-heading p { margin: 0; color: var(--muted); max-width: 680px; }
+h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; font-weight: 540; }
 .sample-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  grid-template-columns: repeat(8, minmax(135px, 1fr));
   gap: 34px;
 }
 .sample-card {
   display: grid;
-  grid-template-rows: 130px auto;
-  min-height: 220px;
+  grid-template-rows: 132px 72px;
+  min-height: 204px;
   border: 1px solid var(--line);
   border-top: 4px solid var(--accent);
-  border-radius: 10px;
+  border-radius: 9px;
   background: #fff;
-  box-shadow: 0 10px 26px rgba(20, 22, 30, .04);
+  box-shadow: 0 9px 23px rgba(18, 21, 30, .035);
   overflow: hidden;
   text-align: left;
   padding: 0;
 }
-.sample-card:hover { box-shadow: 0 16px 38px rgba(20, 22, 30, .08); }
-.sample-card.selected { outline: 3px solid rgba(107, 63, 242, .14); }
+.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: 130px;
+  height: 132px;
   display: block;
   background: #fff;
 }
@@ -430,18 +483,18 @@ h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; font-weight: 620; }
   grid-template-columns: 44px minmax(0, 1fr);
   gap: 12px;
   align-items: center;
-  padding: 14px 14px 16px;
+  padding: 13px 13px 15px;
 }
 .play-dot {
-  width: 44px;
-  height: 44px;
+  width: 42px;
+  height: 42px;
   display: grid;
   place-items: center;
   border-radius: 999px;
   background: #fff;
   border: 1px solid var(--line);
   color: var(--text);
-  font-size: 14px;
+  font-size: 13px;
 }
 .sample-name {
   display: block;
@@ -449,43 +502,53 @@ h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; font-weight: 620; }
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 17px;
-  font-weight: 570;
+  font-weight: 500;
   letter-spacing: -.02em;
 }
 .sample-meta {
-  display: block;
+  display: none;
   margin-top: 4px;
   color: var(--muted);
   font-size: 12px;
   font-weight: 500;
 }
+.empty { color: var(--muted); }
+
+.review-workbench {
+  padding: 18px 20px;
+  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: 22px;
+  gap: 18px;
 }
 .review-card {
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
-  background: rgba(255, 255, 255, .82);
-  box-shadow: var(--shadow);
-  padding: 18px;
+  background: var(--surface-soft);
+  padding: 16px;
 }
 .review-card strong, .review-card span { display: block; }
 .review-card span { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.4; }
 
-.utility-panel {
-  padding: 18px 20px;
-}
-.utility-panel > summary {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 4px;
-  list-style: none;
-}
-.utility-panel > summary::-webkit-details-marker { display: none; }
-.utility-panel > summary span { font-size: 17px; color: var(--text); }
-.utility-panel > summary small { color: var(--muted); font-weight: 500; }
 .stage-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
@@ -503,7 +566,7 @@ h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; font-weight: 620; }
   background: var(--surface-soft);
 }
 .stage .badge { width: 14px; height: 14px; border-radius: 999px; background: #d7d9e1; }
-.stage.running .badge { background: var(--accent); box-shadow: 0 0 0 5px rgba(107, 63, 242, .12); }
+.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); }
@@ -518,148 +581,151 @@ h2 { margin: 0; font-size: 21px; letter-spacing: -.035em; font-weight: 620; }
   padding: 14px;
   margin: 14px 0 0;
   background: #fbfbfc;
-  color: #606571;
+  color: #4f535d;
   font-size: 12px;
-  line-height: 1.45;
-  white-space: pre-wrap;
+  line-height: 1.5;
 }
-.history-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; margin-top: 14px; }
-.history-row {
-  width: 100%;
+.history-list, .compact-list {
+  display: grid;
+  gap: 10px;
+  margin-top: 14px;
+}
+.history-row, .compact-row, .suggestion-row, .log-row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto auto;
   gap: 12px;
   align-items: center;
-  text-align: left;
+  width: 100%;
   border: 1px solid var(--line);
-  background: #fff;
   border-radius: 14px;
+  background: #fff;
   padding: 12px;
+  text-align: left;
 }
-.history-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
-.history-row small { display: block; color: var(--muted); margin-top: 3px; }
-.history-row span:not(:first-child) { color: var(--text-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
-.empty { color: var(--muted); margin: 0; }
-
-h3 { margin: 0 0 10px; font-size: 16px; letter-spacing: -.015em; }
-.subtle { margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
-.result-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 18px; }
-.hit-table-wrap { max-height: 420px; }
-.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
-table { width: 100%; border-collapse: collapse; min-width: 860px; background: #fff; }
-th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
-th { position: sticky; top: 0; background: #fbfbfc; color: var(--muted); z-index: 1; }
-td { color: var(--text-soft); }
-tr:last-child td { border-bottom: 0; }
+.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; }
+.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; }
 .mini-button {
-  padding: 7px 10px;
+  border: 1px solid var(--line-strong);
   border-radius: 999px;
   background: #fff;
-  border: 1px solid var(--line);
   color: var(--text-soft);
+  padding: 6px 10px;
   font-size: 12px;
-  font-weight: 720;
-}
-tr.selected td { background: var(--accent-soft); }
-tr[data-hit-index] { cursor: pointer; }
-tr[data-hit-index]:hover td { background: #f6f4ff; }
-tr.low-confidence td { background: rgba(240,143,62,.06); }
-tr.low-confidence.selected td { background: var(--accent-soft); }
-tr.suppressed td { opacity: .62; text-decoration: line-through; }
-
+  font-weight: 650;
+}
 .supervision-header {
   display: flex;
-  align-items: flex-start;
   justify-content: space-between;
-  gap: 16px;
-  margin: 18px 0 14px;
+  gap: 20px;
+  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-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
+.state-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 14px 0;
 }
-.supervision-header h3, .supervision-grid h4 { margin: 0; }
-.supervision-actions, .row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
-.state-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: var(--text-soft); }
 .state-summary span {
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: #fff;
-  padding: 7px 10px;
+  background: var(--surface-soft);
+  padding: 6px 10px;
+  color: var(--text-soft);
   font-size: 12px;
-  font-weight: 760;
 }
 .supervision-tools {
   display: grid;
-  grid-template-columns: minmax(220px, 1fr) repeat(7, auto);
+  grid-template-columns: minmax(220px, 1fr) repeat(4, auto);
   gap: 10px;
   align-items: end;
-  margin-bottom: 16px;
-}
-.supervision-tools label { font-size: 13px; font-weight: 720; }
-.supervision-tools input, .supervision-tools select { font-size: 13px; padding: 10px 11px; }
-.danger-button { border-color: rgba(217,87,103,.34); color: #973844; }
-.supervision-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
-.compact-list { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
-.compact-row, .suggestion-row, .log-row {
-  width: 100%;
+  margin-top: 14px;
+}
+.supervision-tools label { font-size: 13px; font-weight: 700; }
+.supervision-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: center;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 18px;
+}
+.supervision-grid article {
   border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 10px;
-  background: #fff;
-  color: var(--text);
-  text-align: left;
+  border-radius: 16px;
+  padding: 14px;
+  background: var(--surface-soft);
 }
-.compact-row strong, .suggestion-row strong, .log-row strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.compact-row small, .suggestion-row small, .log-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; line-height: 1.35; }
-.compact-row.locked { border-color: rgba(100,170,69,.45); background: rgba(100,170,69,.08); }
-.compact-row.suppressed { opacity: .62; text-decoration: line-through; }
-.log-row.constraint { border-color: rgba(107,63,242,.22); }
+.supervision-grid h4 { margin: 0 0 10px; }
 .explanation {
-  min-height: 120px;
-  max-height: 320px;
+  margin: 18px 0 0;
+  max-height: 360px;
   overflow: auto;
   border: 1px solid var(--line);
   border-radius: 14px;
+  padding: 14px;
   background: #fbfbfc;
-  color: #606571;
-  padding: 12px;
-  margin: 14px 0 0;
   font-size: 12px;
-  line-height: 1.45;
 }
-.edited-downloads { margin: -4px 0 14px; padding: 0; }
-.edited-downloads:empty { display: none; }
+.edited-downloads { padding: 0; }
+
+.result-columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 20px;
+  margin-top: 16px;
+}
+.table-wrap {
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  margin-top: 12px;
+  background: #fff;
+}
+table { width: 100%; border-collapse: collapse; font-size: 13px; }
+th, td {
+  text-align: left;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+}
+th { color: var(--muted); font-weight: 700; 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:
-      "controls"
       "wave"
+      "controls"
       "samples"
-      "review"
-      "progress"
-      "history"
-      "supervision"
-      "data";
+      "workbench";
   }
-  .control-card, .wave-card { min-height: 0; }
-  .control-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
-  .control-group, .primary-actions-stack, .advanced-controls { margin: 0; }
-  .advanced-controls { grid-column: 1 / -1; }
+  .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% - 24px, 1760px); padding-top: 20px; }
-  .topbar, .section-heading, .supervision-header { display: block; }
-  .topbar-actions { margin-top: 18px; justify-content: stretch; width: 100%; }
+  .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; }
-  .file-chip { min-width: 0; width: 100%; gap: 12px; }
-  .wave-header, .transport-row, .downloads { padding-left: 18px; padding-right: 18px; }
-  .waveform { height: 300px; min-height: 300px; }
-  .transport-row, .review-strip, .control-card, .control-grid, .supervision-tools, .supervision-grid { grid-template-columns: 1fr; }
-  .sample-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 18px; }
-  .history-row { grid-template-columns: 1fr 1fr; }
-}
-#sourcePreview { grid-column: 1 / -1; }
-.downloads:empty { display: none; }
+  .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; }
+}