dsh-dock 0.11.2 → 0.11.5

package/client.js

@@ -2342,6 +2342,70 @@ function fmtTime(ts) {
   const p = (x) => String(x).padStart(2, "0");
   return d.getFullYear() + "-" + p(d.getMonth() + 1) + "-" + p(d.getDate()) + " " + p(d.getHours()) + ":" + p(d.getMinutes()) + ":" + p(d.getSeconds());
 }
+function fmtCostCnyExact(usd, rate) {
+  const v = (Number(usd) || 0) * (Number(rate) > 0 ? Number(rate) : 7.2);
+  return "\xA5" + v.toFixed(4);
+}
+function fmtDurCompact(ms) {
+  if (ms === null || ms === void 0 || isNaN(ms)) return "\u2014";
+  if (ms < 1e3) return Math.round(ms) + "ms";
+  if (ms < 6e4) return (ms / 1e3).toFixed(1) + "s";
+  if (ms < 36e5) return Math.round(ms / 6e4) + "m";
+  return (ms / 36e5).toFixed(1) + "h";
+}
+function startOfToday() {
+  const d = /* @__PURE__ */ new Date();
+  d.setHours(0, 0, 0, 0);
+  return d.getTime();
+}
+function hourOf(ts) {
+  return new Date(ts).getHours();
+}
+var EXPORT_COLUMNS = [
+  ["\u65F6\u95F4", (r) => fmtTime(r.time)],
+  ["\u4F1A\u8BDDID", (r) => r.sessionId || ""],
+  ["\u63D0\u4F9B\u5546", (r) => r.provider || "\u2014"],
+  ["\u6A21\u578B", (r) => r.model || "\u2014"],
+  ["\u8F93\u5165(\u547D\u4E2D)", (r) => fmtNum(r.cacheReadTokens)],
+  ["\u8F93\u5165(\u672A\u547D\u4E2D)", (r) => fmtNum(r.inputTokens)],
+  ["\u547D\u4E2D%", (r) => (Number(r.cacheHitPercent) || 0) + "%"],
+  ["\u8F93\u51FA", (r) => fmtNum(r.outputTokens)],
+  ["\u63A8\u7406", (r) => fmtNum(r.reasoningTokens)],
+  ["\u603B\u989D", (r) => fmtNum(r.totalTokens)],
+  ["\u91D1\u989D\uFF08\u4EBA\u6C11\u5E01\uFF09", (r, rate) => fmtCostCnyExact(r.cost, rate)],
+  ["\u5F3A\u5EA6", (r) => r.effort || "\u2014"],
+  ["\u72B6\u6001", (r) => statusInfo(r).label],
+  ["\u8017\u65F6", (r) => fmtDuration(r.llmMs)]
+];
+function csvCell(v) {
+  const s = String(v === void 0 || v === null ? "" : v);
+  return /[",\n\r]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+}
+function buildExportCsv(rows, rate) {
+  const list = Array.isArray(rows) ? rows : [];
+  const lines = [EXPORT_COLUMNS.map(([title]) => csvCell(title)).join(",")];
+  for (const r of list) lines.push(EXPORT_COLUMNS.map(([, get]) => csvCell(get(r, rate))).join(","));
+  if (list.length) {
+    const sum = (k) => list.reduce((a, r) => a + (Number(r[k]) || 0), 0);
+    const totalInput = sum("inputTokens") + sum("cacheReadTokens");
+    const hitPct = totalInput > 0 ? Math.round(sum("cacheReadTokens") / totalInput * 100) : 0;
+    const totals = {
+      "\u8C03\u7528\u6B21\u6570": String(list.length),
+      "\u8F93\u5165(\u547D\u4E2D)": fmtNum(sum("cacheReadTokens")),
+      "\u8F93\u5165(\u672A\u547D\u4E2D)": fmtNum(sum("inputTokens")),
+      "\u547D\u4E2D%": hitPct + "%",
+      "\u8F93\u51FA": fmtNum(sum("outputTokens")),
+      "\u63A8\u7406": fmtNum(sum("reasoningTokens")),
+      "\u603B\u989D": fmtNum(sum("totalTokens")),
+      "\u91D1\u989D\uFF08\u4EBA\u6C11\u5E01\uFF09": fmtCostCnyExact(sum("cost"), rate)
+    };
+    lines.push(EXPORT_COLUMNS.map(([title]) => {
+      if (title === "\u63D0\u4F9B\u5546") return csvCell("\u5408\u8BA1(" + list.length + " \u6761\u8C03\u7528)");
+      return csvCell(totals[title] === void 0 ? "" : totals[title]);
+    }).join(","));
+  }
+  return lines.join("\r\n");
+}
 var STORE_KEY = "dsh-dock/tokenlog/filters/v1";
 var FILTER_FIELDS = ["fromStr", "toStr", "provider", "model", "status", "effort", "sessionId", "dim"];
 function loadSavedFilters() {
@@ -2379,6 +2443,204 @@ function statusInfo(r) {
   if (r.status === "interrupted") return { code: 500, label: "500", cls: "warn", title: "\u4E2D\u65AD" };
   return { code: 0, label: "\u2026", cls: "pend", title: "\u8FDB\u884C\u4E2D" };
 }
+var CHART_COLORS = ["#60a5fa", "#fbbf24", "#4ade80", "#f472b6", "#a78bfa", "#fb923c", "#2dd4bf", "#e879f9", "#94a3b8", "#f87171"];
+function chartColor(i) {
+  return CHART_COLORS[i % CHART_COLORS.length];
+}
+var CHART_METRICS = [
+  ["totalTokens", "\u603B Token", (v) => fmtCompact(v)],
+  ["calls", "\u8C03\u7528\u6B21\u6570", (v) => fmtNum(v)],
+  ["cost", "\u91D1\u989D", (v, rate) => fmtCostCny(v, rate)],
+  ["outputTokens", "\u8F93\u51FA Token", (v) => fmtCompact(v)]
+];
+var CHART_DIMS = [
+  ["model", "\u6A21\u578B"],
+  ["provider", "\u63D0\u4F9B\u5546"],
+  ["status", "\u72B6\u6001"],
+  ["effort", "\u63A8\u7406\u5F3A\u5EA6"]
+];
+function emptyAgg() {
+  return { calls: 0, totalTokens: 0, outputTokens: 0, inputTokens: 0, cacheReadTokens: 0, reasoningTokens: 0, cost: 0, llmMs: 0, timed: 0 };
+}
+function addToAgg(a, r) {
+  a.calls += 1;
+  a.totalTokens += Number(r.totalTokens) || 0;
+  a.outputTokens += Number(r.outputTokens) || 0;
+  a.inputTokens += Number(r.inputTokens) || 0;
+  a.cacheReadTokens += Number(r.cacheReadTokens) || 0;
+  a.reasoningTokens += Number(r.reasoningTokens) || 0;
+  a.cost += Number(r.cost) || 0;
+  if (typeof r.llmMs === "number") {
+    a.llmMs += r.llmMs;
+    a.timed += 1;
+  }
+}
+function groupByKey(records, keyFn, metric) {
+  const map = /* @__PURE__ */ new Map();
+  for (const r of records) {
+    const k = keyFn(r);
+    let a = map.get(k);
+    if (!a) {
+      a = emptyAgg();
+      a.key = k;
+      map.set(k, a);
+    }
+    addToAgg(a, r);
+  }
+  return [...map.values()].sort((a, b) => (b[metric] || 0) - (a[metric] || 0));
+}
+function DonutChart({ items, metric, metricFmt, rate, centerLabel, emptyText }) {
+  const total = items.reduce((s, it) => s + (Number(it[metric]) || 0), 0);
+  if (!items.length || total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-chart-empty", children: emptyText || "\u6682\u65E0\u6570\u636E" });
+  const shown = items.slice(0, 8);
+  const restSum = items.slice(8).reduce((s, it) => s + (Number(it[metric]) || 0), 0);
+  if (restSum > 0) {
+    const restAgg = Object.assign(emptyAgg(), { key: "\u5176\u4ED6(" + (items.length - 8) + "\u9879)" });
+    restAgg[metric] = restSum;
+    shown.push(restAgg);
+  }
+  const R = 15.9155;
+  let acc = 0;
+  const segs = shown.map((it, i) => {
+    const v = Number(it[metric]) || 0;
+    const frac = v / total;
+    const seg = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "circle",
+      {
+        cx: "21",
+        cy: "21",
+        r: R,
+        fill: "none",
+        stroke: chartColor(i),
+        strokeWidth: frac > 0.02 ? 7 : 5,
+        strokeDasharray: frac * 100 + " " + (100 - frac * 100),
+        strokeDashoffset: String(25 - acc * 100),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: it.key + "\uFF1A" + metricFmt(v, rate) + "\uFF08" + (frac * 100).toFixed(1) + "%\uFF09" })
+      },
+      it.key
+    );
+    acc += frac;
+    return seg;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-donut-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "dtok-donut", viewBox: "0 0 42 42", role: "img", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "21", cy: "21", r: R, fill: "none", stroke: "var(--dsw-alias-border-l1)", strokeWidth: "7" }),
+      segs,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: "21", y: "19.5", textAnchor: "middle", className: "dtok-donut-v", children: metricFmt(total, rate) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: "21", y: "26", textAnchor: "middle", className: "dtok-donut-l", children: centerLabel })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-legend", children: shown.map((it, i) => {
+      const v = Number(it[metric]) || 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-legend-row", title: it.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-dot", style: { background: chartColor(i) } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-legend-k", children: it.key }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dtok-legend-v", children: [
+          metricFmt(v, rate),
+          " \xB7 ",
+          (v / total * 100).toFixed(1),
+          "%"
+        ] })
+      ] }, it.key);
+    }) })
+  ] });
+}
+function HBarChart({ items, metric, metricFmt, rate, maxRows, emptyText }) {
+  if (!items.length) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-chart-empty", children: emptyText || "\u6682\u65E0\u6570\u636E" });
+  const shown = items.slice(0, maxRows || 12);
+  const max = Math.max(...shown.map((it) => Number(it[metric]) || 0), 1e-9);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-hbars", children: shown.map((it, i) => {
+    const v = Number(it[metric]) || 0;
+    const pct = Math.max(1.5, v / max * 100);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-hbar-row", title: it.key + "\uFF1A" + metricFmt(v, rate), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-hbar-k", children: it.key }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-hbar-track", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-hbar-fill", style: { width: pct + "%", background: chartColor(i) } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-hbar-v", children: metricFmt(v, rate) })
+    ] }, it.key);
+  }) });
+}
+function HourChart({ hours, metric, metricFmt, rate, emptyText }) {
+  const total = hours.reduce((s, h) => s + (Number(h[metric]) || 0), 0);
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-chart-empty", children: emptyText || "\u6682\u65E0\u6570\u636E" });
+  const max = Math.max(...hours.map((h) => Number(h[metric]) || 0), 1e-9);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-hours", role: "img", children: hours.map((h) => {
+    const v = Number(h[metric]) || 0;
+    const pct = v > 0 ? Math.max(2, v / max * 100) : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-hour-col", title: h.hour + " \u65F6\uFF1A" + metricFmt(v, rate), children: pct > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-hour-bar", style: { height: pct + "%" } }) : null }, h.hour);
+  }) });
+}
+function ChartsPanel({ records, rate }) {
+  const [metric, setMetric] = (0, import_react2.useState)("totalTokens");
+  const [dim, setDimLocal] = (0, import_react2.useState)("model");
+  const metricDef = CHART_METRICS.find((m) => m[0] === metric) || CHART_METRICS[0];
+  const metricFmt = metricDef[2];
+  const todayRecs = (0, import_react2.useMemo)(() => {
+    const t0 = startOfToday();
+    return records.filter((r) => Number(r.time) >= t0);
+  }, [records]);
+  const todayByModel = (0, import_react2.useMemo)(() => groupByKey(todayRecs, (r) => r.model || "(\u672A\u77E5)", metric), [todayRecs, metric]);
+  const byDim = (0, import_react2.useMemo)(() => groupByKey(records, (r) => r[dim] || "(\u7A7A)", metric), [records, dim, metric]);
+  const modelTime = (0, import_react2.useMemo)(() => groupByKey(records, (r) => r.model || "(\u672A\u77E5)", "llmMs"), [records]);
+  const timedCalls = (0, import_react2.useMemo)(() => records.reduce((s, r) => s + (typeof r.llmMs === "number" ? 1 : 0), 0), [records]);
+  const hours = (0, import_react2.useMemo)(() => {
+    const arr = [];
+    for (let h = 0; h < 24; h++) {
+      const a = emptyAgg();
+      a.hour = h;
+      arr.push(a);
+    }
+    for (const r of records) addToAgg(arr[hourOf(r.time)], r);
+    return arr;
+  }, [records]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-charts", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-chart-toolbar-label", children: "\u6307\u6807" }),
+      CHART_METRICS.map(([id, label]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn tiny" + (metric === id ? " primary" : ""), onClick: () => setMetric(id), children: label }, id)),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-chart-toolbar-note", children: "\u56FE\u8868\u8DDF\u968F\u4E0A\u65B9\u7B5B\u9009\u6761\u4EF6\uFF08\u65F6\u95F4 / \u4F1A\u8BDD / \u63D0\u4F9B\u5546 / \u6A21\u578B / \u72B6\u6001 / \u5F3A\u5EA6\uFF09\u5B9E\u65F6\u8054\u52A8" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-grid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-title", children: [
+          "\u4ECA\u65E5\u6A21\u578B\u7528\u91CF\u5360\u6BD4",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dtok-chart-sub", children: [
+            metricDef[1],
+            " \xB7 ",
+            todayRecs.length,
+            " \u6B21\u8C03\u7528"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DonutChart, { items: todayByModel, metric, metricFmt, rate, centerLabel: "\u4ECA\u65E5" + metricDef[1], emptyText: "\u4ECA\u65E5\u6682\u65E0\u8C03\u7528" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-title", children: [
+          "24 \u5C0F\u65F6\u8C03\u7528\u5206\u5E03",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dtok-chart-sub", children: [
+            "\u6309\u5C0F\u65F6\u805A\u5408 \xB7 ",
+            metricDef[1]
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HourChart, { hours, metric, metricFmt, rate })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-title", children: [
+          "\u6A21\u578B\u8017\u65F6\u6392\u884C",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dtok-chart-sub", children: [
+            "\u7D2F\u8BA1 LLM \u8017\u65F6 \xB7 \u5DF2\u8BA1\u65F6 ",
+            timedCalls,
+            " \u6B21"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HBarChart, { items: modelTime, metric: "llmMs", metricFmt: (v) => fmtDurCompact(v), rate, emptyText: "\u6682\u65E0\u8BA1\u65F6\u6570\u636E" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-card", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-chart-title", children: [
+          "\u5206\u5E03\u7EDF\u8BA1",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-chart-sub", children: CHART_DIMS.map(([id, label]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn tiny" + (dim === id ? " primary" : ""), style: { marginLeft: 4 }, onClick: () => setDimLocal(id), children: label }, id)) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HBarChart, { items: byDim, metric, metricFmt, rate })
+      ] })
+    ] })
+  ] });
+}
 var css = `
 .dtok-root{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;}
 .dtok-status{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dsw-alias-label-secondary);flex-wrap:wrap;}
@@ -2425,6 +2687,58 @@ var css = `
 .dtok-pager.top{margin:0;}
 .dtok-pager.bottom{margin:0;}
 .dtok-err{color:var(--dsw-alias-state-error-primary,#ff7a7a);font-size:12px;}
+/* ---- \u67E5\u8BE2\u52A0\u8F7D\u52A8\u753B ----
+   \u6570\u636E\u91CF\u5927\u65F6\u300C\u67E5\u8BE2\u300D\u8981\u7B49\u597D\u51E0\u79D2\uFF0C\u65E7\u7248\u53EA\u6709\u4E00\u884C\u300C\u52A0\u8F7D\u4E2D\u2026\u300D\uFF1A\u7528\u6237\u65E2\u4E0D\u786E\u5B9A\u70B9\u4E0A\u6CA1\u70B9\u4E0A\uFF0C
+   \u4E5F\u4E0D\u77E5\u9053\u6570\u636E\u4EC0\u4E48\u65F6\u5019\u6362\u6389\u3002\u8FD9\u91CC\u7528\u4E00\u6BB5\u6709\u8DA3\u7684\u300C\u8BB0\u8D26\u5C0F\u961F\u6E05\u70B9\u300D\u52A8\u753B\u586B\u6EE1\u7B49\u5F85\uFF0C\u5E76\u5728\u7ED3\u679C
+   \u771F\u6B63\u5230\u4F4D\u65F6\u7ED9\u4E00\u6B21\u300C\u2713 \u6570\u636E\u5DF2\u66F4\u65B0\u300D+ KPI \u5361\u56DE\u5F39\uFF0C\u8BA9\u300C\u6570\u636E\u53D8\u4E86\u300D\u8FD9\u4EF6\u4E8B\u88AB\u770B\u89C1\u3002 */
+.dtok-btn{transition:transform .08s ease,background .15s ease,filter .15s ease,border-color .15s ease;}
+.dtok-btn.primary:not([disabled]):active{transform:scale(.95);}
+.dtok-btn.loading{position:relative;overflow:hidden;opacity:1;cursor:progress;border-color:var(--dk-accent);}
+.dtok-btn.loading::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 18%,rgb(255 255 255 / .4) 50%,transparent 82%);transform:translateX(-130%);animation:dtok-btn-sheen 1.05s linear infinite;}
+@keyframes dtok-btn-sheen{to{transform:translateX(130%);}}
+.dtok-spin{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border:2px solid rgb(255 255 255 / .35);border-top-color:#fff;border-radius:50%;animation:dtok-rotate .7s linear infinite;}
+.dtok-spin.inline{width:9px;height:9px;margin:0;vertical-align:0;border-color:rgb(127 127 127 / .35);border-top-color:var(--dk-accent);}
+@keyframes dtok-rotate{to{transform:rotate(360deg);}}
+/* \u72B6\u6001\u884C\u91CC\u7684\u300C\u27F3 \u52A0\u8F7D\u4E2D...\u300D\uFF1A\u8F6C\u5708 + \u7701\u7565\u53F7\u4E00\u4E2A\u4E00\u4E2A\u8E66\u51FA\u6765\uFF0C\u6700\u7ECF\u5178\u7684\u90A3\u79CD\u52A0\u8F7D\u52A8\u753B */
+.dtok-busy{display:inline-flex;align-items:center;gap:5px;}
+.dtok-dots{display:inline-block;width:12px;text-align:left;}
+.dtok-dots i{font-style:normal;opacity:0;animation:dtok-dot 1.2s linear infinite;}
+.dtok-dots i:nth-child(2){animation-delay:.2s;}
+.dtok-dots i:nth-child(3){animation-delay:.4s;}
+@keyframes dtok-dot{0%{opacity:0;}25%,80%{opacity:1;}100%{opacity:0;}}
+.dtok-body-inner{display:flex;flex-direction:column;gap:8px;min-width:0;transition:opacity .25s ease;}
+.dtok-body-inner.busy{opacity:.45;pointer-events:none;}
+.dtok-loading{position:sticky;top:0;z-index:6;display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:9px 14px;border-radius:12px;border:1px solid var(--dk-accent);background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(0 0 0 / .1)),var(--dsw-alias-bg-layer-2,#1c212b);box-shadow:0 10px 26px rgb(0 0 0 / .3);animation:dtok-load-in .3s ease;}
+@keyframes dtok-load-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
+.dtok-load-scene{position:relative;display:flex;align-items:flex-end;gap:1px;height:30px;flex:none;padding:0 6px;}
+.dtok-load-emoji{display:inline-block;font-size:19px;line-height:1;animation:dtok-hop 1.1s cubic-bezier(.36,.07,.19,.97) infinite;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .3));}
+.dtok-load-emoji.e2{animation-delay:.15s;}
+.dtok-load-emoji.e3{animation-delay:.3s;}
+@keyframes dtok-hop{0%,100%{transform:translateY(0) rotate(-5deg);}35%{transform:translateY(-9px) rotate(2deg) scale(1.1);}65%{transform:translateY(0) rotate(5deg);}}
+.dtok-load-spark{position:absolute;font-size:11px;color:var(--dk-accent);animation:dtok-twinkle 1.4s ease-in-out infinite;}
+.dtok-load-spark.s1{left:-2px;top:-4px;}
+.dtok-load-spark.s2{right:-2px;top:2px;animation-delay:.6s;}
+@keyframes dtok-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0);}45%{opacity:1;transform:scale(1.2) rotate(90deg);}}
+.dtok-load-msg{flex:1 1 170px;min-width:0;display:flex;flex-direction:column;gap:2px;}
+.dtok-load-msg b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(90deg,var(--dsw-alias-label-primary),var(--dk-accent),var(--dsw-alias-label-primary));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:dtok-shine 2.6s linear infinite,dtok-msg-in .32s ease;}
+@keyframes dtok-shine{0%{background-position:130% 0;}100%{background-position:-130% 0;}}
+@keyframes dtok-msg-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
+.dtok-load-sub{font-size:11px;color:var(--dsw-alias-label-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.dtok-load-sub.wait{color:var(--dk-warn);}
+.dtok-load-track{position:relative;flex:0 1 140px;min-width:88px;height:6px;border-radius:999px;background:rgb(127 127 127 / .22);overflow:hidden;}
+.dtok-load-fill{position:absolute;top:0;bottom:0;width:38%;border-radius:999px;background:linear-gradient(90deg,transparent,var(--dk-accent),transparent);animation:dtok-sweep 1.15s cubic-bezier(.45,.05,.55,.95) infinite;}
+@keyframes dtok-sweep{0%{transform:translateX(-115%);}100%{transform:translateX(380%);}}
+.dtok-cards.dtok-pop .dtok-card{animation:dtok-card-in .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i,0) * 45ms);}
+@keyframes dtok-card-in{from{opacity:0;transform:translateY(7px) scale(.96);}to{opacity:1;transform:none;}}
+.dtok-updated{font-size:11px;color:var(--dsw-alias-state-success-primary,#4ade80);animation:dtok-updated 2.4s ease forwards;}
+@keyframes dtok-updated{0%{opacity:0;transform:translateY(-3px) scale(.85);}12%{opacity:1;transform:none;}70%{opacity:1;}100%{opacity:0;}}
+@media (prefers-reduced-motion:reduce){
+.dtok-load-emoji,.dtok-load-spark,.dtok-load-fill,.dtok-load-msg b,.dtok-btn.loading::after,.dtok-spin,.dtok-loading,.dtok-cards.dtok-pop .dtok-card{animation:none !important;}
+.dtok-dots i{animation:none !important;opacity:1;}
+.dtok-load-emoji{transform:none;}
+.dtok-body-inner.busy{opacity:.75;}
+.dtok-btn.primary:not([disabled]):active{transform:none;}
+}
 /* ---- \u5355\u4EF7\u8BBE\u7F6E\uFF08\u5B50\u5F39\u7A97\uFF09 ---- */
 .dtok-pm-backdrop{position:fixed;inset:0;z-index:2100;background:rgba(15,17,21,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
 .dtok-pm{box-sizing:border-box;width:min(980px,calc(100vw - 32px));height:min(760px,calc(100vh - 32px));display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2,#1c212b);color:var(--dsw-alias-label-primary);box-shadow:0 20px 64px rgb(0 0 0 / .4);overflow:hidden;}
@@ -2457,6 +2771,35 @@ var css = `
 .dtok-src{font-size:11px;color:var(--dsw-alias-label-tertiary,#94a3b8);}
 .dtok-src.custom{color:var(--dsw-alias-state-success-primary,#4ade80);}
 .dtok-src.fallback{color:var(--dk-warn);}
+/* ---- \u56FE\u8868\u7EDF\u8BA1\uFF08\u7EAF CSS/SVG\uFF09 ---- */
+.dtok-charts{display:flex;flex-direction:column;gap:10px;min-width:0;}
+.dtok-chart-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 10px;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1);}
+.dtok-chart-toolbar-label{font-size:12px;color:var(--dsw-alias-label-secondary);flex:none;}
+.dtok-chart-toolbar-note{font-size:11px;color:var(--dsw-alias-label-tertiary,#94a3b8);margin-left:auto;}
+.dtok-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px;}
+.dtok-chart-card{border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1);padding:10px 12px;min-width:0;display:flex;flex-direction:column;gap:8px;}
+.dtok-chart-title{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
+.dtok-chart-sub{font-size:11px;font-weight:400;color:var(--dsw-alias-label-secondary);}
+.dtok-chart-empty{text-align:center;color:var(--dsw-alias-label-secondary);padding:28px 0;font-size:12px;}
+.dtok-donut-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
+.dtok-donut{width:150px;height:150px;flex:none;}
+.dtok-donut-v{font-size:6.5px;font-weight:700;fill:var(--dsw-alias-label-primary);}
+.dtok-donut-l{font-size:3.6px;fill:var(--dsw-alias-label-secondary);}
+.dtok-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;max-height:170px;overflow:auto;}
+.dtok-legend-row{display:flex;align-items:center;gap:6px;font-size:11px;min-width:0;}
+.dtok-dot{width:8px;height:8px;border-radius:50%;flex:none;}
+.dtok-legend-k{color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
+.dtok-legend-v{color:var(--dsw-alias-label-secondary);margin-left:auto;flex:none;}
+.dtok-hbars{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;}
+.dtok-hbar-row{display:flex;align-items:center;gap:8px;font-size:11px;min-width:0;}
+.dtok-hbar-k{flex:0 1 34%;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.dtok-hbar-track{flex:1;height:12px;border-radius:4px;background:rgb(127 127 127 / .16);overflow:hidden;min-width:40px;}
+.dtok-hbar-fill{display:block;height:100%;border-radius:4px;transition:width .3s ease;}
+.dtok-hbar-v{flex:none;color:var(--dsw-alias-label-secondary);min-width:52px;text-align:right;}
+.dtok-hours{display:flex;align-items:flex-end;gap:3px;height:130px;padding-top:4px;}
+.dtok-hour-col{flex:1;display:flex;align-items:flex-end;height:100%;min-width:0;}
+.dtok-hour-bar{display:block;width:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--dk-accent),rgb(127 127 127 / .25));min-height:2px;transition:height .3s ease;}
+.dtok-hour-col:hover .dtok-hour-bar{filter:brightness(1.3);}
 `;
 function Detail({ rec, onClose, rate }) {
   const st = statusInfo(rec);
@@ -2821,6 +3164,39 @@ function PricingEditor({ onClose, onSaved, embedded }) {
     ] })
   ] });
 }
