Upload 12 files

README.md

@@ -19,9 +19,9 @@ pinned: false
 - 支持 `previous_response_id` 对话续写
 - 对 `/v1/responses` 和 `/v1/responses/{response_id}` 使用用户自带的 NIM Key 做鉴权与上游转发
 - `/v1/models` 直接返回来自 NVIDIA 官方 `/v1/models` 的同步结果，保持 OpenAI 风格结构
-- 前端第一页展示总调用次数、平均健康度、每个模型 10 分钟成功率
-- 前端第二页展示官方模型目录，并按提供商分类展示
-- 页面采用横向双页切换，带平滑动画与现代卡片式设计
+- `/` 为白色主题的模型健康度页面，按 10 分钟成功率矩阵展示 MODEL_LIST 中的模型
+- `/models` 为独立的白色主题官方模型列表页面，支持按提供商筛选模型
+- 模型提供商卡片为固定高度，避免模型较多时卡片过长
 - 使用共享 HTTP 连接池、SQLite WAL 和异步线程化落库来增强高并发场景下的转发性能
 
 ## 用户如何调用
@@ -42,15 +42,22 @@ pinned: false
 同步后的模型目录同时用于：
 
 - `GET /v1/models`
-- 前端第二页“官方模型库”展示
+- `GET /models`
+- `GET /api/catalog`
 
-## 公开页面
+## 页面与接口
 
-- `GET /`：首页，双页展示
-- `GET /api/dashboard`：健康度与统计数据
-- `GET /api/catalog`：官方模型目录与提供商分类
+页面：
 
-## 兼容接口
+- `GET /`：模型健康度页面
+- `GET /models`：官方模型列表页面
+
+前端数据接口：
+
+- `GET /api/dashboard`
+- `GET /api/catalog`
+
+兼容接口：
 
 - `POST /v1/responses`
 - `GET /v1/responses/{response_id}`
@@ -59,9 +66,9 @@ pinned: false
 ## 环境变量
 
 - `NVIDIA_API_BASE`：默认 `https://integrate.api.nvidia.com/v1`
-- `MODEL_LIST`：首页监控模型列表，逗号分隔
+- `MODEL_LIST`：健康度页面监控模型列表，逗号分隔
 - `MODEL_SYNC_INTERVAL_MINUTES`：官方模型目录同步周期，默认 `30`
-- `PUBLIC_HISTORY_BUCKETS`：首页展示最近多少个 10 分钟时间片，默认 `6`
+- `PUBLIC_HISTORY_BUCKETS`：健康页展示最近多少个 10 分钟时间片，默认 `6`
 - `REQUEST_TIMEOUT_SECONDS`：上游请求超时，默认 `90`
 - `MAX_UPSTREAM_CONNECTIONS`：共享连接池最大连接数，默认 `512`
 - `MAX_KEEPALIVE_CONNECTIONS`：共享连接池最大 keep-alive 连接数，默认 `128`
@@ -72,10 +79,10 @@ pinned: false
 我已经完成两层本地联调：
 
 1. Mock 联调：
-   - 通过 [scripts/local_smoke_test.py](D:\Code\NIM2response\scripts\local_smoke_test.py) 验证了协议转换、官方模型同步、用户 Key 鉴权、`previous_response_id`、tool call 与前端数据接口。
+   - 通过 `scripts/local_smoke_test.py` 验证了协议转换、官方模型同步、用户 Key 鉴权、`previous_response_id`、tool call、健康页数据接口、模型页数据接口和两个独立页面路由。
 
 2. 真实上游联调：
-   - 通过 [scripts/live_e2e_validation.py](D:\Code\NIM2response\scripts\live_e2e_validation.py) 使用你提供的测试 NIM Key，真实调用了 NVIDIA 官方模型目录和实际模型响应。
+   - 通过 `scripts/live_e2e_validation.py` 使用提供的测试 NIM Key，真实调用了 NVIDIA 官方模型目录和实际模型响应。
    - 实测结果：`live_gateway_ok`，并成功通过 `z-ai/glm5` 得到 `OK`。
 
 ## 部署到 Hugging Face Space

app/main.py

@@ -895,6 +895,11 @@ async def homepage() -> HTMLResponse:
     return render_html("index.html")
 
 
+@app.get("/model_list", response_class=HTMLResponse)
+async def models_page() -> HTMLResponse:
+    return render_html("models.html")
+
+
 @app.get("/api/dashboard")
 async def dashboard_api() -> dict[str, Any]:
     return await run_db(load_dashboard_data)
@@ -910,20 +915,47 @@ async def catalog_api() -> dict[str, Any]:
     return build_catalog_payload()
 
 
-@app.get("/v1/models")
-async def list_models() -> dict[str, Any]:
+async def build_models_response() -> dict[str, Any]:
     if not model_cache:
         await refresh_official_models(force=True)
     return {"object": "list", "data": model_cache}
 
 
+@app.get("/v1/models")
+async def list_models_v1() -> dict[str, Any]:
+    return await build_models_response()
+
+
+@app.get("/models")
+async def list_models() -> dict[str, Any]:
+    return await build_models_response()
+
+
+async def fetch_response_record(response_id: str, api_key: str) -> dict[str, Any]:
+    return await run_db(load_response_record, hash_api_key(api_key), response_id)
+
+
 @app.get("/v1/responses/{response_id}")
+async def get_response_v1(response_id: str, api_key: str = Depends(extract_user_api_key)) -> dict[str, Any]:
+    return await fetch_response_record(response_id, api_key)
+
+
+@app.get("/responses/{response_id}")
 async def get_response(response_id: str, api_key: str = Depends(extract_user_api_key)) -> dict[str, Any]:
-    return await run_db(load_response_record, hash_api_key(api_key), response_id)
+    return await fetch_response_record(response_id, api_key)
 
 
 @app.post("/v1/responses")
+async def create_response_v1(request: Request, api_key: str = Depends(extract_user_api_key)):
+    return await create_response_impl(request, api_key)
+
+
+@app.post("/responses")
 async def create_response(request: Request, api_key: str = Depends(extract_user_api_key)):
+    return await create_response_impl(request, api_key)
+
+
+async def create_response_impl(request: Request, api_key: str):
     body = await request.json()
     if not isinstance(body, dict):
         raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="请求体必须是 JSON 对象。")

static/index.html

@@ -4,7 +4,7 @@
     <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>NIM 模型健康与模型库</title>
