dsh-ntr 0.2.0 → 0.2.1

package/lib/client.js

@@ -2612,18 +2612,34 @@ window.__ModuleLoader__.load({
   --ntr-success: color-mix(in srgb, var(--dsw-alias-state-success-primary, #16a34a) 72%, var(--dsw-alias-label-primary, #111827));
   --ntr-accent: var(--dsw-alias-button-primary-fill, #2563eb);
   width: 100%; max-width: 960px; box-sizing: border-box; margin: 0 auto;
-  padding: 20px; overflow: auto; font-size: var(--ntr-font); line-height: 1.55;
+  padding: 28px 32px; min-width: 0; container-type: inline-size; font-size: var(--ntr-font); line-height: 1.55;
 }
-.dwa-root button, .dwa-root input, .dwa-root select { font-family: inherit; }
+.dwa-root [hidden] { display: none !important; }
+.dwa-root button, .dwa-root input, .dwa-root select, .dwa-root textarea { font-family: inherit; }
+.dwa-root input, .dwa-root textarea { min-width: 0; }
+.dwa-tabs { display: flex; gap: 24px; flex-wrap: wrap; border-bottom: var(--ntr-line); margin-bottom: 24px; }
+.dwa-tabs > button { font: inherit; color: var(--ntr-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0 0 12px; min-height: 40px; white-space: nowrap; cursor: pointer; }
+.dwa-tabs > button:hover { color: var(--dsw-alias-label-primary, #111827); }
+.dwa-tabs > button[aria-pressed="true"] { color: var(--dsw-alias-label-primary, #111827); border-bottom-color: currentColor; font-weight: 550; }
+.dwa-detail-tabs { margin: 4px 0 20px; gap: 20px; }
+.dwa-detail-tabs > button { font-size: var(--ntr-font-sm); }
+.dwa-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.dwa-notice { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.dwa-notice > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.dwa-empty { text-align: center; padding: 40px 16px; color: var(--ntr-muted); }
+.dwa-empty h3 { font-size: 16px; font-weight: 550; color: var(--dsw-alias-label-primary, #111827); margin: 0 0 8px; }
+.dwa-empty .dwa-btn { margin-top: 20px; }
+.dwa-health { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; color: var(--ntr-muted); font-size: var(--ntr-font-sm); flex-wrap: wrap; }
+.dwa-health-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.dwa-health-status > span:last-child:not(:nth-child(2)) { padding-left: 12px; border-left: var(--ntr-line); }
+.dwa-back { margin-bottom: 16px; }
 .dwa-root button:focus-visible, .dwa-root input:focus-visible, .dwa-root select:focus-visible {
   outline: 2px solid var(--ntr-accent); outline-offset: 2px;
 }
-.dwa-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
+.dwa-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
 .dwa-page-heading { min-width: 0; }
-.dwa-page-title { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 650; letter-spacing: -0.02em; }
+.dwa-page-title { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 550; letter-spacing: -0.02em; }
 .dwa-page-description { margin: 5px 0 0; color: var(--ntr-muted); font-size: var(--ntr-font-sm); }
-.dwa-page-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ntr-muted); font-size: var(--ntr-font-xs); }
-.dwa-page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
 .dwa-btn {
   min-height: 32px; box-sizing: border-box; font: inherit; border-radius: var(--ntr-radius-sm);
   border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: var(--dsw-alias-bg-layer-1, #fff);
@@ -2636,14 +2652,16 @@ window.__ModuleLoader__.load({
 .dwa-btn-primary { background: var(--ntr-accent); color: var(--dsw-alias-label-primary-foreground, #fff); border-color: transparent; font-weight: 550; }
 .dwa-btn-primary:hover { background: var(--ntr-accent); border-color: transparent; opacity: 0.88; }
 .dwa-btn-secondary { background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
+.dwa-btn-quiet { background: transparent; border-color: transparent; color: var(--ntr-muted); }
+.dwa-btn-quiet:hover { border-color: transparent; color: var(--dsw-alias-label-primary, #111827); }
 .dwa-btn-danger { color: var(--ntr-danger); border-color: var(--dsw-alias-state-error-secondary, #fca5a5); }
 .dwa-btn-danger:hover { background: var(--dsw-alias-interactive-bg-hover-danger, #fee2e2); }
 .dwa-section { margin-bottom: 24px; }
 .dwa-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
-.dwa-section-title { font-size: 14px; font-weight: 650; margin: 0; display: flex; align-items: center; gap: 8px; }
+.dwa-section-title { font-size: 13px; font-weight: 550; margin: 0; display: flex; align-items: center; gap: 8px; }
 .dwa-section-copy { margin: 3px 0 0; font-size: var(--ntr-font-xs); color: var(--ntr-muted); }
 .dwa-card { border: var(--ntr-line); border-radius: var(--ntr-radius); padding: 16px; background: var(--dsw-alias-bg-layer-1, #fff); font-size: var(--ntr-font); line-height: 1.55; }
-.dwa-card-warn { border-left: 3px solid var(--dsw-alias-state-warn-primary, #d97706); background: var(--dsw-alias-state-warn-tertiary, #fffbeb); }
+.dwa-card-warn { border-color: color-mix(in srgb, var(--ntr-warn) 30%, var(--dsw-alias-border-l2, #e5e7eb)); background: var(--dsw-alias-state-warn-tertiary, #fffbeb); }
 .dwa-mode-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; align-items: start; margin-bottom: 24px; padding: 14px 16px; }
 .dwa-mode-title { display: flex; align-items: center; gap: 8px; font-weight: 650; }
 .dwa-mode-copy { grid-column: 1 / -1; color: var(--ntr-muted); font-size: var(--ntr-font-xs); }
@@ -2653,25 +2671,21 @@ window.__ModuleLoader__.load({
 .dwa-badge-warn { background: var(--dsw-alias-state-warn-tertiary, #fef3c7); color: var(--ntr-warn); }
 .dwa-badge-info { background: var(--dsw-alias-state-business-tertiary, #dbeafe); color: var(--dsw-alias-state-business-primary, #2563eb); }
 .dwa-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
-.dwa-agent-list { display: flex; flex-direction: column; gap: 8px; }
-.dwa-agent-card { border: var(--ntr-line); border-radius: var(--ntr-radius); background: var(--dsw-alias-bg-layer-1, #fff); overflow: visible; transition: border-color 0.15s ease; }
-.dwa-agent-card.is-open { border-color: var(--dsw-alias-border-l1, #c7ccd1); }
-.dwa-agent-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; }
+.dwa-agent-list { display: flex; flex-direction: column; border-top: var(--ntr-line); }
+.dwa-agent-card { border-bottom: var(--ntr-line); min-width: 0; }
+.dwa-agent-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 0; }
+.dwa-agent-avatar { display: grid; place-items: center; width: 38px; height: 38px; border: var(--ntr-line); border-radius: 9px; background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: var(--ntr-muted); font: 12px var(--ds-font-family-code, monospace); }
 .dwa-caret { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 1em; }
 .dwa-caret-btn { font: inherit; border: none; background: var(--dsw-alias-bg-layer-2, #f3f4f6); width: 28px; height: 28px; padding: 0; border-radius: var(--ntr-radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--ntr-muted); cursor: pointer; }
 .dwa-caret-btn:hover { background: var(--dsw-alias-interactive-bg-active, #e5e7eb); color: inherit; }
 .dwa-agent-summary { min-width: 0; }
 .dwa-agent-titleline { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
-.dwa-agent-name { font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
+.dwa-agent-name { font-size: 13px; font-weight: 550; overflow-wrap: anywhere; }
 .dwa-agent-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; color: var(--ntr-muted); font-size: var(--ntr-font-xs); }
 .dwa-agent-meta-separator { opacity: 0.45; }
-.dwa-agent-body { border-top: var(--ntr-line); padding: 0 16px 16px; }
-.dwa-subsection { padding-top: 16px; }
-.dwa-subsection + .dwa-subsection { margin-top: 16px; border-top: var(--ntr-line); }
-.dwa-subsection-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
-.dwa-subsection-title { margin: 0; font-size: 13px; font-weight: 650; }
-.dwa-subsection-copy { margin: 3px 0 0; color: var(--ntr-muted); font-size: var(--ntr-font-xs); }
-.dwa-form-row { display: flex; gap: var(--ntr-gap-3); margin-bottom: 14px; align-items: flex-start; }
+.dwa-agent-body { padding: 0 0 24px 52px; }
+.dwa-subsection { min-width: 0; }
+.dwa-form-row { display: flex; gap: var(--ntr-gap-3); margin-bottom: 14px; align-items: stretch; }
 .dwa-form-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
 .dwa-form-label { font-size: var(--ntr-font-sm); font-weight: 600; color: var(--dsw-alias-label-primary, #374151); }
 .dwa-hint { font-size: var(--ntr-font-xs); line-height: 1.55; color: var(--ntr-muted); }
@@ -2680,11 +2694,13 @@ window.__ModuleLoader__.load({
 .dwa-select { min-height: 32px; font: inherit; font-size: var(--ntr-font-sm); padding: 5px 8px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); border-radius: var(--ntr-radius-sm); background: var(--dsw-alias-bg-layer-1, #fff); color: inherit; }
 .dwa-input:hover, .dwa-select:hover { border-color: var(--dsw-alias-border-l1, #9ca3af); }
 .dwa-input:focus, .dwa-select:focus { border-color: var(--ntr-accent); }
-.dwa-input-mono, .dwa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+.dwa-input-mono, .dwa-mono { font-family: var(--ds-font-family-code, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
 .dwa-stderr { max-height: 120px; overflow: auto; font-family: monospace; font-size: var(--ntr-font-xs); white-space: pre-wrap; color: var(--ntr-warn); margin: 12px 0 0; }
 .dwa-default-hint { background: var(--dsw-alias-bg-layer-2, #f9fafb); border: var(--ntr-line); border-radius: var(--ntr-radius-sm); padding: 10px 12px; font-size: var(--ntr-font-sm); display: flex; align-items: center; justify-content: space-between; margin: 12px 0 14px; gap: 12px; }
 .dwa-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: var(--ntr-line); flex-wrap: wrap; }
 .dwa-form-actions .dwa-btn-primary { min-width: 88px; }
+.dwa-form-actions > .dwa-hint:first-child { margin-right: auto; }
+.dwa-form-actions > .dwa-hint:last-child:not(:first-child) { width: 100%; }
 .dwa-menu-wrap { position: relative; }
 .dwa-menu-wrap > .dwa-btn { width: 32px; padding: 0; }
 .dwa-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px; border: var(--ntr-line); border-radius: var(--ntr-radius-sm); background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 4px; display: flex; flex-direction: column; }
@@ -2692,10 +2708,10 @@ window.__ModuleLoader__.load({
 .dwa-menu-item:hover { background: var(--dsw-alias-interactive-bg-active, #f3f4f6); }
 .dwa-menu-item-danger { color: var(--ntr-danger); }
 .dwa-menu-confirm { display: flex; align-items: center; gap: 4px; padding: 4px; }
-.dwa-add-panel { border: var(--ntr-line); border-radius: var(--ntr-radius); background: var(--dsw-alias-bg-layer-1, #fff); }
-.dwa-add-toggle { width: 100%; border: 0; background: transparent; color: inherit; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; border-radius: var(--ntr-radius); }
-.dwa-add-toggle:hover { background: var(--dsw-alias-interactive-bg-active, #f9fafb); }
-.dwa-add-content { border-top: var(--ntr-line); padding: 14px 16px 16px; }
+.dwa-add-panel .dwa-agent-row { display: none; }
+.dwa-add-panel .dwa-agent-body { padding: 0 0 24px; }
+.dwa-add-panel .dwa-agent-card { border: 0; }
+.dwa-add-content { padding-top: 10px; }
 .dwa-chip { min-height: 30px; font: inherit; font-size: var(--ntr-font-sm); border: var(--ntr-line); border-radius: 999px; padding: 4px 12px; background: var(--dsw-alias-bg-layer-1, #fff); cursor: pointer; color: inherit; }
 .dwa-chip:hover { background: var(--dsw-alias-interactive-bg-active, #f3f4f6); }
 .dwa-chip-active { border-color: var(--ntr-accent); background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #2563eb) 8%, transparent); color: var(--dsw-alias-state-business-primary, #2563eb); font-weight: 550; }
@@ -2727,13 +2743,13 @@ window.__ModuleLoader__.load({
 .dwa-model-status { margin-left: auto; white-space: nowrap; }
 .dwa-model-search { width: 200px; min-height: 30px; }
 .dwa-model-empty { padding: 6px; }
-.dwa-model-row { display: flex; align-items: center; gap: 6px; width: 100%; border: none; background: none; padding: 5px 6px; border-radius: 5px; cursor: pointer; color: inherit; font: inherit; font-size: var(--ntr-font-sm); text-align: left; }
+.dwa-model-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; border: none; background: none; padding: 7px 8px; border-radius: 5px; cursor: pointer; color: inherit; font: inherit; font-size: var(--ntr-font-sm); text-align: left; }
 .dwa-model-row:hover { background: var(--dsw-alias-interactive-bg-active, #f3f4f6); }
 .dwa-model-row.is-on { background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #2563eb) 8%, transparent); color: var(--dsw-alias-state-business-primary, #2563eb); }
 .dwa-model-row-mark { width: 12px; flex: none; text-align: center; opacity: 0.75; }
 .dwa-model-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* Name and credit keep their room; the id is the only cell that collapses. */
-.dwa-model-row-desc { flex: 0 0 auto; max-width: 45%; opacity: 0.75; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dwa-model-row-desc { flex: 0 0 auto; max-width: 45%; opacity: 0.75; font-size: var(--ntr-font-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* The trailing 14px is reserved for the fade mask: while the id fits, the
    gradient only covers empty padding; once it overflows, its tail dissolves
    instead of ending in a hard ellipsis. armModelIdMarquee reads the same
@@ -2747,12 +2763,12 @@ window.__ModuleLoader__.load({
 }
 .dwa-model-row-remove { flex: none; opacity: 0.5; padding: 0 2px; }
 .dwa-model-row:hover .dwa-model-row-remove { opacity: 1; }
-.dwa-seg { display: inline-flex; border-radius: var(--ntr-radius-sm); border: 1px solid var(--dsw-alias-border-l2, #d1d5db); overflow: hidden; vertical-align: middle; }
-.dwa-seg > button { min-height: 30px; font: inherit; font-size: var(--ntr-font-sm); color: inherit; border: none; background: var(--dsw-alias-bg-layer-1, #fff); padding: 4px 14px; cursor: pointer; }
-.dwa-seg > button + button { border-left: 1px solid var(--dsw-alias-border-l2, #d1d5db); }
+.dwa-seg { display: inline-flex; gap: 4px; padding: 4px; box-sizing: border-box; border-radius: var(--ntr-radius-sm); border: var(--ntr-line); background: var(--dsw-alias-bg-layer-2, #f3f4f6); vertical-align: middle; }
+.dwa-seg > button { min-height: 32px; font: inherit; font-size: var(--ntr-font-sm); color: var(--ntr-muted); border: 1px solid transparent; border-radius: 4px; background: transparent; padding: 4px 12px; cursor: pointer; white-space: nowrap; }
 .dwa-seg > button:hover { background: var(--dsw-alias-interactive-bg-active, #f3f4f6); }
-.dwa-seg > button.is-on { background: var(--ntr-accent); color: var(--dsw-alias-label-primary-foreground, #fff); font-weight: 550; }
-.dwa-preference-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
+.dwa-seg > button.is-on { background: var(--dsw-alias-bg-layer-1, #fff); border: var(--ntr-line); color: var(--dsw-alias-label-primary, #111827); font-weight: 550; }
+.dwa-preferences { border-top: var(--ntr-line); }
+.dwa-preference-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
 .dwa-preference-row + .dwa-preference-row { border-top: var(--ntr-line); }
 /* A control that needs the whole card: the label sits above it, not beside
    it. A right-aligned segmented control squeezed its labels into two lines
@@ -2777,13 +2793,20 @@ window.__ModuleLoader__.load({
 .dwa-deadline-warn { margin-top: 10px; padding: 9px 12px; border-left: 3px solid var(--dsw-alias-state-warn-primary, #d97706); background: var(--dsw-alias-state-warn-secondary, #fffbeb); border-radius: var(--ntr-radius-sm); font-size: var(--ntr-font-xs); line-height: 1.55; }
 .dwa-deadline-reset { display: flex; justify-content: flex-end; margin-top: 8px; }
 @media (max-width: 640px) {
-  .dwa-root { padding: 14px; }
-  .dwa-page-header { flex-direction: column; }
-  .dwa-page-actions { width: 100%; }
-  .dwa-page-actions .dwa-btn { width: 100%; }
+  .dwa-root { padding: 20px 16px; }
+}
+@container (max-width: 640px) {
+  .dwa-page-header { align-items: flex-start; flex-wrap: wrap; }
+  .dwa-agent-body { padding-left: 0; }
+  .dwa-agent-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; }
+  .dwa-agent-avatar { width: 32px; height: 32px; }
+  .dwa-section-heading { flex-wrap: wrap; }
+  .dwa-tabs { gap: 20px; }
+  .dwa-notice { flex-wrap: wrap; }
+  .dwa-seg-wide > button { padding-inline: 5px; }
   .dwa-model-toolbar-actions { width: 100%; }
   .dwa-model-search { flex: 1 1 auto; width: auto; }
-  .dwa-subsection-head, .dwa-preference-row { align-items: flex-start; flex-direction: column; }
+  .dwa-preference-row { align-items: flex-start; flex-direction: column; }
   .dwa-default-hint { align-items: flex-start; flex-direction: column; }
   /* The slider's scale: up to eight rungs with full unit words ("15 分钟")
      need a smaller face before they can collide on a narrow panel. The rung
@@ -3271,11 +3294,7 @@ window.__ModuleLoader__.load({
 						children: acp.label("权限请求的等待时长与超时处理方式。", "How long to wait for a permission request, and what happens when nobody answers.")
 					})] })
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "dwa-card",
-					style: {
-						paddingTop: 4,
-						paddingBottom: 4
-					},
+					className: "dwa-preferences",
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeadlineModeBlock, {
 							acp,
@@ -3301,17 +3320,21 @@ window.__ModuleLoader__.load({
 				})]
 			});
 		}
-		/** Settings configuration section for ACP agents. */
 		function AcpSettingsSection(props) {
 			const acp = props.acp;
 			ensureStyle();
 			const ui = useUi$1(acp);
 			const ledger = permissionLedgerCard(ui);
-			const [addOpen, setAddOpen] = (0, react.useState)(true);
+			const [page, setPage] = (0, react.useState)("agents");
+			const [addOpen, setAddOpen] = (0, react.useState)(false);
 			const [addTarget, setAddTarget] = (0, react.useState)(void 0);
-			const [createNonce, setCreateNonce] = (0, react.useState)(0);
 			const { configured, available } = partitionAgents(ui.detectedAgents, ui.agents);
 			const selected = addTarget ?? available[0] ?? NEW_AGENT_SEED;
+			const openAdd = () => {
+				setAddOpen(true);
+				setPage("add");
+			};
+			const presetProblem = ui.preset !== void 0 && (!ui.preset.installed || ui.preset.problem !== void 0);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dwa-root",
 				children: [
@@ -3319,39 +3342,18 @@ window.__ModuleLoader__.load({
 						className: "dwa-page-header",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dwa-page-heading",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-									className: "dwa-page-title",
-									children: acp.label("NTR 智能体", "NTR Agents")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "dwa-page-description",
-									children: acp.label("管理智能体连接、可用模型与对话显示偏好。", "Manage agent connections, available models, and conversation display preferences.")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "dwa-page-status",
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "dwa-dot",
-											style: { background: ui.stream === "live" ? "var(--dsw-alias-state-success-primary, #22c55e)" : ui.stream === "down" ? "var(--dsw-alias-state-error-primary, #ef4444)" : "var(--dsw-alias-state-idle-primary, #9ca3af)" },
-											title: ui.stream
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: streamText(ui.stream, acp) }),
-										ui.detectSummary !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["· ", ui.detectSummary] })
-									]
-								})
-							]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dwa-page-actions",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								className: "dwa-btn",
-								onClick: () => {
-									acp.resync();
-									acp.detectAgents();
-								},
-								disabled: ui.detecting,
-								children: ui.detecting ? acp.label("检测中...", "Detecting...") : acp.label("重新检测与刷新", "Re-detect & Refresh")
-							})
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+								className: "dwa-page-title",
+								children: acp.label("NTR 设置", "NTR settings")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "dwa-page-description",
+								children: acp.label("连接智能体，设置你的对话偏好。", "Connect agents and set your conversation preferences.")
+							})]
+						}), page === "agents" && configured.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dwa-btn dwa-btn-primary",
+							onClick: openAdd,
+							children: acp.label("添加智能体", "Add agent")
 						})]
 					}),
 					ledger.visible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3393,18 +3395,20 @@ window.__ModuleLoader__.load({
 										})]
 									}),
 									permission.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										className: "dwa-btn dwa-btn-primary",
+										type: "button",
+										className: "dwa-btn",
 										onClick: () => {
 											acp.respondPermission(permission.requestId, option.optionId).catch(() => void 0);
 										},
 										children: option.name
 									}, option.optionId)),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										className: "dwa-btn",
+										type: "button",
+										className: "dwa-btn dwa-btn-quiet",
 										onClick: () => {
 											acp.respondPermission(permission.requestId).catch(() => void 0);
 										},
-										children: acp.label("拒绝", "Dismiss")
+										children: acp.label("取消", "Cancel")
 									})
 								]
 							}, permission.requestId))
@@ -3422,12 +3426,81 @@ window.__ModuleLoader__.load({
 							style: { flex: 1 },
 							children: ui.notice
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							className: "dwa-btn",
+							type: "button",
+							className: "dwa-btn dwa-btn-quiet",
+							"aria-label": acp.label("关闭通知", "Dismiss notice"),
 							onClick: () => acp.clearNotice(),
 							children: "✕"
 						})]
 					}),
-					ui.preset !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					presetProblem && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dwa-card dwa-card-warn dwa-notice",
+						role: "status",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: acp.label("NTR 模式需要检查，当前可能无法开始对话。", "NTR mode needs attention; new conversations may be unavailable.") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dwa-btn",
+							onClick: () => setPage("diagnostics"),
+							children: acp.label("查看诊断", "View diagnostics")
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+						className: "dwa-tabs",
+						"aria-label": acp.label("NTR 设置分类", "NTR settings categories"),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"aria-pressed": page === "agents",
+								onClick: () => setPage("agents"),
+								children: acp.label("智能体", "Agents")
+							}),
+							ui.approvalDeadlines !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"aria-pressed": page === "approvals",
+								onClick: () => setPage("approvals"),
+								children: acp.label("审批时限", "Approval deadlines")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"aria-pressed": page === "appearance",
+								onClick: () => setPage("appearance"),
+								children: acp.label("对话外观", "Appearance")
+							})
+						]
+					}),
+					page === "diagnostics" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: "dwa-section",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+								className: "dwa-section-title",
+								children: acp.label("连接诊断", "Connection diagnostics")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dwa-preference-row",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: acp.label("宿主事件流", "Host event stream") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dwa-hint",
+									children: streamText(ui.stream, acp)
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dwa-row-actions",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dwa-btn",
+									onClick: () => {
+										acp.resync();
+										acp.detectAgents();
+									},
+									disabled: ui.detecting,
+									children: ui.detecting ? acp.label("检测中...", "Detecting...") : acp.label("重新检测与刷新", "Re-detect & Refresh")
+								}), ui.detectSummary !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dwa-hint",
+									role: "status",
+									children: ui.detectSummary
+								})]
+							})
+						]
+					}),
+					page === "diagnostics" && ui.preset !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "dwa-card dwa-mode-banner",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3460,28 +3533,42 @@ window.__ModuleLoader__.load({
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dwa-section",
+						hidden: page !== "agents",
+						"aria-label": acp.label("已接入的智能体", "Connected agents"),
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "dwa-section-heading",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
 									className: "dwa-section-title",
-									children: [acp.label("已接入的智能体", "Connected agents"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									children: [acp.label("已接入的智能体", "Connected agents"), ui.agentsLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "dwa-badge",
 										children: configured.length
 									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "dwa-section-copy",
-									children: acp.label("展开智能体可管理模型、启动命令与工作区。", "Expand an agent to manage its models, launch command, and workspace.")
-								})] })
+								}) }), configured.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dwa-hint",
+									children: acp.label("默认项用于新的 NTR 会话", "The default serves new NTR conversations")
+								})]
 							}),
-							configured.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dwa-card",
-								style: {
-									textAlign: "center",
-									color: "var(--ntr-muted)",
-									padding: 20
-								},
-								children: acp.label("尚未启用任何 Agent。从下方「添加智能体」点一个检测到的预设（会展开预填命令的创建卡），再点「保存并启用」；也可以直接新建自定义 Agent。", "No agents configured yet. Pick a detected preset from \"Add agent\" below (it opens a creation card prefilled with its command), then click \"Save & Enable\" — or create a custom one from scratch.")
+							!ui.agentsLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dwa-empty",
+								role: "status",
+								children: acp.label("正在读取智能体…", "Loading agents…")
+							}),
+							ui.agentsLoaded && configured.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dwa-empty",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: acp.label("接入第一个智能体", "Connect your first agent") }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "dwa-section-copy",
+										children: acp.label("选择已有预设，或填写自己的 ACP 启动命令。", "Choose a preset or enter your own ACP launch command.")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dwa-btn dwa-btn-primary",
+										onClick: openAdd,
+										children: acp.label("添加智能体", "Add agent")
+									})
+								]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "dwa-agent-list",
@@ -3492,36 +3579,33 @@ window.__ModuleLoader__.load({
 										activeAgent,
 										acp,
 										isDefault: ui.defaultAgent === info.id,
-										synthesized
+										synthesized,
+										active: page === "agents"
 									}, info.id);
 								})
 							})
 						]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dwa-section",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						hidden: page !== "add",
+						"aria-label": acp.label("添加智能体", "Add agent"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dwa-btn dwa-btn-quiet dwa-back",
+							onClick: () => setPage("agents"),
+							children: acp.label("返回智能体列表", "Back to agents")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dwa-add-panel",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								className: "dwa-add-toggle",
-								"aria-expanded": addOpen,
-								onClick: () => setAddOpen((open) => !open),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dwa-section-heading",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 									className: "dwa-section-title",
 									children: acp.label("添加智能体", "Add agent")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 									className: "dwa-section-copy",
-									style: { display: "block" },
 									children: acp.label("从预设快速启用，或创建自定义连接。", "Enable a preset or create a custom connection.")
-								})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dwa-caret-btn",
-									"aria-hidden": true,
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "dwa-caret",
-										children: addOpen ? "▾" : "▸"
-									})
-								})]
+								})] })
 							}), addOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "dwa-add-content",
 								children: [
@@ -3551,21 +3635,28 @@ window.__ModuleLoader__.load({
 										isDefault: false,
 										synthesized: false,
 										newCustom: selected.id === "",
+										active: page === "add",
 										onCreated: () => {
 											setAddTarget(void 0);
-											setCreateNonce((nonce) => nonce + 1);
+											setAddOpen(false);
+											setPage("agents");
 										}
-									}, selected.id === "" ? `custom-${createNonce}` : selected.id)
+									}, selected.id)
 								]
 							})]
-						})
+						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApprovalDeadlinesCard, {
-						acp,
-						ui
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						hidden: page !== "approvals",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApprovalDeadlinesCard, {
+							acp,
+							ui
+						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dwa-section",
+						hidden: page !== "appearance",
+						"aria-label": acp.label("对话外观", "Appearance"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "dwa-section-heading",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
@@ -3576,11 +3667,7 @@ window.__ModuleLoader__.load({
 								children: acp.label("设置对话中 NTR 挂牌的进程存活提示。", "Choose how the NTR tag indicates a running agent process.")
 							})] })
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dwa-card",
-							style: {
-								paddingTop: 4,
-								paddingBottom: 4
-							},
+							className: "dwa-preferences",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "dwa-preference-row",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3627,15 +3714,35 @@ window.__ModuleLoader__.load({
 								})]
 							})]
 						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+						className: "dwa-health",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dwa-health-status",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dwa-dot",
