dsh-ntr 0.2.0 → 0.3.0

package/lib/client.js

@@ -49,6 +49,12 @@ window.__ModuleLoader__.load({
 		const MAX_WATCHED = 6;
 		/** Raw JSON budget for one event block; the cut is marked. */
 		const RAW_MAX = 256e3;
+		/**
+		* How long a fetched update state stays fresh. The settings panel asks on every
+		* mount; without this, every open would hit the registry. A forced check (the
+		* card's own button) always goes out.
+		*/
+		const PLUGIN_UPDATE_TTL_MS = 6e5;
 		/** Pretty-printed JSON of an agent message (never throws, cuts only at {@link RAW_MAX} with a marker). */
 		function jsonText(value) {
 			let text;
@@ -262,6 +268,14 @@ window.__ModuleLoader__.load({
 				defaultCommand: "opencode",
 				defaultArgs: ["acp"]
 			},
+			{
+				id: "cursor",
+				name: "Cursor CLI",
+				description: "Cursor CLI — run as `agent acp` over stdio (legacy alias `cursor-agent acp`)",
+				detected: false,
+				defaultCommand: "agent",
+				defaultArgs: ["acp"]
+			},
 			{
 				id: "qwen",
 				name: "Qwen Code",
@@ -377,6 +391,22 @@ window.__ModuleLoader__.load({
 			cachedModelReads = /* @__PURE__ */ new Set();
 			/** Counts behind the last successful explicit re-detect, so a locale switch can re-render its summary. */
 			detectCounts;
+			/** When {@link UiState.pluginUpdate} was last read from the host (epoch ms). */
+			pluginUpdateFetchedAt = 0;
+			/**
+			* The shared in-flight `plugin/update-check`. The settings section mounts
+			* twice (both entries) and the update popover asks too; without this, two
+			* mounts in the same tick each fire their own registry read.
+			*/
+			pluginUpdateInflight;
+			/** Re-entry guard for `plugin/update-apply` (a double click is one install). */
+			pluginUpdateApplying = false;
+			/**
+			* Update read generation. An apply bumps it so a check that was already in
+			* flight (started before the install) cannot land afterwards and overwrite
+			* the install's verdict with the pre-install `available`.
+			*/
+			pluginUpdateGeneration = 0;
 			constructor(rpc, locale) {
 				this.rpc = rpc;
 				this.locale = locale;
@@ -499,14 +529,15 @@ window.__ModuleLoader__.load({
 			/** Snapshot refresh used on panel open and after a stream outage. */
 			async resync() {
 				try {
-					const [{ agents }, { sessions }, defaultAgentInfo, detectResult, presetResult, tagHaloResult, deadlinesResult] = await Promise.all([
+					const [{ agents }, { sessions }, defaultAgentInfo, detectResult, presetResult, tagHaloResult, deadlinesResult, versionResult] = await Promise.all([
 						this.call("agents/list"),
 						this.call("sessions/list"),
 						this.call("default/agent").catch(() => ({})),
 						this.call("agents/detect").catch(() => null),
 						this.call("preset/status").catch(() => null),
 						this.call("ui/tag-halo").catch(() => ({ halo: { ...DEFAULT_TAG_HALO } })),
-						this.call("ui/approval-deadlines").catch(() => ({ deadlines: void 0 }))
+						this.call("ui/approval-deadlines").catch(() => ({ deadlines: void 0 })),
+						this.call("plugin/version").catch(() => null)
 					]);
 					const detectedAgents = detectResult && detectResult.agents.length > 0 ? detectResult.agents : this.state.detectedAgents.length > 0 ? this.state.detectedAgents : [...DEFAULT_KNOWN_PRESETS];
 					this.mutate({
@@ -517,7 +548,8 @@ window.__ModuleLoader__.load({
 						detectedAgents,
 						preset: presetResult?.preset ?? void 0,
 						tagHalo: tagHaloResult?.halo ?? { ...DEFAULT_TAG_HALO },
-						approvalDeadlines: deadlinesResult.deadlines
+						approvalDeadlines: deadlinesResult.deadlines,
+						pluginVersion: versionResult?.version !== void 0 && versionResult.version !== "" ? versionResult.version : void 0
 					});
 					const active = this.state.activeSessionId ?? sessions[0]?.sessionId;
 					if (active !== void 0) await this.loadTranscript(active);
@@ -525,6 +557,89 @@ window.__ModuleLoader__.load({
 					this.mutate({ notice: String(error instanceof Error ? error.message : error) });
 				}
 			}
+			/**
+			* Read the plugin's update state (`plugin/update-check`). Throttled to ten
+			* minutes unless `force`: the settings panel asks on mount, and every
+			* remount must not hit the registry.
+			*
+			* An older host serves no such endpoint (`unknown endpoint`). That is a
+			* normal degradation, not an error worth a notice: the answer is `undefined`
+			* and the panel simply keeps its update entry hidden.
+			*/
+			async checkPluginUpdate(force = false) {
+				if (this.pluginUpdateInflight !== void 0) return this.pluginUpdateInflight;
+				const current = this.state.pluginUpdate;
+				if (!force && current !== void 0 && Date.now() - this.pluginUpdateFetchedAt < PLUGIN_UPDATE_TTL_MS) return current;
+				const generation = this.pluginUpdateGeneration;
+				const inflight = this.readPluginUpdate(generation);
+				this.pluginUpdateInflight = inflight;
+				try {
+					return await inflight;
+				} finally {
+					this.pluginUpdateInflight = void 0;
+				}
+			}
+			async readPluginUpdate(generation) {
+				try {
+					const pluginUpdate = await this.call("plugin/update-check");
+					if (generation !== this.pluginUpdateGeneration) return void 0;
+					this.pluginUpdateFetchedAt = Date.now();
+					this.mutate({ pluginUpdate });
+					return pluginUpdate;
+				} catch {
+					return;
+				}
+			}
+			/**
+			* Install one exact version (`plugin/update-apply`). The status flips to
+			* `applying` first so the badge answers the click; the host's answer then
+			* becomes the state.
+			*
+			* A failed call does NOT prove the install did not happen: on an HMR host
+			* the update uninstalls the plugin before reinstalling it, which can cut the
+			* response. Whatever the error, the disk may already carry the new version,
+			* so the state becomes `restart-required` (the one neutral verdict for "the
+			* running code is not the disk's") with `installed` dropped (unknown, not a
+			* fact to display) and the notice asks for a reload rather than restoring
+			* `available` and pretending nothing changed.
+			*/
+			async applyPluginUpdate(version) {
+				if (this.pluginUpdateApplying) return void 0;
+				this.pluginUpdateApplying = true;
+				this.pluginUpdateGeneration += 1;
+				const previous = this.state.pluginUpdate;
+				if (previous !== void 0) this.mutate({ pluginUpdate: {
+					...previous,
+					status: "applying"
+				} });
+				try {
+					const pluginUpdate = await this.call("plugin/update-apply", { version });
+					this.pluginUpdateFetchedAt = Date.now();
+					this.mutate({ pluginUpdate });
+					return pluginUpdate;
+				} catch (error) {
+					const message = error instanceof Error ? error.message : String(error);
+					const interrupted = previous !== void 0 ? {
+						...previous,
+						status: "restart-required",
+						installed: void 0,
+						message
+					} : {
+						status: "restart-required",
+						current: this.state.pluginVersion ?? "?",
+						message
+					};
+					this.pluginUpdateFetchedAt = 0;
+					this.mutate({
+						pluginUpdate: interrupted,
+						notice: this.locale("更新请求已中断；请刷新页面确认当前版本。", "The update request was interrupted. Reload the page to confirm the installed version.")
+					});
+					return;
+				} finally {
+					this.pluginUpdateGeneration += 1;
+					this.pluginUpdateApplying = false;
+				}
+			}
 			async detectAgents() {
 				this.mutate({ detecting: true });
 				try {
@@ -2612,18 +2727,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; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 .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 +2767,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); }
@@ -2652,26 +2785,36 @@ window.__ModuleLoader__.load({
 .dwa-badge-success { background: var(--dsw-alias-state-success-tertiary, #dcfce7); color: var(--ntr-success); }
 .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); }
+/* The update badge is a button (it expands the update card): strip the
+   browser's default button chrome, keep the badge look. */
+.dwa-update-badge { border: 0; font-family: inherit; cursor: pointer; }
+.dwa-update-badge:hover { opacity: 0.85; }
+/* The version badge doubles as the update entry: same badge look, no chrome. */
+.dwa-version-btn { border: 0; font-family: inherit; cursor: pointer; }
+.dwa-version-btn:hover { opacity: 0.85; }
+.dwa-version { font-family: var(--ds-font-family-code, monospace); }
+/* The update card sits between the page header and the permission mirror. */
+.dwa-update-card { margin-bottom: 16px; }
+.dwa-update-summary { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 550; }
+.dwa-update-copy { margin: 6px 0 0; color: var(--ntr-muted); font-size: var(--ntr-font-xs); }
+.dwa-update-message { margin: 6px 0 0; color: var(--ntr-muted); font-size: var(--ntr-font-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
+.dwa-update-actions { margin-top: 10px; }
 .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 +2823,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 +2837,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 +2872,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 +2892,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 +2922,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 +3423,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 +3449,161 @@ window.__ModuleLoader__.load({
 				})]
 			});
 		}
-		/** Settings configuration section for ACP agents. */
+		/** The states that carry an update badge next to the version badge. */
+		function updateBadgeText(update, acp) {
+			if (update.status === "available") return acp.label(`可更新 v${update.latest ?? update.current}`, `Update v${update.latest ?? update.current}`);
+			if (update.status === "applying") return acp.label("更新中…", "Updating…");
+			if (update.status === "applied") {
+				const installed = update.installed ?? update.latest ?? update.current;
+				return acp.label(`已更新 v${installed}`, `Updated v${installed}`);
+			}
+			if (update.status === "restart-required") {
+				if (update.installed === void 0) return void 0;
+				return acp.label(`待重启 v${update.installed}`, `Restart for v${update.installed}`);
+			}
+		}
+		/**
+		* The version badge's update companion. Every badge is a button, `applying`
+		* included: the card is where the install's outcome is read, so the running
+		* install must be able to open it too. States without anything to act on get
+		* no badge at all — the version badge itself still opens the card.
+		*/
+		function PluginUpdateBadge(props) {
+			const { acp, update, open, onToggle } = props;
+			const text = updateBadgeText(update, acp);
+			if (text === void 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "dwa-badge dwa-badge-info dwa-update-badge",
+				"aria-expanded": open,
+				"aria-controls": "ntr-plugin-update-card",
+				onClick: onToggle,
+				children: text
+			});
+		}
+		/**
+		* The update card. In-page, no dialog: the settings page already owns the one
+		* action (install the exact version the host reported), and a modal on top of
+		* a settings section would hide the version it is updating.
+		*
+		* The copy stays to one line per state (constraint 33); the host's raw error
+		* (`message`) is the only long text, and it wraps on its own line so a stack
+		* trace or a registry error is readable without stretching the card.
+		*/
+		function PluginUpdateCard(props) {
+			const { acp, update, onClose } = props;
+			const applying = update.status === "applying";
+			const latest = update.latest ?? update.current;
+			const onDisk = update.installed !== void 0 && update.installed !== update.current ? update.installed : void 0;
+			const published = update.publishedAt !== void 0 && !Number.isNaN(new Date(update.publishedAt).getTime()) ? new Date(update.publishedAt).toLocaleDateString() : void 0;
+			const copy = update.status === "available" ? acp.label("更新会卸载并重装插件，之后可能需要重启 DSH。", "Updating uninstalls and reinstalls the plugin, and may require restarting DSH.") : update.status === "applied" ? acp.label("已应用，刷新页面即可使用新版本。", "Applied. Reload the page to use the new version.") : update.status === "restart-required" ? update.installed !== void 0 ? acp.label(`磁盘已是 v${update.installed}，重启 DSH 后生效（桌面 App 退出重开；命令行重启 dsh web）。`, `On disk v${update.installed}. Restart DSH to apply (quit and reopen the app, or restart dsh web).`) : acp.label("更新可能已完成，请刷新页面确认当前版本。", "The update may already be complete. Refresh the page to confirm the current version.") : update.status === "busy" ? acp.label("有进行中的对话，结束后才能更新。", "Finish the running conversation before updating.") : update.status === "failed" ? acp.label("更新失败。", "Update failed.") : update.status === "current" ? acp.label("已是最新版本。", "Up to date.") : update.status === "source-install" ? acp.label("源码或本地安装，无法通过 registry 更新。", "Source or local install; update it through its own checkout.") : update.status === "managed" ? acp.label("此安装由宿主管理，不能在这里更新。", "This install is managed by the host and cannot be updated here.") : void 0;
+			const showMessage = (update.status === "failed" || update.status === "busy" || update.status === "managed") && update.message !== void 0;
+			const apply = async () => {
+				if (update.latest === void 0) return;
+				try {
+					await acp.applyPluginUpdate(update.latest);
+				} catch {}
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				id: "ntr-plugin-update-card",
+				className: "dwa-card dwa-update-card",
+				role: "group",
+				"aria-label": acp.label("插件更新", "Plugin update"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dwa-update-summary",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: acp.label(`当前 v${update.current}`, `Current v${update.current}`) }),
+							onDisk !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dwa-hint",
+								children: acp.label(`磁盘 v${onDisk}`, `On disk v${onDisk}`)
+							}),
+							update.latest !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									"aria-hidden": "true",
+									children: "→"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: acp.label(`最新 v${latest}`, `Latest v${latest}`) }),
+								published !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dwa-hint",
+									children: published
+								})
+							] })
+						]
+					}),
+					copy !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dwa-update-copy",
+						children: copy
+					}),
+					showMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dwa-update-message",
+						children: update.message
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dwa-row-actions dwa-update-actions",
+						children: [
+							update.status === "available" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dwa-btn dwa-btn-primary",
+								onClick: () => {
+									apply();
+								},
+								children: acp.label("更新", "Update")
+							}),
+							applying && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dwa-btn dwa-btn-primary",
+								disabled: true,
+								children: acp.label("正在更新…", "Updating…")
+							}),
+							update.status !== "applying" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dwa-btn",
+								onClick: onClose,
+								children: acp.label("关闭", "Close")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dwa-btn dwa-btn-quiet",
+								disabled: applying,
+								onClick: () => void acp.checkPluginUpdate(true),
+								children: acp.label("重新检查", "Check again")
+							})
+						]
+					})
+				]
+			});
+		}
+		/**
+		* The card is drawn for every state a host can report about this install,
+		* except the two where there is no install to talk about at all.
+		*/
+		function updateCardVisible(update, open) {
+			if (update === void 0 || !open) return false;
+			return update.status !== "unsupported" && update.status !== "not-installed";
+		}
 		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 [updateOpen, setUpdateOpen] = (0, react.useState)(false);
