@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/cowork/docs/CODE-VIEW-V2.md

@@ -0,0 +1,196 @@
+# Cowork Code View V2 — 右侧边栏浏览器预览 + 元素选择器
+
+> **核心改动**：浏览器预览从"Code Tab 全文 iframe"改为"右侧面板独立区块"。
+> Code Tab 只负责地址栏和 URL 管理，实际渲染交给右栏。
+> 新增元素选择器功能，支持选取页面元素并提取 CSS selector。
+
+---
+
+## 一、布局变化
+
+### 当前（V1）
+
+```
+Code Tab → 中间区域 = [地址栏 + iframe 全屏]
+          右栏 = 隐藏（Cowork 模式才显示）
+```
+
+### 目标（V2）
+
+```
+Code Tab → 左栏 = URL 历史
+          中栏 = [地址栏 + URL 管理界面]（不渲染 iframe）
+          右栏 = Progress + Artifacts + Context + 🆕 Preview 浏览器
+```
+
+---
+
+## 二、改动清单
+
+### 2.1 CodeView.tsx — 去掉 iframe，只留地址栏 + 管理界面
+
+```typescript
+// 当前：CodeView = AddressBar + PreviewFrame(全屏)
+// 改为：CodeView = AddressBar + URL 管理（历史列表 + 快速启动）
+// iframe 渲染交给右侧面板的 PreviewBlock
+```
+
+修改内容：
+
+- 移除 `<PreviewFrame />` 渲染
+- 地址栏输入 URL 后，不在这里渲染 iframe
+- 改为：右侧面板自动展开 Preview 区块并加载 URL
+- 地址栏保留：前进/后退/刷新/关闭按钮 + URL 输入
+
+### 2.2 右侧面板新增 `PreviewBlock` 组件
+
+```typescript
+// 新文件：components/right/PreviewBlock.tsx
+// 在 Code Tab 下显示，Cowork/Chat 模式下隐藏或折叠
+
+export function PreviewBlock() {
+  const currentTab = usePreviewStore(s => s.currentTab);
+  const isCodeTab = useViewStore(s => s.centerTab === "code");
+
+  if (!isCodeTab || !currentTab) return null; // 非 Code 模式或无标签时隐藏
+
+  return (
+    <div className="...">
+      {/* 标题栏 */}
+      <div className="flex items-center justify-between px-4 py-3">
+        <span>Preview</span>
+        <span className="text-xs">{currentTab.url}</span>
+      </div>
+      {/* 元素选择工具栏 */}
+      <ElementPickerToolbar />
+      {/* iframe 浏览器 */}
+      <PreviewFrame tab={currentTab} useIframe={true} />
+      {/* 选中的元素选择器 */}
+      <SelectedElementBar />
+    </div>
+  );
+}
+```
+
+### 2.3 新增 `ElementPicker` 元素选择器
+
+```typescript
+// 新文件：components/right/ElementPicker.tsx
+// 注入 JS 到 iframe，实现 inspect 模式
+
+export function ElementPicker() {
+  const [active, setActive] = useState(false);
+  const [selectedSelector, setSelectedSelector] = useState("");
+
+  const togglePicker = () => {
+    setActive(!active);
+    // 通过 postMessage 向 iframe 注入 inspect 脚本
+    iframeRef.contentWindow.postMessage({
+      type: "TOGGLE_INSPECT",
+      active: !active,
+    }, "*");
+  };
+
+  const copyToInput = () => {
+    // 将 selector 添加到聊天输入框
+    // 通过 clipboard 或直接写入 store
+    navigator.clipboard.writeText(selectedSelector);
+  };
+
+  return (
+    <div className="...">
+      <button onClick={togglePicker} className={active ? "active" : ""}>
+        🎯 选取元素
+      </button>
+      {selectedSelector && (
+        <div>
+          <code>{selectedSelector}</code>
+          <button onClick={copyToInput}>📋 添加到输入框</button>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+#### 元素选择器技术方案
+
+跨域问题：对于同源页面（`localhost`），可以直接用 `iframe.contentDocument`；
+对于非同源页面，需要：
+
+1. 在 iframe URL 后拼接 `?inspector=1`，让目标页面加载一个 inject script
+2. 或者后端代理请求，注入 inspect JS
+3. MVP 阶段：**只支持同源（localhost）页面**的元素选取，用 `postMessage` + iframe 内容脚本
+
+```
+用户点击"选取元素"
+  ↓
+iframe 加载注入脚本（同源时直接操作 DOM）
+  ↓
+用户 hover/click 元素 → 高亮 + 提取 CSS selector
+  ↓
+postMessage({type: "ELEMENT_SELECTED", selector: ".btn-primary"}) 发回主页面
+  ↓
+ElementPicker 显示 selector，用户点击"添加到输入框"
+  ↓
+selector 写入聊天输入框
+```
+
+### 2.4 AppLayout 更新 — 右侧面板根据 Tab 显示不同内容
+
+```typescript
+// 右栏内容分区：
+// Cowork 模式：Progress + Artifacts + Context
+// Code 模式：Progress + Preview(替换 Context) + Artifacts
+// Chat 模式：隐藏
+
+{showRightPanel && centerTab === "cowork" && (
+  <div className="w-[300px] ...">
+    <ProgressPanel />
+    <ArtifactsPanel />
+    <ContextPanel />
+  </div>
+)}
+{showRightPanel && centerTab === "code" && (
+  <div className="w-[300px] ...">
+    <ProgressPanel />
+    <ArtifactsPanel />
+    <PreviewBlock />  {/* 新增 */}
+  </div>
+)}
+```
+
+### 2.5 交互流程
+
+```
+用户在聊天中让 AI 帮忙调试前端
+  → AI 回复："在 localhost:5173 看一下效果"
+  → 用户切换到 Code Tab
+  → 地址栏已填入 localhost:5173（或用户手动输入）
+  → 右侧 Preview 区块加载网页
+  → 用户点"选取元素"
+  → 在 iframe 中 hover 按钮，高亮显示
+  → 点击 → 提取到 .btn-submit 选择器
+  → "添加到输入框" → 聊天输入框出现 ".btn-submit"
+  → 用户发送："这个 .btn-submit 按钮的样式有点问题"
+```
+
+---
+
+## 三、文件清单
+
+| 操作 | 文件                                              | 说明                                       |
+| ---- | ------------------------------------------------- | ------------------------------------------ |
+| 🆕   | `src/mainview/components/right/PreviewBlock.tsx`  | 右侧预览区块（标题 + 工具栏 + iframe）     |
+| 🆕   | `src/mainview/components/right/ElementPicker.tsx` | 元素选择器（inspect 模式 + selector 提取） |
+| ✏️   | `src/mainview/components/code/CodeView.tsx`       | 去掉 iframe 渲染，只留地址栏 + URL 管理    |
+| ✏️   | `src/mainview/components/layout/AppLayout.tsx`    | 右侧面板根据 Tab 显示不同内容              |
+| ✏️   | `src/mainview/stores/use-preview-store.ts`        | 可能需要加 selectElement action            |
+
+---
+
+## 四、Phase 2（可选）
+
+- iframe inspect 脚本注入方案（支持非同源页面）
+- 页面截图预览（替代完整 iframe，省内存）
+- 多标签浏览器标签栏

package/templates/cowork/docs/CODE-VIEW-V4.md

@@ -0,0 +1,150 @@
+# Cowork Code View V4 — 聊天链接触发右侧浏览器
+
+> **核心改动**：浏览器不是手动输入 URL 打开的，而是**聊天里出现 localhost 链接，点击后右侧面板自动放大并显示浏览器**。
+
+---
+
+## 一、对照稿件的真实交互
+
+```
+用户在聊天中说："看一下 localhost:5173 的效果"
+  ↓
+AI 回复消息里包含 localhost:5173 链接（带 🌐 图标）
+  ↓
+用户点击这个链接
+  ↓
+右侧面板自动放大到 40% 宽度（从 300px 扩展到 ~560px）
+  ↓
+右侧面板显示浏览器预览（iframe 加载 localhost:5173）
+  ↓
+用户可以在右侧浏览 + 选元素
+```
+
+### 与当前实现的区别
+
+| 维度           | 当前（V3）                            | 目标（V4）                              |
+| -------------- | ------------------------------------- | --------------------------------------- |
+| 怎么打开浏览器 | 手动在右栏地址栏输入 URL              | **聊天里点 localhost 链接**             |
+| 右栏默认宽度   | 固定 300px                            | **点击链接后自动放大到 40%**            |
+| 左栏三个 Tab   | 内容不同（Cowork=任务，Code=URL历史） | **内容一样**（都是任务列表 + New task） |
+| 中间区域       | Cowork/Chat=聊天，Code=管理界面       | **永远是聊天**                          |
+
+---
+
+## 二、改动清单
+
+### 2.1 聊天消息渲染 localhost 链接
+
+在 `TaskChat.tsx` 的消息渲染中，检测文本里的 `localhost:xxxx` 或 `http://localhost`，自动渲染为可点击链接：
+
+```tsx
+// 检测 localhost URL
+const LOCALHOST_REGEX = /(https?:\/\/)?localhost:\d+(\/[^\s]*)?/g;
+
+function renderTextWithLinks(text: string, onOpenPreview: (url: string) => void) {
+	// 将 localhost URL 替换为可点击的链接组件
+	const parts = text.split(LOCALHOST_REGEX);
+	// ... 渲染：普通文本 + <LocalhostLink> 组件
+}
+```
+
+链接样式：蓝色文字 + 🌐 图标 + 下划线，hover 加深。
+
+### 2.2 点击链接 → 右栏自动放大 + 打开浏览器
+
+```typescript
+// usePreviewStore 新增
+openFromChat: (url: string) => {
+	// 1. 设置 currentTab
+	// 2. 通知右栏放大
+	useRightPanelStore.getState().setExpandedForPreview(true);
+	// 3. 加载 URL
+	this.openUrl(url);
+};
+```
+
+### 2.3 右栏 store 新增"预览放大"模式
+
+```typescript
+// useRightPanelStore 新增
+interface RightPanelState {
+	// ... 现有
+	expandedForPreview: boolean; // 点击聊天链接后自动放大
+	setExpandedForPreview: (v: boolean) => void;
+}
+
+// AppLayout 渲染时：
+const effectiveRightWidth = expandedForPreview
+	? Math.round(window.innerWidth * 0.4) // 40% 屏宽
+	: rpWidth; // 用户手动设置的宽度
+```
+
+### 2.4 左栏三个 Tab 统一
+
+去掉 TaskSidebar 里 Code Tab 显示 URL 历史的逻辑，**所有 Tab 都显示任务列表 + New task**。Tab 只影响右栏内容：
+
+- Cowork → 右栏 = Progress + Artifacts + Context
+- Code → 右栏 = Preview 浏览器（但初始空状态，等聊天链接触发）
+- Chat → 右栏 = 隐藏
+
+### 2.5 右栏 PreviewBlock 空状态优化
+
+Code Tab 初始右栏不是地址栏输入，而是：
+
+```
+┌─────────────────┐
+│ Preview         │
+│                 │
+│   🌐            │
+│ 点击聊天中的    │
+│ localhost 链接  │
+│ 打开浏览器预览  │
+│                 │
+└─────────────────┘
+```
+
+---
+
+## 三、文件改动
+
+| 操作 | 文件                   | 说明                                               |
+| ---- | ---------------------- | -------------------------------------------------- |
+| ✏️   | `TaskChat.tsx`         | 消息文本 localhost 自动链接化 + 点击打开预览       |
+| ✏️   | `use-preview-store.ts` | 新增 openFromChat 方法                             |
+| ✏️   | `use-sidebar-store.ts` | useRightPanelStore 新增 expandedForPreview         |
+| ✏️   | `AppLayout.tsx`        | 右栏宽度根据 expandedForPreview 自动放大           |
+| ✏️   | `TaskSidebar.tsx`      | 三个 Tab 统一显示任务列表（去掉 Code 的 URL 历史） |
+| ✏️   | `PreviewBlock.tsx`     | 空状态改为"点击聊天链接"提示                       |
+
+---
+
+## 四、交互流程图
+
+```
+┌─────────────────────────────────────────────────────────┐
+│ Cowork Tab                                               │
+│                                                          │
+│ ┌─────┬────────────────────────┬──────────────────┐     │
+│ │ 左栏 │  中间聊天               │ 右栏 (300px)      │     │
+│ │ 任务 │  AI: "看一下效果 🌐     │ Progress          │     │
+│ │ 列表 │  localhost:5173"       │ Artifacts         │     │
+│ │      │       ↑ 点击这个链接    │ Context           │     │
+│ │      │                        │                   │     │
+│ └─────┴────────────────────────┴──────────────────┘     │
+│                                                          │
+│ 点击 localhost:5173 后 →                                 │
+│                                                          │
+│ ┌─────┬────────────────┬──────────────────────┐         │
+│ │ 左栏 │  中间聊天       │ 右栏 (40%宽，自动放大) │         │
+│ │ 任务 │               │ ┌──────────────────┐ │         │
+│ │ 列表 │               │ │localhost:5173    │ │         │
+│ │      │               │ ├──────────────────┤ │         │
+│ │      │               │ │                  │ │         │
+│ │      │               │ │  iframe 浏览器    │ │         │
+│ │      │               │ │  (网页预览)       │ │         │
+│ │      │               │ │                  │ │         │
+│ │      │               │ └──────────────────┘ │         │
+│ │      │               │ [🎯 选取元素]        │         │
+│ └─────┴────────────────┴──────────────────────┘         │
+└─────────────────────────────────────────────────────────┘
+```

