@dsh-plus/agent-preset-rea 0.0.0-stage → 0.1.1

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>
+  )
+}

package/src/client/styles.ts

@@ -0,0 +1,57 @@
+/**
+ * 配置卡片样式：基础规则走 @dsh-plus/shared/client 的 cardCss('apr')
+ * （按钮/字段/徽标等类名由共享控件生成，本文件**不**重复定义），这里只补
+ * 插件特有规则：提示词多行框、安装状态表、作业进度条与日志。
+ * 沿用官方 data-plugin / data-plugin-css 约定（HMR 据此卸载）。
+ * 颜色与度量全部走官方主题变量（--dsw-alias-*），不写死色值。
+ * @module agent-preset-rea/client/styles
+ */
+import { cardCss, injectCardStyle } from '@dsh-plus/shared/client'
+
+export const PLUGIN_ID = '@dsh-plus/agent-preset-rea'
+
+/**
+ * 多行提示词输入框：度量对齐官方 settings-form 的 textarea
+ * （与 -input 同边框/底色/圆角，正文 13px/1.6），窄屏 16px 防 iOS 聚焦缩放、
+ * 纵向可拖拽但不横向溢出。
+ *
+ * 类名避让 cardCss 已生成的 `-status` / `-badge` 前缀（那是 CardChrome 的状态行与
+ * 字段徽标），安装表与作业块一律用 `-install*` / `-pill*` / `-job*`。
+ */
+const extraCss = `
+.apr-textarea{box-sizing:border-box;width:100%;min-height:180px;resize:vertical;font:inherit;font-size:13px;line-height:1.6;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-layer-3);border:1px solid var(--dsw-alias-border-l2);border-radius:8px;padding:10px 12px;transition:border-color .18s,background .18s}
+.apr-textarea:hover:not(:disabled):not(:focus-visible){border-color:var(--dsw-alias-label-dimmed)}
+.apr-textarea:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}
+.apr-textarea:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}
+.apr-textarea::placeholder{color:var(--dsw-alias-label-tertiary)}
+.apr-btnRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
+.apr-install{margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
+.apr-installRow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
+.apr-installKey{flex:none;width:118px;margin:0;font-size:12px;color:var(--dsw-alias-label-tertiary)}
+.apr-installVal{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;font-size:13px;color:var(--dsw-alias-label-primary)}
+.apr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}
+.apr-pill{flex:none;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px}
+.apr-pillOk{background:var(--dsw-alias-state-success-secondary);color:var(--dsw-alias-state-success-primary)}
+.apr-pillMiss,.apr-pillError,.apr-pillCancelled{background:var(--dsw-alias-state-error-secondary);color:var(--dsw-alias-state-error-primary)}
+.apr-pillRunning{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
+.apr-job{margin-top:12px;padding:10px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-layer-3)}
+.apr-jobHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.apr-jobTitle{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
+.apr-bar{margin-top:8px;height:6px;border-radius:999px;background:var(--dsw-alias-interactive-bg-hover);overflow:hidden}
+.apr-barFill{height:100%;background:var(--dsw-alias-brand-primary);transition:width .3s}
+.apr-logBox{margin-top:8px}
+.apr-logSummary{font-size:12px;color:var(--dsw-alias-label-tertiary);cursor:pointer}
+.apr-log{margin:6px 0 0;max-height:200px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;white-space:pre-wrap;word-break:break-all;color:var(--dsw-alias-label-tertiary)}
+.apr-error{margin:4px 0 0;font-size:12px;color:var(--dsw-alias-state-error-primary)}
+@media (max-width:767px){
+.apr-textarea{font-size:16px;min-height:140px}
+.apr-installKey{width:100%}
+}
+`
+
+export const cardCssAll = cardCss('apr', extraCss)
+
+/** 幂等注入样式标签；返回标签（已存在或环境无 document 时为 null）。 */
+export function injectStyle(): HTMLStyleElement | null {
+  return injectCardStyle(PLUGIN_ID, cardCssAll)
+}

package/src/config.ts

