claude-code-web/server.mjs at main · sunthinks/claude-code-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
/**
 * Claude Code Web — Backend Server
 * 后端服务：通过 Express 提供 REST API，调用 Claude Code CLI 实现 Web 聊天
 *
 * Architecture / 架构:
 *   Browser ──SSE──▶ Express ──spawn──▶ claude -p --output-format stream-json
 *
 * Key features / 核心功能:
 *   - SSE streaming with de-duplication / SSE 流式输出（带去重）
 *   - Multi-turn conversation via --resume / 通过 --resume 实现连续对话
 *   - File upload/download / 文件上传下载
 *   - Optional token auth / 可选的 Token 认证
 */

import express from "express";
import multer from "multer";
import { spawn, execSync } from "child_process";
import { fileURLToPath } from "url";
import { dirname, join, basename, extname } from "path";
import { readFileSync, existsSync, mkdirSync, readdirSync, statSync, unlinkSync } from "fs";
import crypto from "crypto";

const __dirname = dirname(fileURLToPath(import.meta.url));
const app = express();
app.use(express.json({ limit: "1mb" }));

// ═══════════════════════════════════════════════════════
// Configuration / 配置
// ═══════════════════════════════════════════════════════
const PORT  = parseInt(process.env.PORT || "8080", 10);
const HOST  = process.env.HOST || "0.0.0.0";    // 0.0.0.0 = listen on all interfaces for LAN access / 监听所有网卡以支持局域网访问
const TOKEN = process.env.AUTH_TOKEN || "";       // Empty = no auth / 留空则不启用认证

// ═══════════════════════════════════════════════════════
// File upload/download directories / 文件上传下载目录
// ═══════════════════════════════════════════════════════
const UPLOAD_DIR = join(__dirname, "uploads");     // User-uploaded files / 用户上传的文件
const DOWNLOAD_DIR = join(__dirname, "downloads"); // Files generated by Claude / Claude 生成的文件
mkdirSync(UPLOAD_DIR, { recursive: true });
mkdirSync(DOWNLOAD_DIR, { recursive: true });

// Multer config: disk storage with unique filenames
// Multer 配置：磁盘存储，文件名加随机前缀防重复
const upload = multer({
  storage: multer.diskStorage({
    destination: (req, file, cb) => cb(null, UPLOAD_DIR),
    filename: (req, file, cb) => {
      const id = crypto.randomBytes(4).toString("hex");
      const ext = extname(file.originalname);
      // Keep original name readable, sanitize special chars / 保留可读文件名，过滤特殊字符
      const safe = basename(file.originalname, ext).replace(/[^a-zA-Z0-9_\u4e00-\u9fff-]/g, "_");
      cb(null, `${id}_${safe}${ext}`);
    },
  }),
  limits: { fileSize: 50 * 1024 * 1024 }, // 50MB per file / 单文件最大 50MB
});

// ═══════════════════════════════════════════════════════
// Locate Claude CLI binary / 查找 Claude CLI 可执行文件
// ═══════════════════════════════════════════════════════
function findClaude() {
  try { return execSync("which claude 2>/dev/null", { encoding: "utf-8" }).trim(); } catch {}
  const home = process.env.HOME || "";
  for (const p of [join(home, ".npm-global/bin/claude"), "/usr/local/bin/claude"]) {
    if (existsSync(p)) return p;
  }
  return "claude";
}
const CLAUDE = process.env.CLAUDE_PATH || findClaude();
try {
  const v = execSync(`"${CLAUDE}" --version 2>&1`, { encoding: "utf-8" }).trim();
  console.log(`  Claude: ${CLAUDE} (${v})`);
} catch (e) {
  console.log(`  Claude: ${CLAUDE} (check failed)`);
}

// ═══════════════════════════════════════════════════════
// Auth middleware / 认证中间件
// Supports: ?token=xxx, X-Auth-Token header, Bearer token
// ═══════════════════════════════════════════════════════
function auth(req, res, next) {
  if (!TOKEN) return next(); // No token configured = skip auth / 未配置 token 则跳过认证
  const t = req.query.token || req.headers["x-auth-token"] || req.headers.authorization?.replace("Bearer ", "");
  if (t === TOKEN) return next();
  res.status(401).json({ error: "Unauthorized" });
}

