Ecco il piano:

# Piano

## Obiettivo
Trasformare `index.html` da pagina statica "Pagina di prova" in una documentazione interattiva che spiega l'intento del repo (test di Gitea Actions + automazione agentica OpenCode) e l'intera pipeline `opencode.yml` usando Markdown e diagrammi Mermaid renderizzati a runtime via CDN.

## Task
1. **Riscrivere `index.html` — struttura HTML** — Aggiungere sezioni: repo intent, demo workflow (cenno), pipeline opencode.yml (dettaglio). Includere via CDN `marked.js` per Markdown e `mermaid.js` per diagrammi.
2. **Sezione "Repo Intent"** — Spiegare che il repo testa Gitea Actions e agenti AI OpenCode su eventi (push, issues, PR, commenti, manuale). Eventuale riferimento ai 3 workflow (demo, opencode, publish).
3. **Sezione "Workflow opencode.yml per filo e per segno"** — Spiegare ogni step del workflow (autorizzazione, reazione 👀, checkout, installazione OpenCode, determinazione contesto, raccolta contesto, pulizia comando, fase plan, fase build/review loop, push/PR, review finale, reazione 🚀/😕). Integrare **diagrammi Mermaid**:
   - Diagramma a blocchi/flusso generale del workflow (flowchart LR)
   - Diagramma di sequenza Gitea → Runner → OpenCode
   - Diagramma del loop Build/Review con criterio di uscita VERDICT
4. **Sezione "Trigger ed Eventi"** — Tabella riassuntiva eventi e descrizione.
5. **Sezione "Autorizzazione e Sicurezza"** — Whitelist utenti, blocco auto-trigger (opencode-bot), uso di secret.
6. **Stile e layout** — Mantenere coerenza con palette viola attuale. Aggiungere navigazione interna (anchor link), scroll fluido. Le sezioni con diagrammi Mermaid hanno container con sfondo bianco e bordo per rendering corretto.

File coinvolti:
- `index.html` (sostituzione completa contenuto)

## Acceptance Criteria
- [ ] `index.html` carica `marked.js` e `mermaid.js` da CDN
- [ ] `index.html` spiega chiaramente l'intento del repository (test Gitea Actions + automazione agentica OpenCode)
- [ ] `index.html` spiega ogni step della pipeline `opencode.yml` in ordine, con descrizione testuale chiara
- [ ] Almeno 3 diagrammi Mermaid integrati (flusso generale, sequenza, loop build/review)
- [ ] I diagrammi Mermaid sono renderizzati correttamente (non mostrano il codice sorgente)
- [ ] Contenuto Markdown nelle sezioni è renderizzato correttamente via `marked.js`
- [ ] Pagina responsive, navigabile (sezioni con id, scroll fluido)
- [ ] Mantiene palette gradient viola come tema visivo
- [ ] Non ci sono errori in console (JS) a caricamento avvenuto

## Verifica
1. Aprire `index.html` in un browser (o via `npx serve .`)
2. Verificare che i diagrammi Mermaid vengano renderizzati (non mostrati come testo)
3. Verificare che il testo Markdown sia formattato correttamente
4. Verificare che tutte le sezioni siano leggibili e complete
5. Controllare la console del browser per eventuali errori JS