feat(frontend): Sprint R3 — retro Reader / Manuscript viewer

Redesign the Reader page with retro-computing aesthetic:

- RetroMenuBar with profile label, page nav (Prev/Next), Edit button
- Two RetroWindows side by side: Viewer (70%) + Analysis (30%)
- Viewer window: black background, RetroButton toolbar (zoom/reset/fullscreen),
retro region info popup, "Non analysee" RetroBadge
- Analysis window: scrollable with retro scrollbars, contains:
- LayerPanel with RetroCheckboxes for layer toggles
- TranscriptionPanel with RetroBadge status indicators
- TranslationPanel with RetroBadge status indicators
- CommentaryPanel with RetroButton tabs (Public/Savant)
- All panels use monochrome retro palette, pixel font, no rounded corners
- Dithered gray background between windows

Build passes (tsc + vite).

https://claude.ai/code/session_01WWohTtw2CxGRawmpH1tyrY

frontend/src/components/CommentaryPanel.tsx

@@ -1,20 +1,21 @@
 import { useState, type FC } from 'react'
 import type { Commentary, EditorialInfo, EditorialStatus } from '../lib/api.ts'
+import { RetroBadge, RetroButton } from './retro'
 
 const STATUS_LABELS: Record<EditorialStatus, string> = {
   machine_draft: 'Brouillon IA',
-  needs_review: 'À réviser',
-  reviewed: 'Révisé',
-  validated: 'Validé',
-  published: 'Publié',
+  needs_review: 'A reviser',
+  reviewed: 'Revise',
+  validated: 'Valide',
+  published: 'Publie',
 }
 
