404-Layers/CLAUDE.md

SP-404MK2 layers

A combo trainer for the Roland SP-404MK2, wrapped as a sideloaded Android APK.

Phase 1 (current): the original single-file web app, wrapped in Capacitor as-is. Phase 2 (next): port to React + TypeScript via Vite — data and pure logic with tests first, then UI, then multitouch input.

Layout

reference/     The original working web app. FROZEN — this is the spec.
               Never edit it. Behaviour, data and styling are all defined here.
native/        Native-only additions (native.css, native.js). Not in reference.
scripts/       install-android-toolchain.sh, sync-www.sh
www/           GENERATED by sync-www.sh. Never edit by hand, never committed.
android/       Generated by `npx cap add android`. A few files are hand-edited
               (see "Hand-edited native files" below).

Commands

Command	What it does
npm run sync:www	Rebuild www/ from reference/ + native/
npm run sync	The above, then npx cap sync android
npm run apk	Sync, then ./gradlew assembleDebug
npm run install:apk	adb install -r the debug APK
npm run run:android	Build + install in one go — the usual loop
npm run logcat	Tail Capacitor + web console output from the device

APK lands at android/app/build/outputs/apk/debug/app-debug.apk.

The Gradle build needs these in the environment (persisted to ~/.zshrc by the install script):

JAVA_HOME=/usr/lib/jvm/java-21-openjdk-amd64
ANDROID_HOME=$HOME/Android/Sdk

Driving the device

The screen must be awake and unlocked before launching, every time. While the display dozes, TCL denies the WebView renderer and the app comes up blank with no crash, no JS error and an empty document.title. The failure is sticky for the life of the process, so waking the phone afterwards does not repair it — the app has to be force-stopped and started again.

scripts/device.sh handles this so it cannot be forgotten:

Command	What it does
npm run device:keep-awake	Stay awake while charging. Do this at the start of a session.
npm run device:launch	Check awake/unlocked, force-stop, start, wait for the page to actually parse
npm run device:awake	Just the check — prints a loud warning if locked
npm run device:sleep-normal	Revert the stay-awake setting when finished

device:launch waits for the page, not merely for the activity: the activity starts fine even when the renderer was denied. On failure it prints the AppBootManager denial lines rather than leaving a blank window to puzzle over.

It also reads the pid after starting the app. adb install -r kills the running process, so a pid captured earlier points at a dead process and the devtools socket lookup fails while the app itself is healthy — that produced one false "page never loaded" during Phase 1.

To attach Chrome DevTools by hand: chrome://inspect, or adb forward tcp:9333 localabstract:webview_devtools_remote_$(adb shell pidof dev.ncode.sp404layers) and open http://127.0.0.1:9333/json.

Toolchain (verified, do not bump blind)

Pinned against Capacitor 8.5.2's capacitor/build.gradle: compileSdk 36, targetSdk 36, minSdk 24, Java 21.

• JDK 21 — required by Capacitor 8; openjdk-21-jdk from apt
• cmdline-tools 15859902
• build-tools 36.1.0 — pairs with compileSdk 36
• platforms android-35, android-36

sdkmanager prints a deprecation warning pointing at the newer android CLI. It still works, and it writes the licenses/ directory that Gradle checks. The replacement downloads itself on first run and gates on an interactive ToS, which is worse in an idempotent install script. Revisit if it actually breaks.

Decisions

reference/ is never edited. It is the Phase 2 spec, so it has to stay byte-for-byte comparable. Everything native-specific is either an additive file or one of three removals applied by sync-www.sh, which asserts each anchor exists and fails loudly if the reference ever changes shape.

The three removals:

1. Service worker registration — would cache index.html and serve a stale app after an APK update. Assets are already local, so it buys nothing.
2. Web manifest link — the APK's own manifest governs the app.
3. Nothing else. native.css and native.js are injected, not substituted.

Haptics needs no reference change. buzz() is a const and cannot be reassigned, but it calls navigator.vibrate, which can be overridden. native.js redefines that to dispatch to @capacitor/haptics: scalar → impact, array → notification({type:"SUCCESS"}), >15 → notification({type:"ERROR"}).

Storage mirrors rather than migrates. localStorage stays the synchronous source of truth so load()/save() keep their signatures. save() is wrapped to mirror into @capacitor/preferences (SharedPreferences), which survives a "clear app data" wipe. On boot, if localStorage is empty but Preferences is not, it restores and re-renders. A full async port was rejected as a refactor of code about to be rewritten in React anyway.

