@xopcai/xopc 0.0.274 → 0.0.276

package/dist/browser-ext/dist/assets/{auth-O8RiOF3l.js → auth-ClQTK565.js}

@@ -5782,6 +5782,62 @@ array(browserPageContextInputSchema).max(MAX_BROWSER_CONTEXTS_PER_TURN).superRef
   }
 });
 
+const LOCALE_STORAGE_KEY = "xopc.sidepanel.locale";
+const LOCALE_PATHS = {
+  en: "_locales/en/messages.json",
+  "zh-CN": "_locales/zh_CN/messages.json"
+};
+let activeLocale;
+let activeCatalog;
+function isExtensionLocale(value) {
+  return value === "en" || value === "zh-CN";
+}
+function browserLocale() {
+  return chrome.i18n.getUILanguage().replaceAll("_", "-").toLowerCase().startsWith("zh") ? "zh-CN" : "en";
+}
+function messageWithSubstitutions(entry, substitutions) {
+  const values = substitutions === void 0 ? [] : Array.isArray(substitutions) ? substitutions : [substitutions];
+  const valueAt = (content) => content.replace(/\$(\d+)/g, (_match, index) => values[Number(index) - 1] ?? "");
+  let message = entry.message;
+  for (const [name, placeholder] of Object.entries(entry.placeholders ?? {})) {
+    message = message.replaceAll(new RegExp(`\\$${name}\\$`, "gi"), valueAt(placeholder.content));
+  }
+  let sequentialIndex = 0;
+  return message.replace(/%(?:(\d+)\$)?s/g, (_match, position) => {
+    const index = position ? Number(position) - 1 : sequentialIndex++;
+    return values[index] ?? "";
+  }).replace(/\$(\d+)/g, (_match, index) => values[Number(index) - 1] ?? "");
+}
+function t(key, substitutions) {
+  const entry = activeCatalog?.[key];
+  return entry ? messageWithSubstitutions(entry, substitutions) : chrome.i18n.getMessage(key, substitutions) || key;
+}
+function extensionLocale() {
+  return activeLocale ?? chrome.i18n.getUILanguage().replaceAll("_", "-");
+}
+async function loadExtensionLocalePreference() {
+  const stored = await chrome.storage.local.get(LOCALE_STORAGE_KEY);
+  const locale = isExtensionLocale(stored[LOCALE_STORAGE_KEY]) ? stored[LOCALE_STORAGE_KEY] : browserLocale();
+  await applyExtensionLocale(locale);
+  return locale;
+}
+async function saveExtensionLocalePreference(locale) {
+  await chrome.storage.local.set({ [LOCALE_STORAGE_KEY]: locale });
+  await applyExtensionLocale(locale);
+}
+async function applyExtensionLocale(locale) {
+  const response = await fetch(chrome.runtime.getURL(LOCALE_PATHS[locale]));
+  if (!response.ok) throw new Error(`Could not load extension locale: ${locale}`);
+  activeCatalog = await response.json();
+  activeLocale = locale;
+  initializeDocumentLocale();
+}
+function initializeDocumentLocale() {
+  document.documentElement.lang = extensionLocale();
+  document.documentElement.dir = chrome.i18n.getMessage("@@bidi_dir") || "ltr";
+  document.title = t("appName");
+}
+
 const PENDING_CONTEXT_KEY = "xopc.browser.pending-context";
 const TAB_BINDING_PREFIX = "xopc.browser.tab-binding.";
 function truncateUtf8(value, maxBytes) {
@@ -5801,13 +5857,13 @@ function sanitizedUrl(raw) {
   try {
     url = new URL(raw);
   } catch {
-    throw new Error("This tab does not have a valid web address");
+    throw new Error(t("errorInvalidWebAddress"));
   }
   if (url.protocol !== "http:" && url.protocol !== "https:") {
-    throw new Error("Chrome does not allow xopc to read this page. Open a regular http(s) page and try again.");
+    throw new Error(t("errorRestrictedPage"));
   }
   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.");
+    throw new Error(t("errorWebStorePage"));
   }
   url.username = "";
   url.password = "";
@@ -5818,14 +5874,14 @@ 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 new Error(t("errorSiteAccessBlocked", hostname));
   }
   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");
