botrun-horse 2.29.2 → 2.31.0

package/botrun-c/.claude/skills/GoogleDrive/346/212/200/350/203/275/scripts/gdrive-update.mjs

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+/**
+ * gdrive-update.mjs - 更新 Google Drive 檔案內容
+ *
+ * 使用方式：
+ *   node gdrive-update.mjs --userId "user123" --fileId "abc123" --content "# 更新內容"
+ *   node gdrive-update.mjs --userId "user123" --fileId "abc123" --file "/path/to/file"
+ *
+ * 輸出 JSON：
+ *   {
+ *     "success": true,
+ *     "file": { "id": "xxx", "name": "file.md", "modifiedTime": "...", "revisionId": "..." }
+ *   }
+ */
+
+import { parseArgs } from 'node:util';
+import { readFileSync } from 'fs';
+
+const API_URL = process.env.API_URL || 'http://localhost:8080';
+const INTERNAL_API_KEY = process.env.INTERNAL_API_KEY || '';
+
+async function main() {
+  const { values } = parseArgs({
+    options: {
+      userId: { type: 'string' },
+      fileId: { type: 'string' },
+      content: { type: 'string' },
+      file: { type: 'string' },
+      mimeType: { type: 'string' },
+    },
+  });
+
+  const { userId, fileId, content, file, mimeType } = values;
+
+  if (!userId || !fileId) {
+    console.error(JSON.stringify({
+      error: 'userId and fileId are required',
+      usage: 'node gdrive-update.mjs --userId "user123" --fileId "abc123" --content "content"',
+    }));
+    process.exit(1);
+  }
+
+  // 決定內容來源
+  let fileContent = content;
+  if (file) {
+    try {
+      fileContent = readFileSync(file, 'utf-8');
+    } catch (error) {
+      console.error(JSON.stringify({
+        error: `無法讀取檔案: ${file}`,
+        details: error.message,
+      }));
+      process.exit(1);
+    }
+  }
+
+  if (fileContent === undefined) {
+    console.error(JSON.stringify({
+      error: '必須提供 --content 或 --file 參數',
+    }));
+    process.exit(1);
+  }
+
+  try {
+    const response = await fetch(`${API_URL}/api/gdrive/files/${fileId}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-User-Id': userId,
+        'X-Internal-Key': INTERNAL_API_KEY,
+      },
+      body: JSON.stringify({
+        content: fileContent,
+        mimeType,
+      }),
+    });
+
+    const data = await response.json();
+
+    if (!data.success) {
+      throw new Error(data.error || data.message || 'Failed to update file');
+    }
+
+    console.log(JSON.stringify({
+      success: true,
+      file: data.file,
+      message: data.message || '檔案更新成功',
+    }, null, 2));
+
+  } catch (error) {
+    console.error(JSON.stringify({
+      success: false,
+      error: error.message,
+    }));
+    process.exit(1);
+  }
+}
+
+main();

package/botrun-c/.claude/skills/HTML/347/224/237/346/210/220/346/212/200/350/203/275/SKILL.md

@@ -0,0 +1,414 @@
+---
+name: HTML生成技能
+description: 生成多檔案 HTML/CSS/JS 專案。當使用者需要「建立網頁」、「生成 HTML」、「做一個網站」、「寫網頁」、「製作頁面」時使用。支援完整 JavaScript 執行。(v1.0.0)
+allowedTools:
+  - Bash
+  - Write
+---
+
+# HTML 生成技能
+
+你是一個 HTML/CSS/JS 專案生成專家。你可以建立完整的多檔案網頁專案，包含 HTML、CSS 和 JavaScript。
+
+## 執行環境
+
+腳本位於: `{SKILL_DIR}/scripts/`
+
+可用環境變數:
+- `USER_ID`: 當前使用者 ID（系統自動設定）
+- `DATA_ROOT`: 資料根目錄（預設為專案目錄下的 data/）
+- `API_BASE_URL`: API 基礎 URL
+
+## 工作流程
+
+### 步驟 1：建立專案
+
+```bash
+node {SKILL_DIR}/scripts/create-project.mjs --name "專案名稱" --description "專案描述"
+```
+
+輸出會包含：
+- `projectId`：專案唯一識別碼
+- `專案路徑`：用於寫入檔案的完整路徑
+
+**重要**：記住輸出的專案路徑，後續步驟需要用到。
+
+### 步驟 2：使用 Write 工具寫入檔案
+
+直接使用 Claude 內建的 **Write 工具** 將檔案寫入專案路徑。
+
+**範例**：假設專案路徑是 `/path/to/html-projects/a1b2c3d4e5f6/`
+
+```
+Write 工具：
+- file_path: /path/to/html-projects/a1b2c3d4e5f6/index.html
+- content: （完整的 HTML 內容）
+
+Write 工具：
+- file_path: /path/to/html-projects/a1b2c3d4e5f6/style.css
+- content: （完整的 CSS 內容）
+
+Write 工具：
+- file_path: /path/to/html-projects/a1b2c3d4e5f6/script.js
+- content: （完整的 JavaScript 內容）
+```
+
+**支援的檔案類型**：`.html`, `.htm`, `.css`, `.js`, `.mjs`, `.json`, `.txt`, `.svg`, `.png`, `.jpg`
+
+### 步驟 3：完成專案
+
+```bash
+node {SKILL_DIR}/scripts/finalize-project.mjs --project <projectId>
+```
+
+這個腳本會：
+1. 自動掃描專案目錄中的所有檔案
+2. 更新 manifest.json
+3. 輸出可點擊的預覽連結
+
+完成後會輸出預覽連結標記，格式為：
+```
+<!-- html-preview:projectId -->
+```
+
+前端會自動將此標記渲染為可點擊的連結按鈕。
+
+## 重要注意事項
+
+1. **必須使用 Write 工具**：直接用 Write 工具寫入檔案，不需要 base64 編碼
+2. **index.html 必須存在**：專案必須包含 index.html 作為入口
+3. **相對路徑引用**：CSS/JS 使用相對路徑引用（如 `href="style.css"`）
+4. **安全限制**：生成的頁面禁止對外 AJAX/fetch，禁止表單提交
+
+## CDN 載入最佳實踐（必讀）
+
+使用外部函式庫時，**必須注意載入順序和依賴關係**，否則會出現 `undefined` 錯誤。
+
+### 常見錯誤範例
+```
+Cannot read properties of undefined (reading 'ForwardRef')  // react-is 未載入（Recharts 3.x）
+Cannot read properties of undefined (reading 'oneOfType')   // prop-types 未載入
+Recharts is not defined                                     // 依賴未按順序載入
+```
+
+### 正確的 Recharts 載入順序（推薦 cdnjs）
+
+> ⚠️ **Recharts 3.x 需要完整的 React 生態依賴**，載入順序非常重要！
+
+```html
+<!-- 1. React 核心（必須最先） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
+
+<!-- 2. react-is（Recharts 3.x 必要，提供 ForwardRef 等類型檢測） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/18.3.1/umd/react-is.production.min.js"></script>
+
+<!-- 3. PropTypes（Recharts 依賴） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>
+
+<!-- 4. Recharts（最後載入） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/recharts/3.2.1/Recharts.min.js"></script>
+```
+
+### Recharts 2.x 穩定版（較少依賴問題）
+```html
+<!-- 1. React 核心 -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
+
+<!-- 2. PropTypes -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>
+
+<!-- 3. Recharts 2.x（穩定版） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/recharts/2.15.0/Recharts.min.js"></script>
+```
+
+### 備用方案（unpkg）
+```html
+<!-- 1. React 核心（必須最先） -->
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+
+<!-- 2. PropTypes（Recharts 依賴） -->
+<script src="https://unpkg.com/prop-types@15/prop-types.min.js"></script>
+
+<!-- 3. Recharts（最後載入） -->
+<script src="https://unpkg.com/recharts@2/umd/Recharts.min.js"></script>
+```
+
+### 常見圖表庫 CDN 範本
+
+> 💡 **優先使用 cdnjs**：穩定、快速、版本鎖定明確
+
+#### Chart.js（最簡單，無需 React）
+```html
+<!-- cdnjs（推薦） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.7/chart.umd.min.js"></script>
+
+<!-- 備用：jsdelivr -->
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+```
+
+#### D3.js
+```html
+<!-- cdnjs（推薦） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+
+<!-- 備用：官方 -->
+<script src="https://d3js.org/d3.v7.min.js"></script>
+```
+
+#### ECharts（推薦，無依賴問題）
+```html
+<!-- cdnjs（推薦） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.1/echarts.min.js"></script>
+
+<!-- 備用：jsdelivr -->
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
+```
+
+#### Plotly（完整功能，無依賴問題）
+```html
+<!-- cdnjs（推薦） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.35.3/plotly.min.js"></script>
+
+<!-- 備用：官方 -->
+<script src="https://cdn.plot.ly/plotly-2.35.3.min.js"></script>
+```
+
+#### Highcharts
+```html
+<!-- cdnjs（推薦） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.4.8/highcharts.min.js"></script>
+```
+
+#### ApexCharts
+```html
+<!-- cdnjs（推薦） -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/4.3.0/apexcharts.min.js"></script>
+```
+
+### 圖表庫選擇建議
+
+| 場景 | 推薦庫 | 理由 |
+|------|--------|------|
+| 簡單圖表 | Chart.js | 輕量、無依賴 |
+| 複雜互動 | ECharts | 功能強大、文檔完整 |
+| 科學繪圖 | Plotly | 3D、統計圖支援 |
+| React 專案 | Recharts | 但需正確載入依賴 |
+| 資料視覺化 | D3.js | 最靈活但學習曲線陡 |
+
+### 驗證 CDN 是否載入成功
+
+在使用前加入檢查：
+```html
+<script>
+  // 檢查 Recharts 是否載入
+  if (typeof Recharts === 'undefined') {
+    console.error('Recharts 未載入成功，請檢查 CDN 連結和載入順序');
+  }
+
+  // 檢查 React 是否載入
+  if (typeof React === 'undefined') {
+    console.error('React 未載入成功');
+  }
+</script>
+```
+
+## 範例：完整計算機專案
+
+```bash
+# 1. 建立專案
+node {SKILL_DIR}/scripts/create-project.mjs --name "四則運算計算機" --description "簡單的計算機網頁應用"
+# 假設得到 projectId: a1b2c3d4e5f6
+# 假設專案路徑: /data/user/projects/default/html-projects/a1b2c3d4e5f6/
+```
+
+```
+# 2. 使用 Write 工具寫入 index.html
+Write 工具：
+- file_path: /data/user/projects/default/html-projects/a1b2c3d4e5f6/index.html
+- content:
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>計算機</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="calculator">
+    <input type="text" id="display" readonly>
+    <div class="buttons">
+      <button onclick="clearDisplay()">C</button>
+      <button onclick="appendToDisplay('/')">/</button>
+      <button onclick="appendToDisplay('*')">*</button>
+      <button onclick="deleteLast()">←</button>
+      <button onclick="appendToDisplay('7')">7</button>
+      <button onclick="appendToDisplay('8')">8</button>
+      <button onclick="appendToDisplay('9')">9</button>
+      <button onclick="appendToDisplay('-')">-</button>
+      <button onclick="appendToDisplay('4')">4</button>
+      <button onclick="appendToDisplay('5')">5</button>
+      <button onclick="appendToDisplay('6')">6</button>
+      <button onclick="appendToDisplay('+')">+</button>
+      <button onclick="appendToDisplay('1')">1</button>
+      <button onclick="appendToDisplay('2')">2</button>
+      <button onclick="appendToDisplay('3')">3</button>
+      <button onclick="calculate()" class="equals">=</button>
+      <button onclick="appendToDisplay('0')" class="zero">0</button>
+      <button onclick="appendToDisplay('.')">.</button>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
+```
+
+```
+# 3. 使用 Write 工具寫入 style.css
+Write 工具：
+- file_path: /data/user/projects/default/html-projects/a1b2c3d4e5f6/style.css
+- content:
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.calculator {
+  background: #1a1a2e;
+  border-radius: 20px;
+  padding: 20px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+}
+
+#display {
+  width: 100%;
+  height: 60px;
+  background: #16213e;
+  border: none;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 24px;
+  text-align: right;
+  padding: 0 15px;
+  margin-bottom: 15px;
+}
+
+.buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 60px);
+  gap: 10px;
+}
+
+button {
+  width: 60px;
+  height: 60px;
+  border: none;
+  border-radius: 10px;
+  font-size: 20px;
+  cursor: pointer;
+  background: #0f3460;
+  color: #fff;
+  transition: all 0.2s;
+}
+
+button:hover {
+  background: #e94560;
+  transform: scale(1.05);
+}
+
+.equals {
+  grid-row: span 2;
+  height: 130px;
+  background: #e94560;
+}
+
+.zero {
+  grid-column: span 2;
+  width: 130px;
+}
+```
+
+```
+# 4. 使用 Write 工具寫入 script.js
+Write 工具：
+- file_path: /data/user/projects/default/html-projects/a1b2c3d4e5f6/script.js
+- content:
+function appendToDisplay(value) {
+  document.getElementById('display').value += value;
+}
+
+function clearDisplay() {
+  document.getElementById('display').value = '';
+}
+
+function deleteLast() {
+  const display = document.getElementById('display');
+  display.value = display.value.slice(0, -1);
+}
+
+function calculate() {
+  const display = document.getElementById('display');
+  try {
+    display.value = eval(display.value);
+  } catch (error) {
+    display.value = 'Error';
+    setTimeout(clearDisplay, 1000);
+  }
+}
+```
+
+```bash
+# 5. 完成專案
+node {SKILL_DIR}/scripts/finalize-project.mjs --project a1b2c3d4e5f6
+```
+
+## 輸出格式
+
+完成後請告知使用者：
+
+1. 專案已建立成功
+2. 包含的檔案列表
+3. 提供預覽連結（前端會自動渲染為可點擊按鈕）
+4. **重要**：提供完整的下載/預覽 URL 供使用者點選
+
+### URL 網域規則（必須遵守）
+
+- ✅ 正確網域：`https://app.botrun.ai`
+- ❌ **禁止使用**：`https://claude.ai`（這是錯誤的網域）
+
+完整 URL 格式：
+```
+https://app.botrun.ai/api/html-preview/{hashedUserId}/{projectId}/
+```
+
+其中 `hashedUserId` 和 `projectId` 從 finalize-project.mjs 的輸出中取得。
+
+範例回應：
+```
+✅ 已建立「四則運算計算機」專案！
+
+包含檔案：
+- index.html（主頁面）
+- style.css（樣式）
+- script.js（邏輯）
+
+<!-- html-preview:a1b2c3d4/a1b2c3d4e5f6 -->
+
+🔗 預覽/下載連結：
+https://app.botrun.ai/api/html-preview/a1b2c3d4/a1b2c3d4e5f6/
+
+點擊上方連結可在新分頁預覽網頁。
+```

