From 4af013c9289cc216b488f69afe75fa7f2d6e6510 Mon Sep 17 00:00:00 2001
From: Mistral Vibe <vibe@mistral.ai>
Date: Wed, 8 Apr 2026 15:28:05 +0200
Subject: [PATCH] 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                     | 30 ++++++++++++++++++++++++------
 docker-compose.dev.yml           |  4 ++--
 web/src/services/audioService.ts | 14 +++++++++++++-
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/Taskfile.yml b/Taskfile.yml
index ba12f01..7fcac78 100644
--- a/Taskfile.yml
+++ b/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}}"
-      - echo "Starting frontend development server..."
-      - cd web && npm run dev &
-      - echo "Following backend logs... (Ctrl+C to stop)"
-      - "{{.COMPOSE}} {{.DEV_FLAGS}} logs -f api audio-worker nc-watcher"
+      - "{{.COMPOSE}} {{.DEV_FLAGS}} up -d {{.DEV_SERVICES}} web"
+      - echo "Following all logs... (Ctrl+C to stop)"
+      - "{{.COMPOSE}} {{.DEV_FLAGS}} logs -f api web 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:
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index fc65806..318e4d5 100644
--- a/docker-compose.dev.yml
+++ b/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:
diff --git a/web/src/services/audioService.ts b/web/src/services/audioService.ts
index f9657d3..4d05c45 100755
--- a/web/src/services/audioService.ts
+++ b/web/src/services/audioService.ts
@@ -36,7 +36,13 @@ private readonly PLAY_DEBOUNCE_MS: number = 100;
   private readonly MAX_PLAYBACK_ATTEMPTS: number = 3;
   
   private constructor() {
-    this.log(LogLevel.INFO, 'AudioService initialized');
+    // 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[]) {
@@ -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) {