@react-grab/claude-code 0.0.82 → 0.0.83

package/dist/cli.cjs

@@ -603,7 +603,7 @@ var import_picocolors = __toESM(require_picocolors());
 var DEFAULT_PORT = 4567;
 
 // src/cli.ts
-var VERSION = "0.0.82";
+var VERSION = "0.0.83";
 var serverPath = path.join(__dirname, "server.cjs");
 (0, import_cross_spawn.default)(process.execPath, [serverPath], {
   detached: true,

package/dist/cli.js

@@ -601,7 +601,7 @@ var import_picocolors = __toESM(require_picocolors());
 var DEFAULT_PORT = 4567;
 
 // src/cli.ts
-var VERSION = "0.0.82";
+var VERSION = "0.0.83";
 var serverPath = join(__dirname, "server.cjs");
 (0, import_cross_spawn.default)(process.execPath, [serverPath], {
   detached: true,

package/dist/client.cjs

@@ -1,24 +1,8 @@
 'use strict';
 
-// src/constants.ts
-var DEFAULT_PORT = 4567;
+// ../utils/dist/client.js
 var CONNECTION_CHECK_TTL_MS = 5e3;
-
-// src/client.ts
-var DEFAULT_SERVER_URL = `http://localhost:${DEFAULT_PORT}`;
 var STORAGE_KEY = "react-grab:agent-sessions";
-var DEFAULT_OPTIONS = {
-  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
-};
 var parseSSEEvent = (eventBlock) => {
   let eventType = "";
   let data = "";
@@ -68,7 +52,26 @@ async function* streamSSE(stream, signal) {
     }
   }
 }
+
+// src/constants.ts
+var DEFAULT_PORT = 4567;
+
+// src/client.ts
+var DEFAULT_SERVER_URL = `http://localhost:${DEFAULT_PORT}`;
+var DEFAULT_OPTIONS = {
+  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
+};
 async function* streamFromServer(serverUrl, context, signal) {
+  const startTime = Date.now();
   const sessionId = context.sessionId;
   const handleAbort = () => {
     if (sessionId) {
@@ -92,7 +95,37 @@ async function* streamFromServer(serverUrl, context, signal) {
     if (!response.body) {
       throw new Error("No response body");
     }
-    yield* streamSSE(response.body, signal);
+    const iterator = streamSSE(response.body, signal)[Symbol.asyncIterator]();
+    let done = false;
+    let pendingNext = iterator.next();
+    while (!done) {
+      const result = await Promise.race([
+        pendingNext.then((iteratorResult) => ({
+          type: "status",
+          iteratorResult
+        })),
+        new Promise(
+          (resolve) => setTimeout(() => resolve({ type: "timeout" }), 100)
+        )
+      ]);
+      if (result.type === "timeout") {
+        const elapsedSeconds = (Date.now() - startTime) / 1e3;
+        yield `Working\u2026 ${elapsedSeconds.toFixed(1)}s`;
+      } else {
+        const iteratorResult = result.iteratorResult;
+        done = iteratorResult.done ?? false;
+        if (!done && iteratorResult.value) {
+          const status = iteratorResult.value;
+          if (status === "Completed successfully") {
+            const totalSeconds = ((Date.now() - startTime) / 1e3).toFixed(1);
+            yield `Completed in ${totalSeconds}s`;
+          } else {
+            yield status;
+          }
+          pendingNext = iterator.next();
+        }
+      }
+    }
   } finally {
     signal.removeEventListener("abort", handleAbort);
   }

package/dist/client.global.js

@@ -1,6 +1,6 @@
-var ReactGrabClaudeCode=(function(exports){'use strict';var A=`http://localhost:${4567}`,y="react-grab:agent-sessions",E={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},b=s=>{let t="",o="";for(let n of s.split(`
-`))n.startsWith("event:")?t=n.slice(6).trim():n.startsWith("data:")&&(o=n.slice(5).trim());return {eventType:t,data:o}};async function*h(s,t){let o=s.getReader(),n=new TextDecoder,r="",e=false,i=()=>{e=true,o.cancel().catch(()=>{});};t.addEventListener("abort",i);try{if(t.aborted)throw new DOMException("Aborted","AbortError");for(;;){let a=await o.read();if(e||t.aborted)throw new DOMException("Aborted","AbortError");let{done:p,value:u}=a;u&&(r+=n.decode(u,{stream:!0}));let c;for(;(c=r.indexOf(`
+var ReactGrabClaudeCode=(function(exports){'use strict';var m=5e3,f="react-grab:agent-sessions",A=c=>{let e="",n="";for(let t of c.split(`
+`))t.startsWith("event:")?e=t.slice(6).trim():t.startsWith("data:")&&(n=t.slice(5).trim());return {eventType:e,data:n}};async function*y(c,e){let n=c.getReader(),t=new TextDecoder,s="",o=false,a=()=>{o=true,n.cancel().catch(()=>{});};e.addEventListener("abort",a);try{if(e.aborted)throw new DOMException("Aborted","AbortError");for(;;){let i=await n.read();if(o||e.aborted)throw new DOMException("Aborted","AbortError");let{done:l,value:u}=i;u&&(s+=t.decode(u,{stream:!0}));let d;for(;(d=s.indexOf(`
 
-`))!==-1;){let{eventType:d,data:l}=b(r.slice(0,c));if(r=r.slice(c+2),d==="done")return;if(d==="error")throw new Error(l||"Agent error");l&&(yield l);}if(p)break}}finally{t.removeEventListener("abort",i);try{o.releaseLock();}catch{}}}async function*m(s,t,o){let n=t.sessionId,r=()=>{n&&fetch(`${s}/abort/${n}`,{method:"POST"}).catch(()=>{});};o.addEventListener("abort",r);try{let e=await fetch(`${s}/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*h(e.body,o);}finally{o.removeEventListener("abort",r);}}var C=(s={})=>{let{serverUrl:t=A,getOptions:o}=s,n=null,r=e=>({...E,...o?.()??{},...e??{}});return {send:async function*(e,i){let a={...e,options:r(e.options)};yield*m(t,a,i);},resume:async function*(e,i,a){let p=a.getItem(y);if(!p)throw new Error("No sessions to resume");let c=JSON.parse(p)[e];if(!c)throw new Error(`Session ${e} not found`);let d=c.context,l={...d,options:r(d.options)};yield "Resuming...",yield*m(t,l,i);},supportsResume:true,supportsFollowUp:true,checkConnection:async()=>{let e=Date.now();if(n&&e-n.timestamp<5e3)return n.result;try{let a=(await fetch(`${t}/health`,{method:"GET"})).ok;return n={result:a,timestamp:e},a}catch{return n={result:false,timestamp:e},false}}}},w=async()=>{if(typeof window>"u")return;let s=C(),t=r=>{r.setAgent({provider:s,storage:sessionStorage});},o=window.__REACT_GRAB__;if(o){t(o);return}window.addEventListener("react-grab:init",r=>{t(r.detail);},{once:true});let n=window.__REACT_GRAB__;n&&t(n);};w();exports.attachAgent=w;exports.createClaudeAgentProvider=C;return exports;})({});
+`))!==-1;){let{eventType:r,data:p}=A(s.slice(0,d));if(s=s.slice(d+2),r==="done")return;if(r==="error")throw new Error(p||"Agent error");p&&(yield p);}if(l)break}}finally{e.removeEventListener("abort",a);try{n.releaseLock();}catch{}}}var w=`http://localhost:${4567}`,C={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};async function*g(c,e,n){let t=Date.now(),s=e.sessionId,o=()=>{s&&fetch(`${c}/abort/${s}`,{method:"POST"}).catch(()=>{});};n.addEventListener("abort",o);try{let a=await fetch(`${c}/agent`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e),signal:n});if(!a.ok)throw new Error(`Server error: ${a.status}`);if(!a.body)throw new Error("No response body");let i=y(a.body,n)[Symbol.asyncIterator](),l=!1,u=i.next();for(;!l;){let d=await Promise.race([u.then(r=>({type:"status",iteratorResult:r})),new Promise(r=>setTimeout(()=>r({type:"timeout"}),100))]);if(d.type==="timeout")yield `Working\u2026 ${((Date.now()-t)/1e3).toFixed(1)}s`;else {let r=d.iteratorResult;if(l=r.done??!1,!l&&r.value){let p=r.value;p==="Completed successfully"?yield `Completed in ${((Date.now()-t)/1e3).toFixed(1)}s`:yield p,u=i.next();}}}}finally{n.removeEventListener("abort",o);}}var E=(c={})=>{let{serverUrl:e=w,getOptions:n}=c,t=null,s=o=>({...C,...n?.()??{},...o??{}});return {send:async function*(o,a){let i={...o,options:s(o.options)};yield*g(e,i,a);},resume:async function*(o,a,i){let l=i.getItem(f);if(!l)throw new Error("No sessions to resume");let d=JSON.parse(l)[o];if(!d)throw new Error(`Session ${o} not found`);let r=d.context,p={...r,options:s(r.options)};yield "Resuming...",yield*g(e,p,a);},supportsResume:true,supportsFollowUp:true,checkConnection:async()=>{let o=Date.now();if(t&&o-t.timestamp<m)return t.result;try{let i=(await fetch(`${e}/health`,{method:"GET"})).ok;return t={result:i,timestamp:o},i}catch{return t={result:false,timestamp:o},false}}}},b=async()=>{if(typeof window>"u")return;let c=E(),e=s=>{s.setAgent({provider:c,storage:sessionStorage});},n=window.__REACT_GRAB__;if(n){e(n);return}window.addEventListener("react-grab:init",s=>{e(s.detail);},{once:true});let t=window.__REACT_GRAB__;t&&e(t);};b();exports.attachAgent=b;exports.createClaudeAgentProvider=E;return exports;})({});

package/dist/client.js

@@ -1,22 +1,6 @@
-// src/constants.ts
-var DEFAULT_PORT = 4567;
+// ../utils/dist/client.js
 var CONNECTION_CHECK_TTL_MS = 5e3;
-
-// src/client.ts
-var DEFAULT_SERVER_URL = `http://localhost:${DEFAULT_PORT}`;
 var STORAGE_KEY = "react-grab:agent-sessions";
-var DEFAULT_OPTIONS = {
-  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
-};
 var parseSSEEvent = (eventBlock) => {
   let eventType = "";
   let data = "";
@@ -66,7 +50,26 @@ async function* streamSSE(stream, signal) {
     }
   }
 }
+
+// src/constants.ts
+var DEFAULT_PORT = 4567;
+
+// src/client.ts
+var DEFAULT_SERVER_URL = `http://localhost:${DEFAULT_PORT}`;
+var DEFAULT_OPTIONS = {
+  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
+};
 async function* streamFromServer(serverUrl, context, signal) {
+  const startTime = Date.now();
   const sessionId = context.sessionId;
   const handleAbort = () => {
     if (sessionId) {
@@ -90,7 +93,37 @@ async function* streamFromServer(serverUrl, context, signal) {
     if (!response.body) {
       throw new Error("No response body");
     }
-    yield* streamSSE(response.body, signal);
+    const iterator = streamSSE(response.body, signal)[Symbol.asyncIterator]();
+    let done = false;
+    let pendingNext = iterator.next();
+    while (!done) {
+      const result = await Promise.race([
+        pendingNext.then((iteratorResult) => ({
+          type: "status",
+          iteratorResult
+        })),
+        new Promise(
+          (resolve) => setTimeout(() => resolve({ type: "timeout" }), 100)
+        )
+      ]);
+      if (result.type === "timeout") {
+        const elapsedSeconds = (Date.now() - startTime) / 1e3;
+        yield `Working\u2026 ${elapsedSeconds.toFixed(1)}s`;
+      } else {
+        const iteratorResult = result.iteratorResult;
+        done = iteratorResult.done ?? false;
+        if (!done && iteratorResult.value) {
+          const status = iteratorResult.value;
+          if (status === "Completed successfully") {
+            const totalSeconds = ((Date.now() - startTime) / 1e3).toFixed(1);
+            yield `Completed in ${totalSeconds}s`;
+          } else {
+            yield status;
+          }
+          pendingNext = iterator.next();
+        }
+      }
+    }
   } finally {
     signal.removeEventListener("abort", handleAbort);
   }

package/dist/server.cjs

@@ -18157,8 +18157,11 @@ function query({
 // src/constants.ts
 var DEFAULT_PORT = 4567;
 
+// ../utils/dist/server.js
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
 // src/server.ts
-var VERSION = "0.0.82";
+var VERSION = "0.0.83";
 var resolveClaudePath = () => {
   const command = process.platform === "win32" ? "where claude" : "which claude";
   try {
@@ -18257,7 +18260,6 @@ ${stderr.trim()}` : errorMessage;
   });
   return app;
 };
-var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 var startServer = async (port = DEFAULT_PORT) => {
   await fkill(`:${port}`, { force: true, silent: true }).catch(() => {
   });

package/dist/server.js

@@ -18128,8 +18128,11 @@ function query({
 // src/constants.ts
 var DEFAULT_PORT = 4567;
 
+// ../utils/dist/server.js
+var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
 // src/server.ts
-var VERSION = "0.0.82";
+var VERSION = "0.0.83";
 var resolveClaudePath = () => {
   const command = process.platform === "win32" ? "where claude" : "which claude";
   try {
@@ -18228,7 +18231,6 @@ ${stderr.trim()}` : errorMessage;
   });
   return app;
 };
-var sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 var startServer = async (port = DEFAULT_PORT) => {
   await fkill(`:${port}`, { force: true, silent: true }).catch(() => {
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-grab/claude-code",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "type": "module",
   "bin": {
     "react-grab-claude-code": "./dist/cli.cjs"
@@ -25,7 +25,8 @@
   ],
   "devDependencies": {
     "@types/cross-spawn": "^6.0.6",
-    "tsup": "^8.4.0"
+    "tsup": "^8.4.0",
+    "@react-grab/utils": "0.0.83"
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.1.0",
@@ -34,7 +35,7 @@
     "fkill": "^9.0.0",
     "hono": "^4.0.0",
     "picocolors": "^1.1.1",
-    "react-grab": "0.0.82"
+    "react-grab": "0.0.83"
   },
   "scripts": {
     "dev": "tsup --watch",