feat(sprint5): frontend React minimal — visionneuse + 4 couches

## Backend
- GET /api/v1/corpora/{id}/manuscripts (nouveau endpoint)
- GET /api/v1/manuscripts/{id}/pages (nouveau router manuscripts.py)
- main.py : SPA catch-all — sert /app/static/ en prod, /docs en dev
- Dockerfile + infra/Dockerfile : multi-stage (node:20-slim + python:3.11-slim)

## Frontend (frontend/)
- React 18 + Vite 5 + TypeScript strict + Tailwind CSS v3
- OpenSeadragon 4.x : zoom / pan / plein écran
- Viewer.tsx + RegionOverlay.tsx : overlays SVG par type de région
- LayerPanel.tsx : cases à cocher pilotées par CorpusProfile.active_layers
- TranscriptionPanel / TranslationPanel / CommentaryPanel (onglets Public/Savant)
- Home.tsx : liste des corpus, navigation vers manuscrits
- Reader.tsx : layout 70/30, navigation page précédente/suivante
- lib/api.ts : types TypeScript + fetchCorpora/fetchPages/fetchMasterJson…

https://claude.ai/code/session_018woyEHc8HG2th7V4ewJ4Kg

Dockerfile

@@ -1,16 +1,24 @@
-# Scriptorium AI — image de production
+# Scriptorium AI — image de production (multi-stage)
 # Ce fichier est la copie exacte de infra/Dockerfile.
 # Il est requis à la racine du dépôt pour HuggingFace Spaces (SDK docker).
 #
 # Build depuis la racine du dépôt :
 #   docker build -t scriptorium-ai .
-#
-# Structure attendue dans l'image :
-#   /app/backend/app/   ← source Python (importable via PYTHONPATH)
-#   /app/profiles/      ← profils JSON
-#   /app/prompts/       ← templates de prompts
-#   /app/data/          ← créé vide ; à monter en volume pour les artefacts
 
+# ── Stage 1 : build du frontend React ────────────────────────────────────────
+FROM node:20-slim AS frontend-builder
+
+WORKDIR /frontend
+
+# Installer les dépendances (cache layer séparé)
+COPY frontend/package.json ./
+RUN npm install
+
+# Copier les sources et builder
+COPY frontend/ ./
+RUN npm run build
+
+# ── Stage 2 : image Python finale ────────────────────────────────────────────
 FROM python:3.11-slim
 
 WORKDIR /app
@@ -25,11 +33,14 @@ RUN mkdir -p /tmp/build/app \
     && pip install --no-cache-dir /tmp/build/ \
     && rm -rf /tmp/build
 
-# ── Code source ────────────────────────────────────────────────────────────
+# ── Code source backend ────────────────────────────────────────────────────
 COPY backend/app ./backend/app
 COPY profiles/ ./profiles/
 COPY prompts/ ./prompts/
 
+# ── Frontend buildé ────────────────────────────────────────────────────────
+COPY --from=frontend-builder /frontend/dist ./static
+
 # ── Répertoire des artefacts (vide dans l'image ; monté en volume) ─────────
 RUN mkdir -p /app/data
 

backend/app/api/v1/corpora.py

@@ -5,6 +5,7 @@ GET    /api/v1/corpora
 POST   /api/v1/corpora
 GET    /api/v1/corpora/{corpus_id}
 DELETE /api/v1/corpora/{corpus_id}
