arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 7

docs(phase-04): complete phase execution — tasks kanban

Browse source 
7/7 TASK requirements verified. Human browser verification done in
plan 04-04 checkpoint (badge count + DnD bugs fixed before approval).

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-05-15 10:08:02 +02:00
parent 06bbb49a7f
commit 879f7b1161
No known key found for this signature in database
2 changed files with 180 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.planning/STATE.md
View file

@ -2,14 +2,14 @@
gsd_state_version: 1.0
milestone: v1.0
milestone_name: milestone
status: ready_to_execute
status: ready_to_plan
last_updated: "2026-05-15T07:39:54.918Z"
progress:
total_phases: 7
completed_phases: 3
completed_phases: 4
total_plans: 18
completed_plans: 17
percent: 94
percent: 57
---
# STATE

177
.planning/phases/04-tasks-kanban/04-VERIFICATION.md Normal file
View file

@ -0,0 +1,177 @@
---
phase: 04-tasks-kanban
verified: 2026-05-15T00:00:00Z
status: human_needed
score: 7/7 must-haves verified
overrides_applied: 0
human_verification:
- test: "Open a tablo detail page in a browser and confirm 4 column headers (To do, In progress, In review, Done) render with count badges and empty-state italic text"
expected: "Four columns visible, each with a badge showing task count and italic 'No tasks yet' when empty"
why_human: "Templ components and HTMX interactions cannot be verified without a live browser session; badge count JS (updateBadges) behavior is DOM-dependent"
- test: "Click '+ Add task' in a column, type a title, submit — confirm card appears inline and badge increments without page reload"
expected: "HTMX OOB swap inserts TaskCard before end of column, resets add-task slot to trigger button, badge count increments"
why_human: "HTMX swap targeting and OOB behavior requires a live HTMX-enabled browser session"
- test: "Click a task card body (not delete or drag handle) — confirm edit form pre-fills, save updates title, discard restores original"
expected: "outerHTML swap replaces .task-card-zone with TaskEditFragment on GET; POST swaps back to TaskCard with updated title; discard does GET /show"
why_human: "outerHTML round-trip correctness depends on browser HTMX execution; cannot verify swap targeting programmatically"
- test: "Drag a task (via ⠿ handle) to a different column, reload page — confirm it remains in the new column"
expected: "Sortable.js onEnd fires htmx.trigger on #reorder-form; POST /tasks/reorder updates DB; subsequent GET shows task in new column"
why_human: "Drag-and-drop and Sortable.js initialization (DOMContentLoaded + htmx:afterSettle re-init) cannot be exercised without a real browser"
- test: "Reorder tasks within a column via drag, reload — confirm order persists"
expected: "Position values in DB are renumbered (index+1)*100; ListTasksByTablo returns tasks ordered by status, position"
why_human: "Same drag-and-drop concern as TASK-04"
- test: "Click Delete on a task, confirm 'Delete task?' dialog appears, click 'Yes, delete' — task disappears"
expected: "GET /delete-confirm returns TaskDeleteConfirmFragment; POST /delete returns empty div with id=task-{id}; card removed from DOM"
why_human: "HTMX outerHTML swap to empty div behavior requires browser execution"
---
# Phase 4: Tasks (Kanban) Verification Report
**Phase Goal:** Deliver a fully functional kanban task board within every tablo — users can create, edit, reorder (drag-and-drop), and delete tasks across 4 fixed columns (To do / In progress / In review / Done). All 7 TASK requirements met.
**Verified:** 2026-05-15
**Status:** human_needed
**Re-verification:** No — initial verification
## Goal Achievement
### Observable Truths
| # | Truth | Status | Evidence |
|---|-------|--------|----------|
| 1 | Tablo detail page shows a kanban board with 4 labeled columns | VERIFIED | `backend/templates/tablos.templ` line 188 calls `@KanbanBoard(tablo.ID, csrfToken, tasks)`. `backend/templates/tasks_forms.go` defines `TaskColumnLabels` with "To do", "In progress", "In review", "Done". `TabloDetailPage` signature accepts `tasks []sqlc.Task`. |
| 2 | Creating a task inserts it into the correct column without full page reload | VERIFIED | `TaskCreateHandler` at line 124 of `handlers_tasks.go` sets `HX-Reswap`/`HX-Retarget` headers and returns `TaskCardOOB` fragment; OOB swap resets `#add-task-slot-{status}`. Route `POST /tablos/{id}/tasks` registered in `router.go` line 98. |
| 3 | Editing a task updates title and description inline | VERIFIED | `TaskEditHandler` (line 284) and `TaskUpdateHandler` (line 313) fully implemented in `handlers_tasks.go`. `TaskEditFragment` component defined in `tasks.templ` (line 173) with `class="task-card-zone"` outer wrapper enabling outerHTML round-trip. |
| 4 | Dragging a task to a different column updates its status and position in the DB | VERIFIED | `TaskReorderHandler` (line 393) in `handlers_tasks.go` reads `r.Form["task_id"]` and `r.Form["task_col"]` arrays, calls `GetTaskByID` then `UpdateTask` per task. `tasks.templ` contains Sortable.js init script with `draggable: ".task-card-zone"` and `onEnd` callback that triggers `#reorder-form`. Bug 2 fix (draggable selector) present. |
| 5 | Reordering tasks within a column persists after reload | VERIFIED | Same `TaskReorderHandler` computes `position = (index+1)*100` for each task. `ListTasksByTablo` query (tasks.sql.go line 99) orders by `status, position, created_at`. |
| 6 | Deleting a task removes it from the board with a confirmation step | VERIFIED | `TaskDeleteConfirmHandler` and `TaskDeleteHandler` implemented in `handlers_tasks.go` (lines 248+). `TaskDeleteConfirmFragment` in `tasks.templ` (line 285). Routes registered at lines 104-105 of `router.go`. |
| 7 | go test ./... is fully green before checkpoint (TASK-07 ordering persists) | VERIFIED | `go build ./...` exits 0. All 9 `TestTask*` functions in `handlers_tasks_test.go` have active implementations using `setupTestDB` — no `t.Skip` calls remain in any test function body. Plan 03 SUMMARY confirms `go test ./...` exits 0 across all 5 packages. |
**Score:** 7/7 truths verified
### Required Artifacts
| Artifact | Expected | Status | Details |
|----------|----------|--------|---------|
| `backend/migrations/0004_tasks.sql` | task_status ENUM + tasks table | VERIFIED | Contains `CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'in_review', 'done')` and `CREATE TABLE tasks` with tablo_id FK, position index |
| `backend/internal/db/queries/tasks.sql` | sqlc query source for all CRUD | VERIFIED | Exists; `tasks.sql.go` generated with `ListTasksByTablo`, `InsertTask`, `GetTaskByID`, `UpdateTask`, `DeleteTask`, `MaxPositionByTabloAndStatus` |
| `backend/internal/db/sqlc/tasks.sql.go` | Generated sqlc output | VERIFIED | Contains `TaskStatus` type with 4 constants; all 6 query functions present |
| `backend/internal/web/handlers_tasks.go` | All task handlers implemented | VERIFIED | 498 lines; `TaskCreateHandler`, `TaskDeleteHandler`, `TaskEditHandler`, `TaskUpdateHandler`, `TaskReorderHandler`, `TaskShowHandler`, `TaskNewFormHandler`, `TaskCancelNewHandler` all present with full implementations (no 501 stubs) |
| `backend/templates/tasks.templ` | Full kanban board components | VERIFIED | 350 lines; `KanbanBoard`, `TaskCard`, `TaskEditFragment`, `TaskCreateFormFragment`, `TaskDeleteConfirmFragment`, `AddTaskTrigger`, `TaskCardOOB` all defined |
| `backend/templates/tasks_forms.go` | Form structs + TaskColumns/Labels | VERIFIED | `TaskCreateForm`, `TaskCreateErrors`, `TaskUpdateForm`, `TaskUpdateErrors`, `TaskColumns`, `TaskColumnLabels` all exported |
| `backend/internal/web/router.go` | All task routes wired | VERIFIED | 10 task routes registered inside `RequireAuth` group (lines 96-105); static segments before parametric (Pitfall 1 respected) |
| `backend/templates/tablos.templ` | KanbanBoard embedded in tablo detail | VERIFIED | `TabloDetailPage` accepts `tasks []sqlc.Task`; calls `@KanbanBoard(tablo.ID, csrfToken, tasks)` at line 188 |
| `backend/templates/layout.templ` | sortable.min.js script tag | VERIFIED | `<script src="/static/sortable.min.js" defer></script>` present at line 55 |
| `backend/internal/web/ui/button.css` | ui-button-soft-danger-md CSS rule | VERIFIED | 3 occurrences (base, :hover, :focus-visible rules) |
| `backend/static/sortable.min.js` | Sortable.js 1.15.7 asset | VERIFIED | File exists on disk (45,478 bytes) |
| `backend/justfile` | sortable_version variable + bootstrap | VERIFIED | `sortable_version` appears 2 times in justfile |
| `backend/internal/web/handlers_tasks_test.go` | 9 active integration tests | VERIFIED | All 9 `TestTask*` functions have `setupTestDB` calls — no stubs remaining |
### Key Link Verification
| From | To | Via | Status | Details |
|------|-----|-----|--------|---------|
| `tasks.templ KanbanBoard` | `handlers_tasks.go handlers` | templ components rendered by handler functions | VERIFIED | `templates.KanbanBoard`, `templates.TaskCard`, etc. called in handlers |
| `router.go` | `handlers_tasks.go` | chi route group inside RequireAuth | VERIFIED | All 10 task routes mapped to handler functions |
| `tablos.templ TabloDetailPage` | `tasks.templ KanbanBoard` | `@KanbanBoard(tablo.ID, csrfToken, tasks)` call | VERIFIED | Line 188 of tablos.templ |
| `handlers_tablos.go TabloDetailHandler` | `sqlc.ListTasksByTablo` | fetches tasks before rendering | VERIFIED | Lines 196-200 of handlers_tablos.go |
| `Sortable.js onEnd callback` | `POST /tablos/{id}/tasks/reorder` | `htmx.trigger(form, "submit")` on `#reorder-form` | VERIFIED | tasks.templ lines 58-69 show correct DOM manipulation and trigger |
| `POST /tasks/reorder` | `sqlc.UpdateTask` | loop over `r.Form["task_id"]` with `GetTaskByID` first | VERIFIED | handlers_tasks.go lines 406-479; `r.ParseForm()` called at line 401 |
| `GET /tasks/{id}/edit` | `templates.TaskEditFragment` | outerHTML swap on `.task-card-zone` | VERIFIED | TaskEditHandler at line 284; TaskEditFragment outer div has `class="task-card-zone"` |
### Data-Flow Trace (Level 4)
| Artifact | Data Variable | Source | Produces Real Data | Status |
|----------|---------------|--------|--------------------|--------|
| `tablos.templ TabloDetailPage` | `tasks []sqlc.Task` | `handlers_tablos.go` calls `ListTasksByTablo(ctx, tablo.ID)` | Yes — DB query via `sqlc.Queries` | FLOWING |
| `tasks.templ KanbanBoard` | `tasks []sqlc.Task` | Passed from `TabloDetailPage` → `KanbanBoard` → `KanbanColumn` → `TaskCard` | Yes — same DB-sourced slice | FLOWING |
| `TaskReorderHandler` reorder response | `tasks []sqlc.Task` | Re-fetches all tasks via `ListTasksByTablo` after update loop | Yes — fresh DB query returned as KanbanBoard outerHTML | FLOWING |
### Behavioral Spot-Checks
| Behavior | Command | Result | Status |
|----------|---------|--------|--------|
| Go build passes | `cd backend && go build ./...` | Exit 0, no output | PASS |
| TaskStatus type generated | `grep "TaskStatusTodo" backend/internal/db/sqlc/models.go` | Line 18: `TaskStatusTodo TaskStatus = "todo"` | PASS |
| All 6 sqlc task queries exist | `grep "func (q \*Queries) " backend/internal/db/sqlc/tasks.sql.go` | InsertTask, ListTasksByTablo, DeleteTask, GetTaskByID, UpdateTask, MaxPositionByTabloAndStatus found | PASS |
| Router has task create route | `grep 'TaskCreateHandler' backend/internal/web/router.go` | Line 98 match | PASS |
| No stubs remain in handlers | `grep "501" backend/internal/web/handlers_tasks.go` | No matches | PASS |
| Sortable re-init on htmx:afterSettle | `grep "htmx:afterSettle" backend/templates/tasks.templ` | Lines 95-97 confirm listener | PASS |
| Bug 2 fix: draggable selector | `grep 'draggable.*task-card-zone' backend/templates/tasks.templ` | Line 54: `draggable: ".task-card-zone"` | PASS |
| Bug 1 fix: badge count update | `grep "updateBadges\|task-count-badge" backend/templates/tasks.templ` | Lines 76-97, 110 confirm implementation | PASS |
### Probe Execution
Step 7c: SKIPPED — no probe scripts found in `scripts/*/tests/probe-*.sh`; phase uses integration test suite instead.
### Requirements Coverage
| Requirement | Source Plan | Description | Status | Evidence |
|-------------|------------|-------------|--------|----------|
| TASK-01 | 04-01, 04-02, 04-04 | Each tablo has a kanban board with named columns (4 fixed: To do / In progress / In review / Done) | SATISFIED | `KanbanBoard` component renders 4 `KanbanColumn` instances via `TaskColumns`; `TabloDetailPage` embeds board |
| TASK-02 | 04-01, 04-02, 04-04 | User can create a task inside a column with a title | SATISFIED | `TaskCreateHandler` + `TaskCreateFormFragment` + HTMX inline insert with OOB slot reset |
| TASK-03 | 04-01, 04-03, 04-04 | User can edit a task's title and description | SATISFIED | `TaskEditHandler` + `TaskUpdateHandler` + `TaskEditFragment`; outerHTML round-trip verified |
| TASK-04 | 04-01, 04-03, 04-04 | User can move a task between columns (drag-and-drop) | SATISFIED | `TaskReorderHandler` reads `task_col[]` array; Sortable.js onEnd triggers reorder POST; `draggable: ".task-card-zone"` bug fix applied |
| TASK-05 | 04-01, 04-03, 04-04 | User can reorder tasks within a column | SATISFIED | Same `TaskReorderHandler`; position computed as `(index+1)*100` per array order; `ListTasksByTablo` orders by position |
| TASK-06 | 04-01, 04-02, 04-04 | User can delete a task | SATISFIED | `TaskDeleteConfirmHandler` + `TaskDeleteHandler` + `TaskDeleteConfirmFragment`; returns empty div on delete |
| TASK-07 | 04-01, 04-03, 04-04 | Task ordering persists across refreshes | SATISFIED | DB updated with new positions on reorder; `ListTasksByTablo` query orders by `status, position, created_at` |
All 7 TASK requirements satisfied. No orphaned requirements found.
### Anti-Patterns Found
| File | Line | Pattern | Severity | Impact |
|------|------|---------|----------|--------|
| `handlers_tasks_test.go` | 5 | Stale comment "All test functions call t.Skip" | Info | Comment is outdated — reflects Plan 01 scaffold state; actual test bodies are fully implemented. Not a code defect. |
No TBD, FIXME, or XXX debt markers found in any file modified by this phase.
### Human Verification Required
All automated checks pass. The following behaviors require a live browser session to confirm end-to-end:
#### 1. Kanban Board Renders (TASK-01)
**Test:** Open a tablo detail page. Confirm 4 column headers: "To do", "In progress", "In review", "Done" each with a count badge showing 0 and italic "No tasks yet" when empty.
**Expected:** 4 columns visible with correct labels, badges, and empty state.
**Why human:** Templ rendering and CSS layout require a real browser.
#### 2. Inline Task Creation (TASK-02)
**Test:** Click "+ Add task", enter a title, submit. Confirm the card appears in the column and the "+ Add task" button reappears — no page reload.
**Expected:** HTMX `beforeend` swap inserts card; OOB swap resets add-task slot; badge count increments via `updateBadges()` JS.
**Why human:** HTMX OOB swap behavior and the `htmx:afterSettle` badge update JS cannot be verified without a running HTMX browser session.
#### 3. Inline Task Editing (TASK-03)
**Test:** Click a task card body, confirm edit form pre-fills with current title, change title and save, confirm updated card. Click edit again and press "Discard changes".
**Expected:** outerHTML swap replaces `.task-card-zone` with `TaskEditFragment`; save swaps back to `TaskCard` with new title; discard calls GET `/show`.
**Why human:** HTMX outerHTML swap round-trips require live execution.
#### 4. Cross-Column Drag-and-Drop (TASK-04)
**Test:** Drag a task via the ⠿ handle to a different column, reload — confirm task stays in new column.
**Expected:** Sortable.js `onEnd` fires, populates `#reorder-form` inputs, triggers HTMX POST to `/tasks/reorder`, DB updated, board refreshed.
**Why human:** Drag-and-drop interaction and Sortable.js initialization (DOMContentLoaded + htmx:afterSettle re-init) cannot be tested without a real browser.
#### 5. Within-Column Reorder (TASK-05)
**Test:** Create 3+ tasks in one column, drag to reorder, reload — confirm order persists.
**Expected:** Positions renumbered in DB; page reload shows same order.
**Why human:** Same as TASK-04.
#### 6. Delete with Confirmation (TASK-06)
**Test:** Click "Delete" on a task, confirm inline dialog appears, test "Keep task" restores card, then delete again with "Yes, delete" — card disappears.
**Expected:** GET `/delete-confirm` returns `TaskDeleteConfirmFragment`; POST `/delete` returns empty div; card removed from DOM.
**Why human:** HTMX outerHTML-to-empty-div behavior requires browser execution.
### Gaps Summary
No gaps found. All 7 TASK requirements are implemented in the codebase with full wiring from routes through handlers to DB queries and templ components. Two bugs discovered during Plan 04 human checkpoint (badge count not updating, wrong draggable selector) were fixed in commits `68f2ccd` and `131c9fd`. The codebase is clean — no debt markers, no stubs, no orphaned artifacts.
Human verification is required only for the HTMX and Sortable.js interactive behaviors that cannot be confirmed without a live browser session. The automated evidence is strong: all 9 integration tests are active, `go build ./...` passes, all handlers are substantively implemented.
---
_Verified: 2026-05-15_
_Verifier: Claude (gsd-verifier)_