chatccc 0.2.234 → 0.2.235

package/src/claude-sdk-installer.ts

@@ -0,0 +1,324 @@
+// =============================================================================
+// claude-sdk-installer.ts — Claude Code 引擎（Agent SDK）按需安装器
+// =============================================================================
+// 背景：@anthropic-ai/claude-agent-sdk 通过 optionalDependencies 内置各平台
+// 的原生 CLI 二进制（Windows 上 claude.exe 约 215MB），若作为 chatccc 的硬依赖，
+// 所有用户（包括不用 Claude Code 的）都要白白下载 220MB+。
+//
+// 方案：把 SDK 从 chatccc 的 dependencies 中移除，改为**按需安装**到
+// `~/.chatccc/claude-sdk/`：
+//   - 用户未启用 Claude Code → 完全不下载，npm 包体积大幅下降；
+//   - 用户在设置页打开 Claude Code 开关时，点「安装引擎」触发后台安装，
+//     带进度条（状态式：检测环境 → 下载中 → 安装中 → 完成/失败）。
+//
+// 设计约束：
+//   - **不 import config.ts**（config.ts 顶层有 loadConfig 副作用，web-ui.ts
+//     依赖本模块，间接 import config.ts 会污染依赖 web-ui.ts 的单测）。
+//   - 始终使用 SDK 内置的 CLI 二进制（用户拍板档位 b），不依赖用户自装 CLI。
+//   - 安装目录可注入（dir 参数），便于单测用临时目录，不碰真实用户目录。
+// =============================================================================
+
+import { spawn } from "node:child_process";
+import {
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  statSync,
+  unlinkSync,
+  writeFileSync,
+  type Dirent,
+} from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+
+/** 与当前代码配套的 SDK 版本（package.json 移除依赖后此常量成为唯一版本来源） */
+export const CLAUDE_SDK_VERSION = "0.2.133";
+
+/** 按需安装目录：~/.chatccc/claude-sdk */
+export const CLAUDE_SDK_DIR = join(homedir(), ".chatccc", "claude-sdk");
+
+const SDK_PKG_REL = join("node_modules", "@anthropic-ai", "claude-agent-sdk", "package.json");
+const SDK_ENTRY_REL = join("node_modules", "@anthropic-ai", "claude-agent-sdk", "sdk.mjs");
+const LOCK_FILE = ".installing";
+
+/** 估算的完整安装体积（含内置 CLI 二进制），用于进度条展示 */
+export const CLAUDE_SDK_EXPECTED_BYTES = 240 * 1024 * 1024;
+
+export type SdkInstallPhase =
+  | "idle"
+  | "detecting"
+  | "downloading"
+  | "installing"
+  | "done"
+  | "error";
+
+export interface SdkInstallProgress {
+  phase: SdkInstallPhase;
+  /** 0-100 */
+  percent: number;
+  message: string;
+  error?: string;
+}
+
+export interface SdkInstallOptions {
+  /** 安装目录（测试注入临时目录） */
+  dir?: string;
+  /** npm 命令（测试注入 fake） */
+  npmCommand?: string;
+  /** 期望版本（默认 CLAUDE_SDK_VERSION） */
+  expectedVersion?: string;
+  /** 进度回调 */
+  onProgress?: (p: SdkInstallProgress) => void;
+}
+
+// ---------------------------------------------------------------------------
+// 状态查询
+// ---------------------------------------------------------------------------
+
+/** SDK 入口文件绝对路径（供动态 import） */
+export function getClaudeSdkEntryPath(dir: string = CLAUDE_SDK_DIR): string {
+  return join(dir, SDK_ENTRY_REL);
+}
+
+/** 是否已安装（node_modules 里存在 SDK package.json 即视为已装） */
+export function isClaudeSdkInstalled(dir: string = CLAUDE_SDK_DIR): boolean {
+  return existsSync(join(dir, SDK_PKG_REL));
+}
+
+/** 已安装版本号；未安装/解析失败返回 null */
+export function getClaudeSdkInstalledVersion(dir: string = CLAUDE_SDK_DIR): string | null {
+  try {
+    const raw = readFileSync(join(dir, SDK_PKG_REL), "utf8");
+    const pkg = JSON.parse(raw) as { version?: unknown };
+    return typeof pkg.version === "string" ? pkg.version : null;
+  } catch {
+    return null;
+  }
+}
+
+/** 是否正在安装（锁文件存在且 pid 存活）；pid 已死视为过期锁并自动清理 */
+export function isClaudeSdkInstalling(dir: string = CLAUDE_SDK_DIR): boolean {
+  const lockPath = join(dir, LOCK_FILE);
+  if (!existsSync(lockPath)) return false;
+  try {
+    const pid = Number.parseInt(readFileSync(lockPath, "utf8").trim(), 10);
+    if (Number.isFinite(pid) && pid > 0 && isPidAlive(pid)) return true;
+  } catch {
+    // 锁文件损坏 → 按过期处理，走清理
+  }
+  try {
+    unlinkSync(lockPath);
+  } catch {
+    // 清理失败不阻塞判断
+  }
+  return false;
+}
+
+function isPidAlive(pid: number): boolean {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (err) {
+    return (err as NodeJS.ErrnoException).code === "EPERM";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// 安装（后台任务 + 进度）
+// ---------------------------------------------------------------------------
+
+/** 最近一次安装的进度快照，供 web-ui 轮询 */
+let lastProgress: SdkInstallProgress = { phase: "idle", percent: 0, message: "" };
+let installInProgress = false;
+
+export function getLastInstallProgress(): SdkInstallProgress {
+  return { ...lastProgress, ...(lastProgress.error ? { error: lastProgress.error } : {}) };
+}
+
+export function isInstallRunning(): boolean {
+  return installInProgress;
+}
+
+function setProgress(p: SdkInstallProgress, onProgress?: (p: SdkInstallProgress) => void): void {
+  lastProgress = { ...p };
+  onProgress?.(lastProgress);
+}
+
+/**
+ * 启动按需安装。返回 Promise，安装完成 resolve、失败 reject。
+ * 调用方通常不 await（后台执行），通过 onProgress / getLastInstallProgress() 获取进度。
+ */
+export async function installClaudeSdk(options: SdkInstallOptions = {}): Promise<void> {
+  const dir = options.dir ?? CLAUDE_SDK_DIR;
+  const npmCommand = options.npmCommand ?? "npm";
+  const expected = options.expectedVersion ?? CLAUDE_SDK_VERSION;
+  const onProgress = options.onProgress;
+
+  if (installInProgress) {
+    throw new Error("Claude Code 引擎正在安装中，请等待完成后再试。");
+  }
+  if (isClaudeSdkInstalling(dir)) {
+    throw new Error("检测到另一个安装任务正在进行（锁文件存在），请稍后再试。");
+  }
+
+  const installedVersion = isClaudeSdkInstalled(dir) ? getClaudeSdkInstalledVersion(dir) : null;
+  if (installedVersion === expected) {
+    setProgress({ phase: "done", percent: 100, message: `已安装 v${installedVersion}` }, onProgress);
+    return;
+  }
+  if (installedVersion !== null && installedVersion !== expected) {
+    setProgress(
+      {
+        phase: "detecting",
+        percent: 3,
+        message: `已装 v${installedVersion} ≠ 期望 v${expected}，开始重装…`,
+      },
+      onProgress,
+    );
+  }
+
+  installInProgress = true;
+  mkdirSync(dir, { recursive: true });
+  writeFileSync(join(dir, LOCK_FILE), String(process.pid), "utf8");
+
+  setProgress({ phase: "detecting", percent: 2, message: "检测环境…" }, onProgress);
+
+  return new Promise<void>((resolve, reject) => {
+    const child = spawn(
+      npmCommand,
+      [
+        "install",
+        "--prefix",
+        dir,
+        `@anthropic-ai/claude-agent-sdk@${expected}`,
+        "--no-audit",
+        "--no-fund",
+        "--loglevel=http",
+      ],
+      {
+        stdio: ["ignore", "pipe", "pipe"],
+        windowsHide: true,
+        // Windows 下 npm 是 npm.cmd，需要 shell 才能解析
+        shell: process.platform === "win32",
+      },
+    );
+
+    let stderrBuf = "";
+    let requestCount = 0;
+    let sizeTimer: ReturnType<typeof setInterval> | null = null;
+
+    const updateBySize = (): void => {
+      const size = dirSizeBytes(dir);
+      const sizePercent = Math.min((size / CLAUDE_SDK_EXPECTED_BYTES) * 90, 90);
+      const requestPercent = Math.min(5 + requestCount * 4, 70);
+      const percent = Math.max(sizePercent, requestPercent);
+      const mb = (size / 1048576).toFixed(0);
+      setProgress(
+        {
+          phase: "downloading",
+          percent: Math.min(percent, 94),
+          message: `下载中… 已下载 ${mb} MB / 约 220 MB`,
+        },
+        onProgress,
+      );
+    };
+
+    child.stdout.on("data", (chunk: Buffer) => {
+      const text = chunk.toString();
+      // npm --loglevel=http 每完成一个请求输出一行 "npm http fetch GET 200 ..."
+      requestCount += (text.match(/http fetch GET|GET \d{3}/g) ?? []).length;
+      updateBySize();
+    });
+
+    child.stderr.on("data", (chunk: Buffer) => {
+      stderrBuf += chunk.toString();
+    });
+
+    child.on("error", (err) => {
+      cleanupAfterFailure(dir, err, onProgress, () => {
+        installInProgress = false;
+        reject(err);
+      });
+    });
+
+    child.on("close", (code) => {
+      if (sizeTimer) clearInterval(sizeTimer);
+      if (code === 0 && isClaudeSdkInstalled(dir)) {
+        const version = getClaudeSdkInstalledVersion(dir);
+        installInProgress = false;
+        try {
+          unlinkSync(join(dir, LOCK_FILE));
+        } catch {
+          // 锁文件不存在可忽略
+        }
+        setProgress(
+          { phase: "done", percent: 100, message: `安装完成（v${version ?? expected}）` },
+          onProgress,
+        );
+        resolve();
+      } else {
+        const tail = stderrBuf.trim().split("\n").slice(-5).join(" | ");
+        const detail = code !== 0 ? `npm 退出码 ${code}` : "安装后校验未通过";
+        const message = tail ? `${detail}：${tail.slice(0, 400)}` : detail;
+        cleanupAfterFailure(dir, new Error(message), onProgress, () => {
+          installInProgress = false;
+          reject(new Error(message));
+        });
+      }
+    });
+
+    // 定期按目录体积刷新进度（大文件下载时 stdout 事件稀疏）
+    sizeTimer = setInterval(() => {
+      if (installInProgress) updateBySize();
+    }, 400);
+    if (typeof sizeTimer.unref === "function") sizeTimer.unref();
+  });
+}
+
+function cleanupAfterFailure(
+  dir: string,
+  err: Error,
+  onProgress: ((p: SdkInstallProgress) => void) | undefined,
+  after: () => void,
+): void {
+  setProgress(
+    { phase: "error", percent: 0, message: "安装失败", error: err.message.slice(0, 500) },
+    onProgress,
+  );
+  try {
+    rmSync(dir, { recursive: true, force: true });
+  } catch {
+    // 清理失败不阻塞
+  }
+  after();
+}
+
+function dirSizeBytes(dir: string): number {
+  let total = 0;
+  const stack = [dir];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    let entries: Dirent[];
+    try {
+      entries = readdirSync(current, { withFileTypes: true });
+    } catch {
+      continue;
+    }
+    for (const entry of entries) {
+      const full = join(current, entry.name);
+      if (entry.isDirectory()) {
+        stack.push(full);
+      } else if (entry.isFile()) {
+        try {
+          total += statSync(full).size;
+        } catch {
+          // 文件被并发删除可忽略
+        }
+      }
+    }
+  }
+  return total;
+}

package/src/web-ui.ts

@@ -18,6 +18,13 @@ import {
   createInternalRestartEnv,
   openWebUiInDefaultBrowser,
 } from "./startup-lifecycle.ts";
+import {
+  getClaudeSdkInstalledVersion,
+  getLastInstallProgress,
+  installClaudeSdk,
+  isClaudeSdkInstalled,
+  isInstallRunning,
+} from "./claude-sdk-installer.ts";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PROJECT_ROOT = join(__dirname, "..");
@@ -629,6 +636,31 @@ async function handleForgetIlink(_req: IncomingMessage, res: ServerResponse): Pr
   }
 }
 