+GET    /api/v1/corpora/{corpus_id}/manuscripts
 
 Règle : toute logique métier est dans les services, jamais dans les routers.
 """
@@ -19,7 +20,7 @@ from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 # 3. local
-from app.models.corpus import CorpusModel
+from app.models.corpus import CorpusModel, ManuscriptModel
 from app.models.database import get_db
 
 router = APIRouter(prefix="/corpora", tags=["corpora"])
@@ -44,6 +45,17 @@ class CorpusResponse(BaseModel):
     updated_at: datetime
 
 
+class ManuscriptResponse(BaseModel):
+    model_config = ConfigDict(from_attributes=True)
+
+    id: str
+    corpus_id: str
+    title: str
+    shelfmark: str | None
+    date_label: str | None
+    total_pages: int
+
+
 # ── Endpoints ────────────────────────────────────────────────────────────────
 
 @router.get("", response_model=list[CorpusResponse])
@@ -97,3 +109,17 @@ async def delete_corpus(corpus_id: str, db: AsyncSession = Depends(get_db)) -> N
         raise HTTPException(status_code=404, detail="Corpus introuvable")
     await db.delete(corpus)
     await db.commit()
+
+
+@router.get("/{corpus_id}/manuscripts", response_model=list[ManuscriptResponse])
+async def list_manuscripts(
+    corpus_id: str, db: AsyncSession = Depends(get_db)
+) -> list[ManuscriptModel]:
+    """Retourne tous les manuscrits d'un corpus."""
+    corpus = await db.get(CorpusModel, corpus_id)
+    if corpus is None:
+        raise HTTPException(status_code=404, detail="Corpus introuvable")
+    result = await db.execute(
+        select(ManuscriptModel).where(ManuscriptModel.corpus_id == corpus_id)
+    )
+    return list(result.scalars().all())

backend/app/api/v1/manuscripts.py

@@ -0,0 +1,44 @@
+"""
+Endpoints pour les manuscrits (R10 — préfixe /api/v1/).
+
+GET  /api/v1/manuscripts/{manuscript_id}/pages
+"""
+# 2. third-party
+from fastapi import APIRouter, Depends, HTTPException
+from pydantic import BaseModel, ConfigDict
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+# 3. local
+from app.models.corpus import ManuscriptModel, PageModel
+from app.models.database import get_db
+
+router = APIRouter(prefix="/manuscripts", tags=["manuscripts"])
+
+
+class PageResponse(BaseModel):
+    model_config = ConfigDict(from_attributes=True)
+
+    id: str
+    manuscript_id: str
+    folio_label: str
+    sequence: int
+    image_master_path: str | None
+    processing_status: str
+    confidence_summary: float | None
+
+
+@router.get("/{manuscript_id}/pages", response_model=list[PageResponse])
+async def list_pages(
+    manuscript_id: str, db: AsyncSession = Depends(get_db)
+) -> list[PageModel]:
+    """Retourne toutes les pages d'un manuscrit, triées par séquence."""
+    ms = await db.get(ManuscriptModel, manuscript_id)
+    if ms is None:
+        raise HTTPException(status_code=404, detail="Manuscrit introuvable")
+    result = await db.execute(
+        select(PageModel)
+        .where(PageModel.manuscript_id == manuscript_id)
+        .order_by(PageModel.sequence)
+    )
+    return list(result.scalars().all())

backend/app/main.py

@@ -8,15 +8,16 @@ La BDD SQLite est créée automatiquement au démarrage (lifespan).
 # 1. stdlib
 import logging
 from contextlib import asynccontextmanager
+from pathlib import Path
 
 # 2. third-party
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import RedirectResponse
+from fastapi.responses import FileResponse, RedirectResponse
 
 # 3. local — on importe les modèles pour que Base.metadata les connaisse
 import app.models  # noqa: F401  (enregistrement des modèles SQLAlchemy)
-from app.api.v1 import corpora, export, ingest, jobs, models_api, pages, profiles
+from app.api.v1 import corpora, export, ingest, jobs, manuscripts, models_api, pages, profiles
 from app.models.database import Base, engine
 
 logger = logging.getLogger(__name__)
@@ -49,19 +50,30 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# ── Root redirect → /docs ─────────────────────────────────────────────────────
-@app.get("/", include_in_schema=False)
-async def root() -> RedirectResponse:
-    return RedirectResponse(url="/docs")
-
-
 # ── Routers (préfixe /api/v1/ — R10) ─────────────────────────────────────────
 _V1_PREFIX = "/api/v1"
 
 app.include_router(corpora.router, prefix=_V1_PREFIX)
+app.include_router(manuscripts.router, prefix=_V1_PREFIX)
 app.include_router(pages.router, prefix=_V1_PREFIX)
 app.include_router(export.router, prefix=_V1_PREFIX)
 app.include_router(profiles.router, prefix=_V1_PREFIX)
 app.include_router(jobs.router, prefix=_V1_PREFIX)
 app.include_router(ingest.router, prefix=_V1_PREFIX)
 app.include_router(models_api.router, prefix=_V1_PREFIX)
