feat(web): workspace dependencies — bot tab, Supermarket tab and enable-agent preflight

[sheepbox8646]

变更内容

栈 workspace-deps 第 4 层：前端。

• 数据层：useWorkspaceDependencies.ts（列表／catalog query，preflight／rollback／check-updates／script 封装）、useWorkspaceDependencyStream.ts（install／update／reinstall／remove 的 SSE async generator，可带 version），纯函数 utils/workspace-dependency.ts（状态→徽标、主按钮、菜单、排序、图标）。
• Bot 详情页「依赖」tab（capability 组，MCP 之后）：平铺列表、只显示已安装（含镜像底座与失败／待重装记录）、需处理的排前；每一行同形同动作集（安装／更新／重装／卸载／回滚／查看脚本／检查更新，由后端 actions 决定）；名称与描述按依赖本地化；安装／更新确认框提供可选版本输入；卸载覆盖层时只陈述结果（「将移除 X，工作区回到 Y」）；进度对话框实时日志；操作由跨页面的 store 持有，关闭对话框即转后台、完成后 toast、可从行内「查看进度」重开；探测失败时显示带「重试」的横幅；空态引导去 Supermarket；侧栏计数角标。
• Supermarket「依赖」tab：列出 catalog 全部可安装依赖，选择 Bot（多 target 时再选 target）与可选版本安装，复用进度对话框，完成后可跳到该 Bot 的依赖 tab。
• 启用 Agent 前置检查：打开 direct agent 开关或新建后先 preflight；缺失→「安装并启用」→进度→完成才写 enabled:true；取消或失败开关保持关；工作区未运行→引导「启动并继续／去工作区」。新建 direct agent 时 enabled:false。
• 聊天侧：agent_dependency_missing 以专用卡片渲染（文案 + 「查看依赖」+ 后台任务状态）；UI message 增加 args。
• 图标：@memohai/icon 新增 Node.js／Python／uv，按 catalog icon 标识映射。
• i18n：en／zh／ja。

截图与操作步骤

环境：第二套本地 dev 环境（真实后端与工作区容器），bot deps-test。

A. Bot 页「依赖」tab

1. 侧栏 capability 组的「依赖」：平铺列表，图标、版本、状态、本地化描述。
   
2. 空态：引导「去 Supermarket 添加」。
   
3. 有更新时主按钮「更新」（此图 mock 上游 latest）。
   
4. 更新确认框：可选「版本」，留空即最新。
   
5. 行「…」菜单：重新安装／回滚／卸载／查看脚本。
   
6. 「查看脚本」：将执行的 exec sh -s、超时、注入的环境变量与脚本正文。
   
7. 「重新安装」确认。
   
8. 进度对话框实时滚动日志。
   
9. 完成：版本与入口路径，不自动关闭。
   
10. 长时间安装可选「后台运行」：对话框关闭后行内显示进行中徽标与「查看进度」，完成时以 toast 收口。

B. Supermarket「依赖」tab → 安装到 Bot（真实安装 Node.js 覆盖层）

1. /settings/supermarket?tab=dependencies。
   
2. Node.js「安装到 Bot」：选择 Bot，版本留空。
   
3. 安装进度（真实下载 nodejs.org LTS）。
   
4. 完成：24.20.0，可「查看 Bot 依赖」。
   
5. Bot 页 Node.js 已是覆盖层的 24.20.0。
   
6. 卸载确认：「将移除 24.20.0，工作区回到 24.14.0」。
   
7. 卸载后回到镜像的 24.14.0。
   

C. 启用 Agent 前置检查

1. Agent 页空列表 → 「添加 Agent」选 Codex。
   
   
2. 创建后行内「正在检查依赖…」，开关关闭且禁用；preflight 通过后自动启用并进入详情。
   
   
3. 返回列表：依赖徽标，开关为开。
   
4. 依赖缺失时（mock missing）：「安装并启用」确认框；取消后开关保持关闭。
   
   
5. 工作区未运行时（mock not_running）：引导「启动并继续／去工作区」。
   

D. 自检

暗色、窄屏、英文。

E. 安装过程可关闭／转后台，长日志不溢出

1. Supermarket 安装 Node.js 进行中：右上 X 与「后台运行」可用，没有「取消」。
   
2. 关闭后再点「安装到 Bot」：按钮变为「查看进度」，重开同一条日志流（不会重复发安装请求）。
   
3. 后台完成：toast「Node.js installed」＋「View bot dependencies」。
   
4. 安装 Claude Code 完成态（英文、暗色）：231 字符的 npm 告警行在框内换行，副标题只显示状态。
   
5. 520px 窄屏下的进度框、确认框与脚本框。
   
   
   

截图存放在 workspace-deps/assets 分支，不进产品代码树。

验证

• vitest 相关测试全部通过（含 i18n 三语校验）；web 全量仅剩主分支既有的 3 个无关失败。
• eslint 改动文件 0 错误；scripts/check-ui-contract.mjs 新文件零命中；vue-tsc 无新增错误；icon 生成产物与源一致。
• 上述截图均来自真实后端与真实工作区容器（标注 mock 的为前端拦截响应以演示分支）。

⚠️ No human QA — this PR has not been verified by a human yet. Remove this line once a human confirms the happy path.

🤖 Generated with Claude Code

https://claude.ai/code/session_017sihinqYWYNmZ9K842WqDJ