@react-grab/claude-code 0.0.87 → 0.0.89

package/dist/cli.cjs

@@ -7138,7 +7138,7 @@ var import_picocolors = __toESM(require_picocolors());
 var DEFAULT_PORT = 4567;
 
 // src/cli.ts
-var VERSION = "0.0.87";
+var VERSION = "0.0.89";
 var serverPath = path2.join(__dirname, "server.cjs");
 execa(process.execPath, [serverPath], {
   detached: true,

package/dist/cli.js

@@ -7130,7 +7130,7 @@ var import_picocolors = __toESM(require_picocolors());
 var DEFAULT_PORT = 4567;
 
 // src/cli.ts
-var VERSION = "0.0.87";
+var VERSION = "0.0.89";
 var serverPath = join(__dirname, "server.cjs");
 execa(process.execPath, [serverPath], {
   detached: true,

package/dist/client.cjs

@@ -12,7 +12,7 @@ var parseSSEEvent = (eventBlock) => {
   }
   return { eventType, data };
 };
-async function* streamSSE(stream, signal) {
+var streamSSE = async function* (stream, signal) {
   const reader = stream.getReader();
   const decoder = new TextDecoder();
   let buffer = "";
@@ -51,40 +51,54 @@ async function* streamSSE(stream, signal) {
     } catch {
     }
   }
-}
-
-// src/constants.ts
-var DEFAULT_PORT = 4567;
-var COMPLETED_STATUS = "Completed successfully";
-
-// 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) {
+var isRecord = (value) => typeof value === "object" && value !== null;
+var getStoredAgentContext = (storage, sessionId, storageKey = STORAGE_KEY) => {
+  const rawSessions = storage.getItem(storageKey);
+  if (!rawSessions) throw new Error("No sessions to resume");
+  let parsed;
+  try {
+    parsed = JSON.parse(rawSessions);
+  } catch {
+    throw new Error("Failed to parse stored sessions");
+  }
+  if (!isRecord(parsed)) throw new Error("Invalid stored sessions");
+  const storedSession = parsed[sessionId];
+  if (!isRecord(storedSession)) {
+    throw new Error(`Session ${sessionId} not found`);
+  }
+  const context = storedSession.context;
+  if (!isRecord(context)) throw new Error(`Session ${sessionId} is invalid`);
+  const content = context.content;
+  const prompt = context.prompt;
+  if (typeof content !== "string" || typeof prompt !== "string") {
+    throw new Error(`Session ${sessionId} is invalid`);
+  }
+  const options = context.options;
+  const storedSessionId = context.sessionId;
+  return {
+    content,
+    prompt,
+    options,
+    sessionId: typeof storedSessionId === "string" ? storedSessionId : void 0
+  };
+};
+var streamAgentStatusFromServer = async function* (options, context, signal) {
   const startTime = Date.now();
   const sessionId = context.sessionId;
+  const pollIntervalMs = options.pollIntervalMs ?? 100;
+  const agentUrl = `${options.serverUrl}${options.agentPath ?? "/agent"}`;
   const handleAbort = () => {
-    if (sessionId) {
-      fetch(`${serverUrl}/abort/${sessionId}`, { method: "POST" }).catch(
-        () => {
-        }
-      );
-    }
+    if (!sessionId) return;
+    const abortPath = options.abortPath?.(sessionId) ?? `/abort/${sessionId}`;
+    fetch(`${options.serverUrl}${abortPath}`, { method: "POST" }).catch(
+      () => {
+      }
+    );
   };
   signal.addEventListener("abort", handleAbort);
   try {
-    const response = await fetch(`${serverUrl}/agent`, {
+    const response = await fetch(agentUrl, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(context),
@@ -97,29 +111,29 @@ async function* streamFromServer(serverUrl, context, signal) {
       throw new Error("No response body");
     }
     const iterator = streamSSE(response.body, signal)[Symbol.asyncIterator]();
-    let done = false;
+    let isDone = false;
     let pendingNext = iterator.next();
     let lastStatus = null;
-    while (!done) {
+    while (!isDone) {
       const result = await Promise.race([
         pendingNext.then((iteratorResult) => ({
           type: "status",
           iteratorResult
         })),
         new Promise(
-          (resolve) => setTimeout(() => resolve({ type: "timeout" }), 100)
+          (resolve) => setTimeout(() => resolve({ type: "timeout" }), pollIntervalMs)
         )
       ]);
       const elapsedSeconds = (Date.now() - startTime) / 1e3;
       if (result.type === "status") {
         const iteratorResult = result.iteratorResult;
-        done = iteratorResult.done ?? false;
-        if (!done && iteratorResult.value) {
+        isDone = iteratorResult.done ?? false;
+        if (!isDone && iteratorResult.value) {
           lastStatus = iteratorResult.value;
           pendingNext = iterator.next();
         }
       }
-      if (lastStatus === COMPLETED_STATUS) {
+      if (lastStatus === options.completedStatus) {
         yield `Completed in ${elapsedSeconds.toFixed(1)}s`;
       } else if (lastStatus) {
         yield `${lastStatus} ${elapsedSeconds.toFixed(1)}s`;
@@ -130,58 +144,87 @@ async function* streamFromServer(serverUrl, context, signal) {
   } finally {
     signal.removeEventListener("abort", handleAbort);
   }
-}
+};
+var createCachedConnectionChecker = (checkConnection, ttlMs = CONNECTION_CHECK_TTL_MS) => {
+  let cache = null;
+  return async () => {
+    const now = Date.now();
+    if (cache && now - cache.timestamp < ttlMs) return cache.result;
+    try {
+      const result = await checkConnection();
+      cache = { result, timestamp: now };
+      return result;
+    } catch {
+      cache = { result: false, timestamp: now };
+      return false;
+    }
+  };
+};
+
+// src/constants.ts
+var DEFAULT_PORT = 4567;
+var COMPLETED_STATUS = "Completed successfully";
+
+// 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
+};
+var isReactGrabApi = (value) => typeof value === "object" && value !== null && "setAgent" in value;
 var createClaudeAgentProvider = (providerOptions = {}) => {
   const { serverUrl = DEFAULT_SERVER_URL, getOptions } = providerOptions;
-  let connectionCache = null;
   const mergeOptions = (contextOptions) => ({
     ...DEFAULT_OPTIONS,
     ...getOptions?.() ?? {},
     ...contextOptions ?? {}
   });
+  const checkConnection = createCachedConnectionChecker(async () => {
+    const response = await fetch(`${serverUrl}/health`, { method: "GET" });
+    return response.ok;
+  }, CONNECTION_CHECK_TTL_MS);
   return {
     send: async function* (context, signal) {
       const mergedContext = {
         ...context,
         options: mergeOptions(context.options)
       };
-      yield* streamFromServer(serverUrl, mergedContext, signal);
+      yield* streamAgentStatusFromServer(
+        { serverUrl, completedStatus: COMPLETED_STATUS },
+        mergedContext,
+        signal
+      );
     },
     resume: async function* (sessionId, signal, storage) {
-      const savedSessions = storage.getItem(STORAGE_KEY);
-      if (!savedSessions) {
-        throw new Error("No sessions to resume");
-      }
-      const sessionsObject = JSON.parse(savedSessions);
-      const session = sessionsObject[sessionId];
-      if (!session) {
-        throw new Error(`Session ${sessionId} not found`);
-      }
-      const context = session.context;
+      const storedContext = getStoredAgentContext(storage, sessionId);
+      const context = {
+        content: storedContext.content,
+        prompt: storedContext.prompt,
+        options: storedContext.options,
+        sessionId: storedContext.sessionId ?? sessionId
+      };
       const mergedContext = {
         ...context,
         options: mergeOptions(context.options)
       };
       yield "Resuming...";
-      yield* streamFromServer(serverUrl, mergedContext, signal);
+      yield* streamAgentStatusFromServer(
+        { serverUrl, completedStatus: COMPLETED_STATUS },
+        mergedContext,
+        signal
+      );
     },
     supportsResume: true,
     supportsFollowUp: true,
-    checkConnection: async () => {
-      const now = Date.now();
-      if (connectionCache && now - connectionCache.timestamp < CONNECTION_CHECK_TTL_MS) {
-        return connectionCache.result;
-      }
-      try {
-        const response = await fetch(`${serverUrl}/health`, { method: "GET" });
-        const result = response.ok;
-        connectionCache = { result, timestamp: now };
-        return result;
-      } catch {
-        connectionCache = { result: false, timestamp: now };
-        return false;
-      }
-    },
+    checkConnection,
     undo: async () => {
       try {
         await fetch(`${serverUrl}/undo`, { method: "POST" });
@@ -193,24 +236,25 @@ var createClaudeAgentProvider = (providerOptions = {}) => {
 var attachAgent = async () => {
   if (typeof window === "undefined") return;
   const provider = createClaudeAgentProvider();
-  const attach = (api2) => {
-    api2.setAgent({ provider, storage: sessionStorage });
+  const attach = (api) => {
+    api.setAgent({ provider, storage: sessionStorage });
   };
-  const api = window.__REACT_GRAB__;
-  if (api) {
-    attach(api);
+  const existingApi = window.__REACT_GRAB__;
+  if (isReactGrabApi(existingApi)) {
+    attach(existingApi);
     return;
   }
   window.addEventListener(
     "react-grab:init",
     (event) => {
-      const customEvent = event;
-      attach(customEvent.detail);
+      if (!(event instanceof CustomEvent)) return;
+      if (!isReactGrabApi(event.detail)) return;
+      attach(event.detail);
     },
     { once: true }
   );
   const apiAfterListener = window.__REACT_GRAB__;
-  if (apiAfterListener) {
+  if (isReactGrabApi(apiAfterListener)) {
     attach(apiAfterListener);
   }
 };

package/dist/client.global.js

@@ -1,6 +1,6 @@
-var ReactGrabClaudeCode=(function(exports){'use strict';var f=5e3,y="react-grab:agent-sessions",E=c=>{let e="",n="";for(let o of c.split(`
-`))o.startsWith("event:")?e=o.slice(6).trim():o.startsWith("data:")&&(n=o.slice(5).trim());return {eventType:e,data:n}};async function*g(c,e){let n=c.getReader(),o=new TextDecoder,s="",t=false,r=()=>{t=true,n.cancel().catch(()=>{});};e.addEventListener("abort",r);try{if(e.aborted)throw new DOMException("Aborted","AbortError");for(;;){let a=await n.read();if(t||e.aborted)throw new DOMException("Aborted","AbortError");let{done:l,value:m}=a;m&&(s+=o.decode(m,{stream:!0}));let i;for(;(i=s.indexOf(`
+var ReactGrabClaudeCode=(function(exports){'use strict';var y=5e3,b="react-grab:agent-sessions",v=t=>{let e="",o="";for(let n of t.split(`
+`))n.startsWith("event:")?e=n.slice(6).trim():n.startsWith("data:")&&(o=n.slice(5).trim());return {eventType:e,data:o}},T=async function*(t,e){let o=t.getReader(),n=new TextDecoder,r="",s=false,i=()=>{s=true,o.cancel().catch(()=>{});};e.addEventListener("abort",i);try{if(e.aborted)throw new DOMException("Aborted","AbortError");for(;;){let d=await o.read();if(s||e.aborted)throw new DOMException("Aborted","AbortError");let{done:a,value:l}=d;l&&(r+=n.decode(l,{stream:!0}));let c;for(;(c=r.indexOf(`
 
-`))!==-1;){let{eventType:u,data:d}=E(s.slice(0,i));if(s=s.slice(i+2),u==="done")return;if(u==="error")throw new Error(d||"Agent error");d&&(yield d);}if(l)break}}finally{e.removeEventListener("abort",r);try{n.releaseLock();}catch{}}}var A="Completed successfully";var w=`http://localhost:${4567}`,b={systemPrompt:{type:"preset",preset:"claude_code",append:`You are helping a user make changes to a React component based on a selected element.
+`))!==-1;){let{eventType:f,data:p}=v(r.slice(0,c));if(r=r.slice(c+2),f==="done")return;if(f==="error")throw new Error(p||"Agent error");p&&(yield p);}if(a)break}}finally{e.removeEventListener("abort",i);try{o.releaseLock();}catch{}}},h=t=>typeof t=="object"&&t!==null,S=(t,e,o=b)=>{let n=t.getItem(o);if(!n)throw new Error("No sessions to resume");let r;try{r=JSON.parse(n);}catch{throw new Error("Failed to parse stored sessions")}if(!h(r))throw new Error("Invalid stored sessions");let s=r[e];if(!h(s))throw new Error(`Session ${e} not found`);let i=s.context;if(!h(i))throw new Error(`Session ${e} is invalid`);let d=i.content,a=i.prompt;if(typeof d!="string"||typeof a!="string")throw new Error(`Session ${e} is invalid`);let l=i.options,c=i.sessionId;return {content:d,prompt:a,options:l,sessionId:typeof c=="string"?c:void 0}},w=async function*(t,e,o){let n=Date.now(),r=e.sessionId,s=t.pollIntervalMs??100,i=`${t.serverUrl}${t.agentPath??"/agent"}`,d=()=>{if(!r)return;let a=t.abortPath?.(r)??`/abort/${r}`;fetch(`${t.serverUrl}${a}`,{method:"POST"}).catch(()=>{});};o.addEventListener("abort",d);try{let a=await fetch(i,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e),signal:o});if(!a.ok)throw new Error(`Server error: ${a.status}`);if(!a.body)throw new Error("No response body");let l=T(a.body,o)[Symbol.asyncIterator](),c=!1,f=l.next(),p=null;for(;!c;){let A=await Promise.race([f.then(u=>({type:"status",iteratorResult:u})),new Promise(u=>setTimeout(()=>u({type:"timeout"}),s))]),m=(Date.now()-n)/1e3;if(A.type==="status"){let u=A.iteratorResult;c=u.done??!1,!c&&u.value&&(p=u.value,f=l.next());}p===t.completedStatus?yield `Completed in ${m.toFixed(1)}s`:p?yield `${p} ${m.toFixed(1)}s`:yield `Working\u2026 ${m.toFixed(1)}s`;}}finally{o.removeEventListener("abort",d);}},E=(t,e=y)=>{let o=null;return async()=>{let n=Date.now();if(o&&n-o.timestamp<e)return o.result;try{let r=await t();return o={result:r,timestamp:n},r}catch{return o={result:false,timestamp:n},false}}};var g="Completed successfully";var _=`http://localhost:${4567}`,x={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*h(c,e,n){let o=Date.now(),s=e.sessionId,t=()=>{s&&fetch(`${c}/abort/${s}`,{method:"POST"}).catch(()=>{});};n.addEventListener("abort",t);try{let r=await fetch(`${c}/agent`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e),signal:n});if(!r.ok)throw new Error(`Server error: ${r.status}`);if(!r.body)throw new Error("No response body");let a=g(r.body,n)[Symbol.asyncIterator](),l=!1,m=a.next(),i=null;for(;!l;){let u=await Promise.race([m.then(p=>({type:"status",iteratorResult:p})),new Promise(p=>setTimeout(()=>p({type:"timeout"}),100))]),d=(Date.now()-o)/1e3;if(u.type==="status"){let p=u.iteratorResult;l=p.done??!1,!l&&p.value&&(i=p.value,m=a.next());}i===A?yield `Completed in ${d.toFixed(1)}s`:i?yield `${i} ${d.toFixed(1)}s`:yield `Working\u2026 ${d.toFixed(1)}s`;}}finally{n.removeEventListener("abort",t);}}var S=(c={})=>{let{serverUrl:e=w,getOptions:n}=c,o=null,s=t=>({...b,...n?.()??{},...t??{}});return {send:async function*(t,r){let a={...t,options:s(t.options)};yield*h(e,a,r);},resume:async function*(t,r,a){let l=a.getItem(y);if(!l)throw new Error("No sessions to resume");let i=JSON.parse(l)[t];if(!i)throw new Error(`Session ${t} not found`);let u=i.context,d={...u,options:s(u.options)};yield "Resuming...",yield*h(e,d,r);},supportsResume:true,supportsFollowUp:true,checkConnection:async()=>{let t=Date.now();if(o&&t-o.timestamp<f)return o.result;try{let a=(await fetch(`${e}/health`,{method:"GET"})).ok;return o={result:a,timestamp:t},a}catch{return o={result:false,timestamp:t},false}},undo:async()=>{try{await fetch(`${e}/undo`,{method:"POST"});}catch{}}}},T=async()=>{if(typeof window>"u")return;let c=S(),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 o=window.__REACT_GRAB__;o&&e(o);};T();exports.attachAgent=T;exports.createClaudeAgentProvider=S;return exports;})({});
+Provide clear, concise status updates as you work.`},model:"haiku",permissionMode:"bypassPermissions",maxTurns:10},C=t=>typeof t=="object"&&t!==null&&"setAgent"in t,R=(t={})=>{let{serverUrl:e=_,getOptions:o}=t,n=s=>({...x,...o?.()??{},...s??{}}),r=E(async()=>(await fetch(`${e}/health`,{method:"GET"})).ok,y);return {send:async function*(s,i){let d={...s,options:n(s.options)};yield*w({serverUrl:e,completedStatus:g},d,i);},resume:async function*(s,i,d){let a=S(d,s),l={content:a.content,prompt:a.prompt,options:a.options,sessionId:a.sessionId??s},c={...l,options:n(l.options)};yield "Resuming...",yield*w({serverUrl:e,completedStatus:g},c,i);},supportsResume:true,supportsFollowUp:true,checkConnection:r,undo:async()=>{try{await fetch(`${e}/undo`,{method:"POST"});}catch{}}}},P=async()=>{if(typeof window>"u")return;let t=R(),e=r=>{r.setAgent({provider:t,storage:sessionStorage});},o=window.__REACT_GRAB__;if(C(o)){e(o);return}window.addEventListener("react-grab:init",r=>{r instanceof CustomEvent&&C(r.detail)&&e(r.detail);},{once:true});let n=window.__REACT_GRAB__;C(n)&&e(n);};P();exports.attachAgent=P;exports.createClaudeAgentProvider=R;return exports;})({});

package/dist/client.js

@@ -10,7 +10,7 @@ var parseSSEEvent = (eventBlock) => {
   }
   return { eventType, data };
 };
-async function* streamSSE(stream, signal) {
+var streamSSE = async function* (stream, signal) {
   const reader = stream.getReader();
   const decoder = new TextDecoder();
   let buffer = "";
@@ -49,40 +49,54 @@ async function* streamSSE(stream, signal) {
     } catch {
     }
   }
-}
-
-// src/constants.ts
-var DEFAULT_PORT = 4567;
-var COMPLETED_STATUS = "Completed successfully";
-
-// 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) {
+var isRecord = (value) => typeof value === "object" && value !== null;
+var getStoredAgentContext = (storage, sessionId, storageKey = STORAGE_KEY) => {
+  const rawSessions = storage.getItem(storageKey);
+  if (!rawSessions) throw new Error("No sessions to resume");
+  let parsed;
+  try {
+    parsed = JSON.parse(rawSessions);
+  } catch {
+    throw new Error("Failed to parse stored sessions");
+  }
+  if (!isRecord(parsed)) throw new Error("Invalid stored sessions");
+  const storedSession = parsed[sessionId];
+  if (!isRecord(storedSession)) {
+    throw new Error(`Session ${sessionId} not found`);
+  }
+  const context = storedSession.context;
+  if (!isRecord(context)) throw new Error(`Session ${sessionId} is invalid`);
+  const content = context.content;
+  const prompt = context.prompt;
+  if (typeof content !== "string" || typeof prompt !== "string") {
+    throw new Error(`Session ${sessionId} is invalid`);
+  }
+  const options = context.options;
+  const storedSessionId = context.sessionId;
+  return {
+    content,
+    prompt,
+    options,
+    sessionId: typeof storedSessionId === "string" ? storedSessionId : void 0
+  };
+};
+var streamAgentStatusFromServer = async function* (options, context, signal) {
   const startTime = Date.now();
   const sessionId = context.sessionId;
+  const pollIntervalMs = options.pollIntervalMs ?? 100;
+  const agentUrl = `${options.serverUrl}${options.agentPath ?? "/agent"}`;
   const handleAbort = () => {
-    if (sessionId) {
-      fetch(`${serverUrl}/abort/${sessionId}`, { method: "POST" }).catch(
-        () => {
-        }
-      );
-    }
+    if (!sessionId) return;
+    const abortPath = options.abortPath?.(sessionId) ?? `/abort/${sessionId}`;
+    fetch(`${options.serverUrl}${abortPath}`, { method: "POST" }).catch(
+      () => {
+      }
+    );
   };
   signal.addEventListener("abort", handleAbort);
   try {
-    const response = await fetch(`${serverUrl}/agent`, {
+    const response = await fetch(agentUrl, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(context),
@@ -95,29 +109,29 @@ async function* streamFromServer(serverUrl, context, signal) {
       throw new Error("No response body");
     }
     const iterator = streamSSE(response.body, signal)[Symbol.asyncIterator]();
-    let done = false;
+    let isDone = false;
     let pendingNext = iterator.next();
     let lastStatus = null;
-    while (!done) {
+    while (!isDone) {
       const result = await Promise.race([
         pendingNext.then((iteratorResult) => ({
           type: "status",
           iteratorResult
         })),
         new Promise(
-          (resolve) => setTimeout(() => resolve({ type: "timeout" }), 100)
+          (resolve) => setTimeout(() => resolve({ type: "timeout" }), pollIntervalMs)
         )
       ]);
       const elapsedSeconds = (Date.now() - startTime) / 1e3;
       if (result.type === "status") {
         const iteratorResult = result.iteratorResult;
-        done = iteratorResult.done ?? false;
-        if (!done && iteratorResult.value) {
+        isDone = iteratorResult.done ?? false;
+        if (!isDone && iteratorResult.value) {
           lastStatus = iteratorResult.value;
           pendingNext = iterator.next();
         }
       }
-      if (lastStatus === COMPLETED_STATUS) {
+      if (lastStatus === options.completedStatus) {
         yield `Completed in ${elapsedSeconds.toFixed(1)}s`;
       } else if (lastStatus) {
         yield `${lastStatus} ${elapsedSeconds.toFixed(1)}s`;
@@ -128,58 +142,87 @@ async function* streamFromServer(serverUrl, context, signal) {
   } finally {
     signal.removeEventListener("abort", handleAbort);
   }
-}
+};
+var createCachedConnectionChecker = (checkConnection, ttlMs = CONNECTION_CHECK_TTL_MS) => {
+  let cache = null;
+  return async () => {
+    const now = Date.now();
+    if (cache && now - cache.timestamp < ttlMs) return cache.result;
+    try {
+      const result = await checkConnection();
+      cache = { result, timestamp: now };
+      return result;
+    } catch {
+      cache = { result: false, timestamp: now };
+      return false;
+    }
+  };
+};
+
+// src/constants.ts
+var DEFAULT_PORT = 4567;
+var COMPLETED_STATUS = "Completed successfully";
+
+// 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
+};
+var isReactGrabApi = (value) => typeof value === "object" && value !== null && "setAgent" in value;
 var createClaudeAgentProvider = (providerOptions = {}) => {
   const { serverUrl = DEFAULT_SERVER_URL, getOptions } = providerOptions;
-  let connectionCache = null;
   const mergeOptions = (contextOptions) => ({
     ...DEFAULT_OPTIONS,
     ...getOptions?.() ?? {},
     ...contextOptions ?? {}
   });
+  const checkConnection = createCachedConnectionChecker(async () => {
+    const response = await fetch(`${serverUrl}/health`, { method: "GET" });
+    return response.ok;
+  }, CONNECTION_CHECK_TTL_MS);
   return {
     send: async function* (context, signal) {
       const mergedContext = {
         ...context,
         options: mergeOptions(context.options)
       };
-      yield* streamFromServer(serverUrl, mergedContext, signal);
+      yield* streamAgentStatusFromServer(
+        { serverUrl, completedStatus: COMPLETED_STATUS },
+        mergedContext,
+        signal
+      );
     },
     resume: async function* (sessionId, signal, storage) {
-      const savedSessions = storage.getItem(STORAGE_KEY);
-      if (!savedSessions) {
-        throw new Error("No sessions to resume");
-      }
-      const sessionsObject = JSON.parse(savedSessions);
-      const session = sessionsObject[sessionId];
-      if (!session) {
-        throw new Error(`Session ${sessionId} not found`);
-      }
-      const context = session.context;
+      const storedContext = getStoredAgentContext(storage, sessionId);
+      const context = {
+        content: storedContext.content,
+        prompt: storedContext.prompt,
+        options: storedContext.options,
+        sessionId: storedContext.sessionId ?? sessionId
+      };
       const mergedContext = {
         ...context,
         options: mergeOptions(context.options)
       };
       yield "Resuming...";
-      yield* streamFromServer(serverUrl, mergedContext, signal);
+      yield* streamAgentStatusFromServer(
+        { serverUrl, completedStatus: COMPLETED_STATUS },
+        mergedContext,
+        signal
+      );
     },
     supportsResume: true,
     supportsFollowUp: true,
-    checkConnection: async () => {
-      const now = Date.now();
-      if (connectionCache && now - connectionCache.timestamp < CONNECTION_CHECK_TTL_MS) {
-        return connectionCache.result;
-      }
-      try {
-        const response = await fetch(`${serverUrl}/health`, { method: "GET" });
-        const result = response.ok;
-        connectionCache = { result, timestamp: now };
-        return result;
-      } catch {
-        connectionCache = { result: false, timestamp: now };
-        return false;
-      }
-    },
+    checkConnection,
     undo: async () => {
       try {
         await fetch(`${serverUrl}/undo`, { method: "POST" });
@@ -191,24 +234,25 @@ var createClaudeAgentProvider = (providerOptions = {}) => {
 var attachAgent = async () => {
   if (typeof window === "undefined") return;
   const provider = createClaudeAgentProvider();
-  const attach = (api2) => {
-    api2.setAgent({ provider, storage: sessionStorage });
+  const attach = (api) => {
+    api.setAgent({ provider, storage: sessionStorage });
   };
-  const api = window.__REACT_GRAB__;
-  if (api) {
-    attach(api);
+  const existingApi = window.__REACT_GRAB__;
+  if (isReactGrabApi(existingApi)) {
+    attach(existingApi);
     return;
   }
   window.addEventListener(
     "react-grab:init",
     (event) => {
-      const customEvent = event;
-      attach(customEvent.detail);
+      if (!(event instanceof CustomEvent)) return;
+      if (!isReactGrabApi(event.detail)) return;
+      attach(event.detail);
     },
     { once: true }
   );
   const apiAfterListener = window.__REACT_GRAB__;
-  if (apiAfterListener) {
+  if (isReactGrabApi(apiAfterListener)) {
     attach(apiAfterListener);
   }
 };

package/dist/server.cjs

@@ -18187,9 +18187,11 @@ Check that the command is executable: chmod +x $(which ${commandName})`;
 };
 
 // src/server.ts
-var VERSION = "0.0.87";
+var VERSION = "0.0.89";
 try {
-  fetch(`https://www.react-grab.com/api/version?source=claude-code&t=${Date.now()}`).catch(() => {
+  fetch(
+    `https://www.react-grab.com/api/version?source=claude-code&t=${Date.now()}`
+  ).catch(() => {
   });
 } catch {
 }
@@ -18206,6 +18208,75 @@ var claudeSessionMap = /* @__PURE__ */ new Map();
 var abortedSessions = /* @__PURE__ */ new Set();
 var lastClaudeSessionId;
 var isTextBlock = (block) => block.type === "text";
+var runAgent = async function* (prompt, options) {
+  const sessionId = options?.sessionId;
+  const isAborted2 = () => {
+    if (options?.signal?.aborted) return true;
+    if (sessionId && abortedSessions.has(sessionId)) return true;
+    return false;
+  };
+  try {
+    yield { type: "status", content: "Thinking\u2026" };
+    const env = { ...process.env };
+    delete env.NODE_OPTIONS;
+    delete env.VSCODE_INSPECTOR_OPTIONS;
+    const claudeSessionId = sessionId ? claudeSessionMap.get(sessionId) : void 0;
+    const queryResult = query({
+      prompt,
+      options: {
+        pathToClaudeCodeExecutable: resolveClaudePath(),
+        includePartialMessages: true,
+        env,
+        ...options,
+        cwd: options?.cwd ?? process.env.REACT_GRAB_CWD ?? process.cwd(),
+        ...claudeSessionId ? { resume: claudeSessionId } : {}
+      }
+    });
+    let capturedClaudeSessionId;
+    for await (const message of queryResult) {
+      if (isAborted2()) break;
+      if (!capturedClaudeSessionId && message.session_id) {
+        capturedClaudeSessionId = message.session_id;
+      }
+      if (message.type === "assistant") {
+        const textContent = message.message.content.filter(isTextBlock).map((block) => block.text).join(" ");
+        if (textContent) {
+          yield { type: "status", content: textContent };
+        }
+      }
+      if (message.type === "result") {
+        yield {
+          type: "status",
+          content: message.subtype === "success" ? COMPLETED_STATUS : "Task finished"
+        };
+      }
+    }
+    if (!isAborted2() && capturedClaudeSessionId) {
+      if (sessionId) {
+        claudeSessionMap.set(sessionId, capturedClaudeSessionId);
+      }
+      lastClaudeSessionId = capturedClaudeSessionId;
+    }
+    if (!isAborted2()) {
+      yield { type: "done", content: "" };
+    }
+  } catch (error) {
+    if (!isAborted2()) {
+      const errorMessage = error instanceof Error ? formatSpawnError(error, "claude") : "Unknown error";
+      const stderr = error instanceof Error && "stderr" in error ? String(error.stderr) : void 0;
+      const fullError = stderr && stderr.trim() ? `${errorMessage}
+
+stderr:
+${stderr.trim()}` : errorMessage;
+      yield { type: "error", content: fullError };
+      yield { type: "done", content: "" };
+    }
+  } finally {
+    if (sessionId) {
+      abortedSessions.delete(sessionId);
+    }
+  }
+};
 var createServer = () => {
   const app = new Hono2();
   app.use("*", cors());
@@ -18218,67 +18289,17 @@ var createServer = () => {
 
 ${content}`;
     return streamSSE(context, async (stream2) => {
-      const isAborted2 = () => sessionId && abortedSessions.has(sessionId);
-      try {
-        await stream2.writeSSE({ data: "Thinking\u2026", event: "status" });
-        const env = { ...process.env };
-        delete env.NODE_OPTIONS;
-        delete env.VSCODE_INSPECTOR_OPTIONS;
-        const queryResult = query({
-          prompt: userPrompt,
-          options: {
-            pathToClaudeCodeExecutable: resolveClaudePath(),
-            includePartialMessages: true,
-            env,
-            ...options,
-            cwd: options?.cwd ?? process.env.REACT_GRAB_CWD ?? process.cwd(),
-            ...isFollowUp && claudeSessionId ? { resume: claudeSessionId } : {}
-          }
-        });
-        let capturedClaudeSessionId;
-        for await (const message of queryResult) {
-          if (isAborted2()) break;
-          if (!capturedClaudeSessionId && message.session_id) {
-            capturedClaudeSessionId = message.session_id;
-          }
-          if (message.type === "assistant") {
-            const textContent = message.message.content.filter(isTextBlock).map((block) => block.text).join(" ");
-            if (textContent) {
-              await stream2.writeSSE({ data: textContent, event: "status" });
-            }
-          }
-          if (message.type === "result") {
-            await stream2.writeSSE({
-              data: message.subtype === "success" ? COMPLETED_STATUS : "Task finished",
-              event: "status"
-            });
-          }
-        }
-        if (!isAborted2() && capturedClaudeSessionId) {
-          if (sessionId) {
-            claudeSessionMap.set(sessionId, capturedClaudeSessionId);
-          }
-          lastClaudeSessionId = capturedClaudeSessionId;
-        }
-        if (!isAborted2()) {
-          await stream2.writeSSE({ data: "", event: "done" });
-        }
-      } catch (error) {
-        if (!isAborted2()) {
-          const errorMessage = error instanceof Error ? formatSpawnError(error, "claude") : "Unknown error";
-          const stderr = error instanceof Error && "stderr" in error ? String(error.stderr) : void 0;
-          const fullError = stderr && stderr.trim() ? `${errorMessage}
-
-stderr:
-${stderr.trim()}` : errorMessage;
+      for await (const message of runAgent(userPrompt, {
+        ...options,
+        sessionId
+      })) {
+        if (message.type === "error") {
           await stream2.writeSSE({
-            data: `Error: ${fullError}`,
+            data: `Error: ${message.content}`,
             event: "error"
           });
-        }
-      } finally {
-        if (sessionId) {
-          abortedSessions.delete(sessionId);
+        } else {
+          await stream2.writeSSE({ data: message.content, event: message.type });
         }
       }
     });
@@ -18334,4 +18355,5 @@ if ((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filen
 }
 
 exports.createServer = createServer;
+exports.runAgent = runAgent;
 exports.startServer = startServer;

package/dist/server.d.cts

@@ -1,7 +1,12 @@
 import * as hono_types from 'hono/types';
 import { Hono } from 'hono';
+import { Options } from '@anthropic-ai/claude-agent-sdk';
+import { AgentCoreOptions, AgentMessage } from '@react-grab/utils/server';
 
+interface ClaudeAgentOptions extends AgentCoreOptions, Omit<Options, "cwd"> {
+}
+declare const runAgent: (prompt: string, options?: ClaudeAgentOptions) => AsyncGenerator<AgentMessage>;
 declare const createServer: () => Hono<hono_types.BlankEnv, hono_types.BlankSchema, "/">;
 declare const startServer: (port?: number) => Promise<void>;
 
-export { createServer, startServer };
+export { type ClaudeAgentOptions, createServer, runAgent, startServer };

package/dist/server.d.ts

@@ -1,7 +1,12 @@
 import * as hono_types from 'hono/types';
 import { Hono } from 'hono';
+import { Options } from '@anthropic-ai/claude-agent-sdk';
+import { AgentCoreOptions, AgentMessage } from '@react-grab/utils/server';
 
+interface ClaudeAgentOptions extends AgentCoreOptions, Omit<Options, "cwd"> {
+}
+declare const runAgent: (prompt: string, options?: ClaudeAgentOptions) => AsyncGenerator<AgentMessage>;
 declare const createServer: () => Hono<hono_types.BlankEnv, hono_types.BlankSchema, "/">;
 declare const startServer: (port?: number) => Promise<void>;
 
-export { createServer, startServer };
+export { type ClaudeAgentOptions, createServer, runAgent, startServer };

package/dist/server.js

@@ -18158,9 +18158,11 @@ Check that the command is executable: chmod +x $(which ${commandName})`;
 };
 
 // src/server.ts
-var VERSION = "0.0.87";
+var VERSION = "0.0.89";
 try {
-  fetch(`https://www.react-grab.com/api/version?source=claude-code&t=${Date.now()}`).catch(() => {
+  fetch(
+    `https://www.react-grab.com/api/version?source=claude-code&t=${Date.now()}`
+  ).catch(() => {
   });
 } catch {
 }
@@ -18177,6 +18179,75 @@ var claudeSessionMap = /* @__PURE__ */ new Map();
 var abortedSessions = /* @__PURE__ */ new Set();
 var lastClaudeSessionId;
 var isTextBlock = (block) => block.type === "text";
+var runAgent = async function* (prompt, options) {
+  const sessionId = options?.sessionId;
+  const isAborted2 = () => {
+    if (options?.signal?.aborted) return true;
+    if (sessionId && abortedSessions.has(sessionId)) return true;
+    return false;
+  };
+  try {
+    yield { type: "status", content: "Thinking\u2026" };
+    const env = { ...process.env };
+    delete env.NODE_OPTIONS;
+    delete env.VSCODE_INSPECTOR_OPTIONS;
+    const claudeSessionId = sessionId ? claudeSessionMap.get(sessionId) : void 0;
+    const queryResult = query({
+      prompt,
+      options: {
+        pathToClaudeCodeExecutable: resolveClaudePath(),
+        includePartialMessages: true,
+        env,
+        ...options,
+        cwd: options?.cwd ?? process.env.REACT_GRAB_CWD ?? process.cwd(),
+        ...claudeSessionId ? { resume: claudeSessionId } : {}
+      }
+    });
+    let capturedClaudeSessionId;
+    for await (const message of queryResult) {
+      if (isAborted2()) break;
+      if (!capturedClaudeSessionId && message.session_id) {
+        capturedClaudeSessionId = message.session_id;
+      }
+      if (message.type === "assistant") {
+        const textContent = message.message.content.filter(isTextBlock).map((block) => block.text).join(" ");
+        if (textContent) {
+          yield { type: "status", content: textContent };
+        }
+      }
+      if (message.type === "result") {
+        yield {
+          type: "status",
+          content: message.subtype === "success" ? COMPLETED_STATUS : "Task finished"
+        };
+      }
+    }
+    if (!isAborted2() && capturedClaudeSessionId) {
+      if (sessionId) {
+        claudeSessionMap.set(sessionId, capturedClaudeSessionId);
+      }
+      lastClaudeSessionId = capturedClaudeSessionId;
+    }
+    if (!isAborted2()) {
+      yield { type: "done", content: "" };
+    }
+  } catch (error) {
+    if (!isAborted2()) {
+      const errorMessage = error instanceof Error ? formatSpawnError(error, "claude") : "Unknown error";
+      const stderr = error instanceof Error && "stderr" in error ? String(error.stderr) : void 0;
+      const fullError = stderr && stderr.trim() ? `${errorMessage}
+
+stderr:
+${stderr.trim()}` : errorMessage;
+      yield { type: "error", content: fullError };
+      yield { type: "done", content: "" };
+    }
+  } finally {
+    if (sessionId) {
+      abortedSessions.delete(sessionId);
+    }
+  }
+};
 var createServer = () => {
   const app = new Hono2();
   app.use("*", cors());
@@ -18189,67 +18260,17 @@ var createServer = () => {
 
 ${content}`;
     return streamSSE(context, async (stream2) => {
-      const isAborted2 = () => sessionId && abortedSessions.has(sessionId);
-      try {
-        await stream2.writeSSE({ data: "Thinking\u2026", event: "status" });
-        const env = { ...process.env };
-        delete env.NODE_OPTIONS;
-        delete env.VSCODE_INSPECTOR_OPTIONS;
-        const queryResult = query({
-          prompt: userPrompt,
-          options: {
-            pathToClaudeCodeExecutable: resolveClaudePath(),
-            includePartialMessages: true,
-            env,
-            ...options,
-            cwd: options?.cwd ?? process.env.REACT_GRAB_CWD ?? process.cwd(),
-            ...isFollowUp && claudeSessionId ? { resume: claudeSessionId } : {}
-          }
-        });
-        let capturedClaudeSessionId;
-        for await (const message of queryResult) {
-          if (isAborted2()) break;
-          if (!capturedClaudeSessionId && message.session_id) {
-            capturedClaudeSessionId = message.session_id;
-          }
-          if (message.type === "assistant") {
-            const textContent = message.message.content.filter(isTextBlock).map((block) => block.text).join(" ");
-            if (textContent) {
-              await stream2.writeSSE({ data: textContent, event: "status" });
-            }
-          }
-          if (message.type === "result") {
-            await stream2.writeSSE({
-              data: message.subtype === "success" ? COMPLETED_STATUS : "Task finished",
-              event: "status"
-            });
-          }
-        }
-        if (!isAborted2() && capturedClaudeSessionId) {
-          if (sessionId) {
-            claudeSessionMap.set(sessionId, capturedClaudeSessionId);
-          }
-          lastClaudeSessionId = capturedClaudeSessionId;
-        }
-        if (!isAborted2()) {
-          await stream2.writeSSE({ data: "", event: "done" });
-        }
-      } catch (error) {
-        if (!isAborted2()) {
-          const errorMessage = error instanceof Error ? formatSpawnError(error, "claude") : "Unknown error";
-          const stderr = error instanceof Error && "stderr" in error ? String(error.stderr) : void 0;
-          const fullError = stderr && stderr.trim() ? `${errorMessage}
-
-stderr:
-${stderr.trim()}` : errorMessage;
+      for await (const message of runAgent(userPrompt, {
+        ...options,
+        sessionId
+      })) {
+        if (message.type === "error") {
           await stream2.writeSSE({
-            data: `Error: ${fullError}`,
+            data: `Error: ${message.content}`,
             event: "error"
           });
-        }
-      } finally {
-        if (sessionId) {
-          abortedSessions.delete(sessionId);
+        } else {
+          await stream2.writeSSE({ data: message.content, event: message.type });
         }
       }
     });
@@ -18304,4 +18325,4 @@ if (import.meta.url === pathToFileURL(process.argv[1]).href) {
   startServer(DEFAULT_PORT).catch(console.error);
 }
 
-export { createServer, startServer };
+export { createServer, runAgent, startServer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-grab/claude-code",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "type": "module",
   "bin": {
     "react-grab-claude-code": "./dist/cli.cjs"
@@ -26,7 +26,7 @@
   "devDependencies": {
     "@types/node": "^22.10.7",
     "tsup": "^8.4.0",
-    "@react-grab/utils": "0.0.87"
+    "@react-grab/utils": "0.0.89"
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.1.0",
@@ -35,7 +35,7 @@
     "fkill": "^9.0.0",
     "hono": "^4.0.0",
     "picocolors": "^1.1.1",
-    "react-grab": "0.0.87"
+    "react-grab": "0.0.89"
   },
   "scripts": {
     "dev": "tsup --watch",