# 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:
```html
<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/template` za 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.

---

## Pitanja

---

## Odgovori