// ═══════════════════════════════════════════════════════
// Serve frontend / 提供前端页面
// ═══════════════════════════════════════════════════════
app.get("/", (req, res) => {
  if (TOKEN && req.query.token !== TOKEN) {
    return res.status(401).send("<html><body style='background:#0f172a;color:#e2e8f0;font-family:sans-serif;display:flex;justify-content:center;align-items:center;height:100vh'><div style='text-align:center'><h2>Claude Web Chat</h2><p>请在 URL 后加 ?token=YOUR_TOKEN</p></div></body></html>");
  }
  res.type("html").send(readFileSync(join(__dirname, "index.html"), "utf-8"));
});

// ═══════════════════════════════════════════════════════
// Active Claude processes / 活跃的 Claude 进程
// Map<reqId, ChildProcess> — used for cancellation
// ═══════════════════════════════════════════════════════
const procs = new Map();

// ═══════════════════════════════════════════════════════
// POST /api/chat — Main chat endpoint
// 主聊天接口：接收消息，调用 Claude CLI，通过 SSE 流式返回
//
// Request body / 请求体:
//   { message: string, sessionId?: string, files?: [{id, path}] }
//
// SSE response events / SSE 响应事件:
//   { type: "meta",    reqId }         — request ID for cancellation / 请求 ID（用于取消）
//   { type: "text",    text }          — streamed text chunk / 流式文本片段
//   { type: "tool",    tool, input }   — tool invocation / 工具调用
//   { type: "session", sessionId }     — session ID (save for multi-turn!) / 会话 ID（务必保存！）
//   { type: "error",   error }         — error message / 错误信息
//   { type: "done" }                   — stream complete / 流结束
// ═══════════════════════════════════════════════════════
app.post("/api/chat", auth, (req, res) => {
  const { message, sessionId, files } = req.body;
  if (!message) return res.status(400).json({ error: "message required" });

  // Set SSE headers / 设置 SSE 响应头
  res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    Connection: "keep-alive",
    "X-Accel-Buffering": "no", // Disable nginx buffering / 禁用 nginx 缓冲
  });

  const id = Date.now().toString(36) + Math.random().toString(36).slice(2, 6);

  // Build message with file attachments / 构建消息（含附件路径）
  // If files are attached, prepend file paths so Claude can read them
  // 如果有附件，将文件路径拼接到消息前面，让 Claude 能读取
  let fullMessage = message;
  if (files && files.length > 0) {
    const filePaths = files.map(f => {
      const fp = f.path || join(UPLOAD_DIR, basename(f.id || f));
      return existsSync(fp) ? fp : null;
    }).filter(Boolean);
    if (filePaths.length > 0) {
      fullMessage = `[用户附带了以下文件，请读取并处理]\n${filePaths.map(p => `文件路径: ${p}`).join("\n")}\n\n${message}`;
    }
  }

  // Build CLI arguments / 构建 CLI 参数
  const args = [
    "-p",                              // Non-interactive (print) mode / 非交互模式
    "--output-format", "stream-json",  // Structured streaming output / 结构化流式输出
    "--verbose",                       // Show tool calls / 显示工具调用
    "--dangerously-skip-permissions",  // Skip permission prompts / 跳过权限提示（需先在终端接受声明）
    fullMessage,
  ];

  // Resume existing session for multi-turn conversation
  // 通过 --resume 续接会话，实现连续对话
  if (sessionId) {
    args.splice(1, 0, "--resume", sessionId);
  }

  console.log(`[${id}] ${sessionId ? "RESUME " + sessionId : "NEW"} | ${message.slice(0, 60)}`);

  const child = spawn(CLAUDE, args, {
    env: { ...process.env, TERM: "dumb", NO_COLOR: "1" },
    stdio: ["ignore", "pipe", "pipe"],
  });
  procs.set(id, child);

  // Send meta event with request ID (frontend uses this for cancellation)
  // 发送 meta 事件（前端用 reqId 来取消请求）
  sse(res, { type: "meta", reqId: id });

  let buf = "";
  let gotSession = false;
  let hasOutput = false;
  let finished = false;
  const ctx = { streamed: false };  // Per-request context for de-duplication / 每个请求独立的去重上下文

  // 5-minute timeout / 5 分钟超时保护
  const timer = setTimeout(() => {
    if (!finished && !child.killed) { child.kill("SIGTERM"); }
  }, 5 * 60 * 1000);

  function done() {
    finished = true;
    clearTimeout(timer);
    procs.delete(id);
  }

  // Parse stream-json output (one JSON object per line)
  // 解析 stream-json 输出（每行一个 JSON 对象）
  child.stdout.on("data", (chunk) => {
    buf += chunk.toString("utf-8");
    const lines = buf.split("\n");
    buf = lines.pop() || "";

    for (const line of lines) {
      if (!line.trim()) continue;
      try {
        const obj = JSON.parse(line);
        handleEvent(obj, res, id, ctx);
        if (obj.session_id && !gotSession) {
          gotSession = true;
          sse(res, { type: "session", sessionId: obj.session_id });
        }
        hasOutput = true;
      } catch {
        // Non-JSON line, treat as plain text / 非 JSON 行，作为纯文本输出
        if (line.trim()) {
          sse(res, { type: "text", text: line });
          hasOutput = true;
        }
      }
    }
  });

  // Log stderr (Claude CLI debug output) / 记录 stderr（CLI 调试输出）
  child.stderr.on("data", (chunk) => {
    process.stderr.write(`[${id}] ${chunk}`);
  });

  // Handle process exit / 处理进程退出
  child.on("close", (code, signal) => {
    done();
    // Process remaining buffer / 处理缓冲区中的残留数据
    if (buf.trim()) {
      try {
        const obj = JSON.parse(buf);
        handleEvent(obj, res, id, ctx);
        if (obj.session_id && !gotSession) {
          sse(res, { type: "session", sessionId: obj.session_id });
        }
      } catch {}
    }

    console.log(`[${id}] exit code=${code} signal=${signal} output=${hasOutput}`);
    if (!hasOutput && (code !== 0 || signal)) {
      sse(res, { type: "error", error: `Claude 退出 (code=${code}, signal=${signal})` });
    }
    sse(res, { type: "done" });
    try { res.end(); } catch {}
  });

  child.on("error", (err) => {
    done();
    sse(res, { type: "error", error: err.message });
    sse(res, { type: "done" });
    try { res.end(); } catch {}
  });

  // Kill process when browser disconnects (not when request body completes!)
  // 浏览器断开连接时终止进程（注意：是 res.on('close')，不是 req.on('close')！）
  res.on("close", () => {
    if (!finished && !child.killed) {
      console.log(`[${id}] client disconnected`);
      child.kill("SIGTERM");
      done();
    }
  });
});

