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/8] 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/8] 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/8] 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/8] 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/8] 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 ca15bdb786deb557499bebb582042065b6b5ac44 Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sun, 30 Aug 2026 19:17:44 +0800
Subject: [PATCH 6/8] fix(web-ui): compose observe panel through workbench

---
 akashic.plugin.toml       |    2 +-
 dashboard_panel.tsx       |  957 ++++++++++++++++++++++++
 plugin.py                 |    6 +-
 tests/test_plugin.py      |    3 +-
 tests/test_web_module.mjs |  216 ------
 web_module.css            |  505 +------------
 web_module.js             | 1489 ++++++++++++++++++-------------------
 7 files changed, 1678 insertions(+), 1500 deletions(-)
 create mode 100644 dashboard_panel.tsx
 delete mode 100644 tests/test_web_module.mjs

diff --git a/akashic.plugin.toml b/akashic.plugin.toml
index a5a23c0..84321ad 100644
--- a/akashic.plugin.toml
+++ b/akashic.plugin.toml
@@ -1,5 +1,5 @@
 schema_version = 1
 name = "observe"
-version = "1.4.0"
+version = "1.4.1"
 api_version = 3
 entrypoint = "plugin.py"
diff --git a/dashboard_panel.tsx b/dashboard_panel.tsx
new file mode 100644
index 0000000..36b02d6
--- /dev/null
+++ b/dashboard_panel.tsx
@@ -0,0 +1,957 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { Grid, MetricTile, TrendChart, Sparkline, Chip, type ChartTone } from "@akashic/dashboard-ui";
+import type { WebHostContextV1, WebUiDisposer } from "@akashic/web-ui-v1";
+import type { WorkbenchPanelEntry } from "@akashic/workbench-ui-v2";
+
+let dashboardRequest: WebHostContextV1["http"]["request"] | null = null;
+
+async function api<T = unknown>(path: string, init?: RequestInit): Promise<T> {
+  if (!dashboardRequest) throw new Error("Observe 工作台面板未激活");
+  const response = await dashboardRequest(path, init);
+  const body = await response.json() as T & { detail?: unknown; message?: unknown };
+  if (!response.ok) throw new Error(String(body.detail ?? body.message ?? `HTTP ${response.status}`));
+  return body;
+}
+
+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,
+  fallbackRef,
+  range,
+  onClose,
+}: {
+  portalRef: React.RefObject<HTMLButtonElement | null>;
+  fallbackRef: 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 [listError, setListError] = useState<string | null>(null);
+  const [detailError, setDetailError] = useState<string | null>(null);
+  const [savingStatus, setSavingStatus] = useState<boolean>(false);
+  const [tab, setTab] = useState<"trend" | "trace" | "occ">("trace");
+  const [variant, setVariant] = useState<number>(0);
+  const listReadRef = useRef<AbortController | null>(null);
+  const statusReadRef = useRef<AbortController | null>(null);
+
+  const loadList = useCallback(async () => {
+    listReadRef.current?.abort();
+    const controller = new AbortController();
+    listReadRef.current = controller;
+    setListError(null);
+    try {
+      const [ov, list] = await Promise.all([
+        api<GErrOverview>(`/api/dashboard/observe/global_errors/overview?range=${range}`, { signal: controller.signal }),
+        api<GErrListResp>(`/api/dashboard/observe/global_errors?range=${range}&facet=${facet}&q=${encodeURIComponent(q)}`, { signal: controller.signal }),
+      ]);
+      if (controller.signal.aborted) return;
+      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));
+    } catch (error) {
+      if (!controller.signal.aborted) {
+        setListError(error instanceof Error ? error.message : "错误列表读取失败");
+      }
+    } finally {
+      if (listReadRef.current === controller) listReadRef.current = null;
+    }
+  }, [range, facet, q]);
+
+  useEffect(() => {
+    void loadList();
+    return () => listReadRef.current?.abort();
+  }, [loadList]);
+
+  useEffect(() => {
+    if (!selFp) {
+      setDetail(null);
+      setDetailError(null);
+      return;
+    }
+    const controller = new AbortController();
+    setDetailError(null);
+    void api<GErrDetail>(
+      `/api/dashboard/observe/global_errors/${selFp}?range=${range}`,
+      { signal: controller.signal },
+    ).then((d) => {
+      if (!controller.signal.aborted) {
+        setDetail(d);
+        setVariant(0);
+        setTab("trace");
+      }
+    }, (error: unknown) => {
+      if (!controller.signal.aborted) {
+        setDetailError(error instanceof Error ? error.message : "错误详情读取失败");
+      }
+    });
+    return () => controller.abort();
+  }, [selFp, range]);
+
+  const close = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  useEffect(() => {
+    closeButtonRef.current?.focus();
+    return () => {
+      statusReadRef.current?.abort();
+      (portalRef.current ?? fallbackRef.current)?.focus();
+    };
+  }, [fallbackRef, 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 || statusReadRef.current) return;
+    const fingerprint = detail.fingerprint;
+    const controller = new AbortController();
+    statusReadRef.current = controller;
+    setSavingStatus(true);
+    setDetailError(null);
+    try {
+      await api(
+        `/api/dashboard/observe/global_errors/${fingerprint}/status?value=${status}`,
+        { method: "POST", signal: controller.signal },
+      );
+      if (controller.signal.aborted) return;
+      setDetail((d) => (d?.fingerprint === fingerprint ? { ...d, status } : d));
+    } catch (error) {
+      if (!controller.signal.aborted) {
+        setDetailError(error instanceof Error ? error.message : "错误状态更新失败");
+      }
+    } finally {
+      if (statusReadRef.current === controller) {
+        statusReadRef.current = null;
+        if (!controller.signal.aborted) setSavingStatus(false);
+      }
+    }
+  };
+
+  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">
+            {listError && <div className="p-4 text-[12px] text-danger" role="alert">{listError}</div>}
+            {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>
+            ))}
+            {!listError && sections.length === 0 && <div className="p-6 text-[12.5px] text-muted">所选区间内没有错误。</div>}
+          </div>
+
+          {detailError ? (
+            <div className="grid place-items-center p-6 text-[13px] text-danger" role="alert">{detailError}</div>
+          ) : detail ? (
+            <ErrorDetail
+              detail={detail}
+              tab={tab}
+              setTab={setTab}
+              variant={variant}
+              setVariant={setVariant}
+              savingStatus={savingStatus}
+              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,
+  savingStatus,
+  onStatus,
+  onGoto,
+}: {
+  detail: GErrDetail;
+  tab: "trend" | "trace" | "occ";
+  setTab: (t: "trend" | "trace" | "occ") => void;
+  variant: number;
+  setVariant: (n: number) => void;
+  savingStatus: boolean;
+  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" disabled={savingStatus} 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 disabled:opacity-40">
+          标记已确认
+        </button>
+        <button type="button" disabled={savingStatus} 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 disabled:opacity-40">
+          忽略此类型
+        </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 [error, setError] = useState<string | null>(null);
+  const portalRef = useRef<HTMLButtonElement>(null);
+  const refreshRef = useRef<HTMLButtonElement>(null);
+  const overviewRef = useRef<HTMLDivElement>(null);
+  const mainReadRef = useRef<AbortController | null>(null);
+
+  const load = useCallback(async () => {
+    mainReadRef.current?.abort();
+    const controller = new AbortController();
+    mainReadRef.current = controller;
+    setRefreshing(true);
+    setError(null);
+    try {
+      const [ov, series, ge] = await Promise.all([
+        api<Overview>(`/api/dashboard/observe/overview?range=${range}`, { signal: controller.signal }),
+        api<{ points: SeriesPoint[] }>(`/api/dashboard/observe/timeseries?range=${range}`, { signal: controller.signal }),
+        api<GErrOverview>(`/api/dashboard/observe/global_errors/overview?range=${range}`, { signal: controller.signal }),
+      ]);
+      if (controller.signal.aborted) return;
+      setOverview(ov);
+      setPoints(series.points ?? []);
+      setGErr(ge);
+      setUpdatedAt(Date.now());
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        setError(reason instanceof Error ? reason.message : "监测数据读取失败");
+      }
+    } finally {
+      if (mainReadRef.current === controller) {
+        mainReadRef.current = null;
+        if (!controller.signal.aborted) setRefreshing(false);
+      }
+    }
+  }, [range]);
+
+  // 首次 + range 变化加载；并以 15s 心跳自动刷新，制造"活的"实时感。
+  useEffect(() => {
+    void load();
+    const id = window.setInterval(() => void load(), 15000);
+    return () => {
+      window.clearInterval(id);
+      mainReadRef.current?.abort();
+    };
+  }, [load]);
+
+  useEffect(() => {
+    if (!refreshing || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const animation = refreshRef.current?.animate(
+      [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+      { duration: 1000, iterations: Infinity },
+    );
+    return () => animation?.cancel();
+  }, [refreshing]);
+
+  // 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 error
+      ? <div className="grid min-h-full place-items-center p-6 text-danger" role="alert">{error}</div>
+      : <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
+              ref={refreshRef}
+              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"
+              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>
+
+        {error && <div className="border border-danger/40 bg-danger/10 px-4 py-3 text-[12px] text-danger" role="alert">{error}</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} fallbackRef={refreshRef} range={range} onClose={() => setDrillOpen(false)} />}
+    </>
+  );
+}
+
+const panel = {
+  id: "observe",
+  label: "运行监测",
+  viewLabel: "运行监测",
+  order: 60,
+  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({ signal }: { signal: AbortSignal }): Promise<number | null> {
+    try {
+      const ov = await api<Overview>("/api/dashboard/observe/overview?range=all", { signal });
+      return ov.turns || 0;
+    } catch (error) {
+      if (signal.aborted) throw error;
+      return null;
+    }
+  },
+
+  async fetchPage({ page, pageSize, signal }: { page: number; pageSize: number; signal: AbortSignal }) {
+    const data = await api<{ items: Record<string, unknown>[]; total: number }>(
+      `/api/dashboard/observe/errors?range=all&page=${page}&page_size=${pageSize}`,
+      { signal },
+    );
+    return { items: data.items || [], total: data.total || 0 };
+  },
+
+  Main: ObserveMain,
+} satisfies WorkbenchPanelEntry;
+
+export function activate(ctx: WebHostContextV1): WebUiDisposer {
+  dashboardRequest = ctx.http.request;
+  const release = ctx.ui.inject("workbench.panels.v2", (mount) => mount.register(panel));
+  return () => {
+    release();
+    dashboardRequest = null;
+  };
+}
diff --git a/plugin.py b/plugin.py
index 1f97bd2..a07af41 100644
--- a/plugin.py
+++ b/plugin.py
@@ -32,15 +32,15 @@
 
 api_version = 3
 name = "observe"
