fix(frontend): Sprint Fix 3 — type safety, memory leaks, error handling

11 issues fixed:

- #5: Fix memory leak in RegionOverlay: use AbortController to clean up
all event listeners on unmount/re-render
- #6: Add pages_skipped to IngestResponse type
- #7: Make ImageInfo.master/width/height required, add thumbnail field
- #8: Add blocks/lines to OCRResult type
- #14: Fix stale closure in Viewer.tsx: use ref for onViewerReady callback
to always access the latest version
- #17: Type fetchManifest return as Record, selectModel as CorpusModelConfig;
add extensions/processing to PageMaster type
- #25: Add useEffect cleanup for success timeout in Editor (prevents
setState on unmounted component)
- #27: Show error message in Home.tsx when fetchManuscripts fails
(was silently caught)
- #28: Distinguish 404 (not analyzed) from network errors in Reader.tsx
master.json loading
- #29: Guard handleRetryFailed against concurrent polling/launching state
- #30: Use item.label as key instead of array index in RetroMenuBar

TypeScript compiles clean. 563 backend tests pass, 0 regressions.

https://claude.ai/code/session_01UB4he7RdRPHLvNjky4X8Sw

frontend/src/components/RegionOverlay.tsx

@@ -21,6 +21,11 @@ const RegionOverlay: FC<Props> = ({ viewer, regions, onRegionClick }) => {
   useEffect(() => {
     if (!viewer) return
 
+    // AbortController pour nettoyer proprement tous les event listeners
+    // lors du démontage ou du re-rendu (évite les fuites mémoire).
+    const controller = new AbortController()
+    const { signal } = controller
+
     const addOverlays = () => {
       viewer.clearOverlays()
       const item = viewer.world.getItemAt(0)
@@ -38,14 +43,14 @@ const RegionOverlay: FC<Props> = ({ viewer, regions, onRegionClick }) => {
 
         el.addEventListener('mouseenter', () => {
           el.style.backgroundColor = `${color}33`
-        })
+        }, { signal })
         el.addEventListener('mouseleave', () => {
           el.style.backgroundColor = ''
-        })
+        }, { signal })
         el.addEventListener('click', (e: MouseEvent) => {
           e.stopPropagation()
           onRegionClick(region)
-        })
+        }, { signal })
 
         const rect = item.imageToViewportRectangle(x, y, w, h)
         viewer.addOverlay(el, rect)