+			(0, react.useEffect)(() => {
+				acp.checkPluginUpdate();
+			}, [acp]);
 			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);
+			const update = ui.pluginUpdate;
+			const versionTitle = update?.status === "source-install" ? acp.label("源码或本地安装，无法通过 registry 更新。", "Source or local install; update it through its own checkout.") : void 0;
+			const versionOpensUpdate = update !== void 0 && update.status !== "unsupported" && update.status !== "not-installed";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dwa-root",
 				children: [
@@ -3319,41 +3611,47 @@ 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.jsxs)("h2", {
+								className: "dwa-page-title",
+								"aria-label": acp.label("NTR 设置", "NTR settings"),
+								children: [
+									acp.label("NTR 设置", "NTR settings"),
+									ui.pluginVersion !== void 0 && (versionOpensUpdate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dwa-badge dwa-version dwa-version-btn",
+										title: versionTitle,
+										"aria-expanded": updateOpen,
+										"aria-controls": "ntr-plugin-update-card",
+										onClick: () => setUpdateOpen((open) => !open),
+										children: `v${ui.pluginVersion}`
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dwa-badge dwa-version",
+										title: versionTitle,
+										children: `v${ui.pluginVersion}`
+									})),
+									update !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PluginUpdateBadge, {
+										acp,
+										update,
+										open: updateOpen,
+										onToggle: () => setUpdateOpen((open) => !open)
+									})
+								]
+							}), /* @__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")
 						})]
 					}),
+					update !== void 0 && updateCardVisible(update, updateOpen) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PluginUpdateCard, {
+						acp,
+						update,
+						onClose: () => setUpdateOpen(false)
+					}),
 					ledger.visible && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "dwa-card dwa-card-warn",
 						style: { marginBottom: 16 },
@@ -3393,18 +3691,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 +3722,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 +3829,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 +3875,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 +3931,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 +3963,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 +4010,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 +4074,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 +4116,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 +4124,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 +4141,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 +4168,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 +4187,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 +4222,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 +4288,7 @@ window.__ModuleLoader__.load({
 								onUseDefault: handleUseDefault,
 								onSave: () => void handleSave(),
 								onTest: () => void handleTest()
-							})]
+							})
 						})
 					]
 				})]
@@ -3976,111 +4391,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.")
+									})
+								]
+							})
+						}),
+						/* @__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 && (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("启动命令（程序 + 参数）", "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.")
+									})
+								]
+							})
 						}),
-						!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)(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 +4519,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 +4530,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 +4627,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 +4639,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 +4672,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 +4749,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 +5118,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 +5140,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 +5258,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",