@xopcai/xopc 0.0.277 → 0.0.282

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

@@ -1,4 +1,4 @@
-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';
+import { w as t, M as MAX_BROWSER_CONTEXTS_PER_TURN, b as browserPageContextsInputSchema, k as gatewayFetch, o as openDatabase, R as RealtimeClient, a as activeTabId, g as currentTabDescriptor, T as TAB_BINDING_PREFIX, l as getAccessProfile, t as runWithTabSiteAccess, P as PENDING_CONTEXT_KEY, j as extensionLocale, e as captureTabWithPermission, p as pairGateway, v as setAutoConnectEnabled, r as readPendingBrowserPairing, n as readProfile, h as discoverLocalGateway, u as saveExtensionLocalePreference, s as revokeAndForgetProfile, c as cancelPendingBrowserPairing, m as loadExtensionLocalePreference } from './assets/auth-DB30ywek.js';
 
 true              &&(function polyfill() {
   const relList = document.createElement("link").relList;
@@ -17345,6 +17345,720 @@ function requireClient () {
 
 var clientExports = requireClient();
 
+function MicrophonePermission() {
+  const requesting = reactExports.useRef(false);
+  const [state, setState] = reactExports.useState("idle");
+  async function authorize() {
+    if (requesting.current) return;
+    requesting.current = true;
+    setState("pending");
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.getTracks().forEach((track) => track.stop());
+      setState("granted");
+    } catch {
+      setState("denied");
+    } finally {
+      requesting.current = false;
+    }
+  }
+  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
+  ] });
+}
+
+function appendPageContext(pages, page) {
+  const others = pages.filter((item) => item.tabId !== page.tabId || Boolean(item.context.selection) !== Boolean(page.context.selection));
+  if (others.length >= MAX_BROWSER_CONTEXTS_PER_TURN) throw new Error(t("errorPageLimit", String(MAX_BROWSER_CONTEXTS_PER_TURN)));
+  const next = [...others, page];
+  if (!browserPageContextsInputSchema.safeParse(next.map((item) => item.context)).success) throw new Error(t("errorPageContextSize"));
+  return next;
+}
+
+const LARGE_PASTE_BYTES = 8 * 1024;
+const LARGE_PASTE_LINES = 80;
+const CODE_PASTE_BYTES = 2 * 1024;
+const CODE_PASTE_LINES = 20;
+function detectPasteFormat(text) {
+  const sample = text.trimStart().slice(0, 8 * 1024);
+  if (/^(?:<!doctype\s+html\b|<(?:html|head|body)\b)/i.test(sample)) return "html";
+  if (/^<(?:div|span|section|main|article|script|style)\b/i.test(sample)) return "html";
+  const trimmed = text.trim();
+  if ((trimmed.startsWith("{") && trimmed.endsWith("}") || trimmed.startsWith("[") && trimmed.endsWith("]")) && /[\":,]/.test(sample)) {
+    return "json";
+  }
+  if (/(?:^|\n)\s*(?:(?:import|export|const|let|var|function|class|interface|type|def|SELECT|CREATE)\b|#!\/)/m.test(
+    sample
+  ) || /(?:=>|\{\s*$|;\s*$)/m.test(sample)) {
+    return "code";
+  }
+  return "text";
+}
+function classifyPastedText(text) {
+  const byteLength = new TextEncoder().encode(text).byteLength;
+  const lineCount = text.split(/\r\n|\n|\r/).length;
+  const format = detectPasteFormat(text);
+  const isCode = format !== "text";
+  const shouldAttach = byteLength >= LARGE_PASTE_BYTES || lineCount >= LARGE_PASTE_LINES || isCode && (byteLength >= CODE_PASTE_BYTES || lineCount >= CODE_PASTE_LINES);
+  if (!shouldAttach) return null;
+  const file = format === "html" ? { name: "pasted-text.html", mimeType: "text/html" } : format === "json" ? { name: "pasted-text.json", mimeType: "application/json" } : format === "code" ? { name: "pasted-code.txt", mimeType: "text/plain" } : { name: "pasted-text.txt", mimeType: "text/plain" };
+  return { text, ...file, byteLength, lineCount };
+}
+
+function thinkingLabel(level) {
+  return t(`thinking${level[0].toUpperCase()}${level.slice(1)}`);
+}
+function ModelControls({ models, config, disabled, onModel, onThinking }) {
+  const details = reactExports.useRef(null);
+  const [query, setQuery] = reactExports.useState("");
+  const [saving, setSaving] = reactExports.useState(false);
+  const [error, setError] = reactExports.useState("");
+  const selected = models.find((model) => model.id === config?.model);
+  const filtered = models.filter((model) => `${model.name} ${model.id}`.toLowerCase().includes(query.toLowerCase()));
+  reactExports.useEffect(() => {
+    const close = (event) => {
+      if (details.current && (event instanceof KeyboardEvent && event.key === "Escape" || event instanceof MouseEvent && !details.current.contains(event.target))) details.current.open = false;
+    };
+    document.addEventListener("mousedown", close);
+    document.addEventListener("keydown", close);
+    return () => {
+      document.removeEventListener("mousedown", close);
+      document.removeEventListener("keydown", close);
+    };
+  }, []);
+  async function update(action) {
+    if (saving || disabled) return;
+    setSaving(true);
+    setError("");
+    try {
+      await action();
+    } catch (cause) {
+      setError(String(cause));
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { className: "model-picker", ref: details, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("summary", { "aria-label": t("sessionModel"), children: [
+      selected?.name ?? config?.model ?? t("model"),
+      config?.thinkingLevel ? ` · ${thinkingLabel(config.thinkingLevel)}` : ""
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "model-picker-panel", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("input", { "aria-label": t("searchModels"), placeholder: t("searchModels"), value: query, onChange: (event) => setQuery(event.target.value) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "model-picker-list", children: [
+        filtered.map((model) => /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", disabled: disabled || saving, "aria-pressed": model.id === config?.model, onClick: () => void update(() => onModel(model.id)), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: model.name }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: model.id })
+        ] }, model.id)),
+        !filtered.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: t("noMatchingModels") }) : null
+      ] }),
+      selected?.thinking?.options?.length ? /* @__PURE__ */ jsxRuntimeExports.jsxs("fieldset", { disabled: disabled || saving, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("legend", { children: t("thinkingLevel") }),
+        selected.thinking.options.map((level) => /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", "aria-pressed": config?.thinkingLevel === level, onClick: () => void update(() => onThinking(level)), children: thinkingLabel(level) }, level))
+      ] }) : null,
+      error ? /* @__PURE__ */ jsxRuntimeExports.jsx("p", { role: "alert", children: error }) : null
+    ] })
+  ] });
+}
+
+const pcmCaptureWorkletUrl = ""+new URL('assets/pcm-capture-worklet-CGN9Mlhg.js', import.meta.url).href+"";
+
+const TARGET_SAMPLE_RATE = 16e3;
+function calculateRmsLevel(samples) {
+  if (samples.length === 0) return 0;
+  let sumSquares = 0;
+  for (let i = 0; i < samples.length; i += 1) {
+    sumSquares += samples[i] * samples[i];
+  }
+  return Math.min(1, Math.sqrt(sumSquares / samples.length));
+}
+function mergeChunks(chunks) {
+  const length = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+  const merged = new Float32Array(length);
+  let offset = 0;
+  for (const chunk of chunks) {
+    merged.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return merged;
+}
+function resamplePcm(input, sourceRate, targetRate = TARGET_SAMPLE_RATE) {
+  if (sourceRate === targetRate) return input;
+  const outputLength = Math.max(1, Math.round(input.length * targetRate / sourceRate));
+  const output = new Float32Array(outputLength);
+  const ratio = sourceRate / targetRate;
+  for (let i = 0; i < outputLength; i += 1) {
+    const position = i * ratio;
+    const left = Math.min(input.length - 1, Math.floor(position));
+    const right = Math.min(input.length - 1, left + 1);
+    const fraction = position - left;
+    output[i] = input[left] * (1 - fraction) + input[right] * fraction;
+  }
+  return output;
+}
+function encodePcm16Wav(samples, sampleRate = TARGET_SAMPLE_RATE) {
+  const buffer = new ArrayBuffer(44 + samples.length * 2);
+  const view = new DataView(buffer);
+  const writeText = (offset, value) => {
+    for (let i = 0; i < value.length; i += 1) view.setUint8(offset + i, value.charCodeAt(i));
+  };
+  writeText(0, "RIFF");
+  view.setUint32(4, 36 + samples.length * 2, true);
+  writeText(8, "WAVE");
+  writeText(12, "fmt ");
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, 1, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * 2, true);
+  view.setUint16(32, 2, true);
+  view.setUint16(34, 16, true);
+  writeText(36, "data");
+  view.setUint32(40, samples.length * 2, true);
+  for (let i = 0; i < samples.length; i += 1) {
+    const sample = Math.max(-1, Math.min(1, samples[i]));
+    view.setInt16(44 + i * 2, sample < 0 ? sample * 32768 : sample * 32767, true);
+  }
+  return buffer;
+}
+const WORKLET_NAME = "xopc-pcm-capture";
+const WORKLET_FLUSH_TIMEOUT_MS = 1e3;
+class PcmFrameCapture {
+  constructor(context, source, node, mutedOutput, options) {
+    this.context = context;
+    this.source = source;
+    this.node = node;
+    this.mutedOutput = mutedOutput;
+    this.options = options;
+    this.sampleRate = context.sampleRate;
+    this.node.port.onmessage = (event) => {
+      if (event.data.type === "flushed") {
+        this.flushResolve?.();
+        return;
+      }
+      if (!this.accepting || this.paused) return;
+      const samples = new Float32Array(event.data.buffer);
+      this.options.onSamples(samples);
+      if (this.options.onAudioLevel) {
+        const level = calculateRmsLevel(samples);
+        this.options.onAudioLevel({
+          level,
+          speaking: level >= (this.options.speechThreshold ?? 0.015)
+        });
+      }
+    };
+    this.node.onprocessorerror = () => {
+      this.processorFailed = true;
+      this.flushResolve?.();
+    };
+  }
+  context;
+  source;
+  node;
+  mutedOutput;
+  options;
+  sampleRate;
+  paused = false;
+  accepting = true;
+  processorFailed = false;
+  stopPromise;
+  flushResolve;
+  static async start(stream, options) {
+    if (typeof AudioWorkletNode === "undefined") {
+      throw new Error("PCM audio recording is not supported in this browser");
+    }
+    const context = new AudioContext();
+    try {
+      await context.audioWorklet.addModule(pcmCaptureWorkletUrl);
+      const source = context.createMediaStreamSource(stream);
+      const node = new AudioWorkletNode(context, WORKLET_NAME);
+      const mutedOutput = context.createGain();
+      mutedOutput.gain.value = 0;
+      const capture = new PcmFrameCapture(context, source, node, mutedOutput, options);
+      source.connect(node);
+      node.connect(mutedOutput);
+      mutedOutput.connect(context.destination);
+      await context.resume();
+      return capture;
+    } catch (error) {
+      await context.close().catch(() => void 0);
+      throw error;
+    }
+  }
+  pause() {
+    this.paused = true;
+  }
+  resume() {
+    this.paused = false;
+  }
+  stop() {
+    this.stopPromise ??= this.finish();
+    return this.stopPromise;
+  }
+  cancel() {
+    if (!this.accepting) return;
+    this.accepting = false;
+    this.flushResolve?.();
+    this.flushResolve = void 0;
+    this.disconnect();
+    void this.context.close().catch(() => void 0);
+  }
+  async finish() {
+    if (!this.accepting) return;
+    if (!this.processorFailed) await this.flushWorklet();
+    this.flushResolve = void 0;
+    if (!this.accepting) return;
+    this.accepting = false;
+    this.disconnect();
+    await this.context.close().catch(() => void 0);
+  }
+  flushWorklet() {
+    return new Promise((resolve) => {
+      let settled = false;
+      const complete = () => {
+        if (settled) return;
+        settled = true;
+        globalThis.clearTimeout(timeout);
+        resolve();
+      };
+      const timeout = globalThis.setTimeout(complete, WORKLET_FLUSH_TIMEOUT_MS);
+      this.flushResolve = complete;
+      try {
+        this.node.port.postMessage("flush");
+      } catch {
+        complete();
+      }
+    });
+  }
+  disconnect() {
+    this.node.port.onmessage = null;
+    this.node.onprocessorerror = null;
+    this.source.disconnect();
+    this.node.disconnect();
+    this.mutedOutput.disconnect();
+  }
+}
+class PcmWavRecorder {
+  constructor(capture, chunks) {
+    this.capture = capture;
+    this.chunks = chunks;
+  }
+  capture;
+  chunks;
+  stopped = false;
+  static async start(stream, options = {}) {
+    const chunks = [];
+    const capture = await PcmFrameCapture.start(stream, {
+      ...options,
+      onSamples: (samples) => chunks.push(samples)
+    });
+    return new PcmWavRecorder(capture, chunks);
+  }
+  async stop() {
+    if (this.stopped) return new Blob([], { type: "audio/wav" });
+    this.stopped = true;
+    await this.capture.stop();
+    const merged = mergeChunks(this.chunks);
+    const samples = resamplePcm(merged, this.capture.sampleRate);
+    return new Blob([encodePcm16Wav(samples)], { type: "audio/wav" });
+  }
+  cancel() {
+    if (this.stopped) return;
+    this.stopped = true;
+    this.capture.cancel();
+    this.chunks.length = 0;
+  }
+}
+
+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("");
+  const [needsPermission, setNeedsPermission] = reactExports.useState(false);
+  const [seconds, setSeconds] = reactExports.useState(0);
+  const recorder = reactExports.useRef(void 0);
+  const stream = reactExports.useRef(void 0);
+  const generation = reactExports.useRef(0);
+  const timer = reactExports.useRef(void 0);
+  const controller = reactExports.useRef(void 0);
+  const audio = reactExports.useRef(void 0);
+  const busy = reactExports.useRef(false);
+  const stopTracks = (media = stream.current) => {
+    media?.getTracks().forEach((track) => track.stop());
+    if (stream.current === media) {
+      stream.current = void 0;
+      clearInterval(timer.current);
+    }
+  };
+  function cancel() {
+    generation.current++;
+    controller.current?.abort();
+    recorder.current?.cancel();
+    recorder.current = void 0;
+    stopTracks();
+    busy.current = false;
+    audio.current = void 0;
+    setState("idle");
+    onBusy(false);
+  }
+  reactExports.useEffect(() => () => {
+    generation.current++;
+    controller.current?.abort();
+    recorder.current?.cancel();
+    stopTracks();
+    onBusy(false);
+  }, []);
+  async function transcribe(blob, id) {
+    setState("transcribing");
+    setError("");
+    busy.current = true;
+    onBusy(true);
+    controller.current = new AbortController();
+    try {
+      const form = new FormData();
+      form.append("audio", blob, "recording.wav");
+      const response = await gatewayFetch("/api/voice/transcriptions", {
+        method: "POST",
+        body: form,
+        signal: AbortSignal.any([controller.current.signal, AbortSignal.timeout(12e4)])
+      });
+      const body = await response.json();
+      if (!response.ok) throw new Error(body.error?.message ?? t("errorGatewayStatus", String(response.status)));
+      if (typeof body.payload?.text !== "string" || !body.payload.text.trim()) throw new Error(t("voiceNoSpeech"));
+      if (generation.current === id) {
+        onTranscript(body.payload.text.trim());
+        audio.current = void 0;
+      }
+    } catch (cause) {
+      if (generation.current === id) setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      if (generation.current === id) {
+        busy.current = false;
+        setState("idle");
+        onBusy(false);
+      }
+    }
+  }
+  async function finish(id = generation.current) {
+    if (!recorder.current || generation.current !== id) return;
+    const current = recorder.current;
+    const media = stream.current;
+    recorder.current = void 0;
+    clearInterval(timer.current);
+    setState("transcribing");
+    try {
+      const blob = await current.stop();
+      stopTracks(media);
+      if (generation.current !== id) return;
+      audio.current = blob;
+      await transcribe(blob, id);
+    } catch (cause) {
+      if (generation.current === id) stopTracks();
+      if (generation.current === id) {
+        busy.current = false;
+        setState("idle");
+        onBusy(false);
+        setError(String(cause));
+      }
+    }
+  }
+  async function start() {
+    if (disabled || busy.current) return;
+    busy.current = true;
+    onBusy(true);
+    setState("starting");
+    setError("");
+    setNeedsPermission(false);
+    audio.current = void 0;
+    const id = ++generation.current;
+    try {
+      const statusResponse = await gatewayFetch("/api/status");
+      if (!statusResponse.ok) throw new Error(t("errorGatewayStatus", String(statusResponse.status)));
+      const status = await statusResponse.json();
+      if (!status.voice?.sttAvailable) throw new Error(t("voiceUnavailable"));
+      if (generation.current !== id) return;
+      const media = await navigator.mediaDevices.getUserMedia({ audio: true });
+      if (generation.current !== id) {
+        media.getTracks().forEach((track) => track.stop());
+        return;
+      }
+      stream.current = media;
+      const next = await PcmWavRecorder.start(media);
+      if (generation.current !== id) {
+        next.cancel();
+        media.getTracks().forEach((track) => track.stop());
+        return;
+      }
+      recorder.current = next;
+      setSeconds(0);
+      setState("recording");
+      const started = Date.now();
+      timer.current = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - started) / 1e3);
+        setSeconds(elapsed);
+        if (elapsed >= 120) void finish(id);
+      }, 1e3);
+    } catch (cause) {
+      if (generation.current === id) stopTracks();
+      if (generation.current === id) {
+        const denied = (cause instanceof DOMException || cause instanceof Error) && cause.name === "NotAllowedError";
+        busy.current = false;
+        setState("idle");
+        onBusy(false);
+        setNeedsPermission(denied);
+        setError(denied ? t("voicePermissionHelp") : cause instanceof Error ? cause.message : String(cause));
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "voice-input", children: [
+    state === "idle" ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "composer-icon-button", disabled, title: t("voiceInput"), "aria-label": t("voiceInput"), onClick: () => void start(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(MicrophoneIcon, {}) }) : null,
+    state !== "idle" || error ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "voice-input-panel", role: "status", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: error || (state === "recording" ? `${t("voiceRecording")} ${seconds}s` : state === "starting" ? t("voiceStarting") : t("voiceTranscribing")) }),
+      needsPermission ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => {
+        void chrome.tabs.create({ url: chrome.runtime.getURL("dist/sidepanel.html?microphone-permission") }).catch((cause) => setError(String(cause)));
+      }, children: t("voicePermissionOpen") }) : null,
+      state === "recording" ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => void finish(), children: t("voiceFinish") }) : null,
+      state === "idle" && audio.current ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled, onClick: () => void transcribe(audio.current, ++generation.current), children: t("voiceRetry") }) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => {
+        cancel();
+        setError("");
+      }, children: t("cancelQueuedMessage") })
+    ] }) : null
+  ] });
+}
+
+function QueuedInput({ input, onSave, onCancel }) {
+  const [edit, setEdit] = reactExports.useState();
+  const [busy, setBusy] = reactExports.useState(false);
+  const [error, setError] = reactExports.useState("");
+  async function run(action) {
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      await action();
+      setEdit(void 0);
+    } catch (cause) {
+      setError(String(cause));
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "queued-input", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-notice", children: [
+      edit ? /* @__PURE__ */ jsxRuntimeExports.jsx("input", { "aria-label": t("editQueuedMessage"), value: edit.content, disabled: busy, onChange: (event) => setEdit({ ...edit, content: event.target.value }), onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          if (!event.nativeEvent.isComposing && edit.content.trim()) void run(() => onSave(edit.content, edit.version));
+        }
+      } }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+        t("queued"),
+        " · ",
+        input.content || t("attachment")
+      ] }),
+      edit ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: busy || !edit.content.trim(), onClick: () => void run(() => onSave(edit.content, edit.version)), children: t("saveQueuedMessage") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: busy, onClick: () => setEdit(void 0), children: t("cancelQueuedMessage") })
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: busy, onClick: () => setEdit({ content: input.content, version: input.version }), children: t("editQueuedMessage") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: busy, onClick: () => void run(onCancel), children: t("cancelQueuedMessage") })
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "composer-error", role: "alert", children: error }) : null
+  ] });
+}
+
+function findCommand(value, cursor) {
+  const match = /(?:^|\s)\/([\w.-]*)$/.exec(value.slice(0, cursor));
+  return match ? { start: cursor - match[1].length - 1, end: cursor, query: match[1] } : void 0;
+}
+async function loadComposerCommands(sessionKey) {
+  const params = new URLSearchParams(sessionKey ? { sessionKey } : {});
+  const responses = await Promise.all([
+    gatewayFetch("/api/commands"),
+    gatewayFetch(`/api/chat/skills?${params}`)
+  ]);
+  for (const response of responses) if (!response.ok) throw new Error(t("errorGatewayStatus", String(response.status)));
+  const [commands, skills] = await Promise.all(responses.map((response) => response.json()));
+  return [
+    ...(commands.payload?.commands ?? []).map((command) => ({
+      id: `command:${command.name}`,
+      name: `/${command.name}`,
+      description: command.description,
+      wire: `/${command.name} `
+    })),
+    ...(skills.payload?.skills ?? []).map((skill) => ({
+      id: `skill:${skill.name}`,
+      name: skill.name,
+      description: skill.description,
+      wire: `/skill:${skill.name} `,
+      disabled: !skill.availableForCurrentAgent
+    }))
+  ];
+}
+
+function ComposerPreviewDialog({ preview, onClose }) {
+  const dialog = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    dialog.current?.showModal();
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("dialog", { ref: dialog, className: "composer-preview", "aria-label": preview.title, onClose, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: preview.title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => dialog.current?.close(), children: t("closePreview") })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "composer-preview-body", children: preview.image ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: preview.image, alt: preview.title }) : /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { children: preview.text }) })
+  ] });
+}
+
+const OUTBOX_STORE = "outbox";
+function transactionResult(database, mode, createRequest) {
+  return new Promise((resolve, reject) => {
+    const transaction = database.transaction(OUTBOX_STORE, mode);
+    const request = createRequest(transaction.objectStore(OUTBOX_STORE));
+    let result;
+    request.onsuccess = () => {
+      result = request.result;
+    };
+    request.onerror = () => reject(request.error ?? new Error(t("errorOutboxRequest")));
+    transaction.oncomplete = () => resolve(result);
+    transaction.onerror = () => reject(transaction.error ?? new Error(t("errorOutboxTransaction")));
+    transaction.onabort = () => reject(transaction.error ?? new Error(t("errorOutboxAborted")));
+  });
+}
+async function readBrowserOutbox(sessionKey) {
+  const database = await openDatabase();
+  try {
+    return await transactionResult(
+      database,
+      "readonly",
+      (store) => store.get(sessionKey)
+    );
+  } finally {
+    database.close();
+  }
+}
+async function writeBrowserOutbox(sessionKey, value) {
+  const database = await openDatabase();
+  try {
+    await transactionResult(database, "readwrite", (store) => store.put(value, sessionKey));
+  } finally {
+    database.close();
+  }
+}
+async function deleteBrowserOutbox(sessionKey) {
+  const database = await openDatabase();
+  try {
+    await transactionResult(database, "readwrite", (store) => store.delete(sessionKey));
+  } finally {
+    database.close();
+  }
+}
+
 const CLIENT_ID_KEY = "xopc.browser.client-id";
 const ACTIVE_CHAT_KEY = "xopc.browser.active-chat";
 const CURSOR_PREFIX = "xopc.browser.cursor.";
