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 ✓** |