Upload 12 files

.dockerignore

@@ -1,4 +1,4 @@
-__pycache__/
+__pycache__/
 .pytest_cache/
 .pytest_tmp/
 *.pyc

.env.example

@@ -4,6 +4,7 @@ GATEWAY_API_KEY=
 NVIDIA_API_BASE=https://integrate.api.nvidia.com/v1
 NVIDIA_NIM_API_KEY=
 HEALTHCHECK_INTERVAL_MINUTES=60
-HEALTHCHECK_PROMPT=Reply with the single word OK.
+HEALTHCHECK_PROMPT=请只回复 OK。
 PUBLIC_HISTORY_HOURS=48
 DATABASE_PATH=./data.sqlite3
+

Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3.13-slim
+FROM python:3.13-slim
 
 ENV PYTHONDONTWRITEBYTECODE=1 \
     PYTHONUNBUFFERED=1 \

README.md

@@ -1,28 +1,34 @@
 ---
-title: NVIDIA NIM Responses Gateway
+title: NVIDIA NIM 响应网关
 sdk: docker
 app_port: 7860
 pinned: false
 ---
 
-# NVIDIA NIM Responses Gateway
+# NVIDIA NIM 响应网关
 
-A FastAPI gateway that converts NVIDIA NIM's official chat endpoint:
+这是一个基于 FastAPI 的兼容层项目，用来把 NVIDIA 官方接口：
 
 `https://integrate.api.nvidia.com/v1/chat/completions`
 
-into an OpenAI-style `/v1/responses` interface, with:
+转换为 OpenAI 风格的 `/v1/responses` 接口，并附带一个公开健康看板和一个中文后台管理系统。
 
-- tool calling / function calling passthrough
-- `previous_response_id` conversation chaining
-- `/v1/models` model listing
-- a public model health dashboard
-- an admin SPA for model management, NVIDIA NIM key management, health checks, and scheduler settings
-- Docker packaging for Hugging Face Spaces
+## 已支持能力
 
-## Included NVIDIA models
+- `POST /v1/responses`
+- `GET /v1/models`
+- `GET /v1/responses/{response_id}`
+- tool calling / function calling 转换
+- `function_call_output` 回灌转换
+- `previous_response_id` 对话续写
+- 模型管理
+- NVIDIA NIM Key 管理
+- 按小时健康巡检与公开状态页展示
+- Docker 方式部署到 Hugging Face Space
 
-The app seeds these models on first startup:
+## 预置模型
+
+首次启动会自动写入以下模型：
 
 - `z-ai/glm5`
 - `minimaxai/minimax-m2.5`
@@ -31,19 +37,24 @@ The app seeds these models on first startup:
 - `google/gemma-4-31b-it`
 - `qwen/qwen3.5-397b-a17b`
 
-You can add or remove more models from the admin page.
+你也可以在后台继续添加、删除和测试模型。
+
+## 页面与接口
+
+公开页面：
 
-## Routes
+- `GET /` 模型健康度看板
+- `GET /api/health/public` 公开健康数据
 
-- `GET /` public health dashboard
-- `GET /admin` admin SPA
-- `GET /api/health/public` public hourly health data
-- `GET /v1/models` OpenAI-style model list
-- `POST /v1/responses` OpenAI-style responses endpoint
-- `GET /v1/responses/{response_id}` retrieve a stored response
+兼容接口：
 
-Admin API:
+- `POST /v1/responses`
+- `GET /v1/models`
+- `GET /v1/responses/{response_id}`
 
+后台页面：
+
+- `GET /admin`
 - `POST /admin/api/login`
 - `GET /admin/api/overview`
 - `GET/POST/DELETE /admin/api/models...`
@@ -52,61 +63,65 @@ Admin API:
 - `POST /admin/api/healthchecks/run`
 - `GET/PUT /admin/api/settings`
 
-## Environment variables
+## 环境变量
 
-- `PASSWORD` required for admin login
-- `SESSION_SECRET` optional cookie signing secret; falls back to `PASSWORD`
-- `GATEWAY_API_KEY` optional bearer token to protect `/v1/models` and `/v1/responses`
-- `NVIDIA_API_BASE` defaults to `https://integrate.api.nvidia.com/v1`
-- `NVIDIA_NIM_API_KEY` optional bootstrap key inserted on first startup
-- `HEALTHCHECK_INTERVAL_MINUTES` default `60`
-- `HEALTHCHECK_PROMPT` default `Reply with the single word OK.`
-- `PUBLIC_HISTORY_HOURS` default `48`
-- `DATABASE_PATH` default `./data.sqlite3`
+- `PASSWORD`：后台登录密码，必填
+- `SESSION_SECRET`：后台会话签名密钥，可选；默认回退到 `PASSWORD`
+- `GATEWAY_API_KEY`：如果需要给 `/v1/models` 和 `/v1/responses` 再加一层 Bearer 保护，可以设置它
+- `NVIDIA_API_BASE`：默认 `https://integrate.api.nvidia.com/v1`
+- `NVIDIA_NIM_API_KEY`：可选，首次启动时自动导入为默认 Key
+- `HEALTHCHECK_INTERVAL_MINUTES`：默认 `60`
+- `HEALTHCHECK_PROMPT`：默认 `请只回复 OK。`
+- `PUBLIC_HISTORY_HOURS`：默认 `48`
+- `DATABASE_PATH`：默认 `./data.sqlite3`
 
-A starter file is available at `.env.example`.
+示例配置见 `.env.example`。
 
-## Local run
+## 本地运行
 
-Install runtime dependencies:
+安装运行依赖：
 
 ```bash
 pip install -r requirements.txt
 ```
 
-For local verification with the smoke script:
+如需本地联调与 smoke test：
 
 ```bash
 pip install -r requirements-dev.txt
 python scripts/local_smoke_test.py
 ```
 
-Run the app:
+启动服务：
 
 ```bash
 uvicorn app.main:app --host 0.0.0.0 --port 7860
 ```
 
-## Hugging Face Space deployment
+## 部署到 Hugging Face Space
+
+这个仓库已经按 Docker Space 准备好了部署文件。
 
-This repository is prepared as a Docker Space.
+1. 新建一个 Hugging Face Space，SDK 选择 `Docker`
+2. 将 `hf_space` 目录内的内容作为 Space 根目录上传
+3. 在 Space Secrets 中至少配置 `PASSWORD` 和一个 NVIDIA NIM Key
+4. 打开 `/admin`，确认 Key 可用，并执行一次巡检
 
-1. Create a new Hugging Face Space with `SDK: Docker`.
-2. Push this repository to the Space.
-3. Add Space secrets for at least `PASSWORD` and one NVIDIA NIM key.
-4. Open `/admin`, add or verify the stored keys, then run health checks.
+## 本地验证情况
 
-## Notes on API compatibility
+我已经通过本地 smoke test 验证了以下链路：
 
-- The gateway accepts OpenAI-style `input` payloads and converts them to chat-completions `messages`.
-- Function tools are mapped to NVIDIA NIM's OpenAI-compatible `tools` format.
-- Returned tool calls are exposed as `function_call` items inside the `output` array.
-- `stream: true` is supported as SSE, but the current implementation emits buffered response events after the upstream completion finishes.
+- 中文首页与中文后台页面可正常返回
+- HTML 响应头包含 `charset=utf-8`
+- `/v1/responses` 文本回复转换正常
+- tool call / function call 转换正常
+- `function_call_output` 回灌到上游消息格式正常
+- `previous_response_id` 上下文拼接正常
+- 后台登录、手动巡检、公开健康页同步正常
 
-## References
+## 参考资料
 
-- OpenAI Responses API guide: https://platform.openai.com/docs/guides/responses-vs-chat-completions
-- OpenAI function calling guide: https://platform.openai.com/docs/guides/function-calling
-- NVIDIA Build portal: https://build.nvidia.com/
-- NVIDIA NIM API reference: https://docs.api.nvidia.com/
-
+- OpenAI Responses API: https://platform.openai.com/docs/guides/responses-vs-chat-completions
+- OpenAI Function Calling: https://platform.openai.com/docs/guides/function-calling
+- NVIDIA Build: https://build.nvidia.com/
+- NVIDIA NIM API 文档: https://docs.api.nvidia.com/

app/main.py

@@ -1,4 +1,4 @@
-from __future__ import annotations
+from __future__ import annotations
 
 import json
 import os
@@ -13,7 +13,7 @@ from typing import Any
 import httpx
 from apscheduler.schedulers.asyncio import AsyncIOScheduler
 from fastapi import Depends, FastAPI, Header, HTTPException, Request, Response, status
