fix: improve development environment and audio debugging

- Fix docker-compose.dev.yml to use development targets instead of production
- Update dev:full task to properly build containers and start all services
- Add dev:clean task for environment cleanup
- Add dev:audio-debug task for focused audio debugging
- Enhance audio service with development mode detection and debugging
- Update DEV_SERVICES to include web service

These changes resolve issues with glitchy audio playback in development by:
1. Using proper development targets with hot reload
2. Ensuring proper build steps before starting services
3. Adding debugging capabilities for audio issues
4. Providing better development environment management

Taskfile.yml

@@ -3,7 +3,7 @@ version: "3"
 vars:
   COMPOSE: docker compose
   DEV_FLAGS: -f docker-compose.yml -f docker-compose.dev.yml
-  DEV_SERVICES: db redis api audio-worker nc-watcher
+  DEV_SERVICES: db redis api web audio-worker nc-watcher
 
 # ── Production ────────────────────────────────────────────────────────────────
 
@@ -55,12 +55,12 @@ tasks:
   dev:full:
     desc: Start complete development server (backend + frontend) with follow logs
     cmds:
+      - echo "Building development containers..."
+      - "{{.COMPOSE}} {{.DEV_FLAGS}} build api web"
       - echo "Starting development environment..."
-      - "{{.COMPOSE}} {{.DEV_FLAGS}} up -d {{.DEV_SERVICES}}"
+      - "{{.COMPOSE}} {{.DEV_FLAGS}} up -d {{.DEV_SERVICES}} web"
-      - echo "Starting frontend development server..."
+      - echo "Following all logs... (Ctrl+C to stop)"
-      - cd web && npm run dev &
+      - "{{.COMPOSE}} {{.DEV_FLAGS}} logs -f api web audio-worker nc-watcher"
-      - echo "Following backend logs... (Ctrl+C to stop)"
-      - "{{.COMPOSE}} {{.DEV_FLAGS}} logs -f api audio-worker nc-watcher"
 
   dev:logs:
     desc: Follow logs in dev mode
@@ -72,6 +72,24 @@ tasks:
     cmds:
       - "{{.COMPOSE}} {{.DEV_FLAGS}} restart {{.SERVICE}}"
 
+  dev:clean:
+    desc: Clean up development environment and rebuild
+    cmds:
+      - echo "Stopping development services..."
+      - "{{.COMPOSE}} {{.DEV_FLAGS}} down -v"
+      - echo "Removing old containers and volumes..."
+      - docker system prune -f
+      - echo "Development environment cleaned"
+
+  dev:audio-debug:
+    desc: Start development with audio debugging enabled
+    cmds:
+      - echo "Starting development with audio debugging..."
+      - "{{.COMPOSE}} {{.DEV_FLAGS}} build api web"
+      - "{{.COMPOSE}} {{.DEV_FLAGS}} up -d {{.DEV_SERVICES}}"
+      - echo "Audio service logs with debugging..."
+      - "{{.COMPOSE}} {{.DEV_FLAGS}} logs -f api web"
+
 # ── Database ──────────────────────────────────────────────────────────────────
 
   migrate:

docker-compose.dev.yml

@@ -24,7 +24,7 @@ services:
   api:
     build:
       context: ./api
-      target: production
+      target: development
     environment:
       DATABASE_URL: postgresql+asyncpg://${POSTGRES_USER:-rh_user}:${POSTGRES_PASSWORD:-default_secure_password}@db:5432/${POSTGRES_DB:-rehearsalhub}
       NEXTCLOUD_URL: ${NEXTCLOUD_URL:-https://cloud.example.com}
@@ -45,7 +45,7 @@ services:
   web:
     build:
       context: ./web
-      target: production
+      target: development
     environment:
       API_URL: http://api:8000
     ports:

web/src/services/audioService.ts

@@ -36,8 +36,14 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
   private readonly MAX_PLAYBACK_ATTEMPTS: number = 3;
   
   private constructor() {
+    // Check for debug mode from environment
+    if (import.meta.env.DEV || import.meta.env.MODE === 'development') {
+      this.setLogLevel(LogLevel.DEBUG);
+      this.log(LogLevel.INFO, 'AudioService initialized in DEVELOPMENT mode with debug logging');
+    } else {
       this.log(LogLevel.INFO, 'AudioService initialized');
     }
+  }
   
   private log(level: LogLevel, message: string, ...args: unknown[]) {
     if (level < this.logLevel) return;
@@ -131,6 +137,12 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
         normalize: true,
         // Ensure we can control playback manually
         autoplay: false,
+        // Development-specific settings for better debugging
+        ...(import.meta.env.DEV && {
+          backend: 'WebAudio',
+          audioContext: this.audioContext,
+          audioRate: 1,
+        }),
       });
       
       if (!ws) {