test/issue_plans/opencode-issue-11.md

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