diff --git a/.planning/MILESTONES.md b/.planning/MILESTONES.md
index 32b2dae..a1c1e65 100644
--- a/.planning/MILESTONES.md
+++ b/.planning/MILESTONES.md
@@ -1,5 +1,32 @@
# Project Milestones: Xtablo
+## v3.0 Design System & Visual Polish (Shipped: 2026-05-17)
+
+**Delivered:** Full design system ported from go-backend and applied to every product surface — auth pages, app shell, tablo list, tablo detail, chat, and planning.
+
+**Phases completed:** 13-17 (5 phases, 16 plans)
+
+**Key accomplishments:**
+
+- Built a complete CSS token vocabulary and typed templ component library (11 types: button, badge, card, modal, empty-state, table, icon-button, input, textarea, select, form-field) with a build-tag-gated `/ui-catalog` visual verification page.
+- Restyled auth pages (login/signup) with gradient animated background, centered auth-card, brand logo, and Google Material Design sign-in button with Roboto font.
+- Implemented app shell: sidebar with brand section, icon nav items, tablo list section, and user footer; tablo list with project-card grid, color avatars, and action controls.
+- Restyled tablo detail: project-card-top header, tasks-section kanban, etapes section, and files table using `@ui.Table` with `@ui.EmptyState` fallback.
+- Added own-vs-others chat bubbles with brand-tint right-alignment and planning day-separator event list using overview-section layout.
+
+**Stats:**
+
+- 150 files changed, +23,505 / −993 lines across v3.0 git range
+- 5 phases, 16 plans
+- 2 days (2026-05-16 → 2026-05-17)
+- Go backend: ~18,600 non-test LOC + ~3,400 templ LOC
+
+**Git range:** `3b9bd62` → `fa48d81`
+
+**Known deferred items at close:** 6 acknowledged open artifact items (all pre-existing from v1.0/v2.0). See `.planning/STATE.md` Deferred Items.
+
+---
+
Entries are listed newest first.
## v2.0 Collaboration, Planning, and Social Sign-in (Shipped: 2026-05-16)
diff --git a/.planning/PROJECT.md b/.planning/PROJECT.md
index b3c0edf..d3b1790 100644
--- a/.planning/PROJECT.md
+++ b/.planning/PROJECT.md
@@ -2,7 +2,7 @@
## What This Is
-A Go + HTMX version of Xtablo centered on tablos as collaborative workspaces. v1 established the authenticated Tablos workflow with tasks, files, worker, and deploy scaffolding; v2 added collaboration, messaging, etapes, events, planning, and Google sign-in; v3 replaces the minimal backend UI with a full design system that makes the product look like the existing JS app.
+A Go + HTMX version of Xtablo centered on tablos as collaborative workspaces. v1 established the authenticated Tablos workflow (tasks, files, worker, deploy); v2 added collaboration, messaging, etapes, events, planning, and Google sign-in; v3 ported the full design system from the reference JS app — CSS token vocabulary, typed templ component library, and a visual reskin of every surface.
Built for a developer who wants a simpler, durable product stack: one Go server, Postgres, server-rendered UI, and no managed chat provider.
@@ -12,16 +12,9 @@ Built for a developer who wants a simpler, durable product stack: one Go server,
If everything else fails, this must work end-to-end on a single Go binary backed by Postgres and an S3-compatible bucket.
-## Current Milestone: v3.0 Design System & Visual Polish
+## Shipped: v3.0 Design System & Visual Polish (2026-05-17)
-**Goal:** Replace the minimal backend UI layer with a full design system ported from `go-backend/internal/web/ui`, then apply it to every surface using the JS app as the visual reference.
-
-**Target features:**
-- Design system foundation: port CSS tokens and component library (button, input, card, badge, modal, select, textarea, table, empty-state) into `backend/internal/web/ui`
-- Auth pages (login/signup) restyled to match the JS product visual
-- Dashboard & Tablos (sidebar, tablo list, project cards) restyled
-- Tablo detail (tasks/kanban, etapes, files) restyled
-- Chat & Planning pages restyled
+**Delivered:** Full CSS token vocabulary and typed templ component library (11 types) applied to every surface — auth pages, app shell sidebar, tablo list, tablo detail, chat, and planning. Build-tag-gated `/ui-catalog` visual verification page included.
## Requirements
@@ -39,16 +32,20 @@ If everything else fails, this must work end-to-end on a single Go binary backed
- ✓ Tablo events with CRUD — Phase 10 (v2.0)
- ✓ Individual planning view (`/planning`) — Phase 11 (v2.0)
- ✓ Native per-tablo chat with real-time SSE — Phase 12 (v2.0)
+- ✓ CSS design token vocabulary + typed templ component library (11 types) in `backend/internal/web/ui` — Phase 13 (v3.0)
+- ✓ Auth pages (login/signup) match JS app visual — Phase 14 (v3.0)
+- ✓ App shell sidebar + project-card tablo grid — Phase 15 (v3.0)
+- ✓ Tablo detail (tasks, etapes, files) restyled with design system components — Phase 16 (v3.0)
+- ✓ Chat and planning views visually consistent with app shell — Phase 17 (v3.0)
### Active
-
+
-- [ ] A full design system (tokens + component library) lives in `backend/internal/web/ui` and can be used by all templates
-- [ ] Auth pages look visually equivalent to the JS app (login/signup)
-- [ ] Dashboard and tablo list match the sidebar + project-card layout from the JS app
-- [ ] Tablo detail (tasks, etapes, files) matches the JS app's visual treatment
-- [x] Chat and planning views have consistent, polished styling — Phase 17
+- [ ] Responsive layout: sidebar collapses on small screens, kanban board scrolls horizontally on mobile
+- [ ] Dark mode: CSS tokens gain `prefers-color-scheme` counterparts or a class-toggle variant
+- [ ] Status field on tablos (e.g., active/archived) with UI indicator on project cards
+- [ ] Task completion percentage on tablo detail header (progress bar wiring)
### Out of Scope
@@ -69,10 +66,10 @@ If everything else fails, this must work end-to-end on a single Go binary backed
- The JS monorepo (this repository) is the source of truth for product behavior and is fully mapped in `.planning/codebase/` (ARCHITECTURE, STACK, STRUCTURE, INTEGRATIONS, CONVENTIONS, CONCERNS, TESTING). Use these to derive expected behavior — but the rewrite is free to simplify both schema and visuals.
- The DB schema **will change** during the rewrite — the JS version's Supabase schema is a reference, not a constraint. The user wants to be in the loop on schema decisions for each domain (users/sessions, tablos, tasks, files).
-- Visuals will also change — no requirement to mirror the existing UI; Tailwind + HTMX patterns drive the new look.
-- `go-backend/` already contains real scaffolding (router, sqlc, air, tailwind input). It is *not* the foundation — a fresh `backend/` package will be created.
+- v3.0 shipped the full design system and visual reskin. `backend/internal/web/ui` now has: CSS token vocabulary, 11 typed templ components, an app shell, and surface-specific CSS (auth, dashboard, tablo detail, chat, planning).
+- Current backend source footprint: ~18,600 non-test Go LOC + ~3,400 templ LOC.
- Developer is comfortable in Go and wants a low-dependency, server-rendered stack going forward.
-- v2 shipped functional and plain UI for collaboration and planning. v3 is the visual pass that ports the richer design system and applies it across product surfaces.
+- Known stubs shipped in v3.0: tablo status field hardcoded as "En cours", progress bar hardcoded at 0% — both require a DB schema extension to wire properly.
## Constraints
@@ -101,6 +98,10 @@ If everything else fails, this must work end-to-end on a single Go binary backed
| Google/Apple are identity providers only | Preserve server-owned users/sessions while allowing social sign-in | ✓ Google validated; Apple disabled for now |
| Etapes are one-level wrappers around tasks | Matches the requested mental model and avoids recursive planning complexity | ✓ Validated |
| Planning is individual, events remain tablo-scoped | Lets users see their schedule while preserving tablos as the source of work context | ✓ Validated |
+| Design system lives in `backend/internal/web/ui` (not go-backend) | Keep all production code in `backend/`; go-backend is scratch/reference only | ✓ Validated — all 11 components + token CSS in backend/ |
+| Build-tag-gated `/ui-catalog` route for design system verification | Catalog must not ship in production; build tags are the idiomatic Go mechanism | ✓ Validated — production build passes, catalog isolated |
+| Tablo status + progress bar shipped as visual stubs | DB schema extension needed; unblocking is lower value than shipping the visual design | ⚠️ Revisit — stub needs wiring in v4.0 |
+| Air config extended to watch .css files and run Tailwind CLI on rebuild | CSS edits require Tailwind rebuild; air restarts on template changes but not CSS without this | ✓ Validated |
## Evolution
@@ -127,4 +128,5 @@ This document evolves at phase transitions and milestone boundaries.
- **Milestone v2.0 shipped: Collaboration, planning, and social sign-in** — Shipped 2026-05-16. Delivered Google sign-in, etapes, events, individual planning, and native SSE-backed tablo discussions. Closed with 7 acknowledged deferred artifact items; see `.planning/milestones/v2.0-MILESTONE-AUDIT.md`.
---
-*Last updated: 2026-05-17 — Phase 17 complete (discussion view and planning page restyled with design system components; IsOwn bubble alignment, day separators, HTMX tab fix, discussion max-height with auto-scroll)*
+---
+*Last updated: 2026-05-17 after v3.0 milestone — design system shipped, all 17 phases complete through v1.0–v3.0*
diff --git a/.planning/RETROSPECTIVE.md b/.planning/RETROSPECTIVE.md
index 1e2e53c..ccdf375 100644
--- a/.planning/RETROSPECTIVE.md
+++ b/.planning/RETROSPECTIVE.md
@@ -47,6 +47,59 @@ A living document updated after each milestone. Lessons feed forward into future
---
+## Milestone: v3.0 — Design System & Visual Polish
+
+**Shipped:** 2026-05-17
+**Phases:** 5 (13-17) | **Plans:** 16
+
+### What Was Built
+
+- Full CSS token vocabulary in `base.css` (colors, spacing, typography, shadows, gradients)
+- 11 typed templ components: button, badge, card, modal, empty-state, table, icon-button, input, textarea, select, form-field
+- Build-tag-gated `/ui-catalog` visual verification page for the design system
+- Auth pages (login/signup) with gradient animated background, auth-card layout, Google Material Design sign-in button
+- App shell sidebar with brand section, nav icons, tablo list section, user footer
+- Project-card tablo grid with color avatars, creation date, action controls
+- Tablo detail: project-card-top header, tasks-section kanban, etapes section, files `@ui.Table` with `@ui.EmptyState`
+- Chat view: own-vs-others message bubbles with brand-tint right-alignment
+- Planning view: day-separator event list using overview-section layout
+
+### What Worked
+
+- Building the design system foundation (Phase 13) before any surface work paid off — phases 14-17 moved fast because components were ready
+- Build-tag catalog (`just catalog`) made visual verification frictionless between phases
+- Air CSS watching (added in Phase 14) eliminated manual restart friction for the rest of the milestone
+- TDD for view model logic (planning view, chat IsOwn) caught integration bugs before browser verify
+
+### What Was Inefficient
+
+- REQUIREMENTS.md checkboxes for DASH-01/02/03 were not ticked even after Phase 15 completed — stale data discovered only at milestone close
+- Phase 13 summary one-liners were raw "Task 1 —" prefixes from the executor rather than human-readable accomplishments — cleaned manually at close
+- Some ROADMAP.md phase entries had stale "1/2 plans executed" counts that didn't reflect actual SUMMARY.md files
+
+### Patterns Established
+
+- Design system → auth surface → dashboard → detail → auxiliary (chat/planning) is the right reskin order
+- `@ui.Table` + `@ui.EmptyState` as a pair for any list view
+- `@AppLayout` wraps all authenticated pages; `@AuthLayout` wraps auth pages — switching is done by changing the outer template
+- Build tags (`//go:build catalog` + `//go:build !catalog` stub) as the idiom for dev-only routes
+
+### Key Lessons
+
+- Validate REQUIREMENTS.md checkboxes during phase completion, not at milestone close
+- Phase SUMMARY.md one-liners should be written by the executor in final form; raw task names create cleanup work at milestone close
+- CSS dev-watch in air is non-negotiable for any CSS-heavy phase — add it at project start, not mid-milestone
+- Catalog-first is worthwhile for design systems: visual inventory before any surface application prevents design drift
+
+### Cost Observations
+
+- 2-day milestone (2026-05-16 → 2026-05-17)
+- 150 files, +23,505/−993 lines across 128 commits
+- Most expensive phase: Phase 14 (auth pages) — auth_components + auth_layout from scratch took iteration
+- Fastest phase: Phase 13 Plan 05 (catalog) — 3 minutes once components existed
+
+---
+
## Cross-Milestone Trends
### Process Evolution
@@ -54,15 +107,20 @@ A living document updated after each milestone. Lessons feed forward into future
| Milestone | Sessions | Phases | Key Change |
|-----------|----------|--------|------------|
| v2.0 | multiple | 5 | Collaboration, scheduling, and realtime work stayed inside Go + HTMX; artifact hygiene needs tighter close discipline. |
+| v3.0 | multiple | 5 | Design-system-first approach validated; surface reskins moved fast. Stale requirement checkboxes and raw summary one-liners are recurring close-time friction. |
### Cumulative Quality
| Milestone | Tests | Coverage | Zero-Dep Additions |
|-----------|-------|----------|-------------------|
| v2.0 | Go handler/DB suites plus browser UAT | Strong behavior coverage; some archive artifacts deferred | Native SSE chat, server-owned sessions, Postgres-backed planning |
+| v3.0 | TDD for view models (planning, chat IsOwn); browser verify checkpoints | Visual correctness tested via catalog + human UAT; unit coverage on behavior helpers | Design system (no new runtime deps); build-tag-gated catalog route |
### Top Lessons
1. Close phase validation and verification artifacts before running milestone audit.
2. Keep milestone archival before next-milestone initialization when possible.
3. Preserve browser UAT for HTMX interaction behavior.
+4. Check REQUIREMENTS.md checkboxes during phase execution, not at milestone close — stale checkboxes create friction.
+5. Design-system-first pays dividends: build the component library, verify in catalog, then apply to surfaces.
+6. Add CSS dev-watch (Air) at project start — it's always needed for CSS-heavy work.
diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md
index 6e4be10..94e6979 100644
--- a/.planning/ROADMAP.md
+++ b/.planning/ROADMAP.md
@@ -1,169 +1,66 @@
-# Roadmap: Xtablo v3.0 Design System & Visual Polish
+# Roadmap: Xtablo Go + HTMX Rewrite
-**Created:** 2026-05-16
-**Project mode:** Brownfield milestone on existing Go+HTMX backend
-**Milestone:** v3.0 — Design System & Visual Polish
+## Milestones
-5 phases, sequential. Phase numbering continues from v2.0, so v3.0 starts at Phase 13.
+- ✅ **v1.0 MVP** — Phases 1-7 (shipped 2026-05-15). Archive: [`milestones/v1.0-ROADMAP.md`](milestones/v1.0-ROADMAP.md)
+- ✅ **v2.0 Collaboration, Planning, and Social Sign-in** — Phases 8-12 (shipped 2026-05-16). Archive: [`milestones/v2.0-ROADMAP.md`](milestones/v2.0-ROADMAP.md)
+- ✅ **v3.0 Design System & Visual Polish** — Phases 13-17 (shipped 2026-05-17). Archive: [`milestones/v3.0-ROADMAP.md`](milestones/v3.0-ROADMAP.md)
----
+## Phases
-## Previous Milestones
+
+✅ v1.0 MVP (Phases 1-7) — SHIPPED 2026-05-15
-- [x] **v2.0 Collaboration, Planning, and Social Sign-in** — Phases 8-12, shipped 2026-05-16. Archive: [`milestones/v2.0-ROADMAP.md`](milestones/v2.0-ROADMAP.md)
+- [x] Phase 1: Foundation — completed 2026-05-14
+- [x] Phase 2: Authentication — completed 2026-05-15
+- [x] Phase 3: Tablos CRUD — completed 2026-05-15
+- [x] Phase 4: Tasks Kanban — completed 2026-05-15
+- [x] Phase 5: File Attachments — completed 2026-05-15
+- [x] Phase 6: Background Worker — completed 2026-05-15
+- [x] Phase 7: Deploy v1 — completed 2026-05-15
----
+
-## Phase Summary
+
+✅ v2.0 Collaboration, Planning, and Social Sign-in (Phases 8-12) — SHIPPED 2026-05-16
-| # | Phase | Goal | Requirements |
-|---|-------|------|--------------|
-| 13 | 5/5 | Complete | 2026-05-16 |
-| 14 | 1/2 | In Progress| |
-| 15 | 3/3 | Complete | 2026-05-16 |
-| 16 | 4/4 | Complete | 2026-05-16 |
-| 17 | 2/2 | Complete | 2026-05-17 |
+- [x] Phase 8: Social Sign-in (5/5 plans) — completed 2026-05-15
+- [x] Phase 9: Etapes (4/4 plans) — completed 2026-05-15
+- [x] Phase 10: Events (3/3 plans) — completed 2026-05-16
+- [x] Phase 11: Individual Planning (2/2 plans) — completed 2026-05-16
+- [x] Phase 12: Native Tablo Chat (3/3 plans) — completed 2026-05-16
----
+
-## Phase Details
+
+✅ v3.0 Design System & Visual Polish (Phases 13-17) — SHIPPED 2026-05-17
-### Phase 13: Design System Foundation
-**Goal:** Replace the minimal `backend/internal/web/ui` with a full design system ported from `go-backend/internal/web/ui` — tokens, components, and Tailwind integration — so every subsequent phase has a stable component library to consume.
-**Mode:** mvp
-**Status:** Pending
-**Requirements:** DS-01, DS-02, DS-03, DS-04, DS-05, DS-06, DS-07, DS-08, DS-09
-**Plans:** 5/5 plans complete
-**Success Criteria:**
-1. `backend/internal/web/ui/base.css` defines all CSS custom properties (color, spacing, typography, shadows, gradients) matching the go-backend token vocabulary
-2. All component types are implemented as templ components: button, input, textarea, select, card, badge, modal, empty-state, table, icon-button
-3. `backend/tailwind.input.css` imports all component CSS files and the app shell CSS
-4. A component catalog page (`/ui-catalog`, dev-only) renders all components for visual verification
-5. All existing templates compile and unit tests pass with no regressions
+- [x] Phase 13: Design System Foundation (5/5 plans) — completed 2026-05-16
+- [x] Phase 14: Auth Pages (2/2 plans) — completed 2026-05-16
+- [x] Phase 15: Dashboard & Tablos (3/3 plans) — completed 2026-05-16
+- [x] Phase 16: Tablo Detail (4/4 plans) — completed 2026-05-17
+- [x] Phase 17: Chat & Planning (2/2 plans) — completed 2026-05-17
-Plans:
-**Wave 1**
-- [x] 13-01-PLAN.md — Token vocabulary + enum/helper foundation (base.css, auth.css extraction, variants.go, helpers.go)
+
-**Wave 2** *(blocked on Wave 1 completion)*
-- [x] 13-02-PLAN.md — Migrate existing components to go-backend API (button multi-class, badge pill, card typed API, template hardcodes)
+## Progress
-**Wave 3** *(blocked on Wave 2 completion)*
-- [x] 13-03-PLAN.md — Port form-input components: input, textarea, select, form-field (CSS + templ + tests)
-
-**Wave 4** *(blocked on Wave 3 completion)*
-- [x] 13-04-PLAN.md — Port surface components: modal, empty-state, table, icon-button, space + tailwind.input.css manifest
-
-**Wave 5** *(blocked on Wave 4 completion)*
-- [x] 13-05-PLAN.md — Catalog route (build-tag gated) + visual sign-off checkpoint
-
-**User-in-loop:** Review the catalog page before proceeding to per-view application phases. Confirm token choices (brand color, radius, shadow levels) match what you want the product to look like.
-
-### Phase 14: Auth Pages
-**Goal:** Restyle login and signup pages to match the JS app's auth-card layout using the design system from Phase 13.
-**Mode:** mvp
-**Status:** Pending
-**Requirements:** AUTH-UI-01, AUTH-UI-02, AUTH-UI-03
-**Plans:** 1/2 plans executed
-**Success Criteria:**
-1. Login page has gradient background with animated background layer, centered auth card with brand logo, and status banner using design tokens
-2. Signup page matches the same visual treatment as login
-3. Google sign-in button uses the Material Design button style from the go-backend design
-4. All existing auth handler tests pass unchanged
-5. Browser walkthrough of login and signup matches the go-backend app.css auth-card design
-
-Plans:
-**Wave 1**
-- [x] 14-01-PLAN.md — Auth foundation: logo assets + auth.css replacement + auth_components.templ + auth_layout.templ
-
-**Wave 2** *(blocked on Wave 1 completion)*
-- [ ] 14-02-PLAN.md — Page migration: update auth_login.templ and auth_signup.templ to use AuthLayout + FormField inputs + nav links + browser verify checkpoint
-
-**User-in-loop:** Browser walkthrough checkpoint in Plan 02 — approve visual result before considering the phase complete.
-
-### Phase 15: Dashboard & Tablos
-**Goal:** Restyle the layout shell (sidebar + main) and tablo list/dashboard to match the JS app's sidebar + project-card layout.
-**Mode:** mvp
-**Status:** Pending
-**Requirements:** DASH-01, DASH-02, DASH-03
-**Plans:** 3/3 plans complete
-**Success Criteria:**
-1. Sidebar has brand section, nav items with icons, tablo list section, and user/account footer using sidebar-nav-shell classes
-2. Tablo list uses project-card layout with color avatars, creation date, and action controls
-3. Dashboard empty state uses the empty-state component
-4. All existing tablo CRUD handler tests pass unchanged
-5. Browser walkthrough of tablos list matches the go-backend project-card / sidebar design
-
-Plans:
-**Wave 0**
-- [x] 15-01-PLAN.md — Wave 0 test stubs: TestTablosDashboard_Sidebar, TestTablosDashboard_ProjectCards, TestTablosDashboard_EmptyState (RED baseline for DASH-01/02/03)
-
-**Wave 1** *(blocked on Wave 0 completion)*
-- [x] 15-02-PLAN.md — CSS foundation + AppLayout: app.css ported from go-backend, tailwind.input.css updated, app_layout.templ + app_layout_helpers.go created
-
-**Wave 2** *(blocked on Wave 1 completion)*
-- [x] 15-03-PLAN.md — Dashboard wiring: tablos.templ restyled (project-card grid, ui.EmptyState), handlers updated, planning + account_providers switched to AppLayout, browser verify checkpoint
-
-**User-in-loop:** Approve sidebar shape (nav items, tablo list section) and tablo card layout before implementation.
-
-### Phase 16: Tablo Detail
-**Goal:** Restyle the tablo detail view — header, task kanban, etapes, and files — using design system components.
-**Mode:** mvp
-**Status:** Pending
-**Requirements:** DETAIL-01, DETAIL-02, DETAIL-03, DETAIL-04
-**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
-3. Etapes section uses the same card/section visual pattern as tasks
-4. Files section uses the table component with consistent row actions
-5. All existing task, etape, and file handler tests pass unchanged
-
-Plans:
-**Wave 1**
-- [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)*
-- [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)*
-- [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)*
-- [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.
-
-### Phase 17: Chat & Planning
-**Goal:** Restyle the discussion view and planning page using design system components to make them visually consistent with the rest of the app.
-**Mode:** mvp
-**Status:** Pending
-**Requirements:** CHAT-UI-01, PLAN-UI-01
-**Plans:** 2/2 plans complete
-**Success Criteria:**
-1. Discussion view uses card/surface design; own messages vs. others are visually differentiated
-2. Planning page uses overview-section layout with chronological event list
-3. All existing chat and planning handler tests pass unchanged
-4. Browser walkthrough confirms both views look consistent with the Phase 15–16 restyled surfaces
-
-Plans:
-**Wave 1** *(both plans parallel — no shared files)*
-- [x] 17-01-PLAN.md — Discussion view: CSS message-bubble classes + DiscussionTabData view model + ChatMainContent() component + handler wiring + browser verify
-- [x] 17-02-PLAN.md — Planning view: h1 selector fix + PlanningTabData view model + PlanningShowDaySeparator + PlanningMainContent() component + handler wiring + browser verify
-
-**User-in-loop:** Browser verify checkpoints in both plans — approve visual result before considering the phase complete.
-
----
-
-## Coverage
-
-**21 requirements mapped across 5 phases**
-
-| Phase | Requirements | Count |
-|-------|-------------|-------|
-| 13 | DS-01, DS-02, DS-03, DS-04, DS-05, DS-06, DS-07, DS-08, DS-09 | 9 |
-| 14 | AUTH-UI-01, AUTH-UI-02, AUTH-UI-03 | 3 |
-| 15 | DASH-01, DASH-02, DASH-03 | 3 |
-| 16 | DETAIL-01, DETAIL-02, DETAIL-03, DETAIL-04 | 4 |
-| 17 | CHAT-UI-01, PLAN-UI-01 | 2 |
-| **Total** | | **21 / 21 ✓** |
+| Phase | Milestone | Plans Complete | Status | Completed |
+|-------|-----------|---------------|----------|------------|
+| 1. Foundation | v1.0 | — | Complete | 2026-05-14 |
+| 2. Authentication | v1.0 | 7/7 | Complete | 2026-05-15 |
+| 3. Tablos CRUD | v1.0 | 3/3 | Complete | 2026-05-15 |
+| 4. Tasks Kanban | v1.0 | 3/3 | Complete | 2026-05-15 |
+| 5. File Attachments | v1.0 | — | Complete | 2026-05-15 |
+| 6. Background Worker | v1.0 | 2/2 | Complete | 2026-05-15 |
+| 7. Deploy v1 | v1.0 | — | Complete | 2026-05-15 |
+| 8. Social Sign-in | v2.0 | 5/5 | Complete | 2026-05-15 |
+| 9. Etapes | v2.0 | 4/4 | Complete | 2026-05-15 |
+| 10. Events | v2.0 | 3/3 | Complete | 2026-05-16 |
+| 11. Individual Planning | v2.0 | 2/2 | Complete | 2026-05-16 |
+| 12. Native Tablo Chat | v2.0 | 3/3 | Complete | 2026-05-16 |
+| 13. Design System Foundation | v3.0 | 5/5 | Complete | 2026-05-16 |
+| 14. Auth Pages | v3.0 | 2/2 | Complete | 2026-05-16 |
+| 15. Dashboard & Tablos | v3.0 | 3/3 | Complete | 2026-05-16 |
+| 16. Tablo Detail | v3.0 | 4/4 | Complete | 2026-05-17 |
+| 17. Chat & Planning | v3.0 | 2/2 | Complete | 2026-05-17 |
diff --git a/.planning/STATE.md b/.planning/STATE.md
index 8b66858..f2e8df0 100644
--- a/.planning/STATE.md
+++ b/.planning/STATE.md
@@ -2,15 +2,15 @@
gsd_state_version: 1.0
milestone: v3.0
milestone_name: Design System & Visual Polish
-status: milestone_complete
-last_updated: "2026-05-17T08:36:32.223Z"
-last_activity: 2026-05-17
+status: Awaiting next milestone
+last_updated: "2026-05-17T12:09:43.643Z"
+last_activity: 2026-05-17 — Milestone v3.0 completed and archived
progress:
total_phases: 5
- completed_phases: 6
+ completed_phases: 5
total_plans: 16
completed_plans: 16
- percent: 120
+ percent: 100
---
# STATE
@@ -21,17 +21,17 @@ progress:
## Project Reference
-See: `.planning/PROJECT.md` (updated 2026-05-16)
+See: `.planning/PROJECT.md` (updated 2026-05-17)
**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 17 — Chat & Planning
+**Current focus:** Planning next milestone (v4.0)
## Current Position
-Phase: 17
-Plan: Not started
-Status: Milestone complete
-Last activity: 2026-05-17
+Phase: Milestone v3.0 complete
+Plan: —
+Status: Awaiting next milestone
+Last activity: 2026-05-17 — Milestone v3.0 completed and archived
## Previous Milestone Status
@@ -53,11 +53,10 @@ Last activity: 2026-05-17
## Deferred Items
-Items acknowledged and deferred at milestone close on 2026-05-16:
+Items acknowledged and deferred at v3.0 milestone close on 2026-05-17 (all pre-existing from v1.0/v2.0):
| Category | Item | Status |
|----------|------|--------|
-| uat_gap | Phase 01: 01-HUMAN-UAT.md | resolved; 0 pending scenarios |
| uat_gap | Phase 05: 05-HUMAN-UAT.md | partial; 6 pending scenarios |
| uat_gap | Phase 07: 07-HUMAN-UAT.md | partial; 3 pending scenarios |
| verification_gap | Phase 03: 03-VERIFICATION.md | human_needed |
@@ -203,3 +202,7 @@ Items acknowledged and deferred at milestone close on 2026-05-16:
---
*Last updated: 2026-05-16 after Phase 14 Plan 02 execution complete*
+
+## Operator Next Steps
+
+- Start the next milestone with /gsd-new-milestone
diff --git a/.planning/milestones/v3.0-REQUIREMENTS.md b/.planning/milestones/v3.0-REQUIREMENTS.md
new file mode 100644
index 0000000..8deac6f
--- /dev/null
+++ b/.planning/milestones/v3.0-REQUIREMENTS.md
@@ -0,0 +1,110 @@
+# Requirements Archive: v3.0 Design System & Visual Polish
+
+**Archived:** 2026-05-17
+**Status:** SHIPPED
+
+For current requirements, see `.planning/REQUIREMENTS.md`.
+
+---
+
+# Requirements: Xtablo v3.0 Design System & Visual Polish
+
+**Defined:** 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.
+
+## v3.0 Requirements
+
+Requirements for milestone v3.0. Each maps to exactly one roadmap phase.
+
+### Design System
+
+- [x] **DS-01**: CSS design tokens (colors, spacing, typography, shadows, gradients) are defined in `backend/internal/web/ui/base.css` matching the go-backend token vocabulary
+- [x] **DS-02**: Button component with primary, secondary, ghost, and danger variants
+- [x] **DS-03**: Input, Textarea, and Select form field components replace inline raw HTML in all templates
+- [x] **DS-04**: Card component is used across tablo list, detail, and content views
+- [x] **DS-05**: Badge component supports semantic tones (primary, warning, success, danger)
+- [x] **DS-06**: Modal component is available for create/edit dialogs
+- [x] **DS-07**: Empty-state component is available for zero-data views
+- [x] **DS-08**: Table component is available for list views (files, events)
+- [x] **DS-09**: Icon-button component replaces inline icon-button patterns across templates
+
+### Auth Views
+
+- [x] **AUTH-UI-01**: Login page matches the JS app's auth-card layout (gradient background, centered card, brand logo, status banner)
+- [x] **AUTH-UI-02**: Signup page matches the same visual treatment as login
+- [x] **AUTH-UI-03**: Google sign-in button uses the Material Design button style
+
+### Dashboard & Tablos
+
+- [ ] **DASH-01**: Sidebar uses the go-backend sidebar design (brand section, nav items with icons, tablo list, user/account footer)
+- [ ] **DASH-02**: Tablo list uses project-card layout with color accents, creation date, and action controls
+- [ ] **DASH-03**: Dashboard empty state uses the empty-state component
+
+### Tablo Detail
+
+- [x] **DETAIL-01**: Tablo detail header area matches the project-card-top design
+- [x] **DETAIL-02**: Task kanban board uses the tasks-section design (section header, task rows, add control)
+- [x] **DETAIL-03**: Etapes section is visually consistent with the task section
+- [x] **DETAIL-04**: Files section uses the table component
+
+### Chat & Planning
+
+- [x] **CHAT-UI-01**: Discussion view uses consistent card/surface design with message bubbles distinguishing own vs. others
+- [x] **PLAN-UI-01**: Planning page uses the overview-section layout for event aggregation
+
+## Future Requirements
+
+### Responsive / Mobile
+
+- **RESP-01**: Sidebar collapses on small screens (hamburger or bottom-nav pattern)
+- **RESP-02**: Kanban board scrolls horizontally on mobile
+- **RESP-03**: Auth pages adapt gracefully to narrow viewports
+
+### Dark Mode
+
+- **DARK-01**: All CSS tokens have dark-mode counterparts via `prefers-color-scheme` or a class toggle
+
+## Out of Scope
+
+| Feature | Reason |
+|---------|--------|
+| New pages or features | v3.0 is purely visual — no new routes or data models |
+| Billing / Stripe | Deferred from v1.0, still out of scope |
+| Client portal / Admin | Deferred from v1.0, still out of scope |
+| Mobile app | Out of scope for this rewrite milestone |
+| Dark mode | Future requirement — tokens will be structured to enable it, not implement it |
+
+## Traceability
+
+| Requirement | Phase | Status |
+|-------------|-------|--------|
+| DS-01 | Phase 13 | Complete |
+| DS-02 | Phase 13 | Complete |
+| DS-03 | Phase 13 | Complete |
+| DS-04 | Phase 13 | Complete |
+| DS-05 | Phase 13 | Complete |
+| DS-06 | Phase 13 | Complete |
+| DS-07 | Phase 13 | Complete |
+| DS-08 | Phase 13 | Complete |
+| DS-09 | Phase 13 | Complete |
+| AUTH-UI-01 | Phase 14 | Complete |
+| AUTH-UI-02 | Phase 14 | Complete |
+| AUTH-UI-03 | Phase 14 | Complete |
+| DASH-01 | Phase 15 | Pending |
+| DASH-02 | Phase 15 | Pending |
+| DASH-03 | Phase 15 | Pending |
+| DETAIL-01 | Phase 16 | Complete |
+| DETAIL-02 | Phase 16 | Complete |
+| DETAIL-03 | Phase 16 | Complete |
+| DETAIL-04 | Phase 16 | Complete |
+| CHAT-UI-01 | Phase 17 | Complete |
+| PLAN-UI-01 | Phase 17 | Complete |
+
+**Coverage:**
+- v3.0 requirements: 21 total
+- Mapped to phases: 21
+- Unmapped: 0 ✓
+
+---
+*Requirements defined: 2026-05-16*
+*Last updated: 2026-05-16 after initial definition*
diff --git a/.planning/milestones/v3.0-ROADMAP.md b/.planning/milestones/v3.0-ROADMAP.md
new file mode 100644
index 0000000..6e4be10
--- /dev/null
+++ b/.planning/milestones/v3.0-ROADMAP.md
@@ -0,0 +1,169 @@
+# Roadmap: Xtablo v3.0 Design System & Visual Polish
+
+**Created:** 2026-05-16
+**Project mode:** Brownfield milestone on existing Go+HTMX backend
+**Milestone:** v3.0 — Design System & Visual Polish
+
+5 phases, sequential. Phase numbering continues from v2.0, so v3.0 starts at Phase 13.
+
+---
+
+## Previous Milestones
+
+- [x] **v2.0 Collaboration, Planning, and Social Sign-in** — Phases 8-12, shipped 2026-05-16. Archive: [`milestones/v2.0-ROADMAP.md`](milestones/v2.0-ROADMAP.md)
+
+---
+
+## Phase Summary
+
+| # | Phase | Goal | Requirements |
+|---|-------|------|--------------|
+| 13 | 5/5 | Complete | 2026-05-16 |
+| 14 | 1/2 | In Progress| |
+| 15 | 3/3 | Complete | 2026-05-16 |
+| 16 | 4/4 | Complete | 2026-05-16 |
+| 17 | 2/2 | Complete | 2026-05-17 |
+
+---
+
+## Phase Details
+
+### Phase 13: Design System Foundation
+**Goal:** Replace the minimal `backend/internal/web/ui` with a full design system ported from `go-backend/internal/web/ui` — tokens, components, and Tailwind integration — so every subsequent phase has a stable component library to consume.
+**Mode:** mvp
+**Status:** Pending
+**Requirements:** DS-01, DS-02, DS-03, DS-04, DS-05, DS-06, DS-07, DS-08, DS-09
+**Plans:** 5/5 plans complete
+**Success Criteria:**
+1. `backend/internal/web/ui/base.css` defines all CSS custom properties (color, spacing, typography, shadows, gradients) matching the go-backend token vocabulary
+2. All component types are implemented as templ components: button, input, textarea, select, card, badge, modal, empty-state, table, icon-button
+3. `backend/tailwind.input.css` imports all component CSS files and the app shell CSS
+4. A component catalog page (`/ui-catalog`, dev-only) renders all components for visual verification
+5. All existing templates compile and unit tests pass with no regressions
+
+Plans:
+**Wave 1**
+- [x] 13-01-PLAN.md — Token vocabulary + enum/helper foundation (base.css, auth.css extraction, variants.go, helpers.go)
+
+**Wave 2** *(blocked on Wave 1 completion)*
+- [x] 13-02-PLAN.md — Migrate existing components to go-backend API (button multi-class, badge pill, card typed API, template hardcodes)
+
+**Wave 3** *(blocked on Wave 2 completion)*
+- [x] 13-03-PLAN.md — Port form-input components: input, textarea, select, form-field (CSS + templ + tests)
+
+**Wave 4** *(blocked on Wave 3 completion)*
+- [x] 13-04-PLAN.md — Port surface components: modal, empty-state, table, icon-button, space + tailwind.input.css manifest
+
+**Wave 5** *(blocked on Wave 4 completion)*
+- [x] 13-05-PLAN.md — Catalog route (build-tag gated) + visual sign-off checkpoint
+
+**User-in-loop:** Review the catalog page before proceeding to per-view application phases. Confirm token choices (brand color, radius, shadow levels) match what you want the product to look like.
+
+### Phase 14: Auth Pages
+**Goal:** Restyle login and signup pages to match the JS app's auth-card layout using the design system from Phase 13.
+**Mode:** mvp
+**Status:** Pending
+**Requirements:** AUTH-UI-01, AUTH-UI-02, AUTH-UI-03
+**Plans:** 1/2 plans executed
+**Success Criteria:**
+1. Login page has gradient background with animated background layer, centered auth card with brand logo, and status banner using design tokens
+2. Signup page matches the same visual treatment as login
+3. Google sign-in button uses the Material Design button style from the go-backend design
+4. All existing auth handler tests pass unchanged
+5. Browser walkthrough of login and signup matches the go-backend app.css auth-card design
+
+Plans:
+**Wave 1**
+- [x] 14-01-PLAN.md — Auth foundation: logo assets + auth.css replacement + auth_components.templ + auth_layout.templ
+
+**Wave 2** *(blocked on Wave 1 completion)*
+- [ ] 14-02-PLAN.md — Page migration: update auth_login.templ and auth_signup.templ to use AuthLayout + FormField inputs + nav links + browser verify checkpoint
+
+**User-in-loop:** Browser walkthrough checkpoint in Plan 02 — approve visual result before considering the phase complete.
+
+### Phase 15: Dashboard & Tablos
+**Goal:** Restyle the layout shell (sidebar + main) and tablo list/dashboard to match the JS app's sidebar + project-card layout.
+**Mode:** mvp
+**Status:** Pending
+**Requirements:** DASH-01, DASH-02, DASH-03
+**Plans:** 3/3 plans complete
+**Success Criteria:**
+1. Sidebar has brand section, nav items with icons, tablo list section, and user/account footer using sidebar-nav-shell classes
+2. Tablo list uses project-card layout with color avatars, creation date, and action controls
+3. Dashboard empty state uses the empty-state component
+4. All existing tablo CRUD handler tests pass unchanged
+5. Browser walkthrough of tablos list matches the go-backend project-card / sidebar design
+
+Plans:
+**Wave 0**
+- [x] 15-01-PLAN.md — Wave 0 test stubs: TestTablosDashboard_Sidebar, TestTablosDashboard_ProjectCards, TestTablosDashboard_EmptyState (RED baseline for DASH-01/02/03)
+
+**Wave 1** *(blocked on Wave 0 completion)*
+- [x] 15-02-PLAN.md — CSS foundation + AppLayout: app.css ported from go-backend, tailwind.input.css updated, app_layout.templ + app_layout_helpers.go created
+
+**Wave 2** *(blocked on Wave 1 completion)*
+- [x] 15-03-PLAN.md — Dashboard wiring: tablos.templ restyled (project-card grid, ui.EmptyState), handlers updated, planning + account_providers switched to AppLayout, browser verify checkpoint
+
+**User-in-loop:** Approve sidebar shape (nav items, tablo list section) and tablo card layout before implementation.
+
+### Phase 16: Tablo Detail
+**Goal:** Restyle the tablo detail view — header, task kanban, etapes, and files — using design system components.
+**Mode:** mvp
+**Status:** Pending
+**Requirements:** DETAIL-01, DETAIL-02, DETAIL-03, DETAIL-04
+**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
+3. Etapes section uses the same card/section visual pattern as tasks
+4. Files section uses the table component with consistent row actions
+5. All existing task, etape, and file handler tests pass unchanged
+
+Plans:
+**Wave 1**
+- [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)*
+- [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)*
+- [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)*
+- [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.
+
+### Phase 17: Chat & Planning
+**Goal:** Restyle the discussion view and planning page using design system components to make them visually consistent with the rest of the app.
+**Mode:** mvp
+**Status:** Pending
+**Requirements:** CHAT-UI-01, PLAN-UI-01
+**Plans:** 2/2 plans complete
+**Success Criteria:**
+1. Discussion view uses card/surface design; own messages vs. others are visually differentiated
+2. Planning page uses overview-section layout with chronological event list
+3. All existing chat and planning handler tests pass unchanged
+4. Browser walkthrough confirms both views look consistent with the Phase 15–16 restyled surfaces
+
+Plans:
+**Wave 1** *(both plans parallel — no shared files)*
+- [x] 17-01-PLAN.md — Discussion view: CSS message-bubble classes + DiscussionTabData view model + ChatMainContent() component + handler wiring + browser verify
+- [x] 17-02-PLAN.md — Planning view: h1 selector fix + PlanningTabData view model + PlanningShowDaySeparator + PlanningMainContent() component + handler wiring + browser verify
+
+**User-in-loop:** Browser verify checkpoints in both plans — approve visual result before considering the phase complete.
+
+---
+
+## Coverage
+
+**21 requirements mapped across 5 phases**
+
+| Phase | Requirements | Count |
+|-------|-------------|-------|
+| 13 | DS-01, DS-02, DS-03, DS-04, DS-05, DS-06, DS-07, DS-08, DS-09 | 9 |
+| 14 | AUTH-UI-01, AUTH-UI-02, AUTH-UI-03 | 3 |
+| 15 | DASH-01, DASH-02, DASH-03 | 3 |
+| 16 | DETAIL-01, DETAIL-02, DETAIL-03, DETAIL-04 | 4 |
+| 17 | CHAT-UI-01, PLAN-UI-01 | 2 |
+| **Total** | | **21 / 21 ✓** |