npm - @wingman-ai/gateway - Versions diffs - 0.3.0 → 0.3.1 - Mend

@wingman-ai/gateway 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (120) hide show

package/README.md +8 -0
package/dist/agent/config/agentConfig.cjs +12 -0
package/dist/agent/config/agentConfig.d.ts +22 -0
package/dist/agent/config/agentConfig.js +10 -1
package/dist/agent/config/agentLoader.cjs +9 -0
package/dist/agent/config/agentLoader.js +9 -0
package/dist/agent/config/toolRegistry.cjs +17 -0
package/dist/agent/config/toolRegistry.d.ts +15 -0
package/dist/agent/config/toolRegistry.js +17 -0
package/dist/agent/tests/agentConfig.test.cjs +6 -1
package/dist/agent/tests/agentConfig.test.js +6 -1
package/dist/agent/tests/browserControlHelpers.test.cjs +35 -0
package/dist/agent/tests/browserControlHelpers.test.d.ts +1 -0
package/dist/agent/tests/browserControlHelpers.test.js +29 -0
package/dist/agent/tests/browserControlTool.test.cjs +2117 -0
package/dist/agent/tests/browserControlTool.test.d.ts +1 -0
package/dist/agent/tests/browserControlTool.test.js +2111 -0
package/dist/agent/tests/toolRegistry.test.cjs +6 -0
package/dist/agent/tests/toolRegistry.test.js +6 -0
package/dist/agent/tools/browser_control.cjs +1282 -0
package/dist/agent/tools/browser_control.d.ts +478 -0
package/dist/agent/tools/browser_control.js +1242 -0
package/dist/cli/commands/agent.cjs +16 -2
package/dist/cli/commands/agent.js +16 -2
package/dist/cli/commands/browser.cjs +603 -0
package/dist/cli/commands/browser.d.ts +13 -0
package/dist/cli/commands/browser.js +566 -0
package/dist/cli/commands/gateway.cjs +18 -7
package/dist/cli/commands/gateway.d.ts +5 -1
package/dist/cli/commands/gateway.js +18 -7
package/dist/cli/commands/init.cjs +134 -45
package/dist/cli/commands/init.js +134 -45
package/dist/cli/commands/skill.cjs +3 -2
package/dist/cli/commands/skill.js +3 -2
package/dist/cli/config/loader.cjs +15 -0
package/dist/cli/config/loader.js +15 -0
package/dist/cli/config/schema.cjs +51 -2
package/dist/cli/config/schema.d.ts +49 -0
package/dist/cli/config/schema.js +44 -1
package/dist/cli/core/workspace.cjs +89 -0
package/dist/cli/core/workspace.d.ts +1 -0
package/dist/cli/core/workspace.js +55 -0
package/dist/cli/index.cjs +53 -5
package/dist/cli/index.js +53 -5
package/dist/cli/types/browser.cjs +18 -0
package/dist/cli/types/browser.d.ts +9 -0
package/dist/cli/types/browser.js +0 -0
package/dist/gateway/browserRelayServer.cjs +338 -0
package/dist/gateway/browserRelayServer.d.ts +38 -0
package/dist/gateway/browserRelayServer.js +301 -0
package/dist/gateway/http/agents.cjs +22 -0
package/dist/gateway/http/agents.js +22 -0
package/dist/gateway/http/fs.cjs +57 -0
package/dist/gateway/http/fs.js +58 -1
package/dist/gateway/server.cjs +43 -6
package/dist/gateway/server.d.ts +4 -1
package/dist/gateway/server.js +36 -5
package/dist/gateway/transport/websocket.cjs +45 -10
package/dist/gateway/transport/websocket.d.ts +1 -0
package/dist/gateway/transport/websocket.js +41 -9
package/dist/gateway/types.d.ts +4 -0
package/dist/tests/agents-api.test.cjs +52 -0
package/dist/tests/agents-api.test.js +53 -1
package/dist/tests/browser-command.test.cjs +264 -0
package/dist/tests/browser-command.test.d.ts +1 -0
package/dist/tests/browser-command.test.js +258 -0
package/dist/tests/browser-relay-server.test.cjs +20 -0
package/dist/tests/browser-relay-server.test.d.ts +1 -0
package/dist/tests/browser-relay-server.test.js +14 -0
package/dist/tests/cli-config-loader.test.cjs +43 -0
package/dist/tests/cli-config-loader.test.js +43 -0
package/dist/tests/cli-init.test.cjs +25 -2
package/dist/tests/cli-init.test.js +25 -2
package/dist/tests/cli-workspace-root.test.cjs +114 -0
package/dist/tests/cli-workspace-root.test.d.ts +1 -0
package/dist/tests/cli-workspace-root.test.js +108 -0
package/dist/tests/fs-api.test.cjs +138 -0
package/dist/tests/fs-api.test.d.ts +1 -0
package/dist/tests/fs-api.test.js +132 -0
package/dist/tests/gateway-command-workspace.test.cjs +150 -0
package/dist/tests/gateway-command-workspace.test.d.ts +1 -0
package/dist/tests/gateway-command-workspace.test.js +144 -0
package/dist/tests/gateway-request-execution-overrides.test.cjs +42 -0
package/dist/tests/gateway-request-execution-overrides.test.d.ts +1 -0
package/dist/tests/gateway-request-execution-overrides.test.js +36 -0
package/dist/tests/gateway.test.cjs +31 -0
package/dist/tests/gateway.test.js +31 -0
package/dist/tests/websocket-transport.test.cjs +31 -0
package/dist/tests/websocket-transport.test.d.ts +1 -0
package/dist/tests/websocket-transport.test.js +25 -0
package/dist/webui/assets/index-BW9nM0J2.css +11 -0
package/dist/webui/assets/{index-0nUBsUUq.js → index-C8-oboEC.js} +107 -107
package/dist/webui/index.html +2 -2
package/extensions/wingman-browser-extension/README.md +27 -0
package/extensions/wingman-browser-extension/background.js +416 -0
package/extensions/wingman-browser-extension/manifest.json +19 -0
package/extensions/wingman-browser-extension/options.html +156 -0
package/extensions/wingman-browser-extension/options.js +106 -0
package/package.json +8 -6
package/{.wingman → templates}/agents/README.md +2 -1
package/{.wingman → templates}/agents/coding/agent.md +0 -1
package/{.wingman → templates}/agents/coding-v2/agent.md +0 -1
package/{.wingman → templates}/agents/game-dev/agent.md +8 -1
package/{.wingman → templates}/agents/game-dev/art-generation.md +1 -0
package/{.wingman → templates}/agents/main/agent.md +5 -0
package/{.wingman → templates}/agents/researcher/agent.md +9 -0
package/{.wingman → templates}/agents/stock-trader/agent.md +1 -0
package/dist/webui/assets/index-kk7OrD-G.css +0 -11
/package/{.wingman → templates}/agents/coding-v2/implementor.md +0 -0
/package/{.wingman → templates}/agents/game-dev/asset-refinement.md +0 -0
/package/{.wingman → templates}/agents/game-dev/planning-idea.md +0 -0
/package/{.wingman → templates}/agents/game-dev/ui-specialist.md +0 -0
/package/{.wingman → templates}/agents/stock-trader/chain-curator.md +0 -0
/package/{.wingman → templates}/agents/stock-trader/goal-translator.md +0 -0
/package/{.wingman → templates}/agents/stock-trader/guardrails-veto.md +0 -0
/package/{.wingman → templates}/agents/stock-trader/path-planner.md +0 -0
/package/{.wingman → templates}/agents/stock-trader/regime-analyst.md +0 -0
/package/{.wingman → templates}/agents/stock-trader/risk.md +0 -0
/package/{.wingman → templates}/agents/stock-trader/selection.md +0 -0
/package/{.wingman → templates}/agents/stock-trader/strategy-composer.md +0 -0

