InsanityLab-web/.superpowers/sdd/2026-08-22-longevity-interfaccia/task-1-report.md

# Task 1 — Il guscio: layout e foglio di stile — report

**Stato:** completato. 5/5 test nuovi verdi, suite completa allo stato atteso (1 fallito
pre-esistente e fuori perimetro), `npx tsc --noEmit` pulito. Commit fatto.

**Commit:** `34c66ca` — "longevity: il guscio della piattaforma, senza semaforo sui punteggi"

File aggiunti (solo questi, `git add` esplicito, nessun `-A`):
- `src/layouts/Longevity.astro`
- `src/styles/longevity.css`
- `src/pages/longevity/index.astro`
- `tests/longevity/pagine.test.ts`

## Procedura seguita (TDD)

### Step 1-2: test scritto, verificato rosso

Comando:
```
npm test -- tests/longevity/pagine.test.ts
```
Esito (prima dell'implementazione): **5 falliti** — `ENOENT` su `src/layouts/Longevity.astro`
e `src/styles/longevity.css` (file non esistenti), e `existsSync(.../index.astro)` a `false`.

### Step 3: implementazione

- `src/layouts/Longevity.astro` — niente `import Header`/`Footer` pubblico, `<meta
  name="robots" content="noindex, nofollow" />`, props `title`, `crumbs`, `variante`
  (`'referto' | 'gestionale'`, default `'referto'`). Solo la forma `referto` è realizzata
  in questo task: una colonna (`.lg-shell`, `max-width: 760px`) senza navigazione, come
  richiesto dal brief — la barra laterale gestionale arriva col piano successivo.
- `src/styles/longevity.css` — globale, prefissato `.lg`, con le variabili locali richieste:
  ```css
  --lg-tratteggio: #d8d2c8;   /* il perimetro di ciò che non sappiamo */
  --lg-fuori-range: #b05a4e;  /* SOLO per una misura sospetta, mai per un punteggio */
  ```
  Nessuna variabile `--lg-ok` / `--lg-buono` / `--lg-verde`: l'intensità di un punteggio è
  affidata a `--lg-intensita` (0..1), consumata come `opacity` su `.lg-score__bar-fill`
  sopra un unico colore d'accento (`var(--c-accent)`), non a un colore diverso per fascia.
- `src/pages/longevity/index.astro` — nessun indice, solo `Astro.redirect('/longevity/io')`
  (la rotta `/longevity/io` arriva col Task 3; per ora la protezione è già del middleware
  esistente su `isProtectedPath`/`canAccessAdminPath`, nessuna modifica ad `auth.ts`
  necessaria: le regole per `/longevity` ci sono già).

### Step 4: test target verde

Comando:
```
npm test -- tests/longevity/pagine.test.ts
```
Output:
```
 Test Files  1 passed (1)
      Tests  5 passed (5)
```

### Step 5: suite completa + typecheck

Comando:
```
npm test
```
Output (coda):
```
 ❯ tests/modifiche-agosto.test.ts (25 tests | 1 failed) 72ms
     × l'inaugurazione dice la data e che il programma manca ancora 8ms

 FAIL  tests/modifiche-agosto.test.ts > promo ed eventi > l'inaugurazione dice la data e che il programma manca ancora
AssertionError: expected 'Inaugurazione' to contain '19 settembre 2026'

 Test Files  1 failed | 37 passed (38)
      Tests  1 failed | 313 passed (314)
```
Esattamente il rosso pre-esistente dichiarato nel brief (fuori perimetro, non toccato) —
nessun altro test rotto, i 5 nuovi inclusi nel verde.

Comando:
```
npx tsc --noEmit
```
Output: nessuno (exit pulito).

### Step 6: commit

```
git status --porcelain   # solo i 4 file nuovi, nessun altro modificato
git add src/layouts/Longevity.astro src/styles/longevity.css src/pages/longevity/index.astro tests/longevity/pagine.test.ts
git commit -m "longevity: il guscio della piattaforma, senza semaforo sui punteggi"
```
```
[feat/longevity 34c66ca] longevity: il guscio della piattaforma, senza semaforo sui punteggi
 4 files changed, 176 insertions(+)
```
`git status` dopo il commit: albero pulito.

## Dubbi / note per chi esegue il Task 2/3

- `src/pages/longevity/index.astro` reindirizza a `/longevity/io`, che non esiste ancora
  (arriva col Task 3): finché il Task 3 non è fatto, visitare `/longevity/` produce un
  redirect verso una rotta 404. È il comportamento descritto dal brief, non un difetto di
  questo task.
- La variante `gestionale` è dichiarata nel tipo `Props` di `Longevity.astro` (con
  `data-variante` sul `<body>` per un eventuale hook CSS futuro) ma il corpo del layout
  renderizza solo la forma a colonna: nessuna barra laterale è stata costruita, come da
  perimetro del task ("questo task realizza la prima; la seconda arriva col piano del
  gestionale").
- Non ho toccato `src/lib/auth.ts`: le regole per `/longevity` (incluso il ramo
  `/longevity/gestionale` per il ruolo `trainer`) risultavano già presenti in `RULES` e
  `isProtectedPath`, presumibilmente da un piano precedente (strato dati). Segnalo per
  conferma, nel caso non fosse atteso.


---

## Rinforzo dopo revisione (2026-08-22)

**Stato:** completato. Commit `2ea822a` sopra a `34c66ca`.

Tre correzioni chieste dal coordinatore, tutte in `tests/longevity/pagine.test.ts` (unico
file toccato, nessuna modifica a layout/CSS/pagina):

1. **Test anti-semaforo reso strutturale.** Il vecchio test cercava tre nomi vietati nel
   CSS — un colore scritto direttamente (esadecimale) o una variabile con un altro nome
   lo aggiravano. Il nuovo test (`nelle regole di un punteggio compaiono solo i colori
   ammessi...`) fa il contrario: prende ogni regola CSS il cui selettore contiene
   `lg-score`, estrae ogni dichiarazione su una proprietà-colore (`color`, `background`,
   `border-*-color`, `outline-color`, `fill`, `stroke`), e verifica che il valore sia
   `var(--nome)` con `--nome` in un allowlist esplicito (l'accento del sito, il
   tratteggio, il fuori range, più i token neutri di testo/sfondo già in uso). Qualunque
   letterale (hex, `rgb()`, nome CSS) o `var()` fuori allowlist è una violazione raccolta
   in un array che il test pretende vuoto. Il vecchio test sui nomi vietati è rimasto
   come controllo separato (cattura anche un token dichiarato ma mai usato, es.
   `--lg-verde-scuro: ...;` non referenziato in nessuna regola).

2. **Test sulla rotta rinforzato.** Prima verificava solo `existsSync`. Ora legge il file
   e controlla che contenga `Astro.redirect('/longevity/io')` con una regex sul
   contenuto, non solo sull'esistenza.

3. **Prefisso classi, un carattere.** `c.startsWith('lg')` accettava anche `lgfoo` (senza
   trattino). Cambiato in `c === 'lg' || c.startsWith('lg-')`.

### Prova richiesta: il test nuovo diventa rosso davvero

Backup del CSS reale, poi due regressioni iniettate una alla volta (gli esempi dati dal
coordinatore), test rilanciato, poi ripristino e riverifica verde.

**Regressione 1 — verde esadecimale su una classe di punteggio**, aggiunta in coda al
foglio: `.lg-score--alto { color: #6f8f6a; }`. Comando: `npm test -- tests/longevity/pagine.test.ts`.
Output (estratto):

    tests/longevity/pagine.test.ts (6 tests | 1 failed)
        x nelle regole di un punteggio compaiono solo i colori ammessi: l'accento, il tratteggio, il fuori range

    AssertionError: expected [ Array(1) ] to deeply equal []
    +   ".lg-score--alto { color: #6f8f6a }"

    Test Files  1 failed (1)
         Tests  1 failed | 5 passed (6)

**Rosso, come atteso.** (La stringa riportata include anche il commento sulla riga
precedente perché il parser del test cattura tutto ciò che precede la graffa aperta —
cosmetico, non inficia la rilevazione.)

**Regressione 2 — variabile con nome innocuo**: `.lg-score--alto { color: var(--lg-buona-salute); }`.
Stesso comando. Output: `Tests  1 failed | 5 passed (6)` — **rosso**, stesso test.

**Ripristino** dal backup fatto prima delle due prove, poi verifica che il file torni
identico all'HEAD già committato (`git diff --stat` senza output) e che il test torni
verde:

    Test Files  1 passed (1)
         Tests  6 passed (6)

### Verifiche finali

`npm test -- tests/longevity/pagine.test.ts` → 6/6 verdi.

`npm test` → `Test Files  1 failed | 37 passed (38)`, `Tests  1 failed | 314 passed (315)`;
il fallito è sempre e solo `tests/modifiche-agosto.test.ts > ... inaugurazione ...`
(pre-esistente, fuori perimetro, non toccato).

`npx tsc --noEmit` → nessun output, pulito.

### Commit

`git status --porcelain` prima di committare mostrava solo `tests/longevity/pagine.test.ts`
modificato.

    git add tests/longevity/pagine.test.ts
    git commit -m "longevity: test anti-semaforo strutturale (colori ammessi, non nomi vietati) e rotta verificata sul contenuto"

Risultato:

    [feat/longevity 2ea822a] longevity: test anti-semaforo strutturale (colori ammessi, non nomi vietati) e rotta verificata sul contenuto
     1 file changed, 44 insertions(+), 4 deletions(-)