package/botrun-c/.claude/skills/HTML/347/224/237/346/210/220/346/212/200/350/203/275/scripts/create-project.mjs

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+/**
+ * create-project.mjs - 建立 HTML 專案
+ *
+ * 用法：node create-project.mjs --name "專案名稱" [--description "描述"]
+ *
+ * 輸出：projectId（可用於後續的 write-file 和 finalize-project）
+ */
+import { mkdirSync, writeFileSync, existsSync } from 'fs';
+import { join } from 'path';
+import { randomBytes } from 'crypto';
+import { parseArgs } from 'util';
+
+// 解析命令列參數
+const { values } = parseArgs({
+  options: {
+    name: { type: 'string', short: 'n' },
+    description: { type: 'string', short: 'd' },
+  },
+  strict: true,
+});
+
+const projectName = values.name;
+const projectDescription = values.description || '';
+
+if (!projectName) {
+  console.error('錯誤：必須提供 --name 參數');
+  console.error('用法：node create-project.mjs --name "專案名稱" [--description "描述"]');
+  process.exit(1);
+}
+
+// 取得使用者工作目錄
+// DATA_ROOT = /mnt/data（資料根目錄）
+// USER_ID = 使用者 ID
+// 完整路徑 = /mnt/data/{userId}/projects/default/html-projects
+const dataRoot = process.env.DATA_ROOT || join(process.cwd(), 'data');
+const userId = process.env.USER_ID;
+
+if (!userId) {
+  console.error('錯誤：缺少 USER_ID 環境變數');
+  process.exit(1);
+}
+
+// 生成專案 Token：純隨機 12 字元（安全設計，不暴露任何資訊）
+// 使用 crypto.randomBytes 產生高熵亂數
+const now = new Date();
+const projectId = randomBytes(6).toString('hex'); // 12 字元 hex = 48 bits 熵
+
+// 專案路徑：/mnt/data/{userId}/projects/default/html-projects/{projectId}
+const projectsRoot = join(dataRoot, userId, 'projects', 'default', 'html-projects');
+const projectPath = join(projectsRoot, projectId);
+
+// 建立目錄
+if (!existsSync(projectsRoot)) {
+  mkdirSync(projectsRoot, { recursive: true });
+}
+mkdirSync(projectPath, { recursive: true });
+
+// 建立 manifest.json
+const manifest = {
+  name: projectName,
+  description: projectDescription,
+  createdAt: now.toISOString(),
+  files: [],
+  entry: 'index.html',
+  status: 'creating',
+};
+
+writeFileSync(join(projectPath, 'manifest.json'), JSON.stringify(manifest, null, 2), 'utf-8');
+
+// 輸出專案資訊（供 Claude 使用 Write 工具寫入檔案）
+console.log('');
+console.log('═══════════════════════════════════════════════════════');
+console.log(`✅ 專案建立成功`);
+console.log('═══════════════════════════════════════════════════════');
+console.log('');
+console.log(`📦 專案 ID: ${projectId}`);
+console.log(`📝 專案名稱: ${projectName}`);
+console.log('');
+console.log('📁 專案路徑（請用 Write 工具寫入檔案到此目錄）:');
+console.log(`   ${projectPath}/`);
+console.log('');
+console.log('📋 支援的檔案類型: .html, .htm, .css, .js, .mjs, .json, .txt, .svg');
+console.log('');
+console.log('下一步：');
+console.log(`1. 使用 Write 工具寫入 ${projectPath}/index.html`);
+console.log(`2. 使用 Write 工具寫入 ${projectPath}/style.css（可選）`);
+console.log(`3. 使用 Write 工具寫入 ${projectPath}/script.js（可選）`);
+console.log(`4. 執行 finalize-project.mjs --project ${projectId} 完成專案`);
+console.log('');
+console.log('═══════════════════════════════════════════════════════');