poke-browser 0.3.0 → 0.4.1

package/extension/background.js

@@ -34,6 +34,20 @@ let offscreenCreatingPromise = null;
 /** @type {Array<{ ts: number, direction: "in" | "out", summary: string }>} */
 let commandLog = [];
 
+const POKE_TERMINAL_ONLY_INSTRUCTION =
+  "[BROWSER EXTENSION SESSION — MANDATORY]\n" +
+  "You are in a browser extension initiated terminal-style session.\n" +
+  "DO NOT reply via iMessage. DO NOT reply via SMS. DO NOT reply via Telegram.\n" +
+  "DO NOT send any normal chat reply text.\n" +
+  "Your only allowed behavior is to execute browser tasks and deliver output through the terminal/tool channel.\n" +
+  "Be strict: immediately start the browser process and proceed with the requested browser actions.\n" +
+  "[END BROWSER EXTENSION SESSION]\n\n";
+
+const POKE_TERMINAL_FALLBACK_INSTRUCTION =
+  "[BROWSER SESSION]\n" +
+  "No chat reply. No iMessage/SMS/Telegram reply.\n" +
+  "Start browser actions immediately and respond only through tool/terminal channel.\n\n";
+
 function logCommand(direction, summary) {
   commandLog.unshift({ ts: Date.now(), direction, summary });
   if (commandLog.length > LOG_MAX) commandLog.length = LOG_MAX;
@@ -55,6 +69,47 @@ function logCommand(direction, summary) {
   }
 }
 
+/**
+ * @param {string} apiKey
+ * @param {string} message
+ */
+async function postPokeMessage(apiKey, message) {
+  const resp = await fetch("https://poke.com/api/v1/inbound/api-message", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${apiKey}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ message }),
+  });
+
+  if (resp.ok) {
+    const data = await resp.json().catch(() => null);
+    return { ok: true, data };
+  }
+
+  const bodyText = await resp.text();
+  let serverMsg = "";
+  try {
+    const parsed = JSON.parse(bodyText);
+    serverMsg =
+      typeof parsed?.error === "string"
+        ? parsed.error
+        : typeof parsed?.message === "string"
+          ? parsed.message
+          : "";
+  } catch {
+    /* non-json response body */
+  }
+
+  return {
+    ok: false,
+    status: resp.status,
+    statusText: resp.statusText || "",
+    serverMsg: serverMsg || bodyText.slice(0, 300),
+  };
+}
+
 async function getWsPort() {
   const { wsPort } = await chrome.storage.local.get("wsPort");
   if (typeof wsPort === "number" && Number.isFinite(wsPort) && wsPort > 0 && wsPort < 65536) {
@@ -1954,6 +2009,84 @@ const RUNTIME_HANDLERS = {
     })();
     return true;
   },
