diff --git a/DESIGN.md b/DESIGN.md
index 60021b55..e9edf85c 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -11,50 +11,50 @@ colors:
warm-graphite: "oklch(26.78% 0.0097 355.6)"
muted-graphite: "oklch(51.33% 0.0088 345.6)"
quiet-border: "oklch(90.93% 0.0035 354.7)"
- success-mint: "oklch(75.77% 0.1581 165)"
+ success-mint: "oklch(46% 0.095 160)"
navigation-active: "oklch(92.5% 0.052 23.2)"
navigation-active-hover: "oklch(89.5% 0.071 23.2)"
navigation-active-foreground: "oklch(36.5% 0.11 23.2)"
navigation-active-border: "oklch(60% 0.135 23.2)"
- warning-amber: "oklch(85.23% 0.1386 78.9)"
- information-blue: "oklch(70.35% 0.1128 221.3)"
+ warning-amber: "oklch(48% 0.09 70)"
+ information-neutral: "oklch(51.33% 0.0088 345.6)"
typography:
display:
- fontFamily: "Fraunces, Source Serif Pro, Georgia, Times New Roman, serif"
- fontSize: "3rem"
+ fontFamily: "Manrope Variable, Manrope, system-ui, sans-serif"
+ fontSize: "1.5rem"
fontWeight: 600
lineHeight: 1.03
letterSpacing: "-0.025em"
headline:
- fontFamily: "Fraunces, Source Serif Pro, Georgia, Times New Roman, serif"
- fontSize: "1.875rem"
+ fontFamily: "Manrope Variable, Manrope, system-ui, sans-serif"
+ fontSize: "1.5rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.015em"
title:
- fontFamily: "Fraunces, Source Serif Pro, Georgia, Times New Roman, serif"
- fontSize: "1.2rem"
+ fontFamily: "Manrope Variable, Manrope, system-ui, sans-serif"
+ fontSize: "1.25rem"
fontWeight: 600
lineHeight: 1.25
letterSpacing: "-0.01em"
body:
- fontFamily: "Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, Arial, sans-serif"
- fontSize: "0.9375rem"
+ fontFamily: "Manrope Variable, Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, Arial, sans-serif"
+ fontSize: "1rem"
fontWeight: 400
lineHeight: 1.65
letterSpacing: "normal"
control:
- fontFamily: "Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, Arial, sans-serif"
+ fontFamily: "Manrope Variable, Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, Arial, sans-serif"
fontSize: "0.875rem"
fontWeight: 600
lineHeight: 1.25
letterSpacing: "0.005em"
label:
- fontFamily: "ui-monospace, SF Mono, Cascadia Code, Menlo, Consolas, monospace"
- fontSize: "0.6875rem"
+ fontFamily: "Manrope Variable, Manrope, system-ui, sans-serif"
+ fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1.25
- letterSpacing: "0.06em"
+ letterSpacing: "normal"
rounded:
xs: "4px"
sm: "6px"
@@ -113,6 +113,16 @@ components:
# Design System: ThothII
+## Visual review branch, September 2026
+
+The revision on `codex/ui-visual-review` is approved for implementation and Docker visual review,
+not yet for adoption on `main`. The previous look remains recoverable from the base commit and
+the preserved Docker image. Historical prototypes must remain untouched.
+
+This revision follows Impeccable's product register: one locally bundled Manrope family for the
+whole UI, five fixed size roles, red as the sole brand accent and additional color only for meaningful
+state. The primary scene remains an analyst reading data and SQL in a well-lit office.
+
## Overview
**Creative North Star: "The Clinical Workbench"**
@@ -134,7 +144,7 @@ disciplined and tactile, never playful, sluggish, or visually unstable.
**Key Characteristics:**
- Warm, restrained surfaces with one scarce red accent.
-- Editorial headings paired with highly legible operational body text.
+- One sans-serif family, with hierarchy expressed through size, weight and spacing.
- Dense information organized through hierarchy, rhythm, and progressive disclosure.
- Persisted artifacts and reviewer decisions presented as the visual source of truth.
- Fast state feedback with reduced-motion parity.
@@ -178,7 +188,8 @@ frontend uses OKLCH tokens directly.
foreground. It shares Instrument Red's hue but uses a lighter, lower-chroma fill, so location is
visible without carrying the full weight of a primary action.
- **Warning Amber** (`warning-amber`): waiting, attention, and in-progress states.
-- **Information Blue** (`information-blue`): informational state when red would imply action.
+- **Information**: neutral text and indicators for dates, protocols and ordinary status. The legacy
+ `--info` token resolves to muted foreground, not an additional blue accent.
The dark theme keeps the same semantic mapping with neutral near-black surfaces and a slightly
lighter red accent. Do not introduce a second visual identity for dark mode.
@@ -191,30 +202,29 @@ for their named states. Color is never the only state indicator.
## Typography
-**Display Font:** Fraunces, with Source Serif Pro, Georgia, and Times New Roman fallbacks
-**Body Font:** Manrope, with native system sans-serif fallbacks
-**Label/Mono Font:** SF Mono or Cascadia Code, with Menlo and Consolas fallbacks
+**UI Font:** locally bundled Manrope Variable, with Manrope and native sans-serif fallbacks.
+**Technical Font:** SF Mono or Cascadia Code, with Menlo and Consolas fallbacks.
-**Character:** Fraunces gives persisted artifacts and key headings editorial authority. Manrope
-keeps dense controls and prose calm and readable. The mono register separates machine identity,
-metadata, SQL, identifiers, and micro-labels from natural-language content.
+Manrope covers headings, labels, controls, navigation and document reading. Monospace is reserved
+for SQL, code, paths and machine identifiers, never for ordinary UI labels or status headings.
### Hierarchy
-- **Display** (600, `3rem`, `1.03`): authentication and exceptional page-level statements only.
-- **Headline** (600, `1.875rem`, `1.15`): major page or artifact titles.
-- **Title** (600, `1.2rem`, `1.25`): panel and document section hierarchy.
-- **Body** (400, `0.9375rem`, `1.65`): operational prose, with a target line length of 65 to 75
+- **Headline** (600, `1.5rem`, `1.3`): page or artifact titles, `--text-page`.
+- **Title** (600, `1.25rem`, `1.4`): section hierarchy, `--text-section`.
+- **Body** (400, `1rem`, `1.6`): operational prose, `--text-body`, with a target line length of 65 to 75
characters where the surface controls width.
-- **Control** (600, `0.875rem`, `1.25`): buttons, inputs, tabs, and compact actions.
-- **Label** (600, `0.6875rem`, `0.06em` tracking): uppercase micro-labels, state metadata, and panel
- headers. Labels use the mono family.
+- **Control** (400–600, `0.875rem`, `1.5`): buttons, inputs, tables, tabs and compact subheadings,
+ `--text-control`.
+- **Metadata** (400–600, `0.75rem`, `1.5`): secondary status, counts and timestamps, `--text-meta`.
+ Labels use sentence case and normal tracking. Ordinary operational text never falls below 12px.
Typography uses fixed sizes. Responsive changes happen at structural breakpoints, not through fluid
type scaling. Numeric data and identifiers use tabular numerals where comparison matters.
-**The Three Registers Rule.** Serif means authority, sans means interaction and reading, mono means
-machine identity. Do not exchange these roles for novelty.
+**The One Family Rule.** The UI and document readers use sans-serif throughout. The legacy
+`--font-heading` alias resolves to `--font-sans`. Preserve technical monospace without turning it
+into a second decorative hierarchy. Do not shrink text to solve layout constraints.
**The Read Once Rule.** A heading, label, and body must be distinguishable on first glance through
size and weight. Do not repeat headings in explanatory copy.
@@ -279,25 +289,26 @@ default, hover, focus, active, disabled, loading, and error behavior where those
- **Focus:** three-pixel Instrument Red ring with a clear border shift.
- **Error / Disabled:** errors combine destructive color with explanatory text; disabled controls
retain readable contrast and use 50 percent opacity.
-- **Metadata catalog model:** Database Management keeps one compact, installation-level
- metadata-generation LLM selector in the application header. The selection persists across
- database, table, column, and relationship views; when no usable profile is configured, the
- disabled control explains: “No metadata-generation LLM model is configured for this installation.”
+- **Global context:** the collapsible top shelf is the sole workspace/model selector for Core and
+ Admin. Preserve independent remembered choices, installation defaults, operation locks and unsaved
+ edit guards. Never introduce a separate metadata-generation default or selector.
### Navigation
- **Style:** compact session rows use `8px` corners and restrained vertical padding.
- **Default / Hover / Active:** porcelain at rest, Sunken Surface on hover, and a muted Navigation
Active red with a defined border when current. Exactly one top-level navigation control is current.
-- **Administrative controls:** the admin-only Administration accordion groups Database management,
- Memory management, Evidence management, a structural divider, Workspace management, and Pi
- management in that order. Its trigger exposes
+- **Administrative controls:** the admin-only Administration accordion groups Database,
+ Memory, Evidence, a structural divider, Workspace, and Pi configuration in that order. Its trigger exposes
expanded state and starts collapsed by default, while non-admin users do not receive the accordion
or its navigation actions.
- **Responsive:** collapse navigation structurally at the application breakpoint. Do not shrink
labels into illegibility. Below 768px, Memory and Evidence management use the full content
width; a Navigation button opens the shared accessible dialog. Selecting another archive
- page or pressing Escape closes it. Desktop retains the session sidebar.
+ page or pressing Escape closes it. Desktop retains the right session sidebar and its My sessions /
+ All sessions tabs. Core retains question/answer, eight phases, reviewer gates and the left log.
+ The portal owns the red header and left sidebar; ThothII must not duplicate them. Size to the
+ actual application container. Narrow session document panels may use the available width.
### Tabs
diff --git a/PROJECT_STATE.md b/PROJECT_STATE.md
index be947785..fb502369 100644
--- a/PROJECT_STATE.md
+++ b/PROJECT_STATE.md
@@ -14,13 +14,35 @@ requirements as mandatory; do not replace the running server stack in place.
## Current product shape
+### Isolated visual review, awaiting owner acceptance
+
+The UI revision is isolated in `/Users/mp/projects/ThothII-visual-review`, branch
+`codex/ui-visual-review`, based on `2d1b714e`. The original checkout and its prototypes
+remain intact. No merge to `main` has been performed.
+
+Local Docker at `http://127.0.0.1:8080/` now runs the frontend image
+`thothii-frontend:visual-review-20260912`. Only frontend was recreated; Core and all
+data services/volumes/configurations are unchanged. The prior look is preserved as
+`thothii-frontend:before-visual-review-20260912`. All five running services are healthy.
+
+The revision uses bundled Manrope throughout, shared type roles, restrained semantic
+colors, clearer Admin copy and a readable compact session-document panel. Core and
+session behavior remain covered by the existing regression suite. Verification:
+679 frontend tests, 7 Playwright visual/interaction scenarios and a production build.
+See `docs/reports/2026-09-12-ui-visual-review-delivery.md` for scope, limits and the
+exact local rollback command. Visual approval is required before adoption on `main`.
+
Gitea #28–#31 follow-up is implemented in this checkout: Workspace's four tabs,
Database list-first entry without the preparation footer, full-height Pi instructions
with installation-host OS selection, and short Admin navigation labels. Core and
-session behavior are retained. These follow-up changes are **not yet rebuilt into
-local Docker**; see `docs/reports/2026-09-12-admin-issues-28-31.md` for test/review results.
-The host CLI must regenerate its Compose projection on the destination installation
-to identify the physical host OS correctly when the backend runs in Docker.
+session behavior are retained. At the owner's request, these changes were rebuilt into
+local Docker on 2026-09-12 at 18:31 UTC. Core/frontend are healthy and the UI at
+`http://127.0.0.1:8080` serves the updated bundle. The host projection now supplies
+`THT_HOST_PLATFORM=darwin`, so Pi selects macOS rather than the container's Linux OS.
+Persistent dependency containers and volumes were unchanged. Rollback images are tagged
+`thothii-core:before-admin-28-31-20260912` and
+`thothii-frontend:before-admin-28-31-20260912`. See
+`docs/reports/2026-09-12-admin-issues-28-31.md` for verification and deployment details.
The latest context-shelf A and five Administration pages are implemented locally.
At the owner's request, local Docker project `thothii-18998cca7b0a` was rebuilt and
diff --git a/deploy/compose.visual-review-rollback.yaml b/deploy/compose.visual-review-rollback.yaml
new file mode 100644
index 00000000..2b25659d
--- /dev/null
+++ b/deploy/compose.visual-review-rollback.yaml
@@ -0,0 +1,4 @@
+# The image is tagged from the running frontend before the visual review is published.
+services:
+ frontend:
+ image: thothii-frontend:before-visual-review-20260912
diff --git a/deploy/compose.visual-review.yaml b/deploy/compose.visual-review.yaml
new file mode 100644
index 00000000..abaa77f7
--- /dev/null
+++ b/deploy/compose.visual-review.yaml
@@ -0,0 +1,8 @@
+# Local-only review override. Apply after the existing local installation profiles.
+# Changes only the frontend image; Core, configuration and volumes remain unchanged.
+services:
+ frontend:
+ image: thothii-frontend:visual-review-20260912
+ build:
+ context: /Users/mp/projects/ThothII-visual-review
+ dockerfile: docker/frontend.Dockerfile
diff --git a/docs/reports/2026-09-12-admin-issues-28-31.md b/docs/reports/2026-09-12-admin-issues-28-31.md
index 36fd1128..80dcfa34 100644
--- a/docs/reports/2026-09-12-admin-issues-28-31.md
+++ b/docs/reports/2026-09-12-admin-issues-28-31.md
@@ -52,7 +52,7 @@ projecting the host platform, and shortening navigation labels.
initially exposed horizontal page overflow at 390 pixels; constrained grid children
and narrow definition lists corrected it. Database QA used an empty synthetic catalog;
the unit suites exercise populated tables, columns, edits and operation guards.
-- Docker and real-stack Playwright acceptance were not run for this follow-up.
+- Docker and real-stack Playwright acceptance were not run during initial implementation.
The preview is synthetic and read-only, not a deployment or provider smoke test.
## Standards
@@ -73,5 +73,24 @@ The independent follow-up review confirmed both findings resolved, with no new r
Review summary: Standards 2 findings resolved, 0 outstanding; Spec 2 findings resolved,
0 outstanding. Both reviews were read-only, relative to the user-approved baseline.
-Docker has not been rebuilt for this follow-up; the read-only QA preview uses the changed source.
+## Local Docker deployment
+
+At the owner's request, core and frontend were rebuilt from this checkout and recreated
+on 2026-09-12 at 18:31 UTC using `/private/tmp/thothii-memory-preview.sh`, with
+`--no-deps --force-recreate --wait`. Both are healthy. Database, Qdrant and embedding
+containers retained their original IDs; no persistent volumes were deleted or recreated.
+
+The normal model projection generator was run on this Mac before recreation; the running
+core now receives `THT_HOST_PLATFORM=darwin`. The authored installation configuration and
+credentials were unchanged. Before the update, images were retained as
+`thothii-core:before-admin-28-31-20260912` and
+`thothii-frontend:before-admin-28-31-20260912`; the prior projection directory was copied to
+`/private/tmp/thoth-admin-28-31-docker.5ebAo8/generated`.
+
+HTTP checks for the real UI (`http://127.0.0.1:8080/`), its `/api/health` proxy, and
+the core `/health` returned 200. Served bundle `/index-Bsz7otBx.js` contains Workspace
+areas and Pi configuration, and no longer contains the preparation footer or persisted
+Database child-screen key. Authenticated end-to-end operator workflows were not rerun.
+
+The Vite preview remains separate from Docker. Remote server deployment was not performed.
No Gitea issue state or remote branch was changed.
diff --git a/docs/reports/2026-09-12-ui-survey-and-graphic-revision-plan.md b/docs/reports/2026-09-12-ui-survey-and-graphic-revision-plan.md
new file mode 100644
index 00000000..a97826fa
--- /dev/null
+++ b/docs/reports/2026-09-12-ui-survey-and-graphic-revision-plan.md
@@ -0,0 +1,191 @@
+# ThothII: survey e piano di revisione grafica
+
+Data: 12 settembre 2026. Stato: **proposta, da approvare; nessuna modifica all'interfaccia**.
+
+## Sintesi e direzione consigliata
+
+L'incoerenza segnalata è confermata. Non dipende soltanto da dettagli sfuggiti nelle singole pagine: il design system attuale prescrive tre registri tipografici, ai quali alcuni componenti aggiungono un secondo stack serif. Titoli, etichette operative, documenti e istruzioni finiscono così per sembrare parti di prodotti diversi.
+
+Propongo una direzione unica: **interfaccia operativa interamente sans-serif, rosso istituzionale come accento, colori aggiuntivi soltanto quando comunicano uno stato, maggiore coerenza senza impoverire le informazioni**. Non serve una nuova impaginazione del Core né una nuova collocazione delle sessioni.
+
+Ho usato **Impeccable**, nel registro product, per orientare la valutazione di gerarchia, tipografia, densità, colore e microcopy. La varietà visiva dovrà venire da spaziatura, pesi e organizzazione, non dall'alternanza di famiglie tipografiche. Le grazie non sono intrinsecamente incompatibili con un prodotto tecnologico, ma qui contrastano con la direzione richiesta e non svolgono una funzione necessaria: le eliminerei dalla UI, compresi i lettori di documenti.
+
+## 1. Metodo, copertura e limiti
+
+Verifica tramite Playwright nel browser dell'app, con screenshot, navigazione e lettura degli stili CSS calcolati. La survey principale riguarda la **versione Docker reale su `http://127.0.0.1:8080/`**, autenticata con l'account autorizzato. Una precedente esplorazione dell'anteprima sintetica non è usata come prova dei dati o del funzionamento del Docker.
+
+| Area | Verifica sulla versione reale |
+| --- | --- |
+| Workspace | Preparation, Specific actions, About, Authentication |
+| Database | Elenco database, navigazione alle tabelle e alle colonne |
+| Memory | Elenco vuoto e apertura del form New card, chiuso senza modifiche |
+| Evidence | Fonti/importazione, elenco, dettaglio di un documento |
+| Pi | Runtime e Host maintenance, scheda macOS |
+| Core | Stato iniziale, compositore e controlli presenti senza avviare una domanda |
+| Sessioni | My sessions, All sessions, archivio e lettura di una sessione archiviata |
+| Navigazione | Drawer responsive, accessi Admin e contesto globale |
+
+Non ho salvato form, lanciato elaborazioni, ripreso sessioni, importato documenti o modificato configurazioni. Il controllo del Core attivo, delle fasi, dei gate e del log è limitato alla lettura del codice: non è stato eseguito un ciclo LLM per una survey grafica.
+
+Il viewport misurato nel pannello browser era **649 × 1091 CSS px**. Questo offre evidenza concreta del comportamento a larghezza ridotta, ma non sostituisce una matrice desktop/mobile. Tema scuro, contrasto numerico, navigazione completa da tastiera, zoom e integrazione effettiva in Omics Portal restano da verificare. Non è una certificazione WCAG né un audit automatizzato completo. Le famiglie riportate sono gli stack CSS calcolati, non una verifica del font effettivamente caricato dal sistema.
+
+## 2. Problemi riscontrati
+
+### Tipografia: quattro stack e gerarchie variabili
+
+| Esempio osservato | Trattamento attuale | Problema |
+| --- | --- | --- |
+| Titoli delle pagine Admin | Fraunces/serif, 30 px | Registro editoriale molto più marcato del resto dell'app |
+| Sources and imports; titolo del form Memory | Altro stack `ui-serif`, 18–20 px | Nemmeno i titoli serif usano tutti la stessa famiglia |
+| Evidence library; Original question; Revised question | Monospace, 11 px | Etichette ordinarie trattate come identificatori tecnici |
+| Working context | Monospace maiuscolo, 10 px | Informazione globale importante resa molto piccola |
+| Guida Pi Host maintenance | Testo 12 px, interlinea 16 px; titoletti serif 12 px | Istruzioni lunghe troppo dense e gerarchia debole |
+| Sessione archiviata | Titolo sessione serif 14 px; titolo nel documento serif 23,2 px | Il contenuto sovrasta il contesto del pannello |
+
+La causa è documentata in `DESIGN.md`, nella regola dei tre registri. Nel codice, `frontend/src/index.css` assegna globalmente il font heading a `h1`–`h6` e ai titoli della prosa; Memory ed Evidence aggiungono classi `font-serif`. Il problema ricompare quindi anche quando un componente non richiede esplicitamente un titolo decorativo.
+
+### Colore: troppi significati impliciti
+
+- In Database il tipo di connessione REST e la data di aggiornamento ricevono accenti blu pur essendo informazioni ordinarie.
+- La guida ordinaria di manutenzione Pi è racchiusa in una cornice ambra, visivamente simile a un avviso. Il colore non distingue un pericolo concreto.
+- Gli stati Ready in Pi usano anche testo verde molto chiaro: è un rischio di leggibilità da misurare, non una violazione numericamente accertata in questa survey.
+- Stato operativo, azione primaria, contenitore informativo e semplice categoria non seguono una grammatica cromatica sufficientemente riconoscibile.
+
+Non eliminerei invece indiscriminatamente verde e ambra: successo, errore, attesa di revisione e avvertimento devono restare distinguibili, sempre anche tramite testo o icona.
+
+### Spazio e linguaggio
+
+| Area | Evidenza | Intervento proposto |
+| --- | --- | --- |
+| Workspace | Identità e descrizioni ripetute fra contesto, selezione e intestazioni; molte gerarchie prima delle azioni | Mantenere le quattro schede, ridurre ripetizioni e uniformare sezioni e azioni |
+| Database | Intestazione, stato, cronologia, Fleet summary, breadcrumb e toolbar precedono i dati; a 649 px il riepilogo occupa più righe | Compattare il riepilogo, dare priorità alla griglia; sostituire il gergo Fleet con un nome corrispondente al suo ambito |
+| Memory | Stato vuoto formulato come assenza di risultati filtrati anche senza carte; ampie aree vuote e paginazione disabilitata | Distinguere libreria vuota da ricerca senza risultati; stesso linguaggio visivo di toolbar e form del resto dell'Admin |
+| Evidence | Percorso tecnico e istruzioni di importazione dominano la parte superiore; ricerca compressa rispetto agli altri filtri | Istruzioni brevi con dettagli espandibili; percorso secondario ma copiabile; filtri che si dispongono su più righe prima di diventare illeggibili |
+| Pi | Guida molto lunga e piccola; spiegazioni dell'architettura mescolate con istruzioni all'operatore | Separare stato, azioni e guida; rendere la guida leggibile e consultabile per attività |
+| Sessioni | Molti registri tipografici; a 649 px il pannello documenti è stretto e tronca il titolo | Coerenza dei titoli e dei documenti; adeguare il pannello alla larghezza disponibile senza cambiare la gestione delle sessioni |
+| Core e navigazione | Branding ripetuto, microetichette e controlli di taglie diverse | Riallineare la gerarchia e i componenti condivisi, conservando struttura e comportamento |
+
+Gli stili comunicativi oscillano fra introduzione promozionale nel Core, manuale tecnico in Pi/Evidence e terminologia da dashboard infrastrutturale in Database. La soluzione è un tono operativo unico, non la rimozione delle informazioni tecniche necessarie.
+
+## 3. Regole del sistema visivo proposto
+
+### Una famiglia UI, cinque ruoli dimensionali
+
+Consiglio di **mantenere Manrope**, già adottato per l'interazione, e usarlo per tutta la UI. Non aggiungerei una nuova famiglia per il solo gusto di cambiare. Pesi ordinari 400, 500 e 600; monospace soltanto per SQL, codice, percorsi e identificatori quando serve riconoscerli o copiarli.
+
+| Ruolo | Dimensione proposta | Uso |
+| --- | --- | --- |
+| Titolo pagina | 24 px / 1,5 rem, peso 600 | Core/Admin, senza effetto copertina |
+| Titolo sezione | 20 px / 1,25 rem, peso 600 | Sezioni principali e pannelli di lettura |
+| Lettura | 16 px / 1 rem, peso 400 | Risposte, documenti, istruzioni articolate; interlinea circa 1,5 |
+| Interazione e dati | 14 px / 0,875 rem, peso 400–600 | Form, tab, pulsanti, griglie; sottosezioni compatte in peso 600 |
+| Metadati secondari | 12 px / 0,75 rem, peso 400–500 | Timestamp, conteggi e indicazioni accessorie |
+
+Sono ruoli, non l'obbligo di rendere ogni titolo di sezione grande: una sottosezione compatta può usare il ruolo da 14 px in semibold. Niente ridimensionamento fluido che faccia oscillare continuamente i caratteri con la larghezza. Prima si riorganizza il layout, poi si valutano eccezioni documentate.
+
+Ulteriori regole:
+
+- Eliminare Fraunces e le classi serif dall'interfaccia e dalla resa dei documenti. Non riscrivere il contenuto dei documenti.
+- Usare etichette sans-serif in sentence case; limitare maiuscole e spaziatura espansa.
+- Nessun testo operativo ordinario sotto 12 px; non far stare più contenuto riducendolo a 8–11 px.
+- Numeri tabulari nelle colonne numeriche; testo libero proporzionale; codice monospace leggibile.
+- Distribuire il font con l'app, evitando che Google Fonts sia necessario alla coerenza della UI in un ambiente intranet. Verificare fallback e caricamento, senza presumere che oggi il font remoto non funzioni.
+
+### Palette: neutri e rosso, con eccezioni semantiche
+
+| Ruolo | Regola |
+| --- | --- |
+| Superfici | Bianco e pochi grigi neutri, bordi leggeri; niente colorazione per ogni sezione |
+| Testo | Grafite per testo principale, grigio leggibile per secondario |
+| Rosso istituzionale | Azione primaria, selezione e focus; tonalità coerente con il tema Omics, da verificare nell'integrazione |
+| Successo | Indicatore verde sobrio con testo sufficientemente scuro; non interi paragrafi verde pallido |
+| Avvertimento/attesa umana | Ambra soltanto quando occorre attenzione, con motivazione esplicita |
+| Errore/distruzione | Trattamento distinto tramite icona, etichetta e conferma dove prevista; non affidarsi al solo rosso condiviso con il brand |
+| Informazioni ordinarie | Neutre: timestamp, protocollo, conteggi, guide e configurazione non sono automaticamente stati colorati |
+
+SQL, grafici e visualizzazioni possono mantenere colori utili alla comprensione dei dati. Questa revisione non impone un monocromo indiscriminato. Gli stati del workflow conserveranno il loro significato; ogni modifica cromatica dovrà avere una mappatura esplicita.
+
+### Componenti e testi condivisi
+
+- Un'unica famiglia di intestazioni Admin, toolbar, tab, campi, pulsanti, badge e messaggi.
+- Scala di spaziatura comune basata su multipli di 4 px, con distinzione chiara fra spazio dentro un gruppo e spazio fra gruppi.
+- Una primaria per il compito locale; azioni secondarie neutre, pericolose riconoscibili senza rendere tutto rosso.
+- Tab allo stesso livello con lo stesso trattamento. Le schede OS di una guida possono essere più compatte, ma non appartenere a un altro sistema grafico.
+- Istruzione essenziale accanto all'azione; procedure e dettagli di implementazione in una sezione di aiuto espandibile.
+- Testi UI in inglese; documenti e dati conservano la propria lingua. I titoli italiani di Evidence e sessioni non sono un errore di uniformità.
+
+Esempi di microcopy da affinare nell'implementazione:
+
+| Attuale | Proposta |
+| --- | --- |
+| Fleet summary | Catalog summary, se confermato l'ambito del riepilogo |
+| No cards match these filters… in una libreria vuota | No memory cards yet. Create a card to add reusable knowledge. |
+| Session models in Pi | Available models, con indicazione dell'effettiva idoneità Core/Admin |
+| Spiegazione che la pagina “never creates a second model default” | Installation default, con breve indicazione di dove modificarlo e dettagli tecnici separati |
+
+Il pulsante che prova il default d'installazione deve continuare a dichiarare **quale modello testa**: non va confuso con il modello selezionato nel contesto globale. Anche la distinzione fra importazione, revisione e consolidamento Evidence deve rimanere esplicita.
+
+## 4. Vincoli funzionali e integrazione
+
+La revisione deve conservare:
+
+1. Core originale: domanda/risposta, otto fasi in alto, gate di revisione, log sul lato sinistro e controlli esistenti.
+2. Sessioni nella navigazione destra con **My sessions / All sessions**, archivio e azioni attuali. Nessuna sezione sostitutiva in fondo alla pagina.
+3. Contesto globale A espandibile in alto: workspace e modello unici per tutta l'app; scelte ricordate indipendentemente e default esistenti.
+4. Blocco delle attività senza contesto valido e del cambio contesto durante un'elaborazione; protezione delle modifiche Admin non salvate.
+5. Cinque pagine Admin, preprocessing in Workspace Preparation e gestione database/tabelle/campi/relazioni in Database.
+6. Unificazione già realizzata della configurazione LLM, senza introdurre selettori o default alternativi.
+7. Prototipi precedenti conservati e recuperabili.
+
+**Omics Portal possiede header rosso e sidebar sinistra.** ThothII non deve duplicarli. Le regole globali attuali su `:root`, `body` e titoli richiedono una verifica di isolamento: se l'integrazione avviene nello stesso DOM, gli stili vanno circoscritti alla radice ThothII; se avviene in iframe, vanno verificati dimensionamento, tema e scrolling. È un rischio di integrazione da verificare, non una sovrapposizione già osservata sul portale.
+
+A larghezze ridotte pannelli e filtri devono adattarsi alla larghezza del contenitore reale, non soltanto della finestra. Nel lettore della sessione il testo non dovrebbe restare confinato in una colonna di circa 195 px come nello screenshot a 649 px: prevedere un pannello più ampio o sovrapposto nella modalità compatta, mantenendo accessi e funzione originali.
+
+## 5. Sequenza di lavoro proposta
+
+### Fase 1: regole e campione rappresentativo
+
+Dopo approvazione, aggiornare `DESIGN.md` eliminando la regola dei tre registri e allineando gli eventuali riferimenti superati ai modelli e alla navigazione. Definire token tipografici, colori semantici e componenti comuni.
+
+Applicare un primo campione a **Workspace e Pi**: insieme verificano form, stato operativo, selezioni, istruzioni lunghe e codice. Mostrare il confronto prima/dopo mantenendo stessi contenuti e viewport. Non servono tre nuovi design alternativi: serve validare un sistema coerente.
+
+### Fase 2: shell e tutte le pagine Admin
+
+Uniformare contesto globale, navigazione, titoli, tab e controlli; estendere il sistema a Database, Memory ed Evidence. Compattare riepiloghi e istruzioni senza eliminare funzionalità. Correggere stati vuoti, larghezze dei filtri e formattazione dei blocchi di codice nella guida Pi.
+
+### Fase 3: Core, documenti e sessioni
+
+Applicare gli stessi token a compositore, fasi, log, widget di revisione, documenti e navigazione sessioni. Nessuna nuova struttura del workflow. Controllare separatamente liste, documento aperto, sessione attiva e pannelli nella modalità compatta.
+
+### Fase 4: verifica e consegna
+
+Eseguire typecheck, test dei componenti interessati e regressione Playwright con dati di test, senza consumare chiamate LLM reali soltanto per verificare gli stili. Includere prove di flusso per navigazione con modifiche non salvate e blocco del contesto durante un'operazione.
+
+Preparare screenshot comparabili e verifiche a 390, 649, 768, 1280 e 1600 px, oltre alla larghezza effettiva assegnata da Omics con sidebar presente. Verificare tema chiaro/scuro, zoom 200%, tastiera, focus, testo lungo, stato vuoto/errore/caricamento e griglie larghe. L'integrazione finale nel server resta una fase distinta, secondo le decisioni già prese.
+
+## 6. Criteri di accettazione
+
+- Una sola famiglia sans per la UI; monospace solo per contenuto tecnico. Nessuna classe serif residua nei componenti operativi o nei lettori.
+- Dimensioni e pesi derivati dai ruoli condivisi; ogni eccezione ha un motivo documentato.
+- Colori dei componenti da token semantici; nessun blu decorativo per date o protocolli e nessuna cornice di warning intorno a una guida ordinaria.
+- Contrasto del testo almeno 4,5:1, salvo le eccezioni previste per testo grande e altri casi specifici; non assumere che ogni semibold sia testo grande. Riferimento: [W3C, Contrast Minimum](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).
+- Contrasto almeno 3:1 per informazioni visive necessarie a identificare controlli e stati, nei casi applicabili; non è un obbligo per ogni bordo decorativo. Riferimento: [W3C, Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html).
+- Stato e azione distinguibili anche senza colore; focus visibile e controlli utilizzabili da tastiera.
+- Nessuna sovrapposizione o scroll orizzontale dell'intera pagina ai viewport concordati; scroll locale consentito per tabelle e codice quando necessario.
+- Nessuna regressione funzionale di Core, sessioni, Admin, selezione globale o salvataggio; test dei flussi critici invariati o rafforzati.
+- Nessuna modifica del contenuto scientifico, dei default LLM, delle autorizzazioni o delle procedure di manutenzione mascherata da intervento grafico.
+
+## 7. Punti principali del codice interessati in una futura implementazione
+
+- `DESIGN.md`: regole tipografiche e cromatiche.
+- `frontend/index.html`: caricamento delle famiglie di caratteri.
+- `frontend/src/index.css`: token, titoli globali, etichette e prosa.
+- `frontend/src/shell/WorkingContextShelf.css`: contesto globale e microtipografia.
+- `frontend/src/shell/administration/AdministrationPage.css`: intestazioni comuni.
+- `frontend/src/shell/WorkspaceManager.css`: gerarchie e densità Workspace.
+- `frontend/src/shell/database-management/FleetLedgerShell.css`: riepiloghi, toolbar e griglie.
+- Componenti Memory/Evidence: override serif di titoli e form.
+- Componenti Pi: guida, stati, tab OS e microcopy operativo.
+- Componenti Core/sessioni: fasi, lettura documenti, log, navigazione e pannelli responsive.
+
+**Decisione richiesta:** approvare questa direzione visiva e il campione Workspace/Pi prima di estenderla. Questa survey non crea ticket, non aggiorna il design normativo e non ricostruisce Docker.
diff --git a/docs/reports/2026-09-12-ui-visual-review-delivery.md b/docs/reports/2026-09-12-ui-visual-review-delivery.md
new file mode 100644
index 00000000..f5fdc357
--- /dev/null
+++ b/docs/reports/2026-09-12-ui-visual-review-delivery.md
@@ -0,0 +1,109 @@
+# Revisione grafica: consegna su worktree e Docker
+
+Stato: **pubblicata per revisione visiva, non integrata in main**.
+
+## Dove provarla
+
+- Docker locale: .
+- Worktree: `/Users/mp/projects/ThothII-visual-review`.
+- Ramo: `codex/ui-visual-review`.
+- Base preservata: `2d1b714ebe31419d712e9c3324a5e171d5f0317d`.
+- Checkout originale: `/Users/mp/projects/ThothII`, ramo `codex/prototype-administration-pages`, lasciato intatto, incluse le note non ancora committate e i prototipi.
+
+Non è stato eseguito alcun merge, push o aggiornamento di Gitea. Questa consegna richiede la revisione ottica del proprietario prima dell'adozione.
+
+## Interventi
+
+Impeccable, registro product, ha guidato le scelte: Manrope sans-serif locale per tutta la UI; niente serif nei componenti o nei documenti; cinque ruoli tipografici condivisi; monospace conservato per contenuto tecnico. I font non dipendono più da Google Fonts.
+
+Le etichette ordinarie non usano più monospace maiuscolo. Le piccole dimensioni arbitrarie dei componenti sono state ricondotte a 12, 14 o 16 px. Titoli Admin a 24 px; intestazioni, controlli e prosa sono coerenti fra superfici.
+
+Il rosso resta l'accento principale. Date e protocolli sono neutri. Verde e ambra usano token semantici leggibili anche in tema scuro. La guida Pi non è più presentata come un grande avviso ambra. Il tema delle utility segue il tema dell'app/portale, non autonomamente quello del sistema operativo. Placeholder e focus sono più leggibili.
+
+Interventi specifici:
+
+- Workspace: tipografia e stati uniformati, mantenute quattro schede e preprocessing.
+- Database: riepilogo più compatto, Catalog summary al posto di Fleet summary, intestazioni delle griglie senza monospace maiuscolo, selezioni compatibili con il tema scuro.
+- Memory: titoli e form sans-serif; messaggio distinto per libreria vuota e nessun risultato filtrato; paginazione mostrata quando serve.
+- Evidence: istruzioni tecniche espandibili, percorso host sempre disponibile e copiabile nella relativa sezione, filtri responsive con ricerca di larghezza utile.
+- Pi: guida leggibile a 16 px, codice correttamente su più righe, tab OS coerenti, testo che distingue default d'installazione e modello selezionato, Available models.
+- Core/sessioni: uniformazione estetica senza modifiche al workflow; otto fasi, gate, log, input e gestione sessioni conservati. Nei layout compatti il lettore documenti usa lo spazio disponibile anziché una colonna illeggibile.
+
+Il modello globale, i default, le autorizzazioni e i blocchi di navigazione non sono stati ridisegnati. Non sono state eseguite elaborazioni LLM o mutate informazioni applicative per questa verifica.
+
+## Verifica
+
+| Verifica | Esito |
+| --- | --- |
+| Frontend, suite Vitest | 679 test passati |
+| TypeScript + build produzione | Passati |
+| Playwright dedicato | 7 scenari passati, nessun retry |
+| Larghezze | 390, 649, 768, 1280, 1600 CSS px |
+| Superfici Playwright | Cinque Admin, guida Pi, Core iniziale, My/All sessions e lettore archivio |
+| Interazioni | Tab OS da tastiera, modifica Memory trattenuta durante tentativo di navigazione, ritorno al Core dopo annullamento |
+| Tema | Chiaro indipendente dal tema OS; scuro tramite attributo del portale |
+| Spazio host | Simulazione di 240 px riservati al menu sinistro e 72 px all'header, con utility concorrente |
+| Docker reale | Accesso e navigazione fra le cinque pagine Admin; titolo sans-serif 24 px e nessun overflow dell'intera pagina nel viewport verificato |
+
+I test visuali usano fixture e intercettano tutte le richieste API prima che possano raggiungere un'installazione. Nessuna scrittura è ammessa: ogni scenario controlla che non ne siano state tentate. Gli screenshot sono negli output locali ignorati da Git, `frontend/test-results/visual-review/`.
+
+Comandi di verifica nel worktree:
+
+```sh
+cd /Users/mp/projects/ThothII-visual-review/frontend
+npm test -- --maxWorkers=2 --minWorkers=1
+npm run build
+npx playwright test --config playwright.visual.config.ts
+```
+
+Contrasti calcolati sulle coppie di token opachi di riferimento, non su ogni possibile composizione/hover:
+
+| Coppia | Chiaro | Scuro |
+| --- | --- | --- |
+| Testo principale / card | 15,16:1 | 13,61:1 |
+| Testo secondario / card | 5,67:1 | 8,40:1 |
+| Successo / card | 6,76:1 | 8,69:1 |
+| Avvertimento / card | 6,64:1 | 9,44:1 |
+| Bordo input / card | 3,36:1 | 4,56:1 |
+| Testo pulsante primario / riempimento | 5,03:1 | 6,83:1 |
+
+Limiti: non è una certificazione WCAG completa; non è stata eseguita una nuova sessione LLM sul Docker reale. La prova con geometria host non equivale all'integrazione nel vero Omics Portal. Lo zoom browser 200% e tutte le combinazioni di hover/trasparenza non sono stati verificati esaustivamente. I test funzionali già esistenti coprono fasi, sessioni e protezioni; le modifiche non cambiano la loro logica.
+
+## Docker e ripristino
+
+Progetto Compose: `thothii-18998cca7b0a`. È stato ricreato **solo frontend** con `--no-deps --no-build` dopo una build esplicita dal nuovo worktree.
+
+| Elemento | Valore verificato |
+| --- | --- |
+| Immagine nuova | `thothii-frontend:visual-review-20260912` |
+| Digest immagine nuova | `sha256:eeccb28f5c5cd78da08fd007e259e3fb88f26b4f1415a825a3b5829061f79ed3` |
+| Immagine precedente conservata | `thothii-frontend:before-visual-review-20260912` |
+| Digest precedente | `sha256:635f25477f11a476034052e87b2129ae26a9a049c4bedde0ada3a1d65e4ee924` |
+| Container frontend nuovo | `50dd012cd400`, healthy |
+| Core invariato | `0dcce917be0c`, healthy |
+| Catalog DB invariato | `89755e439dc7`, healthy |
+| Qdrant invariato | `52ebd5c47955`, healthy |
+| Embedding invariato | `7f690e534eda`, healthy |
+| Bundle servito | `/index-Cd-Ma0ye.js`, `/index-CptC2K6s.css` |
+
+Per tornare al look precedente, senza rebuild e senza modificare dati o Core:
+
+```sh
+bash /private/tmp/thothii-memory-preview.sh \
+ -f /Users/mp/projects/ThothII-visual-review/deploy/compose.visual-review-rollback.yaml \
+ up -d --no-deps --no-build frontend
+```
+
+Per ripubblicare il look di revisione già costruito:
+
+```sh
+bash /private/tmp/thothii-memory-preview.sh \
+ -f /Users/mp/projects/ThothII-visual-review/deploy/compose.visual-review.yaml \
+ up -d --no-deps --no-build frontend
+```
+
+Questi override sono deliberatamente locali e usano il launcher dell'installazione già presente; non vanno applicati sul server PSD. Il launcher in `/private/tmp` dipende dai profili locali esistenti: se rimosso, ricostruire l'invocazione dai profili dell'installazione, senza sostituire configurazioni o volumi. Le immagini di review e rollback restano taggate: non eseguire una pulizia delle immagini prima della decisione.
+
+## Decisione successiva
+
+Il proprietario valuta il look su Docker. Solo dopo approvazione si procederà con l'integrazione su `main`, verificando anche l'eventuale differenza fra `main` e il ramo di partenza. Un rifiuto della revisione richiede soltanto il ripristino frontend sopra indicato; codice e prototipi precedenti sono preservati.
diff --git a/frontend/e2e/ui-visual-review.spec.ts b/frontend/e2e/ui-visual-review.spec.ts
new file mode 100644
index 00000000..e3b805f5
--- /dev/null
+++ b/frontend/e2e/ui-visual-review.spec.ts
@@ -0,0 +1,187 @@
+import { expect, test, type Page } from "@playwright/test";
+import { canonicalWorkspaceFixture, workspaceRevisionFixture, workspaceSummaryFixture } from "../src/test/workspace-fixtures";
+
+// These tests never forward API requests to an installation or invoke a real model.
+const workspace = "visual-fixture";
+const title = "Clinical research workspace";
+const model = { provider: "test", id: "review-model", name: "Review model", reasoning: true };
+const revision = workspaceRevisionFixture(workspace);
+const evidence = {
+ id: "evidence:cohort", title: "Cohort definition", kind: "domain", language: "en",
+ purposes: ["sql_generation"], applies_to: { concepts: ["cohort"], tables: [], columns: [] },
+ payload: { rule: "# Approved cohort\n\nInclude eligible patients. Review the inclusion criteria before generating SQL." },
+ provenance: { source_file: "research-guide.md", supporting_excerpts: ["Eligibility is evaluated at admission."] },
+ review_items: [], file: "curated/domain/cohort.md", status: "active", revision: "1",
+};
+const evidencePage = {
+ items: [evidence], total: 1, page: 1, page_size: 25, errors: [], initialized: true,
+ active_revision: "1", pending_revision: null, source_reviews: [],
+ location: { repository: "/installation/workspaces", workspace: "/installation/workspaces/clinical-research",
+ runtime_workspace: "/data/workspaces/clinical-research", host: "installation", command: "tht workspace consolidate",
+ git_commands: ["git status", "git diff"] },
+};
+
+async function fixtures(page: Page) {
+ const writes: string[] = [];
+ await page.route("http://127.0.0.1:5183/api/**", async route => {
+ const path = new URL(route.request().url()).pathname.replace(/^\/api/, "");
+ if (route.request().method() !== "GET") {
+ writes.push(path);
+ return route.fulfill({ status: 503, json: { message: "Visual fixture: no writes" } });
+ }
+ let body: unknown;
+ if (path === "/auth/config") body = { mode: "mock", localLogin: false, oidcLogin: false };
+ else if (path === "/me") body = { issuer: "test", subject: "admin", displayName: "Review administrator", isAdmin: true,
+ roles: ["admin"], permissions: ["session.use", "session.read_all", "session.manage_all", "database.manage", "workspace.manage", "workspace.secrets.manage", "memory.manage", "evidence.manage", "pi.manage"], csrfToken: null, session: null };
+ else if (path === "/settings") body = { workspace, provider: model.provider, model: model.id, thinking: "high" };
+ else if (path === "/models") body = { models: [model] };
+ else if (path === "/workspaces") body = [workspaceSummaryFixture(workspace, { displayName: title })];
+ else if (path === `/workspaces/${workspace}`) body = { workspace: canonicalWorkspaceFixture(workspace), revision };
+ else if (path.endsWith("/runtime-configuration")) body = { workspaceId: workspace, revision, configurationState: "ready", requirements: [] };
+ else if (path.endsWith("/preprocessing")) body = { schemaVersion: 1, workspaceId: workspace, state: "ready", actionable: true, clearable: true,
+ detail: "Catalog revision 1 is indexed.", metadataRevision: 1, preprocessedMetadataRevision: 1 };
+ else if (path === "/workspace-registry/status") body = { branch: "main", ahead: 0, behind: 0, degraded: false };
+ else if (path.endsWith("/memory/pending")) body = [];
+ else if (path.endsWith("/memory")) body = { items: [], total: 0, page: 1, page_size: 25 };
+ else if (path.endsWith("/evidence")) body = evidencePage;
+ else if (path.includes("/evidence/")) body = { ...evidencePage, item: evidence };
+ else if (path === "/pi-management/status") body = { ready: true, credentials: "present", hostPlatform: "macos", version: "0.80.3",
+ config: { provider: model.provider, model: model.id, reasoning: "high" } };
+ else if (path === "/sessions") body = [{ id: "archived-fixture", status: "finalized", question: "How many eligible patients?", name: "Cohort review",
+ archived: true, active: false, workspace, created_at: "2026-09-01T12:00:00Z", updated_at: null, author: null, group: null, summary: null }];
+ else if (path.endsWith("/documents")) body = [{ key: "question", title: "Original question", phase: "F1", format: "markdown", content: "# Cohort review\n\nHow many eligible patients were admitted in 2025?" }];
+ else if (path === "/health/dwh") body = { ok: true, detail: "Available" };
+ else if (path === "/catalog/databases") body = [];
+ else if (path === "/catalog/metrics") body = { scope: "global", databaseId: null, tables: 0, columns: 0, sensitiveColumns: 0, relationships: 0,
+ descriptionTargets: 0, describedTargets: 0, descriptionCoverage: 0, updatedAt: null };
+ else if (path === "/catalog/metadata-generation/models") body = { models: [], default: null };
+ else if (path.endsWith("-runs")) body = [];
+ else return route.fulfill({ status: 404, json: { message: `Missing visual fixture: ${path}` } });
+ return route.fulfill({ json: body });
+ });
+ return writes;
+}
+
+async function navigation(page: Page) {
+ const trigger = page.getByRole("button", { name: "Navigation", exact: true });
+ if (await trigger.isVisible()) await trigger.click();
+}
+
+async function admin(page: Page, name: string) {
+ await navigation(page);
+ const toggle = page.getByRole("button", { name: "Administration", exact: true });
+ if (await toggle.getAttribute("aria-expanded") !== "true") await toggle.click();
+ await page.getByRole("button", { name, exact: true }).click();
+}
+
+async function inspect(page: Page) {
+ return page.evaluate(() => {
+ const visible = (e: Element) => {
+ const box = e.getBoundingClientRect();
+ return box.width > 0 && box.height > 0 && getComputedStyle(e).visibility !== "hidden" && !e.closest("[hidden]");
+ };
+ return {
+ overflow: document.documentElement.scrollWidth - innerWidth,
+ serif: [...document.querySelectorAll("h1,h2,h3,h4,button,label")].filter(visible)
+ .filter(e => /Fraunces|Georgia|Times|ui-serif/.test(getComputedStyle(e).fontFamily)).map(e => e.textContent?.slice(0,60)),
+ tiny: [...document.querySelectorAll("h1,h2,h3,h4,button,label,small")].filter(visible)
+ .filter(e => parseFloat(getComputedStyle(e).fontSize) < 12).map(e => e.textContent?.slice(0,60)),
+ };
+ });
+}
+
+for (const width of [390, 649, 768, 1280, 1600]) {
+ test(`all surfaces retain shared typography at ${width}px`, async ({ page }, testInfo) => {
+ await page.setViewportSize({ width, height: 1000 });
+ const writes = await fixtures(page);
+ await page.goto("/");
+ await expect(page.getByTestId("app-shell")).toBeVisible();
+ await expect(page.getByRole("button", { name: /Working context/ })).toContainText(title);
+ for (const name of ["Workspace", "Database", "Memory", "Evidence", "Pi configuration"]) {
+ await admin(page, name);
+ const heading = page.getByRole("heading", { name: `${name === "Pi configuration" ? "Pi" : name} management`, exact: true });
+ await expect(heading).toBeVisible();
+ await expect(heading).toHaveCSS("font-size", "24px");
+ expect(await inspect(page)).toEqual({ overflow: 0, serif: [], tiny: [] });
+ if (name === "Memory") await expect(page.getByText("No memory cards yet.", { exact: false })).toBeVisible();
+ if (name === "Evidence") {
+ const search = await page.getByRole("textbox", { name: "Search Evidence" }).boundingBox();
+ expect(search!.width).toBeGreaterThan(180);
+ }
+ await page.screenshot({ path: testInfo.outputPath(`${name.replaceAll(" ", "-")}.png`) });
+ }
+ await page.getByRole("button", { name: "Host maintenance", exact: true }).click();
+ await expect(page.getByRole("tab", { name: "macOS", exact: true })).toHaveAttribute("aria-selected", "true");
+ await expect(page.getByRole("region", { name: "Pi operator workflow" })).toHaveCSS("font-size", "16px");
+ await page.screenshot({ path: testInfo.outputPath("Pi-guide.png") });
+ await navigation(page);
+ await page.getByRole("tab", { name: "All sessions", exact: true }).click();
+ await page.getByRole("button", { name: /Archive \(1\)/ }).click();
+ await page.getByRole("button", { name: "Cohort review", exact: true }).click();
+ const documents = page.getByRole("complementary", { name: "Session summary" });
+ await expect(documents).toBeVisible();
+ await expect(documents.getByRole("heading", { name: "Original question" })).toBeVisible();
+ const bounds = await documents.boundingBox();
+ expect(bounds!.width).toBeGreaterThanOrEqual(Math.min(width, 300));
+ expect(await inspect(page)).toEqual({ overflow: 0, serif: [], tiny: [] });
+ await page.screenshot({ path: testInfo.outputPath("Sessions.png") });
+ await page.getByRole("button", { name: "Close panel", exact: true }).click();
+ await expect(page.getByRole("textbox", { name: "New question", exact: true })).toBeVisible();
+ await page.screenshot({ path: testInfo.outputPath("Core.png") });
+ expect(writes).toEqual([]);
+ });
+}
+
+test("theme follows the app, not an unrelated OS preference; keyboard tabs and dirty guard remain", async ({ page }, testInfo) => {
+ await page.setViewportSize({ width: 1280, height: 900 });
+ const writes = await fixtures(page);
+ await page.emulateMedia({ colorScheme: "dark" });
+ await page.goto("/");
+ await expect(page.getByTestId("app-shell")).toBeVisible();
+ await admin(page, "Pi configuration");
+ const testButton = page.getByRole("button", { name: "Test catalog default", exact: true });
+ await expect(testButton).toHaveCSS("background-color", "oklch(0.9985 0.0006 17.2)");
+ await page.evaluate(() => document.documentElement.setAttribute("data-bs-theme", "dark"));
+ await expect(page.locator(".thot-context-trigger")).toHaveCSS("color", "oklch(0.931 0 90)");
+ await expect(testButton).toHaveCSS("background-color", "oklch(0.62 0.008 23.2 / 0.3)");
+ await page.screenshot({ path: testInfo.outputPath("Pi-dark.png") });
+ const guideButton = page.getByRole("button", { name: "Host maintenance", exact: true });
+ await guideButton.click();
+ const mac = page.getByRole("tab", { name: "macOS", exact: true });
+ await mac.focus(); await page.keyboard.press("ArrowRight");
+ await expect(page.getByRole("tab", { name: "Windows", exact: true })).toBeFocused();
+ await expect(page.getByRole("tab", { name: "Windows", exact: true })).toHaveAttribute("aria-selected", "true");
+ await admin(page, "Memory");
+ await page.getByRole("button", { name: "New card", exact: true }).click();
+ await page.getByRole("textbox", { name: "Title", exact: true }).fill("Keep this draft");
+ await page.getByRole("button", { name: "Return to session", exact: true }).click();
+ await expect(page.getByRole("textbox", { name: "Title", exact: true })).toHaveValue("Keep this draft");
+ await page.screenshot({ path: testInfo.outputPath("Memory-dark-unsaved.png") });
+ await page.getByRole("button", { name: "Cancel", exact: true }).click();
+ await page.getByRole("button", { name: "Return to session", exact: true }).click();
+ await expect(page.getByRole("textbox", { name: "New question", exact: true })).toBeVisible();
+ expect(writes).toEqual([]);
+});
+
+test("host header and left rail leave the application a bounded working area", async ({ page }, testInfo) => {
+ await page.setViewportSize({ width: 1280, height: 1000 });
+ await fixtures(page);
+ await page.goto("/");
+ await expect(page.getByTestId("app-shell")).toBeVisible();
+ // Geometry fixture, not a replacement for acceptance inside the real Omics deployment.
+ await page.addStyleTag({ content: `
+ #root { margin-left: 240px; margin-top: 72px; --thoth-app-height: calc(100dvh - 72px); }
+ .px-4 { padding-left: 2.25rem !important; padding-right: 2.25rem !important; }
+ ` });
+ await admin(page, "Workspace");
+ const shell = await page.getByTestId("app-shell").boundingBox();
+ expect(shell!.x).toBe(240);
+ expect(shell!.x + shell!.width).toBeLessThanOrEqual(1280);
+ expect(shell!.y + shell!.height).toBeLessThanOrEqual(1000);
+ expect(await inspect(page)).toEqual({ overflow: 0, serif: [], tiny: [] });
+ await page.screenshot({ path: testInfo.outputPath("Host-bounded-Workspace.png") });
+ await admin(page, "Evidence");
+ const search = await page.getByRole("textbox", { name: "Search Evidence" }).boundingBox();
+ expect(search!.width).toBeGreaterThan(180);
+ expect(await inspect(page)).toEqual({ overflow: 0, serif: [], tiny: [] });
+});
diff --git a/frontend/index.html b/frontend/index.html
index 07fe9ee2..c753c8b9 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,12 +4,6 @@
ThothII
-
-
-
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 11350db1..8ca0603b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
"dependencies": {
"@base-ui/react": "^1.6.0",
"@fontsource-variable/geist": "^5.2.9",
+ "@fontsource-variable/manrope": "5.3.0",
"@tanstack/react-query": "^5.59.0",
"ag-grid-community": "^36.0.0",
"ag-grid-react": "^36.0.0",
@@ -1484,6 +1485,15 @@
"url": "https://github.com/sponsors/ayuhito"
}
},
+ "node_modules/@fontsource-variable/manrope": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/@fontsource-variable/manrope/-/manrope-5.3.0.tgz",
+ "integrity": "sha512-6D5dgokHsWDDMtmXHznKa0hK229NN+1a4BLPmUCLqcO1Pw5EEhWY5RFt0AcXnVRAljFFPfRtLkJePQj6LSsV6g==",
+ "license": "OFL-1.1",
+ "funding": {
+ "url": "https://github.com/sponsors/ayuhito"
+ }
+ },
"node_modules/@hono/node-server": {
"version": "1.19.17",
"resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.17.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 76e3c892..46f9c5b1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
"dependencies": {
"@base-ui/react": "^1.6.0",
"@fontsource-variable/geist": "^5.2.9",
+ "@fontsource-variable/manrope": "5.3.0",
"@tanstack/react-query": "^5.59.0",
"ag-grid-community": "^36.0.0",
"ag-grid-react": "^36.0.0",
diff --git a/frontend/playwright.visual.config.ts b/frontend/playwright.visual.config.ts
new file mode 100644
index 00000000..749d0083
--- /dev/null
+++ b/frontend/playwright.visual.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+ testDir: "./e2e",
+ testMatch: "ui-visual-review.spec.ts",
+ timeout: 45_000,
+ workers: 2,
+ outputDir: "test-results/visual-review",
+ use: { ...devices["Desktop Chrome"], baseURL: "http://127.0.0.1:5183", trace: "retain-on-failure" },
+ webServer: {
+ command: "npm run dev -- --host 127.0.0.1 --port 5183 --strictPort",
+ url: "http://127.0.0.1:5183",
+ reuseExistingServer: !process.env.CI,
+ env: { VITE_BACKEND_URL: "/api" },
+ },
+});
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
index bdc216cc..36544938 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -90,7 +90,7 @@ function DefaultFallback({
Details
-