@dsh-plus/agent-preset-rea 0.1.0 → 0.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dsh-plus/agent-preset-rea",
-  "version": "0.1.0",
-  "description": "dsh-plus service + UI plugin: 注册逆向工程 agent preset（id=rea）——官方 standard 全量行镜像 + 预设作用域的 REA MCP 客户端（mcp__rea__*）、随包 REA 官方 skill 与 persona 提示词卡片",
+  "version": "0.1.1",
+  "description": "dsh-plus service + UI plugin: 注册逆向工程 agent preset（id=rea）——官方 standard 全量行镜像 + 预设作用域的 REA MCP 客户端（mcp__rea__*）、随包 REA 官方 skill、提示词卡片与 REA/skill 的受管安装更新",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -42,6 +42,7 @@
   "devDependencies": {
     "@deepseek-ai/cordis": "4.0.5-alpha.2",
     "@deepseek-ai/dsh-agent-preset-registry": "0.2.1-alpha.3",
+    "@deepseek-ai/dsh-host-webserver": "0.2.1-alpha.3",
     "@deepseek-ai/schemastery": "3.18.5-alpha.2",
     "@types/react": "~18.3.31",
     "react": "^18.2.0",

package/src/client/api.ts

@@ -0,0 +1,76 @@
+/**
+ * 受管安装/更新的端点通道（状态查询 + 三类动作）。
+ * 配置读写仍走 `ctx.remote.settings` 直连（见 card.tsx），这里只补官方传输没有的动作。
+ *
+ * 响应都经类型谓词在边界收窄：宿主契约漂移时立即报错，而不是渲染期白屏。
+ * @module agent-preset-rea/client/api
+ */
+import { getJson, postJson } from '@dsh-plus/shared/client'
+import type { JobActionDto, JobDto, StatusDto } from '../dto.ts'
+
+/** 载荷类型谓词（与 shared/client 的 fetch 同形；此处按本插件契约自持）。 */
+type Guard<T> = (value: unknown) => value is T
+
+const ROUTE_BASE = '/dsh-plus/agent-preset-rea'
+
+/** JobDto 守卫。 */
+function isJob(value: unknown): value is JobDto {
+  if (typeof value !== 'object' || value === null) return false
+  const job = value as Record<string, unknown>
+  return (
+    typeof job['id'] === 'number' &&
+    typeof job['kind'] === 'string' &&
+    typeof job['state'] === 'string' &&
+    Array.isArray(job['log']) &&
+    typeof job['progress'] === 'object' &&
+    job['progress'] !== null
+  )
+}
+
+/** StatusDto 守卫（结构性字段缺席即判不符）。 */
+function isStatus(value: unknown): value is StatusDto {
+  if (typeof value !== 'object' || value === null) return false
+  const body = value as Record<string, unknown>
+  const install = body['install']
+  const skill = body['skill']
+  const mcp = body['mcp']
+  return (
+    typeof install === 'object' &&
+    install !== null &&
+    typeof skill === 'object' &&
+    skill !== null &&
+    typeof mcp === 'object' &&
+    mcp !== null &&
+    typeof body['config'] === 'object' &&
+    body['config'] !== null
+  )
+}
+
+/** JobActionDto 守卫。 */
+const isJobAction: Guard<JobActionDto> = (value: unknown): value is JobActionDto => {
+  if (typeof value !== 'object' || value === null) return false
+  const job = (value as Record<string, unknown>)['job']
+  return job === null || job === undefined || isJob(job)
+}
+
+/** 查询安装/skill/MCP 行状态与当前作业。 */
+export async function fetchStatus(): Promise<StatusDto> {
+  return getJson<StatusDto>(`${ROUTE_BASE}/status`, isStatus)
+}
+
+/**
+ * 启动作业。
+ * @param kind - `install` = 安装/更新 REA 包；`skill` = 拉取并替换 skill 副本。
+ * @param proxyPort - 草稿里当前填的代理端口（未保存也即时生效）。
+ */
+export async function startJob(
+  kind: 'install' | 'skill',
+  proxyPort: number,
+): Promise<JobActionDto> {
+  return postJson<JobActionDto>(`${ROUTE_BASE}/${kind}`, { proxyPort }, isJobAction)
+}
+
+/** 取消当前作业。 */
+export async function cancelJob(): Promise<JobActionDto> {
+  return postJson<JobActionDto>(`${ROUTE_BASE}/cancel`, undefined, isJobAction)
+}

package/src/client/card.tsx

@@ -1,16 +1,20 @@
 /**
- * 「逆向工程」预设配置卡片：唯一字段是 persona 提示词。
+ * 「逆向工程」预设配置卡片：提示词（活动字段）+ 代理端口（活动字段）+ 安装维护区。
  *
  * 经 injectPluginConfigCard 注册（插件页 plugins.row.config / plugins.bundle.config，
  * view 分发 summary/page）；外壳与草稿语义走 @dsh-plus/shared/client 套件
  * （CardChrome + useNamespaceDraft：staged 草稿、脏判定、revision fencing、
- * Host 更新不覆盖在途编辑）。
+ * Host 更新不覆盖在途编辑），安装维护区见 client/install.tsx。
  *
- * 为什么只有这一个字段：`Config` 里只有 `personaPrefix` 标了 `.volatile()`
- * （对用户的承诺＝必须给编辑器）；MCP 参数、超时、附加 skill 根等属部署方平面，
- * 由 profile 的 cordis.patch.yml 行级配置覆盖，因此卡片底部只作说明。
- * 保存后 loader 原位提交活动引用并广播 `loader/volatile-update`，宿主半据此换代
- * 注册预设声明——新建会话即用新提示词，已存在会话保持原装配。
+ * 两个活动字段（`Config` 里标 `.volatile()` 的）都在这里给出编辑器：
+ * - `personaPrefix`：system-prompt 的 persona 前缀段；
+ * - `proxyPort`：安装/更新时的本机代理端口。
+ * 其余字段（安装位置、MCP 参数、超时、附加 skill 根）属部署方平面，由 profile 的
+ * cordis.patch.yml 行级配置覆盖，卡片只读展示关键事实。
+ *
+ * 安装维护为什么不放在注册期自动做：启动期 `npx`/npm 安装会跑依赖安装脚本
+ * （原生 prebuild 下载），卡住即吊死预设激活与整个名册；因此改成显式动作
+ * ——后台作业 + 轮询实时进度，作业完成后宿主半换代注册，新建会话即用新事实。
  * @module agent-preset-rea/client/card
  */
 
@@ -21,11 +25,14 @@ import {
   type NamespaceSettingsApi,
   type PluginConfigViewProps,
   type Scope,
+  TextField,
   useNamespaceDraft,
 } from '@dsh-plus/shared/client'
 import type { ReactElement } from 'react'
-import { type ConfigValue, type Draft, draftFromValue, toPatch } from './draft.ts'
+
+import { type ConfigValue, type Draft, draftFromValue, parseProxyPort, toPatch } from './draft.ts'
 import type { Translate } from './i18n.ts'
+import { InstallSection } from './install.tsx'
 
 export interface CardProps extends PluginConfigViewProps {
   t: Translate
@@ -33,12 +40,13 @@ export interface CardProps extends PluginConfigViewProps {
   api: NamespaceSettingsApi
 }
 
-/** 卡片动作：放弃 / 保存（仅脏且可写时可用）。 */
+/** 卡片动作：放弃 / 保存（脏且可写且输入合法时才可用）。 */
 function cardActions(options: {
   t: Translate
   dirty: boolean
   saving: boolean
   disabled: boolean
+  invalid: boolean
   onDiscard(): void
   onSave(): void
 }): CardAction[] {
@@ -53,7 +61,7 @@ function cardActions(options: {
       key: 'save',
       label: options.t(options.saving ? 'saving' : 'save'),
       variant: 'primary',
-      disabled: !options.dirty || options.saving || options.disabled,
+      disabled: !options.dirty || options.saving || options.disabled || options.invalid,
       onClick: options.onSave,
     },
   ]
@@ -78,6 +86,7 @@ export function ReaCard(props: CardProps): ReactElement | string | null {
   }
 
   const disabled = state.disabled
+  const port = parseProxyPort(draft.proxyPort)
   return (
     <CardChrome
       prefix="apr"
@@ -92,6 +101,7 @@ export function ReaCard(props: CardProps): ReactElement | string | null {
         dirty: state.dirty,
         saving: state.saving,
         disabled,
+        invalid: port === null,
         onDiscard: state.reset,
         onSave: state.save,
       })}
@@ -115,6 +125,21 @@ export function ReaCard(props: CardProps): ReactElement | string | null {
         <p className="apr-hint">{t('promptHint')}</p>
         {draft.personaPrefix.trim() === '' ? <p className="apr-hint">{t('promptEmpty')}</p> : null}
       </div>
+
+      <TextField
+        prefix="apr"
+        id="apr-proxy"
+        label={t('proxyPort')}
+        hint={t('proxyPortHint')}
+        invalid={port === null}
+        invalidLabel={t('proxyPortInvalid')}
+        numeric
+        value={draft.proxyPort}
+        disabled={disabled}
+        onEdit={(text) => state.edit({ proxyPort: text })}
+      />
+
+      <InstallSection t={t} disabled={disabled} proxyPort={port} />
     </CardChrome>
   )
 }

package/src/client/client.ts

@@ -4,9 +4,9 @@
  * 构建产物为 window.__ModuleLoader__.load({id, factory}) 形式的 CJS factory
  * （包装见 tsdown.config.ts）；样式沿用官方 data-plugin-css 约定，HMR 据此卸载。
  *
- * 卡片只编辑 `personaPrefix`（宿主半唯一的活动字段）；配置读写经共享层直连
- * `ctx.remote.settings`（官方 `settingsScope` 服务不存在、由 `configForms` 取代），
- * 与 notify-email 同机制。
+ * 卡片编辑两个活动字段（`personaPrefix`、`proxyPort`），并驱动宿主半的受管安装/更新
+ * 作业（同源自定义端点，见 client/api.ts）；配置读写经共享层直连 `ctx.remote.settings`
+ * （官方 `settingsScope` 服务不存在、由 `configForms` 取代），与 notify-email 同机制。
  * @module @dsh-plus/agent-preset-rea/client
  */
 import type { Context } from '@deepseek-ai/cordis'

package/src/client/draft.ts

@@ -1,28 +1,55 @@
 /**
  * 卡片草稿的纯逻辑（无 JSX，node --test 可直接测）：命名空间解析值 ⇄ 编辑草稿。
  *
- * 命名空间值是整行配置的脱敏视图（本卡片只编辑 `personaPrefix`，其余字段属
- * 部署方平面，不进卡片），因此读取时按字段收窄：值缺席或类型不符一律回落到
- * 空串（= 空 persona），保存时只回写这一个字段（settings.update 深合并）。
+ * 卡片编辑两个活动字段（`personaPrefix` 提示词、`proxyPort` 安装代理端口），其余字段
+ * 属部署方平面不进卡片；命名空间值是整行配置的脱敏视图，读取时按字段收窄：
+ * 值缺席或类型不符一律回落默认（提示词空串、代理 0）。
+ *
+ * 代理端口以文本承载：越界/非法不静默改写，标 `invalid` 并禁用保存（见 card.tsx），
+ * 避免「输入 99999 被悄悄存成 65535」这类静默数据损坏。
  * @module agent-preset-rea/client/draft
  */
 
 /** 命名空间解析值中本卡片消费的部分。 */
 export interface ConfigValue {
   personaPrefix?: unknown
+  proxyPort?: unknown
 }
 
 /** 编辑草稿。 */
 export interface Draft {
   personaPrefix: string
+  /** 代理端口文本（空串与 `'0'` 都表示不用代理）。 */
+  proxyPort: string
 }
 
-/** 解析值 → 草稿（非字符串一律视为空串）。 */
+/** 代理端口上限。 */
+export const PROXY_PORT_MAX = 65535
+
+/** 解析值 → 草稿（类型不符一律回落默认）。 */
 export function draftFromValue(value: ConfigValue): Draft {
-  return { personaPrefix: typeof value.personaPrefix === 'string' ? value.personaPrefix : '' }
+  return {
+    personaPrefix: typeof value.personaPrefix === 'string' ? value.personaPrefix : '',
+    proxyPort: typeof value.proxyPort === 'number' ? String(value.proxyPort) : '',
+  }
+}
+
+/**
+ * 代理端口文本 → 端口号。
+ * @returns 空串按 0（不用代理）；非纯数字或越界返回 null（调用方据此判非法）。
+ */
+export function parseProxyPort(text: string): number | null {
+  const trimmed = text.trim()
+  if (trimmed === '') return 0
+  if (!/^\d+$/.test(trimmed)) return null
+  const port = Number(trimmed)
+  return Number.isInteger(port) && port >= 0 && port <= PROXY_PORT_MAX ? port : null
 }
 
 /** 草稿 → 提交形状（只回写本卡片负责的字段）。 */
 export function toPatch(draft: Draft): Record<string, unknown> {
-  return { personaPrefix: draft.personaPrefix }
+  return {
+    personaPrefix: draft.personaPrefix,
+    proxyPort: parseProxyPort(draft.proxyPort) ?? 0,
+  }
 }

package/src/client/i18n.ts

@@ -9,21 +9,66 @@ export const NS = 'dsh-plus-agent-preset-rea'
 
 const ownZh = {
   title: '逆向工程预设',
-  description: 'REA 提示词：留空即空 persona，工具指引与运行时上下文照常由官方装配注入。',
-  summaryLine: '编辑「逆向工程」预设的 persona 提示词',
+  description: 'REA 提示词与安装维护：提示词留空即空 persona，工具指引与运行时上下文照常注入。',
+  summaryLine: '编辑「逆向工程」预设的提示词，并安装/更新 REA 与 skill',
   prompt: '系统提示词（persona 前缀）',
   promptHint:
     '写入 system-prompt 的 persona 前缀段，仅对「逆向工程」预设的新会话生效；留空 = 不注入 persona 段（官方工具指引、项目指令与运行时上下文不受影响）。保存后新建会话即用新值。',
   promptPlaceholder: '例如：先做证据分级，再动手改二进制；每一步给出可复核的证据链……',
   promptEmpty: '当前为空：该预设不注入 persona 段。',
   saveFailed: '保存失败：',
+
+  installSection: 'REA 安装与更新',
+  installHint:
+    '安装/更新在后台执行：把 rea-agents 装进下面的受管目录（先装 staging 再换目录，失败不留半截安装树），作业完成后本预设自动换代——新建会话即带 mcp__rea__* 工具。安装位置与 MCP 命令属部署方平面（profile 的 cordis.patch.yml），此处只读展示。',
+  installPackage: 'REA 包',
+  installPath: '受管安装目录',
+  installVersion: '版本',
+  installTarget: '目标版本',
+  installed: '已安装',
+  notInstalled: '未安装',
+  skillSource: 'REA skill',
+  skillBundled: '随包副本',
+  skillUpdated: '手动更新副本',
+  skillFiles: '文件',
+  updatedAt: '更新时间',
+  mcpRow: 'MCP 行',
+  mcpInstalled: '已挂载（受管安装入口）',
+  mcpCustom: '已挂载（显式 mcpCommand）',
+  mcpMissing: '未挂载：未安装 REA，该行已禁用（不会在启动期拉取）',
+  mcpOff: '已按配置关闭',
+  commandLabel: '命令',
+  refreshStatus: '刷新状态',
+  installAction: '安装 / 更新 REA',
+  skillAction: '更新 skill',
+  cancelAction: '取消作业',
+  statusLoading: '正在读取安装状态…',
+  statusFailed: '状态查询失败：',
+  actionFailed: '操作失败：',
+  jobRunning: '作业进行中',
+  jobOk: '作业完成',
+  jobError: '作业失败',
+  jobCancelled: '作业已取消',
+  jobInstall: '安装 REA',
+  jobSkill: '更新 skill',
+  jobPhase: '阶段',
+  jobLog: '日志',
+  jobStartedAt: '开始于',
+  jobFinishedAt: '结束于',
+  jobElapsed: '已用时',
+  jobLogEmpty: '（暂无输出）',
+
+  proxyPort: '安装代理端口',
+  proxyPortHint:
+    '安装/更新时供 npm 与原生依赖（node-pty）prebuild 下载使用的本机代理端口；0 或留空 = 直连。未保存也用于本次安装，保存后长期生效。',
+  proxyPortInvalid: '代理端口必须是 0..65535 的整数。',
 } as const
 
 const ownEn = {
   title: 'Reverse-engineering preset',
   description:
-    'REA prompt: leave it empty for a blank persona; official tool guidance and runtime context stay in place.',
-  summaryLine: 'Edit the persona prompt of the “逆向工程” preset',
+    'REA prompt and installation: an empty prompt means a blank persona; tool guidance and runtime context stay in place.',
+  summaryLine: 'Edit the “逆向工程” prompt and install/update REA and its skill',
   prompt: 'System prompt (persona prefix)',
   promptHint:
     'Written to the persona-prefix section of the system prompt for new sessions of this preset only. Empty means no persona section (official tool guidance, project instructions and runtime context are unaffected). New sessions pick up the saved value.',
@@ -31,6 +76,52 @@ const ownEn = {
     'e.g. Grade the evidence first, then patch the binary; every step needs a checkable chain of evidence…',
   promptEmpty: 'Currently empty: this preset injects no persona section.',
   saveFailed: 'Save failed: ',
+
+  installSection: 'REA installation',
+  installHint:
+    'Install/update runs in the background: rea-agents goes into the managed directory below (staged install, then directory swap, so a failure leaves no half tree). When the job finishes the preset re-registers — new sessions get the mcp__rea__* tools. The install location and MCP command belong to the deployment plane (profile cordis.patch.yml) and are shown read-only.',
+  installPackage: 'REA package',
+  installPath: 'Managed install dir',
+  installVersion: 'Version',
+  installTarget: 'Target version',
+  installed: 'Installed',
+  notInstalled: 'Not installed',
+  skillSource: 'REA skill',
+  skillBundled: 'Bundled copy',
+  skillUpdated: 'Manually updated copy',
+  skillFiles: 'Files',
+  updatedAt: 'Updated at',
+  mcpRow: 'MCP row',
+  mcpInstalled: 'Mounted (managed install entry)',
+  mcpCustom: 'Mounted (explicit mcpCommand)',
+  mcpMissing:
+    'Not mounted: REA is not installed, the row stays disabled (nothing is fetched at boot)',
+  mcpOff: 'Disabled by config',
+  commandLabel: 'Command',
+  refreshStatus: 'Refresh status',
+  installAction: 'Install / update REA',
+  skillAction: 'Update skill',
+  cancelAction: 'Cancel job',
+  statusLoading: 'Reading install status…',
+  statusFailed: 'Status query failed: ',
+  actionFailed: 'Action failed: ',
+  jobRunning: 'Job running',
+  jobOk: 'Job finished',
+  jobError: 'Job failed',
+  jobCancelled: 'Job cancelled',
+  jobInstall: 'Install REA',
+  jobSkill: 'Update skill',
+  jobPhase: 'Phase',
+  jobLog: 'Log',
+  jobStartedAt: 'Started',
+  jobFinishedAt: 'Finished',
+  jobElapsed: 'Elapsed',
+  jobLogEmpty: '(no output yet)',
+
+  proxyPort: 'Install proxy port',
+  proxyPortHint:
+    'Local proxy port used by npm and by the native node-pty prebuild download during install/update; 0 or empty means direct. The unsaved value is used for the next install and applies permanently once saved.',
+  proxyPortInvalid: 'Proxy port must be an integer in 0..65535.',
 } as const
 
 export type DictKey = keyof typeof commonZh | keyof typeof ownZh

package/src/client/install.tsx

@@ -0,0 +1,274 @@
+/**
+ * 卡片的「REA 安装与更新」区：只读状态表 + 三个动作（安装/更新 REA、更新 skill、
+ * 取消作业）+ 运行中作业的阶段进度条、已用时与日志尾部。
+ *
+ * 状态与作业都来自宿主半的同源端点（见 client/api.ts 与宿主 routes.ts）：这里只管
+ * 轮询与呈现。作业在跑时按 {@link PROGRESS_POLL_MS} 轮询——进度是宿主侧的真事实，
+ * 浏览器不自己造百分比。
+ * @module agent-preset-rea/client/install
+ */
+import { Button } from '@dsh-plus/shared/client'
+import { type ReactElement, useCallback, useEffect, useRef, useState } from 'react'
+
+import type { JobDto, StatusDto } from '../dto.ts'
+import { cancelJob, fetchStatus, startJob } from './api.ts'
+import type { Translate } from './i18n.ts'
+
+/** 作业运行中的状态轮询间隔（毫秒）。 */
+const PROGRESS_POLL_MS = 1000
+
+/** 日志展示尾部行数（宿主已按 200 行截断，这里再收一道以控高度）。 */
+const LOG_TAIL = 12
+
+/** 错误对象 → 人话。 */
+function messageOf(error: unknown): string {
+  return error instanceof Error ? error.message : String(error)
+}
+
+/** 起止时间 → 已用时文本。 */
+function elapsedOf(job: JobDto): string {
+  const start = Date.parse(job.startedAt)
+  if (Number.isNaN(start)) return '—'
+  const end = job.finishedAt === null ? Date.now() : Date.parse(job.finishedAt)
+  const seconds = Math.max(0, Math.round((end - start) / 1000))
+  if (seconds < 60) return `${seconds}s`
+  return `${Math.floor(seconds / 60)}m${String(seconds % 60).padStart(2, '0')}s`
+}
+
+/** 作业状态 → 徽标类名后缀（视觉区分运行中/成功/失败）。 */
+const STATE_CLASS = {
+  running: 'Running',
+  ok: 'Ok',
+  error: 'Error',
+  cancelled: 'Cancelled',
+} as const
+
+/** 作业进度块：状态徽标 + 阶段 + 进度条 + 日志尾部。 */
+function JobPanel(props: { t: Translate; job: JobDto }): ReactElement {
+  const { t, job } = props
+  const stateKey =
+    job.state === 'running'
+      ? 'jobRunning'
+      : job.state === 'ok'
+        ? 'jobOk'
+        : job.state === 'error'
+          ? 'jobError'
+          : 'jobCancelled'
+  const lines = job.log.slice(-LOG_TAIL)
+  return (
+    <div className="apr-job">
+      <div className="apr-jobHead">
+        <span className={`apr-pill apr-pill${STATE_CLASS[job.state]}`}>{t(stateKey)}</span>
+        <span className="apr-jobTitle">
+          {t(job.kind === 'install' ? 'jobInstall' : 'jobSkill')}
+        </span>
+        <span className="apr-hint">
+          {t('jobPhase')} {job.progress.step}/{job.progress.steps}·{job.progress.phase}
+        </span>
+        <span className="apr-hint">
+          {t('jobElapsed')} {elapsedOf(job)}
+        </span>
+      </div>
+      <div
+        className="apr-bar"
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={job.progress.percent}
+      >
+        <div className="apr-barFill" style={{ width: `${job.progress.percent}%` }} />
+      </div>
+      {job.error === null ? null : <p className="apr-error">{job.error}</p>}
+      <details className="apr-logBox" open={job.state !== 'ok'}>
+        <summary className="apr-logSummary">{t('jobLog')}</summary>
+        <pre className="apr-log">{lines.length === 0 ? t('jobLogEmpty') : lines.join('\n')}</pre>
+      </details>
+    </div>
+  )
+}
+
+/** 一行状态（键 + 值）。 */
+function StatusRow(props: { label: string; children: React.ReactNode }): ReactElement {
+  return (
+    <div className="apr-installRow">
+      <dt className="apr-installKey">{props.label}</dt>
+      <dd className="apr-installVal">{props.children}</dd>
+    </div>
+  )
+}
+
+/** 只读状态表：REA 包 / 受管目录 / skill 来源 / MCP 行形态。 */
+function StatusTable(props: { t: Translate; status: StatusDto }): ReactElement {
+  const { t, status } = props
+  const skillLabel = status.skill.source === 'updated' ? t('skillUpdated') : t('skillBundled')
+  const mcpLabel = !status.mcp.enabled
+    ? status.config.mcpEnabled
+      ? t('mcpMissing')
+      : t('mcpOff')
+    : status.mcp.mode === 'custom'
+      ? t('mcpCustom')
+      : t('mcpInstalled')
+  return (
+    <dl className="apr-install">
+      <StatusRow label={t('installPackage')}>
+        <span className={`apr-pill ${status.install.installed ? 'apr-pillOk' : 'apr-pillMiss'}`}>
+          {t(status.install.installed ? 'installed' : 'notInstalled')}
+        </span>
+        {status.install.version === null ? null : (
+          <span className="apr-mono">{status.install.version}</span>
+        )}
+        <span className="apr-hint">
+          {t('installTarget')} {status.config.reaVersion}
+        </span>
+      </StatusRow>
+      <StatusRow label={t('installPath')}>
+        <code className="apr-mono">{status.install.root}</code>
+      </StatusRow>
+      <StatusRow label={t('skillSource')}>
+        <span className="apr-mono">{skillLabel}</span>
+        <span className="apr-hint">
+          {t('skillFiles')} {status.skill.files}
+          {status.skill.version === null ? '' : ` · ${status.skill.version}`}
+        </span>
+        {status.skill.updatedAt === null ? null : (
+          <span className="apr-hint">
+            {t('updatedAt')} {status.skill.updatedAt}
+          </span>
+        )}
+      </StatusRow>
+      <StatusRow label={t('mcpRow')}>
+        <span className="apr-mono">{mcpLabel}</span>
+        {status.mcp.command === null ? null : (
+          <code className="apr-mono">
+            {status.mcp.command} {status.mcp.args.join(' ')}
+          </code>
+        )}
+      </StatusRow>
+    </dl>
+  )
+}
+
+export interface InstallSectionProps {
+  t: Translate
+  /** 设置只读（不可写）时禁用全部动作。 */
+  disabled: boolean
+  /** 草稿里的代理端口（非法为 null → 禁用动作，不静默取 0）。 */
+  proxyPort: number | null
+}
+
+export function InstallSection(props: InstallSectionProps): ReactElement {
+  const { t, disabled, proxyPort } = props
+  const [status, setStatus] = useState<StatusDto | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const alive = useRef(true)
+  useEffect(
+    () => () => {
+      alive.current = false
+    },
+    [],
+  )
+
+  const load = useCallback(async (): Promise<void> => {
+    try {
+      const next = await fetchStatus()
+      if (!alive.current) return
+      setStatus(next)
+      setError(null)
+    } catch (failure) {
+      if (alive.current) setError(`${t('statusFailed')}${messageOf(failure)}`)
+    }
+  }, [t])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  const running = status?.job?.state === 'running'
+  useEffect(() => {
+    if (running !== true) return
+    const timer = window.setInterval(() => {
+      void load()
+    }, PROGRESS_POLL_MS)
+    return () => {
+      window.clearInterval(timer)
+    }
+  }, [running, load])
+
+  const runAction = useCallback(
+    (action: () => Promise<{ job: JobDto | null }>): void => {
+      setBusy(true)
+      setError(null)
+      action()
+        .then((result) => {
+          if (!alive.current) return
+          setStatus((prev) => (prev === null ? prev : { ...prev, job: result.job }))
+          void load()
+        })
+        .catch((failure: unknown) => {
+          if (alive.current) setError(`${t('actionFailed')}${messageOf(failure)}`)
+        })
+        .finally(() => {
+          if (alive.current) setBusy(false)
+        })
+    },
+    [load, t],
+  )
+
+  const blocked = disabled || busy || running === true
+  const job = status?.job ?? null
+  return (
+    <section className="apr-field">
+      <div className="apr-head">
+        <span className="apr-label">{t('installSection')}</span>
+        <Button
+          prefix="apr"
+          label={t('refreshStatus')}
+          disabled={busy || running === true}
+          onClick={() => {
+            void load()
+          }}
+        />
+      </div>
+      {status === null ? (
+        <p className="apr-hint">{t('statusLoading')}</p>
+      ) : (
+        <>
+          <StatusTable t={t} status={status} />
+          <div className="apr-btnRow">
+            <Button
+              prefix="apr"
+              variant="primary"
+              label={t('installAction')}
+              disabled={blocked || proxyPort === null}
+              onClick={() => {
+                runAction(() => startJob('install', proxyPort ?? 0))
+              }}
+            />
+            <Button
+              prefix="apr"
+              label={t('skillAction')}
+              disabled={blocked || proxyPort === null}
+              onClick={() => {
+                runAction(() => startJob('skill', proxyPort ?? 0))
+              }}
+            />
+            {running === true ? (
+              <Button
+                prefix="apr"
+                label={t('cancelAction')}
+                disabled={busy}
+                onClick={() => {
+                  runAction(() => cancelJob())
+                }}
+              />
+            ) : null}
+          </div>
+        </>
+      )}
+      {job === null ? null : <JobPanel t={t} job={job} />}
+      {error === null ? null : <p className="apr-error">{error}</p>}
+      <p className="apr-hint">{t('installHint')}</p>
+    </section>
+  )
+}