@modesto_ma/dsh-channels 0.1.0 → 0.3.0

package/lib/client.js

@@ -20,10 +20,15 @@ window.__ModuleLoader__.load({
 		const PANEL_ROUTE = "/dsh-channels/panel";
 		const CONFIG_ROUTE = "/dsh-channels/config";
 		const CREDENTIALS_ROUTE = "/dsh-channels/credentials";
+		/**
+		* Connection lifecycle action (POST). While the channel runs it restarts the
+		* long connection; while it is stopped it opens one — so the panel has exactly
+		* one "connect / reconnect" button. Credentials are resolved again either way.
+		*/
 		const RECONNECT_ROUTE = "/dsh-channels/reconnect";
 		/** 模型/推理档位/预设选择器的宿主目录（provider → model → effort 级联刷新）。 */
 		const CATALOG_ROUTE = "/dsh-channels/catalog";
-		/** 手动执行一次过期工作区清理（POST，无请求体）。 */
+		/** 手动执行一次过期目录清理（POST，无请求体）。 */
 		const CLEANUP_ROUTE = "/dsh-channels/cleanup";
 		/** 群白名单增删（POST/DELETE，body `{ chatId, name? }` / `{ chatId }`）。 */
 		const ACCESS_GROUPS_ROUTE = "/dsh-channels/access/groups";
@@ -31,25 +36,115 @@ window.__ModuleLoader__.load({
 		const ACCESS_USERS_ROUTE = "/dsh-channels/access/users";
 		/** 结算一条待处理授权申请（POST，body `{ token, decision }`）。 */
 		const ACCESS_REQUESTS_ROUTE = "/dsh-channels/access/requests";
+		/**
+		* 打开宿主机的系统目录选择框（POST，无请求体），返回绝对路径。
+		*
+		* 只有宿主挂载了 `directoryPicker` 的 native 后端（桌面/本地 GUI 会话）才
+		* 会注册实际选择逻辑；远程/无头会话的 browse 后端不可用，面板不下发
+		* [`EditableFieldWire.browse`]，保留手写输入。
+		*/
+		const PICK_DIRECTORY_ROUTE = "/dsh-channels/pick-directory";
+		/**
+		* Top-level panel tabs, in render order. The panel shows the connection state
+		* header above every tab, so switching tabs never hides whether the bridge is
+		* connected.
+		*/
+		const PANEL_TABS = [
+			{
+				id: "connection",
+				label: "连接"
+			},
+			{
+				id: "sessions",
+				label: "会话与行为"
+			},
+			{
+				id: "model",
+				label: "模型"
+			},
+			{
+				id: "workspace",
+				label: "工作区"
+			},
+			{
+				id: "access",
+				label: "访问授权"
+			},
+			{
+				id: "advanced",
+				label: "高级"
+			}
+		];
+		/** Which editable field groups each tab renders (the tabs own one or two). */
+		const TAB_FIELD_GROUPS = {
+			connection: [],
+			sessions: ["behavior", "content"],
+			model: ["model"],
+			workspace: ["workspace"],
+			access: ["access"],
+			advanced: ["streaming"]
+		};
+		/** Section heading for one field group inside its tab. */
+		const FIELD_GROUP_LABELS = {
+			workspace: "工作区与文件",
+			behavior: "行为",
+			content: "内容与附件",
+			model: "模型与推理",
+			streaming: "流式卡片与日志",
+			access: "准入与授权"
+		};
 		/** Display labels for the panel header/cards (kept on the wire so the client owns no copy). */
 		const PANEL_COPY = {
 			title: "飞书渠道",
-			description: "飞书长连接状态、应用凭据与常用配置。凭据写入 DSH 凭据库且不回显；标注「需重连」的项需重启飞书连接生效。",
+			description: "飞书长连接、应用凭据与渠道配置。凭据只写入 DSH 凭据库且不回显；标注「需重连」的项在连接建立时读取。",
 			statusCard: "连接状态",
+			phaseUnconfigured: "待配置",
+			phaseIdle: "未连接",
+			phaseConnecting: "连接中",
+			phaseConnected: "已连接",
+			phaseError: "连接失败",
+			configuredBadge: "凭据已配置",
+			unconfiguredBadge: "凭据未配置",
+			statusSummaryConnected: "飞书长连接已建立，机器人可以收发消息。",
+			statusSummaryUnconfigured: "尚未配置飞书应用凭据：插件已加载，但不会连接飞书。填写凭据并保存后会自动连接。",
+			statusSummaryIdle: "飞书应用凭据已就绪，但当前没有建立长连接。",
+			statusSummaryConnecting: "正在连接飞书长连接…",
+			statusSummaryError: "最近一次连接飞书失败，请检查凭据与网络后重试。",
+			lastError: "最近一次连接失败",
+			missingConfig: "缺少配置",
+			statusHintUnconfigured: "配置完成后插件会自动连接；也可以稍后在本页手动连接。",
+			connectionInfo: "连接信息",
+			connectionStateLabel: "飞书长连接",
+			botOpenId: "Bot open_id",
+			uptime: "运行时长",
+			routeCount: "话题路由",
+			liveAgentCount: "活动会话",
+			inflightTurnCount: "在途回复",
+			healthReasons: "健康判定",
+			unknownValue: "—",
+			connect: "连接飞书",
+			connecting: "连接中…",
+			onboardingTitle: "开始使用飞书渠道",
+			onboardingIntro: "只需三步：在飞书开放平台创建自建应用，把 App ID / App Secret 填入本页，保存后自动连接。",
+			onboardingStep1Title: "创建飞书自建应用",
+			onboardingStep1Text: "在飞书开放平台创建企业自建应用，开启机器人能力；事件订阅选择「长连接」，订阅 im.message.receive_v1（接收消息）。",
+			onboardingStep2Title: "填写应用凭据",
+			onboardingStep2Text: "把应用的 App ID（cli_ 开头）与 App Secret 填入下方「飞书应用凭据」，值会写入 DSH 凭据库。",
+			onboardingStep3Title: "保存并等待连接",
+			onboardingStep3Text: "两项凭据都保存后插件会自动连接；状态变为「已连接」即可在飞书里私聊机器人。",
+			onboardingDocsHint: "开放平台地址：open.feishu.cn/app；应用需要开通 im:message、im:message:send_as_bot 等消息权限。",
 			credentialsCard: "飞书应用凭据",
-			modelCard: "模型与推理",
-			modelCardHelp: "模型服务商、模型 id、推理档位与新会话的 Agent 预设。下拉选项来自宿主机实时目录；保存后对新会话生效。",
-			configCard: "常用配置",
-			advancedCard: "只读与高级信息",
+			credentialsCardHelp: "凭据值经 DSH 凭据服务写入本机凭据库；面板只显示「已配置 / 未配置」，永不回显已存值。两项都配置后才会连接飞书。",
 			appIdLabel: "飞书 App ID",
 			appSecretLabel: "飞书 App Secret",
-			credentialsHelp: "值通过 DSH 凭据服务写入本机凭据库；面板只显示是否已配置，永不回显已存值。留空表示保持当前值。",
 			credentialsRef: "凭据引用",
 			saveCredentials: "保存凭据",
 			savingCredentials: "保存中…",
 			credentialSaved: "凭据已保存",
-			credentialSavedReconnected: "凭据已保存，已自动重连飞书通道",
+			credentialSavedReconnected: "凭据已保存，飞书已连接",
 			credentialSavedPending: "凭据已保存，重启飞书连接后生效",
+			credentialSavedUnconfigured: "凭据已保存；还缺少另一项凭据，补齐后会自动连接",
+			credentialAutoConnectFailed: "凭据已保存，但自动连接失败",
 			credentialRemoved: "已移除存储的凭据",
 			credentialRemovedPending: "已移除存储的凭据，重启飞书连接后生效",
 			removeCredential: "移除已存值",
@@ -59,40 +154,62 @@ window.__ModuleLoader__.load({
 			credentialReadOnly: "当前凭据存储不可写",
 			appIdPlaceholder: "输入 App ID（cli_…）",
 			appSecretPlaceholder: "输入 App Secret",
-			save: "保存配置",
-			saveAll: "保存全部配置",
-			saveModel: "保存模型配置",
-			modelActionsHint: "只保存模型与推理字段",
+			credentialsPendingHint: "填写后点「保存凭据」；两项齐全时插件会自动连接飞书。",
+			connectionTabHelp: "连接状态与飞书应用凭据。凭据不完整时不会连接飞书。",
+			sessionsTabHelp: "私聊、群聊触发方式与入站内容；「需重连」项在下次连接时读取。",
+			modelTabHelp: "飞书会话使用的模型服务商、模型、推理档位与 Agent 预设；下拉选项来自宿主机实时目录，保存后对新会话生效。",
+			workspaceTabHelp: "每个用户一个工作区（模型/工具产生文件的落点），每个话题在其中拥有独立工作目录；只影响之后新建的话题。",
+			accessTabHelp: "准入采用 fail-closed：管理员不受白名单限制，非管理员私聊会被拒绝，群聊需要「群已授权 + 用户在白名单」两层同时命中。",
+			advancedTabHelp: "流式刷新等低层参数、Web 覆盖文件与只读信息。",
+			save: "保存更改",
 			saving: "保存中…",
+			saveHintDirty: "只保存改动过的字段；标注「需重连」的项在下次连接时生效。",
+			discardTab: "放弃本页更改",
+			saveHintClean: "没有未保存的更改。",
+			dirtyCount: "未保存项",
+			browseDirectory: "选择目录…",
+			browsingDirectory: "选择中…",
+			directoryPicked: "已选择目录",
+			directoryPickFailed: "无法打开系统目录选择器",
+			saved: "已保存",
+			cleared: "已清除 Web 覆盖，恢复为 profile 配置",
 			clear: "清除 Web 覆盖",
 			clearing: "清除中…",
+			noOverrides: "当前没有 Web 覆盖",
+			overridden: "Web 覆盖",
+			inherited: "继承 profile",
+			restartTag: "需重连",
+			restartBanner: "以下配置需重启飞书连接后生效：",
+			restartWarning: "重启会断开当前飞书长连接并中断进行中的回复，请确认空闲时操作。",
 			reconnect: "重启飞书连接",
 			reconnecting: "重连中…",
 			refresh: "刷新状态",
 			retry: "重试",
+			pollFailed: "状态刷新失败",
+			connectDone: "已连接飞书",
+			reconnectDone: "已重启飞书连接",
+			saveInvalid: "请先修正标红的配置项",
+			enabled: "已启用",
+			disabled: "已关闭",
+			credentialRemoveConfirm: "确定移除已存储的凭据值？移除后不会回显，需要时须重新填写。",
+			accessNotLoaded: "飞书连接建立后加载授权列表",
 			loading: "加载中…",
 			loadFailed: "设置面板加载失败",
-			saved: "已保存",
-			savedModel: "模型配置已保存",
-			cleared: "已清除 Web 覆盖，恢复为 profile 配置",
 			catalogFailed: "模型目录加载失败，已退回手填。",
 			catalogLoading: "正在读取宿主机选项…",
 			catalogUnavailable: "宿主机未提供可选项，请手填。",
-			noOverrides: "当前没有 Web 覆盖",
-			overridden: "Web 覆盖",
-			inherited: "继承 profile",
-			restartTag: "需重连",
-			restartBanner: "以下配置需重启飞书连接后生效：",
-			restartWarning: "重启会断开当前飞书长连接并中断进行中的回复，请确认空闲时操作。",
-			lastError: "最近一次启动失败",
-			notRunning: "未运行",
 			version: "插件版本",
 			overlayPath: "覆盖文件",
-			cleanupCard: "工作区清理",
-			cleanupCardHelp: "删除超过保留期且不再活跃的飞书工作区目录；只会删除本插件在「工作区根目录」下创建的目录，DSH 会话日志不删除。删除不可恢复：相关旧话题会失效并提示已过期，工作区列表记录同步移除。",
+			overlayPathHelp: "可以直接编辑该 JSON 文件；面板保存会整体重写它，「清除 Web 覆盖」会删除它并回落到 profile 配置。",
+			advancedCard: "只读与高级信息",
+			advancedHelp: "这些值来自 profile 配置，不能在面板里编辑。",
+			readOnlyCard: "部署级参数",
+			cleanupCard: "目录清理",
+			cleanupCardHelp: "删除超过保留期且不再活跃的飞书话题目录（以及旧版本按话题建立的工作区目录）；用户工作区本身、DSH 会话日志都不会删除。删除不可恢复：相关旧话题会失效并提示已过期。",
 			cleanupRetention: "保留期",
 			cleanupAutoLabel: "自动清理",
-			cleanupCandidates: "可清理工作区",
+			cleanupCandidates: "可清理目录",
+			cleanupWorkspaces: "插件工作区",
 			cleanupCandidateBytes: "预计释放空间",
 			cleanupRetentionOff: "关闭（不删除）",
 			cleanupAutoOn: "已开启（启动时 + 每天一次）",
@@ -100,24 +217,22 @@ window.__ModuleLoader__.load({
 			cleanupAutoInactive: "未执行（保留期为关闭）",
 			cleanupNow: "立即清理",
 			cleanupRunning: "清理中…",
-			cleanupConfirm: "确定清理过期工作区吗？该操作不可恢复，会删除这些工作区内的全部文件（包括 attachments/ 附件）。",
-			cleanupConfirmHint: "删除前会再次确认；保留期为「关闭」或没有过期工作区时按钮不可用。",
-			cleanupDisabledOff: "保留策略为「关闭」：请先在「常用配置 → 工作区与文件」中选择保留天数。",
-			cleanupDisabledEmpty: "没有超过保留期的过期工作区。",
+			cleanupConfirm: "确定清理过期目录吗？该操作不可恢复，会删除这些目录内的全部文件（包括 attachments/ 附件）。",
+			cleanupConfirmHint: "删除前会再次确认；保留期为「关闭」或没有过期目录时按钮不可用。",
+			cleanupDisabledOff: "保留策略为「关闭」：请先在上方「过期目录保留期」中选择保留天数。",
+			cleanupDisabledEmpty: "没有超过保留期的过期目录。",
 			cleanupPreviewFailed: "无法读取清理预览",
 			cleanupDone: "清理完成",
 			cleanupFailed: "清理失败",
 			cleanupDeleted: "已删除工作区",
+			cleanupDeletedDirs: "话题目录",
 			cleanupRetired: "已清理话题路由",
 			cleanupFreed: "释放空间",
-			cleanupFailures: "以下工作区未能删除：",
+			cleanupFailures: "以下目录未能删除：",
 			accessCard: "访问与授权",
-			accessCardHelp: "准入采用 fail-closed：管理员不受白名单限制（私聊、任意群聊都可直接对话）；非管理员私聊会被拒绝，群聊需要「群已授权 + 用户在白名单」两层同时命中。管理员 open_id 在「常用配置 → 行为」中填写，私聊机器人发送 /userid 获取。",
+			accessCardHelp: "准入采用 fail-closed：管理员不受白名单限制（私聊、任意群聊都可直接对话）；非管理员私聊会被拒绝，群聊需要「群已授权 + 用户在白名单」两层同时命中。管理员与准入模式在上方「准入与授权」中编辑；私聊机器人发送 /userid 获取自己的 open_id。",
 			accessModeOpenWarning: "当前准入模式为开放（open）：应用可用范围内的任何人都能开启对话。该模式不安全，仅建议调试时使用。",
-			accessAdminMissingWarning: "当前准入=guarded 但未配置管理员，所有对话都会被拒绝。请先在「常用配置 → 行为 → 管理员 open_id」填写。",
-			accessAdminLabel: "管理员",
-			accessAdminMissing: "未配置",
-			accessAdminHint: "修改管理员请到「常用配置 → 行为 → 管理员 open_id」；私聊机器人发送 /userid 可查看自己的 open_id（ou_ 开头，不是 user_id/邮箱）。",
+			accessAdminMissingWarning: "当前准入=guarded 但未配置管理员，所有对话都会被拒绝。请在上方「准入与授权」填写管理员 open_id。",
 			accessGroupsTitle: "已授权群",
 			accessGroupsEmpty: "尚未授权任何群。机器人被拉进群后，管理员会收到带 chat_id 的群信息卡；也可在群内发送 /groupid 获取。",
 			accessUsersTitle: "已授权用户",
@@ -275,6 +390,24 @@ window.__ModuleLoader__.load({
 			}
 			return JSON.parse(text);
 		}
+		/**
+		* Ask the Host to open its native directory chooser (the panel's「选择目录…」
+		* button). The request stays open while the OS dialog does; a cancel comes back
+		* as `{ ok: true, canceled: true }`, not as an error.
+		*/
+		async function pickDirectory() {
+			const response = await request(PICK_DIRECTORY_ROUTE, { method: "POST" });
+			const text = await response.text();
+			if (!response.ok) try {
+				return JSON.parse(text);
+			} catch {
+				return {
+					ok: false,
+					error: errorFromBody(response.status, text)
+				};
+			}
+			return JSON.parse(text);
+		}
 		/** Store provided credential values (the request/response never carry stored values). */
 		async function saveCredentials(values) {
 			const response = await request(CREDENTIALS_ROUTE, {
@@ -367,7 +500,7 @@ window.__ModuleLoader__.load({
 		* 浏览器半区的设置面板选择器目录折叠：把 Host 下发的字段描述与实时目录
 		* （`/dsh-channels/catalog`）合成通用表单需要的 select 描述。
 		*
-		* 拆成独立模块（不含 JSX/React）以便单测；`panel.tsx` 只负责串起状态与渲染。
+		* 拆成独立模块（不含 JSX/React）以便单测；`panel/index.tsx` 只负责串起状态与渲染。
 		*
 		* @module dsh-channels/client/catalog
 		*/
@@ -455,31 +588,16 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region src/client/panel.tsx
+		//#region src/client/panel/shared.tsx
 		/**
-		* 设置 →「飞书渠道」页面。
+		* 设置面板共享层：页面状态类型、Host 字段渲染原语（FieldRow / FieldsCard /
+		* SaveBar）、生命周期徽标与纯格式化工具。
 		*
-		* 数据全部来自 Host 的 `/dsh-channels/*` 路由：状态卡每 5 秒轮询一次，
-		* 常用配置表单由 Host 下发的字段描述（`fields`）通用渲染，Host 是唯一的
-		* 校验与持久化方。组件不 import 任何 DSH 客户端包，只依赖 react 与平台
-		* 的 `settings.section` 槽位。
+		* 这一层不发请求、不持有页面状态，只把 Host 下发的 wire 数据渲染成控件；
+		* 页面外壳在 `index.tsx`，各 tab 只组合这些原语。
 		*
-		* @module dsh-channels/client/panel
+		* @module dsh-channels/client/panel/shared
 		*/
-		const GROUP_ORDER = [
-			"workspace",
-			"behavior",
-			"content",
-			"model",
-			"streaming"
-		];
-		const GROUP_LABELS = {
-			workspace: "工作区与文件",
-			behavior: "行为",
-			content: "内容与附件",
-			model: "模型",
-			streaming: "流式卡片"
-		};
 		function messageOf(error) {
 			return error instanceof Error ? error.message : String(error);
 		}
@@ -502,12 +620,9 @@ window.__ModuleLoader__.load({
 			const digits = unit === 0 || value >= 10 ? 0 : 1;
 			return `${value.toFixed(digits)} ${units[unit] ?? "B"}`;
 		}
-		/** Display label for the effective retention value, reusing the Host field options. */
-		function retentionLabel(panel, cleanup) {
-			return panel.config.fields.find((item) => item.key === "workspaceRetention")?.options?.find((option) => option.value === cleanup.retention)?.label ?? (cleanup.retention === "off" ? PANEL_COPY.cleanupRetentionOff : cleanup.retention);
-		}
+		/** Compact duration for the connection card. */
 		function formatUptime(ms) {
-			if (ms === void 0 || !Number.isFinite(ms)) return "—";
+			if (ms === void 0 || !Number.isFinite(ms)) return PANEL_COPY.unknownValue;
 			const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
 			const days = Math.floor(totalSeconds / 86400);
 			const hours = Math.floor(totalSeconds % 86400 / 3600);
@@ -517,81 +632,18 @@ window.__ModuleLoader__.load({
 			if (minutes > 0) return `${minutes} 分 ${totalSeconds % 60} 秒`;
 			return `${totalSeconds} 秒`;
 		}
-		function connectionLabel(state) {
-			switch (state) {
-				case "connected": return {
-					text: "已连接",
-					tone: "ok"
-				};
-				case "connecting": return {
-					text: "连接中",
-					tone: "warn"
-				};
-				case "reconnecting": return {
-					text: "重连中",
-					tone: "warn"
-				};
-				case "failed": return {
-					text: "连接失败",
-					tone: "bad"
-				};
-				case "idle": return {
-					text: "未连接",
-					tone: "muted"
-				};
-				default: return {
-					text: state ?? "未知",
-					tone: "muted"
-				};
-			}
-		}
-		function statusBadge(status) {
-			if (status.busy) return {
-				text: "重连中",
-				tone: "warn"
-			};
-			if (!status.running) return {
-				text: "未运行",
-				tone: "bad"
-			};
-			if (status.level === "healthy") return {
-				text: "运行中 · 健康",
-				tone: "ok"
-			};
-			if (status.level === "degraded") return {
-				text: "运行中 · 降级",
-				tone: "warn"
-			};
-			return {
-				text: "运行中 · 异常",
-				tone: "bad"
-			};
-		}
-		/** Local `YYYY-MM-DD HH:mm` rendering for authorization timestamps. */
-		function formatAccessDate(ms) {
-			if (!Number.isFinite(ms) || ms <= 0) return "—";
-			const date = new Date(ms);
-			const pad = (value) => String(value).padStart(2, "0");
-			return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+		/** Effective value for one key (falling back to the profile base). */
+		function effectiveValue(panel, key) {
+			return panel.config.effective[key] ?? panel.config.base[key];
 		}
-		/** Which authorization entry produced one grant. */
-		function accessSourceLabel(source) {
-			switch (source) {
-				case "command": return PANEL_COPY.accessSourceCommand;
-				case "card": return PANEL_COPY.accessSourceCard;
-				default: return PANEL_COPY.accessSourcePanel;
-			}
+		/** Host label for one editable key; the raw key is the technical fallback. */
+		function fieldLabel(fields, key) {
+			return fields.find((field) => field.key === key)?.label ?? key;
 		}
 		/** Effective access-mode label, reusing the Host field options for consistency. */
 		function accessModeLabel(panel, mode) {
 			return panel.config.fields.find((item) => item.key === "accessMode")?.options?.find((option) => option.value === mode)?.label ?? mode;
 		}
-		function fieldLabel(fields, key) {
-			return fields.find((field) => field.key === key)?.label ?? key;
-		}
-		function effectiveValue(panel, key) {
-			return panel.config.effective[key] ?? panel.config.base[key];
-		}
 		/** Numeric draft kept as the raw input string; parsed on save. */
 		function numericDraft(field, raw) {
 			if (typeof raw === "number") return raw;
@@ -599,12 +651,16 @@ window.__ModuleLoader__.load({
 			const parsed = Number(raw);
 			return Number.isFinite(parsed) ? parsed : void 0;
 		}
-		function validateDraft(panel, draft, only) {
+		/**
+		* Turn the dirty draft into the wire payload, keeping the Host-descriptor
+		* bounds check client-side. Field messages stay technical (the Host re-validates
+		* every value on save).
+		*/
+		function validateDraft(panel, draft) {
 			const values = {};
 			const issues = [];
 			for (const field of panel.config.fields) {
 				if (!(field.key in draft)) continue;
-				if (only !== void 0 && !only.has(field.key)) continue;
 				const raw = draft[field.key];
 				if (field.kind === "number") {
 					const parsed = numericDraft(field, raw);
@@ -643,9 +699,81 @@ window.__ModuleLoader__.load({
 				issues
 			};
 		}
+		/** Header badge for the Host-derived lifecycle phase. */
+		function phaseBadge(phase) {
+			switch (phase) {
+				case "connected": return {
+					text: PANEL_COPY.phaseConnected,
+					tone: "ok"
+				};
+				case "connecting": return {
+					text: PANEL_COPY.phaseConnecting,
+					tone: "warn"
+				};
+				case "error": return {
+					text: PANEL_COPY.phaseError,
+					tone: "bad"
+				};
+				case "idle": return {
+					text: PANEL_COPY.phaseIdle,
+					tone: "muted"
+				};
+				default: return {
+					text: PANEL_COPY.phaseUnconfigured,
+					tone: "muted"
+				};
+			}
+		}
+		/** One-line explanation shown under the page title for the current phase. */
+		function phaseSummary(phase) {
+			switch (phase) {
+				case "connected": return PANEL_COPY.statusSummaryConnected;
+				case "connecting": return PANEL_COPY.statusSummaryConnecting;
+				case "error": return PANEL_COPY.statusSummaryError;
+				case "idle": return PANEL_COPY.statusSummaryIdle;
+				default: return PANEL_COPY.statusSummaryUnconfigured;
+			}
+		}
+		/**
+		* Text input paired with the host-native「选择目录…」button. The button owns
+		* its own busy state: the OS dialog can stay open for a long time, so the
+		* rest of the form stays usable while the operator browses.
+		*/
+		function DirectoryTextInput(props) {
+			const { field, value, inputClass, disabled, onChange, onPick } = props;
+			const [picking, setPicking] = (0, react.useState)(false);
+			const pick = async () => {
+				setPicking(true);
+				try {
+					await onPick();
+				} finally {
+					setPicking(false);
+				}
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-cfg__inputRow",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "text",
+					className: inputClass,
+					value: String(value ?? ""),
+					placeholder: field.placeholder,
+					"aria-label": field.label,
+					disabled: disabled || picking,
+					onChange: (event) => onChange(field.key, event.target.value)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--browse",
+					disabled: disabled || picking,
+					onClick: () => {
+						pick();
+					},
+					children: picking ? PANEL_COPY.browsingDirectory : PANEL_COPY.browseDirectory
+				})]
+			});
+		}
 		/** One generic form control driven by the Host field descriptor. */
 		function FieldRow(props) {
-			const { field, value, issues, onChange } = props;
+			const { field, value, issues, disabled = false, onChange, onPickDirectory } = props;
 			const issue = issues.find((item) => item.key === field.key);
 			const inputClass = `dsh-channels-cfg__input${issue === void 0 ? "" : " dsh-channels-cfg__input--invalid"}`;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -667,13 +795,16 @@ window.__ModuleLoader__.load({
 							type: "checkbox",
 							className: "dsh-channels-cfg__checkbox",
 							checked: value === true,
+							"aria-label": field.label,
+							disabled,
 							onChange: (event) => onChange(field.key, event.target.checked)
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: value === true ? "已启用" : "已关闭" })]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: value === true ? PANEL_COPY.enabled : PANEL_COPY.disabled })]
 					}) : null,
 					field.kind === "select" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
 						className: inputClass,
 						value: String(value ?? ""),
-						disabled: field.disabled === true,
+						disabled: disabled || field.disabled === true,
+						"aria-label": field.label,
 						onChange: (event) => onChange(field.key, event.target.value),
 						children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
 							value: option.value,
@@ -687,13 +818,24 @@ window.__ModuleLoader__.load({
 						min: field.min,
 						max: field.max,
 						step: field.step,
+						"aria-label": field.label,
+						disabled,
 						onChange: (event) => onChange(field.key, event.target.value)
 					}) : null,
-					field.kind === "text" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					field.kind === "text" ? field.browse === "directory" && onPickDirectory !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DirectoryTextInput, {
+						field,
+						value,
+						inputClass,
+						disabled,
+						onChange,
+						onPick: onPickDirectory
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						type: "text",
 						className: inputClass,
 						value: String(value ?? ""),
 						placeholder: field.placeholder,
+						"aria-label": field.label,
+						disabled,
 						onChange: (event) => onChange(field.key, event.target.value)
 					}) : null,
 					field.help === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -707,143 +849,657 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
-		/** Status card: badge, connection facts, and the two panel actions. */
-		function StatusCard(props) {
-			const { status, pollError, busy, onRefresh, onReconnect } = props;
-			const badge = statusBadge(status);
-			const connection = connectionLabel(status.connection?.state);
-			const facts = [
-				{
-					label: "飞书连接",
-					value: status.connection === void 0 ? "未知" : connection.text
-				},
-				{
-					label: "Bot open_id",
-					value: status.botOpenIdTail ?? "—"
-				},
-				{
-					label: "运行时长",
-					value: formatUptime(status.uptimeMs)
-				},
-				{
-					label: "话题路由",
-					value: String(status.routeCount)
-				},
-				{
-					label: "活动会话",
-					value: String(status.liveAgentCount)
-				},
-				{
-					label: "在途回复",
-					value: String(status.inflightTurnCount)
-				}
-			];
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		/**
+		* One tab's editable fields, partitioned by the Host field groups that the tab
+		* owns (`TAB_FIELD_GROUPS`). Empty groups render nothing, so a Host that moves
+		* every key out of a group does not leave a stray heading behind.
+		*/
+		function FieldsCard(props) {
+			const { form, groups } = props;
+			const sections = groups.map((group) => ({
+				group,
+				label: FIELD_GROUP_LABELS[group],
+				fields: form.fields.filter((field) => field.group === group)
+			})).filter((section) => section.fields.length > 0);
+			if (sections.length === 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 				className: "dsh-channels-cfg__card",
+				children: sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-channels-cfg__group",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-channels-cfg__labelRow",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__cardTitle",
+							children: section.label
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-channels-cfg__grid",
+						children: section.fields.map((field) => {
+							const onPick = form.onPickDirectory;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
+								field,
+								value: form.draft[field.key] ?? effectiveValue(form.panel, field.key),
+								issues: form.issues,
+								disabled: form.locked,
+								onChange: form.onChange,
+								onPickDirectory: onPick === void 0 ? void 0 : () => onPick(field.key)
+							}, field.key);
+						})
+					})]
+				}, section.group))
+			});
+		}
+		/** The unified per-tab action bar: save every dirty field or drop the draft. */
+		function SaveBar(props) {
+			const { form, tab } = props;
+			const groups = new Set(TAB_FIELD_GROUPS[tab]);
+			const pageDirty = form.fields.filter((field) => groups.has(field.group) && field.key in form.draft).length;
+			const dirty = form.dirtyCount > 0;
+			const disabled = !dirty || form.busy !== null || form.locked;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-cfg__footer",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-channels-cfg__cardHead",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__cardTitle",
-								children: PANEL_COPY.statusCard
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: `dsh-channels-cfg__badge dsh-channels-cfg__badge--${badge.tone}`,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dsh-channels-cfg__dot" }), badge.text]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__cardMeta",
-								children: "每 5 秒自动刷新"
-							})
-						]
-					}),
-					status.lastStartError === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-channels-cfg__notice dsh-channels-cfg__notice--error",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: PANEL_COPY.lastError }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-channels-cfg__mono",
-							children: status.lastStartError
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "dsh-channels-cfg__facts",
-						children: facts.map((fact) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-channels-cfg__fact",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__factLabel",
-								children: fact.label
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__factValue",
-								children: fact.value
-							})]
-						}, fact.label))
-					}),
-					status.reasons.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: `dsh-channels-cfg__help${status.level === "unhealthy" ? " dsh-channels-cfg__reasonBad" : ""}`,
-						children: ["健康判定：", status.reasons.join("；")]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
+						onClick: form.onSave,
+						disabled,
+						children: form.busy === "save" ? PANEL_COPY.saving : PANEL_COPY.save
 					}),
