karaoke-gen 0.75.53__py3-none-any.whl → 0.81.1__py3-none-any.whl

lyrics_transcriber/frontend/src/components/DurationTimelineView.tsx

@@ -30,7 +30,7 @@ const SegmentTimeline = styled(Box)({
 const TimelineRuler = styled(Box)({
     position: 'relative',
     height: '20px',
-    borderBottom: '1px solid #ccc',
+    borderBottom: '1px solid #2a2a2a', // slate-700 for dark mode
     marginBottom: '4px'
 })
 
@@ -38,14 +38,14 @@ const TimelineMark = styled(Box)({
     position: 'absolute',
     width: '1px',
     height: '8px',
-    backgroundColor: '#999',
+    backgroundColor: '#666666', // slate-500 for dark mode
     bottom: 0
 })
 
 const TimelineLabel = styled(Typography)({
     position: 'absolute',
     fontSize: '0.65rem',
-    color: '#666',
+    color: '#888888', // slate-400 for dark mode
     bottom: '10px',
     transform: 'translateX(-50%)',
     whiteSpace: 'nowrap'
@@ -58,7 +58,7 @@ const WordsBar = styled(Box)({
     alignItems: 'stretch',
     minWidth: '100%',
     touchAction: 'pan-y', // Better mobile scrolling
-    backgroundColor: '#f5f5f5',
+    backgroundColor: '#0f0f0f', // slate-900 for dark mode
     borderRadius: '4px',
     marginBottom: '8px'
 })
@@ -84,7 +84,7 @@ const WordBar = styled(Box, {
                 ? COLORS.corrected
                 : isGap
                     ? COLORS.uncorrectedGap
-                    : '#e0e0e0',
+                    : '#2a2a2a', // slate-700 for dark mode default
         border: isLong ? '2px solid #f44336' : 'none',
         boxShadow: isLong ? '0 0 4px rgba(244, 67, 54, 0.5)' : 'none',
         '&:hover': {
@@ -101,13 +101,13 @@ const WordBar = styled(Box, {
 
 const OriginalWordLabel = styled(Typography)({
     fontSize: '0.65rem',
-    color: '#888',
+    color: '#888888', // slate-400 for dark mode
     lineHeight: 1.1,
     marginBottom: '3px',
     textDecoration: 'line-through',
     opacity: 0.85,
     fontWeight: 500,
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    backgroundColor: 'rgba(15, 23, 42, 0.8)', // slate-900 with opacity for dark mode
     padding: '1px 3px',
     borderRadius: '2px'
 })
@@ -226,7 +226,7 @@ export default function DurationTimelineView({
                                                 whiteSpace: 'nowrap',
                                                 width: '100%',
                                                 textAlign: 'center',
-                                                color: correction ? '#1b5e20' : 'inherit'
+                                                color: correction ? '#4ade80' : '#e5e5e5' // green-400 or slate-50 for dark mode
                                             }}
                                         >
                                             {word.text}
@@ -235,7 +235,7 @@ export default function DurationTimelineView({
                                             <Typography
                                                 sx={{
                                                     fontSize: '0.6rem',
-                                                    color: 'rgba(0,0,0,0.6)',
+                                                    color: 'rgba(248, 250, 252, 0.6)', // slate-50 with opacity for dark mode
                                                     lineHeight: 1,
                                                     marginTop: '3px',
                                                     fontWeight: 600

lyrics_transcriber/frontend/src/components/EditModal.tsx

@@ -624,7 +624,7 @@ export default function EditModal({
                         position: 'absolute',
                         top: 0,
                         left: 0,
-                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                        backgroundColor: 'rgba(30, 41, 59, 0.95)', // slate-800 with opacity for dark mode
                         zIndex: 10
                     }}>
                         <CircularProgress size={60} thickness={4} />

lyrics_transcriber/frontend/src/components/EditWordList.tsx

@@ -312,7 +312,7 @@ export default function EditWordList({
                     width: '8px',
                 },
                 '&::-webkit-scrollbar-thumb': {
-                    backgroundColor: 'rgba(0,0,0,0.2)',
+                    backgroundColor: 'rgba(248, 250, 252, 0.2)', // slate-50 for dark mode
                     borderRadius: '4px',
                 },
                 scrollbarWidth: 'thin',

lyrics_transcriber/frontend/src/components/Header.tsx

@@ -8,6 +8,9 @@ import RedoIcon from '@mui/icons-material/Redo'
 import TimerIcon from '@mui/icons-material/Timer'
 import RestoreIcon from '@mui/icons-material/Restore'
 import RateReviewIcon from '@mui/icons-material/RateReview'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import HighlightOffIcon from '@mui/icons-material/HighlightOff'
 import { CorrectionData, InteractionMode } from '../types'
 import CorrectionMetrics from './CorrectionMetrics'
 import AgenticCorrectionMetrics from './AgenticCorrectionMetrics'
@@ -44,6 +47,13 @@ interface HeaderProps {
     canRedo: boolean
     annotationsEnabled?: boolean
     onAnnotationsToggle?: (enabled: boolean) => void
+    // Review mode props
+    reviewMode?: boolean
+    onReviewModeToggle?: (enabled: boolean) => void
+    // Batch action props
+    onAcceptAllCorrections?: () => void
+    onAcceptHighConfidenceCorrections?: () => void
+    onRevertAllCorrections?: () => void
 }
 
 export default function Header({
@@ -70,6 +80,11 @@ export default function Header({
     canRedo,
     annotationsEnabled = true,
     onAnnotationsToggle,
+    reviewMode = false,
+    onReviewModeToggle,
+    onAcceptAllCorrections,
+    onAcceptHighConfidenceCorrections,
+    onRevertAllCorrections,
 }: HeaderProps) {
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down('md'))
@@ -141,9 +156,28 @@ export default function Header({
                     Nomad Karaoke: Lyrics Transcription Review
                 </Typography>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {!isReadOnly && isAgenticMode && onReviewModeToggle && (
+                        <Tooltip title={reviewMode
+                            ? "Hide inline correction actions"
+                            : "Show inline actions on all corrections for quick review"
+                        }>
+                            <Chip
+                                icon={<VisibilityIcon />}
+                                label={reviewMode ? "Review Mode" : "Review Off"}
+                                onClick={() => onReviewModeToggle(!reviewMode)}
+                                color={reviewMode ? "secondary" : "default"}
+                                variant={reviewMode ? "filled" : "outlined"}
+                                size="small"
+                                sx={{
+                                    cursor: 'pointer',
+                                    '& .MuiChip-icon': { fontSize: '1rem' }
+                                }}
+                            />
+                        </Tooltip>
+                    )}
                     {!isReadOnly && onAnnotationsToggle && (
-                        <Tooltip title={annotationsEnabled 
-                            ? "Click to disable annotation prompts when editing" 
+                        <Tooltip title={annotationsEnabled
+                            ? "Click to disable annotation prompts when editing"
                             : "Click to enable annotation prompts when editing"
                         }>
                             <Chip
@@ -153,7 +187,7 @@ export default function Header({
                                 color={annotationsEnabled ? "primary" : "default"}
                                 variant={annotationsEnabled ? "filled" : "outlined"}
                                 size="small"
-                                sx={{ 
+                                sx={{
                                     cursor: 'pointer',
                                     '& .MuiChip-icon': { fontSize: '1rem' }
                                 }}
@@ -281,6 +315,65 @@ export default function Header({
                 </Box>
             </Box>
 
+            {/* Batch Actions Panel - shown when review mode is enabled */}
+            {!isReadOnly && reviewMode && isAgenticMode && data.corrections?.length > 0 && (
+                <Paper sx={{ p: 0.8, mb: 1, backgroundColor: 'action.hover' }}>
+                    <Box sx={{
+                        display: 'flex',
+                        flexDirection: isMobile ? 'column' : 'row',
+                        gap: 1,
+                        alignItems: isMobile ? 'stretch' : 'center',
+                        justifyContent: 'space-between'
+                    }}>
+                        <Typography variant="subtitle2" sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
+                            Batch Actions ({data.corrections.length} corrections)
+                        </Typography>
+                        <Box sx={{
+                            display: 'flex',
+                            gap: 1,
+                            flexWrap: 'wrap'
+                        }}>
+                            {onAcceptHighConfidenceCorrections && (
+                                <Button
+                                    variant="contained"
+                                    size="small"
+                                    color="success"
+                                    startIcon={<CheckCircleIcon />}
+                                    onClick={onAcceptHighConfidenceCorrections}
+                                    sx={{ fontSize: '0.75rem', py: 0.5 }}
+                                >
+                                    Accept High Confidence ({data.corrections.filter(c => c.confidence >= 0.8).length})
+                                </Button>
+                            )}
+                            {onAcceptAllCorrections && (
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    color="success"
+                                    startIcon={<CheckCircleIcon />}
+                                    onClick={onAcceptAllCorrections}
+                                    sx={{ fontSize: '0.75rem', py: 0.5 }}
+                                >
+                                    Accept All
+                                </Button>
+                            )}
+                            {onRevertAllCorrections && (
+                                <Button
+                                    variant="outlined"
+                                    size="small"
+                                    color="error"
+                                    startIcon={<HighlightOffIcon />}
+                                    onClick={onRevertAllCorrections}
+                                    sx={{ fontSize: '0.75rem', py: 0.5 }}
+                                >
+                                    Revert All
+                                </Button>
+                            )}
+                        </Box>
+                    </Box>
+                </Paper>
+            )}
+
             <Paper sx={{ p: 0.8, mb: 1 }}>
                 <Box sx={{
                     display: 'flex',

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx

@@ -88,6 +88,12 @@ interface MemoizedTranscriptionViewProps {
     anchors: AnchorSequence[]
     disableHighlighting: boolean
     onDataChange?: (updatedData: CorrectionData) => void
+    // Review mode props
+    reviewMode: boolean
+    onRevertCorrection: (wordId: string) => void
+    onEditCorrection: (wordId: string) => void
+    onAcceptCorrection: (wordId: string) => void
+    onShowCorrectionDetail: (wordId: string) => void
 }
 
 // Create a memoized TranscriptionView component
@@ -103,7 +109,12 @@ const MemoizedTranscriptionView = memo(function MemoizedTranscriptionView({
     currentTime,
     anchors,
     disableHighlighting,
-    onDataChange
+    onDataChange,
+    reviewMode,
+    onRevertCorrection,
+    onEditCorrection,
+    onAcceptCorrection,
+    onShowCorrectionDetail
 }: MemoizedTranscriptionViewProps) {
     return (
         <TranscriptionView
@@ -118,6 +129,11 @@ const MemoizedTranscriptionView = memo(function MemoizedTranscriptionView({
             currentTime={disableHighlighting ? undefined : currentTime}
             anchors={anchors}
             onDataChange={onDataChange}
+            reviewMode={reviewMode}
+            onRevertCorrection={onRevertCorrection}
+            onEditCorrection={onEditCorrection}
+            onAcceptCorrection={onAcceptCorrection}
+            onShowCorrectionDetail={onShowCorrectionDetail}
         />
     );
 });
@@ -202,6 +218,13 @@ interface MemoizedHeaderProps {
     onUnCorrectAll: () => void
     annotationsEnabled: boolean
     onAnnotationsToggle: (enabled: boolean) => void
+    // Review mode props
+    reviewMode: boolean
+    onReviewModeToggle: (enabled: boolean) => void
+    // Batch action props
+    onAcceptAllCorrections: () => void
+    onAcceptHighConfidenceCorrections: () => void
+    onRevertAllCorrections: () => void
 }
 
 // Create a memoized Header component
@@ -228,7 +251,12 @@ const MemoizedHeader = memo(function MemoizedHeader({
     canRedo,
     onUnCorrectAll,
     annotationsEnabled,
-    onAnnotationsToggle
+    onAnnotationsToggle,
+    reviewMode,
+    onReviewModeToggle,
+    onAcceptAllCorrections,
+    onAcceptHighConfidenceCorrections,
+    onRevertAllCorrections
 }: MemoizedHeaderProps) {
     return (
         <Header
@@ -255,6 +283,11 @@ const MemoizedHeader = memo(function MemoizedHeader({
             onUnCorrectAll={onUnCorrectAll}
             annotationsEnabled={annotationsEnabled}
             onAnnotationsToggle={onAnnotationsToggle}
+            reviewMode={reviewMode}
+            onReviewModeToggle={onReviewModeToggle}
+            onAcceptAllCorrections={onAcceptAllCorrections}
+            onAcceptHighConfidenceCorrections={onAcceptHighConfidenceCorrections}
+            onRevertAllCorrections={onRevertAllCorrections}
         />
     );
 });
@@ -291,6 +324,9 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     const [isFindReplaceModalOpen, setIsFindReplaceModalOpen] = useState(false)
     const [isTimingOffsetModalOpen, setIsTimingOffsetModalOpen] = useState(false)
     const [timingOffsetMs, setTimingOffsetMs] = useState(0)
+
+    // Review mode state for agentic corrections
+    const [reviewMode, setReviewMode] = useState(false)
     
     // Annotation collection state
     const [annotations, setAnnotations] = useState<Omit<CorrectionAnnotation, 'annotation_id' | 'timestamp'>[]>([])
@@ -793,11 +829,82 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
         // For now, just log acceptance
         // In the future, this could be tracked in the annotation system
         console.log('Accepted correction for word:', wordId)
-        
+
         // TODO: Track acceptance in annotation system
         // This could be used to build confidence in the AI's corrections over time
     }, [])
 
+    // Batch action handlers for review mode
+    const handleAcceptAllCorrections = useCallback(() => {
+        // Accept all corrections - for now just log, could track in annotation system
+        data.corrections?.forEach(c => {
+            console.log('Batch accepted correction:', c.corrected_word_id || c.word_id)
+        })
+        console.log(`Accepted all ${data.corrections?.length || 0} corrections`)
+    }, [data.corrections])
+
+    const handleAcceptHighConfidenceCorrections = useCallback(() => {
+        // Accept corrections with confidence >= 80%
+        const highConfidence = data.corrections?.filter(c => c.confidence >= 0.8) || []
+        highConfidence.forEach(c => {
+            console.log('Batch accepted high-confidence correction:', c.corrected_word_id || c.word_id)
+        })
+        console.log(`Accepted ${highConfidence.length} high-confidence corrections`)
+    }, [data.corrections])
+
+    const handleRevertAllCorrections = useCallback(() => {
+        if (!window.confirm(`Are you sure you want to revert all ${data.corrections?.length || 0} corrections? This cannot be undone.`)) {
+            return
+        }
+
+        // Revert all corrections by reverting each one
+        // Process in reverse order to avoid ID conflicts
+        const corrections = [...(data.corrections || [])].reverse()
+
+        let newData = data
+        for (const correction of corrections) {
+            const wordId = correction.corrected_word_id || correction.word_id
+
+            // Find the segment containing the corrected word
+            const segmentIndex = newData.corrected_segments.findIndex(segment =>
+                segment.words.some(w => w.id === wordId)
+            )
+
+            if (segmentIndex === -1) continue
+
+            const segment = newData.corrected_segments[segmentIndex]
+
+            // Replace the corrected word with the original
+            const newWords = segment.words.map(word => {
+                if (word.id === wordId) {
+                    return {
+                        ...word,
+                        text: correction.original_word,
+                        id: correction.word_id
+                    }
+                }
+                return word
+            })
+
+            const newText = newWords.map(w => w.text).join(' ')
+            const newSegment = { ...segment, words: newWords, text: newText }
+            const newSegments = newData.corrected_segments.map((seg, idx) =>
+                idx === segmentIndex ? newSegment : seg
+            )
+
+            newData = {
+                ...newData,
+                corrected_segments: newSegments,
+                corrections: newData.corrections?.filter(c =>
+                    c.corrected_word_id !== wordId && c.word_id !== wordId
+                ) || []
+            }
+        }
+
+        updateDataWithHistory(newData, 'revert all corrections')
+        console.log(`Reverted all ${corrections.length} corrections`)
+    }, [data, updateDataWithHistory])
+
     const handleShowCorrectionDetail = useCallback((wordId: string) => {
         // Find the correction for this word
         const correction = data.corrections?.find(c => 
@@ -1177,6 +1284,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 onUnCorrectAll={handleUnCorrectAll}
                 annotationsEnabled={annotationsEnabled}
                 onAnnotationsToggle={handleAnnotationsToggle}
+                reviewMode={reviewMode}
+                onReviewModeToggle={setReviewMode}
+                onAcceptAllCorrections={handleAcceptAllCorrections}
+                onAcceptHighConfidenceCorrections={handleAcceptHighConfidenceCorrections}
+                onRevertAllCorrections={handleRevertAllCorrections}
             />
 
             <Grid container direction={isMobile ? 'column' : 'row'}>
@@ -1198,6 +1310,11 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                             // needs to update history
                             updateDataWithHistory(updatedData, 'direct data change');
                         }}
+                        reviewMode={reviewMode}
+                        onRevertCorrection={handleRevertCorrection}
+                        onEditCorrection={handleEditCorrection}
+                        onAcceptCorrection={handleAcceptCorrection}
+                        onShowCorrectionDetail={handleShowCorrectionDetail}
                     />
                     {!isReadOnly && apiClient && (
                         <Box sx={{

lyrics_transcriber/frontend/src/components/LyricsSynchronizer/TimelineCanvas.tsx

@@ -33,16 +33,17 @@ const CANVAS_PADDING = 8
 const TEXT_ABOVE_BLOCK = 14
 const RESIZE_HANDLE_SIZE = 8
 const RESIZE_HANDLE_HITAREA = 12
-const PLAYHEAD_COLOR = '#ffffff'
-const WORD_BLOCK_COLOR = '#d32f2f'
-const WORD_BLOCK_SELECTED_COLOR = '#b71c1c'
-const WORD_BLOCK_CURRENT_COLOR = '#f44336'
-const WORD_TEXT_CURRENT_COLOR = '#d32f2f'
-const UPCOMING_WORD_BG = '#fff9c4'
-const UPCOMING_WORD_TEXT = '#000000'
-const TIME_BAR_BG = '#f5f5f5'
-const TIME_BAR_TEXT = '#666666'
-const TIMELINE_BG = '#e0e0e0'
+// Dark theme colors matching karaoke-gen
+const PLAYHEAD_COLOR = '#f97316' // orange-500 for better visibility
+const WORD_BLOCK_COLOR = '#dc2626' // red-600 for dark mode
+const WORD_BLOCK_SELECTED_COLOR = '#b91c1c' // red-700 for dark mode
+const WORD_BLOCK_CURRENT_COLOR = '#ef4444' // red-500 for dark mode
+const WORD_TEXT_CURRENT_COLOR = '#fca5a5' // red-300 for dark mode
+const UPCOMING_WORD_BG = '#2a2a2a' // slate-700 for dark mode
+const UPCOMING_WORD_TEXT = '#e5e5e5' // slate-50 for dark mode
+const TIME_BAR_BG = '#1a1a1a' // slate-800 for dark mode
+const TIME_BAR_TEXT = '#888888' // slate-400 for dark mode
+const TIMELINE_BG = '#0f0f0f' // slate-900 for dark mode
 
 // Drag modes
 type DragMode = 'none' | 'selection' | 'resize' | 'move'
@@ -268,7 +269,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
             const x = timeToX(t)
             
             ctx.beginPath()
-            ctx.strokeStyle = '#999999'
+            ctx.strokeStyle = '#64748b' // slate-500 for dark mode
             ctx.lineWidth = 1
             ctx.moveTo(x, TIME_BAR_HEIGHT - 6)
             ctx.lineTo(x, TIME_BAR_HEIGHT)
@@ -280,7 +281,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
         }
 
         ctx.beginPath()
-        ctx.strokeStyle = '#cccccc'
+        ctx.strokeStyle = '#2a2a2a' // slate-700 for dark mode
         ctx.lineWidth = 1
         ctx.moveTo(0, TIME_BAR_HEIGHT)
         ctx.lineTo(canvasWidth, TIME_BAR_HEIGHT)
@@ -314,20 +315,20 @@ const TimelineCanvas = memo(function TimelineCanvas({
 
             // Draw selection border
             if (isSelected) {
-                ctx.strokeStyle = '#ffffff'
+                ctx.strokeStyle = '#f97316' // orange-500 for dark mode selection
                 ctx.lineWidth = 2
                 ctx.strokeRect(bounds.startX, bounds.y, bounds.blockWidth, WORD_BLOCK_HEIGHT)
-                
-                // Draw resize handle (white dot on right edge) for selected words when hovered
+
+                // Draw resize handle (orange dot on right edge) for selected words when hovered
                 if (isHovered || selectedWordIds.size === 1) {
                     const handleX = bounds.startX + bounds.blockWidth - RESIZE_HANDLE_SIZE / 2
                     const handleY = bounds.y + WORD_BLOCK_HEIGHT / 2
-                    
+
                     ctx.beginPath()
-                    ctx.fillStyle = '#ffffff'
+                    ctx.fillStyle = '#f97316' // orange-500 for dark mode
                     ctx.arc(handleX, handleY, RESIZE_HANDLE_SIZE / 2, 0, Math.PI * 2)
                     ctx.fill()
-                    ctx.strokeStyle = '#666666'
+                    ctx.strokeStyle = '#0f0f0f' // slate-900 for dark mode
                     ctx.lineWidth = 1
                     ctx.stroke()
                 }
@@ -368,7 +369,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
                 
                 if (textStartX < canvasWidth - 10) {
                     const isCurrent = word.id === currentWordId
-                    ctx.fillStyle = isCurrent ? WORD_TEXT_CURRENT_COLOR : '#333333'
+                    ctx.fillStyle = isCurrent ? WORD_TEXT_CURRENT_COLOR : '#f8fafc' // slate-50 for dark mode
                     ctx.fillText(word.text, textStartX, textY)
                     rightmostTextEnd = textStartX + textWidth
                 }
@@ -405,7 +406,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
             
             ctx.beginPath()
             ctx.fillStyle = PLAYHEAD_COLOR
-            ctx.strokeStyle = '#333333'
+            ctx.strokeStyle = '#0f0f0f' // slate-900 for dark mode
             ctx.lineWidth = 1
             ctx.moveTo(playheadX - 6, 2)
             ctx.lineTo(playheadX + 6, 2)
@@ -422,7 +423,7 @@ const TimelineCanvas = memo(function TimelineCanvas({
             ctx.stroke()
 
             ctx.beginPath()
-            ctx.strokeStyle = 'rgba(0,0,0,0.4)'
+            ctx.strokeStyle = 'rgba(0,0,0,0.6)' // Darker shadow for dark mode visibility
             ctx.lineWidth = 1
             ctx.moveTo(playheadX + 1, TIME_BAR_HEIGHT)
             ctx.lineTo(playheadX + 1, height)

lyrics_transcriber/frontend/src/components/ReferenceView.tsx

@@ -221,7 +221,7 @@ export default function ReferenceView({
                             width: '100%', 
                             mb: 0,
                             '&:hover': {
-                                backgroundColor: 'rgba(0, 0, 0, 0.03)'
+                                backgroundColor: 'rgba(248, 250, 252, 0.04)' // slate-50 hover for dark mode
                             }
                         }}
                     >

lyrics_transcriber/frontend/src/components/TranscriptionView.tsx

@@ -54,7 +54,12 @@ export default function TranscriptionView({
     onPlaySegment,
     currentTime = 0,
     anchors = [],
-    onDataChange
+    onDataChange,
+    reviewMode = false,
+    onRevertCorrection,
+    onEditCorrection,
+    onAcceptCorrection,
+    onShowCorrectionDetail
 }: TranscriptionViewProps) {
     const [selectedSegmentIndex, setSelectedSegmentIndex] = useState<number | null>(null)
     const [viewMode, setViewMode] = useState<'text' | 'duration'>('text')
@@ -182,7 +187,7 @@ export default function TranscriptionView({
                             width: '100%',
                             mb: 0,
                             '&:hover': {
-                                backgroundColor: 'rgba(0, 0, 0, 0.03)'
+                                backgroundColor: 'rgba(248, 250, 252, 0.04)' // slate-50 hover for dark mode
                             }
                         }}>
                             <SegmentControls>
@@ -237,6 +242,11 @@ export default function TranscriptionView({
                                     currentTime={currentTime}
                                     gaps={data.gap_sequences}
                                     corrections={data.corrections}
+                                    reviewMode={reviewMode}
+                                    onRevertCorrection={onRevertCorrection}
+                                    onEditCorrection={onEditCorrection}
+                                    onAcceptCorrection={onAcceptCorrection}
+                                    onShowCorrectionDetail={onShowCorrectionDetail}
                                 />
                             </TextContainer>
                         </Box>

lyrics_transcriber/frontend/src/components/WordDivider.tsx

@@ -18,7 +18,7 @@ interface WordDividerProps {
 }
 
 const buttonTextStyle = {
-    color: 'rgba(0, 0, 0, 0.6)',
+    color: 'rgba(248, 250, 252, 0.8)', // slate-50 with opacity for dark mode
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
     fontWeight: 400,
     fontSize: '0.7rem',
@@ -58,7 +58,7 @@ export default function WordDivider({
                 height: '20px',
                 my: -0.5,
                 width: '50%',
-                backgroundColor: '#fff',
+                backgroundColor: '#1a1a1a', // slate-800 for dark mode
                 ...sx
             }}
         >
@@ -66,7 +66,7 @@ export default function WordDivider({
                 display: 'flex',
                 alignItems: 'center',
                 gap: 1,
-                backgroundColor: '#fff',
+                backgroundColor: '#1a1a1a', // slate-800 for dark mode
                 padding: '0 8px',
                 zIndex: 1
             }}>