browser-preview

Browser Preview

Hub 内置了嵌入式浏览器面板（F120），可以直接预览运行中的 localhost 应用。猫猫写完前端代码不用让operator切浏览器看效果。

工作流

基础流程（端口发现 → 预览）

1. 在 Terminal 启动 dev server（pnpm dev / npm start / vite 等）
2. Hub 自动检测端口 → 弹出 toast 提示"检测到 localhost:xxxx 启动"
3. 点击 Open Preview → 自动打开 browser panel 并加载页面
4. 也可以手动：切到 workspace 的 Browser tab，输入 localhost:port 按 Go

改代码 → HMR 热更新 → browser panel 内页面自动刷新，无需手动操作。

猫主动打开浏览器（Phase C — 必须掌握）

operator说过："别手动让我输入，你最好打开浏览器，把页面放出来。"

猫应该主动替operator打开浏览器，不要等operator点 toast 或手动输 URL。

调用步骤（按顺序执行，不要跳步）

Step 1: 确认目标服务器在跑
  curl -s -o /dev/null -w "%{http_code}" http://localhost:PORT
  → 200/301/304 = 可以继续
  → 000/connection refused = 服务器没起来，先启动再说

Step 2: 调用 typed MCP
  cat_cafe_preview_open({
    port: PORT,
    path: "/",
    worktreeId: "当前 worktreeId（有就传）",
    threadId: "当前 threadId（有就传）"
  })

Step 3: 等 1-2 秒，右侧 Browser panel 应自动打开
  → 如果没反应，检查 Step 1 是否真的返回了 200

工具参数

怎么获取 worktreeId：就是你当前工作的 worktree 目录名。例如你在 cat-cafe-f120-fix 目录里工作，worktreeId 就是 cat-cafe-f120-fix。如果你在主仓库 cat-cafe 里，就不需要传。

常见错误

• 适用场景：写完前端代码后、operator说"看看效果"、需要展示复杂页面
• ⚠️ 不要传 html 参数（后端不支持）；简单 HTML 可视化用 html_widget rich block

两层可视化策略

operator拍板："简单的用富文本，复杂的用猫主动打开浏览器。"

技术要点（猫猫需要知道的）

什么时候主动用

• 写完前端组件/页面 → 主动调 auto-open 打开浏览器展示（不要等operator点）
• 调样式/布局 → 改代码后在 browser panel 里实时查看
• operator说"看看效果"/"给我看看" → 主动打开 browser panel 展示
• dev server 已在 Terminal 跑着 → 主动打开浏览器，不要只提示
• 简单可视化（图表/动画） → 用 html_widget rich block 内联渲染
• Console 有报错 → browser panel 下方 Console 面板自动展开，可以看
• 需要截图 → browser panel 工具栏一键截图；默认先存到 ${TMPDIR}/cat-cafe-evidence/...，不要落仓库根目录（见 refs/evidence-output-contract.md）

不要做的事

• 不要跳过 Step 1（验证服务器）直接调 cat_cafe_preview_open — 服务器没跑 = proxy error
• 不要用 Playwright / Chrome MCP / open 命令打开系统浏览器 — F120 是 Hub 内嵌预览，走 iframe，不走系统浏览器
• 不要手写 /api/preview/auto-open 的 curl — 主路径是 cat_cafe_preview_open
• 不要手动去构造 gateway URL（让 Hub 前端处理）
• 不要尝试预览外部 URL（只支持 localhost）
• 不要预览 Cat Cafe 自身服务端口（会被端口验证拦截）
• 不要把临时截图顺手留在仓库根目录；要入库时再显式归档到正式目录

和其他 skill 的区别