@react-grab/claude-code 0.0.59 → 0.0.61

package/README.md

@@ -18,46 +18,61 @@ yarn add @react-grab/claude-code
 
 The server runs on port `4567` by default.
 
+### Quick Start (CLI)
+
+Start the server in the background before running your dev server:
+
+```bash
+npx @react-grab/claude-code && pnpm run dev
+```
+
+The server will run as a detached background process. **Note:** Stopping your dev server (Ctrl+C) won't stop the React Grab server. To stop it:
+
+```bash
+pkill -f "react-grab.*server"
+```
+
+### Recommended: Config File (Automatic Lifecycle)
+
+For better lifecycle management, start the server from your config file. This ensures the server stops when your dev server stops:
+
 ### Vite
 
 ```ts
 // vite.config.ts
-import "@react-grab/claude-code/server";
+import { startServer } from "@react-grab/claude-code/server";
+
+if (process.env.NODE_ENV === "development") {
+  startServer();
+}
 ```
 
 ### Next.js
 
 ```ts
 // next.config.ts
-import "@react-grab/claude-code/server";
+import { startServer } from "@react-grab/claude-code/server";
+
+if (process.env.NODE_ENV === "development") {
+  startServer();
+}
 ```
 
 ## Client Usage
 
-```tsx
-import { init } from "react-grab/core";
-import { createClaudeAgentProvider } from "@react-grab/claude-code/client";
-
-const agentProvider = createClaudeAgentProvider();
+### Script Tag
 
-init({
-  agent: {
-    provider: agentProvider,
-  },
-});
+```html
+<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
+<script src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"></script>
 ```
 
-## Configuration
-
-You can customize the server URL and default options:
+### ES Module
 
 ```tsx
