diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md
index d755dcd..63f79cf 100644
--- a/.planning/ROADMAP.md
+++ b/.planning/ROADMAP.md
@@ -21,7 +21,7 @@
| 13 | 5/5 | Complete | 2026-05-16 |
| 14 | 1/2 | In Progress| |
| 15 | 3/3 | Complete | 2026-05-16 |
-| 16 | Tablo Detail | Restyle tasks, etapes, and files views | DETAIL-01..04 |
+| 16 | 4/4 | Complete | 2026-05-16 |
| 17 | Chat & Planning | Restyle discussion and planning pages | CHAT-UI-01, PLAN-UI-01 |
---
@@ -111,7 +111,7 @@ Plans:
**Mode:** mvp
**Status:** Pending
**Requirements:** DETAIL-01, DETAIL-02, DETAIL-03, DETAIL-04
-**Plans:** 4 plans
+**Plans:** 4/4 plans complete
**Success Criteria:**
1. Tablo detail header uses project-card-top layout with title, avatar, and action controls
2. Task kanban uses tasks-section design: section header with add button, task rows with checkbox and meta
@@ -121,16 +121,16 @@ Plans:
Plans:
**Wave 1**
-- [ ] 16-01-PLAN.md — CSS foundation + icons: append CSS Sections 19–25 to app.css; add download + chat icon cases to UIIcon switch
+- [x] 16-01-PLAN.md — CSS foundation + icons: append CSS Sections 19–25 to app.css; add download + chat icon cases to UIIcon switch
**Wave 2** *(blocked on Wave 1 completion)*
-- [ ] 16-02-PLAN.md — Header + tab nav + overview tab: restyle TabloDetailPage header (project-card-top), metadata row, tab nav (design token classes), move desc to overview tab, remove EtapeStrip call from TasksTabFragment
+- [x] 16-02-PLAN.md — Header + tab nav + overview tab: restyle TabloDetailPage header (project-card-top), metadata row, tab nav (design token classes), move desc to overview tab, remove EtapeStrip call from TasksTabFragment
**Wave 3** *(blocked on Wave 2 completion)*
-- [ ] 16-03-PLAN.md — Kanban + etape grouping: groupTasksByEtape helper, restyled KanbanBoard/Column/TaskCard, EtapeStrip OOB removal, handlers_tasks.go call sites updated
+- [x] 16-03-PLAN.md — Kanban + etape grouping: groupTasksByEtape helper, restyled KanbanBoard/Column/TaskCard, EtapeStrip OOB removal, handlers_tasks.go call sites updated
**Wave 4** *(blocked on Wave 3 completion)*
-- [ ] 16-04-PLAN.md — Files section: @ui.Table, @ui.EmptyState, FileListRow as tr, FileDeleteConfirmFragment as tr, browser verify checkpoint
+- [x] 16-04-PLAN.md — Files section: @ui.Table, @ui.EmptyState, FileListRow as tr, FileDeleteConfirmFragment as tr, browser verify checkpoint
**User-in-loop:** Browser verify checkpoint in Plan 04 — approve visual result before considering the phase complete.
diff --git a/.planning/STATE.md b/.planning/STATE.md
index 462f4ec..3ecd782 100644
--- a/.planning/STATE.md
+++ b/.planning/STATE.md
@@ -3,8 +3,8 @@ gsd_state_version: 1.0
milestone: v3.0
milestone_name: Design System & Visual Polish
status: executing
-last_updated: "2026-05-16T21:30:26.245Z"
-last_activity: 2026-05-16 -- Phase 16 planning complete
+last_updated: "2026-05-16T21:30:58.783Z"
+last_activity: 2026-05-16 -- Phase 16 execution started
progress:
total_phases: 5
completed_phases: 3
@@ -24,14 +24,14 @@ progress:
See: `.planning/PROJECT.md` (updated 2026-05-16)
**Core value:** A user can sign in and run the Tablos workflow — organize work, attach files, discuss, and plan scheduled events — without a JS framework or managed chat provider.
-**Current focus:** Phase 15 — dashboard-tablos
+**Current focus:** Phase 16 — tablo-detail
## Current Position
-Phase: 15 (dashboard-tablos) — EXECUTING
-Plan: 1 of 3
-Status: Ready to execute
-Last activity: 2026-05-16 -- Phase 16 planning complete
+Phase: 16 (tablo-detail) — EXECUTING
+Plan: 1 of 4
+Status: Executing Phase 16
+Last activity: 2026-05-16 -- Phase 16 execution started
## Previous Milestone Status
diff --git a/.planning/config.json b/.planning/config.json
index 4923a36..c91200b 100644
--- a/.planning/config.json
+++ b/.planning/config.json
@@ -28,7 +28,7 @@
"skip_discuss": false,
"code_review": true,
"code_review_depth": "standard",
- "_auto_chain_active": false
+ "_auto_chain_active": true
},
"hooks": {
"context_warnings": true
diff --git a/backend/internal/web/ui/app.css b/backend/internal/web/ui/app.css
index e043484..944aad6 100644
--- a/backend/internal/web/ui/app.css
+++ b/backend/internal/web/ui/app.css
@@ -487,6 +487,18 @@
flex-direction: column;
}
+.task-drag-handle {
+ color: var(--color-text-faint);
+ cursor: grab;
+ flex-shrink: 0;
+ line-height: 1;
+ user-select: none;
+}
+
+.task-drag-handle:active {
+ cursor: grabbing;
+}
+
.task-row {
align-items: center;
border-bottom: 1px solid var(--color-border-muted);
diff --git a/backend/templates/tasks.templ b/backend/templates/tasks.templ
index 808af5f..0d47d97 100644
--- a/backend/templates/tasks.templ
+++ b/backend/templates/tasks.templ
@@ -220,6 +220,7 @@ templ TaskCard(tabloID uuid.UUID, task sqlc.Task, csrfToken string) {
role="button"
aria-label={ "Edit task: " + task.Title }
>
+ ⠿