@dyyz1993/create-agent 2.1.1 → 2.1.2

package/templates/cowork/AGENTS.md

@@ -0,0 +1,236 @@
+# Browser Agent — 系统指令
+
+> 本文件既是 **Agent 的系统提示词**，也是 **项目规范文档**。
+> 新增重要功能或需求时，请在「功能大纲」章节以大纲形式记录。
+
+---
+
+## 你的身份
+
+你是「Browser Agent」——一个浏览器自动化工作台助手。你运行在 **Web 模式**（非桌面端），通过 **xbrowser** 工具控制用户的真实 Chrome 浏览器。
+
+你的核心能力：打开网页、采集数据、搜索、点击、填写、截图、录制操作、加工录制为技能。
+
+## 核心工具
+
+| 场景 | 命令 |
+|------|------|
+| 打开网页 | `goto <url>` |
+| 页面标题 | `title` |
+| 当前 URL | `url` |
+| 页面文本 | `text` |
+| 截图 | `screenshot` |
+| 执行 JS | `eval "<expression>"` |
+| 点击元素 | `click <selector>` |
+| 输入内容 | `fill <selector> <value>` |
+| 滚动 | `scroll down --distance 800` |
+| 列出标签页 | `tab list` |
+| 页面快照（带 ref） | `snapshot` |
+| 采集页面转 Markdown | `scrape <url>` |
+| 爬取网站 | `crawl <url> --limit N` |
+| 搜索引擎 | `search "<query>"` |
+| 发现网站 URL | `map <url>` |
+| 列出插件 | `plugin list` |
+| 插件详情 | `plugin info <name>` |
+
+## 录制能力
+
+用户可以通过顶栏录制按钮录制浏览器操作。录制的操作可以被你加工分析：
+
+- 提取关键步骤（去掉无意义的滚动/悬停）
+- 总结操作意图（一句话描述）
+- 建议技能名称
+- 参数化建议（哪些步骤可替换为变量）
+
+## 禁止操作 ❌
+
+**Web 环境下绝对不允许：**
+
+1. 禁止 `open` 命令（桌面端打开文件/程序）
+2. 禁止 `xdg-open`、`start`、`explorer` 等系统命令
+3. 禁止本地文件操作（`mkdir`、`cp`、`mv`、`rm`、`chmod`）
+4. 禁止安装/卸载软件（`brew install`、`pip install`）
+5. 禁止修改系统配置
+
+## 渲染规则 📋
+
+涉及文件/路径/URL 时，**直接渲染给用户**，不执行打开：
+
+| 类型 | 方式 |
+|------|------|
+| 文件路径 | `📄 /path/to/file` |
+| URL | `[打开](https://...)` |
+| 下载结果 | `✅ 已保存 file.csv (2.3MB)` |
+| 数据表格 | Markdown 表格 |
+| 截图 | 直接显示 |
+
+## 操作流程
+
+1. **先观察**：`title`、`url`、`snapshot` 了解页面状态
+2. **再操作**：`goto`、`click`、`fill` 改变页面
+3. **后验证**：确认结果
+4. **渲染结果**：清晰展示给用户
+
+## 工作原则
+
+1. 多步操作逐个执行，每步有反馈
+2. 遇到失败先诊断，不盲目重试
+3. 结果简洁，用表格/列表/代码块
+4. 中文交互
+5. 涉及文件只展示不执行
+
+---
+
+# 项目规范文档
+
+> 以下内容供开发者（含 AI 助手）参考。新增功能或需求时，在「功能大纲」记录。
+
+## 技术架构
+
+```
+浏览器前端 (React + Vite, :7200)
+  ├─ SSE EventSource ← /api/events (服务端推送)
+  ├─ HTTP POST → /api/rpc (RPC 请求)
+  └─ HTTP → /api/create-browser, /api/pack-extension (扩展安装)
+
+后端服务器 (Bun + Node HTTP, :5200)
+  ├─ SSE Transport (每客户端独立 RPCServer)
+  ├─ Handlers: browser / session / chat / system / timer / file
+  └─ xbrowser CLI (spawn 子进程, --cdp :9221)
+
+用户浏览器
+  └─ Chrome 扩展 → cdp-tunnel (:9221) → CDP 协议
+```
+
+### 通讯架构（SSE + HTTP）
+
+- **POST /api/rpc** — RPC 请求/响应（session.create, browser.agentChat 等）
+- **GET /api/events** — SSE 流（Agent 流式事件：thinking/textDelta/toolCall/done）
+- **Token 认证** — URL query `?token=`（EventSource 不支持自定义 header）
+
+### 响应式面板
+
+| 断点 | 侧栏 | 资源面板 |
+|------|------|---------|
+| wide ≥1280px | 固定展开 | 固定展开 |
+| desktop 1024-1279px | 固定展开 | 抽屉 |
+| tablet/mobile <1024px | 抽屉 | 抽屉 |
+
+## RPC 方法清单
+
+### Browser 模块
+- `browser.checkConnection` — 检测 Chrome 连接状态
+- `browser.getConnectionGuide` — 用户视角连接状态（不暴露技术细节）
+- `browser.listTabs` — Chrome 标签页列表
+- `browser.listPlugins` — xbrowser 插件列表
+- `browser.execXbrowser` — 执行单个 xbrowser 命令（支持 --tab 注入）
+- `browser.agentChat` — Agent 对话（流式事件推送）
+- `browser.recordStart` — 开始录制
+- `browser.recordStop` — 停止录制，返回操作数据
+- `browser.recordStatus` — 查询录制状态
+- `browser.processRecording` — Agent 加工录制数据（流式）
+- `browser.getSystemInfo` — 系统信息
+
+### Session 模块
+- `session.create` / `session.list` / `session.get` — 会话 CRUD
+- `session.addMessage` / `session.updateLastMessage` — 消息管理
+- `session.setStatus` / `session.disposeAgent` — 状态控制
+
+### 其他模块
+- `chat.list` / `chat.send` — 聊天历史
+- `system.ping` / `system.hello` / `system.echo` — 系统测试
+- `timer.start` / `timer.stop` — 计时器
+- `file.*` — 文件操作
+
+## 流式事件
+
+Agent 执行时通过 SSE 推送以下事件：
+
+| 事件 | 作用 |
+|------|------|
+| `browser.agentStart` | Agent 开始（含 messageId） |
+| `browser.toolCall` | 工具调用开始 |
+| `browser.toolResult` | 工具调用结果 |
+| `browser.thinking` | 思考增量 |
+| `browser.textDelta` | 文本增量 |
+| `browser.turn` | 轮次切换 |
+| `browser.done` | 完成（含最终文本） |
+| `browser.progress` | 采集进度 |
+
+> ⚠️ **messageId 规则**：后端生成 `msg_${Date.now().toString(36)}`，前端必须等 `browser.agentStart` 事件获取真实 messageId，不能自己生成。
+
+## 功能大纲
+
+### ✅ 已完成
+
+- [x] **三栏工作台**：侧栏(技能+会话) | 对话区(Tab切换) | 资源面板
+- [x] **响应式布局**：宽屏展开 / 中屏侧栏+资源抽屉 / 窄屏全抽屉
+- [x] **SSE + HTTP 通讯**：替换 WebSocket，支持 token 认证和自动重连
+- [x] **Agent 流式对话**：browser.agentChat + 6 个流式事件
+- [x] **直接命令栏**：xbrowser> 提示符，直接执行 scrape/crawl/map 等
+- [x] **标签页选择器**：TopBar 下拉，自动注入 --tab 参数
+- [x] **连接引导**：顶栏状态指示器 + 安装扩展向导 Modal
+- [x] **默认空会话**：打开就有空会话，可直接输入
+- [x] **智能新建会话**：空会话复用，不重复创建
+- [x] **录制功能**：顶栏录制按钮 + recordStart/Stop/Status
+- [x] **加工 Tab**：录制摘要 + 操作时间线 + Agent 加工分析
+- [x] **网络通讯面板**：底部抽屉实时展示 RPC 请求/SSE 事件
+- [x] **命令拦截**：Web 模式禁止 open 等桌面命令
+- [x] **AGENTS.md 约束**：提示词限制 + 渲染规则
+
+### 🔲 待实现
+
+- [ ] **技能保存**：加工完成后保存为可复用技能（侧栏技能库）
+- [ ] **录制重放**：replay 命令支持，一键重放录制操作
+- [ ] **会话持久化**：内存 SessionStore → SQLite
+- [ ] **采集资源管理**：CSV/JSON/图片下载和预览
+- [ ] **多语言完善**：i18n 全量覆盖
+- [ ] **插件系统增强**：用户选中的插件影响 Agent 行为
+- [ ] **桌面端（Electrobun）**：IPC 模式适配
+
+### 📋 需求记录
+
+> 重要需求和设计决策记录在此，方便后续追溯。
+
+#### 2026-06-26 禁止桌面命令
+Web 模式下 `open`/`xdg-open`/`mkdir` 等命令无意义且危险。通过 AGENTS.md 提示词约束 + 后端 `BLOCKED_XBROWSER_COMMANDS` 双重拦截。录制相关命令（record/replay/convert/extract）已解禁。
+
+#### 2026-06-26 录制与加工分离
+录制和会话是两种心智模型（录制=我做给 Agent 看，会话=我问 Agent 做），不能混在一起。加工过程独立展示在「⚙️ 加工」Tab。
+
+#### 2026-06-26 SSE 替代 WebSocket
+WebSocket 通讯对用户不可见、调试困难。改为 HTTP POST + SSE 后，DevTools Network 可直接看到请求，且加了网络通讯面板可视化。
+
+#### 2026-06-26 默认空会话
+打开页面就有空会话占位，用户可直接输入。加号按钮智能创建——当前空会话没消息时不重复创建。
+
+## 开发规范
+
+### 端口
+- 后端：5200
+- 前端（Vite）：7200
+- cdp-tunnel：9221
+
+### 环境变量
+```
+PORT=5200
+VITE_PORT=7200
+AUTH_TOKEN=dev-token
+VITE_AUTH_TOKEN=dev-token
+CDP_ENDPOINT=http://localhost:9221
+CORS_ORIGIN=http://localhost:7200
+CDP_TUNNEL_EXT=/path/to/cdp-tunnel2/extension-new
+```
+
+### 新增功能时的检查清单
+1. 在 `src/shared/modules/*.ts` 定义 RPC 类型
+2. 在 `src/shared/handlers/*.ts` 实现 handler
+3. 在 `src/shared/handlers/index.ts` 注册 barrel export
+4. 在 `src/shared/rpc-schema.ts` 合并类型
+5. 前端 store + 组件实现
+6. 在本文件「功能大纲」记录
+7. `tsc --noEmit` 零错误 + `vitest run` 全过
+
+---
+
+> 📌 **文档维护规则**：当你（AI 助手）觉得某个东西比较重要，或有新增功能/需求变更时，请用大纲形式更新本文件的「功能大纲」和「需求记录」章节。

