feat(go): M6.1 — template skeleton, embed.FS, HTML routes

Stand up the Go-native HTML frontend foundation:
- base.tmpl layout + nav/footer partials (three-tier nav, active-link highlighting)
- terminal-green-on-black theme extracted to static/css/app.css (served via embed.FS)
- HTMLHandler with stub pages for all five routes; / redirects to /adults
- NewRenderer parses per-page template sets at startup so parse failures abort boot
- Smoke test: each route returns 200 text/html with exactly one class="active" link

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

go/internal/web/assets.go

@@ -0,0 +1,9 @@
+package web
+
+import "embed"
+
+//go:embed templates
+var templateFS embed.FS
+
+//go:embed static
+var staticFS embed.FS

go/internal/web/html_handler.go

@@ -0,0 +1,34 @@
+package web
+
+import "net/http"
+
+// HTMLHandler serves the Go-native HTML frontend.
+type HTMLHandler struct {
+	renderer *Renderer
+	build    BuildInfo
+}
+
+// NewHTMLHandler constructs an HTMLHandler.
+func NewHTMLHandler(r *Renderer, b BuildInfo) *HTMLHandler {
+	return &HTMLHandler{renderer: r, build: b}
+}
+
+func (h *HTMLHandler) ServeAdults(w http.ResponseWriter, r *http.Request) {
+	h.renderer.Render(w, "adults", PageData{Active: "adults", Build: h.build})
+}
+
+func (h *HTMLHandler) ServeJuniors(w http.ResponseWriter, r *http.Request) {
+	h.renderer.Render(w, "juniors", PageData{Active: "juniors", Build: h.build})
+}
+
+func (h *HTMLHandler) ServePayments(w http.ResponseWriter, r *http.Request) {
+	h.renderer.Render(w, "payments", PageData{Active: "payments", Build: h.build})
+}
+
+func (h *HTMLHandler) ServeSync(w http.ResponseWriter, r *http.Request) {
+	h.renderer.Render(w, "sync", PageData{Active: "sync", Build: h.build})
+}
+
+func (h *HTMLHandler) ServeFlushCache(w http.ResponseWriter, r *http.Request) {
+	h.renderer.Render(w, "flush_cache", PageData{Active: "flush", Build: h.build})
+}

go/internal/web/html_handler_test.go

@@ -0,0 +1,54 @@
+package web_test
+
+import (
+	"fmt"
+	"fuj-management/go/internal/web"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+)
+
+func TestHTMLHandlerSmoke(t *testing.T) {
+	renderer, err := web.NewRenderer()
+	if err != nil {
+		t.Fatalf("NewRenderer: %v", err)
+	}
+	b := web.BuildInfo{Version: "v0", Commit: "abc1234", BuildDate: "2026-01-01"}
+	h := web.NewHTMLHandler(renderer, b)
+
+	cases := []struct {
+		path    string
+		handler http.HandlerFunc
+	}{
+		{"/adults", h.ServeAdults},
+		{"/juniors", h.ServeJuniors},
+		{"/payments", h.ServePayments},
+		{"/sync-bank", h.ServeSync},
+		{"/flush-cache", h.ServeFlushCache},
+	}
+
+	for _, tc := range cases {
+		t.Run(tc.path, func(t *testing.T) {
+			req := httptest.NewRequest(http.MethodGet, tc.path, nil)
+			w := httptest.NewRecorder()
+			tc.handler(w, req)
+
+			if w.Code != http.StatusOK {
+				t.Errorf("status = %d, want 200", w.Code)
+			}
+			if ct := w.Header().Get("Content-Type"); !strings.HasPrefix(ct, "text/html") {
+				t.Errorf("Content-Type = %q, want text/html", ct)
+			}
+
+			body := w.Body.String()
+			if n := strings.Count(body, `class="active"`); n != 1 {
+				t.Errorf(`class="active" count = %d, want 1`, n)
+			}
+			want := fmt.Sprintf(`href="%s" class="active"`, tc.path)
+			if !strings.Contains(body, want) {
+				t.Errorf("missing active link %q in body", want)
+			}
+		})
+	}
+}

