.planning/REQUIREMENTS.md

@@ -21,9 +21,9 @@ Requirements for milestone v3.0. Each maps to exactly one roadmap phase.
 
 ### Auth Views
 
-- [ ] **AUTH-UI-01**: Login page matches the JS app's auth-card layout (gradient background, centered card, brand logo, status banner)
-- [ ] **AUTH-UI-02**: Signup page matches the same visual treatment as login
-- [ ] **AUTH-UI-03**: Google sign-in button uses the Material Design button style
+- [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
 
@@ -78,9 +78,9 @@ Requirements for milestone v3.0. Each maps to exactly one roadmap phase.
 | DS-07 | Phase 13 | Complete |
 | DS-08 | Phase 13 | Complete |
 | DS-09 | Phase 13 | Complete |
-| AUTH-UI-01 | Phase 14 | Pending |
-| AUTH-UI-02 | Phase 14 | Pending |
-| AUTH-UI-03 | Phase 14 | Pending |
+| 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 |

.planning/ROADMAP.md

@@ -19,7 +19,7 @@
 | # | Phase | Goal | Requirements |
 |---|-------|------|--------------|
 | 13 | 5/5 | Complete    | 2026-05-16 |
-| 14 | Auth Pages | Restyle login/signup to match JS app auth-card layout | AUTH-UI-01..03 |
+| 14 | 1/2 | In Progress|  |
 | 15 | Dashboard & Tablos | Restyle sidebar and tablo list to match JS app | DASH-01..03 |
 | 16 | Tablo Detail | Restyle tasks, etapes, and files views | DETAIL-01..04 |
 | 17 | Chat & Planning | Restyle discussion and planning pages | CHAT-UI-01, PLAN-UI-01 |
@@ -64,7 +64,7 @@ Plans:
 **Mode:** mvp
 **Status:** Pending
 **Requirements:** AUTH-UI-01, AUTH-UI-02, AUTH-UI-03
-**Plans:** 2 plans
+**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
@@ -74,7 +74,7 @@ Plans:
 
 Plans:
 **Wave 1**
-- [ ] 14-01-PLAN.md — Auth foundation: logo assets + auth.css replacement + auth_components.templ + auth_layout.templ
+- [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

.planning/STATE.md

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
 milestone: v3.0
 milestone_name: Design System & Visual Polish
 status: executing
-last_updated: "2026-05-16T17:00:49.619Z"
+last_updated: "2026-05-16T17:07:26.820Z"
 last_activity: 2026-05-16 -- Phase 14 planning complete
 progress:
   total_phases: 5
   completed_phases: 1
   total_plans: 7
-  completed_plans: 5
-  percent: 71
+  completed_plans: 6
+  percent: 86
 ---
 
 # STATE

.planning/phases/14-auth-pages/14-01-SUMMARY.md

@@ -0,0 +1,119 @@
+---
+phase: 14-auth-pages
+plan: "01"
+subsystem: ui
+tags: [go, templ, css, htmx, auth, animated-background, google-oauth]
+
+# Dependency graph
+requires:
+  - phase: 13-design-system-foundation
+    provides: auth.css import in tailwind.input.css, ui.Input/ui.FormField components for Plan 02
+
+provides:
+  - backend/static/logo_dark.png — brand logo asset at /static/logo_dark.png
+  - backend/static/logo_white.png — brand logo asset for future dark mode
+  - backend/internal/web/ui/auth.css — full auth CSS: login-screen shell, animated background (bg-01..35, size/opacity utilities), auth card shell and internals, gsi-material-button, legacy auth-provider controls, 66 @keyframes definitions, animate-* utility classes
+  - backend/templates/auth_components.templ — AnimatedBackground (35 elements), GoogleButton (a/button variants, English label), AuthDivider ("or")
+  - backend/templates/auth_layout.templ — AuthLayout(title, csrfToken) standalone HTML shell with .login-screen wrapper
+
+affects: [14-02-auth-pages-migration, any future phase touching auth page layout]
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "Auth page layout: AuthLayout templ (no auth.User param, login-screen wrapper, AnimatedBackground, htmx.min.js only)"
+    - "AnimatedBackground: 35 .background-logo elements with aria-hidden='true' parent, single logo_dark.png per element (dark-mode deferred)"
+    - "GoogleButton: accepts (href string, configured bool) — <a> when configured, <button disabled> when not"
+    - "CSS extraction: auth-only rules extracted from go-backend/static/styles.css, NOT imported — .app-shell excluded"
+
+key-files:
+  created:
+    - backend/templates/auth_components.templ
+    - backend/templates/auth_layout.templ
+    - backend/static/logo_dark.png
+    - backend/static/logo_white.png
+  modified:
+    - backend/internal/web/ui/auth.css
+
+key-decisions:
+  - "Image path: /static/logo_dark.png (not /logo_dark.png) — backend serves static files under /static/"
+  - "Single image per AnimatedBackground element (no light-only/dark-only pairs — dark mode deferred to DARK-01)"
+  - "AuthLayout has no auth.User param — auth pages are always unauthenticated per D-L03"
+  - "gsi-material-button gains display:block and text-decoration:none for the <a> variant (go-backend uses <button> only)"
+  - "English labels throughout: 'Sign in with Google', 'or' (not French from go-backend)"
+
+patterns-established:
+  - "AuthLayout pattern: package templates, no backend/internal/auth import, csrfToken threaded for children"
+  - "AnimatedBackground: separate component in backend/templates/, called from AuthLayout"
+  - "GoogleButton: configured/unconfigured split via bool param preserving existing AuthProviderButtonControl logic"
+
+requirements-completed: [AUTH-UI-01, AUTH-UI-02, AUTH-UI-03]
+
+# Metrics
+duration: 4min
+completed: 2026-05-16
+---
+
+# Phase 14 Plan 01: Auth Assets & Components Summary
+
+**Auth page foundation: logo assets copied, auth.css replaced with 828-line full extraction from go-backend, AnimatedBackground (35 elements) + GoogleButton + AuthDivider + AuthLayout templ components created**
+
+## Performance
+
+- **Duration:** 4 min
+- **Started:** 2026-05-16T17:02:56Z
+- **Completed:** 2026-05-16T17:07:00Z
+- **Tasks:** 2
+- **Files modified:** 5 (2 created as binary assets, 1 CSS replaced, 2 new templ files)
+
+## Accomplishments
+- Copied logo_dark.png (85 KB) and logo_white.png (4.5 KB) from go-backend/static into backend/static
+- Replaced the 62-line auth.css stub with an 828-line full extraction containing all auth card CSS, animated background positioning/sizing/opacity classes, gsi-material-button Material Design styles, 66 @keyframes definitions, and 65 animate-* utility classes
+- Created auth_components.templ with AnimatedBackground (exactly 35 background-logo elements using /static/logo_dark.png), GoogleButton (<a> or <button disabled> variants with English labels), and AuthDivider ("or" pill)
+- Created auth_layout.templ as a standalone HTML shell (login-screen wrapper, @AnimatedBackground(), card-wrap/card-glow/auth-card-shell, htmx.min.js, no auth.User param)
+- `just generate` exits 0; all 8 backend test packages pass unchanged
+
+## Task Commits
+
+1. **Task 1: Copy logo assets and replace auth.css** - `cf116ff` (feat)
+2. **Task 2: Create auth_components.templ and auth_layout.templ** - `e4d5f96` (feat)
+
+**Plan metadata:** `[see final commit below]` (docs: complete plan)
+
+## Files Created/Modified
+- `backend/static/logo_dark.png` — Brand logo binary asset (85 KB), served at /static/logo_dark.png
+- `backend/static/logo_white.png` — Brand logo binary asset (4.5 KB), reserved for dark mode
+- `backend/internal/web/ui/auth.css` — Full auth CSS extraction: .login-screen, .background-layer/.background-logo/bg-01..35/size-06..20/opacity-02..05, .card-wrap/.card-glow/.auth-card-shell, card internals, .gsi-material-button, legacy auth-provider controls, 66 @keyframes, 65 .animate-* utilities
+- `backend/templates/auth_components.templ` — AnimatedBackground (35 elements), GoogleButton (href+configured params, English label), AuthDivider ("or")
+- `backend/templates/auth_layout.templ` — AuthLayout(title, csrfToken) standalone HTML shell
+
+## Decisions Made
+- `display: block; text-decoration: none` added to `.gsi-material-button` base rule to support the `<a>` tag variant — go-backend only uses `<button>`, but backend needs both
+- Dark-mode logo swap (`light-only`/`dark-only` class pairs from go-backend) intentionally omitted per DEFERRED/DARK-01 — Phase 14 uses logo_dark.png only
+- AuthLayout does not embed a CSRF field — the layout threads csrfToken to children; only form fragments embed it via `ui.CSRFField(csrfToken)`
+
+## Deviations from Plan
+None - plan executed exactly as written.
+
+## Issues Encountered
+None.
+
+## User Setup Required
+None - no external service configuration required. All files are static assets and build-time templates.
+
+## Known Stubs
+None. This plan delivers foundation assets and components only; no data flows to UI rendering in Plan 01. The AnimatedBackground images are wired to `/static/logo_dark.png` which exists.
+
+## Threat Flags
+None. All files are build-time artifacts or static binary assets with no runtime user input.
+
+## Next Phase Readiness
+- Plan 02 can now use `@AuthLayout(...)`, `@GoogleButton(...)`, `@AuthDivider()` from the same `templates` package — no import needed
+- Plan 02 can switch `auth_login.templ` and `auth_signup.templ` from `@Layout(...)` to `@AuthLayout(...)`
+- All auth CSS classes (`.auth-card-shell`, `.login-form`, `.signup-copy`, `.gsi-material-button`, etc.) are available in the compiled tailwind.css
+- No blockers.
+
+---
+*Phase: 14-auth-pages*
+*Completed: 2026-05-16*