@prettier-ai/dsh-client-ui-settings-general 0.1.2-alpha.1 → 0.1.2-alpha.2

package/README.i18n.yaml

@@ -2,5 +2,5 @@
 # side as of the last confirmed-consistent state. Both languages carry equal authority;
 # after editing either side, bring the other along and re-record with:
 #   pnpm run verify-translation-pairing --write packages/client/ui-settings-general/README.md
-README.md: f0c4ab7c50798919d42ade0eac6a9a93c8a4df1c
-README.zh.md: 912ea0fb16c0d1d512ff846c8eda1e724664f1ea
+README.md: 1d231c2c1de2d8870c6f16e0d993b2387c876e4d
+README.zh.md: 13fe7b9f4a58f0f8836437485333127e76e2410e

package/README.md

@@ -9,7 +9,7 @@ English | [中文](README.zh.md)
 
 ## Summary
 
-`dsh-client-ui-settings-general` is the settings shell of the dsh web client: the Settings panel opens from the sidebar's bottom control with the trigger chrome and modal shell, the navigation is built from the sections features contribute, and first-run users are walked through one onboarding step at a time. It also registers everything on the Settings pages that belongs to no single feature: the trigger/header/close chrome content, the local configuration-file action, the General section and its `settings.general.item` slot, and the `settings` dictionaries. Feature-owned rows (Permission, Language, Appearance), sections (Models), and conditional onboarding steps stay with their feature packages; the shell itself ships no onboarding copy of its own.
+`dsh-client-ui-settings-general` is the settings shell of the dsh web client: the Settings panel opens from the sidebar's bottom control, a connection-failure indicator beside that control offers immediate recovery, the navigation is built from the sections features contribute, and first-run users are walked through one onboarding step at a time. It also registers everything on the Settings pages that belongs to no single feature: the trigger/header/close chrome content, the local configuration-file action, the General section and its `settings.general.item` slot, and the `settings` dictionaries. Feature-owned rows (Permission, Language, Appearance), sections (Models), and conditional onboarding steps stay with their feature packages; the shell itself ships no onboarding copy of its own.
 
 ## Table of Contents
 
@@ -25,7 +25,7 @@ English | [中文](README.zh.md)
 <a id="use-this-package"></a>
 ## Use this package
 
-Users reach the shell through the sidebar's bottom Settings control; feature plugins contribute their pages and onboarding steps through the slot ledgers this shell projects. The shell renders the modal panel, the navigation built from `settings.section` entries, and exactly one mounted onboarding step at a time.
+Users reach the shell through the sidebar's bottom Settings control; feature plugins contribute their pages and onboarding steps through the slot ledgers this shell projects. After a Host connection failure, a pale-yellow **Disconnected** action appears to the right of Settings. Automatic recovery shows **Connecting** with one to three dots advancing every 500ms. Hover or keyboard focus changes either yellow label to **Reconnect now** without changing its background; press feedback stays within the warning palette, and selecting it starts retry 1 immediately. Recovery changes the region to pale-green **Connected** for two seconds before it disappears. The icon, left-aligned text origin, height, and width remain fixed across every visible state. Initial startup and uninterrupted healthy operation remain silent. The shell renders the modal panel, the navigation built from `settings.section` entries, and exactly one mounted onboarding step at a time.
 
 ### The General section
 
@@ -53,6 +53,10 @@ The shell owns the chrome and the projections; every piece of content and copy b
 
 The navigation is a projection of the `settings.section` ledger; nav labels may be locale-following thunks, resolved through `resolveSlotLabel` and re-rendered on the section ledger bump or the locale revision (an optional `ctx.get('locale')` read; no hard locale dependency). The onboarding ledger projects in ascending order; the active registrant receives its id, `complete()`, and an `openSection(id)` callback, and completing or skipping transfers ownership to the next entry.
 
+### Connection recovery
+
+The shell is an explicit recovery consumer, so it injects Connection directly rather than adding lifecycle controls to `ctx.remote`. Its private hooks compartment binds `ctx.connection.state`, while the component receives only the selected state and an injected callback for `ctx.connection.reconnect()`. `ConnectionIndicator` owns the inline presentation and receives all visible and accessible copy from the `settings` locale namespace; the shell owns the two-second recovered-state timer.
+
 ### Document availability
 
 On a loopback page, the Client loads the provider's `hasDocument` capability through `settings/describe` and renders **Open configuration file** only when the Host confirms that a provider-owned local document can be prepared. The action calls the pathless, browser-authenticated `settings/openSettingsDocument` Remote; the Host resolves the provider path again, materializes an absent document, and hands it to a native text editor (`open -t` on macOS, bypassing a browser file association; the desktop file association on Linux and Windows; Windows association after `wslpath -w` translation on WSL). Open failures keep the action available and render a localized error. Reopening the dialog or reconnecting refreshes availability after a transient read failure or Host topology change. Non-loopback pages retain the Client policy that withholds this native action and its settings read.

