@xopcai/xopc 0.0.367 → 0.0.369

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

@@ -1,4 +1,4 @@
-import { F as strictObject, t as number, d as boolean, G as string, c as array, _ as _enum, r as literal, u as object, m as discriminatedUnion, e as browserPageContextsInputSchema, H as t, M as MAX_BROWSER_CONTEXTS_PER_TURN, p as gatewayFetch, o as extensionLocale, v as openDatabase, a as RealtimeClient, R as REALTIME_PROTOCOL_VERSION, b as activeTabId, k as currentTabDescriptor, T as TAB_BINDING_PREFIX, q as getAccessProfile, y as readProfile, B as runWithTabSiteAccess, P as PENDING_CONTEXT_KEY, i as captureTabWithPermission, w as pairGateway, D as setAutoConnectEnabled, x as readPendingBrowserPairing, l as discoverLocalGateway, C as saveExtensionLocalePreference, A as revokeAndForgetProfile, f as cancelPendingBrowserPairing, s as loadExtensionLocalePreference } from './assets/auth-beGtbLPS.js';
+import { F as strictObject, t as number, d as boolean, G as string, c as array, _ as _enum, r as literal, u as object, m as discriminatedUnion, e as browserPageContextsInputSchema, H as t, p as gatewayFetch, M as MAX_BROWSER_CONTEXTS_PER_TURN, o as extensionLocale, v as openDatabase, a as RealtimeClient, R as REALTIME_PROTOCOL_VERSION, b as activeTabId, k as currentTabDescriptor, T as TAB_BINDING_PREFIX, q as getAccessProfile, y as readProfile, B as runWithTabSiteAccess, P as PENDING_CONTEXT_KEY, i as captureTabWithPermission, w as pairGateway, D as setAutoConnectEnabled, x as readPendingBrowserPairing, l as discoverLocalGateway, C as saveExtensionLocalePreference, A as revokeAndForgetProfile, f as cancelPendingBrowserPairing, s as loadExtensionLocalePreference } from './assets/page-context-BeworyNB.js';
 
 const AppContextResourceSchema = strictObject({
   kind: _enum(["note", "task", "project", "scene", "local_app"]),
@@ -17573,7 +17573,7 @@ var clientExports = requireClient();
 function MicrophonePermission() {
   const requesting = reactExports.useRef(false);
   const [state, setState] = reactExports.useState("idle");
-  async function authorize() {
+  const authorize = reactExports.useCallback(async () => {
     if (requesting.current) return;
     requesting.current = true;
     setState("pending");
@@ -17586,11 +17586,328 @@ function MicrophonePermission() {
     } finally {
       requesting.current = false;
     }
-  }
+  }, []);
+  reactExports.useEffect(() => {
+    void authorize();
+  }, [authorize]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "microphone-permission", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: t("voicePermissionOpen") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { role: "status", children: t(state === "granted" ? "voicePermissionGranted" : state === "denied" ? "voicePermissionFailed" : "voicePermissionHelp") }),
-    state !== "granted" ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: state === "pending", onClick: () => void authorize(), children: t(state === "pending" ? "voiceStarting" : "voicePermissionOpen") }) : null
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { role: "status", children: t(state === "granted" ? "voicePermissionGranted" : state === "denied" ? "voicePermissionFailed" : "voiceStarting") }),
+    state === "denied" ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => void authorize(), children: t("voicePermissionOpen") }) : null
+  ] });
+}
+
+function IconBase({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", ...props, children });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m7 10 5 5 5-5" }) });
+}
+function ArrowDownIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 5v14M6 13l6 6 6-6" }) });
+}
+function PlusIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 5v14M5 12h14" }) });
+}
+function SearchIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m20 20-4-4" })
+  ] });
+}
+function PaperclipIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m20.5 11.5-8.9 8.9a6 6 0 0 1-8.5-8.5l9.5-9.5a4 4 0 0 1 5.7 5.7l-9.5 9.5A2 2 0 0 1 6 14.8l8.8-8.8" }) });
+}
+function PageIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 2v6h6M8 13h8M8 17h5" })
+  ] });
+}
+function SelectionIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 4H5a1 1 0 0 0-1 1v3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3M8 9h8M8 13h6" }) });
+}
+function CameraIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14.5 4 16 7h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3l1.5-3Z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "13", r: "3" })
+  ] });
+}
+function FileIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 2v6h6" })
+  ] });
+}
+function EyeIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "2.5" })
+  ] });
+}
+function CursorIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m5 3 14 9-6 2-3 6Z" }) });
+}
+function SendIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m5 12 7-7 7 7M12 19V5" }) });
+}
+function StopIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1.5", fill: "currentColor", stroke: "none" }) });
+}
+function CopyIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3" })
+  ] });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m5 12 4 4L19 6" }) });
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m6 6 12 12M18 6 6 18" }) });
+}
+function SparkleIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 3c.7 4.4 3.6 7.3 8 8-4.4.7-7.3 3.6-8 8-.7-4.4-3.6-7.3-8-8 4.4-.7 7.3-3.6 8-8Z" }) });
+}
+function AlertIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__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" })
+  ] });
+}
+function MicrophoneIcon(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8" })
+  ] });
+}
+
+function recordingErrorMessage(cause) {
+  const message = (cause instanceof Error ? cause.message : String(cause)).replace(/^(?:Error:\s*)+/, "");
+  if (message === "RECORDING_PAGE_UNAVAILABLE") return t("recordingChooseWebsite");
+  return message;
+}
+function RecordingPanel() {
+  const [session, setSession] = reactExports.useState();
+  const [pages, setPages] = reactExports.useState([]);
+  const [selectedTab, setSelectedTab] = reactExports.useState();
+  const [pagesLoading, setPagesLoading] = reactExports.useState(true);
+  const [busy, setBusy] = reactExports.useState(false);
+  const [error, setError] = reactExports.useState("");
+  const [automation, setAutomation] = reactExports.useState();
+  const [inputs, setInputs] = reactExports.useState({});
+  const [run, setRun] = reactExports.useState();
+  const api = async (path, init) => {
+    const response = await gatewayFetch(path, init);
+    const data = await response.json();
+    if (!response.ok) throw new Error(typeof data.error === "string" ? data.error : data.error?.message || t("recordingRequestFailed"));
+    return data;
+  };
+  const command = async (operation, tabId) => {
+    const response = await chrome.runtime.sendMessage({ type: "browser/recording-command", operation, ...tabId !== void 0 ? { tabId } : {} });
+    if (!response.ok) throw new Error(response.error);
+    return response.value;
+  };
+  reactExports.useEffect(() => {
+    let disposed = false;
+    const refresh = async (followActive = false) => {
+      try {
+        const tabs = (await chrome.tabs.query({ currentWindow: true })).filter((tab) => tab.id !== void 0 && /^https?:\/\//.test(tab.url ?? ""));
+        if (disposed) return;
+        setPages(tabs);
+        setSelectedTab((current) => followActive && tabs.find((tab) => tab.active)?.id || tabs.find((tab) => tab.id === current)?.id || tabs.find((tab) => tab.active)?.id || (tabs.length === 1 ? tabs[0].id : void 0));
+      } catch (cause) {
+        if (!disposed) setError(recordingErrorMessage(cause));
+      } finally {
+        if (!disposed) setPagesLoading(false);
+      }
+    };
+    const activated = () => {
+      void refresh(true);
+    };
+    const changed = () => {
+      void refresh();
+    };
+    void refresh(true);
+    chrome.tabs.onActivated.addListener(activated);
+    chrome.tabs.onUpdated.addListener(changed);
+    chrome.tabs.onRemoved.addListener(changed);
+    chrome.tabs.onCreated.addListener(changed);
+    return () => {
+      disposed = true;
+      chrome.tabs.onActivated.removeListener(activated);
+      chrome.tabs.onUpdated.removeListener(changed);
+      chrome.tabs.onRemoved.removeListener(changed);
+      chrome.tabs.onCreated.removeListener(changed);
+    };
+  }, []);
+  reactExports.useEffect(() => {
+    let disposed = false;
+    const refresh = () => void command("status").then((sessions) => {
+      if (!disposed) setSession(sessions.find((item) => ["recording", "paused"].includes(item.state)) ?? sessions.at(-1));
+    }).catch((cause) => {
+      if (!disposed) setError(recordingErrorMessage(cause));
+    });
+    refresh();
+    const timer = window.setInterval(refresh, 1500);
+    return () => {
+      disposed = true;
+      window.clearInterval(timer);
+    };
+  }, []);
+  reactExports.useEffect(() => {
+    if (!session?.automationId) {
+      setAutomation(void 0);
+      return;
+    }
+    let disposed = false;
+    void api(`/api/browser/automations/${encodeURIComponent(session.automationId)}`).then((data) => {
+      if (disposed) return;
+      const saved2 = data.automation;
+      setAutomation(saved2);
+      setInputs(Object.fromEntries(Object.entries(saved2.definition.inputs).map(([key, spec]) => [key, spec.default ?? ""])));
+    }).catch((cause) => {
+      if (!disposed) setError(recordingErrorMessage(cause));
+    });
+    return () => {
+      disposed = true;
+    };
+  }, [session?.automationId]);
+  reactExports.useEffect(() => {
+    if (!run || !["queued", "running"].includes(run.status)) return;
+    let disposed = false;
+    const timer = window.setInterval(() => {
+      void api(`/api/browser/automation-runs/${run.id}`).then((data) => {
+        if (!disposed) setRun(data.run);
+      }).catch((cause) => {
+        if (!disposed) setError(recordingErrorMessage(cause));
+      });
+    }, 1e3);
+    return () => {
+      disposed = true;
+      window.clearInterval(timer);
+    };
+  }, [run]);
+  const runSaved = async () => {
+    if (!automation) return;
+    setBusy(true);
+    setError("");
+    try {
+      const data = await api(`/api/browser/automations/${automation.id}/run`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ inputs, revision: automation.revision, clientRequestId: crypto.randomUUID() })
+      });
+      setRun(data.run);
+    } catch (cause) {
+      setError(recordingErrorMessage(cause));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const act = async (operation) => {
+    setBusy(true);
+    setError("");
+    try {
+      if (operation === "start") {
+        if (selectedTab === void 0) return;
+        await chrome.tabs.update(selectedTab, { active: true });
+        setRun(void 0);
+      }
+      setSession(await command(operation, operation === "start" ? selectedTab : void 0));
+    } catch (cause) {
+      setError(recordingErrorMessage(cause));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const active = !!session && ["recording", "paused"].includes(session.state);
+  const saved = !!session?.automationId;
+  const syncing = session?.state === "stopped" && !saved;
+  const page = pages.find((tab) => tab.id === (active || syncing ? session.tabId : selectedTab));
+  const status = active ? session.state === "paused" ? "recordingPaused" : "recordingActive" : saved ? "recordingSavedShort" : session?.state === "stopped" ? "recordingSaving" : session?.state === "interrupted" ? "recordingInterrupted" : "recordingReady";
+  const runStatus = run?.businessOutcome === "unknown" ? t("recordingUnknown") : run?.status === "succeeded" ? t("recordingCompleted") : run?.status === "cancelled" ? t("recordingStopped") : run?.status === "failed" ? recordingErrorMessage(run.error || t("recordingRequestFailed")) : t("recordingRunning");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "recording-panel", "data-state": active ? session.state : syncing ? "syncing" : saved ? "saved" : "ready", "aria-label": t("recordingTitle"), "aria-busy": busy, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: "recording-heading", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "recording-icon", children: saved ? /* @__PURE__ */ jsxRuntimeExports.jsx(CheckIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(PageIcon, {}) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "recording-heading-text", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: saved && automation ? automation.definition.name : t("recordingTitle") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: active ? t("recordingActiveHelp") : saved ? t("recordingSaved") : t("recordingDescription") })
+      ] }),
+      (active || saved || session?.state === "stopped" || session?.state === "interrupted" || selectedTab !== void 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: `recording-status ${active && session.state === "recording" ? "is-recording" : saved ? "is-saved" : ""}`, role: "status", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("i", {}),
+        t(status)
+      ] })
+    ] }),
+    !active && !syncing && (!saved || selectedTab === void 0) && (pagesLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "recording-skeleton" }) : pages.length ? /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "recording-target-label", children: [
+      t("recordingTarget"),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("select", { className: "recording-page-select", value: selectedTab ?? "", disabled: busy, onChange: (event) => {
+        setSelectedTab(Number(event.target.value));
+        setError("");
+      }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", disabled: true, children: t("recordingChoosePage") }),
+        pages.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: tab.id, children: tab.title || new URL(tab.url).hostname }, tab.id))
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "recording-hint", children: t("recordingChooseWebsite") })),
+    page && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "recording-page", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(GlobeIcon, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: new URL(page.url).hostname }),
+      active && /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: page.title })
+    ] }),
+    syncing && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "recording-sync", role: "status", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "recording-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("recordingSyncing") })
+    ] }),
+    session?.state === "interrupted" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "recording-hint", children: t("recordingInterruptedHelp") }),
+    automation && Object.keys(automation.definition.inputs).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { className: "recording-parameters", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("summary", { children: t("recordingParameters") }),
+      Object.entries(automation.definition.inputs).map(([key, spec]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: `recording-input ${spec.type === "boolean" ? "is-checkbox" : ""}`, children: [
+        spec.description || key,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: spec.type === "boolean" ? "checkbox" : spec.type === "number" ? "number" : "text",
+            checked: spec.type === "boolean" ? !!inputs[key] : void 0,
+            value: spec.type === "boolean" ? void 0 : String(inputs[key] ?? ""),
+            onChange: (event) => setInputs((current) => ({ ...current, [key]: spec.type === "boolean" ? event.target.checked : spec.type === "number" ? Number(event.target.value) : event.target.value }))
+          }
+        )
+      ] }, key))
+    ] }),
+    !syncing && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "recording-actions", children: active ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "recording-button", disabled: busy, onClick: () => void act(session.state === "paused" ? "resume" : "pause"), children: t(session.state === "paused" ? "recordingResume" : "recordingPause") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "recording-button is-primary", disabled: busy, onClick: () => void act("finish"), children: [
+        busy ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "recording-spinner", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(StopIcon, {}),
+        t("recordingFinish")
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      automation && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "recording-button is-primary", disabled: busy || !!run && ["queued", "running"].includes(run.status), onClick: () => void runSaved(), children: t("recordingRun") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: `recording-button ${saved ? "" : "is-primary"}`, disabled: busy || pagesLoading || selectedTab === void 0, onClick: () => void act("start"), children: [
+        busy ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "recording-spinner", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "recording-button-dot" }),
+        t(saved ? "recordingNew" : "recordingStart")
+      ] })
+    ] }) }),
+    run && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "recording-run-status", role: "status", children: runStatus }),
+    run?.status === "succeeded" && /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "recording-result", children: typeof run.result === "object" && run.result !== null ? Object.entries(run.result).map(([key, value]) => `${key}: ${typeof value === "string" ? value : JSON.stringify(value)}`).join("\n") : String(run.result ?? "") }),
+    (error || session?.error) && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "recording-error", role: "alert", children: recordingErrorMessage(error || session.error) })
   ] });
 }
 