+									style: { background: ui.stream === "live" ? "var(--ntr-success)" : ui.stream === "down" ? "var(--ntr-danger)" : "var(--ntr-muted)" }
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: streamText(ui.stream, acp) }),
+								ui.preset !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: ui.preset.installed && !presetProblem ? acp.label("NTR 模式已就绪", "NTR mode ready") : acp.label("NTR 模式需检查", "NTR mode needs attention") })
+							]
+						}), page !== "diagnostics" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dwa-btn dwa-btn-quiet",
+							onClick: () => setPage("diagnostics"),
+							children: acp.label("查看诊断", "View diagnostics")
+						})]
 					})
 				]
 			});
 		}
 		/** One row per agent: compact when collapsed, the full form when expanded. */
-		function AgentRow({ detected, activeAgent, acp, isDefault, synthesized, newCustom = false, onCreated }) {
+		function AgentRow({ detected, activeAgent, acp, isDefault, synthesized, active, newCustom = false, onCreated }) {
 			const ui = useUi$1(acp);
 			const configured = activeAgent !== void 0 || detected.currentConfig !== void 0;
 			const [expanded, setExpanded] = (0, react.useState)(!configured);
+			const [detailPage, setDetailPage] = (0, react.useState)(configured ? "models" : "connection");
 			const [form, setForm] = (0, react.useState)(() => initialForm(detected, activeAgent));
 			const [saving, setSaving] = (0, react.useState)(false);
 			const [savedSuccess, setSavedSuccess] = (0, react.useState)(false);
@@ -3671,7 +3778,9 @@ window.__ModuleLoader__.load({
 			const formIncomplete = splitCommandLine(form.commandLine).command === "" || !idValid || idTaken || cwdInvalid || rootsInvalid || idleInvalid || mcpInvalid;
 			const payload = buildPayload(form, detected, newCustom);
 			const current = persistedDef(detected, activeAgent);
-			const showSaveWarning = current !== void 0 && !payloadEquals(payload, current) && activeAgent !== void 0 && activeAgent.state !== "stopped";
+			const clearingIdleOverride = payload.idleTimeoutMs === void 0 && detected.currentConfig?.idleTimeoutMs !== void 0;
+			const dirty = current !== void 0 && (!payloadEquals(payload, current) || clearingIdleOverride);
+			const showSaveWarning = dirty && activeAgent !== void 0 && activeAgent.state !== "stopped";
 			const handleUseDefault = () => patch({ commandLine: formatCommandLine(detected.defaultCommand, detected.defaultArgs) });
 			const handleSave = async () => {
 				setSaving(true);
@@ -3711,7 +3820,7 @@ window.__ModuleLoader__.load({
 			const displayName = newCustom ? acp.label("新建自定义 Agent", "New Custom Agent") : activeAgent?.title ?? detected.currentConfig?.title ?? detected.name;
 			const stderr = activeAgent?.state === "error" ? activeAgent.stderrTail ?? [] : [];
 			const errorSummary = stderr.length > 0 ? stderr[stderr.length - 1] : void 0;
-			const currentModel = ui.modelCatalogs[detected.id]?.catalog.model?.currentValue;
+			const selectedModelCount = form.exposed?.length ?? 0;
 			const isPreset = PRESET_IDS.has(detected.id);
 			const open = expanded || activeAgent?.state === "error" && configured;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3719,17 +3828,10 @@ window.__ModuleLoader__.load({
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dwa-agent-row",
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "dwa-caret-btn",
-							"aria-expanded": open,
-							onClick: () => setExpanded((value) => !value),
-							title: open ? acp.label("收起", "Collapse") : acp.label("展开配置与模型", "Expand configuration and models"),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dwa-caret",
-								"aria-hidden": true,
-								children: open ? "▾" : "▸"
-							})
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dwa-agent-avatar",
+							"aria-hidden": true,
+							children: displayName.slice(0, 2).toUpperCase()
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dwa-agent-summary",
@@ -3743,7 +3845,7 @@ window.__ModuleLoader__.load({
 											children: displayName
 										}),
 										isDefault && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "dwa-badge dwa-badge-success",
+											className: "dwa-badge dwa-badge-info",
 											children: acp.label("默认", "Default")
 										}),
 										!isPreset && !newCustom && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -3770,7 +3872,7 @@ window.__ModuleLoader__.load({
 										configured && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [state !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "dwa-agent-meta-separator",
 											children: "·"
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: currentModel === void 0 ? acp.label("未探测模型", "Model not probed") : `${acp.label("模型", "Model")}: ${currentModel}` })] }),
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: acp.label(`${String(selectedModelCount)} 个已选模型`, `${String(selectedModelCount)} selected models`) })] }),
 										!synthesized && !newCustom && !detected.detected && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 											style: { color: "var(--ntr-warn)" },
 											title: detected.description,