-					pollError === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "dsh-channels-cfg__fieldError",
-						children: ["状态刷新失败：", pollError]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dsh-channels-cfg__btn",
+						onClick: () => form.onDiscardTab(tab),
+						disabled: pageDirty === 0 || form.busy !== null || form.locked,
+						children: PANEL_COPY.discardTab
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-channels-cfg__actions",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dsh-channels-cfg__spacer" }),
+					pageDirty > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "dsh-channels-cfg__tag dsh-channels-cfg__tag--dirty",
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "dsh-channels-cfg__btn",
-								onClick: onRefresh,
-								disabled: busy !== null,
-								children: PANEL_COPY.refresh
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--danger",
-								onClick: onReconnect,
-								disabled: busy !== null,
-								children: busy === "reconnect" ? PANEL_COPY.reconnecting : PANEL_COPY.reconnect
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__help",
-								children: PANEL_COPY.restartWarning
-							})
+							PANEL_COPY.dirtyCount,
+							" ",
+							pageDirty
+						]
+					}) : dirty ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "dsh-channels-cfg__tag dsh-channels-cfg__tag--dirty",
+						children: [
+							PANEL_COPY.dirtyCount,
+							" ",
+							form.dirtyCount,
+							"（其他标签页）"
 						]
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: dirty ? PANEL_COPY.saveHintDirty : PANEL_COPY.saveHintClean
 					})
 				]
 			});
 		}
