@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/browser-agent/AGENTS.md

@@ -0,0 +1,396 @@
+# 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 协议
+```
+
+### 当前定位
+
+`/tmp/ba-demo` 是从 `pi-agent-template/templates/browser-agent` 生成出来的标准样例，优先作为 Browser Agent 的迁移沙盒和验收基线。
+
+不要继续以 `study-web/browser-agent-product` 里的手写静态页面作为主线 UI。该项目里已经验证过的 Web 多用户能力可以迁移进本模板体系，但 UI、RPC schema、录制、加工、会话、资源面板应以本项目结构为准。
+
+### 迁移策略
+
+目标顺序：
+
+1. 先在 `/tmp/ba-demo` 跑通标准模板能力。
+2. 把 `browser-agent-product` 中有价值的 Web gateway / 插件接入能力迁移进本项目。
+3. 本项目跑通后，再清理正式项目目录，把模板体系迁回正式目录。
+4. 不做双向搬运；模板/RPC Core 体系是主线，手写 Web 原型只是能力来源。
+
+从 `browser-agent-product` 迁移过来的能力只允许进入 adapter 或 server 层：
+
+- 创建连接 Key。
+- 插件下载时内置 gateway URL 和 key。
+- 检测插件连接状态。
+- Web 多用户 browser/session/connection 绑定。
+- Cloud browser runtime / gateway 适配。
+- 录制 start/status/stop 的云端 adapter。
+
+不要迁移以下内容作为主线：
+
+- 手写 `web-app/public/app` UI。
+- 绕过 RPC Core 的前端 API 调用模型。
+- 固定 `localhost:9221` 的单用户假设。
+- 与 React/Vite/Zustand/RPC schema 重复的临时状态管理。
+
+### Web / Desktop 双端分层
+
+本项目最终要同时服务 Web 多用户版和桌面单机版。上层业务必须共用，差异只能沉到 transport/runtime 层。
+
+```
+React Workbench
+  -> RPC Client
+  -> RPC Handlers
+  -> Browser Service
+  -> BrowserRuntime Adapter
+      -> CloudBrowserRuntime -> Remote Gateway -> Chrome Extension
+      -> LocalBrowserRuntime -> Local Proxy -> Chrome Extension
+```
+
+共用层：
+
+- `src/shared/modules/*`：RPC 方法和事件类型。
+- `src/shared/handlers/*`：业务 handler，尽量不直接写 Web/Desktop 分支。
+- `src/mainview/*`：工作台 UI、会话、录制、加工、资产、技能库。
+- `recorder-core`：录制事件清洗、归一化、参数化、workflow/skill 生成。
+- `workflow-engine`：录制回放、步骤状态、失败恢复。
+- `event-stream`：统一的流式事件模型。
+
+Web 专属层：
+
+- Remote browser gateway。
+- 用户 key/token 绑定。
+- 多用户浏览器连接隔离。
+- SaaS 登录、团队、计费、云存储。
+- Server-side worker / queue / sandbox。
+
+Desktop 专属层：
+
+- 本地 proxy。
+- `localhost` 插件连接。
+- IPC / Electrobun bridge。
+- 托盘、开机启动、后台常驻。
+- 本地定时任务。
+- 本地 SQLite / 文件系统存储。
+
+### 插件接入模型
+
+Web 端不能把 `CLOUD_PROXY_URL` 当成单个用户浏览器地址。它只是公共 gateway。
+
+Web 首期采用专属扩展包：
+
+1. 用户打开 Web 工作台。
+2. 服务端生成 `browserKey`。
+3. 下载时把 `wss://<gateway>/plugin?key=<browserKey>` 写入扩展包。
+4. 用户安装扩展。
+5. 扩展连接 gateway。
+6. Gateway 校验 key，并绑定 `userId -> browserId -> connectionId`。
+7. UI 通过 RPC 获取连接状态。
+
+后续再升级为公共扩展：
+
+- 用户安装统一扩展。
+- 在扩展内输入激活码或登录。
+- 服务端完成浏览器绑定。
+
+Desktop 端采用本地连接：
+
+- 桌面 App 启动本地 proxy。
+- 扩展默认连接 `ws://localhost:<port>/plugin`。
+- 不依赖云端也能录制、加工、回放。
+
+### 录制到加工到技能
+
+录制不是最终产物。录制停止后必须进入加工流程：
+
+```
+Raw Recording
+  -> Normalize
+  -> Clean / Deduplicate
+  -> Stabilize Selectors
+  -> Parameterize Inputs
+  -> Workflow
+  -> Recorded Skill
+```
+
+当前已有：
+
+- 顶栏录制按钮。
+- `browser.recordStart` / `browser.recordStatus` / `browser.recordStop`。
+- 「加工」Tab。
+- `browser.processRecording`。
+
+下一步要补齐：
+
+- 录制结果保存。
+- Workflow 结构化输出。
+- 一键 replay。
+- 加工结果保存为 Skill。
+- Skill 出现在侧栏技能库。
+
+### 运行隔离与沙盒
+
+MVP 可以先进程内执行任务，但接口必须按可替换 worker 设计。
+
+Web 多用户运行隔离：
+
+- 每次执行都有 `runId`。
+- 每个 run 绑定 `userId/sessionId/browserId/connectionId`。
+- 命令必须路由到该用户自己的浏览器连接。
+- 事件必须只推送给对应 session/client。
+- 后续可替换为 worker pool、child process、container 或 remote sandbox。
+
+Desktop 单机运行隔离：
+
+- 默认本机单用户。
+- 任务可在本地后台队列中执行。
+- 定时任务只属于桌面端，不进入 Web MVP。
+- 本地执行仍需保留 `runId`、日志、取消、失败恢复。
+
+### 通讯架构（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 约束**：提示词限制 + 渲染规则
+
+### 🔲 待实现
+
+- [ ] **Web gateway adapter**：迁移 browser-agent-product 的 key 生成、扩展打包、连接检测
+- [ ] **技能保存**：加工完成后保存为可复用技能（侧栏技能库）
+- [ ] **录制重放**：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 默认空会话
+
+打开页面就有空会话占位，用户可直接输入。加号按钮智能创建——当前空会话没消息时不重复创建。
+
+#### 2026-06-26 模板体系作为主线
+
+`/tmp/ba-demo` 和 `pi-agent-template/templates/browser-agent` 是标准基线。`study-web/browser-agent-product` 中的手写 Web UI 不再作为主线继续演进，只迁移其中已经验证过的 Web gateway、插件专属包、连接检测和 Cloud runtime adapter 能力。
+
+## 开发规范
+
+### 端口
+
+- 后端：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/browser-agent/CHANGELOG.md

@@ -0,0 +1,15 @@
+# browser-agent-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/browser-agent/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/browser-agent/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/browser-agent/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],
+  },
+};

package/templates/browser-agent/electrobun.config.ts

@@ -0,0 +1,27 @@
+import type { ElectrobunConfig } from "electrobun";
+
+export default {
+	app: {
+		name: "react-tailwind-vite",
+		identifier: "reacttailwindvite.electrobun.dev",
+		version: "0.0.1",
+	},
+	build: {
+		// Vite builds to dist/, we copy from there
+		copy: {
+			"dist/index.html": "views/mainview/index.html",
+			"dist/assets": "views/mainview/assets",
+		},
+		// Ignore Vite output in watch mode — HMR handles view rebuilds separately
+		watchIgnore: ["dist/**"],
+		mac: {
+			bundleCEF: false,
+		},
+		linux: {
+			bundleCEF: false,
+		},
+		win: {
+			bundleCEF: false,
+		},
+	},
+} satisfies ElectrobunConfig;

package/templates/browser-agent/electron/main.js

@@ -0,0 +1,46 @@
+const { app, BrowserWindow, ipcMain } = require('electron');
+const path = require('path');
+
+let mainWindow;
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      nodeIntegration: false,
+      contextIsolation: true,
+    },
+  });
+
+  if (process.env.NODE_ENV === 'development') {
+    mainWindow.loadURL('http://localhost:5173');
+  } else {
+    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
+  }
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+}
+
+app.whenReady().then(() => {
+  createWindow();
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+
+ipcMain.handle('ping', async () => {
+  return 'pong';
+});

package/templates/browser-agent/electron/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  ping: () => ipcRenderer.invoke('ping'),
+});

package/templates/browser-agent/electron-builder.json

@@ -0,0 +1,40 @@
+{
+	"appId": "com.piagent.app",
+	"productName": "Pi Agent",
+	"copyright": "Copyright © 2024 dyyz1993",
+	"directories": {
+		"output": "dist-electron",
+		"buildResources": "build"
+	},
+	"files": ["dist/**/*", "electron/**/*", "package.json"],
+	"mac": {
+		"category": "public.app-category.developer-tools",
+		"hardenedRuntime": true,
+		"gatekeeperAssess": false,
+		"entitlements": ["com.apple.security.cs.allow-jit"],
+		"target": [
+			{
+				"target": "dmg",
+				"arch": ["x64", "arm64"]
+			}
+		]
+	},
+	"win": {
+		"target": [
+			{
+				"target": "nsis",
+				"arch": ["x64"]
+			}
+		],
+		"artifactName": "${productName}-${version}-${arch}.${ext}"
+	},
+	"linux": {
+		"target": ["AppImage", "deb"],
+		"category": "Development"
+	},
+	"publish": {
+		"provider": "github",
+		"owner": "dyyz1993",
+		"repo": "pi-agent-app"
+	}
+}