maria/test
0
0
Fork 0
Code Issues 3 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

PR Automatica OpenCode: opencode-issue-11 #12

Open
maria wants to merge 2 commits from opencode-issue-11 into main
pull from: opencode-issue-11
merge into: :main
Conversation 1 Commits 2 Files Changed 2
+656 -56
2 changed files with 656 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+618 -56
View File
@@ -3,10 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prova</title>
<title>OpenCode Gitea Integration — Test Repository</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js" defer></script>
<style>
* {
margin: 0;
@@ -14,73 +16,95 @@
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 1rem;
html {
scroll-behavior: smooth;
}
.card {
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-attachment: fixed;
min-height: 100vh;
padding: 2rem 1rem;
color: #1a1a2e;
}
/* Navigation */
nav {
max-width: 900px;
margin: 0 auto 2rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1rem 2rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
justify-content: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
nav a {
color: #667eea;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
padding: 0.3rem 0;
border-bottom: 2px solid transparent;
transition: border-color 0.2s, color 0.2s;
}
nav a:hover {
border-bottom-color: #667eea;
color: #764ba2;
}
/* Main container */
.container {
max-width: 900px;
margin: 0 auto;
}
/* Hero */
.hero {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 3rem 3.5rem;
max-width: 480px;
width: 100%;
padding: 3rem;
text-align: center;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.15),
0 1px 3px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 2rem;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.card:hover {
transform: translateY(-4px);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.2),
0 1px 3px rgba(0, 0, 0, 0.08);
}
.icon {
width: 72px;
height: 72px;
.hero .icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-size: 2.2rem;
}
h1 {
font-size: 1.75rem;
.hero h1 {
font-size: 2rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 0.75rem;
letter-spacing: -0.02em;
}
p {
font-size: 1rem;
line-height: 1.6;
.hero p {
font-size: 1.05rem;
line-height: 1.7;
color: #555;
margin-bottom: 2rem;
max-width: 600px;
margin: 0 auto;
}
.divider {
width: 48px;
height: 4px;
margin: 0 auto 2rem;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 2px;
}
.badge {
.hero .badge {
display: inline-block;
padding: 0.4rem 1.2rem;
background: linear-gradient(135deg, #667eea, #764ba2);
@@ -88,27 +112,565 @@
border-radius: 100px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
margin-top: 1.2rem;
}
@media (max-width: 480px) {
.card {
padding: 2rem 1.5rem;
border-radius: 16px;
/* Sections */
.section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 2.5rem 3rem;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.section h2 {
font-size: 1.6rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 0.6rem;
}
.section h2::after {
content: '';
flex: 1;
height: 3px;
background: linear-gradient(90deg, #667eea, transparent);
border-radius: 2px;
margin-left: 0.5rem;
}
.section h3 {
font-size: 1.2rem;
font-weight: 600;
color: #333;
margin: 1.5rem 0 0.8rem;
}
.section p, .section li {
font-size: 1rem;
line-height: 1.7;
color: #555;
}
.section p {
margin-bottom: 1rem;
}
.section ul, .section ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.section li {
margin-bottom: 0.4rem;
}
.section strong {
color: #333;
}
.section code {
background: #f0f0f5;
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.88rem;
color: #764ba2;
}
.section pre {
background: #f5f5fa;
padding: 1rem 1.2rem;
border-radius: 10px;
overflow-x: auto;
margin-bottom: 1rem;
border: 1px solid #e8e8ee;
}
.section pre code {
background: none;
padding: 0;
color: #333;
}
/* Mermaid containers */
.mermaid-container {
background: #fff;
border: 2px solid #e8e8ee;
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
overflow-x: auto;
}
.mermaid-container .mermaid {
text-align: center;
}
/* Tables */
.section table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0 1.5rem;
font-size: 0.95rem;
}
.section th {
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
padding: 0.7rem 1rem;
text-align: left;
font-weight: 600;
}
.section th:first-child {
border-radius: 8px 0 0 0;
}
.section th:last-child {
border-radius: 0 8px 0 0;
}
.section td {
padding: 0.6rem 1rem;
border-bottom: 1px solid #eee;
color: #555;
}
.section tr:last-child td {
border-bottom: none;
}
.section td:first-child {
font-weight: 600;
color: #333;
}
/* Step list */
.step-list {
list-style: none;
padding: 0;
counter-reset: step;
}
.step-list li {
counter-increment: step;
padding: 1rem 1rem 1rem 3.5rem;
position: relative;
background: #f8f8ff;
border-radius: 12px;
margin-bottom: 0.8rem;
border-left: 4px solid #667eea;
}
.step-list li::before {
content: counter(step);
position: absolute;
left: 0.8rem;
top: 1rem;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
}
.step-list li strong {
display: block;
font-size: 1.05rem;
margin-bottom: 0.25rem;
}
.step-list li p {
margin: 0;
}
/* Markdown rendered content */
.md-content h1, .md-content h2, .md-content h3 {
margin-top: 1.2rem;
}
.md-content ul, .md-content ol {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.md-content code {
background: #f0f0f5;
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-size: 0.88rem;
}
.md-content pre {
background: #f5f5fa;
padding: 1rem;
border-radius: 10px;
overflow-x: auto;
margin-bottom: 1rem;
}
/* Divider */
.divider {
width: 48px;
height: 4px;
margin: 0 auto 1.5rem;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 2px;
}
.section-divider {
width: 60px;
height: 4px;
margin: 0 0 1.5rem;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 2px;
}
/* Responsive */
@media (max-width: 640px) {
body {
padding: 1rem 0.75rem;
}
h1 {
font-size: 1.4rem;
.hero {
padding: 2rem 1.5rem;
}
.hero h1 {
font-size: 1.5rem;
}
.section {
padding: 1.5rem 1.2rem;
}
.section h2 {
font-size: 1.3rem;
}
nav {
padding: 0.8rem 1rem;
gap: 0.4rem 1rem;
}
nav a {
font-size: 0.8rem;
}
.step-list li {
padding: 0.8rem 0.8rem 0.8rem 3rem;
}
.section th, .section td {
padding: 0.5rem 0.7rem;
font-size: 0.85rem;
}
}
</style>
</head>
<body>
<div class="card">
<div class="icon">✨</div>
<nav>
<a href="#intento">Repo Intent</a>
<a href="#workflow">Workflow opencode.yml</a>
<a href="#trigger">Trigger &amp; Eventi</a>
<a href="#sicurezza">Autorizzazione &amp; Sicurezza</a>
</nav>
<div class="container">
<!-- Hero -->
<div class="hero">
<div class="icon">&#9889;</div>
<div class="divider"></div>
<h1>Pagina di prova</h1>
<p>Questa è una pagina HTML di test realizzata con cura per un aspetto più elegante e moderno.</p>
<span class="badge">HTML &nbsp;·&nbsp; CSS &nbsp;·&nbsp; Design</span>
<h1>OpenCode &times; Gitea Actions</h1>
<p>Repository di test per l'integrazione tra Gitea Actions e agenti AI OpenCode. Automazione agentica su eventi di issue, PR, commenti e dispatch manuale.</p>
<span class="badge">Gitea Actions &nbsp;&middot;&nbsp; OpenCode &nbsp;&middot;&nbsp; AI Agents</span>
</div>
<!-- Sezione 1: Repo Intent -->
<section class="section" id="intento">
<h2>Repo Intent</h2>
<div class="section-divider"></div>
<div class="md-content" data-md>
Questo repository è un banco di prova per l'**automazione agentica** tramite [OpenCode](https://opencode.ai) su eventi di Gitea, utilizzando le **Gitea Actions** come runtime di esecuzione.
L'obiettivo è verificare il ciclo completo:
1. Un evento (push, issue aperta, commento su issue o PR, esecuzione manuale) triggera un workflow.
2. Un agente AI analizza la richiesta, produce un piano, lo implementa, lo verifica e apre una Pull Request.
3. Il tutto avviene in modo **autonomo**, con sole reazioni (👀, 🚀, 😕) come feedback — senza commenti che genererebbero loop infiniti.
### Workflow presenti
| Workflow | File | Descrizione |
|---|---|---|
| **Gitea Actions Demo** | `.gitea/workflows/demo.yml` | Workflow dimostrativo su push: mostra le variabili d'ambiente Gitea ed elenca i file. Puramente educativo. |
| **OpenCode Gitea Integration** | `.gitea/workflows/opencode.yml` | Automazione agentica completa: pianifica, implementa e revisiona codice su eventi issue/PR/commento/manuale. |
| **Publish Docker Image** | `.gitea/workflows/publish.yml` | Build e push di un'immagine Docker su tag `v*` o dispatch manuale, con deploy su VPS via SSH. |
</div>
</section>
<!-- Sezione 2: Workflow opencode.yml -->
<section class="section" id="workflow">
<h2>Workflow <code>opencode.yml</code> per filo e per segno</h2>
<div class="section-divider"></div>
<p>Il cuore del repository. Ecco ogni passo del workflow, nell'ordine esatto in cui viene eseguito.</p>
<ol class="step-list">
<li>
<strong>Verifica autorizzazione utente</strong>
<p>Controlla che l'autore dell'evento sia nella whitelist (<code>maria</code>, <code>nicola</code>). Le esecuzioni manuali (<code>workflow_dispatch</code>) saltano questo controllo. Se l'utente non è autorizzato, il job viene interrotto con errore.</p>
</li>
<li>
<strong>Reagisci al comando (👀)</strong>
<p>Aggiunge una reazione "eyes" all'issue o al commento che ha triggerato il workflow. Le reazioni non generano eventi <code>issue_comment</code>, quindi non c'è rischio di auto-trigger o loop infiniti.</p>
</li>
<li>
<strong>Checkout repository</strong>
<p>Clona il repository con <code>fetch-depth: 0</code> (storia completa) tramite <code>actions/checkout@v4</code>.</p>
</li>
<li>
<strong>Installazione OpenCode CLI</strong>
<p>Scarica e installa la CLI di OpenCode via <code>curl -fsSL https://opencode.ai/install | bash</code>. Aggiunge <code>$HOME/.opencode/bin</code> al <code>PATH</code>.</p>
</li>
<li>
<strong>Configura agent reviewer (read-only)</strong>
<p>Crea un agente <code>reviewer</code> con permessi di sola lettura: può solo leggere file ed eseguire comandi (build, lint, test). Non può mai modificare il codice. Il file viene escluso dal tracker tramite <code>.git/info/exclude</code>.</p>
</li>
<li>
<strong>Determina contesto (issue / PR / manuale) e branch di lavoro</strong>
<p>Analizza il tipo di evento:</p>
<ul>
<li><strong>PR</strong> — fa il fetch e checkout del branch della PR.</li>
<li><strong>Issue</strong> — crea un branch <code>opencode-issue-&lt;N&gt;</code> a partire da <code>main</code>.</li>
<li><strong>Manuale</strong> — crea un branch <code>opencode-manual-&lt;run_number&gt;</code>.</li>
</ul>
<p>Genera anche una <code>plan_key</code> univoca per salvare il file di piano.</p>
</li>
<li>
<strong>Raccogli contesto aggiuntivo (diff + commenti, se PR)</strong>
<p>Se si tratta di una Pull Request, scarica il <strong>diff</strong> della PR e i <strong>commenti recenti</strong> per fornire contesto completo all'agente AI.</p>
</li>
<li>
<strong>Pulisci il comando dal trigger</strong>
<p>Rimuove i marcatori <code>/oc</code> e <code>/opencode</code> dal corpo del messaggio, lasciando solo le istruzioni utente da passare all'agente.</p>
</li>
<li>
<strong>Fase 1 — Plan (analisi read-only)</strong>
<p>Eseguita solo per issue (non PR). L'agente <code>plan</code> analizza il codebase e la richiesta, poi produce un piano di lavoro in Markdown con struttura standard (Obiettivo, Task, Acceptance Criteria, Verifica). Il piano viene salvato in <code>issue_plans/</code> e committato.</p>
</li>
<li>
<strong>Fase 2 — Build &amp; Review loop</strong>
<p>Il cuore dell'automazione: un loop che alterna <strong>Build</strong> (implementazione) e <strong>Review</strong> (verifica), fino a <code>$MAX_ITERATIONS</code> (4).</p>
<ul>
<li><strong>BUILD</strong> — L'agente <code>build</code> implementa il piano, modificando i file necessari.</li>
<li><strong>REVIEW</strong> — L'agente <code>reviewer</code> (read-only) verifica se ogni Acceptance Criterion è soddisfatto e produce un <strong>VERDICT</strong>: <code>PASS</code> (loop termina) o <code>FAIL</code> (loop continua col feedback).</li>
</ul>
<p>Se dopo 4 iterazioni il PASS non è raggiunto, le modifiche parziali vengono comunque pushate per revisione umana.</p>
</li>
<li>
<strong>Pusha modifiche e apri/aggiorna la PR</strong>
<p>Commatta e pusha le modifiche sul branch di lavoro. Se si lavora su un'issue (non PR), apre automaticamente una Pull Request verso <code>main</code>. Se la PR esiste già, ne recupera il numero.</p>
</li>
<li>
<strong>Posta la review sulla PR</strong>
<p>Se esiste una PR, posta la review finale dell'agente usando l'API di Gitea. Se il verdetto è <code>PASS</code>, la review è di tipo <code>APPROVE</code>; altrimenti <code>REQUEST_CHANGES</code>. Se Gitea rifiuta (self-review del bot), ripiega su <code>COMMENT</code>.</p>
</li>
<li>
<strong>Reazione finale 🚀 / 😕</strong>
<p>Se il workflow termina con <code>success()</code>, aggiunge una reazione <strong>🚀</strong> all'elemento trigger. In caso di <code>failure()</code>, aggiunge <strong>😕</strong> (confused).</p>
</li>
</ol>
<h3>Diagramma di flusso generale</h3>
<div class="mermaid-container">
<pre class="mermaid">
flowchart LR
A[Evento Trigger] --> B{Autorizzato?}
B -- No --> X[❌ Interrompi]
B -- Sì --> C[👀 Reazione eyes]
C --> D[📦 Checkout]
D --> E[⬇️ Installa OpenCode]
E --> F[🔧 Configura reviewer]
F --> G{Contesto?}
G -- PR --> H1[Fetch & checkout PR]
G -- Issue --> H2[Branch opencode-issue-N]
G -- Manuale --> H3[Branch opencode-manual-RUN]
H1 & H2 & H3 --> I[📋 Raccogli contesto]
I --> J[🧹 Pulisci comando]
J --> K{È issue?}
K -- Sì --> L[📝 Fase Plan]
L --> M
K -- No --> M[🔄 Build & Review loop]
M --> N{VERDICT PASS?}
N -- Sì --> O[✅ Push & PR]
N -- No --> P{Iterazioni &lt; MAX?}
P -- Sì --> M
P -- No --> O
O --> Q[📬 Posta review]
Q --> R[🚀 Reazione finale]
</pre>
</div>
<h3>Diagramma di sequenza Gitea → Runner → OpenCode</h3>
<div class="mermaid-container">
<pre class="mermaid">
sequenceDiagram
participant U as Utente
participant G as Gitea
participant R as Gitea Runner
participant O as OpenCode CLI
participant A as Agenti AI
U->>G: Apre issue/commenta con /oc
G->>R: Triggera workflow
R->>R: Verifica autorizzazione
R->>G: 👀 Reazione eyes
R->>R: Checkout & installa CLI
R->>O: opencode run --agent plan
O->>A: Analisi codebase
A-->>O: Piano Markdown
O-->>R: Piano salvato
loop Build & Review (max 4)
R->>O: opencode run --agent build
O->>A: Implementa piano
A-->>O: Modifiche ai file
O-->>R: Codice modificato
R->>O: opencode run --agent reviewer
O->>A: Verifica criteri
A-->>O: VERDICT PASS/FAIL
O-->>R: Risultato review
alt PASS
R->>R: Esce dal loop
else FAIL
R->>R: Continua iterazione
end
end
R->>G: Push modifiche & PR
R->>G: 🚀 Reazione finale
</pre>
</div>
<h3>Diagramma del loop Build/Review con criterio di uscita VERDICT</h3>
<div class="mermaid-container">
<pre class="mermaid">
flowchart TD
START([🔄 Inizio loop]) --> BUILD[👷 Fase BUILD<br/>Agente implementa il piano]
BUILD --> REVIEW[🔍 Fase REVIEW<br/>Agente verifica criteri]
REVIEW --> DECIDE{VERDICT?}
DECIDE -- PASS ✅ --> EXIT([🏁 Esci dal loop<br/>✅ Successo])
DECIDE -- FAIL ❌ --> CHECK{Iterazioni &lt; MAX?}
CHECK -- Sì --> FEEDBACK[💬 Feedback: criteri insoddisfatti]
FEEDBACK --> BUILD
CHECK -- No --> MAXOUT([⚠️ Raggiunto tetto MAX<br/>Pusha modifiche parziali])
</pre>
</div>
</section>
<!-- Sezione 3: Trigger ed Eventi -->
<section class="section" id="trigger">
<h2>Trigger ed Eventi</h2>
<div class="section-divider"></div>
<div class="md-content" data-md>
Il workflow `opencode.yml` si attiva sui seguenti eventi di Gitea:
| Evento | Tipo | Descrizione | Trigger per `/oc` |
|---|---|---|---|
| `issues` | `opened` | Apertura di una nuova issue | Il corpo della issue contiene `/oc` o `/opencode` |
| `issue_comment` | `created` | Nuovo commento su una issue | Il commento contiene `/oc` o `/opencode` |
| `pull_request_review_comment` | `created` | Nuovo commento su una PR | Il commento contiene `/oc` o `/opencode` |
| `workflow_dispatch` | manuale | Esecuzione manuale da UI/API | Sempre attivo (campo `prompt` richiesto) |
### Filtri di attivazione
Oltre al contenuto del messaggio, il workflow verifica che:
- L'autore **non** sia `opencode-bot` (evita auto-trigger)
- L'autore sia nella **whitelist** (tranne per esecuzione manuale)
- Il corpo del messaggio contenga `/oc` o `/opencode` (tranne per dispatch manuale)
</div>
</section>
<!-- Sezione 4: Autorizzazione e Sicurezza -->
<section class="section" id="sicurezza">
<h2>Autorizzazione e Sicurezza</h2>
<div class="section-divider"></div>
<div class="md-content" data-md>
### Whitelist utenti
Solo gli utenti autorizzati possono invocare l'agente AI:
- `maria`
- `nicola`
Per le esecuzioni manuali (`workflow_dispatch`) il controllo è bypassato.
### Blocco auto-trigger
I commenti pubblicati da `opencode-bot` vengono ignorati: il workflow non risponde ai propri stessi messaggi, prevenendo loop infiniti.
### Reazioni (non commenti)
Il workflow interagisce con issue e PR esclusivamente tramite **reazioni** (👀, 🚀, 😕). Le reazioni non generano eventi `issue_comment`, quindi non possono innescare nuove esecuzioni del workflow.
### Secret utilizzati
| Secret | Descrizione |
|---|---|
| `BOT_GITEA_TOKEN` | Token di accesso per l'API di Gitea (operazioni CRUD su repo, issue, PR) |
| `OPENCODE_ZEN_API_KEY` | API key per il provider OpenAI-compatible di OpenCode |
</div>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Render Markdown via marked.js
document.querySelectorAll('[data-md]').forEach(function(el) {
if (typeof marked !== 'undefined') {
el.innerHTML = marked.parse(el.textContent);
}
});
// Initialize Mermaid
if (typeof mermaid !== 'undefined') {
mermaid.initialize({
startOnLoad: false,
theme: 'default',
themeVariables: {
primaryColor: '#667eea',
secondaryColor: '#764ba2',
tertiaryColor: '#f0f0ff',
primaryTextColor: '#333',
lineColor: '#667eea'
},
flowchart: {
useMaxWidth: true,
htmlLabels: true
},
sequence: {
useMaxWidth: true,
showSequenceNumbers: false
}
});
mermaid.run({ nodes: document.querySelectorAll('.mermaid') });
}
});
</script>
</body>
</html>
issue_plans/opencode-issue-11.md
+38
View File
@@ -0,0 +1,38 @@
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