[jayleaton]

Problem

The Go template has a server, JSON API and auth, but no web UI: server.Deps.UI is nil, so every page of the original Next.js app (home, why, login, signup, forgot/reset password, verify email + success, dashboard) is missing.

How

Adds the HTML transport as apps/web/ui: server-rendered templ pages, Datastar 1.0.4 over SSE, Tailwind v4. The server mounts it in cmd/server as UI: ui.New(ui.Deps{Auth: authn, Users: users, ...}).Handler(); nothing else in internal/* changes. make css rebuilds the committed Tailwind output. make generate and the CI generated-code check already run templ generate.

apps/web/ui
├── ui (deps.go, ui.go, handlers.go)  ui.New(Deps).Routes(mux) / Handler(); Auth + Users interfaces
│     *auth.Auth and *services.UserService satisfy them as is (compile-time asserted)
├── view/      layout shell (header: logout, theme, language), inputs, alerts, skeletons
├── welcome/   template welcome + /why (behind config.Features.TemplateWelcome, deletable)
├── i18n/      en/ja messages ported from the original (keys only added), cookie > Accept-Language
├── routes/    the UI's own action endpoints; pages use config.AppRoutes
├── static/    embedded app.css (Tailwind standalone CLI v4.3.3, checksum-verified) + datastar-1.0.4.js (SHA-256 pinned)
├── uifake/    in-memory Auth/Users for tests and the preview
└── cmd/preview  go run ./apps/web/ui/cmd/preview -> every page with fakes on 0.0.0.0:3001

• Forms (login, signup, forgot, reset, resend verification, settings, delete account) are real <form>s with data-on:submit="@post(..., {contentType: 'form'})". A Datastar request gets patched fragments or a redirect over SSE; a plain post (no JS) gets the full page or a 303 from the same handler. data-indicator drives the loading labels, replacing loading.tsx.
• Server push example: GET /dashboard/live streams the clock and session expiry every second, and patches the account card when the user changes in another tab. The notice appears only in the other tabs.
• Layering: pages link through config.AppRoutes and read config.Features. The settings form is validated with validate.UpdateUserSettings and calls UpdateUserSettings / DeleteAllUserData on the service. Auth types and auth.Err* are used directly. The package imports neither pgx nor packages/database.
• Client JS: only Datastar attributes. The theme is a cookie, and the server renders <html class>, so there is no flash.

Real server (make db-up && make migrate && make dev, headless Chromium, real auth + Postgres)

• Sign up and sign in:
  • Sign up lands on the dashboard; dev has no email verification.
  • The live card connects and ticks: 07:13:38, then 07:13:42.
  • Signing in again shows the saved name.
• Name save and logout:
  • The save shows "Settings saved." and patches the account card.
  • Postgres has name = 'Real User Renamed' for the account.
  • Logout lands on /login and leaves 0 sessions in Postgres.
  • A wrong password shows "Invalid credentials".
• Language: switching to ja gives /login with lang="ja" and the heading 「アカウントにサインイン」.
• Smoke checks: /healthz returns {"data":{"status":"ok"}}, and /, /login, /signup, /why, /static/app.css return 200.

Checks (on 2fd7510 + this branch)

• make ci: exit 0. Build, check-generated (templ + sqlc, no diff), gofmt + golangci-lint 0 issues, lint-layering all ok (incl. apps/web/ui must not import packages/database), go test -race ./... all packages ok.
• go test -race -count=1 ./apps/web/ui/...: 66 tests pass, 0 fail.
  • Handler tests (httptest + fakes): status codes, SSE fragments, cookies, cross-origin rejection, the no-JS fallback, and the live stream over a real connection.
  • templ render tests for every page/state in en and ja, failing on any untranslated key.
  • A test that fails when a locale lacks a key used in templates. Mutation-checked: deleting one ja key fails 3 tests.
  • The Datastar pin is checked by hash.
• Every commit builds and vets on its own (git rebase --exec).
• Real headless browser (@playwright/cli 0.1.22, Chromium) against the preview:
  • login error and success; signup; email-taken
  • forgot and reset (mismatch, success, reused link)
  • verify flow with the 5-minute resend countdown
  • settings save (posts only tab,name; email read-only)
  • cross-tab live update; delete account; logout
  • language switcher; theme persisted across reload
  • header right edge = content right edge = 1192px at 1280px wide

Evidence

Before: main has no UI (server.Deps.UI is nil).
After: 42 screenshots, each page/state in en and ja, at ~/Documents/spark-work/zig-dsv41-scratch/web-ui-shots/ on the dev box (local paths, not uploaded):

#	state	#	state
01	home (welcome)	12	reset password done
02	why	13	reset password invalid link
03	home (welcome off)	14	verify email
04	login	15	verify email resent (countdown)
05	login error	16	verify success page, failed state
06	language menu	17	dashboard
07	signup	18	dashboard settings saved
08	forgot password	19	dashboard delete confirm
09	forgot password sent	20	dashboard dark
10	reset password	21	login dark
11	reset password mismatch

Files: en-NN-<state>.png and ja-NN-<state>.png. Real-server shots: real-01-dashboard-after-signup.png, real-02-settings-saved.png, real-03-dashboard-after-signin.png, real-04-login-ja.png. The original app was compared by its markup (classes ported one-to-one), not run side by side.

Choices to revisit

• i18n is a small in-house lookup, not go-i18n: the original messages have no plurals or placeholders. Keys added for strings the original hardcoded or that are new: common.home, components.themeToggle.*, pages.home.*, pages.dashboard.{settingsForm,deleteAccount,live}.*, errors.{emailTaken,invalidInput,passwordTooLong,tooManyRequests}.
• The dashboard gains a settings card (name only, email read-only) and a delete-account card. The original dashboard had neither.
• The welcome copy now names Go paths (services, route wrapper, validate, config/features.go) instead of Next.js files. Hosting says "any container host" instead of Vercel.
• CSS freshness is not checked in CI. That would download the 110 MB Tailwind CLI per run; make css regenerates it.
• UI action paths (/logout, /locale, /dashboard/live, /dashboard/settings, /dashboard/delete-account, /static/) live in apps/web/ui/routes, because config is outside this PR. They can move into config.AppRoutes with the wiring PR.
• The live-update hub is in-process. With several instances it needs Postgres LISTEN/NOTIFY or similar.
• The verify-email success page POSTs the token from a Datastar data-init (link scanners doing GETs cannot spend it). It also handles links that auth's own GET /api/auth/verify-email already completed.
• POST actions use stdlib http.CrossOriginProtection.
• The theme toggle stores a theme cookie instead of localStorage, so the server can render the right class.

Merge Danger

Door: two-way. Reverting removes the pages and the UI: line. No migration, schema or stored data is added; the UI writes only through the existing auth and user service.

Blast Radius: web. Every non-API path (/ and the pages) is now served by the UI instead of 404. /api/* and /healthz are matched first and unchanged. Shared files: go.mod/go.sum (a-h/templ incl. its tool directive, datastar-go), cmd/server/main.go (+5 lines) and the Makefile (css target).

🤖 Generated with Claude Code