@@ -17457,8 +18171,10 @@ class BrowserChatClient {
   turnClaim;
   runTopic;
   recoveringOutbox = false;
+  sendingInput = false;
   lastOutboxRecoveryAt = 0;
   sessionsRequest = 0;
+  inputsRequest = 0;
   endpointBinding;
   endpointBindingTask;
   endpointPoll;
@@ -17659,6 +18375,7 @@ ${endpointId}`;
       stopping: false,
       sessionLoading: true,
       pendingDelivery: false,
+      queuedInputs: [],
       clarification: void 0,
       tabBinding: void 0,
       browserApproval: void 0,
@@ -17699,7 +18416,19 @@ ${endpointId}`;
       }
     }
   }
+  get currentSessionKey() {
+    return this.snapshot.sessionKey;
+  }
   async send(content, browserContexts = [], attachments = []) {
+    if (this.sendingInput) throw new Error(t("errorWaitQueuedMessage"));
+    this.sendingInput = true;
+    try {
+      return await this.sendInput(content, browserContexts, attachments);
+    } finally {
+      this.sendingInput = false;
+    }
+  }
+  async sendInput(content, browserContexts = [], attachments = []) {
     const text = content.trim();
     if (!text && attachments.length === 0) return "sent";
     if (!this.snapshot.sessionKey) throw new Error(t("errorOpenChatBeforeSending"));
@@ -17707,14 +18436,16 @@ ${endpointId}`;
       throw new Error(t("errorWaitQueuedMessage"));
     }
     if (!this.turnClaim) throw new Error(t("errorEndpointNotReady"));
-    await this.bindSessionEndpoint();
     const sessionKey = this.snapshot.sessionKey;
+    await this.bindSessionEndpoint();
+    if (this.snapshot.sessionKey !== sessionKey) throw new Error(t("errorChatChanged"));
     const clientMessageId = crypto.randomUUID();
     const request = {
       content: text,
       clientMessageId,
       delivery: "next",
       expectedSessionId: this.snapshot.sessionId,
+      ...this.snapshot.modelConfig?.fixedModel ? { configVersion: this.snapshot.modelConfig.configVersion } : {},
       origin: { type: "endpoint", endpointId: this.turnClaim.endpointId, token: this.turnClaim.token },
       ...browserContexts.length ? { browserContexts } : {},
       ...attachments.length ? { attachments } : {}
@@ -17727,7 +18458,7 @@ ${endpointId}`;
       await writeBrowserOutbox(sessionKey, request);
       outboxStored = true;
       this.update({
-        messages: [...this.snapshot.messages, {
+        messages: this.snapshot.runId ? this.snapshot.messages : [...this.snapshot.messages, {
           id: clientMessageId,
           role: "user",
           text,
@@ -17740,7 +18471,7 @@ ${endpointId}`;
             }))
           } : {}
         }],
-        streamingText: "",
+        ...this.snapshot.runId ? {} : { streamingText: "" },
         error: void 0
       });
       const response = await json(
@@ -17832,6 +18563,49 @@ ${endpointId}`;
       this.recoveringOutbox = false;
     }
   }
+  async refreshInputs() {
+    const requestId = ++this.inputsRequest;
+    const sessionKey = this.snapshot.sessionKey;
+    if (!sessionKey) return;
+    const result = await json(
+      await gatewayFetch(`/api/sessions/${encodeURIComponent(sessionKey)}/input-state`)
+    );
+    if (this.snapshot.sessionKey !== sessionKey || requestId !== this.inputsRequest) return;
+    this.update({ queuedInputs: (result.payload.inputs ?? []).filter((input) => input.status === "queued") });
+    if (result.payload.activeRunId !== this.snapshot.runId) {
+      await this.reloadMessages();
+      if (this.snapshot.sessionKey !== sessionKey || requestId !== this.inputsRequest) return;
+      if (result.payload.activeRunId) await this.followRun(result.payload.activeRunId);
+      else {
+        if (this.runTopic) this.realtime?.unsubscribe(this.runTopic);
+        this.runTopic = void 0;
+        this.update({ runId: void 0, streamingText: "", stopping: false });
+      }
+    }
+  }
+  async editInput(id, version, content) {
+    const key = this.snapshot.sessionKey;
+    if (!key) return;
+    try {
+      await json(await gatewayFetch(`/api/sessions/${encodeURIComponent(key)}/inputs/${encodeURIComponent(id)}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ version, content })
+      }));
+    } finally {
+      if (this.snapshot.sessionKey === key) await this.refreshInputs();
+    }
+  }
+  async cancelInput(id, version) {
+    const key = this.snapshot.sessionKey;
+    if (!key) return;
+    try {
+      await json(await gatewayFetch(`/api/sessions/${encodeURIComponent(key)}/inputs/${encodeURIComponent(id)}?version=${version}`, { method: "DELETE" }));
+      if (this.snapshot.sessionKey === key) await this.reloadMessages();
+    } finally {
+      if (this.snapshot.sessionKey === key) await this.refreshInputs();
+    }
+  }
   async abort() {
     const runId = this.snapshot.runId;
     if (!runId || this.snapshot.stopping) return;
@@ -17931,12 +18705,16 @@ ${endpointId}`;
     return void 0;
   }
   async followRun(runId) {
+    const topic = `run:${runId}`;
+    if (this.runTopic === topic) return;
+    const sessionKey = this.snapshot.sessionKey;
     if (this.runTopic) this.realtime?.unsubscribe(this.runTopic);
-    this.runTopic = `run:${runId}`;
+    this.runTopic = topic;
     const stored = await chrome.storage.session.get(`${CURSOR_PREFIX}${runId}`);
+    if (this.snapshot.sessionKey !== sessionKey || this.runTopic !== topic) return;
     const cursor = typeof stored[`${CURSOR_PREFIX}${runId}`] === "number" ? stored[`${CURSOR_PREFIX}${runId}`] : void 0;
-    this.realtime?.subscribe(this.runTopic, cursor);
-    this.update({ runId });
+    this.update({ runId, streamingText: "" });
+    this.realtime?.subscribe(topic, cursor);
   }
   async onRealtimeEvent(topic, seq, event, data) {
     if (topic === "gateway") {
@@ -18124,8 +18902,8 @@ ${endpointId}`;
   }
 }
 
-const MAX_BROWSER_ATTACHMENT_BYTES = 6 * 1024 * 1024;
-const MAX_BROWSER_ATTACHMENTS = 5;
+const MAX_BROWSER_ATTACHMENT_BYTES = 32 * 1024 * 1024;
+const MAX_BROWSER_ATTACHMENTS = 10;
 const SUPPORTED_DOCUMENT_MIME_TYPES = /* @__PURE__ */ new Set([
   "application/json",
   "application/pdf",
@@ -18134,7 +18912,30 @@ const SUPPORTED_DOCUMENT_MIME_TYPES = /* @__PURE__ */ new Set([
   "text/markdown",
   "text/plain"
 ]);
-const SUPPORTED_DOCUMENT_EXTENSIONS = [".csv", ".json", ".md", ".pdf", ".txt"];
+const DOCUMENT_MIMES = {
+  pdf: "application/pdf",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  csv: "text/csv",
+  tsv: "text/tab-separated-values",
+  json: "application/json",
+  md: "text/markdown",
+  txt: "text/plain",
+  html: "text/html",
+  xml: "text/xml",
+  css: "text/css",
+  js: "text/javascript",
+  ts: "text/plain",
+  jsx: "text/plain",
+  tsx: "text/plain",
+  yaml: "text/plain",
+  yml: "text/plain",
+  py: "text/plain",
+  sh: "text/plain",
+  sql: "text/plain"
+};
+const BROWSER_ATTACHMENT_ACCEPT = `image/*,${Object.keys(DOCUMENT_MIMES).map((extension) => `.${extension}`).join(",")}`;
 function encodeBase64(bytes) {
   const chunkSize = 32 * 1024;
   let binary = "";
@@ -18151,13 +18952,13 @@ function assertSize(size) {
 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;
+  if (mimeType.startsWith("image/") || SUPPORTED_DOCUMENT_MIME_TYPES.has(mimeType) || Object.keys(DOCUMENT_MIMES).some((extension) => name.endsWith(`.${extension}`))) return;
   throw new Error(t("errorUnsupportedAttachment"));
 }
 async function fileToBrowserAttachment(file) {
   assertSupportedFile(file);
   assertSize(file.size);
-  const mimeType = file.type || "application/octet-stream";
+  const mimeType = file.type || DOCUMENT_MIMES[file.name.split(".").pop()?.toLowerCase() ?? ""] || "application/octet-stream";
   return {
     type: mimeType.startsWith("image/") ? "image" : "file",
     mimeType,
@@ -18167,11 +18968,16 @@ 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(t("errorNoActivePage"));
+  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"));
+  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(t("errorActiveTabChanged"));
+    if (currentTab?.id !== accessibleTab.id) throw new Error(t("errorActiveTabChanged"));
     return chrome.tabs.captureVisibleTab(accessibleTab.windowId, { format: "png" });
   });
   const separator = dataUrl.indexOf(",");
@@ -18221,101 +19027,107 @@ async function listMentionableTabs(query) {
   return filterMentionableTabs(mentionable, query);
 }
 
-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" })
-  ] });
+const EMPTY_DRAFT = { text: "", attachments: [], pages: [] };
+async function readDraft(key) {
+  const db = await openDatabase();
+  try {
+    return await new Promise((resolve, reject) => {
+      const request = db.transaction("drafts").objectStore("drafts").get(key);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  } finally {
+    db.close();
+  }
 }
-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" })
-  ] });
+async function writeDraft(key, draft) {
+  const db = await openDatabase();
+  try {
+    await new Promise((resolve, reject) => {
+      const tx = db.transaction("drafts", "readwrite");
+      const store = tx.objectStore("drafts");
+      if (!draft.text && !draft.attachments.length && !draft.pages.length) store.delete(key);
+      else store.put(draft, key);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+      tx.onabort = () => reject(tx.error);
+    });
+  } finally {
+    db.close();
+  }
 }
-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" })
-  ] });
+class ComposerDrafts {
+  constructor(onError, save = writeDraft, read = readDraft) {
+    this.onError = onError;
+    this.save = save;
+    this.read = read;
+  }
+  onError;
+  save;
+  read;
+  records = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  pendingWrites = /* @__PURE__ */ new Map();
+  writing = false;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  peek = (key) => this.records.get(key);
+  get = (key) => this.records.get(key) ?? EMPTY_DRAFT;
+  async load(key) {
+    if (this.records.has(key)) return;
+    let draft;
+    try {
+      draft = await this.read(key);
+    } catch (cause) {
+      this.onError(cause);
+    }
+    if (this.records.has(key)) return;
+    this.records.set(key, draft ? { ...draft, pages: draft.pages.map((page) => ({ ...page, stale: true })) } : EMPTY_DRAFT);
+    this.listeners.forEach((listener) => listener());
+  }
+  update(key, update) {
+    const draft = update(this.get(key));
+    this.records.set(key, draft);
+    this.listeners.forEach((listener) => listener());
+    this.pendingWrites.set(key, draft);
+    void this.flush();
+  }
+  async flush() {
+    if (this.writing) return;
+    this.writing = true;
+    try {
+      while (this.pendingWrites.size) {
+        const [key, draft] = this.pendingWrites.entries().next().value;
+        this.pendingWrites.delete(key);
+        try {
+          await this.save(key, draft);
+        } catch (cause) {
+          this.onError(cause);
+        }
+      }
+    } finally {
+      this.writing = false;
+    }
+  }
+  invalidate(tabId) {
+    for (const [key, draft] of this.records) {
+      if (draft.pages.some((page) => page.tabId === tabId && !page.stale)) {
+        this.update(key, (current) => ({ ...current, pages: current.pages.map((page) => page.tabId === tabId ? { ...page, stale: true } : page) }));
+      }
+    }
+  }
 }
-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 useComposerDrafts(key, onError) {
+  const store = reactExports.useMemo(() => new ComposerDrafts(onError), []);
+  const draft = reactExports.useSyncExternalStore(store.subscribe, () => store.peek(key));
+  reactExports.useEffect(() => {
+    void store.load(key).catch(onError);
+  }, [store, key]);
+  return { store, draft: draft ?? EMPTY_DRAFT, ready: draft !== void 0, update: (update) => store.update(key, update) };
 }
 
 /* eslint-disable no-bitwise */
@@ -26842,30 +27654,41 @@ const RISK_MESSAGE_KEYS = {
   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 "";
   if (size < 1024) return `${size} B`;
   if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`;
   return `${(size / (1024 * 1024)).toFixed(1)} MB`;
 }
-function ChatPanel() {
+function ChatPanel({ gatewayId }) {
   const client = reactExports.useMemo(() => new BrowserChatClient(), []);
   const [snapshot, setSnapshot] = reactExports.useState(EMPTY);
-  const [draft, setDraft] = reactExports.useState("");
+  const keyForSession = (sessionKey) => JSON.stringify([gatewayId, sessionKey ?? "new"]);
+  const draftKey = keyForSession(snapshot.sessionKey);
+  const { store: drafts, draft: composerDraft, ready: draftReady, update: updateDraft } = useComposerDrafts(draftKey, (cause) => setError(String(cause)));
+  const draft = composerDraft.text;
+  const attachments = composerDraft.attachments;
+  const pageContexts = composerDraft.pages;
+  const [preview, setPreview] = reactExports.useState();
+  const setDraft = (text) => updateDraft((current) => ({ ...current, text }));
+  const setAttachments = (value) => updateDraft((current) => ({ ...current, attachments: typeof value === "function" ? value(current.attachments) : value }));
+  function addPageContext(page) {
+    updateDraft((current) => ({ ...current, pages: appendPageContext(current.pages, page) }));
+  }
+  const submittingRef = reactExports.useRef(false);
+  const composing = reactExports.useRef(false);
+  const historyWalk = reactExports.useRef(void 0);
+  const [sending, setSending] = reactExports.useState(false);
+  const [processing, setProcessing] = reactExports.useState(false);
+  const [voiceBusy, setVoiceBusy] = reactExports.useState(false);
+  const [cursor, setCursor] = reactExports.useState(0);
+  const [commandsOpen, setCommandsOpen] = reactExports.useState(false);
+  const [commands, setCommands] = reactExports.useState([]);
+  const [commandsLoading, setCommandsLoading] = reactExports.useState(false);
+  const [commandIndex, setCommandIndex] = reactExports.useState(0);
+  const commandRange = commandsOpen ? findCommand(draft, cursor) : void 0;
+  const commandItems = commandRange ? commands.filter((item) => `${item.name} ${item.description}`.toLowerCase().includes(commandRange.query.toLowerCase())).slice(0, 12) : [];
+  const canSend = draftReady && !sending && !processing && !voiceBusy && !snapshot.submitting && !snapshot.pendingDelivery && !snapshot.sessionLoading && !snapshot.stopping && snapshot.endpointReady;
   const [search, setSearch] = reactExports.useState("");
   const [menuOpen, setMenuOpen] = reactExports.useState(false);
   const [toolsOpen, setToolsOpen] = reactExports.useState(false);
@@ -26873,8 +27696,6 @@ function ChatPanel() {
   const [copiedMessageId, setCopiedMessageId] = reactExports.useState("");
   const [clarificationAnswer, setClarificationAnswer] = reactExports.useState("");
   const [clarificationSubmitting, setClarificationSubmitting] = reactExports.useState(false);
-  const [pageContext, setPageContext] = reactExports.useState();
-  const [attachments, setAttachments] = reactExports.useState([]);
   const [tabMention, setTabMention] = reactExports.useState();
   const [mentionTabs, setMentionTabs] = reactExports.useState([]);
   const [mentionIndex, setMentionIndex] = reactExports.useState(0);
@@ -26908,26 +27729,35 @@ function ChatPanel() {
     setAtBottom(isAtBottom);
   }, []);
   reactExports.useEffect(() => {
+    let active = true;
     const unsubscribe = client.subscribe(setSnapshot);
-    void client.start().catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
+    void client.start().then(async () => {
+      if (!active) return;
+      const stored = await chrome.storage.session.get(PENDING_CONTEXT_KEY);
+      const pending = stored[PENDING_CONTEXT_KEY];
+      if (!pending || !active) return;
+      const key = keyForSession(client.currentSessionKey);
+      await drafts.load(key);
+      if (!active) return;
+      drafts.update(key, (current) => ({ ...current, pages: appendPageContext(current.pages, pending) }));
+      await chrome.storage.session.remove(PENDING_CONTEXT_KEY);
+    }).catch((cause) => {
+      if (active) setError(cause instanceof Error ? cause.message : String(cause));
+    });
     return () => {
+      active = false;
       unsubscribe();
       client.stop();
     };
   }, [client]);
   reactExports.useEffect(() => {
-    void chrome.storage.session.get(PENDING_CONTEXT_KEY).then(async (stored) => {
-      const pending = stored[PENDING_CONTEXT_KEY];
-      if (pending?.context.kind === "browser_page") setPageContext(pending);
-      await chrome.storage.session.remove(PENDING_CONTEXT_KEY);
-    });
     const onUpdated = (tabId, change) => {
       if (change.url || change.status === "loading") {
-        setPageContext((current) => current?.tabId === tabId ? { ...current, stale: true } : current);
+        drafts.invalidate(tabId);
       }
     };
     const onRemoved = (tabId) => {
-      setPageContext((current) => current?.tabId === tabId ? { ...current, stale: true } : current);
+      drafts.invalidate(tabId);
     };
     chrome.tabs.onUpdated.addListener(onUpdated);
     chrome.tabs.onRemoved.addListener(onRemoved);
@@ -26992,53 +27822,148 @@ function ChatPanel() {
       document.removeEventListener("keydown", closeOnEscape);
     };
   }, []);
-  async function submit(event) {
+  reactExports.useEffect(() => {
+    historyWalk.current = void 0;
+    mentionRequest.current += 1;
+    setTabMention(void 0);
+    setMentionTabs([]);
+    setCommandsOpen(false);
+    setPreview(void 0);
+    setError("");
+    if (!snapshot.sessionKey) return;
+    let active = true;
+    const refresh = () => {
+      if (active) void client.refreshInputs().catch((cause) => {
+        if (active) setError(String(cause));
+      });
+    };
+    refresh();
+    const timer = setInterval(refresh, 2e3);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [client, snapshot.sessionKey]);
+  reactExports.useEffect(() => {
+    if (!commandsOpen) return;
+    let active = true;
+    setCommandsLoading(true);
+    void loadComposerCommands(snapshot.sessionKey).then((items) => {
+      if (active) setCommands(items);
+    }).catch((cause) => {
+      if (active) {
+        setCommands([]);
+        setError(String(cause));
+      }
+    }).finally(() => {
+      if (active) setCommandsLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [commandsOpen, snapshot.sessionKey]);
+  function chooseCommand(item) {
+    if (!commandRange || item.disabled) return;
+    const text = `${draft.slice(0, commandRange.start)}${item.wire}${draft.slice(commandRange.end)}`;
+    setDraft(text);
+    setCommandsOpen(false);
+    const nextCursor = commandRange.start + item.wire.length;
+    requestAnimationFrame(() => {
+      textarea.current?.focus();
+      textarea.current?.setSelectionRange(nextCursor, nextCursor);
+    });
+  }
+  async function submit(event, interrupt = false) {
     event.preventDefault();
-    if (!draft.trim() && attachments.length === 0) return;
-    const sending = draft;
-    const sendingAttachments = attachments;
-    setDraft("");
-    setAttachments([]);
+    if (!canSend || submittingRef.current || composing.current || tabMention || commandRange || attachmentTask.current) return;
+    const payload = drafts.get(draftKey);
+    if (!payload.text.trim() && !payload.attachments.length) return;
+    if (payload.pages.some((page) => page.stale)) {
+      setError(t("errorAttachedPageChanged"));
+      return;
+    }
+    submittingRef.current = true;
+    setSending(true);
     setError("");
     followingTail.current = true;
     setAtBottom(true);
+    let targetKey = draftKey;
     try {
-      if (!snapshot.sessionKey) await client.createSession();
-      if (pageContext?.stale) throw new Error(t("errorAttachedPageChanged"));
-      await client.send(sending, pageContext ? [pageContext.context] : [], sendingAttachments);
-      setPageContext(void 0);
+      if (!snapshot.sessionKey) {
+        await client.createSession();
+        targetKey = keyForSession(client.currentSessionKey);
+        drafts.update(targetKey, () => payload);
+        drafts.update(draftKey, () => EMPTY_DRAFT);
+      }
+      if (interrupt && snapshot.runId) await client.abort();
+      await client.send(payload.text, payload.pages.map((page) => page.context), payload.attachments);
+      historyWalk.current = void 0;
+      drafts.update(targetKey, (current) => ({
+        text: current.text === payload.text ? "" : current.text,
+        attachments: current.attachments.filter((item) => !payload.attachments.includes(item)),
+        pages: current.pages.filter((page) => !payload.pages.some((sent) => sent.context.sourceId === page.context.sourceId))
+      }));
     } catch (cause) {
-      setDraft(sending);
-      setAttachments(sendingAttachments);
       setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      submittingRef.current = false;
+      setSending(false);
     }
   }
-  async function addFiles(files) {
-    const incoming = Array.from(files ?? []);
-    if (!incoming.length || attachmentTask.current) return;
+  async function updateModelConfig(action) {
+    if (submittingRef.current) return;
+    submittingRef.current = true;
+    setSending(true);
+    try {
+      await action();
+    } catch (cause) {
+      setError(String(cause));
+      throw cause;
+    } finally {
+      submittingRef.current = false;
+      setSending(false);
+    }
+  }
+  async function processAttachmentTask(operation) {
+    if (attachmentTask.current || submittingRef.current || !draftReady || snapshot.sessionLoading) return;
     attachmentTask.current = true;
+    setProcessing(true);
     setError("");
     try {
-      const remaining = MAX_BROWSER_ATTACHMENTS - attachments.length;
-      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]);
+      await operation();
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
     } finally {
       attachmentTask.current = false;
-      if (fileInput.current) fileInput.current.value = "";
+      setProcessing(false);
     }
   }
+  async function addFiles(files) {
+    const incoming = Array.from(files ?? []);
+    if (!incoming.length) return;
+    await processAttachmentTask(async () => {
+      const remaining = MAX_BROWSER_ATTACHMENTS - drafts.get(draftKey).attachments.length;
+      const failures = [];
+      if (incoming.length > remaining) failures.push(t("errorAttachmentLimit", String(MAX_BROWSER_ATTACHMENTS)));
+      const added = [];
+      for (const file of incoming.slice(0, remaining)) {
+        try {
+          added.push(await fileToBrowserAttachment(file));
+        } catch (cause) {
+          failures.push(`${file.name}: ${cause instanceof Error ? cause.message : String(cause)}`);
+        }
+      }
+      setAttachments((current) => [...current, ...added]);
+      if (fileInput.current) fileInput.current.value = "";
+      if (failures.length) setError(failures.join("\n"));
+    });
+  }
   async function addScreenshot() {
-    setError("");
-    try {
-      if (attachments.length >= MAX_BROWSER_ATTACHMENTS) throw new Error(t("errorAttachmentLimit", String(MAX_BROWSER_ATTACHMENTS)));
+    await processAttachmentTask(async () => {
+      if (drafts.get(draftKey).attachments.length >= MAX_BROWSER_ATTACHMENTS) throw new Error(t("errorAttachmentLimit", String(MAX_BROWSER_ATTACHMENTS)));
       const screenshot = await captureVisibleScreenshot();
       setAttachments((current) => [...current, screenshot]);
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : String(cause));
-    }
+    });
   }
   async function runControlAction(action) {
     setError("");
@@ -27048,14 +27973,15 @@ function ChatPanel() {
       setError(cause instanceof Error ? cause.message : String(cause));
     }
   }
-  const selectedModel = snapshot.models.find((model) => model.id === snapshot.modelConfig?.model);
-  const thinkingOptions = selectedModel?.thinking?.options ?? [];
   async function attachPage(mode) {
+    if (attachmentTask.current || submittingRef.current || !draftReady) return false;
+    attachmentTask.current = true;
+    setProcessing(true);
     setError("");
     try {
       const tabId = await activeTabId();
       if (tabId === void 0) throw new Error(t("errorNoActivePage"));
-      setPageContext({
+      addPageContext({
         context: await captureTabWithPermission(tabId, mode),
         tabId,
         source: mode === "selection" ? "current_selection" : "current_page"
@@ -27064,6 +27990,9 @@ function ChatPanel() {
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
       return false;
+    } finally {
+      attachmentTask.current = false;
+      setProcessing(false);
     }
   }
   async function startQuickPrompt(prompt, mode) {
@@ -27081,8 +28010,10 @@ function ChatPanel() {
       setError(cause instanceof Error ? cause.message : String(cause));
     }
   }
-  async function refreshPageContext() {
-    if (!pageContext) return;
+  async function refreshPageContext(pageContext) {
+    if (attachmentTask.current || submittingRef.current) return;
+    attachmentTask.current = true;
+    setProcessing(true);
     setError("");
     try {
       const mode = pageContext.context.selection ? "selection" : "page";
@@ -27090,14 +28021,20 @@ function ChatPanel() {
         pageContext.tabId,
         mode
       );
-      setPageContext({ ...pageContext, context, stale: false });
+      addPageContext({ ...pageContext, context, stale: false });
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      attachmentTask.current = false;
+      setProcessing(false);
     }
   }
-  async function updateTabMention(value, cursor) {
+  async function updateTabMention(value, cursor2) {
+    setCursor(cursor2);
+    setCommandsOpen(Boolean(findCommand(value, cursor2)));
+    setCommandIndex(0);
     const requestId = ++mentionRequest.current;
-    const mention = findTabMention(value, cursor);
+    const mention = findTabMention(value, cursor2);
     setTabMention(mention);
     setMentionIndex(0);
     if (!mention) {
@@ -27117,7 +28054,9 @@ function ChatPanel() {
   }
   async function chooseMentionedTab(tab) {
     const mention = tabMention;
-    if (!mention) return;
+    if (!mention || attachmentTask.current || submittingRef.current) return;
+    attachmentTask.current = true;
+    setProcessing(true);
     mentionRequest.current += 1;
     setTabMention(void 0);
     setMentionTabs([]);
@@ -27125,7 +28064,7 @@ function ChatPanel() {
     try {
       const context = await captureTabWithPermission(tab.id, "page");
       const nextDraft = removeTabMention(draft, mention);
-      setPageContext({ context, tabId: tab.id, source: "tab_mention" });
+      addPageContext({ context, tabId: tab.id, source: "tab_mention" });
       setDraft(nextDraft);
       requestAnimationFrame(() => {
         textarea.current?.focus();
@@ -27133,6 +28072,9 @@ function ChatPanel() {
       });
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      attachmentTask.current = false;
+      setProcessing(false);
     }
   }
   async function runSearch(value) {
@@ -27155,6 +28097,7 @@ function ChatPanel() {
   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: [
+    preview ? /* @__PURE__ */ jsxRuntimeExports.jsx(ComposerPreviewDialog, { preview, onClose: () => setPreview(void 0) }) : null,
     /* @__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: [
@@ -27166,7 +28109,7 @@ function ChatPanel() {
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDownIcon, { className: "icon-sm" })
       ] }),
-      /* @__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, {}) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "icon-button", type: "button", "aria-label": t("startNewChat"), title: t("newChat"), disabled: sending || snapshot.submitting || snapshot.sessionLoading, 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: [
@@ -27178,7 +28121,7 @@ function ChatPanel() {
         /* @__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: () => {
+        snapshot.sessions.map((session) => /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { disabled: sending || snapshot.submitting || snapshot.sessionLoading, className: session.key === snapshot.sessionKey ? "active" : "", onClick: () => {
           setMenuOpen(false);
           void runControlAction(() => client.openSession(session.key));
         }, children: [
@@ -27264,6 +28207,9 @@ function ChatPanel() {
       {
         className: `composer${draggingFiles ? " dragging" : ""}`,
         onSubmit: submit,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" && event.target instanceof HTMLInputElement) event.preventDefault();
+        },
         onDragEnter: (event) => {
           if (event.dataTransfer.types.includes("Files")) setDraggingFiles(true);
         },
@@ -27334,13 +28280,15 @@ function ChatPanel() {
               /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: clarificationSubmitting, onClick: () => void respondToClarification("cancel"), children: t("cancelTask") })
             ] })
           ] }) : null,
+          processing ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "composer-notice", role: "status", children: t("processingAttachments") }) : null,
+          snapshot.queuedInputs?.map((input) => /* @__PURE__ */ jsxRuntimeExports.jsx(QueuedInput, { input, onSave: (content, version) => client.editInput(input.id, version, content), onCancel: () => client.cancelInput(input.id, input.version) }, `${snapshot.sessionKey}:${input.id}`)),
           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
           ] }) : null,
-          pageContext || attachments.length ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-contexts", children: [
-            pageContext ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `context-chip${pageContext.stale ? " stale" : ""}`, children: [
+          pageContexts.length || attachments.length ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "composer-contexts", children: [
+            pageContexts.map((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" ? t("tab") : pageContext.context.selection ? t("selection") : t("page") }),
@@ -27349,15 +28297,21 @@ function ChatPanel() {
                 " · ",
                 pageContext.context.title
               ] }),
-              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,
+              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => setPreview({ title: pageContext.context.title, text: `${pageContext.context.url}
+
+${pageContext.context.selection ?? pageContext.context.text ?? ""}` }), children: t("preview") }),
+              pageContext.context.truncated ? /* @__PURE__ */ jsxRuntimeExports.jsx("small", { children: t("truncated") }) : null,
+              pageContext.stale ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", disabled: processing, onClick: () => void refreshPageContext(pageContext), children: t("refresh") }) : null,
+              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "chip-remove", "aria-label": t("removePageContext"), onClick: () => updateDraft((current) => ({ ...current, pages: current.pages.filter((page) => page.context.sourceId !== pageContext.context.sourceId) })), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {}) })
+            ] }, pageContext.context.sourceId)),
             attachments.map((attachment, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "attachment-chip", children: [
-              attachment.type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, {}),
+              attachment.type === "image" ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "attachment-thumbnail", "aria-label": t("preview"), onClick: () => setPreview({ title: attachment.name, image: `data:${attachment.mimeType};base64,${attachment.data}` }), children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: `data:${attachment.mimeType};base64,${attachment.data}`, alt: attachment.name }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: attachment.type === "image" ? t("image") : t("file") }),
                 " · ",
-                attachment.name
+                attachment.name,
+                " · ",
+                formatFileSize(attachment.size)
               ] }),
               /* @__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}`))
@@ -27369,7 +28323,7 @@ function ChatPanel() {
               className: "file-input",
               type: "file",
               multiple: true,
-              accept: "image/*,.pdf,text/plain,text/markdown,.json,.csv",
+              accept: BROWSER_ATTACHMENT_ACCEPT,
               onChange: (event) => void addFiles(event.target.files)
             }
           ),
@@ -27394,22 +28348,71 @@ function ChatPanel() {
             },
             tab.id
           )) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-mention-empty", children: t("noMatchingTabs") }) }) : null,
+          commandRange ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tab-mention-menu", role: "listbox", "aria-label": t("commandsAndSkills"), children: [
+            commandsLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "message-skeleton", "aria-label": t("loadingCommands"), children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", {}),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", {}),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", {})
+            ] }) : commandItems.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", role: "option", "aria-selected": index === commandIndex, disabled: item.disabled, title: item.disabled ? t("skillUnavailable") : item.description, className: index === commandIndex ? "selected" : "", onMouseDown: (event) => {
+              event.preventDefault();
+              chooseCommand(item);
+            }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: item.name }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { children: [
+                item.description,
+                item.disabled ? ` · ${t("skillUnavailable")}` : ""
+              ] })
+            ] }, item.id)),
+            !commandsLoading && !commandItems.length ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-mention-empty", children: t("noMatchingCommands") }) : null
+          ] }) : null,
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "composer-input-row", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "textarea",
             {
               ref: textarea,
               value: draft,
               onChange: (event) => {
+                historyWalk.current = void 0;
                 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);
+                if (event.clipboardData.files.length) {
+                  event.preventDefault();
+                  void addFiles(event.clipboardData.files);
+                  return;
+                }
+                const pasted = classifyPastedText(event.clipboardData.getData("text/plain"));
+                if (pasted) {
+                  event.preventDefault();
+                  void addFiles([new File([pasted.text], pasted.name, { type: pasted.mimeType })]);
+                }
+              },
+              onCompositionStart: () => {
+                composing.current = true;
+              },
+              onCompositionEnd: () => {
+                composing.current = false;
               },
               onKeyDown: (event) => {
+                if (composing.current || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+                if (commandRange) {
+                  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                    event.preventDefault();
+                    if (commandItems.length) setCommandIndex((current) => (current + (event.key === "ArrowDown" ? 1 : -1) + commandItems.length) % commandItems.length);
+                    return;
+                  }
+                  if (event.key === "Escape") {
+                    event.preventDefault();
+                    setCommandsOpen(false);
+                    return;
+                  }
+                  if (event.key === "Enter" || event.key === "Tab") {
+                    event.preventDefault();
+                    if (commandItems[commandIndex]) chooseCommand(commandItems[commandIndex]);
+                    return;
+                  }
+                }
                 if (tabMention) {
                   if (event.key === "ArrowDown" && mentionTabs.length) {
                     event.preventDefault();
@@ -27435,18 +28438,35 @@ function ChatPanel() {
                     return;
                   }
                 }
+                if ((event.key === "ArrowUp" || event.key === "ArrowDown") && !event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                  const input = event.currentTarget;
+                  const walk = historyWalk.current;
+                  if (walk || event.key === "ArrowUp" && input.selectionStart === 0 && input.selectionEnd === 0) {
+                    const history = walk ?? { items: snapshot.messages.filter((message) => message.role === "user" && message.text.trim()).map((message) => message.text).reverse(), index: -1, draft };
+                    const index = event.key === "ArrowUp" ? Math.min(history.index + 1, history.items.length - 1) : history.index - 1;
+                    if (index >= 0 || walk) {
+                      event.preventDefault();
+                      historyWalk.current = index >= 0 ? { ...history, index } : void 0;
+                      setDraft(index >= 0 ? history.items[index] : history.draft);
+                      requestAnimationFrame(() => textarea.current?.setSelectionRange(0, 0));
+                      return;
+                    }
+                  }
+                }
                 if (event.key === "Enter" && !event.shiftKey) {
                   event.preventDefault();
-                  event.currentTarget.form?.requestSubmit();
+                  if ((event.ctrlKey || event.metaKey) && snapshot.runId) void submit(event, true);
+                  else event.currentTarget.form?.requestSubmit();
                 }
               },
               onBlur: () => {
+                setCommandsOpen(false);
                 mentionRequest.current += 1;
                 setTabMention(void 0);
                 setMentionTabs([]);
               },
               placeholder: t("composerPlaceholder"),
-              disabled: snapshot.submitting,
+              disabled: !draftReady || sending || snapshot.submitting || snapshot.sessionLoading || processing,
               rows: 1
             }
           ) }),
