dsh-multi-router 0.5.8 → 0.6.0

package/lib/client.js

@@ -21,11 +21,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var client_exports = {};
 __export(client_exports, {
   AccountPool: () => AccountPool,
+  ApiServicePanel: () => ApiServicePanel,
   CheckinPanel: () => CheckinPanel,
   InitialSetup: () => InitialSetup,
+  ModelsPanel: () => ModelsPanel,
   PluginUpdatesPanel: () => PluginUpdatesPanel,
   RestartGuidance: () => RestartGuidance,
   RouterPage: () => RouterPage,
+  RoutesTable: () => RoutesTable,
+  SidebarUsage: () => SidebarUsage,
+  SidebarUsageCard: () => SidebarUsageCard,
   UpdateReminder: () => UpdateReminder,
   UsageDetails: () => UsageDetails,
   apply: () => apply,
@@ -42,7 +47,7 @@ module.exports = __toCommonJS(client_exports);
 var import_react = require("react");
 
 // package.json
-var version = "0.5.8";
+var version = "0.6.0";
 
 // src/client.jsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -113,12 +118,113 @@ var styles = `
 .mr .table-shell{padding:0;overflow:hidden}.mr .scroll>.table{min-width:760px}.mr .table{font-size:14px}.mr .table th{background:var(--mr-soft);font-size:12px;letter-spacing:.02em;font-weight:500;white-space:nowrap}.mr .table th,.mr .table td{padding:16px 20px;vertical-align:middle}.mr .table td:last-child{white-space:nowrap}.mr .table tbody tr:last-child td{border-bottom:0}.mr .table td small{display:block;font-size:12px;margin-top:3px}.mr .table td>strong{font-weight:600}.mr .table tr.selected{background:var(--mr-selected)}.mr .table tbody tr:hover{background:var(--mr-soft)}.mr .table .account-name{max-width:230px;overflow-wrap:anywhere}.mr .table .amount{font-size:20px;line-height:1.35;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}.mr .table .cell-actions{white-space:nowrap;text-align:right}.mr .table .account-check{min-width:44px;min-height:44px;justify-content:center;flex-shrink:0}.mr .table .account-cell{display:flex;gap:10px;align-items:center}.mr .table .account-cell .check{margin-left:-12px}.mr .table .account-cell input{accent-color:var(--mr-text)}.mr .table .row{flex-wrap:nowrap}.mr .section-title{margin-bottom:4px}.mr .toolbar{align-items:flex-end;gap:16px}.mr .search{max-width:280px;flex:1;min-width:160px}.mr .table-footer{padding:14px 20px;background:var(--mr-soft)}.mr .hint{font-size:13px;color:var(--mr-muted)}.mr details.help{border:0;padding:0}.mr details.help>div{padding:12px 0;max-width:76ch}.mr .plan-form{align-items:flex-end;padding:16px 0 0;border-top:1px solid var(--mr-border)}.mr .plan-form .filter{min-width:180px}.mr .steps{border:1px solid var(--mr-border);border-radius:10px;background:var(--mr-soft);padding:14px 16px}.mr .route-path span{background:var(--mr-soft);border-color:transparent;font-size:12px}.mr .route-card details{padding-top:10px}.mr .feedback{margin-bottom:16px}.mr .box .feedback{margin-bottom:0}.mr .scroll{max-width:100%}.mr .scroll:focus-visible{outline:2px solid var(--mr-accent);outline-offset:-3px}
 @media(max-width:850px){.mr .metrics{gap:10px}.mr nav{gap:0}.mr nav button{padding:12px 10px}}@media(max-width:600px){.mr h2{font-size:22px}.mr nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.mr nav button{padding:10px 4px;font-size:12px;white-space:nowrap}.mr .toolbar>.row{width:100%}.mr .toolbar .search{max-width:none}.mr .metric strong{font-size:24px}.mr .table th,.mr .table td{padding:14px 16px}.mr .filter{max-width:none}.mr .plan-form label{flex:1}.mr .box.table-shell{padding:0}}
 
+
+.mr .metrics{gap:0;border:1px solid var(--mr-border);border-radius:12px;overflow:hidden;background:var(--mr-card)}
+.mr .metrics .metric{border:0;border-radius:0;background:transparent;border-right:1px solid var(--mr-border);padding:16px 20px}.mr .metrics .metric:last-child{border-right:0}.mr .metric strong{font-size:25px;margin:6px 0}.mr .performance{gap:10px}.mr .performance .metrics{background:var(--mr-soft);border-color:transparent}.mr .performance .metric strong{font-size:21px}.mr .performance .metric{padding:12px 20px}.mr .performance h3{font-size:14px}.mr .refresh-control{font-size:12px;color:var(--mr-muted)}
+.mr .section-pad{padding:16px 20px}.mr .table-shell>.section-pad+.section-pad{padding-top:0}.mr .route-table td{max-width:300px}.mr .route-table .route-targets{max-width:300px;white-space:normal;overflow-wrap:anywhere}.mr .route-table small{max-width:320px}.mr .model-table td:first-child{width:38%}.mr .table .cell-actions{width:1%}.mr .install-plugin>div{padding-top:16px}.mr details.help.box{padding:18px 20px}.mr .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
+@media(max-width:600px){.mr .metrics .metric{padding:12px 14px}.mr .metrics .metric:nth-child(2){border-right:0}.mr .metrics .metric:nth-child(-n+2){border-bottom:1px solid var(--mr-border)}.mr .section-pad{padding:14px 16px}}
+
 @media(prefers-reduced-motion:reduce){.mr *{transition:none!important}}
 `;
 function apply(ctx) {
   reloadFromHost = () => requestPluginReload(ctx.get?.("remote"));
   ctx.slots.inject("plugins.bundle.config", () => ctx.slots.register({ name: "plugins.bundle.config", key: "dsh-multi-router" }, RouterPage));
   ctx.slots.inject("shell.overlay", () => ctx.slots.register({ name: "shell.overlay", id: "dsh-multi-router-updates" }, UpdateReminder));
+  ctx.slots.inject("sidebar.footer.action", () => ctx.slots.register({
+    name: "sidebar.footer.action",
+    id: "dsh-multi-router-usage",
+    order: 10,
+    inject: () => ({ open: () => {
+      const navigation = ctx.get?.("pluginNavigation");
+      if (!navigation?.openBundle) throw Error("\u8BF7\u5728\u63D2\u4EF6\u9875\u6253\u5F00 dsh-multi-router\uFF1B\u5F53\u524D DSH \u672A\u63D0\u4F9B\u8BE6\u60C5\u5BFC\u822A\u3002");
+      navigation.openBundle("dsh-multi-router");
+    } })
+  }, SidebarUsage));
+}
+var SUMMARY_EVENT = "dsh-multi-router-summary";
+var compactTokens = (n) => n >= 1e9 ? `${(n / 1e9).toFixed(1)}B` : n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}K` : fmt(n);
+function SidebarUsageCard({ data, wide = true, open, error }) {
+  const title = `${data.today}\uFF08\u5317\u4EAC\u65F6\u95F4\uFF09
+\u4ECA\u65E5 ${fmt(data.tokens)} Token \xB7 ${fmt(data.requests)} \u6B21\u8BF7\u6C42
+\u7D2F\u8BA1 ${fmt(data.totalTokens)} Token${data.unmetered ? `
+${fmt(data.unmetered)} \u6B21\u8C03\u7528\u672A\u8FD4\u56DE\u7528\u91CF` : ""}${error ? `
+${error}` : ""}
+\u70B9\u51FB\u6253\u5F00\u8D26\u53F7\u4E0E\u8DEF\u7531`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+    [class*="_footArea"] [class*="_footerActions"]:has(.mr-sidebar-usage){flex-direction:column}
+    .mr-sidebar-usage{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:48px;padding:7px 10px;border:1px solid var(--dsw-alias-border-l2,#444);border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary,#eee);font:inherit;text-align:left;cursor:pointer}
+    .mr-sidebar-usage:hover{background:var(--dsw-alias-bg-module-platform,#303036)}.mr-sidebar-usage:focus-visible{outline:2px solid var(--dsw-alias-state-active-primary,#3a71db);outline-offset:2px}
+    .mr-sidebar-usage svg{flex-shrink:0}.mr-sidebar-usage span{flex:1;min-width:0}.mr-sidebar-usage small{display:block;color:var(--dsw-alias-label-secondary,#aaa);font-size:10px;line-height:15px;white-space:nowrap}.mr-sidebar-usage strong{display:block;font-size:13px;font-weight:600;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap}.mr-sidebar-usage[data-wide=false]{width:36px;min-height:36px;padding:8px;justify-content:center}
+  ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "mr-sidebar-usage", "data-wide": wide, title, "aria-label": `Token \u7528\u91CF\u6982\u89C8\uFF0C\u4ECA\u65E5 ${fmt(data.tokens)}\uFF0C\u7D2F\u8BA1 ${fmt(data.totalTokens)}\uFF0C\u6253\u5F00\u63D2\u4EF6\u8BE6\u60C5`, onClick: open, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 4v16h17M8 16v-5m5 5V7m5 9v-7" }) }),
+      wide && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("small", { children: [
+            "\u4ECA\u65E5 Token",
+            error ? " \xB7 \u672A\u5237\u65B0" : ""
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: compactTokens(data.tokens) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: "\u7D2F\u8BA1 Token" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: compactTokens(data.totalTokens) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function SidebarUsage({ wide = true, open }) {
+  const [data, setData] = (0, import_react.useState)(null), [error, setError] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    let stopped = false, pending = false, again = false;
+    const abort = new AbortController();
+    async function poll(event) {
+      if (document.hidden) return;
+      if (pending) {
+        if (event?.type === SUMMARY_EVENT) again = true;
+        return;
+      }
+      pending = true;
+      try {
+        const next = await readManagementResponse(await fetch(`${ENDPOINT}/summary`, { cache: "no-store", signal: AbortSignal.any([abort.signal, AbortSignal.timeout(8e3)]) }));
+        if (!stopped) {
+          setData(next);
+          setError("");
+        }
+      } catch {
+        if (!stopped) setError("\u6682\u65F6\u65E0\u6CD5\u5237\u65B0\u672C\u673A\u7EDF\u8BA1");
+      } finally {
+        pending = false;
+        if (again && !stopped) {
+          again = false;
+          void poll();
+        }
+      }
+    }
+    void poll();
+    const timer = setInterval(() => {
+      void poll();
+    }, 6e4);
+    document.addEventListener("visibilitychange", poll);
+    window.addEventListener(SUMMARY_EVENT, poll);
+    return () => {
+      stopped = true;
+      abort.abort();
+      clearInterval(timer);
+      document.removeEventListener("visibilitychange", poll);
+      window.removeEventListener(SUMMARY_EVENT, poll);
+    };
+  }, []);
+  if (!data || data.enabled === false) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarUsageCard, { data, wide, error, open: () => {
+    try {
+      open();
+    } catch (e) {
+      setError(e.message);
+    }
+  } });
 }
 function Modal({ title, close, children, busy }) {
   const ref = (0, import_react.useRef)(null);
@@ -270,7 +376,7 @@ function RouterPage({ view = "page" }) {
       }).finally(() => {
         polling.current = false;
       });
-    }, 15e3);
+    }, 6e4);
     return () => {
       stopped = true;
       abort.abort();
@@ -281,7 +387,7 @@ function RouterPage({ view = "page" }) {
   (0, import_react.useEffect)(() => {
     if (data?.startup?.phase !== "discovering" && !["waiting", "reloading"].includes(data?.runtime?.phase) && data?.pluginUpdates?.job?.state !== "running" && !data?.checkins?.running) return;
     const timer = setInterval(() => {
-      if (polling.current) return;
+      if (document.hidden || polling.current) return;
       polling.current = true;
       void load().catch((e) => setError(e.message)).finally(() => {
         polling.current = false;
@@ -310,9 +416,10 @@ function RouterPage({ view = "page" }) {
     try {
       const res = await fetch(ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json", "X-Multi-Router-Key": data.key }, body: JSON.stringify({ revision: data.revision, ...action }) });
       const next = await readManagementResponse(res);
-      const { exported, workbuddyLogin, loginResult, ...state } = next;
+      const { exported, workbuddyLogin, loginResult, apiKey, ...state } = next;
       setData(state);
-      setNotice(action.action === "workbuddy.sms" ? "" : action.action === "workbuddy.login" ? loginResult?.warning || "\u767B\u5F55\u51ED\u8BC1\u5DF2\u4FDD\u5B58\uFF0C\u81EA\u52A8\u7B7E\u5230\u5F00\u5173\u4FDD\u6301\u539F\u8BBE\u7F6E\u3002" : action.action === "checkins.verify" ? "\u767B\u5F55\u9A8C\u8BC1\u901A\u8FC7\uFF0C\u65E7\u7684\u4EE4\u724C\u5931\u6548\u63D0\u793A\u5DF2\u89E3\u9664\uFF1B\u672A\u63D0\u4EA4\u7B7E\u5230\u3002" : action.action === "checkins.settings" ? "\u7B7E\u5230\u8BA1\u5212\u5DF2\u4FDD\u5B58\uFF1B\u4ECA\u65E5\u5DF2\u5904\u7406\u8BB0\u5F55\u4FDD\u6301\u4E0D\u53D8\u3002" : action.action.startsWith("checkins.") || action.action.startsWith("plugins.") || action.action === "setup.dismiss" ? "" : action.action === "accounts.discover" || action.action === "monitor.refresh" ? "\u5DF2\u91CD\u65B0\u68C0\u6D4B\u672C\u673A\u767B\u5F55\u5E76\u5237\u65B0\u7528\u91CF\uFF1B\u68C0\u6D4B\u7ED3\u679C\u89C1\u4E0B\u65B9\u3002" : action.action.includes("refresh") ? "\u5DF2\u5237\u65B0\u3002\u65E0\u6CD5\u83B7\u53D6\u7684\u8D26\u53F7\u4F1A\u4FDD\u7559\u4E0A\u6B21\u6570\u636E\u5E76\u6807\u8BB0\u3002" : action.action === "config.import" ? "\u914D\u7F6E\u5DF2\u5BFC\u5165\u5E76\u751F\u6548\uFF0C\u539F\u914D\u7F6E\u5DF2\u5907\u4EFD\uFF1B\u6A21\u578B\u548C\u7528\u91CF\u6B63\u5728\u540E\u53F0\u66F4\u65B0\u3002" : action.action.startsWith("config.") || action.action === "account.export" ? "" : "\u5DF2\u4FDD\u5B58\u5E76\u751F\u6548\u3002");
+      if (action.sidebarUsage !== void 0 || action.action === "config.import") window.dispatchEvent(new Event(SUMMARY_EVENT));
+      setNotice(action.action.startsWith("api.") ? next.apiService?.phase === "error" ? "\u914D\u7F6E\u5DF2\u4FDD\u5B58\uFF0C\u4F46\u670D\u52A1\u5C1A\u672A\u542F\u52A8\uFF0C\u8BF7\u67E5\u770B\u4E0B\u65B9\u63D0\u793A\u3002" : action.action === "api.key.reveal" ? "" : "API \u8BBE\u7F6E\u5DF2\u4FDD\u5B58\u3002" : action.action === "workbuddy.sms" ? "" : action.action === "workbuddy.login" ? loginResult?.warning || "\u767B\u5F55\u51ED\u8BC1\u5DF2\u4FDD\u5B58\uFF0C\u81EA\u52A8\u7B7E\u5230\u5F00\u5173\u4FDD\u6301\u539F\u8BBE\u7F6E\u3002" : action.action === "checkins.verify" ? "\u767B\u5F55\u9A8C\u8BC1\u901A\u8FC7\uFF0C\u65E7\u7684\u4EE4\u724C\u5931\u6548\u63D0\u793A\u5DF2\u89E3\u9664\uFF1B\u672A\u63D0\u4EA4\u7B7E\u5230\u3002" : action.action === "checkins.settings" ? "\u7B7E\u5230\u8BA1\u5212\u5DF2\u4FDD\u5B58\uFF1B\u4ECA\u65E5\u5DF2\u5904\u7406\u8BB0\u5F55\u4FDD\u6301\u4E0D\u53D8\u3002" : action.action.startsWith("checkins.") || action.action.startsWith("plugins.") || action.action === "setup.dismiss" ? "" : action.action === "accounts.discover" || action.action === "monitor.refresh" ? "\u5DF2\u91CD\u65B0\u68C0\u6D4B\u672C\u673A\u767B\u5F55\u5E76\u5237\u65B0\u7528\u91CF\uFF1B\u68C0\u6D4B\u7ED3\u679C\u89C1\u4E0B\u65B9\u3002" : action.action.includes("refresh") ? "\u5DF2\u5237\u65B0\u3002\u65E0\u6CD5\u83B7\u53D6\u7684\u8D26\u53F7\u4F1A\u4FDD\u7559\u4E0A\u6B21\u6570\u636E\u5E76\u6807\u8BB0\u3002" : action.action === "config.import" ? "\u914D\u7F6E\u5DF2\u5BFC\u5165\u5E76\u751F\u6548\uFF0C\u539F\u914D\u7F6E\u5DF2\u5907\u4EFD\uFF1B\u6A21\u578B\u548C\u7528\u91CF\u6B63\u5728\u540E\u53F0\u66F4\u65B0\u3002" : action.action.startsWith("config.") || action.action === "account.export" ? "" : "\u5DF2\u4FDD\u5B58\u5E76\u751F\u6548\u3002");
       return next;
     } catch (e) {
       setError(e.message);
@@ -360,16 +467,26 @@ function RouterPage({ view = "page" }) {
           "v",
           data?.pluginVersion ?? version
         ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check refresh-control", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", disabled: busy || !data || backendNeedsRestart(data), checked: data?.options?.sidebarUsage !== false, onChange: (e) => {
+            void act({ action: "options.save", sidebarUsage: e.target.checked });
+          } }),
+          "\u4FA7\u680F\u7528\u91CF"
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "status", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: busy || !data ? "warn" : "good", "aria-hidden": "true" }),
           busy ? "\u6B63\u5728\u5904\u7406\u2026" : !data ? "\u6B63\u5728\u8FDE\u63A5\u2026" : "\u672C\u673A\u8FD0\u884C"
         ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check refresh-control", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", checked: live, onChange: (e) => setLive(e.target.checked) }),
+          "\u6BCF\u5206\u949F\u5237\u65B0"
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
           void load().catch((e) => setError(e.message));
         }, children: "\u5237\u65B0\u9762\u677F" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": "\u8DEF\u7531\u63D2\u4EF6\u914D\u7F6E\u9875\u7B7E", children: [["overview", "\u603B\u89C8\u4E0E\u7528\u91CF"], ["usage", "Token \u660E\u7EC6"], ["accounts", "\u8D26\u53F7\u4E0E\u767B\u5F55"], ["checkins", "\u79EF\u5206\u7B7E\u5230"], ["models", "\u6A21\u578B\u7BA1\u7406"], ["routes", "\u8DEF\u7531\u89C4\u5219"], ["plugins", "\u63D2\u4EF6\u66F4\u65B0"], ["migration", "\u914D\u7F6E\u8FC1\u79FB"]].map(([key, label]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { "aria-pressed": tab === key, onClick: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": "\u8DEF\u7531\u63D2\u4EF6\u914D\u7F6E\u9875\u7B7E", children: [["overview", "\u603B\u89C8\u4E0E\u7528\u91CF"], ["usage", "Token \u660E\u7EC6"], ["accounts", "\u8D26\u53F7\u4E0E\u767B\u5F55"], ["checkins", "\u79EF\u5206\u7B7E\u5230"], ["models", "\u6A21\u578B\u7BA1\u7406"], ["routes", "\u8DEF\u7531\u89C4\u5219"], ["api", "API \u670D\u52A1"], ["plugins", "\u63D2\u4EF6\u66F4\u65B0"], ["migration", "\u914D\u7F6E\u8FC1\u79FB"]].map(([key, label]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { "aria-pressed": tab === key, onClick: () => {
       setTab(key);
       setError("");
       setNotice("");
@@ -400,83 +517,28 @@ function RouterPage({ view = "page" }) {
         }, children: "\u91CD\u65B0\u52A0\u8F7D\u63D2\u4EF6" })
       ] }),
       ["overview", "accounts"].includes(tab) && data.setup?.dismissed !== true && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InitialSetup, { data, busy, act, go: (key) => setTab(key) }),
-      tab === "overview" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Overview, { data, live, setLive, busy, act, go: (key) => setTab(key) }),
+      tab === "overview" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Overview, { data, busy, act, go: (key) => setTab(key) }),
+      tab === "api" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiServicePanel, { data: data.apiService, busy, act }),
       tab === "plugins" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PluginUpdatesPanel, { data: data.pluginUpdates, busy, act }),
       tab === "checkins" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckinPanel, { data, busy, act }),
       tab === "usage" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageDetails, { data, busy, act }),
       tab === "accounts" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccountPool, { data, provider: accountProvider, providerSelect: accountProviderSelect, busy, act, manage: (a) => openAccount("edit", a), add: () => openAccount("add") }, accountProvider),
-      tab === "models" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box stack", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u539F\u59CB\u6A21\u578B\u5C55\u793A" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
-                "\u5168\u90E8\u6E20\u9053\u5DF2\u5C55\u793A ",
-                data.providers.reduce((n, p2) => n + p2.models.filter((m) => m.visible).length, 0),
-                " / ",
-                data.providers.reduce((n, p2) => n + p2.models.length, 0),
-                " \u4E2A\u6A21\u578B"
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
-                void act({ action: "models.visibility", visible: true });
-              }, children: "\u5168\u90E8\u5C55\u793A" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
-                void act({ action: "models.visibility", visible: false });
-              }, children: "\u5168\u90E8\u9690\u85CF\uFF08\u4EC5\u8DEF\u7531\uFF09" })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u4E09\u5BB6\u6240\u6709\u533A\u57DF\u7684\u539F\u59CB\u6A21\u578B\u9ED8\u8BA4\u9690\u85CF\uFF0C\u53EA\u5C55\u793A\u7EDF\u4E00\u8DEF\u7531\u3002\u6279\u91CF\u64CD\u4F5C\u4F5C\u7528\u4E8E\u5168\u90E8\u6E20\u9053\uFF0C\u5E76\u9002\u7528\u4E8E\u540E\u7EED\u53D1\u73B0\u7684\u65B0\u6A21\u578B\uFF1B\u5355\u4E2A\u6A21\u578B\u4ECD\u53EF\u5355\u72EC\u8C03\u6574\u3002\u9690\u85CF\u4E0D\u5F71\u54CD\u8DEF\u7531\u76EE\u6807\u6216\u5DF2\u6709\u4F1A\u8BDD\u3002" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
-          providerSelect,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
-            void act({ action: "refresh", provider });
-          }, children: "\u83B7\u53D6\u6A21\u578B\u76EE\u5F55" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          "\u641C\u7D22\u6A21\u578B",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "search", placeholder: "\u8F93\u5165\u540D\u79F0\u6216\u6A21\u578B ID", value: search, onChange: (e) => setSearch(e.target.value) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5C55\u793A\u5F00\u5173\u51B3\u5B9A\u539F\u59CB\u6A21\u578B\u662F\u5426\u51FA\u73B0\u5728 DSH \u9009\u62E9\u5668\uFF1B\u8DEF\u7531\u5C55\u793A\u5728\u300C\u8DEF\u7531\u89C4\u5219\u300D\u4E2D\u72EC\u7ACB\u8BBE\u7F6E\u3002" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box", children: [
-          !p?.models.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "empty", children: "\u5148\u6DFB\u52A0\u5E76\u542F\u7528\u8D26\u53F7\uFF0C\u518D\u83B7\u53D6\u6A21\u578B\u76EE\u5F55\u3002" }),
-          p?.models.filter((m) => `${m.id} ${m.name}`.toLowerCase().includes(search.toLowerCase())).map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "item grid", onSubmit: (e) => {
-            e.preventDefault();
-            void act({ action: "model.update", provider, id: m.id, name: new FormData(e.currentTarget).get("name") });
-          }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-              "\u6A21\u578B\u540D\u79F0",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { name: "name", defaultValue: m.name, required: true, maxLength: 200, disabled: busy }, m.name),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mono muted", children: m.id })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", disabled: busy, checked: m.visible, onChange: (e) => {
-                  void act({ action: "model.update", provider, id: m.id, visible: e.target.checked });
-                } }),
-                "\u5C55\u793A"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, type: "submit", children: "\u4FDD\u5B58\u540D\u79F0" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "notice", children: [
-                "\u4E0A\u4E0B\u6587 ",
-                fmt(m.contextWindow / 1e3),
-                "K"
-              ] })
-            ] })
-          ] }, `${provider}:${m.id}`))
-        ] })
-      ] }),
+      tab === "models" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModelsPanel, { data, provider, providerSelect, search, setSearch, busy, act }),
       tab === "routes" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "muted", children: "\u4E00\u4E2A\u8C03\u7528\u540D\u79F0\uFF0C\u8FDE\u63A5\u591A\u4E2A\u8D26\u53F7\u4E0E\u6A21\u578B\u3002" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u6A21\u578B\u8DEF\u7531" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
