dsh-miloco-bridge 0.1.0 → 0.1.2

package/lib/client.js

@@ -40,55 +40,202 @@ window.__ModuleLoader__.load({
       const style = document.createElement('style')
       style.id = STYLE_ID
       style.textContent = `
-.dsh-miloco-bridge-settings { font-size: 13px; line-height: 1.6; max-width: 780px; }
-.dsh-miloco-bridge-settings h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }
-.dsh-miloco-bridge-settings .card { border: 1px solid rgba(128,128,128,.32); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
-.dsh-miloco-bridge-settings .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 14px; margin-top: 6px; }
-.dsh-miloco-bridge-settings .stat { display: flex; flex-direction: column; }
-.dsh-miloco-bridge-settings .stat .k { opacity: .66; font-size: 12px; }
-.dsh-miloco-bridge-settings .stat .v { font-size: 16px; font-weight: 600; }
+.dsh-miloco-bridge-settings {
+  --mc-border: var(--dsw-alias-border-l2, rgba(128,128,128,.24));
+  --mc-border-soft: var(--dsw-alias-border-l1, rgba(128,128,128,.14));
+  --mc-bg: var(--dsw-alias-bg-l1, rgba(128,128,128,.035));
+  --mc-bg-soft: var(--dsw-alias-bg-l2, rgba(128,128,128,.07));
+  --mc-text: var(--dsw-alias-label-primary, inherit);
+  --mc-text-2: var(--dsw-alias-label-secondary, rgba(128,128,128,.95));
+  --mc-text-3: var(--dsw-alias-label-tertiary, rgba(128,128,128,.72));
+  --mc-accent: var(--dsw-alias-brand-primary, #4a7edc);
+  --mc-success: var(--dsw-alias-state-success-primary, #3c9a5a);
+  --mc-error: var(--dsw-alias-state-error-primary, #c85a50);
+  font-size: 13px; line-height: 1.65; max-width: 820px; color: var(--mc-text);
+}
+.dsh-miloco-bridge-settings h3 { font-size: 14px; margin: 0 0 10px; font-weight: 600; letter-spacing: .01em; }
+.dsh-miloco-bridge-settings .cardHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
+.dsh-miloco-bridge-settings .cardHead h3 { margin: 0; }
+.dsh-miloco-bridge-settings .iconBtn {
+  flex: none; display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px;
+  background: transparent; color: var(--mc-text-3);
+}
+.dsh-miloco-bridge-settings .iconBtn:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); border-color: transparent;
+}
+.dsh-miloco-bridge-settings .iconBtn.spinning svg { animation: dsh-miloco-spin .9s linear infinite; }
+@keyframes dsh-miloco-spin { to { transform: rotate(360deg); } }
+.dsh-miloco-bridge-settings .card {
+  border: 1px solid var(--mc-border); border-radius: 10px; padding: 15px 16px;
+  margin-bottom: 12px; background: transparent;
+}
+.dsh-miloco-bridge-settings .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
+.dsh-miloco-bridge-settings .stat {
+  display: flex; flex-direction: column; padding: 9px 11px; border-radius: 8px;
+  background: transparent; border: 1px solid var(--mc-border-soft);
+}
+.dsh-miloco-bridge-settings .stat .k { color: var(--mc-text-3); font-size: 11px; }
+.dsh-miloco-bridge-settings .stat .v { font-size: 17px; font-weight: 600; line-height: 1.35; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dsh-miloco-bridge-settings .row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
-.dsh-miloco-bridge-settings .row > label { min-width: 96px; opacity: .8; }
-.dsh-miloco-bridge-settings select, .dsh-miloco-bridge-settings input {
-  flex: 1 1 220px; min-width: 160px; padding: 5px 8px; border-radius: 6px;
-  border: 1px solid rgba(128,128,128,.36); background: transparent; color: inherit; font: inherit;
+.dsh-miloco-bridge-settings .row > label { min-width: 96px; color: var(--mc-text-2); }
+.dsh-miloco-bridge-settings .field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
+.dsh-miloco-bridge-settings .formGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 14px; margin: 10px 0; }
+.dsh-miloco-bridge-settings .formGrid .field { margin: 0; }
+.dsh-miloco-bridge-settings .field > label { color: var(--mc-text-2); font-size: 12px; }
+.dsh-miloco-bridge-settings .fieldRow { display: flex; align-items: center; gap: 8px; }
+.dsh-miloco-bridge-settings .fieldRow input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 auto; width: auto; min-width: 0; }
+.dsh-miloco-bridge-settings .row > select,
+.dsh-miloco-bridge-settings .row > input:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 220px; width: auto; }
+.dsh-miloco-bridge-settings .statusRow {
+  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center;
+  gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--mc-border-soft);
+}
+.dsh-miloco-bridge-settings .statusRow:last-of-type { border-bottom: 0; }
+.dsh-miloco-bridge-settings .statusLabel { color: var(--mc-text-2); }
+.dsh-miloco-bridge-settings .statusValue { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.dsh-miloco-bridge-settings .statusCheck { justify-self: end; color: var(--mc-success); font-weight: 700; font-size: 14px; line-height: 1; }
+.dsh-miloco-bridge-settings .statusEnd { justify-self: end; }
+.dsh-miloco-bridge-settings .statusValue > a, .dsh-miloco-bridge-settings .statusValue > code {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
+}
+.dsh-miloco-bridge-settings select,
+.dsh-miloco-bridge-settings input:not([type="checkbox"]):not([type="radio"]) {
+  flex: 0 0 auto; width: 100%; height: 34px; box-sizing: border-box;
+  padding: 6px 9px; border-radius: 7px; border: 1px solid var(--mc-border);
+  background: var(--dsw-alias-bg-base, transparent); color: inherit; font: inherit; outline: none;
+}
+.dsh-miloco-bridge-settings select { cursor: pointer; }
+.dsh-miloco-bridge-settings input[type="checkbox"] {
+  flex: 0 0 auto; width: auto; min-width: 0; height: auto; margin: 2px 0 0;
+  accent-color: var(--mc-accent);
+}
+.dsh-miloco-bridge-settings select:focus, .dsh-miloco-bridge-settings input:focus {
+  border-color: var(--mc-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc-accent) 18%, transparent);
 }
 .dsh-miloco-bridge-settings button {
-  padding: 5px 14px; border-radius: 6px; border: 1px solid rgba(128,128,128,.36);
-  background: transparent; color: inherit; font: inherit; cursor: pointer;
+  padding: 6px 12px; border-radius: 7px; border: 1px solid var(--mc-border);
+  background: var(--mc-bg-soft); color: inherit; font: inherit; cursor: pointer;
+  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
 }
-.dsh-miloco-bridge-settings button.primary { border-color: rgba(70,130,220,.7); color: rgba(70,130,220,1); }
-.dsh-miloco-bridge-settings button:disabled { opacity: .5; cursor: default; }
+.dsh-miloco-bridge-settings button:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.14)); border-color: var(--mc-text-3); }
+.dsh-miloco-bridge-settings button.primary { background: var(--mc-accent); border-color: transparent; color: #fff; }
+.dsh-miloco-bridge-settings button.primary:hover:not(:disabled) { opacity: .9; }
+.dsh-miloco-bridge-settings button.dangerBtn { color: var(--mc-error); border-color: var(--mc-error); background: transparent; }
+.dsh-miloco-bridge-settings button:disabled { opacity: .45; cursor: default; }
 .dsh-miloco-bridge-settings .pill {
-  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
-  border: 1px solid rgba(128,128,128,.36);
+  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
+  font-size: 11.5px; line-height: 1.6; border: 1px solid var(--mc-border); color: var(--mc-text-2);
+  white-space: nowrap;
+}
+.dsh-miloco-bridge-settings .pill.ok { border-color: var(--mc-success); color: var(--mc-success); }
+.dsh-miloco-bridge-settings .pill.bad { border-color: var(--mc-error); color: var(--mc-error); }
+.dsh-miloco-bridge-settings .pill.warn { border-color: #b8860b; color: #b8860b; }
+.dsh-miloco-bridge-settings .muted { color: var(--mc-text-3); font-size: 12px; }
+.dsh-miloco-bridge-settings .modeList { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 12px 0 8px; }
+.dsh-miloco-bridge-settings .modeItem {
+  display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 12px;
+  border: 1px solid var(--mc-border); border-radius: 9px; background: transparent;
+  cursor: pointer; transition: border-color .15s ease, background .15s ease;
 }
-.dsh-miloco-bridge-settings .pill.ok { border-color: rgba(60,160,90,.6); color: rgba(60,160,90,1); }
-.dsh-miloco-bridge-settings .pill.bad { border-color: rgba(200,90,80,.6); color: rgba(200,90,80,1); }
-.dsh-miloco-bridge-settings .pill.warn { border-color: rgba(210,150,50,.6); color: rgba(210,150,50,1); }
-.dsh-miloco-bridge-settings .muted { opacity: .68; font-size: 12px; }
-.dsh-miloco-bridge-settings .modeList { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 6px; }
-.dsh-miloco-bridge-settings .modeItem { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 6px; }
-.dsh-miloco-bridge-settings .modeItem:hover { background: rgba(128,128,128,.08); }
+.dsh-miloco-bridge-settings .modeItem:hover { border-color: var(--mc-text-3); }
+.dsh-miloco-bridge-settings .modeItem.selected { border-color: var(--mc-accent); background: var(--mc-bg-soft); }
 .dsh-miloco-bridge-settings .modeItem input[type="radio"] {
   flex: 0 0 auto; min-width: 0; width: auto; margin: 2px 0 0; padding: 0;
-  border: 0; background: transparent; accent-color: rgba(70,130,220,1);
+  border: 0; background: transparent; accent-color: var(--mc-accent);
 }
-.dsh-miloco-bridge-settings .modeText { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
+.dsh-miloco-bridge-settings .modeText { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
+.dsh-miloco-bridge-settings .modeText strong { font-size: 13px; }
 .dsh-miloco-bridge-settings .modeText .muted { margin: 0; }
-.dsh-miloco-bridge-settings a { color: rgba(70,130,220,1); text-decoration: none; }
+.dsh-miloco-bridge-settings a { color: var(--mc-accent); text-decoration: none; }
 .dsh-miloco-bridge-settings a:hover { text-decoration: underline; }
-.dsh-miloco-bridge-settings .danger { border: 1px solid rgba(200,90,80,.5); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
-.dsh-miloco-bridge-settings .danger h4 { margin: 0 0 6px; font-size: 13px; color: rgba(200,90,80,1); }
+.dsh-miloco-bridge-settings .danger { border: 1px solid var(--mc-error); border-radius: 8px; padding: 10px 12px; margin-top: 10px; background: transparent; }
+.dsh-miloco-bridge-settings .danger h4 { margin: 0 0 6px; font-size: 13px; color: var(--mc-error); }
 .dsh-miloco-bridge-settings .danger label { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; font-size: 12px; }
-.dsh-miloco-bridge-settings .guide { margin: 8px 0 0; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(128,128,128,.28); background: rgba(128,128,128,.06); }
+.dsh-miloco-bridge-settings .guide { margin: 8px 0 0; padding: 10px 12px; border-radius: 7px; border: 1px solid var(--mc-border-soft); background: transparent; }
 .dsh-miloco-bridge-settings .guide h4 { margin: 8px 0 4px; font-size: 13px; }
 .dsh-miloco-bridge-settings .guide ul { margin: 4px 0; padding-left: 18px; }
 .dsh-miloco-bridge-settings .guide li { margin: 2px 0; }
+.dsh-miloco-bridge-settings .versionSub {
+  display: flex; flex-wrap: wrap; align-items: center; flex-basis: 100%;
+  min-width: 0; color: var(--mc-text-3); font-size: 12px; line-height: 1.6;
+}
+.dsh-miloco-bridge-settings .versionSub > * + *::before {
+  content: '·'; margin: 0 6px; color: var(--mc-text-3);
+}
+.dsh-miloco-bridge-settings .versionSub .versionLink {
+  border: 0; background: transparent; padding: 0; border-radius: 0;
+  color: var(--mc-accent); font: inherit; line-height: inherit; cursor: pointer;
+}
+.dsh-miloco-bridge-settings .versionSub .versionLink:hover:not(:disabled) {
+  background: transparent; text-decoration: underline;
+}
+.dsh-miloco-bridge-settings .versionDirty { color: #b8860b; }
+.dsh-miloco-bridge-settings .versionNote { margin-top: 6px; }
+.dsh-miloco-bridge-settings .versionManualPanel { margin-top: 8px; }
+.dsh-miloco-bridge-settings .versionCommand {
+  margin: 0; padding: 8px 10px; border-radius: 6px; max-height: 120px; overflow: auto;
+  border: 1px solid var(--mc-border-soft); background: var(--dsw-alias-bg-base, transparent);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
+}
 .dsh-miloco-bridge-settings code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.dsh-miloco-preset-helpbar { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; }
+.dsh-miloco-preset-helpbtn {
+  border: 0; background: transparent; color: var(--dsw-alias-label-secondary, rgba(128,128,128,.95));
+  font: inherit; font-size: 12px; line-height: 1.5; padding: 2px 6px; border-radius: 5px; cursor: pointer;
+}
+.dsh-miloco-preset-helpbtn:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+.dsh-miloco-guide-backdrop {
+  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
+  padding: 24px; background: rgba(0,0,0,.24);
+}
+.dsh-miloco-guide-modal {
+  display: flex; flex-direction: column; width: min(640px, 100%); height: min(600px, 100%);
+  max-height: 100%; overflow: hidden; padding: 0; border-radius: 16px; border: 0;
+  background: var(--dsw-alias-bg-base, #fff); color: var(--dsw-alias-label-primary, #111);
+  box-shadow: 0 18px 56px rgba(0,0,0,.22);
+}
+.dsh-miloco-guide-header { flex: none; padding: 24px 24px 20px 28px; }
+.dsh-miloco-guide-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.dsh-miloco-guide-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 28px; }
+.dsh-miloco-guide-intro { margin: 8px 0 0; color: var(--dsw-alias-label-secondary, rgba(128,128,128,.95)); font-size: 14px; line-height: 22px; }
+.dsh-miloco-guide-close {
+  flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; padding: 0;
+  background: transparent; color: var(--dsw-alias-label-tertiary, rgba(128,128,128,.8));
+  font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
+}
+.dsh-miloco-guide-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); }
+.dsh-miloco-guide-tabs {
+  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
+  margin: 0 28px 22px; padding: 4px; border-radius: 10px;
+  background: var(--dsw-alias-bg-l2, #f5f5f5);
+}
+.dsh-miloco-guide-tab {
+  border: 1px solid transparent; border-radius: 8px; padding: 7px 10px;
+  background: transparent; color: var(--dsw-alias-label-secondary, rgba(128,128,128,.95));
+  font: inherit; font-size: 14px; line-height: 20px; cursor: pointer;
+}
+.dsh-miloco-guide-tab.selected {
+  background: var(--dsw-alias-bg-base, #fff);
+  border-color: var(--dsw-alias-border-l2, rgba(128,128,128,.24));
+  color: var(--dsw-alias-label-primary, #111);
+  box-shadow: 0 1px 2px rgba(0,0,0,.04);
+}
+.dsh-miloco-guide-panel {
+  flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 24px 28px;
+  color: var(--dsw-alias-label-primary, #111); font-size: 16px; overflow-wrap: anywhere;
+}
+.dsh-miloco-guide-panel h3 { margin: 28px 0 10px; font-size: 16px; font-weight: 600; line-height: 24px; }
+.dsh-miloco-guide-panel h3:first-child { margin-top: 0; }
+.dsh-miloco-guide-panel p { margin: 0 0 16px; font-size: 16px; line-height: 1.625; }
+.dsh-miloco-guide-panel ul { margin: 0 0 16px; padding-left: 22px; }
+.dsh-miloco-guide-panel li { margin: 6px 0; font-size: 16px; line-height: 1.6; }
+.dsh-miloco-guide-panel blockquote { margin: 10px 0 14px; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--dsw-alias-bg-module-platform, var(--dsw-alias-bg-l2, #f5f5f5)); }
+.dsh-miloco-guide-panel blockquote p { margin: 0; }
 .dsh-miloco-bridge-settings pre {
   margin: 8px 0 0; padding: 8px 10px; border-radius: 6px; max-height: 260px; overflow: auto;
-  border: 1px solid rgba(128,128,128,.28); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  border: 1px solid var(--mc-border-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11.5px; line-height: 1.5; white-space: pre-wrap;
 }
 `
@@ -169,6 +316,157 @@ window.__ModuleLoader__.load({
       return options
     }
 
+    /**
+     * DSH 0.2.1 only ships guide dialogs for built-in presets. Add equivalent
+     * explanation/usage buttons to the custom Miloco preset card so the same
+     * help is reachable from 「设置 → Agent 预设」. This is a defensive DOM
+     * enhancement: if DSH changes the card structure, it silently does nothing.
+     */
+    const PRESET_GUIDE = {
+      title: 'Miloco 家庭助手',
+      intro: {
+        explanation: '只读和管家两种模式决定这个预设能做什么。',
+        usage: '新建任务时选择「Miloco 家庭助手」，说明要完成什么、涉及哪个房间或家人。',
+      },
+      content: {
+        explanation: [
+          '<h3>保留哪些能力</h3>',
+          '<p>保留 DSH 通用 Agent 的对话与工具调用；米家设备、摄像头、感知、规则/任务与家庭档案',
+          '是它独有的能力，且只在这个预设内出现。</p>',
+          '<h3>什么时候选</h3>',
+          '<p>想要联动家居设备时：只需要了解家里情况时选只读；需要操作设备或维护家庭信息时选管家。',
+          '涉及门锁、燃气、摄像头开关等动作时，技能层会要求二次确认。</p>',
+          '<p>模式说明与示例见「设置 → 插件 → Miloco」。</p>',
+        ].join(''),
+        usage: [
+          '<h3>查看家里情况</h3>',
+          '<blockquote><p>客厅现在有人吗？刚才门口发生了什么？</p></blockquote>',
+          '<p>用摄像头画面和感知事件回答，不控制设备。</p>',
+          '<h3>操作设备或执行场景</h3>',
+          '<blockquote><p>把客厅灯打开；执行回家模式。</p></blockquote>',
+          '<p>需要管家模式；控制前会先确认设备与参数。</p>',
+          '<h3>维护家庭信息</h3>',
+          '<blockquote><p>记一下孩子每天喝几杯水；奶奶对什么过敏？</p></blockquote>',
+          '<p>用于家庭档案、成员与宠物登记，以及任务创建。</p>',
+        ].join(''),
+      },
+    }
+
+    /**
+     * Open a read-only help dialog matching DSH's native preset guide layout.
+     * @param {'explanation'|'usage'} kind - Initial guide page.
+     */
+    function openPresetGuide(kind) {
+      if (typeof document === 'undefined' || !document.body) return
+      document.querySelector('.dsh-miloco-guide-backdrop')?.remove()
+      const backdrop = document.createElement('div')
+      backdrop.className = 'dsh-miloco-guide-backdrop'
+      const modal = document.createElement('div')
+      modal.className = 'dsh-miloco-guide-modal'
+      modal.setAttribute('role', 'dialog')
+      modal.setAttribute('aria-modal', 'true')
+
+      const header = document.createElement('div')
+      header.className = 'dsh-miloco-guide-header'
+      const titleRow = document.createElement('div')
+      titleRow.className = 'dsh-miloco-guide-title-row'
+      const title = document.createElement('h2')
+      title.className = 'dsh-miloco-guide-title'
+      title.textContent = PRESET_GUIDE.title
+      const close = document.createElement('button')
+      close.type = 'button'
+      close.className = 'dsh-miloco-guide-close'
+      close.textContent = '×'
+      close.setAttribute('aria-label', '关闭')
+      const intro = document.createElement('p')
+      intro.className = 'dsh-miloco-guide-intro'
+      titleRow.append(title, close)
+      header.append(titleRow, intro)
+
+      const tabs = document.createElement('div')
+      tabs.className = 'dsh-miloco-guide-tabs'
+      const tabExplanation = document.createElement('button')
+      tabExplanation.type = 'button'
+      tabExplanation.className = 'dsh-miloco-guide-tab'
+      tabExplanation.textContent = '模式说明'
+      const tabUsage = document.createElement('button')
+      tabUsage.type = 'button'
+      tabUsage.className = 'dsh-miloco-guide-tab'
+      tabUsage.textContent = '如何使用'
+      tabs.append(tabExplanation, tabUsage)
+
+      const panel = document.createElement('div')
+      panel.className = 'dsh-miloco-guide-panel'
+
+      const setPage = next => {
+        const active = next === 'usage' ? 'usage' : 'explanation'
+        panel.innerHTML = PRESET_GUIDE.content[active]
+        panel.dataset.guidePage = active
+        intro.textContent = PRESET_GUIDE.intro[active]
+        tabExplanation.classList.toggle('selected', active === 'explanation')
+        tabUsage.classList.toggle('selected', active === 'usage')
+      }
+      tabExplanation.addEventListener('click', () => setPage('explanation'))
+      tabUsage.addEventListener('click', () => setPage('usage'))
+      setPage(kind)
+
+      modal.append(header, tabs, panel)
+      backdrop.append(modal)
+
+      const dismiss = () => {
+        backdrop.remove()
+        document.removeEventListener('keydown', onKey)
+      }
+      const onKey = event => {
+        if (event.key === 'Escape') dismiss()
+      }
+      close.addEventListener('click', dismiss)
+      backdrop.addEventListener('click', event => {
+        if (event.target === backdrop) dismiss()
+      })
+      document.addEventListener('keydown', onKey)
+      document.body.append(backdrop)
+      close.focus()
+    }
+
+    /**
+     * Add help buttons to the custom Miloco preset card when it appears.
+     * @param {any} ctx - Browser plugin context.
+     */
+    function installPresetGuide(ctx) {
+      if (typeof document === 'undefined' || !document.body) return
+      const enhance = () => {
+        const card = document.querySelector('[data-agent-preset-id="miloco"]')
+        if (!card || card.dataset.dshMilocoGuide === '1') return
+        const foot = card.querySelector('[class*="cardFoot"]')
+        if (!foot || foot.querySelector('.dsh-miloco-preset-helpbar')) return
+        const bar = document.createElement('span')
+        bar.className = 'dsh-miloco-preset-helpbar'
+        const makeButton = (label, kind) => {
+          const button = document.createElement('button')
+          button.type = 'button'
+          button.className = 'dsh-miloco-preset-helpbtn'
+          button.textContent = label
+          button.setAttribute('aria-label', `${label}: Miloco 家庭助手`)
+          button.addEventListener('click', event => {
+            event.preventDefault()
+            event.stopPropagation()
+            openPresetGuide(kind)
+          })
+          return button
+        }
+        bar.append(makeButton('模式说明', 'explanation'), makeButton('如何使用', 'usage'))
+        foot.insertBefore(bar, foot.firstChild)
+        card.dataset.dshMilocoGuide = '1'
+      }
+      const observer = new MutationObserver(enhance)
+      observer.observe(document.body, { childList: true, subtree: true })
+      enhance()
+      try {
+        ctx.effect?.(() => () => observer.disconnect(), 'dsh-miloco: preset guide')
+      } catch { /* 客户端页面卸载时忽略 */ }
+    }
+
     function MilocoSettingsTab() {
       const [status, setStatus] = React.useState(null)
       const [error, setError] = React.useState(null)
@@ -191,6 +489,14 @@ window.__ModuleLoader__.load({
       const [confirmText, setConfirmText] = React.useState('')
       const [uninstallBusy, setUninstallBusy] = React.useState(false)
       const [uninstallResult, setUninstallResult] = React.useState(null)
+      const [versionInfo, setVersionInfo] = React.useState(null)
+      const [versionBusy, setVersionBusy] = React.useState(false)
+      const [versionError, setVersionError] = React.useState(null)
+      const [versionCommandOpen, setVersionCommandOpen] = React.useState(false)
+      const [upgradeStatus, setUpgradeStatus] = React.useState(null)
+      const [upgradeConfirmOpen, setUpgradeConfirmOpen] = React.useState(false)
+      const [upgradeBusy, setUpgradeBusy] = React.useState(false)
+      const [upgradePolling, setUpgradePolling] = React.useState(false)
 
       const reload = React.useCallback(() => {
         setError(null)
@@ -209,7 +515,74 @@ window.__ModuleLoader__.load({
           .catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)))
       }, [])
 
-      React.useEffect(() => { reload() }, [reload])
+      const loadVersion = React.useCallback((refresh = false) => {
+        setVersionBusy(true)
+        setVersionError(null)
+        call(`/version${refresh ? '?refresh=1' : ''}`)
+          .then((payload) => {
+            setVersionInfo(payload)
+            setUpgradeStatus(payload.upgradeStatus ?? null)
+            if (payload.error) setVersionError(payload.error)
+          })
+          .catch((cause) => setVersionError(cause instanceof Error ? cause.message : String(cause)))
+          .finally(() => setVersionBusy(false))
+      }, [])
+
+      const pollUpgrade = React.useCallback(() => {
+        setUpgradePolling(true)
+        const started = Date.now()
+        const tick = () => {
+          call('/upgrade/status')
+            .then((payload) => {
+              const status = payload.status
+              setUpgradeStatus(status)
+              if (status && ['done', 'failed', 'idle'].includes(status.phase)) {
+                setUpgradePolling(false)
+                loadVersion(true)
+                return
+              }
+              if (Date.now() - started > 5 * 60_000) {
+                setUpgradePolling(false)
+                loadVersion(true)
+                return
+              }
+              window.setTimeout(tick, 3000)
+            })
+            .catch(() => {
+              // The upgrade restarts the backend; treat this as the restart phase.
+              setUpgradeStatus({ phase: 'restarting' })
+              if (Date.now() - started > 5 * 60_000) {
+                setUpgradePolling(false)
+                loadVersion(true)
+                return
+              }
+              window.setTimeout(tick, 3000)
+            })
+        }
+        tick()
+      }, [loadVersion])
+
+      const runUpgrade = React.useCallback(() => {
+        setUpgradeBusy(true)
+        setVersionError(null)
+        call('/upgrade', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({}),
+        })
+          .then(() => {
+            setUpgradeConfirmOpen(false)
+            setUpgradeStatus({ phase: 'starting' })
+            pollUpgrade()
+          })
+          .catch((cause) => setVersionError(cause instanceof Error ? cause.message : String(cause)))
+          .finally(() => setUpgradeBusy(false))
+      }, [pollUpgrade])
+
+      React.useEffect(() => {
+        reload()
+        loadVersion(false)
+      }, [reload, loadVersion])
 
       const refreshSessions = React.useCallback(() => {
         call('/sessions')
@@ -371,7 +744,8 @@ window.__ModuleLoader__.load({
               onChange: (event) => setConnectPushToken(event.target.value),
             })),
           h('div', { className: 'row' },
-            h('button', { type: 'button', disabled: busy || !connectUrl, onClick: connect }, '连接')))
+            h('button', { type: 'button', onClick: () => setConnectOpen(false) }, '取消'),
+            h('button', { type: 'button', className: 'primary', disabled: busy || !connectUrl, onClick: connect }, '连接')))
         : null
 
       // ---------------------------------------------------------------- 部署 / 连接
@@ -381,11 +755,20 @@ window.__ModuleLoader__.load({
           h('div', { className: 'muted' },
             backend.error || `连不上 ${connection.baseUrl || '（未配置地址）'}。`
             + '插件本身可以独立安装；部署或连接之后才会出现设备与感知能力。'),
+          h('div', { className: 'muted' },
+            '一键部署会下载官方 release 安装器（支持 GitHub 镜像），不会在本机编译源码。'),
           h('div', { className: 'row' },
             h('button', { type: 'button', className: 'primary', disabled: busy, onClick: deploy },
               busy ? '部署中…' : '一键部署 Miloco'),
-            h('button', { type: 'button', disabled: busy, onClick: () => setConnectOpen(!connectOpen) },
-              connectOpen ? '收起' : '连接已有的 Miloco')),
+            h('button', {
+              type: 'button',
+              disabled: busy,
+              onClick: () => {
+                const opening = !connectOpen
+                setConnectOpen(opening)
+                if (opening) setUninstallOpen(false)
+              },
+            }, '连接已有的 Miloco')),
           connectForm,
           deployLog ? h('pre', null, deployLog) : null))
       }