-		/** Credential editor: writes through the Host credentials seam, never echoes values. */
-		function CredentialsCard(props) {
-			const { panel, appId, appSecret, issues, busy, onAppIdChange, onAppSecretChange, onSave, onClear } = props;
-			const appIdState = panel.config.credentials.appId;
-			const appSecretState = panel.config.credentials.appSecret;
-			const writable = appIdState.writable || appSecretState.writable;
-			const disabled = busy !== null || !writable;
-			const pending = appId.trim() !== "" || appSecret.trim() !== "";
-			const row = (field, label, state, value, type, placeholder, onChange) => {
-				const issue = issues.find((item) => item.key === field);
-				const inputClass = `dsh-channels-cfg__input${issue === void 0 ? "" : " dsh-channels-cfg__input--invalid"}`;
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "dsh-channels-cfg__field",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-channels-cfg__labelRow",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__label",
-								children: label
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `dsh-channels-cfg__badge dsh-channels-cfg__badge--${state.configured ? "ok" : "bad"}`,
-								children: state.configured ? PANEL_COPY.credentialConfigured : PANEL_COPY.credentialMissing
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-channels-cfg__cred",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type,
-								className: inputClass,
-								value,
-								placeholder,
+		/** Muted help paragraph introducing one tab. */
+		function TabHelp(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "dsh-channels-cfg__tabHelp",
+				children: props.text
+			});
+		}
+		/** Transient page-level banner (save / credentials / reconnect / catalog). */
+		function NoticeBar(props) {
+			const { notice } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `dsh-channels-cfg__notice dsh-channels-cfg__notice--${notice.kind === "ok" ? "ok" : "error"}`,
+				role: "status",
+				"aria-live": "polite",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: notice.text })
+			});
+		}
+		/** Muted empty/blocked state (e.g. access lists before the channel connects). */
+		function EmptyState(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-channels-cfg__emptyState",
+				children: props.text
+			});
+		}
+		/** Human label for the official SDK's WebSocket lifecycle state. */
+		function connectionStateLabel(state) {
+			switch (state) {
+				case "connected": return {
+					text: PANEL_COPY.phaseConnected,
+					tone: "ok"
+				};
+				case "connecting": return {
+					text: PANEL_COPY.phaseConnecting,
+					tone: "warn"
+				};
+				case "reconnecting": return {
+					text: PANEL_COPY.phaseConnecting,
+					tone: "warn"
+				};
+				case "failed": return {
+					text: PANEL_COPY.phaseError,
+					tone: "bad"
+				};
+				case "idle": return {
+					text: PANEL_COPY.phaseIdle,
+					tone: "muted"
+				};
+				default: return {
+					text: state ?? PANEL_COPY.unknownValue,
+					tone: "muted"
+				};
+			}
+		}
+		/** Retention label, reusing the Host field options so the copy stays on the Host. */
+		function retentionLabel(panel, cleanup) {
+			return panel.config.fields.find((item) => item.key === "workspaceRetention")?.options?.find((option) => option.value === cleanup.retention)?.label ?? (cleanup.retention === "off" ? PANEL_COPY.cleanupRetentionOff : cleanup.retention);
+		}
+		//#endregion
+		//#region src/client/panel/access-card.tsx
+		/**
+		* 访问与授权卡：fail-closed 警告、群/用户白名单增删、待处理申请处理。
+		*
+		* `access.loaded === false`（飞书未连接、插件 storage 域未打开）时白名单与
+		* 申请列表是「未知」而不是「空」，因此只渲染连接提示并禁用全部写操作。
+		* 管理员与准入模式由同 tab 上方「准入与授权」字段表单编辑，这里不再重复。
+		*
+		* @module dsh-channels/client/panel/access-card
+		*/
+		/** Local `YYYY-MM-DD HH:mm` rendering for authorization timestamps. */
+		function formatAccessDate(ms) {
+			if (!Number.isFinite(ms) || ms <= 0) return PANEL_COPY.unknownValue;
+			const date = new Date(ms);
+			const pad = (value) => String(value).padStart(2, "0");
+			return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+		}
+		/** Which authorization entry produced one grant. */
+		function accessSourceLabel(source) {
+			switch (source) {
+				case "command": return PANEL_COPY.accessSourceCommand;
+				case "card": return PANEL_COPY.accessSourceCard;
+				default: return PANEL_COPY.accessSourcePanel;
+			}
+		}
+		function AccessCard(props) {
+			const { panel, busy, locked, notice, error, onAddGroup, onRemoveGroup, onAddUser, onRemoveUser, onResolveRequest } = props;
+			const { access } = panel;
+			const [groupChatId, setGroupChatId] = (0, react.useState)("");
+			const [groupName, setGroupName] = (0, react.useState)("");
+			const [userOpenId, setUserOpenId] = (0, react.useState)("");
+			const [userName, setUserName] = (0, react.useState)("");
+			const groups = access.groups;
+			const users = access.users;
+			const requests = access.requests;
+			const working = busy === "access";
+			const disabled = busy !== null || locked || !access.loaded;
+			const submitGroup = async () => {
+				if (groupChatId.trim() === "") return;
+				if (await onAddGroup(groupChatId, groupName)) {
+					setGroupChatId("");
+					setGroupName("");
+				}
+			};
+			const submitUser = async () => {
+				if (userOpenId.trim() === "") return;
+				if (await onAddUser(userOpenId, userName)) {
+					setUserOpenId("");
+					setUserName("");
+				}
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "dsh-channels-cfg__card",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-cfg__cardHead",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__cardTitle",
+							children: PANEL_COPY.accessCard
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__cardMeta",
+							children: accessModeLabel(panel, access.mode)
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.accessCardHelp
+					}),
+					access.mode === "open" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-channels-cfg__banner",
+						children: PANEL_COPY.accessModeOpenWarning
+					}) : null,
+					access.loaded && access.mode === "guarded" && !access.admin.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-channels-cfg__notice dsh-channels-cfg__notice--error",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: PANEL_COPY.accessAdminMissingWarning })
+					}) : null,
+					!access.loaded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, { text: PANEL_COPY.accessNotLoaded }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-channels-cfg__accessSection",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-channels-cfg__labelRow",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-channels-cfg__label",
+										children: PANEL_COPY.accessGroupsTitle
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dsh-channels-cfg__cardMeta",
+										children: [groups.length, " 个"]
+									})]
+								}),
+								groups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-channels-cfg__help",
+									children: PANEL_COPY.accessGroupsEmpty
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+									className: "dsh-channels-cfg__accessList",
+									children: groups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+										className: "dsh-channels-cfg__accessRow",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "dsh-channels-cfg__accessMain",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: group.name ?? group.chatId }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: "dsh-channels-cfg__accessMeta",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsh-channels-cfg__mono",
+													children: group.chatId
+												}), ` · ${accessSourceLabel(group.source)} · ${formatAccessDate(group.addedAt)}`]
+											})]
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-channels-cfg__btn",
+											disabled,
+											onClick: () => onRemoveGroup(group.chatId),
+											children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessRemove
+										})]
+									}, group.chatId))
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-channels-cfg__accessAdd",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "text",
+											className: "dsh-channels-cfg__input dsh-channels-cfg__accessInput",
+											value: groupChatId,
+											placeholder: PANEL_COPY.accessGroupChatIdPlaceholder,
+											"aria-label": PANEL_COPY.accessGroupChatIdPlaceholder,
+											disabled,
+											onChange: (event) => setGroupChatId(event.target.value)
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "text",
+											className: "dsh-channels-cfg__input dsh-channels-cfg__accessInput",
+											value: groupName,
+											placeholder: PANEL_COPY.accessGroupNamePlaceholder,
+											"aria-label": PANEL_COPY.accessGroupNamePlaceholder,
+											disabled,
+											onChange: (event) => setGroupName(event.target.value)
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
+											disabled: disabled || groupChatId.trim() === "",
+											onClick: () => {
+												submitGroup();
+											},
+											children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAddGroup
+										})
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-channels-cfg__accessSection",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-channels-cfg__labelRow",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-channels-cfg__label",
+										children: PANEL_COPY.accessUsersTitle
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dsh-channels-cfg__cardMeta",
+										children: [users.length, " 个"]
+									})]
+								}),
+								users.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-channels-cfg__help",
+									children: PANEL_COPY.accessUsersEmpty
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+									className: "dsh-channels-cfg__accessList",
+									children: users.map((user) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+										className: "dsh-channels-cfg__accessRow",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "dsh-channels-cfg__accessMain",
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: user.name ?? user.openId }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+												className: "dsh-channels-cfg__accessMeta",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsh-channels-cfg__mono",
+													children: user.openId
+												}), ` · ${accessSourceLabel(user.source)} · ${formatAccessDate(user.addedAt)}`]
+											})]
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-channels-cfg__btn",
+											disabled,
+											onClick: () => onRemoveUser(user.openId),
+											children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessRemove
+										})]
+									}, user.openId))
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-channels-cfg__accessAdd",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "text",
+											className: "dsh-channels-cfg__input dsh-channels-cfg__accessInput",
+											value: userOpenId,
+											placeholder: PANEL_COPY.accessUserOpenIdPlaceholder,
+											"aria-label": PANEL_COPY.accessUserOpenIdPlaceholder,
+											disabled,
+											onChange: (event) => setUserOpenId(event.target.value)
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+											type: "text",
+											className: "dsh-channels-cfg__input dsh-channels-cfg__accessInput",
+											value: userName,
+											placeholder: PANEL_COPY.accessUserNamePlaceholder,
+											"aria-label": PANEL_COPY.accessUserNamePlaceholder,
+											disabled,
+											onChange: (event) => setUserName(event.target.value)
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
+											disabled: disabled || userOpenId.trim() === "",
+											onClick: () => {
+												submitUser();
+											},
+											children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAddUser
+										})
+									]
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-channels-cfg__accessSection",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-channels-cfg__labelRow",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-channels-cfg__label",
+									children: PANEL_COPY.accessRequestsTitle
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "dsh-channels-cfg__cardMeta",
+									children: [requests.length, " 条"]
+								})]
+							}), requests.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-channels-cfg__help",
+								children: PANEL_COPY.accessRequestsEmpty
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+								className: "dsh-channels-cfg__accessList",
+								children: requests.map((request) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+									className: "dsh-channels-cfg__accessRow",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dsh-channels-cfg__accessMain",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+											request.kind === "group" ? PANEL_COPY.accessRequestGroup : PANEL_COPY.accessRequestUser,
+											"：",
+											request.name ?? request.targetId
+										] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											className: "dsh-channels-cfg__accessMeta",
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													className: "dsh-channels-cfg__mono",
+													children: request.targetId
+												}),
+												` · ${formatAccessDate(request.createdAt)} · ${PANEL_COPY.accessRequestExpires} ${formatAccessDate(request.expiresAt)}`,
+												request.kind === "user" && request.requester !== void 0 ? ` · ${PANEL_COPY.accessRequestRequester} ${request.requester}` : "",
+												request.kind === "user" && request.groupName !== void 0 ? ` · ${request.groupName}` : request.kind === "user" && request.chatId !== void 0 ? ` · ${request.chatId}` : ""
+											]
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dsh-channels-cfg__accessActions",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
+											disabled,
+											onClick: () => onResolveRequest(request.token, "allow"),
+											children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAllow
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsh-channels-cfg__btn",
+											disabled,
+											onClick: () => onResolveRequest(request.token, "deny"),
+											children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessDeny
+										})]
+									})]
+								}, request.token))
+							})]
+						})
+					] }),
+					notice === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-channels-cfg__notice dsh-channels-cfg__notice--ok",
+						role: "status",
+						"aria-live": "polite",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: notice })
+					}),
+					error === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__fieldError",
+						role: "alert",
+						children: error
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.accessHints
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.accessChatIdHint
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/access-tab.tsx
+		/**
+		* 「访问授权」tab：准入与授权字段表单（管理员 open_id / 准入模式 /
+		* 申请有效期）+ 白名单与待处理申请卡。表单保存走全局 draft，白名单
+		* 增删是独立即时 mutation。
+		*
+		* @module dsh-channels/client/panel/access-tab
+		*/
+		function AccessTab(props) {
+			const { form, accessNotice, accessError, onAddGroup, onRemoveGroup, onAddUser, onRemoveUser, onResolveRequest } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-cfg__tabBody",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabHelp, { text: PANEL_COPY.accessTabHelp }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsCard, {
+						form,
+						groups: TAB_FIELD_GROUPS.access
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaveBar, {
+						form,
+						tab: "access"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessCard, {
+						panel: form.panel,
+						busy: form.busy,
+						locked: form.locked,
+						notice: accessNotice,
+						error: accessError,
+						onAddGroup,
+						onRemoveGroup,
+						onAddUser,
+						onRemoveUser,
+						onResolveRequest
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/advanced-tab.tsx
+		/**
+		* 「高级」tab：流式刷新等低层字段 + 只读部署信息（overlayPath / version /
+		* 部署级参数）+ 「清除 Web 覆盖」。清除覆盖是整体动作，不走 draft。
+		*
+		* @module dsh-channels/client/panel/advanced-tab
+		*/
+		function AdvancedTab(props) {
+			const { form, onClear } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-cfg__tabBody",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabHelp, { text: PANEL_COPY.advancedTabHelp }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsCard, {
+						form,
+						groups: TAB_FIELD_GROUPS.advanced
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaveBar, {
+						form,
+						tab: "advanced"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedCard, {
+						panel: form.panel,
+						busy: form.busy,
+						locked: form.locked,
+						onClear
+					})
+				]
+			});
+		}
+		/** Read-only deployment facts; the only write action here drops the overlay file. */
+		function AdvancedCard(props) {
+			const { panel, busy, locked, onClear } = props;
+			const { readOnly } = panel.config;
+			const overridden = panel.config.overriddenKeys.length;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "dsh-channels-cfg__card",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-cfg__cardHead",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__cardTitle",
+							children: PANEL_COPY.advancedCard
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__cardMeta",
+							children: overridden === 0 ? PANEL_COPY.inherited : `${PANEL_COPY.overridden} ${overridden} 项`
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.advancedHelp
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-channels-cfg__labelRow",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__cardTitle",
+							children: PANEL_COPY.readOnlyCard
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-cfg__readOnly",
+						children: [
+							readOnly.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-channels-cfg__kv",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-channels-cfg__kvKey",
+										children: field.label
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-channels-cfg__kvValue",
+										children: field.value
+									}),
+									field.help === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-channels-cfg__help",
+										children: field.help
+									})
+								]
+							}, field.key)),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-channels-cfg__kv",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-channels-cfg__kvKey",
+										children: PANEL_COPY.overlayPath
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-channels-cfg__kvValue dsh-channels-cfg__mono",
+										children: panel.status.overlayPath
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-channels-cfg__help",
+										children: PANEL_COPY.overlayPathHelp
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-channels-cfg__kv",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-channels-cfg__kvKey",
+									children: PANEL_COPY.version
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-channels-cfg__kvValue dsh-channels-cfg__mono",
+									children: panel.status.version
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-cfg__actions",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-channels-cfg__btn",
+							onClick: onClear,
+							disabled: overridden === 0 || busy !== null || locked,
+							children: busy === "clear" ? PANEL_COPY.clearing : PANEL_COPY.clear
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__help",
+							children: overridden === 0 ? PANEL_COPY.noOverrides : `${PANEL_COPY.overridden} ${overridden} 项`
+						})]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/credentials-card.tsx
+		/**
+		* 飞书应用凭据编辑器：值经 Host 的 DSH 凭据服务写入本机凭据库，面板只显示
+		* 「已配置 / 未配置」，两个方向都不回显已存值。保存动作由页面外壳持有
+		* （凭据保存独立于配置 draft）。
+		*
+		* @module dsh-channels/client/panel/credentials-card
+		*/
+		function CredentialsCard(props) {
+			const { panel, credentials } = props;
+			const { appId, appSecret, issues, busy, locked, onAppIdChange, onAppSecretChange, onSave, onClear } = credentials;
+			const appIdState = panel.config.credentials.appId;
+			const appSecretState = panel.config.credentials.appSecret;
+			const configured = appIdState.configured && appSecretState.configured;
+			const writable = appIdState.writable || appSecretState.writable;
+			const disabled = busy !== null || locked || !writable;
+			const pending = appId.trim() !== "" || appSecret.trim() !== "";
+			const row = (field, label, state, value, type, placeholder, onChange) => {
+				const issue = issues.find((item) => item.key === field);
+				const inputClass = `dsh-channels-cfg__input${issue === void 0 ? "" : " dsh-channels-cfg__input--invalid"}`;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-channels-cfg__field",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-channels-cfg__labelRow",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-channels-cfg__label",
+								children: label
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `dsh-channels-cfg__badge dsh-channels-cfg__badge--${state.configured ? "ok" : "bad"}`,
+								children: state.configured ? PANEL_COPY.credentialConfigured : PANEL_COPY.credentialMissing
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-channels-cfg__cred",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type,
+								className: inputClass,
+								value,
+								placeholder,
 								autoComplete: "new-password",
+								"aria-label": label,
 								disabled,
 								onChange: (event) => onChange(event.target.value)
 							}), state.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -863,7 +1519,7 @@ window.__ModuleLoader__.load({
 									className: "dsh-channels-cfg__mono",
 									children: state.ref
 								}),
