botrun-horse 2.29.2 → 2.31.0

package/botrun-c/web/FIREBASE-MANUAL-STEPS.md

@@ -0,0 +1,41 @@
+# 🔥 Firebase Console 手動操作指南（1 分鐘完成）
+
+## ✅ 已自動完成的設定
+
+- ✅ Firebase Web App 已建立：`confidential-botrun-web`
+- ✅ Firebase 配置已更新到所有環境變數
+- ✅ Cloud Run 已重新部署並成功啟動
+- ✅ Firebase Admin SDK 已連接到正確的專案
+
+## 📋 需要手動完成的步驟（2 個點擊）
+
+### 第一步：啟用 Google Sign-In（30 秒）
+
+1. 訪問 Firebase Console：
+   ```
+   https://console.firebase.google.com/project/confidential-botrun-c9e39/authentication/providers
+   ```
+
+2. 點擊「Google」提供商
+3. 啟用「Enable」開關
+4. 選擇支援電子郵件：`cbh@cameo.tw`
+5. 點擊「Save」
+
+### 第二步：加入授權域名（30 秒）
+
+1. 在同一頁面，點擊「Settings」標籤
+2. 找到「Authorized domains」區塊
+3. 點擊「Add domain」
+4. 輸入：`confidential-botrun-551954295423.asia-east1.run.app`
+5. 點擊「Add」
+
+---
+
+## 📊 設定摘要
+
+**Firebase Project**: `confidential-botrun-c9e39`
+**Firebase Web App**: `confidential-botrun-web`
+**App ID**: `1:979669169263:web:bda3889209dd7a36b8499a`
+**Auth Domain**: `confidential-botrun-c9e39.firebaseapp.com`
+**Cloud Run URL**: `https://confidential-botrun-551954295423.asia-east1.run.app`
+**GCS Bucket**: `gs://confidential-botrun`

package/botrun-c/web/QUICK-SETUP-HELPER.md

@@ -0,0 +1,79 @@
+# 🚀 快速設定輔助工具
+
+我已經為您自動完成以下步驟：
+- ✅ 建立 Firebase Web App
+- ✅ 配置所有環境變數
+- ✅ 重新建置並部署 Cloud Run
+- ✅ 開啟必要的 Console 頁面
+
+## 📺 現在應該有 2 個瀏覽器頁面已開啟
+
+### 頁面 1：組織政策設定
+**URL**: https://console.cloud.google.com/iam-admin/orgpolicies/iam-allowedPolicyMemberDomains?project=confidential-botrun
+
+**操作步驟**:
+1. 點擊「**EDIT**」（編輯）按鈕
+2. 選擇「**Replace**」（取代）
+3. 點擊「**+ ADD RULE**」
+4. 選擇「**Allow All**」
+5. 點擊「**SET POLICY**」（設定政策）
+
+### 頁面 2：Firebase Authentication 設定
+**URL**: https://console.firebase.google.com/project/confidential-botrun-c9e39/authentication/providers
+
+**操作步驟**:
+
+**A. 啟用 Google Sign-In:**
+1. 找到「**Google**」提供商
+2. 點擊進入
+3. 啟用「**Enable**」開關
+4. 在「Project support email」選擇：`cbh@cameo.tw`
+5. 點擊「**Save**」
+
+**B. 加入授權域名:**
+1. 點擊「**Settings**」標籤
+2. 找到「**Authorized domains**」區塊
+3. 點擊「**Add domain**」
+4. 輸入：`confidential-botrun-551954295423.asia-east1.run.app`
+5. 點擊「**Add**」
+
+---
+
+## ⏱️ 完成後執行
+
+完成上述步驟後，執行以下命令來驗證和完成設定：
+
+```bash
+bash /tmp/wait-and-verify.sh
+```
+
+或者直接測試：
+
+```bash
+# 設定 Cloud Run 公開存取
+gcloud run services add-iam-policy-binding confidential-botrun \
+  --region=asia-east1 \
+  --member=allUsers \
+  --role=roles/run.invoker \
+  --project=confidential-botrun
+
+# 測試訪問
+open https://confidential-botrun-551954295423.asia-east1.run.app
+```
+
+---
+
+## 🎯 預期結果
+
+完成所有步驟後，您應該可以：
+- ✅ 訪問 https://confidential-botrun-551954295423.asia-east1.run.app
+- ✅ 看到登入頁面（不再顯示 403 Forbidden）
+- ✅ 點擊「Sign in with Google」
+- ✅ 使用任何 Gmail 或 Google Workspace 帳號登入
+- ✅ 使用 AI 聊天功能
+
+---
+
+**預計完成時間**: 4 分鐘
+
+如果遇到問題，請告訴我具體的錯誤訊息！

