@react-grab/claude-code 0.0.98 → 0.1.0-beta.1

package/dist/client.cjs

@@ -1,243 +1,416 @@
 'use strict';
 
-// ../utils/dist/client.js
-var CONNECTION_CHECK_TTL_MS = 5e3;
-var STORAGE_KEY = "react-grab:agent-sessions";
-var parseSSEEvent = (eventBlock) => {
-  let eventType = "";
-  let data = "";
-  for (const line of eventBlock.split("\n")) {
-    if (line.startsWith("event:")) eventType = line.slice(6).trim();
-    else if (line.startsWith("data:")) data = line.slice(5).trim();
-  }
-  return { eventType, data };
-};
-var streamSSE = async function* (stream, signal) {
-  const reader = stream.getReader();
-  const decoder = new TextDecoder();
-  let buffer = "";
-  let aborted = false;
-  const onAbort = () => {
-    aborted = true;
-    reader.cancel().catch(() => {
-    });
+// ../relay/dist/client.js
+var DEFAULT_RELAY_PORT = 4722;
+var DEFAULT_RECONNECT_INTERVAL_MS = 3e3;
+var RELAY_TOKEN_PARAM = "token";
+var createRelayClient = (options = {}) => {
+  const serverUrl = options.serverUrl ?? `ws://localhost:${DEFAULT_RELAY_PORT}`;
+  const autoReconnect = options.autoReconnect ?? true;
+  const reconnectIntervalMs = options.reconnectIntervalMs ?? DEFAULT_RECONNECT_INTERVAL_MS;
+  const token = options.token;
+  let webSocketConnection = null;
+  let isConnectedState = false;
+  let availableHandlers = [];
+  let reconnectTimeoutId = null;
+  let pendingConnectionPromise = null;
+  let pendingConnectionReject = null;
+  let isIntentionalDisconnect = false;
+  const messageCallbacks = /* @__PURE__ */ new Set();
+  const handlersChangeCallbacks = /* @__PURE__ */ new Set();
+  const connectionChangeCallbacks = /* @__PURE__ */ new Set();
+  const scheduleReconnect = () => {
+    if (!autoReconnect || reconnectTimeoutId || isIntentionalDisconnect) return;
+    reconnectTimeoutId = setTimeout(() => {
+      reconnectTimeoutId = null;
+      connect().catch(() => {
+      });
+    }, reconnectIntervalMs);
   };
-  signal.addEventListener("abort", onAbort);
-  try {
-    if (signal.aborted) {
-      throw new DOMException("Aborted", "AbortError");
-    }
-    while (true) {
-      const result = await reader.read();
-      if (aborted || signal.aborted) {
-        throw new DOMException("Aborted", "AbortError");
+  const handleMessage = (event) => {
+    try {
+      const message = JSON.parse(event.data);
+      if (message.type === "handlers" && message.handlers) {
+        availableHandlers = message.handlers;
+        for (const callback of handlersChangeCallbacks) {
+          callback(availableHandlers);
+        }
       }
-      const { done, value } = result;
-      if (value) buffer += decoder.decode(value, { stream: true });
-      let boundary;
-      while ((boundary = buffer.indexOf("\n\n")) !== -1) {
-        const { eventType, data } = parseSSEEvent(buffer.slice(0, boundary));
-        buffer = buffer.slice(boundary + 2);
-        if (eventType === "done") return;
-        if (eventType === "error") throw new Error(data || "Agent error");
-        if (data) yield data;
+      for (const callback of messageCallbacks) {
+        callback(message);
       }
-      if (done) break;
-    }
-  } finally {
-    signal.removeEventListener("abort", onAbort);
-    try {
-      reader.releaseLock();
     } catch {
     }
-  }
-};
-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 (!Array.isArray(content) || typeof prompt !== "string") {
-    throw new Error(`Session ${sessionId} is invalid`);
-  }
-  const options = context.options;
-  const storedSessionId = context.sessionId;
+  };
+  const connect = () => {
+    if (webSocketConnection?.readyState === WebSocket.OPEN) {
+      return Promise.resolve();
+    }
+    if (pendingConnectionPromise) {
+      return pendingConnectionPromise;
+    }
+    isIntentionalDisconnect = false;
+    pendingConnectionPromise = new Promise((resolve, reject) => {
+      pendingConnectionReject = reject;
+      const connectionUrl = token ? `${serverUrl}?${RELAY_TOKEN_PARAM}=${encodeURIComponent(token)}` : serverUrl;
+      webSocketConnection = new WebSocket(connectionUrl);
+      webSocketConnection.onopen = () => {
+        pendingConnectionPromise = null;
+        pendingConnectionReject = null;
+        isConnectedState = true;
+        for (const callback of connectionChangeCallbacks) {
+          callback(true);
+        }
+        resolve();
+      };
+      webSocketConnection.onmessage = handleMessage;
+      webSocketConnection.onclose = () => {
+        if (pendingConnectionReject) {
+          pendingConnectionReject(new Error("WebSocket connection closed"));
+          pendingConnectionReject = null;
+        }
+        pendingConnectionPromise = null;
+        isConnectedState = false;
+        availableHandlers = [];
+        for (const callback of handlersChangeCallbacks) {
+          callback(availableHandlers);
+        }
+        for (const callback of connectionChangeCallbacks) {
+          callback(false);
+        }
+        scheduleReconnect();
+      };
+      webSocketConnection.onerror = () => {
+        pendingConnectionPromise = null;
+        pendingConnectionReject = null;
+        isConnectedState = false;
+        reject(new Error("WebSocket connection failed"));
+      };
+    });
+    return pendingConnectionPromise;
+  };
+  const disconnect = () => {
+    isIntentionalDisconnect = true;
+    if (reconnectTimeoutId) {
+      clearTimeout(reconnectTimeoutId);
+      reconnectTimeoutId = null;
+    }
+    if (pendingConnectionReject) {
+      pendingConnectionReject(new Error("Connection aborted"));
+      pendingConnectionReject = null;
+    }
+    pendingConnectionPromise = null;
+    webSocketConnection?.close();
+    webSocketConnection = null;
+    isConnectedState = false;
+    availableHandlers = [];
+  };
+  const isConnected = () => isConnectedState;
+  const sendMessage = (message) => {
+    if (webSocketConnection?.readyState === WebSocket.OPEN) {
+      webSocketConnection.send(JSON.stringify(message));
+      return true;
+    }
+    return false;
+  };
+  const sendAgentRequest = (agentId, context) => {
+    return sendMessage({
+      type: "agent-request",
+      agentId,
+      sessionId: context.sessionId,
+      context
+    });
+  };
+  const abortAgent = (agentId, sessionId) => {
+    sendMessage({
+      type: "agent-abort",
+      agentId,
+      sessionId
+    });
+  };
+  const undoAgent = (agentId, sessionId) => {
+    return sendMessage({
+      type: "agent-undo",
+      agentId,
+      sessionId
+    });
+  };
+  const redoAgent = (agentId, sessionId) => {
+    return sendMessage({
+      type: "agent-redo",
+      agentId,
+      sessionId
+    });
+  };
+  const onMessage = (callback) => {
+    messageCallbacks.add(callback);
+    return () => messageCallbacks.delete(callback);
+  };
+  const onHandlersChange = (callback) => {
+    handlersChangeCallbacks.add(callback);
+    return () => handlersChangeCallbacks.delete(callback);
+  };
+  const onConnectionChange = (callback) => {
+    connectionChangeCallbacks.add(callback);
+    queueMicrotask(() => {
+      if (connectionChangeCallbacks.has(callback)) {
+        callback(isConnectedState);
+      }
+    });
+    return () => connectionChangeCallbacks.delete(callback);
+  };
+  const getAvailableHandlers = () => availableHandlers;
   return {
-    content,
-    prompt,
-    options,
-    sessionId: typeof storedSessionId === "string" ? storedSessionId : void 0
+    connect,
+    disconnect,
+    isConnected,
+    sendAgentRequest,
+    abortAgent,
+    undoAgent,
+    redoAgent,
+    onMessage,
+    onHandlersChange,
+    onConnectionChange,
+    getAvailableHandlers
   };
 };
-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) return;
-    const abortPath = options.abortPath?.(sessionId) ?? `/abort/${sessionId}`;
-    fetch(`${options.serverUrl}${abortPath}`, { method: "POST" }).catch(
-      () => {
+var createRelayAgentProvider = (options) => {
+  const { relayClient, agentId } = options;
+  const checkConnection = async () => {
+    if (!relayClient.isConnected()) {
+      try {
+        await relayClient.connect();
+      } catch {
+        return false;
       }
-    );
-  };
-  signal.addEventListener("abort", handleAbort);
-  try {
-    const response = await fetch(agentUrl, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(context),
-      signal
-    });
-    if (!response.ok) {
-      throw new Error(`Server error: ${response.status}`);
     }
-    if (!response.body) {
-      throw new Error("No response body");
+    return relayClient.getAvailableHandlers().includes(agentId);
+  };
+  const send = async function* (context, signal) {
+    if (signal.aborted) {
+      throw new DOMException("Aborted", "AbortError");
     }
-    const iterator = streamSSE(response.body, signal)[Symbol.asyncIterator]();
+    yield "Connecting\u2026";
+    const sessionId = context.sessionId ?? `session-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const contextWithSession = {
+      ...context,
+      sessionId
+    };
+    const messageQueue = [];
+    let resolveNextMessage = null;
+    let rejectNextMessage = null;
     let isDone = false;
-    let pendingNext = iterator.next();
-    let lastStatus = null;
-    while (!isDone) {
-      const result = await Promise.race([
-        pendingNext.then((iteratorResult) => ({
-          type: "status",
-          iteratorResult
-        })),
-        new Promise(
-          (resolve) => setTimeout(() => resolve({ type: "timeout" }), pollIntervalMs)
-        )
-      ]);
-      const elapsedSeconds = (Date.now() - startTime) / 1e3;
-      if (result.type === "status") {
-        const iteratorResult = result.iteratorResult;
-        isDone = iteratorResult.done ?? false;
-        if (!isDone && iteratorResult.value) {
-          lastStatus = iteratorResult.value;
-          pendingNext = iterator.next();
+    let errorMessage = null;
+    const handleAbort = () => {
+      relayClient.abortAgent(agentId, sessionId);
+      isDone = true;
+      if (resolveNextMessage) {
+        resolveNextMessage({ value: void 0, done: true });
+        resolveNextMessage = null;
+        rejectNextMessage = null;
+      }
+    };
+    signal.addEventListener("abort", handleAbort);
+    const handleConnectionChange = (connected) => {
+      if (!connected && !isDone) {
+        errorMessage = "Relay connection lost";
+        isDone = true;
+        if (rejectNextMessage) {
+          rejectNextMessage(new Error(errorMessage));
+          resolveNextMessage = null;
+          rejectNextMessage = null;
         }
       }
-      if (lastStatus === options.completedStatus) {
-        yield `Completed in ${elapsedSeconds.toFixed(1)}s`;
-      } else if (lastStatus) {
-        yield `${lastStatus} ${elapsedSeconds.toFixed(1)}s`;
-      } else {
-        yield `Working\u2026 ${elapsedSeconds.toFixed(1)}s`;
+    };
+    const unsubscribeConnection = relayClient.onConnectionChange(
+      handleConnectionChange
+    );
+    const unsubscribeMessage = relayClient.onMessage((message) => {
+      if (message.sessionId !== sessionId) return;
+      if (message.type === "agent-status" && message.content) {
+        messageQueue.push(message.content);
+        if (resolveNextMessage) {
+          const nextMessage = messageQueue.shift();
+          if (nextMessage !== void 0) {
+            resolveNextMessage({ value: nextMessage, done: false });
+            resolveNextMessage = null;
+            rejectNextMessage = null;
+          }
+        }
+      } else if (message.type === "agent-done") {
+        isDone = true;
+        if (resolveNextMessage) {
+          resolveNextMessage({ value: void 0, done: true });
+          resolveNextMessage = null;
+          rejectNextMessage = null;
+        }
+      } else if (message.type === "agent-error") {
+        errorMessage = message.content ?? "Unknown error";
+        isDone = true;
+        if (rejectNextMessage) {
+          rejectNextMessage(new Error(errorMessage));
+          resolveNextMessage = null;
+          rejectNextMessage = null;
+        }
       }
+    });
+    if (!relayClient.isConnected()) {
+      unsubscribeConnection();
+      unsubscribeMessage();
+      signal.removeEventListener("abort", handleAbort);
+      throw new Error("Relay connection is not open");
+    }
+    const didSendRequest = relayClient.sendAgentRequest(agentId, contextWithSession);
+    if (!didSendRequest) {
+      unsubscribeConnection();
+      unsubscribeMessage();
+      signal.removeEventListener("abort", handleAbort);
+      throw new Error("Failed to send agent request: connection not open");
     }
-  } 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;
+      while (true) {
+        if (messageQueue.length > 0) {
+          const next = messageQueue.shift();
+          if (next !== void 0) {
+            yield next;
+          }
+          continue;
+        }
+        if (isDone || signal.aborted) {
+          break;
+        }
+        const result = await new Promise(
+          (resolve, reject) => {
+            resolveNextMessage = resolve;
+            rejectNextMessage = reject;
+          }
+        );
+        if (result.done) break;
+        yield result.value;
+      }
+      if (errorMessage) {
+        throw new Error(errorMessage);
+      }
+    } finally {
+      signal.removeEventListener("abort", handleAbort);
+      unsubscribeConnection();
+      unsubscribeMessage();
+    }
+  };
+  const abort = async (sessionId) => {
+    relayClient.abortAgent(agentId, sessionId);
+  };
+  const waitForOperationResponse = (sessionId) => {
+    return new Promise((resolve, reject) => {
+      let didCleanup = false;
+      const cleanup = () => {
+        if (didCleanup) return;
+        didCleanup = true;
+        unsubscribeMessage();
+        unsubscribeConnection();
+      };
+      const unsubscribeMessage = relayClient.onMessage((message) => {
+        if (message.sessionId !== sessionId) return;
+        cleanup();
+        if (message.type === "agent-done") {
+          resolve();
+        } else if (message.type === "agent-error") {
+          reject(new Error(message.content ?? "Operation failed"));
+        }
+      });
+      const unsubscribeConnection = relayClient.onConnectionChange((connected) => {
+        if (!connected) {
+          cleanup();
+          reject(new Error("Connection lost while waiting for operation response"));
+        }
+      });
+    });
+  };
+  const undo = async () => {
+    const sessionId = `undo-${agentId}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const didSend = relayClient.undoAgent(agentId, sessionId);
+    if (!didSend) {
+      throw new Error("Failed to send undo request: connection not open");
+    }
+    return waitForOperationResponse(sessionId);
+  };
+  const redo = async () => {
+    const sessionId = `redo-${agentId}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const didSend = relayClient.redoAgent(agentId, sessionId);
+    if (!didSend) {
+      throw new Error("Failed to send redo request: connection not open");
     }
+    return waitForOperationResponse(sessionId);
+  };
+  return {
+    send,
+    abort,
+    undo,
+    redo,
+    checkConnection,
+    supportsResume: true,
+    supportsFollowUp: true
   };
 };
-
-// src/constants.ts
-var DEFAULT_PORT = 4567;
-var COMPLETED_STATUS = "Completed successfully";
+var defaultRelayClient = null;
+var getDefaultRelayClient = () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (window.__REACT_GRAB_RELAY__) {
+    defaultRelayClient = window.__REACT_GRAB_RELAY__;
+    return defaultRelayClient;
+  }
+  if (!defaultRelayClient) {
+    defaultRelayClient = createRelayClient();
+    window.__REACT_GRAB_RELAY__ = defaultRelayClient;
+  }
+  return defaultRelayClient;
+};
 
 // 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 AGENT_ID = "claude-code";
+var isReactGrabApi = (value) => typeof value === "object" && value !== null && "registerPlugin" in value;
 var createClaudeAgentProvider = (providerOptions = {}) => {
-  const { serverUrl = DEFAULT_SERVER_URL, getOptions } = providerOptions;
-  const mergeOptions = (contextOptions) => ({
-    ...DEFAULT_OPTIONS,
-    ...getOptions?.() ?? {},
-    ...contextOptions ?? {}
+  const relayClient = providerOptions.relayClient ?? getDefaultRelayClient();
+  if (!relayClient) {
+    throw new Error("RelayClient is required in browser environments");
+  }
+  return createRelayAgentProvider({
+    relayClient,
+    agentId: AGENT_ID
   });
-  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* streamAgentStatusFromServer(
-        { serverUrl, completedStatus: COMPLETED_STATUS },
-        mergedContext,
-        signal
-      );
-    },
-    resume: async function* (sessionId, signal, storage) {
-      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* streamAgentStatusFromServer(
-        { serverUrl, completedStatus: COMPLETED_STATUS },
-        mergedContext,
-        signal
-      );
-    },
-    supportsResume: true,
-    supportsFollowUp: true,
-    checkConnection,
-    undo: async () => {
-      try {
-        await fetch(`${serverUrl}/undo`, { method: "POST" });
-      } catch {
-      }
-    }
-  };
 };
 var attachAgent = async () => {
   if (typeof window === "undefined") return;
-  const provider = createClaudeAgentProvider();
+  const relayClient = getDefaultRelayClient();
+  if (!relayClient) return;
+  try {
+    await relayClient.connect();
+  } catch {
+    return;
+  }
+  const provider = createRelayAgentProvider({
+    relayClient,
+    agentId: AGENT_ID
+  });
   const attach = (api) => {
-    api.setAgent({ provider, storage: sessionStorage });
+    const agent = { provider, storage: sessionStorage };
+    const plugin = {
+      name: "claude-code-agent",
+      actions: [
+        {
+          id: "edit-with-claude-code",
+          label: "Edit with Claude",
+          shortcut: "Enter",
+          onAction: (actionContext) => {
+            actionContext.enterPromptMode?.(agent);
+          },
+          agent
+        }
+      ]
+    };
+    api.registerPlugin(plugin);
   };
   const existingApi = window.__REACT_GRAB__;
   if (isReactGrabApi(existingApi)) {

package/dist/client.d.cts

@@ -1,20 +1,11 @@
-import { init, AgentContext, AgentSessionStorage } from 'react-grab/core';
+import { init } from 'react-grab/core';
 export { AgentCompleteResult } from 'react-grab/core';
-import { Options } from '@anthropic-ai/claude-agent-sdk';
+import { RelayClient, AgentProvider } from '@react-grab/relay/client';
 
-type ClaudeAgentContext = AgentContext<Options>;
 interface ClaudeAgentProviderOptions {
-    serverUrl?: string;
-    getOptions?: () => Partial<Options>;
+    relayClient?: RelayClient;
 }
-declare const createClaudeAgentProvider: (providerOptions?: ClaudeAgentProviderOptions) => {
-    send: (context: ClaudeAgentContext, signal: AbortSignal) => AsyncGenerator<string, void, unknown>;
-    resume: (sessionId: string, signal: AbortSignal, storage: AgentSessionStorage) => AsyncGenerator<string, void, unknown>;
-    supportsResume: boolean;
-    supportsFollowUp: boolean;
-    checkConnection: () => Promise<boolean>;
-    undo: () => Promise<void>;
-};
+declare const createClaudeAgentProvider: (providerOptions?: ClaudeAgentProviderOptions) => AgentProvider;
 declare global {
     interface Window {
         __REACT_GRAB__?: ReturnType<typeof init>;

package/dist/client.d.ts

@@ -1,20 +1,11 @@
-import { init, AgentContext, AgentSessionStorage } from 'react-grab/core';
+import { init } from 'react-grab/core';
 export { AgentCompleteResult } from 'react-grab/core';
-import { Options } from '@anthropic-ai/claude-agent-sdk';
+import { RelayClient, AgentProvider } from '@react-grab/relay/client';
 
-type ClaudeAgentContext = AgentContext<Options>;
 interface ClaudeAgentProviderOptions {
-    serverUrl?: string;
-    getOptions?: () => Partial<Options>;
+    relayClient?: RelayClient;
 }
-declare const createClaudeAgentProvider: (providerOptions?: ClaudeAgentProviderOptions) => {
-    send: (context: ClaudeAgentContext, signal: AbortSignal) => AsyncGenerator<string, void, unknown>;
-    resume: (sessionId: string, signal: AbortSignal, storage: AgentSessionStorage) => AsyncGenerator<string, void, unknown>;
-    supportsResume: boolean;
-    supportsFollowUp: boolean;
-    checkConnection: () => Promise<boolean>;
-    undo: () => Promise<void>;
-};
+declare const createClaudeAgentProvider: (providerOptions?: ClaudeAgentProviderOptions) => AgentProvider;
 declare global {
     interface Window {
         __REACT_GRAB__?: ReturnType<typeof init>;