@@ -59,7 +64,8 @@ const RegionOverlay: FC<Props> = ({ viewer, regions, onRegionClick }) => {
     }
 
     return () => {
-      // Nettoyage : retire les overlays au prochain rendu
+      // Supprime tous les event listeners d'un coup, puis les overlays
+      controller.abort()
       try {
         viewer.clearOverlays()
       } catch {

frontend/src/components/Viewer.tsx

@@ -10,6 +10,9 @@ interface Props {
 const Viewer: FC<Props> = ({ imageUrl, onViewerReady }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const viewerRef = useRef<OpenSeadragon.Viewer | null>(null)
+  // Ref pour toujours accéder au callback le plus récent (évite stale closure)
+  const onViewerReadyRef = useRef(onViewerReady)
+  onViewerReadyRef.current = onViewerReady
 
   useEffect(() => {
     if (!containerRef.current) return
@@ -38,9 +41,9 @@ const Viewer: FC<Props> = ({ imageUrl, onViewerReady }) => {
 
     viewer.open({ type: 'image', url: imageUrl })
     viewer.addOnceHandler('open', () => {
-      onViewerReady?.(viewer)
+      onViewerReadyRef.current?.(viewer)
     })
-  }, [imageUrl]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [imageUrl])
 
   return (
     <div className="relative w-full h-full bg-retro-black">

frontend/src/components/retro/RetroMenuBar.tsx

@@ -28,10 +28,10 @@ export default function RetroMenuBar({ items = [], right, className = '' }: Prop
         ${className}
       `}
     >
-      {items.map((item, i) => (
+      {items.map((item) => (
         <button
           type="button"
-          key={i}
+          key={item.label}
           onClick={item.onClick}
           disabled={item.disabled}
           className={`

frontend/src/lib/api.ts

@@ -30,6 +30,7 @@ export interface IngestResponse {
   corpus_id: string
   manuscript_id: string
   pages_created: number
+  pages_skipped: number
   page_ids: string[]
 }
 
@@ -105,6 +106,8 @@ export interface Region {
 
 export interface OCRResult {
   diplomatic_text: string
+  blocks: Record<string, unknown>[]
+  lines: Record<string, unknown>[]
   language: string
   confidence: number
   uncertain_segments: string[]
@@ -143,11 +146,12 @@ export interface EditorialInfo {
 }
 
 export interface ImageInfo {
-  master?: string
-  derivative_web?: string
-  iiif_base?: string
-  width?: number
-  height?: number
+  master: string
+  derivative_web?: string | null
+  thumbnail?: string | null
+  iiif_base?: string | null
+  width: number
+  height: number
 }
 
 export interface PageMaster {
@@ -163,6 +167,8 @@ export interface PageMaster {
   translation: Translation | null
   summary: { short: string; detailed: string } | null
   commentary: Commentary | null
+  extensions: Record<string, unknown>
+  processing: Record<string, unknown> | null
   editorial: EditorialInfo
 }
 
@@ -245,7 +251,7 @@ export const fetchPages = (manuscriptId: string): Promise<Page[]> =>
 export const fetchMasterJson = (pageId: string): Promise<PageMaster> =>
   get(`/api/v1/pages/${pageId}/master-json`)
 
-export const fetchManifest = (manuscriptId: string): Promise<unknown> =>
+export const fetchManifest = (manuscriptId: string): Promise<Record<string, unknown>> =>
   get(`/api/v1/manuscripts/${manuscriptId}/iiif-manifest`)
 
 export const fetchProfile = (profileId: string): Promise<CorpusProfile> =>
@@ -268,7 +274,7 @@ export const selectModel = (
   modelId: string,
   displayName: string,
   providerType: string,
-): Promise<unknown> =>
+): Promise<CorpusModelConfig> =>
   put(`/api/v1/corpora/${corpusId}/model`, {
     model_id: modelId,
     display_name: displayName,

frontend/src/pages/Admin.tsx

@@ -414,6 +414,7 @@ function RunPanel({ corpusId, hasModel }: { corpusId: string; hasModel: boolean
   }
 
   const handleRetryFailed = async () => {
+    if (polling || launching) return
     const failedIds = Object.values(jobs).filter((j) => j.status === 'failed').map((j) => j.id)
     if (failedIds.length === 0) return
     await Promise.allSettled(failedIds.map((id) => retryJob(id)))

frontend/src/pages/Editor.tsx

@@ -48,6 +48,13 @@ export default function Editor({ pageId, onBack }: Props) {
 
   const successTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
 
+  // Nettoyage du timeout de succès lors du démontage du composant
+  useEffect(() => {
+    return () => {
+      if (successTimeout.current) clearTimeout(successTimeout.current)
+    }
+  }, [])
+
   const loadData = useCallback(async () => {
     setLoading(true)
     setError(null)
@@ -59,7 +66,7 @@ export default function Editor({ pageId, onBack }: Props) {
       setCommentaryPublic(m.commentary?.public ?? '')
       setCommentaryScholarly(m.commentary?.scholarly ?? '')
       setEditorialStatus(m.editorial.status)
-      const ext = (m as unknown as { extensions?: { region_validations?: Record<string, string> } }).extensions
+      const ext = m.extensions as { region_validations?: Record<string, string> } | undefined
       setRegionValidations(ext?.region_validations ?? {})
     } catch (e: unknown) {
       setError((e as Error).message)

frontend/src/pages/Home.tsx

@@ -29,6 +29,7 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
   const [manuscripts, setManuscripts] = useState<Record<string, Manuscript[]>>({})
   const [expanding, setExpanding] = useState<string | null>(null)
   const [selectedCorpus, setSelectedCorpus] = useState<Corpus | null>(null)
+  const [expandError, setExpandError] = useState<string | null>(null)
 
   useEffect(() => {
     fetchCorpora()
@@ -47,12 +48,13 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
     }
 
     setExpanding(corpus.id)
+    setExpandError(null)
     try {
       const ms = await fetchManuscripts(corpus.id)
       setManuscripts((prev) => ({ ...prev, [corpus.id]: ms }))
       if (ms.length === 1) onOpenManuscript(ms[0].id, corpus.profile_id)
-    } catch {
-      // silent
+    } catch (e: unknown) {
+      setExpandError(e instanceof Error ? e.message : 'Erreur de chargement')
     } finally {
       setExpanding(null)
     }
@@ -149,6 +151,11 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
                         Chargement...
                       </div>
                     )}
+                    {expandError && selectedCorpus?.id === corpus.id && !expanding && (
+                      <div className="px-3 py-1 text-retro-xs text-retro-black bg-retro-light">
+                        Erreur: {expandError}
+                      </div>
+                    )}
                   </div>
                 ))}
               </div>

frontend/src/pages/Reader.tsx

@@ -47,11 +47,24 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
       .finally(() => setLoading(false))
   }, [manuscriptId, profileId])
 
+  const [masterError, setMasterError] = useState<string | null>(null)
+
   useEffect(() => {
     if (pages.length === 0) return
     setMaster(null)
+    setMasterError(null)
     setSelectedRegion(null)
-    fetchMasterJson(pages[currentIndex].id).then(setMaster).catch(() => setMaster(null))
+    fetchMasterJson(pages[currentIndex].id)
+      .then(setMaster)
+      .catch((e: unknown) => {
+        // 404 = page non analysée (normal), autres erreurs = problème réseau
+        const msg = e instanceof Error ? e.message : ''
+        if (msg.includes('404')) {
+          setMaster(null)
+        } else {
+          setMasterError(msg || 'Erreur de chargement')
+        }
+      })
   }, [pages, currentIndex])
 
   const handleViewerReady = useCallback((v: OpenSeadragon.Viewer) => {
@@ -194,10 +207,13 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
               </div>
             )}
 
-            {/* Not analyzed badge */}
+            {/* Not analyzed / error badge */}
             {!master && !loading && imageUrl && (
               <div className="absolute top-2 left-2">
-                <RetroBadge variant="warning">Non analysee</RetroBadge>
+                {masterError
+                  ? <RetroBadge variant="error">Erreur: {masterError}</RetroBadge>
+                  : <RetroBadge variant="warning">Non analysee</RetroBadge>
+                }
               </div>
             )}
           </div>