@having5548/dsh-downloader 0.6.0 → 0.7.1

package/lib/client.js

@@ -1,14 +1,16 @@
 // ============================================================================
-// dsh-downloader —— DSH 下载代理插件（浏览器/客户端半部）
+// dsh-downloader —— DSH 下载代理插件（客户端半部）
 //
-// 职责：在「设置 → 下载代理」里挂一个管理面板
-//   1. 编辑插件 Config（经 ctx.get('configForms').get('dsh-downloader')）
-//   2. 轮询 /dsh-downloader/status 与 /proxies 显示实时状态
-//   3. 更新订阅 / 重启内核 / 逐节点测速与选择
+// 两个入口，共用同一套组件与样式（要求「两个入口的 UI 风格一致」）：
+//   1. 左侧栏导航页 —— sidebar.panellist（图标行）+ main（keyed 页面）
+//   2. 设置页       —— settings.section（同一套 Page 组件，variant='settings'）
+//   另外保留 sidebar.footer.action 的实时流量徽标。
 //
-// 以预打包 bundle 形式随插件安装，格式与官方 client 插件一致
-// （window.__ModuleLoader__）。注意：0.1.7 起 ctx.settingsScope 已删除，
-// 必须惰性走 ctx.configForms；且 scope.subscribe / getSnapshot 是类原型方法，
+// 文案：LOCALE_ZH / LOCALE_EN 两份完整字典，经 ctx.locale 注册（DSH 会按系统语言
+// 自动选中，用户也能在 设置 → 语言 里改）。页内另有 自动/中/EN 三态切换，只影响
+// 本插件页面，不劫持全局语言。
+//
+// 必须惰性走 ctx.configForms；scope.subscribe / getSnapshot 是类原型方法，
 // 直接传给 useSyncExternalStore 会因 this 丢失而崩，必须包一层闭包。
 // ============================================================================
 window.__ModuleLoader__.load({
@@ -26,6 +28,9 @@ window.__ModuleLoader__.load({
     var ENTRY_ID = 'dsh-downloader'
     var LOCALE_NS = 'dsh-downloader'
     var API_BASE = '/dsh-downloader/'
+    var PANEL_ID = 'dsh-downloader'
+    var LS_ADVANCED = 'dsh-downloader.advanced'
+    var LS_LANG = 'dsh-downloader.lang'
 
     var DEFAULTS = {
       enabled: true,
@@ -50,308 +55,817 @@ window.__ModuleLoader__.load({
       threads: 4,
       insecureTls: false,
       allowOutsideWorkspace: false,
-      maxRedirects: 10
+      maxRedirects: 10,
+      harnessProxy: false,
+      harnessProxyPort: 17890
     }
 
+    // ------------------------------------------------------------------
+    // 文案
+    // ------------------------------------------------------------------
     var LOCALE_ZH = {
       nav: '下载代理',
       title: '下载代理',
-      intro: '让模型下载境外文件时自动走代理、境内直连。代理出口由插件自带的订阅内核提供，不依赖本机 Clash。',
-      upstream: '上游',
-      nodes: '节点',
-      rules: '分流规则',
-      download: '下载',
-      refresh: '刷新',
-      restart: '重启内核',
-      updateSubscription: '更新订阅',
-      testAll: '全部测速',
-      select: '选择',
-      test: '测速',
-      clearLatency: '清空延迟',
-      sessionGuard: '会话保护',
-      guardIntro: '把国内 AI 平台域名写进 $DSH_HOME/.env 的 NO_PROXY，让模型连接绕开全局代理 —— 代理程序关掉或节点抖动都不会断链。写入前会自动备份。',
-      guardApply: '写入 NO_PROXY',
-      guardRestore: '还原备份',
-      guardCovered: '已覆盖',
-      guardMissing: '缺少',
-      guardNoProxyVars: '该文件没有配置 HTTP_PROXY / HTTPS_PROXY，此项暂时无效',
-      guardRestart: '改完需要重启 DSH 才生效',
-      notRunning: '未运行',
+      subtitle: '境外文件走代理、境内直连，由插件自带的订阅内核提供出口',
+      entryLabel: '下载代理',
+      langAuto: '自动',
+      langZh: '中文',
+      langEn: 'English',
+
+      // 状态
       stRunning: '运行中',
       stDisabled: '已关闭',
-      stNoSubscription: '无可用订阅',
       stFailed: '失败',
       stIdle: '未启动',
-      mdExplicit: '上游：配置的 proxyUrl',
-      mdEnvironment: '上游：启动环境代理',
-      mdSubscription: '上游：自包含订阅',
-      mdNone: '上游：未配置',
-      nodesBadge: '节点',
+      stNoSubscription: '未配置订阅',
+      stUnavailable: '不可用',
+      refresh: '刷新',
+      restartCore: '重启内核',
+      corePort: '内核端口',
+      coreNone: '未运行',
+      nodesCount: '节点',
+      currentNode: '当前节点',
+      nodeAuto: '自动选择',
+      modeExplicit: '固定代理地址',
+      modeSubscription: '订阅',
+      modeEnvironment: '环境代理',
+      modeNone: '未配置',
+      upstream: '上游',
+      upstreamNone: '既没有配置订阅，也没有代理地址',
+      notRunningHint: '内核没有运行，下载会直接失败。先看下面的上游配置。',
+
+      // 配置（节点配置）
       profiles: '节点配置',
-      profilesIntro: '一份配置 = 一条订阅地址或一个导入的配置文件，带自己的名字、上次更新时间与自动更新间隔（对齐 FlClash 的配置模型）。',
-      importUrl: '从订阅地址导入',
+      profilesHint: '一份配置 = 一条订阅地址或一个导入的配置文件',
+      addProfile: '添加配置',
+      importUrl: '订阅地址',
       importUrlPlaceholder: 'https://… 或 clash://install-config?url=…',
-      importLabelPlaceholder: '名称（留空则自动取响应头文件名，再退回域名）',
-      importFile: '从文件导入',
-      importBtn: '导入',
-      noProfiles: '还没有导入任何配置。可以从订阅地址或本地文件导入。',
-      profileCurrent: '当前',
-      profileFile: '本地文件',
-      profileAuto: '自动更新',
-      profileSelect: '选用',
-      profileUpdate: '更新',
-      profileRemove: '删除',
-      scopeTitle: '代理作用域',
-      scopeIntro: '只服务 DSH 自己发起的下载请求：内核只绑 127.0.0.1 并要求本进程的随机令牌，其它程序连不上也借不走；系统代理与环境变量从未被修改。',
-      trafficTitle: '经过本插件内核的实时流量',
+      importLabel: '名称（可留空）',
+      importFile: '导入文件',
+      import: '导入',
+      cancel: '取消',
+      emptyProfiles: '还没有配置。点右下角「添加配置」导入订阅或文件。',
+      current: '当前',
+      fileSource: '本地文件',
+      updatedAt: '更新于',
+      never: '从未更新',
+      use: '选用',
+      update: '更新',
+      remove: '删除',
+      autoUpdate: '自动更新',
+      autoUpdateOn: '自动更新 · 每 %s 小时',
+      trafficQuota: '流量',
+
+      // 节点
+      nodes: '代理节点',
+      nodesHint: '点一个节点即选用；「自动选择」按延迟自动挑',
+      testAll: '全部测速',
+      testing: '测速中…',
+      ms: '%s ms',
+      timeout: '超时',
+      untested: '未测',
+      needsNative: '需连接器',
+      nodeType: '类型',
+
+      // 下载
+      download: '下载',
+      downloadDir: '下载目录',
+      downloadDirHint: '留空 = DSH 的 downloads 目录',
+      threads: '线程数',
+      threadsHint: '服务端支持时按此并发下载；1 = 单连接',
+      maxMb: '单文件上限（MB）',
+      dirPlaceholder: '留空使用默认目录',
+
+      // 高级
+      advanced: '高级设置',
+      advancedHint: '打开后显示全部可调项',
+      advUpstream: '上游与订阅',
+      proxyUrl: '固定代理地址',
+      proxyUrlHint: '显式上游，支持 http:// 与 socks5://；填了就不再使用订阅',
+      subscriptionUrl: '订阅地址（旧版）',
+      subscriptionUrlHint: '只有在没有任何「节点配置」时才会用它',
+      fetchProxyUrl: '拉取订阅用的代理',
+      fetchProxyUrlHint: '仅当订阅本身被墙时填，必须是 http(s):// 代理',
+      groupType: '分组类型',
+      preferredNode: '首选节点',
+      preferredNodeHint: '按名字固定一个节点，优先级最高',
+      autoUpdateHours: '订阅自动更新（小时）',
+      latencyTestUrl: '测速地址',
+      latencyTimeoutMs: '测速超时（ms）',
+      advRouting: '分流',
+      domesticDirect: '境内直连',
+      domesticDirectHint: '关闭后所有目标都走代理',
+      protectAiPlatforms: '国内 AI 平台强制直连',
+      protectAiPlatformsHint: '最高优先级 DIRECT，连代理抖动也不会断会话',
+      extraDirectDomains: '额外直连域名',
+      extraDirectDomainsHint: '逗号或换行分隔',
+      extraRules: '追加规则',
+      extraRulesHint: '每行一条，如 DOMAIN-SUFFIX,example.com,DIRECT',
+      excludeRules: '剔除规则',
+      excludeRulesHint: '每行一条，子串匹配订阅规则',
+      advEngine: '下载引擎',
+      maxRedirects: '最大重定向次数',
+      stallTimeoutS: '停滞判定（秒）',
+      downloadTimeoutS: '总时长预算（秒）',
+      insecureTls: '跳过 TLS 校验',
+      insecureTlsHint: '仅企业 TLS 解密环境需要',
+      allowOutsideWorkspace: '允许写工作区外',
+      allowOutsideWorkspaceHint: '否则只写到工作区与下载目录',
+      guardShellDownloads: '拦截未走代理的境外 shell 下载',
+      guardShellDownloadsHint: '拦到就改用 dsh_run_proxied 重跑',
+      advHarness: 'harness 出网',
+      harnessProxy: '开放给 harness',
+      harnessProxyHint: '让 web_fetch / shell 子进程 / MCP 的 HTTP 也走内核。写入 $DSH_HOME/.env 后需重启 DSH',
+      harnessProxyPort: '固定端口',
+      harnessProxyPortHint: '写进 .env，不能随机；被占用时自动退回随机端口',
+
+      // 会话保护
+      guard: '会话保护',
+      guardHint: '把国内 AI 平台域名写进 NO_PROXY，代理关掉也不断会话',
+      guardCovered: '已覆盖 %s 个域名',
+      guardMissing: '缺少 %s 个',
+      guardApply: '写入',
+      guardRestore: '还原',
+      guardNoVars: '该文件还没有配置 HTTP_PROXY，这项暂时不起作用',
+      guardRestart: '改完需要重启 DSH',
+
+      // 流量 / 页脚
+      traffic: '流量',
       trafficUp: '上行',
       trafficDown: '下行',
       trafficTotal: '累计',
-      unavailable: '当前环境无法持久化设置，本次修改仅当前页面生效。'
+      trafficIdle: '内核没在跑，没有流量',
+
+      // 其它
+      unavailable: '当前环境无法持久化设置，本次修改仅当前页面生效。',
+      scopeNote: '内核只绑 127.0.0.1 并要求本进程令牌，其它程序连不上也借不走。',
+      about: '关于',
+      dataDir: '数据目录',
+      saved: '已保存',
+      failed: '失败'
     }
+
     var LOCALE_EN = {
       nav: 'Download proxy',
       title: 'Download proxy',
-      intro: 'Routes foreign downloads through a proxy and keeps domestic targets direct. The proxy exit comes from the plugin\'s own subscription core — no local Clash needed.',
-      upstream: 'Upstream',
-      nodes: 'Nodes',
-      rules: 'Rules',
-      download: 'Download',
+      subtitle: 'Foreign files go through the proxy, domestic stay direct — the exit comes from the plugin own subscription core',
+      entryLabel: 'Download proxy',
+      langAuto: 'Auto',
+      langZh: '中文',
+      langEn: 'English',
+
+      stRunning: 'Running',
+      stDisabled: 'Disabled',
+      stFailed: 'Failed',
+      stIdle: 'Not started',
+      stNoSubscription: 'No subscription',
+      stUnavailable: 'Unavailable',
       refresh: 'Refresh',
-      restart: 'Restart core',
-      updateSubscription: 'Update subscription',
-      testAll: 'Test all',
-      select: 'Select',
-      test: 'Test',
-      clearLatency: 'Clear latencies',
-      sessionGuard: 'Session guard',
-      guardIntro: 'Writes the Chinese AI platform domains into NO_PROXY in $DSH_HOME/.env so model connections bypass the global proxy — closing the proxy app or losing a node cannot break the session. The file is backed up before any write.',
-      guardApply: 'Write NO_PROXY',
-      guardRestore: 'Restore backup',
-      guardCovered: 'covered',
-      guardMissing: 'missing',
-      guardNoProxyVars: 'That file sets no HTTP_PROXY / HTTPS_PROXY, so this entry is inert for now',
-      guardRestart: 'Restart DSH for the change to take effect',
-      notRunning: 'not running',
-      stRunning: 'running',
-      stDisabled: 'disabled',
-      stNoSubscription: 'no usable subscription',
-      stFailed: 'failed',
-      stIdle: 'idle',
-      mdExplicit: 'upstream: configured proxyUrl',
-      mdEnvironment: 'upstream: launch environment',
-      mdSubscription: 'upstream: self-contained subscription',
-      mdNone: 'upstream: not configured',
-      nodesBadge: 'nodes',
+      restartCore: 'Restart core',
+      corePort: 'Core port',
+      coreNone: 'not running',
+      nodesCount: 'Nodes',
+      currentNode: 'Current node',
+      nodeAuto: 'Auto select',
+      modeExplicit: 'Fixed proxy URL',
+      modeSubscription: 'Subscription',
+      modeEnvironment: 'Environment proxy',
+      modeNone: 'Not configured',
+      upstream: 'Upstream',
+      upstreamNone: 'Neither a subscription nor a proxy URL is configured',
+      notRunningHint: 'The core is not running, so downloads will fail. Check the upstream settings below.',
+
       profiles: 'Node profiles',
-      profilesIntro: 'One profile is either a subscription URL or an imported file, each with its own label, last-update time and auto-update interval — the same model FlClash uses.',
-      importUrl: 'Import from a subscription URL',
+      profilesHint: 'One profile = a subscription URL or an imported config file',
+      addProfile: 'Add profile',
+      importUrl: 'Subscription URL',
       importUrlPlaceholder: 'https://… or clash://install-config?url=…',
-      importLabelPlaceholder: 'Name (blank: use the response filename, then the host)',
-      importFile: 'Import from a file',
-      importBtn: 'Import',
-      noProfiles: 'No profiles yet. Import one from a subscription URL or a local file.',
-      profileCurrent: 'current',
-      profileFile: 'local file',
-      profileAuto: 'auto-update',
-      profileSelect: 'Use',
-      profileUpdate: 'Update',
-      profileRemove: 'Delete',
-      scopeTitle: 'Proxy scope',
-      scopeIntro: 'Serves only downloads this plugin starts: the core binds 127.0.0.1 and requires a per-process random token, so no other program can reach or borrow it. The system proxy and the environment are never modified.',
-      trafficTitle: 'Live traffic through this plugin’s rule core',
+      importLabel: 'Label (optional)',
+      importFile: 'Import file',
+      import: 'Import',
+      cancel: 'Cancel',
+      emptyProfiles: 'No profiles yet. Use "Add profile" in the corner to import one.',
+      current: 'Current',
+      fileSource: 'Local file',
+      updatedAt: 'Updated',
+      never: 'never',
+      use: 'Use',
+      update: 'Update',
+      remove: 'Remove',
+      autoUpdate: 'Auto update',
+      autoUpdateOn: 'Auto update · every %s h',
+      trafficQuota: 'Traffic',
+
+      nodes: 'Nodes',
+      nodesHint: 'Click a node to use it; "Auto select" picks by latency',
+      testAll: 'Test all',
+      testing: 'Testing…',
+      ms: '%s ms',
+      timeout: 'Timeout',
+      untested: 'untested',
+      needsNative: 'needs connector',
+      nodeType: 'Type',
+
+      download: 'Download',
+      downloadDir: 'Download folder',
+      downloadDirHint: 'Empty = the DSH downloads folder',
+      threads: 'Threads',
+      threadsHint: 'Concurrent chunks when the server supports ranges; 1 = single stream',
+      maxMb: 'Max file size (MB)',
+      dirPlaceholder: 'Empty uses the default folder',
+
+      advanced: 'Advanced',
+      advancedHint: 'Reveal every tunable option',
+      advUpstream: 'Upstream and subscription',
+      proxyUrl: 'Fixed proxy URL',
+      proxyUrlHint: 'Explicit upstream, http:// or socks5://; when set, the subscription is unused',
+      subscriptionUrl: 'Subscription URL (legacy)',
+      subscriptionUrlHint: 'Only used when no "node profile" exists',
+      fetchProxyUrl: 'Proxy for fetching the subscription',
+      fetchProxyUrlHint: 'Only when the subscription itself is blocked; must be an http(s):// proxy',
+      groupType: 'Group type',
+      preferredNode: 'Preferred node',
+      preferredNodeHint: 'Pin one node by name; highest priority',
+      autoUpdateHours: 'Subscription auto update (h)',
+      latencyTestUrl: 'Latency test URL',
+      latencyTimeoutMs: 'Latency timeout (ms)',
+      advRouting: 'Routing',
+      domesticDirect: 'Domestic direct',
+      domesticDirectHint: 'Turn off to proxy every target',
+      protectAiPlatforms: 'Pin domestic AI platforms direct',
+      protectAiPlatformsHint: 'Highest priority DIRECT, so a flapping proxy cannot break the session',
+      extraDirectDomains: 'Extra direct domains',
+      extraDirectDomainsHint: 'Comma or newline separated',
+      extraRules: 'Extra rules',
+      extraRulesHint: 'One per line, e.g. DOMAIN-SUFFIX,example.com,DIRECT',
+      excludeRules: 'Excluded rules',
+      excludeRulesHint: 'One per line, substring match against subscription rules',
+      advEngine: 'Download engine',
+      maxRedirects: 'Max redirects',
+      stallTimeoutS: 'Stall timeout (s)',
+      downloadTimeoutS: 'Total budget (s)',
+      insecureTls: 'Skip TLS verification',
+      insecureTlsHint: 'Only for enterprise TLS inspection',
+      allowOutsideWorkspace: 'Write outside the workspace',
+      allowOutsideWorkspaceHint: 'Otherwise only the workspace and the download folder',
+      guardShellDownloads: 'Block unproxied overseas shell downloads',
+      guardShellDownloadsHint: 'When blocked, re-run through dsh_run_proxied',
+      advHarness: 'Harness egress',
+      harnessProxy: 'Expose the core to the harness',
+      harnessProxyHint: 'Also route web_fetch / shell children / MCP HTTP. Written to $DSH_HOME/.env; restart DSH',
+      harnessProxyPort: 'Fixed port',
+      harnessProxyPortHint: 'Must be fixed because .env pins it; falls back to a random port when taken',
+
+      guard: 'Session guard',
+      guardHint: 'Write the AI platform domains into NO_PROXY so a dead proxy cannot drop the session',
+      guardCovered: '%s domains covered',
+      guardMissing: '%s missing',
+      guardApply: 'Write',
+      guardRestore: 'Restore',
+      guardNoVars: 'That file has no HTTP_PROXY yet, so this has no effect',
+      guardRestart: 'Restart DSH to apply',
+
+      traffic: 'Traffic',
       trafficUp: 'Up',
       trafficDown: 'Down',
       trafficTotal: 'total',
-      unavailable: 'Settings cannot be persisted in this environment; changes apply to this page only.'
+      trafficIdle: 'The core is not running, so there is no traffic',
+
+      unavailable: 'Settings cannot be persisted here; changes apply to this page only.',
+      scopeNote: 'The core binds 127.0.0.1 and requires this process token, so other programs cannot borrow it.',
+      about: 'About',
+      dataDir: 'Data folder',
+      saved: 'Saved',
+      failed: 'failed'
     }
 
     // ------------------------------------------------------------------
-    // 工具函数
+    // 小工具
     // ------------------------------------------------------------------
     function formatBytes(value) {
-      var n = Number(value) || 0
+      var n = Number(value)
+      if (!isFinite(n) || n <= 0) return '0 B'
       var units = ['B', 'KB', 'MB', 'GB', 'TB']
       var i = 0
-      while (n >= 1024 && i < units.length - 1) { n /= 1024; i++ }
-      return (i === 0 ? n : n.toFixed(n >= 100 ? 0 : n >= 10 ? 1 : 2)) + ' ' + units[i]
+      while (n >= 1024 && i < units.length - 1) { n = n / 1024; i += 1 }
+      return (n >= 100 || i === 0 ? Math.round(n) : n.toFixed(1)) + ' ' + units[i]
+    }
+
+    function formatRate(value) {
+      var n = Number(value)
+      if (!isFinite(n) || n <= 0) return '0 B/s'
+      return formatBytes(n) + '/s'
+    }
+
+    function formatRateTiny(value) {
+      var n = Number(value)
+      if (!isFinite(n) || n <= 0) return '0'
+      if (n < 1024) return Math.round(n) + 'B'
+      if (n < 1024 * 1024) return Math.round(n / 1024) + 'K'
+      return (n / 1024 / 1024).toFixed(1) + 'M'
     }
 
-    function formatTime(ts) {
-      if (ts === null || ts === undefined) return '—'
-      try { return new Date(ts).toLocaleString() } catch (e) { return String(ts) }
+    function formatTime(value) {
+      if (!value) return ''
+      try {
+        var d = new Date(value)
+        if (isNaN(d.getTime())) return ''
+        var pad = function (n) { return (n < 10 ? '0' : '') + n }
+        return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes())
+      } catch (e) { return '' }
     }
 
-    /** 速率：在 formatBytes 后面加 /s。 */
-    function formatRate(bytesPerSecond) {
-      return formatBytes(bytesPerSecond) + '/s'
+    function readStore(key, fallback) {
+      try {
+        var raw = window.localStorage.getItem(key)
+        return raw === null ? fallback : raw
+      } catch (e) { return fallback }
     }
 
-    /** 收起栏（56px）用的极简写法：12.4M / 980K。 */
-    function formatRateTiny(bytesPerSecond) {
-      var n = Number(bytesPerSecond) || 0
-      if (n < 1024) return n.toFixed(0) + 'B'
-      if (n < 1024 * 1024) return (n / 1024).toFixed(0) + 'K'
-      if (n < 1024 * 1024 * 1024) return (n / 1024 / 1024).toFixed(1) + 'M'
-      return (n / 1024 / 1024 / 1024).toFixed(1) + 'G'
+    function writeStore(key, value) {
+      try { window.localStorage.setItem(key, value) } catch (e) { /* ignore */ }
     }
 
-    /** 与后端同源的请求封装（面板内外都要用，所以放在模块层）。 */
     function apiFetch(path, body) {
-      return fetch(API_BASE + path, {
-        method: body === undefined ? 'GET' : 'POST',
-        headers: body === undefined ? undefined : { 'content-type': 'application/json' },
-        body: body === undefined ? undefined : JSON.stringify(body)
-      }).then(function (response) {
+      var init = { method: body === undefined ? 'GET' : 'POST' }
+      if (body !== undefined) {
+        init.headers = { 'content-type': 'application/json' }
+        init.body = JSON.stringify(body)
+      }
+      return fetch(API_BASE + path, init).then(function (response) {
         return response.text().then(function (text) {
-          var payload = text.length > 0 ? JSON.parse(text) : {}
+          var payload = {}
+          if (text.length > 0) {
+            try { payload = JSON.parse(text) } catch (e) { payload = { error: text } }
+          }
           if (!response.ok) throw new Error(payload.error || ('HTTP ' + response.status))
           return payload
         })
       })
     }
 
-    function linesToArray(text) {
-      return String(text || '')
-        .split(/\r?\n/)
-        .map(function (line) { return line.trim() })
-        .filter(function (line) { return line.length > 0 })
+    function cls() {
+      var parts = []
+      for (var i = 0; i < arguments.length; i += 1) {
+        if (arguments[i]) parts.push(arguments[i])
+      }
+      return parts.join(' ')
     }
 
-    function arrayToLines(list) {
-      return Array.isArray(list) ? list.join('\n') : ''
+    /**
+     * 取 locale 服务。
+     *
+     * `ctx.locale` 只在 `inject` 里声明了硬依赖 `locale` 时才存在；本插件只 inject
+     * `slots`，所以必须走可选访问 `ctx.get('locale')` —— 否则下面全部降级成英文，
+     * 而界面其它地方仍是中文（实测踩过）。
+     */
+    function localeService(ctx) {
+      if (!ctx) return null
+      try {
+        if (ctx.locale) return ctx.locale
+      } catch (e) { /* ignore */ }
+      try {
+        var service = ctx.get('locale')
+        if (service) return service
+      } catch (e) { /* ignore */ }
+      return null
     }
 
-    // 状态 / 上游模式的展示名（原始值仍是英文标识符，只翻译给人看的那一份）
-    var STATE_KEYS = { running: 'stRunning', disabled: 'stDisabled', 'no-subscription': 'stNoSubscription', failed: 'stFailed', idle: 'stIdle' }
-    var MODE_KEYS = { explicit: 'mdExplicit', environment: 'mdEnvironment', subscription: 'mdSubscription', none: 'mdNone' }
+    // ------------------------------------------------------------------
+    // 样式（全部走 DSH 主题令牌，自动适配明暗）
+    // ------------------------------------------------------------------
+    var CSS_ID = 'dshdl-styles'
 
-    function labelOf(map, value, translate) {
-      var key = map[value]
-      return key ? translate(key) : (value || '?')
+    function ensureCss() {
+      if (document.getElementById(CSS_ID)) return
+      var style = document.createElement('style')
+      style.id = CSS_ID
+      style.textContent = [
+        '.dshdl-root{display:flex;flex-direction:column;gap:22px;padding:22px 26px 40px;color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5;}',
+        '.dshdl-root.dshdl-compact{padding:16px 16px 32px;gap:18px;}',
+        '.dshdl-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;}',
+        '.dshdl-headText{flex:1 1 auto;min-width:180px;}',
+        '.dshdl-h1{margin:0;font-size:20px;font-weight:600;letter-spacing:.2px;}',
+        '.dshdl-sub{margin:3px 0 0;color:var(--dsw-alias-label-secondary);font-size:12px;}',
+        '.dshdl-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}',
+        '.dshdl-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid var(--dsw-alias-border-l1);color:var(--dsw-alias-label-secondary);}',
+        '.dshdl-pill.ok{color:var(--dsw-alias-state-success-primary);border-color:var(--dsw-alias-state-success-primary);}',
+        '.dshdl-pill.err{color:var(--dsw-alias-state-error-primary);border-color:var(--dsw-alias-state-error-primary);}',
+        '.dshdl-pill.warn{color:var(--dsw-alias-state-warn-primary);border-color:var(--dsw-alias-state-warn-primary);}',
+        '.dshdl-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;}',
+        '.dshdl-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font-size:12px;cursor:pointer;}',
+        '.dshdl-btn:hover:not(:disabled){border-color:var(--dsw-alias-border-l2);}',
+        '.dshdl-btn:disabled{opacity:.5;cursor:default;}',
+        '.dshdl-btn.primary{background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary);color:#fff;}',
+        '.dshdl-btn.ghost{background:transparent;}',
+        '.dshdl-btn.danger{color:var(--dsw-alias-state-error-primary);}',
+        '.dshdl-seg{display:inline-flex;border:1px solid var(--dsw-alias-border-l1);border-radius:8px;overflow:hidden;}',
+        '.dshdl-seg button{padding:4px 10px;font-size:12px;background:transparent;border:0;color:var(--dsw-alias-label-secondary);cursor:pointer;}',
+        '.dshdl-seg button.on{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);}',
+        '.dshdl-card{background:var(--dsw-alias-bg-layer-1);border:1px solid var(--dsw-alias-border-l1);border-radius:12px;padding:16px 18px;}',
+        '.dshdl-cardTitle{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:14px;font-weight:600;}',
+        '.dshdl-cardHint{margin:0 0 14px;color:var(--dsw-alias-label-secondary);font-size:12px;}',
+        '.dshdl-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:12px;}',
+        '.dshdl-kv dt{color:var(--dsw-alias-label-secondary);}',
+        '.dshdl-kv dd{margin:0;word-break:break-all;}',
+        '.dshdl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;}',
+        '.dshdl-tile{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:10px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-layer-2);cursor:pointer;transition:border-color .12s ease,transform .12s ease;}',
+        '.dshdl-tile:hover{border-color:var(--dsw-alias-border-l2);}',
+        '.dshdl-tile.on{border-color:var(--dsw-alias-brand-primary);}',
+        '.dshdl-tile.dead{opacity:.62;}',
+        '.dshdl-tileName{font-size:13px;font-weight:600;padding-right:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}',
+        '.dshdl-tileMeta{font-size:11px;color:var(--dsw-alias-label-secondary);}',
+        '.dshdl-tileFoot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--dsw-alias-label-secondary);}',
+        '.dshdl-lat{font-variant-numeric:tabular-nums;}',
+        '.dshdl-lat.ok{color:var(--dsw-alias-state-success-primary);}',
+        '.dshdl-lat.bad{color:var(--dsw-alias-state-error-primary);}',
+        '.dshdl-bar{height:3px;border-radius:2px;background:var(--dsw-alias-border-l1);overflow:hidden;}',
+        '.dshdl-bar span{display:block;height:100%;background:var(--dsw-alias-brand-primary);}',
+        '.dshdl-more{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:6px;border:0;background:transparent;color:var(--dsw-alias-label-secondary);cursor:pointer;line-height:1;}',
+        '.dshdl-more:hover{background:var(--dsw-alias-bg-layer-1);}',
+        '.dshdl-menu{position:absolute;top:32px;right:8px;z-index:5;min-width:132px;padding:4px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-overlay);box-shadow:0 8px 24px rgba(0,0,0,.28);}',
+        '.dshdl-menu button{display:block;width:100%;text-align:left;padding:6px 10px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-primary);font-size:12px;cursor:pointer;}',
+        '.dshdl-menu button:hover{background:var(--dsw-alias-bg-layer-2);}',
+        '.dshdl-menu button.danger{color:var(--dsw-alias-state-error-primary);}',
+        '.dshdl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--dsw-alias-border-l1);}',
+        '.dshdl-row:first-child{border-top:0;}',
+        '.dshdl-rowText{flex:1 1 auto;min-width:0;}',
+        '.dshdl-rowLabel{font-size:12.5px;}',
+        '.dshdl-rowHint{margin-top:2px;font-size:11px;color:var(--dsw-alias-label-secondary);}',
+        '.dshdl-rowCtl{flex:0 0 auto;display:flex;align-items:center;gap:8px;}',
+        '.dshdl-input,.dshdl-textarea,.dshdl-select{width:100%;min-width:140px;padding:6px 10px;border-radius:8px;border:1px solid var(--dsw-alias-border-l1);background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);font-size:12px;font-family:inherit;}',
+        '.dshdl-textarea{min-height:58px;resize:vertical;}',
+        '.dshdl-input:focus,.dshdl-textarea:focus,.dshdl-select:focus{outline:none;border-color:var(--dsw-alias-brand-primary);}',
+        '.dshdl-row.vertical{display:block;}',
+        '.dshdl-row.vertical .dshdl-rowCtl{margin-top:6px;}',
+        '.dshdl-switch{position:relative;width:36px;height:20px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-base);cursor:pointer;flex:0 0 auto;}',
+        '.dshdl-switch span{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--dsw-alias-label-secondary);transition:transform .14s ease;}',
+        '.dshdl-switch.on{background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary);}',
+        '.dshdl-switch.on span{transform:translateX(16px);background:#fff;}',
+        '.dshdl-traffic{display:flex;gap:26px;flex-wrap:wrap;}',
+        '.dshdl-tItem{min-width:110px;}',
+        '.dshdl-tLabel{font-size:11px;color:var(--dsw-alias-label-secondary);}',
+        '.dshdl-tValue{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;}',
+        '.dshdl-tSum{font-size:11px;color:var(--dsw-alias-label-secondary);}',
+        '.dshdl-inlineForm{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--dsw-alias-border-l1);}',
+        '.dshdl-inlineRow{display:flex;gap:8px;flex-wrap:wrap;}',
+        '.dshdl-inlineRow .dshdl-input{flex:1 1 200px;}',
+        '.dshdl-note{padding:10px 12px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);font-size:12px;}',
+        '.dshdl-err{padding:8px 12px;border-radius:8px;border:1px solid var(--dsw-alias-state-error-primary);color:var(--dsw-alias-state-error-primary);font-size:12px;}',
+        '.dshdl-empty{padding:22px 0;text-align:center;color:var(--dsw-alias-label-secondary);font-size:12px;}',
+        '.dshdl-trafFoot{display:flex;flex-direction:column;gap:1px;font-size:11px;line-height:1.25;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;}',
+        '.dshdl-trafFoot .row{display:flex;align-items:center;gap:5px;}',
+        '.dshdl-trafRail{display:flex;flex-direction:column;align-items:center;font-size:10px;color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;}'
+      ].join('\n')
+      document.head.appendChild(style)
     }
 
     // ------------------------------------------------------------------
-    // 样式（沿用 DSH 语义化 CSS 变量，自动适配明暗主题）
+    // 基础组件
     // ------------------------------------------------------------------
-    var CSS = [
-      '.dshdl{display:flex;flex-direction:column;gap:16px}',
-      '.dshdl-title{font-size:15px;font-weight:600;margin:0}',
-      '.dshdl-desc{font-size:12.5px;line-height:19px;color:var(--dsw-alias-label-secondary,#5b616b);margin:0}',
-      '.dshdl-card{border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:var(--dsw-alias-bg-layer-2,transparent)}',
-      '.dshdl-cardHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}',
-      '.dshdl-cardTitle{font-size:13px;font-weight:600}',
-      '.dshdl-badges{display:flex;gap:6px;flex-wrap:wrap}',
-      '.dshdl-badge{font-size:11.5px;line-height:16px;padding:2px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.14));color:var(--dsw-alias-label-secondary,#5b616b)}',
-      '.dshdl-badge.dshdl-ok{border-color:var(--dsw-alias-state-success-primary,#2fa95e);color:var(--dsw-alias-state-success-primary,#2fa95e)}',
-      '.dshdl-badge.dshdl-warn{border-color:var(--dsw-alias-state-warn-primary,#d9822b);color:var(--dsw-alias-state-warn-primary,#d9822b)}',
-      '.dshdl-badge.dshdl-err{border-color:var(--dsw-alias-state-error-primary,#d64545);color:var(--dsw-alias-state-error-primary,#d64545)}',
-      '.dshdl-row{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:10px;align-items:center}',
-      '.dshdl-label{font-size:12.5px;color:var(--dsw-alias-label-secondary,#5b616b)}',
-      '.dshdl-hint{font-size:11.5px;color:var(--dsw-alias-label-tertiary,#8a8f98);grid-column:2}',
-      '.dshdl-input,.dshdl-select,.dshdl-area{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;padding:5px 8px;border-radius:7px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.16));background:var(--dsw-alias-bg-layer-1,transparent);color:var(--dsw-alias-label-primary,inherit)}',
-      '.dshdl-area{min-height:62px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}',
-      '.dshdl-check{width:15px;height:15px}',
-      '.dshdl-actions{display:flex;gap:8px;flex-wrap:wrap}',
-      '.dshdl-btn{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:7px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.16));background:var(--dsw-alias-bg-layer-1,transparent);color:var(--dsw-alias-label-primary,inherit);cursor:pointer}',
-      '.dshdl-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.06))}',
-      '.dshdl-btn:disabled{opacity:.5;cursor:default}',
-      '.dshdl-btn.dshdl-small{font-size:11.5px;padding:3px 8px}',
-      '.dshdl-nodes{max-height:280px;overflow:auto;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.1));border-radius:8px}',
-      '.dshdl-node{display:flex;align-items:center;gap:8px;padding:5px 9px;font-size:12px;border-bottom:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.06))}',
-      '.dshdl-node:last-child{border-bottom:none}',
-      '.dshdl-node.dshdl-active{background:var(--dsw-alias-interactive-bg-hover,rgba(0,0,0,.05))}',
-      '.dshdl-nodeName{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
-      '.dshdl-nodeMeta{color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:11.5px;white-space:nowrap}',
-      '.dshdl-error{font-size:12px;color:var(--dsw-alias-state-error-primary,#d64545);white-space:pre-wrap;word-break:break-word}',
-      '.dshdl-warn{font-size:12px;color:var(--dsw-alias-state-warn-primary,#d9822b)}',
-      '.dshdl-empty{font-size:12px;color:var(--dsw-alias-label-tertiary,#8a8f98);padding:8px 2px}',
-      '.dshdl-traf{display:flex;flex-direction:column;gap:1px;padding:2px 4px;font-variant-numeric:tabular-nums;line-height:1.25}',
-      '.dshdl-trafRow{display:flex;align-items:baseline;gap:4px;font-size:11px;white-space:nowrap}',
-      '.dshdl-trafArrow{font-size:10px;width:9px;text-align:center;color:var(--dsw-alias-label-tertiary,#8a8f98)}',
-      '.dshdl-trafArrow.up{color:var(--dsw-alias-state-warning-primary,#e0a33e)}',
-      '.dshdl-trafArrow.down{color:var(--dsw-alias-state-business-primary,#4c7ef3)}',
-      '.dshdl-trafRate{font-weight:600;color:var(--dsw-alias-label-primary,inherit)}',
-      '.dshdl-trafSum{margin-left:auto;font-size:10px;color:var(--dsw-alias-label-tertiary,#8a8f98)}',
-      '.dshdl-trafRail{display:flex;flex-direction:column;align-items:center;gap:0;font-variant-numeric:tabular-nums;line-height:1.1}',
-      '.dshdl-trafRailArrow{font-size:9px;color:var(--dsw-alias-state-business-primary,#4c7ef3)}',
-      '.dshdl-trafRailRate{font-size:9px;font-weight:600;color:var(--dsw-alias-label-secondary,#8a8f98)}',
-      '.dshdl-importRow{display:flex;flex-direction:column;gap:6px}',
-      '.dshdl-fileBtn{display:inline-flex;align-items:center}'
-    ].join('')
+    function h() { return React.createElement.apply(null, arguments) }
 
-    function ensureCss() {
-      try {
-        if (document.getElementById('dsh-downloader-style')) return
-        var el = document.createElement('style')
-        el.id = 'dsh-downloader-style'
-        el.textContent = CSS
-        document.head.appendChild(el)
-      } catch (e) { /* ignore */ }
+    function Pill(props) {
+      var tone = props.tone === 'ok' ? ' ok' : props.tone === 'err' ? ' err' : props.tone === 'warn' ? ' warn' : ''
+      return h('span', { className: 'dshdl-pill' + tone, title: props.title || '' },
+        props.tone ? h('span', { className: 'dshdl-dot' }) : null,
+        props.children)
+    }
+
+    function Btn(props) {
+      return h('button', {
+        type: 'button',
+        className: cls('dshdl-btn', props.variant === 'primary' ? 'primary' : props.variant === 'ghost' ? 'ghost' : props.variant === 'danger' ? 'danger' : ''),
+        disabled: props.disabled === true,
+        onClick: props.onClick,
+        title: props.title || ''
+      }, props.children)
+    }
+
+    function Switch(props) {
+      return h('button', {
+        type: 'button',
+        className: cls('dshdl-switch', props.value ? 'on' : ''),
+        role: 'switch',
+        'aria-checked': props.value ? 'true' : 'false',
+        'aria-label': props.label || '',
+        disabled: props.disabled === true,
+        onClick: function () { if (props.onChange) props.onChange(!props.value) }
+      }, h('span', null))
+    }
+
+    function Card(props) {
+      return h('section', { className: 'dshdl-card' },
+        h('h3', { className: 'dshdl-cardTitle' },
+          props.title,
+          props.titleExtra || null),
+        props.hint ? h('p', { className: 'dshdl-cardHint' }, props.hint) : null,
+        props.children)
+    }
+
+    /** 一行设置项：左标签+说明，右控件。 */
+    function Row(props) {
+      return h('div', { className: cls('dshdl-row', props.vertical ? 'vertical' : '') },
+        h('div', { className: 'dshdl-rowText' },
+          h('div', { className: 'dshdl-rowLabel' }, props.label),
+          props.hint ? h('div', { className: 'dshdl-rowHint' }, props.hint) : null),
+        h('div', { className: 'dshdl-rowCtl' }, props.children))
+    }
+
+    /** 文本输入：本地草稿，失焦/回车才提交，避免每敲一个字就写配置。 */
+    function TextRow(props) {
+      var state = React.useState(props.value === undefined ? '' : String(props.value))
+      var draft = state[0]
+      var setDraft = state[1]
+      React.useEffect(function () { setDraft(props.value === undefined ? '' : String(props.value)) }, [props.value])
+      function commit() {
+        if (props.onCommit && String(props.value === undefined ? '' : props.value) !== draft) props.onCommit(draft)
+      }
+      return h(Row, { label: props.label, hint: props.hint },
+        h('input', {
+          className: 'dshdl-input',
+          type: props.type || 'text',
+          value: draft,
+          placeholder: props.placeholder || '',
+          onChange: function (e) { setDraft(e.target.value) },
+          onBlur: commit,
+          onKeyDown: function (e) { if (e.key === 'Enter') { commit(); e.currentTarget.blur() } }
+        }))
+    }
+
+    /** 多行列表（规则类）用逗号/换行编辑。 */
+    function ListRow(props) {
+      var value = Array.isArray(props.value) ? props.value.join('\n') : ''
+      var state = React.useState(value)
+      var draft = state[0]
+      var setDraft = state[1]
+      React.useEffect(function () { setDraft(Array.isArray(props.value) ? props.value.join('\n') : '') }, [props.value])
+      function commit() {
+        var next = draft.split(/[\n,]+/).map(function (s) { return s.trim() }).filter(function (s) { return s.length > 0 })
+        if (props.onCommit) props.onCommit(next)
+      }
+      return h(Row, { label: props.label, hint: props.hint, vertical: true },
+        h('textarea', {
+          className: 'dshdl-textarea',
+          value: draft,
+          placeholder: props.placeholder || '',
+          onChange: function (e) { setDraft(e.target.value) },
+          onBlur: commit
+        }))
+    }
+
+    function SelectRow(props) {
+      return h(Row, { label: props.label, hint: props.hint },
+        h('select', {
+          className: 'dshdl-select',
+          value: props.value,
+          onChange: function (e) { if (props.onCommit) props.onCommit(e.target.value) }
+        }, props.options.map(function (option) {
+          return h('option', { key: option.value, value: option.value }, option.label)
+        })))
     }
 
     // ------------------------------------------------------------------
-    // 面板
+    // 语言：自动（跟随 DSH / 系统）+ 手动覆盖，只作用于本插件页面
     // ------------------------------------------------------------------
-    function Field(props) {
-      var label = props.label
-      var hint = props.hint
-      var value = props.value
-      var onChange = props.onChange
-      var onCommit = props.onCommit
-      var type = props.type || 'text'
-      var disabled = !!props.disabled
-
-      var control
-      if (type === 'bool') {
-        control = React.createElement('input', {
-          className: 'dshdl-check',
-          type: 'checkbox',
-          checked: !!value,
-          disabled: disabled,
-          onChange: function (e) { onChange(e.target.checked) }
-        })
-      } else if (type === 'select') {
-        control = React.createElement('select', {
-          className: 'dshdl-select',
-          value: value,
-          disabled: disabled,
-          onChange: function (e) { onChange(e.target.value); if (onCommit) onCommit(e.target.value) }
-        }, (props.options || []).map(function (option) {
-          return React.createElement('option', { key: option.value, value: option.value }, option.label)
-        }))
-      } else if (type === 'textarea') {
-        control = React.createElement('textarea', {
-          className: 'dshdl-area',
-          value: value,
-          disabled: disabled,
-          spellCheck: false,
-          onChange: function (e) { onChange(e.target.value) },
-          onBlur: function () { if (onCommit) onCommit(value) }
-        })
-      } else {
-        control = React.createElement('input', {
-          className: 'dshdl-input',
-          type: type === 'number' ? 'number' : 'text',
-          value: value,
-          disabled: disabled,
-          spellCheck: false,
-          onChange: function (e) { onChange(e.target.value) },
-          onBlur: function () { if (onCommit) onCommit(value) },
-          onKeyDown: function (e) { if (e.key === 'Enter' && onCommit) onCommit(value) }
+    function useLocaleSelection(ctxRef) {
+      var mode = React.useState(function () { return readStore(LS_LANG, 'auto') })
+      var choice = mode[0]
+      var setChoice = mode[1]
+      // DSH 的语言快照变化时重渲染（auto 模式据此跟随系统）
+      var revision = React.useSyncExternalStore(
+        function (listener) {
+          var service = localeService(ctxRef.current)
+          try { return service.subscribe(listener) } catch (e) { return function () {} }
+        },
+        function () {
+          var service = localeService(ctxRef.current)
+          try { return service.getSnapshot().revision } catch (e) { return 0 }
         })
+      var active = 'en'
+      var service = localeService(ctxRef.current)
+      try {
+        var snap = service.getLocale()
+        active = snap && snap.active ? String(snap.active) : 'en'
+      } catch (e) { active = 'en' }
+
+      var resolved = choice === 'auto' ? (/^zh/i.test(active) ? 'zh' : 'en') : choice
+      var dict = resolved === 'zh' ? LOCALE_ZH : LOCALE_EN
+      var t = React.useCallback(function (key, arg) {
+        var text = dict[key]
+        if (text === undefined) text = LOCALE_EN[key]
+        if (text === undefined) text = key
+        return arg === undefined ? text : String(text).replace('%s', String(arg))
+      }, [resolved, revision])
+
+      function pick(next) {
+        setChoice(next)
+        writeStore(LS_LANG, next)
+      }
+
+      return { t: t, choice: choice, pick: pick, resolved: resolved }
+    }
+
+    function LocaleSwitch(props) {
+      var t = props.t
+      function item(value, label) {
+        return h('button', {
+          key: value,
+          type: 'button',
+          className: props.choice === value ? 'on' : '',
+          onClick: function () { props.pick(value) }
+        }, label)
+      }
+      return h('div', { className: 'dshdl-seg', title: props.title || '' },
+        item('auto', t('langAuto')),
+        item('zh', t('langZh')),
+        item('en', t('langEn')))
+    }
+
+    // ------------------------------------------------------------------
+    // 状态轮询
+    // ------------------------------------------------------------------
+    function useStatus(pollMs) {
+      var tuple = React.useState(null)
+      var status = tuple[0]
+      var setStatus = tuple[1]
+      var errTuple = React.useState(null)
+      var error = errTuple[0]
+      var setError = errTuple[1]
+      var alive = React.useRef(true)
+
+      var reload = React.useCallback(function () {
+        return apiFetch('status')
+          .then(function (payload) { if (alive.current) { setStatus(payload); setError(null) } return payload })
+          .catch(function (e) { if (alive.current) setError(String((e && e.message) || e)) })
+      }, [])
+
+      React.useEffect(function () {
+        alive.current = true
+        reload()
+        if (!pollMs) return function () { alive.current = false }
+        var timer = setInterval(function () { if (!document.hidden) reload() }, pollMs)
+        return function () { alive.current = false; clearInterval(timer) }
+      }, [reload, pollMs])
+
+      return { status: status, error: error, reload: reload }
+    }
+
+    function useTraffic(pollMs) {
+      var tuple = React.useState(null)
+      var traffic = tuple[0]
+      var setTraffic = tuple[1]
+      var alive = React.useRef(true)
+      React.useEffect(function () {
+        alive.current = true
+        function tick() {
+          apiFetch('traffic')
+            .then(function (payload) { if (alive.current) setTraffic(payload) })
+            .catch(function () { if (alive.current) setTraffic(null) })
+        }
+        tick()
+        var timer = setInterval(function () { if (!document.hidden) tick() }, pollMs)
+        return function () { alive.current = false; clearInterval(timer) }
+      }, [pollMs])
+      return traffic
+    }
+
+    // ------------------------------------------------------------------
+    // 节点配置卡片（对齐 FlClash 的「配置」页）
+    // ------------------------------------------------------------------
+    function ProfileTile(props) {
+      var profile = props.profile
+      var t = props.t
+      var openState = React.useState(false)
+      var open = openState[0]
+      var setOpen = openState[1]
+
+      var info = profile.subscriptionInfo || null
+      var used = null
+      var total = null
+      if (info) {
+        var upSum = Number(info.upload)
+        var downSum = Number(info.download)
+        var totalSum = Number(info.total)
+        if (isFinite(upSum) || isFinite(downSum)) used = (isFinite(upSum) ? upSum : 0) + (isFinite(downSum) ? downSum : 0)
+        if (isFinite(totalSum) && totalSum > 0) total = totalSum
+      }
+      var percent = null
+      if (used !== null && total !== null) {
+        percent = Math.max(0, Math.min(100, Math.round((used / total) * 100)))
+      }
+
+      function act(name) {
+        setOpen(false)
+        props.onAction(name, profile)
+      }
+
+      return h('div', {
+        className: cls('dshdl-tile', profile.current ? 'on' : ''),
+        onClick: function () { if (!open) act('select') },
+        title: profile.label
+      },
+        h('button', {
+          className: 'dshdl-more',
+          type: 'button',
+          'aria-label': 'menu',
+          onClick: function (e) { e.stopPropagation(); setOpen(!open) }
+        }, '⋯'),
+        h('div', { className: 'dshdl-tileName' }, profile.label),
+        percent === null
+          ? h('div', { className: 'dshdl-bar' }, h('span', { style: { width: profile.current ? '100%' : '0%' } }))
+          : h('div', { className: 'dshdl-bar' }, h('span', { style: { width: percent + '%' } })),
+        h('div', { className: 'dshdl-tileMeta' },
+          percent === null
+            ? (profile.source === 'file' ? t('fileSource') : (profile.autoUpdate ? t('autoUpdateOn', profile.autoUpdateHours || 24) : t('upstream')))
+            : (formatBytes(used) + ' / ' + formatBytes(total))),
+        h('div', { className: 'dshdl-tileFoot' },
+          h('span', null, profile.current ? t('current') : (profile.source === 'file' ? t('fileSource') : '')),
+          h('span', null, profile.lastUpdateAt ? (t('updatedAt') + ' ' + formatTime(profile.lastUpdateAt)) : t('never'))),
+        open ? h('div', { className: 'dshdl-menu', onClick: function (e) { e.stopPropagation() } },
+          h('button', { type: 'button', onClick: function () { act('select') } }, t('use')),
+          profile.source === 'url' ? h('button', { type: 'button', onClick: function () { act('update') } }, t('update')) : null,
+          h('button', { type: 'button', onClick: function () { act('auto') } }, t('autoUpdate')),
+          h('button', { className: 'danger', type: 'button', onClick: function () { act('remove') } }, t('remove'))
+        ) : null)
+    }
+
+    // ------------------------------------------------------------------
+    // 节点卡片（对齐 FlClash 的「代理」页）
+    // ------------------------------------------------------------------
+    function NodeTile(props) {
+      var node = props.node
+      var t = props.t
+      var delay = node.delay
+      var latClass = 'dshdl-lat'
+      var latText = t('untested')
+      if (delay !== null && delay !== undefined) {
+        latClass = delay > 0 ? 'dshdl-lat ok' : 'dshdl-lat bad'
+        latText = delay > 0 ? t('ms', delay) : t('timeout')
       }
-      return React.createElement('div', { className: 'dshdl-row' },
-        React.createElement('span', { className: 'dshdl-label' }, label),
-        control,
-        hint ? React.createElement('span', { className: 'dshdl-hint' }, hint) : null)
+      return h('div', {
+        className: cls('dshdl-tile', props.active ? 'on' : '', delay === 0 ? 'dead' : ''),
+        onClick: props.onClick,
+        title: (node.server || node.name) + (node.needsNative ? ' · ' + t('needsNative') : '')
+      },
+        h('div', { className: 'dshdl-tileName' }, node.name),
+        h('div', { className: 'dshdl-tileMeta' }, node.type),
+        h('div', { className: 'dshdl-tileFoot' }, h('span', { className: latClass }, latText)))
+    }
+
+    function AutoTile(props) {
+      return h('div', {
+        className: cls('dshdl-tile', props.active ? 'on' : ''),
+        onClick: props.onClick
+      },
+        h('div', { className: 'dshdl-tileName' }, props.t('nodeAuto')),
+        h('div', { className: 'dshdl-tileMeta' }, props.t('upstream')),
+        h('div', { className: 'dshdl-tileFoot' }, h('span', { className: 'dshdl-lat' }, props.current || '')))
     }
 
-    function DownloaderSection(props) {
+    // ------------------------------------------------------------------
+    // 主页面：两个入口共用
+    // ------------------------------------------------------------------
+    function DownloaderPage(props) {
+      var ctxRef = props.ctxRef
+      var variant = props.variant || 'panel'
+      var compact = variant === 'settings'
       var scope = props.scope
-      var t = props.t || function (key) { return key }
 
-      // scope.subscribe / getSnapshot 是类原型方法：必须包一层闭包保住 this。
+      var locale = useLocaleSelection(ctxRef)
+      var t = locale.t
+
+      var state = useStatus(compact ? 6000 : 5000)
+      var status = state.status
+      var error = state.error
+      var reload = state.reload
+      var traffic = useTraffic(2000)
+
+      var advancedState = React.useState(function () { return readStore(LS_ADVANCED, '0') === '1' })
+      var advanced = advancedState[0]
+      var setAdvanced = advancedState[1]
+
+      var nodesState = React.useState([])
+      var nodes = nodesState[0]
+      var setNodes = nodesState[1]
+      var groupsState = React.useState([])
+      var groups = groupsState[0]
+      var setGroups = groupsState[1]
+      var guardState = React.useState(null)
+      var guard = guardState[0]
+      var setGuard = guardState[1]
+
+      var busyState = React.useState(null)
+      var busy = busyState[0]
+      var setBusy = busyState[1]
+      var actionErrorState = React.useState(null)
+      var actionError = actionErrorState[0]
+      var setActionError = actionErrorState[1]
+      var noticeState = React.useState(null)
+      var notice = noticeState[0]
+      var setNotice = noticeState[1]
+
+      // 配置表单
       var snap = scope
         ? React.useSyncExternalStore(
             function (listener) { return scope.subscribe(listener) },
@@ -359,445 +873,590 @@ window.__ModuleLoader__.load({
         : { status: 'unavailable', value: undefined }
 
       var stored = Object.assign({}, DEFAULTS, (snap && snap.value) || {})
-      var [draft, setDraft] = React.useState({})
-      var [status, setStatus] = React.useState(null)
-      var [nodes, setNodes] = React.useState([])
-      var [groups, setGroups] = React.useState([])
-      var [guard, setGuard] = React.useState(null)
-      var [importUrl, setImportUrl] = React.useState('')
-      var [importLabel, setImportLabel] = React.useState('')
-      var [busy, setBusy] = React.useState(null)
-      var [error, setError] = React.useState(null)
-
+      var draftState = React.useState({})
+      var draft = draftState[0]
+      var setDraft = draftState[1]
       var value = Object.assign({}, stored, draft)
+      var persistable = !!scope
 
-      function set(field, next) {
+      function setField(field, next) {
         setDraft(function (prev) { var copy = Object.assign({}, prev); copy[field] = next; return copy })
-      }
-
-      function commit(field, next) {
         if (!scope) return
-        setDraft(function (prev) { var copy = Object.assign({}, prev); delete copy[field]; return copy })
         try {
           var promise = scope.set(field, next)
           if (promise && typeof promise.catch === 'function') {
-            promise.catch(function (e) { setError(String((e && e.message) || e)) })
+            promise.catch(function (e) {
+              setActionError(String((e && e.message) || e))
+              setDraft(function (prev) { var copy = Object.assign({}, prev); delete copy[field]; return copy })
+            })
           }
-        } catch (e) {
-          setError(String((e && e.message) || e))
-        }
+        } catch (e) { setActionError(String((e && e.message) || e)) }
       }
 
-      function commitBool(field, next) {
-        set(field, next)
-        commit(field, next)
+      var loadProxies = React.useCallback(function () {
+        return apiFetch('proxies').then(function (payload) {
+          setNodes(Array.isArray(payload.nodes) ? payload.nodes : [])
+          setGroups(Array.isArray(payload.groups) ? payload.groups : [])
+          return payload
+        }).catch(function (e) { setActionError(String((e && e.message) || e)) })
+      }, [])
+
+      var loadGuard = React.useCallback(function () {
+        return apiFetch('guard').then(function (payload) { setGuard(payload) })
+          .catch(function () { setGuard(null) })
+      }, [])
+
+      React.useEffect(function () { loadProxies() }, [loadProxies])
+      React.useEffect(function () { loadGuard() }, [loadGuard])
+
+      function run(key, fn) {
+        if (busy) return
+        setBusy(key)
+        setActionError(null)
+        setNotice(null)
+        Promise.resolve()
+          .then(fn)
+          .then(function (result) {
+            setBusy(null)
+            return reload().then(function () { return loadProxies() }).then(function () {
+              if (result && result.hint) setNotice(result.hint)
+            })
+          })
+          .catch(function (e) {
+            setBusy(null)
+            setActionError(String((e && e.message) || e))
+          })
+      }
+
+      function refreshAll() {
+        run('refresh', function () { return apiFetch('status?refresh=1') })
       }
 
-      function commitNumber(field, raw) {
-        var parsed = Number(raw)
-        if (!isFinite(parsed)) { commit(field, stored[field]); return }
-        commit(field, parsed)
+      function restartCore() {
+        run('restart', function () { return apiFetch('restart', {}) })
       }
 
-      var api = React.useCallback(function (path, body) {
-        return fetch(API_BASE + path, {
-          method: body === undefined ? 'GET' : 'POST',
-          headers: body === undefined ? undefined : { 'content-type': 'application/json' },
-          body: body === undefined ? undefined : JSON.stringify(body)
-        }).then(function (response) {
-          return response.text().then(function (text) {
-            var payload = text.length > 0 ? JSON.parse(text) : {}
-            if (!response.ok) throw new Error(payload.error || ('HTTP ' + response.status))
-            return payload
+      function updateSubscription() {
+        run('update', function () { return apiFetch('update-subscription', {}) })
+      }
+
+      function testAll() {
+        run('test', function () {
+          return apiFetch('delay-all', {}).then(function (result) {
+            var map = {}
+            var results = (result && result.results) || {}
+            Object.keys(results).forEach(function (key) { map[key] = results[key] })
+            setNodes(function (prev) {
+              return prev.map(function (node) {
+                if (map[node.name] === undefined) return node
+                var delay = map[node.name]
+                return Object.assign({}, node, { delay: delay, alive: delay !== null && delay > 0 })
+              })
+            })
+            return null
           })
         })
-      }, [])
+      }
 
-      var loadStatus = React.useCallback(function (refresh) {
-        return api('status' + (refresh ? '?refresh=1' : ''))
-          .then(function (payload) { setStatus(payload); setError(null) })
-          .catch(function (e) { setError(String((e && e.message) || e)) })
-      }, [api])
+      function selectNode(name) {
+        run('select:' + name, function () { return apiFetch('select', { name: name }) })
+      }
 
-      var loadNodes = React.useCallback(function () {
-        return api('proxies')
-          .then(function (payload) { setNodes(payload.nodes || []); setGroups(payload.groups || []) })
-          .catch(function () { /* status carries the error */ })
-      }, [api])
+      function testNode(name) {
+        run('delay:' + name, function () {
+          return apiFetch('delay', { name: name }).then(function (result) {
+            setNodes(function (prev) {
+              return prev.map(function (node) {
+                if (node.name !== name) return node
+                return Object.assign({}, node, { delay: result.delay, alive: result.delay > 0 })
+              })
+            })
+            return null
+          })
+        })
+      }
 
-      var loadGuard = React.useCallback(function () {
-        return api('guard')
-          .then(function (payload) { setGuard(payload) })
-          .catch(function () { /* non-fatal */ })
-      }, [api])
+      function profileAction(name, profile) {
+        if (name === 'select') return selectProfile(profile.id)
+        if (name === 'update') return run('p-update', function () { return apiFetch('profile-update', { id: profile.id }) })
+        if (name === 'remove') return run('p-remove', function () { return apiFetch('profile-remove', { id: profile.id }) })
+        if (name === 'auto') {
+          return run('p-auto', function () {
+            return apiFetch('profile-auto', { id: profile.id, enabled: !profile.autoUpdate, hours: profile.autoUpdateHours || 24 })
+          })
+        }
+        return null
+      }
 
-      React.useEffect(function () {
-        ensureCss()
-        loadStatus(false)
-        loadNodes()
-        loadGuard()
-        var statusTimer = setInterval(function () { loadStatus(false); loadGuard() }, 5000)
-        var nodeTimer = setInterval(function () { loadNodes() }, 15000)
-        return function () { clearInterval(statusTimer); clearInterval(nodeTimer) }
-      }, [loadStatus, loadNodes, loadGuard])
-
-      function run(label, task) {
-        setBusy(label)
-        setError(null)
-        Promise.resolve()
-          .then(task)
-          .catch(function (e) { setError(String((e && e.message) || e)) })
-          .then(function () { setBusy(null) })
+      function selectProfile(id) {
+        return run('p-select', function () { return apiFetch('profile-select', { id: id }) })
+      }
+
+      function addProfileFromUrl() {
+        var urlState = importUrlState[0]
+        var url = urlState
+        if (!url.trim()) return
+        run('p-add', function () {
+          return apiFetch('profile-add-url', { value: url.trim(), label: importLabelState[0].trim() || undefined }).then(function (result) {
+            setImportUrl('')
+            setImportLabel('')
+            setShowImport(false)
+            return result
+          })
+        })
       }
 
-      var stateBadgeClass = 'dshdl-badge'
-      if (status) {
-        if (status.state === 'running') stateBadgeClass += ' dshdl-ok'
-        else if (status.state === 'failed') stateBadgeClass += ' dshdl-err'
-        else stateBadgeClass += ' dshdl-warn'
+      function addProfileFromFile(file) {
+        if (!file) return
+        var reader = new FileReader()
+        reader.onload = function () {
+          var content = String(reader.result || '')
+          run('p-add-file', function () { return apiFetch('profile-add-file', { content: content, name: file.name }) })
+        }
+        reader.readAsText(file)
       }
 
-      var profileList = status && Array.isArray(status.profiles) ? status.profiles : []
-
-      var upstreamRows = [
-        React.createElement(Field, { key: 'proxyUrl', label: 'proxyUrl', value: value.proxyUrl, type: 'text',
-          hint: '显式上游，支持 http:// 与 socks5://。填了就不再用订阅。',
-          onChange: function (v) { set('proxyUrl', v) }, onCommit: function (v) { commit('proxyUrl', v) } }),
-        React.createElement(Field, { key: 'subscriptionUrl', label: 'subscriptionUrl', value: value.subscriptionUrl, type: 'text',
-          hint: 'Clash 订阅地址。自包含内核从这里取节点，不需要本机装 Clash。',
-          onChange: function (v) { set('subscriptionUrl', v) }, onCommit: function (v) { commit('subscriptionUrl', v) } }),
-        React.createElement(Field, { key: 'fetchProxyUrl', label: 'fetchProxyUrl', value: value.fetchProxyUrl, type: 'text',
-          hint: '仅用于抓订阅本身（订阅被墙时填），必须是 http(s):// 代理。',
-          onChange: function (v) { set('fetchProxyUrl', v) }, onCommit: function (v) { commit('fetchProxyUrl', v) } }),
-        React.createElement(Field, { key: 'groupType', label: 'groupType', value: value.groupType, type: 'select',
-          options: [
-            { value: 'url-test', label: 'url-test（自动最快）' },
-            { value: 'select', label: 'select（手动）' },
-            { value: 'fallback', label: 'fallback（失败切换）' }
-          ],
-          onChange: function (v) { set('groupType', v) }, onCommit: function (v) { commit('groupType', v) } }),
-        React.createElement(Field, { key: 'preferredNode', label: 'preferredNode', value: value.preferredNode, type: 'text',
-          hint: '按名字固定一个节点，优先级最高。',
-          onChange: function (v) { set('preferredNode', v) }, onCommit: function (v) { commit('preferredNode', v) } }),
-        React.createElement(Field, { key: 'autoUpdateHours', label: 'autoUpdateHours', value: value.autoUpdateHours, type: 'number',
-          hint: '订阅自动更新间隔（小时，0 关闭）。',
-          onChange: function (v) { set('autoUpdateHours', v) }, onCommit: function (v) { commitNumber('autoUpdateHours', v) } }),
-        React.createElement(Field, { key: 'latencyTestUrl', label: 'latencyTestUrl', value: value.latencyTestUrl, type: 'text',
-          onChange: function (v) { set('latencyTestUrl', v) }, onCommit: function (v) { commit('latencyTestUrl', v) } }),
-        React.createElement(Field, { key: 'latencyTimeoutMs', label: 'latencyTimeoutMs', value: value.latencyTimeoutMs, type: 'number',
-          onChange: function (v) { set('latencyTimeoutMs', v) }, onCommit: function (v) { commitNumber('latencyTimeoutMs', v) } })
-      ]
-
-      var rulesRows = [
-        React.createElement(Field, { key: 'protectAiPlatforms', label: 'protectAiPlatforms', value: value.protectAiPlatforms, type: 'bool',
-          hint: '国内 AI 平台域名（DeepSeek / 智谱 / Kimi / 通义 / 豆包 / 文心 / 混元 / 星火 / MiniMax …）强制直连，优先级高于一切规则，连"全部走代理"模式也不例外。',
-          onChange: function (v) { commitBool('protectAiPlatforms', v) } }),
-        React.createElement(Field, { key: 'domesticDirect', label: 'domesticDirect', value: value.domesticDirect, type: 'bool',
-          hint: '开：境内直连、境外走代理。关：所有下载都走代理（AI 平台仍直连）。',
-          onChange: function (v) { commitBool('domesticDirect', v) } }),
-        React.createElement(Field, { key: 'extraDirectDomains', label: 'extraDirectDomains', value: arrayToLines(value.extraDirectDomains), type: 'textarea',
-          hint: '每行一个域名或完整 URL，加进强制直连名单。',
-          onChange: function (v) { set('extraDirectDomains', v) }, onCommit: function (v) { commit('extraDirectDomains', linesToArray(v)) } }),
-        React.createElement(Field, { key: 'guardShellDownloads', label: 'guardShellDownloads', value: value.guardShellDownloads, type: 'bool',
-          hint: '检测到 git / curl 等命令要从境外下载、又没带代理时拦下来，提示改用 dsh_run_proxied（命令里已带代理、或内核无可用出口时不拦）。',
-          onChange: function (v) { commitBool('guardShellDownloads', v) } }),
-        React.createElement(Field, { key: 'extraRules', label: 'extraRules', value: arrayToLines(value.extraRules), type: 'textarea',
-          hint: '每行一条，如 DOMAIN-SUFFIX,example.com,DIRECT。',
-          onChange: function (v) { set('extraRules', v) }, onCommit: function (v) { commit('extraRules', linesToArray(v)) } }),
-        React.createElement(Field, { key: 'excludeRules', label: 'excludeRules', value: arrayToLines(value.excludeRules), type: 'textarea',
-          hint: '每行一条，从订阅规则里剔除（子串匹配）。',
-          onChange: function (v) { set('excludeRules', v) }, onCommit: function (v) { commit('excludeRules', linesToArray(v)) } })
-      ]
-
-      var downloadRows = [
-        React.createElement(Field, { key: 'downloadDir', label: 'downloadDir', value: value.downloadDir, type: 'text',
-          hint: '空 = $DSH_HOME/downloads。',
-          onChange: function (v) { set('downloadDir', v) }, onCommit: function (v) { commit('downloadDir', v) } }),
-        React.createElement(Field, { key: 'maxDownloadMb', label: 'maxDownloadMb', value: value.maxDownloadMb, type: 'number',
-          onChange: function (v) { set('maxDownloadMb', v) }, onCommit: function (v) { commitNumber('maxDownloadMb', v) } }),
-        React.createElement(Field, { key: 'downloadTimeoutS', label: 'downloadTimeoutS', value: value.downloadTimeoutS, type: 'number',
-          onChange: function (v) { set('downloadTimeoutS', v) }, onCommit: function (v) { commitNumber('downloadTimeoutS', v) } }),
-        React.createElement(Field, { key: 'stallTimeoutS', label: 'stallTimeoutS', value: value.stallTimeoutS, type: 'number',
-          onChange: function (v) { set('stallTimeoutS', v) }, onCommit: function (v) { commitNumber('stallTimeoutS', v) } }),
-        React.createElement(Field, { key: 'threads', label: 'threads', value: value.threads, type: 'number',
-          hint: '多线程下载的分片连接数，1 = 单连接。服务端不支持 Range（或返回的 Range 不可信）时自动回退单连接；文件小于 1 MiB 也用单连接。',
-          onChange: function (v) { set('threads', v) }, onCommit: function (v) { commitNumber('threads', v) } }),
-        React.createElement(Field, { key: 'maxRedirects', label: 'maxRedirects', value: value.maxRedirects, type: 'number',
-          onChange: function (v) { set('maxRedirects', v) }, onCommit: function (v) { commitNumber('maxRedirects', v) } }),
-        React.createElement(Field, { key: 'insecureTls', label: 'insecureTls', value: value.insecureTls, type: 'bool',
-          hint: '跳过 TLS 校验，仅用于企业 TLS 解密环境。',
-          onChange: function (v) { commitBool('insecureTls', v) } }),
-        React.createElement(Field, { key: 'allowOutsideWorkspace', label: 'allowOutsideWorkspace', value: value.allowOutsideWorkspace, type: 'bool',
-          hint: '允许 save_path 写到工作区与下载目录之外。',
-          onChange: function (v) { commitBool('allowOutsideWorkspace', v) } })
-      ]
-
-      var nodeRows = nodes.length === 0
-        ? React.createElement('div', { className: 'dshdl-empty' }, '暂无节点。填好 subscriptionUrl 后点「更新订阅」。')
-        : nodes.map(function (node) {
-            var active = status && status.selected === node.name
-            return React.createElement('div', { key: node.name, className: 'dshdl-node' + (active ? ' dshdl-active' : '') },
-              React.createElement('span', { className: 'dshdl-nodeName', title: node.name }, node.name),
-              React.createElement('span', { className: 'dshdl-nodeMeta' },
-                (node.type || '?') + (node.needsNative ? ' · 需原生连接器' : '') + (node.delay === null ? '' : ' · ' + node.delay + 'ms')),
-              React.createElement('button', {
-                type: 'button', className: 'dshdl-btn dshdl-small', disabled: !!busy,
-                onClick: function () {
-                  run('delay:' + node.name, function () { return api('delay', { name: node.name }).then(loadNodes) })
-                }
-              }, t('test')),
-              React.createElement('button', {
-                type: 'button', className: 'dshdl-btn dshdl-small', disabled: !!busy || active,
-                onClick: function () {
-                  run('select:' + node.name, function () { return api('select', { name: node.name }).then(loadStatus).then(loadNodes) })
-                }
-              }, t('select')))
+      function applyGuard() {
+        run('guard', function () {
+          return apiFetch('guard-apply', {}).then(function (result) {
+            loadGuard()
+            return { hint: t('guardRestart') }
           })
+        })
+      }
 
-      return React.createElement('section', { className: 'dshdl' },
-        React.createElement('h2', { className: 'dshdl-title' }, t('title')),
-        React.createElement('p', { className: 'dshdl-desc' }, t('intro')),
-
-        React.createElement('div', { className: 'dshdl-card' },
-          React.createElement('div', { className: 'dshdl-cardHead' },
-            React.createElement('span', { className: 'dshdl-cardTitle' }, t('upstream')),
-            React.createElement('div', { className: 'dshdl-badges' },
-              React.createElement('span', { className: stateBadgeClass }, status ? labelOf(STATE_KEYS, status.state, t) : '…'),
-              React.createElement('span', { className: 'dshdl-badge' }, status ? labelOf(MODE_KEYS, status.mode, t) : t('mdNone')),
-              React.createElement('span', { className: 'dshdl-badge' }, status && status.port > 0 ? ('127.0.0.1:' + status.port) : t('notRunning')),
-              React.createElement('span', { className: 'dshdl-badge' }, (t('nodesBadge') || '节点') + ' ' + (status ? status.nodeCount : 0)))),
-          status ? React.createElement('p', { className: 'dshdl-desc' }, status.reason) : null,
-          status && status.scope ? React.createElement('p', { className: 'dshdl-desc' }, t('scopeIntro')) : null,
-          React.createElement('div', { className: 'dshdl-actions' },
-            React.createElement('button', { type: 'button', className: 'dshdl-btn', disabled: !!busy,
-              onClick: function () { run('refresh', function () { return loadStatus(true).then(loadNodes) }) } }, t('refresh')),
-            React.createElement('button', { type: 'button', className: 'dshdl-btn', disabled: !!busy,
-              onClick: function () { run('restart', function () { return api('restart', {}).then(loadStatus).then(loadNodes) }) } }, t('restart')),
-            React.createElement('button', { type: 'button', className: 'dshdl-btn', disabled: !!busy,
-              onClick: function () { run('update-subscription', function () { return api('update-subscription', {}).then(loadStatus).then(loadNodes) }) } }, t('updateSubscription'))),
-          React.createElement(Field, { key: 'enabled', label: 'enabled', value: value.enabled, type: 'bool',
-            hint: '关闭后下载工具直接失败，不再解析上游。',
-            onChange: function (v) { commitBool('enabled', v) } }),
-          upstreamRows,
-          status && status.lastSubscriptionUpdate
-            ? React.createElement('p', { className: 'dshdl-desc' }, '订阅更新时间：' + formatTime(status.lastSubscriptionUpdate))
-            : null,
-          status && status.nativeNodes > 0 && !status.nativeConnector
-            ? React.createElement('p', { className: 'dshdl-warn' }, '有 ' + status.nativeNodes + ' 个节点需要可选的 Go 原生连接器（hysteria2 / reality），当前构建未打包，这些节点会被跳过。')
-            : null),
-
-        React.createElement('div', { className: 'dshdl-card' },
-          React.createElement('div', { className: 'dshdl-cardHead' },
-            React.createElement('span', { className: 'dshdl-cardTitle' }, t('profiles') + ' (' + profileList.length + ')')),
-          React.createElement('p', { className: 'dshdl-desc' }, t('profilesIntro')),
-          profileList.length === 0
-            ? React.createElement('div', { className: 'dshdl-empty' }, t('noProfiles'))
-            : React.createElement('div', { className: 'dshdl-nodes' }, profileList.map(function (profile) {
-              var info = profile.subscriptionInfo || null
-              var traffic = ''
-              if (info && (info.total || info.expire)) {
-                var bits = []
-                if (info.total) bits.push('已用 ' + formatBytes((info.upload || 0) + (info.download || 0)) + ' / ' + formatBytes(info.total))
-                if (info.expire) bits.push('到期 ' + new Date(info.expire * 1000).toLocaleDateString())
-                traffic = ' · ' + bits.join(' · ')
-              }
-              var meta = profile.source === 'file'
-                ? t('profileFile')
-                : (profile.autoUpdate === true ? t('profileAuto') + ' ' + profile.autoUpdateHours + 'h' : '自动更新关闭')
-              return React.createElement('div', { key: profile.id, className: 'dshdl-node' + (profile.current ? ' dshdl-active' : '') },
-                React.createElement('span', { className: 'dshdl-nodeName', title: profile.label }, profile.label),
-                React.createElement('span', { className: 'dshdl-nodeMeta' }, meta + traffic),
-                React.createElement('button', {
-                  type: 'button', className: 'dshdl-btn dshdl-small', disabled: !!busy || profile.current === true,
-                  onClick: function () {
-                    run('profile-select', function () { return api('profile-select', { id: profile.id }).then(function () { return loadStatus(false) }).then(loadNodes) })
-                  }
-                }, t('profileSelect')),
-                profile.source === 'url'
-                  ? React.createElement('button', {
-                    type: 'button', className: 'dshdl-btn dshdl-small', disabled: !!busy,
-                    onClick: function () {
-                      run('profile-update', function () { return api('profile-update', { id: profile.id }).then(function () { return loadStatus(false) }).then(loadNodes) })
-                    }
-                  }, t('profileUpdate'))
-                  : null,
-                React.createElement('button', {
-                  type: 'button', className: 'dshdl-btn dshdl-small', disabled: !!busy,
-                  onClick: function () {
-                    run('profile-remove', function () { return api('profile-remove', { id: profile.id }).then(function () { return loadStatus(false) }).then(loadNodes) })
-                  }
-                }, t('profileRemove')))
-            })),
-          React.createElement('div', { className: 'dshdl-row' },
-            React.createElement('span', { className: 'dshdl-label' }, t('importUrl')),
-            React.createElement('div', { className: 'dshdl-importRow' },
-              React.createElement('input', {
-                className: 'dshdl-input', type: 'text', value: importUrl, spellCheck: false,
+      function restoreGuard() {
+        run('guard-restore', function () {
+          return apiFetch('guard-restore', {}).then(function () { loadGuard(); return { hint: t('guardRestart') } })
+        })
+      }
+
+      // --- 派生状态 ---
+      var coreState = status ? status.state : 'idle'
+      var tone = 'idle'
+      var stateText = t('stIdle')
+      if (coreState === 'running') { tone = 'ok'; stateText = t('stRunning') }
+      else if (coreState === 'disabled') { tone = 'idle'; stateText = t('stDisabled') }
+      else if (coreState === 'failed') { tone = 'err'; stateText = t('stFailed') }
+      else if (coreState === 'no-subscription') { tone = 'warn'; stateText = t('stNoSubscription') }
+      else if (status && status.enabled === false) { tone = 'idle'; stateText = t('stDisabled') }
+
+      var mode = status ? status.mode : 'none'
+      var modeText = mode === 'subscription' ? t('modeSubscription')
+        : mode === 'explicit' ? t('modeExplicit')
+          : mode === 'environment' ? t('modeEnvironment')
+            : t('modeNone')
+
+      var profiles = (status && Array.isArray(status.profiles)) ? status.profiles : []
+      var selectedNode = (status && status.selected) || null
+      var currentNode = (status && status.currentNode) || null
+      var running = status && status.state === 'running'
+
+      // --- 导入表单状态 ---
+      var importUrlPair = React.useState('')
+      var importUrlState = importUrlPair
+      var setImportUrl = importUrlPair[1]
+      var importLabelPair = React.useState('')
+      var importLabelState = importLabelPair
+      var setImportLabel = importLabelPair[1]
+      var showImportPair = React.useState(false)
+      var showImport = showImportPair[0]
+      var setShowImport = showImportPair[1]
+
+      var header = h('header', { className: 'dshdl-head' },
+        h('div', { className: 'dshdl-headText' },
+          h('h2', { className: 'dshdl-h1' }, t('title')),
+          h('p', { className: 'dshdl-sub' }, t('subtitle'))),
+        h('div', { className: 'dshdl-actions' },
+          h(Pill, { tone: tone }, stateText),
+          h(LocaleSwitch, { t: t, choice: locale.choice, pick: locale.pick }),
+          h(Btn, { onClick: refreshAll, disabled: busy === 'refresh' }, busy === 'refresh' ? '…' : t('refresh')),
+          h(Btn, { onClick: restartCore, disabled: busy === 'restart' }, t('restartCore'))))
+
+      var errorNode = error ? h('div', { className: 'dshdl-err' }, error) : null
+      var actionErrorNode = actionError ? h('div', { className: 'dshdl-err' }, actionError) : null
+      var noticeNode = notice ? h('div', { className: 'dshdl-note' }, notice) : null
+
+      if (!persistable) {
+        errorNode = h('div', { className: 'dshdl-err' }, t('unavailable'))
+      }
+
+      // --- 状态卡 ---
+      var statusCard = h(Card, { title: t('upstream') },
+        h('dl', { className: 'dshdl-kv' },
+          h('dt', null, t('upstream')),
+          h('dd', null, modeText + (status && status.reason ? ' · ' + status.reason : '')),
+          h('dt', null, t('corePort')),
+          h('dd', null, status && status.port ? String(status.port) : t('coreNone')),
+          h('dt', null, t('nodesCount')),
+          h('dd', null, status ? String(status.nodeCount) + ' · ' + (status.unsupportedNodes ? String(status.unsupportedNodes) : '0') + ' ⚠' : '—'),
+          h('dt', null, t('currentNode')),
+          h('dd', null, currentNode || '—')),
+        !running && status ? h('div', { className: 'dshdl-note', style: { marginTop: '12px' } }, t('notRunningHint')) : null)
+
+      // --- 节点配置卡 ---
+      var profilesCard = h(Card, { title: t('profiles'), hint: t('profilesHint') },
+        profiles.length === 0
+          ? h('div', { className: 'dshdl-empty' }, t('emptyProfiles'))
+          : h('div', { className: 'dshdl-grid' }, profiles.map(function (profile) {
+            return h(ProfileTile, { key: profile.id, profile: profile, t: t, onAction: profileAction })
+          })),
+        showImport
+          ? h('div', { className: 'dshdl-inlineForm' },
+            h('div', { className: 'dshdl-inlineRow' },
+              h('input', {
+                className: 'dshdl-input',
                 placeholder: t('importUrlPlaceholder'),
+                value: importUrlState[0],
                 onChange: function (e) { setImportUrl(e.target.value) }
               }),
-              React.createElement('input', {
-                className: 'dshdl-input', type: 'text', value: importLabel, spellCheck: false,
-                placeholder: t('importLabelPlaceholder'),
+              h('input', {
+                className: 'dshdl-input',
+                placeholder: t('importLabel'),
+                value: importLabelState[0],
                 onChange: function (e) { setImportLabel(e.target.value) }
-              }),
-              React.createElement('div', { className: 'dshdl-actions' },
-                React.createElement('button', {
-                  type: 'button', className: 'dshdl-btn', disabled: !!busy || importUrl.trim().length === 0,
-                  onClick: function () {
-                    run('profile-add-url', function () {
-                      return api('profile-add-url', { value: importUrl, label: importLabel }).then(function () {
-                        setImportUrl('')
-                        setImportLabel('')
-                        return loadStatus(false)
-                      }).then(loadNodes)
-                    })
-                  }
-                }, t('importBtn')),
-                React.createElement('label', { className: 'dshdl-btn dshdl-fileBtn' }, t('importFile'),
-                  React.createElement('input', {
-                    type: 'file', accept: '.yaml,.yml,.txt,.conf', style: { display: 'none' },
-                    onChange: function (e) {
-                      var file = e.target.files && e.target.files[0]
-                      e.target.value = ''
-                      if (!file) return
-                      var reader = new FileReader()
-                      reader.onload = function () {
-                        run('profile-add-file', function () {
-                          return api('profile-add-file', { name: file.name, content: String(reader.result || '') }).then(function () {
-                            return loadStatus(false)
-                          }).then(loadNodes)
-                        })
-                      }
-                      reader.readAsText(file)
-                    }
-                  })))))),
-
-        React.createElement('div', { className: 'dshdl-card' },
-          React.createElement('div', { className: 'dshdl-cardHead' },
-            React.createElement('span', { className: 'dshdl-cardTitle' }, t('sessionGuard')),
-            React.createElement('div', { className: 'dshdl-badges' },
-              React.createElement('span', {
-                className: guard && guard.covered ? 'dshdl-badge dshdl-ok' : 'dshdl-badge dshdl-warn'
-              }, guard
-                ? (guard.covered ? t('guardCovered') : t('guardMissing') + ' ' + ((guard.missing && guard.missing.length) || 0))
-                : '…'))),
-          React.createElement('p', { className: 'dshdl-desc' }, t('guardIntro')),
-          guard ? React.createElement('p', { className: 'dshdl-desc' }, guard.env_path) : null,
-          guard && Array.isArray(guard.proxy_vars) && guard.proxy_vars.length === 0
-            ? React.createElement('p', { className: 'dshdl-warn' }, t('guardNoProxyVars'))
-            : null,
-          React.createElement('div', { className: 'dshdl-actions' },
-            React.createElement('button', {
-              type: 'button', className: 'dshdl-btn', disabled: !!busy || !!(guard && guard.covered),
-              onClick: function () {
-                run('guard-apply', function () {
-                  return api('guard-apply', {}).then(function (payload) { setGuard(payload.state); return loadStatus(false) })
+              })),
+            h('div', { className: 'dshdl-inlineRow' },
+              h(Btn, { variant: 'primary', onClick: addProfileFromUrl, disabled: busy === 'p-add' }, t('import')),
+              h('label', { className: 'dshdl-btn' }, t('importFile'),
+                h('input', {
+                  type: 'file',
+                  accept: '.yaml,.yml,.txt,.conf',
+                  style: { display: 'none' },
+                  onChange: function (e) { addProfileFromFile(e.target.files && e.target.files[0]) }
+                })),
+              h(Btn, { variant: 'ghost', onClick: function () { setShowImport(false) } }, t('cancel'))))
+          : h('div', { style: { display: 'flex', justifyContent: 'flex-end', marginTop: '14px' } },
+            h(Btn, { variant: 'primary', onClick: function () { setShowImport(true) } }, '+ ' + t('addProfile'))))
+
+      // --- 节点卡 ---
+      var nodesCard = h(Card, { title: t('nodes'), hint: t('nodesHint') },
+        h('div', { className: 'dshdl-grid' },
+          h(AutoTile, {
+            t: t,
+            active: selectedNode === null || selectedNode === undefined,
+            current: currentNode || '',
+            onClick: function () {
+              // 宿主可能是还没重启的旧版本，没有 select-auto 路由 —— 退回「选中 AUTO 组的当前节点」。
+              run('select-auto', function () {
+                return apiFetch('select-auto', {}).catch(function () {
+                  var auto = groups.filter(function (group) { return group.name === 'AUTO' })[0]
+                  var target = auto && auto.now ? auto.now : (nodes[0] && nodes[0].name)
+                  if (!target) return null
+                  return apiFetch('select', { name: target })
                 })
+              })
+            }
+          }),
+          nodes.map(function (node) {
+            return h(NodeTile, {
+              key: node.name,
+              node: node,
+              t: t,
+              active: selectedNode === node.name,
+              onClick: function () { selectNode(node.name) }
+            })
+          })),
+        h('div', { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end', marginTop: '14px' } },
+          h(Btn, { onClick: testAll, disabled: busy === 'test' }, busy === 'test' ? t('testing') : t('testAll')),
+          h(Btn, { onClick: updateSubscription, disabled: busy === 'update' }, t('update'))))
+
+      // --- 下载卡（基础） ---
+      var downloadCard = h(Card, { title: t('download') },
+        h(TextRow, {
+          label: t('downloadDir'),
+          hint: t('downloadDirHint'),
+          placeholder: t('dirPlaceholder'),
+          value: value.downloadDir,
+          onCommit: function (next) { setField('downloadDir', next) }
+        }),
+        h(Row, { label: t('threads'), hint: t('threadsHint') },
+          h('input', {
+            className: 'dshdl-input',
+            type: 'number',
+            min: 1,
+            max: 32,
+            value: value.threads,
+            style: { width: '90px', minWidth: '90px' },
+            onChange: function (e) {
+              var parsed = Number(e.target.value)
+              if (isFinite(parsed) && parsed >= 1) setField('threads', parsed)
+            }
+          })),
+        h(Row, { label: t('maxMb') },
+          h('input', {
+            className: 'dshdl-input',
+            type: 'number',
+            min: 1,
+            value: value.maxDownloadMb,
+            style: { width: '110px', minWidth: '110px' },
+            onChange: function (e) {
+              var parsed = Number(e.target.value)
+              if (isFinite(parsed) && parsed >= 1) setField('maxDownloadMb', parsed)
+            }
+          })))
+
+      // --- 高级开关 ---
+      var advancedToggle = h(Card, null,
+        h(Row, { label: t('advanced'), hint: t('advancedHint') },
+          h(Switch, {
+            value: advanced,
+            label: t('advanced'),
+            onChange: function (next) {
+              setAdvanced(next)
+              writeStore(LS_ADVANCED, next ? '1' : '0')
+            }
+          })))
+
+      var advancedCards = []
+      if (advanced) {
+        advancedCards.push(h(Card, { key: 'adv-upstream', title: t('advUpstream') },
+          h(TextRow, {
+            label: t('proxyUrl'),
+            hint: t('proxyUrlHint'),
+            value: value.proxyUrl,
+            placeholder: 'socks5://127.0.0.1:1080',
+            onCommit: function (next) { setField('proxyUrl', next) }
+          }),
+          h(TextRow, {
+            label: t('subscriptionUrl'),
+            hint: t('subscriptionUrlHint'),
+            value: value.subscriptionUrl,
+            placeholder: 'https://…',
+            onCommit: function (next) { setField('subscriptionUrl', next) }
+          }),
+          h(TextRow, {
+            label: t('fetchProxyUrl'),
+            hint: t('fetchProxyUrlHint'),
+            value: value.fetchProxyUrl,
+            placeholder: 'http://127.0.0.1:7890',
+            onCommit: function (next) { setField('fetchProxyUrl', next) }
+          }),
+          h(SelectRow, {
+            label: t('groupType'),
+            value: value.groupType,
+            options: [
+              { value: 'url-test', label: 'url-test' },
+              { value: 'select', label: 'select' },
+              { value: 'fallback', label: 'fallback' },
+              { value: 'load-balance', label: 'load-balance' }
+            ],
+            onCommit: function (next) { setField('groupType', next) }
+          }),
+          h(TextRow, {
+            label: t('preferredNode'),
+            hint: t('preferredNodeHint'),
+            value: value.preferredNode,
+            onCommit: function (next) { setField('preferredNode', next) }
+          }),
+          h(Row, { label: t('autoUpdateHours') },
+            h('input', {
+              className: 'dshdl-input',
+              type: 'number',
+              min: 0,
+              value: value.autoUpdateHours,
+              style: { width: '90px', minWidth: '90px' },
+              onChange: function (e) {
+                var parsed = Number(e.target.value)
+                if (isFinite(parsed) && parsed >= 0) setField('autoUpdateHours', parsed)
               }
-            }, t('guardApply')),
-            React.createElement('button', {
-              type: 'button', className: 'dshdl-btn', disabled: !!busy,
-              onClick: function () {
-                run('guard-restore', function () {
-                  return api('guard-restore', {}).then(function (payload) { setGuard(payload.state) })
-                })
+            })),
+          h(TextRow, { label: t('latencyTestUrl'), value: value.latencyTestUrl, onCommit: function (next) { setField('latencyTestUrl', next) } }),
+          h(Row, { label: t('latencyTimeoutMs') },
+            h('input', {
+              className: 'dshdl-input',
+              type: 'number',
+              min: 200,
+              value: value.latencyTimeoutMs,
+              style: { width: '100px', minWidth: '100px' },
+              onChange: function (e) {
+                var parsed = Number(e.target.value)
+                if (isFinite(parsed) && parsed >= 200) setField('latencyTimeoutMs', parsed)
+              }
+            }))))
+
+        advancedCards.push(h(Card, { key: 'adv-routing', title: t('advRouting') },
+          h(Row, { label: t('domesticDirect'), hint: t('domesticDirectHint') },
+            h(Switch, { value: value.domesticDirect !== false, label: t('domesticDirect'), onChange: function (next) { setField('domesticDirect', next) } })),
+          h(Row, { label: t('protectAiPlatforms'), hint: t('protectAiPlatformsHint') },
+            h(Switch, { value: value.protectAiPlatforms !== false, label: t('protectAiPlatforms'), onChange: function (next) { setField('protectAiPlatforms', next) } })),
+          h(ListRow, {
+            label: t('extraDirectDomains'),
+            hint: t('extraDirectDomainsHint'),
+            value: value.extraDirectDomains,
+            onCommit: function (next) { setField('extraDirectDomains', next) }
+          }),
+          h(ListRow, { label: t('extraRules'), hint: t('extraRulesHint'), value: value.extraRules, onCommit: function (next) { setField('extraRules', next) } }),
+          h(ListRow, { label: t('excludeRules'), hint: t('excludeRulesHint'), value: value.excludeRules, onCommit: function (next) { setField('excludeRules', next) } })))
+
+        advancedCards.push(h(Card, { key: 'adv-engine', title: t('advEngine') },
+          h(Row, { label: t('maxRedirects') },
+            h('input', {
+              className: 'dshdl-input',
+              type: 'number',
+              min: 0,
+              max: 30,
+              value: value.maxRedirects,
+              style: { width: '80px', minWidth: '80px' },
+              onChange: function (e) {
+                var parsed = Number(e.target.value)
+                if (isFinite(parsed) && parsed >= 0) setField('maxRedirects', parsed)
+              }
+            })),
+          h(Row, { label: t('stallTimeoutS') },
+            h('input', {
+              className: 'dshdl-input',
+              type: 'number',
+              min: 5,
+              value: value.stallTimeoutS,
+              style: { width: '80px', minWidth: '80px' },
+              onChange: function (e) {
+                var parsed = Number(e.target.value)
+                if (isFinite(parsed) && parsed >= 5) setField('stallTimeoutS', parsed)
               }
-            }, t('guardRestore'))),
-          React.createElement('p', { className: 'dshdl-desc' }, t('guardRestart'))),
-
-        React.createElement('div', { className: 'dshdl-card' },
-          React.createElement('div', { className: 'dshdl-cardHead' },
-            React.createElement('span', { className: 'dshdl-cardTitle' }, t('nodes') + ' (' + nodes.length + ')'),
-            React.createElement('div', { className: 'dshdl-actions' },
-              React.createElement('button', { type: 'button', className: 'dshdl-btn dshdl-small', disabled: !!busy,
-                onClick: function () { run('delay-all', function () { return api('delay-all', {}).then(loadNodes) }) } }, t('testAll')),
-              React.createElement('button', { type: 'button', className: 'dshdl-btn dshdl-small', disabled: !!busy,
-                onClick: function () { run('clear-latencies', function () { return api('clear-latencies', {}).then(loadNodes) }) } }, t('clearLatency')))),
-          React.createElement('div', { className: 'dshdl-nodes' }, nodeRows),
-          status && status.traffic
-            ? React.createElement('p', { className: 'dshdl-desc' },
-                '流量 ↑' + formatBytes(status.traffic.up) + ' ↓' + formatBytes(status.traffic.down))
-            : null),
-
-        React.createElement('div', { className: 'dshdl-card' },
-          React.createElement('span', { className: 'dshdl-cardTitle' }, t('rules')),
-          rulesRows),
-
-        React.createElement('div', { className: 'dshdl-card' },
-          React.createElement('span', { className: 'dshdl-cardTitle' }, t('download')),
-          downloadRows),
-
-        error ? React.createElement('p', { className: 'dshdl-error' }, error) : null,
-        snap && snap.status === 'unavailable' ? React.createElement('p', { className: 'dshdl-warn' }, t('unavailable')) : null,
-
-        React.createElement('p', { className: 'dshdl-desc' },
-          '注意：本插件只管它自己的下载。web_fetch 与 shell 里的 curl / git / npm 由 DSH 启动期的代理策略决定 —— 需要它们也走代理，请在 $DSH_HOME/.env 里设置 HTTP_PROXY / HTTPS_PROXY。'))
+            })),
+          h(Row, { label: t('downloadTimeoutS') },
+            h('input', {
+              className: 'dshdl-input',
+              type: 'number',
+              min: 1,
+              value: value.downloadTimeoutS,
+              style: { width: '90px', minWidth: '90px' },
+              onChange: function (e) {
+                var parsed = Number(e.target.value)
+                if (isFinite(parsed) && parsed >= 1) setField('downloadTimeoutS', parsed)
+              }
+            })),
+          h(Row, { label: t('insecureTls'), hint: t('insecureTlsHint') },
+            h(Switch, { value: value.insecureTls === true, label: t('insecureTls'), onChange: function (next) { setField('insecureTls', next) } })),
+          h(Row, { label: t('allowOutsideWorkspace'), hint: t('allowOutsideWorkspaceHint') },
+            h(Switch, { value: value.allowOutsideWorkspace === true, label: t('allowOutsideWorkspace'), onChange: function (next) { setField('allowOutsideWorkspace', next) } })),
+          h(Row, { label: t('guardShellDownloads'), hint: t('guardShellDownloadsHint') },
+            h(Switch, { value: value.guardShellDownloads !== false, label: t('guardShellDownloads'), onChange: function (next) { setField('guardShellDownloads', next) } }))))
+
+        advancedCards.push(h(Card, { key: 'adv-harness', title: t('advHarness') },
+          h(Row, { label: t('harnessProxy'), hint: t('harnessProxyHint') },
+            h(Switch, { value: value.harnessProxy === true, label: t('harnessProxy'), onChange: function (next) { setField('harnessProxy', next) } })),
+          h(Row, { label: t('harnessProxyPort'), hint: t('harnessProxyPortHint') },
+            h('input', {
+              className: 'dshdl-input',
+              type: 'number',
+              min: 1024,
+              max: 65535,
+              value: value.harnessProxyPort,
+              style: { width: '100px', minWidth: '100px' },
+              onChange: function (e) {
+                var parsed = Number(e.target.value)
+                if (isFinite(parsed) && parsed >= 1024 && parsed <= 65535) setField('harnessProxyPort', parsed)
+              }
+            }))))
+      }
+
+      // --- 会话保护 ---
+      var protectedTotal = (status && Array.isArray(status.protectedDomains)) ? status.protectedDomains.length : 0
+      var guardMissingCount = (guard && Array.isArray(guard.missing)) ? guard.missing.length : 0
+      var guardCard = h(Card, { title: t('guard'), hint: t('guardHint') },
+        guard
+          ? h(React.Fragment, null,
+            h(Row, {
+              label: t('guard'),
+              hint: guardMissingCount === 0
+                ? t('guardCovered', protectedTotal)
+                : t('guardMissing', guardMissingCount)
+            },
+              h('div', { style: { display: 'flex', gap: '8px' } },
+                h(Btn, { variant: 'primary', onClick: applyGuard, disabled: busy === 'guard' }, t('guardApply')),
+                h(Btn, { onClick: restoreGuard, disabled: busy === 'guard-restore' }, t('guardRestore')))),
+            (guard.proxy_vars && guard.proxy_vars.length === 0)
+              ? h('div', { className: 'dshdl-note' }, t('guardNoVars'))
+              : null)
+          : h('div', { className: 'dshdl-note' }, '—'))
+
+      // --- 流量 ---
+      var up = traffic ? Number(traffic.up) || 0 : 0
+      var down = traffic ? Number(traffic.down) || 0 : 0
+      var upRate = traffic ? Number(traffic.upRate) || 0 : 0
+      var downRate = traffic ? Number(traffic.downRate) || 0 : 0
+      var trafficCard = h(Card, { title: t('traffic') },
+        traffic && traffic.active !== false
+          ? h('div', { className: 'dshdl-traffic' },
+            h('div', { className: 'dshdl-tItem' },
+              h('div', { className: 'dshdl-tLabel' }, '↑ ' + t('trafficUp')),
+              h('div', { className: 'dshdl-tValue' }, formatRate(upRate)),
+              h('div', { className: 'dshdl-tSum' }, t('trafficTotal') + ' ' + formatBytes(up))),
+            h('div', { className: 'dshdl-tItem' },
+              h('div', { className: 'dshdl-tLabel' }, '↓ ' + t('trafficDown')),
+              h('div', { className: 'dshdl-tValue' }, formatRate(downRate)),
+              h('div', { className: 'dshdl-tSum' }, t('trafficTotal') + ' ' + formatBytes(down))))
+          : h('div', { className: 'dshdl-note' }, t('trafficIdle')))
+
+      var aboutCard = status
+        ? h(Card, { title: t('about') },
+          h('dl', { className: 'dshdl-kv' },
+            h('dt', null, t('dataDir')),
+            h('dd', null, status.dataDir || '—')),
+          h('p', { className: 'dshdl-cardHint', style: { marginTop: '10px', marginBottom: 0 } }, t('scopeNote')))
+        : null
+
+      return h('div', { className: cls('dshdl-root', compact ? 'dshdl-compact' : '') },
+        header,
+        errorNode,
+        actionErrorNode,
+        noticeNode,
+        statusCard,
+        profilesCard,
+        nodesCard,
+        downloadCard,
+        advancedToggle,
+        advancedCards,
+        guardCard,
+        trafficCard,
+        aboutCard)
     }
 
     // ------------------------------------------------------------------
-    // 侧边栏流量徽标
+    // 侧栏导航图标（shell 只画这一格，行、标签、高亮由 shell 负责）
+    // ------------------------------------------------------------------
+    function PanelIcon(props) {
+      var size = props.size || 16
+      return h('svg', {
+        'data-dsh-panel-entry': PANEL_ID,
+        viewBox: '0 0 16 16',
+        width: size,
+        height: size,
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeWidth: 1.3,
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        'aria-hidden': 'true'
+      },
+        h('path', { d: 'M8 2v7.2' }),
+        h('path', { d: 'M5.2 6.4 8 9.2l2.8-2.8' }),
+        h('path', { d: 'M2.6 11.4v1.4c0 .6.5 1.1 1.1 1.1h8.6c.6 0 1.1-.5 1.1-1.1v-1.4' }))
+    }
+
+    // ------------------------------------------------------------------
+    // 页脚流量徽标
     // ------------------------------------------------------------------
-    /**
-     * 实时显示经过本插件内核的上下行速率与累计流量。
-     *
-     * 数据来自 `/traffic`（内核的字节计数器）。这个插槽同时服务展开的侧边栏与
-     * 56px 收起栏，`props.wide` 决定用哪种排版；收起态只放得下一个速率。
-     * 页面隐藏时降到 5 秒一次，避免后台空转。
-     */
     function TrafficBadge(props) {
       var wide = props.wide !== false
       var t = props.t || function (key) { return key }
-      var state = React.useState(null)
-      var traffic = state[0]
-      var setTraffic = state[1]
-      var failedState = React.useState(false)
-      var failed = failedState[0]
-      var setFailed = failedState[1]
-      var alive = React.useRef(true)
-
-      React.useEffect(function () {
-        alive.current = true
-        var timer = null
-        function tick() {
-          apiFetch('traffic')
-            .then(function (payload) { if (alive.current) { setTraffic(payload); setFailed(false) } })
-            .catch(function () { if (alive.current) setFailed(true) })
-        }
-        function schedule() {
-          timer = setTimeout(function () { tick(); schedule() }, document.hidden ? 5000 : 1500)
-        }
-        tick()
-        schedule()
-        return function () { alive.current = false; if (timer) clearTimeout(timer) }
-      }, [])
-
-      // 内核没跑或后端不可达时不占地方。
-      if (failed || traffic === null || traffic.active === false) return null
-
-      var up = Number(traffic.up) || 0
-      var down = Number(traffic.down) || 0
+      var traffic = useTraffic(1500)
+      if (traffic === null || traffic.active === false) return null
       var upRate = Number(traffic.upRate) || 0
       var downRate = Number(traffic.downRate) || 0
-      var tip = t('trafficTitle') + '\n' +
-        t('trafficUp') + '：' + formatRate(upRate) + '（' + t('trafficTotal') + ' ' + formatBytes(up) + '）\n' +
-        t('trafficDown') + '：' + formatRate(downRate) + '（' + t('trafficTotal') + ' ' + formatBytes(down) + '）'
-
+      var tip = t('traffic') + '\n' +
+        t('trafficUp') + ': ' + formatRate(upRate) + ' (' + t('trafficTotal') + ' ' + formatBytes(traffic.up) + ')\n' +
+        t('trafficDown') + ': ' + formatRate(downRate) + ' (' + t('trafficTotal') + ' ' + formatBytes(traffic.down) + ')'
       if (!wide) {
-        return React.createElement('div', { className: 'dshdl-trafRail', title: tip },
-          React.createElement('span', { className: 'dshdl-trafRailArrow' }, '↓'),
-          React.createElement('span', { className: 'dshdl-trafRailRate' }, formatRateTiny(downRate)))
+        return h('div', { className: 'dshdl-trafRail', title: tip },
+          h('span', null, '↓'),
+          h('span', null, formatRateTiny(downRate)))
       }
-
-      return React.createElement('div', { className: 'dshdl-traf', title: tip },
-        React.createElement('div', { className: 'dshdl-trafRow' },
-          React.createElement('span', { className: 'dshdl-trafArrow up' }, '↑'),
-          React.createElement('span', { className: 'dshdl-trafRate' }, formatRate(upRate)),
-          React.createElement('span', { className: 'dshdl-trafSum' }, formatBytes(up))),
-        React.createElement('div', { className: 'dshdl-trafRow' },
-          React.createElement('span', { className: 'dshdl-trafArrow down' }, '↓'),
-          React.createElement('span', { className: 'dshdl-trafRate' }, formatRate(downRate)),
-          React.createElement('span', { className: 'dshdl-trafSum' }, formatBytes(down))))
+      return h('div', { className: 'dshdl-trafFoot', title: tip },
+        h('div', { className: 'row' }, h('span', null, '↑'), h('span', null, formatRateTiny(upRate))),
+        h('div', { className: 'row' }, h('span', null, '↓'), h('span', null, formatRateTiny(downRate))))
     }
 
     // ------------------------------------------------------------------
@@ -810,11 +1469,13 @@ window.__ModuleLoader__.load({
     function apply(ctx) {
       ensureCss()
 
-      var translate = null
+      var ctxRef = { current: ctx }
+      var locale = localeService(ctx)
+
+      // 字典注册失败不影响面板（下面有自己的回退字典）。
       try {
-        ctx.locale.register(LOCALE_NS, { zh: LOCALE_ZH, en: LOCALE_EN })
-        translate = ctx.locale.bind(LOCALE_NS)
-      } catch (e) { /* 字典注册失败不影响面板 */ }
+        if (locale) locale.register(LOCALE_NS, { zh: LOCALE_ZH, en: LOCALE_EN })
+      } catch (e) { /* ignore */ }
 
       var cached = null
       function getConfigForm() {
@@ -826,30 +1487,62 @@ window.__ModuleLoader__.load({
         return cached
       }
 
+      function label() {
+        try {
+          if (locale) return locale.bind(LOCALE_NS)('entryLabel')
+        } catch (e) { /* ignore */ }
+        return '下载代理'
+      }
+
+      // 1) 左侧栏导航行（shell 拥有按钮/标签/高亮/收起态几何）
+      ctx.slots.inject('sidebar.panellist', function () {
+        return ctx.slots.register({
+          name: 'sidebar.panellist',
+          id: PANEL_ID,
+          order: 30,
+          label: label
+        }, PanelIcon)
+      })
+
+      // 2) 左侧栏对应的主面板页面
+      ctx.slots.inject('main', function () {
+        return ctx.slots.register({
+          name: 'main',
+          key: PANEL_ID,
+          label: label,
+          inject: function () {
+            return { ctxRef: ctxRef, scope: getConfigForm(), variant: 'panel' }
+          }
+        }, DownloaderPage)
+      })
+
+      // 3) 设置页入口 —— 同一套 Page 组件，只是排版更紧凑
       ctx.slots.inject('settings.section', function () {
         return ctx.slots.register({
           name: 'settings.section',
           id: ENTRY_ID,
           order: 91,
-          label: function () { return translate ? translate('nav') : '下载代理' },
+          label: label,
           locale: LOCALE_NS,
           inject: function () {
-            return {
-              scope: getConfigForm(),
-              t: function (key) { return translate ? translate(key) : key }
-            }
+            return { ctxRef: ctxRef, scope: getConfigForm(), variant: 'settings' }
           }
-        }, DownloaderSection)
+        }, DownloaderPage)
       })
 
-      // 侧边栏页脚：实时代理流量。与设置页各自独立，设置页没打开也能看。
+      // 4) 侧栏页脚：实时流量。设置页/面板没打开也能看
       ctx.slots.inject('sidebar.footer.action', function () {
         return ctx.slots.register({
           name: 'sidebar.footer.action',
           id: ENTRY_ID + '-traffic',
           order: 20,
           inject: function () {
-            return { t: function (key) { return translate ? translate(key) : key } }
+            var translate = function (key) { return key }
+            try {
+              var service = localeService(ctx)
+              if (service) translate = service.bind(LOCALE_NS)
+            } catch (e) { /* ignore */ }
+            return { t: translate }
           }
         }, TrafficBadge)
       })