T10: Drag & Drop — premesti task prevlačenjem

- Sortable.js na Kanban board sa drag & drop
- Server-side validacija: allowedMoves mapa, isMoveAllowed()
- Zabranjeni potezi vraćaju 403 (ready→active, active→review)
- Toast notifikacije (zeleni uspeh, crveni greška)
- Ghost/chosen/drag CSS animacije
- Board auto-refresh posle svakog poteza
- 7 novih testova, 90 ukupno — svi prolaze
- T09 premešten u done/

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

TASKS/ready/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

TASKS/ready/T10.md

@@ -0,0 +1,90 @@
+# T10: Drag & Drop — premesti task prevlačenjem
+
+**Kreirao:** planer
+**Datum:** 2026-02-20
+**Agent:** coder
+**Model:** Sonnet
+**Zavisi od:** T09
+
+---
+
+## Opis
+
+Dodaj Sortable.js na kanban board — prevuci task iz jedne kolone
+u drugu. Na drop, HTMX pošalje POST i Go premesti fajl.
+
+## Fajlovi za izmenu
+
+```
+code/web/
+├── templates/
+│   ├── dashboard.html         ← dodaj Sortable inicijalizaciju
+│   └── partials/
+│       └── column.html        ← dodaj sortable atribute
+└── static/
+    └── style.css              ← drag stilovi (ghost, placeholder)
+```
+
+## Kako radi
+
+```html
+<div class="column" id="col-ready" data-folder="ready">
+  <div class="task-card" data-id="T08">...</div>
+</div>
+
+<script>
+document.querySelectorAll('.column').forEach(col => {
+  new Sortable(col, {
+    group: 'tasks',
+    animation: 150,
+    onEnd: function(evt) {
+      const taskId = evt.item.dataset.id;
+      const toFolder = evt.to.dataset.folder;
+      htmx.ajax('POST', `/task/${taskId}/move?to=${toFolder}`, {
+        target: '#board',
+        swap: 'outerHTML'
+      });
+    }
+  });
+});
+</script>
+```
+
+## Pravila premestanja
+
+Dozvoljena kretanja:
+- backlog → ready (operater odobri)
+- ready → backlog (operater povuče nazad)
+- review → done (operater odobri)
+- review → ready (operater vrati na doradu)
+
+Zabranjena kretanja (agent radi ovo, ne operater):
+- ready → active (samo agent)
+- active → review (samo agent)
+
+Server validira i odbije nedozvoljene poteze sa porukom.
+
+## Vizuelni feedback
+
+- Drag: kartica postaje poluprozirna
+- Drop zona: highlight kad se kartica prevlači iznad
+- Uspešan drop: zeleni flash
+- Neuspešan drop: crveni flash + kartica se vrati
+
+## Testovi
+
+- Premesti T08 iz backlog u ready → fajl premešten, board ažuriran
+- Pokušaj premesti u active → server odbije, kartica se vrati
+- Drag & drop ne kvari postojeći klik za detalj
+
+## Očekivani izlaz
+
+Prevuci task iz kolone u kolonu. Server premesti fajl. Board se ažurira.
+
+---
+
+## Pitanja
+
+---
+
+## Odgovori

TASKS/reports/T10-report.md

@@ -0,0 +1,57 @@
+# T10 Izveštaj: Drag & Drop — premesti task prevlačenjem
+
+**Agent:** coder
+**Model:** Opus
+**Datum:** 2026-02-20
+
+---
+
+## Šta je urađeno
+
+Dodat Sortable.js drag & drop na Kanban board sa server-side validacijom:
+
+### Izmenjeni fajlovi
+
+| Fajl | Izmena |
+|------|--------|
+| `web/templates/layout.html` | Sortable.js script, initSortable(), toast notifikacije |
+| `web/templates/partials/column.html` | column-tasks div sa data-folder atributom |
+| `web/static/style.css` | Ghost, chosen, drag stilovi, toast, flash animacije |
+| `internal/server/server.go` | allowedMoves mapa, isMoveAllowed(), 403 za zabranjene poteze |
+| `internal/server/server_test.go` | 7 novih testova za validaciju i D&D |
+
+### Pravila premještanja (server validira)
+
+| Dozvoljeno | Zabranjeno |
+|-----------|------------|
+| backlog → ready | ready → active (samo agent) |
+| ready → backlog | active → review (samo agent) |
+| review → done | backlog → done |
+| review → ready | backlog → active |
+| done → review | done → backlog |
+
+### Vizuelni feedback
+
+- Ghost: poluprozirna kartica sa dashed borderom
+- Chosen: shadow efekat
+- Drag: blaga rotacija
+- Toast: zeleni za uspeh, crveni za grešku
+- Board se automatski osvežava posle svakog poteza
+
+### Testovi — 23/23 PASS (server)
+
+Novi testovi:
+```
+TestAPIMoveTask_ForbiddenToActive       PASS
+TestAPIMoveTask_ForbiddenActiveToReview PASS
+TestAPIMoveTask_AllowedBacklogToReady   PASS
+TestAPIMoveTask_AllowedReviewToDone     PASS
+TestDashboardHTML_HasSortableScript     PASS
+TestDashboardHTML_HasDataFolderAttributes PASS
+TestIsMoveAllowed                       PASS
+```
+
+### Ukupno projekat: 90 testova, svi prolaze
+
+- `go vet ./...` — čist
+- `go build ./...` — prolazi