package/templates/cowork/electrobun.config.ts

@@ -0,0 +1,27 @@
+import type { ElectrobunConfig } from 'electrobun';
+
+export default {
+	app: {
+		name: 'cowork',
+		identifier: 'cowork.piagent.dev',
+		version: '0.1.0',
+	},
+	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/cowork/eslint.config.mjs

@@ -0,0 +1,79 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import rpcPlugin from '@dyyz1993/eslint-plugin-rpc';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    ignores: [
+      'node_modules/**',
+      'build/**',
+      'dist/**',
+      'dist-electron/**',
+      'electron/**',
+      'postcss.config.js',
+      'tailwind.config.js',
+    ],
+  },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    plugins: {
+      rpc: rpcPlugin,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      'jsx-a11y': jsxA11y,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-hooks/rules-of-hooks': 'warn',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      ...jsxA11y.configs.recommended.rules,
+      'jsx-a11y/click-events-have-key-events': 'warn',
+      'jsx-a11y/no-static-element-interactions': 'warn',
+      'jsx-a11y/no-autofocus': 'warn',
+      // TS 严格规则
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-empty-object-type': ['error', { allowObjectTypes: 'always', allowInterfaces: 'with-single-extends' }],
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/ban-ts-comment': ['error', {
+        'ts-expect-error': 'allow-with-description',
+        'ts-ignore': true,
+        'ts-nocheck': true,
+        'ts-check': false,
+        minimumDescriptionLength: 3,
+      }],
+      'no-empty': ['error', { allowEmptyCatch: true }],
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+
+      // RPC 规范规则（严格模式，全部 error）
+      'rpc/no-bare-method': 'error',
+      'rpc/no-direct-register': 'error',
+      'rpc/schema-merge-only': 'error',
+      'rpc/module-file-naming': 'error',
+      'rpc/require-typed-register': 'error',
+      'rpc/require-api-client': 'error',
+      'rpc/no-hardcoded-strings': 'warn',
+    },
+  },
+  {
+    files: ['src/shared/lib/logger.ts'],
+    rules: {
+      'no-console': 'off',
+    },
+  },
+  {
+    files: ['src/**/__tests__/**/*.{ts,tsx}'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+    },
+  },
+);

