loukai-app 0.3.0

package/src/shared/components/LyricRejection.jsx

@@ -0,0 +1,84 @@
+/**
+ * LyricRejection - AI correction rejection display component
+ *
+ * Features:
+ * - Shows old vs new text comparison
+ * - Displays rejection reason and retention rate
+ * - Copy, Accept, Delete actions
+ */
+
+export function LyricRejection({ rejection, rejectionIndex, onAccept, onDelete }) {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(rejection.new_text);
+      // Could show temporary "Copied!" feedback
+    } catch (error) {
+      console.error('Failed to copy text:', error);
+    }
+  };
+
+  return (
+    <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="flex items-center gap-2 text-red-700 dark:text-red-300 font-medium">
+          <span className="material-icons">block</span>
+          Rejected Update (Line {rejection.line_num})
+        </span>
+        <button
+          className="p-1 hover:bg-red-100 dark:hover:bg-red-900 rounded transition"
+          title="Delete this rejection"
+          onClick={() => onDelete(rejectionIndex)}
+        >
+          <span className="material-icons text-gray-600 dark:text-gray-400">delete</span>
+        </button>
+      </div>
+      <div className="space-y-3">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Original:
+            </label>
+            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-3 text-gray-900 dark:text-gray-100">
+              {rejection.old_text}
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Proposed:
+            </label>
+            <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-3 text-gray-900 dark:text-gray-100">
+              {rejection.new_text}
+            </div>
+            <div className="flex gap-2 mt-2">
+              <button
+                className="flex items-center gap-1 px-3 py-1.5 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg transition"
+                title="Copy proposed text"
+                onClick={handleCopy}
+              >
+                <span className="material-icons text-sm">content_copy</span>
+                Copy
+              </button>
+              <button
+                className="flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition"
+                title="Accept proposed text and replace current lyric"
+                onClick={() => onAccept(rejectionIndex)}
+              >
+                <span className="material-icons text-sm">check_circle</span>
+                Accept
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-3 text-sm text-gray-600 dark:text-gray-400">
+          <span>Reason: {rejection.reason}</span>
+          {rejection.retention_rate !== undefined && (
+            <span>
+              Retention: {(rejection.retention_rate * 100).toFixed(1)}% (min:{' '}
+              {(rejection.min_required * 100).toFixed(1)}%)
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/shared/components/LyricSuggestion.jsx

@@ -0,0 +1,80 @@
+/**
+ * LyricSuggestion - AI missing line suggestion display component
+ *
+ * Features:
+ * - Shows suggested missing line with timing
+ * - Displays confidence, reason, pitch activity
+ * - Add as New Line, Copy, Delete actions
+ */
+
+function formatTime(seconds) {
+  if (!seconds || isNaN(seconds)) return '0:00';
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+export function LyricSuggestion({ suggestion, suggestionIndex, onAccept, onDelete }) {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(suggestion.suggested_text);
+      // Could show temporary "Copied!" feedback
+    } catch (error) {
+      console.error('Failed to copy text:', error);
+    }
+  };
+
+  const startTime = formatTime(suggestion.start_time);
+  const endTime = formatTime(suggestion.end_time);
+
+  return (
+    <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <span className="flex items-center gap-2 text-blue-700 dark:text-blue-300 font-medium">
+          <span className="material-icons">lightbulb</span>
+          Suggested Missing Line ({startTime} - {endTime})
+        </span>
+        <button
+          className="p-1 hover:bg-blue-100 dark:hover:bg-blue-900 rounded transition"
+          title="Delete this suggestion"
+          onClick={() => onDelete(suggestionIndex)}
+        >
+          <span className="material-icons text-gray-600 dark:text-gray-400">delete</span>
+        </button>
+      </div>
+      <div className="space-y-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Suggested Text:
+          </label>
+          <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-3 text-gray-900 dark:text-gray-100">
+            {suggestion.suggested_text}
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-3 text-sm text-gray-600 dark:text-gray-400">
+          <span>Confidence: {suggestion.confidence}</span>
+          <span>Reason: {suggestion.reason}</span>
+          {suggestion.pitch_activity && <span>Pitch Activity: {suggestion.pitch_activity}</span>}
+        </div>
+        <div className="flex gap-2">
+          <button
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"
+            title="Add this as a new lyric line"
+            onClick={() => onAccept(suggestionIndex)}
+          >
+            <span className="material-icons text-sm">add_circle</span>
+            Add as New Line
+          </button>
+          <button
+            className="flex items-center gap-2 px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-lg transition"
+            title="Copy suggested text"
+            onClick={handleCopy}
+          >
+            <span className="material-icons text-sm">content_copy</span>
+            Copy Text
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/shared/components/LyricsEditorCanvas.jsx

@@ -0,0 +1,271 @@
+/**
+ * LyricsEditorCanvas - Canvas-based lyrics timeline visualization
+ *
+ * Features:
+ * - Waveform visualization from vocals track
+ * - Lyric lines rendered as colored rectangles
+ * - Playhead showing current playback position
+ * - Click-to-select lyric lines
+ * - Backup vs lead singer color coding
+ */
+
+import { useEffect, useRef } from 'react';
+
+export function LyricsEditorCanvas({
+  lyricsData,
+  selectedLineIndex,
+  onLineSelect,
+  vocalsWaveform,
+  songDuration,
+  currentPosition,
+  isPlaying,
+}) {
+  const canvasRef = useRef(null);
+  const lyricRectanglesRef = useRef([]);
+
+  const CANVAS_WIDTH = 3800;
+  const CANVAS_HEIGHT = 120;
+
+  // Draw canvas
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width;
+    const height = canvas.height;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, width, height);
+
+    // Draw background
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, width, height);
+
+    // Draw waveform if available
+    if (vocalsWaveform && vocalsWaveform.length > 0) {
+      drawWaveform(ctx, vocalsWaveform, width, height);
+    }
+
+    // Draw lyric rectangles
+    if (songDuration > 0 && lyricsData && lyricsData.length > 0) {
+      lyricRectanglesRef.current = [];
+
+      // Separate backup and regular lines for rendering order
+      const backupLines = [];
+      const regularLines = [];
+
+      lyricsData.forEach((line, index) => {
+        // Skip disabled lines
+        if (line.disabled === true) return;
+
+        if (line.backup === true) {
+          backupLines.push({ line, index });
+        } else {
+          regularLines.push({ line, index });
+        }
+      });
+
+      // Draw backup lines first (yellow, behind)
+      backupLines.forEach(({ line, index }) => {
+        drawLyricRectangle(
+          ctx,
+          line,
+          index,
+          songDuration,
+          width,
+          height,
+          'rgba(255, 200, 0, 0.35)',
+          'rgba(255, 200, 0, 0.7)',
+          selectedLineIndex === index
+        );
+      });
+
+      // Draw regular lines second (blue, in front)
+      regularLines.forEach(({ line, index }) => {
+        drawLyricRectangle(
+          ctx,
+          line,
+          index,
+          songDuration,
+          width,
+          height,
+          'rgba(0, 100, 255, 0.35)',
+          'rgba(0, 255, 255, 0.9)',
+          selectedLineIndex === index
+        );
+      });
+    }
+
+    // Draw playhead if playing or paused with position
+    if (currentPosition > 0 && songDuration > 0) {
+      const playheadX = (currentPosition / songDuration) * width;
+
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(playheadX, 0);
+      ctx.lineTo(playheadX, height);
+      ctx.stroke();
+
+      // Draw triangular tic marks (relative to height)
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+
+      const triangleHeight = height * 0.1; // 10% of canvas height
+      const triangleWidth = 6;
+
+      // Top triangle (pointing down)
+      ctx.beginPath();
+      ctx.moveTo(playheadX, triangleHeight); // Bottom point
+      ctx.lineTo(playheadX - triangleWidth, 0); // Top left
+      ctx.lineTo(playheadX + triangleWidth, 0); // Top right
+      ctx.closePath();
+      ctx.fill();
+
+      // Bottom triangle (pointing up)
+      ctx.beginPath();
+      ctx.moveTo(playheadX, height - triangleHeight); // Top point
+      ctx.lineTo(playheadX - triangleWidth, height); // Bottom left
+      ctx.lineTo(playheadX + triangleWidth, height); // Bottom right
+      ctx.closePath();
+      ctx.fill();
+    }
+  }, [lyricsData, selectedLineIndex, vocalsWaveform, songDuration, currentPosition, isPlaying]);
+
+  // Draw waveform
+  const drawWaveform = (ctx, waveform, width, height) => {
+    const centerY = height / 2;
+    const scale = height / 256;
+
+    // Draw waveform
+    ctx.strokeStyle = '#ffffff';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+
+    for (let i = 0; i < waveform.length; i++) {
+      const x = (i / waveform.length) * width;
+      const value = waveform[i];
+      const y = centerY - value * scale;
+
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    }
+
+    ctx.stroke();
+
+    // Mirror for bottom half
+    ctx.beginPath();
+    for (let i = 0; i < waveform.length; i++) {
+      const x = (i / waveform.length) * width;
+      const value = waveform[i];
+      const y = centerY + value * scale;
+
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    }
+
+    ctx.stroke();
+
+    // Draw center line
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, centerY);
+    ctx.lineTo(width, centerY);
+    ctx.stroke();
+  };
+
+  // Draw lyric rectangle
+  const drawLyricRectangle = (
+    ctx,
+    lineData,
+    lineIndex,
+    songDuration,
+    width,
+    height,
+    fillColor,
+    outlineColor,
+    isSelected
+  ) => {
+    const startTime = lineData.start || lineData.startTimeSec || 0;
+    const endTime = lineData.end || lineData.endTimeSec || startTime + 3;
+    const duration = endTime - startTime;
+
+    if (duration > 0) {
+      const startX = (startTime / songDuration) * width;
+      const rectWidth = (duration / songDuration) * width;
+
+      // Rectangle dimensions relative to canvas height
+      const rectMargin = height * 0.05; // 5% margin from top/bottom
+      const rectHeight = height - rectMargin * 2; // Use most of canvas height
+
+      // Store rectangle bounds for click detection
+      lyricRectanglesRef.current.push({
+        x: startX,
+        y: rectMargin,
+        width: rectWidth,
+        height: rectHeight,
+        lineIndex: lineIndex,
+      });
+
+      // Draw rectangle
+      ctx.fillStyle = fillColor;
+      ctx.fillRect(startX, rectMargin, rectWidth, rectHeight);
+
+      // Draw outline if selected
+      if (isSelected) {
+        ctx.strokeStyle = outlineColor;
+        ctx.lineWidth = 2;
+        ctx.strokeRect(startX, rectMargin, rectWidth, rectHeight);
+      }
+    }
+  };
+
+  // Handle canvas click
+  const handleCanvasClick = (e) => {
+    if (!lyricRectanglesRef.current.length || !songDuration) return;
+
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+
+    const x = (e.clientX - rect.left) * scaleX;
+    const y = (e.clientY - rect.top) * scaleY;
+
+    // Check if click is inside any rectangle (reverse order)
+    for (let i = lyricRectanglesRef.current.length - 1; i >= 0; i--) {
+      const r = lyricRectanglesRef.current[i];
+      if (x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height) {
+        onLineSelect(r.lineIndex);
+
+        // Scroll the corresponding line into view
+        const lineElement = document.querySelector(
+          `.lyric-line-editor[data-index="${r.lineIndex}"]`
+        );
+        if (lineElement) {
+          lineElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+        break;
+      }
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <canvas
+        ref={canvasRef}
+        width={CANVAS_WIDTH}
+        height={CANVAS_HEIGHT}
+        onClick={handleCanvasClick}
+        className="w-full h-auto cursor-pointer block"
+      />
+    </div>
+  );
+}

package/src/shared/components/MixerPanel.jsx

@@ -0,0 +1,94 @@
+/**
+ * MixerPanel - Unified mixer control panel
+ *
+ * Based on renderer's mixer design
+ * Works with both ElectronBridge and WebBridge via callbacks
+ */
+
+export function MixerPanel({
+  mixer, // Support both 'mixer' (web) and 'mixerState' (renderer)
+  mixerState,
+  onSetMasterGain,
+  onToggleMasterMute,
+  onGainChange, // Alias for web compatibility
+  onMuteToggle, // Alias for web compatibility
+  className = '',
+}) {
+  // Support both prop names - prefer mixerState if provided, then mixer, then empty object
+  const state = mixerState || mixer || {};
+  const handleGainChange = onSetMasterGain || onGainChange;
+  const handleMuteToggle = onToggleMasterMute || onMuteToggle;
+  const buses = [
+    { id: 'PA', label: 'PA (Main)', description: 'Music + Mic to audience' },
+    { id: 'IEM', label: 'IEM (Monitors)', description: 'Vocals only (mono)' },
+    { id: 'mic', label: 'Mic Input', description: 'Microphone gain' },
+  ];
+
+  const handleGainChangeLocal = (busId, value) => {
+    if (handleGainChange) {
+      handleGainChange(busId, parseFloat(value));
+    }
+  };
+
+  const handleMuteToggleLocal = (busId) => {
+    if (handleMuteToggle) {
+      handleMuteToggle(busId);
+    }
+  };
+
+  const handleDoubleClick = (busId, e) => {
+    e.target.value = 0;
+    handleGainChangeLocal(busId, 0);
+  };
+
+  return (
+    <div className={`flex gap-4 p-4 ${className}`}>
+      {buses.map((bus) => {
+        const gain = state[bus.id]?.gain ?? 0;
+        const muted = state[bus.id]?.muted ?? false;
+
+        return (
+          <div
+            key={bus.id}
+            className="flex-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 flex flex-col items-center gap-3"
+            data-bus={bus.id}
+          >
+            <div className="text-center">
+              <div className="font-semibold text-gray-900 dark:text-gray-100">{bus.label}</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">{bus.description}</div>
+            </div>
+
+            <div className="flex flex-col items-center gap-2 w-full">
+              <input
+                type="range"
+                className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
+                min="-60"
+                max="12"
+                step="0.5"
+                value={gain}
+                onChange={(e) => handleGainChangeLocal(bus.id, e.target.value)}
+                onDoubleClick={(e) => handleDoubleClick(bus.id, e)}
+                data-bus={bus.id}
+              />
+              <div className="text-sm font-mono text-gray-700 dark:text-gray-300">
+                {gain.toFixed(1)} dB
+              </div>
+            </div>
+
+            <button
+              className={`px-4 py-2 rounded-lg font-semibold transition ${
+                muted
+                  ? 'bg-red-600 hover:bg-red-700 text-white'
+                  : 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100'
+              }`}
+              onClick={() => handleMuteToggleLocal(bus.id)}
+              data-bus={bus.id}
+            >
+              MUTE
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}