package/dist/webui/index.html CHANGED Viewed

@@ -12,8 +12,8 @@
       href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Sora:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-0nUBsUUq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-kk7OrD-G.css">
+    <script type="module" crossorigin src="/assets/index-C8-oboEC.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BW9nM0J2.css">
   </head>
   <body>
     <div id="root"></div>

package/extensions/wingman-browser-extension/README.md ADDED Viewed

@@ -0,0 +1,27 @@
+# Wingman Chrome Extension (Browser Relay)
+This is Wingman's first-party browser relay extension.
+## What it does
+- Lets you attach/detach the active tab with one click.
+- Bridges Chrome DevTools events/commands between the tab and Wingman's local relay endpoint.
+- Exposes a small options page to configure/test relay port connectivity.
+## Install (developer mode)
+1. Register the bundled extension path:
+   ```bash
+   wingman browser extension install --default
+   wingman browser extension pair
+   wingman browser extension path wingman
+   ```
+2. In Chrome, open `chrome://extensions`, enable Developer mode, and load the unpacked folder.
+## Settings
+- `relayPort` (stored in `chrome.storage.local`), default: `18792`.
+- `relayToken` (stored in `chrome.storage.local`), generated by
+  `wingman browser extension pair`.

package/extensions/wingman-browser-extension/background.js ADDED Viewed