+    <title>NIM 模型健康度</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -13,88 +13,40 @@
     />
     <link rel="stylesheet" href="/static/style.css" />
   </head>
-  <body class="showcase-body">
-    <div class="ambient ambient-left"></div>
-    <div class="ambient ambient-right"></div>
-    <div class="ambient ambient-bottom"></div>
+  <body class="health-page-body">
+    <main class="health-page-shell">
+      <header class="health-topbar">
+        <div>
+          <span class="mini-badge">NIM Responses Gateway</span>
+          <h1>模型健康度</h1>
+          <p>按 10 分钟为粒度展示 MODEL_LIST 中各模型的成功率趋势。</p>
+        </div>
+        <div class="topbar-actions">
+          <a class="text-nav-link" href="/model_list">查看官方模型列表</a>
+          <button class="refresh-link" id="refresh-dashboard" type="button">刷新数据</button>
+        </div>
+      </header>
 
-    <header class="topbar">
-      <div class="brand-mark">
-        <span class="brand-badge">NIM Responses Gateway</span>
-        <strong>模型健康与官方模型库</strong>
-      </div>
-      <nav class="page-nav">
-        <button class="page-nav-btn active" data-page="0">健康看板</button>
-        <button class="page-nav-btn" data-page="1">官方模型库</button>
-      </nav>
-    </header>
+      <section class="health-summary-grid" id="overview-cards"></section>
 
-    <main class="showcase-shell">
-      <div class="page-track" id="page-track">
-        <section class="page-section active" data-page="0">
-          <section class="hero-stage">
-            <div class="hero-copy">
-              <span class="hero-badge">每 10 分钟统计</span>
-              <h1>实时观察模型调用质量</h1>
-              <p>
-                本网关不保存任何用户 NIM Key。每次调用都由用户自带 NIM 密钥直连上游，
-                页面仅展示聚合后的调用次数、成功率和官方模型目录。
-              </p>
-              <div class="hero-actions">
-                <button class="primary-btn" data-jump="1">查看官方模型库</button>
-                <button class="ghost-btn" id="refresh-dashboard" type="button">刷新数据</button>
-              </div>
-            </div>
-            <div class="hero-metrics" id="overview-cards"></div>
-          </section>
+      <section class="health-board-panel">
+        <div class="board-header-row">
+          <div>
+            <span class="mini-badge subtle">健康趋势</span>
+            <h2>最近 10 分钟成功率矩阵</h2>
+          </div>
+          <div class="board-meta-box">
+            <span>最近更新</span>
+            <strong id="dashboard-updated">--</strong>
+          </div>
+        </div>
 
-          <section class="panel-shell">
-            <div class="section-head">
-              <div>
-                <span class="section-tag">健康看板</span>
-                <h2>监控模型 10 分钟成功率</h2>
-              </div>
-              <div class="section-meta">
-                <span>最近更新</span>
-                <strong id="dashboard-updated">--</strong>
-              </div>
-            </div>
-            <div class="health-grid" id="health-grid"></div>
-            <p class="panel-hint" id="dashboard-empty"></p>
-          </section>
-        </section>
-
-        <section class="page-section" data-page="1">
-          <section class="hero-stage catalog-stage">
-            <div class="hero-copy narrow">
-              <span class="hero-badge">官方目录同步</span>
-              <h1>来自 NVIDIA 官方的模型列表</h1>
-              <p>
-                网关会定时从官方 `https://integrate.api.nvidia.com/v1/models` 拉取模型目录，
-                并按照模型 ID 对应的提供商进行分类展示。
-              </p>
-            </div>
-            <div class="catalog-summary" id="catalog-summary"></div>
-          </section>
-
-          <section class="panel-shell">
-            <div class="section-head">
-              <div>
-                <span class="section-tag">模型目录</span>
-                <h2>按提供商分类</h2>
-              </div>
-              <div class="section-meta">
-                <span>同步时间</span>
-                <strong id="catalog-updated">--</strong>
-              </div>
-            </div>
-            <div class="provider-grid" id="provider-grid"></div>
-            <p class="panel-hint" id="catalog-empty"></p>
-          </section>
-        </section>
-      </div>
+        <div class="timeline-header" id="timeline-header"></div>
+        <div class="health-list" id="health-grid"></div>
+        <p class="panel-hint" id="dashboard-empty"></p>
+      </section>
     </main>
-
     <script src="/static/public.js" charset="utf-8" defer></script>
   </body>
 </html>
+

static/models.html

@@ -0,0 +1,58 @@
+<!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>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@500;700&family=Noto+Sans+SC:wght@400;500;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/static/style.css" />
+  </head>
+  <body class="catalog-page-body">
+    <main class="catalog-page-shell">
+      <header class="catalog-topbar">
+        <div>
+          <span class="mini-badge">官方模型目录</span>
+          <h1>NVIDIA NIM 模型列表</h1>
+          <p>按模型提供商分类展示，支持快速筛选查看所需模型 ID。</p>
+        </div>
+        <div class="topbar-actions">
+          <a class="text-nav-link" href="/">返回健康度首页</a>
+        </div>
+      </header>
+
+      <section class="catalog-summary-grid" id="catalog-summary"></section>
+
+      <section class="catalog-filter-panel">
+        <div>
+          <span class="mini-badge subtle">筛选</span>
+          <h2>按模型提供商筛选</h2>
+        </div>
+        <div class="provider-filter-bar" id="provider-filter-bar"></div>
+      </section>
+
+      <section class="catalog-board-panel">
+        <div class="board-header-row">
+          <div>
+            <span class="mini-badge subtle">模型目录</span>
+            <h2>提供商卡片列表</h2>
+          </div>
+          <div class="board-meta-box">
+            <span>同步时间</span>
+            <strong id="catalog-updated">--</strong>
+          </div>
+        </div>
+
+        <div class="provider-grid" id="provider-grid"></div>
+        <p class="panel-hint" id="catalog-empty"></p>
+      </section>
+    </main>
+    <script src="/static/models.js" charset="utf-8" defer></script>
+  </body>
+</html>
+

static/models.js

