fix: restore local audio loading

Author: RubenGlez

CLAUDE.md

@@ -5,21 +5,22 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## Commands
 
 ```bash
-npm run dev          # start Electron app in development (hot reload)
-npm run tsc          # type-check without emitting
-npm run lint         # ESLint
-npm run lint:fix     # ESLint with auto-fix
-npm run prettier:fix # format src/
-npm run build        # full production build (tsc + vite + electron-builder)
+pnpm dev          # start Electron app in development (hot reload)
+pnpm tsc          # type-check without emitting
+pnpm lint         # ESLint
+pnpm lint:fix     # ESLint with auto-fix
+pnpm prettier:fix # format src/
+pnpm build        # full production build (tsc + vite + electron-builder)
+pnpm tag patch    # bump version, push main, and push release tag
 ```
 
-There are no tests yet. After any change, `npm run tsc` is the fastest correctness check.
+This project uses pnpm (`packageManager` is pinned in `package.json`). There are no tests yet. After any change, `pnpm tsc` is the fastest correctness check.
 
-After `npm install`, the `postinstall` script runs `electron-rebuild -f -w better-sqlite3` automatically. If the app crashes on startup with a native module error, re-run `npm install` to rebuild.
+After `pnpm install`, the `postinstall` script runs `electron-rebuild -f -w better-sqlite3` automatically. If the app crashes on startup with a native module error, re-run `pnpm install` to rebuild.
 
 ## Architecture
 
-SampleByte is an Electron 33 + React 19 + TypeScript desktop app. The full vision and technical decisions are in `docs/ARCHITECTURE.md`. The product roadmap is in `docs/ROADMAP.md`. UI design system, color tokens, and macOS conventions are in `docs/DESIGN.md` — read it before touching any UI code.
+SampleByte is an Electron 41 + React 19 + TypeScript desktop app. The full vision and technical decisions are in `docs/ARCHITECTURE.md`. The product roadmap is in `docs/ROADMAP.md`. UI design system, color tokens, and macOS conventions are in `docs/DESIGN.md` — read it before touching any UI code.
 
 ### Three processes
 

README.md

@@ -58,7 +58,7 @@ No YouTube. Not because it isn't useful (the original version of this app was bu
 
 ## Tech Stack
 
-- **Electron 33** + **React 19** + **TypeScript**
+- **Electron 41** + **React 19** + **TypeScript**
 - **Vite** + vite-plugin-electron
 - **Zustand** for state management
 - **better-sqlite3** for the sample library database
@@ -119,12 +119,12 @@ Click "More info" then "Run anyway" to get past the unsigned-app warning.
 ```bash
 git clone https://github.com/RubenGlez/samplebyte
 cd samplebyte
-npm install
-npm run dev   # development (hot reload)
-npm run build # production build
+pnpm install
+pnpm dev   # development (hot reload)
+pnpm build # production build
 ```
 
-Requires Node.js v18+.
+Requires Node.js v18+ and pnpm. The project pins its pnpm version in `package.json`.
 
 ---
 

docs/ARCHITECTURE.md

@@ -141,6 +141,14 @@ Analysis runs once when audio is loaded into the Chop view. Results are stored o
 
 ---
 
+## Local Audio Files
+
+Renderer code does not read native file paths directly through `file://`. Local audio is exposed through the privileged `local-file://` protocol registered in `electron/main/index.ts`, which streams files with CORS headers so WaveSurfer, `<audio>`, and `fetch`-based analysis can all load the same URL.
+
+When a user drops a file, the renderer asks the preload bridge for the native path via `webUtils.getPathForFile(file)`. Build `local-file://` URLs with `toLocalFileUrl()` from `src/utils/index.ts`; do not concatenate raw paths by hand. The protocol handler accepts Chromium's host/path URL form and reconstructs the absolute path before forwarding to `net.fetch(pathToFileURL(...))`.
+
+---
+
 ## Freesound Integration
 
 Freesound has a public REST API with Creative Commons licensed audio. The API key is stored in the main process (never exposed to the renderer) and all requests are proxied through the `freesound:*` IPC handlers in `electron/main/ipc/freesound.ts`. Downloaded files are added to the library automatically.

electron/main/index.ts

@@ -22,7 +22,17 @@ process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
 
 // Must be called before app.ready
 protocol.registerSchemesAsPrivileged([
-  { scheme: 'local-file', privileges: { secure: true, supportFetchAPI: true, bypassCSP: true, stream: true } },
+  {
+    scheme: 'local-file',
+    privileges: {
+      standard: true,
+      secure: true,
+      supportFetchAPI: true,
+      corsEnabled: true,
+      bypassCSP: true,
+      stream: true,
+    },
+  },
 ])
 
 if (release().startsWith('6.1')) app.disableHardwareAcceleration()
@@ -96,11 +106,22 @@ async function createWindow() {
 
 app.whenReady().then(() => {
   // Serve local audio files to the renderer without cross-origin restrictions
-  protocol.handle('local-file', (request) => {
-    const filePath = decodeURIComponent(request.url.slice('local-file://'.length))
+  protocol.handle('local-file', async (request) => {
+    const url = new URL(request.url)
+    const filePath = decodeURIComponent(
+      url.hostname ? `/${url.hostname}${url.pathname}` : url.pathname
+    )
     // pathToFileURL properly percent-encodes spaces and special chars (e.g. paths under
     // "Application Support"). Plain `file://${filePath}` breaks on macOS userData paths.
-    return net.fetch(pathToFileURL(filePath).href)
+    const response = await net.fetch(pathToFileURL(filePath).href)
+    const headers = new Headers(response.headers)
+    headers.set('Access-Control-Allow-Origin', '*')
+    headers.set('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS')
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers,
+    })
   })
 
   if (!url) {

electron/preload/index.ts

@@ -1,4 +1,4 @@
-import { ipcRenderer, contextBridge } from 'electron'
+import { ipcRenderer, contextBridge, webUtils } from 'electron'
 import type { Sample, Pack, PackSlot, Project, ProjectRegion, ExportRegionsParams, FreesoundPage } from '../types'
 
 contextBridge.exposeInMainWorld('api', {
@@ -52,6 +52,9 @@ contextBridge.exposeInMainWorld('api', {
   },
 
   fs: {
+    getPathForFile: (file: File): string =>
+      webUtils.getPathForFile(file),
+
     pickFile: (): Promise<string | null> =>
       ipcRenderer.invoke('fs:pickFile'),
 

package.json

@@ -46,17 +46,18 @@
   },
   "devDependencies": {
     "@electron/rebuild": "^4.0.4",
+    "@eslint/js": "^10.0.1",
     "@types/better-sqlite3": "^7.6.13",
     "@types/fluent-ffmpeg": "^2.1.24",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@eslint/js": "^10.0.1",
     "@typescript-eslint/eslint-plugin": "^8.59.4",
     "@typescript-eslint/parser": "^8.59.4",
     "@vitejs/plugin-react": "^4.0.4",
     "autoprefixer": "^10.4.16",
     "electron": "41.6.1",
     "electron-builder": "^26.8.1",
+    "esbuild": "^0.28.0",
     "eslint": "^10.4.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",