@@ -3789,24 +3891,31 @@ window.__ModuleLoader__.load({
 							]
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							style: {
-								display: "flex",
-								alignItems: "center",
-								gap: 6
-							},
-							children: [activeAgent?.state === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								className: "dwa-btn",
-								disabled: testing,
-								onClick: () => void handleTest(),
-								children: testing ? acp.label("测试中...", "Testing...") : acp.label("测试", "Test")
-							}), configured && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowMenu, {
-								acp,
-								canStop: activeAgent !== void 0 && activeAgent.state !== "stopped",
-								onStop: () => void acp.stopAgent(detected.id),
-								onRemove: async () => {
-									await acp.deleteAgent(detected.id).catch(() => {});
-								}
-							})]
+							className: "dwa-row-actions",
+							children: [
+								configured && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dwa-btn dwa-btn-quiet",
+									"aria-expanded": open,
+									"aria-label": acp.label(`${open ? "收起" : "管理"} ${displayName}`, `${open ? "Collapse" : "Manage"} ${displayName}`),
+									onClick: () => setExpanded((value) => !value),
+									children: open ? acp.label("收起", "Collapse") : acp.label("管理", "Manage")
+								}),
+								activeAgent?.state === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									className: "dwa-btn",
+									disabled: testing,
+									onClick: () => void handleTest(),
+									children: testing ? acp.label("测试中...", "Testing...") : acp.label("测试", "Test")
+								}),
+								configured && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowMenu, {
+									acp,
+									canStop: activeAgent !== void 0 && activeAgent.state !== "stopped",
+									onStop: () => void acp.stopAgent(detected.id),
+									onRemove: async () => {
+										await acp.deleteAgent(detected.id).catch(() => {});
+									}
+								})
+							]
 						})
 					]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3817,42 +3926,52 @@ window.__ModuleLoader__.load({
 							className: "dwa-stderr",
 							children: stderr.join("\n")
 						}),
