T09: Dashboard — Kanban board sa Go templates

- 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>

TASKS/reports/T09-report.md

@@ -0,0 +1,64 @@
+# T09 Izveštaj: Dashboard — Kanban board sa taskovima
+
+**Agent:** coder
+**Model:** Opus
+**Datum:** 2026-02-20
+
+---
+
+## Šta je urađeno
+
+Prebačen dashboard sa inline HTML na Go html/template sistem:
+
+### Kreirani fajlovi
+
+| Fajl | Opis |
+|------|------|
+| `web/templates/layout.html` | Osnovna HTML struktura (head, body, scripts) |
+| `web/templates/dashboard.html` | Kanban board sa 5 kolona |
+| `web/templates/partials/column.html` | Kolona sa auto-refresh za active |
+| `web/templates/partials/task-card.html` | Kartica taska sa HTMX klik |
+| `web/templates/partials/task-detail.html` | Detalj panel sa move dugmadima |
+| `web/static/style.css` | Dark theme, responsive, animacije |
+
+### Izmenjeni fajlovi
+
+| Fajl | Izmena |
+|------|--------|
+| `web/embed.go` | Dodat TemplatesFS embed |
+| `internal/server/render.go` | Prepisan na html/template |
+| `internal/server/server.go` | Dodat /report/:id ruta, hasReport |
+| `internal/server/server_test.go` | 6 novih testova |
+
+### Funkcionalnosti
+
+- Kanban board sa 5 kolona (backlog, ready, active, review, done)
+- Klik na task → slide-in detalj panel (HTMX)
+- Move dugmad: backlog→ready, review→done/ready
+- Auto-refresh active kolone (every 5s)
+- Report link za taskove sa izveštajem
+- Dark tema, responsive (5→3→2→1 kolona)
+- Slide-in animacija za detalj panel
+
+### Testovi — 16/16 PASS (server)
+
+```
+TestAPIGetTasks                    PASS
+TestAPIGetTask                     PASS
+TestAPIGetTask_NotFound            PASS
+TestAPIMoveTask                    PASS
+TestAPIMoveTask_NotFound           PASS
+TestAPIMoveTask_InvalidFolder      PASS
+TestDashboardHTML                  PASS
+TestTaskDetailHTML                 PASS
+TestTaskDetailHTML_NotFound        PASS
+TestHTMLMoveTask                   PASS
+TestDashboardHTML_HasAllColumns    PASS
+TestDashboardHTML_HasHTMXAttributes PASS
+TestDashboardHTML_TasksInCorrectColumns PASS
+TestReport_Exists                  PASS
+TestReport_NotFound                PASS
+TestTaskDetail_HasMoveButtons      PASS
+```
+
+### Ukupno projekat: 83 testova, svi prolaze

TASKS/review/T09.md

@@ -0,0 +1,106 @@
+# 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

code/internal/server/render.go

@@ -1,13 +1,35 @@
 package server
 
 import (
-	"fmt"
+	"bytes"
-	"html"
+	"html/template"
 	"strings"
 
 	"github.com/dal/kaos/internal/supervisor"
+	"github.com/dal/kaos/web"
 )
 