Back button is owned by native.js: sheet open → close it; otherwise not on Explore → go to Explore; otherwise exit. Registering a listener suppresses Capacitor's default history navigation.

Edge-to-edge is handled natively, not avoided. Android 16 is API 36 and Capacitor 8 targets SDK 36, which is exactly the combination where windowOptOutEdgeToEdgeEnforcement stops working. An Android WebView never populates env(safe-area-inset-*), so MainActivity installs an OnApplyWindowInsetsListener, converts px → dp, and pushes the values into --ins-t/r/b/l via window.__applyInsets(). native.css re-points the reference's --sab at --ins-b, so .bnav and .sheet need no changes.

The push retries on a bounded schedule (25 × 200ms) because insets typically arrive before the page has run any JS.

No community plugins. Only first-party: @capacitor/core, /cli, /android, /haptics, /preferences, /app.

Debug signing. The debug keystore is stable per-machine, so Phase 2's APK installs over Phase 1's without an uninstall and drill progress survives. appId is dev.ncode.sp404layers and must not change for the same reason.

Phase 2 must carry these UI changes

Phase 1 fixes a strip ergonomics problem in native/native.{css,js} rather than in reference/, which stays frozen. The React port must reproduce these, since they will not come along with the reference:

1. The two chip rows sit flush on phones. The reference spaces them with #strip .chips + .chips { margin-top: 6px }, but the .lbl heading between them is display:none on phones and still in the DOM, so the adjacent-sibling selector never matches. Measured gap: 0px. Both selected chips are also light-filled and left-aligned, so they visually merge into one shape.
2. The 7 context chips collapse into one 44px control that opens the existing sheet, freeing a row for the panel. The sheet rows show CTXHINT, which the phone layout otherwise never displays.
3. Chip targets go from 34.9px to 44px. They scroll horizontally, so an undersized target turns a mis-hit into a scroll instead of a tap.
4. Overflowing rows get a right-edge fade. Scrollbars are hidden, and both rows overflow badly (703px and 952px of content in a 360px viewport) with nothing indicating more content. The fade is applied only to rows that actually overflow.

In React this should be real component state, not a post-render DOM patch: Phase 1 has to re-apply the collapse after every renderExplore() because that function rewrites #strip wholesale.

Hand-edited native files

cap sync does not regenerate these — keep them when recreating android/:

• android/app/src/main/java/dev/ncode/sp404layers/MainActivity.java — inset bridge
• android/app/src/main/AndroidManifest.xml — android:screenOrientation="portrait"

Device notes (TCL 50 PRO NXTPAPER 5G, Android 16 / API 36)

adb needs a udev rule. The phone is USB 1bbb:0c01. Ubuntu's android-sdk-platform-tools-common matches vendor and product, and lists only older TCL products, so nothing matched and the device node stayed root:root. Fixed with a vendor-wide rule (product IDs change with USB mode):

echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="1bbb", MODE="0660", GROUP="plugdev", TAG+="uaccess"' \
  | sudo tee /etc/udev/rules.d/51-android-tcl.rules
sudo udevadm control --reload-rules && sudo udevadm trigger

It lives in /etc/udev so apt upgrades don't overwrite it. The uaccess tag grants the logged-in session access, so no logout is needed.

A blank grey window means the screen was off when the app started. TCL's AppBootManagerService refuses to let the app bind the WebView's sandboxed renderer process while the display is dozing:

W/AppBootManager: Type[TYPE_SERVICE];Result[false];
  Target[org.chromium.content.app.SandboxedProcessService0];
  Caller[dev.ncode.sp404layers];Reason[screen_off & caller care]
E/cr_ChildProcessConn: Failed to establish the service connection.

With no renderer the page never parses, so there is no crash, no JS error, an empty document.title, and DevTools Runtime.evaluate hangs. The failure is sticky for the life of the process — reopening from Recents keeps the grey window. Wake and unlock the phone first, then am force-stop and relaunch. This is an OEM policy, not an app bug, and it only bites when launching over adb.

Gotchas

• The reference's multitouch relies on touch-action:none on .unit plus per-pointerId tracking in a Map. This is the most delicate part to port in Phase 2 — read exDown/exUp/drDown/drUp before touching it.
• store, st and SK are const/let at classic-script top level: reachable by bare name from native.js, but absent from window. save/render/ closeSheet are function declarations, so they are on window and can be wrapped.