fix(editor): restore the two </div>s that hid the entire timeline (blank editor in the 20260711 nightly)

[ChrisBeWithYou]

What broke

The editor timeline renders completely blank after any load or import — no ruler, no waveform, no notes — while the status bar reports the load normally. First tester-visible in the 20260711 nightly (the first build carrying the merged workspace-shell waves).

Root cause

Two closing </div>s were lost at the canvas-wrap overlay anchor — the seam every chrome PR collides on — when the squash-merge resolutions for the sweep bar (#201) and the drum-pad strip (#199) landed (screen.html was balanced at 2ec753b, two closers short at 1242631). Since then the DOM nests as:

#editor-canvas-wrap
└── #editor-sweep-bar (hidden)          ← never closed
    └── #editor-drum-pad-strip (hidden) ← never closed
        └── #editor-canvas              ← inside a display:none subtree → 0×0

The canvas backing store still gets sized and painted (draw code reads the wrap), so nothing throws, every JS suite stays green (nothing parses the markup), and the status line says Loaded: — but the element occupies zero layout.

Fix + guard

• Restores the two closers (byte-identical markup otherwise).
• Adds tests/screen_markup.test.mjs: a dependency-free tag-stack walk over screen.html that fails if the file ever unbalances again, if #editor-canvas stops being a direct child of #editor-canvas-wrap, or if any canvas-wrap overlay becomes an ancestor instead of a sibling. Fails 3/3 on main, passes here — this seam is now guarded against the exact merge-resolution class that caused this.

Verification

Driven end-to-end on the :8000 testbed with headless Chromium against a real feedpak:

• Before: #editor-canvas clientHeight: 0, parent chain canvas → drum-pad-strip(hidden) → sweep-bar(hidden) → canvas-wrap, timeline black.
• After: clientHeight: 877, parent = canvas-wrap, ruler + minimap + waveform + 1328 notes render.
• Full suite 108/108 (incl. the new markup suite), ESLint 0 errors. No JS changes.

Suggest merging ahead of the queue so the next nightly unbreaks testers.

🤖 Generated with Claude Code

https://claude.ai/code/session_01EBQCHCNA81E9tHmSDHSe2Q

Summary by CodeRabbit

• Bug Fixes

  • Fixed a rendering issue that caused the editor timeline to appear blank.
  • Restored proper overlay structure so the editor canvas displays correctly.

• Tests

  • Added markup validation checks to help prevent future rendering regressions.

[coderabbitai]

📝 Walkthrough

Walkthrough

Two missing closing tags in screen.html are restored so the editor canvas is no longer nested inside a hidden overlay. A new markup test validates balanced tags and required canvas and overlay parent relationships, and the fix is recorded in the changelog.

Changes

Editor markup repair

Layer / File(s)	Summary
Restore overlay boundaries and validate canvas nesting screen.html, tests/screen_markup.test.mjs, CHANGELOG.md	Closes the sweep and drum-pad containers, adds regression checks for balanced markup and required parent relationships, and records the rendering fix.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 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 clearly matches the main fix: restoring the missing closing divs that caused the blank editor timeline.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ 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 fix/editor-canvas-nesting

---

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

[coderabbitai]

🧹 Nitpick comments (1)

tests/screen_markup.test.mjs (1)

56-56: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low value

Self-closing detection can false-positive on trailing / inside quoted attribute values.

/\/\s*$/.test(attrs) matches a trailing slash anywhere in the raw attrs string, including inside a quoted value (e.g. class="foo/"), not just an XHTML-style /> self-close. That would make the walker silently skip pushing such an element onto the stack instead of failing loudly — undermining the very guard this file exists to provide. Not currently triggered by screen.html's content, but worth hardening since this test is meant to catch future markup regressions.

♻️ Suggested tightening

-        if (VOID.has(name) || /\/\s*$/.test(attrs)) continue;
+        if (VOID.has(name) || /(?:^|[^"'])\/\s*$/.test(attrs)) continue;

🤖 Prompt for 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.

In `@tests/screen_markup.test.mjs` at line 56, Tighten the self-closing check in
the markup walker around the VOID condition so it recognizes only an XHTML-style
slash outside quoted attribute values, rather than any trailing slash in raw
attrs. Preserve void-element handling and ensure elements with values such as
class="foo/" remain on the stack so malformed markup is detected.

🤖 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.

Nitpick comments:
In `@tests/screen_markup.test.mjs`:
- Line 56: Tighten the self-closing check in the markup walker around the VOID
condition so it recognizes only an XHTML-style slash outside quoted attribute
values, rather than any trailing slash in raw attrs. Preserve void-element
handling and ensure elements with values such as class="foo/" remain on the
stack so malformed markup is detected.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 893b1ba9-cd52-4ba5-b2b3-4c3f7c906b02

📥 Commits

Reviewing files that changed from the base of the PR and between e02a003 and 8ac0acd.

📒 Files selected for processing (3)

• CHANGELOG.md
• screen.html
• tests/screen_markup.test.mjs