dsh-multi-router 0.5.7 → 0.5.9

package/lib/client.js

@@ -23,9 +23,11 @@ __export(client_exports, {
   AccountPool: () => AccountPool,
   CheckinPanel: () => CheckinPanel,
   InitialSetup: () => InitialSetup,
+  ModelsPanel: () => ModelsPanel,
   PluginUpdatesPanel: () => PluginUpdatesPanel,
   RestartGuidance: () => RestartGuidance,
   RouterPage: () => RouterPage,
+  RoutesTable: () => RoutesTable,
   UpdateReminder: () => UpdateReminder,
   UsageDetails: () => UsageDetails,
   apply: () => apply,
@@ -42,7 +44,7 @@ module.exports = __toCommonJS(client_exports);
 var import_react = require("react");
 
 // package.json
-var version = "0.5.7";
+var version = "0.5.9";
 
 // src/client.jsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -113,12 +115,18 @@ 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", key: "dsh-multi-router-updates" }, UpdateReminder));
+  ctx.slots.inject("shell.overlay", () => ctx.slots.register({ name: "shell.overlay", id: "dsh-multi-router-updates" }, UpdateReminder));
 }
 function Modal({ title, close, children, busy }) {
   const ref = (0, import_react.useRef)(null);
@@ -270,7 +278,7 @@ function RouterPage({ view = "page" }) {
       }).finally(() => {
         polling.current = false;
       });
-    }, 15e3);
+    }, 6e4);
     return () => {
       stopped = true;
       abort.abort();
@@ -281,7 +289,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;
@@ -364,6 +372,10 @@ function RouterPage({ view = "page" }) {
           /* @__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" })
@@ -400,83 +412,27 @@ 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 === "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 +440,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 +494,135 @@ function RouterPage({ view = "page" }) {
     }, error, notice }) })
   ] });
 }
+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 +895,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 +915,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 +952,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 +967,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 +1032,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: [
@@ -1137,7 +1170,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: [
@@ -1193,7 +1226,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 +1636,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 +1826,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 +2084,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 +2107,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 +2156,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 +2168,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 +2180,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 +2213,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 +2225,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" }),