@linxin666/dsh-remote-web-ui 0.1.10 → 0.1.12

package/README.md

@@ -1,13 +1,16 @@
 # DSH Remote Web UI
 
-> 移动端远程控制：扫码配对后，用手机远程使用当前 dsh web 工作区。
+> 移动端远程控制 + 一键远程更新：扫码配对后用手机远程使用当前 dsh web 工作区；
+> 点击侧边栏更新按钮自动检查并更新 dsh-web-ui 全家桶。
 
 This repository is an external plugin package for DeepSeek Harness (DSH):
-scan-to-pair mobile remote control for the dsh web GUI. It is a single
-dual-face package — the host half owns pairing tokens, device sessions, and
-the `/api/pair` route family; the browser half renders the sidebar-foot
-entry (phone icon beside the settings button) and the pairing panel with a
-QR code, live device status, and stop/refresh/copy actions.
+scan-to-pair mobile remote control for the dsh web GUI, plus a one-click
+self-update for the dsh-web-ui family. It is a single dual-face package — the
+host half owns pairing tokens, device sessions, the `/api/pair` route family,
+and the `/api/update` surface; the browser half renders the sidebar-foot
+entries (the download trigger and the phone icon beside the settings button),
+the pairing panel with a QR code, live device status, and stop/refresh/copy
+actions, and the update panel that probes and runs the update.
 
 ## What it does
 
@@ -30,6 +33,14 @@ QR code, live device status, and stop/refresh/copy actions.
   device cookie, so the QR is the only way into a LAN-exposed dsh web.
 - **Live status**: the desktop panel mirrors the pairing state in real time
   (waiting → connected → disconnected) over an SSE stream.
+- **Remote update**: the download trigger in the sidebar foot (left of the
+  phone icon) opens the update panel, which probes the npm registry for the
+  installed `@linxin666/dsh-*` family releases. When a newer release exists
+  the panel runs the update automatically (`pnpm update` inside the owning
+  dsh profile; the loopback-only `/api/update/status` + `/api/update/run`
+  endpoints drive it) and asks for a dsh web restart to pick it up. Local
+  link installs (development mode) are detected and report the npm state
+  without updating.
 
 ## Screenshots
 

package/lib/client.js