-								state.source === void 0 ? "" : `（来源：${state.source}）`
+								state.source === void 0 ? "" : ` · ${state.source}`
 							]
 						}),
 						issue === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -882,10 +1538,14 @@ window.__ModuleLoader__.load({
 							className: "dsh-channels-cfg__cardTitle",
 							children: PANEL_COPY.credentialsCard
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-channels-cfg__cardMeta",
-							children: "DSH 凭据库"
+							className: `dsh-channels-cfg__badge dsh-channels-cfg__badge--${configured ? "ok" : "muted"}`,
+							children: configured ? PANEL_COPY.configuredBadge : PANEL_COPY.unconfiguredBadge
 						})]
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.credentialsCardHelp
+					}),
 					row("appId", PANEL_COPY.appIdLabel, appIdState, appId, "text", PANEL_COPY.appIdPlaceholder, onAppIdChange),
 					row("appSecret", PANEL_COPY.appSecretLabel, appSecretState, appSecret, "password", PANEL_COPY.appSecretPlaceholder, onAppSecretChange),
 					writable ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -905,101 +1565,154 @@ window.__ModuleLoader__.load({
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dsh-channels-cfg__spacer" }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: "dsh-channels-cfg__help",
-								children: PANEL_COPY.credentialsHelp
+								children: PANEL_COPY.credentialsPendingHint
 							})
 						]
 					})
 				]
 			});
 		}
-		/** Read-only card: credentials, storage layer, and advanced limits. */
-		function AdvancedCard(props) {
-			const { panel } = props;
-			const { readOnly } = panel.config;
+		//#endregion
+		//#region src/client/panel/connection-tab.tsx
+		/**
+		* 「连接」tab：按 Host 派生的生命周期阶段渲染连接引导。
+		*
+		* - unconfigured：onboarding 三步 + 凭据卡（不渲染可用的「连接」按钮）
+		* - idle：连接信息卡 + 「连接飞书」
+		* - error：连接信息卡 + 最近一次连接失败 + 「重试」
+		* - connected：连接信息卡 + 「重启飞书连接」+ 凭据卡
+		* - connecting：禁用按钮显示「连接中…」
+		*
+		* @module dsh-channels/client/panel/connection-tab
+		*/
+		function ConnectionTab(props) {
+			const { panel, status, busy, credentials, onReconnect } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-cfg__tabBody",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabHelp, { text: PANEL_COPY.connectionTabHelp }),
+					panel.config.restartPendingKeys.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RestartBanner, {
+						panel,
+						busy,
+						locked: status.busy,
+						onReconnect
+					}),
+					status.phase === "unconfigured" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OnboardingCard, { status }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectionInfoCard, {
+						status,
+						busy,
+						onReconnect
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CredentialsCard, {
+						panel,
+						credentials
+					})
+				]
+			});
+		}
+		/** First-run guide: create the app, fill the credentials, save and wait. */
+		function OnboardingCard(props) {
+			const { status } = props;
+			const steps = [
+				{
+					title: PANEL_COPY.onboardingStep1Title,
+					text: PANEL_COPY.onboardingStep1Text
+				},
+				{
+					title: PANEL_COPY.onboardingStep2Title,
+					text: PANEL_COPY.onboardingStep2Text
+				},
+				{
+					title: PANEL_COPY.onboardingStep3Title,
+					text: PANEL_COPY.onboardingStep3Text
+				}
+			];
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: "dsh-channels-cfg__card",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "dsh-channels-cfg__cardHead",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-channels-cfg__cardTitle",
-						children: PANEL_COPY.advancedCard
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "dsh-channels-cfg__readOnly",
-					children: [
-						readOnly.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-channels-cfg__kv",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__kvKey",
-									children: field.label
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__kvValue",
-									children: field.value
-								}),
-								field.help === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__help",
-									children: field.help
-								})
-							]
-						}, field.key)),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-channels-cfg__kv",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__kvKey",
-									children: PANEL_COPY.overlayPath
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__kvValue dsh-channels-cfg__mono",
-									children: panel.status.overlayPath
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__help",
-									children: "可以直接编辑该 JSON 文件；面板保存会整体重写它，「清除 Web 覆盖」会删除它。"
-								})
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-channels-cfg__kv",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-cfg__cardHead",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__cardTitle",
+							children: PANEL_COPY.onboardingTitle
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__badge dsh-channels-cfg__badge--muted",
+							children: PANEL_COPY.phaseUnconfigured
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.onboardingIntro
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+						className: "dsh-channels-cfg__steps",
+						children: steps.map((step, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+							className: "dsh-channels-cfg__step",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__kvKey",
-								children: PANEL_COPY.version
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__kvValue dsh-channels-cfg__mono",
-								children: panel.status.version
+								className: "dsh-channels-cfg__stepIndex",
+								children: index + 1
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "dsh-channels-cfg__stepBody",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-channels-cfg__stepTitle",
+									children: step.title
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "dsh-channels-cfg__help",
+									children: step.text
+								})]
 							})]
-						})
-					]
-				})]
+						}, step.title))
+					}),
+					status.missingConfig.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-cfg__banner",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", { children: [PANEL_COPY.missingConfig, "："] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: status.missingConfig.join("、") })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.statusHintUnconfigured
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.onboardingDocsHint
+					})
+				]
 			});
 		}