@@ -0,0 +1,416 @@
+const DEFAULT_RELAY_PORT = 18792;
+const RELAY_HOST = "127.0.0.1";
+const CONNECT_TIMEOUT_MS = 5000;
+const HEALTHCHECK_TIMEOUT_MS = 1500;
+const BADGE = {
+  attached: { text: "WM", color: "#2563eb" },
+  connecting: { text: "..", color: "#d97706" },
+  error: { text: "!", color: "#dc2626" },
+  idle: { text: "", color: "#000000" },
+};
+let relaySocket = null;
+let relayConnectPromise = null;
+const attachedTabs = new Map();
+const sessionToTab = new Map();
+let debuggerListenersInstalled = false;
+function clampPort(rawValue) {
+  const parsed = Number.parseInt(String(rawValue || ""), 10);
+  if (!Number.isFinite(parsed) || parsed <= 0 || parsed > 65535) {
+    return DEFAULT_RELAY_PORT;
+  }
+  return parsed;
+}
+async function getRelayPort() {
+  const { relayPort } = await chrome.storage.local.get(["relayPort"]);
+  return clampPort(relayPort);
+}
+async function getRelayToken() {
+  const { relayToken } = await chrome.storage.local.get(["relayToken"]);
+  if (typeof relayToken !== "string") return "";
+  return relayToken.trim();
+}
+function getRelayHttpBase(port) {
+  return `http://${RELAY_HOST}:${port}`;
+}
+function getRelayWsUrl(port, token) {
+  const query = token ? `?token=${encodeURIComponent(token)}` : "";
+  return `ws://${RELAY_HOST}:${port}/extension${query}`;
+}
+function setBadge(tabId, state) {
+  const config = BADGE[state] || BADGE.idle;
+  void chrome.action.setBadgeText({ tabId, text: config.text });
+  void chrome.action.setBadgeBackgroundColor({ tabId, color: config.color });
+  void chrome.action.setBadgeTextColor({ tabId, color: "#ffffff" }).catch(() =>
+    undefined,
+  );
+}
+function setActionTitle(tabId, title) {
+  void chrome.action.setTitle({ tabId, title }).catch(() => undefined);
+}
+async function checkRelayHealth(port) {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), HEALTHCHECK_TIMEOUT_MS);
+  try {
+    const response = await fetch(`${getRelayHttpBase(port)}/`, {
+      method: "HEAD",
+      signal: controller.signal,
+    });
+    if (!response.ok) {
+      throw new Error(`relay health check returned HTTP ${response.status}`);
+    }
+  } finally {
+    clearTimeout(timeout);
+  }
+}
+function sendRelay(payload) {
+  if (!relaySocket || relaySocket.readyState !== WebSocket.OPEN) {
+    throw new Error("relay socket is not connected");
+  }
+  relaySocket.send(JSON.stringify(payload));
+}
+function handleSocketClosed(reason) {
+  relaySocket = null;
+  console.debug("Wingman relay socket closed:", reason);
+  for (const tabId of attachedTabs.keys()) {
+    setBadge(tabId, "error");
+    setActionTitle(tabId, "Wingman Relay disconnected (click to reconnect)");
+  }
+}
+function installSocketHandlers(socket) {
+  socket.onmessage = (event) => {
+    void handleRelayMessage(String(event.data || ""));
+  };
+  socket.onclose = (event) => {
+    handleSocketClosed(`code=${event.code}`);
+  };
+  socket.onerror = () => {
+    handleSocketClosed("websocket error");
+  };
+}
+function ensureDebuggerListeners() {
+  if (debuggerListenersInstalled) {
+    return;
+  }
+  debuggerListenersInstalled = true;
+  chrome.debugger.onEvent.addListener(onDebuggerEvent);
+  chrome.debugger.onDetach.addListener(onDebuggerDetach);
+}
+async function ensureRelayConnection() {
+  if (relaySocket && relaySocket.readyState === WebSocket.OPEN) {
+    return;
+  }
+  if (relayConnectPromise) {
+    await relayConnectPromise;
+    return;
+  }
+  relayConnectPromise = (async () => {
+    const relayPort = await getRelayPort();
+    const relayToken = await getRelayToken();
+    if (!relayToken) {
+      throw new Error(
+        "Relay token is not configured. Run `wingman browser extension pair` and set the token in extension options.",
+      );
+    }
+    await checkRelayHealth(relayPort);
+    const wsUrl = getRelayWsUrl(relayPort, relayToken);
+    const socket = new WebSocket(wsUrl);
+    await new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        reject(new Error("relay websocket connection timed out"));
+      }, CONNECT_TIMEOUT_MS);
+      socket.onopen = () => {
+        try {
+          socket.send(
+            JSON.stringify({
+              method: "hello",
+              params: {
+                token: relayToken,
+                clientType: "extension",
+                version: chrome.runtime.getManifest().version,
+              },
+            }),
+          );
+        } catch (error) {
+          clearTimeout(timeout);
+          reject(error);
+        }
+      };
+      socket.onmessage = (event) => {
+        let message;
+        try {
+          message = JSON.parse(String(event.data || ""));
+        } catch {
+          return;
+        }
+        if (message?.method === "hello_ack") {
+          clearTimeout(timeout);
+          resolve();
+        }
+      };
+      socket.onerror = () => {
+        clearTimeout(timeout);
+        reject(new Error("relay websocket connection failed"));
+      };
+      socket.onclose = (event) => {
+        clearTimeout(timeout);
+        reject(new Error(`relay websocket closed before open (code=${event.code})`));
+      };
+    });
+    relaySocket = socket;
+    installSocketHandlers(socket);
+    ensureDebuggerListeners();
+  })();
+  try {
+    await relayConnectPromise;
+  } finally {
+    relayConnectPromise = null;
+  }
+}
+function buildSessionId(tabId) {
+  return `wm-tab-${tabId}-${Date.now().toString(36)}`;
+}
+async function attachTab(tabId) {
+  if (attachedTabs.has(tabId)) {
+    return attachedTabs.get(tabId);
+  }
+  setBadge(tabId, "connecting");
+  setActionTitle(tabId, "Wingman Relay connecting...");
+  const debuggee = { tabId };
+  await chrome.debugger.attach(debuggee, "1.3");
+  try {
+    await chrome.debugger.sendCommand(debuggee, "Page.enable");
+  } catch {
+    // Some pages deny Page domain. Continue.
+  }
+  const info = await chrome.debugger.sendCommand(debuggee, "Target.getTargetInfo");
+  const targetId = String(info?.targetInfo?.targetId || "").trim();
+  if (!targetId) {
+    throw new Error("Target.getTargetInfo returned no targetId");
+  }
+  const sessionId = buildSessionId(tabId);
+  const tabState = { sessionId, targetId };
+  attachedTabs.set(tabId, tabState);
+  sessionToTab.set(sessionId, tabId);
+  sendRelay({
+    method: "forwardCDPEvent",
+    params: {
+      method: "Target.attachedToTarget",
+      params: {
+        sessionId,
+        targetInfo: {
+          targetId,
+          type: "page",
+          attached: true,
+        },
+        waitingForDebugger: false,
+      },
+    },
+  });
+  setBadge(tabId, "attached");
+  setActionTitle(tabId, "Wingman Relay attached (click to detach)");
+  return tabState;
+}
+async function detachTab(tabId, reason = "manual-detach") {
+  const state = attachedTabs.get(tabId);
+  if (!state) {
+    setBadge(tabId, "idle");
+    setActionTitle(tabId, "Wingman Relay (click to attach)");
+    return;
+  }
+  attachedTabs.delete(tabId);
+  sessionToTab.delete(state.sessionId);
+  try {
+    sendRelay({
+      method: "forwardCDPEvent",
+      params: {
+        method: "Target.detachedFromTarget",
+        params: {
+          sessionId: state.sessionId,
+          targetId: state.targetId,
+          reason,
+        },
+      },
+    });
+  } catch {
+    // Ignore relay disconnects during detach.
+  }
+  try {
+    await chrome.debugger.detach({ tabId });
+  } catch {
+    // Detach may fail if Chrome already detached.
+  }
+  setBadge(tabId, "idle");
+  setActionTitle(tabId, "Wingman Relay (click to attach)");
+}
+async function toggleTab(tabId) {
+  if (attachedTabs.has(tabId)) {
+    await detachTab(tabId, "toggle");
+    return;
+  }
+  try {
+    await ensureRelayConnection();
+    await attachTab(tabId);
+  } catch (error) {
+    setBadge(tabId, "error");
+    setActionTitle(tabId, "Wingman Relay unavailable (open extension options)");
+    await chrome.runtime.openOptionsPage().catch(() => undefined);
+    throw error;
+  }
+}
+async function forwardCdpCommand(command) {
+  const sessionId = String(command?.params?.sessionId || "").trim();
+  const method = String(command?.params?.method || "").trim();
+  const params = command?.params?.params || {};
+  if (!sessionId || !method) {
+    throw new Error("forwardCDPCommand missing sessionId or method");
+  }
+  const tabId = sessionToTab.get(sessionId);
+  if (!tabId) {
+    throw new Error(`unknown sessionId: ${sessionId}`);
+  }
+  return chrome.debugger.sendCommand({ tabId }, method, params);
+}
+async function handleRelayMessage(rawMessage) {
+  let message;
+  try {
+    message = JSON.parse(rawMessage);
+  } catch {
+    return;
+  }
+  if (message?.method === "ping") {
+    sendRelay({ method: "pong" });
+    return;
+  }
+  if (
+    typeof message?.id === "number" &&
+    message?.method === "forwardCDPCommand"
+  ) {
+    try {
+      const result = await forwardCdpCommand(message);
+      sendRelay({ id: message.id, result });
+    } catch (error) {
+      sendRelay({
+        id: message.id,
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
+  }
+}
+function sendDebuggerEventToRelay(tabId, method, params) {
+  const tabState = attachedTabs.get(tabId);
+  if (!tabState) {
+    return;
+  }
+  try {
+    sendRelay({
+      method: "forwardCDPEvent",
+      params: {
+        method,
+        params: {
+          sessionId: tabState.sessionId,
+          targetId: tabState.targetId,
+          ...params,
+        },
+      },
+    });
+  } catch {
+    // Relay may be disconnected. Ignore here.
+  }
+}
+function onDebuggerEvent(debuggee, method, params) {
+  const tabId = debuggee?.tabId;
+  if (typeof tabId !== "number") {
+    return;
+  }
+  sendDebuggerEventToRelay(tabId, method, params || {});
+}
+function onDebuggerDetach(debuggee, reason) {
+  const tabId = debuggee?.tabId;
+  if (typeof tabId !== "number") {
+    return;
+  }
+  void detachTab(tabId, reason || "debugger-detached");
+}
+chrome.action.onClicked.addListener((tab) => {
+  const tabId = tab?.id;
+  if (typeof tabId !== "number") {
+    return;
+  }
+  void toggleTab(tabId);
+});
+chrome.tabs.onRemoved.addListener((tabId) => {
+  if (!attachedTabs.has(tabId)) {
+    return;
+  }
+  void detachTab(tabId, "tab-closed");
+});
+chrome.runtime.onSuspend.addListener(() => {
+  for (const tabId of attachedTabs.keys()) {
+    void chrome.debugger.detach({ tabId }).catch(() => undefined);
+  }
+});
+chrome.runtime.onInstalled.addListener(async () => {
+  const relayPort = await getRelayPort();
+  const relayToken = await getRelayToken();
+  await chrome.storage.local.set({ relayPort, relayToken });
+});

package/extensions/wingman-browser-extension/manifest.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "manifest_version": 3,
+  "name": "Wingman Browser Relay",
+  "version": "0.2.0",
+  "description": "Connect active Chrome tabs to Wingman's local browser relay.",
+  "permissions": ["debugger", "tabs", "activeTab", "storage"],
+  "host_permissions": ["http://127.0.0.1/*", "http://localhost/*"],
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "action": {
+    "default_title": "Wingman Relay (click to attach or detach)"
+  },
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  }
+}

package/extensions/wingman-browser-extension/options.html ADDED Viewed

@@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Wingman Browser Relay Options</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+      }
+      body {
+        margin: 0;
+        padding: 24px;
+        background: linear-gradient(180deg, #f7f9fc, #eef3fb);
+        color: #0f172a;
+      }
+      @media (prefers-color-scheme: dark) {
+        body {
+          background: linear-gradient(180deg, #0f172a, #111827);
+          color: #e5e7eb;
+        }
+      }
+      .card {
+        max-width: 760px;
+        margin: 0 auto;
+        background: rgba(255, 255, 255, 0.9);
+        border: 1px solid rgba(15, 23, 42, 0.12);
+        border-radius: 14px;
+        padding: 20px;
+        box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1);
+      }
+      @media (prefers-color-scheme: dark) {
+        .card {
+          background: rgba(17, 24, 39, 0.9);
+          border-color: rgba(229, 231, 235, 0.2);
+          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
+        }
+      }
+      h1 {
+        margin-top: 0;
+        margin-bottom: 8px;
+        font-size: 22px;
+      }
+      p {
+        margin: 0 0 10px;
+        line-height: 1.45;
+      }
+      .group {
+        margin-top: 16px;
+      }
+      label {
+        display: block;
+        font-weight: 600;
+        margin-bottom: 6px;
+      }
+      input {
+        width: 160px;
+        padding: 8px 10px;
+        border-radius: 8px;
+        border: 1px solid rgba(15, 23, 42, 0.3);
+        background: #ffffff;
+        color: #0f172a;
+      }
+      @media (prefers-color-scheme: dark) {
+        input {
+          border-color: rgba(229, 231, 235, 0.3);
+          background: #111827;
+          color: #e5e7eb;
+        }
+      }
+      .buttons {
+        margin-top: 10px;
+        display: flex;
+        gap: 8px;
+      }
+      button {
+        border: 0;
+        border-radius: 8px;
+        padding: 8px 12px;
+        cursor: pointer;
+        font-weight: 600;
+        background: #2563eb;
+        color: white;
+      }
+      button.secondary {
+        background: #475569;
+      }
+      code {
+        font-family: ui-monospace, Menlo, Consolas, monospace;
+      }
+      #status {
+        margin-top: 12px;
+        min-height: 18px;
+        font-size: 13px;
+      }
+      #status[data-level="ok"] {
+        color: #15803d;
+      }
+      #status[data-level="error"] {
+        color: #dc2626;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>Wingman Browser Relay</h1>
+      <p>Click the extension button on a tab to attach or detach relay control.</p>
+      <p>
+        Docs: <a href="https://wingman.ai/docs/configuration/browser-automation" target="_blank" rel="noreferrer">wingman.ai/docs/configuration/browser-automation</a>
+      </p>
+      <div class="group">
+        <label for="relay-port">Relay Port</label>
+        <input id="relay-port" inputmode="numeric" pattern="[0-9]*" />
+      </div>
+      <div class="group">
+        <label for="relay-token">Relay Token</label>
+        <input id="relay-token" type="password" autocomplete="off" />
+        <p>
+          Generate with <code>wingman browser extension pair</code>, then paste
+          here.
+        </p>
+        <div class="buttons">
+          <button id="save" type="button">Save</button>
+          <button id="test" type="button" class="secondary">Test Connection</button>
+        </div>
+      </div>
+      <p class="group">
+        Relay URL: <code id="relay-url">http://127.0.0.1:18792/</code>
+      </p>
+      <p id="status"></p>
+    </div>
+    <script type="module" src="options.js"></script>
+  </body>
+</html>