Changeset 0.22.5 (#147)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
2026-03-03 09:58:23 +00:00
parent 3953dcf364
commit 45fe965c32
32 changed files with 3021 additions and 11 deletions
--- a/server/pages/loaders.go
+++ b/server/pages/loaders.go
@@ -0,0 +1,412 @@
+package pages
+
+import (
+	"context"
+	"fmt"
+	"log"
+
+	"github.com/gin-gonic/gin"
+
+	"git.gobha.me/xcaliber/chat-switchboard/providers"
+	"git.gobha.me/xcaliber/chat-switchboard/store"
+)
+
+// ── Types for template data ──────────────────
+
+// ModelOption is a flat model for template dropdowns.
+type ModelOption struct {
+	ProviderConfigID string `json:"provider_config_id"`
+	ProviderName     string `json:"provider_name"`
+	ModelID          string `json:"model_id"`
+	DisplayName      string `json:"display_name"`
+	ModelType        string `json:"model_type"`
+}
+
+// ProviderOption for template dropdowns.
+type ProviderOption struct {
+	ID   string `json:"id"`
+	Name string `json:"name"`
+}
+
+// TeamOption for template dropdowns.
+type TeamOption struct {
+	ID          string `json:"id"`
+	Name        string `json:"name"`
+	Description string `json:"description,omitempty"`
+	MemberCount int    `json:"member_count,omitempty"`
+	IsActive    bool   `json:"is_active"`
+}
+
+// ProviderDetail is an enriched provider for the providers table.
+type ProviderDetail struct {
+	ID         string `json:"id"`
+	Name       string `json:"name"`
+	Provider   string `json:"provider"`
+	Scope      string `json:"scope"`
+	Endpoint   string `json:"endpoint"`
+	ModelCount int    `json:"model_count"`
+}
+
+// ProviderTypeOption for the provider type dropdown.
+type ProviderTypeOption struct {
+	ID   string `json:"id"`
+	Name string `json:"name"`
+}
+
+// UserRow is a user for the admin users table.
+type UserRow struct {
+	ID          string `json:"id"`
+	Username    string `json:"username"`
+	Email       string `json:"email"`
+	DisplayName string `json:"display_name"`
+	Role        string `json:"role"`
+	IsActive    bool   `json:"is_active"`
+}
+
+// RoleConfig holds a role's current settings.
+type RoleConfig struct {
+	Name     string         `json:"name"`
+	Primary  *RoleSelection `json:"primary"`
+	Fallback *RoleSelection `json:"fallback"`
+}
+
+// RoleSelection is provider + model pair for a role slot.
+type RoleSelection struct {
+	ProviderID string `json:"provider_config_id"`
+	ModelID    string `json:"model_id"`
+}
+
+// ── Page data structs ────────────────────────
+
+// AdminPageData is what the admin surface templates receive.
+type AdminPageData struct {
+	Section         string               `json:"section"`
+	Category        string               `json:"category"`
+	Providers       []ProviderOption     `json:"providers"`
+	ProviderDetails []ProviderDetail     `json:"provider_details,omitempty"`
+	ProviderTypes   []ProviderTypeOption `json:"provider_types,omitempty"`
+	Models          []ModelOption        `json:"models"`
+	Teams           []TeamOption         `json:"teams"`
+	Users           []UserRow            `json:"users,omitempty"`
+	Roles           []RoleConfig         `json:"roles"`
+	Policies        any                  `json:"policies,omitempty"`
+}
+
+// ChatPageData is what the chat surface templates receive.
+type ChatPageData struct {
+	ChatID string `json:"chat_id,omitempty"`
+}
+
+// EditorPageData provides workspace context for the editor surface shell.
+// editor-mode.js builds CodeMirror, file tree, etc. inside the template containers.
+type EditorPageData struct {
+	WorkspaceID   string `json:"WorkspaceID"`
+	WorkspaceName string `json:"WorkspaceName"`
+}
+
+// NotesPageData provides context for the notes surface shell.
+type NotesPageData struct {
+	NoteID string `json:"NoteID,omitempty"`
+}
+
+// SettingsPageData is what the settings surface templates receive.
+type SettingsPageData struct {
+	Section string `json:"section"`
+}
+
+// ── Loader registration ──────────────────────
+
+func (e *Engine) registerLoaders() {
+	e.RegisterLoader("admin", e.adminLoader)
+	e.RegisterLoader("chat", e.chatLoader)
+	e.RegisterLoader("editor", e.editorLoader)
+	e.RegisterLoader("notes", e.notesLoader)
+	e.RegisterLoader("settings", e.settingsLoader)
+}
+
+// ── Admin loader ─────────────────────────────
+// Pre-loads ALL dropdown data. Fixes bugs #1 (model roles) and #2 (team scope).
+
+func (e *Engine) adminLoader(c *gin.Context, s store.Stores) (any, error) {
+	ctx := context.Background()
+	section := c.Param("section")
+	if section == "" {
+		section = "overview"
+	}
+
+	data := &AdminPageData{
+		Section:  section,
+		Category: sectionCategory(section),
+	}
+
+	// ── Providers (global scope) ─────────────
+	if s.Providers != nil {
+		configs, err := s.Providers.ListGlobal(ctx)
+		if err != nil {
+			log.Printf("[pages/admin] Failed to list providers: %v", err)
+		} else {
+			for _, pc := range configs {
+				name := pc.Name
+				if name == "" {
+					name = pc.Provider
+				}
+				data.Providers = append(data.Providers, ProviderOption{
+					ID:   pc.ID,
+					Name: name,
+				})
+			}
+		}
+	}
+
+	// ── Teams ────────────────────────────────
+	if s.Teams != nil {
+		teams, err := s.Teams.List(ctx)
+		if err != nil {
+			log.Printf("[pages/admin] Failed to list teams: %v", err)
+		} else {
+			for _, t := range teams {
+				data.Teams = append(data.Teams, TeamOption{
+					ID:          t.ID,
+					Name:        t.Name,
+					Description: t.Description,
+					MemberCount: t.MemberCount,
+					IsActive:    t.IsActive,
+				})
+			}
+		}
+	}
+
+	// ── Full model catalog with model_type ───
+	// This is what fixes bug #1: all models from all providers,
+	// including embedding models, with their model_type intact.
+	if s.Catalog != nil {
+		entries, err := s.Catalog.ListAllGlobal(ctx)
+		if err != nil {
+			log.Printf("[pages/admin] Failed to list catalog: %v", err)
+		} else {
+			provNames := make(map[string]string, len(data.Providers))
+			for _, p := range data.Providers {
+				provNames[p.ID] = p.Name
+			}
+			for _, entry := range entries {
+				mt := entry.ModelType
+				if mt == "" {
+					mt = "chat"
+				}
+				dn := entry.DisplayName
+				if dn == "" {
+					dn = entry.ModelID
+				}
+				data.Models = append(data.Models, ModelOption{
+					ProviderConfigID: entry.ProviderConfigID,
+					ProviderName:     provNames[entry.ProviderConfigID],
+					ModelID:          entry.ModelID,
+					DisplayName:      dn,
+					ModelType:        mt,
+				})
+			}
+		}
+	}
+
+	// ── Section-specific data ────────────────
+	switch section {
+	case "roles":
+		data.Roles = e.loadRolesConfig(ctx, s)
+	case "routing":
+		if s.RoutingPolicies != nil {
+			policies, err := s.RoutingPolicies.ListAll(ctx)
+			if err == nil {
+				data.Policies = policies
+			}
+		}
+	case "providers":
+		data.ProviderTypes = loadProviderTypes()
+		data.ProviderDetails = e.loadProviderDetails(ctx, s, data.Providers, data.Models)
+	case "users":
+		data.Users = e.loadUsers(ctx, s)
+	}
+
+	return data, nil
+}
+
+// loadRolesConfig reads current role assignments.
+func (e *Engine) loadRolesConfig(ctx context.Context, s store.Stores) []RoleConfig {
+	roleNames := []string{"utility", "embedding"}
+	roles := make([]RoleConfig, 0, len(roleNames))
+
+	if s.GlobalConfig == nil {
+		for _, name := range roleNames {
+			roles = append(roles, RoleConfig{Name: name})
+		}
+		return roles
+	}
+
+	raw, err := s.GlobalConfig.Get(ctx, "model_roles")
+	if err != nil || raw == nil {
+		for _, name := range roleNames {
+			roles = append(roles, RoleConfig{Name: name})
+		}
+		return roles
+	}
+
+	rolesMap, ok := raw["roles"].(map[string]any)
+	if !ok {
+		rolesMap = raw
+	}
+
+	for _, name := range roleNames {
+		rc := RoleConfig{Name: name}
+		if roleData, ok := rolesMap[name].(map[string]any); ok {
+			if primary, ok := roleData["primary"].(map[string]any); ok {
+				rc.Primary = &RoleSelection{
+					ProviderID: fmt.Sprintf("%v", primary["provider_config_id"]),
+					ModelID:    fmt.Sprintf("%v", primary["model_id"]),
+				}
+			}
+			if fallback, ok := roleData["fallback"].(map[string]any); ok {
+				rc.Fallback = &RoleSelection{
+					ProviderID: fmt.Sprintf("%v", fallback["provider_config_id"]),
+					ModelID:    fmt.Sprintf("%v", fallback["model_id"]),
+				}
+			}
+		}
+		roles = append(roles, rc)
+	}
+
+	return roles
+}
+
+// ── Chat loader ──────────────────────────────
+
+func (e *Engine) chatLoader(c *gin.Context, s store.Stores) (any, error) {
+	chatID := c.Param("chatID")
+	return &ChatPageData{ChatID: chatID}, nil
+}
+
+// ── Admin helpers ────────────────────────────
+
+// sectionCategory maps an admin section to its category tab.
+func sectionCategory(section string) string {
+	switch section {
+	case "users", "teams", "groups":
+		return "people"
+	case "providers", "models", "presets", "roles", "knowledgeBases", "memory":
+		return "ai"
+	case "health", "routing", "capabilities":
+		return "routing"
+	case "settings", "storage", "extensions":
+		return "system"
+	case "usage", "audit", "stats":
+		return "monitoring"
+	default:
+		return "ai" // default landing
+	}
+}
+
+// loadProviderTypes returns the registered provider type metadata.
+func loadProviderTypes() []ProviderTypeOption {
+	types := providers.ListTypes()
+	out := make([]ProviderTypeOption, 0, len(types))
+	for _, t := range types {
+		out = append(out, ProviderTypeOption{ID: t.ID, Name: t.Name})
+	}
+	return out
+}
+
+// loadProviderDetails enriches providers with model counts.
+func (e *Engine) loadProviderDetails(ctx context.Context, s store.Stores, provs []ProviderOption, models []ModelOption) []ProviderDetail {
+	// Count models per provider
+	counts := make(map[string]int)
+	for _, m := range models {
+		counts[m.ProviderConfigID]++
+	}
+
+	// Get full provider configs for endpoint/scope
+	if s.Providers == nil {
+		return nil
+	}
+	configs, err := s.Providers.ListGlobal(ctx)
+	if err != nil {
+		log.Printf("[pages/admin] Failed to list provider details: %v", err)
+		return nil
+	}
+
+	out := make([]ProviderDetail, 0, len(configs))
+	for _, pc := range configs {
+		name := pc.Name
+		if name == "" {
+			name = pc.Provider
+		}
+		out = append(out, ProviderDetail{
+			ID:         pc.ID,
+			Name:       name,
+			Provider:   pc.Provider,
+			Scope:      pc.Scope,
+			Endpoint:   pc.Endpoint,
+			ModelCount: counts[pc.ID],
+		})
+	}
+	return out
+}
+
+// loadUsers returns the user list for the admin users table.
+func (e *Engine) loadUsers(ctx context.Context, s store.Stores) []UserRow {
+	if s.Users == nil {
+		return nil
+	}
+	users, _, err := s.Users.List(ctx, store.ListOptions{Limit: 500, Sort: "username", Order: "asc"})
+	if err != nil {
+		log.Printf("[pages/admin] Failed to list users: %v", err)
+		return nil
+	}
+	out := make([]UserRow, 0, len(users))
+	for _, u := range users {
+		out = append(out, UserRow{
+			ID:          u.ID,
+			Username:    u.Username,
+			Email:       u.Email,
+			DisplayName: u.DisplayName,
+			Role:        u.Role,
+			IsActive:    u.IsActive,
+		})
+	}
+	return out
+}
+
+
+// ── Editor loader ────────────────────────────
+// Resolves workspace from URL param. The heavy lifting (file tree, CodeMirror)
+// is done client-side by editor-mode.js.
+
+func (e *Engine) editorLoader(c *gin.Context, s store.Stores) (any, error) {
+	wsID := c.Param("wsId")
+	data := &EditorPageData{WorkspaceID: wsID}
+
+	if wsID != "" && s.Workspaces != nil {
+		ws, err := s.Workspaces.GetByID(context.Background(), wsID)
+		if err == nil && ws != nil {
+			data.WorkspaceName = ws.Name
+		}
+	}
+
+	return data, nil
+}
+
+// ── Notes loader ─────────────────────────────
+
+func (e *Engine) notesLoader(c *gin.Context, s store.Stores) (any, error) {
+	noteID := c.Param("noteId")
+	return &NotesPageData{NoteID: noteID}, nil
+}
+
+// ── Settings loader ──────────────────────────
+// Most settings sections are populated client-side by existing JS.
+// Server just passes the section name for navigation highlighting.
+
+func (e *Engine) settingsLoader(c *gin.Context, s store.Stores) (any, error) {
+	section := c.Param("section")
+	if section == "" {
+		section = "general"
+	}
+	return &SettingsPageData{Section: section}, nil
+}
--- a/server/pages/pages.go
+++ b/server/pages/pages.go
@@ -0,0 +1,305 @@
+// Package pages provides server-side HTML rendering via Go templates.
+//
+// Templates are embedded in the binary via //go:embed and organized as:
+//
+//	templates/base.html          — outer shell (banner + surface block + scripts)
+//	templates/login.html         — standalone login page
+//	templates/components/*.html  — reusable partials (model-select, team-select, etc.)
+//	templates/surfaces/*.html    — one per surface (chat, editor, notes, admin, etc.)
+//	templates/admin/*.html       — admin sub-pages (roles, routing, providers, etc.)
+package pages
+
+import (
+	"context"
+	"crypto/rand"
+	"embed"
+	"encoding/hex"
+	"encoding/json"
+	"fmt"
+	"html/template"
+	"io"
+	"log"
+	"net/http"
+	"strings"
+	"sync"
+
+	"github.com/gin-gonic/gin"
+
+	"git.gobha.me/xcaliber/chat-switchboard/config"
+	"git.gobha.me/xcaliber/chat-switchboard/store"
+)
+
+//go:embed templates/*.html templates/components/*.html templates/surfaces/*.html templates/admin/*.html
+var templateFS embed.FS
+
+// Engine holds parsed templates and rendering state.
+type Engine struct {
+	mu        sync.RWMutex
+	templates *template.Template
+	cfg       *config.Config
+	stores    store.Stores
+	loaders   map[string]DataLoaderFunc
+	devMode   bool
+}
+
+// BannerConfig holds classification banner settings.
+type BannerConfig struct {
+	Text       string `json:"text"`
+	Color      string `json:"color"`
+	Background string `json:"background"`
+	Visible    bool   `json:"visible"`
+}
+
+// PageData is passed to every template render.
+type PageData struct {
+	Banner   BannerConfig
+	Surface  string // active surface ID
+	Section  string // sub-section (for admin pages)
+	CSPNonce string
+	BasePath string
+	Version  string
+	User     *UserContext
+	Data     any // surface-specific data from loader
+}
+
+// UserContext is the authenticated user's info available to templates.
+type UserContext struct {
+	ID          string `json:"id"`
+	Username    string `json:"username"`
+	DisplayName string `json:"display_name"`
+	Role        string `json:"role"`
+	Email       string `json:"email"`
+}
+
+// DataLoaderFunc loads surface-specific data for template rendering.
+type DataLoaderFunc func(c *gin.Context, stores store.Stores) (any, error)
+
+// New creates a template engine. Call after config and stores are ready.
+func New(cfg *config.Config, stores store.Stores) *Engine {
+	e := &Engine{
+		cfg:     cfg,
+		stores:  stores,
+		loaders: make(map[string]DataLoaderFunc),
+		devMode: gin.Mode() == gin.DebugMode,
+	}
+	e.parseTemplates()
+	e.registerLoaders()
+	return e
+}
+
+// parseTemplates compiles all embedded templates with the custom FuncMap.
+func (e *Engine) parseTemplates() {
+	funcMap := template.FuncMap{
+		"toJSON":         toJSON,
+		"eq":             func(a, b string) bool { return a == b },
+		"contains":       stringContains,
+		"roleFilterType": roleFilterType,
+		"esc":            template.HTMLEscapeString,
+		"safeHTML":       func(s string) template.HTML { return template.HTML(s) },
+		"join":           strings.Join,
+		"dict":           dict,
+		"or":             tmplOr,
+	}
+
+	tmpl, err := template.New("").Funcs(funcMap).ParseFS(templateFS,
+		"templates/*.html",
+		"templates/components/*.html",
+		"templates/surfaces/*.html",
+		"templates/admin/*.html",
+	)
+	if err != nil {
+		log.Fatalf("❌ Failed to parse templates: %v", err)
+	}
+
+	e.mu.Lock()
+	e.templates = tmpl
+	e.mu.Unlock()
+
+	var names []string
+	for _, t := range tmpl.Templates() {
+		if t.Name() != "" {
+			names = append(names, t.Name())
+		}
+	}
+	log.Printf("[pages] Parsed %d templates", len(names))
+}
+
+// RegisterLoader adds a named data loader for a surface.
+func (e *Engine) RegisterLoader(name string, fn DataLoaderFunc) {
+	e.loaders[name] = fn
+}
+
+// Render renders a named template into the response.
+func (e *Engine) Render(c *gin.Context, name string, data PageData) {
+	data.BasePath = e.cfg.BasePath
+	data.Version = Version
+	data.CSPNonce = generateNonce()
+	data.Banner = e.loadBanner()
+
+	e.mu.RLock()
+	tmpl := e.templates
+	e.mu.RUnlock()
+
+	c.Header("Content-Type", "text/html; charset=utf-8")
+	c.Status(http.StatusOK)
+
+	if err := tmpl.ExecuteTemplate(c.Writer, name, data); err != nil {
+		log.Printf("[pages] Template render error (%s): %v", name, err)
+	}
+}
+
+// RenderSurface is a Gin handler factory for surface routes.
+func (e *Engine) RenderSurface(surfaceID string) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		user := e.getUserContext(c)
+
+		var data any
+		if loader, ok := e.loaders[surfaceID]; ok {
+			var err error
+			data, err = loader(c, e.stores)
+			if err != nil {
+				log.Printf("[pages] Data loader error (%s): %v", surfaceID, err)
+				c.String(http.StatusInternalServerError, "Failed to load page data")
+				return
+			}
+		}
+
+		section := c.Param("section")
+		if section == "" && surfaceID == "admin" {
+			section = "overview"
+		}
+		if section == "" && surfaceID == "settings" {
+			section = "general"
+		}
+
+		e.Render(c, "base.html", PageData{
+			Surface: surfaceID,
+			Section: section,
+			User:    user,
+			Data:    data,
+		})
+	}
+}
+
+// RenderLogin serves the standalone login page.
+func (e *Engine) RenderLogin() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		e.Render(c, "login.html", PageData{
+			Surface: "login",
+		})
+	}
+}
+
+// getUserContext extracts user info from gin context (set by auth middleware).
+func (e *Engine) getUserContext(c *gin.Context) *UserContext {
+	userID, exists := c.Get("user_id")
+	if !exists {
+		return nil
+	}
+	return &UserContext{
+		ID:   userID.(string),
+		Role: c.GetString("role"),
+	}
+}
+
+// loadBanner reads banner config from global settings.
+func (e *Engine) loadBanner() BannerConfig {
+	if e.stores.GlobalConfig == nil {
+		return BannerConfig{}
+	}
+	raw, err := e.stores.GlobalConfig.Get(context.Background(), "banner")
+	if err != nil || raw == nil {
+		return BannerConfig{}
+	}
+	b := BannerConfig{}
+	if v, ok := raw["enabled"].(bool); ok {
+		b.Visible = v
+	}
+	if v, ok := raw["text"].(string); ok {
+		b.Text = v
+	}
+	if v, ok := raw["color"].(string); ok {
+		b.Color = v
+	}
+	if v, ok := raw["background"].(string); ok {
+		b.Background = v
+	}
+	return b
+}
+
+// Version is injected at build time via ldflags.
+var Version = "dev"
+
+// SetVersion allows main.go to inject the build version.
+func SetVersion(v string) {
+	Version = v
+}
+
+// WriteError writes an error page directly to the response.
+func (e *Engine) WriteError(w http.ResponseWriter, status int, msg string) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	w.WriteHeader(status)
+	fmt.Fprintf(w, `<!DOCTYPE html><html><head><title>Error</title></head><body><h1>%d</h1><p>%s</p></body></html>`, status, template.HTMLEscapeString(msg))
+}
+
+// ── Template FuncMap helpers ─────────────────
+
+func toJSON(v any) template.JS {
+	b, err := json.Marshal(v)
+	if err != nil {
+		return template.JS("null")
+	}
+	return template.JS(b)
+}
+
+func stringContains(haystack []string, needle string) bool {
+	for _, s := range haystack {
+		if s == needle {
+			return true
+		}
+	}
+	return false
+}
+
+// roleFilterType returns the model_type filter for a given role name.
+func roleFilterType(role string) string {
+	switch role {
+	case "embedding":
+		return "embedding"
+	case "utility":
+		return "chat"
+	default:
+		return ""
+	}
+}
+
+// dict creates a map from alternating key/value pairs for template use.
+func dict(pairs ...any) map[string]any {
+	m := make(map[string]any, len(pairs)/2)
+	for i := 0; i < len(pairs)-1; i += 2 {
+		key, ok := pairs[i].(string)
+		if !ok {
+			continue
+		}
+		m[key] = pairs[i+1]
+	}
+	return m
+}
+
+// tmplOr returns the first non-empty string argument.
+func tmplOr(vals ...string) string {
+	for _, v := range vals {
+		if v != "" {
+			return v
+		}
+	}
+	return ""
+}
+
+func generateNonce() string {
+	b := make([]byte, 16)
+	if _, err := io.ReadFull(rand.Reader, b); err != nil {
+		return "fallback-nonce"
+	}
+	return hex.EncodeToString(b)
+}
--- a/server/pages/templates/admin/models.html
+++ b/server/pages/templates/admin/models.html
@@ -0,0 +1,54 @@
+{{/* Admin models — model catalog table. */}}
+
+{{define "admin-models"}}
+<div class="admin-page">
+    <h2>Model Catalog</h2>
+    <p class="section-hint">All models synced from providers. Toggle visibility to control what users can access.</p>
+
+    <div class="admin-toolbar">
+        <input type="text" class="admin-search" id="modelSearch" placeholder="Filter models…" oninput="Pages.filterModels(this.value)">
+        <select class="admin-search" style="min-width:120px;" id="modelTypeFilter" onchange="Pages.filterModels()">
+            <option value="">All types</option>
+            <option value="chat">Chat</option>
+            <option value="embedding">Embedding</option>
+            <option value="image">Image</option>
+        </select>
+        <select class="admin-search" style="min-width:140px;" id="modelProviderFilter" onchange="Pages.filterModels()">
+            <option value="">All providers</option>
+            {{range .Data.Providers}}
+            <option value="{{.ID}}">{{.Name}}</option>
+            {{end}}
+        </select>
+    </div>
+
+    {{if .Data.Models}}
+    <table class="admin-table" id="modelTable">
+        <thead>
+            <tr>
+                <th>Model</th>
+                <th>Provider</th>
+                <th>Type</th>
+                <th>Capabilities</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            {{range .Data.Models}}
+            <tr data-provider="{{.ProviderConfigID}}" data-type="{{.ModelType}}" data-name="{{.DisplayName}} {{.ModelID}}">
+                <td>
+                    <strong>{{.DisplayName}}</strong>
+                    {{if ne .DisplayName .ModelID}}<br><span style="font-size:11px;color:var(--text-tertiary,#666);">{{.ModelID}}</span>{{end}}
+                </td>
+                <td>{{.ProviderName}}</td>
+                <td><span class="admin-badge">{{.ModelType}}</span></td>
+                <td style="font-size:11px;color:var(--text-secondary);">—</td>
+                <td></td>
+            </tr>
+            {{end}}
+        </tbody>
+    </table>
+    {{else}}
+    <div class="empty-hint">No models in catalog. Sync a provider to populate.</div>
+    {{end}}
+</div>
+{{end}}
--- a/server/pages/templates/admin/overview.html
+++ b/server/pages/templates/admin/overview.html
@@ -0,0 +1,6 @@
+{{define "admin-overview"}}
+<div class="admin-page">
+    <h2>Admin Overview</h2>
+    <p class="section-hint">System administration. Select a section from the navigation.</p>
+</div>
+{{end}}
--- a/server/pages/templates/admin/providers.html
+++ b/server/pages/templates/admin/providers.html
@@ -0,0 +1,97 @@
+{{/* Admin providers — server-rendered provider list with status. */}}
+
+{{define "admin-providers"}}
+<div class="admin-page">
+    <h2>Providers</h2>
+    <p class="section-hint">AI provider configurations. Each provider connects to an API endpoint.</p>
+
+    <div class="admin-toolbar">
+        <button class="btn-small btn-primary" onclick="Pages.showProviderForm()">+ Add Provider</button>
+    </div>
+
+    <div id="providerFormWrap" style="display:none;">
+        {{template "admin-provider-form" .}}
+    </div>
+
+    {{if .Data.Providers}}
+    <table class="admin-table">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Scope</th>
+                <th>Models</th>
+                <th>Endpoint</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            {{range .Data.ProviderDetails}}
+            <tr>
+                <td><strong>{{.Name}}</strong></td>
+                <td><span class="admin-badge">{{.Provider}}</span></td>
+                <td><span class="admin-badge admin-badge-{{.Scope}}">{{.Scope}}</span></td>
+                <td>{{.ModelCount}}</td>
+                <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);">{{.Endpoint}}</td>
+                <td>
+                    <button class="btn-small" onclick="Pages.syncProvider('{{.ID}}')">Sync</button>
+                    <button class="btn-small" onclick="Pages.editProvider('{{.ID}}')">Edit</button>
+                </td>
+            </tr>
+            {{end}}
+        </tbody>
+    </table>
+    {{else}}
+    <div class="empty-hint">No providers configured. Add one to get started.</div>
+    {{end}}
+</div>
+{{end}}
+
+{{define "admin-provider-form"}}
+<div class="admin-inline-form" id="providerForm">
+    <h3 style="margin:0 0 12px;font-size:14px;" id="providerFormTitle">Add Provider</h3>
+    <input type="hidden" id="providerFormId" value="">
+    <div class="form-row">
+        <div class="form-group" style="flex:1;min-width:150px;">
+            <label>Name</label>
+            <input type="text" id="providerFormName" placeholder="My OpenAI">
+        </div>
+        <div class="form-group" style="flex:1;min-width:150px;">
+            <label>Type</label>
+            <select id="providerFormType">
+                <option value="">— select —</option>
+                {{range .Data.ProviderTypes}}
+                <option value="{{.ID}}">{{.Name}}</option>
+                {{end}}
+            </select>
+        </div>
+    </div>
+    <div class="form-row">
+        <div class="form-group" style="flex:2;min-width:200px;">
+            <label>Endpoint</label>
+            <input type="text" id="providerFormEndpoint" placeholder="https://api.openai.com/v1">
+        </div>
+        <div class="form-group" style="flex:1;min-width:150px;">
+            <label>API Key</label>
+            <input type="password" id="providerFormKey" placeholder="sk-...">
+        </div>
+    </div>
+    <div class="form-row">
+        <div class="form-group" style="flex:1;min-width:150px;">
+            <label>Scope</label>
+            <select id="providerFormScope">
+                <option value="global">Global</option>
+                <option value="team">Team</option>
+            </select>
+        </div>
+        <div class="form-group" style="flex:1;min-width:150px;" id="providerFormTeamWrap" style="display:none;">
+            <label>Team</label>
+            {{template "team-select" (dict "FieldName" "providerFormTeamId" "Label" "" "Teams" .Data.Teams "Selected" "" "AllowEmpty" false)}}
+        </div>
+    </div>
+    <div style="display:flex;gap:8px;margin-top:8px;">
+        <button class="btn-small btn-primary" onclick="Pages.saveProvider()">Save</button>
+        <button class="btn-small" onclick="Pages.hideProviderForm()">Cancel</button>
+    </div>
+</div>
+{{end}}
--- a/server/pages/templates/admin/roles.html
+++ b/server/pages/templates/admin/roles.html
@@ -0,0 +1,94 @@
+{{/*
+    admin/roles.html — Model Roles configuration page.
+    Fixes bug #1: embedding models now appear via model_type filtering.
+*/}}
+{{define "admin-roles"}}
+<div class="admin-page">
+    <h2>Model Roles</h2>
+    <p class="section-hint">Configure which models serve background tasks. Each role has a primary and optional fallback.</p>
+
+    {{$providers := .Data.Providers}}
+    {{$models := .Data.Models}}
+
+    {{range .Data.Roles}}
+    <section class="settings-section" style="margin-bottom:16px">
+        <h3 style="font-size:14px;margin:0 0 12px;text-transform:capitalize">{{.Name}} Role</h3>
+        <p class="section-hint" style="margin-bottom:12px">
+            {{if eq .Name "utility"}}Summarization, classification, routing — typically a fast, cheap chat model.{{end}}
+            {{if eq .Name "embedding"}}Vector generation for knowledge base search and semantic note search.{{end}}
+        </p>
+
+        {{$roleName := .Name}}
+        {{$filterType := roleFilterType .Name}}
+        {{$primaryProvID := ""}}
+        {{$primaryModelID := ""}}
+        {{$fallbackProvID := ""}}
+        {{$fallbackModelID := ""}}
+        {{if .Primary}}
+            {{$primaryProvID = .Primary.ProviderID}}
+            {{$primaryModelID = .Primary.ModelID}}
+        {{end}}
+        {{if .Fallback}}
+            {{$fallbackProvID = .Fallback.ProviderID}}
+            {{$fallbackModelID = .Fallback.ModelID}}
+        {{end}}
+
+        <div class="role-config" data-role="{{$roleName}}">
+            <div style="margin-bottom:8px">
+                <label style="font-size:12px;color:var(--text-secondary)">Primary</label>
+                <div class="form-row" style="gap:8px;align-items:center;margin-top:4px">
+                    <select class="model-provider-select"
+                            data-role="{{$roleName}}" data-slot="primary"
+                            data-filter-type="{{$filterType}}"
+                            onchange="Pages.roleProviderChanged(this)"
+                            style="min-width:140px">
+                        <option value="">— none —</option>
+                        {{range $providers}}
+                        <option value="{{.ID}}"{{if eq .ID $primaryProvID}} selected{{end}}>{{.Name}}</option>
+                        {{end}}
+                    </select>
+                    <select class="model-model-select"
+                            data-role="{{$roleName}}" data-slot="primary"
+                            style="min-width:200px">
+                        <option value="">— select model —</option>
+                        {{range $models}}
+                        {{if and (eq .ProviderConfigID $primaryProvID) (or (eq $filterType "") (eq .ModelType $filterType))}}
+                        <option value="{{.ModelID}}"{{if eq .ModelID $primaryModelID}} selected{{end}}>{{.DisplayName}}</option>
+                        {{end}}
+                        {{end}}
+                    </select>
+                </div>
+            </div>
+
+            <div style="margin-bottom:8px">
+                <label style="font-size:12px;color:var(--text-secondary)">Fallback</label>
+                <div class="form-row" style="gap:8px;align-items:center;margin-top:4px">
+                    <select class="model-provider-select"
+                            data-role="{{$roleName}}" data-slot="fallback"
+                            data-filter-type="{{$filterType}}"
+                            onchange="Pages.roleProviderChanged(this)"
+                            style="min-width:140px">
+                        <option value="">— none —</option>
+                        {{range $providers}}
+                        <option value="{{.ID}}"{{if eq .ID $fallbackProvID}} selected{{end}}>{{.Name}}</option>
+                        {{end}}
+                    </select>
+                    <select class="model-model-select"
+                            data-role="{{$roleName}}" data-slot="fallback"
+                            style="min-width:200px">
+                        <option value="">— select model —</option>
+                        {{range $models}}
+                        {{if and (eq .ProviderConfigID $fallbackProvID) (or (eq $filterType "") (eq .ModelType $filterType))}}
+                        <option value="{{.ModelID}}"{{if eq .ModelID $fallbackModelID}} selected{{end}}>{{.DisplayName}}</option>
+                        {{end}}
+                        {{end}}
+                    </select>
+                </div>
+            </div>
+
+            <button class="btn-small btn-primary" onclick="Pages.saveRole('{{$roleName}}')">Save</button>
+        </div>
+    </section>
+    {{end}}
+</div>
+{{end}}
--- a/server/pages/templates/admin/routing.html
+++ b/server/pages/templates/admin/routing.html
@@ -0,0 +1,80 @@
+{{/*
+    admin/routing.html — Routing Policy management.
+    Fixes bug #2: team scope uses a proper dropdown, not raw text.
+*/}}
+{{define "admin-routing"}}
+<div class="admin-page">
+    <h2>Routing Policies</h2>
+    <p class="section-hint">Define rules for model selection, cost limits, and team-specific routing.</p>
+
+    <div style="margin-bottom:12px">
+        <button class="btn-small btn-primary" onclick="Pages.showRoutingForm()">+ New Policy</button>
+    </div>
+
+    <div id="routingPolicyForm" style="display:none" class="admin-inline-form">
+        <input type="hidden" id="routingPolicyId">
+        <div class="form-row" style="gap:8px">
+            <div class="form-group" style="flex:1">
+                <label>Name</label>
+                <input type="text" id="routingPolicyName" placeholder="e.g. Prefer local provider">
+            </div>
+            <div class="form-group" style="width:80px">
+                <label>Priority</label>
+                <input type="number" id="routingPolicyPriority" value="100" min="0" max="999">
+            </div>
+        </div>
+        <div class="form-row" style="gap:8px">
+            <div class="form-group" style="flex:1">
+                <label>Type</label>
+                <select id="routingPolicyType">
+                    <option value="provider_prefer">Provider Prefer</option>
+                    <option value="team_route">Team Route</option>
+                    <option value="cost_limit">Cost Limit</option>
+                    <option value="model_alias">Model Alias</option>
+                </select>
+            </div>
+            <div class="form-group" style="flex:1">
+                <label>Scope</label>
+                <select id="routingPolicyScope" onchange="Pages.routingScopeChanged(this)">
+                    <option value="global">Global</option>
+                    <option value="team">Team</option>
+                </select>
+            </div>
+        </div>
+
+        {{/* Team dropdown — shown when scope=team. Pre-populated from server. */}}
+        <div class="form-row" id="routingTeamRow" style="display:none">
+            <div class="form-group" style="flex:1">
+                <label>Team</label>
+                <select id="routingPolicyTeamId">
+                    <option value="">— select team —</option>
+                    {{range .Data.Teams}}
+                    <option value="{{.ID}}">{{.Name}}</option>
+                    {{end}}
+                </select>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Config (JSON)</label>
+            <textarea id="routingPolicyConfig" rows="4" placeholder='{"provider_config_id": "..."}'
+                style="font-family:monospace;"></textarea>
+        </div>
+        <div class="form-row" style="gap:8px">
+            <label class="checkbox-label">
+                <input type="checkbox" id="routingPolicyActive" checked> Active
+            </label>
+        </div>
+        <div class="form-row" style="gap:8px;margin-top:8px">
+            <button class="btn-small btn-primary" onclick="Pages.saveRoutingPolicy()">Save</button>
+            <button class="btn-small" onclick="Pages.hideRoutingForm()">Cancel</button>
+        </div>
+    </div>
+
+    <div id="routingPolicyList">
+        {{if not .Data.Policies}}
+        <div class="empty-hint">No routing policies configured.</div>
+        {{end}}
+    </div>
+</div>
+{{end}}
--- a/server/pages/templates/admin/settings.html
+++ b/server/pages/templates/admin/settings.html
@@ -0,0 +1,83 @@
+{{/* Admin settings — core system configuration. */}}
+
+{{define "admin-settings"}}
+<div class="admin-page">
+    <h2>Settings</h2>
+    <p class="section-hint">Core system configuration. Changes take effect immediately.</p>
+
+    {{/* ── Registration ───────────────────── */}}
+    <div class="settings-section">
+        <h3 style="font-size:14px;margin:0 0 12px;">Registration</h3>
+        <div class="form-group">
+            <label class="checkbox-label">
+                <input type="checkbox" id="settRegEnabled"> Allow new user registration
+            </label>
+        </div>
+        <div class="form-group">
+            <label>Default new user state</label>
+            <select id="settRegDefaultState" style="width:180px;">
+                <option value="active">Active immediately</option>
+                <option value="pending">Pending approval</option>
+            </select>
+        </div>
+    </div>
+
+    {{/* ── User Permissions ─────────────────── */}}
+    <div class="settings-section">
+        <h3 style="font-size:14px;margin:0 0 12px;">User Permissions</h3>
+        <div class="form-group">
+            <label class="checkbox-label">
+                <input type="checkbox" id="settUserBYOK"> Allow users to add own API keys (BYOK)
+            </label>
+        </div>
+        <div class="form-group">
+            <label class="checkbox-label">
+                <input type="checkbox" id="settUserPersonas"> Allow users to create personas
+            </label>
+        </div>
+        <div class="form-group">
+            <label class="checkbox-label">
+                <input type="checkbox" id="settKBDirect"> Allow direct knowledge base access
+            </label>
+        </div>
+    </div>
+
+    {{/* ── Banner ─────────────────────────── */}}
+    <div class="settings-section">
+        <h3 style="font-size:14px;margin:0 0 12px;">Environment Banner</h3>
+        <div class="form-group">
+            <label class="checkbox-label">
+                <input type="checkbox" id="settBannerEnabled"> Show banner
+            </label>
+        </div>
+        <div id="bannerFields" style="display:none;">
+            <div class="form-row">
+                <div class="form-group" style="flex:2;min-width:200px;">
+                    <label>Text</label>
+                    <input type="text" id="settBannerText" placeholder="UNCLASSIFIED">
+                </div>
+                <div class="form-group" style="flex:1;min-width:100px;">
+                    <label>Background</label>
+                    <input type="color" id="settBannerBg" value="#007a33" style="width:60px;height:30px;padding:2px;">
+                </div>
+                <div class="form-group" style="flex:1;min-width:100px;">
+                    <label>Text Color</label>
+                    <input type="color" id="settBannerFg" value="#ffffff" style="width:60px;height:30px;padding:2px;">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{/* ── System Prompt ──────────────────── */}}
+    <div class="settings-section">
+        <h3 style="font-size:14px;margin:0 0 12px;">Default System Prompt</h3>
+        <div class="form-group">
+            <textarea id="settSystemPrompt" rows="4" style="width:100%;resize:vertical;" placeholder="Optional system prompt applied to all new conversations"></textarea>
+        </div>
+    </div>
+
+    <div style="margin-top:16px;">
+        <button class="btn-small btn-primary" onclick="Pages.saveSettings()">Save Settings</button>
+    </div>
+</div>
+{{end}}
--- a/server/pages/templates/admin/teams.html
+++ b/server/pages/templates/admin/teams.html
@@ -0,0 +1,62 @@
+{{/* Admin teams — team list with member counts. */}}
+
+{{define "admin-teams"}}
+<div class="admin-page">
+    <h2>Teams</h2>
+    <p class="section-hint">Organize users into teams for scoped access to providers, presets, and policies.</p>
+
+    <div class="admin-toolbar">
+        <button class="btn-small btn-primary" onclick="Pages.showTeamForm()">+ Create Team</button>
+    </div>
+
+    <div id="teamFormWrap" style="display:none;">
+        <div class="admin-inline-form" id="teamForm">
+            <h3 style="margin:0 0 12px;font-size:14px;" id="teamFormTitle">Create Team</h3>
+            <input type="hidden" id="teamFormId" value="">
+            <div class="form-row">
+                <div class="form-group" style="flex:1;min-width:200px;">
+                    <label>Name</label>
+                    <input type="text" id="teamFormName" placeholder="Engineering">
+                </div>
+                <div class="form-group" style="flex:2;min-width:250px;">
+                    <label>Description</label>
+                    <input type="text" id="teamFormDescription" placeholder="Optional description">
+                </div>
+            </div>
+            <div style="display:flex;gap:8px;margin-top:8px;">
+                <button class="btn-small btn-primary" onclick="Pages.saveTeam()">Save</button>
+                <button class="btn-small" onclick="Pages.hideTeamForm()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    {{if .Data.Teams}}
+    <table class="admin-table">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Description</th>
+                <th>Members</th>
+                <th>Status</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            {{range .Data.Teams}}
+            <tr>
+                <td><strong>{{.Name}}</strong></td>
+                <td style="color:var(--text-secondary);">{{.Description}}</td>
+                <td>{{.MemberCount}}</td>
+                <td><span class="admin-badge admin-badge-{{if .IsActive}}active{{else}}inactive{{end}}">{{if .IsActive}}active{{else}}inactive{{end}}</span></td>
+                <td>
+                    <button class="btn-small" onclick="Pages.editTeam('{{.ID}}','{{.Name}}','{{.Description}}')">Edit</button>
+                </td>
+            </tr>
+            {{end}}
+        </tbody>
+    </table>
+    {{else}}
+    <div class="empty-hint">No teams created yet.</div>
+    {{end}}
+</div>
+{{end}}
--- a/server/pages/templates/admin/users.html
+++ b/server/pages/templates/admin/users.html
@@ -0,0 +1,48 @@
+{{/* Admin users — user management table. */}}
+
+{{define "admin-users"}}
+<div class="admin-page">
+    <h2>Users</h2>
+    <p class="section-hint">Manage user accounts, roles, and access.</p>
+
+    <div class="admin-toolbar">
+        <input type="text" class="admin-search" id="userSearch" placeholder="Filter users…" oninput="Pages.filterUsers(this.value)">
+    </div>
+
+    {{if .Data.Users}}
+    <table class="admin-table" id="userTable">
+        <thead>
+            <tr>
+                <th>Username</th>
+                <th>Email</th>
+                <th>Display Name</th>
+                <th>Role</th>
+                <th>Status</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            {{range .Data.Users}}
+            <tr data-name="{{.Username}} {{.Email}} {{.DisplayName}}">
+                <td><strong>{{.Username}}</strong></td>
+                <td style="color:var(--text-secondary);">{{.Email}}</td>
+                <td>{{.DisplayName}}</td>
+                <td><span class="admin-badge admin-badge-{{.Role}}">{{.Role}}</span></td>
+                <td><span class="admin-badge admin-badge-{{if .IsActive}}active{{else}}inactive{{end}}">{{if .IsActive}}active{{else}}inactive{{end}}</span></td>
+                <td>
+                    <button class="btn-small" onclick="Pages.editUserRole('{{.ID}}','{{.Username}}','{{.Role}}')">Role</button>
+                    {{if .IsActive}}
+                    <button class="btn-small" onclick="Pages.toggleUser('{{.ID}}',false)">Disable</button>
+                    {{else}}
+                    <button class="btn-small" onclick="Pages.toggleUser('{{.ID}}',true)">Enable</button>
+                    {{end}}
+                </td>
+            </tr>
+            {{end}}
+        </tbody>
+    </table>
+    {{else}}
+    <div class="empty-hint">No users found.</div>
+    {{end}}
+</div>
+{{end}}
--- a/server/pages/templates/base.html
+++ b/server/pages/templates/base.html
@@ -0,0 +1,72 @@
+{{define "base.html"}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
+    <title>{{block "title" .}}Chat Switchboard{{end}}</title>
+    <link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
+    <link rel="icon" type="image/x-icon" href="{{.BasePath}}/favicon.ico?v={{.Version}}">
+    <link rel="stylesheet" href="{{.BasePath}}/css/styles.css?v={{.Version}}">
+    {{if eq .Surface "chat"}}{{template "css-chat" .}}{{end}}
+    {{if eq .Surface "admin"}}{{template "css-admin" .}}{{end}}
+    {{if eq .Surface "editor"}}{{template "css-editor" .}}{{end}}
+    {{if eq .Surface "notes"}}{{template "css-notes" .}}{{end}}
+    {{if eq .Surface "settings"}}{{template "css-settings" .}}{{end}}
+    <style>
+        :root {
+            --banner-h: 28px;
+            --banner-top-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
+            --banner-bot-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
+            --surface-h: calc(100vh - var(--banner-top-h) - var(--banner-bot-h));
+        }
+        body { margin: 0; background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0); }
+        .surface { height: var(--surface-h); overflow: hidden; }
+        .banner { flex-shrink: 0; }
+    </style>
+    <meta name="theme-color" content="#0e0e10">
+</head>
+<body data-surface="{{.Surface}}" data-base-path="{{.BasePath}}">
+    {{if .Banner.Visible}}
+    <div class="banner banner-top" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;overflow:hidden;">
+        {{.Banner.Text}}
+    </div>
+    {{end}}
+
+    <div class="surface" id="surface">
+        {{if eq .Surface "chat"}}{{template "surface-chat" .}}
+        {{else if eq .Surface "admin"}}{{template "surface-admin" .}}
+        {{else if eq .Surface "editor"}}{{template "surface-editor" .}}
+        {{else if eq .Surface "notes"}}{{template "surface-notes" .}}
+        {{else if eq .Surface "settings"}}{{template "surface-settings" .}}
+        {{else}}<div style="padding:20px">Unknown surface: {{.Surface}}</div>
+        {{end}}
+    </div>
+
+    {{if .Banner.Visible}}
+    <div class="banner banner-bottom" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;overflow:hidden;">
+        {{.Banner.Text}}
+    </div>
+    {{end}}
+
+    <script nonce="{{.CSPNonce}}">
+        window.__BASE__ = '{{.BasePath}}';
+        window.__VERSION__ = '{{.Version}}';
+        window.__SURFACE__ = '{{.Surface}}';
+        window.__PAGE_DATA__ = {{.Data | toJSON}};
+        window.__USER__ = {{.User | toJSON}};
+    </script>
+
+    <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/api.js?v={{.Version}}"></script>
+    <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/events.js?v={{.Version}}"></script>
+    <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-primitives.js?v={{.Version}}"></script>
+    <script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/pages.js?v={{.Version}}"></script>
+
+    {{if eq .Surface "chat"}}{{template "scripts-chat" .}}{{end}}
+    {{if eq .Surface "admin"}}{{template "scripts-admin" .}}{{end}}
+    {{if eq .Surface "editor"}}{{template "scripts-editor" .}}{{end}}
+    {{if eq .Surface "notes"}}{{template "scripts-notes" .}}{{end}}
+    {{if eq .Surface "settings"}}{{template "scripts-settings" .}}{{end}}
+</body>
+</html>
+{{end}}
--- a/server/pages/templates/components/file-upload.html
+++ b/server/pages/templates/components/file-upload.html
@@ -0,0 +1,29 @@
+{{/*
+    Reusable file upload component (v0.23.0).
+    Renders a drop zone + file picker button.
+
+    Expects dict with:
+      FieldName     — unique ID for the input (e.g. "workspace-upload")
+      Label         — optional label text
+      Multiple      — bool, allow multiple files
+      Accept        — optional file type filter (e.g. ".md,.txt,.go")
+      DropZone      — bool, show drag-and-drop zone
+*/}}
+{{define "file-upload"}}
+<div class="file-upload-wrap" id="{{.FieldName}}Wrap">
+    {{if .Label}}<label class="form-group-label">{{.Label}}</label>{{end}}
+    <input type="file" id="{{.FieldName}}Input"
+           {{if .Multiple}}multiple{{end}}
+           {{if .Accept}}accept="{{.Accept}}"{{end}}
+           style="display:none">
+    <button type="button" class="btn-small btn-primary"
+            onclick="document.getElementById('{{.FieldName}}Input').click()">
+        Choose files…
+    </button>
+    {{if .DropZone}}
+    <div class="file-upload-drop" id="{{.FieldName}}Drop">
+        Drop files here or click above
+    </div>
+    {{end}}
+</div>
+{{end}}
--- a/server/pages/templates/components/model-select.html
+++ b/server/pages/templates/components/model-select.html
@@ -0,0 +1,36 @@
+{{/*
+    model-select: Reusable provider + model dropdown pair.
+    Used in admin roles page with FilterType for model_type filtering.
+    When provider changes, Pages.roleProviderChanged() filters models
+    from __PAGE_DATA__.Models on the client side.
+*/}}
+{{define "model-select"}}
+<div class="form-group model-select-group" data-field="{{index . "FieldName"}}">
+    {{if index . "Label"}}<label>{{index . "Label"}}</label>{{end}}
+    <div class="form-row" style="gap:8px;align-items:center">
+        <select name="{{index . "FieldName"}}_provider"
+                class="model-provider-select"
+                data-target="{{index . "FieldName"}}_model"
+                data-filter-type="{{index . "FilterType"}}"
+                style="min-width:140px">
+            <option value="">— select provider —</option>
+            {{$selProv := index . "SelectedProvider"}}
+            {{range index . "Providers"}}
+            <option value="{{.ID}}"{{if eq .ID $selProv}} selected{{end}}>{{.Name}}</option>
+            {{end}}
+        </select>
+        <select name="{{index . "FieldName"}}_model"
+                class="model-model-select"
+                style="min-width:200px">
+            <option value="">— select model —</option>
+            {{$selModel := index . "SelectedModel"}}
+            {{$filterType := index . "FilterType"}}
+            {{range index . "Models"}}
+            {{if and (eq .ProviderConfigID $selProv) (or (eq $filterType "") (eq .ModelType $filterType))}}
+            <option value="{{.ModelID}}"{{if eq .ModelID $selModel}} selected{{end}}>{{.DisplayName}}</option>
+            {{end}}
+            {{end}}
+        </select>
+    </div>
+</div>
+{{end}}
--- a/server/pages/templates/components/team-select.html
+++ b/server/pages/templates/components/team-select.html
@@ -0,0 +1,18 @@
+{{/*
+    team-select: Reusable team dropdown.
+    Pre-populated from server data — no client-side fetch needed.
+*/}}
+{{define "team-select"}}
+<div class="form-group">
+    {{if index . "Label"}}<label>{{index . "Label"}}</label>{{end}}
+    <select name="{{index . "FieldName"}}" class="team-select">
+        {{if index . "AllowEmpty"}}
+        <option value="">— all teams —</option>
+        {{end}}
+        {{$sel := index . "Selected"}}
+        {{range index . "Teams"}}
+        <option value="{{.ID}}"{{if eq .ID $sel}} selected{{end}}>{{.Name}}</option>
+        {{end}}
+    </select>
+</div>
+{{end}}
--- a/server/pages/templates/login.html
+++ b/server/pages/templates/login.html
@@ -0,0 +1,72 @@
+{{define "login.html"}}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login — Chat Switchboard</title>
+    <link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
+    <link rel="stylesheet" href="{{.BasePath}}/css/styles.css?v={{.Version}}">
+    <style>
+        :root {
+            --banner-h: 28px;
+            --banner-top-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
+            --banner-bot-h: {{if .Banner.Visible}}var(--banner-h){{else}}0px{{end}};
+        }
+        body { margin: 0; background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0); }
+    </style>
+</head>
+<body>
+    {{if .Banner.Visible}}
+    <div class="banner banner-top" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;">
+        {{.Banner.Text}}
+    </div>
+    {{end}}
+
+    <div style="display:flex;align-items:center;justify-content:center;height:calc(100vh - var(--banner-top-h) - var(--banner-bot-h));">
+        <div style="width:360px;padding:32px;">
+            <div style="text-align:center;margin-bottom:24px;">
+                <img src="{{.BasePath}}/favicon-32.png" alt="" style="width:48px;height:48px;margin-bottom:12px;">
+                <h1 style="font-size:20px;margin:0;">Chat Switchboard</h1>
+            </div>
+
+            <div id="loginError" class="form-error" style="display:none;margin-bottom:12px;color:#ef4444;font-size:13px;"></div>
+
+            <div style="margin-bottom:12px;">
+                <label for="loginUsername" style="display:block;font-size:12px;color:var(--text-secondary,#888);margin-bottom:4px;">Username</label>
+                <input type="text" id="loginUsername" autocomplete="username" autofocus
+                    style="width:100%;padding:8px;border-radius:6px;border:1px solid var(--border,#2a2a2a);background:var(--bg-secondary,#1a1a1e);color:var(--text-primary,#e0e0e0);font-size:14px;box-sizing:border-box;">
+            </div>
+            <div style="margin-bottom:16px;">
+                <label for="loginPassword" style="display:block;font-size:12px;color:var(--text-secondary,#888);margin-bottom:4px;">Password</label>
+                <input type="password" id="loginPassword" autocomplete="current-password"
+                    style="width:100%;padding:8px;border-radius:6px;border:1px solid var(--border,#2a2a2a);background:var(--bg-secondary,#1a1a1e);color:var(--text-primary,#e0e0e0);font-size:14px;box-sizing:border-box;">
+            </div>
+            <button id="loginBtn" onclick="Pages.doLogin()"
+                style="width:100%;padding:10px;border:none;border-radius:6px;background:var(--accent,#5865f2);color:white;font-size:14px;cursor:pointer;">
+                Log In
+            </button>
+        </div>
+    </div>
+
+    {{if .Banner.Visible}}
+    <div class="banner banner-bottom" style="background:{{.Banner.Background}};color:{{.Banner.Color}};height:var(--banner-h);line-height:var(--banner-h);text-align:center;font-size:12px;font-weight:600;">
+        {{.Banner.Text}}
+    </div>
+    {{end}}
+
+    <script>
+        window.__BASE__ = '{{.BasePath}}';
+    </script>
+    <script src="{{.BasePath}}/js/pages.js?v={{.Version}}"></script>
+    <script>
+    document.getElementById('loginPassword').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') Pages.doLogin();
+    });
+    document.getElementById('loginUsername').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') document.getElementById('loginPassword').focus();
+    });
+    </script>
+</body>
+</html>
+{{end}}
--- a/server/pages/templates/surfaces/admin.html
+++ b/server/pages/templates/surfaces/admin.html
@@ -0,0 +1,193 @@
+{{/* Admin surface — full admin panel with category/section navigation.
+     Categories and sections mirror the SPA's ADMIN_SECTIONS structure.
+     Server-rendered sections: roles, routing, providers, models, teams, users, settings.
+     Hybrid sections: container div + JS loader fills content. */}}
+
+{{define "surface-admin"}}
+<div class="admin-surface">
+    {{/* ── Category bar (top) ───────────────── */}}
+    <div class="admin-cat-bar">
+        {{$cat := .Data.Category}}
+        <button class="admin-cat{{if eq $cat "people"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/users'">People</button>
+        <button class="admin-cat{{if eq $cat "ai"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/providers'">AI</button>
+        <button class="admin-cat{{if eq $cat "routing"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/health'">Routing</button>
+        <button class="admin-cat{{if eq $cat "system"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/settings'">System</button>
+        <button class="admin-cat{{if eq $cat "monitoring"}} active{{end}}" onclick="window.location='{{.BasePath}}/admin/usage'">Monitoring</button>
+        <div class="admin-cat-spacer"></div>
+        <a href="{{.BasePath}}/" class="admin-back-link">← Chat</a>
+    </div>
+
+    <div class="admin-body">
+        {{/* ── Section sidebar ──────────────── */}}
+        <nav class="admin-sidebar">
+            {{$section := .Section}}
+            {{$bp := .BasePath}}
+            {{if eq $cat "people"}}
+                <a href="{{$bp}}/admin/users" class="admin-nav-link{{if eq $section "users"}} active{{end}}">Users</a>
+                <a href="{{$bp}}/admin/teams" class="admin-nav-link{{if eq $section "teams"}} active{{end}}">Teams</a>
+                <a href="{{$bp}}/admin/groups" class="admin-nav-link{{if eq $section "groups"}} active{{end}}">Groups</a>
+            {{else if eq $cat "ai"}}
+                <a href="{{$bp}}/admin/providers" class="admin-nav-link{{if eq $section "providers"}} active{{end}}">Providers</a>
+                <a href="{{$bp}}/admin/models" class="admin-nav-link{{if eq $section "models"}} active{{end}}">Models</a>
+                <a href="{{$bp}}/admin/presets" class="admin-nav-link{{if eq $section "presets"}} active{{end}}">Personas</a>
+                <a href="{{$bp}}/admin/roles" class="admin-nav-link{{if eq $section "roles"}} active{{end}}">Roles</a>
+                <a href="{{$bp}}/admin/knowledgeBases" class="admin-nav-link{{if eq $section "knowledgeBases"}} active{{end}}">Knowledge</a>
+                <a href="{{$bp}}/admin/memory" class="admin-nav-link{{if eq $section "memory"}} active{{end}}">Memory</a>
+            {{else if eq $cat "routing"}}
+                <a href="{{$bp}}/admin/health" class="admin-nav-link{{if eq $section "health"}} active{{end}}">Health</a>
+                <a href="{{$bp}}/admin/routing" class="admin-nav-link{{if eq $section "routing"}} active{{end}}">Routing</a>
+                <a href="{{$bp}}/admin/capabilities" class="admin-nav-link{{if eq $section "capabilities"}} active{{end}}">Capabilities</a>
+            {{else if eq $cat "system"}}
+                <a href="{{$bp}}/admin/settings" class="admin-nav-link{{if eq $section "settings"}} active{{end}}">Settings</a>
+                <a href="{{$bp}}/admin/storage" class="admin-nav-link{{if eq $section "storage"}} active{{end}}">Storage</a>
+                <a href="{{$bp}}/admin/extensions" class="admin-nav-link{{if eq $section "extensions"}} active{{end}}">Extensions</a>
+            {{else if eq $cat "monitoring"}}
+                <a href="{{$bp}}/admin/usage" class="admin-nav-link{{if eq $section "usage"}} active{{end}}">Usage</a>
+                <a href="{{$bp}}/admin/audit" class="admin-nav-link{{if eq $section "audit"}} active{{end}}">Audit</a>
+                <a href="{{$bp}}/admin/stats" class="admin-nav-link{{if eq $section "stats"}} active{{end}}">Stats</a>
+            {{end}}
+        </nav>
+
+        {{/* ── Content area ─────────────────── */}}
+        <div class="admin-content">
+            {{if eq .Section "roles"}}{{template "admin-roles" .}}
+            {{else if eq .Section "routing"}}{{template "admin-routing" .}}
+            {{else if eq .Section "providers"}}{{template "admin-providers" .}}
+            {{else if eq .Section "models"}}{{template "admin-models" .}}
+            {{else if eq .Section "teams"}}{{template "admin-teams" .}}
+            {{else if eq .Section "users"}}{{template "admin-users" .}}
+            {{else if eq .Section "settings"}}{{template "admin-settings" .}}
+            {{else}}
+                {{/* Hybrid: container for JS-loaded sections */}}
+                <div class="admin-page" id="adminHybridContainer" data-section="{{.Section}}">
+                    <div class="admin-loading">Loading {{.Section}}…</div>
+                </div>
+            {{end}}
+        </div>
+    </div>
+</div>
+{{end}}
+
+{{define "css-admin"}}
+<style>
+    /* ── Admin surface layout ───────────────── */
+    .admin-surface { display: flex; flex-direction: column; height: 100%; font-family: inherit; }
+    .admin-cat-bar {
+        display: flex; align-items: center; gap: 2px;
+        padding: 6px 12px; border-bottom: 1px solid var(--border, #2a2a2a);
+        flex-shrink: 0; background: var(--bg-secondary, #1a1a1e);
+    }
+    .admin-cat {
+        background: none; border: none; color: var(--text-secondary, #888);
+        padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
+    }
+    .admin-cat:hover { background: var(--hover, #252528); color: var(--text-primary, #e0e0e0); }
+    .admin-cat.active { background: var(--bg-tertiary, #252528); color: var(--text-primary, #e0e0e0); font-weight: 600; }
+    .admin-cat-spacer { flex: 1; }
+    .admin-back-link { color: var(--text-secondary, #888); text-decoration: none; font-size: 13px; padding: 5px 8px; }
+    .admin-back-link:hover { color: var(--text-primary, #e0e0e0); }
+
+    .admin-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
+    .admin-sidebar {
+        width: 160px; border-right: 1px solid var(--border, #2a2a2a);
+        padding: 8px; overflow-y: auto; flex-shrink: 0;
+    }
+    .admin-nav-link {
+        display: block; padding: 6px 10px; border-radius: 6px;
+        color: var(--text-primary, #e0e0e0); text-decoration: none;
+        font-size: 13px; margin-bottom: 2px;
+    }
+    .admin-nav-link.active { background: var(--bg-tertiary, #252528); }
+    .admin-nav-link:hover { background: var(--bg-secondary, #1a1a1e); }
+    .admin-content { flex: 1; overflow-y: auto; padding: 20px; }
+
+    /* ── Shared admin styles ────────────────── */
+    .admin-page h2 { font-size: 18px; margin: 0 0 8px; }
+    .section-hint { font-size: 13px; color: var(--text-secondary, #888); margin: 0 0 16px; }
+    .settings-section { padding: 16px; background: var(--bg-secondary, #1a1a1e); border-radius: 8px; border: 1px solid var(--border, #2a2a2a); margin-bottom: 16px; }
+    .form-row { display: flex; flex-wrap: wrap; gap: 12px; }
+    .form-group { margin-bottom: 8px; }
+    .form-group label { display: block; font-size: 12px; color: var(--text-secondary, #888); margin-bottom: 4px; }
+    .form-group select, .form-group input, .form-group textarea {
+        padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border, #2a2a2a);
+        background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0); font-size: 13px; width: 100%;
+    }
+    .btn-small { padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
+    .btn-primary { background: var(--accent, #5865f2); color: white; }
+    .btn-primary:hover { opacity: 0.9; }
+    .btn-danger { background: var(--error, #ef4444); color: white; }
+    .btn-danger:hover { opacity: 0.9; }
+    .checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
+    .admin-inline-form { padding: 16px; background: var(--bg-secondary, #1a1a1e); border-radius: 8px; border: 1px solid var(--border, #2a2a2a); margin-bottom: 16px; }
+    .empty-hint { font-size: 13px; color: var(--text-secondary, #888); padding: 12px 0; }
+    .admin-loading { font-size: 13px; color: var(--text-tertiary, #666); padding: 20px; text-align: center; }
+
+    /* ── Tables ──────────────────────────────── */
+    .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+    .admin-table th {
+        text-align: left; padding: 8px; font-size: 11px; font-weight: 600;
+        text-transform: uppercase; letter-spacing: 0.5px;
+        color: var(--text-tertiary, #666); border-bottom: 1px solid var(--border, #2a2a2a);
+    }
+    .admin-table td { padding: 8px; border-bottom: 1px solid var(--border, #2a2a2a); vertical-align: top; }
+    .admin-table tr:hover td { background: var(--hover, rgba(255,255,255,0.02)); }
+    .admin-badge {
+        display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
+    }
+    .admin-badge-admin { background: rgba(239,68,68,0.15); color: #ef4444; }
+    .admin-badge-user { background: rgba(59,130,246,0.15); color: #3b82f6; }
+    .admin-badge-active { background: rgba(34,197,94,0.15); color: #22c55e; }
+    .admin-badge-inactive { background: rgba(239,68,68,0.15); color: #ef4444; }
+    .admin-badge-global { background: rgba(168,85,247,0.15); color: #a855f7; }
+    .admin-badge-team { background: rgba(59,130,246,0.15); color: #3b82f6; }
+    .admin-badge-personal { background: rgba(234,179,8,0.15); color: #eab308; }
+
+    /* ── Toolbar ─────────────────────────────── */
+    .admin-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
+    .admin-search {
+        padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border, #2a2a2a);
+        background: var(--bg-primary, #0e0e10); color: var(--text-primary, #e0e0e0);
+        font-size: 13px; min-width: 200px;
+    }
+</style>
+{{end}}
+
+{{define "scripts-admin"}}
+<script nonce="{{.CSPNonce}}">
+// Hybrid section loader — for admin sections not yet server-rendered.
+// Detects the data-section on the hybrid container and calls the
+// appropriate legacy loader if ui-admin.js is loaded.
+(function() {
+    const container = document.getElementById('adminHybridContainer');
+    if (!container) return;
+    const section = container.dataset.section;
+    if (!section) return;
+
+    // Wait for UI and admin loaders to be available
+    function tryLoad() {
+        if (typeof UI === 'undefined' || typeof UI.loadAdminUsers === 'undefined') {
+            setTimeout(tryLoad, 100);
+            return;
+        }
+        container.innerHTML = '';
+        const LOADERS = {
+            groups: () => UI.loadAdminGroups(),
+            presets: () => UI.loadAdminPresets(),
+            knowledgeBases: () => typeof KnowledgeUI !== 'undefined' ? KnowledgeUI.openAdminPanel() : null,
+            memory: () => typeof MemoryUI !== 'undefined' ? MemoryUI.openAdminPanel() : null,
+            storage: () => typeof loadAdminStorage === 'function' ? loadAdminStorage() : null,
+            extensions: () => UI.loadAdminExtensions(),
+            health: () => UI.loadAdminHealth(),
+            capabilities: () => UI.loadAdminCapabilities(),
+            usage: () => UI.loadAdminUsage(),
+            audit: () => UI.loadAuditLog(),
+            stats: () => UI.loadAdminStats(),
+        };
+        const loader = LOADERS[section];
+        if (loader) loader();
+        else container.innerHTML = '<div class="empty-hint">Section not found</div>';
+    }
+    tryLoad();
+})();
+</script>
+{{end}}
--- a/server/pages/templates/surfaces/chat.html
+++ b/server/pages/templates/surfaces/chat.html
@@ -0,0 +1,57 @@
+{{/*
+    Chat surface (Phase 1 bridge).
+    Server renders the page shell. Existing SPA JS takes over the DOM.
+    All scripts from index.html are loaded here — minus the three
+    already in base.html (api.js, events.js, ui-primitives.js).
+*/}}
+
+{{define "surface-chat"}}
+<div id="appContainer" class="app" style="display:none;height:100%;">
+    {{/* SPA builds its DOM here — same as current index.html */}}
+</div>
+{{end}}
+
+{{define "css-chat"}}
+<link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/persona-kb.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/memory.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/notifications.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/channel-models.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/notification-prefs.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/branding/custom.css" onerror="this.remove()">
+{{end}}
+
+{{define "scripts-chat"}}
+{{/* Vendor libs */}}
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/marked.min.js" onerror="this.onerror=null;this.src='https://cdnjs.cloudflare.com/ajax/libs/marked/16.3.0/lib/marked.umd.min.js'"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/purify.min.js" onerror="this.onerror=null;this.src='https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.4/purify.min.js'"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/codemirror/codemirror.bundle.js?v={{$.Version}}" onerror="console.warn('[CM6] Bundle not available — falling back to textarea')"></script>
+{{/* App JS — order matches index.html (minus api/events/ui-primitives already in base) */}}
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/debug.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/repl.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/surfaces.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/extensions.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/panels.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-format.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-core.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-settings.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-admin.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/tokens.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/notes.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/note-graph.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/attachments.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/tools-toggle.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/knowledge-ui.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/memory-ui.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/persona-kb.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/projects-ui.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/channel-models.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/notification-prefs.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/notifications.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/chat.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/settings-handlers.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/admin-handlers.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/editor-mode.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/router.js?v={{$.Version}}"></script>
+<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/app.js?v={{$.Version}}"></script>
+{{end}}
--- a/server/pages/templates/surfaces/editor.html
+++ b/server/pages/templates/surfaces/editor.html
@@ -0,0 +1,92 @@
+{{/*
+    Editor surface (Phase 2b).
+    Server renders the layout shell with proper CSS sizing.
+    editor-mode.js mounts CodeMirror, file tree, etc. into these containers.
+    Fixes bugs #4 and #5: layout collapse when switching surfaces.
+*/}}
+
+{{define "surface-editor"}}
+<div class="surface-editor" id="surfaceEditor" data-ws-id="{{.Data.WorkspaceID}}" data-ws-name="{{.Data.WorkspaceName}}">
+    {{/* Header — editor-mode.js populates this */}}
+    <div class="surface-editor-header" id="editorHeaderMount"></div>
+
+    <div class="surface-editor-body">
+        {{/* Editor main area — left pane (tabs + code) + split handle + right pane (chat) */}}
+        <div class="surface-editor-main" id="editorMainMount"></div>
+    </div>
+</div>
+{{end}}
+
+{{define "css-editor"}}
+<link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/persona-kb.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/memory.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/notifications.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/channel-models.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/branding/custom.css" onerror="this.remove()">
+<style>
+    /*
+     * Editor surface layout — owns the full viewport below banners.
+     * This is the bug #5 fix: height is set by the server, not fought over
+     * with other surfaces' CSS.
+     */
+    .surface-editor {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+    .surface-editor-header {
+        flex-shrink: 0;
+    }
+    .surface-editor-body {
+        flex: 1;
+        display: flex;
+        min-height: 0;
+        overflow: hidden;
+    }
+    .surface-editor-main {
+        flex: 1;
+        display: flex;
+        min-height: 0;
+        overflow: hidden;
+    }
+</style>
+{{end}}
+
+{{define "scripts-editor"}}
+{{/* Chat rendering for the assist pane */}}
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/marked.min.js"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/purify.min.js"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-core.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/chat.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/attachments.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/tokens.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/extensions.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notes.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/knowledge-ui.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/persona-kb.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/panels.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/surfaces.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/editor-mode.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/projects-ui.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/tools-toggle.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/repl.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}">
+    // Editor surface boot: initialize and mount into template containers
+    document.addEventListener('DOMContentLoaded', () => {
+        if (typeof EditorMode !== 'undefined' && window.__SURFACE__ === 'editor') {
+            const data = window.__PAGE_DATA__ || {};
+            if (data.WorkspaceID) {
+                EditorMode.mountServerRendered(data.WorkspaceID, data.WorkspaceName || 'Workspace');
+            }
+        }
+    });
+</script>
+{{end}}
--- a/server/pages/templates/surfaces/notes.html
+++ b/server/pages/templates/surfaces/notes.html
@@ -0,0 +1,93 @@
+{{/*
+    Notes surface (Phase 2b).
+    Server renders the layout shell. Existing notes.js + note-graph.js
+    handle CRUD and rendering inside the containers.
+*/}}
+
+{{define "surface-notes"}}
+<div class="surface-notes" id="surfaceNotes">
+    <div class="surface-notes-body">
+        {{/* Notes list + editor */}}
+        <div class="surface-notes-main" id="notesMainMount"></div>
+        {{/* Chat assist pane (optional, can toggle) */}}
+        <div class="surface-notes-assist" id="notesAssistMount"></div>
+    </div>
+</div>
+{{end}}
+
+{{define "css-notes"}}
+<link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/persona-kb.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/memory.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/notifications.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/css/channel-models.css?v={{.Version}}">
+<link rel="stylesheet" href="{{.BasePath}}/branding/custom.css" onerror="this.remove()">
+<style>
+    .surface-notes {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+    .surface-notes-body {
+        flex: 1;
+        display: flex;
+        min-height: 0;
+        overflow: hidden;
+    }
+    .surface-notes-main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        overflow: hidden;
+    }
+    .surface-notes-assist {
+        width: 400px;
+        border-left: 1px solid var(--border, #2a2a2a);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+    @media (max-width: 768px) {
+        .surface-notes-assist { display: none; }
+    }
+</style>
+{{end}}
+
+{{define "scripts-notes"}}
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/marked.min.js"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/purify.min.js"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-core.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/chat.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/attachments.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/channel-models.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/tokens.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/extensions.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notes.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/note-graph.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/knowledge-ui.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/persona-kb.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/panels.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/surfaces.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/projects-ui.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}">
+    // Notes surface boot: open notes panel in standalone mode
+    document.addEventListener('DOMContentLoaded', () => {
+        if (window.__SURFACE__ === 'notes' && typeof openNotes === 'function') {
+            // Mount notes list into the main container
+            const mount = document.getElementById('notesMainMount');
+            if (mount) {
+                // Notes panel will build into the mount point
+                mount.dataset.notesStandalone = 'true';
+            }
+            openNotes();
+        }
+    });
+</script>
+{{end}}
--- a/server/pages/templates/surfaces/settings.html
+++ b/server/pages/templates/surfaces/settings.html
@@ -0,0 +1,249 @@
+{{/*
+    Settings surface (Phase 2b).
+    Server renders a full-page settings layout (replaces the modal).
+    Reuses existing settings-handlers.js + ui-settings.js for interactions.
+*/}}
+
+{{define "surface-settings"}}
+<div class="surface-settings">
+    <div class="settings-nav">
+        <div class="settings-nav-title">Settings</div>
+        {{$section := .Section}}
+        <a href="{{.BasePath}}/settings/general" class="settings-nav-link{{if eq $section "general"}} active{{end}}">General</a>
+        <a href="{{.BasePath}}/settings/appearance" class="settings-nav-link{{if eq $section "appearance"}} active{{end}}">Appearance</a>
+        <a href="{{.BasePath}}/settings/providers" class="settings-nav-link{{if eq $section "providers"}} active{{end}}">My Providers</a>
+        <a href="{{.BasePath}}/settings/models" class="settings-nav-link{{if eq $section "models"}} active{{end}}">My Models</a>
+        <a href="{{.BasePath}}/settings/personas" class="settings-nav-link{{if eq $section "personas"}} active{{end}}">My Presets</a>
+        <a href="{{.BasePath}}/settings/roles" class="settings-nav-link{{if eq $section "roles"}} active{{end}}">Model Roles</a>
+        <a href="{{.BasePath}}/settings/knowledge" class="settings-nav-link{{if eq $section "knowledge"}} active{{end}}">Knowledge Bases</a>
+        <a href="{{.BasePath}}/settings/memory" class="settings-nav-link{{if eq $section "memory"}} active{{end}}">Memory</a>
+        <a href="{{.BasePath}}/settings/notifications" class="settings-nav-link{{if eq $section "notifications"}} active{{end}}">Notifications</a>
+        <a href="{{.BasePath}}/settings/usage" class="settings-nav-link{{if eq $section "usage"}} active{{end}}">Usage</a>
+        <div class="settings-nav-sep"></div>
+        <a href="{{.BasePath}}/" class="settings-nav-link settings-nav-back">← Back to Chat</a>
+    </div>
+    <div class="settings-content" id="settingsContentMount">
+        {{/* Content rendered by section-specific JS or server template */}}
+        <div class="settings-content-inner" id="settingsSection" data-section="{{.Section}}">
+            {{if eq .Section "general"}}{{template "settings-general" .}}
+            {{else if eq .Section "appearance"}}{{template "settings-appearance" .}}
+            {{else}}<div class="settings-placeholder" id="settingsDynamic">Loading…</div>
+            {{end}}
+        </div>
+    </div>
+</div>
+{{end}}
+
+{{define "settings-general"}}
+<div class="settings-section">
+    <h2>Profile</h2>
+    <div class="form-group">
+        <label>Display Name</label>
+        <input type="text" id="settingsDisplayName" value="{{if .User}}{{.User.display_name}}{{end}}" placeholder="Your name">
+    </div>
+    <div class="form-group">
+        <label>Email</label>
+        <input type="email" id="settingsEmail" value="{{if .User}}{{.User.email}}{{end}}" disabled>
+    </div>
+    <button class="btn-small btn-primary" onclick="Pages.saveProfile()">Save</button>
+</div>
+
+<div class="settings-section" style="margin-top:16px">
+    <h2>Password</h2>
+    <div class="form-group">
+        <label>Current Password</label>
+        <input type="password" id="settingsCurrentPw">
+    </div>
+    <div class="form-group">
+        <label>New Password</label>
+        <input type="password" id="settingsNewPw">
+    </div>
+    <div class="form-group">
+        <label>Confirm Password</label>
+        <input type="password" id="settingsConfirmPw">
+    </div>
+    <button class="btn-small btn-primary" onclick="Pages.changePassword()">Change Password</button>
+</div>
+{{end}}
+
+{{define "settings-appearance"}}
+<div class="settings-section">
+    <h2>Theme</h2>
+    <div id="themeToggle" class="settings-toggle-group">
+        <button class="theme-btn" data-theme="dark">Dark</button>
+        <button class="theme-btn" data-theme="light">Light</button>
+    </div>
+</div>
+<div class="settings-section" style="margin-top:16px">
+    <h2>Editor Keymap</h2>
+    <div id="keymapToggle" class="settings-toggle-group">
+        <button class="theme-btn" data-keymap="standard">Standard</button>
+        <button class="theme-btn" data-keymap="vim">Vim</button>
+        <button class="theme-btn" data-keymap="emacs">Emacs</button>
+    </div>
+</div>
+<div class="settings-section" style="margin-top:16px">
+    <h2>UI Scale</h2>
+    <div class="form-group">
+        <input type="range" id="settingsScale" min="80" max="120" step="5" value="100">
+        <span id="scaleValue">100%</span>
+    </div>
+    <h2>Message Font Size</h2>
+    <div class="form-group">
+        <input type="range" id="settingsMsgFont" min="12" max="20" step="1" value="14">
+        <span id="msgFontValue">14px</span>
+    </div>
+</div>
+{{end}}
+
+{{define "css-settings"}}
+<style>
+    .surface-settings {
+        display: flex;
+        height: 100%;
+        overflow: hidden;
+    }
+    .settings-nav {
+        width: 200px;
+        border-right: 1px solid var(--border, #2a2a2a);
+        padding: 12px;
+        overflow-y: auto;
+        flex-shrink: 0;
+    }
+    .settings-nav-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--text-secondary, #888);
+        margin-bottom: 12px;
+    }
+    .settings-nav-link {
+        display: block;
+        padding: 6px 10px;
+        border-radius: 6px;
+        color: var(--text-primary, #e0e0e0);
+        text-decoration: none;
+        font-size: 13px;
+        margin-bottom: 2px;
+    }
+    .settings-nav-link.active { background: var(--bg-tertiary, #252528); }
+    .settings-nav-link:hover { background: var(--bg-secondary, #1a1a1e); }
+    .settings-nav-sep {
+        margin: 12px 0;
+        border-top: 1px solid var(--border, #2a2a2a);
+    }
+    .settings-nav-back { color: var(--text-secondary, #888); }
+    .settings-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 20px;
+    }
+    .settings-section {
+        padding: 16px;
+        background: var(--bg-secondary, #1a1a1e);
+        border-radius: 8px;
+        border: 1px solid var(--border, #2a2a2a);
+        max-width: 600px;
+    }
+    .settings-section h2 {
+        font-size: 15px;
+        margin: 0 0 12px;
+    }
+    .settings-toggle-group {
+        display: flex;
+        gap: 6px;
+    }
+    .settings-toggle-group .theme-btn {
+        padding: 6px 14px;
+        border: 1px solid var(--border, #2a2a2a);
+        border-radius: 6px;
+        background: var(--bg-primary, #0e0e10);
+        color: var(--text-primary, #e0e0e0);
+        cursor: pointer;
+        font-size: 13px;
+    }
+    .settings-toggle-group .theme-btn.active {
+        background: var(--accent, #5865f2);
+        border-color: var(--accent, #5865f2);
+        color: white;
+    }
+    .settings-placeholder {
+        padding: 20px;
+        color: var(--text-secondary, #888);
+    }
+    .form-group { margin-bottom: 8px; }
+    .form-group label {
+        display: block;
+        font-size: 12px;
+        color: var(--text-secondary, #888);
+        margin-bottom: 4px;
+    }
+    .form-group input, .form-group select, .form-group textarea {
+        padding: 6px 8px;
+        border-radius: 6px;
+        border: 1px solid var(--border, #2a2a2a);
+        background: var(--bg-primary, #0e0e10);
+        color: var(--text-primary, #e0e0e0);
+        font-size: 13px;
+        width: 100%;
+        max-width: 300px;
+    }
+    .btn-small {
+        padding: 6px 14px;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+    }
+    .btn-primary {
+        background: var(--accent, #5865f2);
+        color: white;
+    }
+    .btn-primary:hover { opacity: 0.9; }
+
+    @media (max-width: 768px) {
+        .settings-nav { width: 160px; font-size: 12px; }
+    }
+</style>
+{{end}}
+
+{{define "scripts-settings"}}
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/marked.min.js"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/vendor/purify.min.js"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-core.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-format.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/ui-settings.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/settings-handlers.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/knowledge-ui.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/persona-kb.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notification-prefs.js?v={{.Version}}"></script>
+<script nonce="{{.CSPNonce}}">
+    // Settings surface boot
+    document.addEventListener('DOMContentLoaded', () => {
+        const section = document.getElementById('settingsSection')?.dataset.section;
+        if (!section) return;
+
+        // Appearance: wire up theme/keymap buttons and sliders
+        if (section === 'appearance' && typeof UI !== 'undefined') {
+            UI.loadAppearanceSettings();
+            UI.initAppearance();
+        }
+
+        // Dynamic sections: let existing JS populate the container
+        const dynamicSections = {
+            providers:     () => typeof UI !== 'undefined' && UI.loadProviderList(),
+            models:        () => typeof UI !== 'undefined' && UI.loadUserModels(),
+            personas:      () => typeof UI !== 'undefined' && UI.loadUserPresets(),
+            usage:         () => typeof UI !== 'undefined' && UI.loadMyUsage(),
+            roles:         () => typeof UI !== 'undefined' && UI.loadUserRoles(),
+            knowledge:     () => typeof KnowledgeUI !== 'undefined' && KnowledgeUI.openManagePanel(),
+            memory:        () => typeof MemoryUI !== 'undefined' && MemoryUI.openSettingsPanel(),
+            notifications: () => typeof NotifPrefs !== 'undefined' && NotifPrefs.load(),
+        };
+        if (dynamicSections[section]) {
+            dynamicSections[section]();
+        }
+    });
+</script>
+{{end}}