@elvatis_com/openclaw-cli-bridge-elvatis 0.2.26 → 0.2.27

package/README.md

@@ -2,7 +2,7 @@
 
 > OpenClaw plugin that bridges locally installed AI CLIs (Codex, Gemini, Claude Code) as model providers — with slash commands for instant model switching, restore, health testing, and model listing.
 
-**Current version:** `0.2.26`
+**Current version:** `0.2.27`
 
 ---
 
@@ -287,6 +287,13 @@ npm test            # vitest run (45 tests)
 
 ## Changelog
 
+### v0.2.27
+- **feat:** Grok persistent Chromium profile (`~/.openclaw/grok-profile/`) — cookies survive gateway restarts
+- **feat:** `/grok-login` imports cookies from OpenClaw browser into persistent profile automatically
+- **fix:** `verifySession` reuses existing grok.com page instead of opening a new one (avoids Cloudflare 403)
+- **fix:** DOM-polling strategy instead of direct fetch API — bypasses `x-statsig-id` anti-bot check completely
+- **fix:** Lazy-connect: `connectGrokContext` callback auto-reconnects on first request after restart
+
 ### v0.2.26
 - **feat:** Grok web-session bridge integrated into cli-bridge proxy — routes `web-grok/*` models through grok.com browser session (SuperGrok subscription, no API credits needed)
 - **feat:** `/grok-login` — opens Chromium for X.com OAuth login, saves session to `~/.openclaw/grok-session.json`

package/SKILL.md

@@ -53,4 +53,4 @@ Each command runs `openclaw models set <model>` atomically and replies with a co
 
 See `README.md` for full configuration reference and architecture diagram.
 
-**Version:** 0.2.26
+**Version:** 0.2.27

package/index.ts

