5.12 (livrat): editare in modal a randurilor de preview, cont obligatoriu inainte de import, formular editare extras (_form_editare, _editare_preview_modal), plus suita de teste aferenta (preview edit/compact, mapare op, form editare, signup, admin panel). Design + planificare: - docs/design.md: sistem de design (tokeni, breakpoints, scara control, componente, a11y). - docs/prd/prd-5.12-* si prd-5.13-* (5.13 cu raport /autoplan: CEO+Design+Eng, audit trail). Curatare: sterse PNG-urile de test/mockup temporare din radacina. Nota: implementarea CSS 5.13 (responsive compact + sistem butoane) NU e inca facuta — planul revizuit cere refactorul testelor fragile din test_web_responsive.py INAINTE de CSS. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
335 lines
24 KiB
Markdown
335 lines
24 KiB
Markdown
<!-- /autoplan restore point: /home/claude/.gstack/projects/romfast-rar-autopass/feat-5.12-5.13-responsive-autoplan-restore-20260627-182914.md -->
|
||
# PRD 5.13 — Responsive compact (mobil/tableta) + sistem de butoane + design.md
|
||
|
||
**Stare**: DRAFT — pentru /autoplan (implementarea NU e facuta inca)
|
||
**Data**: 2026-06-27
|
||
**Sursa de design**: [docs/design.md](../design.md) (sursa de adevar pentru planurile de design)
|
||
|
||
> Nota: o sesiune anterioara a explorat o implementare + mockup-uri si a fost REVENITA
|
||
> (working tree readus la 5.12). Acest PRD ramane ca specificatie de planificat prin
|
||
> `/autoplan`. Sectiunile „Livrabile" / „Raport VERIFY" de mai jos descriu directia
|
||
> propusa si dovezile din explorare, NU stare livrata — re-validati prin autoplan.
|
||
|
||
## Context / problema
|
||
|
||
PRD 5.12 a marcat „responsive tableta/mobil" ca livrat, dar dogfooding-ul real
|
||
(screenshot-uri `localhost_8010_.png`, `step3-preview.png`, `tablet-820.png`,
|
||
`mobile-*.png`) a aratat ca paginile arata execrabil pe ecrane mici:
|
||
|
||
- **P0 break vertical**: in cardurile de Trimiteri pe mobil, eticheta lua `min-width:120px`
|
||
fix iar valoarea (nod text intr-un flex) se strangea la ~0 si `word-break:break-word`
|
||
o spargea **caracter cu caracter pe verticala** („B 0 7 5 8" pe coloana). Ilizibil.
|
||
- **P0 stepper import**: 4 coloane egale cu text + `overflow:hidden` → pe tableta „Confirma
|
||
trimiterea" era taiat; pe mobil 4 benzi minuscule cu text pe 3 randuri.
|
||
- **P0 tabel preview pe tableta** (768–1024px): 8 coloane `table-layout:fixed` cu latimi
|
||
fixe storceau vehicul+operatie → text rupt.
|
||
- **P1 „afiseaza tot ca pe desktop"**: cardurile aratau toate cele 6–8 campuri, nu esentialul.
|
||
- **P1 butoane exagerate**: `.tabel-card td button { width:100%; min-height:44px }` facea
|
||
Salveaza + Sterge **doua blocuri full-width** unul sub altul; butoanele icon-only din
|
||
„Mapari salvate" aveau **iconite invizibile** (SVG mic intr-un bloc colorat mare).
|
||
- **P2**: mapare coloane cu scroll orizontal pe mobil; versiunea `vX.Y.Z` ocupa spatiu in
|
||
header pe mobil; bara sticky de confirmare se rupea necontrolat.
|
||
|
||
Feedback user pe mockup-uri (2026-06-27):
|
||
- Compactarea sa fie **si pe desktop** (ex. wizard-ul mai compact peste tot).
|
||
- Pe **desktop** butoanele Salveaza/Sterge = **doar text** (fara iconita).
|
||
- Pe **mobil** = iconite, dar un set modern, **recognoscibil** (Lucide stroke), nu cele vechi.
|
||
- Nevoie de un **design.md** pe care planurile de design sa-l foloseasca.
|
||
|
||
## Decizii (confirmate cu user prin AskUserQuestion + mockup-uri)
|
||
|
||
1. **Directie**: carduri compacte, esential vizibil, butoane mici. (D: „da, dar ajustez")
|
||
2. **Tableta (768–1024px)**: tabelele actionabile devin **carduri, 2 pe rand** (grid).
|
||
3. **Scope**: pachet complet P0+P1+P2 + teste + acest PRD + ROADMAP + design.md.
|
||
4. **Butoane**: desktop = text; mobil = iconita patrata 44px, set **Lucide stroke** (contur).
|
||
5. **Wizard**: compact **peste tot** (inclusiv desktop): bara slim pe o linie; pe mobil
|
||
„Pasul N din 4 · Titlu" + bara de progres.
|
||
|
||
## Livrabile
|
||
|
||
### design.md (nou)
|
||
Sistemul de design: principii, tokeni (culoare 4 teme, tipografie IBM Plex, spatiere, radius,
|
||
elevatie), breakpoints (768/1024), scara de control (44/36/32), componente (butoane, card,
|
||
tabel→card, stepper, pill, formulare, modal), accesibilitate, si o sectiune „Pentru planurile
|
||
de design". Sursa de adevar; planurile pornesc de aici.
|
||
|
||
### Cod (doar CSS + markup template; backend NEATINS)
|
||
- **`_macros.html`**: macro `icon(name)` (Lucide save/trash/edit/plus, stroke) + `act_btn(label, ic, kind, attrs)`
|
||
(buton de actiune responsiv: desktop text / mobil iconita).
|
||
- **`base.html`** (CSS, inline):
|
||
- Sistem de butoane `.btn-secondary/.btn-ghost/.btn-danger/.btn-sm` + default primar imbunatatit
|
||
(font-weight 500, focus-visible).
|
||
- Sistem `.act` / `.act-save` / `.act-del` / `.act-group`: desktop = text, mobil = iconita 44px.
|
||
- Stepper compact `.stepper*` (track slim desktop/tableta; rezumat + bara progres mobil).
|
||
- Card mobil Trimiteri/Preview **rescris**: stivuit compact, vehicul = titlu, stare = pill,
|
||
`#`/checkbox ascunse, **fara gap fix de 120px** (fix break vertical).
|
||
- **Tableta 768–1024px**: `.tabel-trimiteri` + `.tabel-card` → grid 2 carduri/rand.
|
||
- Versiune ascunsa pe mobil; bara sticky confirmare compacta; mapare coloane stivuita full-width.
|
||
- Coloana actiuni preview 92→104px + `.btn-editeaza { white-space:nowrap }`.
|
||
- **`_stepper.html`**: rescris pe clasele compacte (fara stiluri inline inalte).
|
||
- **`_mapari.html`**: butoanele icon-only inlocuite cu `act_btn` (salvate + reguli-text + formate-coloane).
|
||
|
||
### Teste
|
||
- `test_web_responsive.py`: aserturile existente pastrate (toate trec).
|
||
- `test_web_mapari_actiuni.py`: actualizat de la `.icon-btn` la sistemul `.act` (act-save/act-del,
|
||
aria-label pe fiecare, `.act-ic` prezent), docstring marcat „superseda 5.10".
|
||
|
||
## Invariante respectate
|
||
- Breakpoint unic 768px + densitate 1024px; un singur bloc `@media (max-width:767px) {` principal
|
||
pe care se bazeaza testele (regulile noi adaugate inauntru, nu in blocuri noi inaintea lui).
|
||
- Tabelele dense read-only (Jurnal/Nomenclator/Admin) raman scroll-contained, NU se cardifica.
|
||
- Backend trimitere (worker, masina stari, idempotenta, contract RAR, canal API, mapping,
|
||
validation) NEATINS. Zero schema. Pur CSS + markup.
|
||
|
||
## Raport VERIFY (live, app pornit cu DB seedata, Playwright 390/820/1280)
|
||
- **Trimiteri mobil 390**: carduri compacte, pill stare + vehicul bold + operatie+cod, fara
|
||
break vertical. Header compact, versiune ascunsa. PASS.
|
||
- **Trimiteri tableta 820**: grid 2 carduri/rand, fara scroll orizontal. PASS.
|
||
- **Trimiteri desktop 1280**: tabel complet neschimbat (fara regresie). PASS.
|
||
- **Mapari mobil 390**: Salveaza = iconita discheta albastra, Sterge = iconita cos rosu (Lucide,
|
||
patrate 44px, recognoscibile), NU blocuri full-width. PASS.
|
||
- **Wizard import**: compact pe o linie pe desktop (✓ Incarca · ✓ Coloane · 3 Verifica · 4 Confirma)
|
||
+ ajutor sub; pe mobil „Pasul 3 din 4 · Verifica" + bara progres. PASS.
|
||
- **Preview import mobil 390**: carduri compacte per rand + bara confirmare compacta. PASS.
|
||
- Regresie pytest: vezi ROADMAP (suita verde).
|
||
|
||
## Debt notat (neblocant)
|
||
- Duplicarea pill stare + `eticheta_problema` pe error/needs_* arata redundant in carduri
|
||
(„Eroare / Eroare") — logica de continut in `routes.py`/`labels.py`, nu responsive.
|
||
- Filtrele de data (Azi/7zile/30zile/Custom) stivuiesc full-width pe mobil (4 randuri); ar putea
|
||
fi grid 2x2 — imbunatatire viitoare.
|
||
|
||
---
|
||
|
||
<!-- ============================================================ -->
|
||
<!-- GSTACK REVIEW REPORT — /autoplan (subagent-only; codex usage-limited) -->
|
||
<!-- ============================================================ -->
|
||
|
||
# GSTACK REVIEW REPORT
|
||
|
||
> Pipeline: CEO -> Design -> Eng -> Final Gate (DX skipped: produs end-user, nu unealta de developer).
|
||
> Voci: Claude subagent independent pe fiecare faza. **Codex INDISPONIBIL** (usage limit
|
||
> OpenAI pana la 2026-07-18) -> toate fazele ruleaza `[subagent-only]`. Consensul nu poate
|
||
> fi "CONFIRMED de ambele modele"; o singura voce.
|
||
|
||
## Faza 1 — CEO (strategie & scope)
|
||
|
||
### CEO dual voices
|
||
- **Codex (CEO):** `[codex-unavailable: usage limit]`.
|
||
- **Claude subagent (CEO):** rulat foreground, independent. Findings:
|
||
- **F1 (high):** premisa "utilizarea pe mobil e reala" e asumata, nedovedita. Submiterea RAR
|
||
e data-entry din xlsx/csv la receptia service-ului = task desktop/tastatura. Wizardul
|
||
(upload -> mapare -> preview -> commit) e greu utilizabil pe telefon indiferent de CSS.
|
||
Niciun semnal real (analytics/cerere user) citat; doar screenshot-uri ale propriului render urat.
|
||
- **F2 (high):** reframe — durerea reala sunt bug-urile de layout de pe DESKTOP (break vertical,
|
||
stepper taiat, butoane full-width, iconite invizibile), nu "responsive". Tier 1 = bug-uri +
|
||
sistem butoane + design.md (valoare clara, zilnica). Tier 2 = cardificare mobil/tableta (speculativ).
|
||
- **F3 (medium):** "CSS inline intr-un singur <style>, no build" e enuntat ca axioma, fara a fi
|
||
cantarit vs alternative (Tailwind CDN, Pico.css). Pentru HTMX e o alegere aparabila, dar
|
||
netestata/nelintata -> un blob `<style>` in crestere unde o editare de media-query strica tacit alte ecrane.
|
||
- **F4 (critical, REZOLVAT partial):** risc de churn — re-implementare din proza. CEO recomanda
|
||
recuperarea commit-ului revertit. **Verificat in git reflog: nu exista commit 5.13** (a fost
|
||
explorare in working tree, revertita, niciodata commis). Deci nu e nimic de recuperat din git ->
|
||
singura cale e re-implementarea din PRD -> PRD-ul TREBUIE facut mai specific (vezi Eng §2/§5).
|
||
- **F5 (medium):** scenariul de regret la 6 luni — rewrite CSS multi-template pentru audienta cu
|
||
mobil ~zero; `<style>` se dubleaza; un viitor content-change reintroduce clasa de bug "break vertical"
|
||
pentru ca nimic structural nu o previne; modul "card pe tableta" nevazut de un user real. Ce NU va
|
||
parea prost: design.md + sistemul de butoane.
|
||
- **F6 (pozitiv):** design.md e bun (tokeni, ratii de contrast AA, gotcha CSS-var-in-@media). De
|
||
pastrat/commis independent de soarta lui 5.13.
|
||
|
||
### CEO consensus table
|
||
```
|
||
CEO DUAL VOICES — CONSENSUS TABLE (codex N/A: usage limit)
|
||
═══════════════════════════════════════════════════════════════
|
||
Dimension Claude Codex Consensus
|
||
──────────────────────────────────── ─────── ───── ─────────
|
||
1. Premises valid? NO (F1) N/A 1-voce: NU (mobil nedovedit)
|
||
2. Right problem to solve? PARTIAL N/A 1-voce: reframe la bug+butoane (F2)
|
||
3. Scope calibration correct? NO N/A 1-voce: full P0+P1+P2 supradimensionat
|
||
4. Alternatives explored? NO (F3) N/A 1-voce: framework nediscutat
|
||
5. Competitive/market risks? N/A N/A irelevant (tool intern B2B)
|
||
6. 6-month trajectory sound? PARTIAL N/A 1-voce: design.md+butoane da; cardificare risc
|
||
═══════════════════════════════════════════════════════════════
|
||
O singura voce -> nimic "CONFIRMED de ambele". Findings critice tratate ca atare oricum.
|
||
```
|
||
|
||
### NOT in scope (confirmat / deferat)
|
||
- Backend (worker, masina stari, idempotenta, contract RAR, canal API, mapping, validation): NEATINS. [PRD]
|
||
- Tabele dense read-only (Jurnal/Nomenclator/Admin): raman scroll-contained, NU se cardifica. [PRD]
|
||
- Refactor `routes.py`/`labels.py` pentru "Eroare/Eroare": deferat (debt). Dar vezi Design §2 — un guard
|
||
de template (pill-only cand eticheta == stare) e ieftin si in-scope.
|
||
- Adoptarea unui framework CSS: respins (P4 DRY + no-build potrivit stack-ului HTMX), dar de notat explicit ca decizie.
|
||
|
||
### What already exists (grounding pe cod real, nu pe "Raport VERIFY")
|
||
- `docs/design.md` (232 linii): **FACUT**, calitate buna. Deliverabilul "design.md" e in esenta livrat.
|
||
- Sistem butoane (`.act`/`.act-save`/`.btn-secondary`/`.btn-ghost`/`.btn-danger`/`.btn-sm`): **NEFACUT** (absent in base.html).
|
||
- Macro `icon()` / `act_btn()` + Lucide: **NEFACUT** (absent in `_macros.html`; doar `camp`+`autosend_toggle`).
|
||
- Stepper compact: **NEFACUT** (`_stepper.html` inca flex 4-coloane inline = exact anti-patternul P0).
|
||
- Grid 2 carduri/rand tableta 768-1024px: **NEFACUT** (blocul @media 1024 doar ascunde `.col-actualizat`).
|
||
- Card mobil Trimiteri (fara gap fix 120px): **NEFACUT** (`base.html:410-412` inca `td{display:flex}`+`::before{min-width:120px}`).
|
||
- "Raport VERIFY ... PASS" din PRD = din explorarea revertita, NU stare curenta. De NU tratat ca acceptanta.
|
||
|
||
### Dream-state delta
|
||
- CURRENT: 5.12 livrat (modal cont obligatoriu) + fundatie responsive 5.9/5.11; bug-uri P0 inca prezente in tree.
|
||
- THIS PLAN: compactare + butoane + cardificare mobil/tableta + design.md (deja partial).
|
||
- 12-MONTH IDEAL: un sistem de design tokenizat (design.md) aplicat consecvent, cu teste pe COMPORTAMENT
|
||
la breakpoint (nu doar string-match pe clase), astfel incat editarile CSS sa nu mai poata reverti tacit.
|
||
Delta: planul nu instituie teste pe comportament; ramane string-match fragil (vezi Eng §2).
|
||
|
||
### CEO completion summary
|
||
Plan corect ca directie de design, dar (a) supra-incadrat ca "responsive" cand miezul de valoare e
|
||
fix-bug-desktop + butoane + design.md; (b) premisa "mobil real" nedovedita; (c) re-implementare din
|
||
proza fara specificul CSS/test -> risc mare de a reverti din nou. design.md e cel mai durabil activ.
|
||
|
||
---
|
||
|
||
## DECIZIE PREMISA (gate user, 2026-06-27)
|
||
**Scope: pachet complet FARA grid 2-carduri/rand pe tableta.** Actionable lists (Trimiteri,
|
||
Preview, Mapari) raman **o coloana pana la 1024px**. Reverseaza Decizie #2 din PRD.
|
||
-> `design.md` §3 si §5.3 trebuie editate la "o coloana pana la 1024px" in acelasi PR.
|
||
-> Deliverabilul "grid 2/rand" si testul lui aferent SCOT din scope; se adauga guard ca raman 1 coloana.
|
||
|
||
## Faza 2 — Design (subagent-only; codex usage-limited)
|
||
|
||
### Design dual voices
|
||
- **Codex (design):** `[codex-unavailable: usage limit]`.
|
||
- **Claude subagent (design):** independent. Findings:
|
||
- **Meta-hazard (high):** sectiunea "Raport VERIFY ... PASS" se citeste ca raport de finalizare
|
||
desi munca e nelivrata -> relabel "Criterii de acceptanta (de dovedit)" sau sterge.
|
||
- **Ierarhie card mobil 7/10:** `vehicul=titlu, stare=pill, operatie+cod` corect. RISC pe ce se
|
||
ascunde: (a) `actualizat` (timestamp) = singurul semnal "se misca / e blocat?" pe mobil ->
|
||
pastreaza o linie meta 12px muted SAU garanteaza in modal si spune-o; (b) `checkbox` ascuns ->
|
||
omoara multi-select pe mobil; daca bulk "Trimite la RAR" e workflow real = regresie functionala
|
||
tacuta (high). PRD trebuie sa declare explicit daca bulk e desktop-only by design.
|
||
- **Stari lipsa (high):** empty/loading/error/partial ale listelor cardificate nespecificate
|
||
(fragmente HTMX-swapped). "Eroare/Eroare" (pill+eticheta) e cel mai vizibil exact in cardul nou
|
||
-> guard de TEMPLATE ieftin (pill-only cand `eticheta_problema == stare_text`), nu refactor routes.py.
|
||
- **Sistem iconite 8/10 (sound):** desktop-text/mobil-icon corect, rezolva "SVG invizibil in bloc".
|
||
Gap: (a) `act_btn` TREBUIE sa emita `aria-label={{label}}` in ramura icon-only (invariant de macro);
|
||
(b) Sterge fara confirmare pe 44px touch = risc data-loss la mis-tap -> confirm/undo pe `act-del`.
|
||
- **Stepper 7/10:** "Pasul N din 4" + bara progres clar. CONTRADICTIE tableta: design.md §3 = tableta
|
||
distincta, §5.4 baga "Tableta/mobil" impreuna in forma colapsata, iar PRD linia 5 zice "compact peste
|
||
tot". La 820px = track slim sau "Pasul N din 4"? De ales explicit.
|
||
- **Specificitate 9/10:** cel mai puternic punct; PRD referentiaza tokenii design.md. Contradictie minora:
|
||
stepper inline foloseste `rgba(91,141,239,.10)` hardcodat vs design.md §2.1 (color-mix obligatoriu).
|
||
|
||
### Design litmus scorecard
|
||
```
|
||
DESIGN LITMUS (codex N/A: usage limit)
|
||
═══════════════════════════════════════════════════════════════
|
||
Dimensiune Claude Codex Nota
|
||
────────────────────────────────── ────── ───── ──────────────
|
||
1. Ierarhie informatie 7/10 N/A risc pe campuri ascunse (timestamp/checkbox)
|
||
2. Stari (empty/loading/error) 3/10 N/A nespecificate (high)
|
||
3. Sistem iconite/butoane 8/10 N/A aria-label macro + confirm delete
|
||
4. Stepper / wizard 7/10 N/A contradictie tableta de rezolvat
|
||
5. Specificitate + aliniere md 9/10 N/A 1 culoare hardcodata de scos
|
||
6. Tabel->card responsive (2-up scos) N/A o coloana pana la 1024px (decizie user)
|
||
7. Accesibilitate (design.md §6) 8/10 N/A solid; lipseste pattern confirm distructiv
|
||
═══════════════════════════════════════════════════════════════
|
||
```
|
||
|
||
### Auto-decizii Design (6 principii)
|
||
- Guard template "Eroare/Eroare" (pill-only): **INCLUS** (P2 boil-lakes, <1 fisier, in cardul rescris). [TASTE -> gate]
|
||
- `act_btn` invariant aria-label in ramura icon-only: **INCLUS** (P1 completeness + a11y obligatoriu). [mecanic]
|
||
- Confirm/undo pe `act-del` mobil: **INCLUS** ca cerinta (P1; data-loss). Implementare = confirm nativ simplu, nu modal nou (P5). [TASTE -> gate]
|
||
- Linie meta `actualizat` pe card mobil (12px muted, timp relativ): **INCLUS** (P1; semnal "blocat"). [TASTE -> gate]
|
||
- Bulk-select pe mobil: **DECLARAT desktop-only by design** (P3 pragmatic; checkbox ascuns pe mobil ramane), de notat in PRD. [TASTE -> gate]
|
||
- Relabel "Raport VERIFY" -> "Criterii de acceptanta": **INCLUS** (mecanic, evita falsa finalizare).
|
||
- Rezolvare contradictie stepper tableta: **la 768-1024px = forma colapsata "Pasul N din 4"** (P5 explicit, consecvent cu mobil; track slim doar >=1024px). [mecanic]
|
||
- Scoatere culoare hardcodata stepper -> `color-mix(var(--accent))`: **INCLUS** (DRY/tokeni design.md §2.1). [mecanic]
|
||
|
||
## Faza 3 — Eng (subagent-only; codex usage-limited)
|
||
|
||
### Eng dual voices
|
||
- **Codex (eng):** `[codex-unavailable: usage limit]`.
|
||
- **Claude subagent (eng):** independent, grounded pe cod real. Findings:
|
||
- **§2 Fragilitate teste (CRITICAL):** vezi artefact test-plan. Invariantul PRD ("un singur bloc
|
||
@media principal") e FACTUAL GRESIT — exista DOUA blocuri (377, 404); testele feliaza ferestre
|
||
fixe `[idx:idx+5000]` de la PRIMA aparitie; rescrierea cardului impinge `min-height:0`/`100vw`
|
||
peste fereastra -> `test_header...` + `test_modal...` PIC. Cauza probabila a revert-ului.
|
||
FIX OBLIGATORIU INAINTE de CSS: refactor cele 2 teste sa ancoreze pe sentinel + slice pana la EOF.
|
||
- **§1 Arhitectura (medium):** `act_btn` randeaza si textul si SVG-ul inline, ascunzand unul per
|
||
breakpoint -> fiecare rand de tabel duce `<path>` Lucide chiar pe desktop (bloat DOM/octeti pe
|
||
toate viewporturile). Acceptabil (P5 simplu) sau `<use href="#sprite">` definit o data.
|
||
- **§3 Edge cases (medium):** VIN 17 car. (`_preview_rand.html:33` nowrap) — verifica sa nu produca
|
||
scroll orizontal la 360px dupa scoaterea gap-ului 120px.
|
||
- **§4 Teste (high):** `test_web_mapari_actiuni.py` are 3 aserturi pe `.icon-btn` (toate se rup);
|
||
lipsesc teste pentru: card mobil fara 120px (P0 fara guard!), `act_btn` aria-label, stepper compact.
|
||
Plus (post-decizie): guard ca actionable lists raman 1 coloana pana la 1024px (nu 2-up).
|
||
- **§5 Risc re-implementare (high):** PRD da intentie, nu CSS exact/offset-uri; fara fix-ul de teste
|
||
re-implementarea reverteaza din nou. `git reflog`: NU exista commit 5.13 de recuperat (explorare necommisa).
|
||
- **§6 Complexitate ascunsa:** `_stepper.html` e ~70 linii inline -> mutarea in base.html = CRESTERE
|
||
base.html; plaseaz-o DEPARTE de blocul mobil 404 ca sa nu strangi bugetul de octeti al ferestrei.
|
||
|
||
### Eng consensus table
|
||
```
|
||
ENG DUAL VOICES — CONSENSUS (codex N/A: usage limit)
|
||
═══════════════════════════════════════════════════════════════
|
||
Dimensiune Claude Codex Nota
|
||
────────────────────────────────── ────── ───── ─────────────────
|
||
1. Arhitectura sound? DA* N/A inline-CSS ok; SVG bloat minor
|
||
2. Test coverage suficient? NU N/A fragil + lipsuri (high)
|
||
3. Riscuri performanta? minor N/A SVG inline pe randuri
|
||
4. Securitate? N/A N/A pur CSS/markup, fara suprafata noua
|
||
5. Error paths? NU N/A stari card nespecificate (cu Design)
|
||
6. Risc deploy/regresie? RIDICAT N/A revert auto daca testele nu se repara intai
|
||
═══════════════════════════════════════════════════════════════
|
||
```
|
||
|
||
### Arhitectura (diagrama)
|
||
```
|
||
base.html (un singur <style>, no build)
|
||
├─ :root tokeni (design.md §2) [exista]
|
||
├─ .btn / .btn-secondary/.btn-ghost/.btn-danger/.btn-sm [DE ADAUGAT]
|
||
├─ .act / .act-save / .act-del / .act-group [DE ADAUGAT]
|
||
├─ .stepper* (track slim >=1024; colapsat <1024) [DE ADAUGAT, departe de blocul 404]
|
||
├─ @media (min-width:768px)and(max-width:1024px) { ... } [exista; FARA grid 2-up]
|
||
├─ @media (max-width:767px) { #377 mic } [exista — sursa fragilitatii]
|
||
└─ @media (max-width:767px) { #404 PRINCIPAL } [card rescris AICI, dupa header/modal]
|
||
_macros.html : icon(name) + act_btn(label,ic,kind,attrs) [DE ADAUGAT; aria-label invariant]
|
||
_stepper.html: rescris pe .stepper* (fara inline inalt) [DE RESCRIS]
|
||
_mapari.html : .icon-btn -> act_btn [DE MIGRAT]
|
||
TESTE : refactor ferestre fixe INAINTE de CSS [BLOCANT]
|
||
```
|
||
|
||
### Auto-decizii Eng (6 principii)
|
||
- Refactor cele 2 teste fragile INAINTE de CSS: **OBLIGATORIU, BLOCANT** (P1+P5; altfel revert garantat). [mecanic]
|
||
- Corectare invariant PRD "un singur bloc @media": **CORECTAT** (sunt doua; regula reala = adauga dupa header/modal + slice EOF). [mecanic]
|
||
- SVG inline vs `<use>` sprite: **inline acum** (P5 explicit/simplu); sprite notat ca optimizare. [TASTE -> gate]
|
||
- Teste noi (#2 card fara 120px, #3 act_btn aria, #4 stepper, #5 window-guard, +1-coloana guard): **INCLUSE** (P1). [mecanic]
|
||
- "Aserturile existente pastrate (toate trec)" din PRD: **CORECTAT** la "refactor + pastreaza intentia" (imposibil ca atare). [mecanic]
|
||
|
||
## Decision Audit Trail
|
||
|
||
| # | Faza | Decizie | Clasif. | Principiu | Rationament |
|
||
|---|------|---------|---------|-----------|-------------|
|
||
| 1 | CEO | Scope: complet FARA grid 2/rand tableta | GATE user | - | user a ales la premise gate; ambele voci design contestau 2-up |
|
||
| 2 | CEO | Backend NEATINS, pur CSS/markup | mecanic | P4 | confirmat de PRD; zero schema |
|
||
| 3 | CEO | Fara framework CSS (inline ramane) | mecanic | P4/P5 | no-build potrivit HTMX; notat ca decizie |
|
||
| 4 | CEO | Commit revertit de recuperat? NU exista | mecanic | - | git reflog: explorare necommisa; re-impl din PRD |
|
||
| 5 | Design | Guard template "Eroare/Eroare" pill-only | taste | P2 | in cardul rescris, <1 fisier |
|
||
| 6 | Design | act_btn aria-label invariant icon-only | mecanic | P1 | a11y obligatoriu design.md §6 |
|
||
| 7 | Design | Confirm/undo pe act-del mobil | taste | P1 | data-loss la mis-tap 44px |
|
||
| 8 | Design | Linie meta `actualizat` pe card mobil | taste | P1 | singurul semnal "blocat" pe mobil |
|
||
| 9 | Design | Bulk-select = desktop-only by design | taste | P3 | checkbox ascuns pe mobil; de declarat |
|
||
| 10 | Design | Relabel "Raport VERIFY" -> "acceptanta" | mecanic | - | evita falsa finalizare |
|
||
| 11 | Design | Stepper 768-1024 = forma colapsata | mecanic | P5 | consecvent cu mobil; track slim >=1024 |
|
||
| 12 | Design | Stepper color-mix in loc de hardcodat | mecanic | P4 | design.md §2.1 tokeni |
|
||
| 13 | Eng | Refactor teste fragile INAINTE de CSS | mecanic | P1/P5 | BLOCANT; cauza probabila revert |
|
||
| 14 | Eng | SVG inline acum (sprite deferat) | taste | P5 | simplu > optimizare prematura |
|
||
| 15 | Eng | 5 teste noi + migrare mapari | mecanic | P1 | acopera P0 + a11y + scope guard |
|
||
| 16 | Eng | design.md §3/§5.3 -> "1 coloana <=1024" | mecanic | - | consecventa cu decizia de scope |
|
||
|
||
## Cross-Phase Themes
|
||
- **"Raport VERIFY se citeste ca facut, dar nu e"** — semnalat de Design (meta-hazard) SI implicit de
|
||
Eng (§5 re-impl). Semnal high-confidence: relabel + grounding pe cod real, nu pe raport.
|
||
- **Stari/erori nespecificate** — Design §2 (stari card) + Eng §4 (error paths). De adaugat o matrice de stari.
|
||
- **Fragilitate -> revert** — Eng §2 (teste) + CEO F5 (nimic structural nu previne re-bug). Repara testele intai.
|
||
|
||
## Eng completion summary
|
||
Directia de design e fina; planul livreaza DOAR daca fragilitatea testelor (§2) e rezolvata INTAI
|
||
(refactor cele 2 teste pe ancora+EOF), altfel rescrierea cardului mobil reverteaza singura din nou.
|
||
Invariantul PRD despre "un singur bloc @media" e gresit si trebuie corectat. design.md ramane activul durabil.
|