+
+# ── Serving frontend SPA (production) ou redirect /docs (dev) ────────────────
+_STATIC_DIR = Path("/app/static")
+
+
+@app.get("/{full_path:path}", include_in_schema=False)
+async def serve_frontend(full_path: str) -> FileResponse | RedirectResponse:
+    """En production sert le frontend React (SPA). En dev redirige vers /docs."""
+    if _STATIC_DIR.is_dir():
+        candidate = _STATIC_DIR / full_path
+        if candidate.is_file():
+            return FileResponse(candidate)
+        index = _STATIC_DIR / "index.html"
+        if index.exists():
+            return FileResponse(index)
+    return RedirectResponse(url="/docs")

frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Scriptorium AI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "scriptorium-ai-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "openseadragon": "^4.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/openseadragon": "^3.0.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import Home from './pages/Home.tsx'
+import Reader from './pages/Reader.tsx'
+
+type View =
+  | { name: 'home' }
+  | { name: 'reader'; manuscriptId: string; profileId: string }
+
+export default function App() {
+  const [view, setView] = useState<View>({ name: 'home' })
+
+  if (view.name === 'reader') {
+    return (
+      <Reader
+        manuscriptId={view.manuscriptId}
+        profileId={view.profileId}
+        onBack={() => setView({ name: 'home' })}
+      />
+    )
+  }
+
+  return (
+    <Home
+      onOpenManuscript={(manuscriptId, profileId) =>
+        setView({ name: 'reader', manuscriptId, profileId })
+      }
+    />
+  )
+}

frontend/src/components/CommentaryPanel.tsx