@@ -17908,109 +18225,6 @@ class PcmWavRecorder {
   }
 }
 
-function IconBase({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", ...props, children });
-}
-function ChevronDownIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m7 10 5 5 5-5" }) });
-}
-function ArrowDownIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 5v14M6 13l6 6 6-6" }) });
-}
-function PlusIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 5v14M5 12h14" }) });
-}
-function SearchIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "11", cy: "11", r: "7" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m20 20-4-4" })
-  ] });
-}
-function PaperclipIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m20.5 11.5-8.9 8.9a6 6 0 0 1-8.5-8.5l9.5-9.5a4 4 0 0 1 5.7 5.7l-9.5 9.5A2 2 0 0 1 6 14.8l8.8-8.8" }) });
-}
-function PageIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 2v6h6M8 13h8M8 17h5" })
-  ] });
-}
-function SelectionIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 4H5a1 1 0 0 0-1 1v3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3M8 9h8M8 13h6" }) });
-}
-function CameraIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14.5 4 16 7h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3l1.5-3Z" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "13", r: "3" })
-  ] });
-}
-function FileIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 2v6h6" })
-  ] });
-}
-function EyeIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "2.5" })
-  ] });
-}
-function CursorIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m5 3 14 9-6 2-3 6Z" }) });
-}
-function SendIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m5 12 7-7 7 7M12 19V5" }) });
-}
-function StopIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1.5", fill: "currentColor", stroke: "none" }) });
-}
-function CopyIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3" })
-  ] });
-}
-function CheckIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m5 12 4 4L19 6" }) });
-}
-function CloseIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m6 6 12 12M18 6 6 18" }) });
-}
-function SparkleIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(IconBase, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 3c.7 4.4 3.6 7.3 8 8-4.4.7-7.3 3.6-8 8-.7-4.4-3.6-7.3-8-8 4.4-.7 7.3-3.6 8-8Z" }) });
-}
-function AlertIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "9" }),
-    /* @__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" })
-  ] });
-}
-function MicrophoneIcon(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconBase, { ...props, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8" })
-  ] });
-}
-
 function VoiceInput({ disabled, onTranscript, onBusy }) {
   const [state, setState] = reactExports.useState("idle");
   const [error, setError] = reactExports.useState("");
@@ -18760,6 +18974,7 @@ class BrowserChatClient {
   runTopic;
   recoveringOutbox = false;
   sendingInput = false;
+  approvalResponses = /* @__PURE__ */ new Set();
   lastOutboxRecoveryAt = 0;
   sessionsRequest = 0;
   defaultModelId;