@@ -0,0 +1,120 @@
+const catalogSummary = document.getElementById("catalog-summary");
+const providerFilterBar = document.getElementById("provider-filter-bar");
+const providerGrid = document.getElementById("provider-grid");
+const catalogUpdated = document.getElementById("catalog-updated");
+const catalogEmpty = document.getElementById("catalog-empty");
+
+let catalogState = {
+  providers: [],
+  activeProvider: "all",
+};
+
+const dateTimeFormatter = new Intl.DateTimeFormat("zh-CN", {
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: false,
+});
+
+function formatDateTime(value) {
+  if (!value) return "--";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "--";
+  return dateTimeFormatter.format(date);
+}
+
+function createSummaryCard(label, value, detail = "") {
+  const card = document.createElement("article");
+  card.className = "summary-card";
+  card.innerHTML = `<span>${label}</span><strong>${value}</strong><p>${detail}</p>`;
+  return card;
+}
+
+function renderSummary(data) {
+  catalogSummary.innerHTML = "";
+  catalogSummary.appendChild(createSummaryCard("官方模型总数", data.total_models ?? 0, "来自 NVIDIA 官方 /v1/models"));
+  catalogSummary.appendChild(createSummaryCard("提供商数量", data.providers?.length ?? 0, "按模型 ID 中的提供商前缀自动归类"));
+}
+
+function renderFilterBar() {
+  providerFilterBar.innerHTML = "";
+  const options = [{ provider: "all", count: catalogState.providers.reduce((sum, item) => sum + (item.count || 0), 0), label: "全部" }].concat(
+    catalogState.providers.map((group) => ({ provider: group.provider, count: group.count, label: group.provider }))
+  );
+
+  options.forEach((option) => {
+    const button = document.createElement("button");
+    button.className = `provider-filter-btn ${catalogState.activeProvider === option.provider ? "active" : ""}`;
+    button.type = "button";
+    button.textContent = `${option.label} (${option.count})`;
+    button.addEventListener("click", () => {
+      catalogState.activeProvider = option.provider;
+      renderFilterBar();
+      renderProviders();
+    });
+    providerFilterBar.appendChild(button);
+  });
+}
+
+function renderProviders() {
+  providerGrid.innerHTML = "";
+  const filtered = catalogState.activeProvider === "all"
+    ? catalogState.providers
+    : catalogState.providers.filter((group) => group.provider === catalogState.activeProvider);
+
+  if (filtered.length === 0) {
+    catalogEmpty.textContent = "当前筛选条件下没有可展示的模型。";
+    return;
+  }
+  catalogEmpty.textContent = "";
+
+  filtered.forEach((group) => {
+    const card = document.createElement("article");
+    card.className = "provider-card provider-card-fixed";
+    card.innerHTML = `
+      <div class="provider-card-head">
+        <div>
+          <h3>${group.provider}</h3>
+          <p>${group.count} 个模型</p>
+        </div>
+      </div>
+    `;
+
+    const list = document.createElement("div");
+    list.className = "provider-model-list";
+    (group.models || []).forEach((model) => {
+      const chip = document.createElement("div");
+      chip.className = "provider-model-chip";
+      chip.title = model.id;
+      chip.textContent = model.id;
+      list.appendChild(chip);
+    });
+
+    card.appendChild(list);
+    providerGrid.appendChild(card);
+  });
+}
+
+async function loadCatalog() {
+  const response = await fetch("/api/catalog", { headers: { Accept: "application/json" } });
+  if (!response.ok) {
+    throw new Error("模型列表加载失败");
+  }
+  const payload = await response.json();
+  catalogUpdated.textContent = formatDateTime(payload.synced_at || payload.generated_at);
+  catalogState.providers = payload.providers || [];
+  renderSummary(payload);
+  renderFilterBar();
+  renderProviders();
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+  try {
+    await loadCatalog();
+  } catch (error) {
+    catalogEmpty.textContent = error.message;
+    providerGrid.innerHTML = "";
+    providerFilterBar.innerHTML = "";
+  }
+});

static/public.js

@@ -1,34 +1,16 @@
-const pageTrack = document.getElementById("page-track");
-const navButtons = document.querySelectorAll(".page-nav-btn");
-const jumpButtons = document.querySelectorAll("[data-jump]");
-const overviewCards = document.getElementById("overview-cards");
+const overviewCards = document.getElementById("overview-cards");
 const dashboardUpdated = document.getElementById("dashboard-updated");
+const timelineHeader = document.getElementById("timeline-header");
 const healthGrid = document.getElementById("health-grid");
 const dashboardEmpty = document.getElementById("dashboard-empty");
-const catalogSummary = document.getElementById("catalog-summary");
-const catalogUpdated = document.getElementById("catalog-updated");
-const providerGrid = document.getElementById("provider-grid");
-const catalogEmpty = document.getElementById("catalog-empty");
 const refreshDashboardBtn = document.getElementById("refresh-dashboard");
 
-const STATUS_CLASSES = {
-  green: "is-green",
-  yellow: "is-yellow",
-  orange: "is-orange",
-  red: "is-red",
-  idle: "is-idle",
-};
-
 const dateTimeFormatter = new Intl.DateTimeFormat("zh-CN", {
-  month: "2-digit",
-  day: "2-digit",
   hour: "2-digit",
   minute: "2-digit",
+  hour12: false,
 });
 