-		/** Workspace cleanup card: deletion preview + the irreversible manual action. */
-		function CleanupCard(props) {
-			const { panel, cleanup, busy, result, error, onRun } = props;
-			const autoText = cleanup.retention === "off" ? PANEL_COPY.cleanupAutoInactive : cleanup.auto ? PANEL_COPY.cleanupAutoOn : PANEL_COPY.cleanupAutoOff;
-			const blocked = cleanup.error !== void 0 ? `${PANEL_COPY.cleanupPreviewFailed}：${cleanup.error}` : cleanup.retention === "off" ? PANEL_COPY.cleanupDisabledOff : cleanup.candidates === 0 ? PANEL_COPY.cleanupDisabledEmpty : null;
+		/** Runtime facts plus the one lifecycle action available in the current phase. */
+		function ConnectionInfoCard(props) {
+			const { status, busy, onReconnect } = props;
+			const badge = phaseBadge(status.phase);
+			const actionBusy = busy !== null || status.busy;
+			const connection = connectionStateLabel(status.connection?.state);
 			const facts = [
 				{
-					label: PANEL_COPY.cleanupRetention,
-					value: retentionLabel(panel, cleanup)
+					label: PANEL_COPY.statusCard,
+					value: badge.text
+				},
+				{
+					label: PANEL_COPY.connectionStateLabel,
+					value: connection.text
+				},
+				{
+					label: PANEL_COPY.botOpenId,
+					value: status.botOpenIdTail ?? PANEL_COPY.unknownValue
+				},
+				{
+					label: PANEL_COPY.uptime,
+					value: formatUptime(status.uptimeMs)
 				},
 				{
-					label: PANEL_COPY.cleanupAutoLabel,
-					value: autoText
+					label: PANEL_COPY.routeCount,
+					value: String(status.routeCount)
 				},
 				{
-					label: PANEL_COPY.cleanupCandidates,
-					value: `${cleanup.candidates} / ${cleanup.workspaces} 个`
+					label: PANEL_COPY.liveAgentCount,
+					value: String(status.liveAgentCount)
 				},
 				{
-					label: PANEL_COPY.cleanupCandidateBytes,
-					value: formatBytes(cleanup.candidateBytes)
+					label: PANEL_COPY.inflightTurnCount,
+					value: String(status.inflightTurnCount)
 				}
 			];
-			const running = busy === "cleanup";
-			const failed = result !== null && (!result.ok || error !== null);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: "dsh-channels-cfg__card",
 				children: [
@@ -1007,15 +1720,18 @@ window.__ModuleLoader__.load({
 						className: "dsh-channels-cfg__cardHead",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "dsh-channels-cfg__cardTitle",
-							children: PANEL_COPY.cleanupCard
+							children: PANEL_COPY.connectionInfo
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-channels-cfg__cardMeta",
-							children: retentionLabel(panel, cleanup)
+							className: `dsh-channels-cfg__badge dsh-channels-cfg__badge--${status.configured ? "ok" : "bad"}`,
+							children: status.configured ? PANEL_COPY.configuredBadge : PANEL_COPY.unconfiguredBadge
 						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-channels-cfg__help",
-						children: PANEL_COPY.cleanupCardHelp
+					status.lastStartError === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-cfg__notice dsh-channels-cfg__notice--error",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: PANEL_COPY.lastError }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__mono",
+							children: status.lastStartError
+						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dsh-channels-cfg__facts",
@@ -1030,82 +1746,166 @@ window.__ModuleLoader__.load({
 							})]
 						}, fact.label))
 					}),
-					blocked === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-channels-cfg__help",
-						children: blocked
-					}),
-					result === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: `dsh-channels-cfg__notice dsh-channels-cfg__notice--${failed ? "error" : "ok"}`,
-						children: [result.ok ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-							PANEL_COPY.cleanupDone,
+					status.reasons.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: `dsh-channels-cfg__help${status.level === "unhealthy" ? " dsh-channels-cfg__reasonBad" : ""}`,
+						children: [
+							PANEL_COPY.healthReasons,
 							"：",
-							PANEL_COPY.cleanupDeleted,
-							" ",
-							result.deletedWorkspaces,
-							" 个，",
-							PANEL_COPY.cleanupRetired,
-							" ",
-							result.retiredRoutes,
-							" 条，",
-							PANEL_COPY.cleanupFreed,
-							" ",
-							formatBytes(result.freedBytes),
-							"。"
-						] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [PANEL_COPY.cleanupFailed, result.error === void 0 ? "" : `：${result.error}`] }), result.failures.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: PANEL_COPY.cleanupFailures }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-							className: "dsh-channels-cfg__issues",
-							children: result.failures.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-								className: "dsh-channels-cfg__mono",
-								children: failure
-							}, `${index}-${failure}`))
-						})] })]
-					}),
-					error === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-channels-cfg__fieldError",
-						children: error
+							status.reasons.join("；")
+						]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "dsh-channels-cfg__actions",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--danger",
-							onClick: onRun,
-							disabled: running || busy !== null || blocked !== null,
-							children: running ? PANEL_COPY.cleanupRunning : PANEL_COPY.cleanupNow
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-channels-cfg__help",
-							children: PANEL_COPY.cleanupConfirmHint
-						})]
+						children: [
+							status.phase === "connecting" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
+								disabled: true,
+								children: PANEL_COPY.connecting
+							}) : null,
+							status.phase === "idle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
+								onClick: onReconnect,
+								disabled: actionBusy,
+								children: busy === "reconnect" ? PANEL_COPY.connecting : PANEL_COPY.connect
+							}) : null,
+							status.phase === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
+								onClick: onReconnect,
+								disabled: actionBusy,
+								children: busy === "reconnect" ? PANEL_COPY.connecting : PANEL_COPY.retry
+							}) : null,
+							status.phase === "connected" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--danger",
+								onClick: onReconnect,
+								disabled: actionBusy,
+								children: busy === "reconnect" ? PANEL_COPY.reconnecting : PANEL_COPY.reconnect
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-channels-cfg__help",
+								children: PANEL_COPY.restartWarning
+							})] }) : null
+						]
 					})
 				]
 			});
 		}
-		/** Access card: fail-closed warning, administrator, whitelists, pending requests. */
-		function AccessCard(props) {
-			const { panel, busy, notice, error, onAddGroup, onRemoveGroup, onAddUser, onRemoveUser, onResolveRequest } = props;
-			const { access } = panel;
-			const [groupChatId, setGroupChatId] = (0, react.useState)("");
-			const [groupName, setGroupName] = (0, react.useState)("");
-			const [userOpenId, setUserOpenId] = (0, react.useState)("");
-			const [userName, setUserName] = (0, react.useState)("");
-			const groups = access.groups;
-			const users = access.users;
-			const requests = access.requests;
-			const working = busy === "access";
-			const disabled = busy !== null;
-			const submitGroup = async () => {
-				if (groupChatId.trim() === "") return;
-				if (await onAddGroup(groupChatId, groupName)) {
-					setGroupChatId("");
-					setGroupName("");
-				}
-			};
-			const submitUser = async () => {
-				if (userOpenId.trim() === "") return;
-				if (await onAddUser(userOpenId, userName)) {
-					setUserOpenId("");
-					setUserName("");
+		/** Config saved but only applied on the next connect: offer the one-click restart. */
+		function RestartBanner(props) {
+			const { panel, busy, locked, onReconnect } = props;
+			const keys = panel.config.restartPendingKeys.map((key) => fieldLabel(panel.config.fields, key)).join("、");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-cfg__banner",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [PANEL_COPY.restartBanner, keys] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--danger",
+						onClick: onReconnect,
+						disabled: busy !== null || locked,
+						children: busy === "reconnect" ? PANEL_COPY.reconnecting : PANEL_COPY.reconnect
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.restartWarning
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/model-tab.tsx
+		/**
+		* 「模型」tab：模型服务商 / 模型 id / 推理档位 / Agent 预设四个选择器。
+		* 选项来自 Host 实时目录（页面外壳负责 provider→model→effort 级联刷新），
+		* 目录读取中时在表单上方提示。
+		*
+		* @module dsh-channels/client/panel/model-tab
+		*/
+		function ModelTab(props) {
+			const { form, catalogBusy } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-cfg__tabBody",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabHelp, { text: PANEL_COPY.modelTabHelp }),
+					catalogBusy ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: PANEL_COPY.catalogLoading
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsCard, {
+						form,
+						groups: TAB_FIELD_GROUPS.model
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaveBar, {
+						form,
+						tab: "model"
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/sessions-tab.tsx
+		/**
+		* 「会话与行为」tab：行为 + 内容与附件两组字段（私聊/群聊触发方式、
+		* 首次引导、权限切换、附件接收）。表单字段完全由 Host 描述驱动。
+		*
+		* @module dsh-channels/client/panel/sessions-tab
+		*/
+		function SessionsTab(props) {
+			const { form } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-cfg__tabBody",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabHelp, { text: PANEL_COPY.sessionsTabHelp }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsCard, {
+						form,
+						groups: TAB_FIELD_GROUPS.sessions
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaveBar, {
+						form,
+						tab: "sessions"
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/cleanup-card.tsx
+		/**
+		* 目录清理卡：展示清理预览（保留期 / 自动清理 / 候选数量与空间），
+		* 执行前二次确认，结果与部分失败逐条展示。`cleanup.error` 非空时
+		* （例如未连接、无法扫描工作区）按钮天然禁用并显示原因。
+		*
+		* @module dsh-channels/client/panel/cleanup-card
+		*/
+		function CleanupCard(props) {
+			const { panel, cleanup, busy, locked, result, error, onRun } = props;
+			const autoText = cleanup.retention === "off" ? PANEL_COPY.cleanupAutoInactive : cleanup.auto ? PANEL_COPY.cleanupAutoOn : PANEL_COPY.cleanupAutoOff;
+			const blocked = cleanup.error !== void 0 ? `${PANEL_COPY.cleanupPreviewFailed}：${cleanup.error}` : cleanup.retention === "off" ? PANEL_COPY.cleanupDisabledOff : cleanup.candidates === 0 ? PANEL_COPY.cleanupDisabledEmpty : null;
+			const facts = [
+				{
+					label: PANEL_COPY.cleanupRetention,
+					value: retentionLabel(panel, cleanup)
+				},
+				{
+					label: PANEL_COPY.cleanupAutoLabel,
+					value: autoText
+				},
+				{
+					label: PANEL_COPY.cleanupCandidates,
+					value: `${cleanup.candidates} 个`
+				},
+				{
+					label: PANEL_COPY.cleanupWorkspaces,
+					value: `${cleanup.workspaces} 个`
+				},
+				{
+					label: PANEL_COPY.cleanupCandidateBytes,
+					value: formatBytes(cleanup.candidateBytes)
 				}
-			};
+			];
+			const running = busy === "cleanup";
+			const failed = result !== null && (!result.ok || error !== null);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: "dsh-channels-cfg__card",
 				children: [
@@ -1113,258 +1913,133 @@ window.__ModuleLoader__.load({
 						className: "dsh-channels-cfg__cardHead",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "dsh-channels-cfg__cardTitle",
-							children: PANEL_COPY.accessCard
+							children: PANEL_COPY.cleanupCard
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "dsh-channels-cfg__cardMeta",
-							children: accessModeLabel(panel, access.mode)
+							children: retentionLabel(panel, cleanup)
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "dsh-channels-cfg__help",
-						children: PANEL_COPY.accessCardHelp
-					}),
-					access.mode === "guarded" && !access.admin.configured ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "dsh-channels-cfg__notice dsh-channels-cfg__notice--error",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: PANEL_COPY.accessAdminMissingWarning })
-					}) : null,
-					access.mode === "open" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "dsh-channels-cfg__banner",
-						children: PANEL_COPY.accessModeOpenWarning
-					}) : null,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-channels-cfg__kv",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__kvKey",
-								children: PANEL_COPY.accessAdminLabel
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: `dsh-channels-cfg__kvValue dsh-channels-cfg__mono${access.admin.configured ? "" : " dsh-channels-cfg__reasonBad"}`,
-								children: access.admin.openId ?? PANEL_COPY.accessAdminMissing
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__help",
-								children: PANEL_COPY.accessAdminHint
-							})
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-channels-cfg__accessSection",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "dsh-channels-cfg__labelRow",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__label",
-									children: PANEL_COPY.accessGroupsTitle
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "dsh-channels-cfg__cardMeta",
-									children: [groups.length, " 个"]
-								})]
-							}),
-							groups.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__help",
-								children: PANEL_COPY.accessGroupsEmpty
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-								className: "dsh-channels-cfg__accessList",
-								children: groups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-									className: "dsh-channels-cfg__accessRow",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-										className: "dsh-channels-cfg__accessMain",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: group.name ?? group.chatId }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "dsh-channels-cfg__accessMeta",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsh-channels-cfg__mono",
-												children: group.chatId
-											}), ` · ${accessSourceLabel(group.source)} · ${formatAccessDate(group.addedAt)}`]
-										})]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "dsh-channels-cfg__btn",
-										disabled,
-										onClick: () => onRemoveGroup(group.chatId),
-										children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessRemove
-									})]
-								}, group.chatId))
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "dsh-channels-cfg__accessAdd",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "text",
-										className: "dsh-channels-cfg__input dsh-channels-cfg__accessInput",
-										value: groupChatId,
-										placeholder: PANEL_COPY.accessGroupChatIdPlaceholder,
-										disabled,
-										onChange: (event) => setGroupChatId(event.target.value)
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "text",
-										className: "dsh-channels-cfg__input dsh-channels-cfg__accessInput",
-										value: groupName,
-										placeholder: PANEL_COPY.accessGroupNamePlaceholder,
-										disabled,
-										onChange: (event) => setGroupName(event.target.value)
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
-										disabled: disabled || groupChatId.trim() === "",
-										onClick: () => {
-											submitGroup();
-										},
-										children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAddGroup
-									})
-								]
-							})
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-channels-cfg__accessSection",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "dsh-channels-cfg__labelRow",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__label",
-									children: PANEL_COPY.accessUsersTitle
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "dsh-channels-cfg__cardMeta",
-									children: [users.length, " 个"]
-								})]
-							}),
-							users.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__help",
-								children: PANEL_COPY.accessUsersEmpty
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-								className: "dsh-channels-cfg__accessList",
-								children: users.map((user) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-									className: "dsh-channels-cfg__accessRow",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-										className: "dsh-channels-cfg__accessMain",
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: user.name ?? user.openId }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-											className: "dsh-channels-cfg__accessMeta",
-											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsh-channels-cfg__mono",
-												children: user.openId
-											}), ` · ${accessSourceLabel(user.source)} · ${formatAccessDate(user.addedAt)}`]
-										})]
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "dsh-channels-cfg__btn",
-										disabled,
-										onClick: () => onRemoveUser(user.openId),
-										children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessRemove
-									})]
-								}, user.openId))
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "dsh-channels-cfg__accessAdd",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "text",
-										className: "dsh-channels-cfg__input dsh-channels-cfg__accessInput",
-										value: userOpenId,
-										placeholder: PANEL_COPY.accessUserOpenIdPlaceholder,
-										disabled,
-										onChange: (event) => setUserOpenId(event.target.value)
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-										type: "text",
-										className: "dsh-channels-cfg__input dsh-channels-cfg__accessInput",
-										value: userName,
-										placeholder: PANEL_COPY.accessUserNamePlaceholder,
-										disabled,
-										onChange: (event) => setUserName(event.target.value)
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
-										disabled: disabled || userOpenId.trim() === "",
-										onClick: () => {
-											submitUser();
-										},
-										children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAddUser
-									})
-								]
-							})
-						]
+						children: PANEL_COPY.cleanupCardHelp
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dsh-channels-cfg__accessSection",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-channels-cfg__labelRow",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dsh-channels-cfg__facts",
+						children: facts.map((fact) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dsh-channels-cfg__fact",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-channels-cfg__label",
-								children: PANEL_COPY.accessRequestsTitle
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "dsh-channels-cfg__cardMeta",
-								children: [requests.length, " 条"]
+								className: "dsh-channels-cfg__factLabel",
+								children: fact.label
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "dsh-channels-cfg__factValue",
+								children: fact.value
 							})]