+              data.routes.length,
+              " \u6761\u8DEF\u7531 \xB7 \u89C4\u5219\u4E0E\u8D26\u53F7\u5728\u7F16\u8F91\u4E2D\u8C03\u6574"
+            ] })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
               setError("");
               setNotice("");
               setPresetModal(true);
-            }, children: "\u6DFB\u52A0\u6A21\u578B\u9884\u914D\u7F6E" }),
+            }, children: "\u6DFB\u52A0\u9884\u914D\u7F6E" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "primary", disabled: busy, onClick: () => {
               setError("");
               setNotice("");
@@ -484,50 +546,7 @@ function RouterPage({ view = "page" }) {
             }, children: "\u65B0\u5EFA\u8DEF\u7531" })
           ] })
         ] }),
-        data.routes.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "box empty", children: "\u5148\u6DFB\u52A0\u4E09\u5BB6\u5171\u6709\u6A21\u578B\u9884\u914D\u7F6E\uFF0C\u6216\u521B\u5EFA\u4F60\u81EA\u5DF1\u7684\u8DEF\u7531\u3002" }),
-        data.routes.map((r) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box stack route-card", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: r.name }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "badge", children: [
-                r.freeOnly ? "\u4EC5\u514D\u8D39 \xB7 \u81EA\u52A8\u53D1\u73B0" : strategies[r.strategy || "failover"],
-                r.preferExpiringCredits ? " \xB7 \u4E34\u671F\u4F18\u5148" : ""
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => editRoute(r), children: "\u7F16\u8F91\u8DEF\u7531" })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "route-path", children: r.targets.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-            data.providers.find((p2) => p2.id === t.provider)?.name,
-            " \xB7 ",
-            t.account ? data.accounts.find((a) => a.id === t.account)?.name : "\u5168\u90E8\u542F\u7528\u8D26\u53F7",
-            r.strategy === "weighted" ? ` \xB7 \u6743\u91CD ${t.weight || 1}` : r.strategy === "tokens" ? ` \xB7 ${fmt(t.tokenBudget)} Token` : r.strategy === "credits" ? ` \xB7 ${fmt(t.creditBudget)} \u79EF\u5206` : ""
-          ] }, i)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
-              r.targets.length,
-              " \u4E2A\u76EE\u6807 \xB7 ",
-              data.telemetry?.rounds[r.id] ? `\u7B2C ${data.telemetry.rounds[r.id].number} \u8F6E \xB7 ` : "",
-              "4xx \u81EA\u52A8\u5207\u6362"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", disabled: busy, checked: r.visible !== false, onChange: (e) => {
-                const { id, reasoning, supportsImages, expiringStatus, freeStatus, ...route } = r;
-                void act({ action: "route.save", id, previousId: id, route: { ...route, visible: e.target.checked } });
-              } }),
-              r.freeOnly ? "\u5C55\u793A\u52FE\u9009\u7684\u514D\u8D39\u6A21\u578B" : "\u5728\u6A21\u578B\u9009\u62E9\u5668\u5C55\u793A"
-            ] })
-          ] }),
-          r.freeOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FreeStatus, { route: r, busy, act }),
-          !r.freeOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "\u63A8\u7406\u6A21\u5F0F\u4E0E\u517C\u5BB9\u6027" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
-              "\u63A8\u7406\u6A21\u5F0F\uFF1A\u5E73\u53F0\u9ED8\u8BA4",
-              r.reasoning?.supportedEfforts?.length ? `\u3001${r.reasoning.supportedEfforts.map((e) => effortNames[e] || e).join("\u3001")}` : "\uFF08\u5E73\u53F0\u672A\u58F0\u660E\u53EF\u8C03\u6863\u4F4D\uFF09",
-              "\u3002\u9009\u62E9\u6863\u4F4D\u540E\uFF0C\u53EA\u5728\u652F\u6301\u8BE5\u6863\u4F4D\u7684\u76EE\u6807\u95F4\u5207\u6362\u3002"
-            ] })
-          ] }),
-          r.preferExpiringCredits && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpiryStatus, { route: r, act, busy, revision: data.revision })
-        ] }, r.id)),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RoutesTable, { data, busy, act, edit: editRoute }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "\u5168\u5C40\u5207\u6362\u8BBE\u7F6E" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "box stack", style: { marginTop: 16 }, onSubmit: (e) => {
@@ -581,6 +600,348 @@ function RouterPage({ view = "page" }) {
     }, error, notice }) })
   ] });
 }
