- html/template sistem: layout, dashboard, column, task-card, task-detail - Dark tema CSS, responsive grid (5→3→2→1 kolona) - HTMX: klik→detalj panel, move dugmad, auto-refresh active kolone - /report/:id za prikaz izveštaja - Slide-in animacija za detalj panel - 16 server testova, 83 ukupno — svi prolaze - T08 premešten u done/ Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
3.8 KiB
3.8 KiB
T09: Dashboard — Kanban board sa taskovima
Kreirao: planer Datum: 2026-02-20 Agent: coder Model: Sonnet Zavisi od: T08
Opis
HTML dashboard sa Kanban prikazom — kolone po stanju (backlog, ready, active, review, done). HTMX za interaktivnost.
Fajlovi za kreiranje
code/web/
├── templates/
│ ├── layout.html ← osnovna struktura (head, body, footer)
│ ├── dashboard.html ← kanban board
│ ├── partials/
│ │ ├── column.html ← jedna kolona (HTMX fragment)
│ │ ├── task-card.html ← kartica taska
│ │ └── task-detail.html ← detalj taska (klik → prikaz sadržaja)
└── static/
└── style.css ← stilovi za dashboard
Izgled
┌─────────────────────────────────────────────────────────┐
│ 🔧 KAOS Dashboard v0.1.7 │
├──────────┬──────────┬──────────┬──────────┬─────────────┤
│ BACKLOG │ READY │ ACTIVE │ REVIEW │ DONE │
│ 2 │ 1 │ - │ - │ 7 │
├──────────┼──────────┼──────────┼──────────┼─────────────┤
│┌────────┐│┌────────┐│ │ │┌───────────┐│
││ T08 │││ T10 ││ │ ││ T01 ✅ ││
││ Server │││ Drag ││ │ ││ Go init ││
││ Sonnet │││ & Drop ││ │ ││ v0.1.1 ││
│└────────┘│└────────┘│ │ │└───────────┘│
│┌────────┐│ │ │ │┌───────────┐│
││ T09 ││ │ │ ││ T02 ✅ ││
││ Dashb. ││ │ │ ││ Loader ││
│└────────┘│ │ │ ││ v0.1.2 ││
│ │ │ │ │└───────────┘│
│ │ │ │ │ ... │
└──────────┴──────────┴──────────┴──────────┴─────────────┘
Kartica taska
Prikazuje:
- ID (T01, T02...)
- Naslov
- Agent + Model
- Tag verzije (ako je done)
- Zavisnosti
Klik na karticu → HTMX učita detalj:
<div class="task-card" hx-get="/task/T01" hx-target="#task-detail">
Task detalj panel
Desna strana ili modal — prikazuje ceo sadržaj task fajla:
- Markdown renderovan kao HTML
- Dugme za premestanje u sledeći folder
- Link do izveštaja (ako postoji)
HTMX interakcije
- Klik na task →
hx-get="/task/{id}"→ prikaz detalja - Dugme "Premesti" →
hx-post="/task/{id}/move?to=ready"→ ažurira kolonu - Auto-refresh →
hx-trigger="every 5s"na active koloni
Pravila
- Go
html/templateza renderovanje - Mobilno responsive
- Poruke na srpskom
- Nema JS osim htmx.min.js
- CSS grid za kolone
Testovi
- GET / → vraća HTML sa svim kolonama
- Proveri da su taskovi u pravim kolonama
- HTMX fragment: GET /task/T01 → vraća HTML fragment
Očekivani izlaz
Otvori http://localhost:8080 → vidi kanban board sa taskovima. Klikni na task → vidi detalj.