ThothII/docs/reports/2026-09-12-ui-visual-review-delivery.md

Revisione grafica: consegna su worktree e Docker

Stato: pubblicata per revisione visiva, non integrata in main.

Aggiornamento 2026-09-13: i sette commit di questa revisione sono ora integrati con full/embedded e i18n nel ramo codex/prototype-administration-pages, su richiesta del proprietario. Per lo stato corrente e il rollback usare il rapporto di integrazione. Il seguito conserva la cronologia della consegna isolata originale.

Dove provarla

• Docker locale: http://127.0.0.1:8080/.
• 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.

Follow-up: marchio applicativo (2026-09-13)

Su richiesta dell'utente, ripristinato ThothII a 48 px nel Core e ingrandito a 32 px nella sidebar destra. Manrope semibold e suffisso II rosso restano coerenti con Impeccable; il marchio è un'eccezione esplicita alla scala dei titoli ordinari in DESIGN.md. Nessuna modifica funzionale. Build e 7 scenari Playwright superati, con controlli delle dimensioni del marchio alle cinque larghezze. Pubblicato nuovamente il solo frontend Docker usando il medesimo tag di revisione; immagine di ripristino invariata, nessun merge. La nuova immagine sostituisce quella identificata nella prima consegna sotto: sha256:f576ee4882456b4d2d338dbb2228d301f9ffd8d0c7de541842c767bbe8d02dad.

Follow-up: indicatori del catalogo (2026-09-13)

Spostati i pallini dopo le etichette Catalog, Operations e Metadata updated, mantenendo il rientro del testo e l'allineamento con i valori sottostanti. Spaziatura uniforme e centratura verticale secondo Impeccable. I 7 scenari Playwright passano, inclusi nuovi controlli geometrici per tutte e tre le etichette alle cinque larghezze responsive. Il successivo aggiornamento del medesimo tag frontend include questa correzione; il digest del follow-up precedente identifica quindi una versione superata.

Follow-up: altezza del prompt Core (2026-09-13)

Riprodotto con Playwright il campo schiacciato: altezza inline 0 px, spazio utile 8 px, a fronte di 31 px necessari per la prima riga. L'autosizing misurava il Core ancora nascosto durante il caricamento del contesto e non reagiva alla successiva apertura. Il reset isolato dell'altezza ad auto riportava immediatamente il campo a 31 px.

Il composer ora evita misure nascoste, ricalcola al cambio di larghezza/visibilità e al caricamento dei font, conserva un minimo di 32 px e cresce fino a 160 px con scroll. Il focus usa il contorno esterno esistente, senza il secondo bordo interno. Nessuna modifica all'invio o al workflow. Passati 9 scenari Playwright e 17 test Vitest mirati; coperti ingresso dal Core e dall'Admin, Shift+Enter, testo lungo, mobile, navigazione con bozza conservata e svuotamento. Build Docker frontend aggiornata; branch di revisione isolato, immagine di ripristino invariata.

Follow-up: griglia di allineamento del catalogo (2026-09-13)

Catalog condivide il margine di Catalog summary; sui layout ampi Metadata updated condivide l'asse di Description coverage e Operations occupa il punto medio fra i due. Usati margini condivisi e gli stessi cinque riferimenti di colonna dei KPI, senza offset assoluti. Sulle larghezze ridotte gli stati continuano a disporsi senza sovrapposizioni. Passati 9 scenari Playwright, con assert geometrici sugli allineamenti richiesti. Pubblicazione limitata al frontend Docker del worktree di revisione, nessun merge.

Follow-up: margini esterni e assi interni (2026-09-13)

La verifica geometrica iniziale rilevava 20 px di differenza fra il bordo sinistro del riepilogo e quello della tabella. In accordo con Impeccable, introdotti due token: margine esterno condiviso di 20 px e padding interno di 16 px. Catalog summary, navigazione Databases e tabella hanno bordi sinistro/destro coincidenti; riepilogo, Tables, Databases e Workspace databases condividono l'asse testuale a 36 px. Header, toolbar azioni e stati seguono lo stesso asse. Conservato l'allineamento Metadata updated/Description coverage e Operations al punto medio sui layout ampi. Passati 9 scenari Playwright con assert geometrici a 390, 649, 768, 1280 e 1600 px. Nessuna modifica funzionale; aggiornamento Docker limitato al frontend di revisione.

Follow-up: pannello del contesto globale (2026-09-13)

Il pannello espanso Workspace/Model ora usa gli stessi token di margine esterno (20 px) e padding interno (16 px) del catalogo, con superficie rientrata e controlli sull'asse testuale a 36 px. Allineamento curato con Impeccable e verificato alle cinque larghezze. Rimosse la frase sulle ultime scelte e le indicazioni di provenienza sotto i selettori (Installation default / Last choice). Logica di selezione, persistenza, default, blocchi operativi e messaggi di errore invariati. Passati 9 scenari Playwright con controlli sul pannello aperto, sui margini e sull'assenza delle diciture rimosse.

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:

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:

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:

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.