@giselles-ai/sandbox-agent 0.1.6 → 0.1.7

package/dist/index.d.ts

@@ -1,10 +1,51 @@
-type AgentRunnerOptions = {
-    apiKey?: string;
-    baseUrl?: string;
+import { z } from 'zod';
+import { Sandbox } from '@vercel/sandbox';
+
+type BaseChatRequest = {
+    message: string;
+    session_id?: string;
+    sandbox_id?: string;
+};
+type ChatCommand = {
+    cmd: string;
+    args: string[];
+    env?: Record<string, string>;
+};
+type ChatAgent<TRequest extends BaseChatRequest> = {
+    requestSchema: z.ZodType<TRequest>;
+    snapshotId?: string;
+    prepareSandbox(input: {
+        input: TRequest;
+        sandbox: Sandbox;
+    }): Promise<void>;
+    createCommand(input: {
+        input: TRequest;
+    }): ChatCommand;
 };
-type AgentRunnerHandler = {
-    POST: (request: Request) => Promise<Response>;
+type RunChatInput<TRequest extends BaseChatRequest> = {
+    agent: ChatAgent<TRequest>;
+    signal: AbortSignal;
+    input: TRequest;
+};
+declare function runChat<TRequest extends BaseChatRequest>(input: RunChatInput<TRequest>): Promise<Response>;
+
+declare const geminiRequestSchema: z.ZodObject<{
+    message: z.ZodString;
+    session_id: z.ZodOptional<z.ZodString>;
+    sandbox_id: z.ZodOptional<z.ZodString>;
+    relay_session_id: z.ZodOptional<z.ZodString>;
+    relay_token: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+type GeminiAgentRequest = z.infer<typeof geminiRequestSchema>;
+type GeminiAgentOptions = {
+    snapshotId?: string;
+    env?: Record<string, string>;
+    tools?: {
+        browser?: {
+            relayUrl?: string;
+        };
+    };
 };
-declare function handleAgentRunner(options?: AgentRunnerOptions): AgentRunnerHandler;
+declare function createGeminiAgent(options?: GeminiAgentOptions): ChatAgent<GeminiAgentRequest>;
 
-export { type AgentRunnerHandler, type AgentRunnerOptions, handleAgentRunner };
+export { type BaseChatRequest, type ChatAgent, type ChatCommand, type RunChatInput, createGeminiAgent, runChat };

package/dist/index.js

@@ -1,201 +1,241 @@
-// src/index.ts
+// src/agents/gemini-agent.ts
 import { z } from "zod";
-var DEFAULT_ENDPOINT = "https://studio.giselles.ai/agent-api";
-var DEBUG_ENABLED = process.env.GISELLE_AGENT_DEBUG === "true" || process.env.DEBUG === "1";
-function debugLog(context, message) {
-  if (!DEBUG_ENABLED) {
-    return;
-  }
-  console.info("[agent-runner]", JSON.stringify({ ...context, message }));
-}
-var agentRunSchema = z.object({
-  type: z.literal("agent.run"),
+var GEMINI_SETTINGS_PATH = "/home/vercel-sandbox/.gemini/settings.json";
+var geminiRequestSchema = z.object({
   message: z.string().min(1),
-  document: z.string().optional(),
   session_id: z.string().min(1).optional(),
-  sandbox_id: z.string().min(1).optional()
+  sandbox_id: z.string().min(1).optional(),
+  relay_session_id: z.string().min(1).optional(),
+  relay_token: z.string().min(1).optional()
 });
-function invalidRequestResponse(detail) {
-  return Response.json(
-    {
-      ok: false,
-      errorCode: "INVALID_REQUEST",
-      message: "Invalid request payload.",
-      error: detail
-    },
-    { status: 400 }
-  );
-}
-function invalidConfigResponse(message) {
-  return Response.json(
-    {
-      ok: false,
-      errorCode: "INVALID_CONFIG",
-      message
-    },
-    { status: 500 }
-  );
+function requiredEnv(env, name) {
+  const value = env[name]?.trim();
+  if (!value) {
+    throw new Error(`Missing required environment variable: ${name}`);
+  }
+  return value;
 }
-function badGatewayResponse(message) {
-  return Response.json(
+async function patchGeminiSettingsTransportEnv(sandbox, bridgeTransportEnv) {
+  const buffer = await sandbox.readFileToBuffer({
+    path: GEMINI_SETTINGS_PATH
+  });
+  if (!buffer) {
+    throw new Error(
+      `Gemini settings not found in sandbox at ${GEMINI_SETTINGS_PATH}. Ensure the snapshot contains a pre-configured settings.json.`
+    );
+  }
+  const settings = JSON.parse(new TextDecoder().decode(buffer));
+  if (settings.mcpServers) {
+    settings.mcpServers = Object.fromEntries(
+      Object.entries(settings.mcpServers).map(([key, server]) => [
+        key,
+        {
+          ...server,
+          env: { ...server.env, ...bridgeTransportEnv }
+        }
+      ])
+    );
+  }
+  await sandbox.writeFiles([
     {
-      ok: false,
-      errorCode: "UPSTREAM_UNAVAILABLE",
-      message
-    },
-    { status: 502 }
-  );
-}
-function resolveApiKey(input) {
-  return input?.apiKey?.trim() || process.env.GISELLE_SANDBOX_AGENT_API_KEY?.trim() || process.env.GISELLE_API_KEY?.trim() || "";
+      path: GEMINI_SETTINGS_PATH,
+      content: Buffer.from(JSON.stringify(settings, null, 2))
+    }
+  ]);
 }
-function parseAbsoluteEndpoint(baseUrl) {
-  try {
-    const url = new URL(baseUrl);
-    if (url.protocol !== "http:" && url.protocol !== "https:") {
-      return null;
+function createGeminiRequestSchema(browserEnabled) {
+  if (!browserEnabled) {
+    return geminiRequestSchema;
+  }
+  return geminiRequestSchema.superRefine((value, ctx) => {
+    if (!value.relay_session_id) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["relay_session_id"],
+        message: "relay_session_id is required when tools.browser is enabled."
+      });
+    }
+    if (!value.relay_token) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["relay_token"],
+        message: "relay_token is required when tools.browser is enabled."
+      });
     }
-    return url.toString();
-  } catch {
-    return null;
+  });
+}
+function assertBrowserToolRelayCredentials(parsed) {
+  if (!parsed.relay_session_id || !parsed.relay_token) {
+    throw new Error("relay_session_id and relay_token are required.");
   }
 }
-function resolveEndpoint(input) {
-  const baseUrl = input.baseUrl?.trim();
-  if (baseUrl) {
-    const endpoint = parseAbsoluteEndpoint(baseUrl);
-    if (!endpoint) {
+function createGeminiAgent(options = {}) {
+  const env = options.env ?? {};
+  const snapshotId = options.snapshotId?.trim() || requiredEnv(env, "SANDBOX_SNAPSHOT_ID");
+  const browserToolEnabled = options.tools?.browser !== void 0;
+  const browserToolRelayUrl = options.tools?.browser?.relayUrl?.trim();
+  if (browserToolEnabled) {
+    requiredEnv(env, "BROWSER_TOOL_RELAY_URL");
+    requiredEnv(env, "BROWSER_TOOL_RELAY_SESSION_ID");
+    requiredEnv(env, "BROWSER_TOOL_RELAY_TOKEN");
+  }
+  if (browserToolEnabled && !browserToolRelayUrl) {
+    throw new Error("tools.browser.relayUrl is empty.");
+  }
+  return {
+    requestSchema: createGeminiRequestSchema(browserToolEnabled),
+    snapshotId,
+    async prepareSandbox({ input, sandbox }) {
+      if (!browserToolEnabled) {
+        return;
+      }
+      requiredEnv(env, "VERCEL_OIDC_TOKEN");
+      assertBrowserToolRelayCredentials(input);
+      await patchGeminiSettingsTransportEnv(sandbox, env);
+    },
+    createCommand({ input }) {
+      const args = [
+        "--prompt",
+        input.message,
+        "--output-format",
+        "stream-json",
+        "--approval-mode",
+        "yolo"
+      ];
+      if (input.session_id) {
+        args.push("--resume", input.session_id);
+      }
       return {
-        ok: false,
-        message: "`baseUrl` must be an absolute HTTP(S) endpoint URL, e.g. https://studio.giselles.ai/agent-api."
+        cmd: "gemini",
+        args,
+        env: {
+          GEMINI_API_KEY: requiredEnv(env, "GEMINI_API_KEY")
+        }
       };
     }
-    debugLog(
-      {
-        baseUrl: input.baseUrl
-      },
-      `resolveEndpoint: using baseUrl -> ${endpoint}`
-    );
-    return { ok: true, endpoint };
+  };
+}
+
+// src/chat-run.ts
+import { Writable } from "stream";
+import { Sandbox } from "@vercel/sandbox";
+function emitText(controller, text, encoder) {
+  if (text.length === 0) {
+    return;
   }
-  debugLog(
-    {
-      baseUrl: input.baseUrl
-    },
-    `resolveEndpoint: using default -> ${DEFAULT_ENDPOINT}`
-  );
-  return { ok: true, endpoint: DEFAULT_ENDPOINT };
+  controller.enqueue(encoder.encode(text));
 }
-function handleAgentRunner(options) {
-  const apiKey = resolveApiKey(options);
-  const optionSnapshot = {
-    baseUrl: options?.baseUrl?.trim(),
-    hasApiKey: Boolean(apiKey),
-    hasInlineApiKey: Boolean(options?.apiKey?.trim()),
-    hasEnvApiKey: Boolean(process.env.GISELLE_SANDBOX_AGENT_API_KEY?.trim()) || Boolean(process.env.GISELLE_API_KEY?.trim())
-  };
-  debugLog(
-    optionSnapshot,
-    `handleAgentRunner initialized (${options ? "custom options" : "default options"})`
-  );
-  return {
-    POST: async (request) => {
-      debugLog(
-        {
-          baseUrl: optionSnapshot.baseUrl
-        },
-        `POST request start: host=${new URL(request.url).host}`
-      );
-      const payload = await request.json().catch(() => null);
-      const parsed = agentRunSchema.safeParse(payload);
-      if (!parsed.success) {
-        debugLog(
-          {
-            baseUrl: optionSnapshot.baseUrl
-          },
-          `payload invalid: ${parsed.error.issues.length} issues`
-        );
-        return invalidRequestResponse(parsed.error.flatten());
-      }
-      const endpointResult = resolveEndpoint({
-        baseUrl: options?.baseUrl
-      });
-      if (!endpointResult.ok) {
-        debugLog(
-          {
-            baseUrl: optionSnapshot.baseUrl
-          },
-          `invalid endpoint config: ${endpointResult.message}`
-        );
-        return invalidConfigResponse(endpointResult.message);
-      }
-      debugLog(
-        {
-          baseUrl: optionSnapshot.baseUrl
-        },
-        `POST forwarding to endpoint: ${endpointResult.endpoint}`
-      );
-      const headers = {
-        "content-type": "application/json"
+function emitEvent(controller, payload, encoder) {
+  emitText(controller, `${JSON.stringify(payload)}
+`, encoder);
+}
+function runChat(input) {
+  const parsed = input.input;
+  const stream = new ReadableStream({
+    start(controller) {
+      const encoder = new TextEncoder();
+      const abortController = new AbortController();
+      let closed = false;
+      const close = () => {
+        if (closed) {
+          return;
+        }
+        closed = true;
+        try {
+          controller.close();
+        } catch {
+        }
       };
-      if (apiKey) {
-        headers.authorization = `Bearer ${apiKey}`;
-        debugLog(
-          {
-            baseUrl: optionSnapshot.baseUrl
-          },
-          "Authorization header attached"
-        );
-      } else {
-        debugLog(
-          {
-            baseUrl: optionSnapshot.baseUrl
-          },
-          "Authorization header skipped (apiKey missing)"
-        );
-      }
-      let upstreamResponse;
-      try {
-        upstreamResponse = await fetch(endpointResult.endpoint, {
-          method: "POST",
-          headers,
-          body: JSON.stringify(parsed.data),
-          signal: request.signal
-        });
-      } catch (error) {
-        debugLog(
-          {
-            baseUrl: optionSnapshot.baseUrl
-          },
-          `upstream fetch failed: ${error instanceof Error ? error.message : String(error)}`
-        );
-        const message = error instanceof Error ? error.message : "Failed to connect to upstream API.";
-        return badGatewayResponse(message);
+      const onAbort = () => {
+        if (!abortController.signal.aborted) {
+          abortController.abort();
+        }
+        close();
+      };
+      if (input.signal.aborted) {
+        onAbort();
+        return;
       }
-      debugLog(
-        {
-          baseUrl: optionSnapshot.baseUrl
-        },
-        `upstream responded: status=${upstreamResponse.status}, content-type=${upstreamResponse.headers.get("content-type") ?? "(none)"}, content-encoding=${upstreamResponse.headers.get("content-encoding") ?? "(none)"}`
-      );
-      const responseHeaders = new Headers(upstreamResponse.headers);
-      responseHeaders.delete("content-encoding");
-      responseHeaders.delete("Content-Encoding");
-      responseHeaders.delete("content-length");
-      responseHeaders.delete("transfer-encoding");
-      responseHeaders.set(
-        "Content-Type",
-        responseHeaders.get("Content-Type") ?? "application/x-ndjson; charset=utf-8"
-      );
-      responseHeaders.set("Cache-Control", "no-cache, no-transform");
-      return new Response(upstreamResponse.body, {
-        status: upstreamResponse.status,
-        statusText: upstreamResponse.statusText,
-        headers: responseHeaders
-      });
+      input.signal.addEventListener("abort", onAbort);
+      const enqueueEvent = (payload) => {
+        if (closed) {
+          return;
+        }
+        emitEvent(controller, payload, encoder);
+      };
+      const enqueueStdout = (text) => {
+        if (closed) {
+          return;
+        }
+        emitText(controller, text, encoder);
+      };
+      void (async () => {
+        try {
+          const sandbox = parsed.sandbox_id ? await Sandbox.get({ sandboxId: parsed.sandbox_id }) : await (async () => {
+            const snapshotId = input.agent.snapshotId?.trim();
+            if (!snapshotId) {
+              throw new Error(
+                "Agent must provide snapshotId when sandbox_id is not provided."
+              );
+            }
+            return Sandbox.create({
+              source: {
+                type: "snapshot",
+                snapshotId
+              }
+            });
+          })();
+          enqueueEvent({ type: "sandbox", sandbox_id: sandbox.sandboxId });
+          await input.agent.prepareSandbox({
+            input: parsed,
+            sandbox
+          });
+          const command = input.agent.createCommand({
+            input: parsed
+          });
+          await sandbox.runCommand({
+            cmd: command.cmd,
+            args: command.args,
+            env: command.env ?? {},
+            stdout: new Writable({
+              write(chunk, _encoding, callback) {
+                const text = typeof chunk === "string" ? chunk : chunk.toString("utf8");
+                enqueueStdout(text);
+                callback();
+              }
+            }),
+            stderr: new Writable({
+              write(chunk, _encoding, callback) {
+                const text = typeof chunk === "string" ? chunk : chunk.toString("utf8");
+                enqueueEvent({ type: "stderr", content: text });
+                callback();
+              }
+            }),
+            signal: abortController.signal
+          });
+        } catch (error) {
+          if (abortController.signal.aborted) {
+            return;
+          }
+          const message = error instanceof Error ? error.message : String(error);
+          enqueueEvent({ type: "stderr", content: `[error] ${message}` });
+        } finally {
+          input.signal.removeEventListener("abort", onAbort);
+          close();
+        }
+      })();
     }
-  };
+  });
+  return Promise.resolve(
+    new Response(stream, {
+      headers: {
+        "Content-Type": "application/x-ndjson; charset=utf-8",
+        "Cache-Control": "no-cache, no-transform"
+      }
+    })
+  );
 }
 export {
-  handleAgentRunner
+  createGeminiAgent,
+  runChat
 };

package/dist/react/index.d.ts

@@ -1,44 +1,12 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, Dispatch, SetStateAction } from 'react';
-import { BrowserToolStatus, SnapshotField, BrowserToolAction, ExecutionReport } from '@giselles-ai/browser-tool';
-
-type PromptPanelProps = {
-    defaultInstruction?: string;
-    defaultDocument?: string;
-    mount?: "bottom-right" | "inline";
-};
-declare function PromptPanel({ defaultInstruction, defaultDocument, mount, }: PromptPanelProps): react_jsx_runtime.JSX.Element;
-
-type RunInput = {
-    instruction: string;
-    document?: string;
-};
-type BrowserToolPlan = {
-    fields: SnapshotField[];
-    actions: BrowserToolAction[];
-    warnings: string[];
-};
-type BrowserToolProviderProps = {
-    endpoint: string;
-    children: ReactNode;
-};
-type BrowserToolContextValue = {
-    endpoint: string;
-    status: BrowserToolStatus;
-    lastPlan: BrowserToolPlan | null;
-    lastExecution: ExecutionReport | null;
-    error: string | null;
-    setError: Dispatch<SetStateAction<string | null>>;
-    run: (input: RunInput) => Promise<BrowserToolPlan>;
-    apply: (actions: BrowserToolAction[], fields: SnapshotField[]) => ExecutionReport;
-};
-declare function BrowserToolProvider({ endpoint, children, }: BrowserToolProviderProps): react_jsx_runtime.JSX.Element;
-
 type AgentMessage = {
     id: string;
     role: "user" | "assistant";
     content: string;
 };
+type StreamEvent = {
+    type?: string;
+    [key: string]: unknown;
+};
 type ToolEvent = {
     id: string;
     toolId: string;
@@ -49,8 +17,17 @@ type ToolEvent = {
 };
 type RelayStatus = "idle" | "connecting" | "connected" | "error";
 type AgentStatus = RelayStatus | "running";
+type AgentToolContext = {
+    sendRelayResponse: (payload: Record<string, unknown>) => Promise<void>;
+    setError: (message: string) => void;
+    addWarnings: (warnings: string[]) => void;
+};
+type AgentToolHandler = {
+    handleRelayRequest: (event: StreamEvent, context: AgentToolContext) => Promise<boolean>;
+};
 type UseAgentOptions = {
     endpoint: string;
+    tools?: Record<string, AgentToolHandler>;
 };
 type AgentHookState = {
     status: AgentStatus;
@@ -66,8 +43,6 @@ type AgentHookState = {
         document?: string;
     }) => Promise<void>;
 };
-declare function useAgent({ endpoint }: UseAgentOptions): AgentHookState;
-
-declare function useBrowserTool(): BrowserToolContextValue;
+declare function useAgent({ endpoint, tools }: UseAgentOptions): AgentHookState;
 
-export { type AgentHookState, type AgentMessage, type AgentStatus, BrowserToolProvider, PromptPanel, type ToolEvent, type UseAgentOptions, useAgent, useBrowserTool };
+export { type AgentHookState, type AgentMessage, type AgentStatus, type AgentToolContext, type AgentToolHandler, type ToolEvent, type UseAgentOptions, useAgent };

package/dist/react/index.js

@@ -1,302 +1,7 @@
-// src/react/prompt-panel.tsx
-import { useMemo as useMemo2, useState as useState2 } from "react";
-
-// src/react/use-browser-tool.ts
-import { useContext } from "react";
-
-// src/react/provider.tsx
-import { execute, snapshot } from "@giselles-ai/browser-tool/dom";
-import {
-  createContext,
-  useCallback,
-  useMemo,
-  useState
-} from "react";
-import { jsx } from "react/jsx-runtime";
-var BrowserToolContext = createContext(
-  null
-);
-function isRecord(value) {
-  return Boolean(value) && typeof value === "object";
-}
-function isAction(value) {
-  if (!isRecord(value) || typeof value.action !== "string" || typeof value.fieldId !== "string") {
-    return false;
-  }
-  if (value.action === "click") {
-    return true;
-  }
-  if ((value.action === "fill" || value.action === "select") && typeof value.value === "string") {
-    return true;
-  }
-  return false;
-}
-function parseWarnings(value) {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-  return value.filter((item) => typeof item === "string");
-}
-function BrowserToolProvider({
-  endpoint,
-  children
-}) {
-  const [status, setStatus] = useState("idle");
-  const [lastPlan, setLastPlan] = useState(null);
-  const [lastExecution, setLastExecution] = useState(
-    null
-  );
-  const [error, setError] = useState(null);
-  const run = useCallback(
-    async ({ instruction, document }) => {
-      const trimmedInstruction = instruction.trim();
-      if (!trimmedInstruction) {
-        throw new Error("Instruction is required.");
-      }
-      setError(null);
-      setStatus("snapshotting");
-      try {
-        const fields = snapshot();
-        setStatus("planning");
-        const response = await fetch(endpoint, {
-          method: "POST",
-          headers: {
-            "content-type": "application/json"
-          },
-          body: JSON.stringify({
-            instruction: trimmedInstruction,
-            document: document?.trim() ? document.trim() : void 0,
-            fields
-          })
-        });
-        const payload = await response.json().catch(() => null);
-        if (!response.ok) {
-          const message = isRecord(payload) && typeof payload.error === "string" ? payload.error : `Planning failed with status ${response.status}`;
-          throw new Error(message);
-        }
-        const actions = isRecord(payload) && Array.isArray(payload.actions) ? payload.actions.filter(isAction) : [];
-        const warnings = isRecord(payload) ? parseWarnings(payload.warnings) : [];
-        const plan = {
-          fields,
-          actions,
-          warnings
-        };
-        setLastPlan(plan);
-        setLastExecution(null);
-        setStatus("ready");
-        return plan;
-      } catch (runError) {
-        const message = runError instanceof Error ? runError.message : "Failed to run planner.";
-        setError(message);
-        setStatus("error");
-        throw runError;
-      }
-    },
-    [endpoint]
-  );
-  const apply = useCallback(
-    (actions, fields) => {
-      setError(null);
-      setStatus("applying");
-      try {
-        const report = execute(actions, fields);
-        setLastExecution(report);
-        setStatus("idle");
-        return report;
-      } catch (applyError) {
-        const message = applyError instanceof Error ? applyError.message : "Failed to apply actions.";
-        setError(message);
-        setStatus("error");
-        throw applyError;
-      }
-    },
-    []
-  );
-  const contextValue = useMemo(
-    () => ({
-      endpoint,
-      status,
-      lastPlan,
-      lastExecution,
-      error,
-      setError,
-      run,
-      apply
-    }),
-    [apply, endpoint, error, lastExecution, lastPlan, run, status]
-  );
-  return /* @__PURE__ */ jsx(BrowserToolContext.Provider, { value: contextValue, children });
-}
-
-// src/react/use-browser-tool.ts
-function useBrowserTool() {
-  const context = useContext(BrowserToolContext);
-  if (!context) {
-    throw new Error(
-      "useBrowserTool must be used inside <BrowserToolProvider />."
-    );
-  }
-  return context;
-}
-
-// src/react/prompt-panel.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function describeAction(action) {
-  if (action.action === "click") {
-    return `click ${action.fieldId}`;
-  }
-  if (action.action === "fill") {
-    return `fill ${action.fieldId} = ${JSON.stringify(action.value)}`;
-  }
-  return `select ${action.fieldId} = ${JSON.stringify(action.value)}`;
-}
-function PromptPanel({
-  defaultInstruction = "",
-  defaultDocument = "",
-  mount = "bottom-right"
-}) {
-  const { status, run, apply, lastPlan, lastExecution, error, setError } = useBrowserTool();
-  const [instruction, setInstruction] = useState2(defaultInstruction);
-  const [documentText, setDocumentText] = useState2(defaultDocument);
-  const [notice, setNotice] = useState2(null);
-  const isPlanning = status === "snapshotting" || status === "planning";
-  const isApplying = status === "applying";
-  const combinedWarnings = useMemo2(() => {
-    const planWarnings = lastPlan?.warnings ?? [];
-    const executionWarnings = lastExecution?.warnings ?? [];
-    return [...planWarnings, ...executionWarnings];
-  }, [lastExecution, lastPlan]);
-  async function handlePlan() {
-    if (!instruction.trim()) {
-      return;
-    }
-    setNotice(null);
-    setError(null);
-    try {
-      const plan = await run({
-        instruction: instruction.trim(),
-        document: documentText.trim() || void 0
-      });
-      if (plan.actions.length === 0) {
-        setNotice(
-          "No actions were generated. Try giving more explicit instructions."
-        );
-        return;
-      }
-      setNotice(
-        `Plan created: ${plan.actions.length} action(s). Review and click Apply.`
-      );
-    } catch (planError) {
-      setNotice(
-        planError instanceof Error ? planError.message : "Planning failed."
-      );
-    }
-  }
-  function handleApply() {
-    if (!lastPlan || lastPlan.actions.length === 0) {
-      return;
-    }
-    setNotice(null);
-    setError(null);
-    const report = apply(lastPlan.actions, lastPlan.fields);
-    setNotice(
-      `Applied ${report.applied} action(s), skipped ${report.skipped}.`
-    );
-  }
-  const wrapperClass = mount === "bottom-right" ? "fixed bottom-4 right-4 z-50 w-[min(28rem,calc(100vw-2rem))]" : "w-full max-w-xl";
-  return /* @__PURE__ */ jsx2("section", { className: wrapperClass, children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-700 bg-slate-950/95 p-4 shadow-2xl backdrop-blur", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx2("p", { className: "text-xs uppercase tracking-[0.15em] text-cyan-300", children: "Browser Tool Prompt Panel" }),
-      /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-slate-400", children: [
-        "status: ",
-        status
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxs("label", { className: "block", children: [
-        /* @__PURE__ */ jsx2("span", { className: "mb-1 block text-xs text-slate-300", children: "Instruction" }),
-        /* @__PURE__ */ jsx2(
-          "textarea",
-          {
-            rows: 2,
-            value: instruction,
-            onChange: (event) => setInstruction(event.target.value),
-            placeholder: "Fill title and body with a concise summary...",
-            className: "w-full rounded-lg border border-slate-700 bg-slate-900/90 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("label", { className: "block", children: [
-        /* @__PURE__ */ jsx2("span", { className: "mb-1 block text-xs text-slate-300", children: "Document (optional)" }),
-        /* @__PURE__ */ jsx2(
-          "textarea",
-          {
-            rows: 4,
-            value: documentText,
-            onChange: (event) => setDocumentText(event.target.value),
-            placeholder: "Paste source document here",
-            className: "w-full rounded-lg border border-slate-700 bg-slate-900/90 px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-400"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            onClick: handlePlan,
-            disabled: !instruction.trim() || isPlanning || isApplying,
-            className: "rounded-lg bg-cyan-400 px-3 py-2 text-sm font-semibold text-slate-950 transition hover:bg-cyan-300 disabled:cursor-not-allowed disabled:opacity-50",
-            children: isPlanning ? "Planning..." : "Plan"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            onClick: handleApply,
-            disabled: !lastPlan || lastPlan.actions.length === 0 || isPlanning || isApplying,
-            className: "rounded-lg border border-slate-600 px-3 py-2 text-sm font-semibold text-slate-100 transition hover:border-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
-            children: isApplying ? "Applying..." : "Apply"
-          }
-        )
-      ] }),
-      notice ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-slate-300", children: notice }) : null,
-      error ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-rose-400", children: error }) : null
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-slate-800 pt-3", children: [
-      /* @__PURE__ */ jsx2("p", { className: "text-xs font-medium uppercase tracking-[0.12em] text-slate-400", children: "Action Plan" }),
-      !lastPlan ? /* @__PURE__ */ jsx2("p", { className: "mt-2 text-xs text-slate-500", children: "No plan yet." }) : lastPlan.actions.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "mt-2 text-xs text-slate-500", children: "Planner returned no actions." }) : /* @__PURE__ */ jsx2("ul", { className: "mt-2 space-y-1", children: lastPlan.actions.map((action, index) => /* @__PURE__ */ jsx2(
-        "li",
-        {
-          className: "rounded-md border border-slate-800 bg-slate-900/80 px-2 py-1 text-xs text-slate-200",
-          children: describeAction(action)
-        },
-        `${action.fieldId}-${action.action}-${index}`
-      )) }),
-      combinedWarnings.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 rounded-md border border-amber-400/30 bg-amber-400/10 p-2", children: [
-        /* @__PURE__ */ jsx2("p", { className: "text-[11px] font-semibold uppercase tracking-[0.12em] text-amber-200", children: "Warnings" }),
-        /* @__PURE__ */ jsx2("ul", { className: "mt-1 space-y-1 text-xs text-amber-100", children: combinedWarnings.map((warning, index) => /* @__PURE__ */ jsxs(
-          "li",
-          {
-            children: [
-              "- ",
-              warning
-            ]
-          },
-          `${warning}-${// biome-ignore lint/suspicious/noArrayIndexKey: wip
-          index}`
-        )) })
-      ] }) : null
-    ] })
-  ] }) });
-}
-
 // src/react/use-agent.ts
