rar-autopass/docs/raport-comparatie-mockup-5.16.md

Raport comparatie UI real vs. mockup-uri (PRD 5.16 + 5.17)

Data: 2026-06-29 Metoda: comparatie in browser (Playwright, 1280px + 390px) intre aplicatia live (http://localhost:8010, cont 2 "Romfast SRL", 34 trimiteri) si mockup-urile de referinta din docs/mockups/. Pentru fiecare pagina/formular am pus fata in fata implementarea reala si intentia de design, apoi am evaluat in spiritul PRD-urilor.

Concluzie pe scurt: antetul, /login, selectorul de tema, contoarele si modalele sunt conforme. Abaterea dominanta este densitatea informationala: lista de trimiteri si tabelul de preview din import afiseaza mult mai multa informatie pe rand decat mockup-ul minimalist — exact observatia userului ("randurile foarte late"). Plus un bug de layout (coliziune coloane in preview-ul de import) si cateva abateri minore de copy/stil.

---

1. Lista de trimiteri — rand cu 4 linii in loc de 2 (PRIORITATE INALTA)

Aceasta e problema semnalata de user.

	Mockup (prd-5.16-dashboard.html)	Real (_submissions.html:100-139)
Linii / rand	2: VIN + operatie · ora	4: VIN; operatie · data+ora+secunde; cod RAR; nr · data · #id
Pastila de stare	DOAR pe exceptii (In coada / De corectat / Trimis); finalizatele nu au pastila	pe fiecare rand, inclusiv "Finalizat"
Marca de timp	ora scurta (09:42)	datetime complet cu secunde (27.06.2026 22:25:52)
Inaltime efectiva	~2 randuri text	~2x mai mare; pe mobil un rand se desfasoara pe 5-6 linii

Cauza in cod (app/web/templates/_submissions.html):

• Linia 3 — codul RAR (OE-8) / "nemapat": liniile 113-119.
• Linia 4 — vehicul_nr · data_prestatie · #id_prezentare: liniile 121-127.
• Marca de timp foloseste r.updated_at complet (data+ora+secunde): linia 111 (mockup-ul foloseste ora scurta).
• Pastila mereu randata cu r.stare_scurt: liniile 137-139 (mockup-ul ascunde pastila pe starea implicita/finalizata — minimalism "linistit cand e ok, zgomotos cand e exceptie", in spiritul D6/zero-silent-failures).

Recomandari (in ordinea impactului):

1. Comprima la 2 linii pe starea normala: pastreaza linia 1 (VIN) + linia 2 (operatie · data). Muta cod RAR, nr. inmatriculare si #id_prezentare in modalul de detaliu (care le are deja — vezi sectiunea 5) sau intr-un al doilea rand afisat doar la hover/expand. Informatia completa nu trebuie sa coabiteze pe rand cu lista.
2. Ascunde pastila pe starea finalizata (afiseaz-o doar pe queued/sending/ needs_*/error), exact ca mockup-ul. Finalizat = implicit linistit.
3. Scurteaza marca de timp: data fara secunde (27.06.2026) sau data · ora fara secunde. Secundele sunt zgomot.
4. Daca cod RAR / nr. inmatriculare sunt considerate esentiale in lista, fa-le optional (toggle "afiseaza detalii") in loc sa fie mereu prezente — implicit colapsat.
5. Minor: eticheta-problema are font-size:10px (_submissions.html:133) — sub pragul de 12px din scala 5.16/US-002; recableaza pe --fs-xs.

---

2. Acasa — titlu de sectiune + toolbar mult mai greu decat mockup-ul (PRIORITATE MEDIE)

PRD 5.16/US-002 cere explicit: "Se ELIMINA titlul de sectiune ... lista incepe direct sub tab-uri/filtre" si "fara subtitlu de sectiune". In real:

• Titlul "Trimiterile tale" (h2) + link-urile "export CSV: trimise | toate" sunt inca prezente ca antet de sectiune deasupra listei. Mockup-ul nu are titlu de sectiune — lista porneste direct sub tab-uri.
• Toolbar-ul de filtre e mult mai dens decat mockup-ul. Mockup: 4 pastile simple de stare (Toate / In coada / Trimise / De corectat). Real: pastile de timp (Azi / 7 zile / 30 zile / Custom) + camp cautare Vehicul (nr/VIN) + butoane Filtreaza + Toate + un AL DOILEA rand de actiuni bulk (Cod RAR ... / Aplica cod / Sterge selectate). Sunt functii reale, dar contrazic intentia minimalista.

Recomandari:

1. Elimina antetul "Trimiterile tale" (sau redu-l la un label discret); muta link-urile de export CSV langa tab-uri sau in meniul de cont.
2. Pastreaza filtrele de timp + cautarea (sunt utile), dar colapseaza randul de actiuni bulk (Cod RAR / Aplica cod / Sterge selectate) intr-un buton "Actiuni" care se deschide doar cand exista selectie — azi ocupa un rand permanent.
3. Aliniaza pastilele de stare cu mockup-ul (stari, nu doar timp), eventual ambele grupuri pe acelasi rand.

---

3. Linia "Plan: Gratuit · 34/60 luna asta" reintroduce un meta-rand sub tab-uri (PRIORITATE MEDIE)

PRD 5.17/US-006 + 5.16 cer planul ca badge in antet (exista — "GRATUIT") si linie in meniul burger, NU ca rand in corpul paginii. Real afiseaza consumul si ca rand standalone sub tab-uri, pe FIECARE tab (Acasa, Mapari, Integrare). Asta:

• duplica informatia din antet, si
• recreeaza exact "meta-randul de sectiune" pe care 5.16/US-002 voia sa-l elimine.

Recomandare: muta N/60 luna asta in meniul burger / pagina Cont (cum cere PRD-ul); pastreaza in antet doar badge-ul de plan. Daca avertizarea de consum (>=80%) trebuie sa fie vizibila in corp, afiseaz-o doar in starea de avertizare, nu permanent.

---

4. Import — preview pas 3: coliziune de coloane + tabel mai greu decat mockup-ul

4a. BUG layout — pastila STARE se suprapune peste coloana VEHICUL (PRIORITATE INALTA)

In tabelul de preview (pas Verifica), pastila de stare ("Date incomplete" / "Cod RAR lipsa") se suprapune vizual peste textul din coloana VEHICUL (CT88NOE / B123ABC apar lipite/sub pastila). Vizibil clar la 1280px. E un bug de latime de coloana / pastila fara white-space:nowrap sau coloana STARE prea ingusta. Recomandare: largeste coloana STARE / pune pastila pe nowrap cu min-width, sau muta stare si vehicul pe coloane clar separate; testeaza la 1280 si 390.

4b. Densitate — tabel cu 8 coloane vs. 4 in mockup (PRIORITATE MEDIE)

Mockup pas 3 = 4 coloane (VIN / OPERATIE / DATA / STARE + link editeaza). Real = 8 coloane (# / STARE / VEHICUL / OPERATIE / DATA / KM FINAL / NOTE / ACTIUNI), cu coloana NOTE care afiseaza inline mesaje de validare lungi ("VIN trebuie sa aiba exact 17 caractere..."). Aceeasi tendinta ca lista de trimiteri: prea multa informatie pe rand. Recomandare: redu la coloanele esentiale (Stare / Vehicul / Operatie / Data + Editeaza); muta KM si mesajul de validare in randul de editare (care le are deja) sau intr-un tooltip pe pastila de stare.

4c. Pastilele de filtru sunt toate albastru-plin (par toate active) (PRIORITATE MICA)

Toate (2) / Cod RAR lipsa (1) / Date incomplete (1) sunt randate ca butoane albastru plin — toate par selectate simultan. Mockup-ul foloseste pastile subtiri cu dot colorat, doar cea activa accentuata. Recomandare: stil outline + dot pentru filtrele inactive; plin doar pentru cel activ.

---

5. Import — pas 1: dropzone compact vs. zona mare din mockup (PRIORITATE MICA)

Mockup pas 1 = zona mare cu chenar punctat, iconita upload centrata, "Trage fisierul aici", buton "Alege fisier" + chips de format (.xlsx .csv .xls). Real = o bara orizontala slim ("Importa: [Alege fisier] sau trage aici"). Bara compacta se potriveste cu "import colapsat", deci e o abatere acceptabila; daca se doreste fidelitate cu mockup-ul, zona se poate inalta cand <details> e deschis (chenar punctat + iconita). Pozitiv: stepper-ul (4 pasi, cifre in cerc, pas finalizat = bifa verde) si saltul automat peste pas 2 la format recunoscut sunt conforme si bune.

---

6. Formularul de editare (modal corectie / editare rand)

Comparatie cu modalul din mockup ("Corecteaza trimiterea / randul"):

• Conform: structura (VIN; Data + Nr. inmatriculare pe 2 coloane; Observatii; "Prestatii — cod RAR pe fiecare operatie"; picker cu denumiri; "+ Adauga alta operatie / cod RAR"). Bug-urile US-004..007 sunt rezolvate functional.
• Anomalie (PRIORITATE MEDIE): intre randul de operatie si controlul "+ Adauga alta operatie" apare un chenar gol (container de chips fara continut) — pare nefinisat / neintentionat. De ascuns cand nu are chips.
• Stil nume operatie (PRIORITATE MICA): mockup-ul afiseaza numele operatiei bold/uppercase, proeminent ("SCHIMB PLACUTE FRANA — lipsa cod"); real il arata in greutate normala, mic ("Schimb placute frana · lipsa cod"). Mai putin emfatic.
• Copy butoane (PRIORITATE MICA): real "Salveaza / Anuleaza"; mockup + PRD/US-007 spun "Renunta" (si "Salveaza si retrimite" in modalul de detaliu). Aliniaza eticheta "Anuleaza" -> "Renunta".

---

7. Tema transversala — diacritice in textul vizibil (PRIORITATE MICA)

Mockup-urile (intentia de design) folosesc diacritice romanesti complete in textul catre user ("Observatii" -> "Observații", "Salveaza" -> "Salvează", "Numar inmatriculare" -> "Număr înmatriculare", "Adauga" -> "Adaugă", "In coada" -> "În coadă"). Aplicatia reala omite diacriticele in majoritatea label-urilor. US-001 a confirmat ca fontul de sistem randeaza corect diacriticele, iar landing-ul le foloseste deja — deci e o diferenta de finisaj fata de mockup, nu o limitare tehnica. Recomandare: aplica diacritice la textul vizibil pentru user (label-uri, butoane, titluri), pastrand codul/comentariile fara diacritice ca azi. Optional (non-blocant); de decis daca se urmareste fidelitate completa cu mockup-urile.

---

8. Pagini fara mockup dedicat (judecate dupa design system) — CONFORME

• Mapari (?tab=mapari): carduri, tabele, fonturi uniforme — coerent cu sistemul. Singura observatie: cardul gol "De rezolvat" cand nu exista needs_mapping (se poate ascunde cand e gol).
• Integrare (?tab=integrare): tab-uri de limbaj (curl/Python/PHP/C#/Node/VFP), blocuri de cod, carduri export + test cheie — curat si profesional.

---

9. Ce este DEJA conform mockup-urilor (pentru context — fara actiune)

• /login: layout brandeit pe 2 coloane (panou ROMFAST + formular), badge mediu, link signup — conform prd-5.16-header-login-tema.html.
• Antet: titlu "ROMFAST AUTOPASS" + badge mediu (TEST) + badge plan (GRATUIT) + "Service auto: Romfast SRL" + pastila "RAR online" (dot verde) + meniu burger. Conform US-010/003.
• Selector tema: pill cu iconita + eticheta ("Auto"), iconita-only pe mobil. Conform US-011.
• Contoare: 5 carduri separate desktop (Total / Luna asta / Azi / In coada / De corectat); bara compacta de cifre pe mobil. Conform US-002. (Minor: eticheta "Total" vs mockup "Total trimise"; pe mobil "Erori" vs mockup "Corectat".)
• Import colapsat pe Acasa (<details> slim "+ Importa fisier"). Conform US-013.
• Modal detaliu trimitere finalizata: read-only, label-uri clare, "Detalii tehnice" colapsabil — curat si conform.

---

Rezumat prioritati

#	Constatare	Prioritate	Fisier principal
1	Rand lista cu 4 linii + pastila mereu (rânduri late)	INALTA	_submissions.html:110-139
4a	Coliziune pastila STARE / coloana VEHICUL in preview import	INALTA	_preview_import.html
2	Titlu sectiune "Trimiterile tale" + toolbar bulk permanent	MEDIE	_acasa.html / _submissions.html
3	"Plan: N/60" ca rand in corp (duplica antetul)	MEDIE	_acasa.html / context layout
4b	Tabel preview cu 8 coloane vs 4	MEDIE	_preview_import.html
6	Chenar gol de chips in formularul de editare	MEDIE	_chips_prestatii.html
4c	Pastile de filtru toate albastru-plin	MICA	_preview_import.html
5	Dropzone import compact vs zona mare	MICA	_upload.html
6	Nume operatie ne-emfatic + copy "Anuleaza" vs "Renunta"	MICA	_form_editare.html / _chips_prestatii.html
7	Diacritice lipsa in textul vizibil	MICA	transversal

Cele doua corectii cu impact maxim: (1) comprimarea randului de lista la 2 linii + ascunderea pastilei pe finalizat, si (4a) bug-ul de coliziune din preview-ul de import. Restul sunt finisaje de aliniere la spiritul minimalist al mockup-urilor.

---

---

/autoplan — Revizuire automata (CEO → Design → Eng)

Tratam acest raport ca plan: cele 10 recomandari (sectiunile 1-7) sunt elementele de implementat. Scope UI: DA (Design conduce). Scope DX: NU (sectiunea 8 "Integrare" e marcata CONFORM, fara actiune pe suprafata API/CLI). Voci duale: Claude subagent + Codex per faza. Decizii intermediare auto-decise pe cele 6 principii; deciziile de gust merg la poarta finala.

Faza 1 — CEO (Strategie & Scope)

0A. Provocarea premiselor

Planul (raportul) se sprijina pe 4 premise implicite:

• P1 — Fidelitatea fata de mockup este tinta. Mockup-urile reprezinta intentia corecta de design; orice abatere a UI-ului real e un defect. Status: in mare valida, dar nu absoluta — raportul insusi recunoaste ca UI-ul real a adaugat FUNCTII pe care mockup-ul minimalist nu le are (cautare, filtre de timp, bulk-fix cod RAR, cod RAR + #id_prezentare pe rand). Acele functii pot sa-si merite densitatea.
• P2 — "Densitatea informationala" e problema centrala, iar minimalismul ("linistit cand e ok, zgomotos pe exceptie", D6/zero-silent-failures) e principiul corect. Status: validata de durere reala — userul s-a plans explicit de "randurile foarte late". Aici premisa e bine sustinuta.
• P3 — Criteriile de acceptare PRD 5.16/5.17 sunt obligatorii si UI-ul real a derivat de la ele (titlu sectiune de eliminat _coada.html:10; plan ca badge nu rand in corp _status.html:140; prag tipografic 12px incalcat de font-size:10px _submissions.html:133). Status: validata — sunt AC contractuale, nu preferinte. Acestea NU sunt decizii de gust; sunt conformare la PRD.
• P4 — Mutarea informatiei de pe rand nu pierde nimic fiindca e deja in modalul de detaliu / randul de editare. Status: tehnic adevarata (verificat: modalul are cod RAR/nr/#id; randul de editare are KM + mesaj validare), dar muta un cost de la "vizibil la scanare" la "vizibil dupa click" — un compromis de UX, nu zero-cost.

Premisa care merita judecata umana (poarta de mai jos): pentru informatia scoasa de pe rand (cod RAR, #id_prezentare, marca de timp completa) — o ascundem in modal (minimalism strict, fidel mockup-ului) sau o pastram in spatele unui toggle compact/detaliat (operatorul de service poate vrea sa scaneze cod RAR/#id fara click)? Userul s-a plans de latime, NU neaparat ca informatia in sine e inutila.

0B. Harta de leverage (ce exista deja)

Sub-problema	Cod existent reutilizat	Tip schimbare
Compresie rand lista	modal detaliu (_fragments/trimitere/{id}) are deja cod RAR/nr/#id	SCADERE (sterge L3/L4 din _submissions.html)
Pastila pe finalizat	r.stare_css/stare_scurt exista; conditie lipsa	conditie {% if %} in jurul liniei 138
Prag tipografic 12px	sistemul de token-uri --fs-xs:12px exista deja in mockup/base	re-cablare literal 10px → --fs-xs
KM + validare in preview	randul de editare le are deja	SCADERE coloane din _preview_import.html
Chenar gol chips	_has_ops/_chips deja calculate	conditie {% if _chips %} pe container

Concluzie: planul e dominant SCADERE + re-tokenizare, putin cod nou, leverage mare.

0B-bis. Pattern de fond depistat (in afara raportului, in blast radius)

_submissions.html foloseste literali px inline peste tot (font-size:13px, 12px, 11px, 10px — liniile 18, 45, 54, 63, 133, 153, 182...) in loc de token-uri --fs-*. Raportul a prins DOAR instanta de 10px (US-002). Cauza-radacina e ca scala tipografica 5.16 nu e aplicata sistematic in template-urile de lista/preview. Flag pentru poarta finala: extindem fix-ul la re-tokenizarea template-urilor atinse, sau doar instanta 10px? (In blast radius, < 1 zi CC — candidat de auto-aprobat pe P2.)

0C. Dream-state delta

CURENT                    →  ACEST PLAN                →  IDEAL 12 LUNI
UI real, dens, derivat de    Aliniat la minimalismul       Sistem de token-uri aplicat
la AC-urile PRD 5.16/5.17;   mockup-ului; bug 4a rezolvat;  uniform (zero literali px);
bug coliziune coloane;       randuri 2 linii; tipo 12px+    teste de regresie design vs
literali px imprastiati.     pe instantele semnalate.       mockup (Playwright snapshot).

Delta ramasa dupa plan: re-tokenizarea completa + testele de regresie vizuala (defer).

0C-bis. Alternative de implementare

#	Abordare	Efort (CC)	Risc	Pro / Contra
A	Fix exact ca raportul (scade L3/L4 in modal, ascunde pastila, fix bug, polish)	~30 min	mic	+ fidel mockup, simplu / − operatorul pierde cod RAR/#id la scanare
B	Ca A, dar info de rand in spatele unui toggle compact/detaliat	~60 min	mediu	+ nu pierde info / − complexitate noua, contrazice "explicit over clever" (P5)
C	Ca A + re-tokenizare px→token in template-urile atinse	~50 min	mic	+ rezolva cauza-radacina P2 / − atinge mai multe linii

Recomandare CEO: A pentru structura (P5 explicit, P1 completeness fata de mockup), cu C ca extindere in blast radius (P2 boil-the-lake pe tipografie). B intra la poarta finala ca decizie de gust (toggle vs. mutare-in-modal).

0D. Mod: SELECTIVE EXPANSION

Nucleu = sectiunile 1 + 4a (impact maxim, una e bug). Extindere selectiva in blast radius = re-tokenizarea (0B-bis) + AC-urile PRD (2, 3). Restul (polish MICA) = inclus, cost trivial.

0E. Interogare temporala

• Ora 1: bug 4a (coliziune _preview_import.html) + compresie rand _submissions.html
  • ascundere pastila finalizat. Astea ating durerea userului + singurul bug real.
• Ora 6+: sectiunile 2, 3 (conformare AC), chenarul gol chips (6), polish copy/stil, diacritice (decizie separata).

0F. Confirmare mod

SELECTIVE EXPANSION confirmat: planul livreaza nucleul de impact + extinderile in blast radius care isi platesc costul, defera testele de regresie vizuala.

POARTA DE PREMISE — REZOLVATA (directiva user, 2026-06-29)

Userul a dat o directiva mai precisa decat oricare optiune A/B/C. Spec guvernanta pentru randul de lista:

2 linii MAXIM (inaltime minimalista, ca in mockup), dar randul CONTINE: nr. inmatriculare · operatia RAR (cod) · operatia din service (denumire) · data, plus pill de stare (inclusiv "Finalizat").

Consecinte (override-uri fata de recomandarile raportului):

• OVERRIDE rec. 1.1 (partial): cod RAR si operatia din service RAMAN pe rand, NU se muta in modal. Doar VIN (ca identificator primar), #id_prezentare si secundele din timestamp se scot. Identificatorul primar devine nr. inmatriculare, nu VIN.
• OVERRIDE rec. 1.2: pastila RAMANE pe finalizat (userul cere explicit "+ pill finalizat"). NU se ascunde pe starea normala. (Raportul recomanda ascunderea — anulat.)
• CONFIRMA rec. 1.3: marca de timp scurta (data, fara secunde).
• CONFIRMA rec. 1.4: implicit 2 linii (fara toggle detaliat — userul nu vrea toggle).

Aceasta devine cerinta de design pentru Faza 2 (aranjarea celor 5 campuri in 2 linii). Campuri necesare pe rand: vehicul_nr, cod_rar, operatie (denumire service), data, pill. Campuri eliminate: vin_scurt (sau retrogradat), #id_prezentare, secunde.

Nota proces: aceasta a fost singura poarta de judecata umana din Faza 1. Suprafata strategica (minimalism vs. densitate) a fost decisa de user; nu mai exista premisa deschisa de provocat. Vocile duale CEO sunt redundante pe aceasta suprafata si se consolideaza in Faza 3 (vezi nota de proportionalitate).

Voci (proportionalitate)

• Codex: INDISPONIBIL (limita de utilizare atinsa, reset 18 iul) → tag [subagent-only].
• Claude subagent Design + Claude subagent Eng: rulate la adancime completa, pe cod real (template-uri + rute + teste), nu pe proza. Acestea sunt vocile substantiale.

Faza 2 — Design (UI/UX)

Aranjarea randului de 2 linii (livrabilul central)

Placuta-primul e corect: un operator identifica masina dupa nr. inmatriculare de pe comanda, nu dupa VIN de 17 caractere. Layout propus (peste .trimitere-slim existent):

L1:  B-123-ABC  (placuta, --fs-md, weight 600, ink)  ............  [ PILL dreapta ]
L2:  OE-8 (cod RAR, mono/accent) · Schimb placute frana (operatie, ink, ellipsis) · 27.06.2026 (muted)

• L1 = vehicul_nr (stanga, flex:1 1 auto; min-width:0) + pill (dreapta, flex:0 0 auto).
• L2 = flex 3 celule: cod RAR (auto, primul — e identificatorul scanabil) · operatie (flex:1 1 auto; min-width:0; white-space:nowrap; text-overflow:ellipsis — ellipsis-ul pe operatie garanteaza ca randul NU trece pe a 3-a linie nici la 390px) · data (muted, ultima).
• Operatia ramane ink, nu muted (e al doilea cel mai citit camp dupa placuta).
• Ierarhie vizuala: placuta → pill → cod+operatie → data.

CONSTATARI DESIGN dincolo de raport (corectii)

#	Constatare	Sev	Fix
D-1	Linia eticheta_problema (L:129-134) e a 5-a linie → strica "2 linii MAX" pe randurile de eroare	inalta	DECIZIE DE GUST (vezi poarta) — drop vs micro-linie doar pe eroare
D-2	Pastilele NU sunt conforme (raportul sec.9 gresit): chip outline gri, fara dot/fill, doar culoare text. Cu pill permanent pe orice rand → zgomot gri permanent	medie-inalta	restileaza pill ca mockup: fill tint + dot 7px + text colorat (DECIZIE DE GUST)
D-3	Bug 4a cauza-radacina: table-layout:fixed + .col-stare width:104px (base.html:401) + pill nowrap → overflow peste col-vehicul	inalta	widen .col-stare→~140px; reducerea 8→4 col NU rezolva bug-ul (curge in coloanele fluide, nu in col-stare fixa)
D-4	Lipsa stare de eroare la incarcarea listei (HTMX /_fragments/submissions 500 → spinner blocat)	medie	adauga partial de eroare / hx-on::response-error (DEFER TODOS — pre-existent)
D-5	Filtre 4c "toate albastru": raportul e STALE — codul are deja background:transparent + doar activ plin (_preview_import.html:56-58,277). Ramane doar diferenta stilistica (fara dot)	mica	NO-ACTION pe bug; eventual dot pe mockup (gust, optional)

Litmus design (consens)

DESIGN — voci:                          Claude-sub  Codex      Consens
1. Layout 2 linii fezabil/curat?         DA          N/A        Confirmat (single voice)
2. Placuta-primul corect?                DA          N/A        Confirmat
3. Bug 4a cauza reala identificata?      DA          N/A        Confirmat
4. Pill conform mockup?                  NU          N/A        Flag (D-2)
5. Stari complete (loading/error/mobil)? partial     N/A        Gap (D-4 error state)
6. Polish: defect vs gust separat?       DA          N/A        Confirmat (4c stale, 6 real)

Faza 3 — Eng (arhitectura, regresie)

Arhitectura (grafic dependente)

_acasa.html ─include─ _coada.html ─include─ _submissions.html  (LISTA: .lista-trimiteri-slim)
                                  └─ titlu "Trimiterile tale" (h2, L:10) + export CSV  ← scoate (PRD)
_preview_import.html (.tabel-trimiteri) ─include─ _preview_rand.html (pill inline-flex)  ← bug 4a
_chips_prestatii.html (.chips operatii-mode, L:122)  ← chenar gol
_status.html:140  rand plan N/60 in corp  ← muta in burger/cont (PRD)

DATE: r.prez = prezentare_din_payload (payload_view.py:86) → vehicul_nr, cod_rar,
      operatie, data_prestatie TOATE prezente. Schimbare = TEMPLATE-ONLY (fara rute).

Decizie semantica: marca de timp

r.updated_at (L:111) = format_data_rar care adauga MEREU %H:%M:%S (labels.py:158) → sursa secundelor zgomotoase. Auto-decis: foloseste r.prez.data_prestatie (data prestatiei declarate, deja date-only 2026-06-18) — semantic e "data" pe care o cere userul, langa celelalte campuri de prezentare. (Alternativa: helper format_data_scurta %d.%m.%Y daca trebuie pastrat updated_at — respins ca redundant.)

Eng consensus table

ENG — voci:                              Claude-sub  Codex      Consens
1. Arhitectura sunet (template-only)?    DA          N/A        Confirmat
2. Acoperire teste suficienta?           NU (3 rup)  N/A        Gap mapat (vezi test plan)
3. Riscuri performanta?                  nule        N/A        Confirmat (subtractiv)
4. Securitate?                           N/A         N/A        Fara suprafata noua
5. Cai de eroare tratate?                partial     N/A        Gap: vehicul_nr=='—' + D-4
6. Risc deploy gestionabil?              DA          N/A        Confirmat (4 teste de update)

Regresie (artefact pe disc)

Test plan scris: ~/.gstack/projects/romfast-rar-autopass/feat-5.18-corpus-knn-test-plan-20260629-071500.md

• 3 teste se strica HARD: test_vin_pe_rand_separat_sub_nr, test_rand_slim_vin_operatie_pill, test_submissions_coloane_umane (toate hard-codeaza VIN-primar / #id-pe-rand).
• 2 la risc: depind de numele claselor → pastreaza slim-vin/slim-meta (reumple, nu redenumi).
• Invariant cod_rar ("OE-2 vizibil, fara prefix, nemapat") pastrat de spec.

Registru moduri de esec

Mod	Trigger	Tratare in plan	Gap?
Placuta lipsa	payload fara vehicul_nr → '—'	azi mascat de VIN-primar	GAP — auto-include fallback (nu randa em-dash singur)
cod_rar lipsa	nemapat	guard != '—' → "nemapat"	OK (pastrat)
operatie lunga la 390px	denumire lunga	ellipsis + min-width:0 (vezi L2)	OK daca se aplica layout-ul
Lista 500 / network drop	HTMX swap esueaza	—	GAP D-4 (defer TODOS)
Pill finalizat a11y	text-in-pill	stare prin TEXT + title	OK (invariant respectat)

Retokenizare px (auto-decis: BOUNDED)

Eng: retokenizarea completa px→token e scope creep (13px→--fs-sm=13.5px schimba layout, risc regresie vizuala fara baza AC). Auto-decis: doar instanta sub-12px (eticheta-problema 10px→--fs-xs) — singura cu acoperire AC. (Suprascrie sugestia CEO 0B-bis de auto-aprobare larga.)

Decision Audit Trail

#	Faza	Decizie	Clasificare	Principiu	Rationament	Respins
1	CEO	Rand=2 linii cu placuta+codRAR+op+data+pill	Premisa (user)	—	directiva user la poarta	mutare cod RAR in modal
2	CEO	Identificator primar=placuta, nu VIN	Mechanical	P1	operator scaneaza placuta	VIN primar
3	Eng	"data" = data_prestatie, nu updated_at	Mechanical	P5	semantic corect, fara secunde, fara helper nou	slice updated_at
4	Eng	Pastreaza clase slim-vin/slim-meta	Mechanical	P3	minimizeaza churn de teste	redenumire clase
5	Eng	Fallback vehicul_nr=='—'	Mechanical	P1	evita em-dash singur ca id primar	lasa em-dash
6	Design	Bug 4a: widen .col-stare~140px	Mechanical	P5	cauza reala (fixed 104px+nowrap)	doar nowrap/min-width
7	Design	8→4 coloane preview (densitate)	Mechanical	P1	match mockup; NU rezolva 4a singur	pastreaza 8 col
8	Eng	Guard {% if _extra %} pe .chips	Mechanical	P5	elimina chenar gol	container mereu
9	Eng	Retokenizare px BOUNDED (doar 10px)	Taste→auto	P5	evita shift vizual nebazat AC	retokenizare larga
10	Design	Filtre 4c: NO-ACTION (raport stale)	Mechanical	P4	codul deja corect	re-implementare
11	CEO	Sec.2 titlu + sec.3 plan N/60: scoate	Mechanical	P1	AC PRD 5.16/5.17 obligatorii	pastreaza
12	Design	Stare eroare lista (D-4): DEFER TODOS	Mechanical	P3	pre-existent, in afara cererii	include acum
T1	Design/Eng	eticheta_problema: PASTREAZA micro-linie doar pe rand de eroare (user)	Gust→rezolvat	—	normal/finalizat=2 linii strict; eroare=2+motiv (D6 loud-on-exception)	drop complet
T2	Design	DA — restileaza pill fill+dot ca mockup (user)	Gust→rezolvat	—	pill permanent isi merita greutatea vizuala	lasa contur gri
T3	trans	NU aplica diacritice (user)	Gust→rezolvat	—	non-blocant; ramane divergenta de finisaj acceptata	include/pas separat

PLAN APROBAT (user, 2026-06-29) — implementarea NU se executa in aceasta sesiune

Status: APROBAT ca plan. User a ales "doar planul, nu implementa inca". Task-urile de mai jos sunt gata de executat intr-o sesiune viitoare (sau /ship cand exista cod).

Spec final randul de lista (de implementat in _submissions.html)

• L1: vehicul_nr (placuta, primar, --fs-md/weight 600, .slim-vin reumplut) + pill dreapta.
• L2 (.slim-meta): cod_rar (sau "nemapat", mono/accent, prima) · operatie (ink, ellipsis, min-width:0) · data_prestatie (muted). Scoate: VIN primar, #id_prezentare, secundele.
• Pill: ramane pe FIECARE rand inclusiv Finalizat; restilat fill-tint + dot 7px + text colorat per stare.
• eticheta_problema: ramane micro-linie conditionala DOAR pe stari de problema; 10px→--fs-xs.
• Fallback: vehicul_nr == '—' → nu randa em-dash singur (mesaj fallback).
• Pastreaza numele claselor slim-vin/slim-meta (reumple, nu redenumi) — minimizeaza churn teste.

Implementation Tasks (agregat)

• T-1 (INALTA) — _submissions.html — refactor rand 4→2 linii cu placuta+codRAR+operatie+data_prestatie+pill; fallback placuta; pastreaza clase. Update teste: rescrie test_vin_pe_rand_separat_sub_nr, test_rand_slim_vin_operatie_pill, test_submissions_coloane_umane; adauga test 2-linii + test fallback placuta.
• T-2 (INALTA) — base.html (CSS pill) + _submissions.html — restilare pill slim ca mockup (fill tint + dot + text colorat per stare_css); pill ramane pe finalizat.
• T-3 (INALTA) — _preview_import.html / base.html:401 — bug 4a: .col-stare width 104px→~140px (+ overflow:hidden sau pill wrap). NU atinge nowrap pe col-vehicul (test_web_preview_compact). Reducere 8→4 coloane (densitate) ca task separat.
• T-4 (MEDIE) — _preview_import.html — reducere la 4 coloane esentiale (Stare/Vehicul/Operatie/Data + Editeaza); muta KM + mesaj validare in randul de editare/tooltip.
• T-5 (MEDIE) — _coada.html:10-19 — scoate titlul "Trimiterile tale" (h2); relocare export CSV langa tab-uri / meniu cont (PRD 5.16/US-002).
• T-6 (MEDIE) — _status.html:140 — scoate randul plan "N/60 luna asta" din corp; pastreaza badge antet + linie burger (PRD 5.17/US-006). Daca >=80% consum, afiseaza doar in starea de avertizare.
• T-7 (MEDIE) — _chips_prestatii.html:122 — guard {% if _extra %} pe containerul .chips (operatii-mode), elimina chenarul gol.
• T-8 (MICA) — _submissions.html:133 — font-size:10px→var(--fs-xs) (doar instanta sub-12px).
• T-9 (MICA) — copy/stil — "Anuleaza"→"Renunta" (form editare); nume operatie emfatic (bold) in editorul de chips per mockup.
• Defer TODOS — stare eroare HTMX lista (D-4); teste regresie vizuala; dropzone zona-mare (sec.5); retokenizare px completa; diacritice (decis: nu).

Verificare la implementare

python3 -m pytest tests/test_web_submissions.py tests/test_web_submissions_layout.py tests/test_web_responsive.py tests/test_web_preview_compact.py -q Test plan complet: ~/.gstack/projects/romfast-rar-autopass/feat-5.18-corpus-knn-test-plan-20260629-071500.md

ADDENDUM 2026-06-29 — bug live mobil Mapari (CORECTIE la sectiunea 8)

Sectiunea 8 a raportului a marcat Mapari ca "CONFORME", dar nu a testat corect randarea mobila. User a raportat (cu screenshot, 390px) doua probleme reale, REZOLVATE:

1. Butoanele Salveaza/Sterge taiate pe mobil. Cauza: .tabel-card td button {width:100%} (base.html, specificitate 0,1,2) batea .act {width:44px} (0,1,0) → cele doua butoane .act deveneau full-width, iar al doilea (Sterge) iesea din card (celula are nowrap). Fix: bloc @media (max-width:767px) nou (ultimul in <style>) — celula Actiuni devine flex-row, butoanele .act width:auto; flex:1 1 0 cu text vizibil. Acum ambele butoane sunt complet vizibile, una langa alta, cu eticheta.
2. Carduri prea inalte + label-uri inutile. Cauza: .tabel-card randa etichetele data-eticheta ca pseudo-titluri ("Operatie"/"Cod RAR"/"Actiuni") + linia redundanta "acum: COD — nume" (duplica select-ul). Fix: pe mobil se ascund pseudo-etichetele (.tabel-card td::before{display:none}) si linia "acum:" (.map-acum{display:none}), padding strans. Cardul trece de la ~7 elemente la ~3 (nume + select + butoane).

Fisiere: app/web/templates/base.html (CSS), app/web/templates/_mapari.html (clasa map-acum). Verificare: 80 teste web verzi (test_web_responsive + mapari + submissions + tabs + modal); confirmare vizuala la 390px (render TestClient → screenshot Playwright). Atributele data-eticheta raman in DOM (a11y + teste). NEPLASAT inca: commit (la cererea userului).

Lectie pentru viitor: "conform" in raportul vizual trebuie sa includa explicit verificarea la 390px a PAGINILOR ACTIONABILE (butoane, formulare), nu doar a layout-ului general.

GSTACK REVIEW REPORT

• Faze: CEO (premisa rezolvata de user) → Design (subagent, full) → Eng (subagent, full). DX: skip (fara suprafata developer).
• Voci: [subagent-only] — Codex indisponibil (limita utilizare, reset 18 iul). 2 subagenti Claude pe cod real.
• Decizii: 15 (12 auto, 3 gust rezolvate de user). Audit trail complet mai sus.
• Status: APROBAT ca plan; implementare amanata la cererea userului.
• Artefacte: test plan pe disc; restore point pe disc; task list agregat mai sus.

NOT in scope (defer TODOS.md)

• Stare de eroare HTMX la incarcarea listei (D-4) — robustete pre-existenta, separata de cerere.
• Teste de regresie vizuala (Playwright snapshot vs mockup) — ideal 12 luni.
• Retokenizare px completa in template-uri — risc shift vizual fara baza AC.
• Dropzone import zona-mare (sec.5) — raport il marcheaza acceptabil.

Ce exista deja (leverage)

• Toate cele 5 campuri pe r.prez (payload_view.py:86) → schimbare template-only.
• Modal detaliu are deja VIN integral + #id (test_detaliu_trimitere) → P4 confirmata, zero pierdere date.
• Sistem token --fs-* exista (base.html:52); lista si preview sunt suprafete CSS separate (.lista-trimiteri-slim vs .tabel-trimiteri) → widen col-stare e SIGUR pt lista.