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

<!-- /autoplan restore point: /home/claude/.gstack/projects/romfast-rar-autopass/feat-5.18-corpus-knn-exemple-etichetate-autoplan-restore-20260629-070833.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 REVIEW APPENDIX ================= -->
# /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) — LIVRAT 2026-06-29 (toate verzi, 1392 teste)
- [x] **T-1 (INALTA) — `_submissions.html`** — refactor rand 4→2 linii cu placuta+codRAR+operatie+data_prestatie+pill; fallback placuta; clase pastrate. Teste rescrise: test_rand_slim_vin_operatie_pill, test_submissions_coloane_umane, test_placuta_pe_rand_identificator_primar (fost test_vin_pe_rand_separat_sub_nr), test_placuta_lipsa_nu_genereaza_rand_gol (fallback "fara numar").
- [x] **T-2 (INALTA) — `base.html` (CSS pill) + `_submissions.html`** — pill slim restilat (fill tint + dot 7px + text colorat per `stare_css` via currentColor), scopat `.lista-trimiteri-slim .pill`; ramane pe finalizat.
- [x] **T-3 (INALTA) — `base.html`** — bug 4a: `.tabel-trimiteri .col-stare` 104px→140px. nowrap pe col-vehicul neatins.
- [x] **T-4 (MEDIE) — `_preview_import.html` + `_preview_rand.html`** — reducere la 5 coloane (Stare/Vehicul/Operatie/Data/Actiuni); scoase col-id, col-km, col-note; motivul mutat in `title` pe pill, KM in modal.
- [x] **T-5 (MEDIE) — `_coada.html`** — titlu vizibil "Trimiterile tale" → `<h2 class="sr-only">` (a11y pastrat); badge "de rezolvat" + export CSV intr-un rand discret. `.sr-only` adaugat in base.html.
- [x] **T-6 (MEDIE) — `_status.html`** — linia plan in corp DOAR pe avertizare (`plan_warn`/`plan_limita_atinsa`); consum normal in badge antet + burger. Teste status mutate pe pagina completa.
- [x] **T-7 (MEDIE) — `_chips_prestatii.html`** — guard `{% if _extra_chips %}` pe containerul `.chips`, chenarul gol eliminat.
- [x] **T-8 (MICA) — `_submissions.html` / base.html** — `font-size:10px`→`var(--fs-xs)` (eticheta-problema, prin clasa scopata `.lista-trimiteri-slim .eticheta-problema`).
- [x] **T-9 (MICA) — `_form_editare.html` + base.html** — "Anuleaza"→"Renunta" (default); `.op-row-name` emfatic (bold, `--fs-sm`).
- [ ] **Defer — tracked in `TODOS.md`** (la cererea userului 2026-06-29): stare eroare HTMX lista (D-4); retokenizare px completa; diacritice in textul vizibil.
- [x] **Defer — inchis ca acceptabil** (netrackuit): teste regresie vizuala (tooling viitor); dropzone zona-mare (sec.5, raportul il marcheaza acceptabil).

### 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.