-let currentPage = 0;
-let wheelLocked = false;
-
 function formatDateTime(value) {
   if (!value) return "--";
   const date = new Date(value);
@@ -37,189 +19,113 @@ function formatDateTime(value) {
 }
 
 function rateMeta(rate) {
-  if (rate === null || rate === undefined) return { label: "暂无数据", tone: "idle" };
-  if (rate >= 95) return { label: "优秀", tone: "green" };
-  if (rate >= 80) return { label: "良好", tone: "yellow" };
-  if (rate >= 50) return { label: "告警", tone: "orange" };
-  return { label: "异常", tone: "red" };
+  if (rate === null || rate === undefined) return { label: "暂无数据", className: "status-cyan", colorClass: "cell-empty" };
+  if (rate >= 95) return { label: "优秀", className: "status-cyan", colorClass: "cell-cyan" };
+  if (rate >= 80) return { label: "良好", className: "status-green", colorClass: "cell-green" };
+  if (rate >= 50) return { label: "告警", className: "status-orange", colorClass: "cell-orange" };
+  return { label: "异常", className: "status-red", colorClass: "cell-red" };
 }
 
-function switchPage(nextPage) {
-  currentPage = Math.max(0, Math.min(1, nextPage));
-  pageTrack.style.transform = `translate3d(${-50 * currentPage}%, 0, 0)`;
-  navButtons.forEach((button) => button.classList.toggle("active", Number(button.dataset.page) === currentPage));
-  document.querySelectorAll(".page-section").forEach((section) => {
-    section.classList.toggle("active", Number(section.dataset.page) === currentPage);
-  });
-}
-
-navButtons.forEach((button) => button.addEventListener("click", () => switchPage(Number(button.dataset.page))));
-jumpButtons.forEach((button) => button.addEventListener("click", () => switchPage(Number(button.dataset.jump))));
-
-window.addEventListener(
-  "wheel",
-  (event) => {
-    if (wheelLocked) return;
-    if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || Math.abs(event.deltaY) < 20) return;
-    wheelLocked = true;
-    switchPage(currentPage + (event.deltaY > 0 ? 1 : -1));
-    window.setTimeout(() => {
-      wheelLocked = false;
-    }, 650);
-  },
-  { passive: true }
-);
-
-window.addEventListener("keydown", (event) => {
-  if (event.key === "ArrowRight") switchPage(1);
-  if (event.key === "ArrowLeft") switchPage(0);
-});
-
-function createOverviewCard(label, value, detail = "") {
+function createSummaryCard(label, value, detail = "") {
   const card = document.createElement("article");
-  card.className = "overview-card";
+  card.className = "summary-card";
   card.innerHTML = `<span>${label}</span><strong>${value}</strong><p>${detail}</p>`;
   return card;
 }
 
 function renderOverview(data) {
   overviewCards.innerHTML = "";
-  const averageHealth = data.average_health === null || data.average_health === undefined ? "--" : `${data.average_health.toFixed(1)}%`;
-  const activeModels = (data.models || []).filter((model) => model.latest_success_rate !== null && model.latest_success_rate !== undefined).length;
-  const averageLatencyModels = (data.models || [])
-    .flatMap((model) => model.points || [])
-    .filter((point) => point.total_count > 0 && point.success_rate !== null && point.success_rate !== undefined);
-
-  overviewCards.appendChild(createOverviewCard("总调用次数", data.total_requests ?? 0, "来自网关历史累计转发记录"));
-  overviewCards.appendChild(createOverviewCard("平均健康度", averageHealth, "按监控模型最近 10 分钟成功率平均值计算"));
-  overviewCards.appendChild(createOverviewCard("活跃模型数", activeModels, "最近统计窗口内有调用记录的模型数量"));
-  overviewCards.appendChild(createOverviewCard("统计粒度", `${data.bucket_minutes} 分钟`, `已展示最近 ${data.models?.[0]?.points?.length || 0} 个时间片`));
+  const averageHealth = data.average_health === null || data.average_health === undefined ? "--" : `${data.average_health.toFixed(2)}%`;
+  const totalCalls = data.total_requests ?? 0;
+  const healthyModels = (data.models || []).filter((model) => (model.latest_success_rate ?? 0) >= 95).length;
+  const displayedBuckets = data.models?.[0]?.points?.length || 0;
+
+  overviewCards.appendChild(createSummaryCard("总调用次数", totalCalls, "统计来自网关累计成功与失败请求"));
+  overviewCards.appendChild(createSummaryCard("平均健康度", averageHealth, "按监控模型最近 10 分钟成功率平均值计算"));
+  overviewCards.appendChild(createSummaryCard("高健康模型数", healthyModels, "最近一档成功率达到 95% 以上的模型数量"));
+  overviewCards.appendChild(createSummaryCard("统计窗口", `${displayedBuckets * (data.bucket_minutes || 10)} 分钟`, `当前按 ${data.bucket_minutes || 10} 分钟粒度滚动统计`));
   dashboardUpdated.textContent = formatDateTime(data.generated_at);
 }
 
-function renderHealthCards(models) {
+function renderTimelineHeader(models) {
+  timelineHeader.innerHTML = "";
+  const points = models?.[0]?.points || [];
+  const emptyCell = document.createElement("div");
+  emptyCell.className = "timeline-label timeline-left-placeholder";
+  timelineHeader.appendChild(emptyCell);
+  points.forEach((point) => {
+    const cell = document.createElement("div");
+    cell.className = "timeline-label";
+    cell.textContent = point.label || formatDateTime(point.bucket_start);
+    timelineHeader.appendChild(cell);
+  });
+}
+
+function renderHealthRows(models) {
   healthGrid.innerHTML = "";
   if (!models || models.length === 0) {
-    dashboardEmpty.textContent = "当前未配置 MODEL_LIST，或尚无可展示的统计结果。";
+    dashboardEmpty.textContent = "当前没有可展示的模型健康数据，请确认 MODEL_LIST 配置并等待请求进入统计。";
     return;
   }
   dashboardEmpty.textContent = "";
+  renderTimelineHeader(models);
 
   models.forEach((model) => {
+    const latestRate = model.latest_success_rate === null || model.latest_success_rate === undefined ? "--" : `${model.latest_success_rate.toFixed(2)}%`;
     const latestMeta = rateMeta(model.latest_success_rate);
-    const latestRate = model.latest_success_rate === null || model.latest_success_rate === undefined ? "--" : `${model.latest_success_rate.toFixed(1)}%`;
-    const averageRate = model.average_success_rate === null || model.average_success_rate === undefined ? "--" : `${model.average_success_rate.toFixed(1)}%`;
-
-    const card = document.createElement("article");
-    card.className = `health-card ${STATUS_CLASSES[latestMeta.tone]}`;
-    card.innerHTML = `
-      <div class="card-head">
-        <div>
-          <h3>${model.model_id}</h3>
-          <p>${model.provider}</p>
-        </div>
-        <span class="status-pill ${STATUS_CLASSES[latestMeta.tone]}">${latestMeta.label}</span>
-      </div>
-      <div class="scoreboard">
-        <div class="score-item">
-          <span>最近 10 分钟</span>
-          <strong>${latestRate}</strong>
-        </div>
-        <div class="score-item">
-          <span>近 1 小时均值</span>
-          <strong>${averageRate}</strong>
-        </div>
-        <div class="score-item">
-          <span>累计调用次数</span>
-          <strong>${model.total_calls ?? 0}</strong>
-        </div>
+
+    const row = document.createElement("article");
+    row.className = "health-row-card";
+
+    const summary = document.createElement("div");
+    summary.className = "health-row-summary";
+    summary.innerHTML = `
+      <div class="health-row-accent ${latestMeta.className}"></div>
+      <div class="health-row-copy">
+        <h3 title="${model.model_id}">${model.model_id}</h3>
+        <span class="health-rate-pill ${latestMeta.className}">${latestRate}</span>
       </div>
     `;
 
-    const timeline = document.createElement("div");
-    timeline.className = "timeline-strip";
+    const cells = document.createElement("div");
+    cells.className = "health-cells";
     (model.points || []).forEach((point) => {
       const meta = rateMeta(point.success_rate);
-      const item = document.createElement("div");
-      item.className = `timeline-box ${STATUS_CLASSES[meta.tone]}`;
-      item.innerHTML = `<span>${point.label}</span><strong>${point.success_rate === null || point.success_rate === undefined ? "--" : `${point.success_rate.toFixed(0)}%`}</strong>`;
-      item.title = `${point.label} 成功 ${point.success_count}/${point.total_count}`;
-      timeline.appendChild(item);
+      const cell = document.createElement("div");
+      cell.className = `health-cell ${meta.colorClass}`;
+      cell.title = `${point.label} 成功 ${point.success_count}/${point.total_count}`;
+      cells.appendChild(cell);
     });
-    card.appendChild(timeline);
-    healthGrid.appendChild(card);
-  });
-}
-
-function renderCatalogSummary(data) {
-  catalogSummary.innerHTML = "";
-  catalogSummary.appendChild(createOverviewCard("官方模型总数", data.total_models ?? 0, "来自 NVIDIA 官方模型目录"));
-  catalogSummary.appendChild(createOverviewCard("提供商数量", data.providers?.length ?? 0, "按模型 ID 前缀自动归类"));
-}
 
-function renderCatalogProviders(providers) {
-  providerGrid.innerHTML = "";
-  if (!providers || providers.length === 0) {
-    catalogEmpty.textContent = "暂时还没有拉取到官方模型目录，请稍后刷新。";
-    return;
-  }
-  catalogEmpty.textContent = "";
-
-  providers.forEach((group) => {
-    const card = document.createElement("article");
-    card.className = "provider-card";
-    card.innerHTML = `
-      <div class="provider-head">
-        <div>
-          <h3>${group.provider}</h3>
-          <p>${group.count} 个模型</p>
-        </div>
-      </div>
-    `;
-    const chipWrap = document.createElement("div");
-    chipWrap.className = "model-chip-wrap";
-    (group.models || []).forEach((model) => {
-      const chip = document.createElement("span");
-      chip.className = "model-chip";
-      chip.textContent = model.id;
-      chipWrap.appendChild(chip);
-    });
-    card.appendChild(chipWrap);
-    providerGrid.appendChild(card);
+    row.appendChild(summary);
+    row.appendChild(cells);
+    healthGrid.appendChild(row);
   });
 }
 
 async function loadDashboard() {
   const response = await fetch("/api/dashboard", { headers: { Accept: "application/json" } });
-  if (!response.ok) throw new Error("仪表盘数据加载失败");
+  if (!response.ok) {
+    throw new Error("健康看板数据加载失败");
+  }
   const payload = await response.json();
   renderOverview(payload);
-  renderHealthCards(payload.models || []);
-}
-
-async function loadCatalog() {
-  const response = await fetch("/api/catalog", { headers: { Accept: "application/json" } });
-  if (!response.ok) throw new Error("模型目录加载失败");
-  const payload = await response.json();
-  catalogUpdated.textContent = formatDateTime(payload.synced_at || payload.generated_at);
-  renderCatalogSummary(payload);
-  renderCatalogProviders(payload.providers || []);
+  renderHealthRows(payload.models || []);
 }
 
-async function refreshAll() {
+async function refreshDashboard() {
   try {
-    await Promise.all([loadDashboard(), loadCatalog()]);
+    await loadDashboard();
   } catch (error) {
     dashboardEmpty.textContent = error.message;
-    catalogEmpty.textContent = error.message;
+    timelineHeader.innerHTML = "";
+    healthGrid.innerHTML = "";
   }
 }
 
-refreshDashboardBtn?.addEventListener("click", refreshAll);
+refreshDashboardBtn?.addEventListener("click", refreshDashboard);
 
 window.addEventListener("DOMContentLoaded", () => {
-  switchPage(0);
-  refreshAll();
-  window.setInterval(loadDashboard, 60 * 1000);
-  window.setInterval(loadCatalog, 5 * 60 * 1000);
+  refreshDashboard();
+  window.setInterval(refreshDashboard, 60 * 1000);
 });

static/style.css

@@ -1,24 +1,21 @@
 :root {
-  --bg: #050816;
-  --bg-deep: #02040b;
-  --panel: rgba(10, 15, 28, 0.72);
-  --panel-strong: rgba(14, 20, 36, 0.92);
-  --panel-soft: rgba(255, 255, 255, 0.05);
-  --line: rgba(255, 255, 255, 0.09);
-  --line-strong: rgba(255, 255, 255, 0.16);
-  --text: #f4f7ff;
-  --muted: #91a3c4;
-  --muted-strong: #c7d4ea;
-  --green: #38f3a5;
-  --yellow: #ffd24d;
-  --orange: #ff9b43;
-  --red: #ff637f;
-  --idle: #5e6d88;
-  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
-  --glow: 0 0 0 1px rgba(56, 243, 165, 0.12), 0 24px 70px rgba(56, 243, 165, 0.12);
+  --bg: #f8fbfd;
+  --surface: #ffffff;
+  --surface-soft: #f1f8fb;
+  --surface-muted: #eef6f9;
+  --line: #deedf3;
+  --line-strong: #c8e5ef;
+  --text: #3d4652;
+  --muted: #7b8a97;
+  --cyan: #57c8df;
+  --cyan-deep: #46bfd8;
+  --green: #69c36c;
+  --yellow: #a8cf6d;
+  --orange: #f0ae46;
+  --red: #f06d6f;
+  --shadow: 0 20px 42px rgba(109, 153, 177, 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;
 }
 
 * {
@@ -35,535 +32,493 @@ body {
   font-family: var(--font-sans);
   color: var(--text);
   background:
-    radial-gradient(circle at 12% 16%, rgba(56, 243, 165, 0.18), transparent 24%),
-    radial-gradient(circle at 84% 18%, rgba(79, 125, 255, 0.18), transparent 26%),
-    linear-gradient(180deg, #08111f 0%, var(--bg) 42%, var(--bg-deep) 100%);
-  overflow-x: hidden;
-}
-
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  background-image:
-    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
-  background-size: 36px 36px;
-  opacity: 0.08;
-  pointer-events: none;
-}
-
-.ambient {
-  position: fixed;
-  border-radius: 999px;
-  filter: blur(100px);
-  pointer-events: none;
-  opacity: 0.36;
-}
-
-.ambient-left {
-  width: 26rem;
-  height: 26rem;
-  top: -8rem;
-  left: -8rem;
-  background: rgba(56, 243, 165, 0.36);
-}
-
-.ambient-right {
-  width: 32rem;
-  height: 32rem;
-  top: 8rem;
-  right: -10rem;
-  background: rgba(110, 125, 255, 0.28);
-}
-
-.ambient-bottom {
-  width: 28rem;
-  height: 28rem;
-  bottom: -10rem;
-  right: 18%;
-  background: rgba(255, 171, 72, 0.18);
+    radial-gradient(circle at top left, rgba(105, 195, 108, 0.08), transparent 22%),
+    radial-gradient(circle at top right, rgba(87, 200, 223, 0.12), transparent 20%),
+    linear-gradient(180deg, #fbfdfe 0%, #f6fbfd 100%);
 }
 
-.topbar {
-  position: sticky;
-  top: 0;
-  z-index: 30;
-  width: min(1360px, calc(100vw - 32px));
+.health-page-shell,
+.catalog-page-shell {
+  width: min(1560px, calc(100vw - 56px));
   margin: 0 auto;
-  padding: 22px 0 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 18px;
-  backdrop-filter: blur(10px);
-}
-
-.brand-mark {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.brand-mark strong,
-.hero-copy h1,
-.section-head h2,
-.provider-head h3,
-.health-card h3 {
-  font-family: var(--font-display);
-}
-
-.brand-badge,
-.hero-badge,
-.section-tag {
-  display: inline-flex;
-  align-items: center;
-  width: fit-content;
-  padding: 8px 14px;
-  border-radius: 999px;
-  border: 1px solid rgba(56, 243, 165, 0.26);
-  background: rgba(56, 243, 165, 0.1);
-  color: #8affd0;
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-}
-
-.page-nav {
-  display: inline-flex;
-  gap: 10px;
-  padding: 8px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--line);
-  box-shadow: var(--shadow);
-}
-
-.page-nav-btn,
-.primary-btn,
-.ghost-btn {
-  border: none;
-  cursor: pointer;
-  font: inherit;
-  transition: transform 0.22s ease, opacity 0.22s ease, background 0.22s ease, border-color 0.22s ease;
-}
-
-.page-nav-btn {
-  padding: 10px 16px;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--muted-strong);
-}
-
-.page-nav-btn.active {
-  color: #04110d;
-  background: linear-gradient(135deg, var(--green), #7affd8);
-  font-weight: 700;
-}
-
-.showcase-shell {
-  position: relative;
-  width: min(1360px, calc(100vw - 32px));
-  margin: 0 auto 42px;
-  overflow: hidden;
-}
-
-.page-track {
-  display: flex;
-  width: 200%;
-  transform: translate3d(0, 0, 0);
-  transition: transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
+  padding: 26px 0 44px;
 }
 
-.page-section {
-  width: 50%;
-  padding-right: 18px;
-  opacity: 0.74;
-  transform: scale(0.985);
-  transition: opacity 0.55s ease, transform 0.55s ease;
-}
-
-.page-section.active {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.hero-stage,
-.panel-shell,
-.overview-card,
-.health-card,
+.health-topbar,
+.catalog-topbar,
+.health-summary-grid,
+.health-board-panel,
+.catalog-summary-grid,
+.catalog-filter-panel,
+.catalog-board-panel,
+.summary-card,
 .provider-card {
-  position: relative;
-  border-radius: 28px;
+  background: var(--surface);
   border: 1px solid var(--line);
-  background: linear-gradient(180deg, rgba(17, 25, 44, 0.84), rgba(8, 12, 22, 0.95));
   box-shadow: var(--shadow);
-  backdrop-filter: blur(18px);
-  overflow: hidden;
 }
 
-.hero-stage::after,
-.panel-shell::after,
-.health-card::after,
-.provider-card::after,
-.overview-card::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(140deg, rgba(138, 255, 208, 0.08), transparent 32%, transparent 68%, rgba(116, 126, 255, 0.08));
-  pointer-events: none;
+.health-topbar,
+.catalog-topbar,
+.health-board-panel,
+.catalog-filter-panel,
+.catalog-board-panel {
+  border-radius: 28px;
 }
 
-.hero-stage {
-  display: grid;
-  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.9fr);
-  gap: 24px;
-  padding: 34px;
+.health-topbar,
+.catalog-topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 26px 30px;
 }
 
-.catalog-stage {
-  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
+.health-topbar h1,
+.catalog-topbar h1,
+.board-header-row h2,
+.health-row-copy h3,
+.provider-card h3 {
+  font-family: var(--font-display);
 }
 
-.hero-copy h1 {
-  margin: 16px 0 12px;
-  font-size: clamp(34px, 3vw, 58px);
-  line-height: 1.06;
+.health-topbar h1,
+.catalog-topbar h1 {
+  margin: 12px 0 10px;
+  font-size: clamp(30px, 2.5vw, 44px);
+  line-height: 1.1;
 }
 
-.hero-copy p,
-.section-head p,
-.brand-mark strong,
-.provider-head p,
+.health-topbar p,
+.catalog-topbar p,
 .panel-hint,
-.health-card p,
-.overview-card p {
+.provider-card p,
+.summary-card p,
+.timeline-label,
+.board-meta-box span {
   color: var(--muted);
-  line-height: 1.75;
 }
 
-.hero-actions {
-  margin-top: 28px;
+.topbar-actions {
   display: flex;
   gap: 14px;
+  align-items: center;
   flex-wrap: wrap;
 }
 
-.primary-btn,
-.ghost-btn {
-  padding: 14px 20px;
-  border-radius: 18px;
+.mini-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: rgba(87, 200, 223, 0.12);
+  color: var(--cyan-deep);
+  border: 1px solid rgba(87, 200, 223, 0.26);
+  font-size: 13px;
   font-weight: 700;
+  letter-spacing: 0.05em;
 }
 
-.primary-btn {
-  background: linear-gradient(135deg, var(--green), #7affd8);
-  color: #04110d;
-  box-shadow: var(--glow);
+.mini-badge.subtle {
+  background: var(--surface-soft);
+  color: var(--muted);
+  border-color: var(--line);
 }
 
-.ghost-btn {
-  background: rgba(255, 255, 255, 0.05);
+.text-nav-link,
+.refresh-link,
+.provider-filter-btn {
+  appearance: none;
+  border: 1px solid var(--line-strong);
+  background: var(--surface);
   color: var(--text);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  text-decoration: none;
+  border-radius: 999px;
+  padding: 11px 16px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.text-nav-link:hover,
+.refresh-link:hover,
+.provider-filter-btn:hover {
+  border-color: var(--cyan);
+  color: var(--cyan-deep);
 }
 
-.hero-metrics,
-.catalog-summary {
+.health-summary-grid,
+.catalog-summary-grid {
+  margin-top: 18px;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-  align-content: start;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  background: transparent;
+  border: none;
+  box-shadow: none;
 }
 
-.overview-card {
+.summary-card {
+  border-radius: 22px;
   padding: 18px 20px;
 }
 
-.overview-card span {
+.summary-card span {
+  display: block;
   color: var(--muted);
   font-size: 13px;
 }
 
-.overview-card strong {
+.summary-card strong {
   display: block;
   margin: 10px 0 8px;
   font-family: var(--font-display);
-  font-size: 30px;
+  font-size: 28px;
 }
 
-.panel-shell {
-  margin-top: 22px;
-  padding: 28px;
+.health-board-panel,
+.catalog-filter-panel,
+.catalog-board-panel {
+  margin-top: 18px;
+  padding: 26px 28px;
 }
 
-.section-head {
+.board-header-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 18px;
   flex-wrap: wrap;
-  margin-bottom: 20px;
+  margin-bottom: 18px;
 }
 
-.section-head h2 {
+.board-header-row h2 {
   margin: 12px 0 0;
-  font-size: clamp(26px, 2vw, 38px);
+  font-size: clamp(24px, 2vw, 34px);
 }
 
-.section-meta {
-  min-width: 220px;
-  padding: 16px 18px;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.05);
+.board-meta-box {
+  min-width: 200px;
+  padding: 14px 16px;
+  border-radius: 20px;
+  background: var(--surface-soft);
   border: 1px solid var(--line);
 }
 
-.section-meta span {
+.board-meta-box strong {
   display: block;
-  color: var(--muted);
-  font-size: 13px;
-  margin-bottom: 8px;
-}
-
-.section-meta strong {
+  margin-top: 8px;
   font-family: var(--font-display);
   font-size: 20px;
 }
 
-.health-grid,
-.provider-grid {
+.timeline-header {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 18px;
+  grid-template-columns: 360px repeat(6, minmax(74px, 1fr));
+  gap: 12px;
+  align-items: center;
+  margin: 10px 0 12px;
 }
 
-.health-card,
-.provider-card {
-  padding: 22px;
-  transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
+.timeline-label {
+  text-align: center;
+  font-size: 13px;
 }
 
-.health-card:hover,
-.provider-card:hover,
-.overview-card:hover {
-  transform: translateY(-4px);
-  border-color: rgba(255, 255, 255, 0.16);
-  box-shadow: var(--glow);
+.timeline-left-placeholder {
+  text-align: left;
 }
 
-.card-head,
-.provider-head {
+.health-list {
   display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: flex-start;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.health-card h3,
-.provider-head h3 {
-  margin: 0;
-  font-size: 22px;
+.health-row-card {
+  display: grid;
+  grid-template-columns: 360px minmax(0, 1fr);
+  gap: 18px;
+  align-items: center;
+  padding: 18px 0;
+  border-bottom: 1px solid var(--line);
 }
 
-.health-card p,
-.provider-head p {
-  margin: 8px 0 0;
+.health-row-card:last-child {
+  border-bottom: none;
+}
+
+.health-row-summary {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-width: 0;
 }
 
-.status-pill {
-  padding: 8px 12px;
+.health-row-accent {
+  width: 22px;
+  min-width: 22px;
+  height: 92px;
   border-radius: 999px;
-  font-size: 12px;
-  font-weight: 700;
-  border: 1px solid transparent;
+  background: var(--cyan);
+}
+
+.health-row-copy {
+  min-width: 0;
+}
+
+.health-row-copy h3 {
+  margin: 0;
+  font-size: 26px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.scoreboard {
+.health-rate-pill {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 12px;
+  padding: 9px 14px;
+  border-radius: 14px;
+  font-weight: 800;
+  font-size: 15px;
+  background: var(--surface-soft);
+}
+
+.health-cells {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(6, minmax(74px, 1fr));
   gap: 12px;
-  margin-top: 18px;
+  align-items: center;
 }
 
-.score-item {
-  padding: 14px 16px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.045);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+.health-cell {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 14px;
+  border: 4px solid transparent;
+  background: var(--surface-muted);
 }
 
-.score-item span {
-  display: block;
-  color: var(--muted);
-  font-size: 12px;
+.cell-cyan {
+  border-color: var(--cyan);
+  background: rgba(87, 200, 223, 0.12);
 }
 
-.score-item strong {
-  display: block;
-  margin-top: 10px;
-  font-family: var(--font-display);
-  font-size: 18px;
+.cell-green {
+  border-color: var(--green);
+  background: rgba(105, 195, 108, 0.1);
 }
 
-.timeline-strip {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
-  gap: 10px;
-  margin-top: 18px;
+.cell-orange {
+  border-color: var(--orange);
+  background: rgba(240, 174, 70, 0.1);
 }
 
-.timeline-box {
-  padding: 12px 10px;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  text-align: center;
-  background: rgba(255, 255, 255, 0.04);
+.cell-red {
+  border-color: var(--red);
+  background: rgba(240, 109, 111, 0.1);
 }
 
-.timeline-box span {
-  display: block;
-  color: var(--muted);
-  font-size: 12px;
+.cell-empty {
+  border-color: transparent;
+  background: var(--surface-muted);
 }
 
-.timeline-box strong {
-  display: block;
-  margin-top: 8px;
-  font-family: var(--font-display);
-  font-size: 18px;
+.status-cyan,
+.status-cyan.health-row-accent {
+  color: var(--cyan-deep);
+  background-color: var(--cyan);
+}
+
+.status-green,
+.status-green.health-row-accent {
+  color: var(--green);
+  background-color: var(--green);
+}
+
+.status-orange,
+.status-orange.health-row-accent {
+  color: var(--orange);
+  background-color: var(--orange);
 }
 
-.model-chip-wrap {
+.status-red,
+.status-red.health-row-accent {
+  color: var(--red);
+  background-color: var(--red);
+}
+
+.health-rate-pill.status-cyan { color: var(--cyan-deep); background: rgba(87, 200, 223, 0.14); }
+.health-rate-pill.status-green { color: var(--green); background: rgba(105, 195, 108, 0.14); }
+.health-rate-pill.status-orange { color: var(--orange); background: rgba(240, 174, 70, 0.14); }
+.health-rate-pill.status-red { color: var(--red); background: rgba(240, 109, 111, 0.14); }
+
+.provider-filter-panel {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 18px;
   flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 18px;
 }
 
-.model-chip {
-  display: inline-flex;
-  align-items: center;
-  padding: 10px 14px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  color: var(--muted-strong);
-  font-size: 13px;
+.provider-filter-panel h2 {
+  margin: 12px 0 0;
+  font-family: var(--font-display);
+  font-size: clamp(22px, 2vw, 30px);
 }
 
-.panel-hint {
-  margin-top: 16px;
+.provider-filter-bar {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
-.is-green {
-  border-color: rgba(56, 243, 165, 0.26);
+.provider-filter-btn.active {
+  background: rgba(87, 200, 223, 0.12);
+  border-color: rgba(87, 200, 223, 0.3);
+  color: var(--cyan-deep);
+  font-weight: 700;
 }
 
-.is-green .status-pill,
-.is-green.timeline-box,
-.timeline-box.is-green {
-  background: rgba(56, 243, 165, 0.16);
-  color: #8affd0;
-  border-color: rgba(56, 243, 165, 0.3);
+.provider-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 18px;
 }
 
-.is-yellow {
-  border-color: rgba(255, 210, 77, 0.22);
+.provider-card {
+  border-radius: 24px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
 }
 
-.is-yellow .status-pill,
-.is-yellow.timeline-box,
-.timeline-box.is-yellow {
-  background: rgba(255, 210, 77, 0.14);
-  color: #ffe59b;
-  border-color: rgba(255, 210, 77, 0.28);
+.provider-card-fixed {
+  height: 320px;
 }
 
-.is-orange {
-  border-color: rgba(255, 155, 67, 0.26);
+.provider-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
 }
 
-.is-orange .status-pill,
-.is-orange.timeline-box,
-.timeline-box.is-orange {
-  background: rgba(255, 155, 67, 0.15);
-  color: #ffc48a;
-  border-color: rgba(255, 155, 67, 0.3);
+.provider-card h3 {
+  margin: 0;
+  font-size: 24px;
 }
 
-.is-red {
-  border-color: rgba(255, 99, 127, 0.28);
+.provider-card p {
+  margin: 10px 0 0;
 }
 
-.is-red .status-pill,
-.is-red.timeline-box,
-.timeline-box.is-red {
-  background: rgba(255, 99, 127, 0.16);
-  color: #ffbbca;
-  border-color: rgba(255, 99, 127, 0.32);
+.provider-model-list {
+  margin-top: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: auto;
+  padding-right: 4px;
 }
 
-.is-idle .status-pill,
-.is-idle.timeline-box,
-.timeline-box.is-idle {
-  background: rgba(94, 109, 136, 0.15);
-  color: #c5d0df;
-  border-color: rgba(94, 109, 136, 0.26);
+.provider-model-chip {
+  display: block;
+  padding: 11px 14px;
+  border-radius: 16px;
+  background: var(--surface-soft);
+  border: 1px solid var(--line);
+  font-family: var(--font-display);
+  font-size: 13px;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.hidden {
-  display: none !important;
+.panel-hint {
+  margin-top: 16px;
+}
+
+@media (max-width: 1200px) {
+  .timeline-header,
+  .health-row-card,
+  .health-cells {
+    grid-template-columns: 300px repeat(6, minmax(60px, 1fr));
+  }
 }
 
 @media (max-width: 980px) {
-  .topbar,
-  .showcase-shell {
-    width: min(100vw - 24px, 1360px);
+  .health-page-shell,
+  .catalog-page-shell {
+    width: min(100vw - 24px, 1560px);
+  }
+
+  .health-summary-grid,
+  .catalog-summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .hero-stage,
-  .catalog-stage {
+  .timeline-header {
+    display: none;
+  }
+
+  .health-row-card {
     grid-template-columns: 1fr;
+    gap: 14px;
+    padding: 18px;
+    border: 1px solid var(--line);
+    border-radius: 24px;
+    background: var(--surface);
   }
 
-  .hero-metrics,
-  .catalog-summary,
-  .scoreboard {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .health-cells {
+    grid-template-columns: repeat(6, minmax(40px, 1fr));
   }
 }
 
 @media (max-width: 720px) {
-  .topbar {
-    flex-direction: column;
-    align-items: stretch;
+  .health-topbar,
+  .catalog-topbar,
+  .health-board-panel,
+  .catalog-filter-panel,
+  .catalog-board-panel {
+    padding: 20px;
+  }
+
+  .health-summary-grid,
+  .catalog-summary-grid,
+  .provider-grid {
+    grid-template-columns: 1fr;
   }
 
-  .page-nav {
+  .topbar-actions,
+  .provider-filter-bar {
     width: 100%;
-    justify-content: space-between;
   }
 
-  .page-nav-btn {
-    flex: 1;
+  .text-nav-link,
+  .refresh-link,
+  .provider-filter-btn {
+    width: 100%;
+    text-align: center;
   }
 
-  .page-section {
-    padding-right: 10px;
+  .health-row-summary {
+    align-items: flex-start;
   }
 
-  .hero-stage,
-  .panel-shell {
-    padding: 20px;
+  .health-row-accent {
+    height: 72px;
   }
 
-  .hero-metrics,
-  .catalog-summary,
-  .health-grid,
-  .provider-grid,
-  .scoreboard,
-  .timeline-strip {
-    grid-template-columns: 1fr;
+  .health-row-copy h3 {
+    font-size: 22px;
+  }
+
+  .health-cells {
+    grid-template-columns: repeat(3, minmax(54px, 1fr));
   }
 }