@@ -0,0 +1,81 @@
+import { useState, type FC } from 'react'
+import type { Commentary, EditorialInfo, EditorialStatus } from '../lib/api.ts'
+
+const STATUS_LABELS: Record<EditorialStatus, string> = {
+  machine_draft: 'Brouillon IA',
+  needs_review: 'À réviser',
+  reviewed: 'Révisé',
+  validated: 'Validé',
+  published: 'Publié',
+}
+
+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',
+}
+
+interface Props {
+  commentary: Commentary | null
+  editorial: EditorialInfo
+  visiblePublic: boolean
+  visibleScholarly: boolean
+}
+
+const CommentaryPanel: FC<Props> = ({ commentary, editorial, visiblePublic, visibleScholarly }) => {
+  const [tab, setTab] = useState<'public' | 'scholarly'>('public')
+
+  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' :
+    tab
+
+  const content = activeTab === 'public' ? commentary?.public : commentary?.scholarly
+  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]}`}
+        >
+          {STATUS_LABELS[editorial.status]}
+        </span>
+      </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>
+      )}
+
+      {content ? (
+        <p className="text-sm text-stone-800 leading-relaxed whitespace-pre-wrap">{content}</p>
+      ) : (
+        <p className="text-sm text-stone-400 italic">Commentaire non disponible.</p>
+      )}
+    </div>
+  )
+}
+
+export default CommentaryPanel

frontend/src/components/LayerPanel.tsx

@@ -0,0 +1,47 @@
+import type { FC } from 'react'
+
+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',
+  iconography_detection: 'Iconographie',
+  material_notes: 'Notes matérielles',
+  uncertainty: 'Incertitudes',
+}
+
+interface Props {
+  activeLayers: string[]
+  visibleLayers: Set<string>
+  onToggle: (layer: string) => void
+}
+
+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">
+      {activeLayers.map((layer) => (
+        <label
+          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>
+      ))}
+    </div>
+  </div>
+)
+
+export default LayerPanel

frontend/src/components/RegionOverlay.tsx

@@ -0,0 +1,74 @@
+import { useEffect, type FC } from 'react'
+import type OpenSeadragon from 'openseadragon'
+import type { Region } from '../lib/api.ts'
+
+const REGION_COLORS: Record<string, string> = {
+  text_block: '#3b82f6',         // bleu
+  miniature: '#f59e0b',          // or
+  decorated_initial: '#10b981',  // vert
+  margin: '#6b7280',             // gris
+  rubric: '#ef4444',             // rouge
+  other: '#8b5cf6',              // violet
+}
+
+interface Props {
+  viewer: OpenSeadragon.Viewer | null
+  regions: Region[]
+  onRegionClick: (region: Region) => void
+}
+
+const RegionOverlay: FC<Props> = ({ viewer, regions, onRegionClick }) => {
+  useEffect(() => {
+    if (!viewer) return
+
+    const addOverlays = () => {
+      viewer.clearOverlays()
+      const item = viewer.world.getItemAt(0)
+      if (!item) return
+
+      for (const region of regions) {
+        const [x, y, w, h] = region.bbox
+        const color = REGION_COLORS[region.type] ?? REGION_COLORS['other']
+
+        const el = document.createElement('div')
+        el.style.border = `2px solid ${color}`
+        el.style.boxSizing = 'border-box'
+        el.style.cursor = 'pointer'
+        el.title = `${region.type} · ${(region.confidence * 100).toFixed(0)} %`
+
+        el.addEventListener('mouseenter', () => {
+          el.style.backgroundColor = `${color}33`
+        })
+        el.addEventListener('mouseleave', () => {
+          el.style.backgroundColor = ''
+        })
+        el.addEventListener('click', (e: MouseEvent) => {
+          e.stopPropagation()
+          onRegionClick(region)
+        })
+
+        const rect = item.imageToViewportRectangle(x, y, w, h)
+        viewer.addOverlay(el, rect)
+      }
+    }
+
+    if (viewer.isOpen()) {
+      addOverlays()
+    } else {
+      viewer.addOnceHandler('open', addOverlays)
+    }
+
+    return () => {
+      // Nettoyage : retire les overlays au prochain rendu
+      try {
+        viewer.clearOverlays()
+      } catch {
+        // viewer peut avoir été détruit lors du démontage
+      }
+    }
+  }, [viewer, regions, onRegionClick])
+
+  return null
+}
+
+export default RegionOverlay

frontend/src/components/TranscriptionPanel.tsx

@@ -0,0 +1,63 @@
+import type { FC } from 'react'
+import type { OCRResult, EditorialInfo, EditorialStatus } from '../lib/api.ts'
+
+const STATUS_LABELS: Record<EditorialStatus, string> = {
+  machine_draft: 'Brouillon IA',
+  needs_review: 'À réviser',
+  reviewed: 'Révisé',
+  validated: 'Validé',
+  published: 'Publié',
+}
+
+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',
+}
+
+interface Props {
+  ocr: OCRResult | null
+  editorial: EditorialInfo
+  visible: boolean
+}
+
+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]}`}
+        >
+          {STATUS_LABELS[editorial.status]}
+        </span>
+      </div>
+      {ocr ? (
+        <div>
+          {ocr.diplomatic_text ? (
+            <p className="text-sm text-stone-800 leading-relaxed font-serif whitespace-pre-wrap">
+              {ocr.diplomatic_text}
+            </p>
+          ) : (
+            <p className="text-sm text-stone-400 italic">Texte vide.</p>
+          )}
+          {ocr.confidence > 0 && (
+            <div className="mt-2 text-xs text-stone-400">
+              Confiance OCR : {(ocr.confidence * 100).toFixed(0)} %
+            </div>
+          )}
+        </div>
+      ) : (
+        <p className="text-sm text-stone-400 italic">Transcription non disponible.</p>
+      )}
+    </div>
+  )
+}
+
+export default TranscriptionPanel

frontend/src/components/TranslationPanel.tsx

