dsh-token-use 0.3.2 → 0.3.3

package/README.en.md

@@ -13,7 +13,7 @@ Four tabs across the top of the panel: **Overview / By model / By project / Conf
 - **Overview** — the cost and totals cards, the trend chart, and a **usage heatmap** (last 12 months, one cell per day, coloured by total tokens or by cost; hovering shows that day's tokens, cost and calls **instantly**, without the native tooltip's one-second delay). Range and model filters apply here.
 - **By model** — every model's usage and amount, with the same range query (day / month / year / date range / all).
 - **By project** — every project's usage and amount, same range query.
-- **Configuration** — versions (`dsh-service`, `dsh`, `dsh-base` and this plugin: installed vs the newest release **in the channel you run**, rc/alpha/stable), runtime facts (platform version, Node version, PID, port, uptime, `DSH_HOME`), a **health check** and a confirmed **one-click restart**.
+- **Configuration** — versions (`dsh-service`, `dsh`, `dsh-base` and this plugin: installed vs the newest release **in the channel you run**, rc/alpha/stable), runtime facts (platform version, Node version, PID, port, uptime, `DSH_HOME`), a **health check**, a confirmed **one-click restart** and a confirmed **shutdown**.
 - **Self-check** (the health check button) reports three sections: **endpoint** (latency, version, history scan, price data, buckets, last update), **client bundles** (each plugin probed at the exact revisioned URL from this page's boot manifest, i.e. what the browser really loads) and **harness** (profile integrity — `node_modules`, lockfile, boot graph; plugin package integrity — entry file, `dsh.bundle.patch`, client bundle; dependency resolution; single cordis instance at one version; service bundle vs the running CLI). When a freshly installed plugin refuses to start, this names the package, the missing file and the fix.
 - **Cost card** — spend estimated live from DeepSeek's published prices × the usage recorded here, with peak/off-peak rates. Every card (totals, trend, by model, by project) carries an amount.
 - **Daily price book** — the official pricing page is fetched once a day at **12:00** and cached locally, so restarts keep it and an offline machine falls back to a built-in snapshot.
@@ -25,9 +25,13 @@ Four tabs across the top of the panel: **Overview / By model / By project / Conf
 - **Unit switch** — 亿 / 万 / 千 in Chinese, B / M / K in English; remembered per browser. The tab bar and the unit switch stay pinned at the top, and the tab you were on is remembered.
 - **Detail tables** — by model and by project (the day dimension lives in the heatmap), each with an amount column (hover a row for its rates) and a total column.
 
-### One-click restart
+### One-click restart / shutdown
 
-The button on the configuration tab restarts the dsh web process serving the page. It replays the current command line (`process.argv` plus the working directory), so custom ports and flags survive; it asks for confirmation first, and the page reconnects and reloads itself about 10-30 seconds later. The script lands in `$DSH_HOME/dsh-token-use/restart.sh` and its output in `restart.log`. When a launch cannot be replayed (no executable entry point), the button is disabled with a reason instead.
+Both actions at the bottom of the configuration tab share one **full-screen transition**: a power ring with phase copy (preparing → stopping the process → recovering → new instance ready), drawn over the whole page without disturbing the rest of the host.
+
+- **One-click restart** — restarts the dsh web process serving the page. It replays the current command line (`process.argv` plus the working directory), so custom ports and flags survive; it asks for confirmation first, and the page reconnects and reloads itself about 10-30 seconds later. The script lands in `$DSH_HOME/dsh-token-use/restart.sh` and its output in `restart.log`.
+- **Shutdown** — stops that process and does **not** bring it back; the transition ends on "you can close this page now", and you start `dsh web` again from a terminal when you need it. Its confirm button is a solid red danger button so it cannot be hit by accident.
+- When a launch cannot be replayed (no executable entry point), the restart button is disabled with a reason instead.
 
 ## The amounts are estimates
 
@@ -78,7 +82,7 @@ Every project's usage and amount, same range query.
 
 ### Configuration
 
-Versions (compared inside your release channel), runtime facts, the health check and the one-click restart.
+Versions (compared inside your release channel), runtime facts, the health check, the one-click restart and the shutdown — the last two ask for confirmation and run a full-screen transition.
 
 ![Configuration tab](assets/tab-config.jpg)
 
@@ -104,7 +108,7 @@ dsh plugin --profile web add /path/to/dsh-token-use
 - The host side **never polls and sets no periodic timer** other than the daily price refresh: it folds usage in O(1) increments from the `session/event` bus (one dictionary addition and one multiplication per `assistant/message`).
 - History is rebuilt **once** at boot by streaming `$DSH_HOME/sessions/**/session.jsonl.zstd` (native zstd from `node:zlib`), yielding the event loop between files (`scheduler.yield()`) so session handling is never blocked. A per-session sequence watermark de-duplicates the rebuild against live events, whatever order they arrive in.
 - **Price refresh**: one HTTPS GET per day at 12:00 local time (15 s timeout, retried an hour later on failure), stored atomically in `$DSH_HOME/dsh-token-use/pricing.json` (up to 30 snapshots). A restart reads the cache synchronously and does not re-fetch; a failed fetch falls back to the built-in snapshot, so the panel always shows numbers.
-- Four routes are exposed (loopback only, `no-store`): `GET /dsh-token-use` for the snapshot, `GET /dsh-token-use/config` for versions and runtime facts, `GET /dsh-token-use/health` for the harness self-check, and `POST /dsh-token-use/restart` for the confirmed restart.
+- Five routes are exposed (loopback only, `no-store`): `GET /dsh-token-use` for the snapshot, `GET /dsh-token-use/config` for versions and runtime facts, `GET /dsh-token-use/health` for the harness self-check, `POST /dsh-token-use/restart` for the confirmed restart and `POST /dsh-token-use/shutdown` for the confirmed shutdown (neither POST answers a GET).
 - **How the self-check probes**: client bundles are fetched at the revisioned URL from this page's boot manifest (a plugin URL embeds a build revision, so only the manifest can address it); the harness walk reads the profile directory, resolves each real entry file through `exports["."]` / `exports["./client"]` / `main`, and walks up from every plugin directory to spot duplicate `@deepseek-ai/cordis` copies — all read-only, never loading or executing the plugins it inspects. The report carries structured fields plus paths and versions; the panel renders the wording in your language.
 - **Version checks** read the registry's abbreviated packument (`versions` + `dist-tags`) and compare against the highest release **in the channel you run** (rc / alpha / stable) — `@deepseek-ai/dsh-web-app` keeps a stale `0.0.1-rc.1` on its `latest` tag, so a plain `latest` comparison would report a false upgrade. The answer is cached for 6 hours in `$DSH_HOME/dsh-token-use/versions.json`.
 
@@ -124,6 +128,8 @@ curl http://127.0.0.1:3080/dsh-token-use/config
 curl http://127.0.0.1:3080/dsh-token-use/health
 # restart the service (the configuration tab's button; degrades after 2 s and replays the same command)
 curl -X POST http://127.0.0.1:3080/dsh-token-use/restart
+# shut it down (the configuration tab's button; stops and does not come back)
+curl -X POST http://127.0.0.1:3080/dsh-token-use/shutdown
 ```
 
 Every bucket carries a `cost` (the estimate); `pricing` holds the current price book, when it was fetched and when it refreshes next; `modelPricing` maps each observed model to its rates or to the reason it carries no amount. `trend` spans the last 366 days — the chart takes the last 7/30/90 of it and the heatmap takes the whole run.

package/README.md

@@ -13,7 +13,7 @@ DeepSeek Harness 实时 Token 用量与消费金额插件：安装后在 **设
 - **概览**：金额与总量卡片、用量趋势图、**使用热力图**（近 12 个月，一格一天，可按「总计 / 金额」着色；悬停**即时**弹出当天「总计 / 金额 / 调用次数」，无原生 tooltip 的 1 秒延迟）。支持范围与模型筛选。
 - **模型统计**：所有模型的用量与金额明细表，支持范围查询（按天 / 按月 / 按年 / 时间段 / 全部）。
 - **项目统计**：所有项目的用量与金额明细表，同样支持范围查询。
-- **配置信息**：版本信息（`dsh-service`、`dsh`、`dsh-base`、本插件各自的已安装版本 vs 该版本**通道**（rc/alpha/stable）的最新版）、运行环境（平台版本、Node 版本、进程 PID、监听端口、已运行时长、`DSH_HOME`），以及**健康检查**与**一键重启**（带二次确认）。
+- **配置信息**：版本信息（`dsh-service`、`dsh`、`dsh-base`、本插件各自的已安装版本 vs 该版本**通道**（rc/alpha/stable）的最新版）、运行环境（平台版本、Node 版本、进程 PID、监听端口、已运行时长、`DSH_HOME`），以及**健康检查**、**一键重启**与**关机**（后两者都带二次确认）。
 - **健康检查（自检）**：分三段报告——**接口**（响应耗时、接口版本、历史扫描、定价数据、数据桶、数据更新时间）、**客户端 bundle**（逐个插件探测浏览器实际能否加载，用的是当前页面启动清单里带版本号的真实 URL）、**Harness 自检**（profile 完整性：`node_modules` / 锁文件 / 启动图；插件包完整性：入口文件、`dsh.bundle.patch`、前端 bundle 是否齐全；依赖解析；cordis 是否单实例同版本；服务端 bundle 与正在运行的 CLI 版本是否一致）。装完插件起不来时，这里会直接指出是哪个包、缺什么文件、怎么修。
 - **金额卡片**：按 DeepSeek 官方定价 × 本地用量实时估算消费金额（含高峰/空闲时段倍率），每张卡片（总量、趋势、按模型、按项目）都带金额字段。
 - **官方定价自动更新**：每天 **12:00** 抓取一次官方定价页并缓存到本地，重启不丢、断网可用内置快照兜底。
@@ -25,9 +25,13 @@ DeepSeek Harness 实时 Token 用量与消费金额插件：安装后在 **设
 - **单位切换**：中文（亿 / 万 / 千）与英文（B / M / K）一键切换，记忆选择；tab 与单位切换栏常驻顶部，每个 tab 记忆上次停留位置。
 - **明细表**：按模型、按项目两张表（按日期维度由热力图承担），含金额列（悬停显示该模型单价）与总计列。
 
-### 一键重启
+### 一键重启 / 关机
 
-「配置信息」里的重启按钮会重启正在提供页面的 dsh web 进程：它按当前进程的启动命令（`process.argv` + 工作目录）原样重新拉起，因此自定义端口、参数都能保持；点击后需在弹窗二次确认，页面断开约 10-30 秒后自动重连并刷新。脚本写在 `$DSH_HOME/dsh-token-use/restart.sh`，日志在 `$DSH_HOME/dsh-token-use/restart.log`。若启动方式无法原样重放（拿不到可执行的入口），按钮会禁用并说明原因。
+「配置信息」底部的两个动作都走同一个**全屏过渡**：电源环 + 阶段文案（准备 → 正在结束进程 → 恢复中 → 新实例已就绪），占满页面、不遮挡宿主其它区域。
+
+- **一键重启**：重启正在提供页面的 dsh web 进程。它按当前进程的启动命令（`process.argv` + 工作目录）原样重新拉起，因此自定义端口、参数都能保持；点击后弹窗二次确认，页面断开约 10-30 秒，恢复后自动重新加载。脚本写在 `$DSH_HOME/dsh-token-use/restart.sh`，日志在 `$DSH_HOME/dsh-token-use/restart.log`。
+- **关机**：停止该进程且**不会自动拉起**，过渡结束时提示「可以关闭此页面了」，需要时在终端重新运行 `dsh web`。确认按钮是红色实心，避免误点。
+- 若启动方式无法原样重放（拿不到可执行的入口），重启按钮会禁用并说明原因。
 
 
 ## 金额是估算值
@@ -79,7 +83,7 @@ DeepSeek Harness 实时 Token 用量与消费金额插件：安装后在 **设
 
 ### 配置信息
 
-版本信息（按通道对比最新版）、运行环境、健康检查与一键重启。
+版本信息（按通道对比最新版）、运行环境、健康检查、一键重启与关机（均带二次确认，动作时有全屏过渡动画）。
 
 ![配置信息 tab](assets/tab-config.jpg)
 
@@ -105,7 +109,7 @@ dsh plugin --profile web add /解压路径/dsh-token-use
 - 宿主侧 **不轮询、不写盘、不加定时器**（除了每天一次定价刷新）：通过 `session/event` 事件总线做 O(1) 增量累加（每条 `assistant/message` 一次字典加法 + 一次金额乘法）。
 - 启动时做 **一次性**历史重建：流式解压 `$DSH_HOME/sessions/**/session.jsonl.zstd`（`node:zlib` 原生 zstd），每读一个文件主动让出事件循环（`scheduler.yield()`），不阻塞会话处理；重建与实时事件用「会话 seq 水位」去重，任意先后顺序都不会重复计数。
 - **定价刷新**：每天 12:00 一次 HTTPS GET（15 秒超时，失败 1 小时后重试），结果写入 `$DSH_HOME/dsh-token-use/pricing.json`（原子替换，最多保留 30 份快照）；进程重启时同步读缓存，不重复联网；联网失败自动退回内置快照，面板照常显示。
-- 只暴露四个只读/受控接口（仅回环可访问，内存快照，`no-store`）：`GET /dsh-token-use` 数据快照、`GET /dsh-token-use/config` 版本与运行环境、`GET /dsh-token-use/health` Harness 自检、`POST /dsh-token-use/restart` 重启服务（需前端二次确认）。
+- 只暴露五个只读/受控接口（仅回环可访问，内存快照，`no-store`）：`GET /dsh-token-use` 数据快照、`GET /dsh-token-use/config` 版本与运行环境、`GET /dsh-token-use/health` Harness 自检、`POST /dsh-token-use/restart` 重启服务、`POST /dsh-token-use/shutdown` 关机（后两个都需前端二次确认，且不接受 GET）。
 - **自检怎么探**：客户端 bundle 用当前页面启动清单里的 `rev` 拉真实 URL（插件 URL 带构建版本号，只有启动清单拼得对）；Harness 自检读 profile 目录、按 `exports["."]` / `exports["./client"]` / `main` 找真实入口、从各插件目录向上解析 `@deepseek-ai/cordis` 判断是否重复——全程只读，不加载也不执行被检查的插件。报告里只有结构化字段与路径/版本，文案由前端按语言渲染。
 - **版本检查**：`/config` 读 npm registry 的精简 packument（`versions` + `dist-tags`），按**当前版本所属通道**（rc / alpha / stable）取该通道最高版来对比——`@deepseek-ai/dsh-web-app` 的 `latest` 标签长期停在 `0.0.1-rc.1`，按通道比较才不会误报。结果缓存 6 小时，写在 `$DSH_HOME/dsh-token-use/versions.json`。
 
@@ -125,6 +129,8 @@ curl http://127.0.0.1:3080/dsh-token-use/config
 curl http://127.0.0.1:3080/dsh-token-use/health
 # 重启服务（配置信息 tab 的按钮；2 秒后断开并原样拉起）
 curl -X POST http://127.0.0.1:3080/dsh-token-use/restart
+# 关机（配置信息 tab 的按钮；停掉且不再拉起）
+curl -X POST http://127.0.0.1:3080/dsh-token-use/shutdown
 ```
 
 响应里每个桶都带 `cost`（估算金额），`pricing` 是当前价目表、抓取时间与下次刷新时间，`modelPricing` 是各模型匹配到的单价或未计价原因；`trend` 覆盖最近 366 天（趋势图取尾部 7/30/90 天，热力图用整段）。

package/client/client.js

@@ -40,8 +40,31 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
   } catch (error) {
     ui = {};
   }