-						}), requests.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "dsh-channels-cfg__help",
-							children: PANEL_COPY.accessRequestsEmpty
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-							className: "dsh-channels-cfg__accessList",
-							children: requests.map((request) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-								className: "dsh-channels-cfg__accessRow",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "dsh-channels-cfg__accessMain",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-										request.kind === "group" ? PANEL_COPY.accessRequestGroup : PANEL_COPY.accessRequestUser,
-										"：",
-										request.name ?? request.targetId
-									] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-										className: "dsh-channels-cfg__accessMeta",
-										children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												className: "dsh-channels-cfg__mono",
-												children: request.targetId
-											}),
-											` · ${formatAccessDate(request.createdAt)} · ${PANEL_COPY.accessRequestExpires} ${formatAccessDate(request.expiresAt)}`,
-											request.kind === "user" && request.requester !== void 0 ? ` · ${PANEL_COPY.accessRequestRequester} ${request.requester}` : "",
-											request.kind === "user" && request.groupName !== void 0 ? ` · 群 ${request.groupName}` : request.kind === "user" && request.chatId !== void 0 ? ` · 群 ${request.chatId}` : ""
-										]
-									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: "dsh-channels-cfg__accessActions",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
-										disabled,
-										onClick: () => onResolveRequest(request.token, "allow"),
-										children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessAllow
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "dsh-channels-cfg__btn",
-										disabled,
-										onClick: () => onResolveRequest(request.token, "deny"),
-										children: working ? PANEL_COPY.accessWorking : PANEL_COPY.accessDeny
-									})]
-								})]
-							}, request.token))
-						})]
+						}, fact.label))
 					}),
-					notice === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "dsh-channels-cfg__notice dsh-channels-cfg__notice--ok",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: notice })
+					blocked === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-channels-cfg__help",
+						children: blocked
+					}),
+					result === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: `dsh-channels-cfg__notice dsh-channels-cfg__notice--${failed ? "error" : "ok"}`,
+						children: [result.ok ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+							PANEL_COPY.cleanupDone,
+							"：",
+							PANEL_COPY.cleanupDeleted,
+							" ",
+							result.deletedWorkspaces,
+							" 个，",
+							PANEL_COPY.cleanupDeletedDirs,
+							" ",
+							result.deletedSessionDirs,
+							" 个，",
+							PANEL_COPY.cleanupRetired,
+							" ",
+							result.retiredRoutes,
+							" 条，",
+							PANEL_COPY.cleanupFreed,
+							" ",
+							formatBytes(result.freedBytes),
+							"。"
+						] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [PANEL_COPY.cleanupFailed, result.error === void 0 ? "" : `：${result.error}`] }), result.failures.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: PANEL_COPY.cleanupFailures }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+							className: "dsh-channels-cfg__issues",
+							children: result.failures.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+								className: "dsh-channels-cfg__mono",
+								children: failure
+							}, `${index}-${failure}`))
+						})] })]
 					}),
 					error === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "dsh-channels-cfg__fieldError",
 						children: error
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-channels-cfg__help",
-						children: PANEL_COPY.accessHints
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-cfg__actions",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--danger",
+							onClick: onRun,
+							disabled: running || busy !== null || locked || blocked !== null,
+							children: running ? PANEL_COPY.cleanupRunning : PANEL_COPY.cleanupNow
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__help",
+							children: PANEL_COPY.cleanupConfirmHint
+						})]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/panel/workspace-tab.tsx
+		/**
+		* 「工作区」tab：工作区根目录 / 过期保留策略 / 自动清理字段 + 目录清理卡。
+		* 表单保存栏在字段卡正下方，清理卡（独立动作，不走 draft）在其后。
+		*
+		* @module dsh-channels/client/panel/workspace-tab
+		*/
+		function WorkspaceTab(props) {
+			const { form, cleanup, cleanupResult, cleanupError, onRunCleanup } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsh-channels-cfg__tabBody",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabHelp, { text: PANEL_COPY.workspaceTabHelp }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldsCard, {
+						form,
+						groups: TAB_FIELD_GROUPS.workspace
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-channels-cfg__help",
-						children: PANEL_COPY.accessChatIdHint
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaveBar, {
+						form,
+						tab: "workspace"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CleanupCard, {
+						panel: form.panel,
+						cleanup,
+						busy: form.busy,
+						locked: form.locked,
+						result: cleanupResult,
+						error: cleanupError,
+						onRun: onRunCleanup
 					})
 				]
 			});
 		}