@@ -1343,7 +1343,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/dsh-web-ui/dsh-web-ui/packages/dsh-remote-web-ui/src/client/remote.module.css.mjs
-		const css$1 = ".uw-Msq_overlay{z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.uw-Msq_mask{background:var(--dsw-alias-bg-mask-1);backdrop-filter:var(--dsw-mask-blur);position:absolute;inset:0}.uw-Msq_trigger{width:36px;height:36px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,color .12s,box-shadow .12s;display:inline-flex}.uw-Msq_trigger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.uw-Msq_trigger:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.uw-Msq_trigger:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.uw-Msq_trigger:disabled{opacity:.5;cursor:default}.uw-Msq_panel{z-index:1;box-sizing:border-box;background:var(--dsw-alias-bg-layer-2);width:560px;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary);border-radius:24px;flex-direction:column;gap:14px;padding:24px;font-size:14px;line-height:22px;display:flex;position:relative;overflow:auto}.uw-Msq_header{align-items:flex-start;gap:12px;display:flex}.uw-Msq_heading{flex:1;min-width:0}.uw-Msq_title{margin:0;font-size:18px;font-weight:600;line-height:26px}.uw-Msq_subtitle{color:var(--dsw-alias-label-secondary);margin:4px 0 0;font-size:13px}.uw-Msq_close{width:28px;height:28px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,color .12s,box-shadow .12s;display:inline-flex}.uw-Msq_close:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_close:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.uw-Msq_close:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.uw-Msq_close:disabled{opacity:.5;cursor:default}.uw-Msq_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:16px;display:flex}.uw-Msq_cardHeader{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.uw-Msq_cardTitle{font-weight:500}.uw-Msq_badge{white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:6px;min-width:0;padding:2px 10px;font-size:12px;line-height:18px;display:inline-flex}.uw-Msq_badge:before{content:\"\";background:currentColor;border-radius:50%;width:8px;height:8px}.uw-Msq_badge-waiting{color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badge-connected{color:var(--dsw-alias-state-success-primary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badge-disconnected{color:var(--dsw-alias-state-warn-primary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badge-stopped{color:var(--dsw-alias-state-error-primary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badgePublic{color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badges{flex:none;align-items:center;gap:6px;display:inline-flex}.uw-Msq_qrWrap{background:var(--dsw-alias-bg-base);border-radius:12px;justify-content:center;align-items:center;padding:12px;display:flex}.uw-Msq_qr{display:block}.uw-Msq_expired{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.uw-Msq_expiry{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px}.uw-Msq_hint{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px}.uw-Msq_link{text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-caption);font-family:var(--dsw-font-mono,ui-monospace, monospace);margin:0;font-size:12px;overflow:hidden}.uw-Msq_stoppedHint{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.uw-Msq_tunnelNote{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px}.uw-Msq_tunnelFailed{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.uw-Msq_actions{gap:8px;display:flex}.uw-Msq_action{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-button-elevated-fill);height:34px;color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:13px;transition:background-color .12s,border-color .12s,box-shadow .12s;display:inline-flex}.uw-Msq_action:hover:not(:disabled){background:var(--dsw-alias-button-floating-hover)}.uw-Msq_action:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.uw-Msq_action:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.uw-Msq_action:disabled{opacity:.5;cursor:default}.uw-Msq_banner{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:16px;padding:16px}.uw-Msq_bannerTitle{color:var(--dsw-alias-state-warn-primary);margin:0;font-weight:500}.uw-Msq_bannerHint{color:var(--dsw-alias-label-secondary);margin:6px 0 0;font-size:13px}.uw-Msq_notice{z-index:2000;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);max-width:min(420px,100vw - 32px);box-shadow:var(--dsw-shadow-lv3);border-radius:12px;padding:12px 16px;position:fixed;top:16px;left:50%;transform:translate(-50%)}.uw-Msq_noticeTitle{color:var(--dsw-alias-state-error-primary);margin:0;font-weight:500}.uw-Msq_noticeDetail{color:var(--dsw-alias-label-secondary);margin:4px 0 0;font-size:13px}.uw-Msq_addresses{border:none;margin:12px 0 0;padding:0}.uw-Msq_addresses legend{color:var(--dsw-alias-label-secondary);padding:0;font-size:13px}.uw-Msq_address{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px;align-items:center;gap:8px;margin-top:6px;padding:4px 6px;font-size:13px;transition:background-color .12s;display:flex}.uw-Msq_address:hover{background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_address input:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);border-radius:50%;outline:none}.uw-Msq_addressValue{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--dsw-alias-label-secondary);flex:1;font-size:12px;overflow:hidden}.uw-Msq_addressHint{color:var(--dsw-alias-label-tertiary);margin:6px 0 0;font-size:12px}@media (prefers-reduced-motion:reduce){.uw-Msq_trigger,.uw-Msq_close,.uw-Msq_action,.uw-Msq_address{transition:none}}";
+		const css$1 = ".uw-Msq_overlay{z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.uw-Msq_mask{background:var(--dsw-alias-bg-mask-1);backdrop-filter:var(--dsw-mask-blur);position:absolute;inset:0}.uw-Msq_trigger{width:36px;height:36px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,color .12s,box-shadow .12s;display:inline-flex}.uw-Msq_trigger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.uw-Msq_trigger:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.uw-Msq_trigger:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.uw-Msq_trigger:disabled{opacity:.5;cursor:default}.uw-Msq_panel{z-index:1;box-sizing:border-box;background:var(--dsw-alias-bg-layer-2);width:560px;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);box-shadow:var(--dsw-shadow-lv3);color:var(--dsw-alias-label-primary);border-radius:24px;flex-direction:column;gap:14px;padding:24px;font-size:14px;line-height:22px;display:flex;position:relative;overflow:auto}.uw-Msq_header{align-items:flex-start;gap:12px;display:flex}.uw-Msq_heading{flex:1;min-width:0}.uw-Msq_title{margin:0;font-size:18px;font-weight:600;line-height:26px}.uw-Msq_subtitle{color:var(--dsw-alias-label-secondary);margin:4px 0 0;font-size:13px}.uw-Msq_close{width:28px;height:28px;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .12s,color .12s,box-shadow .12s;display:inline-flex}.uw-Msq_close:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_close:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.uw-Msq_close:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.uw-Msq_close:disabled{opacity:.5;cursor:default}.uw-Msq_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:16px;display:flex}.uw-Msq_cardHeader{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.uw-Msq_cardTitle{font-weight:500}.uw-Msq_badge{white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:6px;min-width:0;padding:2px 10px;font-size:12px;line-height:18px;display:inline-flex}.uw-Msq_badge:before{content:\"\";background:currentColor;border-radius:50%;width:8px;height:8px}.uw-Msq_badge-waiting{color:var(--dsw-alias-label-secondary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badge-connected{color:var(--dsw-alias-state-success-primary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badge-disconnected{color:var(--dsw-alias-state-warn-primary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badge-stopped{color:var(--dsw-alias-state-error-primary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badgePublic{color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_badges{flex:none;align-items:center;gap:6px;display:inline-flex}.uw-Msq_qrWrap{background:var(--dsw-alias-bg-base);border-radius:12px;justify-content:center;align-items:center;padding:12px;display:flex}.uw-Msq_qr{display:block}.uw-Msq_expired{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.uw-Msq_expiry{color:var(--dsw-alias-label-secondary);margin:0;font-size:12px}.uw-Msq_hint{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px}.uw-Msq_link{text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-caption);font-family:var(--dsw-font-mono,ui-monospace, monospace);margin:0;font-size:12px;overflow:hidden}.uw-Msq_stoppedHint{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.uw-Msq_tunnelNote{color:var(--dsw-alias-label-secondary);margin:0;font-size:13px}.uw-Msq_tunnelFailed{color:var(--dsw-alias-state-error-primary);margin:0;font-size:13px}.uw-Msq_actions{gap:8px;display:flex}.uw-Msq_action{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-button-elevated-fill);height:34px;color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:13px;transition:background-color .12s,border-color .12s,box-shadow .12s;display:inline-flex}.uw-Msq_action:hover:not(:disabled){background:var(--dsw-alias-button-floating-hover)}.uw-Msq_action:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.uw-Msq_action:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);outline:none}.uw-Msq_action:disabled{opacity:.5;cursor:default}.uw-Msq_banner{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:16px;padding:16px}.uw-Msq_bannerTitle{color:var(--dsw-alias-state-warn-primary);margin:0;font-weight:500}.uw-Msq_bannerHint{color:var(--dsw-alias-label-secondary);margin:6px 0 0;font-size:13px}.uw-Msq_notice{z-index:2000;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);max-width:min(420px,100vw - 32px);box-shadow:var(--dsw-shadow-lv3);border-radius:12px;padding:12px 16px;position:fixed;top:16px;left:50%;transform:translate(-50%)}.uw-Msq_noticeTitle{color:var(--dsw-alias-state-error-primary);margin:0;font-weight:500}.uw-Msq_noticeDetail{color:var(--dsw-alias-label-secondary);margin:4px 0 0;font-size:13px}.uw-Msq_addresses{border:none;margin:12px 0 0;padding:0}.uw-Msq_addresses legend{color:var(--dsw-alias-label-secondary);padding:0;font-size:13px}.uw-Msq_address{color:var(--dsw-alias-label-primary);font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px;align-items:center;gap:8px;margin-top:6px;padding:4px 6px;font-size:13px;transition:background-color .12s;display:flex}.uw-Msq_address:hover{background:var(--dsw-alias-interactive-bg-hover)}.uw-Msq_address input:focus-visible{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-2), 0 0 0 4px var(--dsw-alias-brand-primary);border-radius:50%;outline:none}.uw-Msq_addressValue{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--dsw-alias-label-secondary);flex:1;font-size:12px;overflow:hidden}.uw-Msq_addressHint{color:var(--dsw-alias-label-tertiary);margin:6px 0 0;font-size:12px}@media (prefers-reduced-motion:reduce){.uw-Msq_trigger,.uw-Msq_close,.uw-Msq_action,.uw-Msq_address{transition:none}}.uw-Msq_entryRow{flex:none;align-items:center;gap:6px;display:flex}.uw-Msq_entryRow[data-rail=rail]{flex-direction:column-reverse;gap:4px}.uw-Msq_updateStatus{margin:0;font-weight:600}.uw-Msq_updateDetail{color:var(--dsw-alias-label-secondary);margin:6px 0 0;font-size:13px}.uw-Msq_updateError{color:var(--dsw-alias-text-danger,var(--dsw-alias-label-primary));margin:0;font-weight:600}.uw-Msq_updateOutput{background:var(--dsw-alias-bg-layer-1);max-height:180px;color:var(--dsw-alias-label-secondary);white-space:pre-wrap;word-break:break-all;border-radius:10px;margin:10px 0 0;padding:10px 12px;font-size:12px;line-height:18px;overflow:auto}.uw-Msq_updateList{flex-direction:column;gap:6px;margin:12px 0 0;padding:0;list-style:none;display:flex}.uw-Msq_updateListItem{justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;display:flex}.uw-Msq_updateListName{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--dsw-alias-label-primary);overflow:hidden}.uw-Msq_updateListVersions{color:var(--dsw-alias-label-secondary);font-variant-numeric:tabular-nums;flex:none}.uw-Msq_updateActions{justify-content:flex-end;margin-top:16px;display:flex}.uw-Msq_updateRetry{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);cursor:pointer;border:none;border-radius:10px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;transition:background-color .12s,color .12s;display:inline-flex}.uw-Msq_updateRetry:hover{background:var(--dsw-alias-interactive-bg-active)}@media (prefers-reduced-motion:reduce){.uw-Msq_updateRetry{transition:none}}";
 		const tagId$1 = "@linxin666/dsh-remote-web-ui/remote.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
 			const tag = document.createElement("style");
