@xopcai/xopc 0.0.267 → 0.0.268

package/dist/browser-ext/dist/assets/{auth-D_IL6naL.js → auth-cwEj8rFb.js}

@@ -5757,15 +5757,57 @@ function truncateUtf8(value, maxBytes) {
   return { value: value.slice(0, low), truncated: true };
 }
 function sanitizedUrl(raw) {
-  const url = new URL(raw);
+  let url;
+  try {
+    url = new URL(raw);
+  } catch {
+    throw new Error("This tab does not have a valid web address");
+  }
   if (url.protocol !== "http:" && url.protocol !== "https:") {
-    throw new Error("This page cannot be attached");
+    throw new Error("Chrome does not allow xopc to read this page. Open a regular http(s) page and try again.");
+  }
+  if (url.hostname === "chromewebstore.google.com" || url.hostname === "chrome.google.com" && url.pathname.startsWith("/webstore")) {
+    throw new Error("Chrome does not allow extensions to read Chrome Web Store pages.");
   }
   url.username = "";
   url.password = "";
   url.hash = "";
   return url.toString();
 }
+function siteAccessError(cause, url) {
+  const message = cause instanceof Error ? cause.message : String(cause);
+  const hostname = new URL(url).hostname;
+  if (/cannot access|cannot be scripted|missing host permission|extensions gallery|chrome web store/i.test(message)) {
+    return new Error(`Chrome blocked access to ${hostname}. Check xopc's site access for this page and try again.`);
+  }
+  return cause instanceof Error ? cause : new Error(message);
+}
+async function runWithTabSiteAccess(tabId, operation) {
+  const tab = await chrome.tabs.get(tabId);
+  if (tab.id === void 0 || tab.windowId === void 0 || !tab.url) {
+    throw new Error("The selected tab is no longer available");
+  }
+  const url = sanitizedUrl(tab.url);
+  const originPattern = `${new URL(url).origin}/*`;
+  const alreadyGranted = await chrome.permissions.contains({ origins: [originPattern] });
+  let newlyGranted = false;
+  if (!alreadyGranted) {
+    let granted = false;
+    try {
+      granted = await chrome.permissions.request({ origins: [originPattern] });
+    } catch (cause) {
+      throw siteAccessError(cause, url);
+    }
+    if (!granted) throw new Error(`Allow xopc to access ${new URL(url).hostname} to continue.`);
+    newlyGranted = true;
+  }
+  try {
+    return await operation({ ...tab, id: tab.id, windowId: tab.windowId, url });
+  } catch (cause) {
+    if (newlyGranted) await chrome.permissions.remove({ origins: [originPattern] }).catch(() => false);
+    throw siteAccessError(cause, url);
+  }
+}
 async function sha256(value) {
   const bytes = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(value));
   return [...new Uint8Array(bytes)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
@@ -5815,6 +5857,9 @@ async function captureTabPage(tabId, mode) {
   const raw = result[0]?.result;
   if (!raw) throw new Error("Could not read this page");
   const url = sanitizedUrl(raw.url);
+  if (new URL(url).origin !== new URL(sanitizedUrl(tab.url)).origin) {
+    throw new Error("The page changed while xopc was reading it. Try again.");
+  }
   const selected = raw.selection ? truncateUtf8(raw.selection, MAX_BROWSER_SELECTION_BYTES) : void 0;
   const page = raw.text ? truncateUtf8(raw.text, MAX_BROWSER_PAGE_TEXT_BYTES) : void 0;
   const canonical = {
@@ -5834,16 +5879,8 @@ ${raw.timeOrigin}`),
     truncated: selected?.truncated === true || page?.truncated === true
   };
 }
-async function captureTabWithPermission(tabId, url, mode) {
-  const originPattern = `${new URL(sanitizedUrl(url)).origin}/*`;
-  const alreadyGranted = await chrome.permissions.contains({ origins: [originPattern] });
-  const granted = alreadyGranted || await chrome.permissions.request({ origins: [originPattern] });
-  if (!granted) throw new Error("Site access is required to attach this tab");
-  try {
-    return await captureTabPage(tabId, mode);
-  } finally {
-    if (!alreadyGranted) await chrome.permissions.remove({ origins: [originPattern] });
-  }
+async function captureTabWithPermission(tabId, mode) {
+  return runWithTabSiteAccess(tabId, () => captureTabPage(tabId, mode));
 }
 async function activeTabId() {
   return (await chrome.tabs.query({ active: true, currentWindow: true }))[0]?.id;
@@ -5851,21 +5888,91 @@ async function activeTabId() {
 async function currentTabDescriptor() {
   const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
   if (tab.id === void 0 || tab.windowId === void 0 || !tab.url) throw new Error("No active web page");
-  sanitizedUrl(tab.url);
-  const result = await chrome.scripting.executeScript({
-    target: { tabId: tab.id },
-    func: () => ({ url: location.href, timeOrigin: performance.timeOrigin })
-  });
-  const marker = result[0]?.result;
-  if (!marker) throw new Error("Could not identify this page");
-  const currentUrl = sanitizedUrl(marker.url);
-  return {
-    tabId: String(tab.id),
-    windowId: String(tab.windowId),
-    documentId: await sha256(`${currentUrl}
+  return runWithTabSiteAccess(tab.id, async (accessibleTab) => {
+    const result = await chrome.scripting.executeScript({
+      target: { tabId: accessibleTab.id },
+      func: () => ({ url: location.href, timeOrigin: performance.timeOrigin })
+    });
+    const marker = result[0]?.result;
+    if (!marker) throw new Error("Could not identify this page");
+    const currentUrl = sanitizedUrl(marker.url);
+    if (new URL(currentUrl).origin !== new URL(accessibleTab.url).origin) {
+      throw new Error("The page changed while xopc was connecting to it. Try again.");
+    }
+    return {
+      tabId: String(accessibleTab.id),
+      windowId: String(accessibleTab.windowId),
+      documentId: await sha256(`${currentUrl}
 ${marker.timeOrigin}`),
-    urlOrigin: new URL(currentUrl).origin
-  };
+      urlOrigin: new URL(currentUrl).origin
+    };
+  });
+}
+
+const DATABASE_NAME = "xopc-browser-chat-state";
+const DATABASE_VERSION = 1;
+const OUTBOX_STORE = "outbox";
+function openDatabase() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DATABASE_NAME, DATABASE_VERSION);
+    request.onupgradeneeded = () => {
+      if (!request.result.objectStoreNames.contains(OUTBOX_STORE)) {
+        request.result.createObjectStore(OUTBOX_STORE);
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error ?? new Error("Could not open the browser chat outbox"));
+  });
+}
+function transactionResult(database, mode, createRequest) {
+  return new Promise((resolve, reject) => {
+    const transaction = database.transaction(OUTBOX_STORE, mode);
+    const request = createRequest(transaction.objectStore(OUTBOX_STORE));
+    let result;
+    request.onsuccess = () => {
+      result = request.result;
+    };
+    request.onerror = () => reject(request.error ?? new Error("Browser chat outbox request failed"));
+    transaction.oncomplete = () => resolve(result);
+    transaction.onerror = () => reject(transaction.error ?? new Error("Browser chat outbox transaction failed"));
+    transaction.onabort = () => reject(transaction.error ?? new Error("Browser chat outbox transaction was aborted"));
+  });
+}
+async function readBrowserOutbox(sessionKey) {
+  const database = await openDatabase();
+  try {
+    return await transactionResult(
+      database,
+      "readonly",
+      (store) => store.get(sessionKey)
+    );
+  } finally {
+    database.close();
+  }
+}
+async function writeBrowserOutbox(sessionKey, value) {
+  const database = await openDatabase();
+  try {
+    await transactionResult(database, "readwrite", (store) => store.put(value, sessionKey));
+  } finally {
+    database.close();
+  }
+}
+async function deleteBrowserOutbox(sessionKey) {
+  const database = await openDatabase();
+  try {
+    await transactionResult(database, "readwrite", (store) => store.delete(sessionKey));
+  } finally {
+    database.close();
+  }
+}
+async function clearBrowserOutboxes() {
+  const database = await openDatabase();
+  try {
+    await transactionResult(database, "readwrite", (store) => store.clear());
+  } finally {
+    database.close();
+  }
 }
 
 const PROFILE_KEY = "xopc.browser.profile";
@@ -6234,11 +6341,15 @@ async function revokeAndForgetProfile() {
   } finally {
     await forgetProfile();
     try {
-      await forgetIdentity();
+      await clearBrowserOutboxes();
     } finally {
-      await setAutoConnectEnabled(false);
+      try {
+        await forgetIdentity();
+      } finally {
+        await setAutoConnectEnabled(false);
+      }
     }
   }
 }
 
-export { ENDPOINT_PROTOCOL_VERSION as E, PENDING_CONTEXT_KEY as P, RealtimeClient as R, TAB_BINDING_PREFIX as T, activeTabId as a, captureTabPage as b, canonicalJson as c, captureTabWithPermission as d, createBrowserEndpointHello as e, currentTabDescriptor as f, discoverLocalGateway as g, endpointToolContentSchema as h, gatewayFetch as i, getAccessProfile as j, registerBrowserEndpoint as k, revokeAndForgetProfile as l, pairGateway as p, readProfile as r, setAutoConnectEnabled as s };
+export { ENDPOINT_PROTOCOL_VERSION as E, PENDING_CONTEXT_KEY as P, RealtimeClient as R, TAB_BINDING_PREFIX as T, activeTabId as a, captureTabWithPermission as b, canonicalJson as c, createBrowserEndpointHello as d, currentTabDescriptor as e, deleteBrowserOutbox as f, discoverLocalGateway as g, endpointToolContentSchema as h, gatewayFetch as i, getAccessProfile as j, readProfile as k, registerBrowserEndpoint as l, revokeAndForgetProfile as m, runWithTabSiteAccess as n, pairGateway as p, readBrowserOutbox as r, setAutoConnectEnabled as s, writeBrowserOutbox as w };

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

@@ -0,0 +1,299 @@
+:root {
+  color-scheme: light dark;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
+
+  /* Keep the extension aligned with the Gateway's default Calm Intelligence theme. */
+  --surface-base: #f7f8fa;
+  --surface-panel: #ffffff;
+  --surface-hover: #e8ecf1;
+  --surface-active: #dfe5ec;
+  --fg: #111111;
+  --fg-muted: #666666;
+  --fg-subtle: #999999;
+  --fg-disabled: #b8b8b8;
+  --edge-subtle: #f2f2f2;
+  --edge: #ececec;
+  --edge-strong: #d8dce8;
+  --accent: #3a6bff;
+  --accent-hover: #315ce6;
+  --accent-soft: #eef3ff;
+  --accent-fg: #2f5ef6;
+  --success: #2ccb7f;
+  --success-soft: #e7fbf1;
+  --danger: #ff5d5d;
+  --danger-soft: #fff0f0;
+  --warning: #ffb84d;
+  --warning-soft: #fff7e8;
+  --shadow-surface: 0 1px 2px rgb(17 17 17 / 4%), 0 6px 18px rgb(17 17 17 / 4%);
+  --shadow-popover: 0 10px 32px rgb(17 17 17 / 10%), 0 2px 10px rgb(17 17 17 / 6%);
+
+  background: var(--surface-base);
+  color: var(--fg);
+}
+
+:root[data-theme='dark'] {
+    --surface-base: #14171c;
+    --surface-panel: #1b1f26;
+    --surface-hover: #242933;
+    --surface-active: #2e3440;
+    --fg: #f4f6f8;
+    --fg-muted: #b8bec8;
+    --fg-subtle: #87909d;
+    --fg-disabled: #626b78;
+    --edge-subtle: #252932;
+    --edge: #323844;
+    --edge-strong: #465061;
+    --accent: #3a6bff;
+    --accent-hover: #6f91ff;
+    --accent-soft: rgb(58 107 255 / 0.2);
+    --accent-fg: #adc0ff;
+    --success: #2ccb7f;
+    --success-soft: rgb(44 203 127 / 0.16);
+    --danger: #ff5d5d;
+    --danger-soft: rgb(255 93 93 / 0.16);
+    --warning: #ffb84d;
+    --warning-soft: rgb(255 184 77 / 0.16);
+    --shadow-surface: 0 0 0 1px rgb(255 255 255 / 4.5%);
+  --shadow-popover: 0 18px 54px rgb(0 0 0 / 38%), 0 0 0 1px rgb(255 255 255 / 5%);
+}
+
+* { box-sizing: border-box; }
+html, body, #root { height: 100%; margin: 0; }
+html { background: var(--surface-base); color: var(--fg); -webkit-font-smoothing: antialiased; }
+body { overflow: hidden; font-size: 14px; }
+button, input, textarea, select { font: inherit; }
+button { cursor: pointer; color: inherit; }
+button:disabled { cursor: default; }
+button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+input::placeholder, textarea::placeholder { color: var(--fg-disabled); }
+svg { display: block; }
+
+.shell { height: 100%; min-width: 300px; display: flex; flex-direction: column; background: var(--surface-base); }
+.header { height: 48px; flex: 0 0 48px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--edge); background: color-mix(in srgb, var(--surface-panel) 92%, transparent); }
+.brand { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
+.brand-mark { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--edge); border-radius: 8px; background: var(--surface-panel); color: var(--accent); box-shadow: 0 1px 2px rgb(17 17 17 / 5%); }
+.brand-mark svg { width: 15px; height: 15px; stroke-width: 1.7; }
+.status { margin-right: 76px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-muted); }
+.status-dot, .mini-status { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 999px; background: var(--fg-disabled); }
+.status-dot.online, .mini-status.online { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 12%, transparent); }
+.status-dot.error { background: var(--danger); }
+.disconnect-link { position: absolute; z-index: 3; top: 13px; right: 13px; border: 0; border-radius: 6px; padding: 3px 7px; background: transparent; color: var(--fg-muted); font-size: 11px; }
+.disconnect-link:hover { background: var(--surface-hover); color: var(--fg); }
+
+.center { flex: 1; display: grid; place-items: center; padding: 24px; overflow: auto; }
+.card { width: min(100%, 420px); border: 1px solid var(--edge); border-radius: 16px; padding: 22px; background: var(--surface-panel); box-shadow: var(--shadow-surface); }
+.card h1 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
+.muted { color: var(--fg-muted); line-height: 1.55; font-size: 13px; }
+.field { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; }
+.field input, .field textarea { width: 100%; border: 1px solid var(--edge-strong); border-radius: 9px; padding: 10px 12px; background: var(--surface-panel); color: var(--fg); }
+.primary { border: 0; border-radius: 9px; background: var(--accent); color: #fff; padding: 10px 14px; font-weight: 600; transition: background-color 150ms ease; }
+.primary:hover:not(:disabled) { background: var(--accent-hover); }
+.primary:disabled { background: var(--surface-active); color: var(--fg-disabled); }
+.secondary { border: 1px solid var(--edge-strong); border-radius: 9px; background: var(--surface-panel); padding: 8px 12px; }
+.secondary:hover { background: var(--surface-hover); }
+.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: var(--fg-subtle); font-size: 11px; }
+.pairing-divider::before, .pairing-divider::after { content: ""; height: 1px; flex: 1; background: var(--edge); }
+.error-text { color: var(--danger); font-size: 13px; margin-top: 10px; }
+.approval-code { font: 700 28px ui-monospace, "SF Mono", monospace; letter-spacing: 5px; margin: 18px 0; color: var(--accent-fg); }
+
+.chat { min-height: 0; flex: 1; display: flex; flex-direction: column; position: relative; background: var(--surface-base); }
+.chat-toolbar { min-height: 54px; flex: 0 0 54px; border-bottom: 1px solid var(--edge); display: flex; align-items: center; padding: 6px 12px; gap: 8px; background: var(--surface-panel); }
+.session-trigger { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 9px; padding: 5px 7px; background: transparent; text-align: left; }
+.session-trigger:hover { background: var(--surface-hover); }
+.session-trigger-copy { min-width: 0; flex: 1; display: grid; gap: 1px; }
+.session-title { overflow: hidden; color: var(--fg); font-size: 13px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
+.session-status { display: flex; align-items: center; gap: 5px; color: var(--fg-subtle); font-size: 10px; }
+.icon-sm { width: 15px; height: 15px; color: var(--fg-muted); }
+.icon-button, .composer-icon-button { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--edge); border-radius: 9px; background: var(--surface-panel); transition: background-color 120ms ease, border-color 120ms ease; }
+.icon-button svg, .composer-icon-button svg { width: 17px; height: 17px; }
+.icon-button:hover, .composer-icon-button:hover, .composer-icon-button.active { border-color: var(--edge-strong); background: var(--surface-hover); }
+
+.session-menu { position: absolute; z-index: 10; top: 8px; left: 10px; right: 10px; max-height: min(68vh, 520px); overflow: hidden; border: 1px solid var(--edge-strong); border-radius: 14px; background: var(--surface-panel); padding: 8px; box-shadow: var(--shadow-popover); }
+.session-menu-header { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 5px 0 8px; font-size: 13px; }
+.session-menu-header button { width: 27px; height: 27px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--fg-muted); }
+.session-menu-header button:hover { background: var(--surface-hover); }
+.session-menu-header svg { width: 15px; height: 15px; }
+.session-search { height: 36px; display: flex; align-items: center; gap: 7px; margin: 3px 2px 6px; border: 1px solid var(--edge); border-radius: 9px; padding: 0 10px; background: var(--surface-base); color: var(--fg-subtle); }
+.session-search svg { width: 15px; height: 15px; }
+.session-search input { min-width: 0; flex: 1; border: 0; outline: none; background: transparent; color: var(--fg); font-size: 12px; }
+.session-list { overflow-y: auto; max-height: calc(min(68vh, 520px) - 95px); }
+.session-list button { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 9px; padding: 7px 9px; background: transparent; text-align: left; }
+.session-list button:hover, .session-list button.active { background: var(--surface-hover); }
+.session-list button:disabled { opacity: .55; }
+.session-list button > svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }
+.session-list-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
+.session-list-copy span { overflow: hidden; font-size: 12px; font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
+.session-list-copy small { color: var(--fg-subtle); font-size: 10px; }
+.session-list-empty { padding: 24px 10px; color: var(--fg-subtle); font-size: 12px; text-align: center; }
+
+.connection-banner { min-height: 38px; flex: 0 0 auto; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid color-mix(in srgb, var(--danger) 18%, var(--edge)); padding: 7px 13px; background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 78%, var(--fg)); font-size: 10px; line-height: 1.35; }
+.connection-banner > svg { width: 14px; height: 14px; flex: 0 0 auto; }
+.connection-banner > span { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.connection-banner button { flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--edge)); border-radius: 7px; padding: 4px 8px; background: var(--surface-panel); color: inherit; font-size: 10px; font-weight: 620; }
+.connection-banner button:hover { background: var(--surface-hover); }
+.messages-shell { min-height: 0; flex: 1; position: relative; display: flex; }
+.messages { width: 100%; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px max(14px, calc((100% - 720px) / 2)) 20px; scrollbar-gutter: stable; }
+.scroll-bottom-button { position: absolute; z-index: 4; right: 17px; bottom: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--edge-strong); border-radius: 999px; background: color-mix(in srgb, var(--surface-panel) 94%, transparent); color: var(--fg-muted); box-shadow: var(--shadow-popover); backdrop-filter: blur(8px); }
+.scroll-bottom-button:hover { background: var(--surface-hover); color: var(--fg); }
+.scroll-bottom-button svg { width: 16px; height: 16px; }
+.message-skeleton { width: min(100%, 720px); margin: 6px auto; display: grid; gap: 10px; }
+.message-skeleton span { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-hover), var(--surface-active), var(--surface-hover)); background-size: 200% 100%; animation: skeleton 1.3s ease-in-out infinite; }
+.message-skeleton span:nth-child(1) { width: 38%; }
+.message-skeleton span:nth-child(2) { width: 92%; }
+.message-skeleton span:nth-child(3) { width: 68%; }
+.empty-chat { width: min(100%, 520px); min-height: 100%; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px 4px 48px; text-align: center; }
+.empty-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--edge)); border-radius: 13px; background: var(--accent-soft); color: var(--accent-fg); }
+.empty-mark svg { width: 21px; height: 21px; }
+.empty-chat h1 { margin: 0; font-size: 19px; font-weight: 680; letter-spacing: -.025em; }
+.empty-chat > p { max-width: 390px; margin: 8px 0 20px; color: var(--fg-muted); font-size: 12px; line-height: 1.55; }
+.quick-prompts { width: min(100%, 420px); display: grid; gap: 7px; }
+.quick-prompts button { min-height: 42px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--edge); border-radius: 11px; padding: 9px 12px; background: var(--surface-panel); color: var(--fg-muted); text-align: left; transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease; }
+.quick-prompts button:hover { border-color: var(--edge-strong); background: var(--surface-hover); color: var(--fg); transform: translateY(-1px); }
+.quick-prompts svg { width: 17px; height: 17px; color: var(--accent-fg); }
+.quick-prompts span { font-size: 12px; font-weight: 550; }
+
+.message { width: min(100%, 720px); margin: 0 auto 26px; color: var(--fg); }
+.message-heading { min-height: 22px; display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--fg-subtle); font-size: 10px; }
+.message-author { color: var(--fg-muted); font-size: 11px; font-weight: 680; letter-spacing: .015em; }
+.message-heading time { opacity: 0; transition: opacity 120ms ease; }
+.message:hover .message-heading time { opacity: 1; }
+.responding-label { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-fg); }
+.responding-label::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
+.message-body { min-width: 0; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
+.message.user { width: min(88%, 620px); margin-right: max(0px, calc((100% - 720px) / 2)); }
+.message.user .message-heading { justify-content: flex-end; padding-right: 4px; }
+.message.user .message-body { border: 1px solid var(--edge); border-radius: 15px 15px 4px 15px; padding: 10px 13px; background: var(--surface-panel); box-shadow: 0 1px 2px rgb(17 17 17 / 3%); }
+.message.system .message-body { border-left: 2px solid var(--edge-strong); padding-left: 11px; color: var(--fg-muted); font-size: 12px; }
+.plain-message-content { white-space: pre-wrap; }
+.message-sources { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
+.source-badge { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--edge)); border-radius: 999px; padding: 4px 8px; color: var(--accent-fg); background: var(--accent-soft); font-size: 10px; }
+.source-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
+.source-badge span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
+.message-attachment { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 7px; border: 1px solid var(--edge); border-radius: 9px; padding: 6px 8px; background: var(--surface-base); color: var(--fg-muted); }
+.message-attachment > svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent-fg); }
+.message-attachment > span { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
+.message-attachment strong { max-width: min(280px, 58vw); overflow: hidden; font-size: 10px; font-weight: 620; white-space: nowrap; text-overflow: ellipsis; }
+.message-attachment small { flex: 0 0 auto; color: var(--fg-subtle); font-size: 9px; }
+.message-actions { height: 24px; display: flex; align-items: center; margin-top: 4px; opacity: 0; transition: opacity 120ms ease; }
+.message:hover .message-actions, .message-actions:focus-within { opacity: 1; }
+.message-actions button { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 6px; padding: 3px 6px; background: transparent; color: var(--fg-subtle); font-size: 10px; }
+.message-actions button:hover { background: var(--surface-hover); color: var(--fg-muted); }
+.message-actions svg { width: 13px; height: 13px; }
+
+.markdown-content { min-width: 0; }
+.markdown-content > div > :first-child { margin-top: 0; }
+.markdown-content > div > :last-child { margin-bottom: 0; }
+.markdown-content p { margin: 0 0 10px; }
+.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 { margin: 20px 0 8px; color: var(--fg); font-weight: 680; line-height: 1.3; letter-spacing: -.018em; }
+.markdown-content h1 { font-size: 19px; }
+.markdown-content h2 { font-size: 17px; }
+.markdown-content h3 { font-size: 15px; }
+.markdown-content h4 { font-size: 14px; }
+.markdown-content ul, .markdown-content ol { margin: 8px 0 12px; padding-left: 22px; }
+.markdown-content li { margin: 4px 0; padding-left: 2px; }
+.markdown-content li::marker { color: var(--fg-subtle); }
+.markdown-content strong { font-weight: 680; }
+.markdown-content a { color: var(--accent-fg); text-decoration: none; }
+.markdown-content a:hover { text-decoration: underline; text-underline-offset: 2px; }
+.markdown-content blockquote { margin: 12px 0; border-left: 3px solid var(--edge-strong); padding: 2px 0 2px 12px; color: var(--fg-muted); }
+.markdown-content code { border: 1px solid var(--edge); border-radius: 5px; padding: 1px 4px; background: var(--surface-hover); font: .88em ui-monospace, "SFMono-Regular", Consolas, monospace; }
+.markdown-content pre { max-width: 100%; margin: 12px 0; overflow-x: auto; border: 1px solid var(--edge); border-radius: 10px; padding: 11px 12px; background: color-mix(in srgb, var(--surface-hover) 65%, var(--surface-panel)); font-size: 12px; line-height: 1.55; }
+.markdown-content pre code { border: 0; padding: 0; background: transparent; font-size: inherit; }
+.markdown-content table { width: 100%; display: block; margin: 12px 0; overflow-x: auto; border-collapse: collapse; font-size: 12px; }
+.markdown-content th, .markdown-content td { border: 1px solid var(--edge); padding: 6px 8px; text-align: left; }
+.markdown-content th { background: var(--surface-hover); font-weight: 650; }
+.markdown-content hr { border: 0; border-top: 1px solid var(--edge); margin: 18px 0; }
+.streaming-caret { display: inline-block; width: 6px; height: 14px; margin-left: 3px; vertical-align: -2px; border-radius: 2px; background: var(--accent); animation: blink 1s steps(1) infinite; }
+@keyframes blink { 50% { opacity: 0; } }
+@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
+@keyframes skeleton { to { background-position: -200% 0; } }
+
+.composer { position: relative; flex: 0 0 auto; margin: 0 10px 10px; border: 1px solid var(--edge-strong); border-radius: 15px; background: var(--surface-panel); padding: 8px; box-shadow: var(--shadow-surface); transition: border-color 120ms ease, box-shadow 120ms ease; }
+.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--edge)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent), var(--shadow-surface); }
+.composer.dragging { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent), var(--shadow-surface); }
+.file-drop-overlay { position: absolute; z-index: 20; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 14px; background: color-mix(in srgb, var(--accent-soft) 94%, var(--surface-panel)); color: var(--accent-fg); font-size: 12px; font-weight: 650; pointer-events: none; }
+.file-drop-overlay svg { width: 17px; height: 17px; }
+.composer-input-row { min-height: 38px; display: flex; align-items: flex-end; gap: 7px; }
+.composer textarea { min-width: 0; min-height: 34px; max-height: 144px; flex: 1; resize: none; overflow-y: auto; border: 0; padding: 7px 2px 6px; outline: none; background: transparent; color: var(--fg); font-size: 13px; line-height: 1.5; }
+.composer-icon-button { width: 34px; height: 34px; border-color: transparent; color: var(--fg-muted); }
+.tools-anchor { position: relative; flex: 0 0 auto; }
+.tools-menu { position: absolute; z-index: 12; left: -1px; bottom: calc(100% + 9px); width: min(310px, calc(100vw - 38px)); overflow: hidden; border: 1px solid var(--edge-strong); border-radius: 13px; background: var(--surface-panel); padding: 6px; box-shadow: var(--shadow-popover); }
+.tools-menu-section + .tools-menu-section { margin-top: 5px; border-top: 1px solid var(--edge); padding-top: 5px; }
+.tools-menu-label { display: block; padding: 5px 8px 4px; color: var(--fg-subtle); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.tools-menu button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px; padding: 7px 8px; background: transparent; text-align: left; }
+.tools-menu button:hover { background: var(--surface-hover); }
+.tools-menu button > svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--fg-muted); }
+.tools-menu button > span { min-width: 0; flex: 1; display: grid; gap: 1px; }
+.tools-menu button strong { font-size: 11px; font-weight: 620; }
+.tools-menu button small { overflow: hidden; color: var(--fg-subtle); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
+.tools-menu button.active-access { background: var(--success-soft); }
+.tools-menu button.active-access > svg { color: var(--success); }
+.tools-menu button.active-access > svg:last-child { width: 13px; height: 13px; color: var(--fg-subtle); }
+.send-button { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--accent); color: #fff; transition: background-color 120ms ease, transform 120ms ease; }
+.send-button svg { width: 17px; height: 17px; }
+.send-button:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
+.send-button:disabled { background: var(--surface-active); color: var(--fg-disabled); }
+.stop-button { background: var(--fg); color: var(--surface-panel); }
+.stop-button:hover:not(:disabled) { background: var(--fg-muted); }
+.composer-footer { min-height: 25px; display: flex; align-items: center; gap: 8px; padding: 4px 3px 0 5px; }
+.composer-state { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--fg-subtle); font-size: 9px; }
+.access-pill { display: inline-flex; align-items: center; gap: 3px; border-radius: 999px; padding: 2px 5px; background: var(--success-soft); color: color-mix(in srgb, var(--success) 72%, var(--fg)); font-weight: 600; }
+.access-pill svg { width: 10px; height: 10px; }
+.model-controls { min-width: 0; margin-left: auto; display: flex; align-items: center; gap: 3px; }
+.model-controls select { min-width: 0; max-width: 112px; border: 0; border-radius: 5px; padding: 2px 3px; outline: none; background: transparent; color: var(--fg-subtle); font-size: 9px; text-overflow: ellipsis; }
+.model-controls select:hover { background: var(--surface-hover); color: var(--fg-muted); }
+.model-controls select:last-child { max-width: 64px; }
+
+.composer-contexts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
+.context-chip, .attachment-chip { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--edge)); border-radius: 8px; padding: 5px 6px; color: var(--accent-fg); background: var(--accent-soft); font-size: 10px; }
+.attachment-chip { border-color: var(--edge); color: var(--fg-muted); background: var(--surface-base); }
+.context-chip > svg, .attachment-chip > svg { width: 13px; height: 13px; flex: 0 0 auto; }
+.context-chip > span, .attachment-chip > span { min-width: 0; max-width: 310px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.context-chip strong, .attachment-chip strong { font-weight: 650; }
+.context-chip button { border: 0; border-radius: 5px; padding: 2px 4px; background: transparent; color: inherit; font-size: 9px; }
+.context-chip button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.context-chip.stale { border-color: color-mix(in srgb, var(--warning) 55%, var(--edge)); background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 70%, var(--fg)); }
+.chip-remove { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 5px; padding: 0; background: transparent; color: inherit; }
+.chip-remove:hover { background: var(--surface-active); }
+.chip-remove svg { width: 11px; height: 11px; }
+.file-input { display: none; }
+.composer-error { display: flex; align-items: flex-start; gap: 6px; margin: 0 2px 7px; border-radius: 8px; padding: 7px 8px; background: var(--danger-soft); color: var(--danger); font-size: 10px; line-height: 1.4; }
+.composer-error svg { width: 13px; height: 13px; flex: 0 0 auto; }
+.composer-notice { margin: 0 2px 7px; border-radius: 8px; padding: 7px 8px; background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 72%, var(--fg)); font-size: 10px; line-height: 1.4; }
+
+.tab-mention-menu { position: absolute; z-index: 13; left: 0; right: 0; bottom: calc(100% + 8px); max-height: min(45vh, 320px); overflow-y: auto; border: 1px solid var(--edge-strong); border-radius: 12px; background: var(--surface-panel); padding: 5px; box-shadow: var(--shadow-popover); }
+.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: var(--accent-soft); }
+.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: var(--fg-muted); font-size: 10px; }
+.tab-mention-empty { padding: 10px; }
+
+.request-card { max-height: min(42vh, 310px); margin: 0 0 7px; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--edge)); border-radius: 11px; padding: 10px; background: var(--accent-soft); }
+.request-card-title { display: flex; align-items: center; gap: 6px; color: var(--accent-fg); }
+.request-card-title svg { width: 14px; height: 14px; }
+.request-card-title strong { font-size: 11px; }
+.request-card p { margin: 6px 0 9px; font-size: 12px; line-height: 1.45; }
+.request-actions, .choice-list { display: flex; flex-wrap: wrap; gap: 5px; }
+.request-actions button, .choice-list button, .clarification-actions button, .clarification-answer button { border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--edge)); border-radius: 7px; padding: 5px 8px; background: var(--surface-panel); color: var(--fg-muted); font-size: 10px; }
+.request-actions button:hover, .choice-list button:hover, .clarification-actions button:hover, .clarification-answer button:hover { background: var(--surface-hover); color: var(--fg); }
+.request-actions .request-primary { border-color: var(--accent); background: var(--accent); color: #fff; }
+.clarification-answer { display: flex; gap: 6px; margin-top: 7px; }
+.clarification-answer input { min-width: 0; flex: 1; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--edge)); border-radius: 7px; padding: 6px 8px; background: var(--surface-panel); color: var(--fg); font-size: 11px; }
+.clarification-actions { display: flex; gap: 4px; margin-top: 4px; }
+.clarification-actions button { border-color: transparent; background: transparent; }
+
+@media (max-width: 380px) {
+  .status { margin-right: 68px; }
+  .messages { padding-inline: 12px; }
+  .message.user { width: 92%; }
+  .model-controls select { max-width: 86px; }
+  .quick-prompts { gap: 6px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+}

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

@@ -1,4 +1,4 @@
-import { h as endpointToolContentSchema, E as ENDPOINT_PROTOCOL_VERSION, c as canonicalJson, T as TAB_BINDING_PREFIX, b as captureTabPage, P as PENDING_CONTEXT_KEY, r as readProfile, k as registerBrowserEndpoint, j as getAccessProfile, R as RealtimeClient, e as createBrowserEndpointHello, i as gatewayFetch } from './assets/auth-D_IL6naL.js';
+import { h as endpointToolContentSchema, E as ENDPOINT_PROTOCOL_VERSION, c as canonicalJson, T as TAB_BINDING_PREFIX, b as captureTabWithPermission, P as PENDING_CONTEXT_KEY, k as readProfile, l as registerBrowserEndpoint, j as getAccessProfile, R as RealtimeClient, d as createBrowserEndpointHello, i as gatewayFetch } from './assets/auth-cwEj8rFb.js';
 
 const BROWSER_EXTENSION_PROTOCOL_VERSION = 4;
 const BROWSER_CONTROL_ENDPOINT_TOOL_NAME = "browser.control";
@@ -1270,7 +1270,7 @@ chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
 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) => {
+  void captureTabWithPermission(tabId, "selection").then(async (context) => {
     await chrome.storage.session.set({
       [PENDING_CONTEXT_KEY]: { context, tabId, source: "current_selection" }
     });

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

@@ -5,8 +5,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-D_IL6naL.js">
-    <link rel="stylesheet" crossorigin href="./assets/sidepanel-CEPaVLjr.css">
+    <link rel="modulepreload" crossorigin href="./assets/auth-cwEj8rFb.js">
+    <link rel="stylesheet" crossorigin href="./assets/sidepanel-C86O7q5Y.css">
   </head>
   <body>
     <div id="root"></div>