// ═══════════════════════════════════════════════════════
// Parse stream-json events / 解析 stream-json 事件
//
// De-duplication logic / 去重逻辑:
//   stream-json sends text 3 times: text_delta → assistant → result
//   We prefer text_delta (real-time). Once received, suppress assistant/result text.
//   stream-json 会把文本发送 3 次：text_delta → assistant → result
//   我们优先使用 text_delta（实时），收到后抑制 assistant/result 中的重复文本。
// ═══════════════════════════════════════════════════════
function handleEvent(obj, res, id, ctx) {
  // stream_event with text_delta → real-time streamed text (highest priority)
  // text_delta 事件 → 实时流式文本（最高优先级）
  if (obj.type === "stream_event") {
    const delta = obj.event?.delta;
    if (delta?.type === "text_delta" && delta.text) {
      ctx.streamed = true; // Mark: we got streaming text / 标记已收到流式文本
      sse(res, { type: "text", text: delta.text });
      return;
    }
    // content_block_start for tool_use / 工具调用开始
    const content = obj.event?.content_block;
    if (content?.type === "tool_use") {
      sse(res, { type: "tool", tool: content.name, input: "" });
      return;
    }
  }

  // assistant message — fallback only when no text_delta was received
  // assistant 消息 — 仅在没收到 text_delta 时作为备用
  if (obj.type === "assistant" && obj.message?.content && !ctx.streamed) {
    for (const block of obj.message.content) {
      if (block.type === "text") {
        sse(res, { type: "text", text: block.text });
      } else if (block.type === "tool_use") {
        sse(res, { type: "tool", tool: block.name, input: JSON.stringify(block.input || {}).slice(0, 200) });
      }
    }
  }

  // result message — only extract session_id, don't repeat text
  // result 消息 — 只提取 session_id，不再重复发文本（session_id 提取在调用方处理）
}

// SSE helper / SSE 发送工具
function sse(res, data) {
  try { res.write(`data: ${JSON.stringify(data)}\n\n`); } catch {}
}

// ═══════════════════════════════════════════════════════
// POST /api/cancel — Cancel an ongoing request
// 取消正在进行的请求
// ═══════════════════════════════════════════════════════
app.post("/api/cancel", auth, (req, res) => {
  const child = procs.get(req.body.reqId);
  if (child && !child.killed) {
    child.kill("SIGTERM");
    procs.delete(req.body.reqId);
    return res.json({ ok: true });
  }
  res.json({ ok: false });
});