-						configured && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
+							className: "dwa-tabs dwa-detail-tabs",
+							"aria-label": acp.label(`${displayName} 配置`, `${displayName} settings`),
+							children: [
+								configured && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-pressed": detailPage === "models",
+									onClick: () => setDetailPage("models"),
+									children: acp.label("模型", "Models")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-pressed": detailPage === "connection",
+									onClick: () => setDetailPage("connection"),
+									children: acp.label("连接", "Connection")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-pressed": detailPage === "advanced",
+									onClick: () => setDetailPage("advanced"),
+									children: acp.label("高级", "Advanced")
+								})
+							]
+						}),
+						configured && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 							className: "dwa-subsection",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dwa-subsection-head",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-									className: "dwa-subsection-title",
-									children: acp.label("模型与默认值", "Models & defaults")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "dwa-subsection-copy",
-									children: acp.label("检测模型目录，并控制对话中可选择的模型。", "Detect the model catalog and choose what appears in conversations.")
-								})] })
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelCatalogBlock, {
+							hidden: detailPage !== "models",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelCatalogBlock, {
 								agentId: detected.id,
 								detected,
 								acp,
-								active: open,
+								active: active && open && detailPage === "models",
 								exposed: form.exposed,
 								onExposedChange: (exposed) => patch({ exposed }),
 								autoDiscover: form.autoDiscoverModels,
 								onAutoDiscoverChange: (autoDiscoverModels) => patch({ autoDiscoverModels }),
 								isDefault
-							})]
+							})
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 							className: "dwa-subsection",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dwa-subsection-head",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-									className: "dwa-subsection-title",
-									children: acp.label("连接配置", "Connection")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "dwa-subsection-copy",
-									children: acp.label("设置显示名与启动命令，高级选项按需展开。", "Set the display name and launch command; expand advanced options only when needed.")
-								})] })
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentDetails, {
+							hidden: detailPage === "models",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AgentDetails, {
 								acp,
+								advancedOpen: detailPage === "advanced",
+								dirty,
 								detected,
 								form,
 								patch,
@@ -3873,7 +3992,7 @@ window.__ModuleLoader__.load({
 								onUseDefault: handleUseDefault,
 								onSave: () => void handleSave(),
 								onTest: () => void handleTest()
-							})]
+							})
 						})
 					]
 				})]