+function ApiServicePanel({ data: a, busy, act }) {
+  const [key, setKey] = (0, import_react.useState)(""), [hint, setHint] = (0, import_react.useState)(""), [confirmKey, setConfirmKey] = (0, import_react.useState)(null), [models, setModels] = (0, import_react.useState)(false), [example, setExample] = (0, import_react.useState)("");
+  const copyField = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    setKey((current) => a?.keyHint && current.endsWith(a.keyHint.slice(-4)) ? current : "");
+  }, [a?.keyHint]);
+  (0, import_react.useEffect)(() => {
+    if (!key) return;
+    const timer = setTimeout(() => setKey(""), 6e4);
+    return () => clearTimeout(timer);
+  }, [key]);
+  if (!a) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "steps", children: "\u5F53\u524D\u540E\u53F0\u672A\u63D0\u4F9B API \u670D\u52A1\uFF0C\u8BF7\u66F4\u65B0\u63D2\u4EF6\u3002" });
+  const save = (fields) => act({ action: "api.settings", apiRevision: a.revision, ...fields });
+  async function keyAction(action) {
+    const result = await act({ action, apiRevision: a.revision });
+    if (result) {
+      setKey(result.apiKey || "");
+      setConfirmKey(null);
+    }
+  }
+  async function copy(value, fallback = false) {
+    try {
+      await navigator.clipboard.writeText(value);
+      setHint("\u5DF2\u590D\u5236\u3002");
+    } catch {
+      setHint("\u5F53\u524D\u73AF\u5883\u65E0\u6CD5\u81EA\u52A8\u590D\u5236\uFF0C\u8BF7\u5728\u6587\u672C\u6846\u4E2D\u5168\u9009\u590D\u5236\u3002");
+      if (fallback) copyField.current?.select();
+      else setExample(value);
+    }
+  }
+  const model = a.models[0]?.id || "\u4F60\u7684\u8DEF\u7531\u6A21\u578B ID";
+  const command = `curl '${a.baseUrl}/chat/completions' \\
+  -H 'Authorization: Bearer YOUR_API_KEY' \\
+  -H 'Content-Type: application/json' \\
+  -d '${JSON.stringify({ model, messages: [{ role: "user", content: "\u4F60\u597D" }], stream: true })}'`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box stack", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "API \u670D\u52A1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5C06\u8D26\u53F7\u6C60\u4E0E\u7EDF\u4E00\u8DEF\u7531\u63D0\u4F9B\u7ED9\u5176\u4ED6\u5DE5\u5177\u3002\u968F DSH \u8FD0\u884C\uFF0C\u9ED8\u8BA4\u5173\u95ED\u3002" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "status", role: "status", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: a.phase === "running" ? "good" : a.phase === "error" ? "warn" : "", "aria-hidden": "true" }),
+          { running: "\u8FD0\u884C\u4E2D", stopped: "\u5DF2\u5173\u95ED", starting: "\u542F\u52A8\u4E2D", error: "\u542F\u52A8\u5931\u8D25" }[a.phase] || a.phase
+        ] })
+      ] }),
+      a.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "error", role: "alert", children: a.error }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: a.phase === "running" ? `${a.active} \u4E2A\u5904\u7406\u4E2D\u8BF7\u6C42 \xB7 ${a.allowLan ? "\u672C\u673A\u4E0E\u7F51\u7EDC\u8BBF\u95EE" : "\u4EC5\u672C\u673A\u8BBF\u95EE"}` : "\u5F00\u542F\u540E\u5373\u53EF\u590D\u5236\u63A5\u5165\u5730\u5740\uFF1B\u5173\u95ED\u4F1A\u7EC8\u6B62\u6B63\u5728\u5904\u7406\u7684 API \u8BF7\u6C42\u3002" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", checked: a.enabled, disabled: busy || !a.hasKey, onChange: (e) => {
+            void save({ enabled: e.target.checked });
+          } }),
+          "\u542F\u7528 API \u670D\u52A1"
+        ] })
+      ] }),
+      !a.hasKey && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "steps", children: "\u5148\u751F\u6210 API Key\uFF0C\u518D\u542F\u7528\u670D\u52A1\u3002\u8D26\u53F7\u767B\u5F55\u51ED\u8BC1\u4E0D\u4F1A\u901A\u8FC7\u6B64\u670D\u52A1\u63D0\u4F9B\u3002" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "metrics", children: [
+      metric("\u4ECA\u65E5 API \u8C03\u7528", fmt(a.today.calls), `${a.today.attempts} \u6B21\u4E0A\u6E38\u5C1D\u8BD5\uFF0C\u542B\u6545\u969C\u5207\u6362`),
+      metric("\u4ECA\u65E5 API Token", fmt(a.today.tokens), "\u5E73\u53F0\u5B9E\u9645\u8FD4\u56DE\u7528\u91CF"),
+      metric("\u5DF2\u5F00\u653E\u6A21\u578B", fmt(a.models.length), a.modelIds === null ? "\u8DDF\u968F\u8DEF\u7531\u5C55\u793A\u8BBE\u7F6E" : "\u81EA\u9009\u6A21\u578B"),
+      metric("\u5904\u7406\u4E2D", fmt(a.active), "\u6700\u591A 8 \u4E2A\u5E76\u53D1 API \u8BF7\u6C42")
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box stack", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u63A5\u5165\u4FE1\u606F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5BA2\u6237\u7AEF\u9009\u62E9 OpenAI \u517C\u5BB9\u65B9\u5F0F\uFF0C\u586B\u5199\u4E0B\u65B9 Base URL \u4E0E API Key\u3002" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => setExample(command), children: "\u8C03\u7528\u793A\u4F8B" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+        "Base URL",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { className: "mono", style: { flex: 1, minWidth: 180 }, readOnly: true, value: a.baseUrl, onFocus: (e) => e.currentTarget.select() }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => {
+            void copy(a.baseUrl);
+          }, children: "\u590D\u5236\u5730\u5740" })
+        ] })
+      ] }),
+      a.allowLan && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5176\u4ED6\u8BBE\u5907\u53EF\u4F7F\u7528\u4EE5\u4E0B\u672C\u673A\u7F51\u5361\u5730\u5740\uFF08\u9700\u8981\u7F51\u7EDC\u53EF\u8FBE\u53CA\u9632\u706B\u5899\u653E\u884C\uFF09\uFF1A" }),
+        a.lanUrls.length ? a.lanUrls.map((url) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mono", style: { overflowWrap: "anywhere" }, children: url }, url)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u6682\u65E0\u53EF\u7528 IPv4 \u7F51\u5361\u5730\u5740\u3002" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+        "API Key",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref: copyField, className: "mono", style: { flex: 1, minWidth: 180 }, readOnly: true, autoComplete: "off", spellCheck: "false", value: key || a.keyHint || "\u5C1A\u672A\u751F\u6210", onFocus: (e) => e.currentTarget.select() }),
+          a.hasKey && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
+              if (key) setKey("");
+              else void keyAction("api.key.reveal");
+            }, children: key ? "\u9690\u85CF" : "\u663E\u793A" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: async () => {
+              const result = await act({ action: "api.key.reveal", apiRevision: a.revision });
+              if (result?.apiKey) {
+                setKey(result.apiKey);
+                await copy(result.apiKey, true);
+              }
+            }, children: "\u590D\u5236 Key" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
+          if (a.hasKey) setConfirmKey("create");
+          else void keyAction("api.key.create");
+        }, children: a.hasKey ? "\u91CD\u7F6E API Key" : "\u751F\u6210 API Key" }),
+        a.hasKey && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => setConfirmKey("revoke"), children: "\u64A4\u9500 Key \u5E76\u5173\u95ED\u670D\u52A1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "Key \u4EC5\u4FDD\u5B58\u5728\u672C\u673A\u79C1\u6709\u6587\u4EF6\uFF1B\u663E\u793A\u540E 60 \u79D2\u81EA\u52A8\u9690\u85CF\u3002" })
+      ] }),
+      hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", role: "status", children: hint })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box stack", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u670D\u52A1\u8BBE\u7F6E" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "stack", onSubmit: (e) => {
+        e.preventDefault();
+        const f = new FormData(e.currentTarget);
+        void save({ port: Number(f.get("port")), allowLan: f.has("lan") });
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "filter", children: [
+            "\u76D1\u542C\u7AEF\u53E3",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "number", name: "port", min: "1024", max: "65535", required: true, defaultValue: a.port, disabled: busy })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", name: "lan", defaultChecked: a.allowLan, disabled: busy }),
+            "\u5141\u8BB8\u5C40\u57DF\u7F51\u8BBF\u95EE"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, children: "\u4FDD\u5B58\u8BBE\u7F6E" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u9ED8\u8BA4\u76D1\u542C 127.0.0.1\u3002\u5F00\u542F\u7F51\u7EDC\u8BBF\u95EE\u540E\u76D1\u542C\u6240\u6709 IPv4 \u7F51\u5361\uFF0C\u4F7F\u7528 HTTP\uFF0C\u8BF7\u4EC5\u7528\u4E8E\u53EF\u4FE1\u7F51\u7EDC\uFF1B\u5982\u9700\u5916\u7F51\u8BBF\u95EE\uFF0C\u8BF7\u81EA\u884C\u914D\u7F6E HTTPS \u4E0E\u8BBF\u95EE\u9650\u5236\u3002\u4FEE\u6539\u7AEF\u53E3\u6216\u8BBF\u95EE\u8303\u56F4\u4F1A\u4E2D\u65AD\u5F53\u524D API \u8BF7\u6C42\u3002" })
+      ] }, a.revision)
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box table-shell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar table-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5F00\u653E\u6A21\u578B" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: a.modelIds === null ? "\u81EA\u52A8\u8DDF\u968F\u5DF2\u5C55\u793A\u8DEF\u7531\uFF0C\u5305\u542B\u52A8\u6001\u514D\u8D39\u6A21\u578B\u3002" : "\u4EC5\u5F00\u653E\u624B\u52A8\u9009\u62E9\u7684\u8DEF\u7531\u3002" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => setModels(true), children: "\u9009\u62E9\u5F00\u653E\u6A21\u578B" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "scroll", role: "region", "aria-label": "API \u5F00\u653E\u6A21\u578B", tabIndex: "0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "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: "\u6A21\u578B\u540D\u79F0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u8C03\u7528\u6A21\u578B ID" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: a.models.map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: m.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "mono", style: { overflowWrap: "anywhere" }, children: m.id })
+          ] }, m.id)) })
+        ] }),
+        !a.models.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "empty", children: "\u6682\u672A\u5F00\u653E\u6A21\u578B\uFF0C\u8BF7\u5C55\u793A\u8DEF\u7531\u6216\u624B\u52A8\u9009\u62E9\u3002" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "\u63A5\u53E3\u4E0E\u7EDF\u8BA1\u8BF4\u660E" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u652F\u6301 GET /v1/models\u3001POST /v1/chat/completions\uFF08\u6D41\u5F0F\u4E0E\u666E\u901A JSON\uFF09\uFF0C\u6CBF\u7528\u8DEF\u7531\u7684\u63A8\u7406\u9ED8\u8BA4\u503C\uFF0C\u53EF\u7528 reasoning_effort \u8986\u76D6\u3002\u5DE5\u5177\u8C03\u7528\u4E0E\u56FE\u7247\u80FD\u529B\u53D6\u51B3\u4E8E\u76EE\u6807\u6A21\u578B\uFF1B\u5916\u90E8\u5DE5\u5177\u81EA\u884C\u6267\u884C\u5DE5\u5177\u5E76\u56DE\u4F20\u7ED3\u679C\u3002\u7528\u91CF\u8BB0\u5F55\u5230 Token \u660E\u7EC6\u7684\u300CAPI \u670D\u52A1\u300D\u6765\u6E90\uFF0C\u4E0D\u4FDD\u5B58\u8BF7\u6C42\u5185\u5BB9\u6216 Key\uFF1B\u4E0A\u4E0B\u6587\u7531\u8C03\u7528\u5BA2\u6237\u7AEF\u4F20\u5165\u3002\u6B64\u7248\u672C\u4E0D\u63D0\u4F9B Responses\u3001Embeddings \u6216\u8DE8\u7AD9\u6D4F\u89C8\u5668 CORS \u63A5\u53E3\u3002\u542F\u7528\u72B6\u6001\u4F1A\u4FDD\u5B58\uFF0CDSH \u4E0B\u6B21\u542F\u52A8\u81EA\u52A8\u6062\u590D\uFF1B\u9000\u51FA DSH \u540E\u505C\u6B62\u3002" })
+    ] }),
+    confirmKey && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, { title: confirmKey === "create" ? "\u91CD\u7F6E API Key" : "\u64A4\u9500 API Key", busy, close: () => setConfirmKey(null), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "modal-body stack", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: confirmKey === "create" ? "\u65E7 Key \u5C06\u7ACB\u5373\u5931\u6548\uFF0C\u5176\u4ED6\u5BA2\u6237\u7AEF\u9700\u8981\u586B\u5199\u65B0 Key\u3002" : "Key \u5C06\u7ACB\u5373\u5931\u6548\uFF0CAPI \u670D\u52A1\u4F1A\u5173\u95ED\uFF0C\u6B63\u5728\u5904\u7406\u7684 API \u8BF7\u6C42\u5C06\u4E2D\u65AD\u3002" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "modal-foot row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => setConfirmKey(null), children: "\u53D6\u6D88" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "primary", disabled: busy, onClick: () => {
+          void keyAction(`api.key.${confirmKey}`);
+        }, children: [
+          "\u786E\u8BA4",
+          confirmKey === "create" ? "\u91CD\u7F6E" : "\u64A4\u9500"
+        ] })
+      ] })
+    ] }),
+    models && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, { title: "\u9009\u62E9 API \u5F00\u653E\u6A21\u578B", busy, close: () => setModels(false), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApiModels, { data: a, busy, save: async (modelIds) => {
+      if (await save({ modelIds })) setModels(false);
+    } }) }),
+    example && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, { title: "\u63A5\u5165\u793A\u4F8B / \u624B\u52A8\u590D\u5236", busy: false, close: () => setExample(""), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "modal-body stack", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5C06 YOUR_API_KEY \u66FF\u6362\u4E3A\u81EA\u5DF1\u7684\u670D\u52A1 Key\u3002Base URL \u5DF2\u5305\u542B /v1\uFF1B\u6D4B\u8BD5\u8C03\u7528\u4F1A\u6B63\u5E38\u6D88\u8017\u76EE\u6807\u8D26\u53F7\u7684\u7528\u91CF\u3002" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+        "\u53EF\u590D\u5236\u5185\u5BB9",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { className: "mono", readOnly: true, rows: 8, value: example, onFocus: (e) => e.currentTarget.select() })
+      ] })
+    ] }) })
+  ] });
+}
+function ApiModels({ data, busy, save }) {
+  const [follow, setFollow] = (0, import_react.useState)(data.modelIds === null), [selected, setSelected] = (0, import_react.useState)(data.modelIds ?? data.models.map((m) => m.id));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: (e) => {
+    e.preventDefault();
+    void save(follow ? null : selected);
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "modal-body stack", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", checked: follow, disabled: busy, onChange: (e) => setFollow(e.target.checked) }),
+        "\u8DDF\u968F\u8DEF\u7531\u5C55\u793A\uFF08\u65B0\u53D1\u73B0\u7684\u514D\u8D39\u6A21\u578B\u4E5F\u81EA\u52A8\u5F00\u653E\uFF09"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: busy || follow, onClick: () => setSelected(data.choices.map((m) => m.id)), children: "\u5168\u9009" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: busy || follow, onClick: () => setSelected([]), children: "\u5168\u4E0D\u9009" })
+      ] }),
+      data.choices.map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", disabled: busy || follow, checked: follow ? m.visible : selected.includes(m.id), onChange: (e) => setSelected(e.target.checked ? [...selected, m.id] : selected.filter((id) => id !== m.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          m.name,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "mono muted", style: { overflowWrap: "anywhere" }, children: m.id })
+        ] })
+      ] }, m.id)),
+      !data.choices.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u8BF7\u5148\u6DFB\u52A0\u8DEF\u7531\u3002" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "modal-foot row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "primary", disabled: busy, children: "\u4FDD\u5B58\u5F00\u653E\u8303\u56F4" }) })
+  ] });
+}
+function ModelsPanel({ data, provider, providerSelect, search, setSearch, busy, act }) {
+  const [editing, setEditing] = (0, import_react.useState)(null);
+  const models = data.providers.find((p) => p.id === provider)?.models ?? [];
+  const all = data.providers.flatMap((p) => p.models), shown = models.filter((m) => `${m.id} ${m.name}`.toLowerCase().includes(search.toLowerCase()));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u539F\u59CB\u6A21\u578B\u5C55\u793A" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
+          "\u5DF2\u5C55\u793A ",
+          all.filter((m) => m.visible).length,
+          " / ",
+          all.length,
+          " \u4E2A \xB7 \u9ED8\u8BA4\u4EC5\u5C55\u793A\u7EDF\u4E00\u8DEF\u7531"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
+          void act({ action: "models.visibility", visible: true });
+        }, children: "\u5168\u90E8\u5C55\u793A" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
+          void act({ action: "models.visibility", visible: false });
+        }, children: "\u5168\u90E8\u9690\u85CF\uFF08\u4EC5\u8DEF\u7531\uFF09" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar toolbar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
+        providerSelect,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "search", children: [
+          "\u641C\u7D22\u6A21\u578B",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "search", placeholder: "\u540D\u79F0\u6216\u6A21\u578B ID", value: search, onChange: (e) => setSearch(e.target.value) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
+        void act({ action: "refresh", provider });
+      }, children: "\u83B7\u53D6\u6A21\u578B\u76EE\u5F55" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box table-shell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "scroll", role: "region", "aria-label": "\u6A21\u578B\u5C55\u793A\u7BA1\u7406", tabIndex: "0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "table model-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", { scope: "col", children: "\u6A21\u578B" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: "\u4E0A\u4E0B\u6587 / \u63A8\u7406" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: "\u9009\u62E9\u5668\u5C55\u793A" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", className: "cell-actions", children: "\u7BA1\u7406" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: shown.map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: m.visible ? "selected" : "", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: m.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "mono muted", children: m.id })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
+              fmt(m.contextWindow / 1e3),
+              "K",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "muted", children: m.reasoning?.supportedEfforts?.length ? m.reasoning.supportedEfforts.map((e) => effortNames[e] || e).join(" / ") : "\u5E73\u53F0\u9ED8\u8BA4" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", "aria-label": `\u5C55\u793A ${m.name}`, disabled: busy, checked: m.visible, onChange: (e) => {
+                void act({ action: "model.update", provider, id: m.id, visible: e.target.checked });
+              } }),
+              m.visible ? "\u5DF2\u5C55\u793A" : "\u5DF2\u9690\u85CF"
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "cell-actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => setEditing({ id: m.id, name: m.name, provider }), children: "\u4FEE\u6539\u540D\u79F0" }) })
+          ] }, m.id)) })
+        ] }),
+        !shown.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "empty", children: models.length ? "\u6CA1\u6709\u5339\u914D\u7684\u6A21\u578B\u3002" : "\u6DFB\u52A0\u5E76\u542F\u7528\u8D26\u53F7\u540E\uFF0C\u83B7\u53D6\u6A21\u578B\u76EE\u5F55\u3002" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "table-footer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u9690\u85CF\u4E0D\u5F71\u54CD\u8DEF\u7531\u6216\u5DF2\u6709\u4F1A\u8BDD\u3002\u6279\u91CF\u8BBE\u7F6E\u4F5C\u7528\u4E8E\u5168\u90E8\u4F9B\u5E94\u5546\u53CA\u540E\u7EED\u53D1\u73B0\u7684\u6A21\u578B\u3002" }) })
+    ] }),
+    editing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, { title: "\u4FEE\u6539\u6A21\u578B\u540D\u79F0", busy, close: () => setEditing(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: async (e) => {
+      e.preventDefault();
+      if (await act({ action: "model.update", ...editing })) setEditing(null);
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "modal-body stack", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+          "\u6A21\u578B\u540D\u79F0",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { autoFocus: true, required: true, maxLength: 200, disabled: busy, value: editing.name, onChange: (e) => setEditing({ ...editing, name: e.target.value }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mono muted", children: editing.id })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "modal-foot row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", disabled: busy, onClick: () => setEditing(null), children: "\u53D6\u6D88" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "primary", disabled: busy, children: "\u4FDD\u5B58\u540D\u79F0" })
+      ] })
+    ] }) })
+  ] });
+}
+function RoutesTable({ data, busy, act, edit }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: "box table-shell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "scroll", role: "region", "aria-label": "\u6A21\u578B\u8DEF\u7531\u89C4\u5219", tabIndex: "0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "table route-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", { scope: "col", children: "\u8DEF\u7531 / \u6A21\u578B" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: "\u8D26\u53F7\u4E0E\u6E20\u9053" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: "\u5207\u6362\u89C4\u5219" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: "\u5C55\u793A" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", className: "cell-actions", children: "\u7BA1\u7406" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: data.routes.map((r) => {
+        const accounts = data.accounts.filter((a) => a.enabled !== false && r.targets.some((t) => t.provider === a.provider && (!t.account || t.account === a.id)));
+        const providers = [...new Set(r.targets.map((t) => data.providers.find((p) => p.id === t.provider)?.name || t.provider))];
+        const cooling = r.expiringStatus?.cooldownUntil > Date.now(), modes = r.reasoning?.supportedEfforts ?? [];
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: r.visible !== false ? "selected" : "", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: r.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "muted", children: r.freeOnly ? `${r.freeStatus?.modelRoutes?.filter((m) => m.selected).length || 0} \u4E2A\u514D\u8D39\u6A21\u578B\u5DF2\u5C55\u793A` : modes.length ? `\u63A8\u7406\uFF1A${modes.map((e) => effortNames[e] || e).join(" / ")}` : "\u63A8\u7406\uFF1A\u5E73\u53F0\u9ED8\u8BA4" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { className: "route-targets", children: [
+            accounts.length,
+            " \u4E2A\u53C2\u4E0E\u8D26\u53F7",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "muted", children: providers.join("\u3001") })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
+            r.freeOnly ? "\u4EC5\u514D\u8D39 \xB7 \u81EA\u52A8\u53D1\u73B0" : strategies[r.strategy || "failover"],
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: cooling ? "warn" : "muted", children: cooling ? "\u4E34\u671F\u4F18\u5148\u51B7\u5374\u4E2D" : r.preferExpiringCredits ? "\u4E34\u671F\u79EF\u5206\u4F18\u5148" : `${r.targets.length} \u4E2A\u76EE\u6807 \xB7 4xx \u5207\u6362` })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", "aria-label": `\u5C55\u793A\u8DEF\u7531 ${r.name}`, disabled: busy, checked: r.visible !== false, onChange: (e) => {
+              const { id, reasoning, supportsImages, expiringStatus, freeStatus, ...route } = r;
+              void act({ action: "route.save", id, previousId: id, route: { ...route, visible: e.target.checked } });
+            } }),
+            r.visible !== false ? "\u5F00\u542F" : "\u5173\u95ED"
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "cell-actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => edit(r), children: r.freeOnly ? "\u7BA1\u7406\u514D\u8D39\u6A21\u578B" : "\u7F16\u8F91\u8DEF\u7531" }) })
+        ] }, r.id);
+      }) })
+    ] }),
+    !data.routes.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "empty", children: "\u6DFB\u52A0\u6A21\u578B\u9884\u914D\u7F6E\uFF0C\u6216\u521B\u5EFA\u81EA\u5B9A\u4E49\u8DEF\u7531\u3002" })
+  ] }) });
+}
 var displayName = (a) => (a?.name || a?.id || "\u672A\u77E5\u8D26\u53F7").replace(/(?<!\d)(\+?\d{2,3})\d{3,8}(\d{4})(?!\d)/g, "$1****$2");
 var resultLabels = { claimed: "\u7B7E\u5230\u6210\u529F", "already-claimed": "\u5DF2\u9886\u53D6", "no-campaign": "\u65E0\u6D3B\u52A8", retryable: "\u67E5\u8BE2\u5931\u8D25", "before-window": "\u7A97\u53E3\u672A\u5F00", "auth-invalid": "\u4EE4\u724C\u5931\u6548", paused: "\u5E73\u53F0\u6682\u505C", uncertain: "\u5F85\u6838\u5BF9", "device-used": "\u8BBE\u5907\u5DF2\u53C2\u4E0E" };
 function Balance({ account }) {
@@ -853,7 +1214,7 @@ function CheckinPanel({ data, busy, act }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u591A\u53F0\u8BBE\u5907\u7684\u672C\u5730\u8BB0\u5F55\u4E0D\u4F1A\u4E92\u76F8\u540C\u6B65\uFF0C\u6BCF\u6B21\u90FD\u4F1A\u67E5\u8BE2\u5E73\u53F0\u9886\u53D6\u72B6\u6001\uFF1B\u5EFA\u8BAE\u4EC5\u5728\u4E00\u53F0\u5E38\u7528\u8BBE\u5907\u5F00\u542F\u81EA\u52A8\u7B7E\u5230\u3002\u540C\u4E00 Trae \u8BBE\u5907\u6BCF\u5929\u6700\u591A\u5904\u7406\u4E00\u4E2A\u9886\u53D6\u8BF7\u6C42\uFF0C\u91CD\u590D\u8D26\u53F7\u526F\u672C\u4F1A\u53BB\u91CD\uFF1B\u4E0D\u4FDD\u8BC1\u5E73\u53F0\u4E00\u5B9A\u53D1\u653E\u5956\u52B1\u3002" })
   ] });
 }