+    throw new Error(t("errorTabUnavailable"));
   }
   const url = sanitizedUrl(tab.url);
   const originPattern = `${new URL(url).origin}/*`;
@@ -5838,7 +5894,7 @@ async function runWithTabSiteAccess(tabId, operation) {
     } catch (cause) {
       throw siteAccessError(cause, url);
     }
-    if (!granted) throw new Error(`Allow xopc to access ${new URL(url).hostname} to continue.`);
+    if (!granted) throw new Error(t("errorSiteAccessRequired", new URL(url).hostname));
     newlyGranted = true;
   }
   try {
@@ -5852,15 +5908,15 @@ 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("");
 }
-function extractPage(mode) {
+function extractPage(mode, messages) {
   const normalize = (value) => value.replace(/\s+/g, " ").trim();
   const selection = normalize(window.getSelection()?.toString() ?? "");
   if (mode === "selection") {
-    if (!selection) throw new Error("Select text on the page first");
+    if (!selection) throw new Error(messages.selectText);
     return { title: document.title, url: location.href, timeOrigin: performance.timeOrigin, selection };
   }
   const source = document.querySelector("article, main") ?? document.body;
-  if (!source) throw new Error("This page has no readable content");
+  if (!source) throw new Error(messages.noReadableContent);
   const clone = source.cloneNode(true);
   clone.querySelectorAll([
     "script",
@@ -5882,23 +5938,26 @@ function extractPage(mode) {
     "[inert]"
   ].join(",")).forEach((element) => element.remove());
   const text = normalize(clone.innerText || clone.textContent || "");
-  if (!text) throw new Error("This page has no readable content");
+  if (!text) throw new Error(messages.noReadableContent);
   return { title: document.title, url: location.href, timeOrigin: performance.timeOrigin, text };
 }
 async function captureTabPage(tabId, mode) {
   const tab = await chrome.tabs.get(tabId);
-  if (!tab.url) throw new Error("The selected tab is no longer available");
+  if (!tab.url) throw new Error(t("errorTabUnavailable"));
   sanitizedUrl(tab.url);
   const result = await chrome.scripting.executeScript({
     target: { tabId },
     func: extractPage,
-    args: [mode]
+    args: [mode, {
+      selectText: t("errorSelectText"),
+      noReadableContent: t("errorNoReadableContent")
+    }]
   });
   const raw = result[0]?.result;
-  if (!raw) throw new Error("Could not read this page");
+  if (!raw) throw new Error(t("errorReadPage"));
   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.");
+    throw new Error(t("errorPageChangedReading"));
   }
   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;
@@ -5927,17 +5986,17 @@ 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");
+  if (tab.id === void 0 || tab.windowId === void 0 || !tab.url) throw new Error(t("errorNoActivePage"));
   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");
+    if (!marker) throw new Error(t("errorIdentifyPage"));
     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.");
+      throw new Error(t("errorPageChangedConnecting"));
     }
     return {
       tabId: String(accessibleTab.id),
@@ -5961,7 +6020,7 @@ function openDatabase() {
       }
     };
     request.onsuccess = () => resolve(request.result);
-    request.onerror = () => reject(request.error ?? new Error("Could not open the browser chat outbox"));
+    request.onerror = () => reject(request.error ?? new Error(t("errorOpenOutbox")));
   });
 }
 function transactionResult(database, mode, createRequest) {
@@ -5972,10 +6031,10 @@ function transactionResult(database, mode, createRequest) {
     request.onsuccess = () => {
       result = request.result;
     };
-    request.onerror = () => reject(request.error ?? new Error("Browser chat outbox request failed"));
+    request.onerror = () => reject(request.error ?? new Error(t("errorOutboxRequest")));
     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"));
+    transaction.onerror = () => reject(transaction.error ?? new Error(t("errorOutboxTransaction")));
+    transaction.onabort = () => reject(transaction.error ?? new Error(t("errorOutboxAborted")));
   });
 }
 async function readBrowserOutbox(sessionKey) {
@@ -6055,7 +6114,7 @@ async function discoverLocalGateway(options) {
       }
     );
     if (response.ok !== true || typeof response.gatewayUrl !== "string" || typeof response.invitation !== "string" || typeof response.expiresAt !== "number") {
-      if (options?.force) throw new Error(response.error || "The local xopc enrollment host returned an invalid response");
+      if (options?.force) throw new Error(response.error || t("errorInvalidLocalHostResponse"));
       return void 0;
     }
     return {
@@ -6138,12 +6197,12 @@ async function forgetIdentity() {
     const request = indexedDB.deleteDatabase(KEY_DATABASE);
     request.onsuccess = () => resolve();
     request.onerror = () => reject(request.error);
-    request.onblocked = () => reject(new Error("Browser identity is still in use"));
+    request.onblocked = () => reject(new Error(t("errorIdentityInUse")));
   });
 }
 async function publicKeyJwk(pair) {
   const exported = await crypto.subtle.exportKey("jwk", pair.publicKey);
-  if (!exported.x || !exported.y) throw new Error("Browser identity key export failed");
+  if (!exported.x || !exported.y) throw new Error(t("errorIdentityExport"));
   return { kty: "EC", crv: "P-256", x: exported.x, y: exported.y };
 }
 async function sign(pair, text) {
@@ -6206,7 +6265,7 @@ async function post(origin, path, body) {
       signal: controller.signal
     });
   } catch (cause) {
-    if (controller.signal.aborted) throw new Error(`Gateway did not respond within ${GATEWAY_REQUEST_TIMEOUT_MS / 1e3} seconds`);
+    if (controller.signal.aborted) throw new Error(t("errorGatewayTimeout", String(GATEWAY_REQUEST_TIMEOUT_MS / 1e3)));
     throw cause;
   } finally {
     clearTimeout(timeout);
@@ -6214,7 +6273,7 @@ async function post(origin, path, body) {
   const json = await response.json().catch(() => ({}));
   if (!response.ok) {
     throw new GatewayHttpError(
-      json.error?.code ?? json.error?.message ?? `Gateway returned ${response.status}`,
+      json.error?.code ?? json.error?.message ?? t("errorGatewayStatus", String(response.status)),
       response.status
     );
   }
@@ -6242,14 +6301,14 @@ async function signedPairingRequest(pair, payload, origin, requestId, action, co
   const path = action === "request" ? "/api/device-pairing/requests" : `/api/device-pairing/requests/${requestId}/${action}`;
   const response = await post(origin, path, { ...body, signature });
   if (typeof response.signedPayload !== "string" || typeof response.signature !== "string") {
-    throw new Error("Gateway pairing response is unsigned");
+    throw new Error(t("errorUnsignedPairing"));
   }
   if (!await verifyGateway(payload.gatewayPublicKey, response.signedPayload, response.signature)) {
-    throw new Error("Gateway identity could not be verified");
+    throw new Error(t("errorGatewayVerification"));
   }
   const decoded = decodeJson(response.signedPayload);
   if (decoded.gateway.id !== payload.gatewayId || decoded.nonce !== nonce || decoded.request.requestId !== requestId) {
-    throw new Error("Gateway pairing response does not match this request");
+    throw new Error(t("errorPairingMismatch"));
   }
   return decoded;
 }
@@ -6310,14 +6369,14 @@ ${nextRefreshToken}`;
     }
   }
   if (!response || !gatewayUrl) {
-    throw lastRouteError instanceof Error ? lastRouteError : new Error("No Gateway route could be reached");
+    throw lastRouteError instanceof Error ? lastRouteError : new Error(t("errorNoReachableGatewayRoute"));
   }
-  if (typeof response.signedPayload !== "string" || typeof response.signature !== "string" || !await verifyGateway(gateway.gatewayPublicKey, response.signedPayload, response.signature)) throw new Error("Gateway identity could not be verified");
+  if (typeof response.signedPayload !== "string" || typeof response.signature !== "string" || !await verifyGateway(gateway.gatewayPublicKey, response.signedPayload, response.signature)) throw new Error(t("errorGatewayVerification"));
   const responseProof = decodeJson(response.signedPayload);
   if (responseProof.purpose !== "device-refresh-v3" || responseProof.gatewayId !== gateway.gatewayId || responseProof.requestId !== requestId || responseProof.nonce !== nonce || !(responseProof.expiresAt > Date.now()) || responseProof.expiresAt > Date.now() + 6e4) throw new Error("Gateway refresh response does not match this request");
   const payload = responseProof.tokens;
   if (!payload?.accessToken || !payload.accessTokenExpiresAt || payload.refreshToken !== nextRefreshToken) {
-    throw new Error("Gateway returned invalid browser credentials");
+    throw new Error(t("errorInvalidCredentials"));
   }
   return { ...payload, gatewayUrl };
 }
@@ -6341,7 +6400,7 @@ async function pairGateway(invitation, onApproval, requestedOrigin) {
     throw new Error("PAIRING_ALREADY_PENDING");
   }
   if (!journal) {
-    if (payload.expiresAt <= Date.now()) throw new Error("Pairing invitation has expired");
+    if (payload.expiresAt <= Date.now()) throw new Error(t("errorExpiredPairingLink"));
     journal = {
       invitation: invitation.trim(),
       payload,
@@ -6381,7 +6440,7 @@ async function pairGateway(invitation, onApproval, requestedOrigin) {
     }
     if (result.request.status !== "approved" && result.request.status !== "completed") {
       await chrome.storage.local.remove(PAIRING_JOURNAL_KEY);
-      throw new Error(`Pairing ${result.request.status}`);
+      throw new Error(t("errorPairingStatus", result.request.status));
     }
     if (result.request.status !== "completed") {
       const response = await signedPairingRequestAcrossRoutes(
@@ -6397,7 +6456,7 @@ async function pairGateway(invitation, onApproval, requestedOrigin) {
       );
       ({ origin, result } = response);
     }
-    if (!result.request.deviceId) throw new Error("Gateway did not register the browser");
+    if (!result.request.deviceId) throw new Error(t("errorBrowserNotRegistered"));
     journal.origin = origin;
     journal.completed = { deviceId: result.request.deviceId, gatewayName: result.gateway.name };
     journal.refresh ??= { requestId: crypto.randomUUID(), nextRefreshToken: createRefreshToken() };
@@ -6470,7 +6529,7 @@ async function readProfile() {
 }
 async function getAccessProfile() {
   const profile = await readProfile();
-  if (!profile) throw new Error("Browser is not paired");
+  if (!profile) throw new Error(t("errorBrowserNotPaired"));
   if (profile.accessTokenExpiresAt > Date.now() + 3e4) return profile;
   if (refreshTask) return refreshTask;
   refreshTask = (async () => {
@@ -6520,7 +6579,7 @@ async function registerBrowserEndpoint() {
       publicKey
     })
   });
-  if (!response.ok) throw new Error(`Browser endpoint registration failed (${response.status})`);
+  if (!response.ok) throw new Error(t("errorEndpointRegistration", String(response.status)));
 }
 async function createBrowserEndpointHello(tools = []) {
   const profile = await getAccessProfile();
@@ -6568,4 +6627,4 @@ async function revokeAndForgetProfile() {
   }
 }
 
-export { ENDPOINT_PROTOCOL_VERSION as E, PENDING_CONTEXT_KEY as P, RealtimeClient as R, TAB_BINDING_PREFIX as T, activeTabId as a, canonicalJson as b, cancelPendingBrowserPairing as c, captureTabWithPermission as d, createBrowserEndpointHello as e, currentTabDescriptor as f, deleteBrowserOutbox as g, discoverLocalGateway as h, endpointToolContentSchema as i, gatewayFetch as j, getAccessProfile as k, readPendingBrowserPairing as l, readProfile as m, registerBrowserEndpoint as n, revokeAndForgetProfile as o, pairGateway as p, runWithTabSiteAccess as q, readBrowserOutbox as r, setAutoConnectEnabled as s, writeBrowserOutbox as w };
+export { ENDPOINT_PROTOCOL_VERSION as E, PENDING_CONTEXT_KEY as P, RealtimeClient as R, TAB_BINDING_PREFIX as T, activeTabId as a, canonicalJson as b, cancelPendingBrowserPairing as c, captureTabWithPermission as d, createBrowserEndpointHello as e, currentTabDescriptor as f, deleteBrowserOutbox as g, discoverLocalGateway as h, endpointToolContentSchema as i, extensionLocale as j, gatewayFetch as k, getAccessProfile as l, loadExtensionLocalePreference as m, readPendingBrowserPairing as n, readProfile as o, pairGateway as p, registerBrowserEndpoint as q, readBrowserOutbox as r, revokeAndForgetProfile as s, runWithTabSiteAccess as t, saveExtensionLocalePreference as u, setAutoConnectEnabled as v, t as w, writeBrowserOutbox as x };

package/dist/browser-ext/dist/assets/{sidepanel-C86O7q5Y.css → sidepanel-CeGqObOa.css}

@@ -73,12 +73,26 @@ svg { display: block; }
 .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 { 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); }
+.header-actions { position: relative; flex: 0 0 auto; }
+.header-icon-button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--fg-muted); }
+.header-icon-button:hover, .header-icon-button[aria-expanded='true'] { border-color: var(--edge); background: var(--surface-hover); color: var(--fg); }
+.header-icon-button svg { width: 17px; height: 17px; }
+.settings-menu { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(260px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--edge-strong); border-radius: 13px; padding: 7px; background: var(--surface-panel); box-shadow: var(--shadow-popover); }
+.settings-menu-title { padding: 7px 8px 9px; font-size: 12px; font-weight: 680; }
+.settings-group { border-top: 1px solid var(--edge); padding: 8px 0; }
+.settings-label { display: flex; align-items: center; gap: 7px; padding: 2px 8px 7px; color: var(--fg-subtle); font-size: 10px; font-weight: 650; }
+.settings-label svg { width: 14px; height: 14px; }
+.settings-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
+.settings-options button { min-width: 0; height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--edge); border-radius: 8px; background: var(--surface-base); color: var(--fg-muted); font-size: 11px; }
+.settings-options button:hover { border-color: var(--edge-strong); background: var(--surface-hover); color: var(--fg); }
+.settings-options button.active { border-color: color-mix(in srgb, var(--accent) 35%, var(--edge)); background: var(--accent-soft); color: var(--accent-fg); font-weight: 650; }
+.settings-options button svg { width: 13px; height: 13px; }
+.settings-disconnect { width: 100%; border: 0; border-top: 1px solid var(--edge); padding: 10px 8px 6px; background: transparent; color: var(--danger); font-size: 11px; text-align: left; }
+.settings-disconnect:hover { color: color-mix(in srgb, var(--danger) 82%, 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); }
@@ -211,13 +225,14 @@ svg { display: block; }
 @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; }
+.composer { position: relative; flex: 0 0 auto; margin: 0 12px 12px; overflow: visible; border: 1px solid var(--edge); border-radius: 18px; background: var(--surface-panel); padding: 10px 10px 8px; box-shadow: var(--shadow-surface); transition: border-color 120ms ease, box-shadow 120ms ease; }
+.composer:focus-within { border-color: var(--edge-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 7%, transparent), var(--shadow-surface); }
+.composer.dragging { border-color: var(--accent); box-shadow: 0 0 0 2px 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: 17px; 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-input-row { min-height: 58px; display: block; }
+.composer textarea { width: 100%; min-width: 0; min-height: 54px; max-height: 144px; display: block; resize: none; overflow-y: auto; border: 0; padding: 5px 8px 8px; outline: none; background: transparent; color: var(--fg); font-size: 14px; line-height: 1.55; }
+.composer textarea::placeholder { color: var(--fg-disabled); }
 .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); }
@@ -232,20 +247,23 @@ svg { display: block; }
 .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 { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--accent-fg); transition: background-color 120ms ease, 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; }
+.send-button:hover:not(:disabled) { background: var(--accent-soft); transform: translateY(-1px); }
+.send-button:disabled { background: transparent; color: var(--fg-disabled); }
+.stop-button { background: var(--surface-hover); color: var(--fg-muted); }
+.stop-button:hover:not(:disabled) { background: var(--surface-active); color: var(--fg); }
+.composer-footer { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0 0; }
+.composer-toolbar-start, .composer-toolbar-end { min-width: 0; display: flex; align-items: center; gap: 6px; }
+.composer-toolbar-end { margin-left: auto; }
 .composer-state { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--fg-subtle); font-size: 9px; }
+.composer-state-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
 .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; }
+.model-controls { min-width: 0; height: 32px; display: flex; align-items: center; gap: 0; border-radius: 9px; padding: 0 2px; background: var(--surface-hover); }
+.model-controls select { min-width: 0; max-width: 118px; height: 28px; border: 0; border-radius: 7px; padding: 4px 5px; outline: none; background: transparent; color: var(--fg-muted); font-size: 10px; font-weight: 560; text-overflow: ellipsis; }
+.model-controls select:hover, .model-controls select:focus { background: var(--surface-active); color: var(--fg); }
+.model-controls select:last-child { max-width: 72px; color: var(--fg-subtle); }
 
 .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; }
@@ -290,7 +308,10 @@ svg { display: block; }
   .status { margin-right: 68px; }
   .messages { padding-inline: 12px; }
   .message.user { width: 92%; }
-  .model-controls select { max-width: 86px; }
+  .composer { margin-inline: 8px; }
+  .composer-state-label { display: none; }
+  .model-controls select { max-width: 82px; }
+  .model-controls select:last-child { max-width: 58px; }
   .quick-prompts { gap: 6px; }
 }
 

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

@@ -1,4 +1,4 @@
-import { i as endpointToolContentSchema, E as ENDPOINT_PROTOCOL_VERSION, b as canonicalJson, T as TAB_BINDING_PREFIX, d as captureTabWithPermission, P as PENDING_CONTEXT_KEY, m as readProfile, n as registerBrowserEndpoint, k as getAccessProfile, R as RealtimeClient, e as createBrowserEndpointHello, j as gatewayFetch } from './assets/auth-O8RiOF3l.js';
+import { i as endpointToolContentSchema, E as ENDPOINT_PROTOCOL_VERSION, b as canonicalJson, T as TAB_BINDING_PREFIX, d as captureTabWithPermission, P as PENDING_CONTEXT_KEY, w as t, o as readProfile, q as registerBrowserEndpoint, l as getAccessProfile, R as RealtimeClient, e as createBrowserEndpointHello, k as gatewayFetch } from './assets/auth-ClQTK565.js';
 
 const BROWSER_EXTENSION_PROTOCOL_VERSION = 4;
 const BROWSER_CONTROL_ENDPOINT_TOOL_NAME = "browser.control";
@@ -1143,11 +1143,20 @@ function diff(previous, next) {
 
 const log = createLogger("Background");
 const BACKGROUND_CLIENT_ID_KEY = "xopc.browser.background-client-id";
+const RECONNECT_ALARM = "xopc.browser.reconnect";
+const RECONNECT_DELAY_MINUTES = 1;
 let realtime;
 let endpointClaim;
 let lastConnectionError;
 let connectTask;
 let connectionGeneration = 0;
+function clearReconnectAlarm() {
+  void chrome.alarms.clear(RECONNECT_ALARM);
+}
+function scheduleReconnectAlarm() {
+  if (endpointClaim) return;
+  chrome.alarms.create(RECONNECT_ALARM, { delayInMinutes: RECONNECT_DELAY_MINUTES });
+}
 const browserToolRegistry = new EndpointToolRegistry([{
   descriptor: BROWSER_CONTROL_ENDPOINT_DESCRIPTOR,
   execute: async (args) => {
@@ -1210,7 +1219,11 @@ async function connect(generation) {
     createWebSocket: (url) => new WebSocket(url),
     onStateChange: (state, error) => {
       lastConnectionError = error;
-      if (state === "connected") lastConnectionError = void 0;
+      if (state === "connected") {
+        lastConnectionError = void 0;
+      } else {
+        scheduleReconnectAlarm();
+      }
       if (error) log.warn("Browser Realtime connection changed", { state, error });
     }
   });
@@ -1219,6 +1232,7 @@ async function connect(generation) {
     onReady: ({ endpointId, turnToken }) => {
       endpointClaim = { endpointId, token: turnToken };
       lastConnectionError = void 0;
+      clearReconnectAlarm();
       endpointHost.connect((message) => client.sendEndpointMessage(message));
       void chrome.runtime.sendMessage({ type: "browser/endpoint-ready", claim: endpointClaim }).catch(() => void 0);
       log.info("Browser control connected through Gateway Realtime", { endpointId });
@@ -1229,6 +1243,7 @@ async function connect(generation) {
     onDisconnected: () => {
       endpointClaim = void 0;
       endpointHost.disconnect();
+      scheduleReconnectAlarm();
     }
   });
   if (generation !== connectionGeneration || realtime) return;
@@ -1247,6 +1262,7 @@ function connectWithLogging() {
   const generation = connectionGeneration;
   connectTask = connect(generation).catch((error) => {
     lastConnectionError = error instanceof Error ? error.message : String(error);
+    scheduleReconnectAlarm();
     log.warn("Could not connect browser Realtime transport", { error: lastConnectionError });
   }).finally(() => {
     connectTask = void 0;
@@ -1284,17 +1300,33 @@ chrome.runtime.onInstalled.addListener(() => {
   chrome.contextMenus.removeAll(() => {
     chrome.contextMenus.create({
       id: "xopc-ask-selection",
-      title: "Ask xopc about “%s”",
+      title: t("contextMenuAskSelection"),
       contexts: ["selection"]
     });
   });
   connectWithLogging();
 });
 chrome.runtime.onStartup.addListener(connectWithLogging);
+chrome.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name !== RECONNECT_ALARM) return;
+  void readProfile().then((profile) => {
+    if (!profile) {
+      clearReconnectAlarm();
+      return;
+    }
+    if (endpointClaim) {
+      clearReconnectAlarm();
+      return;
+    }
+    disconnect();
+    connectWithLogging();
+  });
+});
 chrome.storage.onChanged.addListener((changes, area) => {
   if (area === "local" && changes["xopc.browser.profile"]) {
     disconnect();
-    connectWithLogging();
+    if (changes["xopc.browser.profile"].newValue) connectWithLogging();
+    else clearReconnectAlarm();
   }
 });
 void chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });

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-O8RiOF3l.js">
-    <link rel="stylesheet" crossorigin href="./assets/sidepanel-C86O7q5Y.css">
+    <link rel="modulepreload" crossorigin href="./assets/auth-ClQTK565.js">
+    <link rel="stylesheet" crossorigin href="./assets/sidepanel-CeGqObOa.css">
   </head>
   <body>
     <div id="root"></div>