@@ -3976,111 +4095,90 @@ window.__ModuleLoader__.load({
 			return payload;
 		}
 		/** The expanded body: connection form, workspace allow-list, env, actions. */
-		function AgentDetails({ acp, detected, form, patch, isConfigured, newCustom, formIncomplete, idValid, idTaken, cwdInvalid, rootsInvalid, idleInvalid, mcpInvalid, saving, savedSuccess, testing, testResult, showSaveWarning, onUseDefault, onSave, onTest }) {
-			useUi$1(acp);
-			const [advancedOpen, setAdvancedOpen] = (0, react.useState)(false);
+		function AgentDetails({ acp, advancedOpen, dirty, detected, form, patch, isConfigured, newCustom, formIncomplete, idValid, idTaken, cwdInvalid, rootsInvalid, idleInvalid, mcpInvalid, saving, savedSuccess, testing, testResult, showSaveWarning, onUseDefault, onSave, onTest }) {
 			const parsedCommand = splitCommandLine(form.commandLine);
 			const commandPreview = parsedCommand.command === "" ? acp.label("填整条命令，例如：codebuddy --acp", "Type the whole command, e.g. codebuddy --acp") : `${acp.label("程序", "Program")}: ${parsedCommand.command}` + (parsedCommand.args.length === 0 ? "" : `　${acp.label("参数", "Arguments")}: ${parsedCommand.args.join(" ")}`);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-				newCustom && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "dwa-form-row",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dwa-form-col",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-								className: "dwa-form-label",
-								children: acp.label("Agent ID（唯一标识，创建后不可改）", "Agent ID (unique, immutable after creation)")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								className: "dwa-input dwa-input-mono",
-								value: form.agentId,
-								onChange: (e) => patch({ agentId: e.target.value }),
-								placeholder: "e.g. my-agent"
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: idValid && !idTaken ? "dwa-hint" : "dwa-error",
-								children: idTaken ? acp.label("该 ID 已被现有 Agent 占用。", "This id is already taken by a configured agent.") : idValid ? acp.label("小写字母或数字开头，可用 a-z 0-9 . _ -，最长 64 字符。", "Starts with a lowercase letter or digit; a-z 0-9 . _ - allowed; max 64 chars.") : acp.label("ID 格式不合法：小写字母或数字开头，可用 a-z 0-9 . _ -。", "Invalid id: start with a lowercase letter or digit; only a-z 0-9 . _ - allowed.")
-							})
-						]
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "dwa-form-row",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dwa-form-col",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-							className: "dwa-form-label",
-							children: acp.label("显示名", "Display Name")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-							className: "dwa-input",
-							value: form.title,
-							onChange: (e) => patch({ title: e.target.value }),
-							placeholder: detected.name === "" ? acp.label("我的 Agent", "My Agent") : detected.name
-						})]
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "dwa-form-row",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dwa-form-col",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
-								className: "dwa-form-label",
-								children: acp.label("启动命令（程序 + 参数）", "Launch Command (program + arguments)")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								className: "dwa-input dwa-input-mono",
-								value: form.commandLine,
-								onChange: (e) => patch({ commandLine: e.target.value }),
-								placeholder: detected.defaultCommand === "" ? "e.g. codebuddy --acp" : formatCommandLine(detected.defaultCommand, detected.defaultArgs)
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dwa-hint",
-								children: commandPreview
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dwa-hint",
-								children: acp.label("参数直接跟在程序后面即可；路径里含空格时用引号包住整条路径，例如 \"C:\\Program Files\\nodejs\\node.exe\" --acp。", "Arguments go right after the program; quote a whole path that contains spaces, e.g. \"C:\\Program Files\\nodejs\\node.exe\" --acp.")
-							})
-						]
-					})
-				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: 8,
-						marginTop: 12,
-						flexWrap: "wrap"
-					},
+					hidden: advancedOpen,
 					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							className: "dwa-btn dwa-btn-secondary",