@@ -1373,6 +1373,7 @@ window.__ModuleLoader__.load({
 			"cardHeader": "uw-Msq_cardHeader",
 			"cardTitle": "uw-Msq_cardTitle",
 			"close": "uw-Msq_close",
+			"entryRow": "uw-Msq_entryRow",
 			"expired": "uw-Msq_expired",
 			"expiry": "uw-Msq_expiry",
 			"header": "uw-Msq_header",
@@ -1392,7 +1393,17 @@ window.__ModuleLoader__.load({
 			"title": "uw-Msq_title",
 			"trigger": "uw-Msq_trigger",
 			"tunnelFailed": "uw-Msq_tunnelFailed",
-			"tunnelNote": "uw-Msq_tunnelNote"
+			"tunnelNote": "uw-Msq_tunnelNote",
+			"updateActions": "uw-Msq_updateActions",
+			"updateDetail": "uw-Msq_updateDetail",
+			"updateError": "uw-Msq_updateError",
+			"updateList": "uw-Msq_updateList",
+			"updateListItem": "uw-Msq_updateListItem",
+			"updateListName": "uw-Msq_updateListName",
+			"updateListVersions": "uw-Msq_updateListVersions",
+			"updateOutput": "uw-Msq_updateOutput",
+			"updateRetry": "uw-Msq_updateRetry",
+			"updateStatus": "uw-Msq_updateStatus"
 		};
 		//#endregion
 		//#region src/client/RemotePanel.tsx
@@ -1638,14 +1649,329 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/update-api.ts
+		/**
+		* Probe the update status: install mode, owning profile, and the
+		* current-vs-latest comparison for every family package.
+		* @returns the status snapshot.
+		*/
+		async function fetchUpdateStatus() {
+			const response = await fetch("/api/update/status");
+			if (!response.ok) throw new Error("update status unavailable");
+			return await response.json();
+		}
+		/**
+		* Run the update (pnpm update in the owning profile). Blocks until pnpm
+		* exits — the panel shows an in-flight state meanwhile.
+		* @returns the run outcome.
+		*/
+		async function runUpdate() {
+			const response = await fetch("/api/update/run", { method: "POST" });
+			if (!response.ok) throw new Error("update run unavailable");
+			return await response.json();
+		}
+		//#endregion
+		//#region src/client/UpdatePanel.tsx
+		/** The anchor package name (aggregate first) for copy purposes. */
+		function anchorName(status) {
+			return status?.anchor ?? status?.packages[0]?.name;
+		}
+		/** The latest npm release of the anchor, for reference copy. */
+		function anchorLatest(status) {
+			return status?.packages[0]?.latest;
+		}
+		/**
+		* Render the update panel.
+		* @param props - copy, view state, and actions.
+		* @returns the panel element tree.
+		*/
+		function UpdatePanel({ t, view, onClose, onRecheck }) {
+			const status = view.kind === "result" || view.kind === "updating" ? view.status : void 0;
+			const title = view.kind === "done" && view.result.ok ? t("update.done") : t("update.title");
+			const subtitle = subtitleOf(t, view);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: remote_module_css_default.panel,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": title,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: remote_module_css_default.header,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: remote_module_css_default.heading,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+								className: remote_module_css_default.title,
+								children: title
+							}), subtitle !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: remote_module_css_default.subtitle,
+								children: subtitle
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: remote_module_css_default.close,
+							"aria-label": t("update.close"),
+							onClick: onClose,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconCloseOutline16, {})
+						})]
+					}),
+					view.kind === "checking" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: remote_module_css_default.updateStatus,
+						children: t("update.checking")
+					}),
+					view.kind === "result" && status !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResultBody, {
+						t,
+						status
+					}),
+					view.kind === "updating" && status !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: remote_module_css_default.updateStatus,
+						children: t("update.updating", {
+							name: anchorName(status) ?? "",
+							version: anchorLatest(status) ?? ""
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackageList, { status })] }),
+					view.kind === "done" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DoneBody, {
+						t,
+						result: view.result
+					}),
+					view.kind === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: remote_module_css_default.updateError,
+						children: view.message
+					}), view.detail !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+						className: remote_module_css_default.updateOutput,
+						children: view.detail
+					})] }),
+					(view.kind === "done" || view.kind === "error") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: remote_module_css_default.updateActions,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: remote_module_css_default.updateRetry,
+							onClick: onRecheck,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconRefreshOutline16, {}),
+								" ",
+								t("update.retry")
+							]
+						})
+					})
+				]
+			});
+		}
+		/** The subtitle copy per view state (absent on plain results). */
+		function subtitleOf(t, view) {
+			switch (view.kind) {
+				case "checking": return t("update.checking");
+				case "updating": return t("update.updatingTitle");
+				case "result": return;
+				case "done": return view.result.ok ? t("update.doneDetail") : t("update.error");
+				case "error": return;
+			}
+		}
+		/** The checked result body: mode banner + version list. */
+		function ResultBody({ t, status }) {
+			const anchor = anchorName(status);
+			const latest = anchorLatest(status);
+			if (status.mode === "link") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateStatus,
+				children: t("update.linkMode")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateDetail,
+				children: t("update.linkModeDetail", { version: latest ?? "-" })
+			})] });
+			if (status.mode === "missing") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateStatus,
+				children: t("update.missing")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateDetail,
+				children: t("update.missingDetail")
+			})] });
+			if (status.error === "registry-unreachable") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateStatus,
+				children: t("update.offline")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateDetail,
+				children: t("update.offlineDetail")
+			})] });
+			if (status.outdated) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateStatus,
+				children: t("update.found")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateDetail,
+				children: anchor !== void 0 ? t("update.foundDetail", {
+					name: anchor,
+					version: latest ?? ""
+				}) : ""
+			})] });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: remote_module_css_default.updateStatus,
+					children: t("update.upToDate")
+				}),
+				anchor !== void 0 && latest !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: remote_module_css_default.updateDetail,
+					children: t("update.upToDateDetail", {
+						name: anchor,
+						version: latest
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackageList, { status })
+			] });
+		}
+		/** The per-package current → latest comparison list. */
+		function PackageList({ status }) {
+			if (status.packages.length === 0) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: remote_module_css_default.updateList,
+				children: status.packages.map((packageStatus) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: remote_module_css_default.updateListItem,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: remote_module_css_default.updateListName,
+						children: packageStatus.name
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: remote_module_css_default.updateListVersions,
+						children: [packageStatus.current, packageStatus.latest !== void 0 && packageStatus.latest !== packageStatus.current && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" → ", packageStatus.latest] })]
+					})]
+				}, packageStatus.name))
+			});
+		}
+		/** The outcome body: success + restart hint, or the translated failure. */
+		function DoneBody({ t, result }) {
+			if (result.ok) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateDetail,
+				children: t("update.doneDetail")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateDetail,
+				children: t("update.restartHint")
+			})] });
+			const message = errorMessageOf(t, result);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: remote_module_css_default.updateError,
+				children: message
+			}), result.output.trim() !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				className: remote_module_css_default.updateOutput,
+				children: result.output.trim()
+			})] });
+		}
+		/** Translate a structured failure code; fall back to the raw message. */
+		function errorMessageOf(t, result) {
+			switch (result.errorCode) {
+				case "pnpm-missing": return t("update.error.pnpmMissing");
+				case "timeout": return t("update.error.timeout");
+				case "not-found": return t("update.error.notFound");
+				case "link": return t("update.error.link");
+				case "pnpm-failed": return t("update.error.pnpmFailed", { code: String(result.exitCode ?? "?") });
+				default: return result.error ?? t("update.error.unknown");
+			}
+		}
+		//#endregion
+		//#region src/client/UpdateEntry.tsx
+		/**
+		* The sidebar update seat: the download trigger beside the remote-control
+		* trigger plus the update panel modal. Owns the flow — probe the registry
+		* on open, auto-run the update when a newer release exists, report the
+		* outcome (restart hint on success, translated failure on error).
+		* Component-local state per the client stack rules.
+		*/
+		/**
+		* Render the update trigger and panel.
+		* @param props - column state and locale seat.
+		* @returns the entry element tree.
+		*/
+		function UpdateEntry({ wide, t }) {
+			const [open, setOpen] = (0, react.useState)(false);
+			const [view, setView] = (0, react.useState)({ kind: "checking" });
+			const runToken = (0, react.useRef)(0);
+			const check = (0, react.useCallback)(async () => {
+				setView({ kind: "checking" });
+				let status;
+				try {
+					status = await fetchUpdateStatus();
+				} catch {
+					setView({
+						kind: "error",
+						message: t("update.offline"),
+						detail: t("update.offlineDetail")
+					});
+					return;
+				}
+				if (status.error === "registry-unreachable") {
+					setView({
+						kind: "result",
+						status
+					});
+					return;
+				}
+				setView({
+					kind: "result",
+					status
+				});
+				if (status.mode !== "npm" || !status.outdated) return;
+				setView({
+					kind: "updating",
+					status
+				});
+				const token = ++runToken.current;
+				try {
+					const result = await runUpdate();
+					if (token !== runToken.current) return;
+					setView({
+						kind: "done",
+						result
+					});
+				} catch {
+					if (token !== runToken.current) return;
+					setView({
+						kind: "error",
+						message: t("update.error"),
+						detail: t("update.offlineDetail")
+					});
+				}
+			}, [t]);
+			const openPanel = (0, react.useCallback)(() => {
+				setOpen(true);
+				check();
+			}, [check]);
+			const closePanel = (0, react.useCallback)(() => {
+				runToken.current++;
+				setOpen(false);
+			}, []);
+			(0, react.useEffect)(() => () => {
+				runToken.current++;
+			}, []);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: remote_module_css_default.trigger,
+				"data-wide": wide ? void 0 : "rail",
+				"aria-label": t("update.label"),
+				title: t("update.label"),
+				onClick: openPanel,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDownloadOutline16, { size: wide ? 16 : 18 })
+			}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: remote_module_css_default.overlay,
+				role: "presentation",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: remote_module_css_default.mask,
+					"aria-hidden": "true",
+					onClick: closePanel
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UpdatePanel, {
+					t,
+					view,
+					onClose: closePanel,
+					onRecheck: () => {
+						check();
+					}
+				})]
+			}), document.body)] });
+		}
+		//#endregion
 		//#region src/client/RemoteEntry.tsx
 		/**
-		* The sidebar remote-control seat: the phone-icon trigger beside the
-		* settings button plus the pairing panel modal. Owns the panel behavior —
-		* token minting on open, the status SSE subscription, stop/refresh/copy —
-		* and renders the pure {@link RemotePanel} body. Component-local state per
-		* the client stack rules: nothing here survives remounts or crosses
-		* entries.
+		* The sidebar remote-control seat: the update trigger plus the phone-icon
+		* trigger beside the settings button, and the pairing panel modal. Owns the
+		* panel behavior — token minting on open, the status SSE subscription,
+		* stop/refresh/copy — and renders the pure {@link RemotePanel} body. The
+		* update seat (the dsh-web-ui self-update flow) rides the same footer row,
+		* rendered by {@link UpdateEntry}. Component-local state per the client
+		* stack rules: nothing here survives remounts or crosses entries.
 		*/
 		/** Apply one status frame onto the current ready state. */
 		function mergeFrame(state, frame) {
@@ -1769,10 +2095,17 @@ window.__ModuleLoader__.load({
 					}, 1500);
 				});
 			}, [state]);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipAnchor, {
-				wide,
-				label: t("entry.label"),
-				onClick: openPanel
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: remote_module_css_default.entryRow,
+				"data-rail": wide ? void 0 : "rail",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UpdateEntry, {
+					wide,
+					t
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipAnchor, {
+					wide,
+					label: t("entry.label"),
+					onClick: openPanel
+				})]
 			}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: remote_module_css_default.overlay,
 				role: "presentation",