+var LOAD_MSGS = [
+  "\u6B63\u5728\u7FFB\u5F00\u8D26\u672C",
+  "\u6B63\u5728\u4E00\u679A\u4E00\u679A\u6570 Token",
+  "\u6B63\u5728\u7ED9\u6BCF\u6761\u8C03\u7528\u8D34\u4EF7\u7B7E",
+  "\u6B63\u5728\u6838\u5BF9\u7F13\u5B58\u547D\u4E2D\u7387",
+  "\u6B63\u5728\u628A\u5355\u4EF7\u4E58\u8FDB\u6BCF\u4E00\u884C",
+  "\u6B63\u5728\u628A\u8868\u683C\u7801\u6574\u9F50"
+];
+function LoadingBanner() {
+  const [tick, setTick] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
+    const timer = setInterval(() => setTick((t) => t + 1), 1300);
+    return () => clearInterval(timer);
+  }, []);
+  const long = tick >= 4;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-loading", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dtok-load-scene", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-load-spark s1", children: "\u2726" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-load-emoji e1", children: "\u{1F9EE}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-load-emoji e2", children: "\u{1F4D2}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-load-emoji e3", children: "\u{1F50D}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-load-spark s2", children: "\u2726" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dtok-load-msg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("b", { children: [
+        LOAD_MSGS[tick % LOAD_MSGS.length],
+        "\u2026"
+      ] }, tick),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-load-sub" + (long ? " wait" : ""), children: long ? "\u6570\u636E\u8F83\u591A\uFF0C\u518D\u7B49\u4E00\u5C0F\u4F1A\u513F\uFF0C\u6B63\u5728\u5168\u529B\u6E05\u70B9\uFF5E" : "\u6B63\u5728\u6309\u5F53\u524D\u6761\u4EF6\u91CD\u65B0\u7EDF\u8BA1\uFF0C\u901A\u5E38\u51E0\u79D2\u5185\u5B8C\u6210" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-load-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-load-fill" }) })
+  ] });
+}
 function TokenLogView(props) {
   const navSession = props && props.params && props.params.sessionId ? props.params.sessionId : null;
   const navAt = props && props.params && props.params.navAt ? props.params.navAt : 0;
@@ -2841,6 +3217,20 @@ function TokenLogView(props) {
   const [page, setPage] = (0, import_react2.useState)(0);
   const [detailRec, setDetailRec] = (0, import_react2.useState)(null);
   const [showPricing, setShowPricing] = (0, import_react2.useState)(() => !!(props && props.params && props.params.openPricing));
+  const [tab, setTab] = (0, import_react2.useState)(() => props && props.params && props.params.charts ? "charts" : "detail");
+  const [fetchedAt, setFetchedAt] = (0, import_react2.useState)(0);
+  const [justUpdated, setJustUpdated] = (0, import_react2.useState)(false);
+  const wasLoadingRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (wasLoadingRef.current && !loading && !err) setFetchedAt(Date.now());
+    wasLoadingRef.current = loading;
+  }, [loading, err]);
+  (0, import_react2.useEffect)(() => {
+    if (!fetchedAt) return;
+    setJustUpdated(true);
+    const timer = setTimeout(() => setJustUpdated(false), 2400);
+    return () => clearTimeout(timer);
+  }, [fetchedAt]);
   const pageSize = 100;
   (0, import_react2.useEffect)(() => {
     saveFilters({ fromStr, toStr, provider, model, status, effort, sessionId, dim });
@@ -2906,6 +3296,7 @@ function TokenLogView(props) {
       setPage(0);
     }).catch((e) => setErr(String(e && e.message || e))).finally(() => setLoading(false));
   }, [navAt]);
