@xopcai/xopc 0.0.264 → 0.0.266

package/dist/browser-ext/dist/assets/sidepanel-C69P3v9u.css

@@ -0,0 +1,113 @@
+:root {
+  color-scheme: light dark;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #f8fafc;
+  color: #0f172a;
+}
+
+* { box-sizing: border-box; }
+html, body, #root { height: 100%; margin: 0; }
+button, input, textarea { font: inherit; }
+button { cursor: pointer; }
+
+.shell { min-height: 100%; display: flex; flex-direction: column; background: #fff; }
+.header { height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #e2e8f0; }
+.brand { font-size: 17px; font-weight: 650; flex: 1; }
+.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
+.status-dot { width: 8px; height: 8px; border-radius: 999px; background: #94a3b8; }
+.status-dot.online { background: #22c55e; }
+.status-dot.error { background: #ef4444; }
+.center { flex: 1; display: grid; place-items: center; padding: 24px; }
+.card { width: min(100%, 420px); border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; background: #fff; }
+.card h1 { margin: 0 0 8px; font-size: 20px; }
+.muted { color: #64748b; line-height: 1.5; font-size: 13px; }
+.field { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; }
+.field input, .field textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 9px; padding: 10px 12px; background: transparent; }
+.primary { border: 0; border-radius: 9px; background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600; }
+.secondary { border: 1px solid #cbd5e1; border-radius: 9px; background: transparent; padding: 8px 12px; }
+.actions { display: flex; gap: 8px; margin-top: 16px; }
+.local-connect { width: 100%; margin-top: 12px; }
+.pairing-divider { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #94a3b8; font-size: 11px; }
+.pairing-divider::before, .pairing-divider::after { content: ""; height: 1px; flex: 1; background: #e2e8f0; }
+.error-text { color: #dc2626; font-size: 13px; margin-top: 10px; }
+.approval-code { font: 700 28px ui-monospace, monospace; letter-spacing: 5px; margin: 18px 0; }
+.disconnect-link { position: absolute; top: 17px; right: 96px; border: 0; background: transparent; color: #64748b; font-size: 11px; }
+.chat { min-height: 0; flex: 1; display: flex; flex-direction: column; position: relative; }
+.chat-toolbar { height: 52px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; padding: 0 12px; gap: 8px; }
+.session-trigger { flex: 1; display: flex; justify-content: center; gap: 7px; border: 0; background: transparent; font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.icon-button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e2e8f0; background: transparent; }
+.session-menu { position: absolute; z-index: 5; top: 108px; left: 12px; right: 12px; max-height: min(60vh, 500px); border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; padding: 10px; box-shadow: 0 14px 40px rgb(15 23 42 / 14%); }
+.session-menu > input { width: 100%; border: 0; border-bottom: 1px solid #e2e8f0; padding: 9px; outline: none; background: transparent; }
+.session-list { overflow: auto; max-height: 380px; padding-top: 5px; }
+.session-list button { width: 100%; border: 0; background: transparent; border-radius: 7px; display: flex; justify-content: space-between; gap: 12px; padding: 9px; text-align: left; }
+.session-list button:hover { background: #f1f5f9; }
+.session-list span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.session-list small { color: #94a3b8; }
+.messages { flex: 1; overflow-y: auto; padding: 18px 16px 150px; }
+.empty-chat { height: 100%; display: grid; place-content: center; text-align: center; color: #64748b; }
+.mark { font-size: 40px; color: #94a3b8; }
+.message { margin: 0 0 20px; line-height: 1.55; }
+.message.user { margin-left: 15%; background: #f1f5f9; border-radius: 14px; padding: 10px 12px; }
+.message-role { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
+.message-content { white-space: pre-wrap; overflow-wrap: anywhere; }
+.source-badge { display: inline-block; max-width: 100%; margin-bottom: 6px; border: 1px solid #bfdbfe; border-radius: 999px; padding: 3px 8px; color: #1d4ed8; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.caret { display: inline-block; width: 6px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #2563eb; animation: blink 1s steps(1) infinite; }
+@keyframes blink { 50% { opacity: 0; } }
+.composer { position: absolute; left: 12px; right: 12px; bottom: 12px; border: 1px solid #cbd5e1; border-radius: 16px; background: #fff; padding: 10px; box-shadow: 0 8px 30px rgb(15 23 42 / 10%); }
+.composer textarea { width: 100%; resize: none; border: 0; outline: none; background: transparent; }
+.tab-mention-menu { position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(100% + 8px); max-height: min(45vh, 320px); overflow-y: auto; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; padding: 5px; box-shadow: 0 14px 40px rgb(15 23 42 / 14%); }
+.tab-mention-menu button { width: 100%; display: grid; gap: 2px; border: 0; border-radius: 8px; padding: 8px 10px; background: transparent; color: inherit; text-align: left; }
+.tab-mention-menu button:hover, .tab-mention-menu button.selected { background: #eff6ff; }
+.tab-mention-menu span, .tab-mention-menu small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.tab-mention-menu span { font-size: 12px; font-weight: 600; }
+.tab-mention-menu small, .tab-mention-empty { color: #64748b; font-size: 11px; }
+.tab-mention-empty { padding: 10px; }
+.composer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; }
+.composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+.composer-tools button { border: 0; background: transparent; padding: 3px; color: #475569; font-size: 11px; }
+.context-chip { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; border: 1px solid #bfdbfe; border-radius: 8px; padding: 6px 7px; color: #1e40af; background: #eff6ff; font-size: 11px; }
+.context-chip span { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.context-chip button { border: 0; background: transparent; color: inherit; padding: 2px 4px; }
+.context-chip.stale { border-color: #fbbf24; background: #fffbeb; color: #92400e; }
+.attachment-chip { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 7px; color: #475569; background: #f8fafc; font-size: 11px; }
+.attachment-chip span { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.attachment-chip button { border: 0; background: transparent; color: inherit; }
+.file-input { display: none; }
+.connection-label { color: #94a3b8; font-size: 11px; }
+.model-controls { display: flex; align-items: center; gap: 4px; margin-left: auto; }
+.model-controls select { min-width: 0; max-width: 120px; border: 0; background: transparent; color: #64748b; font-size: 11px; }
+.send-button, .stop-button { border: 0; border-radius: 999px; min-width: 34px; height: 34px; background: #2563eb; color: #fff; font-weight: 700; }
+.send-button:disabled { background: #94a3b8; cursor: default; }
+.stop-button { padding: 0 13px; }
+.composer-error { color: #dc2626; font-size: 12px; margin-bottom: 6px; }
+.clarification { margin: 0 0 10px; border: 1px solid #bfdbfe; border-radius: 11px; padding: 10px; background: #eff6ff; }
+.clarification strong { display: block; font-size: 12px; color: #1d4ed8; }
+.clarification p { margin: 6px 0 8px; font-size: 13px; line-height: 1.45; }
+.clarification > button, .clarification-actions button, .clarification-answer button { margin: 0 6px 6px 0; border: 1px solid #93c5fd; border-radius: 7px; padding: 5px 8px; background: #fff; color: #1e3a8a; font-size: 12px; }
+.clarification-answer { display: flex; gap: 6px; }
+.clarification-answer input { min-width: 0; flex: 1; border: 1px solid #93c5fd; border-radius: 7px; padding: 6px 8px; background: #fff; }
+.clarification-actions { margin-top: 3px; }
+.clarification-actions button { border-color: transparent; background: transparent; color: #64748b; }
+
+@media (prefers-color-scheme: dark) {
+  :root { background: #0f172a; color: #e2e8f0; }
+  .shell, .card { background: #111827; }
+  .header, .card { border-color: #334155; }
+  .field input, .field textarea, .secondary { border-color: #475569; color: #e2e8f0; }
+  .muted, .status { color: #94a3b8; }
+  .chat-toolbar { border-color: #334155; }
+  .session-menu, .composer, .tab-mention-menu { background: #111827; border-color: #475569; }
+  .session-menu > input { border-color: #334155; color: #e2e8f0; }
+  .session-list button { color: #e2e8f0; }
+  .session-list button:hover, .message.user { background: #1e293b; }
+  .tab-mention-menu button:hover, .tab-mention-menu button.selected { background: #1e293b; }
+  .clarification { border-color: #1e40af; background: #172554; }
+  .clarification strong { color: #93c5fd; }
+  .clarification > button, .clarification-answer button { border-color: #1d4ed8; background: #1e3a8a; color: #dbeafe; }
+  .clarification-answer input { border-color: #1d4ed8; background: #0f172a; color: #e2e8f0; }
+  .source-badge { border-color: #1e40af; color: #93c5fd; }
+  .composer-tools button { color: #94a3b8; }
+  .context-chip { border-color: #1e40af; background: #172554; color: #bfdbfe; }
+  .context-chip.stale { border-color: #92400e; background: #451a03; color: #fde68a; }
+  .attachment-chip { border-color: #475569; background: #1e293b; color: #cbd5e1; }
+}

package/dist/browser-ext/dist/background.js

@@ -1,4 +1,17 @@
-const BROWSER_EXTENSION_PROTOCOL_VERSION = 3;
+import { T as TAB_BINDING_PREFIX, d as captureTabPage, P as PENDING_CONTEXT_KEY, r as readProfile, u as signBrowserBridgeChallenge } from './assets/auth-CknJ00ae.js';
+
+const BROWSER_EXTENSION_PROTOCOL_VERSION = 4;
+function browserWireAuthenticationPayload(input) {
+  return [
+    "xopc-browser-extension-v4",
+    input.connectionId,
+    input.challenge,
+    String(input.issuedAt),
+    input.principalId,
+    input.extensionId,
+    input.extensionVersion
+  ].join("\n");
+}
 
 const XOPC_EXT_PORT = 19820;
 const XOPC_EXT_HOST = "127.0.0.1";
@@ -116,16 +129,6 @@ chrome.debugger.onDetach.addListener((source) => {
   if (source.tabId) attached.delete(source.tabId);
 });
 
-async function sendContentMessage(tabId, message) {
-  try {
-    await chrome.tabs.sendMessage(tabId, message);
-  } catch {
-  }
-}
-async function hideOverlayOnTab(tabId) {
-  await sendContentMessage(tabId, { type: "content/hide-overlay" });
-}
-
 const log$1 = createLogger("SessionManager");
 const XOPC_TAB_GROUP_TITLE = "xopc";
 const automationSessions = /* @__PURE__ */ new Map();
@@ -262,9 +265,6 @@ async function closeSession(workspace = DEFAULT_WORKSPACE) {
   if (!session) return;
   if (session.idleTimer) clearTimeout(session.idleTimer);
   const tabs = await chrome.tabs.query({ groupId: session.groupId }).catch(() => []);
-  for (const t of tabs) {
-    if (t.id != null) await hideOverlayOnTab(t.id);
-  }
   for (const t of tabs) {
     if (t.id != null) await chrome.tabs.remove(t.id).catch(() => {
     });
@@ -272,18 +272,58 @@ async function closeSession(workspace = DEFAULT_WORKSPACE) {
   automationSessions.delete(workspace);
   log$1.info("Closed automation session", { workspace });
 }
-async function closeAllSessions() {
-  for (const workspace of [...automationSessions.keys()]) {
-    await closeSession(workspace);
-  }
-}
 
 const observations = /* @__PURE__ */ new Map();
+async function markerDigest(tabId) {
+  const marker = await evaluate(tabId, `({ url: location.href, timeOrigin: performance.timeOrigin })`);
+  const url = new URL(marker.url);
+  url.username = "";
+  url.password = "";
+  url.hash = "";
+  const bytes = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(`${url.toString()}
+${marker.timeOrigin}`));
+  return [...new Uint8Array(bytes)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+async function resolveAttachedTarget(input) {
+  if (input.target?.kind !== "attached_tab") return void 0;
+  const key = `${TAB_BINDING_PREFIX}${input.target.bindingId}`;
+  const stored = await chrome.storage.session.get(key);
+  const binding = stored[key];
+  if (!binding || binding.id !== input.target.bindingId || binding.expiresAt <= Date.now()) {
+    return fail("SESSION_NOT_FOUND", "The attached tab binding is unavailable or expired.");
+  }
+  if (input.action === "navigate" || input.action === "tabs" || input.action === "sequence") {
+    return fail("INVALID_INPUT", `${input.action} is unavailable for an attached tab.`);
+  }
+  const needsAct = !["observe", "wait", "close"].includes(input.action);
+  if (needsAct && binding.mode !== "act") {
+    return fail("APPROVAL_REQUIRED", "This tab is attached in read-only mode. Enable Control tab in the side panel.");
+  }
+  const tabId = Number(binding.tabId);
+  const tab = Number.isInteger(tabId) ? await chrome.tabs.get(tabId).catch(() => null) : null;
+  if (!tab || String(tab.windowId) !== binding.windowId || !tab.url) {
+    return fail("SESSION_NOT_FOUND", "The attached tab is no longer available.");
+  }
+  let origin;
+  try {
+    origin = new URL(tab.url).origin;
+  } catch {
+    return fail("UNSUPPORTED_PAGE", "The attached tab URL is not supported.");
+  }
+  if (origin !== binding.urlOrigin) {
+    return fail("STALE_OBSERVATION", "The attached tab navigated to another site. Bind it again.");
+  }
+  if (await markerDigest(tabId) !== binding.documentId) {
+    return fail("STALE_OBSERVATION", "The attached tab document changed. Bind it again.");
+  }
+  return { binding, tabId, stateKey: `attached:${binding.id}` };
+}
 async function executeBrowserCommand(command) {
   const startedAt = Date.now();
   if (command.protocolVersion !== BROWSER_EXTENSION_PROTOCOL_VERSION) {
     return {
       id: command.id,
+      connectionId: command.connectionId,
       result: fail(
         "DRIVER_UNAVAILABLE",
         `Browser protocol mismatch. Expected ${BROWSER_EXTENSION_PROTOCOL_VERSION}; reload the xopc extension.`
@@ -292,10 +332,11 @@ async function executeBrowserCommand(command) {
   }
   try {
     const result = await execute(command.input, command.timeoutMs, command.visualFallback, startedAt);
-    return { id: command.id, result };
+    return { id: command.id, connectionId: command.connectionId, result };
   } catch (error) {
     return {
       id: command.id,
+      connectionId: command.connectionId,
       result: {
         ok: false,
         error: {
@@ -309,31 +350,34 @@ async function executeBrowserCommand(command) {
 async function execute(input, timeoutMs, visualFallback, startedAt) {
   const sessionId = input.sessionId;
   if (!sessionId) return fail("INVALID_INPUT", "Extension actions require a session id.");
+  const attached = await resolveAttachedTarget(input);
+  if (attached && !("binding" in attached)) return attached;
+  const stateKey = attached?.stateKey ?? sessionId;
   if (input.action === "close") {
-    await closeSession(sessionId);
-    observations.delete(sessionId);
+    if (!attached) await closeSession(sessionId);
+    observations.delete(stateKey);
     return success("close", "read", startedAt);
   }
   if (input.action === "observe") {
     const mode = input.visual === "always" ? "always" : input.visual === "never" || !visualFallback ? "never" : "auto";
-    const observation2 = await observe(sessionId, mode);
+    const observation2 = await observe(sessionId, mode, attached);
     return success("observe", "read", startedAt, observation2);
   }
   if (input.action === "navigate") {
-    const tabId2 = await getActiveTabId(sessionId);
+    const tabId2 = attached?.tabId ?? await getActiveTabId(sessionId);
     await chrome.tabs.update(tabId2, { url: input.url });
     await waitForTabLoad(tabId2, timeoutMs);
-    resetWindowIdleTimer(sessionId);
-    const observation2 = await observe(sessionId, visualFallback ? "auto" : "never");
+    if (!attached) resetWindowIdleTimer(sessionId);
+    const observation2 = await observe(sessionId, visualFallback ? "auto" : "never", attached);
     return verified(input, observation2, startedAt, "read");
   }
   if (input.action === "tabs") return tabs(sessionId, input, startedAt, timeoutMs);
   if (input.action === "sequence") return fail("INVALID_INPUT", "Sequences are expanded by the browser runtime.");
-  const current = observations.get(sessionId);
+  const current = observations.get(stateKey);
   if (!current || current.revision !== input.revision) {
-    return fail("STALE_OBSERVATION", "The page changed. Observe it again.", await observe(sessionId, "never"));
+    return fail("STALE_OBSERVATION", "The page changed. Observe it again.", await observe(sessionId, "never", attached));
   }
-  const tabId = await getActiveTabId(sessionId);
+  const tabId = attached?.tabId ?? await getActiveTabId(sessionId);
   const ref = "ref" in input ? input.ref : void 0;
   if (ref && !current.nodes.some((node) => node.ref === ref)) {
     return fail("TARGET_NOT_FOUND", `Target ${ref} was not found.`);
@@ -388,11 +432,11 @@ async function execute(input, timeoutMs, visualFallback, startedAt) {
     await sendCommand(tabId, "DOM.setFileInputFiles", { nodeId: query.nodeIds[0], files: input.paths });
   }
   await new Promise((resolve) => setTimeout(resolve, 200));
-  const observation = await observe(sessionId, visualFallback ? "auto" : "never");
+  const observation = await observe(sessionId, visualFallback ? "auto" : "never", attached);
   return verified(input, observation, startedAt, "draft");
 }
-async function observe(sessionId, visual) {
-  const tabId = await getActiveTabId(sessionId);
+async function observe(sessionId, visual, attached) {
+  const tabId = attached?.tabId ?? await getActiveTabId(sessionId);
   const tab = await chrome.tabs.get(tabId);
   const raw = await evaluate(tabId, `(() => {
     const selector = 'a[href],button,input:not([type="hidden"]),textarea,select,summary,[contenteditable="true"],[role="button"],[role="link"],[role="checkbox"],[role="radio"],[role="combobox"],[role="menuitem"],[role="option"],[role="tab"],[tabindex]:not([tabindex="-1"])';
@@ -428,10 +472,16 @@ async function observe(sessionId, visual) {
     }
     return { marker: location.href + '|' + performance.timeOrigin, nodes, hasVisualSurface: !!document.querySelector('canvas,embed[type="application/pdf"],object[type="application/pdf"]') };
   })()`);
-  const prior = observations.get(sessionId);
-  const state = prior?.documentMarker === raw.marker ? { ...prior, revision: prior.revision + 1, nodes: raw.nodes } : { documentMarker: raw.marker, documentId: crypto.randomUUID(), revision: 1, nodes: raw.nodes };
+  const stateKey = attached?.stateKey ?? sessionId;
+  const prior = observations.get(stateKey);
+  const state = prior?.documentMarker === raw.marker ? { ...prior, revision: prior.revision + 1, nodes: raw.nodes } : {
+    documentMarker: raw.marker,
+    documentId: attached && !prior ? attached.binding.documentId : crypto.randomUUID(),
+    revision: 1,
+    nodes: raw.nodes
+  };
   const changes = diff(prior?.documentMarker === raw.marker ? prior.nodes : [], raw.nodes);
-  observations.set(sessionId, state);
+  observations.set(stateKey, state);
   const capture = visual === "always" || visual === "auto" && (raw.nodes.length === 0 || raw.hasVisualSurface);
   const image = capture ? await captureScreenshot(tabId, { format: "jpeg", quality: 70}) : void 0;
   return {
@@ -541,45 +591,92 @@ let reconnectTimer = null;
 let keepAliveTimer = null;
 let reconnectDelay = WS_RECONNECT_BASE_DELAY;
 let intentionalClose = false;
-function connect() {
+let authenticatedConnectionId = null;
+async function authenticate(socket, challenge) {
+  if (challenge.protocolVersion !== BROWSER_EXTENSION_PROTOCOL_VERSION) {
+    socket.close(4406, "Browser protocol mismatch");
+    return;
+  }
+  const profile = await readProfile();
+  if (!profile) {
+    socket.close(4401, "Browser is not paired");
+    return;
+  }
+  const extensionVersion = chrome.runtime.getManifest().version;
+  const unsigned = {
+    connectionId: challenge.connectionId,
+    challenge: challenge.challenge,
+    issuedAt: challenge.issuedAt,
+    principalId: profile.deviceId,
+    extensionId: chrome.runtime.id,
+    extensionVersion
+  };
+  const message = {
+    type: "authenticate",
+    protocolVersion: BROWSER_EXTENSION_PROTOCOL_VERSION,
+    connectionId: challenge.connectionId,
+    principalId: profile.deviceId,
+    extensionId: chrome.runtime.id,
+    extensionVersion,
+    signature: await signBrowserBridgeChallenge(browserWireAuthenticationPayload(unsigned))
+  };
+  socket.send(JSON.stringify(message));
+  authenticatedConnectionId = challenge.connectionId;
+  sendStatus(profile.deviceId);
+  startKeepAlive();
+}
+async function connect() {
+  if (!await readProfile()) return;
   if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return;
   intentionalClose = false;
+  authenticatedConnectionId = null;
   const socket = new WebSocket(XOPC_EXT_WS_URL);
   ws = socket;
   socket.onopen = () => {
-    if (ws !== socket) {
-      socket.close();
-      return;
-    }
-    reconnectDelay = WS_RECONNECT_BASE_DELAY;
-    sendStatus();
-    startKeepAlive();
-    log.info("Connected to xopc daemon");
+    if (ws !== socket) socket.close();
   };
   socket.onmessage = async (event) => {
     if (ws !== socket) return;
     try {
-      const command = JSON.parse(String(event.data));
-      const result = await executeBrowserCommand(command);
+      const value = JSON.parse(String(event.data));
+      if (value.type === "auth_challenge") {
+        await authenticate(socket, value);
+        reconnectDelay = WS_RECONNECT_BASE_DELAY;
+        log.info("Authenticated with xopc browser bridge");
+        return;
+      }
+      if (!authenticatedConnectionId || value.connectionId !== authenticatedConnectionId) {
+        throw new Error("Browser command arrived before authentication or for a stale connection");
+      }
+      const result = await executeBrowserCommand(value);
       if (socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify(result));
     } catch (error) {
-      log.error("Failed to process browser command", { error: error instanceof Error ? error.message : String(error) });
+      log.error("Failed to process browser bridge message", {
+        error: error instanceof Error ? error.message : String(error)
+      });
     }
   };
   socket.onclose = (event) => {
     if (ws !== socket) return;
     stopKeepAlive();
     ws = null;
-    log.warn("Disconnected from xopc daemon", { code: event.code, reason: event.reason, wasClean: event.wasClean });
-    if (!intentionalClose) scheduleReconnect();
+    authenticatedConnectionId = null;
+    log.warn("Disconnected from xopc browser bridge", {
+      code: event.code,
+      reason: event.reason,
+      wasClean: event.wasClean
+    });
+    if (!intentionalClose && event.code !== 4401) scheduleReconnect();
   };
 }
-function sendStatus() {
-  if (ws?.readyState !== WebSocket.OPEN) return;
+function sendStatus(principalId) {
+  if (ws?.readyState !== WebSocket.OPEN || !authenticatedConnectionId) return;
   const status = {
     type: "status",
     protocolVersion: BROWSER_EXTENSION_PROTOCOL_VERSION,
     extensionVersion: chrome.runtime.getManifest().version,
+    connectionId: authenticatedConnectionId,
+    principalId,
     connected: true,
     sessionCount: automationSessions.size
   };
@@ -588,11 +685,15 @@ function sendStatus() {
 function startKeepAlive() {
   stopKeepAlive();
   keepAliveTimer = setInterval(() => {
-    if (ws?.readyState !== WebSocket.OPEN) {
+    if (ws?.readyState !== WebSocket.OPEN || !authenticatedConnectionId) {
       stopKeepAlive();
       return;
     }
-    const message = { type: "keepalive", timestamp: Date.now() };
+    const message = {
+      type: "keepalive",
+      connectionId: authenticatedConnectionId,
+      timestamp: Date.now()
+    };
     ws.send(JSON.stringify(message));
   }, WS_KEEPALIVE_INTERVAL);
 }
@@ -605,7 +706,7 @@ function scheduleReconnect() {
   reconnectTimer = setTimeout(() => {
     reconnectTimer = null;
     reconnectDelay = Math.min(reconnectDelay * 1.5, WS_RECONNECT_MAX_DELAY);
-    connect();
+    void connect();
   }, reconnectDelay);
 }
 function disconnect() {
@@ -615,26 +716,57 @@ function disconnect() {
   reconnectTimer = null;
   ws?.close();
   ws = null;
+  authenticatedConnectionId = null;
 }
 chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-  if (message.type === "popup/get-status") sendResponse({ connected: ws?.readyState === WebSocket.OPEN, url: XOPC_EXT_WS_URL });
-  else if (message.type === "popup/connect") {
-    connect();
-    sendResponse({ ok: true });
-  } else if (message.type === "popup/disconnect") {
+  if (message.type === "browser/get-status") {
+    sendResponse({ connected: Boolean(authenticatedConnectionId), url: XOPC_EXT_WS_URL });
+  } else if (message.type === "browser/reconnect") {
     disconnect();
+    intentionalClose = false;
+    void connect();
     sendResponse({ ok: true });
-  } else sendResponse({ ok: false, error: `Unknown message: ${message.type}` });
+  } else {
+    sendResponse({ ok: false, error: `Unknown message: ${message.type}` });
+  }
   return true;
 });
-chrome.runtime.onInstalled.addListener(connect);
-chrome.runtime.onStartup.addListener(connect);
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId !== "xopc-ask-selection" || !tab?.id) return;
+  const tabId = tab.id;
+  void captureTabPage(tabId, "selection").then(async (context) => {
+    await chrome.storage.session.set({
+      [PENDING_CONTEXT_KEY]: { context, tabId, source: "current_selection" }
+    });
+    await chrome.sidePanel.open({ tabId });
+  }).catch((error) => log.warn("Could not attach selected page text", {
+    error: error instanceof Error ? error.message : String(error)
+  }));
+});
+chrome.runtime.onInstalled.addListener(() => {
+  void chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
+  chrome.contextMenus.removeAll(() => {
+    chrome.contextMenus.create({
+      id: "xopc-ask-selection",
+      title: "Ask xopc about “%s”",
+      contexts: ["selection"]
+    });
+  });
+  void connect();
+});
+chrome.runtime.onStartup.addListener(() => {
+  void connect();
+});
+chrome.storage.onChanged.addListener((changes, area) => {
+  if (area === "local" && changes["xopc.browser.profile"]) {
+    disconnect();
+    intentionalClose = false;
+    void connect();
+  }
+});
 chrome.alarms.onAlarm.addListener((alarm) => {
-  if (alarm.name === WS_WATCHDOG_ALARM && !intentionalClose) connect();
+  if (alarm.name === WS_WATCHDOG_ALARM && !intentionalClose) void connect();
 });
 void chrome.alarms.create(WS_WATCHDOG_ALARM, { periodInMinutes: WS_WATCHDOG_PERIOD_MINUTES });
-connect();
-self.addEventListener("beforeunload", () => {
-  disconnect();
-  void closeAllSessions();
-});
+void chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
+void connect();

package/dist/browser-ext/dist/sidepanel.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>xopc</title>
+    <script type="module" crossorigin src="/sidepanel.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/auth-CknJ00ae.js">
+    <link rel="stylesheet" crossorigin href="/assets/sidepanel-C69P3v9u.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>