go/internal/web/render.go

@@ -0,0 +1,53 @@
+package web
+
+import (
+	"fmt"
+	"html/template"
+	"log/slog"
+	"net/http"
+)
+
+// PageData is the view model passed to every HTML template.
+type PageData struct {
+	Active string
+	Build  BuildInfo
+}
+
+// Renderer parses and executes HTML templates from the embedded FS.
+type Renderer struct {
+	tmpls map[string]*template.Template
+}
+
+var pageNames = []string{"adults", "juniors", "payments", "sync", "flush_cache"}
+
+// NewRenderer parses all templates from the embedded FS.
+// A parse failure should be treated as a startup-time fatal error.
+func NewRenderer() (*Renderer, error) {
+	tmpls := make(map[string]*template.Template, len(pageNames))
+	for _, name := range pageNames {
+		t, err := template.New("").ParseFS(templateFS,
+			"templates/base.tmpl",
+			"templates/partials/nav.tmpl",
+			"templates/partials/footer.tmpl",
+			"templates/"+name+".tmpl",
+		)
+		if err != nil {
+			return nil, fmt.Errorf("parse template %q: %w", name, err)
+		}
+		tmpls[name] = t
+	}
+	return &Renderer{tmpls: tmpls}, nil
+}
+
+// Render executes the named template with data, writing to w.
+func (r *Renderer) Render(w http.ResponseWriter, name string, data any) {
+	t, ok := r.tmpls[name]
+	if !ok {
+		http.Error(w, "template not found: "+name, http.StatusInternalServerError)
+		return
+	}
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := t.ExecuteTemplate(w, "base", data); err != nil {
+		slog.Error("render template", "name", name, "err", err)
+	}
+}

go/internal/web/server.go

@@ -6,6 +6,7 @@ import (
 	"fuj-management/go/internal/services/membership"
 	"fuj-management/go/internal/web/api"
 	"fuj-management/go/internal/web/middleware"
+	"io/fs"
 	"log/slog"
 	"net/http"
 )