+  const rateCny = data && data.rateUsdCny || 7.2;
   const resetFilters = (0, import_react2.useCallback)(() => {
     setFromStr("");
     setToStr("");
@@ -2924,7 +3315,8 @@ function TokenLogView(props) {
   }, []);
   const exportCsv = (0, import_react2.useCallback)(() => {
     rpcCall("export", buildQ(false)).then((d) => {
-      const blob = new Blob([d.csv], { type: "text/csv;charset=utf-8" });
+      const csv = d && Array.isArray(d.rows) ? buildExportCsv(d.rows, d && d.rateUsdCny || rateCny) : String(d && d.csv || "");
+      const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" });
       const url = URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
@@ -2932,7 +3324,7 @@ function TokenLogView(props) {
       a.click();
       URL.revokeObjectURL(url);
     }).catch((e) => setErr(String(e && e.message || e)));
-  }, [buildQ]);
+  }, [buildQ, rateCny]);
   (0, import_react2.useEffect)(() => {
     const timer = setInterval(() => {
       rpcCall("query", buildQ(true)).then((d) => {
@@ -2970,7 +3362,6 @@ function TokenLogView(props) {
   const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize));
   const pageSafe = Math.min(page, pageCount - 1);
   const pageRows = sorted.slice(pageSafe * pageSize, (pageSafe + 1) * pageSize);
-  const rateCny = data && data.rateUsdCny || 7.2;
   const cards = totals ? [
     { v: fmtNum(totals.calls), l: "\u8C03\u7528\u6B21\u6570" },
     { v: fmtCompact(totals.totalTokens), l: "\u603B Token" },
@@ -3034,86 +3425,108 @@ function TokenLogView(props) {
     "\u9519\u8BEF: ",
     err
   ] }, "err"));
-  if (cards.length) bodyNodes.push(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-cards", children: cards.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-card", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "v", children: c.v }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "l", children: c.l })
-    ] }, c.l)) }, "cards")
-  );
-  if (summaryRows.length) bodyNodes.push(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-section-title", children: [
-      "\u7EDF\u8BA1\u5206\u7EC4: ",
-      dim || "\u65E0",
-      " (",
-      summaryRows.length,
-      " \u7EC4)"
-    ] }, "sum"),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "dtok-table", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u7EF4\u5EA6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8C03\u7528" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8F93\u5165(\u547D\u4E2D)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8F93\u5165(\u672A\u547D\u4E2D)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u547D\u4E2D\u7387" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8F93\u51FA" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u603BToken" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u91D1\u989D\uFF08\u4EBA\u6C11\u5E01\uFF09" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8017\u65F6" })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: summaryRows })
-    ] }) }, "sumtab")
-  );
-  bodyNodes.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-section-title", children: "\u6309\u7EF4\u5EA6\u7EDF\u8BA1" }, "dimtitle"));
   bodyNodes.push(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-filter", style: { padding: "4px 0 0", border: "none", background: "transparent" }, children: ["", "provider", "model", "status", "effort"].map((d) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn" + (dim === d ? " primary" : ""), onClick: () => {
-      setDim(d);
-      runQuery(d);
-    }, children: d === "" ? "\u65E0\u5206\u7EC4" : d }, d)) }, "dimrow")
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-filter", style: { padding: "2px 0 0", border: "none", background: "transparent", gap: 4 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn" + (tab === "detail" ? " primary" : ""), onClick: () => setTab("detail"), children: "\u660E\u7EC6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn" + (tab === "charts" ? " primary" : ""), onClick: () => setTab("charts"), children: "\u56FE\u8868\u7EDF\u8BA1" })
+    ] }, "tabs")
   );