-version = "1.4.0"
+version = "1.4.1"
 inject = (UI_SLOTS,)
 workspace_roots = ("observe",)
 dashboard_module = "dashboard.py"
 web_module = "web_module.js"
-web_requires = ("workbench.panels.v1",)
+web_requires = ("workbench.panels.v2",)
 web_provides = ()
 web_contract_digests = {
-    "workbench.panels.v1": "724b282c22c4b3f3a36967ab664c4dfd8bce4257665f99459000306938caf527",
+    "workbench.panels.v2": "17a005a381b362ae25a0499dbf95bf7a2c3ff0bb4e9b415e7357db458de6b5db",
 }
 
 
diff --git a/tests/test_plugin.py b/tests/test_plugin.py
index bb22b5f..d3f5bce 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=root.generation_id,
             plugin_dir=plugin_dir,
             data_dir=tmp_path / "plugin-data",
             workspace=workspace,
@@ -587,7 +588,7 @@ def test_static_manifest_and_module_exports_match() -> None:
     manifest = load_static_plugin_manifest(plugin_dir)
     composable = ComposablePlugin.from_module(module)
     assert manifest.name == composable.name == "observe"
-    assert manifest.version == composable.version == "1.4.0"
+    assert manifest.version == composable.version == "1.4.1"
     assert manifest.api_version == composable.api_version == 3
     assert manifest.entrypoint == "plugin.py"
     assert composable.dashboard_module == "dashboard.py"
diff --git a/tests/test_web_module.mjs b/tests/test_web_module.mjs
deleted file mode 100644
index f832147..0000000
--- a/tests/test_web_module.mjs
+++ /dev/null
@@ -1,216 +0,0 @@
-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
index 5745d03..d47f38f 100644
--- a/web_module.css
+++ b/web_module.css
@@ -1,504 +1 @@
-.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; }
-}
+.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.z-30{z-index:30}.z-40{z-index:40}.m-0{margin:0}.-mb-px{margin-bottom:-1px}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-3{margin-top:.75rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-10{height:2.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.h-\[132px\]{height:132px}.h-\[218px\]{height:218px}.h-\[22px\]{height:22px}.max-h-\[280px\]{max-height:280px}.min-h-0{min-height:0}.min-h-10{min-height:2.5rem}.min-h-11{min-height:2.75rem}.min-h-16{min-height:4rem}.min-h-full{min-height:100%}.w-10{width:2.5rem}.w-2{width:.5rem}.w-48{width:12rem}.w-56{width:14rem}.w-64{width:16rem}.w-\[280px\]{width:280px}.w-\[62px\]{width:62px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-\[340px_1fr\]{grid-template-columns:340px 1fr}.grid-cols-\[9px_1fr_auto\]{grid-template-columns:9px 1fr auto}.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-px{gap:1px}.overflow-auto{overflow:auto}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.rounded,.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:9999px}.rounded-md{border-radius:6px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-accent{--tw-border-opacity:1;border-color:rgb(var(--ak-color-action-primary-rgb)/var(--tw-border-opacity,1))}.border-accent-deep{--tw-border-opacity:1;border-color:rgb(var(--ak-color-action-hover-rgb)/var(--tw-border-opacity,1))}.border-border{border-color:var(--ak-color-border-default)}.border-border-strong{border-color:var(--ak-color-border-strong)}.border-danger\/40{border-color:rgb(var(--ak-color-status-error-rgb)/.4)}.border-success\/35{border-color:rgb(var(--ak-color-status-success-rgb)/.35)}.border-transparent{border-color:transparent}.bg-accent{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-action-primary-rgb)/var(--tw-bg-opacity,1))}.bg-accent-soft{background-color:var(--ak-color-action-soft)}.bg-bg{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-bg-canvas-rgb)/var(--tw-bg-opacity,1))}.bg-black\/55{background-color:rgba(0,0,0,.55)}.bg-border{background-color:var(--ak-color-border-default)}.bg-danger{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-status-error-rgb)/var(--tw-bg-opacity,1))}.bg-danger\/10{background-color:rgb(var(--ak-color-status-error-rgb)/.1)}.bg-subtle{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-text-muted-rgb)/var(--tw-bg-opacity,1))}.bg-success{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-status-success-rgb)/var(--tw-bg-opacity,1))}.bg-success\/10{background-color:rgb(var(--ak-color-status-success-rgb)/.1)}.bg-surface{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-bg-surface-rgb)/var(--tw-bg-opacity,1))}.bg-surface-2{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-bg-surface-low-rgb)/var(--tw-bg-opacity,1))}.bg-surface-3{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-bg-surface-high-rgb)/var(--tw-bg-opacity,1))}.bg-warning{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-status-warning-rgb)/var(--tw-bg-opacity,1))}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.font-mono{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[18px\]{font-size:18px}.text-\[19px\]{font-size:19px}.text-\[26px\]{font-size:26px}.text-\[9px\]{font-size:9px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-relaxed{line-height:1.625}.text-accent{--tw-text-opacity:1;color:rgb(var(--ak-color-action-primary-rgb)/var(--tw-text-opacity,1))}.text-accent-ink{--tw-text-opacity:1;color:rgb(var(--ak-color-on-action-primary-rgb)/var(--tw-text-opacity,1))}.text-danger{color:rgb(var(--ak-color-status-error-rgb)/var(--tw-text-opacity,1))}.text-danger,.text-fg{--tw-text-opacity:1}.text-fg{color:rgb(var(--ak-color-text-primary-rgb)/var(--tw-text-opacity,1))}.text-muted{--tw-text-opacity:1;color:rgb(var(--ak-color-text-secondary-rgb)/var(--tw-text-opacity,1))}.text-subtle{--tw-text-opacity:1;color:rgb(var(--ak-color-text-muted-rgb)/var(--tw-text-opacity,1))}.text-success{--tw-text-opacity:1;color:rgb(var(--ak-color-status-success-rgb)/var(--tw-text-opacity,1))}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-opacity{transition-duration:.15s}.hover\:border-border-strong:hover{border-color:var(--ak-color-border-strong)}.hover\:border-danger\/40:hover{border-color:rgb(var(--ak-color-status-error-rgb)/.4)}.hover\:bg-danger\/10:hover{background-color:rgb(var(--ak-color-status-error-rgb)/.1)}.hover\:bg-surface-2:hover{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-bg-surface-low-rgb)/var(--tw-bg-opacity,1))}.hover\:bg-surface-3:hover{--tw-bg-opacity:1;background-color:rgb(var(--ak-color-bg-surface-high-rgb)/var(--tw-bg-opacity,1))}.hover\:text-danger:hover{--tw-text-opacity:1;color:rgb(var(--ak-color-status-error-rgb)/var(--tw-text-opacity,1))}.hover\:text-fg:hover{--tw-text-opacity:1;color:rgb(var(--ak-color-text-primary-rgb)/var(--tw-text-opacity,1))}.focus\:border-accent-deep:focus{--tw-border-opacity:1;border-color:rgb(var(--ak-color-action-hover-rgb)/var(--tw-border-opacity,1))}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-accent:focus-visible{outline-color:rgb(var(--ak-color-action-primary-rgb)/1)}.disabled\:opacity-40:disabled{opacity:.4}
\ No newline at end of file
diff --git a/web_module.js b/web_module.js
index 6d6c4a6..32f838b 100644
--- a/web_module.js
+++ b/web_module.js
@@ -1,812 +1,751 @@
-const RANGES = [
-  ["24h", "24 小时"],
-  ["7d", "7 天"],
-  ["30d", "30 天"],
-  ["all", "全部"],
+// dashboard_panel.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Grid, MetricTile, TrendChart, Sparkline, Chip } from "@akashic/dashboard-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var dashboardRequest = null;
+async function api(path, init) {
+  if (!dashboardRequest) throw new Error("Observe \u5DE5\u4F5C\u53F0\u9762\u677F\u672A\u6FC0\u6D3B");
+  const response = await dashboardRequest(path, init);
+  const body = await response.json();
+  if (!response.ok) throw new Error(String(body.detail ?? body.message ?? `HTTP ${response.status}`));
+  return body;
+}
+var RANGES = [
+  { key: "24h", label: "24 \u5C0F\u65F6" },
+  { key: "7d", label: "7 \u5929" },
+  { key: "30d", label: "30 \u5929" },
+  { key: "all", label: "\u5168\u90E8" }
 ];
-
-const STATUS_LABELS = {
-  active: "活跃",
-  acknowledged: "已确认",
-  ignored: "已忽略",
+var SOURCE_LABEL = {
+  log: "\u4E3B\u52A8\u65E5\u5FD7",
+  uncaught: "\u672A\u6355\u83B7\u5F02\u5E38",
+  asyncio: "asyncio \u4EFB\u52A1",
+  thread: "\u5B50\u7EBF\u7A0B"
 };
-
-const SOURCE_LABELS = {
-  log: "主动日志",
-  uncaught: "未捕获异常",
-  asyncio: "asyncio 任务",
-  thread: "子线程",
+var STATUS_META = {
+  active: { label: "\u6D3B\u8DC3", tone: "warning" },
+  acknowledged: { label: "\u5DF2\u786E\u8BA4", tone: "muted" },
+  ignored: { label: "\u5DF2\u5FFD\u7565", tone: "success" }
 };
-
-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);
-    },
-  }));
+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 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;
+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 })
+      ]
     }
