cc-prompter 0.2.0 → 0.3.1

package/README.md

@@ -1,8 +1,16 @@
 # CC Prompter
 
-**Shift+Alt 点击页面元素 → Claude Code 直接改代码 → 页面自动刷新**
+**哪里不对点哪里，So easy！**
+
+一个 Vite / Next.js 插件，将 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) 接入你的前端开发工作流。通过可视化元素定位 + 常驻 PTY 会话，实现「点击 → 描述 → 代码自动修改 → HMR 刷新」的闭环。
+
+> 🎯 **精确定位修改点** — 不再需要费劲描述「左上角那个蓝色按钮」或者截图了，直接点击页面元素，源码路径、行列号自动带上。
+>
+> 💰 **节省 tokens 神器** — 不需要让 Claude 反复探索项目结构、搜索文件、猜测位置，一个点击搞定所有上下文。
+>
+> ⚡ **所见即所得** — 改完自动 HMR 刷新，边看边改，开发体验拉满。
 
-一个 Vite 插件，将 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) 接入你的前端开发工作流。通过可视化元素定位 + 常驻 PTY 会话，实现「点击 → 描述 → 代码自动修改 → HMR 刷新」的闭环。
+**Shift+Alt 点击页面元素 → Claude Code 直接改代码 → 页面自动刷新**
 
 ![CC Prompter Demo](./demo.png)
 
@@ -44,7 +52,7 @@ npm install @homebridge/node-pty-prebuilt-multiarch --ignore-scripts
 
 > 前提：本地需要已安装 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code)（终端执行 `claude` 命令可用）。插件仅在 dev 模式生效，`npm run build` 不会注入任何代码。
 
-### 配置
+### 配置（Vite）
 
 在 `vite.config.ts` 中添加插件（一行配置即可）：
 
@@ -61,17 +69,50 @@ export default defineConfig({
 });
 ```
 
-> `ccPromptPlugin()` 内部自动完成三件事：
+### 配置（Next.js）
+
+在 `next.config.js` 中使用 `withCcPrompt` 包装：
+
+```javascript
+const { withCcPrompt } = require('cc-prompter/next');
+
+module.exports = withCcPrompt()({
+  // ... 正常 Next.js 配置
+});
+```
+
+> `withCcPrompt()` 内部自动完成三件事：
 > 1. 集成 `code-inspector-plugin`（编译时给 DOM 打上源码路径标签）
 > 2. 启动 Express sidecar 服务（管理 Claude PTY 会话）
-> 3. 注入交互脚本（监听 Shift+Alt 点击，弹出面板）
+> 3. 通过 webpack entry 注入交互脚本（监听 Shift+Alt 点击，弹出面板）
+>
+> 支持 Next.js Pages Router + App Router（webpack 模式）。Turbopack 暂不支持。
+
+### 配置（Webpack）
+
+在 `webpack.config.js` 中添加插件（适用于任意 webpack 项目）：
+
+```javascript
+const { CcPromptWebpackPlugin } = require('cc-prompter/webpack');
+
+module.exports = {
+  plugins: [
+    new CcPromptWebpackPlugin(),  // ← 仅 dev 模式生效
+    // ... 其他插件
+  ],
+};
+```
+
+> `CcPromptWebpackPlugin` 是一个标准 webpack Plugin，自动完成与 Next.js 版相同的三件事。
+> 默认在 `NODE_ENV !== 'production'` 时激活，也可手动传 `dev: true/false`。
 
 ### 一键安装（给 Claude Code 用）
 
 复制下面这行，粘贴给 Claude Code，它会自动帮你完成安装和配置：
 
 ```
-帮我安装 cc-prompter 并在 vite.config.ts 中添加 ccPromptPlugin() 插件配置，这是一个 Vite 插件，用于集成 Claude Code CLI 和 code-inspector 元素定位功能。安装方法：
+帮我安装 cc-prompter 并配置。这是一个 Vite/Next.js 插件，用于集成 Claude Code CLI 和 code-inspector 元素定位功能。
+安装方法：
 - macOS / Linux: 直接 npm install cc-prompter 即可
 - Windows: npm install cc-prompter 后，还需要安装 PTY 原生模块：
   1. cd node_modules/cc-prompter