+async function handleClaudeSdkStatus(_req: IncomingMessage, res: ServerResponse): Promise<void> {
+  jsonReply(res, 200, {
+    installed: isClaudeSdkInstalled(),
+    version: getClaudeSdkInstalledVersion(),
+    running: isInstallRunning(),
+    progress: getLastInstallProgress(),
+  });
+}
+
+async function handleClaudeSdkInstall(_req: IncomingMessage, res: ServerResponse): Promise<void> {
+  if (isInstallRunning()) {
+    jsonReply(res, 200, { ok: true, alreadyRunning: true });
+    return;
+  }
+  try {
+    // 后台执行，不阻塞响应；前端通过 /api/claude-sdk/status 轮询进度
+    installClaudeSdk().catch((err: unknown) => {
+      console.error(`[WEB-UI] Claude SDK 安装失败: ${(err as Error).message}`);
+    });
+    jsonReply(res, 200, { ok: true });
+  } catch (err) {
+    jsonReply(res, 500, { ok: false, error: (err as Error).message });
+  }
+}
+
 // ---------------------------------------------------------------------------
 // HTML page (embedded template)
 // ---------------------------------------------------------------------------
@@ -854,6 +886,52 @@ header .badge{font-size:13px;padding:4px 12px;border-radius:12px;font-weight:500
 
       <div class="agent-cards">
 
+        <!-- CCC Agent 卡片（置顶：ChatCCC 内置 Agent，开箱即用） -->
+        <div class="agent-card" id="agent-card-ccc">
+          <div class="agent-card-header">
+            <input type="checkbox" class="agent-toggle" id="agent-enable-ccc" onchange="onAgentToggle('ccc', this.checked)">
+            <div class="meta">
+              <div class="name">CCC Agent</div>
+              <div class="desc">ChatCCC 内置 Agent<br>OpenAI 兼容 API（不限于 DeepSeek）</div>
+            </div>
+          </div>
+          <label class="agent-default-row">
+            <input type="checkbox" id="agent-default-ccc" onchange="onDefaultAgentToggle('ccc', this.checked)">
+            设为默认 Agent
+          </label>
+          <fieldset class="agent-body" id="agent-body-ccc" disabled>
+            <div class="form-group">
+              <label>API Key</label>
+              <input type="password" id="field-CHATCCC_CCC_API_KEY" placeholder="OpenAI 兼容 API Key（如 DeepSeek）">
+            </div>
+            <div class="form-group">
+              <label>Base URL</label>
+              <input type="text" id="field-CHATCCC_CCC_BASE_URL" placeholder="https://api.deepseek.com/v1（可填任意 OpenAI 兼容端点）">
+            </div>
+            <div class="form-group">
+              <label>模型</label>
+              <input type="text" id="field-CHATCCC_CCC_MODEL" placeholder="deepseek-v4-pro">
+            </div>
+            <div class="form-group">
+              <label>备选模型（选填）</label>
+              <input type="text" id="field-CHATCCC_CCC_ALTERNATIVE_MODEL" placeholder="加入 /model 列表，便于会话内切换">
+            </div>
+            <div class="form-group">
+              <label>Effort（推理强度，选填）</label>
+              <select id="field-CHATCCC_CCC_EFFORT">
+                <option value="">(留空/默认，服务端 medium)</option>
+                <option value="none">none - 直接作答，最省 token</option>
+                <option value="minimal">minimal</option>
+                <option value="low">low</option>
+                <option value="medium">medium</option>
+                <option value="high">high</option>
+                <option value="xhigh">xhigh</option>
+                <option value="max">max - 最强推理</option>
+              </select>
+            </div>
+          </fieldset>
+        </div>
+
         <!-- Claude 卡片 -->
         <div class="agent-card" id="agent-card-claude">
           <div class="agent-card-header">
@@ -888,6 +966,18 @@ header .badge{font-size:13px;padding:4px 12px;border-radius:12px;font-weight:500
               <label>Base URL（选填）</label>
               <input type="text" id="field-CHATCCC_ANTHROPIC_BASE_URL" placeholder="留空使用默认端点">
             </div>
+            <div class="form-group" style="border-top:1px solid #e2e8f0;padding-top:12px;margin-top:4px">
+              <label>Claude Code 引擎（Agent SDK）</label>
+              <div id="claude-engine-status" style="font-size:13px;color:#64748b;margin-bottom:8px">检测中...</div>
+              <div id="claude-engine-progress-wrap" style="display:none;margin-bottom:8px">
+                <div style="background:#e2e8f0;border-radius:6px;height:8px;overflow:hidden">
+                  <div id="claude-engine-progress-bar" style="width:0%;height:100%;background:#3b82f6;transition:width .3s"></div>
+                </div>
+                <div id="claude-engine-progress-text" style="font-size:12px;color:#64748b;margin-top:4px"></div>
+              </div>
+              <button class="btn btn-outline" id="claude-engine-install-btn" onclick="installClaudeEngine()">安装引擎（约 220MB）</button>
+              <div class="hint" style="margin-top:6px">ChatCCC 通过 Claude Agent SDK 调用 Claude Code；SDK 引擎按需下载到本机（仅启用 Claude Code 时需要），安装期间请保持网络畅通。</div>
+            </div>
           </fieldset>
         </div>
 
@@ -974,52 +1064,6 @@ header .badge{font-size:13px;padding:4px 12px;border-radius:12px;font-weight:500
           </fieldset>
         </div>
 
-        <!-- CCC Agent 卡片 -->
-        <div class="agent-card" id="agent-card-ccc">
-          <div class="agent-card-header">
-            <input type="checkbox" class="agent-toggle" id="agent-enable-ccc" onchange="onAgentToggle('ccc', this.checked)">
-            <div class="meta">
-              <div class="name">CCC Agent</div>
-              <div class="desc">ChatCCC 内置 Agent<br>使用 DeepSeek 兼容 API</div>
-            </div>
-          </div>
-          <label class="agent-default-row">
-            <input type="checkbox" id="agent-default-ccc" onchange="onDefaultAgentToggle('ccc', this.checked)">
-            设为默认 Agent
-          </label>
-          <fieldset class="agent-body" id="agent-body-ccc" disabled>
-            <div class="form-group">
-              <label>API Key</label>
-              <input type="password" id="field-CHATCCC_CCC_API_KEY" placeholder="DeepSeek 兼容 API Key">
-            </div>
-            <div class="form-group">
-              <label>Base URL</label>
-              <input type="text" id="field-CHATCCC_CCC_BASE_URL" placeholder="https://api.deepseek.com/v1">
-            </div>
-            <div class="form-group">
-              <label>模型</label>
-              <input type="text" id="field-CHATCCC_CCC_MODEL" placeholder="deepseek-v4-pro">
-            </div>
-            <div class="form-group">
-              <label>备选模型（选填）</label>
-              <input type="text" id="field-CHATCCC_CCC_ALTERNATIVE_MODEL" placeholder="加入 /model 列表，便于会话内切换">
-            </div>
-            <div class="form-group">
-              <label>Effort（推理强度，选填）</label>
-              <select id="field-CHATCCC_CCC_EFFORT">
-                <option value="">(留空/默认，服务端 medium)</option>
-                <option value="none">none - 直接作答，最省 token</option>
-                <option value="minimal">minimal</option>
-                <option value="low">low</option>
-                <option value="medium">medium</option>
-                <option value="high">high</option>
-                <option value="xhigh">xhigh</option>
-                <option value="max">max - 最强推理</option>
-              </select>
-            </div>
-          </fieldset>
-        </div>
-
       </div>
 
       <div class="btn-group" style="justify-content:space-between">
@@ -2182,8 +2226,87 @@ function validateCli(tool) {
   });
 }
 
+// ---- Claude Code 引擎（Agent SDK）按需安装 ----
+var claudeEnginePollTimer = null;
+
+function claudeEngineEl(id) { return document.getElementById(id); }
+
+function claudeEngineRenderStatus(s) {
+  var el = claudeEngineEl('claude-engine-status');
+  if (!el) return;
+  var phase = s.phase;
+  var text = s.message || '';
+  var color = '#64748b';
+  if (phase === 'done') color = '#16a34a';
+  else if (phase === 'error') color = '#ef4444';
+  else if (phase === 'downloading' || phase === 'installing') color = '#3b82f6';
+  el.innerHTML = '<span style="color:' + color + '">' + (text ? text : '未知状态') + '</span>';
+  if (s.error) el.innerHTML += '<br><span style="color:#ef4444;font-size:12px">' + s.error + '</span>';
+}
+
+function claudeEngineRenderProgress(p) {
+  var wrap = claudeEngineEl('claude-engine-progress-wrap');
+  if (!wrap) return;
+  if (p && (p.phase === 'downloading' || p.phase === 'installing' || p.phase === 'detecting')) {
+    wrap.style.display = 'block';
+    claudeEngineEl('claude-engine-progress-bar').style.width = (p.percent || 0) + '%';
+    claudeEngineEl('claude-engine-progress-text').textContent = p.message || '';
+  } else {
+    wrap.style.display = 'none';
+  }
+}
+
+function claudeEngineRefreshStatus() {
+  api('/api/claude-sdk/status', 'GET').then(function(s){
+    if (!s || !s.phase) return;
+    claudeEngineRenderStatus(s);
+    claudeEngineRenderProgress(s);
+    var btn = claudeEngineEl('claude-engine-install-btn');
+    if (btn) {
+      if (s.phase === 'done' || s.installed) {
+        btn.textContent = '重新安装引擎';
+        btn.disabled = false;
+      } else if (s.phase === 'downloading' || s.phase === 'installing' || s.phase === 'detecting') {
+        btn.textContent = '安装中…';
+        btn.disabled = true;
+      } else {
+        btn.textContent = '安装引擎（约 220MB）';
+        btn.disabled = false;
+      }
+    }
+    if (s.phase === 'downloading' || s.phase === 'installing' || s.phase === 'detecting') {
+      claudeEnginePollTimer = setTimeout(claudeEngineRefreshStatus, 600);
+    } else if (claudeEnginePollTimer) {
+      clearTimeout(claudeEnginePollTimer);
+      claudeEnginePollTimer = null;
+    }
+  }).catch(function(){
+    // 网络/服务异常时停止轮询，避免无限重试
+    if (claudeEnginePollTimer) { clearTimeout(claudeEnginePollTimer); claudeEnginePollTimer = null; }
+  });
+}
+
+function installClaudeEngine() {
+  var btn = claudeEngineEl('claude-engine-install-btn');
+  if (btn) btn.disabled = true;
+  api('/api/claude-sdk/install', 'POST').then(function(r){
+    if (r.ok) {
+      claudeEngineRefreshStatus();
+    } else {
+      claudeEngineRenderStatus({ phase: 'error', message: '启动安装失败', error: r.error || '' });
+      if (btn) btn.disabled = false;
+    }
+  }).catch(function(e){
+    claudeEngineRenderStatus({ phase: 'error', message: '请求失败', error: String(e) });
+    if (btn) btn.disabled = false;
+  });
+}
+
 // ---- Start ----
 init();
+
+// 进入 dashboard/向导后初始化 Claude 引擎状态（页面元素此时已存在）
+setTimeout(claudeEngineRefreshStatus, 300);
 </script>
 </body>
 </html>`;
@@ -2209,6 +2332,8 @@ async function handleRequest(req: IncomingMessage, res: ServerResponse): Promise
   if (url === "/api/restart" && method === "POST") return handleRestartService(req, res);
   if (url === "/api/validate" && method === "POST") return handleValidate(req, res);
   if (url === "/api/ilink/forget" && method === "POST") return handleForgetIlink(req, res);
+  if (url === "/api/claude-sdk/status" && method === "GET") return handleClaudeSdkStatus(req, res);
+  if (url === "/api/claude-sdk/install" && method === "POST") return handleClaudeSdkInstall(req, res);
 
   if (method === "GET" && (pathname === "/agent-team" || pathname === "/agent-team/")) {
     res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });