@wenbin_wb/dsh-bridge 2.2.4 → 2.2.6

package/client/client.js

@@ -42,6 +42,7 @@ var BRIDGE_ENDPOINTS = {
   resetCloudflared: "resetCloudflared",
   saveCustomTunnelConfig: "saveCustomTunnelConfig",
   checkVersion: "checkVersion",
+  upgradePlugin: "upgradePlugin",
   // 平台管理器（多 IM 平台统一接口）
   listPlatforms: "listPlatforms",
   platformLogin: "platformLogin",
@@ -89,20 +90,73 @@ function semverGt(a, b) {
   return av.pre > bv.pre;
 }
 var s = {
-  card: { background: "var(--dsw-alias-bg-layer-1,transparent)", border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", borderRadius: 12, padding: "16px 20px", marginBottom: 16 },
+  card: { background: "var(--dsw-alias-bg-layer-2,#f9fafb)", border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", borderRadius: 12, padding: "16px 20px", marginBottom: 16 },
   block: { borderTop: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", marginTop: 12, paddingTop: 12 },
   muted: { color: "var(--dsw-alias-label-tertiary,#8b93a1)", fontSize: 12, lineHeight: 1.5 },
   label: { color: "var(--dsw-alias-label-primary,currentColor)", fontSize: 13, fontWeight: 500 },
   code: { fontFamily: "ui-monospace,Menlo,monospace", fontSize: 12, wordBreak: "break-all", color: "var(--dsw-alias-label-primary,currentColor)" },
   btnPri: { font: "inherit", cursor: "pointer", border: "none", background: "var(--dsw-alias-brand-primary,#4f6ef7)", color: "var(--dsw-alias-label-primary-foreground,#fff)", height: 32, padding: "0 14px", borderRadius: 999, fontSize: 13, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 4 },
-  btnGhost: { font: "inherit", cursor: "pointer", border: "1px solid var(--dsw-alias-border-l2,#d1d5db)", background: "var(--dsw-alias-bg-layer-1,transparent)", color: "var(--dsw-alias-label-primary,currentColor)", height: 32, padding: "0 14px", borderRadius: 999, fontSize: 13, display: "inline-flex", alignItems: "center", gap: 4, textDecoration: "none" },
+  btnGhost: { font: "inherit", cursor: "pointer", border: "1px solid var(--dsw-alias-border-l2,#d1d5db)", background: "var(--dsw-alias-bg-layer-2,#f9fafb)", color: "var(--dsw-alias-label-primary,currentColor)", height: 32, padding: "0 14px", borderRadius: 999, fontSize: 13, display: "inline-flex", alignItems: "center", gap: 4, textDecoration: "none" },
   btnLink: { font: "inherit", cursor: "pointer", border: "none", background: "none", color: "var(--dsw-alias-brand-primary,#4f6ef7)", fontSize: 12, padding: 0, display: "inline-flex", alignItems: "center", gap: 3, textDecoration: "none" },
-  qr: { width: 200, height: 200, borderRadius: 10, border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", margin: "8px 0", display: "block" },
+  qr: { width: 200, height: 200, borderRadius: 10, border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", margin: "8px 0", display: "block", background: "#ffffff", padding: 6, boxSizing: "border-box" },
   tag: { display: "inline-flex", alignItems: "center", padding: "2px 8px", borderRadius: 999, fontSize: 12, fontWeight: 500 },
-  input: { width: "100%", font: "inherit", fontSize: 13, padding: "7px 10px", borderRadius: 8, border: "1px solid var(--dsw-alias-border-l2,#d1d5db)", background: "var(--dsw-alias-bg-layer-1,transparent)", color: "var(--dsw-alias-label-primary,currentColor)", outline: "none", boxSizing: "border-box" },
+  input: { width: "100%", font: "inherit", fontSize: 13, padding: "7px 10px", borderRadius: 8, border: "1px solid var(--dsw-alias-border-l2,#d1d5db)", background: "var(--dsw-alias-bg-layer-2,#f9fafb)", color: "var(--dsw-alias-label-primary,currentColor)", outline: "none", boxSizing: "border-box" },
   warn: { background: "var(--dsw-alias-state-warn-bg,#fffbeb)", border: "1px solid var(--dsw-alias-state-warn-border,#fde68a)", borderRadius: 8, padding: "10px 14px", fontSize: 12, color: "var(--dsw-alias-state-warn-primary,#92400e)", lineHeight: 1.6 },
   tip: { background: "var(--dsw-alias-bg-layer-2,#f9fafb)", borderRadius: 8, padding: "10px 14px", fontSize: 12, color: "var(--dsw-alias-label-secondary,#6b7280)", lineHeight: 1.6 }
 };
+var Icons = {
+  wechat: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 18, height: 18, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M8.5 2C4.36 2 1 4.91 1 8.5c0 2.01 1.05 3.81 2.69 4.97l-.69 2.06 2.45-1.22c.94.43 1.98.69 3.05.69.21 0 .42-.01.62-.03-.23-.62-.37-1.28-.37-1.97 0-3.59 3.36-6.5 7.5-6.5.21 0 .41.01.62.03C15.87 4.54 12.44 2 8.5 2zM6 6.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zm5 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zm7.5 3.5c-3.59 0-6.5 2.46-6.5 5.5 0 1.66.86 3.14 2.21 4.1l-.56 1.69 2.01-1c.78.36 1.64.57 2.54.57 3.59 0 6.5-2.46 6.5-5.5s-2.91-5.5-6.5-5.5zm-2 4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" })
+  ),
+  qq: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 18, height: 18, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 2C7.58 2 4 5.37 4 9.53c0 1.95.78 3.73 2.07 5.07-.37 1.15-.99 2.19-1.8 3.08-.18.2-.04.52.23.52 2.22 0 3.99-1.07 4.9-1.86.8.25 1.66.39 2.6.39 4.42 0 8-3.37 8-7.53S16.42 2 12 2zm-3 8a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm6 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z" })
+  ),
+  feishu: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 18, height: 18, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 2.5L3.5 11.2l6.8 1.8 2.2 6.5 1.8-4.7 5.2-1.4L12 2.5zm-.8 11.1l-4.1-1.1 6.5-6.6-4.2 8.3 1.8-.6z" })
+  ),
+  telegram: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 18, height: 18, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z" })
+  ),
+  lan: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 16, height: 16, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.29 19.3a1 1 0 0 0 1.41 1.41l1.7-1.7C9.02 19.64 10.46 20 12 20c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 15c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" })
+  ),
+  tunnel: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 16, height: 16, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3z" })
+  ),
+  bot: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 16, height: 16, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M20 9V7c0-1.1-.9-2-2-2h-3c0-1.66-1.34-3-3-3S9 3.34 9 5H6c-1.1 0-2 .9-2 2v2c-1.66 0-3 1.34-3 3s1.34 3 3 3v4c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-4c1.66 0 3-1.34 3-3s-1.34-3-3-3zm-2 10H6V7h12v12zm-9-6c-.83 0-1.5-.67-1.5-1.5S8.17 10 9 10s1.5.67 1.5 1.5S9.83 13 9 13zm6 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" })
+  ),
+  github: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 13, height: 13, fill: "currentColor", ...props },
+    React.createElement("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" })
+  ),
+  refresh: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 12, height: 12, fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", ...props },
+    React.createElement("path", { d: "M23 4v6h-6M1 20v-6h6" }),
+    React.createElement("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })
+  ),
+  check: (props) => React.createElement(
+    "svg",
+    { viewBox: "0 0 24 24", width: 12, height: 12, fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", ...props },
+    React.createElement("polyline", { points: "20 6 9 17 4 12" })
+  )
+};
 function useCopy() {
   const [copied, setCopied] = React.useState(false);
   const copy = React.useCallback((text) => {
@@ -129,14 +183,38 @@ function useCopy() {
   }, []);
   return [copied, copy];
 }
-function StatusTag({ running }) {
+function StatusTag({ running, status }) {
+  let bg = "var(--dsw-alias-bg-layer-2,#f3f4f6)";
+  let color = "var(--dsw-alias-label-secondary,#6b7280)";
+  let text = running ? "\u8FD0\u884C\u4E2D" : "\u672A\u542F\u52A8";
+  if (status === "connected") {
+    bg = "var(--dsw-alias-state-success-bg,#ecfdf5)";
+    color = "var(--dsw-alias-state-success-primary,#059669)";
+    text = "\u5DF2\u8FDE\u63A5";
+  } else if (status === "starting") {
+    bg = "var(--dsw-alias-state-info-bg,#eff6ff)";
+    color = "var(--dsw-alias-state-info-primary,#3b82f6)";
+    text = "\u8FDE\u63A5\u4E2D\u2026";
+  } else if (status === "reconnecting") {
+    bg = "var(--dsw-alias-state-warn-bg,#fffbeb)";
+    color = "var(--dsw-alias-state-warn-primary,#d97706)";
+    text = "\u91CD\u8FDE\u4E2D\u2026";
+  } else if (status === "paused") {
+    bg = "var(--dsw-alias-state-warn-bg,#fffbeb)";
+    color = "var(--dsw-alias-state-warn-primary,#d97706)";
+    text = "\u6682\u505C\u4E2D";
+  } else if (status === "error") {
+    bg = "var(--dsw-alias-state-error-bg,#fef2f2)";
+    color = "var(--dsw-alias-state-error-primary,#dc2626)";
+    text = "\u5F02\u5E38";
+  } else if (running) {
+    bg = "var(--dsw-alias-state-success-bg,#ecfdf5)";
+    color = "var(--dsw-alias-state-success-primary,#059669)";
+    text = "\u8FD0\u884C\u4E2D";
+  }
   return React.createElement("span", {
-    style: {
-      ...s.tag,
-      background: running ? "var(--dsw-alias-state-success-bg,#ecfdf5)" : "var(--dsw-alias-bg-layer-2,#f3f4f6)",
-      color: running ? "var(--dsw-alias-state-success-primary,#059669)" : "var(--dsw-alias-label-secondary,#6b7280)"
-    }
-  }, running ? "\u8FD0\u884C\u4E2D" : "\u672A\u542F\u52A8");
+    style: { ...s.tag, background: bg, color }
+  }, text);
 }
 function QrBlock({ url, qr, onReset }) {
   const [copied, setCopied] = React.useState(false);
@@ -220,6 +298,7 @@ var CustomTunnelConfigForm = React.memo(function CustomTunnelConfigForm2({ serve
   const [serverUrl, setServerUrl] = React.useState(initUrl ?? "");
   const [accessToken, setAccessToken] = React.useState(initToken ?? "");
   const [saving, setSaving] = React.useState(false);
+  const [saveSuccess, setSaveSuccess] = React.useState(false);
   const syncedRef = React.useRef(false);
   React.useEffect(() => {
     if (!syncedRef.current && (initUrl || initToken)) {
@@ -231,14 +310,23 @@ var CustomTunnelConfigForm = React.memo(function CustomTunnelConfigForm2({ serve
   const dirty = serverUrl !== (initUrl ?? "") || accessToken !== (initToken ?? "");
   const handleSave = React.useCallback(async () => {
     setSaving(true);
+    setSaveSuccess(false);
     try {
       await onSave(serverUrl, accessToken);
+      setSaveSuccess(true);
+      setTimeout(() => setSaveSuccess(false), 2500);
     } finally {
       setSaving(false);
     }
   }, [onSave, serverUrl, accessToken]);
-  const handleUrlChange = React.useCallback((e) => setServerUrl(e.target.value), []);
-  const handleTokenChange = React.useCallback((e) => setAccessToken(e.target.value), []);
+  const handleUrlChange = React.useCallback((e) => {
+    setServerUrl(e.target.value);
+    setSaveSuccess(false);
+  }, []);
+  const handleTokenChange = React.useCallback((e) => {
+    setAccessToken(e.target.value);
+    setSaveSuccess(false);
+  }, []);
   return React.createElement(
     "div",
     { style: s.block },
@@ -251,6 +339,9 @@ var CustomTunnelConfigForm = React.memo(function CustomTunnelConfigForm2({ serve
         placeholder: "WebSocket \u5730\u5740\uFF0C\u4F8B\u5982 wss://tunnel.example.com/connect",
         value: serverUrl,
         onChange: handleUrlChange,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && dirty && !saving) handleSave();
+        },
         disabled: saving
       }),
       React.createElement("input", {
@@ -259,13 +350,21 @@ var CustomTunnelConfigForm = React.memo(function CustomTunnelConfigForm2({ serve
         placeholder: "\u8BBF\u95EE\u4EE4\u724C\uFF08Access Token\uFF09",
         value: accessToken,
         onChange: handleTokenChange,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && dirty && !saving) handleSave();
+        },
         disabled: saving
       }),
       React.createElement("button", {
-        style: { ...s.btnPri, alignSelf: "flex-start", opacity: !dirty || saving ? 0.5 : 1 },
-        disabled: !dirty || saving,
+        style: {
+          ...s.btnPri,
+          alignSelf: "flex-start",
+          opacity: !dirty || saving ? saveSuccess ? 1 : 0.5 : 1,
+          background: saveSuccess ? "var(--dsw-alias-state-success-primary,#059669)" : void 0
+        },
+        disabled: !dirty && !saveSuccess || saving,
         onClick: handleSave
-      }, saving ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58\u914D\u7F6E")
+      }, saving ? "\u4FDD\u5B58\u4E2D\u2026" : saveSuccess ? "\u2713 \u5DF2\u4FDD\u5B58" : "\u4FDD\u5B58\u914D\u7F6E")
     )
   );
 });
@@ -381,6 +480,16 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
     await act(BRIDGE_ENDPOINTS.platformSetAllowFrom, { allowFrom: list });
   }, [act, platform?.allowFrom]);
   const handleNewId = React.useCallback((e) => setNewId(e.target.value), []);
+  const [showSecret, setShowSecret] = React.useState(false);
+  const resetDefaults = React.useCallback(() => {
+    setCfgDraft((d) => ({
+      ...d,
+      digestIntervalSec: "300",
+      approvalTimeoutSec: "600",
+      maxMessageChars: "2000",
+      sendChunkDelayMs: "1500"
+    }));
+  }, []);
   const saveConfig = React.useCallback(async () => {
     if (!cfgDraft) return;
     const payload = {
@@ -417,12 +526,20 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
       React.createElement(
         "div",
         null,
-        React.createElement("div", { style: s.label }, platformName),
+        React.createElement(
+          "div",
+          { style: { ...s.label, display: "flex", alignItems: "center", gap: 7 } },
+          platformId === "wechat" && React.createElement(Icons.wechat, { style: { color: "#07C160", width: 20, height: 20 } }),
+          platformId === "qq" && React.createElement(Icons.qq, { style: { color: "#12B7F5", width: 20, height: 20 } }),
+          platformId === "feishu" && React.createElement(Icons.feishu, { style: { color: "#00D6B9", width: 20, height: 20 } }),
+          platformId === "telegram" && React.createElement(Icons.telegram, { style: { color: "#24A1DE", width: 20, height: 20 } }),
+          platformName
+        ),
         React.createElement("div", { style: { ...s.muted, marginTop: 2 } }, platformDesc)
       ),
-      React.createElement(StatusTag, { running: connected })
+      React.createElement(StatusTag, { status: platform?.status, running: connected })
     ),
-    // 快捷入口：使用说明 / 命令
+    // 快捷入口：使用说明 / 开放平台 / 命令速查
     React.createElement(
       "div",
       { style: { display: "flex", gap: 8, marginTop: 10, flexWrap: "wrap", alignItems: "center" } },
@@ -431,7 +548,19 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
         target: "_blank",
         rel: "noopener noreferrer",
         style: s.btnGhost
-      }, "\u{1F4D6} \u4F7F\u7528\u8BF4\u660E"),
+      }, "\u{1F4D6} \u5FAE\u4FE1\u4F7F\u7528\u8BF4\u660E"),
+      platformId === "qq" && React.createElement("a", {
+        href: "https://github.com/wenbin-wb/dsh-bridge/blob/main/docs/qq-usage.md",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: s.btnGhost
+      }, "\u{1F4D6} QQ \u4F7F\u7528\u8BF4\u660E"),
+      platformId === "qq" && React.createElement("a", {
+        href: "https://bot.q.qq.com/wiki/develop/api-v2/",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: s.btnGhost
+      }, "\u{1F310} QQ \u5F00\u653E\u5E73\u53F0"),
       React.createElement("button", {
         style: s.btnGhost,
         onClick: () => setShowHelp((v) => !v)
@@ -441,32 +570,89 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
     showHelp && React.createElement(
       "div",
       { style: { ...s.block, fontSize: 12, lineHeight: 1.8, fontFamily: "monospace" } },
-      React.createElement("div", null, "/new <\u63D0\u793A\u8BCD> \u2014 \u65B0\u5EFA\u4F1A\u8BDD\uFF08\u5F53\u524D\u5DE5\u4F5C\u533A\uFF09"),
-      React.createElement("div", null, "/new <\u63D0\u793A\u8BCD> @N \u2014 \u5728\u6307\u5B9A\u5DE5\u4F5C\u533A\u65B0\u5EFA"),
-      React.createElement("div", null, "/sessions \u2014 \u6309\u5DE5\u4F5C\u533A\u5206\u7EC4\u5217\u4F1A\u8BDD"),
-      React.createElement("div", null, "/use N \u2014 \u5207\u6362\u5230\u4F1A\u8BDD N"),
-      React.createElement("div", null, "/workspaces \u2014 \u5217\u51FA\u5DE5\u4F5C\u533A"),
-      React.createElement("div", null, "/stop \u2014 \u505C\u6B62\u4EFB\u52A1"),
-      React.createElement("div", null, "/status \u2014 \u67E5\u770B\u72B6\u6001"),
-      React.createElement("div", null, "/yes \u6216 /no \u2014 \u56DE\u5E94\u5BA1\u6279"),
-      React.createElement("div", null, "/help \u2014 \u5168\u90E8\u547D\u4EE4")
+      React.createElement("div", null, "/new <\u63D0\u793A\u8BCD> \u2014 \u65B0\u5EFA\u4F1A\u8BDD\u5E76\u5F00\u59CB\uFF08\u5F53\u524D\u5DE5\u4F5C\u533A\uFF09"),
+      React.createElement("div", null, "/new <\u63D0\u793A\u8BCD> @N \u2014 \u5728\u6307\u5B9A\u5DE5\u4F5C\u533A\u65B0\u5EFA\u4F1A\u8BDD"),
+      React.createElement("div", null, "/sessions\uFF08\u6216 /list\uFF09\u2014 \u5217\u51FA\u4F1A\u8BDD\uFF08\u6309\u5DE5\u4F5C\u533A\u5206\u7EC4\uFF0C\u5E26\u6807\u9898\uFF09"),
+      React.createElement("div", null, "/use N\uFF08\u6216 /resume N\uFF09\u2014 \u5207\u6362\u5230\u4F1A\u8BDD N"),
+      React.createElement("div", null, "/workspaces \u2014 \u5217\u51FA\u6240\u6709\u53EF\u7528\u5DE5\u4F5C\u533A"),
+      React.createElement("div", null, "/end \u2014 \u7ED3\u675F\u5F53\u524D\u4F1A\u8BDD\uFF08\u56DE\u5230\u65E0\u6D3B\u52A8\u4F1A\u8BDD\u72B6\u6001\uFF09"),
+      React.createElement("div", null, "/stop \u2014 \u505C\u6B62\u5F53\u524D\u4EFB\u52A1"),
+      React.createElement("div", null, "/status \u2014 \u67E5\u770B Agent \u72B6\u6001\u4E0E\u4F1A\u8BDD\u6458\u8981"),
+      React.createElement("div", null, "/yes \u6216 /no\uFF08\u6216 1/2\uFF09\u2014 \u56DE\u5E94\u6743\u9650\u5BA1\u6279\u8BF7\u6C42"),
+      React.createElement("div", null, "/help \u2014 \u663E\u793A\u5B8C\u6574\u547D\u4EE4\u5E2E\u52A9")
     ),
     err && React.createElement("div", { style: { ...s.warn, marginTop: 10 } }, err),
-    // 已配置：状态详情 + 白名单
+    // 已配置：结构化状态看板 + 白名单
     platform?.configured && React.createElement(
       "div",
       { style: s.block },
+      // 结构化状态卡片看板
       React.createElement(
         "div",
-        { style: { fontSize: 12, lineHeight: 1.7 } },
-        React.createElement("div", null, `\u72B6\u6001: ${statusLabel}`),
-        platform.accountId && React.createElement("div", null, `\u8D26\u53F7: ${platform.accountId}`),
-        platform.sessionId && React.createElement("div", null, `\u5F53\u524D\u4F1A\u8BDD: ${platform.sessionId}`)
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
+            gap: 8,
+            marginBottom: 12
+          }
+        },
+        React.createElement(
+          "div",
+          {
+            style: {
+              background: "var(--dsw-alias-bg-layer-1,#fff)",
+              border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)",
+              borderRadius: 8,
+              padding: "8px 12px"
+            }
+          },
+          React.createElement("div", { style: { ...s.muted, fontSize: 11 } }, "\u8FDE\u63A5\u72B6\u6001"),
+          React.createElement(
+            "div",
+            { style: { ...s.label, fontSize: 13, marginTop: 2, display: "flex", alignItems: "center", gap: 6 } },
+            React.createElement("span", {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: connected ? "var(--dsw-alias-state-success-primary,#10b981)" : "var(--dsw-alias-label-tertiary,#9ca3af)"
+              }
+            }),
+            statusLabel
+          )
+        ),
+        platform.accountId && React.createElement(
+          "div",
+          {
+            style: {
+              background: "var(--dsw-alias-bg-layer-1,#fff)",
+              border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)",
+              borderRadius: 8,
+              padding: "8px 12px"
+            }
+          },
+          React.createElement("div", { style: { ...s.muted, fontSize: 11 } }, "\u767B\u5F55\u8D26\u53F7"),
+          React.createElement("div", { style: { ...s.code, fontSize: 12, marginTop: 2, fontWeight: 500 } }, platform.accountId)
+        ),
+        platform.sessionId && React.createElement(
+          "div",
+          {
+            style: {
+              background: "var(--dsw-alias-bg-layer-1,#fff)",
+              border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)",
+              borderRadius: 8,
+              padding: "8px 12px"
+            }
+          },
+          React.createElement("div", { style: { ...s.muted, fontSize: 11 } }, "\u6D3B\u52A8\u4F1A\u8BDD"),
+          React.createElement("div", { style: { ...s.code, fontSize: 12, marginTop: 2 } }, platform.sessionId)
+        )
       ),
       React.createElement(
         "div",
         { style: { ...s.muted, fontSize: 12, marginTop: 8, lineHeight: 1.6 } },
-        "\u767D\u540D\u5355\uFF08\u4EC5\u8FD9\u4E9B\u7528\u6237\u53EF\u9A71\u52A8 agent\uFF09:"
+        `\u767D\u540D\u5355 (\u5DF2\u6388\u6743 ${platform.allowFrom?.length || 0} \u4E2A\u8D26\u53F7/\u7FA4):`
       ),
       React.createElement(
         "div",
@@ -493,9 +679,12 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
         { style: { display: "flex", gap: 8, marginTop: 8, alignItems: "center" } },
         React.createElement("input", {
           style: { ...s.input, flex: 1 },
-          placeholder: platformId === "wechat" ? "\u6DFB\u52A0\u5141\u8BB8\u7684\u5FAE\u4FE1 ID\uFF08\u5982 xxx@im.wechat\uFF09" : "\u6DFB\u52A0\u5141\u8BB8\u7684\u7528\u6237 ID",
+          placeholder: platformId === "wechat" ? "\u6DFB\u52A0\u5141\u8BB8\u7684\u5FAE\u4FE1 ID\uFF08\u5982 xxx@im.wechat\uFF09\uFF0C\u6309 Enter \u6DFB\u52A0" : "\u6DFB\u52A0\u5141\u8BB8\u7684\u7528\u6237/\u7FA4 ID\uFF0C\u6309 Enter \u6DFB\u52A0",
           value: newId,
-          onChange: handleNewId
+          onChange: handleNewId,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && newId.trim() && !busy) addAllow();
+          }
         }),
         React.createElement("button", {
           style: { ...s.btnGhost, whiteSpace: "nowrap", opacity: newId.trim() && !busy ? 1 : 0.5 },
@@ -543,19 +732,36 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
             style: { ...s.input, width: "100%" },
             placeholder: "\u8BF7\u8F93\u5165 AppID",
             value: cfgDraft?.appId ?? "",
-            onChange: (e) => setCfgDraft((d) => ({ ...d, appId: e.target.value }))
+            onChange: (e) => setCfgDraft((d) => ({ ...d, appId: e.target.value })),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && cfgDraft?.appId?.trim() && cfgDraft?.clientSecret?.trim() && !busy) saveConfig();
+            }
           })
         ),
         React.createElement(
           "div",
           null,
           React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "ClientSecret \u2014 QQ \u5F00\u653E\u5E73\u53F0\u673A\u5668\u4EBA\u5BC6\u94A5"),