TASKS/review/T10.md

@@ -0,0 +1,90 @@
+# T10: Drag & Drop — premesti task prevlačenjem
+
+**Kreirao:** planer
+**Datum:** 2026-02-20
+**Agent:** coder
+**Model:** Sonnet
+**Zavisi od:** T09
+
+---
+
+## Opis
+
+Dodaj Sortable.js na kanban board — prevuci task iz jedne kolone
+u drugu. Na drop, HTMX pošalje POST i Go premesti fajl.
+
+## Fajlovi za izmenu
+
+```
+code/web/
+├── templates/
+│   ├── dashboard.html         ← dodaj Sortable inicijalizaciju
+│   └── partials/
+│       └── column.html        ← dodaj sortable atribute
+└── static/
+    └── style.css              ← drag stilovi (ghost, placeholder)
+```
+
+## Kako radi
+
+```html
+<div class="column" id="col-ready" data-folder="ready">
+  <div class="task-card" data-id="T08">...</div>
+</div>
+
+<script>
+document.querySelectorAll('.column').forEach(col => {
+  new Sortable(col, {
+    group: 'tasks',
+    animation: 150,
+    onEnd: function(evt) {
+      const taskId = evt.item.dataset.id;
+      const toFolder = evt.to.dataset.folder;
+      htmx.ajax('POST', `/task/${taskId}/move?to=${toFolder}`, {
+        target: '#board',
+        swap: 'outerHTML'
+      });
+    }
+  });
+});
+</script>
+```
+
+## Pravila premestanja
+
+Dozvoljena kretanja:
+- backlog → ready (operater odobri)
+- ready → backlog (operater povuče nazad)
+- review → done (operater odobri)
+- review → ready (operater vrati na doradu)
+
+Zabranjena kretanja (agent radi ovo, ne operater):
+- ready → active (samo agent)
+- active → review (samo agent)
+
+Server validira i odbije nedozvoljene poteze sa porukom.
+
+## Vizuelni feedback
+
+- Drag: kartica postaje poluprozirna
+- Drop zona: highlight kad se kartica prevlači iznad
+- Uspešan drop: zeleni flash
+- Neuspešan drop: crveni flash + kartica se vrati
+
+## Testovi
+
+- Premesti T08 iz backlog u ready → fajl premešten, board ažuriran
+- Pokušaj premesti u active → server odbije, kartica se vrati
+- Drag & drop ne kvari postojeći klik za detalj
+
+## Očekivani izlaz
+
+Prevuci task iz kolone u kolonu. Server premesti fajl. Board se ažurira.
+
+---
+
+## Pitanja
+
+---
+
+## Odgovori

code/internal/server/server.go

@@ -39,7 +39,7 @@ type taskDetailResponse struct {
 	Content string `json:"content"`
 }
 