+  /**
+   * `react-dom` is one of the shell's static modules, so the power overlay can be
+   * portalled straight into `document.body`. Without it the overlay still renders
+   * (position: fixed) — just inside the settings dialog's DOM.
+   */
+  var reactDom = null;
+  try {
+    reactDom = require("react-dom");
+  } catch (error) {
+    reactDom = null;
+  }
+  var portalTo = reactDom !== null && typeof reactDom.createPortal === "function"
+    ? function (node) { return reactDom.createPortal(node, document.body); }
+    : null;
+  /**
+   * React takes more than a plain function as an element type: the shell wraps
+   * some atoms (Button) in `memo`/`forwardRef`, which are objects. Gating on
+   * "function" quietly dropped those to the fallback, so the gate is "anything
+   * React can render".
+   */
+  var renderable = function (value) {
+    return typeof value === "function" || (typeof value === "object" && value !== null);
+  };
   var component = function (name, fallback) {
-    return typeof ui[name] === "function" ? ui[name] : fallback;
+    return renderable(ui[name]) ? ui[name] : fallback;
   };
   /**
    * Tooltip is the right layer for the ⓘ: it positions in viewport coordinates,
@@ -53,19 +76,25 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
   var stateDot = component("StateDot", null);
   var menu = component("Menu", null);
   var modal = component("Modal", null);
+  /**
+   * Icon atoms are named `Icon<Name>Outline<Weight>` — `Regular` is the 1px
+   * stroke weight, `Medium` the 1.3px one. Each artwork already defaults to the
+   * box size its context wants (16px for controls, 14px for inline marks), so no
+   * size prop is passed.
+   */
   var icon = function (name) {
-    return typeof ui[name] === "function" ? ui[name] : null;
+    return renderable(ui[name]) ? ui[name] : null;
   };