-    updatedLabel.textContent = `更新于 ${ago(Date.now() - state.updatedAt)}`;
-  };
-
-  const loadMain = async () => {
-    mainRequest.abort();
-    mainRequest = new AbortController();
-    const request = mainRequest;
-    state.refreshing = true;
-    render();
+  );
+}
+function ErrorDrill({
+  portalRef,
+  fallbackRef,
+  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 [listError, setListError] = useState(null);
+  const [detailError, setDetailError] = useState(null);
+  const [savingStatus, setSavingStatus] = useState(false);
+  const [tab, setTab] = useState("trace");
+  const [variant, setVariant] = useState(0);
+  const listReadRef = useRef(null);
+  const statusReadRef = useRef(null);
+  const loadList = useCallback(async () => {
+    listReadRef.current?.abort();
+    const controller = new AbortController();
+    listReadRef.current = controller;
+    setListError(null);
     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 }),
+      const [ov, list] = await Promise.all([
+        api(`/api/dashboard/observe/global_errors/overview?range=${range}`, { signal: controller.signal }),
+        api(`/api/dashboard/observe/global_errors?range=${range}&facet=${facet}&q=${encodeURIComponent(q)}`, { signal: controller.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)}`;
+      if (controller.signal.aborted) return;
+      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);
+    } catch (error) {
+      if (!controller.signal.aborted) {
+        setListError(error instanceof Error ? error.message : "\u9519\u8BEF\u5217\u8868\u8BFB\u53D6\u5931\u8D25");
       }
     } finally {
-      if (!state.disposed && request === mainRequest) {
-        state.refreshing = false;
-        render();
-      }
+      if (listReadRef.current === controller) listReadRef.current = null;
     }
-  };
-
-  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();
+  }, [range, facet, q]);
+  useEffect(() => {
+    void loadList();
+    return () => listReadRef.current?.abort();
+  }, [loadList]);
+  useEffect(() => {
+    if (!selFp) {
+      setDetail(null);
+      setDetailError(null);
       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 controller = new AbortController();
+    setDetailError(null);
+    void api(
+      `/api/dashboard/observe/global_errors/${selFp}?range=${range}`,
+      { signal: controller.signal }
+    ).then((d) => {
+      if (!controller.signal.aborted) {
+        setDetail(d);
+        setVariant(0);
+        setTab("trace");
       }
-    }
-  };
-  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)}`;
+    }, (error) => {
+      if (!controller.signal.aborted) {
+        setDetailError(error instanceof Error ? error.message : "\u9519\u8BEF\u8BE6\u60C5\u8BFB\u53D6\u5931\u8D25");
       }
-    } 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 },
+    });
+    return () => controller.abort();
+  }, [selFp, range]);
+  const close = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  useEffect(() => {
+    closeButtonRef.current?.focus();
+    return () => {
+      statusReadRef.current?.abort();
+      (portalRef.current ?? fallbackRef.current)?.focus();
+    };
+  }, [fallbackRef, 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 (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();
+      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();
       }
-    }
-  };
-
-  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();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [close]);
+  const setStatus = async (status) => {
+    if (!detail || statusReadRef.current) return;
+    const fingerprint = detail.fingerprint;
+    const controller = new AbortController();
+    statusReadRef.current = controller;
+    setSavingStatus(true);
+    setDetailError(null);
     try {
-      const response = await json(
-        ctx,
-        `/api/dashboard/observe/global_errors/${encodeURIComponent(fingerprint)}/status?value=${encodeURIComponent(value)}`,
-        { method: "POST", signal: request.signal },
+      await api(
+        `/api/dashboard/observe/global_errors/${fingerprint}/status?value=${status}`,
+        { method: "POST", signal: controller.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)}`;
+      if (controller.signal.aborted) return;
+      setDetail((d) => d?.fingerprint === fingerprint ? { ...d, status } : d);
+    } catch (error) {
+      if (!controller.signal.aborted) {
+        setDetailError(error instanceof Error ? error.message : "\u9519\u8BEF\u72B6\u6001\u66F4\u65B0\u5931\u8D25");
       }
     } finally {
-      if (!state.disposed && request === statusRequest) {
-        state.savingStatus = false;
-        render();
+      if (statusReadRef.current === controller) {
+        statusReadRef.current = null;
+        if (!controller.signal.aborted) setSavingStatus(false);
       }
     }
   };
-
-  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();
-      }
-    }
+  const gotoSession = (key) => {
+    window.dispatchEvent(new CustomEvent("akashic:goto-session", { detail: key }));
+    close();
   };
-
-  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]);
+  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: [
+              listError && /* @__PURE__ */ jsx("div", { className: "p-4 text-[12px] text-danger", role: "alert", children: listError }),
+              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)),
+              !listError && 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" })
+            ] }),
+            detailError ? /* @__PURE__ */ jsx("div", { className: "grid place-items-center p-6 text-[13px] text-danger", role: "alert", children: detailError }) : detail ? /* @__PURE__ */ jsx(
+              ErrorDetail,
+              {
+                detail,
+                tab,
+                setTab,
+                variant,
+                setVariant,
+                savingStatus,
+                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" })
+          ] })
+        ]
       }
-    } 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);
+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) })
+        ] })
+      ]
     }
-    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 ErrorDetail({
+  detail,
+  tab,
+  setTab,
+  variant,
+  setVariant,
+  savingStatus,
+  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", disabled: savingStatus, 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 disabled:opacity-40", children: "\u6807\u8BB0\u5DF2\u786E\u8BA4" }),
+      /* @__PURE__ */ jsx("button", { type: "button", disabled: savingStatus, 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 disabled:opacity-40", children: "\u5FFD\u7565\u6B64\u7C7B\u578B" })
+    ] })
+  ] });
 }
-
-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 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 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 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 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 SkelBlock({ className }) {
+  return /* @__PURE__ */ jsx("div", { className: `relative overflow-hidden rounded border border-border bg-surface-2 ${className}` });
 }
-
-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 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 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);
+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 [error, setError] = useState(null);
+  const portalRef = useRef(null);
+  const refreshRef = useRef(null);
+  const overviewRef = useRef(null);
+  const mainReadRef = useRef(null);
+  const load = useCallback(async () => {
+    mainReadRef.current?.abort();
+    const controller = new AbortController();
+    mainReadRef.current = controller;
+    setRefreshing(true);
+    setError(null);
+    try {
+      const [ov, series, ge] = await Promise.all([
+        api(`/api/dashboard/observe/overview?range=${range}`, { signal: controller.signal }),
+        api(`/api/dashboard/observe/timeseries?range=${range}`, { signal: controller.signal }),
+        api(`/api/dashboard/observe/global_errors/overview?range=${range}`, { signal: controller.signal })
+      ]);
+      if (controller.signal.aborted) return;
+      setOverview(ov);
+      setPoints(series.points ?? []);
+      setGErr(ge);
+      setUpdatedAt(Date.now());
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        setError(reason instanceof Error ? reason.message : "\u76D1\u6D4B\u6570\u636E\u8BFB\u53D6\u5931\u8D25");
+      }
+    } finally {
+      if (mainReadRef.current === controller) {
+        mainReadRef.current = null;
+        if (!controller.signal.aborted) setRefreshing(false);
+      }
+    }
+  }, [range]);
+  useEffect(() => {
+    void load();
+    const id = window.setInterval(() => void load(), 15e3);
+    return () => {
+      window.clearInterval(id);
+      mainReadRef.current?.abort();
+    };
+  }, [load]);
+  useEffect(() => {
+    if (!refreshing || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const animation = refreshRef.current?.animate(
+      [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+      { duration: 1e3, iterations: Infinity }
+    );
+    return () => animation?.cancel();
+  }, [refreshing]);
+  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 error ? /* @__PURE__ */ jsx("div", { className: "grid min-h-full place-items-center p-6 text-danger", role: "alert", children: error }) : /* @__PURE__ */ jsx(ObserveSkeleton, {});
   }
-  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 前`;
+  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",
+                {
+                  ref: refreshRef,
+                  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",
+                  "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
+              )) })
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsx("div", { className: "border border-danger/40 bg-danger/10 px-4 py-3 text-[12px] text-danger", role: "alert", children: error }),
+          /* @__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, fallbackRef: refreshRef, range, onClose: () => setDrillOpen(false) })
+  ] });
 }
-
-function errorMessage(reason) {
-  return reason instanceof Error ? reason.message : String(reason);
+var panel = {
+  id: "observe",
+  label: "\u8FD0\u884C\u76D1\u6D4B",
+  viewLabel: "\u8FD0\u884C\u76D1\u6D4B",
+  order: 60,
+  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({ signal }) {
+    try {
+      const ov = await api("/api/dashboard/observe/overview?range=all", { signal });
+      return ov.turns || 0;
+    } catch (error) {
+      if (signal.aborted) throw error;
+      return null;
+    }
+  },
+  async fetchPage({ page, pageSize, signal }) {
+    const data = await api(
+      `/api/dashboard/observe/errors?range=all&page=${page}&page_size=${pageSize}`,
+      { signal }
+    );
+    return { items: data.items || [], total: data.total || 0 };
+  },
+  Main: ObserveMain
+};
+function activate(ctx) {
+  dashboardRequest = ctx.http.request;
+  const release = ctx.ui.inject("workbench.panels.v2", (mount) => mount.register(panel));
+  return () => {
+    release();
+    dashboardRequest = null;
+  };
 }
+export {
+  activate
+};

From ff01c20bc09c6d6b681067168a465ce66c86f817 Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sun, 30 Aug 2026 19:50:32 +0800
Subject: [PATCH 7/8] ci: pin Web UI Host SDK Core

---
 .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 67e673e..b519bdd 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: 69a9616f6f48f19dc109a6b3eef8fc1000825829
+          ref: dab4137c19fd1c5ef01ab69bacbc918d214f85c9
           path: .akashic-core
       - uses: actions/setup-python@v5
         with:

From 1fd809529f6c2ff8ad84a7bdd4c6e04bd7de163e Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sun, 30 Aug 2026 22:21:57 +0800
Subject: [PATCH 8/8] refactor(web-ui): adopt workbench mount lifecycle

---
 .github/workflows/plugin-api-v3.yml |   2 +-
 dashboard_panel.tsx                 |  41 +-
 plugin.py                           |   2 +-
 web_module.js                       | 752 +---------------------------
 4 files changed, 37 insertions(+), 760 deletions(-)

diff --git a/.github/workflows/plugin-api-v3.yml b/.github/workflows/plugin-api-v3.yml
index b519bdd..10e119e 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: dab4137c19fd1c5ef01ab69bacbc918d214f85c9
+          ref: d5e5177092d74de03588d8675f3504db36b7bacb
           path: .akashic-core
       - uses: actions/setup-python@v5
         with:
diff --git a/dashboard_panel.tsx b/dashboard_panel.tsx
index 36b02d6..78cfb91 100644
--- a/dashboard_panel.tsx
+++ b/dashboard_panel.tsx
@@ -6,9 +6,14 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
-import { Grid, MetricTile, TrendChart, Sparkline, Chip, type ChartTone } from "@akashic/dashboard-ui";
+import { createRoot } from "react-dom/client";
 import type { WebHostContextV1, WebUiDisposer } from "@akashic/web-ui-v1";
-import type { WorkbenchPanelEntry } from "@akashic/workbench-ui-v2";
+import type {
+  ChartTone,
+  WorkbenchDispatch,
+  WorkbenchPanelEntry,
+  WorkbenchUi,
+} from "@akashic/workbench-ui-v2";
 
 let dashboardRequest: WebHostContextV1["http"]["request"] | null = null;
 
@@ -226,11 +231,13 @@ function ErrorDrill({
   fallbackRef,
   range,
   onClose,
+  ui,
 }: {
   portalRef: React.RefObject<HTMLButtonElement | null>;
   fallbackRef: React.RefObject<HTMLButtonElement | null>;
   range: string;
   onClose: () => void;
+  ui: WorkbenchUi;
 }): ReactElement {
   const drillRef = useRef<HTMLDivElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
@@ -450,7 +457,7 @@ function ErrorDrill({
                   </div>
                 )}
                 {section.items.map((g) => (
-                  <ErrorRow key={g.fingerprint} g={g} active={g.fingerprint === selFp} onClick={() => setSelFp(g.fingerprint)} />
+                  <ErrorRow key={g.fingerprint} g={g} active={g.fingerprint === selFp} onClick={() => setSelFp(g.fingerprint)} ui={ui} />
                 ))}
               </div>
             ))}
@@ -469,6 +476,7 @@ function ErrorDrill({
               savingStatus={savingStatus}
               onStatus={setStatus}
               onGoto={gotoSession}
+              ui={ui}
             />
           ) : (
             <div className="grid place-items-center text-[13px] text-muted">选择左侧一个错误查看现场</div>
@@ -479,9 +487,20 @@ function ErrorDrill({
   );
 }
 
-function ErrorRow({ g, active, onClick }: { g: GErrGroup; active: boolean; onClick: () => void }): ReactElement {
+function ErrorRow({
+  g,
+  active,
+  onClick,
+  ui,
+}: {
+  g: GErrGroup;
+  active: boolean;
+  onClick: () => void;
+  ui: WorkbenchUi;
+}): ReactElement {
   const tone = _severity(g.count, g.is_spiking);
   const spark = g.spark ?? [];
+  const Sparkline = ui.Sparkline;
   return (
     <button
       type="button"
@@ -520,6 +539,7 @@ function ErrorDetail({
   savingStatus,
   onStatus,
   onGoto,
+  ui,
 }: {
   detail: GErrDetail;
   tab: "trend" | "trace" | "occ";
@@ -529,10 +549,12 @@ function ErrorDetail({
   savingStatus: boolean;
   onStatus: (s: string) => void;
   onGoto: (key: string) => void;
+  ui: WorkbenchUi;
 }): ReactElement {
   const status = STATUS_META[detail.status] ?? STATUS_META.active;
   const tone = _severity(detail.count, false);
   const activeVariant = detail.variants[variant] ?? detail.variants[0];
+  const { Chip, TrendChart } = ui;
   return (
     <div className="flex min-h-0 flex-col">
       {/* hero */}
