diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 61c8c07..df9c84e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -279,12 +279,46 @@ jobs:
             '.code == 0 and .data.status == "ok"' \
             <<< "$health_json" > /dev/null
 
+          live_json="$(curl --fail --silent --show-error \
+            "http://127.0.0.1:${API_PORT}/health/live")"
+          jq --exit-status \
+            '.code == 0 and .data.status == "ok"' \
+            <<< "$live_json" > /dev/null
+
           ready_json="$(curl --fail --silent --show-error --retry 10 --retry-all-errors --retry-delay 2 \
             "http://127.0.0.1:${API_PORT}/waitqueue/ready")"
           jq --exit-status \
             '.code == 0 and .data.status == "ready" and .data.dependencies.mysql == "ok" and .data.dependencies.redis == "ok"' \
             <<< "$ready_json" > /dev/null
 
+          ready_alias_json="$(curl --fail --silent --show-error \
+            "http://127.0.0.1:${API_PORT}/health/ready")"
+          jq --exit-status \
+            '.code == 0 and .data.status == "ready" and .data.dependencies.mysql == "ok" and .data.dependencies.redis == "ok"' \
+            <<< "$ready_alias_json" > /dev/null
+
+          unauthenticated_metrics_status="$(curl --silent --show-error --output /dev/null --write-out '%{http_code}' \
+            "http://127.0.0.1:${API_PORT}/metrics")"
+          test "$unauthenticated_metrics_status" = "401"
+
+          unauthenticated_metrics_slash_status="$(curl --silent --show-error --output /dev/null --write-out '%{http_code}' \
+            "http://127.0.0.1:${API_PORT}/metrics/")"
+          test "$unauthenticated_metrics_slash_status" = "401"
+
+          wrong_token_metrics_slash_status="$(curl --silent --show-error --output /dev/null --write-out '%{http_code}' \
+            --header 'Authorization: Bearer definitely-wrong' \
+            "http://127.0.0.1:${API_PORT}/metrics/")"
+          test "$wrong_token_metrics_slash_status" = "401"
+
+          metrics_body="$(curl --fail --silent --show-error \
+            --header "Authorization: Bearer ${WAITQUEUE_API_TOKEN}" \
+            "http://127.0.0.1:${API_PORT}/metrics")"
+          grep --fixed-strings --quiet '# TYPE waitqueue_queue_waiting_tasks gauge' <<< "$metrics_body"
+          grep --fixed-strings --quiet '# TYPE waitqueue_callback_attempts_total counter' <<< "$metrics_body"
+          if grep --extended-regexp --quiet 'namespace=|task_id=|taskId=|token=|hook_url=|hookUrl=' <<< "$metrics_body"; then
+            exit 1
+          fi
+
           unauthenticated_status="$(curl --silent --show-error --output /dev/null --write-out '%{http_code}' \
             "http://127.0.0.1:${API_PORT}/waitqueue/admin/overview")"
           test "$unauthenticated_status" = "401"
@@ -297,7 +331,8 @@ jobs:
           authenticated_json="$(curl --fail --silent --show-error \
             --header "Authorization: Bearer ${WAITQUEUE_API_TOKEN}" \
             "http://127.0.0.1:${API_PORT}/waitqueue/admin/overview")"
-          jq --exit-status '.code == 0 and .data.summary.queueCount == 0' \
+          jq --exit-status \
+            '.code == 0 and .data.summary.queueCount == 0 and .data.summary.retrying == 0 and .data.summary.deadLetters == 0 and .data.summary.oldestWaitingAt == null and .data.summary.oldestWaitingAgeSeconds == null and (.data.metricsStartedAt | type) == "string"' \
             <<< "$authenticated_json" > /dev/null
 
           private_hook_status="$(curl --silent --show-error --output /dev/null --write-out '%{http_code}' \
@@ -320,7 +355,26 @@ jobs:
 
           dashboard_html="$(curl --fail --silent --show-error --retry 10 --retry-all-errors --retry-delay 2 \
             "http://127.0.0.1:${DASHBOARD_PORT}/")"
-          grep --fixed-strings --quiet 'WaitQueue Control Room' <<< "$dashboard_html"
+          grep --fixed-strings --quiet 'WaitQueue Workbench' <<< "$dashboard_html"
+          node -e '
+            let html = "";
+            process.stdin.setEncoding("utf8");
+            process.stdin.on("data", (chunk) => { html += chunk; });
+            process.stdin.on("end", () => {
+              const css = html.match(/<style id="antd-ssr">([\s\S]*?)<\/style>/)?.[1] || "";
+              if (css.length < 1000 || !/\.ant-(app|btn|layout|menu|table)/.test(css)) process.exit(1);
+            });
+          ' <<< "$dashboard_html"
+
+          dashboard_live_json="$(curl --fail --silent --show-error \
+            "http://127.0.0.1:${DASHBOARD_PORT}/waitqueue/health/live")"
+          jq --exit-status \
+            '.code == 0 and .data.status == "ok"' \
+            <<< "$dashboard_live_json" > /dev/null
+
+          dashboard_metrics_status="$(curl --silent --show-error --output /dev/null --write-out '%{http_code}' \
+            "http://127.0.0.1:${DASHBOARD_PORT}/waitqueue/metrics")"
+          test "$dashboard_metrics_status" = "404"
 
           proxy_content_type_status="$(curl --silent --show-error --output /dev/null --write-out '%{http_code}' \
             --request POST \
diff --git a/Dockerfile b/Dockerfile
index 155624b..ab3562d 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -60,7 +60,7 @@ FROM api-runtime-base AS api
 
 EXPOSE 3000
 HEALTHCHECK --interval=15s --timeout=5s --start-period=10s --retries=5 \
-	CMD node -e "fetch('http://127.0.0.1:3000/waitqueue/ready').then((response) => process.exit(response.ok ? 0 : 1)).catch(() => process.exit(1))"
+	CMD node -e "fetch('http://127.0.0.1:3000/health/ready').then((response) => process.exit(response.ok ? 0 : 1)).catch(() => process.exit(1))"
 CMD ["node", "dist/app.js"]
 
 
diff --git a/README.md b/README.md
index 907a274..f0e15e2 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,6 @@
 
 一个轻量的 HTTP 回调任务队列与并发调度器。业务系统只提交 `taskId`；WaitQueue 负责排队、并发占位和周期检查，真正的任务仍由业务回调服务执行。
 
-![WaitQueue Control Room](docs/control-room.jpg)
-
 > 当前定位是内部服务与二次开发基础设施。项目内置可选 Bearer token、精确回调 origin 允许列表、请求大小限制和轻量限流；为兼容本地开发，token 与允许列表默认为空，共享或生产环境必须显式开启并放在带 TLS 和用户认证的网关之后。
 
 ## 它解决什么问题
@@ -16,7 +14,7 @@
 - Redis FIFO list 保存等待任务，hash/ZSET 保存 claim、退避与死信运行态；
 - Lua 脚本原子完成领取、租约恢复、失败转移和重放，不突破队列并发上限；
 - HTTP 回调驱动 `run`、`check`、`expire` 三类业务动作；
-- Web 控制台展示真实 waiting/running/capacity，并支持注册队列和提交任务；
+- Web 控制台展示真实 waiting/running/retrying/DLQ、等待年龄与回调/领取计数，并支持注册队列和提交任务；
 - 核心服务无任务载荷、图表、消息总线等额外依赖，保持小而明确。
 
 适合构建、导出、媒体处理、批量通知或第三方限流调用。不适合需要任务历史、优先级、复杂工作流或跨节点调度选主的系统。