-  var iconQuestion = icon("IconQuestionOutline14");
-  var iconChevron = icon("IconChevronDownOutline14");
-  var iconRefresh = icon("IconRefreshOutline14");
-  var iconGauge = icon("IconGaugeOutline16");
-  var iconTrend = icon("IconDataOutline16");
-  var iconCheck = icon("IconCheckOutline16");
-  var iconWarn = icon("IconWarningOutline16");
-  var iconClock = icon("IconClockOutline16");
-  var iconLoading = icon("IconLoadingOutline16");
-  var iconApi = icon("IconApiOutline14");
+  var iconQuestion = icon("IconQuestionOutlineRegular");
+  var iconChevron = icon("IconChevronDownOutlineRegular");
+  var iconRefresh = icon("IconRefreshOutlineRegular");
+  var iconGauge = icon("IconGaugeOutlineRegular");
+  var iconTrend = icon("IconDataOutlineRegular");
+  var iconCheck = icon("IconCheckOutlineRegular");
+  var iconWarn = icon("IconWarningOutlineRegular");
+  var iconClock = icon("IconClockOutlineRegular");
+  var iconLoading = icon("IconLoadingOutlineRegular");
+  var iconApi = icon("IconApiOutlineRegular");
   /** Chip and Button degrade into styled native controls on an older shell. */
   var chip = component("Pill", function (props) {
     return h("button", { type: "button", className: "dshtu_seg", "data-on": props.active === true, onClick: props.onClick, disabled: props.disabled === true }, props.children);
@@ -166,6 +195,23 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
     versionRefreshing: "检查中…",
     versionFailed: "本次检查未成功：{names}（显示的是上次结果）",
     versionFailedTitle: "失败原因：{reason}",
+    shutdown: "关机",
+    shutdownTitle: "关闭 dsh web 服务？",
+    shutdownBody: "将停止正在提供本页面的 dsh web 进程（PID {pid}），且不会自动重启。关闭后本页面将无法使用，需要时请在终端重新运行 `dsh web`。",
+    shutdownConfirm: "确认关机",
+    shutdownFailed: "关机失败：{error}",
+    cancel: "取消",
+    powerRestartTitle: "正在重启 DeepSeek Harness…",
+    powerShutdownTitle: "正在关机 DeepSeek Harness…",
+    powerPrepareRestart: "正在准备重启…",
+    powerPrepareShutdown: "正在准备关机…",
+    powerStopping: "正在结束进程，即将断开连接",
+    powerRecovering: "正在恢复…",
+    powerReloaded: "新实例已就绪，正在刷新页面",
+    powerStopped: "服务已关闭",
+    powerStoppedNote: "可以关闭此页面了；需要时请在终端重新运行 `dsh web` 启动服务。",
+    powerTimeout: "重启超时，请手动刷新页面",
+    powerTimeoutNote: "服务未在预期时间内恢复，可能需要手动启动。日志：{log}",
     healthCheck: "健康检查",
     healthRunning: "检查中…",
     healthOk: "接口正常",
@@ -328,6 +374,23 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
     versionRefreshing: "Checking…",
     versionFailed: "This check failed for {names} — showing the last successful result",
     versionFailedTitle: "Reason: {reason}",
+    shutdown: "Shut down",
+    shutdownTitle: "Shut down the dsh web service?",
+    shutdownBody: "This stops the dsh web process serving this page (PID {pid}) and will not start it again. The page stops working until you run `dsh web` in a terminal.",
+    shutdownConfirm: "Shut down",
+    shutdownFailed: "Shutdown failed: {error}",
+    cancel: "Cancel",
+    powerRestartTitle: "Restarting DeepSeek Harness…",
+    powerShutdownTitle: "Shutting DeepSeek Harness down…",
+    powerPrepareRestart: "Preparing to restart…",
+    powerPrepareShutdown: "Preparing to shut down…",
+    powerStopping: "Stopping the process — the connection is about to drop",
+    powerRecovering: "Coming back…",
+    powerReloaded: "The new instance is up — reloading",
+    powerStopped: "The service is down",
+    powerStoppedNote: "You can close this page; run `dsh web` in a terminal when you need it again.",
+    powerTimeout: "The restart timed out — reload the page manually",
+    powerTimeoutNote: "The service did not come back in time and may need to be started by hand. Log: {log}",
     healthCheck: "Health check",
     healthRunning: "Checking…",
     healthOk: "Endpoint healthy",
@@ -405,7 +468,7 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
     hintServiceVersion: "a service bundle older or newer than the running CLI is a common cause of failed plugin startups"
   };
 
-  var css = ".dshtu_wrap{max-width:860px;display:flex;flex-direction:column;gap:14px;padding:2px 2px 4px;color:var(--dsw-alias-label-primary);font-size:13px}.dshtu_card{background:var(--dsw-alias-bg-layer-3);border-radius:14px;box-shadow:var(--dsw-elevation-stroke);padding:14px 16px}.dshtu_bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dshtu_bar label{color:var(--dsw-alias-label-tertiary);font-size:12px}.dshtu_bar .dshtu_select,.dshtu_bar .dshtu_input{border:.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;border-radius:8px;padding:4px 8px;font-size:12.5px}.dshtu_bar .dshtu_select{width:168px;text-overflow:ellipsis;white-space:nowrap}.dshtu_chips{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.dshtu_subBar{margin-top:12px}.dshtu_pick{display:inline-flex;align-items:center;gap:4px;max-width:230px}.dshtu_pickLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dshtu_metaIcon{display:inline-flex;align-items:center;margin-right:5px;vertical-align:-2px;color:var(--dsw-alias-label-tertiary)}.dshtu_cardTitle{display:inline-flex;align-items:center}.dshtu_foot{display:flex;align-items:center;gap:6px}.dshtu_statLabel{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.dshtu_field{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.dshtu_seg{display:inline-flex;border:.5px solid var(--dsw-alias-border-l4);border-radius:8px;overflow:hidden}.dshtu_seg button{border:0;background:0 0;color:var(--dsw-alias-label-secondary);font:inherit;cursor:pointer;padding:4px 10px;font-size:12.5px}.dshtu_seg button[data-on=true]{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.dshtu_totalsMeta{margin-top:12px}.dshtu_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:8px}.dshtu_stat{background:var(--dsw-alias-bg-module-platform);border-radius:10px;padding:10px 12px}.dshtu_stat b{display:block;font-size:16px;line-height:24px;font-variant-numeric:tabular-nums}.dshtu_stat span{color:var(--dsw-alias-label-tertiary);font-size:12px}.dshtu_stat[data-main=true]{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 12%,var(--dsw-alias-bg-module-platform))}.dshtu_stat[data-main=true] b{color:var(--dsw-alias-state-business-primary);font-size:20px}.dshtu_table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.dshtu_table th,.dshtu_table td{text-align:right;padding:6px 8px;border-bottom:.5px solid var(--dsw-alias-border-l2);font-weight:400}.dshtu_table th:first-child,.dshtu_table td:first-child{text-align:left}.dshtu_table th{color:var(--dsw-alias-label-tertiary);font-size:12px;white-space:nowrap}.dshtu_table td:first-child{overflow-wrap:anywhere;max-width:300px;color:var(--dsw-alias-label-secondary)}.dshtu_meta{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}.dshtu_err{color:var(--dsw-alias-state-error-primary);display:flex;align-items:center;gap:10px}.dshtu_chart{width:100%;height:260px}.dshtu_info{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;color:var(--dsw-alias-label-tertiary);cursor:help}.dshtu_info:hover{color:var(--dsw-alias-state-business-primary)}.dshtu_pop{display:block;max-width:420px;font-size:12px;font-weight:400;line-height:18px;text-align:left;white-space:normal}.dshtu_pop .dshtu_sep{margin:0 5px;opacity:.55}[role=tooltip]:has(.dshtu_pop){background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);padding:10px 12px;border:0;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.16)}.dshtu_nd{color:var(--dsw-alias-label-tertiary)}.dshtu_range{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.dshtu_range input{width:132px}.dshtu_range em{font-style:normal;color:var(--dsw-alias-label-tertiary)}.dshtu_tabRow{display:flex;align-items:center;gap:10px}.dshtu_tabs{display:flex;align-items:center;gap:2px;flex:1;flex-wrap:wrap}.dshtu_tabs button{border:0;background:0 0;font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;padding:5px 10px 6px;border-bottom:2px solid transparent;font-size:13px}.dshtu_tabs button:hover{color:var(--dsw-alias-label-primary)}.dshtu_tabs button[data-on=true]{color:var(--dsw-alias-label-primary);border-bottom-color:var(--dsw-alias-state-business-primary);font-weight:500}.dshtu_heatCard{position:relative;display:flex;flex-direction:column;gap:10px}.dshtu_heatHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dshtu_heatScroll{overflow-x:auto;padding-bottom:4px}.dshtu_heatBody{display:flex;gap:3px}.dshtu_heatDays{display:flex;flex-direction:column;gap:3px;width:17px}.dshtu_heatDay{height:11px;font-size:10px;line-height:11px;color:var(--dsw-alias-label-tertiary)}.dshtu_heat{display:flex;gap:3px}.dshtu_heatCol{display:flex;flex-direction:column;gap:3px}.dshtu_heatColHead{position:relative;height:13px}.dshtu_heatColLabel{position:absolute;left:0;top:0;font-size:10px;line-height:13px;color:var(--dsw-alias-label-tertiary);white-space:nowrap}.dshtu_heatCell{width:11px;height:11px;border-radius:2px;background:var(--dsw-alias-bg-module-platform)}.dshtu_heatCell[data-future=true]{background:0 0}.dshtu_heatCell[data-day]:hover{outline:1.5px solid var(--dsw-alias-state-business-primary);outline-offset:1px}.dshtu_heatTip{position:absolute;z-index:6;transform:translate(-50%,-100%);pointer-events:none;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);padding:6px 9px;font-size:11.5px;line-height:17px;white-space:nowrap;display:flex;flex-direction:column}.dshtu_heatTip b{font-weight:500;margin-bottom:1px}.dshtu_heatTipRow{color:var(--dsw-alias-label-secondary)}.dshtu_heatLegend{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--dsw-alias-label-tertiary)}.dshtu_heatLegend i{width:11px;height:11px;border-radius:2px;display:inline-block}.dshtu_kv{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 14px;margin-top:8px;font-size:12.5px}.dshtu_kv dt{color:var(--dsw-alias-label-tertiary)}.dshtu_kv dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.dshtu_acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.dshtu_health{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 14px;margin-top:12px;padding-top:10px;border-top:.5px solid var(--dsw-alias-border-l2);font-size:12.5px}.dshtu_health dt{color:var(--dsw-alias-label-tertiary)}.dshtu_health dd{margin:0;font-variant-numeric:tabular-nums}.dshtu_stack{display:flex;flex-direction:column;gap:14px}.dshtu_tblBar{margin-top:12px}.dshtu_checkList{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}.dshtu_head{display:flex;align-items:center;gap:6px;margin-bottom:8px}.dshtu_head h3{margin:0;font-size:13px;font-weight:500}.dshtu_slim .dshtu_bar{margin:0}.dshtu_state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}.dshtu_state[data-tone=ok]{color:var(--dsw-alias-state-success-primary)}.dshtu_state[data-tone=warn]{color:var(--dsw-alias-state-warning-primary)}.dshtu_state[data-tone=bad]{color:var(--dsw-alias-state-error-primary)}.dshtu_state[data-tone=idle]{color:var(--dsw-alias-label-tertiary)}.dshtu_modalBody{font-size:12.5px;line-height:20px;color:var(--dsw-alias-label-secondary);max-width:420px}.dshtu_modalFoot{display:flex;justify-content:flex-end;gap:8px}.dshtu_verCell{font-variant-numeric:tabular-nums;white-space:nowrap}";
+  var css = ".dshtu_wrap{max-width:860px;display:flex;flex-direction:column;gap:14px;padding:2px 2px 4px;color:var(--dsw-alias-label-primary);font-size:13px}.dshtu_card{background:var(--dsw-alias-bg-layer-3);border-radius:14px;box-shadow:var(--dsw-elevation-stroke);padding:14px 16px}.dshtu_bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dshtu_bar label{color:var(--dsw-alias-label-tertiary);font-size:12px}.dshtu_bar .dshtu_select,.dshtu_bar .dshtu_input{border:.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:inherit;border-radius:8px;padding:4px 8px;font-size:12.5px}.dshtu_bar .dshtu_select{width:168px;text-overflow:ellipsis;white-space:nowrap}.dshtu_chips{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.dshtu_subBar{margin-top:12px}.dshtu_pick{display:inline-flex;align-items:center;gap:4px;max-width:230px}.dshtu_pickLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dshtu_metaIcon{display:inline-flex;align-items:center;margin-right:5px;vertical-align:-2px;color:var(--dsw-alias-label-tertiary)}.dshtu_cardTitle{display:inline-flex;align-items:center}.dshtu_foot{display:flex;align-items:center;gap:6px}.dshtu_statLabel{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.dshtu_field{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.dshtu_seg{display:inline-flex;border:.5px solid var(--dsw-alias-border-l4);border-radius:8px;overflow:hidden}.dshtu_seg button{border:0;background:0 0;color:var(--dsw-alias-label-secondary);font:inherit;cursor:pointer;padding:4px 10px;font-size:12.5px}.dshtu_seg button[data-on=true]{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}.dshtu_totalsMeta{margin-top:12px}.dshtu_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:8px}.dshtu_stat{background:var(--dsw-alias-bg-module-platform);border-radius:10px;padding:10px 12px}.dshtu_stat b{display:block;font-size:16px;line-height:24px;font-variant-numeric:tabular-nums}.dshtu_stat span{color:var(--dsw-alias-label-tertiary);font-size:12px}.dshtu_stat[data-main=true]{background:color-mix(in srgb,var(--dsw-alias-state-business-primary) 12%,var(--dsw-alias-bg-module-platform))}.dshtu_stat[data-main=true] b{color:var(--dsw-alias-state-business-primary);font-size:20px}.dshtu_table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.dshtu_table th,.dshtu_table td{text-align:right;padding:6px 8px;border-bottom:.5px solid var(--dsw-alias-border-l2);font-weight:400}.dshtu_table th:first-child,.dshtu_table td:first-child{text-align:left}.dshtu_table th{color:var(--dsw-alias-label-tertiary);font-size:12px;white-space:nowrap}.dshtu_table td:first-child{overflow-wrap:anywhere;max-width:300px;color:var(--dsw-alias-label-secondary)}.dshtu_meta{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}.dshtu_err{color:var(--dsw-alias-state-error-primary);display:flex;align-items:center;gap:10px}.dshtu_chart{width:100%;height:260px}.dshtu_info{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;color:var(--dsw-alias-label-tertiary);cursor:help}.dshtu_info:hover{color:var(--dsw-alias-state-business-primary)}.dshtu_pop{display:block;max-width:420px;font-size:12px;font-weight:400;line-height:18px;text-align:left;white-space:normal}.dshtu_pop .dshtu_sep{margin:0 5px;opacity:.55}[role=tooltip]:has(.dshtu_pop){background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);padding:10px 12px;border:0;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.16)}.dshtu_nd{color:var(--dsw-alias-label-tertiary)}.dshtu_range{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.dshtu_range input{width:132px}.dshtu_range em{font-style:normal;color:var(--dsw-alias-label-tertiary)}.dshtu_tabRow{display:flex;align-items:center;gap:10px}.dshtu_tabs{display:flex;align-items:center;gap:2px;flex:1;flex-wrap:wrap}.dshtu_tabs button{border:0;background:0 0;font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;padding:5px 10px 6px;border-bottom:2px solid transparent;font-size:13px}.dshtu_tabs button:hover{color:var(--dsw-alias-label-primary)}.dshtu_tabs button[data-on=true]{color:var(--dsw-alias-label-primary);border-bottom-color:var(--dsw-alias-state-business-primary);font-weight:500}.dshtu_heatCard{position:relative;display:flex;flex-direction:column;gap:10px}.dshtu_heatHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dshtu_heatScroll{overflow-x:auto;padding-bottom:4px}.dshtu_heatBody{display:flex;gap:3px}.dshtu_heatDays{display:flex;flex-direction:column;gap:3px;width:17px}.dshtu_heatDay{height:11px;font-size:10px;line-height:11px;color:var(--dsw-alias-label-tertiary)}.dshtu_heat{display:flex;gap:3px}.dshtu_heatCol{display:flex;flex-direction:column;gap:3px}.dshtu_heatColHead{position:relative;height:13px}.dshtu_heatColLabel{position:absolute;left:0;top:0;font-size:10px;line-height:13px;color:var(--dsw-alias-label-tertiary);white-space:nowrap}.dshtu_heatCell{width:11px;height:11px;border-radius:2px;background:var(--dsw-alias-bg-module-platform)}.dshtu_heatCell[data-future=true]{background:0 0}.dshtu_heatCell[data-day]:hover{outline:1.5px solid var(--dsw-alias-state-business-primary);outline-offset:1px}.dshtu_heatTip{position:absolute;z-index:6;transform:translate(-50%,-100%);pointer-events:none;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);padding:6px 9px;font-size:11.5px;line-height:17px;white-space:nowrap;display:flex;flex-direction:column}.dshtu_heatTip b{font-weight:500;margin-bottom:1px}.dshtu_heatTipRow{color:var(--dsw-alias-label-secondary)}.dshtu_heatLegend{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--dsw-alias-label-tertiary)}.dshtu_heatLegend i{width:11px;height:11px;border-radius:2px;display:inline-block}.dshtu_kv{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 14px;margin-top:8px;font-size:12.5px}.dshtu_kv dt{color:var(--dsw-alias-label-tertiary)}.dshtu_kv dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.dshtu_acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}.dshtu_health{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 14px;margin-top:12px;padding-top:10px;border-top:.5px solid var(--dsw-alias-border-l2);font-size:12.5px}.dshtu_health dt{color:var(--dsw-alias-label-tertiary)}.dshtu_health dd{margin:0;font-variant-numeric:tabular-nums}.dshtu_stack{display:flex;flex-direction:column;gap:14px}.dshtu_tblBar{margin-top:12px}.dshtu_checkList{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}.dshtu_head{display:flex;align-items:center;gap:6px;margin-bottom:8px}.dshtu_head h3{margin:0;font-size:13px;font-weight:500}.dshtu_slim .dshtu_bar{margin:0}.dshtu_state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}.dshtu_state[data-tone=ok]{color:var(--dsw-alias-state-success-primary)}.dshtu_state[data-tone=warn]{color:var(--dsw-alias-state-warn-primary)}.dshtu_state[data-tone=bad]{color:var(--dsw-alias-state-error-primary)}.dshtu_state[data-tone=idle]{color:var(--dsw-alias-label-tertiary)}.dshtu_modalBody{font-size:12.5px;line-height:20px;color:var(--dsw-alias-label-secondary);max-width:420px}.dshtu_modalFoot{display:flex;justify-content:flex-end;gap:8px}.dshtu_verCell{font-variant-numeric:tabular-nums;white-space:nowrap}.dshtu_acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.dshtu_acts button{flex:none}.dshtu_danger{color:var(--dsw-alias-state-error-primary)}.dshtu_danger:hover{background:var(--dsw-alias-interactive-bg-hover-danger)}.dshtu_dangerFill{background:var(--dsw-alias-state-error-primary)!important;color:#fff!important;border-color:transparent!important}.dshtu_dangerFill:hover{background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 86%,#000)!important}.dshtu_warnBtn{color:var(--dsw-alias-state-warn-primary)}.dshtu_warnBtn:hover{background:color-mix(in srgb,var(--dsw-alias-state-warn-primary) 10%,transparent)}.dshtu_head .dshtu_grow{flex:1}.dshtu_power{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--dsw-alias-bg-layer-1) 92%,#000);backdrop-filter:blur(7px);animation:dshtu-power-in .3s ease both}.dshtu_powerBox{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 44px;text-align:center;max-width:min(560px,80vw)}.dshtu_ring{position:relative;width:120px;height:120px}.dshtu_ring svg{position:absolute;inset:0;width:100%;height:100%}.dshtu_ringTrack{fill:none;stroke:color-mix(in srgb,var(--dsw-alias-label-primary) 14%,transparent);stroke-width:5}.dshtu_ringArc{fill:none;stroke:var(--dsw-alias-state-business-primary);stroke-width:5;stroke-linecap:round;stroke-dasharray:74 260;transform-origin:60px 60px;animation:dshtu-ring-spin 1.15s linear infinite}.dshtu_glyph{fill:none;stroke:var(--dsw-alias-label-primary);stroke-width:6;stroke-linecap:round;opacity:.9;animation:dshtu-glyph-pulse 1.8s ease-in-out infinite}.dshtu_power[data-mode=shutdown] .dshtu_ringArc{stroke:var(--dsw-alias-state-error-primary)}.dshtu_power[data-mode=shutdown] .dshtu_glyph{stroke:var(--dsw-alias-state-error-primary)}.dshtu_powerTitle{font-size:17px;font-weight:600;letter-spacing:.2px}.dshtu_powerPhase{font-size:13px;color:var(--dsw-alias-label-secondary);min-height:20px}.dshtu_powerBar{width:240px;height:3px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--dsw-alias-label-primary) 12%,transparent)}.dshtu_powerBar i{display:block;width:38%;height:100%;border-radius:2px;background:var(--dsw-alias-state-business-primary);animation:dshtu-bar-slide 1.35s ease-in-out infinite}.dshtu_power[data-mode=shutdown] .dshtu_powerBar i{background:var(--dsw-alias-state-error-primary)}.dshtu_powerNote{font-size:12.5px;line-height:20px;color:var(--dsw-alias-label-secondary);max-width:420px}.dshtu_powerNote code{background:var(--dsw-alias-bg-module-platform);border-radius:5px;padding:2px 6px;font-size:12px}.dshtu_power[data-phase=stopped] .dshtu_ringArc,.dshtu_power[data-phase=timeout] .dshtu_ringArc{animation:none;stroke-dasharray:none;opacity:.45}.dshtu_power[data-phase=stopped] .dshtu_powerBar,.dshtu_power[data-phase=timeout] .dshtu_powerBar,.dshtu_power[data-phase=reloaded] .dshtu_powerBar{visibility:hidden}.dshtu_power[data-phase=stopped] .dshtu_glyph,.dshtu_power[data-phase=timeout] .dshtu_glyph{animation:none}@keyframes dshtu-power-in{from{opacity:0}to{opacity:1}}@keyframes dshtu-ring-spin{to{transform:rotate(360deg)}}@keyframes dshtu-glyph-pulse{0%,100%{opacity:.9}50%{opacity:.45}}@keyframes dshtu-bar-slide{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}";
 
   function trimNum(v, decimals) {
     var f = v.toFixed(decimals);
@@ -1206,6 +1269,60 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
         }).reduce(function (flat, pair) { return flat.concat(pair); }, []))));
   }
 