-function Overview({ data, live, setLive, busy, act, go }) {
+function Overview({ data, busy, act, go }) {
   const t = data.telemetry || {}, today = t.days?.[t.today] || {}, totals = data.accounts.reduce((s, a) => ({ requests: s.requests + (a.usage?.requests || 0), tokens: s.tokens + (a.usage?.tokens || 0) }), { requests: 0, tokens: 0 });
   const dates = Array.from({ length: 7 }, (_, i) => {
     const d = /* @__PURE__ */ new Date();
@@ -873,10 +1234,7 @@ function Overview({ data, live, setLive, busy, act, go }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5E73\u53F0\u989D\u5EA6" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", checked: live, onChange: (e) => setLive(e.target.checked) }),
-          "15 \u79D2\u5237\u65B0\u9762\u677F"
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "notice", children: "\u5E73\u53F0\u7528\u91CF \xB7 \u6BCF 5 \u5206\u949F\u66F4\u65B0" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
           void act({ action: "monitor.refresh" });
         }, children: "\u5237\u65B0\u5E73\u53F0\u7528\u91CF" })
@@ -913,7 +1271,7 @@ function Overview({ data, live, setLive, busy, act, go }) {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => go("accounts"), children: "\u7BA1\u7406\u8D26\u53F7\u6C60" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5E73\u53F0\u4F59\u989D\u6BCF\u5206\u949F\u67E5\u8BE2\uFF1BToken \u4EC5\u7EDF\u8BA1\u672C\u63D2\u4EF6\u8BF7\u6C42\uFF0C\u4ECE\u5347\u7EA7\u5F00\u59CB\u8BB0\u5F55\u3002\u79EF\u5206\u4E0B\u964D\u53EF\u80FD\u5305\u542B\u5BA2\u6237\u7AEF\u6216\u5176\u4ED6\u5E94\u7528\u7684\u6D88\u8017\uFF0C\u4E09\u5BB6\u79EF\u5206\u5206\u522B\u5C55\u793A\u3002" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u9762\u677F\u8BFB\u53D6\u672C\u673A\u7F13\u5B58\uFF0C\u4E0D\u4F1A\u89E6\u53D1\u5E73\u53F0\u67E5\u8BE2\u3002\u5E73\u53F0\u4F59\u989D\u6BCF 5 \u5206\u949F\u66F4\u65B0\uFF0C\u624B\u52A8\u5237\u65B0\u7ACB\u5373\u67E5\u8BE2\uFF1B\u79EF\u5206\u8F6E\u6362\u4E0E\u4E34\u671F\u4F18\u5148\u6309\u9700\u590D\u6838\u3002Token \u4EC5\u7EDF\u8BA1\u672C\u63D2\u4EF6\u8BF7\u6C42\u3002" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u8FD1 7 \u65E5 Token" }),
@@ -928,14 +1286,8 @@ function Overview({ data, live, setLive, busy, act, go }) {
         ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box stack", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5FEB\u901F\u5F00\u59CB" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
-          "1. \u786E\u8BA4\u81EA\u52A8\u83B7\u53D6\u7684\u8D26\u53F7\uFF0C\u6216\u624B\u52A8\u6DFB\u52A0\u51ED\u8BC1",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-          "2. \u4F7F\u7528\u9884\u5236\u8DEF\u7531\uFF0C\u6309\u9700\u7F16\u8F91\u8D26\u53F7\u5207\u6362\u89C4\u5219",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-          "3. \u5230 DSH \u6A21\u578B\u9009\u62E9\u5668\u9009\u62E9\u300C\u7EDF\u4E00\u8DEF\u7531\u300D\u4E2D\u7684\u6A21\u578B"
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5E38\u7528\u5165\u53E3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u8FDE\u63A5\u8D26\u53F7\u540E\uFF0C\u5728 DSH \u6A21\u578B\u9009\u62E9\u5668\u4E2D\u4F7F\u7528\u300C\u7EDF\u4E00\u8DEF\u7531\u300D\u3002" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => go("accounts"), children: "\u67E5\u770B\u8D26\u53F7" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => go("routes"), children: "\u914D\u7F6E\u8DEF\u7531" }),
@@ -999,7 +1351,7 @@ function performanceSummary(events) {
 }
 function PerformanceMetrics({ events }) {
   const stats = performanceSummary(events);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "stack", "aria-label": "\u8C03\u7528\u6027\u80FD\u7EDF\u8BA1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "stack performance", "aria-label": "\u8C03\u7528\u6027\u80FD\u7EDF\u8BA1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u8C03\u7528\u6027\u80FD" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
@@ -1021,11 +1373,11 @@ function PerformanceMetrics({ events }) {
   ] });
 }
 function UsageDetails({ data, busy, act }) {
-  const [account, setAccount] = (0, import_react.useState)(""), [route, setRoute] = (0, import_react.useState)(""), [outcome, setOutcome] = (0, import_react.useState)(""), [page, setPage] = (0, import_react.useState)(0);
+  const [account, setAccount] = (0, import_react.useState)(""), [route, setRoute] = (0, import_react.useState)(""), [outcome, setOutcome] = (0, import_react.useState)(""), [source, setSource] = (0, import_react.useState)(""), [page, setPage] = (0, import_react.useState)(0);
   const [period, setPeriod] = (0, import_react.useState)("30"), [start, setStart] = (0, import_react.useState)(() => new Date(Date.now() - 29 * 864e5).toLocaleDateString("en-CA", { timeZone: "Asia/Shanghai" })), [end, setEnd] = (0, import_react.useState)(() => (/* @__PURE__ */ new Date()).toLocaleDateString("en-CA", { timeZone: "Asia/Shanghai" }));
   const all = data.telemetry?.events || [], retention = data.options.usageRetentionDays;
   const [from, until] = usageDateBounds(period, start, end), invalidRange = !(from < until);
-  const events = all.filter((e) => e.at >= from && e.at < until && (!account || e.account === account) && (!route || e.alias === route) && (!outcome || e.outcome === outcome));
+  const events = all.filter((e) => e.at >= from && e.at < until && (!account || e.account === account) && (!route || e.alias === route) && (!outcome || e.outcome === outcome) && (!source || (e.source || "dsh") === source));
   const pages = Math.max(1, Math.ceil(events.length / 50)), current = Math.min(page, pages - 1);
   const accountName = (id) => data.accounts.find((a) => a.id === id)?.name || id;
   const routeName = (id) => data.routes.find((r) => r.id === id)?.name || id;
@@ -1112,6 +1464,17 @@ function UsageDetails({ data, busy, act }) {
           [...new Set(all.map((e) => e.alias))].map((id) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: id, children: routeName(id) }, id))
         ] })
       ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "filter", children: [
+        "\u6765\u6E90",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { value: source, onChange: (e) => {
+          setSource(e.target.value);
+          setPage(0);
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\u5168\u90E8\u6765\u6E90" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "dsh", children: "DSH \u4F1A\u8BDD" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "api", children: "API \u670D\u52A1" })
+        ] })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "filter", children: [
         "\u7ED3\u679C",
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { value: outcome, onChange: (e) => {
@@ -1137,7 +1500,7 @@ function UsageDetails({ data, busy, act }) {
       "\u7F13\u5B58\u8F93\u5165\u5305\u542B\u5728\u8F93\u5165\u4E2D\uFF0C\u63A8\u7406\u8F93\u51FA\u5305\u542B\u5728\u8F93\u51FA\u4E2D\uFF0C\u5747\u4E0D\u91CD\u590D\u76F8\u52A0\u3002\u672A\u8FD4\u56DE\u7684\u6570\u636E\u4EE5\u300C\u2014\u300D\u663E\u793A\u3002"
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PerformanceMetrics, { events }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box table-shell", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "scroll", role: "region", "aria-label": "\u8BF7\u6C42\u7528\u91CF\u4E0E\u6027\u80FD\u660E\u7EC6", tabIndex: "0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "table", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
@@ -1151,7 +1514,10 @@ function UsageDetails({ data, busy, act }) {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "\u7ED3\u679C" })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: events.slice(current * 50, (current + 1) * 50).map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: when(e.at) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
+              when(e.at),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "muted", children: e.source === "api" ? "API \u670D\u52A1" : "DSH \u4F1A\u8BDD" })
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
               data.providers.find((p) => p.id === e.provider)?.name || e.provider,
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
@@ -1193,7 +1559,7 @@ function UsageDetails({ data, busy, act }) {
         ] }),
         !events.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "empty", children: "\u5F53\u524D\u7B5B\u9009\u548C\u4FDD\u7559\u671F\u9650\u5185\u6CA1\u6709\u8BF7\u6C42\u660E\u7EC6\u3002" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar table-footer", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
           "\u7B2C ",
           current + 1,
