dsh-config-manager 0.1.63 → 0.1.65

package/src/ui/report.test.ts

@@ -4,8 +4,8 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import {
-  exportCountsText, formatBytes, importSectionStats, renderExportReport, renderImportReport,
-  renderRollbackReport, sectionFromItemId, suggestedActions,
+  exportCountsText, formatBytes, importProblems, importSectionStats, importTotals,
+  renderExportReport, renderImportReport, renderRollbackReport, sectionFromItemId, suggestedActions,
 } from './report.ts';
 import { makeUiT } from './i18n.ts';
 import { makeExportReport, makeImportResult, makeRollbackReport } from './test-helpers.ts';
@@ -103,6 +103,36 @@ test('report: suggestedActions 仅「完成」（报告已内联全部详情，
   assert.deepEqual(suggestedActions(failed), ['done']);
 });
 
+test('report: importTotals 汇总（ok/跳过/警告/失败 + problems 不含跳过）', () => {
+  const totals = importTotals(makeImportResult().executed);
+  assert.deepEqual(totals, { ok: 5, skipped: 2, warned: 0, failed: 0, problems: 0 });
+
+  const withIssues = importTotals([
+    { itemId: 'settings:a', status: 'ok' },
+    { itemId: 'plugin:x', status: 'warning', message: '装不上' },
+    { itemId: 'mcp:m', status: 'failed', message: 'npx 不存在' },
+    { itemId: 'plugin:y', status: 'skipped' },
+  ]);
+  assert.deepEqual(withIssues, { ok: 1, skipped: 1, warned: 1, failed: 1, problems: 2 });
+});
+
+test('report: importProblems 抽失败/警告项（带分区与原因，保持执行顺序）', () => {
+  const problems = importProblems([
+    { itemId: 'settings:a', status: 'ok' },
+    { itemId: 'plugin:x', status: 'warning', message: '插件 x 安装失败: npm 不可达' },
+    { itemId: 'plugin:y', status: 'skipped' },
+    { itemId: 'mcp:m', status: 'failed', message: 'npx 不存在' },
+    { itemId: 'weird', status: 'warning' },
+  ]);
+  assert.deepEqual(problems.map((p) => p.itemId), ['plugin:x', 'mcp:m', 'weird'], '只留失败/警告，顺序不变');
+  assert.equal(problems[0]!.section, 'plugins', '分区由 itemId 前缀推断（与分区统计同源）');
+  assert.equal(problems[0]!.status, 'warning');
+  assert.equal(problems[0]!.message, '插件 x 安装失败: npm 不可达');
+  assert.equal(problems[1]!.section, 'mcp');
+  assert.equal(problems[2]!.section, 'other', '未知前缀归 other');
+  assert.equal(problems[2]!.message, undefined, '无原因时不留 undefined 字段');
+});
+
 test('report: formatBytes', () => {
   assert.equal(formatBytes(512), '512 B');
   assert.equal(formatBytes(20480), '20.0 KB');

package/src/ui/report.ts

@@ -115,6 +115,58 @@ export function importSectionStats(executed: readonly ExecutedItem[]): ImportSec
   return [...bySection.values()];
 }
 
+/** 导入结果总数（跨分区合计口径；结果页顶部「总览」徽章用，替代逐分区 `settings: 6✓ 12≈` 天书）。 */
+export interface ImportTotals {
+  ok: number;
+  skipped: number;
+  warned: number;
+  failed: number;
+  /** 需要用户关注的项数 = 警告 + 失败（跳过是「按预期未写」，不算问题）。 */
+  problems: number;
+}
+
+/** 汇总 executed 的总数（与 importSectionStats 同源口径：ok / skipped / warning / failed）。 */
+export function importTotals(executed: readonly ExecutedItem[]): ImportTotals {
+  const totals: ImportTotals = { ok: 0, skipped: 0, warned: 0, failed: 0, problems: 0 };
+  for (const e of executed) {
+    if (e.status === 'ok') totals.ok += 1;
+    else if (e.status === 'skipped') totals.skipped += 1;
+    else if (e.status === 'warning') totals.warned += 1;
+    else totals.failed += 1;
+  }
+  totals.problems = totals.warned + totals.failed;
+  return totals;
+}
+
+/** 结果页「需要你关注」清单条目（失败 / 警告项 + 所属分区）。 */
+export interface ImportProblem {
+  section: SectionId | 'other';
+  itemId: string;
+  status: 'failed' | 'warning';
+  message?: string;
+}
+
+/**
+ * 跨分区抽出失败 / 警告项（保持执行顺序）。
+ *
+ * 为什么需要：原先这些项的原因只以纯文本行埋在 `renderImportReport` 的等宽块里
+ * （`  说明: 插件 x 安装失败…`），用户看到「⚠ 5 需要注意」却不知道是哪 5 个；结构化
+ * 清单直接把「哪一项 + 什么原因」摆出来。
+ */
+export function importProblems(executed: readonly ExecutedItem[]): ImportProblem[] {
+  const out: ImportProblem[] = [];
+  for (const e of executed) {
+    if (e.status !== 'failed' && e.status !== 'warning') continue;
+    out.push({
+      section: sectionFromItemId(e.itemId),
+      itemId: e.itemId,
+      status: e.status,
+      ...(e.message !== undefined ? { message: e.message } : {}),
+    });
+  }
+  return out;
+}
+
 /** 导入报告渲染（含回滚状态；§22 动作按钮由 suggestedActions 给出） */
 export function renderImportReport(result: ImportResult, t: UiT = zhUiT): string {
   const lines: string[] = [result.ok ? t('report.importComplete') : t('report.importFailed'), ''];

package/src/ui/runs-view.test.ts

@@ -0,0 +1,152 @@
+/**
+ * 运行中心模型单测：卡片可终止性 / 待决策态 / 日志聚合 / 决策框默认值。
+ */
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+import { cancelDialogModel, relativeTimeLabel, runCards, runSummary, RUN_CARD_LOG_TAIL } from './runs-view.ts';
+import type { RunState } from '../core/run-registry.ts';
+
+function run(partial: Partial<RunState> & { runId: string }): RunState {
+  return {
+    kind: 'import',
+    status: 'running',
+    section: null,
+    sectionTotal: null,
+    item: null,
+    itemTotal: null,
+    detail: null,
+    log: [],
+    pendingDecision: null,
+    createdAt: 0,
+    updatedAt: 0,
+    ...partial,
+  };
+}
+
+test('runCards：按 updatedAt 倒序，且不修改入参数组', () => {
+  const list = [run({ runId: 'a', updatedAt: 100 }), run({ runId: 'b', updatedAt: 300 })];
+  const cards = runCards(list);
+  assert.deepEqual(cards.map((c) => c.runId), ['b', 'a']);
+  assert.deepEqual(list.map((r) => r.runId), ['a', 'b'], '入参数组顺序不得被就地改写');
+});
+
+test('runCards：只有「导入 + running」可终止（其余 run 类型没有安全点，绝不放假按钮）', () => {
+  const cards = runCards([
+    run({ runId: 'imp', kind: 'import' }),
+    run({ runId: 'sync', kind: 'sync-apply' }),
+    run({ runId: 'done', status: 'done' }),
+    run({ runId: 'auto', kind: 'autosync' }),
+  ]);
+  assert.deepEqual(cards.filter((c) => c.canCancel).map((c) => c.runId), ['imp']);
+});
+
+test('runCards：待决策态优先（在等人 ≠ 卡住）：awaitingDecision 为真时不得同时给出终止按钮', () => {
+  const cards = runCards([run({ runId: 'waiting', pendingDecision: 'cancel' })]);
+  assert.equal(cards[0]?.awaitingDecision, true);
+  assert.equal(cards[0]?.canCancel, false, '已在等决策时再点终止没有意义');
+  assert.equal(cards[0]?.canSkip, false, '等待决策期间不得再发跳过');
+});
+
+test('runCards：跳过当前插件的判据复用 isSkippablePluginInstall（detail 带 plugin: 前缀）', () => {
+  const cards = runCards([
+    run({ runId: 'installing', section: 'plugins', detail: 'plugin:@linxin666/dsh-ssh' }),
+    run({ runId: 'patching', section: 'plugins', detail: 'plugins:pnpm-workspace.yaml' }),
+    run({ runId: 'settings', section: 'settings', detail: 'settings:general' }),
+  ]);
+  assert.deepEqual(cards.filter((c) => c.canSkip).map((c) => c.runId), ['installing'], '只有正在安装的插件项可跳过');
+});
+
+test('runCards：日志聚合出计数与问题数，尾部行按上限截断', () => {
+  const log = [
+    '▶ plugin:a',
+    '✓ plugin:a',
+    '▶ plugin:b',
+    '⚠ plugin:b',
+    '▶ plugin:c',
+    '✗ plugin:c',
+  ];
+  const cards = runCards([run({ runId: 'x', log, item: 2, itemTotal: 5 })]);
+  const card = cards[0];
+  assert.equal(card?.counts?.ok, 1);
+  assert.equal(card?.counts?.warn, 1);
+  assert.equal(card?.counts?.fail, 1);
+  assert.equal(card?.problems, 2, '问题数 = 警告 + 失败');
+  assert.equal(card?.progress.percent, 40);
+  const many = Array.from({ length: 30 }, (_v, i) => `line-${i}`);
+  assert.equal(runCards([run({ runId: 'y', log: many })])[0]?.logTail.length, RUN_CARD_LOG_TAIL);
+  assert.equal(runCards([run({ runId: 'y', log: many })])[0]?.logTail.at(-1), 'line-29');
+});
+
+test('runCards：无 item/itemTotal → percent=null（不编造 0% 或 100%）', () => {
+  const card = runCards([run({ runId: 'n', item: null, itemTotal: null })])[0];
+  assert.equal(card?.progress.percent, null);
+  assert.equal(card?.counts, null, '无日志时不产出空计数对象');
+});
+
+test('runSummary：只统计 running，awaiting 是其中待决策的那部分', () => {
+  const summary = runSummary([
+    run({ runId: 'a' }),
+    run({ runId: 'b', pendingDecision: 'cancel' }),
+    run({ runId: 'c', status: 'done' }),
+  ]);
+  assert.deepEqual(summary, { running: 2, awaiting: 1, total: 3 });
+});
+
+test('cancelDialogModel：默认选项跟随用户既有的「失败不回滚」偏好', () => {
+  const conservative = cancelDialogModel(run({ runId: 'a', item: 1, itemTotal: 4 }), { defaultRollbackOnError: true });
+  assert.equal(conservative.defaultDecision, 'rollback');
+  const keepPreferred = cancelDialogModel(run({ runId: 'a', item: 1, itemTotal: 4 }), { defaultRollbackOnError: false });
+  assert.equal(keepPreferred.defaultDecision, 'keep');
+  assert.deepEqual(keepPreferred.options.map((o) => o.id), ['rollback', 'keep']);
+});
+
+test('cancelDialogModel：代价数字可算则算、算不出给 null（绝不编造）', () => {
+  const known = cancelDialogModel(run({ runId: 'a', item: 3, itemTotal: 10 }), { defaultRollbackOnError: true });
+  assert.equal(known.appliedCount, 3);
+  assert.equal(known.pendingCount, 7);
+  const unknown = cancelDialogModel(run({ runId: 'a' }), { defaultRollbackOnError: true });
+  assert.equal(unknown.appliedCount, null);
+  assert.equal(unknown.pendingCount, null);
+  assert.equal(unknown.totalCount, null);
+});
+test('relativeTimeLabel：刚刚 / 分钟 / 小时 / 天（时钟漂移不得产出负数）', () => {
+  const now = 10_000_000_000
+  assert.deepEqual(relativeTimeLabel(now - 5_000, now), { key: 'overview.time.now' })
+  assert.deepEqual(relativeTimeLabel(now - 3 * 60_000, now), { key: 'overview.time.min', params: { n: '3' } })
+  assert.deepEqual(relativeTimeLabel(now - 5 * 3_600_000, now), { key: 'overview.time.hour', params: { n: '5' } })
+  assert.deepEqual(relativeTimeLabel(now - 50 * 3_600_000, now), { key: 'overview.time.day', params: { n: '2' } })
+  assert.deepEqual(relativeTimeLabel(now + 60_000, now), { key: 'overview.time.now' })
+});
+
+test('runCards：每张卡片带相对时间（没有它「正在跑」和「几小时前就结束」看起来一样）', () => {
+  const now = 10_000_000_000
+  const cards = runCards([
+    run({ runId: 'old', status: 'done', updatedAt: now - 2 * 3_600_000 }),
+    run({ runId: 'fresh', updatedAt: now - 10_000 }),
+  ], { now })
+  assert.deepEqual(cards.find((c) => c.runId === 'old')?.time, { key: 'overview.time.hour', params: { n: '2' } })
+  assert.deepEqual(cards.find((c) => c.runId === 'fresh')?.time, { key: 'overview.time.now' })
+});
+/**
+ * 用户报告的场景：点了「终止」以后界面只说「完成当前任务后终止」，然后就没了 ——
+ * 等多久、是不是卡住、还能做什么，全都没有。这三条用例钉住「等待可见 + 超阈值给出路」。
+ */
+test('cancelWait：已请求终止但未到安全点 → 显示已等待分钟数；超过阈值升级为 stuck', () => {
+  const now = 10_000_000
+  const fresh = runCards([run({ runId: 'a', cancelRequestedAt: now - 30_000 })], { now })[0]
+  assert.deepEqual(fresh?.cancelWait, { minutes: 0, stuck: false }, '刚请求：不显示分钟，也不算卡住');
+  const waiting = runCards([run({ runId: 'b', cancelRequestedAt: now - 3 * 60_000 })], { now })[0]
+  assert.deepEqual(waiting?.cancelWait, { minutes: 3, stuck: true }, '超过阈值必须标记 stuck（界面要给「先跳过/否则重启」的出路）');
+  assert.equal(waiting?.canCancel, false, '已请求过就不再给终止按钮（再点没有任何新效果）');
+});
+
+test('cancelWait：未请求终止 → null；已到安全点（待决策）→ 由 awaitingDecision 接管，不再显示等待', () => {
+  const now = 10_000_000
+  const idle = runCards([run({ runId: 'a' })], { now })[0]
+  assert.equal(idle?.cancelWait, null)
+  assert.equal(idle?.canCancel, true, '没请求过终止 → 可以终止');
+  const atSafePoint = runCards([run({ runId: 'b', cancelRequestedAt: now - 60_000, pendingDecision: 'cancel' })], { now })[0]
+  assert.equal(atSafePoint?.cancelWait, null, '已到安全点：界面切到决策框，不再显示「等待」')
+  assert.equal(atSafePoint?.awaitingDecision, true)
+});

package/src/ui/runs-view.ts

@@ -0,0 +1,207 @@
+/**
+ * 运行中心（Run Center）纯渲染模型：把宿主 /runs 的 RunState 列表变成「一张卡片 + 一次决策」。
+ *
+ * 为什么单独一层：卡片要区分「在跑 / 在等人 / 已结束」，决策框要算「已应用多少 / 剩下多少」
+ * 并给出默认选项 —— 这些判据都必须可单测（UI 分层铁律：逻辑在 src/ui，React 壳只装配）。
+ *
+ * 三条设计约束（读码得出，不是偏好）：
+ *  1. **可终止 ≠ 所有 run**：只有导入引擎实现了「计划项边界协作式取消」（/runs/cancel）；
+ *     其余 run 类型（同步/恢复/备份/自动同步）没有安全点，UI 必须如实禁用而不是给个假按钮。
+ *  2. **待决策态优先于一切**：pendingDecision 非空时 run 并没有卡住，它在等人 —— 卡片必须显性提示，
+ *     否则用户会以为任务死了（这正是「终止需弹窗」的功能入口）。
+ *  3. **默认选项跟随既有偏好**：用户此前勾过「失败不回滚」（rollbackOnError=false）时，决策框默认落在
+ *     「保留已应用项」；没勾过则默认「回滚」。不推翻用户已有的心智，也不替他做更危险的选择。
+ */
+import type { RunKind, RunState } from '../core/run-registry.ts'
+import { buildImportLogModel } from './import-log.ts'
+import { isSkippablePluginInstall } from './import-wizard.ts'
+import type { ImportLogCounts } from './import-log.ts'
+
+/** 终止决策（与宿主 /runs/cancel/decision 的取值一一对应）。 */
+export type CancelDecision = 'rollback' | 'keep'
+
+/** 一张运行卡片的纯数据模型（文案一律给 key，由壳层翻译）。 */
+export interface RunCardModel {
+  runId: string
+  kind: RunKind
+  /** 卡片标题 key（`runs.kind.<kind>`）。 */
+  kindLabelKey: string
+  status: 'running' | 'done' | 'failed'
+  /** 状态徽章 key（`runs.status.<status>`；待决策时另由 awaitingDecision 覆盖显示）。 */
+  statusLabelKey: string
+  /** 已到安全点、等用户选「回滚 / 保留」。 */
+  awaitingDecision: boolean
+  /** 可手动终止（只有导入支持计划项边界协作式取消；已请求过就不再显示按钮）。 */
+  canCancel: boolean
+  /**
+   * 已请求终止、正等当前计划项结束（null = 未请求）。
+   * `stuck` = 等待超过阈值 → 界面必须从「请稍候」升级为「给出路」。
+   */
+  cancelWait: { minutes: number; stuck: boolean } | null
+  /** 可「跳过当前插件」（仅导入的插件安装阶段有意义）。 */
+  canSkip: boolean
+  /** 进度（item/itemTotal 优先；导出用 section 计数）。 */
+  progress: {
+    labelKey: string
+    section: string | null
+    item: number | null
+    itemTotal: number | null
+    detail: string | null
+    percent: number | null
+  }
+  /** 日志聚合计数（无日志时为 null）。 */
+  counts: ImportLogCounts | null
+  /** 需要用户关注的项数（警告 + 失败）。 */
+  problems: number
+  /** 最近日志行（已截断；供折叠查看，不含敏感内容：宿主侧落账前已 redact）。 */
+  logTail: string[]
+  updatedAt: number
+  /**
+   * 「最近一次更新」的相对时间（复用 overview.time.* 字典）。
+   * 为什么需要：没有它，「进行中」和「三小时前就结束的僵尸卡片」在界面上长得一模一样，
+   * 用户只能得出「一直在加载」的结论（真机报告）。
+   */
+  time: { key: string; params?: { n: string } }
+}
+
+/** 日志尾部保留行数（卡片里只给「最近发生了什么」，完整日志在所属页面）。 */
+export const RUN_CARD_LOG_TAIL = 8
+
+/**
+ * 终止请求等多久算「可能卡住」（2 分钟）。
+ * 为什么要有阈值：协作式取消只能等到**项边界**，而插件安装可以跑几十分钟。
+ * 2 分钟内大概率是在装插件（正常），超过就该把出路摆到用户面前（跳过当前项 / 重启），
+ * 否则用户只能一遍遍点「终止…」——而那个按钮此刻已经没有任何作用了。
+ */
+export const CANCEL_STUCK_AFTER_MS = 2 * 60 * 1000
+
+/**
+ * 相对时间（纯函数，now 显式传入 → 可单测）：刚刚 / N 分钟前 / N 小时前 / N 天前。
+ * 键复用 config-manager 字典里既有的 overview.time.*（同字典，不新造文案）。
+ */
+export function relativeTimeLabel(updatedAt: number, now: number): { key: string; params?: { n: string } } {
+  const diffMs = Math.max(0, now - updatedAt)
+  const minutes = Math.floor(diffMs / 60_000)
+  if (minutes < 1) return { key: 'overview.time.now' }
+  if (minutes < 60) return { key: 'overview.time.min', params: { n: String(minutes) } }
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return { key: 'overview.time.hour', params: { n: String(hours) } }
+  return { key: 'overview.time.day', params: { n: String(Math.floor(hours / 24)) } }
+}
+
+function percentOf(item: number | null, itemTotal: number | null): number | null {
+  if (item === null || itemTotal === null || itemTotal <= 0) return null
+  return Math.min(100, Math.max(0, Math.round((item / itemTotal) * 100)))
+}
+
+/** RunState[] → 卡片模型（按 updatedAt 倒序；终态与进行中同列，由 status 区分）。 */
+export function runCards(
+  runs: readonly RunState[],
+  opts: { logTail?: number; now?: number } = {},
+): RunCardModel[] {
+  const tail = opts.logTail ?? RUN_CARD_LOG_TAIL
+  const now = opts.now ?? Date.now()
+  return [...runs]
+    .sort((a, b) => b.updatedAt - a.updatedAt)
+    .map((run) => {
+      const log = run.log ?? []
+      const model = log.length > 0 ? buildImportLogModel(log) : null
+      const running = run.status === 'running'
+      const awaitingDecision = running && run.pendingDecision === 'cancel'
+      // 终止请求已到达、但还没走到安全点：把「等了多久」算出来给界面用（见 CANCEL_STUCK_AFTER_MS）
+      const requestedAt = typeof run.cancelRequestedAt === 'number' ? run.cancelRequestedAt : null
+      const waitedMs = requestedAt === null ? 0 : Math.max(0, now - requestedAt)
+      const cancelWait = requestedAt !== null && running && !awaitingDecision
+        ? { minutes: Math.floor(waitedMs / 60_000), stuck: waitedMs >= CANCEL_STUCK_AFTER_MS }
+        : null
+      return {
+        runId: run.runId,
+        kind: run.kind,
+        kindLabelKey: `runs.kind.${run.kind}`,
+        status: run.status,
+        statusLabelKey: `runs.status.${run.status}`,
+        awaitingDecision,
+        // 只有导入实现了协作式取消；其余类型给禁用态（不给假按钮）。
+        // 已请求过终止就不再给按钮：再点也不会有新效果（run 级信号是幂等的），
+        // 留着一个亮着的主按钮只会让用户以为「多点几次就能好」。
+        canCancel: running && run.kind === 'import' && !awaitingDecision && cancelWait === null,
+        cancelWait,
+        // 「跳过当前插件」复用向导的**同一判据**（isSkippablePluginInstall：detail 带 plugin: 前缀），
+        // 绝不在这里另写一份「是不是插件安装项」的判断 —— 两份判据漂移会让两个页面对同一个 run
+        // 给出不同的可操作性。skipRequested 由运行中心自己的在途状态抑制（见 RunsCenter）。
+        canSkip: running && run.kind === 'import' && run.pendingDecision !== 'cancel'
+          && isSkippablePluginInstall(run.detail ?? undefined, running, false),
+        progress: {
+          labelKey: `runs.progress.${running ? 'running' : run.status === 'done' ? 'done' : 'failed'}`,
+          section: run.section,
+          item: run.item,
+          itemTotal: run.itemTotal,
+          detail: run.detail,
+          percent: percentOf(run.item, run.itemTotal),
+        },
+        counts: model === null ? null : model.counts,
+        problems: model === null ? 0 : model.problems,
+        logTail: log.slice(-Math.max(0, tail)),
+        updatedAt: run.updatedAt,
+        time: relativeTimeLabel(run.updatedAt, now),
+      }
+    })
+}
+
+/** 状态栏 / 抽屉徽章用的计数。 */
+export function runSummary(runs: readonly RunState[]): { running: number; awaiting: number; total: number } {
+  let running = 0
+  let awaiting = 0
+  for (const run of runs) {
+    if (run.status !== 'running') continue
+    running += 1
+    if (run.pendingDecision === 'cancel') awaiting += 1
+  }
+  return { running, awaiting, total: runs.length }
+}
+
+/** 终止决策框模型。 */
+export interface CancelDialogModel {
+  runId: string
+  kindLabelKey: string
+  /** 已经应用的计划项数（引擎回传的 executed 长度不可得，故用进度计数近似并如实标注）。 */
+  appliedCount: number | null
+  /** 计划项总数（null = 宿主未上报）。 */
+  totalCount: number | null
+  /** 未执行项数（total - applied；无法计算时 null）。 */
+  pendingCount: number | null
+  defaultDecision: CancelDecision
+  options: { id: CancelDecision; labelKey: string; descKey: string }[]
+}
+
+/**
+ * 终止决策框模型。默认选项跟随用户既有的 rollbackOnError 偏好：
+ * 勾过「失败不回滚」→ 默认保留（与他的心智一致）；否则默认回滚（安全侧）。
+ */
+export function cancelDialogModel(
+  run: Pick<RunState, 'runId' | 'kind' | 'item' | 'itemTotal'>,
+  opts: { defaultRollbackOnError: boolean },
+): CancelDialogModel {
+  const applied = run.item
+  const total = run.itemTotal
+  return {
+    runId: run.runId,
+    kindLabelKey: `runs.kind.${run.kind}`,
+    appliedCount: applied,
+    totalCount: total,
+    pendingCount: applied !== null && total !== null ? Math.max(0, total - applied) : null,
+    defaultDecision: opts.defaultRollbackOnError ? 'rollback' : 'keep',
+    options: [
+      { id: 'rollback', labelKey: 'runs.cancel.rollback', descKey: 'runs.cancel.rollbackDesc' },
+      { id: 'keep', labelKey: 'runs.cancel.keep', descKey: 'runs.cancel.keepDesc' },
+    ],
+  }
+}
+
+/** 「已应用/未执行」的用户可读摘要参数（null → 壳层显示「未知」而不是编个数字）。 */
+export function cancelCostParams(model: CancelDialogModel): { applied: string; pending: string } {
+  return {
+    applied: model.appliedCount === null ? '' : String(model.appliedCount),
+    pending: model.pendingCount === null ? '' : String(model.pendingCount),
+  }
+}

package/src/ui/select-model.test.ts

@@ -0,0 +1,75 @@
+/**
+ * 自定义下拉交互模型测试（node:test，零依赖）。
+ */
+import test from 'node:test'
+import assert from 'node:assert/strict'
+
+import {
+  edgeActiveIndex, firstEnabledIndex, initialActiveIndex, lastEnabledIndex,
+  selectDisplayLabel, selectedOption, stepActiveIndex, type SelectOption,
+} from './select-model.ts'
+
+const OPTS: SelectOption[] = [
+  { value: 'a', label: 'A' },
+  { value: 'b', label: 'B', disabled: true },
+  { value: 'c', label: 'C' },
+]
+
+test('selectedOption / selectDisplayLabel：命中、未命中与回退链', () => {
+  assert.equal(selectedOption(OPTS, 'c')?.label, 'C')
+  assert.equal(selectedOption(OPTS, 'zzz'), undefined)
+  assert.equal(selectDisplayLabel(OPTS, 'a'), 'A')
+  // 未命中：先用 fallback（调用点的占位文案），没有再退回原值（绝不显示空白）
+  assert.equal(selectDisplayLabel(OPTS, 'zzz', '（已失效）'), '（已失效）')
+  assert.equal(selectDisplayLabel(OPTS, 'zzz'), 'zzz')
+})
+
+test('initialActiveIndex：选中项优先，选中项不可用则落到第一个可用项', () => {
+  assert.equal(initialActiveIndex(OPTS, 'c'), 2)
+  // 选中项被禁用 → 不把高亮停在禁用项上
+  assert.equal(initialActiveIndex(OPTS, 'b'), 0)
+  assert.equal(initialActiveIndex(OPTS, 'nope'), 0)
+  assert.equal(initialActiveIndex([], 'a'), -1)
+})
+
+test('firstEnabledIndex / lastEnabledIndex：跳过禁用项', () => {
+  assert.equal(firstEnabledIndex(OPTS), 0)
+  assert.equal(lastEnabledIndex(OPTS), 2)
+  assert.equal(firstEnabledIndex([{ value: 'x', label: 'X', disabled: true }]), -1)
+  assert.equal(lastEnabledIndex([{ value: 'x', label: 'X', disabled: true }]), -1)
+  assert.equal(firstEnabledIndex([]), -1)
+})
+
+test('stepActiveIndex：禁用项跳过 + 环绕 + 无高亮时落到首/尾', () => {
+  // 0 → 跳过被禁用的 1 → 2
+  assert.equal(stepActiveIndex(OPTS, 0, 1), 2)
+  // 2 → 环绕回 0（中间禁用项跳过）
+  assert.equal(stepActiveIndex(OPTS, 2, 1), 0)
+  // 0 → 反向环绕 → 2
+  assert.equal(stepActiveIndex(OPTS, 0, -1), 2)
+  // 无高亮（-1）：正向 → 首项，反向 → 尾项
+  assert.equal(stepActiveIndex(OPTS, -1, 1), 0)
+  assert.equal(stepActiveIndex(OPTS, -1, -1), 2)
+})
+
+test('stepActiveIndex：全部禁用 / 空清单恒 -1；单项时原地返回', () => {
+  const allDisabled: SelectOption[] = [
+    { value: 'a', label: 'A', disabled: true },
+    { value: 'b', label: 'B', disabled: true },
+  ]
+  assert.equal(stepActiveIndex(allDisabled, 0, 1), -1)
+  assert.equal(stepActiveIndex([], -1, 1), -1)
+  const single: SelectOption[] = [{ value: 'only', label: 'Only' }]
+  assert.equal(stepActiveIndex(single, 0, 1), 0)
+  assert.equal(stepActiveIndex(single, 0, -1), 0)
+})
+
+test('edgeActiveIndex：Home/End 跳过禁用项', () => {
+  assert.equal(edgeActiveIndex(OPTS, 'first'), 0)
+  assert.equal(edgeActiveIndex(OPTS, 'last'), 2)
+  const tailDisabled: SelectOption[] = [
+    { value: 'a', label: 'A' },
+    { value: 'b', label: 'B', disabled: true },
+  ]
+  assert.equal(edgeActiveIndex(tailDisabled, 'last'), 0)
+})

package/src/ui/select-model.ts

@@ -0,0 +1,92 @@
+/**
+ * 自定义下拉（Select）的纯交互模型 —— src/client/common/Select.tsx 只做装配。
+ *
+ * 为什么需要它：原生 <select> 的外观由浏览器渲染（无法跟随 `--dsw-*` token，
+ * 深色主题下是白底系统控件、与工作台其余控件格格不入），故改为 div/button 自绘。
+ * 自绘换来的是**无障碍与键盘语义要自己扛**（ARIA combobox + listbox 模式），
+ * 所以可测的那部分（高亮项推导 / 上下移动 / 首尾跳转）全部落在这里，node 可测。
+ *
+ * 分层铁律：本文件零依赖（不 import react / 浏览器 API），client 与 node 单测都能用。
+ */
+
+/** 下拉选项（value 一律字符串：调用点的数字枚举在边界处 String/Number 转换）。 */
+export interface SelectOption {
+  /** 回传给 onChange 的值（唯一键） */
+  value: string
+  /** 展示文本（已本地化；不在本层做 i18n） */
+  label: string
+  /** 禁用项：键盘移动跳过、不可提交（灰显） */
+  disabled?: boolean
+}
+
+/** 选中值对应的选项；值不在清单里（如远端快照已被清理）→ undefined。 */
+export function selectedOption(options: SelectOption[], value: string): SelectOption | undefined {
+  for (const option of options) {
+    if (option.value === value) return option
+  }
+  return undefined
+}
+
+/**
+ * 触发器上的显示文本。
+ *
+ * 值不在清单里时**不显示空**：先用 fallback（调用点给的占位文案），
+ * 仍为空则显示原值本身 —— 显示「一个不存在的 id」也比显示空白强
+ * （用户至少能看出当前选中的是什么；空白会被读成「没选中」）。
+ */
+export function selectDisplayLabel(options: SelectOption[], value: string, fallback = ''): string {
+  const hit = selectedOption(options, value)
+  if (hit !== undefined) return hit.label
+  return fallback !== '' ? fallback : value
+}
+
+/**
+ * 打开菜单时的初始高亮项：
+ * 选中项优先（它是用户下次最可能改动的锚点）；选中项不存在或已禁用 → 第一个可用项。
+ * 全部禁用 / 空清单 → -1（表示没有高亮项）。
+ */
+export function initialActiveIndex(options: SelectOption[], value: string): number {
+  const selected = options.findIndex((option) => option.value === value)
+  if (selected >= 0 && options[selected]?.disabled !== true) return selected
+  return firstEnabledIndex(options)
+}
+
+/** 第一个可用项下标；没有 → -1。 */
+export function firstEnabledIndex(options: SelectOption[]): number {
+  return options.findIndex((option) => option.disabled !== true)
+}
+
+/** 最后一个可用项下标；没有 → -1。 */
+export function lastEnabledIndex(options: SelectOption[]): number {
+  for (let i = options.length - 1; i >= 0; i--) {
+    if (options[i]?.disabled !== true) return i
+  }
+  return -1
+}
+
+/**
+ * 从 from 出发按 delta（±1）移动高亮项。
+ *
+ * 三条语义（与原生 <select> 的键盘行为对齐）：
+ *   ① 禁用项跳过，不停留；
+ *   ② 到达末尾**环绕**（原生 select 也环绕），环绕一整圈回到原位；
+ *   ③ 当前无高亮（from < 0）时：delta > 0 → 第一个可用项，delta < 0 → 最后一个可用项。
+ * 全部项禁用 / 空清单 → -1。
+ */
+export function stepActiveIndex(options: SelectOption[], from: number, delta: number): number {
+  const total = options.length
+  if (total === 0) return -1
+  if (firstEnabledIndex(options) < 0) return -1
+  if (from < 0) return delta >= 0 ? firstEnabledIndex(options) : lastEnabledIndex(options)
+  let index = from
+  for (let hop = 0; hop < total; hop++) {
+    index = (index + delta + total) % total
+    if (options[index]?.disabled !== true) return index
+  }
+  return from
+}
+
+/** Home/End：跳到第一个/最后一个可用项。 */
+export function edgeActiveIndex(options: SelectOption[], edge: 'first' | 'last'): number {
+  return edge === 'first' ? firstEnabledIndex(options) : lastEnabledIndex(options)
+}