+// columnData holds data for rendering a single kanban column.
+type columnData struct {
+	Name  string
+	Label string
+	Icon  string
+	Count int
+	Tasks []supervisor.Task
+}
+
+// dashboardData holds data for the full dashboard page.
+type dashboardData struct {
+	Columns []columnData
+}
+
+// taskDetailData holds data for the task detail panel.
+type taskDetailData struct {
+	Task      supervisor.Task
+	Content   string
+	HasReport bool
+}
+
 // statusIcons maps folder names to emoji icons.
 var statusIcons = map[string]string{
 	"backlog": "📦",
@@ -20,114 +42,61 @@ var statusIcons = map[string]string{
 // columnOrder defines the display order of columns.
 var columnOrder = []string{"backlog", "ready", "active", "review", "done"}
 
+// templateFuncs provides custom functions for templates.
+var templateFuncs = template.FuncMap{
+	"joinDeps": func(deps []string) string {
+		return strings.Join(deps, ", ")
+	},
+}
+
+// templates holds the parsed template set.
+var templates *template.Template
+
+func init() {
+	templates = template.Must(
+		template.New("").Funcs(templateFuncs).ParseFS(
+			web.TemplatesFS,
+			"templates/layout.html",
+			"templates/dashboard.html",
+			"templates/partials/column.html",
+			"templates/partials/task-card.html",
+			"templates/partials/task-detail.html",
+		),
+	)
+}
+
 // renderDashboard generates the full dashboard HTML page.
 func renderDashboard(columns map[string][]supervisor.Task) string {
-	var b strings.Builder
+	data := dashboardData{}
-
-	b.WriteString(`<!DOCTYPE html>
-<html lang="sr">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>KAOS Dashboard</title>
-<script src="/static/htmx.min.js"></script>
-<style>
-* { margin: 0; padding: 0; box-sizing: border-box; }
-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a2e; color: #eee; }
-.header { padding: 16px 24px; background: #16213e; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #0f3460; }
-.header h1 { font-size: 1.4em; }
-.header .version { color: #888; font-size: 0.9em; }
-.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 16px; min-height: calc(100vh - 60px); }
-.column { background: #16213e; border-radius: 8px; padding: 12px; }
-.column-header { font-weight: bold; padding: 8px; margin-bottom: 8px; border-bottom: 2px solid #0f3460; display: flex; justify-content: space-between; }
-.column-count { background: #0f3460; border-radius: 12px; padding: 2px 8px; font-size: 0.85em; }
-.task-card { background: #1a1a2e; border: 1px solid #333; border-radius: 6px; padding: 10px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.2s; }
-.task-card:hover { border-color: #e94560; }
-.task-id { font-weight: bold; color: #e94560; }
-.task-title { margin-top: 4px; font-size: 0.9em; }
-.task-meta { margin-top: 6px; font-size: 0.75em; color: #888; }
-.task-deps { font-size: 0.75em; color: #666; margin-top: 4px; }
-#task-detail { position: fixed; top: 0; right: 0; width: 400px; height: 100vh; background: #16213e; border-left: 2px solid #0f3460; padding: 20px; overflow-y: auto; display: none; z-index: 10; }
-#task-detail.active { display: block; }
-.detail-close { cursor: pointer; float: right; font-size: 1.2em; color: #888; }
-.detail-close:hover { color: #e94560; }
-.detail-content { white-space: pre-wrap; font-family: monospace; font-size: 0.85em; margin-top: 16px; line-height: 1.5; }
-@media (max-width: 900px) { .board { grid-template-columns: repeat(3, 1fr); } }
-@media (max-width: 600px) { .board { grid-template-columns: 1fr; } }
-</style>
-</head>
-<body>
-<div class="header">
-<h1>🔧 KAOS Dashboard</h1>
-<span class="version">v0.2</span>
-</div>
-<div class="board" id="board">
-`)
-
 	for _, col := range columnOrder {
 		tasks := columns[col]
-		icon := statusIcons[col]
+		data.Columns = append(data.Columns, columnData{
-		b.WriteString(fmt.Sprintf(`<div class="column" id="col-%s" data-folder="%s">`, col, col))
+			Name:  col,
-		b.WriteString(fmt.Sprintf(`<div class="column-header"><span>%s %s</span><span class="column-count">%d</span></div>`,
+			Label: strings.ToUpper(col),
-			icon, strings.ToUpper(col), len(tasks)))
+			Icon:  statusIcons[col],
-
+			Count: len(tasks),
-		for _, t := range tasks {
+			Tasks: tasks,
-			b.WriteString(renderTaskCard(t))
+		})
-		}
-		b.WriteString("</div>\n")
 	}
 
-	b.WriteString(`</div>
+	var buf bytes.Buffer
-<div id="task-detail"></div>
+	if err := templates.ExecuteTemplate(&buf, "layout.html", data); err != nil {
-<script>
+		return "Greška pri renderovanju: " + err.Error()
-document.body.addEventListener('htmx:afterSwap', function(e) {
-  if (e.detail.target.id === 'task-detail') {
-    e.detail.target.classList.add('active');
 	}
-});
+	return buf.String()
-function closeDetail() {
-  document.getElementById('task-detail').classList.remove('active');
-  document.getElementById('task-detail').innerHTML = '';
-}
-</script>
-</body>
-</html>`)
-
-	return b.String()
-}
-
-// renderTaskCard generates HTML for a single task card.
-func renderTaskCard(t supervisor.Task) string {
-	var b strings.Builder
-
-	b.WriteString(fmt.Sprintf(`<div class="task-card" data-id="%s" hx-get="/task/%s" hx-target="#task-detail" hx-swap="innerHTML">`,
-		t.ID, t.ID))
-	b.WriteString(fmt.Sprintf(`<div class="task-id">%s</div>`, html.EscapeString(t.ID)))
-	b.WriteString(fmt.Sprintf(`<div class="task-title">%s</div>`, html.EscapeString(t.Title)))
-	b.WriteString(fmt.Sprintf(`<div class="task-meta">%s · %s</div>`, html.EscapeString(t.Agent), html.EscapeString(t.Model)))
-
-	if len(t.DependsOn) > 0 {
-		b.WriteString(fmt.Sprintf(`<div class="task-deps">Zavisi od: %s</div>`, html.EscapeString(strings.Join(t.DependsOn, ", "))))
-	}
-
-	b.WriteString("</div>\n")
-	return b.String()
 }
 
 // renderTaskDetail generates HTML fragment for task detail panel.
-func renderTaskDetail(t supervisor.Task, content string) string {
+func renderTaskDetail(t supervisor.Task, content string, hasReport bool) string {
-	var b strings.Builder
+	data := taskDetailData{
-
+		Task:      t,
-	b.WriteString(`<span class="detail-close" onclick="closeDetail()">✕</span>`)
+		Content:   content,
-	b.WriteString(fmt.Sprintf(`<h2>%s: %s</h2>`, html.EscapeString(t.ID), html.EscapeString(t.Title)))
+		HasReport: hasReport,
-	b.WriteString(fmt.Sprintf(`<p>Agent: %s · Model: %s · Status: %s</p>`,
-		html.EscapeString(t.Agent), html.EscapeString(t.Model), html.EscapeString(t.Status)))
-
-	if len(t.DependsOn) > 0 {
-		b.WriteString(fmt.Sprintf(`<p>Zavisi od: %s</p>`, html.EscapeString(strings.Join(t.DependsOn, ", "))))
 	}
 
-	b.WriteString(fmt.Sprintf(`<div class="detail-content">%s</div>`, html.EscapeString(content)))
+	var buf bytes.Buffer
-
+	if err := templates.ExecuteTemplate(&buf, "task-detail", data); err != nil {
-	return b.String()
+		return "Greška pri renderovanju: " + err.Error()
+	}
+	return buf.String()
 }

code/internal/server/server.go

@@ -78,6 +78,7 @@ func (s *Server) setupRoutes() {
 	s.Router.GET("/", s.handleDashboard)
 	s.Router.GET("/task/:id", s.handleTaskDetail)
 	s.Router.POST("/task/:id/move", s.handleMoveTask)
+	s.Router.GET("/report/:id", s.handleReport)
 }
 
 // apiGetTasks returns all tasks as JSON.
@@ -182,8 +183,9 @@ func (s *Server) handleTaskDetail(c *gin.Context) {
 	}
 
 	content, _ := os.ReadFile(task.FilePath)
+	hasReport := reportExists(s.Config.TasksDir, id)
 	c.Header("Content-Type", "text/html; charset=utf-8")
-	c.String(http.StatusOK, renderTaskDetail(*task, string(content)))
+	c.String(http.StatusOK, renderTaskDetail(*task, string(content), hasReport))
 }
 
 // handleMoveTask moves a task and returns updated board HTML.
@@ -217,6 +219,21 @@ func (s *Server) handleMoveTask(c *gin.Context) {
 	s.handleDashboard(c)
 }
 
+// handleReport serves a task report file.
+func (s *Server) handleReport(c *gin.Context) {
+	id := strings.ToUpper(c.Param("id"))
+	reportPath := filepath.Join(s.Config.TasksDir, "reports", id+"-report.md")
+
+	content, err := os.ReadFile(reportPath)
+	if err != nil {
+		c.String(http.StatusNotFound, "Izveštaj za %s nije pronađen", id)
+		return
+	}
+
+	c.Header("Content-Type", "text/plain; charset=utf-8")
+	c.String(http.StatusOK, string(content))
+}
+
 // Run starts the HTTP server.
 func (s *Server) Run() error {
 	return s.Router.Run(":" + s.Config.Port)

code/internal/server/server_test.go

@@ -254,6 +254,104 @@ func TestHTMLMoveTask(t *testing.T) {
 	}
 }
 
+func TestDashboardHTML_HasAllColumns(t *testing.T) {
+	srv := setupTestServer(t)
+
+	req := httptest.NewRequest(http.MethodGet, "/", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	body := w.Body.String()
+	for _, col := range []string{"BACKLOG", "READY", "ACTIVE", "REVIEW", "DONE"} {
+		if !containsStr(body, col) {
+			t.Errorf("expected %s column in dashboard", col)
+		}
+	}
+}
+
+func TestDashboardHTML_HasHTMXAttributes(t *testing.T) {
+	srv := setupTestServer(t)
+
+	req := httptest.NewRequest(http.MethodGet, "/", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	body := w.Body.String()
+	if !containsStr(body, "hx-get") {
+		t.Error("expected hx-get attributes in HTML")
+	}
+	if !containsStr(body, "hx-target") {
+		t.Error("expected hx-target attributes in HTML")
+	}
+}
+
+func TestDashboardHTML_TasksInCorrectColumns(t *testing.T) {
+	srv := setupTestServer(t)
+
+	req := httptest.NewRequest(http.MethodGet, "/", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	body := w.Body.String()
+	// T01 should be in done column, T08 in backlog
+	if !containsStr(body, `id="col-done"`) {
+		t.Error("expected col-done in HTML")
+	}
+	if !containsStr(body, `id="col-backlog"`) {
+		t.Error("expected col-backlog in HTML")
+	}
+}
+
+func TestReport_Exists(t *testing.T) {
+	srv := setupTestServer(t)
+
+	// Create a report
+	reportsDir := filepath.Join(srv.Config.TasksDir, "reports")
+	os.MkdirAll(reportsDir, 0755)
+	os.WriteFile(filepath.Join(reportsDir, "T01-report.md"), []byte("# T01 Report\nSve ok."), 0644)
+
+	req := httptest.NewRequest(http.MethodGet, "/report/T01", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d", w.Code)
+	}
+	if !containsStr(w.Body.String(), "T01 Report") {
+		t.Error("expected report content")
+	}
+}
+
+func TestReport_NotFound(t *testing.T) {
+	srv := setupTestServer(t)
+
+	req := httptest.NewRequest(http.MethodGet, "/report/T99", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	if w.Code != http.StatusNotFound {
+		t.Fatalf("expected 404, got %d", w.Code)
+	}
+}
+
+func TestTaskDetail_HasMoveButtons(t *testing.T) {
+	srv := setupTestServer(t)
+
+	// T08 is in backlog, should have "Premesti u Ready" button
+	req := httptest.NewRequest(http.MethodGet, "/task/T08", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d", w.Code)
+	}
+
+	body := w.Body.String()
+	if !containsStr(body, "Ready") {
+		t.Error("expected 'Ready' move button for backlog task")
+	}
+}
+
 func containsStr(s, substr string) bool {
 	return len(s) >= len(substr) && findStr(s, substr)
 }

code/web/embed.go

@@ -1,4 +1,4 @@
-// Package web embeds static assets for the KAOS dashboard.
+// Package web embeds static assets and templates for the KAOS dashboard.
 package web
 
 import "embed"
@@ -7,3 +7,8 @@ import "embed"
 //
 //go:embed static/*
 var StaticFS embed.FS
+
+// TemplatesFS contains embedded HTML templates.
+//
+//go:embed templates/*.html templates/partials/*.html
+var TemplatesFS embed.FS

code/web/static/style.css

@@ -0,0 +1,172 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #1a1a2e;
+  color: #eee;
+}
+
+.header {
+  padding: 16px 24px;
+  background: #16213e;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #0f3460;
+}
+
+.header h1 { font-size: 1.4em; }
+.header .version { color: #888; font-size: 0.9em; }
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+  padding: 16px;
+  min-height: calc(100vh - 60px);
+}
+
+.column {
+  background: #16213e;
+  border-radius: 8px;
+  padding: 12px;
+  min-height: 200px;
+}
+
+.column-header {
+  font-weight: bold;
+  padding: 8px;
+  margin-bottom: 8px;
+  border-bottom: 2px solid #0f3460;
+  display: flex;
+  justify-content: space-between;
+}
+
+.column-count {
+  background: #0f3460;
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 0.85em;
+}
+
+.task-card {
+  background: #1a1a2e;
+  border: 1px solid #333;
+  border-radius: 6px;
+  padding: 10px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.1s;
+}
+
+.task-card:hover {
+  border-color: #e94560;
+  transform: translateY(-1px);
+}
+
+.task-id {
+  font-weight: bold;
+  color: #e94560;
+}
+
+.task-title {
+  margin-top: 4px;
+  font-size: 0.9em;
+}
+
+.task-meta {
+  margin-top: 6px;
+  font-size: 0.75em;
+  color: #888;
+}
+
+.task-deps {
+  font-size: 0.75em;
+  color: #666;
+  margin-top: 4px;
+}
+
+/* Task detail panel */
+#task-detail {
+  position: fixed;
+  top: 0;
+  right: -420px;
+  width: 420px;
+  height: 100vh;
+  background: #16213e;
+  border-left: 2px solid #0f3460;
+  padding: 20px;
+  overflow-y: auto;
+  z-index: 10;
+  transition: right 0.3s ease;
+}
+
+#task-detail.active {
+  right: 0;
+}
+
+.detail-close {
+  cursor: pointer;
+  float: right;
+  font-size: 1.2em;
+  color: #888;
+  padding: 4px 8px;
+}
+
+.detail-close:hover { color: #e94560; }
+
+.detail-meta { margin-top: 12px; font-size: 0.9em; color: #aaa; }
+.detail-meta p { margin-bottom: 4px; }
+
+.detail-actions {
+  margin-top: 16px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: 1px solid #333;
+  background: #1a1a2e;
+  color: #eee;
+  cursor: pointer;
+  font-size: 0.85em;
+  text-decoration: none;
+  transition: background 0.2s;
+}
+
+.btn:hover { background: #0f3460; }
+
+.btn-move { border-color: #e94560; }
+.btn-success { border-color: #4ecca3; color: #4ecca3; }
+.btn-success:hover { background: #4ecca3; color: #1a1a2e; }
+
+.detail-content {
+  white-space: pre-wrap;
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+  font-size: 0.8em;
+  margin-top: 16px;
+  line-height: 1.6;
+  padding: 12px;
+  background: #111;
+  border-radius: 6px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+/* Responsive */
+@media (max-width: 1100px) {
+  .board { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (max-width: 700px) {
+  .board { grid-template-columns: repeat(2, 1fr); }
+  #task-detail { width: 100%; right: -100%; }
+}
+
+@media (max-width: 500px) {
+  .board { grid-template-columns: 1fr; }
+}

code/web/templates/dashboard.html

@@ -0,0 +1,7 @@
+{{define "content"}}
+<div class="board" id="board">
+  {{range .Columns}}
+  {{template "column" .}}
+  {{end}}
+</div>
+{{end}}

code/web/templates/layout.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="sr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>KAOS Dashboard</title>
+<link rel="stylesheet" href="/static/style.css">
+<script src="/static/htmx.min.js"></script>
+</head>
+<body>
+<div class="header">
+  <h1>🔧 KAOS Dashboard</h1>
+  <span class="version">v0.2</span>
+</div>
+{{block "content" .}}{{end}}
+<div id="task-detail"></div>
+<script>
+document.body.addEventListener('htmx:afterSwap', function(e) {
+  if (e.detail.target.id === 'task-detail') {
+    e.detail.target.classList.add('active');
+  }
+});
+function closeDetail() {
+  var el = document.getElementById('task-detail');
+  el.classList.remove('active');
+  el.innerHTML = '';
+}
+</script>
+</body>
+</html>

code/web/templates/partials/column.html

@@ -0,0 +1,12 @@
+{{define "column"}}
+<div class="column" id="col-{{.Name}}" data-folder="{{.Name}}"
+     {{if eq .Name "active"}}hx-get="/" hx-trigger="every 5s" hx-select="#col-active" hx-target="#col-active" hx-swap="outerHTML"{{end}}>
+  <div class="column-header">
+    <span>{{.Icon}} {{.Label}}</span>
+    <span class="column-count">{{.Count}}</span>
+  </div>
+  {{range .Tasks}}
+  {{template "task-card" .}}
+  {{end}}
+</div>
+{{end}}

code/web/templates/partials/task-card.html

@@ -0,0 +1,10 @@
+{{define "task-card"}}
+<div class="task-card" data-id="{{.ID}}" hx-get="/task/{{.ID}}" hx-target="#task-detail" hx-swap="innerHTML">
+  <div class="task-id">{{.ID}}</div>
+  <div class="task-title">{{.Title}}</div>
+  <div class="task-meta">{{.Agent}} · {{.Model}}</div>
+  {{if .DependsOn}}
+  <div class="task-deps">Zavisi od: {{joinDeps .DependsOn}}</div>
+  {{end}}
+</div>
+{{end}}

code/web/templates/partials/task-detail.html

@@ -0,0 +1,25 @@
+{{define "task-detail"}}
+<span class="detail-close" onclick="closeDetail()">✕</span>
+<h2>{{.Task.ID}}: {{.Task.Title}}</h2>
+<div class="detail-meta">
+  <p><strong>Agent:</strong> {{.Task.Agent}} · <strong>Model:</strong> {{.Task.Model}} · <strong>Status:</strong> {{.Task.Status}}</p>
+  {{if .Task.DependsOn}}
+  <p><strong>Zavisi od:</strong> {{joinDeps .Task.DependsOn}}</p>
+  {{end}}
+</div>
+{{if .HasReport}}
+<div class="detail-actions">
+  <a href="/report/{{.Task.ID}}" class="btn" target="_blank">📝 Izveštaj</a>
+</div>
+{{end}}
+<div class="detail-actions">
+  {{if eq .Task.Status "backlog"}}
+  <button class="btn btn-move" hx-post="/task/{{.Task.ID}}/move?to=ready" hx-target="#board" hx-swap="outerHTML" onclick="closeDetail()">📋 Premesti u Ready</button>
+  {{end}}
+  {{if eq .Task.Status "review"}}
+  <button class="btn btn-move btn-success" hx-post="/task/{{.Task.ID}}/move?to=done" hx-target="#board" hx-swap="outerHTML" onclick="closeDetail()">✅ Odobri (Done)</button>
+  <button class="btn btn-move" hx-post="/task/{{.Task.ID}}/move?to=ready" hx-target="#board" hx-swap="outerHTML" onclick="closeDetail()">🔄 Vrati u Ready</button>
+  {{end}}
+</div>
+<div class="detail-content">{{.Content}}</div>
+{{end}}