-const STATUS_COLORS: Record<EditorialStatus, string> = {
-  machine_draft: 'bg-amber-100 text-amber-700',
-  needs_review: 'bg-orange-100 text-orange-700',
-  reviewed: 'bg-blue-100 text-blue-700',
-  validated: 'bg-green-100 text-green-700',
-  published: 'bg-emerald-100 text-emerald-700',
+const STATUS_VARIANTS: Record<EditorialStatus, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
+  machine_draft: 'info',
+  needs_review: 'warning',
+  reviewed: 'default',
+  validated: 'success',
+  published: 'success',
 }
 
 interface Props {
@@ -29,7 +30,6 @@ const CommentaryPanel: FC<Props> = ({ commentary, editorial, visiblePublic, visi
 
   if (!visiblePublic && !visibleScholarly) return null
 
-  // Si une seule couche est visible, forcer l'onglet correspondant
   const activeTab: 'public' | 'scholarly' =
     !visiblePublic && visibleScholarly ? 'scholarly' :
     !visibleScholarly && visiblePublic ? 'public' :
@@ -39,40 +39,39 @@ const CommentaryPanel: FC<Props> = ({ commentary, editorial, visiblePublic, visi
   const bothVisible = visiblePublic && visibleScholarly
 
   return (
-    <div className="px-4 py-4">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-xs font-semibold text-stone-500 uppercase tracking-wide">
-          Commentaire
-        </h3>
-        <span
-          className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[editorial.status]}`}
-        >
+    <div className="p-2">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-retro-xs font-bold">Commentaire</span>
+        <RetroBadge variant={STATUS_VARIANTS[editorial.status]}>
           {STATUS_LABELS[editorial.status]}
-        </span>
+        </RetroBadge>
       </div>
 
       {bothVisible && (
-        <div className="flex gap-2 mb-3">
-          {(['public', 'scholarly'] as const).map((t) => (
-            <button
-              key={t}
-              onClick={() => setTab(t)}
-              className={`text-xs px-3 py-1 rounded transition-colors ${
-                activeTab === t
-                  ? 'bg-stone-800 text-white'
-                  : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
-              }`}
-            >
-              {t === 'public' ? 'Public' : 'Savant'}
-            </button>
-          ))}
+        <div className="flex gap-[2px] mb-2">
+          <RetroButton
+            size="sm"
+            pressed={activeTab === 'public'}
+            onClick={() => setTab('public')}
+          >
+            Public
+          </RetroButton>
+          <RetroButton
+            size="sm"
+            pressed={activeTab === 'scholarly'}
+            onClick={() => setTab('scholarly')}
+          >
+            Savant
+          </RetroButton>
         </div>
       )}
 
       {content ? (
-        <p className="text-sm text-stone-800 leading-relaxed whitespace-pre-wrap">{content}</p>
+        <p className="text-retro-sm whitespace-pre-wrap font-retro leading-relaxed">
+          {content}
+        </p>
       ) : (
-        <p className="text-sm text-stone-400 italic">Commentaire non disponible.</p>
+        <p className="text-retro-sm text-retro-darkgray">Commentaire non disponible.</p>
       )}
     </div>
   )

frontend/src/components/LayerPanel.tsx

@@ -1,16 +1,17 @@
 import type { FC } from 'react'
+import { RetroCheckbox } from './retro'
 
 const LAYER_LABELS: Record<string, string> = {
   image: 'Image',
-  ocr_diplomatic: 'Transcription diplomatique',
-  ocr_normalized: 'Transcription normalisée',
-  translation_fr: 'Traduction (FR)',
-  translation_en: 'Traduction (EN)',
-  summary: 'Résumé',
-  scholarly_commentary: 'Commentaire savant',
-  public_commentary: 'Commentaire public',
+  ocr_diplomatic: 'Transcription',
+  ocr_normalized: 'Normalise',
+  translation_fr: 'Traduction FR',
+  translation_en: 'Traduction EN',
+  summary: 'Resume',
+  scholarly_commentary: 'Comm. savant',
+  public_commentary: 'Comm. public',
   iconography_detection: 'Iconographie',
-  material_notes: 'Notes matérielles',
+  material_notes: 'Notes mat.',
   uncertainty: 'Incertitudes',
 }
 
@@ -21,24 +22,16 @@ interface Props {
 }
 
 const LayerPanel: FC<Props> = ({ activeLayers, visibleLayers, onToggle }) => (
-  <div className="border-b border-stone-200 bg-stone-50 px-4 py-3 shrink-0">
-    <h3 className="text-xs font-semibold text-stone-500 uppercase tracking-wide mb-2">
-      Couches
-    </h3>
-    <div className="flex flex-wrap gap-x-4 gap-y-1.5">
+  <div className="px-2 py-2 shrink-0 border-b border-retro-black bg-retro-gray">
+    <div className="text-retro-xs font-bold mb-1">Couches</div>
+    <div className="flex flex-wrap gap-x-3 gap-y-1">
       {activeLayers.map((layer) => (
-        <label
+        <RetroCheckbox
           key={layer}
-          className="flex items-center gap-1.5 text-xs text-stone-700 cursor-pointer select-none"
-        >
-          <input
-            type="checkbox"
-            checked={visibleLayers.has(layer)}
-            onChange={() => onToggle(layer)}
-            className="rounded border-stone-300 text-stone-700 focus:ring-stone-500"
-          />
-          {LAYER_LABELS[layer] ?? layer}
-        </label>
+          label={LAYER_LABELS[layer] ?? layer}
+          checked={visibleLayers.has(layer)}
+          onChange={() => onToggle(layer)}
+        />
       ))}
     </div>
   </div>

frontend/src/components/TranscriptionPanel.tsx

@@ -1,20 +1,21 @@
 import type { FC } from 'react'
 import type { OCRResult, EditorialInfo, EditorialStatus } from '../lib/api.ts'
+import { RetroBadge } from './retro'
 
 const STATUS_LABELS: Record<EditorialStatus, string> = {
   machine_draft: 'Brouillon IA',
-  needs_review: 'À réviser',
-  reviewed: 'Révisé',
-  validated: 'Validé',
-  published: 'Publié',
+  needs_review: 'A reviser',
+  reviewed: 'Revise',
+  validated: 'Valide',
+  published: 'Publie',
 }
 
-const STATUS_COLORS: Record<EditorialStatus, string> = {
-  machine_draft: 'bg-amber-100 text-amber-700',
-  needs_review: 'bg-orange-100 text-orange-700',
-  reviewed: 'bg-blue-100 text-blue-700',
-  validated: 'bg-green-100 text-green-700',
-  published: 'bg-emerald-100 text-emerald-700',
+const STATUS_VARIANTS: Record<EditorialStatus, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
+  machine_draft: 'info',
+  needs_review: 'warning',
+  reviewed: 'default',
+  validated: 'success',
+  published: 'success',
 }
 
 interface Props {
@@ -27,34 +28,30 @@ const TranscriptionPanel: FC<Props> = ({ ocr, editorial, visible }) => {
   if (!visible) return null
 
   return (
-    <div className="px-4 py-4">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-xs font-semibold text-stone-500 uppercase tracking-wide">
-          Transcription diplomatique
-        </h3>
-        <span
-          className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[editorial.status]}`}
-        >
+    <div className="p-2">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-retro-xs font-bold">Transcription diplomatique</span>
+        <RetroBadge variant={STATUS_VARIANTS[editorial.status]}>
           {STATUS_LABELS[editorial.status]}
-        </span>
+        </RetroBadge>
       </div>
       {ocr ? (
         <div>
           {ocr.diplomatic_text ? (
-            <p className="text-sm text-stone-800 leading-relaxed font-serif whitespace-pre-wrap">
+            <p className="text-retro-sm whitespace-pre-wrap font-retro leading-relaxed">
               {ocr.diplomatic_text}
             </p>
           ) : (
-            <p className="text-sm text-stone-400 italic">Texte vide.</p>
+            <p className="text-retro-sm text-retro-darkgray">Texte vide.</p>
           )}
           {ocr.confidence > 0 && (
-            <div className="mt-2 text-xs text-stone-400">
-              Confiance OCR : {(ocr.confidence * 100).toFixed(0)} %
+            <div className="mt-2 text-retro-xs text-retro-darkgray">
+              Confiance : {(ocr.confidence * 100).toFixed(0)}% — Langue : {ocr.language}
             </div>
           )}
         </div>
       ) : (
-        <p className="text-sm text-stone-400 italic">Transcription non disponible.</p>
+        <p className="text-retro-sm text-retro-darkgray">Transcription non disponible.</p>
       )}
     </div>
   )

frontend/src/components/TranslationPanel.tsx

@@ -1,20 +1,21 @@
 import type { FC } from 'react'
 import type { Translation, EditorialInfo, EditorialStatus } from '../lib/api.ts'
+import { RetroBadge } from './retro'
 
 const STATUS_LABELS: Record<EditorialStatus, string> = {
   machine_draft: 'Brouillon IA',
-  needs_review: 'À réviser',
-  reviewed: 'Révisé',
-  validated: 'Validé',
-  published: 'Publié',
+  needs_review: 'A reviser',
+  reviewed: 'Revise',
+  validated: 'Valide',
+  published: 'Publie',
 }
 
-const STATUS_COLORS: Record<EditorialStatus, string> = {
-  machine_draft: 'bg-amber-100 text-amber-700',
-  needs_review: 'bg-orange-100 text-orange-700',
-  reviewed: 'bg-blue-100 text-blue-700',
-  validated: 'bg-green-100 text-green-700',
-  published: 'bg-emerald-100 text-emerald-700',
+const STATUS_VARIANTS: Record<EditorialStatus, 'default' | 'success' | 'warning' | 'error' | 'info'> = {
+  machine_draft: 'info',
+  needs_review: 'warning',
+  reviewed: 'default',
+  validated: 'success',
+  published: 'success',
 }
 
 interface Props {
@@ -27,23 +28,19 @@ const TranslationPanel: FC<Props> = ({ translation, editorial, visible }) => {
   if (!visible) return null
 
   return (
-    <div className="px-4 py-4">
-      <div className="flex items-center justify-between mb-3">
-        <h3 className="text-xs font-semibold text-stone-500 uppercase tracking-wide">
-          Traduction (FR)
-        </h3>
-        <span
-          className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[editorial.status]}`}
-        >
+    <div className="p-2">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-retro-xs font-bold">Traduction (FR)</span>
+        <RetroBadge variant={STATUS_VARIANTS[editorial.status]}>
           {STATUS_LABELS[editorial.status]}
-        </span>
+        </RetroBadge>
       </div>
       {translation?.fr ? (
-        <p className="text-sm text-stone-800 leading-relaxed whitespace-pre-wrap">
+        <p className="text-retro-sm whitespace-pre-wrap font-retro leading-relaxed">
           {translation.fr}
         </p>
       ) : (
-        <p className="text-sm text-stone-400 italic">Traduction non disponible.</p>
+        <p className="text-retro-sm text-retro-darkgray">Traduction non disponible.</p>
       )}
     </div>
   )

frontend/src/components/Viewer.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, type FC } from 'react'
 import OpenSeadragon from 'openseadragon'
+import { RetroButton } from './retro'
 
 interface Props {
   imageUrl: string
@@ -10,7 +11,6 @@ const Viewer: FC<Props> = ({ imageUrl, onViewerReady }) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const viewerRef = useRef<OpenSeadragon.Viewer | null>(null)
 
-  // Initialise OSD une seule fois
   useEffect(() => {
     if (!containerRef.current) return
 
@@ -32,7 +32,6 @@ const Viewer: FC<Props> = ({ imageUrl, onViewerReady }) => {
     }
   }, [])
 
-  // Ouvre l'image à chaque changement d'URL
   useEffect(() => {
     const viewer = viewerRef.current
     if (!viewer || !imageUrl) return
@@ -42,40 +41,39 @@ const Viewer: FC<Props> = ({ imageUrl, onViewerReady }) => {
       onViewerReady?.(viewer)
     })
   }, [imageUrl]) // eslint-disable-line react-hooks/exhaustive-deps
-  // onViewerReady est intentionnellement exclu : c'est un callback stable
 
   return (
-    <div className="relative w-full h-full bg-stone-800">
+    <div className="relative w-full h-full bg-retro-black">
       <div ref={containerRef} className="w-full h-full" />
-      <div className="absolute bottom-3 right-3 flex gap-1.5">
-        <button
+      <div className="absolute bottom-2 right-2 flex gap-[2px]">
+        <RetroButton
+          size="sm"
           onClick={() => viewerRef.current?.viewport.zoomBy(1.5)}
-          className="w-8 h-8 bg-stone-800/80 text-stone-200 rounded hover:bg-stone-700 text-sm font-bold"
           title="Zoom +"
         >
           +
-        </button>
-        <button
+        </RetroButton>
+        <RetroButton
+          size="sm"
           onClick={() => viewerRef.current?.viewport.zoomBy(0.67)}
-          className="w-8 h-8 bg-stone-800/80 text-stone-200 rounded hover:bg-stone-700 text-sm font-bold"
-          title="Zoom −"
+          title="Zoom -"
         >
-          −
-        </button>
-        <button
+          -
+        </RetroButton>
+        <RetroButton
+          size="sm"
           onClick={() => viewerRef.current?.viewport.goHome()}
-          className="w-8 h-8 bg-stone-800/80 text-stone-200 rounded hover:bg-stone-700 text-xs"
-          title="Réinitialiser"
+          title="Reset"
         >
-          ⊙
-        </button>
-        <button
+          o
+        </RetroButton>
+        <RetroButton
+          size="sm"
           onClick={() => viewerRef.current?.setFullScreen(true)}
-          className="w-8 h-8 bg-stone-800/80 text-stone-200 rounded hover:bg-stone-700 text-xs"
-          title="Plein écran"
+          title="Plein ecran"
         >
-          ⛶
-        </button>
+          []
+        </RetroButton>
       </div>
     </div>
   )

frontend/src/pages/Reader.tsx

@@ -15,6 +15,7 @@ import LayerPanel from '../components/LayerPanel.tsx'
 import TranscriptionPanel from '../components/TranscriptionPanel.tsx'
 import TranslationPanel from '../components/TranslationPanel.tsx'
 import CommentaryPanel from '../components/CommentaryPanel.tsx'
+import { RetroMenuBar, RetroWindow, RetroButton, RetroBadge } from '../components/retro'
 
 interface Props {
   manuscriptId: string
@@ -34,7 +35,6 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  // Chargement initial : liste des pages + profil
   useEffect(() => {
     Promise.all([fetchPages(manuscriptId), fetchProfile(profileId)])
       .then(([pgs, prof]) => {
@@ -47,7 +47,6 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
       .finally(() => setLoading(false))
   }, [manuscriptId, profileId])
 
-  // Chargement du master.json à chaque changement de page
   useEffect(() => {
     if (pages.length === 0) return
     setMaster(null)
@@ -68,25 +67,38 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
     })
   }, [])
 
+  // ── Loading ─────────────────────────────────────────────────────────
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-screen text-stone-500">
-        Chargement…
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Chargement" className="w-64">
+          <div className="p-4 text-retro-sm text-center">Chargement...</div>
+        </RetroWindow>
       </div>
     )
   }
 
   if (error) {
-    return <div className="p-8 text-red-600">Erreur : {error}</div>
+    return (
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Erreur" className="w-80">
+          <div className="p-4 text-retro-sm">{error}</div>
+        </RetroWindow>
+      </div>
+    )
   }
 
   if (pages.length === 0) {
     return (
-      <div className="p-8 text-stone-500">
-        Aucune page dans ce manuscrit.{' '}
-        <button onClick={onBack} className="underline">
-          Retour
-        </button>
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Manuscrit vide" className="w-80">
+          <div className="p-4 text-retro-sm">
+            Aucune page dans ce manuscrit.
+            <div className="mt-2">
+              <RetroButton onClick={onBack}>Retour</RetroButton>
+            </div>
+          </div>
+        </RetroWindow>
       </div>
     )
   }
@@ -96,106 +108,119 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
   const regions: Region[] = master?.layout?.regions ?? []
 
   return (
-    <div className="flex flex-col h-screen bg-stone-100">
-      {/* ── Barre de navigation ─────────────────────────────────────────────── */}
-      <header className="flex items-center gap-3 bg-stone-900 text-stone-100 px-5 py-2.5 shrink-0">
-        <button
-          onClick={onBack}
-          className="text-stone-400 hover:text-stone-100 text-sm transition-colors"
-        >
-          ← Corpus
-        </button>
-        <span className="text-stone-600">|</span>
-        <span className="text-sm font-medium text-stone-200 truncate max-w-xs">
-          {profile?.label ?? profileId}
-        </span>
-
-        <div className="ml-auto flex items-center gap-2">
-          <span className="text-stone-400 text-xs">
-            {currentPage.folio_label} — {currentIndex + 1} / {pages.length}
-          </span>
-          {onEdit && (
-            <button
-              onClick={() => onEdit(currentPage.id)}
-              className="px-3 py-1 bg-amber-600 hover:bg-amber-500 rounded text-sm text-white transition-colors"
+    <div className="flex flex-col h-screen bg-retro-dither">
+      {/* ── Menu bar ───────────────────────────────────────────────── */}
+      <RetroMenuBar
+        items={[
+          { label: 'IIIF Studio', onClick: onBack },
+          { label: profile?.label ?? profileId },
+        ]}
+        right={
+          <div className="flex items-center gap-1">
+            <span className="text-retro-xs px-2">
+              {currentPage.folio_label} — {currentIndex + 1}/{pages.length}
+            </span>
+            <RetroButton
+              size="sm"
+              disabled={currentIndex === 0}
+              onClick={() => setCurrentIndex((i) => i - 1)}
             >
-              Éditer cette page
-            </button>
-          )}
-          <button
-            disabled={currentIndex === 0}
-            onClick={() => setCurrentIndex((i) => i - 1)}
-            className="px-3 py-1 bg-stone-700 hover:bg-stone-600 disabled:opacity-30 rounded text-sm transition-colors"
-          >
-            ←
-          </button>
-          <button
-            disabled={currentIndex === pages.length - 1}
-            onClick={() => setCurrentIndex((i) => i + 1)}
-            className="px-3 py-1 bg-stone-700 hover:bg-stone-600 disabled:opacity-30 rounded text-sm transition-colors"
-          >
-            →
-          </button>
-        </div>
-      </header>
-
-      {/* ── Contenu principal ───────────────────────────────────────────────── */}
-      <div className="flex flex-1 overflow-hidden">
-        {/* Visionneuse 70% */}
-        <div className="relative flex flex-col" style={{ width: '70%' }}>
-          <Viewer imageUrl={imageUrl} onViewerReady={handleViewerReady} />
-          <RegionOverlay
-            viewer={osdViewer}
-            regions={regions}
-            onRegionClick={setSelectedRegion}
-          />
-
-          {/* Fiche région (popup) */}
-          {selectedRegion && (
-            <div className="absolute bottom-14 left-4 bg-white/95 backdrop-blur-sm rounded-lg shadow-xl border border-stone-200 p-3 max-w-xs text-xs">
-              <div className="flex items-center justify-between gap-4 mb-1.5">
-                <span className="font-semibold text-stone-800 capitalize">
-                  {selectedRegion.type.replace(/_/g, ' ')}
-                </span>
-                <button
-                  onClick={() => setSelectedRegion(null)}
-                  className="text-stone-400 hover:text-stone-700 leading-none"
-                >
-                  ✕
-                </button>
-              </div>
-              <div className="space-y-0.5 text-stone-500">
-                <div>id : <span className="font-mono">{selectedRegion.id}</span></div>
-                <div>confiance : {(selectedRegion.confidence * 100).toFixed(0)} %</div>
-                <div>bbox : [{selectedRegion.bbox.join(', ')}]</div>
+              Prev
+            </RetroButton>
+            <RetroButton
+              size="sm"
+              disabled={currentIndex === pages.length - 1}
+              onClick={() => setCurrentIndex((i) => i + 1)}
+            >
+              Next
+            </RetroButton>
+            {onEdit && (
+              <RetroButton size="sm" onClick={() => onEdit(currentPage.id)}>
+                Editer
+              </RetroButton>
+            )}
+          </div>
+        }
+      />
+
+      {/* ── Main content ───────────────────────────────────────────── */}
+      <div className="flex flex-1 overflow-hidden p-1 gap-1">
+
+        {/* ── Viewer window (left, 70%) ──────────────────────────── */}
+        <RetroWindow
+          title={`Folio ${currentPage.folio_label}`}
+          statusBar={
+            master
+              ? `${master.editorial.status} — v${master.editorial.version}`
+              : imageUrl ? 'Page non analysee' : 'Aucune image'
+          }
+          className="flex-[7] min-w-0"
+        >
+          <div className="relative w-full h-full">
+            <Viewer imageUrl={imageUrl} onViewerReady={handleViewerReady} />
+            <RegionOverlay
+              viewer={osdViewer}
+              regions={regions}
+              onRegionClick={setSelectedRegion}
+            />
+
+            {/* Region info popup */}
+            {selectedRegion && (
+              <div
+                className="
+                  absolute bottom-12 left-2
+                  border-retro border-retro-black
+                  bg-retro-white shadow-retro
+                  text-retro-xs p-2 max-w-[220px]
+                "
+              >
+                <div className="flex items-center justify-between gap-2 mb-1">
+                  <span className="font-bold capitalize">
+                    {selectedRegion.type.replace(/_/g, ' ')}
+                  </span>
+                  <button
+                    onClick={() => setSelectedRegion(null)}
+                    className="text-retro-black font-bold hover:bg-retro-black hover:text-retro-white px-1"
+                  >
+                    x
+                  </button>
+                </div>
+                <div className="space-y-[1px] text-retro-darkgray">
+                  <div>id: {selectedRegion.id}</div>
+                  <div>confiance: {(selectedRegion.confidence * 100).toFixed(0)}%</div>
+                  <div>bbox: [{selectedRegion.bbox.join(', ')}]</div>
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
-          {/* Indicateur page non analysée */}
-          {!master && !loading && imageUrl && (
-            <div className="absolute top-3 left-3 bg-amber-500/90 text-white text-xs px-3 py-1 rounded-full">
-              Page non analysée
-            </div>
-          )}
-        </div>
+            {/* Not analyzed badge */}
+            {!master && !loading && imageUrl && (
+              <div className="absolute top-2 left-2">
+                <RetroBadge variant="warning">Non analysee</RetroBadge>
+              </div>
+            )}
+          </div>
+        </RetroWindow>
 
-        {/* Panneaux droite 30% */}
-        <div
-          className="flex flex-col overflow-hidden border-l border-stone-200 bg-white"
-          style={{ width: '30%' }}
+        {/* ── Right panels (30%) ─────────────────────────────────── */}
+        <RetroWindow
+          title="Analyse"
+          className="flex-[3] min-w-0"
+          scrollable
         >
-          {profile && (
-            <LayerPanel
-              activeLayers={profile.active_layers}
-              visibleLayers={visibleLayers}
-              onToggle={toggleLayer}
-            />
-          )}
+          <div className="flex flex-col">
+            {/* Layer toggles */}
+            {profile && (
+              <LayerPanel
+                activeLayers={profile.active_layers}
+                visibleLayers={visibleLayers}
+                onToggle={toggleLayer}
+              />
+            )}
 
-          <div className="flex-1 overflow-y-auto divide-y divide-stone-100">
+            {/* Content panels */}
             {master ? (
-              <>
+              <div className="divide-y divide-retro-gray">
                 <TranscriptionPanel
                   ocr={master.ocr}
                   editorial={master.editorial}
@@ -212,18 +237,17 @@ export default function Reader({ manuscriptId, profileId, onBack, onEdit }: Prop
                   visiblePublic={visibleLayers.has('public_commentary')}
                   visibleScholarly={visibleLayers.has('scholarly_commentary')}
                 />
-              </>
+              </div>
             ) : (
-              <div className="p-4 text-sm text-stone-400 italic">
-                {imageUrl ? (
-                  <span>Page non encore analysée par l&apos;IA.</span>
-                ) : (
-                  <span>Aucune image associée à cette page.</span>
-                )}
+              <div className="p-3 text-retro-sm text-retro-darkgray">
+                {imageUrl
+                  ? 'Page non encore analysee par l\'IA.'
+                  : 'Aucune image associee a cette page.'
+                }
               </div>
             )}
           </div>
-        </div>
+        </RetroWindow>
       </div>
     </div>
   )