@@ -18974,7 +19189,6 @@ ${endpointId}`;
       queuedInputs: [],
       clarification: void 0,
       tabBinding: void 0,
-      browserApproval: void 0,
       modelConfig: void 0,
       error: void 0
     });
@@ -19005,7 +19219,6 @@ ${endpointId}`;
       ));
       if (this.snapshot.conversationId !== conversationId) return;
       if (run.payload?.active && run.payload.runId) await this.followRun(run.payload.runId);
-      await this.reloadBrowserApproval();
       if (this.snapshot.conversationId !== conversationId) return;
       this.update({ pendingDelivery: Boolean(await readBrowserOutbox(await inputStorageKey(conversationId))) });
       if (this.snapshot.endpointReady) await this.recoverOutbox();
@@ -19327,16 +19540,6 @@ ${endpointId}`;
     if (binding) await chrome.storage.session.remove(`${TAB_BINDING_PREFIX}${binding.id}`);
     this.update({ tabBinding: void 0 });
   }
-  async respondToBrowserApproval(decision) {
-    const approval = this.snapshot.browserApproval;
-    if (!approval) return;
-    await json(await gatewayFetch("/api/browser/approvals/respond", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ id: approval.id, decision })
-    }));
-    await this.reloadBrowserApproval();
-  }
   async waitForRun(conversationId, clientMessageId) {
     for (let attempt = 0; attempt < 20; attempt += 1) {
       await new Promise((resolve) => setTimeout(resolve, 100));
@@ -19366,10 +19569,9 @@ ${endpointId}`;
       if (event === "clarification.updated") {
         const conversationId = this.snapshot.conversationId;
         if (conversationId && data && typeof data === "object" && data.conversationId === conversationId) {
-          this.update({ clarification: mapClarification(data, conversationId) });
+          await this.applyClarification(data, conversationId);
         }
       }
