docs(14-02): complete plan summary and update state

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

.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:07:26.820Z"
+last_updated: "2026-05-16T17:40:00.000Z"
-last_activity: 2026-05-16 -- Phase 14 planning complete
+last_activity: 2026-05-16 -- Phase 14 Plan 02 execution complete, awaiting final verification
 progress:
   total_phases: 5
   completed_phases: 1
   total_plans: 7
-  completed_plans: 6
+  completed_plans: 7
-  percent: 86
+  percent: 100
 ---
 
 # STATE
@@ -29,9 +29,9 @@ See: `.planning/PROJECT.md` (updated 2026-05-16)
 ## Current Position
 
 Phase: 14
-Plan: Not started
+Plan: 02 (complete)
-Status: Ready to execute
+Status: Phase 14 execution complete — awaiting final visual verification
-Last activity: 2026-05-16 -- Phase 14 planning complete
+Last activity: 2026-05-16 -- Phase 14 Plan 02 execution complete, awaiting final verification
 
 ## Previous Milestone Status
 
@@ -108,6 +108,10 @@ Items acknowledged and deferred at milestone close on 2026-05-16:
 - **Provider buttons degrade to disabled controls when config is missing** — auth pages remain deployable without provider credentials (08-04)
 - **Account providers page is read-only in Phase 8** — linked identity visibility shipped before unlink/add-password account management (08-05)
 - **Apple sign-in disabled after UAT scope change** — Apple controls are hidden, Apple auth routes are not mounted, and provider docs only cover Google for now (08-UAT)
+- **Google button width: max-content (not 100%)** — matches Google Material Design branding guidelines; pill button naturally sized, not stretched to card width (14-02)
+- **Roboto font loaded in auth_layout.templ only** — auth pages are the only gsi-material-button context; global stylesheet pollution avoided (14-02)
+- **AuthProviderButtonsBlock/AuthProviderButtonControl removed** — superseded by GoogleButton from auth_components.templ; single-provider design, components consolidated (14-02)
+- **Air dev .css watching added** — .css in include_ext + Tailwind in rebuild cmd; CSS edits now trigger reload without manual restart (14-02)
 
 ## Performance Metrics
 
@@ -139,6 +143,8 @@ Items acknowledged and deferred at milestone close on 2026-05-16:
 | Phase 12 P01 | ~25min | 3 tasks | 22 files |
 | Phase 12 P02 | ~25min | 2 tasks | 5 files |
 | Phase 12 P03 | ~45min | 4 tasks | 9 files |
+| Phase 14 P01 | 4min | 2 tasks | 5 files |
+| Phase 14 P02 | ~30min | 2 tasks | 4 files |
 
 ## Notes
 
@@ -189,5 +195,10 @@ Items acknowledged and deferred at milestone close on 2026-05-16:
 - Phase 9 UAT: `.planning/phases/09-etapes/09-UAT.md` — 5/5 checkpoints passed after selected-etape create fix.
 - Commits (09): a8a3e5f/565bb88 (first etape slice), 9b89282/4af623a (management), 9f6c7eb/b22d79d (assignment selector), 55263e4/3a3ecf5/cf07c29 (reorder hardening), 0c95049/ee62ff9/f9fc7a1 (UAT fixes)
 
+- Phase 14 Plan 01 SUMMARY: `.planning/phases/14-auth-pages/14-01-SUMMARY.md`
+- Phase 14 Plan 02 SUMMARY: `.planning/phases/14-auth-pages/14-02-SUMMARY.md`
+- Commits (14-01): cf116ff (logo assets + auth.css), e4d5f96 (auth_components.templ + auth_layout.templ)
+- Commits (14-02): 808eaec (auth_login.templ), 65e3dbf (auth_signup.templ), 4624fb3 (Roboto + icon fix), 70fe384 (button width fix), 6e64cfb (air CSS watch)
+
 ---
-*Last updated: 2026-05-15 after Phase 9 UAT gap resolution*
+*Last updated: 2026-05-16 after Phase 14 Plan 02 execution complete*

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