@@ -2601,7 +2934,35 @@ window.__ModuleLoader__.load({
 			"settings.discard": "放弃",
 			"settings.unsaved": "未保存",
 			"settings.saveFailed": "部署未接受这些值，已保留供你修改。",
-			"settings.invalidNumber": "请输入数字，留空则使用默认值。"
+			"settings.invalidNumber": "请输入数字，留空则使用默认值。",
+			"update.label": "检查更新",
+			"update.title": "检查更新",
+			"update.checking": "正在检查远程仓库中的新版本…",
+			"update.upToDate": "当前已是最新版本",
+			"update.upToDateDetail": "{name} 已是最新版本 v{version}。",
+			"update.found": "发现新版本",
+			"update.foundDetail": "{name} 有新版本 v{version}，正在自动更新…",
+			"update.updating": "正在更新 {name} 至 v{version}，可能需要 1-2 分钟…",
+			"update.updatingTitle": "正在自动更新…",
+			"update.done": "更新完成",
+			"update.doneDetail": "所有组件已更新到最新版本。",
+			"update.restartHint": "请重启 dsh web 使新版本生效：在终端按 Ctrl+C 停止后重新运行 dsh web。",
+			"update.linkMode": "当前为本地开发模式",
+			"update.linkModeDetail": "dsh-web-ui 通过本地链接安装（开发模式），无法自动更新。npm 上最新版本：{version}。请在仓库中执行 git pull 更新。",
+			"update.missing": "未找到 dsh-web-ui 安装",
+			"update.missingDetail": "无法定位已安装的 dsh-web-ui 聚合包。请先运行 dsh plugin --profile <profile> add @linxin666/dsh-web-ui-all。",
+			"update.offline": "无法连接更新源",
+			"update.offlineDetail": "网络不可用或更新服务异常，请稍后重试。",
+			"update.error": "更新失败",
+			"update.packages": "组件版本",
+			"update.retry": "重新检查",
+			"update.close": "关闭更新面板",
+			"update.error.pnpmMissing": "未找到 pnpm，请先安装 pnpm（brew install pnpm 或 corepack enable）。",
+			"update.error.timeout": "更新超时，已终止安装进程，请重试。",
+			"update.error.notFound": "未找到 dsh-web-ui 聚合包安装，无法更新。",
+			"update.error.link": "当前为本地开发模式（链接安装），无法自动更新。",
+			"update.error.pnpmFailed": "更新执行失败（pnpm 退出码 {code}），详见下方输出。",
+			"update.error.unknown": "更新失败，请重试。"
 		};
 		/** English dictionary, checked complete against the zh key set. */
 		const en = {
@@ -2671,7 +3032,35 @@ window.__ModuleLoader__.load({
 			"settings.discard": "Discard",
 			"settings.unsaved": "Unsaved",
 			"settings.saveFailed": "The deployment did not accept these values; they were left for you to correct.",
-			"settings.invalidNumber": "Enter a number, or leave blank to use the default."
+			"settings.invalidNumber": "Enter a number, or leave blank to use the default.",
+			"update.label": "Check for updates",
+			"update.title": "Check for updates",
+			"update.checking": "Checking the remote repository for newer releases…",
+			"update.upToDate": "Everything is up to date",
+			"update.upToDateDetail": "{name} is at the latest version v{version}.",
+			"update.found": "A new version is available",
+			"update.foundDetail": "{name} has a newer release v{version}; updating automatically…",
+			"update.updating": "Updating {name} to v{version}; this may take 1-2 minutes…",
+			"update.updatingTitle": "Updating automatically…",
+			"update.done": "Update complete",
+			"update.doneDetail": "All components are up to date.",
+			"update.restartHint": "Restart dsh web for the new version to take effect: stop it with Ctrl+C in the terminal, then run dsh web again.",
+			"update.linkMode": "Local development mode",
+			"update.linkModeDetail": "dsh-web-ui is installed via a local link (development mode) and cannot be updated remotely. Latest npm release: {version}. Run git pull in the repository to update.",
+			"update.missing": "dsh-web-ui not found",
+			"update.missingDetail": "Could not locate the installed dsh-web-ui aggregate package. Install it with: dsh plugin --profile <profile> add @linxin666/dsh-web-ui-all",
+			"update.offline": "Cannot reach the update source",
+			"update.offlineDetail": "The network is unavailable or the update service is failing; try again later.",
+			"update.error": "Update failed",
+			"update.packages": "Component versions",
+			"update.retry": "Check again",
+			"update.close": "Close update panel",
+			"update.error.pnpmMissing": "pnpm was not found. Install it first (brew install pnpm or corepack enable).",
+			"update.error.timeout": "The update timed out and the install process was killed; try again.",
+			"update.error.notFound": "The dsh-web-ui aggregate package is not installed; nothing to update.",
+			"update.error.link": "Local development mode (link install) — automatic update is unavailable.",
+			"update.error.pnpmFailed": "The update failed (pnpm exited with code {code}); see the output below.",
+			"update.error.unknown": "Update failed; try again."
 		};
 		//#endregion
 		//#region src/client/deep-link.ts
@@ -2793,7 +3182,7 @@ window.__ModuleLoader__.load({
 				en
 			}), "remote-web-ui: dictionaries");
 			const t = ctx.locale.bind(NS);
-			const settingsScope = ctx.settingsScope.bind({ namespace: REMOTE_WEB_UI_NS });
+			const settingsScope = (ctx.get("webUiSettings") ?? ctx.settingsScope).bind({ namespace: REMOTE_WEB_UI_NS });
 			const enabled = () => {
 				const snapshot = settingsScope.getSnapshot();
 				return snapshot.status === "ready" ? snapshot.value?.enabled ?? true : snapshot.status === "unavailable";