@huaqiu/dsh-tool-plugin-update 0.5.21 → 0.6.1

package/lib/client.js

@@ -64,15 +64,40 @@ window.__ModuleLoader__.load({
 				applyBadge
 			};
 		}
-		/** Re-insert the entry after the New Session row (before the browser region). */
+		/**
+		* Re-insert the entry after the New Session row, in the family's intended
+		* order.
+		*
+		* The `familySelectors` array order is the single source of truth for visual
+		* order, so the rendered order is stable regardless of which plugin mounts
+		* first or of observer callback order — a re-render can never swap two rows.
+		* (Earlier builds used the `position: 'before' | 'after'` convention, which
+		* clustered rows by mount order and let a late-mounting `before` row steal the
+		* lead. The array order supersedes it; `position` remains only as a fallback
+		* for a row whose selector is absent from the family list.)
+		*/
 		function placeEntry(root, entry, options) {
 			const button = newSessionButton(root);
 			if (button === void 0) return false;
 			if (entry.parentElement !== root) {
 				const row = button.closest("[class*=\"logoRow\"]");
 				const base = row !== null && row.parentElement === root ? row : button;
-				const family = Array.from(root.children).filter((el) => el instanceof HTMLElement && el.matches(options.familySelectors.join(", ")));
-				const anchor = options.position === "before" ? family.length > 0 ? family[0] : base.nextElementSibling : family.length > 0 ? family[family.length - 1].nextElementSibling : base.nextElementSibling;
+				const order = options.familySelectors;
+				const present = Array.from(root.children).filter((el) => el instanceof HTMLElement && el.matches(order.join(", "))).map((el) => ({
+					el,
+					idx: order.findIndex((sel) => el.matches(sel))
+				}));
+				const selfIndex = order.indexOf(options.rowSelector);
+				let anchor;
+				if (selfIndex === -1) anchor = options.position === "before" ? present.length > 0 ? present[0].el : base.nextElementSibling : present.length > 0 ? present[present.length - 1].el.nextElementSibling : base.nextElementSibling;
+				else {
+					const later = present.find((member) => member.idx > selfIndex);
+					if (later !== void 0) anchor = later.el;
+					else {
+						const earlier = [...present].reverse().find((member) => member.idx < selfIndex);
+						anchor = earlier !== void 0 ? earlier.el.nextElementSibling : base.nextElementSibling;
+					}
+				}
 				root.insertBefore(entry, anchor ?? null);
 			}
 			return true;
@@ -158,10 +183,11 @@ window.__ModuleLoader__.load({
 		* family row means adding its selector here (and to no plugin-local list).
 		*/
 		const HUAQIU_SIDEBAR_ENTRY_FAMILY = [
+			"[data-hq-plugin-update-entry]",
 			"[data-hqcg-footprint-entry]",
 			"[data-hqcg-symbol-entry]",
 			"[data-hqcg-schematic-entry]",
-			"[data-hq-plugin-update-entry]"
+			"[data-hq-dummy-entry]"
 		];
 		/**
 		* Read the host UI language from `<html lang>`.
@@ -261,6 +287,13 @@ window.__ModuleLoader__.load({
 				body: JSON.stringify({ setVersion })
 			});
 		}
+		/** POST ignore for the current offer (set-scoped, persists across restarts). */
+		function ignoreOffer(setVersion) {
+			return request("/ignore", {
+				method: "POST",
+				body: JSON.stringify({ setVersion })
+			});
+		}
 		/** POST unignore for the set version (reverses an ignore). */
 		function unignoreOffer(setVersion) {
 			return request("/unignore", {
@@ -273,15 +306,27 @@ window.__ModuleLoader__.load({
 				entryLabel: "插件更新",
 				entryTooltip: "查看可用的插件更新",
 				viewTitle: "插件更新",
+				viewIntro: "检查并安装可用的插件更新",
+				viewInfo: "在这里查看插件集的更新。标注为「被阻止」的插件因主机或 HQ Edge 版本不兼容而无法安装；已是最新的插件无需操作。",
 				refresh: "刷新",
 				close: "关闭",
+				loading: "正在读取插件更新…",
 				empty: "没有可用的插件更新",
-				checkFailed: "检查更新失败",
-				manifestVersion: "插件集",
-				ignoredOffer: "已忽略当前插件集更新",
-				unignore: "恢复提醒",
+				checkFailed: "检查更新失败，请重试",
 				installAll: (count) => `安装 ${count} 项更新`,
-				installing: "安装中…（DSH 将自动重启）",
+				installOne: "安装",
+				installing: "正在安装…（DSH 将自动重启）",
+				nothingToInstall: "暂无可安装的更新",
+				ignore: "忽略此版本",
+				unignore: "恢复提醒",
+				ignoredOffer: "已忽略当前插件集更新",
+				groupCount: (count) => `${count} 个插件`,
+				group: {
+					actionable: "待处理",
+					blocked: "无法安装",
+					ignored: "已忽略",
+					current: "已是最新"
+				},
 				state: {
 					current: "当前",
 					update: "可更新",
@@ -296,14 +341,16 @@ window.__ModuleLoader__.load({
 				},
 				runtime: {
 					title: "HQ Edge 运行时",
-					updateAvailable: (version) => `发现新版本 ${version}`,
-					current: (version) => `当前版本 ${version}`,
+					current: "当前版本",
+					latest: "最新版本",
+					set: "发布插件集",
+					checkedAt: "上次检查",
+					source: "更新源",
 					unknown: "版本未知",
 					notConfigured: "未配置更新源",
 					note: "运行时更新由 EDA 安装器处理"
 				},
 				lastError: "上次检查失败",
-				fetchedAt: "检查时间",
 				installError: "安装失败",
 				installSuccess: "更新已安装，正在重启 DSH…"
 			},
@@ -311,15 +358,27 @@ window.__ModuleLoader__.load({
 				entryLabel: "Plugin Updates",
 				entryTooltip: "Review available plugin updates",
 				viewTitle: "Plugin Updates",
+				viewIntro: "Check for and install available plugin updates",
+				viewInfo: "Review the plugin set updates here. A plugin marked Blocked cannot be installed because its host or HQ Edge version is incompatible; a plugin marked Current needs no action.",
 				refresh: "Refresh",
 				close: "Close",
+				loading: "Reading plugin updates…",
 				empty: "No plugin updates available",
-				checkFailed: "Failed to check for updates",
-				manifestVersion: "Plugin set",
-				ignoredOffer: "The current plugin-set update is ignored",
-				unignore: "Show again",
+				checkFailed: "Failed to check for updates — please retry",
 				installAll: (count) => `Install ${count} update${count === 1 ? "" : "s"}`,
+				installOne: "Install",
 				installing: "Installing… (DSH will restart)",
+				nothingToInstall: "Nothing to install right now",
+				ignore: "Ignore this release",
+				unignore: "Show again",
+				ignoredOffer: "The current plugin-set update is ignored",
+				groupCount: (count) => `${count} plugin${count === 1 ? "" : "s"}`,
+				group: {
+					actionable: "Actionable",
+					blocked: "Blocked",
+					ignored: "Ignored",
+					current: "Up to date"
+				},
 				state: {
 					current: "Current",
 					update: "Update",
@@ -334,44 +393,146 @@ window.__ModuleLoader__.load({
 				},
 				runtime: {
 					title: "HQ Edge Runtime",
-					updateAvailable: (version) => `New version ${version} available`,
-					current: (version) => `Current version ${version}`,
+					current: "Current version",
+					latest: "Latest version",
+					set: "Release set",
+					checkedAt: "Last checked",
+					source: "Update source",
 					unknown: "Version unknown",
 					notConfigured: "No update source configured",
 					note: "Runtime updates are handled by the EDA installer"
 				},
 				lastError: "Last check failed",
-				fetchedAt: "Checked at",
 				installError: "Install failed",
 				installSuccess: "Update installed — restarting DSH…"
 			}
 		};
 		//#endregion
+		//#region src/client/icons.ts
+		/**
+		* Official DSH icon artwork, inlined as SVG strings.
+		*
+		* The paths are copied verbatim from `@deepseek-ai/dsh-client-ui-primitives`
+		* (deepseek-harness `packages/client/ui-primitives/src/icons/index.tsx`) so the
+		* Huaqiu plugin-update view draws the same glyphs as the shell's own plugin
+		* manager. Only `currentColor` is used, so every glyph inherits the label ink
+		* of whatever surface it sits on — the same contract the primitives rely on.
+		*
+		* The plugin renders plain DOM (never a React tree), so the artwork is exposed
+		* as markup strings rather than components.
+		*
+		* @module
+		*/
+		/** Stroke width of the primitives' "Regular" weight. */
+		const REGULAR = 1;
+		/** Stroke width of the primitives' "Medium" weight. */
+		const MEDIUM = 1.3;
+		/** Wrap paths in a 16×16 stroked glyph. */
+		function glyph(size, strokeWidth, paths, viewBox = "0 0 16 16") {
+			return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${viewBox}" fill="none" aria-hidden="true" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${paths.map((d) => `<path d="${d}" stroke="currentColor" />`).join("")}</svg>`;
+		}
+		/** Wrap fill-only paths (the check glyph) in their own viewBox. */
+		function fillGlyph(size, paths, viewBox) {
+			return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${viewBox}" fill="none" aria-hidden="true">${paths.map((d) => `<path d="${d}" fill="currentColor" />`).join("")}</svg>`;
+		}
+		/**
+		* The plugin pinwheel — the glyph the shell's own Plugins sidebar entry uses
+		* (`IconPluginPinwheelOutlineRegular`). Shared by the sidebar row and the
+		* package cards so both read as the same feature.
+		*/
+		const PLUGIN_ICON = (size = 16) => glyph(size, REGULAR, [
+			"M7.84457 5.06199C11.6605 4.93876 14.7962 6.14848 14.8484 7.76397C14.8875 8.97461 13.1838 10.0696 10.7215 10.5942",
+			"M5.12742 8.07731C5.00419 4.26138 6.21391 1.12568 7.8294 1.07351C9.04004 1.03441 10.135 2.73808 10.6596 5.20037",
+			"M8.02457 10.6802C4.20865 10.8034 1.07294 9.5937 1.02077 7.97821C0.981678 6.76758 2.68535 5.67262 5.14763 5.14798",
+			"M10.7476 7.89535C10.8708 11.7113 9.66109 14.847 8.0456 14.8991C6.83496 14.9382 5.74 13.2346 5.21536 10.7723"
+		]);
+		/** The toolbar's refresh action (`IconRefreshOutlineRegular`). */
+		const REFRESH_ICON = (size = 16) => glyph(size, REGULAR, ["M14.5001 8C14.5 9.28552 14.1188 10.5422 13.4045 11.611C12.6903 12.6799 11.6752 13.5129 10.4875 14.0049C9.29982 14.4968 7.99295 14.6255 6.73212 14.3747C5.4713 14.124 4.31314 13.505 3.4041 12.596C2.49514 11.687 1.87614 10.5288 1.62537 9.26798C1.37459 8.00716 1.50331 6.70028 1.99525 5.51261C2.48719 4.32494 3.32025 3.30981 4.3891 2.59557C5.45795 1.88134 6.71458 1.50008 8.0001 1.5C9.9001 1.5 11.7001 2.3 13.0001 3.6L14.5001 5.1", "M14.4999 1.5V5.1H10.8999"]);
+		/** The panel's close action (`IconCloseOutlineMedium`). */
+		const CLOSE_ICON = (size = 16) => glyph(size, MEDIUM, ["M2.5 2.5L13.5 13.5", "M13.5 2.5L2.5 13.5"]);
+		/** The notice glyph (`IconWarningOutlineRegular`). */
+		const WARNING_ICON = (size = 16) => glyph(size, REGULAR, [
+			"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z",
+			"M8 4.29199V9.79199",
+			"M8 10.708V11.708"
+		]);
+		/** The settled-state glyph (`IconCheckCircleFillRegular`). */
+		const CHECK_CIRCLE_ICON = (size = 16) => fillGlyph(size, ["M28.1936 14.6936L19.8066 23.0806C19.2373 23.65 18.7159 24.1742 18.24 24.5571C17.7389 24.9602 17.1365 25.3359 16.3657 25.458C15.9581 25.5225 15.5428 25.5225 15.1353 25.458C14.3645 25.3359 13.7621 24.9602 13.261 24.5571C12.7851 24.1742 12.2637 23.65 11.6943 23.0806L7.80737 19.1936L10.1936 16.8074L14.0806 20.6943C14.7033 21.317 15.0763 21.6873 15.377 21.9292C15.6523 22.1507 15.7109 22.1325 15.6626 22.1248C15.7208 22.1339 15.7802 22.1339 15.8384 22.1248C15.7901 22.1325 15.8486 22.1507 16.124 21.9292C16.4247 21.6873 16.7977 21.317 17.4204 20.6943L25.8074 12.3074L28.1936 14.6936Z", "M32.8496 18.0005C32.8496 9.79906 26.2019 3.15137 18.0005 3.15137C9.79906 3.15137 3.15137 9.79906 3.15137 18.0005C3.15137 26.2019 9.79906 32.8496 18.0005 32.8496C26.2019 32.8496 32.8496 26.2019 32.8496 18.0005ZM35.7764 18.0005C35.7764 27.8173 27.8173 35.7764 18.0005 35.7764C8.18363 35.7764 0.224609 27.8173 0.224609 18.0005C0.224609 8.18363 8.18363 0.224609 18.0005 0.224609C27.8173 0.224609 35.7764 8.18363 35.7764 18.0005Z"], "0 0 36 36");
+		/** The install action (`IconDownloadOutlineRegular`). */
+		const DOWNLOAD_ICON = (size = 16) => glyph(size, REGULAR, [
+			"M8 1.95317V10.0469",
+			"M4.25 6.29688L8 10.0469L11.75 6.29688",
+			"M1.5 10.0469V13.158C1.5 13.3937 1.60536 13.6198 1.79289 13.7865C1.98043 13.9532 2.23478 14.0469 2.5 14.0469H13.5C13.7652 14.0469 14.0196 13.9532 14.2071 13.7865C14.3946 13.6198 14.5 13.3937 14.5 13.158V10.0469"
+		]);
+		/** The head's info affordance (`IconInfoOutlineRegular`, fill-only artwork). */
+		const INFO_ICON = (size = 11) => fillGlyph(size, [
+			"M12.5757 7.00012C12.5757 3.92085 10.0794 1.42463 7.00012 1.42456C3.9208 1.42456 1.42456 3.9208 1.42456 7.00012C1.42463 10.0794 3.92085 12.5757 7.00012 12.5757C10.0793 12.5756 12.5756 10.0793 12.5757 7.00012ZM13.8002 7.00012C13.8001 10.7559 10.7559 13.8001 7.00012 13.8002C3.2443 13.8002 0.199291 10.7559 0.199219 7.00012C0.199219 3.24426 3.24426 0.199219 7.00012 0.199219C10.7559 0.199291 13.8002 3.2443 13.8002 7.00012Z",
+			"M7.6127 3.18921V4.55986H6.38735V3.18921H7.6127Z",
+			"M7.6127 5.68921V10.8109H6.38735V5.68921H7.6127Z"
+		], "0 0 14 14");
+		//#endregion
 		//#region src/client/update-view.ts
 		/**
-		* Plugin-update review modal (browser half).
+		* Plugin-update review view (browser half).
 		*
-		* Plain-DOM modal (no React tree) so it can never disturb the DSH shell's
+		* Plain-DOM panel (no React tree) so it can never disturb the DSH shell's
 		* reconciliation — same rule as the sidebar entry rows. Rendered content:
 		*
-		*   - header: title + refresh
-		*   - plugin list (name, current → available, state badge, blocked reason)
-		*   - ignored-offer banner + reversible "show again"
-		*   - install action (disabled while installing / nothing actionable / offer
-		*     ignored); after install the UI keeps polling the backend state instead
-		*     of trusting the HTTP response alone, because activating a set restarts
-		*     DSH (spec §7.1: never report success on the 200/202 alone).
-		*   - independent HQ Edge runtime section (read-only report; the actual
-		*     upgrade is owned by the EDA installer).
+		*   - head: title + intro + refresh toolbar (the shell plugin-manager head row)
+		*   - state-grouped sections, each a group head + package cards
+		*     (48px hairline-framed glyph, title row with a state tag, one-line
+		*     version transition, end actions) — the shell's card geometry
+		*   - a facts group for the independent HQ Edge runtime report
+		*   - footer actions (install / ignore / show again), with a toast that
+		*     reports the outcome of an install the way the shell's Toast does
+		*
+		* Every surface rides a `--dsw-alias-*` design token (see VIEW_CSS_TEXT), so
+		* the panel follows the shell's light/dark theme and its focus-ring contract.
 		*
 		* @module
 		*/
-		function el(tag, className, text) {
+		/** How long the outcome toast stays up, in milliseconds. */
+		const TOAST_HOLD_MS = 4e3;
+		function el(tag, className = "", text) {
 			const node = document.createElement(tag);
-			node.className = className;
+			if (className.length > 0) node.className = className;
 			if (text !== void 0) node.textContent = text;
 			return node;
 		}
+		/** A button carrying inline SVG artwork (the icon modules emit markup). */
+		function iconButton(className, markup, label, onClick) {
+			const button = el("button", className);
+			button.type = "button";
+			button.setAttribute("aria-label", label);
+			button.title = label;
+			button.innerHTML = markup;
+			button.addEventListener("click", onClick);
+			return button;
+		}
+		/**
+		* Compact a package name to what a person calls it — the shell plugin
+		* manager's own rule (`presentation.ts` `shortName`), so both UIs read the
+		* same plugin by the same name.
+		*/
+		function shortName(name) {
+			return (name.startsWith("@") ? name.slice(name.indexOf("/") + 1) : name).replace(/^dsh-(?:host-|client-)?/, "");
+		}
+		/** Normalize the server's block reason to a list (it may arrive as a string). */
+		function blockedByList(item) {
+			const by = item.blockedBy;
+			if (Array.isArray(by)) return by.filter((entry) => typeof entry === "string");
+			return typeof by === "string" && by.length > 0 ? [by] : [];
+		}
+		/** The tag tone a state reads as, matching the shell's Tag palette. */
+		function stateTone(item) {
+			switch (item.state) {
+				case "update": return "info";
+				case "install": return "warning";
+				case "blocked": return "danger";
+				case "ignored": return "neutral";
+				case "current": return "success";
+			}
+		}
 		function stateLabel(item, copy) {
 			switch (item.state) {
 				case "current": return copy.state.current;
@@ -381,152 +542,258 @@ window.__ModuleLoader__.load({
 				case "blocked": return copy.state.blocked;
 			}
 		}
+		/** The one-line version transition under a card's title. */
+		function versionLine(item) {
+			switch (item.state) {
+				case "current": return item.currentVersion ?? item.availableVersion;
+				case "install": return item.availableVersion;
+				default: return item.currentVersion === null ? item.availableVersion : `${item.currentVersion} → ${item.availableVersion}`;
+			}
+		}
 		function blockedReason(item, copy) {
-			const by = item.blockedBy ?? [];
+			const by = blockedByList(item);
 			if (by.includes("host")) return copy.blockedReason.host;
 			if (by.includes("hq-edge-version")) return copy.blockedReason["hq-edge-version"];
 			if (by.includes("runtime-unknown")) return copy.blockedReason["runtime-unknown"];
 			return by.length > 0 ? by.join(", ") : void 0;
 		}
-		/**
-		* Open (or focus) the update modal. Re-renders from the store; when the store
-		* is stale the modal first refreshes the report.
-		*/
-		function openUpdateView(store, copy) {
-			const existing = document.querySelector("[data-hq-plugin-update-view]");
-			if (existing !== null) {
-				existing.style.display = "";
-				return;
+		/** One package card: glyph, name with its state tag, version line, end actions. */
+		function packageCard(item, copy, installing, store) {
+			const card = el("li", "hqpu-card");
+			card.dataset.pluginName = item.name;
+			card.dataset.state = item.state;
+			card.title = `${item.name} · ${versionLine(item)}`;
+			const head = el("div", "hqpu-card-head");
+			const glyph = el("span", "hqpu-card-icon");
+			glyph.setAttribute("aria-hidden", "true");
+			glyph.innerHTML = PLUGIN_ICON(24);
+			const main = el("div", "hqpu-card-main");
+			const titleRow = el("div", "hqpu-title-row");
+			const title = el("span", "hqpu-card-title", shortName(item.name));
+			const tag = el("span", "hqpu-tag");
+			tag.dataset.tone = stateTone(item);
+			tag.textContent = stateLabel(item, copy);
+			titleRow.append(title, tag);
+			const desc = el("span", "hqpu-card-desc", versionLine(item));
+			main.append(titleRow, desc);
+			head.append(glyph, main);
+			const end = el("div", "hqpu-card-end");
+			if (item.state === "update" || item.state === "install") {
+				const button = el("button", "hqpu-btn hqpu-btn--sm hqpu-btn--primary");
+				button.type = "button";
+				button.disabled = installing;
+				button.innerHTML = `${DOWNLOAD_ICON(13)}<span>${copy.installOne}</span>`;
+				button.addEventListener("click", () => {
+					runInstall(store, copy);
+				});
+				end.append(button);
 			}
-			const overlay = el("div", "hqpu-overlay");
-			overlay.setAttribute("data-hq-plugin-update-view", "");
-			const panel = el("div", "hqpu-panel");
-			const header = el("div", "hqpu-header");
-			header.append(el("div", "hqpu-title", copy.viewTitle));
-			const refreshBtn = el("button", "hqpu-btn", copy.refresh);
-			header.append(refreshBtn);
-			const closeBtn = el("button", "hqpu-btn hqpu-btn-ghost", copy.close);
-			header.append(closeBtn);
-			const body = el("div", "hqpu-body");
-			const listSection = el("div", "hqpu-section");
-			const runtimeSection = el("div", "hqpu-section hqpu-runtime");
-			const actionBar = el("div", "hqpu-actions");
-			panel.append(header, body);
-			body.append(listSection, runtimeSection, actionBar);
-			overlay.append(panel);
-			document.body.appendChild(overlay);
-			const disposers = [];
-			const render = () => {
-				const report = store.report();
-				const installing = store.installing();
-				renderList(listSection, report, copy, installing, store);
-				renderRuntime(runtimeSection, report, copy);
-				renderActions(actionBar, report, copy, store, installing);
-			};
-			const unsubscribe = store.subscribe(render);
-			disposers.push(unsubscribe);
-			store.refresh().then(() => {});
-			const onClose = () => {
-				for (const dispose of disposers) try {
-					dispose();
-				} catch {}
-				overlay.remove();
+			head.append(end);
+			card.append(head);
+			if (item.state === "blocked") {
+				const reason = blockedReason(item, copy);
+				if (reason !== void 0) card.append(el("p", "hqpu-card-reason", reason));
+			}
+			return card;
+		}
+		/** A section: group head with its count, then the cards. */
+		function group(heading, items, copy, installing, store) {
+			if (items.length === 0) return null;
+			const section = el("section", "hqpu-group");
+			section.dataset.group = heading;
+			const head = el("div", "hqpu-group-head");
+			head.append(el("h3", "hqpu-group-title", heading));
+			head.append(el("span", "hqpu-group-count", copy.groupCount(items.length)));
+			const list = el("ul", "hqpu-cards");
+			for (const item of items) list.append(packageCard(item, copy, installing, store));
+			section.append(head, list);
+			return section;
+		}
+		/** First-read placeholders, sharing the card and text-line layout. */
+		function skeleton(copy) {
+			const section = el("section", "hqpu-group");
+			section.setAttribute("role", "status");
+			section.dataset.loading = "";
+			const head = el("div", "hqpu-group-head");
+			head.setAttribute("aria-hidden", "true");
+			const heading = el("span", "hqpu-group-title hqpu-skeleton-text hqpu-skeleton-heading");
+			const headingBar = el("span", "hqpu-skeleton-fill hqpu-skeleton-bar");
+			heading.append(headingBar);
+			head.append(heading);
+			const list = el("ul", "hqpu-cards");
+			list.setAttribute("aria-hidden", "true");
+			for (let index = 0; index < 3; index += 1) {
+				const card = el("li", "hqpu-card");
+				const cardHead = el("div", "hqpu-card-head");
+				const glyph = el("span", "hqpu-card-icon hqpu-skeleton-fill hqpu-skeleton-icon");
+				const main = el("div", "hqpu-card-main");
+				const titleRow = el("div", "hqpu-title-row");
+				const title = el("span", "hqpu-card-title hqpu-skeleton-text hqpu-skeleton-title");
+				title.append(el("span", "hqpu-skeleton-fill hqpu-skeleton-bar"));
+				titleRow.append(title);
+				const desc = el("span", "hqpu-card-desc hqpu-skeleton-text hqpu-skeleton-desc");
+				desc.append(el("span", "hqpu-skeleton-fill hqpu-skeleton-bar"));
+				main.append(titleRow, desc);
+				cardHead.append(glyph, main);
+				const end = el("div", "hqpu-card-end");
+				end.setAttribute("aria-hidden", "true");
+				cardHead.append(end);
+				card.append(cardHead);
+				list.append(card);
+			}
+			section.append(head, list);
+			section.setAttribute("aria-label", copy.loading);
+			return section;
+		}
+		/** The independent HQ Edge runtime report, as ruled fact rows. */
+		function runtimeGroup(report, copy) {
+			const section = el("section", "hqpu-group");
+			section.dataset.group = "runtime";
+			const head = el("div", "hqpu-group-head");
+			head.append(el("h3", "hqpu-group-title", copy.runtime.title));
+			section.append(head);
+			const facts = el("dl", "hqpu-facts");
+			const runtime = report.runtime;
+			const row = (label, value, code = false) => {
+				const wrap = el("div");
+				wrap.append(el("dt", "", label));
+				const dd = el("dd");
+				if (code) {
+					const node = el("code", "", value);
+					dd.append(node);
+				} else dd.textContent = value;
+				wrap.append(dd);
+				facts.append(wrap);
 			};
-			closeBtn.addEventListener("click", onClose);
-			overlay.addEventListener("click", (ev) => {
-				if (ev.target === overlay) onClose();
-			});
-			refreshBtn.addEventListener("click", () => {
-				store.refresh();
-			});
-			disposers.push(() => {
-				closeBtn.removeEventListener("click", onClose);
-				overlay.removeEventListener("click", onClose);
-				refreshBtn.removeEventListener("click", () => {});
-			});
-			render();
+			if (runtime.configured === false) row(copy.runtime.source, copy.runtime.notConfigured);
+			else {
+				row(copy.runtime.current, runtime.currentVersion ?? copy.runtime.unknown);
+				if (runtime.updateAvailable && runtime.latest != null) row(copy.runtime.latest, runtime.latest);
+				if (report.manifestVersion !== null) row(copy.runtime.set, report.manifestVersion, true);
+				if (typeof runtime.checkedAt === "string" && runtime.checkedAt.length > 0) row(copy.runtime.checkedAt, new Date(runtime.checkedAt).toLocaleString());
+			}
+			section.append(facts);
+			section.append(el("p", "hqpu-status", copy.runtime.note));
+			if (typeof runtime.lastError === "string" && runtime.lastError.length > 0) {
+				const line = el("p", "hqpu-status hqpu-status--dot");
+				line.setAttribute("role", "status");
+				const dot = el("span", "hqpu-dot");
+				dot.dataset.state = "error";
+				line.append(dot, el("span", "", `${copy.lastError}: ${runtime.lastError}`));
+				section.append(line);
+			}
+			return section;
 		}
 		function renderList(section, report, copy, installing, store) {
 			section.textContent = "";
 			if (report === null) {
-				section.append(el("div", "hqpu-empty", copy.checkFailed));
+				section.append(skeleton(copy));
 				return;
 			}
 			if (report.items.length === 0) {
 				section.append(el("div", "hqpu-empty", copy.empty));
 				return;
 			}
-			const manifestRow = el("div", "hqpu-manifest");
-			manifestRow.append(el("span", "hqpu-manifest-label", `${copy.manifestVersion}`), el("span", "hqpu-manifest-value", report.manifestVersion));
-			section.append(manifestRow);
-			if (report.ignoredSet) {
-				const banner = el("div", "hqpu-ignored-banner", copy.ignoredOffer);
-				const unignore = el("button", "hqpu-btn hqpu-btn-small", copy.unignore);
-				unignore.addEventListener("click", () => {
-					unignoreOffer(report.manifestVersion).then(() => store.refresh()).catch(() => void 0);
-				});
-				banner.append(unignore);
-				section.append(banner);
-			}
-			const list = el("ul", "hqpu-list");
-			for (const item of report.items) {
-				const row = el("li", `hqpu-item hqpu-item-${item.state}`);
-				const name = el("span", "hqpu-item-name", item.name);
-				const version = el("span", "hqpu-item-version", item.state === "current" ? item.currentVersion : `${item.currentVersion} → ${item.availableVersion}`);
-				const state = el("span", `hqpu-item-state hqpu-state-${item.state}`, stateLabel(item, copy));
-				row.append(name, version, state);
-				const reason = blockedReason(item, copy);
-				if (reason !== void 0) row.append(el("span", "hqpu-item-reason", reason));
-				list.append(row);
+			const byState = (state) => report.items.filter((item) => item.state === state);
+			const order = [
+				[copy.group.actionable, [...byState("update"), ...byState("install")]],
+				[copy.group.blocked, byState("blocked")],
+				[copy.group.ignored, byState("ignored")],
+				[copy.group.current, byState("current")]
+			];
+			for (const [heading, items] of order) {
+				const node = group(heading, items, copy, installing, store);
+				if (node !== null) section.append(node);
 			}
-			section.append(list);
 		}
 		function renderRuntime(section, report, copy) {
 			section.textContent = "";
-			const title = el("div", "hqpu-runtime-title", copy.runtime.title);
-			section.append(title);
-			const runtime = report?.runtime;
-			if (runtime === void 0 || runtime.configured === false) {
-				section.append(el("div", "hqpu-runtime-line", copy.runtime.notConfigured));
+			if (report === null) return;
+			section.append(runtimeGroup(report, copy));
+		}
+		/** Run the install transaction, then keep polling until the state settles. */
+		async function runInstall(store, copy) {
+			const report = store.report();
+			if (report === null) return;
+			if (report.manifestVersion === null) {
+				showToast(copy.checkFailed, "error");
 				return;
 			}
-			if (runtime.updateAvailable && runtime.latest !== void 0) section.append(el("div", "hqpu-runtime-line", copy.runtime.updateAvailable(runtime.latest)));
-			else if (runtime.currentVersion !== void 0) section.append(el("div", "hqpu-runtime-line", copy.runtime.current(runtime.currentVersion)));
-			else section.append(el("div", "hqpu-runtime-line", copy.runtime.unknown));
-			section.append(el("div", "hqpu-runtime-note", copy.runtime.note));
-			if (runtime.lastError !== void 0 && runtime.lastError.length > 0) section.append(el("div", "hqpu-runtime-error", `${copy.lastError}: ${runtime.lastError}`));
+			try {
+				const result = await installSet(report.manifestVersion);
+				if (result.error !== void 0) {
+					showToast(`${copy.installError}: ${result.error}`, "error");
+					return;
+				}
+				showToast(copy.installSuccess, "success");
+				pollUntilSettled(store);
+			} catch (err) {
+				showToast(`${copy.installError}: ${err instanceof Error ? err.message : String(err)}`, "error");
+			}
+		}
+		/** The single live toast; a new message replaces the one on screen. */
+		let toastHost = null;
+		let toastTimer = null;
+		function showToast(message, tone) {
+			if (toastHost === null) return;
+			if (toastTimer !== null) window.clearTimeout(toastTimer);
+			toastHost.textContent = "";
+			const toast = el("div", "hqpu-toast");
+			toast.setAttribute("role", "status");
+			const icon = el("span", "hqpu-toast-icon");
+			icon.dataset.tone = tone;
+			icon.innerHTML = tone === "success" ? CHECK_CIRCLE_ICON(16) : WARNING_ICON(16);
+			toast.append(icon, el("span", "hqpu-toast-text", message));
+			toastHost.append(toast);
+			toastTimer = window.setTimeout(() => {
+				toastHost?.replaceChildren();
+				toastTimer = null;
+			}, TOAST_HOLD_MS);
 		}
 		function renderActions(bar, report, copy, store, installing) {
 			bar.textContent = "";
 			if (report === null) return;
 			if (installing) {
-				bar.append(el("span", "hqpu-installing", copy.installing));
+				const line = el("span", "hqpu-status hqpu-status--dot");
+				const spinner = el("span", "hqpu-spinner");
+				line.append(spinner, el("span", "", copy.installing));
+				bar.append(line);
 				return;
 			}
 			const actionable = report.items.filter((item) => item.state === "update" || item.state === "install").length;
-			const installBtn = el("button", "hqpu-btn hqpu-btn-primary", actionable > 0 ? copy.installAll(actionable) : copy.state.current);
-			installBtn.disabled = actionable === 0 || report.ignoredSet;
-			installBtn.addEventListener("click", () => {
-				installSet(report.manifestVersion).then((result) => {
-					if (result.error !== void 0) {
-						bar.textContent = "";
-						bar.append(el("div", "hqpu-error", `${copy.installError}: ${result.error}`));
-						return;
-					}
-					bar.textContent = "";
-					bar.append(el("span", "hqpu-installing", copy.installSuccess));
-					pollUntilSettled(store, report.manifestVersion);
-				}).catch((err) => {
-					bar.textContent = "";
-					bar.append(el("div", "hqpu-error", `${copy.installError}: ${err instanceof Error ? err.message : String(err)}`));
+			const hasSet = report.manifestVersion !== null;
+			if (actionable === 0) bar.append(el("span", "hqpu-status", copy.nothingToInstall));
+			else {
+				const installBtn = el("button", "hqpu-btn hqpu-btn--primary");
+				installBtn.type = "button";
+				installBtn.disabled = !hasSet || report.ignoredSet;
+				installBtn.innerHTML = `${DOWNLOAD_ICON(13)}<span>${copy.installAll(actionable)}</span>`;
+				installBtn.addEventListener("click", () => {
+					runInstall(store, copy);
 				});
-			});
-			bar.append(installBtn);
+				bar.append(installBtn);
+			}
+			if (!hasSet) return;
+			if (report.ignoredSet) {
+				const unignore = el("button", "hqpu-btn hqpu-btn--outline hqpu-btn--sm", copy.unignore);
+				unignore.type = "button";
+				unignore.addEventListener("click", () => {
+					unignoreOffer(report.manifestVersion).then(() => store.refresh()).catch(() => void 0);
+				});
+				bar.append(unignore);
+			} else if (actionable > 0) {
+				const ignore = el("button", "hqpu-btn hqpu-btn--ghost hqpu-btn--sm", copy.ignore);
+				ignore.type = "button";
+				ignore.addEventListener("click", () => {
+					ignoreOffer(report.manifestVersion).then(() => store.refresh()).catch(() => void 0);
+				});
+				bar.append(ignore);
+			}
 		}
 		/** After an install, poll the backend until the update report settles
 		*  (installing flag clears or DSH restarts under us — the next load re-reads
 		*  the fresh state). */
-		function pollUntilSettled(store, setVersion) {
+		function pollUntilSettled(store) {
 			let attempts = 0;
 			const tick = () => {
 				store.refresh().then((report) => {
@@ -539,6 +806,101 @@ window.__ModuleLoader__.load({
 			};
 			tick();
 		}
+		/**
+		* Open (or focus) the update panel. Re-renders from the store; when the store
+		* is stale the panel first refreshes the report.
+		*/
+		function openUpdateView(store, copy) {
+			const existing = document.querySelector("[data-hq-plugin-update-view]");
+			if (existing !== null) {
+				existing.style.display = "";
+				return;
+			}
+			const overlay = el("div", "hqpu-overlay");
+			overlay.setAttribute("data-hq-plugin-update-view", "");
+			overlay.addEventListener("click", (ev) => {
+				if (ev.target === overlay) onClose();
+			});
+			const scrim = el("div", "hqpu-scrim");
+			const panel = el("div", "hqpu-panel");
+			panel.setAttribute("role", "dialog");
+			panel.setAttribute("aria-modal", "true");
+			panel.setAttribute("aria-label", copy.viewTitle);
+			panel.tabIndex = -1;
+			const head = el("div", "hqpu-head");
+			const headMain = el("div", "hqpu-head-main");
+			headMain.append(el("h1", "hqpu-title", copy.viewTitle));
+			const intro = el("p", "hqpu-intro");
+			intro.append(el("span", "", copy.viewIntro));
+			const info = el("button", "hqpu-info");
+			info.type = "button";
+			info.setAttribute("aria-label", copy.viewInfo);
+			info.title = copy.viewInfo;
+			info.innerHTML = INFO_ICON(11);
+			intro.append(info);
+			headMain.append(intro);
+			const toolbar = el("div", "hqpu-toolbar");
+			const refreshBtn = iconButton("hqpu-icon-btn", REFRESH_ICON(16), copy.refresh, () => {
+				store.refresh();
+			});
+			toolbar.append(refreshBtn);
+			const closeBtn = iconButton("hqpu-icon-btn", CLOSE_ICON(16), copy.close, () => {
+				onClose();
+			});
+			toolbar.append(closeBtn);
+			head.append(headMain, toolbar);
+			panel.append(head);
+			const scroll = el("div", "hqpu-scroll");
+			const column = el("div", "hqpu-column");
+			const listSection = el("div", "hqpu-stack");
+			const runtimeSection = el("div", "hqpu-stack");
+			const toastSection = el("div", "hqpu-toast-host");
+			column.append(listSection, runtimeSection, toastSection);
+			scroll.append(column);
+			panel.append(scroll);
+			const footer = el("div", "hqpu-footer");
+			const actionBar = el("div", "hqpu-actions");
+			footer.append(actionBar);
+			panel.append(footer);
+			overlay.append(scrim, panel);
+			document.body.appendChild(overlay);
+			toastHost = toastSection;
+			panel.focus();
+			const disposers = [];
+			const render = () => {
+				const report = store.report();
+				const installing = store.installing();
+				const stale = report === null;
+				refreshBtn.disabled = stale;
+				if (stale) {
+					listSection.textContent = "";
+					listSection.append(skeleton(copy));
+				} else renderList(listSection, report, copy, installing, store);
+				renderRuntime(runtimeSection, report, copy);
+				renderActions(actionBar, report, copy, store, installing);
+			};
+			const unsubscribe = store.subscribe(render);
+			disposers.push(unsubscribe);
+			store.refresh().then(() => {});
+			const onKeyDown = (ev) => {
+				if (ev.key === "Escape") {
+					ev.stopPropagation();
+					onClose();
+				}
+			};
+			document.addEventListener("keydown", onKeyDown);
+			disposers.push(() => document.removeEventListener("keydown", onKeyDown));
+			function onClose() {
+				for (const dispose of disposers) try {
+					dispose();
+				} catch {}
+				if (toastTimer !== null) window.clearTimeout(toastTimer);
+				toastTimer = null;
+				if (toastHost === toastSection) toastHost = null;
+				overlay.remove();
+			}
+			render();
+		}
 		//#endregion
 		//#region src/client/index.ts
 		/**
@@ -579,15 +941,14 @@ window.__ModuleLoader__.load({
 				tooltip: COPY.zh.entryTooltip
 			};
 		}
-		/** Inline update glyph — `currentColor`, 16×16 like the shell's nav glyphs. */
-		const UPDATE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <g fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M2.5 8a5.5 5.5 0 1 1 1.61 3.89" />
-        <path d="M2.5 8V4.75M2.5 8h3.25" />
-    </g>
-</svg>`;
+		/** The sidebar glyph — the same pinwheel the shell's own Plugins entry draws
+		*  (`IconPluginPinwheelOutlineRegular`), so both rows read as one feature. */
+		const UPDATE_ICON = PLUGIN_ICON(16);
 		/** Sidebar entry styles — matched to the family rows (same inset/padding/gap
-		*  as the shell's own Plugins entry). The badge is a 16px rounded pill. */
+		*  as the shell's own Plugins entry, `SidebarRoot.module.css` `.panelRow`).
+		*  Every colour rides a `--dsw-alias-*` token so the row follows the shell's
+		*  light/dark theme; the badge foreground uses the toast label, the shell's
+		*  "always light ink on a saturated surface" token. */
 		const ENTRY_CSS_TEXT = `
 .hqpu-sidebar-entry {
   box-sizing: border-box;
@@ -600,7 +961,7 @@ window.__ModuleLoader__.load({
   padding: 7px 8px;
   background: transparent;
   border: none;
-  border-radius: 12px;
+  border-radius: var(--dsw-radius-md);
   color: var(--dsw-alias-label-primary);
   cursor: pointer;
   font: inherit;
@@ -615,6 +976,10 @@ window.__ModuleLoader__.load({
   background: var(--dsw-alias-interactive-bg-hover);
   color: var(--dsw-alias-label-primary);
 }
+.hqpu-sidebar-entry:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: -2px;
+}
 .hqpu-sidebar-entry__icon {
   display: inline-flex;
   align-items: center;
@@ -638,11 +1003,13 @@ window.__ModuleLoader__.load({
   height: 16px;
   padding: 0 5px;
   border-radius: 8px;
-  background: var(--dsw-alias-bg-badge, #e5484d);
-  color: #fff;
+  background: var(--dsw-alias-state-error-primary);
+  color: var(--dsw-alias-toast-label);
   font-size: 11px;
   line-height: 16px;
+  font-weight: 500;
   text-align: center;
+  font-variant-numeric: tabular-nums;
 }
 /* Collapsed rail: icon-only, centered — same 36px square the shell uses. */
 [data-sidebar-collapsed] .hqpu-sidebar-entry {
@@ -661,9 +1028,28 @@ window.__ModuleLoader__.load({
   display: none;
 }
 `;
-		/** Modal styles (hqpu-*). Plain overlay + panel, aligned to the shell's
-		*  dark/light aliases. */
+		/**
+		* View styles (hqpu-*). Plain overlay + panel, drawn with the SAME design
+		* tokens and geometry the shell's own plugin manager uses
+		* (`ui-plugin-manager/src/client/PluginManagerPage.module.css` +
+		* `ui-primitives/src/{Modal,Toast,Tag,StateDot}.module.css`), so this page
+		* reads as part of the product rather than a bolt-on.
+		*
+		* Two rules keep it honest across themes:
+		*   1. every colour is a `--dsw-alias-*` token — no literal hex/rgb, so light
+		*      and dark both come out right (the old sheet invented
+		*      `--dsw-alias-bg-surface` / `--dsw-alias-line-border` / `--dsw-alias-bg-badge`,
+		*      none of which exist, and so always fell back to a white panel);
+		*   2. `color-mix()` tints come from the state token itself, so a palette
+		*      change moves fill and ink together.
+		*
+		* The chrome (panel, scrim, header, footer) follows `ui-primitives/Modal`,
+		* because this view IS a dialog; the body follows `PluginManagerPage`, because
+		* that is the content it heads. The one token the bundled shell does not
+		* publish is backfilled by {@link ensureDesignTokens} — see the note there.
+		*/
 		const VIEW_CSS_TEXT = `
+/* ── Overlay + panel (ui-primitives Modal.module.css) ─────────────────── */
 .hqpu-overlay {
   position: fixed;
   inset: 0;
@@ -671,175 +1057,675 @@ window.__ModuleLoader__.load({
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 0, 0, 0.45);
+  /* The frame's own top inset keeps a tall card clear of the window chrome. */
+  padding: max(24px, var(--dsh-frame-overlay-top, 24px)) 24px;
+}
+.hqpu-scrim {
+  position: absolute;
+  /* Only paint excludes the native caption; the root still blocks clicks. */
+  inset: var(--dsh-frame-chrome-top, 0px) 0 0;
+  background: var(--dsw-alias-bg-mask-1);
+  animation: hqpu-fade var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease);
 }
 .hqpu-panel {
+  position: relative;
+  z-index: 1;
   box-sizing: border-box;
-  width: min(640px, calc(100vw - 48px));
-  max-height: min(80vh, 720px);
   display: flex;
   flex-direction: column;
-  border-radius: 16px;
-  background: var(--dsw-alias-bg-surface, #fff);
-  color: var(--dsw-alias-label-primary, #1f2329);
-  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
+  gap: 20px;
+  width: min(920px, 100%);
+  max-height: 100%;
   overflow: hidden;
+  border: 0;
+  border-radius: var(--dsw-radius-panel);
+  background: var(--dsw-alias-bg-layer-2);
+  box-shadow: var(--dsw-elevation-prominent);
+  color: var(--dsw-alias-label-primary);
+  animation: hqpu-panel-in var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease);
 }
-.hqpu-header {
+.hqpu-panel:focus {
+  outline: none;
+}
+@keyframes hqpu-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes hqpu-panel-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* ── Head row (ui-primitives Modal .header) ─────────────────────────────── */
+.hqpu-head {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--dsw-alias-line-border, rgba(0,0,0,.08));
+  flex: none;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  box-sizing: border-box;
+  /* The official Title row: 22/14/12/24 — the toolbar sits 10px further right
+   * than the body content on purpose, matching the shell's own close button. */
+  padding: 22px 14px 12px 24px;
+}
+.hqpu-head-main {
+  min-width: 0;
+  max-width: 100%;
 }
 .hqpu-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 28px;
+  color: var(--dsw-alias-label-primary);
+}
+.hqpu-intro {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
+}
+.hqpu-info {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--dsw-radius-sm);
+  background: transparent;
+  color: var(--dsw-alias-label-caption);
+  cursor: pointer;
+}
+.hqpu-info:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+.hqpu-info:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 1px;
+}
+.hqpu-toolbar {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 16px;
+}
+
+/* ── Scrolling body: the page's centred column ────────────────────────── */
+.hqpu-scroll {
   flex: 1;
-  font-size: 15px;
-  font-weight: 600;
+  min-height: 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  /* The panel's 20px gap already separates this from the head and footer. */
+  padding: 0 clamp(16px, 3vw, 32px) 4px;
+  /* Anything that scrolls inside the panel draws the l2 thumb. */
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
 }
-.hqpu-body {
-  overflow: auto;
-  padding: 16px;
+.hqpu-column {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 24px;
+  width: 100%;
+  max-width: 880px;
+  margin: 0 auto;
+}
+/* A stack of groups (or the single toast host) inside the column. */
+.hqpu-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
 }
-.hqpu-section {
+.hqpu-toast-host:empty {
+  display: none;
+}
+
+/* ── Groups (PluginManagerPage .group) ────────────────────────────────── */
+.hqpu-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-.hqpu-manifest {
+.hqpu-group-head {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #646a73);
 }
-.hqpu-manifest-value {
-  font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2329);
+.hqpu-group-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  color: var(--dsw-alias-label-primary);
 }
-.hqpu-list {
-  list-style: none;
+.hqpu-group-count {
+  flex: none;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Cards (PluginManagerPage .card) ──────────────────────────────────── */
+.hqpu-cards {
   margin: 0;
   padding: 0;
+  list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 2px;
 }
-.hqpu-item {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  gap: 8px;
+.hqpu-card {
+  min-width: 0;
+  /* The hover surface reaches 8px past the content on both sides. */
+  margin: 0 -8px;
+  border-radius: var(--dsw-radius-xl);
+}
+.hqpu-card:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+.hqpu-card-head {
+  display: flex;
   align-items: center;
-  padding: 8px 10px;
-  border-radius: 10px;
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.04));
-  font-size: 13px;
+  gap: 14px;
+  padding: 8px;
+}
+.hqpu-card-icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: 0.5px solid var(--dsw-alias-border-l3);
+  border-radius: var(--dsw-radius-lg);
+  color: var(--dsw-alias-label-secondary);
+}
+.hqpu-card-icon svg {
+  display: block;
+  width: 24px;
+  height: 24px;
+}
+.hqpu-card-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.hqpu-title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
 }
-.hqpu-item-name {
+.hqpu-card-title {
+  min-width: 0;
+  font-size: 14px;
   font-weight: 500;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.hqpu-item-version {
-  color: var(--dsw-alias-label-secondary, #646a73);
-  font-variant-numeric: tabular-nums;
+.hqpu-card-desc {
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-tertiary);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  overflow-wrap: anywhere;
 }
-.hqpu-item-state {
-  padding: 1px 8px;
+.hqpu-card-end {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+}
+.hqpu-card-reason {
+  margin: 0;
+  padding: 0 8px 8px 70px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-state-error-primary);
+  overflow-wrap: anywhere;
+}
+
+/* ── Tags (ui-primitives Tag.module.css) ──────────────────────────────── */
+.hqpu-tag {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
   border-radius: 999px;
+  corner-shape: round;
+  padding: 1px 8px;
   font-size: 11px;
-  line-height: 18px;
+  font-weight: 500;
+  line-height: 17px;
+  white-space: nowrap;
 }
-.hqpu-state-current { background: rgba(0,0,0,.06); color: var(--dsw-alias-label-secondary, #646a73); }
-.hqpu-state-update, .hqpu-state-install { background: rgba(229,72,77,.12); color: #d92d33; }
-.hqpu-state-ignored { background: rgba(0,0,0,.06); color: var(--dsw-alias-label-secondary, #646a73); }
-.hqpu-state-blocked { background: rgba(229,72,77,.12); color: #d92d33; }
-.hqpu-item-reason {
-  grid-column: 1 / -1;
-  font-size: 12px;
-  color: var(--dsw-alias-label-tertiary, #8f959e);
+.hqpu-tag[data-tone='success'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent);
+  color: var(--dsw-alias-state-success-primary);
+}
+.hqpu-tag[data-tone='info'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent);
+  color: var(--dsw-alias-state-business-primary);
+}
+.hqpu-tag[data-tone='warning'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent);
+  color: var(--dsw-alias-state-warn-primary);
+}
+.hqpu-tag[data-tone='danger'] {
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+.hqpu-tag[data-tone='neutral'] {
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
 }
-.hqpu-ignored-banner {
+
+/* ── Fact rows (PluginManagerPage .facts / .rows) ─────────────────────── */
+.hqpu-facts {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+.hqpu-facts > div {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: 10px;
-  background: rgba(120,120,120,.1);
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 44px;
+  padding: 8px 2px;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+}
+.hqpu-facts > div:last-child {
+  border-bottom: 0;
+}
+.hqpu-facts dt {
+  flex: none;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary);
+}
+.hqpu-facts dd {
+  min-width: 0;
+  margin: 0;
+  font-size: 13px;
+  line-height: 20px;
+  text-align: end;
+  overflow-wrap: anywhere;
+  color: var(--dsw-alias-label-primary);
+}
+.hqpu-facts code {
+  padding: 2px 6px;
+  border-radius: var(--dsw-radius-xs);
+  background: var(--dsw-alias-bg-module-platform);
+  font-family: var(--dsw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #646a73);
+}
+
+/* ── Banner (PluginManagerPage .installSafety) ────────────────────────── */
+.hqpu-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-state-warn-tertiary);
+  font-size: 12.5px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+}
+.hqpu-banner > svg {
+  flex: none;
+  margin-top: 2px;
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+/* ── Status, empty, failure (PluginManagerPage .status / .empty / .failure) */
+.hqpu-status {
+  margin: 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-tertiary);
+}
+.hqpu-status--dot {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.hqpu-failure {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--dsw-alias-state-error-primary);
 }
 .hqpu-empty {
-  padding: 24px 0;
+  padding: 32px 0;
   text-align: center;
-  color: var(--dsw-alias-label-tertiary, #8f959e);
   font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-tertiary);
 }
-.hqpu-runtime {
-  border-top: 1px solid var(--dsw-alias-line-border, rgba(0,0,0,.08));
-  padding-top: 12px;
+
+/* ── State dot + spinner (ui-primitives StateDot.module.css) ──────────── */
+.hqpu-dot {
+  position: relative;
+  display: inline-block;
+  flex: none;
+  width: 10px;
+  height: 10px;
 }
-.hqpu-runtime-title {
-  font-size: 13px;
-  font-weight: 600;
+.hqpu-dot::after {
+  content: '';
+  position: absolute;
+  inset: 20%;
+  border-radius: 50%;
+  corner-shape: round;
+  background: currentColor;
 }
-.hqpu-runtime-line {
-  font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #646a73);
+.hqpu-dot[data-state='done'] { color: var(--dsw-alias-state-success-primary); }
+.hqpu-dot[data-state='warning'] { color: var(--dsw-alias-state-warn-primary); }
+.hqpu-dot[data-state='error'] { color: var(--dsw-alias-state-error-primary); }
+.hqpu-dot[data-state='idle'] { color: var(--dsw-alias-state-idle-primary); }
+.hqpu-spinner {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
+  border-top-color: currentColor;
+  animation: hqpu-spin 1.5s linear infinite;
 }
-.hqpu-runtime-note {
-  font-size: 11px;
-  color: var(--dsw-alias-label-tertiary, #8f959e);
+@keyframes hqpu-spin {
+  to { transform: rotate(360deg); }
 }
-.hqpu-runtime-error {
-  font-size: 12px;
-  color: #d92d33;
+
+/* ── Skeleton (PluginManagerPage .skeleton*) ──────────────────────────── */
+.hqpu-skeleton-fill {
+  background: var(--dsw-alias-bg-skeleton);
+  animation: hqpu-skeleton 2s cubic-bezier(0.36, 0, 0.64, 1) infinite;
 }
-.hqpu-actions {
+.hqpu-skeleton-text {
   display: flex;
   align-items: center;
-  gap: 8px;
+  height: 1lh;
+}
+.hqpu-skeleton-bar {
+  width: 100%;
+  height: 12px;
+  border-radius: var(--dsw-radius-xs);
+}
+.hqpu-skeleton-heading { width: 96px; }
+.hqpu-skeleton-title { width: min(144px, 60%); }
+.hqpu-skeleton-desc { width: min(280px, 85%); }
+.hqpu-skeleton-icon { border-color: transparent; }
+@keyframes hqpu-skeleton {
+  0% { opacity: 1; }
+  40% { opacity: 0.6; }
+  80%, 100% { opacity: 1; }
+}
+
+/* ── Toast (ui-primitives Toast.module.css, held inside the panel) ────── */
+.hqpu-toast {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: var(--dsw-radius-lg);
+  background: var(--dsw-alias-toast-bg);
+  color: var(--dsw-alias-toast-label);
+  font-size: 14px;
+  line-height: 22px;
+  box-shadow: var(--dsw-shadow-lv3);
+  animation: hqpu-toast-in 160ms ease-out;
+}
+.hqpu-toast-icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  color: var(--dsw-alias-state-warn-label);
+}
+.hqpu-toast-icon[data-tone='success'] { color: var(--dsw-alias-state-success-primary); }
+.hqpu-toast-text { min-width: 0; }
+@keyframes hqpu-toast-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* ── Buttons (PluginManagerPage .addButton / .iconButton) ─────────────── */
+.hqpu-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--dsw-radius-sm);
+  background: transparent;
+  color: var(--dsw-alias-label-caption);
+  cursor: pointer;
+}
+.hqpu-icon-btn svg { display: block; }
+.hqpu-icon-btn:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+.hqpu-icon-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.hqpu-icon-btn:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 1px;
 }
 .hqpu-btn {
   box-sizing: border-box;
-  padding: 6px 14px;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0,0,0,.06));
-  color: var(--dsw-alias-label-primary, #1f2329);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
+  color: var(--dsw-alias-label-primary);
   font: inherit;
   font-size: 13px;
+  line-height: 20px;
   cursor: pointer;
 }
-.hqpu-btn-primary {
-  background: #e5484d;
-  color: #fff;
+.hqpu-btn svg { display: block; }
+.hqpu-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-solid); }
+.hqpu-btn:disabled { opacity: 0.5; cursor: default; }
+.hqpu-btn:focus-visible {
+  outline: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 1px;
 }
-.hqpu-btn-primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.hqpu-btn--primary {
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
 }
-.hqpu-btn-ghost {
+.hqpu-btn--primary:hover:not(:disabled) { background: var(--dsw-alias-button-primary-hover); }
+.hqpu-btn--outline {
   background: transparent;
-  border-color: var(--dsw-alias-line-border, rgba(0,0,0,.12));
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  color: var(--dsw-alias-label-secondary);
 }
-.hqpu-btn-small {
-  padding: 2px 10px;
-  font-size: 12px;
+.hqpu-btn--outline:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+.hqpu-btn--ghost { background: transparent; color: var(--dsw-alias-label-secondary); }
+.hqpu-btn--ghost:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+.hqpu-btn--danger { color: var(--dsw-alias-state-error-primary); }
+.hqpu-btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
+.hqpu-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
 }
-.hqpu-installing {
-  font-size: 13px;
-  color: var(--dsw-alias-label-secondary, #646a73);
+
+/* ── Footer action row (ui-primitives Modal .footer) ───────────────────── */
+.hqpu-footer {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 24px 20px;
 }
-.hqpu-error {
-  font-size: 13px;
-  color: #d92d33;
+
+.hqpu-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Reduced motion: drop every decorative animation ──────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .hqpu-scrim,
+  .hqpu-panel,
+  .hqpu-skeleton-fill,
+  .hqpu-spinner,
+  .hqpu-toast {
+    animation: none;
+  }
 }
 `;
 		const STYLE_TAG_ID = "data-plugin-css=\"huaqiu-plugin-update\"";
+		/**
+		* Design tokens the bundled DSH shell may not publish.
+		*
+		* hq-edge ships an older `ui-theme` build. A live probe of the running shell
+		* (both themes) shows 13 of the tokens this stylesheet reads are absent:
+		* `--dsw-radius-{xs,sm,md,lg,xl,panel}`, `--dsw-focus-ring-width`,
+		* `--dsw-focus-ring-color`, `--dsw-alias-toast-label`,
+		* `--dsw-alias-state-idle-primary`, `--dsw-font-mono`,
+		* `--dsh-frame-overlay-top` and `--dsh-frame-chrome-top`.
+		*
+		* An unresolved `var()` is not an error — it silently degrades the property to
+		* its initial value. That is how this panel once rendered with
+		* `border-radius: 0px` and a 3px `auto` focus ring while every colour was
+		* already correct.
+		*
+		* The last three (`--dsw-font-mono`, `--dsh-frame-*`) are deliberately NOT
+		* backfilled: the shell's own primitives rely on the inline `var(…, fallback)`
+		* form for those (`Modal.module.css`, `PluginManagerPage.module.css`), so this
+		* sheet does too. Everything else is backfilled below with the canonical value
+		* from `ui-theme/src/styles/{base,focus,design-platform}.css`.
+		*
+		* Values are feature-detected at runtime and scoped to this plugin's own roots
+		* rather than `:root`, so a newer shell always wins and filling a gap can never
+		* restyle the host.
+		*/
+		/** The two roots this plugin styles: the view overlay (built in
+		*  update-view.ts) and the sidebar row ({@link ENTRY_CSS}.entry). */
+		const STYLE_ROOTS = ".hqpu-overlay, .hqpu-sidebar-entry";
+		/** The shell's dark-theme carrier — audited live as `body[data-ds-dark-theme]`. */
+		const DARK_THEME_SELECTOR = "body[data-ds-dark-theme]";
+		/** Same roots, one rule per theme, for tokens whose official value flips. */
+		const DARK_STYLE_ROOTS = STYLE_ROOTS.split(",").map((root) => `${DARK_THEME_SELECTOR} ${root.trim()}`).join(",");
+		const DESIGN_TOKEN_FALLBACKS = [
+			{
+				token: "--dsw-radius-xs",
+				value: "4px"
+			},
+			{
+				token: "--dsw-radius-sm",
+				value: "8px"
+			},
+			{
+				token: "--dsw-radius-md",
+				value: "12px"
+			},
+			{
+				token: "--dsw-radius-lg",
+				value: "16px"
+			},
+			{
+				token: "--dsw-radius-xl",
+				value: "20px"
+			},
+			{
+				token: "--dsw-radius-panel",
+				value: "28px"
+			},
+			{
+				token: "--dsw-focus-ring-width",
+				value: "2px"
+			},
+			{
+				token: "--dsw-focus-ring-color",
+				value: "var(--dsw-alias-state-business-primary, #C7000B)"
+			},
+			{
+				token: "--dsw-alias-toast-label",
+				value: "var(--dsw-static-neutral-bluish-00, #fff)"
+			},
+			{
+				token: "--dsw-alias-state-idle-primary",
+				value: {
+					light: "var(--dsw-static-neutral-300, #d4d4d4)",
+					dark: "var(--dsw-static-neutral-600, #545557)"
+				}
+			}
+		];
+		const TOKEN_STYLE_TAG_ID = "data-plugin-css=\"huaqiu-plugin-update-tokens\"";
+		/**
+		* Publish canonical values for the design tokens the shell is missing.
+		*
+		* Idempotent and cheap: safe to call on every open, so a shell that publishes
+		* its tokens late still wins (the stale fallbacks are removed in that case).
+		*/
+		function ensureDesignTokens() {
+			if (typeof document === "undefined" || document.body === null) return;
+			const probe = getComputedStyle(document.body);
+			const missing = DESIGN_TOKEN_FALLBACKS.filter((entry) => probe.getPropertyValue(entry.token).trim() === "");
+			const existing = document.querySelector(`style[${TOKEN_STYLE_TAG_ID}]`);
+			if (missing.length === 0) {
+				existing?.remove();
+				return;
+			}
+			const flat = missing.filter((entry) => typeof entry.value === "string");
+			const themed = missing.filter((entry) => typeof entry.value !== "string");
+			const rules = [];
+			const lightDecls = [...flat.map((entry) => `  ${entry.token}: ${entry.value};`), ...themed.map((entry) => `  ${entry.token}: ${entry.value.light};`)];
+			rules.push(`${STYLE_ROOTS} {\n${lightDecls.join("\n")}\n}`);
+			if (themed.length > 0) {
+				const darkDecls = themed.map((entry) => `  ${entry.token}: ${entry.value.dark};`);
+				rules.push(`${DARK_STYLE_ROOTS} {\n${darkDecls.join("\n")}\n}`);
+			}
+			const tag = existing ?? document.createElement("style");
+			tag.dataset.pluginCss = "huaqiu-plugin-update-tokens";
+			tag.textContent = rules.join("\n");
+			if (tag.parentNode === null) document.head.appendChild(tag);
+		}
 		/** Inject styles once (idempotent). */
 		function injectUpdateStyles() {
 			if (typeof document === "undefined") return;
@@ -934,6 +1820,7 @@ window.__ModuleLoader__.load({
 		function apply(ctx) {
 			if (typeof document === "undefined") return () => {};
 			injectUpdateStyles();
+			ensureDesignTokens();
 			const store = new UpdateStore();
 			const copy = {
 				zh: COPY.zh,
@@ -954,11 +1841,8 @@ window.__ModuleLoader__.load({
 					fn();
 				} catch {}
 			});
-			const labelState = {
-				label: entryCopy(locale).label,
-				tooltip: entryCopy(locale).tooltip
-			};
 			const openView = () => {
+				ensureDesignTokens();
 				store.check().then((report) => {
 					if (report !== null) openUpdateView(store, copyFor());
 				});
@@ -969,8 +1853,8 @@ window.__ModuleLoader__.load({
 				plugin: PLUGIN_ID,
 				icon: UPDATE_ICON,
 				css: ENTRY_CSS,
-				label: () => labelState.label,
-				tooltip: () => labelState.tooltip,
+				label: () => entryCopy(locale).label,
+				tooltip: () => entryCopy(locale).tooltip,
 				refresh: { subscribe: refreshSubscribe },
 				badge: {
 					subscribe: (listener) => store.subscribe(listener),
@@ -989,7 +1873,7 @@ window.__ModuleLoader__.load({
 				unsubscribeLocale();
 				store.stop();
 			};
-			if (typeof ctx.effect === "function") ctx.effect(dispose, "plugin-update");
+			if (typeof ctx.effect === "function") ctx.effect(() => dispose, "plugin-update");
 			return dispose;
 		}
 		//#endregion
@@ -997,6 +1881,7 @@ window.__ModuleLoader__.load({
 		exports.UPDATE_ENTRY_SELECTOR = UPDATE_ENTRY_SELECTOR;
 		exports.UPDATE_ICON = UPDATE_ICON;
 		exports.apply = apply;
+		exports.ensureDesignTokens = ensureDesignTokens;
 		exports.inject = inject;
 		exports.injectUpdateStyles = injectUpdateStyles;
 		return module.exports;