-  bodyNodes.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-section-title", children: "\u8C03\u7528\u660E\u7EC6" }, "dettitle"));
-  if (sorted.length === 0) {
-    bodyNodes.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-empty", children: loading ? "\u52A0\u8F7D\u4E2D\u2026" : "\u65E0\u5339\u914D\u8BB0\u5F55" }, "empty"));
-  } else {
-    const pager = (key, cls) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-pager " + cls, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn", disabled: pageSafe <= 0, onClick: () => setPage(pageSafe - 1), children: "\u4E0A\u4E00\u9875" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-        "\u7B2C ",
-        pageSafe + 1,
-        " / ",
-        pageCount,
-        " \u9875 \xB7 \u5171 ",
-        sorted.length,
-        " \u6761"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn", disabled: pageSafe >= pageCount - 1, onClick: () => setPage(pageSafe + 1), children: "\u4E0B\u4E00\u9875" })
-    ] }, key);
-    bodyNodes.push(pager("pager-top", "top"));
+  if (tab === "charts") {
     bodyNodes.push(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartsPanel, { records, rate: rateCny }, "charts-" + fetchedAt)
+    );
+  } else {
+    if (cards.length) bodyNodes.push(
+      // key 带 fetchedAt：每次「手动查询 / 首次加载」拿到新数据时重建一次，KPI 卡重播回弹动画
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-cards" + (fetchedAt ? " dtok-pop" : ""), children: cards.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-card", style: { "--i": String(i) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "v", children: c.v }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "l", children: c.l })
+      ] }, c.l)) }, "cards-" + fetchedAt)
+    );
+    if (summaryRows.length) bodyNodes.push(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-section-title", children: [
+        "\u7EDF\u8BA1\u5206\u7EC4: ",
+        dim || "\u65E0",
+        " (",
+        summaryRows.length,
+        " \u7EC4)"
+      ] }, "sum"),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "dtok-table", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-          sortTh("\u65F6\u95F4", "time"),
-          sortTh("\u4F1A\u8BDDID", "sessionId"),
-          sortTh("\u63D0\u4F9B\u5546", "provider"),
-          sortTh("\u6A21\u578B", "model"),
-          sortTh("\u8F93\u5165(\u547D\u4E2D)", "cacheReadTokens"),
-          sortTh("\u8F93\u5165(\u672A\u547D\u4E2D)", "inputTokens"),
-          sortTh("\u547D\u4E2D%", "cacheHitPercent"),
-          sortTh("\u8F93\u51FA", "outputTokens"),
-          sortTh("\u63A8\u7406", "reasoningTokens"),
-          sortTh("\u603B\u989D", "totalTokens"),
-          sortTh("\u91D1\u989D\uFF08\u4EBA\u6C11\u5E01\uFF09", "cost"),
-          sortTh("\u5F3A\u5EA6", "effort"),
-          sortTh("\u72B6\u6001", "status"),
-          sortTh("\u8017\u65F6", "llmMs")
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u7EF4\u5EA6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8C03\u7528" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8F93\u5165(\u547D\u4E2D)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8F93\u5165(\u672A\u547D\u4E2D)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u547D\u4E2D\u7387" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8F93\u51FA" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u603BToken" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u91D1\u989D\uFF08\u4EBA\u6C11\u5E01\uFF09" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8017\u65F6" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: detailRows })
-      ] }) }, "detail")
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: summaryRows })
+      ] }) }, "sumtab")
     );