+  /** A power symbol for the shutdown button — the shell ships no power icon. */
+  function powerGlyph(size) {
+    return h("svg", {
+      width: size || 16,
+      height: size || 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round"
+    },
+    h("path", { d: "M12 3v9" }),
+    h("path", { d: "M6.6 6.8a8 8 0 1 0 10.8 0" }));
+  }
+
+  /**
+   * Fullscreen transition for restart and shutdown: a power ring that keeps
+   * turning while the old process winds down, the phase it is in, and — once it
+   * is over — what to do next. Nothing here is a fake progress bar: the phases
+   * follow what the browser can actually observe (the request landed, the old
+   * process stopped answering, a *new* instance answered).
+   */
+  function PowerOverlay(props) {
+    var t = props.t;
+    var power = props.power;
+    if (power === null || power === undefined) return null;
+    var mode = power.mode === "shutdown" ? "shutdown" : "restart";
+    var phase = power.phase;
+    var phaseText = phase === "prepare"
+      ? (mode === "restart" ? t("powerPrepareRestart") : t("powerPrepareShutdown"))
+      : phase === "stopping" ? t("powerStopping")
+      : phase === "recovering" ? t("powerRecovering")
+      : phase === "reloaded" ? t("powerReloaded")
+      : phase === "stopped" ? t("powerStopped")
+      : t("powerTimeout");
+    var note = phase === "stopped" ? t("powerStoppedNote")
+      : phase === "timeout" ? t("powerTimeoutNote").replace("{log}", power.log === null || power.log === undefined ? "—" : power.log)
+      : null;
+    var node = h("div", { className: "dshtu_power", "data-mode": mode, "data-phase": phase, role: "status", "aria-live": "polite" },
+      h("div", { className: "dshtu_powerBox" },
+        h("div", { className: "dshtu_ring" },
+          h("svg", { viewBox: "0 0 120 120" },
+            h("circle", { className: "dshtu_ringTrack", cx: 60, cy: 60, r: 52 }),
+            h("circle", { className: "dshtu_ringArc", cx: 60, cy: 60, r: 52 })),
+          h("svg", { viewBox: "0 0 120 120" },
+            h("path", { className: "dshtu_glyph", d: "M60 30 V58" }),
+            h("path", { className: "dshtu_glyph", d: "M41 41a27 27 0 1 0 38 0" }))),
+        h("div", { className: "dshtu_powerTitle" }, mode === "restart" ? t("powerRestartTitle") : t("powerShutdownTitle")),
+        h("div", { className: "dshtu_powerPhase" }, phaseText),
+        h("div", { className: "dshtu_powerBar" }, h("i", null)),
+        note === null ? null : h("div", { className: "dshtu_powerNote" }, note)));
+    return portalTo === null ? node : portalTo(node);
+  }
+
   /** `已安装 / 最新 / 状态` for one tracked package. */
   function versionRow(t, entry) {
     var tone = entry.status === "current" ? "ok" : (entry.status === "outdated" ? "warn" : "idle");
@@ -1272,7 +1389,17 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
     var healthLabel = health === null ? null : health.state === "ok" ? t("healthOk") : health.state === "error" ? t("healthFail") + "：" + health.error : t("healthRunning");
     return h("div", { className: "dshtu_stack" },
       h("div", { className: "dshtu_card" },
-        h("div", { className: "dshtu_head" }, iconApi === null ? null : h(iconApi, {}), h("h3", null, t("configVersions"))),
+        h("div", { className: "dshtu_head" },
+          iconApi === null ? null : h(iconApi, {}),
+          h("h3", null, t("configVersions")),
+          h("span", { className: "dshtu_grow" }),
+          h(button, {
+            variant: "ghost",
+            size: "sm",
+            disabled: props.refreshing === true,
+            icon: iconRefresh === null ? null : h(iconRefresh, {}),
+            onClick: props.onRefresh
+          }, props.refreshing === true ? t("versionRefreshing") : t("versionRefresh"))),
         h("table", { className: "dshtu_table" },
           h("thead", null, h("tr", null,
             h("th", null, t("versionPackage")),
@@ -1280,16 +1407,8 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
             h("th", null, t("versionLatest")),
             h("th", null, t("versionState")))),
           h("tbody", null, (config.packages || []).map(function (entry) { return versionRow(t, entry); }))),
-        h("div", { className: "dshtu_bar dshtu_tblBar" },
-          h("span", { className: "dshtu_meta" }, config.checkedAt > 0 ? t("versionChecked").replace("{time}", fmtTime(config.checkedAt)) : ""),
-          h("span", { style: { flex: "1" } }),
-          h(button, {
-            variant: "outline",
-            size: "sm",
-            disabled: props.refreshing === true,
-            icon: iconRefresh === null ? null : h(iconRefresh, {}),
-            onClick: props.onRefresh
-          }, props.refreshing === true ? t("versionRefreshing") : t("versionRefresh"))),
+        h("div", { className: "dshtu_meta", style: { marginTop: "10px" } },
+          config.checkedAt > 0 ? t("versionChecked").replace("{time}", fmtTime(config.checkedAt)) : ""),
         failed.length === 0 ? null : h("div", {
           className: "dshtu_state",
           "data-tone": "warn",
@@ -1323,19 +1442,30 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
           config.restartable === false
             ? h("span", { className: "dshtu_meta" }, t("restartBlocked"))
             : h(button, {
-              variant: "primary",
+              variant: "outline",
               size: "sm",
+              className: "dshtu_warnBtn",
               icon: iconRefresh === null ? null : h(iconRefresh, {}),
-              disabled: props.restart !== null && props.restart.state !== "error",
+              disabled: props.busy === true,
               onClick: props.onRestart
             }, t("restart")),
+          config.shutdownable === false
+            ? null
+            : h(button, {
+              variant: "outline",
+              size: "sm",
+              className: "dshtu_danger",
+              icon: powerGlyph(16),
+              disabled: props.busy === true,
+              onClick: props.onShutdown
+            }, t("shutdown")),
           healthLabel === null ? null : h("span", { className: "dshtu_state", "data-tone": tone },
             health.state === "running" && iconLoading !== null ? h(iconLoading, {}) : null,
             healthLabel)),
-        props.restart === null ? null : h("div", { className: "dshtu_meta", style: { marginTop: "10px" } },
-          props.restart.state === "pending" ? t("restartPending")
-            : props.restart.state === "done" ? t("restartDone")
-            : t("restartFailed").replace("{error}", props.restart.error))),
+        props.powerError === null || props.powerError === undefined ? null : h("div", { className: "dshtu_meta", style: { marginTop: "10px" } },
+          props.powerError.kind === "shutdown"
+            ? t("shutdownFailed").replace("{error}", props.powerError.error)
+            : t("restartFailed").replace("{error}", props.powerError.error))),
       h(HealthPanel, {
         key: "health",
         t: t,
@@ -1381,8 +1511,11 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
     var _p = useState(null), configError = _p[0], setConfigError = _p[1];
     var _q = useState(0), configTick = _q[0], setConfigTick = _q[1];
     var _r = useState(null), health = _r[0], setHealth = _r[1];
-    var _s = useState(null), restart = _s[0], setRestart = _s[1];
+    var _s = useState(null), powerError = _s[0], setPowerError = _s[1];
     var _t = useState(false), confirming = _t[0], setConfirming = _t[1];
+    // The fullscreen power transition: `{ mode, phase, log }` or null when idle.
+    var _x = useState(null), power = _x[0], setPower = _x[1];
+    var _y = useState(false), confirmingShutdown = _y[0], setConfirmingShutdown = _y[1];
     var _u = useState(null), harness = _u[0], setHarness = _u[1];
     var _v = useState(null), bundles = _v[0], setBundles = _v[1];
     var _w = useState(false), refreshing = _w[0], setRefreshing = _w[1];
@@ -1561,9 +1694,17 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
      * had time to go down (the script waits two seconds), so the first success
      * cannot be the old process answering.
      */
+    /**
+     * Restart, watched from the browser. Once the old process is gone it cannot
+     * report anything, so the phases are what the page can actually observe: the
+     * request landed, the socket stopped answering, and finally a *different*
+     * instance answered (a new `startedAt`) — only then is the page reloaded.
+     */
     var doRestart = function () {
       setConfirming(false);
-      setRestart({ state: "pending" });
+      setPowerError(null);
+      var previousStartedAt = data === null || data === undefined ? null : data.startedAt;
+      setPower({ mode: "restart", phase: "prepare", log: null });
       fetch("/dsh-token-use/restart", { method: "POST", headers: { accept: "application/json" } })
         .then(function (res) {
           return res.json().then(function (json) {
@@ -1571,25 +1712,80 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
             return json;
           });
         })
-        .then(function () {
-          var attempts = 0;
+        .then(function (json) {
+          setPower({ mode: "restart", phase: "stopping", log: json.logFile || null });
           setTimeout(function () {
+            setPower({ mode: "restart", phase: "recovering", log: json.logFile || null });
+            var deadline = Date.now() + 90000;
             var timer = setInterval(function () {
-              attempts++;
+              if (Date.now() > deadline) {
+                clearInterval(timer);
+                setPower({ mode: "restart", phase: "timeout", log: json.logFile || null });
+                return;
+              }
               fetch("/dsh-token-use", { cache: "no-store" })
-                .then(function (res) {
-                  if (!res.ok) return;
-                  clearInterval(timer);
-                  setRestart({ state: "done" });
-                  setTimeout(function () { location.reload(); }, 800);
+                .then(function (res) { return res.ok ? res.json() : null; })
+                .then(function (next) {
+                  if (next === null) return;
+                  if (previousStartedAt === null || next.startedAt !== previousStartedAt) {
+                    clearInterval(timer);
+                    setPower({ mode: "restart", phase: "reloaded", log: null });
+                    setTimeout(function () { location.reload(); }, 900);
+                  }
                 })
                 .catch(function () {});
-              if (attempts > 90) clearInterval(timer);
-            }, 2000);
+            }, 1500);
+          }, 6000);
+        })
+        .catch(function (err) {
+          setPower(null);
+          setPowerError({ kind: "restart", error: String(err) });
+        });
+    };
+
+    /**
+     * Shutdown: the same transition, but it ends with the service staying down.
+     * A refused request is the success signal here, so the first failure (or the
+     * deadline) settles the overlay on 「服务已关闭」.
+     */
+    var doShutdown = function () {
+      setConfirmingShutdown(false);
+      setPowerError(null);
+      setPower({ mode: "shutdown", phase: "prepare", log: null });
+      fetch("/dsh-token-use/shutdown", { method: "POST", headers: { accept: "application/json" } })
+        .then(function (res) {
+          return res.json().then(function (json) {
+            if (!res.ok) throw new Error(json && json.error ? json.error : "http " + res.status);
+            return json;
+          });
+        })
+        .then(function (json) {
+          setPower({ mode: "shutdown", phase: "stopping", log: json.logFile || null });
+          setTimeout(function () {
+            setPower({ mode: "shutdown", phase: "recovering", log: json.logFile || null });
+            var deadline = Date.now() + 45000;
+            var timer = setInterval(function () {
+              fetch("/dsh-token-use", { cache: "no-store" })
+                .then(function (res) {
+                  if (!res.ok) throw new Error("down");
+                  return res.json();
+                })
+                .then(function () {
+                  if (Date.now() > deadline) {
+                    clearInterval(timer);
+                    setPower({ mode: "shutdown", phase: "stopped", log: null });
+                  }
+                })
+                .catch(function () {
+                  clearInterval(timer);
+                  setPower({ mode: "shutdown", phase: "stopped", log: null });
+                });
+            }, 1500);
           }, 6000);
         })
         .catch(function (err) {
-          setRestart({ state: "error", error: String(err) });
+          setPower(null);
+          setPowerError({ kind: "shutdown", error: String(err) });
         });
     };
 
@@ -1640,6 +1836,11 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
     }
     metaParts.push(t("updated").replace("{time}", fmtTime(data.updatedAt)));
     var scanState = data.scan && data.scan.error ? "error" : (data.scan && data.scan.done ? "done" : "ongoing");
+    /** The pid both confirmation dialogs name, when the config tab has loaded it. */
+    var pidText = function () {
+      return config === null || config === undefined || config.platform === undefined ? "?"
+        : String(config.platform.pid);
+    };
     var rangeItems = [
       { id: "day", label: t("filterDay") },
       { id: "month", label: t("filterMonth") },
@@ -1739,11 +1940,13 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
         config: config,
         error: configError,
         health: health,
-        restart: restart,
         harness: harness,
         bundles: bundles,
         onHealth: runHealth,
         onRestart: function () { setConfirming(true); },
+        onShutdown: function () { setConfirmingShutdown(true); },
+        busy: power !== null,
+        powerError: powerError,
         refreshing: refreshing,
         onRefresh: refreshConfig
       })];
@@ -1756,10 +1959,21 @@ window.__ModuleLoader__.load({ id: "dsh-token-use", factory: (require) => {
         title: t("restartTitle"),
         closeLabel: t("close"),
         footer: h("div", { className: "dshtu_modalFoot" },
-          h(button, { variant: "ghost", size: "sm", onClick: function () { setConfirming(false); } }, t("restartCancel")),
+          h(button, { variant: "ghost", size: "sm", onClick: function () { setConfirming(false); } }, t("cancel")),
           h(button, { variant: "primary", size: "sm", onClick: doRestart }, t("restartConfirm")))
       }, h("div", { className: "dshtu_modalBody" },
-        t("restartBody").replace("{pid}", config === null || config.platform === undefined ? "?" : String(config.platform.pid)))),
+        t("restartBody").replace("{pid}", pidText()))),
+      modal === null ? null : h(modal, {
+        open: confirmingShutdown,
+        onClose: function () { setConfirmingShutdown(false); },
+        title: t("shutdownTitle"),
+        closeLabel: t("close"),
+        footer: h("div", { className: "dshtu_modalFoot" },
+          h(button, { variant: "ghost", size: "sm", onClick: function () { setConfirmingShutdown(false); } }, t("cancel")),
+          h(button, { variant: "primary", size: "sm", className: "dshtu_dangerFill", onClick: doShutdown }, t("shutdownConfirm")))
+      }, h("div", { className: "dshtu_modalBody" },
+        t("shutdownBody").replace("{pid}", pidText()))),
+      h(PowerOverlay, { key: "power", t: t, power: power }),
       h("div", { className: "dshtu_foot" },
         stateDot === null ? null : h(stateDot, { state: scanState, size: 8 }),
         h("span", { className: "dshtu_meta" }, metaParts.join(" · "))));

package/lib/index.js

@@ -24,7 +24,8 @@ import { join } from 'node:path'
 import { zstdDecompressSync } from 'node:zlib'
 import { scheduler } from 'node:timers/promises'
 import { PricingStore } from './pricing.js'
-import { VersionStore, installedVersion, restartScript, scheduleRestart } from './versions.js'
+import { VersionStore, installedVersion } from './versions.js'
+import { powerCapability, scheduleRestart, scheduleShutdown } from './power.js'
 import { checkHarness } from './health.js'
 
 export const name = 'dsh-token-use'
@@ -790,14 +791,13 @@ export class UsageTracker {
     // `?refresh=1` is the panel's re-check button: it skips the six-hour cache.
     const force = new URL(req.url, 'http://localhost').searchParams.get('refresh') === '1'
     const report = await versions.describe({ port, dshHome: this.dshHome, force })
-    const planned = restartScript({ pid: process.pid, argv: process.argv, cwd: process.cwd(), logFile: 'probe' })
     res.writeHead(200, { 'content-type': 'application/json; charset=utf-8' })
     res.end(JSON.stringify({
       ok: true,
       name,
       version: VERSION,
       endpoint: this.endpoint,
-      restartable: planned !== undefined,
+      ...powerCapability(),
       ...report,
     }))
   }
@@ -863,6 +863,33 @@ export class UsageTracker {
     res.end(JSON.stringify({ ok: true, delaySec: 2, logFile: scheduled.logFile, script: scheduled.script }))
   }
 
+  /** Shutdown: stop the service for good, after the panel's confirmation. */
+  handleShutdown(req, res) {
+    res.setHeader('cache-control', 'no-store')
+    if (req.method !== 'POST') {
+      res.writeHead(405, { 'content-type': 'application/json; charset=utf-8' })
+      res.end(JSON.stringify({ ok: false, error: 'method not allowed' }))
+      return
+    }
+    if (!this.trusted(req)) {
+      this.deny(res)
+      return
+    }
+    const scheduled = scheduleShutdown(this.dshHome)
+    if (scheduled === undefined) {
+      res.writeHead(409, { 'content-type': 'application/json; charset=utf-8' })
+      res.end(JSON.stringify({ ok: false, error: 'this process cannot be stopped from here' }))
+      return
+    }
+    if (scheduled.error !== undefined) {
+      res.writeHead(500, { 'content-type': 'application/json; charset=utf-8' })
+      res.end(JSON.stringify({ ok: false, error: scheduled.error }))
+      return
+    }
+    res.writeHead(200, { 'content-type': 'application/json; charset=utf-8' })
+    res.end(JSON.stringify({ ok: true, graceSec: scheduled.graceSeconds, logFile: scheduled.logFile }))
+  }
+
   handle(req, res) {
     res.setHeader('cache-control', 'no-store')
     if (req.method !== 'GET') {
@@ -959,6 +986,7 @@ export function apply(ctx, config = {}) {
         { path: `${endpoint}/config`, handler: (req, res) => tracker.handleConfig(req, res, versions) },
         { path: `${endpoint}/health`, handler: (req, res) => tracker.handleHealth(req, res) },
         { path: `${endpoint}/restart`, handler: (req, res) => tracker.handleRestart(req, res) },
+        { path: `${endpoint}/shutdown`, handler: (req, res) => tracker.handleShutdown(req, res) },
       ]
       const disposers = routes.map((route) => host.webServer.register({ kind: 'exact', ...route }))
       return () => {

package/lib/power.js

@@ -0,0 +1,127 @@
+/**
+ * Process lifecycle for the configuration tab: restart and shutdown.
+ *
+ * Both actions change the page under the user's feet, so the work happens in a
+ * detached shell script rather than inline: the HTTP response has to reach the
+ * browser first, and the script must outlive the process it is about to stop.
+ *
+ * Relaunching replays the running command line (`process.execPath` + `argv` +
+ * cwd) instead of guessing a CLI invocation, so custom ports, flags and working
+ * directories survive. Shutdown simply stops and never starts again — the user
+ * brings the service back by hand, which the panel says in as many words.
+ *
+ * @module dsh-token-use/power
+ */
+import { spawn } from 'node:child_process'
+import { mkdirSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+/** How long the script waits before touching the process (ms, in whole seconds). */
+const GRACE_SECONDS = 2
+/** How long the script waits for a graceful exit before escalating. */
+const STOP_TIMEOUT_SECONDS = 30
+
+/** Single-quote a shell word so paths with spaces survive. */
+function shellQuote(value) {
+  return `'${String(value).replaceAll("'", `'\\''`)}'`
+}
+
+/** The stop half both scripts share: TERM, wait, then KILL. */
+function stopCommands(pid) {
+  return [
+    `kill -TERM ${pid} 2>/dev/null`,
+    'i=0',
+    `while kill -0 ${pid} 2>/dev/null && [ "$i" -lt ${STOP_TIMEOUT_SECONDS} ]; do sleep 1; i=$((i+1)); done`,
+    `kill -9 ${pid} 2>/dev/null`,
+  ]
+}
+
+/**
+ * The detached restart script: wait for the response to land, stop the process
+ * that serves this request, then start the very same command again from the
+ * same directory.
+ *
+ * @returns the script text, or undefined when the running command is unusable.
+ */
+export function restartScript({ pid, argv, cwd: workingDir, logFile }) {
+  const entry = argv[1]
+  const rest = argv.slice(2)
+  if (typeof entry !== 'string' || entry.length === 0 || typeof pid !== 'number') return undefined
+  const command = [process.execPath, entry, ...rest].map(shellQuote).join(' ')
+  return [
+    '#!/bin/sh',
+    '# Written by dsh-token-use: restart the dsh web service on demand.',
+    `sleep ${GRACE_SECONDS}`,
+    ...stopCommands(pid),
+    'sleep 1',
+    `cd ${shellQuote(workingDir)} || exit 1`,
+    `nohup ${command} >>${shellQuote(logFile)} 2>&1 </dev/null &`,
+    '',
+  ].join('\n')
+}
+
+/**
+ * The detached shutdown script: stop the process and leave it stopped. There is
+ * no relaunch, because "关闭" has to mean what it says.
+ *
+ * @returns the script text, or undefined when the running pid is unusable.
+ */
+export function shutdownScript({ pid, logFile }) {
+  if (typeof pid !== 'number' || Number.isNaN(pid)) return undefined
+  return [
+    '#!/bin/sh',
+    '# Written by dsh-token-use: stop the dsh web service and stay down.',
+    `sleep ${GRACE_SECONDS}`,
+    ...stopCommands(pid),
+    `echo "dsh-token-use: stopped pid ${pid} at $(date)" >>${shellQuote(logFile)}`,
+    '',
+  ].join('\n')
+}
+
+/** Write a script and run it detached, so it survives the process it stops. */
+function fire(dshHome, name, script) {
+  if (script === undefined) return undefined
+  const dir = join(dshHome, 'dsh-token-use')
+  const scriptFile = join(dir, `${name}.sh`)
+  try {
+    mkdirSync(dir, { recursive: true })
+    writeFileSync(scriptFile, script, { mode: 0o700 })
+  } catch (error) {
+    return { error: String(error?.message ?? error) }
+  }
+  const child = spawn('sh', [scriptFile], { detached: true, stdio: 'ignore' })
+  child.unref()
+  return { script: scriptFile, logFile: join(dir, `${name}.log`), graceSeconds: GRACE_SECONDS }
+}
+
+/**
+ * Restart the service.
+ * @returns `{ script, logFile, graceSeconds }`, or undefined when the current
+ * command line cannot be replayed, or `{ error }` when the script cannot be written.
+ */
+export function scheduleRestart(dshHome) {
+  const logFile = join(dshHome, 'dsh-token-use', 'restart.log')
+  return fire(dshHome, 'restart', restartScript({
+    pid: process.pid,
+    argv: process.argv,
+    cwd: process.cwd(),
+    logFile,
+  }))
+}
+
+/**
+ * Shut the service down. `restartable` in the config report tells the panel
+ * whether this is offered at all.
+ */
+export function scheduleShutdown(dshHome) {
+  const logFile = join(dshHome, 'dsh-token-use', 'shutdown.log')
+  return fire(dshHome, 'shutdown', shutdownScript({ pid: process.pid, logFile }))
+}
+
+/** Whether this launch can be restarted / shut down at all. */
+export function powerCapability() {
+  return {
+    restartable: restartScript({ pid: process.pid, argv: process.argv, cwd: process.cwd(), logFile: 'probe' }) !== undefined,
+    shutdownable: shutdownScript({ pid: process.pid, logFile: 'probe' }) !== undefined,
+  }
+}

package/lib/versions.js

@@ -13,7 +13,7 @@
  *
  * @module dsh-token-use/versions
  */
-import { execFileSync, spawn } from 'node:child_process'
+import { execFileSync } from 'node:child_process'
 import { mkdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { arch, platform as platformName, release, type as osType } from 'node:os'
@@ -379,65 +379,3 @@ function cleanMessage(message) {
   if (text.length === 0) return 'unknown error'
   return text.length > 140 ? `${text.slice(0, 137)}...` : text
 }
-
-/** Single-quote a shell word so paths with spaces survive. */
-function shellQuote(value) {
-  return `'${String(value).replaceAll("'", `'\\''`)}'`
-}
-
-/**
- * The detached restart script: wait for the response to land, stop the process
- * that serves this request, then start the very same command again from the
- * same directory. Relaunching by `argv` (not by a guessed CLI invocation)
- * keeps custom flags, ports and working directories intact.
- *
- * @returns the script text, or undefined when the running command is unusable.
- */
-export function restartScript({ pid, argv, cwd: workingDir, logFile }) {
-  const entry = argv[1]
-  const rest = argv.slice(2)
-  if (typeof entry !== 'string' || entry.length === 0 || typeof pid !== 'number') return undefined
-  const command = [process.execPath, entry, ...rest].map(shellQuote).join(' ')
-  return [
-    '#!/bin/sh',
-    '# Written by dsh-token-use: restart the dsh web service on demand.',
-    'sleep 2',
-    `kill -TERM ${pid} 2>/dev/null`,
-    'i=0',
-    `while kill -0 ${pid} 2>/dev/null && [ "$i" -lt 30 ]; do sleep 1; i=$((i+1)); done`,
-    `kill -9 ${pid} 2>/dev/null`,
-    'sleep 1',
-    `cd ${shellQuote(workingDir)} || exit 1`,
-    `nohup ${command} >>${shellQuote(logFile)} 2>&1 </dev/null &`,
-    '',
-  ].join('\n')
-}
-
-/**
- * Write and fire the restart script, fully detached so it outlives the server
- * it is about to stop.
- *
- * @returns `{ script, logFile }` for the response, or undefined when the
- * current command line cannot be relaunched safely.
- */
-export function scheduleRestart(dshHome) {
-  const dir = join(dshHome, 'dsh-token-use')
-  const logFile = join(dir, 'restart.log')
-  const scriptFile = join(dir, 'restart.sh')
-  const script = restartScript({
-    pid: process.pid,
-    argv: process.argv,
-    cwd: process.cwd(),
-    logFile,
-  })
-  if (script === undefined) return undefined
-  try {
-    mkdirSync(dir, { recursive: true })
-    writeFileSync(scriptFile, script, { mode: 0o700 })
-  } catch (error) {
-    return { error: String(error?.message ?? error) }
-  }
-  const child = spawn('sh', [scriptFile], { detached: true, stdio: 'ignore' })
-  child.unref()
-  return { script: scriptFile, logFile }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-token-use",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Real-time token usage and estimated spend for DeepSeek Harness, in a four-tab settings panel: an overview with cost/totals cards, a trend chart with a daily-average line and a 12-month usage heatmap; by-model and by-project tables with day/month/year/date-range queries; and versions, runtime facts, a harness self-check and a one-click restart. Prices come from DeepSeek's official page, refreshed daily, peak/off-peak aware. · 实时 Token 用量与估算金额面板，四个 tab：概览（金额/总量卡片、带日均线的趋势图、近 12 个月使用热力图）、模型统计与项目统计（按天/月/年/时间段/全部查询）、配置信息（版本对比、运行环境、Harness 自检、一键重启）。定价取 DeepSeek 官网、每日自动更新，区分高峰/空闲。",
   "keywords": [
     "dsh",