Fix subpath asset URL resolution

[ford442]

Motivation

• Deployments under a subpath (e.g. /xm-player/) produced 404s for worklets, shaders, media and API fallbacks because many runtime asset URLs were built as root-relative paths. 404 HTML was being fed into WGSL compilation and AudioWorklet loading, causing runtime failures.

Description

• Add runtime base-path detection and helpers: detectRuntimeBase() and withBase() in src/lib/paths.ts and switch URL construction to use those helpers instead of relying directly on import.meta.env.BASE_URL when that value is /.
• Use the new helpers across the codebase to resolve assets correctly under subpaths, including: worklet loading and diagnostics (hooks/useWorkletLoader.ts), JS/C++ worklet glue and native engine paths (audio-worklet/OpenMPTWorkletEngine.ts, hooks/useAudioGraph.ts, hooks/useLibOpenMPT.ts), shader loading and background shader loading (hooks/useWebGPURender.ts), compute shader (utils/computeNoteDuration.ts), bloom post-processor (components/PatternDisplay.tsx), thumbnails (components/ShaderSelectorPanel.tsx), remote media listing (utils/remoteMedia.ts), and storage API fallback handling (utils/storageApi.ts).
• Harden shader and compute shader fetches with explicit HTTP status checks and meaningful errors so WGSL/compute shader compilation does not receive HTML error pages.
• Propagate the detected runtime base into worklet processorOptions.baseUrl and native engine initialization so the worklet can resolve its companion assets correctly.
• Minor TypeScript/API fix: adapt the onSaveModule callback to return a Promise<void> (App.tsx) to satisfy strict typing while preserving behavior.

Testing

• Ran type checking with npm run typecheck (passed).
• Ran linter with npm run lint (project linter is currently a no-op; command exited 0).
• Verified production builds with npm run build and with VITE_APP_BASE_PATH=/xm-player/ npm run build (both completed successfully; Vite emitted an unrelated CSS minification warning about inst ≈ inset).
• Attempted the packing invariant smoke test (node utils/__debug__/packingInvariants.test.cjs), but the test invocation uses npx tsx and was blocked in this environment by a 403 Forbidden from the npm registry, so that debug script could not complete here.

---

Codex Task

Summary by CodeRabbit

• Bug Fixes
  • Fixed asset and shader loading for deployments with custom base paths or subdirectories.
  • Improved error handling and reporting when assets fail to load.
  • Enhanced URL resolution for various hosting configurations.

[coderabbitai]

Too many files changed? Review this PR in Change Stack to see how the pieces fit before you dive in.

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: dbe702dd-f244-43f6-9ee0-3cebb7fd41a5

📥 Commits

Reviewing files that changed from the base of the PR and between 597707f and 02758bf.

📒 Files selected for processing (12)

• App.tsx
• audio-worklet/OpenMPTWorkletEngine.ts
• components/PatternDisplay.tsx
• components/ShaderSelectorPanel.tsx
• hooks/useAudioGraph.ts
• hooks/useLibOpenMPT.ts
• hooks/useWebGPURender.ts
• hooks/useWorkletLoader.ts
• src/lib/paths.ts
• utils/computeNoteDuration.ts
• utils/remoteMedia.ts
• utils/storageApi.ts

---

📝 Walkthrough

Walkthrough

This PR refactors how the application resolves asset and API URLs at runtime. Build-time import.meta.env.BASE_URL dependencies are replaced with runtime detection via window.location to support subpath deployments. The core path utility functions are updated, then applied consistently across worklet, shader, media, and API URL construction. Shader loading also gains error validation.

Changes

Runtime base URL resolution

Layer / File(s)	Summary
Core path utility helpers src/lib/paths.ts	detectRuntimeBase() derives the runtime base from window.location.pathname using substring logic. withBase() and withBaseAbsolute() now call detectRuntimeBase() and normalize path inputs; withBaseAbsolute() constructs absolute URLs using window.location.origin.
Worklet and audio asset URL resolution audio-worklet/OpenMPTWorkletEngine.ts, hooks/useWorkletLoader.ts, hooks/useAudioGraph.ts, hooks/useLibOpenMPT.ts	Worklet paths, native Emscripten glue, and AudioWorklet module/processor URLs are now resolved via withBase() and detectRuntimeBase(). Diagnostic reporting uses the new runtime-detected base path.
Shader and graphics asset URL resolution hooks/useWebGPURender.ts, utils/computeNoteDuration.ts, components/ShaderSelectorPanel.tsx, components/PatternDisplay.tsx	Shader and thumbnail URLs are resolved via withBase(). Shader fetch operations now validate response.ok and throw errors with HTTP status on failure. Bloom processor base URL is set via detectRuntimeBase().
API and media URL construction utils/storageApi.ts, utils/remoteMedia.ts	Storage API and media folder URLs use withBase() for base-path-aware construction. API paths are constructed via withBase() when storage base URL is unset.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• ford442/mod-player#175: Both PRs update worklet/native glue URL construction in hooks/useWorkletLoader.ts and hooks/useLibOpenMPT.ts with base-path logic improvements.
• ford442/mod-player#170: Both PRs adjust AudioWorklet and native glue URL construction to use shared, correct URL/base-path resolution across multiple hooks.
• ford442/mod-player#199: Both PRs update hooks/useAudioGraph.ts worklet initialization to load libopenmpt assets using resolved base-path-aware URLs.

Poem

🐰 Beneath the midnight moon we hop,
Base paths resolved from the URL top,
No more build-time guessing games,
Runtime detection stakes its claims,
Worklets, shaders, media in stride,
Subpath deployments open wide! ✨

✨ 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 codex/fix-app-resource-loading-errors

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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