+  POKE_GET_API_KEY_STATE: (_message, sendResponse) => {
+    void chrome.storage.local.get("pokeApiKey").then((st) => {
+      const apiKey = st && typeof st.pokeApiKey === "string" ? st.pokeApiKey.trim() : "";
+      sendResponse({ hasApiKey: apiKey.length > 0 });
+    });
+    return true;
+  },
+  POKE_SET_API_KEY: (message, sendResponse) => {
+    const m = /** @type {{ apiKey?: unknown }} */ (message);
+    const apiKey = typeof m.apiKey === "string" ? m.apiKey.trim() : "";
+    void chrome.storage.local.set({ pokeApiKey: apiKey }).then(() => {
+      sendResponse({ ok: true });
+    });
+    return true;
+  },
+  POKE_SEND_MESSAGE: (message, sendResponse) => {
+    const m = /** @type {{ message?: unknown }} */ (message);
+    const userMessage = typeof m.message === "string" ? m.message.trim() : "";
+    if (!userMessage) {
+      sendResponse({ ok: false, error: "Message is required." });
+      return false;
+    }
+    void (async () => {
+      const st = await chrome.storage.local.get(["pokeApiKey"]);
+      const apiKey = st && typeof st.pokeApiKey === "string" ? st.pokeApiKey.trim() : "";
+      if (!apiKey) {
+        sendResponse({ ok: false, error: "Missing API key. Save it in the popup first." });
+        return;
+      }
+      try {
+        const primary = await postPokeMessage(
+          apiKey,
+          `${POKE_TERMINAL_ONLY_INSTRUCTION}${userMessage}`,
+        );
+
+        if (primary.ok) {
+          sendResponse({ ok: true, data: primary.data });
+          return;
+        }
+
+        // If backend fails with a 5xx, retry once with shorter strict instruction.
+        if (primary.status >= 500) {
+          const fallback = await postPokeMessage(
+            apiKey,
+            `${POKE_TERMINAL_FALLBACK_INSTRUCTION}${userMessage}`,
+          );
+          if (fallback.ok) {
+            sendResponse({
+              ok: true,
+              data: fallback.data,
+              warning: `Primary prompt failed with ${primary.status}; fallback succeeded.`,
+            });
+            return;
+          }
+          sendResponse({
+            ok: false,
+            error:
+              `Poke API error (${fallback.status}). ` +
+              (fallback.serverMsg || fallback.statusText || "Unknown server error."),
+          });
+          return;
+        }
+
+        sendResponse({
+          ok: false,
+          error:
+            `Poke API error (${primary.status}). ` +
+            (primary.serverMsg || primary.statusText || "Unknown server error."),
+        });
+      } catch (err) {
+        sendResponse({
+          ok: false,
+          error: err instanceof Error ? err.message : String(err),
+        });
+      }
+    })();
+    return true;
+  },
 };
 
 chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {

package/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "poke-browser",
-  "version": "0.2.9",
+  "version": "0.4.0",
   "description": "Browser automation bridge for MCP agents via WebSocket.",
   "permissions": [
     "tabs",

package/extension/popup.html

@@ -185,6 +185,95 @@
         margin-bottom: 14px;
       }
 
+      .form-card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 12px 14px;
+        margin-bottom: 12px;
+      }
+
+      .form-label {
+        display: block;
+        font-size: 12px;
+        color: var(--text-muted);
+        margin-bottom: 6px;
+      }
+
+      .form-input,
+      .form-textarea {
+        width: 100%;
+        padding: 8px 10px;
+        font-size: 12px;
+        font-family: inherit;
+        background: #1a1a1a;
+        border: 1px solid #333;
+        border-radius: 6px;
+        color: var(--text-primary);
+        outline: none;
+      }
+
+      .form-input:focus,
+      .form-textarea:focus {
+        border-color: var(--accent-muted);
+      }
+
+      .form-textarea {
+        resize: vertical;
+        min-height: 72px;
+        max-height: 180px;
+      }
+
+      .actions-row {
+        display: flex;
+        gap: 8px;
+        margin-top: 8px;
+      }
+
+      .btn {
+        border: 1px solid #333;
+        border-radius: 6px;
+        background: #161616;
+        color: var(--text-primary);
+        font-size: 12px;
+        padding: 7px 10px;
+        cursor: pointer;
+      }
+
+      .btn:hover {
+        background: #1e1e1e;
+      }
+
+      .btn.primary {
+        border-color: #5b21b6;
+        background: #4c1d95;
+      }
+
+      .btn.primary:hover {
+        background: #5b21b6;
+      }
+
+      .mini-status {
+        margin-top: 8px;
+        font-size: 11px;
+        color: var(--text-muted);
+        min-height: 14px;
+      }
+
+      .inline-link {
+        margin-top: 6px;
+        font-size: 11px;
+      }
+
+      .inline-link a {
+        color: #a78bfa;
+        text-decoration: none;
+      }
+
+      .inline-link a:hover {
+        text-decoration: underline;
+      }
+
       .toggle-label {
         font-size: 13px;
         color: var(--text-primary);
@@ -400,6 +489,35 @@
       </label>
     </div>
 
+    <section class="form-card">
+      <label class="form-label" for="api-key-input">Poke API key (stored locally in this extension)</label>
+      <input
+        id="api-key-input"
+        class="form-input"
+        type="password"
+        spellcheck="false"
+        autocomplete="off"
+        placeholder="pk_..."
+      />
+      <div class="actions-row">
+        <button type="button" id="save-api-key-btn" class="btn">Save key</button>
+        <button type="button" id="clear-api-key-btn" class="btn">Clear key</button>
+      </div>
+      <div class="inline-link">
+        <a href="https://poke.com/kitchen/api-keys" target="_blank" rel="noopener noreferrer">Get an API key from Poke Kitchen</a>
+      </div>
+      <div class="mini-status" id="api-key-status"></div>
+    </section>
+
+    <section class="form-card">
+      <label class="form-label" for="poke-message-input">Send message to Poke (strict browser session mode)</label>
+      <textarea id="poke-message-input" class="form-textarea" placeholder="Tell Poke what to do in the browser..."></textarea>
+      <div class="actions-row">
+        <button type="button" id="send-poke-message-btn" class="btn primary">Send</button>
+      </div>
+      <div class="mini-status" id="poke-send-status"></div>
+    </section>
+
     <div class="logs-section" id="logsSection">
       <button type="button" class="logs-header" id="logsToggle" aria-expanded="false" aria-controls="logsCollapse">
         <span>Logs</span>

package/extension/popup.js

@@ -10,6 +10,13 @@ const versionEl = document.getElementById("version");
 const logsSection = document.getElementById("logsSection");
 const logsToggle = document.getElementById("logsToggle");
 const disconnectedHint = document.getElementById("disconnected-hint");
+const apiKeyInput = document.getElementById("api-key-input");
+const saveApiKeyBtn = document.getElementById("save-api-key-btn");
+const clearApiKeyBtn = document.getElementById("clear-api-key-btn");
+const apiKeyStatus = document.getElementById("api-key-status");
+const pokeMessageInput = document.getElementById("poke-message-input");
+const sendPokeMessageBtn = document.getElementById("send-poke-message-btn");
+const pokeSendStatus = document.getElementById("poke-send-status");
 
 const { version } = chrome.runtime.getManifest();
 
@@ -149,6 +156,76 @@ async function load() {
   if (mcpEnabled) mcpEnabled.checked = enabled;
 
   await syncFromBackgroundStatus();
+
+  try {
+    const keyState = await chrome.runtime.sendMessage({ type: "POKE_GET_API_KEY_STATE" });
+    if (keyState?.hasApiKey) {
+      if (apiKeyStatus) apiKeyStatus.textContent = "API key saved.";
+      if (apiKeyInput) apiKeyInput.placeholder = "Saved (enter a new key to replace)";
+    } else if (apiKeyStatus) {
+      apiKeyStatus.textContent = "No API key saved.";
+    }
+  } catch {
+    if (apiKeyStatus) apiKeyStatus.textContent = "Could not read API key state.";
+  }
+}
+
+async function saveApiKey() {
+  const key = apiKeyInput?.value?.trim() ?? "";
+  if (!key) {
+    if (apiKeyStatus) apiKeyStatus.textContent = "Enter an API key first.";
+    return;
+  }
+  if (apiKeyStatus) apiKeyStatus.textContent = "Saving...";
+  try {
+    const res = await chrome.runtime.sendMessage({ type: "POKE_SET_API_KEY", apiKey: key });
+    if (res?.ok) {
+      if (apiKeyInput) apiKeyInput.value = "";
+      if (apiKeyStatus) apiKeyStatus.textContent = "API key saved.";
+    } else if (apiKeyStatus) {
+      apiKeyStatus.textContent = "Failed to save API key.";
+    }
+  } catch {
+    if (apiKeyStatus) apiKeyStatus.textContent = "Failed to save API key.";
+  }
+}
+
+async function clearApiKey() {
+  if (apiKeyStatus) apiKeyStatus.textContent = "Clearing...";
+  try {
+    const res = await chrome.runtime.sendMessage({ type: "POKE_SET_API_KEY", apiKey: "" });
+    if (res?.ok) {
+      if (apiKeyInput) apiKeyInput.value = "";
+      if (apiKeyStatus) apiKeyStatus.textContent = "API key cleared.";
+    } else if (apiKeyStatus) {
+      apiKeyStatus.textContent = "Failed to clear API key.";
+    }
+  } catch {
+    if (apiKeyStatus) apiKeyStatus.textContent = "Failed to clear API key.";
+  }
+}
+
+async function sendPokeMessage() {
+  const message = pokeMessageInput?.value?.trim() ?? "";
+  if (!message) {
+    if (pokeSendStatus) pokeSendStatus.textContent = "Enter a message first.";
+    return;
+  }
+  if (pokeSendStatus) pokeSendStatus.textContent = "Sending...";
+  if (sendPokeMessageBtn) sendPokeMessageBtn.disabled = true;
+  try {
+    const res = await chrome.runtime.sendMessage({ type: "POKE_SEND_MESSAGE", message });
+    if (res?.ok) {
+      if (pokeSendStatus) pokeSendStatus.textContent = "Message sent to Poke.";
+      if (pokeMessageInput) pokeMessageInput.value = "";
+    } else {
+      if (pokeSendStatus) pokeSendStatus.textContent = res?.error ? String(res.error) : "Failed to send message.";
+    }
+  } catch {
+    if (pokeSendStatus) pokeSendStatus.textContent = "Failed to send message.";
+  } finally {
+    if (sendPokeMessageBtn) sendPokeMessageBtn.disabled = false;
+  }
 }
 
 chrome.runtime.onMessage.addListener((msg) => {
@@ -201,5 +278,31 @@ mcpEnabled?.addEventListener("change", async () => {
   await syncFromBackgroundStatus();
 });
 
+saveApiKeyBtn?.addEventListener("click", () => {
+  void saveApiKey();
+});
+
+clearApiKeyBtn?.addEventListener("click", () => {
+  void clearApiKey();
+});
+
+apiKeyInput?.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    void saveApiKey();
+  }
+});
+
+sendPokeMessageBtn?.addEventListener("click", () => {
+  void sendPokeMessage();
+});
+
+pokeMessageInput?.addEventListener("keydown", (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+    e.preventDefault();
+    void sendPokeMessage();
+  }
+});
+
 checkForUpdates();
 void load();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poke-browser",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "MCP server + WebSocket bridge for the poke-browser Chrome extension",
   "type": "module",
   "engines": {