-							"aria-expanded": advancedOpen,
-							onClick: () => setAdvancedOpen((value) => !value),
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dwa-caret",
-									"aria-hidden": true,
-									children: advancedOpen ? "▾" : "▸"
-								}),
-								" ",
-								acp.label("高级参数", "Advanced Parameters")
-							]
+						newCustom && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dwa-form-row",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dwa-form-col",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+										className: "dwa-form-label",
+										children: acp.label("Agent ID（唯一标识，创建后不可改）", "Agent ID (unique, immutable after creation)")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										className: "dwa-input dwa-input-mono",
+										"aria-label": acp.label("Agent ID", "Agent ID"),
+										value: form.agentId,
+										onChange: (e) => patch({ agentId: e.target.value }),
+										placeholder: "e.g. my-agent"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: idValid && !idTaken ? "dwa-hint" : "dwa-error",
+										children: idTaken ? acp.label("该 ID 已被现有 Agent 占用。", "This id is already taken by a configured agent.") : idValid ? acp.label("小写字母或数字开头，可用 a-z 0-9 . _ -，最长 64 字符。", "Starts with a lowercase letter or digit; a-z 0-9 . _ - allowed; max 64 chars.") : acp.label("ID 格式不合法：小写字母或数字开头，可用 a-z 0-9 . _ -。", "Invalid id: start with a lowercase letter or digit; only a-z 0-9 . _ - allowed.")
+									})
+								]
+							})
 						}),
