dsh-plugin-admin 0.4.2 → 0.5.0

package/lib/client.js

@@ -2,14 +2,15 @@ window.__ModuleLoader__.load({ id: 'dsh-plugin-admin', factory: (require) => {
 var module = { exports: {} }; var exports = module.exports;
 
 /**
- * dsh-plugin-admin browser half: unified "管理中心" (插件管理 & 会话管理)
- * page inside the settings panel.
+ * dsh-plugin-admin browser half: administration surfaces parked where the
+ * settings shell already renders their domain.
  *
- * The page rides the shell's `settings.section` slot (the shell owns
- * the dialog chrome, navigation, and close); its component is assembled with
- * the platform-shared React (module-table seed word, same instance the shell
- * renders with), providing a tabbed modern UI to manage both profile plugin
- * layers and session lifecycles over the /api RPC gateway.
+ * Three slot contributions (all assembled with the platform-shared React,
+ * module-table seed word, same instance the shell renders with):
+ * - 扩展插件: a tab inside the shell-owned 插件 section (`settings.plugins.tab`),
+ *   after 插件配置 and 插件列表;
+ * - MCP服务器 / 历史会话: standalone `settings.section` pages in the settings nav.
+ * Panels talk to the host over the /api RPC gateway.
  */
 
 var React = require('react')
@@ -23,12 +24,6 @@ var CSS_TEXT = [
   '@keyframes dsh-admin-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.85); } }',
   '[data-dsh-admin-section] { display: flex; flex-direction: column; width: 100%; gap: 14px; padding: 2px; font-size: 13px; line-height: 1.5; color: var(--dsw-alias-label-primary, #222); max-height: calc(100vh - 140px); overflow: hidden; }',
   '[data-dsh-admin-section] * { box-sizing: border-box; }',
-  '[data-dsh-admin-section] .tabs { display: flex; padding: 3px; background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.2)); border-radius: 9px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.3)); gap: 3px; }',
-  '[data-dsh-admin-section] .tab { flex: 1; border: 0; background: transparent; border-radius: 7px; padding: 7px 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--dsw-alias-label-secondary, #666); transition: all 0.15s ease; font-family: inherit; }',
-  '[data-dsh-admin-section] .tab:hover:not(.active) { color: var(--dsw-alias-label-primary, #222); background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.3)); }',
-  '[data-dsh-admin-section] .tab.active { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, transparent)); color: var(--dsw-alias-label-primary, #333); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); }',
-  '[data-dsh-admin-section] .tab-count { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.4)); color: var(--dsw-alias-label-secondary, #555); }',
-  '[data-dsh-admin-section] .tab.active .tab-count { background: var(--dsw-static-blue-500, #3b82f6); color: #fff; }',
   '[data-dsh-admin-section] .toolbar { display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); border-radius: 12px; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, transparent)); box-shadow: 0 1px 2px rgba(0,0,0,0.02); }',
   '[data-dsh-admin-section] .toolbar .input { height: 32px; padding: 0 12px; border-radius: 8px; border-color: var(--dsw-alias-border-subtle, rgba(200,200,210,0.5)); }',
   '[data-dsh-admin-section] .search-wrap { flex: 1.6; min-width: 0; position: relative; display: flex; align-items: center; height: 32px; }',
@@ -63,6 +58,10 @@ var CSS_TEXT = [
   '[data-dsh-admin-section] .btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }',
   '[data-dsh-admin-section] .spinner { width: 12px; height: 12px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: dsh-admin-spin 0.7s linear infinite; display: inline-block; flex: none; }',
   '[data-dsh-admin-section] .list { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; max-height: 560px; overflow-y: auto; padding: 2px 4px 2px 2px; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)) transparent; }',
+  '[data-dsh-admin-section] .list.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }',
+  '[data-dsh-admin-section] .list.grid2 .empty { grid-column: 1 / -1; }',
+  '[data-dsh-admin-section] .list.grid2 .card { cursor: pointer; }',
+  '[data-dsh-admin-section] .list.grid2 .card:hover { transform: none; border-color: var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.25)); box-shadow: none; }',
   '[data-dsh-admin-section] .list::-webkit-scrollbar { width: 6px; }',
   '[data-dsh-admin-section] .list::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); }',
   '[data-dsh-admin-section] .session-group { display: flex; flex-direction: column; gap: 6px; }',
@@ -121,7 +120,7 @@ var CSS_TEXT = [
   '[data-dsh-admin-section] .mcp-test-fail { color: var(--dsw-alias-state-error-primary, #ef4444); }',
   '[data-dsh-admin-section] .mcp-test-warn { color: #d97706; opacity: 0.95; }',
   '[data-dsh-admin-section] .mcp-test-cached { font-size: 10px; color: var(--dsw-alias-label-tertiary, #999); }',
-  '@media (max-width: 520px) { [data-dsh-admin-section] { gap: 10px; } [data-dsh-admin-section] .toolbar { align-items: stretch; flex-wrap: wrap; padding: 8px; } [data-dsh-admin-section] .toolbar .input-wrap { flex-basis: 100%; } [data-dsh-admin-section] .card-header { align-items: flex-start; } [data-dsh-admin-section] .card-actions { flex-wrap: wrap; justify-content: flex-end; } [data-dsh-admin-section] .footer { gap: 6px; align-items: flex-start; flex-direction: column; } [data-dsh-admin-section] .footer .path { max-width: 100%; } }',
+  '@media (max-width: 520px) { [data-dsh-admin-section] { gap: 10px; } [data-dsh-admin-section] .list.grid2 { grid-template-columns: 1fr; } [data-dsh-admin-section] .toolbar { align-items: stretch; flex-wrap: wrap; padding: 8px; } [data-dsh-admin-section] .toolbar .input-wrap { flex-basis: 100%; } [data-dsh-admin-section] .card-header { align-items: flex-start; } [data-dsh-admin-section] .card-actions { flex-wrap: wrap; justify-content: flex-end; } [data-dsh-admin-section] .footer { gap: 6px; align-items: flex-start; flex-direction: column; } [data-dsh-admin-section] .footer .path { max-width: 100%; } }',
   '@keyframes dsh-toast-in { 0% { opacity: 0; transform: translateY(-12px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }',
   '@keyframes dsh-toast-out { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-8px) scale(0.96); } }',
   '.dsh-admin-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99999; padding: 10px 20px; border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 1.4; box-shadow: 0 8px 30px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08); display: flex; align-items: center; gap: 8px; pointer-events: none; animation: dsh-toast-in 0.25s ease-out forwards; max-width: 90vw; word-break: break-word; }',
@@ -385,7 +384,7 @@ function setupMenuInjection(call, refreshSessions) {
           }
           if (exact.length === 0) { showToast('error', '❌ 未找到匹配的会话'); return }
           if (exact.length > 1) {
-            showToast('error', '❌ 存在 ' + String(exact.length) + ' 个同名会话，无法确定要删除的目标；请在 设置 → 管理中心 → 会话管理 中按会话 ID 删除')
+            showToast('error', '❌ 存在 ' + String(exact.length) + ' 个同名会话，无法确定要删除的目标；请在 设置 → 历史会话 中按会话 ID 删除')
             return
           }
           cb(exact[0])
@@ -514,7 +513,8 @@ function setupMenuInjection(call, refreshSessions) {
 }
 
 /**
- * Plugins management settings section (standalone, no internal tabs).
+ * 扩展插件 tab contribution: plugin management rendered inside the shell-owned
+ * 插件 settings section (after 插件配置 and 插件列表).
  */
 function PluginsSection(props) {
   // Lazy initializer: the seed object (and its localStorage read) must be
@@ -751,7 +751,7 @@ function PluginsSection(props) {
     alive.current = true
     reloadPlugins()
     // Auto-check for remote updates on mount (the panel loads lazily when
-    // the 插件管理 tab is opened, so this runs once per open). The auto path
+    // the 扩展插件 tab is opened, so this runs once per open). The auto path
     // is cache-friendly: the host serves its 5-minute cache, so re-opening
     // the tab shortly after does not re-hit the registry. The manual
     // ⬆ 检查更新 button is the force path — it bypasses the cache and
@@ -775,7 +775,7 @@ function PluginsSection(props) {
 }
 
 /**
- * Sessions management settings section (standalone, no internal tabs).
+ * 历史会话 settings section (standalone settings-nav page).
  */
 function SessionsSection(props) {
   var pairSessions = useState({
@@ -853,7 +853,7 @@ function SessionsSection(props) {
 }
 
 /**
- * MCP configuration settings section (standalone, no internal tabs).
+ * MCP服务器 settings section (standalone settings-nav page).
  */
 
 /* ------------------------------------------------------------------------ */
@@ -972,7 +972,7 @@ function formatTestTime(ms) {
 /* once a newer version is detected it is kept in localStorage until a      */
 /* check confirms the installed version is current again (i.e. the update   */
 /* actually completed). This is what keeps the badge visible after closing  */
-/* and reopening the 管理中心, across dsh restarts, and even when a later   */
+/* and reopening the dialog, across dsh restarts, and even when a later     */
 /* re-check hits a transient network failure — and what clears it only once */
 /* the plugin is upgraded (更新完删除提醒).                                  */
 /* ------------------------------------------------------------------------ */
@@ -1356,35 +1356,6 @@ function McpSection(props) {
     renderMcpSection(mView, patchDraft, reloadMcp, openMcpEditor, closeMcpEditor, saveMcpDraft, removeMcpEntry, testMcpEntry))
 }
 
-/** Unified settings page; only the selected panel mounts and loads. */
-function AdminCenterSection(props) {
-  var pairTab = useState('plugins')
-  var activeTab = pairTab[0]
-  var setActiveTab = pairTab[1]
-  var tabs = [
-    { id: 'plugins', label: '插件管理', component: PluginsSection },
-    { id: 'sessions', label: '会话管理', component: SessionsSection },
-    { id: 'mcp', label: 'MCP 配置', component: McpSection },
-  ]
-  var selected = tabs.find(function (tab) { return tab.id === activeTab }) || tabs[0]
-
-  return createElement('div', { 'data-dsh-admin-section': '' },
-    createElement('div', { className: 'tabs', role: 'tablist', 'aria-label': '管理中心功能' },
-      tabs.map(function (tab) {
-        return createElement('button', {
-          type: 'button',
-          key: tab.id,
-          className: 'tab' + (tab.id === selected.id ? ' active' : ''),
-          role: 'tab',
-          'aria-selected': tab.id === selected.id,
-          onClick: function () { setActiveTab(tab.id) },
-        }, tab.label)
-      })
-    ),
-    createElement(selected.component, { key: selected.id, call: props.call, refreshSessions: props.refreshSessions })
-  )
-}
-
 /* ========================================================================== */
 /*                           Render Plugins View                              */
 /* ========================================================================== */
@@ -1392,8 +1363,9 @@ function AdminCenterSection(props) {
 function renderPluginsView(view, patch, install, remove, checkUpdates, upgrade) {
   var elements = []
 
-  // Toolbar: search (primary, wide) + install input + actions in one row.
-  elements.push(createElement('div', { className: 'toolbar', key: 'toolbar' },
+  // Toolbar, two rows: search alone on the first (it gets the full width),
+  // install input + actions on the second.
+  elements.push(createElement('div', { className: 'toolbar', key: 'toolbar-search' },
     createElement('div', { className: 'search-wrap', key: 'search-wrap' },
       createElement('span', { className: 'search-icon', key: 'icon' }, '🔍'),
       createElement('input', {
@@ -1411,6 +1383,8 @@ function renderPluginsView(view, patch, install, remove, checkUpdates, upgrade)
         onClick: function () { patch({ needle: '' }) },
       }, '✕') : null
     ),
+  ))
+  elements.push(createElement('div', { className: 'toolbar', key: 'toolbar-install' },
     createElement('div', { className: 'input-wrap install-wrap', key: 'install-wrap' },
       createElement('input', {
         className: 'input',
@@ -1530,7 +1504,7 @@ function renderPluginsView(view, patch, install, remove, checkUpdates, upgrade)
     ))
   }
 
-  elements.push(createElement('div', { className: 'list', key: 'list' }, rows))
+  elements.push(createElement('div', { className: 'list grid2', key: 'list' }, rows))
 
   // Footer
   var hintText = view.note !== '' ? view.note : '更改在重启 dsh 后生效（关闭 dsh 进程后重新运行即可）'
@@ -1859,7 +1833,7 @@ function renderPluginCard(plugin, view, remove, patch, upgrade) {
   var isConfirming = view.confirming === plugin.name
 
   var titleChildren = [
-    createElement('span', { className: 'card-title-text', key: 'name' }, plugin.name),
+    createElement('span', { className: 'card-title-text', key: 'name', title: plugin.name }, plugin.name),
   ]
   if (plugin.version) {
     titleChildren.push(createElement('span', { className: 'tag version', key: 'version' }, 'v' + plugin.version))
@@ -1994,7 +1968,17 @@ function filterSessions(sessions, filter, needle) {
 }
 
 /**
- * Filter plugin layers by the type pill and a fuzzy name/version/path query.
+ * Display rank for the plugin list: 内置 first, then 包安装 (registry
+ * install), then 本地安装 (local path). Host order is kept within a rank.
+ */
+function pluginSortRank(plugin) {
+  if (!plugin.removable) return 0
+  return plugin.localPath ? 2 : 1
+}
+
+/**
+ * Filter plugin layers by the type pill and a fuzzy name/version/path query,
+ * then sort 内置 → 包安装 → 本地安装 (stable: equal ranks keep host order).
  * The needle matches case-insensitively against the package name, the
  * installed version, and the local source path, so "tool" finds
  * dsh-custom-tool and "0.2" finds version rows.
@@ -2011,7 +1995,7 @@ function filterPlugins(plugins, filter, needle) {
     }
     result.push(p)
   }
-  return result
+  return result.sort(function (a, b) { return pluginSortRank(a) - pluginSortRank(b) })
 }/**
  * Group sessions by their accounting workspace in registry order; sessions
  * without a workspace trail under an "未分组" bucket. Empty workspaces are
@@ -2294,12 +2278,1529 @@ function renderSessionCard(session, view, act, patch) {
   return createElement('div', { key: session.id, className: 'card' }, cardChildren)
 }
 
+/* ========================================================================== */
+/*            Subagent Administration (merged from dsh-plugin-subagents)     */
+/* ========================================================================== */
+
+/**
+ * dsh-plugin-subagents browser half: the 子智能体管理 settings section.
+ *
+ * Renders a management panel over the shell's `settings.section` slot (same
+ * platform-shared React and --dsw-* design tokens as the admin plugin) and
+ * drives the host's `subagentAdmin` remote over the /api RPC gateway. One
+ * managed row in the profile cordis.patch.yml equals one named subagent: a
+ * `@deepseek-ai/dsh-tool-subagent` instance whose config carries the agent
+ * name (toolName), the persona prompt, the tool constraint lists, and the
+ * model specification (agentOptions).
+ */
+
+var TOOLNAME_RE = /^[a-z][a-z0-9_]{1,48}$/
+var TOOL_REF_RE = /^[a-z][a-z0-9_]*$/
+var ID_RE = /^[A-Za-z0-9][A-Za-z0-9_-]{0,63}$/
+var RESERVED_TOOL_NAMES = ['subagent', 'subagent_fork', 'run_code']
+
+var SA_CSS_TEXT = [
+  '@keyframes dsh-sa-spin { to { transform: rotate(360deg); } }',
+  '[data-dsh-sa-section] { display: flex; flex-direction: column; width: 100%; gap: 14px; padding: 2px; font-size: 13px; line-height: 1.5; color: var(--dsw-alias-label-primary, #222); overflow: visible; }',
+  '[data-dsh-sa-section] * { box-sizing: border-box; }',
+  '[data-dsh-sa-section] .tabs { display: flex; padding: 3px; background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.2)); border-radius: 9px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.3)); gap: 3px; }',
+  '[data-dsh-sa-section] .tab { flex: 1; border: 0; background: transparent; border-radius: 7px; padding: 7px 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--dsw-alias-label-secondary, #666); transition: all 0.15s ease; font-family: inherit; }',
+  '[data-dsh-sa-section] .tab:hover:not(.active) { color: var(--dsw-alias-label-primary, #222); background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.3)); }',
+  '[data-dsh-sa-section] .tab.active { background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, transparent)); color: var(--dsw-alias-label-primary, #333); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); }',
+  '[data-dsh-sa-section] .tab-count { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.4)); color: var(--dsw-alias-label-secondary, #555); }',
+  '[data-dsh-sa-section] .tab.active .tab-count { background: var(--dsw-static-blue-500, #3b82f6); color: #fff; }',
+  '[data-dsh-sa-section] .toolbar { display: flex; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); border-radius: 12px; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, transparent)); box-shadow: 0 1px 2px rgba(0,0,0,0.02); flex-wrap: wrap; }',
+  '[data-dsh-sa-section] .filterbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); border-radius: 12px; background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, transparent)); }',
+  '[data-dsh-sa-section] .filter-label { font-size: 12px; font-weight: 600; color: var(--dsw-alias-label-secondary, #666); flex: none; margin-right: 2px; }',
+  '[data-dsh-sa-section] .search-wrap { flex: 1; min-width: 150px; position: relative; display: flex; align-items: center; height: 32px; }',
+  '[data-dsh-sa-section] .search-wrap .input { flex: 1; min-width: 0; padding-left: 30px; font-size: 13px; height: 32px; }',
+  '[data-dsh-sa-section] .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: 0.7; pointer-events: none; z-index: 1; }',
+  '[data-dsh-sa-section] .input { width: 100%; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.5)); background: var(--dsw-alias-bg-base, transparent); color: inherit; font: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }',
+  '[data-dsh-sa-section] .input:hover { border-color: var(--dsw-alias-label-tertiary, rgba(180,180,195,0.6)); }',
+  '[data-dsh-sa-section] .input:focus { border-color: var(--dsw-static-blue-500, #3b82f6); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16); }',
+  '[data-dsh-sa-section] textarea.input { resize: vertical; min-height: 80px; font-family: var(--dsw-font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.55; }',
+  '[data-dsh-sa-section] select.input { height: 32px; padding: 0 8px; cursor: pointer; }',
+  '[data-dsh-sa-section] .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s ease; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.5)); background: var(--dsw-alias-interactive-bg-hover, rgba(240,240,245,0.6)); color: var(--dsw-alias-label-secondary, #555); white-space: nowrap; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }',
+  '[data-dsh-sa-section] .btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(220,220,230,0.7)); border-color: var(--dsw-alias-label-tertiary, rgba(180,180,195,0.65)); color: var(--dsw-alias-label-primary, #222); }',
+  '[data-dsh-sa-section] .btn:active:not(:disabled) { transform: translateY(1px); }',
+  '[data-dsh-sa-section] .btn:focus-visible { outline: 2px solid var(--dsw-static-blue-500, #3b82f6); outline-offset: 2px; }',
+  '[data-dsh-sa-section] .btn:disabled { opacity: 0.45; cursor: not-allowed; }',
+  '[data-dsh-sa-section] .btn.primary { background: var(--dsw-static-blue-500, #3b82f6); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }',
+  '[data-dsh-sa-section] .btn.primary:hover:not(:disabled) { background: var(--dsw-static-blue-400, #60a5fa); color: #fff; }',
+  '[data-dsh-sa-section] .btn.danger { color: var(--dsw-alias-state-error-primary, #dc2626); border-color: var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); }',
+  '[data-dsh-sa-section] .btn.danger:hover:not(:disabled) { background: rgba(239,68,68,0.1); border-color: rgba(220,38,38,0.35); color: #b91c1c; }',
+  '[data-dsh-sa-section] .btn.danger-solid { background: var(--dsw-alias-state-error-primary, #dc2626); color: #fff; border-color: transparent; }',
+  '[data-dsh-sa-section] .btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }',
+  '[data-dsh-sa-section] .btn.sm.active { background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.4)); color: var(--dsw-static-blue-500, #3b82f6); font-weight: 600; border-color: currentColor; }',
+  '[data-dsh-sa-section] .spinner { width: 12px; height: 12px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: dsh-sa-spin 0.7s linear infinite; display: inline-block; flex: none; }',
+  '[data-dsh-sa-section] .list { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; max-height: 560px; overflow-y: auto; padding: 2px 4px 2px 2px; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)) transparent; }',
+  '[data-dsh-sa-section] .card { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 12px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, transparent)); box-shadow: 0 1px 2px rgba(0,0,0,0.02); transition: all 0.15s ease; }',
+  '[data-dsh-sa-section] .card:hover { transform: translateY(-1px); border-color: var(--dsw-alias-label-tertiary, rgba(180,180,195,0.6)); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }',
+  '[data-dsh-sa-section] .card-header { display: flex; align-items: center; gap: 8px; min-width: 0; }',
+  '[data-dsh-sa-section] .card-title { font-size: 13px; font-weight: 600; color: var(--dsw-alias-label-primary); display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; font-family: var(--dsw-font-mono, ui-monospace, monospace); }',
+  '[data-dsh-sa-section] .card-actions { display: flex; gap: 5px; align-items: center; flex: none; }',
+  '[data-dsh-sa-section] .persona-box { display: flex; align-items: flex-start; gap: 6px; padding: 6px 9px; border-radius: 6px; background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.25)); border-left: 2px solid var(--dsw-static-blue-500, #3b82f6); font-size: 12px; line-height: 1.45; color: var(--dsw-alias-label-secondary, #555); }',
+  '[data-dsh-sa-section] .persona-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: pre-wrap; }',
+  '[data-dsh-sa-section] .card-sub { font-size: 11px; color: var(--dsw-alias-label-secondary, #666); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }',
+  '[data-dsh-sa-section] .tag { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 4px; flex: none; display: inline-flex; align-items: center; gap: 4px; background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.25)); color: var(--dsw-alias-label-secondary, #555); }',
+  '[data-dsh-sa-section] .tag.provider { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }',
+  '[data-dsh-sa-section] .tag.model { background: rgba(59, 130, 246, 0.12); color: var(--dsw-static-blue-500, #3b82f6); }',
+  '[data-dsh-sa-section] .tag.live { background: rgba(16, 185, 129, 0.12); color: var(--dsw-alias-state-success-primary, #10b981); }',
+  '[data-dsh-sa-section] .tag.warn { background: rgba(245, 158, 11, 0.14); color: #d97706; font-weight: 600; }',
+  '[data-dsh-sa-section] .tag.dead { background: rgba(239, 68, 68, 0.12); color: var(--dsw-alias-state-error-primary, #dc2626); }',
+  '[data-dsh-sa-section] .chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }',
+  '[data-dsh-sa-section] .chip { font-size: 10px; font-family: var(--dsw-font-mono, ui-monospace, monospace); padding: 1px 6px; border-radius: 4px; background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.3)); border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); color: var(--dsw-alias-label-secondary, #555); }',
+  '[data-dsh-sa-section] .chip.deny { background: rgba(239, 68, 68, 0.08); border-color: rgba(220,38,38,0.25); color: #b91c1c; }',
+  '[data-dsh-sa-section] .chip.allow { background: rgba(16, 185, 129, 0.08); border-color: rgba(16,185,129,0.3); color: #047857; }',
+  '[data-dsh-sa-section] .form { flex: 1 1 auto; min-height: 0; max-height: calc(100vh - 220px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--dsw-static-blue-500, #3b82f6); background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, transparent)); box-shadow: 0 4px 14px rgba(59,130,246,0.08); }',
+  '[data-dsh-sa-section] .form-title { font-size: 13px; font-weight: 600; color: var(--dsw-alias-label-primary); display: flex; align-items: center; gap: 6px; }',
+  '[data-dsh-sa-section] .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }',
+  '[data-dsh-sa-section] .form-grid .full { grid-column: 1 / -1; }',
+  '[data-dsh-sa-section] .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }',
+  '[data-dsh-sa-section] .field-label { font-size: 11px; font-weight: 600; color: var(--dsw-alias-label-secondary, #666); display: flex; align-items: center; gap: 5px; }',
+  '[data-dsh-sa-section] .field-hint { font-size: 10px; color: var(--dsw-alias-label-tertiary, #999); line-height: 1.4; }',
+  '[data-dsh-sa-section] .fieldset { border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }',
+  '[data-dsh-sa-section] .fieldset-legend { font-size: 11px; font-weight: 600; color: var(--dsw-alias-label-secondary, #666); padding: 0 4px; }',
+  '[data-dsh-sa-section] .tag-input { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.5)); background: var(--dsw-alias-bg-base, transparent); min-height: 34px; align-items: center; cursor: text; }',
+  '[data-dsh-sa-section] .tag-input:focus-within { border-color: var(--dsw-static-blue-500, #3b82f6); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16); }',
+  '[data-dsh-sa-section] .tag-input input { border: 0; outline: none; background: transparent; color: inherit; font: inherit; font-size: 12px; flex: 1; min-width: 90px; }',
+  '[data-dsh-sa-section] .tag-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-family: var(--dsw-font-mono, ui-monospace, monospace); padding: 2px 4px 2px 8px; border-radius: 5px; }',
+  '[data-dsh-sa-section] .tag-chip.allow { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16,185,129,0.3); color: #047857; }',
+  '[data-dsh-sa-section] .tag-chip.deny { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(220,38,38,0.25); color: #b91c1c; }',
+  '[data-dsh-sa-section] .tag-chip button { border: 0; background: transparent; cursor: pointer; color: inherit; opacity: 0.65; font-size: 11px; padding: 0 3px; line-height: 1; }',
+  '[data-dsh-sa-section] .tag-chip button:hover { opacity: 1; }',
+  '[data-dsh-sa-section] .checkbox-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dsw-alias-label-secondary, #555); cursor: pointer; }',
+  '[data-dsh-sa-section] .checkbox-row input { accent-color: var(--dsw-static-blue-500, #3b82f6); }',
+  '[data-dsh-sa-section] .env-row { display: flex; gap: 6px; align-items: center; }',
+  '[data-dsh-sa-section] .env-row .env-key { flex: 2; min-width: 0; }',
+  '[data-dsh-sa-section] .env-row .env-value { flex: 3; min-width: 0; }',
+  '[data-dsh-sa-section] .cli-toggle { border: 0; background: transparent; cursor: pointer; color: var(--dsw-alias-label-secondary, #555); font-size: 12px; line-height: 1; padding: 3px 6px; border-radius: 6px; }',
+  '[data-dsh-sa-section] .cli-toggle:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.3)); color: var(--dsw-alias-label-primary, #222); }',
+  '[data-dsh-sa-section] .cli-title { font-size: 13px; font-weight: 600; color: var(--dsw-alias-label-primary, #222); display: inline-flex; align-items: center; flex: none; white-space: nowrap; font-family: var(--dsw-font-mono, ui-monospace, monospace); cursor: pointer; }',
+  '[data-dsh-sa-section] .cli-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; align-items: center; }',
+  '[data-dsh-sa-section] .cli-detail { display: flex; flex-direction: column; gap: 8px; }',
+  '[data-dsh-sa-section] .cli-scan-list { display: flex; flex-direction: column; gap: 6px; }',
+  '[data-dsh-sa-section] .cli-scan-row { display: flex; gap: 8px; align-items: center; }',
+  '[data-dsh-sa-section] .cli-scan-row .input { flex: 1; min-width: 0; }',
+  '[data-dsh-sa-section] .cli-scan-hint { font-size: 12px; line-height: 1.5; color: var(--dsw-alias-label-secondary, #666); }',
+  '[data-dsh-sa-section] .cli-scan-card { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); border-radius: 10px; background: var(--dsw-alias-interactive-bg-hover, rgba(200,200,210,0.12)); }',
+  '[data-dsh-sa-section] .cli-scan-card .btn { margin-left: auto; flex: none; }',
+  '[data-dsh-sa-section] .error-strip { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 9px; border: 1px solid rgba(220,38,38,0.35); background: rgba(239,68,68,0.08); color: var(--dsw-alias-state-error-primary, #dc2626); font-size: 12px; line-height: 1.45; word-break: break-word; }',
+  '[data-dsh-sa-section] .warn-strip { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: 9px; border: 1px solid rgba(217,119,6,0.35); background: rgba(245,158,11,0.08); color: #b45309; font-size: 12px; line-height: 1.5; word-break: break-word; }',
+  '[data-dsh-sa-section] .warn-strip div { display: flex; gap: 6px; align-items: flex-start; }',
+  '[data-dsh-sa-section] .empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 12px; border: 1px dashed var(--dsw-alias-border-subtle, rgba(200,200,210,0.5)); border-radius: 12px; color: var(--dsw-alias-label-tertiary, #999); font-size: 12px; text-align: center; }',
+  '[data-dsh-sa-section] .empty .big { font-size: 26px; }',
+  '[data-dsh-sa-section] .toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10000; max-width: 520px; padding: 10px 16px; border-radius: 10px; font-size: 12px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,0.18); background: rgba(239,68,68,0.96); color: #fff; word-break: break-word; white-space: pre-line; }',
+  '[data-dsh-sa-section] .history-row { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.4)); background: var(--dsw-alias-bg-elevated, var(--dsw-alias-bg-base, transparent)); }',
+  '[data-dsh-sa-section] .history-head { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }',
+  '[data-dsh-sa-section] .history-time { font-family: var(--dsw-font-mono, ui-monospace, monospace); font-size: 10px; color: var(--dsw-alias-label-tertiary, #999); margin-left: auto; }',
+  '[data-dsh-sa-section] .history-detail { font-size: 11px; color: var(--dsw-alias-label-tertiary, #888); font-family: var(--dsw-font-mono, ui-monospace, monospace); word-break: break-all; max-height: 60px; overflow: hidden; }',
+  '[data-dsh-sa-section] .footer-note { font-size: 10px; color: var(--dsw-alias-label-tertiary, #999); line-height: 1.5; padding: 0 2px; }',
+  '[data-dsh-sa-section] .sa-picker { position: relative; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }',
+  '[data-dsh-sa-section] .sa-picker-input { border: 0; outline: none; background: transparent; color: inherit; font: inherit; font-size: 12px; flex: 1; min-width: 120px; padding: 2px 4px; }',
+  '[data-dsh-sa-section] .sa-picker-list { width: 100%; margin-top: 4px; max-height: 220px; overflow-y: auto; background: var(--dsh-alias-bg-elevated, #fff); border: 1px solid var(--dsw-alias-border-subtle, rgba(200,200,210,0.5)); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.14); padding: 3px; scrollbar-width: thin; }',
+  '[data-dsh-sa-section] .sa-picker-opt { padding: 6px 9px; font-size: 12px; cursor: pointer; border-radius: 5px; color: var(--dsw-alias-label-primary, #222); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }',
+  '[data-dsh-sa-section] .sa-picker-opt.active, [data-dsh-sa-section] .sa-picker-opt:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(59,130,246,0.14)); color: var(--dsw-static-blue-500, #3b82f6); }',
+  '[data-dsh-sa-section] .sa-picker-empty { padding: 6px 9px; font-size: 11px; color: var(--dsw-alias-label-tertiary, #999); }',
+]
+
+var SA_STYLE_SEEN = false
+function injectSaStyles() {
+  if (SA_STYLE_SEEN) return
+  var style = document.createElement('style')
+  style.setAttribute('data-dsh-sa-styles', '')
+  style.textContent = SA_CSS_TEXT.join('\n')
+  document.head.appendChild(style)
+  SA_STYLE_SEEN = true
+}
+
+/** The gateway wraps every remote result in an { ok, value | error } envelope. */
+function unwrap(result) {
+  if (result && typeof result === 'object' && 'ok' in result) {
+    if (result.ok) return result.value
+    var detail = result.error && result.error.message ? result.error.message : String(result.error)
+    throw new Error(detail)
+  }
+  return result
+}
+
+/* ========================================================================== */
+/*                              Small components                              */
+/* ========================================================================== */
+
+function Spinner() {
+  return createElement('span', { className: 'spinner' })
+}
+
+/** Two-click inline confirm; disarms after 3.2s. */
+function ConfirmButton(props) {
+  var armed = useState(false)
+  var isArmed = armed[0]
+  var setArmed = armed[1]
+  var timer = useRef(null)
+  useEffect(function () {
+    return function () { if (timer.current) clearTimeout(timer.current) }
+  }, [])
+  var label = isArmed ? (props.confirmLabel || '确认？') : props.label
+  return createElement('button', {
+    type: 'button',
+    className: 'btn sm ' + (isArmed ? 'danger-solid' : 'danger'),
+    disabled: props.disabled === true,
+    onClick: function () {
+      if (!isArmed) {
+        setArmed(true)
+        timer.current = setTimeout(function () { setArmed(false) }, 3200)
+        return
+      }
+      if (timer.current) clearTimeout(timer.current)
+      setArmed(false)
+      props.onConfirm()
+    },
+  }, label)
+}
+
+/* ========================================================================== */
+/*                            Form draft handling                             */
+/* ========================================================================== */
+
+function emptyDraft() {
+  return {
+    id: '',
+    toolName: '',
+    provider: 'spawn',
+    persona: '',
+    allow: [],
+    deny: [],
+    agentProvider: '',
+    agentModel: '',
+    maxTokens: '',
+    maxDepthManaged: false,
+    maxDepth: '3',
+    backgroundMode: 'one-shot',
+    enableRunInBackground: true,
+  }
+}
+
+function draftFromEntry(entry) {
+  var config = entry.config || {}
+  return {
+    id: entry.id,
+    toolName: config.toolName || '',
+    provider: config.provider || 'spawn',
+    persona: config.persona || '',
+    allow: (config.toolFilter && config.toolFilter.allow) || [],
+    deny: (config.toolFilter && config.toolFilter.deny) || [],
+    agentProvider: (config.agentOptions && config.agentOptions.provider) || '',
+    agentModel: (config.agentOptions && config.agentOptions.model) || '',
+    maxTokens: config.agentOptions && config.agentOptions.maxTokens !== undefined ? String(config.agentOptions.maxTokens) : '',
+    maxDepthManaged: config.maxDepth === 'provider-managed',
+    maxDepth: typeof config.maxDepth === 'number' ? String(config.maxDepth) : '3',
+    backgroundMode: config.backgroundMode || 'one-shot',
+    enableRunInBackground: config.enableRunInBackground !== false,
+  }
+}
+
+/** Client-side validation mirroring the host rules; returns an error string or null. */
+function validateDraft(draft, isCreate, otherToolNames, providerMeta, candidateNames) {
+  if (isCreate && !ID_RE.test(draft.id)) return '实例 ID 只能包含字母、数字、下划线和中划线（字母或数字开头，最长 64 位）'
+  if (!TOOLNAME_RE.test(draft.toolName)) return '子智能体名称必须是 2-48 位小写字母/数字/下划线且字母开头'
+  if (RESERVED_TOOL_NAMES.indexOf(draft.toolName) !== -1) return '子智能体名称 "' + draft.toolName + '" 是保留名（内置预设已占用）'
+  if (otherToolNames.indexOf(draft.toolName) !== -1) return '子智能体名称 "' + draft.toolName + '" 已被其他实例使用'
+  var meta = providerMeta[draft.provider]
+  if (!meta) return '未知的执行后端 "' + draft.provider + '"'
+  if (draft.persona !== '' && meta.capabilities.persona === false) return '后端 "' + draft.provider + '" 不支持 persona（提示词）'
+  if ((draft.allow.length > 0 || draft.deny.length > 0) && meta.capabilities.toolFilter === false) return '后端 "' + draft.provider + '" 不支持 toolFilter（工具约束）'
+  if (!draft.maxDepthManaged) {
+    if (draft.maxDepth !== '' && !/^\d+$/.test(draft.maxDepth)) return '最大委托深度必须是非负整数'
+    if (draft.maxDepth !== '' && meta.capabilities.depthLimit === false) {
+      return '后端 "' + draft.provider + '" 无法执行数值 maxDepth；请勾选「交由后端管理」或换后端'
+    }
+  }
+  if (draft.maxTokens !== '' && !/^\d+$/.test(draft.maxTokens)) return 'maxTokens 必须是正整数'
+  var filterNames = (draft.allow || []).concat(draft.deny || [])
+  for (var fi = 0; fi < filterNames.length; fi++) {
+    var tname = filterNames[fi]
+    if (RESERVED_TOOL_NAMES.indexOf(tname) !== -1) return '工具 "' + tname + '" 是保留名（' + RESERVED_TOOL_NAMES.join('/') + '），不能用于工具约束'
+    if (candidateNames && candidateNames.length > 0 && candidateNames.indexOf(tname) === -1) return '工具 "' + tname + '" 不在可选清单中（来自运行中工具或内置名录），保存会被拒绝'
+  }
+  return null
+}
+
+function draftToPayload(draft) {
+  var config = { provider: draft.provider, toolName: draft.toolName }
+  if (draft.persona.trim() !== '') config.persona = draft.persona
+  if (draft.allow.length > 0 || draft.deny.length > 0) {
+    config.toolFilter = {}
+    if (draft.allow.length > 0) config.toolFilter.allow = draft.allow.slice()
+    if (draft.deny.length > 0) config.toolFilter.deny = draft.deny.slice()
+  }
+  var agentOptions = {}
+  if (draft.agentProvider.trim() !== '') agentOptions.provider = draft.agentProvider.trim()
+  if (draft.agentModel.trim() !== '') agentOptions.model = draft.agentModel.trim()
+  if (draft.maxTokens.trim() !== '') agentOptions.maxTokens = Number(draft.maxTokens)
+  if (Object.keys(agentOptions).length > 0) config.agentOptions = agentOptions
+  if (draft.maxDepthManaged) config.maxDepth = 'provider-managed'
+  else if (draft.maxDepth !== '') config.maxDepth = Number(draft.maxDepth)
+  config.backgroundMode = draft.backgroundMode
+  config.enableRunInBackground = draft.enableRunInBackground === true
+  return { id: draft.id.trim(), config: config }
+}
+
+/* ========================================================================== */
+/*                         Searchable picker (single/multi)                    */
+/* ========================================================================== */
+
+/**
+ * Filterable picker used for the model/provider selects (single) and the
+ * tool-constraint chips (multi). Renders a text input plus a scrollable,
+ * filtered dropdown; click or Enter selects. Single mode also commits the
+ * typed text (so arbitrary values still work); multi mode appends chips and
+ * hides already-picked options from the list.
+ */
+function Picker(props) {
+  var multi = props.multi === true
+  var values = props.values || []
+  var options = props.options || []
+  var allowCustom = props.allowCustom !== false
+  var inputRef = useRef(null)
+  var textState = useState('')
+  var text = textState[0]
+  var setText = textState[1]
+  var openState = useState(false)
+  var open = openState[0]
+  var setOpen = openState[1]
+  var highlightState = useState(0)
+  var highlight = highlightState[0]
+  var setHighlight = highlightState[1]
+
+  var selected = {}
+  for (var si = 0; si < values.length; si++) selected[values[si]] = true
+
+  var filtered = options.filter(function (o) {
+    if (multi && selected[o.value]) return false
+    var q = text.trim().toLowerCase()
+    if (q === '') return true
+    var label = (o.label || o.value).toLowerCase()
+    return label.indexOf(q) !== -1 || o.value.toLowerCase().indexOf(q) !== -1
+  })
+
+  function emit(next) { props.onChange(next) }
+
+  function pick(opt) {
+    if (multi) {
+      if (selected[opt.value] || !TOOL_REF_RE.test(opt.value)) return
+      emit(values.concat([opt.value]))
+      setText(''); setHighlight(0); setOpen(true)
+    } else {
+      emit([opt.value]); setText(''); setOpen(false)
+    }
+  }
+  function addTyped(v) {
+    var val = (v || '').trim()
+    if (val === '') return
+    if (multi && (selected[val] || !TOOL_REF_RE.test(val))) return
+    emit(multi ? values.concat([val]) : [val])
+    setText(''); setHighlight(0)
+  }
+  function onInputChange(e) {
+    var v = e.target.value
+    setText(v); setOpen(true); setHighlight(0)
+    if (!multi) emit([v])
+  }
+  function onKeyDown(e) {
+    var live = (inputRef.current ? inputRef.current.value : text).trim()
+    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(function (h) { return Math.min(h + 1, filtered.length - 1) }); return }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(function (h) { return Math.max(h - 1, 0) }); return }
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      if (filtered.length > 0 && highlight >= 0 && highlight < filtered.length) {
+        var hl = filtered[highlight]
+        if (live === '' || live === hl.value || live === (hl.label || hl.value)) { pick(hl); return }
+      }
+      if (allowCustom && live !== '') addTyped(live)
+      return
+    }
+    if (e.key === 'Escape') setOpen(false)
+  }
+
+  var tokens = multi ? values.map(function (v) {
+    return createElement('span', { className: 'tag-chip ' + (props.kind || 'allow'), key: 'tok-' + v },
+      v,
+      createElement('button', {
+        type: 'button', 'aria-label': '移除 ' + v,
+        onClick: function (ev) { ev.stopPropagation(); emit(values.filter(function (x) { return x !== v })) },
+      }, '✕'))
+  }) : null
+
+  var list = open
+    ? createElement('div', { className: 'sa-picker-list' },
+        filtered.length === 0
+          ? createElement('div', { className: 'sa-picker-empty' }, allowCustom && text.trim() !== '' ? '回车添加：' + text.trim() : '无匹配')
+          : filtered.map(function (o, idx) {
+              return createElement('div', {
+                key: o.value,
+                className: 'sa-picker-opt' + (idx === highlight ? ' active' : ''),
+                onMouseDown: function (ev) { ev.preventDefault(); pick(o) },
+                onMouseEnter: function () { setHighlight(idx) },
+              }, o.label || o.value)
+            }))
+    : null
+
+  return createElement('div', { className: 'sa-picker' + (multi ? ' tag-input' : '') },
+    tokens,
+    createElement('input', {
+      ref: inputRef,
+      className: 'sa-picker-input',
+      value: multi ? text : (values[0] || ''),
+      placeholder: props.placeholder || '',
+      'aria-label': props.ariaLabel || props.placeholder || '',
+      onChange: onInputChange,
+      onKeyDown: onKeyDown,
+      onFocus: function () { setOpen(true) },
+      onBlur: function () { setOpen(false) },
+    }),
+    list,
+  )
+}
+
+/* ========================================================================== */
+/*                              Subagents panel                               */
+/* ========================================================================== */
+
+function SubagentsPanel(props) {
+  var call = props.call
+
+  var viewState = useState({ loading: true, error: null, data: null })
+  var view = viewState[0]
+  var setView = viewState[1]
+
+  var formState = useState(null)
+  var form = formState[0]
+  var setForm = formState[1]
+
+  var needleState = useState('')
+  var needle = needleState[0]
+  var setNeedle = needleState[1]
+
+  var providerFilterState = useState('全部')
+  var providerFilter = providerFilterState[0]
+  var setProviderFilter = providerFilterState[1]
+
+  var noticeState = useState(null)
+  var notice = noticeState[0]
+  var setNotice = noticeState[1]
+
+  var toastState = useState(null)
+  var toast = toastState[0]
+  var setToast = toastState[1]
+
+  var reload = function () {
+    setView(function (prev) { return Object.assign({}, prev, { loading: true, error: null }) })
+    call('subagentAdmin/list', {}).then(function (raw) {
+      var result = unwrap(raw)
+      setView({ loading: false, error: null, data: result })
+    }).catch(function (error) {
+      setView({ loading: false, error: String((error && error.message) || error), data: null })
+    })
+  }
+  useEffect(reload, [])
+
+  useEffect(function () {
+    if (!toast) return undefined
+    var timer = setTimeout(function () { setToast(null) }, 4200)
+    return function () { clearTimeout(timer) }
+  }, [toast])
+
+  var data = view.data
+  var entries = (data && data.entries) || []
+  var meta = (data && data.meta) || { tools: [], providers: [], llmProviders: [], llmModels: {} }
+  var candidateNames = meta.tools.map(function (tool) { return tool.name })
+  var providerMeta = {}
+  meta.providers.forEach(function (provider) { providerMeta[provider.name] = provider })
+  var llmProviders = meta.llmProviders || []
+  var llmModels = meta.llmModels || {}
+
+  var filtered = entries.filter(function (entry) {
+    var config = entry.config || {}
+    if (providerFilter !== '全部' && config.provider !== providerFilter) return false
+    if (needle === '') return true
+    var haystack = [entry.id, config.toolName, config.provider, config.persona, config.agentOptions && config.agentOptions.model]
+      .filter(Boolean).join(' ').toLowerCase()
+    return haystack.indexOf(needle.toLowerCase()) !== -1
+  })
+
+  var openCreate = function () {
+    setNotice(null)
+    setForm({ draft: emptyDraft(), editing: false, saving: false, error: null })
+  }
+  var openEdit = function (entry) {
+    setNotice(null)
+    setForm({ draft: draftFromEntry(entry), editing: true, saving: false, error: null })
+  }
+  var closeForm = function () { setForm(null) }
+
+  var saveForm = function () {
+    if (!form || form.saving) return
+    var otherToolNames = entries
+      .filter(function (entry) { return !form.editing || entry.id !== form.draft.id })
+      .map(function (entry) { return (entry.config || {}).toolName })
+      .filter(Boolean)
+    var clientError = validateDraft(form.draft, !form.editing, otherToolNames, providerMeta, candidateNames)
+    if (clientError) {
+      setForm(Object.assign({}, form, { error: clientError }))
+      return
+    }
+    var saving = Object.assign({}, form, { saving: true, error: null })
+    setForm(saving)
+    var payload = draftToPayload(saving.draft)
+    call('subagentAdmin/upsert', { entry: payload }).then(function (raw) {
+      var result = unwrap(raw)
+      setView(function (prev) { return Object.assign({}, prev, { data: result, loading: false }) })
+      setForm(null)
+      setNotice(result.warnings && result.warnings.length > 0 ? result.warnings : null)
+    }).catch(function (error) {
+      var message = String((error && error.message) || error)
+      setForm(Object.assign({}, saving, { saving: false, error: message }))
+      setToast('保存失败：' + message)
+    })
+  }
+
+  var removeEntry = function (entry) {
+    call('subagentAdmin/remove', { id: entry.id }).then(function (raw) {
+      var result = unwrap(raw)
+      setView(function (prev) { return Object.assign({}, prev, { data: result, loading: false }) })
+      setNotice(null)
+    }).catch(function (error) {
+      setToast('删除失败：' + String((error && error.message) || error))
+    })
+  }
+
+  var patchDraft = function (patch) {
+    setForm(function (prev) {
+      return Object.assign({}, prev, { draft: Object.assign({}, prev.draft, patch) })
+    })
+  }
+
+  var children = []
+
+  // Main toolbar: search + primary actions. Provider filters live on their own
+  // row below so a growing backend list never squeezes the search box.
+  children.push(createElement('div', { className: 'toolbar', key: 'toolbar' },
+    createElement('div', { className: 'search-wrap', key: 'search' },
+      createElement('span', { className: 'search-icon' }, '🔍'),
+      createElement('input', {
+        className: 'input',
+        placeholder: '搜索子智能体（名称/ID/后端/提示词/模型）...',
+        value: needle,
+        onChange: function (event) { setNeedle(event.target.value) },
+      })
+    ),
+    createElement('button', { type: 'button', className: 'btn sm primary', key: 'create', onClick: openCreate }, '＋ 新建子智能体'),
+    createElement('button', { type: 'button', className: 'btn sm', key: 'refresh', onClick: reload, disabled: view.loading },
+      view.loading ? createElement(Spinner, { key: 'spin' }) : '↻', '刷新')
+  ))
+
+  if (meta.providers.length > 1) {
+    children.push(createElement('div', { className: 'filterbar', key: 'filterbar' },
+      createElement('span', { className: 'filter-label' }, '执行后端'),
+      createElement('button', {
+        type: 'button', key: 'pill-all',
+        className: 'btn sm' + (providerFilter === '全部' ? ' active' : ''),
+        onClick: function () { setProviderFilter('全部') },
+      }, '全部'),
+      meta.providers.map(function (provider) {
+        return createElement('button', {
+          type: 'button', key: 'pill-' + provider.name,
+          className: 'btn sm' + (providerFilter === provider.name ? ' active' : ''),
+          onClick: function () { setProviderFilter(providerFilter === provider.name ? '全部' : provider.name) },
+        }, provider.name)
+      })
+    ))
+  }
+
+  if (form) {
+    children.push(SubagentForm({
+      form: form,
+      meta: meta,
+      candidateNames: candidateNames,
+      providerMeta: providerMeta,
+      llmProviders: llmProviders,
+      llmModels: llmModels,
+      entries: entries,
+      onPatch: patchDraft,
+      onClose: closeForm,
+      onSave: saveForm,
+    }))
+  }
+
+  if (notice) {
+    children.push(createElement('div', { className: 'warn-strip', key: 'notice' },
+      notice.map(function (warning, index) {
+        return createElement('div', { key: index }, '⚠️ ', warning)
+      })
+    ))
+  }
+
+  if (!form) {
+    if (view.loading && entries.length === 0) {
+      children.push(createElement('div', { className: 'empty', key: 'loading' },
+        createElement('span', { className: 'big' }, '⏳'),
+        '正在加载子智能体配置…'))
+    } else if (view.error) {
+      children.push(createElement('div', { className: 'error-strip', key: 'error' }, '⚠️ 加载失败：', view.error))
+    } else if (filtered.length === 0) {
+      children.push(createElement('div', { className: 'empty', key: 'empty' },
+        createElement('span', { className: 'big' }, '🤖'),
+        entries.length === 0
+          ? '还没有受管子智能体。点击「＋ 新建子智能体」创建第一个：名称、提示词、工具约束、模型指定全部可配。'
+          : '没有匹配当前搜索/筛选的子智能体。'))
+    } else {
+      children.push(createElement('div', { className: 'list', key: 'cards' }, filtered.map(function (entry) {
+        return SubagentCard({
+          entry: entry,
+          onEdit: openEdit,
+          onRemove: removeEntry,
+        })
+      })))
+    }
+  }
+
+  children.push(createElement('div', { className: 'footer-note', key: 'note' },
+    '每张卡片对应 profile cordis.patch.yml 中一个 @deepseek-ai/dsh-tool-subagent 行；保存即写入该文件，由 Cordis HMR 热加载生效（无需重启），重启 dsh 后同样自动加载。首次修改前原文件自动备份为 cordis.patch.yml.bak-subagent-admin。'))
+
+  return createElement('div', null,
+    toast ? createElement('div', { className: 'toast' }, toast) : null,
+    children
+  )
+}
+
+function SubagentForm(props) {
+  var form = props.form
+  var draft = form.draft
+  var meta = props.meta
+  var candidateNames = props.candidateNames
+  var providerMeta = props.providerMeta
+  var llmProviders = props.llmProviders || []
+  var llmModels = props.llmModels || {}
+  var entries = props.entries
+  var onPatch = props.onPatch
+  var onClose = props.onClose
+  var onSave = props.onSave
+
+  var providerInfo = providerMeta[draft.provider]
+  var capabilityHint = providerInfo
+    ? '能力：' + [
+      providerInfo.capabilities.persona ? '✓ 提示词' : '✗ 提示词',
+      providerInfo.capabilities.toolFilter ? '✓ 工具约束' : '✗ 工具约束',
+      providerInfo.capabilities.depthLimit ? '✓ 深度上限' : '✗ 深度上限',
+      providerInfo.continuable ? '✓ 可持续会话' : '仅一次性',
+    ].join(' / ')
+    : ''
+  // Model picker options: the selected provider's catalog, else every model.
+  var modelOptions = draft.agentProvider && llmModels[draft.agentProvider]
+    ? llmModels[draft.agentProvider]
+    : [].concat.apply([], Object.keys(llmModels).map(function (k) { return llmModels[k] }))
+
+  return createElement('div', { className: 'form', key: 'form' },
+    createElement('div', { className: 'form-title' },
+      form.editing ? '✏️ 编辑子智能体' : '✨ 新建子智能体',
+      createElement('span', { style: { marginLeft: 'auto', display: 'flex', gap: '6px' } },
+        createElement('button', { type: 'button', className: 'btn sm', onClick: onClose, disabled: form.saving }, '取消'),
+        createElement('button', { type: 'button', className: 'btn sm primary', onClick: onSave, disabled: form.saving },
+          form.saving ? createElement(Spinner, { key: 'spin' }) : null,
+          '保存')
+      )
+    ),
+    form.error ? createElement('div', { className: 'error-strip' }, '⚠️ ', form.error) : null,
+    createElement('div', { className: 'form-grid' },
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, '实例 ID'),
+        createElement('input', {
+          className: 'input', value: draft.id, disabled: form.editing || form.saving,
+          placeholder: '如 researcher、code-reviewer',
+          onChange: function (event) { onPatch({ id: event.target.value }) },
+        }),
+        createElement('span', { className: 'field-hint' }, '补丁行标识，创建后不可改；持久化在 profile 的 cordis.patch.yml')
+      ),
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, '子智能体名称（模型可见工具名）'),
+        createElement('input', {
+          className: 'input', value: draft.toolName, disabled: form.saving,
+          placeholder: '如 web_researcher（模型用它发起委托）',
+          onChange: function (event) { onPatch({ toolName: event.target.value }) },
+        }),
+        createElement('span', { className: 'field-hint' }, '不能用保留名 subagent / subagent_fork / run_code，且各实例间唯一')
+      ),
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, '执行后端（provider）'),
+        createElement('select', {
+          className: 'input', value: draft.provider, disabled: form.saving,
+          onChange: function (event) { onPatch({ provider: event.target.value }) },
+        },
+          meta.providers.map(function (provider) {
+            return createElement('option', { key: provider.name, value: provider.name }, provider.name)
+          })
+        ),
+        createElement('span', { className: 'field-hint' }, capabilityHint)
+      ),
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, '后台模式'),
+        createElement('select', {
+          className: 'input', value: draft.backgroundMode, disabled: form.saving,
+          onChange: function (event) { onPatch({ backgroundMode: event.target.value }) },
+        },
+          createElement('option', { value: 'one-shot' }, 'one-shot（一次性任务）'),
+          createElement('option', { value: 'continuable' }, 'continuable（可持续会话）')
+        ),
+        createElement('label', { className: 'checkbox-row' },
+          createElement('input', {
+            type: 'checkbox', checked: draft.enableRunInBackground === true, disabled: form.saving,
+            onChange: function (event) { onPatch({ enableRunInBackground: event.target.checked }) },
+          }),
+          '暴露 run_in_background 参数'
+        )
+      ),
+      createElement('div', { className: 'field full' },
+        createElement('span', { className: 'field-label' }, '提示词（persona，留空继承部署默认）'),
+        createElement('textarea', {
+          className: 'input', value: draft.persona, rows: 4, disabled: form.saving,
+          placeholder: '该子智能体的人设/职责说明…支持 {{model}} 与 {{cwd}} 模板变量',
+          onChange: function (event) { onPatch({ persona: event.target.value }) },
+        }),
+        createElement('span', { className: 'field-hint' }, '保存后影子覆盖（shadow）部署级 persona，仅对该子智能体生效')
+      ),
+      createElement('div', { className: 'fieldset full' },
+        createElement('span', { className: 'fieldset-legend' }, '工具约束（toolFilter，留空则不限制；可选项来自 harness 已注册工具与内置工具名录，也可手填未知名）'),
+        createElement('div', { className: 'field' },
+          createElement('span', { className: 'field-label' }, '仅允许（allow 白名单）'),
+          createElement(Picker, {
+            multi: true, kind: 'allow', allowCustom: true,
+            values: draft.allow, options: candidateNames.map(function (n) { return { value: n, label: n } }),
+            placeholder: '输入或选择工具名，如 read / glob / grep', ariaLabel: '仅允许工具',
+            onChange: function (next) { onPatch({ allow: next }) },
+          }),
+          createElement('span', { className: 'field-hint' }, '设置后子智能体只保留名单内工具，其余从提示词移除且拒绝执行')
+        ),
+        createElement('div', { className: 'field' },
+          createElement('span', { className: 'field-label' }, '禁止（deny 黑名单）'),
+          createElement(Picker, {
+            multi: true, kind: 'deny', allowCustom: true,
+            values: draft.deny, options: candidateNames.map(function (n) { return { value: n, label: n } }),
+            placeholder: '输入或选择工具名，如 bash / pwsh', ariaLabel: '禁止工具',
+            onChange: function (next) { onPatch({ deny: next }) },
+          }),
+          createElement('span', { className: 'field-hint' }, '名单内工具对子智能体不可见；未知工具名保存时会被拒绝')
+        )
+      ),
+      createElement('div', { className: 'fieldset full' },
+        createElement('span', { className: 'fieldset-legend' }, '模型指定（agentOptions，留空字段继承父代理当前路由）'),
+        createElement('div', { className: 'form-grid' },
+          createElement('div', { className: 'field' },
+            createElement('span', { className: 'field-label' }, 'LLM provider'),
+            createElement(Picker, {
+              multi: false, allowCustom: true,
+              values: draft.agentProvider ? [draft.agentProvider] : [],
+              options: llmProviders.map(function (p) { return { value: p.id, label: p.name } }),
+              placeholder: '留空继承，如 optirouter / deepseek-official', ariaLabel: 'LLM provider',
+              onChange: function (next) { onPatch({ agentProvider: next[0] || '' }) },
+            })
+          ),
+          createElement('div', { className: 'field' },
+            createElement('span', { className: 'field-label' }, '模型标识（model）'),
+            createElement(Picker, {
+              multi: false, allowCustom: true,
+              values: draft.agentModel ? [draft.agentModel] : [],
+              options: modelOptions.map(function (m) { return { value: m.id, label: m.name } }),
+              placeholder: '留空继承，如 auto', ariaLabel: '模型标识',
+              onChange: function (next) { onPatch({ agentModel: next[0] || '' }) },
+            }),
+            createElement('span', { className: 'field-hint' }, '从已配置模型中选择，或手填模型 id（需在该 provider 路由上注册）')
+          ),
+          createElement('div', { className: 'field' },
+            createElement('span', { className: 'field-label' }, 'maxTokens（单次回复上限）'),
+            createElement('input', {
+              className: 'input', value: draft.maxTokens, disabled: form.saving,
+              placeholder: '留空使用默认', inputMode: 'numeric',
+              onChange: function (event) { onPatch({ maxTokens: event.target.value.replace(/[^0-9]/g, '') }) },
+            })
+          ),
+          createElement('div', { className: 'field' },
+            createElement('span', { className: 'field-label' }, '最大委托深度（maxDepth，0 = 禁止再委托）'),
+            createElement('div', { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
+              createElement('input', {
+                className: 'input', value: draft.maxDepthManaged ? '' : draft.maxDepth,
+                disabled: form.saving || draft.maxDepthManaged,
+                placeholder: '3（默认）', inputMode: 'numeric',
+                onChange: function (event) { onPatch({ maxDepth: event.target.value.replace(/[^0-9]/g, '') }) },
+              }),
+              createElement('label', { className: 'checkbox-row', style: { flex: 'none' } },
+                createElement('input', {
+                  type: 'checkbox', checked: draft.maxDepthManaged, disabled: form.saving,
+                  onChange: function (event) { onPatch({ maxDepthManaged: event.target.checked }) },
+                }),
+                '交由后端管理'
+              )
+            )
+          )
+        )
+      )
+    )
+  )
+}
+
+function SubagentCard(props) {
+  var entry = props.entry
+  var config = entry.config || {}
+  var live = entry.live || {}
+  var liveTag = live.providerPresent === false
+    ? createElement('span', { className: 'tag dead' }, '❌ 后端未注册')
+    : live.toolRegistered
+      ? createElement('span', { className: 'tag live' }, '✅ 已挂载')
+      : createElement('span', { className: 'tag warn' }, '⚠️ 工具未挂载')
+  var hasModelRoute = config.agentOptions && (config.agentOptions.model || config.agentOptions.provider)
+  var modelLabel = hasModelRoute
+    ? ((config.agentOptions.model || '') + (config.agentOptions.provider ? (config.agentOptions.model ? ' @ ' : '') + config.agentOptions.provider : ''))
+    : '继承父代理'
+
+  var children = [
+    createElement('div', { className: 'card-header', key: 'head' },
+      createElement('span', { className: 'card-title' }, '🤖 ', config.toolName || entry.id),
+      createElement('span', { className: 'card-actions' },
+        createElement('button', { type: 'button', className: 'btn sm', onClick: function () { props.onEdit(entry) } }, '编辑'),
+        createElement(ConfirmButton, {
+          label: '删除', confirmLabel: '确认删除？',
+          onConfirm: function () { props.onRemove(entry) },
+        })
+      )
+    ),
+    createElement('div', { className: 'card-sub', key: 'tags' },
+      createElement('span', { className: 'tag provider' }, '⚙ ' + (config.provider || '?')),
+      createElement('span', { className: 'tag model' }, '🧠 ' + modelLabel),
+      createElement('span', { className: 'tag' }, config.backgroundMode === 'continuable' ? '可持续' : '一次性'),
+      typeof config.maxDepth === 'number' ? createElement('span', { className: 'tag' }, '深度≤' + config.maxDepth) : null,
+      config.maxDepth === 'provider-managed' ? createElement('span', { className: 'tag' }, '深度=后端管理') : null,
+      liveTag
+    ),
+  ]
+
+  if (config.persona) {
+    children.push(createElement('div', { className: 'persona-box', key: 'persona' },
+      createElement('span', null, '📝'),
+      createElement('span', { className: 'persona-text' }, config.persona)
+    ))
+  }
+
+  var chips = []
+  if (config.toolFilter && config.toolFilter.allow && config.toolFilter.allow.length > 0) {
+    chips.push(createElement('span', { key: 'allow-label', style: { fontSize: '10px', color: '#047857', fontWeight: 600 } }, '仅允许'))
+    config.toolFilter.allow.forEach(function (name) {
+      chips.push(createElement('span', { key: 'a-' + name, className: 'chip allow' }, name))
+    })
+  }
+  if (config.toolFilter && config.toolFilter.deny && config.toolFilter.deny.length > 0) {
+    chips.push(createElement('span', { key: 'deny-label', style: { fontSize: '10px', color: '#b91c1c', fontWeight: 600 } }, '禁止'))
+    config.toolFilter.deny.forEach(function (name) {
+      chips.push(createElement('span', { key: 'd-' + name, className: 'chip deny' }, name))
+    })
+  }
+  if (chips.length > 0) {
+    children.push(createElement('div', { className: 'chips', key: 'chips' }, chips))
+  }
+
+  children.push(createElement('div', { className: 'card-sub', key: 'meta' },
+    createElement('span', { className: 'tag', title: entry.id }, 'ID: ' + entry.id),
+    config.toolFilter === undefined ? createElement('span', { className: 'tag' }, '工具不限制') : null
+  ))
+
+  return createElement('div', { className: 'card', key: entry.id }, children)
+}
+
+/* ========================================================================== */
+/*                               History panel                                */
+/* ========================================================================== */
+
+function HistoryPanel(props) {
+  var call = props.call
+  var state = useState({ loading: true, error: null, data: null })
+  var view = state[0]
+  var setView = state[1]
+
+  var reload = function () {
+    setView(function (prev) { return Object.assign({}, prev, { loading: true, error: null }) })
+    call('subagentAdmin/history', { limit: 200 }).then(function (raw) {
+      setView({ loading: false, error: null, data: unwrap(raw) })
+    }).catch(function (error) {
+      setView({ loading: false, error: String((error && error.message) || error), data: null })
+    })
+  }
+  useEffect(reload, [])
+
+  var actionLabels = { create: '新建', update: '更新', delete: '删除', corrupt: '损坏记录', mount: '挂载', unmount: '卸载', 'cli-update': 'CLI 配置' }
+  var children = [
+    createElement('div', { className: 'toolbar', key: 'bar' },
+      createElement('span', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary, #666)', flex: 1 } },
+        '配置台账：每次新建/更新/删除都追加一条记录（JSONL），文件路径见下方。'),
+      createElement('button', { type: 'button', className: 'btn sm', onClick: reload, disabled: view.loading },
+        view.loading ? createElement(Spinner, { key: 'spin' }) : '↻', '刷新')
+    ),
+  ]
+
+  if (view.error) {
+    children.push(createElement('div', { className: 'error-strip', key: 'err' }, '⚠️ 加载失败：', view.error))
+  } else if (view.data && view.data.records && view.data.records.length > 0) {
+    children.push(createElement('div', { className: 'footer-note', key: 'path' }, '台账文件：' + view.data.path))
+    children.push(createElement('div', { className: 'list', key: 'rows' }, view.data.records.map(function (record, index) {
+      return createElement('div', { className: 'history-row', key: index },
+        createElement('div', { className: 'history-head' },
+          createElement('span', {
+            className: 'tag ' + (record.action === 'delete' || record.action === 'unmount' ? 'dead'
+              : record.action === 'create' || record.action === 'mount' ? 'live' : 'warn'),
+          }, actionLabels[record.action] || record.action),
+          createElement('span', { style: { fontWeight: 600 } }, record.id || '—'),
+          record.toolName ? createElement('span', { className: 'tag' }, record.toolName) : null,
+          createElement('span', { className: 'history-time' }, record.at || '')
+        ),
+        record.entry ? createElement('div', { className: 'history-detail' }, JSON.stringify(record.entry.config || record.entry)) : null
+      )
+    })))
+  } else if (!view.loading) {
+    children.push(createElement('div', { className: 'empty', key: 'empty' },
+      createElement('span', { className: 'big' }, '📜'),
+      '还没有变更记录。每次新建、编辑或删除子智能体后都会在这里留痕。'))
+  }
+
+  return createElement('div', null, children)
+}
+
+/* ========================================================================== */
+/*                                CLI backends                                */
+/* ========================================================================== */
+
+/** Draft shape for one CLI backend's editable config. */
+function cliDraftFromConfig(config) {
+  config = config || {}
+  return {
+    providerName: config.providerName !== undefined ? String(config.providerName) : '',
+    permissionMode: config.permissionMode !== undefined ? String(config.permissionMode) : '',
+    disposeGraceMs: config.disposeGraceMs !== undefined ? String(config.disposeGraceMs) : '3000',
+    envPairs: Object.keys(config.env || {}).map(function (key) {
+      return { key: key, value: String(config.env[key]) }
+    }),
+  }
+}
+
+/** Convert a draft back into the wire config object. */
+function cliConfigFromDraft(draft) {
+  var config = {
+    providerName: draft.providerName.trim(),
+    permissionMode: draft.permissionMode,
+    disposeGraceMs: Number(draft.disposeGraceMs.trim()),
+    env: {},
+  }
+  draft.envPairs.forEach(function (pair) {
+    var key = pair.key.trim()
+    if (key !== '') config.env[key] = pair.value
+  })
+  return config
+}
+
+/** Shared env key/value pair editor (used by every CLI backend card). */
+function EnvPairsEditor(props) {
+  var pairs = props.pairs || []
+  return createElement('div', { className: 'fieldset' },
+    createElement('span', { className: 'fieldset-legend' }, 'env（传给 CLI 子进程的额外环境变量）'),
+    pairs.map(function (pair, index) {
+      return createElement('div', { className: 'env-row', key: index },
+        createElement('input', {
+          className: 'input env-key', value: pair.key,
+          placeholder: '变量名（如 OPENAI_API_KEY）',
+          onChange: function (event) { props.onPatchPair(index, { key: event.target.value }) },
+        }),
+        createElement('input', {
+          className: 'input env-value', value: pair.value,
+          placeholder: '变量值',
+          onChange: function (event) { props.onPatchPair(index, { value: event.target.value }) },
+        }),
+        createElement('button', { type: 'button', className: 'btn sm', onClick: function () { props.onRemove(index) } }, '✕'),
+      )
+    }),
+    createElement('button', { type: 'button', className: 'btn sm', onClick: props.onAdd }, '＋ 添加变量'),
+  )
+}
+
+/** One CLI backend card: collapsible status header + config form + mount/save/unmount. */
+function CliBackendCard(props) {
+  var backend = props.backend
+  var draft = props.draft
+  var busy = props.busy === true
+  var expanded = props.expanded === true
+  var onPatch = props.onPatch
+  var onPatchEnvPair = props.onPatchEnvPair
+  var onAddEnvPair = props.onAddEnvPair
+  var onRemoveEnvPair = props.onRemoveEnvPair
+  var onToggle = props.onToggle
+  var onSave = props.onSave
+  var onUnmount = props.onUnmount
+
+  var packageOk = !!(backend.providerPackage && backend.providerPackage.ok)
+  var runner = backend.runner || { ok: false, version: null }
+  var cli = backend.cli || { ok: false, version: null }
+  var modeValue = backend.permissionModes.indexOf(draft.permissionMode) !== -1
+    ? draft.permissionMode
+    : backend.permissionModes[0]
+
+  var onToggle = props.onToggle
+  var onSave = props.onSave
+  var onInstall = props.onInstall
+  var onUnmount = props.onUnmount
+
+  var packageOk = !!(backend.providerPackage && backend.providerPackage.ok)
+  var runner = backend.runner || { ok: false, version: null }
+  var cli = backend.cli || { ok: false, version: null }
+  var missingPackages = backend.missing || []
+  var depsMissing = missingPackages.length > 0
+  var missingLabel = missingPackages.join(' + ')
+  var modeValue = backend.permissionModes.indexOf(draft.permissionMode) !== -1
+    ? draft.permissionMode
+    : backend.permissionModes[0]
+
+  return createElement('div', { className: 'card', key: backend.id },
+    createElement('div', { className: 'card-header' },
+      createElement('button', {
+        type: 'button', className: 'cli-toggle',
+        'aria-expanded': expanded,
+        'aria-label': expanded ? '收起明细' : '展开明细',
+        title: expanded ? '收起明细' : '展开明细',
+        onClick: onToggle,
+      }, expanded ? '▾' : '▸'),
+      createElement('span', { className: 'cli-title', onClick: onToggle }, '🔌 ' + backend.label),
+      createElement('span', { className: 'cli-tags' },
+        createElement('span', { className: 'tag ' + (backend.mounted ? 'live' : '') }, backend.mounted ? '已挂载' : '未挂载'),
+        createElement('span', { className: 'tag ' + (packageOk ? 'live' : 'dead') },
+          packageOk
+            ? 'provider 包' + (backend.providerPackage.version ? ' v' + backend.providerPackage.version : ' ✓')
+            : 'provider 包 ✗'),
+        createElement('span', { className: 'tag ' + (runner.ok ? 'live' : 'warn') },
+          runner.ok ? 'CLI 依赖 ✓' : 'CLI 依赖 ✗'),
+        createElement('span', { className: 'tag ' + (cli.ok ? 'model' : 'warn') },
+          cli.ok ? 'PATH ' + cli.version : 'PATH ✗ ' + backend.cliCommand),
+      ),
+      createElement('span', { style: { display: 'flex', gap: '5px', flex: 'none' } },
+        depsMissing
+          ? createElement('button', {
+            type: 'button', className: 'btn sm',
+            disabled: busy,
+            title: 'npm install -g 全局安装缺失包：' + missingLabel,
+            onClick: onInstall,
+          }, busy ? createElement(Spinner, { key: 'spin' }) : null, busy ? '安装中…' : '安装依赖包')
+          : null,
+        backend.mounted
+          ? createElement('button', { type: 'button', className: 'btn sm primary', disabled: busy, onClick: onSave },
+            busy ? createElement(Spinner, { key: 'spin' }) : null, '保存配置')
+          : packageOk
+            ? createElement('button', { type: 'button', className: 'btn sm primary', disabled: busy, onClick: onSave },
+              busy ? createElement(Spinner, { key: 'spin' }) : null, '挂载')
+            : null,
+        backend.mounted
+          ? createElement(ConfirmButton, { label: '卸载', confirmLabel: '确认卸载？', disabled: busy, onConfirm: onUnmount })
+          : null,
+      )
+    ),
+    expanded ? createElement('div', { className: 'cli-detail', key: 'detail' },
+    createElement('div', { className: 'form-grid' },
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, 'providerName（执行后端注册名）'),
+        createElement('input', {
+          className: 'input', value: draft.providerName,
+          placeholder: '如 codex / claude-code（子智能体表单的执行后端选项）',
+          onChange: function (event) { onPatch({ providerName: event.target.value }) },
+        }),
+      ),
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, 'permissionMode（CLI 权限模式）'),
+        createElement('select', {
+          className: 'input', value: modeValue,
+          onChange: function (event) { onPatch({ permissionMode: event.target.value }) },
+        }, backend.permissionModes.map(function (mode) {
+          return createElement('option', { key: mode, value: mode }, mode)
+        })),
+        createElement('span', { className: 'field-hint' }, '枚举来自该 provider 包的 Config schema')
+      ),
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, 'disposeGraceMs（进程树终止宽限，毫秒）'),
+        createElement('input', {
+          className: 'input', value: draft.disposeGraceMs,
+          placeholder: '3000',
+          onChange: function (event) { onPatch({ disposeGraceMs: event.target.value }) },
+        }),
+      ),
+    ),
+    createElement(EnvPairsEditor, {
+      pairs: draft.envPairs,
+      onPatchPair: onPatchEnvPair,
+      onAdd: onAddEnvPair,
+      onRemove: onRemoveEnvPair,
+    }),
+    ) : null,
+  )
+}
+
+/** Draft shape for one generic external-CLI backend's editable config. */
+function cliDraftFromGeneric(backend) {
+  backend = backend || {}
+  return {
+    command: backend.command !== undefined ? String(backend.command) : '',
+    argsText: Array.isArray(backend.args) ? backend.args.join(' ') : '{prompt}',
+    providerName: backend.providerName !== undefined ? String(backend.providerName) : '',
+    disposeGraceMs: backend.disposeGraceMs !== undefined ? String(backend.disposeGraceMs) : '3000',
+    envPairs: Object.keys(backend.env || {}).map(function (key) {
+      return { key: key, value: String(backend.env[key]) }
+    }),
+  }
+}
+
+/** Convert a generic draft into the wire config object (args split on whitespace). */
+function cliConfigFromGenericDraft(draft) {
+  var config = {
+    command: draft.command.trim(),
+    args: draft.argsText.trim().split(/\s+/).filter(Boolean),
+    providerName: draft.providerName.trim(),
+    disposeGraceMs: Number(draft.disposeGraceMs.trim()),
+    env: {},
+  }
+  draft.envPairs.forEach(function (pair) {
+    var key = pair.key.trim()
+    if (key !== '') config.env[key] = pair.value
+  })
+  return config
+}
+
+/** One generic external-CLI backend card (served by this plugin's command provider). */
+function GenericCliCard(props) {
+  var backend = props.backend
+  var draft = props.draft
+  var busy = props.busy === true
+  var expanded = props.expanded === true
+  var onToggle = props.onToggle
+  var onPatch = props.onPatch
+  var onPatchEnvPair = props.onPatchEnvPair
+  var onAddEnvPair = props.onAddEnvPair
+  var onRemoveEnvPair = props.onRemoveEnvPair
+  var onSave = props.onSave
+  var onUnmount = props.onUnmount
+
+  var cli = backend.cli || { ok: false, version: null }
+
+  return createElement('div', { className: 'card', key: backend.id },
+    createElement('div', { className: 'card-header' },
+      createElement('button', {
+        type: 'button', className: 'cli-toggle',
+        'aria-expanded': expanded,
+        'aria-label': expanded ? '收起明细' : '展开明细',
+        title: expanded ? '收起明细' : '展开明细',
+        onClick: onToggle,
+      }, expanded ? '▾' : '▸'),
+      createElement('span', { className: 'cli-title', onClick: onToggle }, '⌨️ ' + backend.command),
+      createElement('span', { className: 'cli-tags' },
+        createElement('span', { className: 'tag live' }, '已挂载'),
+        createElement('span', { className: 'tag ' + (backend.providerPresent ? 'live' : 'warn') },
+          backend.providerPresent ? '后端在线 ✓' : '后端未注册'),
+        createElement('span', { className: 'tag ' + (cli.ok ? 'model' : 'warn') },
+          cli.ok ? 'PATH ' + cli.version : 'PATH ✗ ' + backend.command),
+      ),
+      createElement('span', { style: { display: 'flex', gap: '5px', flex: 'none' } },
+        createElement('button', { type: 'button', className: 'btn sm primary', disabled: busy, onClick: onSave },
+          busy ? createElement(Spinner, { key: 'spin' }) : null, '保存配置'),
+        createElement(ConfirmButton, { label: '卸载', confirmLabel: '确认卸载？', disabled: busy, onConfirm: onUnmount }),
+      )
+    ),
+    expanded ? createElement('div', { className: 'cli-detail', key: 'detail' },
+    createElement('div', { className: 'form-grid' },
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, 'command（PATH 命令名或绝对路径）'),
+        createElement('input', {
+          className: 'input', value: draft.command,
+          placeholder: '如 gemini / qwen / C:\\tools\\aider.exe',
+          onChange: function (event) { onPatch({ command: event.target.value }) },
+        }),
+      ),
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, 'providerName（执行后端注册名）'),
+        createElement('input', {
+          className: 'input', value: draft.providerName,
+          placeholder: '如 cli-gemini（子智能体表单的执行后端选项）',
+          onChange: function (event) { onPatch({ providerName: event.target.value }) },
+        }),
+      ),
+      createElement('div', { className: 'field full' },
+        createElement('span', { className: 'field-label' }, 'args（空格分隔，{prompt} 占位提示词）'),
+        createElement('input', {
+          className: 'input', value: draft.argsText,
+          placeholder: '-p {prompt}',
+          onChange: function (event) { onPatch({ argsText: event.target.value }) },
+        }),
+        createElement('span', { className: 'field-hint' }, 'one-shot 纯文本：stdout 即委托结果，非零退出记为失败；prompt 经 {prompt} 传入'),
+      ),
+      createElement('div', { className: 'field' },
+        createElement('span', { className: 'field-label' }, 'disposeGraceMs（进程树终止宽限，毫秒）'),
+        createElement('input', {
+          className: 'input', value: draft.disposeGraceMs,
+          placeholder: '3000',
+          onChange: function (event) { onPatch({ disposeGraceMs: event.target.value }) },
+        }),
+      ),
+    ),
+    createElement(EnvPairsEditor, {
+      pairs: draft.envPairs,
+      onPatchPair: onPatchEnvPair,
+      onAdd: onAddEnvPair,
+      onRemove: onRemoveEnvPair,
+    }),
+    ) : null,
+  )
+}
+
+function CliPanel(props) {
+  var call = props.call
+
+  var viewState = useState({ loading: true, error: null, data: null })
+  var view = viewState[0]
+  var setView = viewState[1]
+
+  var draftsState = useState({})
+  var drafts = draftsState[0]
+  var setDrafts = draftsState[1]
+
+  var busyState = useState({})
+  var busy = busyState[0]
+  var setBusy = busyState[1]
+
+  var customCommandState = useState('')
+  var customCommand = customCommandState[0]
+  var setCustomCommand = customCommandState[1]
+
+  var expandedState = useState({})
+  var expanded = expandedState[0]
+  var setExpanded = expandedState[1]
+
+  var toggleExpanded = function (backendId) {
+    setExpanded(function (prev) {
+      var next = Object.assign({}, prev)
+      next[backendId] = prev[backendId] !== true
+      return next
+    })
+  }
+
+  var toastState = useState(null)
+  var toast = toastState[0]
+  var setToast = toastState[1]
+
+  useEffect(function () {
+    if (!toast) return undefined
+    var timer = setTimeout(function () { setToast(null) }, 4200)
+    return function () { clearTimeout(timer) }
+  }, [toast])
+
+  /** Adopt a detection payload: view data + reset drafts to the served configs. */
+  var absorb = function (result) {
+    setView({ loading: false, error: null, data: result })
+    var next = {}
+    ;(result.backends || []).forEach(function (backend) {
+      next[backend.id] = backend.kind === 'generic'
+        ? cliDraftFromGeneric(backend)
+        : cliDraftFromConfig(backend.config)
+    })
+    setDrafts(next)
+    setBusy({})
+  }
+
+  var reload = function () {
+    setView(function (prev) { return Object.assign({}, prev, { loading: true, error: null }) })
+    call('subagentAdmin/cliList', {}).then(function (raw) {
+      absorb(unwrap(raw))
+    }).catch(function (error) {
+      setView({ loading: false, error: String((error && error.message) || error), data: null })
+    })
+  }
+  useEffect(reload, [])
+
+  var patchDraft = function (backendId, patch) {
+    setDrafts(function (prev) {
+      var current = prev[backendId] || cliDraftFromConfig(null)
+      var next = Object.assign({}, prev)
+      next[backendId] = Object.assign({}, current, patch)
+      return next
+    })
+  }
+
+  // Env-pair edits derive from the latest queued state (functional update), so
+  // rapid consecutive edits can never overwrite each other via stale drafts.
+  var patchEnvPair = function (backendId, index, patch) {
+    setDrafts(function (prev) {
+      var current = prev[backendId] || cliDraftFromConfig(null)
+      var pairs = (current.envPairs || []).map(function (pair, i) {
+        return i === index ? Object.assign({}, pair, patch) : pair
+      })
+      var next = Object.assign({}, prev)
+      next[backendId] = Object.assign({}, current, { envPairs: pairs })
+      return next
+    })
+  }
+  var addEnvPair = function (backendId) {
+    setDrafts(function (prev) {
+      var current = prev[backendId] || cliDraftFromConfig(null)
+      var next = Object.assign({}, prev)
+      next[backendId] = Object.assign({}, current, { envPairs: (current.envPairs || []).concat([{ key: '', value: '' }]) })
+      return next
+    })
+  }
+  var removeEnvPair = function (backendId, index) {
+    setDrafts(function (prev) {
+      var current = prev[backendId] || cliDraftFromConfig(null)
+      var next = Object.assign({}, prev)
+      next[backendId] = Object.assign({}, current, { envPairs: (current.envPairs || []).filter(function (_, i) { return i !== index }) })
+      return next
+    })
+  }
+
+  var runUpsert = function (backend) {
+    if (busy[backend.id]) return
+    var draft = drafts[backend.id]
+    if (!draft) return
+    var payload
+    if (backend.kind === 'generic') {
+      if (!/^[^\s]+$/.test(draft.command.trim())) {
+        setToast('command 不能包含空格（PATH 命令名或绝对路径）')
+        return
+      }
+      var args = draft.argsText.trim().split(/\s+/).filter(Boolean)
+      if (args.length === 0 || args.length > 20 || !args.every(function (arg) { return arg.length <= 256 })) {
+        setToast('args 必须是 1-20 个非空片段（单条 ≤ 256 字符），用 {prompt} 占位提示词')
+        return
+      }
+      if (args.indexOf('{prompt}') === -1) {
+        setToast('args 必须包含 {prompt} 占位符（提示词将替换该占位符传入 CLI）')
+        return
+      }
+      if (!/^[a-z][a-z0-9_-]{0,47}$/.test(draft.providerName.trim())) {
+        setToast('providerName 必须是 1-48 位小写字母/数字/下划线/中划线且字母开头')
+        return
+      }
+      if (!/^\d+$/.test(draft.disposeGraceMs.trim())) {
+        setToast('disposeGraceMs 必须是非负整数（毫秒）')
+        return
+      }
+      payload = { kind: 'generic', backendId: backend.id, config: cliConfigFromGenericDraft(draft) }
+    } else {
+      if (!/^[a-z][a-z0-9_-]{0,47}$/.test(draft.providerName.trim())) {
+        setToast('providerName 必须是 1-48 位小写字母/数字/下划线/中划线且字母开头')
+        return
+      }
+      if (!/^\d+$/.test(draft.disposeGraceMs.trim())) {
+        setToast('disposeGraceMs 必须是非负整数（毫秒）')
+        return
+      }
+      payload = { backendId: backend.id, config: cliConfigFromDraft(draft) }
+    }
+    var busyPatch = {}
+    busyPatch[backend.id] = true
+    setBusy(Object.assign({}, busy, busyPatch))
+    call('subagentAdmin/cliUpsert', { payload: payload }).then(function (raw) {
+      absorb(unwrap(raw))
+    }).catch(function (error) {
+      setBusy({})
+      setToast('保存失败：' + String((error && error.message) || error))
+    })
+  }
+
+  var runUnmount = function (backend) {
+    if (busy[backend.id]) return
+    var busyPatch = {}
+    busyPatch[backend.id] = true
+    setBusy(Object.assign({}, busy, busyPatch))
+    // Generic backends are recognized server-side by their "cli-" id prefix.
+    call('subagentAdmin/cliRemove', { id: backend.id }).then(function (raw) {
+      absorb(unwrap(raw))
+    }).catch(function (error) {
+      setBusy({})
+      setToast('卸载失败：' + String((error && error.message) || error))
+    })
+  }
+
+  var runInstall = function (backend) {
+    if (busy[backend.id]) return
+    var busyPatch = {}
+    busyPatch[backend.id] = true
+    setBusy(Object.assign({}, busy, busyPatch))
+    call('subagentAdmin/cliInstall', { backendId: backend.id }).then(function (raw) {
+      var result = unwrap(raw)
+      absorb(result)
+      setToast((result && result.output ? result.output : '依赖包安装完成') + '，已重新检测')
+    }).catch(function (error) {
+      var message = String((error && error.message) || error)
+      if (message.indexOf('404') !== -1) {
+        message += '（宿主端未注册该接口：请重启 dsh 加载最新插件后重试）'
+      }
+      setBusy({})
+      setToast('安装失败：' + message)
+    })
+  }
+
+  var runGenericMount = function (command) {
+    if (!/^[^\s]+$/.test(command)) {
+      setToast('command 不能包含空格（PATH 命令名或绝对路径）')
+      return
+    }
+    var busyPatch = { __scan__: true }
+    setBusy(Object.assign({}, busy, busyPatch))
+    call('subagentAdmin/cliUpsert', { payload: { kind: 'generic', config: { command: command } } }).then(function (raw) {
+      absorb(unwrap(raw))
+      setCustomCommand('')
+    }).catch(function (error) {
+      setBusy({})
+      setToast('挂载失败：' + String((error && error.message) || error))
+    })
+  }
+
+  var children = []
+
+  // 本机 CLI card sits on top: scan list + custom command + refresh; the
+  // builtin codex/claude-code cards and mounted generic cards follow below.
+  var backends = (view.data && view.data.backends) || []
+  var others = (view.data && view.data.others) || []
+  var busyAny = Object.keys(busy).some(function (key) { return busy[key] === true })
+  var genericBackends = backends.filter(function (backend) { return backend.kind === 'generic' })
+
+  children.push(createElement('div', { className: 'card', key: 'local-cli' },
+    createElement('div', { className: 'card-header' },
+      createElement('span', { className: 'card-title' }, '🛰️ 本机 CLI'),
+      createElement('span', { className: 'tag' }, '通用命令行后端 · one-shot 纯文本'),
+      createElement('span', { style: { marginLeft: 'auto', display: 'flex' } },
+        createElement('button', { type: 'button', className: 'btn sm', onClick: reload, disabled: view.loading },
+          view.loading ? createElement(Spinner, { key: 'spin' }) : '⟳', '重新检测')
+      )
+    ),
+    createElement('div', { className: 'cli-scan-hint' },
+      '检测并挂载 harness 内置的外部 CLI 后端（codex / claude-code）与本机其他命令行工具；挂载后即可在「子智能体」表单的执行后端下拉中选用。'),
+    createElement('div', { className: 'cli-scan-list' },
+      createElement('div', { className: 'cli-scan-row', key: 'custom' },
+        createElement('input', {
+          className: 'input', value: customCommand,
+          placeholder: '添加自定义 CLI：输入命令名或绝对路径，如 aider（挂载为 one-shot 后端）',
+          onChange: function (event) { setCustomCommand(event.target.value) },
+        }),
+        createElement('button', {
+          type: 'button', className: 'btn sm',
+          disabled: busyAny || customCommand.trim() === '',
+          onClick: function () { runGenericMount(customCommand.trim()) },
+        }, '挂载'),
+      ),
+      (function () {
+        var mountedCommands = new Set(genericBackends.map(function (backend) {
+          return backend.command.toLowerCase()
+        }))
+        return others
+          .filter(function (item) { return !!(item.cli && item.cli.ok) })
+          .filter(function (item) { return !mountedCommands.has(item.name.toLowerCase()) })
+          .map(function (item) {
+            return createElement('div', { className: 'cli-scan-card', key: item.name },
+              createElement('span', { className: 'cli-title' }, '⌨️ ' + item.name),
+              createElement('span', { className: 'cli-tags' },
+                createElement('span', { className: 'tag' }, '未挂载'),
+                createElement('span', { className: 'tag live' }, 'PATH ' + item.cli.version),
+              ),
+              createElement('button', {
+                type: 'button', className: 'btn sm', disabled: busyAny,
+                onClick: function () { runGenericMount(item.name) },
+              }, '挂载'),
+            )
+          })
+      })(),
+      others.length > 0 && others.every(function (item) { return !(item.cli && item.cli.ok) })
+        ? createElement('span', { className: 'tag', key: 'none' }, '未检测到其他 agent CLI')
+        : null,
+    ),
+  ))
+
+  if (view.error) {
+    children.push(createElement('div', { className: 'error-strip', key: 'error' }, '⚠️ 加载失败：', view.error))
+  } else {
+    genericBackends.forEach(function (backend) {
+      children.push(GenericCliCard({
+        backend: backend,
+        draft: drafts[backend.id] || cliDraftFromGeneric(backend),
+        busy: busy[backend.id] === true,
+        expanded: expanded[backend.id] === true,
+        onToggle: function () { toggleExpanded(backend.id) },
+        onPatch: function (patch) { patchDraft(backend.id, patch) },
+        onPatchEnvPair: function (index, patch) { patchEnvPair(backend.id, index, patch) },
+        onAddEnvPair: function () { addEnvPair(backend.id) },
+        onRemoveEnvPair: function (index) { removeEnvPair(backend.id, index) },
+        onSave: function () { runUpsert(backend) },
+        onUnmount: function () { runUnmount(backend) },
+      }))
+    })
+    backends.filter(function (backend) { return backend.kind !== 'generic' }).forEach(function (backend) {
+      children.push(CliBackendCard({
+        backend: backend,
+        draft: drafts[backend.id] || cliDraftFromConfig(backend.config),
+        busy: busy[backend.id] === true,
+        expanded: expanded[backend.id] === true,
+        onToggle: function () { toggleExpanded(backend.id) },
+        onPatch: function (patch) { patchDraft(backend.id, patch) },
+        onPatchEnvPair: function (index, patch) { patchEnvPair(backend.id, index, patch) },
+        onAddEnvPair: function () { addEnvPair(backend.id) },
+        onRemoveEnvPair: function (index) { removeEnvPair(backend.id, index) },
+        onSave: function () { runUpsert(backend) },
+        onInstall: function () { runInstall(backend) },
+        onUnmount: function () { runUnmount(backend) },
+      }))
+    })
+  }
+
+  return createElement('div', null,
+    toast ? createElement('div', { className: 'toast' }, toast) : null,
+    children
+  )
+}
+
+/* ========================================================================== */
+/*                              Section entrypoint                            */
+/* ========================================================================== */
+
+function SubagentAdminSection(props) {
+  var tabState = useState('subagents')
+  var activeTab = tabState[0]
+  var setActiveTab = tabState[1]
+  var tabs = [
+    { id: 'subagents', label: '子智能体', component: SubagentsPanel },
+    { id: 'cli', label: 'CLI 后端', component: CliPanel },
+    { id: 'history', label: '变更记录', component: HistoryPanel },
+  ]
+  var selected = tabs.find(function (tab) { return tab.id === activeTab }) || tabs[0]
+
+  return createElement('div', { 'data-dsh-sa-section': '' },
+    createElement('div', { className: 'tabs', role: 'tablist', 'aria-label': '子智能体管理' },
+      tabs.map(function (tab) {
+        return createElement('button', {
+          type: 'button', key: tab.id,
+          className: 'tab' + (tab.id === selected.id ? ' active' : ''),
+          role: 'tab', 'aria-selected': tab.id === selected.id,
+          onClick: function () { setActiveTab(tab.id) },
+        }, tab.label)
+      })
+    ),
+    createElement(selected.component, { key: selected.id, call: props.call })
+  )
+}
+
 /* ========================================================================== */
 /*                             Plugin Entrypoint                              */
 /* ========================================================================== */
 
 function apply(ctx) {
   injectStyles()
+  injectSaStyles()
 
   var call = function (method, args) {
     return ctx.connection.rpc.call('/api', method, { args: args })
@@ -2320,16 +3821,47 @@ function apply(ctx) {
   } catch (e) { refreshSessions = null }
   var disposeSidebar = ctx.effect(function () { return setupMenuInjection(call, refreshSessions) })
 
-  // One management-center entry keeps related local administration together;
-  // its tab container mounts only the selected panel.
+  // Four surfaces, each parked where the shell already renders its domain.
+  // 插件管理 joins the shell-owned 插件 section as its third tab (插件配置 0,
+  // 插件列表 10, 扩展插件 20); MCP / 子智能体 / 历史会话 become standalone
+  // settings pages (MCP服务器 takes the 25 slot right after Agent 预设,
+  // 子智能体 follows at 26, 历史会话 sorts last). inject() waits on each
+  // slot's declaration, so registration order never matters.
+  ctx.slots.inject('settings.plugins.tab', function () {
+    return ctx.slots.register({
+      name: 'settings.plugins.tab',
+      id: 'extensions',
+      order: 20,
+      label: '扩展插件',
+      inject: function () { return { call: call } },
+    }, PluginsSection)
+  })
   ctx.slots.inject('settings.section', function () {
     return ctx.slots.register({
       name: 'settings.section',
-      id: 'plugin-admin',
+      id: 'mcp-servers',
       order: 25,
-      label: '管理中心',
+      label: 'MCP服务器',
+      inject: function () { return { call: call } },
+    }, McpSection)
+  })
+  ctx.slots.inject('settings.section', function () {
+    return ctx.slots.register({
+      name: 'settings.section',
+      id: 'session-history',
+      order: 100,
+      label: '历史会话',
       inject: function () { return { call: call, refreshSessions: refreshSessions } },
-    }, AdminCenterSection)
+    }, SessionsSection)
+  })
+  ctx.slots.inject('settings.section', function () {
+    return ctx.slots.register({
+      name: 'settings.section',
+      id: 'subagent-admin',
+      order: 26,
+      label: '子智能体',
+      inject: function () { return { call: call } },
+    }, SubagentAdminSection)
   })
 }