@xopcai/xopc 0.0.274 → 0.0.276

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

@@ -1,4 +1,4 @@
-import { R as RealtimeClient, j as gatewayFetch, a as activeTabId, r as readBrowserOutbox, w as writeBrowserOutbox, g as deleteBrowserOutbox, f as currentTabDescriptor, T as TAB_BINDING_PREFIX, k as getAccessProfile, q as runWithTabSiteAccess, P as PENDING_CONTEXT_KEY, d as captureTabWithPermission, p as pairGateway, s as setAutoConnectEnabled, l as readPendingBrowserPairing, m as readProfile, h as discoverLocalGateway, c as cancelPendingBrowserPairing, o as revokeAndForgetProfile } from './assets/auth-O8RiOF3l.js';
+import { R as RealtimeClient, k as gatewayFetch, a as activeTabId, w as t, r as readBrowserOutbox, x as writeBrowserOutbox, g as deleteBrowserOutbox, f as currentTabDescriptor, T as TAB_BINDING_PREFIX, l as getAccessProfile, t as runWithTabSiteAccess, P as PENDING_CONTEXT_KEY, j as extensionLocale, d as captureTabWithPermission, p as pairGateway, v as setAutoConnectEnabled, n as readPendingBrowserPairing, o as readProfile, h as discoverLocalGateway, u as saveExtensionLocalePreference, s as revokeAndForgetProfile, c as cancelPendingBrowserPairing, m as loadExtensionLocalePreference } from './assets/auth-ClQTK565.js';
 
 true              &&(function polyfill() {
   const relList = document.createElement("link").relList;
@@ -17364,14 +17364,14 @@ async function json(response) {
     body = raw ? JSON.parse(raw) : {};
   } catch {
     throw new GatewayRequestError(
-      response.ok ? "Gateway returned an invalid response" : `Gateway returned ${response.status}`,
+      response.ok ? t("errorInvalidGatewayResponse") : t("errorGatewayStatus", String(response.status)),
       response.status
     );
   }
   if (!response.ok) {
     const error = body.error;
     throw new GatewayRequestError(
-      typeof error === "string" ? error : error?.message ?? `Gateway returned ${response.status}`,
+      typeof error === "string" ? error : error?.message ?? t("errorGatewayStatus", String(response.status)),
       response.status
     );
   }
@@ -17398,7 +17398,7 @@ function mapMessage(value, index) {
     if (!value2 || typeof value2 !== "object") return [];
     const media = value2;
     const mimeType = typeof media.mimeType === "string" ? media.mimeType : void 0;
-    const name = typeof media.name === "string" && media.name.trim() ? media.name.trim() : "Attachment";
+    const name = typeof media.name === "string" && media.name.trim() ? media.name.trim() : t("attachment");
     return [{
       type: media.type === "image" || media.type === "photo" || mimeType?.startsWith("image/") ? "image" : "file",
       name,
@@ -17459,12 +17459,14 @@ class BrowserChatClient {
   recoveringOutbox = false;
   lastOutboxRecoveryAt = 0;
   sessionsRequest = 0;
+  endpointBinding;
+  endpointBindingTask;
   endpointPoll;
   onRuntimeMessage = (message) => {
     if (message.type !== "browser/endpoint-ready" || !message.claim) return;
     this.turnClaim = message.claim;
     this.update({ endpointReady: true, error: void 0 });
-    void this.recoverOutbox();
+    void this.bindSessionEndpoint().then(() => this.recoverOutbox()).catch((cause) => this.update({ error: cause instanceof Error ? cause.message : String(cause) }));
   };
   snapshot = {
     connection: "idle",
@@ -17557,6 +17559,8 @@ class BrowserChatClient {
     this.realtime?.disconnect();
     this.realtime = void 0;
     this.turnClaim = void 0;
+    this.endpointBinding = void 0;
+    this.endpointBindingTask = void 0;
     this.update({ endpointReady: false });
   }
   async reconnect() {
@@ -17567,18 +17571,55 @@ class BrowserChatClient {
       ok: false,
       error: cause instanceof Error ? cause.message : String(cause)
     }));
-    if (response?.ok === false) throw new Error(response.error ?? "Could not reconnect to the browser endpoint");
+    if (response?.ok === false) throw new Error(response.error ?? t("errorReconnectEndpoint"));
     await this.refreshEndpointClaim();
   }
   async refreshEndpointClaim() {
+    const previousEndpointId = this.turnClaim?.endpointId;
     const response = await chrome.runtime.sendMessage({ type: "browser/get-endpoint-claim" }).catch(() => void 0);
     this.turnClaim = response?.claim;
     this.update({
       endpointReady: Boolean(this.turnClaim),
       ...response?.error ? { error: response.error } : this.turnClaim ? { error: void 0 } : {}
     });
+    if (this.turnClaim?.endpointId !== previousEndpointId) {
+      this.endpointBinding = void 0;
+      if (this.turnClaim) {
+        void this.bindSessionEndpoint().catch((cause) => this.update({ error: cause instanceof Error ? cause.message : String(cause) }));
+      }
+    }
     if (this.turnClaim && this.snapshot.pendingDelivery) void this.recoverOutbox();
   }
+  async bindSessionEndpoint() {
+    const sessionKey = this.snapshot.sessionKey;
+    const endpointId = this.turnClaim?.endpointId;
+    if (!sessionKey || !endpointId) return;
+    const desired = `${sessionKey}
+${endpointId}`;
+    if (this.endpointBinding === desired) return;
+    if (this.endpointBindingTask) {
+      await this.endpointBindingTask;
+      if (this.endpointBinding === desired) return;
+    }
+    const task = json(await gatewayFetch(
+      `/api/endpoint-tools/bindings/${encodeURIComponent(sessionKey)}`,
+      {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ endpointId })
+      }
+    )).then(() => {
+      if (this.snapshot.sessionKey === sessionKey && this.turnClaim?.endpointId === endpointId) {
+        this.endpointBinding = desired;
+      }
+    });
+    this.endpointBindingTask = task;
+    try {
+      await task;
+    } finally {
+      if (this.endpointBindingTask === task) this.endpointBindingTask = void 0;
+    }
+  }
   async loadSessions(search) {
     const requestId = ++this.sessionsRequest;
     const params = new URLSearchParams({ channel: "webchat", limit: "30" });
@@ -17591,7 +17632,7 @@ class BrowserChatClient {
       return [{
         key: row.key,
         ...typeof row.sessionId === "string" ? { sessionId: row.sessionId } : {},
-        title: [row.name, row.title, row.displayName].find((item) => typeof item === "string" && item.trim()) || "New chat",
+        title: [row.name, row.title, row.displayName].find((item) => typeof item === "string" && item.trim()) || t("newChat"),
         updatedAt: typeof row.updatedAt === "string" ? row.updatedAt : ""
       }];
     });
@@ -17637,6 +17678,8 @@ class BrowserChatClient {
         this.reloadTabBinding()
       ]);
       if (this.snapshot.sessionKey !== sessionKey) return;
+      await this.bindSessionEndpoint();
+      if (this.snapshot.sessionKey !== sessionKey) return;
       const run = await json(await gatewayFetch(
         `/api/sessions/${encodeURIComponent(sessionKey)}/run`
       ));
@@ -17659,11 +17702,12 @@ class BrowserChatClient {
   async send(content, browserContexts = [], attachments = []) {
     const text = content.trim();
     if (!text && attachments.length === 0) return "sent";
-    if (!this.snapshot.sessionKey) throw new Error("Open a chat before sending");
+    if (!this.snapshot.sessionKey) throw new Error(t("errorOpenChatBeforeSending"));
     if (this.snapshot.submitting || this.snapshot.pendingDelivery || this.recoveringOutbox) {
-      throw new Error("Wait for the queued message to be delivered before sending another");
+      throw new Error(t("errorWaitQueuedMessage"));
     }
-    if (!this.turnClaim) throw new Error("Realtime endpoint is not ready");
+    if (!this.turnClaim) throw new Error(t("errorEndpointNotReady"));
+    await this.bindSessionEndpoint();
     const sessionKey = this.snapshot.sessionKey;
     const clientMessageId = crypto.randomUUID();
     const request = {
@@ -17720,7 +17764,7 @@ class BrowserChatClient {
         if (this.snapshot.sessionKey === sessionKey) {
           this.update({
             pendingDelivery: false,
-            error: "Message sent, but the response status could not be refreshed. Reopen this chat to sync it."
+            error: t("errorSentStatusUnknown")
           });
         }
         return "sent";
@@ -17771,7 +17815,7 @@ class BrowserChatClient {
         if (deliveryAccepted) {
           this.update({
             pendingDelivery: false,
-            error: "Message sent, but the response status could not be refreshed. Reopen this chat to sync it."
+            error: t("errorSentStatusUnknown")
           });
         } else if (isRetryableDeliveryError(cause)) {
           this.update({ pendingDelivery: true, error: void 0 });
@@ -17807,7 +17851,7 @@ class BrowserChatClient {
   async updateModel(model) {
     const sessionKey = this.snapshot.sessionKey;
     const current = this.snapshot.modelConfig;
-    if (!sessionKey || !current || current.fixedModel) return;
+    if (!sessionKey || !current) return;
     const selected = this.snapshot.models.find((candidate) => candidate.id === model);
     const thinkingLevel = selected?.thinking?.options?.includes(current.thinkingLevel) ? current.thinkingLevel : selected?.thinking?.default;
     await this.patchModelConfig({ model, thinkingLevel });
@@ -17833,7 +17877,7 @@ class BrowserChatClient {
   }
   async bindActiveTab(mode) {
     const sessionKey = this.snapshot.sessionKey;
-    if (!sessionKey || !this.turnClaim) throw new Error("Open a chat and wait for the browser endpoint");
+    if (!sessionKey || !this.turnClaim) throw new Error(t("errorOpenChatForEndpoint"));
     const descriptor = await currentTabDescriptor();
     const result = await json(await gatewayFetch(
       `/api/browser/tab-bindings/${encodeURIComponent(sessionKey)}`,
@@ -17970,7 +18014,7 @@ class BrowserChatClient {
     ));
     const config = result.payload;
     if (!config || typeof config.model !== "string" || typeof config.thinkingLevel !== "string") {
-      throw new Error("Gateway returned an invalid session model configuration");
+      throw new Error(t("errorInvalidModelConfig"));
     }
     if (this.snapshot.sessionKey !== sessionKey) return;
     this.update({ modelConfig: {
@@ -17994,7 +18038,7 @@ class BrowserChatClient {
     ));
     const config = result.payload;
     if (!config || typeof config.model !== "string" || typeof config.thinkingLevel !== "string") {
-      throw new Error("Gateway returned an invalid session model configuration");
+      throw new Error(t("errorInvalidModelConfig"));
     }
     if (this.snapshot.sessionKey !== sessionKey) return;
     this.update({ modelConfig: {
@@ -18067,7 +18111,7 @@ class BrowserChatClient {
   }
   requireProfileUrl() {
     const profile = this.profileUrl;
-    if (!profile) throw new Error("Gateway profile is not loaded");
+    if (!profile) throw new Error(t("errorProfileNotLoaded"));
     return profile;
   }
   profileUrl;
@@ -18101,14 +18145,14 @@ function encodeBase64(bytes) {
 }
 function assertSize(size) {
   if (size > MAX_BROWSER_ATTACHMENT_BYTES) {
-    throw new Error("Browser attachments must be 6 MiB or smaller");
+    throw new Error(t("errorAttachmentTooLarge"));
   }
 }
 function assertSupportedFile(file) {
   const mimeType = file.type.toLowerCase();
   const name = file.name.toLowerCase();
   if (mimeType.startsWith("image/") || SUPPORTED_DOCUMENT_MIME_TYPES.has(mimeType) || SUPPORTED_DOCUMENT_EXTENSIONS.some((extension) => name.endsWith(extension))) return;
-  throw new Error("Attach an image, PDF, text, Markdown, JSON, or CSV file");
+  throw new Error(t("errorUnsupportedAttachment"));
 }
 async function fileToBrowserAttachment(file) {
   assertSupportedFile(file);
@@ -18124,14 +18168,14 @@ async function fileToBrowserAttachment(file) {
 }
 async function captureVisibleScreenshot() {
   const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
-  if (activeTab.id === void 0) throw new Error("No active web page");
+  if (activeTab.id === void 0) throw new Error(t("errorNoActivePage"));
   const dataUrl = await runWithTabSiteAccess(activeTab.id, async (accessibleTab) => {
     const [currentTab] = await chrome.tabs.query({ active: true, currentWindow: true });
-    if (currentTab.id !== accessibleTab.id) throw new Error("The active tab changed. Try the screenshot again.");
+    if (currentTab.id !== accessibleTab.id) throw new Error(t("errorActiveTabChanged"));
     return chrome.tabs.captureVisibleTab(accessibleTab.windowId, { format: "png" });
   });
   const separator = dataUrl.indexOf(",");
-  if (separator < 0) throw new Error("Chrome returned an invalid screenshot");
+  if (separator < 0) throw new Error(t("errorInvalidScreenshot"));
   const data = dataUrl.slice(separator + 1);
   const size = Math.floor(data.length * 3 / 4);
   assertSize(size);
@@ -18255,6 +18299,24 @@ function AlertIcon(props) {
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 8v5M12 16.5h.01" })
   ] });
 }
+function SettingsIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.86 2.86-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21H9.55v-.1A1.7 1.7 0 0 0 8.5 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.86-2.86.06-.06A1.7 1.7 0 0 0 4.1 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H2V9.55h.4A1.7 1.7 0 0 0 4.1 8.5a1.7 1.7 0 0 0-.34-1.88l-.06-.06L6.56 3.7l.06.06A1.7 1.7 0 0 0 8.5 4.1a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V2h4.05v.4A1.7 1.7 0 0 0 15 4.1a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.86 2.86-.06.06A1.7 1.7 0 0 0 19.4 8.5a1.7 1.7 0 0 0 .6 1 1.7 1.7 0 0 0 1.1.4h.4v4.05h-.4A1.7 1.7 0 0 0 19.4 15Z" })
+  ] });
+}
+function SunIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.66 6.34l1.41-1.41" })
+  ] });
+}
+function GlobeIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18" })
+  ] });
+}
 
 /* eslint-disable no-bitwise */
 
@@ -26745,7 +26807,7 @@ function MarkdownContent({ children, streaming = false }) {
   const html = reactExports.useMemo(() => renderSafeMarkdown(children), [children]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `markdown-content${streaming ? " is-streaming" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: html } }),
-    streaming ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "streaming-caret", "aria-label": "xopc is responding" }) : null
+    streaming ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "streaming-caret", "aria-label": t("xopcResponding") }) : null
   ] });
 }
 
@@ -26763,7 +26825,7 @@ const EMPTY = {
 };
 function formatMessageTime(timestamp) {
   if (!timestamp) return "";
-  return new Intl.DateTimeFormat(void 0, { hour: "2-digit", minute: "2-digit" }).format(timestamp);
+  return new Intl.DateTimeFormat(extensionLocale(), { hour: "2-digit", minute: "2-digit" }).format(timestamp);
 }
 function formatSessionDate(timestamp) {
   if (!timestamp) return "";
@@ -26771,7 +26833,28 @@ function formatSessionDate(timestamp) {
   if (!Number.isFinite(date.getTime())) return "";
   const now = /* @__PURE__ */ new Date();
   if (date.toDateString() === now.toDateString()) return formatMessageTime(date.getTime());
-  return new Intl.DateTimeFormat(void 0, { month: "short", day: "numeric" }).format(date);
+  return new Intl.DateTimeFormat(extensionLocale(), { month: "short", day: "numeric" }).format(date);
+}
+const RISK_MESSAGE_KEYS = {
+  external_effect: "riskExternalEffect",
+  destructive: "riskDestructive",
+  sensitive: "riskSensitive",
+  draft: "riskDraft",
+  read: "riskRead"
+};
+const THINKING_MESSAGE_KEYS = {
+  off: "thinkingOff",
+  minimal: "thinkingMinimal",
+  low: "thinkingLow",
+  medium: "thinkingMedium",
+  high: "thinkingHigh",
+  xhigh: "thinkingXhigh",
+  max: "thinkingMax",
+  ultra: "thinkingUltra"
+};
+function thinkingLabel(level) {
+  const key = THINKING_MESSAGE_KEYS[level];
+  return key ? t(key) : level;
 }
 function formatFileSize(size) {
   if (typeof size !== "number" || !Number.isFinite(size) || size < 0) return "";
@@ -26921,7 +27004,7 @@ function ChatPanel() {
     setAtBottom(true);
     try {
       if (!snapshot.sessionKey) await client.createSession();
-      if (pageContext?.stale) throw new Error("The attached page changed. Refresh or remove it before sending.");
+      if (pageContext?.stale) throw new Error(t("errorAttachedPageChanged"));
       await client.send(sending, pageContext ? [pageContext.context] : [], sendingAttachments);
       setPageContext(void 0);
     } catch (cause) {
@@ -26937,7 +27020,7 @@ function ChatPanel() {
     setError("");
     try {
       const remaining = MAX_BROWSER_ATTACHMENTS - attachments.length;
-      if (incoming.length > remaining) throw new Error(`Attach up to ${MAX_BROWSER_ATTACHMENTS} files`);
+      if (incoming.length > remaining) throw new Error(t("errorAttachmentLimit", String(MAX_BROWSER_ATTACHMENTS)));
       const added = await Promise.all(incoming.map(fileToBrowserAttachment));
       setAttachments((current) => [...current, ...added]);
     } catch (cause) {
@@ -26950,7 +27033,7 @@ function ChatPanel() {
   async function addScreenshot() {
     setError("");
     try {
-      if (attachments.length >= MAX_BROWSER_ATTACHMENTS) throw new Error(`Attach up to ${MAX_BROWSER_ATTACHMENTS} files`);
+      if (attachments.length >= MAX_BROWSER_ATTACHMENTS) throw new Error(t("errorAttachmentLimit", String(MAX_BROWSER_ATTACHMENTS)));
       const screenshot = await captureVisibleScreenshot();
       setAttachments((current) => [...current, screenshot]);
     } catch (cause) {
@@ -26971,7 +27054,7 @@ function ChatPanel() {
     setError("");
     try {
       const tabId = await activeTabId();
-      if (tabId === void 0) throw new Error("No active web page");
+      if (tabId === void 0) throw new Error(t("errorNoActivePage"));
       setPageContext({
         context: await captureTabWithPermission(tabId, mode),
         tabId,
@@ -27069,13 +27152,13 @@ function ChatPanel() {
     }
   }
   const activeSession = snapshot.sessions.find((session) => session.key === snapshot.sessionKey);
-  const connectionText = snapshot.endpointReady ? "Ready" : snapshot.connection === "connected" ? "Waking up…" : snapshot.connection === "connecting" || snapshot.connection === "reconnecting" ? "Connecting…" : "Offline";
+  const connectionText = snapshot.endpointReady ? t("ready") : snapshot.connection === "connected" ? t("wakingUp") : snapshot.connection === "connecting" || snapshot.connection === "reconnecting" ? t("connecting") : t("offline");
   const connectionProblem = !snapshot.endpointReady && (snapshot.connection === "error" || snapshot.connection === "disconnected");
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "chat", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chat-toolbar", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { ref: sessionTrigger, className: "session-trigger", "aria-expanded": menuOpen, onClick: () => setMenuOpen((open) => !open), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "session-trigger-copy", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "session-title", children: activeSession?.title ?? "New chat" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "session-title", children: activeSession?.title ?? t("newChat") }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "session-status", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `mini-status ${snapshot.endpointReady ? "online" : ""}` }),
             connectionText
@@ -27083,16 +27166,16 @@ function ChatPanel() {
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDownIcon, { className: "icon-sm" })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "icon-button", type: "button", "aria-label": "Start a new chat", title: "New chat", disabled: snapshot.submitting, onClick: () => void runControlAction(() => client.createSession()), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {}) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "icon-button", type: "button", "aria-label": t("startNewChat"), title: t("newChat"), disabled: snapshot.submitting, onClick: () => void runControlAction(() => client.createSession()), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {}) })
     ] }),
     menuOpen ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "session-menu", ref: sessionMenu, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "session-menu-header", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Recent chats" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", "aria-label": "Close recent chats", onClick: () => setMenuOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {}) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: t("recentChats") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", "aria-label": t("closeRecentChats"), onClick: () => setMenuOpen(false), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {}) })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "session-search", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("input", { value: search, onChange: (event) => void runSearch(event.target.value), placeholder: "Search chats", autoFocus: true })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("input", { value: search, onChange: (event) => void runSearch(event.target.value), placeholder: t("searchChats"), autoFocus: true })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "session-list", children: [
         snapshot.sessions.map((session) => /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { disabled: snapshot.submitting, className: session.key === snapshot.sessionKey ? "active" : "", onClick: () => {
@@ -27105,43 +27188,43 @@ function ChatPanel() {
           ] }),
           session.key === snapshot.sessionKey ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) : null
         ] }, session.key)),
-        !snapshot.sessions.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "session-list-empty", children: "No chats found" }) : null
+        !snapshot.sessions.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "session-list-empty", children: t("noChatsFound") }) : null
       ] })
     ] }) : null,
     connectionProblem ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "connection-banner", role: "alert", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: snapshot.error || "Gateway connection is offline." }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => void runControlAction(() => client.reconnect()), children: "Reconnect" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: snapshot.error || t("gatewayOffline") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => void runControlAction(() => client.reconnect()), children: t("reconnect") })
     ] }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "messages-shell", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "messages", ref: viewport, onScroll: trackScrollPosition, children: [
-        snapshot.sessionLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "message-skeleton", "aria-label": "Loading chat", children: [
+        snapshot.sessionLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "message-skeleton", "aria-label": t("loadingChat"), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", {})
         ] }) : null,
         !snapshot.sessionLoading && !snapshot.messages.length && !snapshot.streamingText ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "empty-chat", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "empty-mark", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SparkleIcon, {}) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: "What can I help with?" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Ask a question, bring in the current page, or let xopc help you complete a browser task." }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: t("emptyChatTitle") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: t("emptyChatDescription") }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "quick-prompts", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => void startQuickPrompt("Summarize this page and highlight the key points.", "page"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => void startQuickPrompt(t("promptSummarizePage"), "page"), children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(PageIcon, {}),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Summarize this page" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("summarizePage") })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => void startQuickPrompt("Explain the selected text in plain language.", "selection"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => void startQuickPrompt(t("promptExplainSelection"), "selection"), children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(SelectionIcon, {}),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Explain selection" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("explainSelection") })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => void startQuickPrompt("Help me complete the task on this page. Ask before taking any consequential action."), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => void startQuickPrompt(t("promptHelpTask")), children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(CursorIcon, {}),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Help with a task" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("helpWithTask") })
             ] })
           ] })
         ] }) : null,
         snapshot.messages.map((message) => /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: `message ${message.role}`, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "message-heading", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "message-author", children: message.role === "user" ? "You" : message.role === "assistant" ? "xopc" : "System" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "message-author", children: message.role === "user" ? t("you") : message.role === "assistant" ? "xopc" : t("system") }),
             formatMessageTime(message.timestamp) ? /* @__PURE__ */ jsxRuntimeExports.jsx("time", { children: formatMessageTime(message.timestamp) }) : null
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "message-body", children: [
@@ -27149,7 +27232,7 @@ function ChatPanel() {
               source.kind === "browser_page" ? /* @__PURE__ */ jsxRuntimeExports.jsx(PageIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
                 source.title,
-                source.truncated ? " · truncated" : ""
+                source.truncated ? ` · ${t("truncated")}` : ""
               ] })
             ] }, `${source.title}-${index}`)) }) : null,
             message.attachments?.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "message-attachments", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "message-attachment", title: attachment.mimeType, children: [
@@ -27161,20 +27244,20 @@ function ChatPanel() {
             ] }, `${attachment.name}-${index}`)) }) : null,
             message.text ? message.role === "assistant" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownContent, { children: message.text }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "plain-message-content", children: message.text }) : null
           ] }),
-          message.role === "assistant" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "message-actions", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", "aria-label": "Copy response", title: "Copy response", onClick: () => void copyMessage(message.id, message.text), children: [
+          message.role === "assistant" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "message-actions", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", "aria-label": t("copyResponse"), title: t("copyResponse"), onClick: () => void copyMessage(message.id, message.text), children: [
             copiedMessageId === message.id ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, {}),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: copiedMessageId === message.id ? "Copied" : "Copy" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: copiedMessageId === message.id ? t("copied") : t("copy") })
           ] }) }) : null
         ] }, message.id)),
         snapshot.streamingText ? /* @__PURE__ */ jsxRuntimeExports.jsxs("article", { className: "message assistant streaming", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "message-heading", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "message-author", children: "xopc" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "responding-label", children: "Responding" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "responding-label", children: t("responding") })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "message-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownContent, { streaming: true, children: snapshot.streamingText }) })
         ] }) : null
       ] }),
-      !atBottom ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "scroll-bottom-button", type: "button", "aria-label": "Scroll to latest message", title: "Scroll to latest message", onClick: () => scrollToBottom(true), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDownIcon, {}) }) : null
+      !atBottom ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "scroll-bottom-button", type: "button", "aria-label": t("scrollLatest"), title: t("scrollLatest"), onClick: () => scrollToBottom(true), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowDownIcon, {}) }) : null
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
@@ -27203,26 +27286,27 @@ function ChatPanel() {
         children: [
           draggingFiles ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "file-drop-overlay", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(PaperclipIcon, {}),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Drop files to attach" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("dropFiles") })
           ] }) : null,
-          snapshot.browserApproval ? /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "request-card browser-approval", "aria-label": "Browser approval", children: [
+          snapshot.browserApproval ? /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "request-card browser-approval", "aria-label": t("browserApproval"), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "request-card-title", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("strong", { children: [
-                "Browser approval · ",
-                snapshot.browserApproval.risk.replace("_", " ")
+                t("browserApproval"),
+                " · ",
+                t(RISK_MESSAGE_KEYS[snapshot.browserApproval.risk])
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: snapshot.browserApproval.summary }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "request-actions", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "request-primary", type: "button", onClick: () => void runControlAction(() => client.respondToBrowserApproval("approved")), children: "Allow once" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => void runControlAction(() => client.respondToBrowserApproval("denied")), children: "Deny" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "request-primary", type: "button", onClick: () => void runControlAction(() => client.respondToBrowserApproval("approved")), children: t("allowOnce") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => void runControlAction(() => client.respondToBrowserApproval("denied")), children: t("deny") })
             ] })
           ] }) : null,
-          snapshot.clarification ? /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "request-card", "aria-label": "Agent question", children: [
+          snapshot.clarification ? /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "request-card", "aria-label": t("agentQuestion"), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "request-card-title", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(SparkleIcon, {}),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: snapshot.clarification.kind === "approval" ? "Approval required" : "xopc needs your input" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: snapshot.clarification.kind === "approval" ? t("approvalRequired") : t("xopcNeedsInput") })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: snapshot.clarification.question }),
             snapshot.clarification.choices?.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "choice-list", children: snapshot.clarification.choices.map((choice) => /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: clarificationSubmitting, onClick: () => void respondToClarification("answer", choice), children: choice }, choice)) }) : null,
@@ -27232,7 +27316,7 @@ function ChatPanel() {
                 {
                   value: clarificationAnswer,
                   onChange: (event) => setClarificationAnswer(event.target.value),
-                  placeholder: snapshot.clarification.suggestedAnswer ?? "Type your answer"
+                  placeholder: snapshot.clarification.suggestedAnswer ?? t("typeAnswer")
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -27241,16 +27325,16 @@ function ChatPanel() {
                   type: "button",
                   disabled: clarificationSubmitting || !clarificationAnswer.trim(),
                   onClick: () => void respondToClarification("answer", clarificationAnswer.trim()),
-                  children: "Send"
+                  children: t("send")
                 }
               )
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "clarification-actions", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: clarificationSubmitting, onClick: () => void respondToClarification("agent_decide"), children: "Let xopc decide" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: clarificationSubmitting, onClick: () => void respondToClarification("cancel"), children: "Cancel task" })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: clarificationSubmitting, onClick: () => void respondToClarification("agent_decide"), children: t("letXopcDecide") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: clarificationSubmitting, onClick: () => void respondToClarification("cancel"), children: t("cancelTask") })
             ] })
           ] }) : null,
-          snapshot.pendingDelivery ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "composer-notice", role: "status", children: "Connection interrupted. Your message is queued and will send after xopc reconnects." }) : null,
+          snapshot.pendingDelivery ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "composer-notice", role: "status", children: t("queuedMessageNotice") }) : null,
           error || !connectionProblem && snapshot.error ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-error", role: "alert", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, {}),
             error || snapshot.error
@@ -27259,23 +27343,23 @@ function ChatPanel() {
             pageContext ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `context-chip${pageContext.stale ? " stale" : ""}`, children: [
               pageContext.context.selection ? /* @__PURE__ */ jsxRuntimeExports.jsx(SelectionIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(PageIcon, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: pageContext.source === "tab_mention" ? "Tab" : pageContext.context.selection ? "Selection" : "Page" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: pageContext.source === "tab_mention" ? t("tab") : pageContext.context.selection ? t("selection") : t("page") }),
                 " · ",
                 new URL(pageContext.context.url).hostname,
                 " · ",
                 pageContext.context.title
               ] }),
-              pageContext.stale ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => void refreshPageContext(), children: "Refresh" }) : null,
-              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "chip-remove", "aria-label": "Remove page context", onClick: () => setPageContext(void 0), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {}) })
+              pageContext.stale ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => void refreshPageContext(), children: t("refresh") }) : null,
+              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "chip-remove", "aria-label": t("removePageContext"), onClick: () => setPageContext(void 0), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {}) })
             ] }) : null,
             attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "attachment-chip", children: [
               attachment.type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: attachment.type === "image" ? "Image" : "File" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: attachment.type === "image" ? t("image") : t("file") }),
                 " · ",
                 attachment.name
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "chip-remove", "aria-label": `Remove ${attachment.name}`, onClick: () => setAttachments((current) => current.filter((_, candidate) => candidate !== index)), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {}) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "chip-remove", "aria-label": t("removeAttachment", attachment.name), onClick: () => setAttachments((current) => current.filter((_, candidate) => candidate !== index)), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {}) })
             ] }, `${attachment.name}-${index}`))
           ] }) : null,
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -27289,7 +27373,7 @@ function ChatPanel() {
               onChange: (event) => void addFiles(event.target.files)
             }
           ),
-          tabMention ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-mention-menu", role: "listbox", "aria-label": "Open tabs", children: mentionTabs.length ? mentionTabs.map((tab, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          tabMention ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-mention-menu", role: "listbox", "aria-label": t("openTabs"), children: mentionTabs.length ? mentionTabs.map((tab, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               type: "button",
@@ -27304,167 +27388,169 @@ function ChatPanel() {
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: tab.title }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { children: [
                   tab.hostname,
-                  tab.active ? " · current" : ""
+                  tab.active ? ` · ${t("currentTab")}` : ""
                 ] })
               ]
             },
             tab.id
-          )) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-mention-empty", children: "No matching tabs" }) }) : null,
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-input-row", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tools-anchor", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { ref: toolsTrigger, type: "button", className: `composer-icon-button${toolsOpen ? " active" : ""}`, "aria-label": "Add context or attachment", "aria-expanded": toolsOpen, onClick: () => setToolsOpen((open) => !open), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PaperclipIcon, {}) }),
-              toolsOpen ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tools-menu", ref: toolsMenu, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tools-menu-section", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "tools-menu-label", children: "Add to this message" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
-                    setToolsOpen(false);
-                    void attachPage("page");
-                  }, children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(PageIcon, {}),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Current page" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: "Share readable page content" })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
-                    setToolsOpen(false);
-                    void attachPage("selection");
-                  }, children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectionIcon, {}),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Selected text" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: "Share your current selection" })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
-                    setToolsOpen(false);
-                    void addScreenshot();
-                  }, children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon, {}),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Screenshot" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: "Capture the visible tab" })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
-                    setToolsOpen(false);
-                    fileInput.current?.click();
-                  }, children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, {}),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "File" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: "Image, PDF, text, JSON, or CSV" })
-                    ] })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tools-menu-section tab-access-section", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "tools-menu-label", children: "Live tab access" }),
-                  snapshot.tabBinding ? /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "active-access", onClick: () => {
-                    setToolsOpen(false);
-                    void runControlAction(() => client.unbindActiveTab());
-                  }, children: [
-                    snapshot.tabBinding.mode === "act" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CursorIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(EyeIcon, {}),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: snapshot.tabBinding.mode === "act" ? "Control enabled" : "Read enabled" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: "Click to stop access" })
+          )) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-mention-empty", children: t("noMatchingTabs") }) }) : null,
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "composer-input-row", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "textarea",
+            {
+              ref: textarea,
+              value: draft,
+              onChange: (event) => {
+                setDraft(event.target.value);
+                void updateTabMention(event.target.value, event.target.selectionStart);
+              },
+              onSelect: (event) => void updateTabMention(event.currentTarget.value, event.currentTarget.selectionStart),
+              onPaste: (event) => {
+                if (!event.clipboardData.files.length) return;
+                event.preventDefault();
+                void addFiles(event.clipboardData.files);
+              },
+              onKeyDown: (event) => {
+                if (tabMention) {
+                  if (event.key === "ArrowDown" && mentionTabs.length) {
+                    event.preventDefault();
+                    setMentionIndex((current) => (current + 1) % mentionTabs.length);
+                    return;
+                  }
+                  if (event.key === "ArrowUp" && mentionTabs.length) {
+                    event.preventDefault();
+                    setMentionIndex((current) => (current - 1 + mentionTabs.length) % mentionTabs.length);
+                    return;
+                  }
+                  if (event.key === "Escape") {
+                    event.preventDefault();
+                    mentionRequest.current += 1;
+                    setTabMention(void 0);
+                    setMentionTabs([]);
+                    return;
+                  }
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    const selectedTab = mentionTabs[mentionIndex];
+                    if (selectedTab) void chooseMentionedTab(selectedTab);
+                    return;
+                  }
+                }
+                if (event.key === "Enter" && !event.shiftKey) {
+                  event.preventDefault();
+                  event.currentTarget.form?.requestSubmit();
+                }
+              },
+              onBlur: () => {
+                mentionRequest.current += 1;
+                setTabMention(void 0);
+                setMentionTabs([]);
+              },
+              placeholder: t("composerPlaceholder"),
+              disabled: snapshot.submitting,
+              rows: 1
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-footer", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-toolbar-start", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tools-anchor", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("button", { ref: toolsTrigger, type: "button", className: `composer-icon-button${toolsOpen ? " active" : ""}`, "aria-label": t("addContext"), "aria-expanded": toolsOpen, onClick: () => setToolsOpen((open) => !open), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {}) }),
+                toolsOpen ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tools-menu", ref: toolsMenu, children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tools-menu-section", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "tools-menu-label", children: t("addToMessage") }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
+                      setToolsOpen(false);
+                      void attachPage("page");
+                    }, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(PageIcon, {}),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: t("currentPage") }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: t("sharePageContent") })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
+                      setToolsOpen(false);
+                      void attachPage("selection");
+                    }, children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectionIcon, {}),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: t("selectedText") }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: t("shareSelection") })
+                      ] })
                     ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {})
-                  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
                       setToolsOpen(false);
-                      void runControlAction(() => client.bindActiveTab("read"));
+                      void addScreenshot();
                     }, children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(EyeIcon, {}),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon, {}),
                       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Read this tab" }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: "Keep page content available" })
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: t("screenshot") }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: t("captureVisibleTab") })
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
                       setToolsOpen(false);
-                      void runControlAction(() => client.bindActiveTab("act"));
+                      fileInput.current?.click();
                     }, children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(CursorIcon, {}),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, {}),
                       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: "Control this tab" }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: "Allow browser actions with safeguards" })
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: t("file") }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: t("supportedFileTypes") })
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tools-menu-section tab-access-section", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "tools-menu-label", children: t("liveTabAccess") }),
+                    snapshot.tabBinding ? /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "active-access", onClick: () => {
+                      setToolsOpen(false);
+                      void runControlAction(() => client.unbindActiveTab());
+                    }, children: [
+                      snapshot.tabBinding.mode === "act" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CursorIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(EyeIcon, {}),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: snapshot.tabBinding.mode === "act" ? t("controlEnabled") : t("readEnabled") }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: t("stopAccess") })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {})
+                    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
+                        setToolsOpen(false);
+                        void runControlAction(() => client.bindActiveTab("read"));
+                      }, children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(EyeIcon, {}),
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: t("readThisTab") }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: t("keepPageAvailable") })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => {
+                        setToolsOpen(false);
+                        void runControlAction(() => client.bindActiveTab("act"));
+                      }, children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(CursorIcon, {}),
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: t("controlThisTab") }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: t("controlSafeguards") })
+                        ] })
                       ] })
                     ] })
                   ] })
-                ] })
-              ] }) : null
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "textarea",
-              {
-                ref: textarea,
-                value: draft,
-                onChange: (event) => {
-                  setDraft(event.target.value);
-                  void updateTabMention(event.target.value, event.target.selectionStart);
-                },
-                onSelect: (event) => void updateTabMention(event.currentTarget.value, event.currentTarget.selectionStart),
-                onPaste: (event) => {
-                  if (!event.clipboardData.files.length) return;
-                  event.preventDefault();
-                  void addFiles(event.clipboardData.files);
-                },
-                onKeyDown: (event) => {
-                  if (tabMention) {
-                    if (event.key === "ArrowDown" && mentionTabs.length) {
-                      event.preventDefault();
-                      setMentionIndex((current) => (current + 1) % mentionTabs.length);
-                      return;
-                    }
-                    if (event.key === "ArrowUp" && mentionTabs.length) {
-                      event.preventDefault();
-                      setMentionIndex((current) => (current - 1 + mentionTabs.length) % mentionTabs.length);
-                      return;
-                    }
-                    if (event.key === "Escape") {
-                      event.preventDefault();
-                      mentionRequest.current += 1;
-                      setTabMention(void 0);
-                      setMentionTabs([]);
-                      return;
-                    }
-                    if (event.key === "Enter") {
-                      event.preventDefault();
-                      const selectedTab = mentionTabs[mentionIndex];
-                      if (selectedTab) void chooseMentionedTab(selectedTab);
-                      return;
-                    }
-                  }
-                  if (event.key === "Enter" && !event.shiftKey) {
-                    event.preventDefault();
-                    event.currentTarget.form?.requestSubmit();
-                  }
-                },
-                onBlur: () => {
-                  mentionRequest.current += 1;
-                  setTabMention(void 0);
-                  setMentionTabs([]);
-                },
-                placeholder: "Message xopc…  Use @ to mention a tab",
-                disabled: snapshot.submitting,
-                rows: 1
-              }
-            ),
-            snapshot.runId ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "send-button stop-button", "aria-label": "Stop response", title: snapshot.stopping ? "Stopping response" : "Stop response", disabled: snapshot.stopping, onClick: () => void runControlAction(() => client.abort()), children: /* @__PURE__ */ jsxRuntimeExports.jsx(StopIcon, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "send-button", type: "submit", "aria-label": "Send message", title: "Send message", disabled: snapshot.submitting || snapshot.pendingDelivery || snapshot.sessionLoading || !draft.trim() && attachments.length === 0 || !snapshot.endpointReady || Boolean(tabMention), children: /* @__PURE__ */ jsxRuntimeExports.jsx(SendIcon, {}) })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-footer", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-state", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `mini-status ${snapshot.endpointReady ? "online" : ""}` }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: snapshot.stopping ? "Stopping…" : snapshot.submitting ? "Sending…" : snapshot.pendingDelivery ? "Queued" : connectionText }),
-              snapshot.tabBinding ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "access-pill", children: [
-                snapshot.tabBinding.mode === "act" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CursorIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(EyeIcon, {}),
-                snapshot.tabBinding.mode === "act" ? "Control" : "Read"
-              ] }) : null
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-state", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `mini-status ${snapshot.endpointReady ? "online" : ""}` }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "composer-state-label", children: snapshot.stopping ? t("stopping") : snapshot.submitting ? t("sending") : snapshot.pendingDelivery ? t("queued") : connectionText }),
+                snapshot.tabBinding ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "access-pill", children: [
+                  snapshot.tabBinding.mode === "act" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CursorIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(EyeIcon, {}),
+                  snapshot.tabBinding.mode === "act" ? t("control") : t("read")
+                ] }) : null
+              ] })
             ] }),
-            snapshot.modelConfig ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "model-controls", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("select", { "aria-label": "Model", title: "Session model", value: snapshot.modelConfig.model, disabled: snapshot.modelConfig.fixedModel || Boolean(snapshot.runId), onChange: (event) => void runControlAction(() => client.updateModel(event.target.value)), children: snapshot.models.map((model) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: model.id, children: model.name }, model.id)) }),
-              thinkingOptions.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("select", { "aria-label": "Thinking level", title: "Thinking level", value: snapshot.modelConfig.thinkingLevel, disabled: Boolean(snapshot.runId), onChange: (event) => void runControlAction(() => client.updateThinking(event.target.value)), children: thinkingOptions.map((level) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: level, children: level }, level)) }) : null
-            ] }) : null
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-toolbar-end", children: [
+              snapshot.modelConfig ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "model-controls", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("select", { "aria-label": t("model"), title: t("sessionModel"), value: snapshot.modelConfig.model, disabled: Boolean(snapshot.runId), onChange: (event) => void runControlAction(() => client.updateModel(event.target.value)), children: snapshot.models.map((model) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: model.id, children: model.name }, model.id)) }),
+                thinkingOptions.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("select", { "aria-label": t("thinkingLevel"), title: t("thinkingLevel"), value: snapshot.modelConfig.thinkingLevel, disabled: Boolean(snapshot.runId), onChange: (event) => void runControlAction(() => client.updateThinking(event.target.value)), children: thinkingOptions.map((level) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: level, children: thinkingLabel(level) }, level)) }) : null
+              ] }) : null,
+              snapshot.runId ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "send-button stop-button", "aria-label": t("stopResponse"), title: snapshot.stopping ? t("stoppingResponse") : t("stopResponse"), disabled: snapshot.stopping, onClick: () => void runControlAction(() => client.abort()), children: /* @__PURE__ */ jsxRuntimeExports.jsx(StopIcon, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "send-button", type: "submit", "aria-label": t("sendMessage"), title: t("sendMessage"), disabled: snapshot.submitting || snapshot.pendingDelivery || snapshot.sessionLoading || !draft.trim() && attachments.length === 0 || !snapshot.endpointReady || Boolean(tabMention), children: /* @__PURE__ */ jsxRuntimeExports.jsx(SendIcon, {}) })
+            ] })
           ] })
         ]
       }
@@ -27472,6 +27558,7 @@ function ChatPanel() {
   ] });
 }
 
+const THEME_STORAGE_KEY = "xopc.sidepanel.theme";
 function isSidePanelTheme(value) {
   return value === "light" || value === "dark";
 }
@@ -27479,66 +27566,15 @@ function applySidePanelTheme(theme) {
   document.documentElement.dataset.theme = theme;
   document.documentElement.style.colorScheme = theme;
 }
-function applySystemSidePanelTheme() {
-  applySidePanelTheme(globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+async function loadSidePanelThemePreference() {
+  const stored = await chrome.storage.local.get(THEME_STORAGE_KEY);
+  const theme = isSidePanelTheme(stored[THEME_STORAGE_KEY]) ? stored[THEME_STORAGE_KEY] : globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  applySidePanelTheme(theme);
+  return theme;
 }
-function isGatewayThemePageUrl(value, gatewayUrl) {
-  try {
-    const url = new URL(value);
-    if (url.protocol === "http:" && (url.hostname === "127.0.0.1" || url.hostname === "localhost")) {
-      return true;
-    }
-    return Boolean(gatewayUrl && url.origin === new URL(gatewayUrl).origin);
-  } catch {
-    return false;
-  }
-}
-async function pageTheme(tabId) {
-  try {
-    const [{ result } = {}] = await chrome.scripting.executeScript({
-      target: { tabId },
-      func: () => ({
-        theme: document.documentElement.dataset.theme
-      })
-    });
-    return isSidePanelTheme(result?.theme) ? result.theme : void 0;
-  } catch {
-    return void 0;
-  }
-}
-async function syncSidePanelTheme(gatewayUrl) {
-  const tabs = (await chrome.tabs.query({})).filter((tab) => {
-    return typeof tab.id === "number" && Boolean(tab.url) && isGatewayThemePageUrl(tab.url, gatewayUrl);
-  }).sort((left, right) => Number(right.active) - Number(left.active));
-  for (const tab of tabs) {
-    const theme = await pageTheme(tab.id);
-    if (theme) {
-      applySidePanelTheme(theme);
-      return;
-    }
-  }
-}
-function watchSidePanelTheme(gatewayUrl) {
-  const sync = () => {
-    void syncSidePanelTheme(gatewayUrl);
-  };
-  const onUpdated = (_tabId, change) => {
-    if (change.status === "complete" || change.url) sync();
-  };
-  const onVisibilityChange = () => {
-    if (document.visibilityState === "visible") sync();
-  };
-  sync();
-  window.addEventListener("focus", sync);
-  document.addEventListener("visibilitychange", onVisibilityChange);
-  chrome.tabs.onActivated.addListener(sync);
-  chrome.tabs.onUpdated.addListener(onUpdated);
-  return () => {
-    window.removeEventListener("focus", sync);
-    document.removeEventListener("visibilitychange", onVisibilityChange);
-    chrome.tabs.onActivated.removeListener(sync);
-    chrome.tabs.onUpdated.removeListener(onUpdated);
-  };
+async function saveSidePanelThemePreference(theme) {
+  await chrome.storage.local.set({ [THEME_STORAGE_KEY]: theme });
+  applySidePanelTheme(theme);
 }
 
 async function reconnectBrowserBridge() {
@@ -27547,23 +27583,23 @@ async function reconnectBrowserBridge() {
 function pairingErrorMessage(cause) {
   const message = cause instanceof Error ? cause.message : String(cause);
   if (message === "Gateway site permission was not granted") {
-    return "Chrome needs access to the Gateway address. Select Connect again and allow the site permission.";
+    return t("errorGatewayPermissionHelp");
   }
   if (message === "PAIRING_EXPIRED" || message === "Pairing expired" || message === "Pairing invitation has expired") {
-    return "This invitation expired. Create and copy a new invitation from Device access.";
+    return t("errorInvitationExpiredHelp");
   }
   if (message === "PAIRING_DEVICE_MISMATCH") {
-    return "This invitation was created for a phone. Create a browser invitation instead.";
+    return t("errorPairingDeviceMismatch");
   }
   if (message === "No Gateway route could be reached") {
-    return "None of the Gateway addresses responded. Check that the Gateway is online and its secure connection is active.";
+    return t("errorNoReachableGatewayRouteHelp");
   }
   if (message.startsWith("PAIRING_ROUTE_PERMISSION_REQUIRED:")) {
-    return "The current Gateway address did not respond. Select Continue to allow the next address listed in the invitation.";
+    return t("errorNextRoutePermission");
   }
   return message;
 }
-function SidePanelApp() {
+function SidePanelApp({ initialLocale, initialTheme }) {
   const [profile, setProfile] = reactExports.useState();
   const [invitation, setInvitation] = reactExports.useState("");
   const [confirmationCode, setConfirmationCode] = reactExports.useState("");
@@ -27571,8 +27607,13 @@ function SidePanelApp() {
   const [error, setError] = reactExports.useState("");
   const [localInvitation, setLocalInvitation] = reactExports.useState("");
   const [nextOrigin, setNextOrigin] = reactExports.useState();
+  const [locale, setLocale] = reactExports.useState(initialLocale);
+  const [theme, setTheme] = reactExports.useState(initialTheme);
+  const [settingsOpen, setSettingsOpen] = reactExports.useState(false);
   const initializationStarted = reactExports.useRef(false);
   const pairingStarted = reactExports.useRef(false);
+  const settingsMenu = reactExports.useRef(null);
+  const settingsTrigger = reactExports.useRef(null);
   const connect = reactExports.useCallback(async (value, origin) => {
     if (pairingStarted.current) return;
     pairingStarted.current = true;
@@ -27622,7 +27663,31 @@ function SidePanelApp() {
       await connect(local.invitation);
     })();
   }, [connect]);
-  reactExports.useEffect(() => watchSidePanelTheme(profile?.gatewayUrl), [profile?.gatewayUrl]);
+  reactExports.useEffect(() => {
+    function closeSettings(event) {
+      const target = event.target;
+      if (!settingsMenu.current?.contains(target) && !settingsTrigger.current?.contains(target)) {
+        setSettingsOpen(false);
+      }
+    }
+    function closeOnEscape(event) {
+      if (event.key === "Escape") setSettingsOpen(false);
+    }
+    document.addEventListener("mousedown", closeSettings);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("mousedown", closeSettings);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, []);
+  async function changeTheme(nextTheme) {
+    setTheme(nextTheme);
+    await saveSidePanelThemePreference(nextTheme);
+  }
+  async function changeLocale(nextLocale) {
+    await saveExtensionLocalePreference(nextLocale);
+    setLocale(nextLocale);
+  }
   async function disconnect() {
     await revokeAndForgetProfile();
     setProfile(void 0);
@@ -27634,7 +27699,7 @@ function SidePanelApp() {
     setError("");
     try {
       const local = await discoverLocalGateway({ force: true });
-      if (!local) throw new Error("No local xopc Gateway was found");
+      if (!local) throw new Error(t("errorNoLocalGateway"));
       setLocalInvitation(local.invitation);
       await connect(local.invitation);
     } catch (cause) {
@@ -27664,44 +27729,96 @@ function SidePanelApp() {
       ] }),
       state !== "online" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "status", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `status-dot ${error ? "error" : ""}` }),
-        state === "pairing" ? "Pairing" : state === "loading" ? "Starting" : "Setup required"
-      ] }) : null
+        state === "pairing" ? t("statusPairing") : state === "loading" ? t("statusStarting") : t("statusSetupRequired")
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "header-actions", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            ref: settingsTrigger,
+            className: "header-icon-button",
+            onClick: () => setSettingsOpen((open) => !open),
+            title: t("settings"),
+            "aria-label": t("settings"),
+            "aria-expanded": settingsOpen,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsIcon, {})
+          }
+        ),
+        settingsOpen ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: settingsMenu, className: "settings-menu", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "settings-menu-title", children: t("settings") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "settings-group", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "settings-label", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(SunIcon, {}),
+              t("appearance")
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "settings-options", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: theme === "light" ? "active" : "", onClick: () => void changeTheme("light"), children: [
+                t("themeLight"),
+                theme === "light" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) : null
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: theme === "dark" ? "active" : "", onClick: () => void changeTheme("dark"), children: [
+                t("themeDark"),
+                theme === "dark" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) : null
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "settings-group", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "settings-label", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(GlobeIcon, {}),
+              t("language")
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "settings-options", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: locale === "zh-CN" ? "active" : "", onClick: () => void changeLocale("zh-CN"), children: [
+                t("languageChinese"),
+                locale === "zh-CN" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) : null
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: locale === "en" ? "active" : "", onClick: () => void changeLocale("en"), children: [
+                t("languageEnglish"),
+                locale === "en" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) : null
+              ] })
+            ] })
+          ] }),
+          state === "online" && profile ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "settings-disconnect", onClick: () => void disconnect(), title: t("disconnectGateway", profile.gatewayName), children: t("disconnect") }) : null
+        ] }) : null
+      ] })
     ] }),
     state !== "online" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "center", children: [
-      state === "loading" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "muted", children: "Loading…" }) : null,
+      state === "loading" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "muted", children: t("loading") }) : null,
       state === "unpaired" || state === "pairing" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: "Connect a Gateway" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: t("connectToXopc") }),
         localInvitation ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: "A local xopc Gateway was found. xopc connects automatically on this computer." }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "primary local-connect", onClick: () => void connect(localInvitation), disabled: state === "pairing", children: state === "pairing" ? "Connecting…" : "Retry local connection" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pairing-divider", children: "or paste an invitation" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: t("localGatewayFound") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "primary local-connect", onClick: () => void connect(localInvitation), disabled: state === "pairing", children: state === "pairing" ? t("connecting") : t("retryLocalConnection") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pairing-divider", children: t("pairingLinkDivider") })
         ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: "Connect locally, or paste the one-time invitation copied from Device access." }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "primary local-connect", onClick: () => void connectLocalGateway(), disabled: state === "pairing", children: state === "pairing" ? "Connecting…" : "Connect local Gateway" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pairing-divider", children: "or paste an invitation" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: t("connectGatewayHelp") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "primary local-connect", onClick: () => void connectLocalGateway(), disabled: state === "pairing", children: state === "pairing" ? t("connecting") : t("connectLocalGateway") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pairing-divider", children: t("pairingLinkDivider") })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "field", children: [
-          "One-time invitation",
+          t("pairingLink"),
           /* @__PURE__ */ jsxRuntimeExports.jsx("textarea", { rows: 4, value: invitation, onChange: (event) => setInvitation(event.target.value), disabled: state === "pairing" })
         ] }),
         confirmationCode ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: "Confirm this code in the Gateway:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: t("confirmGatewayCode") }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "approval-code", children: confirmationCode })
         ] }) : null,
         error ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "error-text", children: error }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "actions", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "primary", onClick: () => void connect(invitation, nextOrigin), disabled: !invitation.trim() || state === "pairing", children: state === "pairing" ? "Waiting for approval…" : nextOrigin ? `Allow ${new URL(nextOrigin).host} and continue` : "Connect" }),
-          invitation ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => void cancelPairing(), disabled: state === "pairing", children: "Cancel pairing" }) : null
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "primary", onClick: () => void connect(invitation, nextOrigin), disabled: !invitation.trim() || state === "pairing", children: state === "pairing" ? t("waitingForApproval") : nextOrigin ? t("allowGatewayAndContinue", new URL(nextOrigin).host) : t("connect") }),
+          invitation ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => void cancelPairing(), disabled: state === "pairing", children: t("cancelPairing") }) : null
         ] })
       ] }) : null
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChatPanel, {}),
-    state === "online" && profile ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "disconnect-link", onClick: disconnect, title: `Disconnect ${profile.gatewayName}`, children: "Disconnect" }) : null
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChatPanel, {})
   ] });
 }
 
 const root = document.getElementById("root");
 if (!root) throw new Error("Side Panel root is missing");
-applySystemSidePanelTheme();
+const [locale, theme] = await Promise.all([
+  loadExtensionLocalePreference(),
+  loadSidePanelThemePreference()
+]);
 clientExports.createRoot(root).render(
-  /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SidePanelApp, {}) })
+  /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SidePanelApp, { initialLocale: locale, initialTheme: theme }) })
 );