package/README.zh.md

@@ -9,7 +9,7 @@ kind: "package-reference"
 
 ## 概述
 
-`dsh-client-ui-settings-general` 是 dsh Web 客户端的设置外壳：Settings 面板从侧边栏底部的控件打开，带触发控件与模态外壳；导航由各功能贡献的分区构建；首次运行的用户一次只走一个引导步骤。它还注册设置页面上所有不属于单一功能的内容：触发器、标题栏与关闭控件界面框架、「本地配置文件」操作、「通用」分区及其 `settings.general.item` slot，以及 `settings` 字典。归具体功能所有的行（「权限」、「语言」、「外观」）、分区（「模型」）与条件式首次使用引导步骤仍由各自的功能包提供；外壳本身不自带任何引导文案。
+`dsh-client-ui-settings-general` 是 dsh Web 客户端的设置外壳：Settings 面板从侧边栏底部的控件打开，该控件旁的连接故障指示器提供即时恢复操作；导航由各功能贡献的分区构建；首次运行的用户一次只走一个引导步骤。它还注册设置页面上所有不属于单一功能的内容：触发器、标题栏与关闭控件界面框架、「本地配置文件」操作、「通用」分区及其 `settings.general.item` slot，以及 `settings` 字典。归具体功能所有的行（「权限」、「语言」、「外观」）、分区（「模型」）与条件式首次使用引导步骤仍由各自的功能包提供；外壳本身不自带任何引导文案。
 
 ## 目录
 
@@ -25,7 +25,7 @@ kind: "package-reference"
 <a id="use-this-package"></a>
 ## 使用本包
 
-用户通过侧边栏底部的 Settings 控件进入外壳；功能插件通过本外壳所投影的 slot 账本贡献自己的页面与引导步骤。外壳渲染模态面板、由 `settings.section` 条目构建的导航，以及每次只挂载一个的引导步骤。
+用户通过侧边栏底部的 Settings 控件进入外壳；功能插件通过本外壳所投影的 slot 账本贡献自己的页面与引导步骤。Host 连接失败后，浅黄色的**连接异常**操作会出现在 Settings 右侧；自动恢复期间显示**连接中**，其后一至三个点每 500ms 前进一次。鼠标悬浮或键盘聚焦任一黄色状态时，只有文案变为**立即重连**，背景保持不变；按压反馈留在黄色色阶内，选中后立即从 retry 1 开始。恢复后该区域变为浅绿色的**连接成功**，驻留 2 秒再消失。所有可见状态的文字都左对齐，且图标、文字起点、高度和宽度保持固定。首次启动与未曾中断的健康连接保持静默。外壳渲染模态面板、由 `settings.section` 条目构建的导航，以及每次只挂载一个的引导步骤。
 
 ### 「通用」分区
 
@@ -53,6 +53,10 @@ kind: "package-reference"
 
 导航是 `settings.section` 账本的投影；导航 label 可以是跟随语言的 thunk，经 `resolveSlotLabel` 解析，并在分区账本更新或 locale revision 变化时重新渲染（`ctx.get('locale')` 可选读取，无硬 locale 依赖）。引导账本按升序投影；当前注册方会收到该条目的 id、`complete()` 与 `openSection(id)` 回调，完成或跳过当前步骤后，所有权转交给下一项。
 
+### 连接恢复
+
+外壳是明确的恢复功能消费方，因此直接注入 Connection，而不把生命周期控制放进 `ctx.remote`。它的私有 hooks compartment 绑定 `ctx.connection.state`，组件只接收选出的状态与调用 `ctx.connection.reconnect()` 的注入回调。`ConnectionIndicator` 拥有内联展示并从 `settings` locale namespace 接收全部可见与无障碍文案；2 秒恢复状态计时器归外壳所有。
+
 ### 文档可用性
 
 在 loopback 页面上，Client 通过 `settings/describe` 加载提供方的 `hasDocument` 能力，且只有在 Host 确认可准备好一份由提供方持有的本地文档时才渲染配置文件操作。该操作调用无路径参数且经浏览器认证的 `settings/openSettingsDocument` Remote；Host 会再次解析提供方路径、在文档缺失时将其创建出来，并交给原生文本编辑器（macOS 上使用 `open -t`，绕过浏览器文件关联；Linux 和 Windows 上使用桌面文件关联；WSL 上经 `wslpath -w` 转换后使用 Windows 文件关联）。打开失败时该操作仍可使用，并渲染本地化错误。临时读取失败或 Host 拓扑变化后，重新打开对话框或重新连接会刷新可用性。非 loopback 页面保留 Client 策略，不提供该原生操作及其 settings 读取。

