dsh-mobile 0.6.2 → 0.6.3

package/lib/client.js

@@ -6,6 +6,59 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react = require("react");
 		//#region src/client-messages.ts
+		const storageMessages = {
+			en: {
+				funnelStateInvalid: "The private Tailscale state folder cannot be accessed safely. Check its permissions or directory links; reinstalling the component is not required.",
+				componentPathUnsafe: "The component folder contains an unsafe link or cannot be accessed. Check the directory and permissions, then retry."
+			},
+			zh: {
+				funnelStateInvalid: "Tailscale 私有登录目录无法安全访问。请检查目录权限或链接，不必重新安装组件。",
+				componentPathUnsafe: "组件目录包含不安全的链接或无法访问。请检查目录和权限后重试。"
+			},
+			it: {
+				funnelStateInvalid: "La cartella privata Tailscale non è accessibile in sicurezza. Controlla permessi o collegamenti; non occorre reinstallare il componente.",
+				componentPathUnsafe: "La cartella del componente contiene un collegamento non sicuro o non è accessibile. Controlla directory e permessi, poi riprova."
+			}
+		};
+		/** Desktop-only stopped-worker recovery, independent of remote provider state. */
+		const EXTENSION_RECOVERY_MESSAGES = {
+			en: {
+				extensionRecoveryTitle: "An extension needs a restart",
+				extensionRecoveryHelp: "Only the stopped extension restarts. Unfinished actions are not retried.",
+				extensionRecoveryRestart: "Restart",
+				extensionRecoveryRestarting: "Restarting…",
+				extensionRecoveryRestartAria: "Restart extension {name}",
+				extensionRecoveryConfirm: "Restart extension “{name}”? Unfinished actions will not be retried. Previously completed changes will not be undone.",
+				extensionRecoveryRefresh: "Check again",
+				extensionRecoveryLoadFailed: "Could not check the extension status. Check again before restarting.",
+				extensionRecoveryFailed: "The extension did not restart. Check its configuration, then retry.",
+				extensionRecoveryChanged: "The extension files changed. Review the changes and reload the extension before trying again."
+			},
+			it: {
+				extensionRecoveryTitle: "Un’estensione richiede un riavvio",
+				extensionRecoveryHelp: "Si riavvia solo l’estensione arrestata. Le azioni incompiute non vengono ripetute.",
+				extensionRecoveryRestart: "Riavvia",
+				extensionRecoveryRestarting: "Riavvio…",
+				extensionRecoveryRestartAria: "Riavvia l’estensione {name}",
+				extensionRecoveryConfirm: "Riavviare l’estensione “{name}”? Le azioni incompiute non verranno ripetute. Le modifiche già completate non saranno annullate.",
+				extensionRecoveryRefresh: "Controlla di nuovo",
+				extensionRecoveryLoadFailed: "Impossibile verificare lo stato. Controlla di nuovo prima di riavviare.",
+				extensionRecoveryFailed: "L’estensione non si è riavviata. Controlla la configurazione e riprova.",
+				extensionRecoveryChanged: "I file dell’estensione sono cambiati. Verifica le modifiche e ricarica l’estensione prima di riprovare."
+			},
+			zh: {
+				extensionRecoveryTitle: "扩展需要重启",
+				extensionRecoveryHelp: "仅重启已停止的扩展，不会重新执行未完成的操作。",
+				extensionRecoveryRestart: "重启扩展",
+				extensionRecoveryRestarting: "正在重启…",
+				extensionRecoveryRestartAria: "重启扩展 {name}",
+				extensionRecoveryConfirm: "要重启扩展“{name}”吗？未完成的操作不会重新执行，已经完成的修改也不会撤销。",
+				extensionRecoveryRefresh: "重新检测",
+				extensionRecoveryLoadFailed: "暂时无法检查扩展状态，请重新检测后再操作。",
+				extensionRecoveryFailed: "扩展没有重启成功，请检查配置后重试。",
+				extensionRecoveryChanged: "扩展文件已经变化，请核对修改并重新加载扩展后再操作。"
+			}
+		};
 		const MOBILE_CONTROL_MESSAGES = {
 			en: {
 				mobileAccess: "Mobile access",
@@ -345,6 +398,16 @@ window.__ModuleLoader__.load({
 			},
 			zh: {}
 		};
+		for (const locale of [
+			"en",
+			"it",
+			"zh"
+		]) Object.assign(MOBILE_CONTROL_MESSAGES[locale], EXTENSION_RECOVERY_MESSAGES[locale]);
+		for (const locale of [
+			"en",
+			"it",
+			"zh"
+		]) Object.assign(MOBILE_CONTROL_MESSAGES[locale], storageMessages[locale]);
 		Object.assign(MOBILE_CONTROL_MESSAGES.zh, {
 			mobileAccess: "移动访问",
 			collapseMobileAccess: "收起移动访问",
@@ -1136,7 +1199,9 @@ window.__ModuleLoader__.load({
 		Object.assign(MOBILE_CONTROL_MESSAGES.en, {
 			selfHostedDescription: "Use your own VPS or HTTPS reverse proxy without a public tunnel service.",
 			originName: "Own reverse proxy",
-			originDescription: "You manage HTTPS. DSH Mobile provides a private, authenticated HTTP backend; no tunnel component is installed.",
+			caddyName: "Managed Caddy",
+			caddyModePreviewNote: "HTTPS form preview differs from the current connection.",
+			originDescription: "Use managed Caddy or your existing HTTPS reverse proxy with DSH Mobile’s private, authenticated backend.",
 			prepareOrigin: "Connect your HTTPS reverse proxy",
 			originPublicOrigin: "Public HTTPS address",
 			originListenHost: "Private listen IPv4",
@@ -1193,7 +1258,9 @@ window.__ModuleLoader__.load({
 		Object.assign(MOBILE_CONTROL_MESSAGES.it, {
 			selfHostedDescription: "Usa il tuo VPS o reverse proxy HTTPS senza un servizio di tunnel pubblico.",
 			originName: "Reverse proxy proprio",
-			originDescription: "Gestisci tu HTTPS. DSH Mobile offre un backend HTTP privato con autenticazione; non installa componenti tunnel.",
+			caddyName: "Caddy gestito",
+			caddyModePreviewNote: "L’anteprima del modulo HTTPS differisce dalla connessione attuale.",
+			originDescription: "Usa Caddy gestito o il tuo reverse proxy HTTPS con il backend privato autenticato di DSH Mobile.",
 			prepareOrigin: "Collega il tuo reverse proxy HTTPS",
 			originPublicOrigin: "Indirizzo HTTPS pubblico",
 			originListenHost: "IPv4 privato di ascolto",
@@ -1250,7 +1317,9 @@ window.__ModuleLoader__.load({
 		Object.assign(MOBILE_CONTROL_MESSAGES.zh, {
 			selfHostedDescription: "使用自己的 VPS 或 HTTPS 反向代理，不依赖公共隧道服务。",
 			originName: "自有反向代理",
-			originDescription: "HTTPS 由你管理，插件提供带认证的私有 HTTP 后端，无需安装隧道组件。",
+			caddyName: "托管 Caddy",
+			caddyModePreviewNote: "HTTPS 表单预览与当前连接不同。",
+			originDescription: "使用托管 Caddy 或已有 HTTPS 反向代理，接入 DSH Mobile 带认证的私有后端。",
 			prepareOrigin: "接入自有 HTTPS 反向代理",
 			originPublicOrigin: "公网 HTTPS 地址",
 			originListenHost: "私有监听 IPv4",
@@ -2707,6 +2776,38 @@ window.__ModuleLoader__.load({
 				if (anchorTimer !== 0) window.clearTimeout(anchorTimer);
 			};
 		}
+		//#endregion
+		//#region src/mobile-composer-toolbar.ts
+		/**
+		* Compact the stock InputBar without changing its React ownership, handlers,
+		* activity tree or the two groups observed by DSH's model-width controller.
+		* Extra controls wrap inside their own group; menus remain overflow-visible.
+		*/
+		const MOBILE_COMPOSER_TOOLBAR_STYLES = `
+/* These markers are attached only to the stock composer on the mobile page.
+   Body portals and inline dialogs are not part of the compact toolbar. */
+[data-dsh-mobile-composer-row] { min-width:0 !important; max-width:100% !important; }
+[data-dsh-mobile-composer-tools]:not([hidden]),[data-dsh-mobile-composer-controls]:not([hidden]) { flex-wrap:wrap !important; min-width:0 !important; max-width:100% !important; }
+[data-dsh-mobile-composer-tools] > :not(:where(dialog,[popover],[role="dialog"],[role="menu"],[role="listbox"],[data-trigger-menu])),
+[data-dsh-mobile-composer-tools] > [data-slot] > :not(:where(dialog,[popover],[role="dialog"],[role="menu"],[role="listbox"],[data-trigger-menu])),
+[data-dsh-mobile-composer-controls] > :not(:where(dialog,[popover],[role="dialog"],[role="menu"],[role="listbox"],[data-trigger-menu])),
+[data-dsh-mobile-composer-controls] > [data-slot] > :not(:where(dialog,[popover],[role="dialog"],[role="menu"],[role="listbox"],[data-trigger-menu])) { min-width:0 !important; max-width:100% !important; }
+[data-dsh-mobile-composer-tools] button:not(:where(dialog *,[popover] *,[role="dialog"] *,[role="menu"] *,[role="listbox"] *,[data-trigger-menu] *)),
+[data-dsh-mobile-composer-controls] button:not(:where(dialog *,[popover] *,[role="dialog"] *,[role="menu"] *,[role="listbox"] *,[data-trigger-menu] *)) { white-space:normal !important; overflow-wrap:anywhere !important; }
+@media (max-width:720px) {
+  [data-dsh-mobile-composer-row] button:not([role="switch"]):not(:where(dialog *,[popover] *,[role="dialog"] *,[role="menu"] *,[role="listbox"] *,[data-trigger-menu] *)) { min-width:44px !important; min-height:44px !important; touch-action:manipulation; }
+  [data-dsh-mobile-composer-trailing] > button[class*="_primary"] { min-width:44px !important; flex-shrink:0 !important; }
+  [data-dsh-mobile-composer-row] { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:4px 8px !important; min-width:0 !important; max-width:100% !important; }
+  [data-dsh-mobile-composer-tools]:not([hidden]) { display:flex !important; flex:0 1 auto !important; flex-wrap:wrap !important; width:auto !important; min-width:0 !important; max-width:100% !important; gap:6px !important; }
+  /* The activity seat can be wider than a single icon. Intrinsic demand, not
+     a fixed 100px reserve, decides whether this intact group needs to wrap. */
+  [data-dsh-mobile-composer-trailing] { display:flex !important; flex:1 0 auto !important; flex-wrap:nowrap !important; width:auto !important; min-width:0 !important; max-width:100% !important; gap:6px !important; margin-left:0 !important; justify-content:flex-end !important; }
+  [data-dsh-mobile-composer-controls]:not([hidden]) { display:flex !important; flex:1 1 0 !important; flex-wrap:wrap !important; justify-content:flex-end !important; min-width:44px !important; max-width:100% !important; gap:6px !important; }
+  [data-dsh-mobile-composer-model] { flex:0 1 auto !important; width:auto !important; min-width:44px !important; max-width:100% !important; }
+  [data-dsh-mobile-composer-model-trigger] { box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; padding-left:6px !important; padding-right:4px !important; }
+  [data-dsh-mobile-composer-model-label] { flex:1 1 auto !important; max-width:none !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
+}
+`;
 		//#endregion
 		//#region src/native-mobile.ts
 		/**
@@ -2747,13 +2848,15 @@ window.__ModuleLoader__.load({
  .dsh-mobile-settings_fontControls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .dsh-mobile-settings_fontControls button { min-width:48px; padding:0 12px; }
  .dsh-mobile-settings_fontControls output { min-width:42px; text-align:center; font-variant-numeric:tabular-nums; }
+ .dsh-mobile-settings_fontDetails { min-width:0; padding:0 0 16px; border-bottom:0.5px solid var(--dsw-alias-border-l2); }
+ .dsh-mobile-settings_fontDetails > summary { display:list-item; min-height:48px; padding:14px 0; box-sizing:border-box; color:var(--dsw-alias-label-primary); font-size:14px; cursor:pointer; }
+ .dsh-mobile-settings_fontDetails .dsh-mobile-settings_rowText { padding-right:8px; }
+ .dsh-mobile-settings_fontFamily { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; padding:12px 0; }
+ .dsh-mobile-settings_fontFamily > span { flex:1 1 100px; }
+ .dsh-mobile-settings_fontFamily input { box-sizing:border-box; flex:1 1 180px; width:100%; min-width:0; min-height:48px; padding:8px 12px; border:0.5px solid var(--dsw-alias-border-l2); border-radius:10px; background:var(--dsw-alias-bg-module-platform); color:var(--dsw-alias-label-primary); font:inherit; }
+ .dsh-mobile-settings_fontFamily input:focus-visible,.dsh-mobile-settings_fontDetails > summary:focus-visible { outline:2px solid var(--dsw-alias-label-primary-bluish,#2563eb); outline-offset:2px; }
  /* The mobile row replaces the Host-backed font control, not the theme selector. */
  html.dsh-native-mobile-active [data-slot="settings.general.item"]:has([data-mobile-font-setting]) > :not([data-mobile-font-setting])[class*="_row"]:has([class*="_control"] > [class*="_stepper"] > [class*="_arrows"]) { display:none !important; }
- /* Landscape and wide App windows also constrain standard extension controls. */
- [data-dsh-mobile-composer-row] { min-width:0 !important; max-width:100% !important; }
- [data-dsh-mobile-composer-tools]:not([hidden]),[data-dsh-mobile-composer-controls]:not([hidden]) { flex-wrap:wrap !important; min-width:0 !important; max-width:100% !important; }
- [data-dsh-mobile-composer-tools] > *,[data-dsh-mobile-composer-tools] > [data-slot] > *,[data-dsh-mobile-composer-controls] > *,[data-dsh-mobile-composer-controls] > [data-slot] > * { min-width:0 !important; max-width:100% !important; }
- [data-dsh-mobile-composer-tools] button,[data-dsh-mobile-composer-controls] button { white-space:normal !important; overflow-wrap:anywhere !important; }
 @media ${NATIVE_MOBILE_OVERLAY_QUERY} {
   html.dsh-native-mobile-active,html.dsh-native-mobile-active body { width:100%; height:100%; overflow:hidden; }
   html.dsh-native-mobile-active { --dsh-mobile-motion-duration:200ms; --dsh-mobile-motion-ease:cubic-bezier(.22,1,.36,1); }
@@ -2770,6 +2873,9 @@ window.__ModuleLoader__.load({
      the ellipsis action visible and give it a reliable hit target. */
   html.dsh-native-mobile-active [data-dsh-mobile-sidebar] [class*="_rowActions"] { display:inline-flex !important; align-items:center !important; gap:8px !important; }
   html.dsh-native-mobile-active [data-dsh-mobile-sidebar] [class*="_sessionRow"] [class*="_time"] { display:none !important; }
+  /* The always-visible pin action already conveys pinned state. Desktop only
+     hides this passive marker on hover; touch rows must hide it throughout. */
+  html.dsh-native-mobile-active [data-dsh-mobile-sidebar] [class*="_sessionRow"] [class*="_pinIndicator"] { display:none !important; }
   html.dsh-native-mobile-active [data-dsh-mobile-sidebar] [class*="_rowActions"] button { box-sizing:border-box !important; width:32px !important; min-width:32px !important; height:32px !important; min-height:32px !important; }
   [data-dsh-mobile-frame] { grid-template-columns:0 minmax(0,1fr) 0 !important; width:100% !important; height:100dvh !important; overflow:hidden !important; }
   [data-dsh-mobile-center] { grid-column:2 !important; width:100vw !important; min-width:0 !important; }
@@ -2827,6 +2933,11 @@ window.__ModuleLoader__.load({
   [data-dsh-mobile-settings-options] [data-slot="settings.general.item"] [class*="_selector"] { box-sizing:border-box !important; align-self:flex-start !important; justify-content:space-between !important; min-width:0 !important; min-height:48px !important; max-width:100% !important; }
   [data-dsh-mobile-settings-options] :is(input,select,textarea,button) { max-width:100%; }
   [data-dsh-mobile-settings-options] :is(input,select,textarea) { box-sizing:border-box; width:100%; min-width:0; }
+  /* Local steppers and native page-scale controls keep their own touch targets. */
+  [data-dsh-mobile-settings-options] [data-slot="settings.general.item"] .dsh-mobile-settings_fontControls button { flex:0 0 auto !important; width:auto !important; min-width:48px !important; align-self:center !important; justify-content:center !important; }
+  [data-dsh-mobile-settings-options] [data-slot="settings.general.item"] .dsh-mobile-settings_fontControls select { flex:0 0 auto !important; width:auto !important; min-width:76px !important; align-self:center !important; }
+  [data-dsh-mobile-settings-options] [data-mobile-font-setting] .dsh-mobile-settings_row { flex-wrap:wrap !important; }
+  [data-dsh-mobile-settings-options] [data-mobile-font-setting] .dsh-mobile-settings_rowText { flex:1 1 140px !important; width:auto !important; padding-right:8px !important; }
   [data-dsh-mobile-settings-options] [class*="_head"] { min-width:0; flex-wrap:wrap; }
   /* Provider names may shrink, but their edit/delete actions remain horizontal
      and retain a full touch target on narrow screens. */
@@ -2931,23 +3042,6 @@ window.__ModuleLoader__.load({
   /* Collapse the scroll viewport only; the editor, draft and attachments stay
      owned by DSH. Toolbar focus keeps the card expanded during menu taps. */
   [data-dsh-mobile-center] [data-composer-card]:not(:focus-within) > [data-input-scroll] { max-height:72px !important; overflow-y:auto !important; }
-  /* Stock Send/Queue/Steer and Stop keep their handlers and disabled state. */
-  [data-dsh-mobile-composer-row] button { min-width:44px !important; min-height:44px !important; touch-action:manipulation; }
-  [data-dsh-mobile-composer-row] button[class*="_primary"] { min-width:44px !important; flex-shrink:0 !important; }
-  /* Keep ordinary controls on one row. The trailing group reserves room for
-     its model and primary buttons; extra tools wrap only when space is short. */
-  [data-dsh-mobile-composer-row] { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:4px 8px !important; min-width:0 !important; max-width:100% !important; }
-  [data-dsh-mobile-composer-tools]:not([hidden]) { display:flex !important; flex:0 1 auto !important; flex-wrap:wrap !important; width:auto !important; min-width:0 !important; max-width:100% !important; gap:6px !important; }
-  [data-dsh-mobile-composer-tools] > *,[data-dsh-mobile-composer-tools] > [data-slot] > * { min-width:0 !important; max-width:100% !important; }
-  [data-dsh-mobile-composer-tools] button { white-space:normal !important; overflow-wrap:anywhere !important; }
-  [data-dsh-mobile-composer-trailing] { display:flex !important; flex:1 0 100px !important; flex-wrap:nowrap !important; width:auto !important; min-width:min(100%,100px) !important; max-width:100% !important; gap:6px !important; margin-left:0 !important; justify-content:flex-end !important; }
-  [data-dsh-mobile-composer-trailing]:has(> button[class*="_primary"] ~ button[class*="_primary"]) { flex-basis:144px !important; min-width:min(100%,144px) !important; }
-  [data-dsh-mobile-composer-controls]:not([hidden]) { display:flex !important; flex:1 1 0 !important; flex-wrap:wrap !important; justify-content:flex-end !important; min-width:0 !important; max-width:100% !important; gap:6px !important; }
-  [data-dsh-mobile-composer-controls] > *,[data-dsh-mobile-composer-controls] > [data-slot] > * { min-width:0 !important; max-width:100% !important; }
-  [data-dsh-mobile-composer-controls] button { white-space:normal !important; overflow-wrap:anywhere !important; }
-  [data-dsh-mobile-composer-model] { flex:0 1 auto !important; width:auto !important; min-width:44px !important; max-width:100% !important; }
-  [data-dsh-mobile-composer-model-trigger] { box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; padding-left:6px !important; padding-right:4px !important; }
-  [data-dsh-mobile-composer-model-label] { flex:1 1 auto !important; max-width:none !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
   [data-dsh-mobile-center] [class*="_root"]:has(> [class*="_card"] textarea) { box-sizing:border-box !important; width:100% !important; padding:0 0 8px !important; }
   [data-dsh-mobile-center] [class*="_root"]:has(> [class*="_card"] textarea) > [class=""]:last-child { display:none !important; }
 }
@@ -2972,7 +3066,7 @@ window.__ModuleLoader__.load({
   [data-dsh-mobile-settings-content][data-dsh-mobile-view-transition="true"],
   [data-dsh-mobile-view][data-dsh-mobile-view-transition="true"] { animation:none !important; }
 }
-`;
+` + MOBILE_COMPOSER_TOOLBAR_STYLES;
 		function classToken(element, suffix) {
 			return Array.from(element.classList).some((value) => value.endsWith(suffix));
 		}
@@ -4306,6 +4400,92 @@ window.__ModuleLoader__.load({
 		//#region src/mobile-font.ts
 		/** Device-local typography for authenticated mobile pages, without Host settings writes. */
 		const MOBILE_FONT_STORAGE_KEY = "dsh-mobile.content-font-size.v1";
+		const MOBILE_TYPOGRAPHY_STORAGE_KEY = "dsh-mobile.typography.v1";
+		const MOBILE_FONT_ROLES = ["text", "code"];
+		const roleSpecs = {
+			text: {
+				default: 16,
+				min: 12,
+				variable: "--dsh-content-font-size"
+			},
+			code: {
+				default: 11,
+				min: 10,
+				variable: "--dsh-code-font-size"
+			}
+		};
+		const genericFamilies = /* @__PURE__ */ new Set([
+			"serif",
+			"sans-serif",
+			"monospace",
+			"cursive",
+			"fantasy",
+			"system-ui",
+			"ui-serif",
+			"ui-sans-serif",
+			"ui-monospace",
+			"ui-rounded",
+			"emoji",
+			"math",
+			"fangsong",
+			"-apple-system",
+			"blinkmacsystemfont"
+		]);
+		const MAX_FONT_FAMILY_LENGTH = 1024;
+		/** Normalize a comma-separated local font list without loading or discovering fonts. */
+		function normalizeMobileFontFamily(value) {
+			let result = "";
+			for (const part of value.slice(0, MAX_FONT_FAMILY_LENGTH * 2).split(",")) {
+				const name = part.replace(/["'\\<>\u0000-\u001f\u007f]/gu, "").replace(/\s+/gu, " ").trim();
+				if (name === "") continue;
+				const generic = genericFamilies.has(name.toLowerCase());
+				const separator = result === "" ? "" : ", ";
+				const remaining = MAX_FONT_FAMILY_LENGTH - result.length - separator.length - (generic ? 0 : 2);
+				if (remaining < 1 || generic && name.length > remaining) break;
+				result += separator + (generic ? name : `"${name.slice(0, remaining)}"`);
+			}
+			return result;
+		}
+		function defaultTypography(textSize = 16) {
+			return Object.freeze({
+				sizes: Object.freeze({
+					text: textSize,
+					code: roleSpecs.code.default
+				}),
+				families: Object.freeze({
+					text: "",
+					code: ""
+				})
+			});
+		}
+		/** Durable local JSON is validated independently for each typography role. */
+		function readTypography(value, legacySize) {
+			const fallback = defaultTypography(legacySize);
+			if (value === null) return fallback;
+			let parsed;
+			try {
+				parsed = JSON.parse(value);
+			} catch (error) {
+				return fallback;
+			}
+			if (typeof parsed !== "object" || parsed === null || !("sizes" in parsed) || !("families" in parsed)) return fallback;
+			const sizes = { ...fallback.sizes };
+			const families = { ...fallback.families };
+			for (const role of MOBILE_FONT_ROLES) {
+				if (typeof parsed.sizes === "object" && parsed.sizes !== null && role in parsed.sizes) {
+					const size = Reflect.get(parsed.sizes, role);
+					if (typeof size === "number" && Number.isInteger(size) && size >= roleSpecs[role].min && size <= 32) sizes[role] = size;
+				}
+				if (typeof parsed.families === "object" && parsed.families !== null && role in parsed.families) {
+					const family = Reflect.get(parsed.families, role);
+					if (typeof family === "string") families[role] = normalizeMobileFontFamily(family);
+				}
+			}
+			return Object.freeze({
+				sizes: Object.freeze(sizes),
+				families: Object.freeze(families)
+			});
+		}
 		/** Read one local storage value; malformed or unavailable preferences use the mobile default. */
 		function parseMobileFontSize(value) {
 			if (value === null || !/^\d+$/.test(value)) return 16;
@@ -4315,15 +4495,21 @@ window.__ModuleLoader__.load({
 		/** Local preference storage; unavailable browser storage still permits in-page adjustment. */
 		var MobileFontPreference = class {
 			storage;
-			size = 16;
+			typography = defaultTypography();
 			listeners = /* @__PURE__ */ new Set();
 			constructor(storage) {
 				this.storage = storage;
+				let legacySize = 16;
+				try {
+					legacySize = parseMobileFontSize(storage?.getItem("dsh-mobile.content-font-size.v1") ?? null);
+				} catch (error) {}
+				this.typography = defaultTypography(legacySize);
 				try {
-					this.size = parseMobileFontSize(storage?.getItem("dsh-mobile.content-font-size.v1") ?? null);
+					this.typography = readTypography(storage?.getItem("dsh-mobile.typography.v1") ?? null, legacySize);
 				} catch (error) {}
 			}
-			getSnapshot = () => this.size;
+			getSnapshot = () => this.typography.sizes.text;
+			getTypographySnapshot = () => this.typography;
 			subscribe = (listener) => {
 				this.listeners.add(listener);
 				return () => {
@@ -4332,11 +4518,45 @@ window.__ModuleLoader__.load({
 			};
 			/** Apply a user-selected size locally; never send it to DSH's settings RPC. */
 			set(size) {
-				if (!Number.isInteger(size) || size < 12 || size > 32) throw new RangeError("Mobile font size must be an integer from 12 to 32");
-				if (this.size === size) return;
-				this.size = size;
+				this.setRoleSize("text", size);
+			}
+			/** Change one mobile font role independently; all values remain address-local. */
+			setRoleSize(role, size) {
+				if (!Number.isInteger(size) || size < roleSpecs[role].min || size > 32) throw new RangeError(`Mobile ${role} font size must be an integer from ${roleSpecs[role].min} to 32`);
+				if (this.typography.sizes[role] === size) return;
+				this.persist({
+					sizes: Object.freeze({
+						...this.typography.sizes,
+						[role]: size
+					}),
+					families: this.typography.families
+				});
+			}
+			/** Select existing local fonts; an empty list uses DSH's built-in font stack. */
+			setRoleFamily(role, family) {
+				const normalized = normalizeMobileFontFamily(family);
+				if (this.typography.families[role] === normalized) return;
+				this.persist({
+					sizes: this.typography.sizes,
+					families: Object.freeze({
+						...this.typography.families,
+						[role]: normalized
+					})
+				});
+			}
+			/** Restore mobile sizes and built-in font stacks without modifying Host settings. */
+			reset() {
+				const next = defaultTypography();
+				if (MOBILE_FONT_ROLES.every((role) => this.typography.sizes[role] === next.sizes[role] && this.typography.families[role] === "")) return;
+				this.persist(next);
+			}
+			persist(typography) {
+				this.typography = Object.freeze(typography);
+				try {
+					this.storage?.setItem(MOBILE_TYPOGRAPHY_STORAGE_KEY, JSON.stringify(typography));
+				} catch (error) {}
 				try {
-					this.storage?.setItem(MOBILE_FONT_STORAGE_KEY, String(size));
+					this.storage?.setItem(MOBILE_FONT_STORAGE_KEY, String(typography.sizes.text));
 				} catch (error) {}
 				for (const listener of this.listeners) listener();
 			}
@@ -4348,19 +4568,31 @@ window.__ModuleLoader__.load({
 				storage = window.localStorage;
 			} catch (error) {}
 			const preference = new MobileFontPreference(storage);
-			const property = "--dsh-content-font-size";
-			let previous = document.body.style.getPropertyValue(property);
-			let previousPriority = document.body.style.getPropertyPriority(property);
-			let ownedValue;
+			const style = document.body.style;
+			const properties = MOBILE_FONT_ROLES.flatMap((role) => [roleSpecs[role].variable, `--dsh-font-family-${role}`]);
+			const previous = new Map(properties.map((property) => [property, {
+				value: style.getPropertyValue(property),
+				priority: style.getPropertyPriority(property)
+			}]));
+			const owned = /* @__PURE__ */ new Map();
 			const apply = () => {
-				const current = document.body.style.getPropertyValue(property);
-				if (ownedValue !== void 0 && current !== ownedValue) {
-					previous = current;
-					previousPriority = document.body.style.getPropertyPriority(property);
+				const typography = preference.getTypographySnapshot();
+				for (const role of MOBILE_FONT_ROLES) for (const [property, value] of [[roleSpecs[role].variable, `${typography.sizes[role]}px`], [`--dsh-font-family-${role}`, typography.families[role]]]) {
+					const current = style.getPropertyValue(property);
+					const priority = style.getPropertyPriority(property);
+					const last = owned.get(property);
+					if (last !== void 0 && (current !== last.value || priority !== last.priority)) previous.set(property, {
+						value: current,
+						priority
+					});
+					owned.set(property, {
+						value,
+						priority: ""
+					});
+					if (current === value && priority === "") continue;
+					if (value === "") style.removeProperty(property);
+					else style.setProperty(property, value);
 				}
-				const value = `${preference.getSnapshot()}px`;
-				ownedValue = value;
-				if (current !== value) document.body.style.setProperty(property, value);
 			};
 			apply();
 			const unsubscribe = preference.subscribe(apply);
@@ -4374,59 +4606,343 @@ window.__ModuleLoader__.load({
 				dispose: () => {
 					observer.disconnect();
 					unsubscribe();
-					if (previous === "") document.body.style.removeProperty(property);
-					else document.body.style.setProperty(property, previous, previousPriority);
+					for (const [property, value] of previous) {
+						const last = owned.get(property);
+						if (last === void 0 || style.getPropertyValue(property) !== last.value || style.getPropertyPriority(property) !== last.priority) continue;
+						if (value.value === "") style.removeProperty(property);
+						else style.setProperty(property, value.value, value.priority);
+					}
 				}
 			};
 		}
-		const messages = {
+		const messages$1 = {
 			zh: {
 				title: "移动端字号",
 				description: "仅保存在当前访问地址的本地数据中，不影响电脑或其他设备。",
 				decrease: "减小移动端字号",
-				increase: "增大移动端字号"
+				increase: "增大移动端字号",
+				more: "更多字体设置",
+				reset: "恢复默认",
+				defaultFamily: "默认字体",
+				familyHint: "填写设备已有的字体，多个名称用逗号分隔；留空使用默认字体。",
+				codeSize: "代码字号",
+				textFamily: "正文字体",
+				codeFamily: "代码字体"
 			},
 			en: {
 				title: "Mobile font size",
 				description: "Saved locally for this address, without changing your computer or other devices.",
 				decrease: "Decrease mobile font size",
-				increase: "Increase mobile font size"
+				increase: "Increase mobile font size",
+				more: "More font settings",
+				reset: "Restore defaults",
+				defaultFamily: "Default font",
+				familyHint: "Use fonts already on your device, separated by commas. Leave empty for the default.",
+				codeSize: "Code font size",
+				textFamily: "Text font",
+				codeFamily: "Code font"
 			},
 			it: {
 				title: "Dimensione testo mobile",
 				description: "Salvata localmente per questo indirizzo, senza modificare il computer o altri dispositivi.",
 				decrease: "Riduci il testo mobile",
-				increase: "Aumenta il testo mobile"
+				increase: "Aumenta il testo mobile",
+				more: "Altre impostazioni dei caratteri",
+				reset: "Ripristina predefiniti",
+				defaultFamily: "Carattere predefinito",
+				familyHint: "Usa caratteri presenti sul dispositivo, separati da virgole. Lascia vuoto per il predefinito.",
+				codeSize: "Dimensione codice",
+				textFamily: "Carattere testo",
+				codeFamily: "Carattere codice"
 			}
 		};
+		function FontFamilyInput({ preference, role, value, label, placeholder }) {
+			const [draft, setDraft] = (0, react.useState)(value);
+			(0, react.useEffect)(() => {
+				setDraft(value);
+			}, [value]);
+			return (0, react.createElement)("label", { className: "dsh-mobile-settings_fontFamily" }, (0, react.createElement)("span", { className: "dsh-mobile-settings_title" }, label), (0, react.createElement)("input", {
+				type: "text",
+				value: draft,
+				maxLength: MAX_FONT_FAMILY_LENGTH,
+				placeholder,
+				autoComplete: "off",
+				spellCheck: false,
+				"data-mobile-font-family": role,
+				onChange: (event) => {
+					setDraft(event.currentTarget.value);
+				},
+				onBlur: () => {
+					preference.setRoleFamily(role, draft);
+					setDraft(preference.getTypographySnapshot().families[role]);
+				}
+			}));
+		}
 		/** General settings row matching the existing Mobile controls and DSH theme tokens. */
 		function MobileFontSizeRow({ preference, locale }) {
-			const size = (0, react.useSyncExternalStore)(preference.subscribe, preference.getSnapshot);
-			const copy = messages[locale];
+			const typography = (0, react.useSyncExternalStore)(preference.subscribe, preference.getTypographySnapshot);
+			const copy = messages$1[locale];
+			const controls = (role, title) => {
+				const size = typography.sizes[role];
+				return (0, react.createElement)("div", {
+					className: "dsh-mobile-settings_fontControls",
+					"data-mobile-font-role": role
+				}, (0, react.createElement)("button", {
+					type: "button",
+					className: "dsh-mobile-settings_selector",
+					"aria-label": `${copy.decrease}: ${title}`,
+					disabled: size === roleSpecs[role].min,
+					onClick: () => {
+						preference.setRoleSize(role, size - 1);
+					}
+				}, "−"), (0, react.createElement)("output", {
+					"aria-live": "polite",
+					"aria-label": title
+				}, `${size}px`), (0, react.createElement)("button", {
+					type: "button",
+					className: "dsh-mobile-settings_selector",
+					"aria-label": `${copy.increase}: ${title}`,
+					disabled: size === 32,
+					onClick: () => {
+						preference.setRoleSize(role, size + 1);
+					}
+				}, "+"));
+			};
 			return (0, react.createElement)("div", {
-				className: "dsh-mobile-settings_row",
 				lang: locale,
 				"data-mobile-font-setting": true
-			}, (0, react.createElement)("div", { className: "dsh-mobile-settings_rowText" }, (0, react.createElement)("div", { className: "dsh-mobile-settings_title" }, copy.title), (0, react.createElement)("div", { className: "dsh-mobile-settings_desc" }, copy.description)), (0, react.createElement)("div", { className: "dsh-mobile-settings_fontControls" }, (0, react.createElement)("button", {
+			}, (0, react.createElement)("div", { className: "dsh-mobile-settings_row" }, (0, react.createElement)("div", { className: "dsh-mobile-settings_rowText" }, (0, react.createElement)("div", { className: "dsh-mobile-settings_title" }, copy.title), (0, react.createElement)("div", { className: "dsh-mobile-settings_desc" }, copy.description)), controls("text", copy.title)), (0, react.createElement)("details", { className: "dsh-mobile-settings_fontDetails" }, (0, react.createElement)("summary", null, copy.more), (0, react.createElement)("p", { className: "dsh-mobile-settings_desc" }, copy.familyHint), (0, react.createElement)("div", { className: "dsh-mobile-settings_row" }, (0, react.createElement)("span", { className: "dsh-mobile-settings_rowText dsh-mobile-settings_title" }, copy.codeSize), controls("code", copy.codeSize)), ...MOBILE_FONT_ROLES.map((role) => (0, react.createElement)(FontFamilyInput, {
+				key: role,
+				preference,
+				role,
+				value: typography.families[role],
+				label: role === "text" ? copy.textFamily : copy.codeFamily,
+				placeholder: copy.defaultFamily
+			})), (0, react.createElement)("button", {
 				type: "button",
 				className: "dsh-mobile-settings_selector",
-				"aria-label": copy.decrease,
-				disabled: size === 12,
 				onClick: () => {
-					preference.set(size - 1);
+					preference.reset();
+				}
+			}, copy.reset)));
+		}
+		//#endregion
+		//#region src/mobile-display-scale.ts
+		/** Native App page scaling in DSH General settings, independent from local typography. */
+		/** Validate the native reply before displaying or reusing its values in a request. */
+		function parseMobileDisplayScale(value) {
+			if (typeof value !== "object" || value === null || !("percent" in value) || !("minPercent" in value) || !("maxPercent" in value)) throw new TypeError("Native display scale reply is invalid");
+			const { percent, minPercent, maxPercent } = value;
+			if (typeof percent !== "number" || !Number.isInteger(percent) || typeof minPercent !== "number" || !Number.isInteger(minPercent) || typeof maxPercent !== "number" || !Number.isInteger(maxPercent) || minPercent < 80 || maxPercent > 125 || minPercent > 100 || maxPercent < 100 || percent < minPercent || percent > maxPercent) throw new TypeError("Native display scale reply is invalid");
+			return Object.freeze({
+				percent,
+				minPercent,
+				maxPercent
+			});
+		}
+		/** Serial native requests; a replaced bridge or disposed row cannot publish stale results. */
+		var MobileDisplayScaleController = class {
+			getBridge;
+			snapshot = {
+				state: "hidden",
+				value: null
+			};
+			listeners = /* @__PURE__ */ new Set();
+			bridge;
+			generation = 0;
+			active = false;
+			constructor(getBridge) {
+				this.getBridge = getBridge;
+			}
+			getSnapshot = () => this.snapshot;
+			subscribe = (listener) => {
+				this.listeners.add(listener);
+				return () => {
+					this.listeners.delete(listener);
+				};
+			};
+			start() {
+				this.active = true;
+				this.refresh();
+			}
+			stop() {
+				this.active = false;
+				this.generation += 1;
+				this.bridge = void 0;
+			}
+			/** Discover both capabilities before showing a control or querying its current native value. */
+			refresh = () => {
+				if (!this.active) return;
+				const generation = ++this.generation;
+				const bridge = this.getBridge();
+				this.bridge = bridge;
+				this.publish({
+					state: "hidden",
+					value: null
+				});
+				if (bridge === void 0) return;
+				Promise.resolve().then(() => bridge.capabilities()).then(async (capabilities) => {
+					if (!this.current(bridge, generation)) return;
+					if (!capabilities.includes("mobile.display-scale.get") || !capabilities.includes("mobile.display-scale.set")) return;
+					this.publish({
+						state: "loading",
+						value: null
+					});
+					try {
+						const value = parseMobileDisplayScale(await bridge.invoke("mobile.display-scale.get", {}));
+						if (this.current(bridge, generation)) this.publish({
+							state: "ready",
+							value
+						});
+					} catch (error) {
+						if (this.current(bridge, generation)) this.publish({
+							state: "error",
+							value: null
+						});
+					}
+				}, () => {});
+			};
+			/** Apply a device-local value once, preserving the last confirmed value when the native request fails. */
+			setPercent(percent) {
+				const value = this.snapshot.value;
+				const bridge = this.bridge;
+				if (!this.active || bridge === void 0 || bridge !== this.getBridge() || value === null || this.snapshot.state === "busy" || this.snapshot.state === "loading") return;
+				if (!Number.isInteger(percent) || percent < value.minPercent || percent > value.maxPercent) return;
+				if (percent === value.percent && this.snapshot.state !== "error") return;
+				const generation = this.generation;
+				this.publish({
+					state: "busy",
+					value
+				});
+				Promise.resolve().then(() => this.current(bridge, generation) ? bridge.invoke("mobile.display-scale.set", { percent }) : void 0).then((reply) => {
+					if (!this.current(bridge, generation)) return;
+					try {
+						this.publish({
+							state: "ready",
+							value: parseMobileDisplayScale(reply)
+						});
+					} catch (error) {
+						this.publish({
+							state: "error",
+							value
+						});
+					}
+				}, () => {
+					if (this.current(bridge, generation)) this.publish({
+						state: "error",
+						value
+					});
+				});
+			}
+			current(bridge, generation) {
+				return this.active && generation === this.generation && this.bridge === bridge && this.getBridge() === bridge;
+			}
+			publish(snapshot) {
+				this.snapshot = Object.freeze(snapshot);
+				for (const listener of this.listeners) listener();
+			}
+		};
+		const messages = {
+			zh: {
+				title: "页面缩放",
+				description: "调整整个页面的显示大小，仅保存在当前 App 中，与字号设置独立。",
+				reset: "恢复 100%",
+				loading: "读取中…",
+				busy: "正在调整…",
+				error: "无法调整页面缩放，请重试。",
+				retry: "重试"
+			},
+			en: {
+				title: "Page zoom",
+				description: "Resize the whole page. Saved in this App, separately from font size.",
+				reset: "Reset to 100%",
+				loading: "Loading…",
+				busy: "Applying…",
+				error: "Could not change page zoom. Try again.",
+				retry: "Retry"
+			},
+			it: {
+				title: "Zoom pagina",
+				description: "Ridimensiona tutta la pagina. Salvato in questa app, separatamente dalla dimensione del testo.",
+				reset: "Ripristina 100%",
+				loading: "Caricamento…",
+				busy: "Applicazione…",
+				error: "Impossibile modificare lo zoom. Riprova.",
+				retry: "Riprova"
+			}
+		};
+		/** Native-only General settings row using the existing DSH Mobile controls and locale. */
+		function MobileDisplayScaleRow({ locale }) {
+			const [controller] = (0, react.useState)(() => new MobileDisplayScaleController(() => window.__DSH_MOBILE_NATIVE__));
+			const snapshot = (0, react.useSyncExternalStore)(controller.subscribe, controller.getSnapshot);
+			(0, react.useEffect)(() => {
+				controller.start();
+				window.addEventListener("dsh-mobile-native-ready", controller.refresh);
+				return () => {
+					window.removeEventListener("dsh-mobile-native-ready", controller.refresh);
+					controller.stop();
+				};
+			}, [controller]);
+			if (snapshot.state === "hidden") return null;
+			const copy = messages[locale];
+			const value = snapshot.value;
+			const busy = snapshot.state === "busy" || snapshot.state === "loading";
+			const description = snapshot.state === "error" ? copy.error : snapshot.state === "loading" ? copy.loading : snapshot.state === "busy" ? copy.busy : copy.description;
+			const options = value === null ? [] : [.../* @__PURE__ */ new Set([
+				value.minPercent,
+				value.maxPercent,
+				value.percent,
+				...[
+					80,
+					85,
+					90,
+					95,
+					100,
+					105,
+					110,
+					115,
+					120,
+					125
+				].filter((percent) => percent >= value.minPercent && percent <= value.maxPercent)
+			])].sort((a, b) => a - b);
+			return (0, react.createElement)("div", {
+				className: "dsh-mobile-settings_row",
+				style: { flexWrap: "wrap" },
+				lang: locale,
+				"data-mobile-display-scale-setting": true,
+				"aria-busy": busy
+			}, (0, react.createElement)("div", {
+				className: "dsh-mobile-settings_rowText",
+				style: {
+					flexBasis: 160,
+					paddingRight: 8
+				}
+			}, (0, react.createElement)("div", { className: "dsh-mobile-settings_title" }, copy.title), (0, react.createElement)("div", {
+				className: "dsh-mobile-settings_desc",
+				"aria-live": "polite"
+			}, description)), (0, react.createElement)("div", { className: "dsh-mobile-settings_fontControls" }, value === null ? null : (0, react.createElement)("select", {
+				className: "dsh-mobile-settings_selector",
+				"aria-label": copy.title,
+				disabled: busy,
+				value: value.percent,
+				onChange: (event) => {
+					controller.setPercent(Number(event.currentTarget.value));
 				}
-			}, "−"), (0, react.createElement)("output", {
-				"aria-live": "polite",
-				"aria-label": copy.title
-			}, `${size}px`), (0, react.createElement)("button", {
+			}, ...options.map((percent) => (0, react.createElement)("option", {
+				key: percent,
+				value: percent
+			}, `${percent}%`))), snapshot.state === "error" ? (0, react.createElement)("button", {
+				type: "button",
+				className: "dsh-mobile-settings_selector",
+				onClick: controller.refresh
+			}, copy.retry) : (0, react.createElement)("button", {
 				type: "button",
 				className: "dsh-mobile-settings_selector",
-				"aria-label": copy.increase,
-				disabled: size === 32,
+				disabled: busy || value === null || value.percent === 100,
 				onClick: () => {
-					preference.set(size + 1);
+					controller.setPercent(100);
 				}
-			}, "+")));
+			}, copy.reset)));
 		}
 		//#endregion
 		//#region src/local-admin-host.ts
@@ -4778,6 +5294,244 @@ window.__ModuleLoader__.load({
 			}, copy.open));
 		}
 		//#endregion
+		//#region src/extension-recovery-ui.ts
+		/** Validate the Host response and select only stopped workers, never in-process hosts. */
+		function parseUnavailableExtensionHosts(payload) {
+			if (typeof payload !== "object" || payload === null || !("hosts" in payload) || !Array.isArray(payload.hosts)) return void 0;
+			const ids = /* @__PURE__ */ new Set();
+			const hosts = [];
+			for (const value of payload.hosts) {
+				if (typeof value !== "object" || value === null) return void 0;
+				const entry = value;
+				if (typeof entry.id !== "string" || !/^[a-z][a-z0-9-]{0,63}$/u.test(entry.id) || ids.has(entry.id) || typeof entry.name !== "string" || entry.name.trim() === "" || entry.mode !== "worker" && entry.mode !== "in-process" || entry.state !== "ready" && entry.state !== "unavailable" || typeof entry.generation !== "string" || !/^[a-f\d]{64}$/u.test(entry.generation)) return void 0;
+				ids.add(entry.id);
+				if (entry.mode === "worker" && entry.state === "unavailable") hosts.push({
+					id: entry.id,
+					name: entry.name,
+					generation: entry.generation
+				});
+			}
+			return hosts;
+		}
+		/** One section shared across desktop access views; recovery is never automatic. */
+		function installExtensionRecoveryControl(options) {
+			const { document, signal, request, confirm, translate: t } = options;
+			const section = document.createElement("section");
+			section.className = "dsh-mobile-control__extension-recovery";
+			section.hidden = true;
+			section.setAttribute("aria-label", t("extensionRecoveryTitle"));
+			const title = document.createElement("h3");
+			title.textContent = t("extensionRecoveryTitle");
+			const help = document.createElement("p");
+			help.textContent = t("extensionRecoveryHelp");
+			const list = document.createElement("ul");
+			const feedback = document.createElement("p");
+			feedback.className = "dsh-mobile-control__extension-recovery-error";
+			feedback.hidden = true;
+			feedback.setAttribute("role", "status");
+			feedback.setAttribute("aria-live", "polite");
+			const retry = document.createElement("button");
+			retry.type = "button";
+			retry.className = "dsh-mobile-control__secondary";
+			retry.textContent = t("extensionRecoveryRefresh");
+			retry.hidden = true;
+			section.append(title, help, list, feedback, retry);
+			const rows = /* @__PURE__ */ new Map();
+			let hosts = [];
+			let busyId;
+			let errorText = "";
+			let errorSource;
+			let revision = 0;
+			let reading = false;
+			let refreshPending = false;
+			let disposed = false;
+			const live = () => !disposed && !signal.aborted;
+			const render = () => {
+				if (!live()) return;
+				section.hidden = hosts.length === 0;
+				section.setAttribute("aria-busy", String(busyId !== void 0));
+				for (const [id, entry] of rows) {
+					if (hosts.some((host) => host.id === id)) continue;
+					entry.row.remove();
+					rows.delete(id);
+				}
+				for (const host of hosts) {
+					let entry = rows.get(host.id);
+					if (entry === void 0) {
+						const row = document.createElement("li");
+						const text = document.createElement("div");
+						const name = document.createElement("strong");
+						const id = document.createElement("code");
+						const button = document.createElement("button");
+						button.type = "button";
+						button.className = "dsh-mobile-control__secondary";
+						button.dataset.extensionRecoveryId = host.id;
+						button.addEventListener("click", () => {
+							recover(host.id);
+						});
+						text.append(name, id);
+						row.append(text, button);
+						list.append(row);
+						entry = {
+							row,
+							name,
+							id,
+							button
+						};
+						rows.set(host.id, entry);
+					}
+					entry.name.textContent = host.name;
+					entry.id.textContent = host.id;
+					entry.button.disabled = busyId !== void 0;
+					entry.button.textContent = t(busyId === host.id ? "extensionRecoveryRestarting" : "extensionRecoveryRestart");
+					entry.button.setAttribute("aria-label", t("extensionRecoveryRestartAria", { name: host.name }));
+				}
+				feedback.hidden = errorText === "";
+				feedback.textContent = errorText;
+				retry.hidden = errorText === "";
+				retry.disabled = reading || busyId !== void 0;
+			};
+			const accept = (payload, recovered = false) => {
+				const parsed = parseUnavailableExtensionHosts(payload);
+				if (parsed === void 0) throw new Error("extension_recovery_invalid_response");
+				hosts = parsed;
+				if (recovered || hosts.length === 0 || errorSource === "load") {
+					errorText = "";
+					errorSource = void 0;
+				}
+				render();
+			};
+			const refresh = async () => {
+				if (!live()) return;
+				if (reading || busyId !== void 0) {
+					refreshPending = true;
+					return;
+				}
+				reading = true;
+				const current = ++revision;
+				render();
+				try {
+					const payload = await request("/api/mobile-access/extensions/hosts");
+					if (live() && current === revision) accept(payload);
+				} catch (_error) {
+					if (live() && current === revision && hosts.length > 0 && errorSource !== "recover") {
+						errorText = t("extensionRecoveryLoadFailed");
+						errorSource = "load";
+					}
+				} finally {
+					reading = false;
+					if (live()) {
+						render();
+						if (refreshPending && busyId === void 0) {
+							refreshPending = false;
+							await refresh();
+						}
+					}
+				}
+			};
+			const recover = async (id) => {
+				const host = hosts.find((entry) => entry.id === id);
+				if (!live() || busyId !== void 0 || host === void 0 || !confirm(t("extensionRecoveryConfirm", { name: host.name }))) return;
+				if (!live()) return;
+				busyId = id;
+				errorText = "";
+				errorSource = void 0;
+				const current = ++revision;
+				render();
+				try {
+					const payload = await request("/api/mobile-access/extensions/recover", {
+						method: "POST",
+						body: JSON.stringify({
+							id,
+							confirm: true
+						})
+					});
+					if (live() && current === revision) accept(payload, true);
+				} catch (error) {
+					if (live() && current === revision) {
+						errorText = t(error instanceof Error && error.message === "extension_changed_during_activation" ? "extensionRecoveryChanged" : "extensionRecoveryFailed");
+						errorSource = "recover";
+					}
+				} finally {
+					busyId = void 0;
+					if (live()) {
+						render();
+						if (refreshPending && !reading) {
+							refreshPending = false;
+							await refresh();
+						}
+					}
+				}
+			};
+			retry.addEventListener("click", () => {
+				errorText = "";
+				errorSource = void 0;
+				refresh();
+			});
+			return {
+				section,
+				refresh,
+				dispose: () => {
+					disposed = true;
+					revision++;
+					section.remove();
+					rows.clear();
+				}
+			};
+		}
+		/** Theme-owned compact recovery rows; normal connection views keep their layout. */
+		const EXTENSION_RECOVERY_STYLES = `
+.dsh-mobile-control__extension-recovery{margin:0 0 14px;padding:12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary)}
+.dsh-mobile-control__extension-recovery[hidden]{display:none}
+.dsh-mobile-control__extension-recovery h3{margin:0 0 6px;font-size:13px;line-height:1.5;font-weight:600}
+.dsh-mobile-control__extension-recovery p{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--dsw-alias-label-secondary)}
+.dsh-mobile-control__extension-recovery ul{list-style:none;margin:0;padding:0}
+.dsh-mobile-control__extension-recovery li{display:flex;align-items:center;gap:12px;padding:6px 0}
+.dsh-mobile-control__extension-recovery li>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
+.dsh-mobile-control__extension-recovery strong{font-size:12px;line-height:1.5}
+.dsh-mobile-control__extension-recovery code{font-size:11px;color:var(--dsw-alias-label-secondary);overflow-wrap:anywhere}
+.dsh-mobile-control__extension-recovery button{flex:none;box-sizing:border-box;min-height:48px;min-width:48px;white-space:normal}
+.dsh-mobile-control__extension-recovery button:disabled{cursor:wait;opacity:.55}
+.dsh-mobile-control__extension-recovery button:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}
+.dsh-mobile-control__extension-recovery button:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active,var(--dsw-alias-interactive-bg-hover))}
+.dsh-mobile-control__extension-recovery .dsh-mobile-control__extension-recovery-error{color:var(--dsw-alias-label-primary)}
+`;
+		//#endregion
+		//#region src/native-capability.ts
+		/** Cancel queued calls before native effects start; started effects are not rolled back. */
+		function invokeBoundNativeCapability(bridge, currentBridge, action, input, signal) {
+			const abortReason = () => signal.reason ?? new DOMException("mobile extension disposed", "AbortError");
+			if (signal.aborted) return Promise.reject(abortReason());
+			return new Promise((resolve, reject) => {
+				let settled = false;
+				const finish = (callback) => {
+					if (settled) return;
+					settled = true;
+					signal.removeEventListener("abort", onAbort);
+					callback();
+				};
+				const onAbort = () => {
+					finish(() => {
+						reject(abortReason());
+					});
+				};
+				signal.addEventListener("abort", onAbort, { once: true });
+				Promise.resolve().then(() => {
+					if (settled || signal.aborted) throw abortReason();
+					if (currentBridge() !== bridge) throw new DOMException("native bridge changed", "AbortError");
+					return bridge.invoke(action, input);
+				}).then((value) => {
+					finish(() => {
+						resolve(value);
+					});
+				}, (error) => {
+					finish(() => {
+						reject(error);
+					});
+				});
+			});
+		}
+		//#endregion
 		//#region src/client.ts
 		/** Map a host-reported provider onto the UI union, defaulting to the built-in one. */
 		function parseMobileRemoteProvider(value) {
@@ -5291,6 +6045,14 @@ window.__ModuleLoader__.load({
 			funnel_https_required: "funnelHttps",
 			funnel_start_failed: "funnelStart",
 			funnel_start_timeout: "funnelTimeout",
+			funnel_state_invalid: "funnelStateInvalid",
+			cpolar_path_invalid: "componentPathUnsafe",
+			cloudflared_path_invalid: "componentPathUnsafe",
+			cloudflared_tunnel_path_invalid: "componentPathUnsafe",
+			frp_path_invalid: "componentPathUnsafe",
+			frp_config_path_invalid: "componentPathUnsafe",
+			frp_ingress_path_invalid: "componentPathUnsafe",
+			caddy_path_invalid: "componentPathUnsafe",
 			tailscale_dns_missing: "tailscaleDnsMissing",
 			gateway_start_failed: "gatewayStartFailed",
 			control_channel_failed: "controlChannelFailed",
@@ -5388,6 +6150,7 @@ window.__ModuleLoader__.load({
 			"cpolar_component_invalid",
 			"cpolar_config_missing",
 			"cpolar_config_invalid",
+			"funnel_state_invalid",
 			"cpolar_start_timeout",
 			"cpolar_stopped",
 			"cpolar_exited",
@@ -5462,6 +6225,13 @@ window.__ModuleLoader__.load({
 				...init,
 				signal: lifecycle.signal
 			}, timeoutMs);
+			const extensionRecovery = installExtensionRecoveryControl({
+				document,
+				signal: lifecycle.signal,
+				request: controlRequestJson,
+				confirm: (message) => window.confirm(message),
+				translate: t
+			});
 			const root = element("div", "dsh-mobile-control");
 			root.lang = locale;
 			const panel = element("section", "dsh-mobile-control__panel");
@@ -6274,6 +7044,9 @@ window.__ModuleLoader__.load({
 			caddyModeManagedLabel.append(caddyModeManaged, caddyManagedText);
 			caddyModeExternalLabel.append(caddyModeExternal, caddyExternalText);
 			caddyModeRow.append(caddyModeLegend, caddyModeExternalLabel, caddyModeManagedLabel);
+			const caddyModePreviewNote = element("p", "dsh-mobile-control__component-note");
+			caddyModePreviewNote.textContent = t("caddyModePreviewNote");
+			caddyModePreviewNote.hidden = true;
 			const caddyForm = element("div", "dsh-mobile-control__caddy-form");
 			caddyForm.hidden = true;
 			const caddyFields = element("div", "dsh-mobile-control__origin-fields");
@@ -6341,7 +7114,7 @@ window.__ModuleLoader__.load({
 			const caddyActions = element("div", "dsh-mobile-control__actions dsh-mobile-control__caddy-actions");
 			caddyActions.append(caddyInstall, caddySave, caddyPurgeButton);
 			caddyForm.append(caddyFields, caddyInstallNote, caddyStatus, caddyActions, caddyFeedback);
-			originSetup.append(originSetupTitle, caddyModeRow, originHelp, originWarning, originFields, originFeedback, originFormActions, caddyForm, originBackend);
+			originSetup.append(originSetupTitle, caddyModeRow, caddyModePreviewNote, originHelp, originWarning, originFields, originFeedback, originFormActions, caddyForm, originBackend);
 			const tailscaleInfo = element("details", "dsh-mobile-control__details");
 			const tailscaleInfoSummary = element("summary");
 			tailscaleInfoSummary.textContent = t("tailscaleHelp");
@@ -6670,7 +7443,7 @@ window.__ModuleLoader__.load({
 			lanView.append(lanSetup, access, qrBox, status, extensionStatus, actions, manageRow, devicePanel, trustedNetworks);
 			remoteView.append(remoteIntro, httpFrameWarning, providerSection, remoteWorkspace);
 			diagnosticsView.append(diagnosticsIntro, diagnosticsSummary, diagnosticsToolbar, diagnosticsFeedback, diagnosticsChecks, wsPathsSection, diagnosticsDetails);
-			panel.append(header, releaseNotice, updateCard, appDownload, switcher, lanView, remoteView, diagnosticsView);
+			panel.append(header, releaseNotice, updateCard, appDownload, extensionRecovery.section, switcher, lanView, remoteView, diagnosticsView);
 			root.append(panel);
 			document.body.append(root);
 			let running = false;
@@ -6790,6 +7563,7 @@ window.__ModuleLoader__.load({
 				providerInfoButton.setAttribute("aria-expanded", "false");
 			});
 			const selectView = (view) => {
+				if (!panel.hidden) extensionRecovery.refresh();
 				if (view !== "diagnostics") previousAccessView = view;
 				lanView.hidden = view !== "lan";
 				remoteView.hidden = view !== "remote";
@@ -6820,6 +7594,7 @@ window.__ModuleLoader__.load({
 			});
 			const setOpen = (open) => {
 				panel.hidden = !open;
+				if (open) extensionRecovery.refresh();
 				for (const trigger of document.querySelectorAll(".dsh-mobile-control__trigger")) trigger.setAttribute("aria-expanded", String(open));
 			};
 			const render = (data) => {
@@ -7042,6 +7817,7 @@ window.__ModuleLoader__.load({
 				const cloudflared = remoteProvider === "cloudflared";
 				const frp = remoteProvider === "frp";
 				const origin = remoteProvider === "origin";
+				const managedOrigin = origin && data.originMode === "managed";
 				const tailscale = remoteProvider === "tailscale";
 				tailscaleChoice.classList.toggle("is-selected", tailscale);
 				cpolarChoice.classList.toggle("is-selected", cpolar);
@@ -7056,7 +7832,7 @@ window.__ModuleLoader__.load({
 				cloudflaredChoice.tabIndex = cloudflared ? 0 : -1;
 				frpChoice.setAttribute("aria-pressed", String(frp));
 				originChoice.setAttribute("aria-pressed", String(origin));
-				providerSetupName.textContent = cpolar ? "cpolar" : cloudflared ? "cloudflared" : frp ? t("frpName") : origin ? t("originName") : "Tailscale Funnel";
+				providerSetupName.textContent = cpolar ? "cpolar" : cloudflared ? "cloudflared" : frp ? t("frpName") : origin ? t(managedOrigin ? "caddyName" : "originName") : "Tailscale Funnel";
 				tailscaleChoice.disabled = remoteProviderBusy;
 				cpolarChoice.disabled = remoteProviderBusy;
 				cloudflaredChoice.disabled = remoteProviderBusy;
@@ -7251,6 +8027,7 @@ window.__ModuleLoader__.load({
 				const caddySupported = caddyComponentInfo !== void 0 && caddyComponentInfo.supported === true;
 				if (!caddyModePreviewDirty) caddyModeManagedSelected = data.originMode === "managed";
 				const showManaged = origin && caddyModeManagedSelected;
+				caddyModePreviewNote.hidden = !origin || !caddyModePreviewDirty || caddyModeManagedSelected === managedOrigin;
 				const caddyConfiguration = typeof data.caddyConfiguration === "object" && data.caddyConfiguration !== null ? data.caddyConfiguration : {};
 				const caddyState = typeof data.caddyState === "object" && data.caddyState !== null ? data.caddyState : {};
 				caddyModeRow.hidden = !origin;
@@ -7284,7 +8061,6 @@ window.__ModuleLoader__.load({
 					caddySecretKey,
 					caddyPort
 				]) input.disabled = remoteProviderBusy || !caddySupported;
-				selfHostedBadge.textContent = origin ? originListening ? t("originBackendReady") : t("advanced") : frpConfigured && frpInstalled ? t("ready") : t("advanced");
 				const state = typeof data.state === "string" ? data.state : "error";
 				const errorCode = typeof data.errorCode === "string" ? data.errorCode : "";
 				const remoteOrigin = typeof data.origin === "string" ? data.origin : "";
@@ -7297,10 +8073,11 @@ window.__ModuleLoader__.load({
 				}[errorCode] ?? "";
 				const needsFunnelSetup = state === "error" && remoteSetupUrl !== "";
 				remoteReady = remoteRunning && state === "ready" && remoteOrigin !== "";
+				selfHostedBadge.textContent = origin ? managedOrigin ? t(remoteReady ? "ready" : "advanced") : originListening ? t("originBackendReady") : t("advanced") : frpConfigured && frpInstalled ? t("ready") : t("advanced");
 				remoteStateBadge.classList.toggle("is-ready", remoteReady);
 				remoteStateBadge.classList.toggle("is-busy", state === "starting" || state === "connecting" || state === "needs-login");
 				remoteStateBadge.classList.toggle("is-attention", state === "error" || state === "unavailable");
-				remoteStateBadge.textContent = remoteReady ? origin ? t("originBackendReady") : t("ready") : state === "starting" || state === "connecting" || state === "needs-login" ? t("remoteStateConnecting") : state === "error" || state === "unavailable" ? t("remoteStateAttention") : t("remoteStateOff");
+				remoteStateBadge.textContent = remoteReady ? origin && !managedOrigin ? t("originBackendReady") : t("ready") : state === "starting" || state === "connecting" || state === "needs-login" ? t("remoteStateConnecting") : state === "error" || state === "unavailable" ? t("remoteStateAttention") : t("remoteStateOff");
 				remoteAccess.hidden = !remoteReady;
 				remoteAccessLink.href = remoteOrigin;
 				remoteAccessLink.textContent = remoteOrigin;
@@ -7312,7 +8089,7 @@ window.__ModuleLoader__.load({
 					starting: cpolar ? t("remoteStartingCpolar") : cloudflared ? t("remoteStartingCloudflared") : frp ? t("remoteStartingFrp") : origin ? t("originStarting") : t("remoteStartingTailscale"),
 					"needs-login": t("remoteNeedsLogin"),
 					connecting: cpolar ? t("remoteConnectingCpolar") : cloudflared ? t("remoteConnectingCloudflared") : frp ? t("remoteConnectingFrp") : t("remoteConnectingTailscale"),
-					ready: origin ? t("originReady") : t("remoteReady"),
+					ready: origin ? t(managedOrigin ? "caddyVerified" : "originReady") : t("remoteReady"),
 					error: t("remoteError")
 				};
 				const errorLabels = translatedRemoteErrors();
@@ -8711,6 +9488,9 @@ window.__ModuleLoader__.load({
 				loadDiagnostics();
 			});
 			diagnosticsRun.addEventListener("click", loadDiagnostics);
+			diagnosticsRun.addEventListener("click", () => {
+				extensionRecovery.refresh();
+			});
 			const closeUpdateCard = () => {
 				updateCard.hidden = true;
 				if (pluginUpdateAvailable && pluginLatestVersion !== "") updatePlugin.hidden = !diagnosticsView.hidden;
@@ -8802,10 +9582,14 @@ window.__ModuleLoader__.load({
 					if (!diagnosticsView.hidden) renderWsBlocked(wsPathsBlocked);
 				}, () => {});
 			};
-			const wsBlockedPoll = window.setInterval(pollWsBlocked, 2e4);
+			const wsBlockedPoll = window.setInterval(() => {
+				pollWsBlocked();
+				if (!panel.hidden) extensionRecovery.refresh();
+			}, 2e4);
 			return {
 				remove: () => {
 					lifecycle.abort();
+					extensionRecovery.dispose();
 					window.clearInterval(remotePoll);
 					window.clearInterval(wsBlockedPoll);
 					window.removeEventListener("focus", retryAfterSetup);
@@ -9412,30 +10196,7 @@ window.__ModuleLoader__.load({
 				const abortReason = () => signal.reason ?? new DOMException("mobile extension disposed", "AbortError");
 				if (signal.aborted) throw abortReason();
 				const bridge = window.__DSH_MOBILE_NATIVE__;
-				if (bridge !== void 0) return new Promise((resolve, reject) => {
-					let settled = false;
-					const finish = (callback) => {
-						if (settled) return;
-						settled = true;
-						signal.removeEventListener("abort", onAbort);
-						callback();
-					};
-					const onAbort = () => {
-						finish(() => {
-							reject(abortReason());
-						});
-					};
-					signal.addEventListener("abort", onAbort, { once: true });
-					Promise.resolve().then(() => bridge.invoke(action, input)).then((value) => {
-						finish(() => {
-							resolve(materializeNativeFile(value));
-						});
-					}, (error) => {
-						finish(() => {
-							reject(error);
-						});
-					});
-				});
+				if (bridge !== void 0) return invokeBoundNativeCapability(bridge, () => window.__DSH_MOBILE_NATIVE__, action, input, signal).then(materializeNativeFile);
 				if (action === "share" && typeof navigator.share === "function") {
 					await navigator.share(input ?? {});
 					return { ok: true };
@@ -10051,7 +10812,7 @@ window.__ModuleLoader__.load({
 .dsh-mobile-control__origin-modes{min-width:0;margin:0 0 14px;padding:0;border:0}.dsh-mobile-control__origin-modes legend{margin:0 0 8px;padding:0;color:var(--dsw-alias-label-secondary,#606873);font:600 12px/1.4 system-ui}.dsh-mobile-control__origin-mode{display:flex;box-sizing:border-box;min-height:44px;align-items:center;gap:10px;padding:10px;border:1px solid var(--dsw-alias-border-l2,#dbe1e8);border-radius:10px;background:var(--dsw-alias-bg-layer-1,#f3f5f8);font:12px/1.5 system-ui;cursor:pointer}.dsh-mobile-control__origin-mode+.dsh-mobile-control__origin-mode{margin-top:8px}.dsh-mobile-control__origin-mode:has(input:checked){border-color:var(--dsw-alias-label-primary-bluish,#2563eb)}.dsh-mobile-control__origin-mode:focus-within{outline:2px solid var(--dsw-alias-state-business-primary,#2563eb);outline-offset:2px}.dsh-mobile-control__origin-mode:has(input:disabled){cursor:wait;opacity:.55}.dsh-mobile-control__origin-mode input[type=radio]{flex:0 0 18px;box-sizing:border-box;width:18px;height:18px;min-height:18px;margin:0;padding:0;accent-color:var(--dsw-alias-label-primary-bluish,#2563eb)}.dsh-mobile-control__origin-mode span{min-width:0;overflow-wrap:anywhere}
 /* Base the columns on the card width, not the desktop viewport behind the popup. */
 .dsh-mobile-control__origin-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:12px}.dsh-mobile-control__origin-fields>.dsh-mobile-control__field{min-width:0;grid-column:auto;font-size:12px}.dsh-mobile-control__origin-fields>.dsh-mobile-control__field--full{grid-column:1/-1}.dsh-mobile-control__origin-fields select{box-sizing:border-box;width:100%;min-height:44px;padding:9px 10px;border:1px solid var(--dsw-alias-border-l3,#cfd5dd);border-radius:10px;background:var(--dsw-alias-bg-layer-2,#fff);color:var(--dsw-alias-label-primary,#16181d);font:16px/1.4 system-ui}.dsh-mobile-control__origin-fields select:disabled{cursor:not-allowed;opacity:.55}.dsh-mobile-control__caddy-form{display:grid;gap:12px}.dsh-mobile-control__caddy-form>.dsh-mobile-control__component-note,.dsh-mobile-control__caddy-form>.dsh-mobile-control__component-status,.dsh-mobile-control__caddy-form>.dsh-mobile-control__origin-feedback{margin:0;overflow-wrap:anywhere}.dsh-mobile-control__origin-setup .dsh-mobile-control__actions.dsh-mobile-control__caddy-actions{grid-template-columns:minmax(0,1fr);margin:0}.dsh-mobile-control__caddy-actions button{box-sizing:border-box;min-width:0;min-height:44px;padding:10px 12px;border-radius:10px;font:600 12px/1.4 system-ui;cursor:pointer}.dsh-mobile-control__origin-warning{margin:12px 0;padding:10px 12px;border-left:3px solid var(--dsw-alias-state-warn-primary,#a56810);border-radius:4px;background:var(--dsw-alias-bg-layer-1,#f3f5f8);color:var(--dsw-alias-label-primary,#384152);font-size:12px;line-height:1.6}.dsh-mobile-control__origin-feedback{font-size:12px;line-height:1.6;overflow-wrap:anywhere}.dsh-mobile-control__origin-feedback.is-error{color:var(--dsw-alias-state-error-primary,#bc3030)}.dsh-mobile-control__origin-fields input[aria-invalid=true]{border-color:var(--dsw-alias-state-error-primary,#bc3030)}.dsh-mobile-control__origin-backend{display:flex;min-width:0;flex-direction:column;align-items:stretch;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--dsw-alias-border-l2,#dbe1e8)}.dsh-mobile-control__origin-backend button{align-self:flex-start;min-height:44px}.dsh-mobile-control__self-hosted-body .is-origin{margin-top:8px}
-`;
+` + EXTENSION_RECOVERY_STYLES;
 		/** Mount the desktop control or mobile feature enhancements. */
 		function apply(ctx) {
 			ctx.effect(() => {
@@ -10086,6 +10847,11 @@ window.__ModuleLoader__.load({
 							preference: localFont.preference,
 							locale: selectedMobileControlLocale()
 						}));
+						const removeDisplayScale = ctx.slots.register({
+							name: "settings.general.item",
+							id: "dsh-mobile-display-scale",
+							order: 12
+						}, () => (0, react.createElement)(MobileDisplayScaleRow, { locale: selectedMobileControlLocale() }));
 						const removeSwitchComputer = ctx.slots.register({
 							name: "settings.general.item",
 							id: "dsh-mobile-switch-computer",
@@ -10099,6 +10865,7 @@ window.__ModuleLoader__.load({
 						return () => {
 							removeTaskNotifications();
 							removeSwitchComputer();
+							removeDisplayScale();
 							removeFontSize();
 						};
 					});