diff --git a/TASKS/review/T08.md b/TASKS/done/T08.md similarity index 100% rename from TASKS/review/T08.md rename to TASKS/done/T08.md diff --git a/TASKS/reports/T09-report.md b/TASKS/reports/T09-report.md new file mode 100644 index 0000000..6285a23 --- /dev/null +++ b/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 diff --git a/TASKS/review/T09.md b/TASKS/review/T09.md new file mode 100644 index 0000000..8103e1f --- /dev/null +++ b/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 +
+``` + +## 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 diff --git a/code/internal/server/render.go b/code/internal/server/render.go index 21f812a..95ff9d5 100644 --- a/code/internal/server/render.go +++ b/code/internal/server/render.go @@ -1,13 +1,35 @@ package server import ( - "fmt" - "html" + "bytes" + "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 - - b.WriteString(` - - - - -KAOS Dashboard - - - - -
-

🔧 KAOS Dashboard

-v0.2 -
-
-`) - + data := dashboardData{} for _, col := range columnOrder { tasks := columns[col] - icon := statusIcons[col] - b.WriteString(fmt.Sprintf(`
`, col, col)) - b.WriteString(fmt.Sprintf(`
%s %s%d
`, - icon, strings.ToUpper(col), len(tasks))) - - for _, t := range tasks { - b.WriteString(renderTaskCard(t)) - } - b.WriteString("
\n") + data.Columns = append(data.Columns, columnData{ + Name: col, + Label: strings.ToUpper(col), + Icon: statusIcons[col], + Count: len(tasks), + Tasks: tasks, + }) } - b.WriteString(`
-
- - -`) - - 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(`
`, - t.ID, t.ID)) - b.WriteString(fmt.Sprintf(`
%s
`, html.EscapeString(t.ID))) - b.WriteString(fmt.Sprintf(`
%s
`, html.EscapeString(t.Title))) - b.WriteString(fmt.Sprintf(`
%s · %s
`, html.EscapeString(t.Agent), html.EscapeString(t.Model))) - - if len(t.DependsOn) > 0 { - b.WriteString(fmt.Sprintf(`
Zavisi od: %s
`, html.EscapeString(strings.Join(t.DependsOn, ", ")))) + var buf bytes.Buffer + if err := templates.ExecuteTemplate(&buf, "layout.html", data); err != nil { + return "Greška pri renderovanju: " + err.Error() } - - b.WriteString("
\n") - return b.String() + return buf.String() } // renderTaskDetail generates HTML fragment for task detail panel. -func renderTaskDetail(t supervisor.Task, content string) string { - var b strings.Builder - - b.WriteString(`✕`) - b.WriteString(fmt.Sprintf(`

%s: %s

`, html.EscapeString(t.ID), html.EscapeString(t.Title))) - b.WriteString(fmt.Sprintf(`

Agent: %s · Model: %s · Status: %s

`, - html.EscapeString(t.Agent), html.EscapeString(t.Model), html.EscapeString(t.Status))) - - if len(t.DependsOn) > 0 { - b.WriteString(fmt.Sprintf(`

Zavisi od: %s

`, html.EscapeString(strings.Join(t.DependsOn, ", ")))) +func renderTaskDetail(t supervisor.Task, content string, hasReport bool) string { + data := taskDetailData{ + Task: t, + Content: content, + HasReport: hasReport, } - b.WriteString(fmt.Sprintf(`
%s
`, html.EscapeString(content))) - - return b.String() + var buf bytes.Buffer + if err := templates.ExecuteTemplate(&buf, "task-detail", data); err != nil { + return "Greška pri renderovanju: " + err.Error() + } + return buf.String() } diff --git a/code/internal/server/server.go b/code/internal/server/server.go index 73f6f20..bc6dffa 100644 --- a/code/internal/server/server.go +++ b/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) diff --git a/code/internal/server/server_test.go b/code/internal/server/server_test.go index 1a9cb06..003b333 100644 --- a/code/internal/server/server_test.go +++ b/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) } diff --git a/code/web/embed.go b/code/web/embed.go index b5fcbf0..d248250 100644 --- a/code/web/embed.go +++ b/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 diff --git a/code/web/static/style.css b/code/web/static/style.css new file mode 100644 index 0000000..3e5bd47 --- /dev/null +++ b/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; } +} diff --git a/code/web/templates/dashboard.html b/code/web/templates/dashboard.html new file mode 100644 index 0000000..56e178c --- /dev/null +++ b/code/web/templates/dashboard.html @@ -0,0 +1,7 @@ +{{define "content"}} +
+ {{range .Columns}} + {{template "column" .}} + {{end}} +
+{{end}} diff --git a/code/web/templates/layout.html b/code/web/templates/layout.html new file mode 100644 index 0000000..1abb807 --- /dev/null +++ b/code/web/templates/layout.html @@ -0,0 +1,30 @@ + + + + + +KAOS Dashboard + + + + +
+

🔧 KAOS Dashboard

+ v0.2 +
+{{block "content" .}}{{end}} +
+ + + diff --git a/code/web/templates/partials/column.html b/code/web/templates/partials/column.html new file mode 100644 index 0000000..7baa4c6 --- /dev/null +++ b/code/web/templates/partials/column.html @@ -0,0 +1,12 @@ +{{define "column"}} +
+
+ {{.Icon}} {{.Label}} + {{.Count}} +
+ {{range .Tasks}} + {{template "task-card" .}} + {{end}} +
+{{end}} diff --git a/code/web/templates/partials/task-card.html b/code/web/templates/partials/task-card.html new file mode 100644 index 0000000..0f7be61 --- /dev/null +++ b/code/web/templates/partials/task-card.html @@ -0,0 +1,10 @@ +{{define "task-card"}} +
+
{{.ID}}
+
{{.Title}}
+
{{.Agent}} · {{.Model}}
+ {{if .DependsOn}} +
Zavisi od: {{joinDeps .DependsOn}}
+ {{end}} +
+{{end}} diff --git a/code/web/templates/partials/task-detail.html b/code/web/templates/partials/task-detail.html new file mode 100644 index 0000000..7837f6e --- /dev/null +++ b/code/web/templates/partials/task-detail.html @@ -0,0 +1,25 @@ +{{define "task-detail"}} +✕ +

{{.Task.ID}}: {{.Task.Title}}

+
+

Agent: {{.Task.Agent}} · Model: {{.Task.Model}} · Status: {{.Task.Status}}

+ {{if .Task.DependsOn}} +

Zavisi od: {{joinDeps .Task.DependsOn}}

+ {{end}} +
+{{if .HasReport}} +
+ 📝 Izveštaj +
+{{end}} +
+ {{if eq .Task.Status "backlog"}} + + {{end}} + {{if eq .Task.Status "review"}} + + + {{end}} +
+
{{.Content}}
+{{end}}