-from fastapi.responses import FileResponse, JSONResponse, StreamingResponse
+from fastapi.responses import HTMLResponse, JSONResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from itsdangerous import BadSignature, SignatureExpired, URLSafeTimedSerializer
 
@@ -32,7 +32,7 @@ GATEWAY_API_KEY = os.getenv("GATEWAY_API_KEY")
 DEFAULT_ENV_KEY = os.getenv("NVIDIA_NIM_API_KEY") or os.getenv("NVIDIA_API_KEY")
 REQUEST_TIMEOUT_SECONDS = float(os.getenv("REQUEST_TIMEOUT_SECONDS", "90"))
 DEFAULT_HEALTH_INTERVAL_MINUTES = int(os.getenv("HEALTHCHECK_INTERVAL_MINUTES", "60"))
-DEFAULT_HEALTH_PROMPT = os.getenv("HEALTHCHECK_PROMPT", "Reply with the single word OK.")
+DEFAULT_HEALTH_PROMPT = os.getenv("HEALTHCHECK_PROMPT", "请只回复 OK。")
 PUBLIC_HISTORY_HOURS = int(os.getenv("PUBLIC_HISTORY_HOURS", "48"))
 
 DEFAULT_MODELS = [
@@ -247,7 +247,7 @@ def require_admin(request: Request, authorization: str | None = Header(default=N
     if not token:
         token = request.cookies.get(COOKIE_NAME)
     if not token or not verify_admin_token(token):
-        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Admin authentication required.")
+        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="需要管理员登录。")
     return True
 
 
@@ -294,7 +294,7 @@ def select_api_key(conn: sqlite3.Connection, explicit_id: int | None = None) ->
         """
     ).fetchone()
     if not row:
-        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="No enabled NVIDIA NIM API key is configured.")
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="当前没有可用的 NVIDIA NIM Key。")
     return row
 
 
@@ -821,7 +821,7 @@ async def run_healthchecks(model_identifier: str | int | None = None, api_key_id
         if api_key_identifier is not None:
             api_key_row = fetch_key_by_identifier(conn, api_key_identifier, enabled_only=True)
             if not api_key_row:
-                raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="API key not found.")
+                raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="未找到 API Key。")
             key_rows = [api_key_row]
         else:
             key_rows = conn.execute("SELECT * FROM api_keys WHERE enabled = 1 ORDER BY id ASC").fetchall()
@@ -830,7 +830,7 @@ async def run_healthchecks(model_identifier: str | int | None = None, api_key_id
         if model_identifier is not None:
             model_row = fetch_model_by_identifier(conn, model_identifier, enabled_only=True)
             if not model_row:
-                raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Model not found.")
+                raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="未找到模型。")
             model_rows = [model_row]
         else:
             model_rows = conn.execute("SELECT * FROM proxy_models WHERE enabled = 1 ORDER BY sort_order ASC, model_id ASC").fetchall()
@@ -900,18 +900,23 @@ async def lifespan(_app: FastAPI):
             scheduler.shutdown(wait=False)
 
 
-app = FastAPI(title="NIM Responses Gateway", lifespan=lifespan)
+app = FastAPI(title="NIM 响应网关", lifespan=lifespan)
 app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
 
 
+def render_html(filename: str) -> HTMLResponse:
+    content = (STATIC_DIR / filename).read_text(encoding="utf-8")
+    return HTMLResponse(content=content, media_type="text/html; charset=utf-8")
+
+
 @app.get("/")
-async def public_dashboard() -> FileResponse:
-    return FileResponse(STATIC_DIR / "index.html")
+async def public_dashboard() -> HTMLResponse:
+    return render_html("index.html")
 
 
 @app.get("/admin")
-async def admin_dashboard() -> FileResponse:
-    return FileResponse(STATIC_DIR / "admin.html")
+async def admin_dashboard() -> HTMLResponse:
+    return render_html("admin.html")
 
 
 @app.get("/api/health/public")
@@ -994,11 +999,11 @@ async def create_response(request: Request, _: bool = Depends(require_proxy_toke
 @app.post("/admin/api/login")
 async def admin_login(request: Request, response: Response):
     if not ADMIN_PASSWORD:
-        raise HTTPException(status_code=status.HTTP_503_SERVICE_UNAVAILABLE, detail="PASSWORD is not configured.")
+        raise HTTPException(status_code=status.HTTP_503_SERVICE_UNAVAILABLE, detail="尚未配置 PASSWORD 环境变量。")
     body = await request.json()
     password = body.get("password") if isinstance(body, dict) else None
     if password != ADMIN_PASSWORD:
-        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Invalid password.")
+        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="密码错误。")
     token = create_admin_token()
     response.set_cookie(COOKIE_NAME, token, httponly=True, samesite="lax", secure=False, max_age=60 * 60 * 24 * 7)
     return {"token": token, "access_token": token, "token_type": "bearer"}
@@ -1007,7 +1012,7 @@ async def admin_login(request: Request, response: Response):
 @app.post("/admin/api/logout")
 async def admin_logout(response: Response, _: bool = Depends(require_admin)):
     response.delete_cookie(COOKIE_NAME)
-    return {"message": "Logged out."}
+    return {"message": "已退出登录。"}
 
 
 @app.get("/admin/api/session")
@@ -1103,7 +1108,7 @@ def delete_model_internal(model_identifier: str) -> dict[str, Any]:
     try:
         row = fetch_model_by_identifier(conn, model_identifier)
         if not row:
-            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Model not found.")
+            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="未找到模型。")
         conn.execute("DELETE FROM proxy_models WHERE id = ?", (row["id"],))
         conn.commit()
         return {"message": "Model deleted."}
@@ -1130,7 +1135,7 @@ async def test_model_internal(model_identifier: str, payload: dict[str, Any] | N
     try:
         row = fetch_model_by_identifier(conn, model_identifier, enabled_only=True)
         if not row:
-            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Model not found.")
+            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="未找到模型。")
         api_key_row = select_api_key(conn, payload.get("api_key_id") if payload else None)
         return await perform_healthcheck(conn, row, api_key_row, (payload or {}).get("prompt") or DEFAULT_HEALTH_PROMPT)
     finally:
@@ -1201,7 +1206,7 @@ def delete_key_internal(key_identifier: str) -> dict[str, Any]:
     try:
         row = fetch_key_by_identifier(conn, key_identifier)
         if not row:
-            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="API key not found.")
+            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="未找到 API Key。")
         conn.execute("DELETE FROM api_keys WHERE id = ?", (row["id"],))
         conn.commit()
         return {"message": "API key deleted."}
@@ -1228,11 +1233,11 @@ async def test_key_internal(key_identifier: str, payload: dict[str, Any] | None
     try:
         key_row = fetch_key_by_identifier(conn, key_identifier, enabled_only=True)
         if not key_row:
-            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="API key not found.")
+            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="未找到 API Key。")
         model_identifier = (payload or {}).get("model_id") or DEFAULT_MODELS[0][0]
         model_row = fetch_model_by_identifier(conn, model_identifier, enabled_only=True)
         if not model_row:
-            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Model not found.")
+            raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="未找到模型。")
         return await perform_healthcheck(conn, model_row, key_row, (payload or {}).get("prompt") or DEFAULT_HEALTH_PROMPT)
     finally:
         conn.close()
@@ -1270,7 +1275,7 @@ async def admin_healthchecks(hours: int = 48, _: bool = Depends(require_admin)):
             """,
             (since.isoformat(),),
         ).fetchall()
-        items = [{"id": row["id"], "model": row["display_name"], "model_id": row["model_id"], "api_key": row["key_name"], "status": "healthy" if row["ok"] else "down", "detail": row["response_excerpt"] or row["error_message"] or "No details available.", "latency": row["latency_ms"], "status_code": row["status_code"], "checked_at": row["checked_at"]} for row in rows]
+        items = [{"id": row["id"], "model": row["display_name"], "model_id": row["model_id"], "api_key": row["key_name"], "status": "healthy" if row["ok"] else "down", "detail": row["response_excerpt"] or row["error_message"] or "暂无详情。", "latency": row["latency_ms"], "status_code": row["status_code"], "checked_at": row["checked_at"]} for row in rows]
         return {"items": items}
     finally:
         conn.close()

requirements.txt

@@ -1,4 +1,4 @@
-fastapi>=0.116.0,<1.0.0
+fastapi>=0.116.0,<1.0.0
 uvicorn[standard]>=0.35.0,<1.0.0
 httpx>=0.28.1,<1.0.0
 apscheduler>=3.10.4,<4.0.0

static/admin.html

@@ -1,40 +1,60 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Admin - NVIDIA NIM Operations</title>
+    <title>NVIDIA NIM 管理后台</title>
     <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=Space+Grotesk:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Noto+Sans+SC:wght@400;500;700;800&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/static/style.css" />
   </head>
-  <body>
+  <body class="admin-body">
+    <div class="ambient ambient-left"></div>
+    <div class="ambient ambient-right"></div>
     <div class="admin-shell">
       <aside class="admin-sidebar">
-        <h3>Sections</h3>
-        <button class="sidebar-btn active" data-panel="overview">Overview</button>
-        <button class="sidebar-btn" data-panel="models">Models</button>
-        <button class="sidebar-btn" data-panel="keys">API Keys</button>
-        <button class="sidebar-btn" data-panel="health">Health Checks</button>
-        <button class="sidebar-btn" data-panel="settings">Settings</button>
+        <div class="brand-block">
+          <span class="hero-badge">NVIDIA NIM</span>
+          <h1>运营控制台</h1>
+          <p>管理模型目录、API Key、健康巡检和公开看板的数据来源。</p>
+        </div>
+        <h3>功能导航</h3>
+        <button class="sidebar-btn active" data-panel="overview">总览</button>
+        <button class="sidebar-btn" data-panel="models">模型管理</button>
+        <button class="sidebar-btn" data-panel="keys">Key 管理</button>
+        <button class="sidebar-btn" data-panel="health">巡检记录</button>
+        <button class="sidebar-btn" data-panel="settings">调度设置</button>
       </aside>
+
       <section class="admin-content">
         <div class="glass-panel" data-panel="overview">
-          <h2>Command center</h2>
-          <div class="section-grid" id="overview-metrics"></div>
-          <div class="glass-panel" style="margin-top: 1rem;">
-            <h3>Recent checks</h3>
+          <div class="panel-headline">
+            <div>
+              <span class="section-tag">控制中心</span>
+              <h2>网关运行总览</h2>
+            </div>
+            <p class="status-text">统一查看模型、Key 和近几次健康探测结果。</p>
+          </div>
+          <div class="section-grid compact-grid" id="overview-metrics"></div>
+          <div class="glass-panel sub-panel">
+            <div class="panel-headline compact">
+              <div>
+                <span class="section-tag">最近活动</span>
+                <h3>最近巡检</h3>
+              </div>
+            </div>
             <table class="table">
               <thead>
                 <tr>
-                  <th>Time</th>
-                  <th>Model</th>
-                  <th>Status</th>
-                  <th>Latency</th>
+                  <th>时间</th>
+                  <th>模型</th>
+                  <th>状态</th>
+                  <th>时延</th>
                 </tr>
               </thead>
               <tbody id="recent-checks"></tbody>
@@ -43,30 +63,37 @@
         </div>
 
         <div class="glass-panel hidden" data-panel="models">
+          <div class="panel-headline">
+            <div>
+              <span class="section-tag">目录配置</span>
+              <h2>模型管理</h2>
+            </div>
+            <p class="status-text">添加、删除、连通性测试，以及使用与巡检统计。</p>
+          </div>
           <div class="section-grid compact-grid">
             <div class="metric-card">
-              <h3>Total models</h3>
+              <h3>模型总数</h3>
               <strong id="model-count">-</strong>
             </div>
             <div class="metric-card">
-              <h3>Healthy</h3>
+              <h3>当前健康</h3>
               <strong id="model-healthy">-</strong>
             </div>
           </div>
-          <div class="form-grid" style="margin-top: 1rem;">
-            <input id="model-id" placeholder="Model ID (e.g. z-ai/glm5)" />
-            <input id="model-display-name" placeholder="Display name" />
-            <textarea id="model-description" placeholder="Description for the admin catalog"></textarea>
-            <button id="model-add" type="button">Add or update model</button>
+          <div class="form-grid spaced-top">
+            <input id="model-id" placeholder="模型 ID，例如 z-ai/glm5" />
+            <input id="model-display-name" placeholder="展示名称，例如 GLM-5" />
+            <textarea id="model-description" placeholder="模型说明，将出现在后台管理视图中"></textarea>
+            <button id="model-add" type="button">新增或更新模型</button>
           </div>
-          <table class="table" style="margin-top: 1rem;">
+          <table class="table spaced-top">
             <thead>
               <tr>
-                <th>Model</th>
-                <th>Status</th>
-                <th>Requests</th>
-                <th>Health</th>
-                <th>Actions</th>
+                <th>模型</th>
+                <th>状态</th>
+                <th>调用次数</th>
+                <th>巡检统计</th>
+                <th>操作</th>
               </tr>
             </thead>
             <tbody id="model-table"></tbody>
@@ -74,21 +101,27 @@
         </div>
 
         <div class="glass-panel hidden" data-panel="keys">
-          <h3>API Keys</h3>
+          <div class="panel-headline">
+            <div>
+              <span class="section-tag">凭据配置</span>
+              <h2>NVIDIA NIM Key 管理</h2>
+            </div>
+            <p class="status-text">统一维护可用 Key，并统计请求和巡检使用情况。</p>
+          </div>
           <div class="form-grid compact-grid">
-            <input id="key-label" placeholder="Key label" />
-            <input id="key-value" placeholder="NVIDIA NIM key" />
-            <button id="key-add" type="button">Store key</button>
+            <input id="key-label" placeholder="Key 名称，例如 主生产 Key" />
+            <input id="key-value" placeholder="输入 NVIDIA NIM Key" />
+            <button id="key-add" type="button">保存 Key</button>
           </div>
-          <table class="table" style="margin-top: 1rem;">
+          <table class="table spaced-top">
             <thead>
               <tr>
-                <th>Label</th>
-                <th>Masked</th>
-                <th>Requests</th>
-                <th>Last tested</th>
-                <th>Status</th>
-                <th>Actions</th>
+                <th>名称</th>
+                <th>脱敏值</th>
+                <th>请求次数</th>
+                <th>最近测试</th>
+                <th>状态</th>
+                <th>操作</th>
               </tr>
             </thead>
             <tbody id="key-table"></tbody>
@@ -96,29 +129,36 @@
         </div>
 
         <div class="glass-panel hidden" data-panel="health">
-          <div class="toolbar-row">
+          <div class="panel-headline">
             <div>
-              <h3>Health checks</h3>
-              <p class="status-text">Manual runs are stored and surfaced on the public board hour by hour.</p>
+              <span class="section-tag">健康巡检</span>
+              <h2>巡检记录</h2>
             </div>
-            <button id="run-healthcheck" type="button">Run checks now</button>
+            <button id="run-healthcheck" type="button">立即执行巡检</button>
           </div>
+          <p class="status-text">手动触发的巡检结果会立刻写入数据库，并同步更新到公开健康页。</p>
           <div class="section-grid" id="health-grid"></div>
         </div>
 
         <div class="glass-panel hidden" data-panel="settings">
-          <h3>Scheduler settings</h3>
+          <div class="panel-headline">
+            <div>
+              <span class="section-tag">计划任务</span>
+              <h2>调度设置</h2>
+            </div>
+            <p class="status-text">设置巡检开关、时间间隔、公开页保留时长和巡检提示词。</p>
+          </div>
           <div class="form-grid">
             <label class="checkbox-row">
               <input id="healthcheck-enabled" type="checkbox" />
-              <span>Enable scheduled health checks</span>
+              <span>启用定时健康巡检</span>
             </label>
-            <input id="healthcheck-interval" type="number" min="5" step="5" placeholder="Interval in minutes" />
-            <input id="public-history-hours" type="number" min="1" step="1" placeholder="Public history hours" />
-            <textarea id="healthcheck-prompt" placeholder="Prompt used for hourly health checks"></textarea>
+            <input id="healthcheck-interval" type="number" min="5" step="5" placeholder="巡检间隔，单位分钟" />
+            <input id="public-history-hours" type="number" min="1" step="1" placeholder="公开页保留时长，单位小时" />
+            <textarea id="healthcheck-prompt" placeholder="用于健康巡检的提示词"></textarea>
             <div class="inline-actions">
-              <button id="settings-save" type="button">Save settings</button>
-              <button class="secondary-btn" id="refresh-now" type="button">Reload dashboard</button>
+              <button id="settings-save" type="button">保存设置</button>
+              <button class="secondary-btn" id="refresh-now" type="button">重新加载面板</button>
             </div>
           </div>
           <p class="status-text" id="settings-status"></p>
@@ -128,14 +168,15 @@
 
     <div class="login-overlay" id="login-overlay">
       <div class="login-card">
-        <h2>Admin login</h2>
-        <p class="status-text">Enter the PASSWORD environment variable to continue.</p>
-        <label for="admin-password">Password</label>
+        <span class="section-tag">管理员登录</span>
+        <h2>进入后台</h2>
+        <p class="status-text">请输入环境变量 PASSWORD 的值。</p>
+        <label for="admin-password">后台密码</label>
         <input type="password" id="admin-password" autocomplete="current-password" />
-        <button id="login-btn">Unlock dashboard</button>
+        <button id="login-btn">解锁控制台</button>
         <p class="status-text" id="login-status"></p>
       </div>
     </div>
-    <script src="/static/admin.js" defer></script>
+    <script src="/static/admin.js" charset="utf-8" defer></script>
   </body>
 </html>

static/admin.js

@@ -18,47 +18,76 @@ const state = {
   panel: "overview",
 };
 
-const showPanel = (name) => {
+const STATUS_LABELS = {
+  healthy: "正常",
+  degraded: "波动",
+  down: "异常",
+  unknown: "未巡检",
+};
+
+const dateTimeFormatter = new Intl.DateTimeFormat("zh-CN", {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+});
+
+function formatDateTime(value) {
+  if (!value) return "--";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "--";
+  return dateTimeFormatter.format(date);
+}
+
+function showPanel(name) {
   panels.forEach((panel) => panel.classList.toggle("hidden", panel.getAttribute(PANEL_ATTR) !== name));
   sidebarButtons.forEach((button) => button.classList.toggle("active", button.dataset.panel === name));
   state.panel = name;
-};
+}
 
 sidebarButtons.forEach((button) => button.addEventListener("click", () => showPanel(button.dataset.panel)));
 
-const apiRequest = async (endpoint, opts = {}) => {
-  const headers = { "Content-Type": "application/json" };
+async function apiRequest(endpoint, opts = {}) {
+  const headers = { "Content-Type": "application/json", Accept: "application/json" };
   if (state.token) headers.Authorization = `Bearer ${state.token}`;
   const response = await fetch(`/admin/api/${endpoint}`, { ...opts, headers: { ...headers, ...(opts.headers || {}) } });
   if (!response.ok) {
     const payload = await response.json().catch(() => ({}));
-    throw new Error(payload.message || payload.detail || payload.error?.message || "Request failed");
+    throw new Error(payload.message || payload.detail || payload.error?.message || "请求失败");
   }
   return response.json();
-};
+}
 
-const metricCard = ({ label, value }) => {
+function metricCard(label, value, detail = "") {
   const div = document.createElement("div");
   div.className = "metric-card";
-  div.innerHTML = `<h3>${label}</h3><strong>${value}</strong>`;
+  div.innerHTML = `<h3>${label}</h3><strong>${value}</strong><p>${detail}</p>`;
   return div;
-};
+}
 
-const pill = (status) => `<span class="pill">${status || "unknown"}</span>`;
+function pill(status) {
+  const normalized = status || "unknown";
+  return `<span class="pill ${normalized}">${STATUS_LABELS[normalized] || normalized}</span>`;
+}
 
 async function renderOverview() {
   const payload = await apiRequest("overview");
+  const totals = payload.totals || {};
   overviewMetrics.innerHTML = "";
-  (payload.metrics || []).forEach((metric) => overviewMetrics.appendChild(metricCard(metric)));
+  overviewMetrics.appendChild(metricCard("启用模型", totals.enabled_models ?? "--", `总数 ${totals.total_models ?? "--"}`));
+  overviewMetrics.appendChild(metricCard("启用 Key", totals.enabled_keys ?? "--", `总数 ${totals.total_keys ?? "--"}`));
+  overviewMetrics.appendChild(metricCard("代理请求", totals.total_requests ?? "--", `成功 ${totals.total_success ?? 0}`));
+  overviewMetrics.appendChild(metricCard("失败次数", totals.total_failures ?? "--", "累计转发失败或上游返回错误"));
 
   recentChecks.innerHTML = "";
   (payload.recent_checks || []).forEach((check) => {
     const row = document.createElement("tr");
     row.innerHTML = `
-      <td>${new Date(check.time).toLocaleString()}</td>
+      <td>${formatDateTime(check.time)}</td>
       <td>${check.model}</td>
       <td>${pill(check.status)}</td>
-      <td>${check.latency ? `${check.latency} ms` : "-"}</td>
+      <td>${check.latency ? `${check.latency} ms` : "--"}</td>
     `;
     recentChecks.appendChild(row);
   });
@@ -70,20 +99,21 @@ async function renderModels() {
   modelCount.textContent = items.length;
   modelHealthy.textContent = items.filter((item) => item.status === "healthy").length;
   modelTable.innerHTML = "";
+
   items.forEach((item) => {
     const row = document.createElement("tr");
     row.innerHTML = `
       <td>
         <strong>${item.display_name || item.model_id}</strong><br />
-        <span class="status-text">${item.model_id}</span>
+        <span class="status-text mono">${item.model_id}</span>
       </td>
       <td>${pill(item.status)}</td>
       <td>${item.request_count}</td>
       <td>${item.healthcheck_success_count}/${item.healthcheck_count}</td>
       <td>
         <div class="inline-actions">
-          <button class="secondary-btn" data-action="test-model" data-id="${item.model_id}">Test</button>
-          <button class="secondary-btn" data-action="remove-model" data-id="${item.model_id}">Remove</button>
+          <button class="secondary-btn" data-action="test-model" data-id="${item.model_id}">测试</button>
+          <button class="secondary-btn danger-btn" data-action="remove-model" data-id="${item.model_id}">删除</button>
         </div>
       </td>
     `;
@@ -95,18 +125,19 @@ async function renderKeys() {
   const payload = await apiRequest("keys");
   const items = payload.items || [];
   keyTable.innerHTML = "";
+
   items.forEach((item) => {
     const row = document.createElement("tr");
     row.innerHTML = `
       <td>${item.label}</td>
-      <td>${item.masked_key}</td>
+      <td class="mono">${item.masked_key}</td>
       <td>${item.request_count}</td>
-      <td>${item.last_tested ? new Date(item.last_tested).toLocaleString() : "-"}</td>
+      <td>${formatDateTime(item.last_tested)}</td>
       <td>${pill(item.status)}</td>
       <td>
         <div class="inline-actions">
-          <button class="secondary-btn" data-action="test-key" data-id="${item.name}">Test</button>
-          <button class="secondary-btn" data-action="remove-key" data-id="${item.name}">Delete</button>
+          <button class="secondary-btn" data-action="test-key" data-id="${item.name}">测试</button>
+          <button class="secondary-btn danger-btn" data-action="remove-key" data-id="${item.name}">删除</button>
         </div>
       </td>
     `;
@@ -116,20 +147,33 @@ async function renderKeys() {
 
 async function renderHealth() {
   const payload = await apiRequest("healthchecks");
+  const items = payload.items || [];
   healthGrid.innerHTML = "";
-  (payload.items || []).slice(0, 12).forEach((item) => {
-    const card = document.createElement("div");
-    card.className = "glass-panel";
+
+  if (items.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "empty-card";
+    empty.textContent = "暂无巡检记录，执行一次巡检后这里会显示最新结果。";
+    healthGrid.appendChild(empty);
+    return;
+  }
+
+  items.slice(0, 12).forEach((item) => {
+    const card = document.createElement("article");
+    card.className = "health-record";
     card.innerHTML = `
       <div class="toolbar-row">
-        <h4>${item.model}</h4>
+        <div>
+          <h4>${item.model}</h4>
+          <span class="status-text mono">${item.model_id}</span>
+        </div>
         ${pill(item.status)}
       </div>
-      <p class="status-text">${item.detail || "No detail"}</p>
-      <div class="health-meta">
-        <span>${item.api_key || "No key recorded"}</span>
-        <span>${item.latency ? `${item.latency} ms` : "-"}</span>
-        <span>${item.checked_at ? new Date(item.checked_at).toLocaleString() : "-"}</span>
+      <p class="status-text">${item.detail || "暂无详情"}</p>
+      <div class="record-meta">
+        <span>Key: ${item.api_key || "未记录"}</span>
+        <span>时延: ${item.latency ? `${item.latency} ms` : "--"}</span>
+        <span>时间: ${formatDateTime(item.checked_at)}</span>
       </div>
     `;
     healthGrid.appendChild(card);
@@ -141,7 +185,7 @@ async function renderSettings() {
   document.getElementById("healthcheck-enabled").checked = Boolean(payload.healthcheck_enabled);
   document.getElementById("healthcheck-interval").value = payload.healthcheck_interval_minutes || 60;
   document.getElementById("public-history-hours").value = payload.public_history_hours || 48;
-  document.getElementById("healthcheck-prompt").value = payload.healthcheck_prompt || "Reply with the single word OK.";
+  document.getElementById("healthcheck-prompt").value = payload.healthcheck_prompt || "请只回复 OK。";
 }
 
 async function loadAll() {
@@ -150,7 +194,7 @@ async function loadAll() {
 
 async function testModel(modelId) {
   const payload = await apiRequest(`models/${encodeURIComponent(modelId)}/test`, { method: "POST", body: JSON.stringify({}) });
-  alert(`${payload.display_name || payload.model} -> ${payload.status}`);
+  alert(`${payload.display_name || payload.model} 当前状态：${STATUS_LABELS[payload.status] || payload.status}`);
   await loadAll();
 }
 
@@ -161,7 +205,7 @@ async function removeModel(modelId) {
 
 async function testKey(keyName) {
   const payload = await apiRequest("keys/test", { method: "POST", body: JSON.stringify({ value: keyName }) });
-  alert(`${payload.api_key} -> ${payload.status}`);
+  alert(`Key ${payload.api_key} 当前状态：${STATUS_LABELS[payload.status] || payload.status}`);
   await loadAll();
 }
 
@@ -189,10 +233,13 @@ document.getElementById("model-add")?.addEventListener("click", async () => {
   const displayName = document.getElementById("model-display-name").value.trim();
   const description = document.getElementById("model-description").value.trim();
   if (!modelId) {
-    alert("Model ID is required.");
+    alert("请先填写模型 ID。");
     return;
   }
-  await apiRequest("models", { method: "POST", body: JSON.stringify({ model_id: modelId, display_name: displayName || modelId, description }) });
+  await apiRequest("models", {
+    method: "POST",
+    body: JSON.stringify({ model_id: modelId, display_name: displayName || modelId, description }),
+  });
   document.getElementById("model-id").value = "";
   document.getElementById("model-display-name").value = "";
   document.getElementById("model-description").value = "";
@@ -203,7 +250,7 @@ document.getElementById("key-add")?.addEventListener("click", async () => {
   const name = document.getElementById("key-label").value.trim();
   const apiKey = document.getElementById("key-value").value.trim();
   if (!name || !apiKey) {
-    alert("Label and key are required.");
+    alert("请填�� Key 名称和内容。");
     return;
   }
   await apiRequest("keys", { method: "POST", body: JSON.stringify({ name, api_key: apiKey }) });
@@ -226,7 +273,7 @@ document.getElementById("settings-save")?.addEventListener("click", async () =>
       healthcheck_prompt: document.getElementById("healthcheck-prompt").value.trim(),
     };
     await apiRequest("settings", { method: "PUT", body: JSON.stringify(payload) });
-    settingsStatus.textContent = "Settings saved.";
+    settingsStatus.textContent = "设置已保存。";
     await loadAll();
   } catch (error) {
     settingsStatus.textContent = error.message;
@@ -238,18 +285,18 @@ document.getElementById("refresh-now")?.addEventListener("click", loadAll);
 loginBtn.addEventListener("click", async () => {
   const password = document.getElementById("admin-password").value.trim();
   if (!password) {
-    loginStatus.textContent = "Enter a password to continue.";
+    loginStatus.textContent = "请输入后台密码。";
     return;
   }
   try {
-    loginStatus.textContent = "Authenticating...";
+    loginStatus.textContent = "正在验证身份...";
     const response = await fetch("/admin/api/login", {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { "Content-Type": "application/json", Accept: "application/json" },
       body: JSON.stringify({ password }),
     });
     const payload = await response.json().catch(() => ({}));
-    if (!response.ok) throw new Error(payload.detail || payload.message || "Invalid password");
+    if (!response.ok) throw new Error(payload.detail || payload.message || "登录失败");
     state.token = payload.access_token || payload.token;
     sessionStorage.setItem("nim_token", state.token);
     loginOverlay.classList.add("hidden");
@@ -266,8 +313,9 @@ window.addEventListener("DOMContentLoaded", async () => {
   try {
     await loadAll();
     setInterval(loadAll, 90 * 1000);
-  } catch (error) {
+  } catch (_error) {
     sessionStorage.removeItem("nim_token");
     loginOverlay.classList.remove("hidden");
   }
 });
+

static/index.html

@@ -1,42 +1,64 @@
-<!DOCTYPE html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Model Health �� NVIDIA NIM</title>
+    <title>NVIDIA NIM 模型健康看板</title>
     <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=Space+Grotesk:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Noto+Sans+SC:wght@400;500;700;800&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/static/style.css" />
   </head>
-  <body>
-    <main class="app-shell">
-      <section class="glass-panel">
-        <div class="hero">
+  <body class="public-body">
+    <div class="ambient ambient-left"></div>
+    <div class="ambient ambient-right"></div>
+    <main class="public-shell">
+      <section class="hero-panel">
+        <div class="hero-copy">
+          <span class="hero-badge">NVIDIA NIM 网关</span>
+          <h1>模型健康度看板</h1>
+          <p>
+            公开页面只展示健康状态。系统按小时定时调用 NVIDIA NIM，
+            记录模型能否正常响应、最近一次时延，以及过去几个小时的稳定性走势。
+          </p>
+        </div>
+        <div class="hero-side">
+          <div class="hero-kicker">监控视图</div>
+          <div class="hero-value">小时级可用性</div>
+          <p>由后台巡检任务驱动，支持管理员扩展模型列表和更换巡检 Key。</p>
+        </div>
+      </section>
+
+      <section class="summary-panel">
+        <div class="section-heading">
           <div>
-            <p class="chip chip--healthy">Live metrics</p>
-            <h1>Model health, hour by hour</h1>
-            <p>
-              Each hour block shows whether the model responded with a healthy,
-              intermittent, or degraded signal. We poll NVIDIA NIM to keep the
-              grid in sync.
-            </p>
+            <span class="section-tag">公开状态页</span>
+            <h2>最近 12 次巡检趋势</h2>
+          </div>
+          <div class="refresh-meta">
+            <span>最近刷新</span>
+            <strong id="last-updated">--</strong>
           </div>
-          <div class="chip-list" id="summary-chips"></div>
         </div>
+        <div class="summary-strip" id="summary-chips"></div>
       </section>
-      <section class="glass-panel">
-        <div class="status-line">
-          <strong>Heat map</strong>
-          <span id="last-updated">��</span>
+
+      <section class="board-panel">
+        <div class="board-head">
+          <div>
+            <span class="section-tag">模型矩阵</span>
+            <h2>健康状态总览</h2>
+          </div>
+          <p class="board-note">绿色表示正常，橙色表示波动，红色表示异常，灰色表示尚未巡检。</p>
         </div>
-        <div class="hour-grid" id="model-grid"></div>
-        <p class="status-text" id="error-text"></p>
+        <div class="model-grid" id="model-grid"></div>
+        <p class="status-text error-text" id="error-text"></p>
       </section>
     </main>
-    <script src="/static/public.js" defer></script>
+    <script src="/static/public.js" charset="utf-8" defer></script>
   </body>
 </html>

static/public.js

@@ -1,75 +1,117 @@
-const summaryChips = document.getElementById("summary-chips");
+const summaryChips = document.getElementById("summary-chips");
 const modelGrid = document.getElementById("model-grid");
 const lastUpdated = document.getElementById("last-updated");
 const errorText = document.getElementById("error-text");
 
-const statusStyles = {
+const STATUS_LABELS = {
+  healthy: "正常",
+  degraded: "波动",
+  down: "异常",
+  unknown: "未巡检",
+};
+
+const STATUS_CLASS = {
   healthy: "ok",
   degraded: "warn",
   down: "down",
-  unknown: "warn",
+  unknown: "idle",
 };
 
+const dateTimeFormatter = new Intl.DateTimeFormat("zh-CN", {
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+});
+
+function formatDateTime(value) {
+  if (!value) return "--";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "--";
+  return dateTimeFormatter.format(date);
+}
+
 function formatHourSegment(segment) {
   const span = document.createElement("span");
-  span.textContent = new Date(segment.time).getHours();
-  span.classList.add(statusStyles[segment.status] || "warn");
-  span.title = `${segment.status} �� ${new Date(segment.time).toLocaleTimeString()} `;
+  const date = new Date(segment.time || segment.hour);
+  span.textContent = Number.isNaN(date.getTime()) ? "--" : String(date.getHours()).padStart(2, "0");
+  span.className = `timeline-item ${STATUS_CLASS[segment.status] || "idle"}`;
+  span.title = `${STATUS_LABELS[segment.status] || "未巡检"} ${formatDateTime(segment.time || segment.hour)}`;
   return span;
 }
 
+function createSummaryChip(label, value, tone = "default") {
+  const chip = document.createElement("div");
+  chip.className = `summary-chip ${tone}`;
+  chip.innerHTML = `<span>${label}</span><strong>${value}</strong>`;
+  return chip;
+}
+
+function renderSummary(models) {
+  summaryChips.innerHTML = "";
+  const total = models.length;
+  const healthy = models.filter((item) => item.status === "healthy").length;
+  const issues = models.filter((item) => item.status === "down").length;
+  const latest = models.reduce((max, item) => {
+    if (!item.last_healthcheck_at) return max;
+    return !max || new Date(item.last_healthcheck_at) > new Date(max) ? item.last_healthcheck_at : max;
+  }, null);
+
+  summaryChips.appendChild(createSummaryChip("监控模型", total));
+  summaryChips.appendChild(createSummaryChip("健康模型", healthy, "good"));
+  summaryChips.appendChild(createSummaryChip("异常模型", issues, issues > 0 ? "danger" : "default"));
+  summaryChips.appendChild(createSummaryChip("最近探测", latest ? formatDateTime(latest) : "暂无数据"));
+}
+
 function renderModel(model) {
   const card = document.createElement("article");
   card.className = "model-card";
+  const status = model.status || "unknown";
+  const points = (model.hourly || []).slice(-12);
+  const successRate = typeof model.success_rate === "number" ? `${model.success_rate.toFixed(1)}%` : model.beat || "--";
 
   card.innerHTML = `
-    <div class="health-meta">
-      <span class="pill">${model.status || "unknown"}</span>
-      <span>Beat: ${model.beat || "��"}</span>
+    <div class="card-top">
+      <div>
+        <div class="card-title">${model.display_name || model.name || model.model_id}</div>
+        <div class="model-subtitle">${model.model_id || "--"}</div>
+      </div>
+      <span class="status-chip ${status}">${STATUS_LABELS[status] || "未巡检"}</span>
+    </div>
+    <div class="metric-row">
+      <div class="metric-pill">
+        <span>成功率</span>
+        <strong>${successRate}</strong>
+      </div>
+      <div class="metric-pill">
+        <span>最近探测</span>
+        <strong>${formatDateTime(model.last_healthcheck_at)}</strong>
+      </div>
     </div>
-    <h2>${model.name}</h2>
-    <small>${model.endpoint || "NIM chat"}</small>
-  `.trim();
+  `;
 
   const timeline = document.createElement("div");
   timeline.className = "timeline";
 
-  (model.hourly || [])
-    .slice(-12)
-    .forEach((segment) => timeline.appendChild(formatHourSegment(segment)));
+  if (points.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "empty-state";
+    empty.textContent = "暂无巡检记录";
+    timeline.appendChild(empty);
+  } else {
+    points.forEach((segment) => timeline.appendChild(formatHourSegment(segment)));
+  }
 
   card.appendChild(timeline);
   return card;
 }
 
-function renderSummary(models) {
-  summaryChips.innerHTML = "";
-  const total = models.length;
-  const healthy = models.filter((m) => m.status === "healthy").length;
-  const open = models.filter((m) => m.status === "down").length;
-
-  [
-    { label: `Monitored models`, value: total },
-    { label: `Healthy`, value: healthy },
-    { label: `Issues`, value: open },
-  ].forEach((metric) => {
-    const chip = document.createElement("span");
-    chip.className = "chip";
-    chip.textContent = `${metric.label}: ${metric.value}`;
-    if (metric.label === "Issues" && metric.value > 0) {
-      chip.style.borderColor = "#ff5f6d";
-      chip.style.color = "#ffb3a6";
-    }
-    summaryChips.appendChild(chip);
-  });
-}
-
 async function loadHealth() {
   try {
     errorText.textContent = "";
-    const response = await fetch("/api/health/public");
+    const response = await fetch("/api/health/public", { headers: { Accept: "application/json" } });
     if (!response.ok) {
-      throw new Error("Health endpoint unavailable");
+      throw new Error("健康接口暂时不可用");
     }
     const payload = await response.json();
     const models = payload.models || [];
@@ -78,12 +120,10 @@ async function loadHealth() {
     modelGrid.innerHTML = "";
     models.forEach((model) => modelGrid.appendChild(renderModel(model)));
 
-    lastUpdated.textContent = payload.last_updated
-      ? new Date(payload.last_updated).toLocaleString()
-      : new Date().toLocaleString();
-  } catch (err) {
-    errorText.textContent = "Unable to reach NVIDIA NIM. Please check your keys.";
-    lastUpdated.textContent = "��";
+    lastUpdated.textContent = payload.last_updated ? formatDateTime(payload.last_updated) : formatDateTime(new Date().toISOString());
+  } catch (_error) {
+    errorText.textContent = "当前无法获取 NVIDIA NIM 的巡检结果，请检查后台配置或稍后再试。";
+    lastUpdated.textContent = "--";
   }
 }
 

static/style.css

@@ -1,12 +1,22 @@
-:root {
-  --base-bg: #030711;
-  --panel-bg: rgba(7, 18, 34, 0.87);
-  --accent: #00f18d;
-  --accent-strong: #32ffd3;
-  --muted: #8ca3c5;
-  --border: rgba(255, 255, 255, 0.12);
-  --glow: 0 10px 40px rgba(0, 241, 141, 0.25);
-  --font-sans: "Space Grotesk", "Titillium Web", "Segoe UI", sans-serif;
+:root {
+  --bg: #050816;
+  --bg-deep: #02040b;
+  --panel: rgba(9, 15, 29, 0.82);
+  --panel-strong: rgba(12, 20, 38, 0.94);
+  --panel-soft: rgba(255, 255, 255, 0.04);
+  --text: #f4f7ff;
+  --muted: #94a7c7;
+  --muted-strong: #b4c6e4;
+  --line: rgba(255, 255, 255, 0.1);
+  --line-strong: rgba(255, 255, 255, 0.16);
+  --green: #35f0a1;
+  --green-strong: #6bffd0;
+  --orange: #ffb44f;
+  --red: #ff6e83;
+  --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
+  --glow: 0 0 0 1px rgba(107, 255, 208, 0.16), 0 22px 54px rgba(30, 255, 179, 0.12);
+  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-display: "Space Grotesk", "Noto Sans SC", sans-serif;
   color-scheme: dark;
 }
 
@@ -14,433 +24,599 @@
   box-sizing: border-box;
 }
 
+html,
+body {
+  min-height: 100%;
+}
+
 body {
   margin: 0;
+  background:
+    radial-gradient(circle at 8% 12%, rgba(53, 240, 161, 0.16), transparent 28%),
+    radial-gradient(circle at 88% 18%, rgba(67, 138, 255, 0.18), transparent 26%),
+    linear-gradient(180deg, #08101d 0%, var(--bg) 38%, var(--bg-deep) 100%);
+  color: var(--text);
   font-family: var(--font-sans);
-  background: radial-gradient(circle at top right, rgba(0, 241, 141, 0.18), transparent 40%),
-    linear-gradient(180deg, #050a15 0%, #020408 50%, #030711 100%);
-  color: #f1f6ff;
-  min-height: 100vh;
+  overflow-x: hidden;
 }
 
-.app-shell {
-  padding: 2rem;
-  max-width: 1200px;
-  margin: 0 auto;
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 34px 34px;
+  opacity: 0.12;
+  pointer-events: none;
+}
+
+.ambient {
+  position: fixed;
+  width: 32rem;
+  height: 32rem;
+  border-radius: 999px;
+  filter: blur(90px);
+  opacity: 0.38;
+  pointer-events: none;
+}
+
+.ambient-left {
+  top: -10rem;
+  left: -8rem;
+  background: rgba(53, 240, 161, 0.28);
+}
+
+.ambient-right {
+  top: 8rem;
+  right: -10rem;
+  background: rgba(91, 113, 255, 0.22);
+}
+
+.public-shell,
+.admin-shell {
+  position: relative;
+  z-index: 1;
 }
 
+.public-shell {
+  width: min(1280px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 32px 0 54px;
+}
+
+.hero-panel,
+.summary-panel,
+.board-panel,
+.glass-panel,
+.metric-card,
+.health-record,
+.empty-card {
+  position: relative;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(15, 25, 48, 0.82), rgba(7, 12, 24, 0.9));
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+}
+
+.hero-panel,
+.summary-panel,
+.board-panel,
 .glass-panel {
-  background: var(--panel-bg);
-  border: 1px solid var(--border);
-  padding: 1.5rem;
-  border-radius: 18px;
-  box-shadow: var(--glow);
-  backdrop-filter: blur(16px);
-  margin-bottom: 1.75rem;
+  overflow: hidden;
 }
 
-.hero {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
+.hero-panel::after,
+.summary-panel::after,
+.board-panel::after,
+.glass-panel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(107, 255, 208, 0.08), transparent 34%, transparent 66%, rgba(123, 157, 255, 0.08));
+  pointer-events: none;
+}
+
+.hero-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
+  gap: 24px;
+  padding: 34px;
+}
+
+.hero-copy h1,
+.hero-side .hero-value,
+.section-heading h2,
+.board-head h2,
+.panel-headline h2,
+.login-card h2,
+.brand-block h1 {
+  font-family: var(--font-display);
+}
+
+.hero-badge,
+.section-tag {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(107, 255, 208, 0.28);
+  background: rgba(53, 240, 161, 0.1);
+  color: var(--green-strong);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
 }
 
-.hero h1 {
-  font-size: clamp(2rem, 1.8vw + 2rem, 3rem);
-  margin: 0;
-  line-height: 1.2;
+.hero-copy h1,
+.board-head h2,
+.panel-headline h2,
+.section-heading h2,
+.login-card h2,
+.brand-block h1 {
+  margin: 16px 0 12px;
+  font-size: clamp(34px, 3vw, 52px);
+  line-height: 1.08;
 }
 
-.hero p {
+.hero-copy p,
+.hero-side p,
+.board-note,
+.status-text,
+.metric-card p,
+.brand-block p {
   color: var(--muted);
-  max-width: 540px;
-  margin: 0.5rem 0 0;
-  font-size: 1rem;
+  line-height: 1.7;
+}
+
+.hero-side {
+  padding: 24px;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--line-strong);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.hero-kicker {
+  color: var(--muted-strong);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-size: 12px;
 }
 
-.chip-list {
+.hero-value {
+  margin-top: 14px;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.summary-panel,
+.board-panel {
+  padding: 28px 30px;
+  margin-top: 22px;
+}
+
+.section-heading,
+.board-head,
+.panel-headline,
+.toolbar-row {
   display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 18px;
   flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 1rem;
 }
 
-.chip {
-  padding: 0.3rem 0.9rem;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  font-size: 0.9rem;
-  color: #b1c2dd;
+.section-heading h2,
+.board-head h2,
+.panel-headline h2,
+.panel-headline h3 {
+  margin-bottom: 0;
+  font-size: clamp(24px, 2vw, 34px);
 }
 
-.chip--healthy {
-  border-color: rgba(0, 241, 141, 0.5);
-  color: var(--accent-strong);
+.refresh-meta {
+  min-width: 220px;
+  padding: 16px 18px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--line);
 }
 
-.hour-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 1rem;
+.refresh-meta span {
+  display: block;
+  color: var(--muted);
+  font-size: 13px;
+  margin-bottom: 8px;
 }
 
-.model-card {
-  padding: 1.25rem;
-  border-radius: 16px;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.04));
-  border: 1px solid transparent;
-  transition: border 0.3s ease, transform 0.3s ease;
+.refresh-meta strong {
+  font-family: var(--font-display);
+  font-size: 20px;
 }
 
-.model-card:hover {
-  transform: translateY(-6px);
-  border-color: rgba(0, 241, 141, 0.6);
+.summary-strip {
+  margin-top: 22px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 14px;
 }
 
-.model-card h2 {
-  margin: 0;
-  font-size: 1.25rem;
+.summary-chip,
+.metric-card {
+  padding: 18px 20px;
+  border-radius: 22px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.model-card small {
+.summary-chip span,
+.metric-card h3 {
+  display: block;
   color: var(--muted);
+  font-size: 13px;
+  margin-bottom: 10px;
 }
 
-.timeline {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  margin-top: 0.9rem;
-  flex-wrap: wrap;
+.summary-chip strong,
+.metric-card strong {
+  font-family: var(--font-display);
+  font-size: 28px;
+  line-height: 1.2;
 }
 
-.timeline span {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.7rem;
-  font-weight: 600;
+.summary-chip.good {
+  box-shadow: var(--glow);
 }
 
-.timeline span.ok {
-  background: linear-gradient(120deg, #00d97a, #00f18d);
-  box-shadow: 0 6px 12px rgba(0, 241, 141, 0.4);
+.summary-chip.danger {
+  border-color: rgba(255, 110, 131, 0.32);
+  background: linear-gradient(180deg, rgba(255, 110, 131, 0.16), rgba(255, 255, 255, 0.03));
 }
 
-.timeline span.warn {
-  background: linear-gradient(120deg, #ff9a56, #ffa63a);
+.board-head {
+  margin-bottom: 18px;
 }
 
-.timeline span.down {
-  background: linear-gradient(120deg, #ff5f6d, #ffc371);
+.model-grid,
+.section-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 18px;
 }
 
-.status-line {
-  margin-top: 1rem;
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.9rem;
-  color: var(--muted);
-  align-items: center;
+.model-card {
+  padding: 22px;
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
 }
 
-.status-line strong {
-  color: #fff;
+.model-card:hover,
+.health-record:hover {
+  transform: translateY(-3px);
+  border-color: rgba(107, 255, 208, 0.28);
+  box-shadow: var(--glow);
 }
 
-.health-meta {
+.card-top,
+.metric-row,
+.record-meta,
+.health-meta,
+.inline-actions {
   display: flex;
-  gap: 0.75rem;
+  gap: 10px;
   flex-wrap: wrap;
-  align-items: center;
-  margin-top: 0.5rem;
-  color: var(--muted);
 }
 
-.pulse {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--accent);
-  animation: pulse 1.6s infinite;
+.card-top {
+  justify-content: space-between;
+  align-items: flex-start;
 }
 
-@keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(0, 241, 141, 0.6);
-  }
-  70% {
-    box-shadow: 0 0 0 12px rgba(0, 241, 141, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(0, 241, 141, 0);
-  }
+.card-title {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.3;
 }
 
-button {
-  font-family: var(--font-sans);
-  border: none;
-  cursor: pointer;
+.model-subtitle,
+.mono {
+  font-family: var(--font-display);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.status-chip,
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  min-height: 34px;
   border-radius: 999px;
-  padding: 0.65rem 1.2rem;
-  background: linear-gradient(120deg, #16a085, #00f18d);
-  color: #020408;
-  font-weight: 600;
-  transition: transform 0.2s ease;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  border: 1px solid transparent;
 }
 
-button:hover {
-  transform: translateY(-2px);
+.status-chip.healthy,
+.pill.healthy,
+.pill.good {
+  color: var(--green-strong);
+  background: rgba(53, 240, 161, 0.12);
+  border-color: rgba(107, 255, 208, 0.28);
 }
 
-.admin-shell {
-  display: grid;
-  grid-template-columns: 260px 1fr;
-  min-height: 100vh;
+.status-chip.down,
+.pill.down,
+.danger-btn {
+  color: #ffb5c0;
+  background: rgba(255, 110, 131, 0.12);
+  border-color: rgba(255, 110, 131, 0.28);
 }
 
-.admin-sidebar {
-  background: rgba(3, 7, 17, 0.9);
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 2rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+.status-chip.degraded,
+.status-chip.warn,
+.pill.degraded,
+.pill.warn {
+  color: #ffd18d;
+  background: rgba(255, 180, 79, 0.12);
+  border-color: rgba(255, 180, 79, 0.28);
 }
 
-.admin-sidebar h3 {
-  margin: 0 0 1rem;
-  font-size: 1rem;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  color: var(--muted);
+.status-chip.unknown,
+.pill.unknown,
+.pill.idle {
+  color: #c7d4ea;
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.1);
 }
 
-.admin-sidebar button {
-  width: 100%;
-  justify-content: flex-start;
-  background: transparent;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: #fff;
-  padding-left: 0.9rem;
-  text-align: left;
-  letter-spacing: 0.05em;
+.metric-row {
+  margin-top: 18px;
 }
 
-.admin-sidebar button.active {
-  border-color: var(--accent);
-  color: var(--accent);
-  box-shadow: var(--glow);
+.metric-pill {
+  flex: 1 1 140px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.06);
 }
 
-.admin-content {
-  padding: 2rem;
-  background: linear-gradient(180deg, rgba(4, 6, 15, 0.9), rgba(2, 3, 6, 0.95));
+.metric-pill span {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  margin-bottom: 8px;
 }
 
-.login-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(2, 3, 6, 0.8);
+.metric-pill strong {
+  font-family: var(--font-display);
+  font-size: 17px;
+}
+
+.timeline {
   display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 18px;
+}
+
+.timeline-item {
+  width: 40px;
+  height: 40px;
+  border-radius: 14px;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  z-index: 10;
+  font-family: var(--font-display);
+  font-size: 13px;
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.login-card {
-  width: min(400px, 90vw);
-  padding: 2rem;
-  background: var(--panel-bg);
-  border-radius: 22px;
-  border: 1px solid var(--border);
-  box-shadow: var(--glow);
+.timeline-item.ok {
+  background: linear-gradient(135deg, rgba(53, 240, 161, 0.92), rgba(107, 255, 208, 0.92));
+  color: #04110d;
+  border-color: transparent;
 }
 
-.login-card h2 {
-  margin-top: 0;
-  letter-spacing: 0.08em;
+.timeline-item.warn {
+  background: linear-gradient(135deg, rgba(255, 180, 79, 0.9), rgba(255, 218, 131, 0.85));
+  color: #1b1203;
+  border-color: transparent;
 }
 
-.login-card label {
-  display: block;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  margin-bottom: 0.25rem;
+.timeline-item.down {
+  background: linear-gradient(135deg, rgba(255, 110, 131, 0.95), rgba(255, 171, 128, 0.84));
+  color: #19080d;
+  border-color: transparent;
+}
+
+.timeline-item.idle {
   color: var(--muted);
-  letter-spacing: 0.2em;
 }
 
-.login-card input {
+.empty-state,
+.empty-card {
   width: 100%;
-  padding: 0.9rem;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: rgba(255, 255, 255, 0.03);
-  color: #fff;
-  margin-bottom: 1rem;
-  font-size: 1rem;
+  padding: 18px;
+  border-radius: 18px;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px dashed rgba(255, 255, 255, 0.12);
 }
 
-.section-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.25rem;
+.error-text {
+  margin-top: 18px;
+  color: #ffb2bf;
 }
 
-.metric-card {
-  background: rgba(255, 255, 255, 0.03);
+button,
+.secondary-btn {
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
+}
+
+button:hover,
+.secondary-btn:hover {
+  transform: translateY(-1px);
+}
+
+button {
+  padding: 12px 18px;
   border-radius: 16px;
-  padding: 1rem;
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: linear-gradient(135deg, #2be89a, #64ffd6);
+  color: #03110d;
+  font-weight: 800;
+  box-shadow: 0 14px 30px rgba(53, 240, 161, 0.18);
 }
 
-.metric-card h3 {
-  margin: 0;
-  font-size: 1.1rem;
+.secondary-btn {
+  padding: 10px 14px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  color: var(--text);
 }
 
-.metric-card strong {
-  font-size: 2rem;
-  display: block;
-  margin-top: 0.5rem;
+.admin-shell {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  min-height: 100vh;
 }
 
-.table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
+.admin-sidebar {
+  padding: 28px 22px;
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(4, 8, 17, 0.88);
+  backdrop-filter: blur(16px);
 }
 
-.table thead th {
-  text-align: left;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  color: var(--muted);
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+.brand-block {
+  padding: 22px;
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  margin-bottom: 24px;
 }
 
-.table tbody tr {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+.brand-block h1 {
+  font-size: 32px;
 }
 
-.table td {
-  padding: 0.75rem 0;
+.admin-sidebar h3 {
+  margin: 0 0 12px;
+  color: var(--muted);
+  font-size: 13px;
+  letter-spacing: 0.18em;
 }
 
-.inline-actions {
-  display: flex;
-  gap: 0.5rem;
+.admin-sidebar .sidebar-btn {
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 14px 16px;
+  text-align: left;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: none;
 }
 
-.pill {
-  padding: 0.25rem 0.8rem;
-  border-radius: 999px;
-  border: 1px solid transparent;
-  font-size: 0.75rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  background: rgba(0, 241, 141, 0.1);
-  color: var(--accent);
+.admin-sidebar .sidebar-btn.active {
+  color: var(--green-strong);
+  background: rgba(53, 240, 161, 0.1);
+  border-color: rgba(107, 255, 208, 0.22);
+  box-shadow: var(--glow);
 }
 
-.form-inline {
-  display: flex;
-  gap: 0.6rem;
-  flex-wrap: wrap;
-  margin-top: 0.5rem;
+.admin-content {
+  padding: 30px;
 }
 
-.form-inline input {
-  flex: 1;
-  min-width: 120px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
-  padding: 0.75rem;
-  color: #fff;
+.glass-panel {
+  padding: 28px;
+  margin-bottom: 22px;
 }
 
-.status-text {
-  font-size: 0.85rem;
-  color: var(--muted);
+.sub-panel {
+  margin-top: 20px;
 }
 
-.secondary-btn {
-  border-radius: 12px;
-  padding: 0.55rem 1rem;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  color: #fff;
+.panel-headline.compact h3 {
+  margin-top: 8px;
 }
 
-.secondary-btn:hover {
-  border-color: var(--accent);
-  color: var(--accent);
+.table {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-@media (max-width: 768px) {
-  .admin-shell {
-    grid-template-columns: 1fr;
-  }
+.table thead th {
+  padding: 14px 12px;
+  text-align: left;
+  color: var(--muted);
+  font-size: 13px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
 
-  .admin-sidebar {
-    flex-direction: row;
-    overflow-x: auto;
-  }
-}
+.table tbody td {
+  padding: 16px 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  vertical-align: top;
+}
 
-.hidden { display: none !important; }
-
 .form-grid {
   display: grid;
-  gap: 0.75rem;
   grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
 }
 
 .compact-grid {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }
 
+.form-grid input,
 .form-grid textarea,
-.form-grid input {
+.login-card input {
   width: 100%;
-  min-width: 0;
-  background: rgba(255, 255, 255, 0.03);
+  padding: 14px 16px;
+  border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
-  padding: 0.85rem;
-  color: #fff;
+  background: rgba(255, 255, 255, 0.045);
+  color: var(--text);
   font: inherit;
+  outline: none;
 }
 
-.form-grid textarea {
-  min-height: 110px;
-  grid-column: 1 / -1;
-  resize: vertical;
+.form-grid input:focus,
+.form-grid textarea:focus,
+.login-card input:focus {
+  border-color: rgba(107, 255, 208, 0.32);
+  box-shadow: 0 0 0 4px rgba(53, 240, 161, 0.08);
 }
 
-.toolbar-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: center;
-  flex-wrap: wrap;
+.form-grid textarea {
+  min-height: 120px;
+  resize: vertical;
+  grid-column: 1 / -1;
 }
 
 .checkbox-row {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  color: #fff;
+  gap: 12px;
+  color: var(--text);
 }
 
 .checkbox-row input {
@@ -448,8 +624,99 @@ button:hover {
   height: 18px;
 }
 
-@media (max-width: 768px) {
+.spaced-top {
+  margin-top: 18px;
+}
+
+.health-record,
+.empty-card {
+  padding: 20px;
+  border-radius: 22px;
+}
+
+.health-record h4,
+.login-card h2 {
+  margin: 0;
+}
+
+.record-meta {
+  margin-top: 16px;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.login-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(3, 6, 14, 0.76);
+  backdrop-filter: blur(12px);
+  z-index: 20;
+}
+
+.login-card {
+  width: min(460px, calc(100vw - 32px));
+  padding: 30px;
+  border-radius: 28px;
+  background: linear-gradient(180deg, rgba(13, 22, 41, 0.96), rgba(8, 12, 24, 0.96));
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: var(--shadow);
+}
+
+.login-card label {
+  display: block;
+  margin: 16px 0 10px;
+  color: var(--muted-strong);
+  font-size: 13px;
+}
+
+.hidden {
+  display: none !important;
+}
+
+@media (max-width: 980px) {
+  .hero-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-sidebar {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+  }
+}
+
+@media (max-width: 720px) {
+  .public-shell {
+    width: min(100vw - 20px, 1280px);
+    padding-top: 20px;
+  }
+
+  .hero-panel,
+  .summary-panel,
+  .board-panel,
+  .glass-panel,
+  .admin-content {
+    padding: 20px;
+  }
+
   .form-grid {
     grid-template-columns: 1fr;
   }
+
+  .admin-sidebar {
+    padding: 18px;
+  }
+
+  .summary-strip,
+  .model-grid,
+  .section-grid {
+    grid-template-columns: 1fr;
+  }
 }