dsh-stop-service 0.3.0 → 0.4.1

package/README.md

@@ -4,13 +4,15 @@ A stop-service button for DeepSeek Harness (DSH) Web: one confirmed click gracef
 
 ## 功能 / Features
 
-- **实时服务信息**：进程 PID、启动时间、运行时长、活跃会话数、内存占用、CPU 占用、Node / DSH 宿主 / 插件版本、平台——每 5 秒自动刷新，附内存趋势迷你图
+- **实时服务信息**：进程 PID、启动时间、运行时长、活跃会话数、内存占用、CPU 占用、Node / DSH 宿主 / 插件版本、平台——每 5 秒自动刷新，附内存/CPU 趋势迷你图；CPU ≥ 80% 或内存 ≥ 1024 MB 时对应行高亮警示
+- **更新提醒**：面板顶部对比 npm registry 最新版，DSH 宿主或插件有新版时提示并附升级命令（浏览器端直查 registry，宿主不外联）
 - **复制诊断信息**：一键复制版本与运行状态摘要，提 issue 时直接粘贴
 - 带**确认弹窗**的「终止服务」按钮：确认框显示将断开的活跃会话数；宿主进程收到 SIGTERM 优雅退出——会话落盘、端口释放，效果与在终端执行 `kill <pid>` 完全一致
 - **服务回归自动刷新**：停止后持续探测，终端里重启完成时页面自动刷新接回
 - 界面适配 `--dsw-*` 主题变量，跟随皮肤切换；中英双语文案
 
-- Live service info: PID, start time, uptime, active sessions, memory, CPU, Node/DSH/plugin versions, platform — auto-refreshed every 5s, with a memory sparkline.
+- Live service info: PID, start time, uptime, active sessions, memory, CPU, Node/DSH/plugin versions, platform — auto-refreshed every 5s, with memory/CPU sparklines; rows highlight when CPU ≥ 80% or memory ≥ 1024 MB.
+- Update banner: compares against npm dist-tags from the browser (the host never phones out) and shows the upgrade command when a newer DSH host or plugin exists.
 - Copy-diagnostics button for issue reports.
 - Confirm-guarded stop button that names the live session count; SIGTERM graceful shutdown, identical to `kill <pid>` from a terminal.
 - Auto-reload once the restarted host comes back.
@@ -23,17 +25,19 @@ A stop-service button for DeepSeek Harness (DSH) Web: one confirmed click gracef
 
 ## 安装 / Install
 
-> [!IMPORTANT]
-> 本插件**未发布到 npm**——`npm install dsh-stop-service` 与 `dsh plugin add dsh-stop-service` 均不可用，请使用下方 Git 安装方式。
-> This plugin is **NOT published on npm** — the npm-based install commands will not work. Use the Git-based methods below.
+方式一 / Option 1 — npm 直装（推荐 / recommended）:
 
-方式一 / Option 1 — GitHub 直装（实测于 dsh 0.1.2-rc.1 / verified on dsh 0.1.2-rc.1）:
+```sh
+dsh plugin --profile web add dsh-stop-service
+```
+
+方式二 / Option 2 — GitHub 直装:
 
 ```sh
 dsh plugin --profile web add github:KhaosGx/dsh-stop-service
 ```
 