@@ -0,0 +1,121 @@
+/**
+ * 插件配置（schemastery）：显示面、persona、REA MCP 行与 skill 根外部化。
+ *
+ * 单一事实源同时充当两处：cordis 行级 `Config`（组合默认，profile patch 层可覆盖）
+ * 与 settings 用户层（GUI 配置卡片写入 profile 行级覆盖层，loader 原位提交活动
+ * 引用，消费端 `unwrapVolatile` 现取即热）。
+ *
+ * **活动字段只有两个**：`personaPrefix` 与 `proxyPort`——两者都在配置卡片里有编辑器
+ * （见 src/client/card.tsx），保存即热更（预设换代 / 安装作业即时生效）。其余字段是
+ * **部署方平面**（安装位置、超时、附加 skill 根等运维旋钮），由 `cordis.patch.yml`
+ * 整体覆盖，GUI 不提供入口。
+ *
+ * **persona 默认为空串**：`dsh-persona` 的空模板照样遮蔽部署级 persona 段，
+ * 渲染为空后在提示词里消失；官方装配（harness 身份、工具指引、项目指令、
+ * 运行时上下文）不受影响。
+ *
+ * 预设 id 固定为 `rea`（注册表身份，不开放覆盖——改 id 等于换预设，
+ * default/selectedDefault 等引用都会落空）。
+ * @module @dsh-plus/agent-preset-rea/config
+ */
+import z from '@deepseek-ai/schemastery'
+import type { UnwrapVolatile } from '@dsh-plus/shared'
+
+import { INPUT_SCHEMA_PROFILES, OUTPUT_SCHEMA_PROFILES, REA_PINNED_VERSION } from './mcp.ts'
+import { SETTINGS_NS as NS_LITERAL } from './ns.ts'
+
+/** settings 命名空间（字面量即合法命名空间；配置卡片与运行期读取同一份）。 */
+export const SETTINGS_NS = NS_LITERAL
+
+export const Config = z.object({
+  enabled: z
+    .boolean()
+    .description('总开关（false = 不注册 rea 预设，等价插件未安装）')
+    .default(true),
+  name: z.string().description('预设显示名（设置 → Agent 预设卡片标题）').default('逆向工程'),
+  description: z
+    .string()
+    .description('预设说明（设置 → Agent 预设卡片描述）')
+    .default(
+      '逆向工程预设：官方 standard 全量行 + 仅本预设可见的 REA MCP 客户端（mcp__rea__*）与随包 REA 官方 skill；persona 默认为空，工具指引沿用官方装配。',
+    ),
+  order: z.number().description('预设名册排序位').default(6),
+  personaPrefix: z
+    .string()
+    .description(
+      'persona 前缀（system-prompt 的 deployment:persona-prefix 段）；留空 = 空 persona（该段渲染为空后消失），工具指引与运行时上下文保留',
+    )
+    .default('')
+    .volatile(),
+  mcpEnabled: z
+    .boolean()
+    .description('是否挂 REA MCP 客户端行（false = 只保留预设其余能力）')
+    .default(true),
+  mcpServerName: z
+    .string()
+    .pattern(/^[A-Za-z0-9_-]{1,32}$/)
+    .description(
+      'MCP 服务命名空间：模型面工具名为 mcp__<serverName>__<tool>，取值 [A-Za-z0-9_-]{1,32}',
+    )
+    .default('rea'),
+  reaVersion: z
+    .string()
+    .description('钉版的 rea-agents 版本（npx 拉取）')
+    .default(REA_PINNED_VERSION),
+  installRoot: z
+    .string()
+    .description(
+      'REA 受管安装树位置（空 = <DSH_HOME>/dsh-plus/dsh-plus-agent-preset-rea/rea-agent）',
+    )
+    .default(''),
+  proxyPort: z
+    .natural()
+    .max(65535)
+    .description('安装/更新时使用的本机代理端口（0 = 不用代理；npm 与原生依赖 prebuild 下载同此）')
+    .default(0)
+    .volatile(),
+  mcpCommand: z
+    .string()
+    .description(
+      '显式 MCP 启动命令（空 = 用受管安装入口，未安装时该行禁用；填 npx 即启动期拉取，风险自负）',
+    )
+    .default(''),
+  mcpArgs: z
+    .array(z.string())
+    .description(
+      'MCP stdio 附加参数；留空 = 受管入口补 ["mcp"]，显式 npx 则派生 ["-y","rea-agents@<version>","mcp"]',
+    )
+    .default([]),
+  inputSchemaProfile: z
+    .union(INPUT_SCHEMA_PROFILES)
+    .description(
+      'REA 工具入参 schema 广告档位（REA_MCP_INPUT_SCHEMA_PROFILE）：compact 压体积，full 与上游默认一致',
+    )
+    .default('compact'),
+  outputSchemaProfile: z
+    .union(OUTPUT_SCHEMA_PROFILES)
+    .description(
+      'REA 工具出参 schema 广告档位（REA_MCP_OUTPUT_SCHEMA_PROFILE）：off 不下发（结果仍由 REA 校验），full 与上游默认一致',
+    )
+    .default('off'),
+  toolCallTimeoutMs: z
+    .number()
+    .description('单次 MCP 工具调用超时（毫秒）；REA 分析类调用常超默认 60 秒')
+    .default(600_000),
+  failOnStartupError: z
+    .boolean()
+    .description(
+      'MCP 初次连接/同步失败是否让本行激活失败；默认 false：只记日志并按退避重连，不拖垮 boot',
+    )
+    .default(false),
+  extraSkillDirs: z
+    .array(z.string())
+    .description('附加 skill 根目录（随本预设作用域生效，其他预设不可见）')
+    .default([]),
+})
+
+/** 活动字段形态（loader 解析产物：`personaPrefix` 为活动引用）。 */
+export type AgentPresetReaConfigFields = Schemastery.TypeT<typeof Config>
+
+/** 平面配置形态（消费面的读取形态，由活动引用解包得到）。 */
+export type AgentPresetReaConfig = UnwrapVolatile<AgentPresetReaConfigFields>