From 710e8b54285c21c5333c9ecf1a21301a8f2bbca8 Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sun, 30 Aug 2026 07:41:41 +0800
Subject: [PATCH 1/6] feat: register accessible observe workbench panel

---
 dashboard_panel.js        | 650 -----------------------------
 dashboard_panel.tsx       | 847 --------------------------------------
 plugin.py                 |   6 +
 tests/test_web_module.mjs | 216 ++++++++++
 web_module.css            | 504 +++++++++++++++++++++++
 web_module.js             | 812 ++++++++++++++++++++++++++++++++++++
 6 files changed, 1538 insertions(+), 1497 deletions(-)
 delete mode 100644 dashboard_panel.js
 delete mode 100644 dashboard_panel.tsx
 create mode 100644 tests/test_web_module.mjs
 create mode 100644 web_module.css
 create mode 100644 web_module.js

diff --git a/dashboard_panel.js b/dashboard_panel.js
deleted file mode 100644
index e664328..0000000
--- a/dashboard_panel.js
+++ /dev/null
@@ -1,650 +0,0 @@
-// ../observe/dashboard_panel.tsx
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { Grid, MetricTile, TrendChart, Sparkline, Chip, api } from "@akashic/dashboard-ui";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var RANGES = [
-  { key: "24h", label: "24 \u5C0F\u65F6" },
-  { key: "7d", label: "7 \u5929" },
-  { key: "30d", label: "30 \u5929" },
-  { key: "all", label: "\u5168\u90E8" }
-];
-var SOURCE_LABEL = {
-  log: "\u4E3B\u52A8\u65E5\u5FD7",
-  uncaught: "\u672A\u6355\u83B7\u5F02\u5E38",
-  asyncio: "asyncio \u4EFB\u52A1",
-  thread: "\u5B50\u7EBF\u7A0B"
-};
-var STATUS_META = {
-  active: { label: "\u6D3B\u8DC3", tone: "warning" },
-  acknowledged: { label: "\u5DF2\u786E\u8BA4", tone: "muted" },
-  ignored: { label: "\u5DF2\u5FFD\u7565", tone: "success" }
-};
-var TONE_BG = {
-  danger: "bg-danger",
-  warning: "bg-warning",
-  success: "bg-success",
-  accent: "bg-accent",
-  muted: "bg-subtle"
-};
-function _compact(value) {
-  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
-  if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
-  return String(Math.round(value));
-}
-function _pct(value) {
-  return typeof value === "number" ? `${(value * 100).toFixed(1)}%` : "\u2014";
-}
-function _bucketLabel(bucket) {
-  if (bucket.includes("T")) return `${bucket.slice(11, 13)}:00`;
-  const [, m, d] = bucket.split("-");
-  return m && d ? `${Number(m)}-${d}` : bucket;
-}
-function _shortTs(value) {
-  if (!value) return "\u2014";
-  const dt = new Date(value);
-  if (Number.isNaN(dt.getTime())) return value || "\u2014";
-  return `${dt.getMonth() + 1}-${String(dt.getDate()).padStart(2, "0")} ${String(dt.getHours()).padStart(2, "0")}:${String(dt.getMinutes()).padStart(2, "0")}`;
-}
-function _delta(values) {
-  if (values.length < 2) return null;
-  const last = values[values.length - 1];
-  const prev = values[values.length - 2];
-  if (!prev) return null;
-  return (last - prev) / prev * 100;
-}
-function _ago(ms) {
-  if (!Number.isFinite(ms) || ms < 0) return "\u521A\u521A";
-  const s = Math.floor(ms / 1e3);
-  if (s < 3) return "\u521A\u521A";
-  if (s < 60) return `${s}s \u524D`;
-  const m = Math.floor(s / 60);
-  if (m < 60) return `${m}m \u524D`;
-  return `${Math.floor(m / 60)}h \u524D`;
-}
-function _severity(count, spiking) {
-  if (spiking || count >= 20) return "danger";
-  if (count >= 5) return "warning";
-  return "muted";
-}
-function Card({ title, children, bodyClass, style }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "flex flex-col overflow-hidden border border-border bg-surface",
-      style,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-border px-4 py-2.5", children: /* @__PURE__ */ jsx("h3", { className: "text-[12px] font-medium text-muted", children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: bodyClass ?? "p-4", children })
-      ]
-    }
-  );
-}
-function ErrorDrill({
-  portalRef,
-  range,
-  onClose
-}) {
-  const drillRef = useRef(null);
-  const closeButtonRef = useRef(null);
-  const [overview, setOverview] = useState(null);
-  const [facet, setFacet] = useState("type");
-  const [q, setQ] = useState("");
-  const [sections, setSections] = useState([]);
-  const [selFp, setSelFp] = useState(null);
-  const [detail, setDetail] = useState(null);
-  const [tab, setTab] = useState("trace");
-  const [variant, setVariant] = useState(0);
-  const loadList = useCallback(async () => {
-    const [ov, list] = await Promise.all([
-      api(`/api/dashboard/observe/global_errors/overview?range=${range}`),
-      api(`/api/dashboard/observe/global_errors?range=${range}&facet=${facet}&q=${encodeURIComponent(q)}`)
-    ]);
-    setOverview(ov);
-    setSections(list.sections ?? []);
-    const flat = (list.sections ?? []).flatMap((s) => s.items);
-    setSelFp((cur) => cur && flat.some((i) => i.fingerprint === cur) ? cur : flat[0]?.fingerprint ?? null);
-  }, [range, facet, q]);
-  useEffect(() => {
-    void loadList();
-  }, [loadList]);
-  useEffect(() => {
-    if (!selFp) {
-      setDetail(null);
-      return;
-    }
-    let alive = true;
-    void (async () => {
-      const d = await api(`/api/dashboard/observe/global_errors/${selFp}?range=${range}`);
-      if (alive) {
-        setDetail(d);
-        setVariant(0);
-        setTab("trace");
-      }
-    })();
-    return () => {
-      alive = false;
-    };
-  }, [selFp, range]);
-  const close = useCallback(() => {
-    onClose();
-  }, [onClose]);
-  useEffect(() => {
-    closeButtonRef.current?.focus();
-    return () => portalRef.current?.focus();
-  }, [portalRef]);
-  useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") close();
-      if (e.key !== "Tab") return;
-      const focusable = Array.from(
-        drillRef.current?.querySelectorAll(
-          'button:not([disabled]), input:not([disabled]), select:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'
-        ) ?? []
-      );
-      if (focusable.length === 0) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      if (e.shiftKey && document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [close]);
-  const setStatus = async (status) => {
-    if (!detail) return;
-    await api(`/api/dashboard/observe/global_errors/${detail.fingerprint}/status?value=${status}`, { method: "POST" });
-    await loadList();
-    setDetail((d) => d ? { ...d, status } : d);
-  };
-  const gotoSession = (key) => {
-    window.dispatchEvent(new CustomEvent("akashic:goto-session", { detail: key }));
-    close();
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "fixed inset-0 z-30 bg-black/55", onClick: close }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: drillRef,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": "observe-error-dialog-title",
-        className: "fixed z-40 flex flex-col overflow-hidden rounded-md border border-border-strong bg-surface",
-        style: {
-          width: "min(1180px, 94vw)",
-          height: "min(84vh, 760px)",
-          left: "50%",
-          top: "50%",
-          marginLeft: "calc(min(1180px, 94vw) / -2)",
-          marginTop: "calc(min(84vh, 760px) / -2)"
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-4 border-b border-border px-5 py-4", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                ref: closeButtonRef,
-                type: "button",
-                onClick: close,
-                className: "grid h-10 w-10 place-items-center rounded-md border border-border-strong bg-surface-2 text-[18px] text-muted transition-colors hover:text-fg",
-                "aria-label": "\u5173\u95ED\u9519\u8BEF\u5206\u6790",
-                title: "\u8FD4\u56DE (Esc)",
-                children: "\u2039"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "font-mono text-[26px] font-semibold tabular-nums text-danger", children: overview?.total ?? "\u2014" }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsxs("div", { id: "observe-error-dialog-title", className: "text-sm font-semibold", children: [
-                "\u9519\u8BEF \xB7 ",
-                RANGES.find((r) => r.key === range)?.label ?? range
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-3 text-[11px] text-muted", children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  overview?.types ?? 0,
-                  " \u4E2A\u7C7B\u578B"
-                ] }),
-                (overview?.new_types ?? 0) > 0 && /* @__PURE__ */ jsxs("span", { children: [
-                  overview?.new_types,
-                  " \u4E2A\u65B0\u7C7B\u578B"
-                ] }),
-                (overview?.spiking_types ?? 0) > 0 && /* @__PURE__ */ jsxs("span", { className: "font-semibold text-danger", children: [
-                  overview?.spiking_types,
-                  " \u4E2A\u6B63\u5728\u7206\u53D1"
-                ] })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-3 border-b border-border px-4 py-2.5", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex gap-1 rounded-md border border-border bg-bg p-0.5", children: [
-              { k: "type", l: "\u6309\u7C7B\u578B" },
-              { k: "source", l: "\u6309\u6765\u6E90" },
-              { k: "channel", l: "\u6309\u901A\u9053" }
-            ].map((f) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setFacet(f.k),
-                className: `rounded-[4px] px-2.5 py-1 text-[11px] transition-colors ${facet === f.k ? "bg-surface-3 text-fg" : "text-muted hover:text-fg"}`,
-                children: f.l
-              },
-              f.k
-            )) }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                value: q,
-                onChange: (e) => setQ(e.target.value),
-                "aria-label": "\u641C\u7D22\u9519\u8BEF",
-                placeholder: "\u6309\u6D88\u606F / \u6A21\u5757\u8FC7\u6EE4\u2026",
-                className: "w-[280px] rounded-md border border-border bg-bg px-3 py-1.5 text-[11.5px] text-fg outline-none focus:border-accent-deep"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-[340px_1fr]", children: [
-            /* @__PURE__ */ jsxs("div", { className: "overflow-auto border-r border-border p-1.5", children: [
-              sections.map((section) => /* @__PURE__ */ jsxs("div", { children: [
-                section.label && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2.5 pb-1 pt-3 text-[11px] font-medium text-muted", children: [
-                  /* @__PURE__ */ jsx("span", { children: section.label }),
-                  /* @__PURE__ */ jsxs("span", { children: [
-                    section.count,
-                    " \u6B21"
-                  ] })
-                ] }),
-                section.items.map((g) => /* @__PURE__ */ jsx(ErrorRow, { g, active: g.fingerprint === selFp, onClick: () => setSelFp(g.fingerprint) }, g.fingerprint))
-              ] }, section.key)),
-              sections.length === 0 && /* @__PURE__ */ jsx("div", { className: "p-6 text-[12.5px] text-muted", children: "\u6240\u9009\u533A\u95F4\u5185\u6CA1\u6709\u9519\u8BEF\u3002" })
-            ] }),
-            detail ? /* @__PURE__ */ jsx(
-              ErrorDetail,
-              {
-                detail,
-                tab,
-                setTab,
-                variant,
-                setVariant,
-                onStatus: setStatus,
-                onGoto: gotoSession
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "grid place-items-center text-[13px] text-muted", children: "\u9009\u62E9\u5DE6\u4FA7\u4E00\u4E2A\u9519\u8BEF\u67E5\u770B\u73B0\u573A" })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function ErrorRow({ g, active, onClick }) {
-  const tone = _severity(g.count, g.is_spiking);
-  const spark = g.spark ?? [];
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: `grid w-full grid-cols-[9px_1fr_auto] items-center gap-2.5 border-b border-border px-3 py-2.5 text-left transition-colors duration-150 ${active ? "bg-accent-soft" : "hover:bg-surface-2"}`,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "relative flex h-2 w-2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: `relative inline-flex h-2 w-2 rounded-full ${TONE_BG[tone]}` }) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 font-mono text-[12.5px]", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: g.error_type }),
-            g.is_new && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold text-accent", children: "\u65B0" }),
-            g.is_spiking && /* @__PURE__ */ jsx("span", { className: "text-[9px] font-semibold text-danger", children: "\u7206\u53D1" })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate font-mono text-[10px] text-subtle", children: g.logger_name }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-2.5 text-[10px] text-muted", children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              /* @__PURE__ */ jsx("b", { className: "font-semibold text-fg", children: g.count }),
-              " \u6B21"
-            ] }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              /* @__PURE__ */ jsx("b", { className: "font-semibold text-fg", children: g.sessions }),
-              " session"
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-[22px] w-[62px]", children: spark.length > 1 && /* @__PURE__ */ jsx(Sparkline, { data: spark, tone, height: 22 }) }),
-          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-subtle", children: _shortTs(g.last_ts) })
-        ] })
-      ]
-    }
-  );
-}
-function ErrorDetail({
-  detail,
-  tab,
-  setTab,
-  variant,
-  setVariant,
-  onStatus,
-  onGoto
-}) {
-  const status = STATUS_META[detail.status] ?? STATUS_META.active;
-  const tone = _severity(detail.count, false);
-  const activeVariant = detail.variants[variant] ?? detail.variants[0];
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-5 py-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "font-mono text-[19px] font-semibold", children: detail.error_type }),
-      /* @__PURE__ */ jsx("div", { className: "mt-1.5 font-mono text-[12px] leading-relaxed text-danger", children: detail.message }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap gap-1.5", children: [
-        /* @__PURE__ */ jsx(Chip, { children: detail.logger_name }),
-        /* @__PURE__ */ jsxs(Chip, { children: [
-          "\u6765\u6E90 \xB7 ",
-          SOURCE_LABEL[detail.source] ?? detail.source
-        ] }),
-        /* @__PURE__ */ jsx(Chip, { children: detail.channel }),
-        /* @__PURE__ */ jsx(Chip, { tone: "danger", children: detail.level }),
-        /* @__PURE__ */ jsx(Chip, { tone: status.tone, children: status.label })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-px border-b border-border bg-border", children: [
-      /* @__PURE__ */ jsx(Blast, { label: "\u7D2F\u8BA1\u6B21\u6570", value: String(detail.count) }),
-      /* @__PURE__ */ jsx(Blast, { label: "\u72EC\u7ACB session", value: String(detail.sessions) }),
-      /* @__PURE__ */ jsx(Blast, { label: "\u9996\u6B21", value: _shortTs(detail.first_ts), small: true }),
-      /* @__PURE__ */ jsx(Blast, { label: "\u6700\u8FD1", value: _shortTs(detail.last_ts), small: true })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-1 border-b border-border px-5 pt-3", children: [
-      /* @__PURE__ */ jsx(TabBtn, { active: tab === "trend", onClick: () => setTab("trend"), children: "\u8D8B\u52BF" }),
-      /* @__PURE__ */ jsxs(TabBtn, { active: tab === "trace", onClick: () => setTab("trace"), children: [
-        "Traceback",
-        detail.variants.length > 1 ? ` \xB7 ${detail.variants.length} \u53D8\u4F53` : ""
-      ] }),
-      /* @__PURE__ */ jsxs(TabBtn, { active: tab === "occ", onClick: () => setTab("occ"), children: [
-        "\u73B0\u573A \xB7 ",
-        detail.occurrences.length
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-auto px-5 py-4", children: [
-      tab === "trend" && /* @__PURE__ */ jsx(
-        TrendChart,
-        {
-          data: detail.trend.map((p) => ({ label: _bucketLabel(p.bucket), value: p.count })),
-          kind: "bar",
-          tone,
-          valueFmt: (n) => String(n),
-          empty: "\u533A\u95F4\u5185\u65E0\u53D1\u4F5C"
-        }
-      ),
-      tab === "trace" && /* @__PURE__ */ jsxs("div", { children: [
-        detail.variants.length > 1 && /* @__PURE__ */ jsx("div", { className: "mb-3 flex gap-2", children: detail.variants.map((v, i) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => setVariant(i),
-            className: `rounded border px-2.5 py-1.5 text-left text-[10.5px] ${i === variant ? "border-accent-deep bg-accent-soft text-fg" : "border-border bg-bg text-muted"}`,
-            children: [
-              /* @__PURE__ */ jsx("b", { className: "text-fg", children: v.count }),
-              " \u6B21 \xB7 \u53D8\u4F53 ",
-              i + 1
-            ]
-          },
-          v.fingerprint
-        )) }),
-        /* @__PURE__ */ jsx("pre", { className: "m-0 max-h-[280px] overflow-auto rounded border border-border bg-bg p-4 font-mono text-[11px] leading-relaxed text-muted", children: activeVariant?.traceback_text || detail.traceback_text })
-      ] }),
-      tab === "occ" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        detail.occurrences.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-[12px] text-muted", children: "\u65E0\u53EF\u5173\u8054\u7684 session \u73B0\u573A\u3002" }),
-        detail.occurrences.map((o) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr_auto] items-center gap-3.5 border-b border-border bg-bg px-3.5 py-2.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px] text-accent", children: _shortTs(o.ts) }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx("div", { className: "truncate text-[12px]", children: o.user_preview || "\uFF08\u65E0\u7528\u6237\u6D88\u606F\uFF09" }),
-            /* @__PURE__ */ jsxs("div", { className: "mt-0.5 font-mono text-[10px] text-subtle", children: [
-              "session ",
-              o.session_key
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onGoto(o.session_key),
-              className: "whitespace-nowrap rounded border border-accent-deep bg-accent-soft px-2.5 py-1.5 text-[10.5px] text-accent-ink",
-              children: "\u67E5\u770B\u5BF9\u8BDD"
-            }
-          )
-        ] }, o.session_key))
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 gap-2 border-t border-border px-5 py-3", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => detail.occurrences[0] && onGoto(detail.occurrences[0].session_key),
-          disabled: detail.occurrences.length === 0,
-          className: "rounded border border-accent-deep bg-accent-soft px-3 py-2 text-[11px] text-accent-ink transition-colors disabled:opacity-40",
-          children: "\u67E5\u770B\u6700\u8FD1\u5BF9\u8BDD"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => void navigator.clipboard?.writeText(detail.traceback_text),
-          className: "rounded border border-border-strong bg-surface-2 px-3 py-2 text-[11px] text-muted transition-colors hover:text-fg",
-          children: "\u590D\u5236 Traceback"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onStatus("acknowledged"), className: "rounded border border-border-strong bg-surface-2 px-3 py-2 text-[11px] text-muted transition-colors hover:text-fg", children: "\u6807\u8BB0\u5DF2\u786E\u8BA4" }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onStatus("ignored"), className: "rounded border border-border-strong bg-surface-2 px-3 py-2 text-[11px] text-muted transition-colors hover:border-danger/40 hover:text-danger", children: "\u5FFD\u7565\u6B64\u7C7B\u578B" })
-    ] })
-  ] });
-}
-function Blast({ label, value, small }) {
-  return /* @__PURE__ */ jsxs("div", { className: "bg-surface px-4 py-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[10px] text-subtle", children: label }),
-    /* @__PURE__ */ jsx("div", { className: `mt-1.5 font-mono font-semibold tabular-nums ${small ? "text-[12.5px]" : "text-[18px]"}`, children: value })
-  ] });
-}
-function TabBtn({ active, onClick, children }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: `-mb-px border-b-2 px-3 py-2 text-[11.5px] transition-colors ${active ? "border-accent text-fg" : "border-transparent text-muted hover:text-fg"}`,
-      children
-    }
-  );
-}
-function SkelBlock({ className }) {
-  return /* @__PURE__ */ jsx("div", { className: `relative overflow-hidden rounded border border-border bg-surface-2 ${className}` });
-}
-function ObserveSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx(SkelBlock, { className: "h-7 w-48" }),
-        /* @__PURE__ */ jsx(SkelBlock, { className: "h-3 w-64 rounded" })
-      ] }),
-      /* @__PURE__ */ jsx(SkelBlock, { className: "h-9 w-56" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(SkelBlock, { className: "h-[132px]" }, i)) }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(SkelBlock, { className: "h-[218px]" }, i)) })
-  ] });
-}
-function ObserveMain(_props) {
-  const [range, setRange] = useState("24h");
-  const [overview, setOverview] = useState(null);
-  const [points, setPoints] = useState([]);
-  const [gErr, setGErr] = useState(null);
-  const [drillOpen, setDrillOpen] = useState(false);
-  const [updatedAt, setUpdatedAt] = useState(0);
-  const [nowTs, setNowTs] = useState(() => Date.now());
-  const [refreshing, setRefreshing] = useState(false);
-  const portalRef = useRef(null);
-  const overviewRef = useRef(null);
-  const load = useCallback(async () => {
-    setRefreshing(true);
-    try {
-      const [ov, series, ge] = await Promise.all([
-        api(`/api/dashboard/observe/overview?range=${range}`),
-        api(`/api/dashboard/observe/timeseries?range=${range}`),
-        api(`/api/dashboard/observe/global_errors/overview?range=${range}`)
-      ]);
-      setOverview(ov);
-      setPoints(series.points ?? []);
-      setGErr(ge);
-      setUpdatedAt(Date.now());
-    } finally {
-      setRefreshing(false);
-    }
-  }, [range]);
-  useEffect(() => {
-    void load();
-    const id = window.setInterval(() => void load(), 15e3);
-    return () => window.clearInterval(id);
-  }, [load]);
-  useEffect(() => {
-    const id = window.setInterval(() => setNowTs(Date.now()), 1e3);
-    return () => window.clearInterval(id);
-  }, []);
-  useEffect(() => {
-    if (overviewRef.current) overviewRef.current.inert = drillOpen;
-  }, [drillOpen]);
-  if (!overview) {
-    return /* @__PURE__ */ jsx(ObserveSkeleton, {});
-  }
-  const turnSeries = points.map((p) => p.turns);
-  const errorSeries = points.map((p) => p.errors);
-  const tokenSeries = points.map((p) => p.input_tokens);
-  const passiveHitSeries = points.map((p) => (p.passive_cache_hit_rate ?? 0) * 100);
-  const proactiveHitSeries = points.map((p) => (p.proactive_cache_hit_rate ?? 0) * 100);
-  const iterSeries = points.map((p) => p.avg_iteration ?? 0);
-  const labelled = (vals) => points.map((p, i) => ({ label: _bucketLabel(p.bucket), value: vals[i] }));
-  const gErrTotal = gErr?.total ?? overview.errors;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: overviewRef,
-        "aria-hidden": drillOpen || void 0,
-        className: "flex flex-col gap-5 p-6 transition-opacity duration-150",
-        style: drillOpen ? { opacity: 0.35, pointerEvents: "none" } : void 0,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-                /* @__PURE__ */ jsx("span", { className: "detail-title", children: "Observe \xB7 \u76D1\u6D4B" }),
-                /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-success", children: "\u5B9E\u65F6\u66F4\u65B0" })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "detail-subtext", children: [
-                "Agent \u4E3B\u5FAA\u73AF\u9065\u6D4B \xB7 Token / \u8FED\u4EE3 / \u9519\u8BEF",
-                /* @__PURE__ */ jsxs("span", { className: "ml-2 font-mono text-[11px] text-subtle", children: [
-                  "\u66F4\u65B0\u4E8E ",
-                  _ago(nowTs - updatedAt)
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => void load(),
-                  className: `grid h-10 w-10 place-items-center rounded-md border border-border bg-surface-2 text-muted transition-colors hover:border-border-strong hover:text-fg ${refreshing ? "animate-spin" : ""}`,
-                  "aria-label": "\u5237\u65B0\u76D1\u6D4B\u6570\u636E",
-                  title: "\u5237\u65B0",
-                  children: "\u21BB"
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "flex gap-1 rounded-md border border-border bg-surface-2 p-1", children: RANGES.map((r) => /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setRange(r.key),
-                  className: `min-h-10 rounded-[4px] px-2.5 py-1 text-[11px] transition-colors ${range === r.key ? "bg-accent text-accent-ink" : "text-muted hover:bg-surface-3 hover:text-fg"}`,
-                  "aria-pressed": range === r.key,
-                  children: r.label
-                },
-                r.key
-              )) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "section",
-            {
-              className: `flex min-h-16 items-center justify-between gap-4 border px-4 py-3 ${gErrTotal > 0 ? "border-danger/40 bg-danger/10" : "border-success/35 bg-success/10"}`,
-              "aria-label": "\u8FD0\u884C\u72B6\u6001",
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx("div", { className: `text-[13px] font-semibold ${gErrTotal > 0 ? "text-danger" : "text-success"}`, children: gErrTotal > 0 ? `${gErrTotal} \u6761\u9519\u8BEF\u9700\u8981\u67E5\u770B` : "\u5F53\u524D\u533A\u95F4\u6CA1\u6709\u91C7\u96C6\u5230\u9519\u8BEF" }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11.5px] text-muted", children: gErrTotal > 0 ? `${gErr?.types ?? 0} \u4E2A\u9519\u8BEF\u7C7B\u578B\uFF0C\u5148\u67E5\u770B\u7206\u53D1\u548C\u65B0\u51FA\u73B0\u7684\u7C7B\u578B\u3002` : "\u4E3B\u5FAA\u73AF\u9065\u6D4B\u6301\u7EED\u66F4\u65B0\uFF0C\u7F13\u5B58\u4E0E\u8FED\u4EE3\u6307\u6807\u89C1\u4E0B\u65B9\u3002" })
-                ] }),
-                gErrTotal > 0 && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    ref: portalRef,
-                    onClick: () => setDrillOpen(true),
-                    className: "min-h-10 flex-shrink-0 rounded-md border border-danger/40 bg-surface px-3 text-[12px] font-semibold text-danger hover:bg-danger/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
-                    children: "\u67E5\u770B\u9519\u8BEF\u5206\u6790"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(Grid, { columns: 3, children: [
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MetricTile, { label: "\u5BF9\u8BDD\u8F6E\u6570", value: _compact(overview.turns), delta: _delta(turnSeries), sub: overview.last_ts ? `\u6700\u8FD1 ${_shortTs(overview.last_ts)}` : "\u65E0\u8BB0\u5F55", tone: "accent", spark: turnSeries }) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MetricTile, { label: "\u88AB\u52A8 KV \u547D\u4E2D\u7387", value: _pct(overview.passive_cache_hit_rate), sub: `\u4E3B\u52A8 ${_pct(overview.proactive_cache_hit_rate)}`, tone: "success", spark: passiveHitSeries }) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MetricTile, { label: "\u5E73\u5747\u8FED\u4EE3", value: overview.avg_iteration != null ? overview.avg_iteration.toFixed(1) : "\u2014", unit: `\u5CF0 ${overview.max_iteration}`, sub: "\u6BCF\u8F6E LLM \u8C03\u7528\u6B21\u6570", tone: "warning", spark: iterSeries }) })
-          ] }),
-          /* @__PURE__ */ jsxs(Grid, { columns: 2, children: [
-            /* @__PURE__ */ jsx(Card, { title: "\u8F93\u5165 Token \u8D8B\u52BF", children: /* @__PURE__ */ jsx(TrendChart, { data: labelled(tokenSeries), kind: "area", tone: "accent", valueFmt: _compact }) }),
-            /* @__PURE__ */ jsx(Card, { title: "\u5E73\u5747\u8FED\u4EE3\u8D8B\u52BF", children: /* @__PURE__ */ jsx(TrendChart, { data: labelled(iterSeries), kind: "area", tone: "warning", valueFmt: (n) => n.toFixed(1) }) })
-          ] }),
-          /* @__PURE__ */ jsxs("details", { className: "border-t border-border pt-1", children: [
-            /* @__PURE__ */ jsx("summary", { className: "min-h-11 cursor-pointer py-3 text-[12px] font-semibold text-fg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", children: "\u67E5\u770B\u7F13\u5B58\u547D\u4E2D\u4E0E\u9519\u8BEF\u8D8B\u52BF" }),
-            /* @__PURE__ */ jsxs(Grid, { columns: 2, children: [
-              /* @__PURE__ */ jsx(Card, { title: "\u5168\u5C40\u88AB\u52A8\u94FE\u8DEF\u547D\u4E2D\u7387\u8D8B\u52BF", children: /* @__PURE__ */ jsx(TrendChart, { data: labelled(passiveHitSeries), kind: "area", tone: "success", valueFmt: (n) => `${n.toFixed(0)}%` }) }),
-              /* @__PURE__ */ jsx(Card, { title: "\u5168\u5C40\u4E3B\u52A8\u94FE\u8DEF\u547D\u4E2D\u7387\u8D8B\u52BF", children: /* @__PURE__ */ jsx(TrendChart, { data: labelled(proactiveHitSeries), kind: "area", tone: "accent", valueFmt: (n) => `${n.toFixed(0)}%` }) }),
-              /* @__PURE__ */ jsx(Card, { title: "\u9519\u8BEF\u8D8B\u52BF", children: /* @__PURE__ */ jsx(TrendChart, { data: labelled(errorSeries), kind: "bar", tone: "danger", valueFmt: (n) => String(n), empty: "\u6240\u9009\u533A\u95F4\u5185\u6CA1\u6709\u9519\u8BEF" }) })
-            ] })
-          ] })
-        ]
-      }
-    ),
-    drillOpen && /* @__PURE__ */ jsx(ErrorDrill, { portalRef, range, onClose: () => setDrillOpen(false) })
-  ] });
-}
-window.AkashicDashboard.registerPlugin({
-  id: "observe",
-  label: "\u8FD0\u884C\u76D1\u6D4B",
-  viewLabel: "\u8FD0\u884C\u76D1\u6D4B",
-  layout: "workbench",
-  pageSize: 30,
-  rowKey: "id",
-  countTitle(total) {
-    return `${total} \u8F6E\u9065\u6D4B`;
-  },
-  columns: [
-    { key: "session_key", label: "\u4F1A\u8BDD", width: 120, cellClass: "mono cell-session", rawTitle: true },
-    { key: "ts", label: "\u65F6\u95F4", width: 96, fmt: "mono-time", cellClass: "mono cell-time", rawTitle: true },
-    { key: "error", label: "\u9519\u8BEF", flex: true, cellClass: "content-preview" }
-  ],
-  async getCount() {
-    try {
-      const ov = await api("/api/dashboard/observe/overview?range=all");
-      return ov.turns || 0;
-    } catch {
-      return null;
-    }
-  },
-  async fetchPage({ page, pageSize }) {
-    const data = await api(
-      `/api/dashboard/observe/errors?range=all&page=${page}&page_size=${pageSize}`
-    );
-    return { items: data.items || [], total: data.total || 0 };
-  },
-  Main: ObserveMain
-});
diff --git a/dashboard_panel.tsx b/dashboard_panel.tsx
deleted file mode 100644
index 40ee5aa..0000000
--- a/dashboard_panel.tsx
+++ /dev/null
@@ -1,847 +0,0 @@
-/// <reference path="../../types/akashic-dashboard.d.ts" />
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import { Grid, MetricTile, TrendChart, Sparkline, Chip, api, type ChartTone } from "@akashic/dashboard-ui";
-
-interface Overview {
-  range: string;
-  turns: number;
-  errors: number;
-  error_rate: number | null;
-  input_tokens: number;
-  cache_prompt_tokens: number;
-  cache_hit_tokens: number;
-  cache_hit_rate: number | null;
-  passive_cache_prompt_tokens: number;
-  passive_cache_hit_tokens: number;
-  passive_cache_hit_rate: number | null;
-  proactive_cache_prompt_tokens: number;
-  proactive_cache_hit_tokens: number;
-  proactive_cache_hit_rate: number | null;
-  avg_iteration: number | null;
-  max_iteration: number;
-  last_ts: string | null;
-}
-
-interface SeriesPoint {
-  bucket: string;
-  turns: number;
-  errors: number;
-  input_tokens: number;
-  cache_hit_rate: number | null;
-  passive_cache_hit_rate: number | null;
-  proactive_cache_hit_rate: number | null;
-  avg_iteration: number | null;
-}
-
-// ── 全局错误（global_errors）类型 ──────────────────────────────────────────────
-
-interface GErrGroup {
-  fingerprint: string;
-  error_type: string;
-  logger_name: string;
-  source: string;
-  level: string;
-  status: string;
-  message: string;
-  count: number;
-  sessions: number;
-  channel: string;
-  is_new: boolean;
-  is_spiking: boolean;
-  spark: number[];
-  first_ts: string;
-  last_ts: string;
-}
-
-interface GErrSection {
-  key: string;
-  label: string;
-  count: number;
-  items: GErrGroup[];
-}
-
-interface GErrListResp {
-  range: string;
-  facet: string;
-  total: number;
-  sections: GErrSection[];
-}
-
-interface GErrOverview {
-  range: string;
-  total: number;
-  types: number;
-  new_types: number;
-  spiking_types: number;
-  last_ts: string | null;
-  spark: number[];
-}
-
-interface GErrVariant {
-  fingerprint: string;
-  count: number;
-  traceback_text: string;
-}
-
-interface GErrOccurrence {
-  session_key: string;
-  ts: string | null;
-  user_preview: string;
-}
-
-interface GErrDetail {
-  fingerprint: string;
-  error_type: string;
-  logger_name: string;
-  source: string;
-  level: string;
-  status: string;
-  message: string;
-  traceback_text: string;
-  count: number;
-  sessions: number;
-  channel: string;
-  first_ts: string;
-  last_ts: string;
-  trend: { bucket: string; count: number }[];
-  variants: GErrVariant[];
-  occurrences: GErrOccurrence[];
-}
-
-const RANGES: { key: string; label: string }[] = [
-  { key: "24h", label: "24 小时" },
-  { key: "7d", label: "7 天" },
-  { key: "30d", label: "30 天" },
-  { key: "all", label: "全部" },
-];
-
-const SOURCE_LABEL: Record<string, string> = {
-  log: "主动日志",
-  uncaught: "未捕获异常",
-  asyncio: "asyncio 任务",
-  thread: "子线程",
-};
-
-const STATUS_META: Record<string, { label: string; tone: ChartTone }> = {
-  active: { label: "活跃", tone: "warning" },
-  acknowledged: { label: "已确认", tone: "muted" },
-  ignored: { label: "已忽略", tone: "success" },
-};
-
-const TONE_BG: Record<ChartTone, string> = {
-  danger: "bg-danger",
-  warning: "bg-warning",
-  success: "bg-success",
-  accent: "bg-accent",
-  muted: "bg-subtle",
-};
-
-function _compact(value: number): string {
-  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
-  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
-  return String(Math.round(value));
-}
-
-function _pct(value: number | null): string {
-  return typeof value === "number" ? `${(value * 100).toFixed(1)}%` : "—";
-}
-
-// Shorten an ISO-bucket label: "2026-06-17T11" -> "11:00", "2026-06-17" -> "6-17".
-function _bucketLabel(bucket: string): string {
-  if (bucket.includes("T")) return `${bucket.slice(11, 13)}:00`;
-  const [, m, d] = bucket.split("-");
-  return m && d ? `${Number(m)}-${d}` : bucket;
-}
-
-function _shortTs(value: string | null): string {
-  if (!value) return "—";
-  const dt = new Date(value);
-  if (Number.isNaN(dt.getTime())) return value || "—";
-  return `${dt.getMonth() + 1}-${String(dt.getDate()).padStart(2, "0")} ${String(dt.getHours()).padStart(2, "0")}:${String(dt.getMinutes()).padStart(2, "0")}`;
-}
-
-// Percentage change of the last bucket vs the previous one, for the tile delta.
-function _delta(values: number[]): number | null {
-  if (values.length < 2) return null;
-  const last = values[values.length - 1];
-  const prev = values[values.length - 2];
-  if (!prev) return null;
-  return ((last - prev) / prev) * 100;
-}
-
-// 相对时间标签："刚刚" / "Xs 前" / "Xm 前"。
-function _ago(ms: number): string {
-  if (!Number.isFinite(ms) || ms < 0) return "刚刚";
-  const s = Math.floor(ms / 1000);
-  if (s < 3) return "刚刚";
-  if (s < 60) return `${s}s 前`;
-  const m = Math.floor(s / 60);
-  if (m < 60) return `${m}m 前`;
-  return `${Math.floor(m / 60)}h 前`;
-}
-
-// 严重度配色：爆发或高频 -> danger，中频 -> warning，低频 -> muted。
-function _severity(count: number, spiking: boolean): ChartTone {
-  if (spiking || count >= 20) return "danger";
-  if (count >= 5) return "warning";
-  return "muted";
-}
-
-function Card({ title, children, bodyClass, style }: { title: string; children: ReactNode; bodyClass?: string; style?: React.CSSProperties }): ReactElement {
-  return (
-    <div
-      className="flex flex-col overflow-hidden border border-border bg-surface"
-      style={style}
-    >
-      <div className="flex items-center justify-between border-b border-border px-4 py-2.5">
-        <h3 className="text-[12px] font-medium text-muted">{title}</h3>
-      </div>
-      <div className={bodyClass ?? "p-4"}>{children}</div>
-    </div>
-  );
-}
-
-// ── 错误排障台：从「错误」KPI 卡 FLIP 放大的独立卡片，stats-over-detail 构图 ──────────
-
-function ErrorDrill({
-  portalRef,
-  range,
-  onClose,
-}: {
-  portalRef: React.RefObject<HTMLButtonElement | null>;
-  range: string;
-  onClose: () => void;
-}): ReactElement {
-  const drillRef = useRef<HTMLDivElement>(null);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-  const [overview, setOverview] = useState<GErrOverview | null>(null);
-  const [facet, setFacet] = useState<string>("type");
-  const [q, setQ] = useState<string>("");
-  const [sections, setSections] = useState<GErrSection[]>([]);
-  const [selFp, setSelFp] = useState<string | null>(null);
-  const [detail, setDetail] = useState<GErrDetail | null>(null);
-  const [tab, setTab] = useState<"trend" | "trace" | "occ">("trace");
-  const [variant, setVariant] = useState<number>(0);
-
-  const loadList = useCallback(async () => {
-    const [ov, list] = await Promise.all([
-      api<GErrOverview>(`/api/dashboard/observe/global_errors/overview?range=${range}`),
-      api<GErrListResp>(`/api/dashboard/observe/global_errors?range=${range}&facet=${facet}&q=${encodeURIComponent(q)}`),
-    ]);
-    setOverview(ov);
-    setSections(list.sections ?? []);
-    const flat = (list.sections ?? []).flatMap((s) => s.items);
-    setSelFp((cur) => (cur && flat.some((i) => i.fingerprint === cur) ? cur : flat[0]?.fingerprint ?? null));
-  }, [range, facet, q]);
-
-  useEffect(() => {
-    void loadList();
-  }, [loadList]);
-
-  useEffect(() => {
-    if (!selFp) {
-      setDetail(null);
-      return;
-    }
-    let alive = true;
-    void (async () => {
-      const d = await api<GErrDetail>(`/api/dashboard/observe/global_errors/${selFp}?range=${range}`);
-      if (alive) {
-        setDetail(d);
-        setVariant(0);
-        setTab("trace");
-      }
-    })();
-    return () => {
-      alive = false;
-    };
-  }, [selFp, range]);
-
-  const close = useCallback(() => {
-    onClose();
-  }, [onClose]);
-
-  useEffect(() => {
-    closeButtonRef.current?.focus();
-    return () => portalRef.current?.focus();
-  }, [portalRef]);
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent): void => {
-      if (e.key === "Escape") close();
-      if (e.key !== "Tab") return;
-      const focusable = Array.from(
-        drillRef.current?.querySelectorAll<HTMLElement>(
-          'button:not([disabled]), input:not([disabled]), select:not([disabled]), [href], [tabindex]:not([tabindex="-1"])',
-        ) ?? [],
-      );
-      if (focusable.length === 0) return;
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      if (e.shiftKey && document.activeElement === first) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && document.activeElement === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [close]);
-
-  const setStatus = async (status: string): Promise<void> => {
-    if (!detail) return;
-    await api(`/api/dashboard/observe/global_errors/${detail.fingerprint}/status?value=${status}`, { method: "POST" });
-    await loadList();
-    setDetail((d) => (d ? { ...d, status } : d));
-  };
-
-  const gotoSession = (key: string): void => {
-    window.dispatchEvent(new CustomEvent("akashic:goto-session", { detail: key }));
-    close();
-  };
-
-  return (
-    <>
-      <div aria-hidden="true" className="fixed inset-0 z-30 bg-black/55" onClick={close} />
-      <div
-        ref={drillRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="observe-error-dialog-title"
-        className="fixed z-40 flex flex-col overflow-hidden rounded-md border border-border-strong bg-surface"
-        style={{
-          width: "min(1180px, 94vw)",
-          height: "min(84vh, 760px)",
-          left: "50%",
-          top: "50%",
-          marginLeft: "calc(min(1180px, 94vw) / -2)",
-          marginTop: "calc(min(84vh, 760px) / -2)",
-        }}
-      >
-        {/* 头部：402 大数字 + 摘要徽标 + range */}
-        <div className="flex flex-shrink-0 items-center gap-4 border-b border-border px-5 py-4">
-          <button
-            ref={closeButtonRef}
-            type="button"
-            onClick={close}
-            className="grid h-10 w-10 place-items-center rounded-md border border-border-strong bg-surface-2 text-[18px] text-muted transition-colors hover:text-fg"
-            aria-label="关闭错误分析"
-            title="返回 (Esc)"
-          >
-            ‹
-          </button>
-          <span className="font-mono text-[26px] font-semibold tabular-nums text-danger">{overview?.total ?? "—"}</span>
-          <div className="min-w-0">
-            <div id="observe-error-dialog-title" className="text-sm font-semibold">错误 · {RANGES.find((r) => r.key === range)?.label ?? range}</div>
-            <div className="mt-0.5 flex items-center gap-3 text-[11px] text-muted">
-              <span>{overview?.types ?? 0} 个类型</span>
-              {(overview?.new_types ?? 0) > 0 && <span>{overview?.new_types} 个新类型</span>}
-              {(overview?.spiking_types ?? 0) > 0 && <span className="font-semibold text-danger">{overview?.spiking_types} 个正在爆发</span>}
-            </div>
-          </div>
-        </div>
-
-        {/* 切维 + 搜索 */}
-        <div className="flex flex-shrink-0 items-center gap-3 border-b border-border px-4 py-2.5">
-          <div className="flex gap-1 rounded-md border border-border bg-bg p-0.5">
-            {[
-              { k: "type", l: "按类型" },
-              { k: "source", l: "按来源" },
-              { k: "channel", l: "按通道" },
-            ].map((f) => (
-              <button
-                key={f.k}
-                type="button"
-                onClick={() => setFacet(f.k)}
-                className={`rounded-[4px] px-2.5 py-1 text-[11px] transition-colors ${facet === f.k ? "bg-surface-3 text-fg" : "text-muted hover:text-fg"}`}
-              >
-                {f.l}
-              </button>
-            ))}
-          </div>
-          <input
-            value={q}
-            onChange={(e) => setQ(e.target.value)}
-            aria-label="搜索错误"
-            placeholder="按消息 / 模块过滤…"
-            className="w-[280px] rounded-md border border-border bg-bg px-3 py-1.5 text-[11.5px] text-fg outline-none focus:border-accent-deep"
-          />
-        </div>
-
-        {/* 左群组 / 右详情 */}
-        <div className="grid min-h-0 flex-1 grid-cols-[340px_1fr]">
-          <div className="overflow-auto border-r border-border p-1.5">
-            {sections.map((section) => (
-              <div key={section.key}>
-                {section.label && (
-                  <div className="flex items-center justify-between px-2.5 pb-1 pt-3 text-[11px] font-medium text-muted">
-                    <span>{section.label}</span>
-                    <span>{section.count} 次</span>
-                  </div>
-                )}
-                {section.items.map((g) => (
-                  <ErrorRow key={g.fingerprint} g={g} active={g.fingerprint === selFp} onClick={() => setSelFp(g.fingerprint)} />
-                ))}
-              </div>
-            ))}
-            {sections.length === 0 && <div className="p-6 text-[12.5px] text-muted">所选区间内没有错误。</div>}
-          </div>
-
-          {detail ? (
-            <ErrorDetail
-              detail={detail}
-              tab={tab}
-              setTab={setTab}
-              variant={variant}
-              setVariant={setVariant}
-              onStatus={setStatus}
-              onGoto={gotoSession}
-            />
-          ) : (
-            <div className="grid place-items-center text-[13px] text-muted">选择左侧一个错误查看现场</div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-}
-
-function ErrorRow({ g, active, onClick }: { g: GErrGroup; active: boolean; onClick: () => void }): ReactElement {
-  const tone = _severity(g.count, g.is_spiking);
-  const spark = g.spark ?? [];
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`grid w-full grid-cols-[9px_1fr_auto] items-center gap-2.5 border-b border-border px-3 py-2.5 text-left transition-colors duration-150 ${active ? "bg-accent-soft" : "hover:bg-surface-2"}`}
-    >
-      <span className="relative flex h-2 w-2" aria-hidden="true">
-        <span className={`relative inline-flex h-2 w-2 rounded-full ${TONE_BG[tone]}`} />
-      </span>
-      <div className="min-w-0">
-        <div className="flex items-center gap-1.5 font-mono text-[12.5px]">
-          <span className="truncate">{g.error_type}</span>
-          {g.is_new && <span className="text-[9px] font-semibold text-accent">新</span>}
-          {g.is_spiking && <span className="text-[9px] font-semibold text-danger">爆发</span>}
-        </div>
-        <div className="mt-0.5 truncate font-mono text-[10px] text-subtle">{g.logger_name}</div>
-        <div className="mt-1 flex gap-2.5 text-[10px] text-muted">
-          <span><b className="font-semibold text-fg">{g.count}</b> 次</span>
-          <span><b className="font-semibold text-fg">{g.sessions}</b> session</span>
-        </div>
-      </div>
-      <div className="flex flex-col items-end gap-1.5">
-        <div className="h-[22px] w-[62px]">{spark.length > 1 && <Sparkline data={spark} tone={tone} height={22} />}</div>
-        <span className="font-mono text-[10px] text-subtle">{_shortTs(g.last_ts)}</span>
-      </div>
-    </button>
-  );
-}
-
-function ErrorDetail({
-  detail,
-  tab,
-  setTab,
-  variant,
-  setVariant,
-  onStatus,
-  onGoto,
-}: {
-  detail: GErrDetail;
-  tab: "trend" | "trace" | "occ";
-  setTab: (t: "trend" | "trace" | "occ") => void;
-  variant: number;
-  setVariant: (n: number) => void;
-  onStatus: (s: string) => void;
-  onGoto: (key: string) => void;
-}): ReactElement {
-  const status = STATUS_META[detail.status] ?? STATUS_META.active;
-  const tone = _severity(detail.count, false);
-  const activeVariant = detail.variants[variant] ?? detail.variants[0];
-  return (
-    <div className="flex min-h-0 flex-col">
-      {/* hero */}
-      <div className="border-b border-border px-5 py-4">
-        <div className="font-mono text-[19px] font-semibold">{detail.error_type}</div>
-        <div className="mt-1.5 font-mono text-[12px] leading-relaxed text-danger">{detail.message}</div>
-        <div className="mt-3 flex flex-wrap gap-1.5">
-          <Chip>{detail.logger_name}</Chip>
-          <Chip>来源 · {SOURCE_LABEL[detail.source] ?? detail.source}</Chip>
-          <Chip>{detail.channel}</Chip>
-          <Chip tone="danger">{detail.level}</Chip>
-          <Chip tone={status.tone}>{status.label}</Chip>
-        </div>
-      </div>
-
-      {/* 爆炸半径 */}
-      <div className="grid grid-cols-4 gap-px border-b border-border bg-border">
-        <Blast label="累计次数" value={String(detail.count)} />
-        <Blast label="独立 session" value={String(detail.sessions)} />
-        <Blast label="首次" value={_shortTs(detail.first_ts)} small />
-        <Blast label="最近" value={_shortTs(detail.last_ts)} small />
-      </div>
-
-      {/* 分段 */}
-      <div className="flex gap-1 border-b border-border px-5 pt-3">
-        <TabBtn active={tab === "trend"} onClick={() => setTab("trend")}>趋势</TabBtn>
-        <TabBtn active={tab === "trace"} onClick={() => setTab("trace")}>
-          Traceback{detail.variants.length > 1 ? ` · ${detail.variants.length} 变体` : ""}
-        </TabBtn>
-        <TabBtn active={tab === "occ"} onClick={() => setTab("occ")}>现场 · {detail.occurrences.length}</TabBtn>
-      </div>
-
-      <div className="min-h-0 flex-1 overflow-auto px-5 py-4">
-        {tab === "trend" && (
-          <TrendChart
-            data={detail.trend.map((p) => ({ label: _bucketLabel(p.bucket), value: p.count }))}
-            kind="bar"
-            tone={tone}
-            valueFmt={(n) => String(n)}
-            empty="区间内无发作"
-          />
-        )}
-        {tab === "trace" && (
-          <div>
-            {detail.variants.length > 1 && (
-              <div className="mb-3 flex gap-2">
-                {detail.variants.map((v, i) => (
-                  <button
-                    key={v.fingerprint}
-                    type="button"
-                    onClick={() => setVariant(i)}
-                    className={`rounded border px-2.5 py-1.5 text-left text-[10.5px] ${i === variant ? "border-accent-deep bg-accent-soft text-fg" : "border-border bg-bg text-muted"}`}
-                  >
-                    <b className="text-fg">{v.count}</b> 次 · 变体 {i + 1}
-                  </button>
-                ))}
-              </div>
-            )}
-            <pre className="m-0 max-h-[280px] overflow-auto rounded border border-border bg-bg p-4 font-mono text-[11px] leading-relaxed text-muted">
-              {activeVariant?.traceback_text || detail.traceback_text}
-            </pre>
-          </div>
-        )}
-        {tab === "occ" && (
-          <div className="flex flex-col gap-2">
-            {detail.occurrences.length === 0 && <div className="text-[12px] text-muted">无可关联的 session 现场。</div>}
-            {detail.occurrences.map((o) => (
-              <div key={o.session_key} className="grid grid-cols-[auto_1fr_auto] items-center gap-3.5 border-b border-border bg-bg px-3.5 py-2.5">
-                <span className="font-mono text-[11px] text-accent">{_shortTs(o.ts)}</span>
-                <div className="min-w-0">
-                  <div className="truncate text-[12px]">{o.user_preview || "（无用户消息）"}</div>
-                  <div className="mt-0.5 font-mono text-[10px] text-subtle">session {o.session_key}</div>
-                </div>
-                <button
-                  type="button"
-                  onClick={() => onGoto(o.session_key)}
-                  className="whitespace-nowrap rounded border border-accent-deep bg-accent-soft px-2.5 py-1.5 text-[10.5px] text-accent-ink"
-                >
-                  查看对话
-                </button>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* 操作 */}
-      <div className="flex flex-shrink-0 gap-2 border-t border-border px-5 py-3">
-        <button
-          type="button"
-          onClick={() => detail.occurrences[0] && onGoto(detail.occurrences[0].session_key)}
-          disabled={detail.occurrences.length === 0}
-          className="rounded border border-accent-deep bg-accent-soft px-3 py-2 text-[11px] text-accent-ink transition-colors disabled:opacity-40"
-        >
-          查看最近对话
-        </button>
-        <button
-          type="button"
-          onClick={() => void navigator.clipboard?.writeText(detail.traceback_text)}
-          className="rounded border border-border-strong bg-surface-2 px-3 py-2 text-[11px] text-muted transition-colors hover:text-fg"
-        >
-          复制 Traceback
-        </button>
-        <div className="flex-1" />
-        <button type="button" onClick={() => onStatus("acknowledged")} className="rounded border border-border-strong bg-surface-2 px-3 py-2 text-[11px] text-muted transition-colors hover:text-fg">
-          标记已确认
-        </button>
-        <button type="button" onClick={() => onStatus("ignored")} className="rounded border border-border-strong bg-surface-2 px-3 py-2 text-[11px] text-muted transition-colors hover:border-danger/40 hover:text-danger">
-          忽略此类型
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function Blast({ label, value, small }: { label: string; value: string; small?: boolean }): ReactElement {
-  return (
-    <div className="bg-surface px-4 py-3">
-      <div className="text-[10px] text-subtle">{label}</div>
-      <div className={`mt-1.5 font-mono font-semibold tabular-nums ${small ? "text-[12.5px]" : "text-[18px]"}`}>{value}</div>
-    </div>
-  );
-}
-
-function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }): ReactElement {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`-mb-px border-b-2 px-3 py-2 text-[11.5px] transition-colors ${active ? "border-accent text-fg" : "border-transparent text-muted hover:text-fg"}`}
-    >
-      {children}
-    </button>
-  );
-}
-
-// 首屏骨架保留稳定结构，避免加载时布局跳动。
-function SkelBlock({ className }: { className: string }): ReactElement {
-  return (
-    <div className={`relative overflow-hidden rounded border border-border bg-surface-2 ${className}`} />
-  );
-}
-
-function ObserveSkeleton(): ReactElement {
-  return (
-    <div className="flex flex-col gap-4 p-6">
-      <div className="flex items-end justify-between">
-        <div className="flex flex-col gap-2">
-          <SkelBlock className="h-7 w-48" />
-          <SkelBlock className="h-3 w-64 rounded" />
-        </div>
-        <SkelBlock className="h-9 w-56" />
-      </div>
-      <div className="grid grid-cols-4 gap-4">
-        {[0, 1, 2, 3].map((i) => <SkelBlock key={i} className="h-[132px]" />)}
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        {[0, 1, 2, 3].map((i) => <SkelBlock key={i} className="h-[218px]" />)}
-      </div>
-    </div>
-  );
-}
-
-// ── 监测主面板 ────────────────────────────────────────────────────────────────
-
-// Grafana-style monitoring overview over observe.db agent-loop telemetry.
-function ObserveMain(_props: { dispatch: PluginDispatch }): ReactElement {
-  const [range, setRange] = useState<string>("24h");
-  const [overview, setOverview] = useState<Overview | null>(null);
-  const [points, setPoints] = useState<SeriesPoint[]>([]);
-  const [gErr, setGErr] = useState<GErrOverview | null>(null);
-  const [drillOpen, setDrillOpen] = useState<boolean>(false);
-  const [updatedAt, setUpdatedAt] = useState<number>(0);
-  const [nowTs, setNowTs] = useState<number>(() => Date.now());
-  const [refreshing, setRefreshing] = useState<boolean>(false);
-  const portalRef = useRef<HTMLButtonElement>(null);
-  const overviewRef = useRef<HTMLDivElement>(null);
-
-  const load = useCallback(async () => {
-    setRefreshing(true);
-    try {
-      const [ov, series, ge] = await Promise.all([
-        api<Overview>(`/api/dashboard/observe/overview?range=${range}`),
-        api<{ points: SeriesPoint[] }>(`/api/dashboard/observe/timeseries?range=${range}`),
-        api<GErrOverview>(`/api/dashboard/observe/global_errors/overview?range=${range}`),
-      ]);
-      setOverview(ov);
-      setPoints(series.points ?? []);
-      setGErr(ge);
-      setUpdatedAt(Date.now());
-    } finally {
-      setRefreshing(false);
-    }
-  }, [range]);
-
-  // 首次 + range 变化加载；并以 15s 心跳自动刷新，制造"活的"实时感。
-  useEffect(() => {
-    void load();
-    const id = window.setInterval(() => void load(), 15000);
-    return () => window.clearInterval(id);
-  }, [load]);
-
-  // 1s tick 驱动"更新于 Xs 前"的相对时间标签。
-  useEffect(() => {
-    const id = window.setInterval(() => setNowTs(Date.now()), 1000);
-    return () => window.clearInterval(id);
-  }, []);
-
-  useEffect(() => {
-    if (overviewRef.current) overviewRef.current.inert = drillOpen;
-  }, [drillOpen]);
-
-  if (!overview) {
-    return <ObserveSkeleton />;
-  }
-
-  const turnSeries = points.map((p) => p.turns);
-  const errorSeries = points.map((p) => p.errors);
-  const tokenSeries = points.map((p) => p.input_tokens);
-  const passiveHitSeries = points.map((p) => (p.passive_cache_hit_rate ?? 0) * 100);
-  const proactiveHitSeries = points.map((p) => (p.proactive_cache_hit_rate ?? 0) * 100);
-  const iterSeries = points.map((p) => p.avg_iteration ?? 0);
-  const labelled = (vals: number[]) => points.map((p, i) => ({ label: _bucketLabel(p.bucket), value: vals[i] }));
-
-  // 全局错误总数（采集到的、跨子系统）优先用于「错误」卡，与排障台数字一致。
-  const gErrTotal = gErr?.total ?? overview.errors;
-  return (
-    <>
-      <div
-        ref={overviewRef}
-        aria-hidden={drillOpen || undefined}
-        className="flex flex-col gap-5 p-6 transition-opacity duration-150"
-        style={drillOpen ? { opacity: 0.35, pointerEvents: "none" } : undefined}
-      >
-        {/* header + range switcher */}
-        <div className="flex items-end justify-between">
-          <div>
-            <div className="flex items-center gap-2.5">
-              <span className="detail-title">Observe · 监测</span>
-              <span className="text-[11px] font-medium text-success">实时更新</span>
-            </div>
-            <div className="detail-subtext">
-              Agent 主循环遥测 · Token / 迭代 / 错误
-              <span className="ml-2 font-mono text-[11px] text-subtle">更新于 {_ago(nowTs - updatedAt)}</span>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void load()}
-              className={`grid h-10 w-10 place-items-center rounded-md border border-border bg-surface-2 text-muted transition-colors hover:border-border-strong hover:text-fg ${refreshing ? "animate-spin" : ""}`}
-              aria-label="刷新监测数据"
-              title="刷新"
-            >
-              ↻
-            </button>
-            <div className="flex gap-1 rounded-md border border-border bg-surface-2 p-1">
-              {RANGES.map((r) => (
-                <button
-                  key={r.key}
-                  type="button"
-                  onClick={() => setRange(r.key)}
-                  className={`min-h-10 rounded-[4px] px-2.5 py-1 text-[11px] transition-colors ${range === r.key ? "bg-accent text-accent-ink" : "text-muted hover:bg-surface-3 hover:text-fg"}`}
-                  aria-pressed={range === r.key}
-                >
-                  {r.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        <section
-          className={`flex min-h-16 items-center justify-between gap-4 border px-4 py-3 ${gErrTotal > 0 ? "border-danger/40 bg-danger/10" : "border-success/35 bg-success/10"}`}
-          aria-label="运行状态"
-        >
-          <div className="min-w-0">
-            <div className={`text-[13px] font-semibold ${gErrTotal > 0 ? "text-danger" : "text-success"}`}>
-              {gErrTotal > 0 ? `${gErrTotal} 条错误需要查看` : "当前区间没有采集到错误"}
-            </div>
-            <p className="mt-1 text-[11.5px] text-muted">
-              {gErrTotal > 0 ? `${gErr?.types ?? 0} 个错误类型，先查看爆发和新出现的类型。` : "主循环遥测持续更新，缓存与迭代指标见下方。"}
-            </p>
-          </div>
-          {gErrTotal > 0 && (
-            <button
-              type="button"
-              ref={portalRef}
-              onClick={() => setDrillOpen(true)}
-              className="min-h-10 flex-shrink-0 rounded-md border border-danger/40 bg-surface px-3 text-[12px] font-semibold text-danger hover:bg-danger/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
-            >
-              查看错误分析
-            </button>
-          )}
-        </section>
-
-        {/* 关键运行指标 */}
-        <Grid columns={3}>
-          <div>
-            <MetricTile label="对话轮数" value={_compact(overview.turns)} delta={_delta(turnSeries)} sub={overview.last_ts ? `最近 ${_shortTs(overview.last_ts)}` : "无记录"} tone="accent" spark={turnSeries} />
-          </div>
-          <div>
-            <MetricTile label="被动 KV 命中率" value={_pct(overview.passive_cache_hit_rate)} sub={`主动 ${_pct(overview.proactive_cache_hit_rate)}`} tone="success" spark={passiveHitSeries} />
-          </div>
-          <div>
-            <MetricTile label="平均迭代" value={overview.avg_iteration != null ? overview.avg_iteration.toFixed(1) : "—"} unit={`峰 ${overview.max_iteration}`} sub="每轮 LLM 调用次数" tone="warning" spark={iterSeries} />
-          </div>
-        </Grid>
-
-        {/* 首要趋势 */}
-        <Grid columns={2}>
-          <Card title="输入 Token 趋势">
-            <TrendChart data={labelled(tokenSeries)} kind="area" tone="accent" valueFmt={_compact} />
-          </Card>
-          <Card title="平均迭代趋势">
-            <TrendChart data={labelled(iterSeries)} kind="area" tone="warning" valueFmt={(n) => n.toFixed(1)} />
-          </Card>
-        </Grid>
-
-        <details className="border-t border-border pt-1">
-          <summary className="min-h-11 cursor-pointer py-3 text-[12px] font-semibold text-fg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
-            查看缓存命中与错误趋势
-          </summary>
-          <Grid columns={2}>
-            <Card title="全局被动链路命中率趋势">
-              <TrendChart data={labelled(passiveHitSeries)} kind="area" tone="success" valueFmt={(n) => `${n.toFixed(0)}%`} />
-            </Card>
-            <Card title="全局主动链路命中率趋势">
-              <TrendChart data={labelled(proactiveHitSeries)} kind="area" tone="accent" valueFmt={(n) => `${n.toFixed(0)}%`} />
-            </Card>
-            <Card title="错误趋势">
-              <TrendChart data={labelled(errorSeries)} kind="bar" tone="danger" valueFmt={(n) => String(n)} empty="所选区间内没有错误" />
-            </Card>
-          </Grid>
-        </details>
-      </div>
-
-      {drillOpen && <ErrorDrill portalRef={portalRef} range={range} onClose={() => setDrillOpen(false)} />}
-    </>
-  );
-}
-
-window.AkashicDashboard.registerPlugin({
-  id: "observe",
-  label: "运行监测",
-  viewLabel: "运行监测",
-  layout: "workbench",
-  pageSize: 30,
-  rowKey: "id",
-
-  countTitle(total: number): string {
-    return `${total} 轮遥测`;
-  },
-
-  columns: [
-    { key: "session_key", label: "会话", width: 120, cellClass: "mono cell-session", rawTitle: true },
-    { key: "ts", label: "时间", width: 96, fmt: "mono-time", cellClass: "mono cell-time", rawTitle: true },
-    { key: "error", label: "错误", flex: true, cellClass: "content-preview" },
-  ],
-
-  async getCount(): Promise<number | null> {
-    try {
-      const ov = await api<Overview>("/api/dashboard/observe/overview?range=all");
-      return ov.turns || 0;
-    } catch {
-      return null;
-    }
-  },
-
-  async fetchPage({ page, pageSize }: { page: number; pageSize: number }) {
-    const data = await api<{ items: Record<string, unknown>[]; total: number }>(
-      `/api/dashboard/observe/errors?range=all&page=${page}&page_size=${pageSize}`,
-    );
-    return { items: data.items || [], total: data.total || 0 };
-  },
-
-  Main: ObserveMain,
-});
diff --git a/plugin.py b/plugin.py
index e8cab77..1f97bd2 100644
--- a/plugin.py
+++ b/plugin.py
@@ -36,6 +36,12 @@
 inject = (UI_SLOTS,)
 workspace_roots = ("observe",)
 dashboard_module = "dashboard.py"
+web_module = "web_module.js"
+web_requires = ("workbench.panels.v1",)
+web_provides = ()
+web_contract_digests = {
+    "workbench.panels.v1": "724b282c22c4b3f3a36967ab664c4dfd8bce4257665f99459000306938caf527",
+}
 
 
 class _ObserveWriter(Protocol):
diff --git a/tests/test_web_module.mjs b/tests/test_web_module.mjs
new file mode 100644
index 0000000..f832147
--- /dev/null
+++ b/tests/test_web_module.mjs
@@ -0,0 +1,216 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+const source = await readFile(new URL("../web_module.js", import.meta.url), "utf8");
+const module = await import(`data:text/javascript;base64,${Buffer.from(source).toString("base64")}`);
+
+class Node {
+  constructor(name, fragment = false) {
+    this.name = name;
+    this.fragment = fragment;
+    this.children = [];
+    this.parentNode = null;
+    this.className = "";
+    this.textContent = "";
+    this.attributes = new Map();
+    this.listeners = new Map();
+    this.style = { setProperty() {} };
+    this.classList = {
+      add: (...names) => { this.className = [...new Set(`${this.className} ${names.join(" ")}`.trim().split(/\s+/))].join(" "); },
+      remove: (...names) => { this.className = this.className.split(/\s+/).filter((name) => name && !names.includes(name)).join(" "); },
+      contains: (name) => this.className.split(/\s+/).includes(name),
+    };
+  }
+
+  append(...nodes) {
+    for (const node of nodes) {
+      if (node.fragment) {
+        this.append(...node.children);
+        continue;
+      }
+      node.parentNode = this;
+      this.children.push(node);
+    }
+  }
+
+  replaceChildren(...nodes) {
+    for (const child of this.children) {
+      if (child.contains(globalThis.document?.activeElement)) {
+        globalThis.document.activeElement = globalThis.document.body;
+      }
+      child.parentNode = null;
+    }
+    this.children = [];
+    this.append(...nodes);
+  }
+
+  replaceWith(node) {
+    const parent = this.parentNode;
+    if (!parent) return;
+    const index = parent.children.indexOf(this);
+    parent.children[index] = node;
+    node.parentNode = parent;
+    this.parentNode = null;
+  }
+
+  remove() {
+    if (!this.parentNode) return;
+    this.parentNode.children = this.parentNode.children.filter((child) => child !== this);
+    this.parentNode = null;
+  }
+
+  setAttribute(name, value) { this.attributes.set(name, String(value)); }
+  removeAttribute(name) { this.attributes.delete(name); }
+  addEventListener(name, callback) { this.listeners.set(name, callback); }
+  removeEventListener(name, callback) { if (this.listeners.get(name) === callback) this.listeners.delete(name); }
+  focus() {
+    this.focused = true;
+    globalThis.document.activeElement = this;
+  }
+  click() { this.listeners.get("click")?.({ target: this, preventDefault() {} }); }
+
+  contains(node) {
+    return this === node || this.children.some((child) => child.contains(node));
+  }
+
+  querySelector(selector) {
+    if (!selector.startsWith(".")) return null;
+    const name = selector.slice(1);
+    return find(this, (node) => node.className.split(/\s+/).includes(name));
+  }
+}
+
+function find(node, predicate) {
+  for (const child of node.children) {
+    if (predicate(child)) return child;
+    const nested = find(child, predicate);
+    if (nested) return nested;
+  }
+  return null;
+}
+
+async function flush() {
+  for (let index = 0; index < 10; index += 1) await Promise.resolve();
+}
+
+test("workbench panel uses ctx.http and disposes timers, listeners, and requests", async () => {
+  const document = {
+    body: new Node("body"),
+    activeElement: null,
+    createElement(name) { return new Node(name); },
+    createDocumentFragment() { return new Node("fragment", true); },
+  };
+  const timers = new Set();
+  const clearedTimers = new Set();
+  const listeners = new Map();
+  globalThis.document = document;
+  globalThis.window = {
+    setInterval(callback, milliseconds) {
+      const timer = { callback, milliseconds };
+      timers.add(timer);
+      return timer;
+    },
+    clearInterval(timer) { clearedTimers.add(timer); },
+    setTimeout(callback, milliseconds) { return { callback, milliseconds }; },
+    clearTimeout() {},
+    addEventListener(name, callback) { listeners.set(name, callback); },
+    removeEventListener(name, callback) { if (listeners.get(name) === callback) listeners.delete(name); },
+  };
+  Object.defineProperty(globalThis, "navigator", {
+    configurable: true,
+    value: { clipboard: { async writeText() {} } },
+  });
+
+  const requests = [];
+  let releaseDrillList;
+  const drillListReady = new Promise((resolve) => { releaseDrillList = resolve; });
+  const item = {
+    fingerprint: "fp-1",
+    error_type: "RuntimeError",
+    logger_name: "agent.loop",
+    count: 3,
+    sessions: 1,
+    last_ts: "2026-08-30T00:00:00+00:00",
+  };
+  const detail = {
+    ...item,
+    source: "asyncio",
+    level: "ERROR",
+    status: "active",
+    message: "background task failed",
+    channel: "agent",
+    first_ts: "2026-08-30T00:00:00+00:00",
+    traceback_text: "Traceback",
+    trend: [{ bucket: "2026-08-30T00", count: 3 }],
+    variants: [],
+    occurrences: [{ session_key: "mobile:demo", ts: "2026-08-30T00:00:00+00:00", user_preview: "hello" }],
+  };
+  const ctx = {
+    http: {
+      async request(path, options) {
+        requests.push({ path, options });
+        if (path.includes("/global_errors?")) await drillListReady;
+        const body = path.includes("/timeseries")
+          ? { points: [{ bucket: "2026-08-30T00", turns: 2, errors: 1, input_tokens: 44, passive_cache_hit_rate: 0.5, proactive_cache_hit_rate: 0.25, avg_iteration: 1.5 }] }
+          : path.includes("/overview") && !path.includes("global_errors")
+            ? { turns: 2, errors: 1, passive_cache_hit_rate: 0.5, proactive_cache_hit_rate: 0.25, avg_iteration: 1.5, max_iteration: 2, last_ts: "2026-08-30T00:00:00+00:00" }
+            : path.includes("global_errors/overview")
+              ? { total: 1, types: 1, new_types: 0, spiking_types: 0 }
+              : path.includes("/status?")
+                ? { ok: true }
+                : path.includes("global_errors/fp-1?")
+                  ? detail
+                  : { sections: [{ key: "all", label: "", count: 3, items: [item] }] };
+        return { ok: true, status: 200, async json() { return body; } };
+      },
+    },
+    ui: {
+      inject(contract, install) {
+        assert.equal(contract, "workbench.panels.v1");
+        install({ register(entry) { ctx.entry = entry; return () => {}; } });
+        return ctx.activationDispose;
+      },
+    },
+    activationDispose() {},
+  };
+
+  assert.equal(module.activate(ctx), ctx.activationDispose);
+  assert.deepEqual(
+    { id: ctx.entry.id, label: ctx.entry.label, order: ctx.entry.order, render: typeof ctx.entry.render },
+    { id: "observe", label: "运行监测", order: 40, render: "function" },
+  );
+
+  const host = new Node("host");
+  const dispose = ctx.entry.render(host);
+  await flush();
+  assert.equal(timers.size, 2);
+  assert.equal(requests.filter((request) => request.path.includes("/overview")).length, 2);
+
+  const open = find(host, (node) => node.name === "button" && node.textContent === "查看错误分析");
+  assert.ok(open);
+  open.click();
+  await flush();
+  const initialClose = find(host, (node) => node.attributes.get("aria-label") === "关闭错误分析");
+  assert.equal(document.activeElement, initialClose);
+  releaseDrillList();
+  await flush();
+  const settledClose = find(host, (node) => node.attributes.get("aria-label") === "关闭错误分析");
+  assert.equal(document.activeElement, settledClose);
+  assert.equal(
+    find(host, (node) => node.id === "observe-error-dialog-title")?.id,
+    "observe-error-dialog-title",
+  );
+  const acknowledge = find(host, (node) => node.name === "button" && node.textContent === "标记已确认");
+  assert.ok(acknowledge);
+  acknowledge.click();
+  await flush();
+  assert.ok(requests.some((request) => request.path.includes("/status?value=acknowledged") && request.options.method === "POST"));
+
+  dispose();
+  assert.equal(clearedTimers.size, 2);
+  assert.equal(listeners.size, 0);
+  assert.equal(document.body.children.length, 0);
+  assert.equal(host.className, "");
+  assert.ok(requests.every((request) => request.options.signal.aborted));
+});
diff --git a/web_module.css b/web_module.css
new file mode 100644
index 0000000..5745d03
--- /dev/null
+++ b/web_module.css
@@ -0,0 +1,504 @@
+.observe-web {
+  --observe-bg: var(--ak-color-bg-surface, #fff);
+  --observe-low: var(--ak-color-bg-surface-low, #f7f7fb);
+  --observe-ink: var(--ak-color-text-primary, #1c1b20);
+  --observe-muted: var(--ak-color-text-secondary, #5f5d68);
+  --observe-border: var(--ak-color-border-default, #d8d5df);
+  --observe-accent: var(--ak-color-action-primary, #3568d4);
+  --observe-danger: var(--ak-color-status-error, #b3261e);
+  --observe-success: var(--ak-color-status-success, #146c4b);
+  color: var(--observe-ink);
+  font-family: Roboto, "Noto Sans SC", system-ui, sans-serif;
+}
+
+.observe-page {
+  display: grid;
+  gap: 20px;
+  padding: 24px;
+}
+
+.observe-header,
+.observe-actions,
+.observe-title-line,
+.observe-ranges,
+.observe-health,
+.observe-dialog-header,
+.observe-drill-controls,
+.observe-detail-actions,
+.observe-error-row-heading,
+.observe-error-section-title,
+.observe-tags,
+.observe-detail-tabs,
+.observe-variants {
+  display: flex;
+  align-items: center;
+}
+
+.observe-header,
+.observe-health,
+.observe-dialog-header,
+.observe-drill-controls {
+  justify-content: space-between;
+}
+
+.observe-title-line,
+.observe-actions,
+.observe-ranges,
+.observe-tags,
+.observe-detail-tabs,
+.observe-variants {
+  gap: 8px;
+}
+
+.observe-title,
+.observe-chart-title,
+.observe-dialog-heading h2,
+.observe-detail-heading h3,
+.observe-detail-heading p,
+.observe-health p,
+.observe-dialog-heading p,
+.observe-occurrence p,
+.observe-load-error,
+.observe-muted {
+  margin: 0;
+}
+
+.observe-title {
+  font-size: 1.15rem;
+  line-height: 1.3;
+}
+
+.observe-subtitle,
+.observe-updated,
+.observe-live,
+.observe-metric-label,
+.observe-metric-sub,
+.observe-metric-delta,
+.observe-muted,
+.observe-error-logger,
+.observe-error-row-meta,
+.observe-dialog-heading p,
+.observe-detail-stat span,
+.observe-occurrence-time {
+  color: var(--observe-muted);
+  font-size: 0.75rem;
+}
+
+.observe-subtitle {
+  margin: 4px 0 0;
+}
+
+.observe-updated {
+  margin-left: 8px;
+  font-family: ui-monospace, monospace;
+}
+
+.observe-live {
+  color: var(--observe-success);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.observe-live--error,
+.observe-load-error {
+  color: var(--observe-danger);
+}
+
+.observe-icon-button,
+.observe-range,
+.observe-drill-button,
+.observe-facet,
+.observe-error-row,
+.observe-tab,
+.observe-variant,
+.observe-secondary-button {
+  border: 1px solid var(--observe-border);
+  color: inherit;
+  background: var(--observe-bg);
+  font: inherit;
+  cursor: pointer;
+}
+
+.observe-icon-button,
+.observe-range,
+.observe-drill-button,
+.observe-facet,
+.observe-tab,
+.observe-variant,
+.observe-secondary-button {
+  border-radius: 8px;
+}
+
+.observe-icon-button {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  font-size: 1.25rem;
+}
+
+.observe-ranges {
+  border: 1px solid var(--observe-border);
+  border-radius: 9px;
+  padding: 3px;
+  background: var(--observe-low);
+}
+
+.observe-range,
+.observe-facet,
+.observe-tab,
+.observe-variant,
+.observe-secondary-button {
+  min-height: 44px;
+  padding: 6px 10px;
+  font-size: 0.75rem;
+}
+
+.observe-range,
+.observe-facet,
+.observe-tab {
+  border-color: transparent;
+  background: transparent;
+}
+
+.observe-range.is-selected,
+.observe-facet.is-selected,
+.observe-tab.is-selected,
+.observe-variant.is-selected {
+  border-color: color-mix(in srgb, var(--observe-accent), var(--observe-border) 45%);
+  color: var(--observe-accent);
+  background: color-mix(in srgb, var(--observe-accent), var(--observe-bg) 91%);
+}
+
+.observe-health {
+  gap: 16px;
+  border: 1px solid color-mix(in srgb, var(--observe-success), var(--observe-border) 55%);
+  padding: 14px 16px;
+  background: color-mix(in srgb, var(--observe-success), var(--observe-bg) 94%);
+}
+
+.observe-health--attention {
+  border-color: color-mix(in srgb, var(--observe-danger), var(--observe-border) 55%);
+  background: color-mix(in srgb, var(--observe-danger), var(--observe-bg) 94%);
+}
+
+.observe-health-text strong {
+  color: var(--observe-success);
+  font-size: 0.875rem;
+}
+
+.observe-health--attention .observe-health-text strong {
+  color: var(--observe-danger);
+}
+
+.observe-health p {
+  margin-top: 5px;
+  color: var(--observe-muted);
+  font-size: 0.75rem;
+}
+
+.observe-drill-button {
+  flex: 0 0 auto;
+  min-height: 44px;
+  border-color: color-mix(in srgb, var(--observe-danger), var(--observe-border) 50%);
+  color: var(--observe-danger);
+  padding: 7px 12px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.observe-metrics,
+.observe-charts,
+.observe-detail-stats {
+  display: grid;
+  gap: 12px;
+}
+
+.observe-metrics {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.observe-metric,
+.observe-chart-card {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--observe-border);
+  background: var(--observe-bg);
+}
+
+.observe-metric {
+  display: grid;
+  min-height: 132px;
+  align-content: start;
+  gap: 6px;
+  padding: 16px;
+}
+
+.observe-metric--accent { border-top: 3px solid var(--observe-accent); }
+.observe-metric--success { border-top: 3px solid var(--observe-success); }
+.observe-metric--warning { border-top: 3px solid #9a6700; }
+
+.observe-metric-value {
+  font-family: ui-monospace, monospace;
+  font-size: 1.5rem;
+}
+
+.observe-metric-delta { color: var(--observe-accent); }
+
+.observe-sparkline {
+  display: flex;
+  height: 24px;
+  align-items: end;
+  gap: 2px;
+  margin-top: auto;
+}
+
+.observe-sparkline i {
+  width: 100%;
+  height: var(--observe-spark-height);
+  background: color-mix(in srgb, var(--observe-accent), transparent 35%);
+}
+
+.observe-charts {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.observe-chart-card {
+  min-height: 190px;
+  padding: 16px;
+}
+
+.observe-chart-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.observe-chart {
+  display: flex;
+  height: 132px;
+  align-items: end;
+  gap: 3px;
+  margin-top: 14px;
+  border-bottom: 1px solid var(--observe-border);
+}
+
+.observe-chart-bar {
+  flex: 1;
+  min-width: 2px;
+  height: var(--observe-chart-height);
+  background: var(--observe-accent);
+}
+
+.observe-chart-card--success .observe-chart-bar { background: var(--observe-success); }
+.observe-chart-card--warning .observe-chart-bar { background: #9a6700; }
+.observe-chart-card--danger .observe-chart-bar { background: var(--observe-danger); }
+
+.observe-chart .observe-muted {
+  align-self: center;
+  margin: auto;
+}
+
+.observe-skeleton {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.observe-skeleton-block {
+  min-height: 120px;
+  border: 1px solid var(--observe-border);
+  background: linear-gradient(105deg, var(--observe-low), var(--observe-bg), var(--observe-low));
+}
+
+.observe-dialog-backdrop {
+  position: fixed;
+  z-index: 50;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgb(0 0 0 / 55%);
+}
+
+.observe-dialog {
+  display: grid;
+  width: min(1120px, 94vw);
+  height: min(80vh, 760px);
+  grid-template-rows: auto auto minmax(0, 1fr);
+  overflow: hidden;
+  border: 1px solid var(--observe-border);
+  background: var(--observe-bg);
+  box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
+}
+
+.observe-dialog-header,
+.observe-drill-controls {
+  gap: 16px;
+  border-bottom: 1px solid var(--observe-border);
+  padding: 14px 18px;
+}
+
+.observe-dialog-heading {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 12px;
+  align-items: center;
+}
+
+.observe-dialog-total {
+  grid-row: span 2;
+  color: var(--observe-danger);
+  font-family: ui-monospace, monospace;
+  font-size: 1.8rem;
+}
+
+.observe-dialog-heading h2 { font-size: 0.95rem; }
+
+.observe-search {
+  width: min(280px, 42vw);
+  min-height: 44px;
+  border: 1px solid var(--observe-border);
+  border-radius: 7px;
+  padding: 0 10px;
+  color: inherit;
+  background: var(--observe-low);
+  font: inherit;
+  font-size: 0.75rem;
+}
+
+.observe-drill-body {
+  display: grid;
+  min-height: 0;
+  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
+}
+
+.observe-error-list,
+.observe-error-detail,
+.observe-detail-content {
+  min-height: 0;
+  overflow: auto;
+}
+
+.observe-error-list {
+  border-right: 1px solid var(--observe-border);
+  padding: 6px;
+}
+
+.observe-error-section-title {
+  justify-content: space-between;
+  padding: 12px 8px 5px;
+  color: var(--observe-muted);
+  font-size: 0.7rem;
+}
+
+.observe-error-row {
+  display: grid;
+  width: 100%;
+  gap: 4px;
+  border-width: 0 0 1px;
+  padding: 10px 8px;
+  text-align: left;
+}
+
+.observe-error-row:hover,
+.observe-error-row.is-selected { background: var(--observe-low); }
+
+.observe-error-row-heading { gap: 6px; }
+.observe-error-row-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; font-size: 0.78rem; }
+.observe-error-logger { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
+
+.observe-tag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  border: 1px solid var(--observe-border);
+  border-radius: 99px;
+  padding: 0 7px;
+  color: var(--observe-muted);
+  font-size: 0.68rem;
+}
+
+.observe-tag--new { color: var(--observe-accent); }
+.observe-tag--danger { color: var(--observe-danger); }
+
+.observe-error-detail {
+  display: flex;
+  flex-direction: column;
+}
+
+.observe-detail-heading,
+.observe-detail-content,
+.observe-detail-actions { padding: 16px 18px; }
+.observe-detail-heading h3 { font-family: ui-monospace, monospace; font-size: 1rem; }
+.observe-detail-message { margin-top: 8px; color: var(--observe-danger); font-family: ui-monospace, monospace; font-size: 0.75rem; line-height: 1.5; overflow-wrap: anywhere; }
+.observe-tags { flex-wrap: wrap; margin-top: 12px; }
+
+.observe-detail-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--observe-border); }
+.observe-detail-stat { display: grid; gap: 5px; border-right: 1px solid var(--observe-border); padding: 12px; }
+.observe-detail-stat:last-child { border-right: 0; }
+.observe-detail-stat strong { overflow: hidden; font-family: ui-monospace, monospace; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; }
+
+.observe-detail-tabs { border-bottom: 1px solid var(--observe-border); padding: 8px 12px 0; }
+.observe-detail-content { flex: 1; }
+.observe-detail-content .observe-chart-card { min-height: 0; }
+
+.observe-traceback {
+  max-height: 310px;
+  margin: 0;
+  overflow: auto;
+  border: 1px solid var(--observe-border);
+  padding: 14px;
+  background: var(--observe-low);
+  color: var(--observe-muted);
+  font: 0.72rem/1.5 ui-monospace, monospace;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.observe-occurrence {
+  display: grid;
+  gap: 6px;
+  border-bottom: 1px solid var(--observe-border);
+  padding: 11px 0;
+  font-size: 0.78rem;
+}
+
+.observe-session-key { color: var(--observe-accent); font-size: 0.68rem; overflow-wrap: anywhere; }
+
+.observe-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--observe-border); }
+.observe-actions-spacer { flex: 1; }
+.observe-secondary-button--danger { color: var(--observe-danger); }
+
+@media (hover: hover) {
+  .observe-icon-button:hover,
+  .observe-range:hover,
+  .observe-facet:hover,
+  .observe-tab:hover,
+  .observe-variant:hover,
+  .observe-secondary-button:hover,
+  .observe-drill-button:hover { border-color: var(--observe-accent); }
+}
+
+.observe-icon-button:focus-visible,
+.observe-range:focus-visible,
+.observe-drill-button:focus-visible,
+.observe-facet:focus-visible,
+.observe-error-row:focus-visible,
+.observe-tab:focus-visible,
+.observe-variant:focus-visible,
+.observe-secondary-button:focus-visible,
+.observe-search:focus-visible { outline: 2px solid var(--observe-accent); outline-offset: 2px; }
+
+@media (max-width: 760px) {
+  .observe-page { padding: 16px; }
+  .observe-header,
+  .observe-actions,
+  .observe-health,
+  .observe-drill-controls { align-items: stretch; flex-direction: column; }
+  .observe-metrics,
+  .observe-charts { grid-template-columns: 1fr; }
+  .observe-dialog { width: 100vw; height: 100vh; }
+  .observe-drill-body { grid-template-columns: 1fr; grid-template-rows: minmax(180px, 35%) minmax(0, 1fr); }
+  .observe-error-list { border-right: 0; border-bottom: 1px solid var(--observe-border); }
+  .observe-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .observe-detail-stat:nth-child(2) { border-right: 0; }
+}
diff --git a/web_module.js b/web_module.js
new file mode 100644
index 0000000..6d6c4a6
--- /dev/null
+++ b/web_module.js
@@ -0,0 +1,812 @@
+const RANGES = [
+  ["24h", "24 小时"],
+  ["7d", "7 天"],
+  ["30d", "30 天"],
+  ["all", "全部"],
+];
+
+const STATUS_LABELS = {
+  active: "活跃",
+  acknowledged: "已确认",
+  ignored: "已忽略",
+};
+
+const SOURCE_LABELS = {
+  log: "主动日志",
+  uncaught: "未捕获异常",
+  asyncio: "asyncio 任务",
+  thread: "子线程",
+};
+
+export function activate(ctx) {
+  return ctx.ui.inject("workbench.panels.v1", (mount) => mount.register({
+    id: "observe",
+    label: "运行监测",
+    order: 40,
+    render(host) {
+      return mountObservePanel(host, ctx);
+    },
+  }));
+}
+
+function mountObservePanel(host, ctx) {
+  const state = {
+    range: "24h",
+    overview: null,
+    points: [],
+    globalErrors: null,
+    updatedAt: 0,
+    refreshing: false,
+    error: "",
+    disposed: false,
+  };
+  let mainRequest = new AbortController();
+  let drillDispose = null;
+  let refreshTimer = 0;
+  let clockTimer = 0;
+  let updatedLabel = null;
+  let drillTrigger = null;
+  const surface = element("div", "observe-surface");
+  const overlay = element("div", "observe-overlay-root");
+
+  host.classList.add("observe-web");
+  host.replaceChildren(surface, overlay);
+
+  const closeDrill = () => {
+    if (drillDispose === null) return;
+    const dispose = drillDispose;
+    drillDispose = null;
+    dispose();
+    host.classList.remove("observe-web--drill-open");
+    surface.inert = false;
+    if (drillTrigger?.isConnected) drillTrigger.focus();
+    drillTrigger = null;
+  };
+
+  const openDrill = () => {
+    if (state.disposed || drillDispose !== null) return;
+    drillTrigger = document.activeElement;
+    host.classList.add("observe-web--drill-open");
+    surface.inert = true;
+    drillDispose = mountErrorDrill(ctx, state.range, overlay, closeDrill, loadMain);
+  };
+
+  const render = () => {
+    const page = element("section", "observe-page");
+    const header = element("header", "observe-header");
+    const heading = element("div", "observe-heading");
+    const titleLine = element("div", "observe-title-line");
+    titleLine.append(
+      element("h1", "observe-title", "Observe · 监测"),
+      element(
+        "span",
+        `observe-live${state.error ? " observe-live--error" : ""}`,
+        state.error ? "更新失败" : state.refreshing ? "正在刷新" : "实时更新",
+      ),
+    );
+    const subtitle = element("p", "observe-subtitle", "Agent 主循环遥测 · Token / 迭代 / 错误");
+    updatedLabel = element("span", "observe-updated");
+    subtitle.append(updatedLabel);
+    heading.append(titleLine, subtitle);
+    header.append(heading, buildHeaderActions());
+    page.append(header);
+
+    if (state.error) {
+      page.append(errorNotice(state.error));
+    }
+    if (state.overview === null) {
+      page.append(buildSkeleton());
+    } else {
+      page.append(buildOverview(openDrill));
+    }
+    surface.replaceChildren(page);
+    renderUpdatedTime();
+  };
+
+  const renderUpdatedTime = () => {
+    if (updatedLabel === null) return;
+    if (state.updatedAt === 0) {
+      updatedLabel.textContent = "正在读取…";
+      return;
+    }
+    updatedLabel.textContent = `更新于 ${ago(Date.now() - state.updatedAt)}`;
+  };
+
+  const loadMain = async () => {
+    mainRequest.abort();
+    mainRequest = new AbortController();
+    const request = mainRequest;
+    state.refreshing = true;
+    render();
+    try {
+      const range = encodeURIComponent(state.range);
+      const [overview, series, globalErrors] = await Promise.all([
+        json(ctx, `/api/dashboard/observe/overview?range=${range}`, { signal: request.signal }),
+        json(ctx, `/api/dashboard/observe/timeseries?range=${range}`, { signal: request.signal }),
+        json(ctx, `/api/dashboard/observe/global_errors/overview?range=${range}`, { signal: request.signal }),
+      ]);
+      if (state.disposed || request !== mainRequest || request.signal.aborted) return;
+      state.overview = overview;
+      state.points = Array.isArray(series.points) ? series.points : [];
+      state.globalErrors = globalErrors;
+      state.updatedAt = Date.now();
+      state.error = "";
+    } catch (reason) {
+      if (!request.signal.aborted && !state.disposed) {
+        state.error = `无法刷新监测数据：${errorMessage(reason)}`;
+      }
+    } finally {
+      if (!state.disposed && request === mainRequest) {
+        state.refreshing = false;
+        render();
+      }
+    }
+  };
+
+  function buildHeaderActions() {
+    const actions = element("div", "observe-actions");
+    const refresh = element("button", "observe-icon-button", "↻");
+    refresh.type = "button";
+    refresh.title = "刷新";
+    refresh.setAttribute("aria-label", "刷新监测数据");
+    refresh.disabled = state.refreshing;
+    refresh.addEventListener("click", () => void loadMain());
+    const ranges = element("div", "observe-ranges");
+    for (const [key, label] of RANGES) {
+      const button = element("button", "observe-range", label);
+      button.type = "button";
+      button.setAttribute("aria-pressed", String(state.range === key));
+      if (state.range === key) button.classList.add("is-selected");
+      button.addEventListener("click", () => {
+        if (state.range === key) return;
+        state.range = key;
+        state.overview = null;
+        state.points = [];
+        state.globalErrors = null;
+        state.updatedAt = 0;
+        void loadMain();
+      });
+      ranges.append(button);
+    }
+    actions.append(refresh, ranges);
+    return actions;
+  }
+
+  function buildOverview(onOpenDrill) {
+    const overview = state.overview;
+    const points = state.points;
+    const page = document.createDocumentFragment();
+    const globalTotal = number(state.globalErrors?.total, number(overview.errors));
+    const health = element(
+      "section",
+      `observe-health${globalTotal > 0 ? " observe-health--attention" : ""}`,
+    );
+    const healthText = element("div", "observe-health-text");
+    healthText.append(
+      element(
+        "strong",
+        "",
+        globalTotal > 0 ? `${globalTotal} 条错误需要查看` : "当前区间没有采集到错误",
+      ),
+      element(
+        "p",
+        "",
+        globalTotal > 0
+          ? `${number(state.globalErrors?.types)} 个错误类型，先查看爆发和新出现的类型。`
+          : "主循环遥测持续更新，缓存与迭代指标见下方。",
+      ),
+    );
+    health.append(healthText);
+    if (globalTotal > 0) {
+      const drill = element("button", "observe-drill-button", "查看错误分析");
+      drill.type = "button";
+      drill.addEventListener("click", onOpenDrill);
+      health.append(drill);
+    }
+    page.append(health);
+
+    const turns = points.map((point) => number(point.turns));
+    const errors = points.map((point) => number(point.errors));
+    const inputTokens = points.map((point) => number(point.input_tokens));
+    const passiveRate = points.map((point) => number(point.passive_cache_hit_rate) * 100);
+    const proactiveRate = points.map((point) => number(point.proactive_cache_hit_rate) * 100);
+    const iterations = points.map((point) => number(point.avg_iteration));
+    const metrics = element("div", "observe-metrics");
+    metrics.append(
+      metricTile("对话轮数", compact(number(overview.turns)), {
+        sub: overview.last_ts ? `最近 ${shortTimestamp(overview.last_ts)}` : "无记录",
+        delta: delta(turns),
+        values: turns,
+        tone: "accent",
+      }),
+      metricTile("被动 KV 命中率", percent(overview.passive_cache_hit_rate), {
+        sub: `主动 ${percent(overview.proactive_cache_hit_rate)}`,
+        values: passiveRate,
+        tone: "success",
+      }),
+      metricTile("平均迭代", overview.avg_iteration == null ? "—" : number(overview.avg_iteration).toFixed(1), {
+        sub: `峰 ${number(overview.max_iteration)} · 每轮 LLM 调用次数`,
+        values: iterations,
+        tone: "warning",
+      }),
+    );
+    page.append(metrics);
+
+    const charts = element("div", "observe-charts");
+    charts.append(
+      chartCard("输入 Token 趋势", points, inputTokens, compact, "accent"),
+      chartCard("平均迭代趋势", points, iterations, (value) => value.toFixed(1), "warning"),
+      chartCard("全局被动链路命中率趋势", points, passiveRate, (value) => `${value.toFixed(0)}%`, "success"),
+      chartCard("全局主动链路命中率趋势", points, proactiveRate, (value) => `${value.toFixed(0)}%`, "accent"),
+      chartCard("错误趋势", points, errors, String, "danger", "所选区间内没有错误"),
+    );
+    page.append(charts);
+    return page;
+  }
+
+  render();
+  void loadMain();
+  refreshTimer = window.setInterval(() => void loadMain(), 15_000);
+  clockTimer = window.setInterval(renderUpdatedTime, 1_000);
+  return () => {
+    state.disposed = true;
+    window.clearInterval(refreshTimer);
+    window.clearInterval(clockTimer);
+    mainRequest.abort();
+    closeDrill();
+    host.classList.remove("observe-web", "observe-web--drill-open");
+    host.replaceChildren();
+  };
+}
+
+function mountErrorDrill(ctx, range, overlay, requestClose, onStatusSaved) {
+  const state = {
+    overview: null,
+    sections: [],
+    selected: null,
+    detail: null,
+    facet: "type",
+    query: "",
+    tab: "trace",
+    variant: 0,
+    listError: "",
+    detailError: "",
+    statusError: "",
+    loadingList: false,
+    loadingDetail: false,
+    savingStatus: false,
+    disposed: false,
+  };
+  let listRequest = new AbortController();
+  let detailRequest = new AbortController();
+  let statusRequest = new AbortController();
+  let searchTimer = 0;
+  let focused = false;
+  const backdrop = element("div", "observe-dialog-backdrop");
+  const dialog = element("section", "observe-dialog");
+  dialog.setAttribute("role", "dialog");
+  dialog.setAttribute("aria-modal", "true");
+  dialog.setAttribute("aria-labelledby", "observe-error-dialog-title");
+  backdrop.append(dialog);
+  overlay.replaceChildren(backdrop);
+
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      requestClose();
+      return;
+    }
+    if (event.key === "Tab") {
+      const focusable = [...dialog.querySelectorAll("button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex='-1'])")];
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable.at(-1);
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  const onBackdropClick = (event) => {
+    if (event.target === backdrop) requestClose();
+  };
+  backdrop.addEventListener("keydown", onKeyDown);
+  backdrop.addEventListener("click", onBackdropClick);
+
+  const select = (fingerprint) => {
+    if (state.selected === fingerprint) return;
+    state.selected = fingerprint;
+    state.detail = null;
+    state.detailError = "";
+    state.tab = "trace";
+    state.variant = 0;
+    render();
+    void loadDetail();
+  };
+
+  const loadList = async () => {
+    listRequest.abort();
+    listRequest = new AbortController();
+    const request = listRequest;
+    state.loadingList = true;
+    state.listError = "";
+    render();
+    try {
+      const base = `/api/dashboard/observe/global_errors?range=${encodeURIComponent(range)}`;
+      const [overview, list] = await Promise.all([
+        json(ctx, `/api/dashboard/observe/global_errors/overview?range=${encodeURIComponent(range)}`, { signal: request.signal }),
+        json(ctx, `${base}&facet=${encodeURIComponent(state.facet)}&q=${encodeURIComponent(state.query)}`, { signal: request.signal }),
+      ]);
+      if (state.disposed || request !== listRequest || request.signal.aborted) return;
+      state.overview = overview;
+      state.sections = Array.isArray(list.sections) ? list.sections : [];
+      const items = state.sections.flatMap((section) => Array.isArray(section.items) ? section.items : []);
+      const selectedStillExists = items.some((item) => item.fingerprint === state.selected);
+      const next = selectedStillExists ? state.selected : items[0]?.fingerprint ?? null;
+      const selectionChanged = next !== state.selected;
+      state.selected = next;
+      if (selectionChanged) {
+        state.detail = null;
+        state.tab = "trace";
+        state.variant = 0;
+      }
+      if (next && (selectionChanged || state.detail === null)) void loadDetail();
+    } catch (reason) {
+      if (!request.signal.aborted && !state.disposed) {
+        state.listError = `无法读取错误列表：${errorMessage(reason)}`;
+      }
+    } finally {
+      if (!state.disposed && request === listRequest) {
+        state.loadingList = false;
+        render();
+      }
+    }
+  };
+
+  const loadDetail = async () => {
+    if (!state.selected) return;
+    detailRequest.abort();
+    detailRequest = new AbortController();
+    const request = detailRequest;
+    const fingerprint = state.selected;
+    state.loadingDetail = true;
+    state.detailError = "";
+    render();
+    try {
+      const detail = await json(
+        ctx,
+        `/api/dashboard/observe/global_errors/${encodeURIComponent(fingerprint)}?range=${encodeURIComponent(range)}`,
+        { signal: request.signal },
+      );
+      if (state.disposed || request !== detailRequest || request.signal.aborted || state.selected !== fingerprint) return;
+      state.detail = detail;
+      state.variant = 0;
+      state.tab = "trace";
+    } catch (reason) {
+      if (!request.signal.aborted && !state.disposed) {
+        state.detailError = `无法读取错误详情：${errorMessage(reason)}`;
+      }
+    } finally {
+      if (!state.disposed && request === detailRequest) {
+        state.loadingDetail = false;
+        render();
+      }
+    }
+  };
+
+  const setStatus = async (value) => {
+    if (!state.detail || state.savingStatus) return;
+    statusRequest.abort();
+    statusRequest = new AbortController();
+    const request = statusRequest;
+    const fingerprint = state.detail.fingerprint;
+    state.savingStatus = true;
+    state.statusError = "";
+    render();
+    try {
+      const response = await json(
+        ctx,
+        `/api/dashboard/observe/global_errors/${encodeURIComponent(fingerprint)}/status?value=${encodeURIComponent(value)}`,
+        { method: "POST", signal: request.signal },
+      );
+      if (response.ok === false) throw new Error("状态没有保存");
+      if (state.disposed || request !== statusRequest || request.signal.aborted) return;
+      if (state.detail?.fingerprint === fingerprint) state.detail.status = value;
+      void loadList();
+      void onStatusSaved();
+    } catch (reason) {
+      if (!request.signal.aborted && !state.disposed) {
+        state.statusError = `无法更新错误状态：${errorMessage(reason)}`;
+      }
+    } finally {
+      if (!state.disposed && request === statusRequest) {
+        state.savingStatus = false;
+        render();
+      }
+    }
+  };
+
+  const copyTraceback = async () => {
+    if (!state.detail?.traceback_text || !navigator.clipboard) return;
+    try {
+      await navigator.clipboard.writeText(state.detail.traceback_text);
+    } catch (reason) {
+      if (!state.disposed) {
+        state.statusError = `无法复制 Traceback：${errorMessage(reason)}`;
+        render();
+      }
+    }
+  };
+
+  function render() {
+    const focusWasInDialog = dialog.contains(document.activeElement);
+    const previousSearch = document.activeElement?.classList?.contains("observe-search")
+      ? document.activeElement
+      : null;
+    const selection = previousSearch
+      ? [previousSearch.selectionStart, previousSearch.selectionEnd]
+      : null;
+    const heading = element("header", "observe-dialog-header");
+    const headingText = element("div", "observe-dialog-heading");
+    const title = element("h2", "", `错误 · ${RANGES.find(([key]) => key === range)?.[1] ?? range}`);
+    title.id = "observe-error-dialog-title";
+    headingText.append(
+      element("strong", "observe-dialog-total", String(number(state.overview?.total))),
+      title,
+      element(
+        "p",
+        "",
+        `${number(state.overview?.types)} 个类型 · ${number(state.overview?.new_types)} 个新类型 · ${number(state.overview?.spiking_types)} 个正在爆发`,
+      ),
+    );
+    const close = element("button", "observe-icon-button", "×");
+    close.type = "button";
+    close.setAttribute("aria-label", "关闭错误分析");
+    close.addEventListener("click", requestClose);
+    heading.append(headingText, close);
+
+    const controls = element("div", "observe-drill-controls");
+    const facets = element("div", "observe-facets");
+    for (const [key, label] of [["type", "按类型"], ["source", "按来源"], ["channel", "按通道"]]) {
+      const facet = element("button", "observe-facet", label);
+      facet.type = "button";
+      facet.setAttribute("aria-pressed", String(state.facet === key));
+      if (state.facet === key) facet.classList.add("is-selected");
+      facet.addEventListener("click", () => {
+        if (state.facet === key) return;
+        state.facet = key;
+        state.detail = null;
+        void loadList();
+      });
+      facets.append(facet);
+    }
+    const search = element("input", "observe-search");
+    search.type = "search";
+    search.placeholder = "按消息 / 模块过滤…";
+    search.value = state.query;
+    search.setAttribute("aria-label", "搜索错误");
+    search.addEventListener("input", () => {
+      state.query = search.value;
+      state.detail = null;
+      window.clearTimeout(searchTimer);
+      searchTimer = window.setTimeout(() => void loadList(), 200);
+    });
+    controls.append(facets, search);
+
+    const body = element("div", "observe-drill-body");
+    body.append(buildErrorList(state, select), buildErrorDetail(state, setStatus, copyTraceback));
+    dialog.replaceChildren(heading, controls, body);
+    if (previousSearch) {
+      search.focus();
+      if (selection[0] !== null && selection[1] !== null) {
+        search.setSelectionRange(selection[0], selection[1]);
+      }
+    } else if (focusWasInDialog || !focused) {
+      focused = true;
+      close.focus();
+    }
+  }
+
+  render();
+  void loadList();
+  return () => {
+    state.disposed = true;
+    listRequest.abort();
+    detailRequest.abort();
+    statusRequest.abort();
+    window.clearTimeout(searchTimer);
+    backdrop.removeEventListener("keydown", onKeyDown);
+    backdrop.removeEventListener("click", onBackdropClick);
+    overlay.replaceChildren();
+  };
+}
+
+function buildErrorList(state, select) {
+  const list = element("aside", "observe-error-list");
+  if (state.listError) list.append(errorNotice(state.listError));
+  if (state.loadingList && state.sections.length === 0) list.append(element("p", "observe-muted", "正在读取错误列表…"));
+  for (const section of state.sections) {
+    const group = element("section", "observe-error-section");
+    if (section.label) {
+      const sectionTitle = element("div", "observe-error-section-title");
+      sectionTitle.append(element("strong", "", section.label), element("span", "", `${number(section.count)} 次`));
+      group.append(sectionTitle);
+    }
+    for (const item of Array.isArray(section.items) ? section.items : []) {
+      const row = element("button", "observe-error-row");
+      row.type = "button";
+      row.setAttribute("aria-pressed", String(item.fingerprint === state.selected));
+      if (item.fingerprint === state.selected) row.classList.add("is-selected");
+      const heading = element("div", "observe-error-row-heading");
+      heading.append(
+        element("strong", "", String(item.error_type || "未知错误")),
+        item.is_new ? element("span", "observe-tag observe-tag--new", "新") : document.createDocumentFragment(),
+        item.is_spiking ? element("span", "observe-tag observe-tag--danger", "爆发") : document.createDocumentFragment(),
+      );
+      row.append(
+        heading,
+        element("span", "observe-error-logger", String(item.logger_name || "")),
+        element("span", "observe-error-row-meta", `${number(item.count)} 次 · ${number(item.sessions)} session · ${shortTimestamp(item.last_ts)}`),
+      );
+      row.addEventListener("click", () => select(item.fingerprint));
+      group.append(row);
+    }
+    list.append(group);
+  }
+  if (!state.loadingList && state.sections.length === 0 && !state.listError) {
+    list.append(element("p", "observe-muted", "所选区间内没有错误。"));
+  }
+  return list;
+}
+
+function buildErrorDetail(state, setStatus, copyTraceback) {
+  const detail = element("section", "observe-error-detail");
+  if (state.detailError) {
+    detail.append(errorNotice(state.detailError));
+    return detail;
+  }
+  if (state.loadingDetail) {
+    detail.append(element("p", "observe-muted", "正在读取错误详情…"));
+    return detail;
+  }
+  if (!state.detail) {
+    detail.append(element("p", "observe-muted", "选择左侧一个错误查看现场。"));
+    return detail;
+  }
+  const item = state.detail;
+  const title = element("header", "observe-detail-heading");
+  title.append(
+    element("h3", "", String(item.error_type || "未知错误")),
+    element("p", "observe-detail-message", String(item.message || "")),
+  );
+  const tags = element("div", "observe-tags");
+  for (const text of [
+    item.logger_name,
+    `来源 · ${SOURCE_LABELS[item.source] || item.source || "未知"}`,
+    item.channel,
+    item.level,
+    STATUS_LABELS[item.status] || item.status || "活跃",
+  ]) {
+    if (text) tags.append(element("span", "observe-tag", String(text)));
+  }
+  title.append(tags);
+  detail.append(title, detailStats(item));
+
+  const tabs = element("div", "observe-detail-tabs");
+  for (const [key, label] of [["trend", "趋势"], ["trace", `Traceback${Array.isArray(item.variants) && item.variants.length > 1 ? ` · ${item.variants.length} 变体` : ""}`], ["occ", `现场 · ${Array.isArray(item.occurrences) ? item.occurrences.length : 0}`]]) {
+    const tab = element("button", "observe-tab", label);
+    tab.type = "button";
+    tab.setAttribute("aria-selected", String(state.tab === key));
+    if (state.tab === key) tab.classList.add("is-selected");
+    tab.addEventListener("click", () => {
+      state.tab = key;
+      buildErrorDetailInto(detail, state, setStatus, copyTraceback);
+    });
+    tabs.append(tab);
+  }
+  detail.append(tabs);
+  buildErrorDetailInto(detail, state, setStatus, copyTraceback);
+  return detail;
+}
+
+function buildErrorDetailInto(detail, state, setStatus, copyTraceback) {
+  const item = state.detail;
+  const content = element("div", "observe-detail-content");
+  if (state.tab === "trend") {
+    const trend = Array.isArray(item.trend) ? item.trend : [];
+    content.append(chartCard("错误趋势", trend, trend.map((point) => number(point.count)), String, "danger", "区间内无发作"));
+  } else if (state.tab === "trace") {
+    const variants = Array.isArray(item.variants) ? item.variants : [];
+    if (variants.length > 1) {
+      const choices = element("div", "observe-variants");
+      variants.forEach((variant, index) => {
+        const choice = element("button", "observe-variant", `${number(variant.count)} 次 · 变体 ${index + 1}`);
+        choice.type = "button";
+        if (state.variant === index) choice.classList.add("is-selected");
+        choice.addEventListener("click", () => {
+          state.variant = index;
+          buildErrorDetailInto(detail, state, setStatus, copyTraceback);
+        });
+        choices.append(choice);
+      });
+      content.append(choices);
+    }
+    const trace = variants[state.variant]?.traceback_text || item.traceback_text || "没有 Traceback。";
+    content.append(element("pre", "observe-traceback", String(trace)));
+  } else {
+    const occurrences = Array.isArray(item.occurrences) ? item.occurrences : [];
+    if (occurrences.length === 0) {
+      content.append(element("p", "observe-muted", "无可关联的 session 现场。"));
+    }
+    for (const occurrence of occurrences) {
+      const row = element("article", "observe-occurrence");
+      row.append(
+        element("span", "observe-occurrence-time", shortTimestamp(occurrence.ts)),
+        element("p", "", String(occurrence.user_preview || "（无用户消息）")),
+        element("code", "observe-session-key", `session ${String(occurrence.session_key || "")}`),
+      );
+      content.append(row);
+    }
+  }
+  const existing = detail.querySelector(".observe-detail-content");
+  if (existing) existing.replaceWith(content);
+  else detail.append(content);
+
+  let actions = detail.querySelector(".observe-detail-actions");
+  if (!actions) {
+    actions = element("footer", "observe-detail-actions");
+    detail.append(actions);
+  }
+  actions.replaceChildren();
+  const copy = element("button", "observe-secondary-button", "复制 Traceback");
+  copy.type = "button";
+  copy.addEventListener("click", () => void copyTraceback());
+  const spacer = element("span", "observe-actions-spacer");
+  const acknowledged = element("button", "observe-secondary-button", "标记已确认");
+  acknowledged.type = "button";
+  acknowledged.disabled = state.savingStatus;
+  acknowledged.addEventListener("click", () => void setStatus("acknowledged"));
+  const ignored = element("button", "observe-secondary-button observe-secondary-button--danger", "忽略此类型");
+  ignored.type = "button";
+  ignored.disabled = state.savingStatus;
+  ignored.addEventListener("click", () => void setStatus("ignored"));
+  actions.append(copy, spacer, acknowledged, ignored);
+  if (state.statusError) actions.append(errorNotice(state.statusError));
+}
+
+function detailStats(item) {
+  const stats = element("div", "observe-detail-stats");
+  for (const [label, value] of [
+    ["累计次数", number(item.count)],
+    ["独立 session", number(item.sessions)],
+    ["首次", shortTimestamp(item.first_ts)],
+    ["最近", shortTimestamp(item.last_ts)],
+  ]) {
+    const stat = element("div", "observe-detail-stat");
+    stat.append(element("span", "", label), element("strong", "", String(value)));
+    stats.append(stat);
+  }
+  return stats;
+}
+
+function buildSkeleton() {
+  const skeleton = element("div", "observe-skeleton");
+  for (let index = 0; index < 5; index += 1) skeleton.append(element("div", "observe-skeleton-block"));
+  return skeleton;
+}
+
+function metricTile(label, value, options) {
+  const tile = element("section", `observe-metric observe-metric--${options.tone}`);
+  tile.append(element("span", "observe-metric-label", label), element("strong", "observe-metric-value", value));
+  if (options.sub) tile.append(element("span", "observe-metric-sub", options.sub));
+  if (options.delta != null) tile.append(element("span", "observe-metric-delta", `${options.delta >= 0 ? "+" : ""}${options.delta.toFixed(0)}%`));
+  tile.append(sparkline(options.values));
+  return tile;
+}
+
+function chartCard(title, points, values, format, tone, empty = "暂无数据") {
+  const card = element("section", `observe-chart-card observe-chart-card--${tone}`);
+  card.append(element("h2", "observe-chart-title", title));
+  const chart = element("div", "observe-chart");
+  const finite = values.filter(Number.isFinite);
+  if (finite.length === 0 || finite.every((value) => value === 0)) {
+    chart.append(element("p", "observe-muted", empty));
+  } else {
+    const maximum = Math.max(...finite, 1);
+    chart.setAttribute("role", "img");
+    chart.setAttribute(
+      "aria-label",
+      `${title}：最新 ${format(number(finite.at(-1)))}，最高 ${format(maximum)}`,
+    );
+    values.forEach((value, index) => {
+      const bar = element("span", "observe-chart-bar");
+      bar.style.setProperty("--observe-chart-height", `${Math.max(5, (number(value) / maximum) * 100)}%`);
+      const label = points[index]?.bucket || "";
+      bar.title = `${bucketLabel(label)} · ${format(number(value))}`;
+      chart.append(bar);
+    });
+  }
+  card.append(chart);
+  return card;
+}
+
+function sparkline(values) {
+  const spark = element("span", "observe-sparkline");
+  spark.setAttribute("aria-hidden", "true");
+  const finite = values.filter(Number.isFinite);
+  const maximum = Math.max(...finite, 1);
+  for (const value of values.slice(-24)) {
+    const bar = element("i", "");
+    bar.style.setProperty("--observe-spark-height", `${Math.max(8, (number(value) / maximum) * 100)}%`);
+    spark.append(bar);
+  }
+  return spark;
+}
+
+function errorNotice(message) {
+  const notice = element("p", "observe-load-error", message);
+  notice.setAttribute("role", "alert");
+  return notice;
+}
+
+async function json(ctx, path, options = {}) {
+  const response = await ctx.http.request(path, options);
+  const body = await response.json();
+  if (!response.ok) throw new Error(body?.detail || body?.message || `HTTP ${response.status}`);
+  return body;
+}
+
+function element(name, className = "", text = null) {
+  const node = document.createElement(name);
+  if (className) node.className = className;
+  if (text !== null) node.textContent = text;
+  return node;
+}
+
+function number(value, fallback = 0) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function compact(value) {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+  return String(Math.round(value));
+}
+
+function percent(value) {
+  return typeof value === "number" ? `${(value * 100).toFixed(1)}%` : "—";
+}
+
+function delta(values) {
+  if (values.length < 2 || values.at(-2) === 0) return null;
+  return ((values.at(-1) - values.at(-2)) / values.at(-2)) * 100;
+}
+
+function bucketLabel(value) {
+  if (value.includes("T")) return `${value.slice(11, 13)}:00`;
+  const [, month, day] = value.split("-");
+  return month && day ? `${Number(month)}-${day}` : value;
+}
+
+function shortTimestamp(value) {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+  return `${date.getMonth() + 1}-${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+
+function ago(milliseconds) {
+  if (!Number.isFinite(milliseconds) || milliseconds < 3_000) return "刚刚";
+  const seconds = Math.floor(milliseconds / 1_000);
+  if (seconds < 60) return `${seconds}s 前`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m 前`;
+  return `${Math.floor(minutes / 60)}h 前`;
+}
+
+function errorMessage(reason) {
+  return reason instanceof Error ? reason.message : String(reason);
+}

From 5d5ab4dcf4d3b5c318ad39460350adbd2767bcad Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sun, 30 Aug 2026 08:35:19 +0800
Subject: [PATCH 2/6] ci: validate Web UI composition

---
 .github/workflows/plugin-api-v3.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/plugin-api-v3.yml b/.github/workflows/plugin-api-v3.yml
index 88e9d7f..03f3864 100644
--- a/.github/workflows/plugin-api-v3.yml
+++ b/.github/workflows/plugin-api-v3.yml
@@ -36,7 +36,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           repository: kachofugetsu09/akashic-agent
-          ref: c55a1eac942d489b8f41e81f6b1218d98ec1c6f1
+          ref: 14221ff778d660ab0e9c9249a8a8ff772861dbe9
           path: .akashic-core
       - uses: actions/setup-python@v5
         with:

From e229289b56ebac17f6cea981f2a93af62b1cf8be Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sun, 30 Aug 2026 08:41:50 +0800
Subject: [PATCH 3/6] ci: follow final Core head

---
 .github/workflows/plugin-api-v3.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/plugin-api-v3.yml b/.github/workflows/plugin-api-v3.yml
index 03f3864..2f86546 100644
--- a/.github/workflows/plugin-api-v3.yml
+++ b/.github/workflows/plugin-api-v3.yml
@@ -36,7 +36,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           repository: kachofugetsu09/akashic-agent
-          ref: 14221ff778d660ab0e9c9249a8a8ff772861dbe9
+          ref: a4e87422a2448c4b148b03777da349b51c77ed16
           path: .akashic-core
       - uses: actions/setup-python@v5
         with:

From d5949987ab04db4144e006b9fbafb38571d453c7 Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sun, 30 Aug 2026 08:47:29 +0800
Subject: [PATCH 4/6] ci: validate final Core release

---
 .github/workflows/plugin-api-v3.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/plugin-api-v3.yml b/.github/workflows/plugin-api-v3.yml
index 2f86546..ec83674 100644
--- a/.github/workflows/plugin-api-v3.yml
+++ b/.github/workflows/plugin-api-v3.yml
@@ -36,7 +36,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           repository: kachofugetsu09/akashic-agent
-          ref: a4e87422a2448c4b148b03777da349b51c77ed16
+          ref: f72b9e2ce2031133462e68aeaa0379fa883daeb2
           path: .akashic-core
       - uses: actions/setup-python@v5
         with:

From 921e2de0f0ea6bfa00677ef7ce33c2885bb5459d Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sun, 30 Aug 2026 09:00:07 +0800
Subject: [PATCH 5/6] ci: validate deployed Core release

---
 .github/workflows/plugin-api-v3.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/plugin-api-v3.yml b/.github/workflows/plugin-api-v3.yml
index ec83674..67e673e 100644
--- a/.github/workflows/plugin-api-v3.yml
+++ b/.github/workflows/plugin-api-v3.yml
@@ -36,7 +36,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           repository: kachofugetsu09/akashic-agent
-          ref: f72b9e2ce2031133462e68aeaa0379fa883daeb2
+          ref: 69a9616f6f48f19dc109a6b3eef8fc1000825829
           path: .akashic-core
       - uses: actions/setup-python@v5
         with:

From 54c8c3e520479245aa09086fd8227108296ce305 Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sun, 30 Aug 2026 09:55:14 +0800
Subject: [PATCH 6/6] set test plugin generation

---
 tests/test_plugin.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/test_plugin.py b/tests/test_plugin.py
index bb22b5f..9020ec3 100644
--- a/tests/test_plugin.py
+++ b/tests/test_plugin.py
@@ -109,6 +109,7 @@ async def _mount_observe(tmp_path: Path) -> tuple[CompositionRoot, Path]:
         inject=module.inject,
         runtime=PluginRuntime(
             plugin_id="observe",
+            generation_id="observe:test",
             plugin_dir=plugin_dir,
             data_dir=tmp_path / "plugin-data",
             workspace=workspace,