@@ -19,7 +20,12 @@ type BuildInfo struct {
 
 // Run registers routes and starts the HTTP server on addr.
 func Run(logger *slog.Logger, addr string, build BuildInfo, sources membership.Sources, cfg config.Config) error {
-	h := &api.Handler{
+	renderer, err := NewRenderer()
+	if err != nil {
+		return fmt.Errorf("init templates: %w", err)
+	}
+
+	ah := &api.Handler{
 		BuildVersion: build.Version,
 		BuildCommit:  build.Commit,
 		BuildDate:    build.BuildDate,
@@ -27,22 +33,34 @@ func Run(logger *slog.Logger, addr string, build BuildInfo, sources membership.S
 		Config:       cfg,
 		Logger:       logger,
 	}
+	hh := NewHTMLHandler(renderer, build)
+
+	staticSubFS, err := fs.Sub(staticFS, "static")
+	if err != nil {
+		return fmt.Errorf("static subfs: %w", err)
+	}
 
 	mux := http.NewServeMux()
-	mux.HandleFunc("GET /{$}", helloHandler(build))
-	mux.HandleFunc("GET /api/version", h.ServeVersion)
-	mux.HandleFunc("GET /api/adults", h.ServeAdults)
-	mux.HandleFunc("GET /api/juniors", h.ServeJuniors)
-	mux.HandleFunc("GET /api/payments", h.ServePayments)
+
+	// HTML routes
+	mux.HandleFunc("GET /{$}", func(w http.ResponseWriter, r *http.Request) {
+		http.Redirect(w, r, "/adults", http.StatusFound)
+	})
+	mux.HandleFunc("GET /adults", hh.ServeAdults)
+	mux.HandleFunc("GET /juniors", hh.ServeJuniors)
+	mux.HandleFunc("GET /payments", hh.ServePayments)
+	mux.HandleFunc("GET /sync-bank", hh.ServeSync)
+	mux.HandleFunc("GET /flush-cache", hh.ServeFlushCache)
+
+	// Static files
+	mux.Handle("/static/", http.StripPrefix("/static/", http.FileServerFS(staticSubFS)))
+
+	// JSON API routes
+	mux.HandleFunc("GET /api/version", ah.ServeVersion)
+	mux.HandleFunc("GET /api/adults", ah.ServeAdults)
+	mux.HandleFunc("GET /api/juniors", ah.ServeJuniors)
+	mux.HandleFunc("GET /api/payments", ah.ServePayments)
 
 	logger.Info("starting server", "addr", addr)
 	return http.ListenAndServe(addr, middleware.RequestTimer(logger, mux))
 }
-
-func helloHandler(build BuildInfo) http.HandlerFunc {
-	return func(w http.ResponseWriter, r *http.Request) {
-		w.Header().Set("Content-Type", "text/plain; charset=utf-8")
-		fmt.Fprintf(w, "fuj-go ok\nversion: %s\ncommit:  %s\nbuilt:   %s\n",
-			build.Version, build.Commit, build.BuildDate)
-	}
-}

go/internal/web/static/css/app.css

@@ -0,0 +1,477 @@
+body {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    background-color: #0c0c0c;
+    color: #cccccc;
+    padding: 10px;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 11px;
+    line-height: 1.2;
+}
+
+h1 {
+    color: #00ff00;
+    font-family: inherit;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 14px;
+}
+
+h2 {
+    color: #00ff00;
+    font-size: 12px;
+    margin-top: 30px;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    width: 100%;
+    max-width: 1200px;
+    border-bottom: 1px solid #333;
+    padding-bottom: 5px;
+}
+
+.nav {
+    margin-bottom: 20px;
+    font-size: 12px;
+    color: #555;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+}
+
+.nav > div {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+}
+
+.nav a {
+    color: #00ff00;
+    text-decoration: none;
+    padding: 2px 8px;
+    border: 1px solid #333;
+}
+
+.nav a.active {
+    color: #000;
+    background-color: #00ff00;
+    border-color: #00ff00;
+}
+
+.nav a:hover {
+    color: #fff;
+    border-color: #555;
+}
+
+.nav-archived a {
+    font-size: 10px;
+    color: #666;
+    border-color: #222;
+}
+
+.nav-archived a.active {
+    color: #ccc;
+    background-color: #333;
+    border-color: #555;
+}
+
+.nav-archived a:hover {
+    color: #999;
+    border-color: #444;
+}
+
+.description {
+    margin-bottom: 20px;
+    text-align: center;
+    color: #888;
+    max-width: 800px;
+}
+
+.description a {
+    color: #00ff00;
+    text-decoration: none;
+}
+
+.description a:hover {
+    text-decoration: underline;
+}
+
+.table-container {
+    background-color: transparent;
+    border: 1px solid #333;
+    box-shadow: none;
+    overflow-x: auto;
+    width: 100%;
+    max-width: 1200px;
+    margin-bottom: 30px;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: auto;
+}
+
+th,
+td {
+    padding: 2px 8px;
+    text-align: right;
+    border-bottom: 1px dashed #222;
+    white-space: nowrap;
+}
+
+th:first-child,
+td:first-child {
+    text-align: left;
+}
+
+th {
+    background-color: transparent;
+    color: #888888;
+    font-weight: normal;
+    border-bottom: 1px solid #555;
+    text-transform: lowercase;
+}
+
+tr:hover {
+    background-color: #1a1a1a;
+}
+
+.balance-pos {
+    color: #00ff00;
+}
+
+.balance-neg {
+    color: #ff3333;
+}
+
+.cell-ok {
+    color: #00ff00;
+}
+
+.cell-unpaid {
+    color: #ff3333;
+    background-color: rgba(255, 51, 51, 0.05);
+    position: relative;
+}
+
+.cell-unpaid-current {
+    color: #994444;
+    background-color: rgba(153, 68, 68, 0.05);
+    position: relative;
+}
+
+.cell-overridden {
+    color: #ffa500 !important;
+}
+
+.pay-btn {
+    display: none;
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #ff3333;
+    color: white;
+    border: none;
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 10px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.member-row:hover .pay-btn {
+    display: inline-block;
+}
+
+.cell-empty {
+    color: #444444;
+}
+
+.list-container {
+    width: 100%;
+    max-width: 1200px;
+    color: #888;
+    margin-bottom: 40px;
+}
+
+.list-item {
+    display: flex;
+    justify-content: flex-start;
+    gap: 20px;
+    padding: 1px 0;
+    border-bottom: 1px dashed #222;
+}
+
+.list-item-name {
+    color: #ccc;
+    min-width: 200px;
+}
+
+.list-item-val {
+    color: #00ff00;
+}
+
+.unmatched-row {
+    font-family: inherit;
+    display: grid;
+    grid-template-columns: 100px 100px 200px 1fr;
+    gap: 15px;
+    color: #888;
+    padding: 2px 0;
+    border-bottom: 1px dashed #222;
+}
+
+.unmatched-header {
+    color: #555;
+    border-bottom: 1px solid #333;
+    margin-bottom: 5px;
+}
+
+.filter-container {
+    width: 100%;
+    max-width: 1200px;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.filter-input {
+    background-color: #1a1a1a;
+    border: 1px solid #333;
+    color: #00ff00;
+    font-family: inherit;
+    font-size: 11px;
+    padding: 4px 8px;
+    width: 250px;
+    outline: none;
+}
+
+.filter-input:focus {
+    border-color: #00ff00;
+}
+
+.filter-select {
+    background-color: #1a1a1a;
+    border: 1px solid #333;
+    color: #00ff00;
+    font-family: inherit;
+    font-size: 11px;
+    padding: 4px 8px;
+    outline: none;
+}
+
+.filter-select:focus {
+    border-color: #00ff00;
+}
+
+.month-hidden {
+    display: none !important;
+}
+
+.filter-label {
+    color: #888;
+    text-transform: lowercase;
+}
+
+.info-icon {
+    color: #00ff00;
+    cursor: pointer;
+    margin-left: 5px;
+    font-size: 10px;
+    opacity: 0.5;
+}
+
+.info-icon:hover {
+    opacity: 1;
+}
+
+/* Modal Styles */
+#memberModal {
+    display: none !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.9);
+    z-index: 9999;
+    justify-content: center;
+    align-items: center;
+}
+
+#memberModal.active {
+    display: flex !important;
+}
+
+.modal-content {
+    background-color: #0c0c0c;
+    border: 1px solid #00ff00;
+    width: 90%;
+    max-width: 800px;
+    max-height: 85vh;
+    overflow-y: auto;
+    padding: 20px;
+    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
+    position: relative;
+}
+
+.modal-header {
+    border-bottom: 1px solid #333;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-title {
+    color: #00ff00;
+    font-size: 14px;
+    text-transform: uppercase;
+}
+
+.close-btn {
+    color: #ff3333;
+    cursor: pointer;
+    font-size: 14px;
+    text-transform: lowercase;
+}
+
+.modal-section {
+    margin-bottom: 25px;
+}
+
+.modal-section-title {
+    color: #555;
+    text-transform: uppercase;
+    font-size: 10px;
+    margin-bottom: 8px;
+    border-bottom: 1px dashed #222;
+}
+
+.raw-toggle {
+    color: #333;
+    font-size: 9px;
+    text-transform: lowercase;
+    margin-left: 8px;
+    text-decoration: none;
+    letter-spacing: 0;
+}
+
+.raw-toggle:hover {
+    color: #666;
+}
+
+.modal-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.modal-table th,
+.modal-table td {
+    text-align: left;
+    padding: 4px 0;
+    border-bottom: 1px dashed #1a1a1a;
+}
+
+.modal-table th {
+    color: #666;
+    font-weight: normal;
+    font-size: 10px;
+}
+
+.tx-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.tx-item {
+    padding: 8px 0;
+    border-bottom: 1px dashed #222;
+}
+
+.tx-meta {
+    color: #555;
+    font-size: 10px;
+    margin-bottom: 4px;
+}
+
+.tx-main {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.tx-amount {
+    color: #00ff00;
+}
+
+.tx-sender {
+    color: #ccc;
+}
+
+.tx-msg {
+    color: #888;
+    font-style: italic;
+}
+
+.footer {
+    margin-top: 50px;
+    margin-bottom: 20px;
+    color: #333;
+    font-size: 9px;
+    text-align: center;
+    width: 100%;
+    cursor: pointer;
+    user-select: none;
+}
+
+.perf-breakdown {
+    display: none;
+    margin-top: 5px;
+    color: #222;
+}
+
+/* QR Modal styles */
+#qrModal .modal-content {
+    max-width: 400px;
+    text-align: center;
+}
+
+.qr-image {
+    background: white;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 20px 0;
+    display: inline-block;
+}
+
+.qr-image img {
+    display: block;
+    width: 250px;
+    height: 250px;
+}
+
+.qr-details {
+    text-align: left;
+    margin-top: 15px;
+    font-size: 14px;
+    color: #ccc;
+}
+
+.qr-details div {
+    margin-bottom: 5px;
+}
+
+.qr-details span {
+    color: #00ff00;
+    font-family: monospace;
+}

go/internal/web/templates/adults.tmpl

@@ -0,0 +1,5 @@
+{{define "title"}}Adults{{end}}
+{{define "content"}}
+<h1>Adults Dashboard</h1>
+<p class="description">Coming in M6.2</p>
+{{end}}

go/internal/web/templates/base.tmpl

@@ -0,0 +1,15 @@
+{{define "base"}}<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FUJ — {{template "title" .}}</title>
+    <link rel="stylesheet" href="/static/css/app.css">
+</head>
+<body>
+{{template "nav" .}}
+{{template "content" .}}
+{{template "footer" .}}
+</body>
+</html>
+{{end}}

go/internal/web/templates/flush_cache.tmpl

@@ -0,0 +1,5 @@
+{{define "title"}}Flush Cache{{end}}
+{{define "content"}}
+<h1>Flush Cache</h1>
+<p class="description">Coming in M6.6</p>
+{{end}}

go/internal/web/templates/juniors.tmpl

@@ -0,0 +1,5 @@
+{{define "title"}}Juniors{{end}}
+{{define "content"}}
+<h1>Juniors Dashboard</h1>
+<p class="description">Coming in M6.3</p>
+{{end}}

go/internal/web/templates/partials/footer.tmpl

@@ -0,0 +1,3 @@
+{{define "footer"}}
+<div class="footer">{{.Build.Version}}@{{.Build.Commit}} | built {{.Build.BuildDate}}</div>
+{{end}}

go/internal/web/templates/partials/nav.tmpl

@@ -0,0 +1,17 @@
+{{define "nav"}}
+<div class="nav">
+    <div>
+        <a href="/adults"{{if eq .Active "adults"}} class="active"{{end}}>[Adults]</a>
+        <a href="/juniors"{{if eq .Active "juniors"}} class="active"{{end}}>[Juniors]</a>
+    </div>
+    <div class="nav-archived">
+        <span style="color: #666; margin-right: 5px;">Archived:</span>
+        <a href="/payments"{{if eq .Active "payments"}} class="active"{{end}}>[Payments Ledger]</a>
+    </div>
+    <div class="nav-archived">
+        <span style="color: #666; margin-right: 5px;">Tools:</span>
+        <a href="/sync-bank"{{if eq .Active "sync"}} class="active"{{end}}>[Sync Bank Data]</a>
+        <a href="/flush-cache"{{if eq .Active "flush"}} class="active"{{end}}>[Flush Cache]</a>
+    </div>
+</div>
+{{end}}

go/internal/web/templates/payments.tmpl

@@ -0,0 +1,5 @@
+{{define "title"}}Payments Ledger{{end}}
+{{define "content"}}
+<h1>Payments Ledger</h1>
+<p class="description">Coming in M6.4</p>
+{{end}}

go/internal/web/templates/sync.tmpl

@@ -0,0 +1,5 @@
+{{define "title"}}Sync Bank Data{{end}}
+{{define "content"}}
+<h1>Sync Bank Data</h1>
+<p class="description">Coming in M6.6</p>
+{{end}}