@@ -699,7 +721,8 @@ function ObserveSkeleton(): ReactElement {
 // ── 监测主面板 ────────────────────────────────────────────────────────────────
 
 // Grafana-style monitoring overview over observe.db agent-loop telemetry.
-function ObserveMain(_props: { dispatch: PluginDispatch }): ReactElement {
+function ObserveMain({ dispatch }: { dispatch: WorkbenchDispatch }): ReactElement {
+  const { Grid, MetricTile, TrendChart } = dispatch.ui;
   const [range, setRange] = useState<string>("24h");
   const [overview, setOverview] = useState<Overview | null>(null);
   const [points, setPoints] = useState<SeriesPoint[]>([]);
@@ -902,7 +925,7 @@ function ObserveMain(_props: { dispatch: PluginDispatch }): ReactElement {
         </details>
       </div>
 
-      {drillOpen && <ErrorDrill portalRef={portalRef} fallbackRef={refreshRef} range={range} onClose={() => setDrillOpen(false)} />}
+      {drillOpen && <ErrorDrill portalRef={portalRef} fallbackRef={refreshRef} range={range} onClose={() => setDrillOpen(false)} ui={dispatch.ui} />}
     </>
   );
 }
@@ -944,7 +967,11 @@ const panel = {
     return { items: data.items || [], total: data.total || 0 };
   },
 
-  Main: ObserveMain,
+  renderMain(container: HTMLElement, dispatch: WorkbenchDispatch): WebUiDisposer {
+    const root = createRoot(container);
+    root.render(<ObserveMain dispatch={dispatch} />);
+    return () => root.unmount();
+  },
 } satisfies WorkbenchPanelEntry;
 
 export function activate(ctx: WebHostContextV1): WebUiDisposer {
diff --git a/plugin.py b/plugin.py
index a07af41..402ecd3 100644
--- a/plugin.py
+++ b/plugin.py
@@ -40,7 +40,7 @@
 web_requires = ("workbench.panels.v2",)
 web_provides = ()
 web_contract_digests = {
-    "workbench.panels.v2": "17a005a381b362ae25a0499dbf95bf7a2c3ff0bb4e9b415e7357db458de6b5db",
+    "workbench.panels.v2": "fb6417c9bf532c1fdb344767d06065d5d3293da85deb64eff1e8088889a33bcb",
 }
 
 
diff --git a/web_module.js b/web_module.js
index 32f838b..fef6bba 100644
--- a/web_module.js
+++ b/web_module.js
@@ -1,751 +1 @@
-// dashboard_panel.tsx
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { Grid, MetricTile, TrendChart, Sparkline, Chip } from "@akashic/dashboard-ui";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var dashboardRequest = null;
-async function api(path, init) {
-  if (!dashboardRequest) throw new Error("Observe \u5DE5\u4F5C\u53F0\u9762\u677F\u672A\u6FC0\u6D3B");
-  const response = await dashboardRequest(path, init);
-  const body = await response.json();
-  if (!response.ok) throw new Error(String(body.detail ?? body.message ?? `HTTP ${response.status}`));
-  return body;
-}
-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,
-  fallbackRef,
-  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 [listError, setListError] = useState(null);
-  const [detailError, setDetailError] = useState(null);
-  const [savingStatus, setSavingStatus] = useState(false);
-  const [tab, setTab] = useState("trace");
-  const [variant, setVariant] = useState(0);
-  const listReadRef = useRef(null);
-  const statusReadRef = useRef(null);
-  const loadList = useCallback(async () => {
-    listReadRef.current?.abort();
-    const controller = new AbortController();
-    listReadRef.current = controller;
-    setListError(null);
-    try {
-      const [ov, list] = await Promise.all([
-        api(`/api/dashboard/observe/global_errors/overview?range=${range}`, { signal: controller.signal }),
-        api(`/api/dashboard/observe/global_errors?range=${range}&facet=${facet}&q=${encodeURIComponent(q)}`, { signal: controller.signal })
-      ]);
-      if (controller.signal.aborted) return;
-      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);
-    } catch (error) {
-      if (!controller.signal.aborted) {
-        setListError(error instanceof Error ? error.message : "\u9519\u8BEF\u5217\u8868\u8BFB\u53D6\u5931\u8D25");
-      }
-    } finally {
-      if (listReadRef.current === controller) listReadRef.current = null;
-    }
-  }, [range, facet, q]);
-  useEffect(() => {
-    void loadList();
-    return () => listReadRef.current?.abort();
-  }, [loadList]);
-  useEffect(() => {
-    if (!selFp) {
-      setDetail(null);
-      setDetailError(null);
-      return;
-    }
-    const controller = new AbortController();
-    setDetailError(null);
-    void api(
-      `/api/dashboard/observe/global_errors/${selFp}?range=${range}`,
-      { signal: controller.signal }
-    ).then((d) => {
-      if (!controller.signal.aborted) {
-        setDetail(d);
-        setVariant(0);
-        setTab("trace");
-      }
-    }, (error) => {
-      if (!controller.signal.aborted) {
-        setDetailError(error instanceof Error ? error.message : "\u9519\u8BEF\u8BE6\u60C5\u8BFB\u53D6\u5931\u8D25");
-      }
-    });
-    return () => controller.abort();
-  }, [selFp, range]);
-  const close = useCallback(() => {
-    onClose();
-  }, [onClose]);
-  useEffect(() => {
-    closeButtonRef.current?.focus();
-    return () => {
-      statusReadRef.current?.abort();
-      (portalRef.current ?? fallbackRef.current)?.focus();
-    };
-  }, [fallbackRef, 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 || statusReadRef.current) return;
-    const fingerprint = detail.fingerprint;
-    const controller = new AbortController();
-    statusReadRef.current = controller;
-    setSavingStatus(true);
-    setDetailError(null);
-    try {
-      await api(
-        `/api/dashboard/observe/global_errors/${fingerprint}/status?value=${status}`,
-        { method: "POST", signal: controller.signal }
-      );
-      if (controller.signal.aborted) return;
-      setDetail((d) => d?.fingerprint === fingerprint ? { ...d, status } : d);
-    } catch (error) {
-      if (!controller.signal.aborted) {
-        setDetailError(error instanceof Error ? error.message : "\u9519\u8BEF\u72B6\u6001\u66F4\u65B0\u5931\u8D25");
-      }
-    } finally {
-      if (statusReadRef.current === controller) {
-        statusReadRef.current = null;
-        if (!controller.signal.aborted) setSavingStatus(false);
-      }
-    }
-  };
-  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: [
-              listError && /* @__PURE__ */ jsx("div", { className: "p-4 text-[12px] text-danger", role: "alert", children: listError }),
-              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)),
-              !listError && 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" })
-            ] }),
-            detailError ? /* @__PURE__ */ jsx("div", { className: "grid place-items-center p-6 text-[13px] text-danger", role: "alert", children: detailError }) : detail ? /* @__PURE__ */ jsx(
-              ErrorDetail,
-              {
-                detail,
-                tab,
-                setTab,
-                variant,
-                setVariant,
-                savingStatus,
-                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,
-  savingStatus,
-  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", disabled: savingStatus, 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 disabled:opacity-40", children: "\u6807\u8BB0\u5DF2\u786E\u8BA4" }),
-      /* @__PURE__ */ jsx("button", { type: "button", disabled: savingStatus, 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 disabled:opacity-40", 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 [error, setError] = useState(null);
-  const portalRef = useRef(null);
-  const refreshRef = useRef(null);
-  const overviewRef = useRef(null);
-  const mainReadRef = useRef(null);
-  const load = useCallback(async () => {
-    mainReadRef.current?.abort();
-    const controller = new AbortController();
-    mainReadRef.current = controller;
-    setRefreshing(true);
-    setError(null);
-    try {
-      const [ov, series, ge] = await Promise.all([
-        api(`/api/dashboard/observe/overview?range=${range}`, { signal: controller.signal }),
-        api(`/api/dashboard/observe/timeseries?range=${range}`, { signal: controller.signal }),
-        api(`/api/dashboard/observe/global_errors/overview?range=${range}`, { signal: controller.signal })
-      ]);
-      if (controller.signal.aborted) return;
-      setOverview(ov);
-      setPoints(series.points ?? []);
-      setGErr(ge);
-      setUpdatedAt(Date.now());
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setError(reason instanceof Error ? reason.message : "\u76D1\u6D4B\u6570\u636E\u8BFB\u53D6\u5931\u8D25");
-      }
-    } finally {
-      if (mainReadRef.current === controller) {
-        mainReadRef.current = null;
-        if (!controller.signal.aborted) setRefreshing(false);
-      }
-    }
-  }, [range]);
-  useEffect(() => {
-    void load();
-    const id = window.setInterval(() => void load(), 15e3);
-    return () => {
-      window.clearInterval(id);
-      mainReadRef.current?.abort();
-    };
-  }, [load]);
-  useEffect(() => {
-    if (!refreshing || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-    const animation = refreshRef.current?.animate(
-      [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
-      { duration: 1e3, iterations: Infinity }
-    );
-    return () => animation?.cancel();
-  }, [refreshing]);
-  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 error ? /* @__PURE__ */ jsx("div", { className: "grid min-h-full place-items-center p-6 text-danger", role: "alert", children: error }) : /* @__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",
-                {
-                  ref: refreshRef,
-                  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",
-                  "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
-              )) })
-            ] })
-          ] }),
-          error && /* @__PURE__ */ jsx("div", { className: "border border-danger/40 bg-danger/10 px-4 py-3 text-[12px] text-danger", role: "alert", children: error }),
-          /* @__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, fallbackRef: refreshRef, range, onClose: () => setDrillOpen(false) })
-  ] });
-}
-var panel = {
-  id: "observe",
-  label: "\u8FD0\u884C\u76D1\u6D4B",
-  viewLabel: "\u8FD0\u884C\u76D1\u6D4B",
-  order: 60,
-  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({ signal }) {
-    try {
-      const ov = await api("/api/dashboard/observe/overview?range=all", { signal });
-      return ov.turns || 0;
-    } catch (error) {
-      if (signal.aborted) throw error;
-      return null;
-    }
-  },
-  async fetchPage({ page, pageSize, signal }) {
-    const data = await api(
-      `/api/dashboard/observe/errors?range=all&page=${page}&page_size=${pageSize}`,
-      { signal }
-    );
-    return { items: data.items || [], total: data.total || 0 };
-  },
-  Main: ObserveMain
-};
-function activate(ctx) {
-  dashboardRequest = ctx.http.request;
-  const release = ctx.ui.inject("workbench.panels.v2", (mount) => mount.register(panel));
-  return () => {
-    release();
-    dashboardRequest = null;
-  };
-}
-export {
-  activate
-};
+import{useCallback as Y,useEffect as C,useRef as S,useState as l}from"react";import{createRoot as ie}from"react-dom/client";import{Fragment as ae,jsx as t,jsxs as n}from"react/jsx-runtime";var J=null;async function h(e,s){if(!J)throw new Error("Observe 工作台面板未激活");let a=await J(e,s),i=await a.json();if(!a.ok)throw new Error(String(i.detail??i.message??`HTTP ${a.status}`));return i}var re=[{key:"24h",label:"24 小时"},{key:"7d",label:"7 天"},{key:"30d",label:"30 天"},{key:"all",label:"全部"}],le={log:"主动日志",uncaught:"未捕获异常",asyncio:"asyncio 任务",thread:"子线程"},Z={active:{label:"活跃",tone:"warning"},acknowledged:{label:"已确认",tone:"muted"},ignored:{label:"已忽略",tone:"success"}},ce={danger:"bg-danger",warning:"bg-warning",success:"bg-success",accent:"bg-accent",muted:"bg-subtle"};function ee(e){return e>=1e6?`${(e/1e6).toFixed(1)}M`:e>=1e3?`${(e/1e3).toFixed(1)}K`:String(Math.round(e))}function te(e){return typeof e=="number"?`${(e*100).toFixed(1)}%`:"—"}function ne(e){if(e.includes("T"))return`${e.slice(11,13)}:00`;let[,s,a]=e.split("-");return s&&a?`${Number(s)}-${a}`:e}function j(e){if(!e)return"—";let s=new Date(e);return Number.isNaN(s.getTime())?e||"—":`${s.getMonth()+1}-${String(s.getDate()).padStart(2,"0")} ${String(s.getHours()).padStart(2,"0")}:${String(s.getMinutes()).padStart(2,"0")}`}function de(e){if(e.length<2)return null;let s=e[e.length-1],a=e[e.length-2];return a?(s-a)/a*100:null}function ue(e){if(!Number.isFinite(e)||e<0)return"刚刚";let s=Math.floor(e/1e3);if(s<3)return"刚刚";if(s<60)return`${s}s 前`;let a=Math.floor(s/60);return a<60?`${a}m 前`:`${Math.floor(a/60)}h 前`}function se(e,s){return s||e>=20?"danger":e>=5?"warning":"muted"}function U({title:e,children:s,bodyClass:a,style:i}){return n("div",{className:"flex flex-col overflow-hidden border border-border bg-surface",style:i,children:[t("div",{className:"flex items-center justify-between border-b border-border px-4 py-2.5",children:t("h3",{className:"text-[12px] font-medium text-muted",children:e})}),t("div",{className:a??"p-4",children:s})]})}function be({portalRef:e,fallbackRef:s,range:a,onClose:i,ui:b}){let f=S(null),c=S(null),[g,v]=l(null),[k,L]=l("type"),[R,p]=l(""),[T,u]=l([]),[x,q]=l(null),[A,F]=l(null),[H,$]=l(null),[W,y]=l(null),[B,P]=l(!1),[G,D]=l("trace"),[I,K]=l(0),O=S(null),_=S(null),z=Y(async()=>{O.current?.abort();let r=new AbortController;O.current=r,$(null);try{let[o,d]=await Promise.all([h(`/api/dashboard/observe/global_errors/overview?range=${a}`,{signal:r.signal}),h(`/api/dashboard/observe/global_errors?range=${a}&facet=${k}&q=${encodeURIComponent(R)}`,{signal:r.signal})]);if(r.signal.aborted)return;v(o),u(d.sections??[]);let m=(d.sections??[]).flatMap(E=>E.items);q(E=>E&&m.some(oe=>oe.fingerprint===E)?E:m[0]?.fingerprint??null)}catch(o){r.signal.aborted||$(o instanceof Error?o.message:"错误列表读取失败")}finally{O.current===r&&(O.current=null)}},[a,k,R]);C(()=>(z(),()=>O.current?.abort()),[z]),C(()=>{if(!x){F(null),y(null);return}let r=new AbortController;return y(null),h(`/api/dashboard/observe/global_errors/${x}?range=${a}`,{signal:r.signal}).then(o=>{r.signal.aborted||(F(o),K(0),D("trace"))},o=>{r.signal.aborted||y(o instanceof Error?o.message:"错误详情读取失败")}),()=>r.abort()},[x,a]);let w=Y(()=>{i()},[i]);C(()=>(c.current?.focus(),()=>{_.current?.abort(),(e.current??s.current)?.focus()}),[s,e]),C(()=>{let r=o=>{if(o.key==="Escape"&&w(),o.key!=="Tab")return;let d=Array.from(f.current?.querySelectorAll('button:not([disabled]), input:not([disabled]), select:not([disabled]), [href], [tabindex]:not([tabindex="-1"])')??[]);if(d.length===0)return;let m=d[0],E=d[d.length-1];o.shiftKey&&document.activeElement===m?(o.preventDefault(),E.focus()):!o.shiftKey&&document.activeElement===E&&(o.preventDefault(),m.focus())};return window.addEventListener("keydown",r),()=>window.removeEventListener("keydown",r)},[w]);let M=async r=>{if(!A||_.current)return;let o=A.fingerprint,d=new AbortController;_.current=d,P(!0),y(null);try{if(await h(`/api/dashboard/observe/global_errors/${o}/status?value=${r}`,{method:"POST",signal:d.signal}),d.signal.aborted)return;F(m=>m?.fingerprint===o?{...m,status:r}:m)}catch(m){d.signal.aborted||y(m instanceof Error?m.message:"错误状态更新失败")}finally{_.current===d&&(_.current=null,d.signal.aborted||P(!1))}},N=r=>{window.dispatchEvent(new CustomEvent("akashic:goto-session",{detail:r})),w()};return n(ae,{children:[t("div",{"aria-hidden":"true",className:"fixed inset-0 z-30 bg-black/55",onClick:w}),n("div",{ref:f,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:[n("div",{className:"flex flex-shrink-0 items-center gap-4 border-b border-border px-5 py-4",children:[t("button",{ref:c,type:"button",onClick:w,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)",children:"‹"}),t("span",{className:"font-mono text-[26px] font-semibold tabular-nums text-danger",children:g?.total??"—"}),n("div",{className:"min-w-0",children:[n("div",{id:"observe-error-dialog-title",className:"text-sm font-semibold",children:["错误 · ",re.find(r=>r.key===a)?.label??a]}),n("div",{className:"mt-0.5 flex items-center gap-3 text-[11px] text-muted",children:[n("span",{children:[g?.types??0," 个类型"]}),(g?.new_types??0)>0&&n("span",{children:[g?.new_types," 个新类型"]}),(g?.spiking_types??0)>0&&n("span",{className:"font-semibold text-danger",children:[g?.spiking_types," 个正在爆发"]})]})]})]}),n("div",{className:"flex flex-shrink-0 items-center gap-3 border-b border-border px-4 py-2.5",children:[t("div",{className:"flex gap-1 rounded-md border border-border bg-bg p-0.5",children:[{k:"type",l:"按类型"},{k:"source",l:"按来源"},{k:"channel",l:"按通道"}].map(r=>t("button",{type:"button",onClick:()=>L(r.k),className:`rounded-[4px] px-2.5 py-1 text-[11px] transition-colors ${k===r.k?"bg-surface-3 text-fg":"text-muted hover:text-fg"}`,children:r.l},r.k))}),t("input",{value:R,onChange:r=>p(r.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"})]}),n("div",{className:"grid min-h-0 flex-1 grid-cols-[340px_1fr]",children:[n("div",{className:"overflow-auto border-r border-border p-1.5",children:[H&&t("div",{className:"p-4 text-[12px] text-danger",role:"alert",children:H}),T.map(r=>n("div",{children:[r.label&&n("div",{className:"flex items-center justify-between px-2.5 pb-1 pt-3 text-[11px] font-medium text-muted",children:[t("span",{children:r.label}),n("span",{children:[r.count," 次"]})]}),r.items.map(o=>t(me,{g:o,active:o.fingerprint===x,onClick:()=>q(o.fingerprint),ui:b},o.fingerprint))]},r.key)),!H&&T.length===0&&t("div",{className:"p-6 text-[12.5px] text-muted",children:"所选区间内没有错误。"})]}),W?t("div",{className:"grid place-items-center p-6 text-[13px] text-danger",role:"alert",children:W}):A?t(pe,{detail:A,tab:G,setTab:D,variant:I,setVariant:K,savingStatus:B,onStatus:M,onGoto:N,ui:b}):t("div",{className:"grid place-items-center text-[13px] text-muted",children:"选择左侧一个错误查看现场"})]})]})]})}function me({g:e,active:s,onClick:a,ui:i}){let b=se(e.count,e.is_spiking),f=e.spark??[],c=i.Sparkline;return n("button",{type:"button",onClick:a,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 ${s?"bg-accent-soft":"hover:bg-surface-2"}`,children:[t("span",{className:"relative flex h-2 w-2","aria-hidden":"true",children:t("span",{className:`relative inline-flex h-2 w-2 rounded-full ${ce[b]}`})}),n("div",{className:"min-w-0",children:[n("div",{className:"flex items-center gap-1.5 font-mono text-[12.5px]",children:[t("span",{className:"truncate",children:e.error_type}),e.is_new&&t("span",{className:"text-[9px] font-semibold text-accent",children:"新"}),e.is_spiking&&t("span",{className:"text-[9px] font-semibold text-danger",children:"爆发"})]}),t("div",{className:"mt-0.5 truncate font-mono text-[10px] text-subtle",children:e.logger_name}),n("div",{className:"mt-1 flex gap-2.5 text-[10px] text-muted",children:[n("span",{children:[t("b",{className:"font-semibold text-fg",children:e.count})," 次"]}),n("span",{children:[t("b",{className:"font-semibold text-fg",children:e.sessions})," session"]})]})]}),n("div",{className:"flex flex-col items-end gap-1.5",children:[t("div",{className:"h-[22px] w-[62px]",children:f.length>1&&t(c,{data:f,tone:b,height:22})}),t("span",{className:"font-mono text-[10px] text-subtle",children:j(e.last_ts)})]})]})}function pe({detail:e,tab:s,setTab:a,variant:i,setVariant:b,savingStatus:f,onStatus:c,onGoto:g,ui:v}){let k=Z[e.status]??Z.active,L=se(e.count,!1),R=e.variants[i]??e.variants[0],{Chip:p,TrendChart:T}=v;return n("div",{className:"flex min-h-0 flex-col",children:[n("div",{className:"border-b border-border px-5 py-4",children:[t("div",{className:"font-mono text-[19px] font-semibold",children:e.error_type}),t("div",{className:"mt-1.5 font-mono text-[12px] leading-relaxed text-danger",children:e.message}),n("div",{className:"mt-3 flex flex-wrap gap-1.5",children:[t(p,{children:e.logger_name}),n(p,{children:["来源 · ",le[e.source]??e.source]}),t(p,{children:e.channel}),t(p,{tone:"danger",children:e.level}),t(p,{tone:k.tone,children:k.label})]})]}),n("div",{className:"grid grid-cols-4 gap-px border-b border-border bg-border",children:[t(Q,{label:"累计次数",value:String(e.count)}),t(Q,{label:"独立 session",value:String(e.sessions)}),t(Q,{label:"首次",value:j(e.first_ts),small:!0}),t(Q,{label:"最近",value:j(e.last_ts),small:!0})]}),n("div",{className:"flex gap-1 border-b border-border px-5 pt-3",children:[t(X,{active:s==="trend",onClick:()=>a("trend"),children:"趋势"}),n(X,{active:s==="trace",onClick:()=>a("trace"),children:["Traceback",e.variants.length>1?` · ${e.variants.length} 变体`:""]}),n(X,{active:s==="occ",onClick:()=>a("occ"),children:["现场 · ",e.occurrences.length]})]}),n("div",{className:"min-h-0 flex-1 overflow-auto px-5 py-4",children:[s==="trend"&&t(T,{data:e.trend.map(u=>({label:ne(u.bucket),value:u.count})),kind:"bar",tone:L,valueFmt:u=>String(u),empty:"区间内无发作"}),s==="trace"&&n("div",{children:[e.variants.length>1&&t("div",{className:"mb-3 flex gap-2",children:e.variants.map((u,x)=>n("button",{type:"button",onClick:()=>b(x),className:`rounded border px-2.5 py-1.5 text-left text-[10.5px] ${x===i?"border-accent-deep bg-accent-soft text-fg":"border-border bg-bg text-muted"}`,children:[t("b",{className:"text-fg",children:u.count})," 次 · 变体 ",x+1]},u.fingerprint))}),t("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:R?.traceback_text||e.traceback_text})]}),s==="occ"&&n("div",{className:"flex flex-col gap-2",children:[e.occurrences.length===0&&t("div",{className:"text-[12px] text-muted",children:"无可关联的 session 现场。"}),e.occurrences.map(u=>n("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:[t("span",{className:"font-mono text-[11px] text-accent",children:j(u.ts)}),n("div",{className:"min-w-0",children:[t("div",{className:"truncate text-[12px]",children:u.user_preview||"（无用户消息）"}),n("div",{className:"mt-0.5 font-mono text-[10px] text-subtle",children:["session ",u.session_key]})]}),t("button",{type:"button",onClick:()=>g(u.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:"查看对话"})]},u.session_key))]})]}),n("div",{className:"flex flex-shrink-0 gap-2 border-t border-border px-5 py-3",children:[t("button",{type:"button",onClick:()=>e.occurrences[0]&&g(e.occurrences[0].session_key),disabled:e.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:"查看最近对话"}),t("button",{type:"button",onClick:()=>void navigator.clipboard?.writeText(e.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:"复制 Traceback"}),t("div",{className:"flex-1"}),t("button",{type:"button",disabled:f,onClick:()=>c("acknowledged"),className:"rounded border border-border-strong bg-surface-2 px-3 py-2 text-[11px] text-muted transition-colors hover:text-fg disabled:opacity-40",children:"标记已确认"}),t("button",{type:"button",disabled:f,onClick:()=>c("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 disabled:opacity-40",children:"忽略此类型"})]})]})}function Q({label:e,value:s,small:a}){return n("div",{className:"bg-surface px-4 py-3",children:[t("div",{className:"text-[10px] text-subtle",children:e}),t("div",{className:`mt-1.5 font-mono font-semibold tabular-nums ${a?"text-[12.5px]":"text-[18px]"}`,children:s})]})}function X({active:e,onClick:s,children:a}){return t("button",{type:"button",onClick:s,className:`-mb-px border-b-2 px-3 py-2 text-[11.5px] transition-colors ${e?"border-accent text-fg":"border-transparent text-muted hover:text-fg"}`,children:a})}function V({className:e}){return t("div",{className:`relative overflow-hidden rounded border border-border bg-surface-2 ${e}`})}function ge(){return n("div",{className:"flex flex-col gap-4 p-6",children:[n("div",{className:"flex items-end justify-between",children:[n("div",{className:"flex flex-col gap-2",children:[t(V,{className:"h-7 w-48"}),t(V,{className:"h-3 w-64 rounded"})]}),t(V,{className:"h-9 w-56"})]}),t("div",{className:"grid grid-cols-4 gap-4",children:[0,1,2,3].map(e=>t(V,{className:"h-[132px]"},e))}),t("div",{className:"grid grid-cols-2 gap-4",children:[0,1,2,3].map(e=>t(V,{className:"h-[218px]"},e))})]})}function ve({dispatch:e}){let{Grid:s,MetricTile:a,TrendChart:i}=e.ui,[b,f]=l("24h"),[c,g]=l(null),[v,k]=l([]),[L,R]=l(null),[p,T]=l(!1),[u,x]=l(0),[q,A]=l(()=>Date.now()),[F,H]=l(!1),[$,W]=l(null),y=S(null),B=S(null),P=S(null),G=S(null),D=Y(async()=>{G.current?.abort();let r=new AbortController;G.current=r,H(!0),W(null);try{let[o,d,m]=await Promise.all([h(`/api/dashboard/observe/overview?range=${b}`,{signal:r.signal}),h(`/api/dashboard/observe/timeseries?range=${b}`,{signal:r.signal}),h(`/api/dashboard/observe/global_errors/overview?range=${b}`,{signal:r.signal})]);if(r.signal.aborted)return;g(o),k(d.points??[]),R(m),x(Date.now())}catch(o){r.signal.aborted||W(o instanceof Error?o.message:"监测数据读取失败")}finally{G.current===r&&(G.current=null,r.signal.aborted||H(!1))}},[b]);if(C(()=>{D();let r=window.setInterval(()=>void D(),15e3);return()=>{window.clearInterval(r),G.current?.abort()}},[D]),C(()=>{if(!F||window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;let r=B.current?.animate([{transform:"rotate(0deg)"},{transform:"rotate(360deg)"}],{duration:1e3,iterations:1/0});return()=>r?.cancel()},[F]),C(()=>{let r=window.setInterval(()=>A(Date.now()),1e3);return()=>window.clearInterval(r)},[]),C(()=>{P.current&&(P.current.inert=p)},[p]),!c)return $?t("div",{className:"grid min-h-full place-items-center p-6 text-danger",role:"alert",children:$}):t(ge,{});let I=v.map(r=>r.turns),K=v.map(r=>r.errors),O=v.map(r=>r.input_tokens),_=v.map(r=>(r.passive_cache_hit_rate??0)*100),z=v.map(r=>(r.proactive_cache_hit_rate??0)*100),w=v.map(r=>r.avg_iteration??0),M=r=>v.map((o,d)=>({label:ne(o.bucket),value:r[d]})),N=L?.total??c.errors;return n(ae,{children:[n("div",{ref:P,"aria-hidden":p||void 0,className:"flex flex-col gap-5 p-6 transition-opacity duration-150",style:p?{opacity:.35,pointerEvents:"none"}:void 0,children:[n("div",{className:"flex items-end justify-between",children:[n("div",{children:[n("div",{className:"flex items-center gap-2.5",children:[t("span",{className:"detail-title",children:"Observe · 监测"}),t("span",{className:"text-[11px] font-medium text-success",children:"实时更新"})]}),n("div",{className:"detail-subtext",children:["Agent 主循环遥测 · Token / 迭代 / 错误",n("span",{className:"ml-2 font-mono text-[11px] text-subtle",children:["更新于 ",ue(q-u)]})]})]}),n("div",{className:"flex items-center gap-2",children:[t("button",{ref:B,type:"button",onClick:()=>void D(),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","aria-label":"刷新监测数据",title:"刷新",children:"↻"}),t("div",{className:"flex gap-1 rounded-md border border-border bg-surface-2 p-1",children:re.map(r=>t("button",{type:"button",onClick:()=>f(r.key),className:`min-h-10 rounded-[4px] px-2.5 py-1 text-[11px] transition-colors ${b===r.key?"bg-accent text-accent-ink":"text-muted hover:bg-surface-3 hover:text-fg"}`,"aria-pressed":b===r.key,children:r.label},r.key))})]})]}),$&&t("div",{className:"border border-danger/40 bg-danger/10 px-4 py-3 text-[12px] text-danger",role:"alert",children:$}),n("section",{className:`flex min-h-16 items-center justify-between gap-4 border px-4 py-3 ${N>0?"border-danger/40 bg-danger/10":"border-success/35 bg-success/10"}`,"aria-label":"运行状态",children:[n("div",{className:"min-w-0",children:[t("div",{className:`text-[13px] font-semibold ${N>0?"text-danger":"text-success"}`,children:N>0?`${N} 条错误需要查看`:"当前区间没有采集到错误"}),t("p",{className:"mt-1 text-[11.5px] text-muted",children:N>0?`${L?.types??0} 个错误类型，先查看爆发和新出现的类型。`:"主循环遥测持续更新，缓存与迭代指标见下方。"})]}),N>0&&t("button",{type:"button",ref:y,onClick:()=>T(!0),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:"查看错误分析"})]}),n(s,{columns:3,children:[t("div",{children:t(a,{label:"对话轮数",value:ee(c.turns),delta:de(I),sub:c.last_ts?`最近 ${j(c.last_ts)}`:"无记录",tone:"accent",spark:I})}),t("div",{children:t(a,{label:"被动 KV 命中率",value:te(c.passive_cache_hit_rate),sub:`主动 ${te(c.proactive_cache_hit_rate)}`,tone:"success",spark:_})}),t("div",{children:t(a,{label:"平均迭代",value:c.avg_iteration!=null?c.avg_iteration.toFixed(1):"—",unit:`峰 ${c.max_iteration}`,sub:"每轮 LLM 调用次数",tone:"warning",spark:w})})]}),n(s,{columns:2,children:[t(U,{title:"输入 Token 趋势",children:t(i,{data:M(O),kind:"area",tone:"accent",valueFmt:ee})}),t(U,{title:"平均迭代趋势",children:t(i,{data:M(w),kind:"area",tone:"warning",valueFmt:r=>r.toFixed(1)})})]}),n("details",{className:"border-t border-border pt-1",children:[t("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:"查看缓存命中与错误趋势"}),n(s,{columns:2,children:[t(U,{title:"全局被动链路命中率趋势",children:t(i,{data:M(_),kind:"area",tone:"success",valueFmt:r=>`${r.toFixed(0)}%`})}),t(U,{title:"全局主动链路命中率趋势",children:t(i,{data:M(z),kind:"area",tone:"accent",valueFmt:r=>`${r.toFixed(0)}%`})}),t(U,{title:"错误趋势",children:t(i,{data:M(K),kind:"bar",tone:"danger",valueFmt:r=>String(r),empty:"所选区间内没有错误"})})]})]})]}),p&&t(be,{portalRef:y,fallbackRef:B,range:b,onClose:()=>T(!1),ui:e.ui})]})}var fe={id:"observe",label:"运行监测",viewLabel:"运行监测",order:60,layout:"workbench",pageSize:30,rowKey:"id",countTitle(e){return`${e} 轮遥测`},columns:[{key:"session_key",label:"会话",width:120,cellClass:"mono cell-session",rawTitle:!0},{key:"ts",label:"时间",width:96,fmt:"mono-time",cellClass:"mono cell-time",rawTitle:!0},{key:"error",label:"错误",flex:!0,cellClass:"content-preview"}],async getCount({signal:e}){try{return(await h("/api/dashboard/observe/overview?range=all",{signal:e})).turns||0}catch(s){if(e.aborted)throw s;return null}},async fetchPage({page:e,pageSize:s,signal:a}){let i=await h(`/api/dashboard/observe/errors?range=all&page=${e}&page_size=${s}`,{signal:a});return{items:i.items||[],total:i.total||0}},renderMain(e,s){let a=ie(e);return a.render(t(ve,{dispatch:s})),()=>a.unmount()}};function ke(e){J=e.http.request;let s=e.ui.inject("workbench.panels.v2",a=>a.register(fe));return()=>{s(),J=null}}export{ke as activate};