-						!advancedOpen && (cwdInvalid || rootsInvalid) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "dwa-error",
-							children: acp.label("里面有非法的工作空间路径", "Contains an invalid workspace path")
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dwa-form-row",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dwa-form-col",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+									className: "dwa-form-label",
+									children: acp.label("显示名", "Display Name")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									className: "dwa-input",
+									"aria-label": acp.label("显示名", "Display Name"),
+									value: form.title,
+									onChange: (e) => patch({ title: e.target.value }),
+									placeholder: detected.name === "" ? acp.label("我的 Agent", "My Agent") : detected.name
+								})]
+							})
 						}),
-						!advancedOpen && mcpInvalid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "dwa-error",
-							children: acp.label("里面的 MCP 服务器配置不是合法 JSON", "Contains an invalid MCP server list")
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dwa-form-row",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dwa-form-col",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+										className: "dwa-form-label",
+										children: acp.label("启动命令（程序 + 参数）", "Launch Command (program + arguments)")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										className: "dwa-input dwa-input-mono",
+										"aria-label": acp.label("启动命令（程序 + 参数）", "Launch Command (program + arguments)"),
+										value: form.commandLine,
+										onChange: (e) => patch({ commandLine: e.target.value }),
+										placeholder: detected.defaultCommand === "" ? "e.g. codebuddy --acp" : formatCommandLine(detected.defaultCommand, detected.defaultArgs)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dwa-hint",
+										children: commandPreview
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dwa-hint",
+										children: acp.label("含空格的程序路径请加引号。", "Quote the program path if it contains spaces.")
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceBlock, {
+							acp,
+							form,
+							patch,
+							cwdInvalid,
+							rootsInvalid
 						})
 					]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					style: advancedOpen ? void 0 : { display: "none" },