@@ -27545,11 +28565,19 @@ function ChatPanel() {
               ] })
             ] }),
             /* @__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, {}) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ModelControls, { models: snapshot.models, config: snapshot.modelConfig, disabled: sending || processing || voiceBusy || snapshot.submitting || snapshot.sessionLoading || Boolean(snapshot.runId), onModel: (model) => updateModelConfig(async () => {
+                if (!client.currentSessionKey) {
+                  const payload = drafts.get(draftKey);
+                  await client.createSession();
+                  drafts.update(keyForSession(client.currentSessionKey), () => payload);
+                  drafts.update(draftKey, () => EMPTY_DRAFT);
+                }
+                await client.updateModel(model);
+              }), onThinking: (level) => updateModelConfig(() => client.updateThinking(level)) }, draftKey),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(VoiceInput, { disabled: sending || processing || snapshot.submitting || snapshot.sessionLoading || !draftReady || !snapshot.endpointReady, onBusy: setVoiceBusy, onTranscript: (text) => updateDraft((current) => ({ ...current, text: current.text.trim() ? `${current.text} ${text}` : text })) }, `voice:${draftKey}`),
+              snapshot.runId && (draft.trim() || attachments.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "composer-icon-button", disabled: !canSend, title: t("interruptSend"), "aria-label": t("interruptSend"), onClick: (event) => void submit(event, true), children: /* @__PURE__ */ jsxRuntimeExports.jsx(SendIcon, {}) }) : 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, {}) }) : null,
+              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "send-button", type: "submit", "aria-label": snapshot.runId ? t("queueMessage") : t("sendMessage"), title: snapshot.runId ? t("queueMessage") : t("sendMessage"), disabled: !canSend || !draft.trim() && attachments.length === 0 || Boolean(tabMention) || Boolean(commandRange), children: /* @__PURE__ */ jsxRuntimeExports.jsx(SendIcon, {}) })
             ] })
           ] })
         ]
@@ -27809,7 +28837,7 @@ function SidePanelApp({ initialLocale, initialTheme }) {
           invitation ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => void cancelPairing(), disabled: state === "pairing", children: t("cancelPairing") }) : null
         ] })
       ] }) : null
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChatPanel, {})
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChatPanel, { gatewayId: profile.gatewayId }, profile.gatewayId)
   ] });
 }
 
@@ -27820,5 +28848,5 @@ const [locale, theme] = await Promise.all([
   loadSidePanelThemePreference()
 ]);
 clientExports.createRoot(root).render(
-  /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SidePanelApp, { initialLocale: locale, initialTheme: theme }) })
+  /* @__PURE__ */ jsxRuntimeExports.jsx(reactExports.StrictMode, { children: new URLSearchParams(location.search).has("microphone-permission") ? /* @__PURE__ */ jsxRuntimeExports.jsx(MicrophonePermission, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SidePanelApp, { initialLocale: locale, initialTheme: theme }) })
 );