-方式二 / Option 2 — 克隆后本地 link（适合参与开发 / for development）:
+方式三 / Option 3 — 克隆后本地 link（适合参与开发 / for development）:
 
 ```sh
 git clone https://github.com/KhaosGx/dsh-stop-service.git

package/lib/client.js

@@ -62,9 +62,39 @@ window.__ModuleLoader__.load({
 			return `${sec}${t("secUnit")}`;
 		}
 
-		const InfoCard = ({ t }) => {
-			const [info, setInfo] = react.useState(null);
-			const [history, setHistory] = react.useState([]);
+		/** Normalize values into a 100x28 viewBox polyline. */
+		function sparklinePoints(values) {
+			const min = Math.min(...values);
+			const max = Math.max(...values);
+			const span = max - min || 1;
+			const step = 100 / (values.length - 1);
+			return values
+				.map((v, i) => `${(i * step).toFixed(1)},${(25 - ((v - min) / span) * 22).toFixed(1)}`)
+				.join(" ");
+		}
+
+		/** One labeled sparkline; renders nothing before two samples exist. */
+		const TrendChart = ({ label, values }) => values.length >= 2
+			? jsx("div", { style: { marginTop: 10 }, children: [
+					jsx("div", { style: { fontSize: 11, opacity: 0.55, marginBottom: 4 }, children: label }),
+					jsx("svg", {
+						width: "100%",
+						height: 28,
+						viewBox: "0 0 100 28",
+						preserveAspectRatio: "none",
+						style: { display: "block" },
+						children: jsx("polyline", {
+							points: sparklinePoints(values),
+							fill: "none",
+							stroke: "var(--dsw-accent, #4a90d9)",
+							strokeWidth: 1.4,
+							vectorEffect: "non-scaling-stroke"
+						})
+					})
+				] })
+			: null;
+
+		const InfoCard = ({ t, info, history, cpuHistory }) => {
 			const [copied, setCopied] = react.useState(false);
 
 			const copyDiagnostics = async () => {
@@ -87,40 +117,24 @@ window.__ModuleLoader__.load({
 			};
 
 			react.useEffect(() => {
-				let alive = true;
-				const load = async () => {
-					try {
-						const res = await fetch("/api/dsh-stop-service/info");
-						const data = await res.json();
-						if (alive && data?.ok) {
-							setInfo(data);
-							if (typeof data.memoryRssMb === "number") {
-								setHistory((prev) => [...prev, data.memoryRssMb].slice(-36));
-							}
-						}
-					} catch {
-						// Host unreachable (e.g. stopping); keep the last snapshot.
-					}
-				};
-				load();
-				const timer = window.setInterval(load, 5000);
-				return () => {
-					alive = false;
-					window.clearInterval(timer);
-				};
+				// Polling lives in StopServiceTab; this card only renders.
 			}, []);
 
 			if (info === null) {
 				return jsx("p", { style: { fontSize: 13, opacity: 0.6 }, children: t("loading") });
 			}
 
+			/** Display thresholds for the warning highlight. */
+			const CPU_WARN_PERCENT = 80;
+			const MEM_WARN_MB = 1024;
+
 			const rows = [
 				[t("infoPid"), String(info.pid)],
 				[t("infoStartedAt"), new Date(info.startedAt).toLocaleString()],
 				[t("infoUptime"), formatUptime(info.uptimeMs, t)],
 				[t("infoSessions"), typeof info.sessionCount === "number" ? String(info.sessionCount) : "-"],
-				[t("infoMemory"), `${info.memoryRssMb} MB`],
-				[t("infoCpu"), typeof info.cpuPercent === "number" ? `${info.cpuPercent}%` : "-"],
+				[t("infoMemory"), `${info.memoryRssMb} MB`, info.memoryRssMb >= MEM_WARN_MB],
+				[t("infoCpu"), typeof info.cpuPercent === "number" ? `${info.cpuPercent}%` : "-", typeof info.cpuPercent === "number" && info.cpuPercent >= CPU_WARN_PERCENT],
 				[t("infoNode"), info.node ?? "-"],
 				[t("infoHostVersion"), info.hostVersion ?? "-"],
 				[t("infoPluginVersion"), info.pluginVersion ?? "-"],
@@ -155,38 +169,25 @@ window.__ModuleLoader__.load({
 							})
 						]
 					}),
-				...rows.map(([label, value]) => jsx("div", { style: rowStyle, children: [
+				...rows.map(([label, value, warn]) => jsx("div", { style: rowStyle, children: [
 					jsx("span", { style: labelStyle, children: label }),
-					jsx("span", { style: valueStyle, children: value })
+					jsx("span", {
+						style: warn === true
+							? { ...valueStyle, color: "var(--dsw-danger, #d33)", fontWeight: 600 }
+							: valueStyle,
+						children: value
+					})
 				] }, label)),
-				history.length >= 2
-					? jsx("div", { key: "sparkline", style: { marginTop: 10 }, children: [
-							jsx("div", { key: "label", style: { fontSize: 11, opacity: 0.55, marginBottom: 4 }, children: `${t("memTrend")} (${history.length * 5}s)` }),
-							jsx("svg", {
-								key: "svg",
-								width: "100%",
-								height: 28,
-								viewBox: "0 0 100 28",
-								preserveAspectRatio: "none",
-								style: { display: "block" },
-								children: jsx("polyline", {
-									points: (() => {
-										const min = Math.min(...history);
-										const max = Math.max(...history);
-										const span = max - min || 1;
-										const step = 100 / (history.length - 1);
-										return history
-											.map((v, i) => `${(i * step).toFixed(1)},${(25 - ((v - min) / span) * 22).toFixed(1)}`)
-											.join(" ");
-									})(),
-									fill: "none",
-									stroke: "var(--dsw-accent, #4a90d9)",
-									strokeWidth: 1.4,
-									vectorEffect: "non-scaling-stroke"
-								})
-							})
-						] })
-					: null,
+				jsx(TrendChart, {
+					key: "mem-chart",
+					label: `${t("memTrend")} (${history.length * 5}s)`,
+					values: history
+				}),
+				jsx(TrendChart, {
+					key: "cpu-chart",
+					label: `${t("cpuTrend")} (${cpuHistory.length * 5}s)`,
+					values: cpuHistory
+				}),
 			]
 		});
 	};
@@ -246,31 +247,31 @@ window.__ModuleLoader__.load({
 			}
 
 			return jsx("div", {
-				style: cardStyle,
+				style: {
+					...cardStyle,
+					padding: "12px 16px",
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					gap: 16,
+					marginBottom: 20,
+					flexWrap: "wrap",
+				},
 				children: [
-					jsx("h3", {
-						key: "title",
-						style: { margin: "0 0 8px", fontSize: 15 },
-						children: t("title")
-					}),
-					jsx("p", {
+					jsx("span", {
 						key: "desc",
-						style: { margin: "0 0 4px", fontSize: 13, opacity: 0.85, lineHeight: 1.7 },
-						children: t("desc")
-					}),
-					jsx("p", {
-						key: "hint",
-						style: { margin: "0 0 16px", fontSize: 12, opacity: 0.6, lineHeight: 1.7 },
-						children: t("hint")
+						style: { fontSize: 12.5, opacity: 0.8, lineHeight: 1.6 },
+						children: t("stopRowDesc")
 					}),
 					jsx("button", {
 						key: "button",
 						onClick: onStop,
 						disabled: state === "stopping",
 						style: {
-							padding: "8px 18px",
+							padding: "7px 16px",
 							fontSize: 13,
 							borderRadius: 8,
+							flexShrink: 0,
 							border: "1px solid var(--dsw-danger, #d33)",
 							background: state === "stopping" ? "transparent" : "var(--dsw-danger, #d33)",
 							color: state === "stopping" ? "var(--dsw-danger, #d33)" : "var(--dsw-danger-text, #fff)",
@@ -282,12 +283,121 @@ window.__ModuleLoader__.load({
 			});
 		};
 
+		/** Minimal semver compare (numeric fields; release outranks prerelease; unknown → 0). */
+		function compareVersion(a, b) {
+			const pattern = /^(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?$/;
+			const pa = pattern.exec(String(a ?? ""));
+			const pb = pattern.exec(String(b ?? ""));
+			if (pa === null || pb === null) return 0;
+			for (let i = 1; i <= 3; i += 1) {
+				const diff = Number(pa[i]) - Number(pb[i]);
+				if (diff !== 0) return diff > 0 ? 1 : -1;
+			}
+			if (pa[4] === pb[4]) return 0;
+			if (pa[4] === undefined) return 1;
+			if (pb[4] === undefined) return -1;
+			return 0;
+		}
+
+		/**
+		 * Update banner: compares local host/plugin versions (from /info) against
+		 * the npm registry's public dist-tags, queried directly from the browser.
+		 * Offline-tolerant — the banner simply stays hidden.
+		 */
+		const UpdateBanner = ({ t, info }) => {
+			const [lines, setLines] = react.useState(null);
+
+			react.useEffect(() => {
+				if (info === null) return;
+				let alive = true;
+				(async () => {
+					let hostLatest = null;
+					let pluginLatest = null;
+					try {
+						const res = await fetch("https://registry.npmjs.org/-/package/@deepseek-ai/dsh/dist-tags");
+						if (res.ok) {
+							const tags = await res.json();
+							if (typeof tags?.latest === "string") hostLatest = tags.latest;
+						}
+					} catch {
+						// Registry unreachable; hide the banner.
+					}
+					try {
+						const res = await fetch("https://registry.npmjs.org/-/package/dsh-stop-service/dist-tags");
+						if (res.ok) {
+							const tags = await res.json();
+							if (typeof tags?.latest === "string") pluginLatest = tags.latest;
+						}
+					} catch {
+						// Registry unreachable; hide the banner.
+					}
+					if (!alive) return;
+					const found = [];
+					if (hostLatest !== null && info.hostVersion && compareVersion(hostLatest, info.hostVersion) > 0) {
+						found.push(t("updHost").replace("{v}", hostLatest).replace("{c}", info.hostVersion));
+					}
+					if (pluginLatest !== null && info.pluginVersion && compareVersion(pluginLatest, info.pluginVersion) > 0) {
+						found.push(t("updPlugin").replace("{v}", pluginLatest).replace("{c}", info.pluginVersion));
+					}
+					if (found.length > 0) setLines(found);
+				})();
+				return () => {
+					alive = false;
+				};
+			}, [info === null ? null : info.hostVersion, info === null ? null : info.pluginVersion]);
+
+			if (lines === null) return null;
+			return jsx("div", {
+				style: {
+					border: "1px solid var(--dsw-accent, #4a90d9)",
+					borderRadius: 10,
+					padding: "10px 14px",
+					marginBottom: 16,
+					fontSize: 13,
+					lineHeight: 1.7,
+				},
+				children: lines.map((line) => jsx("p", { style: { margin: 0 }, children: line }, line))
+			});
+		};
+
 		const StopServiceTab = ({ t }) => {
+			const [info, setInfo] = react.useState(null);
+			const [history, setHistory] = react.useState([]);
+			const [cpuHistory, setCpuHistory] = react.useState([]);
+
+			react.useEffect(() => {
+				let alive = true;
+				const load = async () => {
+					try {
+						const res = await fetch("/api/dsh-stop-service/info");
+						const data = await res.json();
+						if (alive && data?.ok) {
+							setInfo(data);
+							if (typeof data.memoryRssMb === "number") {
+								setHistory((prev) => [...prev, data.memoryRssMb].slice(-36));
+							}
+							if (typeof data.cpuPercent === "number") {
+								setCpuHistory((prev) => [...prev, data.cpuPercent].slice(-36));
+							}
+						}
+					} catch {
+						// Host unreachable (e.g. stopping); keep the last snapshot.
+					}
+				};
+				load();
+				const timer = window.setInterval(load, 5000);
+				return () => {
+					alive = false;
+					window.clearInterval(timer);
+				};
+			}, []);
+
 			return jsx("div", {
 				style: { padding: "24px 8px", maxWidth: 560 },
 				children: [
-					jsx(InfoCard, { key: "info", t: t }),
+					jsx(UpdateBanner, { key: "updates", t: t, info: info }),
 					jsx(StopCard, { key: "stop", t: t }),
+					jsx(InfoCard, { key: "info", t: t, info: info, history: history, cpuHistory: cpuHistory }),
 				]
 			});
 		};
@@ -311,6 +421,7 @@ window.__ModuleLoader__.load({
 					infoMemory: "内存占用 (RSS)",
 					infoCpu: "CPU 占用",
 					memTrend: "内存趋势",
+					cpuTrend: "CPU 趋势",
 					infoNode: "Node 版本",
 					infoHostVersion: "DSH 宿主版本",
 					infoPluginVersion: "插件版本",
@@ -319,9 +430,9 @@ window.__ModuleLoader__.load({
 					hourUnit: "小时",
 					minUnit: "分",
 					secUnit: "秒",
-					title: "终止服务",
-					desc: "优雅停止当前 DeepSeek Harness 宿主进程（SIGTERM，与终端 kill 相同）：会话落盘、端口释放，不会留下后台孤儿进程。",
-					hint: "停止后需要重启：在终端运行 npx @deepseek-ai/dsh web，服务回归后本页自动刷新。",
+					stopRowDesc: "优雅停止宿主进程（SIGTERM，与终端 kill 等效），不留孤儿进程。",
+					updHost: "DSH 宿主有新版本 {v} 可用（当前 {c}），可在终端升级：npm install -g @deepseek-ai/dsh@{v}",
+					updPlugin: "插件有新版本 {v} 可用（当前 {c}）：dsh plugin --profile web add dsh-stop-service@{v}",
 					stop: "终止服务",
 					stopping: "正在停止…",
 					confirm: "确定要终止当前 DeepSeek Harness 服务吗？所有会话将断开（已保存的会话不受影响）。",
@@ -341,6 +452,7 @@ window.__ModuleLoader__.load({
 					infoMemory: "Memory (RSS)",
 					infoCpu: "CPU",
 					memTrend: "Memory trend",
+					cpuTrend: "CPU trend",
 					infoNode: "Node",
 					infoHostVersion: "DSH host",
 					infoPluginVersion: "Plugin",
@@ -349,9 +461,9 @@ window.__ModuleLoader__.load({
 					hourUnit: "h ",
 					minUnit: "m ",
 					secUnit: "s",
-					title: "Stop Service",
-					desc: "Gracefully stops the current DeepSeek Harness host process (SIGTERM, same as a terminal kill): sessions flush and the port is released — no orphaned background process.",
-					hint: "To start it again, run npx @deepseek-ai/dsh web in a terminal; this page reloads automatically once it is back.",
+					stopRowDesc: "Gracefully stop the host process (SIGTERM, like a terminal kill) — no orphaned processes.",
+					updHost: "A newer DSH host {v} is available (current {c}) — upgrade from a terminal: npm install -g @deepseek-ai/dsh@{v}",
+					updPlugin: "A newer plugin {v} is available (current {c}) — dsh plugin --profile web add dsh-stop-service@{v}",
 					stop: "Stop Service",
 					stopping: "Stopping…",
 					confirm: "Stop the current DeepSeek Harness service? All sessions disconnect (saved sessions are unaffected).",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-stop-service",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "type": "module",
   "main": "lib/index.js",
   "description": "A stop-service button for DeepSeek Harness Web: one confirmed click gracefully terminates the running dsh host (SIGTERM) — no orphaned background processes",