karaoke-gen 0.76.20__py3-none-any.whl → 0.82.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Typography, useMediaQuery, useTheme, Switch, FormControlLabel, Tooltip, Paper, IconButton } from '@mui/material'
+import { Box, Button, Typography, useMediaQuery, useTheme, Switch, FormControlLabel, Tooltip, Paper, IconButton, Chip } from '@mui/material'
 import LockIcon from '@mui/icons-material/Lock'
 import UploadFileIcon from '@mui/icons-material/UploadFile'
 import FindReplaceIcon from '@mui/icons-material/FindReplace'
@@ -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'))
@@ -129,19 +144,69 @@ export default function Header({
                 </Box>
             )}
 
-            {isReadOnly && (
-                <Box sx={{ display: 'flex', justifyContent: 'flex-end', mb: 1 }}>
-                    <Button
-                        variant="outlined"
-                        size="small"
-                        startIcon={<UploadFileIcon />}
-                        onClick={onFileLoad}
-                        fullWidth={isMobile}
-                    >
-                        Load File
-                    </Button>
+            <Box sx={{
+                display: 'flex',
+                flexDirection: isMobile ? 'column' : 'row',
+                gap: 1,
+                justifyContent: 'space-between',
+                alignItems: isMobile ? 'stretch' : 'center',
+                mb: 1
+            }}>
+                <Typography variant="h4" sx={{ fontSize: isMobile ? '1.3rem' : '1.5rem' }}>
+                    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"
+                            : "Click to enable annotation prompts when editing"
+                        }>
+                            <Chip
+                                icon={<RateReviewIcon />}
+                                label={annotationsEnabled ? "Feedback On" : "Feedback Off"}
+                                onClick={() => onAnnotationsToggle(!annotationsEnabled)}
+                                color={annotationsEnabled ? "primary" : "default"}
+                                variant={annotationsEnabled ? "filled" : "outlined"}
+                                size="small"
+                                sx={{
+                                    cursor: 'pointer',
+                                    '& .MuiChip-icon': { fontSize: '1rem' }
+                                }}
+                            />
+                        </Tooltip>
+                    )}
+                    {isReadOnly && (
+                        <Button
+                            variant="outlined"
+                            size="small"
+                            startIcon={<UploadFileIcon />}
+                            onClick={onFileLoad}
+                            fullWidth={isMobile}
+                        >
+                            Load File
+                        </Button>
+                    )}
                 </Box>