-          React.createElement("input", {
-            style: { ...s.input, width: "100%" },
-            placeholder: "\u8BF7\u8F93\u5165 ClientSecret",
-            value: cfgDraft?.clientSecret ?? "",
-            onChange: (e) => setCfgDraft((d) => ({ ...d, clientSecret: e.target.value }))
-          })
+          React.createElement(
+            "div",
+            { style: { display: "flex", gap: 6, alignItems: "center" } },
+            React.createElement("input", {
+              style: { ...s.input, flex: 1 },
+              type: showSecret ? "text" : "password",
+              placeholder: "\u8BF7\u8F93\u5165 ClientSecret",
+              value: cfgDraft?.clientSecret ?? "",
+              onChange: (e) => setCfgDraft((d) => ({ ...d, clientSecret: e.target.value })),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && cfgDraft?.appId?.trim() && cfgDraft?.clientSecret?.trim() && !busy) saveConfig();
+              }
+            }),
+            React.createElement("button", {
+              style: { ...s.btnGhost, height: 32, padding: "0 10px", fontSize: 13, flexShrink: 0 },
+              onClick: () => setShowSecret((v) => !v),
+              type: "button",
+              title: showSecret ? "\u9690\u85CF\u5BC6\u94A5" : "\u663E\u793A\u660E\u6587"
+            }, showSecret ? "\u{1F648} \u9690\u85CF" : "\u{1F441}\uFE0F \u663E\u793A")
+          )
         ),
         React.createElement(
           "div",
@@ -588,7 +794,7 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
         login.phase === "error" && React.createElement("div", { style: { ...s.muted, fontSize: 12 } }, login.error ?? "\u767B\u5F55\u5931\u8D25")
       )
     ),
