Plan for the approved design at
docs/superpowers/specs/2026-06-27-scrub-driven-altitude-transitions-design.md.
Two phases: (1) scrub interaction against current morphs, (2) all-intra re-bake.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Ships the altitude clip-pair morph transition system (154 directional morphs,
pick-then-morph, chained, lock-per-altitude), graduated experience media into
git-LFS, the Playwright E2E tier, and the dial-needle sweep. Also lands the
approved design spec for the next increment (scrub-driven transitions).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
# Scrub-driven Altitude Transitions Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Make the Altitude knob position *continuously* drive the scale transition — dragging the dial scrubs the morph video's `currentTime` and crossfades the two adjacent scale soundtracks by knob angle, holding wherever the knob stops, fully reversible.
**Architecture:** Introduce a continuous float **position**`pos` (integers = altitudes/detents, fractions = mid-morph blend). A small pure module (`scrub.js`) owns the math (position→segment, frac→currentTime, audio gains, integer-crossing detection); `app.js` becomes the DOM/event glue that drives `pos` from the dial, seeks the morph `<video>`, crossfades two `<audio>` elements, and commits/locks/re-rolls on integer crossings. Phase 1 builds the interaction against the *current* (sparse-GOP) morphs to validate feel; Phase 2 re-bakes all 154 morphs all-intra for smooth seeking.
**Tech Stack:** Vanilla JS (no framework, plain `<script>`), Node built-in `node --test` for pure-logic unit tests, Playwright for E2E, Python + ffmpeg/x264 for the morph re-bake (`simulator/build_pool_manifest.py`), git-LFS for media.
## Global Constraints
- **Spec contract:** `docs/superpowers/specs/2026-06-27-scrub-driven-altitude-transitions-design.md` — implement its locked decisions verbatim.
- **In-between state:** hold the blend wherever the knob stops — **no auto-complete** (continuous-encoder model).
- **Turn-back:** scrubs the **same** segment morph in reverse; landing back on the start integer re-locks **exactly** the clip you left (fully reversible).
- **Destination randomness:** the destination altitude's clip is a random pick from its pool, **fixed for a single continuous gesture**, **re-rolled on each fresh approach** (each fresh entry into a segment from an integer).
- **Scroll wheel:** auto-scrub one altitude over ~0.6 s, then lock. **Tap a dial label:** auto-scrub to that altitude the shortest way around.
- **Lock-per-altitude** still holds: a resting altitude's clip stays locked until you commit into a different one.
- **Canonical segment file (locked interpretation):** for the segment between altitude indices `lo` and `lo+1`, always use the **descend/forward** morph `morphByPair["<clip@lo>→<clip@lo+1>"]`, with `currentTime = frac × duration`. Reverse travel seeks the **same** file backward. `.rev` files are not used by the scrub interaction (they remain baked for back-compat).
- **Git transport:** SSH only (`ssh://git@git.benstull.org/...`). No inline trailing comments on shell/CLI command lines.
- **Pipeline:** ship via §9 — localhost + E2E green → PPE + E2E green → prod (prod human-gated). Every UI change carries its E2E browser tests as first-class tasks.
---
## File Structure
- **Create** `simulator/static/scrub.js` — pure scrub math, UMD (browser global `HEFScrub` + CommonJS `module.exports`). No DOM.
- **Create** `simulator/unit/scrub.test.js` — `node --test` unit suite for `scrub.js`.
- **Create** `simulator/unit/README.md` — one-liner on running the unit suite.
- **Modify** `simulator/static/index.html` — load `scrub.js` before `app.js`; add a second `<audio id="aud-b" loop preload="auto">`.
- **Modify** `simulator/static/app.js` — replace the discrete drag/wheel/tap `advance()` flow with the scrub engine (`setPos`, `rebuildSegment`, `commitCrossings`, auto-scrub animator); two-element audio crossfade; client-side clip pick from `scale.pool`.
- **Modify** `simulator/e2e/tests/altitude-lock.spec.ts` (or add `scrub.spec.ts`) — assert `currentTime` + the two audio gains track the dial angle and reverse on turn-back; full turn commits+locks; wheel auto-scrubs one altitude and locks.
-`scaleAudioUrl(index: number): string|null` — the soundtrack URL for ring scale `index` (wrapped), using the ring `audio` field then `SCALE_AUDIO_FALLBACK`.
-`blendAudio(loIndex: number, frac: number): void` — element A plays scale `loIndex`, element B plays scale `loIndex+1` (wrapped), gains `crossfadeGains(frac)`; loads each element's src on first use per gesture. No-op when Audio toggle is off.
-`restAudio(index: number): void` — settle to a single scale at rest (full gain on the element holding `index`, fade the other to 0). Replaces the tail of `applyAudio()` for the at-rest case.
- [ ]**Step 1: Add the second audio element + scrub.js script tag**
In `simulator/static/index.html`, beside the existing `<audio id="aud" loop preload="auto"></audio>` (line ~21), add:
```html
<audioid="aud"looppreload="auto"></audio>
<audioid="aud-b"looppreload="auto"></audio>
```
And load the pure module before `app.js` (line ~112):
```html
<scriptsrc="/scrub.js"></script>
<scriptsrc="/app.js"></script>
```
- [ ]**Step 2: Write the failing E2E expectation (gains exist on two elements)**
Add to `simulator/e2e/tests/altitude-lock.spec.ts` a focused check (full assertions land in Task 5; this verifies the element + hook exist):
```ts
test("two audio elements exist for crossfade",async({page})=>{
Expected: FAIL until the markup change is loaded (and PASS once the running server serves the new `index.html`).
- [ ]**Step 3: Implement the crossfade audio layer in `app.js`**
Replace the single-element logic around `playUrl`/`applyAudio` (app.js ~1019–1045). Keep `aud` as element A and add `audB` as element B; generalize URL resolution by index:
```js
constaud=$("aud");
constaudB=$("aud-b");
letaudLastErr="";
// Soundtrack URL for ring scale `index` (wrapped), ring `audio` field then fallback.
Then make the Audio toggle and altitude-rest paths call `restAudio(ringIndex)` instead of the old `applyAudio()` swap. Keep `applyAudio()` as a thin shim that calls `restAudio(ringIndex)` so existing call sites (e.g. the toggle handler at ~1073, `update()`) keep working:
```js
functionapplyAudio(){restAudio(ringIndex);}
```
- [ ]**Step 4: Run unit suite + the focused E2E**
Run: `node --test simulator/unit/scrub.test.js`
Expected: PASS.
Run: `cd simulator/e2e && npx playwright test -g "two audio elements"` (with the dev server running)
-`pos` (module-level float; rest value = `ringIndex`).
-`pickPoolClip(index: number): string` — random `clip_id` from ring scale `index`'s pool (wrapped).
-`rebuildSegment(lo: number, enteredFrom: number): void` — sets `activeSeg = { lo, clipLo, clipHi, file }`; the side equal to the just-rested altitude takes `activeClipId`, the other is a fresh `pickPoolClip` (re-roll); `file = morphByPair["<clipLo>→<clipHi>"]` (descend canonical).
-`setPos(next: number, opts?: { commit?: boolean }): void` — clamps thrash via one seek per rAF; seeks `vid.currentTime = fracToTime(frac, dur)`; `setNeedle(next * dialStep())`; `blendAudio(lo, frac)`; processes `integerCrossings(pos, next)` to commit/lock/re-roll; updates `pos`.
-`commitTo(index: number): void` — `ringIndex = wrapIndex(index,n)`, `activeClipId = clip at that index for the active segment`, settle base loop + `restAudio` when frac becomes 0.
// No auto-complete: hold wherever the knob stopped (continuous-encoder model).
}
```
Keep `renderDial()` reading `pos` for the needle when mid-segment, else `ringIndex`. Retire `advance()`'s body (or leave it unused) — wheel/tap use the auto-scrub in Task 4.
- [ ]**Step 3: Run the focused E2E**
Run: `cd simulator/e2e && npx playwright test -g "scrubs morph currentTime"` (dev server running)
Expected: PASS.
- [ ]**Step 4: Run the unit suite (no regressions)**
-`autoScrub(targetPos: number, ms = 600): void` — rAF-animates `pos` from its current value to `targetPos` (calling `setPos` each frame), landing exactly on the integer target, then locks (frac 0 settles in `setPos`).
- [ ]**Step 1: Write the failing E2E (wheel auto-scrubs one altitude then locks)**
Add to the E2E spec:
```ts
test("wheel auto-scrubs one altitude and locks",async({page})=>{
- Consumes: the running simulator, `window.__hefMorphs`, `#scale-name`, `#dial`, `video`, `#aud`/`#aud-b`.
- [ ]**Step 1: Replace the `.rev`-asserting reverse test with a scrub-reverse test**
The old "zoom back out plays a reverse morph" test asserted a `.rev.mp4` file. Under the scrub model, turn-back seeks the **same** segment morph backward. Replace it:
```ts
test("turn-back scrubs the same morph in reverse and re-locks the start clip",async({page})=>{
- [ ]**Step 2: Run the full Python test suite (no regressions)**
Run: `python -m pytest -q`
Expected: PASS (existing tally; no new failures).
- [ ]**Step 3: Boot the simulator and run E2E against it**
Run (server): start the simulator dev server per `simulator/` README on its configured port with the venv python.
Run (tests): `cd simulator/e2e && npx playwright test`
Expected: all PASS.
- [ ]**Step 4: Eyeball the feel**
Confirm by hand: slow drag eases the morph slowly; fast drag races it; stopping mid-drag holds a blended frame with mixed audio; turning back reverses; the wheel auto-scrubs one altitude and locks; a label tap travels the shortest way. Note any steppiness (expected on sparse-GOP morphs — Phase 2 fixes it).
- [ ]**Step 5: Checkpoint the transcript**
Re-publish the in-progress transcript (no commit needed beyond what tasks already pushed).
---
## Phase 2 — All-intra morph re-bake for smooth seeking
### Task 7: Re-bake the 154 morphs all-intra (dense keyframes)
- Produces: every baked morph encoded all-intra (each frame a keyframe) so arbitrary-frame seeking is smooth.
- [ ]**Step 1: Write the failing arg-builder test**
`_make_transition`/`_make_reverse` currently call `subprocess.run` directly, so factor the ffmpeg command into a pure builder to test it. Add to `simulator/build_pool_manifest.py`:
Run: `python simulator/build_pool_manifest.py` (or its documented `generate_media` entrypoint) to re-bake all 154 morphs all-intra. Confirm files regrew (sparse → dense keyframes; expect ~0.5–0.9 GB total, each clip well under the 25 MB LFS/proxy ceiling noted in memory).
- [ ]**Step 5: Commit the re-baked media via git-LFS**
**Placeholder scan:** none — every code step carries real code and exact commands.
**Type consistency:**`setPos`, `rebuildSegment`, `activeSeg {lo,clipLo,clipHi,file}`, `pickPoolClip`, `blendAudio(loIndex,frac)`, `restAudio(index)`, `scaleAudioUrl(index)`, `autoScrub(targetPos,ms)`, `HEFScrub.*` names are used consistently across Tasks 1–5. `transition_cmd`/`reverse_cmd`/`ALL_INTRA` consistent in Tasks 7.
**Open interpretation (logged as deferred decision):** the canonical-segment-file choice (always the descend/forward morph, scrubbed bidirectionally; `.rev` unused by scrub) reinterprets the spec's literal `morphByPair["<from>→<to>"]` directed lookup in favor of its "scrub the same morph in reverse" + full-reversibility requirements. Surfaced for operator awareness at finalize.
- Audio + Video experience **works and is operator-confirmed** on the real device.
- New E2E regressions: stale-ring soundtrack fallback, audio-then-video ordering.
- The operator's actual server is still stale — recommended (not required) they restart
it so the API is current; the client no longer depends on it.
## Operator plate / lesson
- **The big lesson (recorded in memory):** headless Playwright relaxes BOTH autoplay and
GPU compositing, so it cannot reproduce real-browser/real-server issues. When a fix
"passes headless" but the operator still sees the bug, **instrument with on-screen
readouts + a native control** to get their real data — don't ship another blind guess.
Three rounds were lost to this before instrumenting.
## Next /goal
```
/goal source/compose the deferred per-altitude music layer (the reserved Audio dial position) per docs/audio-candidate-pool.md — the Audio+Video experience is working & operator-confirmed; OR re-enable white-noise as a 3rd Audio position if wanted
capture this as an issue. We'll implement the network feature later but want it as an Epic, then the remote simulator (e.g. ipad) as a feature with this design
```
## Pre-state
- Immediately followed session 0019 (brainstorming), which merged the
**networked control surface** design SPEC to `main`
(the unscoped default resolves to the wrong host and 401s).
## Next /goal
No new immediate next from this capture — the work is parked on the tracker
(#26/#27, deferred). When the operator resumes hardware:
```
/goal Write the implementation plan for the remote controller simulator, per docs/superpowers/specs/2026-06-26-networked-control-surface-design.md (Feature #27)
```
The active project frontier remains the per-altitude music layer (see the
`audio-soundtrack-sourcing` memory), not this deferred thread.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.