@@ -0,0 +1,138 @@
+---
+phase: 14-auth-pages
+plan: "02"
+subsystem: ui
+tags: [go, templ, htmx, auth, google-oauth, design-system, css]
+
+# Dependency graph
+requires:
+  - phase: 14-auth-pages/14-01
+    provides: AuthLayout, GoogleButton, AuthDivider, auth.css, logo assets
+
+provides:
+  - backend/templates/auth_login.templ — migrated to AuthLayout + GoogleButton + ui.FormField inputs + signup nav link
+  - backend/templates/auth_signup.templ — migrated to AuthLayout + GoogleButton + ui.FormField inputs + login nav link
+  - Google button: Roboto font loaded, SVG icon sized correctly, width max-content per Google spec
+
+affects: [any future phase touching auth page templates or layout]
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "Auth page migration: replace @Layout(...) with @AuthLayout(title, csrfToken); remove raw <input> elements in favour of @ui.FormField/@ui.Input"
+    - "Google button width: max-content (natural width per Google branding guidelines), not 100%"
+    - "Roboto font: loaded from Google Fonts CDN in auth_layout.templ for gsi-material-button typography"
+    - "Air dev workflow: .css files watched alongside .go/.templ; Tailwind runs on each rebuild"
+
+key-files:
+  created: []
+  modified:
+    - backend/templates/auth_login.templ
+    - backend/templates/auth_signup.templ
+    - backend/templates/auth_layout.templ
+    - .air.toml
+
+key-decisions:
+  - "Button label: 'Sign in to Xtablo' (not 'Sign in') on login submit per copywriting contract"
+  - "Signup password placeholder: '12 characters minimum' (different from login 'Your password')"
+  - "Password autocomplete: 'new-password' on signup, 'current-password' on login"
+  - "Google button width: max-content, not 100% — matches Google Material Design branding guidelines"
+  - "Roboto font loaded in auth_layout.templ (not a global stylesheet) — auth pages only"
+  - "AuthProviderButtonsBlock and AuthProviderButtonControl removed from auth_login.templ — superseded by GoogleButton from auth_components.templ"
+
+patterns-established:
+  - "FormField pattern: @ui.FormField(ui.FormFieldProps{Label, For, Field: ui.Input(ui.InputProps{...}), Error}) replaces raw <input> + FieldError"
+  - "Auth page nav link: <p class='signup-copy'> ... <a class='signup-link' href='...'> ... </a></p>"
+
+requirements-completed: [AUTH-UI-01, AUTH-UI-02, AUTH-UI-03]
+
+# Metrics
+duration: ~30min
+completed: 2026-05-16
+---
+
+# Phase 14 Plan 02: Auth Pages Migration Summary
+
+**Login and signup pages migrated to AuthLayout with ui.FormField inputs, Google sign-in button (Roboto font, correct icon sizing, max-content width), HTMX swap preserved, and CSS dev-watch wired into air**
+
+## Performance
+
+- **Duration:** ~30 min
+- **Started:** 2026-05-16T17:07:00Z
+- **Completed:** 2026-05-16T17:40:00Z
+- **Tasks:** 2 (+ post-checkpoint bug fixes)
+- **Files modified:** 4
+
+## Accomplishments
+- Replaced auth_login.templ and auth_signup.templ with AuthLayout-based structure: gradient animated background, brand logo, GoogleButton, AuthDivider, and ui.FormField/ui.Input fields
+- HTMX swap preserved exactly: `hx-post="/login" hx-target="#login-form" hx-swap="outerHTML"` on login; `hx-post="/signup" hx-target="#signup-form" hx-swap="outerHTML"` on signup
+- Google sign-in button corrected post-checkpoint: Roboto font loaded from Google Fonts CDN, SVG icon sized to 18x18px, button width set to max-content (natural width per Google Material Design spec)
+- Cross-page navigation links added: login page links to /signup; signup page links to /login
+- Air dev config updated to watch .css files and run Tailwind CLI on every rebuild, closing the hot-reload gap for CSS changes
+
+## Task Commits
+
+1. **Task 1: Migrate auth_login.templ to AuthLayout** - `808eaec` (feat)
+2. **Task 2: Migrate auth_signup.templ to AuthLayout** - `65e3dbf` (feat)
+3. **Post-checkpoint fix: Roboto font + SVG icon sizing** - `4624fb3` (fix)
+4. **Post-checkpoint fix: Google button max-content width** - `70fe384` (fix)
+5. **Dev tooling: air CSS watch + Tailwind rebuild** - `6e64cfb` (chore)
+
+## Files Created/Modified
+- `backend/templates/auth_login.templ` — Migrated to AuthLayout, GoogleButton, AuthDivider, ui.FormField email+password, signup nav link; AuthProviderButtonsBlock removed
+- `backend/templates/auth_signup.templ` — Migrated to AuthLayout, GoogleButton, AuthDivider, ui.FormField email+password (new-password autocomplete, "12 characters minimum" placeholder), login nav link; signupCardBody removed
+- `backend/templates/auth_layout.templ` — Roboto font loaded from Google Fonts; Google button width set to max-content
+- `.air.toml` — .css added to include_ext; Tailwind CLI added to cmd so CSS rebuilds on every file change
+
+## Decisions Made
+- Google button set to `max-content` width (not `100%`) — matches Google Material Design branding guidelines; the pill button should be naturally sized, not stretched to fill the card
+- Roboto font loaded only in auth_layout.templ — auth pages are the only context that renders the gsi-material-button, so global stylesheet pollution is avoided
+- Auth handler test label `"Sign in with Google"` preserved — handlers were not changed; the label string already matched after Plan 01 established English labels in auth_components.templ
+- `.air.toml` CSS watching added as a dev-workflow fix — without it, CSS edits required a manual restart; adding `.css` to include_ext with Tailwind in the rebuild command closes the gap
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 1 - Bug] Google button font and icon sizing incorrect after initial migration**
+- **Found during:** Human-verify checkpoint (post-approval)
+- **Issue:** gsi-material-button was rendering without Roboto font (fallback sans-serif), SVG icon was oversized, and button stretched to 100% of card width instead of natural pill width
+- **Fix:** Added Roboto font `<link>` in auth_layout.templ; corrected SVG width/height to 18px; added `width: max-content` to `.gsi-material-button` CSS
+- **Files modified:** backend/templates/auth_layout.templ
+- **Verification:** Visual inspection confirmed correct rendering
+- **Committed in:** `4624fb3`, `70fe384`
+
+**2. [Rule 3 - Blocking] CSS edits not triggering air rebuild**
+- **Found during:** Post-checkpoint dev workflow testing
+- **Issue:** .air.toml did not include `.css` in `include_ext`, so editing auth.css did not trigger a server restart or Tailwind recompile during development
+- **Fix:** Added `css` to `include_ext` and included the Tailwind CLI compile command in the air `cmd` field
+- **Files modified:** .air.toml
+- **Verification:** CSS edits now cause air to rebuild and serve updated styles
+- **Committed in:** `6e64cfb`
+
+---
+
+**Total deviations:** 2 auto-fixed (1 bug post-checkpoint, 1 dev-workflow blocking issue)
+**Impact on plan:** Both fixes necessary for correct visual output and development ergonomics. No scope creep.
+
+## Issues Encountered
+- Initial Google button appearance did not match Material Design spec (font, icon, width) — caught at visual verification and fixed post-checkpoint before marking plan complete.
+
+## User Setup Required
+None - no external service configuration required.
+
+## Known Stubs
+None. Both auth pages render real provider data (`providers.Google.Configured`, `providers.Google.StartURL`) passed from the handler. FormField inputs are wired to real form values and error strings. No placeholder data flows to the UI.
+
+## Threat Flags
+None. Changes are template-only. CSRF token placement (`@ui.CSRFField(csrfToken)`) preserved in both form fragments. GoogleButton href uses `templ.SafeURL` (established in Plan 01). No new trust boundaries introduced.
+
+## Next Phase Readiness
+- Phase 14 execution is complete. Both auth pages show the full visual redesign: animated gradient background, brand logo, Google sign-in button (Material Design), design-system form fields, and cross-page navigation links.
+- HTMX swap behavior is intact — submitting either form triggers an inline fragment swap, not a full page reload.
+- No blockers for future phases. The auth CSS classes and AuthLayout pattern are stable for any subsequent auth-page iteration.
+
+---
+*Phase: 14-auth-pages*
+*Completed: 2026-05-16*