+					hidden: !advancedOpen,
 					children: [
 						!newCustom && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dwa-default-hint",
@@ -4125,13 +4223,6 @@ window.__ModuleLoader__.load({
 								})]
 							})
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceBlock, {
-							acp,
-							form,
-							patch,
-							cwdInvalid,
-							rootsInvalid
-						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "dwa-form-row",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4143,19 +4234,14 @@ window.__ModuleLoader__.load({
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 										className: "dwa-input dwa-input-mono",
+										"aria-label": acp.label("空闲释放（毫秒）", "Idle Release (ms)"),
 										value: form.idleStr,
 										onChange: (e) => patch({ idleStr: e.target.value }),
 										placeholder: acp.label(`留空 = 宿主默认（承载会话 ${String(DEFAULT_IDLE_RELEASE_MS / 6e4)} 分钟 / 探测进程 ${String(DEFAULT_PROBE_RELEASE_MS / 6e4)} 分钟）`, `Blank = host default (${String(DEFAULT_IDLE_RELEASE_MS / 6e4)} min for a chat process / ${String(DEFAULT_PROBE_RELEASE_MS / 6e4)} min for a probe)`)
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: idleInvalid ? "dwa-error" : "dwa-hint",
-										children: idleInvalid ? acp.label("必须是 0（永不释放）或 [1000, 86400000] 之间的整数毫秒。", "Must be 0 (never release) or an integer in [1000, 86400000] ms.") : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-											acp.label("空闲超过此时长就挂起进程（会话保留，下一条消息自动恢复）。", "The process is parked once it has been idle this long (the session is kept and resumes on the next message)."),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
-											acp.label("0 = 永不释放；回合在跑、取消未结算或审批待答时不释放。", "0 = never; a process with a running turn, an unsettled cancel, or a pending approval is never released."),
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
-											acp.label("只对承载过会话的进程生效；探测进程固定 5 分钟释放，填 0 也拦不住。", "This window applies only to a process that has hosted a session; the model-probe process is always released after 5 minutes, and 0 does not stop it.")
-										] })
+										children: idleInvalid ? acp.label("必须是 0（永不释放）或 [1000, 86400000] 之间的整数毫秒。", "Must be 0 (never release) or an integer in [1000, 86400000] ms.") : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: acp.label("承载过会话的进程空闲后挂起；0 不释放，探测进程固定 5 分钟。", "Park idle chat processes; 0 keeps them alive. Probe processes always release after 5 minutes.") })
 									})
 								]
 							})
@@ -4245,6 +4331,7 @@ window.__ModuleLoader__.load({
 										minHeight: 96,
 										resize: "vertical"
 									},
+									"aria-label": acp.label("MCP 服务器（JSON）", "MCP Servers (JSON)"),
 									value: form.mcpText,
 									onChange: (e) => patch({ mcpText: e.target.value }),
 									spellCheck: false,
@@ -4256,15 +4343,29 @@ window.__ModuleLoader__.load({
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "dwa-hint",
-									children: acp.label("这些 MCP 服务器会在建会话时交给 agent，由 agent 自己拉起并使用（stdio 需填 command，可选 args / env；http 与 sse 需填 url，可选 headers）。agent 自己配置的 MCP 服务器不受影响，这里只是额外追加。", "These MCP servers are handed to the agent when a session is created; the agent launches and uses them itself (stdio needs command, with optional args / env; http and sse need url, with optional headers). The MCP servers the agent configures for itself are unaffected — this only adds more.")
+									children: acp.label("额外追加给智能体的 MCP 服务器，不影响其已有配置。", "Additional MCP servers for the agent; its own configuration is unchanged.")
 								})
 							]
 						})
 					]
 				}),
+				!advancedOpen && (mcpInvalid || idleInvalid) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dwa-error",
+					role: "alert",
+					children: acp.label("请检查「高级」中的无效配置。", "Check the invalid settings in Advanced.")
+				}),
+				advancedOpen && (!idValid || idTaken || cwdInvalid || rootsInvalid || parsedCommand.command === "") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dwa-error",
+					role: "alert",
+					children: acp.label("请检查「连接」中的未完成或无效配置。", "Check the incomplete or invalid settings in Connection.")
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dwa-form-actions",
 					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dwa-hint",
+							children: isConfigured ? dirty ? acp.label("有未保存的更改", "Unsaved changes") : acp.label("配置已保存", "Settings saved") : ""
+						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							className: "dwa-btn",
 							onClick: onTest,
@@ -4275,8 +4376,8 @@ window.__ModuleLoader__.load({
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							className: "dwa-btn dwa-btn-primary",
 							onClick: onSave,
-							disabled: saving || testing || formIncomplete,
-							children: saving ? acp.label("保存中...", "Saving...") : savedSuccess ? acp.label("✓ 已保存", "✓ Saved") : isConfigured ? acp.label("保存", "Save") : acp.label("保存并启用", "Save & Enable")
+							disabled: saving || testing || formIncomplete || isConfigured && !dirty,
+							children: saving ? acp.label("保存中...", "Saving...") : savedSuccess ? acp.label("✓ 已保存", "✓ Saved") : isConfigured ? acp.label("保存更改", "Save changes") : acp.label("保存并启用", "Save & Enable")
 						}),
 						showSaveWarning && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							className: "dwa-hint",
@@ -4352,7 +4453,7 @@ window.__ModuleLoader__.load({
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "dwa-hint",
-								children: acp.label("对话里的 NTR 会话以该 DSH 会话选中的工作区为工作目录（agent 进程也从那里启动）；此项只在 /acp 直连会话与宿主未上报工作区时生效。", "An NTR session inside a conversation runs — and starts its agent process — in that DSH session’s own workspace; this value applies to /acp-direct sessions and when the host reports no workspace.")
+								children: acp.label("聊天使用会话工作区；此处用于直连会话或宿主未提供工作区时。", "Chats use their session workspace; this applies to direct sessions or when the host provides no workspace.")
 							}),
 							!form.rootsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: "dwa-hint",
@@ -4721,7 +4822,7 @@ window.__ModuleLoader__.load({
 											fontWeight: 400
 										},
 										title: acp.label("NTR 模式下的对话只列出这里勾选的模型；未勾选的仍可用——正在生效的那个也会以「· 当前」列出来，其余不列出。", "The NTR surfaces only list what is checked here; unchecked models still work, and the one currently in force is still listed with a \"· current\" row — the rest are not offered."),
-										children: acp.label("（NTR 座位 / 芯片的下拉列表）", "(the NTR seat and chip pickers)")
+										children: acp.label("仅影响菜单可见性", "Menu visibility only")
 									})]
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -4743,6 +4844,7 @@ window.__ModuleLoader__.load({
 										children: probing ? acp.label("模型检测中...", "Probing models...") : acp.label("检测可用模型", "Detect available models")
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 										className: "dwa-input dwa-model-search",
+										"aria-label": acp.label("搜索模型", "Search models"),
 										value: search,
 										onChange: (e) => setSearch(e.target.value),
 										placeholder: acp.label("搜索模型…", "Search models…")
@@ -4860,7 +4962,7 @@ window.__ModuleLoader__.load({
 									className: "dwa-model-list",
 									children: [selectedChoices.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "dwa-hint dwa-model-empty",
-										children: acp.label("还没有选择模型（点左侧的模型加入）", "Nothing selected yet — pick models on the left")
+										children: acp.label("尚未选择模型，从「全部模型」中加入。", "No models selected. Add from All models.")
 									}), selectedChoices.map((choice) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 										type: "button",
 										className: "dwa-model-row is-on",