fix: align settings/models nav and heading with all other settings pages

local_llm.html had a stale nav (hardcoded / and /help, missing Notifications /
Tools / Schedules / Integrations links) and used a different heading markup
(.page-header) than the rest of the settings pages (.page-title/.page-subtitle).

- Add pg.css link; strip duplicate base CSS (vars, reset, body, nav) from inline
  <style> — page-specific styles (provider blocks, model rows, roles, badges) kept
- Nav: use {{ back_href }} / {{ help_href }} / {{ integrations_nav }} placeholders;
  add Notifications, Tools, Schedules, Integrations (admin) links
- Heading: .page-header → <h1 class="page-title"> + <p class="page-subtitle">
- Body structure: move <nav> outside the .page wrapper; rename .page → .page-wrap
- local_llm.py: _render() accepts request, injects back_href / help_href /
  integrations_nav; adds _preferred_persona(), _integrations_nav() helpers

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-05-13 21:51:06 -04:00
parent a92fd90f0d
commit 070f1ce156
2 changed files with 66 additions and 81 deletions

View File

@@ -25,11 +25,31 @@ import jwt
from fastapi import APIRouter, Form, Request
from fastapi.responses import HTMLResponse, JSONResponse, RedirectResponse
from auth_utils import COOKIE_NAME, decode_token
from auth_utils import COOKIE_NAME, decode_token, _read_auth
from config import settings as app_settings
from persona import list_user_personas
import model_registry as reg
from tools import TOOL_CATEGORIES
_LAST_PERSONA_COOKIE = "cx_last_persona"
def _preferred_persona(request: Request, username: str) -> str:
names = list_user_personas(username)
if not names:
return ""
cookie_val = request.cookies.get(_LAST_PERSONA_COOKIE, "")
if cookie_val in names:
return cookie_val
return names[0]
def _integrations_nav(username: str) -> str:
role = _read_auth(username).get("role", "user")
if role == "admin":
return '<a href="/settings/integrations" class="nav-link">Integrations</a>'
return ""
logger = logging.getLogger(__name__)
router = APIRouter()
@@ -50,7 +70,7 @@ def _get_user(request: Request) -> str | None:
# ── Page renderer ─────────────────────────────────────────────────────────────
def _render(username: str, success: str = "", error: str = "") -> str:
def _render(username: str, request: Request | None = None, success: str = "", error: str = "") -> str:
registry = reg.get_registry(username)
hosts = registry.get("hosts", [])
models = registry.get("models", [])
@@ -431,6 +451,12 @@ def _render(username: str, success: str = "", error: str = "") -> str:
}
for key, val in replacements.items():
html = html.replace(key, val)
back_persona = _preferred_persona(request, username) if request else ""
html = html.replace("{{ back_href }}", f"/{username}/{back_persona}" if back_persona else "/")
html = html.replace("{{ help_href }}", f"/help?persona={back_persona}" if back_persona else "/help")
html = html.replace("{{ integrations_nav }}", _integrations_nav(username))
if success:
html = html.replace("<!-- SUCCESS -->", f'<p class="msg success">{success}</p>')
if error:
@@ -445,7 +471,7 @@ async def models_page_canonical(request: Request):
username = _get_user(request)
if not username:
return RedirectResponse("/login", status_code=302)
return HTMLResponse(_render(username))
return HTMLResponse(_render(username, request))
@router.get("/settings/local", include_in_schema=False)
@@ -464,9 +490,9 @@ async def save_google_account(
if not username:
return RedirectResponse("/login", status_code=302)
if not api_key.strip() and not account_id.strip():
return HTMLResponse(_render(username, error="API key is required."))
return HTMLResponse(_render(username, request, error="API key is required."))
reg.save_google_account(username, account_id or None, label, api_key)
return HTMLResponse(_render(username, success="Google account saved."))
return HTMLResponse(_render(username, request, success="Google account saved."))
@router.post("/settings/local/google-account/{account_id}/remove", include_in_schema=False)
@@ -475,7 +501,7 @@ async def remove_google_account(request: Request, account_id: str):
if not username:
return RedirectResponse("/login", status_code=302)
reg.remove_google_account(username, account_id)
return HTMLResponse(_render(username, success="Google account removed."))
return HTMLResponse(_render(username, request, success="Google account removed."))
@router.post("/settings/local/anthropic-key", include_in_schema=False)
@@ -489,9 +515,9 @@ async def save_anthropic_api_key(
if not username:
return RedirectResponse("/login", status_code=302)
if not api_key.strip() and not key_id.strip():
return HTMLResponse(_render(username, error="API key is required."))
return HTMLResponse(_render(username, request, error="API key is required."))
reg.save_anthropic_api_key(username, key_id or None, label, api_key)
return HTMLResponse(_render(username, success="Anthropic API key saved."))
return HTMLResponse(_render(username, request, success="Anthropic API key saved."))
@router.post("/settings/local/anthropic-key/{key_id}/remove", include_in_schema=False)
@@ -500,7 +526,7 @@ async def remove_anthropic_api_key(request: Request, key_id: str):
if not username:
return RedirectResponse("/login", status_code=302)
reg.remove_anthropic_api_key(username, key_id)
return HTMLResponse(_render(username, success="Anthropic API key removed."))
return HTMLResponse(_render(username, request, success="Anthropic API key removed."))
@router.post("/settings/local/host", include_in_schema=False)
@@ -517,9 +543,9 @@ async def save_host(
if not username:
return RedirectResponse("/login", status_code=302)
if not api_url.strip():
return HTMLResponse(_render(username, error="API URL is required."))
return HTMLResponse(_render(username, request, error="API URL is required."))
reg.save_host(username, host_id or None, label, api_url, api_key, host_type, max_concurrent)
return HTMLResponse(_render(username, success="Host saved."))
return HTMLResponse(_render(username, request, success="Host saved."))
@router.post("/settings/local/host/{host_id}/remove", include_in_schema=False)
@@ -528,7 +554,7 @@ async def remove_host(request: Request, host_id: str):
if not username:
return RedirectResponse("/login", status_code=302)
reg.remove_host(username, host_id)
return HTMLResponse(_render(username, success="Host removed."))
return HTMLResponse(_render(username, request, success="Host removed."))
@router.post("/settings/local/models/add", include_in_schema=False)
@@ -560,9 +586,9 @@ async def add_model(
if provider == "local":
if not model_name.strip():
return HTMLResponse(_render(username, error="Model name is required."))
return HTMLResponse(_render(username, request, error="Model name is required."))
if not host_id.strip():
return HTMLResponse(_render(username, error="Select a host."))
return HTMLResponse(_render(username, request, error="Select a host."))
reg.save_model(username, None, host_id, label, model_name, context_k, tag_list,
max_rounds=max_rounds_, tools=tools_bool,
reasoning_budget_tokens=reasoning_budget_)
@@ -570,9 +596,9 @@ async def add_model(
elif provider in ("google", "anthropic"):
if not cloud_model_name.strip():
return HTMLResponse(_render(username, error="Select a model from the catalog."))
return HTMLResponse(_render(username, request, error="Select a model from the catalog."))
if provider == "google" and not account_id.strip():
return HTMLResponse(_render(username, error="Select a Google account."))
return HTMLResponse(_render(username, request, error="Select a Google account."))
reg.save_cloud_model(
username, None, provider, cloud_model_name, label,
account_id=account_id or None,
@@ -582,10 +608,10 @@ async def add_model(
)
display = label or cloud_model_name
else:
return HTMLResponse(_render(username, error=f"Unknown provider: {provider}"))
return HTMLResponse(_render(username, request, error=f"Unknown provider: {provider}"))
logger.info("model added: %s / %s (%s)", username, display, provider)
return HTMLResponse(_render(username, success=f'Model "{display}" added.'))
return HTMLResponse(_render(username, request, success=f'Model "{display}" added.'))
@router.post("/settings/local/models/{model_id}/edit", include_in_schema=False)
@@ -608,14 +634,14 @@ async def edit_model(
if not username:
return RedirectResponse("/login", status_code=302)
if not model_name.strip():
return HTMLResponse(_render(username, error="Model name is required."))
return HTMLResponse(_render(username, request, error="Model name is required."))
tag_list = [t.strip() for t in tags.split(",") if t.strip()]
max_rounds_ = max_rounds or None
tools_bool = tools != 0
reasoning_budget_ = reasoning_budget_tokens or None
if mtype == "local_openai":
if not host_id.strip():
return HTMLResponse(_render(username, error="Select a host for this model."))
return HTMLResponse(_render(username, request, error="Select a host for this model."))
reg.save_model(username, model_id, host_id, label, model_name, context_k, tag_list,
max_rounds=max_rounds_, tools=tools_bool,
reasoning_budget_tokens=reasoning_budget_)
@@ -628,10 +654,10 @@ async def edit_model(
credential_id=credential_id or "cli", context_k=context_k, tags=tag_list,
max_rounds=max_rounds_, tools=tools_bool)
else:
return HTMLResponse(_render(username, error=f"Unknown model type: {mtype}"))
return HTMLResponse(_render(username, request, error=f"Unknown model type: {mtype}"))
display = label.strip() or model_name.strip()
logger.info("model edited: %s / %s (%s)", username, display, mtype)
return HTMLResponse(_render(username, success=f'Model "{display}" updated.'))
return HTMLResponse(_render(username, request, success=f'Model "{display}" updated.'))
@router.post("/settings/local/models/{model_id}/remove", include_in_schema=False)
@@ -640,7 +666,7 @@ async def remove_model(request: Request, model_id: str):
if not username:
return RedirectResponse("/login", status_code=302)
reg.remove_model(username, model_id)
return HTMLResponse(_render(username, success="Model removed."))
return HTMLResponse(_render(username, request, success="Model removed."))
@router.post("/api/models/role")

View File

@@ -7,52 +7,10 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/pg.css">
<script>(function(){var t=localStorage.getItem('theme')||(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',t);})();</script>
<style>
:root {
--pg-bg: #0f1117; --pg-surface: #1a1d27;
--pg-border: #2d3148; --pg-border-deep: #1e2030;
--pg-text: #e2e8f0; --pg-muted: #94a3b8;
--pg-dim: #64748b; --pg-dimmer: #475569;
--pg-bright: #cbd5e1; --pg-nav-hover: rgba(255,255,255,0.05);
}
[data-theme="light"] {
--pg-bg: #f4f2fa; --pg-surface: #ffffff;
--pg-border: #d0c8e8; --pg-border-deep: #d0c8e8;
--pg-text: #1a1228; --pg-muted: #5a5478;
--pg-dim: #7a7290; --pg-dimmer: #9e98b0;
--pg-bright: #1a1228; --pg-nav-hover: rgba(0,0,0,0.05);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
min-height: 100vh; background: var(--pg-bg);
font-family: 'Inter', system-ui, sans-serif; font-weight: 450;
-webkit-font-smoothing: antialiased; color: var(--pg-text);
padding: 2rem 1.5rem 4rem;
}
.page { max-width: 700px; margin: 0 auto; }
/* Nav */
.page-nav { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.nav-link {
display: inline-flex; align-items: center;
padding: 0.3rem 0.6rem; border-radius: 6px;
font-size: 0.8rem; font-weight: 500; color: var(--pg-dim);
text-decoration: none; transition: color 0.15s, background 0.15s; white-space: nowrap;
}
.nav-link:hover { color: var(--pg-bright); background: var(--pg-nav-hover); }
.nav-link.active { color: #a78bfa; }
.nav-spacer { flex: 1; min-width: 0.5rem; }
.nav-link.nav-logout { color: var(--pg-dimmer); }
.nav-link.nav-logout:hover { color: var(--pg-muted); background: none; }
/* Page header */
.page-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--pg-border); }
.page-header h1 { font-size: 1.4rem; font-weight: 700; color: #a78bfa; }
.page-header p { font-size: 0.82rem; color: var(--pg-muted); margin-top: 0.25rem; }
/* Section cards */
/* Section cards (local_llm uses card style; overrides pg.css flat sections) */
.section {
background: var(--pg-surface); border: 1px solid var(--pg-border);
border-radius: 10px; padding: 1.5rem; margin-bottom: 1.25rem;
@@ -293,20 +251,21 @@
</style>
</head>
<body>
<div class="page">
<nav class="page-nav">
<a href="/" class="nav-link">← Chat</a>
<a href="/help" class="nav-link">Help</a>
<a href="{{ back_href }}" class="nav-link">← Chat</a>
<a href="{{ help_href }}" class="nav-link">Help</a>
<a href="/settings" class="nav-link">Settings</a>
<a href="/settings/models" class="nav-link active">Models</a>
<a href="/settings/notifications" class="nav-link">Notifications</a>
<a href="/settings/tools" class="nav-link">Tools</a>
<a href="/settings/crons" class="nav-link">Schedules</a>
{{ integrations_nav }}
<span class="nav-spacer"></span>
<a href="/logout" class="nav-link nav-logout">Sign out</a>
</nav>
<div class="page-header">
<h1>Model Registry</h1>
<p>Configure providers, hosts, and model assignments.</p>
</div>
<div class="page-wrap">
<h1 class="page-title">Model Registry</h1>
<p class="page-subtitle">Configure providers, hosts, and model assignments.</p>
<!-- SUCCESS --><!-- ERROR -->