feat(adminapi): split admin UI into Routing + Analytics tabs

Alexey Panfilov · claude · Alexey Panfilov · commit 52d3f09d7348 · 2026-04-20T15:38:10.000+02:00
The usage dashboard was eating half the main page and pushing the
model browser below the fold. Move analytics behind a dedicated tab:

* Routing &amp; Models at / — what the admin page used to be before
  Stage A.3, minus the usage section that was inlined in A.3.
* Analytics at /analytics — the Usage &amp; Cost dashboard (totals cards,
  daily chart, by-model/role tables, expensive turns).

A shared partial (partials_layout.html) holds the common &lt;head&gt; CSS
and the tab strip so both pages stay visually consistent without
duplicating the style block. Each handler passes ActiveTab so the
correct tab is highlighted.

The /usage endpoint (htmx partial) is unchanged — it's what
/analytics lazy-loads into its frame on page load. Linking to /usage
directly still works; it just returns the section without the layout
chrome.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/internal/adminapi/handlers.go b/internal/adminapi/handlers.go
@@ -66,10 +66,11 @@ type uiFilters struct {
 }
 
 type indexData struct {
-	Routing uiRouting
-	Slots   []uiSlot // OpenRouter-backed slots only (for per-model assign buttons)
-	Models  []uiModel
-	Filters uiFilters
+	ActiveTab string // "routing" or "analytics" — drives tab highlight in layout
+	Routing   uiRouting
+	Slots     []uiSlot // OpenRouter-backed slots only (for per-model assign buttons)
+	Models    []uiModel
+	Filters   uiFilters
 }
 
 // --- Handlers ---
@@ -83,6 +84,16 @@ func (s *Server) handleIndex(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+func (s *Server) handleAnalytics(w http.ResponseWriter, r *http.Request) {
+	// Analytics page is a thin frame — the usage section lazy-loads via /usage.
+	// Still needs ActiveTab so the tab bar highlights the right entry.
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	if err := render(w, viewAnalytics, map[string]any{"ActiveTab": "analytics"}); err != nil {
+		s.logger.Error("render analytics", "err", err)
+		http.Error(w, "render error", http.StatusInternalServerError)
+	}
+}
+
 func (s *Server) handleModels(w http.ResponseWriter, r *http.Request) {
 	data := s.buildIndexData(r)
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
@@ -285,10 +296,11 @@ func (s *Server) buildIndexData(r *http.Request) indexData {
 			}
 		}
 		return indexData{
-			Routing: s.buildRouting(),
-			Slots:   s.openRouterSlots(),
-			Models:  models,
-			Filters: filters,
+			ActiveTab: "routing",
+			Routing:   s.buildRouting(),
+			Slots:     s.openRouterSlots(),
+			Models:    models,
+			Filters:   filters,
 		}
 	}
 
diff --git a/internal/adminapi/server.go b/internal/adminapi/server.go
@@ -112,4 +112,5 @@ func (s *Server) registerRoutes(mux *http.ServeMux) {
 	mux.Handle("/routing/", authed(http.HandlerFunc(s.handleRoleSet))) // POST /routing/{role}/set
 	mux.Handle("/refresh", authed(http.HandlerFunc(s.handleRefresh)))
 	mux.Handle("/usage", authed(http.HandlerFunc(s.handleUsage)))
+	mux.Handle("/analytics", authed(http.HandlerFunc(s.handleAnalytics)))
 }
diff --git a/internal/adminapi/templates.go b/internal/adminapi/templates.go
@@ -17,6 +17,7 @@ const (
 	viewModelsBrowser = "models_browser"
 	viewModelsContent = "models_content"
 	viewUsage         = "usage"
+	viewAnalytics     = "analytics"
 )
 
 // tmpls is the parsed template set. Entries are keyed by view name and