-            )}
+            </Box>
 
             <Box sx={{
                 display: 'flex',
@@ -250,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',
@@ -356,10 +480,10 @@ export default function Header({
                                     Timing Offset
                                 </Button>
                                 {timingOffsetMs !== 0 && (
-                                    <Typography
-                                        variant="body2"
-                                        sx={{
-                                            ml: 1,
+                                    <Typography 
+                                        variant="body2" 
+                                        sx={{ 
+                                            ml: 1, 
                                             fontWeight: 'bold',
                                             color: theme.palette.secondary.main
                                         }}
@@ -369,23 +493,6 @@ export default function Header({
                                 )}
                             </Box>
                         )}
-                        {!isReadOnly && onAnnotationsToggle && (
-                            <Tooltip title={annotationsEnabled
-                                ? "Click to disable annotation prompts when editing"
-                                : "Click to enable annotation prompts when editing"
-                            }>
-                                <Button
-                                    variant="outlined"
-                                    size="small"
-                                    onClick={() => onAnnotationsToggle(!annotationsEnabled)}
-                                    startIcon={<RateReviewIcon />}
-                                    color={annotationsEnabled ? "primary" : "inherit"}
-                                    sx={{ minWidth: 'fit-content', height: '32px' }}
-                                >
-                                    {annotationsEnabled ? "Feedback On" : "Feedback Off"}
-                                </Button>
-                            </Tooltip>
-                        )}
                         <AudioPlayer
                             apiClient={apiClient}
                             onTimeUpdate={onTimeUpdate}

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/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')
@@ -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/shared/components/HighlightedText.tsx

@@ -1,4 +1,4 @@
-import { Typography, Box } from '@mui/material'
+import { Typography, Box, useMediaQuery, useTheme } from '@mui/material'
 import { WordComponent } from './Word'
 import { useWordClick } from '../hooks/useWordClick'
 import {
@@ -16,6 +16,7 @@ import React from 'react'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import IconButton from '@mui/material/IconButton'
 import { getWordsFromIds } from '../utils/wordUtils'
+import CorrectedWordWithActions from '../../CorrectedWordWithActions'
 
 export interface HighlightedTextProps {
     text?: string
@@ -36,6 +37,12 @@ export interface HighlightedTextProps {
     gaps?: GapSequence[]
     flashingHandler?: string | null
     corrections?: WordCorrection[]
+    // Review mode props for agentic corrections
+    reviewMode?: boolean
+    onRevertCorrection?: (wordId: string) => void
+    onEditCorrection?: (wordId: string) => void
+    onAcceptCorrection?: (wordId: string) => void
+    onShowCorrectionDetail?: (wordId: string) => void
 }
 
 export function HighlightedText({
@@ -57,7 +64,15 @@ export function HighlightedText({
     gaps = [],
     flashingHandler,
     corrections = [],
+    reviewMode = false,
+    onRevertCorrection,
+    onEditCorrection,
+    onAcceptCorrection,
+    onShowCorrectionDetail,
 }: HighlightedTextProps) {
+    const theme = useTheme()
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
     const { handleWordClick } = useWordClick({
         mode,
         onElementClick,
@@ -157,43 +172,83 @@ export function HighlightedText({
 
     const renderContent = () => {
         if (wordPositions && !segments) {
-            return wordPositions.map((wordPos, index) => (
-                <React.Fragment key={wordPos.word.id}>
-                    <WordComponent
-                        key={`${wordPos.word.id}-${index}`}
-                        word={wordPos.word.text}
-                        shouldFlash={shouldWordFlash(wordPos)}
-                        isAnchor={wordPos.type === 'anchor'}
-                        isCorrectedGap={wordPos.isCorrected}
-                        isUncorrectedGap={wordPos.type === 'gap' && !wordPos.isCorrected}
-                        isCurrentlyPlaying={shouldHighlightWord(wordPos)}
-                        onClick={() => handleWordClick(
-                            wordPos.word.text,
-                            wordPos.word.id,
-                            wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
-                            wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
-                        )}
-                        correction={(() => {
-                            const correction = corrections?.find(c => 
-                                c.corrected_word_id === wordPos.word.id || 
-                                c.word_id === wordPos.word.id
-                            );
-                            return correction ? {
+            return wordPositions.map((wordPos, index) => {
+                // Find correction for this word
+                const correction = corrections?.find(c =>
+                    c.corrected_word_id === wordPos.word.id ||
+                    c.word_id === wordPos.word.id
+                );
+
+                // Use CorrectedWordWithActions for agentic corrections
+                if (correction && correction.handler === 'AgenticCorrector') {
+                    return (
+                        <React.Fragment key={wordPos.word.id}>
+                            <CorrectedWordWithActions
+                                word={wordPos.word.text}
+                                originalWord={correction.original_word}
+                                correction={{
+                                    originalWord: correction.original_word,
+                                    handler: correction.handler,
+                                    confidence: correction.confidence,
+                                    source: correction.source,
+                                    reason: correction.reason
+                                }}
+                                shouldFlash={shouldWordFlash(wordPos)}
+                                showActions={reviewMode && !isMobile}
+                                onRevert={() => onRevertCorrection?.(wordPos.word.id)}
+                                onEdit={() => onEditCorrection?.(wordPos.word.id)}
+                                onAccept={() => onAcceptCorrection?.(wordPos.word.id)}
+                                onClick={() => {
+                                    if (isMobile) {
+                                        onShowCorrectionDetail?.(wordPos.word.id)
+                                    } else {
+                                        handleWordClick(
+                                            wordPos.word.text,
+                                            wordPos.word.id,
+                                            wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
+                                            wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
+                                        )
+                                    }
+                                }}
+                            />
+                            {index < wordPositions.length - 1 && ' '}
+                        </React.Fragment>
+                    );
+                }
+
+                // Default rendering with WordComponent
+                return (
+                    <React.Fragment key={wordPos.word.id}>
+                        <WordComponent
+                            key={`${wordPos.word.id}-${index}`}
+                            word={wordPos.word.text}
+                            shouldFlash={shouldWordFlash(wordPos)}
+                            isAnchor={wordPos.type === 'anchor'}
+                            isCorrectedGap={wordPos.isCorrected}
+                            isUncorrectedGap={wordPos.type === 'gap' && !wordPos.isCorrected}
+                            isCurrentlyPlaying={shouldHighlightWord(wordPos)}
+                            onClick={() => handleWordClick(
+                                wordPos.word.text,
+                                wordPos.word.id,
+                                wordPos.type === 'anchor' ? wordPos.sequence as AnchorSequence : undefined,
+                                wordPos.type === 'gap' ? wordPos.sequence as GapSequence : undefined
+                            )}
+                            correction={correction ? {
                                 originalWord: correction.original_word,
                                 handler: correction.handler,
                                 confidence: correction.confidence,
                                 source: correction.source,
                                 reason: correction.reason
-                            } : null;
-                        })()}
-                    />
-                    {index < wordPositions.length - 1 && ' '}
-                </React.Fragment>
-            ))
+                            } : null}
+                        />
+                        {index < wordPositions.length - 1 && ' '}
+                    </React.Fragment>
+                );
+            })
         } else if (segments) {
             return segments.map((segment) => (
-                <Box key={segment.id} sx={{ 
-                    display: 'flex', 
+                <Box key={segment.id} sx={{
+                    display: 'flex',
                     alignItems: 'flex-start',
                     mb: 0
                 }}>
@@ -212,12 +267,44 @@ export function HighlightedText({
 
                             const sequence = wordPos?.type === 'gap' ? wordPos.sequence as GapSequence : undefined;
 
-                            // Find correction information for the tooltip
-                            const correction = corrections?.find(c => 
-                                c.corrected_word_id === word.id || 
+                            // Find correction information
+                            const correction = corrections?.find(c =>
+                                c.corrected_word_id === word.id ||
                                 c.word_id === word.id
                             );
-                            
+
+                            // Use CorrectedWordWithActions for agentic corrections
+                            if (correction && correction.handler === 'AgenticCorrector') {
+                                return (
+                                    <React.Fragment key={word.id}>
+                                        <CorrectedWordWithActions
+                                            word={word.text}
+                                            originalWord={correction.original_word}
+                                            correction={{
+                                                originalWord: correction.original_word,
+                                                handler: correction.handler,
+                                                confidence: correction.confidence,
+                                                source: correction.source,
+                                                reason: correction.reason
+                                            }}
+                                            shouldFlash={shouldWordFlash(wordPos || { word: word.text, id: word.id })}
+                                            showActions={reviewMode && !isMobile}
+                                            onRevert={() => onRevertCorrection?.(word.id)}
+                                            onEdit={() => onEditCorrection?.(word.id)}
+                                            onAccept={() => onAcceptCorrection?.(word.id)}
+                                            onClick={() => {
+                                                if (isMobile) {
+                                                    onShowCorrectionDetail?.(word.id)
+                                                } else {
+                                                    handleWordClick(word.text, word.id, anchor, sequence)
+                                                }
+                                            }}
+                                        />
+                                        {wordIndex < segment.words.length - 1 && ' '}
+                                    </React.Fragment>
+                                );
+                            }
+
                             const correctionInfo = correction ? {
                                 originalWord: correction.original_word,
                                 handler: correction.handler,

lyrics_transcriber/frontend/src/components/shared/types.ts

@@ -85,6 +85,12 @@ export interface TranscriptionViewProps {
     anchors?: AnchorSequence[]
     flashingHandler?: string | null
     onDataChange?: (updatedData: CorrectionData) => void
+    // Review mode props for agentic corrections
+    reviewMode?: boolean
+    onRevertCorrection?: (wordId: string) => void
+    onEditCorrection?: (wordId: string) => void
+    onAcceptCorrection?: (wordId: string) => void
+    onShowCorrectionDetail?: (wordId: string) => void
 }
 
 // Add LinePosition type here since it's used in multiple places