@@ -1603,129 +1969,161 @@ function CredentialForm({ modal, provider, data, busy, act, close, error, notice
   ] });
 }
 function MigrationForm({ data, act, busy }) {
+  const [panel, setPanel] = (0, import_react.useState)(null);
   const [include, setInclude] = (0, import_react.useState)(false), [exportPassword, setExportPassword] = (0, import_react.useState)(""), [confirmPassword, setConfirmPassword] = (0, import_react.useState)(""), [exportError, setExportError] = (0, import_react.useState)("");
   const [document2, setDocument] = (0, import_react.useState)(""), [fileName, setFileName] = (0, import_react.useState)(""), [password, setPassword] = (0, import_react.useState)(""), [mode, setMode] = (0, import_react.useState)("merge"), [preview, setPreview] = (0, import_react.useState)(null), [error, setError] = (0, import_react.useState)("");
   const resetPreview = () => {
     setPreview(null);
     setError("");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "box stack", onSubmit: async (e) => {
-      e.preventDefault();
-      setExportError("");
-      if (include && exportPassword !== confirmPassword) {
-        setExportError("\u4E24\u6B21\u8FC1\u79FB\u5BC6\u7801\u4E0D\u4E00\u81F4");
-        return;
-      }
-      const result = await act({ action: "config.export", includeCredentials: include, password: include ? exportPassword : void 0 });
-      if (!result) return;
-      downloadJson(result.exported);
-      setExportPassword("");
-      setConfirmPassword("");
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5BFC\u51FA\u5230\u5176\u4ED6\u8BBE\u5907" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5305\u542B\u8D26\u53F7\u540D\u79F0\u548C\u987A\u5E8F\u3001\u6A21\u578B\u5C55\u793A\u8BBE\u7F6E\u3001\u8DEF\u7531\u4E0E\u5207\u6362\u89C4\u5219\u3002\u4E0D\u4F1A\u5BFC\u51FA\u4F1A\u8BDD\u3001\u7EDF\u8BA1\u3001\u6587\u4EF6\u8DEF\u5F84\u6216\u7BA1\u7406\u5BC6\u94A5\u3002" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", checked: include, disabled: busy, onChange: (e) => {
-          setInclude(e.target.checked);
-          setExportPassword("");
-          setConfirmPassword("");
-        } }),
-        "\u540C\u65F6\u8FC1\u79FB\u8D26\u53F7\u767B\u5F55\u51ED\u8BC1\uFF08\u5BC6\u7801\u52A0\u5BC6\uFF09"
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u914D\u7F6E\u8FC1\u79FB" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5728\u8BBE\u5907\u95F4\u8FC1\u79FB\u8D26\u53F7\u3001\u6A21\u578B\u548C\u8DEF\u7531\u8BBE\u7F6E\u3002" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: "box table-shell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "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", { scope: "col", children: "\u64CD\u4F5C" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: "\u5185\u5BB9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", className: "cell-actions", children: "\u5F00\u59CB" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "\u5BFC\u51FA\u5230\u5176\u4ED6\u8BBE\u5907" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
+            "\u8D26\u53F7\u4E0E\u8DEF\u7531\u8BBE\u7F6E",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "muted", children: "\u53EF\u9009\u5BC6\u7801\u52A0\u5BC6\u643A\u5E26\u767B\u5F55\u51ED\u8BC1" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "cell-actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => setPanel("export"), children: "\u5BFC\u51FA\u914D\u7F6E" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "\u5BFC\u5165\u5DF2\u6709\u914D\u7F6E" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
+            "\u5148\u9884\u89C8\uFF0C\u518D\u786E\u8BA4\u5408\u5E76\u6216\u66FF\u6362",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "muted", children: "\u5BFC\u5165\u524D\u81EA\u52A8\u5907\u4EFD\u672C\u673A\u914D\u7F6E" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "cell-actions", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => setPanel("import"), children: "\u5BFC\u5165\u914D\u7F6E" }) })
+        ] })
+      ] })
+    ] }) }),
+    panel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, { title: panel === "export" ? "\u5BFC\u51FA\u914D\u7F6E" : "\u5BFC\u5165\u914D\u7F6E", busy, close: () => setPanel(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "modal-body stack", children: [
+      panel === "export" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "box stack", onSubmit: async (e) => {
+        e.preventDefault();
+        setExportError("");
+        if (include && exportPassword !== confirmPassword) {
+          setExportError("\u4E24\u6B21\u8FC1\u79FB\u5BC6\u7801\u4E0D\u4E00\u81F4");
+          return;
+        }
+        const result = await act({ action: "config.export", includeCredentials: include, password: include ? exportPassword : void 0 });
+        if (!result) return;
+        downloadJson(result.exported);
+        setExportPassword("");
+        setConfirmPassword("");
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5BFC\u51FA\u5230\u5176\u4ED6\u8BBE\u5907" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5305\u542B\u8D26\u53F7\u540D\u79F0\u548C\u987A\u5E8F\u3001\u6A21\u578B\u5C55\u793A\u8BBE\u7F6E\u3001\u8DEF\u7531\u4E0E\u5207\u6362\u89C4\u5219\u3002\u4E0D\u4F1A\u5BFC\u51FA\u4F1A\u8BDD\u3001\u7EDF\u8BA1\u3001\u6587\u4EF6\u8DEF\u5F84\u6216\u7BA1\u7406\u5BC6\u94A5\u3002" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", checked: include, disabled: busy, onChange: (e) => {
+            setInclude(e.target.checked);
+            setExportPassword("");
+            setConfirmPassword("");
+          } }),
+          "\u540C\u65F6\u8FC1\u79FB\u8D26\u53F7\u767B\u5F55\u51ED\u8BC1\uFF08\u5BC6\u7801\u52A0\u5BC6\uFF09"
+        ] }),
+        include ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "steps", children: "\u52A0\u5BC6\u6587\u4EF6\u5305\u542B\u767B\u5F55 Token / PAT \u548C\u5FC5\u8981\u8BBE\u5907\u8EAB\u4EFD\uFF0C\u8BF7\u81EA\u884C\u4FDD\u7BA1\u3002\u65B0\u8BBE\u5907\u9700\u8981\u540C\u4E00\u5BC6\u7801\uFF1B\u51ED\u8BC1\u53EF\u80FD\u56E0\u5E73\u53F0\u8BBE\u5907\u9650\u5236\u800C\u9700\u8981\u91CD\u65B0\u767B\u5F55\u3002" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+            "\u8BBE\u7F6E\u8FC1\u79FB\u5BC6\u7801",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "password", autoComplete: "new-password", required: true, minLength: "10", maxLength: "1024", value: exportPassword, disabled: busy, onChange: (e) => setExportPassword(e.target.value) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+            "\u518D\u6B21\u8F93\u5165\u5BC6\u7801",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "password", autoComplete: "new-password", required: true, value: confirmPassword, disabled: busy, onChange: (e) => setConfirmPassword(e.target.value) })
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "steps", children: "\u4EC5\u914D\u7F6E\u6587\u4EF6\u4E0D\u542B\u767B\u5F55\u51ED\u8BC1\u3002\u65B0\u8BBE\u5907\u4E0A\u7684\u8D26\u53F7\u4F1A\u5148\u505C\u7528\uFF0C\u8865\u5145\u51ED\u8BC1\u540E\u5373\u53EF\u542F\u7528\uFF1B\u5408\u5E76\u5BFC\u5165\u4F1A\u4FDD\u7559\u672C\u673A\u5DF2\u6709\u8D26\u53F7\u51ED\u8BC1\u3002" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Feedback, { error: exportError }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "primary", type: "submit", disabled: busy, children: include ? "\u5BFC\u51FA\u52A0\u5BC6\u8FC1\u79FB\u6587\u4EF6" : "\u5BFC\u51FA\u914D\u7F6E JSON" })
       ] }),
