diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92016f3..e00e03c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
identity at both ends by skipped neighbours is still reported as a conflict.
API only — no UI wiring yet (#26).
+- **Per-section sync review UI (#26): apply or skip each section.** A new
+ "Per-section sync (review sections)…" item in the Tempo/Grid menu opens a
+ review list: one row per section with its confidence badge, the scale
+ factor/shift it would apply, and an Apply/Skip toggle. Low-confidence sections
+ default to skip and are never applied unless the user explicitly selects them;
+ failed sections are not selectable. "Apply all high-confidence" re-selects just
+ the trusted sections and bakes the accepted map through the same
+ `applyPerSectionSync` path as #25, so the preview and the committed edit are
+ one map. A single-section song collapses to the uniform model (one full-domain
+ row).
+
- **The undo stack is no longer invisible: a last-action label and a Revert
button sit beside Undo/Redo (#43).** Every committed edit now names itself —
the label is derived from the command's own class (or an explicit `label` on
diff --git a/screen.html b/screen.html
index 27abca7..3a34089 100644
--- a/screen.html
+++ b/screen.html
@@ -881,6 +881,34 @@
+
+
+
+
+ Per-section sync
+
+
+
+ Review each section's alignment. Low-confidence sections are skipped by
+ default — select one to apply it anyway.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index 5cf1ad2..5d1fdad 100644
--- a/src/main.js
+++ b/src/main.js
@@ -88,6 +88,10 @@ import {
} from './sync-tempo.js';
import { applyPerSectionSync, _applyPerSectionSyncPure } from './tempo.js';
import { _buildPiecewiseMapPure } from './section-sync.js';
+import {
+ editorApplySectionSync, editorHideSectionSync, editorShowSectionSync,
+ editorToggleSectionSync
+} from './section-sync-ui.js';
import {
getMousePos, onDblClick, onMouseDown, onMouseMove, onMouseUp, onWheel
} from './mouse.js';
@@ -743,6 +747,12 @@ window.applyPerSectionSync = applyPerSectionSync;
window._applyPerSectionSyncPure = _applyPerSectionSyncPure;
window._buildPiecewiseMapPure = _buildPiecewiseMapPure;
+// Per-section sync review (#26) — section-sync-ui.js owns the logic.
+window.editorShowSectionSync = editorShowSectionSync;
+window.editorHideSectionSync = editorHideSectionSync;
+window.editorToggleSectionSync = editorToggleSectionSync;
+window.editorApplySectionSync = editorApplySectionSync;
+
// Tab preview (tab-preview.js owns the logic; HTML calls these by name).
window.editorShowTabPreview = _editorShowTabPreview;
window.editorRefreshTabPreview = editorRefreshTabPreview;
diff --git a/src/menu-bar.js b/src/menu-bar.js
index 896613c..90bec6e 100644
--- a/src/menu-bar.js
+++ b/src/menu-bar.js
@@ -276,6 +276,7 @@ export const EDITOR_MENUS = Object.freeze([
{ sep: true },
{ cmd: 'songFit' },
{ label: 'Sync tempo to audio', fn: 'editorSyncTempo', audioOnly: true },
+ { label: 'Per-section sync (review sections)…', fn: 'editorShowSectionSync', audioOnly: true },
{ label: 'Scan for tempo zones…', fn: 'editorScanTempoZones', audioOnly: true },
{ label: 'Apply rough map from tempo zones', fn: 'editorApplyTempoZones', audioOnly: true },
{ label: 'Map Health (grid-vs-recording drift)', fn: 'editorToggleMapHealth', audioOnly: true },
diff --git a/src/section-sync-ui.js b/src/section-sync-ui.js
new file mode 100644
index 0000000..6956e4d
--- /dev/null
+++ b/src/section-sync-ui.js
@@ -0,0 +1,229 @@
+// Per-section sync results UI (#26) — sub-issue 5/5 of per-section syncing (#8).
+//
+// Presents the #24 analysis one section at a time: a row with the section name,
+// its confidence badge, and whether the section will be applied or skipped.
+// Low-confidence sections default to SKIP and are never applied unless the user
+// explicitly selects them; failed sections are not selectable at all. "Apply all
+// high-confidence" re-selects just the trusted sections; "Apply" bakes the
+// current selection through the same `applyPerSectionSync` path as #25, so a
+// preview and the committed edit are one map. A single-section song collapses to
+// the uniform model — one full-domain row.
+//
+// Pure decisions live in `section-sync.js` (`_sectionSyncPlanPure`); this module
+// only gathers onsets, renders, and hands the plan to the apply path. The
+// window.editor* entry points are attached by main.js (the repo convention).
+
+import { S } from './state.js';
+import { _ensureOnsetsShifted } from './audio.js';
+import { applyPerSectionSync } from './tempo.js';
+import {
+ _alignSectionsPure, _sectionSyncHighConfidenceDisabledPure, _sectionSyncPlanPure,
+} from './section-sync.js';
+import { _editorEscHtml, _installModalKeyboard, setStatus } from './ui.js';
+import { host } from './host.js';
+
+let _analysis = null;
+let _decisions = null; // section index -> boolean (true = apply, false = skip)
+let _prevFocus = null;
+let _kbInstalled = false;
+
+const MODAL_ID = 'editor-section-sync-modal';
+
+function _modal() {
+ return typeof document === 'undefined' ? null : document.getElementById(MODAL_ID);
+}
+
+// Focus a live control in the modal. A disabled button refuses focus, so fall
+// back through the primary action, any enabled control, then the modal root
+// (which is `tabIndex = -1` and inside range of the keydown trap).
+function _focusModal() {
+ if (typeof document === 'undefined') return;
+ const modal = _modal();
+ if (!modal) return;
+ const apply = document.getElementById('editor-section-sync-apply');
+ if (apply && !apply.disabled && apply.focus) { apply.focus(); return; }
+ if (typeof modal.querySelector === 'function') {
+ const first = modal.querySelector('button:not([disabled])');
+ if (first && first.focus) { first.focus(); return; }
+ }
+ if (modal.focus) modal.focus();
+}
+
+export function editorShowSectionSync() {
+ if (typeof document === 'undefined') return;
+ if (S.beats.length < 2) { setStatus('Need at least two beats to sync.'); return; }
+ if (!S.audioBuffer && !S.waveformPeaks) {
+ setStatus('Load audio before per-section sync.');
+ return;
+ }
+ const onsets = _ensureOnsetsShifted() || [];
+ if (!onsets.length) {
+ setStatus('No audio onsets detected yet — cannot per-section sync.');
+ return;
+ }
+ const analysis = _alignSectionsPure({
+ sections: S.sections || [],
+ beats: S.beats,
+ source: { arrangements: S.arrangements, drumTab: S.drumTab },
+ audioOnsets: onsets,
+ });
+ if (!analysis.ok) {
+ setStatus(`Per-section sync unavailable (${analysis.reason}).`);
+ return;
+ }
+ _analysis = analysis;
+ _decisions = new Map();
+ const modal = _modal();
+ if (!modal) return;
+ _renderSectionSync();
+ _prevFocus = document.activeElement;
+ modal.classList.remove('hidden');
+ if (!_kbInstalled) {
+ _kbInstalled = true;
+ // The panel (firstElementChild) owns the focusables; the overlay root
+ // only needs to stay focusable so a backdrop click can be redirected in.
+ _installModalKeyboard(modal, modal.firstElementChild, editorHideSectionSync);
+ }
+ _focusModal();
+ setStatus('Review per-section sync results.');
+}
+
+export function editorHideSectionSync() {
+ const modal = _modal();
+ if (modal) modal.classList.add('hidden');
+ const prev = _prevFocus;
+ _prevFocus = null;
+ if (prev && prev.isConnected && prev.focus) prev.focus();
+}
+
+export function editorToggleSectionSync(index) {
+ if (!_analysis || !_decisions) return;
+ const row = _sectionSyncPlanPure(_analysis, _decisions)
+ .rows.find((r) => r.index === index);
+ if (!row) return;
+ if (!row.forceable) {
+ setStatus('That section has no usable alignment to apply.');
+ return;
+ }
+ // Flip relative to the DECISION intent, not the conflict-demoted acceptance:
+ // an explicitly-skipped section that a conflict would otherwise hide must
+ // still toggle back on, and a demoted run must not become toggle-stuck.
+ _decisions.set(index, !row.wanted);
+ _renderSectionSync();
+ // The re-render replaced the rows container, so the clicked button is gone
+ // and focus fell to — which would let global shortcuts through the
+ // overlay. Put focus back on this row's toggle (or a safe fallback).
+ _focusSectionToggle(index);
+}
+
+// Restore focus to a row's toggle after a re-render, falling back inside the
+// modal. `document.querySelector` is absent in some DOM stubs; the fallback
+// covers that.
+function _focusSectionToggle(index) {
+ if (typeof document === 'undefined') return;
+ const btn = typeof document.querySelector === 'function'
+ ? document.querySelector(`[data-section-ss="${index}"]`) : null;
+ if (btn && btn.focus) { btn.focus(); return; }
+ _focusModal();
+}
+
+export function editorApplySectionSync(allHighConfidence) {
+ if (!_analysis) return;
+ // "All high-confidence" is the default decision set: the confidence floor
+ // alone decides, i.e. low-confidence sections are skipped.
+ const decisions = allHighConfidence ? new Map() : _decisions;
+ const plan = _sectionSyncPlanPure(_analysis, decisions);
+ if (!plan.ok) { setStatus('Per-section sync analysis is unavailable.'); return; }
+ if (plan.conflicts.length) {
+ setStatus('Cannot apply: a section conflicts with the fit. Skip it and try again.');
+ return;
+ }
+ if (!plan.summary.applied) { setStatus('No sections selected to apply.'); return; }
+ const res = applyPerSectionSync({
+ proposals: plan.proposals,
+ confidenceFloor: plan.confidenceFloor,
+ domain: plan.domain,
+ });
+ if (!res || !res.applied) {
+ setStatus(`Per-section sync refused (${(res && res.reason) || 'unknown'}).`);
+ return;
+ }
+ const n = plan.summary.applied;
+ editorHideSectionSync();
+ host.draw();
+ setStatus(`Applied per-section sync to ${n} section${n === 1 ? '' : 's'}.`);
+}
+
+// ── Rendering ──────────────────────────────────────────────────────────────
+
+function _tierBadge(row) {
+ const cls = row.tier === 'high'
+ ? 'bg-emerald-500/20 text-emerald-300'
+ : row.tier === 'low'
+ ? 'bg-amber-500/20 text-amber-300'
+ : 'bg-red-500/20 text-red-300';
+ return ``
+ + `${row.confidencePct}%`;
+}
+
+function _rowDetail(row) {
+ if (row.conflict) return 'conflict';
+ if (!row.accepted) {
+ return row.tier === 'high' ? 'skipped'
+ : row.tier === 'low' ? 'below threshold' : 'no match';
+ }
+ const shift = row.shift >= 0 ? `+${row.shift.toFixed(2)}` : row.shift.toFixed(2);
+ return `×${row.factor.toFixed(3)} · ${shift}s`;
+}
+
+function _sectionRowHtml(row) {
+ const toggle = row.forceable
+ ? ``
+ : '—';
+ return '