package/templates/cowork/CHANGELOG.md

@@ -0,0 +1,15 @@
+# cowork-app
+
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`29d2171`](https://github.com/dyyz1993/pi-agent-template/commit/29d217148f6e0b496cc06716e11847b3e522e266)]:
+  - @dyyz1993/rpc-core@2.2.1
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`29d2171`](https://github.com/dyyz1993/pi-agent-template/commit/29d217148f6e0b496cc06716e11847b3e522e266), [`724470a`](https://github.com/dyyz1993/pi-agent-template/commit/724470a784b48a66591e06299fab8ad72f023962)]:
+  - @dyyz1993/rpc-core@3.0.0

package/templates/cowork/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 [username]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/templates/cowork/README.md

@@ -0,0 +1,103 @@
+# Browser Agent Template
+
+AI-powered browser automation agent. Built with Electrobun, React, Tailwind CSS, and RPC architecture.
+
+Control a real Chrome browser via natural language — Agent executes xbrowser commands (goto, click, scrape, fill, screenshot, search...), streams progress in real-time with turn-by-turn tool call cards, and delivers collected data as structured files (CSV/JSON/MD).
+
+70+ site-specific plugins (小红书, 豆瓣, B站, 淘宝) available.
+
+## Getting Started
+
+```bash
+bun install
+
+# Web mode (development with HMR) — Backend :5200, Vite :7200
+bun run dev:web
+
+# Desktop mode (Electrobun native app)
+bun run dev
+
+# Build
+bun run build
+```
+
+## Key Features
+
+- **Agent Chat** — Natural language → browser automation. Streaming turns, tool call cards, thinking blocks
+- **xbrowser Engine** — Full command set: goto, click, fill, scrape, crawl, search, screenshot, eval, tabs, plugins
+- **Plugin System** — 70+ site plugins, inline selector in the topbar
+- **Skill System** — Pre-built skills (小红书 explore/search/blogger) in sidebar
+- **Session Management** — Conversation history, message persistence, context memory
+- **Assets Panel** — Screenshots, images, CSV/JSON/MD files grouped and downloadable
+- **Three-Panel Layout** — Sidebar (skills + sessions) | Chat | Assets
+- **Desktop + Web** — Dual mode via Electrobun (desktop) + Vite (web)
+
+## RPC Modules
+
+| Module | Methods | Events | Description |
+|---|---|---|---|
+| `browser` | agentChat, checkConnection, listTabs, listPlugins, execXbrowser, getSystemInfo | agentStart, toolCall, toolResult, thinking, textDelta, turn, done, progress | Browser auto + Agent AI loop |
+| `session` | create, get, list, addMessage, updateLastMessage, setStatus | – | Session CRUD + message management |
+| `system` | ping, hello, echo | – | Connectivity test |
+| `file` | listDir, readFile, createFile, createDir, rename, delete, copy, findProjectRoot | – | File system operations |
+| `timer` | start, stop | timer.tick | Timer + real-time push |
+| `chat` | list, send | chat.message | Chat (role filtering) |
+| `git` | status, diff, log, branches, checkout, add, reset, commit, push, pull | – | Git version control |
+| `feed` | post, list | feed.update | Feed stream |
+
+## Project Structure
+
+```
+├── src/
+│   ├── bun/index.ts              # Desktop entry (Electrobun main process)
+│   ├── server.ts                 # Web entry (HTTP + WebSocket server)
+│   ├── server-config.ts          # Config (PORT=5200, VITE_PORT=7200)
+│   ├── gateway/
+│   │   ├── http-routes.ts        # HTTP endpoints + asset download
+│   │   ├── ws-handler.ts         # WebSocket RPC (token auth)
+│   │   └── ipc-transport.ts      # Electrobun IPC bridge
+│   ├── shared/
+│   │   ├── rpc-schema.ts         # Unified RPC type definitions
+│   │   ├── register-all-handlers.ts
+│   │   ├── modules/
+│   │   │   ├── browser.ts        # Browser + Agent RPC types
+│   │   │   └── session.ts        # Session CRUD types
+│   │   ├── handlers/
+│   │   │   ├── browser.ts        # Agent chat + xbrowser execution
+│   │   │   └── session.ts        # In-memory SessionStore
+│   │   └── lib/
+│   │       ├── agent.ts          # RpcClient manager + agentChat()
+│   │       ├── cdp.ts            # xbrowser CLI + scrapeXhs pipeline
+│   │       ├── generate.ts       # CSV/JSON/MD/ZIP export
+│   │       └── xhs-extract.ts    # 小红书 DOM extraction
+│   └── mainview/
+│       ├── App.tsx               # Entry + connection detection
+│       ├── components/
+│       │   ├── layout/           # AppLayout (sidebar|chat|assets)
+│       │   ├── topbar/           # Logo, plugins, status, theme
+│       │   ├── chat/             # ChatPanel + MessageBubble (streaming)
+│       │   ├── sidebar/          # SkillSidebar + SessionSidebar
+│       │   └── assets/           # AssetsPanel (files/images)
+│       ├── stores/
+│       │   ├── use-chat-store.ts         # Agent streaming state
+│       │   ├── use-session-store.ts      # Session CRUD
+│       │   ├── use-connection-store.ts   # Browser + plugins
+│       │   └── use-asset-store.ts        # Assets management
+│       └── lib/
+│           └── api-client.ts     # Typed RPC client (WS + IPC)
+├── AGENTS.md                     # Agent system prompt
+├── electrobun.config.ts
+├── vite.config.ts
+└── tailwind.config.js
+```
+
+## Environment
+
+| Variable | Default | Description |
+|---|---|---|
+| `PORT` | 5200 | Backend server port |
+| `VITE_PORT` | 7200 | Vite dev server port |
+| `AUTH_TOKEN` | (auto) | WebSocket auth token |
+| `CDP_ENDPOINT` | http://localhost:9221 | cdp-tunnel address |
+| `AGENT_MAX_TURNS` | 30 | Max agent turns per chat |
+| `AGENT_TIMEOUT_MS` | 300000 | Agent timeout (5 min) |

package/templates/cowork/commitlint.config.js

@@ -0,0 +1,8 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore', 'revert', 'perf']],
+    'subject-max-length': [2, 'always', 80],
+    'subject-case': [0],
+  },
+};