-// validMoveTargets defines allowed destination folders for manual moves.
+// validFolders defines all known task folders.
 var validFolders = map[string]bool{
 	"backlog": true,
 	"ready":   true,
@@ -48,6 +48,15 @@ var validFolders = map[string]bool{
 	"done":    true,
 }
 
+// allowedMoves defines which folder transitions the operator can make.
+// Agent-only transitions (ready→active, active→review) are forbidden.
+var allowedMoves = map[string]map[string]bool{
+	"backlog": {"ready": true},
+	"ready":   {"backlog": true},
+	"review":  {"done": true, "ready": true},
+	"done":    {"review": true},
+}
+
 // New creates a new Server with all routes configured.
 func New(cfg *config.Config) *Server {
 	gin.SetMode(gin.ReleaseMode)
@@ -145,6 +154,13 @@ func (s *Server) apiMoveTask(c *gin.Context) {
 		return
 	}
 
+	if !isMoveAllowed(task.Status, toFolder) {
+		c.JSON(http.StatusForbidden, gin.H{
+			"error": "premještanje " + task.Status + " → " + toFolder + " nije dozvoljeno",
+		})
+		return
+	}
+
 	if err := supervisor.MoveTask(s.Config.TasksDir, id, task.Status, toFolder); err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
 		return
@@ -210,6 +226,11 @@ func (s *Server) handleMoveTask(c *gin.Context) {
 		return
 	}
 
+	if !isMoveAllowed(task.Status, toFolder) {
+		c.String(http.StatusForbidden, "Premještanje %s → %s nije dozvoljeno", task.Status, toFolder)
+		return
+	}
+
 	if err := supervisor.MoveTask(s.Config.TasksDir, id, task.Status, toFolder); err != nil {
 		c.String(http.StatusInternalServerError, "Greška: %v", err)
 		return
@@ -261,6 +282,18 @@ func reportExists(tasksDir, taskID string) bool {
 	return err == nil
 }
 
+// isMoveAllowed checks if a manual move from one folder to another is permitted.
+func isMoveAllowed(from, to string) bool {
+	if from == to {
+		return false
+	}
+	targets, ok := allowedMoves[from]
+	if !ok {
+		return false
+	}
+	return targets[to]
+}
+
 func toTaskResponse(t supervisor.Task) taskResponse {
 	deps := t.DependsOn
 	if deps == nil {

code/internal/server/server_test.go

@@ -352,6 +352,132 @@ func TestTaskDetail_HasMoveButtons(t *testing.T) {
 	}
 }
 
+func TestAPIMoveTask_ForbiddenToActive(t *testing.T) {
+	srv := setupTestServer(t)
+
+	// Put T08 in ready first
+	os.Rename(
+		filepath.Join(srv.Config.TasksDir, "backlog", "T08.md"),
+		filepath.Join(srv.Config.TasksDir, "ready", "T08.md"),
+	)
+
+	// Try to move ready → active (agent-only)
+	req := httptest.NewRequest(http.MethodPost, "/api/task/T08/move?to=active", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	if w.Code != http.StatusForbidden {
+		t.Fatalf("expected 403 for ready→active, got %d: %s", w.Code, w.Body.String())
+	}
+}
+
+func TestAPIMoveTask_ForbiddenActiveToReview(t *testing.T) {
+	srv := setupTestServer(t)
+
+	// Put T08 in active
+	os.Rename(
+		filepath.Join(srv.Config.TasksDir, "backlog", "T08.md"),
+		filepath.Join(srv.Config.TasksDir, "active", "T08.md"),
+	)
+
+	// Try to move active → review (agent-only)
+	req := httptest.NewRequest(http.MethodPost, "/api/task/T08/move?to=review", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	if w.Code != http.StatusForbidden {
+		t.Fatalf("expected 403 for active→review, got %d: %s", w.Code, w.Body.String())
+	}
+}
+
+func TestAPIMoveTask_AllowedBacklogToReady(t *testing.T) {
+	srv := setupTestServer(t)
+
+	req := httptest.NewRequest(http.MethodPost, "/api/task/T08/move?to=ready", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200 for backlog→ready, got %d: %s", w.Code, w.Body.String())
+	}
+}
+
+func TestAPIMoveTask_AllowedReviewToDone(t *testing.T) {
+	srv := setupTestServer(t)
+
+	// Put T08 in review
+	os.Rename(
+		filepath.Join(srv.Config.TasksDir, "backlog", "T08.md"),
+		filepath.Join(srv.Config.TasksDir, "review", "T08.md"),
+	)
+
+	req := httptest.NewRequest(http.MethodPost, "/api/task/T08/move?to=done", nil)
+	w := httptest.NewRecorder()
+	srv.Router.ServeHTTP(w, req)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200 for review→done, got %d: %s", w.Code, w.Body.String())
+	}
+}
+
+func TestDashboardHTML_HasSortableScript(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, "sortable.min.js") {
+		t.Error("expected sortable.min.js script tag")
+	}
+	if !containsStr(body, "initSortable") {
+		t.Error("expected initSortable function")
+	}
+}
+
+func TestDashboardHTML_HasDataFolderAttributes(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, `data-folder="backlog"`) {
+		t.Error("expected data-folder attribute on column-tasks")
+	}
+	if !containsStr(body, `data-folder="ready"`) {
+		t.Error("expected data-folder=ready attribute")
+	}
+}
+
+func TestIsMoveAllowed(t *testing.T) {
+	tests := []struct {
+		from, to string
+		allowed  bool
+	}{
+		{"backlog", "ready", true},
+		{"ready", "backlog", true},
+		{"review", "done", true},
+		{"review", "ready", true},
+		{"done", "review", true},
+		{"ready", "active", false},
+		{"active", "review", false},
+		{"backlog", "done", false},
+		{"backlog", "active", false},
+		{"done", "backlog", false},
+		{"ready", "ready", false},
+	}
+
+	for _, tt := range tests {
+		got := isMoveAllowed(tt.from, tt.to)
+		if got != tt.allowed {
+			t.Errorf("isMoveAllowed(%s, %s) = %v, want %v", tt.from, tt.to, got, tt.allowed)
+		}
+	}
+}
+
 func containsStr(s, substr string) bool {
 	return len(s) >= len(substr) && findStr(s, substr)
 }

code/web/static/style.css

@@ -157,6 +157,75 @@ body {
   overflow-y: auto;
 }
 
+/* Sortable column-tasks container */
+.column-tasks {
+  min-height: 50px;
+}
+
+/* Drag & Drop styles */
+.task-ghost {
+  opacity: 0.4;
+  border: 2px dashed #e94560;
+  background: #0f3460;
+}
+
+.task-chosen {
+  box-shadow: 0 4px 16px rgba(233, 69, 96, 0.3);
+}
+
+.task-drag {
+  opacity: 0.9;
+  transform: rotate(2deg);
+}
+
+/* Drop zone highlight */
+.column-tasks.sortable-drag-over {
+  background: rgba(15, 52, 96, 0.3);
+  border-radius: 6px;
+}
+
+/* Flash animations */
+@keyframes flash-success {
+  0% { background: #4ecca3; }
+  100% { background: #1a1a2e; }
+}
+
+@keyframes flash-error {
+  0% { background: #e94560; }
+  100% { background: #1a1a2e; }
+}
+
+.flash-success { animation: flash-success 0.5s ease; }
+.flash-error { animation: flash-error 0.5s ease; }
+
+/* Toast notifications */
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%) translateY(100px);
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 0.9em;
+  z-index: 100;
+  transition: transform 0.3s ease;
+  pointer-events: none;
+}
+
+.toast-show {
+  transform: translateX(-50%) translateY(0);
+}
+
+.toast-success {
+  background: #4ecca3;
+  color: #1a1a2e;
+}
+
+.toast-error {
+  background: #e94560;
+  color: #fff;
+}
+
 /* Responsive */
 @media (max-width: 1100px) {
   .board { grid-template-columns: repeat(3, 1fr); }

code/web/templates/layout.html

@@ -6,6 +6,7 @@
 <title>KAOS Dashboard</title>
 <link rel="stylesheet" href="/static/style.css">
 <script src="/static/htmx.min.js"></script>
+<script src="/static/sortable.min.js"></script>
 </head>
 <body>
 <div class="header">
@@ -14,17 +15,75 @@
 </div>
 {{block "content" .}}{{end}}
 <div id="task-detail"></div>
+<div id="toast" class="toast"></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 = '';
 }
+
+function showToast(msg, type) {
+  var toast = document.getElementById('toast');
+  toast.textContent = msg;
+  toast.className = 'toast toast-' + type + ' toast-show';
+  setTimeout(function() {
+    toast.className = 'toast';
+  }, 2000);
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  initSortable();
+});
+
+document.body.addEventListener('htmx:afterSwap', function(e) {
+  if (e.detail.target.id === 'board') {
+    initSortable();
+  }
+});
+
+function initSortable() {
+  document.querySelectorAll('.column-tasks').forEach(function(col) {
+    new Sortable(col, {
+      group: 'tasks',
+      animation: 150,
+      ghostClass: 'task-ghost',
+      chosenClass: 'task-chosen',
+      dragClass: 'task-drag',
+      filter: '.column-header',
+      onEnd: function(evt) {
+        var taskId = evt.item.dataset.id;
+        var toFolder = evt.to.dataset.folder;
+        var fromFolder = evt.from.dataset.folder;
+
+        if (fromFolder === toFolder) return;
+
+        fetch('/api/task/' + taskId + '/move?to=' + toFolder, {
+          method: 'POST'
+        })
+        .then(function(resp) {
+          if (!resp.ok) {
+            return resp.json().then(function(data) {
+              throw new Error(data.error || 'Greška');
+            });
+          }
+          showToast(taskId + ' → ' + toFolder, 'success');
+          htmx.ajax('GET', '/', {target: '#board', swap: 'outerHTML', select: '#board'});
+        })
+        .catch(function(err) {
+          showToast(err.message, 'error');
+          htmx.ajax('GET', '/', {target: '#board', swap: 'outerHTML', select: '#board'});
+        });
+      }
+    });
+  });
+}
 </script>
 </body>
 </html>

code/web/templates/partials/column.html

@@ -1,12 +1,14 @@
 {{define "column"}}
-<div class="column" id="col-{{.Name}}" data-folder="{{.Name}}"
+<div class="column" id="col-{{.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>
+  <div class="column-tasks" data-folder="{{.Name}}">
     {{range .Tasks}}
     {{template "task-card" .}}
     {{end}}
   </div>
+</div>
 {{end}}