@@ -73,8 +71,9 @@ docker compose up --build --detach --wait
 Compose 会按 `MySQL → 数据库迁移 → API → 控制台` 的顺序启动，并等待所有长期服务健康。随后访问：
 
 - 控制台：[http://127.0.0.1:3001](http://127.0.0.1:3001)
-- API 存活检查：[http://127.0.0.1:3000/waitqueue/health](http://127.0.0.1:3000/waitqueue/health)
-- API 就绪检查：[http://127.0.0.1:3000/waitqueue/ready](http://127.0.0.1:3000/waitqueue/ready)
+- API 存活检查：[http://127.0.0.1:3000/health/live](http://127.0.0.1:3000/health/live)
+- API 就绪检查：[http://127.0.0.1:3000/health/ready](http://127.0.0.1:3000/health/ready)
+- Prometheus 指标：[http://127.0.0.1:3000/metrics](http://127.0.0.1:3000/metrics)
 
 默认只监听 `127.0.0.1`，数据库凭据也只为隔离的本地体验准备。空 token 和空回调允许列表是兼容模式，不是生产安全默认值。共享或生产环境应先复制配置，替换两个数据库密码，用 `openssl rand -hex 32` 生成 API token，并按实际回调服务填写精确 origin：
 
@@ -330,7 +329,7 @@ docker compose config --quiet
 
 ## HTTP API
 
-所有路径都以 `/waitqueue` 开头，请求和响应使用 JSON。`WAITQUEUE_API_TOKEN` 非空时，`/admin/*`、`/queue/*` 和 `/scheduler/*` 必须带 `Authorization: Bearer <token>`；`GET /health`、`GET /ready` 与 `OPTIONS` 保持无鉴权，便于探针与预检。成功响应统一为：
+队列与管理 API 以 `/waitqueue` 开头；标准探针和抓取路径是 `/health/live`、`/health/ready` 与 `/metrics`。为兼容既有调用方，也保留对应的 `/waitqueue/*` 别名及旧 `/waitqueue/health`、`/waitqueue/ready` 路径。除 Prometheus 文本端点外，请求和响应使用 JSON。`WAITQUEUE_API_TOKEN` 非空时，管理、队列、调度和两个 metrics 路径都必须带 `Authorization: Bearer <token>`；健康检查与 `OPTIONS` 保持无鉴权，便于探针与预检。成功 JSON 响应统一为：
 
 ```json
 {
@@ -344,14 +343,14 @@ docker compose config --quiet
 
 ### 安全边界
 
-- API token 是服务间共享凭据，不是用户登录或细粒度授权。控制台的服务端代理只转发五个明确的 API，丢弃浏览器传入的 Authorization、Cookie 和转发头，再注入服务端 token。任何能访问控制台的人仍可借此操作队列，因此共享部署仍需认证网关。
+- API token 是服务间共享凭据，不是用户登录或细粒度授权。控制台的服务端代理只转发明确列入白名单的健康、概览、DLQ 与写入 API，丢弃浏览器传入的 Authorization、Cookie 和转发头，再注入服务端 token；metrics 刻意不经浏览器代理。任何能访问控制台的人仍可借代理操作队列，因此共享部署仍需认证网关。
 - 回调允许列表按 WHATWG URL 归一化后精确比较 origin，每次真正发送前会再校验。严格模式拒绝 loopback、link-local、私网与本地主机名；域名的所有 DNS 结果也会在连接前校验，实际 socket 固定使用已校验地址。回调不跟随 3xx。`HOOK_URL_ALLOW_PRIVATE=true` 仅用于显式列入的隔离本地演示服务。
 - 内存限流按 API 进程和直连 IP 生效，不信任 `X-Forwarded-For`。多副本或公网环境要由网关补充全局限流；对出站网络要求更强隔离时，应配置出站代理或网络策略。
 - 所有写请求（成功或失败）与鉴权/限流拒绝都会生成结构化审计日志；请求体、token、Cookie、完整回调 URL 和 taskId 不会进入审计字段。
 
 ### 健康检查
 
-`GET /waitqueue/health`
+`GET /health/live`（别名：`GET /waitqueue/health/live`；兼容旧路径：`GET /waitqueue/health`）
 
 ```json
 {
@@ -363,7 +362,7 @@ docker compose config --quiet
 
 这是廉价存活探测，只说明 HTTP 进程可响应，不访问外部依赖。
 
-`GET /waitqueue/ready`
+`GET /health/ready`（别名：`GET /waitqueue/health/ready`；兼容旧路径：`GET /waitqueue/ready`）
 
 就绪检查会并行执行 MySQL `SELECT 1` 与 Redis `PING`。两者都可用时返回 HTTP 200：
 
@@ -378,13 +377,13 @@ docker compose config --quiet
 }
 ```
 
-任一依赖不可用时返回 HTTP 503，响应只给出依赖状态，不暴露连接串或底层错误。容器编排应使用 `/ready`，进程存活探针应使用 `/health`。
+任一依赖不可用时返回 HTTP 503，响应只给出依赖状态，不暴露连接串或底层错误。新部署建议分别使用 `/health/ready` 与 `/health/live`；旧路径保持相同响应契约，不要求调用方同步升级。
 
 ### 控制台快照
 
 `GET /waitqueue/admin/overview`
 
-返回所有队列配置，以及通过一个 Redis pipeline 读取的实时 waiting/running 数量：
+返回所有队列配置、Redis 运行态 gauge，以及当前 API 进程内的回调和领取累计计数。Redis 读取按队列常数复杂度执行，并使用 1 秒短缓存与 in-flight 合并：
 
 ```json
 {
@@ -392,10 +391,19 @@ docker compose config --quiet
   "msg": "success",
   "data": {
     "generatedAt": "2026-08-10T08:00:00.000Z",
+    "metricsStartedAt": "2026-08-10T07:00:00.000Z",
     "summary": {
       "queueCount": 1,
       "waiting": 3,
       "running": 2,
+      "retrying": 1,
+      "deadLetters": 1,
+      "oldestWaitingAt": "2026-08-10T07:57:48.000Z",
+      "oldestWaitingAgeSeconds": 132,
+      "callbackSuccesses": 28,
+      "callbackFailures": 2,
+      "claims": 24,
+      "recovered": 1,
       "capacity": 5,
       "utilization": 40
     },
@@ -407,6 +415,12 @@ docker compose config --quiet
         "concurrency": 5,
         "waiting": 3,
         "running": 2,
+        "retrying": 1,
+        "deadLetters": 1,
+        "oldestWaitingAt": "2026-08-10T07:57:48.000Z",
+        "oldestWaitingAgeSeconds": 132,
+        "callbacks": { "success": 28, "failure": 2 },
+        "claims": { "claimed": 24, "recovered": 1 },
         "available": 3,
         "utilization": 40,
         "crontab": {
@@ -421,7 +435,79 @@ docker compose config --quiet
 }
 ```
 
-响应带 `Cache-Control: no-store`。这是最终一致的瞬时快照，不包含 taskId、任务历史、吞吐或成功率。
+响应带 `Cache-Control: no-store`。`retrying` 是延迟重试 ZSET 当前数量，`deadLetters` 是 DLQ 当前数量；空等待队列的 `oldestWaitingAt` 和 `oldestWaitingAgeSeconds` 都为 `null`，真实刚入队才会返回年龄 `0`。旧版裸 waiting 项在有界迁移首次触达前可能没有入队时间，此时也返回 `null`。callback/claim 是从 `metricsStartedAt` 起由当前进程累计的值，重启会归零并更新该时间；接口不返回 taskId、claim token、回调 URL 或任务历史。
+
+### Prometheus 抓取与告警
+
+`GET /metrics`（别名：`GET /waitqueue/metrics`）返回 Prometheus 0.0.4 文本格式并带 `Cache-Control: no-store`。配置了 `WAITQUEUE_API_TOKEN` 时，该端点与管理 API 一样需要 Bearer token：
+
+```bash
+curl --fail \
+  -H "Authorization: Bearer ${WAITQUEUE_API_TOKEN}" \
+  http://127.0.0.1:3000/metrics
+```
+
+指标固定为以下低基数维度：
+
+| 指标 | 类型 | Labels | 含义 |
+| --- | --- | --- | --- |
+| `waitqueue_queue_waiting_tasks` | gauge | `queue_id` | waiting FIFO（含迁移临时 FIFO）当前任务数 |
+| `waitqueue_queue_running_tasks` | gauge | `queue_id` | 当前占用运行槽位的任务数 |
+| `waitqueue_queue_retrying_tasks` | gauge | `queue_id` | 延迟重试 ZSET 当前任务数 |
+| `waitqueue_queue_dead_letter_tasks` | gauge | `queue_id` | DLQ 当前任务数 |
+| `waitqueue_queue_oldest_waiting_seconds` | gauge | `queue_id` | 最老 waiting 的年龄；空队列或未知时间不输出该 sample |
+| `waitqueue_callback_attempts_total` | counter | `queue_id`, `type`, `outcome` | `run/check/expire` 调用的成功或失败次数 |
+| `waitqueue_claim_transitions_total` | counter | `queue_id`, `outcome` | claimed、recovered、acknowledged 或 stale 状态迁移次数 |
+| `waitqueue_retry_transitions_total` | counter | `queue_id`, `outcome`, `reason` | scheduled、promoted、dead_lettered 次数及受控原因 |
+
+counter 存在 API 进程内，进程重启会归零，查询时应使用 `rate()` 或 `increase()`；多副本部署应保留 Prometheus 的 `instance` 维度后再聚合。gauge 来自 MySQL 队列目录和 Redis 实时状态，相同队列目录的并发请求会合并，并最多复用 1 秒。唯一队列维度是数据库生成的 `queue_id`，series 数量随队列数线性增长；用户可控的 `namespace` 只出现在 JSON 概览中，不进入 Prometheus。任何指标都不会把 `namespace`、`taskId`、claim token、`hookUrl`、原始异常或 HTTP 路径放入 label。
+
+Prometheus 抓取示例（token 文件只包含 token 本身，并应使用只读 Secret 挂载）：
+
+```yaml
+scrape_configs:
+  - job_name: waitqueue
+    metrics_path: /metrics
+    static_configs:
+      - targets: ["waitqueue-api:3000"]
+    authorization:
+      type: Bearer
+      credentials_file: /run/secrets/waitqueue_api_token
+```
+
+可从 DLQ、等待年龄和回调失败率三个方向建立最小告警集，阈值应按业务 SLO 调整：
+
+```yaml
+groups:
+  - name: waitqueue
+    rules:
+      - alert: WaitQueueDeadLettersPresent
+        expr: waitqueue_queue_dead_letter_tasks > 0
+        for: 5m
+        labels: { severity: warning }
+        annotations:
+          summary: "WaitQueue {{ $labels.queue_id }} has dead letters"
+
+      - alert: WaitQueueOldestTaskStalled
+        expr: waitqueue_queue_oldest_waiting_seconds > 300
+        for: 10m
+        labels: { severity: warning }
+        annotations:
+          summary: "WaitQueue waiting age exceeds five minutes"
+
+      - alert: WaitQueueCallbackFailureRatioHigh
+        expr: |
+          sum by (queue_id) (rate(waitqueue_callback_attempts_total{outcome="failure"}[5m]))
+          /
+          clamp_min(sum by (queue_id) (rate(waitqueue_callback_attempts_total[5m])), 0.001)
+          > 0.2
+        for: 10m
+        labels: { severity: critical }
+        annotations:
+          summary: "WaitQueue callback failure ratio exceeds 20%"
+```
+
+`/metrics` 依赖 MySQL 队列目录与 Redis；任一读取失败会让抓取返回非 2xx，使 Prometheus 的 `up` 变为 0。生产应同时告警 `up{job="waitqueue"} == 0`。不要为了抓取而把 API 端口直接暴露公网；应放在私有网络或受认证的监控入口后。
 
 ### 查询与重放死信
 
@@ -558,11 +644,12 @@ curl -X POST http://127.0.0.1:3000/waitqueue/admin/deadLetters/replay \
 控制台位于 `admin-dashboard/`，不是 mock 模板，也不是后端启动依赖。它提供：
 
 - 10 秒自动刷新，页面不可见时暂停轮询；
-- 队列总数、waiting、running、capacity 与利用率；
+- 基于 Ant Design 6 的紧凑工作台、浅/深主题和移动端布局；
+- 真实 waiting、running、retrying、DLQ、最老等待与容量利用率；
+- 当前进程 callback、claim、recovery 计数及起始时间；
 - 左侧实时队列目录、Workbench 摘要与并发槽位视图；
 - 队列搜索、并发占用和三类 cron 展示；
-- 注册/更新队列、向指定队列提交任务；
-- 浅色/深色主题与移动端布局；
+- 注册/更新队列、向指定队列提交任务、分页查询与 generation-safe DLQ 重放；
 - 离线、过期、加载和空数据状态。
 
 浏览器只请求当前控制台域名；Next.js 运行时服务端代理按白名单转发 API，并在配置时注入 `WAITQUEUE_API_TOKEN`，因此后端无需 CORS，token 也不进入浏览器 bundle。页面不伪造历史趋势、成功率或平均耗时，因为当前存储模型没有这些数据。
diff --git a/admin-dashboard/README.md b/admin-dashboard/README.md
index ef350cf..2497600 100644
--- a/admin-dashboard/README.md
+++ b/admin-dashboard/README.md
@@ -1,29 +1,35 @@
-# WaitQueue Control Room
+# WaitQueue Workbench
 
-waitqueue.js 的轻量实时运维控制台。它直接读取后端队列配置与 Redis 实时计数，不使用 mock 数据，也不展示当前系统无法证明的历史指标。
+waitqueue.js 的轻量实时运维控制台。它直接读取后端队列配置、Redis 运行快照和当前进程计数，不使用 mock 数据，也不展示当前系统无法证明的历史趋势。
 
-![Control Room](../docs/control-room.jpg)
+界面沿用 DWS Backend 的开发者工作台语言：数据目录、紧凑顶栏、黑色 Workbench 横幅、1px 深色描边和薄荷绿运行状态。交互控件使用 Ant Design 6，布局与视觉 token 保持项目自身风格，没有引入 Ant Design Pro、图表运行时或额外状态库。
 
-界面沿用 DWS Backend 的开发者工作台语言：浅色数据目录、紧凑顶栏、黑色 Workbench 横幅、1px 深色描边和薄荷绿运行状态。所有控件均由语义化 HTML 与局部 CSS 实现，不依赖 UI 组件库。
+## 页面怎么用
 
-<details>
-<summary>移动端预览</summary>
+顶部四个工作区分别承担不同职责：
 
-<p align="center"><img src="../docs/control-room-mobile.jpg" alt="WaitQueue 移动端控制台" width="390"></p>
+1. **总览**：先看 backlog、最老 waiting、Retry、DLQ、容量利用率，以及本进程 callback/claim/recovery 计数。计数的起始时间显示在卡片底部，服务重启后会归零。
+2. **队列**：在左侧目录搜索 namespace、回调 origin 或 queue ID；点选队列后查看运行槽位、Cron 和真实运行状态，也可提交 taskId 或更新配置。
+3. **死信**：选择队列后分页查看 DLQ；重放前必须二次确认，后端用 `entryId` 校验 generation，避免把已更新的旧记录误重放。
+4. **诊断**：分别查看进程 liveness、MySQL/Redis readiness，并核对 Prometheus 抓取契约。
 
-</details>
+页面每 10 秒自动刷新，浏览器切到后台时暂停；手动刷新会同时更新队列快照和健康状态。顶栏的 `ONLINE` 只有在 liveness 与 readiness 都成功时才出现，依赖异常会明确显示为 `DEGRADED`。桌面端使用表格与固定队列目录，窄屏切换为卡片、抽屉目录和底部视图导航；浅色/深色主题共用同一套 Ant Design token 状态。
 
-## 页面能力
+当前没有任务历史存储，因此页面不会展示吞吐趋势、成功率、平均耗时或任务明细。
 
-- 汇总队列数、waiting、running、capacity 和实时利用率；
-- 通过队列目录、Workbench 摘要和容量条表达调度状态；
-- 展示各队列回调、并发占用和 run/check/expire cron；
-- 搜索队列，注册或更新队列，提交 taskId；
-- 每 10 秒自动刷新，页面切到后台时暂停；
-- 支持浅色/深色主题、桌面与移动布局；
-- 处理 loading、empty、stale 和 offline 状态。
+## 最快启动（推荐）
 
-当前没有任务历史存储，因此页面不会展示吞吐趋势、成功率、平均耗时或任务明细。
+先在仓库根目录按 [根 README](../README.md) 创建 `.env`，然后运行：
+
+```bash
+docker compose up --build --detach --wait
+```
+
+访问 [http://127.0.0.1:3001](http://127.0.0.1:3001)。API 默认位于 [http://127.0.0.1:3000](http://127.0.0.1:3000)，Compose 会在服务就绪后才把控制台标记为可用。停止环境使用：
+
+```bash
+docker compose down
+```
 
 ## 本地开发
 
@@ -64,7 +70,7 @@ corepack pnpm --dir admin-dashboard start
 
 `dev` 和 `start` 都固定监听 3001，避免与后端默认的 3000 冲突。`WAITQUEUE_API_URL`、`WAITQUEUE_API_TOKEN` 和 `DASHBOARD_ALLOWED_HOSTS` 在服务启动后按请求读取，无需作为 Docker build argument；同一份构建产物可在不同环境复用。
 
-### Docker Compose
+### Docker Compose 运行模型
 
 仓库根目录的 Compose 会把控制台构建为 Next.js standalone 镜像，并在运行时将 API 代理指向容器网络中的 `http://api:3000`：
 
@@ -82,6 +88,8 @@ Browser
        └─ Next.js internal rewrite
             └─ /api/waitqueue/*（服务端白名单代理）
                  └─ WAITQUEUE_API_URL + 服务端 Bearer token
+                      ├─ GET  /waitqueue/health/live（控制台代理）
+                      ├─ GET  /waitqueue/health/ready（控制台代理）
                       ├─ GET  /waitqueue/admin/overview
                       ├─ GET  /waitqueue/admin/deadLetters
                       ├─ POST /waitqueue/admin/deadLetters/replay
@@ -89,24 +97,26 @@ Browser
                       └─ POST /waitqueue/scheduler/addTask
 ```
 
-代理先用 `DASHBOARD_ALLOWED_HOSTS` 精确校验请求 Host，再只接受上图五组 method/path；死信查询只重建 `queueId`、`offset`、`limit` 三个 query 参数，POST 只接受 JSON 且限制为 32 KiB。它不转发浏览器传入的 Authorization、Cookie、Host、任意 query 或转发头，禁止上游重定向，只复制必要的响应头。服务端变量不会进入浏览器 bundle；后端无需开启 CORS。
+代理先用 `DASHBOARD_ALLOWED_HOSTS` 精确校验请求 Host，再只接受上图列出的 method/path；死信查询只重建 `queueId`、`offset`、`limit` 三个 query 参数，POST 只接受 JSON 且限制为 32 KiB。它不转发浏览器传入的 Authorization、Cookie、Host、任意 query 或转发头，禁止上游重定向，只复制必要的响应头。服务端变量不会进入浏览器 bundle；后端无需开启 CORS。Prometheus `/metrics` 刻意不在浏览器代理白名单中，应由采集器直接携带后端 Bearer token 抓取；后端仍保留 `/waitqueue/metrics` 兼容别名。
 
 ## 技术与目录
 
-运行时只保留三个直接依赖：Next.js、React 和 React DOM。
+运行时直接依赖只有 Next.js、React、Ant Design、图标与其 SSR 样式运行时；没有 Ant Design Pro、Redux、Axios、Mock.js 或图表库。Pages Router 使用 `_document.tsx` 提取 Ant Design CSS-in-JS 样式，避免首屏闪烁。Next 16 的开发与生产构建显式使用 Webpack，以确保 Ant Design 与提取器共享同一个样式上下文；CI 会检查产物中存在真实 Ant 组件规则，而不只检查空的 style 标签。
 
 ```text
 admin-dashboard/
-├── src/pages/_app.tsx             # 全局样式与页面入口
+├── src/pages/_app.tsx             # 全局样式与主题入口
+├── src/pages/_document.tsx        # Ant Design 服务端样式提取
 ├── src/pages/index.tsx            # 数据读取、交互与控制室页面
 ├── src/pages/api/waitqueue/       # 运行时白名单代理与 token 注入
 ├── src/style/global.css           # 设计 token、主题与基础样式
 ├── src/style/dashboard.module.css # 工作台布局、状态组件和响应式样式
+├── src/theme/                      # Ant Design token 与浅/深主题状态
 ├── next.config.js                 # API 同源代理
 └── .env.example                   # 后端地址示例
 ```
 
-HTTP 使用浏览器原生 `fetch`，页面状态使用 React hooks；没有 Redux、Axios、Mock.js 或图表运行时。
+HTTP 使用浏览器原生 `fetch`，页面状态使用 React hooks。后端未持久化任务历史，所以页面明确不伪造吞吐趋势、历史成功率或平均耗时。
 
 ## 安全边界
 
diff --git a/admin-dashboard/package.json b/admin-dashboard/package.json
index 515e637..e5bfc3f 100644
--- a/admin-dashboard/package.json
+++ b/admin-dashboard/package.json
@@ -8,12 +8,15 @@
     "node": ">=20.9"
   },
   "scripts": {
-    "dev": "next dev -p 3001",
-    "build": "next build",
+    "dev": "next dev --webpack -p 3001",
+    "build": "next build --webpack",
     "start": "next start -p 3001",
     "typecheck": "next typegen && tsc --noEmit"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "2.1.2",
+    "@ant-design/icons": "6.3.2",
+    "antd": "6.6.0",
     "next": "16.3.0",
     "react": "19.2.0",
     "react-dom": "19.2.0"
diff --git a/admin-dashboard/pnpm-lock.yaml b/admin-dashboard/pnpm-lock.yaml
index 48bd84b..8ca10a6 100644
--- a/admin-dashboard/pnpm-lock.yaml
+++ b/admin-dashboard/pnpm-lock.yaml
@@ -5,6 +5,15 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@ant-design/cssinjs':
+    specifier: 2.1.2
+    version: 2.1.2(react-dom@19.2.0)(react@19.2.0)
+  '@ant-design/icons':
+    specifier: 6.3.2
+    version: 6.3.2(react-dom@19.2.0)(react@19.2.0)
+  antd:
+    specifier: 6.6.0
+    version: 6.6.0(react-dom@19.2.0)(react@19.2.0)
   next:
     specifier: 16.3.0
     version: 16.3.0(@types/node@20.19.43)(react-dom@19.2.0)(react@19.2.0)
@@ -31,6 +40,89 @@ devDependencies:
 
 packages:
 
+  /@ant-design/colors@8.0.1:
+    resolution: {integrity: sha512-foPVl0+SWIslGUtD/xBr1p9U4AKzPhNYEseXYRRo5QSzGACYZrQbe11AYJbYfAWnWSpGBx6JjBmSeugUsD9vqQ==}
+    dependencies:
+      '@ant-design/fast-color': 3.0.1
+    dev: false
+
+  /@ant-design/cssinjs-utils@2.1.2(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-5fTHQ158jJJ5dC/ECeyIdZUzKxE/mpEMRZxthyG1sw/AKRHKgJBg00Yi6ACVXgycdje7KahRNvNET/uBccwCnA==}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    dependencies:
+      '@ant-design/cssinjs': 2.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@babel/runtime': 7.29.7
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@ant-design/cssinjs@2.1.2(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-2Hy8BnCEH31xPeSLbhhB2ctCPXE2ZnASdi+KbSeS79BNbUhL9hAEe20SkUk+BR8aKTmqb6+FKFruk7w8z0VoRQ==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@emotion/hash': 0.8.0
+      '@emotion/unitless': 0.7.5
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      csstype: 3.2.3
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      stylis: 4.4.0
+    dev: false
+
+  /@ant-design/fast-color@3.0.1:
+    resolution: {integrity: sha512-esKJegpW4nckh0o6kV3Tkb7NPIZYbPnnFxmQDUmL08ukXZAvV85TZBr70eGuke/CIArLaP6aw8lt9KILjnWuOw==}
+    engines: {node: '>=8.x'}
+    dev: false
+
+  /@ant-design/icons-svg@4.5.0:
+    resolution: {integrity: sha512-1BTUFyKPTBZ53MuTP8s0k5SFEXL7o3VHEOwLgzaoWKwnBeqIcqUtVshc4SKzhI6uACfqhJqBwBUE9FsWR3uULA==}
+    dev: false
+
+  /@ant-design/icons@6.3.2(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-B6O5a5XJ4wjtNOfZejXYwHW5zvKV5gYkjGf11dHGLEbKn0ABDGndo41+gfIiXyTFhvESj4XTotuud33mUFid0g==}
+    engines: {node: '>=8'}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@ant-design/colors': 8.0.1
+      '@ant-design/icons-svg': 4.5.0
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@ant-design/react-slick@2.0.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-HMS9sRoEmZey8LsE/Yo6+klhlzU12PisjrVcydW3So7RdklyEd2qehyU6a7Yp+OYN72mgsYs3NFCyP2lCPFVqg==}
+    peerDependencies:
+      react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      '@babel/runtime': 7.29.7
+      clsx: 2.1.1
+      json2mq: 0.2.0
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      throttle-debounce: 5.0.2
+    dev: false
+
+  /@babel/runtime@7.29.7:
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@babel/runtime@8.0.0:
+    resolution: {integrity: sha512-sL6cvO2IfkSu/iU+zs2S/w01B7A8V7suXSIKEN4hPFFdZoiPGxrj5pAG0lCaqLWiEIrjKzdznIWuaLcxPR53qw==}
+    dev: false
+
   /@emnapi/runtime@1.11.3:
     resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
     requiresBuild: true
@@ -39,6 +131,14 @@ packages:
     dev: false
     optional: true
 
+  /@emotion/hash@0.8.0:
+    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
+    dev: false
+
+  /@emotion/unitless@0.7.5:
+    resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
+    dev: false
+
   /@img/colour@1.1.0:
     resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
@@ -368,6 +468,593 @@ packages:
     dev: false
     optional: true
 
+  /@rc-component/async-validator@6.0.0:
+    resolution: {integrity: sha512-D3AGQwdyE58gmvx6waVSXJ80JGO+IY5L2O8HDnSOex7JNlzB3GuN/4hyHNTdhy2qtOhkpbIjmeAN3tL993wKbA==}
+    engines: {node: '>=14.x'}
+    dependencies:
+      '@babel/runtime': 7.29.7
+    dev: false
+
+  /@rc-component/cascader@1.22.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-SffrA57aS9oub3VuI7ajPhJTPtaNxngSvtRhD40Rd8dwJ5vfWPSrVanWgeepdWFGBt7EHftIK5RUU0u3rCTwWw==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/select': 1.10.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/tree': 1.4.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/checkbox@2.0.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-3CXGPpAR9gsPKeO2N78HAPOzU30UdemD6HGJoWVJOpa6WleaGB5kzZj3v6bdTZab31YuWgY/RxV3VKPctn0DwQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/collapse@1.2.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-ZRYSKSS39qsFx93p26bde7JUZJshsUBEQRlRXPuJYlAiNX0vyYlF5TsAm8JZN3LcF8XvKikdzPbgAtXSbkLUkw==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/color-picker@3.1.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-OHaCHLHszCegdXmIq2ZRIZBN/EtpT6Wm8SG/gpzLATHbVKc/avvuKi+zlOuk05FTWvgaMmpxAko44uRJ3M+2pg==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@ant-design/fast-color': 3.0.1
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/context@2.0.2(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-uiGpAlblCNlziHPwj4S4Iy/oemeuz/hR03mbiEjTCXwsqOIN3BOzsRMyDwpyO5Fm0vIEEJRUf9ZtbRLbhksuTA==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/dialog@1.10.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-eDukNlz9vNszAGv7i3zKXdxEd3wgVmNxuJijYt8zvTh17QwTu8KK/bdURRd/lU4qaMzhO1HKKmMrwOnkaw0BvQ==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/portal': 2.2.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/drawer@1.4.2(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-1ib+fZEp6FBu+YvcIktm+nCQ+Q+qIpwpoaJH6opGr4ofh2QMq+qdr5DLC4oCf5qf3pcWX9lUWPYX652k4ini8Q==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/portal': 2.2.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/dropdown@1.0.3(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-YTST/N6kpqpDz3IMuM/PSSZnrDpSOA6dgHv12gPA90ZTSLv2CoqkZ0+9NtwTY6BeO7dstPblSic2QJg7dSFy/g==}
+    peerDependencies:
+      react: '>=16.11.0'
+      react-dom: '>=16.11.0'
+    dependencies:
+      '@rc-component/trigger': 3.10.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/form@1.8.6(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-1EXVsSKPZC6kGrIqxVck7kAWM6T65b6et/n5wIcyiaIa41VrDshD0nVLHoBDEIZr2ATQsOP6icb4XQkNFMLBAw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/async-validator': 6.0.0
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/image@1.10.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-BjeZCRQ+hw+4WAhvrw8rJvy5fckA2xpf/X2XQEOABUHvLTNB9inB98X3Mp54jYQ7g10DfWERQWHXeC4ylxp1Uw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/portal': 2.2.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/input-number@1.6.2(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-Gjcq7meZlCOiWN1t1xCC+7/s85humHVokTBI7PJgTfoyw5OWF74y3e6P8PHX104g9+b54jsodFIzyaj6p8LI9w==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/mini-decimal': 1.1.4
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/input@1.3.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-iFvTUT9W+JC/MSin2aGAk8NqsVlTzcExNC9DZariON1IWirju9NoNeEk47an4Q8iHazkoVI/y1LnDi88+CPcig==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@rc-component/resize-observer': 1.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/listy@1.2.3(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-IXiMjV5s0rczLBlfh7G5nB4M3365mrEeedjwKtf5I+Ns3PqRUsebR2h5u8CeFarsVfLUPC2I5p0h09TNoOWyvQ==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/portal': 2.2.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/resize-observer': 1.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/virtual-list': 1.5.1(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/mentions@1.11.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-IC2qXuEBMFHxPIXEFfYWj6Sr7UiDZnOqJHCYQBbwPzopBJOPZIR6mV9U4QH1bYQRlKYlYnIsajWDMgVGgWQyWQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/input': 1.3.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/menu': 1.4.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/trigger': 3.10.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/menu@1.4.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-3GsVRoQ4cnF/AoIQ4P+Z1haBfgfBPQfLT1RJY3Nu4DzOnheTslfCiGSPj7bv/cLj5sW5pHqN25dDXGP3JELAlQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/overflow': 1.0.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/trigger': 3.10.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/mini-decimal@1.1.4:
+    resolution: {integrity: sha512-xiuXcaCwyOWpD8a8scdExFl+bntNphAW8XeenL1ig2en0AAZY0Pcp4pC0dI22qJ+NvxKn9RoNIoRdqYU3BLH4w==}
+    engines: {node: '>=8.x'}
+    dependencies:
+      '@babel/runtime': 7.29.7
+    dev: false
+
+  /@rc-component/motion@1.3.3(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-Xh3IszxvlSv3/PLYFyC2UZi9LNB83yOnkB/LNmRzaypZLvkhqUIPS7MQpGZcCMWrNsXV2p6YTSWbSGvFpEle9A==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/mutate-observer@2.0.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-AyarjoLU5YlxuValRi+w8JRH2Z84TBbFO2RoGWz9d8bSu0FqT8DtugH3xC3BV7mUwlmROFauyWuXFuq4IFbH+w==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/notification@2.0.7(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-nqZzpf6BPdaj+3ILx7si79LLmqPKyUmQoXa+/9gg0SkH0v1DbD66oJgRMSBEVnd/zUT3D4gwxWIHUKebYf2ZXQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/overflow@1.0.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-syfmgAABaHCnCDzPwHZ/2tuvIcpOO3jefYZMmfkN+pmo8HKTzsfhS57vxo4ksPdN0By+uWVJhJWNFozNBxi2eA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@rc-component/resize-observer': 1.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/pagination@1.4.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-CW1g7P9V8u+e8JQdUsl2RWg+GCsoee0mtJjZUCCxn/vb3jzOwDKm6hAdwddHCVBfWJ58eGUBZz3IvnU8rRktjw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/picker@1.12.0(dayjs@1.11.21)(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-0FZGgDiDZFMm2hcfGv4jyjm7yWIj2MiwfeTzLL0vWkO+8cCSKdiM9XhWpkn1aAsoI2EwUy48Oz2cGfvL8ZKrfw==}
+    engines: {node: '>=12.x'}
+    peerDependencies:
+      date-fns: '>= 2.x'
+      dayjs: '>= 1.x'
+      luxon: '>= 3.x'
+      moment: '>= 2.x'
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    peerDependenciesMeta:
+      date-fns:
+        optional: true
+      dayjs:
+        optional: true
+      luxon:
+        optional: true
+      moment:
+        optional: true
+    dependencies:
+      '@rc-component/overflow': 1.0.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/resize-observer': 1.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/trigger': 3.10.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      dayjs: 1.11.21
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/portal@2.2.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-ck+r1kW/JSv0wxPji3KN2ss9K6Z0qqwusw/mf/0JobXhZ8hC2ejZwCJObW/SvDi0uhA0VzmCnx0CaCci95tcmA==}
+    engines: {node: '>=12.x'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/progress@1.0.2(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-WZUnH9eGxH1+xodZKqdrHke59uyGZSWgj5HBM5Kwk5BrTMuAORO7VJ2IP5Qbm9aH3n9x3IcesqHHR0NWPBC7fQ==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/qrcode@2.0.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-aAv3QhPP1xyafuTZOxub6a54pCeBnN3IwQkpETrBtthq4BL5IgxnCbuoBWPDpdLw1y1j6BgBUCAKV92+yX06Dw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.29.7
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/rate@1.0.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-bkXxeBqDpl5IOC7yL7GcSYjQx9G8H+6kLYQnNZWeBYq2OYIv1MONd6mqKTjnnJYpV0cQIU2z3atdW0j1kttpTw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/resize-observer@1.1.2(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-t/Bb0W8uvL4PYKAB3YcChC+DlHh0Wt5kM7q/J+0qpVEUMLe7Hk5zuvc9km0hMnTFPSx5Z7Wu/fzCLN6erVLE8Q==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/segmented@1.3.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-5J/bJ01mbDnoA6P/FW8SxUvKn+OgUSTZJPzCNnTBntG50tzoP7DydGhqxp7ggZXZls7me3mc2EQDXakU3iTVFg==}
+    peerDependencies:
+      react: '>=16.0.0'
+      react-dom: '>=16.0.0'
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/select@1.10.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-u/3yuF2kEXvTJXPy3P7qkVBkGGZcQo+m1uTuQqJa6qCnwdmDoEn1Rs3zTTi6y/RsLGiQGM0drPN5c/RfflCnow==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@rc-component/overflow': 1.0.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/trigger': 3.10.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/virtual-list': 1.5.1(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/slider@1.1.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-LSzgWGYDgeCDgR4r1XlU29gbYws6HpLnvJd/uMhLeW/vQgxldeR+Wb4uzHDCHiYEbr1bnEHWdjkPxjJRHxuiig==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/steps@1.2.2(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-/yVIZ00gDYYPHSY0JP+M+s3ZvuXLu2f9rEjQqiUDs7EcYsUYrpJ/1bLj9aI9R7MBR3fu/NGh6RM9u2qGfqp+Nw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/switch@1.0.3(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-Jgi+EbOBquje/XNdofr7xbJQZPYJP+BlPfR0h+WN4zFkdtB2EWqEfvkXJWeipflwjWip0/17rNbxEAqs8hVHfw==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/table@1.11.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-OWdS6DMmeWb7bJBGqPxYZpQbzBlBiXZUu2sqo6Ii7Sjs9GeK1IsrXrWk26SL2c6KEseabswdxrRj7WUm9LdECw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/context': 2.0.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/resize-observer': 1.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/virtual-list': 1.5.1(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/tabs@1.12.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-XL7Kqy5fnUE2WTlO1/fCGrrfNlGFebdr7JseGkEIjzcVMAtIFQJ8sqCSOmxcXstjU6fonD/4rnhZHxj7sDTajQ==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/dropdown': 1.0.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/menu': 1.4.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/resize-observer': 1.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/tooltip@1.5.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-agQ/+mBqrEQfTX4D3KhQ7j+ZbX4/VHjoJ7Noa2wIdZ1/FbQTOd7Sn92rp+jtCoqAVTLUgSOydePIgZ204gi2EQ==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/trigger': 3.10.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/tour@2.4.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-aui4r4TqmTzwaBgcQxHYep8kM8PTjZFufjokObpy35KfFeZ0k9ArquWFZqegQlH24P14t+F0qO0mGTgzlav1yg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/portal': 2.2.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/trigger': 3.10.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/tree-select@1.16.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-a1Oi6EJhqAhdOxxupdJi6fP0RPHMKn5TcfkX2+llaQ4lF4nwfH7b6SCHcnsybaa2s+pk1yZYwVyeOYkDnEBRdg==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@rc-component/select': 1.10.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/tree': 1.4.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/tree@1.4.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-dGsJGDJQedA0BqqVgj3F8BvHXTSZijyhTXdbAdkcx8lynzZkty/CV3Z3LOm/fxz+BCfl3dfGiAQpb7Q5XNvl0Q==}
+    engines: {node: '>=10.x'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/virtual-list': 1.5.1(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/trigger@3.10.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-mXlDN0IXdtV8Yqqm8195ECCyrbmfvvfKvwVvSlH0+qvKD6BUF8gRhEjSy0FOcD1+CcDRHgTiX99LoxfQrmh3Cw==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/portal': 2.2.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/resize-observer': 1.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/upload@1.1.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-GvYWSKeaJTOxxC5p6+nOSadzfvXA1h8C/iHFPFZX+szH3JUXrvs+DLiW8YUTBgvMh8m63mJeHrlYlJzAlg+pDA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
+  /@rc-component/util@1.12.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-AEjPL8JVdohIITaiXokyjL9WQ6tKWWjAYK9QU16tGNE9JaQABBQy+hA4H2Lup5MgXy9yY3iLrbZJheuU13hTdQ==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      is-mobile: 5.0.0
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      react-is: 19.2.8
+    dev: false
+
+  /@rc-component/virtual-list@1.5.1(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-boqHxdtyWC88u8quYgEO49bcBy5fzRiOcnBge+N4nLzs2k8hUQ/yw7JE9dM6yCBE4jSm5YSHVCVMS+suBuJGKA==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@babel/runtime': 8.0.0
+      '@rc-component/resize-observer': 1.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+    dev: false
+
   /@swc/helpers@0.5.15:
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
     dependencies:
@@ -393,6 +1080,68 @@ packages:
       csstype: 3.2.3
     dev: true
 
+  /antd@6.6.0(react-dom@19.2.0)(react@19.2.0):
+    resolution: {integrity: sha512-UDwWIbpmrCHB9ZQ+bPh4vQfB6DTI2ulIyoQ0Tc9xxalFblttiNGHl3ySBD9SyV/8+gUjFzfSx1+iU1Fog2i46w==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@ant-design/colors': 8.0.1
+      '@ant-design/cssinjs': 2.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@ant-design/cssinjs-utils': 2.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@ant-design/fast-color': 3.0.1
+      '@ant-design/icons': 6.3.2(react-dom@19.2.0)(react@19.2.0)
+      '@ant-design/react-slick': 2.0.0(react-dom@19.2.0)(react@19.2.0)
+      '@babel/runtime': 7.29.7
+      '@rc-component/cascader': 1.22.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/checkbox': 2.0.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/collapse': 1.2.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/color-picker': 3.1.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/dialog': 1.10.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/drawer': 1.4.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/dropdown': 1.0.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/form': 1.8.6(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/image': 1.10.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/input': 1.3.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/input-number': 1.6.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/listy': 1.2.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/mentions': 1.11.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/menu': 1.4.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/motion': 1.3.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/mutate-observer': 2.0.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/notification': 2.0.7(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/pagination': 1.4.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/picker': 1.12.0(dayjs@1.11.21)(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/progress': 1.0.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/qrcode': 2.0.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/rate': 1.0.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/resize-observer': 1.1.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/segmented': 1.3.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/select': 1.10.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/slider': 1.1.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/steps': 1.2.2(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/switch': 1.0.3(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/table': 1.11.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/tabs': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/tooltip': 1.5.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/tour': 2.4.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/tree': 1.4.0(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/tree-select': 1.16.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/trigger': 3.10.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/upload': 1.1.1(react-dom@19.2.0)(react@19.2.0)
+      '@rc-component/util': 1.12.0(react-dom@19.2.0)(react@19.2.0)
+      clsx: 2.1.1
+      dayjs: 1.11.21
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      scroll-into-view-if-needed: 3.1.0
+      throttle-debounce: 5.0.2
+    transitivePeerDependencies:
+      - date-fns
+      - luxon
+      - moment
+    dev: false
+
   /baseline-browser-mapping@2.11.13:
     resolution: {integrity: sha512-k9HNuUVMlqVjQ9UHzfPjIqiDbWw7WqT1AoT7GL8VwvF3r0ZfArtgiSPAlmupyNquNgOJHTuH4CKYf8ttMTWBTQ==}
     engines: {node: '>=6.0.0'}
@@ -407,9 +1156,21 @@ packages:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
     dev: false
 
+  /clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /compute-scroll-into-view@3.1.1:
+    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
+    dev: false
+
   /csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
-    dev: true
+
+  /dayjs@1.11.21:
+    resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
+    dev: false
 
   /detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
@@ -418,6 +1179,16 @@ packages:
     dev: false
     optional: true
 
+  /is-mobile@5.0.0:
+    resolution: {integrity: sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ==}
+    dev: false
+
+  /json2mq@0.2.0:
+    resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==}
+    dependencies:
+      string-convert: 0.2.1
+    dev: false
+
   /nanoid@3.3.18:
     resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -491,6 +1262,10 @@ packages:
       scheduler: 0.27.0
     dev: false
 
+  /react-is@19.2.8:
+    resolution: {integrity: sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==}
+    dev: false
+
   /react@19.2.0:
     resolution: {integrity: sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==}
     engines: {node: '>=0.10.0'}
@@ -500,6 +1275,12 @@ packages:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
     dev: false
 
+  /scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+    dependencies:
+      compute-scroll-into-view: 3.1.1
+    dev: false
+
   /semver@7.8.5:
     resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
     engines: {node: '>=10'}
@@ -556,6 +1337,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /string-convert@0.2.1:
+    resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==}
+    dev: false
+
   /styled-jsx@5.1.6(react@19.2.0):
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -573,6 +1358,15 @@ packages:
       react: 19.2.0
     dev: false
 
+  /stylis@4.4.0:
+    resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
+    dev: false
+
+  /throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+    dev: false
+
   /tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
     dev: false
diff --git a/admin-dashboard/src/pages/_app.tsx b/admin-dashboard/src/pages/_app.tsx
index 057fa5c..2b98b9f 100644
--- a/admin-dashboard/src/pages/_app.tsx
+++ b/admin-dashboard/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import type { AppProps } from 'next/app';
 import '../style/global.css';
+import { ControlRoomTheme } from '../theme/control-room-theme';
 
 export default function WaitQueueApp({ Component, pageProps }: AppProps) {
   return (
@@ -9,7 +10,9 @@ export default function WaitQueueApp({ Component, pageProps }: AppProps) {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#17181b" />
       </Head>
-      <Component {...pageProps} />
+      <ControlRoomTheme>
+        <Component {...pageProps} />
+      </ControlRoomTheme>
     </>
   );
 }
diff --git a/admin-dashboard/src/pages/_document.tsx b/admin-dashboard/src/pages/_document.tsx
new file mode 100644
index 0000000..d74e305
--- /dev/null
+++ b/admin-dashboard/src/pages/_document.tsx
@@ -0,0 +1,42 @@
+import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import Document, { Head, Html, Main, NextScript, type DocumentContext } from 'next/document';
+
+export default class WaitQueueDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const cache = createCache();
+    const originalRenderPage = ctx.renderPage;
+
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => (props) => (
+          <StyleProvider cache={cache}>
+            <App {...props} />
+          </StyleProvider>
+        ),
+      });
+
+    const initialProps = await Document.getInitialProps(ctx);
+    const antStyles = extractStyle(cache, true);
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <style id="antd-ssr" dangerouslySetInnerHTML={{ __html: antStyles }} />
+        </>
+      ),
+    };
+  }
+
+  render() {
+    return (
+      <Html lang="zh-CN">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
diff --git a/admin-dashboard/src/pages/api/waitqueue/[...path].ts b/admin-dashboard/src/pages/api/waitqueue/[...path].ts
index 4f21c75..b873ace 100644
--- a/admin-dashboard/src/pages/api/waitqueue/[...path].ts
+++ b/admin-dashboard/src/pages/api/waitqueue/[...path].ts
@@ -6,6 +6,8 @@ const PROXY_TIMEOUT_MS = 10_000;
 const JSON_CONTENT_TYPE = 'application/json';
 
 const ALLOWED_ROUTES = new Map<string, 'GET' | 'POST'>([
+  ['health/live', 'GET'],
+  ['health/ready', 'GET'],
   ['admin/overview', 'GET'],
   ['admin/deadLetters', 'GET'],
   ['admin/deadLetters/replay', 'POST'],
diff --git a/admin-dashboard/src/pages/index.tsx b/admin-dashboard/src/pages/index.tsx
index d13713a..646c0fb 100644
--- a/admin-dashboard/src/pages/index.tsx
+++ b/admin-dashboard/src/pages/index.tsx
@@ -1,8 +1,66 @@
+import {
+  Alert,
+  App as AntApp,
+  Badge,
+  Button,
+  Card,
+  Drawer,
+  Empty,
+  Form,
+  Input,
+  InputNumber,
+  Layout,
+  Menu,
+  Modal,
+  Pagination,
+  Progress,
+  Segmented,
+  Select,
+  Skeleton,
+  Space,
+  Statistic,
+  Table,
+  Tag,
+  Tooltip,
+  type MenuProps,
+  type TableColumnsType,
+} from 'antd';
+import {
+  AppstoreOutlined,
+  BarsOutlined,
+  CheckCircleOutlined,
+  CloudServerOutlined,
+  CodeOutlined,
+  DashboardOutlined,
+  DatabaseOutlined,
+  FieldTimeOutlined,
+  MenuOutlined,
+  MoonOutlined,
+  PlusOutlined,
+  RedoOutlined,
+  ReloadOutlined,
+  SafetyCertificateOutlined,
+  SearchOutlined,
+  SendOutlined,
+  SettingOutlined,
+  SunOutlined,
+  ThunderboltOutlined,
+  WarningOutlined,
+} from '@ant-design/icons';
 import type { NextPage } from 'next';
 import Head from 'next/head';
-import { ChangeEvent, FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useColorMode } from '../theme/control-room-theme';
 import styles from '../style/dashboard.module.css';
 
+const { Header, Sider, Content } = Layout;
+const REQUEST_TIMEOUT_MS = 10_000;
+const REFRESH_INTERVAL_MS = 10_000;
+const DEAD_LETTER_PAGE_SIZE = 20;
+
+type ViewKey = 'overview' | 'queues' | 'deadLetters' | 'diagnostics';
+type ServiceState = 'SYNCING' | 'ONLINE' | 'DEGRADED' | 'STALE' | 'OFFLINE';
+
 interface QueueCrontab {
   run: string;
   check: string;
@@ -18,63 +76,97 @@ interface QueueOverviewItem {
   running: number;
   available: number;
   utilization: number;
+  retrying?: number;
+  deadLetters?: number;
+  oldestWaitingAt?: string | null;
+  oldestWaitingAgeSeconds?: number | null;
+  callbacks?: { success: number; failure: number };
+  claims?: { claimed: number; recovered: number };
   crontab: QueueCrontab;
   updatedAt: string;
 }
 
 interface QueueOverview {
   generatedAt: string;
+  metricsStartedAt?: string;
   summary: {
     queueCount: number;
     waiting: number;
     running: number;
     capacity: number;
     utilization: number;
+    retrying?: number;
+    deadLetters?: number;
+    oldestWaitingAt?: string | null;
+    oldestWaitingAgeSeconds?: number | null;
+    callbackSuccesses?: number;
+    callbackFailures?: number;
+    claims?: number;
+    recovered?: number;
+    deadLettered?: number;
   };
   queues: QueueOverviewItem[];
 }
 
+interface HealthPayload {
+  status: string;
+  dependencies?: {
+    mysql: 'ok' | 'unavailable';
+    redis: 'ok' | 'unavailable';
+  };
+}
+
+interface HealthState {
+  live: boolean | null;
+  ready: boolean | null;
+  dependencies: HealthPayload['dependencies'];
+  checkedAt?: string;
+}
+
+interface DeadLetterItem {
+  entryId: string;
+  taskId: string;
+  retryCount: number;
+  failedAt: string;
+  reason: 'callback_failed' | 'lease_expired';
+}
+
+interface DeadLetterPage {
+  total: number;
+  offset: number;
+  limit: number;
+  items: DeadLetterItem[];
+}
+
 interface ApiEnvelope<T> {
   code: number;
   msg: string;
   data: T;
 }
 
-interface QueueDraft {
+interface QueueFormValues {
   namespace: string;
   hookUrl: string;
-  concurrency: string;
+  concurrency: number;
   run: string;
   check: string;
   expire: string;
 }
 
-interface TaskDraft {
-  queueId: string;
+interface TaskFormValues {
+  queueId: number;
   taskId: string;
 }
 
-interface ToastState {
-  id: number;
-  tone: 'success' | 'error';
-  text: string;
-}
-
-const EMPTY_QUEUE: QueueDraft = {
+const DEFAULT_QUEUE_VALUES: QueueFormValues = {
   namespace: '',
   hookUrl: '',
-  concurrency: '5',
+  concurrency: 5,
   run: '*/5 * * * * *',
   check: '*/10 * * * * *',
   expire: '0 */5 * * * *',
 };
 
-const REQUEST_TIMEOUT_MS = 10_000;
-
-function Glyph({ children }: { children: React.ReactNode }) {
-  return <span className={styles.iconGlyph} aria-hidden="true">{children}</span>;
-}
-
 async function fetchWithTimeout(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
   const controller = new AbortController();
   const timeout = window.setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
@@ -101,6 +193,14 @@ async function decodeResponse<T>(response: Response): Promise<T> {
   return payload.data;
 }
 
+async function getJson<T>(path: string): Promise<T> {
+  const response = await fetchWithTimeout(path, {
+    headers: { accept: 'application/json' },
+    cache: 'no-store',
+  });
+  return decodeResponse<T>(response);
+}
+
 async function postJson<T>(path: string, body: unknown): Promise<T> {
   const response = await fetchWithTimeout(path, {
     method: 'POST',
@@ -110,10 +210,32 @@ async function postJson<T>(path: string, body: unknown): Promise<T> {
   return decodeResponse<T>(response);
 }
 
-function formatTimestamp(value?: string): string {
-  if (!value) return '尚未同步';
+async function probeHealth(path: string): Promise<{ ok: boolean; data?: HealthPayload }> {
+  const response = await fetchWithTimeout(path, {
+    headers: { accept: 'application/json' },
+    cache: 'no-store',
+  });
+  let payload: ApiEnvelope<HealthPayload> | undefined;
+  try {
+    payload = (await response.json()) as ApiEnvelope<HealthPayload>;
+  } catch {
+    return { ok: false };
+  }
+  return { ok: response.ok && payload.code === 0, data: payload.data };
+}
+
+function safeNumber(value: number | undefined): number | undefined {
+  return Number.isFinite(value) && (value as number) >= 0 ? value : undefined;
+}
+
+function metric(value: number | undefined): number | '—' {
+  return safeNumber(value) ?? '—';
+}
+
+function formatTimestamp(value?: string | null): string {
+  if (!value) return '—';
   const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return '时间未知';
+  if (Number.isNaN(date.getTime())) return '—';
   return new Intl.DateTimeFormat('zh-CN', {
     month: '2-digit',
     day: '2-digit',
@@ -124,282 +246,319 @@ function formatTimestamp(value?: string): string {
   }).format(date);
 }
 
-function displayUrl(value: string): string {
+function formatAge(value: number | null | undefined, waiting = 0): string {
+  if (value === undefined) return '—';
+  if (value === null) return waiting > 0 ? '时间未知' : '无等待';
+  if (!Number.isFinite(value) || value < 0) return '—';
+  if (value < 60) return value < 1 ? '刚刚' : `${Math.floor(value)} 秒`;
+  if (value < 3600) return `${Math.floor(value / 60)} 分 ${Math.floor(value % 60)} 秒`;
+  if (value < 86_400) return `${Math.floor(value / 3600)} 小时 ${Math.floor((value % 3600) / 60)} 分`;
+  return `${Math.floor(value / 86_400)} 天 ${Math.floor((value % 86_400) / 3600)} 小时`;
+}
+
+function displayHook(value: string): string {
   try {
     const url = new URL(value);
-    url.username = '';
-    url.password = '';
-    url.search = '';
-    url.hash = '';
-    return url.toString();
+    return `${url.origin}${url.pathname === '/' ? '' : '/…'}`;
   } catch {
-    return value;
+    return 'invalid hook origin';
   }
 }
 
-function queueStatus(queue: QueueOverviewItem): { label: string; tone: string } {
-  if (queue.waiting > 0 && queue.running >= queue.concurrency) {
-    return { label: '排队中', tone: styles.statusWarning };
-  }
-  if (queue.waiting > 0) return { label: '有积压', tone: styles.statusWarning };
-  if (queue.running > 0) return { label: '运行中', tone: styles.statusActive };
-  return { label: '空闲', tone: styles.statusIdle };
+function queueState(queue: QueueOverviewItem): { label: string; color: 'success' | 'warning' | 'error' | 'default' } {
+  if ((queue.deadLetters ?? 0) > 0) return { label: '需处理', color: 'error' };
+  if (queue.waiting > 0 && queue.running >= queue.concurrency) return { label: '容量已满', color: 'warning' };
+  if (queue.waiting > 0 || (queue.retrying ?? 0) > 0) return { label: '有积压', color: 'warning' };
+  if (queue.running > 0) return { label: '运行中', color: 'success' };
+  return { label: '空闲', color: 'default' };
 }
 
-function CapacityTrack({ queue }: { queue: QueueOverviewItem }) {
-  const segments = Math.min(Math.max(queue.concurrency, 1), 12);
-  const active =
-    queue.running === 0
-      ? 0
-      : Math.max(1, Math.min(segments, Math.ceil((queue.running / queue.concurrency) * segments)));
+function serviceState(overview: QueueOverview | null, error: string, health: HealthState, loading: boolean): ServiceState {
+  if (loading && !overview) return 'SYNCING';
+  if (!overview) return 'OFFLINE';
+  if (error) return 'STALE';
+  if (health.live === false) return 'OFFLINE';
+  if (health.ready === false) return 'DEGRADED';
+  if (health.live === true && health.ready === true) return 'ONLINE';
+  return 'SYNCING';
+}
 
-  return (
-    <div className={styles.capacityTrack} aria-label={`运行 ${queue.running}，并发上限 ${queue.concurrency}`}>
-      {Array.from({ length: segments }, (_, index) => (
-        <span key={index} className={index < active ? styles.capacityActive : styles.capacitySlot} />
-      ))}
-    </div>
-  );
+function stateTag(state: ServiceState) {
+  const map: Record<ServiceState, { color: string; icon: React.ReactNode; text: string }> = {
+    SYNCING: { color: 'processing', icon: <ReloadOutlined spin />, text: 'SYNCING' },
+    ONLINE: { color: 'success', icon: <CheckCircleOutlined />, text: 'ONLINE' },
+    DEGRADED: { color: 'warning', icon: <WarningOutlined />, text: 'DEGRADED' },
+    STALE: { color: 'warning', icon: <FieldTimeOutlined />, text: 'STALE' },
+    OFFLINE: { color: 'error', icon: <WarningOutlined />, text: 'OFFLINE' },
+  };
+  const item = map[state];
+  return <Tag color={item.color} icon={item.icon}>{item.text}</Tag>;
 }
 
-function Dialog({
-  title,
-  eyebrow,
-  onClose,
-  children,
+function SidebarCatalog({
+  overview,
+  queues,
+  activeQueueId,
+  query,
+  onQuery,
+  onSelect,
+  onCreate,
 }: {
-  title: string;
-  eyebrow: string;
-  onClose: () => void;
-  children: React.ReactNode;
+  overview: QueueOverview | null;
+  queues: QueueOverviewItem[];
+  activeQueueId: number | null;
+  query: string;
+  onQuery: (value: string) => void;
+  onSelect: (queueId: number) => void;
+  onCreate: () => void;
 }) {
-  const dialogRef = useRef<HTMLElement>(null);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-
-  useEffect(() => {
-    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    const background = document.querySelector<HTMLElement>('[data-dashboard-shell]');
-    background?.setAttribute('inert', '');
-    background?.setAttribute('aria-hidden', 'true');
-
-    const dialog = dialogRef.current;
-    const preferredFocus =
-      dialog?.querySelector<HTMLElement>('[data-dialog-autofocus]') ??
-      dialog?.querySelector<HTMLElement>('input:not([disabled]), select:not([disabled])') ??
-      dialog?.querySelector<HTMLElement>('button:not([disabled])');
-    preferredFocus?.focus();
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onCloseRef.current();
-        return;
-      }
-      if (event.key !== 'Tab' || !dialog) return;
-
-      const focusable = Array.from(
-        dialog.querySelectorAll<HTMLElement>(
-          'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-        )
-      );
-      if (focusable.length === 0) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      if (event.shiftKey && document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      background?.removeAttribute('inert');
-      background?.removeAttribute('aria-hidden');
-      previousFocus?.focus();
-    };
-  }, []);
-
   return (
-    <div
-      className={styles.dialogBackdrop}
-      role="presentation"
-      onMouseDown={(event) => event.currentTarget === event.target && onClose()}
-    >
-      <section ref={dialogRef} className={styles.dialog} role="dialog" aria-modal="true" aria-labelledby="dialog-title">
-        <div className={styles.dialogHeader}>
-          <div>
-            <span className={styles.eyebrow}>{eyebrow}</span>
-            <h2 id="dialog-title">{title}</h2>
-          </div>
-          <button className={styles.iconButton} type="button" onClick={onClose} aria-label="关闭">
-            <Glyph>×</Glyph>
-          </button>
-        </div>
-        {children}
-      </section>
+    <div className={styles.catalog}>
+      <div className={styles.catalogNumbers} aria-label="队列实时摘要">
+        <span><b>{metric(overview?.summary.queueCount)}</b> 队列</span>
+        <span><b>{metric(overview?.summary.running)}</b> 运行</span>
+        <span><b>{metric(overview?.summary.waiting)}</b> 等待</span>
+      </div>
+      <div className={styles.catalogSearch}>
+        <Input
+          allowClear
+          prefix={<SearchOutlined />}
+          value={query}
+          onChange={(event) => onQuery(event.target.value)}
+          placeholder="搜索 namespace / origin / ID"
+          aria-label="搜索队列"
+        />
+      </div>
+      <button className={styles.catalogTitle} type="button" onClick={() => onQuery('')}>
+        <AppstoreOutlined />
+        <span><strong>完整目录</strong><small>REALTIME QUEUE REGISTRY</small></span>
+        <b>{overview?.summary.queueCount ?? 0}</b>
+      </button>
+      <div className={styles.catalogLabel}>
+        <span>SCHEDULER QUEUES</span>
+        <b>{queues.length}</b>
+      </div>
+      <nav className={styles.queueNav} aria-label="已注册队列">
+        {queues.map((queue) => {
+          const selected = queue.queueId === activeQueueId;
+          const state = queueState(queue);
+          return (
+            <button
+              key={queue.queueId}
+              type="button"
+              className={selected ? styles.queueNavActive : undefined}
+              onClick={() => onSelect(queue.queueId)}
+              aria-current={selected ? 'location' : undefined}
+            >
+              <span className={styles.queueGlyph}><CloudServerOutlined /></span>
+              <span>
+                <strong title={queue.namespace}>{queue.namespace}</strong>
+                <small>Q-{String(queue.queueId).padStart(3, '0')} · {state.label}</small>
+              </span>
+              <Badge count={queue.waiting} showZero overflowCount={99999} color={queue.waiting > 0 ? '#d46b08' : '#777'} />
+            </button>
+          );
+        })}
+        {queues.length === 0 && <p className={styles.catalogEmpty}>{query ? '没有匹配队列' : '暂无队列'}</p>}
+      </nav>
+      <div className={styles.catalogFooter}>
+        <Button type="primary" icon={<PlusOutlined />} block onClick={onCreate}>注册队列</Button>
+        <small>自动刷新 · 10 秒</small>
+      </div>
     </div>
   );
 }
 
 const Dashboard: NextPage = () => {
+  const { message, modal } = AntApp.useApp();
+  const { mode, toggleMode } = useColorMode();
   const [overview, setOverview] = useState<QueueOverview | null>(null);
+  const [health, setHealth] = useState<HealthState>({ live: null, ready: null, dependencies: undefined });
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState('');
   const [query, setQuery] = useState('');
   const [activeQueueId, setActiveQueueId] = useState<number | null>(null);
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-  const [queueDialogOpen, setQueueDialogOpen] = useState(false);
+  const [view, setView] = useState<ViewKey>('overview');
+  const [mobileCatalogOpen, setMobileCatalogOpen] = useState(false);
+  const [queueModalOpen, setQueueModalOpen] = useState(false);
   const [editingQueueId, setEditingQueueId] = useState<number | null>(null);
-  const [taskDialogOpen, setTaskDialogOpen] = useState(false);
-  const [queueDraft, setQueueDraft] = useState<QueueDraft>(EMPTY_QUEUE);
-  const [taskDraft, setTaskDraft] = useState<TaskDraft>({ queueId: '', taskId: '' });
+  const [taskModalOpen, setTaskModalOpen] = useState(false);
   const [submitting, setSubmitting] = useState(false);
-  const [toast, setToast] = useState<ToastState | null>(null);
-  const requestInFlight = useRef(false);
-  const toastSequence = useRef(0);
-
-  const notify = useCallback((tone: ToastState['tone'], text: string) => {
-    toastSequence.current += 1;
-    setToast({ id: toastSequence.current, tone, text });
-  }, []);
-
-  useEffect(() => {
-    if (!toast) return undefined;
-    const timer = window.setTimeout(() => {
-      setToast((current) => (current?.id === toast.id ? null : current));
-    }, 3200);
-    return () => window.clearTimeout(timer);
-  }, [toast]);
+  const [deadLetters, setDeadLetters] = useState<DeadLetterPage | null>(null);
+  const [deadLetterQueueId, setDeadLetterQueueId] = useState<number | null>(null);
+  const [deadLetterLoading, setDeadLetterLoading] = useState(false);
+  const [deadLetterPage, setDeadLetterPage] = useState(1);
+  const overviewRequest = useRef(false);
+  const healthRequest = useRef(false);
+  const deadLetterRequest = useRef(0);
+  const [queueForm] = Form.useForm<QueueFormValues>();
+  const [taskForm] = Form.useForm<TaskFormValues>();
 
   const loadOverview = useCallback(async (manual = false) => {
-    if (requestInFlight.current) return;
-    requestInFlight.current = true;
+    if (overviewRequest.current) return;
+    overviewRequest.current = true;
     if (manual) setRefreshing(true);
     try {
-      const response = await fetchWithTimeout('/waitqueue/admin/overview', {
-        headers: { accept: 'application/json' },
-        cache: 'no-store',
-      });
-      const data = await decodeResponse<QueueOverview>(response);
+      const data = await getJson<QueueOverview>('/waitqueue/admin/overview');
       setOverview(data);
+      setActiveQueueId((current) => current ?? data.queues[0]?.queueId ?? null);
       setError('');
     } catch (reason) {
-      setError(reason instanceof Error ? reason.message : '无法连接 waitqueue 服务');
+      setError(reason instanceof Error ? reason.message : '无法连接 WaitQueue 服务');
     } finally {
-      requestInFlight.current = false;
+      overviewRequest.current = false;
       setLoading(false);
       setRefreshing(false);
     }
   }, []);
 
+  const loadHealth = useCallback(async () => {
+    if (healthRequest.current) return;
+    healthRequest.current = true;
+    try {
+      const [live, ready] = await Promise.allSettled([
+        probeHealth('/waitqueue/health/live'),
+        probeHealth('/waitqueue/health/ready'),
+      ]);
+      const liveResult = live.status === 'fulfilled' ? live.value : { ok: false };
+      const readyResult = ready.status === 'fulfilled' ? ready.value : { ok: false };
+      setHealth({
+        live: liveResult.ok,
+        ready: readyResult.ok,
+        dependencies: readyResult.data?.dependencies,
+        checkedAt: new Date().toISOString(),
+      });
+    } finally {
+      healthRequest.current = false;
+    }
+  }, []);
+
+  const refreshAll = useCallback(async (manual = false) => {
+    await Promise.all([loadOverview(manual), loadHealth()]);
+  }, [loadHealth, loadOverview]);
+
   useEffect(() => {
-    void loadOverview();
+    void refreshAll();
     const timer = window.setInterval(() => {
-      if (document.visibilityState === 'visible') void loadOverview();
-    }, 10_000);
-    const handleVisibility = () => {
-      if (document.visibilityState === 'visible') void loadOverview();
+      if (document.visibilityState === 'visible') void refreshAll();
+    }, REFRESH_INTERVAL_MS);
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') void refreshAll();
     };
-    document.addEventListener('visibilitychange', handleVisibility);
+    document.addEventListener('visibilitychange', onVisibility);
     return () => {
       window.clearInterval(timer);
-      document.removeEventListener('visibilitychange', handleVisibility);
+      document.removeEventListener('visibilitychange', onVisibility);
     };
-  }, [loadOverview]);
-
-  useEffect(() => {
-    const saved = window.localStorage.getItem('waitqueue-theme');
-    if (saved === 'dark') setTheme('dark');
-  }, []);
-
-  useEffect(() => {
-    document.documentElement.dataset.theme = theme;
-    window.localStorage.setItem('waitqueue-theme', theme);
-  }, [theme]);
+  }, [refreshAll]);
 
   const queues = useMemo(() => {
     const normalized = query.trim().toLowerCase();
     if (!normalized) return overview?.queues ?? [];
-    return (overview?.queues ?? []).filter(
-      (queue) =>
-        queue.namespace.toLowerCase().includes(normalized) ||
-        queue.hookUrl.toLowerCase().includes(normalized) ||
-        String(queue.queueId).includes(normalized)
+    return (overview?.queues ?? []).filter((queue) =>
+      queue.namespace.toLowerCase().includes(normalized) ||
+      displayHook(queue.hookUrl).toLowerCase().includes(normalized) ||
+      String(queue.queueId).includes(normalized)
     );
   }, [overview, query]);
 
   const activeQueue = useMemo(
-    () => queues.find((queue) => queue.queueId === activeQueueId) ?? queues[0] ?? null,
-    [activeQueueId, queues]
+    () => overview?.queues.find((queue) => queue.queueId === activeQueueId) ?? overview?.queues[0] ?? null,
+    [activeQueueId, overview]
   );
+  const currentDeadLetters = deadLetterQueueId === activeQueue?.queueId ? deadLetters : null;
+
+  const currentServiceState = serviceState(overview, error, health, loading);
 
-  const serviceState = loading && !overview ? 'SYNCING' : error ? (overview ? 'STALE' : 'OFFLINE') : 'ONLINE';
-  const serviceTone = error ? styles.serviceError : styles.serviceOnline;
+  const loadDeadLetters = useCallback(async (queueId: number, page = 1) => {
+    const requestId = ++deadLetterRequest.current;
+    setDeadLetterLoading(true);
+    try {
+      let resolvedPage = page;
+      let offset = (resolvedPage - 1) * DEAD_LETTER_PAGE_SIZE;
+      let data = await getJson<DeadLetterPage>(
+        `/waitqueue/admin/deadLetters?queueId=${queueId}&offset=${offset}&limit=${DEAD_LETTER_PAGE_SIZE}`
+      );
+      if (requestId !== deadLetterRequest.current) return;
+
+      if (resolvedPage > 1 && data.items.length === 0 && data.total <= offset) {
+        resolvedPage = Math.max(1, Math.ceil(data.total / DEAD_LETTER_PAGE_SIZE));
+        offset = (resolvedPage - 1) * DEAD_LETTER_PAGE_SIZE;
+        data = await getJson<DeadLetterPage>(
+          `/waitqueue/admin/deadLetters?queueId=${queueId}&offset=${offset}&limit=${DEAD_LETTER_PAGE_SIZE}`
+        );
+      }
+      if (requestId !== deadLetterRequest.current) return;
+      setDeadLetters(data);
+      setDeadLetterQueueId(queueId);
+      setDeadLetterPage(resolvedPage);
+    } catch (reason) {
+      if (requestId === deadLetterRequest.current) {
+        message.error(reason instanceof Error ? reason.message : '读取死信队列失败');
+      }
+    } finally {
+      if (requestId === deadLetterRequest.current) setDeadLetterLoading(false);
+    }
+  }, [message]);
 
-  const openQueueDialog = (queue?: QueueOverviewItem) => {
+  useEffect(() => {
+    setDeadLetterPage(1);
+    setDeadLetters(null);
+    setDeadLetterQueueId(null);
+    if (view === 'deadLetters' && activeQueue) {
+      void loadDeadLetters(activeQueue.queueId, 1);
+    } else {
+      deadLetterRequest.current += 1;
+      setDeadLetterLoading(false);
+    }
+  }, [activeQueue?.queueId, loadDeadLetters, view]);
+
+  const openQueueModal = (queue?: QueueOverviewItem) => {
     setEditingQueueId(queue?.queueId ?? null);
-    setQueueDraft(
+    queueForm.setFieldsValue(
       queue
         ? {
             namespace: queue.namespace,
             hookUrl: queue.hookUrl,
-            concurrency: String(queue.concurrency),
+            concurrency: queue.concurrency,
             run: queue.crontab.run,
             check: queue.crontab.check,
             expire: queue.crontab.expire,
           }
-        : EMPTY_QUEUE
+        : DEFAULT_QUEUE_VALUES
     );
-    setQueueDialogOpen(true);
-  };
-
-  const openTaskDialog = (queue?: QueueOverviewItem) => {
-    setTaskDraft({ queueId: queue ? String(queue.queueId) : String(overview?.queues[0]?.queueId ?? ''), taskId: '' });
-    setTaskDialogOpen(true);
+    setQueueModalOpen(true);
   };
 
-  const updateQueueDraft = (field: keyof QueueDraft) => (event: ChangeEvent<HTMLInputElement>) => {
-    setQueueDraft((current) => ({ ...current, [field]: event.target.value }));
+  const openTaskModal = (queue?: QueueOverviewItem) => {
+    taskForm.setFieldsValue({ queueId: queue?.queueId ?? overview?.queues[0]?.queueId, taskId: '' });
+    setTaskModalOpen(true);
   };
 
-  const submitQueue = async (event: FormEvent) => {
-    event.preventDefault();
-    const concurrency = Number(queueDraft.concurrency);
-    if (!Number.isInteger(concurrency) || concurrency < 1) {
-      notify('error', '并发上限必须是大于 0 的整数');
-      return;
-    }
+  const submitQueue = async (values: QueueFormValues) => {
     setSubmitting(true);
     try {
       await postJson('/waitqueue/queue/newQueue', {
-        namespace: queueDraft.namespace,
-        hookUrl: queueDraft.hookUrl,
-        currMaxCount: concurrency,
-        crontab: {
-          run: queueDraft.run,
-          check: queueDraft.check,
-          expire: queueDraft.expire,
-        },
+        namespace: values.namespace,
+        hookUrl: values.hookUrl,
+        currMaxCount: values.concurrency,
+        crontab: { run: values.run, check: values.check, expire: values.expire },
       });
-      notify('success', '队列配置已生效');
-      setQueueDialogOpen(false);
-      await loadOverview();
+      message.success('队列配置已生效');
+      setQueueModalOpen(false);
+      await refreshAll(true);
     } catch (reason) {
-      notify('error', reason instanceof Error ? reason.message : '保存队列失败');
+      message.error(reason instanceof Error ? reason.message : '保存队列失败');
     } finally {
       setSubmitting(false);
     }
   };
 
-  const submitTask = async (event: FormEvent) => {
-    event.preventDefault();
-    const queue = overview?.queues.find((item) => String(item.queueId) === taskDraft.queueId);
+  const submitTask = async (values: TaskFormValues) => {
+    const queue = overview?.queues.find((item) => item.queueId === values.queueId);
     if (!queue) {
-      notify('error', '请选择一个有效队列');
+      message.error('请选择一个有效队列');
       return;
     }
     setSubmitting(true);
@@ -407,407 +566,430 @@ const Dashboard: NextPage = () => {
       await postJson('/waitqueue/scheduler/addTask', {
         namespace: queue.namespace,
         hookUrl: queue.hookUrl,
-        taskId: taskDraft.taskId,
+        taskId: values.taskId,
       });
-      notify('success', `任务 ${taskDraft.taskId} 已进入等待队列`);
-      setTaskDialogOpen(false);
-      await loadOverview();
+      message.success('任务已进入等待队列');
+      setTaskModalOpen(false);
+      await refreshAll(true);
     } catch (reason) {
-      notify('error', reason instanceof Error ? reason.message : '提交任务失败');
+      message.error(reason instanceof Error ? reason.message : '提交任务失败');
     } finally {
       setSubmitting(false);
     }
   };
 
+  const replayDeadLetter = (item: DeadLetterItem) => {
+    if (!activeQueue) return;
+    modal.confirm({
+      title: '确认重放这条死信？',
+      content: `队列 ${activeQueue.namespace} · 任务 ${item.taskId} · 已重试 ${item.retryCount} 次`,
+      okText: '重放并重新入队',
+      cancelText: '取消',
+      icon: <RedoOutlined />,
+      async onOk() {
+        try {
+          await postJson('/waitqueue/admin/deadLetters/replay', {
+            queueId: activeQueue.queueId,
+            taskId: item.taskId,
+            entryId: item.entryId,
+          });
+          message.success('死信已重新入队');
+          await Promise.all([refreshAll(true), loadDeadLetters(activeQueue.queueId, deadLetterPage)]);
+        } catch (reason) {
+          message.error(reason instanceof Error ? reason.message : '死信重放失败');
+          throw reason;
+        }
+      },
+    });
+  };
+
+  const menuItems: MenuProps['items'] = [
+    { key: 'overview', icon: <DashboardOutlined />, label: '总览' },
+    { key: 'queues', icon: <BarsOutlined />, label: '队列' },
+    { key: 'deadLetters', icon: <WarningOutlined />, label: '死信' },
+    { key: 'diagnostics', icon: <SafetyCertificateOutlined />, label: '诊断' },
+  ];
+
+  const queueColumns: TableColumnsType<QueueOverviewItem> = [
+    {
+      title: '队列 / 回调源',
+      key: 'queue',
+      width: 250,
+      fixed: 'left',
+      render: (_, queue) => (
+        <div className={styles.queueIdentity}>
+          <span>Q-{String(queue.queueId).padStart(3, '0')}</span>
+          <div>
+            <button type="button" onClick={() => setActiveQueueId(queue.queueId)}>{queue.namespace}</button>
+            <code title="敏感路径已隐藏">{displayHook(queue.hookUrl)}</code>
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: '状态',
+      key: 'state',
+      width: 110,
+      render: (_, queue) => {
+        const state = queueState(queue);
+        return <Tag color={state.color}>{state.label}</Tag>;
+      },
+    },
+    {
+      title: '积压 / 最老等待',
+      key: 'backlog',
+      width: 180,
+      render: (_, queue) => (
+        <div className={styles.tableMetric}>
+          <strong className={queue.waiting > 0 ? styles.warningText : undefined}>{queue.waiting}</strong>
+          <small><FieldTimeOutlined /> {formatAge(queue.oldestWaitingAgeSeconds, queue.waiting)}</small>
+        </div>
+      ),
+    },
+    {
+      title: '运行槽位',
+      key: 'capacity',
+      width: 170,
+      render: (_, queue) => (
+        <div className={styles.capacityCell}>
+          <span><b>{queue.running}</b> / {queue.concurrency}</span>
+          <Progress percent={Math.min(100, Math.max(0, queue.utilization))} showInfo={false} size="small" />
+        </div>
+      ),
+    },
+    {
+      title: 'Retry',
+      dataIndex: 'retrying',
+      width: 90,
+      align: 'right',
+      render: (value: number | undefined) => <b className={(value ?? 0) > 0 ? styles.warningText : undefined}>{metric(value)}</b>,
+    },
+    {
+      title: 'DLQ',
+      dataIndex: 'deadLetters',
+      width: 90,
+      align: 'right',
+      render: (value: number | undefined) => <b className={(value ?? 0) > 0 ? styles.dangerText : undefined}>{metric(value)}</b>,
+    },
+    {
+      title: '投递失败',
+      key: 'failures',
+      width: 110,
+      align: 'right',
+      render: (_, queue) => <b className={(queue.callbacks?.failure ?? 0) > 0 ? styles.dangerText : undefined}>{metric(queue.callbacks?.failure)}</b>,
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 128,
+      fixed: 'right',
+      render: (_, queue) => (
+        <Space size={4}>
+          <Tooltip title="提交任务"><Button aria-label={`向 ${queue.namespace} 提交任务`} icon={<SendOutlined />} onClick={() => openTaskModal(queue)} /></Tooltip>
+          <Tooltip title="编辑配置"><Button aria-label={`编辑 ${queue.namespace} 配置`} icon={<SettingOutlined />} onClick={() => openQueueModal(queue)} /></Tooltip>
+        </Space>
+      ),
+    },
+  ];
+
+  const deadLetterColumns: TableColumnsType<DeadLetterItem> = [
+    { title: '任务 ID', dataIndex: 'taskId', ellipsis: true, render: (value: string) => <code>{value}</code> },
+    { title: '失败原因', dataIndex: 'reason', width: 150, render: (value: DeadLetterItem['reason']) => <Tag color="error">{value === 'lease_expired' ? '租约过期' : '回调失败'}</Tag> },
+    { title: '重试次数', dataIndex: 'retryCount', width: 110, align: 'right' },
+    { title: '失败时间', dataIndex: 'failedAt', width: 180, render: formatTimestamp },
+    { title: '操作', key: 'action', width: 110, fixed: 'right', render: (_, item) => <Button icon={<RedoOutlined />} onClick={() => replayDeadLetter(item)}>重放</Button> },
+  ];
+
+  const catalog = (
+    <SidebarCatalog
+      overview={overview}
+      queues={queues}
+      activeQueueId={activeQueue?.queueId ?? null}
+      query={query}
+      onQuery={setQuery}
+      onSelect={(queueId) => {
+        setActiveQueueId(queueId);
+        setMobileCatalogOpen(false);
+      }}
+      onCreate={() => {
+        setMobileCatalogOpen(false);
+        openQueueModal();
+      }}
+    />
+  );
+
   return (
     <>
       <Head>
-        <title>WaitQueue Control Room</title>
-        <meta name="description" content="waitqueue.js 实时队列控制面" />
+        <title>WaitQueue Workbench</title>
+        <meta name="description" content="WaitQueue 实时调度与恢复工作台" />
       </Head>
-      {toast && (
-        <div
-          key={toast.id}
-          className={`${styles.toast} ${toast.tone === 'error' ? styles.toastError : styles.toastSuccess}`}
-          role={toast.tone === 'error' ? 'alert' : 'status'}
-          aria-live={toast.tone === 'error' ? 'assertive' : 'polite'}
-        >
-          <span aria-hidden="true">{toast.tone === 'error' ? '!' : '✓'}</span>
-          <strong>{toast.text}</strong>
-          <button type="button" onClick={() => setToast(null)} aria-label="关闭提示">
-            <Glyph>×</Glyph>
-          </button>
-        </div>
-      )}
-      <div className={styles.shell} data-dashboard-shell>
-        <header className={styles.topbar}>
+      <a className={styles.skipLink} href="#main-content">跳到主要内容</a>
+      <Layout className={styles.shell}>
+        <Header className={styles.topbar}>
           <div className={styles.brand}>
+            <Button className={styles.mobileMenu} type="text" icon={<MenuOutlined />} aria-label="打开队列目录" onClick={() => setMobileCatalogOpen(true)} />
             <span className={styles.brandMark} aria-hidden="true">&gt;_</span>
-            <div>
-              <strong>WaitQueue Backend</strong>
-              <small>wq v1.0</small>
-            </div>
+            <div><strong>WaitQueue Backend</strong><small>RUNTIME CONTROL PLANE</small></div>
           </div>
-
-          <div className={styles.workspaceTitle}>
-            <strong>运行控制台</strong>
-            <span>· Dashboard</span>
+          <div className={styles.workspace}><b>运行工作台</b><span>· Workbench</span></div>
+          <Menu
+            className={styles.topMenu}
+            mode="horizontal"
+            items={menuItems}
+            selectedKeys={[view]}
+            onClick={({ key }) => setView(key as ViewKey)}
+          />
+          <div className={styles.topMeta}>
+            <span>Queues <b>{metric(overview?.summary.queueCount)}</b></span>
+            <span>Open <b>{metric(overview?.summary.waiting)}</b></span>
+            {stateTag(currentServiceState)}
+            <Tooltip title={mode === 'light' ? '切换深色主题' : '切换浅色主题'}>
+              <Button type="text" icon={mode === 'light' ? <MoonOutlined /> : <SunOutlined />} aria-label="切换主题" onClick={toggleMode} />
+            </Tooltip>
           </div>
+        </Header>
 
-          <nav className={styles.productNav} aria-label="控制台导航">
-            <a className={styles.navActive} href="#workbench-title"><i aria-hidden="true">◎</i> 探索</a>
-            <a href="#queues-title"><i aria-hidden="true">▣</i> 队列</a>
-            <a href="#runtime-pulse"><i aria-hidden="true">∿</i> 调度</a>
-          </nav>
-
-          <div className={styles.topbarMeta}>
-            <span><i aria-hidden="true">◇</i> Queues <b>{overview?.summary.queueCount ?? '—'}</b></span>
-            <span><i aria-hidden="true">◇</i> Capacity <b>{overview?.summary.capacity ?? '—'}</b></span>
-            <div className={`${styles.serviceState} ${serviceTone}`} role="status" aria-live="polite">
-              <i className={styles.liveDot} aria-hidden="true" />
-              <span>{serviceState}</span>
-            </div>
-          </div>
-        </header>
-
-        <div className={styles.bodyGrid}>
-          <aside className={styles.sidebar} aria-label="队列目录">
-            <div className={styles.sidebarNumbers}>
-              <span><i aria-hidden="true">◇</i> {overview?.summary.queueCount ?? '—'} 队列</span>
-              <span><i aria-hidden="true">◉</i> {overview?.summary.running ?? '—'} 运行</span>
-              <span><i aria-hidden="true">◌</i> {overview?.summary.waiting ?? '—'} 等待</span>
-            </div>
-
-            <div className={styles.sidebarSearch}>
-              <span aria-hidden="true">⌕</span>
-              <input
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search queues / hooks..."
-                aria-label="搜索队列"
-              />
-            </div>
-
-            <button className={styles.catalogButton} type="button" onClick={() => setQuery('')}>
-              <span className={styles.cubeGlyph} aria-hidden="true">◇</span>
-              <span>
-                <strong>完整目录</strong>
-                <small>{overview?.summary.queueCount ?? 0} queues · realtime</small>
-              </span>
-              <b>{overview?.summary.queueCount ?? '—'}</b>
-            </button>
-
-            <div className={styles.sidebarRule} />
-            <div className={styles.sidebarLabel}>
-              <span>⌘ &nbsp;SCHEDULER QUEUES</span>
-              <b>{queues.length}</b>
-            </div>
-
-            <nav className={styles.queueNav} aria-label="已注册队列">
-              {queues.map((queue) => {
-                const status = queueStatus(queue);
-                const selected = activeQueue?.queueId === queue.queueId;
-                return (
-                  <a
-                    key={queue.queueId}
-                    className={selected ? styles.queueNavActive : undefined}
-                    href={`#queue-${queue.queueId}`}
-                    aria-current={selected ? 'location' : undefined}
-                    onClick={() => setActiveQueueId(queue.queueId)}
-                  >
-                    <span className={`${styles.navQueueGlyph} ${status.tone}`} aria-hidden="true">◈</span>
-                    <span>
-                      <strong>{queue.namespace}</strong>
-                      <small>q-{String(queue.queueId).padStart(3, '0')} · {queue.running}/{queue.concurrency} slots</small>
-                    </span>
-                    <b>{queue.waiting}</b>
-                  </a>
-                );
-              })}
-            </nav>
-
-            <div className={styles.sidebarFoot}>
-              <span>AUTO REFRESH</span>
-              <strong>10 SEC</strong>
-              <small>Last sync {formatTimestamp(overview?.generatedAt)}</small>
-            </div>
-          </aside>
-
-          <main className={styles.main}>
+        <Layout className={styles.workspaceLayout}>
+          <Sider className={styles.sidebar} width={288} theme={mode}>{catalog}</Sider>
+          <Content id="main-content" className={styles.content} aria-busy={loading || refreshing}>
             {error && (
-              <div className={styles.alert} role="alert">
-                <div>
-                  <strong>{overview ? '数据已过期' : '控制面暂时离线'}</strong>
-                  <span>{error}</span>
-                </div>
-                <button type="button" onClick={() => void loadOverview(true)}>重新连接</button>
-              </div>
+              <Alert
+                className={styles.alert}
+                type={overview ? 'warning' : 'error'}
+                showIcon
+                message={overview ? '当前展示的是最后一次成功快照' : '控制面暂时离线'}
+                description={error}
+                action={<Button onClick={() => void refreshAll(true)}>重新连接</Button>}
+              />
             )}
 
             <section className={styles.hero} aria-labelledby="workbench-title">
-              <div className={styles.heroTitle}>
-                <span aria-hidden="true">&gt;_</span>
+              <div>
+                <span className={styles.heroPrompt} aria-hidden="true">&gt;_</span>
                 <h1 id="workbench-title">WaitQueue Workbench</h1>
-                <b>Runtime Queue Contract</b>
+                <Tag>Runtime Operations</Tag>
+              </div>
+              <p>轻量队列状态 · Redis 运行快照 · Claim 恢复 · Dead Letter 运维</p>
+              <div className={styles.heroActions}>
+                <Button icon={<ReloadOutlined spin={refreshing} />} disabled={refreshing} onClick={() => void refreshAll(true)}>刷新快照</Button>
+                <Button type="primary" icon={<SendOutlined />} disabled={!activeQueue} onClick={() => openTaskModal(activeQueue ?? undefined)}>提交任务</Button>
               </div>
-              <p>轻量任务调度 · Redis 实时快照 · 并发槽位控制</p>
-            </section>
-
-            <section className={styles.summaryGrid} aria-label="调度摘要">
-              <article className={styles.summaryCard} id="runtime-pulse">
-                <div className={styles.cardHeading}>
-                  <span className={styles.cardIcon} aria-hidden="true">◎</span>
-                  <div>
-                    <h2>Runtime Pulse</h2>
-                    <p>当前容量、占用与等待状态</p>
-                  </div>
-                  <span className={styles.arrow} aria-hidden="true">→</span>
-                </div>
-                <div className={styles.metricStrip}>
-                  <span><small>QUEUES</small><strong>{overview?.summary.queueCount ?? '—'}</strong></span>
-                  <span><small>WAITING</small><strong>{overview?.summary.waiting ?? '—'}</strong></span>
-                  <span><small>RUNNING</small><strong>{overview?.summary.running ?? '—'}</strong></span>
-                  <span><small>CAPACITY</small><strong>{overview?.summary.capacity ?? '—'}</strong></span>
-                </div>
-                <div className={styles.metricBadges}>
-                  <span className={styles.mintBadge}>runtime {overview?.summary.running ?? 0}</span>
-                  <span>utilization {overview ? `${overview.summary.utilization}%` : '—'}</span>
-                </div>
-              </article>
-
-              <article className={styles.summaryCard}>
-                <div className={styles.cardHeading}>
-                  <span className={styles.cardIcon} aria-hidden="true">✧</span>
-                  <div>
-                    <h2>调度工作台 · Control</h2>
-                    <p>队列注册、任务入队与运行同步</p>
-                  </div>
-                  <span className={styles.arrow} aria-hidden="true">→</span>
-                </div>
-                <div className={styles.actionRow}>
-                  <button className={`${styles.controlButton} ${styles.primaryButton}`} type="button" onClick={() => openQueueDialog()}>
-                    <Glyph>＋</Glyph>注册队列
-                  </button>
-                  <button className={styles.controlButton} type="button" disabled={!overview?.queues.length} onClick={() => openTaskDialog(activeQueue ?? undefined)}>
-                    <Glyph>▷</Glyph>提交任务
-                  </button>
-                  <button className={styles.controlButton} type="button" disabled={refreshing} aria-busy={refreshing} onClick={() => void loadOverview(true)}>
-                    <Glyph>↻</Glyph>{refreshing ? '刷新中' : '刷新'}
-                  </button>
-                  <button
-                    className={styles.themeButton}
-                    type="button"
-                    aria-label={theme === 'light' ? '切换到深色模式' : '切换到浅色模式'}
-                    onClick={() => setTheme((current) => (current === 'light' ? 'dark' : 'light'))}
-                  >
-                    <Glyph>{theme === 'light' ? '◒' : '☼'}</Glyph>
-                  </button>
-                </div>
-                <div className={styles.metricBadges}>
-                  <span>{overview?.summary.queueCount ?? 0} queues / {overview?.summary.capacity ?? 0} slots</span>
-                  <span className={error ? styles.errorBadge : styles.mintBadge}>{serviceState}</span>
-                </div>
-              </article>
             </section>
 
-            {activeQueue && (
-              <section className={styles.focusBar} aria-label="当前队列">
-                <span className={styles.cubeGlyph} aria-hidden="true">◇</span>
-                <div>
-                  <small>CURRENT QUEUE</small>
-                  <strong>{activeQueue.namespace}</strong>
-                </div>
-                <code>{displayUrl(activeQueue.hookUrl)}</code>
-                <div className={styles.focusStats}>
-                  <span><b>{activeQueue.waiting}</b> waiting</span>
-                  <span><b>{activeQueue.running}</b> / {activeQueue.concurrency} running</span>
-                </div>
-                <button type="button" onClick={() => openQueueDialog(activeQueue)}><Glyph>✎</Glyph> 配置</button>
-              </section>
-            )}
+            <Segmented
+              className={styles.mobileViewNav}
+              block
+              value={view}
+              options={[
+                { label: '总览', value: 'overview', icon: <DashboardOutlined /> },
+                { label: '队列', value: 'queues', icon: <BarsOutlined /> },
+                { label: '死信', value: 'deadLetters', icon: <WarningOutlined /> },
+                { label: '诊断', value: 'diagnostics', icon: <SafetyCertificateOutlined /> },
+              ]}
+              onChange={(value) => setView(value as ViewKey)}
+              aria-label="工作台视图"
+            />
+
+            {loading && !overview ? (
+              <div className={styles.initialSkeleton}><Skeleton active paragraph={{ rows: 10 }} /></div>
+            ) : (
+              <>
+                {(view === 'overview' || view === 'queues') && (
+                  <>
+                    <section className={styles.summaryGrid} aria-label="运行摘要">
+                      <Card className={styles.summaryCard} bordered title={<span><ThunderboltOutlined /> Runtime Pulse</span>} extra={<small>LIVE GAUGES</small>}>
+                        <div className={styles.metricGrid}>
+                          <Statistic title="当前积压" value={overview?.summary.waiting ?? '—'} suffix="tasks" />
+                          <Statistic title="最老等待" value={formatAge(overview?.summary.oldestWaitingAgeSeconds, overview?.summary.waiting)} />
+                          <Statistic title="运行 / 容量" value={overview ? `${overview.summary.running} / ${overview.summary.capacity}` : '—'} />
+                          <Statistic title="Retry" value={metric(overview?.summary.retrying)} valueStyle={(overview?.summary.retrying ?? 0) > 0 ? { color: '#d46b08' } : undefined} />
+                          <Statistic title="DLQ" value={metric(overview?.summary.deadLetters)} valueStyle={(overview?.summary.deadLetters ?? 0) > 0 ? { color: '#c9363e' } : undefined} />
+                          <div className={styles.utilizationMetric}>
+                            <small>容量利用率</small>
+                            <Progress type="circle" size={52} percent={overview?.summary.utilization ?? 0} />
+                          </div>
+                        </div>
+                      </Card>
+
+                      <Card className={styles.summaryCard} bordered title={<span><SafetyCertificateOutlined /> Delivery & Recovery</span>} extra={<small>PROCESS COUNTERS</small>}>
+                        <div className={styles.deliveryGrid}>
+                          <div><small>CALLBACK OK</small><strong>{metric(overview?.summary.callbackSuccesses)}</strong></div>
+                          <div><small>CALLBACK FAILED</small><strong className={(overview?.summary.callbackFailures ?? 0) > 0 ? styles.dangerText : undefined}>{metric(overview?.summary.callbackFailures)}</strong></div>
+                          <div><small>CLAIMED</small><strong>{metric(overview?.summary.claims)}</strong></div>
+                          <div><small>RECOVERED</small><strong>{metric(overview?.summary.recovered)}</strong></div>
+                        </div>
+                        <div className={styles.counterNote}>
+                          <CodeOutlined /> 本进程观察累计，重启清零
+                          {overview?.metricsStartedAt && <span>· since {formatTimestamp(overview.metricsStartedAt)}</span>}
+                        </div>
+                      </Card>
+                    </section>
+
+                    {activeQueue && (
+                      <section className={styles.focusBar} aria-label="当前选中队列">
+                        <CloudServerOutlined />
+                        <div><small>CURRENT QUEUE · Q-{String(activeQueue.queueId).padStart(3, '0')}</small><strong>{activeQueue.namespace}</strong></div>
+                        <code>{displayHook(activeQueue.hookUrl)}</code>
+                        <div className={styles.focusMetrics}>
+                          <span><b>{activeQueue.waiting}</b> waiting</span>
+                          <span><b>{formatAge(activeQueue.oldestWaitingAgeSeconds, activeQueue.waiting)}</b> oldest</span>
+                          <span><b>{metric(activeQueue.retrying)}</b> retry</span>
+                          <span className={(activeQueue.deadLetters ?? 0) > 0 ? styles.dangerText : undefined}><b>{metric(activeQueue.deadLetters)}</b> DLQ</span>
+                        </div>
+                        <Space size={4}>
+                          <Button icon={<SendOutlined />} onClick={() => openTaskModal(activeQueue)}>任务</Button>
+                          <Button icon={<SettingOutlined />} onClick={() => openQueueModal(activeQueue)}>配置</Button>
+                        </Space>
+                      </section>
+                    )}
 
-            <section className={styles.queuePanel} aria-labelledby="queues-title">
-              <div className={styles.queueToolbar}>
-                <div>
-                  <h2 id="queues-title"><span>⚡</span> Queue Registry</h2>
-                  <p>实时队列目录 · 点击操作完成任务入队或配置更新</p>
-                </div>
-                <span className={styles.resultCount}>{queues.length} / {overview?.summary.queueCount ?? 0}</span>
-              </div>
+                    <section className={styles.registryPanel} aria-labelledby="registry-title">
+                      <div className={styles.sectionHeader}>
+                        <div><h2 id="registry-title"><BarsOutlined /> Queue Registry</h2><p>真实运行快照 · 展开查看 Cron 和配置时间</p></div>
+                        <Tag>{queues.length} / {overview?.summary.queueCount ?? 0}</Tag>
+                      </div>
+                      {queues.length > 0 ? (
+                        <>
+                          <div className={styles.desktopTable}>
+                            <Table
+                              rowKey="queueId"
+                              columns={queueColumns}
+                              dataSource={queues}
+                              pagination={false}
+                              size="small"
+                              scroll={{ x: 1140 }}
+                              rowClassName={(queue) => queue.queueId === activeQueue?.queueId ? styles.activeTableRow : ''}
+                              expandable={{
+                                expandedRowRender: (queue) => (
+                                  <div className={styles.queueDetails}>
+                                    <span><b>RUN</b><code>{queue.crontab.run}</code></span>
+                                    <span><b>CHECK</b><code>{queue.crontab.check}</code></span>
+                                    <span><b>EXPIRE</b><code>{queue.crontab.expire}</code></span>
+                                    <span><b>UPDATED</b>{formatTimestamp(queue.updatedAt)}</span>
+                                  </div>
+                                ),
+                              }}
+                            />
+                          </div>
+                          <div className={styles.queueMobileList}>
+                            {queues.map((queue) => {
+                              const state = queueState(queue);
+                              return (
+                                <Card key={queue.queueId} size="small" title={queue.namespace} extra={<Tag color={state.color}>{state.label}</Tag>}>
+                                  <div className={styles.mobileMetricGrid}>
+                                    <span><small>WAITING</small><b>{queue.waiting}</b></span>
+                                    <span><small>OLDEST</small><b>{formatAge(queue.oldestWaitingAgeSeconds, queue.waiting)}</b></span>
+                                    <span><small>RETRY</small><b>{metric(queue.retrying)}</b></span>
+                                    <span><small>DLQ</small><b>{metric(queue.deadLetters)}</b></span>
+                                  </div>
+                                  <Progress percent={queue.utilization} size="small" format={() => `${queue.running}/${queue.concurrency}`} />
+                                  <Space><Button icon={<SendOutlined />} onClick={() => openTaskModal(queue)}>任务</Button><Button icon={<SettingOutlined />} onClick={() => openQueueModal(queue)}>配置</Button></Space>
+                                </Card>
+                              );
+                            })}
+                          </div>
+                        </>
+                      ) : (
+                        <Empty description={query ? '没有匹配的队列' : '还没有注册队列'}>
+                          {query ? <Button onClick={() => setQuery('')}>清除筛选</Button> : <Button type="primary" icon={<PlusOutlined />} onClick={() => openQueueModal()}>注册第一条队列</Button>}
+                        </Empty>
+                      )}
+                    </section>
+                  </>
+                )}
 
-              <div className={styles.tableWrap}>
-                <table className={styles.queueTable}>
-                  <caption className={styles.visuallyHidden}>已注册队列的实时运行状态、并发槽位与调度规则</caption>
-                  <thead>
-                    <tr>
-                      <th>队列 / 回调</th>
-                      <th>状态</th>
-                      <th>等待</th>
-                      <th>运行槽位</th>
-                      <th>调度规则</th>
-                      <th>操作</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {queues.map((queue) => {
-                      const status = queueStatus(queue);
-                      return (
-                        <tr id={`queue-${queue.queueId}`} key={queue.queueId} className={activeQueue?.queueId === queue.queueId ? styles.activeRow : undefined}>
-                          <td data-label="队列 / 回调">
-                            <div className={styles.queueIdentity}>
-                              <span className={styles.queueId}>Q-{String(queue.queueId).padStart(3, '0')}</span>
-                              <div>
-                                <button type="button" onClick={() => setActiveQueueId(queue.queueId)}>{queue.namespace}</button>
-                                <code title={displayUrl(queue.hookUrl)}>{displayUrl(queue.hookUrl)}</code>
-                              </div>
-                            </div>
-                          </td>
-                          <td data-label="状态">
-                            <span className={`${styles.queueStatus} ${status.tone}`}><i aria-hidden="true" /> {status.label}</span>
-                          </td>
-                          <td data-label="等待">
-                            <strong className={queue.waiting > 0 ? styles.waitingCount : undefined}>{queue.waiting}</strong>
-                            <small className={styles.cellCaption}>tasks</small>
-                          </td>
-                          <td data-label="运行槽位">
-                            <div className={styles.capacityValue}><strong>{queue.running}</strong><span>/ {queue.concurrency}</span></div>
-                            <CapacityTrack queue={queue} />
-                          </td>
-                          <td data-label="调度规则">
-                            <div className={styles.cronStack}>
-                              <code><b>RUN</b>{queue.crontab.run}</code>
-                              <code><b>CHK</b>{queue.crontab.check}</code>
-                              <code><b>EXP</b>{queue.crontab.expire}</code>
-                            </div>
-                          </td>
-                          <td data-label="操作">
-                            <div className={styles.rowActions}>
-                              <button type="button" onClick={() => openTaskDialog(queue)} title="提交任务" aria-label={`向 ${queue.namespace} 队列提交任务`}><Glyph>▷</Glyph></button>
-                              <button type="button" onClick={() => openQueueDialog(queue)} title="编辑配置" aria-label={`编辑 ${queue.namespace} 队列配置`}><Glyph>✎</Glyph></button>
-                            </div>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-
-                {loading && !overview && (
-                  <div className={styles.loadingState} aria-label="正在读取队列"><span /><span /><span /></div>
+                {view === 'deadLetters' && (
+                  <section className={styles.registryPanel} aria-labelledby="dlq-title">
+                    <div className={styles.sectionHeader}>
+                      <div><h2 id="dlq-title"><WarningOutlined /> Dead Letter Queue</h2><p>精确 generation 重放 · 失败时保留原记录</p></div>
+                      <Space>
+                        <Select
+                          aria-label="选择死信队列"
+                          value={activeQueue?.queueId}
+                          style={{ minWidth: 180 }}
+                          options={(overview?.queues ?? []).map((queue) => ({ value: queue.queueId, label: queue.namespace }))}
+                          onChange={(queueId) => setActiveQueueId(queueId)}
+                        />
+                        <Button icon={<ReloadOutlined />} loading={deadLetterLoading} disabled={!activeQueue} onClick={() => activeQueue && void loadDeadLetters(activeQueue.queueId, deadLetterPage)}>刷新</Button>
+                      </Space>
+                    </div>
+                    {activeQueue ? (
+                      <>
+                        <Alert className={styles.inlineInfo} type="info" showIcon message={`${activeQueue.namespace} · ${metric(activeQueue.deadLetters)} 条当前死信`} description="entryId 仅用于防止旧代际误重放，不会进入 Prometheus 标签或应用日志。" />
+                        <Table rowKey="entryId" columns={deadLetterColumns} dataSource={currentDeadLetters?.items ?? []} loading={deadLetterLoading} pagination={false} size="small" scroll={{ x: 760 }} locale={{ emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前没有死信" /> }} />
+                        {(currentDeadLetters?.total ?? 0) > DEAD_LETTER_PAGE_SIZE && (
+                          <Pagination
+                            className={styles.pagination}
+                            current={deadLetterPage}
+                            pageSize={DEAD_LETTER_PAGE_SIZE}
+                            total={currentDeadLetters?.total ?? 0}
+                            showSizeChanger={false}
+                            onChange={(page) => void loadDeadLetters(activeQueue.queueId, page)}
+                          />
+                        )}
+                      </>
+                    ) : <Empty description="先注册并选择一个队列" />}
+                  </section>
                 )}
 
-                {!loading && queues.length === 0 && (
-                  <div className={styles.emptyState}>
-                    <div className={styles.emptyGlyph}>∅</div>
-                    <strong>{query ? '没有匹配的队列' : '还没有注册队列'}</strong>
-                    <p>{query ? '换一个 namespace、URL 或队列 ID 试试。' : '注册第一条队列后，实时状态会出现在这里。'}</p>
-                    {!query && (
-                      <button className={`${styles.controlButton} ${styles.primaryButton}`} type="button" onClick={() => openQueueDialog()}>
-                        <Glyph>＋</Glyph>注册第一条队列
-                      </button>
-                    )}
-                  </div>
+                {view === 'diagnostics' && (
+                  <section className={styles.diagnosticsGrid} aria-labelledby="diagnostics-title">
+                    <Card className={styles.diagnosticCard} title={<span id="diagnostics-title"><SafetyCertificateOutlined /> Service Diagnostics</span>}>
+                      <div className={styles.healthRows}>
+                        <div><span><CloudServerOutlined /> Process liveness</span>{health.live === null ? <Tag>UNKNOWN</Tag> : <Tag color={health.live ? 'success' : 'error'}>{health.live ? 'LIVE' : 'DOWN'}</Tag>}</div>
+                        <div><span><SafetyCertificateOutlined /> Dependency readiness</span>{health.ready === null ? <Tag>UNKNOWN</Tag> : <Tag color={health.ready ? 'success' : 'warning'}>{health.ready ? 'READY' : 'UNAVAILABLE'}</Tag>}</div>
+                        <div><span><DatabaseOutlined /> MySQL</span><Tag color={health.dependencies?.mysql === 'ok' ? 'success' : 'error'}>{health.dependencies?.mysql ?? 'unknown'}</Tag></div>
+                        <div><span><DatabaseOutlined /> Redis</span><Tag color={health.dependencies?.redis === 'ok' ? 'success' : 'error'}>{health.dependencies?.redis ?? 'unknown'}</Tag></div>
+                      </div>
+                      <small>Last probe · {formatTimestamp(health.checkedAt)}</small>
+                    </Card>
+                    <Card className={styles.diagnosticCard} title={<span><CodeOutlined /> Telemetry Contract</span>}>
+                      <ul className={styles.contractList}>
+                        <li>Prometheus：<code>/metrics</code>（服务端 Bearer 鉴权；不经浏览器代理）</li>
+                        <li>Gauge 来自约 1 秒缓存的 Redis / MySQL 运行快照。</li>
+                        <li>Counter 为本进程观察值，重启清零；多实例使用 <code>sum(rate())</code>。</li>
+                        <li>指标标签不包含 taskId、token、hookUrl 或异常消息。</li>
+                      </ul>
+                    </Card>
+                  </section>
                 )}
-              </div>
-            </section>
+              </>
+            )}
 
             <footer className={styles.footer}>
-              <span><i aria-hidden="true">◇</i> DATA SOURCE · /waitqueue/admin/overview · AUTO REFRESH 10s</span>
-              <span>实时快照，不包含历史吞吐与成功率</span>
+              <span><DatabaseOutlined /> DATA SOURCE · /waitqueue/admin/overview · 10s</span>
+              <span>Snapshot {formatTimestamp(overview?.generatedAt)} · 不伪造趋势或历史成功率</span>
             </footer>
-          </main>
-        </div>
-      </div>
+          </Content>
+        </Layout>
+      </Layout>
 
-      {queueDialogOpen && (
-        <Dialog
-          title={editingQueueId === null ? '注册队列' : `编辑队列 Q-${String(editingQueueId).padStart(3, '0')}`}
-          eyebrow="QUEUE CONFIGURATION"
-          onClose={() => setQueueDialogOpen(false)}
-        >
-          <form className={styles.form} onSubmit={submitQueue}>
-            <div className={styles.formGrid}>
-              <label>
-                <span>Namespace</span>
-                <input required disabled={editingQueueId !== null} maxLength={64} value={queueDraft.namespace} onChange={updateQueueDraft('namespace')} placeholder="billing" />
-              </label>
-              <label>
-                <span>并发上限</span>
-                <input required type="number" min="1" max="1000" value={queueDraft.concurrency} onChange={updateQueueDraft('concurrency')} />
-              </label>
-            </div>
-            <label>
-              <span>Hook URL</span>
-              <input required disabled={editingQueueId !== null} type="url" maxLength={255} value={queueDraft.hookUrl} onChange={updateQueueDraft('hookUrl')} placeholder="http://worker.internal/callback" />
-            </label>
-            <div className={styles.ruleGroup}>
-              <span className={styles.ruleTitle}>CRON SCHEDULE</span>
-              <label>
-                <span>RUN</span>
-                <input required maxLength={64} value={queueDraft.run} onChange={updateQueueDraft('run')} />
-              </label>
-              <label>
-                <span>CHECK</span>
-                <input required maxLength={64} value={queueDraft.check} onChange={updateQueueDraft('check')} />
-              </label>
-              <label>
-                <span>EXPIRE</span>
-                <input required maxLength={64} value={queueDraft.expire} onChange={updateQueueDraft('expire')} />
-              </label>
-            </div>
-            <p className={styles.formHint}>
-              {editingQueueId === null
-                ? '相同 namespace + Hook URL 会更新现有队列配置。'
-                : '队列身份不可修改；保存后会更新并发上限与调度规则。'}
-            </p>
-            <div className={styles.dialogActions}>
-              <button className={styles.controlButton} type="button" onClick={() => setQueueDialogOpen(false)}>取消</button>
-              <button className={`${styles.controlButton} ${styles.primaryButton}`} type="submit" disabled={submitting} aria-busy={submitting}>
-                {submitting ? '保存中' : '保存配置'}
-              </button>
-            </div>
-          </form>
-        </Dialog>
-      )}
-
-      {taskDialogOpen && (
-        <Dialog title="提交任务" eyebrow="ENQUEUE TASK" onClose={() => setTaskDialogOpen(false)}>
-          <form className={styles.form} onSubmit={submitTask}>
-            <label>
-              <span>目标队列</span>
-              <select
-                required
-                value={taskDraft.queueId}
-                onChange={(event) => setTaskDraft((current) => ({ ...current, queueId: event.target.value }))}
-              >
-                {(overview?.queues ?? []).map((queue) => (
-                  <option key={queue.queueId} value={queue.queueId}>
-                    Q-{String(queue.queueId).padStart(3, '0')} · {queue.namespace}
-                  </option>
-                ))}
-              </select>
-            </label>
-            <label>
-              <span>Task ID</span>
-              <input
-                required
-                maxLength={256}
-                value={taskDraft.taskId}
-                onChange={(event) => setTaskDraft((current) => ({ ...current, taskId: event.target.value }))}
-                placeholder="invoice-20260810-001"
-                data-dialog-autofocus
-              />
-            </label>
-            <p className={styles.formHint}>任务会进入 Redis waiting list，由对应队列的 RUN 周期领取。</p>
-            <div className={styles.dialogActions}>
-              <button className={styles.controlButton} type="button" onClick={() => setTaskDialogOpen(false)}>取消</button>
-              <button className={`${styles.controlButton} ${styles.primaryButton}`} type="submit" disabled={submitting} aria-busy={submitting}>
-                <Glyph>▷</Glyph>{submitting ? '提交中' : '进入队列'}
-              </button>
-            </div>
-          </form>
-        </Dialog>
-      )}
+      <Drawer title="Queue Catalog" placement="left" width="min(88vw, 320px)" open={mobileCatalogOpen} onClose={() => setMobileCatalogOpen(false)} styles={{ body: { padding: 0 } }}>{catalog}</Drawer>
+
+      <Modal title={editingQueueId === null ? '注册队列' : `编辑队列 Q-${String(editingQueueId).padStart(3, '0')}`} open={queueModalOpen} onCancel={() => setQueueModalOpen(false)} footer={null} destroyOnHidden>
+        <Form form={queueForm} layout="vertical" initialValues={DEFAULT_QUEUE_VALUES} onFinish={submitQueue} requiredMark="optional">
+          <div className={styles.formGrid}>
+            <Form.Item name="namespace" label="Namespace" rules={[{ required: true, whitespace: true, max: 64 }]}><Input disabled={editingQueueId !== null} placeholder="billing" /></Form.Item>
+            <Form.Item name="concurrency" label="并发上限" rules={[{ required: true }]}><InputNumber min={1} max={1000} precision={0} style={{ width: '100%' }} /></Form.Item>
+          </div>
+          <Form.Item name="hookUrl" label="Hook URL" rules={[{ required: true, type: 'url', max: 255 }]} extra="回调路径可能包含敏感信息，列表只显示 origin。"><Input disabled={editingQueueId !== null} placeholder="https://worker.example/callback" /></Form.Item>
+          <div className={styles.cronFields}>
+            <Form.Item name="run" label="RUN cron" rules={[{ required: true, max: 64 }]}><Input /></Form.Item>
+            <Form.Item name="check" label="CHECK cron" rules={[{ required: true, max: 64 }]}><Input /></Form.Item>
+            <Form.Item name="expire" label="EXPIRE cron" rules={[{ required: true, max: 64 }]}><Input /></Form.Item>
+          </div>
+          <div className={styles.modalActions}><Button onClick={() => setQueueModalOpen(false)}>取消</Button><Button type="primary" htmlType="submit" loading={submitting}>{editingQueueId === null ? '注册队列' : '保存配置'}</Button></div>
+        </Form>
+      </Modal>
+
+      <Modal title="提交任务" open={taskModalOpen} onCancel={() => setTaskModalOpen(false)} footer={null} destroyOnHidden>
+        <Form form={taskForm} layout="vertical" onFinish={submitTask} requiredMark="optional">
+          <Form.Item name="queueId" label="目标队列" rules={[{ required: true }]}><Select options={(overview?.queues ?? []).map((queue) => ({ value: queue.queueId, label: `${queue.namespace} · Q-${queue.queueId}` }))} /></Form.Item>
+          <Form.Item name="taskId" label="Task ID" rules={[{ required: true, whitespace: true, max: 256 }]} extra="同一队列内，活跃 taskId 是幂等键。"><Input autoFocus placeholder="order-20260811-001" /></Form.Item>
+          <div className={styles.modalActions}><Button onClick={() => setTaskModalOpen(false)}>取消</Button><Button type="primary" htmlType="submit" icon={<SendOutlined />} loading={submitting}>进入等待队列</Button></div>
+        </Form>
+      </Modal>
     </>
   );
 };
diff --git a/admin-dashboard/src/style/dashboard.module.css b/admin-dashboard/src/style/dashboard.module.css
index 6daf446..1813ec8 100644
--- a/admin-dashboard/src/style/dashboard.module.css
+++ b/admin-dashboard/src/style/dashboard.module.css
@@ -3,287 +3,256 @@
   background: var(--paper);
 }
 
+.skipLink {
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  z-index: 1000;
+  padding: 8px 12px;
+  color: #06110d;
+  background: var(--accent);
+  border-radius: 4px;
+  font-weight: 700;
+  transform: translateY(-160%);
+}
+
+.skipLink:focus {
+  transform: translateY(0);
+}
+
 .topbar {
   position: sticky;
   top: 0;
-  z-index: 30;
-  min-height: 64px;
+  z-index: 50;
+  height: 64px;
   display: grid;
   grid-template-columns: 288px minmax(170px, 1fr) auto auto;
   align-items: stretch;
-  color: var(--text);
-  background: color-mix(in srgb, var(--panel) 96%, transparent);
+  padding: 0 !important;
+  color: var(--text) !important;
+  line-height: normal !important;
+  background: color-mix(in srgb, var(--panel) 96%, transparent) !important;
   border-bottom: 1px solid var(--line-ink);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(14px);
 }
 
 .brand,
-.workspaceTitle,
-.productNav,
-.topbarMeta {
+.workspace,
+.topMeta {
+  min-width: 0;
   display: flex;
   align-items: center;
 }
 
 .brand {
-  gap: 12px;
-  padding: 0 20px;
+  gap: 11px;
+  padding: 0 18px;
   border-right: 1px solid var(--line-ink);
 }
 
 .brandMark {
-  width: 37px;
-  height: 37px;
+  width: 38px;
+  height: 38px;
   display: grid;
   place-items: center;
   flex: 0 0 auto;
   color: var(--accent);
   background: var(--ink);
-  border-radius: 8px;
+  border-radius: 7px;
   font: 800 15px/1 var(--font-mono);
   letter-spacing: -0.08em;
 }
 
-.brand > div,
-.workspaceTitle {
+.brand > div:last-child {
   min-width: 0;
 }
 
 .brand strong,
 .brand small {
   display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .brand strong {
-  overflow: hidden;
   font-size: 14px;
-  line-height: 1.25;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.2;
 }
 
 .brand small {
-  margin-top: 3px;
+  margin-top: 4px;
   color: var(--faint);
-  font: 10px/1 var(--font-mono);
+  font: 700 8px/1 var(--font-mono);
+  letter-spacing: 0.05em;
 }
 
-.workspaceTitle {
+.workspace {
   gap: 5px;
   padding: 0 22px;
   font-size: 14px;
 }
 
-.workspaceTitle span {
+.workspace span {
   color: var(--muted);
 }
 
-.productNav {
+.topMenu {
   align-self: center;
-  gap: 4px;
-  padding: 4px;
-  background: var(--wash);
-  border: 1px solid var(--line);
-  border-radius: 8px;
+  min-width: 355px;
+  height: 42px;
+  padding: 3px 5px;
+  line-height: 34px !important;
+  background: var(--wash) !important;
+  border: 1px solid var(--line) !important;
+  border-radius: 7px;
 }
 
-.productNav a {
+.topMenu:global(.ant-menu-horizontal) > :global(.ant-menu-item) {
   height: 34px;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 0 13px;
-  color: var(--muted);
-  border: 1px solid transparent;
-  border-radius: 6px;
+  margin: 0 1px !important;
+  padding-inline: 12px !important;
+  border-radius: 5px;
   font-size: 12px;
   font-weight: 650;
-  text-decoration: none;
-  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
+  line-height: 34px !important;
 }
 
-.productNav a:hover,
-.productNav .navActive {
-  color: var(--text);
-  background: var(--panel);
-  border-color: var(--line);
+.topMenu:global(.ant-menu-horizontal) > :global(.ant-menu-item)::after {
+  display: none;
 }
 
-.productNav .navActive i {
-  color: var(--accent-strong);
+.topMenu:global(.ant-menu-horizontal) > :global(.ant-menu-item-selected) {
+  background: var(--panel) !important;
+  box-shadow: inset 0 0 0 1px var(--line);
 }
 
-.topbarMeta {
+.topMeta {
   justify-content: flex-end;
-  gap: 17px;
-  padding: 0 20px;
-  font: 11px/1 var(--font-mono);
+  gap: 13px;
+  padding: 0 16px;
+  font: 10px/1 var(--font-mono);
   white-space: nowrap;
 }
 
-.topbarMeta > span {
+.topMeta > span {
   color: var(--muted);
 }
 
-.topbarMeta > span i {
-  color: var(--faint);
-  font-style: normal;
-}
-
-.topbarMeta b {
-  margin-left: 4px;
+.topMeta > span b {
+  margin-left: 3px;
   color: var(--text);
+  font-size: 11px;
 }
 
-.serviceState {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding-left: 16px;
-  border-left: 1px solid var(--line-ink);
-  font-weight: 700;
-}
-
-.serviceOnline {
-  color: var(--accent-strong);
-}
-
-.serviceError {
-  color: var(--danger);
-}
-
-.liveDot {
-  width: 7px;
-  height: 7px;
-  display: block;
-  border-radius: 50%;
-  background: currentColor;
+.topMeta :global(.ant-tag) {
+  margin-inline-end: 0;
+  font: 700 9px/20px var(--font-mono);
 }
 
-.serviceOnline .liveDot {
-  box-shadow: 0 0 0 4px var(--accent-soft);
+.mobileMenu {
+  display: none !important;
 }
 
-.bodyGrid {
+.workspaceLayout {
   min-height: calc(100vh - 64px);
-  display: grid;
-  grid-template-columns: 288px minmax(0, 1fr);
+  background: var(--paper) !important;
 }
 
 .sidebar {
-  position: sticky;
+  position: sticky !important;
   top: 64px;
+  align-self: flex-start;
   height: calc(100vh - 64px);
+  overflow: hidden;
+  background: var(--panel) !important;
+  border-right: 1px solid var(--line-ink);
+}
+
+.catalog {
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--panel);
-  border-right: 1px solid var(--line-ink);
 }
 
-.sidebarNumbers {
-  min-height: 42px;
+.catalogNumbers {
+  min-height: 43px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   align-items: center;
-  padding: 0 13px;
   border-bottom: 1px solid var(--line);
 }
 
-.sidebarNumbers span {
+.catalogNumbers span {
   color: var(--muted);
   font: 9px/1 var(--font-mono);
   text-align: center;
-  white-space: nowrap;
-}
-
-.sidebarNumbers i {
-  color: var(--faint);
-  font-style: normal;
-}
-
-.sidebarSearch {
-  height: 36px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 12px 13px;
-  padding: 0 10px;
-  color: var(--faint);
-  background: var(--panel);
-  border: 1px solid var(--line-ink);
-  border-radius: 6px;
 }
 
-.sidebarSearch:focus-within {
-  border-color: var(--accent-strong);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+.catalogNumbers b {
+  color: var(--text);
+  font-size: 10px;
 }
 
-.sidebarSearch input {
-  width: 100%;
-  min-width: 0;
-  color: var(--text);
-  background: transparent;
-  border: 0;
-  font: 11px/1 var(--font-sans);
+.catalogSearch {
+  padding: 13px 13px 9px;
 }
 
-.sidebarSearch input::placeholder {
-  color: var(--faint);
+.catalogSearch :global(.ant-input-affix-wrapper) {
+  border-color: var(--line-ink);
+  border-radius: 6px;
+  box-shadow: none;
 }
 
-.catalogButton {
+.catalogTitle {
   width: calc(100% - 20px);
   display: grid;
-  grid-template-columns: 26px minmax(0, 1fr) auto;
+  grid-template-columns: 25px minmax(0, 1fr) auto;
   align-items: center;
   gap: 9px;
-  margin: 2px 10px 8px;
+  margin: 2px 10px 10px;
   padding: 10px;
   color: var(--text);
   text-align: left;
   background: var(--wash);
   border: 1px solid transparent;
-  border-radius: 7px;
+  border-radius: 6px;
   cursor: pointer;
 }
 
-.catalogButton:hover {
+.catalogTitle:hover {
   border-color: var(--line-ink);
 }
 
-.cubeGlyph {
+.catalogTitle > :global(.anticon) {
   color: var(--muted);
-  font: 18px/1 var(--font-mono);
-}
-
-.catalogButton > span:nth-child(2) {
-  min-width: 0;
+  font-size: 16px;
 }
 
-.catalogButton strong,
-.catalogButton small {
+.catalogTitle strong,
+.catalogTitle small {
   display: block;
 }
 
-.catalogButton strong {
+.catalogTitle strong {
   font-size: 12px;
 }
 
-.catalogButton small {
+.catalogTitle small {
   overflow: hidden;
-  margin-top: 3px;
+  margin-top: 4px;
   color: var(--faint);
-  font: 9px/1.2 var(--font-mono);
+  font: 8px/1 var(--font-mono);
+  letter-spacing: 0.03em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.catalogButton > b,
-.queueNav > a > b {
-  min-width: 26px;
-  padding: 4px 7px;
+.catalogTitle > b {
+  min-width: 28px;
+  padding: 5px 7px;
   color: var(--muted);
   background: var(--panel);
   border-radius: 999px;
@@ -291,72 +260,62 @@
   text-align: center;
 }
 
-.sidebarRule {
-  height: 1px;
-  margin: 0 12px 14px;
-  background: var(--line-ink);
-}
-
-.sidebarLabel {
+.catalogLabel {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 17px 8px;
+  margin: 0 12px;
+  padding: 13px 4px 9px;
   color: var(--faint);
+  border-top: 1px solid var(--line-ink);
   font: 700 9px/1 var(--font-mono);
-  letter-spacing: 0.04em;
-}
-
-.sidebarLabel b {
-  color: var(--muted);
+  letter-spacing: 0.05em;
 }
 
 .queueNav {
   min-height: 0;
+  flex: 1;
   overflow: auto;
   padding: 0 7px 12px;
 }
 
-.queueNav > a {
+.queueNav > button {
   width: 100%;
   display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) auto;
+  grid-template-columns: 25px minmax(0, 1fr) auto;
   align-items: center;
   gap: 9px;
   padding: 10px 9px;
   color: var(--muted);
   text-align: left;
-  text-decoration: none;
   background: transparent;
   border: 1px solid transparent;
   border-radius: 6px;
   cursor: pointer;
 }
 
-.queueNav > a:hover {
+.queueNav > button:hover,
+.queueNav > .queueNavActive {
   color: var(--text);
   background: var(--wash);
 }
 
 .queueNav > .queueNavActive {
-  color: var(--text);
-  background: var(--wash);
   border-color: var(--line);
 }
 
-.navQueueGlyph {
-  width: 24px;
-  height: 24px;
+.queueGlyph {
+  width: 25px;
+  height: 25px;
   display: grid;
   place-items: center;
   color: var(--accent-strong);
   background: var(--accent-soft);
   border-radius: 50%;
-  font-style: normal;
   font-size: 11px;
 }
 
-.queueNav > a > span:nth-child(2) {
+.queueNav > button > span:nth-child(2) {
   min-width: 0;
 }
 
@@ -370,980 +329,602 @@
 
 .queueNav strong {
   color: inherit;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .queueNav small {
-  margin-top: 3px;
+  margin-top: 4px;
   color: var(--faint);
-  font: 8px/1.2 var(--font-mono);
-}
-
-.sidebarFoot {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 4px 10px;
-  margin-top: auto;
-  padding: 14px 17px;
-  border-top: 1px solid var(--line);
-  font-family: var(--font-mono);
+  font: 9px/1 var(--font-mono);
 }
 
-.sidebarFoot span,
-.sidebarFoot strong {
-  font-size: 9px;
-  line-height: 1;
+.queueNav :global(.ant-badge-count) {
+  min-width: 27px;
+  height: 19px;
+  padding-inline: 6px;
+  border: 0;
+  border-radius: 999px;
+  box-shadow: none;
+  font: 9px/19px var(--font-mono);
 }
 
-.sidebarFoot span {
+.catalogEmpty {
+  margin: 26px 0;
   color: var(--faint);
-}
-
-.sidebarFoot strong {
-  color: var(--accent-strong);
-}
-
-.sidebarFoot small {
-  grid-column: 1 / -1;
-  color: var(--muted);
-  font-size: 8px;
-}
-
-.main {
-  width: 100%;
-  max-width: 1720px;
-  min-width: 0;
-  margin: 0 auto;
-  padding: 26px clamp(20px, 2.4vw, 40px) 20px;
-}
-
-.toast {
-  position: fixed;
-  top: 76px;
-  right: 20px;
-  z-index: 1200;
-  width: min(390px, calc(100vw - 40px));
-  min-height: 46px;
-  display: grid;
-  grid-template-columns: 24px minmax(0, 1fr) 28px;
-  align-items: center;
-  gap: 10px;
-  padding: 9px 10px;
-  color: var(--text);
-  background: var(--panel);
-  border: 1px solid var(--line-ink);
-  border-radius: 6px;
-  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12);
-  animation: toastIn 180ms ease-out;
-}
-
-.toast > span {
-  width: 22px;
-  height: 22px;
-  display: grid;
-  place-items: center;
-  color: #07110d;
-  background: var(--accent);
-  border-radius: 50%;
-  font: 800 11px/1 var(--font-mono);
-}
-
-.toast strong {
   font-size: 12px;
-  line-height: 1.45;
+  text-align: center;
 }
 
-.toast button {
-  width: 28px;
-  height: 28px;
+.catalogFooter {
   display: grid;
-  place-items: center;
-  padding: 0;
-  color: var(--muted);
-  background: transparent;
-  border: 0;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.toast button:hover {
-  color: var(--text);
-  background: var(--wash);
-}
-
-.toastError > span {
-  color: #ffffff;
-  background: var(--danger);
-}
-
-.toastSuccess {
-  border-left: 3px solid var(--accent);
+  gap: 9px;
+  padding: 12px 13px;
+  border-top: 1px solid var(--line);
 }
 
-.toastError {
-  border-left: 3px solid var(--danger);
+.catalogFooter small {
+  color: var(--faint);
+  font: 8px/1 var(--font-mono);
+  letter-spacing: 0.08em;
+  text-align: center;
 }
 
-@keyframes toastIn {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.content {
+  min-width: 0;
+  padding: 26px 28px 18px;
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--line) 38%, transparent) 1px, transparent 1px),
+    linear-gradient(color-mix(in srgb, var(--line) 28%, transparent) 1px, transparent 1px),
+    var(--paper);
+  background-size: 32px 32px;
 }
 
 .alert {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 16px;
-  padding: 10px 12px;
-  color: var(--text);
-  background: var(--danger-soft);
-  border: 1px solid var(--danger);
-  border-radius: 6px;
-}
-
-.alert > div {
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-}
-
-.alert strong,
-.alert span {
-  font-size: 11px;
-}
-
-.alert span {
-  color: var(--muted);
-}
-
-.alert button {
-  padding: 5px 9px;
-  color: var(--danger);
-  background: transparent;
-  border: 1px solid currentColor;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 10px;
+  margin-bottom: 18px;
+  border-color: var(--line-ink) !important;
 }
 
 .hero {
-  min-height: 105px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  min-height: 112px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-content: center;
+  gap: 10px 20px;
   padding: 22px 28px;
-  color: #f7f8f9;
+  color: #f5f7f6;
   background:
-    radial-gradient(circle at 87% -120%, rgba(0, 201, 139, 0.18), transparent 42%),
-    #17181b;
-  border: 1px solid #060607;
-  border-radius: 8px;
+    radial-gradient(circle at 90% 10%, rgba(0, 201, 139, .15), transparent 32%),
+    linear-gradient(105deg, #111315, #202326);
+  border: 1px solid #050606;
+  border-radius: 7px;
+  box-shadow: 0 7px 16px rgba(18, 23, 21, .12);
 }
 
-.heroTitle {
+.hero > div:first-child {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.heroTitle > span {
+.heroPrompt {
   color: var(--accent);
-  font: 800 19px/1 var(--font-mono);
+  font: 800 22px/1 var(--font-mono);
+  letter-spacing: -0.1em;
 }
 
 .hero h1 {
   margin: 0;
-  font-family: var(--font-display);
   font-size: clamp(19px, 2vw, 24px);
   line-height: 1.1;
   letter-spacing: -0.03em;
 }
 
-.heroTitle b {
-  padding: 5px 11px;
-  color: #c5c8cc;
-  border: 1px solid #54575d;
-  border-radius: 999px;
-  font: 600 9px/1 var(--font-mono);
+.hero :global(.ant-tag) {
+  color: #d3d7d5;
+  background: transparent;
+  border-color: #5c6260;
+  font: 9px/20px var(--font-mono);
 }
 
 .hero p {
-  margin: 12px 0 0;
-  color: #969aa2;
-  font-size: 11px;
+  grid-column: 1;
+  margin: 0 0 0 44px;
+  color: #aeb4b1;
+  font-size: 12px;
 }
 
-.summaryGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-  margin-top: 18px;
+.heroActions {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.summaryCard {
-  min-width: 0;
-  padding: 18px;
+.heroActions :global(.ant-btn-default) {
+  color: #e8ebe9;
+  background: #292d2f;
+  border-color: #555b58;
+}
+
+.mobileViewNav {
+  display: none !important;
+}
+
+.initialSkeleton,
+.registryPanel,
+.diagnosticCard {
   background: var(--panel);
   border: 1px solid var(--line-ink);
-  border-radius: 8px;
+  border-radius: 7px;
+}
+
+.initialSkeleton {
+  margin-top: 20px;
+  padding: 28px;
 }
 
-.cardHeading {
+.summaryGrid {
   display: grid;
-  grid-template-columns: 23px minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 9px;
+  grid-template-columns: minmax(0, 1.3fr) minmax(360px, .7fr);
+  gap: 18px;
+  margin-top: 20px;
 }
 
-.cardIcon {
-  color: var(--muted);
-  font: 18px/1 var(--font-mono);
+.summaryCard {
+  border-color: var(--line-ink) !important;
+  border-radius: 7px !important;
+  box-shadow: none !important;
 }
 
-.cardHeading h2 {
-  margin: 0;
-  color: var(--text);
-  font-family: var(--font-display);
-  font-size: 14px;
-  line-height: 1.2;
-  letter-spacing: -0.015em;
+.summaryCard :global(.ant-card-head) {
+  min-height: 51px;
+  border-bottom-color: var(--line);
 }
 
-.cardHeading p {
-  margin: 7px 0 0;
-  color: var(--muted);
-  font-size: 10px;
+.summaryCard :global(.ant-card-head-title) > span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
 }
 
-.arrow {
+.summaryCard :global(.ant-card-extra) small {
   color: var(--faint);
-  font-size: 17px;
+  font: 700 8px/1 var(--font-mono);
+  letter-spacing: .08em;
 }
 
-.metricStrip {
+.metricGrid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  margin: 16px 0 13px;
-  padding: 12px 0;
-  border-top: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
+  grid-template-columns: repeat(3, minmax(100px, 1fr));
+  gap: 0;
 }
 
-.metricStrip > span {
-  min-width: 0;
-  padding: 0 11px;
+.metricGrid > :global(.ant-statistic),
+.utilizationMetric {
+  min-height: 78px;
+  padding: 7px 15px;
   border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
 }
 
-.metricStrip > span:first-child {
-  padding-left: 0;
-}
-
-.metricStrip > span:last-child {
+.metricGrid > :nth-child(3n) {
   border-right: 0;
 }
 
-.metricStrip small,
-.metricStrip strong {
-  display: block;
+.metricGrid > :nth-child(n+4) {
+  border-bottom: 0;
 }
 
-.metricStrip small {
+.metricGrid :global(.ant-statistic-title),
+.utilizationMetric > small {
   color: var(--faint);
-  font: 8px/1 var(--font-mono);
-  letter-spacing: 0.05em;
+  font: 700 9px/1.2 var(--font-mono);
+  letter-spacing: .04em;
+  text-transform: uppercase;
 }
 
-.metricStrip strong {
-  margin-top: 6px;
-  color: var(--text);
-  font: 700 20px/1 var(--font-mono);
+.metricGrid :global(.ant-statistic-content) {
+  margin-top: 10px;
+  font-family: var(--font-mono);
+  font-weight: 700;
+  letter-spacing: -.04em;
 }
 
-.metricBadges {
+.metricGrid :global(.ant-statistic-content-suffix) {
+  margin-left: 5px;
+  color: var(--faint);
+  font-size: 9px;
+  font-weight: 500;
+}
+
+.utilizationMetric {
   display: flex;
   align-items: center;
-  gap: 7px;
+  justify-content: space-between;
+  gap: 10px;
 }
 
-.metricBadges span,
-.resultCount {
-  padding: 5px 9px;
-  color: var(--muted);
-  background: var(--wash);
-  border-radius: 999px;
-  font: 9px/1 var(--font-mono);
-}
-
-.metricBadges .mintBadge {
-  color: var(--accent-strong);
-  background: var(--accent-soft);
-}
-
-.metricBadges .errorBadge {
-  color: var(--danger);
-  background: var(--danger-soft);
+.deliveryGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.actionRow {
-  min-height: 54px;
+.deliveryGrid > div {
   display: flex;
-  align-items: center;
+  align-items: end;
+  justify-content: space-between;
   gap: 8px;
-  margin: 10px 0 7px;
-}
-
-.controlButton {
-  height: 34px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  padding: 0 12px;
-  color: var(--text);
-  background: var(--wash);
-  border: 1px solid var(--line);
-  border-radius: 5px;
-  box-shadow: none;
-  cursor: pointer;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+  padding: 17px 15px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
 }
 
-.controlButton:hover:not(:disabled) {
-  background: var(--panel);
-  border-color: var(--line-ink);
+.deliveryGrid > div:nth-child(2n) {
+  border-right: 0;
 }
 
-.controlButton:disabled {
-  opacity: 0.48;
-  cursor: not-allowed;
+.deliveryGrid > div:nth-child(n+3) {
+  border-bottom: 0;
 }
 
-.primaryButton {
-  color: #06110d;
-  background: var(--accent);
-  border-color: var(--accent);
+.deliveryGrid small {
+  color: var(--faint);
+  font: 700 8px/1.2 var(--font-mono);
 }
 
-.primaryButton:hover:not(:disabled) {
-  background: var(--accent-hover);
-  border-color: var(--accent-hover);
+.deliveryGrid strong {
+  font: 700 22px/1 var(--font-mono);
 }
 
-.iconGlyph {
-  display: inline-grid;
-  place-items: center;
-  min-width: 1em;
-  font: 700 14px/1 var(--font-mono);
-}
-
-.themeButton,
-.iconButton {
-  width: 34px;
-  height: 34px;
-  display: grid;
-  flex: 0 0 auto;
-  place-items: center;
+.counterNote {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 15px;
+  padding: 10px 12px;
   color: var(--muted);
-  background: var(--panel);
-  border: 1px solid var(--line);
+  background: var(--wash);
   border-radius: 5px;
-  cursor: pointer;
-}
-
-.themeButton:hover,
-.iconButton:hover {
-  color: var(--accent-strong);
-  border-color: var(--accent-strong);
+  font-size: 11px;
 }
 
 .focusBar {
   display: grid;
-  grid-template-columns: 26px minmax(130px, 0.55fr) minmax(160px, 1.4fr) auto auto;
+  grid-template-columns: 26px minmax(120px, auto) minmax(160px, 1fr) auto auto;
   align-items: center;
   gap: 13px;
   margin-top: 18px;
-  padding: 12px 16px;
+  padding: 13px 17px;
   background: var(--panel);
   border: 1px solid var(--line-ink);
-  border-radius: 8px;
+  border-radius: 7px;
 }
 
-.focusBar small,
-.focusBar strong {
+.focusBar > :global(.anticon) {
+  color: var(--accent-strong);
+  font-size: 18px;
+}
+
+.focusBar > div:nth-child(2) small,
+.focusBar > div:nth-child(2) strong {
   display: block;
 }
 
-.focusBar small {
+.focusBar > div:nth-child(2) small {
   color: var(--faint);
   font: 8px/1 var(--font-mono);
 }
 
-.focusBar strong {
+.focusBar > div:nth-child(2) strong {
   overflow: hidden;
   margin-top: 4px;
-  color: var(--text);
-  font-size: 12px;
+  font-size: 13px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .focusBar > code {
   overflow: hidden;
-  padding-left: 13px;
   color: var(--muted);
-  border-left: 1px solid var(--line);
-  font: 9px/1.4 var(--font-mono);
+  font: 10px/1 var(--font-mono);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.focusStats {
+.focusMetrics {
   display: flex;
-  gap: 13px;
+  gap: 14px;
   color: var(--muted);
   font: 9px/1 var(--font-mono);
-  white-space: nowrap;
-}
-
-.focusStats b {
-  color: var(--text);
 }
 
-.focusBar > button {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 9px;
+.focusMetrics b {
   color: var(--text);
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 10px;
-}
-
-.focusBar > button:hover {
-  border-color: var(--accent-strong);
+  font-size: 11px;
 }
 
-.queuePanel {
-  margin-top: 18px;
+.registryPanel {
   overflow: hidden;
-  background: var(--panel);
-  border: 1px solid var(--line-ink);
-  border-radius: 8px;
+  margin-top: 18px;
 }
 
-.queueToolbar {
-  min-height: 76px;
+.sectionHeader {
+  min-height: 68px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
-  padding: 16px 18px;
+  padding: 14px 18px;
   border-bottom: 1px solid var(--line-ink);
 }
 
-.queueToolbar h2 {
+.sectionHeader h2 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   margin: 0;
-  color: var(--text);
-  font-family: var(--font-display);
-  font-size: 14px;
-  letter-spacing: -0.02em;
-}
-
-.queueToolbar h2 span {
-  margin-right: 6px;
   font-size: 15px;
 }
 
-.queueToolbar p {
-  margin: 7px 0 0;
-  color: var(--muted);
-  font-size: 10px;
-}
-
-.tableWrap {
-  position: relative;
-  min-height: 180px;
-  overflow-x: auto;
+.sectionHeader h2 :global(.anticon) {
+  color: var(--accent-strong);
 }
 
-.queueTable {
-  width: 100%;
-  border-collapse: collapse;
-  table-layout: fixed;
+.sectionHeader p {
+  margin: 5px 0 0;
+  color: var(--faint);
+  font-size: 11px;
 }
 
-.visuallyHidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
+.desktopTable :global(.ant-table) {
+  border-radius: 0;
 }
 
-.queueTable th {
-  padding: 9px 13px;
-  color: var(--faint);
-  background: var(--wash);
-  border-bottom: 1px solid var(--line);
-  font: 700 8px/1 var(--font-mono);
-  letter-spacing: 0.05em;
-  text-align: left;
+.desktopTable :global(.ant-table-thead > tr > th) {
+  color: var(--muted);
+  font: 700 9px/1.2 var(--font-mono);
+  letter-spacing: .04em;
   text-transform: uppercase;
 }
 
-.queueTable th:nth-child(1) { width: 27%; }
-.queueTable th:nth-child(2) { width: 9%; }
-.queueTable th:nth-child(3) { width: 7%; }
-.queueTable th:nth-child(4) { width: 16%; }
-.queueTable th:nth-child(5) { width: 33%; }
-.queueTable th:nth-child(6) { width: 8%; }
-
-.queueTable td {
-  padding: 13px;
-  color: var(--text);
-  border-bottom: 1px solid var(--line);
-  vertical-align: middle;
-}
-
-.queueTable tbody tr {
-  scroll-margin-top: 74px;
-  transition: background 120ms ease;
+.desktopTable :global(.ant-table-cell-fix-left),
+.desktopTable :global(.ant-table-cell-fix-right) {
+  background: var(--panel);
 }
 
-.queueTable tbody tr:hover,
-.queueTable tbody .activeRow {
-  background: var(--accent-ghost);
+.desktopTable :global(.ant-table-row:hover .ant-table-cell-fix-left),
+.desktopTable :global(.ant-table-row:hover .ant-table-cell-fix-right) {
+  background: var(--accent-ghost) !important;
 }
 
-.queueTable tbody tr:last-child td {
-  border-bottom: 0;
+.activeTableRow > td {
+  background: var(--accent-ghost) !important;
 }
 
 .queueIdentity {
-  min-width: 0;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 11px;
+  min-width: 0;
 }
 
-.queueId {
-  min-width: 45px;
-  padding: 5px 6px;
+.queueIdentity > span {
+  flex: 0 0 auto;
+  padding: 5px 7px;
   color: var(--muted);
   background: var(--wash);
+  border: 1px solid var(--line);
   border-radius: 4px;
-  font: 700 8px/1 var(--font-mono);
-  text-align: center;
+  font: 8px/1 var(--font-mono);
 }
 
 .queueIdentity > div {
   min-width: 0;
 }
 
-.queueIdentity button {
+.queueIdentity button,
+.queueIdentity code {
   display: block;
-  max-width: 100%;
+  max-width: 180px;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.queueIdentity button {
   padding: 0;
   color: var(--text);
   background: transparent;
   border: 0;
-  cursor: pointer;
-  font-size: 11px;
   font-weight: 700;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.queueIdentity button:hover {
-  color: var(--accent-strong);
+  cursor: pointer;
 }
 
 .queueIdentity code {
-  display: block;
-  overflow: hidden;
   margin-top: 5px;
   color: var(--faint);
-  font: 8px/1.2 var(--font-mono);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.queueStatus {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 8px;
-  color: var(--accent-strong);
-  background: var(--accent-soft);
-  border-radius: 999px;
-  font: 700 8px/1 var(--font-mono);
-  white-space: nowrap;
-}
-
-.queueStatus i {
-  width: 5px;
-  height: 5px;
-  background: currentColor;
-  border-radius: 50%;
-}
-
-.statusWarning {
-  color: var(--warning);
-  background: var(--warning-soft);
-}
-
-.statusActive,
-.statusIdle {
-  color: var(--accent-strong);
-}
-
-.waitingCount,
-.queueTable td > strong {
-  color: var(--text);
-  font: 700 15px/1 var(--font-mono);
-}
-
-.waitingCount {
-  color: var(--warning);
+  font-size: 9px;
 }
 
-.cellCaption {
+.tableMetric strong {
   display: block;
-  margin-top: 5px;
-  color: var(--faint);
-  font: 8px/1 var(--font-mono);
-}
-
-.capacityValue {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-  font-family: var(--font-mono);
-}
-
-.capacityValue strong {
-  font-size: 14px;
+  font: 700 17px/1 var(--font-mono);
 }
 
-.capacityValue span {
+.tableMetric small {
+  display: block;
+  margin-top: 7px;
   color: var(--faint);
   font-size: 9px;
 }
 
-.capacityTrack {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(3px, 1fr);
-  gap: 2px;
-  max-width: 88px;
-  margin-top: 7px;
-}
-
-.capacityTrack span {
-  height: 3px;
-  background: var(--line-strong);
-  border-radius: 1px;
-}
-
-.capacityTrack .capacityActive {
-  background: var(--accent);
+.capacityCell {
+  min-width: 120px;
 }
 
-.capacitySlot {
-  background: var(--line-strong);
-}
-
-.cronStack {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 5px;
-}
-
-.cronStack code {
-  min-width: 0;
-  overflow: hidden;
-  padding: 5px 6px;
+.capacityCell > span {
+  display: block;
+  margin-bottom: 6px;
   color: var(--muted);
-  background: var(--wash);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  font: 8px/1 var(--font-mono);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font: 10px/1 var(--font-mono);
 }
 
-.cronStack b {
-  margin-right: 5px;
-  color: var(--faint);
-  font-size: 7px;
+.capacityCell b {
+  color: var(--text);
+  font-size: 13px;
 }
 
-.rowActions {
+.queueDetails {
   display: flex;
-  gap: 5px;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  padding: 4px 6px;
 }
 
-.rowActions button {
-  width: 29px;
-  height: 29px;
-  display: grid;
-  place-items: center;
+.queueDetails span {
+  display: flex;
+  align-items: center;
+  gap: 7px;
   color: var(--muted);
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  cursor: pointer;
+  font-size: 10px;
 }
 
-.rowActions button:hover {
+.queueDetails b {
   color: var(--accent-strong);
-  border-color: var(--accent-strong);
-}
-
-.loadingState,
-.emptyState {
-  min-height: 180px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font: 8px/1 var(--font-mono);
 }
 
-.loadingState {
-  gap: 6px;
+.queueDetails code {
+  color: var(--text);
+  font: 9px/1 var(--font-mono);
 }
 
-.loadingState span {
-  width: 7px;
-  height: 7px;
-  background: var(--accent);
-  border-radius: 50%;
-  animation: loading 900ms ease-in-out infinite alternate;
+.warningText {
+  color: var(--warning) !important;
 }
 
-.loadingState span:nth-child(2) { animation-delay: 140ms; }
-.loadingState span:nth-child(3) { animation-delay: 280ms; }
-
-@keyframes loading {
-  from { opacity: 0.25; transform: translateY(3px); }
-  to { opacity: 1; transform: translateY(-3px); }
+.dangerText {
+  color: var(--danger) !important;
 }
 
-.emptyState {
-  flex-direction: column;
-  padding: 28px;
-  text-align: center;
+.queueMobileList {
+  display: none;
 }
 
-.emptyGlyph {
-  margin-bottom: 9px;
-  color: var(--faint);
-  font: 24px/1 var(--font-mono);
+.inlineInfo {
+  margin: 16px 18px;
 }
 
-.emptyState strong {
-  font-size: 12px;
-}
-
-.emptyState p {
-  margin: 7px 0 15px;
-  color: var(--muted);
-  font-size: 10px;
-}
-
-.footer {
+.pagination {
   display: flex;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 15px 2px 0;
-  color: var(--faint);
-  font: 8px/1.4 var(--font-mono);
-}
-
-.footer i {
-  font-style: normal;
+  justify-content: flex-end;
+  padding: 16px 18px;
+  border-top: 1px solid var(--line);
 }
 
-.dialogBackdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
+.diagnosticsGrid {
   display: grid;
-  place-items: center;
-  padding: 20px;
-  background: rgba(10, 11, 12, 0.58);
-  backdrop-filter: blur(3px);
-  animation: backdropIn 140ms ease-out;
-}
-
-.dialog {
-  width: min(550px, 100%);
-  max-height: calc(100vh - 40px);
-  overflow: auto;
-  color: var(--text);
-  background: var(--panel);
-  border: 1px solid var(--line-ink);
-  border-radius: 8px;
-  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.16);
-  animation: dialogIn 160ms ease-out;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  margin-top: 18px;
 }
 
-@keyframes backdropIn {
-  from { opacity: 0; }
+.diagnosticCard {
+  box-shadow: none !important;
 }
 
-@keyframes dialogIn {
-  from { opacity: 0; transform: translateY(8px); }
+.diagnosticCard :global(.ant-card-head) {
+  border-bottom-color: var(--line-ink);
 }
 
-.dialogHeader {
+.healthRows > div {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 18px;
-  padding: 18px 20px;
-  border-bottom: 1px solid var(--line-ink);
-}
-
-.eyebrow {
-  display: block;
-  margin-bottom: 7px;
-  color: var(--accent-strong);
-  font: 700 8px/1 var(--font-mono);
-  letter-spacing: 0.09em;
+  min-height: 46px;
+  gap: 12px;
+  border-bottom: 1px solid var(--line);
 }
 
-.dialogHeader h2 {
-  margin: 0;
-  font-family: var(--font-display);
-  font-size: 17px;
-  letter-spacing: -0.02em;
+.healthRows > div:last-child {
+  border-bottom: 0;
 }
 
-.form {
-  display: grid;
-  gap: 15px;
-  padding: 20px;
+.healthRows span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.formGrid {
-  display: grid;
-  grid-template-columns: 1.4fr 0.6fr;
-  gap: 12px;
+.diagnosticCard > :global(.ant-card-body) > small {
+  display: block;
+  margin-top: 14px;
+  color: var(--faint);
+  font: 9px/1 var(--font-mono);
 }
 
-.form label {
-  display: grid;
-  gap: 7px;
+.contractList {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--muted);
 }
 
-.form label > span,
-.ruleTitle {
-  color: var(--muted);
-  font: 700 9px/1 var(--font-mono);
-  letter-spacing: 0.04em;
+.contractList li {
+  margin: 0 0 13px;
+  line-height: 1.55;
 }
 
-.form input,
-.form select {
-  width: 100%;
-  height: 37px;
-  padding: 0 10px;
+.contractList code {
   color: var(--text);
-  background: var(--panel);
-  border: 1px solid var(--line-strong);
-  border-radius: 5px;
   font-size: 11px;
 }
 
-.form input:focus,
-.form select:focus {
-  border-color: var(--accent-strong);
-  box-shadow: 0 0 0 3px var(--accent-soft);
-}
-
-.form input:disabled {
+.footer {
+  min-height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 16px 2px 0;
   color: var(--faint);
-  background: var(--wash);
-  cursor: not-allowed;
+  font: 8px/1.4 var(--font-mono);
+  letter-spacing: .03em;
 }
 
-.ruleGroup {
+.formGrid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-  padding: 13px;
-  background: var(--wash);
-  border: 1px solid var(--line);
-  border-radius: 6px;
+  grid-template-columns: minmax(0, 1fr) 140px;
+  gap: 12px;
 }
 
-.ruleTitle {
-  grid-column: 1 / -1;
+.cronFields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
 }
 
-.ruleGroup input {
+.cronFields :global(.ant-input) {
   font-family: var(--font-mono);
-  font-size: 9px;
-}
-
-.formHint {
-  margin: -2px 0 0;
-  color: var(--faint);
-  font-size: 9px;
-  line-height: 1.6;
+  font-size: 10px;
 }
 
-.dialogActions {
+.modalActions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  margin-top: 2px;
-  padding-top: 14px;
+  margin-top: 5px;
+  padding-top: 15px;
   border-top: 1px solid var(--line);
 }
 
-@media (max-width: 1260px) {
+@media (max-width: 1320px) {
   .topbar {
-    grid-template-columns: 248px minmax(160px, 1fr) auto auto;
+    grid-template-columns: 288px minmax(120px, 1fr) auto;
   }
 
-  .topbarMeta > span {
-    display: none;
-  }
-
-  .bodyGrid {
-    grid-template-columns: 248px minmax(0, 1fr);
-  }
-
-  .cronStack {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 980px) {
-  .topbar {
-    grid-template-columns: 248px minmax(0, 1fr) auto;
-  }
-
-  .productNav {
+  .workspace {
     display: none;
   }
 
@@ -1352,151 +933,128 @@
   }
 
   .focusBar {
-    grid-template-columns: 26px minmax(120px, 0.7fr) minmax(130px, 1.3fr) auto;
+    grid-template-columns: 26px minmax(130px, auto) minmax(130px, 1fr) auto;
   }
 
-  .focusStats {
-    display: none;
+  .focusMetrics {
+    grid-column: 2 / span 2;
   }
+}
 
-  .queueTable {
-    min-width: 860px;
+@media (max-width: 1040px) {
+  .topbar {
+    grid-template-columns: minmax(220px, 1fr) auto;
   }
-}
 
-@media (max-width: 720px) {
-  .toast {
-    top: 70px;
-    right: 12px;
-    left: 12px;
-    width: auto;
+  .topMenu {
+    display: none !important;
   }
 
-  .sidebarSearch {
-    height: 44px;
+  .sidebar {
+    display: none;
   }
 
-  .sidebarSearch input,
-  .form input,
-  .form select {
-    font-size: 16px;
+  .mobileMenu {
+    display: inline-flex !important;
+    margin-left: -7px;
   }
 
-  .form input,
-  .form select {
-    height: 44px;
+  .content {
+    padding: 22px 20px 16px;
   }
 
-  .controlButton {
-    height: 40px;
+  .mobileViewNav {
+    display: flex !important;
+    margin-top: 14px;
+    padding: 4px;
+    background: var(--wash);
+    border: 1px solid var(--line-ink);
+    border-radius: 7px;
   }
 
-  .themeButton,
-  .iconButton,
-  .rowActions button {
-    width: 40px;
-    height: 40px;
+  .diagnosticsGrid {
+    grid-template-columns: 1fr;
   }
+}
 
+@media (max-width: 760px) {
   .topbar {
-    position: relative;
+    height: 58px;
     grid-template-columns: minmax(0, 1fr) auto;
-    min-height: 60px;
   }
 
   .brand {
-    padding: 0 14px;
     border-right: 0;
   }
 
-  .workspaceTitle {
-    display: none;
-  }
-
-  .topbarMeta {
-    padding: 0 14px;
-  }
-
-  .serviceState {
-    padding-left: 0;
-    border-left: 0;
-  }
-
-  .bodyGrid {
-    display: block;
-  }
-
-  .sidebar {
-    position: static;
-    height: auto;
-    border-right: 0;
-    border-bottom: 1px solid var(--line-ink);
+  .brandMark {
+    width: 33px;
+    height: 33px;
   }
 
-  .sidebarNumbers,
-  .catalogButton,
-  .sidebarRule,
-  .sidebarFoot {
+  .brand small,
+  .topMeta > span {
     display: none;
   }
 
-  .sidebarSearch {
-    margin-bottom: 8px;
-  }
-
-  .sidebarLabel {
-    padding: 0 14px 7px;
-  }
-
-  .queueNav {
-    display: flex;
-    gap: 6px;
-    overflow-x: auto;
-    padding: 0 13px 11px;
+  .topMeta {
+    gap: 4px;
+    padding: 0 9px;
   }
 
-  .queueNav > a {
-    width: auto;
-    min-width: 154px;
-    flex: 0 0 auto;
-    padding: 8px;
-    border-color: var(--line);
+  .workspaceLayout {
+    min-height: calc(100vh - 58px);
   }
 
-  .main {
-    padding: 14px 12px 16px;
+  .content {
+    padding: 14px 12px 12px;
+    background-size: 24px 24px;
   }
 
   .hero {
-    min-height: 94px;
-    padding: 18px;
+    min-height: 150px;
+    grid-template-columns: 1fr;
+    padding: 20px;
   }
 
-  .heroTitle {
+  .hero > div:first-child {
     flex-wrap: wrap;
-    gap: 8px;
   }
 
-  .heroTitle b {
-    margin-left: 28px;
+  .hero p {
+    grid-column: 1;
+    margin-left: 0;
+    line-height: 1.6;
+  }
+
+  .heroActions {
+    grid-column: 1;
+    grid-row: auto;
+    justify-content: flex-start;
   }
 
   .summaryGrid,
   .focusBar,
-  .queuePanel {
+  .registryPanel {
     margin-top: 12px;
   }
 
-  .summaryGrid {
-    gap: 12px;
+  .metricGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .summaryCard {
-    padding: 15px;
+  .metricGrid > :global(.ant-statistic),
+  .utilizationMetric {
+    border-right: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
   }
 
-  .actionRow {
-    flex-wrap: wrap;
+  .metricGrid > :nth-child(2n) {
+    border-right: 0;
+  }
+
+  .metricGrid > :nth-child(n+5) {
+    border-bottom: 0;
   }
 
   .focusBar {
@@ -1504,129 +1062,139 @@
   }
 
   .focusBar > code,
-  .focusStats {
-    display: none;
+  .focusMetrics {
+    grid-column: 2 / span 2;
   }
 
-  .queueToolbar {
-    min-height: auto;
-    padding: 14px;
+  .focusMetrics {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
   }
 
-  .queueToolbar p {
-    line-height: 1.5;
+  .focusBar > :global(.ant-space) {
+    grid-column: 2 / span 2;
   }
 
-  .queueTable,
-  .queueTable tbody,
-  .queueTable tr,
-  .queueTable td {
-    display: block;
+  .sectionHeader {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .sectionHeader > :global(.ant-space) {
     width: 100%;
   }
 
-  .queueTable {
-    min-width: 0;
+  .sectionHeader > :global(.ant-space) :global(.ant-select) {
+    flex: 1;
   }
 
-  .queueTable thead {
+  .desktopTable {
     display: none;
   }
 
-  .queueTable tbody {
+  .queueMobileList {
     display: grid;
-    gap: 9px;
-    padding: 10px;
-    background: var(--wash);
-  }
-
-  .queueTable tbody tr {
-    overflow: hidden;
-    background: var(--panel);
-    border: 1px solid var(--line-ink);
-    border-radius: 6px;
+    gap: 10px;
+    padding: 12px;
   }
 
-  .queueTable tbody .activeRow {
-    background: var(--panel);
-    border-left: 3px solid var(--accent);
+  .queueMobileList > :global(.ant-card) {
+    border-color: var(--line-ink);
+    box-shadow: none;
   }
 
-  .queueTable td {
-    min-height: 38px;
+  .mobileMetricGrid {
     display: grid;
-    grid-template-columns: 104px minmax(0, 1fr);
-    align-items: center;
-    padding: 9px 11px;
-    border-bottom: 1px solid var(--line);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    margin-bottom: 13px;
   }
 
-  .queueTable td::before {
-    content: attr(data-label);
-    color: var(--faint);
-    font: 700 8px/1 var(--font-mono);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
+  .mobileMetricGrid span {
+    padding: 9px;
+    background: var(--wash);
+    border-radius: 5px;
   }
 
-  .queueIdentity {
-    min-width: 0;
+  .mobileMetricGrid small,
+  .mobileMetricGrid b {
+    display: block;
   }
 
-  .queueTable td:last-child {
-    border-bottom: 0;
+  .mobileMetricGrid small {
+    color: var(--faint);
+    font: 8px/1 var(--font-mono);
   }
 
-  .capacityTrack {
-    width: 88px;
+  .mobileMetricGrid b {
+    overflow: hidden;
+    margin-top: 7px;
+    font: 700 14px/1 var(--font-mono);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .cronStack {
-    grid-template-columns: 1fr;
+  .queueMobileList :global(.ant-progress) {
+    margin-bottom: 12px;
   }
 
   .footer {
-    display: grid;
+    align-items: flex-start;
+    flex-direction: column;
   }
 
-  .formGrid,
-  .ruleGroup {
+  .cronFields,
+  .formGrid {
     grid-template-columns: 1fr;
+    gap: 0;
   }
+}
 
-  .dialogBackdrop {
-    padding: 10px;
-  }
-
-  .dialog {
-    max-height: calc(100vh - 20px);
-    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.16);
+@media (max-width: 380px) {
+  .brand {
+    padding: 0 10px;
   }
-}
 
-@media (max-width: 420px) {
   .brand strong {
     font-size: 12px;
   }
 
-  .brandMark {
-    width: 34px;
-    height: 34px;
+  .topMeta :global(.ant-tag) {
+    display: none;
   }
 
-  .serviceState span {
-    display: none;
+  .hero h1 {
+    font-size: 18px;
+  }
+
+  .deliveryGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .deliveryGrid > div,
+  .deliveryGrid > div:nth-child(2n),
+  .deliveryGrid > div:nth-child(n+3) {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
   }
 
-  .metricStrip > span {
-    padding: 0 6px;
+  .deliveryGrid > div:last-child {
+    border-bottom: 0;
   }
+}
 
-  .metricStrip strong {
-    font-size: 17px;
+@media (forced-colors: active) {
+  .hero,
+  .registryPanel,
+  .summaryCard,
+  .focusBar,
+  .diagnosticCard {
+    border: 1px solid CanvasText !important;
   }
 
-  .queueTable td {
-    grid-template-columns: 88px minmax(0, 1fr);
+  .queueGlyph,
+  .brandMark {
+    forced-color-adjust: none;
   }
 }
diff --git a/admin-dashboard/src/theme/control-room-theme.tsx b/admin-dashboard/src/theme/control-room-theme.tsx
new file mode 100644
index 0000000..150e23f
--- /dev/null
+++ b/admin-dashboard/src/theme/control-room-theme.tsx
@@ -0,0 +1,118 @@
+import { App as AntApp, ConfigProvider, theme as antTheme, type ThemeConfig } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+
+export type ColorMode = 'light' | 'dark';
+
+interface ColorModeContextValue {
+  mode: ColorMode;
+  toggleMode: () => void;
+}
+
+const ColorModeContext = createContext<ColorModeContextValue | null>(null);
+
+const FONT_SANS = '"Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
+const FONT_MONO = '"SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace';
+
+function themeConfig(mode: ColorMode): ThemeConfig {
+  const dark = mode === 'dark';
+  return {
+    algorithm: [dark ? antTheme.darkAlgorithm : antTheme.defaultAlgorithm, antTheme.compactAlgorithm],
+    cssVar: { key: 'waitqueue' },
+    token: {
+      colorPrimary: '#008f68',
+      colorInfo: '#008f68',
+      colorSuccess: '#00a870',
+      colorWarning: '#d46b08',
+      colorError: '#c9363e',
+      colorBgBase: dark ? '#141618' : '#f5f6f5',
+      colorTextBase: dark ? '#f3f5f4' : '#1b1d1f',
+      colorBorder: dark ? '#3d4144' : '#cfd2d1',
+      colorBorderSecondary: dark ? '#303437' : '#e3e5e4',
+      borderRadius: 8,
+      borderRadiusLG: 8,
+      fontFamily: FONT_SANS,
+      fontFamilyCode: FONT_MONO,
+      fontSize: 14,
+      controlHeight: 36,
+      lineWidth: 1,
+      motionDurationFast: '0.12s',
+      motionDurationMid: '0.18s',
+      boxShadow: dark ? '0 8px 20px rgba(0,0,0,.2)' : '0 8px 20px rgba(23,30,27,.06)',
+    },
+    components: {
+      Layout: {
+        bodyBg: dark ? '#141618' : '#f5f6f5',
+        headerBg: dark ? '#1b1e20' : '#ffffff',
+        siderBg: dark ? '#1b1e20' : '#ffffff',
+      },
+      Card: {
+        headerBg: 'transparent',
+        paddingLG: 20,
+      },
+      Table: {
+        headerBg: dark ? '#232729' : '#f3f5f4',
+        headerColor: dark ? '#c9cfcc' : '#555b58',
+        rowHoverBg: dark ? '#202a27' : '#f0faf6',
+        borderColor: dark ? '#363a3d' : '#dfe2e0',
+        cellPaddingBlock: 12,
+        cellPaddingInline: 14,
+      },
+      Menu: {
+        itemBg: 'transparent',
+        itemSelectedBg: dark ? '#16352b' : '#e7f7f1',
+        itemSelectedColor: dark ? '#5ee0b6' : '#006f52',
+        itemHoverBg: dark ? '#252a2c' : '#f1f3f2',
+        itemBorderRadius: 7,
+      },
+      Button: {
+        primaryShadow: 'none',
+        defaultShadow: 'none',
+        dangerShadow: 'none',
+      },
+      Statistic: {
+        contentFontSize: 24,
+        titleFontSize: 12,
+      },
+      Progress: {
+        defaultColor: '#008f68',
+        remainingColor: dark ? '#303537' : '#e7eae8',
+      },
+    },
+  };
+}
+
+export function ControlRoomTheme({ children }: { children: ReactNode }) {
+  const [mode, setMode] = useState<ColorMode>('light');
+
+  useEffect(() => {
+    const saved = window.localStorage.getItem('waitqueue-theme');
+    const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    setMode(saved === 'dark' || saved === 'light' ? saved : preferred);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = mode;
+    document.documentElement.style.colorScheme = mode;
+    window.localStorage.setItem('waitqueue-theme', mode);
+  }, [mode]);
+
+  const value = useMemo<ColorModeContextValue>(
+    () => ({ mode, toggleMode: () => setMode((current) => (current === 'light' ? 'dark' : 'light')) }),
+    [mode]
+  );
+
+  return (
+    <ConfigProvider locale={zhCN} componentSize="middle" theme={themeConfig(mode)}>
+      <AntApp>
+        <ColorModeContext.Provider value={value}>{children}</ColorModeContext.Provider>
+      </AntApp>
+    </ConfigProvider>
+  );
+}
+
+export function useColorMode(): ColorModeContextValue {
+  const context = useContext(ColorModeContext);
+  if (!context) throw new Error('useColorMode must be used inside ControlRoomTheme');
+  return context;
+}
diff --git a/compose.yaml b/compose.yaml
index 0b35c2c..6cf8cf6 100644
--- a/compose.yaml
+++ b/compose.yaml
@@ -95,7 +95,7 @@ services:
         - CMD
         - node
         - -e
-        - "fetch('http://127.0.0.1:3000/waitqueue/ready').then((response) => process.exit(response.ok ? 0 : 1)).catch(() => process.exit(1))"
+        - "fetch('http://127.0.0.1:3000/health/ready').then((response) => process.exit(response.ok ? 0 : 1)).catch(() => process.exit(1))"
       interval: 10s
       timeout: 5s
       retries: 10
diff --git a/wait-queue/src/app.ts b/wait-queue/src/app.ts
index ccb5bbf..98c3bb7 100644
--- a/wait-queue/src/app.ts
+++ b/wait-queue/src/app.ts
@@ -5,7 +5,7 @@ import bodyParser from 'koa-bodyparser'
 import { CronJob } from 'cron'
 import { createQueueRoutes } from './routes/queue'
 import { createSchedulerRoutes } from './routes/scheduler'
-import { adminRoutes } from './routes/admin'
+import { createAdminRoutes } from './routes/admin'
 import { errorHandler } from './middleware/error_handler'
 import { auditMiddleware, createBearerAuth, createRateLimit } from './middleware/security'
 import response from './utils/response'
@@ -29,6 +29,16 @@ import {
 } from './security/config'
 import { FixedWindowRateLimiter } from './security/rate_limit'
 import { HookUrlPolicy } from './security/hook_url_policy'
+import { QueueDao } from './dao/queue_dao'
+import {
+	PROMETHEUS_CONTENT_TYPE,
+	waitQueueMetrics,
+	WaitQueueMetrics,
+} from './observability/metrics'
+import {
+	CoalescedRuntimeSnapshotReader,
+	RuntimeSnapshotReader,
+} from './observability/runtime_snapshot'
 
 const warnSecurityConfiguration = createSecurityConfigurationWarner(logger)
 
@@ -37,12 +47,18 @@ export interface CreateAppOptions {
 	security?: SecurityConfigInput
 	rateLimitClock?: () => number
 	requestLogStream?: NodeJS.WritableStream
+	metrics?: WaitQueueMetrics
+	runtimeSnapshotReader?: RuntimeSnapshotReader
 }
 
 export function createApp(options: CreateAppOptions = {}): Koa {
 	const app = new Koa()
 	const readinessCheck = options.readinessCheck ?? createReadinessCheck()
 	const security = createSecurityConfig(options.security ?? env.security)
+	const metrics = options.metrics ?? waitQueueMetrics
+	const runtimeSnapshotReader =
+		options.runtimeSnapshotReader ??
+		new CoalescedRuntimeSnapshotReader(redisCli.getInstance()).read
 	const hookUrlPolicy = new HookUrlPolicy(security.hookUrlAllowlist, {
 		allowPrivate: security.allowPrivateHookUrls,
 	})
@@ -78,9 +94,9 @@ export function createApp(options: CreateAppOptions = {}): Koa {
 		}
 	})
 
-	const router = new Router({ prefix: '/waitqueue', sensitive: true })
-	router.get('/health', (ctx) => response.success(ctx, { status: 'ok' }))
-	router.get('/ready', async (ctx) => {
+	const router = new Router({ sensitive: true })
+	const livenessHandler = (ctx: Koa.Context) => response.success(ctx, { status: 'ok' })
+	const readinessHandler = async (ctx: Koa.Context) => {
 		ctx.set('Cache-Control', 'no-store')
 		let readiness: ReadinessResult = {
 			ready: false,
@@ -101,10 +117,30 @@ export function createApp(options: CreateAppOptions = {}): Koa {
 			return
 		}
 		response.success(ctx, { status: 'ready', dependencies: readiness.dependencies })
-	})
-	router.use('/admin', adminRoutes.routes())
-	router.use('/scheduler', createSchedulerRoutes(hookUrlPolicy).routes())
-	router.use('/queue', createQueueRoutes(hookUrlPolicy).routes())
+	}
+	const metricsHandler = async (ctx: Koa.Context) => {
+		ctx.set('Cache-Control', 'no-store')
+		ctx.set('Content-Type', PROMETHEUS_CONTENT_TYPE)
+		const queues = await QueueDao.findAll({
+			attributes: ['id', 'namespace'],
+			order: [['id', 'ASC']],
+		})
+		ctx.body = metrics.render(await runtimeSnapshotReader(queues))
+	}
+
+	// Standard probe/scrape paths are canonical. Namespaced aliases keep all
+	// existing clients and the same-origin dashboard proxy backward compatible.
+	router.get('/health/live', livenessHandler)
+	router.get('/health/ready', readinessHandler)
+	router.get('/metrics', metricsHandler)
+	router.get('/waitqueue/health', livenessHandler)
+	router.get('/waitqueue/health/live', livenessHandler)
+	router.get('/waitqueue/ready', readinessHandler)
+	router.get('/waitqueue/health/ready', readinessHandler)
+	router.get('/waitqueue/metrics', metricsHandler)
+	router.use('/waitqueue/admin', createAdminRoutes(runtimeSnapshotReader, metrics).routes())
+	router.use('/waitqueue/scheduler', createSchedulerRoutes(hookUrlPolicy).routes())
+	router.use('/waitqueue/queue', createQueueRoutes(hookUrlPolicy).routes())
 
 	app.use(router.routes())
 	app.use(
diff --git a/wait-queue/src/common/logger.ts b/wait-queue/src/common/logger.ts
index ddb41d0..ed3227a 100644
--- a/wait-queue/src/common/logger.ts
+++ b/wait-queue/src/common/logger.ts
@@ -42,8 +42,15 @@ function safeErrorIdentifier(value: unknown, fallback: string): string {
 }
 
 const SAFE_REQUEST_PATHS = new Set([
+	'/health/live',
+	'/health/ready',
+	'/metrics',
+	'/metrics/',
 	'/waitqueue/health',
+	'/waitqueue/health/live',
 	'/waitqueue/ready',
+	'/waitqueue/health/ready',
+	'/waitqueue/metrics',
 	'/waitqueue/admin/overview',
 	'/waitqueue/admin/deadLetters',
 	'/waitqueue/admin/deadLetters/replay',
diff --git a/wait-queue/src/lib/task_manager.ts b/wait-queue/src/lib/task_manager.ts
index c489d73..8c88e93 100644
--- a/wait-queue/src/lib/task_manager.ts
+++ b/wait-queue/src/lib/task_manager.ts
@@ -12,6 +12,7 @@ import {
 	RedisTaskStore,
 	TaskClaim,
 } from '../reliability/task_store'
+import { waitQueueMetrics, WaitQueueMetrics } from '../observability/metrics'
 
 export interface TaskStateStore {
 	claim(maxRunning: number): Promise<ClaimBatch>
@@ -28,6 +29,7 @@ export interface TaskManagerOptions {
 	reliability?: ReliabilityConfig
 	clock?: () => number
 	tokenFactory?: () => string
+	metrics?: WaitQueueMetrics
 }
 
 function acknowledgedSnapshot(taskSnapshot: Record<string, string>): Record<string, string> {
@@ -42,6 +44,7 @@ export class TaskManager extends Service {
 	private taskRunningCount: number
 	private taskRunInstance: TaskRun
 	private taskStore: TaskStateStore
+	private metrics: WaitQueueMetrics
 
 	constructor(
 		ctx: Context,
@@ -60,6 +63,7 @@ export class TaskManager extends Service {
 		this.queueId = queueId
 		this.namespace = namespace
 		this.taskRunningCount = taskRunningCount
+		this.metrics = options.metrics ?? waitQueueMetrics
 		this.taskStore =
 			options.taskStore ??
 			new RedisTaskStore(
@@ -71,7 +75,8 @@ export class TaskManager extends Service {
 				options.tokenFactory
 			)
 		this.taskRunInstance =
-			options.taskRunner ?? new TaskRun(this.ctx, url, queueId, namespace, hookUrlPolicy)
+			options.taskRunner ??
+			new TaskRun(this.ctx, url, queueId, namespace, hookUrlPolicy, undefined, this.metrics)
 	}
 
 	private async dispatchTask(claim: TaskClaim): Promise<void> {
@@ -81,6 +86,13 @@ export class TaskManager extends Service {
 			this.baseLogError('task trigger failed', error)
 			try {
 				const transition = await this.taskStore.fail(claim)
+				if (transition.outcome === 'retry') {
+					this.metrics.recordRetry(this.queueId, 'scheduled', 'callback_failed')
+				} else if (transition.outcome === 'dead') {
+					this.metrics.recordRetry(this.queueId, 'dead_lettered', 'callback_failed')
+				} else {
+					this.metrics.recordClaim(this.queueId, 'stale')
+				}
 				this.selfLog('task trigger failure transitioned', {
 					outcome: transition.outcome,
 					retryCount: transition.retryCount,
@@ -93,6 +105,10 @@ export class TaskManager extends Service {
 
 		try {
 			const acknowledged = await this.taskStore.acknowledge(claim)
+			this.metrics.recordClaim(
+				this.queueId,
+				acknowledged ? 'acknowledged' : 'stale'
+			)
 			this.selfLog(acknowledged ? 'task trigger acknowledged' : 'stale task trigger acknowledgement ignored')
 		} catch (redisError) {
 			// The pending lease remains recoverable. The callback may be delivered more than once,
@@ -111,6 +127,26 @@ export class TaskManager extends Service {
 
 		try {
 			const batch = await this.taskStore.claim(taskRunningCount)
+			this.metrics.recordClaim(this.queueId, 'claimed', batch.claims.length)
+			this.metrics.recordClaim(this.queueId, 'recovered', batch.recovered)
+			this.metrics.recordRetry(
+				this.queueId,
+				'scheduled',
+				'lease_expired',
+				Math.max(batch.recovered - batch.deadLettered, 0)
+			)
+			this.metrics.recordRetry(
+				this.queueId,
+				'dead_lettered',
+				'lease_expired',
+				batch.deadLettered
+			)
+			this.metrics.recordRetry(
+				this.queueId,
+				'promoted',
+				'not_applicable',
+				batch.promoted
+			)
 			this.selfLog('runTask: state transition summary', {
 				claimed: batch.claims.length,
 				recovered: batch.recovered,
diff --git a/wait-queue/src/lib/task_run.ts b/wait-queue/src/lib/task_run.ts
index c2575f4..f72de2a 100644
--- a/wait-queue/src/lib/task_run.ts
+++ b/wait-queue/src/lib/task_run.ts
@@ -6,6 +6,7 @@ import { isIP } from 'node:net'
 import { Service } from './service'
 import { env } from '../conf/env'
 import { HookUrlPolicy } from '../security/hook_url_policy'
+import { waitQueueMetrics, WaitQueueMetrics } from '../observability/metrics'
 
 const MAX_CALLBACK_RESPONSE_BYTES = 1_048_576
 
@@ -133,6 +134,7 @@ export class TaskRun extends Service {
 	private namespace: string
 	private hookUrlPolicy: HookUrlPolicy
 	private callbackTransport: CallbackTransport
+	private metrics: WaitQueueMetrics
 
 	constructor(
 		ctx: Context,
@@ -142,7 +144,8 @@ export class TaskRun extends Service {
 		hookUrlPolicy: HookUrlPolicy = new HookUrlPolicy(env.security.hookUrlAllowlist, {
 			allowPrivate: env.security.allowPrivateHookUrls,
 		}),
-		callbackTransport: CallbackTransport = postCallback
+		callbackTransport: CallbackTransport = postCallback,
+		metrics: WaitQueueMetrics = waitQueueMetrics
 	) {
 		super(ctx)
 		this.url = url
@@ -150,10 +153,11 @@ export class TaskRun extends Service {
 		this.namespace = namespace
 		this.hookUrlPolicy = hookUrlPolicy
 		this.callbackTransport = callbackTransport
+		this.metrics = metrics
 	}
 
 	async run(taskId: string): Promise<void> {
-		await this._run(taskId)
+		await this.observeCallback(TASK_TYPE_CODE.run, () => this._run(taskId))
 	}
 
 	private async _run(taskId: string): Promise<void> {
@@ -166,14 +170,32 @@ export class TaskRun extends Service {
 	 */
 	async checkTaskStatus(taskIds: string[]): Promise<string[]> {
 		if (!taskIds?.length) return []
-		return this.taskIdsFromResponse(await this._fetch(TASK_TYPE_CODE.check, taskIds), TASK_TYPE_CODE.check)
+		return this.observeCallback(TASK_TYPE_CODE.check, async () =>
+			this.taskIdsFromResponse(
+				await this._fetch(TASK_TYPE_CODE.check, taskIds),
+				TASK_TYPE_CODE.check
+			)
+		)
 	}
 
 	/**
 	 * @returns 返回长时间未有结果的任务 id
 	 */
 	async expireTasks(): Promise<string[]> {
-		return this.taskIdsFromResponse(await this._fetch(TASK_TYPE_CODE.expire), TASK_TYPE_CODE.expire)
+		return this.observeCallback(TASK_TYPE_CODE.expire, async () =>
+			this.taskIdsFromResponse(await this._fetch(TASK_TYPE_CODE.expire), TASK_TYPE_CODE.expire)
+		)
+	}
+
+	private async observeCallback<T>(type: TASK_TYPE_CODE, callback: () => Promise<T>): Promise<T> {
+		try {
+			const result = await callback()
+			this.metrics.recordCallback(this.queueId, type, 'success')
+			return result
+		} catch (error) {
+			this.metrics.recordCallback(this.queueId, type, 'failure')
+			throw error
+		}
 	}
 
 	private taskIdsFromResponse(response: any, type: TASK_TYPE_CODE): string[] {
diff --git a/wait-queue/src/middleware/security.ts b/wait-queue/src/middleware/security.ts
index 6e2e35d..39431d3 100644
--- a/wait-queue/src/middleware/security.ts
+++ b/wait-queue/src/middleware/security.ts
@@ -6,10 +6,22 @@ import { safeLogPath } from '../common/logger'
 
 export type AuditRejection = 'authentication' | 'rate_limit'
 
-const PUBLIC_CONTROL_PATHS = new Set(['/waitqueue/health', '/waitqueue/ready'])
+const PUBLIC_CONTROL_PATHS = new Set([
+	'/health/live',
+	'/health/ready',
+	'/waitqueue/health',
+	'/waitqueue/health/live',
+	'/waitqueue/ready',
+	'/waitqueue/health/ready',
+])
 
 function isControlPath(path: string): boolean {
-	return path === '/waitqueue' || path.startsWith('/waitqueue/')
+	return (
+		path === '/metrics' ||
+		path.startsWith('/metrics/') ||
+		path === '/waitqueue' ||
+		path.startsWith('/waitqueue/')
+	)
 }
 
 function isSecurityExempt(ctx: Context): boolean {
diff --git a/wait-queue/src/observability/metrics.ts b/wait-queue/src/observability/metrics.ts
new file mode 100644
index 0000000..f1f3938
--- /dev/null
+++ b/wait-queue/src/observability/metrics.ts
@@ -0,0 +1,188 @@
+import { FailureReason } from '../reliability/task_store'
+import { QueueRuntimeSnapshot } from './runtime_snapshot'
+
+export const PROMETHEUS_CONTENT_TYPE = 'text/plain; version=0.0.4; charset=utf-8'
+
+export type CallbackType = 'run' | 'check' | 'expire'
+export type CallbackOutcome = 'success' | 'failure'
+export type ClaimOutcome = 'claimed' | 'recovered' | 'acknowledged' | 'stale'
+export type RetryOutcome = 'scheduled' | 'promoted' | 'dead_lettered'
+export type RetryReason = FailureReason | 'not_applicable'
+
+interface CounterSample {
+	labels: Readonly<Record<string, string>>
+	value: number
+}
+
+class CounterFamily {
+	private readonly samples = new Map<string, CounterSample>()
+
+	constructor(
+		readonly name: string,
+		readonly help: string,
+		private readonly labelNames: readonly string[]
+	) {}
+
+	increment(labels: Readonly<Record<string, string>>, amount = 1): void {
+		if (!Number.isSafeInteger(amount) || amount <= 0) return
+		const normalized = Object.fromEntries(
+			this.labelNames.map((labelName) => [labelName, labels[labelName] ?? ''])
+		)
+		const key = JSON.stringify(this.labelNames.map((labelName) => normalized[labelName]))
+		const current = this.samples.get(key)
+		this.samples.set(key, { labels: normalized, value: (current?.value ?? 0) + amount })
+	}
+
+	entries(): CounterSample[] {
+		return [...this.samples.values()].sort((left, right) =>
+			JSON.stringify(left.labels).localeCompare(JSON.stringify(right.labels))
+		)
+	}
+
+	labelsFor(sample: CounterSample): readonly [string, string][] {
+		return this.labelNames.map((labelName) => [labelName, sample.labels[labelName]])
+	}
+
+	sum(matcher: Readonly<Record<string, string>>): number {
+		return [...this.samples.values()].reduce(
+			(total, sample) =>
+				Object.entries(matcher).every(([name, value]) => sample.labels[name] === value)
+					? total + sample.value
+					: total,
+			0
+		)
+	}
+}
+
+function escapeHelp(value: string): string {
+	return value.replace(/\\/g, '\\\\').replace(/\n/g, '\\n')
+}
+
+function escapeLabel(value: string): string {
+	return value.replace(/\\/g, '\\\\').replace(/\n/g, '\\n').replace(/"/g, '\\"')
+}
+
+function formatLabels(labels: readonly (readonly [string, string])[]): string {
+	if (!labels.length) return ''
+	return `{${labels.map(([name, value]) => `${name}="${escapeLabel(value)}"`).join(',')}}`
+}
+
+function metricHeader(lines: string[], name: string, help: string, type: 'counter' | 'gauge'): void {
+	lines.push(`# HELP ${name} ${escapeHelp(help)}`)
+	lines.push(`# TYPE ${name} ${type}`)
+}
+
+/**
+ * A deliberately small in-process Prometheus registry. Its public methods fix
+ * every label name and enum value so task IDs, callback URLs, tokens, and raw
+ * errors cannot accidentally become unbounded labels.
+ */
+export class WaitQueueMetrics {
+	readonly startedAt: string
+	private readonly callbacks = new CounterFamily(
+		'waitqueue_callback_attempts_total',
+		'Callback invocations by queue, callback type, and outcome.',
+		['queue_id', 'type', 'outcome']
+	)
+	private readonly claims = new CounterFamily(
+		'waitqueue_claim_transitions_total',
+		'Claim state transitions by queue and outcome.',
+		['queue_id', 'outcome']
+	)
+	private readonly retries = new CounterFamily(
+		'waitqueue_retry_transitions_total',
+		'Retry and dead-letter transitions by queue, outcome, and controlled reason.',
+		['queue_id', 'outcome', 'reason']
+	)
+
+	constructor(clock: () => number = Date.now) {
+		const startedAt = new Date(clock())
+		if (Number.isNaN(startedAt.valueOf())) throw new Error('metrics clock returned an invalid timestamp')
+		this.startedAt = startedAt.toISOString()
+	}
+
+	recordCallback(queueId: number, type: CallbackType, outcome: CallbackOutcome): void {
+		this.callbacks.increment({ queue_id: String(queueId), type, outcome })
+	}
+
+	recordClaim(queueId: number, outcome: ClaimOutcome, amount = 1): void {
+		this.claims.increment({ queue_id: String(queueId), outcome }, amount)
+	}
+
+	recordRetry(
+		queueId: number,
+		outcome: RetryOutcome,
+		reason: RetryReason,
+		amount = 1
+	): void {
+		this.retries.increment({ queue_id: String(queueId), outcome, reason }, amount)
+	}
+
+	queueSnapshot(queueId: number): {
+		callbacks: { success: number; failure: number }
+		claims: { claimed: number; recovered: number }
+	} {
+		const queue = { queue_id: String(queueId) }
+		return {
+			callbacks: {
+				success: this.callbacks.sum({ ...queue, outcome: 'success' }),
+				failure: this.callbacks.sum({ ...queue, outcome: 'failure' }),
+			},
+			claims: {
+				claimed: this.claims.sum({ ...queue, outcome: 'claimed' }),
+				recovered: this.claims.sum({ ...queue, outcome: 'recovered' }),
+			},
+		}
+	}
+
+	render(runtime: readonly QueueRuntimeSnapshot[]): string {
+		const lines: string[] = []
+		const gauges = [
+			{
+				name: 'waitqueue_queue_waiting_tasks',
+				help: 'Tasks currently waiting to be claimed.',
+				value: (queue: QueueRuntimeSnapshot): number | null => queue.waiting,
+			},
+			{
+				name: 'waitqueue_queue_running_tasks',
+				help: 'Tasks currently occupying a running slot.',
+				value: (queue: QueueRuntimeSnapshot): number | null => queue.running,
+			},
+			{
+				name: 'waitqueue_queue_retrying_tasks',
+				help: 'Tasks currently delayed in the retry schedule.',
+				value: (queue: QueueRuntimeSnapshot): number | null => queue.retrying,
+			},
+			{
+				name: 'waitqueue_queue_dead_letter_tasks',
+				help: 'Tasks currently retained in the dead-letter queue.',
+				value: (queue: QueueRuntimeSnapshot): number | null => queue.deadLetters,
+			},
+			{
+				name: 'waitqueue_queue_oldest_waiting_seconds',
+				help: 'Age in seconds of the oldest waiting task; absent when empty or unknown.',
+				value: (queue: QueueRuntimeSnapshot): number | null => queue.oldestWaitingAgeSeconds,
+			},
+		]
+		for (const gauge of gauges) {
+			metricHeader(lines, gauge.name, gauge.help, 'gauge')
+			for (const queue of runtime) {
+				const value = gauge.value(queue)
+				if (value === null) continue
+				lines.push(
+					`${gauge.name}${formatLabels([['queue_id', String(queue.queueId)]])} ${value}`
+				)
+			}
+		}
+
+		for (const family of [this.callbacks, this.claims, this.retries]) {
+			metricHeader(lines, family.name, family.help, 'counter')
+			for (const sample of family.entries()) {
+				lines.push(`${family.name}${formatLabels(family.labelsFor(sample))} ${sample.value}`)
+			}
+		}
+		return `${lines.join('\n')}\n`
+	}
+}
+
+export const waitQueueMetrics = new WaitQueueMetrics()
diff --git a/wait-queue/src/observability/runtime_snapshot.ts b/wait-queue/src/observability/runtime_snapshot.ts
new file mode 100644
index 0000000..da6d071
--- /dev/null
+++ b/wait-queue/src/observability/runtime_snapshot.ts
@@ -0,0 +1,170 @@
+import { Redis } from 'ioredis'
+import {
+	getDeadLetterOrderKey,
+	getEnqueuedAtKey,
+	getReliabilityMigrationWaitingKey,
+	getRetryScheduleKey,
+	getRunningKey,
+	getWaitingKey,
+} from '../common/cache'
+
+export interface RuntimeQueueIdentity {
+	id: number
+	namespace: string
+}
+
+export interface QueueRuntimeSnapshot {
+	queueId: number
+	namespace: string
+	waiting: number
+	running: number
+	retrying: number
+	deadLetters: number
+	oldestWaitingAt: string | null
+	oldestWaitingAgeSeconds: number | null
+}
+
+export type RuntimeSnapshotReader = (
+	queues: readonly RuntimeQueueIdentity[]
+) => Promise<QueueRuntimeSnapshot[]>
+
+type PipelineResult = [Error | null, unknown] | undefined
+
+function pipelineValue(result: PipelineResult): unknown {
+	if (!result) throw new Error('redis pipeline returned an incomplete result')
+	const [error, value] = result
+	if (error) throw error
+	return value
+}
+
+function pipelineCount(result: PipelineResult): number {
+	const count = Number(pipelineValue(result))
+	if (!Number.isSafeInteger(count) || count < 0) {
+		throw new Error('redis pipeline returned an invalid count')
+	}
+	return count
+}
+
+function optionalString(result: PipelineResult): string | undefined {
+	const value = pipelineValue(result)
+	if (value === null || value === undefined) return undefined
+	return Buffer.isBuffer(value) ? value.toString('utf8') : String(value)
+}
+
+function oldestWaiting(
+	enqueuedAt: unknown,
+	now: number
+): Pick<QueueRuntimeSnapshot, 'oldestWaitingAt' | 'oldestWaitingAgeSeconds'> {
+	if (enqueuedAt === null || enqueuedAt === undefined) {
+		return { oldestWaitingAt: null, oldestWaitingAgeSeconds: null }
+	}
+	const timestamp = Number(Buffer.isBuffer(enqueuedAt) ? enqueuedAt.toString('utf8') : enqueuedAt)
+	const date = new Date(timestamp)
+	if (!Number.isSafeInteger(timestamp) || timestamp < 0 || Number.isNaN(date.valueOf())) {
+		return { oldestWaitingAt: null, oldestWaitingAgeSeconds: null }
+	}
+	return {
+		oldestWaitingAt: date.toISOString(),
+		oldestWaitingAgeSeconds: Math.floor(Math.max(now - timestamp, 0) / 1000),
+	}
+}
+
+/**
+ * Reads a bounded, task-id-free runtime snapshot. Waiting is the sum of the
+ * steady-state FIFO and the temporary FIFO used by the bounded legacy migration.
+ * The oldest item is always at the right side of those lists, so this remains
+ * O(queue count) instead of scanning every waiting task.
+ */
+export async function readQueueRuntimeSnapshots(
+	redis: Redis,
+	queues: readonly RuntimeQueueIdentity[],
+	clock: () => number = Date.now
+): Promise<QueueRuntimeSnapshot[]> {
+	if (!queues.length) return []
+
+	const pipeline = redis.pipeline()
+	for (const queue of queues) {
+		pipeline.llen(getWaitingKey(queue.namespace, queue.id))
+		pipeline.llen(getReliabilityMigrationWaitingKey(queue.namespace, queue.id))
+		pipeline.hlen(getRunningKey(queue.namespace, queue.id))
+		pipeline.zcard(getRetryScheduleKey(queue.namespace, queue.id))
+		pipeline.zcard(getDeadLetterOrderKey(queue.namespace, queue.id))
+		pipeline.lindex(getWaitingKey(queue.namespace, queue.id), -1)
+		pipeline.lindex(getReliabilityMigrationWaitingKey(queue.namespace, queue.id), -1)
+	}
+
+	const counts = await pipeline.exec()
+	if (!counts) throw new Error('redis pipeline did not return a result')
+
+	const oldestTaskIds = queues.map((_queue, index) => {
+		const offset = index * 7
+		const steadyStateOldest = optionalString(counts[offset + 5])
+		const migrationOldest = optionalString(counts[offset + 6])
+		return migrationOldest ?? steadyStateOldest
+	})
+	const enqueuedAtPipeline = redis.pipeline()
+	oldestTaskIds.forEach((taskId, index) => {
+		if (taskId !== undefined) {
+			enqueuedAtPipeline.hget(getEnqueuedAtKey(queues[index].namespace, queues[index].id), taskId)
+		}
+	})
+	const timestampResults = oldestTaskIds.some((taskId) => taskId !== undefined)
+		? await enqueuedAtPipeline.exec()
+		: []
+	if (!timestampResults) throw new Error('redis pipeline did not return a result')
+
+	const now = Math.floor(clock())
+	if (!Number.isSafeInteger(now) || now < 0) throw new Error('runtime snapshot clock returned an invalid timestamp')
+	let timestampIndex = 0
+	return queues.map((queue, index) => {
+		const offset = index * 7
+		const taskId = oldestTaskIds[index]
+		const enqueuedAt =
+			taskId === undefined ? undefined : pipelineValue(timestampResults[timestampIndex++])
+		return {
+			queueId: queue.id,
+			namespace: queue.namespace,
+			waiting: pipelineCount(counts[offset]) + pipelineCount(counts[offset + 1]),
+			running: pipelineCount(counts[offset + 2]),
+			retrying: pipelineCount(counts[offset + 3]),
+			deadLetters: pipelineCount(counts[offset + 4]),
+			...oldestWaiting(enqueuedAt, now),
+		}
+	})
+}
+
+/** A one-entry TTL cache that also coalesces identical in-flight Redis reads. */
+export class CoalescedRuntimeSnapshotReader {
+	private cached?: { key: string; expiresAt: number; value: QueueRuntimeSnapshot[] }
+	private inFlight?: { key: string; operation: Promise<QueueRuntimeSnapshot[]> }
+
+	constructor(
+		private readonly redis: Redis,
+		private readonly ttlMs = 1000,
+		private readonly clock: () => number = Date.now
+	) {
+		if (!Number.isSafeInteger(ttlMs) || ttlMs < 0) {
+			throw new Error('runtime snapshot TTL must be a non-negative integer')
+		}
+	}
+
+	readonly read: RuntimeSnapshotReader = async (queues) => {
+		const key = JSON.stringify(queues.map((queue) => [queue.id, queue.namespace]))
+		const now = Math.floor(this.clock())
+		if (!Number.isSafeInteger(now) || now < 0) {
+			throw new Error('runtime snapshot clock returned an invalid timestamp')
+		}
+		if (this.cached?.key === key && this.cached.expiresAt > now) return this.cached.value
+		if (this.inFlight?.key === key) return this.inFlight.operation
+
+		const operation = readQueueRuntimeSnapshots(this.redis, queues, this.clock)
+		this.inFlight = { key, operation }
+		try {
+			const value = await operation
+			this.cached = { key, expiresAt: now + this.ttlMs, value }
+			return value
+		} finally {
+			if (this.inFlight?.operation === operation) this.inFlight = undefined
+		}
+	}
+}
diff --git a/wait-queue/src/routes/admin.ts b/wait-queue/src/routes/admin.ts
index 8a4d128..85dcc38 100644
--- a/wait-queue/src/routes/admin.ts
+++ b/wait-queue/src/routes/admin.ts
@@ -5,26 +5,34 @@ import {
 	validateDeadLetterQuery,
 	validateReplayDeadLetterInput,
 } from '../utils/validation'
+import { RuntimeSnapshotReader } from '../observability/runtime_snapshot'
+import { WaitQueueMetrics } from '../observability/metrics'
 
-const adminRoutes = new Router({ sensitive: true })
+export function createAdminRoutes(
+	runtimeSnapshotReader?: RuntimeSnapshotReader,
+	metrics?: WaitQueueMetrics
+): Router {
+	const routes = new Router({ sensitive: true })
 
-adminRoutes.get('/overview', async (ctx) => {
-	ctx.set('Cache-Control', 'no-store')
-	const result = await new AdminService(ctx).overview()
-	response.success(ctx, result)
-})
+	routes.get('/overview', async (ctx) => {
+		ctx.set('Cache-Control', 'no-store')
+		const result = await new AdminService(ctx, runtimeSnapshotReader, metrics).overview()
+		response.success(ctx, result)
+	})
 
-adminRoutes.get('/deadLetters', async (ctx) => {
-	ctx.set('Cache-Control', 'no-store')
-	const result = await new AdminService(ctx).deadLetters(validateDeadLetterQuery(ctx.query))
-	response.success(ctx, result)
-})
+	routes.get('/deadLetters', async (ctx) => {
+		ctx.set('Cache-Control', 'no-store')
+		const result = await new AdminService(ctx).deadLetters(validateDeadLetterQuery(ctx.query))
+		response.success(ctx, result)
+	})
 
-adminRoutes.post('/deadLetters/replay', async (ctx) => {
-	const result = await new AdminService(ctx).replayDeadLetter(
-		validateReplayDeadLetterInput(ctx.request.body)
-	)
-	response.success(ctx, result)
-})
+	routes.post('/deadLetters/replay', async (ctx) => {
+		const result = await new AdminService(ctx).replayDeadLetter(
+			validateReplayDeadLetterInput(ctx.request.body)
+		)
+		response.success(ctx, result)
+	})
+	return routes
+}
 
-export { adminRoutes }
+export const adminRoutes = createAdminRoutes()
diff --git a/wait-queue/src/service/admin.ts b/wait-queue/src/service/admin.ts
index 8a289d2..0d14b18 100644
--- a/wait-queue/src/service/admin.ts
+++ b/wait-queue/src/service/admin.ts
@@ -4,7 +4,6 @@ import Redis from 'ioredis'
 import { Service } from '../lib/service'
 import { QueueAttributes, QueueDao } from '../dao/queue_dao'
 import { redisCli } from '../conf/redis'
-import { getRunningKey, getWaitingKey } from '../common/cache'
 import {
 	DeadLetterQuery,
 	OperationResult,
@@ -15,26 +14,27 @@ import {
 import { RedisTaskStore, DeadLetterPage } from '../reliability/task_store'
 import { env } from '../conf/env'
 import { HttpError } from '../utils/http_error'
+import {
+	readQueueRuntimeSnapshots,
+	RuntimeSnapshotReader,
+} from '../observability/runtime_snapshot'
+import { waitQueueMetrics, WaitQueueMetrics } from '../observability/metrics'
 
 function percentage(value: number, total: number): number {
 	if (total === 0) return 0
 	return Math.round((value / total) * 1000) / 10
 }
 
-function redisCount(result: [Error | null, unknown] | undefined): number {
-	if (!result) throw new Error('redis pipeline returned an incomplete result')
-	const [error, value] = result
-	if (error) throw error
-	const count = Number(value)
-	if (!Number.isFinite(count)) throw new Error('redis pipeline returned an invalid count')
-	return count
-}
-
 export class AdminService extends Service {
 	private queueDao: ModelCtor<QueueAttributes>
 	private redis: Redis
 
-	constructor(ctx: Context) {
+	constructor(
+		ctx: Context,
+		private readonly runtimeSnapshotReader: RuntimeSnapshotReader = (queues) =>
+			readQueueRuntimeSnapshots(redisCli.getInstance(), queues),
+		private readonly metrics: WaitQueueMetrics = waitQueueMetrics
+	) {
 		super(ctx)
 		this.queueDao = QueueDao
 		this.redis = redisCli.getInstance()
@@ -74,18 +74,18 @@ export class AdminService extends Service {
 
 	async overview(): Promise<QueueOverview> {
 		const queueModels = await this.queueDao.findAll({ order: [['id', 'ASC']] })
-		const pipeline = this.redis.pipeline()
-		for (const queue of queueModels) {
-			pipeline.llen(getWaitingKey(queue.namespace, queue.id))
-			pipeline.hlen(getRunningKey(queue.namespace, queue.id))
-		}
-
-		const counts = queueModels.length > 0 ? await pipeline.exec() : []
-		if (!counts) throw new Error('redis pipeline did not return a result')
+		const runtime = await this.runtimeSnapshotReader(queueModels)
 
 		const queues: QueueOverviewItem[] = queueModels.map((queue, index) => {
-			const waiting = redisCount(counts[index * 2])
-			const running = redisCount(counts[index * 2 + 1])
+			const {
+				waiting,
+				running,
+				retrying,
+				deadLetters,
+				oldestWaitingAt,
+				oldestWaitingAgeSeconds,
+			} = runtime[index]
+			const counters = this.metrics.queueSnapshot(queue.id)
 			const concurrency = queue.count
 			return {
 				queueId: queue.id,
@@ -94,6 +94,12 @@ export class AdminService extends Service {
 				concurrency,
 				waiting,
 				running,
+				retrying,
+				deadLetters,
+				oldestWaitingAt,
+				oldestWaitingAgeSeconds,
+				callbacks: counters.callbacks,
+				claims: counters.claims,
 				available: Math.max(concurrency - running, 0),
 				utilization: percentage(running, concurrency),
 				crontab: {
@@ -110,15 +116,50 @@ export class AdminService extends Service {
 				queueCount: total.queueCount + 1,
 				waiting: total.waiting + queue.waiting,
 				running: total.running + queue.running,
+				retrying: total.retrying + queue.retrying,
+				deadLetters: total.deadLetters + queue.deadLetters,
+				oldestWaitingAt:
+					queue.oldestWaitingAt &&
+					(!total.oldestWaitingAt ||
+						total.oldestWaitingAgeSeconds === null ||
+						(queue.oldestWaitingAgeSeconds !== null &&
+							queue.oldestWaitingAgeSeconds > total.oldestWaitingAgeSeconds))
+						? queue.oldestWaitingAt
+						: total.oldestWaitingAt,
+				oldestWaitingAgeSeconds:
+					queue.oldestWaitingAgeSeconds !== null &&
+					(total.oldestWaitingAgeSeconds === null ||
+						queue.oldestWaitingAgeSeconds > total.oldestWaitingAgeSeconds)
+						? queue.oldestWaitingAgeSeconds
+						: total.oldestWaitingAgeSeconds,
+				callbackSuccesses: total.callbackSuccesses + queue.callbacks.success,
+				callbackFailures: total.callbackFailures + queue.callbacks.failure,
+				claims: total.claims + queue.claims.claimed,
+				recovered: total.recovered + queue.claims.recovered,
 				capacity: total.capacity + queue.concurrency,
 				utilization: 0,
 			}),
-			{ queueCount: 0, waiting: 0, running: 0, capacity: 0, utilization: 0 }
+			{
+				queueCount: 0,
+				waiting: 0,
+				running: 0,
+				retrying: 0,
+				deadLetters: 0,
+				oldestWaitingAt: null as string | null,
+				oldestWaitingAgeSeconds: null as number | null,
+				callbackSuccesses: 0,
+				callbackFailures: 0,
+				claims: 0,
+				recovered: 0,
+				capacity: 0,
+				utilization: 0,
+			}
 		)
 		summary.utilization = percentage(summary.running, summary.capacity)
 
 		return {
 			generatedAt: new Date().toISOString(),
+			metricsStartedAt: this.metrics.startedAt,
 			summary,
 			queues,
 		}
diff --git a/wait-queue/src/types/api.ts b/wait-queue/src/types/api.ts
index a1411ad..6d1df23 100644
--- a/wait-queue/src/types/api.ts
+++ b/wait-queue/src/types/api.ts
@@ -40,6 +40,18 @@ export interface QueueOverviewItem {
 	concurrency: number
 	waiting: number
 	running: number
+	retrying: number
+	deadLetters: number
+	oldestWaitingAt: string | null
+	oldestWaitingAgeSeconds: number | null
+	callbacks: {
+		success: number
+		failure: number
+	}
+	claims: {
+		claimed: number
+		recovered: number
+	}
 	available: number
 	utilization: number
 	crontab: QueueCrontab
@@ -48,10 +60,19 @@ export interface QueueOverviewItem {
 
 export interface QueueOverview {
 	generatedAt: string
+	metricsStartedAt: string
 	summary: {
 		queueCount: number
 		waiting: number
 		running: number
+		retrying: number
+		deadLetters: number
+		oldestWaitingAt: string | null
+		oldestWaitingAgeSeconds: number | null
+		callbackSuccesses: number
+		callbackFailures: number
+		claims: number
+		recovered: number
 		capacity: number
 		utilization: number
 	}
diff --git a/wait-queue/test/admin.test.js b/wait-queue/test/admin.test.js
index 962005c..bc5b437 100644
--- a/wait-queue/test/admin.test.js
+++ b/wait-queue/test/admin.test.js
@@ -7,11 +7,15 @@ const { createApp } = require('../dist/app.js')
 const { QueueDao } = require('../dist/dao/queue_dao.js')
 const { redisCli } = require('../dist/conf/redis.js')
 const { RedisTaskStore } = require('../dist/reliability/task_store.js')
+const { WaitQueueMetrics } = require('../dist/observability/metrics.js')
 
 test('admin overview aggregates queue configuration and live Redis counts', async (t) => {
 	const redis = redisCli.getInstance()
 	const originalFindAll = QueueDao.findAll
 	const originalPipeline = redis.pipeline
+	const originalDateNow = Date.now
+	const now = 1_786_406_400_000
+	Date.now = () => now
 	QueueDao.findAll = async () => [
 		{
 			id: 7,
@@ -24,7 +28,9 @@ test('admin overview aggregates queue configuration and live Redis counts', asyn
 			updatedTime: '2026-08-10T08:00:00.000Z',
 		},
 	]
+	let pipelineNumber = 0
 	redis.pipeline = () => {
+		pipelineNumber += 1
 		const commands = []
 		return {
 			llen(key) {
@@ -35,24 +41,57 @@ test('admin overview aggregates queue configuration and live Redis counts', asyn
 				commands.push(['hlen', key])
 				return this
 			},
+			zcard(key) {
+				commands.push(['zcard', key])
+				return this
+			},
+			lindex(key, index) {
+				commands.push(['lindex', key, index])
+				return this
+			},
+			hget(key, field) {
+				commands.push(['hget', key, field])
+				return this
+			},
 			async exec() {
+				if (pipelineNumber === 1) {
+					assert.deepEqual(commands, [
+						['llen', 'TaskQueue:billing:7:waitingQueue'],
+						['llen', 'TaskQueue:billing:7:reliabilityMigrationWaitingV1'],
+						['hlen', 'TaskQueue:billing:7:runningHashKv'],
+						['zcard', 'TaskQueue:billing:7:retryScheduleZset'],
+						['zcard', 'TaskQueue:billing:7:deadLetterZset'],
+						['lindex', 'TaskQueue:billing:7:waitingQueue', -1],
+						['lindex', 'TaskQueue:billing:7:reliabilityMigrationWaitingV1', -1],
+					])
+					return [
+						[null, 3],
+						[null, 0],
+						[null, 2],
+						[null, 1],
+						[null, 2],
+						[null, 'oldest-task-never-returned'],
+						[null, null],
+					]
+				}
 				assert.deepEqual(commands, [
-					['llen', 'TaskQueue:billing:7:waitingQueue'],
-					['hlen', 'TaskQueue:billing:7:runningHashKv'],
+					[
+						'hget',
+						'TaskQueue:billing:7:enqueuedAtHashKv',
+						'oldest-task-never-returned',
+					],
 				])
-				return [
-					[null, 3],
-					[null, 2],
-				]
+				return [[null, now - 12_000]]
 			},
 		}
 	}
 	t.after(() => {
 		QueueDao.findAll = originalFindAll
 		redis.pipeline = originalPipeline
+		Date.now = originalDateNow
 	})
 
-	const server = createApp().listen(0, '127.0.0.1')
+	const server = createApp({ metrics: new WaitQueueMetrics() }).listen(0, '127.0.0.1')
 	await once(server, 'listening')
 	t.after(() => new Promise((resolve, reject) => server.close((error) => (error ? reject(error) : resolve()))))
 
@@ -65,10 +104,19 @@ test('admin overview aggregates queue configuration and live Redis counts', asyn
 	assert.equal(apiResponse.headers.get('cache-control'), 'no-store')
 	assert.equal(body.code, 0)
 	assert.equal(typeof body.data.generatedAt, 'string')
+	assert.equal(typeof body.data.metricsStartedAt, 'string')
 	assert.deepEqual(body.data.summary, {
 		queueCount: 1,
 		waiting: 3,
 		running: 2,
+		retrying: 1,
+		deadLetters: 2,
+		oldestWaitingAt: new Date(now - 12_000).toISOString(),
+		oldestWaitingAgeSeconds: 12,
+		callbackSuccesses: 0,
+		callbackFailures: 0,
+		claims: 0,
+		recovered: 0,
 		capacity: 4,
 		utilization: 50,
 	})
@@ -80,6 +128,12 @@ test('admin overview aggregates queue configuration and live Redis counts', asyn
 			concurrency: 4,
 			waiting: 3,
 			running: 2,
+			retrying: 1,
+			deadLetters: 2,
+			oldestWaitingAt: new Date(now - 12_000).toISOString(),
+			oldestWaitingAgeSeconds: 12,
+			callbacks: { success: 0, failure: 0 },
+			claims: { claimed: 0, recovered: 0 },
 			available: 2,
 			utilization: 50,
 			crontab: {
@@ -92,6 +146,53 @@ test('admin overview aggregates queue configuration and live Redis counts', asyn
 	])
 })
 
+test('admin overview distinguishes an empty queue from a task that just started waiting', async (t) => {
+	const originalFindAll = QueueDao.findAll
+	QueueDao.findAll = async () => [
+		{
+			id: 7,
+			namespace: 'billing',
+			url: 'https://worker.example.com/callback',
+			count: 1,
+			runCrontab: '* * * * * *',
+			checkCrontab: '* * * * * *',
+			expireCrontab: '* * * * * *',
+			updatedTime: '2026-08-10T08:00:00.000Z',
+		},
+	]
+	t.after(() => {
+		QueueDao.findAll = originalFindAll
+	})
+	const metrics = new WaitQueueMetrics(() => Date.parse('2026-08-10T07:00:00.000Z'))
+	const server = createApp({
+		metrics,
+		runtimeSnapshotReader: async () => [
+			{
+				queueId: 7,
+				namespace: 'billing',
+				waiting: 0,
+				running: 0,
+				retrying: 0,
+				deadLetters: 0,
+				oldestWaitingAt: null,
+				oldestWaitingAgeSeconds: null,
+			},
+		],
+	}).listen(0, '127.0.0.1')
+	await once(server, 'listening')
+	t.after(() => new Promise((resolve, reject) => server.close((error) => (error ? reject(error) : resolve()))))
+	const address = server.address()
+	assert.ok(address && typeof address === 'object')
+	const response = await fetch(`http://127.0.0.1:${address.port}/waitqueue/admin/overview`)
+	const overview = (await response.json()).data
+
+	assert.equal(overview.metricsStartedAt, '2026-08-10T07:00:00.000Z')
+	assert.equal(overview.summary.oldestWaitingAt, null)
+	assert.equal(overview.summary.oldestWaitingAgeSeconds, null)
+	assert.equal(overview.queues[0].oldestWaitingAt, null)
+	assert.equal(overview.queues[0].oldestWaitingAgeSeconds, null)
+})
+
 test('admin dead letter APIs query a queue and replay an exact generation', async (t) => {
 	const originalFindByPk = QueueDao.findByPk
 	const originalList = RedisTaskStore.prototype.listDeadLetters
diff --git a/wait-queue/test/metrics.test.js b/wait-queue/test/metrics.test.js
new file mode 100644
index 0000000..5db1861
--- /dev/null
+++ b/wait-queue/test/metrics.test.js
@@ -0,0 +1,187 @@
+const test = require('node:test')
+const assert = require('node:assert/strict')
+const { once } = require('node:events')
+
+const { createApp } = require('../dist/app.js')
+const { QueueDao } = require('../dist/dao/queue_dao.js')
+const {
+	PROMETHEUS_CONTENT_TYPE,
+	WaitQueueMetrics,
+} = require('../dist/observability/metrics.js')
+const {
+	CoalescedRuntimeSnapshotReader,
+} = require('../dist/observability/runtime_snapshot.js')
+
+function runtimeSnapshot(namespace = 'billing') {
+	return [
+		{
+			queueId: 7,
+			namespace,
+			waiting: 3,
+			running: 2,
+			retrying: 1,
+			deadLetters: 4,
+			oldestWaitingAt: '2026-08-11T00:00:00.000Z',
+			oldestWaitingAgeSeconds: 12,
+		},
+	]
+}
+
+test('lightweight registry emits deterministic Prometheus text without sensitive labels', () => {
+	const metrics = new WaitQueueMetrics()
+	const namespace = 'billing"\\\nline'
+	metrics.recordCallback(7, 'run', 'success')
+	metrics.recordCallback(7, 'run', 'failure')
+	metrics.recordClaim(7, 'claimed', 2)
+	metrics.recordRetry(7, 'scheduled', 'callback_failed')
+
+	const rendered = metrics.render(runtimeSnapshot(namespace))
+	assert.match(rendered, /^# HELP waitqueue_queue_waiting_tasks/m)
+	assert.match(rendered, /^# TYPE waitqueue_queue_waiting_tasks gauge$/m)
+	assert.match(rendered, /^# TYPE waitqueue_callback_attempts_total counter$/m)
+	assert.match(rendered, /waitqueue_queue_waiting_tasks\{[^}]+\} 3/)
+	assert.match(rendered, /waitqueue_queue_retrying_tasks\{[^}]+\} 1/)
+	assert.match(rendered, /waitqueue_queue_dead_letter_tasks\{[^}]+\} 4/)
+	assert.match(rendered, /waitqueue_queue_oldest_waiting_seconds\{[^}]+\} 12/)
+	assert.doesNotMatch(rendered, /task_id|taskId|claimToken|hookUrl|hook_url/)
+	assert.doesNotMatch(rendered, /namespace=|billing/)
+	assert.equal(typeof metrics.startedAt, 'string')
+})
+
+test('runtime reader coalesces concurrent reads and serves only a short-lived cache', async () => {
+	let now = 1000
+	let execCalls = 0
+	let release
+	const redis = {
+		pipeline() {
+			return {
+				llen() {
+					return this
+				},
+				hlen() {
+					return this
+				},
+				zcard() {
+					return this
+				},
+				lindex() {
+					return this
+				},
+				hget() {
+					return this
+				},
+				exec() {
+					execCalls += 1
+					return new Promise((resolve) => {
+						release = () =>
+							resolve([
+								[null, 0],
+								[null, 0],
+								[null, 0],
+								[null, 0],
+								[null, 0],
+								[null, null],
+								[null, null],
+							])
+					})
+				},
+			}
+		},
+	}
+	const reader = new CoalescedRuntimeSnapshotReader(redis, 1000, () => now)
+	const queues = [{ id: 7, namespace: 'billing' }]
+
+	const first = reader.read(queues)
+	const second = reader.read(queues)
+	assert.equal(execCalls, 1)
+	release()
+	const snapshots = await Promise.all([first, second])
+	assert.deepEqual(snapshots, [
+		[
+			{
+				queueId: 7,
+				namespace: 'billing',
+				waiting: 0,
+				running: 0,
+				retrying: 0,
+				deadLetters: 0,
+				oldestWaitingAt: null,
+				oldestWaitingAgeSeconds: null,
+			},
+		],
+		[
+			{
+				queueId: 7,
+				namespace: 'billing',
+				waiting: 0,
+				running: 0,
+				retrying: 0,
+				deadLetters: 0,
+				oldestWaitingAt: null,
+				oldestWaitingAgeSeconds: null,
+			},
+		],
+	])
+	const emptyMetrics = new WaitQueueMetrics().render(snapshots[0])
+	assert.match(emptyMetrics, /^# TYPE waitqueue_queue_oldest_waiting_seconds gauge$/m)
+	assert.doesNotMatch(emptyMetrics, /^waitqueue_queue_oldest_waiting_seconds\{/m)
+	await reader.read(queues)
+	assert.equal(execCalls, 1)
+
+	now = 2001
+	const expired = reader.read(queues)
+	assert.equal(execCalls, 2)
+	release()
+	await expired
+})
+
+test('metrics endpoint is no-store, token-protected when configured, and returns raw exposition', async (t) => {
+	const originalFindAll = QueueDao.findAll
+	QueueDao.findAll = async (options) => {
+		assert.deepEqual(options, {
+			attributes: ['id', 'namespace'],
+			order: [['id', 'ASC']],
+		})
+		return [{ id: 7, namespace: 'billing' }]
+	}
+	t.after(() => {
+		QueueDao.findAll = originalFindAll
+	})
+	const metrics = new WaitQueueMetrics()
+	metrics.recordCallback(7, 'run', 'success')
+	const runtimeSnapshotReader = async (queues) => {
+		assert.deepEqual(queues, [{ id: 7, namespace: 'billing' }])
+		return runtimeSnapshot()
+	}
+	const server = createApp({
+		security: { apiToken: 'metrics-secret' },
+		metrics,
+		runtimeSnapshotReader,
+	}).listen(0, '127.0.0.1')
+	await once(server, 'listening')
+	t.after(() => new Promise((resolve, reject) => server.close((error) => (error ? reject(error) : resolve()))))
+	const address = server.address()
+	assert.ok(address && typeof address === 'object')
+	const url = `http://127.0.0.1:${address.port}/metrics`
+
+	const unauthenticated = await fetch(url)
+	assert.equal(unauthenticated.status, 401)
+	assert.equal((await fetch(`${url}/`)).status, 401)
+	const response = await fetch(url, {
+		headers: { authorization: 'Bearer metrics-secret' },
+	})
+	const body = await response.text()
+
+	assert.equal(response.status, 200)
+	assert.equal(response.headers.get('cache-control'), 'no-store')
+	assert.equal(response.headers.get('content-type'), PROMETHEUS_CONTENT_TYPE)
+	assert.match(body, /waitqueue_callback_attempts_total/)
+	assert.doesNotMatch(body, /"code"|metrics-secret/)
+
+	const namespacedAlias = await fetch(
+		`http://127.0.0.1:${address.port}/waitqueue/metrics`,
+		{ headers: { authorization: 'Bearer metrics-secret' } }
+	)
+	assert.equal(namespacedAlias.status, 200)
+	assert.match(await namespacedAlias.text(), /waitqueue_queue_waiting_tasks/)
+})
diff --git a/wait-queue/test/observability.integration.test.js b/wait-queue/test/observability.integration.test.js
new file mode 100644
index 0000000..a0fd395
--- /dev/null
+++ b/wait-queue/test/observability.integration.test.js
@@ -0,0 +1,62 @@
+const test = require('node:test')
+const assert = require('node:assert/strict')
+const { randomUUID } = require('node:crypto')
+const Redis = require('ioredis')
+
+const { RedisTaskStore } = require('../dist/reliability/task_store.js')
+const { readQueueRuntimeSnapshots } = require('../dist/observability/runtime_snapshot.js')
+const { WaitQueueMetrics } = require('../dist/observability/metrics.js')
+
+const redisUrl = process.env.WAITQUEUE_REDIS_INTEGRATION_URL
+
+test(
+	'real Redis snapshot reports steady/migration waiting, running, retry, DLQ, and oldest age',
+	{ skip: redisUrl ? false : 'WAITQUEUE_REDIS_INTEGRATION_URL is not configured' },
+	async (t) => {
+		const redis = new Redis(redisUrl)
+		await redis.ping()
+		const namespace = `observability-${randomUUID()}`
+		const queueId = 19
+		const store = new RedisTaskStore(redis, namespace, queueId)
+		t.after(async () => {
+			await redis.del(...Object.values(store.keys))
+			await redis.quit()
+		})
+		const now = 1_786_406_400_000
+		await redis.lpush(store.keys.waiting, 'newer-sensitive-task')
+		await redis.lpush(store.keys.migrationWaiting, 'oldest-sensitive-task')
+		await redis.hset(
+			store.keys.enqueuedAt,
+			'newer-sensitive-task',
+			now - 1000,
+			'oldest-sensitive-task',
+			now - 7000
+		)
+		await redis.hset(store.keys.running, 'running-a', 'ack:a', 'running-b', 'ack:b')
+		await redis.zadd(store.keys.retrySchedule, now + 1000, 'retry-sensitive-task')
+		await redis.zadd(store.keys.deadLetterOrder, now, 'dead-sensitive-task')
+
+		const snapshots = await readQueueRuntimeSnapshots(
+			redis,
+			[{ id: queueId, namespace }],
+			() => now
+		)
+		assert.deepEqual(snapshots, [
+			{
+				queueId,
+				namespace,
+				waiting: 2,
+				running: 2,
+				retrying: 1,
+				deadLetters: 1,
+				oldestWaitingAt: new Date(now - 7000).toISOString(),
+				oldestWaitingAgeSeconds: 7,
+			},
+		])
+		const rendered = new WaitQueueMetrics().render(snapshots)
+		assert.doesNotMatch(
+			rendered,
+			/newer-sensitive-task|oldest-sensitive-task|running-a|ack:a|retry-sensitive-task|dead-sensitive-task/
+		)
+	}
+)
diff --git a/wait-queue/test/readiness.test.js b/wait-queue/test/readiness.test.js
index 869ce7f..53a255c 100644
--- a/wait-queue/test/readiness.test.js
+++ b/wait-queue/test/readiness.test.js
@@ -95,6 +95,34 @@ test('GET /waitqueue/ready returns 200 only when all dependencies are ready', as
 	})
 })
 
+test('canonical health paths and namespaced aliases preserve the probe contracts', async (t) => {
+	const baseUrl = await startTestApp(t, async () => ({
+		ready: true,
+		dependencies: { mysql: 'ok', redis: 'ok' },
+	}))
+	const [liveness, readiness, namespacedLiveness, namespacedReadiness] = await Promise.all([
+		fetch(`${baseUrl}/health/live`),
+		fetch(`${baseUrl}/health/ready`),
+		fetch(`${baseUrl}/waitqueue/health/live`),
+		fetch(`${baseUrl}/waitqueue/health/ready`),
+	])
+
+	assert.equal(liveness.status, 200)
+	assert.deepEqual(await liveness.json(), {
+		code: 0,
+		msg: 'success',
+		data: { status: 'ok' },
+	})
+	assert.equal(readiness.status, 200)
+	assert.equal(readiness.headers.get('cache-control'), 'no-store')
+	assert.deepEqual((await readiness.json()).data, {
+		status: 'ready',
+		dependencies: { mysql: 'ok', redis: 'ok' },
+	})
+	assert.equal(namespacedLiveness.status, 200)
+	assert.equal(namespacedReadiness.status, 200)
+})
+
 test('GET /waitqueue/ready returns a generic 503 without dependency details', async (t) => {
 	const secret = 'mysql://root:secret@database.internal/waitqueue'
 	const baseUrl = await startTestApp(t, async () => {
diff --git a/wait-queue/test/security.test.js b/wait-queue/test/security.test.js
index bac8376..2ee1d41 100644
--- a/wait-queue/test/security.test.js
+++ b/wait-queue/test/security.test.js
@@ -114,8 +114,34 @@ test('Bearer authentication protects control APIs while health, readiness, and O
 	})
 
 	assert.equal((await fetch(`${baseUrl}/waitqueue/health`)).status, 200)
+	assert.equal((await fetch(`${baseUrl}/health/live`)).status, 200)
+	assert.equal((await fetch(`${baseUrl}/health/ready`)).status, 200)
+	assert.equal((await fetch(`${baseUrl}/waitqueue/health/live`)).status, 200)
 	assert.equal((await fetch(`${baseUrl}/waitqueue/ready`)).status, 200)
+	assert.equal((await fetch(`${baseUrl}/waitqueue/health/ready`)).status, 200)
 	assert.equal((await fetch(`${baseUrl}/waitqueue/admin/overview`, { method: 'OPTIONS' })).status, 200)
+	assert.equal((await fetch(`${baseUrl}/metrics`)).status, 401)
+	assert.equal(
+		(await fetch(`${baseUrl}/metrics/`)).status,
+		401,
+		'the router-compatible trailing slash must not bypass metrics authentication'
+	)
+	assert.equal(
+		(
+			await fetch(`${baseUrl}/metrics/`, {
+				headers: { authorization: 'Bearer wrong-secret' },
+			})
+		).status,
+		401
+	)
+	assert.equal(
+		(
+			await fetch(`${baseUrl}/metrics`, {
+				headers: { authorization: 'Bearer test-secret' },
+			})
+		).status,
+		200
+	)
 
 	const missing = await fetch(`${baseUrl}/waitqueue/admin/overview`)
 	assert.equal(missing.status, 401)
diff --git a/wait-queue/test/task_manager.test.js b/wait-queue/test/task_manager.test.js
index 1fbf811..872ac4d 100644
--- a/wait-queue/test/task_manager.test.js
+++ b/wait-queue/test/task_manager.test.js
@@ -2,6 +2,7 @@ const test = require('node:test')
 const assert = require('node:assert/strict')
 
 const { TaskManager } = require('../dist/lib/task_manager.js')
+const { WaitQueueMetrics } = require('../dist/observability/metrics.js')
 
 function createContext() {
 	return {
@@ -31,7 +32,7 @@ function createStore(overrides = {}) {
 	}
 }
 
-function createManager(taskRunningCount, taskStore, taskRunner) {
+function createManager(taskRunningCount, taskStore, taskRunner, metrics) {
 	return new TaskManager(
 		createContext(),
 		7,
@@ -41,7 +42,7 @@ function createManager(taskRunningCount, taskStore, taskRunner) {
 		'waiting',
 		taskRunningCount,
 		undefined,
-		{ taskStore, taskRunner }
+		{ taskStore, taskRunner, metrics }
 	)
 }
 
@@ -175,3 +176,43 @@ test('expire releases only IDs matched to the acknowledged snapshot', async () =
 		{ snapshot: { 'task-1': 'ack:claim-1' }, taskIds: ['task-1', 'task-2'] },
 	])
 })
+
+test('claim, recovery, promotion, acknowledgement, and retry transitions increment bounded counters', async () => {
+	const metrics = new WaitQueueMetrics()
+	const successfulClaim = { taskId: 'sensitive-success-id', claimToken: 'pending:success' }
+	const failedClaim = { taskId: 'sensitive-failure-id', claimToken: 'pending:failure' }
+	const taskStore = createStore({
+		async claim() {
+			return {
+				claims: [successfulClaim, failedClaim],
+				recovered: 2,
+				promoted: 1,
+				deadLettered: 1,
+			}
+		},
+		async acknowledge() {
+			return true
+		},
+		async fail() {
+			return { outcome: 'retry', retryCount: 1, dueAt: 2000 }
+		},
+	})
+	const taskRunner = {
+		async run(taskId) {
+			if (taskId === failedClaim.taskId) throw new Error('callback failed')
+		},
+	}
+
+	await createManager(2, taskStore, taskRunner, metrics).runTask()
+	const rendered = metrics.render([])
+
+	assert.match(rendered, /waitqueue_claim_transitions_total\{queue_id="7",outcome="claimed"\} 2/)
+	assert.match(rendered, /waitqueue_claim_transitions_total\{queue_id="7",outcome="recovered"\} 2/)
+	assert.match(rendered, /waitqueue_claim_transitions_total\{queue_id="7",outcome="acknowledged"\} 1/)
+	assert.match(rendered, /waitqueue_retry_transitions_total\{queue_id="7",outcome="scheduled",reason="lease_expired"\} 1/)
+	assert.match(rendered, /waitqueue_retry_transitions_total\{queue_id="7",outcome="dead_lettered",reason="lease_expired"\} 1/)
+	assert.match(rendered, /waitqueue_retry_transitions_total\{queue_id="7",outcome="promoted",reason="not_applicable"\} 1/)
+	assert.match(rendered, /waitqueue_retry_transitions_total\{queue_id="7",outcome="scheduled",reason="callback_failed"\} 1/)
+	assert.doesNotMatch(rendered, /namespace=/)
+	assert.doesNotMatch(rendered, /sensitive-success-id|sensitive-failure-id|pending:/)
+})
diff --git a/wait-queue/test/task_run.test.js b/wait-queue/test/task_run.test.js
index 2285cf3..e026155 100644
--- a/wait-queue/test/task_run.test.js
+++ b/wait-queue/test/task_run.test.js
@@ -9,6 +9,7 @@ const {
 	resolvePinnedCallbackAddresses,
 } = require('../dist/lib/task_run.js')
 const { HookUrlPolicy } = require('../dist/security/hook_url_policy.js')
+const { WaitQueueMetrics } = require('../dist/observability/metrics.js')
 
 function createContext() {
 	return {
@@ -211,3 +212,31 @@ test('default callback transport rejects oversized callback responses', async (t
 
 	await assert.rejects(taskRun.run('task-1'), /response exceeded the size limit/)
 })
+
+test('callback counters include only queue, type, and bounded outcomes', async () => {
+	const metrics = new WaitQueueMetrics()
+	const transport = async (_url, options) => {
+		const { type } = JSON.parse(options.body)
+		return type === 'run'
+			? { status: 200, body: '' }
+			: { status: 200, body: JSON.stringify({ data: { taskIds: [123] } }) }
+	}
+	const taskRun = new TaskRun(
+		createContext(),
+		'https://worker.example.com/private-hook',
+		7,
+		'billing',
+		undefined,
+		transport,
+		metrics
+	)
+
+	await taskRun.run('sensitive-task-id')
+	await assert.rejects(taskRun.checkTaskStatus(['sensitive-task-id']), /string array/)
+	const rendered = metrics.render([])
+
+	assert.match(rendered, /waitqueue_callback_attempts_total\{queue_id="7",type="run",outcome="success"\} 1/)
+	assert.match(rendered, /waitqueue_callback_attempts_total\{queue_id="7",type="check",outcome="failure"\} 1/)
+	assert.doesNotMatch(rendered, /namespace=/)
+	assert.doesNotMatch(rendered, /sensitive-task-id|private-hook|worker\.example\.com/)
+})