-const agentProvider = createClaudeAgentProvider({
-  getOptions: () => ({
-    model: "opus",
-    maxTurns: 20,
-  }),
-});
+import { attachAgent } from "@react-grab/claude-code/client";
+
+attachAgent();
 ```
 
 ## How It Works

package/dist/cli.cjs

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+'use strict';
+
+var child_process = require('child_process');
+var url = require('url');
+var path = require('path');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+var __filename$1 = url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('cli.cjs', document.baseURI).href)));
+var __dirname$1 = path.dirname(__filename$1);
+var serverPath = path.join(__dirname$1, "server.js");
+child_process.spawn(process.execPath, [serverPath], {
+  detached: true,
+  stdio: "ignore"
+}).unref();
+console.log("[React Grab] Server starting on port 4567...");

package/dist/cli.d.cts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname(__filename);
+var serverPath = join(__dirname, "server.js");
+spawn(process.execPath, [serverPath], {
+  detached: true,
+  stdio: "ignore"
+}).unref();
+console.log("[React Grab] Server starting on port 4567...");

package/dist/client.cjs

@@ -117,6 +117,7 @@ var attachAgent = async () => {
     { once: true }
   );
 };
+attachAgent();
 
 exports.attachAgent = attachAgent;
 exports.createClaudeAgentProvider = createClaudeAgentProvider;

package/dist/client.global.js

@@ -0,0 +1,6 @@
+var ReactGrabClaudeCode=(function(exports){'use strict';var g=`http://localhost:${4567}`,f="react-grab:agent-sessions",m={systemPrompt:{type:"preset",preset:"claude_code",append:`You are helping a user make changes to a React component based on a selected element.
+The user has selected an element from their UI and wants you to help modify it.
+Provide clear, concise status updates as you work.`},model:"haiku",permissionMode:"bypassPermissions",maxTurns:10},y=n=>{let t="",o="";for(let e of n.split(`
+`))e.startsWith("event:")?t=e.slice(6).trim():e.startsWith("data:")&&(o=e.slice(5).trim());return {eventType:t,data:o}};async function*A(n){let t=n.getReader(),o=new TextDecoder,e="";try{for(;;){let{done:r,value:i}=await t.read();i&&(e+=o.decode(i,{stream:!0}));let s;for(;(s=e.indexOf(`
+
+`))!==-1;){let{eventType:d,data:a}=y(e.slice(0,s));if(e=e.slice(s+2),d==="done")return;if(d==="error")throw new Error(a||"Agent error");a&&(yield a);}if(r)break}}finally{t.releaseLock();}}async function*l(n,t,o){let e=await fetch(`${n}/agent`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t),signal:o});if(!e.ok)throw new Error(`Server error: ${e.status}`);if(!e.body)throw new Error("No response body");yield*A(e.body);}var E=(n={})=>{let{serverUrl:t=g,getOptions:o}=n,e=r=>({...m,...o?.()??{},...r??{}});return {send:async function*(r,i){let s={...r,options:e(r.options)};yield*l(t,s,i);},resume:async function*(r,i){let s=sessionStorage.getItem(f);if(!s)throw new Error("No sessions to resume");let a=JSON.parse(s)[r];if(!a)throw new Error(`Session ${r} not found`);let c=a.context,p={...c,options:e(c.options)};yield "Resuming...",yield*l(t,p,i);},supportsResume:true}},C=async()=>{if(typeof window>"u")return;let n=E(),t=window.__REACT_GRAB__;if(t){t.setAgent({provider:n});return}window.addEventListener("react-grab:init",o=>{o.detail.setAgent({provider:n});},{once:true});};C();exports.attachAgent=C;exports.createClaudeAgentProvider=E;return exports;})({});

package/dist/client.js

@@ -115,5 +115,6 @@ var attachAgent = async () => {
     { once: true }
   );
 };
+attachAgent();
 
 export { attachAgent, createClaudeAgentProvider };

package/dist/server.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var child_process = require('child_process');
+var net = require('net');
 var http = require('http');
 var http2 = require('http2');
 var stream = require('stream');
@@ -8,6 +8,7 @@ var crypto = require('crypto');
 var path = require('path');
 var url = require('url');
 var events = require('events');
+var child_process = require('child_process');
 var readline = require('readline');
 var fs = require('fs');
 var promises = require('fs/promises');
@@ -35,6 +36,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var net__default = /*#__PURE__*/_interopDefault(net);
 var crypto__default = /*#__PURE__*/_interopDefault(crypto);
 var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
 
@@ -14646,28 +14648,26 @@ ${content}`;
   });
   return app;
 };