@@ -0,0 +1,52 @@
+import type { FC } from 'react'
+import type { Translation, EditorialInfo, EditorialStatus } from '../lib/api.ts'
+
+const STATUS_LABELS: Record<EditorialStatus, string> = {
+  machine_draft: 'Brouillon IA',
+  needs_review: 'À réviser',
+  reviewed: 'Révisé',
+  validated: 'Validé',
+  published: 'Publié',
+}
+
+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',
+}
+
+interface Props {
+  translation: Translation | null
+  editorial: EditorialInfo
+  visible: boolean
+}
+
+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]}`}
+        >
+          {STATUS_LABELS[editorial.status]}
+        </span>
+      </div>
+      {translation?.fr ? (
+        <p className="text-sm text-stone-800 leading-relaxed whitespace-pre-wrap">
+          {translation.fr}
+        </p>
+      ) : (
+        <p className="text-sm text-stone-400 italic">Traduction non disponible.</p>
+      )}
+    </div>
+  )
+}
+
+export default TranslationPanel

frontend/src/components/Viewer.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useRef, type FC } from 'react'
+import OpenSeadragon from 'openseadragon'
+
+interface Props {
+  imageUrl: string
+  onViewerReady?: (viewer: OpenSeadragon.Viewer) => void
+}
+
+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
+
+    const viewer = OpenSeadragon({
+      element: containerRef.current,
+      showNavigationControl: false,
+      gestureSettingsMouse: { clickToZoom: false, scrollToZoom: true, dragToPan: true },
+      gestureSettingsTouch: { scrollToZoom: true, dragToPan: true, pinchToZoom: true },
+      animationTime: 0.3,
+      minZoomLevel: 0.1,
+      maxZoomLevel: 20,
+    })
+
+    viewerRef.current = viewer
+
+    return () => {
+      viewer.destroy()
+      viewerRef.current = null
+    }
+  }, [])
+
+  // Ouvre l'image à chaque changement d'URL
+  useEffect(() => {
+    const viewer = viewerRef.current
+    if (!viewer || !imageUrl) return
+
+    viewer.open({ type: 'image', url: imageUrl })
+    viewer.addOnceHandler('open', () => {
+      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 ref={containerRef} className="w-full h-full" />
+      <div className="absolute bottom-3 right-3 flex gap-1.5">
+        <button
+          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
+          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 −"
+        >
+          −
+        </button>
+        <button
+          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"
+        >
+          ⊙
+        </button>
+        <button
+          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"
+        >
+          ⛶
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Viewer

frontend/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/src/lib/api.ts

@@ -0,0 +1,149 @@
+const BASE_URL: string = import.meta.env.VITE_API_URL ?? ''
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface Corpus {
+  id: string
+  slug: string
+  title: string
+  profile_id: string
+  created_at: string
+  updated_at: string
+}
+
+export interface Manuscript {
+  id: string
+  corpus_id: string
+  title: string
+  shelfmark: string | null
+  date_label: string | null
+  total_pages: number
+}
+
+export interface Page {
+  id: string
+  manuscript_id: string
+  folio_label: string
+  sequence: number
+  image_master_path: string | null
+  processing_status: string
+  confidence_summary: number | null
+}
+
+export type RegionType =
+  | 'text_block'
+  | 'miniature'
+  | 'decorated_initial'
+  | 'margin'
+  | 'rubric'
+  | 'other'
+
+export interface Region {
+  id: string
+  type: RegionType
+  bbox: [number, number, number, number]
+  confidence: number
+  polygon?: number[][] | null
+  parent_region_id?: string | null
+}
+
+export interface OCRResult {
+  diplomatic_text: string
+  language: string
+  confidence: number
+  uncertain_segments: string[]
+}
+
+export interface Translation {
+  fr: string
+  en: string
+}
+
+export interface CommentaryClaim {
+  claim: string
+  evidence_region_ids: string[]
+  certainty: 'high' | 'medium' | 'low' | 'speculative'
+}
+
+export interface Commentary {
+  public: string
+  scholarly: string
+  claims: CommentaryClaim[]
+}
+
+export type EditorialStatus =
+  | 'machine_draft'
+  | 'needs_review'
+  | 'reviewed'
+  | 'validated'
+  | 'published'
+
+export interface EditorialInfo {
+  status: EditorialStatus
+  validated: boolean
+  validated_by: string | null
+  version: number
+  notes: string[]
+}
+
+export interface ImageInfo {
+  master?: string
+  derivative_web?: string
+  iiif_base?: string
+  width?: number
+  height?: number
+}
+
+export interface PageMaster {
+  schema_version: string
+  page_id: string
+  corpus_profile: string
+  manuscript_id: string
+  folio_label: string
+  sequence: number
+  image: ImageInfo
+  layout: { regions: Region[] }
+  ocr: OCRResult | null
+  translation: Translation | null
+  summary: { short: string; detailed: string } | null
+  commentary: Commentary | null
+  editorial: EditorialInfo
+}
+
+export interface CorpusProfile {
+  profile_id: string
+  label: string
+  language_hints: string[]
+  script_type: string
+  active_layers: string[]
+  uncertainty_config: { flag_below: number; min_acceptable: number }
+  export_config: { mets: boolean; alto: boolean; tei: boolean }
+}
+
+// ── Fetch helpers ─────────────────────────────────────────────────────────────
+
+async function get<T>(path: string): Promise<T> {
+  const resp = await fetch(`${BASE_URL}${path}`)
+  if (!resp.ok) throw new Error(`HTTP ${resp.status} — ${path}`)
+  return resp.json() as Promise<T>
+}
+
+// ── API functions ─────────────────────────────────────────────────────────────
+
+export const fetchCorpora = (): Promise<Corpus[]> =>
+  get('/api/v1/corpora')
+
+export const fetchManuscripts = (corpusId: string): Promise<Manuscript[]> =>
+  get(`/api/v1/corpora/${corpusId}/manuscripts`)
+
+export const fetchPages = (manuscriptId: string): Promise<Page[]> =>
+  get(`/api/v1/manuscripts/${manuscriptId}/pages`)
+
+export const fetchMasterJson = (pageId: string): Promise<PageMaster> =>
+  get(`/api/v1/pages/${pageId}/master-json`)
+
+export const fetchManifest = (manuscriptId: string): Promise<unknown> =>
+  get(`/api/v1/manuscripts/${manuscriptId}/iiif-manifest`)
+
+export const fetchProfile = (profileId: string): Promise<CorpusProfile> =>
+  get(`/api/v1/profiles/${profileId}`)

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/pages/Home.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react'
+import {
+  fetchCorpora,
+  fetchManuscripts,
+  type Corpus,
+  type Manuscript,
+} from '../lib/api.ts'
+
+interface Props {
+  onOpenManuscript: (manuscriptId: string, profileId: string) => void
+}
+
+export default function Home({ onOpenManuscript }: Props) {
+  const [corpora, setCorpora] = useState<Corpus[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [manuscripts, setManuscripts] = useState<Record<string, Manuscript[]>>({})
+  const [expanding, setExpanding] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchCorpora()
+      .then(setCorpora)
+      .catch((e: Error) => setError(e.message))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const handleCorpusClick = async (corpus: Corpus) => {
+    // Si déjà chargé, naviguer directement si un seul manuscrit
+    const cached = manuscripts[corpus.id]
+    if (cached) {
+      if (cached.length === 1) onOpenManuscript(cached[0].id, corpus.profile_id)
+      return
+    }
+
+    setExpanding(corpus.id)
+    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 {
+      // Échec silencieux — la liste reste vide
+    } finally {
+      setExpanding(null)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-screen text-stone-500">
+        Chargement…
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="p-8 text-red-600">
+        Erreur : {error}
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-stone-50">
+      <header className="bg-stone-900 text-stone-100 px-8 py-6">
+        <h1 className="text-2xl font-semibold tracking-tight">Scriptorium AI</h1>
+        <p className="text-stone-400 text-sm mt-1">
+          Plateforme de génération d'éditions savantes augmentées
+        </p>
+      </header>
+
+      <main className="max-w-3xl mx-auto py-10 px-8">
+        <h2 className="text-sm font-semibold text-stone-500 uppercase tracking-wide mb-6">
+          Corpus disponibles
+        </h2>
+
+        {corpora.length === 0 ? (
+          <p className="text-stone-400 text-sm">
+            Aucun corpus enregistré. Créez-en un via{' '}
+            <code className="bg-stone-200 px-1 rounded text-xs">POST /api/v1/corpora</code>.
+          </p>
+        ) : (
+          <ul className="space-y-3">
+            {corpora.map((corpus) => (
+              <li key={corpus.id}>
+                <button
+                  onClick={() => void handleCorpusClick(corpus)}
+                  className="w-full text-left bg-white border border-stone-200 rounded-lg px-6 py-4 hover:border-stone-400 hover:shadow-sm transition-all"
+                >
+                  <div className="font-medium text-stone-900">{corpus.title}</div>
+                  <div className="text-xs text-stone-400 mt-1">
+                    Profil : {corpus.profile_id} · Slug : {corpus.slug}
+                  </div>
+                </button>
+
+                {expanding === corpus.id && (
+                  <div className="mt-2 ml-4 text-xs text-stone-400">Chargement…</div>
+                )}
+
+                {manuscripts[corpus.id] && manuscripts[corpus.id].length > 1 && (
+                  <ul className="mt-2 ml-4 space-y-1">
+                    {manuscripts[corpus.id].map((ms) => (
+                      <li key={ms.id}>
+                        <button
+                          onClick={() => onOpenManuscript(ms.id, corpus.profile_id)}
+                          className="text-sm text-stone-600 hover:text-stone-900 hover:underline text-left"
+                        >
+                          {ms.title}
+                          {ms.total_pages > 0 && (
+                            <span className="text-stone-400 ml-1">
+                              ({ms.total_pages} pages)
+                            </span>
+                          )}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </main>
+    </div>
+  )
+}

frontend/src/pages/Reader.tsx

@@ -0,0 +1,219 @@
+import { useCallback, useEffect, useState } from 'react'
+import type OpenSeadragon from 'openseadragon'
+import {
+  fetchPages,
+  fetchMasterJson,
+  fetchProfile,
+  type Page,
+  type PageMaster,
+  type CorpusProfile,
+  type Region,
+} from '../lib/api.ts'
+import Viewer from '../components/Viewer.tsx'
+import RegionOverlay from '../components/RegionOverlay.tsx'
+import LayerPanel from '../components/LayerPanel.tsx'
+import TranscriptionPanel from '../components/TranscriptionPanel.tsx'
+import TranslationPanel from '../components/TranslationPanel.tsx'
+import CommentaryPanel from '../components/CommentaryPanel.tsx'
+
+interface Props {
+  manuscriptId: string
+  profileId: string
+  onBack: () => void
+}
+
+export default function Reader({ manuscriptId, profileId, onBack }: Props) {
+  const [pages, setPages] = useState<Page[]>([])
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [master, setMaster] = useState<PageMaster | null>(null)
+  const [profile, setProfile] = useState<CorpusProfile | null>(null)
+  const [visibleLayers, setVisibleLayers] = useState<Set<string>>(new Set())
+  const [osdViewer, setOsdViewer] = useState<OpenSeadragon.Viewer | null>(null)
+  const [selectedRegion, setSelectedRegion] = useState<Region | null>(null)
+  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]) => {
+        const sorted = [...pgs].sort((a, b) => a.sequence - b.sequence)
+        setPages(sorted)
+        setProfile(prof)
+        setVisibleLayers(new Set(prof.active_layers))
+      })
+      .catch((e: Error) => setError(e.message))
+      .finally(() => setLoading(false))
+  }, [manuscriptId, profileId])
+
+  // Chargement du master.json à chaque changement de page
+  useEffect(() => {
+    if (pages.length === 0) return
+    setMaster(null)
+    setSelectedRegion(null)
+    fetchMasterJson(pages[currentIndex].id).then(setMaster).catch(() => setMaster(null))
+  }, [pages, currentIndex])
+
+  const handleViewerReady = useCallback((v: OpenSeadragon.Viewer) => {
+    setOsdViewer(v)
+  }, [])
+
+  const toggleLayer = useCallback((layer: string) => {
+    setVisibleLayers((prev) => {
+      const next = new Set(prev)
+      if (next.has(layer)) next.delete(layer)
+      else next.add(layer)
+      return next
+    })
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-screen text-stone-500">
+        Chargement…
+      </div>
+    )
+  }
+
+  if (error) {
+    return <div className="p-8 text-red-600">Erreur : {error}</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>
+    )
+  }
+
+  const currentPage = pages[currentIndex]
+  const imageUrl = currentPage.image_master_path ?? ''
+  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>
+          <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>
+              </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>
+
+        {/* Panneaux droite 30% */}
+        <div
+          className="flex flex-col overflow-hidden border-l border-stone-200 bg-white"
+          style={{ width: '30%' }}
+        >
+          {profile && (
+            <LayerPanel
+              activeLayers={profile.active_layers}
+              visibleLayers={visibleLayers}
+              onToggle={toggleLayer}
+            />
+          )}
+
+          <div className="flex-1 overflow-y-auto divide-y divide-stone-100">
+            {master ? (
+              <>
+                <TranscriptionPanel
+                  ocr={master.ocr}
+                  editorial={master.editorial}
+                  visible={visibleLayers.has('ocr_diplomatic')}
+                />
+                <TranslationPanel
+                  translation={master.translation}
+                  editorial={master.editorial}
+                  visible={visibleLayers.has('translation_fr')}
+                />
+                <CommentaryPanel
+                  commentary={master.commentary}
+                  editorial={master.editorial}
+                  visiblePublic={visibleLayers.has('public_commentary')}
+                  visibleScholarly={visibleLayers.has('scholarly_commentary')}
+                />
+              </>
+            ) : (
+              <div className="p-4 text-sm text-stone-400 italic">
+                {imageUrl
+                  ? 'Cette page n'a pas encore été analysée par l'IA.'
+                  : 'Aucune image associée à cette page.'}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api/v1': {
+        target: 'http://localhost:7860',
+        changeOrigin: true,
+      },
+    },
+  },
+})

infra/Dockerfile

@@ -1,4 +1,5 @@
-# Scriptorium AI — image de production
+# Scriptorium AI — image de production (multi-stage)
+# Ce fichier est la copie exacte de Dockerfile (racine).
 # Build depuis la racine du dépôt :
 #   docker build -f infra/Dockerfile -t scriptorium-ai .
 #
@@ -6,16 +7,27 @@
 #   /app/backend/app/   ← source Python (importable via PYTHONPATH)
 #   /app/profiles/      ← profils JSON
 #   /app/prompts/       ← templates de prompts
+#   /app/static/        ← frontend React buildé
 #   /app/data/          ← créé vide ; à monter en volume pour les artefacts
 
+# ── Stage 1 : build du frontend React ────────────────────────────────────────
+FROM node:20-slim AS frontend-builder
+
+WORKDIR /frontend
+
+# Installer les dépendances (cache layer séparé)
+COPY frontend/package.json ./
+RUN npm install
+
+# Copier les sources et builder
+COPY frontend/ ./
+RUN npm run build
+
+# ── Stage 2 : image Python finale ────────────────────────────────────────────
 FROM python:3.11-slim
 
 WORKDIR /app
 
-# ── Dépendances système (lxml utilise des wheels binaires pré-compilés ;
-#    aucun outil de build requis sur cette image) ─────────────────────────────
-# Aucun paquet système supplémentaire nécessaire.
-
 # ── Dépendances Python ─────────────────────────────────────────────────────
 # On copie uniquement pyproject.toml pour exploiter le cache de layers Docker.
 # Un stub app/__init__.py satisfait setuptools (discover packages) sans avoir
@@ -26,12 +38,14 @@ RUN mkdir -p /tmp/build/app \
     && pip install --no-cache-dir /tmp/build/ \
     && rm -rf /tmp/build
 
-# ── Code source ────────────────────────────────────────────────────────────
-# Copié APRÈS l'installation des dépendances pour conserver le cache.
+# ── Code source backend ────────────────────────────────────────────────────
 COPY backend/app ./backend/app
 COPY profiles/ ./profiles/
 COPY prompts/ ./prompts/
 
+# ── Frontend buildé ────────────────────────────────────────────────────────
+COPY --from=frontend-builder /frontend/dist ./static
+
 # ── Répertoire des artefacts (vide dans l'image ; monté en volume) ─────────
 RUN mkdir -p /app/data