package/templates/cowork/llms.txt

@@ -0,0 +1,24 @@
+# Electrobun Project
+
+This is an Electrobun desktop application.
+
+IMPORTANT: Electrobun is NOT Electron. Do not use Electron APIs or patterns.
+
+## Documentation
+
+Full API reference: https://blackboard.sh/electrobun/llms.txt
+Getting started: https://blackboard.sh/electrobun/docs/
+
+## Quick Reference
+
+Import patterns:
+- Main process (Bun): `import { BrowserWindow } from "electrobun/bun"`
+- Browser context: `import { Electroview } from "electrobun/view"`
+
+Use `views://` URLs to load bundled assets (e.g., `url: "views://mainview/index.html"`).
+Views must be configured in `electrobun.config.ts` to be built and copied into the bundle.
+
+## About
+
+Electrobun is built by Blackboard (https://blackboard.sh), an innovation lab building
+tools and funding teams that define the next generation of technology.

package/templates/cowork/package.json

@@ -0,0 +1,87 @@
+{
+	"name": "cowork-app",
+	"version": "1.0.2",
+	"description": "Cowork task collaboration agent: AI-powered task orchestration with progress tracking, artifacts, and context management (Desktop + Web)",
+	"author": {
+		"name": "xuyingzhou",
+		"email": "xuyingzhou@tuzhanai.com"
+	},
+	"homepage": "https://github.com/dyyz1993/pi-agent-template",
+	"scripts": {
+		"start": "vite build && electrobun dev",
+		"dev": "electrobun dev --watch",
+		"dev:web": "bun scripts/dev.ts",
+		"dev:server": "bun src/server.ts",
+		"build": "vite build",
+		"build:canary": "vite build && electrobun build --env=canary",
+		"build:mac": "vite build && electrobun build --env=canary",
+		"build:win": "vite build && electrobun build --env=canary",
+		"build:linux": "vite build && electrobun build --env=canary",
+		"lint": "eslint .",
+		"lint:fix": "eslint . --fix",
+		"format": "prettier --write .",
+		"format:check": "prettier --check .",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:coverage": "vitest run --coverage",
+		"prepare": "husky"
+	},
+	"dependencies": {
+		"@dyyz1993/rpc-core": "^2.2.1",
+		"@tanstack/react-virtual": "^3.13.24",
+		"electrobun": "1.18.1",
+		"lucide-react": "^1.9.0",
+		"react": "^18.3.1",
+		"i18next": "^24.2.2",
+		"i18next-browser-languagedetector": "^8.0.4",
+		"react-dom": "^18.3.1",
+		"react-i18next": "^15.4.1",
+		"react-markdown": "^10.1.0",
+		"remark-gfm": "^4.0.1",
+		"zustand": "^5.0.12"
+	},
+	"devDependencies": {
+		"@dyyz1993/eslint-plugin-rpc": "^1.1.0",
+		"@eslint/js": "^9.0.0",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
+		"@types/bun": "latest",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.1",
+		"@types/ws": "^8.18.1",
+		"@vitejs/plugin-react": "^4.3.4",
+		"autoprefixer": "^10.4.20",
+		"concurrently": "^9.1.0",
+		"eslint": "^9.0.0",
+		"eslint-plugin-jsx-a11y": "^6.10.0",
+		"eslint-plugin-react-hooks": "^5.2.0",
+		"eslint-plugin-react-refresh": "^0.4.20",
+		"happy-dom": "^20.9.0",
+		"husky": "^9.1.0",
+		"jsdom": "^29.1.1",
+		"postcss": "^8.4.49",
+		"tailwindcss": "^3.4.16",
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^6.0.3",
+		"vitest": "^4.1.5",
+		"ws": "^8.18.0",
+		"@commitlint/cli": "^19.8.1",
+		"@commitlint/config-conventional": "^19.8.1",
+		"prettier": "^3.5.3",
+		"lint-staged": "^15.5.2"
+	},
+	"lint-staged": {
+		"*.{ts,tsx}": [
+			"eslint --fix",
+			"prettier --write"
+		],
+		"*.{json,md,css,html}": [
+			"prettier --write"
+		]
+	},
+	"overrides": {
+		"minimatch": "^10.0.1"
+	}
+}

package/templates/cowork/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};