dsh-ntr 0.1.6 → 0.2.1

package/lib/client.js

@@ -14,6 +14,36 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 		//#region src/client/store.ts
+		/** Returned by {@link deadlineRemainingLabel} once the deadline has passed. */
+		const PERMISSION_DEADLINE_EXPIRED = "expired";
+		/**
+		* The asks that belong to one DSH chat conversation. An ask without a
+		* `dshSessionId` belongs to no conversation (an `/acp` RPC-only session), so it
+		* is deliberately absent from every conversation's dock and stays in the
+		* settings-panel ledger.
+		*/
+		function permissionsForSession(permissions, dshSessionId) {
+			return permissions.filter((permission) => permission.dshSessionId === dshSessionId);
+		}
+		/**
+		* Compact countdown for one ask, or `undefined` when there is nothing to count
+		* down (`wait` mode, or a frame without a deadline). Pure so the formatting is
+		* testable without a clock: the dock passes `Date.now()` on its tick.
+		*
+		* Past the deadline the answer is {@link PERMISSION_DEADLINE_EXPIRED} rather
+		* than a negative number — the host has already armed the expiry, and a card
+		* counting backwards would claim a deadline that no longer exists.
+		*/
+		function deadlineRemainingLabel(deadlineAt, now, mode) {
+			if (mode === "wait" || deadlineAt === void 0) return void 0;
+			const remainingMs = deadlineAt - now;
+			if (remainingMs <= 0) return PERMISSION_DEADLINE_EXPIRED;
+			const seconds = Math.ceil(remainingMs / 1e3);
+			if (seconds < 60) return `${String(seconds)}s`;
+			const minutes = Math.floor(seconds / 60);
+			const rest = seconds % 60;
+			return rest === 0 ? `${String(minutes)}m` : `${String(minutes)}m ${String(rest)}s`;
+		}
 		const MAX_BLOCKS = 400;
 		/** How many observed ACP transcripts stay live at once (insertion-ordered eviction). */
 		const MAX_WATCHED = 6;