@@ -25,6 +26,7 @@ var tmpls = func() map[string]*template.Template {
 	out := map[string]*template.Template{}
 	// Shared partials are parsed into each view so {{template "..."}} calls work.
 	partials := []string{
+		"templates/partials_layout.html",
 		"templates/partials_routing.html",
 		"templates/partials_models_row.html",
 		"templates/partials_models_browser.html",
@@ -38,6 +40,7 @@ var tmpls = func() map[string]*template.Template {
 		viewModelsBrowser: "templates/partials_models_browser.html",
 		viewModelsContent: "templates/partials_models_browser.html",
 		viewUsage:         "templates/usage.html",
+		viewAnalytics:     "templates/analytics.html",
 	}
 	funcs := template.FuncMap{
 		"priceUSD": func(v float64) string {
diff --git a/internal/adminapi/templates/analytics.html b/internal/adminapi/templates/analytics.html
@@ -0,0 +1,16 @@
+{{define "analytics"}}<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Analytics — Personal Assistant</title>
+  {{template "admin_head" .}}
+</head>
+<body>
+  <h1>Personal Assistant · Analytics</h1>
+  {{template "admin_tabs" .}}
+
+  <section class="admin-section" id="usage-section-wrap"
+           hx-get="/usage?period=7d" hx-trigger="load" hx-swap="innerHTML">
+    <div class="card"><div class="card__body" style="color:var(--text-secondary);">Loading usage…</div></div>
+  </section>
+</body>
+</html>{{end}}
diff --git a/internal/adminapi/templates/index.html b/internal/adminapi/templates/index.html
@@ -1,64 +1,17 @@
 {{define "index"}}<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Admin — Personal Assistant</title>
-  <link rel="stylesheet" href="/static/dzarlax.css">
-  <script src="/static/dzarlax.js" defer></script>
-  <script src="/static/htmx.min.js" defer></script>
-  <style>
-    body { padding: 1.5rem 2rem; margin: 0; max-width: none; }
-    h1   { margin-bottom: 1rem; }
-    .admin-section { margin-bottom: 2rem; }
-    .filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
-    .filters label { display: inline-flex; gap: 0.25rem; align-items: center; }
-    .model-id { font-family: var(--font-mono, monospace); font-size: 0.875rem; }
-    .caps-badges .badge { margin-right: 0.25rem; }
-    .assign-buttons { margin-top: 0.25rem; }
-    .assign-buttons .btn { margin-right: 0.25rem; margin-bottom: 0.25rem; }
-    .price-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
-    .preset-banner { padding: 0.75rem 1rem; border-radius: var(--radius, 8px); background: var(--surface-2, #E8E6E3); margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
-    .preset-banner .preset-meta { color: var(--text-secondary, rgba(0,0,0,0.6)); font-size: 0.875rem; margin-top: 0.25rem; }
-    .preset-banner details { margin-top: 0.5rem; font-size: 0.85em; }
-    .preset-banner details > summary { cursor: pointer; color: var(--text-secondary, rgba(0,0,0,0.6)); user-select: none; list-style: none; }
-    .preset-banner details > summary::-webkit-details-marker { display: none; }
-    .preset-banner details > summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s; }
-    .preset-banner details[open] > summary::before { content: "▾ "; }
-    .preset-banner details .formula { margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(0,0,0,0.04); border-left: 3px solid var(--accent, #888); border-radius: 4px; line-height: 1.45; font-size: 0.9em; }
-    .preset-banner details .formula code { background: rgba(0,0,0,0.06); padding: 0 0.25rem; border-radius: 3px; }
-    .suggest-btn { margin-left: 0.5rem; }
-    .table-wrap { overflow-x: auto; }
-    .table-wrap table { width: 100%; }
-    .usage-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
-    .usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
-    .usage-card { padding: 0.75rem 1rem; border-radius: var(--radius, 8px); background: var(--surface-2, #E8E6E3); }
-    .usage-card__label { font-size: 0.8em; color: var(--text-secondary, rgba(0,0,0,0.6)); text-transform: uppercase; letter-spacing: 0.05em; }
-    .usage-card__value { font-size: 1.5em; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
-    .usage-card__sub { font-size: 0.8em; color: var(--text-secondary, rgba(0,0,0,0.6)); margin-top: 0.25rem; }
-    .usage-chart-wrap { margin-bottom: 1.5rem; padding: 0.75rem; background: rgba(0,0,0,0.03); border-radius: var(--radius, 8px); }
-    .usage-chart-title { font-size: 0.85em; margin-bottom: 0.5rem; color: var(--text-secondary, rgba(0,0,0,0.7)); }
-    .usage-chart { width: 100%; height: auto; display: block; }
-    .usage-chart-legend { font-size: 0.85em; display: flex; gap: 1.5rem; margin-top: 0.5rem; color: var(--text-secondary, rgba(0,0,0,0.7)); }
-    .usage-chart-legend__swatch { display: inline-block; width: 10px; height: 10px; margin-right: 0.25rem; border-radius: 2px; vertical-align: middle; }
-    .usage-section-h { font-size: 0.95em; margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600; }
-    .usage-turns td { vertical-align: top; }
-    .usage-turn__q { color: var(--text-primary, #000); margin-bottom: 0.25rem; font-size: 0.9em; }
-    .usage-turn__a { color: var(--text-secondary, rgba(0,0,0,0.7)); font-size: 0.9em; }
-  </style>
+  {{template "admin_head" .}}
 </head>
 <body>
   <h1>Personal Assistant · Admin</h1>
+  {{template "admin_tabs" .}}
 
   <section class="admin-section" id="routing-section">
     {{template "routing_section" .Routing}}
   </section>
 
-  <section class="admin-section" id="usage-section-wrap"
-           hx-get="/usage?period=7d" hx-trigger="load" hx-swap="innerHTML">
-    <div class="card"><div class="card__body" style="color:var(--text-secondary);">Loading usage…</div></div>
-  </section>
-
   <section class="admin-section" id="models-section">
     <div class="card">
       <div class="card__header" style="display:flex;justify-content:space-between;align-items:center;">
diff --git a/internal/adminapi/templates/partials_layout.html b/internal/adminapi/templates/partials_layout.html
@@ -0,0 +1,57 @@
+{{define "admin_head"}}
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="stylesheet" href="/static/dzarlax.css">
+<script src="/static/dzarlax.js" defer></script>
+<script src="/static/htmx.min.js" defer></script>
+<style>
+  body { padding: 1.5rem 2rem; margin: 0; max-width: none; }
+  h1   { margin-bottom: 1rem; }
+  .admin-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); }
+  .admin-tabs__tab { padding: 0.5rem 1rem; color: var(--text-secondary, rgba(0,0,0,0.6)); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
+  .admin-tabs__tab:hover { color: var(--text-primary, #000); }
+  .admin-tabs__tab--active { color: var(--text-primary, #000); border-bottom-color: var(--accent, #3b82f6); font-weight: 600; }
+  .admin-section { margin-bottom: 2rem; }
+  .filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
+  .filters label { display: inline-flex; gap: 0.25rem; align-items: center; }
+  .model-id { font-family: var(--font-mono, monospace); font-size: 0.875rem; }
+  .caps-badges .badge { margin-right: 0.25rem; }
+  .assign-buttons { margin-top: 0.25rem; }
+  .assign-buttons .btn { margin-right: 0.25rem; margin-bottom: 0.25rem; }
+  .price-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
+  .preset-banner { padding: 0.75rem 1rem; border-radius: var(--radius, 8px); background: var(--surface-2, #E8E6E3); margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
+  .preset-banner .preset-meta { color: var(--text-secondary, rgba(0,0,0,0.6)); font-size: 0.875rem; margin-top: 0.25rem; }
+  .preset-banner details { margin-top: 0.5rem; font-size: 0.85em; }
+  .preset-banner details > summary { cursor: pointer; color: var(--text-secondary, rgba(0,0,0,0.6)); user-select: none; list-style: none; }
+  .preset-banner details > summary::-webkit-details-marker { display: none; }
+  .preset-banner details > summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s; }
+  .preset-banner details[open] > summary::before { content: "▾ "; }
+  .preset-banner details .formula { margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(0,0,0,0.04); border-left: 3px solid var(--accent, #888); border-radius: 4px; line-height: 1.45; font-size: 0.9em; }
+  .preset-banner details .formula code { background: rgba(0,0,0,0.06); padding: 0 0.25rem; border-radius: 3px; }
+  .suggest-btn { margin-left: 0.5rem; }
+  .table-wrap { overflow-x: auto; }
+  .table-wrap table { width: 100%; }
+  .usage-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
+  .usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
+  .usage-card { padding: 0.75rem 1rem; border-radius: var(--radius, 8px); background: var(--surface-2, #E8E6E3); }
+  .usage-card__label { font-size: 0.8em; color: var(--text-secondary, rgba(0,0,0,0.6)); text-transform: uppercase; letter-spacing: 0.05em; }
+  .usage-card__value { font-size: 1.5em; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
+  .usage-card__sub { font-size: 0.8em; color: var(--text-secondary, rgba(0,0,0,0.6)); margin-top: 0.25rem; }
+  .usage-chart-wrap { margin-bottom: 1.5rem; padding: 0.75rem; background: rgba(0,0,0,0.03); border-radius: var(--radius, 8px); }
+  .usage-chart-title { font-size: 0.85em; margin-bottom: 0.5rem; color: var(--text-secondary, rgba(0,0,0,0.7)); }
+  .usage-chart { width: 100%; height: auto; display: block; }
+  .usage-chart-legend { font-size: 0.85em; display: flex; gap: 1.5rem; margin-top: 0.5rem; color: var(--text-secondary, rgba(0,0,0,0.7)); }
+  .usage-chart-legend__swatch { display: inline-block; width: 10px; height: 10px; margin-right: 0.25rem; border-radius: 2px; vertical-align: middle; }
+  .usage-section-h { font-size: 0.95em; margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: 600; }
+  .usage-turns td { vertical-align: top; }
+  .usage-turn__q { color: var(--text-primary, #000); margin-bottom: 0.25rem; font-size: 0.9em; }
+  .usage-turn__a { color: var(--text-secondary, rgba(0,0,0,0.7)); font-size: 0.9em; }
+</style>
+{{end}}
+
+{{define "admin_tabs"}}
+<nav class="admin-tabs">
+  <a class="admin-tabs__tab {{if eq .ActiveTab "routing"}}admin-tabs__tab--active{{end}}" href="/">Routing & Models</a>
+  <a class="admin-tabs__tab {{if eq .ActiveTab "analytics"}}admin-tabs__tab--active{{end}}" href="/analytics">Analytics</a>
+</nav>
+{{end}}

Original file line number	Diff line number	Diff line change
`@@ -66,10 +66,11 @@ type uiFilters struct {`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`type indexData struct {`
`69`		`- Routing uiRouting`
`70`		`- Slots []uiSlot // OpenRouter-backed slots only (for per-model assign buttons)`
`71`		`- Models []uiModel`
`72`		`- Filters uiFilters`
	`69`	`+ ActiveTab string // "routing" or "analytics" — drives tab highlight in layout`
	`70`	`+ Routing uiRouting`
	`71`	`+ Slots []uiSlot // OpenRouter-backed slots only (for per-model assign buttons)`
	`72`	`+ Models []uiModel`
	`73`	`+ Filters uiFilters`
`73`	`74`	`}`
`74`	`75`
`75`	`76`	`// --- Handlers ---`
`@@ -83,6 +84,16 @@ func (s Server) handleIndex(w http.ResponseWriter, r http.Request) {`
`83`	`84`	`}`
`84`	`85`	`}`
`85`	`86`
	`87`	`+func (s Server) handleAnalytics(w http.ResponseWriter, r http.Request) {`
	`88`	`+ // Analytics page is a thin frame — the usage section lazy-loads via /usage.`
	`89`	`+ // Still needs ActiveTab so the tab bar highlights the right entry.`
	`90`	`+ w.Header().Set("Content-Type", "text/html; charset=utf-8")`
	`91`	`+ if err := render(w, viewAnalytics, map[string]any{"ActiveTab": "analytics"}); err != nil {`
	`92`	`+ s.logger.Error("render analytics", "err", err)`
	`93`	`+ http.Error(w, "render error", http.StatusInternalServerError)`
	`94`	`+ }`
	`95`	`+}`
	`96`	`+`
`86`	`97`	`func (s Server) handleModels(w http.ResponseWriter, r http.Request) {`
`87`	`98`	`data := s.buildIndexData(r)`
`88`	`99`	`w.Header().Set("Content-Type", "text/html; charset=utf-8")`
`@@ -285,10 +296,11 @@ func (s Server) buildIndexData(r http.Request) indexData {`
`285`	`296`	`}`
`286`	`297`	`}`
`287`	`298`	`return indexData{`
`288`		`- Routing: s.buildRouting(),`
`289`		`- Slots: s.openRouterSlots(),`
`290`		`- Models: models,`
`291`		`- Filters: filters,`
	`299`	`+ ActiveTab: "routing",`
	`300`	`+ Routing: s.buildRouting(),`
	`301`	`+ Slots: s.openRouterSlots(),`
	`302`	`+ Models: models,`
	`303`	`+ Filters: filters,`
`292`	`304`	`}`
`293`	`305`	`}`
`294`	`306`
Original file line number	Diff line number	Diff line change
`@@ -112,4 +112,5 @@ func (s Server) registerRoutes(mux http.ServeMux) {`
`112`	`112`	`mux.Handle("/routing/", authed(http.HandlerFunc(s.handleRoleSet))) // POST /routing/{role}/set`
`113`	`113`	`mux.Handle("/refresh", authed(http.HandlerFunc(s.handleRefresh)))`
`114`	`114`	`mux.Handle("/usage", authed(http.HandlerFunc(s.handleUsage)))`
	`115`	`+ mux.Handle("/analytics", authed(http.HandlerFunc(s.handleAnalytics)))`
`115`	`116`	`}`