-      include ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "steps", children: "\u52A0\u5BC6\u6587\u4EF6\u5305\u542B\u767B\u5F55 Token / PAT \u548C\u5FC5\u8981\u8BBE\u5907\u8EAB\u4EFD\uFF0C\u8BF7\u81EA\u884C\u4FDD\u7BA1\u3002\u65B0\u8BBE\u5907\u9700\u8981\u540C\u4E00\u5BC6\u7801\uFF1B\u51ED\u8BC1\u53EF\u80FD\u56E0\u5E73\u53F0\u8BBE\u5907\u9650\u5236\u800C\u9700\u8981\u91CD\u65B0\u767B\u5F55\u3002" }),
+      panel === "import" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "box stack", onSubmit: async (e) => {
+        e.preventDefault();
+        setError("");
+        const result = await act({ action: "config.preview", document: document2, password, mode });
+        if (result) setPreview({ ...result.importPreview, revision: result.revision });
+      }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5BFC\u5165\u63D2\u4EF6\u914D\u7F6E" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          "\u8BBE\u7F6E\u8FC1\u79FB\u5BC6\u7801",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "password", autoComplete: "new-password", required: true, minLength: "10", maxLength: "1024", value: exportPassword, disabled: busy, onChange: (e) => setExportPassword(e.target.value) })
+          "\u9009\u62E9\u8FC1\u79FB JSON \u6587\u4EF6",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "file", accept: ".json,application/json", required: true, disabled: busy, onChange: async (e) => {
+            resetPreview();
+            setPassword("");
+            setDocument("");
+            const file = e.target.files?.[0];
+            if (!file) return;
+            if (file.size > 900 * 1024) {
+              setError("\u8FC1\u79FB\u6587\u4EF6\u4E0D\u80FD\u8D85\u8FC7 900 KB");
+              return;
+            }
+            try {
+              setDocument(await file.text());
+              setFileName(file.name);
+            } catch {
+              setError("\u65E0\u6CD5\u8BFB\u53D6\u6587\u4EF6");
+            }
+          } })
         ] }),