@@ -284,7 +314,6 @@ window.__ModuleLoader__.load({
 				seatCatalogs: {},
 				probingModels: {},
 				probeErrors: {},
-				approvalRouted: false,
 				chatSessions: [],
 				tagHalo: { ...DEFAULT_TAG_HALO },
 				approvalDeadlines: void 0,
@@ -470,7 +499,7 @@ window.__ModuleLoader__.load({
 			/** Snapshot refresh used on panel open and after a stream outage. */
 			async resync() {
 				try {
-					const [{ agents, approvalRouted }, { sessions }, defaultAgentInfo, detectResult, presetResult, tagHaloResult, deadlinesResult] = await Promise.all([
+					const [{ agents }, { sessions }, defaultAgentInfo, detectResult, presetResult, tagHaloResult, deadlinesResult] = await Promise.all([
 						this.call("agents/list"),
 						this.call("sessions/list"),
 						this.call("default/agent").catch(() => ({})),
@@ -486,7 +515,6 @@ window.__ModuleLoader__.load({
 						sessions,
 						defaultAgent: defaultAgentInfo?.agentId,
 						detectedAgents,
-						approvalRouted: approvalRouted === true,
 						preset: presetResult?.preset ?? void 0,
 						tagHalo: tagHaloResult?.halo ?? { ...DEFAULT_TAG_HALO },
 						approvalDeadlines: deadlinesResult.deadlines
@@ -1113,6 +1141,14 @@ window.__ModuleLoader__.load({
 					this.flashError(error);
 				}
 			}
+			/**
+			* Answer one ask (`optionId` absent = cancel it). A failure is reported
+			* through the store's notice — the settings panel renders that — AND
+			* rethrown, so the conversation dock can pin the message next to the card
+			* that failed instead of leaving it on a settings page the user may not
+			* have open. Callers that cannot show it (the settings panel) swallow it
+			* after the notice.
+			*/
 			async respondPermission(requestId, optionId) {
 				try {
 					await this.call("permission/respond", {
@@ -1121,6 +1157,7 @@ window.__ModuleLoader__.load({
 					});
 				} catch (error) {
 					this.flashError(error);
+					throw error;
 				}
 			}
 			async stopAgent(agentId) {
@@ -1437,13 +1474,17 @@ window.__ModuleLoader__.load({
 						return this.loadAgentCatalog(event.agentId);
 					}
 					case "permission/request": {
-						const title = typeof event.toolCall?.title === "string" ? String(event.toolCall.title) : this.locale("工具调用", "tool call");
-						this.mutate({ permissions: [...this.state.permissions.filter((p) => p.requestId !== event.requestId), {
+						const permission = {
 							requestId: event.requestId,
 							sessionId: event.sessionId,
-							title,
-							options: event.options
-						}] });
+							...event.dshSessionId === void 0 ? {} : { dshSessionId: event.dshSessionId },
+							toolName: event.toolName,
+							...event.reason === void 0 ? {} : { reason: event.reason },
+							options: event.options,
+							timeoutMode: event.timeoutMode,
+							...event.deadlineAt === void 0 ? {} : { deadlineAt: event.deadlineAt }
+						};
+						this.mutate({ permissions: [...this.state.permissions.filter((p) => p.requestId !== event.requestId), permission] });
 						return Promise.resolve();
 					}
 					case "permission/resolved":
@@ -2380,9 +2421,9 @@ window.__ModuleLoader__.load({
 .ntr-acp-seat:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-active, #0000000d); }
 .ntr-acp-seat:disabled { opacity: 0.5; cursor: default; }
 .ntr-acp-seat.is-open { border-color: var(--dsw-alias-state-business-primary, #2563eb); color: var(--dsw-alias-state-business-primary, #2563eb); }
-.ntr-acp-seat.is-detached { border-color: var(--ntr-warn, #d97706); color: var(--ntr-warn, #d97706); }
+.ntr-acp-seat.is-detached { border-color: var(--dsw-alias-state-warn-label, #d97706); color: var(--dsw-alias-state-warn-label, #d97706); }
 .ntr-acp-seat-main { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ntr-acp-seat-sub { color: var(--dsw-alias-text-secondary, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ntr-acp-seat-sub { color: var(--dsw-alias-label-secondary, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ntr-acp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
 .ntr-acp-tick { margin-left: auto; color: var(--dsw-alias-state-business-primary, #2563eb); }
 .ntr-acp-check { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 13px; height: 13px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); border-radius: 3px; font-size: 10px; line-height: 1; color: var(--dsw-alias-state-business-primary, #2563eb); }
@@ -2391,80 +2432,108 @@ window.__ModuleLoader__.load({
 .ntr-acp-menu-head { padding: 8px 10px 6px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
 .ntr-acp-menu-title { flex: 1; }
 .ntr-acp-menu-spin { opacity: 0.5; }
-.ntr-acp-menu-note { padding: 0 10px 6px; font-size: 11px; color: var(--dsw-alias-text-secondary, #6b7280); line-height: 1.5; }
-.ntr-acp-menu-error { margin: 0 10px 6px; padding: 6px 8px; border-radius: 6px; background: #fee2e2; color: #b91c1c; font-size: 11px; }
+.ntr-acp-menu-note { padding: 0 10px 6px; font-size: 11px; color: var(--dsw-alias-label-secondary, #6b7280); line-height: 1.5; }
+.ntr-acp-menu-error { margin: 0 10px 6px; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #b91c1c) 12%, transparent); color: var(--dsw-alias-state-error-primary, #b91c1c); font-size: 11px; }
 .ntr-acp-menu-body { overflow: auto; padding: 0 4px 6px; }
 .ntr-acp-menu-section { display: flex; flex-direction: column; padding-top: 4px; }
-.ntr-acp-menu-section-title { padding: 6px 8px 4px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-menu-section-title { padding: 6px 8px 4px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-menu-item { display: flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; text-align: left; padding: 6px 8px; border: none; border-radius: 6px; background: none; color: inherit; cursor: pointer; width: 100%; }
 .ntr-acp-menu-item:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-active, #0000000d); }
 .ntr-acp-menu-item:disabled { opacity: 0.45; cursor: default; }
 .ntr-acp-menu-item.is-active { font-weight: 600; }
 .ntr-acp-menu-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ntr-acp-menu-item-detail { color: var(--dsw-alias-text-secondary, #6b7280); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: right; }
-.ntr-acp-menu-empty { padding: 10px; text-align: center; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-menu-item-detail { color: var(--dsw-alias-label-secondary, #6b7280); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: right; }
+.ntr-acp-menu-empty { padding: 10px; text-align: center; color: var(--dsw-alias-label-secondary, #6b7280); }
 /* ---- ACP view tab ---- */
 .ntr-acp-view { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: 13px; line-height: 1.6; }
-.ntr-acp-view-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--dsw-alias-border-l2, #e5e7eb); font-size: 12px; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-view-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--dsw-alias-border-l2, #e5e7eb); font-size: 12px; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-view-agent { font-weight: 600; color: inherit; }
 .ntr-acp-view-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; direction: rtl; text-align: left; }
 .ntr-acp-view-head .ntr-acp-more { margin-left: auto; }
 .ntr-acp-stream { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 24px; display: flex; flex-direction: column; gap: 10px; }
 .ntr-acp-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; }
-.ntr-acp-badge.is-done { color: #15803d; background: #dcfce7; }
-.ntr-acp-badge.is-busy { color: #1d4ed8; background: #dbeafe; }
-.ntr-acp-badge.is-warn { color: #b45309; background: #fef3c7; }
-.ntr-acp-badge.is-fail { color: #b91c1c; background: #fee2e2; }
-.ntr-acp-badge.is-idle { color: var(--dsw-alias-text-secondary, #6b7280); background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
+.ntr-acp-badge.is-done { color: color-mix(in srgb, var(--dsw-alias-state-success-primary, #22c55e) 72%, var(--dsw-alias-label-primary, #111827)); background: var(--dsw-alias-state-success-tertiary, #dcfce7); }
+.ntr-acp-badge.is-busy { color: var(--dsw-alias-state-business-primary, #1d4ed8); background: var(--dsw-alias-state-business-tertiary, #dbeafe); }
+.ntr-acp-badge.is-warn { color: var(--dsw-alias-state-warn-label, #b45309); background: var(--dsw-alias-state-warn-tertiary, #fef3c7); }
+.ntr-acp-badge.is-fail { color: var(--dsw-alias-state-error-primary, #b91c1c); background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #b91c1c) 12%, transparent); }
+.ntr-acp-badge.is-idle { color: var(--dsw-alias-label-secondary, #6b7280); background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
 .ntr-acp-bubble { max-width: 88%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
 .ntr-acp-bubble.is-user { align-self: flex-end; background: color-mix(in srgb, var(--dsw-alias-state-business-primary, #2563eb) 12%, transparent); }
 .ntr-acp-bubble.is-agent { align-self: flex-start; background: var(--dsw-alias-bg-layer-2, #f3f4f6); }
 .ntr-acp-inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 10%, transparent); }
 .ntr-acp-code { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: #0f172a; color: #e2e8f0; overflow: auto; font-size: 12px; line-height: 1.5; }
-.ntr-acp-thought { border-left: 3px solid var(--dsw-alias-border-l2, #d1d5db); padding-left: 8px; color: var(--dsw-alias-text-secondary, #6b7280); font-size: 12px; }
+.ntr-acp-thought { border-left: 3px solid var(--dsw-alias-border-l2, #d1d5db); padding-left: 8px; color: var(--dsw-alias-label-secondary, #6b7280); font-size: 12px; }
 .ntr-acp-thought > summary { cursor: pointer; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
 .ntr-acp-thought-body { white-space: pre-wrap; padding: 4px 0 2px; }
 .ntr-acp-tool { border: 1px solid var(--dsw-alias-border-l2, #e5e7eb); border-radius: 10px; background: var(--dsw-alias-bg-layer-1, #fff); overflow: hidden; }
-.ntr-acp-tool.is-fail { border-color: #fca5a5; }
+.ntr-acp-tool.is-fail { border-color: var(--dsw-alias-state-error-secondary, #fca5a5); }
 .ntr-acp-tool-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12px; }
 .ntr-acp-tool-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ntr-acp-tool-body { margin: 0; padding: 8px 10px; border-top: 1px solid var(--dsw-alias-border-l2, #e5e7eb); background: var(--dsw-alias-bg-layer-2, #f9fafb); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto; }
-.ntr-acp-tool-input { background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-text-primary, #111827); max-height: 240px; }
-.ntr-acp-tool-meta { font-size: 11px; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-tool-input { background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #111827); max-height: 240px; }
+.ntr-acp-tool-meta { font-size: 11px; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-diff { border-top: 1px solid var(--dsw-alias-border-l2, #e5e7eb); }
 .ntr-acp-diff-head { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: var(--dsw-alias-bg-layer-2, #f9fafb); }
 .ntr-acp-diff-path { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ntr-acp-diff-stats .is-add { color: #15803d; }
-.ntr-acp-diff-stats .is-del { color: #b91c1c; }
+.ntr-acp-diff-stats .is-add { color: var(--dsw-alias-state-success-primary, #15803d); }
+.ntr-acp-diff-stats .is-del { color: var(--dsw-alias-state-error-primary, #b91c1c); }
 .ntr-acp-diff-body { max-height: 360px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.55; }
 .ntr-acp-diff-row { display: flex; gap: 8px; padding: 0 10px; white-space: pre; }
-.ntr-acp-diff-row.is-add { background: #dcfce7; }
-.ntr-acp-diff-row.is-del { background: #fee2e2; }
-.ntr-acp-diff-row.is-ctx { color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-diff-row.is-add { background: var(--dsw-alias-file-diff-added-bg, #dcfce7); }
+.ntr-acp-diff-row.is-del { background: var(--dsw-alias-file-diff-deleted-bg, #fee2e2); }
+.ntr-acp-diff-row.is-ctx { color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-diff-sign { width: 1ch; flex: none; opacity: 0.7; }
 .ntr-acp-diff-text { overflow-x: auto; }
-.ntr-acp-diff-note { padding: 4px 10px 6px; font-size: 11px; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-diff-note { padding: 4px 10px 6px; font-size: 11px; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-more { font: inherit; font-size: 11.5px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: inherit; cursor: pointer; }
 .ntr-acp-more:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-active, #0000000d); }
 .ntr-acp-more:disabled { opacity: 0.5; cursor: default; }
-.ntr-acp-more.is-primary { border-color: transparent; background: var(--dsw-alias-button-primary-fill, #2563eb); color: var(--dsw-alias-button-primary-invert, #fff); }
+.ntr-acp-more.is-primary { border-color: transparent; background: var(--dsw-alias-button-primary-fill, #2563eb); color: var(--dsw-alias-label-primary-foreground, #fff); }
 .ntr-acp-tool > .ntr-acp-more, .ntr-acp-empty-actions .ntr-acp-more { margin: 6px 10px; }
 .ntr-acp-plan { border: 1px solid var(--dsw-alias-border-l2, #e5e7eb); border-radius: 10px; padding: 8px 10px; background: var(--dsw-alias-bg-layer-1, #fff); }
-.ntr-acp-plan-head { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dsw-alias-text-secondary, #6b7280); margin-bottom: 4px; }
+.ntr-acp-plan-head { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dsw-alias-label-secondary, #6b7280); margin-bottom: 4px; }
 .ntr-acp-plan-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 1px 0; }
-.ntr-acp-plan-row.is-completed { color: var(--dsw-alias-text-secondary, #6b7280); text-decoration: line-through; }
+.ntr-acp-plan-row.is-completed { color: var(--dsw-alias-label-secondary, #6b7280); text-decoration: line-through; }
 .ntr-acp-plan-row.is-in_progress { font-weight: 600; }
 .ntr-acp-plan-glyph { width: 1ch; flex: none; }
-.ntr-acp-plan-prio { margin-left: auto; font-size: 10px; text-transform: uppercase; color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-plan-prio { margin-left: auto; font-size: 10px; text-transform: uppercase; color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-notice { padding: 6px 10px; border-radius: 8px; font-size: 12px; }
-.ntr-acp-notice.is-error { background: #fee2e2; color: #b91c1c; }
-.ntr-acp-notice.is-info { background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: var(--dsw-alias-text-secondary, #6b7280); }
+.ntr-acp-notice.is-error { background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #b91c1c) 12%, transparent); color: var(--dsw-alias-state-error-primary, #b91c1c); }
+.ntr-acp-notice.is-info { background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: var(--dsw-alias-label-secondary, #6b7280); }
 .ntr-acp-empty { margin: auto; max-width: 460px; text-align: center; display: flex; flex-direction: column; gap: 10px; padding: 24px; }
 .ntr-acp-empty-title { font-size: 14px; font-weight: 600; }
-.ntr-acp-empty-body { margin: 0; color: var(--dsw-alias-text-secondary, #6b7280); font-size: 12.5px; line-height: 1.7; }
-.ntr-acp-empty-hint { color: var(--dsw-alias-text-secondary, #6b7280); font-size: 12px; }
-.ntr-acp-seat-diag { font-family: var(--dsw-alias-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); opacity: 0.72; word-break: break-word; }
+.ntr-acp-empty-body { margin: 0; color: var(--dsw-alias-label-secondary, #6b7280); font-size: 12.5px; line-height: 1.7; }
+.ntr-acp-empty-hint { color: var(--dsw-alias-label-secondary, #6b7280); font-size: 12px; }
+.ntr-acp-seat-diag { font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace); opacity: 0.72; word-break: break-word; }
 .ntr-acp-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
+/* ---- Pending permission asks (conversation.input.dock) ---- */
+/* The dock slot is the full conversation column, but the composer card inside
+   it is narrower (InputBar: side clearance + card max width). Mirror that
+   formula so each ask lines up with the input box instead of spanning the
+   column. The list owns a bounded height and scrolls so a burst of asks cannot
+   push the composer off screen. */
+.ntr-permission-dock {
+  box-sizing: border-box;
+  width: calc(100% - var(--dsh-composer-side-clearance, 16px) - var(--dsh-composer-side-clearance, 16px));
+  max-width: var(--dsh-composer-card-max-width, 920px);
+  margin: 0 auto;
+  display: flex; flex-direction: column; gap: 6px;
+  max-height: min(38vh, 320px); overflow-y: auto;
+  font-size: 12px; line-height: 1.5;
+}
+.ntr-permission-card { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); border-left: 3px solid var(--dsw-alias-state-warn-primary, #d97706); border-radius: 10px; background: var(--dsw-alias-bg-layer-1, #fff); }
+.ntr-permission-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.ntr-permission-tool { flex: none; font-weight: 600; }
+.ntr-permission-reason { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsw-alias-label-secondary, #6b7280); }
+.ntr-permission-deadline { flex: none; font-size: 11px; color: var(--dsw-alias-label-secondary, #6b7280); font-variant-numeric: tabular-nums; }
+.ntr-permission-deadline.is-expired { color: var(--dsw-alias-state-warn-label, #b45309); font-weight: 600; }
+.ntr-permission-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.ntr-permission-option, .ntr-permission-cancel { font: inherit; font-size: 12px; line-height: 1.4; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l2, #d1d5db); background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: inherit; cursor: pointer; white-space: normal; text-align: left; }
+.ntr-permission-option:hover:not(:disabled), .ntr-permission-cancel:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-active, #0000000d); }
+.ntr-permission-option:disabled, .ntr-permission-cancel:disabled { opacity: 0.5; cursor: default; }
+.ntr-permission-option:focus-visible, .ntr-permission-cancel:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, #2563eb); outline-offset: 2px; }
+.ntr-permission-cancel { margin-left: auto; color: var(--dsw-alias-label-secondary, #6b7280); }
+.ntr-permission-error { padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #b91c1c) 12%, transparent); color: var(--dsw-alias-state-error-primary, #b91c1c); font-size: 11px; word-break: break-word; }
 /* ---- NTR settings dialog (shell.overlay) ---- */
 /* Frame-wide surface opened from the agent base's empty-roster menu. The
    overlay layer itself is click-through, so the layer opts back in and blocks
@@ -2501,11 +2570,11 @@ window.__ModuleLoader__.load({
 		* React surface for ACP: the settings configuration section.
 		*
 		* Scope is deliberately narrow — this is a CONFIGURATION surface. Runtime
-		* interaction lives in the conversation: permission asks are answered in the
-		* chat composer through the host approval chain. The ledger card answers
-		* whatever did NOT reach the conversation — a host without the chain, a
-		* session with no chat identity behind it, or an ask whose native route
-		* degraded to unavailable (see `permissionLedgerCard`).
+		* interaction lives in the conversation: every permission ask with a chat
+		* identity is answered on a card above that conversation's composer
+		* (`permission-dock.tsx`). The ledger card here is the cross-session mirror —
+		* asks whose conversation is not open, or which have no chat identity at all —
+		* and is where those are answered (see `permissionLedgerCard`).
 		*
 		* Each configured agent is one compact row (status + current model + badges)
 		* that expands into the full connection form and model catalog. The row stays
@@ -2537,22 +2606,40 @@ window.__ModuleLoader__.load({
   --ntr-radius: 10px; --ntr-radius-sm: 7px;
   --ntr-font: 13px; --ntr-font-sm: 12px; --ntr-font-xs: 11px;
   --ntr-line: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
-  --ntr-muted: var(--dsw-alias-text-secondary, #6b7280);
-  --ntr-danger: #dc2626; --ntr-warn: #b45309;
+  --ntr-muted: var(--dsw-alias-label-secondary, #6b7280);
+  --ntr-danger: var(--dsw-alias-state-error-primary, #dc2626);
+  --ntr-warn: var(--dsw-alias-state-warn-label, #b45309);
+  --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);
@@ -2562,58 +2649,58 @@ window.__ModuleLoader__.load({
 }
 .dwa-btn:hover { background: var(--dsw-alias-interactive-bg-active, #f3f4f6); border-color: var(--dsw-alias-border-l1, #9ca3af); }
 .dwa-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-.dwa-btn-primary { background: var(--ntr-accent); color: var(--dsw-alias-button-primary-invert, #fff); border-color: transparent; font-weight: 550; }
+.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-danger { color: var(--ntr-danger); border-color: #fca5a5; }
-.dwa-btn-danger:hover { background: #fee2e2; }
+.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-secondary, #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); }
 .dwa-mode-source { display: block; margin-top: 5px; overflow-wrap: anywhere; opacity: 0.85; }
 .dwa-badge { font-size: var(--ntr-font-xs); line-height: 1.4; border-radius: 999px; padding: 2px 8px; background: var(--dsw-alias-bg-layer-2, #f3f4f6); color: var(--ntr-muted); font-weight: 550; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
-.dwa-badge-success { background: #22c55e1c; color: #15803d; }
-.dwa-badge-warn { background: #f59e0b1f; color: #b45309; }
-.dwa-badge-info { background: #3b82f61a; color: #2563eb; }
+.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); }
 .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-text-primary, #374151); }
+.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); }
 .dwa-error { font-size: var(--ntr-font-xs); color: var(--ntr-danger); }
 .dwa-input { min-height: 36px; font: inherit; font-size: var(--ntr-font-sm); padding: 7px 10px; 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; width: 100%; box-sizing: border-box; }
 .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; }
@@ -2621,13 +2708,13 @@ 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: #3b82f614; color: #2563eb; font-weight: 550; }
+.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; }
 .dwa-chip-list { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
 .dwa-switch { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ntr-font-sm); cursor: pointer; user-select: none; }
 .dwa-inline-setting { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--ntr-radius-sm); background: var(--dsw-alias-bg-layer-2, #f9fafb); }
@@ -2640,7 +2727,7 @@ window.__ModuleLoader__.load({
 /* Tall enough for a comfortable selection (about ten rows) before scrolling;
    the cap keeps the two stacked panes from pushing the rest of the card away. */
 .dwa-model-pane { min-width: 0; max-height: 360px; display: flex; flex-direction: column; border: var(--ntr-line); border-radius: var(--ntr-radius-sm); background: var(--dsw-alias-bg-layer-1, #fff); overflow: hidden; }
-.dwa-model-pane-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: var(--ntr-line); font-size: var(--ntr-font-xs); font-weight: 600; color: var(--dsw-alias-text-secondary, #4b5563); }
+.dwa-model-pane-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: var(--ntr-line); font-size: var(--ntr-font-xs); font-weight: 600; color: var(--dsw-alias-label-secondary, #4b5563); }
 .dwa-model-pane-head .dwa-btn { margin-left: auto; min-height: 26px; padding: 2px 8px; font-size: var(--ntr-font-xs); }
 .dwa-model-pane-head .dwa-caret-btn { flex: none; width: 22px; height: 22px; background: transparent; }
 .dwa-model-pane-head .dwa-caret-btn:hover { background: var(--dsw-alias-interactive-bg-active, #e5e7eb); }
@@ -2656,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: #3b82f614; color: #2563eb; }
+.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
@@ -2676,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-button-primary-invert, #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
@@ -2706,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
@@ -2739,19 +2833,19 @@ window.__ModuleLoader__.load({
 		function stateVisual(state, acp) {
 			switch (state) {
 				case "ready": return {
-					color: "#22c55e",
+					color: "var(--dsw-alias-state-success-primary, #22c55e)",
 					text: acp.label("已连接", "Connected")
 				};
 				case "starting": return {
-					color: "#eab308",
+					color: "var(--dsw-alias-state-warn-primary, #eab308)",
 					text: acp.label("启动中", "Starting")
 				};
 				case "error": return {
-					color: "#ef4444",
+					color: "var(--dsw-alias-state-error-primary, #ef4444)",
 					text: acp.label("错误", "Error")
 				};
 				default: return {
-					color: "#9ca3af",
+					color: "var(--dsw-alias-state-idle-primary, #9ca3af)",
 					text: acp.label("已配置", "Configured"),
 					title: acp.label("已配置，进程不常驻。在 DSH 聊天中首次使用时自动连接；展开区可用「测试连接」验证命令能否正常起来。", "Configured; the process is not kept resident. It connects automatically the first time a DSH chat turn uses it — use “Test connection” in the expanded panel to verify the command starts.")
 				};
@@ -2924,25 +3018,15 @@ window.__ModuleLoader__.load({
 		/**
 		* The settings panel's permission-ledger rule.
 		*
-		* A pending ask ALWAYS gets an answerable card here, whatever `approvalRouted`
-		* says. That flag reports that the host HAS an approval service — it does not
-		* promise THIS ask reached the conversation. An ask lands in `ui.permissions`
-		* only on the ledger path (`AgentBridge.handlePermissionRequest` broadcasts
-		* `permission/request` there and nowhere else), so a pending entry is by
-		* definition a question the conversation is not showing. The previous rule
-		* (`approvalRouted` → a read-only count, no buttons) hid the only answer
-		* entry exactly when the native route had degraded to unavailable, and the
-		* ask then hung until its timeout.
-		*
-		* `fellBackFromConversation` is the case the card has to explain: the host
-		* can route asks, and this one still did not make it.
+		* Pending asks are shown in the conversation card while that conversation is
+		* open; this card is the cross-session mirror for the ones it cannot show —
+		* asks belonging to another conversation, and `/acp` RPC-only asks with no
+		* chat identity at all. It therefore appears whenever ANY ask is pending: a
+		* pending entry with no conversation card would otherwise have no answer
+		* surface anywhere.
 		*/
 		function permissionLedgerCard(ui) {
-			const visible = ui.permissions.length > 0;
-			return {
-				visible,
-				fellBackFromConversation: visible && ui.approvalRouted
-			};
+			return { visible: ui.permissions.length > 0 };
 		}
 		/**
 		* The ONE wait window, as the rungs the slider snaps to.
@@ -3210,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,
@@ -3240,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: [
@@ -3258,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" ? "#22c55e" : ui.stream === "down" ? "#ef4444" : "#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", {
@@ -3300,14 +3363,14 @@ window.__ModuleLoader__.load({
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								style: {
 									fontWeight: 600,
-									marginBottom: 8
+									marginBottom: 4
 								},
 								children: acp.label("待处理权限请求", "Pending Permission Requests")
 							}),
-							ledger.fellBackFromConversation && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "dwa-hint",
 								style: { marginBottom: 8 },
-								children: acp.label("这些询问没有进入对话（审批服务本次不可用、问题从未到达对话，或会话没有对话身份），请在此回答。", "These asks did not reach the conversation (the approval service was unavailable, the question never reached the conversation, or the session has no chat identity) — answer them here.")
+								children: acp.label("对话打开时在那边的卡片上回答；这里兜底显示其他会话的询问。", "Answer in the conversation card while that conversation is open; this list covers the asks whose conversation is not.")
 							}),
 							ui.permissions.map((permission) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								style: {
@@ -3318,22 +3381,34 @@ window.__ModuleLoader__.load({
 									flexWrap: "wrap"
 								},
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 										style: {
 											flex: 1,
 											minWidth: 160
 										},
-										children: permission.title
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: { fontWeight: 600 },
+											children: permission.toolName
+										}), permission.reason !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											style: { color: "var(--ntr-muted)" },
+											children: [" · ", permission.reason]
+										})]
 									}),
 									permission.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										className: "dwa-btn dwa-btn-primary",
-										onClick: () => void acp.respondPermission(permission.requestId, option.optionId),
+										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",
-										onClick: () => void acp.respondPermission(permission.requestId),
-										children: acp.label("拒绝", "Dismiss")
+										type: "button",
+										className: "dwa-btn dwa-btn-quiet",
+										onClick: () => {
+											acp.respondPermission(permission.requestId).catch(() => void 0);
+										},
+										children: acp.label("取消", "Cancel")
 									})
 								]
 							}, permission.requestId))
@@ -3351,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", {
@@ -3389,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",
@@ -3421,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: [
@@ -3480,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", {
@@ -3505,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", {
@@ -3556,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);
@@ -3600,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);
@@ -3640,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", {
@@ -3648,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",
@@ -3672,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", {
@@ -3699,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,
@@ -3718,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", {
@@ -3746,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,
@@ -3802,7 +3992,7 @@ window.__ModuleLoader__.load({
 								onUseDefault: handleUseDefault,
 								onSave: () => void handleSave(),
 								onTest: () => void handleTest()
-							})]
+							})
 						})
 					]
 				})]
@@ -3905,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",
@@ -4022,7 +4191,7 @@ window.__ModuleLoader__.load({
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("code", {
 								className: "dwa-input-mono",
 								style: {
-									background: "#0000000a",
+									background: "var(--dsw-alias-markdown-inline-code, #0000000a)",
 									padding: "2px 6px",
 									borderRadius: 4
 								},
@@ -4054,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", {
@@ -4072,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.") })
 									})
 								]
 							})
@@ -4174,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,
@@ -4185,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,
@@ -4204,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",
@@ -4221,7 +4393,7 @@ window.__ModuleLoader__.load({
 						fontSize: 12,
 						whiteSpace: "pre-wrap",
 						wordBreak: "break-all",
-						color: testResult.ok ? "#16a34a" : "var(--ntr-danger)"
+						color: testResult.ok ? "var(--ntr-success)" : "var(--ntr-danger)"
 					},
 					children: [testResult.ok ? "✓ " : "✕ ", testResult.text]
 				})
@@ -4281,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",
@@ -4610,7 +4782,7 @@ window.__ModuleLoader__.load({
 							onChange: (e) => void toggleAutoDiscover(e.target.checked),
 							style: {
 								margin: 0,
-								accentColor: "#2563eb"
+								accentColor: "var(--dsw-alias-state-business-primary, #2563eb)"
 							}
 						}), acp.label("自动发现新模型", "Auto-discover new models")]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -4650,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", {
@@ -4672,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…")
@@ -4789,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",
@@ -5088,10 +5261,10 @@ window.__ModuleLoader__.load({
 		* the entry point for conversations no agent has served.
 		*/
 		const STATE_COLORS = {
-			ready: "#22c55e",
-			starting: "#eab308",
-			error: "#ef4444",
-			stopped: "#9ca3af"
+			ready: "var(--dsw-alias-state-success-primary, #22c55e)",
+			starting: "var(--dsw-alias-state-warn-primary, #eab308)",
+			error: "var(--dsw-alias-state-error-primary, #ef4444)",
+			stopped: "var(--dsw-alias-state-idle-primary, #9ca3af)"
 		};
 		function agentStateText(acp, state) {
 			switch (state) {
@@ -6465,6 +6638,130 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/permission-dock.tsx
+		/**
+		* Pending ACP permission asks for the staged DSH conversation, rendered as
+		* composer-width entries above the composer card (`conversation.input.dock`).
+		* The slot itself spans the conversation column; the dock mirrors the host's
+		* InputBar width formula so the cards line up with the input box.
+		*
+		* The host broadcasts every ask as `permission/request`, carrying the DSH chat
+		* session id when the ask belongs to a conversation. This dock is the primary
+		* answer surface: it renders exactly the asks whose `dshSessionId` is the
+		* conversation it was mounted for, and nothing otherwise. There is no
+		* ACP-mode gate — the frame set itself is the gate, so an ordinary
+		* conversation shows this card if and only if it actually has an ask.
+		*
+		* The ask's description and options are the agent's own: buttons appear in the
+		* agent's order with the agent's names (including "Always Allow"), and
+		* `kind` is not rendered. A separate cancel button answers with no option,
+		* which the host forwards as `cancelled`. No Enter/Escape handlers: the
+		* composer owns its keyboard, and these are ordinary focusable buttons.
+		*
+		* Multiple asks stack in ARRIVAL order, oldest first: the question ignored
+		* longest stays at the top. The list is capped in height by CSS and scrolls.
+		* Asks without a chat identity never appear here — they stay in the
+		* settings-panel ledger, the cross-session mirror.
+		*/
+		/** Tick interval for the countdown (seconds are all the label shows). */
+		const COUNTDOWN_TICK_MS = 1e3;
+		function PermissionDock({ acp, sessionId }) {
+			ensureAcpStyle();
+			const ui = useUi$2(acp);
+			const dshSessionId = String(sessionId);
+			const pending = permissionsForSession(ui.permissions, dshSessionId);
+			const counting = pending.some((ask) => ask.timeoutMode !== "wait" && ask.deadlineAt !== void 0);
+			const [now, setNow] = (0, react.useState)(() => Date.now());
+			(0, react.useEffect)(() => {
+				if (!counting) return;
+				setNow(Date.now());
+				const timer = setInterval(() => {
+					setNow(Date.now());
+				}, COUNTDOWN_TICK_MS);
+				return () => {
+					clearInterval(timer);
+				};
+			}, [counting]);
+			if (pending.length === 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "ntr-permission-dock",
+				role: "region",
+				"aria-label": acp.label("待处理的权限请求", "Pending permission requests"),
+				children: pending.map((permission) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PermissionAskCard, {
+					acp,
+					permission,
+					now
+				}, permission.requestId))
+			});
+		}
+		function PermissionAskCard(props) {
+			const { acp, permission, now } = props;
+			const [busy, setBusy] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)();
+			const remaining = deadlineRemainingLabel(permission.deadlineAt, now, permission.timeoutMode);
+			const expired = remaining === PERMISSION_DEADLINE_EXPIRED;
+			const respond = (optionId) => {
+				if (busy) return;
+				setBusy(true);
+				setError(void 0);
+				acp.respondPermission(permission.requestId, optionId).catch((failure) => {
+					setError(failure instanceof Error ? failure.message : String(failure));
+				}).finally(() => {
+					setBusy(false);
+				});
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "ntr-permission-card",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ntr-permission-head",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ntr-permission-tool",
+								children: permission.toolName
+							}),
+							permission.reason !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ntr-permission-reason",
+								title: permission.reason,
+								children: permission.reason
+							}),
+							remaining !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `ntr-permission-deadline${expired ? " is-expired" : ""}`,
+								children: expired ? acp.label("已超时", "expired") : acp.label(`剩余 ${remaining}`, `${remaining} left`)
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "ntr-permission-actions",
+						children: [permission.options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "ntr-permission-option",
+							disabled: busy,
+							title: option.name,
+							onClick: () => {
+								respond(option.optionId);
+							},
+							children: option.name
+						}, option.optionId)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "ntr-permission-cancel",
+							disabled: busy,
+							title: acp.label("取消这次询问（不选择任何选项）", "Cancel this ask without choosing an option"),
+							onClick: () => {
+								respond();
+							},
+							children: acp.label("取消", "Cancel")
+						})]
+					}),
+					error !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "ntr-permission-error",
+						role: "alert",
+						children: error
+					})
+				]
+			});
+		}
+		//#endregion
 		//#region src/client/model-seat.tsx
 		/** Exact key of the composer's model seat (a `single`, session-scoped slot). */
 		const MODEL_SEAT_KEY = "conversation.input.model";
@@ -7125,6 +7422,12 @@ window.__ModuleLoader__.load({
 				order: 5,
 				inject: (sessionId) => chatFace(sessionId)
 			}, AcpComposerAgentTag)), "dsh-ntr: composer agent tag");
+			ctx.effect(() => ctx.slots.inject("conversation.input.dock", () => ctx.slots.register({
+				name: "conversation.input.dock",
+				id: "acp-permissions",
+				order: 10,
+				inject: (sessionId) => chatFace(sessionId)
+			}, PermissionDock)), "dsh-ntr: conversation permission dock");
 			/**
 			* The client runtime's session list store, read structurally. Used to find
 			* the session the composer is staged on and whether it runs the ACP preset —