@@ -80,9 +121,17 @@ export default defineConfig({
   4. 解压到 node_modules/@homebridge/node-pty-prebuilt-multiarch/build/Release/
 如果 GitHub 下载超时，使用 ghfast.top 镜像。
 
-配置方法：在 vite.config.ts 的 plugins 数组中添加 ccPromptPlugin()，示例：
+Vite 配置方法：在 vite.config.ts 的 plugins 数组中添加 ccPromptPlugin()，示例：
 import { ccPromptPlugin } from 'cc-prompter';
 plugins: [ccPromptPlugin(), react()]
+
+Next.js 配置方法：在 next.config.js 中使用 withCcPrompt 包装，示例：
+const { withCcPrompt } = require('cc-prompter/next');
+module.exports = withCcPrompt()({ /* next config */ });
+
+Webpack 配置方法：在 webpack.config.js 中添加 CcPromptWebpackPlugin，示例：
+const { CcPromptWebpackPlugin } = require('cc-prompter/webpack');
+plugins: [new CcPromptWebpackPlugin()]
 ```
 
 ## 怎么用
@@ -133,7 +182,7 @@ Claude 正在生成时，点击输入框旁边的 **Stop** 按钮，发送 Escap
 - ⚡ **流式渲染** — Markdown 实时渲染，工具调用按序展示，进度指示
 - ⏹ **随时中断** — Stop 按钮打断 Claude 生成，会话不销毁
 - 🖼 **灵活面板** — 浮动 iframe，拖拽移动、边缘缩放、快捷键召回
-- 🔌 **零配置** — 一行 `ccPromptPlugin()` 搞定所有集成
+- 🔌 **零配置** — 一行配置搞定所有集成（Vite / Next.js 均支持）
 - 🏭 **零侵入** — 仅 dev 模式生效，生产构建不注入任何代码
 
 ## 构建工具兼容性
@@ -142,10 +191,11 @@ Claude 正在生成时，点击输入框旁边的 **Stop** 按钮，发送 Escap
 
 | 构建工具 | CC Prompter 状态 | 说明 |
 |----------|-----------------|------|
-| **Vite** | ✅ 完整支持 | 默认配置 |
-| Webpack | 🔜 计划中 | code-inspector 已支持，需适配 sidecar 启动逻辑 |
+| **Vite** | ✅ 完整支持 | `ccPromptPlugin()` — 默认配置 |
+| **Webpack** | ✅ 完整支持 | `CcPromptWebpackPlugin` — 通用 webpack 插件 |
+| **Next.js (webpack)** | ✅ 完整支持 | `withCcPrompt()` — Pages + App Router |
+| Next.js (Turbopack) | 🔜 计划中 | code-inspector 已支持 |
 | esbuild | 🔜 计划中 | code-inspector 已支持 |
-| Turbopack | 🔜 计划中 | code-inspector 已支持 |
 | Mako | 🔜 计划中 | code-inspector 已支持 |
 
 > `code-inspector-plugin` 本身已支持上述五种构建工具。CC Prompter 的 sidecar 和脚本注入部分与构建工具无关，只需适配各工具的插件注册方式即可扩展。
@@ -166,18 +216,26 @@ interface CcPromptOptions {
 ### 示例
 
 ```typescript
-// 自定义端口
+// Vite — 自定义端口
 ccPromptPlugin({ port: 4000 })
 
-// 禁用内置 code-inspector（你自己配置）
+// Vite — 禁用内置 code-inspector（你自己配置）
 ccPromptPlugin({ inspector: false })
 ```
 
+```javascript
+// Next.js — 自定义端口
+module.exports = withCcPrompt({ port: 4000 })({ /* next config */ })
+
+// Next.js — 禁用 code-inspector
+module.exports = withCcPrompt({ inspector: false })({ /* next config */ })
+```
+
 ## 架构
 
 ```text
 ┌─────────────────────────────────────────────────┐
-│                  Vite Dev Server                 │
+│         Vite / Next.js Dev Server               │
 │                                                  │
 │  ┌──────────┐   ┌───────────┐   ┌────────────┐  │
 │  │  React    │   │  inject.js│   │  panel.html│  │
@@ -199,7 +257,8 @@ ccPromptPlugin({ inspector: false })
 
 | 组件 | 技术 | 说明 |
 |------|------|------|
-| vite-plugin | TypeScript | 组合 code-inspector + sidecar 启动 + 脚本注入 |
+| vite-plugin | TypeScript | Vite 集成：code-inspector + sidecar + 脚本注入 |
+| next-plugin | TypeScript | Next.js 集成：webpack entry + DefinePlugin 注入 |
 | sidecar | Express | 管理 PTY session 生命周期，REST API + SSE 流 |
 | pty-session | node-pty | 管理 Claude CLI 进程，PTY 输出 + JSONL 双通道解析 |
 | panel.html | 纯 HTML/CSS/JS | iframe 面板 UI，多 session tab，Markdown 渲染 |

package/dist/client-entry.js

@@ -0,0 +1,17 @@
+/**
+ * CC Prompter — Webpack Client Entry
+ *
+ * This file is prepended to Next.js webpack client entries.
+ * At build time, webpack DefinePlugin replaces:
+ *   __CC_PROMPTER_INJECT_SCRIPT__ → inject.js content (string)
+ *   __CC_PROMPTER_PORT__ → configured sidecar port (number)
+ */
+if (typeof window !== 'undefined') {
+  // Pass the start port so inject.js can probe the sidecar
+  window.__CC_PROMPTER_START_PORT__ = __CC_PROMPTER_PORT__;
+
+  // Inject the cc-prompter script into the page
+  var script = document.createElement('script');
+  script.textContent = __CC_PROMPTER_INJECT_SCRIPT__;
+  document.head.appendChild(script);
+}

package/dist/index.cjs

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,10 +30,48 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/assets.ts
+var assets_exports = {};
+__export(assets_exports, {
+  getInjectScript: () => getInjectScript,
+  getPanelHtml: () => getPanelHtml
+});
+function assetPath(filename) {
+  const here = (0, import_path.join)(_dirname, filename);
+  if ((0, import_fs.existsSync)(here)) return here;
+  const parent = (0, import_path.join)(_dirname, "..", filename);
+  if ((0, import_fs.existsSync)(parent)) return parent;
+  throw new Error(
+    `[cc-prompter] Asset not found: ${filename}
+  Tried: ${here}
+  Tried: ${parent}
+  __dirname: ${_dirname}`
+  );
+}
+function getPanelHtml() {
+  return (0, import_fs.readFileSync)(assetPath("panel.html"), "utf8");
+}
+function getInjectScript() {
+  return (0, import_fs.readFileSync)(assetPath("inject.js"), "utf8");
+}
+var import_fs, import_path, import_url2, import_meta2, _dirname;
+var init_assets = __esm({
+  "src/assets.ts"() {
+    "use strict";
+    import_fs = require("fs");
+    import_path = require("path");
+    import_url2 = require("url");
+    import_meta2 = {};
+    _dirname = typeof __dirname !== "undefined" ? __dirname : (0, import_path.dirname)((0, import_url2.fileURLToPath)(import_meta2.url));
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ccPromptPlugin: () => ccPromptPlugin
+  CcPromptWebpackPlugin: () => CcPromptWebpackPlugin,
+  ccPromptPlugin: () => ccPromptPlugin,
+  withCcPrompt: () => withCcPrompt
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -712,32 +753,8 @@ var PtySession = class extends import_events.EventEmitter {
   }
 };
 
-// src/assets.ts
-var import_fs = require("fs");
-var import_path = require("path");
-var import_url2 = require("url");
-var import_meta2 = {};
-var _dirname = typeof __dirname !== "undefined" ? __dirname : (0, import_path.dirname)((0, import_url2.fileURLToPath)(import_meta2.url));
-function assetPath(filename) {
-  const here = (0, import_path.join)(_dirname, filename);
-  if ((0, import_fs.existsSync)(here)) return here;
-  const parent = (0, import_path.join)(_dirname, "..", filename);
-  if ((0, import_fs.existsSync)(parent)) return parent;
-  throw new Error(
-    `[cc-prompter] Asset not found: ${filename}
-  Tried: ${here}
-  Tried: ${parent}
-  __dirname: ${_dirname}`
-  );
-}
-function getPanelHtml() {
-  return (0, import_fs.readFileSync)(assetPath("panel.html"), "utf8");
-}
-function getInjectScript() {
-  return (0, import_fs.readFileSync)(assetPath("inject.js"), "utf8");
-}
-
 // src/sidecar.ts
+init_assets();
 var SessionManager = class {
   sessions = /* @__PURE__ */ new Map();
   counter = 0;
@@ -946,10 +963,18 @@ function startSidecar(projectRoot, options) {
     res.json(session.getHistory());
   });
   const server = (0, import_http.createServer)(app);
+  let actualPort = startPort;
+  app.get("/__cc-port", (_req, res) => {
+    const addr = server.address();
+    const port = addr && typeof addr === "object" ? addr.port : actualPort;
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.end(String(port));
+  });
   const MAX_PORT = startPort + 10;
   function tryListen(port) {
     return new Promise((resolve2, reject) => {
       server.listen(port, () => {
+        actualPort = port;
         console.log(`[cc-prompter] Sidecar running on http://localhost:${port}`);
         resolve2(server);
       });
@@ -973,6 +998,7 @@ function startSidecar(projectRoot, options) {
 }
 
 // src/vite-plugin.ts
+init_assets();
 function ccPromptPlugin(options) {
   const enableInspector = options?.inspector !== false;
   let projectRoot = process.cwd();
@@ -1045,8 +1071,158 @@ function ccPromptPlugin(options) {
   if (inspectorPlugin) plugins.unshift(inspectorPlugin);
   return plugins;
 }
+
+// src/webpack-plugin.ts
+var import_path2 = require("path");
+var import_url3 = require("url");
+var import_code_inspector_plugin2 = require("code-inspector-plugin");
+init_assets();
+var import_meta3 = {};
+var _dirname2 = typeof __dirname !== "undefined" ? __dirname : (0, import_path2.dirname)((0, import_url3.fileURLToPath)(import_meta3.url));
+var CcPromptWebpackPlugin = class {
+  options;
+  sidecarServer = null;
+  sidecarStarted = false;
+  cleanedUp = false;
+  constructor(options) {
+    this.options = options || {};
+  }
+  apply(compiler) {
+    const isDev = this.options.dev !== void 0 ? this.options.dev : process.env.NODE_ENV !== "production";
+    if (!isDev) return;
+    const startPort = this.options.port || 3456;
+    const clientEntryPath = (0, import_path2.join)(_dirname2, "client-entry.js");
+    if (!this.sidecarStarted) {
+      this.sidecarStarted = true;
+      const projectRoot = this.options.root || process.cwd();
+      this.sidecarServer = startSidecar(projectRoot, { startPort });
+    }
+    compiler.hooks.thisCompilation.tap("CcPromptWebpackPlugin", () => {
+      if (!this.cleanedUp) {
+        this.setupCleanup();
+      }
+    });
+    if (this.options.inspector !== false) {
+      const inspectorPlugin = (0, import_code_inspector_plugin2.codeInspectorPlugin)({
+        bundler: "webpack",
+        behavior: {
+          locate: false,
+          copy: false
+        },
+        hideDomPathAttr: true,
+        hideConsole: true
+      });
+      if (inspectorPlugin && typeof inspectorPlugin.apply === "function") {
+        inspectorPlugin.apply(compiler);
+      } else if (Array.isArray(inspectorPlugin)) {
+        for (const p of inspectorPlugin) {
+          if (p && typeof p.apply === "function") p.apply(compiler);
+        }
+      }
+    }
+    const webpack = require("webpack");
+    const injectScript = getInjectScript();
+    new webpack.DefinePlugin({
+      "__CC_PROMPTER_INJECT_SCRIPT__": JSON.stringify(injectScript),
+      "__CC_PROMPTER_PORT__": JSON.stringify(startPort)
+    }).apply(compiler);
+    const originalEntry = compiler.options.entry;
+    compiler.options.entry = async () => {
+      const entries = typeof originalEntry === "function" ? await originalEntry() : originalEntry;
+      if (typeof entries === "string") {
+        return { main: [clientEntryPath, entries] };
+      }
+      if (Array.isArray(entries)) {
+        return { main: [clientEntryPath, ...entries] };
+      }
+      if (typeof entries === "object") {
+        for (const key in entries) {
+          if (Array.isArray(entries[key])) {
+            entries[key].unshift(clientEntryPath);
+          } else if (typeof entries[key] === "string") {
+            entries[key] = [clientEntryPath, entries[key]];
+          }
+        }
+      }
+      return entries;
+    };
+  }
+  setupCleanup() {
+    const cleanup = () => {
+      if (this.cleanedUp) return;
+      this.cleanedUp = true;
+      if (this.sidecarServer) {
+        this.sidecarServer.close();
+        this.sidecarServer = null;
+      }
+    };
+    process.on("SIGTERM", () => {
+      cleanup();
+      process.exit(0);
+    });
+    process.on("SIGINT", () => {
+      cleanup();
+      process.exit(0);
+    });
+    process.on("exit", cleanup);
+  }
+};
+
+// src/next-plugin.ts
+var import_meta4 = {};
+function withCcPrompt(options) {
+  return function(nextConfig = {}) {
+    return Object.assign({}, nextConfig, {
+      webpack(config, context) {
+        if (context.dev && !context.isServer) {
+          const plugin = new CcPromptWebpackPlugin({
+            ...options,
+            dev: true
+          });
+          plugin.apply(config._compiler || { options: config, hooks: {} });
+          const startPort = options?.port || 3456;
+          const webpack = require("webpack");
+          if (options?.inspector !== false) {
+            const { codeInspectorPlugin: codeInspectorPlugin3 } = require("code-inspector-plugin");
+            config.plugins = config.plugins || [];
+            config.plugins.push(codeInspectorPlugin3({
+              bundler: "webpack",
+              behavior: { locate: false, copy: false },
+              hideDomPathAttr: true,
+              hideConsole: true
+            }));
+          }
+          const { getInjectScript: getInjectScript2 } = (init_assets(), __toCommonJS(assets_exports));
+          config.plugins.push(new webpack.DefinePlugin({
+            "__CC_PROMPTER_INJECT_SCRIPT__": JSON.stringify(getInjectScript2()),
+            "__CC_PROMPTER_PORT__": JSON.stringify(startPort)
+          }));
+          const { join: join4, dirname: dirname4 } = require("path");
+          const _dirname3 = typeof __dirname !== "undefined" ? __dirname : dirname4(require("url").fileURLToPath(import_meta4.url));
+          const clientEntryPath = join4(_dirname3, "client-entry.js");
+          const originalEntry = config.entry;
+          config.entry = async () => {
+            const entries = typeof originalEntry === "function" ? await originalEntry() : originalEntry;
+            for (const key in entries) {
+              if (Array.isArray(entries[key])) {
+                entries[key].unshift(clientEntryPath);
+              }
+            }
+            return entries;
+          };
+        }
+        if (typeof nextConfig.webpack === "function") {
+          return nextConfig.webpack(config, context);
+        }
+        return config;
+      }
+    });
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ccPromptPlugin
+  CcPromptWebpackPlugin,
+  ccPromptPlugin,
+  withCcPrompt
 });
 //# sourceMappingURL=index.cjs.map