// ═══════════════════════════════════════════════════════
// GET /api/health — Health check / 健康检查
// ═══════════════════════════════════════════════════════
app.get("/api/health", (req, res) => {
  res.json({ status: "ok", active: procs.size, claude: CLAUDE });
});

// ═══════════════════════════════════════════════════════
// GET /api/test — Quick smoke test / 快速冒烟测试
// Sends "say hi" to Claude and returns the response
// ═══════════════════════════════════════════════════════
app.get("/api/test", auth, (req, res) => {
  try {
    const out = execSync(`"${CLAUDE}" -p --output-format json "say hi"`, {
      encoding: "utf-8", timeout: 30000,
      env: { ...process.env, TERM: "dumb", NO_COLOR: "1" },
    });
    const j = JSON.parse(out);
    res.json({ ok: true, result: j.result, session_id: j.session_id });
  } catch (e) {
    res.json({ ok: false, error: e.message });
  }
});

// ═══════════════════════════════════════════════════════
// POST /api/upload — Upload files / 上传文件
// Accepts multipart/form-data with field "files" (max 10)
// Returns file metadata array / 返回文件元数据数组
// ═══════════════════════════════════════════════════════
app.post("/api/upload", auth, upload.array("files", 10), (req, res) => {
  if (!req.files || req.files.length === 0) {
    return res.status(400).json({ error: "No files" });
  }
  const results = req.files.map(f => ({
    id: f.filename,
    name: f.originalname,
    size: f.size,
    path: f.path,
    url: `/api/files/${f.filename}`,
  }));
  console.log(`[upload] ${results.map(r => r.name).join(", ")}`);
  res.json({ ok: true, files: results });
});

// ═══════════════════════════════════════════════════════
// GET /api/files/:name — Download/view a file / 下载或查看文件
// Checks uploads first, then downloads directory
// 先查 uploads 目录，再查 downloads 目录
// ═══════════════════════════════════════════════════════
app.get("/api/files/:name", auth, (req, res) => {
  const name = basename(req.params.name); // Prevent path traversal / 防止路径穿越
  let fp = join(UPLOAD_DIR, name);
  if (!existsSync(fp)) {
    fp = join(DOWNLOAD_DIR, name); // Check downloads (Claude-generated files) / 检查下载目录（Claude 生成的文件）
  }
  if (!existsSync(fp)) {
    return res.status(404).json({ error: "File not found" });
  }
  res.download(fp);
});

// ═══════════════════════════════════════════════════════
// GET /api/files — List all files / 列出所有文件
// Returns files from both uploads and downloads directories
// ═══════════════════════════════════════════════════════
app.get("/api/files", auth, (req, res) => {
  const list = [];
  for (const [dir, source] of [[UPLOAD_DIR, "upload"], [DOWNLOAD_DIR, "download"]]) {
    if (!existsSync(dir)) continue;
    for (const name of readdirSync(dir)) {
      try {
        const st = statSync(join(dir, name));
        list.push({
          name,
          source,
          size: st.size,
          mtime: st.mtime.toISOString(),
          url: `/api/files/${name}`,
        });
      } catch {}
    }
  }
  list.sort((a, b) => b.mtime.localeCompare(a.mtime)); // Newest first / 最新的排前面
  res.json({ files: list });
});

// ═══════════════════════════════════════════════════════
// DELETE /api/files/:name — Delete a file / 删除文件
// ═══════════════════════════════════════════════════════
app.delete("/api/files/:name", auth, (req, res) => {
  const name = basename(req.params.name);
  for (const dir of [UPLOAD_DIR, DOWNLOAD_DIR]) {
    const fp = join(dir, name);
    if (existsSync(fp)) {
      unlinkSync(fp);
      return res.json({ ok: true });
    }
  }
  res.status(404).json({ error: "File not found" });
});

// ═══════════════════════════════════════════════════════
// Start server / 启动服务
// ═══════════════════════════════════════════════════════
app.listen(PORT, HOST, () => {
  console.log(`\n  Claude Code Web`);
  console.log(`  ─────────────────────────────────`);
  console.log(`  Local:  http://127.0.0.1:${PORT}`);
  console.log(`  LAN:    http://0.0.0.0:${PORT}`);
  if (TOKEN) console.log(`  Auth:   ?token=${TOKEN}`);
  else console.log(`  Auth:   off`);
  console.log(`  ─────────────────────────────────\n`);
});