-import { execute as execute2, snapshot as snapshot2 } from "@giselles-ai/browser-tool/dom";
-import { useCallback as useCallback2, useEffect, useMemo as useMemo3, useRef, useState as useState3 } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 var LOG_PREFIX = "[agent-relay-client]";
-function isRecord2(value) {
+function isRecord(value) {
   return Boolean(value) && typeof value === "object";
 }
 function asString(value) {
@@ -306,7 +11,7 @@ function asNumber(value) {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
 function extractWarnings(value) {
-  if (!isRecord2(value) || !Array.isArray(value.warnings)) {
+  if (!isRecord(value) || !Array.isArray(value.warnings)) {
     return [];
   }
   return value.warnings.filter(
@@ -366,17 +71,24 @@ function dedupeStringArray(next) {
   const nextSet = new Set(next);
   return Array.from(nextSet);
 }
-function useAgent({ endpoint }) {
-  const [relayStatus, setRelayStatus] = useState3("idle");
-  const [running, setRunning] = useState3(false);
-  const [messages, setMessages] = useState3([]);
-  const [tools, setTools] = useState3([]);
-  const [warnings, setWarnings] = useState3([]);
-  const [stderrLogs, setStderrLogs] = useState3([]);
-  const [sandboxId, setSandboxId] = useState3(null);
-  const [geminiSessionId, setGeminiSessionId] = useState3(null);
-  const [error, setError] = useState3(null);
-  const normalizedEndpoint = useMemo3(
+function normalizeTools(tools) {
+  if (!tools) {
+    return [];
+  }
+  return Object.values(tools);
+}
+function useAgent({ endpoint, tools }) {
+  const [relayStatus, setRelayStatus] = useState("idle");
+  const [running, setRunning] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [toolEvents, setToolEvents] = useState([]);
+  const [warnings, setWarnings] = useState([]);
+  const [stderrLogs, setStderrLogs] = useState([]);
+  const [sandboxId, setSandboxId] = useState(null);
+  const [geminiSessionId, setGeminiSessionId] = useState(null);
+  const [error, setError] = useState(null);
+  const [toolEventHandlers] = useMemo(() => [normalizeTools(tools)], [tools]);
+  const normalizedEndpoint = useMemo(
     () => endpoint.replace(/\/+$/, ""),
     [endpoint]
   );
@@ -386,7 +98,7 @@ function useAgent({ endpoint }) {
   const sessionRef = useRef(null);
   const messagesAssistantId = useRef(null);
   const assistantBufferRef = useRef("");
-  const cleanupRelay = useCallback2(() => {
+  const cleanupRelay = useCallback(() => {
     if (eventSourceRef.current) {
       eventSourceRef.current.close();
       eventSourceRef.current = null;
@@ -396,7 +108,7 @@ function useAgent({ endpoint }) {
       reconnectTimerRef.current = null;
     }
   }, []);
-  const handleRelayResponse = useCallback2(
+  const handleRelayResponse = useCallback(
     async (payload) => {
       const currentSession = sessionRef.current;
       if (!currentSession) {
@@ -434,9 +146,15 @@ function useAgent({ endpoint }) {
     },
     [normalizedEndpoint]
   );
-  const handleRelayEvent = useCallback2(
+  const addWarnings = useCallback((next) => {
+    if (next.length === 0) {
+      return;
+    }
+    setWarnings((current) => dedupeStringArray([...current, ...next]));
+  }, []);
+  const handleRelayEvent = useCallback(
     async (event) => {
-      if (!isRecord2(event) || typeof event.type !== "string") {
+      if (!isRecord(event) || typeof event.type !== "string") {
         return;
       }
       if (event.type === "ready") {
@@ -446,72 +164,56 @@ function useAgent({ endpoint }) {
       if (!requestId) {
         return;
       }
-      try {
-        if (event.type === "error_response") {
-          const message = asString(event.message);
-          if (message) {
+      if (event.type === "error_response") {
+        const message = asString(event.message);
+        if (message) {
+          setError(message);
+        }
+        return;
+      }
+      if (event.type === "snapshot_request" || event.type === "execute_request") {
+        const handlerContext = {
+          sendRelayResponse: handleRelayResponse,
+          setError,
+          addWarnings
+        };
+        for (const handler of toolEventHandlers) {
+          try {
+            const handled = await handler.handleRelayRequest(
+              event,
+              handlerContext
+            );
+            if (handled) {
+              return;
+            }
+          } catch (error2) {
+            const message = error2 instanceof Error ? error2.message : "Relay execution failed.";
             setError(message);
+            setRelayStatus("error");
+            await handleRelayResponse({
+              type: "error_response",
+              requestId,
+              message
+            });
+            return;
           }
-          return;
-        }
-        if (event.type === "snapshot_request") {
-          console.info(`${LOG_PREFIX} sse.snapshot_request`, {
-            requestId
-          });
-          const fields = snapshot2();
-          console.info(`${LOG_PREFIX} sse.snapshot_result`, {
-            requestId,
-            fieldCount: fields.length
-          });
-          await handleRelayResponse({
-            type: "snapshot_response",
-            requestId,
-            fields
-          });
-          return;
-        }
-        if (event.type === "execute_request") {
-          console.info(`${LOG_PREFIX} sse.execute_request`, {
-            requestId,
-            actionCount: Array.isArray(event.actions) ? event.actions.length : 0
-          });
-          const actions = Array.isArray(event.actions) ? event.actions : [];
-          const fields = Array.isArray(event.fields) ? event.fields : [];
-          const report = execute2(actions, fields);
-          console.info(`${LOG_PREFIX} sse.execute_result`, {
-            requestId,
-            applied: report.applied,
-            skipped: report.skipped
-          });
-          setWarnings(
-            (current) => dedupeStringArray([...current, ...report.warnings])
-          );
-          await handleRelayResponse({
-            type: "execute_response",
-            requestId,
-            report
-          });
-          return;
         }
         await handleRelayResponse({
           type: "error_response",
           requestId,
           message: `Unsupported relay request type: ${event.type}`
         });
-      } catch (relayError) {
-        const message = relayError instanceof Error ? relayError.message : "Relay execution failed.";
-        setError(message);
-        setRelayStatus("error");
-        await handleRelayResponse({
-          type: "error_response",
-          requestId,
-          message
-        });
+        return;
       }
+      await handleRelayResponse({
+        type: "error_response",
+        requestId,
+        message: `Unsupported relay request type: ${event.type}`
+      });
     },
-    [handleRelayResponse]
+    [addWarnings, handleRelayResponse, toolEventHandlers]
   );
-  const connect = useCallback2(() => {
+  const connect = useCallback(() => {
     const currentSession = sessionRef.current;
     if (!currentSession) {
       return;
@@ -578,7 +280,7 @@ function useAgent({ endpoint }) {
       cleanupRelay();
     };
   }, [cleanupRelay]);
-  const handleStreamEvent = useCallback2(
+  const handleStreamEvent = useCallback(
     (event) => {
       if (typeof event.type !== "string") {
         return;
@@ -678,7 +380,7 @@ function useAgent({ endpoint }) {
       if (event.type === "tool_use") {
         const toolId = asString(event.tool_id) ?? crypto.randomUUID();
         const toolName = asString(event.tool_name) ?? "tool";
-        setTools((current) => [
+        setToolEvents((current) => [
           ...current,
           {
             id: crypto.randomUUID(),
@@ -696,7 +398,7 @@ function useAgent({ endpoint }) {
         }
         const status2 = asString(event.status);
         const nextStatus = status2 === "success" || status2 === "error" ? status2 : void 0;
-        setTools(
+        setToolEvents(
           (current) => current.map(
             (tool) => tool.toolId === toolId ? {
               ...tool,
@@ -715,7 +417,7 @@ function useAgent({ endpoint }) {
     },
     [connect]
   );
-  const sendMessage = useCallback2(
+  const sendMessage = useCallback(
     async ({ message, document }) => {
       const trimmedMessage = message.trim();
       if (!trimmedMessage || running) {
@@ -804,7 +506,7 @@ function useAgent({ endpoint }) {
   return {
     status,
     messages,
-    tools,
+    tools: toolEvents,
     warnings,
     stderrLogs,
     sandboxId,
@@ -814,8 +516,5 @@ function useAgent({ endpoint }) {
   };
 }
 export {
-  BrowserToolProvider,
-  PromptPanel,
-  useAgent,
-  useBrowserTool
+  useAgent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@giselles-ai/sandbox-agent",
-	"version": "0.1.6",
+	"version": "0.1.7",
 	"type": "module",
 	"sideEffects": false,
 	"license": "Apache-2.0",
@@ -28,10 +28,11 @@
 		"build": "pnpm clean && tsup --config tsup.ts",
 		"clean": "rm -rf dist *.tsbuildinfo",
 		"typecheck": "tsc -p tsconfig.json --noEmit",
+		"test": "pnpm exec vitest run",
 		"format": "pnpm exec biome check --write ."
 	},
 	"dependencies": {
-		"@giselles-ai/browser-tool": "0.1.6",
+		"@vercel/sandbox": "^1.0.0",
 		"zod": "4.3.6"
 	},
 	"peerDependencies": {
@@ -39,6 +40,7 @@
 		"react-dom": ">=19.0.0"
 	},
 	"devDependencies": {
+		"@google/gemini-cli-core": "^0.28.2",
 		"@types/node": "25.0.10",
 		"@types/react": "19.2.10",
 		"@types/react-dom": "19.2.3",