-      if (event === "browser.approval.required") await this.reloadBrowserApproval();
       return;
     }
     if (topic === "sessions") {
@@ -19495,6 +19697,35 @@ ${endpointId}`;
       fixedModel: config.fixedModel === true
     } });
   }
+  async applyClarification(value, conversationId) {
+    if (this.snapshot.conversationId !== conversationId) return;
+    const clarification = mapClarification(value, conversationId);
+    if (clarification?.kind !== "approval") {
+      this.update({ clarification });
+      return;
+    }
+    this.update({ clarification: void 0 });
+    const key = `browser-approval:${clarification.id}:${clarification.version}`;
+    if (this.approvalResponses.has(key)) return;
+    this.approvalResponses.add(key);
+    try {
+      await json(await gatewayFetch(`/api/clarifications/${encodeURIComponent(clarification.id)}/responses`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "answer",
+          answer: "Approved. Continue with the requested operation.",
+          expectedVersion: clarification.version,
+          idempotencyKey: key
+        })
+      }, this.profileIdentity));
+    } catch (cause) {
+      this.approvalResponses.delete(key);
+      if (this.snapshot.conversationId === conversationId) {
+        this.update({ error: cause instanceof Error ? cause.message : String(cause) });
+      }
+    }
+  }
   async reloadClarification() {
     const conversationId = this.snapshot.conversationId;
     if (!conversationId) return;
@@ -19503,7 +19734,7 @@ ${endpointId}`;
       `/api/sessions/${encodeURIComponent(conversationId)}/clarification`
     ));
     if (this.snapshot.conversationId === conversationId) {
-      this.update({ clarification: mapClarification(result.payload, conversationId) });
+      await this.applyClarification(result.payload, conversationId);
     }
   }
   async reloadTabBinding() {
@@ -19519,19 +19750,6 @@ ${endpointId}`;
     await chrome.storage.session.set({ [`${TAB_BINDING_PREFIX}${result.payload.id}`]: result.payload });
     this.update({ tabBinding: result.payload });
   }
-  async reloadBrowserApproval() {
-    const conversationId = this.snapshot.conversationId;
-    if (!conversationId || !this.snapshot.tabBinding) {
-      this.update({ browserApproval: void 0 });
-      return;
-    }
-    const result = await json(await gatewayFetch(
-      `/api/browser/approvals?conversationId=${encodeURIComponent(conversationId)}`
-    ));
-    if (this.snapshot.conversationId === conversationId) {
-      this.update({ browserApproval: result.approvals.find((approval) => approval.status === "pending") });
-    }
-  }
   async reconcileAbortedRun(runId) {
     const conversationId = this.snapshot.conversationId;
     if (!conversationId) return;
@@ -19645,12 +19863,7 @@ async function fileToBrowserAttachment(file) {
   };
 }
 async function captureVisibleScreenshot() {
-  const tabPromise = chrome.tabs.query({ active: true, currentWindow: true });
-  const [granted, [activeTab]] = await Promise.all([
-    chrome.permissions.request({ origins: ["<all_urls>"] }),
-    tabPromise
-  ]);
-  if (!granted) throw new Error(t("errorScreenshotPermissionRequired"));
+  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
   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 });
@@ -28323,13 +28536,6 @@ function formatSessionDate(timestamp) {
   if (date.toDateString() === now.toDateString()) return formatMessageTime(date.getTime());
   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"
-};
 function formatFileSize(size) {
   if (typeof size !== "number" || !Number.isFinite(size) || size < 0) return "";
   if (size < 1024) return `${size} B`;
@@ -28937,25 +29143,10 @@ function ChatPanel({ gatewayId, deviceId }) {
             /* @__PURE__ */ jsxRuntimeExports.jsx(PaperclipIcon, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t("dropFiles") })
           ] }) : null,
-          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: [
-                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: 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": t("agentQuestion"), children: [
+          snapshot.clarification?.kind === "input" ? /* @__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" ? t("approvalRequired") : t("xopcNeedsInput") })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: 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,
@@ -29227,36 +29418,24 @@ ${pageContext.context.selection ?? pageContext.context.text ?? ""}` }), children
                   ] }),
                   /* @__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: () => {
+                    snapshot.tabBinding?.mode === "act" ? /* @__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.jsx(CursorIcon, {}),
                       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: snapshot.tabBinding.mode === "act" ? t("controlEnabled") : t("readEnabled") }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: t("controlEnabled") }),
                         /* @__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") })
-                        ] })
+                    ] }) : /* @__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("useThisTab") }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: t("useThisTabHelp") })
                       ] })
                     ] })
                   ] })
@@ -29317,9 +29496,6 @@ async function reconnectBrowserBridge() {
 }
 function pairingErrorMessage(cause) {
   const message = cause instanceof Error ? cause.message : String(cause);
-  if (message === "Gateway site permission was not granted") {
-    return t("errorGatewayPermissionHelp");
-  }
   if (message === "PAIRING_EXPIRED" || message === "Pairing expired" || message === "Pairing invitation has expired") {
     return t("errorInvitationExpiredHelp");
   }
@@ -29560,7 +29736,10 @@ function SidePanelApp({ initialLocale, initialTheme }) {
           invitation ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => void cancelPairing(), disabled: state === "pairing", children: t("cancelPairing") }) : null
         ] })
       ] }) : null
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChatPanel, { gatewayId: profile.gatewayId, deviceId: profile.deviceId }, JSON.stringify([profile.gatewayId, profile.gatewayUrl, profile.deviceId]))
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RecordingPanel, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ChatPanel, { gatewayId: profile.gatewayId, deviceId: profile.deviceId }, JSON.stringify([profile.gatewayId, profile.gatewayUrl, profile.deviceId]))
+    ] })
   ] });
 }