-		/** The settings.section page: status card + generic config form + read-only facts. */
+		//#endregion
+		//#region src/client/panel/index.tsx
+		/**
+		* 设置 →「飞书渠道」页面：数据加载、5 秒状态轮询、全局 draft 与顶部状态头 /
+		* tab 导航的外壳。
+		*
+		* 所有 Host 交互（panel / status / catalog / config / credentials / cleanup /
+		* access / pick-directory）都集中在这里；tab 组件只接收渲染所需的数据与
+		* 回调。页面不 import 任何 DSH 客户端包，只依赖 react 与 `settings.section`
+		* 槽位。
+		*
+		* @module dsh-channels/client/panel
+		*/
+		/** Page shell: one panel payload, one status poll, one global config draft. */
 		function FeishuChannelsSection(_props) {
 			const [load, setLoad] = (0, react.useState)({ phase: "loading" });
+			const [activeTab, setActiveTab] = (0, react.useState)("connection");
 			const [draft, setDraft] = (0, react.useState)({});
 			const [notice, setNotice] = (0, react.useState)(null);
 			const [busy, setBusy] = (0, react.useState)(null);
@@ -1379,8 +2054,14 @@ window.__ModuleLoader__.load({
 			const [accessNotice, setAccessNotice] = (0, react.useState)(null);
 			const [accessError, setAccessError] = (0, react.useState)(null);
 			const catalogTicket = (0, react.useRef)(0);
+			/** Latest ready panel, read from the poll loop without restarting it. */
+			const panelRef = (0, react.useRef)(null);
 			const panel = load.phase === "ready" ? load.panel : null;
-			const currentStatus = status ?? panel?.status ?? null;
+			/** Host-side lifecycle busy: connecting/restarting blocks every panel write. */
+			const hostBusy = (status ?? panel?.status)?.busy === true;
+			(0, react.useEffect)(() => {
+				panelRef.current = panel;
+			}, [panel]);
 			const loadPanel = (0, react.useCallback)(async () => {
 				setLoad({ phase: "loading" });
 				setNotice(null);
@@ -1421,10 +2102,21 @@ window.__ModuleLoader__.load({
 				let cancelled = false;
 				const tick = async () => {
 					try {
+						const previousPhase = panelRef.current?.status.phase;
 						const next = await fetchStatus();
 						if (cancelled) return;
 						setStatus(next);
 						setPollError(null);
+						if (previousPhase !== void 0 && previousPhase !== next.phase) try {
+							const refreshed = await fetchPanel();
+							if (!cancelled) {
+								setLoad({
+									phase: "ready",
+									panel: refreshed
+								});
+								setStatus(refreshed.status);
+							}
+						} catch {}
 					} catch (error) {
 						if (!cancelled) setPollError(messageOf(error));
 					}
@@ -1471,7 +2163,7 @@ window.__ModuleLoader__.load({
 			const currentValues = (0, react.useMemo)(() => {
 				if (panel === null) return {};
 				const valueOf = (key) => {
-					const raw = draft[key] ?? effectiveValue(panel, key);
+					const raw = draft[key] ?? panel.config.effective[key] ?? panel.config.base[key];
 					return typeof raw === "string" && raw !== "" ? raw : void 0;
 				};
 				return {
@@ -1488,13 +2180,14 @@ window.__ModuleLoader__.load({
 			]);
 			/** Whether one selector currently renders as a dropdown for this form. */
 			const isSelectField = (0, react.useCallback)((key) => renderedFields.some((field) => field.key === key && field.kind === "select"), [renderedFields]);
+			/** Draft one field, cascading provider → model → effort like the Host catalog. */
 			const updateDraft = (0, react.useCallback)((key, value) => {
 				if (panel === null) return;
-				const providerNow = String(draft.provider ?? effectiveValue(panel, "provider") ?? "");
+				const providerNow = String(draft.provider ?? panel.config.effective.provider ?? panel.config.base.provider ?? "");
 				setNotice(null);
 				if (key === "provider") {
 					const nextProvider = String(value ?? "");
-					const keepModel = nextProvider === String(effectiveValue(panel, "provider") ?? "") ? String(effectiveValue(panel, "model") ?? "") : "";
+					const keepModel = nextProvider === String(panel.config.effective.provider ?? panel.config.base.provider ?? "") ? String(panel.config.effective.model ?? panel.config.base.model ?? "") : "";
 					setDraft((previous) => ({
 						...previous,
 						provider: value,
@@ -1534,18 +2227,34 @@ window.__ModuleLoader__.load({
 				}
 			}, []);
 			/**
-			* Save one scope of the form. The global footer saves every draft key; the
-			* model card's own button saves only the four model-facing keys, so editing
-			* the model does not require scrolling to the bottom.
+			* Manual refresh: reload the whole panel payload so access lists, the cleanup
+			* preview and `restartPendingKeys` catch up with the Host. The dirty draft is
+			* deliberately preserved — refreshing never discards user input.
 			*/
-			const onSave = (0, react.useCallback)(async (scope) => {
+			const onRefresh = (0, react.useCallback)(async () => {
+				try {
+					const next = await fetchPanel();
+					setLoad({
+						phase: "ready",
+						panel: next
+					});
+					setStatus(next.status);
+					setPollError(null);
+					setAccessNotice(null);
+					setAccessError(null);
+				} catch (error) {
+					setPollError(messageOf(error));
+				}
+			}, []);
+			/** Submit every dirty field at once; the Host persists and re-validates. */
+			const onSave = (0, react.useCallback)(async () => {
 				if (panel === null) return;
-				const only = scope === "model" ? new Set(CATALOG_KEYS) : void 0;
-				const { values, issues } = validateDraft(panel, draft, only);
+				const { values, issues } = validateDraft(panel, draft);
 				if (issues.length > 0) {
+					const detail = issues.map((issue) => `${fieldLabel(panel.config.fields, issue.key)} ${issue.message}`).join("；");
 					setNotice({
 						kind: "error",
-						text: "请先修正标红的配置项",
+						text: `${PANEL_COPY.saveInvalid}：${detail}`,
 						issues
 					});
 					return;
@@ -1570,17 +2279,15 @@ window.__ModuleLoader__.load({
 					setStatus(result.panel.status);
 					setCleanupResult(null);
 					setCleanupError(null);
-					const cleared = result.clearedKeys.length === 0 ? "" : `；已清除覆盖：${result.clearedKeys.map((key) => fieldLabel(result.panel.config.fields, key)).join("、")}`;
-					setNotice({
-						kind: "ok",
-						text: `${scope === "model" ? PANEL_COPY.savedModel : PANEL_COPY.saved}${cleared}`
-					});
 					setDraft((previous) => {
-						if (scope !== "model") return {};
 						const next = { ...previous };
-						for (const key of CATALOG_KEYS) delete next[key];
+						for (const key of Object.keys(values)) delete next[key];
 						return next;
 					});
+					setNotice({
+						kind: "ok",
+						text: PANEL_COPY.saved
+					});
 				} catch (error) {
 					setNotice({
 						kind: "error",
@@ -1590,6 +2297,56 @@ window.__ModuleLoader__.load({
 					setBusy(null);
 				}
 			}, [draft, panel]);
+			/** Drop the draft keys owned by one tab (nothing is written). */
+			const discardTab = (0, react.useCallback)((tab) => {
+				if (panel === null) return;
+				const groups = new Set(TAB_FIELD_GROUPS[tab]);
+				const keys = new Set(panel.config.fields.filter((field) => groups.has(field.group)).map((field) => field.key));
+				setDraft((previous) => {
+					const next = { ...previous };
+					for (const key of keys) delete next[key];
+					return next;
+				});
+				setNotice(null);
+				if (tab === "model") {
+					catalogTicket.current += 1;
+					setCatalog(catalogFromFields(panel.config.fields));
+					setCatalogBusy(false);
+				}
+			}, [panel]);
+			/**
+			* Open the host's native directory chooser (workspace root「选择目录…」) and
+			* stage the picked absolute path as a draft value. Nothing is persisted until
+			*「保存更改」; a canceled dialog is a no-op, not an error.
+			*/
+			const onPickDirectory = (0, react.useCallback)(async (key) => {
+				setNotice(null);
+				try {
+					const result = await pickDirectory();
+					if (!result.ok) {
+						setNotice({
+							kind: "error",
+							text: result.error
+						});
+						return;
+					}
+					if ("canceled" in result) return;
+					setDraft((previous) => ({
+						...previous,
+						[key]: result.path
+					}));
+					setNotice({
+						kind: "ok",
+						text: `${PANEL_COPY.directoryPicked}：${result.path}`
+					});
+				} catch (error) {
+					setNotice({
+						kind: "error",
+						text: messageOf(error)
+					});
+				}
+			}, []);
+			/** Drop every Web override and return the refreshed panel. */
 			const onClear = (0, react.useCallback)(async () => {
 				setBusy("clear");
 				setNotice(null);
@@ -1623,8 +2380,15 @@ window.__ModuleLoader__.load({
 					setBusy(null);
 				}
 			}, []);
+			const running = (status ?? panel?.status)?.running === true;
+			/**
+			* The single connect/reconnect action: open a stopped channel or restart a
+			* running one. Only a restart interrupts live replies, so only it confirms.
+			*/
 			const onReconnect = (0, react.useCallback)(async () => {
-				if (!(typeof window.confirm === "function" ? window.confirm(PANEL_COPY.restartWarning) : true)) return;
+				if (running) {
+					if (!(typeof window.confirm === "function" ? window.confirm(PANEL_COPY.restartWarning) : true)) return;
+				}
 				setBusy("reconnect");
 				setNotice(null);
 				try {
@@ -1634,6 +2398,7 @@ window.__ModuleLoader__.load({
 							kind: "error",
 							text: result.error
 						});
+						if (result.unconfigured === true) setActiveTab("connection");
 						await refreshStatus();
 						return;
 					}
@@ -1644,7 +2409,7 @@ window.__ModuleLoader__.load({
 					setStatus(result.panel.status);
 					setNotice({
 						kind: "ok",
-						text: "已重启飞书连接"
+						text: running ? PANEL_COPY.reconnectDone : PANEL_COPY.connectDone
 					});
 				} catch (error) {
 					setNotice({
@@ -1655,7 +2420,7 @@ window.__ModuleLoader__.load({
 				} finally {
 					setBusy(null);
 				}
-			}, [refreshStatus]);
+			}, [refreshStatus, running]);
 			/**
 			* Delete stale workspaces after an explicit confirmation. The Host refreshes
 			* the panel in the same response, so the preview counts update immediately;
@@ -1664,7 +2429,7 @@ window.__ModuleLoader__.load({
 			const onRunCleanup = (0, react.useCallback)(async () => {
 				if (panel === null) return;
 				const { cleanup } = panel;
-				if (!(typeof window.confirm === "function" ? window.confirm(`${PANEL_COPY.cleanupConfirm}\n本次将删除 ${cleanup.candidates} 个工作区，预计释放 ${formatBytes(cleanup.candidateBytes)}。`) : true)) return;
+				if (!(typeof window.confirm === "function" ? window.confirm(`${PANEL_COPY.cleanupConfirm}\n${PANEL_COPY.cleanupCandidates}：${cleanup.candidates} · ${PANEL_COPY.cleanupCandidateBytes}：${formatBytes(cleanup.candidateBytes)}`) : true)) return;
 				setBusy("cleanup");
 				setNotice(null);
 				setCleanupResult(null);
@@ -1791,6 +2556,7 @@ window.__ModuleLoader__.load({
 					setBusy(null);
 				}
 			}, [applyAccess]);
+			/** Save provided credential values; the Host reconnects automatically when ready. */
 			const onSaveCredentials = (0, react.useCallback)(async () => {
 				const values = {};
 				if (appIdInput.trim() !== "") values.appId = appIdInput;
@@ -1815,10 +2581,10 @@ window.__ModuleLoader__.load({
 					setStatus(result.panel.status);
 					setAppIdInput("");
 					setAppSecretInput("");
-					const base = result.reconnect === "pending" ? PANEL_COPY.credentialSavedPending : result.reconnect === "auto" ? PANEL_COPY.credentialSavedReconnected : PANEL_COPY.credentialSaved;
+					const base = result.reconnect === "pending" ? PANEL_COPY.credentialSavedPending : result.reconnect === "auto" ? PANEL_COPY.credentialSavedReconnected : result.reconnect === "unconfigured" ? PANEL_COPY.credentialSavedUnconfigured : result.reconnect === "failed" ? PANEL_COPY.credentialAutoConnectFailed : PANEL_COPY.credentialSaved;
 					setNotice({
-						kind: result.autoReconnectError === void 0 ? "ok" : "error",
-						text: result.autoReconnectError === void 0 ? base : `${base}；自动重连失败：${result.autoReconnectError}`
+						kind: result.reconnect === "failed" || result.autoReconnectError !== void 0 ? "error" : "ok",
+						text: result.autoReconnectError === void 0 ? base : `${base}：${result.autoReconnectError}`
 					});
 				} catch (error) {
 					setNotice({
@@ -1830,8 +2596,7 @@ window.__ModuleLoader__.load({
 				}
 			}, [appIdInput, appSecretInput]);
 			const onClearCredential = (0, react.useCallback)(async (field) => {
-				const label = field === "appId" ? PANEL_COPY.appIdLabel : PANEL_COPY.appSecretLabel;
-				if (!(typeof window.confirm === "function" ? window.confirm(`确定移除已存储的 ${label}？`) : true)) return;
+				if (!(typeof window.confirm === "function" ? window.confirm(PANEL_COPY.credentialRemoveConfirm) : true)) return;
 				setBusy("credentials-clear");
 				setNotice(null);
 				try {
@@ -1862,229 +2627,279 @@ window.__ModuleLoader__.load({
 					setBusy(null);
 				}
 			}, []);
-			const groupedFields = (0, react.useMemo)(() => {
-				if (panel === null) return [];
-				return GROUP_ORDER.map((group) => ({
-					group,
-					label: GROUP_LABELS[group],
-					fields: renderedFields.filter((field) => field.group === group)
-				})).filter((entry) => entry.fields.length > 0);
-			}, [panel, renderedFields]);
-			const modelEntries = groupedFields.filter((entry) => entry.group === "model");
-			const configEntries = groupedFields.filter((entry) => entry.group !== "model");
-			const dirty = Object.keys(draft).length > 0;
-			const modelDirty = CATALOG_KEYS.some((key) => draft[key] !== void 0);
-			const issues = notice?.kind === "error" ? notice.issues ?? [] : [];
+			const issues = (0, react.useMemo)(() => notice?.kind === "error" ? notice.issues ?? [] : [], [notice]);
+			const dirtyCount = Object.keys(draft).length;
+			/** Which tabs currently own a dirty key (the dot is per tab, not global). */
+			const dirtyTabs = (0, react.useMemo)(() => {
+				const tabs = /* @__PURE__ */ new Set();
+				if (panel === null || dirtyCount === 0) return tabs;
+				const groupOf = new Map(panel.config.fields.map((field) => [field.key, field.group]));
+				for (const key of Object.keys(draft)) {
+					const group = groupOf.get(key);
+					if (group === void 0) continue;
+					for (const tab of PANEL_TABS) if (TAB_FIELD_GROUPS[tab.id].includes(group)) tabs.add(tab.id);
+				}
+				return tabs;
+			}, [
+				dirtyCount,
+				draft,
+				panel
+			]);
+			const form = (0, react.useMemo)(() => {
+				if (panel === null) return null;
+				return {
+					panel,
+					fields: renderedFields,
+					draft,
+					issues,
+					busy,
+					locked: hostBusy,
+					dirtyCount,
+					onChange: updateDraft,
+					onSave: () => {
+						onSave();
+					},
+					onDiscardTab: discardTab,
+					onPickDirectory
+				};
+			}, [
+				busy,
+				discardTab,
+				dirtyCount,
+				draft,
+				hostBusy,
+				issues,
+				onPickDirectory,
+				onSave,
+				panel,
+				renderedFields,
+				updateDraft
+			]);
+			const credentials = (0, react.useMemo)(() => ({
+				appId: appIdInput,
+				appSecret: appSecretInput,
+				issues,
+				busy,
+				locked: hostBusy,
+				onAppIdChange: setAppIdInput,
+				onAppSecretChange: setAppSecretInput,
+				onSave: () => {
+					onSaveCredentials();
+				},
+				onClear: (field) => {
+					onClearCredential(field);
+				}
+			}), [
+				appIdInput,
+				appSecretInput,
+				busy,
+				hostBusy,
+				issues,
+				onClearCredential,
+				onSaveCredentials
+			]);
 			if (load.phase === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "dsh-channels-cfg__loading",
-				children: PANEL_COPY.loading
+				className: "dsh-channels-cfg",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "dsh-channels-cfg__loading",
+					children: PANEL_COPY.loading
+				})
 			});
-			if (load.phase === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "dsh-channels-cfg__error",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: PANEL_COPY.loadFailed }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: load.message }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "dsh-channels-cfg__btn",
-						onClick: () => {
-							loadPanel();
-						},
-						children: PANEL_COPY.retry
-					}) })
-				]
+			if (load.phase === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-channels-cfg",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "dsh-channels-cfg__error",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: PANEL_COPY.loadFailed }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: load.message }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-channels-cfg__btn",
+							onClick: () => {
+								loadPanel();
+							},
+							children: PANEL_COPY.retry
+						}) })
+					]
+				})
 			});
+			if (form === null) return null;
+			const current = status ?? load.panel.status;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "dsh-channels-cfg",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-						className: "dsh-channels-cfg__head",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-							className: "dsh-channels-cfg__title",
-							children: PANEL_COPY.title
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "dsh-channels-cfg__desc",
-							children: PANEL_COPY.description
-						})]
-					}),
-					currentStatus === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusCard, {
-						status: currentStatus,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PanelHeader, {
+						status: current,
 						pollError,
 						busy,
+						locked: hostBusy,
 						onRefresh: () => {
-							refreshStatus();
-						},
-						onReconnect: () => {
-							onReconnect();
+							onRefresh();
 						}
 					}),
-					notice === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `dsh-channels-cfg__notice dsh-channels-cfg__notice--${notice.kind === "ok" ? "ok" : "error"}`,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: notice.text })
-					}),
-					panel === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CredentialsCard, {
-						panel,
-						appId: appIdInput,
-						appSecret: appSecretInput,
-						issues,
-						busy,
-						onAppIdChange: setAppIdInput,
-						onAppSecretChange: setAppSecretInput,
-						onSave: () => {
-							onSaveCredentials();
-						},
-						onClear: (field) => {
-							onClearCredential(field);
-						}
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabNav, {
+						activeTab,
+						dirtyTabs,
+						onChange: setActiveTab
 					}),
-					panel === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						panel.config.restartPendingKeys.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-channels-cfg__banner",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [PANEL_COPY.restartBanner, panel.config.restartPendingKeys.map((key) => fieldLabel(panel.config.fields, key)).join("、")] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--danger",
-								onClick: () => {
+					notice === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NoticeBar, { notice }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						role: "tabpanel",
+						id: `dsh-channels-tabpanel-${activeTab}`,
+						"aria-labelledby": `dsh-channels-tab-${activeTab}`,
+						children: [
+							activeTab === "connection" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConnectionTab, {
+								panel: form.panel,
+								status: current,
+								busy,
+								credentials,
+								onReconnect: () => {
 									onReconnect();
+								}
+							}) : null,
+							activeTab === "sessions" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SessionsTab, { form }) : null,
+							activeTab === "model" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelTab, {
+								form,
+								catalogBusy
+							}) : null,
+							activeTab === "workspace" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkspaceTab, {
+								form,
+								cleanup: form.panel.cleanup,
+								cleanupResult,
+								cleanupError,
+								onRunCleanup: () => {
+									onRunCleanup();
+								}
+							}) : null,
+							activeTab === "access" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessTab, {
+								form,
+								accessNotice,
+								accessError,
+								onAddGroup: onAddAccessGroup,
+								onRemoveGroup: (chatId) => {
+									onRemoveAccessGroup(chatId);
 								},
-								disabled: busy !== null,
-								children: busy === "reconnect" ? PANEL_COPY.reconnecting : PANEL_COPY.reconnect
-							})]
-						}),
-						modelEntries.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: "dsh-channels-cfg__card",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "dsh-channels-cfg__cardHead",
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "dsh-channels-cfg__cardTitle",
-										children: PANEL_COPY.modelCard
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "dsh-channels-cfg__cardMeta",
-										children: catalogBusy ? PANEL_COPY.catalogLoading : "选项来自宿主机目录"
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__help",
-									children: PANEL_COPY.modelCardHelp
-								}),
-								modelEntries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "dsh-channels-cfg__grid",
-									children: entry.fields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
-										field,
-										value: draft[field.key] ?? effectiveValue(panel, field.key),
-										issues,
-										onChange: updateDraft
-									}, field.key))
-								}, entry.group)),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "dsh-channels-cfg__footer",
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-											type: "button",
-											className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
-											onClick: () => {
-												onSave("model");
-											},
-											disabled: !modelDirty || busy !== null,
-											children: busy === "save" ? PANEL_COPY.saving : PANEL_COPY.saveModel
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dsh-channels-cfg__spacer" }),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "dsh-channels-cfg__help",
-											children: modelDirty ? "有未保存的模型修改" : PANEL_COPY.modelActionsHint
-										})
-									]
-								})
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: "dsh-channels-cfg__card",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "dsh-channels-cfg__cardHead",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__cardTitle",
-									children: PANEL_COPY.configCard
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__cardMeta",
-									children: panel.config.overriddenKeys.length === 0 ? PANEL_COPY.inherited : `${PANEL_COPY.overridden} ${panel.config.overriddenKeys.length} 项`
-								})]
-							}), configEntries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dsh-channels-cfg__cardHead",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__cardTitle",
-									children: entry.label
-								})
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "dsh-channels-cfg__grid",
-								children: entry.fields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
-									field,
-									value: draft[field.key] ?? effectiveValue(panel, field.key),
-									issues,
-									onChange: updateDraft
-								}, field.key))
-							})] }, entry.group))]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-channels-cfg__footer",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "dsh-channels-cfg__btn dsh-channels-cfg__btn--primary",
-									onClick: () => {
-										onSave();
-									},
-									disabled: !dirty || busy !== null,
-									children: busy === "save" ? PANEL_COPY.saving : PANEL_COPY.saveAll
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "dsh-channels-cfg__btn",
-									onClick: () => {
-										onClear();
-									},
-									disabled: panel.config.overriddenKeys.length === 0 || busy !== null,
-									title: panel.config.overriddenKeys.length === 0 ? PANEL_COPY.noOverrides : void 0,
-									children: busy === "clear" ? PANEL_COPY.clearing : PANEL_COPY.clear
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dsh-channels-cfg__spacer" }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "dsh-channels-cfg__help",
-									children: dirty ? "有未保存的修改" : "只保存改动过的字段"
-								})
-							]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CleanupCard, {
-							panel,
-							cleanup: panel.cleanup,
-							busy,
-							result: cleanupResult,
-							error: cleanupError,
-							onRun: () => {
-								onRunCleanup();
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessCard, {
-							panel,
-							busy,
-							notice: accessNotice,
-							error: accessError,
-							onAddGroup: onAddAccessGroup,
-							onRemoveGroup: (chatId) => {
-								onRemoveAccessGroup(chatId);
-							},
-							onAddUser: onAddAccessUser,
-							onRemoveUser: (openId) => {
-								onRemoveAccessUser(openId);
-							},
-							onResolveRequest: (token, decision) => {
-								onResolveAccessRequest(token, decision);
-							}
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedCard, { panel })
-					] })
+								onAddUser: onAddAccessUser,
+								onRemoveUser: (openId) => {
+									onRemoveAccessUser(openId);
+								},
+								onResolveRequest: (token, decision) => {
+									onResolveAccessRequest(token, decision);
+								}
+							}) : null,
+							activeTab === "advanced" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdvancedTab, {
+								form,
+								onClear: () => {
+									onClear();
+								}
+							}) : null
+						]
+					})
+				]
+			});
+		}
+		/** Page header: title + phase badge + refresh, visible on every tab. */
+		function PanelHeader(props) {
+			const { status, pollError, busy, locked, onRefresh } = props;
+			const badge = phaseBadge(status.phase);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				className: "dsh-channels-cfg__panelHead",
+				title: PANEL_COPY.description,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsh-channels-cfg__headRow",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+								className: "dsh-channels-cfg__title",
+								children: PANEL_COPY.title
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: `dsh-channels-cfg__badge dsh-channels-cfg__badge--${badge.tone}`,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dsh-channels-cfg__dot" }), badge.text]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dsh-channels-cfg__spacer" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dsh-channels-cfg__btn",
+								onClick: onRefresh,
+								disabled: busy !== null || locked,
+								children: PANEL_COPY.refresh
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-channels-cfg__summary",
+						children: phaseSummary(status.phase)
+					}),
+					pollError === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "dsh-channels-cfg__fieldError",
+						role: "status",
+						"aria-live": "polite",
+						children: [
+							PANEL_COPY.pollFailed,
+							"：",
+							pollError
+						]
+					})
 				]
 			});
 		}
