claude-dev-server 1.0.2

package/README.md

@@ -0,0 +1,185 @@
+# claude-dev-server
+
+> 通用开发服务器包装器 - 在浏览器中集成 Claude Code AI 助手终端，支持 Vite、Next.js、Webpack 等所有开发服务器
+
+[![npm](https://img.shields.io/npm/v/claude-dev-server)](https://www.npmjs.org/package/claude-dev-server)
+
+## 功能特性
+
+- **通用支持** - 适用于 Vite、Next.js、Webpack 或任何 dev server
+- **ttyd 终端** - 使用 ttyd 提供真正的 PTY 终端体验，完整支持 ANSI 转义序列、颜色、光标控制
+- **Claude Code 集成** - 通过 WebSocket 与后台 Claude Code 进程通信，实时 AI 辅助开发
+- **元素检查器** - 点击页面元素，自动定位到对应源代码位置，并发送到 Claude Code 终端
+- **智能提示格式** - 自动格式化选中元素为 `@filename:line <selector> "text content"` 格式
+- **无需安装** - 直接使用 `npx` 运行，自动检测项目类型
+- **快捷键支持** - `Cmd/Ctrl + \\`` 打开/关闭面板，`Escape` 退出检查模式
+- **悬浮按钮** - Claude Code 图标按钮打开面板，Inspect 按钮进入检查模式
+
+## 快速开始
+
+### 前置要求
+
+需要安装 `ttyd`：
+
+**macOS:**
+```bash
+brew install ttyd
+```
+
+**Linux:**
+```bash
+# Ubuntu/Debian
+sudo apt install ttyd
+
+# 或从源码编译
+# 见 https://tsl0922.github.io/ttyd/
+```
+
+### 使用方法
+
+在任意项目目录下运行：
+
+```bash
+# 默认端口 3000
+npx claude-dev-server
+
+# 指定端口
+npx claude-dev-server --port 4000
+
+# 指定 Claude 路径
+npx claude-dev-server --claude-path /path/to/claude
+```
+
+就这么简单！工具会：
+1. 自动检测项目类型（Vite/Next/Webpack/Custom）
+2. 启动对应的 dev server
+3. 自动检测端口号（从 stdout 解析）
+4. 启动 Claude Code 集成服务器
+5. 打开浏览器即可使用
+
+## CLI 选项
+
+| 选项 | 说明 | 默认值 |
+|------|------|--------|
+| `-p, --port <port>` | 代理服务器端口 | `3000` |
+| `--claude-path <path>` | Claude 可执行文件路径 | `claude` |
+| `-h, --help` | 显示帮助信息 | - |
+
+## 使用方法
+
+### 悬浮按钮
+
+页面右上角会显示两个悬浮按钮：
+
+| 按钮 | 功能 |
+|------|------|
+| **Claude Code 图标** | 打开/关闭 Claude Code 面板 |
+| **Inspect 图标** | 进入/退出元素检查模式 |
+
+### 键盘快捷键
+
+| 快捷键 | 说明 |
+|--------|--------|
+| `Cmd/Ctrl + \\`` | 打开/关闭 Claude Code 面板 |
+| `Escape` | 退出检查模式或关闭面板 |
+
+### 工作流程
+
+1. 按 `Cmd/Ctrl + \\`` 或点击 Claude Code 图标打开面板
+2. 在终端中直接与 Claude Code 交互
+3. 点击 **Inspect** 按钮进入检查模式
+4. 鼠标移动到页面元素上会高亮显示
+5. 点击元素后自动发送格式化提示到终端：
+   ```
+   @src/App.tsx:12 <button className="btn"> "Submit"
+   ```
+6. Claude Code 会根据代码位置上下文回答你的问题
+
+## 提示格式说明
+
+选中元素后，会自动生成以下格式的提示：
+
+```
+@<filename>:<line> <selector> "text content"
+```
+
+- `@filename:line` - 源文件路径和行号（支持 React DevTools、Vue 组件）
+- `<selector>` - CSS 选择器（标签名 + ID + 类名）
+- `"text content"` - 元素文本内容（如果存在）
+
+## 架构
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                  Claude Dev Server (主进程)                  │
+│                                                              │
+│  ┌──────────────────┐         ┌──────────────────┐         │
+│  │  HTTP Proxy      │         │  Control Server  │         │
+│  │  (Port :3000)    │         │  (WebSocket)     │         │
+│  │                  │         │                  │         │
+│  │  - 代理转发       │         │  - ttyd 管理      │         │
+│  │  - HTML 注入     │◄───────►│  - Claude 进程   │         │
+│  │  - 中间件        │         │                  │         │
+│  └────────┬─────────┘         └──────────────────┘         │
+│           │                                                    │
+│           ▼                                                    │
+│  ┌──────────────────┐                                        │
+│  │  Target Server   │                                        │
+│  │  (Auto detected) │                                        │
+│  │                  │                                        │
+│  │  Vite / Next     │                                        │
+│  │  Webpack / etc   │                                        │
+│  └──────────────────┘                                        │
+└─────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+                    ┌─────────────────┐
+                    │   Browser       │
+                    │                 │
+                    │  - App 页面     │
+                    │  - Claude 终端  │
+                    │  - Inspector    │
+                    └─────────────────┘
+```
+
+## 支持的项目类型
+
+| 类型 | 检测文件 | 默认命令 |
+|------|----------|----------|
+| Vite | `vite.config.ts/js` | `npm run dev` |
+| Next.js | `next.config.js/mjs` | `npm run dev` |
+| Webpack | `webpack.config.ts/js` | `npm run dev` |
+| Custom | - | `npm run dev` |
+
+## 常见问题
+
+### Q: 如何使用自己的 claude 命令？
+
+A: 使用 `--claude-path` 选项：
+
+```bash
+npx claude-dev-server --claude-path /path/to/your/claude
+```
+
+### Q: Inspect 模式下为什么有些元素无法选中？
+
+A: Dev Tools 自身的元素（悬浮按钮、面板等）已被排除，无法选中。
+
+### Q: 支持哪些框架的源码定位？
+
+A: 目前支持 React、Vue。使用项目根路径自动计算相对路径。
+
+### Q: 可以在其他端口使用吗？
+
+A: 可以，使用 `--port` 选项指定任意端口。
+
+## 技术栈
+
+- **HTTP Proxy** - 请求转发和 HTML 注入
+- **ttyd** - 终端 over HTTP/WebSocket
+- **xterm.js** - Web 终端组件（VS Code 同款）
+- **WebSocket (ws)** - 客户端-服务器通信
+
+## License
+
+MIT

package/dist/assets/ttyd-bridge.js

@@ -0,0 +1,61 @@
+// ttyd-bridge.js - 桥接脚本，用于将外部消息转发到 ttyd 终端
+// 这个文件会被注入到 ttyd-terminal.html 中
+
+(function() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const wsUrl = urlParams.get('ws');
+  if (!wsUrl) {
+    console.warn('[ttyd-bridge] No ws parameter found');
+    return;
+  }
+
+  const wsParsed = new URL(wsUrl);
+  const wsHost = wsParsed.host;
+  const wsProtocol = wsParsed.protocol === 'wss:' ? 'https:' : 'http:';
+
+  console.log('[ttyd-bridge] Initializing with wsUrl:', wsUrl);
+
+  // 拦截 fetch - 重定向 /token 请求
+  const originalFetch = window.fetch;
+  window.fetch = function(url, options) {
+    if (url && typeof url === 'string' && url.includes('/token')) {
+      url = wsProtocol + '//' + wsHost + '/token';
+    }
+    return originalFetch.call(this, url, options);
+  };
+
+  // 拦截 WebSocket - 重定向 /ws 连接
+  const OriginalWebSocket = window.WebSocket;
+  window.WebSocket = function(url, protocols) {
+    let finalUrl = url;
+    if (url && typeof url === 'string' && url.includes('/ws')) {
+      finalUrl = wsUrl.endsWith('/ws') ? wsUrl : (wsUrl + '/ws');
+    }
+    return new OriginalWebSocket(finalUrl, protocols);
+  };
+  Object.setPrototypeOf(window.WebSocket, OriginalWebSocket);
+  window.WebSocket.prototype = OriginalWebSocket.prototype;
+
+  // 暴露发送函数到 window - 使用 sendData 方法
+  window.sendToTerminal = function(text) {
+    console.log('[ttyd-bridge] Sending to terminal:', text);
+
+    // 等待 xterm 实例初始化
+    if (!window.xterm) {
+      console.warn('[ttyd-bridge] xterm not ready yet');
+      return false;
+    }
+
+    // 使用 sendData 方法模拟用户输入
+    try {
+      window.xterm.sendData(text);
+      console.log('[ttyd-bridge] Sent via xterm.sendData()');
+      return true;
+    } catch (e) {
+      console.error('[ttyd-bridge] sendData failed:', e);
+      return false;
+    }
+  };
+
+  console.log('[ttyd-bridge] Loaded successfully');
+})();