-    // 高级设置（可折叠）
+    // 高级设置（紧凑 2x2 网格 + 恢复默认值）
     cfgDraft && React.createElement(
       "div",
       { style: s.block },
@@ -599,72 +805,83 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
       showAdvanced && React.createElement(
         "div",
         { style: { display: "flex", flexDirection: "column", gap: 10 } },
-        // 心跳间隔
-        React.createElement(
-          "div",
-          null,
-          React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "\u5FC3\u8DF3\u95F4\u9694\uFF08\u79D2\uFF09\u2014 \u957F\u4EFB\u52A1\u5904\u7406\u4E2D\u6BCF\u9694\u591A\u4E45\u53D1\u4E00\u6B21\u8FDB\u5EA6\u63D0\u793A"),
-          React.createElement("input", {
-            style: { ...s.input, width: 120 },
-            type: "number",
-            min: 30,
-            max: 3600,
-            value: cfgDraft.digestIntervalSec,
-            onChange: (e) => setCfgDraft((d) => ({ ...d, digestIntervalSec: e.target.value }))
-          })
-        ),
-        // 审批超时
-        React.createElement(
-          "div",
-          null,
-          React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "\u5BA1\u6279\u8D85\u65F6\uFF08\u79D2\uFF09\u2014 \u5DE5\u5177\u8C03\u7528\u5BA1\u6279\u65E0\u54CD\u5E94\u540E\u81EA\u52A8\u62D2\u7EDD"),
-          React.createElement("input", {
-            style: { ...s.input, width: 120 },
-            type: "number",
-            min: 30,
-            max: 86400,
-            value: cfgDraft.approvalTimeoutSec,
-            onChange: (e) => setCfgDraft((d) => ({ ...d, approvalTimeoutSec: e.target.value }))
-          })
-        ),
-        // 每气泡字数
-        React.createElement(
-          "div",
-          null,
-          React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "\u6BCF\u6761\u6D88\u606F\u6700\u5927\u5B57\u6570 \u2014 \u8D85\u51FA\u65F6\u81EA\u52A8\u5206\u591A\u6761\u53D1\u9001"),
-          React.createElement("input", {
-            style: { ...s.input, width: 120 },
-            type: "number",
-            min: 100,
-            max: 1e4,
-            value: cfgDraft.maxMessageChars,
-            onChange: (e) => setCfgDraft((d) => ({ ...d, maxMessageChars: e.target.value }))
-          })
-        ),
-        // 分块延迟
+        // 2x2 参数网格
         React.createElement(
           "div",
-          null,
-          React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "\u5206\u5757\u53D1\u9001\u5EF6\u8FDF\uFF08\u6BEB\u79D2\uFF09\u2014 \u591A\u6761\u6D88\u606F\u4E4B\u95F4\u7684\u95F4\u9694"),
-          React.createElement("input", {
-            style: { ...s.input, width: 120 },
-            type: "number",
-            min: 0,
-            max: 1e4,
-            value: cfgDraft.sendChunkDelayMs,
-            onChange: (e) => setCfgDraft((d) => ({ ...d, sendChunkDelayMs: e.target.value }))
-          })
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+              gap: 10
+            }
+          },
+          // 心跳间隔
+          React.createElement(
+            "div",
+            null,
+            React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "\u5FC3\u8DF3\u8FDB\u5EA6\u95F4\u9694 (\u79D2)"),
+            React.createElement("input", {
+              style: { ...s.input, width: "100%" },
+              type: "number",
+              min: 30,
+              max: 3600,
+              value: cfgDraft.digestIntervalSec,
+              onChange: (e) => setCfgDraft((d) => ({ ...d, digestIntervalSec: e.target.value }))
+            })
+          ),
+          // 审批超时
+          React.createElement(
+            "div",
+            null,
+            React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "\u5BA1\u6279\u8D85\u65F6\u81EA\u52A8\u62D2\u7EDD (\u79D2)"),
+            React.createElement("input", {
+              style: { ...s.input, width: "100%" },
+              type: "number",
+              min: 30,
+              max: 86400,
+              value: cfgDraft.approvalTimeoutSec,
+              onChange: (e) => setCfgDraft((d) => ({ ...d, approvalTimeoutSec: e.target.value }))
+            })
+          ),
+          // 每气泡字数
+          React.createElement(
+            "div",
+            null,
+            React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "\u5355\u6761\u6700\u5927\u5B57\u6570\u9650\u5236 (\u5B57)"),
+            React.createElement("input", {
+              style: { ...s.input, width: "100%" },
+              type: "number",
+              min: 100,
+              max: 1e4,
+              value: cfgDraft.maxMessageChars,
+              onChange: (e) => setCfgDraft((d) => ({ ...d, maxMessageChars: e.target.value }))
+            })
+          ),
+          // 分块延迟
+          React.createElement(
+            "div",
+            null,
+            React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "\u5206\u5757\u53D1\u9001\u5EF6\u8FDF (\u6BEB\u79D2)"),
+            React.createElement("input", {
+              style: { ...s.input, width: "100%" },
+              type: "number",
+              min: 0,
+              max: 1e4,
+              value: cfgDraft.sendChunkDelayMs,
+              onChange: (e) => setCfgDraft((d) => ({ ...d, sendChunkDelayMs: e.target.value }))
+            })
+          )
         ),
         // QQ 平台凭证
         platformId === "qq" && React.createElement(
           "div",
-          { style: { display: "flex", flexDirection: "column", gap: 10 } },
+          { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 4 } },
           React.createElement(
             "div",
             null,
             React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "AppID \u2014 QQ \u5F00\u653E\u5E73\u53F0\u673A\u5668\u4EBA\u5E94\u7528 ID"),
             React.createElement("input", {
-              style: { ...s.input, width: 220 },
+              style: { ...s.input, width: "100%" },
               placeholder: "\u8BF7\u8F93\u5165 AppID",
               value: cfgDraft.appId,
               onChange: (e) => setCfgDraft((d) => ({ ...d, appId: e.target.value }))
@@ -673,20 +890,40 @@ function PlatformCard({ platformId, platformName, platformDesc, rpcCall, onStatu
           React.createElement(
             "div",
             null,
-            React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "ClientSecret \u2014 QQ \u5F00\u653E\u5E73\u53F0\u673A\u5668\u4EBA\u5BC6\u94A5"),
-            React.createElement("input", {
-              style: { ...s.input, width: 220 },
-              placeholder: "\u8BF7\u8F93\u5165 ClientSecret",
-              value: cfgDraft.clientSecret,
-              onChange: (e) => setCfgDraft((d) => ({ ...d, clientSecret: e.target.value }))
-            })
+            React.createElement("div", { style: { ...s.muted, marginBottom: 4 } }, "ClientSecret \u2014 QQ \u5F00\u653E\u5E73\u53F0\u673A\u5668\u4EBA\u5BC6\u94A5\uFF08\u7559\u7A7A\u5219\u4FDD\u6301\u5DF2\u4FDD\u5B58\u5BC6\u94A5\uFF09"),
+            React.createElement(
+              "div",
+              { style: { display: "flex", gap: 6, alignItems: "center" } },
+              React.createElement("input", {
+                style: { ...s.input, flex: 1 },
+                type: showSecret ? "text" : "password",
+                placeholder: "\u7559\u7A7A\u4FDD\u6301\u5DF2\u4FDD\u5B58\u5BC6\u94A5",
+                value: cfgDraft.clientSecret,
+                onChange: (e) => setCfgDraft((d) => ({ ...d, clientSecret: e.target.value }))
+              }),
+              React.createElement("button", {
+                style: { ...s.btnGhost, height: 32, padding: "0 10px", fontSize: 13, flexShrink: 0 },
+                onClick: () => setShowSecret((v) => !v),
+                type: "button",
+                title: showSecret ? "\u9690\u85CF\u5BC6\u94A5" : "\u663E\u793A\u660E\u6587"
+              }, showSecret ? "\u{1F648} \u9690\u85CF" : "\u{1F441}\uFE0F \u663E\u793A")
+            )
           )
         ),
-        React.createElement("button", {
-          style: { ...s.btnPri, alignSelf: "flex-start", opacity: cfgDirty && !busy ? 1 : 0.5 },
-          disabled: !cfgDirty || busy,
-          onClick: saveConfig
-        }, busy ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58\u8BBE\u7F6E")
+        React.createElement(
+          "div",
+          { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 4 } },
+          React.createElement("button", {
+            style: { ...s.btnPri, opacity: cfgDirty && !busy ? 1 : 0.5 },
+            disabled: !cfgDirty || busy,
+            onClick: saveConfig
+          }, busy ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58\u8BBE\u7F6E"),
+          React.createElement("button", {
+            style: { ...s.btnGhost, height: 32, fontSize: 12 },
+            onClick: resetDefaults,
+            title: "\u6062\u590D\u63A8\u8350\u9ED8\u8BA4\u914D\u7F6E"
+          }, "\u21BA \u6062\u590D\u63A8\u8350\u9ED8\u8BA4")
+        )
       )
     ),
     React.createElement(
@@ -712,7 +949,11 @@ function UpgradeCommandRow({ cmd }) {
         color: "var(--dsw-alias-label-secondary,#6b7280)",
         flex: 1,
         minWidth: 0,
-        wordBreak: "break-all"
+        wordBreak: "break-all",
+        background: "var(--dsw-alias-bg-layer-1,#ffffff)",
+        padding: "4px 8px",
+        borderRadius: 6,
+        border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)"
       }
     }, cmd),
     React.createElement("button", {
@@ -725,6 +966,9 @@ function UpgradeCommandRow({ cmd }) {
 function VersionBanner({ rpcCall }) {
   const [info, setInfo] = React.useState(null);
   const [loading, setLoading] = React.useState(false);
+  const [upgrading, setUpgrading] = React.useState(false);
+  const [upgradeResult, setUpgradeResult] = React.useState(null);
+  const [showManual, setShowManual] = React.useState(false);
   const check = React.useCallback(async () => {
     setLoading(true);
     try {
@@ -738,6 +982,27 @@ function VersionBanner({ rpcCall }) {
     check();
   }, [check]);
   const hasUpdate = info?.latest && info?.current && !info.error && semverGt(info.latest, info.current);
+  const isLatest = info?.latest && info?.current && !info.error && !semverGt(info.latest, info.current);
+  const handleUpgrade = React.useCallback(async () => {
+    if (!info?.latest || upgrading) return;
+    setUpgrading(true);
+    setUpgradeResult(null);
+    try {
+      const r = await rpcCall(BRIDGE_ENDPOINTS.upgradePlugin, { version: info.latest });
+      if (r?.ok && r.value?.ok) {
+        setUpgradeResult({ ok: true, message: `\u5DF2\u6210\u529F\u5347\u7EA7\u5230 v${info.latest}\uFF01\u8BF7\u91CD\u542F DSH \u670D\u52A1\u4F7F\u65B0\u7248\u672C\u751F\u6548\u3002` });
+        setTimeout(() => check(), 3e3);
+      } else {
+        setUpgradeResult({ ok: false, message: r?.value?.error || r?.error?.message || "\u5347\u7EA7\u5931\u8D25" });
+        setShowManual(true);
+      }
+    } catch (e) {
+      setUpgradeResult({ ok: false, message: e.message || "\u5347\u7EA7\u8BF7\u6C42\u5931\u8D25" });
+      setShowManual(true);
+    } finally {
+      setUpgrading(false);
+    }
+  }, [info?.latest, upgrading, rpcCall, check]);
   const links = React.createElement(
     "div",
     { style: { display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" } },
@@ -746,95 +1011,174 @@ function VersionBanner({ rpcCall }) {
       target: "_blank",
       rel: "noreferrer",
       style: s.btnLink
-    }, "\u2B50 GitHub"),
+    }, React.createElement(Icons.github), "GitHub"),
     React.createElement("a", {
       href: RELEASES_URL,
       target: "_blank",
       rel: "noreferrer",
       style: s.btnLink
-    }, "\u{1F4CB} \u66F4\u65B0\u65E5\u5FD7"),
+    }, "\u66F4\u65B0\u65E5\u5FD7"),
     React.createElement("a", {
       href: ISSUES_URL,
       target: "_blank",
       rel: "noreferrer",
       style: s.btnLink
-    }, "\u{1F41B} \u53CD\u9988 Bug")
+    }, "\u53CD\u9988 Issue")
   );
-  if (hasUpdate) {
-    const cmds = upgradeCommands(info.latest);
-    return React.createElement(
+  return React.createElement(
+    "div",
+    { style: { marginBottom: 16 } },
+    // 顶部状态行：版本徽标 + 刷新按钮 + 链接组
+    React.createElement(
       "div",
-      { style: { marginBottom: 16 } },
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          gap: 8
+        }
+      },
       React.createElement(
         "div",
-        {
-          style: {
-            ...s.card,
-            background: "var(--dsw-alias-state-info-bg,#eff6ff)",
-            border: "1px solid var(--dsw-alias-state-info-border,#bfdbfe)",
-            padding: "12px 16px",
-            marginBottom: 8
-          }
-        },
+        { style: { display: "flex", alignItems: "center", gap: 8 } },
+        // 版本状态徽标
+        React.createElement(
+          "span",
+          {
+            style: {
+              ...s.tag,
+              background: hasUpdate ? "var(--dsw-alias-state-info-bg,#eff6ff)" : isLatest ? "var(--dsw-alias-state-success-bg,#ecfdf5)" : "var(--dsw-alias-bg-layer-2,#f3f4f6)",
+              color: hasUpdate ? "var(--dsw-alias-state-info-primary,#2563eb)" : isLatest ? "var(--dsw-alias-state-success-primary,#059669)" : "var(--dsw-alias-label-secondary,#6b7280)",
+              padding: "3px 10px",
+              fontSize: 12,
+              fontWeight: 500,
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 5
+            }
+          },
+          loading ? React.createElement("span", {
+            style: { display: "inline-flex", alignItems: "center" }
+          }, React.createElement(Icons.refresh)) : isLatest ? React.createElement(Icons.check) : null,
+          info ? `v${info.current}` : "\u7248\u672C\u68C0\u67E5\u4E2D\u2026",
+          isLatest && React.createElement("span", { style: { opacity: 0.85, fontSize: 11, fontWeight: 400 } }, "\xB7 \u5DF2\u662F\u6700\u65B0"),
+          hasUpdate && React.createElement("span", { style: { fontWeight: 600, fontSize: 11 } }, `\u2794 v${info.latest}`),
+          info?.error && React.createElement("span", { style: { color: "var(--dsw-alias-state-warn-primary,#d97706)", fontSize: 11 } }, "(\u7F51\u7EDC\u8D85\u65F6)")
+        ),
+        // 刷新检查按钮
+        React.createElement(
+          "button",
+          {
+            style: {
+              ...s.btnGhost,
+              height: 24,
+              padding: "0 8px",
+              fontSize: 11,
+              opacity: loading ? 0.5 : 1,
+              gap: 4
+            },
+            onClick: check,
+            disabled: loading || upgrading,
+            title: "\u91CD\u65B0\u68C0\u67E5 npm \u7EBF\u4E0A\u7248\u672C"
+          },
+          React.createElement(Icons.refresh),
+          loading ? "\u68C0\u67E5\u4E2D\u2026" : "\u68C0\u67E5\u66F4\u65B0"
+        )
+      ),
+      links
+    ),
+    // 发现新版本高亮卡片（支持一键直接升级）
+    hasUpdate && React.createElement(
+      "div",
+      {
+        style: {
+          ...s.card,
+          background: "var(--dsw-alias-state-info-bg,#eff6ff)",
+          border: "1px solid var(--dsw-alias-state-info-border,#bfdbfe)",
+          padding: "14px 16px",
+          marginTop: 10,
+          marginBottom: 0
+        }
+      },
+      React.createElement(
+        "div",
+        { style: { display: "flex", alignItems: "flex-start", gap: 12 } },
+        React.createElement("span", { style: { fontSize: 22 } }, "\u{1F680}"),
         React.createElement(
           "div",
-          { style: { display: "flex", alignItems: "center", gap: 12 } },
-          React.createElement("span", { style: { fontSize: 20 } }, "\u{1F389}"),
+          { style: { flex: 1, minWidth: 0 } },
           React.createElement(
             "div",
-            { style: { flex: 1, minWidth: 0 } },
+            { style: { display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 8, marginBottom: 8 } },
             React.createElement("div", {
               style: {
                 fontSize: 13,
                 fontWeight: 600,
-                color: "var(--dsw-alias-state-info-primary,#1e40af)",
-                marginBottom: 8
+                color: "var(--dsw-alias-state-info-primary,#1e40af)"
               }
             }, `\u53D1\u73B0\u65B0\u7248\u672C v${info.latest}\uFF08\u5F53\u524D v${info.current}\uFF09`),
-            // 升级命令：dsh plugin 与 npx 两种，均带复制按钮
             React.createElement(
-              "div",
-              { style: { display: "flex", flexDirection: "column", gap: 6 } },
-              cmds.map(({ id, cmd }) => React.createElement(UpgradeCommandRow, { key: id, cmd }))
+              "button",
+              {
+                style: {
+                  ...s.btnPri,
+                  height: 28,
+                  fontSize: 12,
+                  padding: "0 14px",
+                  background: upgradeResult?.ok ? "var(--dsw-alias-state-success-primary,#059669)" : "var(--dsw-alias-brand-primary,#4f6ef7)",
+                  opacity: upgrading ? 0.6 : 1
+                },
+                onClick: handleUpgrade,
+                disabled: upgrading || upgradeResult?.ok
+              },
+              upgrading ? React.createElement(
+                "span",
+                { style: { display: "inline-flex", alignItems: "center", gap: 6 } },
+                React.createElement("span", { style: { animation: "spin 1s linear infinite", display: "inline-flex" } }, React.createElement(Icons.refresh)),
+                "\u6B63\u5728\u81EA\u52A8\u5347\u7EA7\u2026"
+              ) : upgradeResult?.ok ? "\u2713 \u5DF2\u5B8C\u6210\u5347\u7EA7" : `\u4E00\u952E\u5347\u7EA7\u5230 v${info.latest}`
             )
           ),
-          React.createElement("button", {
+          upgradeResult && React.createElement("div", {
             style: {
-              ...s.btnGhost,
-              height: 30,
-              padding: "0 12px",
+              background: upgradeResult.ok ? "var(--dsw-alias-state-success-bg,#ecfdf5)" : "var(--dsw-alias-state-error-bg,#fef2f2)",
+              border: `1px solid ${upgradeResult.ok ? "var(--dsw-alias-state-success-border,#a7f3d0)" : "var(--dsw-alias-state-error-border,#fecaca)"}`,
+              color: upgradeResult.ok ? "var(--dsw-alias-state-success-primary,#065f46)" : "var(--dsw-alias-state-error-primary,#991b1b)",
+              padding: "8px 12px",
+              borderRadius: 6,
               fontSize: 12,
-              opacity: loading ? 0.5 : 1,
-              flexShrink: 0
+              marginBottom: 8,
+              lineHeight: 1.5
+            }
+          }, upgradeResult.message),
+          React.createElement(
+            "div",
+            { style: { marginTop: 4 } },
+            React.createElement("button", {
+              style: { ...s.btnLink, fontSize: 11, color: "var(--dsw-alias-label-secondary,#6b7280)" },
+              onClick: () => setShowManual((v) => !v)
+            }, showManual ? "\u25B4 \u6298\u53E0\u624B\u52A8\u547D\u4EE4\u884C" : "\u25BE \u67E5\u770B\u624B\u52A8\u5347\u7EA7\u547D\u4EE4 (\u5982\u9700)")
+          ),
+          showManual && React.createElement(
+            "div",
+            {
+              style: { display: "flex", flexDirection: "column", gap: 6, marginTop: 8 }
             },
-            onClick: check,
-            disabled: loading
-          }, loading ? "\u2026" : "\u5237\u65B0")
+            upgradeCommands(info.latest).map(
+              ({ id, cmd }) => React.createElement(UpgradeCommandRow, { key: id, cmd })
+            )
+          )
         )
-      ),
-      links
-    );
-  }
-  return React.createElement(
-    "div",
-    { style: { marginBottom: 14, display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 8 } },
-    React.createElement(
-      "div",
-      { style: { ...s.muted, display: "flex", alignItems: "center", gap: 8 } },
-      loading && !info ? React.createElement("span", null, "\u68C0\u67E5\u66F4\u65B0\u4E2D\u2026") : info ? React.createElement("span", null, `v${info.current}${info.latest && !info.error ? " \xB7 \u5DF2\u662F\u6700\u65B0" : info.error ? " \xB7 \u68C0\u67E5\u5931\u8D25" : ""}`) : null,
-      info && React.createElement("button", {
-        style: { ...s.btnGhost, height: 22, padding: "0 8px", fontSize: 11, opacity: loading ? 0.5 : 1 },
-        onClick: check,
-        disabled: loading
-      }, loading ? "\u2026" : "\u91CD\u65B0\u68C0\u67E5")
-    ),
-    links
+      )
+    )
   );
 }
 var TABS = [
-  { id: "lan", label: "\u5C40\u57DF\u7F51" },
-  { id: "tunnel", label: "\u516C\u7F51\u96A7\u9053" },
-  { id: "im", label: "IM \u673A\u5668\u4EBA" }
+  { id: "lan", label: "\u5C40\u57DF\u7F51", icon: Icons.lan },
+  { id: "tunnel", label: "\u516C\u7F51\u96A7\u9053", icon: Icons.tunnel },
+  { id: "im", label: "IM \u673A\u5668\u4EBA", icon: Icons.bot }
 ];
 function TabBar({ active, onChange, dots }) {
   return React.createElement(
@@ -842,12 +1186,12 @@ function TabBar({ active, onChange, dots }) {
     {
       style: {
         display: "flex",
-        gap: 0,
+        gap: 4,
         marginBottom: 20,
         borderBottom: "1px solid var(--dsw-alias-border-l2,#e5e7eb)"
       }
     },
-    TABS.map(({ id, label }) => {
+    TABS.map(({ id, label, icon: TabIcon }) => {
       const isActive = active === id;
       const hasDot = dots?.[id];
       return React.createElement(
@@ -868,11 +1212,19 @@ function TabBar({ active, onChange, dots }) {
             marginBottom: -1,
             display: "inline-flex",
             alignItems: "center",
-            gap: 6,
+            gap: 7,
             transition: "color .15s, border-color .15s",
             whiteSpace: "nowrap"
           }
         },
+        TabIcon && React.createElement(TabIcon, {
+          style: {
+            color: isActive ? "var(--dsw-alias-brand-primary,#4f6ef7)" : "var(--dsw-alias-label-tertiary,#9ca3af)",
+            width: 16,
+            height: 16,
+            flexShrink: 0
+          }
+        }),
         label,
         hasDot && React.createElement("span", {
           style: {
@@ -1011,9 +1363,10 @@ function BridgePanel({ rpcCall }) {
     );
   } else if (activeTab === "im") {
     const IM_PLATFORMS = [
-      { id: "wechat", label: "\u5FAE\u4FE1", desc: "iLink Bot API\uFF08ClawBot\uFF09" },
-      { id: "qq", label: "QQ", desc: "QQ Bot OpenAPI v2\uFF08\u79C1\u804A/\u7FA4\u804A/\u6309\u94AE\uFF09" },
-      { id: "feishu", label: "\u98DE\u4E66", desc: "\u5B98\u65B9\u4E8B\u4EF6\u56DE\u8C03 API" }
+      { id: "wechat", label: "\u5FAE\u4FE1", icon: Icons.wechat, brandColor: "#07C160", desc: "ClawBot \u626B\u7801\u76F4\u8FDE \xB7 \u65E0\u9700\u516C\u7F51" },
+      { id: "qq", label: "QQ", icon: Icons.qq, brandColor: "#12B7F5", desc: "\u5B98\u65B9\u673A\u5668\u4EBA \xB7 \u79C1\u804A/\u7FA4\u804A/\u6309\u94AE" },
+      { id: "feishu", label: "\u98DE\u4E66", icon: Icons.feishu, brandColor: "#00D6B9", desc: "\u5B98\u65B9\u4E8B\u4EF6\u56DE\u8C03 API" },
+      { id: "telegram", label: "Telegram", icon: Icons.telegram, brandColor: "#24A1DE", desc: "\u5B98\u65B9 Bot API" }
     ];
     tabContent = React.createElement(
       "div",
@@ -1024,7 +1377,7 @@ function BridgePanel({ rpcCall }) {
         {
           style: { display: "flex", gap: 10, marginBottom: 16, flexWrap: "wrap" }
         },
-        IM_PLATFORMS.map(({ id, label, desc }) => {
+        IM_PLATFORMS.map(({ id, label, icon: IconComponent, brandColor, desc }) => {
           const platformData = platforms?.[id];
           const available = !!platformData;
           const active = platformData?.status === "connected" || platformData?.status === "starting" || platformData?.status === "reconnecting";
@@ -1033,21 +1386,27 @@ function BridgePanel({ rpcCall }) {
             {
               key: id,
               style: {
-                flex: "1 1 140px",
-                border: `1px solid ${selectedPlatform === id ? "var(--dsw-alias-state-info-primary,#3b82f6)" : active ? "var(--dsw-alias-state-success-primary,#10b981)" : "var(--dsw-alias-border-l2,#e5e7eb)"}`,
+                flex: "1 1 135px",
+                border: `1px solid ${selectedPlatform === id ? "var(--dsw-alias-brand-primary,#4f6ef7)" : active ? "var(--dsw-alias-state-success-primary,#10b981)" : "var(--dsw-alias-border-l2,#e5e7eb)"}`,
                 borderRadius: 10,
                 padding: "12px 14px",
-                opacity: available ? 1 : 0.45,
+                opacity: available ? 1 : 0.5,
                 cursor: available ? "pointer" : "not-allowed",
-                background: selectedPlatform === id ? "var(--dsw-alias-state-info-bg,#eff6ff)" : active ? "var(--dsw-alias-state-success-bg,#ecfdf5)" : available ? "var(--dsw-alias-bg-layer-1,transparent)" : "var(--dsw-alias-bg-layer-2,#f9fafb)",
+                background: selectedPlatform === id ? "var(--dsw-alias-state-info-bg,#eff6ff)" : active ? "var(--dsw-alias-state-success-bg,#ecfdf5)" : "var(--dsw-alias-bg-layer-2,#f9fafb)",
+                boxShadow: selectedPlatform === id ? "0 0 0 1px var(--dsw-alias-brand-primary,#4f6ef7)" : "none",
                 transition: "all 0.15s ease"
               },
               onClick: available ? () => setSelectedPlatform(id) : void 0
             },
             React.createElement(
               "div",
-              { style: { ...s.label, fontSize: 13, display: "flex", alignItems: "center", gap: 6 } },
-              label,
+              { style: { ...s.label, fontSize: 13, display: "flex", alignItems: "center", justifyContent: "space-between" } },
+              React.createElement(
+                "span",
+                { style: { display: "flex", alignItems: "center", gap: 7 } },
+                IconComponent && React.createElement(IconComponent, { style: { color: brandColor, width: 18, height: 18, flexShrink: 0 } }),
+                label
+              ),
               active && React.createElement("span", {
                 style: { width: 6, height: 6, borderRadius: "50%", background: "var(--dsw-alias-state-success-primary,#10b981)", flexShrink: 0 }
               }),
@@ -1058,7 +1417,7 @@ function BridgePanel({ rpcCall }) {
                 style: { fontSize: 11, color: "var(--dsw-alias-label-tertiary,#9ca3af)", fontWeight: 400 }
               }, "\u5373\u5C06\u652F\u6301")
             ),
-            React.createElement("div", { style: { ...s.muted, marginTop: 3, fontSize: 11 } }, desc)
+            React.createElement("div", { style: { ...s.muted, marginTop: 4, fontSize: 11 } }, desc)
           );
         })
       ),
@@ -1076,7 +1435,7 @@ function BridgePanel({ rpcCall }) {
   }
   return React.createElement(
     "div",
-    { style: { maxWidth: 560 } },
+    { style: { maxWidth: 620 } },
     err && React.createElement("div", {
       style: { ...s.card, background: "var(--dsw-alias-state-error-bg,#fef2f2)", color: "var(--dsw-alias-state-error-primary,#dc2626)", fontSize: 13, marginBottom: 16 }
     }, err),