+        fileName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mono muted", children: fileName }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-          "\u518D\u6B21\u8F93\u5165\u5BC6\u7801",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "password", autoComplete: "new-password", required: true, value: confirmPassword, disabled: busy, onChange: (e) => setConfirmPassword(e.target.value) })
-        ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "steps", children: "\u4EC5\u914D\u7F6E\u6587\u4EF6\u4E0D\u542B\u767B\u5F55\u51ED\u8BC1\u3002\u65B0\u8BBE\u5907\u4E0A\u7684\u8D26\u53F7\u4F1A\u5148\u505C\u7528\uFF0C\u8865\u5145\u51ED\u8BC1\u540E\u5373\u53EF\u542F\u7528\uFF1B\u5408\u5E76\u5BFC\u5165\u4F1A\u4FDD\u7559\u672C\u673A\u5DF2\u6709\u8D26\u53F7\u51ED\u8BC1\u3002" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Feedback, { error: exportError }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "primary", type: "submit", disabled: busy, children: include ? "\u5BFC\u51FA\u52A0\u5BC6\u8FC1\u79FB\u6587\u4EF6" : "\u5BFC\u51FA\u914D\u7F6E JSON" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "box stack", onSubmit: async (e) => {
-      e.preventDefault();
-      setError("");
-      const result = await act({ action: "config.preview", document: document2, password, mode });
-      if (result) setPreview({ ...result.importPreview, revision: result.revision });
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5BFC\u5165\u63D2\u4EF6\u914D\u7F6E" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-        "\u9009\u62E9\u8FC1\u79FB JSON \u6587\u4EF6",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "file", accept: ".json,application/json", required: true, disabled: busy, onChange: async (e) => {
-          resetPreview();
-          setPassword("");
-          setDocument("");
-          const file = e.target.files?.[0];
-          if (!file) return;
-          if (file.size > 900 * 1024) {
-            setError("\u8FC1\u79FB\u6587\u4EF6\u4E0D\u80FD\u8D85\u8FC7 900 KB");
-            return;
-          }
-          try {
-            setDocument(await file.text());
-            setFileName(file.name);
-          } catch {
-            setError("\u65E0\u6CD5\u8BFB\u53D6\u6587\u4EF6");
-          }
-        } })
-      ] }),
-      fileName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mono muted", children: fileName }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-        "\u8FC1\u79FB\u5BC6\u7801\uFF08\u4EC5\u52A0\u5BC6\u6587\u4EF6\u9700\u8981\uFF09",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "password", autoComplete: "off", maxLength: "1024", disabled: busy, value: password, onChange: (e) => {
-          setPassword(e.target.value);
-          resetPreview();
-        } })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-        "\u5BFC\u5165\u65B9\u5F0F",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { disabled: busy, value: mode, onChange: (e) => {
-          setMode(e.target.value);
-          resetPreview();
-        }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "merge", children: "\u5408\u5E76\uFF1A\u4FDD\u7559\u672C\u673A\u989D\u5916\u8D26\u53F7\u548C\u8DEF\u7531" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "replace", children: "\u66FF\u6362\uFF1A\u4F7F\u7528\u5BFC\u5165\u6587\u4EF6\u7684\u5B8C\u6574\u914D\u7F6E" })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5408\u5E76\u65F6\u540C ID \u7684\u914D\u7F6E\u4F1A\u66F4\u65B0\uFF1B\u5E26\u51ED\u8BC1\u7684\u8D26\u53F7\u4F1A\u66F4\u65B0\u767B\u5F55\u526F\u672C\u3002\u66FF\u6362\u4F1A\u79FB\u51FA\u73B0\u6709\u914D\u7F6E\u4E2D\u7684\u989D\u5916\u8D26\u53F7 / \u8DEF\u7531\uFF0C\u4F46\u4FDD\u7559\u539F\u51ED\u8BC1\u6587\u4EF6\u3002\u4E24\u79CD\u65B9\u5F0F\u90FD\u4F1A\u5148\u5907\u4EFD\u672C\u673A\u914D\u7F6E\u3002" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Feedback, { error }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", disabled: busy || !document2, children: "\u68C0\u67E5\u6587\u4EF6\u5E76\u9884\u89C8\u53D8\u66F4" }),
-      preview && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "steps stack", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5BFC\u5165\u9884\u89C8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
-          preview.accounts,
-          " \u4E2A\u8D26\u53F7\uFF08\u65B0\u589E ",
-          preview.newAccounts,
-          "\uFF09 \xB7 ",
-          preview.credentials,
-          " \u4EFD\u51ED\u8BC1",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-          preview.routes,
-          " \u6761\u8DEF\u7531 \xB7 \u66F4\u65B0\u540C\u540D\u8DEF\u7531 ",
-          preview.overwrittenRoutes,
-          " \u6761",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-          preview.needsLogin,
-          " \u4E2A\u65B0\u8D26\u53F7\u9700\u8865\u5145\u767B\u5F55\uFF0C\u5C06\u5148\u505C\u7528"
+          "\u8FC1\u79FB\u5BC6\u7801\uFF08\u4EC5\u52A0\u5BC6\u6587\u4EF6\u9700\u8981\uFF09",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "password", autoComplete: "off", maxLength: "1024", disabled: busy, value: password, onChange: (e) => {
+            setPassword(e.target.value);
+            resetPreview();
+          } })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "primary", type: "button", disabled: busy, onClick: async () => {
-          if (await act({ action: "config.import", revision: preview.revision, document: document2, password, mode })) {
-            setDocument("");
-            setPassword("");
-            setPreview(null);
-          }
-        }, children: [
-          "\u786E\u8BA4",
-          mode === "merge" ? "\u5408\u5E76" : "\u66FF\u6362",
-          "\u5E76\u5BFC\u5165"
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+          "\u5BFC\u5165\u65B9\u5F0F",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { disabled: busy, value: mode, onChange: (e) => {
+            setMode(e.target.value);
+            resetPreview();
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "merge", children: "\u5408\u5E76\uFF1A\u4FDD\u7559\u672C\u673A\u989D\u5916\u8D26\u53F7\u548C\u8DEF\u7531" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "replace", children: "\u66FF\u6362\uFF1A\u4F7F\u7528\u5BFC\u5165\u6587\u4EF6\u7684\u5B8C\u6574\u914D\u7F6E" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5408\u5E76\u65F6\u540C ID \u7684\u914D\u7F6E\u4F1A\u66F4\u65B0\uFF1B\u5E26\u51ED\u8BC1\u7684\u8D26\u53F7\u4F1A\u66F4\u65B0\u767B\u5F55\u526F\u672C\u3002\u66FF\u6362\u4F1A\u79FB\u51FA\u73B0\u6709\u914D\u7F6E\u4E2D\u7684\u989D\u5916\u8D26\u53F7 / \u8DEF\u7531\uFF0C\u4F46\u4FDD\u7559\u539F\u51ED\u8BC1\u6587\u4EF6\u3002\u4E24\u79CD\u65B9\u5F0F\u90FD\u4F1A\u5148\u5907\u4EFD\u672C\u673A\u914D\u7F6E\u3002" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Feedback, { error }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", disabled: busy || !document2, children: "\u68C0\u67E5\u6587\u4EF6\u5E76\u9884\u89C8\u53D8\u66F4" }),
+        preview && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "steps stack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5BFC\u5165\u9884\u89C8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
+            preview.accounts,
+            " \u4E2A\u8D26\u53F7\uFF08\u65B0\u589E ",
+            preview.newAccounts,
+            "\uFF09 \xB7 ",
+            preview.credentials,
+            " \u4EFD\u51ED\u8BC1",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+            preview.routes,
+            " \u6761\u8DEF\u7531 \xB7 \u66F4\u65B0\u540C\u540D\u8DEF\u7531 ",
+            preview.overwrittenRoutes,
+            " \u6761",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+            preview.needsLogin,
+            " \u4E2A\u65B0\u8D26\u53F7\u9700\u8865\u5145\u767B\u5F55\uFF0C\u5C06\u5148\u505C\u7528"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "primary", type: "button", disabled: busy, onClick: async () => {
+            if (await act({ action: "config.import", revision: preview.revision, document: document2, password, mode })) {
+              setDocument("");
+              setPassword("");
+              setPreview(null);
+            }
+          }, children: [
+            "\u786E\u8BA4",
+            mode === "merge" ? "\u5408\u5E76" : "\u66FF\u6362",
+            "\u5E76\u5BFC\u5165"
+          ] })
         ] })
       ] })
-    ] })
+    ] }) })
   ] });
 }
 function ExpiryStatus({ route, act, busy, revision, onForce }) {
@@ -1761,40 +2159,45 @@ function FreeStatus({ route, busy, act, onUpdate }) {
       }, children: status?.checking ? "\u6B63\u5728\u68C0\u67E5\u2026" : "\u7ACB\u5373\u68C0\u67E5\u514D\u8D39\u6A21\u578B" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u6309\u6A21\u578B\u81EA\u52A8\u521B\u5EFA\u8DEF\u7531\uFF0C\u52FE\u9009\u540E\u5206\u522B\u51FA\u73B0\u5728 DSH \u6A21\u578B\u5217\u8868\u4E2D\u3002\u540C\u4E00\u6A21\u578B\u53EA\u5728\u6709\u514D\u8D39\u8D44\u683C\u4E14\u652F\u6301\u6240\u9009\u63A8\u7406\u7B49\u7EA7\u7684\u8D26\u53F7\u95F4\u5207\u6362\uFF0C\u4E0D\u6DF7\u7528\u5176\u4ED6\u6A21\u578B\u3002\u6BCF\u5929\u68C0\u67E5\uFF0C\u8C03\u7528\u524D\u590D\u6838\uFF1B\u6062\u590D\u6536\u8D39\u6216\u68C0\u67E5\u5931\u8D25\u65F6\u81EA\u52A8\u79FB\u51FA\uFF0C\u514D\u8D39\u6062\u590D\u540E\u4FDD\u7559\u4F60\u7684\u52FE\u9009\u548C\u6863\u4F4D\u8BBE\u7F6E\u3002" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid", children: models.map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "box stack", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: m.modelName }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", "aria-label": `\u5C55\u793A ${m.modelName}`, disabled: busy, checked: m.selected, onChange: (e) => {
-            void update(m, { visible: e.target.checked });
-          } }),
-          "\u5C55\u793A"
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
-        m.name.split(" \xB7 ").at(-1),
-        " \xB7 ",
-        m.accountNames.join("\u3001"),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-        "\u4E0A\u4E0B\u6587 ",
-        fmt(m.contextWindow / 1e3),
-        "K \xB7 \u8F93\u51FA ",
-        fmt(m.maxTokens / 1e3),
-        "K"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
-        "\u9ED8\u8BA4\u63A8\u7406\u7B49\u7EA7 \xB7 ",
-        m.modelName,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { disabled: busy || !m.reasoning?.supportedEfforts?.length, value: m.effortUnavailable ? "" : m.configuredEffort || "", onChange: (e) => {
-          void update(m, { reasoningEffort: e.target.value || null });
-        }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\u5E73\u53F0\u9ED8\u8BA4" }),
-          m.reasoning?.supportedEfforts?.map((e) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: e, children: effortNames[e] || e }, e))
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "box table-shell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "scroll", role: "region", "aria-label": "\u514D\u8D39\u6A21\u578B\u5C55\u793A\u4E0E\u63A8\u7406\u7B49\u7EA7", tabIndex: "0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "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", { scope: "col", children: "\u6A21\u578B / \u5C55\u793A" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: "\u53EF\u7528\u8D26\u53F7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: "\u63A8\u7406\u7B49\u7EA7" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: models.map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: m.selected ? "selected" : "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "check", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", "aria-label": `\u5C55\u793A ${m.modelName}`, disabled: busy, checked: m.selected, onChange: (e) => {
+              void update(m, { visible: e.target.checked });
+            } }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: m.modelName })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("small", { className: "muted", children: [
+            m.name.split(" \xB7 ").at(-1),
+            " \xB7 ",
+            fmt(m.contextWindow / 1e3),
+            "K \u4E0A\u4E0B\u6587"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: m.accountNames.join("\u3001") || "\u6682\u65E0\u8D26\u53F7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "sr-only", children: [
+              m.modelName,
+              " \u63A8\u7406\u7B49\u7EA7"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { "aria-label": `${m.modelName} \u63A8\u7406\u7B49\u7EA7`, disabled: busy, value: m.reasoningEffort || "", onChange: (e) => {
+              void update(m, { reasoningEffort: e.target.value || null });
+            }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\u5E73\u53F0\u9ED8\u8BA4" }),
+              m.reasoning?.supportedEfforts?.map((e) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: e, children: effortNames[e] || e }, e))
+            ] })
+          ] }),
+          m.effortUnavailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "warn", children: "\u539F\u6863\u4F4D\u6682\u4E0D\u53EF\u7528\uFF0C\u4F7F\u7528\u5E73\u53F0\u9ED8\u8BA4" })
         ] })
-      ] }),
-      !m.reasoning?.supportedEfforts?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u5E73\u53F0\u672A\u58F0\u660E\u53EF\u8C03\u6863\u4F4D\uFF0C\u4F7F\u7528\u5E73\u53F0\u9ED8\u8BA4\u3002" }),
-      m.effortUnavailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u4E4B\u524D\u9009\u62E9\u7684\u6863\u4F4D\u6682\u4E0D\u53EF\u7528\uFF0C\u5F53\u524D\u4F7F\u7528\u5E73\u53F0\u9ED8\u8BA4\u3002" })
-    ] }, m.id)) }),
+      ] }, m.id)) })
+    ] }) }) }),
     !models.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u6682\u65E0\u786E\u8BA4\u514D\u8D39\u7684\u6A21\u578B\u3002\u6DFB\u52A0\u5E76\u542F\u7528\u8D26\u53F7\uFF0C\u6216\u7ACB\u5373\u68C0\u67E5\u76EE\u5F55\u3002" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "\u5404\u8D26\u53F7\u68C0\u67E5\u72B6\u6001" }),