-    bodyNodes.push(pager("pager-bottom", "bottom"));
+    bodyNodes.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-section-title", children: "\u6309\u7EF4\u5EA6\u7EDF\u8BA1" }, "dimtitle"));
+    bodyNodes.push(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-filter", style: { padding: "4px 0 0", border: "none", background: "transparent" }, children: ["", "provider", "model", "status", "effort"].map((d) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn" + (dim === d ? " primary" : ""), onClick: () => {
+        setDim(d);
+        runQuery(d);
+      }, children: d === "" ? "\u65E0\u5206\u7EC4" : d }, d)) }, "dimrow")
+    );
+    bodyNodes.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-section-title", children: "\u8C03\u7528\u660E\u7EC6" }, "dettitle"));
+    if (sorted.length === 0) {
+      bodyNodes.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-empty", children: loading ? "\u52A0\u8F7D\u4E2D\u2026" : "\u65E0\u5339\u914D\u8BB0\u5F55" }, "empty"));
+    } else {
+      const pager = (key, cls) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-pager " + cls, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn", disabled: pageSafe <= 0, onClick: () => setPage(pageSafe - 1), children: "\u4E0A\u4E00\u9875" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          "\u7B2C ",
+          pageSafe + 1,
+          " / ",
+          pageCount,
+          " \u9875 \xB7 \u5171 ",
+          sorted.length,
+          " \u6761"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn", disabled: pageSafe >= pageCount - 1, onClick: () => setPage(pageSafe + 1), children: "\u4E0B\u4E00\u9875" })
+      ] }, key);
+      bodyNodes.push(pager("pager-top", "top"));
+      bodyNodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "dtok-table", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+            sortTh("\u65F6\u95F4", "time"),
+            sortTh("\u4F1A\u8BDDID", "sessionId"),
+            sortTh("\u63D0\u4F9B\u5546", "provider"),
+            sortTh("\u6A21\u578B", "model"),
+            sortTh("\u8F93\u5165(\u547D\u4E2D)", "cacheReadTokens"),
+            sortTh("\u8F93\u5165(\u672A\u547D\u4E2D)", "inputTokens"),
+            sortTh("\u547D\u4E2D%", "cacheHitPercent"),
+            sortTh("\u8F93\u51FA", "outputTokens"),
+            sortTh("\u63A8\u7406", "reasoningTokens"),
+            sortTh("\u603B\u989D", "totalTokens"),
+            sortTh("\u91D1\u989D\uFF08\u4EBA\u6C11\u5E01\uFF09", "cost"),
+            sortTh("\u5F3A\u5EA6", "effort"),
+            sortTh("\u72B6\u6001", "status"),
+            sortTh("\u8017\u65F6", "llmMs")
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: detailRows })
+        ] }) }, "detail")
+      );
+      bodyNodes.push(pager("pager-bottom", "bottom"));
+    }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-root", onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-status", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "count", children: loading ? "\u52A0\u8F7D\u4E2D\u2026" : data ? data.counts.matching + " / " + data.counts.total + " \u6761" : "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "count", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dtok-busy", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-spin inline", "aria-hidden": "true" }),
+        "\u52A0\u8F7D\u4E2D",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dtok-dots", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { children: "." }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { children: "." }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { children: "." })
+        ] })
+      ] }) : data ? data.counts.matching + " / " + data.counts.total + " \u6761" : "" }),
+      !loading && justUpdated && !err ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-updated", children: "\u2713 \u6570\u636E\u5DF2\u66F4\u65B0" }, fetchedAt) : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u5168\u5C4F\u8BF7\u7528\u9762\u677F\u53F3\u4E0A\u89D2\u300C\u6700\u5927\u5316\u300D\uFF1B\u9762\u677F\u6253\u5F00\u671F\u95F4\u6BCF 5 \u79D2\u81EA\u52A8\u5237\u65B0" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-filter", children: [
@@ -3149,7 +3562,10 @@ function TokenLogView(props) {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\u5168\u90E8" }),
         opts(data && data.efforts)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn primary", onClick: runQuery, children: "\u67E5\u8BE2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "dtok-btn primary" + (loading ? " loading" : ""), disabled: loading, title: "\u6309\u5F53\u524D\u6761\u4EF6\u67E5\u8BE2", onClick: () => runQuery(), children: [
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dtok-spin", "aria-hidden": "true" }) : null,
+        loading ? "\u67E5\u8BE2\u4E2D\u2026" : "\u67E5\u8BE2"
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn", onClick: resetFilters, children: "\u91CD\u7F6E" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn", onClick: exportCsv, children: "\u5BFC\u51FA CSV" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "dtok-btn" + (showPricing ? " primary" : ""), onClick: () => setShowPricing(true), title: "\u914D\u7F6E\u5404\u6A21\u578B\u5355\u4EF7\uFF0C\u8D39\u7528\u6309\u81EA\u586B\u5355\u4EF7\u8BA1\u7B97", children: "\u5355\u4EF7\u8BBE\u7F6E" })
@@ -3161,7 +3577,10 @@ function TokenLogView(props) {
       " \xB7 \u5B98\u7F51\u81EA\u52A8\u540C\u6B65\uFF1A" + (data.pricingInfo.fetchOfficial ? "\u5F00" : "\u5173"),
       data.pricingInfo.sources && data.pricingInfo.sources.length ? " \xB7 \u672C\u9875\u6D89\u53CA\u6765\u6E90\uFF1A" + data.pricingInfo.sources.join("/") : ""
     ] }) : null }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-body", children: bodyNodes }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dtok-body", children: [
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingBanner, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dtok-body-inner" + (loading ? " busy" : ""), children: bodyNodes })
+    ] }),
     detailRec ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Detail, { rec: detailRec, onClose: () => setDetailRec(null), rate: rateCny }) : null
   ] });
 }