@@ -397,7 +780,7 @@ window.__ModuleLoader__.load({
           h('div', { className: 'grid' },
             h('div', { className: 'stat' },
               h('span', { className: 'k' }, '米家账号'),
-              h('span', { className: 'v' }, overview.account?.nickname || (overview.accountBound ? '已绑定' : '未绑定'))),
+              h('span', { className: 'v', title: overview.account?.nickname || '' }, overview.account?.nickname || (overview.accountBound ? '已绑定' : '未绑定'))),
             h('div', { className: 'stat' },
               h('span', { className: 'k' }, '设备'),
               h('span', { className: 'v' }, overview.deviceCount ?? '—')),
@@ -430,7 +813,7 @@ window.__ModuleLoader__.load({
         h('div', { className: 'muted' }, '模式决定这个预设手里有哪些工具：'),
         h('div', { className: 'modeList' }, modes.map(item => h('label', {
           key: item.id,
-          className: 'modeItem',
+          className: `modeItem${mode === item.id ? ' selected' : ''}`,
         },
         h('input', {
           type: 'radio', name: 'dsh-miloco-bridge-mode', checked: mode === item.id,
@@ -478,60 +861,62 @@ window.__ModuleLoader__.load({
         : ''
       cards.push(h('div', { className: 'card', key: 'target' },
         h('h3', null, '推送目标'),
-        h('div', { className: 'row' },
+        h('div', { className: 'field' },
           h('label', null, '对话会话'),
-          h('input', {
-            type: 'text',
-            list: SESSION_LIST_ID,
-            value: sessionId,
-            placeholder: lastSession
-              ? `留空 = 上一次触发 miloco 的会话（${lastSession}）`
-              : '留空 = 上一次触发 miloco 的会话（还没有）',
-            onChange: (event) => setSessionId(event.target.value),
-          }),
-          h('datalist', { id: SESSION_LIST_ID }, sessionOptions(status)),
-          h('button', { type: 'button', disabled: busy, onClick: refreshSessions }, '刷新会话')),
+          h('div', { className: 'fieldRow' },
+            h('input', {
+              type: 'text',
+              list: SESSION_LIST_ID,
+              value: sessionId,
+              placeholder: lastSession
+                ? `留空 = 上一次触发 miloco 的会话（${lastSession}）`
+                : '留空 = 上一次触发 miloco 的会话（还没有）',
+              onChange: (event) => setSessionId(event.target.value),
+            }),
+            h('datalist', { id: SESSION_LIST_ID }, sessionOptions(status)),
+            h('button', { type: 'button', disabled: busy, onClick: refreshSessions }, '刷新会话'))),
         h('div', { className: 'muted' },
           '留空 = 投到「上一次触发 miloco 的会话」，也就是最近一次调用过米家工具的对话。'
           + '也可以从下拉里选任意对话，或直接填会话 id。'),
-        h('div', { className: 'row' },
-          h('label', null, '模型'),
-          h('select', {
-            value: modelValue,
-            onChange: (event) => {
-              setModelValue(event.target.value)
-              setReasoningEffort('')
-            },
-          }, modelOptions(status))),
-        selectedEfforts.length > 0
-          ? h('div', { className: 'row' },
-            h('label', null, '推理强度'),
+        h('div', { className: 'formGrid' },
+          h('div', { className: 'field' },
+            h('label', null, '模型'),
+            h('select', {
+              value: modelValue,
+              onChange: (event) => {
+                setModelValue(event.target.value)
+                setReasoningEffort('')
+              },
+            }, modelOptions(status))),
+          selectedEfforts.length > 0
+            ? h('div', { className: 'field' },
+              h('label', null, '推理强度'),
+              h('select', {
+                value: effortValue,
+                onChange: (event) => setReasoningEffort(event.target.value),
+              }, [
+                h('option', { key: '__model_default__', value: '' }, '跟随模型默认'),
+                ...selectedEfforts.map(item => h('option', {
+                  key: item.id,
+                  value: item.id,
+                }, item.name || item.id)),
+              ]))
+            : null,
+          h('div', { className: 'field' },
+            h('label', null, '感知等级'),
             h('select', {
-              value: effortValue,
-              onChange: (event) => setReasoningEffort(event.target.value),
+              value: perceptionLevel,
+              onChange: (event) => setPerceptionLevel(event.target.value),
             }, [
-              h('option', { key: '__model_default__', value: '' }, '跟随模型默认'),
-              ...selectedEfforts.map(item => h('option', {
-                key: item.id,
-                value: item.id,
-              }, item.name || item.id)),
-            ]))
-          : null,
-        h('div', { className: 'row' },
-          h('label', null, '感知等级'),
-          h('select', {
-            value: perceptionLevel,
-            onChange: (event) => setPerceptionLevel(event.target.value),
-          }, [
-            h('option', { key: 'all', value: 'all' }, '全部事件'),
-            h('option', { key: 'low', value: 'low' }, '低及以上'),
-            h('option', { key: 'medium', value: 'medium' }, '中及以上'),
-            h('option', { key: 'high', value: 'high' }, '仅高优先级'),
-          ])),
+              h('option', { key: 'all', value: 'all' }, '全部事件'),
+              h('option', { key: 'low', value: 'low' }, '低及以上'),
+              h('option', { key: 'medium', value: 'medium' }, '中及以上'),
+              h('option', { key: 'high', value: 'high' }, '仅高优先级'),
+            ]))),
         h('div', { className: 'muted' },
           '低于所选等级的感知建议不会投递到 DSH；规则、任务、onboarding 与普通对话事件不受影响。'),
         h('div', { className: 'row' },
-          h('button', { type: 'button', disabled: busy, onClick: save }, busy ? '保存中…' : '保存'),
+          h('button', { type: 'button', className: 'primary', disabled: busy, onClick: save }, busy ? '保存中…' : '保存'),
           saved ? h('span', { className: 'pill ok' }, saved) : null,
           error ? h('span', { className: 'pill bad' }, error) : null),
         h('div', { className: 'muted' },
@@ -539,47 +924,231 @@ window.__ModuleLoader__.load({
 
       // ---------------------------------------------------------------- 运行状态
       const deployState = status.deploy ?? {}
+      const versionData = versionInfo?.version ?? null
+      const upgradeInfo = versionInfo?.upgrade ?? null
+      const currentVersion = upgradeInfo?.current || versionData?.version || ''
+      const latestVersion = upgradeInfo?.latest || ''
+      const deployKind = upgradeInfo?.deploy_kind
+        || (currentVersion && /\.dev\d*|\+/.test(currentVersion) ? 'dev' : '')
+      const hasUpdate = Boolean(upgradeInfo?.has_update)
+      const isDevDeployment = deployKind === 'dev'
+      const upgradeSource = upgradeInfo?.source || 'backend'
+      const mirrorCheck = upgradeSource === 'mirror'
+      const upgradeUnavailable = !upgradeInfo || upgradeInfo.reachable === false
+      const releaseUrl = upgradeInfo?.release_url || ''
+      const sourceRoot = versionInfo?.sourceRoot || deployState.sourceDir || ''
+      const gitDirty = Boolean(versionData?.git?.dirty)
+      const commitShort = versionData?.git?.commit_short || ''
+      const upgradePhase = upgradeStatus?.phase || ''
+      const upgradeLogPath = upgradeStatus?.logPath || ''
+      const upgradePhaseLabels = {
+        idle: '空闲',
+        starting: '准备中',
+        downloading: '下载中',
+        installing: '安装中',
+        restarting: '服务重启中',
+        done: '已完成',
+        failed: '失败',
+      }
+      const devUpdateCommand = sourceRoot
+        ? `cd ${sourceRoot} && git pull --ff-only && bash scripts/install.sh --dev --skip-openclaw && systemctl --user restart miloco.service`
+        : ''
+      const versionPill = versionInfo?.reachable === false
+        ? ['bad', '不可用']
+        : !versionInfo
+          ? ['', versionBusy ? '读取中' : '未知']
+          : isDevDeployment
+            ? ['', '源码部署']
+            : upgradeUnavailable
+              ? ['warn', '检查失败']
+              : hasUpdate
+                ? ['warn', '有新版本']
+                : ['ok', '已是最新']
+
       cards.push(h('div', { className: 'card', key: 'runtime' },
-        h('h3', null, '运行状态'),
-        h('div', { className: 'row' },
-          h('label', null, '后端'),
-          connection.baseUrl
-            ? h('a', {
-              href: connection.baseUrl,
-              target: '_blank',
-              rel: 'noopener noreferrer',
-              title: '在新标签页打开 Miloco 面板',
-            }, connection.baseUrl)
-            : h('code', null, '—'),
-          h('span', { className: `pill ${reachable ? 'ok' : 'bad'}` }, reachable ? '已连通' : '连不上'),
-          h('span', { className: 'muted' }, `来源：${connection.source ?? '—'}`)),
-        h('div', { className: 'row' },
-          h('label', null, '推送入口'),
-          h('code', null, push.path || '—'),
-          h('span', { className: `pill ${push.tokenSet ? 'ok' : 'bad'}` },
-            push.tokenSet ? '令牌已配置' : '令牌未配置')),
-        h('div', { className: 'row' },
-          h('label', null, 'Miloco adapter'),
-          h('span', { className: `pill ${adapter.active ? 'ok' : (adapter.installed ? 'warn' : '')}` },
-            adapter.active ? '已启用' : (adapter.installed ? '已安装未启用' : '未安装')),
-          h('span', { className: 'muted' },
-            adapter.installed
-              ? `agent.platform=${adapter.agentPlatform || '未设置'}`
-              : '安装 Miloco 后可一键写入 adapter 与令牌')),
-        h('div', { className: 'row' },
-          h('label', null, '配置位置'),
-          h('span', { className: 'muted' },
-            `插件默认：${status.configLocation?.bundle ?? ''}；`
-            + `profile 覆盖：${status.configLocation?.profile ?? ''}`)),
+        h('div', { className: 'cardHead' },
+          h('h3', null, '运行状态'),
+          h('button', {
+            type: 'button',
+            className: `iconBtn${busy || versionBusy ? ' spinning' : ''}`,
+            title: '刷新运行状态与版本信息',
+            'aria-label': '刷新运行状态与版本信息',
+            disabled: busy,
+            onClick: () => {
+              reload()
+              loadVersion(true)
+            },
+          }, h('svg', {
+            viewBox: '0 0 24 24',
+            width: 16,
+            height: 16,
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeWidth: 1.8,
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            'aria-hidden': 'true',
+          },
+          h('path', { d: 'M20 11a8.1 8.1 0 0 0-15.5-2m-.5-4v4h4' }),
+          h('path', { d: 'M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4' })))),
+        h('div', { className: 'statusRow' },
+          h('span', { className: 'statusLabel' }, '后端'),
+          h('div', { className: 'statusValue' },
+            connection.baseUrl
+              ? h('a', {
+                href: connection.baseUrl,
+                target: '_blank',
+                rel: 'noopener noreferrer',
+                title: '在新标签页打开 Miloco 面板',
+              }, connection.baseUrl)
+              : h('code', null, '—'),
+            h('span', { className: 'muted' }, `来源：${connection.source ?? '—'}`)),
+          reachable
+            ? h('span', { className: 'statusCheck', title: '已连通', 'aria-label': '已连通' }, '✓')
+            : h('span', { className: 'statusEnd pill bad' }, '连不上')),
+        h('div', { className: 'statusRow' },
+          h('span', { className: 'statusLabel' }, '推送入口'),
+          h('div', { className: 'statusValue' },
+            h('code', null, push.path || '—')),
+          push.tokenSet
+            ? h('span', { className: 'statusCheck', title: '令牌已配置', 'aria-label': '令牌已配置' }, '✓')
+            : h('span', { className: 'statusEnd pill bad' }, '未配置')),
+        h('div', { className: 'statusRow' },
+          h('span', { className: 'statusLabel' }, 'Miloco adapter'),
+          h('div', { className: 'statusValue' },
+            h('span', { className: 'muted' },
+              adapter.installed
+                ? `agent.platform=${adapter.agentPlatform || '未设置'}`
+                : '安装 Miloco 后可一键写入 adapter 与令牌')),
+          adapter.active
+            ? h('span', { className: 'statusCheck', title: '已启用', 'aria-label': '已启用' }, '✓')
+            : h('span', { className: `statusEnd pill ${adapter.installed ? 'warn' : 'bad'}` },
+              adapter.installed ? '未启用' : '未安装')),
+        h('div', { className: 'statusRow' },
+          h('span', { className: 'statusLabel' }, 'Miloco 版本'),
+          h('div', { className: 'statusValue' },
+            h('code', {
+              title: currentVersion || '未知',
+            }, currentVersion ? currentVersion.split('+')[0] : '—'),
+            commitShort ? h('span', { className: 'muted' }, commitShort) : null,
+            h('span', { className: `pill ${versionPill[0]}` }, versionPill[1]),
+            h('div', { className: 'versionSub' },
+              latestVersion
+                ? h('span', null, `最新正式版 ${latestVersion}`)
+                : null,
+              mirrorCheck
+                ? h('span', {
+                  className: 'muted',
+                  title: 'GitHub 直连不可用，已通过镜像检查',
+                }, '镜像')
+                : null,
+              releaseUrl
+                ? h('a', {
+                  href: releaseUrl,
+                  target: '_blank',
+                  rel: 'noopener noreferrer',
+                  title: '查看发布说明',
+                }, '发布页')
+                : null,
+              isDevDeployment && devUpdateCommand
+                ? h('button', {
+                  type: 'button',
+                  className: 'versionLink',
+                  title: '查看源码部署的更新命令',
+                  onClick: () => setVersionCommandOpen(!versionCommandOpen),
+                }, versionCommandOpen ? '收起命令' : '手动更新')
+                : null,
+              h('button', {
+                type: 'button',
+                className: 'versionLink',
+                title: '重新读取 Miloco 版本与更新状态',
+                disabled: versionBusy,
+                onClick: () => loadVersion(true),
+              }, versionBusy ? '检查中…' : '检查更新'),
+              upgradeUnavailable
+                ? h('span', {
+                  className: 'versionDirty',
+                  title: upgradeInfo?.error || 'GitHub 与镜像均不可达',
+                }, '更新检查不可用')
+                : null,
+              isDevDeployment && gitDirty
+                ? h('span', {
+                  className: 'versionDirty',
+                  title: '源码工作区有本地改动，更新前请先处理或提交',
+                }, '工作区有改动')
+                : null,
+              versionError
+                ? h('span', { className: 'versionDirty', title: versionError }, '版本读取失败')
+                : null,
+              upgradePhase && !['idle', 'done', 'failed'].includes(upgradePhase)
+                ? h('span', null, `升级中：${upgradePhaseLabels[upgradePhase] || upgradePhase}`)
+                : null)),
+          hasUpdate && !isDevDeployment
+            ? h('div', { className: 'statusEnd' },
+              h('button', {
+                type: 'button',
+                className: 'primary',
+                disabled: upgradeBusy,
+                onClick: () => setUpgradeConfirmOpen(!upgradeConfirmOpen),
+              }, upgradeConfirmOpen ? '收起' : '更新'))
+            : null),
+        isDevDeployment && devUpdateCommand && versionCommandOpen
+          ? h('div', { className: 'versionManualPanel' },
+            h('code', { className: 'versionCommand' }, devUpdateCommand),
+            h('div', { className: 'row' },
+              h('button', {
+                type: 'button',
+                onClick: () => {
+                  try { void navigator.clipboard?.writeText(devUpdateCommand) } catch { /* ignore */ }
+                },
+              }, '复制命令')))
+          : null,
+        upgradePhase === 'failed'
+          ? h('div', { className: 'muted versionNote' }, `上次升级失败${upgradeLogPath ? `，可查看 ${upgradeLogPath}` : '，可查看 Miloco 的 upgrade.log'} 后重试。`)
+          : null,
+        upgradeConfirmOpen
+          ? h('div', { className: 'danger' },
+            h('h4', null, '更新 Miloco'),
+            h('div', { className: 'muted' },
+              '升级会短暂中断感知与自动化，完成后 Miloco 会自动重启。'),
+            h('div', { className: 'row' },
+              h('button', { type: 'button', onClick: () => setUpgradeConfirmOpen(false) }, '取消'),
+              h('button', {
+                type: 'button',
+                className: 'primary',
+                disabled: upgradeBusy,
+                onClick: runUpgrade,
+              }, upgradeBusy ? '启动中…' : '确认更新')))
+          : null,
+        upgradePolling
+          ? h('div', { className: 'muted versionNote' }, '正在等待升级完成…')
+          : null,
+        h('div', { className: 'statusRow' },
+          h('span', { className: 'statusLabel' }, '配置位置'),
+          h('div', { className: 'statusValue' },
+            h('span', { className: 'muted' },
+              `插件默认：${status.configLocation?.bundle ?? ''}；`
+              + `profile 覆盖：${status.configLocation?.profile ?? ''}`))),
         h('div', { className: 'row' },
-          h('button', { type: 'button', disabled: busy, onClick: reload }, '刷新'),
-          h('button', { type: 'button', disabled: busy, onClick: () => setConnectOpen(!connectOpen) },
-            connectOpen ? '收起连接设置' : '修改连接'),
           h('button', {
             type: 'button',
+            disabled: busy,
+            onClick: () => {
+              const opening = !connectOpen
+              setConnectOpen(opening)
+              if (opening) setUninstallOpen(false)
+            },
+          }, '修改连接'),
+          h('button', {
+            type: 'button',
+            className: 'dangerBtn',
             disabled: uninstallBusy,
-            onClick: () => setUninstallOpen(!uninstallOpen),
-          }, uninstallOpen ? '收起卸载' : '卸载 Miloco')),
+            onClick: () => {
+              const opening = !uninstallOpen
+              setUninstallOpen(opening)
+              if (opening) setConnectOpen(false)
+            },
+          }, '卸载 Miloco')),
         reachable ? connectForm : null,
         uninstallResult ? h('div', { className: 'muted' }, uninstallResult) : null,
         uninstallOpen
@@ -608,7 +1177,11 @@ window.__ModuleLoader__.load({
               }),
               h('button', {
                 type: 'button',
-                className: 'primary',
+                onClick: () => { setUninstallOpen(false); setConfirmText('') },
+              }, '取消'),
+              h('button', {
+                type: 'button',
+                className: 'dangerBtn',
                 disabled: uninstallBusy || confirmText !== 'UNINSTALL',
                 onClick: uninstall,
               }, uninstallBusy ? '卸载中…' : '确认卸载')))
@@ -623,6 +1196,7 @@ window.__ModuleLoader__.load({
 
     function apply(ctx) {
       ensureStyles()
+      installPresetGuide(ctx)
       ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
         name: 'settings.plugins.tab',
         id: TAB_ID,