package/botrun-c/web/README.md

@@ -0,0 +1,162 @@
+# Botrun-C Web
+
+北歐極簡風格的 AI Agent 對話介面，專為手機全螢幕對話優化。
+
+## 特色
+
+- 🎨 **北歐極簡設計** - 清爽簡約的 UI，將空間留給對話內容
+- 📱 **手機優化** - 響應式設計，完美適配移動設備
+- ⚡ **即時串流** - Server-Sent Events (SSE) 實時顯示 AI 回應
+- 🌓 **明暗主題** - 自動適配系統主題
+- 🛠️ **工具可視化** - 清楚顯示 AI 使用的工具
+
+## 技術棧
+
+- **Framework**: Next.js 14 (App Router)
+- **Styling**: Tailwind CSS
+- **UI Components**: shadcn/ui
+- **Icons**: Lucide React
+- **Language**: TypeScript
+
+## 快速開始
+
+### 1. 安裝依賴
+
+```bash
+npm install
+```
+
+### 2. 設定環境變數
+
+```bash
+cp .env.local.example .env.local
+```
+
+編輯 `.env.local`:
+```env
+NEXT_PUBLIC_API_URL=http://localhost:8000
+```
+
+### 3. 啟動開發伺服器
+
+```bash
+npm run dev
+```
+
+應用程式將在 http://localhost:3000 啟動。
+
+## 專案結構
+
+```
+web/
+├── app/                    # Next.js App Router
+│   ├── layout.tsx         # 根佈局
+│   ├── page.tsx           # 主頁面（對話介面）
+│   └── globals.css        # 全域樣式
+├── components/            # React 組件
+│   ├── ui/               # shadcn/ui 基礎組件
+│   │   ├── button.tsx
+│   │   ├── input.tsx
+│   │   └── scroll-area.tsx
+│   ├── chat-message.tsx  # 訊息組件
+│   └── chat-input.tsx    # 輸入框組件
+├── lib/                   # 工具函式
+│   └── utils.ts          # cn() 等工具
+└── public/               # 靜態資源
+```
+
+## 北歐風格設計理念
+
+### 色彩系統
+
+**淺色主題** - 受雪白 (Snow White) 啟發
+- 主要背景：純白 (#FFFFFF)
+- 次要背景：極淺灰 (#F8F9FA)
+- 強調色：冰藍 (#4A90E2)
+
+**深色主題** - 受極夜 (Polar Night) 啟發
+- 主要背景：深藍灰 (#0C0E15)
+- 次要背景：暗藍灰 (#1A1D2E)
+- 強調色：淺藍 (#5B9BF3)
+
+### 設計原則
+
+1. **極簡主義** - 移除不必要的裝飾，專注於內容
+2. **留白** - 充足的空白空間，提升閱讀舒適度
+3. **簡潔字體** - 使用 Inter 字體，清晰易讀
+4. **柔和圓角** - 適度的圓角，營造友善氛圍
+5. **對話優先** - 最大化對話展示空間
+
+## 手機優化
+
+- **全螢幕體驗** - 100vh 高度，充分利用螢幕空間
+- **固定輸入** - 輸入框固定在底部，方便單手操作
+- **自動捲動** - 新訊息自動捲到視窗底部
+- **觸控優化** - 適當的按鈕大小與間距
+- **響應式字體** - 根據螢幕大小調整字體
+
+## API 整合
+
+前端通過 Server-Sent Events (SSE) 與後端 API 通訊：
+
+```typescript
+// POST /api/chat
+{
+  "message": "你好",
+  "sessionId": "optional-session-id"
+}
+```
+
+**SSE 事件類型：**
+- `session`: 新的會話 ID
+- `message`: AI 回應文字片段
+- `tool_use`: AI 使用工具
+- `tool_result`: 工具執行結果
+- `done`: 對話完成
+- `error`: 發生錯誤
+
+## 開發
+
+```bash
+# 開發模式（含 hot reload）
+npm run dev
+
+# 建置生產版本
+npm run build
+
+# 執行生產版本
+npm start
+
+# 程式碼檢查
+npm run lint
+```
+
+## 部署
+
+### Vercel（推薦）
+
+```bash
+npm install -g vercel
+vercel
+```
+
+### Docker
+
+```bash
+docker build -t botrun-c-web .
+docker run -p 3000:3000 botrun-c-web
+```
+
+## 環境變數
+
+| 變數 | 說明 | 預設值 |
+|------|------|--------|
+| `NEXT_PUBLIC_API_URL` | API 伺服器 URL | http://localhost:8000 |
+
+## 授權
+
+MIT License
+
+---
+
+**Botrun-C Web** - Simple, Clean, Nordic

package/botrun-c/web/__tests__/image-extractor.test.ts

@@ -0,0 +1,147 @@
+// ============================================================================
+// image-extractor.test.ts - 圖片提取器單元測試
+// BDD 風格測試案例
+// ============================================================================
+
+import {
+  extractImagesFromMarkdown,
+  extractSessionId,
+  extractImagesFromToolOutput,
+  extractImagesFromToolUses,
+  isValidImageUrl,
+} from '../lib/image-extractor';
+
+describe('Image Extractor', () => {
+  describe('extractImagesFromMarkdown', () => {
+    it('should extract single image from markdown', () => {
+      const content = '![Generated Image](https://storage.googleapis.com/bucket/image.png)';
+      const images = extractImagesFromMarkdown(content);
+
+      expect(images).toHaveLength(1);
+      expect(images[0].url).toBe('https://storage.googleapis.com/bucket/image.png');
+      expect(images[0].alt).toBe('Generated Image');
+    });
+
+    it('should extract multiple images from markdown', () => {
+      const content = `
+        ## 圖片生成結果
+        ![Image 1](https://storage.googleapis.com/bucket/image1.png)
+        ![Image 2](https://storage.googleapis.com/bucket/image2.png)
+      `;
+      const images = extractImagesFromMarkdown(content);
+
+      expect(images).toHaveLength(2);
+      expect(images[0].url).toContain('image1.png');
+      expect(images[1].url).toContain('image2.png');
+    });
+
+    it('should reject non-HTTPS URLs', () => {
+      const content = '![Image](http://insecure.com/image.png)';
+      const images = extractImagesFromMarkdown(content);
+
+      expect(images).toHaveLength(0);
+    });
+
+    it('should handle empty content', () => {
+      expect(extractImagesFromMarkdown('')).toHaveLength(0);
+      expect(extractImagesFromMarkdown(null as any)).toHaveLength(0);
+      expect(extractImagesFromMarkdown(undefined as any)).toHaveLength(0);
+    });
+
+    it('should use default alt text when alt is empty', () => {
+      const content = '![](https://storage.googleapis.com/bucket/image.png)';
+      const images = extractImagesFromMarkdown(content);
+
+      expect(images).toHaveLength(1);
+      expect(images[0].alt).toBe('Generated Image');
+    });
+  });
+
+  describe('extractSessionId', () => {
+    it('should extract session ID from content', () => {
+      const content = 'Session ID: `abc123-def456-ghi789`';
+      const sessionId = extractSessionId(content);
+
+      expect(sessionId).toBe('abc123-def456-ghi789');
+    });
+
+    it('should return undefined when no session ID', () => {
+      const content = 'No session info here';
+      const sessionId = extractSessionId(content);
+
+      expect(sessionId).toBeUndefined();
+    });
+
+    it('should handle empty content', () => {
+      expect(extractSessionId('')).toBeUndefined();
+      expect(extractSessionId(null as any)).toBeUndefined();
+    });
+  });
+
+  describe('extractImagesFromToolOutput', () => {
+    it('should extract images from string output', () => {
+      const toolOutput = '![Image](https://storage.googleapis.com/bucket/image.png)';
+      const images = extractImagesFromToolOutput(toolOutput);
+
+      expect(images).toHaveLength(1);
+    });
+
+    it('should extract images from MCP array format', () => {
+      const toolOutput = [
+        { type: 'text', text: '![Image](https://storage.googleapis.com/bucket/image.png)' },
+      ];
+      const images = extractImagesFromToolOutput(toolOutput);
+
+      expect(images).toHaveLength(1);
+    });
+
+    it('should attach sessionId to images', () => {
+      const toolOutput = `
+        ![Image](https://storage.googleapis.com/bucket/image.png)
+        Session ID: \`test-session-id\`
+      `;
+      const images = extractImagesFromToolOutput(toolOutput);
+
+      expect(images).toHaveLength(1);
+      expect(images[0].sessionId).toBe('test-session-id');
+    });
+  });
+
+  describe('extractImagesFromToolUses', () => {
+    it('should extract images from multiple tool uses', () => {
+      const toolUses = [
+        { toolOutput: '![Image 1](https://example.com/1.png)' },
+        { toolOutput: '![Image 2](https://example.com/2.png)' },
+      ];
+      const images = extractImagesFromToolUses(toolUses);
+
+      expect(images).toHaveLength(2);
+    });
+
+    it('should handle empty toolUses', () => {
+      expect(extractImagesFromToolUses([])).toHaveLength(0);
+      expect(extractImagesFromToolUses(undefined)).toHaveLength(0);
+    });
+  });
+
+  describe('isValidImageUrl', () => {
+    it('should accept GCS signed URLs', () => {
+      expect(isValidImageUrl('https://storage.googleapis.com/bucket/image.png?X-Goog-Algorithm=...')).toBe(true);
+    });
+
+    it('should accept common image extensions', () => {
+      expect(isValidImageUrl('https://example.com/image.png')).toBe(true);
+      expect(isValidImageUrl('https://example.com/image.jpg')).toBe(true);
+      expect(isValidImageUrl('https://example.com/image.webp')).toBe(true);
+    });
+
+    it('should reject non-HTTPS URLs', () => {
+      expect(isValidImageUrl('http://example.com/image.png')).toBe(false);
+    });
+
+    it('should reject invalid inputs', () => {
+      expect(isValidImageUrl('')).toBe(false);
+      expect(isValidImageUrl(null as any)).toBe(false);
+    });
+  });
+});

package/botrun-c/web/__tests__/useGitHub.test.ts

@@ -0,0 +1,245 @@
+/**
+ * BDD Test Suite for useGitHub Hook
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock fetch
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+
+// Mock API URL
+vi.mock('@/lib/api-url', () => ({
+  getApiUrl: () => 'http://localhost:8080',
+}));
+
+describe('useGitHub Hook Types (BDD)', () => {
+  beforeEach(() => {
+    mockFetch.mockClear();
+  });
+
+  describe('Given GitHubRepoInfo type', () => {
+    it('When defining a repo info, Then it should have correct shape', () => {
+      const repoInfo = {
+        id: 123,
+        name: 'my-repo',
+        fullName: 'owner/my-repo',
+        private: false,
+        defaultBranch: 'main',
+        url: 'https://github.com/owner/my-repo',
+      };
+
+      expect(repoInfo.id).toBe(123);
+      expect(repoInfo.fullName).toBe('owner/my-repo');
+      expect(repoInfo.private).toBe(false);
+    });
+  });
+
+  describe('Given ConnectedRepo type', () => {
+    it('When defining a connected repo, Then it should have correct shape', () => {
+      const connectedRepo = {
+        id: 'user123__owner_my-repo',
+        repoFullName: 'owner/my-repo',
+        owner: 'owner',
+        name: 'my-repo',
+        defaultBranch: 'main',
+        currentBranch: 'feature/test',
+        status: 'cloned' as const,
+        lastSyncAt: '2024-01-15T12:00:00Z',
+        error: null,
+        createdAt: '2024-01-01T00:00:00Z',
+      };
+
+      expect(connectedRepo.id).toBe('user123__owner_my-repo');
+      expect(connectedRepo.status).toBe('cloned');
+      expect(connectedRepo.error).toBeNull();
+    });
+
+    it('When repo has error, Then error should have message and optional code', () => {
+      const connectedRepo = {
+        id: 'user123__owner_my-repo',
+        repoFullName: 'owner/my-repo',
+        owner: 'owner',
+        name: 'my-repo',
+        defaultBranch: 'main',
+        currentBranch: 'main',
+        status: 'error' as const,
+        lastSyncAt: null,
+        error: {
+          message: 'Clone failed',
+          code: 'CLONE_ERROR',
+        },
+        createdAt: '2024-01-01T00:00:00Z',
+      };
+
+      expect(connectedRepo.status).toBe('error');
+      expect(connectedRepo.error?.message).toBe('Clone failed');
+      expect(connectedRepo.error?.code).toBe('CLONE_ERROR');
+    });
+  });
+
+  describe('Given GitStatus type', () => {
+    it('When repo has changes, Then hasChanges should be true', () => {
+      const status = {
+        branch: 'main',
+        ahead: 1,
+        behind: 0,
+        staged: ['file1.ts'],
+        unstaged: [],
+        untracked: ['newfile.ts'],
+        hasChanges: true,
+      };
+
+      expect(status.hasChanges).toBe(true);
+      expect(status.staged.length).toBe(1);
+      expect(status.untracked.length).toBe(1);
+    });
+
+    it('When repo has no changes, Then hasChanges should be false', () => {
+      const status = {
+        branch: 'main',
+        ahead: 0,
+        behind: 0,
+        staged: [],
+        unstaged: [],
+        untracked: [],
+        hasChanges: false,
+      };
+
+      expect(status.hasChanges).toBe(false);
+      expect(status.staged.length).toBe(0);
+    });
+  });
+
+  describe('Given GitCommit type', () => {
+    it('When defining a commit, Then it should have all required fields', () => {
+      const commit = {
+        sha: 'abc123def456',
+        message: 'Initial commit',
+        author: 'John Doe',
+        date: '2024-01-15T12:00:00Z',
+      };
+
+      expect(commit.sha).toBe('abc123def456');
+      expect(commit.message).toBe('Initial commit');
+      expect(commit.author).toBe('John Doe');
+    });
+  });
+
+  describe('Given API responses', () => {
+    it('When status API returns connected=false, Then repos should be empty', async () => {
+      const mockResponse = {
+        connected: false,
+        connectedRepos: [],
+        availableRepos: [],
+      };
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockResponse,
+      });
+
+      const response = await fetch('http://localhost:8080/api/github/status');
+      const data = await response.json();
+
+      expect(data.connected).toBe(false);
+      expect(data.connectedRepos).toHaveLength(0);
+    });
+
+    it('When status API returns connected=true, Then repos should be populated', async () => {
+      const mockResponse = {
+        connected: true,
+        connectedRepos: [
+          {
+            id: 'user123__org_repo',
+            repoFullName: 'org/repo',
+            owner: 'org',
+            name: 'repo',
+            defaultBranch: 'main',
+            currentBranch: 'main',
+            status: 'cloned',
+            lastSyncAt: '2024-01-15T12:00:00Z',
+            error: null,
+            createdAt: '2024-01-01T00:00:00Z',
+          },
+        ],
+        availableRepos: [
+          {
+            id: 456,
+            name: 'other-repo',
+            fullName: 'org/other-repo',
+            private: true,
+            defaultBranch: 'main',
+            url: 'https://github.com/org/other-repo',
+          },
+        ],
+      };
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockResponse,
+      });
+
+      const response = await fetch('http://localhost:8080/api/github/status');
+      const data = await response.json();
+
+      expect(data.connected).toBe(true);
+      expect(data.connectedRepos).toHaveLength(1);
+      expect(data.connectedRepos[0].repoFullName).toBe('org/repo');
+      expect(data.availableRepos).toHaveLength(1);
+    });
+
+    it('When clone API succeeds, Then return repo info', async () => {
+      const mockResponse = {
+        success: true,
+        repo: {
+          id: 'user123__org_repo',
+          repoFullName: 'org/repo',
+          owner: 'org',
+          name: 'repo',
+          defaultBranch: 'main',
+          currentBranch: 'main',
+          status: 'cloned',
+          lastSyncAt: '2024-01-15T12:00:00Z',
+          error: null,
+          createdAt: '2024-01-15T12:00:00Z',
+        },
+        localPath: '/mnt/data/user123/github/org_repo',
+      };
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockResponse,
+      });
+
+      const response = await fetch('http://localhost:8080/api/github/repos/org/repo/clone', {
+        method: 'POST',
+      });
+      const data = await response.json();
+
+      expect(data.success).toBe(true);
+      expect(data.repo.status).toBe('cloned');
+      expect(data.localPath).toContain('github');
+    });
+
+    it('When clone API fails, Then return error', async () => {
+      const mockResponse = {
+        success: false,
+        error: 'Repository not found or not accessible.',
+      };
+
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        json: async () => mockResponse,
+      });
+
+      const response = await fetch('http://localhost:8080/api/github/repos/org/nonexistent/clone', {
+        method: 'POST',
+      });
+      const data = await response.json();
+
+      expect(data.success).toBe(false);
+      expect(data.error).toContain('not found');
+    });
+  });
+});