@@ -10752,10 +11171,10 @@ function MobileRelayView() {
 function MobileRelayOverlay() {
   (0, import_react21.useEffect)(() => {
     if (typeof window === "undefined" || typeof document === "undefined") return void 0;
-    if (window.__dshDockMobileDrawer) return void 0;
+    const hostPresent = !!(window.__dshDockMobileDrawer && document.querySelector(".dsh-mobile-drawer-btn"));
     const mq = window.matchMedia ? window.matchMedia("(max-width:700px)") : null;
     if (!mq) return void 0;
-    window.__dshDockMobileDrawer = "client";
+    if (!hostPresent) window.__dshDockMobileDrawer = "client";
     const narrow = () => mq.matches;
     const frameEl = () => document.querySelector('[class$="frame"]');
     const sidebarCollapsed = () => {
@@ -10777,17 +11196,72 @@ function MobileRelayOverlay() {
       const c = d.querySelector('button[aria-label="\u5173\u95ED\u8BE6\u60C5"]');
       if (c) c.click();
     };
-    const fab = document.createElement("button");
-    fab.type = "button";
-    fab.className = "dsh-mobile-drawer-btn";
-    fab.setAttribute("aria-label", "\u6253\u5F00\u4F1A\u8BDD\u5217\u8868");
-    fab.innerHTML = '<svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg>';
-    fab.addEventListener("click", expand);
-    const scrim = document.createElement("div");
-    scrim.className = "dsh-mobile-scrim";
-    document.body.appendChild(fab);
-    document.body.appendChild(scrim);
+    let fab = null;
+    let scrim = null;
+    if (!hostPresent) {
+      fab = document.createElement("button");
+      fab.type = "button";
+      fab.className = "dsh-mobile-drawer-btn";
+      fab.setAttribute("aria-label", "\u6253\u5F00\u4F1A\u8BDD\u5217\u8868");
+      fab.innerHTML = '<svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg>';
+      fab.addEventListener("click", expand);
+      scrim = document.createElement("div");
+      scrim.className = "dsh-mobile-scrim";
+      document.body.appendChild(fab);
+      document.body.appendChild(scrim);
+    }
+    const tabbar = document.createElement("nav");
+    tabbar.className = "dsh-mobile-tabbar";
+    tabbar.setAttribute("aria-label", "\u5E95\u90E8\u5BFC\u822A");
+    const tabDefs = [
+      {
+        id: "sessions",
+        label: "\u4F1A\u8BDD",
+        icon: '<svg viewBox="0 0 24 24"><path d="M21 12a8 8 0 0 1-8 8H5l-2 2V12a8 8 0 0 1 8-8h2a8 8 0 0 1 8 8z"/></svg>',
+        act: () => expand()
+      },
+      {
+        id: "dock",
+        label: "\u529F\u80FD\u575E",
+        icon: '<svg viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg>',
+        act: () => {
+          if (panelNav.open) setPanelOpen(false);
+          else openPanel("home");
+        }
+      },
+      {
+        id: "settings",
+        label: "\u8BBE\u7F6E",
+        icon: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 9 19.4a1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.55V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1 1.51 1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.23.6.86 1 1.51 1H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1z"/></svg>',
+        act: () => {
+          const b = [...document.querySelectorAll("button")].find((x) => (x.getAttribute("aria-label") || "") === "\u8BBE\u7F6E" || (x.textContent || "").trim() === "\u8BBE\u7F6E");
+          if (b) b.click();
+        }
+      }
+    ];
+    const tabButtons = tabDefs.map((def) => {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.className = "dsh-mobile-tab";
+      b.dataset.tab = def.id;
+      b.innerHTML = def.icon + "<span>" + def.label + "</span>";
+      b.addEventListener("click", () => def.act());
+      tabbar.appendChild(b);
+      return b;
+    });
+    document.body.appendChild(tabbar);
+    const syncTabs = () => {
+      const expanded = !sidebarCollapsed();
+      const settingsOpen = dialogOpen();
+      for (const b of tabButtons) {
+        const id = b.dataset.tab;
+        const on = id === "sessions" && expanded || id === "dock" && panelNav.open || id === "settings" && settingsOpen;
+        b.classList.toggle("on", on);
+      }
+    };
+    const unsubPanel = subscribePanel(syncTabs);
     const place = () => {
+      if (!fab) return;
       const vh = window.innerHeight;
       let top = null;
       const g = document.querySelector(".dgfab");
@@ -10805,10 +11279,14 @@ function MobileRelayOverlay() {
     const sync = () => {
       const on = narrow() && !!frameEl() && !dialogOpen();
       const collapsed = sidebarCollapsed();
-      const showFab = on && collapsed;
-      fab.style.display = showFab ? "" : "none";
-      if (showFab) place();
-      scrim.style.display = on && !collapsed ? "" : "none";
+      if (fab) {
+        const showFab = on && collapsed && !panelNav.open;
+        fab.style.display = showFab ? "" : "none";
+        if (showFab) place();
+      }
+      if (scrim) scrim.style.display = on && !collapsed ? "" : "none";
+      tabbar.style.display = narrow() && !!frameEl() && !panelNav.open ? "" : "none";
+      syncTabs();
     };
     sync();
     const observer = typeof MutationObserver !== "undefined" ? new MutationObserver(sync) : null;
@@ -10822,7 +11300,7 @@ function MobileRelayOverlay() {
       if (!narrow()) return;
       const t = e.target;
       if (!t || !t.closest) return;
-      if (t.closest(".dsh-mobile-drawer-btn")) return;
+      if (t.closest(".dsh-mobile-drawer-btn") || t.closest(".dsh-mobile-tabbar")) return;
       const expanded = !!document.querySelector('button[aria-label="\u6536\u8D77\u4FA7\u8FB9\u680F"],button[aria-label="Collapse sidebar"]');
       const col = document.querySelector('[class*="sidebarCol"]');
       const inSidebar = col && col.contains(t);
@@ -10840,16 +11318,18 @@ function MobileRelayOverlay() {
       if (t.closest('[role="dialog"],[class*="dockm"],[class*="dgfab"],[class*="dgwin"],[class*="dgame"],[class*="detailsCol"]')) return;
       collapse();
     };
-    document.addEventListener("click", onClick, true);
+    if (!hostPresent) document.addEventListener("click", onClick, true);
     return () => {
-      document.removeEventListener("click", onClick, true);
+      if (!hostPresent) document.removeEventListener("click", onClick, true);
       if (observer) observer.disconnect();
       clearInterval(timer);
+      unsubPanel();
       if (mq.removeEventListener) mq.removeEventListener("change", onMq);
       else if (mq.removeListener) mq.removeListener(onMq);
       window.removeEventListener("resize", place);
-      fab.remove();
-      scrim.remove();
+      if (fab) fab.remove();
+      if (scrim) scrim.remove();
+      tabbar.remove();
       if (window.__dshDockMobileDrawer === "client") delete window.__dshDockMobileDrawer;
     };
   }, []);
@@ -10876,14 +11356,32 @@ var feature10 = {
 .dmr{--dmr-accent:var(--dk-accent,#2f6fed);--dmr-accent-soft:color-mix(in srgb,var(--dmr-accent) 13%,transparent);display:flex;flex-direction:column;gap:16px;max-width:720px;color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5}.dmr h3,.dmr h4,.dmr p{margin:0}.dmr h3{font-size:17px;line-height:1.25;letter-spacing:-.01em}.dmr h4{font-size:13px}.dmr-hero,.dmr-status-head{display:flex;align-items:flex-start;gap:12px}.dmr-hero>div,.dmr-status-head>div{min-width:0;display:flex;flex-direction:column;gap:4px}.dmr-hero p,.dmr-status-head p,.dmr-field small,.dmr-share small,.dmr-overview-card small,.dmr-task small,.dmr-note p{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.55}.dmr-hero-icon{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:14px;background:var(--dmr-accent-soft);color:var(--dmr-accent);border:1px solid color-mix(in srgb,var(--dmr-accent) 35%,var(--dsw-alias-border-l1))}.dmr-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.dmr-steps li{display:flex;gap:9px;padding:11px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);border-radius:12px}.dmr-steps li>span{width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;font-size:11px;font-weight:700;color:var(--dmr-accent);background:var(--dmr-accent-soft)}.dmr-steps div{display:flex;flex-direction:column;gap:3px;min-width:0}.dmr-steps strong{font-size:12px}.dmr-steps small{font-size:11px;color:var(--dsw-alias-label-secondary);line-height:1.45}.dmr-field{display:flex;flex-direction:column;gap:6px;font-weight:600}.dmr-field input,.dmr-field select,.dmr-note textarea{box-sizing:border-box;width:100%;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);border-radius:10px;padding:10px 12px;min-height:44px;font:inherit;outline:none;transition:border-color .18s ease,box-shadow .18s ease}.dmr-field input:focus,.dmr-field select:focus,.dmr-note textarea:focus{border-color:var(--dmr-accent);box-shadow:0 0 0 3px var(--dmr-accent-soft)}.dmr-field small{font-weight:400}.dmr-network-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(150px,.6fr);gap:12px}.dmr-security{padding:12px 13px;border:1px solid color-mix(in srgb,var(--dk-warn) 48%,var(--dsw-alias-border-l1));border-radius:12px;background:color-mix(in srgb,var(--dk-warn) 9%,transparent)}.dmr-security strong{display:block;margin-bottom:4px;color:var(--dk-warn);font-size:12px}.dmr-security p{font-size:12px;color:var(--dsw-alias-label-secondary);line-height:1.55}.dmr-primary,.dmr-secondary,.dmr-text-button,.dmr-icon-button{font:inherit;touch-action:manipulation;cursor:pointer;transition:transform .15s ease,background .18s ease,border-color .18s ease,opacity .18s ease}.dmr-primary,.dmr-secondary{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:9px 13px;font-weight:600}.dmr-primary{align-self:flex-start;border:1px solid var(--dmr-accent);background:var(--dmr-accent);color:#fff}.dmr-primary:hover{filter:brightness(1.05)}.dmr-secondary{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary)}.dmr-secondary:hover{border-color:var(--dmr-accent);background:var(--dmr-accent-soft)}.dmr-primary:active,.dmr-secondary:active,.dmr-icon-button:active{transform:scale(.98)}.dmr-primary:disabled,.dmr-secondary:disabled,.dmr-text-button:disabled,.dmr-icon-button:disabled{cursor:not-allowed;opacity:.5}.dmr-message{display:flex;align-items:flex-start;gap:7px;padding:10px 12px;border-radius:10px;font-size:12px}.dmr-message.success{color:var(--dsw-alias-state-success-primary);background:color-mix(in srgb,var(--dsw-alias-state-success-primary) 10%,transparent)}.dmr-message.error{color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent)}.dmr-status-head{justify-content:space-between}.dmr-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--dmr-accent)}.dmr-eyebrow i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px var(--dmr-accent-soft)}.dmr-icon-button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:transparent;color:var(--dsw-alias-label-secondary)}.dmr-icon-button:hover{color:var(--dsw-alias-state-error-primary);border-color:currentColor}.dmr-share{display:flex;flex-direction:column;gap:9px;padding:13px;border:1px solid color-mix(in srgb,var(--dmr-accent) 32%,var(--dsw-alias-border-l1));border-radius:13px;background:var(--dmr-accent-soft)}.dmr-share-layout{display:grid;grid-template-columns:196px minmax(0,1fr);gap:16px;align-items:center}.dmr-qr-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px;border-radius:12px;background:#fff;color:#111827;text-align:center}.dmr-qr-card img{display:block;width:176px;height:176px;max-width:100%;object-fit:contain}.dmr-qr-card strong{font-size:12px}.dmr-qr-card small{color:#4b5563;font-size:10px}.dmr-qr-loading{display:grid;place-items:center;width:176px;height:176px;color:#64748b;font-size:12px}.dmr-share-detail{min-width:0;display:flex;flex-direction:column;gap:10px}.dmr-share-detail>div:first-child{display:flex;flex-direction:column;gap:4px}.dmr-link{padding:10px 11px;border-radius:8px;background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;color:var(--dsw-alias-label-secondary)}.dmr-share-actions{display:flex;gap:8px;flex-wrap:wrap}.dmr-share-actions .dmr-primary{align-self:auto}.dmr-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dmr-overview-card{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--dsw-alias-border-l1);border-radius:12px;background:var(--dsw-alias-bg-layer-1)}.dmr-overview-card>span{font-size:11px;color:var(--dsw-alias-label-tertiary)}.dmr-overview-card strong{font-size:16px;letter-spacing:-.01em}.dmr-section{display:flex;flex-direction:column;gap:9px}.dmr-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dmr-section-head small{font-size:11px;color:var(--dsw-alias-label-tertiary)}.dmr-text-button{border:0;background:transparent;color:var(--dmr-accent);padding:8px;min-height:36px;font-weight:600}.dmr-task-list{display:flex;flex-direction:column;gap:8px}.dmr-task{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border:1px solid var(--dsw-alias-border-l1);border-radius:10px;background:var(--dsw-alias-bg-layer-1)}.dmr-task>div{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}.dmr-task strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dmr-phase{flex:none;border-radius:999px;padding:3px 8px;font-size:11px;background:var(--dmr-accent-soft);color:var(--dmr-accent)}.dmr-phase.write{color:var(--dsw-alias-state-success-primary)}.dmr-phase.code{color:var(--dk-warn)}.dmr-phase.search{color:#0d9488}.dmr-empty{padding:18px 12px;text-align:center;border:1px dashed var(--dsw-alias-border-l2);border-radius:10px;color:var(--dsw-alias-label-secondary);font-size:12px}.dmr-note{display:flex;flex-direction:column;gap:9px;padding-top:2px}.dmr-note blockquote{margin:0;padding:10px 12px;border-left:3px solid var(--dmr-accent);border-radius:0 9px 9px 0;background:var(--dmr-accent-soft);white-space:pre-wrap;font-size:12px}.dmr-note textarea{min-height:88px;resize:vertical;line-height:1.5}.dmr-note .dmr-secondary{align-self:flex-start}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width:680px){.dmr{gap:14px;font-size:14px}.dmr h3{font-size:18px}.dmr-steps{grid-template-columns:1fr;gap:8px}.dmr-steps li{padding:10px}.dmr-steps small,.dmr-hero p,.dmr-status-head p,.dmr-field small,.dmr-share small,.dmr-overview-card small,.dmr-task small,.dmr-note p{font-size:12px}.dmr-network-grid{grid-template-columns:1fr;gap:10px}.dmr-field input,.dmr-field select{font-size:16px}.dmr-primary,.dmr-secondary{width:100%;font-size:14px}.dmr-share-layout{grid-template-columns:1fr;gap:12px}.dmr-qr-card{width:min(240px,100%);margin:0 auto}.dmr-qr-card img,.dmr-qr-loading{width:210px;height:210px}.dmr-share-actions{flex-direction:column}.dmr-share-actions .dmr-primary{width:100%}.dmr-overview{gap:8px}.dmr-overview-card{padding:11px}.dmr-status-head{gap:8px}.dmr-link{font-size:11px}.dmr-note textarea{font-size:16px;min-height:104px}.dmr-note .dmr-secondary{align-self:stretch}.dmr-compact .dmr-hero-icon{width:40px;height:40px;border-radius:13px}}@media (prefers-reduced-motion:reduce){.dmr-primary,.dmr-secondary,.dmr-text-button,.dmr-icon-button,.dmr-field input,.dmr-field select,.dmr-note textarea{transition:none}}.dmr-lan{flex:none;margin-top:6px;padding-top:16px;border-top:1px solid var(--dsw-alias-border-l1)}.dmr-lan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dmr-lan-title{min-width:0;display:flex;flex-direction:column;gap:4px}.dmr-lan-title p{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.55}.dmr-lan-badge{flex:none;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700;border:1px solid var(--dsw-alias-border-l2);color:var(--dsw-alias-label-tertiary)}.dmr-lan-badge.on{border-color:color-mix(in srgb,var(--dmr-accent) 45%,transparent);background:var(--dmr-accent-soft);color:var(--dmr-accent)}.dmr-lan-active,.dmr-lan-idle{display:flex;flex-direction:column;gap:12px}.dmr-lan-active .dmr-share-detail small strong{color:var(--dsw-alias-state-error-primary)}.dmr-danger{border-color:color-mix(in srgb,var(--dsw-alias-state-error-primary) 45%,var(--dsw-alias-border-l2));color:var(--dsw-alias-state-error-primary)}.dmr-danger:hover{border-color:var(--dsw-alias-state-error-primary);background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 10%,transparent)}
 /* \u62BD\u5C49\u628A\u624B\uFF1A\u8D34\u5DE6\u8FB9\u7F18\uFF08\u540C\u8DA3\u5473\u6E38\u620F\u6D6E\u6807\u7684\u8FB9\u7F18\u5438\u9644\u8BED\u8A00\uFF09\uFF0Ctop \u7531 place() \u52A8\u6001\u8BBE\u5B9A\uFF1B
  * z \u5E8F 70 < \u906E\u7F69 75 < \u4FA7\u680F 80 < overlayLayer 90\uFF0C\u9762\u677F/\u5F39\u7A97\u6253\u5F00\u65F6\u81EA\u7136\u88AB\u76D6\u3002 */
-@media (max-width:700px){.dsh-mobile-drawer-btn{position:fixed;left:0;top:38vh;z-index:70;box-sizing:border-box;width:30px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--dsw-alias-border-l1,rgba(127,139,161,.35));border-left:none;border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--dsw-alias-bg-layer-2,#1c2230) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--dsw-alias-label-primary,#e6eaf2);box-shadow:4px 0 18px rgba(0,0,0,.28);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.dsh-mobile-drawer-btn:active{transform:scale(.94)}.dsh-mobile-drawer-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.dsh-mobile-scrim{position:fixed;inset:0;z-index:75;background:rgba(8,10,14,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);touch-action:none}}`,
+@media (max-width:700px){.dsh-mobile-drawer-btn{position:fixed;left:0;top:38vh;z-index:70;box-sizing:border-box;width:30px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--dsw-alias-border-l1,rgba(127,139,161,.35));border-left:none;border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--dsw-alias-bg-layer-2,#1c2230) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--dsw-alias-label-primary,#e6eaf2);box-shadow:4px 0 18px rgba(0,0,0,.28);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.dsh-mobile-drawer-btn:active{transform:scale(.94)}.dsh-mobile-drawer-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.dsh-mobile-scrim{position:fixed;inset:0;z-index:75;background:rgba(8,10,14,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);touch-action:none}
+/* ---- \u4EFF ZCode \u624B\u673A\u7AEF\uFF1A\u5E95\u90E8 Tab \u680F + \u8F93\u5165\u533A\u5438\u9644\u5E95\u90E8 ---- */
+.dsh-mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:65;display:flex;align-items:stretch;justify-content:space-around;padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--dsw-alias-bg-layer-2,#1c2230) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--dsw-alias-border-l1,rgba(127,139,161,.25));touch-action:manipulation}
+.dsh-mobile-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;padding:4px 0;border:0;background:transparent;color:var(--dsw-alias-label-tertiary,#8b95ab);font:600 11px/1.2 inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px}
+.dsh-mobile-tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
+.dsh-mobile-tab.on{color:var(--dsw-alias-label-primary,#e6eaf2)}
+.dsh-mobile-tab.on svg{color:var(--dk-accent,#4d9fff)}
+.dsh-mobile-tab:active{transform:scale(.94)}
+/* \u8F93\u5165\u533A\u5438\u9644\u5230 Tab \u680F\u4E0A\u65B9\uFF1A\u5BBF\u4E3B\u628A\u6B22\u8FCE\u5185\u5BB9 justify-content:center \u5782\u76F4\u5C45\u4E2D\uFF0C
+ * \u624B\u673A\u89C6\u53E3\u4E0B\u8F93\u5165\u5361\u7247\u60AC\u5728\u4E2D\u90E8\u3001\u4E0B\u65B9\u7559\u51FA\u5927\u7247\u7A7A\u767D\u3002\u6539\u4E3A flex-end \u8D34\u5E95\uFF0C\u5E76\u7ED9
+ * \u6EDA\u52A8\u4F53\u7559\u51FA Tab \u680F\u9AD8\u5EA6\u7684\u5185\u8FB9\u8DDD\uFF0C\u907F\u514D\u5185\u5BB9\u88AB Tab \u680F\u906E\u6321\u3002 */
+[class*="scrollBody"]{justify-content:flex-end !important;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important}
+[class*="scrollBody"]>[class*="composerSeat"]{padding-bottom:6px}
+/* \u6536\u8D77\u7684\u4FA7\u680F\u8F68\u9053\uFF08collapsed rail\uFF09\u5728\u7A84\u5C4F\u53EA\u5269 1px \u5360\u4F4D\uFF0C\u4F46\u8F68\u9053\u91CC\u7684\u6309\u94AE
+ * \u4ECD\u4F1A\u6EA2\u51FA\u8D34\u5728\u5DE6\u8FB9\u7F18\uFF08\u529F\u80FD\u575E/\u8FDB\u5316/\u8BBE\u7F6E\u4E09\u679A\u9732\u51FA\u534A\u8FB9\u7684\u5706\u94AE\uFF09\u3002\u9690\u85CF\u6574\u5217\uFF0C
+ * \u8FD9\u4E9B\u5165\u53E3\u5DF2\u7531\u5E95\u90E8 Tab \u680F\u63A5\u7BA1\uFF1B\u5C55\u5F00\u62BD\u5C49\uFF08z 80\uFF09\u4E0D\u53D7\u5F71\u54CD\u3002 */
+[class*="sidebarCol"]:has([class*="collapsed"]){visibility:hidden}
+/* \u62BD\u5C49\u628A\u624B\u4ECE\u5C4F\u5E55\u4E2D\u90E8\u632A\u5230 Tab \u680F\u4E0A\u65B9\u4E00\u70B9\uFF0C\u514D\u5F97\u5B64\u96F6\u96F6\u60AC\u5728\u534A\u7A7A */
+.dsh-mobile-drawer-btn{top:auto !important;bottom:calc(96px + env(safe-area-inset-bottom,0px))}}`,
   View: MobileRelayView,
   HomeStat: MobileRelayHomeStat,
   Overlay: MobileRelayOverlay
 };
 
 // src/client.jsx
-var DOCK_VERSION = "0.11.2";
+var DOCK_VERSION = "0.11.3";
 var BUILTIN_FEATURES = [feature, feature2, feature3, feature4, feature5, feature6, feature7, feature8, feature9, feature10];
 var PLANNED_FEATURES = [];
 var PLANNED_NOTES = {};