-var killProcessOnPort = (port) => {
-  try {
-    if (process.platform === "win32") {
-      child_process.execSync(
-        `for /f "tokens=5" %a in ('netstat -aon ^| findstr :${port} ^| findstr LISTENING') do taskkill /F /PID %a`,
-        { stdio: "ignore", timeout: 1e3, shell: "cmd.exe" }
-      );
-    } else {
-      child_process.execSync(`lsof -ti:${port} | xargs kill -9 2>/dev/null`, {
-        stdio: "ignore",
-        timeout: 1e3
-      });
-    }
-  } catch {
+var isPortInUse = (port) => new Promise((resolve) => {
+  const server = net__default.default.createServer();
+  server.once("error", () => resolve(true));
+  server.once("listening", () => {
+    server.close();
+    resolve(false);
+  });
+  server.listen(port);
+});
+var startServer = async (port = DEFAULT_PORT) => {
+  if (await isPortInUse(port)) {
+    return;
   }
-};
-var startServer = (port = DEFAULT_PORT) => {
-  killProcessOnPort(port);
   const app = createServer();
   serve({ fetch: app.fetch, port });
-  console.log("React Grab Claude Code server running on port", port);
+  console.log(`[React Grab] Server started on port ${port}`);
 };
+if ((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('server.cjs', document.baseURI).href)) === `file://${process.argv[1]}`) {
+  startServer(DEFAULT_PORT).catch(console.error);
+}
 
 exports.createServer = createServer;
 exports.startServer = startServer;

package/dist/server.d.cts

@@ -2,6 +2,6 @@ import * as hono_types from 'hono/types';
 import { Hono } from 'hono';
 
 declare const createServer: () => Hono<hono_types.BlankEnv, hono_types.BlankSchema, "/">;
-declare const startServer: (port?: number) => void;
+declare const startServer: (port?: number) => Promise<void>;
 
 export { createServer, startServer };

package/dist/server.d.ts

@@ -2,6 +2,6 @@ import * as hono_types from 'hono/types';
 import { Hono } from 'hono';
 
 declare const createServer: () => Hono<hono_types.BlankEnv, hono_types.BlankSchema, "/">;
-declare const startServer: (port?: number) => void;
+declare const startServer: (port?: number) => Promise<void>;
 
 export { createServer, startServer };

package/dist/server.js

@@ -1,4 +1,4 @@
-import { execSync, spawn } from 'child_process';
+import net from 'net';
 import { createServer as createServer$1 } from 'http';
 import { Http2ServerRequest } from 'http2';
 import { Readable } from 'stream';
@@ -6,6 +6,7 @@ import crypto, { randomUUID } from 'crypto';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
 import { setMaxListeners } from 'events';
+import { spawn } from 'child_process';
 import { createInterface } from 'readline';
 import * as fs from 'fs';
 import { realpathSync } from 'fs';
@@ -14621,27 +14622,25 @@ ${content}`;
   });
   return app;
 };
-var killProcessOnPort = (port) => {
-  try {
-    if (process.platform === "win32") {
-      execSync(
-        `for /f "tokens=5" %a in ('netstat -aon ^| findstr :${port} ^| findstr LISTENING') do taskkill /F /PID %a`,
-        { stdio: "ignore", timeout: 1e3, shell: "cmd.exe" }
-      );
-    } else {
-      execSync(`lsof -ti:${port} | xargs kill -9 2>/dev/null`, {
-        stdio: "ignore",
-        timeout: 1e3
-      });
-    }
-  } catch {
+var isPortInUse = (port) => new Promise((resolve) => {
+  const server = net.createServer();
+  server.once("error", () => resolve(true));
+  server.once("listening", () => {
+    server.close();
+    resolve(false);
+  });
+  server.listen(port);
+});
+var startServer = async (port = DEFAULT_PORT) => {
+  if (await isPortInUse(port)) {
+    return;
   }
-};
-var startServer = (port = DEFAULT_PORT) => {
-  killProcessOnPort(port);
   const app = createServer();
   serve({ fetch: app.fetch, port });
-  console.log("React Grab Claude Code server running on port", port);
+  console.log(`[React Grab] Server started on port ${port}`);
 };
+if (import.meta.url === `file://${process.argv[1]}`) {
+  startServer(DEFAULT_PORT).catch(console.error);
+}
 
 export { createServer, startServer };

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@react-grab/claude-code",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "type": "module",
+  "bin": {
+    "react-grab-claude-code": "./dist/cli.js"
+  },
   "exports": {
     "./client": {
       "types": "./dist/client.d.ts",
@@ -12,8 +15,11 @@
       "types": "./dist/server.d.ts",
       "import": "./dist/server.js",
       "require": "./dist/server.cjs"
-    }
+    },
+    "./dist/*": "./dist/*.js",
+    "./dist/*.js": "./dist/*.js"
   },
+  "browser": "dist/client.global.js",
   "files": [
     "dist"
   ],
@@ -24,10 +30,10 @@
     "@anthropic-ai/claude-agent-sdk": "^0.1.0",
     "@hono/node-server": "^1.19.6",
     "hono": "^4.0.0",
-    "react-grab": "0.0.59"
+    "react-grab": "0.0.61"
   },
   "scripts": {
     "dev": "tsup --watch",
-    "build": "NODE_ENV=production tsup"
+    "build": "rm -rf dist && NODE_ENV=production tsup"
   }
 }