package/lib/client.js

@@ -25,7 +25,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/dsh-publisher/dsh-publisher/upstream/packages/client/ui-settings-general/src/client/SettingsRoot.module.css.mjs
-		const css$3 = ".eUC7PW_trigger{box-sizing:border-box;cursor:pointer;width:calc(100% + 4px);height:42px;color:var(--dsw-alias-label-primary);background:0 0;border:none;border-radius:12px;flex:none;align-items:center;gap:8px;margin:4px -2px;padding:0 10px 0 8px;font-family:inherit;font-size:14px;line-height:22px;display:flex;overflow:hidden}.eUC7PW_trigger:hover{background:var(--dsw-alias-interactive-bg-hover)}.eUC7PW_trigger.eUC7PW_rail{border-radius:50%;justify-content:center;gap:0;width:36px;height:36px;margin:8px 0 10px;padding:0}.eUC7PW_triggerLabel{white-space:nowrap;overflow:hidden}.eUC7PW_overlay{z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.eUC7PW_mask{background:var(--dsw-alias-bg-mask-1);backdrop-filter:var(--dsw-mask-blur);position:absolute;inset:0}.eUC7PW_panel{z-index:1;background:var(--dsw-alias-bg-layer-2);width:800px;max-width:calc(100vw - 48px);height:min(800px,100vh - 48px);box-shadow:var(--dsw-shadow-lv3);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);border-radius:24px;display:flex;position:relative;overflow:hidden}.eUC7PW_nav{box-sizing:border-box;flex-direction:column;flex:none;gap:18px;width:188px;padding:22px 12px 0;display:flex}.eUC7PW_navTitle{color:var(--dsw-alias-label-primary);padding:0 12px;font-size:16px;font-weight:500;line-height:24px}.eUC7PW_navList{flex-direction:column;gap:4px;display:flex}.eUC7PW_navCell{box-sizing:border-box;cursor:pointer;height:40px;color:var(--dsw-alias-label-primary);text-align:left;background:0 0;border:none;border-radius:12px;align-items:center;gap:8px;padding:9px 16px 9px 12px;font-family:inherit;font-size:14px;font-weight:400;line-height:22px;display:flex}.eUC7PW_navCell:hover{background:var(--dsw-specific-sidebar-nav-item-hover)}.eUC7PW_navCell.eUC7PW_active{background:var(--dsw-specific-sidebar-nav-item-active)}.eUC7PW_navIcon{flex:none}.eUC7PW_navLabel{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.eUC7PW_content{flex-direction:column;flex:1;min-width:0;display:flex}.eUC7PW_header{box-sizing:border-box;flex:none;justify-content:space-between;align-items:flex-start;gap:8px;height:54px;padding:20px 14px 8px 10px;display:flex}.eUC7PW_actions{justify-content:flex-end;align-items:center;gap:8px;min-width:0;margin-left:auto;display:flex}.eUC7PW_close{cursor:pointer;width:28px;height:28px;color:var(--dsw-alias-label-primary);background:0 0;border:none;border-radius:28px;justify-content:center;align-items:center;padding:0;display:inline-flex}.eUC7PW_close:hover{background:var(--dsw-alias-interactive-bg-hover)}.eUC7PW_options{flex:1;min-height:0;padding:0 24px 24px;overflow-y:auto}.eUC7PW_hiddenLabel{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}";
+		const css$3 = ".eUC7PW_triggerRow{flex:none;align-items:center;gap:8px;width:calc(100% + 4px);margin:4px -2px;display:flex}.eUC7PW_triggerRow.eUC7PW_railRow{width:36px;margin:8px 0 10px}.eUC7PW_trigger{box-sizing:border-box;cursor:pointer;width:auto;min-width:0;height:42px;color:var(--dsw-alias-label-primary);background:0 0;border:none;border-radius:12px;flex:1;align-items:center;gap:8px;margin:0;padding:0 10px 0 8px;font-family:inherit;font-size:14px;line-height:22px;display:flex;overflow:hidden}.eUC7PW_trigger:hover{background:var(--dsw-alias-interactive-bg-hover)}.eUC7PW_trigger.eUC7PW_rail{border-radius:50%;flex:none;justify-content:center;gap:0;width:36px;height:36px;margin:0;padding:0}.eUC7PW_triggerLabel{white-space:nowrap;overflow:hidden}.eUC7PW_overlay{z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.eUC7PW_mask{background:var(--dsw-alias-bg-mask-1);backdrop-filter:var(--dsw-mask-blur);position:absolute;inset:0}.eUC7PW_panel{z-index:1;background:var(--dsw-alias-bg-layer-2);width:800px;max-width:calc(100vw - 48px);height:min(800px,100vh - 48px);box-shadow:var(--dsw-shadow-lv3);--dsh-scrollbar-thumb:var(--dsw-alias-scrollbar-bg-l2);--dsh-scrollbar-thumb-hover:var(--dsw-alias-scrollbar-hover-l2);border-radius:24px;display:flex;position:relative;overflow:hidden}.eUC7PW_nav{box-sizing:border-box;flex-direction:column;flex:none;gap:18px;width:188px;padding:22px 12px 0;display:flex}.eUC7PW_navTitle{color:var(--dsw-alias-label-primary);padding:0 12px;font-size:16px;font-weight:500;line-height:24px}.eUC7PW_navList{flex-direction:column;gap:4px;display:flex}.eUC7PW_navCell{box-sizing:border-box;cursor:pointer;height:40px;color:var(--dsw-alias-label-primary);text-align:left;background:0 0;border:none;border-radius:12px;align-items:center;gap:8px;padding:9px 16px 9px 12px;font-family:inherit;font-size:14px;font-weight:400;line-height:22px;display:flex}.eUC7PW_navCell:hover{background:var(--dsw-specific-sidebar-nav-item-hover)}.eUC7PW_navCell.eUC7PW_active{background:var(--dsw-specific-sidebar-nav-item-active)}.eUC7PW_navIcon{flex:none}.eUC7PW_navLabel{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.eUC7PW_content{flex-direction:column;flex:1;min-width:0;display:flex}.eUC7PW_header{box-sizing:border-box;flex:none;justify-content:space-between;align-items:flex-start;gap:8px;height:54px;padding:20px 14px 8px 10px;display:flex}.eUC7PW_actions{justify-content:flex-end;align-items:center;gap:8px;min-width:0;margin-left:auto;display:flex}.eUC7PW_close{cursor:pointer;width:28px;height:28px;color:var(--dsw-alias-label-primary);background:0 0;border:none;border-radius:28px;justify-content:center;align-items:center;padding:0;display:inline-flex}.eUC7PW_close:hover{background:var(--dsw-alias-interactive-bg-hover)}.eUC7PW_options{flex:1;min-height:0;padding:0 24px 24px;overflow-y:auto}.eUC7PW_hiddenLabel{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}";
 		const tagId$3 = "@prettier-ai/dsh-client-ui-settings-general/SettingsRoot.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$3) + "]") === null) {
 			const tag = document.createElement("style");