@@ -86,27 +86,76 @@ interface CliPluginConfig {
 let grokBrowser: Browser | null = null;
 let grokContext: BrowserContext | null = null;
 
-async function launchGrokBrowser(): Promise<Browser> {
+// Persistent profile dir — survives gateway restarts, keeps cookies intact
+const GROK_PROFILE_DIR = join(homedir(), ".openclaw", "grok-profile");
+
+/**
+ * Launch (or reuse) a persistent headless Chromium context for grok.com.
+ * Uses launchPersistentContext so cookies survive gateway restarts.
+ * The profile lives at ~/.openclaw/grok-profile/
+ */
+async function getOrLaunchGrokContext(
+  log: (msg: string) => void
+): Promise<BrowserContext | null> {
+  // Already have a live context?
+  if (grokContext) {
+    try {
+      // Quick check: can we still enumerate pages?
+      grokContext.pages();
+      return grokContext;
+    } catch {
+      grokContext = null;
+    }
+  }
+
   const { chromium } = await import("playwright");
-  return chromium.launch({ headless: false });
+
+  // 1. Try connecting to the OpenClaw managed browser first (user may have grok.com open)
+  try {
+    const browser = await chromium.connectOverCDP("http://127.0.0.1:18800", { timeout: 2000 });
+    grokBrowser = browser;
+    const ctx = browser.contexts()[0];
+    if (ctx) {
+      log("[cli-bridge:grok] connected to OpenClaw browser");
+      return ctx;
+    }
+  } catch {
+    // OpenClaw browser not available — fall through to persistent context
+  }
+
+  // 2. Launch our own persistent headless Chromium with saved profile
+  log("[cli-bridge:grok] launching persistent Chromium…");
+  try {
+    const ctx = await chromium.launchPersistentContext(GROK_PROFILE_DIR, {
+      headless: true,
+      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    });
+    grokContext = ctx;
+    log("[cli-bridge:grok] persistent context ready");
+    return ctx;
+  } catch (err) {
+    log(`[cli-bridge:grok] failed to launch browser: ${(err as Error).message}`);
+    return null;
+  }
+}
+
+async function connectToOpenClawBrowser(
+  log: (msg: string) => void
+): Promise<BrowserContext | null> {
+  return getOrLaunchGrokContext(log);
 }
 
 async function tryRestoreGrokSession(
-  sessionPath: string,
+  _sessionPath: string,
   log: (msg: string) => void
 ): Promise<boolean> {
-  const saved = loadSession(sessionPath);
-  if (!saved || isSessionExpiredByAge(saved)) {
-    log("[cli-bridge:grok] no valid saved session");
-    return false;
-  }
   try {
-    if (!grokBrowser) grokBrowser = await launchGrokBrowser();
-    const ctx = await createContextFromSession(grokBrowser, saved);
+    const ctx = await getOrLaunchGrokContext(log);
+    if (!ctx) return false;
+
     const check = await verifySession(ctx, log);
     if (!check.valid) {
-      log(`[cli-bridge:grok] saved session invalid: ${check.reason}`);
-      await ctx.close().catch(() => {});
+      log(`[cli-bridge:grok] session invalid: ${check.reason}`);
       return false;
     }
     grokContext = ctx;
@@ -443,7 +492,7 @@ function proxyTestRequest(
 const plugin = {
   id: "openclaw-cli-bridge-elvatis",
   name: "OpenClaw CLI Bridge",
-  version: "0.2.26",
+  version: "0.2.27",
   description:
     "Phase 1: openai-codex auth bridge. " +
     "Phase 2: HTTP proxy for gemini/claude CLIs. " +
@@ -558,6 +607,14 @@ const plugin = {
             log: (msg) => api.logger.info(msg),
             warn: (msg) => api.logger.warn(msg),
             getGrokContext: () => grokContext,
+            connectGrokContext: async () => {
+              const ctx = await connectToOpenClawBrowser((msg) => api.logger.info(msg));
+              if (ctx) {
+                const check = await verifySession(ctx, (msg) => api.logger.info(msg));
+                if (check.valid) { grokContext = ctx; return ctx; }
+              }
+              return null;
+            },
           });
           proxyServer = server;
           api.logger.info(
@@ -582,6 +639,14 @@ const plugin = {
                 log: (msg) => api.logger.info(msg),
                 warn: (msg) => api.logger.warn(msg),
                 getGrokContext: () => grokContext,
+                connectGrokContext: async () => {
+                  const ctx = await connectToOpenClawBrowser((msg) => api.logger.info(msg));
+                  if (ctx) {
+                    const check = await verifySession(ctx, (msg) => api.logger.info(msg));
+                    if (check.valid) { grokContext = ctx; return ctx; }
+                  }
+                  return null;
+                },
               });
               proxyServer = server;
               api.logger.info(`[cli-bridge] proxy ready on :${port} (retry)`);
@@ -831,20 +896,54 @@ const plugin = {
 
     api.registerCommand({
       name: "grok-login",
-      description: "Open browser to log in to grok.com (X/Twitter account)",
+      description: "Authenticate grok.com: imports cookies from OpenClaw browser into persistent profile",
       handler: async (): Promise<PluginCommandResult> => {
         if (grokContext) {
-          return { text: "✅ Already logged in to grok.com. Use /grok-logout first to re-authenticate." };
+          const check = await verifySession(grokContext, (msg) => api.logger.info(msg));
+          if (check.valid) {
+            return { text: "✅ Already connected to grok.com. Use `/grok-logout` first to reset." };
+          }
+          grokContext = null;
         }
-        api.logger.info("[cli-bridge:grok] starting interactive login...");
+        api.logger.info("[cli-bridge:grok] /grok-login: importing session from OpenClaw browser…");
+        const { chromium } = await import("playwright");
+
+        // Step 1: try to grab cookies from the OpenClaw browser (user must have grok.com open)
+        let importedCookies: unknown[] = [];
         try {
-          if (!grokBrowser) grokBrowser = await launchGrokBrowser();
-          const session = await runInteractiveLogin(grokBrowser, grokSessionPath, (msg) => api.logger.info(msg));
-          grokContext = await createContextFromSession(grokBrowser, session);
-          return { text: "✅ Logged in to grok.com!\n\nGrok models available:\n• `vllm/web-grok/grok-3`\n• `vllm/web-grok/grok-3-fast`\n• `vllm/web-grok/grok-3-mini`\n\nUse `/cli-grok` to switch." };
-        } catch (err) {
-          return { text: `❌ Login failed: ${(err as Error).message}` };
+          const ocBrowser = await chromium.connectOverCDP("http://127.0.0.1:18800", { timeout: 3000 });
+          const ocCtx = ocBrowser.contexts()[0];
+          if (ocCtx) {
+            importedCookies = await ocCtx.cookies(["https://grok.com", "https://x.ai", "https://accounts.x.ai"]);
+            api.logger.info(`[cli-bridge:grok] imported ${importedCookies.length} cookies from OpenClaw browser`);
+          }
+          await ocBrowser.close().catch(() => {});
+        } catch {
+          api.logger.info("[cli-bridge:grok] OpenClaw browser not available — using saved profile");
         }
+
+        // Step 2: launch/connect persistent context and inject cookies
+        const ctx = await getOrLaunchGrokContext((msg) => api.logger.info(msg));
+        if (!ctx) return { text: "❌ Could not launch browser. Check server logs." };
+
+        if (importedCookies.length > 0) {
+          await ctx.addCookies(importedCookies as Parameters<typeof ctx.addCookies>[0]);
+          api.logger.info(`[cli-bridge:grok] cookies injected into persistent profile`);
+        }
+
+        // Step 3: navigate to grok.com and verify
+        const pages = ctx.pages();
+        const page = pages.find(p => p.url().includes("grok.com")) ?? await ctx.newPage();
+        if (!page.url().includes("grok.com")) {
+          await page.goto("https://grok.com", { waitUntil: "domcontentloaded", timeout: 15_000 });
+        }
+
+        const check = await verifySession(ctx, (msg) => api.logger.info(msg));
+        if (!check.valid) {
+          return { text: `❌ Session not valid: ${check.reason}\n\nMake sure grok.com is open in your browser and you're logged in, then run /grok-login again.` };
+        }
+        grokContext = ctx;
+        return { text: `✅ Grok session ready!\n\nModels available:\n• \`vllm/web-grok/grok-3\`\n• \`vllm/web-grok/grok-3-fast\`\n• \`vllm/web-grok/grok-3-mini\`\n• \`vllm/web-grok/grok-3-mini-fast\`\n\nSession persists across gateway restarts (profile: ~/.openclaw/grok-profile/)` };
       },
     } satisfies OpenClawPluginCommandDefinition);
 
@@ -866,14 +965,12 @@ const plugin = {
 
     api.registerCommand({
       name: "grok-logout",
-      description: "Clear saved grok.com session",
+      description: "Disconnect from grok.com session (does not close the browser)",
       handler: async (): Promise<PluginCommandResult> => {
-        if (grokContext) {
-          await grokContext.close().catch(() => {});
-          grokContext = null;
-        }
+        // Don't close the context — it belongs to the OpenClaw browser, not us
+        grokContext = null;
         deleteSession(grokSessionPath);
-        return { text: "✅ Logged out from grok.com. Session file deleted." };
+        return { text: "✅ Disconnected from grok.com. Run `/grok-login` to reconnect." };
       },
     } satisfies OpenClawPluginCommandDefinition);
 

package/openclaw.plugin.json

@@ -1,7 +1,7 @@
 {
   "id": "openclaw-cli-bridge-elvatis",
   "name": "OpenClaw CLI Bridge",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "description": "Phase 1: openai-codex auth bridge. Phase 2: local HTTP proxy routing model calls through gemini/claude CLIs (vllm provider).",
   "providers": [
     "openai-codex"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elvatis_com/openclaw-cli-bridge-elvatis",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "description": "Bridges gemini, claude, and codex CLI tools as OpenClaw model providers. Reads existing CLI auth without re-login.",
   "type": "module",
   "openclaw": {

package/src/grok-client.ts

@@ -1,16 +1,18 @@
 /**
  * grok-client.ts
  *
- * HTTP client that sends chat completion requests to grok.com's internal REST API
- * using an authenticated browser session (cookies).
+ * Grok.com integration via Playwright DOM automation.
  *
- * Endpoint: POST https://grok.com/rest/app-chat/conversations/new
- * Response: Server-Sent Events (SSE) stream
+ * Strategy: inject messages via the ProseMirror editor, poll `.message-bubble`
+ * DOM elements for the response. This bypasses Cloudflare anti-bot checks
+ * on direct API calls (which require signed x-statsig-id headers generated
+ * inside the page's own bundle — not accessible externally).
  *
- * This mimics what the grok.com web UI does internally.
+ * Works by connecting to the running OpenClaw browser (CDP port 18800) which
+ * already has an authenticated grok.com session open.
  */
 
-import type { BrowserContext } from "playwright";
+import type { BrowserContext, Page } from "playwright";
 
 // ──────────────────────────────────────────────────────────────────────────────
 // Types
@@ -23,10 +25,7 @@ export interface ChatMessage {
 
 export interface GrokCompleteOptions {
   messages: ChatMessage[];
-  model?: string;       // "grok-3" | "grok-3-fast" | "grok-3-mini" | "grok-3-mini-fast"
-  stream?: boolean;
-  maxTokens?: number;
-  temperature?: number;
+  model?: string;
   timeoutMs?: number;
 }
 
@@ -34,395 +33,217 @@ export interface GrokCompleteResult {
   content: string;
   model: string;
   finishReason: string;
-  /** estimated — grok.com doesn't expose exact token counts */
   promptTokens?: number;
   completionTokens?: number;
 }
 
-/** SSE token event from grok.com */
-interface GrokTokenEvent {
-  result?: {
-    response?: {
-      token?: string;
-      finalMetadata?: {
-        inputTokenCount?: number;
-        outputTokenCount?: number;
-      };
-      modelResponse?: {
-        responseId?: string;
-        message?: string;
-      };
-    };
-    isSoftStop?: boolean;
-  };
-  error?: string;
-}
-
 // ──────────────────────────────────────────────────────────────────────────────
-// Model ID mapping: OpenAI-style → grok.com internal IDs
+// Constants
 // ──────────────────────────────────────────────────────────────────────────────
 
-const MODEL_MAP: Record<string, string> = {
-  "grok-3": "grok-3",
-  "grok-3-fast": "grok-3-fast",
-  "grok-3-mini": "grok-3-mini",
-  "grok-3-mini-fast": "grok-3-mini-fast",
-  // aliases
-  "grok": "grok-3",
-  "grok-fast": "grok-3-fast",
-  "grok-mini": "grok-3-mini",
-};
-
-function resolveModel(model?: string): string {
-  if (!model) return "grok-3";
-  return MODEL_MAP[model] ?? model;
-}
+const DEFAULT_TIMEOUT_MS = 120_000;
+const STABLE_CHECKS = 3;       // consecutive identical reads to consider "done"
+const STABLE_INTERVAL_MS = 500; // ms between stability checks
 
 // ──────────────────────────────────────────────────────────────────────────────
-// Request builder
+// Helpers
 // ──────────────────────────────────────────────────────────────────────────────
 
-/** Build the request body for grok.com's internal API */
-function buildRequestBody(opts: GrokCompleteOptions): Record<string, unknown> {
-  const model = resolveModel(opts.model);
-
-  // Combine messages into a single user prompt (grok.com web doesn't expose multi-turn directly)
-  // System prompt → prepended to first user message
-  const systemMsgs = opts.messages.filter((m) => m.role === "system");
-  const convMsgs = opts.messages.filter((m) => m.role !== "system");
+function resolveModel(m?: string): string {
+  const clean = (m ?? "grok-3").replace("web-grok/", "");
+  const allowed = ["grok-3", "grok-3-fast", "grok-3-mini", "grok-3-mini-fast"];
+  return allowed.includes(clean) ? clean : "grok-3";
+}
 
-  let userPrompt = "";
-  if (systemMsgs.length > 0) {
-    userPrompt = systemMsgs.map((m) => m.content).join("\n") + "\n\n";
-  }
+/**
+ * Flatten a multi-turn message array into a single string for the Grok UI.
+ */
+function flattenMessages(messages: ChatMessage[]): string {
+  if (messages.length === 1) return messages[0].content;
+  return messages
+    .map((m) => {
+      if (m.role === "system") return `[System]: ${m.content}`;
+      if (m.role === "assistant") return `[Assistant]: ${m.content}`;
+      return m.content;
+    })
+    .join("\n\n");
+}
 
-  // Build conversation history for multi-turn
-  const history: Array<{ role: string; content: string }> = [];
-  for (let i = 0; i < convMsgs.length - 1; i++) {
-    history.push({ role: convMsgs[i].role, content: convMsgs[i].content });
-  }
-  const lastMsg = convMsgs[convMsgs.length - 1];
-  userPrompt += lastMsg?.content ?? "";
-
-  return {
-    temporary: false,
-    modelName: model,
-    message: userPrompt,
-    fileAttachments: [],
-    imageAttachments: [],
-    disableSearch: false,
-    enableImageGeneration: false,
-    returnImageBytes: false,
-    returnRawGrokInXaiRequest: false,
-    enableSideBySide: false,
-    isReasoning: model.includes("mini"), // mini models support reasoning
-    conversationHistory: history,
-    toolOverrides: {},
-    enableCustomization: false,
-    deepsearchPreset: "",
-    isPreset: false,
-  };
+/**
+ * Get an existing grok.com page from the context, or navigate to grok.com.
+ */
+export async function getOrCreateGrokPage(
+  context: BrowserContext
+): Promise<{ page: Page; owned: boolean }> {
+  const existing = context.pages().filter((p) => p.url().startsWith("https://grok.com"));
+  if (existing.length > 0) return { page: existing[0], owned: false };
+  const page = await context.newPage();
+  await page.goto("https://grok.com", { waitUntil: "domcontentloaded", timeout: 15_000 });
+  return { page, owned: true };
 }
 
 // ──────────────────────────────────────────────────────────────────────────────
-// SSE parser
+// Core DOM automation
 // ──────────────────────────────────────────────────────────────────────────────
 
-function parseSSELine(line: string): GrokTokenEvent | null {
-  if (!line.startsWith("data: ")) return null;
-  const data = line.slice(6).trim();
-  if (data === "[DONE]") return null;
-  try {
-    return JSON.parse(data) as GrokTokenEvent;
-  } catch {
-    return null;
+/**
+ * Send a message via the grok.com UI and wait for a stable response.
+ * Returns the final text content of the last `.message-bubble` element.
+ */
+async function sendAndWait(
+  page: Page,
+  message: string,
+  timeoutMs: number,
+  log: (msg: string) => void
+): Promise<string> {
+  // Count current message bubbles
+  const countBefore = await page.evaluate(
+    () => document.querySelectorAll(".message-bubble").length
+  );
+
+  // Type the message into the ProseMirror editor
+  await page.evaluate((msg: string) => {
+    const ed =
+      document.querySelector(".ProseMirror") ||
+      document.querySelector('[contenteditable="true"]');
+    if (!ed) throw new Error("Grok editor not found");
+    (ed as HTMLElement).focus();
+    document.execCommand("insertText", false, msg);
+  }, message);
+
+  await new Promise((r) => setTimeout(r, 300));
+  await page.keyboard.press("Enter");
+
+  log(`grok-client: message sent (${message.length} chars), waiting for response…`);
+
+  // Poll for a stable response
+  const deadline = Date.now() + timeoutMs;
+  let lastText = "";
+  let stableCount = 0;
+
+  while (Date.now() < deadline) {
+    await new Promise((r) => setTimeout(r, STABLE_INTERVAL_MS));
+
+    const text = await page.evaluate(
+      (before: number) => {
+        const bubbles = [...document.querySelectorAll(".message-bubble")];
+        if (bubbles.length <= before) return "";
+        return bubbles[bubbles.length - 1].textContent?.trim() ?? "";
+      },
+      countBefore
+    );
+
+    if (text && text === lastText) {
+      stableCount++;
+      if (stableCount >= STABLE_CHECKS) {
+        log(`grok-client: response stable (${text.length} chars)`);
+        return text;
+      }
+    } else {
+      stableCount = 0;
+      lastText = text;
+    }
   }
+
+  throw new Error(`grok.com response timeout after ${timeoutMs}ms`);
 }
 
 // ──────────────────────────────────────────────────────────────────────────────
-// Main client function
+// Public API
 // ──────────────────────────────────────────────────────────────────────────────
 
-const GROK_API_URL = "https://grok.com/rest/app-chat/conversations/new";
-const DEFAULT_TIMEOUT_MS = 120_000;
-
 /**
- * Complete a chat via grok.com's internal API using a browser session context.
- * Uses page.evaluate to make the fetch from inside the authenticated browser context.
+ * Non-streaming completion.
  */
 export async function grokComplete(
   context: BrowserContext,
   opts: GrokCompleteOptions,
   log: (msg: string) => void
 ): Promise<GrokCompleteResult> {
-  const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+  const { page, owned } = await getOrCreateGrokPage(context);
   const model = resolveModel(opts.model);
-  const body = buildRequestBody(opts);
-
-  log(`grok-client: POST ${GROK_API_URL} model=${model}`);
+  const prompt = flattenMessages(opts.messages);
+  const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
 
-  // Open a background page in the authenticated context
-  const page = await context.newPage();
+  log(`grok-client: complete model=${model}`);
 
   try {
-    // Navigate to grok.com first to ensure cookies are sent correctly
-    await page.goto("https://grok.com", {
-      waitUntil: "domcontentloaded",
-      timeout: 15_000,
-    });
-
-    // Make the API call from within the page (inherits cookies automatically)
-    const result = await page.evaluate(
-      async ({ url, requestBody, timeout }: { url: string; requestBody: unknown; timeout: number }) => {
-        const controller = new AbortController();
-        const timer = setTimeout(() => controller.abort(), timeout);
-
-        try {
-          const resp = await fetch(url, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Accept: "text/event-stream",
-            },
-            body: JSON.stringify(requestBody),
-            credentials: "include",
-            signal: controller.signal,
-          });
-
-          if (!resp.ok) {
-            const errText = await resp.text().catch(() => "");
-            return {
-              error: `HTTP ${resp.status}: ${errText.substring(0, 300)}`,
-              content: "",
-            };
-          }
-
-          const reader = resp.body!.getReader();
-          const decoder = new TextDecoder();
-          let fullText = "";
-          let buffer = "";
-          let inputTokens = 0;
-          let outputTokens = 0;
-          let finishReason = "stop";
-
-          while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split("\n");
-            buffer = lines.pop() ?? "";
-
-            for (const line of lines) {
-              if (!line.startsWith("data: ")) continue;
-              const data = line.slice(6).trim();
-              if (data === "[DONE]") {
-                finishReason = "stop";
-                continue;
-              }
-              try {
-                const evt = JSON.parse(data);
-                const response = evt?.result?.response;
-                if (response?.token) {
-                  fullText += response.token;
-                }
-                if (response?.finalMetadata) {
-                  inputTokens = response.finalMetadata.inputTokenCount ?? 0;
-                  outputTokens = response.finalMetadata.outputTokenCount ?? 0;
-                }
-                if (evt?.result?.isSoftStop) {
-                  finishReason = "stop";
-                }
-                if (evt?.error) {
-                  return { error: String(evt.error), content: fullText };
-                }
-              } catch {
-                // ignore parse errors on individual SSE lines
-              }
-            }
-          }
-
-          return {
-            content: fullText,
-            inputTokens,
-            outputTokens,
-            finishReason,
-          };
-        } finally {
-          clearTimeout(timer);
-        }
-      },
-      { url: GROK_API_URL, requestBody: body, timeout: timeoutMs }
-    );
-
-    if ("error" in result && result.error) {
-      throw new Error(`grok.com API error: ${result.error}`);
-    }
-
-    log(
-      `grok-client: done — ${result.outputTokens ?? "?"} output tokens`
-    );
-
-    return {
-      content: result.content ?? "",
-      model,
-      finishReason: result.finishReason ?? "stop",
-      promptTokens: result.inputTokens,
-      completionTokens: result.outputTokens,
-    };
+    const content = await sendAndWait(page, prompt, timeoutMs, log);
+    return { content, model, finishReason: "stop" };
   } finally {
-    await page.close();
+    if (owned) await page.close().catch(() => {});
   }
 }
 
-// ──────────────────────────────────────────────────────────────────────────────
-// Streaming variant — yields tokens via callback
-// ──────────────────────────────────────────────────────────────────────────────
-
+/**
+ * Streaming completion — polls the DOM and calls onToken when new text arrives.
+ */
 export async function grokCompleteStream(
   context: BrowserContext,
   opts: GrokCompleteOptions,
   onToken: (token: string) => void,
   log: (msg: string) => void
 ): Promise<GrokCompleteResult> {
-  // grok.com streams via SSE; we accumulate on the JS side and call onToken per chunk.
-  // Because page.evaluate can't stream back to Node, we use a polling approach:
-  // write tokens to window.__grokTokenBuf, poll from Node side.
-  const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+  const { page, owned } = await getOrCreateGrokPage(context);
   const model = resolveModel(opts.model);
-  const body = buildRequestBody(opts);
-
-  log(`grok-client: streaming POST ${GROK_API_URL} model=${model}`);
-
-  const page = await context.newPage();
+  const prompt = flattenMessages(opts.messages);
+  const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
 
-  try {
-    await page.goto("https://grok.com", {
-      waitUntil: "domcontentloaded",
-      timeout: 15_000,
-    });
-
-    // Initialize token buffer on the page
-    await page.evaluate(() => {
-      (window as unknown as Record<string, unknown>).__grokTokenBuf = [];
-      (window as unknown as Record<string, unknown>).__grokDone = false;
-      (window as unknown as Record<string, unknown>).__grokError = null;
-      (window as unknown as Record<string, unknown>).__grokMeta = null;
-    });
-
-    // Start the fetch in the page (non-blocking — we poll from Node)
-    await page.evaluate(
-      async ({ url, requestBody, timeout }: { url: string; requestBody: unknown; timeout: number }) => {
-        const w = window as unknown as Record<string, unknown>;
-        const controller = new AbortController();
-        setTimeout(() => controller.abort(), timeout);
-
-        (async () => {
-          try {
-            const resp = await fetch(url, {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-                Accept: "text/event-stream",
-              },
-              body: JSON.stringify(requestBody),
-              credentials: "include",
-              signal: controller.signal,
-            });
-
-            if (!resp.ok) {
-              const errText = await resp.text().catch(() => "");
-              w.__grokError = `HTTP ${resp.status}: ${errText.substring(0, 300)}`;
-              w.__grokDone = true;
-              return;
-            }
-
-            const reader = resp.body!.getReader();
-            const decoder = new TextDecoder();
-            let buffer = "";
-
-            while (true) {
-              const { done, value } = await reader.read();
-              if (done) break;
-              buffer += decoder.decode(value, { stream: true });
-              const lines = buffer.split("\n");
-              buffer = lines.pop() ?? "";
-
-              for (const line of lines) {
-                if (!line.startsWith("data: ")) continue;
-                const data = line.slice(6).trim();
-                if (data === "[DONE]") continue;
-                try {
-                  const evt = JSON.parse(data);
-                  const response = evt?.result?.response;
-                  if (response?.token) {
-                    (w.__grokTokenBuf as string[]).push(response.token);
-                  }
-                  if (response?.finalMetadata) {
-                    w.__grokMeta = response.finalMetadata;
-                  }
-                  if (evt?.error) {
-                    w.__grokError = String(evt.error);
-                  }
-                } catch {
-                  // ignore
-                }
-              }
-            }
-          } catch (e: unknown) {
-            w.__grokError = String(e);
-          } finally {
-            w.__grokDone = true;
-          }
-        })();
+  log(`grok-client: stream model=${model}`);
+
+  const countBefore = await page.evaluate(
+    () => document.querySelectorAll(".message-bubble").length
+  );
+
+  // Send message
+  await page.evaluate((msg: string) => {
+    const ed =
+      document.querySelector(".ProseMirror") ||
+      document.querySelector('[contenteditable="true"]');
+    if (!ed) throw new Error("Grok editor not found");
+    (ed as HTMLElement).focus();
+    document.execCommand("insertText", false, msg);
+  }, prompt);
+  await new Promise((r) => setTimeout(r, 300));
+  await page.keyboard.press("Enter");
+
+  log(`grok-client: message sent, streaming…`);
+
+  // Stream: poll DOM, emit new chars as tokens
+  const deadline = Date.now() + timeoutMs;
+  let emittedLength = 0;
+  let lastText = "";
+  let stableCount = 0;
+
+  while (Date.now() < deadline) {
+    await new Promise((r) => setTimeout(r, STABLE_INTERVAL_MS));
+
+    const text = await page.evaluate(
+      (before: number) => {
+        const bubbles = [...document.querySelectorAll(".message-bubble")];
+        if (bubbles.length <= before) return "";
+        return bubbles[bubbles.length - 1].textContent?.trim() ?? "";
       },
-      { url: GROK_API_URL, requestBody: body, timeout: timeoutMs }
+      countBefore
     );
 
-    // Poll the token buffer from Node side
-    let fullContent = "";
-    const pollInterval = 100; // ms
-    const deadline = Date.now() + timeoutMs;
-
-    while (Date.now() < deadline) {
-      const state = await page.evaluate(() => {
-        const w = window as unknown as Record<string, unknown>;
-        const tokens = (w.__grokTokenBuf as string[]).splice(0);
-        return {
-          tokens,
-          done: w.__grokDone as boolean,
-          error: w.__grokError as string | null,
-          meta: w.__grokMeta as { inputTokenCount?: number; outputTokenCount?: number } | null,
-        };
-      });
-
-      for (const token of state.tokens) {
-        onToken(token);
-        fullContent += token;
-      }
-
-      if (state.error) {
-        throw new Error(`grok.com stream error: ${state.error}`);
-      }
+    if (text && text.length > emittedLength) {
+      const newChars = text.slice(emittedLength);
+      onToken(newChars);
+      emittedLength = text.length;
+    }
 
-      if (state.done) {
-        log(
-          `grok-client: stream done — ${state.meta?.outputTokenCount ?? "?"} tokens`
-        );
-        return {
-          content: fullContent,
-          model,
-          finishReason: "stop",
-          promptTokens: state.meta?.inputTokenCount,
-          completionTokens: state.meta?.outputTokenCount,
-        };
+    if (text && text === lastText) {
+      stableCount++;
+      if (stableCount >= STABLE_CHECKS) {
+        log(`grok-client: stream done (${text.length} chars)`);
+        return { content: text, model, finishReason: "stop" };
       }
-
-      await new Promise((r) => setTimeout(r, pollInterval));
+    } else {
+      stableCount = 0;
+      lastText = text;
     }
-
-    throw new Error(`grok.com stream timeout after ${timeoutMs}ms`);
-  } finally {
-    await page.close();
   }
+
+  throw new Error(`grok.com stream timeout after ${timeoutMs}ms`);
 }

package/src/grok-session.ts

@@ -87,51 +87,51 @@ export async function verifySession(
   context: BrowserContext,
   log: (msg: string) => void
 ): Promise<SessionCheckResult> {
+  log("verifying grok session...");
+
+  // Prefer an existing grok.com page — don't open a new one (new pages can
+  // trigger Cloudflare checks and displace the authenticated session page).
+  const existingPages = context.pages().filter((p) => p.url().startsWith("https://grok.com"));
+  if (existingPages.length > 0) {
+    const page = existingPages[0];
+    // Check for sign-in link on existing page
+    const signIn = page.locator('a[href*="sign-in"], a[href*="/login"]');
+    const signInVisible = await signIn.isVisible().catch(() => false);
+    if (signInVisible) return { valid: false, reason: "sign-in link visible — session expired" };
+    // Check for editor (logged in indicator)
+    const editor = page.locator('.ProseMirror, [contenteditable="true"]');
+    const editorVisible = await editor.isVisible().catch(() => false);
+    if (editorVisible) {
+      log("session valid ✅");
+      return { valid: true };
+    }
+  }
+
+  // No existing page — open one to check, then leave it open for reuse
   const page = await context.newPage();
   try {
     log("verifying grok session...");
     await page.goto(GROK_HOME, { waitUntil: "domcontentloaded", timeout: 15_000 });
 
-    // If we see Sign In link → not logged in
     const signIn = page.locator('a[href*="sign-in"], a[href*="/login"]');
-    const signInVisible = await signIn.isVisible().catch(() => false);
-    if (signInVisible) {
+    if (await signIn.isVisible().catch(() => false)) {
+      await page.close();
       return { valid: false, reason: "sign-in link visible — session expired" };
     }
 
-    // If we see the chat input → logged in
-    const chatInput = page.locator('textarea, [placeholder*="mind"], [aria-label*="message"]');
-    const chatVisible = await chatInput.isVisible().catch(() => false);
-    if (chatVisible) {
+    const editor = page.locator('.ProseMirror, [contenteditable="true"]');
+    if (await editor.isVisible().catch(() => false)) {
+      // Keep page open — grokComplete will reuse it
       log("session valid ✅");
       return { valid: true };
     }
 
-    // Ambiguous — try API endpoint
-    const resp = await page.evaluate(async () => {
-      try {
-        const r = await fetch("https://grok.com/rest/app-chat/conversations", {
-          method: "GET",
-          credentials: "include",
-        });
-        return { status: r.status };
-      } catch (e: unknown) {
-        return { status: 0, error: String(e) };
-      }
-    });
-
-    if (resp.status === 200 || resp.status === 204) {
-      log("session valid via API check ✅");
-      return { valid: true };
-    }
-    if (resp.status === 401 || resp.status === 403) {
-      return { valid: false, reason: `API returned ${resp.status}` };
-    }
-
-    log(`session check ambiguous (status ${resp.status}) — assuming valid`);
+    // Ambiguous — assume valid, keep page open
+    log("session check ambiguous — assuming valid");
     return { valid: true };
-  } finally {
-    await page.close();
+  } catch (err) {
+    await page.close().catch(() => {});
+    return { valid: false, reason: (err as Error).message };
   }
 }
 

package/src/proxy-server.ts

@@ -27,6 +27,8 @@ export interface ProxyServerOptions {
   warn: (msg: string) => void;
   /** Returns the current authenticated Grok BrowserContext (null if not logged in) */
   getGrokContext?: () => BrowserContext | null;
+  /** Async lazy connect — called when getGrokContext returns null */
+  connectGrokContext?: () => Promise<BrowserContext | null>;
   /** Override for testing — replaces grokComplete */
   _grokComplete?: typeof grokComplete;
   /** Override for testing — replaces grokCompleteStream */
@@ -198,7 +200,11 @@ async function handleRequest(
 
     // ── Grok web-session routing ──────────────────────────────────────────────
     if (model.startsWith("web-grok/")) {
-      const grokCtx = opts.getGrokContext?.() ?? null;
+      let grokCtx = opts.getGrokContext?.() ?? null;
+      // Lazy connect: if context is null but a connector is provided, try now
+      if (!grokCtx && opts.connectGrokContext) {
+        grokCtx = await opts.connectGrokContext();
+      }
       if (!grokCtx) {
         res.writeHead(503, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ error: { message: "No active grok.com session. Use /grok-login to authenticate.", code: "no_grok_session" } }));