feat(web): move the phrase pager under the roll, unify the transport (#78)

[PhysShell]

Curation-ergonomics from the playtest (#78). Asks 1 (jump-to-phrase) and 2 (compare two phrases overlaid) shipped earlier (06f32c5); this does the remaining 3 + 4.

What

• feat(s1): MIDI import/export with bar-aligned phrases Adds griff-core::midi with import/export/summarise over midly 0.5. Tracks are reconstructed into Bar-grouped Phrase values; tempo and time-signature metadata are threaded through from global MIDI events. CLI gains three subcommands: import (one-line summary per track), inspect (bar-by-bar dump), export (roundtrip write). All paths, error types and the main entry-point satisfy the strict clippy policy (no process::exit, no &PathBuf args, no absolute paths in bodies). 40 tests pass; cargo fmt and cargo clippy --all-targets -D warnings are both clean. #3 — controls next to the roll: relocates the #splitView panel (pager, jump, compare, tags, downloads) out of the deep-nested capture form to directly under the piano roll, so paging and comparing happen beside the canvas without scrolling back and forth.
• docs: establish knowledge base (constitution, SPEC, ADRs, S0-S12, audit) #4 — unify the transport: removes the split view's own ▶ Play phrase / ⏹ Stop. They only duplicated the main transport's play()/stop(); the main transport now sits just above the roll, and renderPhrase() already keeps current synced to the displayed phrase (or the A/B overlay), so the main Play covers it.

Scope

Pure layout/markup (web/static/index.html + app.js) — no JS logic or data-flow change. Element ids are unchanged, so the existing wiring and the pager.js helper tests are untouched. .splitview styling is self-contained, so it renders as its own panel under the roll.

Verification

• 29 JS helper tests pass (node --test web/test)
• No dangling element refs after removing the split transport; HTML well-formed; #splitView correctly precedes #capture

⚠️ Needs an in-browser eyeball. The DOM/canvas glue isn't unit-tested (ADR-0024), so the actual look — panel placement under the roll, single transport feel — should be confirmed via ./web/build.sh + serving dist/ (load the sample → Split). Anything off is a quick CSS/spacing follow-up.

🤖 Generated with Claude Code

https://claude.ai/code/session_01TTUbGjzD8ysnVnCJnZJE95

---

Generated by Claude Code

Summary by CodeRabbit

• Refactor
  • Reorganized the phrase panel interface to better group split navigation, comparison, status/details, and downloads.
  • Removed split-view Play/Stop controls so playback is handled via the main player transport.
  • Updated the capture hint text to clarify that phrase chunk navigation and downloads occur in the phrase panel, while playback is controlled above.
  • Improved playback startup so the split phrase display is refreshed/synchronized before playback begins.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 654094eb-3007-49b7-9853-ea25cfe6c790

📥 Commits

Reviewing files that changed from the base of the PR and between 3b7dfbd and bf3bf27.

📒 Files selected for processing (2)

• web/static/app.js
• web/static/index.html

🚧 Files skipped from review as they are similar to previous changes (1)

• web/static/index.html

---

📝 Walkthrough

Walkthrough

The splitPlay and splitStop phrase playback controls are removed from the split view. Their DOM references are deleted from the els map and their click handlers are removed from bind() in app.js. The splitView section in index.html is repositioned and restructured to include only pager, comparison, and download controls without phrase transport buttons. The main play handler is updated to call renderPhrase() when split mode is visible, ensuring the displayed phrase is synchronized before playback begins. The capture hint text is updated to reference paging and downloading via the phrase panel.

Changes

Split View Play/Stop Control Removal

Layer / File(s)	Summary
splitView HTML restructure and hint text update web/static/index.html	section#splitView is repositioned and restructured to include pager navigation (splitPrev, splitJump, splitNext), phrase comparison (splitCompare), status output (splitInfo, splitTags), and download buttons (splitDownload, splitDownloadEach, splitDownloadAll), without splitPlay/splitStop controls; capture hint paragraph updated to reference paging and downloading from the phrase panel under the roll.
Remove splitPlay/splitStop DOM refs, handlers, and sync main play handler web/static/app.js	splitPlay and splitStop removed from the els DOM reference map; their click event listeners deleted from bind(); main els.play handler updated to call renderPhrase() before play() when split mode is active, ensuring the split phrase display stays synchronized with playback.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

• web: phrase navigation + comparison UX (jump-to-N, compare two phrases, controls near roll) #78: This PR directly addresses the requirements from issue #78 — removing redundant split-view Play/Stop transport controls and consolidating phrase playback into the main transport with proper split-mode synchronization via renderPhrase().

Possibly related PRs

• PhysShell/griff#71: Introduced the split phrase pager UI including splitPlay/splitStop wiring in app.js and index.html, which this PR reverts by removing those specific transport controls.
• PhysShell/griff#82: Both PRs modify the split-view UI wiring around phrase rendering — this PR removes splitPlay/splitStop and updates the main play handler to call renderPhrase(), while the related PR adds splitJump/splitCompare and other phrase navigation enhancements, both affecting the split rendering/playback flow.

Poem

🐇 Hop, hop, the buttons are gone,
No splitPlay, no splitStop to click upon.
The phrase panel lives neat, by the roll it stays,
Download and page through your musical phrase.
One play button now rules them all with grace! 🎵

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: moving the phrase pager under the roll and unifying the transport controls by removing duplicates.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/modest-maxwell-0zecwn

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3b7dfbd026

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/static/index.html`:
- Around line 188-190: The text in the HTML file around line 188 incorrectly
states that users can play phrases "from the phrase panel that appears under the
roll," but the play control has been moved to the main transport interface above
the roll. Update the instruction text to clarify that the play control is now
part of the main transport above the roll, not in the phrase panel below it, so
users understand where to find the play functionality when working with cut
phrases.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 70a04148-d4fb-4170-99ab-de368fb6a0d0

📥 Commits

Reviewing files that changed from the base of the PR and between 7acd8a8 and 3b7dfbd.

📒 Files selected for processing (2)

• web/static/app.js
• web/static/index.html

💤 Files with no reviewable changes (1)

• web/static/app.js