@@ -52,8 +52,10 @@ window.__ModuleLoader__.load({
 			"overlay": "eUC7PW_overlay",
 			"panel": "eUC7PW_panel",
 			"rail": "eUC7PW_rail",
+			"railRow": "eUC7PW_railRow",
 			"trigger": "eUC7PW_trigger",
-			"triggerLabel": "eUC7PW_triggerLabel"
+			"triggerLabel": "eUC7PW_triggerLabel",
+			"triggerRow": "eUC7PW_triggerRow"
 		};
 		//#endregion
 		//#region lib/types/client/SettingsRoot.js
@@ -69,6 +71,7 @@ window.__ModuleLoader__.load({
 		* sessions-derived empty-Hero fact is active. Visible dialog chrome belongs
 		* to the step, so a mounted-but-deciding step paints nothing here.
 		*/
+		const RECOVERY_CONFIRMATION_MS = 2e3;
 		/** Nav glyph by section id; unknown ids fall back to the settings gear. */
 		function navIcon(id) {
 			if (id === "models") return (0, react_jsx_runtime.jsx)(_prettier_ai_dsh_client_ui_primitives.IconDataOutline16, {
@@ -173,19 +176,28 @@ window.__ModuleLoader__.load({
 		* @returns the settings shell element tree.
 		*/
 		function SettingsRoot(props) {
-			const { wide, useSections, useOnboardingSteps, useSessions, renderSlot } = props;
+			const { wide, reconnect, useConnectionState, useSections, useOnboardingSteps, useSessions, renderSlot, t } = props;
 			const [open, setOpen] = (0, react.useState)(false);
 			const [activeId, setActiveId] = (0, react.useState)(void 0);
 			const [completedOnboarding, setCompletedOnboarding] = (0, react.useState)(() => /* @__PURE__ */ new Set());
+			const [showRecovery, setShowRecovery] = (0, react.useState)(false);
+			const triggerButton = (0, react.useRef)(null);
+			const wasOpen = (0, react.useRef)(open);
 			const close = (0, react.useCallback)(() => {
 				setOpen(false);
 				setActiveId(void 0);
 			}, []);
+			(0, react.useEffect)(() => {
+				if (wasOpen.current && !open) triggerButton.current?.focus();
+				wasOpen.current = open;
+			}, [open]);
 			const openSection = (0, react.useCallback)((id) => {
 				setActiveId(id);
 				setOpen(true);
 			}, []);
 			const rows = useSections((s) => s);
+			const connectionState = useConnectionState((state) => state);
+			const previousConnectionState = (0, react.useRef)(connectionState);
 			const onboardingSteps = useOnboardingSteps((s) => s);
 			const onboardingActive = useSessions((state) => state.phase === "ready" && (state.current === void 0 || state.byId[state.current]?.blank === true));
 			const onboardingStep = onboardingActive ? onboardingSteps.find((step) => !completedOnboarding.has(step.id)) : void 0;
@@ -193,22 +205,55 @@ window.__ModuleLoader__.load({
 				if (onboardingActive) return;
 				setCompletedOnboarding(/* @__PURE__ */ new Set());
 			}, [onboardingActive]);
+			(0, react.useLayoutEffect)(() => {
+				const previous = previousConnectionState.current;
+				previousConnectionState.current = connectionState;
+				if (connectionState !== "connected") {
+					setShowRecovery(false);
+					return;
+				}
+				if (previous !== "disconnected" && previous !== "connecting") return;
+				setShowRecovery(true);
+				const timeout = window.setTimeout(() => {
+					setShowRecovery(false);
+				}, RECOVERY_CONFIRMATION_MS);
+				return () => {
+					window.clearTimeout(timeout);
+				};
+			}, [connectionState]);
 			const completeOnboardingStep = (0, react.useCallback)((id) => {
 				setCompletedOnboarding((previous) => {
 					if (previous.has(id)) return previous;
 					return new Set([...previous, id]);
 				});
 			}, []);
+			let connectionIndicator;
+			if (connectionState === "disconnected") connectionIndicator = "disconnected";
+			else if (connectionState === "connecting") connectionIndicator = "connecting";
+			else if (showRecovery) connectionIndicator = "recovered";
 			return (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-				(0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: clsx(SettingsRoot_module_css_default.trigger, !wide && SettingsRoot_module_css_default.rail),
-					"aria-haspopup": "dialog",
-					"aria-expanded": open,
-					onClick: () => {
-						setOpen(true);
-					},
-					children: renderSlot("settings.trigger", { wide })
+				(0, react_jsx_runtime.jsxs)("div", {
+					className: clsx(SettingsRoot_module_css_default.triggerRow, !wide && SettingsRoot_module_css_default.railRow),
+					children: [(0, react_jsx_runtime.jsx)("button", {
+						ref: triggerButton,
+						type: "button",
+						className: clsx(SettingsRoot_module_css_default.trigger, !wide && SettingsRoot_module_css_default.rail),
+						"aria-haspopup": "dialog",
+						"aria-expanded": open,
+						onClick: () => {
+							setOpen(true);
+						},
+						children: renderSlot("settings.trigger", { wide })
+					}), (0, react_jsx_runtime.jsx)(_prettier_ai_dsh_client_ui_primitives.ConnectionIndicator, {
+						state: wide ? connectionIndicator : void 0,
+						disconnectedLabel: t("connection.error"),
+						reconnectLabel: t("connection.retry"),
+						connectingLabel: t("connection.connecting"),
+						recoveredLabel: t("connection.connected"),
+						reconnectActionLabel: t("connection.reconnect"),
+						restartActionLabel: t("connection.restart"),
+						onReconnect: reconnect
+					})]
 				}),
 				open && (0, react_jsx_runtime.jsx)(SettingsPanel, {
 					rows,
@@ -347,12 +392,9 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region lib/types/client/settings-document-store.js
 		/** State owner for the optional local settings-document action. */
-		function messageOf(error) {
-			return error instanceof Error ? error.message : String(error);
-		}
 		/** Derives local-document availability from the shared mirror and invokes the pathless Host-owned open operation. */
 		var SettingsDocumentStore = class {
-			remote;
+			ctx;
 			describeFace;
 			/** uSES-safe state source shared by the registered header action. */
 			store = (0, _prettier_ai_dsh_client_store.createSnapshotStore)({
@@ -362,11 +404,12 @@ window.__ModuleLoader__.load({
 			});
 			following;
 			/**
-			* @param api - loopback settings wire face that opens the provider document.
+			* @param ctx - the plugin's context, whose loopback `remote.settings`
+			* namespace opens the provider document.
 			* @param describeFace - the shared mirror's describe face (`hasDocument` source).
 			*/
-			constructor(remote, describeFace) {
-				this.remote = remote;
+			constructor(ctx, describeFace) {
+				this.ctx = ctx;
 				this.describeFace = describeFace;
 			}
 			/**
@@ -397,12 +440,13 @@ window.__ModuleLoader__.load({
 					state.error = null;
 				});
 				try {
-					const result = await this.remote.settings.openSettingsDocument();
-					if (!result.ok) throw new Error(result.error.message);
-				} catch (error) {
-					this.store.update((state) => {
-						state.error = messageOf(error);
-					});
+					const result = await this.ctx.remote.settings.openSettingsDocument();
+					if (!result.ok) {
+						const { message } = result.error;
+						this.store.update((state) => {
+							state.error = message;
+						});
+					}
 				} finally {
 					this.store.update((state) => {
 						state.opening = false;
@@ -440,7 +484,13 @@ window.__ModuleLoader__.load({
 			"close": "关闭",
 			"openDocument": "打开配置文件",
 			"openDocument.error": "无法打开配置文件",
-			"general.nav": "通用设置"
+			"general.nav": "通用设置",
+			"connection.error": "连接异常",
+			"connection.retry": "立即重连",
+			"connection.connecting": "连接中",
+			"connection.connected": "连接成功",
+			"connection.reconnect": "连接异常，点击立即重连",
+			"connection.restart": "连接中，点击立即重连"
 		};
 		/** English dictionary, checked complete against the zh key set. */
 		const en = {
@@ -449,7 +499,13 @@ window.__ModuleLoader__.load({
 			"close": "Close",
 			"openDocument": "Open configuration file",
 			"openDocument.error": "Could not open configuration file",
-			"general.nav": "General"
+			"general.nav": "General",
+			"connection.error": "Disconnected",
+			"connection.retry": "Reconnect now",
+			"connection.connecting": "Connecting",
+			"connection.connected": "Connected",
+			"connection.reconnect": "Disconnected, reconnect now",
+			"connection.restart": "Connecting, restart now"
 		};
 		//#endregion
 		//#region lib/types/client/index.js
@@ -478,8 +534,9 @@ window.__ModuleLoader__.load({
 				zh,
 				en
 			}), "ui-settings-general: dictionaries");
+			const connection = ctx.get("connection");
 			const t = ctx.locale.bind(NS);
-			const documentController = ctx.get("connection").isLoopback ? new SettingsDocumentStore(ctx.remote, ctx.settingsScope.describe()) : void 0;
+			const documentController = ctx.remote.$host.isLoopback ? new SettingsDocumentStore(ctx, ctx.settingsScope.describe()) : void 0;
 			const documentInjected = documentController === void 0 ? void 0 : () => ({
 				controller: documentController,
 				hooks: { snapshot: documentController.store }
@@ -492,50 +549,57 @@ window.__ModuleLoader__.load({
 			let rows = [];
 			let onboardingVersion = -1;
 			let onboardingSteps = [];
-			const shellInjected = () => ({ hooks: {
-				sections: {
-					getSnapshot: () => {
-						const version = ctx.slots.getVersion("settings.section");
-						const revision = ctx.locale.getSnapshot().revision;
-						if (version !== rowsVersion || revision !== rowsRevision) {
-							rowsVersion = version;
-							rowsRevision = revision;
-							rows = ctx.slots.entries("settings.section").map((e) => ({
-								/* v8 ignore next -- list-slot registration requires id (SlotCore rejects an entry without one) */
-								id: e.options.id ?? "",
-								order: e.options.order ?? 0,
-								label: (0, _prettier_ai_dsh_client_ui_slots.resolveSlotLabel)(e.options.label) ?? ""
-							})).sort((a, b) => a.order - b.order);
-						}
-						return rows;
-					},
-					subscribe: (listener) => {
-						const offLedger = ctx.slots.subscribe("settings.section", listener);
-						const offLocale = ctx.locale.subscribe(listener);
-						return () => {
-							offLedger();
-							offLocale();
-						};
-					}
+			const shellInjected = () => ({
+				reconnect: () => {
+					connection.reconnect();
 				},
-				onboardingSteps: {
-					getSnapshot: () => {
-						const version = ctx.slots.getVersion("settings.onboarding");
-						if (version !== onboardingVersion) {
-							onboardingVersion = version;
-							onboardingSteps = ctx.slots.entries("settings.onboarding").map((e) => ({
-								/* v8 ignore next -- list-slot registration requires id */
-								id: e.options.id ?? "",
-								order: e.options.order ?? 0
-							})).sort((a, b) => a.order - b.order);
+				hooks: {
+					connectionState: connection.state,
+					sections: {
+						getSnapshot: () => {
+							const version = ctx.slots.getVersion("settings.section");
+							const revision = ctx.locale.getSnapshot().revision;
+							if (version !== rowsVersion || revision !== rowsRevision) {
+								rowsVersion = version;
+								rowsRevision = revision;
+								rows = ctx.slots.entries("settings.section").map((e) => ({
+									/* v8 ignore next -- list-slot registration requires id (SlotCore rejects an entry without one) */
+									id: e.options.id ?? "",
+									order: e.options.order ?? 0,
+									label: (0, _prettier_ai_dsh_client_ui_slots.resolveSlotLabel)(e.options.label) ?? ""
+								})).sort((a, b) => a.order - b.order);
+							}
+							return rows;
+						},
+						subscribe: (listener) => {
+							const offLedger = ctx.slots.subscribe("settings.section", listener);
+							const offLocale = ctx.locale.subscribe(listener);
+							return () => {
+								offLedger();
+								offLocale();
+							};
 						}
-						return onboardingSteps;
 					},
-					subscribe: (listener) => ctx.slots.subscribe("settings.onboarding", listener)
+					onboardingSteps: {
+						getSnapshot: () => {
+							const version = ctx.slots.getVersion("settings.onboarding");
+							if (version !== onboardingVersion) {
+								onboardingVersion = version;
+								onboardingSteps = ctx.slots.entries("settings.onboarding").map((e) => ({
+									/* v8 ignore next -- list-slot registration requires id */
+									id: e.options.id ?? "",
+									order: e.options.order ?? 0
+								})).sort((a, b) => a.order - b.order);
+							}
+							return onboardingSteps;
+						},
+						subscribe: (listener) => ctx.slots.subscribe("settings.onboarding", listener)
+					}
 				}
-			} });
+			});
 			ctx.slots.inject("sidebar.settings", () => ctx.slots.register({
 				name: "sidebar.settings",
+				locale: NS,
 				children: {
 					"settings.trigger": {
 						kind: "single",

package/lib/index.js

@@ -1,5 +1,4 @@
 import z from "@prettier-ai/schemastery";
-import { settingsNamespace } from "@prettier-ai/dsh-settings";
 //#region lib/types/index.js
 /** Host loader entry for the browser implementation exported from `./client`. */
 /** Durable settings namespace for product-wide GUI onboarding facts. */
@@ -8,7 +7,7 @@ const OnboardingSettingsSchema = z.object({ welcomeNoticeVersion: z.string() });
 /** Register the durable GUI-onboarding section when a settings provider exists. */
 function apply(ctx) {
 	ctx.inject(["settings"], (settingsCtx) => {
-		settingsCtx.settings.register(settingsNamespace(ONBOARDING_SETTINGS_NAMESPACE), OnboardingSettingsSchema);
+		settingsCtx.settings.register(ONBOARDING_SETTINGS_NAMESPACE, OnboardingSettingsSchema);
 	});
 }
 //#endregion

package/lib/types/client/locales.d.ts

@@ -7,6 +7,12 @@ export declare const zh: {
     openDocument: string;
     'openDocument.error': string;
     'general.nav': string;
+    'connection.error': string;
+    'connection.retry': string;
+    'connection.connecting': string;
+    'connection.connected': string;
+    'connection.reconnect': string;
+    'connection.restart': string;
 };
 /** The settings namespace key union. */
 export type SettingsKey = keyof typeof zh;
@@ -18,5 +24,11 @@ export declare const en: {
     openDocument: string;
     'openDocument.error': string;
     'general.nav': string;
+    'connection.error': string;
+    'connection.retry': string;
+    'connection.connecting': string;
+    'connection.connected': string;
+    'connection.reconnect': string;
+    'connection.restart': string;
 };
 //# sourceMappingURL=locales.d.ts.map

package/lib/types/client/settings-document-store.d.ts

@@ -1,5 +1,5 @@
 /** State owner for the optional local settings-document action. */
-import type { ClientRemote } from '@prettier-ai/dsh-api-remotes/client';
+import type { Context as ClientContext } from '@prettier-ai/cordis';
 import { type SnapshotStore } from '@prettier-ai/dsh-client-store';
 import type { SettingsDescribeFace } from '@prettier-ai/dsh-client-ui-settings/client';
 /** Browser state of the Host-owned settings document. */
@@ -13,16 +13,17 @@ export interface SettingsDocumentState {
 }
 /** Derives local-document availability from the shared mirror and invokes the pathless Host-owned open operation. */
 export declare class SettingsDocumentStore {
-    private readonly remote;
+    private readonly ctx;
     private readonly describeFace;
     /** uSES-safe state source shared by the registered header action. */
     readonly store: SnapshotStore<SettingsDocumentState>;
     private following;
     /**
-     * @param api - loopback settings wire face that opens the provider document.
+     * @param ctx - the plugin's context, whose loopback `remote.settings`
+     * namespace opens the provider document.
      * @param describeFace - the shared mirror's describe face (`hasDocument` source).
      */
-    constructor(remote: Pick<ClientRemote, 'settings'>, describeFace: SettingsDescribeFace);
+    constructor(ctx: ClientContext, describeFace: SettingsDescribeFace);
     /**
      * Begin following the mirror (idempotent) and reflect whether the current
      * provider owns a local document.

package/lib/types/client/shell-contract.d.ts

@@ -6,7 +6,8 @@
  * reference graph closes a cycle through ui-sidebar → ui-layout → ui-theme.
  * The settings SLOT types (what registrants contribute) stay in ui-settings.
  */
-import type { HostObservable, InjectFace, PropsRenderSlots, PropsRuntime } from '@prettier-ai/dsh-client-ui-slots';
+import type { ConnectionState } from '@prettier-ai/dsh-client-connection/client';
+import type { HostObservable, InjectFace, PropsLocale, PropsRenderSlots, PropsRuntime } from '@prettier-ai/dsh-client-ui-slots';
 /** One nav row projected from a settings.section registration's options. */
 export interface SettingsSectionRow {
     id: string;
@@ -20,11 +21,15 @@ export interface SettingsOnboardingStep {
 }
 /**
  * Registrant-private injected share of the settings shell (assembled in
- * apply): the ledger's nav-row projection as a hooks-compartment source —
- * the shell reads no locale state and subscribes through the bound hook.
+ * apply): connection state and ledger projections arrive as hook-compartment
+ * sources, while the reconnect command remains a plain callback.
  */
 export type SettingsRootInjected = {
+    /** Request a fresh logical generation and physical WebSocket immediately. */
+    reconnect: () => void;
     hooks: {
+        /** Connection-owned state for the current Host connection. */
+        connectionState: HostObservable<ConnectionState | undefined>;
         /** settings.section ledger projected into ordered nav rows. */
         sections: HostObservable<readonly SettingsSectionRow[]>;
         /** settings.onboarding ledger projected into coordinator order. */
@@ -37,5 +42,5 @@ export type SettingsRootInjected = {
  * (hooks compartment bound to useSections). No store is registered — modal
  * open state and active section id are component-local viewing state.
  */
-export type SettingsRootComponentProps = PropsRuntime<'sidebar.settings'> & PropsRenderSlots<'settings.trigger' | 'settings.header' | 'settings.action' | 'settings.close' | 'settings.section' | 'settings.onboarding'> & InjectFace<SettingsRootInjected>;
+export type SettingsRootComponentProps = PropsRuntime<'sidebar.settings'> & PropsRenderSlots<'settings.trigger' | 'settings.header' | 'settings.action' | 'settings.close' | 'settings.section' | 'settings.onboarding'> & InjectFace<SettingsRootInjected> & PropsLocale<'settings'>;
 //# sourceMappingURL=shell-contract.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prettier-ai/dsh-client-ui-settings-general",
   "description": "Settings ownerless-copy and product onboarding plugin: the General section, shell trigger/header chrome content, settings dictionaries, and the versioned welcome notice",
-  "version": "0.1.2-alpha.1",
+  "version": "0.1.2-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -44,37 +44,28 @@
   "license": "MIT",
   "dependencies": {
     "clsx": "^2.0.0",
-    "@prettier-ai/schemastery": "^3.18.1"
+    "@prettier-ai/schemastery": "^3.18.2"
   },
   "peerDependencies": {
-    "@prettier-ai/dsh-api-remotes": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-ui-settings": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-invariants": "^0.1.2-alpha.1",
-    "@prettier-ai/cordis": "^4.0.1",
-    "@prettier-ai/dsh-client-connection": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-ui-sidebar": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-locale": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-ui-renderer": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-ui-session": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-settings": "^0.1.2-alpha.1"
+    "@prettier-ai/cordis": "^4.0.2"
   },
   "devDependencies": {
     "@types/react": "~18.3.1",
     "react": "^18.2.0",
-    "@prettier-ai/dsh-api-remotes": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-locale": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-connection": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-store": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-test-runtime": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-ui-settings": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-ui-primitives": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-ui-slots": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-invariants": "^0.1.2-alpha.1",
-    "@prettier-ai/cordis": "^4.0.1",
-    "@prettier-ai/dsh-client-ui-renderer": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-ui-session": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-client-ui-sidebar": "^0.1.2-alpha.1",
-    "@prettier-ai/dsh-settings": "^0.1.2-alpha.1"
+    "@prettier-ai/dsh-api-remotes": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-client-connection": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-client-locale": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-client-store": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-client-test-runtime": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-client-ui-primitives": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-client-ui-settings": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-client-ui-sidebar": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-invariants": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-client-ui-renderer": "^0.1.2-alpha.2",
+    "@prettier-ai/cordis": "^4.0.2",
+    "@prettier-ai/dsh-client-ui-session": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-settings": "^0.1.2-alpha.2",
+    "@prettier-ai/dsh-client-ui-slots": "^0.1.2-alpha.2"
   },
   "files": [
     "lib/index.js",