@@ -2014,6 +2417,7 @@ function InitialSetup({ data, busy, act, go }) {
 var updateNames = { unchecked: "\u5F85\u68C0\u67E5", available: "\u53EF\u66F4\u65B0", current: "\u5DF2\u540C\u6B65", pinned: "\u56FA\u5B9A\u63D0\u4EA4", unsupported: "\u672C\u5730\u6765\u6E90", failed: "\u68C0\u67E5 / \u5B89\u88C5\u5931\u8D25", installed: "\u5DF2\u5B89\u88C5" };
 function PluginUpdatesPanel({ data, busy, act }) {
   const [query, setQuery] = (0, import_react.useState)(""), [selected, setSelected] = (0, import_react.useState)([]), [plan, setPlan] = (0, import_react.useState)(null), [registry, setRegistry] = (0, import_react.useState)(""), [filter, setFilter] = (0, import_react.useState)("all"), [pluginSearch, setPluginSearch] = (0, import_react.useState)("");
+  const [diagnostic, setDiagnostic] = (0, import_react.useState)(null), [copied, setCopied] = (0, import_react.useState)(false);
   const running = data?.job?.state === "running", blocked = busy || running;
   const rows = (data?.rows ?? []).filter((r) => r.source.kind !== "builtin"), available = rows.filter((r) => r.status === "available" || r.status === "failed" && r.target);
   (0, import_react.useEffect)(() => {
@@ -2036,34 +2440,40 @@ function PluginUpdatesPanel({ data, busy, act }) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u7528\u6237\u5B89\u88C5\u7684\u63D2\u4EF6\u4E0E\u66F4\u65B0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "npm \u6309\u7248\u672C / \u53D1\u5E03\u9891\u9053\u68C0\u67E5\uFF1BGitHub \u6309\u5206\u652F\u63D0\u4EA4\u68C0\u67E5\uFF0C\u7248\u672C\u53F7\u4E0D\u53D8\u4E5F\u80FD\u53D1\u73B0\u66F4\u65B0\u3002" })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
+            rows.length,
+            " \u4E2A\u7528\u6237\u5B89\u88C5\u63D2\u4EF6 \xB7 ",
+            available.length,
+            " \u4E2A\u53EF\u66F4\u65B0"
+          ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "primary", disabled: blocked, onClick: () => {
           void act({ action: "plugins.check" });
         }, children: "\u68C0\u67E5\u5168\u90E8\u66F4\u65B0" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
-          rows.length,
-          " \u4E2A\u7528\u6237\u5B89\u88C5\u63D2\u4EF6 \xB7 ",
-          available.length,
-          " \u4E2A\u53EF\u66F4\u65B0 \xB7 \u4E0A\u6B21\u68C0\u67E5 ",
-          when(data.checkedAt)
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "filter", children: [
-          "npm \u5B89\u88C5\u6E90",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { value: registry, disabled: blocked, onChange: (e) => setRegistry(e.target.value), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "DSH \u8BBE\u7F6E\uFF08\u542B\u56DE\u9000\u6765\u6E90\uFF09" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "https://registry.npmjs.org/", children: "npm \u5B98\u65B9" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "https://registry.npmmirror.com/", children: "npmmirror" })
-          ] })
-        ] })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
+        "\u4E0A\u6B21\u68C0\u67E5 ",
+        when(data.checkedAt),
+        " \xB7 \u6BCF\u5929\u81EA\u52A8\u68C0\u67E5\u5E76\u63D0\u9192"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u66F4\u65B0\u6CBF\u7528\u539F npm / GitHub \u6765\u6E90\uFF0C\u5E76\u4FDD\u7559\u542F\u7528\u72B6\u6001\uFF1Bnpm \u56FA\u5B9A\u7248\u672C\u548C\u8303\u56F4\u5347\u7EA7\u5230\u6240\u5728\u9891\u9053\u7684\u6700\u65B0\u7248\u672C\uFF0CGit \u56FA\u5B9A\u63D0\u4EA4\u4FDD\u6301\u4E0D\u52A8\u3002" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { className: "help", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "\u5B89\u88C5\u6E90\u4E0E\u68C0\u67E5\u89C4\u5219" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "filter", children: [
+            "npm \u5B89\u88C5\u6E90",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", { value: registry, disabled: blocked, onChange: (e) => setRegistry(e.target.value), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "DSH \u8BBE\u7F6E\uFF08\u542B\u56DE\u9000\u6765\u6E90\uFF09" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "https://registry.npmjs.org/", children: "npm \u5B98\u65B9" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "https://registry.npmmirror.com/", children: "npmmirror" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "npm \u6309\u7248\u672C / \u53D1\u5E03\u9891\u9053\u68C0\u67E5\uFF0CGitHub \u6309\u5206\u652F\u63D0\u4EA4\u68C0\u67E5\uFF1B\u4FDD\u7559\u542F\u7528\u72B6\u6001\uFF0C\u56FA\u5B9A Git \u63D0\u4EA4\u4FDD\u6301\u4E0D\u52A8\u3002" })
+        ] })
+      ] })
     ] }),
     data.job && !(data.job.kind === "check" && data.job.state === "done") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box stack", "aria-live": "polite", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: running ? data.job.kind === "check" ? "\u6B63\u5728\u68C0\u67E5\u66F4\u65B0\u2026" : "\u6B63\u5728\u5B89\u88C5\u63D2\u4EF6\u2026" : data.job.state === "cancelled" ? "\u64CD\u4F5C\u5DF2\u53D6\u6D88" : data.job.state === "failed" ? "\u64CD\u4F5C\u672A\u5B8C\u6210" : "\u64CD\u4F5C\u5DF2\u5B8C\u6210" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: running ? data.job.kind === "check" ? "\u6B63\u5728\u68C0\u67E5\u66F4\u65B0\u2026" : "\u6B63\u5728\u5B89\u88C5\u63D2\u4EF6\u2026" : data.job.state === "cancelled" ? "\u64CD\u4F5C\u5DF2\u53D6\u6D88" : data.job.state === "failed" || data.job.results.some((r) => r.status === "failed") ? "\u6709\u63D2\u4EF6\u672A\u5B8C\u6210\u5B89\u88C5" : "\u64CD\u4F5C\u5DF2\u5B8C\u6210" }),
         running && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: busy, onClick: () => {
           void act({ action: "plugins.cancel" });
         }, children: "\u53D6\u6D88" })
@@ -2079,6 +2489,10 @@ function PluginUpdatesPanel({ data, busy, act }) {
       data.job.results.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "item", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: r.name }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: r.status === "failed" ? "error" : "notice", children: r.message || updateNames[r.status] || r.status }),
+        r.diagnostic && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => {
+          setCopied(false);
+          setDiagnostic(JSON.stringify({ plugin: r.name, targetVersion: r.expectedVersion, ...r.diagnostic }, null, 2));
+        }, children: "\u67E5\u770B\u8131\u654F\u8BCA\u65AD" }),
         r.pendingBuilds?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "notice", children: [
           "\u5F85\u6388\u6743\u811A\u672C\uFF1A",
           r.pendingBuilds.join("\u3001"),
@@ -2087,8 +2501,8 @@ function PluginUpdatesPanel({ data, busy, act }) {
       ] }, r.name + i)),
       data.job.results.some((r) => r.restartRequired) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "steps", children: "\u66F4\u65B0\u6587\u4EF6\u5DF2\u5B89\u88C5\u3002macOS \u4F7F\u7528 \u2318Q \u5B8C\u5168\u9000\u51FA DSH \u540E\u91CD\u5F00\uFF1BWindows \u9000\u51FA\u6258\u76D8\u5E94\u7528\u540E\u91CD\u5F00\uFF1B\u7F51\u9875\u7248\u91CD\u542F\u670D\u52A1\u3002\u5173\u95ED\u7A97\u53E3\u548C\u300C\u5237\u65B0\u9762\u677F\u300D\u4E0D\u4F1A\u91CD\u8F7D\u540E\u53F0\u3002" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box stack", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box table-shell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bar section-pad", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: blocked || !available.length, onClick: () => setSelected(available.map((r) => r.name)), children: "\u9009\u62E9\u5168\u90E8\u53EF\u66F4\u65B0" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: blocked || !selected.length, onClick: () => setSelected([]), children: "\u6E05\u7A7A\u9009\u62E9" })
@@ -2099,7 +2513,7 @@ function PluginUpdatesPanel({ data, busy, act }) {
           "\uFF09"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "row section-pad", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { flex: 1 }, children: [
           "\u641C\u7D22\u5DF2\u5B89\u88C5\u63D2\u4EF6",
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { value: pluginSearch, onChange: (e) => setPluginSearch(e.target.value), placeholder: "\u6309\u63D2\u4EF6\u540D\u79F0\u7B5B\u9009" })
@@ -2132,7 +2546,7 @@ function PluginUpdatesPanel({ data, busy, act }) {
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
               r.source.kind === "npm" ? `npm \xB7 ${r.version || "\u672A\u77E5"}${r.latestVersion ? " \u2192 " + r.latestVersion : ""}` : r.source.kind === "github" ? `GitHub \xB7 ${r.version || "\u672A\u77E5\u7248\u672C"}` : "\u672C\u5730\u6587\u4EF6 / \u5F00\u53D1\u94FE\u63A5",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "muted mono", children: r.source.kind === "npm" ? r.source.tag : r.source.kind === "github" ? `${r.commit?.slice(0, 8) || "\u672A\u77E5\u63D0\u4EA4"}${r.latestCommit ? " \u2192 " + r.latestCommit.slice(0, 8) : ""}` : "" })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "muted mono", children: r.source.kind === "npm" ? `\u5B89\u88C5\u58F0\u660E ${r.source.source} \xB7 \u68C0\u67E5 ${r.source.tag}` : r.source.kind === "github" ? `${r.commit?.slice(0, 8) || "\u672A\u77E5\u63D0\u4EA4"}${r.latestCommit ? " \u2192 " + r.latestCommit.slice(0, 8) : ""}` : "" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: r.status === "failed" ? "error" : r.status === "available" ? "good" : "muted", children: updateNames[r.status] }),
@@ -2144,21 +2558,35 @@ function PluginUpdatesPanel({ data, busy, act }) {
         !visibleRows.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "empty", children: running ? "\u6B63\u5728\u8BFB\u53D6\u63D2\u4EF6\u6E05\u5355\u2026" : rows.length ? "\u6CA1\u6709\u5339\u914D\u7684\u5DF2\u5B89\u88C5\u63D2\u4EF6\uFF0C\u8BF7\u8C03\u6574\u7B5B\u9009\u3002" : "\u5F53\u524D\u914D\u7F6E\u5C1A\u672A\u8BFB\u53D6\u63D2\u4EF6\uFF0C\u8BF7\u68C0\u67E5\u66F4\u65B0\u3002" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "box stack", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "\u5B89\u88C5 npm / GitHub \u63D2\u4EF6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "row", onSubmit: (e) => {
-        e.preventDefault();
-        const spec = new FormData(e.currentTarget).get("spec").trim();
-        if (spec) setPlan({ kind: "install", spec });
-      }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { flex: 1 }, children: [
-          "\u5B89\u88C5\u5730\u5740",
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { name: "spec", value: query, onChange: (e) => setQuery(e.target.value), disabled: blocked, required: true, placeholder: "\u5305\u540D\u3001\u5305\u540D@\u7248\u672C \u6216 github:\u7528\u6237/\u4ED3\u5E93", autoComplete: "off" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { className: "box help install-plugin", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "\u5B89\u88C5 npm / GitHub \u63D2\u4EF6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "row", onSubmit: (e) => {
+          e.preventDefault();
+          const spec = new FormData(e.currentTarget).get("spec").trim();
+          if (spec) setPlan({ kind: "install", spec });
+        }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { flex: 1 }, children: [
+            "\u5B89\u88C5\u5730\u5740",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { name: "spec", value: query, onChange: (e) => setQuery(e.target.value), disabled: blocked, required: true, placeholder: "\u5305\u540D\u3001\u5305\u540D@\u7248\u672C \u6216 github:\u7528\u6237/\u4ED3\u5E93", autoComplete: "off" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: blocked || !query.trim(), children: "\u67E5\u770B\u5E76\u5B89\u88C5" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { disabled: blocked || !query.trim(), children: "\u67E5\u770B\u5E76\u5B89\u88C5" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u4F7F\u7528 DSH \u81EA\u5E26\u5B89\u88C5\u5668\u6267\u884C\u517C\u5BB9\u68C0\u67E5\u3001\u955C\u50CF\u91CD\u8BD5\u548C\u5931\u8D25\u56DE\u6EDA\u3002npm \u955C\u50CF\u53EA\u4F5C\u7528\u4E8E npm \u5305\uFF0CGitHub \u4E0B\u8F7D\u5931\u8D25\u9700\u68C0\u67E5 GitHub \u7F51\u7EDC\u3002\u7F51\u7EDC\u5931\u8D25\u540E\u53EF\u91CD\u65B0\u68C0\u67E5\u6216\u66F4\u6362 npm \u5B89\u88C5\u6E90\u518D\u91CD\u8BD5\u3002" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u4F7F\u7528 DSH \u81EA\u5E26\u5B89\u88C5\u5668\u6267\u884C\u517C\u5BB9\u68C0\u67E5\u3001\u955C\u50CF\u91CD\u8BD5\u548C\u5931\u8D25\u56DE\u6EDA\u3002npm \u955C\u50CF\u53EA\u4F5C\u7528\u4E8E npm \u5305\uFF0CGitHub \u4E0B\u8F7D\u5931\u8D25\u9700\u68C0\u67E5 GitHub \u7F51\u7EDC\u3002\u7F51\u7EDC\u5931\u8D25\u540E\u53EF\u91CD\u65B0\u68C0\u67E5\u6216\u66F4\u6362 npm \u5B89\u88C5\u6E90\u518D\u91CD\u8BD5\u3002" })
+      ] })
     ] }),
+    diagnostic && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Modal, { title: "\u63D2\u4EF6\u5B89\u88C5\u8BCA\u65AD", close: () => setDiagnostic(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "modal-body stack", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "notice", children: "\u4EE5\u4E0B\u4FE1\u606F\u53EA\u542B\u63D2\u4EF6\u540D\u3001\u7248\u672C\u3001\u7CFB\u7EDF\u548C\u9519\u8BEF\u5206\u7C7B\uFF0C\u53EF\u590D\u5236\u7528\u4E8E\u6392\u67E5\uFF1B\u672A\u5305\u542B\u539F\u59CB\u65E5\u5FD7\u3001\u7528\u6237\u540D\u8DEF\u5F84\u6216\u51ED\u8BC1\u3002\u82E5\u539F\u56E0\u672A\u77E5\uFF0C\u8BF7\u5728 DSH \u539F\u751F\u63D2\u4EF6\u9875\u83B7\u53D6\u5B89\u88C5\u65E5\u5FD7\u3002" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { "aria-label": "\u8131\u654F\u5B89\u88C5\u8BCA\u65AD", readOnly: true, rows: "9", value: diagnostic, onFocus: (e) => e.currentTarget.select() }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: async () => {
+        try {
+          await navigator.clipboard.writeText(diagnostic);
+          setCopied(true);
+        } catch {
+          setCopied(false);
+        }
+      }, children: copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236\u8BCA\u65AD" })
+    ] }) }),
     plan && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, { title: plan.kind === "install" ? "\u786E\u8BA4\u5B89\u88C5\u63D2\u4EF6" : "\u786E\u8BA4\u66F4\u65B0\u63D2\u4EF6", close: () => setPlan(null), busy: blocked, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "modal-body stack", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "\u8FD9\u4E9B\u64CD\u4F5C\u4F5C\u7528\u4E8E\u5F53\u524D DSH \u914D\u7F6E\u7684\u6240\u6709\u4F1A\u8BDD\u3002\u5B89\u88C5\u540E\u662F\u5426\u9700\u8981\u91CD\u542F\uFF0C\u4F1A\u5728\u7ED3\u679C\u4E2D\u8BF4\u660E\u3002" }),