+		/** Top-level tab navigation; the dirty dot keeps unsaved work visible per tab. */
+		function TabNav(props) {
+			const { activeTab, dirtyTabs, onChange } = props;
+			const refs = (0, react.useRef)([]);
+			/** Roving-focus keyboard navigation between tabs (WAI-ARIA tabs pattern). */
+			const onKeyDown = (index, event) => {
+				const last = PANEL_TABS.length - 1;
+				let next;
+				switch (event.key) {
+					case "ArrowRight":
+						next = index === last ? 0 : index + 1;
+						break;
+					case "ArrowLeft":
+						next = index === 0 ? last : index - 1;
+						break;
+					case "Home":
+						next = 0;
+						break;
+					case "End":
+						next = last;
+						break;
+					default: return;
+				}
+				event.preventDefault();
+				onChange(PANEL_TABS[next].id);
+				refs.current[next]?.focus();
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+				className: "dsh-channels-cfg__tabs",
+				role: "tablist",
+				"aria-label": PANEL_COPY.title,
+				children: PANEL_TABS.map((tab, index) => {
+					const selected = tab.id === activeTab;
+					const dirty = dirtyTabs.has(tab.id);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						ref: (node) => {
+							refs.current[index] = node;
+						},
+						type: "button",
+						role: "tab",
+						id: `dsh-channels-tab-${tab.id}`,
+						"aria-selected": selected,
+						"aria-controls": selected ? `dsh-channels-tabpanel-${tab.id}` : void 0,
+						tabIndex: selected ? 0 : -1,
+						className: "dsh-channels-cfg__tab",
+						onClick: () => onChange(tab.id),
+						onKeyDown: (event) => onKeyDown(index, event),
+						children: [tab.label, dirty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "dsh-channels-cfg__tabDot",
+							title: PANEL_COPY.dirtyCount,
+							"aria-label": PANEL_COPY.dirtyCount
+						}) : null]
+					}, tab.id);
+				})
+			});
+		}
 		//#endregion
 		//#region src/client/styles.ts
 		/**
@@ -2097,14 +2912,23 @@ window.__ModuleLoader__.load({
 		const STYLE_ATTRIBUTE = "data-dsh-channels-css";
 		const CSS = `
 .dsh-channels-cfg{container-type:inline-size;display:flex;flex-direction:column;gap:12px;width:100%;max-width:720px;color:var(--dsw-alias-label-primary,#1f2328);font-size:13px;line-height:20px}
-.dsh-channels-cfg__head{display:flex;flex-direction:column;gap:4px}
+.dsh-channels-cfg__panelHead{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:4px;padding:10px 0 8px;background:var(--dsw-alias-bg-base,#fff);border-bottom:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12))}
+.dsh-channels-cfg__headRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .dsh-channels-cfg__title{margin:0;font-size:16px;font-weight:500;line-height:24px}
-.dsh-channels-cfg__desc{margin:0;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:18px}
+.dsh-channels-cfg__summary{margin:0;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:18px}
+.dsh-channels-cfg__tabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12))}
+.dsh-channels-cfg__tab{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 10px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dsw-alias-label-secondary,#5c6169);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
+.dsh-channels-cfg__tab:hover{color:var(--dsw-alias-label-primary,#1f2328)}
+.dsh-channels-cfg__tab:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary,#0a67d3);outline-offset:-2px}
+.dsh-channels-cfg__tab[aria-selected="true"]{color:var(--dsw-alias-state-business-primary,#0a67d3);border-bottom-color:currentColor;font-weight:500}
+.dsh-channels-cfg__tabDot{width:6px;height:6px;border-radius:50%;background:var(--dsw-alias-state-warning-primary,#a15c00);flex:none}
+.dsh-channels-cfg__tabBody{display:flex;flex-direction:column;gap:12px}
+.dsh-channels-cfg__tabHelp{margin:0;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:18px}
 .dsh-channels-cfg__card{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:12px}
 .dsh-channels-cfg__cardHead{display:flex;align-items:center;gap:8px;min-height:20px;flex-wrap:wrap}
 .dsh-channels-cfg__cardTitle{font-size:13px;font-weight:500}
 .dsh-channels-cfg__cardMeta{margin-left:auto;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px}
-.dsh-channels-cfg__statusRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.dsh-channels-cfg__group{display:flex;flex-direction:column;gap:8px}
 .dsh-channels-cfg__badge{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:999px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));font-size:12px;line-height:18px;white-space:nowrap}
 .dsh-channels-cfg__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
 .dsh-channels-cfg__badge--ok{color:var(--dsw-alias-state-business-primary,#0a7d33);border-color:currentColor}
@@ -2129,29 +2953,37 @@ window.__ModuleLoader__.load({
 .dsh-channels-cfg__labelRow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
 .dsh-channels-cfg__label{font-size:12px;color:var(--dsw-alias-label-secondary,#5c6169)}
 .dsh-channels-cfg__tag{display:inline-flex;align-items:center;padding:0 5px;border-radius:4px;border:1px dashed currentColor;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary,#8a8f98);white-space:nowrap}
-.dsh-channels-cfg__tag--override{color:var(--dsw-alias-state-business-primary,#0a67d3);border-style:solid}
 .dsh-channels-cfg__tag--restart{color:var(--dsw-alias-state-warning-primary,#a15c00)}
+.dsh-channels-cfg__tag--dirty{color:var(--dsw-alias-state-warning-primary,#a15c00);border-style:solid}
 .dsh-channels-cfg__help{color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:11px;line-height:16px}
 .dsh-channels-cfg__reasonBad{color:var(--dsw-alias-state-danger-primary,#c62828)}
 .dsh-channels-cfg__input{box-sizing:border-box;width:100%;min-height:28px;padding:3px 10px;border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:8px;background:var(--dsw-alias-bg-layer-1,transparent);color:inherit;font:inherit;font-size:13px;outline:none}
+.dsh-channels-cfg__inputRow{display:flex;align-items:center;gap:8px;min-width:0}
+.dsh-channels-cfg__inputRow .dsh-channels-cfg__input{flex:1 1 auto;width:auto;min-width:0}
+.dsh-channels-cfg__btn--browse{flex:none}
 .dsh-channels-cfg__input:focus{border-color:var(--dsw-alias-state-business-primary,#0a67d3)}
 .dsh-channels-cfg__input--invalid{border-color:var(--dsw-alias-state-danger-primary,#c62828)}
 select.dsh-channels-cfg__input{appearance:auto;cursor:pointer}
 .dsh-channels-cfg__check{display:inline-flex;align-items:center;gap:6px;min-height:28px;cursor:pointer;font-size:13px}
 .dsh-channels-cfg__checkbox{width:15px;height:15px;margin:0;accent-color:var(--dsw-alias-state-business-primary,#0a67d3);cursor:pointer}
 .dsh-channels-cfg__fieldError{color:var(--dsw-alias-state-danger-primary,#c62828);font-size:11px;line-height:16px}
-.dsh-channels-cfg__notice{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:18px}
+.dsh-channels-cfg__notice{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:18px;overflow-wrap:anywhere}
 .dsh-channels-cfg__notice--ok{color:var(--dsw-alias-state-business-primary,#0a7d33);background:color-mix(in srgb,currentColor 8%,transparent)}
 .dsh-channels-cfg__notice--error{color:var(--dsw-alias-state-danger-primary,#c62828);background:color-mix(in srgb,currentColor 8%,transparent)}
 .dsh-channels-cfg__banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:8px;border:1px dashed var(--dsw-alias-state-warning-primary,#a15c00);color:var(--dsw-alias-state-warning-primary,#a15c00);font-size:12px;line-height:18px}
 .dsh-channels-cfg__footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:2px}
 .dsh-channels-cfg__spacer{flex:1}
+.dsh-channels-cfg__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
+.dsh-channels-cfg__step{display:flex;align-items:flex-start;gap:10px}
+.dsh-channels-cfg__stepIndex{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border-radius:50%;border:1px solid currentColor;color:var(--dsw-alias-state-business-primary,#0a67d3);font-size:12px;line-height:18px;font-variant-numeric:tabular-nums}
+.dsh-channels-cfg__stepBody{display:flex;flex-direction:column;gap:2px;min-width:0}
+.dsh-channels-cfg__stepTitle{font-size:13px;font-weight:500}
+.dsh-channels-cfg__emptyState{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px dashed var(--dsw-alias-border-l2,rgba(0,0,0,.12));border-radius:8px;color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:18px}
 .dsh-channels-cfg__readOnly{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
 .dsh-channels-cfg__kv{display:flex;flex-direction:column;gap:2px;min-width:0}
 .dsh-channels-cfg__kvKey{color:var(--dsw-alias-label-tertiary,#8a8f98);font-size:12px;line-height:16px}
 .dsh-channels-cfg__kvValue{overflow-wrap:anywhere}
 .dsh-channels-cfg__mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
-.dsh-channels-cfg__creds{display:flex;flex-direction:column;gap:6px}
 .dsh-channels-cfg__cred{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .dsh-channels-cfg__cred .dsh-channels-cfg__input{flex:1 1 240px;min-width:0;width:auto}
 .dsh-channels-cfg__accessSection{display:flex;flex-direction:column;gap:6px}
@@ -2168,6 +3000,7 @@ select.dsh-channels-cfg__input{appearance:auto;cursor:pointer}
 @container (max-width:560px){
 .dsh-channels-cfg__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dsh-channels-cfg__grid,.dsh-channels-cfg__readOnly{grid-template-columns:minmax(0,1fr)}
+.dsh-channels-cfg__tabs{flex-wrap:nowrap;overflow-x:auto}
 }
 `;
 		/** Append the panel stylesheet once (idempotent across HMR / remounts). */